/* ==========================================================================
   COSANI COLOR SYSTEM  —  v2, approved by GC 2026-07-31
   "More colors, but not cheesy. Look Centric / ApparelMagic. Apple clean
    design but with colors, and more understanding of buttons and placements."

   RELATIONSHIP TO THE 30-JUL DESIGN SYSTEM
   ----------------------------------------
   The 30-Jul pass (cosani-design-system.css) fixed the cheapness by removing
   colour almost entirely, and overcorrected into flat and washed out. This
   file is the CORRECTION, not a revert. It keeps every typographic decision
   from that pass — the 600 weight cap, the self-hosted Inter, the tight
   tracking, the neutral substrate — and puts colour back as INFORMATION.

   LOAD ORDER: this file must be the LAST stylesheet, after
   cosani-design-system.css, so "later wins" holds.
     cosani-plm.css -> apple-typography.css -> cosani-2.css
       -> cosani-design-system.css -> cosani-color-system.css

   TO REVERT: delete the <link> to this file and the <script> for
   js/42-ui-color.js from cosani-plm-prototype.html. Nothing else in the
   repo depends on this layer; every click handler is untouched.

   THE FOUR RULES THIS FILE ENFORCES
   ---------------------------------
   1. Colour encodes meaning, never decorates. Product category, order stage,
      lifecycle state and alert severity earn a hue. Chrome, borders, canvas
      and body text do not.
   2. Saturated small, tinted large. An 8px dot or a 3px spine may be fully
      saturated; a card-sized surface carrying the same meaning gets a 7%
      tint of it. This one rule is the whole difference between "colourful"
      and "cheesy".
   3. One accent per surface. A card gets ONE coloured element. The pre-30-Jul
      cheapness came from stacking a coloured border AND a tinted background
      AND coloured numerals on the same card.
   4. Neutral stays the substrate. Canvas, surfaces, tables and body copy stay
      grey/ink. Colour arrives in dots, pills, spines, icon tiles, chart
      series and active states — always against a calm background.

   CONTRAST: every -text token below was darkened until it cleared 4.5:1
   against BOTH white and its own tint. Measured, not eyeballed. For the
   record, gold #D4A843 on white is 2.21:1 — which is why gold is a stroke
   and a spine in this app and never a text colour.
   ========================================================================== */

:root{
  /* ---------------------------------------------- categorical palette (10)
     Deterministic: a category is the SAME hue on every page, forever.
     -tint is for fills, -text is for type on white or on that tint,
     the bare token is the saturated dot / spine / chart series colour.     */
  --cc-indigo:#3538CD; --cc-indigo-tint:#F1F1FB; --cc-indigo-text:#3538CD;
  --cc-teal:#0E7090;   --cc-teal-tint:#EEF5F7;   --cc-teal-text:#0E7090;
  --cc-violet:#6941C6; --cc-violet-tint:#F4F2FB; --cc-violet-text:#6941C6;
  --cc-copper:#9A3412; --cc-copper-tint:#F8F1EE; --cc-copper-text:#9A3412;
  --cc-green:#067647;  --cc-green-tint:#EEF5F2;  --cc-green-text:#067647;
  --cc-sky:#0086C9;    --cc-sky-tint:#EDF7FB;    --cc-sky-text:#0076B1;
  --cc-rose:#C11574;   --cc-rose-tint:#FBEFF5;   --cc-rose-text:#C11574;
  --cc-olive:#4F7A21;  --cc-olive-tint:#F3F6EF;  --cc-olive-text:#4F7A21;
  --cc-cyan:#0E9384;   --cc-cyan-tint:#EEF7F6;   --cc-cyan-text:#0C7E72;
  --cc-slate:#5A6478;  --cc-slate-tint:#F3F4F6;  --cc-slate-text:#5A6478;

  /* default channel — elements pick a hue by setting these three vars */
  --cc:var(--cc-slate);
  --cc-tint:var(--cc-slate-tint);
  --cc-text:var(--cc-slate-text);

  --cc-dot:8px;
  --cc-spine:3px;

  /* ------------------------------------------------ CONTRAST CORRECTION
     The 30-Jul pass set --cds-faint to #9AA1AC, which measures 2.60:1 on
     white. That token drives every table header, every uppercase micro
     label and every stat-card caption in the app, so the smallest type in
     the product was also the lowest contrast in the product — and GC has
     told us the team includes older users with vision problems. Both
     greys are re-pointed here to values that clear 4.5:1 while keeping a
     visible two-step hierarchy between them.

     Both are measured against the WORST background they actually land on,
     not just white. #6B7280 clears 4.5:1 on white (4.83) but drops to 4.31
     on the tinted alternate table row #F0F2F5 — and table rows are exactly
     where this token is used most. #626B7B clears every surface:
        muted #5A6478  5.95 white / 5.55 canvas / 5.31 alt row
        faint #626B7B  5.37 white / 5.01 canvas / 4.79 alt row
     Nothing gets bigger — only darker. Base font sizes are untouched. */
  --cds-muted:#5A6478;
  --cds-faint:#626B7B;
  --muted:#5A6478;
}

/* Category -> hue. Set on any element as data-cc="suits" etc.
   js/42-ui-color.js assigns these from the category name so the mapping
   lives in exactly one place and cannot drift between pages. */
