/* =========================================================
   SafetyReporter Dark Theme — tokens + base components
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
    /* Palette */
    --sr-canvas: #0f1115;
    --sr-card: #181c20;
    --sr-surface-2: #1f242a;
    --sr-border: #2a3036;
    --sr-text: #e6e8ea;
    --sr-muted: #a9b0b7;
    --sr-accent: #60a5fa; /* links / primary actions */
    --sr-good: #22c55e; /* improvements (fewer fatalities) */
    --sr-bad: #ef4444; /* worse */

    --sr-chip-bg: #22272e;
    --sr-focus: #3b82f6;
    /* Shape / rhythm */
    --sr-radius-card: 12px;
    --sr-radius-ctl: 8px;
    --sr-gap-1: 4px;
    --sr-gap-2: 8px;
    --sr-gap-3: 12px;
    --sr-gap-4: 16px;
    --sr-gap-5: 24px;
    --sr-gap-6: 32px;
    /* Type scale */
    --sr-h1: 24px;
    --sr-h2: 18px;
    --sr-h3: 16px;
    --sr-body: 14px;
    --sr-meta: 12px;
}

/* ---------- GLOBAL ---------- */
html, body {
    height: 100%;
}

body {
    background: var(--sr-canvas);
    color: var(--sr-text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: var(--sr-body);
    line-height: 1.5;
    margin-bottom: 0 !important; /* undo Razor footer margin */
}

a {
    color: var(--sr-accent);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

h1 {
    font-size: var(--sr-h1);
    font-weight: 600;
    margin: var(--sr-gap-4) 0 var(--sr-gap-2);
}

h2 {
    font-size: var(--sr-h2);
    font-weight: 600;
    margin: var(--sr-gap-3) 0 var(--sr-gap-2);
}

h3 {
    font-size: var(--sr-h3);
    font-weight: 600;
    margin: var(--sr-gap-2) 0;
}

/* ---------- CARDS / LAYOUT ---------- */
.card {
    background: var(--sr-card);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-card);
    padding: var(--sr-gap-4);
    margin: var(--sr-gap-4) 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sr-gap-3);
    align-items: end;
}

/* ---------- CONTROLS ---------- */
.input, input[type="text"], select, textarea {
    appearance: none;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-ctl);
    background: var(--sr-surface-2);
    color: var(--sr-text);
}

    .input::placeholder {
        color: var(--sr-muted);
    }

    input:focus, select:focus, textarea:focus, .input:focus {
        outline: 2px solid var(--sr-focus);
        outline-offset: 1px;
    }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--sr-radius-ctl);
    border: 1px solid rgba(96,165,250,.35);
    background: rgba(96,165,250,.15);
    color: var(--sr-text);
    cursor: pointer;
}

    .btn:hover {
        background: rgba(96,165,250,.25);
    }

    .btn:focus {
        outline: 2px solid var(--sr-focus);
        outline-offset: 2px;
    }

.fieldset {
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-ctl);
    padding: var(--sr-gap-3);
}

    .fieldset legend {
        padding: 0 var(--sr-gap-2);
        color: var(--sr-muted);
        font-size: var(--sr-meta);
    }

/* ---------- CHIPS ---------- */
.chips {
    margin-top: var(--sr-gap-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sr-gap-2);
}

.chip {
    background: var(--sr-chip-bg);
    color: var(--sr-text);
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .9rem;
    border: 1px solid var(--sr-border);
}

.chip--muted {
    color: var(--sr-muted);
}

/* ---------- TABLES ---------- */
table.gridtable {
    width: 100%;
    border-collapse: collapse;
    background: var(--sr-card);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-card);
    overflow: hidden;
}

    table.gridtable thead th {
        position: sticky;
        top: 0;
        background: var(--sr-surface-2);
        border-bottom: 1px solid var(--sr-border);
        padding: 10px;
        text-align: left;
        font-weight: 600;
        z-index: 2;
    }

    table.gridtable td {
        border-top: 1px solid var(--sr-border);
        padding: 8px 10px;
    }

    table.gridtable tbody tr:hover {
        background: var(--sr-surface-2);
    }

    table.gridtable td.num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

/* ---------- STATE / MESSAGES ---------- */
.error {
    margin-top: var(--sr-gap-2);
    color: var(--sr-bad);
}

.muted {
    color: var(--sr-muted);
}

/* ---------- UTILITIES ---------- */
.title {
    margin: 16px 0 8px;
}

.tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sr-gap-4);
}

.tablewrap h3 {
    margin: 8px 0;
}

/* ---- 3-column layout ---- */
.layout {
    display: grid;
    grid-template-columns: 260px 1fr 0px;
    gap: var(--sr-gap-4);
}

.left-rail {
    position: sticky;
    top: 16px;
    height: fit-content;
}

