/* ══════════════════════════════════════════════════════════════════════
   EEMO ADMIN PORTAL — app.css
   Shared global styles. Move all component <style> blocks here
   to fix CSS conflicts between Blazor Server pages.
══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ── */
:root {
    --navy: #0d2137;
    --navy-2: #112d47;
    --navy-3: #1e3a5f;
    --gold: #c8a84b;
    --gold-light: #e8cc76;
    --bg: #f0f4f8;
    --bg-card: #ffffff;
    --bg-icon: #eef2f6;
    --border: #dde4ea;
    --text: #0d2137;
    /* V3: both legacy grey text tokens now meet WCAG AA on white (they were #8faabf and #6a8aa0, which did not).
       They equal --text-tertiary and --text-secondary below, so every page still using the old names reads. */
    --text-muted: #5b6d82;
    --text-subtle: #4a5d73;
    --green: #2d7a5f;
    --green-bg: #e6f4ef;
    --red: #8b3a3a;
    --red-bg: #fdf0f0;
    --sidebar-w: 240px;
    --sidebar-w-col: 64px;
    --topbar-h: 60px;

    /* ── V3 semantic tokens (docs/interface/STALLTRACK_UI_V3_DIRECTION.md §3) ──
       Additive: the older tokens above stay for pages not yet on V3. Tune the civic
       blue here, never per page. Text tokens meet WCAG AA on --surface and --canvas. */
    --canvas: #f5f7fa;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --surface-hover: #f1f5fa;
    --border-strong: #cfd7e2;
    --text-secondary: #4a5d73;
    --text-tertiary: #5b6d82;
    --text-disabled: #9aa7b6;
    --accent: #1f5fbf;
    --accent-hover: #194f9f;
    --accent-soft: #eaf1fb;
    /* Civic-blue identity surfaces (login panel, identity bands): a deep and a slightly lighter step of the same blue.
       White text on either meets WCAG AA. Used for identity only, never behind data tables. */
    --civic-panel: #1d4c86;
    --civic-panel-deep: #163c6b;
    /* A very light blue tint for context bands and information surfaces on a white page. */
    --surface-blue-subtle: #f3f7fd;
    /* Hairline for a pale-blue supporting surface (Facility Snapshot cards and similar). */
    --border-blue-subtle: #d8e3f2;
    --accent-ring: rgba(31, 95, 191, .35);
    --elevation-1: 0 1px 2px rgba(13, 33, 55, .04);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* The portal is a light interface. The bundled site.min.css (DaisyUI) switches the root to a dark
   color-scheme when the OS prefers dark, which painted a dark canvas below any page shorter than the
   window. Pin the canvas and form-control scheme to the light design. */
html {
    background: var(--bg);
    color-scheme: light;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

/* Mobile sidebar drawer: locks page scroll while the drawer is open (toggled via
   stallTrackSetBodyScrollLocked in App.razor) so the backdrop can't scroll the page underneath. */
.st-scroll-locked {
    overflow: hidden;
    height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
.admin-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
}



/* ══════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════ */
.admin-main {
    position: relative;
    flex: 1;
    min-width: 0;
    width: calc(100% - var(--sidebar-w));
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.25s ease, width 0.25s ease;
}

.sidebar.collapsed ~ .admin-main {
    margin-left: var(--sidebar-w-col);
    width: calc(100% - var(--sidebar-w-col));
}

/* Ensure SVG icons inserted via MarkupString (raw SVG) are styled globally
   — these raw SVGs don't receive Blazor's CSS isolation scope attribute, so
   keep the svg rules global so they apply to injected markup. */
.nav-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Stronger global SVG reset for raw/injected SVG markup so presentation
   attributes don't render large/filled icons inside the sidebar. This
   ensures MarkupString-injected SVGs match the intended icon style. */
.sidebar .nav-item svg,
.sidebar .nav-item svg * {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Ensure facility card SVG icons (injected via MarkupString) are styled
   globally — these raw SVGs don't receive Blazor CSS isolation scope. */
.facility-card-icon svg,
.facility-card-icon svg * {
    width: 18px !important;
    height: 18px !important;
    stroke: var(--navy) !important;
    fill: none !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Global fix for injected SVGs inside page-scoped wrappers (MarkupString)
   — CSS isolation does not apply to raw injected SVG markup, so keep
   these selectors in the global app.css to ensure icons use tokens and
   do not render with a default black fill. */
.npm-hero-icon svg,
.npm-hero-icon svg *,
.npm-sec-icon svg,
.npm-sec-icon svg * {
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Active-state color for section tab icons (global because injected SVGs
   don't get Blazor CSS isolation scope). */
.npm-sec-tab.active .npm-sec-icon svg,
.npm-sec-tab.active .npm-sec-icon svg * {
    stroke: var(--gold) !important;
}


/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
.topbar {
    height: var(--topbar-h);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 16px;
}

.topbar-title {
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--navy);
}

.topbar-breadcrumb {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}

.breadcrumb-sep {
    opacity: 0.4;
}

.breadcrumb-active {
    color: var(--gold);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.topbar-date,
.topbar-period {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

    .topbar-date svg,
    .topbar-period svg {
        width: 14px;
        height: 14px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .topbar-period strong {
        color: var(--navy);
    }

.topbar-admin {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

    .topbar-admin:hover {
        background: var(--bg);
    }

/* AccountChip renders the topbar identity as an anchor; keep it visually identical to the div chip. */
a.topbar-admin.account-chip {
    text-decoration: none;
    color: var(--text);
}

/* Administrators see a non-interactive identity chip (account management is Head-only). */
.topbar-admin.account-chip-static {
    cursor: default;
}

    .topbar-admin.account-chip-static:hover {
        background: transparent;
    }

.admin-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold-light);
    font-family: 'EB Garamond', serif;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.admin-role {
    font-size: 9.5px;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════
   CONTENT AREA
══════════════════════════════════════════ */
.content-area {
    padding: 24px 28px;
    flex: 1;
}

/* ══════════════════════════════════════════
   KPI STRIP (shared by both pages)
══════════════════════════════════════════ */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.kpi-card {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow 0.2s;
}

    .kpi-card:hover {
        box-shadow: 0 4px 16px rgba(13,33,55,0.08);
    }

.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .kpi-icon svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.kpi-icon-blue {
    background: rgba(13,33,55,0.07);
}

    .kpi-icon-blue svg {
        stroke: var(--navy);
    }

.kpi-icon-red {
    background: var(--red-bg);
}

    .kpi-icon-red svg {
        stroke: var(--red);
    }

.kpi-icon-gold {
    background: rgba(200,168,75,0.12);
}

    .kpi-icon-gold svg {
        stroke: var(--gold);
    }

.kpi-icon-green {
    background: var(--green-bg);
}

    .kpi-icon-green svg {
        stroke: var(--green);
    }

.kpi-value {
    font-family: 'EB Garamond', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.kpi-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
}

.kpi-sub {
    font-size: 10px;
    color: var(--text-subtle);
    margin-top: 2px;
}

/* ══════════════════════════════════════════
   PANEL
══════════════════════════════════════════ */
.panel {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.panel-count {
    font-size: 11px;
    color: var(--text-muted);
}

.panel-link {
    font-size: 11px;
    color: var(--gold);
    font-weight: 500;
    cursor: pointer;
}

/* ══════════════════════════════════════════
   DATA TABLE (shared)
══════════════════════════════════════════ */
.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .data-table thead th {
        padding: 10px 16px;
        text-align: left;
        font-size: 9.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-muted);
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .data-table tbody tr {
        border-bottom: 1px solid var(--bg-icon);
        transition: background 0.12s;
    }

        .data-table tbody tr:hover {
            background: var(--bg);
        }

        .data-table tbody tr:last-child {
            border-bottom: none;
        }

    .data-table tbody td {
        padding: 12px 16px;
        color: var(--navy);
        vertical-align: middle;
    }

/* ══════════════════════════════════════════
   SHARED BADGES, PILLS, CELLS
══════════════════════════════════════════ */
.code-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(13,33,55,0.07);
    color: var(--navy);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pill {
    font-size: 9px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    display: inline-block;
    white-space: nowrap;
}

.pill-active {
    background: var(--green-bg);
    color: var(--green);
}

.pill-inactive {
    background: var(--bg-icon);
    color: var(--text-muted);
}

.pill-paid {
    background: var(--green-bg);
    color: var(--green);
}

.pill-unpaid {
    background: var(--bg-icon);
    color: var(--text-muted);
}

.pill-partial {
    background: rgba(200,168,75,0.15);
    color: #7a5c10;
}

.mono {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.amount-val {
    font-family: 'EB Garamond', serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
}

.td-contact {
    color: var(--text-subtle);
    white-space: nowrap;
}

.td-nature {
    color: var(--text-subtle);
    white-space: nowrap;
}

.td-date {
    color: var(--text-subtle);
    white-space: nowrap;
    font-size: 11.5px;
}

.td-center {
    text-align: center;
}

.td-name {
    font-weight: 500;
    white-space: nowrap;
}

.td-collector {
    color: var(--text-subtle);
}

.td-time {
    color: var(--text-subtle);
    white-space: nowrap;
    font-size: 11px;
}


/* ══════════════════════════════════════════
   BUTTONS (shared)
══════════════════════════════════════════ */
.btn-primary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 9px;
    background: var(--navy);
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gold-light);
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

    .btn-primary:hover {
        opacity: 0.88;
    }

    .btn-primary svg {
        width: 14px;
        height: 14px;
        stroke: var(--gold-light);
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.btn-ghost {
    padding: 9px 18px;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-ghost:hover {
        background: var(--bg);
    }

.btn-danger {
    padding: 9px 18px;
    border-radius: 9px;
    border: none;
    background: var(--red);
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

    .btn-outline:hover {
        background: var(--bg);
        color: var(--text-subtle);
        border-color: var(--text-muted);
    }

    .btn-outline svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

/* ══════════════════════════════════════════
   MODAL — FIX: was transparent due to CSS conflict
══════════════════════════════════════════ */
.eemo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 33, 55, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.eemo-modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(13,33,55,0.3);
    overflow: hidden;
}

.eemo-modal-wide {
    max-width: 820px;
}

.eemo-modal-sm {
    max-width: 420px;
}

.eemo-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.eemo-modal-title {
    font-family: 'EB Garamond', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
}

.eemo-modal-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.eemo-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

    .eemo-modal-close svg {
        width: 14px;
        height: 14px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.eemo-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.eemo-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg);
}

/* ══════════════════════════════════════════
   RESPONSIVE — shared modal shell as a bottom sheet (mobile/tablet ≤768px)
   Desktop (≥769px) is untouched — a floating centered dialog stays exactly as it is.
   Every modal built on .eemo-modal-overlay/.eemo-modal (across the whole app) gets this treatment.
══════════════════════════════════════════ */
@media (max-width: 768px) {
    .eemo-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .eemo-modal,
    .eemo-modal-wide,
    .eemo-modal-sm {
        max-width: 100%;
        width: 100%;
        max-height: 88vh;
        border-radius: 18px 18px 0 0;
    }

    .eemo-modal-header {
        padding: 16px 16px 14px;
    }

    .eemo-modal-body {
        padding: 16px;
    }

    .eemo-modal-footer {
        padding: 12px 16px;
        flex-direction: column-reverse;
    }

        /* Full-width, stacked action buttons regardless of the specific button class used (btn-primary,
           btn-ghost, btn-outline, or a bespoke one) — targets any direct child so every modal is covered. */
        .eemo-modal-footer > * {
            width: 100%;
        }
}

/* ══════════════════════════════════════════
   FORM ELEMENTS (used in modals)
══════════════════════════════════════════ */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

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

.form-input {
    padding: 10px 13px;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
}

    .form-input:focus {
        border-color: var(--gold);
        background: var(--bg-card);
    }

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

.form-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--red-bg);
    border: 1px solid rgba(139,58,58,0.2);
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 12px;
    color: var(--red);
    margin-top: 4px;
}

    .form-error svg {
        width: 14px;
        height: 14px;
        stroke: var(--red);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 12px;
}

    .empty-state svg {
        width: 40px;
        height: 40px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0.5;
    }

.empty-title {
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-muted);
}

.empty-sub {
    font-size: 12px;
    color: var(--text-subtle);
}

/* ══════════════════════════════════════════
   SECTION HEADER (Dashboard)
══════════════════════════════════════════ */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-eyebrow {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 3px;
}

.section-heading {
    font-family: 'EB Garamond', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
}


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

.text-gold {
    color: var(--gold);
}

/* Restored collector/vendor shared styles (moved earlier to component css) */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.search-box {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    height: 38px;
    min-width: 260px;
    transition: border-color 0.15s;
}

    .search-box:focus-within {
        border-color: var(--gold);
    }

    .search-box svg {
        width: 15px;
        height: 15px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .search-box input {
        flex: 1;
        border: none;
        outline: none;
        font-family: 'DM Sans', sans-serif;
        font-size: 12.5px;
        color: var(--text);
        background: transparent;
    }

        .search-box input::placeholder {
            color: var(--text-muted);
        }

.search-clear {
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.filter-tabs {
    display: flex;
    gap: 6px;
}

.filter-tab {
    font-size: 11px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

    .filter-tab.active {
        background: var(--navy);
        color: var(--gold-light);
        border-color: var(--navy);
    }

.row-inactive td {
    opacity: 0.55;
}

.action-btns {
    display: flex;
    gap: 4px;
}

.action-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

    .action-btn:hover {
        background: var(--border);
    }

    .action-btn svg {
        width: 13px;
        height: 13px;
        stroke: var(--text-subtle);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.action-danger {
    border-color: rgba(139,58,58,0.2);
    background: var(--red-bg);
}

    .action-danger svg {
        stroke: var(--red);
    }

    .action-danger:hover {
        background: #f5c6c6;
    }

.action-success {
    border-color: rgba(45,122,95,0.2);
    background: var(--green-bg);
}

    .action-success svg {
        stroke: var(--green);
    }

.facility-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fac-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    transition: all 0.15s;
}

    .fac-checkbox:hover {
        border-color: var(--gold);
        background: rgba(200,168,75,0.05);
    }

    .fac-checkbox.checked {
        border-color: var(--gold);
        background: rgba(200,168,75,0.08);
    }

.fac-check-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.fac-checkbox.checked .fac-check-box {
    background: var(--green);
    border-color: var(--green);
}

.fac-check-box svg {
    width: 11px;
    height: 11px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fac-check-name {
    font-size: 13px;
    color: var(--navy);
    font-weight: 500;
    flex: 1;
}

.activity-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.act-stat {
    background: var(--bg);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.act-stat-val {
    font-family: 'EB Garamond', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}

.act-stat-key {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.act-section-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.confirm-text {
    font-size: 13.5px;
    color: var(--text-subtle);
    line-height: 1.6;
}

/* ══════════════════════════════════════════
   PAYMENT MODAL STYLING
══════════════════════════════════════════ */
.pay-fee-block {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--bg);
    border-radius: 10px;
    border-left: 3px solid var(--gold);
}

.pay-fee-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pay-fee-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pay-fee-rate {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.pay-record-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(13, 33, 55, 0.08);
}

    .pay-record-row:last-child {
        border-bottom: none;
    }

.pay-record-key {
    color: var(--text-subtle);
    font-weight: 500;
}

.pay-record-val {
    color: var(--navy);
    font-weight: 600;
    font-family: 'EB Garamond', serif;
}

    .pay-record-val.paid {
        color: var(--green);
    }

    .pay-record-val.partial {
        color: #b87333;
    }

    .pay-record-val.unpaid {
        color: var(--red);
    }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1200px) {
    .kpi-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .bottom-row {
        grid-template-columns: 1fr;
    }

    .panel-narrow {
        order: -1;
    }
}

@media (max-width: 900px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }

    .activity-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Sidebar becomes an off-canvas drawer on mobile — handled in Sidebar.razor.css (scoped, so it can
       override the sidebar's own scoped base rules; a global .sidebar rule here can't win on specificity).
       Content spans the full width. */
    .admin-main {
        margin-left: 0;
        width: 100%;
    }

    .kpi-strip {
        grid-template-columns: 1fr 1fr;
    }

    .facility-grid {
        grid-template-columns: 1fr;
    }

    .topbar-date,
    .topbar-period {
        display: none;
    }

    .content-area {
        padding: 16px;
    }

    .topbar {
        height: auto;
        min-height: var(--topbar-h);
        padding: 10px 16px 10px 58px;   /* reserve the top-left for the drawer hamburger */
    }

    /* The facility name can wrap to two lines on a narrow phone (e.g. "Tampak Commercial Center") — let
       the topbar grow to fit instead of clipping the title/breadcrumb into the content below it. */
    .topbar-title {
        font-size: 15px;
        line-height: 1.25;
    }

    /* In-page back buttons in the topbar (every facility/report page has its own class, e.g. .tcc-back-btn,
       .npm-back-btn, .ncc-back-btn, .back-btn…) are redundant with the drawer hamburger + the breadcrumb's
       own "Dashboard" link, and they squeeze a wrapping title into a narrower column. Drop them on mobile
       via an attribute selector so every page is covered without touching a dozen files; the title gets
       the full width. */
    .topbar-left > a[class$="-back-btn"],
    .topbar-left > a.back-btn {
        display: none;
    }

    .toolbar-left {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Section header (title + actions) stacks so the heading doesn't get squeezed into one-word-per-line. */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Wide tables scroll horizontally within their panel instead of overflowing the page. */
    .panel {
        overflow-x: auto;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   ACCOUNT SETUP & LOGIN — SHARED STYLES
   Used by both AccountSetup.razor and Login.razor
══════════════════════════════════════════════════════════════════════ */

/* ── Root Layout ── */
.setup-root {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── LEFT PANEL — Branding ── */
.setup-left {
    width: 360px;
    height: 100vh;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
}

    .setup-left::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px);
    }

.setup-left-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 48px 32px;
    text-align: center;
}

.setup-seal {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seal-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 175, 55, 0.4);
}

    .seal-ring.outer {
        inset: 0;
    }

    .seal-ring.inner {
        inset: 10px;
        border-color: rgba(212, 175, 55, 0.2);
    }

.setup-seal img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    border-radius: 50%;
}

.setup-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setup-brand-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.setup-brand-city {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    margin-bottom: 4px;
}

.setup-brand-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 4px;
    line-height: 1;
}

.setup-brand-sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    font-weight: 400;
}

.setup-left-footer {
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}

.setup-system-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.setup-version {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
}

/* ── RIGHT PANEL — Form ── */
.setup-right {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 32px 32px;
}

.setup-form-wrap {
    width: 100%;
    max-width: 560px;
}

/* ── Step Indicator ── */
.setup-step-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
}

.setup-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    flex-shrink: 0;
    transition: all 0.2s;
}

.setup-step.active .step-dot {
    background: var(--navy);
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(13, 33, 55, 0.12);
}

.step-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.setup-step.active .step-label {
    color: var(--navy);
    font-weight: 600;
}

.setup-step-line {
    flex: 1;
    height: 1px;
    background: var(--border);
    margin: 0 10px;
    min-width: 24px;
}

/* ── Form Header ── */
.setup-form-header {
    margin-bottom: 24px;
}

.setup-form-eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    margin-bottom: 8px;
}

.setup-form-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 8px;
}

.setup-form-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ── Notice Banner ── */
.setup-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(13, 33, 55, 0.04);
    border: 1px solid rgba(13, 33, 55, 0.12);
    border-left: 3px solid var(--navy);
    border-radius: 6px;
    margin-bottom: 28px;
    font-size: 12.5px;
    color: var(--text-subtle);
    line-height: 1.5;
}

    .setup-notice svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--navy);
        opacity: 0.6;
    }

/* ── Form Fields ── */
.setup-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-required {
    color: var(--red);
    margin-left: 2px;
}

.form-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.form-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input-icon {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.form-input-password {
    padding-right: 40px;
}

/* Eye toggle */
/* Shared by PasswordRevealButton, which lives in its own component — so this rule must be GLOBAL. A page's scoped
   .form-eye-btn compiles to .form-eye-btn[b-xxxxx] and never matches another component's markup.

   top/transform are load-bearing. Without them an absolutely positioned element with no vertical offset keeps its STATIC
   position, which lands below the field in a block wrapper; it only appeared centred where the wrapper happened to be a
   centring flex container. Stating the offset makes the control sit inside the field's right edge whatever the wrapper is. */
.form-eye-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    transition: color 0.15s;
    z-index: 10;
}

    .form-eye-btn:hover {
        color: var(--navy);
    }

    .form-eye-btn svg {
        width: 16px;
        height: 16px;
        pointer-events: none;
    }

    .form-eye-btn span {
        pointer-events: none;
        user-select: none;
    }

/* ── Password Strength ── */
.pw-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -6px;
}