[data-cc="suits"]      {--cc:var(--cc-indigo);--cc-tint:var(--cc-indigo-tint);--cc-text:var(--cc-indigo-text)}
[data-cc="sportcoats"] {--cc:var(--cc-teal);  --cc-tint:var(--cc-teal-tint);  --cc-text:var(--cc-teal-text)}
[data-cc="tuxedos"]    {--cc:var(--cc-violet);--cc-tint:var(--cc-violet-tint);--cc-text:var(--cc-violet-text)}
[data-cc="pants"]      {--cc:var(--cc-copper);--cc-tint:var(--cc-copper-tint);--cc-text:var(--cc-copper-text)}
[data-cc="outerwear"]  {--cc:var(--cc-green); --cc-tint:var(--cc-green-tint); --cc-text:var(--cc-green-text)}
[data-cc="shirts"]     {--cc:var(--cc-sky);   --cc-tint:var(--cc-sky-tint);   --cc-text:var(--cc-sky-text)}
[data-cc="sweaters"]   {--cc:var(--cc-rose);  --cc-tint:var(--cc-rose-tint);  --cc-text:var(--cc-rose-text)}
[data-cc="accessories"]{--cc:var(--cc-olive); --cc-tint:var(--cc-olive-tint); --cc-text:var(--cc-olive-text)}
[data-cc="hosiery"]    {--cc:var(--cc-cyan);  --cc-tint:var(--cc-cyan-tint);  --cc-text:var(--cc-cyan-text)}
[data-cc="other"]      {--cc:var(--cc-slate); --cc-tint:var(--cc-slate-tint); --cc-text:var(--cc-slate-text)}
/* "All" is the reset, not a category, so it takes the app's own navy. It is
   also the chip that is selected most of the time — GC's complaint 5 was
   that the active state was too quiet, and a slate-on-slate "All" was the
   quietest possible version of it. */
[data-cc="all"]        {--cc:#1B2A4A; --cc-tint:#EEF0F4; --cc-text:#1B2A4A}

/* ==========================================================================
   1 · CATEGORY CHIP ROW   — the thing GC screenshotted and called ugly
   --------------------------------------------------------------------------
   Was: a full-width grey trough segmented control with NINE segments, two
   stacked unlabelled numbers per segment, content-sized ragged widths, an
   em-dash where a number belonged, and a barely-visible active state — with
   a SECOND row of year pills stacked underneath it.

   Seven separate problems, all fixed here:
     1. A segmented control is for 2-5 exclusive options. At nine it is a
        grey slab. It is now a wrapping chip row, no trough.
     2. Product category is the most naturally categorical dimension in the
        app, so each chip carries its assigned hue as a dot.
     3. One number per chip (orders), consistently labelled by the caption
        underneath; units move to the hover tooltip.
     4. Consistent internal padding, so chips align on a grid.
     5. Active chip = tinted fill + full-strength border + solid dot. Reads
        from across the room.
     6. The year row is visually subordinated to the category row.
     7. Shorter and lighter, so the table starts higher up the page.
   ========================================================================== */

.style-tabs{
  display:flex; flex-wrap:wrap; gap:7px;
  background:none !important;      /* kill the grey trough */
  border:0 !important;
  border-radius:0 !important;
  padding:0 0 13px !important;
  margin:0 0 13px !important;
  box-shadow:none !important;
  border-bottom:1px solid var(--cds-line) !important;
  align-items:stretch;
}

.style-tabs .style-tab{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  min-height:34px;
  padding:0 13px 0 11px !important;   /* consistent internal padding */
  margin:0 !important;
  background:var(--cds-surface) !important;
  border:1px solid var(--cds-line) !important;
  border-radius:999px !important;
  box-shadow:none !important;
  font-size:13px; font-weight:500; line-height:1;
  color:var(--cds-ink-2) !important;
  cursor:pointer;
  white-space:nowrap;
  transition:background .13s ease, border-color .13s ease, color .13s ease;
}

/* the dot — saturated, small, and the only colour on an inactive chip */
.style-tabs .style-tab::before{
  content:""; flex:0 0 auto;
  width:var(--cc-dot); height:var(--cc-dot); border-radius:50%;
  background:var(--cc);
  opacity:.5;
  transition:opacity .13s ease, box-shadow .13s ease;
}

.style-tabs .style-tab:hover{
  background:var(--cds-canvas) !important;
  border-color:#D7DBE2 !important;
  color:var(--cds-ink) !important;
}
.style-tabs .style-tab:hover::before{opacity:.85}

/* ACTIVE — tinted fill, a full-strength 1.5px hue border, a solid dot with a
   halo, and a soft ring. Four cues, because complaint 5 was that one weak
   cue (a white pill on grey) was invisible at a glance. */
.style-tabs .style-tab.active{
  background:var(--cc-tint) !important;
  border:1.5px solid var(--cc) !important;
  color:var(--cc-text) !important;
  font-weight:600;
  padding:0 12px 0 10px !important;   /* keep the box the same size as 1px kin */
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cc) 10%, transparent) !important;
}
.style-tabs .style-tab.active::before{
  opacity:1;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cc) 18%, transparent);
}

/* count badge inside the chip */
.style-tabs .style-tab .badge{
  background:var(--cds-line-soft) !important;
  color:var(--cds-ink-2) !important;
  border:0 !important;
  border-radius:999px !important;
  padding:2px 7px !important;
  margin-left:2px;
  font-size:11.5px !important;
  font-weight:600 !important;
  font-variant-numeric:tabular-nums;
  min-width:20px; text-align:center;
  box-shadow:none !important;
}
.style-tabs .style-tab.active .badge{
  background:var(--cc) !important;
  color:#fff !important;
}

/* the units span is folded into the tooltip by 42-ui-color.js */
.style-tabs .style-tab .cc-units{display:none !important}

/* caption that finally says what the numbers ARE */
.cc-rowcap{
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  margin:-6px 0 12px;
  font-size:11.5px; color:var(--cds-faint);
  letter-spacing:.01em;
}
.cc-rowcap b{font-weight:600; color:var(--cds-muted)}

