/* =========================================================================
   LithoPulse — stylesheet
   Matched to the reference template design system: Inter type,
   sky-blue accent, light/dark theme toggle, topbar + panel/stat-card
   layout (no sidebar), pill buttons, status pills.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0px; padding: 0; }

:root, :root.light {
    --bg: #f0f4f8; --surface: #ffffff; --card: #ffffff; --card2: #f1f5f9;
    --border: #cbd5e1; --accent: #0284c7; --accent-light: #e0f2fe;
    --green: #059669; --green-light: #d1fae5;
    --red: #b91c1c; --red-light: #fef2f2;
    --amber: #c2410c; --amber-light: #fff7ed;
    --purple: #6366f1; --purple-light: #eef2ff;
    --blue: #2563eb; --blue-light: #eff6ff;
    --text: #0f172a; --muted: #64748b; --subtle: #94a3b8;
    --hover: #f1f5f9; --accent-muted: rgba(2,132,199,0.08);
    --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
    --radius: 12px;
}
:root.dark {
    --bg: #0b0f1a; --surface: #1a2235; --card: #1a2235; --card2: #1e293b;
    --border: #2a3750; --accent: #38bdf8; --accent-light: rgba(56,189,248,0.12);
    --green: #34d399; --green-light: rgba(52,211,153,0.12);
    --red: #f87171; --red-light: rgba(248,113,113,0.12);
    --amber: #fb923c; --amber-light: rgba(251,146,60,0.12);
    --purple: #818cf8; --purple-light: rgba(129,140,248,0.12);
    --blue: #60a5fa; --blue-light: rgba(96,165,250,0.12);
    --text: #f1f5f9; --muted: #94a3b8; --subtle: #64748b;
    --hover: #1e293b; --accent-muted: rgba(56,189,248,0.10);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow: 0 4px 12px rgba(0,0,0,0.4);
}

body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 16px; line-height: 1.55; transition: background .3s, color .3s; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ── Topbar ── */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; min-height: 60px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 200;
    box-shadow: var(--shadow-sm);
    gap: 10px 18px;
}
.logo { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.5px; display: flex; align-items: baseline; gap: 4px; }
.logo span { color: var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pill-btn {
    padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.94rem; font-weight: 600; color: var(--text); background: none;
    cursor: pointer; font-family: var(--font); text-decoration: none; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
}
.pill-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pill-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.btn-icon {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 9px; background: none; color: var(--text);
    cursor: pointer; transition: all .2s; font-size: 1rem;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.btn-icon.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }

.user-pill { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.94rem; }
.user-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.94rem;
    text-transform: uppercase;
}

/* ── Header nav (category links + dropdowns beside the theme button) ── */
.topbar-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.top-link {
    padding: 8px 12px; border-radius: 8px; font-size: 0.94rem; font-weight: 700;
    color: var(--muted); background: none; border: none; cursor: pointer;
    font-family: var(--font); text-decoration: none; transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.top-link:hover { color: var(--text); background: var(--card2); text-decoration: none; }
.top-link.active { color: var(--accent); background: var(--accent-light); }
.top-link .caret { transition: transform 0.15s; flex-shrink: 0; }

.nav-group { position: relative; }
.nav-group.open .caret { transform: rotate(180deg); }
.nav-group.open .top-link { color: var(--text); background: var(--card2); }
.nav-group.open .top-link.active { color: var(--accent); background: var(--accent-light); }

.nav-dropdown {
    position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 190px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow); padding: 6px; z-index: 300;
    display: none; flex-direction: column; gap: 2px;
}
.nav-group.open .nav-dropdown { display: flex; }
.nav-dropdown a {
    padding: 9px 12px; border-radius: 8px; font-size: 0.94rem; font-weight: 600;
    color: var(--text); text-decoration: none; transition: background 0.15s;
}
.nav-dropdown a:hover { background: var(--card2); text-decoration: none; }
.nav-dropdown a.active { color: var(--accent); background: var(--accent-light); }

/* ── Searchable combo dropdown (e.g. Agent Name on the invoice form) ── */
.combo-wrap { position: relative; }
.combo-panel {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; max-height: 240px;
    overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow); padding: 6px; z-index: 1100; display: flex; flex-direction: column; gap: 2px;
}
.combo-option {
    padding: 9px 12px; border-radius: 8px; font-size: 0.86rem; font-weight: 500;
    color: var(--text); cursor: pointer; transition: background 0.15s;
}
.combo-option:hover, .combo-option.active { background: var(--card2); }
.combo-add-option { color: var(--accent); font-weight: 600; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 11px; }
.combo-empty { padding: 9px 12px; font-size: 0.94rem; color: var(--muted); }

/* Hamburger — hidden on desktop */
.hamburger-btn { display: none !important; }

/* Mobile drawer — hidden on desktop */
.mobile-drawer { display: none; }

@media (max-width: 900px) {
    /* Hide desktop-only elements */
    .topbar-nav  { display: none !important; }
    .desktop-only { display: none !important; }

    /* Show hamburger */
    .hamburger-btn { display: flex !important; }

    /* Topbar needs relative for absolute drawer */
    .topbar { position: relative; }

    /* Drawer */
    .mobile-drawer {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        padding: 10px 14px 16px;
        gap: 2px;
        z-index: 250;
    }
    .mobile-drawer.open { display: flex; }
    .mobile-drawer .top-link { width: 100%; justify-content: flex-start; padding: 10px 12px; }
    .mobile-drawer .nav-group { width: 100%; }
    .mobile-drawer .nav-group .top-link { justify-content: space-between; }
    .mobile-drawer .nav-dropdown {
        position: static; box-shadow: none; border: none;
        border-left: 2px solid var(--accent-light);
        border-radius: 0; margin: 4px 0 4px 12px;
        padding: 4px 0; background: transparent;
    }
    .mobile-drawer .nav-dropdown a { padding: 8px 14px; font-size: 0.94rem; }
    .mobile-drawer-footer {
        display: flex; align-items: center; justify-content: space-between;
        border-top: 1px solid var(--border); margin-top: 10px; padding-top: 12px;
    }
}

