/* ══════════════════════════════════════════════════════════════════════════
   Jozi My Jozi — design tokens & component styles

   THEMING
   Tokens are defined light-first on bare :root, then overridden for dark in
   two places: a prefers-color-scheme block (guarded so an explicit "light"
   choice wins) and a [data-theme="dark"] block (so the manual toggle wins).
   Never give a colour its only definition inside one of those blocks.

   BRAND / CONTRAST RULE  — this drives the whole palette:
     #E9B121 on black ......... 10.8:1  ✔ dark-mode text & accents
     #E9B121 on white .......... 1.95:1  ✘ never use as text in light mode
     near-black on #E9B121 .... 10.8:1  ✔ primary button in both modes
   So brand yellow is a FILL in both themes but a TEXT colour only in dark.
   Light mode uses --brand-ink (a darkened yellow) for text and icons.

   LEGACY ALIASES
   ~800 inline style= attributes across the app reference the original
   variable names. Rather than touch all of them at once, those names are
   aliased onto the new tokens at the bottom of each theme block. Prefer the
   new semantic tokens in any new code.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* ── Brand ─────────────────────────────────────────────────────────── */
    --brand: #E9B121;
    --brand-hover: #D69F14;
    --brand-ink: #8A6200; /* brand as TEXT — darkened for contrast on white */
    --brand-soft: #FDF4DC;
    --brand-border: #EBD9A4;
    --text-on-brand: #12100A;
    /* Text sitting on a saturated fill (danger/ok/info/fault colours).
       Constant in both themes — those fills do not lighten in dark mode. */
    --on-accent: #FFFFFF;

    /* ── Surfaces ──────────────────────────────────────────────────────── */
    --bg: #F5F5F3;
    --surface: #FFFFFF;
    --surface-2: #F2F1EE;
    --surface-3: #E8E7E3;
    --surface-strong: #17171A; /* inverted: sidebar, table headers */
    --on-surface-strong: #F2F0EA;

    /* ── Text ──────────────────────────────────────────────────────────── */
    --text: #17171A;
    --text-muted: #67655F;
    --text-faint: #918E86;
    --text-invert: #FFFFFF;

    /* ── Lines ─────────────────────────────────────────────────────────── */
    --border: #E2E1DC;
    --border-strong: #C9C7C0;
    --focus-ring: 0 0 0 3px rgba(233, 177, 33, .45);

    /* ── Semantic ──────────────────────────────────────────────────────── */
    --ok: #1F7A4D;      --ok-bg: #E8F6EE;      --ok-border: #A9DCC1;
    --warn: #9A5B00;    --warn-bg: #FDF1E0;    --warn-border: #EBC48C;
    --danger: #B3271C;  --danger-bg: #FCECEA;  --danger-border: #EFB0A9;
    --info: #1F5FA0;    --info-bg: #E8F1FA;    --info-border: #A8C8E8;

    /* ── Categorical (KPI accents, map legend) ─────────────────────────── */
    --cat-1: #B5651D;  --cat-2: #1F5FA0;  --cat-3: #1F7A4D;
    --cat-4: #6D3F9E;  --cat-5: #0F7C73;  --cat-6: #A8321F;

    /* ── Scales ────────────────────────────────────────────────────────── */
    --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
    --space-4: 16px; --space-5: 24px;  --space-6: 32px;

    --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 16px;
    --radius-xl: 22px; --radius-pill: 999px;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .08);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, .16);

    --text-xs: 11px; --text-sm: 13px;  --text-md: 14px;
    --text-lg: 16px; --text-xl: 20px;  --text-2xl: 26px;

    /* ── Shell metrics ─────────────────────────────────────────────────── */
    --side-w: 220px;
    --mobile-nav-h: 64px;

    /* ── Legacy aliases — prefer the tokens above in new code ──────────── */
    --primary: var(--brand);
    --primary-dark: var(--text);        /* 80 of 84 uses were a text colour */
    --primary-mid: var(--text-muted);
    --primary-light: var(--brand-soft); /* 25 of 28 uses were a background */
    --card: var(--surface);
    --muted: var(--text-muted);
    --sidebar-text: var(--on-surface-strong);
}

