/* ════════════════════════════════════════════════════════════
   Sales Monthly Report — VCAN design system
   Parchment (light) primary · Espresso (dark) toggle
   Unified with the Stock Aging dashboard
   ════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
a, button { cursor:pointer; }

/* ─── Theme tokens ─── */
:root, [data-theme="light"] {
  --bg-0:#eceae5; --bg-1:#f7f6f3; --surface:#ffffff; --surface-hi:#fafaf9;
  --surface-2:#f3f4f6;
  --line:#e5e7eb; --line-hi:#d1d5db;
  --text:#111827; --text-mute:#6b7280; --text-dim:#9ca3af;
  --gold:#0d9488; --gold-soft:#14b8a6; --gold-ink:#ffffff;
  --gold-wash:rgba(13,148,136,.10);
  --green:#16a34a; --green-bg:#dcfce7;
  --red:#dc2626; --red-bg:#fee2e2;
  --amber:#f59e0b; --amber-bg:#fef3c7;
  --grid:rgba(17,24,39,.06);
  --zebra:rgba(17,24,39,.018);
  --shadow:0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06);
  --noise:0;
}
[data-theme="dark"] {
  --bg-0:#0b1120; --bg-1:#0f172a; --surface:#1e293b; --surface-hi:#243044;
  --surface-2:#334155;
  --line:rgba(255,255,255,.08); --line-hi:rgba(255,255,255,.16);
  --text:#f1f5f9; --text-mute:#94a3b8; --text-dim:#64748b;
  --gold:#2dd4bf; --gold-soft:#5eead4; --gold-ink:#04201c;
  --gold-wash:rgba(45,212,191,.12);
  --green:#4ade80; --green-bg:rgba(74,222,128,.15);
  --red:#f87171; --red-bg:rgba(248,113,113,.15);
  --amber:#fbbf24; --amber-bg:rgba(251,191,36,.15);
  --grid:rgba(255,255,255,.06);
  --zebra:rgba(255,255,255,.018);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 24px -16px rgba(0,0,0,.7);
  --noise:0;
}

/* fixed espresso "ink" tokens — sidebar + table headers in both themes */
:root {
  --ink-0:#111827; --ink-1:#1f2937; --ink-2:#374151; --ink-3:#4b5563;
  --ink-line:rgba(255,255,255,.07); --ink-line-hi:rgba(255,255,255,.14);
  --ink-text:#f9fafb; --ink-mute:#9ca3af; --ink-dim:#6b7280;
  --ink-gold:#2dd4bf; --ink-gold-soft:#5eead4;
}

html { background:var(--bg-0); }
body {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background:var(--bg-1);
  color:var(--text);
  font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
[data-theme="dark"] body {
  background:radial-gradient(ellipse at 50% -8%, #16213a 0%, #0f172a 48%, #0b1120 100%);
}
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:var(--noise); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; }

/* ════════ Sidebar (espresso letterhead) ════════ */
.sb {
  width:228px; min-height:100vh; position:fixed; left:0; top:0; overflow-y:auto; z-index:100;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 100%);
  border-right:1px solid var(--ink-line-hi);
  transition:width .22s ease, opacity .18s ease;
}
.sb.collapsed { width:0; opacity:0; pointer-events:none; overflow:hidden; }
.sb-logo {
  padding:20px 20px 18px; border-bottom:1px solid var(--ink-line);
  position:relative;
}
.sb-logo::before {
  content:"V"; position:absolute; top:18px; right:18px;
  width:34px; height:34px; border-radius:9px;
  background:var(--ink-gold); color:#2a1d08;
  font-family:'Fraunces', serif; font-weight:700; font-size:19px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px rgba(94,234,212,.3), 0 6px 16px -6px rgba(45,212,191,.55);
}
.sb-title {
  font-family:'Fraunces', Georgia, serif; color:var(--ink-text);
  font-size:17px; font-weight:500; line-height:1.25; letter-spacing:-.01em;
  max-width:150px;
}
.sb-sub {
  color:var(--ink-dim); font-family:'JetBrains Mono', monospace;
  font-size:9.5px; margin-top:7px; letter-spacing:.04em; text-transform:uppercase;
}
.sb-grp {
  padding:16px 20px 6px; font-family:'JetBrains Mono', monospace;
  font-size:9px; font-weight:600; color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:.16em;
}
.nav {
  display:flex; align-items:center; gap:10px; padding:9px 20px;
  color:var(--ink-mute); transition:all .15s;
  border-left:2px solid transparent; font-size:12.5px; user-select:none;
}
.nav:hover { background:rgba(239,230,216,.05); color:var(--ink-text); }
.nav.on {
  background:rgba(45,212,191,.12); color:var(--ink-gold-soft);
  border-left-color:var(--ink-gold); font-weight:600;
}
.sb-foot {
  padding:14px 20px; border-top:1px solid var(--ink-line); margin-top:auto;
  color:var(--ink-dim); font-family:'JetBrains Mono', monospace;
  font-size:9px; letter-spacing:.06em; text-transform:uppercase;
}