.pw-strength-bars {
    display: flex;
    gap: 4px;
    flex: 1;
}

.pw-bar {
    height: 3px;
    flex: 1;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.2s;
}

.pw-bar-fill.pw-weak {
    background: var(--red);
}

.pw-bar-fill.pw-fair {
    background: #b87333;
}

.pw-bar-fill.pw-good {
    background: #4a7c59;
}

.pw-bar-fill.pw-strong {
    background: var(--green);
}

.pw-strength-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

    .pw-strength-label.pw-weak {
        color: var(--red);
    }

    .pw-strength-label.pw-fair {
        color: #b87333;
    }

    .pw-strength-label.pw-good {
        color: #4a7c59;
    }

    .pw-strength-label.pw-strong {
        color: var(--green);
    }

/* ── Error ── */
.setup-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--red-bg);
    border: 1px solid var(--red);
    border-radius: 7px;
    font-size: 13px;
    color: var(--red);
    font-weight: 500;
}

    .setup-error svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }

/* ── Submit Button ── */
.setup-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 24px;
    background: var(--navy);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

    .setup-submit svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .setup-submit:hover:not(:disabled) {
        background: #162840;
        transform: translateY(-1px);
    }

    .setup-submit:active:not(:disabled) {
        transform: translateY(0);
    }

    .setup-submit:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