.main {
    min-width: 0;
    padding-bottom: var(--sr-gap-6);
}

@media (max-width: 1024px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .left-rail {
        order: 2;
        position: static;
    }

    .main {
        order: 1;
    }
}

/* ---- status bar ---- */
.statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sr-card);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-card);
    padding: var(--sr-gap-4);
    margin: var(--sr-gap-4) 0;
}

    .statusbar .meta {
        color: var(--sr-muted);
        font-size: var(--sr-meta);
    }

/* ---- tabs ---- */
.tabs {
    margin-top: var(--sr-gap-2);
}

.tablist {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--sr-border);
    padding-bottom: 6px;
}

.tab {
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--sr-surface-2);
    color: var(--sr-text);
    border: 1px solid var(--sr-border);
    cursor: pointer;
}

    .tab[aria-selected="true"], .tab.tab--active {
        background: rgba(96,165,250,.15);
        border-color: rgba(96,165,250,.35);
    }

.tabpanel {
    padding-top: var(--sr-gap-4);
}

/* ---- Spinner ---- */
@keyframes sr-spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.25);
    border-top-color: rgba(255,255,255,.9);
    border-radius: 50%;
    animation: sr-spin .8s linear infinite;
    display: inline-block;
}

/* ---- Skeletons ---- */
@keyframes sr-shimmer {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

.skeleton-block {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
    background-size: 200% 100%;
    animation: sr-shimmer 1.2s ease-in-out infinite;
}

.skeleton-table {
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-card);
    padding: var(--sr-gap-3);
    background: var(--sr-card);
}

.skeleton-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--sr-gap-3);
    align-items: center;
    padding: 8px 0;
}

.skeleton-hdr {
    margin-bottom: var(--sr-gap-2);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--sr-gap-3);
}

.skeleton-wrap[aria-hidden="true"] {
    display: none;
}

.is-busy #sr-status {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.is-busy #sr-skeleton {
    display: block;
}

/* ---- Footer (non-overlay) ---- */
.footer {
    position: static !important;
    line-height: normal;
    padding: 12px 0;
    border-top: 1px solid var(--sr-border);
    background: var(--sr-canvas);
    color: var(--sr-muted);
}

/* =========================================================
   Toolbar: Target window (left) + Comparison baseline (right)
   Divider is a left border on the comparison group so it can’t be covered.
   ========================================================= */

.toolbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px, 520px); /* Target | Comparison */
    column-gap: 24px; /* left gutter before divider */
    row-gap: 12px;
    align-items: end;
}

    /* Groups */
    .toolbar .group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: end;
        min-width: 0;
    }

.group-title {
    width: 100%;
    color: var(--sr-muted);
    font-size: var(--sr-meta);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* Reliable vertical divider */
.toolbar > .group:last-of-type,
.toolbar .group--comparison { /* supports optional extra class */
    border-left: 1px solid var(--sr-border);
    padding-left: 24px;
}

/* Hide any legacy inline divider element if present */
.toolbar .divider {
    display: none !important;
}

/* Date sub-controls */
[data-sr-date] > .lbl {
    display: block;
    margin-bottom: 4px;
}

[data-sr-date] > div {
    display: flex;
    gap: 8px;
}

/* Compact control widths to keep single-row layout on desktop */
.input.select-sm {
    width: 88px;
}
/* Target Year */
.input.month-sm {
    width: 78px;
}
/* Month */
.input.day-sm {
    width: 60px;
}
/* Day */

.sr-msel.msel-compact {
    width: 220px;
}

.sr-msel__button {
    width: 100%;
}

/* Actions row (if needed to span full width) */
.actions {
    grid-column: 1 / -1;
    margin-top: 4px;
}

/* Responsive: stack cleanly */
@media (max-width:1100px) {
    .toolbar {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

        .toolbar > .group:last-of-type,
        .toolbar .group--comparison {
            border-left: 0;
            padding-left: 0;
        }
}

/* --- Stronger, guaranteed-visible divider between groups --- */
:root {
    --sr-divider: rgba(255,255,255,.18); /* a bit brighter than --sr-border */
}
/* Put a left border on the comparison group, with equal gutter */
.toolbar > .group:last-of-type {
    position: relative;
    border-left: 2px solid var(--sr-divider) !important;
    padding-left: 24px !important;
}

/* If you gave it an extra class, this keeps it working too */
.toolbar .group--comparison {
    position: relative;
    border-left: 2px solid var(--sr-divider) !important;
    padding-left: 24px !important;
}

/* --- Force the compact multi-select button to use dark styling --- */
.sr-msel__button {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: var(--sr-surface-2) !important;
    color: var(--sr-text) !important;
    border: 1px solid var(--sr-border) !important;
    border-radius: var(--sr-radius-ctl) !important;
    height: 36px;
    line-height: normal;
}

/* In case a native <select> is used temporarily, keep it dark too */
.toolbar select {
    -webkit-appearance: none;
    appearance: none;
    background: var(--sr-surface-2) !important;
    color: var(--sr-text) !important;
    border: 1px solid var(--sr-border) !important;
    border-radius: var(--sr-radius-ctl);
}

/* Tweak (optional): make the divider a touch bolder on low-contrast monitors */
/* .toolbar > .group:last-of-type, .toolbar .group--comparison { border-left-color: rgba(255,255,255,.26) !important; } */

/* === Namespaced toolbar layout (sr-toolbar) === */
.sr-toolbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) 24px minmax(320px,520px); /* target | divider | comparison */
    align-items: end;
    column-gap: 0;
    row-gap: 12px;
}

