/* ==================================================================
   QuoteOne design system — full rollout
   Applies globally (unconditionally, regardless of the old dark/light
   toggle — see below) on top of app.css, which still supplies layout,
   structure and most component selectors. This file overrides app.css's
   CSS custom properties (--bg/--panel/--ink/etc.) rather than fighting
   its selectors one by one — nearly every rule in app.css already reads
   from those variables, so redefining them here (loaded after app.css,
   so it wins ties) reskins most of the shell/table/card/button chrome in
   one place. Everything below the token block is a small, targeted
   override for shapes app.css hard-codes instead of reading from a
   variable (gradients, pill radii, mono-everywhere labels, shadows).

   The dark/light toggle (util.js's toggleTheme) flips the `data-theme`
   attribute between "dark" and "light"; both are real variants of THIS
   design system (same shapes/radii/shadows, different token values) —
   [data-theme="dark"] below, bare :root is light and is also what applies
   when the attribute is absent. app.css's old dark :root block and
   `[data-theme="light"]` block were both retired; nothing there is read
   anymore. ================================================================== */

:root {
  /* ---- brand tokens (light — also the default with no data-theme set) ---- */
  --bg:#F5F6F8; --panel:#FFFFFF; --panel2:#FAFBFC; --panel3:#F2F4F7;
  --line:#E3E7EC; --line-soft:#EDF0F3;
  --ink:#1B2434; --ink-dim:#5B6B82; --ink-faint:#93A0B2;
  --grid:transparent;
  --brand:#3151D3; --brand-dim:#EEF1FD;
  --ok:#1F9254; --ok-dim:#E7F5ED;
  --energy:#B5790A; --energy-dim:#FBF1DC;
  --no:#C23B3B; --no-dim:#FBEAEA;
  --efficio:#2E4FD9; --predicta:#6D5BD0; --fixit:#1F9254;
  --disp:'Inter',sans-serif; --body:'Inter',sans-serif; --mono:'Inter',sans-serif;
  --radius:8px; --radius-sm:6px; --radius-lg:10px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 4px 14px rgba(16,24,40,.08);
}
[data-theme="dark"] {
  --bg:#0F1420; --panel:#171D2B; --panel2:#1C2333; --panel3:#141A28;
  --line:#2B3348; --line-soft:#232A3D;
  --ink:#E7EBF3; --ink-dim:#9AA6BC; --ink-faint:#63708A;
  --grid:transparent;
  --brand:#5B7FFF; --brand-dim:#1D2748;
  --ok:#3DBE7C; --ok-dim:#173626;
  --energy:#E0A83E; --energy-dim:#3A2E14;
  --no:#E56A6A; --no-dim:#3A1B1B;
  --efficio:#5B7FFF; --predicta:#9C8CF0; --fixit:#3DBE7C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.2);
  --shadow-md:0 8px 20px rgba(0,0,0,.4);
}
[data-theme="dark"] .qact.danger:hover { background:var(--no-dim); }
[data-theme="dark"] .login-btn, [data-theme="dark"] .btn { color:#fff; }
[data-theme="dark"] .user-av { color:#0B0F17; }

/* ---- kill the tech grid backdrop ---- */
body { background-image:none!important; }
.topbar { background:var(--panel)!important; backdrop-filter:none!important; box-shadow:0 1px 0 var(--line); }

/* ---- typography baseline ---- */
body { font-size:14px; }
.page-head h1 { font-weight:700; letter-spacing:0; }
.page-head .crumb, .sec .n, .subsec { font-weight:600; letter-spacing:.06em; }
.brand h1, .login-logo, .opt h3, .pcard .name { letter-spacing:0; }
/* numeric columns get tabular alignment via font-variant, not a monospace
   typeface — keeps the brief's "one consistent icon/type family" intact */
.kpi .num, .qstat .num, table.sm td.amt, table.fm td.c,
table.sm td.rt input, #totBox, .pv-head .meta, table.pv td.c {
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}

/* ---- sidebar: flat white, thin left-accent active state ---- */
.side { background:var(--panel); border-right:1px solid var(--line); box-shadow:none; }
.side-brand { font-weight:800; letter-spacing:-.01em; border-bottom-color:var(--line); }
.side-brand small { letter-spacing:.14em; font-weight:600; color:var(--ink-faint); }
.side-nav .tab { border-radius:var(--radius-sm); font-weight:500; color:var(--ink-dim); border-left:2px solid transparent; padding-left:10px; }
.side-nav .tab:hover { background:var(--panel3); color:var(--ink); }
.side-nav .tab.active { background:var(--brand-dim); color:var(--brand); border-left-color:var(--brand); font-weight:600; box-shadow:none; }
.side-step-no { background:var(--panel3); border-color:var(--line); color:var(--ink-faint); border-radius:5px; }
.side-nav a.tab.active .side-step-no { background:var(--brand); border-color:var(--brand); color:#fff; }
.side-nav a.tab.done .side-step-no { background:var(--ok-dim); border-color:var(--ok); color:var(--ok); }
.side-foot { border-top-color:var(--line); }
.side-group { color:var(--ink-faint); font-weight:600; }

/* ---- top bar ---- */
.tb-ctx { color:var(--ink-dim); font-weight:500; }
.tb-ctx b { color:var(--ink); font-weight:700; }
.user-chip { background:var(--panel); border-color:var(--line); }
.user-av { background:var(--brand); color:#fff; font-weight:700; }
.user-menu { box-shadow:var(--shadow-md); border-color:var(--line); }
.themebtn { background:var(--panel); border-color:var(--line); font-weight:500; }
.pdfbtn { background:var(--brand); border-color:var(--brand); border-radius:var(--radius-sm); }

/* ---- buttons: flat, minimal ---- */
.btn { border-radius:var(--radius-sm); background:var(--brand); font-weight:600; letter-spacing:0; box-shadow:none; }
.btn:hover { background:color-mix(in srgb,var(--brand) 88%,#000); }
.btn.ghost { background:var(--panel); border-color:var(--line); color:var(--ink-dim); }
.btn.ghost:hover { border-color:var(--brand); color:var(--brand); }
.qact { border-radius:var(--radius-sm); background:var(--panel); border-color:var(--line); font-weight:500; }
.qact:hover { border-color:var(--brand); background:var(--brand-dim); color:var(--brand); }
.qact.danger:hover { background:var(--no-dim); }
.addbtn { border-radius:var(--radius-sm); }

/* ---- status pills / badges: subtle tint, not bright outline ---- */
.qstatus { border-radius:var(--radius-sm); border-color:var(--line); background:var(--panel); font-weight:600; }
.st-pill { border-radius:12px; font-weight:600; border:none; background:var(--panel3); color:var(--ink-dim); }
.st-pill.s-draft { background:var(--panel3); color:var(--ink-dim); }
.st-pill.s-sent { background:var(--brand-dim); color:var(--brand); }
.st-pill.s-won { background:var(--ok-dim); color:var(--ok); }
.st-pill.s-lost { background:var(--no-dim); color:var(--no); }
.fchip { border-radius:16px; border-color:var(--line); background:var(--panel); font-weight:500; }
.fchip.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.pbadge { border-radius:10px; }

/* ---- KPI tiles: flat card, no gradient bar ---- */
.kpi { border-radius:var(--radius); border-top:1px solid var(--line); box-shadow:var(--shadow-sm); }
.kpi .lab { font-weight:600; letter-spacing:.06em; color:var(--ink-faint); }
.kpi .num { font-weight:700; }
.qstat { border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.qstat .num { font-weight:700; }

/* ---- tables: subtle borders, sticky header, row hover ---- */
table.sm, table.fm {
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; border-collapse:separate; border-spacing:0;
}
table.sm th, table.fm th {
  background:var(--panel3); color:var(--ink-dim); font-weight:600; letter-spacing:.04em;
  border:none; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1;
}
table.sm td, table.fm td { border:none; border-bottom:1px solid var(--line-soft); }
table.sm tbody tr:hover td, table.fm tbody tr:hover td { background:var(--panel3); }
table.sm td.grp, table.fm td.grp { background:var(--panel2); color:var(--brand); font-weight:600; }
table.sm td.rt input { border-radius:5px; border-color:var(--line); }
.yn { border-radius:5px; font-weight:600; }
.yn.yes { background:var(--ok-dim); border-color:var(--ok); color:var(--ok); }
.yn.no { background:var(--no-dim); border-color:var(--no); color:var(--no); }
.y { color:var(--ok); } .o { color:var(--energy); }

/* ---- forms / search / hint boxes ---- */
.listbar input, .field input, .field select, .qty input, input.cin {
  border-radius:var(--radius-sm); border-color:var(--line); background:var(--panel);
}
.field label { font-weight:600; letter-spacing:.04em; color:var(--ink-faint); }
.hint { background:var(--brand-dim); border-color:var(--line); border-left-color:var(--brand); border-radius:var(--radius-sm); color:var(--ink-dim); }
.empty { border-color:var(--line); border-radius:var(--radius); background:var(--panel2); }

/* ---- misc surfaces ---- */
.actions .inner { border-radius:var(--radius); border-color:var(--line); box-shadow:var(--shadow-md); background:var(--panel); }
.actions { background:linear-gradient(transparent,var(--bg) 40%); }
#totBox { background:var(--panel2); border-color:var(--line); border-radius:var(--radius); }
.toastmsg { border-radius:var(--radius-sm); box-shadow:var(--shadow-md); border-left-width:3px; }
.noquote { border-radius:var(--radius); }

/* ---- product picker cards (Step 2) + platform map ---- */
.pcard, .opt, .pmap, .out { border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.pcard { border-top:2px solid var(--ac); }
.pcard.sel { box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 30%,transparent); }
.tick { border-radius:5px; background:var(--panel2); }
.ed { background:var(--panel); border-radius:var(--radius-sm); }
.ed.sel { background:color-mix(in srgb,var(--ac) 10%,var(--panel)); }
.pmap-root { background:var(--brand-dim); border-color:var(--brand); border-radius:var(--radius); color:var(--ink); }
.pnode { border-radius:var(--radius-sm); background:var(--panel2); }
.pnode.sel { background:color-mix(in srgb,var(--ac) 10%,var(--panel2)); }
.pn-tick { border-radius:4px; background:var(--panel3); }
.chip { border-radius:14px; background:var(--panel); border-color:var(--line); color:var(--ink-dim); font-weight:500; }
.chip.on { background:var(--brand-dim); border-color:var(--brand); color:var(--brand); }
.opt { border-top:2px solid var(--brand-dim); }

/* ---- stepper (Steps 1-8 breadcrumb strip) ---- */
.stepper { background:var(--panel); border-color:var(--line); box-shadow:var(--shadow-sm); }
.stepper .st { color:var(--ink-faint); }
.stepper .st:hover { background:var(--panel3); color:var(--ink); }
.stepper .st .n { background:var(--panel2); border-color:var(--line); }
.stepper .st.active { background:var(--brand-dim); color:var(--ink); }
.stepper .st.active .n { background:var(--brand); border-color:var(--brand); color:#fff; }
.stepper .st.done .n { background:var(--ok-dim); border-color:var(--ok); color:var(--ok); }

/* ---- product tabs (Step 3 requirement, Masters) ---- */
.ptab { border-radius:var(--radius-sm); background:var(--panel2); color:var(--ink-dim); border-top:2px solid var(--ac,var(--line)); }
.ptab.on { background:var(--panel); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm); }

/* ---- login page ---- */
body.login-body { background:var(--bg); background-image:none!important; }
.login-shell { border-radius:var(--radius-lg); box-shadow:var(--shadow-md); border-color:var(--line); }
.login-art { background:linear-gradient(165deg,var(--brand),color-mix(in srgb,var(--brand) 70%,#1a2a6b)); border-right:none; }
.login-art, .login-art .login-tag, .login-art .login-foot { color:#fff; }
.login-logo, .login-mod b { color:#fff; }
.login-logo span { color:#B9C6FF; }
.login-mod { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); border-radius:var(--radius-sm); }
.login-mod span { color:rgba(255,255,255,.7); }
.login-btn { border-radius:var(--radius-sm); background:var(--brand); }
.login-demo { border-radius:var(--radius-sm); background:var(--panel2); border-color:var(--line); border-style:solid; }
.login-err { border-radius:var(--radius-sm); }

/* ---- masters workspace ---- */
.rownew { background:var(--brand-dim)!important; }