/* ── Dark theme ────────────────────────────────────────────────────────── */
/* Applied when the device asks for dark AND the user has not forced light. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --brand: #E9B121;
        --brand-hover: #F5C441;
        --brand-ink: #E9B121; /* yellow IS readable on dark — 10.8:1 */
        --brand-soft: #2A2310;
        --brand-border: #4A3D18;
        --text-on-brand: #12100A;

        --bg: #0B0B0C;
        --surface: #141416;
        --surface-2: #1C1C1F;
        --surface-3: #26262A;
        --surface-strong: #000000;
        --on-surface-strong: #F2F0EA;

        --text: #F2F0EA;
        --text-muted: #A3A099;
        --text-faint: #7A776F;
        --text-invert: #12100A;

        --border: #2E2E33;
        --border-strong: #3D3D44;

        --ok: #45C489;      --ok-bg: #10241A;      --ok-border: #24513A;
        --warn: #E9A13B;    --warn-bg: #2A1F0E;    --warn-border: #54401A;
        --danger: #F0685B;  --danger-bg: #2B1412;  --danger-border: #5C2A25;
        --info: #5BA3E8;    --info-bg: #0F1D2B;    --info-border: #22405C;

        --cat-1: #E8944A;  --cat-2: #5BA3E8;  --cat-3: #45C489;
        --cat-4: #B084E8;  --cat-5: #3FC0B4;  --cat-6: #F0685B;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
        --shadow-2: 0 4px 12px rgba(0, 0, 0, .55);
        --shadow-3: 0 16px 40px rgba(0, 0, 0, .7);
    }
}

/* Explicit dark choice — must repeat so the toggle beats the media query. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --brand: #E9B121;
    --brand-hover: #F5C441;
    --brand-ink: #E9B121;
    --brand-soft: #2A2310;
    --brand-border: #4A3D18;
    --text-on-brand: #12100A;

    --bg: #0B0B0C;
    --surface: #141416;
    --surface-2: #1C1C1F;
    --surface-3: #26262A;
    --surface-strong: #000000;
    --on-surface-strong: #F2F0EA;

    --text: #F2F0EA;
    --text-muted: #A3A099;
    --text-faint: #7A776F;
    --text-invert: #12100A;

    --border: #2E2E33;
    --border-strong: #3D3D44;

    --ok: #45C489;      --ok-bg: #10241A;      --ok-border: #24513A;
    --warn: #E9A13B;    --warn-bg: #2A1F0E;    --warn-border: #54401A;
    --danger: #F0685B;  --danger-bg: #2B1412;  --danger-border: #5C2A25;
    --info: #5BA3E8;    --info-bg: #0F1D2B;    --info-border: #22405C;

    --cat-1: #E8944A;  --cat-2: #5BA3E8;  --cat-3: #45C489;
    --cat-4: #B084E8;  --cat-5: #3FC0B4;  --cat-6: #F0685B;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .55);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, .7);
}

/* ══ Base ═══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-md);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { color: var(--text); }
h1 { font-size: var(--text-2xl); }

a { color: var(--brand-ink); }
code { color: inherit; }

/* ── Icons (Bootstrap Icons) ───────────────────────────────────────────── */
/* Replaced the emoji that were previously used throughout. Icons inherit the
   current text colour, so they theme automatically and never render as a
   platform-specific colour glyph. */
.bi {
    display: inline-block;
    line-height: 1;
    vertical-align: -0.125em;
    flex-shrink: 0;
}
h1 .bi, h2 .bi, h3 .bi { vertical-align: -0.1em; }
.btn .bi { font-size: 1.05em; }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* ══ Shell ══════════════════════════════════════════════════════════════ */

