/* ============================================================================
   lumic — Canonical UI Dashboard Stylesheet (sandbox mockup, refactored)
   ----------------------------------------------------------------------------
   Extracted from index.html's inline <style> and ALIGNED to the live
   canonical class/token names (the production dashboard.css + sales/ar/ap).
   Rendered look is intentionally PIXEL-IDENTICAL to the prior inline version.

   Where the mockup's DECIDED values differ from the live token set, the live
   name is reused but the mockup value is kept (the brief supersedes). Such
   intentional differences are flagged inline with  >>> NOTE.

   Section order:
     1. Tokens
     2. Layout / shell (main, content, page)
     3. Sidebar
     4. Topbar
     5. KPI cards
     6. Attention strip (insight chips)
     7. Cards & chart
     8. Tables
     9. Pills & status
    10. Workflow
    11. Utilities
   ========================================================================== */


/* ============================================================================
   1. TOKENS
   ----------------------------------------------------------------------------
   Canonical live names used where an equivalent exists. Mockup-decided values
   are kept even where they differ from the live token registry.
   ========================================================================== */
:root{
  /* Surfaces */
  --bg:#f7f8fa;                 /* >>> NOTE live --bg is #f6f7fb; mockup keeps its calmer grey */
  --card:#ffffff;
  --border:#e7eaf0;             /* live name --border (live value #e2e8f0; mockup softer) */
  --border-soft:#eef1f5;        /* live name --border-soft (live #eef1f6) */
  --row-hover:#f3f5f9;          /* live name --row-hover (live #f1f5f9; mockup softer) */

  /* Text ramp */
  --text:#333c4d;              /* live name --text (live #1e293b; mockup uses a softer ink) */
  --text-strong:#1b2230;       /* NEW: mockup's darkest heading ink (no exact live token) */
  --muted:#6b7280;             /* live name --muted (live #64748b) */
  --muted-2:#9aa3b2;           /* live name --muted-2 (live #94a3b8) */

  /* Brand */
  --primary:#5e5ce6;
  --primary-dark:#4b49c9;      /* live name --primary-dark (live #4845c2) */
  --primary-tint:rgba(94,92,230,.12);       /* live name; mockup .12 vs live .16 — kept per brief (transparent tints) */
  --primary-tint-strong:rgba(94,92,230,.20);/* live name; mockup .20 vs live .30 — kept per brief */

  /* Semantic — green */
  --green:#15a34a;             /* live --green #16a34a; near-identical */
  --green-bg:#e7f7ec;          /* live --green-bg #dcfce7; mockup wash kept */
  --green-fg:#10803a;          /* live grade-A-fg analogue; mockup's readable green ink */
  /* Semantic — red */
  --red:#dc2626;
  --red-bg:#fdecec;            /* live --red-bg #fee2e2; mockup wash kept */
  --red-fg:#bb2c25;
  /* Semantic — amber/orange (mockup "amber" maps to live orange/yellow family) */
  --orange:#d98a09;            /* live --orange #ea580c / --yellow #ca8a04; mockup amber kept */
  --orange-bright:#fb923c;     /* aging 31-60 bar (Chris reference tiles 2026-07-07) */
  --orange-deep:#f97316;       /* aging 61-90 bar (escalation between orange-bright and red) */
  --orange-bg:#fdf3e2;         /* live --orange-bg #ffedd5 / --yellow-bg #fef3c7; mockup wash kept */
  --orange-fg:#9a6206;
  /* Semantic — blue (info; no live brand-blue token, mockup-local) */
  --blue:#2f72e0;              /* NEW: info accent (live set has no blue; AP uses orange family) */
  --blue-bg:#e9f1fd;           /* NEW */
  --blue-fg:#1f5bc0;           /* NEW */

  /* Radius */
  --radius:14px;
  --radius-sm:9px;             /* live --radius-sm is 8px; mockup keeps 9px */
  --pill:999px;                /* NEW: full-round pill radius helper */

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(20,24,40,.04), 0 1px 3px rgba(20,24,40,.05); /* NEW: lighter card shadow */
  --shadow:0 6px 22px -10px rgba(20,24,40,.14);                            /* live name --shadow (value differs; mockup's softer lift) */

  /* Dimensions */
  --sidebar-w:260px;           /* live name --sidebar-w (live AP 292px; mockup 260px) */
  --topbar-h:60px;             /* live name --topbar-h (live 46/58px; mockup 60px) */

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font-family:inherit; cursor:pointer}


