/* ── Slack Scheduling Tab ───────────────────────────────────────── */
.qa-loc-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.qa-loc-btn {
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.qa-loc-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.qa-loc-btn.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

.qa-date-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 14px;
}

.qa-presets {
    display: flex;
    gap: 4px;
}

.qa-preset-btn {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.qa-preset-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.qa-preset-btn.active {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
    font-weight: 700;
}

.qa-date-fields {
    display: flex;
    gap: 10px;
    align-items: center;
}

.qa-date-fields label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
}

.qa-date-fields input[type="date"] {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
}

.qa-header-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.qa-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.qa-btn:hover {
    background: var(--surface-2);
}

.qa-btn-success {
    background: var(--tint-green);
    color: var(--green);
    border-color: var(--green);
}

.qa-btn-success:hover {
    background: var(--green);
    color: var(--text-on-accent);
}

.qa-btn-primary {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: var(--accent);
}

.qa-btn-primary:hover {
    background: var(--accent);
    color: var(--text-on-accent);
}

.qa-btn-danger {
    color: var(--red);
    border-color: var(--red);
}

.qa-btn-danger:hover {
    background: var(--red);
    color: #fff;
}

/* ── Reset & base ──────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #0c0d10;
    --surface: #17181d;
    --surface-2: #1e2028;
    --border: #2d2f3a;
    --text: #f1f2f4;
    --text-muted: #8b8fa8;
    --accent: #f59e0b;
    --accent-dim: #2d1900;
    --green: #22c55e;
    --orange: #f97316;
    --red: #ef4444;
    --grey: #64748b;
    --radius: 8px;
    --header-h: 56px;
    --tab-h: 44px;
    /* Location colors, shared by every tab. */
    --loc-cary: #eab308;
    --loc-boxyard: #dc2626;
    --loc-greenville: #7c3aed;
    --loc-morehead: #0d9488;
    --loc-patterson: #2563eb;
    /* Chip text on each location color; index.js recomputes these from
       the saved colors (dark text on light colors, white otherwise). */
    --loc-cary-text: #111;
    --loc-boxyard-text: #fff;
    --loc-greenville-text: #fff;
    --loc-morehead-text: #fff;
    --loc-patterson-text: #fff;
    /* Dark palette details that the light theme overrides below. */
    --header-bg: #08090c;
    --bg-translucent: rgba(8, 9, 12, 0.96);
    --text-on-accent: #0c0d10;
    --shadow-rgb: 0, 0, 0;
    --img-bg: #000;
    --table-line: #1a1a1a;
    --cyan: #22d3ee;
    --green-strong: #4caf50;
    --red-strong: #ef5350;
    --red-soft: #fca5a5;
    --red-softer: #fecaca;
    --amber-soft: #fcd9a0;
    --tint-green: #0d2e1a;
    --tint-green-2: #071a07;
    --tint-green-3: #0d2e0d;
    --tint-orange: #2c1800;
    --tint-red: #2c0010;
    --tint-red-2: #1a0505;
    --tint-blue: #0c1f30;
    --tint-cyan: #09272c;
    --nav-toggle-bg: #16233a;
    --nav-toggle-bg-active: #1d2f4f;
    --nav-toggle-border: #2f4d7a;
    --nav-toggle-text: #93c5fd;
    --modal-bg: #11161f;
    --modal-border: #303b4f;
    --modal-item-bg: #171f2d;
    --modal-item-border: #39465f;
    --modal-close-bg: #1b2433;
    --modal-close-border: #3d4b63;
    --modal-close-text: #cbd5e1;
    --modal-title: #f8b34a;
    --modal-item-title: #f2f6ff;
    --pp-save-bg: #1a3a1a;
    --pp-save-border: #2a5a2a;
    --pp-save-hover: #1f4a1f;
    /* Semantic hues as bare RGB triplets. Every translucent tint and border
       in the sheets is written rgba(var(--x-rgb), a), so a theme only has to
       restate the hue and each alpha lands on the right side of its backdrop.
       The dark values below are the literals these rules used before. */
    --accent-rgb: 245, 158, 11;
    --ok-rgb: 34, 197, 94;
    --warn-rgb: 249, 115, 22;
    --danger-rgb: 239, 68, 68;
    --info-rgb: 59, 130, 246;
    --grey-rgb: 100, 116, 139;
    /* Row / cell washes built from those hues. */
    --tint-ok: rgba(var(--ok-rgb), 0.08);
    --tint-warn: rgba(var(--warn-rgb), 0.08);
    --tint-danger: rgba(var(--danger-rgb), 0.08);
    --tint-info: rgba(var(--info-rgb), 0.08);
    /* Neutral chip / pill fill, inline code, overlays, table-row hover. */
    --chip-bg: var(--surface-2);
    --code-bg: rgba(255, 255, 255, 0.08);
    --code-bg-sunken: rgba(0, 0, 0, 0.35);
    --scrim: rgba(0, 0, 0, 0.6);
    --scrim-strong: rgba(0, 0, 0, 0.72);
    --scrim-image: rgba(0, 0, 0, 0.85);
    --header-glow: rgba(245, 158, 11, 0.08);
    --row-hover: brightness(1.3);
    --row-hover-soft: brightness(1.25);
    --card-hover-shadow: 0 0 18px rgba(var(--accent-rgb), 0.12);
    --duration-ok-bg: #14302014;
    /* Badge / pill fills. Dark keeps the exact alphas these rules had; light
       swaps in solid pales, because a dark hue at low alpha over a light
       surface only ever reads as mud. */
    --badge-ok: rgba(var(--ok-rgb), 0.18);
    --badge-ok-soft: rgba(var(--ok-rgb), 0.15);
    --badge-ok-pill: rgba(var(--ok-rgb), 0.14);
    --badge-warn: rgba(var(--warn-rgb), 0.18);
    --badge-danger: rgba(var(--danger-rgb), 0.2);
    --badge-danger-soft: rgba(var(--danger-rgb), 0.14);
    --badge-info: rgba(var(--info-rgb), 0.18);
    --badge-info-soft: rgba(var(--info-rgb), 0.12);
    --badge-neutral: rgba(var(--grey-rgb), 0.2);
    --badge-neutral-strong: rgba(var(--grey-rgb), 0.85);
    /* Named one-off colors that used to be hard-coded per selector. */
    --info: #60a5fa;
    --info-strong: #3b82f6;
    --info-text: #93c5fd;
    --info-pill-text: #bfdbfe;
    --ok-text: #bbf7d0;
    --ok-strong: #2e7d32;
    --danger-strong: #c62828;
    --violet: #a855f7;
    --btn-gold-bg: #f3a637;
    --btn-gold-text: #12151a;
    --modal-sub-text: #b7c2d4;
    --modal-item-desc: #a9b5c8;
    --pp-del-bg: #3a1a1a;
    --pp-del-border: #5a2a2a;
    --pp-del-hover: #4a1f1f;
}

