/* =============================================================================
   QuantProc(TM) Sourcing - the one place colour, type and weight are decided.
   =============================================================================

   Every page used to carry its own :root and its own
   @media (prefers-color-scheme:dark) block. Thirty pages, twenty-one palettes,
   five different names for "ink" and five for "background" - which is why no two
   modules looked alike, and why a machine in dark mode turned the whole product
   black.

   This file is linked LAST on every page, so it wins the cascade over whatever
   a page still declares. Pages keep their own markup and their own rules; only
   the values come from here.

   Two rules hold this together:
     1. The canonical tokens below are the palette. Nothing else is.
     2. Every legacy name a page still uses (--text, --fg, --tx, --panel, --bd
        and the rest) is mapped onto a canonical token further down, so a page
        written years ago in a different vocabulary still lands on brand colour.

   Dark is a CHOICE - <html data-theme="dark"> - not the operating system's, and
   it is deep navy. The brand does not own black.
   ============================================================================= */

:root {
  /* -- ground and paper ---------------------------------------------------- */
  --app:#eef2f8;          /* the window behind everything */
  --surface:#ffffff;      /* cards, tables, panels        */
  --surface-2:#f4f7fc;    /* a panel's own header         */
  --surface-3:#e9eff8;    /* table head, inset strips     */

  /* -- ink: three weights, never more -------------------------------------- */
  --ink:#0d1830;          /* the thing you are reading    */
  --ink-2:#465575;        /* supporting text              */
  --ink-3:#7d8cab;        /* labels, nil values, hints    */

  /* -- rules --------------------------------------------------------------- */
  --line:#dde5f0;
  --line-2:#c8d4e6;

  /* -- identity ------------------------------------------------------------ */
  --navy:#0a1a33;         /* sidebar, module header       */
  --navy-2:#13305c;
  --brand:#1f6fe6;        /* QuantProc blue               */
  --brand-ink:#134fb0;
  --brand-2:#2f9bf4;
  --brand-wash:#e6f0fe;
  --gold:#9a7420;         /* statement rules, totals      */
  --gold-2:#c79a2e;
  --gold-wash:#f7efd9;

  /* -- verdicts: colour only where colour IS the answer -------------------- */
  --good:#12805a;  --good-wash:#e0f4ec;
  --warn:#b07714;  --warn-wash:#f8efd7;
  --bad:#c33f2c;   --bad-wash:#fbe7e2;  --bad-2:#e0553f;

  /* -- sub-product accents. These stay distinct on purpose ----------------- */
  --ai:#6a4ff0;    --ai-wash:#eceafe;   /* anything AI does   */
  --wa:#1fa855;                          /* WhatsApp           */
  --star:#d99a0b;                        /* ratings            */
  --client:#1f6fe6;                      /* buyer side         */
  --vendor:#0f766e;                      /* seller side        */
  --talent:#7c3aed;                      /* Talent Connect     */
  --ambassador:#c2410c;
  --ad:#be123c;

  /* -- type: five sizes, fixed --------------------------------------------- */
  --t-title:20px;         /* module title                 */
  --t-lead:13.5px;        /* panel heading                */
  --t-body:13px;          /* body, table cells            */
  --t-label:10.5px;       /* uppercase labels             */
  --t-money:15.5px;       /* figures                      */
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Code",Consolas,monospace;
  --display:var(--sans);
  --font:var(--sans);

  /* -- depth and motion ---------------------------------------------------- */
  --shadow-sm:0 1px 2px rgba(13,24,48,.05),0 4px 14px rgba(13,24,48,.06);
  --shadow:0 2px 8px rgba(13,24,48,.07),0 18px 40px rgba(13,24,48,.13);
  --shadow-card:var(--shadow-sm);
  --transition:.16s cubic-bezier(.4,0,.2,1);

  /* == legacy names ========================================================
     Pages written in an older vocabulary. Mapped, not redefined, so there is
     still exactly one palette. Do not add to this list - use the names above.
     ====================================================================== */
  --bg:var(--app);        --bg2:var(--surface);    --bg3:var(--surface-2);
  --panel:var(--surface); --panel2:var(--surface-2);
  --card:var(--surface);  --surface2:var(--surface-2);
  --sidebar:var(--navy);  --veil:rgba(13,24,48,.52);
  --text:var(--ink);      --fg:var(--ink);         --tx:var(--ink);
  --text2:var(--ink-2);   --ink2:var(--ink-2);     --mut:var(--ink-3);
  --text3:var(--ink-3);   --muted:var(--ink-3);
  --border:var(--line);   --bd:var(--line);        --border2:var(--line-2);
  --border-strong:var(--line-2);                   /* was used, never defined */
  --acc:var(--brand);     --acc2:var(--brand-2);   --accent:var(--brand);
  --accent2:var(--brand-2); --accent3:var(--ai);   --accent4:var(--gold-2);
  --blue:var(--brand);    --blue-bg:var(--brand-wash);
  --cobalt:var(--brand-ink);
  --a:var(--brand);       --a-soft:var(--brand-wash);
  --v:var(--vendor);      --v2:var(--brand-2);
  --ok:var(--good);       --green:var(--good);     --mint:var(--good);
  --green-bg:var(--good-wash); --green-bd:#a9ddc7;
  --amber:var(--warn);    --amber-bg:var(--warn-wash);
  --err:var(--bad);       --red:var(--bad);        --coral:var(--bad-2);
  --err-bg:var(--bad-wash);
  --bad-ink:#8f2a1b;                               /* was used, never defined */
  --kpi-color:var(--brand);
  color-scheme:light;
}