.sr-toolbar__group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    min-width: 0;
}

.sr-toolbar__divider {
    background: var(--sr-border);
    width: 1px;
    height: 56px;
    border-radius: 1px;
    opacity: .85;
}

.sr-toolbar__comparison {
    border-left: 0;
    padding-left: 0;
}
/* divider is its own column */
.group-title {
    width: 100%;
    color: var(--sr-muted);
    font-size: var(--sr-meta);
    margin-bottom: 2px;
    white-space: nowrap;
}

.input.select-sm {
    width: 88px;
}

.input.month-sm {
    width: 78px;
}

.input.day-sm {
    width: 60px;
}

.sr-msel.msel-compact {
    width: 220px;
}

.sr-msel__button {
    width: 100%;
}

@media (max-width:1100px) {
    .sr-toolbar {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .sr-toolbar__divider {
        display: none;
    }
}

/* === One-line toolbar with fixed divider (sr-toolbar) === */

/* 3 columns: [Target group] | [1px divider] | [Comparison group] */
.sr-toolbar {
    display: grid;
    grid-template-columns: minmax(560px,1fr) 1px minmax(300px,460px);
    column-gap: 24px; /* space around the divider */
    row-gap: 8px;
    align-items: end;
}

.sr-toolbar__group {
    min-width: 0;
}

/* Target group: force Year | Start M | Start D | End M | End D to stay in one row */
.sr-toolbar__target {
    display: grid;
    grid-template-columns: auto auto auto auto auto; /* 5 compact cells */
    column-gap: 12px;
    row-gap: 6px;
    align-items: end;
}

    .sr-toolbar__target .group-title {
        grid-column: 1 / -1;
    }

/* Divider column */
.sr-toolbar__divider {
    width: 1px;
    height: 56px;
    background: var(--sr-border);
    border-radius: 1px;
    opacity: .85;
    align-self: end;
}

/* Comparison group */
.sr-toolbar__comparison {
    display: grid;
    grid-auto-flow: row;
    row-gap: 6px;
    align-items: end;
}

/* Keep titles on one line */
.group-title {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* Compact control widths so everything fits on one row */
.input.select-sm {
    width: 88px;
}
/* Target Year */
.input.month-sm {
    width: 76px;
}
/* Month */
.input.day-sm {
    width: 58px;
}
/* Day */
.sr-msel.msel-compact {
    width: 220px;
}

.sr-msel__button {
    width: 100%;
}

/* Button row spans the full width under the toolbar */
.sr-toolbar .actions {
    grid-column: 1 / -1;
    margin-top: 8px;
}

/* Stack cleanly on narrower screens */
@media (max-width:1100px) {
    .sr-toolbar {
        grid-template-columns: 1fr;
    }

    .sr-toolbar__divider {
        display: none;
    }
}

/* Left-align text in the Comparison Year(s) dropdown button */
.sr-msel .sr-msel__button {
    display: flex; /* ensure we can control alignment */
    align-items: center;
    justify-content: space-between; /* label left, caret right */
    text-align: left; /* override any global center */
}

.sr-msel .sr-msel__label {
    flex: 1 1 auto; /* take the space on the left */
    text-align: left; /* explicit left alignment */
}

/* (Optional) if something still forces centering via !important elsewhere */
.sr-msel .sr-msel__button,
.sr-msel .sr-msel__label {
    text-align: left !important;
}

/* Force center alignment for numeric cells in results tables */
.gridtable tbody td.num {
    text-align: center !important;
}


/* Optional: center numeric column headers too */
.gridtable thead th:not(:first-child) {
    text-align: center;
}

/*hr.subtle {
    border: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    margin: 24px 0;
}*/

/* Make the inline toolbar compact under the header */
.sr-toolbar--inline {
    margin-top: 8px;
    padding: 0;
    background: transparent;
    border: 0;
}

.sr-statusbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .sr-statusbar .status-right form {
        display: inline-flex;
    }

.btn.btn-sm {
    padding: 6px 10px;
    font-size: .9rem;
}