.setup-submit-loading {
    opacity: 0.75;
}

/* Spinner */
.setup-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

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

/* ── Form Footer ── */
.setup-form-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.3px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .setup-root {
        flex-direction: column;
    }

    .setup-left {
        width: 100%;
        min-height: auto;
        padding: 32px;
    }

    .setup-left-inner {
        flex-direction: row;
        text-align: left;
        gap: 20px;
        padding: 0;
    }

    .setup-seal {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }

    .setup-brand-title {
        font-size: 32px;
    }

    .setup-left-footer {
        display: none;
    }

    .setup-right {
        padding: 32px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   RECORD TRIP MODAL - NAVY GRADIENT HEADER OVERRIDE
══════════════════════════════════════════════════════════════════════ */

.eemo-modal-header.trm-record-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    border-bottom: 1px solid rgba(200, 168, 75, 0.2);
}

    .eemo-modal-header.trm-record-header .eemo-modal-title {
        color: #fff;
    }

    .eemo-modal-header.trm-record-header .eemo-modal-sub {
        color: rgba(255, 255, 255, 0.65);
    }

    .eemo-modal-header.trm-record-header .eemo-modal-close {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
    }

        .eemo-modal-header.trm-record-header .eemo-modal-close:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.25);
        }

        .eemo-modal-header.trm-record-header .eemo-modal-close svg {
            stroke: #fff;
        }

