/* 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;
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    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);
}

.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;
}

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);
    }

.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;
}

/* ── 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;
    -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 */
}

/* ── 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;
}

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

.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);
}

/* ── 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: 11px; 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; }

/* 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; }

/* ── 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;
}
.card-body { padding: 22px 24px; }
.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 ─────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    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; }


/* ── 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;
}