@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-lbqbc54ig8] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-lbqbc54ig8] {
    flex: 1;
}

.sidebar[b-lbqbc54ig8] {
    background-image: linear-gradient(180deg, #0b1a38 0%, #081428 55%, #050b18 100%);
}

.top-row[b-lbqbc54ig8] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-lbqbc54ig8]  a, .top-row[b-lbqbc54ig8]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-lbqbc54ig8]  a:hover, .top-row[b-lbqbc54ig8]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-lbqbc54ig8]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-lbqbc54ig8] {
        justify-content: space-between;
    }

    .top-row[b-lbqbc54ig8]  a, .top-row[b-lbqbc54ig8]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-lbqbc54ig8] {
        flex-direction: row;
    }

    .sidebar[b-lbqbc54ig8] {
        width: 268px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-lbqbc54ig8] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-lbqbc54ig8]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-lbqbc54ig8] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-lbqbc54ig8] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-lbqbc54ig8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar navigation — command-centre theme.

   A deep navy rail with an emblem block at the top, one line icon per destination, a solid
   blue pill marking the current page, and summary cards at the foot. Everything is driven
   by currentColor so an icon brightens with its label rather than needing a second rule. */

.navbar-toggler[b-3zeuluwkrh] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.25rem;
    color: white;
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.65%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem rgba(255, 255, 255, 0.08);
}

.navbar-toggler:checked[b-3zeuluwkrh] { background-color: rgba(255, 255, 255, 0.18); }

/* ---------- Brand ---------- */
.nav-brand[b-3zeuluwkrh] {
    padding: 0.95rem 1rem 0.85rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.14);
}

.navbar-brand[b-3zeuluwkrh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.faac-emblem[b-3zeuluwkrh] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
}

.faac-emblem svg[b-3zeuluwkrh] { width: 34px; height: 34px; }
.faac-emblem-ring[b-3zeuluwkrh] { fill: none; stroke: #22c55e; stroke-width: 1.6; opacity: 0.85; }
.faac-emblem-disc[b-3zeuluwkrh] { fill: rgba(34, 197, 94, 0.12); stroke: rgba(34, 197, 94, 0.35); stroke-width: 1; }
.faac-emblem-mark[b-3zeuluwkrh] { fill: none; stroke: #4ade80; stroke-width: 1.7; stroke-linejoin: round; }
.faac-emblem-core[b-3zeuluwkrh] { fill: #22c55e; }

.faac-brand-text[b-3zeuluwkrh] { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }

.faac-brand-mark[b-3zeuluwkrh] {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #ffffff;
}

.faac-brand-sub[b-3zeuluwkrh] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 0.12rem;
}

/* ---------- Items ---------- */
.nav-item[b-3zeuluwkrh] { font-size: 0.82rem; padding: 0 0.35rem 0.12rem; }
.nav-item:first-of-type[b-3zeuluwkrh] { padding-top: 0.7rem; }

.nav-item[b-3zeuluwkrh]  .nav-link {
    color: #a9b8d4;
    background: none;
    border: none;
    border-radius: 9px;
    height: 2.35rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 1.1;
    width: 100%;
    padding: 0 0.6rem;
    font-weight: 500;
    position: relative;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.nav-item[b-3zeuluwkrh]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* The current page is a solid pill with a brighter bar down its leading edge — the same
   treatment the reference dashboards use, and far easier to find than a tint. */
.nav-item[b-3zeuluwkrh]  a.active {
    background-color: #1d4ed8;
    background-image: linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 10px rgba(29, 78, 216, 0.45);
}

.nav-item[b-3zeuluwkrh]  a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42rem;
    bottom: 0.42rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #7dd3fc;
}

.nav-ico[b-3zeuluwkrh] {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6f86ad;
}

.nav-ico[b-3zeuluwkrh]  svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-item[b-3zeuluwkrh]  .nav-link:hover .nav-ico,
.nav-item[b-3zeuluwkrh]  a.active .nav-ico { color: #ffffff; }

.nav-text[b-3zeuluwkrh] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Group labels and sub-items ---------- */
.nav-item-group-label[b-3zeuluwkrh] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: #5f74a0;
    padding: 0.55rem 0.95rem 0.3rem;
}

/* A hairline guide ties the children to their heading without indenting them off-screen. */
.nav-group[b-3zeuluwkrh] {
    position: relative;
    margin-left: 1.15rem;
    padding-left: 0.45rem;
    border-left: 1px solid rgba(120, 165, 235, 0.18);
}

.nav-group .nav-item[b-3zeuluwkrh] { padding-left: 0; padding-right: 0.35rem; }

.nav-sub[b-3zeuluwkrh]  .nav-link {
    height: 1.30rem;
    font-size: 0.795rem;
    gap: 0.5rem;
}

.nav-sub .nav-ico[b-3zeuluwkrh], .nav-sub .nav-ico[b-3zeuluwkrh]  svg { width: 15px; height: 15px; }

/* ---------- Foot cards ---------- */
.faac-nav-cards[b-3zeuluwkrh] {
    padding: 0.9rem 0.7rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faac-nav-card[b-3zeuluwkrh] {
    border-radius: 10px;
    padding: 0.6rem 0.7rem 0.65rem;
    border: 1px solid rgba(120, 165, 235, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.faac-nav-card-about[b-3zeuluwkrh] {
    background: linear-gradient(160deg, rgba(29, 78, 216, 0.22), rgba(12, 28, 66, 0.35));
    border-color: rgba(96, 141, 224, 0.35);
}

.faac-nav-card-coverage[b-3zeuluwkrh] {
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.14), rgba(8, 32, 24, 0.3));
    border-color: rgba(34, 197, 94, 0.3);
}

.faac-nav-card-head[b-3zeuluwkrh] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}

.faac-card-ico[b-3zeuluwkrh] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.faac-nav-card-about .faac-card-ico[b-3zeuluwkrh] { color: #ffd166; }
.faac-nav-card-coverage .faac-card-ico[b-3zeuluwkrh] { color: #4ade80; }

.faac-nav-card-label[b-3zeuluwkrh] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #cfe0f8;
}

.faac-nav-card-value[b-3zeuluwkrh] {
    font-size: 0.84rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.faac-nav-card-meta[b-3zeuluwkrh] {
    font-size: 0.64rem;
    color: #9fb4d4;
    margin-top: 0.1rem;
}

.faac-nav-card-foot[b-3zeuluwkrh] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    color: #8fa3c2;
    margin-top: 0.35rem;
    padding-top: 0.32rem;
    border-top: 1px solid rgba(120, 165, 235, 0.16);
}

.faac-nav-dot[b-3zeuluwkrh] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    flex-shrink: 0;
}

.faac-nav-footer-value[b-3zeuluwkrh] {
    font-size: 0.64rem;
    font-weight: 600;
    color: #cfe0f8;
    margin-top: 0.35rem;
}

.faac-nav-footer-sub[b-3zeuluwkrh] {
    font-size: 0.655rem;
    line-height: 1.35;
    color: #a9b8d4;
}

/* ---------- Scroller ---------- */
.nav-scrollable[b-3zeuluwkrh] { display: none; }
.navbar-toggler:checked ~ .nav-scrollable[b-3zeuluwkrh] { display: block; }

@media (min-width: 641px) {
    .navbar-toggler[b-3zeuluwkrh] { display: none; }

    .nav-scrollable[b-3zeuluwkrh] {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100vh - 4.1rem);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(120, 165, 235, 0.45) transparent;
    }

    .nav-scrollable[b-3zeuluwkrh]::-webkit-scrollbar { width: 8px; }
    .nav-scrollable[b-3zeuluwkrh]::-webkit-scrollbar-track { background: transparent; }
    .nav-scrollable[b-3zeuluwkrh]::-webkit-scrollbar-thumb {
        background: rgba(120, 165, 235, 0.35);
        border-radius: 4px;
    }
    .nav-scrollable[b-3zeuluwkrh]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.6); }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-cf6af7l89g],
.components-reconnect-repeated-attempt-visible[b-cf6af7l89g],
.components-reconnect-failed-visible[b-cf6af7l89g],
.components-pause-visible[b-cf6af7l89g],
.components-resume-failed-visible[b-cf6af7l89g],
.components-rejoining-animation[b-cf6af7l89g] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-retrying[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-failed[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-cf6af7l89g] {
    display: block;
}


#components-reconnect-modal[b-cf6af7l89g] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-cf6af7l89g 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-cf6af7l89g 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-cf6af7l89g 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-cf6af7l89g]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-cf6af7l89g 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-cf6af7l89g {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-cf6af7l89g {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-cf6af7l89g {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-cf6af7l89g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-cf6af7l89g] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-cf6af7l89g] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-cf6af7l89g] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-cf6af7l89g] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-cf6af7l89g] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-cf6af7l89g] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-cf6af7l89g 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-cf6af7l89g] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-cf6af7l89g {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/CompareLgcs.razor.rz.scp.css */
/* LGC Head-to-Head Comparison — same dark surfaces, filter bar, panels, table and
   insight blocks as the rest of the dashboard, with one addition: a card per compared
   council, carrying the colour that council keeps across every chart on the page.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size. */

.so-page[b-ygcwsgipd6] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-ygcwsgipd6] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-ygcwsgipd6] {
    background: #020b2b;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 285px;
    min-width: 0;
}

.sa-brand-logo[b-ygcwsgipd6] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-ygcwsgipd6] { min-width: 0; }

.sa-brand-title[b-ygcwsgipd6] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    line-height: 1.15;
}

.sa-brand-sub[b-ygcwsgipd6] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #35d17a;
    line-height: 1.2;
}

.sa-brand-range[b-ygcwsgipd6] {
    font-size: 0.63rem;
    color: #b6c1d2;
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.sa-filter[b-ygcwsgipd6] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-ygcwsgipd6] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.sa-field label[b-ygcwsgipd6] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-ygcwsgipd6] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-ygcwsgipd6] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-ygcwsgipd6] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-ygcwsgipd6] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-ygcwsgipd6] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
}

.sa-seg:hover[b-ygcwsgipd6] { background: #e2e7f3; }

.sa-seg-on[b-ygcwsgipd6] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-ygcwsgipd6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-ygcwsgipd6] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #6b7590;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-ygcwsgipd6] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-ygcwsgipd6]::placeholder { color: #98a1b8; }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-ygcwsgipd6] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
}

.sa-btn-apply[b-ygcwsgipd6] { background: #058940; }
.sa-btn-apply:hover[b-ygcwsgipd6] { background: #047235; }
.sa-btn-apply:disabled[b-ygcwsgipd6] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-ygcwsgipd6] { background: #8216d8; }
.sa-btn-reset:hover[b-ygcwsgipd6] { background: #6f10ba; }
.sa-btn-export[b-ygcwsgipd6] { background: #8216d8; }
.sa-btn-export:hover[b-ygcwsgipd6] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-ygcwsgipd6] { background: #0324d9; }
.sa-btn-print:hover[b-ygcwsgipd6] { background: #021fb8; }

.sa-btn-icon[b-ygcwsgipd6] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-ygcwsgipd6] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-ygcwsgipd6],
.sa-select-state[b-ygcwsgipd6],
.sa-select-zone[b-ygcwsgipd6] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-ygcwsgipd6] { color: #9fb4d4; font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-ygcwsgipd6], .so-warn[b-ygcwsgipd6] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-ygcwsgipd6] { background: #011140; border: 1px solid rgba(120, 165, 235, 0.22); }
.so-empty strong[b-ygcwsgipd6] { color: #ffffff; font-size: 0.9rem; }
.so-empty span[b-ygcwsgipd6] { color: #9fabc0; font-size: 0.76rem; }

.sa-empty-inline[b-ygcwsgipd6] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-ygcwsgipd6] { font-size: 0.76rem; }
.sa-empty-inline span[b-ygcwsgipd6] { font-size: 0.66rem; }

.so-warn[b-ygcwsgipd6] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-ygcwsgipd6] { color: #ffd79a; font-size: 0.76rem; }
.so-warn span[b-ygcwsgipd6] { color: #cfb894; font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-ygcwsgipd6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-ygcwsgipd6] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-ygcwsgipd6] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-ygcwsgipd6] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-ygcwsgipd6] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-ygcwsgipd6] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-ygcwsgipd6] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-ygcwsgipd6] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-ygcwsgipd6] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-ygcwsgipd6] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-ygcwsgipd6] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-ygcwsgipd6] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-ygcwsgipd6] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-ygcwsgipd6] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-ygcwsgipd6] { grid-template-columns: 1fr 1fr; }

.so-panel[b-ygcwsgipd6] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-ygcwsgipd6] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-ygcwsgipd6] {
    font-weight: 500;
    font-size: 0.6rem;
    color: #9fb4d4;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-ygcwsgipd6]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-ygcwsgipd6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-ygcwsgipd6] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-ygcwsgipd6] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-ygcwsgipd6] { background: rgba(120, 165, 235, 0.16); color: #bcd3f2; }
.sa-chip-search[b-ygcwsgipd6] { background: rgba(245, 200, 66, 0.16); color: #f5d98a; }
.sa-chip-view[b-ygcwsgipd6] { background: rgba(47, 168, 90, 0.18); color: #8ee4ab; }

/* ---------- Tiles ---------- */
.so-tiles[b-ygcwsgipd6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-ygcwsgipd6] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-ygcwsgipd6] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.so-tile-good[b-ygcwsgipd6] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-ygcwsgipd6] { border-color: rgba(120, 165, 235, 0.4); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-ygcwsgipd6] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-tile-val[b-ygcwsgipd6] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-ygcwsgipd6] { font-size: 0.56rem; color: #a8b6cd; }

/* ---------- The records table ---------- */
.so-table-scroll[b-ygcwsgipd6] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 165, 235, 0.5) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-ygcwsgipd6] { max-height: 312px; }

.so-table-scroll[b-ygcwsgipd6]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-ygcwsgipd6]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.so-table-scroll[b-ygcwsgipd6]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-ygcwsgipd6]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-ygcwsgipd6] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-ygcwsgipd6] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-ygcwsgipd6] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.12);
    color: #dfe6f0;
}

.so-table tbody tr:nth-child(even) td[b-ygcwsgipd6] { background: rgba(255, 255, 255, 0.022); }
.so-table tbody tr:hover td[b-ygcwsgipd6] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-ygcwsgipd6] { text-align: right; }
.so-table thead th.so-num[b-ygcwsgipd6] { text-align: right; }
.so-money[b-ygcwsgipd6] { font-variant-numeric: tabular-nums; }
.so-td-state[b-ygcwsgipd6] { font-weight: 700; color: #ffffff; }

.so-table tfoot td[b-ygcwsgipd6] {
    position: sticky;
    bottom: 0;
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid #0b2358;
}

.so-table tfoot .so-td-state[b-ygcwsgipd6] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-ygcwsgipd6], .sa-td-period[b-ygcwsgipd6] { width: 6.2rem; }
.sa-th-lgcs[b-ygcwsgipd6] { width: 5.2rem; }

.sa-period-pill[b-ygcwsgipd6] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid rgba(120, 165, 235, 0.26);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: #cddff7;
}

.sa-fct-tag[b-ygcwsgipd6] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-ygcwsgipd6] { color: #9fc8ff; font-weight: 600; }
.sa-td-lgc-amt[b-ygcwsgipd6] { color: #93e6ac; font-weight: 600; }

.sa-count-chip[b-ygcwsgipd6] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #8ee4ab;
    text-align: center;
}

.sa-zone-chip[b-ygcwsgipd6] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-ygcwsgipd6] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-ygcwsgipd6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-ygcwsgipd6] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-ygcwsgipd6] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-ygcwsgipd6] { margin-top: 0.1rem; }

.exec-insight-heading[b-ygcwsgipd6] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5c842;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-ygcwsgipd6] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-ygcwsgipd6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-ygcwsgipd6] {
    color: #93a1b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-ygcwsgipd6] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-ygcwsgipd6] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-ygcwsgipd6] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-trend-list li:last-child[b-ygcwsgipd6] { border-bottom: none; }

.exec-trend-arrow[b-ygcwsgipd6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-ygcwsgipd6]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-ygcwsgipd6] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-ygcwsgipd6] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-ygcwsgipd6] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-ygcwsgipd6] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-insights-list li:last-child[b-ygcwsgipd6] { border-bottom: none; }

.exec-insight-icon[b-ygcwsgipd6] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-ygcwsgipd6]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-ygcwsgipd6] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-ygcwsgipd6] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-ygcwsgipd6] {
    font-size: 0.58rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-ygcwsgipd6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-ygcwsgipd6], .sa-row-c[b-ygcwsgipd6] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-ygcwsgipd6] { flex-direction: column; }
    .sa-brand[b-ygcwsgipd6] { flex: 1 1 auto; }
    .so-kpis[b-ygcwsgipd6] { flex-direction: column; }
    .so-kpi[b-ygcwsgipd6] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-ygcwsgipd6] { display: none !important; }
    .sa-table-scroll[b-ygcwsgipd6] { max-height: none; overflow: visible; }
}

/* ---------- The compare slots inside the filter bar ---------- */
/* Each slot is underlined in the colour that state will carry in the charts, so the
   picker and the trend lines agree before Apply is pressed. */
.cmp-slot-row[b-ygcwsgipd6] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.cmp-slot[b-ygcwsgipd6] {
    border-bottom: 2px solid transparent;
    padding-bottom: 0.12rem;
    min-width: 0;
}

.cmp-slot-select[b-ygcwsgipd6] { width: max-content; min-width: 0; }

/* A council slot is two stacked boxes: the state narrows the list, the council picks. */
.cmp-slot-pair[b-ygcwsgipd6] {
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
}

.cmp-slot-pair .cmp-slot-select:disabled[b-ygcwsgipd6] {
    background-color: #e9ecf4;
    color: #8b94ad;
    cursor: not-allowed;
}

/* ---------- One card per compared state ---------- */
.cmp-cards[b-ygcwsgipd6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.6rem;
}

.cmp-card[b-ygcwsgipd6] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-top: 3px solid #3987e5;
    border-radius: 10px;
    padding: 0.4rem 0.6rem 0.5rem;
    min-width: 0;
}

.cmp-card-head[b-ygcwsgipd6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}

.cmp-card-name[b-ygcwsgipd6] {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-card-share[b-ygcwsgipd6] {
    font-size: 0.54rem;
    font-weight: 700;
    color: #9fb4d4;
    white-space: nowrap;
}

.cmp-card-state[b-ygcwsgipd6] {
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #93a1b8;
}

.cmp-card-total[b-ygcwsgipd6] {
    font-size: 1.02rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0.05rem 0 0.25rem;
}

/* Two metrics per row on a narrow card, four across on a wide one, so a group of two
   or three does not leave half the card empty. */
.cmp-card-grid[b-ygcwsgipd6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 0.2rem 0.5rem;
}

.cmp-card-grid > div[b-ygcwsgipd6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cmp-metric-label[b-ygcwsgipd6] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #93a1b8;
    white-space: nowrap;
}

.cmp-metric-value[b-ygcwsgipd6] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #eaf0f8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-metric-of[b-ygcwsgipd6] {
    font-size: 0.5rem;
    font-weight: 600;
    color: #93a1b8;
    margin-left: 0.2rem;
}

.cmp-metric-sub[b-ygcwsgipd6] { font-size: 0.5rem; color: #8c9ab2; }

/* The leader of each bucket, chipped in that state's own colour. */
.cmp-leader-chip[b-ygcwsgipd6] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
    .cmp-cards[b-ygcwsgipd6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .cmp-cards[b-ygcwsgipd6] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/CompareStates.razor.rz.scp.css */
/* State Head-to-Head Comparison — same dark surfaces, filter bar, panels, table and
   insight blocks as the rest of the dashboard, with one addition: a card per compared
   state, carrying the colour that state keeps across every chart on the page.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size. */

.so-page[b-84osl34988] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-84osl34988] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-84osl34988] {
    background: #020b2b;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 285px;
    min-width: 0;
}

.sa-brand-logo[b-84osl34988] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-84osl34988] { min-width: 0; }

.sa-brand-title[b-84osl34988] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    line-height: 1.15;
}

.sa-brand-sub[b-84osl34988] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #35d17a;
    line-height: 1.2;
}

.sa-brand-range[b-84osl34988] {
    font-size: 0.63rem;
    color: #b6c1d2;
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.sa-filter[b-84osl34988] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-84osl34988] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.sa-field label[b-84osl34988] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-84osl34988] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-84osl34988] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-84osl34988] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-84osl34988] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-84osl34988] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
}