/* ── Light theme (Settings > General) ───────────────────────────────────
   Dark values above stay untouched; this block only restates tokens.
   A warm-neutral page under white cards, a burnt-amber accent (a shade under
   amber-700, which misses 4.5:1 on --surface-2), and darker green/orange/red
   so badge text clears WCAG AA on its own wash. */
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #eef0f3;
    --border: #d7dbe2;
    --text: #1f2430;
    --text-muted: #5c6472;
    --accent: #a34d08;
    --accent-dim: #fdf0dc;
    --green: #127437;
    --orange: #b83c0a;
    --red: #b91c1c;
    --grey: #556070;
    --header-bg: #ffffff;
    --bg-translucent: rgba(245, 246, 248, 0.94);
    --text-on-accent: #ffffff;
    --shadow-rgb: 122, 133, 155;
    --img-bg: #ffffff;
    --table-line: #e6e9ee;
    --cyan: #0e7490;
    --green-strong: #127437;
    --red-strong: #b91c1c;
    --red-soft: #b91c1c;
    --red-softer: #991b1b;
    --amber-soft: #92400e;
    --tint-green: #e2f3e9;
    --tint-green-2: #f3fbf6;
    --tint-green-3: #e2f3e9;
    --tint-orange: #fdf0e7;
    --tint-red: #fbeaea;
    --tint-red-2: #f9e0e0;
    --tint-blue: #e5edfc;
    --tint-cyan: #dcf1f6;
    --nav-toggle-bg: #e6eefc;
    --nav-toggle-bg-active: #d5e3fa;
    --nav-toggle-border: #a9c5f2;
    --nav-toggle-text: #1d4ed8;
    --modal-bg: #ffffff;
    --modal-border: #d7dbe2;
    --modal-item-bg: #f5f6f8;
    --modal-item-border: #e1e5eb;
    --modal-close-bg: #eef0f3;
    --modal-close-border: #d7dbe2;
    --modal-close-text: #3f4657;
    --modal-title: #a34d08;
    --modal-item-title: #1f2430;
    --pp-save-bg: #e2f3e9;
    --pp-save-border: #a8dcbd;
    --pp-save-hover: #d3ecdf;
    /* Same hues, darkened: a wash keeps its meaning and its text keeps AA. */
    --accent-rgb: 163, 77, 8;
    --ok-rgb: 18, 116, 55;
    --warn-rgb: 184, 60, 10;
    --danger-rgb: 185, 28, 28;
    --info-rgb: 29, 78, 216;
    --grey-rgb: 71, 82, 97;
    --tint-ok: rgba(var(--ok-rgb), 0.09);
    --tint-warn: rgba(var(--warn-rgb), 0.09);
    --tint-danger: rgba(var(--danger-rgb), 0.08);
    --tint-info: rgba(var(--info-rgb), 0.08);
    --chip-bg: #e7eaf0;
    --code-bg: rgba(31, 36, 48, 0.07);
    --code-bg-sunken: rgba(31, 36, 48, 0.07);
    --scrim: rgba(31, 36, 48, 0.45);
    --scrim-strong: rgba(31, 36, 48, 0.55);
    --scrim-image: rgba(31, 36, 48, 0.8);
    --header-glow: rgba(31, 36, 48, 0.05);
    /* Rows are already near-white, so hover darkens instead of brightening. */
    --row-hover: brightness(0.965);
    --row-hover-soft: brightness(0.97);
    --card-hover-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.28);
    --duration-ok-bg: var(--badge-ok-soft);
    --badge-ok: #e2f3e9;
    --badge-ok-soft: #e7f5ed;
    --badge-ok-pill: #e7f5ed;
    --badge-warn: #fdf0e7;
    --badge-danger: #fbe6e6;
    --badge-danger-soft: #fbeaea;
    --badge-info: #e5ecfc;
    --badge-info-soft: #eaf0fd;
    --badge-neutral: #e3e6ec;
    --badge-neutral-strong: #4d5766;
    --info: #1d4ed8;
    --info-strong: #1d4ed8;
    --info-text: #1d4ed8;
    --info-pill-text: #1d4ed8;
    --ok-text: #127437;
    --ok-strong: #127437;
    --danger-strong: #b91c1c;
    --violet: #7e22ce;
    --btn-gold-bg: #a34d08;
    --btn-gold-text: #ffffff;
    --modal-sub-text: #4b5262;
    --modal-item-desc: #5c6472;
    --pp-del-bg: #fbeaea;
    --pp-del-border: #eeb9b9;
    --pp-del-hover: #f7dada;
    /* Solid phone-only buttons in staff-directory.css, which this sheet
       re-points further down (that file is owned by another change). */
    --sd-call-bg: #127437;
    --sd-text-bg: #1d4ed8;
    --sd-mail-bg: #a34d08;
}

