/* Design tokens are defined in tokens.css (loaded BEFORE this file).
   Theme presets in /css/themes/*.css override them.
   Print overrides in print.css are loaded LAST. */

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

/* The universal margin:0 above overrides the UA stylesheet's
   `dialog { margin:auto }`, which is what centers a modal <dialog>.
   Without this, every showModal() dialog (confirm/reversal modals)
   pins to the top-left corner. Restore the centering. */
dialog {
    margin: auto;
}

html, body {
    height: 100%;
    overflow: hidden;
    width:100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    display: flex;
}

/* ── SIDEBAR ──────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 300;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
}

.sidebar-logo {
    padding: 20px 20px 16px;
    border-bottom: 1px solid #2e2920;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 36px;
    height: 36px;
    background: var(--gold);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.logo-text .logo-name {
    font-family: var(--font-head);
    font-size: 23px;
    color: #ffffff;
    font-style: italic;
}

.logo-text .logo-version {
    font-size: 10px;
    color: var(--sidebar-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Tenant badge */
.tenant-badge {
    margin: 12px 14px;
    background: #c8940a;
    border: 1px solid #3a3428;
    border-radius: 8px;
    padding: 8px 12px;
}

    .tenant-badge .tenant-code {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--gold);
        letter-spacing: 1px;
    }

    .tenant-badge .tenant-name {
        font-size: 12px;
        color: var(--sidebar-text);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tenant-badge .tenant-branch {
        font-size: 11px;
        color: var(--sidebar-dim);
        margin-top: 1px;
    }

.nav {
    padding: 6px 10px;
    flex: 1;
    overflow-y: auto;
}

.nav-label {
    font-size: 9.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    padding: 14px 10px 5px;
    font-weight: 600;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--sidebar-text);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.15s;
    margin-bottom: 1px;
}

    .nav-item:hover {
        background: #2a2520;
        color: #ede8df;
    }

    .nav-item.active {
        background: var(--gold);
        color: #18150f;
        font-weight: 600;
    }

.nav-icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.nav-badge {
    margin-left: auto;
    background: var(--red);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}

.nav-item.active .nav-badge {
    background: rgba(0,0,0,0.2);
}

.sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid #2e2920;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--gold-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.user-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--sidebar-text);
}

.user-role {
    font-size: 11px;
    color: #ffffff;
}

.logout-btn {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--sidebar-dim);
    font-size: 12px;
    text-decoration: none;
    padding: 4px 2px;
}

    .logout-btn:hover {
        color: var(--red-bg);
    }

/* ── MAIN AREA ────────────────────────────────────────────────── */
.main {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;           /* allow flex child to shrink below content size */
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow-x: hidden;
}

    .main.no-sidebar {
        margin-left: 0;
    }

/* ── TOP BAR ──────────────────────────────────────────────────── */
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    height: var(--topbar-h);
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: var(--shadow);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-title {
    font-family: var(--font-head);
    font-size: 20px;
    font-style: italic;
}

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

/* Trail rendered by Views/Shared/_Breadcrumb.cshtml. Scoped to `ol` so the older
   plain-text uses of .breadcrumb are untouched. Was plain unbadged text at the
   same 12px as everything around it — easy to miss as a navigation aid. */
.breadcrumb > ol {
    list-style: none;
    margin: 0 0 14px;
    padding: 6px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    background: var(--color-primary-soft);
    border-radius: 8px;
    width: fit-content;
}
.breadcrumb > ol > li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.breadcrumb > ol > li + li::before {
    content: "›";
    color: var(--text-dim, #9aa0aa);
    font-size: 13px;
    line-height: 1;
}
.breadcrumb > ol > li > a {
    color: var(--text-muted);
    text-decoration: none;
}
.breadcrumb > ol > li > a:hover { color: var(--gold-dark); text-decoration: underline; }
.breadcrumb > ol > li > a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.breadcrumb > ol > li > [aria-current="page"] { color: var(--text); font-weight: 600; }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    padding: 5px 12px;
    border-radius: 20px;
}

.btn-new {
    background: var(--gold);
    color: #18150f;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

    .btn-new:hover {
        background: var(--gold-light);
        color: #18150f;
    }

/* ── PAGE CONTENT ─────────────────────────────────────────────── */
.page {
    flex: 1; /* 👈 Add this */
    overflow-y: auto; /* 👈 Add this so ONLY the page content scrolls */
    overflow-x: hidden; /* 🔥 ADD THIS */
    animation: fadeSlide 0.22s ease;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── STAT GRID ───────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
.print-only {
    display: none;
}
.stat-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.15s;
    cursor: default;
}

    .stat-card:hover {
        box-shadow: var(--shadow-md);
    }

    .stat-card.clickable {
        cursor: pointer;
    }

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    font-weight: 1000;
}

.stat-value {
    font-family: var(--font-mono);
    font-size: 27px;
    font-weight: 500;
    margin-top: 6px;
    letter-spacing: -0.5px;
}

    .stat-value.c-gold {
        color: var(--gold);
    }

    .stat-value.c-green {
        color: var(--green);
    }

    .stat-value.c-red {
        color: var(--red);
    }

    .stat-value.c-blue {
        color: var(--blue);
    }

.chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    margin-top: 7px;
}

.chip-gold {
    background: var(--gold-bg);
    color: var(--gold-dark);
}

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

.chip-red {
    background: var(--red-bg);
    color: var(--red);
}

.chip-blue {
    background: var(--blue-bg);
    color: var(--blue);
}

.chip-orange {
    background: var(--orange-bg);
    color: var(--orange);
}

.chip-purple {
    background: var(--purple-bg);
    color: var(--purple);
}

/* ── CARD ─────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

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

.card-title {
    font-family: var(--font-head);
    font-size: 16px;
}

.card-body {
    padding: 18px 20px;
}

    .card-body.p0 {
        padding: 0;
    }

/* ── GRIDS ────────────────────────────────────────────────────── */
.dash-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.dash-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.col-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.col-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px;
}

/* ── TABLE ─────────────────────────────────────────────────────── */
.tbl-wrap {
    overflow-x: auto;
    overflow-y: hidden; /* horizontal scroller ONLY — overflow-x:auto silently makes overflow-y
                           compute to auto, which traps the vertical mouse wheel and stops the
                           page from scrolling when the table overflows sideways. */
}

/* ── Sticky-right Action column (app-wide) ──────────────────────────
   Pin the last column (Action/Actions) to the right edge so its buttons
   stay visible no matter how far the table scrolls horizontally. Re-uses
   the same theme tokens as the base table rules, so dark mode + themes
   follow automatically. Opt-out per table with `.no-sticky-actions`. */
.tbl-wrap > table:not(.no-sticky-actions) > thead > tr > th:last-child,
.tbl-wrap > table:not(.no-sticky-actions) > tbody > tr > td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: -4px 0 8px -3px rgba(0,0,0,.08);
}
.tbl-wrap > table:not(.no-sticky-actions) > thead > tr > th:last-child {
    z-index: 3;
    background-color: var(--surface0);
}
.tbl-wrap > table:not(.no-sticky-actions) > tbody > tr > td:last-child {
    background-color: var(--surface, #fff);
}
.tbl-wrap > table:not(.no-sticky-actions) > tbody > tr:hover > td:last-child {
    background-color: var(--surface2);
}

/* Approvals table — its own wrapper class (.ap-card has overflow-x on mobile) */
.ap-card .ap-table thead th:last-child,
.ap-card .ap-table tbody td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: -4px 0 8px -3px rgba(0,0,0,.08);
}
.ap-card .ap-table thead th:last-child { z-index: 3; background-color: #f3f4f6; }
.ap-card .ap-table tbody td:last-child { background-color: #fff; }
.ap-card .ap-table tbody tr:hover td:last-child { background-color: #fffbe8; }

/* ── Global table-scroll-helper (table-scroll-helper.js) ────────────
   Floating ‹ › arrow buttons + wheel-horizontal scrolling for any
   .tbl-wrap with horizontal overflow. The JS wraps each .tbl-wrap in
   a .tw-shell so the buttons can be absolute-positioned against a
   stable parent and stay put while the table scrolls inside. */
.tw-shell { position: relative; }
.tw-scroll-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--gold, #b8860b); color: #fff;
    border: 2px solid #fff; font-size: 24px; font-weight: 700; line-height: 1;
    cursor: pointer; z-index: 50; user-select: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    transition: opacity .18s ease, background .15s ease, transform .12s ease;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.tw-scroll-btn:hover    { background: var(--gold-dark, #8a6500); transform: translateY(-50%) scale(1.08); }
.tw-scroll-btn:active   { transform: translateY(-50%) scale(.95); }
.tw-scroll-btn:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
.tw-scroll-btn.tw-hide  { display: none; }
.tw-scroll-left         { left: -14px; }
.tw-scroll-right        { right: -14px; }
@media (max-width: 600px) { .tw-scroll-btn { width: 36px; height: 36px; font-size: 20px; } }

/* Opt-in utility — apply `.sticky-actions` to any <table> or its wrapper
   that lives outside the .tbl-wrap convention. Same behaviour as above. */
.sticky-actions thead th:last-child,
.sticky-actions tbody td:last-child,
table.sticky-actions thead th:last-child,
table.sticky-actions tbody td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: -4px 0 8px -3px rgba(0,0,0,.08);
}
.sticky-actions thead th:last-child,
table.sticky-actions thead th:last-child { z-index: 3; background-color: var(--surface0); }
.sticky-actions tbody td:last-child,
table.sticky-actions tbody td:last-child { background-color: var(--surface, #fff); }
.sticky-actions tbody tr:hover td:last-child,
table.sticky-actions tbody tr:hover td:last-child { background-color: var(--surface2); }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

thead th {
    background: var(--surface0);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

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

    tbody tr:hover {
        background: var(--surface2);
    }

tbody td {
    padding: 11px 14px;
    color: var(--text);
    vertical-align: middle;
}

.td-mono {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--gold-dark);
    font-weight:900;
}

    .td-mono a {
        color: var(--gold-dark);
        text-decoration: none;
    }

        .td-mono a:hover {
            text-decoration: underline;
        }

.td-name {
    font-weight: 600;
}

.td-dim {
    color: var(--text-muted);
    font-size: 12.5px;
}

/* ── STATUS BADGES ────────────────────────────────────────────── */
.status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

    .status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

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

    .s-active::before {
        background: var(--green);
    }

.s-overdue {
    background: var(--red-bg);
    color: var(--red);
}

    .s-overdue::before {
        background: var(--red);
    }

.s-due {
    background: var(--orange-bg);
    color: var(--orange);
}

    .s-due::before {
        background: var(--orange);
    }

/* Offer stage (Users.IsPendingJoining) — deliberately NOT .s-closed. An
   inactive/closed grey reads as "no longer with us"; this row has never had a
   login and is waiting on the candidate's answer. */
.s-pending {
    background: var(--orange-bg);
    color: var(--orange);
}

    .s-pending::before {
        background: var(--orange);
    }

.s-closed {
    background: var(--border);
    color: var(--text-muted);
}

    .s-closed::before {
        background: var(--text-muted);
    }

.s-repledged {
    background: var(--purple-bg);
    color: var(--purple);
}

    .s-repledged::before {
        background: var(--purple);
    }

/* ── FORMS ─────────────────────────────────────────────────────── */
.fg {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .fg.full {
        grid-column: 1 / -1;
    }

label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

input, select, textarea {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text);
    outline: none;
    transition: border 0.15s, box-shadow 0.15s;
    width: 100%;
}

    input:focus, select:focus, textarea:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(200,148,10,0.1);
    }

textarea {
    resize: vertical;
    min-height: 72px;
}

.section-title {
    font-family: var(--font-head);
    font-size: 17px;
    font-style: italic;
    color: var(--gold-dark);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-border);
}

.text-danger {
    color: var(--red);
    font-size: 11px;
    margin-top: 2px;
}

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--gold);
    color: #18150f;
}

    .btn-primary:hover {
        background: var(--gold-light);
    }

.btn-success {
    background: var(--green);
    color: white;
}

    .btn-success:hover {
        background: #185f3a;
    }

.btn-danger {
    background: var(--red);
    color: white;
}

    .btn-danger:hover {
        background: #a02a16;
    }

.btn-ghost {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
}

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

.btn-sm {
    padding: 6px 14px;
    font-size: 12.5px;
}

.btn-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ── CALC BOX ──────────────────────────────────────────────────── */
.calc-box {
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius);
    padding: 16px 20px;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px dashed var(--gold-border);
    font-size: 13.5px;
}

    .calc-row:last-child {
        border-bottom: none;
        font-weight: 700;
        font-size: 15px;
    }

.calc-label {
    color: var(--text-muted);
}

.calc-val {
    font-family: var(--font-mono);
    color: var(--gold-dark);
}

    .calc-val.big {
        font-size: 17px;
        color: var(--text);
    }

/* ── ALERTS ────────────────────────────────────────────────────── */
.alert {
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13.5px;
    margin-bottom: 16px;
}

.alert-gold {
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    color: var(--gold-dark);
}

.alert-green {
    background: var(--green-bg);
    border: 1px solid #b0dfcc;
    color: var(--green);
}

.alert-red {
    background: var(--red-bg);
    border: 1px solid #f0c0b8;
    color: var(--red);
}

/* ── SEARCH BAR ────────────────────────────────────────────────── */
.search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-inp {
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}

.filter-sel {
    width: 160px;
}

/* ── Staff-Performance filter toolbar (shared: Index / My / MyTeam) ──
   Lives here (not in a single view's <style>) so every Staff-Performance
   page renders the same tidy control bar. */
.sp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.sp-filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; }
.sp-actions     { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-field       { display: inline-flex; align-items: center; gap: 6px; }
.sp-field-lbl   { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; }

/* Fixed control widths. The descendant selectors (0,2,0) intentionally out-rank the
   global `input[type="date"], select { width: 100% }` rule (0,1,1) so the date pickers
   and dropdowns stay compact instead of stretching to full width. */
.sp-toolbar .filter-sel { height: 34px; }
.sp-toolbar .sp-date    { width: 150px; }
.sp-toolbar .sp-sel     { width: 160px; }
.sp-toolbar .sp-sel-sm  { width: 120px; }
.sp-toolbar .btn-sm     { height: 34px; padding: 0 12px; }

@media (max-width: 1200px) {
    .sp-toolbar .sp-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 560px) {
    .sp-toolbar .sp-filter-form { width: 100%; }
    .sp-toolbar .sp-field { flex: 1 1 auto; }
    .sp-toolbar .sp-date,
    .sp-toolbar .sp-sel,
    .sp-toolbar .sp-sel-sm { flex: 1 1 140px; width: auto; }
}

/* ── PRINT ──────────────────────────────────────────────────────── */
.receipt-box {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 36px;
    max-width: 620px;
    font-size: 13px;
    line-height: 1.9;
}

.receipt-stamp {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

@media print {
    .sidebar, .topbar, .mob-header, .sidebar-overlay, .no-print {
        display: none !important;
    }

    .main {
        margin-left: 0 !important;
    }
}

/* ── SCROLLBAR ──────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

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

    .col-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .dash-2col, .dash-3col {
        grid-template-columns: 1fr;
    }

    .col-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .main {
        margin-left: 0;
    }

    .page {
        padding: 16px;
    }
}

/* ── TOAST ANIMATIONS ─────────────────────────────────────────── */
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* ── PAGINATION ───────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    flex-wrap: wrap;
    gap: 8px;
}

.pagination-info {
    color: var(--text-muted);
}

.pagination-pages {
    display: flex;
    gap: 4px;
}

/* ── PHOTO UPLOAD ZONE ────────────────────────────────────────── */
.photo-zone {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.photo-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--border);
    display: block;
}

