/* ==========================================================================
   simulator-analytics.css - Simulator > Analytics view (admin)
   Everything is scoped under .sa-root. Surfaces/ink come from the admin
   tokens in admin-modern.css (--adm-*), so the view follows the admin's
   light/dark toggle (body.admin-page.dark-mode). Chart colors are the
   validated dataviz palette: series = blue slot 1; heatmap = one-hue blue
   ramp (light->dark in light mode, anchor flipped in dark mode).
   ========================================================================== */

body.admin-page .sa-root {
    --sa-surface: var(--adm-surface, #ffffff);
    --sa-surface-alt: var(--adm-surface-alt, #f6f8f7);
    --sa-ink: var(--adm-text, #1f2937);
    --sa-ink-muted: var(--adm-text-muted, #555f6b);
    --sa-hairline: var(--adm-border, #d9dfdc);
    --sa-axis: var(--adm-border-strong, #b9c2bd);
    --sa-good: var(--adm-success-text, #245c1f);
    --sa-bad: var(--adm-danger, #b3261e);
    --sa-series: #2a78d6;
    --sa-series-wash: rgba(42, 120, 214, 0.10);
    --sa-track: #cde2fb;
    --sa-closed: var(--adm-surface-alt, #f6f8f7);
    /* sequential ramp, low -> high (documented steps 100..700) */
    --sa-q0: #cde2fb; --sa-q1: #b7d3f6; --sa-q2: #9ec5f4; --sa-q3: #86b6ef; --sa-q4: #6da7ec;
    --sa-q5: #5598e7; --sa-q6: #3987e5; --sa-q7: #2a78d6; --sa-q8: #256abf; --sa-q9: #1c5cab;
    --sa-q10: #184f95; --sa-q11: #104281; --sa-q12: #0d366b;

    position: relative;
    color: var(--sa-ink);
    margin-top: var(--adm-space-4, 16px);
}

body.admin-page.dark-mode .sa-root {
    --sa-series: #3987e5;
    --sa-series-wash: rgba(57, 135, 229, 0.14);
    --sa-track: #184f95;
    --sa-closed: var(--adm-surface-alt, #161c25);
    /* dark: low values recede toward the surface, high values are bright */
    --sa-q0: #0d366b; --sa-q1: #104281; --sa-q2: #184f95; --sa-q3: #1c5cab; --sa-q4: #256abf;
    --sa-q5: #2a78d6; --sa-q6: #3987e5; --sa-q7: #5598e7; --sa-q8: #6da7ec; --sa-q9: #86b6ef;
    --sa-q10: #9ec5f4; --sa-q11: #b7d3f6; --sa-q12: #cde2fb;
}

.sa-root *,
.sa-root *::before,
.sa-root *::after {
    box-sizing: border-box;
}

/* ---- filter row ------------------------------------------------------- */
.sa-root .sa-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 8px;
}
.sa-root .sa-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sa-root .sa-presets .date-preset-btn {
    padding: 6px 12px;
    min-height: 32px;
}
.sa-root .sa-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}
.sa-root .sa-custom[hidden] {
    display: none;
}
.sa-root .sa-custom label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sa-ink-muted);
    margin: 0;
}
.sa-root .sa-custom input[type="date"] {
    padding: 5px 8px;
    min-height: 32px;
    border: 1px solid var(--sa-hairline);
    border-radius: var(--adm-radius-sm, 6px);
    background: var(--sa-surface);
    color: var(--sa-ink);
    font: inherit;
    font-size: 13px;
    width: auto;
}
.sa-root .sa-toolbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sa-root .sa-range-label {
    font-size: 13px;
    color: var(--sa-ink-muted);
}
.sa-root .sa-export {
    white-space: nowrap;
}
.sa-root .sa-status {
    min-height: 20px;
    font-size: 13px;
    color: var(--sa-ink-muted);
    margin-bottom: 8px;
}
.sa-root .sa-status.is-error {
    color: var(--sa-bad);
}
.sa-root .sa-status button {
    margin-left: 8px;
}

.sa-root .sa-body {
    transition: opacity 0.15s ease;
}
.sa-root .sa-body.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ---- KPI tiles ---------------------------------------------------------- */
.sa-root .sa-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.sa-root .sa-tile {
    background: var(--sa-surface);
    border: 1px solid var(--sa-hairline);
    border-radius: var(--adm-radius, 10px);
    padding: 12px 14px;
    min-width: 0;
}
.sa-root .sa-tile-label {
    font-size: 12px;
    color: var(--sa-ink-muted);
    margin: 0 0 4px;
    line-height: 1.3;
}
.sa-root .sa-tile-value {
    font-size: 24px;
    font-weight: 650;
    line-height: 1.2;
    color: var(--sa-ink);
    overflow-wrap: anywhere;
}
.sa-root .sa-tile-delta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--sa-ink-muted);
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}
.sa-root .sa-tile-delta .sa-delta {
    font-weight: 600;
    white-space: nowrap;
}
.sa-root .sa-delta.is-good { color: var(--sa-good); }
.sa-root .sa-delta.is-bad { color: var(--sa-bad); }
.sa-root .sa-delta.is-flat { color: var(--sa-ink-muted); }

/* ---- cards -------------------------------------------------------------- */
.sa-root .sa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 16px;
}
.sa-root .sa-card {
    background: var(--sa-surface);
    border: 1px solid var(--sa-hairline);
    border-radius: var(--adm-radius-lg, 14px);
    padding: 16px;
    min-width: 0;
}
.sa-root .sa-card-wide {
    grid-column: 1 / -1;
}
.sa-root .sa-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.sa-root .sa-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sa-ink);
    text-transform: none;
    letter-spacing: 0;
}
.sa-root .sa-card-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--sa-ink-muted);
}
.sa-root .sa-view-toggle {
    flex-shrink: 0;
    border: 1px solid var(--sa-hairline);
    background: transparent;
    color: var(--sa-ink-muted);
    border-radius: var(--adm-radius-sm, 6px);
    padding: 4px 10px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    min-height: 28px;
}
.sa-root .sa-view-toggle:hover {
    background: var(--sa-surface-alt);
    color: var(--sa-ink);
}
.sa-root .sa-view-toggle[aria-pressed="true"] {
    color: var(--sa-ink);
    border-color: var(--sa-axis);
}
.sa-root .sa-empty {
    padding: 24px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--sa-ink-muted);
}