html,
body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* ── Header ────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 12px var(--header-glow);
}

.site-header h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    color: var(--accent);
    letter-spacing: 0.06em;
    cursor: pointer;
}

/* Phone menu button; hidden on desktop where the tab bar is visible. */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.nav-toggle-bars { position: relative; }

.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; }

.nav-toggle-bars::before { top: -5px; }

.nav-toggle-bars::after { top: 5px; }

.nav-current {
    max-width: 38vw;
    overflow: hidden;
    color: var(--accent);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 8px;
}

.live-clock {
    font-family: monospace;
    font-size: 1.1rem;
    color: var(--text-muted);
}

.build-version {
    font-size: 0.7rem;
    font-family: monospace;
    color: var(--text-muted);
    opacity: 0.5;
    letter-spacing: 0.04em;
    margin-right: 4px;
}

.btn-header-refresh {
    padding: 5px 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.btn-header-refresh:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-header-refresh:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ── Main tabs ─────────────────────────────────────────────────── */
.main-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 16px 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
}

.tab-btn {
    padding: 8px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Tab content ───────────────────────────────────────────────── */
.main-content {
    padding: 16px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Policies tab needs flex to chain height down to the editor */
#tab-policies.active {
    display: flex;
    flex-direction: column;
}

.tab-content--iframe.active {
    display: flex;
    flex-direction: column;
    padding: 0;
    position: fixed;
    inset: calc(var(--header-h) + 41px) 0 0 0;
    z-index: 10;
}

.schedule-iframe {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
}

.sd-loc-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--border);
    color: var(--text);
}

/* Location chips, same colors everywhere (see --loc-* in :root). */
.sd-loc-cary       { background: var(--loc-cary); color: var(--loc-cary-text); }

.sd-loc-boxyard    { background: var(--loc-boxyard); color: var(--loc-boxyard-text); }

.sd-loc-greenville { background: var(--loc-greenville); color: var(--loc-greenville-text); }

.sd-loc-morehead   { background: var(--loc-morehead); color: var(--loc-morehead-text); }

.sd-loc-patterson  { background: var(--loc-patterson); color: var(--loc-patterson-text); }

.color-green {
    color: var(--green);
}

.color-orange {
    color: var(--orange);
}

.color-red {
    color: var(--red);
}

.color-grey {
    color: var(--grey);
}

.no-data-msg {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 8px 0;
}

/* ── Reconciliation / Transactions tab ──────────────────────────────────── */

/* Filter bar */
.recon-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
}

