/*
 * Sectors 3 and 4 shared dashboard.
 * Scoped tokens, responsive chart workspace, and accessible data details.
 */

/* sector chrome consolidated in core bundle */

#sectorAccessView {
    display: block;
}

#sectorAccessView[hidden] {
    display: none;
}

.sector-list .sector-item {
    min-height: 5.25rem;
    grid-template-columns: 1.45rem minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    padding-block: 0.72rem;
}

.sector-list .sector-meta span {
    display: block;
    margin-block-start: 0.16rem;
    color: #728398;
    font-size: 0.69rem;
    line-height: 1.2;
}

.sector-list .sector-item.is-active .sector-meta span {
    color: rgba(255, 255, 255, 0.82);
}

.sector-list .sector-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.85rem;
    block-size: 1.85rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #e9f3fb;
    color: var(--sa-navy);
    font-size: 0.74rem;
    font-weight: 800;
}

.sector-list .sector-item.is-active .sector-count {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.sector-progress {
    grid-column: 2 / 4;
    display: block;
    block-size: 3px;
    border-radius: 999px;
    background: #e3ebf4;
    overflow: hidden;
}

.sector-progress i {
    display: block;
    inline-size: var(--sector-share, 0%);
    block-size: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sa-blue), var(--sa-navy));
}

.sector-item.is-active .sector-progress {
    background: rgba(255, 255, 255, 0.22);
}

.sector-item.is-active .sector-progress i {
    background: #ffffff;
}

.sa-root {
    --sa-ink: #383838;
    --sa-muted: #5e6672;
    --sa-navy: #2d51a1;
    --sa-blue: #33a7df;
    --sa-cyan: #b2e6fa;
    --sa-teal: #33a7df;
    --sa-green: #4ba847;
    --sa-amber: #33a7df;
    --sa-orange: #f68d32;
    --sa-line: #d9e3ea;
    --sa-panel: #ffffff;
    --sa-soft: #edf9fe;
    --sa-focus: #eee808;
    --sa-radius: 8px;
    --sa-space-1: 0.25rem;
    --sa-space-2: 0.5rem;
    --sa-space-3: 0.75rem;
    --sa-space-4: 1rem;
    --sa-space-5: 1.25rem;
    --sa-space-6: 1.5rem;
    --sa-space-8: 2rem;
    --sa-shadow: 0 14px 34px rgba(36, 79, 143, 0.1);
    color: var(--sa-ink);
    background:
        linear-gradient(135deg, rgba(47, 128, 192, 0.08), transparent 28rem),
        linear-gradient(315deg, rgba(17, 131, 111, 0.1), transparent 30rem),
        #eef3f7;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    font-family: "Public Sans", system-ui, sans-serif;
    overflow: clip;
}

.sa-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sa-space-6);
    padding: var(--sa-space-8);
    background:
        linear-gradient(135deg, rgba(36, 79, 143, 0.98), rgba(17, 131, 111, 0.94)),
        var(--sa-navy);
    color: #ffffff;
}

.sa-hero-copy {
    max-width: 820px;
}

.sa-kicker {
    margin: 0 0 var(--sa-space-2);
    color: #c8f5ed;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.sa-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.08;
}

.sa-dek {
    max-width: 760px;
    margin: var(--sa-space-3) 0 0;
    color: #eef9fb;
    font-size: 0.96rem;
    line-height: 1.55;
}

.sa-status-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sa-space-2);
    min-width: 220px;
}

.sa-root .dashboard-refresh-status {
    min-height: 1.2rem;
    color: #eef9fb;
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: end;
}

.sa-root .dashboard-refresh-status[data-refresh-tone="error"] {
    color: #ffe1d0;
}

.sa-root .dashboard-refresh-status[data-refresh-tone="loading"] {
    color: var(--sa-focus);
}

.sa-refresh,
.sa-tab,
.sa-chip {
    min-block-size: 2.25rem;
    border-radius: var(--sa-radius);
    cursor: pointer;
    font: inherit;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.sa-refresh {
    padding: 0 var(--sa-space-3);
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 800;
}

.sa-refresh:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sa-tabsbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(216, 227, 238, 0.95);
    background: rgba(238, 243, 247, 0.96);
    backdrop-filter: blur(10px);
}

