/* =====================================================================
   Data Dashboard  (served as data.html)
   Config-driven labor-market data dashboard. Reuses the site palette and
   patterns from styles.css; only dashboard-specific structure lives here.
   Palette: navy #2c5aa0, dark #1a2332, teal #00837E, red #B63B36,
   grays #333/#666/#888, lines #e0e0e0, tint #f8f9fa.
   ===================================================================== */

/* ---- Hero tagline (replaces the section-links row on this page) ---- */
.dashboard-hero-tagline {
    color: #ffffff;
    opacity: 0.85;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
}

@media (max-width: 768px) {
    .dashboard-hero-tagline { font-size: 0.9rem; }
}

/* ---- Sticky topic tabs ------------------------------------------------ */
.dashboard-tabs {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 56px; /* overwritten at runtime to header height */
    z-index: 900;
}

.dashboard-tabs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.35rem 0;
}

.dashboard-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.6rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
}

.dashboard-tab:hover {
    color: #2c5aa0;
    background-color: #f4f7fb;
}

.dashboard-tab[aria-selected="true"] {
    color: #2c5aa0;
    border-bottom-color: #2c5aa0;
    font-weight: 600;
}

.dashboard-tab:focus-visible {
    outline: 2px solid #2c5aa0;
    outline-offset: 2px;
}

/* Horizontal scroll for the tab row on small screens */
@media (max-width: 768px) {
    .dashboard-tabs .container {
        position: relative;
        /* right-edge fade hints that more tabs lie off-screen */
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }
    .dashboard-tabs-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .dashboard-tab { font-size: 0.9rem; padding: 0.55rem 0.7rem; }
    .tab-soon-badge { display: none; } /* save horizontal space on mobile */
}

/* ---- Panels ----------------------------------------------------------- */
.dashboard-main { padding: 2rem 0 3rem; }

.dashboard-panel { animation: fadeIn 0.3s ease-in-out; }
.dashboard-panel[hidden] { display: none; }

.dashboard-panel-heading {
    font-size: 1.9rem;
    color: #1a2332;
    margin-bottom: 0.25rem;
    text-align: left;
}

.dashboard-panel-subtitle {
    color: #666;
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
    font-style: italic;
}