/* ============================================================================
   2. LAYOUT / SHELL
   ========================================================================== */
.main{margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column}

/* Full-width content (Chris, 2026-07-07 — the 1280px cap left dead space on wide
   monitors; content fills the viewport, wide tables still scroll inside .grid-card) */
.content{padding:22px 26px 40px; width:100%}

.page{display:none}
.page.show{display:block; animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}


/* ============================================================================
   3. SIDEBAR
   ----------------------------------------------------------------------------
   .app-sidebar (live name) — fixed left nav shell.
   ========================================================================== */
.app-sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); background:var(--card);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  box-shadow:8px 0 24px -22px rgba(20,24,40,.18); z-index:20;
}

/* Resize handle — .sidebar-resizer (canonical behavior, brief 2026-07-04):
   drag the sidebar's right border to widen/narrow. Width clamps 200–360px,
   persists per user in localStorage('sidebarW'), applied by updating
   --sidebar-w so .main reflows live. */
.sidebar-resizer{
  position:absolute; top:0; right:-3px; width:6px; height:100%;
  cursor:col-resize; z-index:21;
}
.sidebar-resizer:hover,.sidebar-resizer.dragging{background:var(--primary-tint)}
body.sidebar-dragging{cursor:col-resize; user-select:none}

/* Brand block — .sidebar-brand / .sidebar-logo (live names) */
.sidebar-brand{display:flex; align-items:center; gap:11px; padding:16px 18px 14px}
.sidebar-logo{flex:0 0 auto; border-radius:9px; box-shadow:0 4px 12px -4px rgba(94,92,230,.5)}
.sidebar-brand .b-name{font-weight:700; font-size:15px; color:var(--text-strong); letter-spacing:-.01em}
.sidebar-brand .b-sub{font-size:11.5px; color:var(--muted-2); margin-top:-1px}
.b-switch{margin-left:auto; color:var(--muted-2); font-size:11px; opacity:.7}

.nav{flex:1; overflow-y:auto; padding:6px 10px 10px}

/* Section header — .sidebar-label (live name; collapsible in mockup) */
.sidebar-label{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
     color:var(--muted-2); padding:14px 10px 6px; display:flex; align-items:center; gap:6px; user-select:none; cursor:pointer}
.sidebar-label .caret{margin-left:auto; transition:transform .15s ease; font-size:9px; opacity:.7}
.sidebar-label.collapsed .caret{transform:rotate(-90deg)}

.nav-group{display:flex; flex-direction:column; gap:1px}
.nav-group.hidden{display:none}

/* Nav link — .nav-item / .nav-badge (live names) */
.nav-item{
  display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--radius-sm);
  color:var(--text); font-size:13px; font-weight:550; text-decoration:none; position:relative;
  border:1px solid transparent; transition:background .12s ease,color .12s ease;
}
.nav-item:hover{background:var(--row-hover)}
.nav-item.active{background:var(--primary-tint); color:var(--primary-dark); font-weight:650}
.nav-item.active::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--primary)}
.nav-badge{margin-left:auto;font-size:11px;font-weight:650;color:var(--muted-2);
     background:var(--border-soft);padding:1px 7px;border-radius:var(--pill)}
.nav-item.active .nav-badge{background:var(--primary-tint-strong);color:var(--primary-dark)}

/* Footer — THE shared contract (Chris-approved layout 2026-07-07):
     row 1:  ● Live  ............................  [Refresh]
     row 2:  Updated: YYYY-MM-DD HH:MM:SS
     row 3:  [           Sign Out           ]  (full-width)
   conn pushes Refresh right (never margin-left:auto per button — that flex-distributes
   and floats Refresh off-center); the logout <form.foot-signout> is a full-width row. */
.sidebar-foot{border-top:1px solid var(--border-soft); padding:10px 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.conn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--green-fg);
      background:var(--green-bg);padding:3px 9px;border-radius:var(--pill);margin-right:auto}
.conn .led{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(21,163,74,.16)}
.foot-btn{background:none; border:1px solid var(--border); color:var(--muted);
      border-radius:8px; padding:5px 9px; font-size:12px; font-weight:600}