/* ------ year row: subordinate to the category row, not a peer ------------ */
.cc-yearrow{display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:0 0 14px}
.cc-yearrow .btn,
.cc-yearrow .btn.gold{
  min-height:27px !important;
  padding:0 10px !important;
  font-size:12px !important;
  font-weight:500 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:var(--cds-muted) !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  letter-spacing:0 !important;
}
.cc-yearrow .btn:hover{background:var(--cds-line-soft) !important; color:var(--cds-ink) !important}
.cc-yearrow .btn.cc-year-on{
  background:var(--cds-navy) !important;
  color:#fff !important;
  border-color:var(--cds-navy) !important;
  font-weight:600 !important;
}
.cc-yearlbl{
  font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--cds-faint); margin-right:4px;
}

/* ==========================================================================
   2 · BUTTON HIERARCHY   — "more understanding of buttons and placements"
   --------------------------------------------------------------------------
   Rules enforced:
     · ONE primary per view, and it sits where the left-to-right scan ends —
       top-right of the page header. Never two navy primaries in a row.
     · Secondary = white + hairline border.  Tertiary = text only.
     · Destructive = red, and only ever secondary/ghost until confirmed.
     · Buttons that NAVIGATE must not look like buttons that MUTATE.
   js/42-ui-color.js demotes extra primaries and re-orders headers; this
   section is what the resulting classes look like.
   ========================================================================== */

.btn{
  border-radius:9px;
  font-weight:500;
  letter-spacing:-.005em;
  transition:background .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease;
}
.btn:focus-visible{
  outline:2px solid var(--cds-navy);
  outline-offset:2px;
}

/* PRIMARY — navy, solid. One per view. */
.btn.cc-primary,
.btn.primary{
  background:var(--cds-navy) !important;
  border:1px solid var(--cds-navy) !important;
  color:#fff !important;
  font-weight:600 !important;
  box-shadow:0 1px 2px rgba(11,15,25,.10) !important;
}
.btn.cc-primary:hover,
.btn.primary:hover{background:var(--cds-navy-hover) !important; border-color:var(--cds-navy-hover) !important}

/* SECONDARY — white, hairline. The default for everything else. */
.btn.cc-secondary{
  background:var(--cds-surface) !important;
  border:1px solid var(--cds-line) !important;
  color:var(--cds-ink-2) !important;
  font-weight:500 !important;
  box-shadow:none !important;
}
.btn.cc-secondary:hover{
  background:var(--cds-canvas) !important;
  border-color:#D7DBE2 !important;
  color:var(--cds-ink) !important;
}

/* GHOST / TERTIARY — text only. For anything that just navigates. */
.btn.cc-ghost{
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--cds-ink-2) !important;
  font-weight:500 !important;
  box-shadow:none !important;
}
.btn.cc-ghost:hover{background:var(--cds-line-soft) !important; color:var(--cds-ink) !important}

/* DESTRUCTIVE — red, but restrained until it is confirmed. */
.btn.cc-danger{
  background:var(--cds-surface) !important;
  border:1px solid #F0C3BE !important;
  color:var(--cds-danger) !important;
  font-weight:500 !important;
  box-shadow:none !important;
}
.btn.cc-danger:hover{background:var(--cds-danger-bg) !important; border-color:#E4A59E !important}
.btn.cc-danger.cc-confirm{
  background:var(--cds-danger) !important;
  border-color:var(--cds-danger) !important;
  color:#fff !important;
}

/* The legacy ".btn.gold" is a *stroke* colour, never a gold fill with gold
   text. Outside the year row it resolves to a normal secondary. */
.btn.gold:not(.cc-year-on):not(.cc-primary){
  background:var(--cds-surface) !important;
  border:1px solid var(--cds-line) !important;
  color:var(--cds-ink-2) !important;
}
.btn.gold:not(.cc-year-on):not(.cc-primary):hover{
  background:var(--cds-canvas) !important; border-color:#D7DBE2 !important;
}

/* EXCEPTION — the auth gate. Sign in and Save password are .btn.gold and are
   the ONLY action on their screen, so the rule above was demoting the one
   true primary in the app to a white outline. One primary per view means
   this one IS the primary. */
#authgate .btn, .authgate .btn,
button[onclick^="authGateSignIn"],
button[onclick^="authGateSetPassword"]{
  background:var(--cds-navy) !important;
  border:1px solid var(--cds-navy) !important;
  color:#fff !important;
  font-weight:600 !important;
  box-shadow:0 1px 2px rgba(11,15,25,.10) !important;
}
#authgate .btn:hover, .authgate .btn:hover,
button[onclick^="authGateSignIn"]:hover,
button[onclick^="authGateSetPassword"]:hover{
  background:var(--cds-navy-hover) !important; border-color:var(--cds-navy-hover) !important;
}

/* ---- placement: page title top-left, primary action opposite it --------- */
.pagehead{
  display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
}
.pagehead .cc-actions{
  margin-left:auto;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  justify-content:flex-end;
}
/* the primary always goes last in the DOM order of the action group */
.pagehead .cc-actions .btn.cc-primary{order:99}

/* overflow menu for demoted actions */
.cc-more{position:relative; display:inline-flex}
.cc-more-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:60;
  min-width:210px; padding:6px;
  background:var(--cds-surface);
  border:1px solid var(--cds-line);
  border-radius:var(--cds-r-md);
  box-shadow:var(--cds-shadow-hover);
  display:none;
}
.cc-more.open .cc-more-menu{display:block}
.cc-more-menu button{
  display:block; width:100%; text-align:left;
  padding:8px 10px; border:0; background:none;
  font:inherit; font-size:13px; color:var(--cds-ink-2);
  border-radius:7px; cursor:pointer;
}
.cc-more-menu button:hover{background:var(--cds-line-soft); color:var(--cds-ink)}