.rf-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rf-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.rf-input,
.rf-select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.83rem;
    padding: 5px 10px;
    height: 32px;
    outline: none;
    cursor: pointer;
}

.rf-input:focus,
.rf-select:focus { border-color: var(--accent); }

.rf-select option { background: var(--surface-2); }

.rf-run-btn {
    align-self: flex-end;
    padding: 5px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: opacity 0.15s;
}

.rf-run-btn:hover  { opacity: 0.85; }

.rf-run-btn:disabled { opacity: 0.45; cursor: wait; }

.rf-status {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: auto;
    align-self: center;
}

/* Summary chips */
.recon-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.recon-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 100px;
}

.recon-chip-label {
    font-size: 0.67rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.recon-chip-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
}

.recon-chip-diff.diff-alert { border-color: var(--danger-strong); background: var(--tint-red-2); }

.diff-zero    { color: var(--green-strong); }

.diff-nonzero { color: var(--red-strong); }

/* Side-by-side panels */
.recon-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1000px) {
    .recon-panels { grid-template-columns: 1fr; }
}

.recon-panel { display: flex; flex-direction: column; min-width: 0; }

.recon-panel-hdr {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.recon-panel-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: var(--text);
    flex: 1;
}

.recon-panel-filter {
    font-size: 0.75rem;
    padding: 3px 6px;
    height: 26px;
}

.recon-count-badge {
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--chip-bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 2px 10px;
    border-radius: 12px;
}

.recon-table-wrap { overflow-x: auto; }

.recon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.81rem;
}

.recon-table thead th {
    background: var(--surface-2);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.67rem;
    letter-spacing: 0.06em;
    padding: 7px 10px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.recon-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--table-line);
    color: var(--text);
    vertical-align: top;
}

.recon-table tbody tr.recon-row:hover td { filter: var(--row-hover); }

.recon-amt       { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.recon-total-cell { color: var(--green); }

.recon-mono      { font-family: monospace; font-size: 0.78rem; white-space: nowrap; }

/* OTC location + game stacked cell */
.otc-game { font-weight: 600; font-size: 0.85rem; white-space: nowrap; }

.otc-loc  { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }

.otc-time { color: var(--accent); font-weight: 600; margin-left: 4px; }

.recon-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 24px 10px;
    font-size: 0.84rem;
}