.container { width: 100%; max-width: none; margin: 0; padding: 28px 20px 60px; }
.page-title { font-size: 2rem; font-weight: 800; margin-bottom: 4px; }
.page-sub { color: var(--muted); font-size: 1rem; margin-bottom: 24px; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.page-head-row .page-title, .page-head-row .page-sub { margin-bottom: 4px; }

/* ── Tabs (used for in-page section switches where relevant) ── */
.tabs { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tab-btn {
    padding: 10px 18px; border: none; background: none; cursor: pointer; font-family: var(--font);
    font-weight: 700; font-size: 0.88rem; color: var(--muted); border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: all 0.15s; text-decoration: none;
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Stat cards ── */
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 1500px) { .cards { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cards { grid-template-columns: 1fr; } }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.stat-card .stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.stat-icon {
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--accent); flex-shrink: 0;
}
.stat-icon svg { width: 17px; height: 17px; }
.stat-card.variant-green .stat-icon { background: var(--green-light); color: var(--green); }
.stat-card.variant-red .stat-icon { background: var(--red-light); color: var(--red); }
.stat-card.variant-amber .stat-icon { background: var(--amber-light); color: var(--amber); }
.stat-card.variant-purple .stat-icon { background: var(--purple-light); color: var(--purple); }
.stat-card.variant-blue .stat-icon { background: var(--blue-light); color: var(--blue); }
.stat-label { font-size: 0.84rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: Black; margin-bottom: 6px; }
.stat-value { font-family: var(--mono); font-size: 1.625rem; font-weight: 700; }
.stat-caption { font-size: 0.86rem; color: var(--muted); margin-top: 6px; }
.stat-value.text-blue { color: var(--blue); }
.stat-value.text-amber { color: var(--amber); }
.stat-value.text-red { color: var(--red); }
.stat-value.text-purple { color: var(--purple); }
.stat-value.text-green { color: var(--green); }

/* ── Panels ── */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.panel-header { padding: 20px 22px 0; }
.panel-header.with-border { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.panel-title { font-size: 1.125rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.panel-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.panel-body { padding: 20px 22px; }
.panel-body.no-pad { padding: 0; }
.panel.pad .panel-body:first-child { padding-top: 22px; }
.chart-wrap { height: 280px; position: relative; }

.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
/* A grid-2 panel holding a scrollable table (.table-scroll-v) matches the
   height of its sibling (the Record Transaction form) like a normal grid-2
   pair (grid's default align-items:stretch) — the scroll box inside then
   fills that stretched height via flex, so it's the SAME white card
   background filling any leftover space (never the page background showing
   through below a shorter card), and once there are enough rows to exceed
   that height, it scrolls internally instead of growing past the form. */
.grid-2 > .panel:has(.table-scroll-v) { display: flex; flex-direction: column; }
.grid-2 > .panel:has(.table-scroll-v) > .panel-body.no-pad { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ── Filters ── */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters select, .filters input[type=date], .filters input[type=text] {
    padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--border);
    background: var(--bg); color: var(--text); font-family: var(--font); font-size: 0.94rem;
}

/* ── Table ── */
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

/* Scrollable long tables (e.g. Cashbook with 100+ rows) — fixed viewport height,
   header stays pinned while the body scrolls. Wrap the <table> in a
   <div class="table-scroll"> to opt in; layout is untouched otherwise. */
/* Scrollable long tables (e.g. Cashbook with 100+ rows) — fixed viewport height,
   header stays pinned while the body scrolls. Wrap the <table> in a
   <div class="table-scroll-v"> to opt in; layout is untouched otherwise.
   Named distinctly from the pre-existing .table-scroll (horizontal-scroll
   utility used by invoice line-item tables) so the two don't collide. */
.table-scroll-v { max-height: 70vh; overflow-y: auto; }
/* Inside a stretched grid-2 panel (see .grid-2 > .panel:has(...) above), let
   the box grow to fill the available height instead of only ever sizing to
   70vh — the scroll trigger should be "more transactions than fit the
   Record Transaction form's actual height", not an arbitrary viewport
   percentage, so the 70vh cap is lifted here and only applies once panels
   stack on narrower screens (no sibling to match). */
@media (min-width: 1001px) {
    .table-scroll-v { flex: 1; min-height: 240px; max-height: none; }
}
/* border-collapse:separate (instead of the table default of collapse) avoids
   a rendering glitch where, with a collapsed-border table, a sticky <thead>
   lets a sliver of the row underneath bleed through/overlap it by a pixel
   or two as you scroll. border-spacing:0 keeps cells visually touching. */
.table-scroll-v table { border-collapse: separate; border-spacing: 0; }
.table-scroll-v table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: 0 1px 0 var(--border); }

/* 3-dot row action menu: Edit/Delete stay hidden inside a small popover
   until the ⋮ trigger is clicked, instead of two always-visible buttons
   per row. */
.row-menu { position: relative; display: inline-block; text-align: right; }
.row-menu-trigger { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 4px 8px; border-radius: 6px; color: var(--muted); }
.row-menu-trigger:hover { background: var(--card2); color: var(--text); }
.row-menu-panel { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 6px; z-index: 5; min-width: 110px; }
.row-menu.open .row-menu-panel { display: flex; flex-direction: column; gap: 4px; }
.row-menu-panel .mini-btn { width: 100%; text-align: center; }
.row-menu-panel form { width: 100%; }

/* Floating variant — for tables inside a horizontally scrolling wrapper
   (.table-scroll). An overflow container clips an absolutely-positioned
   popover, so the last rows' menus would get cut off. position:fixed
   escapes the clipping; the page script sets top/right from the trigger's
   position each time the menu opens. */
.row-menu.floating .row-menu-panel { position: fixed; top: 0; right: 0; left: auto; z-index: 1000; }

/* Page-level Export button + its format popover (Sales Invoices) */
.export-wrap { position: relative; display: inline-block; }
.export-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 6px; z-index: 20; min-width: 190px; flex-direction: column; gap: 4px; }
.export-wrap.open .export-pop { display: flex; }
.export-pop .mini-btn { width: 100%; text-align: left; }

/* Long column names (e.g. "Pending Second Amount Due") wrap onto two lines
   instead of forcing the whole table very wide. */
th.th-wrap { white-space: normal; min-width: 112px; padding-left: 12px; padding-right: 12px; line-height: 1.25; }

/* Sales Invoices: the table is wider than most screens, so pin the ⋮ column
   to the right edge — it must stay reachable without scrolling sideways.
   Only in real-table layout (>1024px); below that rows collapse into cards.
   A sticky cell needs its own background or scrolled columns show through,
   and it forms its own stacking context, so the row with an open menu is
   lifted above the pinned cells of the rows below it. */
@media (min-width: 1025px) {
    .inv-scroll .data-table td.row-actions,
    .inv-scroll .data-table thead th:last-child {
        position: sticky; right: 0; background: var(--card); z-index: 3;
        box-shadow: -8px 0 8px -8px rgba(0,0,0,.18);
    }
    /* .row-actions is display:flex globally (fine for a plain table, but a
       flex <td> isn't a real table cell, so it wouldn't stretch to the row
       height or pin properly). Make it a true cell here. */
    /* (!important because a later global rule, `.row-actions { display:flex !important }`, would otherwise win) */
    .inv-scroll .data-table td.row-actions { display: table-cell !important; vertical-align: middle; text-align: right; }
    .inv-scroll .data-table tbody tr:hover td.row-actions { background: var(--card2); }
    .inv-scroll .data-table td.row-actions:has(.row-menu.open) { z-index: 50; }
}

/* Sales Invoices: the "Added by … · edited by …" caption under the invoice
   number is exactly as wide as the invoice number. width:0 stops the caption
   from contributing to the cell's natural width (so a long username can no
   longer widen the column), then min-width:100% stretches it to fill the
   width the invoice number set. If the text doesn't fit that width, the
   marquee scrolls it (see initMarquee in app.js). */
.inv-cell { display: inline-block; vertical-align: top; max-width: 100%; }
.inv-cell .inv-no { display: block; white-space: nowrap; }   /* never break "INV-2026-013" at its hyphens */
.inv-cell .audit-text { width: 0; min-width: 100%; }
.inv-cell .audit-text-icon { flex: 0 0 auto; }   /* keep the 👤 from being squeezed */
/* Card layout (<=1024px) has the full row width to use — no need to clamp. */
@media (max-width: 1024px) {
    .inv-cell { display: block; width: 100%; text-align: left; }
    .inv-cell .audit-text { width: 100%; min-width: 0; }
}
th { text-align: left; padding: 12px 16px; color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.4px; border-bottom: 2px solid var(--border); white-space: nowrap; }
td { padding: 14px 16px; border-bottom: none; vertical-align: middle; }
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--card2); }
tbody tr.row-click { cursor: pointer; }
tbody tr.row-click:hover { background: var(--accent-light); }
.amount { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; }
/* Generic debit/credit color utilities — usable on any element (table cells,
   stat values, badges), unlike the .stat-value/.statement-stat-value scoped
   .text-* rules elsewhere in this file. */
.amount.text-red, td.text-red { color: var(--red); }
.amount.text-green, td.text-green { color: var(--green); }
.empty-row td { text-align: center; color: var(--muted); padding: 40px; font-size: 0.9rem; }

/* ── Responsive "grid card" table view ──
   On mobile/tablet each row collapses into a card with label:value pairs.
   .data-table.congested switches earlier (tablet) since 7 columns are too cramped. */
@media (max-width: 760px) {
    .data-table, .data-table thead, .data-table tbody, .data-table th, .data-table td, .data-table tr { display: block; }
    .data-table thead { display: none; }
    .data-table tbody tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; padding: 12px 14px; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
    .data-table tbody td { border: none; padding: 7px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: right; font-size: 0.88rem; }
    .data-table tbody td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: .3px; text-align: left; flex-shrink: 0; }
    .data-table tbody td.row-actions { justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px; }
    .data-table tbody td.row-actions::before { display: none; }
    .data-table tbody td:has(.audit-text) { flex-direction: column; align-items: flex-start; gap: 2px; }
    .data-table tbody td:has(.audit-text)::before { align-self: flex-start; }
    .data-table tbody td .audit-text { width: 100%; }
    .data-table tbody td:has(.sector-dist-wrap) { flex-direction: column; align-items: flex-start; gap: 4px; }
    .data-table tbody td:has(.sector-dist-wrap)::before { align-self: flex-start; }
    .data-table tbody td .sector-dist-wrap { width: 100%; }
    .data-table tbody td .amount { font-size: 1rem; }
}