/* ---- row actions: right-aligned, dimmed until the row is hovered -------- */
tbody tr .cc-rowact{opacity:.35; transition:opacity .12s ease}
tbody tr:hover .cc-rowact,
tbody tr:focus-within .cc-rowact{opacity:1}

/* ---- filters live ABOVE tables, pagination BOTTOM-right ---------------- */
.cc-filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  margin:0 0 14px;
}
.cc-pager{display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:14px}

/* ==========================================================================
   3 · STATUS + SEMANTIC PILLS
   --------------------------------------------------------------------------
   Saturated text on a 7% tint of the same hue — the small-size half of rule 2.
   THE GOLD FIX: every amber pill in the app was gold text on a light gold
   wash (~3.4:1, and against GC's standing rule). They are now dark amber
   #B54708 at 4.9:1. Gold survives as strokes and spines only.
   ========================================================================== */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  border-radius:999px;
  font-size:11.5px; font-weight:600; line-height:1.45;
  padding:2px 9px;
  letter-spacing:0;
  border:1px solid transparent;
}
.pill.p-grey  {background:var(--cds-line-soft); color:var(--cds-ink-2)}
.pill.p-green {background:var(--cds-ok-bg);     color:var(--cds-ok)}
.pill.p-red   {background:var(--cds-danger-bg); color:var(--cds-danger)}
.pill.p-blue  {background:var(--cds-info-bg);   color:var(--cds-info)}
.pill.p-purple{background:var(--cds-purple-bg); color:var(--cds-purple)}
/* was gold-on-gold at 3.4:1 — now 4.9:1 */
.pill.p-amber,
.pill.p-gold,
.pill.p-yellow{background:var(--cds-warn-bg) !important; color:var(--cds-warn) !important}

/* status dot variant — fully saturated because it is 8px */
.cc-dot{
  display:inline-block; width:var(--cc-dot); height:var(--cc-dot);
  border-radius:50%; background:var(--cc); flex:0 0 auto;
}

/* ---- ORDER STAGE: one hue per lifecycle step, same everywhere ---------- */
/* !important and the attribute selector are BOTH load-bearing here. These
   badges arrive already carrying .pill.p-grey (specificity 0,0,2,0) or a
   saturated inline fill from the page module. Without the bump, the old
   background survives while the new text colour applies — which renders
   dark-blue-on-blue and is worse than what we started with. Measured, not
   assumed: this exact combination shipped broken in testing. */