.sa-tabs {
    display: flex;
    gap: var(--sa-space-2);
    max-width: 1320px;
    margin-inline: auto;
    padding: var(--sa-space-2) var(--sa-space-6);
    overflow-x: auto;
}

.sa-tab {
    flex: 0 0 auto;
    padding: 0 var(--sa-space-4);
    border: 1px solid transparent;
    background: transparent;
    color: #4e6176;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
}

.sa-tab:hover {
    background: #e2ebf2;
    color: var(--sa-navy);
}

.sa-tab.is-active {
    background: var(--sa-navy);
    color: #ffffff;
}

.sa-main {
    max-width: 1320px;
    margin-inline: auto;
    padding: var(--sa-space-6) var(--sa-space-6) 3rem;
}

.sa-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sa-space-4);
    margin-block-end: var(--sa-space-5);
}

.sa-workspace {
    display: block;
}

.sa-titlebar h2 {
    margin: 0;
    color: var(--sa-navy);
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.18;
}

.sa-titlebar p {
    max-width: 700px;
    margin: var(--sa-space-1) 0 0;
    color: var(--sa-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.sa-filters {
    display: grid;
    justify-items: end;
    gap: var(--sa-space-2);
}

.sa-filter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sa-space-2);
}

.sa-filter-label {
    align-self: center;
    color: var(--sa-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sa-chip {
    padding: 0 var(--sa-space-3);
    border: 1px solid #cbd8e5;
    background: #ffffff;
    color: #4e6176;
    font-size: 0.82rem;
    font-weight: 800;
}

.sa-chip:hover {
    border-color: var(--sa-blue);
    color: var(--sa-navy);
}

.sa-chip.is-active {
    border-color: var(--sa-teal);
    background: var(--sa-teal);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(17, 131, 111, 0.25);
}

.sa-refresh:focus-visible,
.sa-tab:focus-visible,
.sa-chip:focus-visible,
.sa-data-table summary:focus-visible {
    outline: 3px solid var(--sa-focus);
    outline-offset: 2px;
}

.sa-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--sa-space-4);
    margin-block-end: var(--sa-space-6);
}

.sa-stat {
    min-block-size: 8.4rem;
    padding: var(--sa-space-4);
    border: 1px solid var(--sa-line);
    border-top: 4px solid var(--sa-accent, var(--sa-blue));
    border-radius: var(--sa-radius);
    background: var(--sa-panel);
}

.sa-stat-label,
.sa-stat-sub {
    display: block;
    color: var(--sa-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.sa-stat-label {
    min-block-size: 2.1rem;
    font-weight: 800;
}

.sa-stat-value {
    display: block;
    margin-block-start: var(--sa-space-2);
    color: var(--sa-navy);
    font-family: "Spline Sans Mono", Consolas, monospace;
    font-size: 1.82rem;
    font-weight: 700;
    line-height: 1.1;
}

.sa-stat-sub {
    margin-block-start: var(--sa-space-2);
}

.sa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sa-space-5);
}

.sa-card,
.sa-insights {
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    background: var(--sa-panel);
    box-shadow: 0 1px 2px rgba(36, 79, 143, 0.04);
}

.sa-card {
    padding: var(--sa-space-4) var(--sa-space-4) var(--sa-space-3);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.sa-card:hover {
    border-color: #c4d3e3;
    box-shadow: var(--sa-shadow);
    transform: translateY(-1px);
}

.sa-card.is-wide {
    grid-column: 1 / -1;
}

.sa-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sa-space-3);
    min-block-size: 4.35rem;
}

.sa-card h3 {
    margin: 0;
    color: var(--sa-ink);
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.28;
}

.sa-card p {
    max-width: 760px;
    margin: var(--sa-space-1) 0 0;
    color: var(--sa-muted);
    font-size: 0.78rem;
    line-height: 1.42;
}