.auth-status-overlay {
    position: fixed;
    inset: 0;
    z-index: 2300;
    background: var(--scrim-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-status-overlay.hidden {
    display: none;
}

.auth-status-card {
    width: min(720px, 96vw);
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(var(--shadow-rgb), 0.45);
    padding: 18px 18px 16px;
    position: relative;
}

.auth-status-close {
    position: absolute;
    right: 10px;
    top: 8px;
    border: 1px solid var(--modal-close-border);
    background: var(--modal-close-bg);
    color: var(--modal-close-text);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.auth-status-card h2 {
    margin: 0 36px 6px 0;
    font-size: 1.15rem;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.04em;
    color: var(--modal-title);
}

.auth-status-sub {
    margin: 0 0 12px;
    color: var(--modal-sub-text);
    font-size: 0.93rem;
}

.auth-status-items {
    display: grid;
    gap: 10px;
}

.auth-status-item {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--modal-item-border);
    background: var(--modal-item-bg);
}

.auth-status-item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-status-item-title {
    color: var(--modal-item-title);
    font-weight: 700;
    font-size: 0.95rem;
}

.auth-status-item-desc {
    color: var(--modal-item-desc);
    font-size: 0.84rem;
}

.auth-status-login-btn {
    border: 1px solid var(--btn-gold-bg);
    background: var(--btn-gold-bg);
    color: var(--btn-gold-text);
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.auth-status-login-btn:hover {
    filter: brightness(1.06);
}

@media (max-width: 720px) {
    .auth-status-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Dashboard access & user management
   ══════════════════════════════════════════════════════════════════════════ */
[hidden] {
    display: none !important;
}

.dashboard-access-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg-translucent);
    backdrop-filter: blur(8px);
}

.dashboard-access-gate.hidden {
    display: none;
}

.dashboard-access-card {
    width: min(440px, 100%);
    padding: 32px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(var(--shadow-rgb), 0.5);
}

.dashboard-access-card h2 {
    margin: 14px 0 8px;
    color: var(--accent);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.03em;
}

.dashboard-access-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.dashboard-access-card.access-denied {
    border-color: rgba(var(--danger-rgb), 0.55);
}

.dashboard-access-card.access-denied h2 {
    color: var(--red);
}

.dashboard-access-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: dashboard-access-spin 0.8s linear infinite;
}

.access-denied .dashboard-access-spinner {
    display: none;
}

@keyframes dashboard-access-spin {
    to { transform: rotate(360deg); }
}

.dashboard-user-chip {
    max-width: 220px;
    overflow: hidden;
    padding: 5px 10px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--chip-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* Header "Sign out" / "Switch user"; on phones it moves into the menu list. */
.btn-header-signout {
    padding: 5px 10px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.btn-header-signout:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.nav-session {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.nav-session-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-signout-btn {
    flex: none;
    padding: 7px 12px;
    color: var(--accent);
    font-weight: 700;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

/* ── Login screen ─────────────────────────────────────────────────────────
   Replaces the access gate when there is no session. */
.login-screen {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    overflow-y: auto;
    background: var(--bg);
}

body.login-open {
    overflow: hidden;
}

.login-card {
    width: min(420px, 100%);
    padding: 28px 26px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(var(--shadow-rgb), 0.45);
}

.login-brand {
    margin-bottom: 20px;
    text-align: center;
}

.login-brand h1 {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.06em;
    color: var(--accent);
    line-height: 1;
}

.login-brand span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s;
}

.login-google-btn:hover {
    border-color: var(--accent);
}

/* The Google "G" on a white disc, per Google's sign-in button guidelines. */
.login-google-mark {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
}

.login-help {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: var(--text-muted);
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.login-step-title {
    margin: 0 0 10px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.login-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.login-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 84px;
    padding: 10px 8px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}

.login-person:hover,
.login-person:focus-visible {
    border-color: var(--accent);
    outline: none;
}

.login-person:active {
    transform: scale(0.97);
}

.login-person-initial {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    color: var(--text-on-accent);
    background: var(--accent);
    border-radius: 50%;
}

.login-person-name {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.login-email-form .user-field-label {
    display: block;
    margin-bottom: 4px;
}

.login-email-form-secondary .user-field-label::before {
    content: 'Someone else? ';
    color: var(--text-muted);
    font-weight: 400;
}

.login-email-row {
    display: flex;
    gap: 8px;
}

.login-email-row .user-input {
    flex: 1;
    min-width: 0;
}

.login-back {
    margin: -6px 0 6px -4px;
    font-size: 0.82rem;
}

.login-pin-for {
    margin: -4px 0 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.login-pin-dots {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 6px 0 16px;
}

.login-pin-dots span {
    width: 16px;
    height: 16px;
    background: transparent;
    border: 2px solid var(--border);
    border-radius: 50%;
    transition: background 0.1s, border-color 0.1s;
}

.login-pin-dots span.filled {
    background: var(--accent);
    border-color: var(--accent);
}

.login-pin-dots.shake {
    animation: login-shake 0.4s;
}

@keyframes login-shake {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.login-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 260px;
    margin: 0 auto;
}

.login-keypad button {
    min-height: 54px;
    color: var(--text);
    font-family: 'Oswald', sans-serif;
    font-size: 1.35rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}

.login-keypad button:hover:not(:disabled),
.login-keypad button:focus-visible {
    border-color: var(--accent);
    outline: none;
}

.login-keypad button:active:not(:disabled) {
    transform: scale(0.95);
}

.login-keypad button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.login-keypad .login-key-muted {
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.login-error {
    margin: 14px 0 0;
    padding: 9px 12px;
    color: var(--red-soft);
    font-size: 0.85rem;
    text-align: center;
    background: var(--tint-red);
    border: 1px solid rgba(var(--danger-rgb), 0.4);
    border-radius: 8px;
}

.login-device {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-align: center;
}

.user-management-section {
    max-width: 1500px;
    margin: 0 auto;
}

.user-management-header,
.user-editor-title-row,
.user-list-summary,
.user-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.user-management-header {
    margin-bottom: 18px;
}

.user-management-header h2,
.user-editor-card h3,
.user-list-card h3 {
    margin: 0;
    color: var(--text);
    font-family: 'Oswald', sans-serif;
}

.user-management-header p {
    max-width: 760px;
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.user-management-layout {
    display: grid;
    grid-template-columns: minmax(340px, 0.85fr) minmax(520px, 1.5fr);
    gap: 18px;
    align-items: start;
}

.user-editor-card,
.user-list-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.18);
}

.user-editor-card {
    padding: 20px;
}

.user-editor-title-row {
    margin-bottom: 16px;
}

.user-field-label {
    display: block;
    margin: 12px 0 6px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.user-input {
    width: 100%;
    padding: 9px 11px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
}

.user-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.user-input:disabled {
    opacity: 0.55;
}

.user-form-row {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 12px;
}

.user-fieldset {
    margin: 18px 0 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.user-fieldset legend {
    padding: 0 6px;
    color: var(--accent);
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.user-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
}

.user-permission-grid {
    grid-template-columns: 1fr;
}

.user-check-option,
.user-active-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
}

.user-check-option input,
.user-active-toggle input {
    accent-color: var(--accent);
}

.user-active-toggle {
    margin: 16px 0 4px;
    color: var(--text);
    font-weight: 600;
}

.user-editor-status {
    min-height: 20px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.user-editor-status.error {
    color: var(--red);
}

.user-editor-status.success {
    color: var(--green);
}

.user-editor-actions {
    justify-content: flex-start;
    margin-top: 14px;
}

.user-btn,
.user-link-btn {
    border: 0;
    cursor: pointer;
    font-weight: 700;
}

.user-btn {
    padding: 8px 14px;
    border-radius: 6px;
}

.user-btn-primary {
    color: var(--text-on-accent);
    background: var(--accent);
}

.user-btn-secondary {
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.user-btn-danger {
    color: var(--red-softer);
    background: var(--badge-danger-soft);
    border: 1px solid rgba(var(--danger-rgb), 0.42);
}

.user-link-btn {
    padding: 4px;
    color: var(--accent);
    background: none;
}

.user-list-card {
    min-width: 0;
    overflow: hidden;
}

.user-list-summary {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.user-list-summary span {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.user-table-wrap {
    overflow-x: auto;
}

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

/* Staff Directory rows share .user-table. This rule is declared before
   .user-table td so the table keeps the top alignment it always had. */
.sd-table td { vertical-align: middle; }

.user-table th,
.user-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.user-table th {
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--surface-2);
}

.user-table td {
    color: var(--text);
    font-size: 0.82rem;
}

.user-table tr:last-child td {
    border-bottom: 0;
}

.user-table tr.inactive {
    opacity: 0.55;
}

.user-name {
    display: block;
    font-weight: 700;
}

.user-email {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.user-badge,
.user-location-pill {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 3px 7px;
    font-size: 0.68rem;
    white-space: nowrap;
    border-radius: 999px;
}

.user-badge {
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.user-location-pill {
    color: var(--info-pill-text);
    background: var(--badge-info-soft);
    border: 1px solid rgba(var(--info-rgb), 0.24);
}

.user-access-summary {
    max-width: 260px;
    color: var(--text-muted);
    line-height: 1.45;
}

.user-edit-btn {
    padding: 5px 9px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
}

.user-empty {
    padding: 28px !important;
    color: var(--text-muted) !important;
    text-align: center !important;
}

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

@media (max-width: 640px) {
    .user-management-header,
    .user-form-row {
        display: block;
    }

    .user-management-header .user-btn {
        margin-top: 12px;
    }

    .user-check-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-user-chip {
        display: none !important;
    }
}

/* ── Overview mobile layout ──────────────────────────────────────
   Keep the page viewport-width and show one location card at a time. */
@media (max-width: 640px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .site-header {
        height: auto;
        min-height: var(--header-h);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px 12px;
    }

    .header-left,
    .header-right {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    /* Brand on one line, "Admin Dashboard" under it. */
    .header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        line-height: 1.05;
    }

    .site-header h1 {
        font-size: 1.35rem;
        white-space: nowrap;
    }

    .header-sub {
        margin-left: 0;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .header-right {
        justify-content: flex-end;
        gap: 6px;
    }

    .build-version,
    .dashboard-user-chip,
    .btn-header-signout {
        display: none !important;
    }

    /* Phones: the header is just the brand and the menu button; the
       signed-in name and sign-out sit at the bottom of the menu list. */
    .live-clock,
    .btn-header-refresh {
        display: none !important;
    }

    .nav-session:not([hidden]) {
        display: flex;
    }

    .site-header h1 {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Section name first, menu icon on the far right. */
    .nav-toggle {
        display: inline-flex;
        flex-direction: row-reverse;
        max-width: 62vw;
        min-height: 46px;
        padding: 8px 14px;
        border: 1px solid var(--nav-toggle-border);
        border-radius: 10px;
        background: var(--nav-toggle-bg);
        color: var(--nav-toggle-text);
        font-size: 0.98rem;
    }
    .nav-toggle:active { background: var(--nav-toggle-bg-active); }
    .nav-current { color: var(--nav-toggle-text); }
    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after { width: 20px; }
    .nav-toggle-bars::before { top: -6px; }
    .nav-toggle-bars::after { top: 6px; }

    /* The open menu must sit above the pinned Schedule/Policies frames. */
    .main-tabs.open { position: relative; z-index: 60; }

    /* Pinned iframe tabs start right under the real header height (no tab bar on phones). */
    .tab-content--iframe.active {
        inset: var(--header-actual, var(--header-h)) 0 0 0;
    }
    .nav-current { max-width: none; }

    /* Tabs fold into a drop-down list under the header, opened by the menu button. */
    .main-tabs {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 4px 0;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 10px 24px rgba(var(--shadow-rgb), 0.45);
    }

    .main-tabs.open { display: flex; }

    .tab-btn {
        width: 100%;
        min-width: 0;
        padding: 11px 18px;
        border-bottom: 1px solid var(--border);
        border-left: 3px solid transparent;
        font-size: 0.95rem;
        line-height: 1.2;
        text-align: left;
        white-space: normal;
    }

    .tab-btn:last-child { border-bottom: 0; }

    .tab-btn.active {
        border-left-color: var(--accent);
        border-bottom-color: var(--border);
        background: var(--surface);
    }

    .main-content {
        width: 100%;
        min-width: 0;
        padding: 10px;
    }

    #tab-overview,
    #tab-overview .overview-grid,
    #tab-overview .glance-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #tab-overview .overview-card-nav {
        position: sticky;
        top: calc(var(--header-h) + 4px);
        z-index: 30;
        display: flex;
        justify-content: center;
        gap: 2px;
        margin: -4px -4px 6px;
        padding: 2px 4px;
        background: var(--bg-translucent);
        backdrop-filter: blur(8px);
    }

    #tab-overview .overview-date-toolbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 7px;
        margin-bottom: 8px;
    }

    #tab-overview .overview-date-caption {
        justify-self: end;
        font-size: 0.62rem;
    }

    #tab-overview .overview-date-control {
        grid-template-columns: 34px minmax(110px, auto) 34px;
    }

    #tab-overview .overview-date-current {
        padding: 7px 9px;
        font-size: 0.82rem;
    }

    #tab-overview .overview-date-status {
        min-width: 0;
        font-size: 0.65rem;
    }

    #tab-overview .overview-card-nav-btn {
        width: 24px;
        height: 20px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
    }

    #tab-overview .overview-card-nav-btn::before {
        display: block;
        width: 8px;
        height: 8px;
        margin: auto;
        content: '';
        background: var(--text-muted);
        border-radius: 50%;
        transition: background 0.15s, transform 0.15s;
    }

    #tab-overview .overview-card-nav-btn.active::before {
        background: var(--accent);
        transform: scale(1.25);
    }

    #tab-overview .overview-card-nav-btn[data-location="cary"].active::before { background: var(--loc-cary); }
    #tab-overview .overview-card-nav-btn[data-location="boxyard"].active::before { background: var(--loc-boxyard); }
    #tab-overview .overview-card-nav-btn[data-location="greenville"].active::before { background: var(--loc-greenville); }
    #tab-overview .overview-card-nav-btn[data-location="morehead"].active::before { background: var(--loc-morehead); }
    #tab-overview .overview-card-nav-btn[data-location="patterson"].active::before { background: var(--loc-patterson); }

    #tab-overview .overview-card-nav-btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

    #tab-overview .overview-grid {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
    }

    #tab-overview .overview-grid::-webkit-scrollbar {
        display: none;
    }

    #tab-overview .glance-card {
        flex: 0 0 100%;
        border-radius: 10px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    #tab-overview .glance-card.mobile-card-active {
        border-color: rgba(var(--accent-rgb), 0.45);
    }

    #tab-overview .glance-header {
        min-width: 0;
        padding: 10px 12px;
    }

    #tab-overview .glance-header h2 {
        min-width: 0;
        font-size: 1.3rem;
    }

    #tab-overview .glance-revenue-badge {
        max-width: 55%;
        overflow: hidden;
        padding: 3px 9px;
        font-size: 0.76rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #tab-overview .glance-schedule {
        height: auto;
        max-height: none;
    }

    #tab-overview .glance-summary {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 7px;
        min-width: 0;
        padding: 10px 12px;
    }

    #tab-overview .glance-summary::before {
        grid-column: 1;
    }

    #tab-overview .glance-chip {
        grid-column: 3;
        max-width: min(58vw, 210px);
        overflow: hidden;
        margin-left: 0;
        padding: 2px 8px;
        font-size: 0.72rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #tab-overview .glance-detail-body {
        min-width: 0;
        padding: 9px 12px 12px;
    }

    #tab-overview .glance-staff-row,
    #tab-overview .glance-tx-row,
    #tab-overview .tip-split-row {
        min-width: 0;
    }

    #tab-overview .glance-staff-name,
    #tab-overview .glance-staff-meta,
    #tab-overview .glance-tx-card,
    #tab-overview .tip-split-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 390px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-inline: 9px;
    }
}