.sa-seg:hover[b-84osl34988] { background: #e2e7f3; }

.sa-seg-on[b-84osl34988] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-84osl34988] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-84osl34988] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #6b7590;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-84osl34988] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-84osl34988]::placeholder { color: #98a1b8; }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-84osl34988] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
}

.sa-btn-apply[b-84osl34988] { background: #058940; }
.sa-btn-apply:hover[b-84osl34988] { background: #047235; }
.sa-btn-apply:disabled[b-84osl34988] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-84osl34988] { background: #8216d8; }
.sa-btn-reset:hover[b-84osl34988] { background: #6f10ba; }
.sa-btn-export[b-84osl34988] { background: #8216d8; }
.sa-btn-export:hover[b-84osl34988] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-84osl34988] { background: #0324d9; }
.sa-btn-print:hover[b-84osl34988] { background: #021fb8; }

.sa-btn-icon[b-84osl34988] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-84osl34988] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-84osl34988],
.sa-select-state[b-84osl34988],
.sa-select-zone[b-84osl34988] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-84osl34988] { color: #9fb4d4; font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-84osl34988], .so-warn[b-84osl34988] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-84osl34988] { background: #011140; border: 1px solid rgba(120, 165, 235, 0.22); }
.so-empty strong[b-84osl34988] { color: #ffffff; font-size: 0.9rem; }
.so-empty span[b-84osl34988] { color: #9fabc0; font-size: 0.76rem; }

.sa-empty-inline[b-84osl34988] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-84osl34988] { font-size: 0.76rem; }
.sa-empty-inline span[b-84osl34988] { font-size: 0.66rem; }

.so-warn[b-84osl34988] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-84osl34988] { color: #ffd79a; font-size: 0.76rem; }
.so-warn span[b-84osl34988] { color: #cfb894; font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-84osl34988] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-84osl34988] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-84osl34988] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-84osl34988] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-84osl34988] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-84osl34988] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-84osl34988] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-84osl34988] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-84osl34988] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-84osl34988] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-84osl34988] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-84osl34988] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-84osl34988] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-84osl34988] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-84osl34988] { grid-template-columns: 1fr 1fr; }

.so-panel[b-84osl34988] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-84osl34988] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-84osl34988] {
    font-weight: 500;
    font-size: 0.6rem;
    color: #9fb4d4;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-84osl34988]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-84osl34988] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-84osl34988] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-84osl34988] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-84osl34988] { background: rgba(120, 165, 235, 0.16); color: #bcd3f2; }
.sa-chip-search[b-84osl34988] { background: rgba(245, 200, 66, 0.16); color: #f5d98a; }
.sa-chip-view[b-84osl34988] { background: rgba(47, 168, 90, 0.18); color: #8ee4ab; }

/* ---------- Tiles ---------- */
.so-tiles[b-84osl34988] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-84osl34988] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-84osl34988] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.so-tile-good[b-84osl34988] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-84osl34988] { border-color: rgba(120, 165, 235, 0.4); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-84osl34988] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-tile-val[b-84osl34988] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-84osl34988] { font-size: 0.56rem; color: #a8b6cd; }

/* ---------- The records table ---------- */
.so-table-scroll[b-84osl34988] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 165, 235, 0.5) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-84osl34988] { max-height: 312px; }

.so-table-scroll[b-84osl34988]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-84osl34988]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.so-table-scroll[b-84osl34988]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-84osl34988]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-84osl34988] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-84osl34988] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-84osl34988] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.12);
    color: #dfe6f0;
}

.so-table tbody tr:nth-child(even) td[b-84osl34988] { background: rgba(255, 255, 255, 0.022); }
.so-table tbody tr:hover td[b-84osl34988] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-84osl34988] { text-align: right; }
.so-table thead th.so-num[b-84osl34988] { text-align: right; }
.so-money[b-84osl34988] { font-variant-numeric: tabular-nums; }
.so-td-state[b-84osl34988] { font-weight: 700; color: #ffffff; }

.so-table tfoot td[b-84osl34988] {
    position: sticky;
    bottom: 0;
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid #0b2358;
}

.so-table tfoot .so-td-state[b-84osl34988] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-84osl34988], .sa-td-period[b-84osl34988] { width: 6.2rem; }
.sa-th-lgcs[b-84osl34988] { width: 5.2rem; }

.sa-period-pill[b-84osl34988] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid rgba(120, 165, 235, 0.26);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: #cddff7;
}

.sa-fct-tag[b-84osl34988] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-84osl34988] { color: #9fc8ff; font-weight: 600; }
.sa-td-lgc-amt[b-84osl34988] { color: #93e6ac; font-weight: 600; }

.sa-count-chip[b-84osl34988] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #8ee4ab;
    text-align: center;
}

.sa-zone-chip[b-84osl34988] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-84osl34988] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-84osl34988] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-84osl34988] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-84osl34988] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-84osl34988] { margin-top: 0.1rem; }

.exec-insight-heading[b-84osl34988] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5c842;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-84osl34988] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-84osl34988] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-84osl34988] {
    color: #93a1b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-84osl34988] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-84osl34988] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-84osl34988] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-trend-list li:last-child[b-84osl34988] { border-bottom: none; }

.exec-trend-arrow[b-84osl34988] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-84osl34988]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-84osl34988] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-84osl34988] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-84osl34988] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-84osl34988] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-insights-list li:last-child[b-84osl34988] { border-bottom: none; }

.exec-insight-icon[b-84osl34988] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-84osl34988]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-84osl34988] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-84osl34988] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-84osl34988] {
    font-size: 0.58rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-84osl34988] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-84osl34988], .sa-row-c[b-84osl34988] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-84osl34988] { flex-direction: column; }
    .sa-brand[b-84osl34988] { flex: 1 1 auto; }
    .so-kpis[b-84osl34988] { flex-direction: column; }
    .so-kpi[b-84osl34988] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-84osl34988] { display: none !important; }
    .sa-table-scroll[b-84osl34988] { max-height: none; overflow: visible; }
}

/* ---------- The compare slots inside the filter bar ---------- */
/* Each slot is underlined in the colour that state will carry in the charts, so the
   picker and the trend lines agree before Apply is pressed. */
.cmp-slot-row[b-84osl34988] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.cmp-slot[b-84osl34988] {
    border-bottom: 2px solid transparent;
    padding-bottom: 0.12rem;
    min-width: 0;
}

.cmp-slot-select[b-84osl34988] { width: max-content; min-width: 0; }

/* ---------- One card per compared state ---------- */
.cmp-cards[b-84osl34988] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.6rem;
}

.cmp-card[b-84osl34988] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-top: 3px solid #3987e5;
    border-radius: 10px;
    padding: 0.4rem 0.6rem 0.5rem;
    min-width: 0;
}

.cmp-card-head[b-84osl34988] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}

.cmp-card-name[b-84osl34988] {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-card-share[b-84osl34988] {
    font-size: 0.54rem;
    font-weight: 700;
    color: #9fb4d4;
    white-space: nowrap;
}

.cmp-card-total[b-84osl34988] {
    font-size: 1.02rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0.05rem 0 0.25rem;
}

/* Two metrics per row on a narrow card, four across on a wide one, so a group of two
   or three does not leave half the card empty. */
.cmp-card-grid[b-84osl34988] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 0.2rem 0.5rem;
}

.cmp-card-grid > div[b-84osl34988] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cmp-metric-label[b-84osl34988] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #93a1b8;
    white-space: nowrap;
}

.cmp-metric-value[b-84osl34988] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #eaf0f8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-metric-of[b-84osl34988] {
    font-size: 0.5rem;
    font-weight: 600;
    color: #93a1b8;
    margin-left: 0.2rem;
}

.cmp-metric-sub[b-84osl34988] { font-size: 0.5rem; color: #8c9ab2; }

/* The leader of each bucket, chipped in that state's own colour. */
.cmp-leader-chip[b-84osl34988] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
    .cmp-cards[b-84osl34988] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .cmp-cards[b-84osl34988] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/DataExplorer.razor.rz.scp.css */
/* Data Explorer — the same dark surfaces, filter bar, KPI strip, panels, table and
   insight blocks as the rest of the dashboard.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size:
   625 in the 1.32fr column, 470 in the ~1fr columns, 765 across half the page, and two
   215-unit dials side by side in one column. */

.so-page[b-bt3afdnpcg] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-bt3afdnpcg] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-bt3afdnpcg] {
    background: #020b2b;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 285px;
    min-width: 0;
}

.sa-brand-logo[b-bt3afdnpcg] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-bt3afdnpcg] { min-width: 0; }

.sa-brand-title[b-bt3afdnpcg] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    line-height: 1.15;
}

.sa-brand-sub[b-bt3afdnpcg] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #35d17a;
    line-height: 1.2;
}

.sa-brand-range[b-bt3afdnpcg] {
    font-size: 0.63rem;
    color: #b6c1d2;
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.sa-filter[b-bt3afdnpcg] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-bt3afdnpcg] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.sa-field label[b-bt3afdnpcg] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-bt3afdnpcg] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-bt3afdnpcg] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-bt3afdnpcg] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-bt3afdnpcg] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-bt3afdnpcg] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
}

.sa-seg:hover[b-bt3afdnpcg] { background: #e2e7f3; }

.sa-seg-on[b-bt3afdnpcg] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-bt3afdnpcg] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-bt3afdnpcg] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #6b7590;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-bt3afdnpcg] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-bt3afdnpcg]::placeholder { color: #98a1b8; }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-bt3afdnpcg] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
}

.sa-btn-apply[b-bt3afdnpcg] { background: #058940; }
.sa-btn-apply:hover[b-bt3afdnpcg] { background: #047235; }
.sa-btn-apply:disabled[b-bt3afdnpcg] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-bt3afdnpcg] { background: #8216d8; }
.sa-btn-reset:hover[b-bt3afdnpcg] { background: #6f10ba; }
.sa-btn-export[b-bt3afdnpcg] { background: #8216d8; }
.sa-btn-export:hover[b-bt3afdnpcg] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-bt3afdnpcg] { background: #0324d9; }
.sa-btn-print:hover[b-bt3afdnpcg] { background: #021fb8; }

.sa-btn-icon[b-bt3afdnpcg] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-bt3afdnpcg] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-bt3afdnpcg],
.sa-select-state[b-bt3afdnpcg],
.sa-select-zone[b-bt3afdnpcg] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-bt3afdnpcg] { color: #9fb4d4; font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-bt3afdnpcg], .so-warn[b-bt3afdnpcg] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-bt3afdnpcg] { background: #011140; border: 1px solid rgba(120, 165, 235, 0.22); }
.so-empty strong[b-bt3afdnpcg] { color: #ffffff; font-size: 0.9rem; }
.so-empty span[b-bt3afdnpcg] { color: #9fabc0; font-size: 0.76rem; }

.sa-empty-inline[b-bt3afdnpcg] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-bt3afdnpcg] { font-size: 0.76rem; }
.sa-empty-inline span[b-bt3afdnpcg] { font-size: 0.66rem; }

.so-warn[b-bt3afdnpcg] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-bt3afdnpcg] { color: #ffd79a; font-size: 0.76rem; }
.so-warn span[b-bt3afdnpcg] { color: #cfb894; font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-bt3afdnpcg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-bt3afdnpcg] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-bt3afdnpcg] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-bt3afdnpcg] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-bt3afdnpcg] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-bt3afdnpcg] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-bt3afdnpcg] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-bt3afdnpcg] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-bt3afdnpcg] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-bt3afdnpcg] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-bt3afdnpcg] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-bt3afdnpcg] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-bt3afdnpcg] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-bt3afdnpcg] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-bt3afdnpcg] { grid-template-columns: 1fr 1fr; }

.so-panel[b-bt3afdnpcg] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-bt3afdnpcg] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-bt3afdnpcg] {
    font-weight: 500;
    font-size: 0.6rem;
    color: #9fb4d4;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-bt3afdnpcg]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-bt3afdnpcg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-bt3afdnpcg] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-bt3afdnpcg] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-bt3afdnpcg] { background: rgba(120, 165, 235, 0.16); color: #bcd3f2; }
.sa-chip-search[b-bt3afdnpcg] { background: rgba(245, 200, 66, 0.16); color: #f5d98a; }
.sa-chip-view[b-bt3afdnpcg] { background: rgba(47, 168, 90, 0.18); color: #8ee4ab; }

/* ---------- Tiles ---------- */
.so-tiles[b-bt3afdnpcg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-bt3afdnpcg] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-bt3afdnpcg] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.so-tile-good[b-bt3afdnpcg] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-bt3afdnpcg] { border-color: rgba(120, 165, 235, 0.4); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-bt3afdnpcg] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-tile-val[b-bt3afdnpcg] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-bt3afdnpcg] { font-size: 0.56rem; color: #a8b6cd; }

/* ---------- The records table ---------- */
.so-table-scroll[b-bt3afdnpcg] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 165, 235, 0.5) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-bt3afdnpcg] { max-height: 312px; }

.so-table-scroll[b-bt3afdnpcg]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-bt3afdnpcg]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.so-table-scroll[b-bt3afdnpcg]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-bt3afdnpcg]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-bt3afdnpcg] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-bt3afdnpcg] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-bt3afdnpcg] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.12);
    color: #dfe6f0;
}

.so-table tbody tr:nth-child(even) td[b-bt3afdnpcg] { background: rgba(255, 255, 255, 0.022); }
.so-table tbody tr:hover td[b-bt3afdnpcg] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-bt3afdnpcg] { text-align: right; }
.so-table thead th.so-num[b-bt3afdnpcg] { text-align: right; }
.so-money[b-bt3afdnpcg] { font-variant-numeric: tabular-nums; }
.so-td-state[b-bt3afdnpcg] { font-weight: 700; color: #ffffff; }

.so-table tfoot td[b-bt3afdnpcg] {
    position: sticky;
    bottom: 0;
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid #0b2358;
}

.so-table tfoot .so-td-state[b-bt3afdnpcg] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-bt3afdnpcg], .sa-td-period[b-bt3afdnpcg] { width: 6.2rem; }
.sa-th-lgcs[b-bt3afdnpcg] { width: 5.2rem; }

.sa-period-pill[b-bt3afdnpcg] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid rgba(120, 165, 235, 0.26);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: #cddff7;
}

.sa-fct-tag[b-bt3afdnpcg] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-bt3afdnpcg] { color: #9fc8ff; font-weight: 600; }
.sa-td-lgc-amt[b-bt3afdnpcg] { color: #93e6ac; font-weight: 600; }

.sa-count-chip[b-bt3afdnpcg] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #8ee4ab;
    text-align: center;
}

.sa-zone-chip[b-bt3afdnpcg] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-bt3afdnpcg] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-bt3afdnpcg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-bt3afdnpcg] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-bt3afdnpcg] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-bt3afdnpcg] { margin-top: 0.1rem; }

.exec-insight-heading[b-bt3afdnpcg] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5c842;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-bt3afdnpcg] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-bt3afdnpcg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-bt3afdnpcg] {
    color: #93a1b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-bt3afdnpcg] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-bt3afdnpcg] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-bt3afdnpcg] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-trend-list li:last-child[b-bt3afdnpcg] { border-bottom: none; }

.exec-trend-arrow[b-bt3afdnpcg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-bt3afdnpcg]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-bt3afdnpcg] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-bt3afdnpcg] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-bt3afdnpcg] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-bt3afdnpcg] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-insights-list li:last-child[b-bt3afdnpcg] { border-bottom: none; }

.exec-insight-icon[b-bt3afdnpcg] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-bt3afdnpcg]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-bt3afdnpcg] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-bt3afdnpcg] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-bt3afdnpcg] {
    font-size: 0.58rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-bt3afdnpcg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-bt3afdnpcg], .sa-row-c[b-bt3afdnpcg] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-bt3afdnpcg] { flex-direction: column; }
    .sa-brand[b-bt3afdnpcg] { flex: 1 1 auto; }
    .so-kpis[b-bt3afdnpcg] { flex-direction: column; }
    .so-kpi[b-bt3afdnpcg] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-bt3afdnpcg] { display: none !important; }
    .sa-table-scroll[b-bt3afdnpcg] { max-height: none; overflow: visible; }
}

/* ---------- Row grids ---------- */
/* A: the result table | the ranking (470) | the insight list. */
.de-row-a[b-bt3afdnpcg] { grid-template-columns: 1.5fr 1.07fr 1fr; }

/* B: the concentration donut (470) | the map or the dials | the bands (520). */
.de-row-b[b-bt3afdnpcg] { grid-template-columns: 1.02fr 1fr 1.13fr; }

/* With the map lifted out to its own row, row B holds two cards rather than three. */
.de-row-b2[b-bt3afdnpcg] { grid-template-columns: 1fr 1fr; }

.de-row-map[b-bt3afdnpcg] { grid-template-columns: minmax(0, 1fr); }



/* The council grouping runs to 774 rows, so the body scrolls inside the card. */
.de-table-scroll[b-bt3afdnpcg] { max-height: 330px; }

/* Two dials share one card, side by side, each taking half the width. */
.de-dials[b-bt3afdnpcg] { min-width: 0; }

.de-dial-row[b-bt3afdnpcg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: center;
    margin-block: auto;
    min-width: 0;
}

/* The band a row falls in, chipped in the band's own step of the ramp. */
.de-band-chip[b-bt3afdnpcg] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* The state a council belongs to, since council names repeat across states. */
.de-note[b-bt3afdnpcg] {
    margin-left: 0.3rem;
    font-size: 0.55rem;
    font-weight: 500;
    color: #93a1b8;
}

/* The map keeps Nigeria's own proportions, with the ramp legend under it; the SVG
   carries no scope attribute of its own, hence ::deep. */
.de-map-panel[b-bt3afdnpcg] { min-width: 0; }

.de-map-body[b-bt3afdnpcg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-block: auto;
    min-width: 0;
}

/* Capped rather than stretched: at full row width the map would be over 800px tall, and
   the labels are already comfortable at this size. */
.de-map-body[b-bt3afdnpcg]  svg.faac-statemap-labelled {
    max-width: 1180px;
    margin: 0 auto;
}

.de-map-body[b-bt3afdnpcg]  svg.faac-chart {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
}

.de-map-legend[b-bt3afdnpcg] { width: 100%; max-width: 290px; }