.cc-stage,
.cc-stage[data-stage]{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 9px 2px 7px; border-radius:999px;
  font-size:11.5px; font-weight:600;
  background:var(--cc-tint) !important;
  color:var(--cc-text) !important;
  border-color:transparent !important;
}
.cc-stage::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--cc);
  flex:0 0 auto;
}
.cc-stage[data-stage="ordered"]      {--cc:#5A6478;--cc-tint:#F3F4F6;--cc-text:#48505F}
.cc-stage[data-stage="development"]  {--cc:#6941C6;--cc-tint:#F4F2FB;--cc-text:#5B34B0}
.cc-stage[data-stage="production"]   {--cc:#B54708;--cc-tint:#FFFAEB;--cc-text:#B54708}
.cc-stage[data-stage="transit"]      {--cc:#175CD3;--cc-tint:#EFF6FF;--cc-text:#175CD3}
.cc-stage[data-stage="delivered"]    {--cc:#067647;--cc-tint:#ECFDF3;--cc-text:#067647}
.cc-stage[data-stage="cancelled"]    {--cc:#B42318;--cc-tint:#FEF3F2;--cc-text:#B42318}

/* Legacy inline-styled stage badges on the Orders table: strip whatever
   gold-on-light they were given and re-tint from the stage hue. */
.cc-stage[style]{background:var(--cc-tint) !important; color:var(--cc-text) !important}

/* ==========================================================================
   4 · STAT CARDS — one accent per card, and only one
   --------------------------------------------------------------------------
   The pre-30-Jul cheapness was a coloured spine AND a tinted background AND
   coloured numerals on the same card. Here the spine is the single accent;
   the surface stays white and the numeral stays ink. The ONLY exception is
   a card whose value is an alert (overdue, issues) — there the numeral takes
   the hue and the spine stays, because the number IS the warning.
   ========================================================================== */
.cc-stat{
  position:relative; background:var(--cds-surface);
  border:1px solid var(--cds-line); border-radius:var(--cds-r-md);
  padding:15px 16px 14px 18px; overflow:hidden;
  box-shadow:var(--cds-shadow);
}
.cc-stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:var(--cc-spine); background:var(--cc);
}
.cc-stat .v{
  font-size:27px; font-weight:600; line-height:1.05;
  color:var(--cds-ink); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.cc-stat .l{
  margin-top:5px; font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--cds-faint);
}
.cc-stat .d{margin-top:6px; font-size:12px; color:var(--cds-muted)}
.cc-stat.cc-alert .v{color:var(--cc-text)}   /* the number IS the warning */

/* Apply the spine to the stat cards the app already renders, without
   touching their markup. Existing kpi/stat blocks get a hue channel from
   js/42-ui-color.js via data-cc / data-stage. */
.ov-kpi,.kpi,.statcard,.stat-card{position:relative; overflow:hidden}
.ov-kpi[data-cc]::before,
.kpi[data-cc]::before,
.statcard[data-cc]::before,
.stat-card[data-cc]::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:var(--cc-spine); background:var(--cc); border-radius:var(--cc-spine) 0 0 var(--cc-spine);
}
.ov-kpi[data-cc],.kpi[data-cc],.statcard[data-cc],.stat-card[data-cc]{padding-left:18px}

/* ==========================================================================
   5 · TABLES
   ========================================================================== */
thead th{
  font-size:10.5px !important; font-weight:600 !important;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--cds-faint) !important;
  background:var(--cds-surface) !important;
  border-bottom:1px solid var(--cds-line) !important;
}
tbody tr{transition:background .1s ease}
tbody tr:hover{background:var(--cds-line-soft) !important}
td{border-bottom:1px solid var(--cds-line-soft)}
.cc-num,td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* Hard-coded #8A93A3 (3.10:1 on white, 2.76:1 on a tinted row) survived the
   token re-point in three places the audit caught:
     · rank numerals in the Overview leaderboards
     · header cells written as <th> inside <tbody>, so `thead th` missed them
   Both now use the corrected faint token. */
.ov-row .n,.ov-rank .n,.n{color:var(--cds-faint)}
.ov-tbl th,tbody th{color:var(--cds-faint) !important}

/* Gold disclosure carets. Same call as the inline gold above: an affordance
   the user has to see cannot sit at 2.21:1. Gold stays on the spine and the
   underline, not on the arrow. */
.arrival-caret,.caret,.disclosure,[class*="-caret"]{color:var(--cds-muted) !important}

/* Cut links: navy bold with a gold underline. GC's standing rule — the one
   place gold touches type, and it is the UNDERLINE, not the letterforms. */
a.cutlink,.cutlink,a.cut-link{
  color:var(--cds-navy) !important; font-weight:600 !important;
  text-decoration:none !important;
  border-bottom:2px solid var(--cds-gold) !important;
  padding-bottom:1px;
}
a.cutlink:hover,.cutlink:hover{border-bottom-color:var(--cds-navy) !important}

/* ==========================================================================
   6 · GOLD-ON-LIGHT SWEEP
   --------------------------------------------------------------------------
   A blanket correction for the legacy rules that set gold TEXT on a light
   background. Gold stays legal as a border, a spine, an SVG stroke and a
   chart series — those are matched by the exceptions below.
   ========================================================================== */
.gold-text,.txt-gold,.text-gold,
.link-gold,a.gold,
.ov-note .gold,.sub .gold{
  color:var(--cds-warn) !important;
}
/* gold washes behind text go neutral so nothing sits on a yellow field */
.goldbg,.gold-bg,.bg-gold{background:var(--cds-line-soft) !important; color:var(--cds-ink-2) !important}

/* INLINE gold. Several modules write style="color:var(--gold)" straight onto
   an element — the Buyer Overview folder disclosure triangles are seven of
   them — and an inline declaration beats any normal rule, so the token
   re-point alone could not reach these. #D4A843 on white measures 2.21:1.
   Matching the literal attribute text lets !important win over the inline
   style. Scoped to #main so the gold wordmark on the navy header, which is
   gold on DARK and perfectly legal, is untouched. */
#main [style*="color:var(--gold)"],
#main [style*="color: var(--gold)"],
#main [style*="color:#D4A843"],
#main [style*="color:#d4a843"]{
  color:var(--cds-muted) !important;
}
/* ...but a gold BORDER, underline or fill stays gold — that is the approved
   use and these rules must not catch it. */
#main [style*="border-color:var(--gold)"],
#main [style*="background:var(--gold)"]{color:inherit}

/* ==========================================================================
   7 · COSANI OVERVIEW — chart chrome
   --------------------------------------------------------------------------
   Label collisions are solved in js/34-overview.js by removing the persistent
   line labels and moving units into a real hover tooltip. This section styles
   that tooltip and the two-chart stack.
   ========================================================================== */
.ov-chartwrap{position:relative}
.ov-hit{fill:transparent; cursor:pointer}
.ov-hit:hover{fill:rgba(27,42,74,.045)}

.ov-tip{
  position:absolute; z-index:40; pointer-events:none;
  min-width:186px; padding:10px 12px;
  background:#0B0F19; color:#fff;
  border-radius:10px;
  box-shadow:0 10px 26px -6px rgba(11,15,25,.34);
  font-size:12px; line-height:1.5;
  opacity:0; transform:translateY(3px);
  transition:opacity .1s ease, transform .1s ease;
}
.ov-tip.on{opacity:1; transform:translateY(0)}
.ov-tip .y{font-size:13px; font-weight:600; letter-spacing:-.01em; margin-bottom:5px}
.ov-tip .r{display:flex; align-items:center; gap:7px; justify-content:space-between; white-space:nowrap}
.ov-tip .r span:first-child{display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.72)}
.ov-tip .r b{font-weight:600; font-variant-numeric:tabular-nums}
.ov-tip i{width:8px; height:8px; border-radius:2px; display:inline-block; flex:0 0 auto}
.ov-tip .gap{
  margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.16);
  color:#F5C86B; font-size:11.5px;   /* dark surface — gold is legal here */
}

/* legend: wraps instead of clipping */
.ov-legend{
  display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center;
  max-width:100%; overflow:visible; white-space:normal;
}
.ov-lg{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:11.5px; color:var(--cds-muted);
}
.ov-sw{width:10px; height:10px; border-radius:3px; display:inline-block; flex:0 0 auto}
.ov-sw.ln{height:3px; width:16px; border-radius:2px}
.ov-sw.dash{background:none !important; border:1.5px dashed var(--cds-navy)}