.gs-table-card.gs-loc-cary { border-left: 4px solid var(--loc-cary); }

.gs-table-card.gs-loc-boxyard { border-left: 4px solid var(--loc-boxyard); }

.gs-table-card.gs-loc-greenville { border-left: 4px solid var(--loc-greenville); }

.gs-table-card.gs-loc-morehead { border-left: 4px solid var(--loc-morehead); }

.gs-table-card.gs-loc-patterson { border-left: 4px solid var(--loc-patterson); }

.gs-chip {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.gs-chip-warn {
    border-color: rgba(var(--warn-rgb), 0.5);
    color: var(--orange);
}

.gs-chip-conflict {
    border-color: rgba(var(--danger-rgb), 0.5);
    color: var(--red-soft);
}

/* Location tables */
.gs-tables {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gs-table-card {
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.18);
}

.gs-table-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.gs-table-hdr h3 {
    margin: 0;
    color: var(--accent);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.06em;
}

.gs-table-hdr .gs-chip { margin-left: auto; }

/* ── Header menu groups (Settings > Menu) ─────────────────────────────── */
/* A parent page with nested pages renders as .tab-group: the parent's own
   .tab-btn plus a caret that opens the children. Children are real .tab-btn
   elements so tab switching, #hash links, and permission gating are shared. */
.tab-group {
    position: relative;
    display: inline-flex;
    flex-direction: column;
}

.tab-group-head {
    display: flex;
    align-items: stretch;
}

.tab-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 2px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.2s;
}