.photo-thumb-sm {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

/* ── LOAN STATUS COLORS ───────────────────────────────────────── */
.s-repledged {
    background: var(--purple-bg);
    color: var(--purple);
}

    .s-repledged::before {
        background: var(--purple);
    }

/* ── EMI TABLE ────────────────────────────────────────────────── */
.emi-paid {
    background: var(--green-bg) !important;
}

.emi-overdue {
    background: var(--red-bg) !important;
}

.emi-pending {
}

/* ── SEARCH HIGHLIGHT ─────────────────────────────────────────── */
.loan-search-result {
    cursor: pointer;
    transition: background 0.1s;
}

    .loan-search-result:hover {
        background: var(--gold-bg) !important;
    }

/* ── MEMBER PHOTO HEADER ──────────────────────────────────────── */
.member-avatar-lg {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--gold);
    flex-shrink: 0;
}

.member-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--border);
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-dim);
    flex-shrink: 0;
}

/* ── CHART CONTAINER ──────────────────────────────────────────── */
.chart-wrap {
    position: relative;
    height: 220px;
}

/* ── COMPACT PRINT LAYOUT ─────────────────────────────────────── */
@media print {
    * {
        box-sizing: border-box;
    }

    /* Reset overflow so the browser can render the full page — without
       this, html/body overflow:hidden clips all content on print/PDF */
    html, body {
        overflow: visible !important;
        height: auto !important;
        width: auto !important;
        margin: 0;
        padding: 0;
        font-size: 11px;
        font-family: Arial, sans-serif;
    }

    .main, .page {
        overflow: visible !important;
        height: auto !important;
    }

    .sidebar, .topbar, .mob-header, .sidebar-overlay, .no-print, .btn, .btn-row, .alert {
        display: none !important;
    }

    .main {
        margin-left: 0 !important;
        padding: 0;
    }

    .page {
        padding: 8px 10px !important;
        animation: none !important;
    }

    .card {
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 6px;
        box-shadow: none;
        break-inside: avoid;
    }

    .card-header {
        padding: 5px 10px;
        background: #f5f5f5;
        border-bottom: 1px solid #ccc;
    }

    .card-title {
        font-size: 12px;
        font-style: normal;
    }

    .card-body {
        padding: 6px 10px;
    }

    .dash-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    table {
        font-size: 10px;
        border-collapse: collapse;
        width: 100%;
    }

    thead th {
        background: #eee !important;
        padding: 4px 6px;
        border: 1px solid #ccc;
        font-size: 9.5px;
    }

    tbody td {
        padding: 3px 6px;
        border: 1px solid #ddd;
    }

    tfoot td {
        padding: 4px 6px;
        border: 1px solid #ccc;
        background: #f9f7f0 !important;
        font-weight: 700;
        font-size: 10px;
    }

    .stat-grid, .stat-grid-5 {
        display: none;
    }

    .calc-box {
        border: 1px solid #ddd;
        padding: 5px 8px;
        font-size: 10.5px;
    }

    .calc-row {
        padding: 2px 0;
    }

    .col-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .stat-label {
        font-size: 9px;
        letter-spacing: 0.3px;
    }

    .chip {
        font-size: 9px;
        padding: 1px 5px;
    }

    .status {
        font-size: 10px;
        padding: 2px 6px;
    }

    .td-mono {
        font-size: 9.5px;
    }

    .tbl-wrap {
        overflow: visible;
    }
    /* Print header */
    .print-header {
        display: block !important;
        text-align: center;
        border-bottom: 2px solid #333;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

        .print-header h2 {
            margin: 0;
            font-size: 15px;
        }

        .print-header p {
            margin: 2px 0;
            font-size: 10px;
            color: #555;
        }
    /* Force single page */
    .dash-2col > div:first-child {
        break-before: auto;
    }
}

/* Print header (hidden on screen) */
.print-header {
    display: none;
}

/* ── COMPACT PRINT LAYOUT ─────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .mob-header, .sidebar-overlay,
    .no-print, .btn, .btn-row, .pagination, .search-row, .alert {
        display: none !important;
    }

    .main {
        margin-left: 0 !important;
    }

    .page {
        padding: 0 !important;
        animation: none !important;
    }

    body {
        font-size: 11px !important;
        background: #fff !important;
    }

    /* Compact card headers */
    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        margin-bottom: 8px !important;
        break-inside: avoid;
    }

    .card-header {
        padding: 6px 10px !important;
    }

    .card-title {
        font-size: 13px !important;
    }

    .card-body {
        padding: 8px 10px !important;
    }

    /* Compact table */
    table {
        font-size: 10px !important;
    }

    thead th {
        padding: 5px 8px !important;
        font-size: 9px !important;
    }

    tbody td {
        padding: 5px 8px !important;
    }

    tfoot td {
        padding: 5px 8px !important;
    }

    /* Compact stats */
    .stat-label {
        font-size: 9px !important;
    }

    .stat-value {
        font-size: 14px !important;
    }

    .stat-grid, .stat-grid-5 {
        margin-bottom: 8px !important;
        gap: 6px !important;
    }

    .stat-card {
        padding: 8px 10px !important;
    }

    /* Two-column to single on narrow */
    .dash-2col {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .col-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    /* Loan header compact */
    .print-loan-header {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 4px 16px !important;
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

        .print-loan-header .lh-label {
            font-size: 9px;
            color: #666;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .print-loan-header .lh-val {
            font-size: 12px;
            font-weight: 600;
        }

    /* Photo small in print */
    .photo-thumb, .member-avatar-lg {
        width: 50px !important;
        height: 50px !important;
    }

    .photo-thumb-sm {
        width: 36px !important;
        height: 36px !important;
    }

    /* Page break control */
    .print-break {
        page-break-before: always;
    }

    .print-no-break {
        break-inside: avoid;
    }

    /* Receipt header */
    .receipt-header {
        text-align: center;
        border-bottom: 2px solid #c8940a;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

        .receipt-header h1 {
            font-size: 18px;
            color: #c8940a;
            margin: 0;
        }

        .receipt-header p {
            font-size: 10px;
            color: #666;
            margin: 2px 0;
        }
}

/* ── PRINT-ONLY SECTION (receipt) ───────────────────────────────── */
.print-only {
    display: none;
}

@media print {
    /* Show print-only headers/sections */
    .print-only {
        display: block !important;
    }
}
/* ══════════════════════════════════════════════════════════════
   PREMIUM MOBILE & RESPONSIVE DESIGN (APP-LIKE UX)
══════════════════════════════════════════════════════════════ */

/* ── MOBILE HEADER (Glassmorphic) ── */
.mob-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(33, 128, 128, 0.90); /* Transparent Sidebar Bg */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 200;
    align-items: center;
    padding: 0 16px;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.mob-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.2s;
}

    .mob-hamburger:active {
        background: rgba(255, 255, 255, 0.15);
    }

    .mob-hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #ffffff;
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mob-hamburger.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mob-hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .mob-hamburger.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

.mob-logo {
    color: var(--gold);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
    font-style: italic;
    flex: 1;
    letter-spacing: 0.5px;
}

.mob-new-loan {
    background: var(--gold);
    color: #18150f;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 32%, transparent);
    transition: transform 0.15s, box-shadow 0.15s;
}

    .mob-new-loan:active {
        transform: scale(0.94);
        box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 22%, transparent);
    }

/* ── SIDEBAR OVERLAY (Smooth Fade) ── */
.sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 249;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .sidebar-overlay.visible {
        opacity: 1;
        visibility: visible;
    }

/* ── RESPONSIVE TABLE SWIPE HINT ── */
.tbl-wrap {
    overflow-x: auto;
    overflow-y: hidden; /* horizontal scroller only — never trap the vertical wheel */
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    padding-bottom: 4px; /* Room for modern scrollbars */
}

table {
    min-width: 650px; /* Never squish tables, allow fluid horizontal scrolling */
}

/* ── .kv — key/value tables, NOT data grids ──────────────────────────
   .kv is the label/value table used inside cards (deposit + savings
   detail/close/receipt, loan application review, no-dues certificate).
   These sit in narrow cards and .col-2 grid columns ~360-500px wide,
   so the 650px floor above forces the table wider than its card, blows
   out the grid track and clips the values off the right edge.
   Opting .kv out is the fix; the floor still applies to real data grids.
   overflow-wrap lets long member codes break instead of setting a wide
   min-content floor of their own. */
.kv {
    min-width: 0;
}

    .kv td {
        overflow-wrap: anywhere;
    }