@media (max-width: 1280px) {
    .de-row-a[b-bt3afdnpcg], .de-row-b[b-bt3afdnpcg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .de-row-a[b-bt3afdnpcg], .de-row-b[b-bt3afdnpcg] { grid-template-columns: minmax(0, 1fr); }
    .de-dial-row[b-bt3afdnpcg] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/DataSources.razor.rz.scp.css */
/* Data Sources & Provenance — dark navy, consistent with every other page in the
   dashboard. Four bands: the registry of publishing bodies, the ingestion dials and the
   two tier splits, the document ledger beside the insights, then the per-year shape of
   the archive with the lineage. */

.ds-page[b-enl8tcybkp] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Header: brand, KPIs and filter on one line ---------- */
.ds-top[b-enl8tcybkp] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.ds-brand[b-enl8tcybkp] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.05rem;
    flex: 0 1 auto;
    min-width: 0;
}

.ds-title[b-enl8tcybkp] {
    font-size: 0.68rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ds-title-sub[b-enl8tcybkp] {
    display: block;
    font-size: 0.53rem;
    font-weight: 600;
    color: #9fb4d4;
    letter-spacing: 0.05em;
}

.ds-range[b-enl8tcybkp] { font-size: 0.53rem; color: #7f93b5; white-space: nowrap; }

.ds-kpis[b-enl8tcybkp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 auto;
}

.ds-kpi[b-enl8tcybkp] {
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.ds-kpi-1[b-enl8tcybkp] { background: linear-gradient(160deg, #17399c, #0e2470); }
.ds-kpi-2[b-enl8tcybkp] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.ds-kpi-3[b-enl8tcybkp] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.ds-kpi-4[b-enl8tcybkp] { background: linear-gradient(160deg, #a9560c, #71390a); }
.ds-kpi-5[b-enl8tcybkp] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.ds-kpi-cap[b-enl8tcybkp] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.ds-kpi-num[b-enl8tcybkp] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.ds-kpi-unit[b-enl8tcybkp] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.ds-filter[b-enl8tcybkp] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.ds-field[b-enl8tcybkp] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.ds-field label[b-enl8tcybkp] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.ds-field-pair[b-enl8tcybkp] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.ds-select[b-enl8tcybkp] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.ds-select:focus[b-enl8tcybkp] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.ds-seg-row[b-enl8tcybkp] {
    display: flex;
    gap: 0.18rem;
}

.ds-seg[b-enl8tcybkp] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
}

.ds-seg:hover[b-enl8tcybkp] { background: #e2e7f3; }

.ds-seg-on[b-enl8tcybkp] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.ds-search[b-enl8tcybkp] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.ds-search-icon[b-enl8tcybkp] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #6b7590;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.ds-search-input[b-enl8tcybkp] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.ds-search-input[b-enl8tcybkp]::placeholder { color: #98a1b8; }

/* Buttons are as wide as their word and no wider. */
.ds-btn[b-enl8tcybkp] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
}

.ds-btn-apply[b-enl8tcybkp] { background: #058940; }
.ds-btn-apply:hover[b-enl8tcybkp] { background: #047235; }
.ds-btn-apply:disabled[b-enl8tcybkp] { background: #6f8f7c; cursor: default; }
.ds-btn-reset[b-enl8tcybkp] { background: #8216d8; }
.ds-btn-reset:hover[b-enl8tcybkp] { background: #6f10ba; }
.ds-btn-export[b-enl8tcybkp] { background: #8216d8; }
.ds-btn-export:hover[b-enl8tcybkp] { background: #6f10ba; color: #ffffff; }
.ds-btn-print[b-enl8tcybkp] { background: #0324d9; }
.ds-btn-print:hover[b-enl8tcybkp] { background: #021fb8; }

.ds-btn-icon[b-enl8tcybkp] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .ds-filter[b-enl8tcybkp] { flex-wrap: wrap; margin-left: 0; }
}

/* ---------- Rows and panels ---------- */
.ds-row[b-enl8tcybkp] {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    align-items: stretch;
}

.ds-row-registry[b-enl8tcybkp] { grid-template-columns: 1fr; }
.ds-row-a[b-enl8tcybkp] { grid-template-columns: 1fr 1fr 1fr; }
.ds-row-b[b-enl8tcybkp] { grid-template-columns: 1.62fr 1fr; }
.ds-row-c[b-enl8tcybkp] { grid-template-columns: 1fr 1fr 1fr; }

.ds-panel[b-enl8tcybkp] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.4rem 0.5rem 0.45rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ds-panel-title[b-enl8tcybkp] {
    font-size: 0.6rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.ds-panel-title-sub[b-enl8tcybkp] {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #9fb4d4;
    font-size: 0.55rem;
}

.ds-panel[b-enl8tcybkp]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Source registry cards ---------- */
/* Four cards on a desktop row, each sized by the grid rather than by its text, so the
   links line up down the row no matter how long a publisher's description runs. */
.ds-cards[b-enl8tcybkp] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.ds-card[b-enl8tcybkp] {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-top: 3px solid #2f7ff0;
    border-radius: 7px;
    padding: 0.4rem 0.5rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
}

.ds-card-head[b-enl8tcybkp] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.ds-card-abbr[b-enl8tcybkp] {
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #ffffff;
    border-radius: 4px;
    padding: 0.1rem 0.32rem;
    white-space: nowrap;
}

.ds-card-role[b-enl8tcybkp] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    padding: 0.08rem 0.3rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ds-card-role-primary[b-enl8tcybkp] { color: #9ec5ff; border-color: rgba(47, 127, 240, 0.5); background: rgba(47, 127, 240, 0.14); }
.ds-card-role-support[b-enl8tcybkp] { color: #9fd8ff; border-color: rgba(74, 159, 224, 0.5); background: rgba(74, 159, 224, 0.12); }
.ds-card-role-check[b-enl8tcybkp] { color: #7fe0a6; border-color: rgba(34, 164, 93, 0.5); background: rgba(34, 164, 93, 0.14); }
.ds-card-role-context[b-enl8tcybkp] { color: #d7aaff; border-color: rgba(130, 22, 216, 0.5); background: rgba(130, 22, 216, 0.16); }

.ds-card-name[b-enl8tcybkp] {
    font-size: 0.605rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.ds-card-desc[b-enl8tcybkp] {
    font-size: 0.565rem;
    line-height: 1.3;
    color: #bcc7d8;
    flex: 1 1 auto;
}

.ds-card-meta[b-enl8tcybkp] {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    border-top: 1px solid rgba(120, 165, 235, 0.16);
    padding-top: 0.22rem;
    margin-top: 0.08rem;
}

.ds-card-meta-row[b-enl8tcybkp] {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.545rem;
    line-height: 1.25;
}

.ds-card-meta-label[b-enl8tcybkp] {
    color: #8fa3c2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ds-card-meta-value[b-enl8tcybkp] { color: #e2e9f4; font-weight: 600; text-align: right; min-width: 0; }

.ds-card-link[b-enl8tcybkp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    margin-top: 0.12rem;
    font-size: 0.55rem;
    font-weight: 700;
    color: #9ec5ff;
    text-decoration: none;
    border: 1px solid rgba(120, 165, 235, 0.4);
    border-radius: 5px;
    padding: 0.16rem 0.36rem;
    background: rgba(47, 127, 240, 0.1);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ds-card-link:hover[b-enl8tcybkp] { background: rgba(47, 127, 240, 0.22); color: #ffffff; border-color: rgba(120, 165, 235, 0.7); }

.ds-link-icon[b-enl8tcybkp] {
    width: 9px;
    height: 9px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ---------- Gauge trio ---------- */
/* Three dials share the card, so each gets a third of it and the SVG canvases are sized
   to that third — the reason the numbers inside them come out the same size as the type
   in the charts either side. */
.ds-gauges[b-enl8tcybkp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
    align-items: center;
    flex: 1 1 auto;
}

.ds-gauges[b-enl8tcybkp]  .faac-chart { width: 100%; height: auto; display: block; }

/* ---------- Document ledger ---------- */
.ds-panel-table[b-enl8tcybkp] { min-width: 0; }

.ds-table-scroll[b-enl8tcybkp] {
    overflow: auto;
    flex: 1 1 auto;
    min-height: 18rem;
    max-height: 44rem;
    border: 1px solid rgba(120, 165, 235, 0.16);
    border-radius: 6px;
}

.ds-table-scroll[b-enl8tcybkp]::-webkit-scrollbar { width: 9px; height: 9px; }
.ds-table-scroll[b-enl8tcybkp]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.ds-table-scroll[b-enl8tcybkp]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.ds-table-scroll[b-enl8tcybkp]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.ds-table[b-enl8tcybkp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.565rem;
}

.ds-table thead th[b-enl8tcybkp] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #06205a;
    color: #cfe0f8;
    font-size: 0.53rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 0.26rem 0.28rem;
    white-space: nowrap;
    border-bottom: 1px solid rgba(120, 165, 235, 0.3);
}

.ds-table tbody td[b-enl8tcybkp] {
    padding: 0.2rem 0.28rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #dbe3ef;
    white-space: nowrap;
}

.ds-table tbody tr:nth-child(even) td[b-enl8tcybkp] { background: rgba(255, 255, 255, 0.022); }
.ds-table tbody tr:hover td[b-enl8tcybkp] { background: rgba(74, 159, 224, 0.14); }

.ds-num[b-enl8tcybkp] { text-align: right; }
.ds-money[b-enl8tcybkp] { font-variant-numeric: tabular-nums; }
.ds-of[b-enl8tcybkp] { color: #7f93b5; font-size: 0.5rem; margin-left: 0.1rem; }
.ds-short[b-enl8tcybkp] { color: #ffcf8a; font-weight: 700; }

.ds-td-period[b-enl8tcybkp] { font-weight: 700; color: #ffffff; }

/* The file name is the point of the row, so it gets the room: it is the one cell allowed
   to wrap and the one that takes the width the rest of the columns do not need. */
.ds-td-file[b-enl8tcybkp] {
    color: #cfe0f8;
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 11rem;
    max-width: 14rem;
}

.ds-file-name[b-enl8tcybkp] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.535rem;
}

/* The provenance note is printed under the file name rather than left to a tooltip,
   because on a re-sourced month it is the only thing that contradicts the file name — and
   a caveat nobody can see is a caveat nobody acts on. */
.ds-file-note[b-enl8tcybkp] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.52rem;
    line-height: 1.25;
    color: #8fa3c2;
    font-style: italic;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ds-file-note-src[b-enl8tcybkp] {
    color: #7fe0a6;
    font-style: normal;
}

.ds-note-icon[b-enl8tcybkp] {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 0.15rem;
    vertical-align: -1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-chip[b-enl8tcybkp] {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0.04rem 0.26rem;
    white-space: nowrap;
}

.ds-status[b-enl8tcybkp] {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    padding: 0.06rem 0.3rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ds-chip-none[b-enl8tcybkp] { opacity: 0.85; font-style: italic; }

/* A month whose two tiers came from different publishers is marked down the left edge, so
   the split is visible while scrolling the ledger and not only on the chips. */
.ds-tr-split td:first-child[b-enl8tcybkp] { box-shadow: inset 2px 0 0 0 #22a45d; }

.ds-status-ok[b-enl8tcybkp] { color: #7fe0a6; border-color: rgba(34, 164, 93, 0.5); background: rgba(34, 164, 93, 0.14); }
.ds-status-resourced[b-enl8tcybkp] { color: #7fe0a6; border-color: rgba(34, 164, 93, 0.6); background: rgba(34, 164, 93, 0.2); }
.ds-status-onetier[b-enl8tcybkp] { color: #ffcf8a; border-color: rgba(232, 160, 43, 0.6); background: rgba(232, 160, 43, 0.2); }
.ds-status-names[b-enl8tcybkp] { color: #9fd8ff; border-color: rgba(74, 159, 224, 0.45); background: rgba(74, 159, 224, 0.1); }
.ds-status-noted[b-enl8tcybkp] { color: #9fd8ff; border-color: rgba(74, 159, 224, 0.5); background: rgba(74, 159, 224, 0.12); }
.ds-status-effort[b-enl8tcybkp] { color: #ffcf8a; border-color: rgba(232, 160, 43, 0.55); background: rgba(232, 160, 43, 0.14); }
.ds-status-partial[b-enl8tcybkp] { color: #ffb38a; border-color: rgba(232, 118, 43, 0.55); background: rgba(232, 118, 43, 0.14); }
.ds-status-empty[b-enl8tcybkp] { color: #ff8a80; border-color: rgba(232, 51, 43, 0.55); background: rgba(232, 51, 43, 0.14); }

.ds-th-link[b-enl8tcybkp], .ds-td-link[b-enl8tcybkp] { text-align: right; white-space: nowrap; }

.ds-td-link a[b-enl8tcybkp] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.535rem;
    font-weight: 700;
    color: #9ec5ff;
    text-decoration: none;
    border: 1px solid rgba(120, 165, 235, 0.35);
    border-radius: 4px;
    padding: 0.08rem 0.3rem;
}

.ds-td-link a:hover[b-enl8tcybkp] { background: rgba(47, 127, 240, 0.2); color: #ffffff; }

/* The footer prints the whole source mix for a tier — "OAGF 42 · NBS 35 · Not sourced 1".
   Left to nowrap it would set the column's width for all 78 rows, so it wraps instead. */
.ds-td-mix[b-enl8tcybkp] {
    white-space: normal !important;
    font-size: 0.5rem;
    line-height: 1.2;
}

.ds-table tfoot td[b-enl8tcybkp] {
    position: sticky;
    bottom: 0;
    background: #06205a;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.545rem;
    padding: 0.24rem 0.34rem;
    border-top: 1px solid rgba(120, 165, 235, 0.35);
    white-space: nowrap;
}

/* ---------- Key insights: Summary / Trends / Key Findings ---------- */
.exec-insight-section[b-enl8tcybkp] { margin-top: 0.3rem; }
.exec-insight-section:first-of-type[b-enl8tcybkp] { margin-top: 0.1rem; }

.exec-insight-heading[b-enl8tcybkp] {
    font-size: 0.53rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8fa3c2;
    padding-bottom: 0.12rem;
    margin-bottom: 0.16rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.18);
}

.exec-sum-list[b-enl8tcybkp] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-enl8tcybkp] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.585rem;
    line-height: 1.3;
}

.exec-sum-label[b-enl8tcybkp] { color: #9fb4d4; white-space: nowrap; }
.exec-sum-value[b-enl8tcybkp] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

.exec-trend-list[b-enl8tcybkp] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-enl8tcybkp] {
    display: flex;
    gap: 0.3rem;
    align-items: flex-start;
    padding: 0.18rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exec-trend-list li:last-child[b-enl8tcybkp] { border-bottom: none; }

.exec-trend-arrow[b-enl8tcybkp] {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 0.08rem;
}

.exec-trend-arrow[b-enl8tcybkp]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-enl8tcybkp] { font-size: 0.585rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-enl8tcybkp] { font-weight: 700; }

.exec-insights-list[b-enl8tcybkp] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-enl8tcybkp] {
    display: flex;
    gap: 0.3rem;
    align-items: flex-start;
    padding: 0.18rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.exec-insights-list li:last-child[b-enl8tcybkp] { border-bottom: none; }

.exec-insight-icon[b-enl8tcybkp] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.06rem;
}

.exec-insight-icon[b-enl8tcybkp]  svg {
    width: 9px;
    height: 9px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-enl8tcybkp] { font-size: 0.585rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-enl8tcybkp] { font-weight: 700; }

.keyinsight-panel-title[b-enl8tcybkp] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.exec-bulb-icon[b-enl8tcybkp] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #ffd166;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ---------- Data lineage ---------- */
.ds-flow[b-enl8tcybkp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    counter-reset: none;
}

.ds-flow-step[b-enl8tcybkp] {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    padding: 0.2rem 0;
    position: relative;
}

/* The connector is drawn behind the numbered dots so the five stages read as one run
   rather than as five unrelated bullets. */
.ds-flow-step:not(:last-child)[b-enl8tcybkp]::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 1.05rem;
    bottom: -0.1rem;
    width: 1px;
    background: rgba(120, 165, 235, 0.3);
}

.ds-flow-dot[b-enl8tcybkp] {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-top: 0.06rem;
}

.ds-flow-body[b-enl8tcybkp] { display: flex; flex-direction: column; gap: 0.02rem; min-width: 0; }
.ds-flow-head[b-enl8tcybkp] { font-size: 0.575rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ds-flow-text[b-enl8tcybkp] { font-size: 0.565rem; line-height: 1.3; color: #bcc7d8; }

/* ---------- Citation strip ---------- */
.ds-cite[b-enl8tcybkp] {
    background: rgba(47, 127, 240, 0.07);
    border: 1px solid rgba(120, 165, 235, 0.25);
    border-left: 3px solid #2f7ff0;
    border-radius: 7px;
    padding: 0.38rem 0.55rem;
    margin-bottom: 0.45rem;
}

.ds-cite-title[b-enl8tcybkp] {
    font-size: 0.56rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.14rem;
}

.ds-cite-body[b-enl8tcybkp] { font-size: 0.575rem; line-height: 1.35; color: #bcc7d8; }

.ds-cite-example[b-enl8tcybkp] {
    display: block;
    margin: 0.16rem 0;
    padding-left: 0.5rem;
    border-left: 2px solid rgba(120, 165, 235, 0.45);
    color: #e2e9f4;
    font-style: italic;
}

/* ---------- Notices and footer ---------- */
.ds-warn[b-enl8tcybkp], .ds-empty[b-enl8tcybkp] {
    background: rgba(232, 160, 43, 0.1);
    border: 1px solid rgba(232, 160, 43, 0.45);
    border-radius: 7px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.45rem;
    font-size: 0.6rem;
    color: #ffe0b0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ds-warn strong[b-enl8tcybkp], .ds-empty strong[b-enl8tcybkp] { color: #ffffff; }

.ds-loading[b-enl8tcybkp] { font-size: 0.65rem; color: #9fb4d4; padding: 0.6rem 0; }

.ds-foot[b-enl8tcybkp] {
    font-size: 0.53rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.3rem 0 0.1rem;
    line-height: 1.35;
}

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
    .ds-cards[b-enl8tcybkp] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
    .ds-row-a[b-enl8tcybkp], .ds-row-c[b-enl8tcybkp] { grid-template-columns: 1fr 1fr; }
    .ds-row-b[b-enl8tcybkp] { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .ds-row-a[b-enl8tcybkp], .ds-row-c[b-enl8tcybkp] { grid-template-columns: 1fr; }
    .ds-cards[b-enl8tcybkp] { grid-template-columns: 1fr; }
    .ds-gauges[b-enl8tcybkp] { grid-template-columns: 1fr; }
}

@media print {
    .ds-filter[b-enl8tcybkp] { display: none; }
    .ds-table-scroll[b-enl8tcybkp] { max-height: none; overflow: visible; }
}
/* /Components/Pages/GeopoliticalZones.razor.rz.scp.css */
/* Geopolitical Zone Analysis — dark navy dashboard with a light filter bar and a
   light summary table, matching the reference design. Surfaces sampled from it:
   page #010E2F→#010423, panels #011140, filter bar #F4F5F9, table title #021C95,
   table body #F3F5F8, total row #021241, footer #011447. Zone series colours come
   from the validated dark categorical order in Charts/ChartHelpers.cs. */

.gz-page[b-fzkfhw3gtb] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

.gz-loading[b-fzkfhw3gtb] {
    color: #9aa3b5;
    padding: 2rem 0;
}

.gz-empty[b-fzkfhw3gtb] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 10px;
    padding: 1.4rem 1.5rem;
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.gz-empty strong[b-fzkfhw3gtb] { color: #ffffff; font-size: 0.95rem; }
.gz-empty span[b-fzkfhw3gtb] { color: #9fabc0; font-size: 0.8rem; }

/* Shown when a refresh could not reach the database. Advisory, not an error page: the
   figures already on screen stay readable underneath it. */
.gz-datawarn[b-fzkfhw3gtb] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    margin-top: 0.7rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
}

.gz-datawarn strong[b-fzkfhw3gtb] { color: #ffd79a; font-size: 0.78rem; }
.gz-datawarn span[b-fzkfhw3gtb] { color: #cfb894; font-size: 0.72rem; }

/* ---------- Top row: brand block + filter bar ---------- */
.gz-top[b-fzkfhw3gtb] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.gz-brand[b-fzkfhw3gtb] {
    background: #020b2b;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 285px;
    min-width: 0;
}

.gz-brand-logo[b-fzkfhw3gtb] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.gz-brand-text[b-fzkfhw3gtb] { min-width: 0; }

.gz-brand-title[b-fzkfhw3gtb] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    line-height: 1.15;
}

.gz-brand-sub[b-fzkfhw3gtb] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #35d17a;
    line-height: 1.2;
}

.gz-brand-range[b-fzkfhw3gtb] {
    font-size: 0.63rem;
    color: #b6c1d2;
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.gz-filter[b-fzkfhw3gtb] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.gz-field[b-fzkfhw3gtb] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.gz-field label[b-fzkfhw3gtb] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.gz-field-pair[b-fzkfhw3gtb] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.gz-select[b-fzkfhw3gtb] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.gz-select:focus[b-fzkfhw3gtb] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.gz-seg-row[b-fzkfhw3gtb] {
    display: flex;
    gap: 0.18rem;
}

.gz-seg[b-fzkfhw3gtb] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
}

.gz-seg:hover[b-fzkfhw3gtb] { background: #e2e7f3; }

.gz-seg-on[b-fzkfhw3gtb] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.gz-search[b-fzkfhw3gtb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.gz-search-icon[b-fzkfhw3gtb] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #6b7590;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.gz-search-input[b-fzkfhw3gtb] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.gz-search-input[b-fzkfhw3gtb]::placeholder { color: #98a1b8; }

/* Buttons are as wide as their word and no wider. */
.gz-btn[b-fzkfhw3gtb] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
}

.gz-btn-apply[b-fzkfhw3gtb] { background: #058940; }
.gz-btn-apply:hover[b-fzkfhw3gtb] { background: #047235; }
.gz-btn-apply:disabled[b-fzkfhw3gtb] { background: #6f8f7c; cursor: default; }
.gz-btn-reset[b-fzkfhw3gtb] { background: #8216d8; }
.gz-btn-reset:hover[b-fzkfhw3gtb] { background: #6f10ba; }
.gz-btn-export[b-fzkfhw3gtb] { background: #8216d8; }
.gz-btn-export:hover[b-fzkfhw3gtb] { background: #6f10ba; color: #ffffff; }
.gz-btn-print[b-fzkfhw3gtb] { background: #0324d9; }
.gz-btn-print:hover[b-fzkfhw3gtb] { background: #021fb8; }

.gz-btn-icon[b-fzkfhw3gtb] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .gz-filter[b-fzkfhw3gtb] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.gz-select-year[b-fzkfhw3gtb],
.gz-select-state[b-fzkfhw3gtb],
.gz-select-zone[b-fzkfhw3gtb] {
    width: max-content;
    min-width: 0;
}

/* ---------- KPI row ---------- */
.gz-kpi-row[b-fzkfhw3gtb] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}

@media (max-width: 1250px) {
    .gz-kpi-row[b-fzkfhw3gtb] { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.gz-kpi[b-fzkfhw3gtb] {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 0.5rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: #ffffff;
}

.gz-kpi-blue[b-fzkfhw3gtb]   { background-image: linear-gradient(180deg, #0020c5 0%, #001585 100%); }
.gz-kpi-green[b-fzkfhw3gtb]  { background-image: linear-gradient(180deg, #017251 0%, #00513a 100%); }
.gz-kpi-orange[b-fzkfhw3gtb] { background-image: linear-gradient(180deg, #fc7506 0%, #f34308 100%); }
.gz-kpi-sky[b-fzkfhw3gtb]    { background-image: linear-gradient(180deg, #027dbd 0%, #00518c 100%); }
.gz-kpi-purple[b-fzkfhw3gtb] { background-image: linear-gradient(180deg, #7319cd 0%, #5a059d 100%); }
.gz-kpi-pink[b-fzkfhw3gtb]   { background-image: linear-gradient(180deg, #ef217c 0%, #df0552 100%); }

.gz-kpi-icon[b-fzkfhw3gtb] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.12) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gz-kpi-icon svg[b-fzkfhw3gtb] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gz-kpi-text[b-fzkfhw3gtb] { min-width: 0; }

.gz-kpi-label[b-fzkfhw3gtb] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.25;
}

.gz-kpi-value[b-fzkfhw3gtb] {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.gz-kpi-unit[b-fzkfhw3gtb] {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

/* ---------- Main grid ---------- */
.gz-main[b-fzkfhw3gtb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(215px, 18%);
    gap: 0.6rem;
    align-items: stretch;
    margin-bottom: 0.6rem;
}

.gz-main-left[b-fzkfhw3gtb] {
    display: grid;
    /*grid-template-rows: auto minmax(0, 1fr) auto;*/
    grid-template-rows: auto auto auto;
    gap: 0.6rem;
    min-width: 0;
}

.gz-main-right[b-fzkfhw3gtb] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

/* The two narrative cards take up whatever height the left-hand column sets, so the
   column never ends in a large gap; the extremes card keeps its natural size. */
.gz-panel-insights[b-fzkfhw3gtb],
.gz-panel-takeaways[b-fzkfhw3gtb] {
    flex: 1 1 auto;
}

.gz-row-two[b-fzkfhw3gtb] {
    display: grid;
    grid-template-columns: 1.06fr 1fr;
    gap: 0.6rem;
    min-width: 0;
}

.gz-row-three[b-fzkfhw3gtb] {
    display: grid;
    grid-template-columns: 0.63fr 0.66fr 1.28fr;
    gap: 0.6rem;
    min-width: 0;
}

@media (max-width: 1250px) {
    .gz-main[b-fzkfhw3gtb] { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
    .gz-row-two[b-fzkfhw3gtb], .gz-row-three[b-fzkfhw3gtb] { grid-template-columns: 1fr; }
}

.gz-panel[b-fzkfhw3gtb] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.55rem 0.7rem 0.65rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gz-panel-title[b-fzkfhw3gtb] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.gz-panel-title-sub[b-fzkfhw3gtb] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #b6c1d2;
}

.gz-title-icon[b-fzkfhw3gtb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gz-bulb[b-fzkfhw3gtb], .gz-target[b-fzkfhw3gtb] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.gz-bulb[b-fzkfhw3gtb] { stroke: #f5c842; }
.gz-target[b-fzkfhw3gtb] { stroke: #4a9fe0; }

.gz-panel[b-fzkfhw3gtb]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* ---------- Summary table ---------- */
.gz-panel-table[b-fzkfhw3gtb] {
    padding: 0;
    overflow: hidden;
    border-color: rgba(120, 165, 235, 0.3);
}

.gz-panel-bar[b-fzkfhw3gtb] {
    background: #021c95;
    color: #ffffff;
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.4rem 0.7rem;
}

.gz-panel-bar-sub[b-fzkfhw3gtb] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.82);
}

.gz-table-scroll[b-fzkfhw3gtb] { overflow-x: auto; }

.gz-table[b-fzkfhw3gtb] {
    width: 100%;
    border-collapse: collapse;
    background: #f3f5f8;
    font-size: 0.62rem;
    color: #1b2444;
}

.gz-table th[b-fzkfhw3gtb] {
    background: #e9edf6;
    color: #16204a;
    font-size: 0.575rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.28rem 0.4rem;
    text-align: center;
    border: 1px solid #d3daea;
    line-height: 1.25;
    white-space: nowrap;
}

.gz-th-zone[b-fzkfhw3gtb] { text-align: left; min-width: 8.5rem; }
.gz-th-group[b-fzkfhw3gtb] { background: #dfe5f2; }
.gz-th-note[b-fzkfhw3gtb] { font-weight: 500; text-transform: none; letter-spacing: 0; color: #4a5476; }

.gz-table td[b-fzkfhw3gtb] {
    padding: 0.24rem 0.4rem;
    border: 1px solid #dfe4f0;
    white-space: nowrap;
}

.gz-table tbody tr:nth-child(even) td[b-fzkfhw3gtb] { background: #eef1f8; }

.gz-td-zone[b-fzkfhw3gtb] { text-align: left; }

.gz-num[b-fzkfhw3gtb] { text-align: center; }
.gz-money[b-fzkfhw3gtb] { text-align: right; font-variant-numeric: tabular-nums; }

.gz-zone-chip[b-fzkfhw3gtb] {
    display: block;
    border-radius: 5px;
    color: #ffffff;
    text-shadow: none;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.16rem 0.45rem;
    white-space: nowrap;
}

.gz-cagr[b-fzkfhw3gtb] { font-weight: 700; }
.gz-up[b-fzkfhw3gtb] { color: #17853f; }
.gz-down[b-fzkfhw3gtb] { color: #c62828; }

.gz-table tfoot .gz-td-zone[b-fzkfhw3gtb] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gz-table tfoot td[b-fzkfhw3gtb] {
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    border-color: #0b2358;
}

.gz-table tfoot .gz-up[b-fzkfhw3gtb] { color: #4bd47a; }
.gz-table tfoot .gz-down[b-fzkfhw3gtb] { color: #ff8a80; }

/* ---------- Zone map ---------- */
.gz-map-body[b-fzkfhw3gtb] {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr);
    gap: 0.6rem;
    flex: 1;
    min-height: 0;
}

.gz-map-legend[b-fzkfhw3gtb] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.5rem 0.4rem;
    align-self: center;
}

.gz-map-legend-row[b-fzkfhw3gtb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6rem;
    color: #dfe6f0;
    white-space: nowrap;
}

/* One fixed colour per zone, so the swatch is an identity key, not a value scale. */
.gz-legend-dot[b-fzkfhw3gtb] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.gz-map-plot[b-fzkfhw3gtb] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}

/* The box the drawing exactly fills, and the box the HTML labels are positioned inside.
   Both must be the same box or a label at 50%/50% would land on the panel rather than on
   the middle of the map. 402px is the width the 660x594 viewBox occupies at the 362px
   height this row allows, so the map is capped exactly as before - but now the cap is on
   this element, not on the svg, so there is no letterboxing for labels to drift into.
   container-type lets the label text size itself in cqw, i.e. as a share of the map's own
   width, so the figures shrink with the map on a narrow screen instead of overflowing. */
.gz-map-canvas[b-fzkfhw3gtb] {
    position: relative;
    width: 100%;
    max-width: 402px;
    aspect-ratio: 660 / 594;
    margin-inline: auto;
    container-type: inline-size;
    overflow: visible;
}

.gz-map-canvas[b-fzkfhw3gtb]  .faac-map {
    display: block;
    width: 100%;
    height: 100%;
}

/* Zone figures, overlaid on the geography. Real HTML rather than svg <text>: ordinary CSS
   applies, the halo is a text-shadow so nothing depends on paint-order support, and
   pointer-events:none keeps the per-state tooltips in the svg underneath reachable. */
.gz-zone-label[b-fzkfhw3gtb] {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.16;
    white-space: nowrap;
    pointer-events: none;
}

.gz-zl-money[b-fzkfhw3gtb] {
    font-size: 11.6px;
    font-size: 2.88cqw;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.gz-zl-name[b-fzkfhw3gtb] {
    font-size: 9.4px;
    font-size: 2.35cqw;
    font-weight: 700;
}

.gz-zl-meta[b-fzkfhw3gtb] {
    font-size: 7.9px;
    font-size: 1.97cqw;
    font-weight: 600;
}

/* The FCT is 47 x 57 map units — far too small for a label — so it keeps a pill, joined
   to the territory by the leader line and dot still drawn in the svg. */
.gz-fct-pill[b-fzkfhw3gtb] {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.3em;
    background: #ffffff;
    color: #16204a;
    font-size: 10.9px;
    font-size: 2.72cqw;
    font-weight: 800;
    line-height: 1;
    padding: 0.34em 0.62em 0.34em 0.5em;
    border-radius: 0.45em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(2, 8, 28, 0.55), 0 0 0 1px rgba(10, 24, 60, 0.18);
}

.gz-fct-pin[b-fzkfhw3gtb] {
    width: 0.72em;
    height: 0.96em;
    flex: 0 0 auto;
    display: block;
}

/* ---------- Zone hover ---------- */
/* States are grouped per zone in the svg, so one hover lifts the whole zone. */
.gz-map-canvas[b-fzkfhw3gtb]  .faac-zone {
    cursor: pointer;
    transition: filter 190ms ease, opacity 190ms ease;
    transform-box: fill-box;
    outline: none;
}

.gz-map-canvas[b-fzkfhw3gtb]  .faac-zone:hover,
.gz-map-canvas[b-fzkfhw3gtb]  .faac-zone:focus-visible {
    filter: brightness(1.17) saturate(1.06) drop-shadow(0 0 6px rgba(255, 255, 255, 0.38));
}

/* Everything that is not the hovered zone recedes, so the highlight reads even between
   two bright fills. :has() keeps this in CSS — no script and no interop. */
.gz-map-canvas:has(.faac-zone:hover)[b-fzkfhw3gtb]  .faac-zone:not(:hover),
.gz-map-canvas:has(.faac-zone:focus-visible)[b-fzkfhw3gtb]  .faac-zone:not(:focus-visible) {
    opacity: 0.72;
}

/* ---------- Zone tooltip ---------- */
.gz-zone-tip[b-fzkfhw3gtb] {
    position: absolute;
    z-index: 4;
    transform: translate(-50%, -100%) translateY(-0.4rem) scale(0.97);
    transform-origin: 50% 100%;
    min-width: 8.6rem;
    max-width: 11rem;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.42rem 0.55rem;
    background: #04102e;
    border: 1px solid rgba(140, 180, 240, 0.42);
    border-radius: 7px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}

.gz-tip-zone[b-fzkfhw3gtb] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.15rem;
}

.gz-tip-dot[b-fzkfhw3gtb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.gz-tip-row[b-fzkfhw3gtb] {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    font-size: 0.6rem;
    color: #9fb4d4;
    white-space: nowrap;
}

.gz-tip-row b[b-fzkfhw3gtb] { color: #eaf0fb; font-weight: 700; }

/* Keyed on NigeriaMap.ZoneOrder's index rather than on a zone name, so a rename in the
   database cannot silently detach a tooltip from its zone. */
.gz-map-canvas:has(.faac-zone[data-zi="0"]:hover) .gz-zone-tip[data-zi="0"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="0"]:focus-visible) .gz-zone-tip[data-zi="0"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="1"]:hover) .gz-zone-tip[data-zi="1"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="1"]:focus-visible) .gz-zone-tip[data-zi="1"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="2"]:hover) .gz-zone-tip[data-zi="2"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="2"]:focus-visible) .gz-zone-tip[data-zi="2"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="3"]:hover) .gz-zone-tip[data-zi="3"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="3"]:focus-visible) .gz-zone-tip[data-zi="3"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="4"]:hover) .gz-zone-tip[data-zi="4"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="4"]:focus-visible) .gz-zone-tip[data-zi="4"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="5"]:hover) .gz-zone-tip[data-zi="5"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="5"]:focus-visible) .gz-zone-tip[data-zi="5"][b-fzkfhw3gtb] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -100%) translateY(-0.55rem) scale(1);
}

/* A zone near the top of the map hangs its tooltip downwards instead, so the tip stays
   inside the card. */
.gz-tip-below[b-fzkfhw3gtb] {
    transform: translate(-50%, 0) translateY(0.4rem) scale(0.97);
    transform-origin: 50% 0;
}

.gz-map-canvas:has(.faac-zone[data-zi="0"]:hover) .gz-tip-below[data-zi="0"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="0"]:focus-visible) .gz-tip-below[data-zi="0"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="1"]:hover) .gz-tip-below[data-zi="1"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="1"]:focus-visible) .gz-tip-below[data-zi="1"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="2"]:hover) .gz-tip-below[data-zi="2"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="2"]:focus-visible) .gz-tip-below[data-zi="2"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="3"]:hover) .gz-tip-below[data-zi="3"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="3"]:focus-visible) .gz-tip-below[data-zi="3"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="4"]:hover) .gz-tip-below[data-zi="4"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="4"]:focus-visible) .gz-tip-below[data-zi="4"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="5"]:hover) .gz-tip-below[data-zi="5"][b-fzkfhw3gtb],
.gz-map-canvas:has(.faac-zone[data-zi="5"]:focus-visible) .gz-tip-below[data-zi="5"][b-fzkfhw3gtb] {
    transform: translate(-50%, 0) translateY(0.55rem) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .gz-map-canvas[b-fzkfhw3gtb]  .faac-zone,
    .gz-zone-tip[b-fzkfhw3gtb] { transition-duration: 1ms; }
}

/* ---------- Right column: insights, takeaways, extremes ---------- */
.gz-insight-list[b-fzkfhw3gtb], .gz-takeaway-list[b-fzkfhw3gtb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-evenly;
}

.gz-insight-list li[b-fzkfhw3gtb], .gz-takeaway-list li[b-fzkfhw3gtb] {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
    padding: 0.26rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gz-insight-list li:last-child[b-fzkfhw3gtb], .gz-takeaway-list li:last-child[b-fzkfhw3gtb] { border-bottom: none; }

.gz-insight-icon[b-fzkfhw3gtb] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gz-insight-icon[b-fzkfhw3gtb]  svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gz-insight-text[b-fzkfhw3gtb], .gz-takeaway-text[b-fzkfhw3gtb] {
    font-size: 0.635rem;
    line-height: 1.32;
    color: #c8d1e0;
    min-width: 0;
}

.gz-insight-text[b-fzkfhw3gtb]  b, .gz-takeaway-text[b-fzkfhw3gtb]  b {
    color: #ffffff;
    font-weight: 700;
}

.gz-check[b-fzkfhw3gtb] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3fa63f;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 2px;
}

.gz-check svg[b-fzkfhw3gtb] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gz-extreme[b-fzkfhw3gtb] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    border-radius: 8px;
    padding: 0.4rem 0.45rem;
    margin-bottom: 0.4rem;
}

.gz-extreme:last-child[b-fzkfhw3gtb] { margin-bottom: 0; }

.gz-extreme-high[b-fzkfhw3gtb] { background: rgba(46, 160, 78, 0.14); border: 1px solid rgba(75, 191, 95, 0.3); }
.gz-extreme-low[b-fzkfhw3gtb] { background: rgba(198, 40, 40, 0.14); border: 1px solid rgba(238, 91, 82, 0.3); }

.gz-extreme-icon[b-fzkfhw3gtb] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gz-extreme-icon svg[b-fzkfhw3gtb] {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gz-extreme-icon-up[b-fzkfhw3gtb] { background: #2ea04e; }
.gz-extreme-icon-down[b-fzkfhw3gtb] { background: #c62828; }

.gz-extreme-text[b-fzkfhw3gtb] { min-width: 0; }

.gz-extreme-label[b-fzkfhw3gtb] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fabc0;
}

.gz-extreme-month[b-fzkfhw3gtb] {
    font-size: 0.63rem;
    color: #dfe6f0;
    white-space: nowrap;
}

.gz-extreme-value[b-fzkfhw3gtb] {
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.gz-extreme-value span[b-fzkfhw3gtb] {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.gz-extreme-value.gz-up[b-fzkfhw3gtb] { color: #4bd47a; }
.gz-extreme-value.gz-down[b-fzkfhw3gtb] { color: #ff8a80; }

.gz-extreme-spark[b-fzkfhw3gtb] {
    width: 52px;
    height: 26px;
    flex-shrink: 0;
}

.gz-extreme-spark[b-fzkfhw3gtb]  .exec-spark-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Footer strip ---------- */
.gz-footer[b-fzkfhw3gtb] {
    background: #011447;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.4rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.gz-footer-item[b-fzkfhw3gtb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    color: #c2cbdb;
    white-space: nowrap;
}

.gz-footer-icon[b-fzkfhw3gtb] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #7f95b8;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.gz-footer-tagline[b-fzkfhw3gtb] {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    font-style: italic;
    color: #35d17a;
    white-space: nowrap;
}

/* Printing: drop the controls and let the panels sit on white. */
@media print {
    .gz-filter[b-fzkfhw3gtb] { display: none !important; }
    .gz-page[b-fzkfhw3gtb] { background: #ffffff; color: #16204a; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Executive Summary — full-bleed dark navy dashboard.
   Every surface colour below is sampled from the reference design: the deep
   navy ground (#010721), the single card/panel fill shared by the small stat
   cards, the chart panels and the footer strip (#01163e), and the five hero
   KPI gradients. Chart series colours still come from the validated
   categorical palette in Charts/ChartHelpers.cs. */

.exec-page[b-vxgosfppqf] {
    background-color: #010721;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.55) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010721 55%, #01051a 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.9rem 1rem 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* ---- Header ---- */
.exec-header[b-vxgosfppqf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.exec-header-left[b-vxgosfppqf] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.exec-logo[b-vxgosfppqf] {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex-shrink: 0;
}

.exec-header-text h1[b-vxgosfppqf] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: #ffffff;
}

.exec-subtitle[b-vxgosfppqf] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: #f5c842;
    margin-top: 0.1rem;
}

.exec-date-line[b-vxgosfppqf] {
    font-size: 0.82rem;
    color: #b6c1d2;
    margin-top: 0.15rem;
}

.exec-header-right[b-vxgosfppqf] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.exec-header-badges[b-vxgosfppqf] {
    display: flex;
    gap: 0.6rem;
}

.exec-date-badge[b-vxgosfppqf], .exec-filters-badge[b-vxgosfppqf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    padding: 0.45rem 0.8rem;
    font-size: 0.83rem;
    color: #eef2f8;
    background: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
}

.exec-badge-icon[b-vxgosfppqf] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #eef2f8;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-asof[b-vxgosfppqf] {
    font-size: 0.78rem;
    color: #98a5b9;
}

.exec-loading[b-vxgosfppqf] {
    color: #9aa3b5;
    padding: 2rem 0;
}

/* ---- Hero KPI cards ---- */
.exec-kpi-row[b-vxgosfppqf] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 1150px) {
    .exec-kpi-row[b-vxgosfppqf] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.exec-kpi-card[b-vxgosfppqf] {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.5rem 0.6rem 0;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    min-width: 0;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.exec-kpi-blue[b-vxgosfppqf]   { background-image: linear-gradient(180deg, #0144b0 0%, #012573 100%); }
.exec-kpi-teal[b-vxgosfppqf]   { background-image: linear-gradient(180deg, #017a92 0%, #01516c 100%); }
.exec-kpi-green[b-vxgosfppqf]  { background-image: linear-gradient(180deg, #017050 0%, #014a33 100%); }
.exec-kpi-purple[b-vxgosfppqf] { background-image: linear-gradient(180deg, #4b278f 0%, #321866 100%); }
.exec-kpi-amber[b-vxgosfppqf]  { background-image: linear-gradient(180deg, #b37102 0%, #814c01 100%); }

.exec-kpi-label[b-vxgosfppqf] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    line-height: 1.25;
}

.exec-kpi-sub[b-vxgosfppqf] {
    font-size: 0.6rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.exec-kpi-body[b-vxgosfppqf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-bottom: 1.1rem;
    min-width: 0;
}

.exec-kpi-icon[b-vxgosfppqf] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-kpi-icon svg[b-vxgosfppqf] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #ffffff;
}

.exec-kpi-value[b-vxgosfppqf] {
    min-width: 0;
    text-align: center;
}

.exec-kpi-number[b-vxgosfppqf] {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
}

.exec-kpi-unit[b-vxgosfppqf] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 0.1rem;
}

/* Hairline shape-only trend along the bottom edge of each hero card. */
.exec-kpi-spark[b-vxgosfppqf] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    opacity: 0.7;
    pointer-events: none;
}

.exec-kpi-spark[b-vxgosfppqf]  .exec-spark-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---- Small stat cards ---- */
.exec-stat-row[b-vxgosfppqf] {
    display: grid;
    /*grid-template-columns: repeat(7, minmax(0, 1fr));*/
    grid-template-columns: auto auto auto 1fr 1fr 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 1400px) {
    .exec-stat-row[b-vxgosfppqf] {
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    }
}

.exec-stat-card[b-vxgosfppqf] {
    background: #01163e;
    border: 1px solid rgba(120, 165, 235, 0.18);
    border-radius: 8px;
    padding: 0.45rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.exec-stat-icon[b-vxgosfppqf] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exec-stat-icon svg[b-vxgosfppqf] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #ffffff;
}

.exec-stat-icon-blue[b-vxgosfppqf]   { background-image: linear-gradient(150deg, #2f7fd6 0%, #1a5aa8 100%); }
.exec-stat-icon-green[b-vxgosfppqf]  { background-image: linear-gradient(150deg, #1f8a44 0%, #14652f 100%); }
.exec-stat-icon-red[b-vxgosfppqf]    { background-image: linear-gradient(150deg, #a52a2a 0%, #6f1a1c 100%); }
.exec-stat-icon-trophy[b-vxgosfppqf] { background-image: linear-gradient(150deg, #2b3f66 0%, #16233f 100%); }

.exec-stat-icon-trophy svg[b-vxgosfppqf] { stroke: #f2c141; }
.exec-stat-icon-red svg[b-vxgosfppqf]    { stroke: #ffffff; }

.exec-stat-icon-green svg polygon[b-vxgosfppqf],
.exec-stat-icon-red svg polygon[b-vxgosfppqf] {
    fill: #ffffff;
    stroke: none;
}

.exec-stat-text[b-vxgosfppqf] {
    min-width: 0;
}

.exec-stat-label[b-vxgosfppqf] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #dbe3ef;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    line-height: 1.3;
}

.exec-stat-value[b-vxgosfppqf] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-top: 0.1rem;
    white-space: nowrap;
}

.exec-stat-unit[b-vxgosfppqf] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-left: 0.2rem;
}

.exec-stat-sub[b-vxgosfppqf] {
    font-size: 0.74rem;
    color: #9fabc0;
    margin-top: 0.05rem;
    white-space: nowrap;
}

.exec-stat-sub-strong[b-vxgosfppqf] {
    color: #dbe3ef;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.exec-good[b-vxgosfppqf] { color: #6cc24a; }
.exec-bad[b-vxgosfppqf]  { color: #ee5b52; }

/* ---- Main grid: two stacked panel rows on the left, tall insights column right ---- */
.exec-main-grid[b-vxgosfppqf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(255px, 25.5%);
    gap: 0.85rem;
    margin-bottom: 0.85rem;
    align-items: stretch;
}

.exec-main-left[b-vxgosfppqf] {
    display: grid;
    /* The ranked row stays at its own (now much shorter) content height; whatever the
       insights column adds to the band goes to the trend row instead. */
    /*grid-template-rows: minmax(0, 1fr) auto;*/
    /*grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);*/
    grid-template-rows: auto auto;
    gap: 0.85rem;
    min-width: 0;
}

.exec-panel-row[b-vxgosfppqf] {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.exec-panel-row-trend[b-vxgosfppqf] {
    grid-template-columns: 1.3fr 1fr;
}

.exec-panel-row-rank[b-vxgosfppqf] {
    grid-template-columns: 1.26fr 1fr 1fr;
}

@media (max-width: 1250px) {
    .exec-main-grid[b-vxgosfppqf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .exec-panel-row-trend[b-vxgosfppqf], .exec-panel-row-rank[b-vxgosfppqf] {
        grid-template-columns: 1fr;
    }
}

.exec-panel[b-vxgosfppqf] {
    background: #01163e;
    border: 1px solid rgba(120, 165, 235, 0.18);
    border-radius: 10px;
    padding: 0.75rem 0.9rem 0.85rem;
    min-width: 0;
}

.exec-panel-title[b-vxgosfppqf] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.exec-panel-title-sub[b-vxgosfppqf] {
    font-weight: 500;
    color: #b6c1d2;
}

.exec-panel[b-vxgosfppqf]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
}

/* Once the panels stack into one column the SVGs would scale up to the full page
   width; cap them so the charts keep a sensible size and stay centred. */
    /* Both charts in this row sit in panels whose height is set by the insights column,
   so any leftover splits evenly above and below the plot instead of pooling under it. */
    .exec-panel-trend[b-vxgosfppqf],
    .exec-panel-lgc[b-vxgosfppqf] {
        display: flex;
        flex-direction: column;
    }

        .exec-panel-trend[b-vxgosfppqf]  .faac-chart {
            max-width: 840px;
            margin-block: auto;
        }

        .exec-panel-lgc[b-vxgosfppqf]  .faac-chart {
            max-width: 620px;
            margin: auto;
        }
    /* Leftover height in these panels spreads between the rows rather than piling up
   under the last one — the right-hand insights column sets the row height. */
    .exec-panel-zones[b-vxgosfppqf],
    .exec-panel-ranked[b-vxgosfppqf] {
        display: flex;
        flex-direction: column;
    }

        .exec-zonebar-list[b-vxgosfppqf],
        .exec-panel-ranked .exec-ranked-list[b-vxgosfppqf] {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
    /* ---- Executive insights (tall right-hand column) ---- */
    .exec-panel-insights[b-vxgosfppqf] {
        display: flex;
        flex-direction: column;
        /* Whatever height the left-hand panels set, the three blocks spread to meet it
       rather than leaving one gap at the bottom of the card. */
        justify-content: space-between;
        padding-bottom: 0.5rem;
    }

    .exec-insights-title[b-vxgosfppqf] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .exec-bulb-icon[b-vxgosfppqf] {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: #f5c842;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }
    /* Three blocks share the column — Summary, Trends, Key Findings — so the type is
   a step smaller than the rest of the page and the rows are tight. */
    .exec-insight-section[b-vxgosfppqf] {
        margin-top: 0.35rem;
    }

        .exec-insight-section:first-of-type[b-vxgosfppqf] {
            margin-top: 0.15rem;
        }

    .exec-insight-heading[b-vxgosfppqf] {
        font-size: 0.585rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        color: #f5c842;
        padding-bottom: 0.15rem;
        border-bottom: 1px solid rgba(245, 200, 66, 0.28);
        margin-bottom: 0.22rem;
    }
    /* Summary — label/value pairs, one line each wherever they fit. */
    .exec-sum-list[b-vxgosfppqf] {
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
    }

    .exec-sum-row[b-vxgosfppqf] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.625rem;
        line-height: 1.34;
    }

    .exec-sum-label[b-vxgosfppqf] {
        color: #93a1b8;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .exec-sum-value[b-vxgosfppqf] {
        color: #eaf0f8;
        font-weight: 600;
        text-align: right;
        min-width: 0;
    }
    /* Trends — an arrow carries direction, so colour is never the only cue. */
    .exec-trend-list[b-vxgosfppqf] {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

        .exec-trend-list li[b-vxgosfppqf] {
            display: grid;
            grid-template-columns: 13px minmax(0, 1fr);
            gap: 0.35rem;
            align-items: start;
            padding: 0.14rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        }

            .exec-trend-list li:last-child[b-vxgosfppqf] {
                border-bottom: none;
            }

    .exec-trend-arrow[b-vxgosfppqf] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0.12rem;
    }

        .exec-trend-arrow[b-vxgosfppqf]  svg {
            width: 13px;
            height: 13px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .exec-trend-text[b-vxgosfppqf] {
        font-size: 0.625rem;
        line-height: 1.28;
        color: #bcc7d8;
        min-width: 0;
    }

    .exec-trend-headline[b-vxgosfppqf] {
        font-weight: 700;
    }
    /* Key findings — the same icon-disc rows as before, one step tighter. */
    .exec-insights-list[b-vxgosfppqf] {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

        .exec-insights-list li[b-vxgosfppqf] {
            display: grid;
            grid-template-columns: 21px minmax(0, 1fr);
            gap: 0.4rem;
            align-items: center;
            padding: 0.14rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        }

            .exec-insights-list li:last-child[b-vxgosfppqf] {
                border-bottom: none;
            }

    .exec-insight-icon[b-vxgosfppqf] {
        width: 21px;
        height: 21px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .exec-insight-icon[b-vxgosfppqf]  svg {
            width: 12px;
            height: 12px;
            fill: none;
            stroke: #ffffff;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .exec-insight-text[b-vxgosfppqf] {
        font-size: 0.625rem;
        line-height: 1.28;
        color: #bcc7d8;
        min-width: 0;
    }

    .exec-insight-accent[b-vxgosfppqf] {
        font-weight: 700;
    }
    /* ---- Zone bars ---- */
    .exec-rank-caption[b-vxgosfppqf] {
        font-size: 0.55rem;
        color: #98a5b9;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: right;
        margin-bottom: 0.3rem;
    }

    .exec-zonebar-row[b-vxgosfppqf] {
        display: grid;
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
        align-items: center;
        gap: 0.45rem;
        margin-bottom: 0.28rem;
    }

        .exec-zonebar-row:last-child[b-vxgosfppqf] {
            margin-bottom: 0;
        }

    .exec-zonebar-name[b-vxgosfppqf] {
        font-size: 0.655rem;
        color: #eef2f8;
        white-space: nowrap;
    }

    .exec-zonebar-plot[b-vxgosfppqf] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
    }

    .exec-zonebar-fill[b-vxgosfppqf] {
        height: 12px;
        border-radius: 3px;
        flex-grow: 0;
        flex-shrink: 0;
        min-width: 2px;
    }

    .exec-zonebar-value[b-vxgosfppqf] {
        font-size: 0.555rem;
        color: #c5cddb;
        white-space: nowrap;
    }
    /* ---- Ranked lists (top / bottom 5 states, top 5 LGCs) ---- */

    .exec-ranked-list[b-vxgosfppqf] {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.32rem;
    }

        .exec-ranked-list li[b-vxgosfppqf] {
            display: grid;
            grid-template-columns: 1.05rem minmax(0, max-content) minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.35rem;
        }

    .exec-rank-badge[b-vxgosfppqf] {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 1.5px solid currentColor;
        background: rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.52rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .exec-rank-number[b-vxgosfppqf] {
        font-size: 0.62rem;
        font-weight: 600;
        color: #dbe3ef;
        text-align: center;
    }

    .exec-rank-name[b-vxgosfppqf] {
        font-size: 0.655rem;
        color: #eef2f8;
        white-space: nowrap;
    }

    .exec-rank-plot[b-vxgosfppqf] {
        display: block;
        min-width: 0;
    }

    .exec-rank-bar[b-vxgosfppqf] {
        display: block;
        height: 12px;
        border-radius: 3px;
        min-width: 2px;
    }

    .exec-rank-value[b-vxgosfppqf] {
        font-size: 0.6rem;
        color: #eef2f8;
        font-weight: 600;
        white-space: nowrap;
        text-align: right;
    }
    /* ---- Footer strip ---- */
    .exec-footer-strip[b-vxgosfppqf] {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr 1fr 1.50fr;
        gap: 0.5rem;
        background: #01163e;
        border: 1px solid rgba(120, 165, 235, 0.18);
        border-radius: 8px;
        padding: 0.425rem 1rem;
    }

    @media (max-width: 1200px) {
        .exec-footer-strip[b-vxgosfppqf] {
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        }
    }

    .exec-footer-item[b-vxgosfppqf] {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding-left: 1rem;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        min-width: 0;
    }

        .exec-footer-item:first-child[b-vxgosfppqf] {
            padding-left: 0;
            border-left: none;
        }

    .exec-footer-icon[b-vxgosfppqf] {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .exec-footer-icon svg[b-vxgosfppqf] {
            width: 28px;
            height: 28px;
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .exec-footer-icon-green svg[b-vxgosfppqf] {
        stroke: #4fbf5a;
    }

    .exec-footer-icon-blue svg[b-vxgosfppqf] {
        stroke: #4a9fe0;
    }

    .exec-footer-icon-slate svg[b-vxgosfppqf] {
        stroke: #93a6c0;
    }

    .exec-footer-icon-shield svg[b-vxgosfppqf] {
        stroke: #3f8ede;
        fill: rgba(47, 127, 214, 0.28);
    }

    .exec-footer-text[b-vxgosfppqf] {
        min-width: 0;
    }

    .exec-footer-value[b-vxgosfppqf] {
        font-size: 1.05rem;
        font-weight: 800;
        color: #f2cf4a;
        line-height: 1.2;
    }

    .exec-footer-unit[b-vxgosfppqf] {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
    }

    .exec-footer-value-sm[b-vxgosfppqf] {
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.35;
    }

    .exec-footer-label[b-vxgosfppqf] {
        font-size: 0.7rem;
        color: #b9c4d4;
        line-height: 1.35;
        margin-top: 0.1rem;
    }
/* /Components/Pages/LgcAllocations.razor.rz.scp.css */
/* LGC Allocation Records — the council-tier twin of the State Allocation Records page.
   Same dark surfaces, KPI strip, panels, table and insight blocks as Home, State
   Analysis and LGC Analysis, and the same light filter bar as the Geopolitical Zones
   page, so the whole product reads as one thing.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size. */

.so-page[b-8nugleu3s1] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-8nugleu3s1] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-8nugleu3s1] {
    background: #020b2b;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 285px;
    min-width: 0;
}

.sa-brand-logo[b-8nugleu3s1] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-8nugleu3s1] { min-width: 0; }

.sa-brand-title[b-8nugleu3s1] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    line-height: 1.15;
}

.sa-brand-sub[b-8nugleu3s1] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #35d17a;
    line-height: 1.2;
}

.sa-brand-range[b-8nugleu3s1] {
    font-size: 0.63rem;
    color: #b6c1d2;
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.sa-filter[b-8nugleu3s1] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-8nugleu3s1] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.sa-field label[b-8nugleu3s1] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-8nugleu3s1] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-8nugleu3s1] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-8nugleu3s1] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-8nugleu3s1] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-8nugleu3s1] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
}

.sa-seg:hover[b-8nugleu3s1] { background: #e2e7f3; }

.sa-seg-on[b-8nugleu3s1] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-8nugleu3s1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-8nugleu3s1] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #6b7590;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-8nugleu3s1] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-8nugleu3s1]::placeholder { color: #98a1b8; }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-8nugleu3s1] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
}

.sa-btn-apply[b-8nugleu3s1] { background: #058940; }
.sa-btn-apply:hover[b-8nugleu3s1] { background: #047235; }
.sa-btn-apply:disabled[b-8nugleu3s1] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-8nugleu3s1] { background: #8216d8; }
.sa-btn-reset:hover[b-8nugleu3s1] { background: #6f10ba; }
.sa-btn-export[b-8nugleu3s1] { background: #8216d8; }
.sa-btn-export:hover[b-8nugleu3s1] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-8nugleu3s1] { background: #0324d9; }
.sa-btn-print:hover[b-8nugleu3s1] { background: #021fb8; }

.sa-btn-icon[b-8nugleu3s1] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-8nugleu3s1] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-8nugleu3s1],
.sa-select-state[b-8nugleu3s1],
.sa-select-zone[b-8nugleu3s1] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-8nugleu3s1] { color: #9fb4d4; font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-8nugleu3s1], .so-warn[b-8nugleu3s1] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-8nugleu3s1] { background: #011140; border: 1px solid rgba(120, 165, 235, 0.22); }
.so-empty strong[b-8nugleu3s1] { color: #ffffff; font-size: 0.9rem; }
.so-empty span[b-8nugleu3s1] { color: #9fabc0; font-size: 0.76rem; }

.sa-empty-inline[b-8nugleu3s1] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-8nugleu3s1] { font-size: 0.76rem; }
.sa-empty-inline span[b-8nugleu3s1] { font-size: 0.66rem; }

.so-warn[b-8nugleu3s1] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-8nugleu3s1] { color: #ffd79a; font-size: 0.76rem; }
.so-warn span[b-8nugleu3s1] { color: #cfb894; font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-8nugleu3s1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-8nugleu3s1] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-8nugleu3s1] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-8nugleu3s1] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-8nugleu3s1] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-8nugleu3s1] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-8nugleu3s1] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-8nugleu3s1] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-8nugleu3s1] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-8nugleu3s1] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-8nugleu3s1] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-8nugleu3s1] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-8nugleu3s1] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-8nugleu3s1] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-8nugleu3s1] { grid-template-columns: 1fr 1fr; }

.so-panel[b-8nugleu3s1] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-8nugleu3s1] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-8nugleu3s1] {
    font-weight: 500;
    font-size: 0.6rem;
    color: #9fb4d4;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-8nugleu3s1]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-8nugleu3s1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-8nugleu3s1] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-8nugleu3s1] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-8nugleu3s1] { background: rgba(120, 165, 235, 0.16); color: #bcd3f2; }
.sa-chip-search[b-8nugleu3s1] { background: rgba(245, 200, 66, 0.16); color: #f5d98a; }
.sa-chip-view[b-8nugleu3s1] { background: rgba(47, 168, 90, 0.18); color: #8ee4ab; }

/* ---------- Tiles ---------- */
.so-tiles[b-8nugleu3s1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-8nugleu3s1] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-8nugleu3s1] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.so-tile-good[b-8nugleu3s1] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-8nugleu3s1] { border-color: rgba(120, 165, 235, 0.4); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-8nugleu3s1] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-tile-val[b-8nugleu3s1] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-8nugleu3s1] { font-size: 0.56rem; color: #a8b6cd; }

/* ---------- The records table ---------- */
.so-table-scroll[b-8nugleu3s1] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 165, 235, 0.5) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-8nugleu3s1] { max-height: 312px; }

.so-table-scroll[b-8nugleu3s1]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-8nugleu3s1]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.so-table-scroll[b-8nugleu3s1]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-8nugleu3s1]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-8nugleu3s1] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-8nugleu3s1] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-8nugleu3s1] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.12);
    color: #dfe6f0;
}

.so-table tbody tr:nth-child(even) td[b-8nugleu3s1] { background: rgba(255, 255, 255, 0.022); }
.so-table tbody tr:hover td[b-8nugleu3s1] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-8nugleu3s1] { text-align: right; }
.so-table thead th.so-num[b-8nugleu3s1] { text-align: right; }
.so-money[b-8nugleu3s1] { font-variant-numeric: tabular-nums; }
.so-td-state[b-8nugleu3s1] { font-weight: 700; color: #ffffff; }

.so-table tfoot td[b-8nugleu3s1] {
    position: sticky;
    bottom: 0;
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid #0b2358;
}

.so-table tfoot .so-td-state[b-8nugleu3s1] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-8nugleu3s1], .sa-td-period[b-8nugleu3s1] { width: 6.2rem; }
.sa-th-lgcs[b-8nugleu3s1] { width: 5.2rem; }

.sa-period-pill[b-8nugleu3s1] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid rgba(120, 165, 235, 0.26);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: #cddff7;
}

.sa-fct-tag[b-8nugleu3s1] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-8nugleu3s1] { color: #9fc8ff; font-weight: 600; }
.sa-td-lgc-amt[b-8nugleu3s1] { color: #93e6ac; font-weight: 600; }

.sa-count-chip[b-8nugleu3s1] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #8ee4ab;
    text-align: center;
}

.sa-zone-chip[b-8nugleu3s1] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-8nugleu3s1] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-8nugleu3s1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-8nugleu3s1] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-8nugleu3s1] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-8nugleu3s1] { margin-top: 0.1rem; }

.exec-insight-heading[b-8nugleu3s1] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5c842;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-8nugleu3s1] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-8nugleu3s1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-8nugleu3s1] {
    color: #93a1b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-8nugleu3s1] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-8nugleu3s1] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-8nugleu3s1] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-trend-list li:last-child[b-8nugleu3s1] { border-bottom: none; }

.exec-trend-arrow[b-8nugleu3s1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-8nugleu3s1]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-8nugleu3s1] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-8nugleu3s1] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-8nugleu3s1] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-8nugleu3s1] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-insights-list li:last-child[b-8nugleu3s1] { border-bottom: none; }

.exec-insight-icon[b-8nugleu3s1] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-8nugleu3s1]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-8nugleu3s1] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-8nugleu3s1] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-8nugleu3s1] {
    font-size: 0.58rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-8nugleu3s1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-8nugleu3s1], .sa-row-c[b-8nugleu3s1] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-8nugleu3s1] { flex-direction: column; }
    .sa-brand[b-8nugleu3s1] { flex: 1 1 auto; }
    .so-kpis[b-8nugleu3s1] { flex-direction: column; }
    .so-kpi[b-8nugleu3s1] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-8nugleu3s1] { display: none !important; }
    .sa-table-scroll[b-8nugleu3s1] { max-height: none; overflow: visible; }
}

/* ---------- Council-tier table columns ---------- */
.sa-th-share[b-8nugleu3s1], .sa-td-share[b-8nugleu3s1] { width: 5.4rem; }
.sa-td-share[b-8nugleu3s1] { color: #b9c6dc; }
.sa-td-statename[b-8nugleu3s1] { color: #a8b6cd; }
/* /Components/Pages/LgcOverview.razor.rz.scp.css */
/* State Analysis dashboard — dark navy, consistent with Home and Geopolitical Zones.
   Layout follows the reference designs: a KPI strip across the top, then a four-column
   row of ranked/spatial analytics, a four-column row of trend/heatmap/statistics, and a
   final row led by the full state ranking table. */

.so-page[b-ft0t4mnssk] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Header: brand, KPIs and filter on one line ---------- */
/* The KPIs size to their own content rather than to equal columns, which is what frees
   the horizontal room for the filter to sit beside them. */
.so-top[b-ft0t4mnssk] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.so-brand[b-ft0t4mnssk] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.05rem;
    flex: 0 1 auto;
    min-width: 0;
}

.so-title[b-ft0t4mnssk] {
    font-size: 0.68rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.so-title-sub[b-ft0t4mnssk] {
    display: block;
    font-size: 0.53rem;
    font-weight: 600;
    color: #9fb4d4;
    letter-spacing: 0.05em;
}

.so-range[b-ft0t4mnssk] { font-size: 0.53rem; color: #7f93b5; white-space: nowrap; }

.so-kpis[b-ft0t4mnssk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-ft0t4mnssk] {
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-ft0t4mnssk] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-ft0t4mnssk] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-ft0t4mnssk] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-ft0t4mnssk] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-ft0t4mnssk] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-ft0t4mnssk] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-cap-note[b-ft0t4mnssk] { font-weight: 500; text-transform: none; letter-spacing: 0; }

.so-kpi-num[b-ft0t4mnssk] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-ft0t4mnssk] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Filter, inline with the KPIs ---------- */
.so-filter[b-ft0t4mnssk] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.so-field[b-ft0t4mnssk] { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }

.so-field label[b-ft0t4mnssk] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-field-pair[b-ft0t4mnssk] { display: flex; gap: 0.2rem; }

.so-select[b-ft0t4mnssk] {
    appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    min-width: 3.5rem;
}

.so-select-year[b-ft0t4mnssk] { min-width: 3.5rem; }
.so-select-zone[b-ft0t4mnssk] { min-width: 6.4rem; }

.so-btn[b-ft0t4mnssk] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
}

.so-btn-apply[b-ft0t4mnssk] { background: #058940; }
.so-btn-apply:hover[b-ft0t4mnssk] { background: #047235; }
.so-btn-apply:disabled[b-ft0t4mnssk] { background: #6f8f7c; cursor: default; }

/* ---------- States: loading, empty, stale ---------- */
.so-loading[b-ft0t4mnssk] { color: #9fb4d4; font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-ft0t4mnssk], .so-warn[b-ft0t4mnssk] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-ft0t4mnssk] { background: #011140; border: 1px solid rgba(120, 165, 235, 0.22); }
.so-empty strong[b-ft0t4mnssk] { color: #ffffff; font-size: 0.9rem; }
.so-empty span[b-ft0t4mnssk] { color: #9fabc0; font-size: 0.76rem; }

.so-warn[b-ft0t4mnssk] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-ft0t4mnssk] { color: #ffd79a; font-size: 0.76rem; }
.so-warn span[b-ft0t4mnssk] { color: #cfb894; font-size: 0.7rem; }

/* ---------- Rows and panels ---------- */
.so-row[b-ft0t4mnssk] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The two ranked lists give width to the Performance Summary, which carries a donut and
   four tiles. The canvases are then sized so all three cards come out the same content
   height — see the builder calls in StateOverview.razor — instead of the grid stretching
   two short cards to match a tall one. */
.so-row-a[b-ft0t4mnssk] { grid-template-columns: 0.75fr 0.75fr 1.5fr; }

/* The trend chart is drawn on a 620-unit canvas and carries a six-item legend, so it
   takes the widest column of its row; the insight list needs the least. */
.so-row-b[b-ft0t4mnssk] { grid-template-columns: 1.18fr 0.94fr 0.88fr; }
.so-row-c[b-ft0t4mnssk] { grid-template-columns: 1.55fr 1fr 1fr; }

.so-panel[b-ft0t4mnssk] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-stack[b-ft0t4mnssk] {
    display: grid;
    gap: 0.59rem;
    min-width: 0;
    grid-template-rows: max-content max-content;
}

.so-panel-title[b-ft0t4mnssk] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-ft0t4mnssk] {
    font-weight: 500;
    font-size: 0.6rem;
    color: #9fb4d4;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-ft0t4mnssk]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* ---------- Tiles (performance summary) ---------- */
.so-tiles[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.so-tile[b-ft0t4mnssk] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.so-tile-good[b-ft0t4mnssk] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-bad[b-ft0t4mnssk] { border-color: rgba(255, 138, 128, 0.4); background: rgba(255, 138, 128, 0.1); }
.so-tile-info[b-ft0t4mnssk] { border-color: rgba(120, 165, 235, 0.4); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-ft0t4mnssk] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-tile-val[b-ft0t4mnssk] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-ft0t4mnssk] { font-size: 0.56rem; color: #a8b6cd; }

.so-up[b-ft0t4mnssk] { color: #4bd47a; }
.so-down[b-ft0t4mnssk] { color: #ff8a80; }

/* ---------- Key insights: Summary / Trends / Key Findings ---------- */
/* Same structure as the home page's Executive Insights panel, one step down in size
   because this card sits in a narrower column. */
.so-panel-insights[b-ft0t4mnssk] { min-width: 0; }

.exec-insight-section[b-ft0t4mnssk] { margin-top: 0.7rem; }
.exec-insight-section:first-of-type[b-ft0t4mnssk] { margin-top: 0.1rem; }

.exec-insight-heading[b-ft0t4mnssk] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5c842;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-ft0t4mnssk] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-ft0t4mnssk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-ft0t4mnssk] {
    color: #93a1b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-ft0t4mnssk] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-ft0t4mnssk] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-trend-list li:last-child[b-ft0t4mnssk] { border-bottom: none; }

.exec-trend-arrow[b-ft0t4mnssk] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-ft0t4mnssk]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-ft0t4mnssk] { font-size: 0.685rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-ft0t4mnssk] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-ft0t4mnssk] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-insights-list li:last-child[b-ft0t4mnssk] { border-bottom: none; }

.exec-insight-icon[b-ft0t4mnssk] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-ft0t4mnssk]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-ft0t4mnssk] { font-size: 0.685rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-ft0t4mnssk] { font-weight: 700; }

.exec-bulb-icon[b-ft0t4mnssk] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ---------- Growth badges ---------- */
.so-badges[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
}

.so-badge[b-ft0t4mnssk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    border-radius: 7px;
    padding: 0.3rem 0.15rem;
    min-width: 0;
}

.so-badge-up[b-ft0t4mnssk] { border: 1px solid rgba(75, 212, 122, 0.45); background: rgba(75, 212, 122, 0.1); }
.so-badge-down[b-ft0t4mnssk] { border: 1px solid rgba(255, 138, 128, 0.45); background: rgba(255, 138, 128, 0.1); }

.so-badge-rank[b-ft0t4mnssk] { font-size: 0.54rem; font-weight: 800; }
.so-badge-up .so-badge-rank[b-ft0t4mnssk] { color: #4bd47a; }
.so-badge-down .so-badge-rank[b-ft0t4mnssk] { color: #ff8a80; }

.so-badge-name[b-ft0t4mnssk] {
    font-size: 0.56rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.so-badge-num[b-ft0t4mnssk] { font-size: 0.54rem; font-weight: 700; color: #c2cbdb; }

/* ---------- State ranking table ---------- */
.so-panel-table[b-ft0t4mnssk] { min-width: 0; }

/* Fixed height, so the card matches the reference design while the body scrolls through
   every state. The header stays put as you scroll. */
.so-table-scroll[b-ft0t4mnssk] {
    max-height: 268px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 165, 235, 0.5) transparent;
}

.so-table-scroll[b-ft0t4mnssk]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-ft0t4mnssk]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.so-table-scroll[b-ft0t4mnssk]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-ft0t4mnssk]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-ft0t4mnssk] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.6rem;
    white-space: nowrap;
}

.so-table thead th[b-ft0t4mnssk] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.4rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-ft0t4mnssk] {
    padding: 0.26rem 0.4rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.12);
    color: #dfe6f0;
}

.so-table tbody tr:nth-child(even) td[b-ft0t4mnssk] { background: rgba(255, 255, 255, 0.022); }
.so-table tbody tr:hover td[b-ft0t4mnssk] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-ft0t4mnssk] { text-align: right; }
.so-money[b-ft0t4mnssk] { font-variant-numeric: tabular-nums; }
.so-th-rank[b-ft0t4mnssk], .so-td-rank[b-ft0t4mnssk] { text-align: right; width: 2.6rem; color: #9fb4d4; }
.so-td-state[b-ft0t4mnssk] { font-weight: 700; color: #ffffff; }
.so-td-zone[b-ft0t4mnssk] { color: #a8b6cd; }

.so-table tfoot td[b-ft0t4mnssk] {
    position: sticky;
    bottom: 0;
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    padding: 0.3rem 0.4rem;
    border-top: 1px solid #0b2358;
}

.so-table tfoot .so-td-state[b-ft0t4mnssk] { text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Footer ---------- */
.so-foot[b-ft0t4mnssk] {
    font-size: 0.58rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
    .so-filter[b-ft0t4mnssk] { margin-left: 0; }
}

@media (max-width: 1280px) {
    .so-row-a[b-ft0t4mnssk], .so-row-b[b-ft0t4mnssk] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .so-row-c[b-ft0t4mnssk] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .so-row-a[b-ft0t4mnssk], .so-row-b[b-ft0t4mnssk], .so-row-c[b-ft0t4mnssk] { grid-template-columns: 1fr; }
    .so-kpis[b-ft0t4mnssk] { flex-direction: column; }
    .so-kpi[b-ft0t4mnssk] { flex: 1 1 auto; }
}

@media print {
    .so-filter[b-ft0t4mnssk] { display: none; }
    .so-table-scroll[b-ft0t4mnssk] { max-height: none; overflow: visible; }
}
.state-exec-main-grid[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(255px, 25.5%);
    gap: 0.85rem;
    margin-bottom: 0.85rem;
    align-items: stretch;
}
.state-exec-main-left[b-ft0t4mnssk] {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.85rem;
    min-width: 0;
}
.state-exec-panel-row[b-ft0t4mnssk] {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.state-exec-panel-row-trend[b-ft0t4mnssk] {
    grid-template-columns: 1.3fr 1fr;
}
.state-so-row-c[b-ft0t4mnssk] {
    grid-template-columns: 1.55fr 1fr;
}
.state-exec-main-right[b-ft0t4mnssk] {
    background: #01163e;
    border: 1px solid rgba(120, 165, 235, 0.18);
    border-radius: 10px;
    padding: 0.75rem 0.9rem 0.85rem;
    display: grid;
    gap: 1.65rem;
    min-width: 0;
    grid-template-rows: max-content max-content;
}
.keyinsight-panel-title[b-ft0t4mnssk] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}
.keyinsights-title[b-ft0t4mnssk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.exec-bulb-icon[b-ft0t4mnssk] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
/* /Components/Pages/MonthlyAnalysis.razor.rz.scp.css */
/* Monthly Analysis — the same dark surfaces, filter bar, KPI strip, panels, table and
   insight blocks as the rest of the dashboard.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size:
   625 in the 1.32fr column, 470 in the ~1fr columns, 765 across half the page, and two
   215-unit dials side by side in one column. */

.so-page[b-svnms7rpbg] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-svnms7rpbg] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-svnms7rpbg] {
    background: #020b2b;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 285px;
    min-width: 0;
}

.sa-brand-logo[b-svnms7rpbg] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-svnms7rpbg] { min-width: 0; }

.sa-brand-title[b-svnms7rpbg] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    line-height: 1.15;
}

.sa-brand-sub[b-svnms7rpbg] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #35d17a;
    line-height: 1.2;
}

.sa-brand-range[b-svnms7rpbg] {
    font-size: 0.63rem;
    color: #b6c1d2;
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.sa-filter[b-svnms7rpbg] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-svnms7rpbg] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.sa-field label[b-svnms7rpbg] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-svnms7rpbg] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-svnms7rpbg] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-svnms7rpbg] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-svnms7rpbg] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-svnms7rpbg] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
}

.sa-seg:hover[b-svnms7rpbg] { background: #e2e7f3; }

.sa-seg-on[b-svnms7rpbg] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-svnms7rpbg] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-svnms7rpbg] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #6b7590;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-svnms7rpbg] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-svnms7rpbg]::placeholder { color: #98a1b8; }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-svnms7rpbg] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
}

.sa-btn-apply[b-svnms7rpbg] { background: #058940; }
.sa-btn-apply:hover[b-svnms7rpbg] { background: #047235; }
.sa-btn-apply:disabled[b-svnms7rpbg] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-svnms7rpbg] { background: #8216d8; }
.sa-btn-reset:hover[b-svnms7rpbg] { background: #6f10ba; }
.sa-btn-export[b-svnms7rpbg] { background: #8216d8; }
.sa-btn-export:hover[b-svnms7rpbg] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-svnms7rpbg] { background: #0324d9; }
.sa-btn-print:hover[b-svnms7rpbg] { background: #021fb8; }

.sa-btn-icon[b-svnms7rpbg] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-svnms7rpbg] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-svnms7rpbg],
.sa-select-state[b-svnms7rpbg],
.sa-select-zone[b-svnms7rpbg] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-svnms7rpbg] { color: #9fb4d4; font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-svnms7rpbg], .so-warn[b-svnms7rpbg] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-svnms7rpbg] { background: #011140; border: 1px solid rgba(120, 165, 235, 0.22); }
.so-empty strong[b-svnms7rpbg] { color: #ffffff; font-size: 0.9rem; }
.so-empty span[b-svnms7rpbg] { color: #9fabc0; font-size: 0.76rem; }

.sa-empty-inline[b-svnms7rpbg] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-svnms7rpbg] { font-size: 0.76rem; }
.sa-empty-inline span[b-svnms7rpbg] { font-size: 0.66rem; }

.so-warn[b-svnms7rpbg] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-svnms7rpbg] { color: #ffd79a; font-size: 0.76rem; }
.so-warn span[b-svnms7rpbg] { color: #cfb894; font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-svnms7rpbg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-svnms7rpbg] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-svnms7rpbg] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-svnms7rpbg] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-svnms7rpbg] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-svnms7rpbg] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-svnms7rpbg] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-svnms7rpbg] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-svnms7rpbg] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-svnms7rpbg] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-svnms7rpbg] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-svnms7rpbg] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-svnms7rpbg] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-svnms7rpbg] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-svnms7rpbg] { grid-template-columns: 1fr 1fr; }

.so-panel[b-svnms7rpbg] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-svnms7rpbg] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-svnms7rpbg] {
    font-weight: 500;
    font-size: 0.6rem;
    color: #9fb4d4;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-svnms7rpbg]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-svnms7rpbg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-svnms7rpbg] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-svnms7rpbg] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-svnms7rpbg] { background: rgba(120, 165, 235, 0.16); color: #bcd3f2; }
.sa-chip-search[b-svnms7rpbg] { background: rgba(245, 200, 66, 0.16); color: #f5d98a; }
.sa-chip-view[b-svnms7rpbg] { background: rgba(47, 168, 90, 0.18); color: #8ee4ab; }

/* ---------- Tiles ---------- */
.so-tiles[b-svnms7rpbg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-svnms7rpbg] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-svnms7rpbg] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.so-tile-good[b-svnms7rpbg] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-svnms7rpbg] { border-color: rgba(120, 165, 235, 0.4); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-svnms7rpbg] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-tile-val[b-svnms7rpbg] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-svnms7rpbg] { font-size: 0.56rem; color: #a8b6cd; }

/* ---------- The records table ---------- */
.so-table-scroll[b-svnms7rpbg] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 165, 235, 0.5) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-svnms7rpbg] { max-height: 312px; }

.so-table-scroll[b-svnms7rpbg]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-svnms7rpbg]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.so-table-scroll[b-svnms7rpbg]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-svnms7rpbg]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-svnms7rpbg] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-svnms7rpbg] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-svnms7rpbg] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.12);
    color: #dfe6f0;
}

.so-table tbody tr:nth-child(even) td[b-svnms7rpbg] { background: rgba(255, 255, 255, 0.022); }
.so-table tbody tr:hover td[b-svnms7rpbg] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-svnms7rpbg] { text-align: right; }
.so-table thead th.so-num[b-svnms7rpbg] { text-align: right; }
.so-money[b-svnms7rpbg] { font-variant-numeric: tabular-nums; }
.so-td-state[b-svnms7rpbg] { font-weight: 700; color: #ffffff; }

.so-table tfoot td[b-svnms7rpbg] {
    position: sticky;
    bottom: 0;
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid #0b2358;
}

.so-table tfoot .so-td-state[b-svnms7rpbg] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-svnms7rpbg], .sa-td-period[b-svnms7rpbg] { width: 6.2rem; }
.sa-th-lgcs[b-svnms7rpbg] { width: 5.2rem; }

.sa-period-pill[b-svnms7rpbg] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid rgba(120, 165, 235, 0.26);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: #cddff7;
}

.sa-fct-tag[b-svnms7rpbg] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-svnms7rpbg] { color: #9fc8ff; font-weight: 600; }
.sa-td-lgc-amt[b-svnms7rpbg] { color: #93e6ac; font-weight: 600; }

.sa-count-chip[b-svnms7rpbg] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #8ee4ab;
    text-align: center;
}

.sa-zone-chip[b-svnms7rpbg] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-svnms7rpbg] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-svnms7rpbg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-svnms7rpbg] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-svnms7rpbg] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-svnms7rpbg] { margin-top: 0.1rem; }

.exec-insight-heading[b-svnms7rpbg] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5c842;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-svnms7rpbg] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-svnms7rpbg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-svnms7rpbg] {
    color: #93a1b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-svnms7rpbg] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-svnms7rpbg] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-svnms7rpbg] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-trend-list li:last-child[b-svnms7rpbg] { border-bottom: none; }

.exec-trend-arrow[b-svnms7rpbg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-svnms7rpbg]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-svnms7rpbg] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-svnms7rpbg] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-svnms7rpbg] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-svnms7rpbg] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-insights-list li:last-child[b-svnms7rpbg] { border-bottom: none; }

.exec-insight-icon[b-svnms7rpbg] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-svnms7rpbg]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-svnms7rpbg] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-svnms7rpbg] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-svnms7rpbg] {
    font-size: 0.58rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-svnms7rpbg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-svnms7rpbg], .sa-row-c[b-svnms7rpbg] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-svnms7rpbg] { flex-direction: column; }
    .sa-brand[b-svnms7rpbg] { flex: 1 1 auto; }
    .so-kpis[b-svnms7rpbg] { flex-direction: column; }
    .so-kpi[b-svnms7rpbg] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-svnms7rpbg] { display: none !important; }
    .sa-table-scroll[b-svnms7rpbg] { max-height: none; overflow: visible; }
}

/* ---------- Row grids ---------- */
/* A: the monthly series (625) | the focus month (470) | two dials. */
.ma-row-a[b-svnms7rpbg] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* B: the focus-month columns (625) | the seasonal shape (470) | the insight list. */
.ma-row-b[b-svnms7rpbg] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* C: two 765-unit canvases, so the columns are equal. */
.ma-row-c[b-svnms7rpbg] { grid-template-columns: 1fr 1fr; }

/* Up to 78 monthly rows, so the body scrolls inside the card. */
.ma-table-scroll[b-svnms7rpbg] { max-height: 300px; }

/* Two dials share one card, side by side, each taking half the width. */
.ma-dials[b-svnms7rpbg] { min-width: 0; }

.ma-dial-row[b-svnms7rpbg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: center;
    margin-block: auto;
    min-width: 0;
}

@media (max-width: 1280px) {
    .ma-row-a[b-svnms7rpbg], .ma-row-b[b-svnms7rpbg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .ma-row-a[b-svnms7rpbg], .ma-row-b[b-svnms7rpbg], .ma-row-c[b-svnms7rpbg] { grid-template-columns: minmax(0, 1fr); }
    .ma-dial-row[b-svnms7rpbg] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/StateAllocations.razor.rz.scp.css */
/* State Allocation Records — dark navy dashboard, same surfaces and type scale as Home,
   State Analysis and LGC Analysis. The filter bar deliberately follows the Geopolitical
   Zones page instead: a light panel sitting beside the brand block, so the two pages
   read as the same product.

   Chart canvas widths are set in the razor to the same ratio as the grid fractions
   below (row B 620:470, row C 765:765), because an SVG's type scales with its panel:
   rendered px = font units x panel width / canvas width. Keeping that ratio constant is
   what makes every chart on the page come out at one font size. */

.so-page[b-3vsgvtk1j0] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-3vsgvtk1j0] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-3vsgvtk1j0] {
    background: #020b2b;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 285px;
    min-width: 0;
}

.sa-brand-logo[b-3vsgvtk1j0] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-3vsgvtk1j0] { min-width: 0; }

.sa-brand-title[b-3vsgvtk1j0] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    line-height: 1.15;
}

.sa-brand-sub[b-3vsgvtk1j0] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #35d17a;
    line-height: 1.2;
}

.sa-brand-range[b-3vsgvtk1j0] {
    font-size: 0.63rem;
    color: #b6c1d2;
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.sa-filter[b-3vsgvtk1j0] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-3vsgvtk1j0] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.sa-field label[b-3vsgvtk1j0] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-3vsgvtk1j0] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-3vsgvtk1j0] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-3vsgvtk1j0] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-3vsgvtk1j0] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-3vsgvtk1j0] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
}