@media (min-width: 761px) and (max-width: 1024px) {
    .data-table.congested, .data-table.congested thead, .data-table.congested tbody,
    .data-table.congested th, .data-table.congested td, .data-table.congested tr { display: block; }
    .data-table.congested thead { display: none; }
    .data-table.congested tbody tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; padding: 12px 14px; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
    .data-table.congested tbody td { border: none; padding: 7px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: right; font-size: 0.88rem; }
    .data-table.congested tbody td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: .3px; text-align: left; flex-shrink: 0; }
    .data-table.congested tbody td.row-actions { justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px; }
    .data-table.congested tbody td.row-actions::before { display: none; }
    .data-table.congested tbody td:has(.audit-text) { flex-direction: column; align-items: flex-start; gap: 2px; }
    .data-table.congested tbody td:has(.audit-text)::before { align-self: flex-start; }
    .data-table.congested tbody td .audit-text { width: 100%; }
    .data-table.congested tbody td:has(.sector-dist-wrap) { flex-direction: column; align-items: flex-start; gap: 4px; }
    .data-table.congested tbody td:has(.sector-dist-wrap)::before { align-self: flex-start; }
    .data-table.congested tbody td .sector-dist-wrap { width: 100%; }
}

/* Real (non-stacked) table rows: the marquee JS above only scrolls text that
   actually overflows its box, but a plain <table> with auto column sizing
   just widens the column to fit the whole "Added by … · edited by …" line
   instead of ever letting it overflow — so cap the audit line's width here
   so it's forced to compress and the marquee has something to scroll.
   Card/stacked mode (<=1024px) already gets a correct width via the
   .data-table.congested tbody td .audit-text { width:100% } rules above,
   so this is scoped to real table-row layout only. */
@media (min-width: 1025px) {
    .data-table .audit-text { max-width: 260px; }
}

/* ── Status pills / badges ── */
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.status-pill.green  { background: var(--green-light); color: var(--green); }
.status-pill.red    { background: var(--red-light); color: var(--red); }
.status-pill.amber  { background: var(--amber-light); color: var(--amber); }
.status-pill.blue   { background: var(--accent-light); color: var(--accent); }
.status-pill.purple { background: var(--purple-light); color: var(--purple); }
.status-pill.gray   { background: var(--card2); color: var(--muted); }

/* ── Buttons ── */
.btn { padding: 10px 18px; border: none; border-radius: 10px; font-family: var(--font); font-weight: 700; font-size: 0.94rem; cursor: pointer; transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--card2); color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: var(--red-light); color: var(--red); }
.btn:hover { opacity: 0.88; text-decoration: none; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-sm { padding: 6px 12px; font-size: 0.86rem; border-radius: 8px; }

.mini-btn { padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border); background: none; font-family: var(--font); font-size: 0.84rem; font-weight: 700; cursor: pointer; color: var(--text); transition: all 0.15s; }
.mini-btn.approve { color: var(--green); border-color: var(--green); }
.mini-btn.approve:hover { background: var(--green-light); }
.mini-btn.reject { color: var(--red); border-color: var(--red); }
.mini-btn.reject:hover { background: var(--red-light); }
.mini-btn.edit { color: var(--accent); border-color: var(--accent); }
.mini-btn.edit:hover { background: var(--accent-light); }
.mini-btn.view { color: var(--muted); border-color: var(--border); }
.mini-btn.view:hover { background: var(--card2); color: var(--text); }
.row-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }
.row-actions.actions-nowrap { flex-wrap: nowrap; white-space: nowrap; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--card2); }

/* ── Forms ── */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; } }

/* Invoice form (create/edit/view) — tablet tuning, e.g. iPad Air portrait (820px).
   The generic rule above collapses straight to 1 column at 900px, which makes
   the invoice form needlessly tall/cramped on a tablet that has room for 2
   columns. Scoped to .invoice-form only so other forms sharing these grid
   classes (employee, inventory, production) are unaffected. */
@media (min-width: 641px) and (max-width: 900px) {
    .invoice-form .form-grid,
    .invoice-form .form-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
.form-group { margin-bottom: 16px; }
.form-group.span-2 { grid-column: span 2; }
@media (max-width: 900px) { .form-group.span-2 { grid-column: span 1; } }
label { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
input, select, textarea {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px;
    font-family: var(--font); font-size: 0.9rem; color: var(--text); background: var(--bg);
    outline: none; transition: border 0.2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 70px; }

/* ── Themed custom dropdown (replaces the browser's native <select> popup,
   which is drawn by the OS and can't be restyled with CSS). The real
   <select> stays in the DOM (hidden) so every existing form-submit /
   .value / change-event usage across the app keeps working untouched —
   see enhanceSelects() in app.js. ── */
.select-trigger-wrap { position: relative; }
.select-trigger {
    width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px;
    font-family: var(--font); font-size: 0.9rem; color: var(--text); background: var(--bg);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer; user-select: none; transition: border 0.2s;
}
.select-trigger-wrap.open .select-trigger { border-color: var(--accent); }
.select-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger-arrow { flex: none; font-size: 0.82rem; color: var(--muted); transition: transform 0.15s; }
.select-trigger-wrap.open .select-trigger-arrow { transform: rotate(180deg); }
.select-trigger.disabled { opacity: 0.6; cursor: not-allowed; }
.select-trigger-wrap .combo-panel { max-height: 260px; }

/* ── Bottom "Install App" popup banner ── */
.pwa-install-banner {
    position: fixed; left: 12px; right: 12px; bottom: -120px; z-index: 2000;
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow); padding: 12px 14px;
    transition: bottom 0.3s ease;
    max-width: 480px; margin: 0 auto;
}
.pwa-install-banner.show { bottom: 16px; }
.pwa-install-banner-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.pwa-install-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-install-banner-text strong { font-size: 0.88rem; color: var(--text); }
.pwa-install-banner-text span { font-size: 0.84rem; color: var(--muted); line-height: 1.3; }
.pwa-install-banner-btn { flex: none; padding: 8px 14px; font-size: 0.94rem; }
.pwa-install-banner-close {
    flex: none; background: none; border: none; color: var(--muted); font-size: 1.3rem;
    line-height: 1; cursor: pointer; padding: 2px 4px;
}
@media (max-width: 480px) {
    .pwa-install-banner { flex-wrap: wrap; }
    .pwa-install-banner-text { order: 1; flex-basis: 100%; }
    .pwa-install-banner-icon { order: 0; }
    .pwa-install-banner-btn { order: 2; flex: 1; }
    .pwa-install-banner-close { order: 3; }
}
.hint { font-size: 0.82rem; color: var(--subtle); margin-top: 4px; display: block; }
.btn-row { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
@media (max-width: 480px) { .btn-row { max-width: none !important; } .btn-row .btn { flex: 1 1 auto; justify-content: center; } }

/* ── Alerts ── */
.alert { padding: 10px 14px; border-radius: 8px; font-size: 0.83rem; margin-bottom: 18px; }
.alert-error   { background: var(--red-light); color: var(--red); border: 1px solid var(--red); }
.alert-success { background: var(--green-light); color: var(--green); border: 1px solid var(--green); }

/* ── Login / auth ── */
.auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background-image: radial-gradient(circle at 15% 25%, var(--accent-light), transparent 40%),
                       radial-gradient(circle at 85% 75%, var(--purple-light), transparent 40%);
}
.auth-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
    padding: 48px 44px; width: 100%; max-width: 420px; box-shadow: var(--shadow);
    transition: background .3s, border-color .3s;
}
.auth-logo { font-size: 1.9rem; font-weight: 800; margin-bottom: 8px; text-align: center; }
.auth-logo span { color: var(--accent); }
.auth-sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 32px; text-align: center; }
.theme-toggle {
    position: fixed; top: 18px; right: 18px; display: flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-family: var(--font); font-size: 0.78rem; font-weight: 700;
    cursor: pointer; box-shadow: var(--shadow-sm); transition: all 0.2s; z-index: 100;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.password-field { position: relative; }
.password-field input { padding-right: 42px; }
.password-toggle {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: none; background: none; border-radius: 8px;
    color: var(--subtle); cursor: pointer; transition: color 0.15s, background 0.15s;
}
.password-toggle:hover { color: var(--accent); background: var(--accent-light); }
.card-footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; }
.card-footer .dev-text { font-size: 0.86rem; color: var(--muted); }
.card-footer .dev-text-brand {
    font-weight: 700;
    background: linear-gradient(90deg, #d6249f, #a044c9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.audit-text {
    display: flex; gap: 8px; align-items: baseline; flex-wrap: nowrap;
    font-size: 0.82rem; color: var(--subtle); margin-top: 3px; cursor: default;
    max-width: 100%; min-width: 0;
}
.audit-text-icon { flex-shrink: 0; }
.audit-text > span { flex: 0 1 auto; min-width: 0; }

/* ── Marquee ──
   Generic "scroll if it doesn't fit" component (app.js's initMarquee finds
   anything with .marquee-text, measures it, and only turns the animation
   on when the text actually overflows its box — short text just sits
   still). Used for the "Added by … · edited by …" audit captions, but any
   element can opt in the same way. */
.marquee-text {
    display: block; overflow: hidden; white-space: nowrap; min-width: 0;
    -webkit-mask-image: none; mask-image: none;
}
.marquee-text .marquee-track { display: inline-block; white-space: nowrap; will-change: transform; }
.marquee-text.is-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.marquee-text.is-marquee .marquee-track {
    animation: marquee-scroll var(--marquee-duration, 8s) ease-in-out infinite;
}
@keyframes marquee-scroll {
    0%, 8%   { transform: translateX(0); }
    45%, 55% { transform: translateX(var(--marquee-distance, 0)); }
    92%, 100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-text.is-marquee .marquee-track { animation: none; }
}

/* ── Toasts ── */

/* ── Notification Bell ── */
.notif-wrap { position: relative; }
.notif-btn { position: relative; }
.notif-badge {
    position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
    background: var(--red); color: #fff; font-size: 0.80rem; font-weight: 800;
    border-radius: 99px; display: flex; align-items: center; justify-content: center;
    padding: 0 3px; pointer-events: none;
}
.notif-panel {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 340px; max-height: 480px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow);
    z-index: 400; display: none; flex-direction: column;
}
.notif-panel.open { display: flex; }
.notif-header { padding: 12px 14px 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.notif-header-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.notif-mark-all { font-size: 0.82rem; color: var(--accent); cursor: pointer; background: none; border: none; font-family: var(--font); }
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { display: flex; flex-direction: column; }
.notif-item {
    padding: 11px 14px; border-bottom: 1px solid var(--border);
    display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
    transition: background 0.12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--card2); }