/* ── 1200px — Large tablets ─────────────────────────── */
@media (max-width: 1200px) {
    .stat-grid, .col-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── 960px — Tablets ────────────────────────────────── */
@media (max-width: 960px) {
    .sidebar {
        width: 220px;
    }

    .main {
        margin-left: 220px;
    }

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

    .dash-2col, .dash-3col {
        grid-template-columns: 1fr;
    }

    .col-3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── 768px — Mobile Breakpoint ──────────────────────── */
@media (max-width: 768px) {
    .mob-header {
        display: flex;
    }

    /* 60fps GPU Accelerated Drawer */
    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        z-index: 250;
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
        box-shadow: none;
    }

        .sidebar.open {
            transform: translateX(280px);
            box-shadow: 4px 0 24px rgba(0,0,0,0.25);
        }

    /* Adjust main frame for overlapping header */
    .main {
        margin-left: 0 !important;
        padding-top: 60px;
        overflow-x: hidden;
    }

    .topbar {
        display: none;
    }

    .page {
        padding: 12px;
        overflow-x: hidden;
    }

    /* Unwrapped report tables: horizontal swipe inside the card instead of page overflow */
    .card-body.p0 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Forms & Touch Targets (Crucial iOS fix) */
    input, select, textarea {
        padding: 12px 14px;
        font-size: 16px; /* Prevents auto-zoom on iPhone */
        border-radius: 10px;
    }

    /* Search row: stack filters vertically */
    .search-row {
        flex-direction: column;
        align-items: stretch;
        background: var(--surface);
        padding: 12px;
        border-radius: 12px;
        box-shadow: var(--shadow);
        gap: 8px;
    }

    /* Forms inside search-row also stack */
    .search-row form {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    /* Date/label pairs stay inline */
    .search-row form .fg {
        flex-direction: row !important;
        align-items: center;
        gap: 8px;
    }

    .search-inp, .filter-sel {
        max-width: 100%;
        width: 100%;
    }

    /* Grids to single column */
    .col-2, .col-3, .col-4 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Cards */
    .card {
        margin-bottom: 14px;
        border-radius: 14px;
    }

    .card-header {
        padding: 14px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .card-header .card-title {
        font-size: 15px;
    }

    .card-body {
        padding: 14px 16px;
    }

    /* Native-App style chunky buttons */
    .btn-row {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: 20px;
    }

        .btn-row .btn {
            width: 100%;
            justify-content: center;
            padding: 14px;
            font-size: 15px;
            border-radius: 12px;
        }

    /* Widget Stat Cards */
    .stat-card {
        padding: 14px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
    }

    .stat-value {
        font-size: 22px;
    }

    /* Hide date chip to save header space */
    .date-chip {
        display: none;
    }

    /* Footer compact */
    footer {
        padding: 14px 16px !important;
        font-size: 11px !important;
    }
}

/* ── 480px — Small phones ───────────────────────────── */
@media (max-width: 480px) {
    /* Keep stats 2x2 on tiny screens so they don't consume extreme height */
    .stat-grid, .stat-grid-5 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-value {
        font-size: 20px;
    }

    .stat-label {
        font-size: 10px;
    }

    /* Make calculator amounts stack uniquely */
    .calc-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0;
    }

    .calc-val {
        font-size: 16px;
    }

        .calc-val.big {
            font-size: 24px;
        }

    /* Resize chips */
    .chip {
        padding: 4px 10px;
        font-size: 11px;
    }

    /* Pagination layout */
    .pagination {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════
   MFI / MICROFINANCE DESIGN SYSTEM
   Classes used across all MFI module views
══════════════════════════════════════════════════════════════ */

/* ── Page Layout ─────────────────────────────────────────────── */
.page {
    padding: 24px 28px;
}

.page-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-title {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.page-sub,
.page-subtitle {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
}

.page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Card Header (MFI variant) ───────────────────────────────── */
.card-hdr {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    letter-spacing: 0.2px;
    background: var(--surface2);
    border-radius: var(--radius) var(--radius) 0 0;
}

/* ── Form Grid System ────────────────────────────────────────── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

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

.form-actions {
    display: flex;
    gap: 10px;
    padding: 16px 0 4px;
    flex-wrap: wrap;
}

/* ── Input class (alias for native input styling) ────────────── */
.inp {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text);
    outline: none;
    transition: border 0.15s, box-shadow 0.15s;
    width: 100%;
}

.inp:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.inp-sm {
    padding: 6px 10px;
    font-size: 12.5px;
    border-radius: 6px;
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.badge-neutral {
    background: var(--surface0);
    color: var(--text-muted);
}

.badge-success {
    background: var(--green-bg);
    color: var(--green);
}

.badge-danger {
    background: var(--red-bg);
    color: var(--red);
}

.badge-warning {
    background: var(--orange-bg);
    color: var(--orange);
}

.badge-info {
    background: var(--blue-bg);
    color: var(--blue);
}

.badge-gold {
    background: var(--gold-bg);
    color: var(--gold-dark);
}

/* ── Alert variants ──────────────────────────────────────────── */
.alert-danger {
    background: var(--red-bg);
    border: 1px solid #f0c0b8;
    color: var(--red);
}

.alert-success {
    background: var(--green-bg);
    border: 1px solid #b0dfcc;
    color: var(--green);
}

.alert-warning {
    background: var(--orange-bg);
    border: 1px solid #f0ccaa;
    color: var(--orange);
}

.alert-info {
    background: var(--blue-bg);
    border: 1px solid #b8d4f0;
    color: var(--blue);
}

/* ── Table (tbl) ─────────────────────────────────────────────── */
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tbl thead th {
    background: var(--surface0);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.tbl tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

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

.tbl tbody tr:hover {
    background: var(--surface2);
}

.tbl tbody td {
    padding: 11px 14px;
    color: var(--text);
    vertical-align: middle;
}

.tbl .empty {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 28px;
}

.row-warning {
    background: var(--orange-bg) !important;
}

.row-muted {
    opacity: 0.55;
}

/* ── Branch pill multi-select (User Create/Edit — Additional Branch Access) ── */
.branch-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2, #f9fafb);
}
.branch-pill { position: relative; cursor: pointer; user-select: none; margin: 0; }
.branch-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.branch-pill span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--surface, #fff);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    transition: background .15s, border-color .15s, color .15s;
}
.branch-pill:hover span {
    border-color: var(--gold);
    color: var(--text);
}
.branch-pill input:checked + span {
    background: var(--gold-bg);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.branch-pill input:checked + span::before {
    content: '✓';
    font-weight: 800;
}
.branch-pill input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--gold-border);
}

/* ── KPI Cards ───────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

/* KPI stat strip used across report/summary pages (DCB, DCR, LDR, Gold
   Inventory, Recovery, Leave …). auto-fit fills the full row width for any
   card count (2–5), so cards never collapse into a narrow left column with a
   dead gap on the right. Pages that need a fixed column count (e.g. Daily
   Collection Summary) override .kpi-row in their own <style> block. */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
}

.kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.kpi-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    margin-top: 5px;
    color: var(--text);
}

.kpi-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ── Definition List Grid ────────────────────────────────────── */
.dl-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    padding: 16px 18px;
    font-size: 13px;
    align-items: baseline;
}

.dl-grid dt {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.dl-grid dd {
    color: var(--text);
    margin: 0;
}

/* ── Filter / Action Bar ─────────────────────────────────────── */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

/* ── Filter / search bars: keep date pickers & dropdowns compact + inline ──
   The global `.inp, .search-inp, .filter-sel { width: 100% }` rule makes any
   such control WITHOUT an inline width stretch to a full-width, own-line row
   inside a flex filter bar — that is the stacked date inputs and full-width
   "All Branches / All Agents" dropdowns seen on the report pages (P&L, DCB,
   Agent Performance, Income, Group Performance). Scope date/time inputs and
   selects back to their natural size so they line up inline. Text/search
   inputs are intentionally left alone (a wide search box is desirable), and an
   explicit inline width on a control still wins, so views that set one are
   unaffected. */
.filter-bar input[type="date"],
.filter-bar input[type="time"],
.filter-bar input[type="month"],
.filter-bar select,
.filter-bar .filter-sel,
.search-row input[type="date"],
.search-row input[type="time"],
.search-row input[type="month"],
.search-row select,
.search-row .filter-sel {
    width: auto;
    min-width: 150px;
    flex: 0 1 auto;
}
@media (min-width: 769px) {
    /* Desktop only: cap dropdown width so a long branch/agent name can't stretch
       the control across the bar. Left off on mobile, where .search-row is meant
       to stack full-width. */
    .filter-bar select, .filter-bar .filter-sel,
    .search-row select, .search-row .filter-sel { max-width: 260px; }
}

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.empty-state .empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

/* ── Utility ─────────────────────────────────────────────────── */
.mono {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

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

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

.c-gold  { color: var(--gold); }
.c-green { color: var(--green); }
.c-red   { color: var(--red); }
.c-blue  { color: var(--blue); }

.btn-xs {
    padding: 4px 10px;
    font-size: 11.5px;
    border-radius: 6px;
}

/* ── Responsive: MFI form-grid ───────────────────────────────── */
@media (max-width: 1100px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-hdr {
        flex-direction: column;
        align-items: flex-start;
    }
    .dl-grid {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }
}

/* ════════════════════════════════════════════════════════════════
   v2 — Global control spacing normalization (10x design pass)
   These rules use semantic spacing tokens so EVERY existing form,
   card, table and section gets consistent rhythm — without touching
   60+ individual views. Themes and density toggles still apply.
   ════════════════════════════════════════════════════════════════ */

/* Cards: standard padding everywhere */
.card { border-radius: 10px; }
.card-header, .card-hdr { padding: 12px 18px; gap: 12px; font-weight: 600; font-size: 14px; color: var(--color-ink-strong); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.card-body   { padding: 16px 18px; }
.card-body.p0 { padding: 0; }

/* Section titles: uniform rhythm */
.section-title {
    font-size: 13px; font-weight: 700; color: var(--color-ink-strong);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin: 0 0 10px 0; padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

/* Form groups: tighter vertical rhythm — label tight on input */
.fg, .form-group {
    display: flex; flex-direction: column;
    gap: 5px; margin-bottom: 14px;
}
.fg label, .form-group label {
    font-size: 12px; font-weight: 600;
    color: var(--color-ink-muted);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin: 0;
}
.fg input, .fg select, .fg textarea,
.form-group input, .form-group select, .form-group textarea,
.inp, .search-inp, .filter-sel {
    height: var(--input-h);
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-ink-strong);
    font-family: var(--font-body);
    font-size: 13px;
    width: 100%;
    max-width: 100%;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.fg textarea, .form-group textarea {
    height: auto;
    min-height: 64px;
    padding: 8px 10px;
    resize: vertical;
    line-height: 1.5;
}
.fg input:focus, .fg select:focus, .fg textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.inp:focus, .search-inp:focus, .filter-sel:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.fg input[readonly], .form-group input[readonly] { background: var(--color-surface-sunken, var(--surface2)); cursor: default; }

/* ── Browser autofill: suppress the yellow wash ────────────────────────────
   Chrome/Edge paint rgb(250,255,189) over any field they consider autofillable
   and refuse to let background-color override it. Two tricks are needed:

     1. A huge inset box-shadow repaints the field in our own surface colour.
        The spread must exceed the widest control on any page — a small spread
        (the 30px this codebase used in the sidebar) leaves the yellow visible
        across the middle and right of a wide input.
     2. An absurdly long background-color transition, so the yellow cannot even
        flash mid-state before the shadow lands.

   Scoped to :-webkit-autofill, so normal focus/hover styling is untouched.
   This is deliberately global: the wash hits whole toolbars — most visibly the
   Bulk Disbursement batch bar, where Chrome treats the account/mode selects as
   a payment form and washes the surrounding cards too. Fixing it per-page just
   moves the bug to the next form the browser guesses at. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface, #fff) inset !important;
            box-shadow: 0 0 0 1000px var(--color-surface, #fff) inset !important;
    -webkit-text-fill-color: var(--color-ink-strong, #111) !important;
    caret-color: var(--color-ink-strong, #111);
    transition: background-color 600000s 0s, color 600000s 0s;
}
/* Firefox has its own (milder) autofill tint, and honours a plain background. */
input:autofill, select:autofill, textarea:autofill {
    background: var(--color-surface, #fff);
    color: var(--color-ink-strong, #111);
}

/* Form grids: tighter gaps + cap input column width for readability */
.form-grid, .col-2, .col-3, .col-4 { display: grid; gap: 12px 14px; }
.col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Avoid super-wide single-column inputs in 1- or 2-column form-grids */
.form-grid.tight { max-width: 880px; }
@media (max-width: 768px) {
    .col-2, .col-3, .col-4 { grid-template-columns: 1fr; }
}

/* Button row: consistent gap and top margin */
.btn-row, .form-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    align-items: center;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

/* Buttons: identical heights regardless of class */
.btn, button.btn {
    height: var(--btn-h);
    padding: 0 12px;
    border-radius: 5px;
    font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s, transform 0.06s;
    line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 11.5px; }
.btn-xs { height: 22px; padding: 0 7px; font-size: 11px; border-radius: 4px; }
.btn-lg { height: 40px; padding: 0 16px; font-size: 14px; }

/* Search row: consistent spacing */
.search-row {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin-bottom: 16px;
}

/* Tables: uniform cell padding via density tokens */
table { width: 100%; border-collapse: collapse; }
table th, table td { padding: var(--row-py) var(--row-px); }

/* Validation message rhythm */
.text-danger, .field-validation-error, span[asp-validation-for] {
    display: block; font-size: 12px; color: var(--color-danger);
    margin-top: 4px;
}
.field-err {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px var(--color-danger-soft) !important;
}
.field-err-msg { animation: shakeIn 0.2s ease-out; }
@keyframes shakeIn {
    0% { transform: translateX(-3px); opacity: 0; }
    50% { transform: translateX(3px); }
    100% { transform: translateX(0); opacity: 1; }
}
.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }

/* ════════════════════════════════════════════════════════════════
   v2 — Topbar buttons, KPI cards, sticky tables, slide-over, etc.
   Added in the 2026 design refresh. Uses semantic tokens so themes
   automatically restyle these without per-component overrides.
   ════════════════════════════════════════════════════════════════ */

/* ── Row actions: primary CTA + icon group (used in list tables) ── */
.row-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.row-actions .ra-pay { font-weight: 700; }
.row-actions .ra-icons {
    display: inline-flex; align-items: center;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: var(--color-surface); overflow: hidden;
}
.row-actions .ra-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 26px;
    text-decoration: none; color: var(--color-ink-muted);
    font-size: 14px; line-height: 1;
    border-right: 1px solid var(--color-border);
    transition: background .12s, color .12s;
}
.row-actions .ra-icon:last-child { border-right: none; }
.row-actions .ra-icon:hover { background: var(--color-primary-soft); color: var(--color-primary); }

/* ── Topbar quick-action buttons ──────────────────────────────── */
.topbar-icon-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px;
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.topbar-icon-btn:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-ink-strong); }
.topbar-icon-btn .kbd {
    font-family: var(--font-mono); font-size: 10px;
    padding: 1px 5px; border: 1px solid var(--color-border); border-radius: 3px;
    color: var(--color-ink-muted);
}

/* ── KPI cards (used in Dashboard) ────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 10px; padding: 16px; transition: box-shadow .15s, border-color .15s;
    display:flex; flex-direction:column; gap:6px;
}
.kpi-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.kpi-card .kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-ink-muted); font-weight: 600; }
.kpi-card .kpi-value { font-size: 24px; font-weight: 700; color: var(--color-ink-strong); font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi-card .kpi-delta { font-size: 12px; font-weight: 500; }
.kpi-card .kpi-delta.up   { color: var(--color-success); }
.kpi-card .kpi-delta.down { color: var(--color-danger);  }
.kpi-card .kpi-delta.flat { color: var(--color-ink-muted); }
.kpi-card .kpi-link { margin-top: 6px; font-size: 12px; color: var(--color-primary); text-decoration: none; font-weight: 600; }
.kpi-card .kpi-link:hover { text-decoration: underline; }

/* ── Quick actions strip ──────────────────────────────────────── */
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.qa-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding: 10px 16px; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--color-ink-strong); text-decoration: none;
    transition: background .12s, border-color .12s, transform .08s;
}
.qa-btn:hover { background: var(--color-primary-soft); border-color: var(--color-primary); transform: translateY(-1px); }
.qa-btn.primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.qa-btn.primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }

