/* ═════════════════════════════════════════════════════════════════
 * theme.css — Teloora (Phase 1 UI). The SINGLE source of all
 * custom styling layered on top of Bootstrap 5. Defines the palette,
 * the app shell (sidebar/header/bottom-nav), and every reusable
 * component class referenced by the partials AND the 3 page views
 * (stat-card, chart-card, form-grid, form-tabs, pills, gradient button,
 * pagination, etc.). See docs/PHASE-1-UI-SPEC.md §0/§4/§5/§6.
 *
 * Sections:
 *   1. Tokens (palette + metrics)
 *   2. Base / typography
 *   3. App shell layout
 *   4. Sidebar
 *   5. Header (topbar)
 *   6. Bottom-nav (mobile)
 *   7. Buttons (gradient / install / actions)
 *   8. Cards + page-head
 *   9. Filter card
 *  10. Data table + pills
 *  11. Pagination
 *  12. Form card (tabs) + form grid + counters + sync mini-card
 *  13. Dashboard (stat cards + charts + recent)
 *  14. Responsive (<992px) + PWA offline indicator
 * ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────────────────────── */
:root {
    --primary:       #1560E0;   /* brand blue */
    --primary-700:   #0F4CB8;
    --brand-navy:    #17265E;
    --brand-green:   #45B649;
    --brand-gradient: linear-gradient(135deg, #1560E0, #45B649);
    /* Button-safe sweep. White text on #45B649 is 2.61:1, so the decorative
       gradient cannot be reused for a filled button — this one ends deeper
       (5.37:1 at the far edge) and is used by every solid brand button. */
    --brand-gradient-btn: linear-gradient(135deg, #1560E0, #217A3B);
    --brand-green-text: #166534;   /* green that is legible AS TEXT (7.1:1) */
    /* Gradient end colour. (Was accidentally left self-referential by a
       palette sweep — `var(--secondary)` on --secondary resolves to nothing.) */
    --secondary:     #45B649;
    /* LIGHT sidebar. The rail is white with a hairline edge and the ACTIVE item
       carries the colour, instead of the whole panel being a dark slab. */
    --sidebar-bg:        #FFFFFF;
    --sidebar-border:    #EEF1F6;
    /* The rail reads darker than the first pass. The section headings in
       particular were #98A2B3 — 2.58:1 on white, under the 3:1 floor for ANY
       content, let alone 11px uppercase. Contrast on white now:
       label 14.70:1 · heading 4.97:1 · icon 5.55:1 */
    --sidebar-text:      #1D2939;   /* resting nav label */
    --sidebar-muted:     #667085;   /* section headings */
    --sidebar-icon:      #1560E0;   /* nav iconography — the brand blue itself */
    --sidebar-hover:     #F5F7FB;
    --sidebar-active-bg: #EAF1FE;
    --bg:            #F8FAFC;
    --card:          #FFFFFF;
    --border:        #E9EDF3;
    --text:          #101828;
    --text-muted:    #667085;
    --success:       #16A34A;
    --success-bg:    #DCFCE7;
    --danger:        #DC2626;
    --danger-bg:     #FEE2E2;
    --warning:       #D97706;
    --warning-bg:    #FEF3C7;
    --radius:        12px;
    --shadow:        0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);

    /* Layout metrics */
    --sidebar-w:     260px;
    --sidebar-rail-w: 72px;    /* collapsed (icon-only) sidebar */
    --header-h:      70px;

    /* Stat-card tones (icon chips). Foreground and background are a PAIR — a
       palette sweep once repointed the foregrounds at the brand colours but
       left the old lavender/indigo backgrounds behind, which put a green icon
       on a purple wash. The --tone-purple / --tone-indigo names are kept
       because views reference them; both now resolve to brand colours. */
    --tone-blue:     var(--primary);   --tone-blue-bg:   #EFF4FF;
    --tone-purple:   var(--brand-green-text); --tone-purple-bg: #E9F6EF;
    --tone-teal:     #0D9488;   --tone-teal-bg:   #E6FAF7;
    --tone-green:    #16A34A;   --tone-green-bg:  #DCFCE7;
    --tone-amber:    #D97706;   --tone-amber-bg:  #FEF3C7;
    --tone-indigo:   var(--primary);   --tone-indigo-bg: #EAF1FE;
}

/* ── 2. Base / typography ───────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body.app {
    margin: 0;
    font-family: Inter, "Segoe UI", Roboto, system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── 3. App shell layout ────────────────────────────────────────── */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    z-index: 1040;
    flex-direction: column;
    overflow: hidden;
    transition: width .18s ease;
}
.app-main {
    margin-left: var(--sidebar-w);
    transition: margin-left .18s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.page {
    padding: 24px 28px 96px;   /* bottom pad clears mobile bottom-nav */
    flex: 1 1 auto;
}

/* ── 4. Sidebar ─────────────────────────────────────────────────── */
.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: var(--sidebar-w);
    /* The COLUMN no longer scrolls — .sidebar-nav does (it is the flex child
       that grows). That is what keeps the footer promo pinned to the bottom
       instead of drifting away below a long menu. */
    overflow: hidden;
}
.sidebar-nav {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #D7DDE7 transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #D7DDE7; border-radius: 3px; }

/* No side padding and no fixed height: the brand plate below runs edge to edge
   and sets its own height, so the logo gets the sidebar's FULL width instead of
   sitting in a narrow inset box. (The rail state re-adds padding — see the
   collapsed rules, where only the small square mark is shown.) */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    background: var(--sidebar-bg);
    z-index: 2;
}
/* Two logos live in the header: the full lock-up (default) and the square mark
   (rail only). On a LIGHT sidebar neither needs a plate — the artwork sits
   straight on the panel, which is why the lock-up can run this large. */
.sidebar-brand-full {
    flex: 1 1 auto; min-width: 0;
    padding: 8px 12px;
    display: block;
}
/* 68px is where the lock-up's 3.44:1 aspect exactly fills the 236px of usable
   width in a 260px sidebar — any shorter and it floats in white space, any
   taller and the width clamps it back anyway. */
.sidebar-brand-full img { width: 100%; height: 68px; object-fit: contain; display: block; }

.sidebar-logo {
    width: 38px; height: 38px;
    display: none;                /* rail only — see the collapsed rules below */
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
}
.sidebar-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    padding: 3px;
}
.sidebar-brand-text {
    color: var(--text);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .2px;
    white-space: nowrap;
}

.sidebar-nav { padding: 8px 12px 24px; flex: 1 1 auto; }
/* Band heading. Quieter and smaller than a group row, with real space above,
   so it reads as a divider between kinds of work rather than another item. */
.sidebar-band {
    padding: 18px 12px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--sidebar-muted);
}
.sidebar-band:first-child { padding-top: 6px; }
.sidebar-section {
    color: var(--sidebar-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 20px 12px 8px;
}
/* Collapsible group header (button) — visually IDENTICAL to the plain section
   label (no box / fill / outline); only adds a clickable chevron on the right. */
.sidebar-section-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 8px; text-align: left;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    color: var(--sidebar-muted); transition: color .15s ease;
}
.sidebar-section-toggle:hover,
.sidebar-section-toggle:focus,
.sidebar-section-toggle:active { color: var(--sidebar-text); background: transparent !important; }
.sidebar-section-toggle:focus,
.sidebar-section-toggle:focus-visible,
.sidebar-section-toggle:active { outline: none !important; box-shadow: none !important; }
/* Group icon — the only thing left of a group header on the icon rail, so
   every group stays recognisable when the sidebar is collapsed. */
.sidebar-section-icon { font-size: 13px; width: 18px; text-align: center; color: var(--sidebar-icon); flex: 0 0 auto; }
.sidebar-section-text { flex: 1 1 auto; }
.sidebar-section-caret { font-size: 9px; transition: transform .2s ease; opacity: .35; }
.sidebar-section-toggle.is-collapsed .sidebar-section-caret { transform: rotate(-90deg); }
.sidebar-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
/* Collapsed group — hide its items (with a quick height/opacity fade). */
.sidebar-group { max-height: 1000px; transition: max-height .25s ease, opacity .2s ease; opacity: 1; }
.sidebar-group.is-collapsed { max-height: 0; opacity: 0; }
.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    margin: 3px 0;
    border-radius: 10px;
    color: var(--sidebar-text);
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.sidebar-link:hover {
    background: var(--sidebar-hover);
    color: var(--text);
}
/* Icons carry the brand tint even when the row is idle. Grey icons on a white
   rail read as disabled; the tint is what makes the menu look designed rather
   than merely un-styled. */
.sidebar-link-icon { width: 18px; text-align: center; font-size: 15px; flex: 0 0 auto; color: var(--sidebar-icon); }

/* Line icons (views/partials/icon-sprite.ejs). The stroke is currentColor, so
   an icon simply takes its row's colour — resting, hover and active all work
   with no per-state artwork. 1.75px reads slightly lighter than Lucide's 2px
   at the 18px size the sidebar uses. */
.icon-line {
    width: 18px; height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    vertical-align: -3px;
}
.sidebar-section-icon.icon-line { width: 17px; height: 17px; }
.sidebar-link:hover .sidebar-link-icon { color: var(--primary); }
.sidebar-link-text { white-space: nowrap; }
/* Active item: a soft tinted pill, not a saturated slab. On a white rail the
   tint alone is enough to locate yourself, and it keeps the label readable
   as dark text — which a full-gradient fill does not. */
.sidebar-link.is-active {
    background: var(--sidebar-active-bg);
    color: var(--primary);
    font-weight: 600;
}
.sidebar-link.is-active .sidebar-link-icon { color: var(--primary); }


/* Offcanvas (mobile drawer) reuses the sidebar palette */
.sidebar-offcanvas {
    width: var(--sidebar-w) !important;
    background: var(--sidebar-bg);
    --bs-offcanvas-width: var(--sidebar-w);
}
.sidebar-offcanvas .sidebar-inner { height: 100vh; }