/* ---- charts ------------------------------------------------------------- */
.sa-root .sa-chart {
    position: relative;
    width: 100%;
}
.sa-root .sa-chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.sa-root .sa-chart svg:focus-visible {
    outline: 2px solid var(--adm-accent, #3a6e35);
    outline-offset: 2px;
}
.sa-root .sa-axis-text {
    font-size: 11px;
    fill: var(--sa-ink-muted);
    font-variant-numeric: tabular-nums;
}
.sa-root .sa-panel-title {
    font-size: 12px;
    font-weight: 600;
    fill: var(--sa-ink);
}
.sa-root .sa-gridline {
    stroke: var(--sa-hairline);
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.sa-root .sa-baseline {
    stroke: var(--sa-axis);
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.sa-root .sa-line {
    fill: none;
    stroke: var(--sa-series);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.sa-root .sa-area {
    fill: var(--sa-series-wash);
    stroke: none;
}
.sa-root .sa-bar {
    fill: var(--sa-series);
}
.sa-root .sa-bar.is-hover {
    opacity: 0.75;
}
.sa-root .sa-dot {
    fill: var(--sa-series);
    stroke: var(--sa-surface);
    stroke-width: 2;
}
.sa-root .sa-crosshair {
    stroke: var(--sa-axis);
    stroke-width: 1;
    shape-rendering: crispEdges;
    pointer-events: none;
}
.sa-root .sa-value-label {
    font-size: 12px;
    fill: var(--sa-ink);
    font-variant-numeric: tabular-nums;
}
.sa-root .sa-value-label-muted {
    font-size: 11px;
    fill: var(--sa-ink-muted);
}

/* heatmap cells */
.sa-root .sa-cell { stroke: none; }
.sa-root .sa-cell.is-closed { fill: var(--sa-closed); }
.sa-root .sa-cell.is-hover { stroke: var(--sa-ink); stroke-width: 1.5; }
.sa-root .sa-q0 { fill: var(--sa-q0); }   .sa-root .sa-q1 { fill: var(--sa-q1); }   .sa-root .sa-q2 { fill: var(--sa-q2); }
.sa-root .sa-q3 { fill: var(--sa-q3); }   .sa-root .sa-q4 { fill: var(--sa-q4); }   .sa-root .sa-q5 { fill: var(--sa-q5); }
.sa-root .sa-q6 { fill: var(--sa-q6); }   .sa-root .sa-q7 { fill: var(--sa-q7); }   .sa-root .sa-q8 { fill: var(--sa-q8); }
.sa-root .sa-q9 { fill: var(--sa-q9); }   .sa-root .sa-q10 { fill: var(--sa-q10); } .sa-root .sa-q11 { fill: var(--sa-q11); }
.sa-root .sa-q12 { fill: var(--sa-q12); }

.sa-root .sa-scale {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--sa-ink-muted);
}
.sa-root .sa-scale-ramp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.sa-root .sa-scale-bar {
    display: inline-block;
    width: 140px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--sa-q0), var(--sa-q3), var(--sa-q6), var(--sa-q9), var(--sa-q12));
}
.sa-root .sa-scale-closed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sa-root .sa-scale-closed::before {
    content: "";
    width: 12px;
    height: 10px;
    border-radius: 2px;
    background: var(--sa-closed);
    box-shadow: inset 0 0 0 1px var(--sa-hairline);
}

/* ---- tooltip ------------------------------------------------------------ */
.sa-root .sa-tooltip {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    min-width: 140px;
    max-width: 240px;
    padding: 8px 10px;
    background: var(--adm-surface-raised, #ffffff);
    color: var(--sa-ink);
    border: 1px solid var(--sa-hairline);
    border-radius: var(--adm-radius-sm, 6px);
    box-shadow: var(--adm-shadow, 0 2px 8px rgba(16, 24, 40, 0.08));
    font-size: 12px;
    line-height: 1.4;
}
.sa-root .sa-tooltip[hidden] {
    display: none;
}
.sa-root .sa-tt-title {
    color: var(--sa-ink-muted);
    margin-bottom: 4px;
}
.sa-root .sa-tt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.sa-root .sa-tt-key {
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: var(--sa-series);
    flex-shrink: 0;
}
.sa-root .sa-tt-value {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.sa-root .sa-tt-label {
    color: var(--sa-ink-muted);
}

/* ---- tables ------------------------------------------------------------- */
.sa-root .sa-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sa-root table.sa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: transparent;
    color: var(--sa-ink);
    margin: 0;
    box-shadow: none;
}
.sa-root .sa-table th,
.sa-root .sa-table td {
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--sa-hairline);
    text-align: left;
    background: transparent;
    color: inherit;
    white-space: nowrap;
}
.sa-root .sa-table th {
    font-size: 12px;
    font-weight: 600;
    color: var(--sa-ink-muted);
    text-transform: none;
    letter-spacing: 0;
}
.sa-root .sa-table tbody tr:last-child td {
    border-bottom: 0;
}
.sa-root .sa-table tbody tr:hover td {
    background: var(--sa-surface-alt);
}
.sa-root .sa-table .sa-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sa-root .sa-table .sa-muted {
    color: var(--sa-ink-muted);
}
.sa-root .sa-table td.sa-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 140px;
}
.sa-root .sa-table caption {
    caption-side: top;
    text-align: left;
    font-size: 12px;
    color: var(--sa-ink-muted);
    padding: 0 0 6px;
}
.sa-root .sa-heat-table td.is-closed {
    color: var(--sa-ink-muted);
}

/* utilization meter in the by-bay table */
.sa-root .sa-meter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}
.sa-root .sa-meter-track {
    position: relative;
    flex: 1 1 80px;
    height: 8px;
    border-radius: 4px;
    background: var(--sa-track);
    overflow: hidden;
}
.sa-root .sa-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: var(--sa-series);
}
.sa-root .sa-meter-text {
    min-width: 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .sa-root .sa-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .sa-root .sa-tile {
        padding: 10px;
    }
    .sa-root .sa-toolbar-end {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
    .sa-root .sa-tile-value {
        font-size: 20px;
    }
    .sa-root .sa-card {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sa-root .sa-body {
        transition: none;
    }
}

@media (forced-colors: active) {
    .sa-root .sa-cell,
    .sa-root .sa-bar,
    .sa-root .sa-meter-fill {
        forced-color-adjust: none;
    }
}