.sa-seg:hover[b-3vsgvtk1j0] { background: #e2e7f3; }

.sa-seg-on[b-3vsgvtk1j0] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-3vsgvtk1j0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-3vsgvtk1j0] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #6b7590;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-3vsgvtk1j0] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-3vsgvtk1j0]::placeholder { color: #98a1b8; }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-3vsgvtk1j0] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
}

.sa-btn-apply[b-3vsgvtk1j0] { background: #058940; }
.sa-btn-apply:hover[b-3vsgvtk1j0] { background: #047235; }
.sa-btn-apply:disabled[b-3vsgvtk1j0] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-3vsgvtk1j0] { background: #8216d8; }
.sa-btn-reset:hover[b-3vsgvtk1j0] { background: #6f10ba; }
.sa-btn-export[b-3vsgvtk1j0] { background: #8216d8; }
.sa-btn-export:hover[b-3vsgvtk1j0] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-3vsgvtk1j0] { background: #0324d9; }
.sa-btn-print:hover[b-3vsgvtk1j0] { background: #021fb8; }

.sa-btn-icon[b-3vsgvtk1j0] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-3vsgvtk1j0] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-3vsgvtk1j0],
.sa-select-state[b-3vsgvtk1j0],
.sa-select-zone[b-3vsgvtk1j0] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-3vsgvtk1j0] { color: #9fb4d4; font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-3vsgvtk1j0], .so-warn[b-3vsgvtk1j0] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-3vsgvtk1j0] { background: #011140; border: 1px solid rgba(120, 165, 235, 0.22); }
.so-empty strong[b-3vsgvtk1j0] { color: #ffffff; font-size: 0.9rem; }
.so-empty span[b-3vsgvtk1j0] { color: #9fabc0; font-size: 0.76rem; }

.sa-empty-inline[b-3vsgvtk1j0] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-3vsgvtk1j0] { font-size: 0.76rem; }
.sa-empty-inline span[b-3vsgvtk1j0] { font-size: 0.66rem; }

.so-warn[b-3vsgvtk1j0] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-3vsgvtk1j0] { color: #ffd79a; font-size: 0.76rem; }
.so-warn span[b-3vsgvtk1j0] { color: #cfb894; font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-3vsgvtk1j0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-3vsgvtk1j0] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-3vsgvtk1j0] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-3vsgvtk1j0] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-3vsgvtk1j0] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-3vsgvtk1j0] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-3vsgvtk1j0] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-3vsgvtk1j0] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-3vsgvtk1j0] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-3vsgvtk1j0] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-3vsgvtk1j0] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-3vsgvtk1j0] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-3vsgvtk1j0] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-3vsgvtk1j0] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-3vsgvtk1j0] { grid-template-columns: 1fr 1fr; }

.so-panel[b-3vsgvtk1j0] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-3vsgvtk1j0] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-3vsgvtk1j0] {
    font-weight: 500;
    font-size: 0.6rem;
    color: #9fb4d4;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-3vsgvtk1j0]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-3vsgvtk1j0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-3vsgvtk1j0] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-3vsgvtk1j0] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-3vsgvtk1j0] { background: rgba(120, 165, 235, 0.16); color: #bcd3f2; }
.sa-chip-search[b-3vsgvtk1j0] { background: rgba(245, 200, 66, 0.16); color: #f5d98a; }
.sa-chip-view[b-3vsgvtk1j0] { background: rgba(47, 168, 90, 0.18); color: #8ee4ab; }

/* ---------- Tiles ---------- */
.so-tiles[b-3vsgvtk1j0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-3vsgvtk1j0] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-3vsgvtk1j0] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.so-tile-good[b-3vsgvtk1j0] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-3vsgvtk1j0] { border-color: rgba(120, 165, 235, 0.4); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-3vsgvtk1j0] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-tile-val[b-3vsgvtk1j0] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-3vsgvtk1j0] { font-size: 0.56rem; color: #a8b6cd; }

/* ---------- The records table ---------- */
.so-table-scroll[b-3vsgvtk1j0] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 165, 235, 0.5) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-3vsgvtk1j0] { max-height: 312px; }

.so-table-scroll[b-3vsgvtk1j0]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-3vsgvtk1j0]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.so-table-scroll[b-3vsgvtk1j0]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-3vsgvtk1j0]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-3vsgvtk1j0] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-3vsgvtk1j0] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-3vsgvtk1j0] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.12);
    color: #dfe6f0;
}