/* Block, not flex. The sidebar is position:fixed on desktop and display:none
   on mobile, so a flex row gains nothing — and it actively broke the mobile
   header, which became a 42px-wide flex sibling of the content instead of
   stacking above it. (That is why the header was previously commented out and
   patched over with JS.) */
.shell { display: block; min-height: 100vh; }

/* Sidebar: hidden by default (mobile-first), shown at the desktop breakpoint.
   Black in BOTH themes — the yellow-on-black brand identity is constant. */
.side {
    display: none;
    width: var(--side-w);
    background: var(--surface-strong);
    color: var(--on-surface-strong);
    padding: 0;
    flex-direction: column;
    border-right: 1px solid var(--brand);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-3);
    flex-shrink: 0;
}
.brand img { width: 38px; height: auto; }
.brand-name {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--brand);
    letter-spacing: .3px;
    line-height: 1.1;
}

.side nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-2) var(--space-2) var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: rgba(233, 177, 33, .3) transparent;
}
.side nav::-webkit-scrollbar { width: 4px; }
.side nav::-webkit-scrollbar-thumb { background: rgba(233, 177, 33, .3); border-radius: 4px; }

.side a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--on-surface-strong);
    text-decoration: none;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    margin: 2px 0;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.side a:hover { background: rgba(233, 177, 33, .15); border-left-color: var(--brand); }
.side a.nav-active {
    background: rgba(233, 177, 33, .22);
    border-left-color: var(--brand);
    color: var(--brand);
    font-weight: 700;
}
.nav-icon { font-size: 1.05rem; line-height: 1; flex-shrink: 0; width: 1.2em; text-align: center; }

.side-footer {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: 1px solid rgba(233, 177, 33, .25);
}
.app-version {
    font-size: 10px;
    color: rgba(242, 240, 234, .45);
    text-align: right;
    margin-top: var(--space-2);
    letter-spacing: .4px;
    user-select: none;
}
.mobile-version {
    font-size: 9px;
    color: rgba(242, 240, 234, .35);
    text-align: center;
    padding: 2px 0 4px;
    letter-spacing: .4px;
    user-select: none;
}

/* Content: full-width on mobile, offset by the sidebar on desktop. */
.content {
    margin-left: 0;
    padding: var(--space-4);
    padding-bottom: calc(var(--mobile-nav-h) + var(--space-5));
    width: 100%;
    min-width: 0;
}

/* ── Desktop breakpoint ────────────────────────────────────────────────── */
@media (min-width: 901px) {
    .side { display: flex; position: fixed; top: 0; bottom: 0; overflow: hidden; }
    .content {
        margin-left: var(--side-w);
        padding: var(--space-5);
        width: calc(100% - var(--side-w));
        padding-bottom: var(--space-5);
    }
    .mobile-header, .mobile-nav { display: none; }
    /* .grid / .form-grid desktop columns live after their base rules further
       down — a media query adds no specificity, so declaring them here would
       be overridden by the later base declaration. */
}

/* ══ Components ═════════════════════════════════════════════════════════ */

.hero {
    background: var(--surface-strong);
    color: var(--on-surface-strong);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 3px solid var(--brand);
}
.hero h1, .hero h2 { color: var(--brand); }

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

.card {
    background: var(--surface);
    /* Explicit, because Bootstrap's own .card sets color: var(--bs-body-color).
       Without this, card text follows Bootstrap's theme rather than ours. */
    color: var(--text);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-1);
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand);
    margin-bottom: var(--space-4);
}

.metric { font-size: 34px; font-weight: 800; color: var(--text); }
.muted { color: var(--text-muted); }

.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3);
    align-items: end;
}

/* Desktop columns — must come after the base .grid / .form-grid rules above. */
@media (min-width: 901px) {
    .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; color: var(--text); font-size: var(--text-sm); }

.input, select, textarea, .form-control {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-md);
}
.input::placeholder, textarea::placeholder { color: var(--text-faint); }
.input:focus, select:focus, textarea:focus, .form-control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}
.input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-muted); }