/* ── Sticky table headers + density ───────────────────────────── */
.tbl-sticky { position: relative; max-height: 70vh; overflow: auto; border: 1px solid var(--color-border); border-radius: 8px; }
.tbl-sticky table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl-sticky thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--color-surface-sunken, var(--surface2));
    box-shadow: inset 0 -1px 0 var(--color-border);
    padding: var(--row-py) var(--row-px); font-weight: 600; text-align: left;
    font-size: 12px; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: .3px;
}
.tbl-sticky tbody td { padding: var(--row-py) var(--row-px); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-ink-strong); }
.tbl-sticky tbody tr:hover { background: var(--color-primary-soft); }
.tbl-sticky tbody tr.expanded { background: var(--color-primary-soft); }
.tbl-sticky tbody tr.row-detail td { padding: 14px 18px; background: var(--color-surface-sunken, var(--surface2)); }
.tbl-sticky .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-sticky .checkbox-col { width: 36px; }
.tbl-toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); flex-wrap:wrap; }
.tbl-density-toggle { display:inline-flex; border:1px solid var(--color-border); border-radius:6px; overflow:hidden; }
.tbl-density-toggle button {
    background: var(--color-surface); border: none; padding: 4px 10px;
    font-size: 12px; cursor: pointer; color: var(--color-ink-muted);
}
.tbl-density-toggle button.active { background: var(--color-primary); color: #fff; }
.bulk-action-bar {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(100px);
    background: var(--color-ink-strong); color: #fff; border-radius: 999px; padding: 10px 22px;
    display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-lg);
    transition: transform .25s ease;
    z-index: 500;
    font-size: 13px;
}
.bulk-action-bar.visible { transform: translateX(-50%) translateY(0); }
.bulk-action-bar .ba-btn { background: var(--color-primary); color: #fff; border: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; }
.bulk-action-bar .ba-clear { background: transparent; color: #fff; border: 1px solid #ffffff44; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; }

/* ── Scroll-to-top floating button ───────────────────────────────
   Bottom-right (bulk-action-bar owns bottom-center) so the two never
   overlap on a page that has both a long table and an active selection. */
.scroll-top-btn {
    position: fixed; right: 24px; bottom: 24px; z-index: 400;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--color-primary); color: #fff; border: none;
    font-size: 18px; line-height: 1; cursor: pointer;
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, background .12s ease;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--color-primary-hover, var(--color-primary)); }
@media (max-width: 768px) {
    /* Clear the mobile .bottom-nav bar — .main reserves 70px for it (line ~2714). */
    .scroll-top-btn { bottom: 76px; right: 16px; width: 40px; height: 40px; font-size: 16px; }
}

/* ── Status quick-filter chips ────────────────────────────────────
   One-click shortcuts for the most common status-dropdown values on a
   list page. Plain links (not JS) so they work identically to the
   dropdown they shortcut — same query param, same server-side filter. */
.status-chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.status-chip {
    padding: 5px 13px; font-size: 12px; font-weight: 600;
    color: var(--color-ink-muted); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 999px;
    text-decoration: none; white-space: nowrap; transition: all .12s ease;
}
.status-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.status-chip.active { color: #fff; border-color: transparent; }
.status-chip.active.chip-neutral { background: var(--color-primary); }
.status-chip.active.chip-success { background: var(--color-success); }
.status-chip.active.chip-danger  { background: var(--color-danger); }
.status-chip.active.chip-warning { background: var(--color-warning); }
/* Matches the .s-closed badge convention: closed is a neutral end-state,
   not a semantic color — grey, not red/green/blue. */
.status-chip.active.chip-muted   { background: var(--color-ink-muted); }

/* ── Slide-over panel ─────────────────────────────────────────── */
.slideover-overlay { position: fixed; inset: 0; background: rgba(15,23,36,.4); z-index: 8000; opacity: 0; pointer-events: none; transition: opacity .2s; }
.slideover-overlay.open { opacity: 1; pointer-events: auto; }
.slideover {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
    background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
    transform: translateX(110%); transition: transform .25s ease;
    z-index: 8001; display: flex; flex-direction: column;
}
.slideover.open { transform: translateX(0); }
.slideover-header { padding: 14px 18px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 10px; }
.slideover-header .so-title { font-size: 15px; font-weight: 700; color: var(--color-ink-strong); flex: 1; }
.slideover-header .so-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--color-ink-muted); }
.slideover-body { flex: 1; overflow-y: auto; padding: 18px; }
.slideover-footer { padding: 14px 18px; border-top: 1px solid var(--color-border); display: flex; gap: 10px; justify-content: flex-end; background: var(--color-surface-sunken, var(--surface2)); }

/* ── Two-pane (Loan Create) ───────────────────────────────────── */
.two-pane { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.two-pane > .pane-form { min-width: 0; }
.two-pane > .pane-preview { position: sticky; top: calc(var(--topbar-h) + 16px); }
.preview-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 16px; }
.preview-card h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-ink-muted); margin-bottom: 10px; font-weight: 600; }
.preview-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.preview-row.total { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 14px; color: var(--color-ink-strong); }
.preview-row .v { font-variant-numeric: tabular-nums; }
.ltv-gauge { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.ltv-gauge .ltv-fill { height: 100%; background: var(--color-success); transition: width .2s, background .2s; }
.ltv-gauge.warn .ltv-fill { background: var(--color-warning); }
.ltv-gauge.danger .ltv-fill { background: var(--color-danger); }
.ltv-status { font-size: 12px; margin-top: 6px; color: var(--color-success); font-weight: 600; }
.ltv-status.warn { color: var(--color-warning); }
.ltv-status.danger { color: var(--color-danger); }

@media (max-width: 1024px) {
    .two-pane { grid-template-columns: 1fr; }
    .two-pane > .pane-preview { position: static; }
}

/* ── Bottom nav (mobile only) ─────────────────────────────────── */
.bottom-nav { display: none; }
@media (max-width: 768px) {
    .bottom-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0;
        background: var(--color-surface); border-top: 1px solid var(--color-border);
        box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
        z-index: 200; padding: 6px 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
    .bottom-nav a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 6px 4px; text-decoration: none; color: var(--color-ink-muted);
        font-size: 10px; font-weight: 600;
    }
    .bottom-nav a.active { color: var(--color-primary); }
    .bottom-nav a .bn-icon { font-size: 20px; }
    .main { padding-bottom: 70px !important; }
}

/* ════════════════════════════════════════════════════════════════
   FinPay restyle overlay (Phase B)
   Surgical layer that lifts existing components into the FinPay
   look without changing markup. Sits at the bottom so its rules
   beat earlier declarations of the same selector.
   ════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR · violet gradient + ambient glow ─────────────────── */
.sidebar {
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2, #1F1660) 100%);
    box-shadow: 1px 0 0 rgba(255,255,255,0.04) inset, 4px 0 24px rgba(17,17,26,0.18);
    overflow: hidden;
}
.sidebar::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -100px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%);
    pointer-events: none;
}