.foot-btn:hover{background:var(--row-hover); color:var(--text)}
.sidebar-meta{flex-basis:100%;font-size:10.5px;color:var(--muted-2);line-height:1.4;padding-top:2px}
.foot-signout{flex-basis:100%;margin:2px 0 0}
.foot-signout .foot-btn{width:100%;padding:7px 0;text-align:center}


/* ============================================================================
   4. TOPBAR
   ----------------------------------------------------------------------------
   #topbar / .topbar (live name) — sticky header with title + segmented toggles.
   ========================================================================== */
.topbar{
  height:var(--topbar-h); display:flex; align-items:center; gap:16px; padding:0 26px;
  background:rgba(247,248,250,.82); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
}
.crumb{font-size:12px; color:var(--muted-2); font-weight:600}
.page-title{font-size:21px; font-weight:740; color:var(--text-strong); letter-spacing:-.02em; line-height:1.1}
.topbar .right{margin-left:auto; display:flex; align-items:center; gap:10px}

/* Segmented control — analogue of live .co-toggle/.period-toggle (.seg + .on) */
.seg{display:inline-flex; background:var(--border-soft); border-radius:9px; padding:2px; gap:2px}
.seg button{border:none;background:none;font-size:12.5px;font-weight:620;color:var(--muted);
      padding:5px 12px;border-radius:7px;transition:all .12s ease}
.seg button.on{background:var(--card); color:var(--text-strong); box-shadow:var(--shadow-sm)}

/* Search field — analogue of live .search-bar */
.field{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--border);
      border-radius:9px;padding:6px 11px;font-size:12.5px;color:var(--muted)}
.field input{border:none;outline:none;font:inherit;color:var(--text);width:140px;background:none}

/* Pill button — analogue of live .btn-primary / .btn-outline (.pillbtn + .primary) */
.pillbtn{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:6px 12px;
      font-size:12.5px;font-weight:620;color:var(--text)}
.pillbtn:hover{background:var(--row-hover)}
.pillbtn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.pillbtn.primary:hover{background:var(--primary-dark)}


/* ============================================================================
   5. KPI CARDS
   ----------------------------------------------------------------------------
   .kpi-row / .kpi-card (live names). The 4px-ish left accent fades at top+bottom
   with rounded ends — a mockup design decision, kept exactly (supersedes the
   live solid 4px accent).
   ========================================================================== */
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px}
/* Column-count modifiers (added 2026-07-06) — use these, never inline grid overrides */
.kpi-row.cols-1{grid-template-columns:1fr}
.kpi-row.cols-2{grid-template-columns:repeat(2,1fr)}
.kpi-row.cols-3{grid-template-columns:repeat(3,1fr)}
.kpi-row.cols-5{grid-template-columns:repeat(5,1fr)}
/* KPI card — Chris-approved exact recipe 2026-07-07 (reference: pre-canonical AR tiles).
   The accent is a REAL border-left (curves smoothly into the corner radius), never an
   overlay bar or a gradient. */
.kpi-card{background:var(--card); border:1px solid var(--border); border-left:4px solid var(--accent,var(--primary));
     border-radius:14px; padding:16px 18px; box-shadow:var(--shadow-sm)}
.kpi-card.good{--accent:var(--green)}
.kpi-card.bad{--accent:var(--red)}
.kpi-card.warn{--accent:var(--orange)}
.kpi-card.age-31{--accent:var(--orange-bright)}    /* aging ramp: green -> orange-bright -> orange-deep -> red */
.kpi-card.age-61,.kpi-card.warn-deep{--accent:var(--orange-deep)}
.kpi-card.neutral{--accent:var(--border)}          /* informational tile, no semantic color */
.kpi-value.red{color:var(--red)}                   /* alarmed value ink (e.g. 90+ days bucket) */

.kpi-label{font-size:11px;font-weight:600;letter-spacing:.6px;color:var(--muted);text-transform:uppercase}
.kpi-value{font-size:22px;font-weight:700;color:var(--text-strong);letter-spacing:-.4px;margin-top:6px;
     font-variant-numeric:tabular-nums}
.kpi-sub{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:11px;color:var(--muted)}