.btn {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 11px 16px;
    font-weight: 700;
    font-family: inherit;
    font-size: var(--text-md);
    cursor: pointer;
    transition: filter .15s, background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }

.btn-primary, .btn-gold { background: var(--brand); color: var(--text-on-brand); }
.btn-primary:hover, .btn-gold:hover { background: var(--brand-hover); }
.btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-danger { background: var(--danger); color: var(--on-accent); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--space-4); }

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    color: var(--text);   /* same reason as .card above */
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.table th {
    background: var(--surface-strong);
    color: var(--on-surface-strong);
    font-size: var(--text-sm);
    letter-spacing: .3px;
}
.table th, .table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.table tr:hover td { background: var(--surface-2); }

/* ── Status pill ───────────────────────────────────────────────────────── */
.status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
.status-ok     { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-border); }
.status-warn   { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-border); }
.status-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.status-info   { background: var(--info-bg);   color: var(--info);   border-color: var(--info-border); }
.status-brand  { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-border); }
.status-muted  { background: var(--surface-3); color: var(--text-muted); border-color: var(--border); }

/* ── Unified spinner (replaces three separate implementations) ─────────── */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}
.spinner-lg { width: 44px; height: 44px; border-width: 4px; }
.loading-block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    min-height: 40vh;
    color: var(--text-muted);
}

/* ── Alerts ────────────────────────────────────────────────────────────── */
.alert-soft {
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: var(--space-4);
    font-size: var(--text-md);
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.alert-ok     { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-border); }
.alert-warn   { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-border); }
.alert-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.alert-info   { background: var(--info-bg);   color: var(--info);   border-color: var(--info-border); }

.map { height: 650px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }

.qrbox {
    background: var(--brand-soft);
    border: 1px dashed var(--brand);
    border-radius: var(--radius-lg);
    padding: 18px;
    text-align: center;
}

.tab-bar { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* ── Standard page header (PageHeader.razor) ───────────────────────────── */
/* Every screen except the dashboard uses this shape: dark band, icon +
   title, one context line, actions on the right. */
.page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: 18px var(--space-5);
    margin-bottom: var(--space-4);
}
.page-hero-text { min-width: 0; }
.page-hero h1 {
    margin: 0;
    font-size: var(--text-xl);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand);
}
.page-hero p {
    margin: 6px 0 0;
    font-size: var(--text-sm);
    opacity: .85;
    color: var(--on-surface-strong);
}
.page-hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; flex-shrink: 0; }
.page-hero-actions .btn, .page-hero-actions a { text-decoration: none; white-space: nowrap; }

/* ── Page header ───────────────────────────────────────────────────────── */
/* Used by the 11 "Asset Assurance" pages (Assets, Contractors, Batches,
   Initiatives and their forms). The markup was there all along but these
   classes were never defined anywhere, so the title and its action buttons
   simply stacked. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.page-header h1 {
    margin: 0;
    font-size: var(--text-xl);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.page-header h1 .bi { color: var(--brand-ink); }
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.page-actions .btn, .page-actions a { text-decoration: none; white-space: nowrap; }

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6);
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .page-header { align-items: stretch; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
}
.empty-state-icon { font-size: 40px; display: block; margin-bottom: var(--space-3); opacity: .7; }

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .grid { grid-template-columns: 1fr; }
    .hero { padding: var(--space-4); border-radius: var(--radius-lg); }
    .content { padding: var(--space-3); padding-bottom: calc(var(--mobile-nav-h) + var(--space-5)); }
    .card { padding: var(--space-4); }
}

/* ══ QR scanner modal ═══════════════════════════════════════════════════ */