/* ---- KPI readout (quiet inline stat-line, not boxed cards) ------------ */
.kpi-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 2.25rem;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.kpi-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.kpi-value {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a2332;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* Color survives as a subtle tint on the value only (no accent bar / box). */
.kpi-teal   .kpi-value { color: #00837E; }
.kpi-red    .kpi-value { color: #B63B36; }
.kpi-gray   .kpi-value { color: #555555; }
.kpi-salmon .kpi-value { color: #C0554A; } /* counterfactual; slightly darker than the line for text contrast */

.kpi-label {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.3;
}

.kpi-note {
    font-size: 0.8rem;
    color: #888;
    font-weight: 400;
}

@media (max-width: 600px) {
    .kpi-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    /* Reclaim horizontal space for the chart on phones: trim card + heading. */
    .dashboard-chart-card { padding: 1rem 0.9rem 1.1rem; }
    .dashboard-panel-heading { font-size: 1.4rem; }
    .dashboard-panel-subtitle { font-size: 0.95rem; }
    .dashboard-chart-head h3 { font-size: 1.1rem; }
    /* The chart is the page's most important element. With maintainAspectRatio:false
       (set on mobile in data-dashboard.js), Chart.js fills this container, so give it
       a tall fixed height — most of the viewport, minus room for the legend rows. */
    .chart-canvas-wrap {
        height: 68vh;
        min-height: 420px;
        max-height: 620px;
    }
    /* Controls: stack the groups and let each pill row scroll horizontally rather
       than clip (the 5 base-year pills overflow a 390px width). Tighter pills fit
       more per row. Keeps every control reachable without pushing the chart far
       down the page. */
    .chart-controls { flex-direction: column; align-items: stretch; gap: 0.5rem 0; }
    .chart-control-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .chart-control-group > .dash-toggle { flex: 0 0 auto; }
    .dash-toggle { padding: 0.3rem 0.6rem; }
    /* View switcher: keep it compact so the chart stays near the top of the fold. */
    .chart-view-switch { gap: 0.35rem; }
    .chart-view-switch .dash-toggle { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
}

/* ---- Prose + technical details (mirrors styles.css .data-* patterns) -- */
.dashboard-prose {
    font-size: 1.05rem;
    line-height: 1.45;
    color: #444;
    max-width: 820px;
}
.dashboard-prose p { margin-bottom: 0.75rem; }

.dashboard-prose em { font-style: italic; }

.dashboard-reference {
    font-size: 0.75rem;
    color: #555;
    margin-top: 0.5rem;
}
.dashboard-reference a { color: #2c5aa0; text-decoration: none; }
.dashboard-reference a:hover { text-decoration: underline; }

/* ---- "About this measure" box (prose, below the chart, open by default) */
.dashboard-about {
    margin: 1.5rem 0 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}
.dashboard-about-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.dashboard-about-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
}
.dashboard-about-toggle {
    appearance: none;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2c5aa0;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
}
.dashboard-about-toggle:hover { text-decoration: underline; }
.dashboard-about-toggle:focus-visible { outline: 2px solid #2c5aa0; outline-offset: 2px; border-radius: 3px; }
.dashboard-about-body { margin-top: 0.6rem; }
.dashboard-about-body[hidden] { display: none; }

/* ---- "Chart options" advanced-controls disclosure (below the chart) -----
   Two-tier progressive disclosure: the everyday rail sits above the chart; the
   power-user controls are gated here, collapsed by default, opened on one click. */
.dash-advanced { margin: 0.6rem 0 0.25rem; }
/* Bordered pill styled like the other .dash-toggle buttons, so the disclosure
   reads unmistakably as a tappable control (it is the only entry point to the
   controls on most Demographic Composition views). */
.dash-advanced-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c5aa0;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dash-advanced-toggle:hover { background-color: #e6ecf5; border-color: #2c5aa0; }
.dash-advanced-toggle[aria-expanded="true"] {
    background-color: #e6ecf5;
    border-color: #2c5aa0;
}
.dash-advanced-toggle:focus-visible { outline: 2px solid #2c5aa0; outline-offset: 2px; }
.dash-advanced-gear { font-size: 0.95rem; line-height: 1; }
.dash-advanced-caret {
    display: inline-block;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.dash-advanced-toggle[aria-expanded="true"] .dash-advanced-caret { transform: rotate(180deg); }
.dash-advanced-body { margin-top: 0.4rem; }
.dash-advanced-body[hidden] { display: none; }
/* The button-group rail inside the disclosure left-aligns its groups (no
   space-between spread) and drops the top border the toggle already supplies. */
.dash-advanced-rail {
    justify-content: flex-start;
    border-top: none;
    margin-top: 0;
}
/* A range slider gated into the disclosure gets a small label above it. */
.dash-advanced-slider { margin-top: 0.6rem; }
.dash-advanced-slider .chart-control-label { display: block; margin-bottom: 0.3rem; }

/* ---- Chart-view switch (multi-chart categories: one chart at a time) --- */
.chart-view-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem;
}
.dash-chart-view { /* inherits .dash-toggle look via shared class in markup */ }

/* Signpost that the persistent breakdown / base-year toggles apply across views. */
.chart-view-hint {
    font-size: 0.8rem;
    color: #777;
    margin: -0.4rem 0 0.75rem;
    font-style: italic;
}

/* ---- Chart card ------------------------------------------------------- */
.dashboard-chart-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.25rem 1.5rem 1.5rem;
    margin: 1.5rem 0;
}

.dashboard-chart-head {
    margin-bottom: 0.5rem;
}
.dashboard-chart-head h3 {
    font-size: 1.3rem;
    color: #1a2332;
    margin-bottom: 0.1rem;
    text-align: left;
}
.dashboard-chart-subtitle {
    color: #666;
    font-size: 0.95rem;
}

/* ---- Control rail (consistent placement across all charts) ------------ */
.chart-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin: 0.75rem 0 0.25rem;
    padding: 0.6rem 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.chart-control-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-control-label {
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
}

/* Country toggle + range presets reuse the .abstract-toggle pill look */
.dash-toggle {
    padding: 0.3rem 0.85rem;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dash-toggle:hover { background-color: #e0e0e0; border-color: #999; }
.dash-toggle[aria-pressed="true"],
.dash-toggle.active {
    background-color: #2c5aa0;
    color: #ffffff;
    border-color: #2c5aa0;
}
.dash-toggle:focus-visible {
    outline: 2px solid #2c5aa0;
    outline-offset: 2px;
}

.chart-canvas-wrap {
    position: relative;
    width: 100%;
    margin: 0.75rem 0 0.5rem;
}

/* ---- Two-panel view (cause/effect side by side) ----------------------- */
.dash-panel-row {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    margin: 0.75rem 0 0.5rem;
}
.dash-panel {
    flex: 1 1 0;
    min-width: 0; /* allow the flex children to shrink instead of overflowing */
}
.dash-panel .chart-canvas-wrap { margin: 0.25rem 0 0; }
.dash-panel-caption {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a2332;
    text-align: center;
    margin: 0 0 0.25rem;
}
@media (max-width: 700px) {
    /* Stack the two panels vertically on narrow screens; each keeps its own labels. */
    .dash-panel-row { flex-direction: column; gap: 1rem; }
}

/* ---- Range slider (dual-thumb) — ported from styles.css .range-* ------ */
.dash-range-wrapper { padding: 0 0.5rem; margin: 0.5rem 0 0.25rem; }
.dash-range-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.dash-range-label {
    font-size: 0.85rem;
    color: #555;
    min-width: 52px;
    font-variant-numeric: tabular-nums;
}
.dash-range-track {
    position: relative;
    flex: 1;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
}
.dash-range-fill {
    position: absolute;
    height: 100%;
    background: #2c5aa0;
    border-radius: 3px;
    pointer-events: none;
}
.dash-range-input {
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 36px; /* ~44px touch target with the 22px thumb; easier to grab */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    margin: 0;
}
.dash-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #2c5aa0;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
    pointer-events: all;
}
.dash-range-input::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #2c5aa0;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
    pointer-events: all;
}
.dash-range-input:focus-visible { outline: none; }
.dash-range-input:focus-visible::-webkit-slider-thumb { outline: 2px solid #1a4070; outline-offset: 2px; }
.dash-range-input:focus-visible::-moz-range-thumb { outline: 2px solid #1a4070; outline-offset: 2px; }

/* ---- Source + download ------------------------------------------------ */
.dashboard-source {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin-top: 0.5rem;
}
.dashboard-download { margin-top: 0.35rem; }
.dashboard-download a { color: #2c5aa0; text-decoration: none; font-weight: 500; }
.dashboard-download a:hover { text-decoration: underline; }

/* ---- Share row (quiet: copy link + download PNG) ---------------------- */
.dash-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #f0f0f0;
}
.dash-share {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0.15rem 0;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    color: #2c5aa0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.dash-share::before {
    font-size: 0.9em;
    line-height: 1;
}
.dash-share-link::before { content: "\1F517"; }   /* 🔗 */
.dash-share-png::before  { content: "\2B07";  }   /* ⬇ */
.dash-share:hover { text-decoration: underline; }
.dash-share:focus-visible { outline: 2px solid #2c5aa0; outline-offset: 2px; border-radius: 3px; }
.dash-share.copied { color: #00837E; }
.dash-share.copied:hover { text-decoration: none; }

/* ---- Technical details (collapsible, reuses abstract-toggle) ---------- */
.dashboard-technical-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}
.dashboard-technical-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
}
.dashboard-detail-box {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #444;
    animation: fadeIn 0.3s ease-in-out;
    max-width: 820px;
}
.dashboard-detail-box p { margin-bottom: 0.75rem; }

/* ---- Pending category (data not yet exported) ------------------------- */
.dashboard-pending {
    background: #f8f9fa;
    border: 1px dashed #cbd3dd;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    color: #666;
    font-size: 0.98rem;
    line-height: 1.5;
}
.dashboard-pending strong { color: #2c5aa0; }

/* "soon" badge on pending category tabs */
.tab-soon-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888;
    background: #eef1f5;
    border-radius: 3px;
    vertical-align: middle;
}
.dashboard-tab-soon { color: #888; }

/* recession-band caption sits tighter under the chart */
.dashboard-rec-note { margin-top: 0.25rem; font-style: italic; color: #777; }

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dashboard-panel,
    .dashboard-detail-box { animation: none; }
    html { scroll-behavior: auto; }
}