.ov-head{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap}
.ov-head .ov-legend{margin-left:auto}

/* the money chart sits under the volume chart on a shared x-axis */
.ov-stack{display:block}
.ov-stack .ov-sep{
  height:1px; background:var(--cds-line); margin:4px 0 0;
}
.ov-subhead{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:16px 0 2px;
}
.ov-subhead h4{
  margin:0; font-size:13px; font-weight:600; color:var(--cds-ink);
  letter-spacing:-.012em;
}
.ov-subhead .ov-note{margin:0; font-size:11.5px; color:var(--cds-faint)}

.ov-coverage{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--cds-line-soft);
  font-size:11.5px; color:var(--cds-faint);
}
.ov-flag{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:999px;
  background:var(--cds-warn-bg); color:var(--cds-warn); font-weight:600;
}
.ov-locked{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 9px; border-radius:999px;
  background:var(--cds-line-soft); color:var(--cds-muted); font-weight:600; font-size:11px;
}

/* ==========================================================================
   8 · DASHBOARD  — GC: "I still don't like the dashboard"
   --------------------------------------------------------------------------
   The 30-Jul pass left it flat: four identical white cards with grey labels
   and no read on severity. Priority is the information here, so priority is
   what gets the colour — the action queue is graded immediate / this week /
   upcoming, and only the immediate band is red.
   ========================================================================== */
.cc-dash-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}

/* action queue: a hue-coded spine per urgency band, one accent per row */
.cc-q{border-left:var(--cc-spine) solid var(--cc); padding-left:13px}
.cc-q[data-band="immediate"]{--cc:var(--cds-danger)}
.cc-q[data-band="week"]     {--cc:var(--cds-warn)}
.cc-q[data-band="upcoming"] {--cc:var(--cds-info)}
.cc-q[data-band="clear"]    {--cc:var(--cds-ok)}

.cc-band{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
}
.cc-band::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--cc)}
.cc-band[data-band="immediate"]{--cc:var(--cds-danger); color:var(--cds-danger)}
.cc-band[data-band="week"]     {--cc:var(--cds-warn);   color:var(--cds-warn)}
.cc-band[data-band="upcoming"] {--cc:var(--cds-info);   color:var(--cds-info)}

/* ---- 45 navy buttons is not a hierarchy -------------------------------
   The Action Center renders one "Open shipment tracking" per alert — 45 of
   them on a normal day, every one a solid navy fill identical to the page's
   real primary (+ New Order). That is the "five actions all look equally
   important" problem at scale, and it also breaks the rule that a button
   which NAVIGATES must not look like one that MUTATES. These navigate, so
   they become secondary and the page keeps exactly one primary. */
.cds-alert-act .btn,
.cds-alert-act button{
  background:var(--cds-surface) !important;
  border:1px solid var(--cds-line) !important;
  color:var(--cds-ink-2) !important;
  font-weight:500 !important;
  box-shadow:none !important;
}
.cds-alert-act .btn:hover,
.cds-alert-act button:hover{
  background:var(--cds-canvas) !important;
  border-color:#D7DBE2 !important;
  color:var(--cds-ink) !important;
}
/* "Dismiss" is a throwaway — it should not even be a box */
.cds-alert-act .btn + .btn,
.cds-alert-act button + button{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--cds-muted) !important;
}

/* ---- Action Center bands: the same segmented slab, now urgency-coded ---
   Four items is a legitimate segmented control, so this keeps the shape but
   drops the grey trough and gives each band its severity hue as a dot. */
.cds-seg{
  display:flex; flex-wrap:wrap; gap:7px;
  background:none !important; border:0 !important; padding:0 !important;
  border-radius:0 !important; box-shadow:none !important;
}
.cds-seg > *{
  display:inline-flex; align-items:center; gap:7px;
  min-height:32px; padding:0 12px 0 10px !important;
  background:var(--cds-surface) !important;
  border:1px solid var(--cds-line) !important;
  border-radius:999px !important;
  font-size:13px; font-weight:500; color:var(--cds-ink-2) !important;
  cursor:pointer; white-space:nowrap; box-shadow:none !important;
}
.cds-seg > *::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--cc,#5A6478); opacity:.5; flex:0 0 auto;
}
.cds-seg > *:nth-child(1){--cc:#1B2A4A}
.cds-seg > *:nth-child(2){--cc:var(--cds-danger)}
.cds-seg > *:nth-child(3){--cc:var(--cds-warn)}
.cds-seg > *:nth-child(4){--cc:var(--cds-info)}
.cds-seg > *:hover{background:var(--cds-canvas) !important; color:var(--cds-ink) !important}
.cds-seg > *.on{
  background:color-mix(in srgb, var(--cc) 8%, #fff) !important;
  border:1.5px solid var(--cc) !important;
  color:var(--cds-ink) !important;
  font-weight:600 !important;
  padding:0 11px 0 9px !important;
}
.cds-seg > *.on::before{opacity:1; box-shadow:0 0 0 3px color-mix(in srgb, var(--cc) 18%, transparent)}
.cds-seg .badge{
  background:var(--cds-line-soft) !important; color:var(--cds-ink-2) !important;
  border:0 !important; border-radius:999px !important; padding:2px 7px !important;
  font-size:11.5px !important; font-weight:600 !important; font-variant-numeric:tabular-nums;
}
.cds-seg > *.on .badge{background:var(--cc) !important; color:#fff !important}

/* small square icon tile — a tinted plate, never a saturated block */
.cc-tile{
  width:30px; height:30px; border-radius:8px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cc-tint); color:var(--cc-text);
  font-size:14px; line-height:1;
}

/* ==========================================================================
   9 · T&A CALENDAR — GC: "the T&A Calendar etc."
   --------------------------------------------------------------------------
   Was: loud all-caps saturated SHIPMENTS / DELIVERIES badges shouting at the
   same volume as the genuinely urgent "84d LATE". Lateness is the signal on
   this page; the record type is only a filter. So the type badge becomes a
   quiet tinted chip and red is reserved for how late something actually is.
   ========================================================================== */
/* Same specificity trap as .cc-stage — these ship with a saturated fill and
   white text, so the fill must be overridden with the text or the chip goes
   dark-on-dark. */
.cc-type,
.cc-type[data-type]{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 9px 2px 7px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
  text-transform:none;
  background:var(--cc-tint) !important;
  color:var(--cc-text) !important;
  border-color:transparent !important;
  min-width:0; width:auto !important;
}
.cc-type::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cc); flex:0 0 auto}
.cc-type[data-type="shipments"] {--cc:var(--cc-sky);   --cc-tint:var(--cc-sky-tint);   --cc-text:var(--cc-sky-text)}
.cc-type[data-type="deliveries"]{--cc:var(--cc-green); --cc-tint:var(--cc-green-tint); --cc-text:var(--cc-green-text)}
.cc-type[data-type="samples"]   {--cc:var(--cc-violet);--cc-tint:var(--cc-violet-tint);--cc-text:var(--cc-violet-text)}
.cc-type[data-type="inspection"]{--cc:var(--cc-olive); --cc-tint:var(--cc-olive-tint); --cc-text:var(--cc-olive-text)}