.qr-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.qr-modal--hidden { display: none; }
.qr-modal-box {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-3);
}
.qr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.qr-modal-close {
    background: var(--surface-2);
    border: 0;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 18px;
    cursor: pointer;
    color: var(--text);
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#qr-reader { border-radius: var(--radius-lg); overflow: hidden; width: 100%; }

/* ══ Mobile chrome ══════════════════════════════════════════════════════ */

/* Top bar — tells the user which screen they are on. */
.mobile-header {
    display: none;
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--surface-strong);
    border-bottom: 1px solid var(--brand);
    padding: 10px var(--space-4);
    align-items: center;
    gap: 10px;
}
.mobile-header img { width: 30px; height: auto; flex-shrink: 0; }
.mobile-header-title {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--brand);
    letter-spacing: .2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Bottom tab bar */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--surface-strong);
    border-top: 1px solid var(--brand);
    padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav-items { display: flex; justify-content: space-around; align-items: stretch; }
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--on-surface-strong);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .3px;
    transition: color .15s;
    min-width: 0;
}
.mobile-nav-item .mobile-nav-icon { font-size: 19px; line-height: 1; margin-bottom: 1px; }
.mobile-nav-item.nav-active { color: var(--brand); }
.mobile-nav-item.nav-active .mobile-nav-icon { filter: drop-shadow(0 0 4px var(--brand)); }
.mobile-nav-item-form { display: flex; flex: 1; margin: 0; padding: 0; }
.mobile-nav-item-form button.mobile-nav-item {
    background: none;
    border: 0;
    width: 100%;
    font-family: inherit;
    cursor: pointer;
}
button.mobile-nav-item { background: none; border: 0; font-family: inherit; cursor: pointer; }

/* "More" sheet — overflow nav items on mobile.
   Built on <details>/<summary> so it works without any JavaScript, because
   MainLayout renders in static SSR where click handlers would never fire. */
.nav-more { position: relative; }
.nav-more > summary {
    list-style: none;
    cursor: pointer;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::marker { content: ""; }
.nav-more[open] > summary { color: var(--brand); }

.nav-sheet {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: flex-end;
}
.nav-sheet-panel {
    background: var(--surface);
    width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-4) var(--space-4) calc(var(--mobile-nav-h) + var(--space-4));
    max-height: 75vh;
    overflow-y: auto;
}
.nav-sheet-grip {
    width: 42px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    margin: 0 auto var(--space-4);
}
.nav-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 12px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: var(--text-lg);
}
.nav-sheet-item:hover, .nav-sheet-item.nav-active { background: var(--surface-2); }
.nav-sheet-item.nav-active { color: var(--brand-ink); }

/* Show mobile chrome only on small screens — AFTER the display:none bases. */
@media (max-width: 900px) {
    .mobile-header { display: flex; }
    .mobile-nav { display: block; }

    /* The mobile header already names the screen, so a page's own top-level
       heading repeated it ("Capture" twice, "Map" twice, and so on).
       Visually hidden rather than display:none — Routes.razor runs
       <FocusOnNavigate Selector="h1">, and a display:none element cannot take
       focus, which would break focus handling on navigation. */
    .content > h1:first-child,
    .page-header > h1,
    .page-hero h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        clip-path: inset(50%);
        border: 0;
    }

    /* With the title hidden the action buttons own the row. */
    .page-header { margin-bottom: var(--space-3); }
    .page-hero { padding: 12px var(--space-4); margin-bottom: var(--space-3); }
    .page-hero p { margin-top: 0; }
    .page-hero-actions { width: 100%; }
    .page-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ══ Theme toggle ═══════════════════════════════════════════════════════ */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(233, 177, 33, .12);
    border: 1px solid rgba(233, 177, 33, .35);
    border-radius: var(--radius-pill);
    padding: 2px;
}
.theme-toggle button {
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--on-surface-strong);
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: 1;
    padding: 5px 9px;
    font-family: inherit;
    transition: background .15s, color .15s;
}
.theme-toggle button:hover { background: rgba(233, 177, 33, .2); }
.theme-toggle button.active { background: var(--brand); color: var(--text-on-brand); }

/* ══ User chip ══════════════════════════════════════════════════════════ */