.so-table tbody tr:nth-child(even) td[b-3vsgvtk1j0] { background: rgba(255, 255, 255, 0.022); }
.so-table tbody tr:hover td[b-3vsgvtk1j0] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-3vsgvtk1j0] { text-align: right; }
.so-table thead th.so-num[b-3vsgvtk1j0] { text-align: right; }
.so-money[b-3vsgvtk1j0] { font-variant-numeric: tabular-nums; }
.so-td-state[b-3vsgvtk1j0] { font-weight: 700; color: #ffffff; }

.so-table tfoot td[b-3vsgvtk1j0] {
    position: sticky;
    bottom: 0;
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid #0b2358;
}

.so-table tfoot .so-td-state[b-3vsgvtk1j0] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-3vsgvtk1j0], .sa-td-period[b-3vsgvtk1j0] { width: 6.2rem; }
.sa-th-lgcs[b-3vsgvtk1j0] { width: 5.2rem; }

.sa-period-pill[b-3vsgvtk1j0] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid rgba(120, 165, 235, 0.26);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: #cddff7;
}

.sa-fct-tag[b-3vsgvtk1j0] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-3vsgvtk1j0] { color: #9fc8ff; font-weight: 600; }
.sa-td-lgc-amt[b-3vsgvtk1j0] { color: #93e6ac; font-weight: 600; }

.sa-count-chip[b-3vsgvtk1j0] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #8ee4ab;
    text-align: center;
}

.sa-zone-chip[b-3vsgvtk1j0] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-3vsgvtk1j0] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-3vsgvtk1j0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-3vsgvtk1j0] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-3vsgvtk1j0] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-3vsgvtk1j0] { margin-top: 0.1rem; }