/* =============================================================================
   Dark, by choice: <html data-theme="dark">. Deep navy, never black.
   ============================================================================= */
:root[data-theme="dark"] {
  --app:#10192b;  --surface:#16233c;  --surface-2:#1b2b48;  --surface-3:#203353;
  --ink:#f2f6fd;  --ink-2:#b3c2dd;    --ink-3:#8496b8;
  --line:#26385a; --line-2:#32486f;
  --navy:#0a1424; --navy-2:#16294a;
  --brand:#5b9bf8; --brand-ink:#a6c9fc; --brand-2:#7cb6fb; --brand-wash:#1a3157;
  --gold:#d9b45e;  --gold-2:#f0d391;   --gold-wash:#2e2a17;
  --good:#3fcb92;  --good-wash:#143528;
  --warn:#e0b25c;  --warn-wash:#33290f;
  --bad:#ef8770;   --bad-wash:#3a1d17;  --bad-2:#f5a18d;  --bad-ink:#f7bcad;
  --ai:#a48ffa;    --ai-wash:#221d47;
  --wa:#3ec97a;    --star:#f0bd4a;
  --green-bd:#2c5f48;
  --shadow-sm:0 1px 2px rgba(0,0,0,.30),0 6px 18px rgba(0,0,0,.26);
  --shadow:0 2px 10px rgba(0,0,0,.34),0 20px 44px rgba(0,0,0,.40);
  color-scheme:dark;
}

/* =============================================================================
   THE MODULE HEADER. The same band on every screen in Sourcing, so a person
   always knows where the page begins and what it is called.
   Opt in with <header class="qp-head">; nothing breaks on pages that do not.
   ============================================================================= */