.notif-item.unread { background: var(--accent-light); }
.notif-item.unread:hover { background: var(--accent-light); filter: brightness(0.96); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 5px; }
.notif-dot.read { background: transparent; border: 1px solid var(--border); }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.notif-body { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.notif-time { font-size: 0.80rem; color: var(--subtle); margin-top: 3px; }
.notif-empty { padding: 30px 20px; text-align: center; color: var(--muted); font-size: 0.78rem; }
@media (max-width: 560px) { .notif-panel { width: calc(100vw - 20px); right: -60px; } }

.toast-container { position: fixed; top: 20px; right: 20px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow); font-size: 0.94rem; min-width: 220px; animation: toast-in .2s ease; }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); }

/* ── Page-transition loader (shown when navigation is taking a moment) ── */
.page-loader {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,0.28);
    opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
:root.dark .page-loader { background: rgba(2,6,23,0.55); }
.page-loader.visible { opacity: 1; pointer-events: auto; }
.page-loader-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 22px; box-shadow: var(--shadow);
    transform: translateY(6px); transition: transform .15s ease;
}
.page-loader.visible .page-loader-card { transform: translateY(0); }
.page-loader-text { font-size: 0.94rem; font-weight: 700; color: var(--text); }

.spinner {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    border: 2.5px solid var(--border); border-top-color: var(--accent);
    animation: spinner-spin .7s linear infinite;
}
.btn-spinner {
    width: 15px; height: 15px; border-radius: 50%; display: inline-block; vertical-align: -3px; margin-right: 8px;
    border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
    animation: spinner-spin .6s linear infinite;
}
@keyframes spinner-spin { to { transform: rotate(360deg); } }
button[disabled], .btn[disabled] { opacity: 0.75; cursor: default; pointer-events: none; }

/* ── Dashboard: Live Account Balances ── */
.balance-category-label { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: black; margin-bottom: 10px; }
.balance-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .balance-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .balance-cards { grid-template-columns: 1fr; } }
.balance-card { background: var(--card2); border: 1px solid black; border-radius: 14px; padding: 16px 16px 14px; }
.balance-label { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: black; margin-bottom: 8px; }
.balance-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.balance-value { font-size: 1.25rem; font-weight: 800; font-family: var(--mono); }
.balance-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.balance-icon svg { width: 17px; height: 17px; }
.balance-caption { font-size: 0.82rem; color: var(--muted); margin-top: 6px; }
.balance-card.c0 .balance-icon { background: var(--green-light); color: var(--green); }
.balance-card.c1 .balance-icon { background: var(--accent-light); color: var(--accent); }
.balance-card.c2 .balance-icon { background: var(--purple-light); color: var(--purple); }
.balance-card.c3 .balance-icon { background: var(--amber-light); color: var(--amber); }
.balance-card.c4 .balance-icon { background: var(--red-light); color: var(--red); }
.balance-card.c0 .balance-value { color: var(--green); }
.balance-card.c1 .balance-value { color: var(--accent); }
.balance-card.c2 .balance-value { color: var(--purple); }
.balance-card.c3 .balance-value { color: var(--amber); }
.balance-card.c4 .balance-value { color: var(--red); }

/* ── Invoice form (Orders) ── */
.invoice-section-title { font-size: 0.95rem; font-weight: 800; margin: 22px 0 12px; color: var(--accent); }
.invoice-section-title:first-child { margin-top: 0; }
.invoice-section-row { display: flex; justify-content: space-between; align-items: center; }
.link-btn {
    background: none; border: none; color: var(--accent); font-family: var(--font);
    font-size: 0.94rem; font-weight: 700; cursor: pointer; padding: 4px 2px; text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }

.new-customer-panel {
    background: var(--card2); border: 1px dashed var(--border); border-radius: 12px;
    padding: 16px; margin: -4px 0 18px;
}

.table-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; }
.table-scroll { overflow-x: auto; }
.line-items-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 780px; }
.line-items-table th {
    text-align: left; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--border); background: var(--card2);
}
.line-items-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.line-items-table tr:last-child td { border-bottom: none; }
.line-items-table input, .line-items-table select {
    width: 100%; padding: 7px 8px; font-size: 0.94rem; border: 1px solid var(--border);
    border-radius: 7px; background: var(--surface); color: var(--text); font-family: var(--font);
}
.line-items-table td.li-total { font-weight: 700; white-space: nowrap; }
.line-items-table td.li-qty-cell .li-qty-formula:empty { display: none; }
.li-remove-btn {
    background: none; border: none; color: var(--red); cursor: pointer; font-size: 1rem;
    line-height: 1; padding: 4px; border-radius: 6px;
}
.li-remove-btn:hover { background: var(--red-light); }

/* ── Custom-styled Item Name dropdown ──
   Replaces the native <select> popup (browser/OS-rendered, ignores our
   CSS width and can overflow past a narrow card on mobile) with a button
   we style plus a panel positioned in JS via getBoundingClientRect and
   capped to the viewport width, so it always fits on any device. The
   real <select> stays in the DOM (visually hidden) purely so form
   submission and existing value/name-reading JS keep working untouched. */