/* ── Skeleton loading helpers (layout only; shimmer lives in Skeleton.razor.css) ── */
.sk-stack { display: flex; flex-direction: column; gap: 0.7rem; }
.sk-stack-sm { display: flex; flex-direction: column; gap: 0.5rem; }
.sk-inline { display: flex; align-items: center; gap: 0.65rem; }
.sk-inline > .sk-grow { flex: 1; }
.sk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.sk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sk-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; }
.sk-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }


/* ══════════════════════════════════════════════════════════════════════
   GLOBAL PRINT — report pages print as clean documents: no sidebar, no
   topbar/controls/cards (anything marked .no-print), no page chrome.
   ══════════════════════════════════════════════════════════════════════ */
/* Print chrome: hide sidebar + any .no-print element. The authoritative @page (margin:0,
   which removes the browser's date/URL/page-number) lives in print.css — loaded LAST so it
   overrides the per-page @page rules that CSS-isolation leaks globally. */
@media print {
    .sidebar { display: none !important; }
    .sidebar-hamburger, .sidebar-backdrop { display: none !important; }
    .admin-main { padding: 0 !important; margin: 0 !important; overflow: visible !important; }
    /* The shell is a full-height flex column on screen (min-height: 100vh). On paper a viewport height IS a page
       height, so that floor kept the layout box a whole page tall even when the sheet inside it ended halfway down,
       and the leftover height printed as a trailing blank sheet. Reported on the stallholder roster. */
    .admin-layout { display: block !important; min-height: 0 !important; }
    /* The same viewport floor on the main column (min-height: 100vh) printed one-page statements onto a second, blank
       sheet once the print helper's body padding was added (Official Monthly Income, 2026-10-02). */
    .admin-main { min-height: 0 !important; }
    .no-print { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   BOOT SPLASH — branded cover for fallback circuit-connect states. When
   prerendered app markup exists, App.razor hides this immediately; otherwise
   MainLayout removes it after the first interactive render.
   ══════════════════════════════════════════════════════════════════════ */
.st-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: var(--bg, #f0f4f8);
    opacity: 1;
    transition: opacity .45s ease;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}
.st-splash.st-hide { opacity: 0; pointer-events: none; }

.st-splash-ring {
    position: relative;
    width: 124px;
    height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.st-splash-logo {
    width: 104px;
    height: 104px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(13, 33, 55, .18));
}
.st-splash-title {
    letter-spacing: .5em;
    padding-left: .5em;
    font-weight: 700;
    font-size: 15px;
    color: var(--navy, #0d2137);
}
.st-splash-bar {
    width: 240px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--navy, #0d2137) 12%, transparent);
    overflow: hidden;
}
.st-splash-bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold, #c8a84b), var(--gold-light, #e8cc76));
    animation: st-splash-bar 1.2s ease-in-out infinite;
}
.st-splash-sub {
    color: var(--text-subtle, #6a8aa0);
    font-size: 13.5px;
}
@keyframes st-splash-bar {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
    .st-splash-bar span { animation: none; }
}

/* ── Reusable table/list row skeleton (reads like real rows, not bare blocks) ── */
.sk-rows { display: flex; flex-direction: column; }
.sk-rows .sk-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    gap: 22px;
    padding: 14px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.sk-rows .sk-row:last-child { border-bottom: none; }
.sk-rows .sk-head { padding-bottom: 12px; }

/* ── Add-OR modal text (NPM daily collection) ── */
.or-modal-note { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
.or-modal-note strong { color: var(--navy); }
.or-modal-err { margin-top: 10px; color: var(--red); font-size: 12.5px; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   SCROLLBARS — the platform's defaults are a heavy grey trough that reads
   as chrome next to the portal's own surfaces. Drawn thin and in the
   office's ink instead. Purely visual: scrolling behaviour is untouched,
   and the bars stay wide enough to grab with a mouse.
   ══════════════════════════════════════════════════════════════════════ */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--navy) 26%, transparent) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--navy) 22%, transparent);
    border-radius: 999px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--navy) 38%, transparent);
    }