.exec-insight-heading[b-3vsgvtk1j0] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5c842;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-3vsgvtk1j0] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-3vsgvtk1j0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-3vsgvtk1j0] {
    color: #93a1b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-3vsgvtk1j0] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-3vsgvtk1j0] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-3vsgvtk1j0] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-trend-list li:last-child[b-3vsgvtk1j0] { border-bottom: none; }

.exec-trend-arrow[b-3vsgvtk1j0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-3vsgvtk1j0]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-3vsgvtk1j0] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-3vsgvtk1j0] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-3vsgvtk1j0] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-3vsgvtk1j0] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-insights-list li:last-child[b-3vsgvtk1j0] { border-bottom: none; }

.exec-insight-icon[b-3vsgvtk1j0] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-3vsgvtk1j0]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-3vsgvtk1j0] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-3vsgvtk1j0] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-3vsgvtk1j0] {
    font-size: 0.58rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-3vsgvtk1j0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-3vsgvtk1j0], .sa-row-c[b-3vsgvtk1j0] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-3vsgvtk1j0] { flex-direction: column; }
    .sa-brand[b-3vsgvtk1j0] { flex: 1 1 auto; }
    .so-kpis[b-3vsgvtk1j0] { flex-direction: column; }
    .so-kpi[b-3vsgvtk1j0] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-3vsgvtk1j0] { display: none !important; }
    .sa-table-scroll[b-3vsgvtk1j0] { max-height: none; overflow: visible; }
}
/* /Components/Pages/StateOverview.razor.rz.scp.css */
/* State Analysis dashboard — dark navy, consistent with Home and Geopolitical Zones.
   Layout follows the reference designs: a KPI strip across the top, then a four-column
   row of ranked/spatial analytics, a four-column row of trend/heatmap/statistics, and a
   final row led by the full state ranking table. */