.li-select { position: relative; }
.li-select-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.li-select-btn {
    width: 100%; padding: 7px 8px; font-size: 0.94rem; border: 1px solid var(--border);
    border-radius: 7px; background: var(--surface); color: var(--text); font-family: var(--font);
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    cursor: pointer; text-align: left;
}
.li-select.open .li-select-btn { border-color: var(--accent); }
.li-select-btn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-select-caret { color: var(--muted); font-size: 0.82rem; flex-shrink: 0; }
.li-select-panel {
    position: fixed; z-index: 4000; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow); max-height: 260px; overflow-y: auto;
    padding: 4px; font-size: 0.94rem;
}
.li-select-opt { padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.li-select-opt:hover, .li-select-opt.selected { background: var(--accent-light); }
.li-select-opt--add { color: var(--accent); font-weight: 700; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.li-select-opt-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-select-opt-remove {
    flex: 0 0 auto; font-size: 0.82rem; line-height: 1; border-radius: 5px;
    color: var(--muted); opacity: 0.7;
    min-width: 26px; min-height: 26px; display: flex; align-items: center; justify-content: center;
}
.li-select-opt-remove:hover { opacity: 1; background: var(--red-light); color: var(--red); }
@media (max-width: 760px) {
    /* Bigger tap target on touchscreens — the compact desktop hit area
       (26px) is fine for a mouse but risks mis-tapping the option itself
       instead of the remove button on a phone. */
    .li-select-opt-remove { min-width: 32px; min-height: 32px; }
    .li-select-opt { padding: 10px 10px; }
}

/* ── Line items table on mobile/tablet ──
   The line-items table is an editable grid (selects + number inputs), so a
   plain horizontal scroll is cramped and hard to use with a thumb. It has
   8 columns, so — same reasoning as .data-table.congested above — it needs
   the tablet-width cutoff too, not just the phone one: below 1024px
   (covers iPad Mini/Air/Pro portrait widths, 768–834px, plus the smaller
   phone sizes) each row collapses into its own labeled card instead —
   same label:value pattern as .data-table, but built to hold live form
   fields. */
@media (max-width: 1024px) {
    .table-wrap { overflow: visible; border: none; border-radius: 0; }
    .line-items-table { min-width: 0; }
    .line-items-table, .line-items-table thead, .line-items-table tbody,
    .line-items-table th, .line-items-table td, .line-items-table tr { display: block; }
    .line-items-table thead { display: none; }
    .line-items-table tbody { display: flex; flex-direction: column; gap: 12px; }
    .line-items-table tr.line-item-row {
        position: relative; border: 1px solid var(--border); border-radius: 12px;
        padding: 14px 44px 6px 14px; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .line-items-table td { padding: 7px 0; border-bottom: none; }
    .line-items-table td::before {
        content: attr(data-label); display: block; font-size: 0.82rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.3px; color: var(--muted); margin-bottom: 4px;
    }
    .line-items-table td.li-total {
        display: flex; align-items: center; justify-content: space-between;
        border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; font-size: 0.95rem;
    }
    .line-items-table td.li-total::before { margin-bottom: 0; }
    .line-items-table td.li-row-remove { position: absolute; top: 10px; right: 8px; padding: 0; }
}

.taxes-summary-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 4px; align-items: start; }
@media (max-width: 900px) { .taxes-summary-grid { grid-template-columns: 1fr; } }
.computed-line {
    grid-column: span 2; display: flex; justify-content: space-between; align-items: center;
    background: var(--card2); border-radius: 8px; padding: 10px 12px; font-size: 0.94rem;
}
@media (max-width: 900px) { .computed-line { grid-column: span 1; } }

.invoice-summary-box {
    background: var(--card2); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
}
.invoice-summary-title { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin-bottom: 12px; }
.summary-row { display: flex; justify-content: space-between; font-size: 0.94rem; padding: 6px 0; color: var(--text); }
.summary-grand {
    display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem;
    font-weight: 800; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border);
}
.summary-sub { text-align: right; font-size: 0.84rem; color: var(--muted); margin-top: 4px; }

/* ── Form popup modal ── */
.modal-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
    z-index: 900; align-items: flex-start; justify-content: center;
    padding: 5vh 20px; overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow); width: 100%; max-width: 1280px; position: relative;
    max-height: 90vh; overflow: hidden; animation: modal-in 0.18s ease;
}
.modal-scroll { max-height: 90vh; overflow-y: auto; }
@keyframes modal-in { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-close {
    position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--card2); color: var(--text); cursor: pointer;
    font-size: 0.9rem; display: flex; align-items: center; justify-content: center; z-index: 5;
    transition: all 0.15s;
}
.modal-close:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.modal-body { padding: 30px 26px 26px; }
.modal-body .modal-form-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; padding-right: 30px; }
.modal-body .modal-form-sub { color: var(--muted); font-size: 0.88rem; margin-bottom: 20px; }
.modal-body form.panel {
    border: none; box-shadow: none; margin: 0; max-width: none !important; background: none;
}
.modal-body form.panel .panel-body { padding: 0; }
.modal-body .modal-loading, .modal-body .modal-error { padding: 50px 10px; text-align: center; color: var(--muted); }
.modal-body .modal-loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
.modal-body .modal-error { color: var(--red); }
@media (max-width: 640px) {
    .modal-backdrop { padding: 0; }
    .modal-panel { max-width: none; width: 100%; min-height: 100vh; border-radius: 0; max-height: none; }
}

/* ── Cashbook — bill/receipt thumbnails, upload preview & image viewer ── */
.field-optional { color: var(--muted); font-weight: 500; font-size: 0.78rem; }
.muted-cell { color: var(--muted); }

.tx-thumbs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 140px; }
.tx-thumb {
    width: 34px; height: 34px; border-radius: 8px; object-fit: cover; cursor: zoom-in;
    border: 1px solid var(--border); transition: transform 0.15s, border-color 0.15s;
}
.tx-thumb:hover { transform: scale(1.08); border-color: var(--accent); }

.img-preview-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.img-preview-chip {
    position: relative; width: 84px; padding: 6px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--card2); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.img-preview-chip img { width: 100%; height: 56px; object-fit: cover; border-radius: 6px; }
.img-preview-meta { font-size: 0.80rem; color: var(--muted); text-align: center; line-height: 1.2; word-break: break-all; }
.img-preview-remove {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
    font-size: 0.82rem; display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.img-preview-remove:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }

.image-viewer-panel { max-width: 900px; background: var(--surface); }
.image-viewer-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 56px 0 20px; flex-wrap: wrap;
}
.image-viewer-name { font-weight: 700; font-size: 0.86rem; color: var(--text); word-break: break-all; }
.image-viewer-actions { display: flex; align-items: center; gap: 8px; }
.image-viewer-stage {
    display: flex; align-items: center; justify-content: center; overflow: auto;
    max-height: 78vh; min-height: 240px; padding: 20px;
}
.image-viewer-stage.zoomed { cursor: zoom-out; }
.image-viewer-stage:not(.zoomed) { cursor: zoom-in; }
.image-viewer-stage img { max-width: 100%; max-height: 74vh; border-radius: 10px; transition: transform 0.15s ease; }
@media (max-width: 640px) {
    .image-viewer-toolbar { padding: 14px 44px 0 14px; }
    .image-viewer-stage { padding: 12px; }
}

/* ── Card details sidebar (slides in from the right) ── */
[data-detail-key] { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
[data-detail-key]:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
[data-detail-key]:active { transform: translateY(0); }

.sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
    z-index: 600; opacity: 0; transition: opacity 0.2s ease;
}
.sidebar-backdrop.open { display: block; opacity: 1; }
.detail-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw;
    background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow);
    transform: translateX(100%); transition: transform 0.22s ease; z-index: 601;
    display: flex; flex-direction: column;
}
.sidebar-backdrop.open .detail-sidebar { transform: translateX(0); }
.detail-sidebar.resizing { transition: none; user-select: none; }
.sidebar-resize-handle {
    position: absolute; top: 0; left: -7px; bottom: 0; width: 14px; cursor: col-resize; z-index: 6;
    touch-action: none;
}
.sidebar-resize-handle::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 4px; height: 44px; border-radius: 3px; background: var(--border); transition: background 0.15s;
}
.sidebar-resize-handle:hover::after,
.detail-sidebar.resizing .sidebar-resize-handle::after { background: var(--accent); }
.sidebar-close {
    position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--card2); color: var(--text); cursor: pointer;
    font-size: 0.9rem; display: flex; align-items: center; justify-content: center; z-index: 5;
    transition: all 0.15s;
}
.sidebar-close:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 28px 24px 24px; }

.detail-header { padding-right: 30px; margin-bottom: 16px; }
.detail-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.detail-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 2px; }
.detail-sub { color: var(--muted); font-size: 0.94rem; margin-bottom: 4px; }
.detail-count { color: var(--muted); font-size: 0.78rem; margin-top: 6px; }
.detail-count .detail-count-hint { color: var(--accent); }
.detail-export-btn { white-space: nowrap; padding: 7px 12px; font-size: 0.78rem; flex: none; }
.detail-export-btn[disabled] { opacity: 0.6; cursor: wait; }