/* ── 5. Header (topbar) ─────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
.topbar-hamburger {
    border: 0; background: transparent;
    width: 40px; height: 40px;
    border-radius: 8px;
    color: var(--text);
    font-size: 18px;
    display: none;            /* shown < 992px */
    place-items: center;
}
.topbar-hamburger:hover { background: #F3F4F6; }

/* ── Desktop sidebar collapse (topbar ☰) ─────────────────────────
 * Below 992px the ☰ opens Bootstrap's offcanvas drawer (untouched).
 * At ≥992px it instead narrows the sidebar to an icon rail: every text
 * label, section heading and group caret is hidden and .app-main's
 * margin follows. The state is remembered in localStorage by app.js. */
@media (min-width: 992px) {
    .topbar-hamburger { display: grid; }

    body.sidebar-collapsed .sidebar { width: var(--sidebar-rail-w); }
    body.sidebar-collapsed .app-main { margin-left: var(--sidebar-rail-w); }

    /* .sidebar-inner is normally pinned to the FULL sidebar width. It has to
       follow the rail too — otherwise it stays 260px wide inside a 72px
       overflow:hidden shell, and centring the links pushes their icons out
       past the visible edge, leaving an apparently empty rail. */
    body.sidebar-collapsed .sidebar-inner { width: var(--sidebar-rail-w); }

    /* Rail: the wide lock-up gives way to the square mark, and the header goes
       back to the topbar's height (the full-bleed plate is what made it taller). */
    body.sidebar-collapsed .sidebar-brand-full { display: none; }
    body.sidebar-collapsed .sidebar-logo { display: grid; }
    body.sidebar-collapsed .sidebar-brand { height: var(--header-h); }

    body.sidebar-collapsed .sidebar-brand-text,
    body.sidebar-collapsed .sidebar-link-text,
    body.sidebar-collapsed .sidebar-section-text,
    body.sidebar-collapsed .sidebar-section-caret,
    body.sidebar-collapsed .sidebar-foot { display: none; }

    /* A group header keeps its ICON on the rail (clicking it still expands the
       group) — without it the rail would show a few links and no structure. */
    body.sidebar-collapsed .sidebar-section:not(.sidebar-section-toggle) { display: none; }
    body.sidebar-collapsed .sidebar-section-toggle {
        justify-content: center; gap: 0; padding: 12px 0 6px;
    }
    body.sidebar-collapsed .sidebar-section-icon { font-size: 15px; width: auto; }

    body.sidebar-collapsed .sidebar-brand,
    body.sidebar-collapsed .sidebar-link { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
    body.sidebar-collapsed .sidebar-nav { padding-left: 8px; padding-right: 8px; }
    body.sidebar-collapsed .sidebar-link.is-active::before { left: -8px; }

    /* Hover-peek: while collapsed, hovering the rail floats the FULL menu
       over the page. .app-main's margin is untouched, so the page never
       reflows — the menu just overlays and retracts on mouse-out. Clicking
       ☰ is what makes the expansion permanent. */
    body.sidebar-collapsed .sidebar:hover { width: var(--sidebar-w); box-shadow: 0 0 24px rgba(0,0,0,.28); }
    body.sidebar-collapsed .sidebar:hover .sidebar-inner { width: var(--sidebar-w); }
    body.sidebar-collapsed .sidebar:hover .sidebar-brand-full { display: block; }
    body.sidebar-collapsed .sidebar:hover .sidebar-logo { display: none; }
    body.sidebar-collapsed .sidebar:hover .sidebar-brand-text,
    body.sidebar-collapsed .sidebar:hover .sidebar-link-text,
    body.sidebar-collapsed .sidebar:hover .sidebar-section-text,
    body.sidebar-collapsed .sidebar:hover .sidebar-section-caret { display: revert; }
    body.sidebar-collapsed .sidebar:hover .sidebar-section { display: block; }
    /* Hovered open: the header goes back to icon + label + chevron. */
    body.sidebar-collapsed .sidebar:hover .sidebar-section-toggle {
        display: flex; justify-content: space-between; gap: 8px; padding: 16px 12px 6px;
    }
    body.sidebar-collapsed .sidebar:hover .sidebar-section-icon { font-size: 13px; width: 18px; }
    body.sidebar-collapsed .sidebar:hover .sidebar-brand,
    body.sidebar-collapsed .sidebar:hover .sidebar-link {
        justify-content: flex-start; gap: 12px; padding-left: 12px; padding-right: 12px;
    }
    body.sidebar-collapsed .sidebar:hover .sidebar-brand { padding-left: 20px; padding-right: 20px; }
    body.sidebar-collapsed .sidebar:hover .sidebar-nav { padding-left: 12px; padding-right: 12px; }
    body.sidebar-collapsed .sidebar:hover .sidebar-link.is-active::before { left: -12px; }
}

.topbar-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 520px;
    display: flex;
    align-items: center;
}
.topbar-search-icon {
    position: absolute; left: 14px;
    color: var(--text-muted); font-size: 14px;
}
.topbar-search-input {
    width: 100%;
    height: 44px;
    border: 1px solid #E9EDF3;
    background: #F9FAFB;
    border-radius: 12px;
    padding: 0 84px 0 42px;
    font-size: 14px;
    color: var(--text);
}
.topbar-search-input::placeholder { color: #98A2B3; }
.topbar-search-input:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(21,96,224,.12);
}
.topbar-search-kbd {
    position: absolute; right: 10px;
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    background: #fff;
    border: 1px solid #E4EAF2;
    border-radius: 7px;
    padding: 3px 8px;
}

.topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* Space the two top switchers (License + Company) apart so they don't touch. */
.topbar-switchers { gap: 10px; }

.topbar-company-btn {
    display: inline-flex; align-items: center; gap: 10px;
    height: 46px; padding: 0 14px;
    border: 1px solid #E9EDF3;
    background: #fff;
    border-radius: 12px;
    color: var(--text);
    font-weight: 500; font-size: 13px;
}
/* The leading glyph becomes a small tinted tile so the chip reads as an
   identity (which company / which licence), not as another toolbar button. */
.topbar-company-btn > i:first-child {
    width: 30px; height: 30px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--sidebar-active-bg);
    color: var(--primary);
    font-size: 14px;
}
.topbar-company-btn:hover { border-color: #D6E2FA; background: #FCFDFF; }
.topbar-company-btn:hover { background: #F9FAFB; }
.topbar-company-btn i { color: var(--primary); }
.topbar-company-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Stacked trigger — company name over its last-sync caption, so the freshness
   of everything on screen is readable without opening the menu. */
.topbar-company-btn--stacked { height: 46px; align-items: center; }
.topbar-company-lines { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.topbar-company-sync { font-size: 11px; font-weight: 500; color: var(--muted); }

/* Company menu — sectioned (My / Shared), one row per company with its own
   sync caption and an "open in Tally" action. */
.company-menu { min-width: 320px; padding: 6px; }
.company-menu-head {
    font-size: 12px; font-weight: 600; color: var(--text);
    text-transform: none; letter-spacing: 0; padding: 8px 10px 4px;
}
.company-menu-row { display: flex; align-items: center; border-radius: 8px; }
.company-menu-row:hover { background: #F3F4F6; }
.company-menu-item {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
    padding: 8px 10px; border-radius: 8px; white-space: normal;
}
.company-menu-item:hover, .company-menu-item:focus { background: transparent; }
.company-menu-lines { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.company-menu-name { font-size: 13px; font-weight: 600; color: var(--text); }
.company-menu-sync { font-size: 11px; color: #16A34A; }
.company-menu-sync.is-pending { color: #D97706; }
.company-menu-check { color: #16A34A; font-size: 13px; margin-left: 8px; }
.company-menu-row.is-current { background: #F0FDF4; }
.company-menu-actions { flex: 0 0 auto; display: inline-flex; align-items: center; padding-right: 4px; }

/* Company Information — label/value rows, value right-aligned like the
   reference panel. */
.company-info-list { margin: 0; }
.company-info-list > div {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-bottom: 1px solid var(--border);
}
.company-info-list > div:last-child { border-bottom: 0; }
.company-info-list dt { font-weight: 600; color: var(--text); margin: 0; }
.company-info-list dd { margin: 0; color: var(--muted); text-align: right; }

.topbar-icon-btn {
    position: relative;
    width: 46px; height: 46px;
    border: 1px solid #E9EDF3;
    background: #fff;
    border-radius: 12px;
    color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.topbar-icon-btn:hover,
.topbar-icon-btn[aria-expanded="true"] {
    background: var(--sidebar-active-bg);
    color: var(--primary);
    border-color: #D6E2FA;
}
.topbar-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(21,96,224,.18); }
.topbar-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: #fff;
    border-radius: 9px;
    font-size: 11px; font-weight: 700;
    display: grid; place-items: center;
    border: 2px solid #fff;
}

.topbar-profile-btn {
    display: inline-flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 10px 0 6px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    color: var(--text);
}
.topbar-profile-btn:hover { background: #F9FAFB; }
.topbar-profile-btn::after { display: none; } /* hide bootstrap caret */
.topbar-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand-gradient);
    display: grid; place-items: center;
    flex: 0 0 auto;
}
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.topbar-avatar-fallback {
    color: #fff; font-weight: 600; font-size: 13px;
    width: 100%; height: 100%;
    align-items: center; justify-content: center; display: flex;
}
.topbar-profile-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.topbar-profile-name { font-size: 13px; font-weight: 600; }
.topbar-profile-role { font-size: 11px; color: var(--text-muted); }
.topbar-profile-caret { font-size: 11px; color: var(--text-muted); }

/* ── 6. Bottom-nav (mobile) ─────────────────────────────────────── */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1035;
    height: 62px;
    background: #fff;
    border-top: 1px solid var(--border);
    display: flex;
    box-shadow: 0 -1px 6px rgba(16,24,40,.06);
}
.bottom-nav-item {
    flex: 1 1 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    color: var(--text-muted);
    font-size: 11px; font-weight: 500;
}
.bottom-nav-icon { font-size: 18px; }
.bottom-nav-item.is-active { color: var(--primary); }

/* ── 7. Buttons ─────────────────────────────────────────────────── */
.btn { font-weight: 500; border-radius: 9px; }
.btn-light {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-light:hover { background: #F9FAFB; border-color: #D1D5DB; }
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-700); border-color: var(--primary-700); }

/* Primary action — the logo's blue→green gradient, so the button that commits
   the page carries the brand rather than a colour picked at random. */
.btn-gradient {
    background: var(--brand-gradient-btn);
    border: 0;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(21,96,224,.24);
}
.btn-gradient:hover { color: #fff; filter: brightness(1.05); box-shadow: 0 6px 16px rgba(21,96,224,.34); }

/* Install App button (header) */
.btn-install {
    height: 40px;
    border: 1px solid var(--primary);
    background: #EFF4FF;
    color: var(--primary);
    font-size: 13px; font-weight: 600;
    border-radius: 10px;
    padding: 0 14px;
}
.btn-install:hover { background: var(--primary); color: #fff; }

/* Table row action buttons */
.action-btn {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    display: inline-grid; place-items: center;
    font-size: 13px;
    margin-left: 4px;
    transition: .15s;
}
.action-btn--view { color: var(--primary); }
.action-btn--view:hover { background: #EFF4FF; border-color: var(--primary); }
.action-btn--edit { color: var(--primary); }
.action-btn--edit:hover { background: #EFF4FF; border-color: var(--primary); }
.action-btn--delete { color: var(--danger); }
.action-btn--delete:hover { background: var(--danger-bg); border-color: var(--danger); }

/* ── 8. Cards + page-head ───────────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
/* The page head is a BANNER, not a bare row: a soft white-to-mint wash inside
   a rounded card, so every screen opens with the same masthead instead of the
   title floating on the page background. The wash runs left-to-right, ending
   in the logo's green — the one place the brand's second colour appears at
   size without competing with the primary action button sitting on top of it. */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 20px 24px;
    background: linear-gradient(100deg, #FFFFFF 0%, #F5FBF8 52%, #E9F6EF 100%);
    border: 1px solid #E8EFF6;
    border-radius: 16px;
}
.page-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.2px; }
.page-subtitle { font-size: 14px; color: var(--text-muted); margin: 0; }

/* Masthead artwork, BESIDE THE TITLE (see .page-title-mark below).
   It used to be a background-image on the banner itself, pinned at
   "right 220px center" — a fixed guess at how much room the action buttons
   would need. Settings has two wide buttons (Reset + Save Settings) and the
   artwork landed on top of them; every page with wider-than-usual actions had
   the same collision, and no single offset can be right for all of them.
   Anchored to the title it is laid out by flow, so it cannot overlap anything.
   Decorative, drawn as a background so it can never intercept a click. */
.page-title-mark {
    display: inline-block;
    width: 46px;
    height: 32px;
    margin-left: 10px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150' fill='none'%3E%3Cpath d='M96 26h56l24 24v70a8 8 0 0 1-8 8H96a8 8 0 0 1-8-8V34a8 8 0 0 1 8-8z' fill='%23FFFFFF' stroke='%23C9DCF7' stroke-width='2.5'/%3E%3Cpath d='M152 26l24 24h-24V26z' fill='%23E4EEFC'/%3E%3Crect x='102' y='60' width='44' height='4' rx='2' fill='%23D7E4F8'/%3E%3Crect x='102' y='72' width='60' height='4' rx='2' fill='%23D7E4F8'/%3E%3Crect x='102' y='84' width='34' height='4' rx='2' fill='%23D7E4F8'/%3E%3Ccircle cx='160' cy='106' r='19' fill='%231560E0'/%3E%3Cpath d='M74 62c14-12 30-10 36-4-2 12-14 22-28 22-6 0-10-2-12-4 0-6 1-10 4-14z' fill='%2345B649' opacity='.55'/%3E%3Cpath d='M60 86c10-14 26-16 34-12-1 13-12 24-26 25-5 0-9-1-11-3 0-4 1-7 3-10z' fill='%231560E0' opacity='.35'/%3E%3C/svg%3E");
}
/* Narrow screens give the title the full width it can get, and print does not
   want decoration at all. */
@media (max-width: 575.98px) {
    .page-title-mark { display: none; }
}
@media print {
    .page-title-mark { display: none; }
}

/* The voucher masthead keeps its own right-anchored artwork: its layout is a
   fixed masthead bar, not a title + variable action row. */
.voucher-head {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150' fill='none'%3E%3Cpath d='M96 26h56l24 24v70a8 8 0 0 1-8 8H96a8 8 0 0 1-8-8V34a8 8 0 0 1 8-8z' fill='%23FFFFFF' stroke='%23C9DCF7' stroke-width='2.5'/%3E%3Cpath d='M152 26l24 24h-24V26z' fill='%23E4EEFC'/%3E%3Crect x='102' y='60' width='44' height='4' rx='2' fill='%23D7E4F8'/%3E%3Crect x='102' y='72' width='60' height='4' rx='2' fill='%23D7E4F8'/%3E%3Crect x='102' y='84' width='34' height='4' rx='2' fill='%23D7E4F8'/%3E%3Ccircle cx='160' cy='106' r='19' fill='%231560E0'/%3E%3Cpath d='M74 62c14-12 30-10 36-4-2 12-14 22-28 22-6 0-10-2-12-4 0-6 1-10 4-14z' fill='%2345B649' opacity='.55'/%3E%3Cpath d='M60 86c10-14 26-16 34-12-1 13-12 24-26 25-5 0-9-1-11-3 0-4 1-7 3-10z' fill='%231560E0' opacity='.35'/%3E%3C/svg%3E"), linear-gradient(100deg, #FFFFFF 0%, #F5FBF8 52%, #E9F6EF 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: right 220px center, 0 0;
    background-size: auto 82%, cover;
}
/* Only .voucher-head still carries artwork in its background; .page-head's
   moved next to the title, where narrow screens hide it via .page-title-mark. */
@media (max-width: 1199.98px) {
    .voucher-head { background-image: linear-gradient(100deg, #FFFFFF 0%, #F5FBF8 52%, #E9F6EF 100%); }
}
@media print {
    .page-head, .voucher-head { background-image: none; }
}
.page-breadcrumb { font-size: 13px; }
.page-breadcrumb .breadcrumb-item { color: var(--text-muted); }
.page-breadcrumb .breadcrumb-item a { color: var(--text-muted); }
.page-breadcrumb .breadcrumb-item a:hover { color: var(--primary); }
.page-breadcrumb .breadcrumb-item.active { color: var(--text); font-weight: 500; }
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* On the banner, a plain .btn-light would disappear into the wash — give the
   secondary actions a solid white chip so both buttons read as buttons. */
.page-head-actions .btn { height: 42px; padding: 0 18px; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 11px; font-weight: 600; font-size: 14px; }
.page-head-actions .btn-light { background: #fff; border-color: #E4EAF2; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.page-head-caret { font-size: 11px; }
.date-range-pill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px;
    border: 1px solid var(--border);
    background: #fff; border-radius: 10px;
    color: var(--text); font-size: 13px; font-weight: 500;
}
.date-range-pill i { color: var(--primary); }

/* ── 9. Filter card ─────────────────────────────────────────────── */
.filter-card { margin-bottom: 20px; overflow: hidden; border-radius: 16px; }
.filter-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
}
.filter-card-title { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; }
.filter-card-title i { color: var(--primary); }
.filter-card-chevron { color: var(--text-muted); transition: transform .2s; }
.filter-card-head[aria-expanded="false"] .filter-card-chevron { transform: rotate(180deg); }
.filter-card-body { padding: 4px 20px 20px; border-top: 1px solid var(--border); }
.filter-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.filter-control { font-size: 13px; border-color: var(--border); }
.filter-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,96,224,.12); }
.filter-card-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 16px; margin-top: 16px;
    border-top: 1px solid var(--border);
}

/* Toolbar above a table (Show entries / Sort By) */
.table-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding: 16px 20px;
}
.toolbar-show, .toolbar-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.toolbar-show .form-select, .toolbar-sort .form-select { width: auto; font-size: 13px; }
.sort-dir-btn {
    width: 38px; height: 38px;
    border: 1px solid var(--border); background: #fff; border-radius: 8px;
    color: var(--text-muted);
}
.sort-dir-btn:hover { background: #F9FAFB; color: var(--text); }

/* ── 10. Data table + pills ─────────────────────────────────────── */
/* A wide listing (many columns) must SCROLL horizontally INSIDE its card —
 * never spill out and break the page. The row ⋮ action dropdown would normally
 * be clipped by this scroll box, so app.js positions it with Popper
 * strategy:'fixed' (it floats against the viewport, above the scroll box). */
.data-table-wrap { width: 100%; overflow-x: auto; }
/* Row action ⋮ menu must sit ABOVE the (opaque) header + sibling rows. */
.data-table-actions { position: relative; }
.data-table-actions .dropdown-menu { z-index: 1060; }
.data-table { font-size: 13px; }
.data-table thead th {
    background: #F9FAFB;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
    padding: 14px;
    white-space: nowrap;
    vertical-align: middle;
}
/* First column names the record; brand-colour it like the line-item grids so
   both kinds of table read the same way. */
.data-table thead th:first-child { color: var(--primary); }
.data-table-th { display: inline-flex; align-items: center; gap: 6px; }
.data-table-sort { color: #C4C9D4; font-size: 11px; }
/* Clickable sort header. */
.data-table-sortlink { color: inherit; text-decoration: none; cursor: pointer; user-select: none; }
.data-table-sortlink:hover { color: var(--primary); }
.data-table-sortlink:hover .data-table-sort { color: var(--primary); }
.data-table-sort.is-active { color: var(--primary); font-size: 12px; }
.data-table tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}
.data-table tbody tr:hover { background: #F7FAFF; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table-check { width: 44px; }
.data-table-idx { width: 48px; }
.data-table-money { font-variant-numeric: tabular-nums; font-weight: 500; }
.data-table-actions-head { white-space: nowrap; }
.data-table-actions { white-space: nowrap; }

/* Status pills */
.pill-status {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    line-height: 1;
}
.pill-status--success { background: var(--success-bg); color: var(--success); }
.pill-status--danger  { background: var(--danger-bg);  color: var(--danger); }
.pill-status--warning { background: var(--warning-bg); color: var(--warning); }
.pill-status--muted   { background: #F3F4F6; color: var(--text-muted); }
/* Info pill sits on the brand tint like every other blue surface. */
.pill-status--info    { background: var(--sidebar-active-bg); color: var(--primary); }

/* ── Overlays: modals, dropdowns, toasts ────────────────────────────
 * These were running on stock Bootstrap — square-ish corners, a heavy
 * drop shadow and a grey divider under every header — so any dialog or
 * menu looked like a different product from the page behind it. They now
 * use the same 16px radius, hairline border and soft shadow as the cards. */
.modal-content {
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(16,24,40,.14);
}
.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 18px 22px;
}
.modal-title { font-size: 16px; font-weight: 700; }
.modal-body { padding: 22px; }
.modal-footer {
    border-top: 1px solid var(--border);
    padding: 16px 22px;
    gap: 10px;
}
.modal-footer .btn {
    height: 44px; padding: 0 20px; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px; font-weight: 600; font-size: 14px;
}
.modal-footer .btn-primary { background: var(--brand-gradient-btn); border: 0; }
.modal-footer .btn-primary:hover { filter: brightness(1.08); background: var(--brand-gradient-btn); }
.modal-backdrop.show { opacity: .45; }

.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16,24,40,.10);
    padding: 6px;
    font-size: 14px;
}
.dropdown-item {
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--sidebar-hover); color: var(--text); }
/* The chosen row keeps the same tint as an active sidebar item, so "selected"
   looks the same wherever it appears. */
.dropdown-item.active, .dropdown-item:active {
    background: var(--sidebar-active-bg);
    color: var(--primary);
    font-weight: 600;
}
.dropdown-header {
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--sidebar-muted);
    padding: 8px 12px 6px;
}
.dropdown-divider { border-color: var(--border); margin: 6px 4px; }

.toast {
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16,24,40,.12);
}

/* Location pills */
.pill-loc {
    display: inline-flex; align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    line-height: 1;
}
.pill-loc i { font-size: 10px; opacity: .8; }
.pill-loc--blue   { background: #EFF4FF; color: var(--primary); }
.pill-loc--green  { background: #E6FAF0; color: #16A34A; }
.pill-loc--purple { background: #E9F6EF; color: var(--brand-green-text); }
.pill-loc--grey   { background: #F3F4F6; color: var(--text-muted); }

/* Neutral badge pill */
.pill-badge {
    display: inline-flex; align-items: center;
    padding: 4px 11px; border-radius: 999px;
    background: #F3F4F6; color: var(--text-muted);
    font-size: 12px; font-weight: 600;
}

/* ── 11. Pagination ─────────────────────────────────────────────── */
.pagination-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 18px;
    padding: 22px 24px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
}
.pagination-show, .pagination-info { font-size: 13px; color: var(--text-muted); }
.pagination-show { display: inline-flex; align-items: center; gap: 8px; }
.pagination-perpage { width: auto; font-size: 13px; }
.pagination-info strong { color: var(--text); font-weight: 600; }
.pagination-nav .page-link {
    color: var(--text);
    border-color: #E4EAF2;
    font-size: 13px;
    font-weight: 500;
    margin: 0 4px;
    padding: 9px 13px;
    border-radius: 10px !important;
    min-width: 40px;
    text-align: center;
}
.pagination-nav .page-link:hover { background: var(--sidebar-active-bg); color: var(--primary); border-color: #D6E2FA; }
/* The current page is the only filled chip in the row, so it is findable at a
   glance on a register that may run to dozens of pages. */
.pagination-nav .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
.pagination-nav .page-item.disabled .page-link { color: #C4C9D4; }

/* ── 12. Form card (tabs) + grid + counters + sync mini-card ────── */
.form-card { overflow: hidden; }
.form-card-head { border-bottom: 1px solid var(--border); padding: 0 8px; }
.form-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 4px; border: 0; }
.form-tab {
    border: 0; background: transparent;
    padding: 16px 18px;
    color: var(--text-muted);
    font-size: 14px; font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    display: inline-flex; align-items: center;
}
.form-tab:hover { color: var(--text); }
.form-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.form-card-body { padding: 24px; }
.form-card, .card { border-radius: 16px; }

/* Form grid (3-col responsive) */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 20px;
}
.form-group { display: flex; flex-direction: column; }
.form-group.col-span-2 { grid-column: span 2; }
.form-group.col-span-3 { grid-column: span 3; }
.form-label { font-size: 13px; font-weight: 600; color: #344054; margin-bottom: 7px; }
.form-label .req { color: var(--danger); margin-left: 2px; }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
/* Read-only value on the voucher detail page. Same 44px block a field would
   occupy, so a detail screen and its edit screen share one rhythm. */
.vd-value {
    min-height: 44px;
    display: flex; align-items: center;
    padding: 10px 0;
    font-size: 14px; font-weight: 500;
    color: var(--text);
}
/* A field is a 44px rounded box with a hairline edge. The height is the same
   as the header/page-head controls, so a form reads as one rhythm rather than
   a stack of differently-sized boxes; 44px is also a comfortable touch target,
   which matters because this ships as an installable PWA. */
.form-control, .form-select {
    min-height: 44px;
    border-color: #E4E7EC;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text);
    background-color: #fff;
}
.form-control::placeholder { color: #98A2B3; }
.form-control:hover, .form-select:hover { border-color: #D0D5DD; }
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(21,96,224,.12);
}
.form-control:disabled, .form-control[readonly] { background-color: #F9FAFB; color: var(--text-muted); }
/* Compact variant for grid rows (line items), where 44px would be too tall. */
.form-control-sm, .form-select-sm { min-height: 38px; padding: 6px 10px; border-radius: 9px; font-size: 13px; }
/* Line-item grids carry a dozen fields per ROW, so they take the compact size
   automatically — the markup uses a plain .form-control and should not have to
   remember a modifier on every cell.

   Sized down from 13px/38px: eleven columns at the old size pushed the grid
   past the viewport, so Qty and Rate were clipped to a couple of characters
   and a selected item's quantity was unreadable. */
.li-table td .form-control, .li-table td .form-select,
.q-table td .form-control,  .q-table td .form-select,
.li-row .form-control,      .li-row .form-select {
    min-height: 34px; padding: 5px 8px; border-radius: 8px; font-size: 12.5px;
}

.form-grid--3col { grid-template-columns: repeat(3, 1fr); }
.form-grid-span-3 { grid-column: span 3; }
/* An address or terms box needs the room a single cell does not give it. */
.form-grid-span-2 { grid-column: span 2; }

/* Advanced Settings is four labelled blocks (Buyer / Consignee / Dispatch /
   Order), not one long field soup — the headings are what make it scannable. */
.q-adv-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--primary); margin: 18px 0 10px;
}
.q-adv-title:first-of-type { margin-top: 4px; }
.q-adv-copy {
    border: 1px solid var(--border); background: #fff; color: var(--text-muted);
    border-radius: 7px; padding: 3px 10px; font-size: 11px; font-weight: 600;
    text-transform: none; letter-spacing: 0; cursor: pointer;
}
.q-adv-copy:hover { border-color: var(--primary); color: var(--primary); }

/* Add Customer modal (quotations/create.ejs) — wide, two titled sections,
   three columns each, instead of the old cramped single-column stack. */
#q-new-customer-modal .modal-dialog { max-width: 900px; }
.q-nc-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px 4px;
    margin: 0 0 20px;
}
.q-nc-section:last-of-type { margin-bottom: 0; }
.q-nc-section-title {
    width: auto;
    padding: 0 8px;
    margin: 0 0 14px -4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* input with prefix (+91 flag) / suffix (₹) */
.input-affix { display: flex; align-items: stretch; }
.input-affix .affix {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px;
    background: #F9FAFB;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 14px;
    white-space: nowrap;
}
.input-affix .affix--prefix { border-radius: 8px 0 0 8px; border-right: 0; }
.input-affix .affix--suffix { border-radius: 0 8px 8px 0; border-left: 0; }
.input-affix .form-control { border-radius: 0; }
.input-affix .affix--prefix + .form-control { border-radius: 0 8px 8px 0; }
.input-affix .form-control:has(+ .affix--suffix),
.input-affix .form-control.has-suffix { border-radius: 8px 0 0 8px; }
/* When the prefix is itself a <select> (country-code chooser) keep it
   compact, clickable and visually consistent with the static affix. */
select.affix {
    cursor: pointer;
    color: var(--text);
    font-size: 14px;
    padding-right: 8px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 22px;
}

/* char counter under textareas */
.char-counter { font-size: 12px; color: var(--text-muted); text-align: right; margin-top: 4px; }

/* form divider */
.form-divider { height: 1px; background: var(--border); border: 0; margin: 24px 0; }
.form-section-title { font-size: 14px; font-weight: 600; margin: 0 0 14px; color: var(--text); }

/* Status radio group (Active/Inactive/Blocked) */
.status-radios { display: flex; gap: 10px; flex-wrap: wrap; }
.status-radio {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px; font-weight: 600;
    color: var(--text-muted);
}
.status-radio input { accent-color: var(--primary); }
/* Only the SELECTED chip is tinted; the others stay neutral grey
   outlines (matches the screenshot). Driven by the checked radio via
   :has() so no JS is needed. */
.status-radio.is-active:has(input:checked)   { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.status-radio.is-inactive:has(input:checked) { border-color: var(--danger);  background: var(--danger-bg);  color: var(--danger); }
.status-radio.is-blocked:has(input:checked)  { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
/* Hover affordance on the un-selected chips. */
.status-radio:hover { border-color: #D1D5DB; }

/* Tally Sync mini-card */
.sync-mini-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--warning-bg);
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
}
.sync-mini-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.sync-mini-value { font-size: 15px; font-weight: 700; color: var(--warning); }
.btn-sync-now {
    background: #fff; border: 1px solid var(--warning);
    color: var(--warning); font-weight: 600; font-size: 13px;
    border-radius: 8px; padding: 7px 14px;
}
.btn-sync-now:hover { background: var(--warning); color: #fff; }

/* "Same as Shipping" inline checkbox label */
.same-as-label { font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }

/* card footer (form actions) */
/* Footer action bar. The commit button is the only gradient on the card, so
   it is unmistakably the thing that submits; Cancel stays a white chip beside
   it, matching the page-head's secondary treatment. Buttons match the 44px
   field height so the whole form sits on one rhythm. */
.form-card-footer {
    display: flex; justify-content: flex-end; align-items: center; gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    background: #FCFCFD;
    border-radius: 0 0 16px 16px;
}
.form-card-footer .btn {
    height: 44px; padding: 0 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px; font-weight: 600; font-size: 14px;
}
.form-card-footer .btn-light { background: #fff; border-color: #E4EAF2; }
.form-card-footer .btn-light:hover { background: #F5F7FB; border-color: #D0D5DD; }
/* The submit button is marked up as .btn-primary on most voucher pages; give
   it the brand gradient so pages do not each have to remember .btn-gradient. */
.form-card-footer .btn-primary {
    background: var(--brand-gradient-btn);
    border: 0;
    box-shadow: 0 4px 12px rgba(21,96,224,.24);
}
.form-card-footer .btn-primary:hover { filter: brightness(1.08); background: var(--brand-gradient-btn); }
/* A "Reset"-style action anchored to the far left of the same bar. */
.form-card-footer .btn-reset { margin-right: auto; color: var(--primary); background: #fff; border: 1px solid #E4EAF2; }
.form-card-footer .btn-reset:hover { background: var(--sidebar-active-bg); }

@media (max-width: 575.98px) {
    /* Phone: full-width stacked actions, thumb-sized. */
    .form-card-footer { flex-wrap: wrap; padding: 16px; }
    .form-card-footer .btn { flex: 1 1 100%; }
    .form-card-footer .btn-reset { margin-right: 0; order: 3; }
}

/* Placeholder pane for not-yet-built tabs */
.tab-placeholder {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
}
.tab-placeholder-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: #F3F4F6;
    display: grid; place-items: center;
    margin: 0 auto 16px;
    font-size: 26px;
    color: #9CA3AF;
}
.tab-placeholder-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }

/* ── 13. Dashboard ──────────────────────────────────────────────── */
/* Stat cards */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 20px;
    transition: border-color .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.stat-card:hover { border-color: #DCE4EF; box-shadow: 0 4px 14px rgba(16,24,40,.06); }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: grid; place-items: center;
    font-size: 18px;
}
.stat-card--blue   .stat-icon { background: var(--tone-blue-bg);   color: var(--tone-blue); }
.stat-card--purple .stat-icon { background: var(--tone-purple-bg); color: var(--tone-purple); }
.stat-card--teal   .stat-icon { background: var(--tone-teal-bg);   color: var(--tone-teal); }
.stat-card--green  .stat-icon { background: var(--tone-green-bg);  color: var(--tone-green); }
.stat-card--amber  .stat-icon { background: var(--tone-amber-bg);  color: var(--tone-amber); }
.stat-card--indigo .stat-icon { background: var(--tone-indigo-bg); color: var(--tone-indigo); }
.stat-trend { font-size: 12px; font-weight: 600; color: var(--success); display: inline-flex; align-items: center; gap: 4px; }
.stat-trend.is-down { color: var(--danger); }
.stat-label { font-size: 13px; color: var(--text-muted); }
.stat-value { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1; }
.stat-spark { height: 28px; width: 100%; }

/* KPI panels (dashboard Summary / Need Attention) */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}
.kpi-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.kpi-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
}
.kpi-panel-title {
    font-size: 15px; font-weight: 600; color: var(--text); margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
}
.kpi-panel--danger .kpi-panel-head { background: #FEF2F2; }
.kpi-panel--danger .kpi-panel-title-icon { color: var(--danger); font-size: 14px; }

/* 2x2 tile grid — the 1px gap over a border-coloured background draws the
   hairline dividers, so no per-tile borders are needed. */
.kpi-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
}
.kpi-tile {
    background: var(--card);
    padding: 14px 16px;
    display: block;
    text-decoration: none;
    color: inherit;
    min-height: 70px;
    transition: background .15s;
    transition: background .12s ease;
}
a.kpi-tile:hover { background: #F9FAFB; }
.kpi-tile-label {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 6px;
}
/* Every tile navigates somewhere, so it needs to answer a hover. */
.kpi-tile:hover { background: #F7FAFF; color: inherit; }
.kpi-tile:hover .kpi-tile-chevron { color: var(--primary); }
.kpi-tile-label-text { display: inline-flex; align-items: center; gap: 6px; }
.kpi-tile-lock { font-size: 12px; color: var(--text-muted); }
.kpi-tile-chevron { font-size: 13px; color: #9CA3AF; flex: 0 0 auto; }
.kpi-tile-value { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.15; }
.kpi-tile-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.kpi-tile-sub strong { color: var(--text); font-weight: 700; }
.kpi-panel--danger .kpi-tile-value { color: var(--danger); }

/* Range select in the Summary panel header. */
/* Native select (see the `no-search` class in routes/web.js): the browser
   renders the option list itself, so every period label shows in full
   instead of being ellipsised by a custom dropdown. */
.kpi-panel-select {
    font: inherit; font-size: 12px;
    padding: 6px 26px 6px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--card); color: var(--text);
    cursor: pointer; max-width: 100%;
}

/* Sales & Receipt + Receivables panels (dashboard row 2) */
.sr-figures {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    margin-bottom: 16px;
}
.sr-figure {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px;
    background: #F9FAFB; border: 1px solid var(--border); border-radius: 8px;
}
.sr-figure-label { font-size: 13px; color: var(--text-muted); }
.sr-figure-value { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }

.sr-footer {
    display: grid; grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--border); margin-top: 16px;
}
.sr-footer-cell { padding: 11px 8px; text-align: center; }
.sr-footer-cell + .sr-footer-cell { border-left: 1px solid var(--border); }
.sr-footer-label {
    font-size: 12px; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.sr-footer-value { font-size: 15px; font-weight: 700; color: var(--text); }
.sr-footer-delta {
    font-size: 12px; font-weight: 700; margin-top: 3px;
    display: inline-flex; align-items: center; gap: 4px; color: var(--success);
}
.sr-footer-delta.is-down { color: var(--danger); }

/* Receivables */
.recv-total {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; margin-bottom: 14px;
    background: #F9FAFB; border: 1px solid var(--border); border-radius: 8px;
}
/* Donut takes the leftover space; the legend claims only the width its
   longest band label needs, so "45 - 90 Days" never wraps onto two lines. */
.recv-body {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px; align-items: center;
}
.recv-canvas-wrap { position: relative; height: 172px; min-width: 0; }
.recv-legend { display: flex; flex-direction: column; gap: 6px; }
.recv-legend-row {
    display: flex; align-items: center; gap: 9px; font-size: 12px;
    color: inherit; text-decoration: none; border-radius: 6px; padding: 2px 4px; margin: -2px -4px;
}
.recv-legend-row:hover { background: var(--hover-bg, rgba(127, 127, 127, 0.08)); text-decoration: none; }
.recv-legend-swatch { width: 20px; height: 6px; border-radius: 3px; flex: 0 0 auto; }
.recv-legend-text { display: flex; flex-direction: column; line-height: 1.3; }
.recv-legend-band { color: var(--text-muted); white-space: nowrap; }
.recv-legend-amount { font-weight: 700; color: var(--text); white-space: nowrap; }
.sr-footer--three { grid-template-columns: repeat(3, 1fr); }

/* Row-2 cards: tighter padding + a shorter bar chart than the generic
   .chart-card, so both panels stay close to the reference's height. */
.chart-card { border-radius: 16px; }
.chart-card--sr, .chart-card--recv { padding: 18px; display: flex; flex-direction: column; }
.chart-card--sr .chart-card-canvas-wrap { height: 205px; }
.chart-card--sr .chart-card-head, .chart-card--recv .chart-card-head { margin-bottom: 12px; }
.chart-card--sr .sr-footer, .chart-card--recv .sr-footer { margin-top: auto; }
.chart-card--sr .chart-card-title, .chart-card--recv .chart-card-title { font-size: 15px; }

/* Top 10 + Day Book (dashboard row 3) */
.top10-tabbar { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); }
.top10-tabs {
    display: flex; gap: 4px;
    overflow-x: auto; overflow-y: hidden;
    flex: 1 1 auto; min-width: 0;
    padding: 0 0 8px;
    scroll-behavior: smooth;
    /* The native bar is hidden — the chevrons are the affordance. */
    scrollbar-width: none; -ms-overflow-style: none;
}
.top10-tabs::-webkit-scrollbar { display: none; }
.top10-scroll {
    flex: 0 0 auto;
    width: 26px; height: 26px; margin-bottom: 8px;
    display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--card); color: var(--text-muted);
    font-size: 10px; cursor: pointer;
}
.top10-scroll:hover { background: #F3F4F6; color: var(--text); }
.top10-scroll[hidden] { display: none; }
.top10-tab {
    flex: 0 0 auto;
    border: 0; border-bottom: 2px solid transparent; background: transparent;
    padding: 8px 14px; border-radius: 0;
    font-size: 13px; font-weight: 500; color: var(--text-muted);
    white-space: nowrap; cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}
.top10-tab:hover { color: var(--text); }
.top10-tab.is-active {
    color: var(--primary); font-weight: 600;
    border-bottom-color: var(--primary);
    background: transparent; box-shadow: none;
}
.top10-panel[hidden] { display: none; }
.top10-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.top10-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.top10-list > li:last-child .top10-item { border-bottom: 0; }
a.top10-item { text-decoration: none; color: inherit; transition: background .12s ease; }
a.top10-item:hover { background: #F9FAFB; }
a.top10-item:hover .top10-name { text-decoration: underline; }
.top10-rank {
    flex: 0 0 auto; width: 26px; text-align: center;
    font-size: 13px; font-weight: 700; color: var(--text-muted);
}
/* Medals for the top three, plain numerals below. */
.top10-rank--1 { color: #D97706; }
.top10-rank--2 { color: #9CA3AF; }
.top10-rank--3 { color: #B45309; }
.top10-name { flex: 1 1 auto; min-width: 0; color: var(--primary); }
.top10-value { flex: 0 0 auto; font-weight: 600; color: var(--text); white-space: nowrap; }
.top10-qty {
    flex: 0 0 auto; width: 56px; text-align: right;
    color: var(--text-muted); white-space: nowrap;
}
.top10-empty, .daybook-empty {
    padding: 40px 12px; text-align: center;
    color: var(--text-muted); font-size: 13px;
}

/* Day Book */
.daybook-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.daybook-pill {
    border: 1px solid transparent; background: transparent;
    padding: 6px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--text-muted);
    cursor: pointer; text-decoration: none;
}
.daybook-pill:hover { background: #F3F4F6; color: var(--text); }
.daybook-pill.is-active {
    background: var(--card); border-color: var(--border);
    color: var(--text); font-weight: 600; box-shadow: var(--shadow);
}
.daybook-date {
    font: inherit; font-size: 13px;
    padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--card); color: var(--text); cursor: pointer;
}
.daybook-date.is-active { border-color: var(--primary); font-weight: 600; }
.daybook-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.daybook-table th {
    text-align: left; font-weight: 600; color: var(--text-muted);
    padding: 8px 6px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.daybook-table td { padding: 9px 6px; border-bottom: 1px solid var(--border); }
.daybook-table tr:last-child td { border-bottom: 0; }
.daybook-table .is-num { text-align: right; white-space: nowrap; font-weight: 600; }
.daybook-scroll { max-height: 320px; overflow-y: auto; }
.daybook-voucher { color: var(--primary); text-decoration: none; }
.daybook-voucher:hover { text-decoration: underline; }

/* A panel awaiting its AJAX replacement: dimmed and inert, but still laid
   out so the page never jumps while the fragment is in flight. A veil +
   spinner sits over the panel so the wait is visible, not just a dim card. */
[data-dash-section].is-loading { position: relative; pointer-events: none; }
[data-dash-section].is-loading > * { opacity: .45; transition: opacity .12s ease; }
[data-dash-section].is-loading::before {
    content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit;
    background: rgba(255, 255, 255, .35);
}
[data-dash-section].is-loading::after {
    content: ''; position: absolute; z-index: 5;
    top: 50%; left: 50%; margin: -14px 0 0 -14px;
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid rgba(22, 163, 74, .22);
    border-top-color: #16A34A;
    animation: dash-spin .7s linear infinite;
}
@keyframes dash-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    [data-dash-section].is-loading::after { animation-duration: 2s; }
}

/* Day Book date picker — a themed popup calendar. The native
   <input type="date"> picker is browser-styled and cannot follow the theme,
   so dashboard.js builds this instead. */
.dp-wrap { position: relative; }
/* Fixed, and parented to <body> by dashboard.js — an absolutely positioned
   popup inside the Day Book card is clipped by that card's `overflow: hidden`.
   left/top are written by the script from the button's rect. */
.dp {
    position: fixed; top: 0; left: 0; z-index: 1050;
    width: 268px; max-width: calc(100vw - 16px); padding: 12px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.16);
}
.dp-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px;
}
.dp-title { font-size: 13px; font-weight: 600; color: var(--text); }
.dp-nav {
    width: 26px; height: 26px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--card); color: var(--text-muted);
    font-size: 10px; cursor: pointer;
}
.dp-nav:hover { background: #F3F4F6; color: var(--text); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow {
    text-align: center; font-size: 10px; font-weight: 600;
    color: var(--text-muted); padding: 4px 0;
}
.dp-day {
    border: 0; background: transparent; cursor: pointer;
    height: 30px; border-radius: 8px;
    font-size: 12px; color: var(--text);
}
.dp-day:hover { background: #F3F4F6; }
.dp-day.is-muted { color: #C4C9D2; }
.dp-day.is-today { font-weight: 700; color: var(--primary); }
.dp-day.is-selected { background: var(--primary); color: #fff; font-weight: 700; }
.dp-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--border);
}
.dp-value { font-size: 12px; font-weight: 600; color: var(--text); }
.dp-actions { display: flex; gap: 6px; }
.dp-btn {
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    padding: 5px 12px; border-radius: 8px; font-size: 12px; cursor: pointer;
}
.dp-btn:hover { background: #F3F4F6; }
.dp-btn--apply { background: var(--primary); border-color: var(--primary); color: #fff; }
.dp-btn--apply:hover { background: var(--primary-700); }

/* Cash & Bank screens */
.ledger-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.ledger-head-total { font-size: 15px; color: var(--text-muted); }
.ledger-head-total strong { font-size: 20px; color: var(--text); font-weight: 700; }
.ledger-head-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ledger-head-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ledger-meta-item { font-size: 12px; color: var(--text-muted); }
.ledger-dc { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ledger-table { padding: 0 4px; }
.ledger-table th, .ledger-table td { padding: 12px 14px; }
.ledger-foot {
    padding: 12px 14px; font-size: 12px; color: var(--text-muted);
    border-top: 1px solid var(--border);
}
.ledger-foot--split {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.ledger-balances { color: var(--text-muted); }
.ledger-balances strong { color: var(--text); }
.ledger-pager { display: inline-flex; align-items: center; gap: 6px; }

/* Set Reminder (per-party schedule) */
.rem-form { padding: 4px 2px 8px; }
.rem-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border);
}
.rem-row:last-of-type { border-bottom: 0; }
.rem-row--toggle { justify-content: flex-start; gap: 10px; cursor: pointer; }
.rem-label { font-size: 13px; color: var(--text); }
.rem-hint { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.rem-note { font-size: 11px; color: var(--text-muted); margin: 6px 2px 0; line-height: 1.5; }
.rem-actions { margin-top: 14px; }
.rem-preview {
    white-space: pre-wrap;
    background: #F9FAFB; border: 1px solid var(--border); border-radius: 10px;
    padding: 14px; font-size: 12px; line-height: 1.6; color: var(--text);
}

/* Chart cards */
.chart-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}
.chart-card { padding: 20px; }
.chart-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.chart-card-title { font-size: 16px; font-weight: 600; margin: 0; }
.chart-card-canvas-wrap { position: relative; height: 280px; }

/* Recent cards */
.recent-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}
.recent-card { overflow: hidden; }
.recent-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.recent-card-title { font-size: 15px; font-weight: 600; margin: 0; }
.recent-card-link { font-size: 13px; color: var(--primary); font-weight: 500; }

/* Recent sync activity list */
.sync-list { list-style: none; margin: 0; padding: 8px 0; }
.sync-list-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
}
.sync-list-item + .sync-list-item { border-top: 1px solid var(--border); }
/* Sync rows are links (to that record's list, filtered) — give them the
   same affordance the Day Book and Top 10 rows have. */
a.sync-list-item { color: inherit; text-decoration: none; transition: background .12s ease; }
a.sync-list-item:hover { background: #F9FAFB; }
a.sync-list-item .sync-list-module { color: var(--primary); }
.sync-list-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center; flex: 0 0 auto;
    background: #EFF4FF; color: var(--primary); font-size: 14px;
}
.sync-list-main { flex: 1 1 auto; min-width: 0; }
.sync-list-module { font-size: 13px; font-weight: 600; color: var(--text); }
.sync-list-record { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-list-meta { text-align: right; flex: 0 0 auto; }
.sync-list-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ── 14. Responsive (<992px) + PWA offline indicator ────────────── */

/* Offline indicator dot/chip (header) */
.offline-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px;
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.offline-indicator i { font-size: 11px; }
body.is-offline .offline-indicator[hidden] { display: inline-flex !important; }

/* Tablet/mobile breakpoint */
@media (max-width: 991.98px) {
    .app-main { margin-left: 0; }
    .topbar-hamburger { display: grid; }
    .topbar-search { max-width: none; }

    /* Banner masthead on a phone: tighter box, and the actions stack to full
       width underneath the title instead of being squeezed beside it. A 42px
       target stays thumb-sized, which is the point of the PWA install. */
    .page-head { padding: 16px; border-radius: 14px; align-items: flex-start; }
    .page-title { font-size: 20px; }
    .page-head-actions { width: 100%; }
    .page-head-actions .btn { flex: 1 1 auto; }
    .topbar-search-kbd { display: none; }
    .topbar-company-name { display: none; }

    /* Phone header: hide the bulky Install button (the desktop app.js toggle
       still controls it ≥lg) + cap the compact switcher pill's text. */
    #installAppBtn { display: none !important; }
    .topbar-switch-ctx { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-switch-caret { font-size: 11px; color: var(--text-muted); }

    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-row   { grid-template-columns: 1fr; }
    .chart-row { grid-template-columns: 1fr; }
    .recent-row { grid-template-columns: 1fr; }
    .page { padding: 20px 16px 96px; }
}

@media (max-width: 767.98px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-group.col-span-2, .form-group.col-span-3 { grid-column: span 1; }
    .stat-grid { grid-template-columns: 1fr; }
    .kpi-tiles { grid-template-columns: 1fr; }
    .recv-body { grid-template-columns: 1fr; }
    .sr-figures { grid-template-columns: 1fr; }

    .page-head-actions { width: 100%; }
    .page-head-actions .btn,
    .page-head-actions > a { flex: 1 1 auto; justify-content: center; }

    .pagination-bar { justify-content: center; }
    .filter-card-footer .btn { flex: 1 1 auto; }
    .topbar { padding: 0 14px; }
    .topbar-icon-btn.d-none { display: none; }
}

/* ════════════════════════════════════════════════════════════════
 * Invoice — create page (line items + totals)
 * ════════════════════════════════════════════════════════════════ */

/* Section title strip inside a card */
.inv-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.inv-section-title { font-size: 15px; font-weight: 700; margin: 0; color: var(--text); }
.inv-body { padding: 20px; }

/* Line-items table */
.li-table-wrap { overflow-x: auto; }
.li-table { width: 100%; min-width: 920px; border-collapse: collapse; }
.li-table thead th {
    background: #F9FAFB; color: var(--text-muted);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    padding: 13px 10px; text-align: left; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
/* The item column is where every row starts, so it is the one header that is
   brand-coloured — a reading anchor, not decoration. */
.li-table thead th:first-child { color: var(--primary); }
.li-table tbody td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.li-table .num { text-align: right; }
.li-table .center { text-align: center; }
.li-table .li-idx { color: var(--text-muted); font-size: 13px; width: 34px; text-align: center; }
.li-table input, .li-table select {
    width: 100%; border: 1px solid #E4E7EC; border-radius: 9px;
    padding: 9px 11px; font-size: 13px; background: #fff; color: var(--text);
}
.li-table input:hover, .li-table select:hover { border-color: #D0D5DD; }
.li-table input:focus, .li-table select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,96,224,.12);
}
.li-table input[readonly] { background: #F9FAFB; color: var(--text-muted); }
.li-table .li-product { min-width: 220px; }
.li-table .li-num { text-align: right; }
.li-cell-calc { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; text-align: right; display: block; }
.li-remove {
    border: 1px solid var(--border); background: #fff; color: var(--danger);
    width: 32px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center;
}
.li-remove:hover { background: var(--danger-bg); border-color: var(--danger); }
.li-addrow {
    margin: 14px 0 0; display: inline-flex; align-items: center; gap: 8px;
    border: 1px dashed var(--primary); color: var(--primary); background: rgba(21,96,224,.04);
    border-radius: 8px; padding: 9px 16px; font-weight: 600; font-size: 13px;
}
.li-addrow:hover { background: rgba(21,96,224,.1); }

/* Invoice footer: notes (left) + totals (right) */
.inv-foot { display: grid; grid-template-columns: 1fr 360px; gap: 24px; padding: 20px; }
.inv-totals { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.inv-total-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px; font-size: 14px; border-bottom: 1px solid var(--border);
}
.inv-total-row .lbl { color: var(--text-muted); }
.inv-total-row .val { font-weight: 600; color: var(--text); }
.inv-total-row.grand {
    background: var(--sidebar-active-bg);
    border-bottom: 0;
    padding: 14px 16px;
}
.inv-total-row.grand .lbl { color: var(--text); font-weight: 700; font-size: 15px; }
.inv-total-row.grand .val { color: var(--primary); font-weight: 800; font-size: 18px; }

@media (max-width: 991.98px) {
    .inv-foot { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
 * Tally Sync — dashboard
 * ════════════════════════════════════════════════════════════════ */

/* Connection banner */
.sync-conn {
    display: flex; align-items: center; gap: 18px;
    padding: 18px 22px; border-radius: var(--radius);
    border: 1px solid var(--border); background: #fff; margin-bottom: 20px;
}
.sync-conn.is-connected { background: linear-gradient(135deg, rgba(22,163,74,.06), rgba(22,163,74,.02)); border-color: #BBF7D0; }
.sync-conn.is-disconnected { background: var(--danger-bg); border-color: #FECACA; }
.sync-conn-icon {
    width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 22px; color: #fff;
    background: var(--success);
}
.sync-conn.is-disconnected .sync-conn-icon { background: var(--danger); }
.sync-conn-main { flex: 1; min-width: 0; }
.sync-conn-title { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 9px; }
.sync-conn-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: sync-pulse 1.8s infinite;
}
.sync-conn.is-disconnected .sync-conn-dot { background: var(--danger); animation: none; }
@keyframes sync-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.sync-conn-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.sync-conn-meta b { color: var(--text); font-weight: 600; }
.sync-conn-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Count chips inside the module table */
.cnt { font-weight: 700; }
.cnt-ok   { color: var(--success); }
.cnt-warn { color: var(--warning); }
.cnt-bad  { color: var(--danger); }
.cnt-zero { color: var(--text-muted); font-weight: 600; }

/* Mini progress bar (synced / total) */
.sync-bar { height: 6px; border-radius: 999px; background: #EEF2F7; overflow: hidden; min-width: 90px; }
.sync-bar > span { display: block; height: 100%; background: var(--success); border-radius: 999px; }

/* Small per-row sync button */
.btn-sync-row {
    border: 1px solid var(--primary); background: #fff; color: var(--primary);
    font-weight: 600; font-size: 12px; border-radius: 8px; padding: 6px 12px;
    white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.btn-sync-row:hover { background: var(--primary); color: #fff; }
.btn-sync-row.is-syncing { opacity: .85; }

/* ════════════════════════════════════════════════════════════════
 * Reports — hub cards + report viewer
 * ════════════════════════════════════════════════════════════════ */

.report-group { margin-bottom: 26px; }
.report-group-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-muted); margin: 0 0 12px;
}
.report-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.report-card {
    display: flex; align-items: flex-start; gap: 14px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px; text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.report-card:hover { border-color: #D6E2FA; box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.report-card-icon {
    width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 18px;
}
.report-card-icon--blue   { background: #DBEAFE; color: var(--primary); }
.report-card-icon--purple { background: #EDE9FE; color: var(--secondary); }
.report-card-icon--teal   { background: #CCFBF1; color: #0D9488; }
.report-card-icon--green  { background: var(--success-bg); color: var(--success); }
.report-card-icon--amber  { background: var(--warning-bg); color: var(--warning); }
.report-card-icon--indigo { background: #E0E7FF; color: var(--primary); }
.report-card-body { flex: 1; min-width: 0; }
.report-card-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.report-card-title .fa-arrow-right { color: var(--text-muted); font-size: 12px; transition: transform .15s; }
.report-card:hover .report-card-title .fa-arrow-right { transform: translateX(3px); color: var(--primary); }
.report-card-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

/* Report viewer (Sales Register etc.) */
.report-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.report-table thead th {
    background: #F9FAFB; color: var(--text-muted);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap;
}
.report-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.report-table .num { text-align: right; white-space: nowrap; }
.report-table tfoot td {
    padding: 13px 12px; font-weight: 700; color: var(--text);
    background: #F9FAFB; border-top: 2px solid var(--border);
}
.report-meta-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 20px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════
 * Roles & Permissions (RBAC matrix)
 * ════════════════════════════════════════════════════════════════ */

.rbac-roles { display: flex; gap: 12px; flex-wrap: wrap; }
.rbac-role-chip {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 12px; background: #fff;
    padding: 12px 16px; min-width: 190px; transition: all .15s;
}
.rbac-role-chip:hover { border-color: #D6E2FA; }
.rbac-role-chip input { position: absolute; opacity: 0; pointer-events: none; }
.rbac-role-chip-icon {
    width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
    display: grid; place-items: center; background: #EEF2F7; color: var(--text-muted); font-size: 15px;
}
.rbac-role-chip-name { font-weight: 600; font-size: 14px; color: var(--text); }
.rbac-role-chip-meta { font-size: 12px; color: var(--text-muted); }
.rbac-role-chip.is-active {
    border-color: var(--primary); background: rgba(21,96,224,.05);
    box-shadow: 0 0 0 1px var(--primary) inset;
}
.rbac-role-chip.is-active .rbac-role-chip-icon { background: var(--primary); color: #fff; }

/* Matrix table */
.rbac-matrix { width: 100%; border-collapse: collapse; min-width: 720px; }
.rbac-matrix thead th {
    background: #F9FAFB; color: var(--text-muted);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 12px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap;
}
.rbac-matrix thead th:first-child { text-align: left; }
.rbac-matrix tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: center; }
.rbac-matrix tbody td:first-child { text-align: left; font-weight: 600; font-size: 13.5px; color: var(--text); }
.rbac-matrix tbody tr:hover { background: #FBFCFE; }
.rbac-matrix input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.rbac-col-action { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.rbac-col-action i { font-size: 12px; }

/* ── Row-action modals (custom Delete confirm + View details) ─────────
 * Replaces the browser-native confirm()/alert() with on-brand popups. */
.confirm-delete-icon {
    width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
    display: grid; place-items: center; font-size: 24px;
    background: #FEE2E2; color: #DC2626;
}
.confirm-action-icon {
    width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
    display: grid; place-items: center; font-size: 24px;
    background: #DBEAFE; color: var(--primary);
}
.record-detail { margin: 0; }
.record-detail-row {
    display: grid; grid-template-columns: 40% 60%; gap: 10px;
    padding: 9px 2px; border-bottom: 1px solid var(--border);
}
.record-detail-row:last-child { border-bottom: 0; }
.record-detail-row dt { margin: 0; color: var(--text-muted); font-weight: 500; font-size: 13px; }
.record-detail-row dd { margin: 0; color: var(--text); font-weight: 600; font-size: 13.5px; word-break: break-word; }
/* Anchor-styled edit action (the <a> variant) sits flush with the buttons. */
a.action-btn { text-decoration: none; }
.action-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ── Header notifications dropdown panel ─────────────────────────── */
.notif-menu { width: 320px; padding: 0; max-height: min(78vh, 620px); overflow-y: auto; }
.notif-menu .notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600;
    position: sticky; top: 0; background: #fff; z-index: 2;   /* stays while list scrolls */
}
.notif-menu .notif-foot {
    position: sticky; bottom: 0; background: #fff; z-index: 2; /* "View all" pinned at bottom */
    font-weight: 600; color: var(--primary); border-top: 1px solid var(--border); border-bottom: 0;
}
.notif-menu .notif-item {
    display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border);
    white-space: normal;
}
.notif-menu .notif-item:last-child { border-bottom: 0; }
.notif-menu .notif-item-icon {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: grid; place-items: center;
    background: var(--primary-soft, #EFF2FF); color: var(--primary);
}
.notif-menu .notif-item-title { font-weight: 600; font-size: 13px; color: var(--text); }
.notif-menu .notif-item-sub { font-size: 12px; color: var(--text-muted); }
.notif-menu .notif-empty { padding: 26px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* Per-user read state: an unread item gets a soft tint + a leading dot; a read
   item is dimmed. Purely decorative — read-tracking works without these. */
.notif-menu .notif-item.is-unread { background: var(--primary-soft, #EFF2FF); }
.notif-menu .notif-item.is-unread .notif-item-title::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
    border-radius: 50%; background: var(--primary); vertical-align: middle;
}
.notif-menu .notif-item.is-read { opacity: .62; }

/* ── Licence plan strip (top bar — company-admin) ─────────────────── */
.topbar-license { display: flex; align-items: center; gap: 8px; margin-right: 4px; }
.lic-pill {
    display: inline-flex; align-items: center; font-size: 12px; color: #475569;
    background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 999px;
    padding: 5px 11px; white-space: nowrap; line-height: 1;
}
.lic-pill strong { color: #0F172A; margin-left: 3px; font-weight: 700; }
.lic-pill-warn { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
.lic-pill-warn strong { color: #78350F; }

/* ── Sidebar: not-yet-built module (menu में दिखता है, click नहीं होता) ───── */
.sidebar-link.is-disabled {
    display: flex;
    align-items: center;
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}
.sidebar-soon {
    margin-left: auto;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .05rem .35rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    opacity: .8;
}

/* ── License Modules: sidebar-जैसा group header (rbac-matrix is a <table>,
   so the header is a full-width <td colspan> row, not a CSS-grid column) ──── */
.rbac-matrix .rbac-group-head {
    padding: .5rem .75rem;
    margin-top: .25rem;
    background: var(--surface-2, rgba(0, 0, 0, .03));
    border-radius: .375rem;
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.rbac-group-label {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════
 * Quotation — Create Voucher (LiveKeeping-style layout, our theme colours)
 * ════════════════════════════════════════════════════════════════ */

/* Full-width header bar — our primary/accent gradient, not LiveKeeping's green. */
/* Quiet section header. It used to be a saturated blue→green bar, which now
   competes with the page-head banner directly above it AND with the primary
   button — three gradients stacked. The page head names the screen; this only
   has to label the card. */
/* The voucher masthead. Create pages have NO .page-head — this bar IS their
   page head, so it gets the same white-to-mint wash: one masthead language
   across list pages and create pages.
   It used to be a saturated blue-to-green bar with white-on-translucent
   controls sitting on it. Those controls are restyled for a LIGHT bar below
   (and in each page's local <style>); leaving them white would make the back
   arrow and the "View <list>" button invisible. */
.voucher-head {
    padding: 20px 24px;
    background: linear-gradient(100deg, #FFFFFF 0%, #F5FBF8 52%, #E9F6EF 100%);
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.2px;
    border-bottom: 1px solid #E8EFF6;
    border-radius: 16px 16px 0 0;
}
/* Back chip and list button, sized for the light bar. */
.voucher-head .q-back {
    color: var(--text) !important;
    background: #fff !important;
    border: 1px solid #E4EAF2;
    width: 32px !important; height: 32px !important;
    border-radius: 9px !important;
}
.voucher-head .q-back:hover { background: #F5F7FB !important; color: var(--primary) !important; }
.voucher-head .q-list-btn {
    color: #fff !important;
    background: var(--brand-gradient-btn) !important;
    border: 0 !important;
    padding: 10px 18px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
    box-shadow: 0 4px 12px rgba(21,96,224,.24);
}
.voucher-head .q-list-btn:hover { color: #fff !important; filter: brightness(1.05); }

/* Items grid — same visual language as .li-table, its own class because the
 * column set (Godown / Tax Incl.) differs from the invoice grid. */
.q-table { width: 100%; min-width: 980px; border-collapse: collapse; }
.q-table thead th {
    background: #F9FAFB; color: var(--text-muted);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 10px 7px; text-align: left; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
/* The item column is where every row starts, so it is the one header that is
   brand-coloured — a reading anchor, not decoration. */
.q-table thead th:first-child { color: var(--primary); }
.q-table tbody td { padding: 7px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.q-table .num { text-align: right; }
.q-table .center { text-align: center; }
.q-table input, .q-table select {
    width: 100%; border: 1px solid #E4E7EC; border-radius: 8px;
    padding: 6px 8px; font-size: 12.5px; background: #fff; color: var(--text);
}
.q-table input:hover, .q-table select:hover { border-color: #D0D5DD; }
.q-table input:focus, .q-table select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,96,224,.12);
}
.q-table input[readonly] { background: #F9FAFB; color: var(--text-muted); }
.q-table input[type="checkbox"] { width: auto; }
.q-table td:nth-child(1) { min-width: 200px; }
.q-table td:nth-child(7),
.q-table td:nth-child(8) { min-width: 140px; }
.q-del {
    border: 0; background: transparent; color: var(--danger);
    width: 34px; height: 34px; border-radius: 9px; display: inline-grid; place-items: center;
}
.q-del:hover { background: var(--danger-bg); }
/* Add-row control: a solid tinted chip. The dashed outline read as an empty
   drop zone rather than a button you press. */
.q-add-btn {
    border: 0; color: var(--primary); background: var(--sidebar-active-bg);
    width: 34px; height: 34px; border-radius: 9px; display: inline-grid; place-items: center;
}
.q-add-btn:hover { background: #DCE8FD; }

/* Quotation No — readonly text + a pencil button that unlocks it for editing. */
/* The chosen party's standing, under the picker — small and muted, because it
   is context for the decision, not a field being edited. */
.q-party-balance {
    margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-muted);
}

.q-no-wrap { display: flex; align-items: center; gap: 8px; position: relative; }
.q-no-wrap .form-control { flex: 1 1 auto; }
.q-no-edit {
    flex: 0 0 auto; border: 1px solid var(--border); background: #fff; color: var(--text-muted);
    width: 36px; height: 36px; border-radius: 8px; display: inline-grid; place-items: center;
}
.q-no-edit:hover { color: var(--primary); border-color: var(--primary); }

/* Quotation No popup (Task 3) — Default/Custom panel anchored under the
   pencil icon, LiveKeeping's layout in our theme colours/tokens. */
.q-no-popup {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1080;
    width: 340px; max-width: calc(100vw - 32px);
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
    padding: 14px;
}
.q-no-popup-radios { display: flex; gap: 18px; margin-bottom: 10px; }
.q-no-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.q-no-radio input { accent-color: var(--primary); }
.q-no-popup-fields { display: flex; gap: 8px; margin-bottom: 12px; }
.q-no-field { flex: 1 1 0; min-width: 0; }
.q-no-field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.q-no-field .form-control { width: 100%; }
.q-no-popup-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Narration / Advanced Settings — collapsible strips with a trailing chevron. */
.q-collapse { border-top: 1px solid var(--border); }
.q-collapse-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; background: transparent; border: 0; text-align: left;
    font-size: 13px; font-weight: 600; color: var(--text);
}
.q-collapse-head i { color: var(--text-muted); transition: transform .2s; }
.q-collapse-head[aria-expanded="true"] i { transform: rotate(180deg); }
.q-collapse-body { padding: 4px 20px 18px; }

/* Right-hand totals panel — reuses the invoice totals visual language. */
.q-foot { display: grid; grid-template-columns: 1fr 360px; gap: 24px; padding: 20px; }
.q-totals { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.q-total-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px; font-size: 14px; border-bottom: 1px solid var(--border);
}
.q-total-row .lbl { color: var(--text-muted); }
.q-total-row .val { font-weight: 600; color: var(--text); }
.q-total-row.grand {
    background: linear-gradient(135deg, rgba(21,96,224,.06), rgba(109,40,217,.06));
    border-bottom: 0;
}
.q-total-row.grand .lbl { color: var(--text); font-weight: 700; font-size: 15px; }
.q-total-row.grand .val { color: var(--primary); font-weight: 800; font-size: 18px; }

@media (max-width: 991.98px) {
    .q-foot { grid-template-columns: 1fr; }
}