.so-page[b-u3jw74mape] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Header: brand, KPIs and filter on one line ---------- */
/* The KPIs size to their own content rather than to equal columns, which is what frees
   the horizontal room for the filter to sit beside them. */
.so-top[b-u3jw74mape] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.so-brand[b-u3jw74mape] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.05rem;
    flex: 0 1 auto;
    min-width: 0;
}

.so-title[b-u3jw74mape] {
    font-size: 0.68rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.so-title-sub[b-u3jw74mape] {
    display: block;
    font-size: 0.53rem;
    font-weight: 600;
    color: #9fb4d4;
    letter-spacing: 0.05em;
}

.so-range[b-u3jw74mape] { font-size: 0.53rem; color: #7f93b5; white-space: nowrap; }

.so-kpis[b-u3jw74mape] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-u3jw74mape] {
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-u3jw74mape] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-u3jw74mape] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-u3jw74mape] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-u3jw74mape] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-u3jw74mape] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-u3jw74mape] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-cap-note[b-u3jw74mape] { font-weight: 500; text-transform: none; letter-spacing: 0; }

.so-kpi-num[b-u3jw74mape] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-u3jw74mape] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Filter, inline with the KPIs ---------- */
.so-filter[b-u3jw74mape] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.so-field[b-u3jw74mape] { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }

.so-field label[b-u3jw74mape] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-field-pair[b-u3jw74mape] { display: flex; gap: 0.2rem; }

.so-select[b-u3jw74mape] {
    appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    min-width: 3.5rem;
}

.so-select-year[b-u3jw74mape] { min-width: 3.5rem; }
.so-select-zone[b-u3jw74mape] { min-width: 6.4rem; }

.so-btn[b-u3jw74mape] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
}

.so-btn-apply[b-u3jw74mape] { background: #058940; }
.so-btn-apply:hover[b-u3jw74mape] { background: #047235; }
.so-btn-apply:disabled[b-u3jw74mape] { background: #6f8f7c; cursor: default; }

/* ---------- States: loading, empty, stale ---------- */
.so-loading[b-u3jw74mape] { color: #9fb4d4; font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-u3jw74mape], .so-warn[b-u3jw74mape] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-u3jw74mape] { background: #011140; border: 1px solid rgba(120, 165, 235, 0.22); }
.so-empty strong[b-u3jw74mape] { color: #ffffff; font-size: 0.9rem; }
.so-empty span[b-u3jw74mape] { color: #9fabc0; font-size: 0.76rem; }

.so-warn[b-u3jw74mape] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-u3jw74mape] { color: #ffd79a; font-size: 0.76rem; }
.so-warn span[b-u3jw74mape] { color: #cfb894; font-size: 0.7rem; }

/* ---------- Rows and panels ---------- */
.so-row[b-u3jw74mape] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The two ranked lists give width to the Performance Summary, which carries a donut and
   four tiles. The canvases are then sized so all three cards come out the same content
   height — see the builder calls in StateOverview.razor — instead of the grid stretching
   two short cards to match a tall one. 
.so-row-a { grid-template-columns: 0.85fr 0.85fr 1.3fr; }*/
.so-row-a[b-u3jw74mape] {
    grid-template-columns: minmax(0, 1fr)  minmax(0, 1fr)  minmax(0, 2fr) ;
    
}

/* The trend chart is drawn on a 620-unit canvas and carries a six-item legend, so it
   takes the widest column of its row; the insight list needs the least. */
.so-row-b[b-u3jw74mape] { grid-template-columns: 1.18fr 0.94fr 0.88fr; }
.so-row-c[b-u3jw74mape] { grid-template-columns: 1.55fr 1fr 1fr; }

.so-panel[b-u3jw74mape] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-stack[b-u3jw74mape] {
    display: grid;
    gap: 1.89rem;
    min-width: 0;
    grid-template-rows: auto auto;
}

.so-panel-title[b-u3jw74mape] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-u3jw74mape] {
    font-weight: 500;
    font-size: 0.6rem;
    color: #9fb4d4;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-u3jw74mape]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* ---------- Tiles (performance summary) ---------- */
.so-tiles[b-u3jw74mape] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.so-tile[b-u3jw74mape] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.so-tile-good[b-u3jw74mape] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-bad[b-u3jw74mape] { border-color: rgba(255, 138, 128, 0.4); background: rgba(255, 138, 128, 0.1); }
.so-tile-info[b-u3jw74mape] { border-color: rgba(120, 165, 235, 0.4); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-u3jw74mape] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-tile-val[b-u3jw74mape] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-u3jw74mape] { font-size: 0.56rem; color: #a8b6cd; }

.so-up[b-u3jw74mape] { color: #4bd47a; }
.so-down[b-u3jw74mape] { color: #ff8a80; }

/* ---------- Key insights: Summary / Trends / Key Findings ---------- */
/* Same structure as the home page's Executive Insights panel, one step down in size
   because this card sits in a narrower column. */
.so-panel-insights[b-u3jw74mape] { min-width: 0; }

.exec-insight-section[b-u3jw74mape] { margin-top: 0.3rem; }
.exec-insight-section:first-of-type[b-u3jw74mape] { margin-top: 0.1rem; }

.exec-insight-heading[b-u3jw74mape] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5c842;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
    margin-top: 0.8rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-u3jw74mape] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-u3jw74mape] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-u3jw74mape] {
    color: #93a1b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-u3jw74mape] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-u3jw74mape] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-u3jw74mape] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-trend-list li:last-child[b-u3jw74mape] { border-bottom: none; }

.exec-trend-arrow[b-u3jw74mape] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-u3jw74mape]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-u3jw74mape] { font-size: 0.585rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-u3jw74mape] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-u3jw74mape] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-u3jw74mape] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-insights-list li:last-child[b-u3jw74mape] { border-bottom: none; }

.exec-insight-icon[b-u3jw74mape] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-u3jw74mape]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-u3jw74mape] { font-size: 0.585rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-u3jw74mape] { font-weight: 700; }

.exec-bulb-icon[b-u3jw74mape] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ---------- Growth badges ---------- */
.so-badges[b-u3jw74mape] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
}

.so-badge[b-u3jw74mape] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    border-radius: 7px;
    padding: 0.3rem 0.15rem;
    min-width: 0;
}

.so-badge-up[b-u3jw74mape] { border: 1px solid rgba(75, 212, 122, 0.45); background: rgba(75, 212, 122, 0.1); }
.so-badge-down[b-u3jw74mape] { border: 1px solid rgba(255, 138, 128, 0.45); background: rgba(255, 138, 128, 0.1); }

.so-badge-rank[b-u3jw74mape] { font-size: 0.54rem; font-weight: 800; }
.so-badge-up .so-badge-rank[b-u3jw74mape] { color: #4bd47a; }
.so-badge-down .so-badge-rank[b-u3jw74mape] { color: #ff8a80; }

.so-badge-name[b-u3jw74mape] {
    font-size: 0.56rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.so-badge-num[b-u3jw74mape] { font-size: 0.54rem; font-weight: 700; color: #c2cbdb; }

/* ---------- State ranking table ---------- */
.so-panel-table[b-u3jw74mape] { min-width: 0; }

/* Fixed height, so the card matches the reference design while the body scrolls through
   every state. The header stays put as you scroll. */
.so-table-scroll[b-u3jw74mape] {
    max-height: 268px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 165, 235, 0.5) transparent;
}

.so-table-scroll[b-u3jw74mape]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-u3jw74mape]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.so-table-scroll[b-u3jw74mape]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-u3jw74mape]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-u3jw74mape] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.6rem;
    white-space: nowrap;
}

.so-table thead th[b-u3jw74mape] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.4rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-u3jw74mape] {
    padding: 0.26rem 0.4rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.12);
    color: #dfe6f0;
}

.so-table tbody tr:nth-child(even) td[b-u3jw74mape] { background: rgba(255, 255, 255, 0.022); }
.so-table tbody tr:hover td[b-u3jw74mape] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-u3jw74mape] { text-align: right; }
.so-money[b-u3jw74mape] { font-variant-numeric: tabular-nums; }
.so-th-rank[b-u3jw74mape], .so-td-rank[b-u3jw74mape] { text-align: right; width: 2.6rem; color: #9fb4d4; }
.so-td-state[b-u3jw74mape] { font-weight: 700; color: #ffffff; }
.so-td-zone[b-u3jw74mape] { color: #a8b6cd; }

.so-table tfoot td[b-u3jw74mape] {
    position: sticky;
    bottom: 0;
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    padding: 0.3rem 0.4rem;
    border-top: 1px solid #0b2358;
}

.so-table tfoot .so-td-state[b-u3jw74mape] { text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Allocation map ---------- */
.so-row-map[b-u3jw74mape] { grid-template-columns: minmax(0, 1fr); }

.so-panel-map[b-u3jw74mape] { min-width: 0; }

.so-map-body[b-u3jw74mape] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

/* Capped rather than stretched: across the full row the map would stand over 800px tall,
   and the labels are already comfortable at this width. */
.so-map-body[b-u3jw74mape]  svg.faac-statemap-labelled {
    width: 100%;
    max-width: 1180px;
    height: auto;
    display: block;
}

.so-map-legend[b-u3jw74mape] { width: 100%; max-width: 300px; }

/* ---------- Footer ---------- */
.so-foot[b-u3jw74mape] {
    font-size: 0.58rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
    .so-filter[b-u3jw74mape] { margin-left: 0; }
}

@media (max-width: 1280px) {
    .so-row-a[b-u3jw74mape], .so-row-b[b-u3jw74mape] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .so-row-c[b-u3jw74mape] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .so-row-a[b-u3jw74mape], .so-row-b[b-u3jw74mape], .so-row-c[b-u3jw74mape] { grid-template-columns: 1fr; }
    .so-kpis[b-u3jw74mape] { flex-direction: column; }
    .so-kpi[b-u3jw74mape] { flex: 1 1 auto; }
}

@media print {
    .so-filter[b-u3jw74mape] { display: none; }
    .so-table-scroll[b-u3jw74mape] { max-height: none; overflow: visible; }
}
.state-exec-main-grid[b-u3jw74mape] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(255px, 30%);
    gap: 0.55rem;
    margin-bottom: 0.55rem;
    align-items: stretch;
}
.state-exec-main-left[b-u3jw74mape] {
    display: grid;
    grid-template-rows: max-content max-content max-content;
    gap: 0.55rem;
    min-width: 0;
}
.state-exec-main-right[b-u3jw74mape] {
    display: grid;
    grid-template-rows: max-content max-content max-content;
    gap: 0.55rem;
    min-width: 0;
}
.state-exec-panel-row[b-u3jw74mape] {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.state-exec-panel-row-trend[b-u3jw74mape] {
    grid-template-columns: 1.3fr 1fr;
}
.state-so-row-c[b-u3jw74mape] {
    grid-template-columns: 1.55fr 1fr;
}
.state-exec-panel[b-u3jw74mape] {
   /* background: #01163e;
    border: 1px solid rgba(120, 165, 235, 0.18);
    border-radius: 10px;*/
    padding: 0.75rem 0.9rem 0.85rem;
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    grid-template-rows: max-content max-content max-content;
}
.keyinsight-panel-title[b-u3jw74mape] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}
.keyinsights-title[b-u3jw74mape] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.exec-bulb-icon[b-u3jw74mape] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
/* /Components/Pages/TrendAnalysis.razor.rz.scp.css */
/* Trend Analysis — the same dark surfaces, filter bar, KPI strip, panels, table and
   insight blocks as the rest of the dashboard.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size:
   625 in the 1.32fr column, 470 in the ~1fr columns, 765 across half the page, and two
   215-unit dials side by side in one column. */

.so-page[b-6ugbaui281] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-6ugbaui281] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-6ugbaui281] {
    background: #020b2b;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 285px;
    min-width: 0;
}

.sa-brand-logo[b-6ugbaui281] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-6ugbaui281] { min-width: 0; }