/* KPI delta badge — .kpi-badge (live name) with .up/.down */
.kpi-badge{display:inline-flex;align-items:center;gap:3px;font-weight:680;font-size:12px;
     padding:1px 7px;border-radius:var(--pill);font-variant-numeric:tabular-nums}
.kpi-badge.up{color:var(--green-fg);background:var(--green-bg)}
.kpi-badge.down{color:var(--red-fg);background:var(--red-bg)}
.kpi-badge .ar{font-size:9px}


/* ============================================================================
   6. ATTENTION STRIP (insight chips)
   ----------------------------------------------------------------------------
   .insight-strip / .insight-chip (live names). Live semantic modifiers are
   .good/.bad/.warn/.info; mockup uses color-named modifiers (.red/.amber/.blue)
   plus an explicit class — both kept so markup reads clearly.
   ========================================================================== */
.insight-strip{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.insight-chip{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border-soft);
     border-left:3px solid var(--c,var(--blue));border-radius:11px;padding:9px 13px;box-shadow:var(--shadow-sm);font-size:12.5px}
.insight-chip.good,  .insight-chip.green{--c:var(--green)}
.insight-chip.bad,   .insight-chip.red  {--c:var(--red)}
.insight-chip.warn,  .insight-chip.amber{--c:var(--orange)}
.insight-chip.info,  .insight-chip.blue {--c:var(--blue)}
.insight-chip b{color:var(--text-strong);font-weight:680}
.insight-chip .n{font-weight:740;color:var(--c,var(--blue));font-variant-numeric:tabular-nums}


/* ============================================================================
   7. CARDS & CHART
   ----------------------------------------------------------------------------
   .grid2 layout + .card (chart/list wrapper) + inline SVG trend chart + top
   vendors mini-list. (.card is the lighter content card; .grid-card below is
   the table wrapper.)
   ========================================================================== */
.grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 16px 4px}
.card-h .t{font-size:13.5px;font-weight:700;color:var(--text-strong)}
.card-h .s{font-size:12px;color:var(--muted-2);margin-left:auto;font-weight:600}

.chart-wrap{padding:6px 12px 14px}
svg.line{width:100%;height:180px;display:block}

.mini-list{padding:6px 8px 10px}
.mini-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px}
.mini-row:hover{background:var(--row-hover)}
.mini-row .mn{font-weight:600;color:var(--text);font-size:13px}
.mini-row .mv{margin-left:auto;font-weight:680;color:var(--text-strong);font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:4px;background:var(--border-soft);overflow:hidden;width:84px;flex:0 0 auto}
.bar i{display:block;height:100%;background:var(--primary);border-radius:4px}


/* ============================================================================
   8. TABLES
   ----------------------------------------------------------------------------
   .grid-card (live name) — dense accounting-grade table wrapper.
   Frozen first column = .sticky-left (live name).
   ========================================================================== */
.grid-card{background:var(--card);border:1px solid var(--border-soft);border-radius:var(--radius);
     box-shadow:var(--shadow-sm);overflow:hidden}
.grid-card .card-h{padding:14px 16px}

table{width:100%;border-collapse:collapse}
thead th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);
     text-align:left;padding:9px 14px;border-bottom:1px solid var(--border);background:var(--card);
     position:sticky;top:0;white-space:nowrap;cursor:pointer;user-select:none}
thead th.r{text-align:right}
thead th .sort{opacity:.35;font-size:9px;margin-left:3px}      /* analogue of live .sort-arrow */
tbody td{padding:8px 14px;border-bottom:1px solid var(--border-soft);font-size:13px;color:var(--text)}
tbody tr:hover{background:var(--row-hover)}
tbody tr:last-child td{border-bottom:none}
td.name{font-weight:600;color:var(--text-strong)}

/* Frozen first column — .sticky-left (live name) */
.sticky-left{position:sticky;left:0;background:var(--card)}
tbody tr:hover .sticky-left{background:var(--row-hover)}
thead th.sticky-left{z-index:2}


/* ============================================================================
   9. PILLS & STATUS
   ----------------------------------------------------------------------------
   .pct-pill (live name, YoY % badge) + .status-pill (live name, workflow status)
   ========================================================================== */