.qp-head {
  background:linear-gradient(105deg,var(--navy) 0%,var(--navy-2) 62%,#1c4380 100%);
  border-bottom:3px solid var(--gold-2);
  padding:18px 24px 16px;
}
.qp-head .qp-row { display:flex; align-items:center; gap:13px; max-width:1180px; }
.qp-head .qp-ico {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  font-size:18px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
}
.qp-head h1 { margin:0; font-size:var(--t-title); font-weight:800; letter-spacing:-.02em; color:#fff; }
.qp-head .qp-sub { font-size:12.5px; color:#a9c0e4; margin-top:1px; }
.qp-head .qp-sp { flex:1; }
.qp-head .qp-btn {
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.26); color:#fff;
  border-radius:9px; padding:7px 12px; font:inherit; font-size:12.5px; cursor:pointer;
}
.qp-head .qp-btn:hover { background:rgba(255,255,255,.18); }
.qp-head .qp-btn.qp-key { background:var(--gold-2); border-color:var(--gold-2); color:#2b2000; font-weight:700; }
.qp-head .qp-bar {
  max-width:1180px; display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-top:13px; font-size:12.5px; color:#a9c0e4;
}
.qp-head .qp-bar input, .qp-head .qp-bar select {
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.28); border-radius:8px;
  padding:6px 9px; color:#fff; font:inherit; font-size:12.5px; color-scheme:dark;
}
.qp-head .qp-chip {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.26); border-radius:999px;
  padding:6px 13px; color:#fff; font:inherit; font-size:12px; cursor:pointer;
}
.qp-head .qp-chip.on { background:var(--gold-2); border-color:var(--gold-2); color:#2b2000; font-weight:700; }

/* -- the content well ------------------------------------------------------ */
.qp-body { padding:22px 24px 40px; max-width:1180px; }

/* -- headline figures ------------------------------------------------------ */
.qp-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:18px; }
.qp-kpi {
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--gold-2);
  border-radius:13px; padding:12px 14px; box-shadow:var(--shadow-sm);
}
.qp-kpi .k { font-size:var(--t-label); color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.qp-kpi .v { font-size:25px; font-weight:800; margin-top:3px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.qp-kpi .v.good { color:var(--good); }
.qp-kpi .v.bad  { color:var(--bad); }

/* -- panels ---------------------------------------------------------------- */
.qp-card {
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  overflow:hidden; margin-bottom:15px; box-shadow:var(--shadow-sm);
}
.qp-card > h3 {
  margin:0; padding:12px 16px; font-size:var(--t-lead); font-weight:800; color:var(--ink);
  background:var(--surface-2); border-bottom:2px solid var(--gold-2);
  display:flex; align-items:center; gap:9px;
}
.qp-card > h3 .d { width:8px; height:8px; border-radius:2px; background:var(--brand); }
.qp-card > h3 .r { margin-left:auto; font-size:11.5px; font-weight:500; color:var(--ink-3); }

/* -- tables and figures ---------------------------------------------------- */
.qp-tbl { width:100%; border-collapse:collapse; }
.qp-tbl th {
  padding:9px 16px; text-align:left; font-size:var(--t-label); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2); background:var(--surface-3);
  border-bottom:2px solid var(--line-2); font-weight:800;
}
.qp-tbl th.r { text-align:right; }
.qp-tbl td { padding:8px 14px; font-size:var(--t-body); color:var(--ink-2); border-bottom:1px solid var(--line); }
.qp-tbl td.name { color:var(--ink); }
.qp-tbl td.n {
  text-align:right; font-family:var(--mono); font-size:var(--t-money); font-weight:600;
  padding:7px 16px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--ink);
}
/* A nil figure is quieter than a posted one, but never invisible. */
.qp-tbl td.n.nil { color:var(--ink-3); font-weight:500; }
.qp-tbl tr.tot { background:var(--gold-wash); }
.qp-tbl tr.tot td { border-top:2px solid var(--gold-2); color:var(--gold); font-weight:800; }
.qp-tbl tr.tot td.n { font-size:16.5px; color:var(--gold); }
.qp-tbl .l0 { font-weight:700; color:var(--ink); }
.qp-tbl .l1 { padding-left:34px; }
.qp-tbl .l2 { padding-left:54px; }

.qp-pill { display:inline-block; font-size:11px; padding:2px 9px; border-radius:999px; font-weight:600; }
.qp-pill.b { background:var(--brand-wash); color:var(--brand-ink); }
.qp-pill.g { background:var(--good-wash);  color:var(--good); }
.qp-pill.w { background:var(--warn-wash);  color:var(--warn); }
.qp-pill.r { background:var(--bad-wash);   color:var(--bad); }

.qp-empty { padding:34px; text-align:center; color:var(--ink-3); font-size:var(--t-body); }

/* -- print: ink on paper, gold kept only as the rules ---------------------- */
@media print {
  .qp-head { background:#fff !important; border-bottom:2px solid #b8962e !important; padding:0 0 10px; }
  .qp-head h1, .qp-head .qp-sub { color:#111 !important; }
  .qp-head .qp-btn, .qp-head .qp-bar, .qp-noprint { display:none !important; }
  .qp-card { box-shadow:none !important; break-inside:avoid; }
  .qp-tbl th { background:#fff !important; }
}