.sidebar-logo {
    border-bottom: 1px solid rgba(255,255,255,0.10);
    position: relative;
    z-index: 1;
}
.logo-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 40%, transparent);
    color: #fff;
    font-weight: 800;
}
.logo-text .logo-name {
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.logo-text .logo-version {
    color: rgba(255,255,255,0.62);
}

/* Tenant badge — tinted glass card */
.tenant-badge {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius);
    position: relative;
    z-index: 1;
}
.tenant-badge .tenant-code {
    color: var(--sidebar-accent, #FBBF24);
    font-weight: 700;
}
.tenant-badge .tenant-name {
    color: #FFFFFF;
    font-weight: 700;
}
.tenant-badge .tenant-branch {
    color: rgba(255,255,255,0.70);
}

.nav { position: relative; z-index: 1; }
.nav-label { color: rgba(255,255,255,0.55); font-weight: 700; }

.nav-item {
    color: rgba(255,255,255,0.78);
    border-radius: 10px;
    position: relative;
    padding-left: 28px;
}
.nav-item::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background 0.15s, transform 0.15s, width 0.15s, height 0.15s;
}
.nav-item:hover {
    background: rgba(255,255,255,0.06);
    color: #FFFFFF;
}
.nav-item:hover::before {
    background: rgba(255,255,255,0.65);
}
.nav-item.active {
    background: rgba(255,255,255,0.10);
    color: #FFFFFF;
    font-weight: 700;
}
.nav-item.active::before {
    background: var(--sidebar-accent, #FBBF24);
    width: 5px;
    height: 5px;
}
.nav-item .nav-icon { color: inherit; }

.nav-badge {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #FFFFFF;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 32%, transparent);
}
.nav-item.active .nav-badge {
    background: rgba(255,255,255,0.22);
    box-shadow: none;
}

.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.10);
    position: relative;
    z-index: 1;
}
.user-avatar {
    background: linear-gradient(135deg, var(--color-accent), #B8A6FF);
    color: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.20);
}
.user-name { color: #FFFFFF; font-weight: 700; }
.user-role { color: rgba(255,255,255,0.62); }
.logout-btn { color: rgba(255,255,255,0.62); }
.logout-btn:hover { color: #FFFFFF; }

/* ── TOPBAR · cleaner divider, brand-tinted accents ───────────── */
.topbar {
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 0 var(--color-border), 0 0 transparent;
    backdrop-filter: saturate(140%);
}
.topbar-title {
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.breadcrumb { font-weight: 500; }

.date-chip {
    background: var(--color-primary-soft);
    border: 1px solid transparent;
    color: var(--color-primary);
    font-weight: 700;
    font-family: var(--font-body);
}

.btn-new {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #FFFFFF;
    border-radius: 12px;
    padding: 9px 20px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent);
    font-weight: 700;
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-new:hover {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary));
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 36%, transparent);
}

/* ── CARDS · borderless + soft shadow + bigger radius ─────────── */
.card {
    border: 1px solid transparent;
    border-radius: var(--radius-card, 16px);
    box-shadow: var(--shadow);
}
.card-header {
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
}
.card-title {
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.2px;
}

/* Stat / KPI cards */
.stat-card {
    border: 1px solid transparent;
    border-radius: var(--radius-card, 16px);
    box-shadow: var(--shadow);
    transition: transform 0.18s, box-shadow 0.18s;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.stat-label {
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--text-dim);
}
.stat-value {
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text);
}
.stat-value.c-gold { color: var(--primary, var(--gold)); }
.stat-value.c-green { color: var(--green); }
.stat-value.c-red { color: var(--red); }
.stat-value.c-blue { color: var(--blue); }

/* ── BUTTONS · gradient primary, pill-friendly radii ──────────── */
.btn {
    border-radius: 12px;
    font-weight: 700;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #FFFFFF;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary));
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 36%, transparent);
}
.btn-success {
    background: var(--green);
    box-shadow: 0 4px 12px rgba(16,185,129,0.24);
}
.btn-success:hover { background: #047857; }
.btn-danger {
    background: var(--red);
    box-shadow: 0 4px 12px rgba(239,68,68,0.24);
}
.btn-danger:hover { background: #B91C1C; }
.btn-ghost {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--text);
    box-shadow: none;
}
.btn-ghost:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ── FORM FIELDS · violet focus ring ──────────────────────────── */
input:focus, select:focus, textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* ── SECTION TITLE · subtle violet underline, no italic ───────── */
.section-title {
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--text);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 16px;
}

/* ── STATUS PILLS · keep semantic colors, refine padding ─────── */
.status {
    padding: 4px 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* ── TABLE · softer header band, hover violet tint ────────────── */
thead th {
    background: var(--surface2);
    color: var(--text-dim);
    font-weight: 700;
    letter-spacing: 0.6px;
}
tbody tr:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.td-mono {
    color: var(--color-primary);
    font-weight: 700;
}
.td-mono a { color: var(--color-primary); }

/* ── CHIPS · keep semantic, tweak padding/letter ──────────────── */
.chip {
    padding: 3px 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.chip-gold {
    background: var(--gold-bg);
    color: var(--primary, var(--gold-dark));
}

/* ── CALC BOX · tinted violet panel ───────────────────────────── */
.calc-box {
    background: var(--color-primary-soft);
    border: 1px solid transparent;
    border-radius: var(--radius-card, 16px);
}
.calc-row {
    border-bottom: 1px dashed color-mix(in srgb, var(--color-primary) 24%, transparent);
}
.calc-val {
    color: var(--color-primary);
    font-family: var(--font-body);
    font-weight: 700;
}

/* ── ALERTS · use border-left accent rather than full border ──── */
.alert {
    border-radius: var(--radius);
    border: none;
    border-left: 4px solid currentColor;
    padding: 14px 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.alert-gold {
    color: var(--primary);
    background: var(--color-primary-soft);
}
.alert-green {
    color: var(--green);
    background: var(--green-bg);
}

/* ── DASH HERO (optional helper for FinPay-style banners) ─────── */
.dash-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: 20px;
    padding: 26px 30px;
    color: #FFFFFF;
    box-shadow: var(--shadow-hero);
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
}
.dash-hero::after {
    content: '';
    position: absolute;
    top: -80px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    pointer-events: none;
}
.dash-hero::before {
    content: '';
    position: absolute;
    bottom: -160px;
    right: 100px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.dash-hero > * { position: relative; z-index: 2; }
.dash-hero .dh-label {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 6px;
}
.dash-hero .dh-amount {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1;
    margin-bottom: 6px;
}
.dash-hero .dh-delta { font-size: 13px; opacity: 0.92; }
.dash-hero .dh-delta .up { color: #6EE7B7; font-weight: 800; }

/* ── DARK-MODE TUNING ─────────────────────────────────────────── */
:root[data-color-mode="dark"] .card,
:root[data-color-mode="dark"] .stat-card {
    border-color: var(--border);
}
:root[data-color-mode="dark"] .topbar { background: var(--surface); }
:root[data-color-mode="dark"] .btn-ghost {
    background: var(--surface2);
    color: var(--text);
}
:root[data-color-mode="dark"] tbody tr:hover {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

/* ── REDUCED MOTION ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .stat-card, .btn, .btn-primary, .btn-new {
        transition: none;
    }
    .stat-card:hover, .btn-primary:hover, .btn-new:hover {
        transform: none;
    }
}

/* ════════════════════════════════════════════════════════════════
   Control alignment patch — uniform field height, label rhythm,
   grid gap, button sizing, and section spacing across every form.
   No markup changes; this section wins the cascade by sitting at
   the bottom of site.css.
   ════════════════════════════════════════════════════════════════ */

:root {
    --ctl-h:        40px;
    --ctl-h-sm:     32px;
    --ctl-h-lg:     48px;
    --ctl-px:       14px;
    --ctl-radius:   10px;
    --label-mb:     6px;
    --field-mb:     16px;
    --grid-gap:     16px;
    --section-gap:  20px;
    --section-pad-x: 22px;
    --section-pad-y: 18px;
}

/* ── FORM CONTROLS — every input/select/textarea same height + look ── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="url"],
select {
    height: var(--ctl-h);
    padding: 0 var(--ctl-px);
    border-radius: var(--ctl-radius);
    font-size: 14px;
    line-height: 1.4;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--text);
    font-family: var(--font-body);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

textarea {
    min-height: calc(var(--ctl-h) * 2);
    padding: 10px var(--ctl-px);
    border-radius: var(--ctl-radius);
    font-size: 14px;
    line-height: 1.5;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--text);
    font-family: var(--font-body);
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

/* Native select chevron — manual draw so it doesn't drift */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
}

/* Date inputs — clean up native pickers */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

input::placeholder, textarea::placeholder { color: var(--ink-dim); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--bg);
    color: var(--ink-muted);
    cursor: not-allowed;
}

/* ── LABELS — uniform sizing + rhythm ───────────────────────────── */
label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: var(--label-mb);
    line-height: 1.4;
}

/* Required marker */
label .req,
label .text-danger,
.required-mark { color: var(--color-danger); font-weight: 700; margin-left: 2px; }

/* Inline help next to a label */
label .help,
label .hint-inline {
    color: var(--ink-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    margin-left: 6px;
}

/* ── FORM GROUP (.fg) — consistent vertical rhythm ──────────────── */
.fg {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    margin-bottom: 0;
}

.fg label { margin-bottom: var(--label-mb); }

.fg .hint,
.fg .field-hint,
.fg small {
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 6px;
    line-height: 1.45;
}

.fg .text-danger {
    font-size: 11px;
    color: var(--color-danger);
    margin-top: 6px;
    font-weight: 600;
    line-height: 1.4;
}

/* Span across full grid row when needed */
.fg.full,
.fg.span-all { grid-column: 1 / -1; }

/* ── GRID GAPS — col-N consistent across the app ────────────────── */
.col-2,
.col-3,
.col-4 {
    display: grid;
    gap: var(--grid-gap) calc(var(--grid-gap) + 2px);
    align-items: start;
}
.col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Mobile collapse — re-applied AFTER the col-N redefinitions above so it actually wins */
@media (max-width: 768px) {
    .col-2, .col-3, .col-4 { grid-template-columns: 1fr; }
}

/* col-N children inherit the field gap when stacked */
.col-2 > .fg + .fg,
.col-3 > .fg + .fg,
.col-4 > .fg + .fg { margin-top: 0; }

/* When .fg sits outside a grid (single column), keep field rhythm */
.card-body > .fg + .fg,
.card-body > * + .fg,
form > .fg + .fg { margin-top: var(--field-mb); }

/* ── BUTTONS — same height as inputs, no taller text ────────────── */
.btn {
    height: var(--ctl-h);
    padding: 0 18px;
    line-height: 1;
    align-items: center;
    border-radius: var(--ctl-radius);
}
.btn-sm  { height: var(--ctl-h-sm); padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn-lg  { height: var(--ctl-h-lg); padding: 0 22px; font-size: 14.5px; border-radius: 12px; }
.btn-xs  { height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: 7px; }

/* Buttons inside a .btn-row — uniform gap */
.btn-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--field-mb);
}

/* Form-action footer (sticky save bar pattern) */
.form-actions,
.action-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-actions .btn + .btn,
.action-bar .btn + .btn { margin-left: 0; }

/* ── CARD HEADER + BODY — consistent padding ────────────────────── */
.card-header {
    padding: var(--section-pad-y) var(--section-pad-x);
    align-items: center;
}
/* Was a hardcoded 22px 24px — didn't match the header's own tokens two
   lines up despite the comment above claiming "consistent padding". */
.card-body { padding: var(--section-pad-y) var(--section-pad-x); }
.card-body.p0 { padding: 0; }
.card-body > .col-2,
.card-body > .col-3,
.card-body > .col-4 { margin-bottom: 0; }
.card-body > .col-2 + .col-2,
.card-body > .col-3 + .col-3,
.card-body > .col-4 + .col-4,
.card-body > .col-2 + .col-3,
.card-body > .col-3 + .col-2,
.card-body > .col-4 + .col-2 { margin-top: var(--section-gap); }

/* ── SECTION TITLE — uniform heading rhythm ─────────────────────── */
.section-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.1px;
    color: var(--text);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    font-style: normal;
    font-family: var(--font-body);
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title + .col-2,
.section-title + .col-3,
.section-title + .col-4 { margin-top: 0; }

/* Sections that follow each other inside a card */
.section-title:not(:first-child) { margin-top: var(--section-gap); }

/* ── CHECKBOX / RADIO — vertically centered with labels ─────────── */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Inline label-with-checkbox pattern */
label.inline,
label.checkbox-label,
.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
    cursor: pointer;
}

/* ── INPUT PREFIX/SUFFIX — uniform inline layout ───────────────── */
.input-prefix,
.input-suffix,
.input-group-inline {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--color-border);
    border-radius: var(--ctl-radius);
    background: var(--color-surface);
    overflow: hidden;
    width: 100%;
    height: var(--ctl-h);
}
.input-prefix:focus-within,
.input-suffix:focus-within,
.input-group-inline:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.input-prefix > input,
.input-suffix > input,
.input-group-inline > input {
    border: none;
    box-shadow: none;
    height: auto;
    padding: 0 var(--ctl-px);
    flex: 1;
    background: transparent;
    border-radius: 0;
}
.input-prefix > input:focus,
.input-suffix > input:focus,
.input-group-inline > input:focus { box-shadow: none; }
.input-prefix > .pre,
.input-suffix > .suf {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--surface-2);
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 700;
    border-right: 1px solid var(--color-border);
}
.input-suffix > .suf { border-right: none; border-left: 1px solid var(--color-border); }

