:root {

    --background:
        #eef1f5;

    --card:
        #ffffff;

    --text:
        #1d2939;

    --muted:
        #667085;

    --border:
        #d0d5dd;

    --blue:
        #005293;

}


/* =========================
   GRUND
========================= */

* {

    box-sizing:
        border-box;

}


body {

    margin:
        0;

    min-height:
        100vh;

    font-family:

        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

}


.container {

    width:
        100%;

    max-width:
        none;

    margin:
        0 auto;

    padding:
        20px;

}


/* =========================
   HEADER
========================= */

/* header {

    text-align:
        center;
    margin-top:
        -11px;
    margin-bottom:
        20px;
    width:
        100%;
    max-width:
        2200px;
} */

header {

    position:
        relative;

    width:
        100%;

    max-width:
        2200px;

    box-sizing:
        border-box;

    margin:
        -11px auto 0;

    padding:
        0 20px;

    text-align:
        center;

}


header h1 {

    margin:
        0;

    padding:
        0 70px;

    font-size:
        clamp(
            2rem,
            5vw,
            3.5rem
        );

}


header p {

    margin:
        8px 0 0;

    padding:
        0 70px;

    color:
        var(--muted);

    font-size:
        1.1rem;

}


/* =========================
   VAL / KONTROLLER
========================= */

/* =========================
   HAMBURGERMENY
========================= */

.header-actions {

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    right:
        0;

    height:
        44px;

    z-index:
        1000;

    margin:
        auto 0;

}

.others-block {

    display:
        none;

}


.others-block.visible {

    display:
        flex;

}

.hamburger-menu {

    position:
        relative;

}


.menu-toggle {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    cursor:
        pointer;

    list-style:
        none;

    font-size:
        1.7rem;

    line-height:
        1;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    background:
        var(--card);

    color:
        var(--text);

}


.menu-toggle::-webkit-details-marker {

    display:
        none;

}


.menu-backdrop {

    display:
        none;

}


.hamburger-menu[open]
>
.menu-backdrop {

    display:
        block;

    position:
        fixed;

    inset:
        0;

    z-index:
        998;

    background:
        rgba(
            0,
            0,
            0,
            0.45
        );

}


.controls {

    position:
        fixed;

    top:
        0;

    left:
        0;

    z-index:
        999;

    display:
        none;

    flex-direction:
        column;

    gap:
        16px;

    width:
        min(
            340px,
            85vw
        );

    height:
        100vh;

    box-sizing:
        border-box;

    padding:
        24px;

    overflow-y:
        auto;

    background:
        var(--card);

    box-shadow:
        8px 0 30px
        rgba(
            0,
            0,
            0,
            0.25
        );

}


.hamburger-menu[open]
>
.controls {

    display:
        flex;

}


.menu-title {

    margin-bottom:
        8px;

    padding-bottom:
        14px;

    border-bottom:
        1px solid var(--border);

}


.menu-title h2 {

    margin:
        0;

    font-size:
        1.25rem;

}


.controls label {

    font-weight:
        bold;

}


.controls select {

    width:
        100%;

    min-width:
        0;

    max-width:
        none;

    padding:
        10px 14px;

    font:
        inherit;

    font-size:
        1rem;

    border:
        1px solid
        var(--border);

    border-radius:
        6px;

    background:
        var(--card);

    color:
        var(--text);

}

/* select {

    min-width:
        250px;

    padding:
        10px 14px;

    font-size:
        1rem;

    border:
        1px solid
        var(--border);

    border-radius:
        6px;

    background:
        var(--card);

    color:
        var(--text);

} */


select:focus {

    outline:
        2px solid
        var(--blue);

    outline-offset:
        2px;

}


/* =========================
   LAYOUT
========================= */

.dashboard {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

    width:
        100%;

    flex:
        1;

    min-height:
        0;

}


.card {

    background:
        var(--card);

    border-radius:
        14px;

    padding:
        20px;

    box-shadow:

        0 4px 15px
        rgba(
            0,
            0,
            0,
            0.08
        );

}


.card h2 {

    text-align:
        center;

    margin-top:
        0;

    margin-bottom:
        20px;

}


/* =========================
   MAJORITETSSTATUS
========================= */

.majority-status {

    margin-top:
        5px;

    font-size:
        0.9rem;

    font-weight:
        bold;

}


.majority-reached {

    color:
        #087830;

}


.majority-not-reached {

    color:
        var(--muted);

}

/* =========================
   DIAGRAM
========================= */

.bar-chart-container,
.pie-chart-container {

    position:
        relative;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    height:
        max(
            480px,
            calc(
                100vh - 600px
            )
        );

}

/* =========================
   BLOCKTOTALER
========================= */

.block-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

.block-totals.has-others {
    grid-template-columns: 1fr 1fr 1fr;
}

.others-block {
    display: none;
}

.others-block.visible {
    display: flex;
}


.block {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    padding:
        15px;
    
    border-radius:
        10px;

    border:
        1px solid
        #000000;

    text-align:
        center;

    transition:
        background 0.5s ease,
        box-shadow 0.5s ease,
        border 0.5s ease,
        color 0.5s ease;

}


.block-title {

    color:
        var(--muted);

    font-size:
        0.9rem;

}


