:root {
    --bg: #f6f8fb;
    --bg-2: #eef2f7;
    --card: #ffffff;
    --ink: #0b1220;
    --ink-2: #1f2937;
    --muted: #5b6776;
    --muted-2: #94a3b8;
    --border: #e4e9f0;
    --border-2: #eef2f6;

    --brand: #0d9488;
    --brand-2: #0b7d72;
    --brand-soft: #ecfdf5;
    --brand-glow: rgba(13,148,136,0.18);

    --paid: #047857;
    --paid-soft: #d1fae5;
    --pending: #dc2626;
    --pending-soft: #fee2e2;
    --partial: #ea580c;
    --partial-soft: #ffedd5;
    --info: #2563eb;
    --info-soft: #dbeafe;
    --purple: #7c3aed;
    --purple-soft: #ede9fe;

    --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --shadow-sm: 0 2px 4px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03);
    --shadow-md: 0 8px 24px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
    --shadow-lg: 0 20px 40px rgba(15,23,42,0.12), 0 6px 12px rgba(15,23,42,0.06);

    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
  }

  /* Dark theme — neutral grays, restrained accents (Linear/Vercel-style) */
  html[data-theme="dark"] {
    --bg: #0a0a0c;
    --bg-2: #131316;
    --card: #1a1a1f;
    --ink: #f2f2f3;
    --ink-2: #c8c8cc;
    --muted: #9094a0;
    --muted-2: #5e6168;
    --border: #2c2c33;
    --border-2: #232329;

    --brand: #14b8a6;
    --brand-2: #2dd4bf;
    --brand-soft: rgba(20,184,166,0.10);
    --brand-glow: rgba(20,184,166,0.20);

    --paid: #4ade80;
    --paid-soft: rgba(74,222,128,0.10);
    --pending: #d97777;          /* muted red — less Christmas with teal */
    --pending-soft: rgba(217,119,119,0.10);
    --partial: #e8a061;
    --partial-soft: rgba(232,160,97,0.10);
    --info: #6c8fea;
    --info-soft: rgba(108,143,234,0.10);
    --purple: #a78bfa;
    --purple-soft: rgba(167,139,250,0.10);

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
    --shadow-lg: 0 12px 28px rgba(0,0,0,0.45);
  }
  html[data-theme="dark"] body {
    background-image: none; /* no gradient noise in dark mode */
  }
  /* Subtle card definition in dark mode */
  html[data-theme="dark"] .card { border: 1px solid var(--border); box-shadow: none; }
  html[data-theme="dark"] .brand-logo { background: linear-gradient(135deg, var(--brand) 0%, #0d9488 100%); }
  html[data-theme="dark"] .nav-item.active { background: rgba(20,184,166,0.10); }
  html[data-theme="dark"] tr.clickable:hover { background: rgba(255,255,255,0.025) !important; }
  html[data-theme="dark"] .stat-card { background: var(--card); }
  html[data-theme="dark"] .toast { background: #f5f5f5; color: #18181b; }
  /* Reduce teal saturation on chrome elements in dark mode */
  html[data-theme="dark"] .tab.active { color: var(--ink); }
  html[data-theme="dark"] .tab.active::after, html[data-theme="dark"] .tab.active { border-bottom-color: var(--brand); }
  /* Pending/error text that doubles as a number — keep readable, not screaming */
  html[data-theme="dark"] td.danger-num, html[data-theme="dark"] .danger { color: #d97777 !important; }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    background: var(--bg);
    background-image: radial-gradient(circle at 0% 0%, rgba(13,148,136,0.04), transparent 40%), radial-gradient(circle at 100% 100%, rgba(37,99,235,0.03), transparent 40%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

  .app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; transition: grid-template-columns 0.18s ease; }
  .app.sb-collapsed { grid-template-columns: 60px 1fr; }
  /* Dark sidebar — modeled on the Wishlist Labs / Linear / Vercel
     aesthetic. Bright accent on the active row; everything else is
     calm muted text on a deep navy ground. Page content stays light;
     this contrast is intentional. */
  .sidebar { background: #0f172a; border-right: 1px solid #1e293b; padding: 18px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; color: #cbd5e1; }
  /* Pin brand and footer; let nav scroll */
  .sidebar .brand { flex-shrink: 0; }
  .sidebar .sidebar-foot { flex-shrink: 0; }
  .sidebar .nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    /* Subtle inset shadow when scrolled — matches scroll affordance */
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
    /* Bleed margin to align scrollbar with sidebar edge without losing touch target */
    margin-right: -8px;
    padding-right: 4px;
  }
  .sidebar .nav::-webkit-scrollbar { width: 6px; }
  .sidebar .nav::-webkit-scrollbar-track { background: transparent; }
  .sidebar .nav::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
  .sidebar .nav::-webkit-scrollbar-thumb:hover { background: #475569; }
  .sb-collapsed .sidebar { padding: 18px 8px; }
  .sb-collapsed .brand-name, .sb-collapsed .brand-sub, .sb-collapsed .nav-item span:not(.nav-pill), .sb-collapsed .nav-section, .sb-collapsed .userbox > div, .sb-collapsed .signout-text { display: none; }
  .sb-collapsed .nav-item { justify-content: center; padding: 9px 0; }
  .sb-collapsed .nav-item .nav-pill { position: absolute; top: 4px; right: 4px; padding: 0 4px; font-size: 9px; }
  .sb-collapsed .nav-item { position: relative; }
  .sb-collapsed .brand { padding: 8px 0 18px; justify-content: center; }
  .sb-collapsed .userbox { justify-content: center; padding: 4px 0; }
  .sb-collapsed .sidebar-foot { padding: 12px 4px; }
  .brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 18px; margin-bottom: 6px; border-bottom: 1px solid #1e293b; position: relative; }
  .brand-text { flex: 1; min-width: 0; }
  .sb-toggle { width: 26px; height: 26px; border-radius: 6px; background: transparent; border: 1px solid #334155; display: grid; place-items: center; cursor: pointer; color: #94a3b8; flex-shrink: 0; transition: all 0.12s; }
  .sb-toggle:hover { color: white; border-color: var(--brand); background: rgba(234, 88, 12, 0.16); }
  .sb-toggle svg { width: 13px; height: 13px; }
  .sb-collapsed .sb-toggle { width: 24px; height: 24px; margin: 0 auto; }
  .sb-collapsed .brand-text { display: none; }
  .topbar-toggle { display: none; } /* legacy class removed */
  .brand-logo { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--brand) 0%, #34d399 100%); display: grid; place-items: center; color: white; font-weight: 700; font-size: 14px; box-shadow: 0 4px 10px var(--brand-glow); overflow: hidden; flex-shrink: 0; }
  .brand-logo img { width: 100%; height: 100%; object-fit: cover; }
  .brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.2px; color: white; }
  .brand-sub { font-size: 10px; color: #94a3b8; margin-top: -2px; letter-spacing: 0.5px; }
  .nav { display: flex; flex-direction: column; gap: 1px; padding-top: 10px; }
  .nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: #64748b; padding: 14px 12px 6px; font-weight: 600; }
  /* Section header — minimal muted uppercase label on dark, no chip /
     border. The bright orange active-item pill is the only loud thing
     in the sidebar; sections stay quiet so they don't compete. */
  .nav-section-toggle {
    --section-accent: var(--brand);
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 6px;
    width: calc(100% - 8px);
    margin: 12px 4px 2px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #e2e8f0;
    padding: 14px 10px 8px 12px;
    font-weight: 700;
    font-size: 14px;
    transition: color 0.12s, background 0.12s;
  }
  /* Vertical accent bar removed — dark theme uses the section's
     muted-uppercase label alone. Kept the rule so HTML doesn't need
     to change; just hidden visually. */
  .nav-section-toggle .section-bar { display: none; }
  .nav-section-toggle:hover { background: rgba(255,255,255,0.04); color: #cbd5e1; }
  .nav-section-toggle.has-active .section-label { color: var(--brand); }
  /* Solid filled triangle (▼). Sized in `em` so it tracks the
     section-title font-size automatically (currently 12.5 px,
     so the triangle is also 12.5 px). Avoids the visual mismatch
     of a 12 px icon next to a 12.5 px text label. */
  .nav-section-toggle .chev {
    width: 1em;
    height: 1em;
    transition: transform 0.15s ease;
    flex-shrink: 0;
    opacity: 0.9;
  }
  .nav-section-toggle.collapsed .chev { transform: rotate(-90deg); }
  .nav-section-toggle .section-count {
    margin-left: auto;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    background: var(--bg-2);
    color: var(--muted);
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 500;
  }
  .nav-section-toggle .dot-active {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--section-accent);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--section-accent) 18%, transparent);
  }
  /* "Currently viewing X" hint shown under a collapsed section when that
     section contains the active route. Styled deliberately like METADATA
     (italic, muted, with an arrow + label prefix) — not like a clickable
     menu item — so the operator doesn't mistake it for the only sub-item
     in the section. */
  .section-active-hint {
    margin: 0 12px 4px 24px;
    padding: 2px 0;
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
    line-height: 1.3;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 0;
    transition: color 0.12s;
  }
  .section-active-hint::before {
    content: '↳ now viewing ';
    font-style: normal;
    color: var(--muted-2);
    margin-right: 2px;
    opacity: 0.85;
  }
  .section-active-hint:hover { color: var(--section-accent, var(--brand)); }
  /* Sidebar nav rows — dark theme. Calm muted text by default; bright
     orange filled pill across the full row when active; subtle white
     wash on hover. No card / no border / no shadow at rest. */
  .nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 14px 9px 14px; border-radius: 7px; color: #cbd5e1; font-weight: 500; font-size: 13px; transition: background 0.12s ease, color 0.12s ease; background: transparent; border: 0; margin: 1px 0; box-shadow: none; }
  .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: white; border: 0; box-shadow: none; }
  .nav-item.active { background: var(--brand); color: white; font-weight: 600; box-shadow: 0 6px 14px rgba(234, 88, 12, 0.32); }
  /* On dark theme the active row is its own filled pill, no extra
     left-edge accent bar needed (looks busy). Hide the ::before. */
  .nav-item.active::before { display: none; }
  .nav-item.active svg { color: white; opacity: 1; }
  .nav-item:hover svg { color: white; opacity: 1; }
  .nav-item svg { width: 17px; height: 17px; opacity: 0.75; transition: opacity 0.12s ease, color 0.12s ease; }
  .nav-pill { margin-left: auto; background: var(--pending); color: white; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; line-height: 1.2; }
  .nav-item.active .nav-pill { background: rgba(255, 255, 255, 0.25); color: white; }
  /* Active CHILD nav-item — uses a DARKER tinted background instead
     of the bright orange fill (which is reserved for the active TOP-
     level page). Reads as "open in this group" without competing
     with the actual active page highlight. */
  .nav-item.nav-child.active {
    background: rgba(234, 88, 12, 0.18);
    color: #fdba74;
    box-shadow: none;
  }
  .nav-item.nav-child.active svg { color: #fdba74; opacity: 1; }
  /* Active PARENT row — slightly highlighted text but no background
     fill (so it doesn't compete with the bright child fill / page-row). */
  .nav-item.nav-parent.active-parent {
    color: #fdba74;
  }
  .sidebar-foot { margin-top: auto; padding: 12px; border-top: 1px solid #1e293b; }
  .userbox { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; color: #cbd5e1; }
  .userbox strong { color: white; }
  .userbox > div span { color: #94a3b8; }
  .avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand) 0%, #34d399 100%); color: white; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
  .userbox strong { display: block; font-size: 12px; }
  .userbox span { display: block; font-size: 11px; color: var(--muted-2); }

  .main { display: flex; flex-direction: column; min-width: 0; }
  .topbar { height: 60px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; padding: 0 28px; gap: 16px; position: sticky; top: 0; z-index: 50; }
  .topbar-back {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border);
    display: inline-grid; place-items: center;
    cursor: pointer;
    color: var(--muted);
    transition: all 0.12s ease;
    flex-shrink: 0;
  }
  .topbar-back:hover { background: var(--bg-2); color: var(--ink); border-color: var(--border-2); }
  .topbar-back:active { transform: translateX(-1px); }
  /* Phase 6 — barcode scan button shares the topbar-back style */
  .topbar-scan {
    width: 36px; height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border);
    display: inline-grid; place-items: center;
    cursor: pointer;
    color: var(--muted);
    transition: all 0.12s ease;
    flex-shrink: 0;
  }
  .topbar-scan:hover  { background: var(--brand-soft); color: var(--brand-2); border-color: var(--brand-2); }
  .topbar-scan:active { transform: scale(0.96); }
  .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
  .crumbs .sep { opacity: 0.4; }
  .crumbs .here { color: var(--ink); font-weight: 600; }
  .topbar-spacer { flex: 1; }
  .topbar-search { width: 320px; height: 36px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px 0 36px; font-size: 13px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235b6776' stroke-width='2'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
    background-repeat: no-repeat; background-position: 12px center; transition: all 0.12s; }
  .topbar-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background-color: white; }

  .page { padding: 28px 32px 80px; max-width: none; }
  .page-head { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .page-title { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
  .page-sub { color: var(--muted); margin-top: 4px; font-size: 13px; line-height: 1.5; }
  /* In-card or in-section heading (h2 / h3). Consistent visual weight
     so every section feels part of the same design. Margin is
     specified inline at the call site so layout decisions stay local. */
  .section-title { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); letter-spacing: -0.005em; }

  /* Typography baseline INSIDE .page wrappers. Page modules sometimes
     attach their own inline font-sizes to h1/h2/h3 (legacy from when
     each page styled itself in isolation) — these defaults make sure
     headings still look consistent when no inline style overrides them,
     and reduce the visual mismatch between pages that adopt the class
     vs. those that don't. */
  .page h1:not([class]) { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
  .page h2:not([class]) { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
  .page h3:not([class]) { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0; }
  .page h4:not([class]) { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0; }

  /* Help icon — small "?" next to titles that pops a contextual explainer */
  .help-wrap { position: relative; display: inline-block; }
  .help-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: transparent; color: var(--muted); border: 1px solid var(--border); font-size: 11px; font-weight: 600; cursor: pointer; vertical-align: middle; margin-left: 8px; line-height: 1; transition: all 0.12s; padding: 0; font-family: inherit; }
  .help-btn:hover { color: var(--ink); border-color: var(--muted); background: var(--bg-2); }
  .help-popover { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; min-width: 280px; max-width: 380px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; box-shadow: var(--shadow-md); font-size: 12.5px; color: var(--ink-2); line-height: 1.55; font-weight: 400; letter-spacing: normal; text-align: left; }
  .help-popover strong { color: var(--ink); }
  .help-popover ol { padding-left: 18px; margin: 6px 0 0; }
  .help-popover li { margin: 3px 0; }
  .help-popover em { color: var(--ink); font-style: normal; background: var(--bg-2); padding: 1px 5px; border-radius: 3px; font-size: 11.5px; }

  .btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; border: 1px solid transparent; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; white-space: nowrap; position: relative; cursor: pointer; }
  /* Keyboard accessibility — visible focus ring when the user tabs to
     a button. mouse clicks suppress :focus-visible so the ring only
     appears for keyboard users (no visual noise on click). */
  .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
  .btn:active:not(:disabled) { transform: translateY(0); }
  .btn-primary { background: var(--ink); color: white; box-shadow: var(--shadow-xs); }
  .btn-primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .btn-brand { background: var(--brand); color: white; box-shadow: 0 2px 6px var(--brand-glow); }
  .btn-brand:hover { background: var(--brand-2); transform: translateY(-1px); box-shadow: 0 4px 12px var(--brand-glow); }
  .btn-outline { background: var(--card); border-color: var(--border); color: var(--ink); }
  .btn-outline:hover { background: var(--bg); border-color: var(--muted-2); }
  .btn-ghost { color: var(--muted); }
  .btn-ghost:hover { background: var(--bg-2); color: var(--ink); }
  .btn-danger { background: var(--pending); color: white; }
  .btn-danger:hover { background: #b91c1c; }
  .btn-danger-outline { background: var(--card); color: var(--pending); border-color: var(--border); }
  .btn-danger-outline:hover { background: var(--pending-soft); border-color: var(--pending); }
  .btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
  .btn-icon { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 6px; }
  .btn svg { width: 14px; height: 14px; }
  .row-actions { display: flex; gap: 1px; justify-content: flex-end; align-items: center; }

  /* ── Dropdown menu ─────────────────────────────────── */
  .dd { position: relative; }
  .dd-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 160px; z-index: 20; padding: 4px; }
  .dd-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; color: var(--ink); border-radius: 6px; cursor: pointer; width: 100%; text-align: left; }
  .dd-item:hover { background: var(--bg-2); }
  .dd-item.danger { color: var(--pending); }
  .dd-item.danger:hover { background: var(--pending-soft); }
  .dd-sep { height: 1px; background: var(--border-2); margin: 4px 0; }

  .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px; }
  /* Auto-responsive grid: tiles wrap to a new row when the page narrows.
     A single declaration replaces the old "repeat(4, 1fr) + media query
     breakpoints" pattern that left awkward in-between widths. Each tile
     stays at least 220px wide; if it can't, the grid drops a column. */
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
  .kpi { padding: 18px 20px; position: relative; overflow: hidden; }
  .kpi::before { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; border-radius: 50%; opacity: 0.08; transform: translate(30%, -30%); }
  .kpi-1::before { background: var(--brand); }
  .kpi-2::before { background: var(--info); }
  .kpi-3::before { background: var(--paid); }
  .kpi-4::before { background: var(--pending); }
  .kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: 600; }
  .kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; margin-top: 8px; letter-spacing: -0.5px; }
  .kpi-value .unit { font-size: 13px; color: var(--muted); margin-left: 4px; font-weight: 500; }
  .kpi-trend { font-size: 11px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 4px; }
  .kpi-trend.up { color: var(--paid); }
  .kpi-trend.down { color: var(--pending); }
  .kpi-trend.neutral { color: var(--muted); }
  .kpi-progress { margin-top: 10px; }
  .kpi-progress-bar { height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; display: flex; }
  .kpi-progress-bar .paid-seg { background: linear-gradient(to right, #34d399, var(--paid)); }
  .kpi-progress-bar .due-seg { background: var(--pending); }
  .kpi-progress-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; }
  .kpi-progress-meta .paid-label { color: var(--paid); font-weight: 600; }
  .kpi-progress-meta .due-label { color: var(--pending); font-weight: 600; }

  table { width: 100%; border-collapse: collapse; }
  thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-2); background: var(--bg); white-space: nowrap; }
  thead th:last-child { border-right: none; }
  thead th.sortable { cursor: pointer; user-select: none; transition: color 0.12s; }
  thead th.sortable:hover { color: var(--ink); }
  thead th.sortable.active { color: var(--brand-2); }
  .sort-arrow { display: inline-block; width: 10px; margin-left: 4px; opacity: 0.4; font-size: 10px; vertical-align: 1px; }
  thead th.sortable.active .sort-arrow { opacity: 1; }
  thead th.check-col, tbody td.check-col { width: 40px; padding: 11px 0 11px 14px; }
  tbody td { padding: 13px 14px; border-bottom: 1px solid var(--border-2); border-right: 1px solid var(--border-2); font-size: 13px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  tbody td:last-child { border-right: none; }
  tbody td.wrap, tbody td.note-cell { white-space: normal; overflow: visible; text-overflow: clip; }
  tbody td.action-cell, tbody td.actions { text-align: right; white-space: nowrap; }
  tbody td.num { white-space: nowrap; }
  th { min-width: 80px; }
  th.num, th.action-col { min-width: 60px; }

  /* Sticky first column so it stays visible during horizontal scroll */
  .card { overflow-x: auto; }
  .card table { min-width: max-content; }
  .card thead th:first-child,
  .card tbody td:first-child {
    position: sticky; left: 0; z-index: 3;
    background: var(--card);
  }
  .card thead th:first-child { z-index: 4; background: var(--bg); }
  /* Subtle right border on sticky col for visual separation when scrolled */
  .card thead th:first-child::after,
  .card tbody td:first-child::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
    background: var(--border-2); pointer-events: none;
  }
  /* When row is hovered, sticky cell bg matches row hover color */
  .card tbody tr.clickable:hover td:first-child { background: var(--bg); }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr { transition: background 0.1s; }
  tbody tr.clickable { cursor: pointer; }
  tbody tr.clickable:hover { background: var(--bg); }
  tbody tr.selected { background: var(--brand-soft) !important; }
  td.num, th.num { text-align: right; font-family: var(--mono); font-feature-settings: 'tnum'; font-size: 12.5px; }
  td.mono, th.mono { font-family: var(--mono); font-size: 12px; }
  td.danger-num { color: var(--pending); font-weight: 600; }
  td.paid-num { color: var(--paid); font-weight: 600; }

  /* Checkbox */
  .checkbox { width: 16px; height: 16px; border: 1.5px solid var(--border); border-radius: 4px; display: inline-grid; place-items: center; background: var(--card); cursor: pointer; transition: all 0.1s; flex-shrink: 0; vertical-align: middle; }
  .checkbox:hover { border-color: var(--brand); }
  .checkbox.checked { background: var(--brand); border-color: var(--brand); }
  .checkbox.checked::after { content: ''; width: 9px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg) translate(1px, -1px); }
  .checkbox.indeterminate { background: var(--brand); border-color: var(--brand); }
  .checkbox.indeterminate::after { content: ''; width: 9px; height: 2px; background: white; }

  .table-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--card); flex-wrap: wrap; }
  .table-toolbar .title { font-size: 13px; font-weight: 600; }
  .filter-input { height: 32px; padding: 0 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; color: var(--ink); min-width: 140px; transition: all 0.12s; }
  .filter-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  select.filter-input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6776' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px; }

  /* ── Bulk bar ──────────────────────────────────────── */
  .bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--brand-soft); border-bottom: 1px solid var(--border); color: var(--brand-2); font-size: 13px; font-weight: 500; }
  .bulk-bar .bulk-count { background: var(--brand); color: white; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; }

  .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.1px; }
  .badge::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .badge.pending { background: var(--pending-soft); color: var(--pending); }
  .badge.paid { background: var(--paid-soft); color: var(--paid); }
  .badge.partial { background: var(--partial-soft); color: var(--partial); }
  .badge.overdue { background: #fee2e2; color: #b91c1c; }
  .badge.overpaid { background: #fef3c7; color: #92400e; }
  .form-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.4px; }
  .badge.neutral { background: var(--bg-2); color: var(--muted); }
  .badge.brand { background: var(--brand-soft); color: var(--brand-2); }
  .badge.info { background: var(--info-soft); color: var(--info); }
  .badge.purple { background: var(--purple-soft); color: var(--purple); }
  .badge.warning { background: #fef3c7; color: #a16207; }
  .badge.no-dot::before { display: none; }

  .cat-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
  .cat-tag .dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

  /* ── Products & Inventory ─────────────────────────────────────── */
  .stamp-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid; box-sizing: border-box; }
  .stamp-badge.green  { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
  .stamp-badge.yellow { background: #fffbeb; color: #92400e; border-color: #fde68a; }
  .stamp-badge.red    { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
  .stamp-badge.btn-like { cursor: pointer; transition: filter 120ms ease; }
  .stamp-badge.btn-like:hover { filter: brightness(0.96); }

  .brand-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .brand-card + .brand-card { margin-top: 10px; }
  .brand-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; transition: background 120ms ease; }
  .brand-row:hover { background: var(--bg-2); }
  .brand-row .toggle { display: flex; align-items: center; gap: 12px; flex: 1; text-align: left; background: none; border: 0; cursor: pointer; padding: 0; color: inherit; }
  .brand-avatar { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #1f2937, #4b5563); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
  .brand-name { font-weight: 600; letter-spacing: -0.01em; }
  .brand-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .brand-actions { display: flex; align-items: center; gap: 4px; }
  .brand-actions .btn-ghost.btn-icon { padding: 7px; }

  .brand-products { border-top: 1px solid var(--border-2); background: var(--bg-2); }
  .product-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border-2); transition: background 120ms ease; }
  .product-row:last-child { border-bottom: 0; }
  .product-row:hover { background: var(--card); }
  .product-row.dragging { opacity: 0.4; }
  .product-row .grip { color: #d1d5db; cursor: grab; flex-shrink: 0; }
  .product-row:hover .grip { color: var(--muted); }
  .product-row .pkg-icon { color: var(--muted); flex-shrink: 0; }
  .product-row .pname { font-weight: 500; font-size: 14px; }
  .product-row .pmeta { font-size: 12px; color: var(--muted); margin-top: 1px; }
  .product-row .pclick { flex: 1; cursor: pointer; min-width: 0; }
  .product-row .pqty { font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; color: #374151; }
  .product-row .row-actions-hover { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 120ms ease; }
  .product-row:hover .row-actions-hover { opacity: 1; }
  .product-add-row { display: flex; align-items: center; gap: 8px; padding: 12px 18px 12px 50px; background: var(--bg-2); border-top: 1px solid var(--border-2); }

  .new-brand-bar { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
  .pi-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 8px; }
  .pi-eyebrow svg { width: 14px; height: 14px; }

  /* ── Inventory table ─────────────────────────────────────────── */
  .pi-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .pi-table th { padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; text-align: left; background: var(--bg-2); border-bottom: 1px solid var(--border); white-space: normal; overflow-wrap: break-word; word-break: break-word; vertical-align: middle; position: sticky; top: 0; z-index: 5; }
  /* Sticky table headers — column names stay pinned while scrolling
     long lists (Operating Expenses, AWBs, Inventory). The bottom
     border doubles as a separator so the row underneath doesn't
     visually "cling" to the header. Box-shadow gives the same effect
     as a bottom-border but layers over scrolled content cleanly. */
  .pi-table thead th { box-shadow: 0 1px 0 var(--border); }
  .pi-table th .sort-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; text-transform: inherit; letter-spacing: inherit; user-select: none; }
  .pi-table th .sort-btn:hover { color: #111827; }
  .pi-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-2); vertical-align: middle; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
  /* Inline editors inside cells should wrap text where possible. <input>
     can't wrap by HTML spec, but <textarea> elements (used for notes etc.)
     do; ensure they soft-wrap at the column edge instead of forcing the
     column wider. Selects keep their default truncation behavior since
     they only need to display the chosen option. */
  .pi-table td textarea { width: 100%; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; resize: vertical; min-height: 28px; }
  .pi-table tbody tr { transition: background 100ms ease; }
  .pi-table tbody tr:hover { background: var(--bg-2); }
  .pi-table tbody tr.selected { background: #eff6ff; }
  .pi-table tbody tr.selected:hover { background: #dbeafe; }
  .pi-table .cell-display { cursor: text; min-height: 24px; line-height: 1.5; }
  .pi-table .cell-display.mono { font-family: var(--mono); font-size: 12px; }
  .pi-table .cell-display.bold { font-weight: 600; }
  .pi-table .cell-input { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--brand); border-radius: 4px; font-size: 13px; font-family: inherit; }
  .pi-table .cell-input.mono { font-family: var(--mono); font-size: 12px; }
  .pi-table .cell-input.bold { font-weight: 600; }
  .pi-table .cell-input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-soft); }
  .pi-table .num-cell { text-align: right; font-variant-numeric: tabular-nums; }
  .pi-table .stamp-cell { text-align: center; }
  .pi-table .actions-col { width: 36px; }
  .pi-table .check-col { width: 36px; text-align: center; }
  .pi-table tr .row-trash { opacity: 0; transition: opacity 100ms ease; }
  .pi-table tr:hover .row-trash { opacity: 1; }
  .pi-table tr.new-row { background: #ecfdf5; }
  .pi-table tr.new-row:hover { background: #d1fae5; }
  /* The draft-expense row has cells of very different heights (Vendor
     stacks 3 inputs; Date is just one). Pinning every cell to the top
     edge lines up all the input boxes at the same y-coordinate across
     the row. Without this rule, the inherited vertical-align:middle
     made each input float in the centre of its own cell. */
  .pi-table tr.new-row td { vertical-align: top; }

  .pi-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
  .pi-search-wrap { position: relative; flex: 1; min-width: 240px; }
  .pi-search-wrap > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 14px; height: 14px; }
  .pi-search-wrap input { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--bg); }
  .pi-search-wrap input:focus { outline: none; border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 3px var(--brand-soft); }
  .pi-date-filters { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
  .pi-date-filters input[type="date"] { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
  .pi-cols-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); padding: 8px; min-width: 220px; z-index: 30; max-height: 420px; overflow-y: auto; }
  .pi-cols-menu .opt { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; font-size: 13px; cursor: pointer; }
  .pi-cols-menu .opt:hover { background: var(--bg-2); }
  .pi-cols-menu .head { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 4px 10px; font-weight: 600; }
  .pi-legend { margin-top: 14px; font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 18px; }
  .pi-legend .leg-pair { display: inline-flex; align-items: center; gap: 6px; }
  .pi-legend .stamp-badge { padding: 1px 6px; min-width: 0; font-size: 10px; }

  /* ── Inventory-type tabs (tree page) ─────────────────────────── */
  .pi-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
  .pi-tab { padding: 12px 18px; font-size: 13px; font-weight: 500; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; transition: color 120ms; display: inline-flex; align-items: center; gap: 8px; }
  .pi-tab:hover { color: #111827; }
  .pi-tab.active { color: var(--brand-2); border-bottom-color: var(--brand); }
  .pi-tab .count { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--bg-2); color: var(--muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .pi-tab.active .count { background: var(--brand-soft); color: var(--brand-2); }
  .pi-tab .tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .pi-tab .tab-dot.green { background: #10b981; } .pi-tab .tab-dot.amber { background: #f59e0b; } .pi-tab .tab-dot.red { background: #ef4444; }
  .pi-tab-desc { margin-top: -10px; margin-bottom: 18px; font-size: 12px; color: var(--muted); }

  /* ── Inventory-type pill badges ──────────────────────────────── */
  .type-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.1px; cursor: default; user-select: none; }
  .type-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .type-badge.green  { background: #ecfdf5; color: #065f46; }
  .type-badge.amber  { background: #fffbeb; color: #92400e; }
  .type-badge.red    { background: #fef2f2; color: #991b1b; }
  .type-badge.btn-like { cursor: pointer; transition: filter 120ms ease; }
  .type-badge.btn-like:hover { filter: brightness(0.96); }
  .type-badge.manual { box-shadow: 0 0 0 1.5px currentColor inset; }
  .type-badge.manual::after { content: '*'; margin-left: -2px; opacity: 0.7; font-weight: 700; }

  /* ── Type filter chip on detail page toolbar ─────────────────── */
  .pi-type-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
  .pi-type-filter select { padding: 5px 24px 5px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); cursor: pointer; }

  /* ── View-mode toggle (By Flavour / By Shipment) ─────────────── */
  .pi-viewmode { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }

  /* ── Banking & Cash ────────────────────────────────────────────── */
  .bank-accounts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }

  /* ── General Ledger ────────────────────────────────────────────── */
  .ledger-tx-start td { border-top: 1px solid var(--border) !important; }
  .ledger-tx-start:first-child td { border-top: none !important; }
  .ledger-tx-cont td { border-top: none !important; padding-top: 4px !important; padding-bottom: 4px !important; }

  /* ── Accounts Payable aging strip ──────────────────────────────── */
  .ap-aging-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .ap-aging-cell { padding: 12px 14px; border-left: 3px solid var(--border); border-radius: 6px; background: var(--bg-2); cursor: pointer; transition: all 120ms ease; }
  .ap-aging-cell:hover { background: var(--card); box-shadow: var(--shadow-sm); }
  .ap-aging-cell.active { background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand) inset; }

  /* ── Inventory Valuation ───────────────────────────────────────── */
  .iv-method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
  .iv-method-card { padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 120ms ease; background: var(--card); }
  .iv-method-card:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .iv-method-card.active { border-color: var(--brand); background: var(--brand-soft); }
  .iv-comp-bar { display: flex; height: 16px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
  .iv-comp-seg { transition: filter 120ms; }
  .iv-comp-seg:hover { filter: brightness(1.08); }
  .iv-row-expanded > td { background: var(--brand-soft) !important; }

  /* ── Financial Reports (P&L, Balance Sheet, Cash Flow) ─────────── */
  .fr-statement-card { padding: 32px 36px; max-width: 820px; margin: 0 auto; background: var(--card); }
  .fr-header { text-align: center; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 2px solid var(--ink); }
  .fr-company { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
  .fr-title { font-size: 22px; font-weight: 600; margin-top: 4px; letter-spacing: -0.02em; }
  .fr-subtitle { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .fr-section { font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.6px; color: var(--muted); margin-top: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .fr-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; line-height: 1.5; }
  .fr-row .lbl { padding-right: 20px; }
  .fr-row .amt { font-variant-numeric: tabular-nums; min-width: 130px; text-align: right; flex-shrink: 0; }
  .fr-row.muted-row { color: var(--muted); font-size: 12.5px; }
  .fr-row.subtotal { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; font-weight: 600; }
  .fr-row.total { border-top: 1.5px solid var(--ink); border-bottom: 3px double var(--ink); margin-top: 8px; padding: 8px 0; font-weight: 700; font-size: 15px; }
  .fr-amt-pos { color: var(--paid); }
  .fr-amt-neg { color: #b91c1c; }
  .fr-row.drillable { cursor: pointer; transition: background 100ms ease, padding 100ms ease; border-radius: 4px; padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; position: relative; }
  .fr-row.drillable:hover { background: var(--brand-soft); }
  .fr-row.drillable .lbl::after { content: '→'; opacity: 0; margin-left: 8px; transition: opacity 120ms; color: var(--brand-2); font-weight: 600; }
  .fr-row.drillable:hover .lbl::after { opacity: 1; }
  .fr-drill-count { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--muted); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle; }
  .term-help { border-bottom: 1px dotted var(--muted); cursor: help; }
  .term-help:hover { color: var(--brand-2); border-bottom-color: var(--brand); }
  .fr-row.drillable:hover .fr-drill-count { background: var(--brand); color: white; }
  .fr-note { background: var(--bg-2); border-left: 3px solid var(--brand); padding: 12px 14px; margin-top: 24px; font-size: 12px; color: var(--muted); border-radius: 0 6px 6px 0; line-height: 1.55; }
  .fr-note strong { color: var(--ink); }

  @media print {
    /* CRITICAL: collapse the app grid so the empty 232px sidebar column
       doesn't squeeze the page content into a tiny strip on the right.
       Reported by Sonu via Shreya's GST report PDF — every text element
       was wrapping word-by-word in a ~80px-wide column because the
       sidebar's grid track persisted even though display:none. */
    .app { display: block !important; grid-template-columns: none !important; }
    .main { display: block !important; margin-left: 0 !important; }
    body { background: white !important; margin: 0 !important; }
    .app, .main { background: white !important; min-width: 0 !important; }

    /* Hide everything that isn't part of the report itself */
    .sidebar, .topbar, .no-print, .nav-pill { display: none !important; }
    /* Floating UI elements that have no .no-print class */
    #ai-ask-launcher, .ai-ask-launcher,
    .fb-fab, .fb-panel, #feedback-host,
    #cloud-sync-status, .cloud-sync-status,
    .toast, .toast-host,
    #tour-host, .tour-card,
    .ctx-menu, .ctx-menu-host { display: none !important; }

    /* Make sure the main page element actually takes the available width */
    .page {
      padding: 12px !important;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Card chrome — flatten for print */
    .card { box-shadow: none !important; border: none !important; }
    .fr-statement-card { padding: 0 !important; max-width: 100% !important; width: 100% !important; }
    .fr-note { display: none !important; }

    /* Report layouts — give them the full width so headers / KPI grids /
       filing summary text don't squish into a narrow column */
    .report-statement {
      padding: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
      border: none !important;
      box-shadow: none !important;
    }
    .report-header { padding-bottom: 14px !important; }
    .report-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }

    /* Keep table backgrounds in print (Chrome strips them by default) */
    .report-table thead,
    .imports-report-page .report-table thead {
      background: #f1f5f9 !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
    }
    .report-kpi {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    /* Avoid breaking inside lines / rows */
    .fr-row, .fr-section, .report-kpi, .report-table tr { break-inside: avoid; }

    /* Imports report tweaks (existing) */
    .imports-report-page .report-statement { padding: 0 !important; }
    .imports-report-page .iv-row-expanded > td { background: #f8fafc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .imports-report-page .print-only { display: table-row !important; }
  }
  /* ── Imports Report — statement-style layout ──────────────────── */
  .report-statement { background: var(--card); border: 1px solid var(--border-2); border-radius: 12px; padding: 32px; box-shadow: var(--shadow-sm); }
  .report-header { padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
  .report-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .report-kpi { padding: 12px 14px; background: var(--bg-2); border-radius: 8px; }
  .report-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 600; }
  .report-kpi-value { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .report-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .report-table thead th { padding: 8px 10px; background: var(--bg-2); border-bottom: 2px solid var(--border); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px; }
  .report-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border-2); }
  .report-table tbody tr:hover { background: var(--bg-2); }
  .report-table tfoot td { padding: 10px; border-top: 2px solid var(--ink); border-bottom: 0; background: var(--bg-2); font-weight: 600; }
  .report-table .num-cell { text-align: right; font-variant-numeric: tabular-nums; }
  .print-only { display: none; }
  .bank-account-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; cursor: pointer; transition: all 120ms ease; min-height: 130px; display: flex; flex-direction: column; }
  .bank-account-card:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .bank-account-card.selected { border-color: var(--brand); background: var(--brand-soft); }
  .bank-account-card.add-new { display: grid; place-items: center; border-style: dashed; min-height: 130px; }
  .bank-account-card.add-new:hover { background: var(--bg-2); }

  /* ── Accounting Dashboard ──────────────────────────────────────── */
  .acct-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
  .acct-kpi { padding: 14px 14px 16px; display: flex; gap: 10px; align-items: flex-start; min-height: 110px; }
  .acct-kpi-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
  .acct-row-2 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
  .acct-donut { width: 130px; height: 130px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
  .acct-donut-inner { width: 80px; height: 80px; border-radius: 50%; background: var(--card); display: grid; place-items: center; text-align: center; }

  @media (max-width: 1280px) {
    .acct-row-2 { grid-template-columns: 1fr; }
    /* .acct-kpi-grid is auto-fit (see above) — wraps without breakpoints. */
  }

  .pi-viewmode button { padding: 5px 12px; font-size: 12px; font-weight: 500; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; transition: all 120ms; }
  .pi-viewmode button:hover { color: #111827; }
  .pi-viewmode button.active { background: var(--card); color: var(--brand-2); box-shadow: var(--shadow-xs); }

  /* Aggregated rollup row hover */
  .pi-table tr.agg-row:hover { background: var(--brand-soft); }
  .pi-table tr.agg-sub td { border-bottom: 1px dashed var(--border-2); padding: 5px 10px; }
  .pi-table tr.agg-sub:last-child td { border-bottom: 1px solid var(--border-2); }

  .tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 22px; padding: 0 4px; }
  .tab { padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.12s; }
  .tab:hover { color: var(--ink); }
  .tab.active { color: var(--brand-2); border-bottom-color: var(--brand); font-weight: 600; }
  .tab .count { color: var(--muted-2); margin-left: 6px; font-weight: 500; font-size: 11px; background: var(--bg-2); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-2); }
  .tab.active .count { background: var(--bg); color: var(--ink-2); border-color: var(--border); }

  .awb-head { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 22px; display: grid; grid-template-columns: 1fr auto; gap: 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
  .awb-head::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--brand); }
  .awb-num { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 1.2px; font-weight: 500; }
  .awb-route { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; margin-top: 6px; }
  .awb-route .arrow { color: var(--brand); margin: 0 12px; font-weight: 400; }
  .awb-meta { display: flex; gap: 20px; margin-top: 12px; font-size: 12.5px; color: var(--muted); align-items: center; flex-wrap: wrap; }
  .awb-meta strong { color: var(--ink); font-weight: 600; }
  .awb-totals { text-align: right; }
  .awb-total-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 600; }
  .awb-total-value { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; margin-top: 4px; }
  .awb-total-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .awb-total-sub .paid { color: var(--paid); font-weight: 600; }
  .awb-total-sub .due { color: var(--pending); font-weight: 600; }
  .awb-total-sub .over { color: #92400e; font-weight: 600; }

  /* ── Expense tree v4 ──────────────────────────────── */
  .expense-row td { vertical-align: middle; }
  .expense-row .vendor-cell strong { font-weight: 600; display: block; }
  .expense-row .vendor-cell .inv { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 2px; }
  .pay-row td { padding: 9px 14px; border-bottom: 1px solid var(--border-2); background: linear-gradient(to right, var(--bg) 0%, var(--bg) 60%, transparent 100%); font-size: 12px; color: var(--muted); }
  .pay-row td:first-child { padding-left: 36px; position: relative; }
  .pay-row td:first-child::before { content: '↳'; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-size: 14px; }
  .pay-row .pay-method { font-weight: 600; color: var(--ink); }
  .pay-row .pay-from { color: var(--muted); }
  .pay-row .pay-amt { font-family: var(--mono); font-weight: 600; color: var(--paid); }
  .pay-row .pay-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; background: var(--paid-soft); color: var(--paid); border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
  .pay-row .pay-tag::before { content: '●'; font-size: 8px; }
  /* Packing-list row hover actions — trash icon shows only when the user is
     hovering the row, so the table reads calmly at rest. No background
     transition: it animates on EVERY re-render which the user perceives as
     a flash. Hover background is applied instantly. */
  .pi-table tbody tr:hover { background: var(--bg); }
  .pi-table tbody tr:hover .pl-row-actions { opacity: 1 !important; }
  .pl-actions-cell { width: 56px; }  /* room for pencil + delete */
  /* ─────────────────────────────────────────────────────────────────────
     EXPENSES & PAYMENTS — card list
     Each expense renders as a compact tile so the rows align cleanly without
     the colspan/empty-cell tricks the old single-table layout needed.
     ───────────────────────────────────────────────────────────────────── */
  .exp-list { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
  .exp-card {
    background: var(--card);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 100ms ease, box-shadow 100ms ease;
  }
  .exp-card:hover { border-color: var(--border-strong); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .exp-row-main {
    display: grid;
    grid-template-columns: 130px 1fr 130px 100px auto;
    align-items: center;
    gap: 14px;
  }
  .exp-cat { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .exp-cat-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
  .exp-cat-label { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .exp-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .exp-meta-1 { font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .exp-meta-2 { font-size: 12px; line-height: 1.4; }
  .exp-amounts { text-align: right; }
  .exp-total { font-size: 14px; font-weight: 600; }
  .exp-balance { margin-top: 2px; }
  .exp-status { text-align: center; }
  .exp-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 120ms ease; }
  .exp-card:hover .exp-actions { opacity: 1; }
  /* Nested rows — products + payments */
  .exp-products, .exp-payments { margin-top: 10px; padding: 6px 10px; background: var(--bg); border-radius: 6px; display: flex; flex-direction: column; gap: 4px; }
  .exp-product-line { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; }
  .exp-product-name { font-weight: 500; color: var(--ink); }
  .exp-product-tag { padding: 1px 6px; background: var(--bg-2); border-radius: 4px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
  .exp-payment-row {
    display: grid;
    grid-template-columns: 16px 70px 90px 1fr auto auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 3px 0;
  }
  .exp-pay-bullet { color: var(--muted); }
  .exp-pay-method { font-weight: 600; color: var(--ink); }
  .exp-pay-from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .exp-pay-amt { color: var(--paid); font-weight: 600; text-align: right; }
  .exp-pay-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 120ms ease; }
  .exp-payment-row:hover .exp-pay-actions { opacity: 1; }
  /* + Record payment */
  .exp-add-payment { margin-top: 8px; }
  .exp-add-pay-btn { font-size: 12px; padding: 4px 10px; color: var(--brand-2); }
  /* Compact sort bar above the cards */
  .exp-sortbar { padding: 8px 14px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border-2); background: var(--bg); }
  .exp-sort-btn { background: transparent; border: 0; cursor: pointer; padding: 3px 8px; font-size: 12px; color: var(--muted); border-radius: 4px; }
  .exp-sort-btn:hover { background: var(--bg-2); color: var(--ink); }
  .exp-sort-btn.active { color: var(--brand-2); font-weight: 600; background: var(--brand-soft); }
  /* Center-aligned columns — applies to non-editable display AND the
     editable contenteditable span inside the td. */
  .pi-table td.pl-cell-center,
  .pi-table th.pl-cell-center { text-align: center; }
  .pi-table td.pl-cell-center > span[contenteditable] { display: inline-block; text-align: center; min-width: 36px; }
  /* Highlight the row currently in edit mode — left accent border + tinted
     background so users can always spot which row they're editing. */
  .pi-table tbody tr.editing-row { background: var(--brand-soft) !important; box-shadow: inset 3px 0 0 var(--brand-2); }
  .pi-table tbody tr.editing-row td { border-bottom-color: var(--brand-2); }
  .pi-table tbody tr.editing-row .pl-row-actions { opacity: 1 !important; }
  /* Expanded expense row — subtle highlight so the parent row visually pairs
     with its payment-history sub-row. The sub-row itself has its own bg via
     inline style. */
  .pi-table tbody tr.exp-row-expanded > td { background: var(--brand-soft); }
  .pi-table tbody tr.exp-row-expanded > td:first-child { box-shadow: inset 3px 0 0 var(--brand-2); }
  .pi-table tbody tr.exp-payments-row > td { padding: 0 !important; }
  /* Hover affordance on the chevron column */
  .pi-table tbody tr:hover .exp-row-actions { opacity: 1 !important; }
  /* Per-row + sub-row action icons — keep glyph at body-text size so
     pencil/paperclip/trash never visually dominate the table. SVGs default
     to inheriting font-size; explicit width/height locks them to 13px. */
  .exp-icon-btn svg { width: 13px; height: 13px; vertical-align: middle; display: block; }
  .exp-icon-btn { min-width: 22px; }
  /* Column picker rows — visual cue for drag-reorder. Cursor changes to grabbing
     while held, and the row gets a subtle highlight when something is being
     dragged over it. */
  .exp-picker-row { transition: background 0.08s ease; }
  .exp-picker-row[draggable="true"]:active { cursor: grabbing; }
  .exp-picker-row.drag-over { background: var(--brand-soft) !important; box-shadow: inset 0 -2px 0 var(--brand-2); }
  /* PL card override — global .card has overflow-x:auto for tables, which
     ALSO clips overflow-y (browsers force overflow-y to non-visible when
     overflow-x is non-visible). That clipping was hiding the column picker
     dropdown when it extended past the card boundary. We let the table's
     own inner div handle horizontal scroll and free the card to overflow. */
  .pl-card { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; }
  /* Column picker — always-visible classic-style right-side scrollbar.
     Heavy dark thumb on a light grey track, sharp edges (no border-radius)
     so it looks like a traditional desktop scrollbar that's unmistakably
     visible. macOS hides scrollbars by default, so we force them with
     overflow:scroll + explicit ::-webkit-scrollbar styling. */
  .pl-picker-list { scrollbar-width: auto; scrollbar-color: #4b5563 #e5e7eb; scrollbar-gutter: stable; }
  .pl-picker-list::-webkit-scrollbar { width: 16px; -webkit-appearance: none; }
  .pl-picker-list::-webkit-scrollbar-track { background: #e5e7eb; }
  .pl-picker-list::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 0; }
  .pl-picker-list::-webkit-scrollbar-thumb:hover { background: #1f2937; }
  .product-row td { padding: 8px 14px; border-bottom: 1px solid var(--border-2); background: var(--bg-2); font-size: 12px; color: var(--ink-2); }
  .product-row td:first-child { padding-left: 36px; position: relative; }
  .product-row td:first-child::before { content: '•'; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-size: 14px; }
  .product-row .prod-name { color: var(--ink); font-weight: 500; }
  .product-row .prod-tag { display: inline-flex; padding: 1px 6px; background: var(--bg); color: var(--muted); border: 1px solid var(--border); border-radius: 4px; font-size: 10px; font-weight: 500; margin-left: 6px; }
  .add-pay-row td { background: var(--bg); padding: 6px 14px 10px 36px; border-bottom: 1px solid var(--border-2); }
  .add-pay-row .add-btn { color: var(--muted); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; }
  .add-pay-row .add-btn:hover { background: var(--bg-2); color: var(--ink); }

  .clip-btn { position: relative; }
  .clip-btn .clip-count { position: absolute; top: -3px; right: -3px; background: var(--muted); color: var(--card); border-radius: 999px; font-size: 9px; font-weight: 700; padding: 1px 5px; min-width: 14px; height: 14px; display: grid; place-items: center; line-height: 1; }

  .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, #f6f8fb 0%, #ecfdf5 100%); }
  .auth-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 36px 32px; box-shadow: var(--shadow-lg); }
  .auth-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .auth-brand-logo { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--brand) 0%, #34d399 100%); display: grid; place-items: center; color: white; font-weight: 700; font-size: 16px; box-shadow: 0 6px 16px var(--brand-glow); }
  .auth-brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; }
  .auth-sub { color: var(--muted); margin-bottom: 28px; font-size: 13px; }
  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
  .input { width: 100%; height: 40px; padding: 0 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; transition: all 0.12s; color: var(--ink); }
  .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  textarea.input { height: auto; padding: 10px 12px; resize: vertical; min-height: 80px; font-family: inherit; }
  select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6776' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
  .demo-hint { font-size: 12px; padding: 10px 12px; background: var(--brand-soft); color: var(--brand-2); border-radius: var(--radius); margin-bottom: 18px; line-height: 1.5; border: 1px solid #a7f3d0; }

  /* Backdrop centers its modal horizontally + vertically. If the modal is
     taller than the viewport, the backdrop scrolls (rather than clipping
     the top of the modal off-screen). margin:auto on the modal is the
     belt-and-suspenders centering when the backdrop has overflow content. */
  .modal-backdrop { position: fixed; inset: 0; background: rgba(11,18,32,0.5); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; z-index: 100; animation: fadein 0.15s; }
  .modal-backdrop > .modal,
  .modal-backdrop > * { margin: auto; }
  /* When the modal stays open across re-renders (data updated inside it),
     suppress the entrance animation — otherwise every keystroke triggers a
     new 150ms fadein and the user sees a "flash" on every action. */
  .modal-backdrop.no-anim, .modal-backdrop.no-anim .modal { animation: none !important; }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
  @keyframes ocr-spin { to { transform: rotate(360deg); } }
  .ocr-spinner { display: inline-block; width: 10px; height: 10px; border: 1.5px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: ocr-spin 0.7s linear infinite; vertical-align: middle; margin-right: 4px; }
  .modal { background: var(--card); border-radius: var(--radius-xl); width: 100%; max-width: 580px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop 0.15s; max-height: 90vh; display: flex; flex-direction: column; }
  .modal.wide { max-width: 780px; }
  .modal-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--border-2); }
  .modal-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
  .modal-sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
  .modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
  .modal-foot { padding: 14px 24px; background: var(--bg); border-top: 1px solid var(--border-2); display: flex; gap: 8px; justify-content: flex-end; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  /* AWB modal — step-numbered sections that flow 1 → 2 → 3, but
     spaced tight so the modal stays compact. No divider lines: the
     step number itself is the visual anchor. */
  .awb-section { margin-bottom: 10px; }
  .awb-section-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--ink-2); margin-bottom: 4px;
    text-transform: uppercase;
  }
  .awb-step {
    display: inline-grid; place-items: center;
    width: 16px; height: 16px; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand);
    font-size: 10px; font-weight: 700;
  }
  /* Tight field spacing inside the AWB form */
  #awb-form .field { margin-bottom: 6px; }
  #awb-form .field > label { margin-bottom: 3px; font-size: 12px; }
  #awb-form .field-row { gap: 10px; }
  #awb-form textarea.input { min-height: auto; }
  /* Compact PDF drop zone — one tight row */
  .awb-pdf-zone { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px dashed var(--brand-2); border-radius: 8px; background: var(--brand-soft); margin-bottom: 12px; }
  .awb-pdf-zone .awb-pdf-text { flex: 1; font-size: 12px; font-weight: 500; }
  .awb-pdf-zone .awb-pdf-sub { font-size: 11px; color: var(--muted); font-weight: 400; }

  /* Confirm modal */
  .confirm-modal { max-width: 420px; text-align: center; padding: 28px 24px; }
  .confirm-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--pending-soft); color: var(--pending); display: grid; place-items: center; margin: 0 auto 14px; font-size: 26px; }
  .confirm-title { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
  .confirm-msg { color: var(--muted); font-size: 13px; margin: 6px 0 18px; line-height: 1.55; }
  .confirm-actions { display: flex; gap: 10px; justify-content: center; }

  .field label svg, label svg { width: 14px; height: 14px; flex-shrink: 0; vertical-align: middle; }

  /* Attachments v2 */
  .attachment-section { margin-top: 12px; }
  .attachment-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
  .attachment-section-title svg { width: 12px; height: 12px; flex-shrink: 0; }
  .attachment-folder-badge { background: var(--info-soft); color: var(--info); padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.4px; }
  .file-zone { border: 1px dashed var(--border); border-radius: 6px; padding: 8px 10px; text-align: center; background: var(--bg); color: var(--muted); transition: all 0.12s; cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; gap: 6px; width: auto; }
  .file-zone:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); }
  .file-zone strong { color: var(--ink); font-size: 11.5px; font-weight: 600; }
  .file-zone svg { width: 12px; height: 12px; flex-shrink: 0; }
  .file-zone .file-zone-hint { display: none; }
  .attached-files { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
  .attached-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 6px; font-size: 11.5px; }
  .attached-file svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--muted); }
  .attached-file .fname { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
  .attached-file .fsize { color: var(--muted); font-family: var(--mono); font-size: 10px; flex-shrink: 0; }
  .attached-file .fact { display: flex; gap: 2px; }
  .attached-file .fact .btn-icon { width: 22px; height: 22px; }
  .attached-file .fact svg { width: 11px; height: 11px; }

  /* Product line items inside expense modal */
  .product-lines { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .product-lines-head { background: var(--bg); padding: 10px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); display: grid; grid-template-columns: 2fr 1.3fr 70px 90px 90px 30px; gap: 8px; }
  .product-line { padding: 8px 12px; border-top: 1px solid var(--border-2); display: grid; grid-template-columns: 2fr 1.3fr 70px 90px 90px 30px; gap: 8px; align-items: center; }
  .product-line input, .product-line select { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; background: var(--card); width: 100%; color: var(--ink); }
  .product-line input:focus, .product-line select:focus { outline: none; border-color: var(--brand); }
  .product-line .total { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); text-align: right; padding-right: 4px; }
  .product-line select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235b6776' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 22px; }
  .product-line-add { padding: 10px 12px; border-top: 1px solid var(--border-2); background: var(--bg); display: flex; justify-content: space-between; align-items: center; }
  .product-line-add button { color: var(--brand); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
  .product-line-add .subtotal { font-size: 12px; color: var(--muted); }
  .product-line-add .subtotal strong { color: var(--ink); font-family: var(--mono); margin-left: 6px; }

  .summary-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
  .summary-table td { padding: 11px 16px; }
  .summary-table tr.total td { font-weight: 700; background: var(--brand-soft); border-top: 2px solid var(--brand); color: var(--brand-2); }
  .summary-table tr.subtotal td { font-weight: 600; background: var(--bg); font-size: 12px; }
  .pie-card { padding: 22px; }
  .pie-card-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.2px; }
  .pie-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--border-2); font-size: 13px; }
  .pie-row:last-child { border: none; }
  .pie-row .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 10px; vertical-align: middle; }
  .pie-row .pct { color: var(--muted); font-family: var(--mono); font-size: 11px; margin-left: 8px; }
  .summary-bar { height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin-top: 12px; display: flex; }
  .summary-bar-seg { height: 100%; }

  .filter-bar { display: flex; gap: 10px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 18px; flex-wrap: wrap; box-shadow: var(--shadow-sm); }
  .filter-bar .field { margin: 0; flex: 1; min-width: 140px; }

  .empty { text-align: center; padding: 48px 20px; color: var(--muted); }
  .empty-title { font-size: 16px; color: var(--ink); margin-bottom: 4px; font-weight: 600; }

  .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 6px; font-size: 12.5px; font-weight: 500; z-index: 200; animation: slideup 0.18s; box-shadow: 0 6px 20px rgba(0,0,0,0.25); display: inline-flex; align-items: center; gap: 8px; max-width: 480px; }
  .toast svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.7; }
  .toast-error { background: #b91c1c; color: #fef2f2; }
  .toast-success { background: #15803d; color: #f0fdf4; }
  .toast-warn  { background: #b45309; color: #fffbeb; }
  .toast-error::before { content: '⚠'; font-size: 14px; }
  .toast-success::before { content: '✓'; font-size: 13px; }
  .toast-warn::before  { content: '⚠'; font-size: 13px; }
  @keyframes slideup { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  /* Settings logo preview */
  .logo-preview { width: 80px; height: 80px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
  .logo-preview img { width: 100%; height: 100%; object-fit: cover; }
  .logo-preview span { color: var(--muted); font-size: 11px; }

  .stack { display: flex; flex-direction: column; gap: 18px; }
  .muted { color: var(--muted); }
  .small { font-size: 12px; }
  .danger { color: var(--pending) !important; }

  /* Resizable columns — subtle dotted edge, lights up on hover so the
     handle is actually discoverable. Double-click auto-fits to content. */
  table th { position: relative; user-select: none; }
  .col-resize-handle {
    position: absolute; right: -5px; top: 0; bottom: 0; width: 10px;
    cursor: col-resize; z-index: 5;
    background: transparent;
    border-right: 2px dotted transparent;
    transition: border-color 0.12s, background 0.12s;
  }
  thead th:hover .col-resize-handle { border-right-color: var(--border); }
  .col-resize-handle:hover { border-right-color: var(--brand); border-right-style: solid; background: var(--brand-soft); }
  .col-resize-handle.resizing { border-right-color: var(--brand); border-right-style: solid; background: var(--brand-soft); }

  /* Visual polish — subtle card lift, smoother transitions */
  .card { transition: box-shadow 0.18s, transform 0.18s; }
  /* Legacy .nav-item override block REMOVED — used to repaint active
     rows with a brand-soft gradient + left-edge bar from when the
     sidebar was light. Dark sidebar above is the source of truth now. */
  .stat-card { background: linear-gradient(135deg, var(--card) 0%, var(--bg-2) 100%); }
  .badge { transition: transform 0.1s; }
  tr.clickable { transition: background 0.1s; }
  tr.clickable:hover { background: var(--brand-soft) !important; }
  /* ─────────────────────────────────────────────────────────────────────
     GLOBAL LINK STYLING
     Anything that, when clicked, navigates to a related record gets the
     "this is a link" treatment — brand-blue colored text + hover-underline.
     Targets cells (td.clickable) and inline anchors/spans that call
     navigate() in their onclick. Excludes structural nav (sidebar items,
     tabs, topbar back button) which keep their own designs.
     ───────────────────────────────────────────────────────────────────── */
  table td.clickable,
  table td.clickable.num,
  table td.clickable.mono {
    color: var(--brand-2);
    cursor: pointer;
  }
  table td.clickable:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  /* Inline anchor links that navigate. Excludes app-chrome nav-items, tabs,
     topbar back arrow, sub-section dropdowns, and quick-add row anchors
     that already carry their own context. */
  a[onclick*="navigate("]:not(.nav-item):not(.tab):not(.topbar-back):not(.dd-item),
  span[onclick*="navigate("]:not([class*="badge"]) {
    color: var(--brand-2);
    cursor: pointer;
  }
  a[onclick*="navigate("]:not(.nav-item):not(.tab):not(.topbar-back):not(.dd-item):hover,
  span[onclick*="navigate("]:not([class*="badge"]):hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  /* Active dropdown highlight */
  .input:focus, select.input:focus { outline: 2px solid var(--brand-glow); outline-offset: -1px; border-color: var(--brand); }

  /* Page width: never exceed container; card handles horizontal scroll */
  .page { max-width: 100%; }

  @media (max-width: 1280px) {
    /* Laptop / half-screen: auto-collapse sidebar to icons so wide
       tables (Operating Expenses, AWBs, etc.) don't get clipped at
       common laptop widths. Raised from 1100px after the user reported
       table content disappearing off the right edge around ~1200px. */
    .app { grid-template-columns: 60px 1fr; }
    .sidebar { padding: 18px 8px; }
    .brand-name, .brand-sub, .nav-item span:not(.nav-pill), .nav-section, .userbox > div, .signout-text, .brand-text { display: none; }
    .nav-item { justify-content: center; padding: 9px 0; position: relative; }
    .nav-item .nav-pill { position: absolute; top: 4px; right: 4px; padding: 0 4px; font-size: 9px; }
    .brand { padding: 8px 0 18px; justify-content: center; }
    .userbox { justify-content: center; padding: 4px 0; }
    .sidebar-foot { padding: 12px 4px; }
    .sidebar-foot > div:last-child { flex-direction: column; }
    .topbar-search { width: 200px; }
    /* .kpi-grid is now auto-fit (see above) — no fixed-column override needed. */
  }
  @media (max-width: 700px) {
    /* Mobile: hide sidebar entirely; tighten layout */
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .topbar-search { width: 140px; }
    /* .kpi-grid handled by auto-fit minmax above. */
    .summary-grid { grid-template-columns: 1fr; }
    .awb-head { grid-template-columns: 1fr; }
    .awb-totals { text-align: left; }
    .page { padding: 16px; }
    .product-lines-head, .product-line { grid-template-columns: 1fr; }
    .product-line { padding: 12px; gap: 6px; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .field { min-width: 0; }
  }

  /* ═══════════════════════════════════════════════════════════════
     FEEDBACK — topbar button + right-side slide-out panel
     ═══════════════════════════════════════════════════════════════ */
  .fb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; height: 32px; background: transparent; border: 1px solid var(--border-2, var(--border)); border-radius: 8px; color: var(--ink); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
  .fb-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-2, var(--brand)); }
  .fb-btn.is-open { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-2, var(--brand)); }
  .fb-btn svg { display: block; }
  .fb-btn-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--brand); color: white; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1; margin-left: 2px; }

  .fb-overlay { position: fixed; inset: 0; background: rgba(11,18,32,0.35); z-index: 200; animation: fadein 0.15s ease-out; }
  .fb-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; background: var(--card, white); border-left: 1px solid var(--border); box-shadow: -10px 0 40px rgba(0,0,0,0.18); z-index: 201; display: flex; flex-direction: column; animation: fb-slide-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes fb-slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

  .fb-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--border-2, var(--border)); background: var(--bg, white); }
  .fb-head-row { display: flex; align-items: center; justify-content: space-between; }
  .fb-head-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--ink); }
  .fb-filter-row { display: flex; gap: 4px; margin-top: 10px; }
  .fb-filter { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
  .fb-filter:hover { background: var(--bg-2); color: var(--ink); }
  .fb-filter.active { background: var(--brand-soft); color: var(--brand-2, var(--brand)); font-weight: 600; }
  .fb-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; background: var(--bg-2); color: var(--muted); border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; }
  .fb-filter.active .fb-count { background: var(--brand); color: white; }

  .fb-icon-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--muted); cursor: pointer; }
  .fb-icon-btn:hover { background: var(--bg-2); color: var(--ink); border-color: var(--border); }
  .fb-icon-btn.fb-danger:hover { background: rgba(220,38,38,0.08); color: #dc2626; border-color: rgba(220,38,38,0.3); }

  .fb-compose { padding: 12px 16px; border-bottom: 1px solid var(--border-2, var(--border)); background: var(--bg-2); }
  .fb-compose-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11.5px; color: var(--muted); }
  .fb-route-chip { display: inline-flex; align-items: center; padding: 2px 8px; background: var(--card, white); border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; }
  .fb-as { font-size: 11px; }
  .fb-textarea { width: 100%; min-height: 64px; padding: 8px 10px; background: var(--card, white); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.45; resize: vertical; box-sizing: border-box; }
  .fb-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .fb-compose-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

  .fb-list { flex: 1; overflow-y: auto; padding: 8px 12px 16px; background: var(--card, white); }
  .fb-empty { padding: 36px 12px; text-align: center; color: var(--muted); }
  .fb-empty-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
  .fb-empty-sub { font-size: 12px; color: var(--muted); }

  .fb-thread { padding: 12px 12px 10px; margin-top: 8px; background: var(--card, white); border: 1px solid var(--border); border-radius: 10px; }
  .fb-thread.is-resolved { background: var(--bg-2); opacity: 0.85; }
  .fb-thread.is-resolved .fb-body { text-decoration: line-through; color: var(--muted); }
  .fb-thread-head { display: flex; gap: 10px; align-items: flex-start; }
  .fb-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--brand) 0%, #34d399 100%); color: white; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
  .fb-avatar-sm { width: 22px; height: 22px; font-size: 10px; }
  .fb-meta { flex: 1; min-width: 0; }
  .fb-meta-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
  .fb-author { font-weight: 600; color: var(--ink); font-size: 12.5px; }
  .fb-dot { color: var(--muted); }
  .fb-when { font-size: 11.5px; }
  .fb-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-left: 2px; }
  .fb-tag-resolved { background: var(--brand-soft); color: var(--brand-2, var(--brand)); }
  .fb-route-line { margin-top: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
  .fb-route-link { color: var(--brand-2, var(--brand)); cursor: pointer; }
  .fb-route-link:hover { text-decoration: underline; }
  .fb-route-self { color: var(--muted); }
  .fb-thread-actions { display: inline-flex; gap: 2px; flex-shrink: 0; }

  .fb-body { margin: 8px 0 0; padding-left: 38px; font-size: 13px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; }

  .fb-replies { margin: 10px 0 0; padding: 8px 0 4px 38px; border-top: 1px dashed var(--border); }
  .fb-reply { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; }
  .fb-reply-body { flex: 1; min-width: 0; }
  .fb-reply-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
  .fb-reply-text { font-size: 12.5px; line-height: 1.45; color: var(--ink); margin-top: 2px; word-break: break-word; }
  .fb-reply-del { opacity: 0; transition: opacity 0.12s; flex-shrink: 0; }
  .fb-reply:hover .fb-reply-del { opacity: 1; }

  .fb-reply-compose { display: flex; gap: 8px; align-items: flex-end; margin: 8px 0 0; padding-left: 38px; }
  .fb-reply-textarea { flex: 1; min-height: 32px; max-height: 140px; padding: 6px 9px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font: inherit; font-size: 12.5px; line-height: 1.4; resize: vertical; box-sizing: border-box; }
  .fb-reply-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--card, white); }
  .fb-reply-actions { display: flex; align-items: flex-end; gap: 6px; }

  /* Attachments — compose/reply pending chips + saved chips on a thread */
  .fb-compose-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
  .fb-attach-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; height: 28px; background: var(--card, white); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
  .fb-attach-btn:hover { color: var(--brand-2, var(--brand)); border-color: var(--brand); }
  .fb-attach-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .fb-attach-row:empty { display: none; }
  .fb-attach-chip { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; max-width: 220px; position: relative; }
  .fb-attach-chip.is-uploading { opacity: 0.75; }
  .fb-attach-chip.is-error { border-color: #fca5a5; background: #fef2f2; }
  .fb-attach-chip img { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; display: block; flex-shrink: 0; }
  .fb-attach-icon { width: 36px; height: 36px; border-radius: 5px; background: var(--card, white); border: 1px solid var(--border); display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; flex-shrink: 0; }
  .fb-attach-spin { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--brand); animation: fb-spin 0.7s linear infinite; flex-shrink: 0; }
  @keyframes fb-spin { to { transform: rotate(360deg); } }
  .fb-attach-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .fb-attach-name { font-size: 11.5px; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fb-attach-size { font-size: 10.5px; color: var(--muted); }
  .fb-attach-x { width: 18px; height: 18px; border-radius: 4px; background: transparent; border: 0; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; flex-shrink: 0; }
  .fb-attach-x:hover { background: var(--border); color: var(--ink); }

  .fb-saved-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding-left: 38px; }
  .fb-saved-chip { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; max-width: 240px; }
  .fb-saved-preview { padding: 0; background: transparent; border: 0; cursor: pointer; flex-shrink: 0; }
  .fb-saved-preview img { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; display: block; background: var(--border); }
  .fb-saved-ext { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 5px; background: var(--card, white); border: 1px solid var(--border); font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; }
  .fb-saved-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .fb-saved-name { font-size: 11.5px; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fb-saved-size { font-size: 10.5px; color: var(--muted); }
  .fb-saved-dl { width: 22px; height: 22px; border-radius: 5px; background: transparent; border: 0; color: var(--muted); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
  .fb-saved-dl:hover { background: var(--brand-soft); color: var(--brand-2, var(--brand)); }

  /* User menu (avatar dropdown) */
  .avatar-btn { transition: transform 0.12s, box-shadow 0.12s; }
  .avatar-btn:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
  .user-menu-item:hover { background: var(--bg-2); }

  /* Action column — let hover/tooltips escape the cell's overflow:hidden */
  tbody td.actions-cell-visible,
  tbody td:has(.row-actions) {
    overflow: visible;
  }
  /* Slightly more compact icon buttons inside row-actions so they sit
     comfortably inside a 160px column without spilling. */
  .row-actions .btn-icon { width: 26px; height: 26px; padding: 0; }
  .row-actions { gap: 2px; }

  /* ═══════════════════════════════════════════════════════════════
     FEEDBACK — Wishlist-Labs-style FAB + submit modal
     ═══════════════════════════════════════════════════════════════ */
  .fb-fab {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--brand, #2563eb); color: #fff; border: 0;
    border-radius: 999px; width: 44px; height: 44px; padding: 0;
    font-size: 13px; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 14px rgba(37,99,235,0.32), 0 2px 4px rgba(0,0,0,0.08);
    display: flex; align-items: center; justify-content: center; gap: 0;
    z-index: 5500; overflow: hidden;
    transition: width .18s ease, padding .18s ease, box-shadow .15s, background .15s;
  }
  .fb-fab span { opacity: 0; width: 0; white-space: nowrap; transition: opacity .12s, width .18s ease; }
  .fb-fab:hover { background: var(--brand-2, #1d4ed8); width: 132px; padding: 0 14px; justify-content: flex-start; gap: 8px; box-shadow: 0 8px 22px rgba(37,99,235,0.42); }
  .fb-fab:hover span { opacity: 1; width: auto; }
  .fb-fab-dot {
    position: absolute; top: -2px; right: -2px;
    background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 999px;
    display: grid; place-items: center; padding: 0 5px;
    border: 2px solid var(--card, #fff);
  }

  .fb-modal-backdrop {
    position: fixed; inset: 0; background: rgba(11,18,32,0.5);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; overflow-y: auto; z-index: 5600;
    animation: fadein 0.15s ease-out;
  }
  .fb-modal {
    background: var(--card, #fff); border-radius: 12px; width: 100%; max-width: 560px;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    padding: 22px 22px 18px; animation: pop 0.15s ease-out;
    margin: auto;
  }
  .fb-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .fb-modal-icon { background: var(--brand-soft, #dbeafe); color: var(--brand-2, var(--brand)); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
  .fb-modal-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); flex: 1; }
  .fb-modal-close { background: transparent; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; }
  .fb-modal-close:hover { color: var(--ink); }
  .fb-modal-sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
  .fb-modal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
  .fb-modal .fb-field { margin-bottom: 10px; }
  .fb-modal .fb-field label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
  .fb-modal .fb-field input,
  .fb-modal .fb-field select,
  .fb-modal .fb-field textarea {
    width: 100%; padding: 8px 11px;
    border: 1px solid var(--border); border-radius: 7px;
    font-size: 13px; background: var(--card, #fff); color: var(--ink);
    font-family: inherit; box-sizing: border-box;
  }
  .fb-modal .fb-field textarea { resize: vertical; min-height: 90px; }
  .fb-modal .fb-field input:focus,
  .fb-modal .fb-field select:focus,
  .fb-modal .fb-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .fb-modal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 8px; flex-wrap: wrap; }
  .fb-modal .fb-link { font-size: 12px; color: var(--brand-2, var(--brand)); text-decoration: none; font-weight: 600; }
  .fb-modal .fb-link:hover { text-decoration: underline; }

  /* Thread chips for the new type/priority fields */
  .fb-tag-type {
    display: inline-flex; align-items: center; padding: 1px 8px;
    border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.3px; margin-left: 4px;
  }
  .fb-tag-type-bug      { background: #fee2e2; color: #991b1b; }
  .fb-tag-type-feature  { background: #ede9fe; color: #5b21b6; }
  .fb-tag-type-question { background: #fef3c7; color: #92400e; }
  .fb-tag-type-other    { background: #e2e8f0; color: #475569; }
  .fb-tag-prio {
    display: inline-flex; align-items: center; padding: 1px 7px;
    border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.3px; margin-left: 2px;
  }
  .fb-tag-prio-low      { background: #f1f5f9; color: #64748b; }
  .fb-tag-prio-normal   { background: #e0f2fe; color: #0c4a6e; }
  .fb-tag-prio-high     { background: #fed7aa; color: #9a3412; }
  .fb-tag-prio-urgent   { background: #fecaca; color: #7f1d1d; }
  .fb-summary-line { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 6px 0 0; padding-left: 38px; }

  @media (max-width: 720px) {
    .fb-panel { width: 100vw; max-width: 100vw; }
    .fb-btn span { display: none; }
    .fb-modal-grid { grid-template-columns: 1fr; }
    .fb-fab { bottom: 16px; right: 16px; }
  }

  /* ═══════════════════════════════════════════════════════════════
     DAY REPORT — topbar button + centered modal
     ═══════════════════════════════════════════════════════════════ */
  .dr-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; height: 32px; background: transparent; border: 1px solid var(--border-2, var(--border)); border-radius: 8px; color: var(--ink); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
  .dr-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-2, var(--brand)); }
  .dr-btn svg { display: block; }

  .dr-backdrop { position: fixed; inset: 0; background: rgba(11,18,32,0.5); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; z-index: 220; animation: fadein 0.15s ease-out; }
  .dr-backdrop > * { margin: auto; }
  .dr-modal { background: var(--card, white); border-radius: var(--radius-xl, 14px); width: 100%; max-width: 1100px; max-height: 90vh; box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,0.25)); overflow: hidden; display: flex; flex-direction: column; animation: pop 0.15s ease-out; }

  .dr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid var(--border-2, var(--border)); }
  .dr-title { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; color: var(--ink); }
  .dr-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
  .dr-head-controls { display: inline-flex; align-items: center; gap: 8px; }
  .dr-date { padding: 6px 10px; background: var(--card, white); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font: inherit; font-size: 13px; }
  .dr-date:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

  .dr-body { flex: 1; overflow-y: auto; padding: 12px 22px; background: var(--card, white); }
  .dr-empty { padding: 60px 12px; text-align: center; color: var(--muted); }
  .dr-empty-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
  .dr-empty-sub { font-size: 12.5px; color: var(--muted); }

  .dr-section { margin: 14px 0 22px; }
  .dr-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
  .dr-section-title { font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.4px; }
  .dr-section-total { display: inline-flex; align-items: baseline; gap: 8px; }
  .dr-total-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
  .dr-total-value { font-size: 13.5px; font-weight: 700; color: var(--brand-2, var(--brand)); font-family: 'JetBrains Mono', ui-monospace, monospace; }

  .dr-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
  .dr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .dr-table thead th { background: var(--bg-2); padding: 8px 10px; text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
  .dr-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border-2, var(--border)); color: var(--ink); vertical-align: top; }
  .dr-table tbody tr:last-child td { border-bottom: 0; }
  .dr-table tbody tr:hover { background: var(--bg-2); }
  .dr-table td.dr-num { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; }

  .dr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 22px; background: var(--bg, white); border-top: 1px solid var(--border-2, var(--border)); }
  .dr-foot-meta { font-size: 12px; color: var(--muted); }
  .dr-foot-actions { display: inline-flex; gap: 8px; }

  @media (max-width: 720px) {
    .dr-btn span { display: none; }
    .dr-modal { max-height: 96vh; }
    .dr-head { flex-direction: column; align-items: stretch; }
    .dr-head-controls { justify-content: space-between; }
  }

  /* ── Phase 4 — invoice OCR draft review confidence highlights ── */
  /* Each form input shows a subtle left-border tint based on the OCR
     confidence for that field. Green ≥ 0.85 / yellow 0.60–0.85 / red < 0.60.
     The dot inside the label gives the same signal at glance distance. */
  .cell-input.conf-high { border-left: 3px solid #10b981; }
  .cell-input.conf-med  { border-left: 3px solid #f59e0b; background: #fffbeb; }
  .cell-input.conf-low  { border-left: 3px solid #ef4444; background: #fef2f2; }
  html[data-theme="dark"] .cell-input.conf-med { background: rgba(245,158,11,0.06); }
  html[data-theme="dark"] .cell-input.conf-low { background: rgba(239,68,68,0.06); }
  .ocr-drop-card { transition: background 0.15s ease, border-color 0.15s ease; }
  .ocr-drop-card #ocrDropTarget { transition: background 0.15s ease; }