.sa-brand-title[b-6ugbaui281] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    line-height: 1.15;
}

.sa-brand-sub[b-6ugbaui281] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #35d17a;
    line-height: 1.2;
}

.sa-brand-range[b-6ugbaui281] {
    font-size: 0.63rem;
    color: #b6c1d2;
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.sa-filter[b-6ugbaui281] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-6ugbaui281] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.sa-field label[b-6ugbaui281] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-6ugbaui281] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-6ugbaui281] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-6ugbaui281] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-6ugbaui281] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-6ugbaui281] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
}

.sa-seg:hover[b-6ugbaui281] { background: #e2e7f3; }

.sa-seg-on[b-6ugbaui281] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-6ugbaui281] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-6ugbaui281] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #6b7590;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-6ugbaui281] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-6ugbaui281]::placeholder { color: #98a1b8; }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-6ugbaui281] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
}

.sa-btn-apply[b-6ugbaui281] { background: #058940; }
.sa-btn-apply:hover[b-6ugbaui281] { background: #047235; }
.sa-btn-apply:disabled[b-6ugbaui281] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-6ugbaui281] { background: #8216d8; }
.sa-btn-reset:hover[b-6ugbaui281] { background: #6f10ba; }
.sa-btn-export[b-6ugbaui281] { background: #8216d8; }
.sa-btn-export:hover[b-6ugbaui281] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-6ugbaui281] { background: #0324d9; }
.sa-btn-print:hover[b-6ugbaui281] { background: #021fb8; }

.sa-btn-icon[b-6ugbaui281] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-6ugbaui281] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-6ugbaui281],
.sa-select-state[b-6ugbaui281],
.sa-select-zone[b-6ugbaui281] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-6ugbaui281] { color: #9fb4d4; font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-6ugbaui281], .so-warn[b-6ugbaui281] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-6ugbaui281] { background: #011140; border: 1px solid rgba(120, 165, 235, 0.22); }
.so-empty strong[b-6ugbaui281] { color: #ffffff; font-size: 0.9rem; }
.so-empty span[b-6ugbaui281] { color: #9fabc0; font-size: 0.76rem; }

.sa-empty-inline[b-6ugbaui281] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-6ugbaui281] { font-size: 0.76rem; }
.sa-empty-inline span[b-6ugbaui281] { font-size: 0.66rem; }

.so-warn[b-6ugbaui281] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-6ugbaui281] { color: #ffd79a; font-size: 0.76rem; }
.so-warn span[b-6ugbaui281] { color: #cfb894; font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-6ugbaui281] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-6ugbaui281] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-6ugbaui281] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-6ugbaui281] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-6ugbaui281] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-6ugbaui281] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-6ugbaui281] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-6ugbaui281] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-6ugbaui281] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-6ugbaui281] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-6ugbaui281] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-6ugbaui281] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-6ugbaui281] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-6ugbaui281] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-6ugbaui281] { grid-template-columns: 1fr 1fr; }

.so-panel[b-6ugbaui281] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-6ugbaui281] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-6ugbaui281] {
    font-weight: 500;
    font-size: 0.6rem;
    color: #9fb4d4;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-6ugbaui281]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-6ugbaui281] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-6ugbaui281] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-6ugbaui281] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-6ugbaui281] { background: rgba(120, 165, 235, 0.16); color: #bcd3f2; }
.sa-chip-search[b-6ugbaui281] { background: rgba(245, 200, 66, 0.16); color: #f5d98a; }
.sa-chip-view[b-6ugbaui281] { background: rgba(47, 168, 90, 0.18); color: #8ee4ab; }

/* ---------- Tiles ---------- */
.so-tiles[b-6ugbaui281] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-6ugbaui281] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-6ugbaui281] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.so-tile-good[b-6ugbaui281] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-6ugbaui281] { border-color: rgba(120, 165, 235, 0.4); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-6ugbaui281] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-tile-val[b-6ugbaui281] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-6ugbaui281] { font-size: 0.56rem; color: #a8b6cd; }

/* ---------- The records table ---------- */
.so-table-scroll[b-6ugbaui281] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 165, 235, 0.5) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-6ugbaui281] { max-height: 312px; }

.so-table-scroll[b-6ugbaui281]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-6ugbaui281]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.so-table-scroll[b-6ugbaui281]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-6ugbaui281]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-6ugbaui281] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-6ugbaui281] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-6ugbaui281] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.12);
    color: #dfe6f0;
}

.so-table tbody tr:nth-child(even) td[b-6ugbaui281] { background: rgba(255, 255, 255, 0.022); }
.so-table tbody tr:hover td[b-6ugbaui281] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-6ugbaui281] { text-align: right; }
.so-table thead th.so-num[b-6ugbaui281] { text-align: right; }
.so-money[b-6ugbaui281] { font-variant-numeric: tabular-nums; }
.so-td-state[b-6ugbaui281] { font-weight: 700; color: #ffffff; }

.so-table tfoot td[b-6ugbaui281] {
    position: sticky;
    bottom: 0;
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid #0b2358;
}

.so-table tfoot .so-td-state[b-6ugbaui281] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-6ugbaui281], .sa-td-period[b-6ugbaui281] { width: 6.2rem; }
.sa-th-lgcs[b-6ugbaui281] { width: 5.2rem; }

.sa-period-pill[b-6ugbaui281] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid rgba(120, 165, 235, 0.26);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: #cddff7;
}

.sa-fct-tag[b-6ugbaui281] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-6ugbaui281] { color: #9fc8ff; font-weight: 600; }
.sa-td-lgc-amt[b-6ugbaui281] { color: #93e6ac; font-weight: 600; }

.sa-count-chip[b-6ugbaui281] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #8ee4ab;
    text-align: center;
}

.sa-zone-chip[b-6ugbaui281] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-6ugbaui281] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-6ugbaui281] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-6ugbaui281] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-6ugbaui281] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-6ugbaui281] { margin-top: 0.1rem; }

.exec-insight-heading[b-6ugbaui281] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5c842;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-6ugbaui281] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-6ugbaui281] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-6ugbaui281] {
    color: #93a1b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-6ugbaui281] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-6ugbaui281] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-6ugbaui281] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-trend-list li:last-child[b-6ugbaui281] { border-bottom: none; }

.exec-trend-arrow[b-6ugbaui281] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-6ugbaui281]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-6ugbaui281] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-6ugbaui281] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-6ugbaui281] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-6ugbaui281] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-insights-list li:last-child[b-6ugbaui281] { border-bottom: none; }

.exec-insight-icon[b-6ugbaui281] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-6ugbaui281]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-6ugbaui281] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-6ugbaui281] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-6ugbaui281] {
    font-size: 0.58rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-6ugbaui281] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-6ugbaui281], .sa-row-c[b-6ugbaui281] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-6ugbaui281] { flex-direction: column; }
    .sa-brand[b-6ugbaui281] { flex: 1 1 auto; }
    .so-kpis[b-6ugbaui281] { flex-direction: column; }
    .so-kpi[b-6ugbaui281] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-6ugbaui281] { display: none !important; }
    .sa-table-scroll[b-6ugbaui281] { max-height: none; overflow: visible; }
}

/* ---------- Row grids ---------- */
/* A: the trajectory (625) | the rolling average (470) | two dials. */
.ta-row-a[b-6ugbaui281] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* B: fastest (470) | slowest (470) | the insight list. */
.ta-row-b[b-6ugbaui281] { grid-template-columns: 1.1fr 1.1fr 1fr; }

/* C: two 765-unit canvases, so the columns are equal. */
/* The map has a row to itself; the bands follow on their own. */
.ta-row-map[b-6ugbaui281] { grid-template-columns: minmax(0, 1fr); }
.ta-row-c[b-6ugbaui281] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    
}



/* Two dials share one card, side by side, each taking half the width. */
.ta-dials[b-6ugbaui281] { min-width: 0; }

.ta-dial-row[b-6ugbaui281] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: center;
    margin-block: auto;
    min-width: 0;
}

/* The map keeps Nigeria's own proportions and sits centred, with the ramp legend under
   it; the SVG carries no scope attribute of its own, hence ::deep. */
.ta-map-panel[b-6ugbaui281] { min-width: 0; }

.ta-map-body[b-6ugbaui281] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-block: auto;
    min-width: 0;
}

/* 340px was right for an unlabelled shape in a half column. A labelled map needs room:
   at that cap the state names rendered under four pixels. Capped rather than stretched to
   the full row, where the map would stand over 800px tall. */
.ta-map-body[b-6ugbaui281]  svg.faac-statemap-labelled {
    width: 100%;
    max-width: 1180px;
    height: auto;
    display: block;
}

.ta-map-body[b-6ugbaui281]  svg.faac-chart {
    width: 100%;
    /*max-width: 340px;*/
    height: auto;
    display: block;
}

.ta-map-legend[b-6ugbaui281] { width: 100%; max-width: 300px; }

/* The bands card kept its old rendered width, so moving it to a full row did not quietly
   rescale its type. */
.ta-band-panel[b-6ugbaui281]  svg.faac-chart {
    width: 100%;
    max-width: 765px;
    margin: 0 auto;
}

@media (max-width: 1280px) {
    .ta-row-a[b-6ugbaui281], .ta-row-b[b-6ugbaui281] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .ta-row-a[b-6ugbaui281], .ta-row-b[b-6ugbaui281], .ta-row-c[b-6ugbaui281] { grid-template-columns: minmax(0, 1fr); }
    .ta-dial-row[b-6ugbaui281] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/YearlyAnalysis.razor.rz.scp.css */
/* Yearly Analysis — the same dark surfaces, filter bar, KPI strip, panels, table and
   insight blocks as the rest of the dashboard.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size:
   625 in the 1.32fr column, 470 in the ~1fr columns, 765 across half the page, and two
   215-unit dials side by side in one column. */

.so-page[b-19n4y6rxy3] {
    background-color: #010e2f;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(6, 32, 86, 0.5) 0%, rgba(1, 7, 33, 0) 70%),
        linear-gradient(180deg, #020b28 0%, #010e2f 55%, #010423 100%);
    color: #e8eaf0;
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-19n4y6rxy3] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-19n4y6rxy3] {
    background: #020b2b;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 285px;
    min-width: 0;
}

.sa-brand-logo[b-19n4y6rxy3] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-19n4y6rxy3] { min-width: 0; }

.sa-brand-title[b-19n4y6rxy3] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    line-height: 1.15;
}

.sa-brand-sub[b-19n4y6rxy3] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #35d17a;
    line-height: 1.2;
}

.sa-brand-range[b-19n4y6rxy3] {
    font-size: 0.63rem;
    color: #b6c1d2;
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.sa-filter[b-19n4y6rxy3] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-19n4y6rxy3] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.sa-field label[b-19n4y6rxy3] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-19n4y6rxy3] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-19n4y6rxy3] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.6rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-19n4y6rxy3] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-19n4y6rxy3] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-19n4y6rxy3] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.58rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
}

.sa-seg:hover[b-19n4y6rxy3] { background: #e2e7f3; }

.sa-seg-on[b-19n4y6rxy3] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-19n4y6rxy3] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-19n4y6rxy3] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #6b7590;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-19n4y6rxy3] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-19n4y6rxy3]::placeholder { color: #98a1b8; }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-19n4y6rxy3] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-decoration: none;
}

.sa-btn-apply[b-19n4y6rxy3] { background: #058940; }
.sa-btn-apply:hover[b-19n4y6rxy3] { background: #047235; }
.sa-btn-apply:disabled[b-19n4y6rxy3] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-19n4y6rxy3] { background: #8216d8; }
.sa-btn-reset:hover[b-19n4y6rxy3] { background: #6f10ba; }
.sa-btn-export[b-19n4y6rxy3] { background: #8216d8; }
.sa-btn-export:hover[b-19n4y6rxy3] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-19n4y6rxy3] { background: #0324d9; }
.sa-btn-print:hover[b-19n4y6rxy3] { background: #021fb8; }

.sa-btn-icon[b-19n4y6rxy3] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-19n4y6rxy3] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-19n4y6rxy3],
.sa-select-state[b-19n4y6rxy3],
.sa-select-zone[b-19n4y6rxy3] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-19n4y6rxy3] { color: #9fb4d4; font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-19n4y6rxy3], .so-warn[b-19n4y6rxy3] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-19n4y6rxy3] { background: #011140; border: 1px solid rgba(120, 165, 235, 0.22); }
.so-empty strong[b-19n4y6rxy3] { color: #ffffff; font-size: 0.9rem; }
.so-empty span[b-19n4y6rxy3] { color: #9fabc0; font-size: 0.76rem; }

.sa-empty-inline[b-19n4y6rxy3] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-19n4y6rxy3] { font-size: 0.76rem; }
.sa-empty-inline span[b-19n4y6rxy3] { font-size: 0.66rem; }

.so-warn[b-19n4y6rxy3] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-19n4y6rxy3] { color: #ffd79a; font-size: 0.76rem; }
.so-warn span[b-19n4y6rxy3] { color: #cfb894; font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-19n4y6rxy3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-19n4y6rxy3] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-19n4y6rxy3] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-19n4y6rxy3] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-19n4y6rxy3] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-19n4y6rxy3] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-19n4y6rxy3] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-19n4y6rxy3] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-19n4y6rxy3] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-19n4y6rxy3] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-19n4y6rxy3] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-19n4y6rxy3] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-19n4y6rxy3] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-19n4y6rxy3] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-19n4y6rxy3] { grid-template-columns: 1fr 1fr; }

.so-panel[b-19n4y6rxy3] {
    background: #011140;
    border: 1px solid rgba(120, 165, 235, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-19n4y6rxy3] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-19n4y6rxy3] {
    font-weight: 500;
    font-size: 0.6rem;
    color: #9fb4d4;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-19n4y6rxy3]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-19n4y6rxy3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-19n4y6rxy3] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-19n4y6rxy3] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-19n4y6rxy3] { background: rgba(120, 165, 235, 0.16); color: #bcd3f2; }
.sa-chip-search[b-19n4y6rxy3] { background: rgba(245, 200, 66, 0.16); color: #f5d98a; }
.sa-chip-view[b-19n4y6rxy3] { background: rgba(47, 168, 90, 0.18); color: #8ee4ab; }

/* ---------- Tiles ---------- */
.so-tiles[b-19n4y6rxy3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-19n4y6rxy3] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-19n4y6rxy3] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.so-tile-good[b-19n4y6rxy3] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-19n4y6rxy3] { border-color: rgba(120, 165, 235, 0.4); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-19n4y6rxy3] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb4d4;
}

.so-tile-val[b-19n4y6rxy3] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-19n4y6rxy3] { font-size: 0.56rem; color: #a8b6cd; }

/* ---------- The records table ---------- */
.so-table-scroll[b-19n4y6rxy3] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid rgba(120, 165, 235, 0.22);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 165, 235, 0.5) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-19n4y6rxy3] { max-height: 312px; }

.so-table-scroll[b-19n4y6rxy3]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-19n4y6rxy3]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.so-table-scroll[b-19n4y6rxy3]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-19n4y6rxy3]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-19n4y6rxy3] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-19n4y6rxy3] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-19n4y6rxy3] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid rgba(120, 165, 235, 0.12);
    color: #dfe6f0;
}

.so-table tbody tr:nth-child(even) td[b-19n4y6rxy3] { background: rgba(255, 255, 255, 0.022); }
.so-table tbody tr:hover td[b-19n4y6rxy3] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-19n4y6rxy3] { text-align: right; }
.so-table thead th.so-num[b-19n4y6rxy3] { text-align: right; }
.so-money[b-19n4y6rxy3] { font-variant-numeric: tabular-nums; }
.so-td-state[b-19n4y6rxy3] { font-weight: 700; color: #ffffff; }

.so-table tfoot td[b-19n4y6rxy3] {
    position: sticky;
    bottom: 0;
    background: #021241;
    color: #ffffff;
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid #0b2358;
}

.so-table tfoot .so-td-state[b-19n4y6rxy3] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-19n4y6rxy3], .sa-td-period[b-19n4y6rxy3] { width: 6.2rem; }
.sa-th-lgcs[b-19n4y6rxy3] { width: 5.2rem; }

.sa-period-pill[b-19n4y6rxy3] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid rgba(120, 165, 235, 0.26);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: #cddff7;
}

.sa-fct-tag[b-19n4y6rxy3] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-19n4y6rxy3] { color: #9fc8ff; font-weight: 600; }
.sa-td-lgc-amt[b-19n4y6rxy3] { color: #93e6ac; font-weight: 600; }

.sa-count-chip[b-19n4y6rxy3] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: #8ee4ab;
    text-align: center;
}

.sa-zone-chip[b-19n4y6rxy3] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-19n4y6rxy3] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-19n4y6rxy3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-19n4y6rxy3] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #f5c842;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-19n4y6rxy3] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-19n4y6rxy3] { margin-top: 0.1rem; }

.exec-insight-heading[b-19n4y6rxy3] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5c842;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-19n4y6rxy3] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-19n4y6rxy3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-19n4y6rxy3] {
    color: #93a1b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-19n4y6rxy3] { color: #eaf0f8; font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-19n4y6rxy3] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-19n4y6rxy3] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-trend-list li:last-child[b-19n4y6rxy3] { border-bottom: none; }

.exec-trend-arrow[b-19n4y6rxy3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-19n4y6rxy3]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-19n4y6rxy3] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-trend-headline[b-19n4y6rxy3] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-19n4y6rxy3] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-19n4y6rxy3] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.exec-insights-list li:last-child[b-19n4y6rxy3] { border-bottom: none; }

.exec-insight-icon[b-19n4y6rxy3] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-19n4y6rxy3]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-19n4y6rxy3] { font-size: 0.635rem; line-height: 1.27; color: #bcc7d8; min-width: 0; }
.exec-insight-accent[b-19n4y6rxy3] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-19n4y6rxy3] {
    font-size: 0.58rem;
    color: #7f93b5;
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-19n4y6rxy3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-19n4y6rxy3], .sa-row-c[b-19n4y6rxy3] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-19n4y6rxy3] { flex-direction: column; }
    .sa-brand[b-19n4y6rxy3] { flex: 1 1 auto; }
    .so-kpis[b-19n4y6rxy3] { flex-direction: column; }
    .so-kpi[b-19n4y6rxy3] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-19n4y6rxy3] { display: none !important; }
    .sa-table-scroll[b-19n4y6rxy3] { max-height: none; overflow: visible; }
}

/* ---------- Row grids ---------- */
/* A: yearly columns (625) | tier split (470) | two dials. */
.ya-row-a[b-19n4y6rxy3] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* B: the year table takes the width a seven-column table needs; the pie column is sized
   so its 470-unit canvas lands at the same scale as the charts in row A. */
.ya-row-b[b-19n4y6rxy3] { grid-template-columns: 1.4fr 1.07fr 1fr; }

/* C: two 765-unit canvases, so the columns are equal. */
.ya-row-c[b-19n4y6rxy3] { grid-template-columns: 1fr 1fr; }

/* The year table is short — seven years, not 2,886 rows — so it needs no tall scroller. */
.ya-table-scroll[b-19n4y6rxy3] { max-height: 300px; }

/* Two dials share one card, side by side, each taking half the width. */
.ya-dials[b-19n4y6rxy3] { min-width: 0; }

.ya-dial-row[b-19n4y6rxy3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: center;
    margin-block: auto;
    min-width: 0;
}

/* A year with fewer than twelve months on record, flagged so its total is never read as
   a fall against the full years beside it. */
.ya-part-tag[b-19n4y6rxy3] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #7a5a12;
    color: #ffe9b0;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

@media (max-width: 1280px) {
    .ya-row-a[b-19n4y6rxy3], .ya-row-b[b-19n4y6rxy3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .ya-row-a[b-19n4y6rxy3], .ya-row-b[b-19n4y6rxy3], .ya-row-c[b-19n4y6rxy3] { grid-template-columns: minmax(0, 1fr); }
    .ya-dial-row[b-19n4y6rxy3] { grid-template-columns: minmax(0, 1fr); }
}