::-webkit-scrollbar-corner {
    background: transparent;
}

@media print {
    /* Nothing scrolls on paper. */
    ::-webkit-scrollbar {
        display: none;
    }
}


/* ── Show/hide for masked password fields ─────────────────────────────────────────────────────────
   The sign-in pages already had .form-input-wrap for this. The dialogs elsewhere — two-factor,
   restore prompts, payment credentials — use their own input classes (.mfa-input, .bk-input), so
   they need a positioned wrapper of their own rather than borrowing a form-layout class that also
   brings an icon slot. Only positioning lives here; the button itself is .form-eye-btn above.

   The padding keeps the text clear of the eye: an input whose value runs under the button is worse
   than no reveal at all, because the end of a long password becomes unreadable either way. */
.pw-reveal-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    /* The input FILLS the wrapper, and the eye sits inside its right edge.
       It used to be left without a width, on the reasoning that these wrappers appear both in block contexts and in
       flex rows with fixed-width inputs. But the wrapper itself is the flex item in those rows, so the input needs to
       fill whatever the wrapper was given - and without that it fell back to an input's intrinsic ~20 characters while
       the absolutely positioned button stayed at the wrapper's right edge. The result was a short box with the eye
       floating a long way from it, which is what the office reported.
       `flex` rather than `width: 100%` so the padding-right below is not added on top of a full width, and min-width: 0
       so a long value cannot push the wrapper wider than its column. */
    .pw-reveal-wrap > input {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 38px;
    }

/* ══════════════════════════════════════════
   WAITING SEAL SLOT
══════════════════════════════════════════ */
/* Shown in the municipal seal card of a municipality that has not uploaded its seal yet. Onboarding is where that
   is filled in, so the card keeps its place; this only has to look like an empty slot rather than a seal.

   It used to be filled with StallTrack's own seal under the LGU's name - the product's mark twice over, one of
   them labelled as a municipal seal - which is the fault this replaces.

   GLOBAL, not scoped, and deliberately so: three components render that card (the sign-in page, the shared
   AuthBrandPanel behind forgot/reset/verify, and account setup), and Blazor's scoped CSS never crosses a
   component boundary. A copy per stylesheet is how the four existing copies of .government-logo-card came to
   exist, and how they will drift.

   Sized to sit inside the 96px circle with room to breathe, and drawn in the muted text colour so it recedes
   instead of competing with the StallTrack mark beside it. No new colour is introduced. */
.seal-placeholder {
    /* Filling the card and padding inwards centres the glyph by geometry. The card is not a flex container, and
       making it one would change how the real seal sits in every other municipality's card - so the centring is
       done here, where it affects nothing else. */
    width: 100%;
    height: 100%;
    padding: 27px;
    box-sizing: border-box;
    color: var(--text-muted, #6a8aa0);
    opacity: 0.45;
}

/* ══════════════════════════════════════════════════════════════════════
   V3 WORKSPACE LAYER — docs/interface/STALLTRACK_UI_V3_DIRECTION.md
   Small shared vocabulary for V3 workspaces (first used by ECF / WCF).
   Global on purpose: every V3 page renders the same panels, registers,
   buttons, fields, notices and dialogs, so they are defined once here
   instead of being copied into each scoped stylesheet.
══════════════════════════════════════════════════════════════════════ */
.v3-page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    gap: 20px;
    padding: 24px 32px 48px;
    background: var(--canvas);
    color: var(--text);
    font-size: 0.875rem;
}

.v3-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.v3-muted {
    color: var(--text-tertiary);
}

.v3-block {
    display: block;
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
}