.tab-group-toggle:hover,
.tab-group.open .tab-group-toggle,
.tab-group.has-active .tab-group-toggle {
    color: var(--accent);
}

.tab-group-caret {
    font-size: 0.8rem;
    line-height: 1;
}

/* When the parent page itself is shown, the caret is enough. */
.tab-group-head .tab-btn:not([hidden]) + .tab-group-toggle {
    padding-left: 0;
    margin-left: -12px;
}

.tab-group-head .tab-btn:not([hidden]) + .tab-group-toggle .tab-group-toggle-label {
    display: none;
}

/* A hidden parent with visible children: the caret button carries the label. */
.tab-group-headless .tab-group-toggle {
    padding: 8px 14px 8px 20px;
}

.tab-group-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 90;
    min-width: 200px;
    padding: 4px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 28px rgba(var(--shadow-rgb), 0.35);
}

.tab-group:hover .tab-group-menu,
.tab-group.open .tab-group-menu {
    display: block;
}

.tab-group-empty .tab-group-menu { display: none !important; }

.tab-group-empty .tab-group-toggle { display: none !important; }

/* The hidden attribute must win over the display rules above, on every screen size. */
.tab-btn[hidden],
.tab-group-toggle[hidden],
.tab-group[hidden] { display: none !important; }