.sa-card-head span {
    flex: 0 0 auto;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: #eaf3f5;
    color: var(--sa-navy);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Responsive height: fills to the tier max on desktop, shrinks with viewport on
   narrow screens (clamp) so charts keep a sensible aspect instead of staying
   over-tall and squished on mobile. min-block-size keeps a readable floor. */
.sa-chart {
    inline-size: 100%;
    block-size: clamp(15rem, 44vw, 19rem);
    min-block-size: 15rem;
}

.sa-chart.is-medium {
    block-size: clamp(16rem, 50vw, 21.5rem);
}

.sa-chart.is-tall {
    block-size: clamp(17rem, 56vw, 24.5rem);
}

.sa-chart.is-xl {
    block-size: clamp(18rem, 64vw, 28rem);
}

.sa-data-table {
    margin-block-start: var(--sa-space-2);
    border-top: 1px solid #edf2f7;
    color: var(--sa-muted);
    font-size: 0.78rem;
}

.sa-data-table summary {
    width: max-content;
    min-block-size: 2rem;
    padding: var(--sa-space-2) 0;
    color: var(--sa-navy);
    cursor: pointer;
    font-weight: 800;
}

.sa-table-wrap {
    max-block-size: 14rem;
    overflow: auto;
}

.sa-data-table table {
    width: 100%;
    border-collapse: collapse;
}

.sa-data-table th,
.sa-data-table td {
    padding: 0.42rem 0.5rem;
    border-block-start: 1px solid #edf2f7;
    text-align: end;
    white-space: nowrap;
}

.sa-data-table th:first-child,
.sa-data-table td:first-child {
    text-align: start;
}

.sa-insights {
    position: sticky;
    inset-block-start: 4.25rem;
    padding: var(--sa-space-4);
}

.sa-insights h3 {
    margin: 0 0 var(--sa-space-3);
    color: var(--sa-navy);
    font-size: 0.92rem;
    font-weight: 800;
}

.sa-insight {
    padding: var(--sa-space-3) 0;
    border-block-start: 1px solid #edf2f7;
}

.sa-insight span,
.sa-insight small {
    display: block;
    color: var(--sa-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.sa-insight strong {
    display: block;
    margin-block: var(--sa-space-1);
    color: var(--sa-accent, var(--sa-navy));
    font-family: "Spline Sans Mono", Consolas, monospace;
    font-size: 1.15rem;
    line-height: 1.1;
}

.sa-empty {
    grid-column: 1 / -1;
    padding: 3rem;
    color: var(--sa-muted);
    text-align: center;
}

.sa-footer {
    margin-block-start: 2.2rem;
    padding-block-start: var(--sa-space-4);
    border-top: 1px solid var(--sa-line);
    color: var(--sa-muted);
    font-size: 0.78rem;
    line-height: 1.6;
}

@media (max-width: 1120px) {

    .sa-titlebar,
    .sa-workspace {
        grid-template-columns: 1fr;
    }

    .sa-filters {
        justify-items: start;
    }

    .sa-filter-row {
        justify-content: flex-start;
    }

    .sa-insights {
        position: static;
    }
}

@media (max-width: 880px) {
    .sa-hero {
        flex-direction: column;
        padding: var(--sa-space-6) var(--sa-space-4);
    }

    .sa-status-row {
        justify-content: space-between;
        min-width: 0;
        inline-size: 100%;
    }

    .sa-root .dashboard-refresh-status {
        text-align: start;
    }

    .sa-tabs,
    .sa-main {
        padding-inline: var(--sa-space-4);
    }

    .sa-grid {
        grid-template-columns: 1fr;
    }

    .sa-card.is-wide {
        grid-column: auto;
    }

    .sa-hero h1 {
        font-size: 1.72rem;
    }
}

@media (max-width: 560px) {
    .sa-chip {
        flex: 1 1 8.4rem;
    }
    /* .sa-chart heights now shrink via clamp() above, so no per-tier override
       is needed here (the old fixed .is-xl: 25rem conflicted with the clamp). */
}

@media (prefers-reduced-motion: reduce) {

    .sa-refresh,
    .sa-tab,
    .sa-chip,
    .sa-card {
        transition: none;
    }
}