.pct-pill{display:inline-block;min-width:54px;text-align:right;font-weight:670;font-size:12px;
     padding:1px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.pct-pill.up{color:var(--green-fg);background:var(--green-bg)}
.pct-pill.down{color:var(--red-fg);background:var(--red-bg)}
.pct-pill.flat{color:var(--muted);background:var(--border-soft)}

.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;
     padding:2px 9px;border-radius:var(--pill)}
.status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.status-pill.ready{color:var(--green-fg);background:var(--green-bg)}
.status-pill.draft{color:var(--muted);background:var(--border-soft)}
.status-pill.sent{color:var(--blue-fg);background:var(--blue-bg)}
.status-pill.hold{color:var(--red-fg);background:var(--red-bg)}


/* ============================================================================
   10. WORKFLOW
   ----------------------------------------------------------------------------
   PO-queue page toolbar + row action button.
   ========================================================================== */
.wf-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rowbtn{background:none;border:1px solid var(--border);border-radius:8px;padding:4px 10px;font-size:12px;font-weight:620;color:var(--primary-dark)}
.rowbtn:hover{background:var(--primary-tint)}


/* ============================================================================
   11. UTILITIES
   ========================================================================== */
/* .section-title (live name) — uppercase subsection header */
.section-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);
     margin:4px 2px 10px}

/* .num (live name) — right-aligned tabular numeric cell */
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; text-align:right; white-space:nowrap}
.neg{color:var(--red-fg)}

.hint{font-size:12px;color:var(--muted-2);margin:12px 2px 0}

/* mockup-only sandbox banner (drop on Jinja extraction) */
.mock{position:fixed;right:14px;bottom:14px;background:var(--text-strong);color:#fff;font-size:11.5px;
     font-weight:600;padding:7px 12px;border-radius:9px;box-shadow:var(--shadow);opacity:.9;z-index:50}

/* ── Dashboard-switcher kit (.brand-menu / .switchable) — appended for the
   financial-real wiring; copied verbatim from sales_template.html (doc 14 §3.1). */
/* Whole brand block is the switcher trigger when 2+ dashboards are enabled */
.sidebar-brand.switchable { cursor: pointer; border-radius: 12px; margin: 4px 6px 0; transition: background .12s ease; }
.sidebar-brand.switchable:hover { background: var(--row-hover); }
.b-switch { margin-left: auto; color: var(--muted-2); font-size: 11px; opacity: .7;
     background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.b-switch:hover { background: var(--row-hover); opacity: 1; }

/* Dashboard switcher dropdown — kit addition 2026-07-08 (doc 14 §3.1);
   CSS copied verbatim from playbook ui/canonical/dashboard.css. */
.brand-menu { position: absolute; top: 52px; left: 14px; right: 14px; z-index: 30;
     background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
     box-shadow: var(--shadow); padding: 5px; display: none; }
.brand-menu.open { display: block; }
.brand-menu a { display: flex; align-items: center; padding: 7px 10px; border-radius: 7px;
     color: var(--text); font-size: 13px; font-weight: 550; text-decoration: none; }
.brand-menu a:hover { background: var(--row-hover); }
.brand-menu a.current { background: var(--primary-tint); color: var(--primary-dark); font-weight: 650; }

/* ── Switcher menu v2 (doc 14 §3.1, 2026-07-11): head + descriptor rows + count badge ── */
.brand-menu-head { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); padding: 6px 10px 4px; }
.brand-menu a { flex-direction: column; align-items: flex-start; gap: 1px; }
.brand-menu .bm-name { display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: 13px; font-weight: 650; color: var(--text-strong); }
.brand-menu a.current .bm-name { color: var(--primary-dark); }
.brand-menu .bm-here { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--primary-dark); background: var(--primary-tint-strong);
  padding: 1px 7px; border-radius: 999px; }
.brand-menu .bm-blurb { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.brand-menu a:focus { outline: 2px solid var(--primary-tint-strong); outline-offset: -2px; }
/* Count badge on the brand block — visible at rest so the switcher is discoverable */
.b-count { font-size: 10.5px; font-weight: 700; color: var(--muted-2); background: var(--border-soft);
  padding: 1px 7px; border-radius: 999px; margin-left: auto; }
.sidebar-brand.switchable .b-count { color: var(--primary-dark); background: var(--primary-tint); }
.sidebar-brand.switchable:hover .b-count { background: var(--primary-tint-strong); }