.tab-group-menu .tab-btn {
    display: block;
    width: 100%;
    padding: 9px 16px;
    border-bottom: 0;
    border-left: 3px solid transparent;
    text-align: left;
    white-space: nowrap;
}

.tab-group-menu .tab-btn.active {
    border-left-color: var(--accent);
    background: var(--surface-2);
}

@media (max-width: 640px) {
    /* Phone menu: groups stack, children are indented under the parent. */
    .tab-group,
    .tab-group-head {
        display: block;
        width: 100%;
    }

    .tab-group-toggle {
        display: none;
    }

    .tab-group-headless .tab-group-toggle {
        display: block;
        width: 100%;
        padding: 10px 18px 2px;
        border: 0;
        color: var(--text-muted);
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: left;
        pointer-events: none;
    }

    .tab-group-headless .tab-group-caret {
        display: none;
    }

    .tab-group-head .tab-btn:not([hidden]) + .tab-group-toggle {
        margin-left: 0;
    }

    .tab-group-menu,
    .tab-group:hover .tab-group-menu,
    .tab-group.open .tab-group-menu {
        display: block;
        position: static;
        min-width: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .tab-group-menu .tab-btn {
        padding: 10px 18px 10px 36px;
        border-bottom: 1px solid var(--border);
        white-space: normal;
    }

    .tab-group-menu .tab-btn::before {
        content: '\21B3';
        margin-right: 8px;
        color: var(--text-muted);
    }

    .tab-group-menu .tab-btn.active {
        border-left-color: var(--accent);
        background: var(--surface);
    }

    .main-tabs > :last-child .tab-btn:last-child {
        border-bottom: 0;
    }
}

/* ── Light-only touch-ups for sheets this change does not own ──────────────
   staff-directory.css draws its phone action buttons as solid brand colors
   with white labels. On light those three greens/blues/ambers were tuned for
   a dark page and left the labels under 4.5:1, so re-point them here. The
   selectors are more specific than the originals, so load order is moot. */
@media (max-width: 720px) {
    :root[data-theme="light"] .sd-action-call { background: var(--sd-call-bg); }

    :root[data-theme="light"] .sd-action-text { background: var(--sd-text-bg); }

    :root[data-theme="light"] .sd-action-mail { background: var(--sd-mail-bg); }
}