/* ── SEARCH ROW (filters above tables) — vertical alignment ─────── */
.search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-bottom: 10px;
}
.search-row > input,
.search-row > select,
.search-row > .search-inp,
.search-row > .filter-sel,
.search-row .btn { height: var(--ctl-h); margin: 0; }
.search-row > input,
.search-row > .search-inp { flex: 1; min-width: 220px; }
.search-row form { gap: 8px !important; row-gap: 8px !important; }
.search-row .fg { margin-bottom: 0 !important; }
.search-row .fg label { margin-bottom: 0; padding-right: 4px; white-space: nowrap; }

/* ── ALERTS — content alignment ─────────────────────────────────── */
/* Deliberately NOT display:flex. Alerts here are prose containing inline
   <strong>/<a>, so flex would make every element and every run of text its
   own flex item and space them apart — shredding the sentence and orphaning
   the punctuation that follows an element. Keep them block-level. */
.alert {
    padding: 14px 18px;
    line-height: 1.5;
}

/* ── KPI / STAT CARDS — consistent inner rhythm ─────────────────── */
.stat-card,
.kpi-card {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 96px;
}
.stat-card .stat-label,
.kpi-card .kpi-label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.stat-card .stat-value,
.kpi-card .kpi-value {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.05;
}

/* ── STATUS PILLS — center the dot/text properly ────────────────── */
.status,
.chip,
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.status::before { margin: 0; flex-shrink: 0; }

/* ── TABLE CELLS — vertical alignment + uniform padding ─────────── */
table { border-collapse: separate; border-spacing: 0; }
thead th,
tbody td {
    vertical-align: middle;
    padding: 12px 14px;
}
thead th { padding-top: 11px; padding-bottom: 11px; }

/* Numeric cells right-aligned with tabular numerals */
td.num, th.num,
td.right, th.right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── TWO-PANE FORMS — even gutter and column rhythm ─────────────── */
.two-pane {
    align-items: flex-start;
    gap: 20px;
}
.two-pane > .pane-form .card,
.two-pane > .pane-preview > .card { margin-bottom: 16px; }
.two-pane > .pane-preview > .card:last-child { margin-bottom: 0; }