.detail-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.detail-card {
    background: var(--card2); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px;
}
.detail-card-title { font-weight: 800; font-size: 0.92rem; margin-bottom: 10px; color: var(--text); }
.detail-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.detail-card-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.detail-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-field-label {
    font-size: 0.80rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 700;
}
.detail-field-value {
    font-size: 0.94rem; color: var(--text); font-weight: 600; overflow-wrap: anywhere;
}
.detail-field-value.text-red { color: var(--red); }
.detail-field-value.text-green { color: var(--green); }
.detail-empty { text-align: center; color: var(--muted); padding: 40px 10px; font-size: 0.88rem; }

/* Table view: kicks in once the sidebar is dragged past the width threshold
   (see TABLE_VIEW_THRESHOLD in app.js), swapping the stacked record cards
   for a compact, scannable table of the same data. */
.detail-table-wrap { display: none; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.detail-sidebar.table-view .detail-grid { display: none; }
.detail-sidebar.table-view .detail-table-wrap { display: block; }
.detail-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.detail-table th, .detail-table td {
    text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.detail-table tbody tr:last-child td { border-bottom: none; }
.detail-table th {
    color: var(--muted); text-transform: uppercase; font-size: 0.80rem; letter-spacing: 0.03em;
    font-weight: 700; background: var(--card2); position: sticky; top: 0;
}
.detail-table tbody tr { transition: background 0.12s; }
.detail-table tbody tr:hover { background: var(--card2); }
.detail-table tbody tr[data-hidden="true"] { display: none; }

.detail-filter-bar {
    background: var(--card2); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px;
}
.detail-filter-name input {
    width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font-family: var(--font); font-size: 0.94rem;
}
.detail-filter-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-filter-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-filter-range input[type="date"] {
    flex: 1; min-width: 120px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font-family: var(--font); font-size: 0.94rem;
}
.detail-filter-range span { color: var(--muted); font-size: 0.78rem; }
.detail-filter-range .btn { padding: 7px 14px; font-size: 0.78rem; }

.client-row { cursor: pointer; transition: all 0.15s; }
.client-row:hover { border-color: var(--accent); background: var(--accent-light); }

.outstanding-row { display: flex; gap: 8px; align-items: center; }
.outstanding-row input { flex: 1; }
.outstanding-row .btn { white-space: nowrap; padding: 10px 14px; }
.outstanding-note { font-size: 0.84rem; color: var(--muted); margin-top: 6px; }

.statement-back { margin-bottom: 12px; }

.statement-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    background: var(--card2); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 12px; margin-bottom: 14px;
}
.statement-stat { display: flex; flex-direction: column; gap: 4px; text-align: left; min-width: 0; }
.statement-stat-label {
    font-size: 0.80rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 700;
}
.statement-stat-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.98rem; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.statement-stat-value.text-purple { color: var(--purple); }
.statement-stat-value.text-red { color: var(--red); }
.statement-stat-value.text-amber { color: var(--amber); }
.statement-stat-value.text-green { color: var(--green); }

.statement-search {
    width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font-family: var(--font); font-size: 0.94rem;
    margin-bottom: 14px;
}

.statement-ledger { display: flex; flex-direction: column; gap: 10px; }
.statement-entry {
    background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
}
.statement-entry-row { display: flex; align-items: flex-start; gap: 12px; }
.statement-entry.has-breakdown .statement-entry-row { cursor: pointer; }
.statement-entry-icon {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    background: var(--accent-light);
}
.statement-entry-icon.icon-payment { background: var(--purple-light); }
.statement-entry-main { flex: 1; min-width: 0; }
.statement-entry-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.statement-entry-ref { font-family: var(--mono); font-weight: 700; font-size: 0.94rem; color: var(--text); }
.statement-entry-date { font-size: 0.82rem; color: var(--muted); }
.statement-entry-caption { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.statement-entry-amount { font-family: var(--mono); font-weight: 700; font-size: 0.9rem; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.statement-entry-amount.text-purple { color: var(--purple); }
.statement-entry-chevron {
    flex: none; color: var(--muted); font-size: 0.94rem; line-height: 1; align-self: center;
    transition: transform 0.15s;
}
.statement-entry.open .statement-entry-chevron { transform: rotate(180deg); }

.statement-entry-breakdown { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.statement-entry.open .statement-entry-breakdown { display: block; }
.breakdown-head {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 0.80rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--accent); margin-bottom: 8px;
}
.breakdown-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.94rem; color: var(--text); padding: 4px 0; }
.breakdown-charges { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.breakdown-charge { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: var(--muted); padding: 3px 0; }
.breakdown-charge span:first-child { font-weight: 700; }
.breakdown-total {
    display: flex; justify-content: space-between; gap: 10px; font-size: 0.94rem; font-weight: 800; color: var(--text);
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.breakdown-total span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
    .detail-card-body { grid-template-columns: 1fr; }
    .statement-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .detail-sidebar { width: 100% !important; }
    .sidebar-resize-handle { display: none; }
}

/* ── Price Matrix ─────────────────────────────────────────── */
.pm-matrix-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pm-matrix-actions { margin: 0; }

/* Generator panel — uses app accent color */
.pm-preview { background: var(--accent); color: #fff; border-radius: 12px; padding: 16px 18px; margin-top: 6px; }
.pm-preview-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.85; margin-bottom: 8px; }
.pm-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pm-preview-text { font-family: var(--mono); font-size: 0.94rem; flex: 1; min-width: 200px; }
.pm-preview-text.pm-preview-empty { opacity: 0.7; font-family: var(--font); font-style: italic; }

/* Rate Matrix Table — responsive scroll wrapper */
.pm-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pm-matrix-scroll table { border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.pm-matrix-scroll th { background: var(--accent); color: #fff; padding: 8px 10px; text-align: center; font-size: 12px; font-weight: 700; position: sticky; top: 0; z-index: 2; }
.pm-matrix-scroll th:first-child { text-align: left; position: sticky; left: 0; z-index: 3; background: var(--accent); }
.pm-matrix-scroll td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
.pm-matrix-scroll td:first-child { font-weight: 600; position: sticky; left: 0; background: var(--surface); z-index: 1; border-right: 2px solid var(--border); }
.pm-matrix-scroll tr:nth-child(even) td { background: var(--card2); }
.pm-matrix-scroll tr:nth-child(even) td:first-child { background: var(--card2); }
.pm-matrix-scroll .pm-finish-row td { background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }

/* Edit mode inputs */
.pm-cell-input {
    width: 60px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 5px;
    background: var(--surface); color: var(--text); font-family: var(--mono); font-size: 0.94rem; text-align: center;
}
.pm-cell-input:focus { outline: none; border-color: var(--accent); }

/* Mobile: card grid fallback for very small screens */
@media (max-width: 600px) {
    .pm-matrix-scroll { display: none; }
    .pm-card-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        padding: 14px;
    }
    .pm-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .pm-card-finish { font-size: 0.80rem; font-weight: 700; text-transform: uppercase; color: var(--accent); letter-spacing: 0.4px; }
    .pm-card-color  { font-size: 0.82rem; color: var(--muted); }
    .pm-card-quality{ font-size: 0.82rem; color: var(--subtle); }
    .pm-card-price  { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; color: var(--text); margin-top: 4px; }
}
@media (min-width: 601px) {
    .pm-card-grid { display: none !important; }
}

.li-suggest { margin-top: 4px; font-size: 0.84rem; color: var(--accent); font-family: var(--mono); }
.li-suggest a { font-family: var(--font); font-weight: 700; margin-left: 8px; }

/* ── Invoice line item price suggestion row ─────────────────── */
.li-suggest-row { background: #fffbf0; }
:root.dark .li-suggest-row { background: rgba(245,158,11,0.06); }
.li-suggest-cell {
    padding: 5px 14px 7px;
    font-size: 0.94rem;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid #f59e0b;
}
/* The suggestion row is now reserved up front for every line item (so
   picking a dropdown value never inserts a new row mid-interaction and
   shifts the table). Collapse it to zero height while it has no content
   yet, so new/blank rows don't show an empty amber strip underneath. */
.li-suggest-cell:empty { padding: 0; border: none; font-size: 0; line-height: 0; }
.li-suggest-cell strong { color: var(--text); font-weight: 700; }
.li-suggest-icon { color: #f59e0b; margin-right: 6px; font-size: 0.94rem; }
.li-suggest-icon--muted { color: var(--subtle); }
.li-suggest-muted { color: var(--muted); font-style: italic; }

/* ── Page header row (title + action buttons side by side) ── */
.page-header-row { display: flex; align-items: flex-end; justify-content: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-header-row .page-title, .page-header-row .page-sub { margin-bottom: 0; }

/* ── Loan / Chit Analytics ── */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.analytics-summary { grid-column: 1 / -1; background: var(--accent-light); color: var(--accent); border-radius: 10px; padding: 12px 16px; font-size: 0.94rem; font-weight: 600; margin-bottom: 4px; }
.analytics-card { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.analytics-card-clickable { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.analytics-card-clickable:hover { border-color: var(--accent); transform: translateY(-1px); }
.analytics-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.analytics-card-head .analytics-card-name { margin-bottom: 0; }
.analytics-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.analytics-card-actions .btn-icon { width: 26px; height: 26px; font-size: 0.75rem; }
.analytics-card-name { font-weight: 800; font-size: 0.92rem; margin-bottom: 8px; color: var(--text); }
.analytics-card-type { margin-bottom: 8px; }
.analytics-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; padding: 4px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.analytics-row:last-child { border-bottom: none; }
.analytics-row strong { color: var(--text); font-family: var(--mono); }
.analytics-row.highlight { background: var(--accent-light); margin: 4px -4px; padding: 6px 4px; border-radius: 6px; border: none; }
.analytics-row.highlight strong { color: var(--accent); }

/* ── Loan / Chit detail sidebar info grid ── */
.detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.detail-info-row { background: var(--card2); border-radius: 8px; padding: 8px 10px; }
.detail-info-label { font-size: 0.80rem; font-weight: 800; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
.detail-info-val { font-size: 0.88rem; font-weight: 700; color: var(--text); font-family: var(--mono); }

/* ── Loan / Chit pill selector row ── */
.loan-pill-bar {
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 2px;
    flex-shrink: 0;
}
.loan-pill-bar::-webkit-scrollbar { display: none; }
.loan-pill {
    flex-shrink: 0;
    padding: 7px 16px; border-radius: 99px; border: 1.5px solid var(--border);
    background: var(--surface); color: var(--text);
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
    white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: var(--font);
}
.loan-pill:hover { background: var(--card2); border-color: var(--accent); }
.loan-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.loan-pill-taken { border-color: var(--red-light); }
.loan-pill-taken.active { background: var(--red); border-color: var(--red); }
.loan-pill-given { border-color: var(--green-light); }
.loan-pill-given.active { background: var(--green); border-color: var(--green); }

/* ── Schedule panel ── */
.schedule-panel { display: none; }
.schedule-panel.open { display: block; }

/* ── Schedule table status pills ── */
.pill-paid    { background: var(--green-light);  color: var(--green);  }
.pill-pending { background: var(--amber-light);  color: var(--amber);  }
.pill-partial { background: var(--blue-light);   color: var(--accent); }
.pill-skipped { background: var(--card2);        color: var(--muted);  }

/* ── Inline modal for editing a schedule row ── */
.schedule-edit-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 1050; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.schedule-edit-box {
    background: var(--surface); border-radius: 16px;
    padding: 24px; width: 100%; max-width: 400px;
    box-shadow: var(--shadow);
}
.schedule-edit-box h4 { margin: 0 0 16px; font-size: 1rem; }
.apply-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.apply-toggle label { display: flex; align-items: center; gap: 6px; font-size: 0.94rem; cursor: pointer;
    padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--border); flex: 1; justify-content: center; }
.apply-toggle input[type=radio] { display: none; }
.apply-toggle input[type=radio]:checked + span { color: var(--accent); font-weight: 700; }
.apply-toggle label:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }

/* ══════════════════════════════════════════════════════════════
   Mobile fixes for Loans / Chits pages
   ══════════════════════════════════════════════════════════════ */

/* Summary cards: inline style grid override on mobile */
@media (max-width: 760px) {
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 480px) and (max-width: 760px) {
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Schedule table — treat like data-table on mobile */
@media (max-width: 760px) {
    #scheduleTableWrap table,
    #chitScheduleTableWrap table {
        display: block;
    }
    #scheduleTableWrap thead,
    #chitScheduleTableWrap thead { display: none; }
    #scheduleTableWrap tbody tr,
    #chitScheduleTableWrap tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 8px 10px;
        background: var(--surface);
    }
    #scheduleTableWrap tbody td,
    #chitScheduleTableWrap tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 6px 2px;
        border: none;
        font-size: 0.94rem;
        text-align: right;
    }
    #scheduleTableWrap tbody td::before,
    #chitScheduleTableWrap tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--muted);
        font-size: 0.82rem;
        text-transform: uppercase;
        text-align: left;
        flex-shrink: 0;
    }
    #scheduleTableWrap tbody td.row-actions,
    #chitScheduleTableWrap tbody td.row-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
    }
    #scheduleTableWrap tbody td.row-actions::before,
    #chitScheduleTableWrap tbody td.row-actions::before { display: none; }
}

/* Schedule panel header wraps on narrow screens */
@media (max-width: 560px) {
    #schedulePanel .panel-header,
    #chitSchedulePanel .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    #schedulePanelClose, #chitScheduleClose {
        align-self: flex-end;
    }
}

/* Edit / Pay modal box: full-width on small screens */
@media (max-width: 480px) {
    .schedule-edit-modal { padding: 0; align-items: flex-end; }
    .schedule-edit-box {
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        padding: 20px 16px 28px;
    }
}

/* apply-toggle: stack vertically on very small screens */
@media (max-width: 360px) {
    .apply-toggle { flex-direction: column; }
}

/* Analytics grid: single column on mobile */
@media (max-width: 560px) {
    .analytics-grid { grid-template-columns: 1fr; }
}

/* Loan pill bar: ensure buttons don't shrink below readable size */
.loan-pill-bar .btn { flex-shrink: 0; }

/* detail-info-grid: single column on very small screens */
@media (max-width: 400px) {
    .detail-info-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE & TABLET RESPONSIVE — gaps identified and fixed
   ══════════════════════════════════════════════════════════════════ */

/* ── Cashbook page: filter row stacks naturally on mobile ── */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters input[type=date] { min-width: 130px; flex: 1 1 130px; }
@media (max-width: 560px) {
    .filters { flex-direction: column; align-items: stretch; }
    .filters input, .filters button { width: 100%; }
}

/* ── Transaction quick-edit modal — full-screen on mobile ── */
@media (max-width: 600px) {
    #txEditBackdrop .modal-panel { max-width: 100%; width: 100%; min-height: 100dvh; border-radius: 0; }
}

/* ── Agent-client pending display row ── */
#agentClientAmountRow { font-size: 0.83rem; }
@media (max-width: 480px) {
    #agentClientAmountRow > div { flex-direction: column; gap: 6px; }
}

/* ── Dashboard invoice expand panel ── */
#invoiceExpandPanel .panel { margin-bottom: 0; }
#invoiceExpandPanel input[type=text],
#invoiceExpandPanel select { font-size: 0.94rem; }
@media (max-width: 760px) {
    #invoiceExpandPanel > div > div:first-child { padding: 10px 12px; flex-direction: column; align-items: stretch; gap: 8px; }
    #invoiceExpandPanel input[type=text],
    #invoiceExpandPanel select { width: 100%; min-width: 0; }
}

/* ── Invoice inline detail: 2-col grid collapses to 1 on mobile ── */
#invoiceDetailBody .form-grid.cols-2 { gap: 8px 16px; }
@media (max-width: 560px) {
    #invoiceDetailBody .form-grid.cols-2 { grid-template-columns: 1fr; }
}

/* ── detail-field (used in invoice detail + sidebar) ── */
.detail-field { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.detail-field:last-child { border-bottom: none; }
.detail-field-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.detail-field-value { font-size: 0.88rem; color: var(--text); word-break: break-word; }

/* ── Agents page: action buttons wrap on narrow screens ── */
@media (max-width: 640px) {
    .agents-table .row-actions { flex-wrap: wrap; gap: 4px; }
    .agents-table .row-actions .mini-btn { font-size: 0.73rem; padding: 4px 8px; }
}

/* ── Payroll table: congested on tablet, stack on mobile ── */
@media (min-width: 761px) and (max-width: 1100px) {
    .payroll-table.congested tbody tr { display: flex; flex-wrap: wrap; padding: 10px; border-bottom: 1px solid var(--border); }
    .payroll-table.congested tbody td { flex: 1 1 48%; border: none; padding: 4px 6px; }
    .payroll-table.congested tbody td::before { display: block; }
}

/* ── Loans / Chits analytics card grid: single-col on mobile ── */
@media (max-width: 480px) {
    .analytics-grid { grid-template-columns: 1fr !important; }
    .analytics-card { font-size: 0.94rem; }
}

/* ── Schedule sidebar panel: full-width on mobile ── */
@media (max-width: 600px) {
    .detail-sidebar { width: 100% !important; min-width: 0 !important; }
    #cardDetailPanel { width: 100% !important; border-radius: 0; }
}

/* ── Invoice form: line items table scrolls horizontally ── */
.table-scroll { -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
    .invoice-form .taxes-summary-grid { grid-template-columns: 1fr; gap: 20px; }
    .invoice-summary-box { margin-top: 0; }
}

/* ── Modal panels: full-height on very small screens ── */
@media (max-width: 480px) {
    .modal-panel { max-width: 100% !important; width: 100%; border-radius: 12px 12px 0 0; }
    .modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
    .modal-scroll { max-height: 90dvh; }
    .modal-body { padding: 20px 16px 24px; }
}

/* ── Price matrix page: scrollable on tablet ── */
@media (max-width: 900px) {
    .pm-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Page head row: wraps cleanly on mobile ── */
@media (max-width: 560px) {
    .page-head-row { flex-direction: column; gap: 10px; }
    .page-head-row > * { width: 100%; }
}

/* ── Balance cards: 1-col on very small mobile ── */
@media (max-width: 380px) {
    .balance-cards { grid-template-columns: 1fr; }
    .stat-card { padding: 14px 14px; }
}

/* ── Row-actions column: always flex, wraps on small screens ── */
.row-actions { display: flex !important; gap: 4px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) {
    .row-actions { justify-content: flex-end; }
}

/* ── Touch target size: ensure all buttons are at least 44px tall on mobile ── */
@media (max-width: 760px) {
    .mini-btn { min-height: 36px; padding: 6px 10px; font-size: 0.78rem; }
    .btn { min-height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   Z-INDEX FIX: Confirm / info dialogs always above popups
   Browser native confirm() is above everything; for custom dialogs:
   ══════════════════════════════════════════════════════════════════ */

/* Any custom confirm/alert overlay must be above form modals (900)
   and schedule dialogs (1050), so use 1300+ */
.confirm-overlay, .alert-overlay, [role="alertdialog"], [role="dialog"] {
    z-index: 1300 !important;
}

/* Image viewer (full-screen attachment preview) — keep at top */
#imageViewerBackdrop { z-index: 1100; }
#imageViewerBackdrop .modal-panel { z-index: 1101; }

/* TX edit modal */
#txEditBackdrop { z-index: 1000; }

/* Invoice detail inline panel — sits in normal flow, no z-index needed */

/* Notif panel: below modals but above page */
.notif-panel { z-index: 400 !important; }

/* ── Invoice modal iframe ── */
#formModalBody:has(iframe) { padding: 0; }
#formModalBody iframe { width: 100%; height: 85vh; border: none; display: block; border-radius: 0 0 18px 18px; }
#formModalBody iframe + * { display: none; }

/* When invoice form loads inside modal iframe, remove outer padding */
body.modal-iframe-body { background: var(--surface); padding: 0; }
body.modal-iframe-body .container { padding: 16px 20px 30px; }

/* Hide topbar inside modal iframe */
body.modal-iframe-body .topbar { display: none !important; }
body.modal-iframe-body { padding-top: 0 !important; }
body.modal-iframe-body .container { padding-top: 20px; }

/* Modal iframe — clean content only, no chrome */
body.modal-iframe-body .topbar,
body.modal-iframe-body .topbar * { display: none !important; }
body.modal-iframe-body { background: var(--surface) !important; padding: 0 !important; margin: 0 !important; }
body.modal-iframe-body .container { padding: 20px 20px 40px !important; }
/* ========================================================================
   READABILITY UPDATE — Client-requested typography pass
   Inter is used consistently across the application. The UI uses a 16px
   reading baseline and avoids very small text in tables, forms, navigation,
   notifications and detail cards.
   ======================================================================== */
html { font-size: 16px; }
body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.topbar { min-height: 64px; }
.logo { font-size: 1.4rem; }
.top-link { font-size: 0.95rem; padding: 9px 13px; }
.pill-btn { font-size: 0.9375rem; padding: 8px 14px; }
.user-pill { font-size: 0.9375rem; }

.page-title { font-size: 2rem; line-height: 1.2; }
.page-sub { font-size: 1rem; line-height: 1.55; }
.panel-title { font-size: 1.25rem; line-height: 1.35; }
.panel-sub { font-size: 0.875rem; line-height: 1.5; }

table, .data-table, .detail-table { font-size: 0.9375rem; }
th { font-size: 0.875rem; line-height: 1.4; }
td { font-size: 0.9375rem; line-height: 1.5; }

label { font-size: 0.9375rem; line-height: 1.4; }
input, select, textarea, .select-trigger { font-size: 1rem; line-height: 1.45; }

.btn { font-size: 0.9375rem; }
.btn-sm { font-size: 0.875rem; }
.mini-btn { font-size: 0.875rem; }
.status-pill { font-size: 0.875rem; padding: 4px 10px; }

.stat-label { font-size: 0.875rem; }
.stat-value { font-size: 1.625rem; }
.stat-caption { font-size: 0.875rem; }

.hint, .field-optional { font-size: 0.8125rem; }

/* Previously tiny secondary/detail text — keep it readable without
   making it compete with primary content. */
.notif-header-title, .notif-title { font-size: 0.875rem; }
.notif-body { font-size: 0.875rem; line-height: 1.45; }
.notif-time { font-size: 0.8125rem; }
.notif-empty { font-size: 0.875rem; }
.detail-title { font-size: 1.25rem; }
.detail-sub { font-size: 0.9375rem; }
.detail-card-title { font-size: 1rem; }
.detail-info-label, .balance-label, .balance-category-label { font-size: 0.8125rem; }
.detail-info-val { font-size: 0.9375rem; }

/* Price matrix is data-dense, so it remains compact but not tiny. */
.pm-matrix-scroll table { font-size: 0.875rem; }
.pm-matrix-scroll th { font-size: 0.8125rem; line-height: 1.35; }
.pm-matrix-scroll .pm-finish-row td { font-size: 0.8125rem; }

@media (max-width: 760px) {
    body { font-size: 16px; }
    .page-title { font-size: 1.75rem; }
    table, .data-table, .detail-table { font-size: 0.9375rem; }
    .data-table tbody td, .data-table.congested tbody td { font-size: 0.9375rem; }
    .data-table tbody td::before, .data-table.congested tbody td::before { font-size: 0.8125rem; }
    .mini-btn { font-size: 0.8125rem; }
}

/* ── Unsaved-changes guard dialog (js/nav-guard.js) ───────────────────
   Sits above everything, including the popup-form modal (z-index 900),
   toasts (1200) and the install banner (2000). */
.lp-guard-backdrop {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px);
    animation: lpGuardFade 0.14s ease-out;
}
.lp-guard-dialog {
    width: 100%; max-width: 440px; padding: 24px 24px 20px;
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow, 0 20px 50px rgba(0,0,0,.28));
    animation: lpGuardPop 0.16s ease-out;
}
.lp-guard-icon {
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    background: var(--accent-light);
}
.lp-guard-title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.lp-guard-msg { margin: 0 0 20px; font-size: 0.95rem; line-height: 1.5; color: var(--muted); }
.lp-guard-msg strong { color: var(--text); font-weight: 700; }
.lp-guard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.lp-guard-actions .btn { justify-content: center; }
@media (max-width: 480px) {
    .lp-guard-dialog { padding: 20px 18px 16px; }
    /* Phones: stack the buttons full-width, primary (Save) on top. */
    .lp-guard-actions { flex-direction: column-reverse; }
    .lp-guard-actions .btn { width: 100%; }
}
@keyframes lpGuardFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lpGuardPop  { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-guard-backdrop, .lp-guard-dialog { animation: none; } }
/* ── Password field eye-toggle ─────────────────────────────────────── */
.pw-group { position: relative; }
.pw-group input[type="password"],
.pw-group input[type="text"] { padding-right: 2.6rem !important; }
.pw-eye {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 2px;
    line-height: 1;
    display: flex;
    align-items: center;
    width: auto;
}
.pw-eye:hover { color: var(--text); }