/* Custom Styles for Glorious Homes Accounting */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --sidebar-bg: #0f172a;
    --surface: #ffffff;
    --border: #e2e8f0;
}

body,
body.font-sans,
.font-sans {
    font-family: 'Inter', 'Hind Siliguri', 'Noto Sans Bengali', ui-sans-serif, system-ui, sans-serif;
    background-color: #f1f5f9;
    color: #0f172a;
}

/* Ensure Bangla (Avro) text — typed or displayed — always uses a Bengali-capable
   font, including in form controls which inherit from body. */
input,
textarea,
select,
button {
    font-family: 'Inter', 'Hind Siliguri', 'Noto Sans Bengali', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- MOBILE SIDEBAR ---------- */
.sidebar {
    transition: transform 0.25s ease;
}
@media (max-width: 1023px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: 0 10px 40px rgba(2, 6, 23, 0.4);
    }
    .sidebar.open {
        transform: translateX(0);
    }
}

/* ---------- NAV SECTIONS ---------- */
.nav-section {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    padding: 14px 12px 4px;
}

.nav-scroll {
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

/* ---------- VIEW TRANSITION ---------- */
.view-fade {
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Glassmorphism & Shadow Cards */
.card-shadow {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.modal-backdrop {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}

/* Financial Table Formatting */
.table-finance {
    width: 100%;
    border-collapse: collapse;
}

.table-finance th {
    background-color: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.table-finance td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.8rem;
}

.table-finance tbody tr {
    transition: background 0.15s ease;
}

.table-finance tr:hover {
    background-color: #f0f6ff;
}

@media screen {
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
    }
    .table-scroll table {
        width: 100%;
        border-collapse: collapse;
    }
    /* On phones, let wide tables scroll inside their card instead of cramming or overflowing the page. */
    @media (max-width: 767px) {
        .table-scroll table {
            min-width: 620px;
        }
    }
    /* Statement preview: fill + scroll on screen, but print rules take over when printing. */
    .print-container {
        overflow-x: auto;
    }
}

/* Brand-colored text selection on every device/browser. */
::selection {
    background: #2563eb;
    color: #ffffff;
}
::-moz-selection {
    background: #2563eb;
    color: #ffffff;
}

/* Keyboard navigation: clear focus ring, but never on mouse. */
:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Respect OS 'reduce motion' setting. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Badges */
.badge-active { background-color: #dcfce7; color: #15803d; }
.badge-completed { background-color: #dbeafe; color: #1d4ed8; }
.badge-pending { background-color: #fef3c7; color: #b45309; }
.badge-closed { background-color: #f1f5f9; color: #475569; }

/* Primary Buttons */
.btn-primary {
    background-color: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.55rem 1rem;
    border-radius: 0.5rem;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}

/* PRINT MEDIA STYLES FOR REPORT GENERATION */
@page {
    size: A4 portrait;
    margin: 20mm 12mm 16mm 12mm;
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 8pt;
        color: #64748b;
        font-family: Arial, Helvetica, sans-serif;
    }
}

@media print {
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
        font-size: 11pt !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    #mainContent {
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .no-print {
        display: none !important;
    }
    .print-only {
        display: block !important;
    }
    /* Hide the app shell so only the report document is printed. */
    #sidebar,
    header,
    #topbar {
        display: none !important;
    }
    .page-break {
        page-break-before: always;
        break-before: page;
    }
    /* Each major statement section starts on a fresh page — no mid-section cuts. */
    .print-section {
        page-break-before: always;
        break-before: page;
    }
    .print-section:first-child {
        page-break-before: auto;
        break-before: auto;
    }
    .print-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-container * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* Tables: repeat headers on every page, never split a row, compact cells. */
    .print-container table {
        width: 100% !important;
        border-collapse: collapse;
        table-layout: auto;
    }
    .print-container thead {
        display: table-header-group;
    }
    .print-container tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .print-container th,
    .print-container td {
        padding: 4px 5px !important;
        font-size: 9pt !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    /* Keep summary cards & visual blocks intact on one page. */
    .print-container .sum-card,
    .print-container .meet-member-card,
    .print-container .recon-chip,
    .print-container .bar-track {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .print-container .meet-member-card {
        overflow: visible !important;
    }
    .print-container .meet-member-card > .card-head {
        page-break-after: avoid;
        break-after: avoid;
    }
    .print-container h3.meeting-section-title {
        font-size: 12pt !important;
    }
    .print-container .meeting-section-title {
        page-break-after: avoid;
        break-after: avoid;
    }
    .print-container .sec-num {
        box-shadow: none;
        min-width: 24px;
        height: 18px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* Statement tables: full grid borders, dark repeating header, soft zebra. */
    .print-container .meet-table th,
    .print-container .meet-table td {
        border: 0.75pt solid #cbd5e1 !important;
    }
    .print-container .meet-table thead {
        display: table-header-group;
    }
    .print-container .meet-table thead th {
        background: #e2edfd !important;
        color: #1e3a8a !important;
        border-bottom: 1.5pt solid #93c5fd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-container .meet-card-head {
        background: #dbeafe !important;
        color: #0f172a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-container .totals-row {
        background: #eef4ff !important;
        color: #1e3a8a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-container .sec-page {
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 0.5pt solid #cbd5e1 !important;
    }
    /* Every logical section starts a fresh report page. */
    .print-container .print-section {
        page-break-before: always;
        break-before: page;
    }
    .print-container .print-section:first-child {
        page-break-before: auto;
        break-before: auto;
    }
    /* Cover band prints at full colour, no shadow, no radius. */
    .print-container .stmt-cover {
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-container .stmt-cover-band {
        background: linear-gradient(90deg, #f6d77c, #d4a238, #f6d77c) !important;
    }
    .print-container .stmt-monogram,
    .print-container .stmt-audit-box {
        background: #1e3a8a !important;
        border-color: rgba(255, 255, 255, .35) !important;
    }
    .print-container .stmt-meta-chips > div {
        background: rgba(255, 255, 255, .16) !important;
        border-color: rgba(255, 255, 255, .28) !important;
    }
    /* Repeating header + footer on every physical page. */
    .print-container .stmt-print-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 11mm;
        padding: 0 12mm;
        background: #ffffff;
        border-bottom: 1pt solid #cbd5e1;
        font-size: 8pt;
        color: #475569;
        z-index: 20;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-container .stmt-print-head .ph-left {
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #1e3a8a;
    }
    .print-container .stmt-print-head .ph-right {
        font-weight: 700;
        color: #475569;
    }
    .print-container .stmt-print-foot {
        display: block;
        position: fixed;
        left: 24mm;
        right: 24mm;
        bottom: 2mm;
        text-align: center;
        font-size: 8pt;
        color: #64748b;
        border-top: 0.5pt solid #cbd5e1;
        padding-top: 3px;
        background: #fff;
    }
    .print-container .print-section:last-child {
        margin-bottom: 28px;
    }
    /* Tighter statement tables so 7-9 column grids fit A4 cleanly. */
    .print-container .meet-table th,
    .print-container .meet-table td {
        font-size: 8pt !important;
        padding: 3px 4px !important;
    }
    .print-container .meet-table td {
        white-space: normal;
        font-variant-numeric: tabular-nums;
    }
    .print-container .meet-table th {
        white-space: nowrap;
    }
    /* Cover + highlights scale down to fit page 1. */
    .print-container .stmt-cover-main h1 {
        font-size: 19pt;
    }
    .print-container .stmt-cover-main h2 {
        font-size: 10.5pt;
    }
    .print-container .stmt-org-name {
        font-size: 15pt;
    }
    .print-container .stmt-meta-chips b {
        font-size: 9pt;
    }
    .print-container .stmt-meta-chips span {
        font-size: 7.5pt;
    }
    .print-container .stmt-highlights {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
        margin-top: 10px;
    }
    .print-container .hl-card {
        padding: 6px 6px 6px 8px;
        border-radius: 8px;
    }
    .print-container .hl-icon {
        width: 22px;
        height: 22px;
        font-size: 9px;
        border-radius: 6px;
    }
    .print-container .hl-meta b {
        font-size: 10pt;
    }
    .print-container .hl-meta i {
        font-size: 6.5pt;
    }
    .print-container .sum-card .sum-value {
        font-size: 12.5pt;
        margin-top: 1px;
    }
    /* ---- Page 1 compaction: cover + highlights + KPI + reconciliation all on ONE page ---- */
    .print-container .stmt-cover {
        padding: 12px 18px 9px !important;
    }
    .print-container .stmt-cover::before,
    .print-container .stmt-cover::after {
        display: none !important;
    }
    .print-container .stmt-cover-head {
        gap: 10px;
    }
    .print-container .stmt-monogram {
        width: 38px;
        height: 38px;
        font-size: 14px;
        border-radius: 9px;
    }
    .print-container .stmt-org-name {
        font-size: 12.5pt;
    }
    .print-container .stmt-org-sub {
        font-size: 9pt;
        margin-top: 1px;
    }
    .print-container .stmt-org-contact {
        font-size: 8pt;
        margin-top: 3px;
    }
    .print-container .stmt-audit-box {
        padding: 4px 8px;
        gap: 2px;
    }
    .print-container .stmt-audit-box span {
        font-size: 6.5pt;
        letter-spacing: .16em;
    }
    .print-container .stmt-cover-band {
        margin: 8px -18px 0;
        height: 2px;
    }
    .print-container .stmt-cover-main {
        margin-top: 9px;
    }
    .print-container .stmt-cover-main h1 {
        font-size: 15.5pt;
        margin: 4px 0 0;
    }
    .print-container .stmt-cover-main h2 {
        font-size: 9pt;
        margin: 2px 0 0;
    }
    .print-container .stmt-proj {
        margin-top: 5px;
        font-size: 9.5pt;
    }
    .print-container .stmt-kicker {
        font-size: 8pt;
    }
    .print-container .stmt-meta-chips {
        margin-top: 9px;
        gap: 5px;
    }
    .print-container .stmt-meta-chips > div {
        padding: 4px 8px;
    }
    .print-container .stmt-meta-chips b {
        font-size: 8pt;
        margin-top: 2px;
    }
    .print-container .stmt-meta-chips span {
        font-size: 6.5pt;
    }
    .print-container .stmt-highlights {
        margin-top: 8px;
        gap: 5px;
    }
    .print-container .hl-icon {
        width: 18px;
        height: 18px;
        font-size: 8px;
        border-radius: 5px;
    }
    .print-container .hl-card {
        padding: 5px 6px 5px 8px;
        gap: 6px;
    }
    .print-container .hl-meta b {
        font-size: 9pt;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .print-container .hl-meta i {
        font-size: 6pt;
        margin-top: 1px;
    }
    .print-container .sum-card {
        padding: 7px 5px;
        border-radius: 7px;
    }
    .print-container .sum-card::before {
        display: none !important;
    }
    .print-container .sum-card .sum-label {
        font-size: 6.5pt;
    }
    /* KPI card row + reconciliation card pack tightly on page 1. */
    .print-container .stmt-summary-grid {
        gap: 5px;
        margin-bottom: 10px;
    }
    .print-container .card-shadow.border-l-4.border-l-blue-600 {
        padding: 10px 13px !important;
        margin-bottom: 10px !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .print-container .card-shadow.border-l-4.border-l-blue-600 .grid {
        gap: 6px !important;
    }
    .print-container .card-shadow.border-l-4.border-l-blue-600 .mb-3 {
        margin-bottom: 5px !important;
    }
    .print-container .card-shadow.border-l-4.border-l-blue-600 .mt-2 {
        margin-top: 3px !important;
    }
    .print-container .card-shadow.border-l-4.border-l-blue-600 .space-y-1\\.5 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1px !important;
    }
    .print-container .card-shadow.border-l-4.border-l-blue-600 .py-1 {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }
    /* Professional letterhead keeps together with title row. */
    .print-letterhead,
    .print-letterhead .print-title-row {
        page-break-after: avoid;
        break-after: avoid;
    }
    /* Report tables with dark header: repeat header on every page. */
    .print-report-table thead {
        display: table-header-group;
    }
    .print-report-table th {
        background-color: #0f172a !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-report-table tbody td,
    .print-report-table thead th {
        border: 1px solid #cbd5e1 !important;
        padding: 5px 6px !important;
        font-size: 9pt !important;
    }
    .print-report-table tbody tr,
    .print-report-table tfoot tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .print-footer-line {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    /* Soft zebra rows make long ledgers easy to scan on paper. */
    .print-container table tbody tr:nth-child(even) {
        background-color: #f1f5f9 !important;
    }
    /* Grids keep their screen layout on paper (no flattening). */
    /* Voucher printing: only the voucher document is printed. */
    body.print-voucher-mode #sidebar,
    body.print-voucher-mode header,
    body.print-voucher-mode #mainContent {
        display: none !important;
    }
    body.print-voucher-mode #modalBackdrop {
        position: static !important;
        display: block !important;
        padding: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
    }
    body.print-voucher-mode #modalContainer {
        width: 100% !important;
        max-width: none !important;
    }
    body.print-voucher-mode .print-area {
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.print-voucher-mode .print-area h1 {
        font-size: 20pt !important;
    }
    body.print-voucher-mode .print-area table {
        font-size: 10pt !important;
    }
}

/* ---------- MEETING STATEMENT: CARDS, BARS, FILTERS ---------- */
.sum-card { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; padding: 14px 12px; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.sum-card .sum-label { font-size: 10px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sum-card .sum-value { font-size: 20px; font-weight: 800; margin-top: 4px; color: #0f172a; }
.bar-track { background: #e2e8f0; border-radius: 5px; height: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #2563eb, #60a5fa); }
.bar-fill.red { background: linear-gradient(90deg, #dc2626, #f87171); }
.bar-fill.green { background: linear-gradient(90deg, #059669, #34d399); }
.recon-chip { border-radius: 9999px; padding: 4px 12px; font-size: 11px; font-weight: 700; display: inline-block; }
.statement-filters { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; }
.meeting-section-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: .04em; }
.meeting-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #cbd5e1, rgba(203, 213, 225, 0)); margin-left: 4px; }
.sec-num { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 7px; border-radius: 6px; background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff; font-size: 10px; font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow: 0 2px 4px rgba(37, 99, 235, .25); }
.table-head-light th { background: linear-gradient(180deg, #eef4ff, #e2edfd); color: #1e3a8a; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 9px 8px; white-space: nowrap; border-bottom: 1px solid #bfdbfe; }
.table-head-light th:last-child { text-align: right; }
.meet-card-head { background: linear-gradient(135deg, #dbeafe, #eff6ff) !important; color: #0f172a !important; border-bottom: 1px solid #bfdbfe; }
.totals-row td { border-top: 1px solid #bfdbfe !important; }
.sec-left { display: inline-flex; align-items: center; gap: 10px; }
.sec-page { display: inline-flex; align-items: center; white-space: nowrap; font-size: 10px; font-weight: 700; color: #475569; background: #f1f5f9; border: 1px solid #cbd5e1; padding: 4px 10px; border-radius: 9999px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }

/* ---------- STATEMENT COVER BAND ---------- */
.stmt-cover { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, #0f2a63 0%, #1d4ed8 55%, #4f46e5 100%); color: #fff; box-shadow: 0 18px 40px -18px rgba(29, 78, 216, .55); padding: 22px 24px 16px; }
.stmt-cover::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; top: -140px; right: -80px; background: radial-gradient(circle, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%); }
.stmt-cover::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; bottom: -150px; left: -90px; box-shadow: 0 0 0 40px rgba(255, 255, 255, .05), 0 0 0 90px rgba(255, 255, 255, .04); }
.stmt-cover-head { position: relative; display: flex; align-items: flex-start; gap: 14px; }
.stmt-monogram { flex: none; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; letter-spacing: .02em; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.stmt-org-name { font-size: 20px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; }
.stmt-org-sub { font-size: 11px; color: rgba(255, 255, 255, .78); margin-top: 2px; }
.stmt-org-contact { font-size: 10px; color: rgba(255, 255, 255, .65); margin-top: 5px; }
.stmt-audit-box { margin-left: auto; text-align: center; border: 1px solid rgba(255, 255, 255, .45); border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; gap: 3px; transform: rotate(2deg); }
.stmt-audit-box span { font-size: 8px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #ffe9ae; }
.stmt-cover-band { height: 3px; margin: 16px -24px 0; background: linear-gradient(90deg, #f6d77c, #d4a238, #f6d77c); position: relative; }
.stmt-cover-main { position: relative; margin-top: 18px; }
.stmt-cover-main h1 { font-size: 26px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.stmt-cover-main h2 { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin: 4px 0 0; }
.stmt-proj { margin-top: 10px; font-size: 11.5px; color: rgba(255, 255, 255, .9); }
.stmt-meta-chips { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.stmt-meta-chips > div { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; padding: 9px 12px; }
.stmt-meta-chips span { display: block; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.stmt-meta-chips b { display: block; font-size: 11px; color: #fff; margin-top: 3px; font-weight: 700; }
.stmt-print-foot { display: none; }
.stmt-print-head { display: none; }
@media (max-width: 640px) {
    .stmt-meta-chips { grid-template-columns: repeat(2, 1fr); }
    .stmt-audit-box { display: none; }
    .stmt-highlights { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- FINANCIAL HIGHLIGHTS BAND ---------- */
.stmt-highlights { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.hl-card { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px 12px 12px 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); overflow: hidden; }
.hl-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--hl, #2563eb); }
.hl-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; background: var(--hl, #2563eb); box-shadow: 0 3px 8px -2px rgba(37, 99, 235, .5); }
.hl-meta b { display: block; font-size: 15px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-meta i { display: block; font-style: normal; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-top: 2px; }
.hl-inc { --hl: #059669; }
.hl-exp { --hl: #dc2626; }
.hl-net { --hl: #2563eb; }
.hl-mem { --hl: #7c3aed; }
.hl-wdr { --hl: #d97706; }

/* Cover fine-tuning */
.stmt-kicker { font-size: 9px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #ffe9ae; }
.stmt-cover-main h1 { font-size: 26px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 0; }
.stmt-meta-chips span { display: flex; align-items: center; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.stmt-meta-chips span i { font-size: 9px; }
.stmt-meta-chips b { display: block; font-size: 11px; color: #fff; margin-top: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.meet-table tbody tr:nth-child(even) td { background: #f7fafd; }
.meet-table tbody tr:hover td { background: #eef4ff; }
.statement-hr { border: 0; border-top: 2px solid #0f172a; margin: 18px 0; }
.verify-ok { color: #047857; }
.verify-bad { color: #b45309; }

/* ============================================================
   LIGHT THEME REFRESH — softer, brighter, easier to read
   ============================================================ */
body {
    background: linear-gradient(180deg, #f6f9fc 0%, #eef3f9 100%) fixed;
}

/* ---- Sidebar: light glass panel ---- */
#sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%) !important;
    border-right: 1px solid #e6edf7;
    color: #334155 !important;
    box-shadow: 2px 0 22px rgba(15, 23, 42, 0.05);
}
#sidebar .border-b,
#sidebar .border-t {
    border-color: #eef2f8 !important;
}
#sidebar h1 {
    color: #0f172a !important;
}
#sidebar .text-blue-400 {
    color: #2563eb !important;
}
#sidebar .nav-section {
    color: #9aa9bd !important;
}
#sidebar .nav-link {
    color: #475569 !important;
    border-radius: 10px;
    font-weight: 600;
}
#sidebar .nav-link:hover {
    background: linear-gradient(90deg, #eaf1ff 0%, #f4f8ff 100%) !important;
    color: #1d4ed8 !important;
}
#sidebar .nav-link:active {
    transform: scale(0.98);
}
#sidebar .nav-link.bg-blue-800,
#sidebar .nav-link.bg-blue-800:hover {
    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}
#sidebar #userName {
    color: #0f172a !important;
}
#sidebar #userRole {
    color: #64748b !important;
}
#sidebar .text-slate-400 {
    color: #94a3b8 !important;
}
#sidebar button:hover .fa-cog {
    color: #1d4ed8 !important;
}
#sidebar button:hover .fa-sign-out-alt {
    color: #dc2626 !important;
}
#sidebar .nav-scroll {
    scrollbar-color: #cbd5e1 transparent;
}

/* ---- Topbar: soft elevation ---- */
header.sticky {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #eef2f8 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

/* ---- Cards: lighter, airier ---- */
.card-shadow {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.06);
    border: 1px solid #eef2f8;
}

/* ---- Table headers: soft tint ---- */
.table-finance th {
    background: linear-gradient(180deg, #f8fbfe 0%, #f1f6fc 100%);
    color: #5b6b82;
}

/* ---- Inputs & selects: gentle focus glow ---- */
input,
select,
textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input:focus,
select:focus,
textarea:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ---- Summary cards: subtle tinted top border for scannability ---- */
.sum-card {
    border: 1px solid #eef2f8;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.sum-card::before {
    content: "";
    display: block;
    height: 3px;
    width: 34px;
    margin: 0 auto 8px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

/* ---- Buttons: more satisfying ---- */
button,
.btn-primary {
    transition: all 0.18s ease;
    cursor: pointer;
}
button:active,
.btn-primary:active {
    transform: translateY(1px) scale(0.99);
}
.bg-blue-600 {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}
.bg-blue-600:hover {
    background-color: #2563eb !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.32);
    transform: translateY(-1px);
}
.bg-blue-700:hover {
    background-color: #1d4ed8 !important;
}
.bg-indigo-600 {
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.22);
}
.bg-indigo-600:hover {
    background-color: #4f46e5 !important;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32);
    transform: translateY(-1px);
}
.bg-indigo-700:hover {
    background-color: #4338ca !important;
}
.bg-emerald-600 {
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.22);
}
.bg-emerald-600:hover {
    background-color: #059669 !important;
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.32);
    transform: translateY(-1px);
}
.bg-emerald-700:hover {
    background-color: #047857 !important;
}
.bg-red-600 {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}
.bg-red-600:hover {
    background-color: #dc2626 !important;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.3);
    transform: translateY(-1px);
}
.bg-red-700:hover {
    background-color: #b91c1c !important;
}
.bg-amber-500 {
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}
.bg-amber-500:hover {
    background-color: #f59e0b !important;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.3);
    transform: translateY(-1px);
}
.bg-slate-900:hover {
    background-color: #1e293b !important;
    transform: translateY(-1px);
}

/* ---- Badges: slightly richer ---- */
.badge-active,
.badge-completed,
.badge-pending,
.badge-closed {
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* ---- Dashboard KPI cards: softer colored glow ---- */
.kpi-card {
    position: relative;
    overflow: hidden;
}
.kpi-card::after {
    content: "";
    position: absolute;
    right: -20px;
    top: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.06);
}

/* ============================================================
   PROFESSIONAL RESPONSIVE LAYOUT — every view scales cleanly
   ============================================================ */
/* Keep content readable and organized on very wide screens. */
#mainContent {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

/* Page headers (title left, actions right) wrap gracefully on small screens. */
@media (max-width: 640px) {
    #mainContent .flex.justify-between.card-shadow:not(.kpi-card) {
        flex-wrap: wrap;
        gap: 12px;
    }
    #mainContent .flex.justify-between.card-shadow:not(.kpi-card) > div {
        min-width: 100%;
    }
    #mainContent .flex.justify-between.card-shadow:not(.kpi-card) > .flex,
    #mainContent .flex.justify-between.card-shadow:not(.kpi-card) > button {
        width: 100%;
    }
    #mainContent .flex.justify-between.card-shadow:not(.kpi-card) > .flex > button {
        flex: 1;
    }
    #mainContent .grid.gap-4,
    #mainContent .grid.gap-6 {
        row-gap: 12px;
    }
}

/* Nicer multi-column grids on tablets: two columns instead of a squeeze. */
@media (min-width: 641px) and (max-width: 1023px) {
    #mainContent .grid.md\:grid-cols-3,
    #mainContent .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Interactive cards lift slightly on hover (project / stat cards). */
.raise-hover {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.raise-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

/* Consistent, modern empty states. */
.empty-state {
    padding: 28px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}
.empty-state i {
    display: block;
    font-size: 26px;
    margin-bottom: 8px;
    color: #cbd5e1;
}

/* ============================================================
   SETTINGS PAGE — overflow-safe, balanced layout
   ============================================================ */
/* Grid children can shrink so long values never inflate a column and
   push the whole page into horizontal overflow. */
.settings-brick {
    min-width: 0;
}
/* Label/value rows: allow the value side to wrap instead of spilling. */
.settings-dl {
    gap: 12px;
    align-items: baseline;
}
.settings-dl dt {
    flex-shrink: 0;
}
.settings-dl dd {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: right;
}
@media (max-width: 640px) {
    .settings-dl {
        flex-wrap: wrap;
    }
    .settings-dl dd {
        text-align: left;
    }
}
/* Keep left cards even-height with the stacked right column. */
.card-stretch {
    display: flex;
    flex-direction: column;
}
.push-bottom {
    margin-top: auto;
}

/* Settings cards: on tablet widths stack every row full-width so no
   grid cell is left empty and nothing overflows. */
@media (min-width: 641px) and (max-width: 1023px) {
    #settingsView .grid.lg\:grid-cols-3 {
        grid-template-columns: minmax(0, 1fr);
    }
    #settingsView .grid.lg\:grid-cols-3 > .lg\:col-span-2 {
        grid-column: auto;
    }
}