/* lateness scale — the one thing on this page that earns red */
.cc-late{font-weight:600; font-variant-numeric:tabular-nums}
.cc-late[data-sev="3"]{color:var(--cds-danger)}
.cc-late[data-sev="2"]{color:var(--cds-warn)}
.cc-late[data-sev="1"]{color:var(--cds-ink-2)}
.cc-late[data-sev="0"]{color:var(--cds-muted)}

.cc-section{
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cds-faint); margin:22px 0 9px;
}
.cc-section::after{content:""; flex:1; height:1px; background:var(--cds-line)}
.cc-section[data-band="immediate"]{color:var(--cds-danger)}

/* ==========================================================================
   10 · MISC POLISH
   ========================================================================== */
/* native selects stop looking like OS widgets */
select{
  appearance:none; -webkit-appearance:none;
  background-color:var(--cds-surface);
  background-image:linear-gradient(45deg,transparent 50%,var(--cds-muted) 50%),
                   linear-gradient(135deg,var(--cds-muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 51%, calc(100% - 11px) 51%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  border:1px solid var(--cds-line);
  border-radius:9px;
  padding:8px 32px 8px 11px;
  font:inherit; font-size:13px; color:var(--cds-ink-2);
  min-height:36px;
}
select:focus{outline:2px solid var(--cds-navy); outline-offset:1px}

input[type="text"],input[type="search"],input:not([type]){
  border:1px solid var(--cds-line); border-radius:9px;
  padding:8px 11px; font:inherit; font-size:13px; min-height:36px;
  background:var(--cds-surface); color:var(--cds-ink);
}
input[type="text"]:focus,input[type="search"]:focus{
  outline:2px solid var(--cds-navy); outline-offset:1px; border-color:transparent;
}

.cc-flabel{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--cds-faint); margin-bottom:5px;
}

/* colour swatch chips in the Style Library */
.cc-sw{
  width:13px; height:13px; border-radius:3px; display:inline-block;
  border:1px solid rgba(11,15,25,.14);
}

/* honest empty states */
.cc-empty{
  padding:22px; border:1px dashed var(--cds-line); border-radius:var(--cds-r-md);
  background:var(--cds-canvas); color:var(--cds-muted); font-size:13px;
}
.cc-empty b{color:var(--cds-ink); font-weight:600}

@media (max-width:900px){
  .pagehead .cc-actions{width:100%; justify-content:flex-start; margin-left:0}
  .style-tabs{gap:6px}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .btn,.style-tab,.ov-tip,tbody tr{transition:none !important}
}


/* ============================================================
   Category chips v3 + stage-coloured KPI spines  (2026-08-03)
   Fixes: units were hidden behind hover; the per-category dot
   was an arbitrary hue sitting as a column flex item (hence the
   misalignment); the five stage KPIs all shared one navy spine.
   ============================================================ */

.style-tabs .style-tab::before{ display:none !important; }

.style-tabs .style-tab{
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  padding:7px 14px;
  border-radius:10px;
  line-height:1.3;
}

.style-tabs .style-tab > span:first-of-type{
  font-size:13px;
  font-weight:500;
  letter-spacing:-.006em;
  white-space:nowrap;
}

.style-tabs .style-tab .badge{
  background:none !important;
  padding:0 !important;
  margin-left:5px;
  min-width:0 !important;
  font-size:13px;
  font-weight:500;
  color:inherit !important;
  font-variant-numeric:tabular-nums;
}
.style-tabs .style-tab .badge[data-n]::after{
  content:" orders";
  font-weight:400;
  font-size:11px;
  opacity:.6;
}

.style-tabs .style-tab .cc-units{
  display:block !important;
  font-size:11px;
  font-weight:400;
  white-space:nowrap;
  opacity:.6;
  font-variant-numeric:tabular-nums;
}

.cc-rowcap{ display:none !important; }

.uo-kpis > .uo-kpi:nth-child(1){ border-left-color:#1D5CB8 !important; }
.uo-kpis > .uo-kpi:nth-child(2){ border-left-color:#5B34B0 !important; }
.uo-kpis > .uo-kpi:nth-child(3){ border-left-color:#B54708 !important; }
.uo-kpis > .uo-kpi:nth-child(4){ border-left-color:#0E7C9B !important; }
.uo-kpis > .uo-kpi:nth-child(5){ border-left-color:#067647 !important; }

/* --- corrections: active chip + T&A urgency tiers (2026-08-03) --- */
.style-tabs .style-tab.active{
  background:#1B2A4A !important;
  border-color:#1B2A4A !important;
  color:#fff !important;
}
.style-tabs .style-tab.active .badge{
  background:none !important;
  color:#fff !important;
  box-shadow:none !important;
}
.style-tabs .style-tab.active .cc-units,
.style-tabs .style-tab.active .badge::after{
  color:#fff !important;
  opacity:.72;
}

.quickgrid > .quick:nth-child(1){ border-left-color:#B42318 !important; }
.quickgrid > .quick:nth-child(2){ border-left-color:#B54708 !important; }
.quickgrid > .quick:nth-child(3){ border-left-color:#1D5CB8 !important; }
.quickgrid > .quick:nth-child(4){ border-left-color:#8A8F98 !important; }

/* --- Category chips: tinted per category (2026-08-03) ---
   Nine near-identical dark labels are hard to scan for older users and
   anyone whose attention skips. Each chip carries its category hue as a
   light fill with same-hue dark text — a far bigger, higher-contrast
   target than the 8px dot this replaces. Every pair clears 4.5:1.
   The words stay, so colour is never the only differentiator. */

.style-tabs .style-tab[data-cc]{
  --c:#5A6478;
  background:color-mix(in srgb, var(--c) 10%, #fff) !important;
  border:1px solid color-mix(in srgb, var(--c) 30%, #fff) !important;
  color:color-mix(in srgb, var(--c) 82%, #000) !important;
  transition:background .12s ease, border-color .12s ease;
}
.style-tabs .style-tab[data-cc="all"]       { --c:#1B2A4A; }
.style-tabs .style-tab[data-cc="suits"]     { --c:#3538CD; }
.style-tabs .style-tab[data-cc="sportcoats"]{ --c:#0E7090; }
.style-tabs .style-tab[data-cc="tuxedos"]   { --c:#6941C6; }
.style-tabs .style-tab[data-cc="pants"]     { --c:#9A3412; }
.style-tabs .style-tab[data-cc="outerwear"] { --c:#067647; }
.style-tabs .style-tab[data-cc="shirts"]    { --c:#0086C9; }
.style-tabs .style-tab[data-cc="sweaters"]  { --c:#C11574; }
.style-tabs .style-tab[data-cc="other"]     { --c:#5A6478; }

.style-tabs .style-tab[data-cc]:hover{
  background:color-mix(in srgb, var(--c) 18%, #fff) !important;
  border-color:color-mix(in srgb, var(--c) 45%, #fff) !important;
}

.style-tabs .style-tab[data-cc].active{
  background:color-mix(in srgb, var(--c) 80%, #000) !important;
  border-color:color-mix(in srgb, var(--c) 80%, #000) !important;
  color:#fff !important;
}
.style-tabs .style-tab[data-cc].active .badge,
.style-tabs .style-tab[data-cc].active .cc-units{ color:#fff !important; opacity:1; }

/* keep small numerals at full contrast — hierarchy comes from size, not fade */
.style-tabs .style-tab .cc-units{ opacity:1 !important; font-size:11.5px; }
.style-tabs .style-tab .badge::after{ opacity:.62; }

/* --- Figure/ground + unified metric strip (2026-08-03) ---
   The canvas was #F6F7F9 against #FFF cards — almost no separation, so
   everything read as one flat sheet. A deeper neutral canvas lets the
   white panels sit forward. Metric rows become a single card divided by
   hairlines rather than N floating boxes, with each stage keeping its
   colour bar as the segment marker. */

body{ background:#EFF1F4 !important; }

.uo-kpis, .quickgrid{
  gap:0 !important;
  background:#fff;
  border:1px solid #E4E7EC;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(11,15,25,.04), 0 1px 3px rgba(11,15,25,.05);
  overflow:hidden;
}
.uo-kpis > .uo-kpi, .quickgrid > .quick{
  border-radius:0 !important;
  box-shadow:none !important;
  border-top:none !important;
  border-bottom:none !important;
  border-right:1px solid #E8EAEE !important;
  border-left-width:4px !important;
  border-left-style:solid !important;
}
.uo-kpis > .uo-kpi:last-child, .quickgrid > .quick:last-child{ border-right:none !important; }

.card{ border-color:#E4E7EC; }

/* --- Chip breathing room (2026-08-03) ---
   Buyer Overview pills had text sitting on the pill edge. Consistent
   internal padding for every chip row, radius tuned so the rounded end
   never clips descenders, and the count line gets its own space. */

.style-tabs .style-tab{
  padding:8px 18px 9px 16px !important;
  border-radius:12px !important;
  min-height:44px;
  line-height:1.35 !important;
}
.style-tabs .style-tab > span:first-of-type{ padding-right:2px; }
.style-tabs .style-tab .badge{ margin-left:6px; }

.style-tabs .style-tab .badge[data-n="1"]::after{ content:" order"; }

/* Others chip: its count span carries BOTH badge and cc-units classes,
   so the units display:block put it on its own line and stretched the
   pill to 69px. Restore inline for that combination. */
.style-tabs .style-tab .badge.cc-units{ display:inline !important; font-size:13px; opacity:1; }
.style-tabs .style-tab .pill.p-amber{ vertical-align:1px; margin:0 2px; }