/* ════════ Main ════════ */
.main { margin-left:228px; min-height:100vh; transition:margin-left .22s ease; }
.main.sb-collapsed { margin-left:0; }
.topbar {
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:13px 28px; display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:50; box-shadow:0 1px 0 var(--line);
}
.tb-title {
  font-family:'Fraunces', Georgia, serif; font-size:20px; font-weight:500;
  color:var(--text); letter-spacing:-.01em;
}
.tb-left { display:flex; align-items:center; gap:14px; }
.tb-right { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tb-right label { font-size:11px; color:var(--text-mute); display:flex; align-items:center; gap:5px; }
.sb-toggle-btn {
  display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:7px; border:1px solid var(--line-hi); background:var(--surface-hi);
  color:var(--text-mute); font-size:14px; cursor:pointer; transition:all .12s; flex-shrink:0;
}
.sb-toggle-btn:hover { color:var(--gold); border-color:var(--gold-soft); background:var(--gold-wash); }
.pad { padding:24px 28px 44px; max-width:1640px; }

/* ════════ Filters ════════ */
select.fs {
  font-family:'Inter', sans-serif; padding:6px 10px; border:1px solid var(--line-hi);
  border-radius:7px; font-size:11.5px; color:var(--text); background:var(--surface-hi);
}
select.fs:focus { outline:none; border-color:var(--gold); }
.fbar {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:13px 16px; margin-bottom:20px; box-shadow:var(--shadow);
}
.fbar label { font-size:11px; color:var(--text-mute); display:flex; align-items:center; gap:5px; }

/* ════════ Sections / Tabs ════════ */
.sec { display:none; } .sec.on { display:block; }
.tabs { display:flex; gap:7px; margin-bottom:20px; flex-wrap:wrap; }
.tb {
  font-family:'Inter', sans-serif; padding:7px 14px; font-size:11.5px; font-weight:500;
  border-radius:8px; border:1px solid var(--line-hi); background:var(--surface);
  color:var(--text-mute); transition:all .15s;
}
.tb:hover { background:var(--surface-hi); color:var(--text); border-color:var(--gold-soft); }
.tb.on { background:var(--gold-wash); color:var(--gold); border-color:var(--gold); font-weight:600; }
.tp { display:none; } .tp.on { display:block; }

/* ════════ Cards / KPI ════════ */
.card {
  background:var(--surface); border-radius:13px; padding:18px 20px;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.kpi {
  background:var(--surface); border-radius:13px; padding:16px 20px;
  border:1px solid var(--line); box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.kpi::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--gold-soft);
}
.kpi-lbl {
  font-family:'JetBrains Mono', monospace; font-size:9.5px; font-weight:600;
  color:var(--text-mute); text-transform:uppercase; letter-spacing:.1em;
}
.kpi-val {
  font-family:'Fraunces', Georgia, serif; font-size:28px; font-weight:600;
  color:var(--text); margin:7px 0 5px; letter-spacing:-.01em; line-height:1;
}
.kpi-sub { font-size:11px; line-height:1.5; }
.kpi-sub + .kpi-sub { margin-top:3px; }
.row-hd { font-size:9.5px; font-weight:600; color:var(--text-mute); text-transform:uppercase; letter-spacing:.1em; margin-bottom:7px; font-family:'JetBrains Mono',monospace; padding-left:2px; }
.row-hd.cur { color:var(--gold); }

/* ════════ Grids ════════ */
.g5 { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.g21 { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.g12 { display:grid; grid-template-columns:1fr 2fr; gap:16px; }
.mb14 { margin-bottom:16px; } .mb10 { margin-bottom:12px; }
.ct {
  font-family:'Fraunces', Georgia, serif; font-size:15px; font-weight:500;
  color:var(--text); margin-bottom:14px; letter-spacing:-.01em;
}

/* ════════ Chart wrappers ════════ */
.cw { position:relative; }
.h220 { height:220px; } .h260 { height:260px; } .h280 { height:280px; }
.h300 { height:300px; } .h320 { height:320px; }
.h340 { height:340px; } .h380 { height:380px; }

/* ════════ Tables ════════ */
.tbl-wrap { overflow-x:auto; border-radius:10px; }
table { width:100%; border-collapse:separate; border-spacing:0; font-size:11.5px; }
thead th {
  background:var(--ink-1); color:var(--ink-mute);
  font-family:'JetBrains Mono', monospace; font-weight:600; font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:9px 11px; text-align:center; white-space:nowrap;
  border-bottom:1px solid var(--ink-line-hi); position:sticky; top:0;
}
tbody tr { border-bottom:1px solid var(--line); }
tbody tr:nth-child(even) td { background:var(--zebra); }
tbody tr:hover td { background:var(--gold-wash); }
tfoot tr.tbl-total td { padding:8px 11px; background:var(--ink-1); color:var(--text); font-weight:700; border-top:2px solid var(--ink-line-hi); font-variant-numeric:tabular-nums; font-family:'JetBrains Mono',monospace; font-size:11px; }
tbody td {
  padding:8px 11px; color:var(--text); border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
td.r { text-align:right; font-family:'JetBrains Mono', monospace; font-variant-numeric:tabular-nums; }
td.c { text-align:center; }
td:has(.bdg) { text-align:center; }
.trunc { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ════════ Badges ════════ */
.bdg {
  display:inline-block; padding:2px 8px; border-radius:6px;
  font-family:'JetBrains Mono', monospace; font-size:9.5px; font-weight:600; letter-spacing:.02em;
}
.up { background:var(--green-bg); color:var(--green); }
.dn { background:var(--red-bg); color:var(--red); }
.nu { background:var(--surface-2); color:var(--text-mute); }

/* ════════ Misc ════════ */
.scrolly { overflow-y:auto; max-height:360px; }
.no-data {
  display:flex; align-items:center; justify-content:center; height:160px;
  color:var(--text-dim); font-size:12px; font-family:'JetBrains Mono', monospace;
}
.totrow { border-top:2px solid var(--ink-line-hi); background:var(--ink-1); }
.totrow td { color:var(--ink-text) !important; font-weight:600; }
.totrow:hover td { background:var(--ink-1) !important; }
.section-divider {
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:600;
  color:var(--text-mute); text-transform:uppercase; letter-spacing:.12em;
  padding:10px 0 6px; border-bottom:1px solid var(--line); margin:16px 0 12px;
  display:flex; align-items:center; gap:9px;
}
.section-divider::before { content:""; width:16px; height:2px; background:var(--gold-soft); border-radius:2px; }

/* ════════ Expandable tree rows ════════ */
.row-expand { cursor:pointer; user-select:none; }
.row-expand:hover td { background:var(--gold-wash) !important; }
.expand-icon { font-size:9px; margin-right:6px; display:inline-block; color:var(--gold-soft); }
.row-child-1 td:first-child { padding-left:24px; color:var(--text-mute); }
.row-child-1 td { background:var(--surface-hi); }
.row-child-2 td:first-child { padding-left:42px; color:var(--text-dim); font-size:10.5px; }
.row-child-2 td { background:var(--surface-2); font-size:10.5px; }

/* ════════ Pill toggles ════════ */
.fl { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-mute); }
.pillbar {
  display:inline-flex; flex-wrap:wrap; gap:5px; padding:5px;
  border:1px solid var(--line-hi); border-radius:8px; background:var(--surface);
}
.pill {
  font-family:'Inter', sans-serif; padding:4px 11px; font-size:11px; border-radius:13px;
  border:1px solid var(--line-hi); background:var(--surface-hi); color:var(--text-mute);
  cursor:pointer; user-select:none; transition:all .12s;
}
.pill:hover { background:var(--gold-wash); color:var(--text); }
.pill.on { background:var(--gold); color:var(--gold-ink); border-color:var(--gold); font-weight:600; }
.pillbar-sm { max-height:58px; overflow-y:auto; min-width:120px; max-width:200px; }
.rst {
  font-family:'Inter', sans-serif; padding:6px 11px; font-size:11px; font-weight:500;
  border-radius:7px; border:1px solid var(--line-hi); background:var(--surface);
  color:var(--text-mute); transition:all .15s; cursor:pointer;
}
.rst:hover { background:var(--red-bg); color:var(--red); border-color:var(--red); }

/* ════════ Checkbox dropdown (PowerBI-style) ════════ */
.cb-drop { position:relative; display:inline-block; }
.cb-btn {
  display:flex; align-items:center; gap:5px; padding:5px 11px; font-size:11px;
  border:1px solid var(--line-hi); border-radius:7px; background:var(--surface-hi);
  color:var(--text-mute); cursor:pointer; white-space:nowrap; line-height:1.6;
}
.cb-btn:hover, .cb-btn.open { border-color:var(--gold); color:var(--gold); }
.cb-lbl { font-weight:600; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-arrow { font-size:9px; color:var(--text-dim); }
.cb-panel {
  display:none; position:absolute; top:calc(100% + 5px); left:0; min-width:210px; max-width:280px;
  background:var(--surface); border:1px solid var(--line-hi); border-radius:10px;
  box-shadow:0 12px 32px -12px rgba(42,29,8,.4); z-index:200; padding:7px 0;
}
[data-theme="dark"] .cb-panel { box-shadow:0 16px 40px -16px rgba(0,0,0,.7); }
.cb-panel.open { display:block; }
.cb-search { padding:5px 9px 7px; }
.cb-search input {
  width:100%; padding:5px 9px; font-size:11px; border:1px solid var(--line-hi);
  border-radius:6px; outline:none; box-sizing:border-box; background:var(--surface-hi); color:var(--text);
}
.cb-search input:focus { border-color:var(--gold); }
.cb-all-row {
  display:flex; align-items:center; gap:7px; padding:5px 13px 7px; font-size:11px; font-weight:600;
  color:var(--text); border-bottom:1px solid var(--line); cursor:pointer;
}
.cb-all-row:hover { background:var(--surface-hi); }
.cb-list { max-height:230px; overflow-y:auto; }
.cb-item { display:flex; align-items:center; gap:7px; padding:5px 13px; font-size:11px; color:var(--text); cursor:pointer; }
.cb-item:hover { background:var(--gold-wash); }
.cb-item input, .cb-all-row input { cursor:pointer; accent-color:var(--gold); }

/* ════════ Password Modal ════════ */
dialog.pw-modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  border:none; border-radius:14px; padding:0; background:transparent; box-shadow:none;
  max-width:380px; width:90%;
}
dialog.pw-modal::backdrop { background:rgba(14,10,8,.92); backdrop-filter:blur(7px); }
.pw-box { background:#1d1612; border-radius:14px; padding:36px; border:1px solid rgba(239,230,216,.18); box-shadow:0 30px 70px -30px rgba(0,0,0,.85); }
.pw-brand { font-family:'Fraunces', Georgia, serif; font-size:23px; font-weight:600; color:#f4ecdd; letter-spacing:-.02em; margin-bottom:5px; }
.pw-sub { font-family:'JetBrains Mono', monospace; font-size:10px; color:#ffd27a; margin-bottom:24px; line-height:1.5; text-transform:uppercase; letter-spacing:.12em; }
.pw-box input { width:100%; padding:11px 14px; border-radius:8px; border:1px solid rgba(239,230,216,.18); background:#0e0a08; color:#f4ecdd; font-size:13px; outline:none; margin-bottom:12px; font-family:'Inter', sans-serif; }
.pw-box input:focus { border-color:#f0b340; }
.pw-box button { width:100%; padding:11px; border-radius:8px; border:none; background:#f0b340; color:#2a1d08; font-size:13px; font-weight:700; cursor:pointer; transition:background .15s; font-family:'Inter', sans-serif; }
.pw-box button:hover:not(:disabled) { background:#ffd27a; }
.pw-box button:disabled { opacity:.5; cursor:not-allowed; }
.pw-err { color:#f08a8a; font-family:'JetBrains Mono', monospace; font-size:10.5px; margin-bottom:10px; min-height:1.3em; }

/* ── Light-mode password modal ── */
[data-theme="light"] .pw-box {
  background:#f6ecd6; border-color:#e2d2b1;
  box-shadow:0 30px 70px -30px rgba(42,29,8,.22);
}
[data-theme="light"] .pw-brand { color:#2a1d08; }
[data-theme="light"] .pw-sub { color:#8c6418; }
[data-theme="light"] .pw-box input {
  background:#fffaf0; border-color:#e2d2b1; color:#2a1d08;
}
[data-theme="light"] .pw-box input::placeholder { color:#b8a98f; }
[data-theme="light"] .pw-box input:focus { border-color:#c79433; }
[data-theme="light"] .pw-box button { background:#c79433; color:#2a1d08; }
[data-theme="light"] .pw-box button:hover:not(:disabled) { background:#8c6418; color:#fff8ed; }
[data-theme="light"] .pw-err { color:#b91c1c; }

/* ════════ Responsive ════════ */
@media (max-width:1180px) {
  .g5 { grid-template-columns:repeat(3,1fr); }
  .g4 { grid-template-columns:repeat(2,1fr); }
  .g21, .g12 { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .g5, .g4, .g3, .g2 { grid-template-columns:1fr; }
  /* On mobile the sidebar becomes a full-height overlay (off-canvas) */
  .sb {
    position:fixed; left:0; top:0; z-index:300;
    transform:translateX(-100%); transition:transform .22s ease, opacity .18s ease;
    width:228px; opacity:1; pointer-events:auto;
    box-shadow:4px 0 24px rgba(0,0,0,.35);
  }
  /* When NOT collapsed (= open), slide in */
  .sb:not(.collapsed) { transform:translateX(0); }
  /* When collapsed, stay off-screen */
  .sb.collapsed { transform:translateX(-100%); opacity:0; pointer-events:none; }
  /* Main always takes full width on mobile */
  .main { margin-left:0 !important; }
  .main.sb-collapsed { margin-left:0; }
  /* Overlay backdrop when sidebar open */
  .sb-backdrop {
    display:none; position:fixed; inset:0; z-index:299;
    background:rgba(0,0,0,.45);
  }
  .sb-backdrop.on { display:block; }
}
@media (max-width:480px) {
  .g3 { grid-template-columns:1fr 1fr; }
  .kpi-val { font-size:22px; }
  .pad { padding:14px 14px 36px; }
  .topbar { padding:10px 14px; flex-wrap:wrap; gap:8px; }
  /* Tap-friendly */
  .pw-box input { min-height:44px; }
  .pw-box button { min-height:44px; }
  /* Table horizontal scroll */
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* Chart height on phone */
  .h220 { height:180px; } .h240 { height:180px; } .h260 { height:200px; }
  .h280 { height:200px; } .h300 { height:220px; } .h320 { height:220px; }
  .h340 { height:240px; } .h380 { height:240px; }
}