.block-value {

    font-size:
        2rem;

    font-weight:
        bold;

}


/* =========================
   BLOCK MED EGEN MAJORITET
========================= */

.block.majority-reached-block {

    color:
        #ffffff;

    border:
        2px solid
        #000000;

    box-shadow:
        inset 0 0 0 2px
        rgba(
            0,
            0,
            0,
            0.4
        );

}


.block.majority-reached-block
.block-title,

.block.majority-reached-block
.block-value,

.block.majority-reached-block
.majority-status,

.block.majority-reached-block
.majority-reached {

    color:
        #ffffff;

}


/* =========================
   STATUS
========================= */

.status {

    display:
        flex;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        20px;

    padding:
        15px;

    background:
        var(--card);

    border-radius:
        10px;

    box-shadow:

        0 2px 10px
        rgba(
            0,
            0,
            0,
            0.06
        );

    color:
        var(--muted);


    width:
        100%;

}


/* =========================
   FEL
========================= */

.error {

    display:
        none;

    margin-top:
        20px;

    padding:
        15px;

    background:
        #ffe5e5;

    color:
        #8b0000;

    border-radius:
        10px;

}


/* =========================
   DARK MODE
========================= */

body.dark-mode {

    --background:
        #111827;

    --card:
        #1f2937;

    --text:
        #f3f4f6;

    --muted:
        #9ca3af;

    --border:
        #4b5563;

    --blue:
        #4da3ff;

}


/* Mörkare skuggor */

body.dark-mode
.card {

    box-shadow:

        0 4px 15px
        rgba(
            0,
            0,
            0,
            0.35
        );

}


body.dark-mode
.status {

    box-shadow:

        0 2px 10px
        rgba(
            0,
            0,
            0,
            0.30
        );

}
/* =========================
   DARKMODE-KNAPP
========================= */

#themeToggle {

    width:
        100%;

    margin-top:
        auto;

    padding:
        12px 18px;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    background:
        var(--card);

    color:
        var(--text);

    cursor:
        pointer;

    box-shadow:

        0 4px 15px
        rgba(
            0,
            0,
            0,
            0.15
        );

}

/* Majoritetsstatus */

body.dark-mode
.majority-reached {

    color:
        #86efac;

}


/* Blockramar */

body.dark-mode
.block {

    border:
        1px solid
        #fff8e7;

}


body.dark-mode
.block.majority-reached-block {

    border:
        2px solid
        #fff8e7;

    color:
        #ffffff;

    box-shadow:
        inset 0 0 0 2px
        rgba(
            255,
            255,
            255,
            0.4
        );

}


body.dark-mode
.block.majority-reached-block
.block-title,

body.dark-mode
.block.majority-reached-block
.block-value,

body.dark-mode
.block.majority-reached-block
.majority-status,

body.dark-mode
.block.majority-reached-block
.majority-reached {

    color:
        #ffffff;

}


/* Felmeddelande */

body.dark-mode
.error {

    background:
        #4a1d1d;

    color:
        #fecaca;

}


/* =========================
   MOBIL / MELLANSTOR SKÄRM
========================= */

@media
(
    max-width: 900px
) {

    .dashboard {

        grid-template-columns:
            1fr;

    }


    .bar-chart-container,
    .pie-chart-container {

        height:
            clamp(
                320px,
                45vw,
                480px
            );

    }

}


/* =========================
   MOBIL
========================= */

@media
(
    max-width: 600px
) {

    .container {

        padding:
            10px;

    }


    header {

        padding:
            0 10px;

    }


    header h1 {

        padding:
            0 65px;

        font-size:
            clamp(
                2.2rem,
                11vw,
                4rem
            );

    }


    header p {

        padding:
            0 65px;

        font-size:
            1rem;

    }


    .header-actions {

        right:
            10px;

    }


    .controls {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    select {

        width:
            100%;

    }


    .card {

        padding:
            10px;

    }


    .bar-chart-container,
    .pie-chart-container {

        height:
            clamp(
                280px,
                85vw,
                400px
            );

    }


    .status {

        flex-direction:
            column;

    }

}
.map-card {

    margin-top:
        20px;

    background:
        var(--card);

    border-radius:
        14px;

    padding:
        20px;

    box-shadow:

        0 4px 15px
        rgba(
            0,
            0,
            0,
            0.08
        );

}


.map-card h2 {

    text-align:
        center;

    margin-top:
        0;

}


#map {

    width:
        100%;

    height:
        600px;

    border-radius:
        10px;

    overflow:
        hidden;

}


@media
(
    max-width: 900px
) {

    #map {

        height:
            500px;

    }

}


@media
(
    max-width: 600px
) {

    #map {

        height:
            400px;

    }

}

.filter-control {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hamburger-menu[open]
>
.menu-toggle {

    position:
        relative;

    z-index:
        1000;

}


@media
(
    max-width: 600px
) {

    .controls {

        width:
            min(
                360px,
                90vw
            );

        padding:
            20px;

    }

}

.content-container {

    position:
        relative;

    width:
        100%;

    max-width:
        2200px;

    box-sizing:
        border-box;

    margin:
        20px auto 0;

}
/* =====================================
    ÖVRIGA-BLOCK
===================================== */

.block.others-block {
    display: none;
}


.block.others-block.visible {
    display: flex;
}