.user-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 2px;
    color: var(--on-surface-strong);
    font-size: var(--text-xs);
    margin-bottom: 6px;
    overflow: hidden;
}
.user-icon { font-size: 14px; flex-shrink: 0; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-signout {
    width: 100%;
    background: transparent;
    border: 1px solid var(--brand);
    color: var(--brand);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    font-size: var(--text-xs);
    transition: background .15s;
}
.btn-signout:hover { background: rgba(233, 177, 33, .18); }

/* ══ Auth pages ═════════════════════════════════════════════════════════ */

.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--surface-strong);
}
.auth-wrap { width: 100%; max-width: 460px; padding: var(--space-5); }
.auth-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-3);
    border-top: 4px solid var(--brand);
}
.auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-6); }
.auth-logo img { width: 48px; height: auto; }
.auth-logo-name { font-size: var(--text-xl); font-weight: 800; color: var(--text); }
.auth-title { margin: 0 0 var(--space-5); font-size: var(--text-xl); font-weight: 800; color: var(--text); }
.auth-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: var(--space-4);
    font-size: var(--text-md);
}
.auth-validation { color: var(--danger); font-size: var(--text-xs); margin-top: 2px; }
.auth-check { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-size: var(--text-md); }
.auth-check input { width: auto; }
.auth-submit { width: 100%; margin-top: 6px; padding: 14px; font-size: 15px; }
.auth-switch { text-align: center; margin-top: var(--space-5); font-size: var(--text-md); color: var(--text-muted); }
.auth-switch a { color: var(--brand-ink); font-weight: 700; }

@media (max-width: 600px) {
    .auth-card { padding: var(--space-5); border-radius: var(--radius-lg); }
}

/* ══ Records: table on desktop, cards on mobile ═════════════════════════ */

.records-table-wrap { display: block; }
.records-cards-wrap { display: none; }

@media (max-width: 900px) {
    .records-table-wrap { display: none; }
    .records-cards-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
}

.record-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    box-shadow: var(--shadow-1);
}
.record-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.record-card-initiative {
    font-weight: 700;
    color: var(--text);
    font-size: var(--text-md);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.record-card-row { display: flex; gap: 8px; font-size: var(--text-sm); align-items: baseline; }
.record-card-label {
    font-weight: 700;
    color: var(--text-muted);
    min-width: 52px;
    flex-shrink: 0;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.record-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

/* ══ Misc ═══════════════════════════════════════════════════════════════ */

.maintenance-banner { border: 1px solid var(--warn-border); background: var(--warn-bg); }
.maintenance-banner strong { color: var(--warn); }

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}
.modal-content {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-3);
    border-top: 4px solid var(--brand);
}

/* ══ Print — always light, no app chrome ════════════════════════════════ */

@media print {
    :root {
        --bg: #fff;
        --surface: #fff;
        --surface-2: #fff;
        --surface-3: #f2f2f2;
        --surface-strong: #fff;
        --on-surface-strong: #000;
        --text: #000;
        --text-muted: #444;
        --border: #999;
        --border-strong: #666;
    }
    body { background: #fff; color: #000; }
    .side, .mobile-nav, .mobile-header, .theme-toggle { display: none !important; }
    .content { margin-left: 0 !important; width: 100% !important; padding: 0 !important; }
    .card { box-shadow: none; border: 1px solid #999; }
    .table th { background: #eee !important; color: #000 !important; }
}

/* ── Map popups ────────────────────────────────────────────────────────── */
/* Mapbox renders popups in its own container, outside our themed surfaces,
   so these are explicit rather than inherited. */
.mapboxgl-popup-content {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: 12px 14px;
}
.mapboxgl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }
.mapboxgl-popup-close-button { color: var(--text-muted); font-size: 18px; }

.map-popup { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 170px; }
.map-popup strong { font-size: 14px; }
.map-popup em { color: var(--text-muted); font-style: normal; font-size: 12px; }
.map-popup-meta { color: var(--text-muted); font-size: 11px; }
.map-popup-go {
    margin-top: 8px;
    font-weight: 700;
    color: var(--brand-ink);
    text-decoration: none;
}
.map-popup-go:hover { text-decoration: underline; }