/* ── PAGE HEADER — title row consistent baseline ────────────────── */
.page-head,
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.page-head > .actions,
.page-header > .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── TWO-PANE SUMMARY ROWS (already styled but tighten alignment) */
.preview-row {
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.preview-row .v {
    font-variant-numeric: tabular-nums;
    text-align: right;
    margin-left: auto;
}

/* ── SUB-PIXEL FIX FOR SAFARI/EDGE BORDER OFFSET ────────────────── */
.fg input,
.fg select,
.fg textarea { box-sizing: border-box; }

/* ════════════════════════════════════════════════════════════════
   COMMON PADDING / FORM-CARD CLEANUP — final cascade pass
   Keeps every form / list page visually aligned regardless of which
   author wrote it. Sits at the very bottom so it wins specificity.
   ════════════════════════════════════════════════════════════════ */

/* 1 ── Page wrapper: consistent inner padding everywhere */
.page {
    padding: 22px 28px;
    min-height: calc(100vh - var(--topbar-height, 56px));
}
@media (max-width: 768px) { .page { padding: 16px 14px; } }

/* 2 ── Form cards: expand to fill the full content area instead of
       sitting as a narrow ribbon with a sea of empty space on the right.
       View authors set inline `max-width:NNNpx` (480/520/600/680/720/780/
       820/860/880/900) — all are overridden here so cards use 100% of
       what `.page` allocates. The `.page` wrapper already adds 28px
       horizontal padding, which keeps the content from touching the
       viewport edge.

       Inner form layout (.col-2 / .form-grid) still controls column
       count, so individual inputs never become absurdly wide — they
       just get more breathing room and the right side of the page
       stops looking empty. */
.page > .card[style*="max-width:"],
.page > .card[style*="max-width :"],
.page > form[style*="max-width:"],
.page > div[style*="max-width:"] { max-width: none !important; width: 100%; }
/* Page-level wrappers that nest the card inside their own div */
.page > div > .card[style*="max-width:"],
.page > div > form[style*="max-width:"] { max-width: none !important; width: 100%; }

/* 3 ── Card body: uniform inner padding (cards built without .card-body
       wrapper still get breathing room) */
.page > .card { padding: 20px 22px; }
.page > .card .card-header,
.page > .card .card-hdr { margin: -20px -22px 14px; padding: 14px 22px; }
.page > .card > form { margin: 0; }

/* 4 ── Eliminate accidental yellow/gold left-borders on plain cards
       (some legacy authors used border-left:4px solid var(--gold) as a
       cheap accent — that fires on top of inputs and looks like a stripe). */
.page > .card:not([class*="alert"]):not([class*="warning"]):not([class*="hero"]) {
    border-left-width: 1px !important;
}

/* 5 ── Form rows: consistent column rhythm.
       Use flex-basis 0 so inline `style="flex:2"` from view authors actually
       gets 2× the share. Wraps cleanly via the @media rule below when the
       parent column is too narrow for two side-by-side inputs. */
/* `.form-row` keeps its flex behaviour so view authors can use inline
   `style="flex:N"` on children to set custom column widths.
   `.col-2` is intentionally NOT in this rule — it must remain a true
   2-column GRID (defined earlier in this stylesheet) so forms with
   many .fg children render two-up rather than cramming all fields
   into a single squashed row. */
.form-row {
    display: flex;
    gap: var(--grid-gap, 16px);
    flex-wrap: wrap;
    margin-bottom: var(--field-mb, 16px);
}
.form-row > .form-field,
.form-row > .fg {
    flex: 1 1 0;       /* equal share by default; inline flex:N overrides grow */
    min-width: 0;      /* allow shrinking when needed */
}
@media (max-width: 640px) {
    .form-row > .form-field,
    .form-row > .fg {
        flex: 1 1 100%;
    }
}
/* `.col-full` spans the whole row regardless of how many columns
   `.col-2` resolves to (1 / 2 / 3 / 4 depending on viewport). */
.col-2 > .col-full,
.col-2 > .fg.col-full { grid-column: 1 / -1; }

/* Auto-fit grid: with Option B in effect, form cards span the full
   page width (~1500px on 1080p, ~1080px on 1366), so an inflexible
   2-column layout would still leave huge gaps. Switch `.col-2` to
   auto-fit with a 360px minimum track size — yields:
     · 4 columns at ~1500px (full HD desktop)
     · 3 columns at ~1100px (1366 laptop)
     · 2 columns at ~750px  (small laptop / split screen)
     · 1 column  at ~380px  (mobile)
   Auto-fit collapses empty tracks, so a 2-field form on a wide card
   becomes 2 columns of ~750px each (input cap below keeps it sane).
   This rule wins because it's later in the stylesheet than the
   earlier `.col-2 { grid-template-columns: repeat(2, minmax(0,1fr)) }`
   declarations. */
.col-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* Cap individual input width so on a 2-column-fallback (each column
   ~700px) a phone/pincode field doesn't stretch absurdly wide. The
   field group keeps its full column allocation; only the input/select
   inside is bounded. Textareas and full-span fields stay 100%. */
.col-2 > .fg > input,
.col-2 > .fg > select,
.col-3 > .fg > input,
.col-3 > .fg > select { max-width: 540px; }
.col-2 > .fg > textarea,
.col-2 > .col-full > input,
.col-2 > .col-full > select,
.col-2 > .col-full > textarea,
.col-2 > .fg.col-full > input,
.col-2 > .fg.col-full > select,
.col-2 > .fg.col-full > textarea { max-width: none; }

/* On narrower viewports the @media rule at site.css:2152 already
   collapses .col-2 to a single column — that still applies because
   it's a media query and our auto-fit rule is non-media (specificity
   ties at media > non-media within the cascade). */

/* 6 ── Page header: even spacing above first card */
.page > .page-hdr,
.page > .page-header { margin-bottom: 18px; }

/* 7 ── List/table cards: same outer rhythm as form cards */
.page > .card .tbl-wrap { margin: 0 -22px -20px; }
.page > .card .tbl-wrap table { width: 100%; }
.page > .card .tbl-wrap table th:first-child,
.page > .card .tbl-wrap table td:first-child { padding-left: 22px; }
.page > .card .tbl-wrap table th:last-child,
.page > .card .tbl-wrap table td:last-child  { padding-right: 22px; }

/* 8 ── Focus outline: cleaner, keeps inside the field instead of bleeding out */
.inp:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-primary, #5B45D9);
    outline-offset: -1px;
    border-color: var(--color-primary, #5B45D9);
}

/* ════════════════════════════════════════════════════════════════
   USER WIDGET (top-right of every authenticated page)
   ════════════════════════════════════════════════════════════════ */
.user-widget { position: relative; margin-left: 8px; }

.user-widget-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 10px 5px 5px;
    background: var(--color-bg, #F5F6FA);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.user-widget-btn:hover { border-color: var(--color-primary, #5B45D9); background: #fff; }

.uw-avatar {
    width: 32px; height: 32px; border-radius: 999px;
    background: linear-gradient(135deg, #5B45D9, #7B61FF);
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .3px;
    flex-shrink: 0;
}
.uw-avatar.lg { width: 46px; height: 46px; font-size: 16px; }

.uw-meta { text-align: left; line-height: 1.2; min-width: 0; }
.uw-name { font-weight: 600; font-size: 13px; color: var(--color-ink-strong, #0F172A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.uw-role { font-size: 11px; color: var(--color-ink-muted, #64748B); display: flex; align-items: center; gap: 6px; }
.uw-role > span:first-child { white-space: nowrap; }

.uw-pill {
    font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
    padding: 1px 6px; border-radius: 999px; text-transform: uppercase;
}
.uw-pill.sa { background: linear-gradient(135deg, #F59E0B, #FBBF24); color: #fff; }
.uw-pill.ho { background: #EEEAFE; color: #5B45D9; }
.uw-pill.br { background: #DBEAFE; color: #1D4ED8; }

.uw-caret {
    margin-left: 4px; font-size: 11px; color: var(--color-ink-muted, #64748B);
    transition: transform .15s;
}

/* Dropdown panel */
.user-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 320px; max-width: 92vw;
    background: #fff;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .06);
    z-index: 1000;
    opacity: 0; pointer-events: none;
    transform: translateY(-6px) scale(.98);
    transition: opacity .15s, transform .15s;
    overflow: hidden;
}
.user-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.uw-header {
    display: flex; gap: 12px; align-items: center;
    padding: 16px 18px;
    background: linear-gradient(135deg, #F5F3FF 0%, #EEEAFE 100%);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
}
.uw-h-name { font-weight: 700; font-size: 15px; color: var(--color-ink-strong, #0F172A); }
.uw-h-sub  { font-size: 11.5px; color: #5B45D9; margin-top: 2px; word-break: break-all; }

.uw-grid { padding: 12px 18px; border-bottom: 1px solid #F1F5F9; }
.uw-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 12.5px;
}
.uw-l { color: var(--color-ink-muted, #64748B); font-weight: 500; }
.uw-v { color: var(--color-ink, #0F172A); font-weight: 600; text-align: right; max-width: 200px; word-break: break-word; }

.uw-actions { padding: 8px; }
.uw-link {
    display: block; padding: 9px 12px; border-radius: 8px;
    font-size: 13px; color: var(--color-ink, #0F172A); text-decoration: none;
    transition: background .12s;
}
.uw-link:hover { background: #F5F3FF; color: #5B45D9; }

.uw-footer { padding: 8px; border-top: 1px solid #F1F5F9; background: #FAFBFC; }
.uw-logout {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: #B91C1C;
    text-decoration: none; transition: background .12s;
}
.uw-logout:hover { background: #FEE2E2; }

/* Compact mode for narrower viewports */
@media (max-width: 900px) {
    .uw-meta { display: none; }
    .uw-caret { display: none; }
    .user-widget-btn { padding: 4px; }
}

/* Dark mode (uses existing .dark class on <html> if app supports it) */
html.dark .user-widget-btn { background: #1F1B33; border-color: #ffffff20; }
html.dark .user-widget-btn:hover { background: #2A2543; }
html.dark .uw-name { color: #E2E8F0; }
html.dark .user-menu { background: #1F1B33; border-color: #ffffff20; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
html.dark .uw-header { background: linear-gradient(135deg, #2A2543, #1F1B33); }
html.dark .uw-h-name { color: #fff; }
html.dark .uw-link { color: #CBD5E1; }
html.dark .uw-link:hover { background: #2A2543; color: #fff; }


/* ════════════════════════════════════════════════════════════════
   NOTIFICATION BELL (top-bar 🔔 — Approvals + Alerts tabs)
   Mirrors .user-menu's panel language so the two top-right dropdowns
   read as one family. Panel is wider (380px) because bell rows carry
   three lines; below 480px it goes full-bleed instead of overflowing.
   ════════════════════════════════════════════════════════════════ */
.nb-wrap { position: relative; }

.nb-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 34px;
    background: var(--color-bg, #F5F6FA);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 8px;
    font-size: 16px; line-height: 1; cursor: pointer;
    transition: all .15s; font-family: inherit;
}
.nb-btn:hover { background: var(--color-primary-soft, #F5F3FF); border-color: var(--color-primary, #5B45D9); }
.nb-btn[aria-expanded="true"] { background: var(--color-primary-soft, #F5F3FF); border-color: var(--color-primary, #5B45D9); }

/* Badge — red when something is on THIS user's rung, slate when the
   count is only informational. Hidden entirely at zero (no "0" chip). */
.nb-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: #64748B; color: #fff;
    font-size: 10px; font-weight: 800; line-height: 18px;
    text-align: center; letter-spacing: -.2px;
    border: 2px solid #fff;
    box-sizing: content-box;
}
.nb-badge.mine { background: #DC2626; }
.nb-badge[hidden] { display: none; }

/* Gentle one-shot pulse when the count grows — draws the eye without
   an animation that keeps running and becomes wallpaper. */
@keyframes nb-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.nb-badge.bump { animation: nb-pulse .45s ease-out; }

.nb-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 380px; max-width: 92vw;
    background: #fff;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .06);
    z-index: 1000;
    opacity: 0; pointer-events: none;
    transform: translateY(-6px) scale(.98);
    transition: opacity .15s, transform .15s;
    overflow: hidden;
}
.nb-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.nb-tabs {
    display: flex; align-items: stretch;
    border-bottom: 1px solid var(--color-border, #E5E7EB);
    background: linear-gradient(135deg, #F5F3FF 0%, #EEEAFE 100%);
}
.nb-tab {
    flex: 1; padding: 11px 8px;
    background: none; border: none; border-bottom: 2px solid transparent;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--color-ink-muted, #64748B);
    cursor: pointer; transition: color .12s, border-color .12s;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.nb-tab:hover { color: var(--color-ink-strong, #0F172A); }
.nb-tab[aria-selected="true"] { color: #5B45D9; border-bottom-color: #5B45D9; }
.nb-tab .ct {
    font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
    background: #E2E8F0; color: #475569;
}
.nb-tab[aria-selected="true"] .ct { background: #5B45D9; color: #fff; }
.nb-tab .ct[hidden] { display: none; }

.nb-list { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }

/* Row = link + dismiss button as SIBLINGS (a <button> inside an <a> is invalid
   content model and gives the row two competing activation targets). */
.nb-item {
    display: flex; align-items: flex-start;
    padding-right: 8px;
    border-bottom: 1px solid #F1F5F9;
    border-left: 3px solid transparent;
    transition: background .12s;
}
.nb-item:hover { background: #F8FAFC; }
.nb-item.sev-high     { border-left-color: #F59E0B; }
.nb-item.sev-critical { border-left-color: #DC2626; }

.nb-link {
    flex: 1; min-width: 0;
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 4px 11px 11px;
    text-decoration: none; color: inherit;
}
.nb-link:focus-visible { outline: 2px solid #5B45D9; outline-offset: -2px; border-radius: 4px; }

.nb-ic { font-size: 16px; line-height: 1.3; flex-shrink: 0; }
.nb-body { min-width: 0; flex: 1; }
.nb-title {
    font-size: 12.5px; font-weight: 700;
    color: var(--color-ink-strong, #0F172A);
    line-height: 1.35;
}
.nb-sub, .nb-meta {
    font-size: 11.5px; color: var(--color-ink-muted, #64748B);
    margin-top: 2px; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-meta { font-variant-numeric: tabular-nums; }
.nb-age { font-size: 10.5px; color: #94A3B8; white-space: nowrap; flex-shrink: 0; margin-top: 1px; }

/* Per-row dismiss — client-side only (localStorage), never a DB write. */
.nb-x {
    border: none; background: none; cursor: pointer;
    color: #CBD5E1; font-size: 14px; line-height: 1;
    margin-top: 11px; padding: 3px 5px; border-radius: 4px; flex-shrink: 0;
    opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.nb-item:hover .nb-x { opacity: 1; }
.nb-x:hover { color: #DC2626; background: #FEE2E2; }
.nb-x:focus-visible { opacity: 1; outline: 2px solid #5B45D9; outline-offset: 1px; }

.nb-empty {
    padding: 40px 20px; text-align: center;
    font-size: 12.5px; color: var(--color-ink-muted, #64748B);
}
.nb-empty .ic { display: block; font-size: 30px; opacity: .35; margin-bottom: 8px; }

.nb-warn {
    padding: 9px 14px; font-size: 11.5px;
    background: #FEF3C7; color: #92400E; border-bottom: 1px solid #FDE68A;
}

.nb-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; border-top: 1px solid #F1F5F9; background: #FAFBFC;
}
.nb-foot a, .nb-foot button {
    font-size: 12px; font-weight: 600; color: #5B45D9;
    text-decoration: none; background: none; border: none;
    cursor: pointer; font-family: inherit; padding: 4px 6px; border-radius: 6px;
}
.nb-foot a:hover, .nb-foot button:hover { background: #F5F3FF; }

@media (max-width: 480px) {
    .nb-panel { position: fixed; top: 56px; right: 8px; left: 8px; width: auto; max-width: none; }
}

html.dark .nb-btn { background: #1F1B33; border-color: #ffffff20; }
html.dark .nb-btn:hover,
html.dark .nb-btn[aria-expanded="true"] { background: #2A2543; border-color: #7B61FF; }
html.dark .nb-badge { border-color: #1F1B33; }
html.dark .nb-panel { background: #1F1B33; border-color: #ffffff20; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
html.dark .nb-tabs { background: linear-gradient(135deg, #2A2543, #1F1B33); border-bottom-color: #ffffff20; }
html.dark .nb-tab { color: #94A3B8; }
html.dark .nb-tab:hover { color: #E2E8F0; }
html.dark .nb-tab[aria-selected="true"] { color: #A78BFA; border-bottom-color: #A78BFA; }
html.dark .nb-tab .ct { background: #3A3454; color: #CBD5E1; }
html.dark .nb-tab[aria-selected="true"] .ct { background: #7B61FF; color: #fff; }
html.dark .nb-item { border-bottom-color: #ffffff12; }
html.dark .nb-item:hover { background: #2A2543; }
html.dark .nb-title { color: #E2E8F0; }
html.dark .nb-sub, html.dark .nb-meta { color: #94A3B8; }
html.dark .nb-foot { background: #191527; border-top-color: #ffffff12; }
html.dark .nb-foot a, html.dark .nb-foot button { color: #A78BFA; }
html.dark .nb-foot a:hover, html.dark .nb-foot button:hover { background: #2A2543; }
html.dark .nb-warn { background: #3A2E12; color: #FCD34D; border-bottom-color: #ffffff20; }
html.dark .nb-x:hover { color: #FCA5A5; background: #4A1D1D; }


/* ── File input styling ─────────────────────────────────────────── */
input[type="file"] {
    cursor: pointer;
    border: 1px dashed var(--border, #d1d5db);
    border-radius: 6px;
    padding: 6px 8px;
    background: var(--surface2, #f9fafb);
    width: 100%;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    box-sizing: border-box;
}
input[type="file"]:hover {
    border-color: var(--primary, #1a5276);
    background: var(--surface, #fff);
}
input[type="file"]::file-selector-button {
    background: var(--primary, #1a5276);
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    margin-right: 10px;
    transition: opacity .15s;
}
input[type="file"]::file-selector-button:hover {
    opacity: .85;
}

/* ── ERROR MESSAGE CONTEXT & VALIDATION HINTS (Phase 1.1) ────────── */

.form-error-context {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background-color: #FEE2E2;
    border-left: 3px solid #EF4444;
    border-radius: 4px;
    font-size: 13px;
    color: #7F1D1D;
}

.form-error-context strong {
    display: block;
    font-weight: 600;
    color: #DC2626;
}

.form-error-context .error-hint {
    font-size: 12px;
    color: #9F1239;
    margin-top: 2px;
}

.form-error-context .error-recovery {
    font-size: 12px;
    color: #7F1D1D;
    margin-top: 4px;
    font-style: italic;
}

/* Field-level error state */
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
    border-color: #EF4444 !important;
    background-color: #FEF2F2;
}

.form-group.has-error label {
    color: #DC2626;
    font-weight: 600;
}

/* Error tooltip on fields */
.field-error-tooltip {
    position: absolute;
    background-color: #DC2626;
    color: white;
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 11px;
    margin-top: -25px;
    margin-left: 0;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    pointer-events: none;
}

.field-error-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 8px;
    border: 4px solid transparent;
    border-top-color: #DC2626;
}

/* Dark mode adjustments for error messages */
[data-color-mode="dark"] .form-error-context {
    background-color: #7F1D1D;
    border-left-color: #FCA5A5;
    color: #FEE2E2;
}

[data-color-mode="dark"] .form-error-context strong {
    color: #FCA5A5;
}

[data-color-mode="dark"] .form-error-context .error-hint {
    color: #FECACA;
}

[data-color-mode="dark"] .form-error-context .error-recovery {
    color: #FEE2E2;
}

[data-color-mode="dark"] .form-group.has-error input,
[data-color-mode="dark"] .form-group.has-error textarea,
[data-color-mode="dark"] .form-group.has-error select {
    border-color: #FCA5A5 !important;
    background-color: #5F1D1D;
}

[data-color-mode="dark"] .form-group.has-error label {
    color: #FCA5A5;
}

[data-color-mode="dark"] .field-error-tooltip {
    background-color: #FCA5A5;
    color: #1F2937;
}

[data-color-mode="dark"] .field-error-tooltip::after {
    border-top-color: #FCA5A5;
}

/* ── CALCULATION PREVIEW STYLING (Phase 1.2) ────────────────────── */

.calc-preview-panel {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface0, #f5f6fa);
    border-left: 3px solid var(--primary, #5b45d9);
    border-radius: 6px;
    margin-top: 10px;
    font-size: 13px;
}

.calc-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.calc-preview-label {
    color: var(--text-muted, #6b7280);
    font-weight: 500;
    flex: 1;
}

.calc-preview-value {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary, #5b45d9);
    min-width: 120px;
    text-align: right;
}

.calc-preview-value.high {
    color: var(--red, #ef4444);
}

.calc-preview-value.good {
    color: var(--green, #10b981);
}

.calc-preview-hint {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    font-style: italic;
    margin-top: 4px;
}

.calc-preview-section {
    border-top: 1px solid var(--border, #e5e7eb);
    padding-top: 8px;
    margin-top: 8px;
}

.calc-preview-section:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* Dark mode */
[data-color-mode="dark"] .calc-preview-panel {
    background: #2A2A38;
    border-left-color: #7B61FF;
}

[data-color-mode="dark"] .calc-preview-label {
    color: #A0A0B8;
}

[data-color-mode="dark"] .calc-preview-value {
    color: #7B61FF;
}

[data-color-mode="dark"] .calc-preview-value.high {
    color: #FCA5A5;
}

[data-color-mode="dark"] .calc-preview-value.good {
    color: #6EE7B7;
}

[data-color-mode="dark"] .calc-preview-section {
    border-top-color: #3A3A48;
}

/* ── ENHANCED FILE UPLOAD STYLING (Phase 1.3) ────────────────── */

.file-upload-wrapper {
    position: relative;
}

.file-drop-zone {
    position: relative;
    padding: 16px 12px;
    border: 2px dashed var(--border, #d1d5db);
    border-radius: 8px;
    background: var(--surface0, #f5f6fa);
    transition: all 0.2s ease;
    cursor: pointer;
}

.file-drop-zone input[type="file"] {
    cursor: pointer;
}

.file-drop-zone.drag-active {
    border-color: var(--primary, #5b45d9);
    background: rgba(91, 69, 217, 0.05);
    box-shadow: 0 0 0 3px rgba(91, 69, 217, 0.1);
}

.file-size-hint {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    margin-top: 6px;
    text-align: center;
}

.file-preview-container {
    margin-top: 12px;
}

.file-preview-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface0, #f5f6fa);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    position: relative;
}

.file-preview-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.file-preview-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: rgba(91, 69, 217, 0.1);
    border-radius: 6px;
    flex-shrink: 0;
}

.file-preview-info {
    flex: 1;
    min-width: 0;
}

.file-preview-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #1a1a2e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview-size {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    margin-top: 2px;
}

.file-preview-remove {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 50%;
    color: var(--text-muted, #6b7280);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-preview-remove:hover {
    background: #FEE2E2;
    border-color: #EF4444;
    color: #EF4444;
}

.file-upload-error {
    padding: 12px 14px;
    background: #FEE2E2;
    border: 1px solid #EF4444;
    border-radius: 6px;
    color: #7F1D1D;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dark mode */
[data-color-mode="dark"] .file-drop-zone {
    background: #2A2A38;
    border-color: #3A3A48;
}

[data-color-mode="dark"] .file-drop-zone.drag-active {
    border-color: #7B61FF;
    background: rgba(123, 97, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.15);
}

[data-color-mode="dark"] .file-size-hint {
    color: #A0A0B8;
}

[data-color-mode="dark"] .file-preview-item {
    background: #2A2A38;
    border-color: #3A3A48;
}

[data-color-mode="dark"] .file-preview-icon {
    background: rgba(123, 97, 255, 0.15);
}

[data-color-mode="dark"] .file-preview-name {
    color: #F5F5F7;
}

[data-color-mode="dark"] .file-preview-size {
    color: #A0A0B8;
}

[data-color-mode="dark"] .file-preview-remove {
    border-color: #3A3A48;
    color: #A0A0B8;
}

[data-color-mode="dark"] .file-preview-remove:hover {
    background: #7F1D1D;
    border-color: #FCA5A5;
    color: #FCA5A5;
}

[data-color-mode="dark"] .file-upload-error {
    background: #7F1D1D;
    border-color: #FCA5A5;
    color: #FEE2E2;
}

/* ── SPARKLINE STYLING (Phase 2.1) ──────────────────────────── */

.kpi-sparkline-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.kpi-sparkline {
    flex: 1;
    height: 40px;
    min-width: 80px;
}

.kpi-sparkline svg {
    width: 100%;
    height: 100%;
}

.kpi-trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--green, #10b981);
}

.kpi-trend-indicator.negative {
    background: rgba(239, 68, 68, 0.1);
    color: var(--red, #ef4444);
}

.kpi-trend-indicator.neutral {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-muted, #6b7280);
}

.kpi-trend-label {
    font-size: 10px;
    color: var(--text-muted, #6b7280);
    margin-top: 4px;
}

/* Dark mode */
[data-color-mode="dark"] .kpi-trend-indicator {
    background: rgba(110, 231, 183, 0.15);
    color: #6EE7B7;
}

[data-color-mode="dark"] .kpi-trend-indicator.negative {
    background: rgba(252, 165, 165, 0.15);
    color: #FCA5A5;
}

[data-color-mode="dark"] .kpi-trend-indicator.neutral {
    background: rgba(160, 160, 184, 0.15);
    color: #A0A0B8;
}

/* ── PERIOD-OVER-PERIOD COMPARISON (Phase 2.2) ──────────────────── */

.kpi-pop-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

.kpi-pop-badge.positive {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.kpi-pop-badge.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.kpi-pop-badge.neutral {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.kpi-pop-label {
    font-size: 9px;
    color: var(--text-muted, #6b7280);
    display: block;
    margin-top: 2px;
}

/* Dark mode */
[data-color-mode="dark"] .kpi-pop-badge.positive {
    background: rgba(110, 231, 183, 0.15);
    color: #6EE7B7;
}

[data-color-mode="dark"] .kpi-pop-badge.negative {
    background: rgba(252, 165, 165, 0.15);
    color: #FCA5A5;
}

[data-color-mode="dark"] .kpi-pop-badge.neutral {
    background: rgba(160, 160, 184, 0.15);
    color: #A0A0B8;
}

[data-color-mode="dark"] .kpi-pop-label {
    color: #A0A0B8;
}

[data-color-mode="dark"] .kpi-trend-label {
    color: #A0A0B8;
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR COLLAPSE / EXPAND  (icon rail)
   ──────────────────────────────────────────────────────────────────────
   State lives on <html class="sb-collapsed">, written by the pre-paint
   inline script in _Layout's <head> (localStorage key `sb-collapsed`) so
   a collapsed sidebar never flashes at full width during load.

   Desktop only. Below 769px the sidebar is the off-canvas hamburger
   drawer, so every rule below is inside a min-width query and the toggle
   handle is hidden.

   `!important` on the hide/centre rules is load-bearing: several sidebar
   rows (Dashboard Hub, Approvals, the greeting line) carry inline
   `style="display:flex;gap:9px;padding:9px 12px"` straight from the Razor
   markup, and inline styles outrank any selector without it.
   ══════════════════════════════════════════════════════════════════════ */

/* Handle straddling the sidebar's right edge.
   It CANNOT live inside .sidebar — that element sets `overflow: hidden`
   (site.css ~2755, clips the ::after ambient glow), which would clip a
   negatively-offset child. So it is a fixed-position sibling and its
   `left` tracks the sidebar width per breakpoint. */
.sb-rail-toggle {
    position: fixed;
    top: 74px;
    left: calc(var(--sidebar-w) - 13px);
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.20);
    background: var(--sidebar-bg, #0e1424);
    color: rgba(255,255,255,0.88);
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 320;                       /* above .sidebar (300) and .topbar (200) */
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    opacity: 0.55;
    transition: left 0.18s ease, opacity 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

    .sb-rail-toggle:hover {
        opacity: 1;
        background: var(--sidebar-accent, #FBBF24);
        color: #18150f;
        transform: scale(1.10);
    }

    .sb-rail-toggle:focus-visible {
        opacity: 1;
        outline: 2px solid var(--sidebar-accent, #FBBF24);
        outline-offset: 2px;
    }

/* .sidebar itself narrows to 220px here (see the 960px block above) */
@media (max-width: 960px) {
    .sb-rail-toggle { left: calc(220px - 13px); }
}

@media (max-width: 768px) {
    .sb-rail-toggle { display: none; }
}

@media (min-width: 769px) {
    /* Scoped to desktop ON PURPOSE: a bare `.sidebar { transition }` at the
       end of this file would outrank the drawer's `transition: transform`
       in the 768px block (media queries add no specificity, so source order
       decides) and the mobile hamburger drawer would snap instead of slide. */
    .sidebar { transition: width 0.18s ease; }
    .main    { transition: margin-left 0.18s ease; }

    html.sb-collapsed .sidebar       { width: var(--sidebar-rail-w); }
    html.sb-collapsed .main          { margin-left: var(--sidebar-rail-w); }
    html.sb-collapsed .sb-rail-toggle { left: calc(var(--sidebar-rail-w) - 13px); }

    /* Anything that needs horizontal room simply goes away in rail mode. */
    html.sb-collapsed .sidebar .logo-text,
    html.sb-collapsed .sidebar .tenant-badge,
    html.sb-collapsed .sidebar .menu-search-wrap,
    html.sb-collapsed .sidebar .greet,
    html.sb-collapsed .sidebar .smart-sb-section > h6,
    html.sb-collapsed .sidebar .fav-empty,
    html.sb-collapsed .sidebar .fav-pill > .star-toggle,
    html.sb-collapsed .sidebar .fav-pill > span:not(.icon),
    html.sb-collapsed .sidebar .nav > .nav-item > span:not(:first-child),
    html.sb-collapsed .sidebar a.nav-grp-link > span:not(:first-child),
    html.sb-collapsed .sidebar details.nav-grp > summary > *:not(:first-child) {
        display: none !important;
    }

    /* Every remaining row becomes a centred icon button. */
    html.sb-collapsed .sidebar .nav > .nav-item,
    html.sb-collapsed .sidebar .fav-pill,
    html.sb-collapsed .sidebar a.nav-grp-link,
    html.sb-collapsed .sidebar details.nav-grp > summary {
        justify-content: center !important;
        gap: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* .nav-item's accent dot is anchored at left:14px (site.css ~2818). With
       the row centred it reads as a stray speck beside the icon. */
    html.sb-collapsed .sidebar .nav > .nav-item::before { display: none; }

    /* Group rows inherit summary's 13px, the two pinned links carry an inline
       16px — even them up so the rail reads as one column of icons. */
    html.sb-collapsed .sidebar details.nav-grp > summary > span:first-child,
    html.sb-collapsed .sidebar a.nav-grp-link > span:first-child,
    html.sb-collapsed .sidebar .fav-pill > .icon {
        font-size: 16px;
    }

    html.sb-collapsed .sidebar details.nav-grp > summary,
    html.sb-collapsed .sidebar a.nav-grp-link { padding-top: 9px; padding-bottom: 9px; }
    html.sb-collapsed .sidebar .fav-pill        { margin-bottom: 4px; }
    html.sb-collapsed .sidebar-logo             { justify-content: center; padding: 20px 0 16px; }
    html.sb-collapsed .sidebar .nav             { padding: 6px 6px; }
    html.sb-collapsed .sidebar .smart-sb         { padding: 8px 6px; gap: 4px; }
    html.sb-collapsed .sidebar .smart-sb-section { padding: 4px 0; }
    html.sb-collapsed .sidebar .fav-strip,
    html.sb-collapsed .sidebar .compliance-strip { padding: 4px; }

    /* A scrollbar would eat ~8 of the 68px rail — keep the wheel, drop the bar. */
    html.sb-collapsed .sidebar .nav { scrollbar-width: none; }
    html.sb-collapsed .sidebar .nav::-webkit-scrollbar { width: 0; height: 0; }

    /* The active group is server-rendered as <details open>, so on a
       collapsed first paint its whole item list would wrap into the 68px
       rail before any script runs. In rail mode the list only ever shows
       as the hover fly-out below. */
    html.sb-collapsed .sidebar .nav-grp-items { display: none; }

    /* ── Hover fly-out ────────────────────────────────────────────────
       .nav is an `overflow-y: auto` scroll container and .sidebar is
       `overflow: hidden`, so an absolutely-positioned panel would be
       clipped at the rail edge. The panel is therefore position:fixed
       (fixed descendants escape overflow clipping) and placed by the
       sbRail script in ~/js/sidebar-rail.js. */
    html.sb-collapsed .sidebar .nav-grp-items.sb-flyout {
        display: flex;
        position: fixed;
        z-index: 400;
        min-width: 236px;
        max-width: 320px;
        max-height: 74vh;
        overflow-y: auto;
        padding: 10px 12px 12px;
        background: var(--sidebar-bg, #0e1424);
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 10px;
        box-shadow: 0 14px 38px rgba(0,0,0,0.48);
    }

    /* Group name as the fly-out heading — the rail hides the summary label. */
    html.sb-collapsed .sidebar .nav-grp-items.sb-flyout::before {
        content: attr(data-grp-title);
        display: block;
        padding: 0 4px 8px;
        margin-bottom: 6px;
        font-size: 10px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--sidebar-accent, #FBBF24);
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .main, .sb-rail-toggle { transition: none; }
}