/* ── Panel: one white working surface ── */
.v3-panel {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

.v3-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.v3-panel-header h2 {
    margin: 0;
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.v3-panel-meta {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
}

.v3-panel-body {
    padding: 16px 20px;
}

.v3-panel-note {
    margin: 0;
    padding: 10px 20px 14px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* ── Toolbar: search, then filters ── */
.v3-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

.v3-search {
    position: relative;
    display: flex;
    flex: 1 1 260px;
    max-width: 420px;
    align-items: center;
}

.v3-search svg {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-tertiary);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.v3-input,
.v3-search input,
.v3-select,
.v3-field input,
.v3-field select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.8125rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.v3-search input {
    padding-left: 34px;
}

.v3-select {
    width: auto;
    min-width: 160px;
}

/* Selects: one chevron, one padding rule. The chevron colour is --text-tertiary written out, because a
   custom property cannot reach inside a data URI. */
.v3-select,
.v3-field select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6d82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 16px;
    cursor: pointer;
    appearance: none;
}

/* Where the browser supports customizable selects (Edge/Chrome), the open list becomes a V3 surface instead of
   the grey OS popup. Other browsers keep their native list — nothing else depends on this. */
@supports (appearance: base-select) {
    .v3-select,
    .v3-field select,
    .v3-select::picker(select),
    .v3-field select::picker(select) {
        appearance: base-select;
    }

    .v3-select::picker-icon,
    .v3-field select::picker-icon {
        display: none;
    }

    .v3-select::picker(select),
    .v3-field select::picker(select) {
        margin-top: 4px;
        padding: 4px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: 0 12px 32px -8px rgba(13, 33, 55, .22), var(--elevation-1);
    }

    .v3-select option,
    .v3-field select option {
        padding: 8px 10px;
        border-radius: 6px;
        color: var(--text);
        font-size: 0.8125rem;
    }

    .v3-select option:hover,
    .v3-select option:focus-visible,
    .v3-field select option:hover,
    .v3-field select option:focus-visible {
        background: var(--surface-hover);
        color: var(--accent);
        outline: none;
    }

    .v3-select option:checked,
    .v3-field select option:checked {
        background: var(--accent-soft);
        color: var(--accent);
        font-weight: 600;
    }

    .v3-select option::checkmark,
    .v3-field select option::checkmark {
        color: var(--accent);
    }
}

.v3-input:focus,
.v3-search input:focus,
.v3-select:focus,
.v3-field input:focus,
.v3-field select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.v3-input:disabled,
.v3-select:disabled,
.v3-field input:disabled,
.v3-field select:disabled {
    background: var(--surface-muted);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* ── Field: label above control ── */
.v3-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.v3-field > span:first-child {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.v3-field input[type="number"] {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.v3-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

/* ── Buttons: one primary per task, the rest quiet ── */
.v3-btn {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.v3-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.v3-btn-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--surface);
}

.v3-btn-primary:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--surface);
}

.v3-btn-sm {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.75rem;
}

.v3-btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Related secondary actions joined into one control (e.g. Refresh · Accounts · Report). */
.v3-btn-group {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

.v3-btn-group > .v3-btn {
    border: 0;
    border-radius: 0;
    color: var(--text-secondary);
}

.v3-btn-group > .v3-btn + .v3-btn {
    border-left: 1px solid var(--border);
}

.v3-btn-group > .v3-btn:hover {
    background: var(--surface-hover);
    color: var(--accent);
}

.v3-btn-group > .v3-btn:focus-visible {
    outline-offset: -3px;
}

.v3-btn:disabled,
.v3-btn:disabled:hover {
    border-color: var(--border);
    background: var(--surface-muted);
    color: var(--text-disabled);
    cursor: not-allowed;
}

.v3-btn:focus-visible,
.v3-table-wrap:focus-visible,
.v3-details summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Notices ── */
.v3-notice {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.v3-notice-error {
    border-left-color: var(--red);
    background: var(--red-bg);
    color: var(--red);
}

/* ── Register table: horizontal structure only ── */
.v3-table-wrap {
    overflow-x: auto;
}

.v3-table-wrap-tall {
    max-height: 26rem;
    overflow-y: auto;
}

.v3-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.v3-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.v3-table td {
    padding: 11px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    color: var(--text);
    line-height: 1.4;
    vertical-align: top;
}

.v3-table th:first-child,
.v3-table td:first-child {
    padding-left: 20px;
}

.v3-table th:last-child,
.v3-table td:last-child {
    padding-right: 20px;
}

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

.v3-table tbody tr:hover td {
    background: var(--surface-hover);
}

.v3-table .v3-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.v3-table .v3-strong {
    font-weight: 600;
}

.v3-table .v3-empty,
.v3-table tbody tr:hover .v3-empty {
    padding: 28px 20px;
    background: var(--surface);
    color: var(--text-tertiary);
    text-align: center;
}

/* Empty/loading message block used inside panels and table cells. */
.v3-empty-block {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: var(--text-tertiary);
    text-align: center;
}

.v3-empty-block svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--border-strong);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.v3-state {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ── Expandable detail inside a register row ── */
.v3-details summary {
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
}

.v3-details ul {
    display: grid;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.v3-details li {
    display: grid;
    gap: 2px;
}

/* ── Label / value list ── */
.v3-facts {
    display: grid;
    gap: 10px;
    margin: 0;
}

.v3-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.v3-facts dt {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.v3-facts dd {
    margin: 0;
    color: var(--text);
    font-weight: 600;
    text-align: right;
}

/* ── Dialog ── */
.v3-modal-backdrop {
    position: fixed;
    z-index: 900;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(13, 33, 55, .38);
}

.v3-modal {
    display: flex;
    width: min(100%, 32rem);
    max-height: calc(100vh - 32px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 24px 48px -12px rgba(13, 33, 55, .32);
}

.v3-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.v3-modal-header h2 {
    margin: 0;
    color: var(--navy);
    font-size: 1rem;
    font-weight: 700;
}

.v3-modal-body {
    display: grid;
    gap: 16px;
    padding: 18px 20px;
    overflow-y: auto;
}

.v3-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}

/* ── Right-side drawer: the modal parts (header, scrolling body, fixed footer) docked to the right edge, for work that
   needs more room than a dialog — batch assignment, a revenue source's details and history. ── */
.v3-modal-backdrop.v3-drawer-backdrop {
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
}

.v3-modal.v3-drawer {
    width: min(100%, 38rem);
    height: 100vh;
    max-height: 100vh;
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: -16px 0 40px -16px rgba(13, 33, 55, .28);
}

.v3-drawer.v3-drawer-wide {
    width: min(100%, 46rem);
}

.v3-drawer .v3-modal-body {
    flex: 1 1 auto;
    align-content: start;
    padding: 20px 24px;
}

.v3-drawer .v3-modal-header,
.v3-drawer .v3-modal-footer {
    padding-inline: 24px;
}

.v3-drawer-section {
    display: grid;
    gap: 12px;
}

.v3-drawer-section + .v3-drawer-section {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.v3-drawer-section > h3 {
    margin: 0;
    color: var(--navy);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* ── Period picker (label + month input) used in workspace headers ── */
.v3-period {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
}

.v3-period input {
    width: auto;
    min-height: 36px;
    padding: 6px 8px;
}

/* ── Error notice with a retry action ── */
.v3-notice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

/* ── Report sheet: the printable document inside a V3 report page ── */
.v3-report-sheet {
    display: grid;
    gap: 22px;
    padding: 28px 32px 32px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

.v3-report-section {
    display: grid;
    gap: 8px;
    break-inside: avoid;
}

.v3-report-section h3 {
    margin: 0;
    color: var(--navy);
    font-size: 0.875rem;
    font-weight: 700;
}

.v3-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.v3-report-table th,
.v3-report-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.v3-report-table thead th {
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.v3-report-table tfoot th,
.v3-report-table tfoot td {
    border-top: 1px solid var(--border-strong);
    border-bottom: 2px solid var(--border-strong);
    font-weight: 700;
}

.v3-report-table .v3-num {
    text-align: right;
    white-space: nowrap;
}

.v3-report-note {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    line-height: 1.45;
}

@media print {
    .v3-page {
        min-height: 0;
        padding: 0;
        background: #fff;
    }

    .v3-report-sheet {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .v3-report-table thead {
        display: table-header-group;
    }

    .v3-report-table thead th {
        background: #f3f5f8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .v3-report-table tr {
        break-inside: avoid;
    }
}

@media (max-width: 768px) {
    .v3-report-sheet {
        padding: 20px 16px;
    }
}

@media (max-width: 768px) {
    /* Clear the fixed drawer button the sidebar places at the top-left on narrow screens. */
    .v3-page {
        padding: 64px 16px 40px;
    }

    .v3-panel-header,
    .v3-toolbar {
        padding-right: 14px;
        padding-left: 14px;
    }

    .v3-table th:first-child,
    .v3-table td:first-child {
        padding-left: 14px;
    }

    .v3-table th:last-child,
    .v3-table td:last-child {
        padding-right: 14px;
    }

    .v3-search {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v3-btn,
    .v3-input,
    .v3-search input,
    .v3-select,
    .v3-field input,
    .v3-field select {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   V3 ALIGNMENT FOR SHARED LEGACY CLASSES
   The facility workspaces (NPM, TCC, NCC, BBQ, ICE, SLH, TRM, TPM), their dialogs and several older pages are built
   on the shared classes defined earlier in this file (topbar, data-table, btn-*, eemo-modal-*, form-*, search-box,
   filter-tab, ...). These rules bring those classes onto the V3 tokens — DM Sans throughout, readable secondary text,
   civic-blue interaction, quiet surfaces — without touching any page's markup or logic. Same selectors, declared
   later, so they win; delete this block to restore the previous look.
══════════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.topbar {
    padding: 0 32px;
    background: var(--surface);
}

.topbar-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.topbar-breadcrumb {
    color: var(--text-tertiary);
    font-size: 12px;
}

    .topbar-breadcrumb a,
    .breadcrumb-link {
        color: var(--text-secondary);
        text-decoration: none;
    }

        .topbar-breadcrumb a:hover,
        .breadcrumb-link:hover {
            color: var(--accent);
        }

.breadcrumb-active {
    color: var(--text-tertiary);
}

.topbar-date,
.topbar-period {
    color: var(--text-tertiary);
    font-size: 12px;
}

    .topbar-date svg,
    .topbar-period svg {
        stroke: var(--text-tertiary);
    }

.topbar-admin:hover {
    background: var(--surface-hover);
}

.admin-avatar {
    background: var(--navy);
    color: var(--surface);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.admin-role {
    color: var(--text-tertiary);
    font-size: 11px;
}

.content-area {
    padding: 24px 32px 48px;
}

/* ── Figures, panels ── */
.kpi-card {
    border-radius: 10px;
    box-shadow: var(--elevation-1);
}

    .kpi-card:hover {
        box-shadow: var(--elevation-1);
    }

.kpi-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.kpi-label {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.kpi-sub {
    color: var(--text-tertiary);
    font-size: 11px;
}

.panel {
    border-radius: 10px;
    box-shadow: var(--elevation-1);
}

.panel-header {
    background: var(--surface);
}

.panel-title {
    font-size: 15px;
    font-weight: 700;
}

.panel-count {
    color: var(--text-tertiary);
    font-size: 12px;
}

.panel-link {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

/* ── Register tables ── */
.data-table {
    font-size: 13px;
}

    .data-table thead th {
        padding: 10px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--surface-muted);
        color: var(--text-tertiary);
        font-size: 11px;
        letter-spacing: .06em;
    }

    .data-table tbody tr {
        border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    }

        .data-table tbody tr:hover {
            background: var(--surface-hover);
        }

    .data-table tbody td {
        color: var(--text);
    }

.code-badge {
    padding: 2px 7px;
    border: 1px solid var(--border-strong);
    background: var(--surface-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}

.status-pill {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.pill-unpaid,
.pill-inactive {
    background: var(--surface-muted);
    color: var(--text-secondary);
}

/* A reversed / voided record, and an open (not yet collected) obligation. Always paired with their text label. */
.pill-danger {
    background: var(--red-bg);
    color: var(--red);
}

.pill-pending {
    background: var(--accent-soft);
    color: var(--accent);
}

.mono {
    color: var(--text-secondary);
    font-size: 12px;
}

.amount-val {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.td-contact,
.td-nature,
.td-date,
.td-collector,
.td-time {
    color: var(--text-secondary);
}

/* ── Buttons: civic blue primary, quiet secondary ── */
.btn-primary {
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
    font-size: 13px;
    transition: background-color .15s ease, border-color .15s ease;
}

    .btn-primary:hover {
        border-color: var(--accent-hover);
        background: var(--accent-hover);
        opacity: 1;
    }

    .btn-primary svg {
        stroke: var(--surface);
    }

.btn-ghost,
.btn-outline {
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .btn-ghost:hover,
    .btn-outline:hover {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.btn-danger {
    border-radius: 6px;
    font-size: 13px;
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-outline:focus-visible,
.btn-danger:focus-visible,
.action-btn:focus-visible,
.filter-tab:focus-visible,
.eemo-modal-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-primary:disabled,
.btn-ghost:disabled,
.btn-outline:disabled {
    border-color: var(--border);
    background: var(--surface-muted);
    color: var(--text-disabled);
    cursor: not-allowed;
}

.action-btn {
    border-color: var(--border);
    background: var(--surface);
}

    .action-btn:hover {
        border-color: var(--accent);
        background: var(--accent-soft);
    }

    .action-btn svg {
        stroke: var(--text-secondary);
    }

    .action-btn:hover svg {
        stroke: var(--accent);
    }

/* ── Dialogs ── */
.eemo-modal-overlay {
    background: rgba(13, 33, 55, .38);
}

.eemo-modal {
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 48px -12px rgba(13, 33, 55, .32);
}

.eemo-modal-header {
    padding: 16px 20px;
}

.eemo-modal-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.eemo-modal-sub {
    color: var(--text-tertiary);
    font-size: 12px;
}

.eemo-modal-close {
    border-color: transparent;
    background: transparent;
}

    .eemo-modal-close:hover {
        background: var(--surface-hover);
    }

    .eemo-modal-close svg {
        stroke: var(--text-secondary);
    }

.eemo-modal-body {
    padding: 18px 20px;
}

.eemo-modal-footer {
    padding: 12px 20px;
    background: var(--surface-muted);
}

/* ── Forms ── */
.form-label {
    color: var(--text-secondary);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.form-input {
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
}

    .form-input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-ring);
    }

    .form-input::placeholder {
        color: var(--text-tertiary);
    }

.form-error {
    border-radius: 6px;
}

/* ── Empty states, section headings ── */
.empty-state svg {
    stroke: var(--border-strong);
    opacity: 1;
}

.empty-title {
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
}

.empty-sub {
    color: var(--text-tertiary);
    font-size: 13px;
}

.section-eyebrow {
    color: var(--text-tertiary);
    font-size: 11px;
    letter-spacing: .08em;
}

.section-heading {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

/* ── Search and filters ── */
.search-box {
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
}

    .search-box:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-ring);
    }

    .search-box svg {
        stroke: var(--text-tertiary);
    }

    .search-box input {
        font-size: 13px;
    }

        .search-box input::placeholder {
            color: var(--text-tertiary);
        }

.filter-tab {
    border-color: var(--border-strong);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

    .filter-tab:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .filter-tab.active {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

/* Gold text fails contrast on white; the severity meaning is kept in the readable amber used for partial states. */
.text-gold {
    color: #8a6d1b;
}

/* NPM section tabs: the active icon follows the civic-blue active state. */
.npm-sec-tab.active .npm-sec-icon svg,
.npm-sec-tab.active .npm-sec-icon svg * {
    stroke: var(--accent) !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .btn-ghost,
    .btn-outline {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   AUTH SHELL — Mobile/Web V3 (Login, Account setup, Activate, Forgot/Reset password, Verify email)
   The six sign-in pages share the setup-* shell but each carries a scoped copy of the old dark styles.
   This one layer brings them all to V3: light canvas, white identity panel, navy text, civic-blue
   primary action, gold only as a hairline accent. `body .setup-root …` outranks the scoped copies
   (0,2,1 > 0,2,0) without !important. Markup and behavior are unchanged.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
body .setup-root {
    background: var(--canvas);
}

/* Identity panel: a flat, light civic-blue field — no photograph, no overlay pattern. */
body .setup-root .setup-left,
body .setup-root .setup-left--neutral {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    background-image: none;
    border-right: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
}

/* The secure-access mark and footer rule read against the blue field. */
body .setup-root .setup-left .login-secure-icon {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

body .setup-root .setup-left .setup-left-footer {
    border-top-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

body .setup-root .setup-left::before,
body .setup-root .setup-left::after {
    display: none;
}

body .setup-root .government-logo-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--elevation-1);
}

body .setup-root .setup-brand-label,
body .setup-root .setup-brand-city,
body .setup-root .setup-brand-sub {
    color: var(--text-secondary);
}

body .setup-root .setup-brand-title {
    color: var(--navy);
    text-shadow: none;
}

body .setup-root .setup-brand-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    margin: 10px auto 0;
    background: var(--gold);
}

body .setup-root .login-secure-icon {
    color: var(--accent);
    border-color: var(--border);
    background: var(--accent-soft);
}

body .setup-root .login-secure-title {
    color: var(--navy);
}

body .setup-root .login-secure-access p,
body .setup-root .setup-left-footer,
body .setup-root .setup-system-name,
body .setup-root .setup-version {
    color: var(--text-tertiary);
}

body .setup-root .setup-left-footer {
    border-top-color: var(--border);
}

/* Form side */
body .setup-root .setup-right {
    background: var(--canvas);
}

body .setup-root .login-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(13, 33, 55, .04), 0 12px 32px rgba(13, 33, 55, .06);
}

body .setup-root .login-header-icon {
    color: var(--accent);
    border-color: var(--border);
    background: var(--accent-soft);
}

body .setup-root .setup-form-title {
    color: var(--navy);
}

body .setup-root .setup-form-desc,
body .setup-root .form-hint {
    color: var(--text-secondary);
}

body .setup-root .form-input-wrap {
    border-color: var(--border-strong);
    background: var(--surface);
}

body .setup-root .form-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

body .setup-root .form-input-wrap:focus-within .form-input-icon {
    color: var(--accent);
}

/* Primary action: flat civic blue. */
body .setup-root .setup-submit {
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    box-shadow: none;
    color: var(--surface);
}

body .setup-root .setup-submit:hover:not(:disabled) {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    box-shadow: none;
}

body .setup-root .setup-submit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

body .setup-root .login-forgot {
    color: var(--accent);
}

body .setup-root .setup-step.completed .step-dot,
body .setup-root .setup-step.active .step-dot {
    background: var(--accent);
    border-color: var(--accent);
}

/* Municipal network link: a plain secondary row. */
body .setup-root .login-network-link {
    border: 1px solid var(--border);
    background: var(--surface);
}

body .setup-root .login-network-link:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
    box-shadow: none;
    transform: none;
}

body .setup-root .login-network-icon {
    background: var(--accent-soft);
    color: var(--accent);
}

body .setup-root .login-network-arrow {
    color: var(--accent);
}

/* FocusOnNavigate (Routes.razor) moves focus to each page's h1 (tabindex -1) so screen readers announce the page. The
   heading is not an interactive control, so it draws no focus box. */
h1[tabindex="-1"]:focus {
    outline: none;
}

/* ══════════════════════════════════════════════════════════════════════
   V3 REPORT HEADER FAMILY (2026-10-02) — facility report pages (NPM, NCC, TCC, BBQ, ICE, SLH, TRM, TPM, custom).
   Each page still owns its markup (.rpt-topbar, .rpt-period-bar); this one block gives them the Dashboard's civic-blue
   identity band and a joined report-tab rail, so the family changes together. Scoped by .admin-main so it outranks
   each page's own scoped copy. Solid colour only; white text on --civic-panel meets AA.
   ══════════════════════════════════════════════════════════════════════ */
.admin-layout .admin-main .rpt-topbar {
    padding: 18px 28px 20px;
    border-bottom: 0;
    background: var(--civic-panel);
}

    .admin-layout .admin-main .rpt-topbar::before,
    .admin-layout .admin-main .rpt-topbar::after {
        display: none;
    }

.admin-main .rpt-topbar .rpt-back-btn {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

    .admin-main .rpt-topbar .rpt-back-btn:hover {
        border-color: #ffffff;
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }

    .admin-main .rpt-topbar .rpt-back-btn:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

.admin-main .rpt-topbar .rpt-topbar-icon {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
}

    .admin-main .rpt-topbar .rpt-topbar-icon svg {
        stroke: #ffffff;
    }

.admin-main .rpt-topbar .rpt-eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.admin-main .rpt-topbar .rpt-title {
    color: #ffffff;
}

    .admin-main .rpt-topbar .rpt-title:focus {
        outline: none;
    }

.admin-main .rpt-topbar .rpt-subtitle {
    color: rgba(255, 255, 255, 0.82);
}

.admin-main .rpt-topbar .rpt-action-btn {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

    .admin-main .rpt-topbar .rpt-action-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }

    .admin-main .rpt-topbar .rpt-action-btn svg {
        stroke: #ffffff;
    }

.admin-main .rpt-topbar .rpt-header-progress {
    background: rgba(255, 255, 255, 0.18);
}

.admin-main .rpt-topbar .rpt-header-progress-fill {
    background: #ffffff;
}

/* Report tabs: one joined rail with hairline dividers; the active tab is civic blue. */
.admin-main .rpt-period-bar .rpt-period-tabs {
    gap: 0;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
    overflow: hidden;
}

.admin-main .rpt-period-bar .rpt-period-tab {
    min-height: 36px;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    font-weight: 600;
    box-shadow: none;
    transform: none;
}

    .admin-main .rpt-period-bar .rpt-period-tab:first-child {
        border-left: 0;
    }

    .admin-main .rpt-period-bar .rpt-period-tab:hover {
        border-color: var(--border);
        background: var(--surface-hover);
    }

    .admin-main .rpt-period-bar .rpt-period-tab.active {
        border-color: var(--accent);
        background: var(--accent);
        color: #ffffff;
        box-shadow: none;
    }

    .admin-main .rpt-period-bar .rpt-period-tab:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

@media print {
    .admin-layout .admin-main .rpt-topbar {
        background: none;
    }
}

.admin-main .rpt-topbar .live-clock-icon {
    color: #ffffff;
}

/* Narrow laptop / tablet: the topbar keeps the account chip inside the viewport by dropping the date and period
   readouts (the page hero already carries the period) and letting the title block shrink. */
@media (max-width: 1000px) {
    .topbar-right {
        min-width: 0;
        gap: 12px;
    }

    .topbar-right .topbar-date,
    .topbar-right .topbar-period {
        display: none;
    }
}

/* The active button in a segmented group keeps its white-on-blue label (the group's own colour rule would turn it blue). */
.v3-btn-group > .v3-btn.v3-btn-primary,
.v3-btn-group > .v3-btn.v3-btn-primary:hover {
    background: var(--accent);
    color: var(--surface);
}

/* Paper carries the report, not the screen's period controls. The facility report pages hide their own tab strip, but the shared
   period navigator renders inside a child component and was printing on a page of its own. */
@media print {
    .rpt-topbar,
    .rpt-period-bar,
    .rpt-date-nav {
        display: none !important;
    }
}