/* ============================================================================
   CS portal — additions on top of scend-client.css
   Load AFTER scend-client.css. Never redefine its tokens here.

   Two sections:
     1. COMPAT — maps the ops-kit class names this portal's pages were originally
        written against onto the client kit's look. This exists because the pages
        were built on scend.css (.panel/.pill-bad/.skel-row) before the client kit
        was adopted, and rewriting every page's markup to .card/.pill.crit/.skel is
        churn with no visual payoff. NEW PAGES SHOULD USE THE CLIENT KIT DIRECTLY —
        .card/.card-h/.card-b, .pill.good|warn|crit|mut, .skel, .empty, .error.
        This block is a bridge, not a licence to keep inventing components.
     2. CS COMPONENTS — genuinely new things the client kit has no equivalent for
        (health score chips, the workload board, the ranked attention list).
   ========================================================================== */

/* ── 1. COMPAT with the ops-kit vocabulary ─────────────────────────────────── */

/* .panel was the ops card. The client kit's raised surface is --canvas: there is
   NO --card token here, and using one renders the panel fully transparent. */
.panel{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--card-shadow);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 18px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink)}

.wrap{max-width:1400px;margin:0 auto;padding:20px}
.tbl-wrap{overflow-x:auto}
.muted{color:var(--muted)}
.hide{display:none !important}
.num,.tnum{font-variant-numeric:tabular-nums}

/* the ops kit named these pill-*; the client kit uses pill.good|warn|crit|mut */
.pill-ok  {color:var(--good);background:var(--good-soft)}
.pill-warn{color:var(--warn);background:var(--warn-soft)}
.pill-bad {color:var(--crit);background:var(--crit-soft)}
.pill-ok,.pill-warn,.pill-bad{display:inline-block;font-size:11px;font-weight:600;
  padding:1px 8px;border-radius:6px;white-space:nowrap;margin-left:6px}

/* ops .skel-row -> client .skel, keeping the same footprint so nothing jumps */
.skel-row{height:40px;margin:9px 14px;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--skel-2),var(--skel-1),var(--skel-2));
  background-size:200% 100%;animation:cs-shimmer 1.1s linear infinite}
@keyframes cs-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel-row{animation:none}}

/* the ops kpi had explicit label/value children */
.kpi-label{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.kpi-val{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.4px;margin-top:3px}

.toplink{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:12px}
.toplink:hover{color:var(--accent)}

/* ── 2. CS COMPONENTS ──────────────────────────────────────────────────────── */

/* Filter chips. Lives HERE, not in each page's <style>, because it was already
   duplicated: tickets-queue.html defined it locally while renewals.html and
   scorecard.html used the same markup with no CSS at all and rendered as raw
   browser buttons. One definition, every page styled. */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--canvas);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:500;
  cursor:pointer;white-space:nowrap;transition:border-color var(--t-fast) var(--ease),
  color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
/* accent marks the ACTIVE filter only — DESIGN.md: one accent per screen */
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.chip.on:hover{color:var(--on-accent)}
/* the trailing count reads as secondary inside the chip, and stays legible when active */
.chip b{font-weight:700}

/* Health / score chip, 0-10 banded. Semantic colours only, per DESIGN.md — these
   encode data state, never decoration. */
.score{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;
  padding:0 8px;border-radius:var(--r-sm);font-size:12px;font-weight:600;white-space:nowrap;
  border:1px solid transparent}
.score-good{background:var(--good-soft);color:var(--good);border-color:var(--good)}
.score-ok  {background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.score-bad {background:var(--crit-soft);color:var(--crit);border-color:var(--crit)}
.score-none{background:var(--line-2);   color:var(--faint);border-color:var(--line)}

/* Direction indicators. Colour AND glyph — never colour alone, so they survive
   greyscale and colour-blind readers. */
.delta{font-size:12px;font-weight:600;white-space:nowrap}
.delta-up{color:var(--good)} .delta-down{color:var(--crit)} .delta-flat{color:var(--faint)}
.trend-growing{color:var(--good)} .trend-stable{color:var(--muted)} .trend-declining{color:var(--crit)}
.trend{font-size:12px;font-weight:600;white-space:nowrap}

/* Ranked "what do I do next" rows */
.att-row{display:flex;align-items:center;gap:12px;padding:10px 16px;
  border-bottom:1px solid var(--line-2);text-decoration:none;color:inherit;
  transition:background var(--t-fast) var(--ease)}
.att-row:last-child{border-bottom:0}
.att-row:hover{background:var(--line-2)}
.att-name{font-weight:600;font-size:13.5px;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.att-owner{font-size:12px;color:var(--faint);flex-shrink:0}
.att-flags{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.att-sev{width:3px;align-self:stretch;border-radius:2px;flex-shrink:0}
.att-sev-hi{background:var(--crit)} .att-sev-md{background:var(--warn)} .att-sev-lo{background:var(--line)}

/* Workload board. The bar is relative to the busiest person on screen, so it reads
   as "who is carrying most", not an absolute. */
.wl-row{display:grid;grid-template-columns:1.6fr repeat(4,minmax(52px,.7fr)) 1.4fr;gap:10px;
  align-items:center;padding:9px 16px;border-bottom:1px solid var(--line-2);font-size:13px}
.wl-row:last-child{border-bottom:0}
.wl-head{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);background:var(--line-2)}
.wl-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.wl-me{color:var(--accent)}
.wl-num{text-align:right;font-variant-numeric:tabular-nums}
.wl-num-warn{color:var(--crit);font-weight:600}
.wl-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.wl-bar span{display:block;height:100%;background:var(--accent);border-radius:3px}

.sub-head{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}

.dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:13px;margin:0}
.dl dt{color:var(--muted);white-space:nowrap}
.dl dd{margin:0;color:var(--ink);font-weight:500}

/* All three states designed, per DESIGN.md ② — a lone spinner is not acceptable */
.state{padding:32px 20px;text-align:center;color:var(--muted);font-size:13.5px}
.state-title{font-weight:600;color:var(--ink);margin-bottom:4px;font-size:14px}
.state-err{color:var(--crit)}

/* Data-quality warning (e.g. an account with no brand link) */
.warn-strip{display:flex;gap:8px;align-items:flex-start;padding:10px 13px;
  background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--r-sm);
  font-size:12.5px;color:var(--ink-2);line-height:1.5}

/* Parallel-run banner. One constant controls it in each page so removing it at
   cutover is a one-line change. */
.legacy-bar{display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 14px;
  background:var(--accent-soft);border-bottom:1px solid var(--accent);
  font-size:12.5px;color:var(--accent-ink)}
.legacy-bar a{color:var(--accent-ink);font-weight:600}
.legacy-bar button{margin-left:6px;background:none;border:0;cursor:pointer;
  color:var(--accent-ink);font-size:15px;line-height:1;padding:0 4px}

/* ── 3. SHELL CHROME ───────────────────────────────────────────────────────────
   _supabase.js renders the sidebar and topbar with these class names (inherited
   from the ops shell). The client kit styles .topbar but nothing else here, so
   these are defined against its tokens to match the same look: near-black rail,
   light canvas, teal accent used only for the active item.

   Uses --rail/--rail-ink/--rail-lbl from the kit, so dark mode comes free.
   ========================================================================== */

body{background:var(--bg);color:var(--ink);font-family:var(--ff);margin:0}
/* The rail/topbar markup and styles are the client kit's own (.app/.rail/.nav/.topbar/
   .content in scend-client.css). Only the pieces the Reporting header adds live here. */
.scend-app .content > .wrap{max-width:none;margin:0;padding:0}
.scend-app .rail .nav span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scend-app .rail .nav-ext{opacity:.8}
.rail-who{font-size:12px;line-height:1.3;text-align:left;min-width:0}
.rail-name{color:var(--rail-ink-strong);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-sub{color:var(--rail-lbl)}
.scend-app .topbar{flex-wrap:wrap;row-gap:8px}
.scend-hub{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 9px;font-size:12.5px;font-weight:600;text-decoration:none}
.scend-bell-badge{position:absolute;top:2px;right:2px;min-width:15px;height:15px;border-radius:8px;
  background:var(--crit);color:#fff;font:700 9px/15px var(--ff);text-align:center;padding:0 3px;display:none}
@media(max-width:860px){.scend-app .rail{display:none}.scend-app{grid-template-columns:1fr}.scend-app .content{padding-bottom:96px}}

.scend-client,select.mini-sel{font:inherit;font-size:13px;color:var(--ink);background:var(--canvas);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;cursor:pointer}
.scend-client:focus,select.mini-sel:focus{outline:none;border-color:var(--accent)}
.scend-onlyclient{font-size:13px;font-weight:600;color:var(--ink)}

.scend-fresh,.scend-fresh-t{font-size:11.5px;color:var(--faint);white-space:nowrap}
.scend-refresh{font:inherit;font-size:12px;color:var(--muted);background:var(--canvas);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px;cursor:pointer}
.scend-refresh:hover{border-color:var(--accent);color:var(--accent)}
.scend-refresh.spinning .rc{display:inline-block;animation:cs-spin .9s linear infinite}
@keyframes cs-spin{to{transform:rotate(360deg)}}

.scend-bell{position:relative;background:none;border:0;cursor:pointer;padding:6px;
  color:var(--muted);display:inline-flex;align-items:center}
.scend-bell:hover{color:var(--accent)}

.scend-rolebadge{font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;
  border:1px solid currentColor;white-space:nowrap;flex-shrink:0}

.scend-logout{font:inherit;font-size:12.5px;color:var(--muted);background:var(--canvas);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 12px;cursor:pointer;
  white-space:nowrap;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.scend-logout:hover{border-color:var(--crit);color:var(--crit)}

.scend-logo{height:20px;width:auto;display:block}

/* CSV export + pager the shell injects */
.scend-csv-wrap{display:flex;justify-content:flex-end;padding:8px 14px}
.scend-csv-btn,.scend-pager button{font:inherit;font-size:12px;color:var(--muted);
  background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:5px 11px;cursor:pointer}
.scend-csv-btn:hover,.scend-pager button:hover{border-color:var(--accent);color:var(--accent)}
.scend-pager{display:flex;align-items:center;gap:8px;justify-content:flex-end;
  padding:10px 14px;font-size:12px;color:var(--muted);border-top:1px solid var(--line-2)}
.scend-pager select{font:inherit;font-size:12px;padding:4px 8px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--canvas);color:var(--ink)}


/* ── 4. ACCOUNT PAGE POLISH ───────────────────────────────────────────────────
   The first pass put raw form controls straight onto the page background with
   ALL-CAPS labels and oversized empty inputs. It read as a form bolted to a
   report rather than one surface. This gives the header and the editors the same
   card treatment as everything else, and shrinks the controls to the size of the
   data they hold — a 0-10 score does not need a 62px box.
   ========================================================================== */

/* header block: name, meta and scores share one card */
.acc-card{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--card-shadow);padding:18px 20px;margin-bottom:14px}
.acc-head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin:0}
.acc-title{font-size:22px;font-weight:700;letter-spacing:-.4px;margin:0;text-wrap:balance}
.acc-meta{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5}
.acc-scores{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.sc-box{text-align:center;min-width:52px}

/* editor rows: labelled fields on a tinted strip inside the card, so they read as
   controls rather than as content */
.ed-strip{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ed-f{display:flex;flex-direction:column;gap:4px}
/* sentence case, not the shouty uppercase the first pass used */
.ed-f label{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.ed-f select,.ed-f input{font:inherit;font-size:13px;color:var(--ink);background:var(--canvas);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 9px;min-height:32px}
.ed-f select:focus,.ed-f input:focus{outline:none;border-color:var(--accent)}

/* health override: number + its live value on ONE line, so the comparison is
   immediate instead of split across two rows of small grey text */
.hs-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.hs-f{display:flex;flex-direction:column;gap:4px;min-width:96px}
.hs-f label{font-size:11.5px;font-weight:600;color:var(--muted)}
.hs-in{display:flex;align-items:center;gap:7px}
.hs-in input{width:46px;text-align:center;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink);background:var(--canvas);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:6px 4px}
.hs-in input:focus{outline:none;border-color:var(--accent)}
.hs-live{font-size:11.5px;color:var(--faint);white-space:nowrap}
.hs-live b{color:var(--ink-2);font-weight:600}

/* activity list: tighter rows. The first pass gave each entry ~100px of height for
   two short lines, so four items filled the viewport. */
.tl li{padding:8px 16px}
.tl-date{min-width:66px;font-size:11.5px}
.tl-title{font-size:13px}
.tl-sub{font-size:11.5px;margin-top:1px}

/* ── 5. TICKET PRIORITY + ATTACHMENTS ─────────────────────────────────────────
   Priority is 1 urgent / 2 normal / 3 low. Semantic colours only — urgent uses
   --crit because it IS a data state, not decoration. Normal is deliberately
   unstyled: if every ticket carries a coloured badge the colour stops meaning
   anything, so only the exceptions are marked.
   ========================================================================== */
.pri{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;
  padding:1px 7px;border-radius:5px;white-space:nowrap;flex-shrink:0}
.pri-1{background:var(--crit-soft);color:var(--crit)}
.pri-3{background:var(--line-2);color:var(--muted)}
.pri-2{display:none}                       /* normal is the default — say nothing */

/* attachment chips in a thread */
.att-list{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 12px}
.att-chip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;
  padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--canvas);color:var(--ink-2);cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.att-chip:hover{border-color:var(--accent);color:var(--accent)}
.att-chip:disabled{opacity:.55;cursor:progress}
.att-chip .sz{color:var(--faint);font-size:11px}

/* Linked record chip (order / parcel / PO / return on a ticket). Shares the
   attachment chip's footprint so a thread's chip rows line up, but is an <a> —
   these go to ShipHero, and this is a STAFF portal. Never render a shiphero_url in
   the client portal; v_ticket_links carries client_path for that side. */
.lk-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--canvas);color:var(--ink-2);text-decoration:none;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.lk-chip:hover{border-color:var(--accent);color:var(--accent)}
.lk-chip.staged{border-style:dashed;color:var(--muted)}
.lk-chip .lk-ic{font-size:12.5px;line-height:1}
/* the remove affordance sits OUTSIDE the anchor — nested inside, clicking it would
   follow the link to ShipHero instead of unlinking */
.lk-x{margin:0 8px 0 -4px;border:0;background:none;color:var(--faint);cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px}
.lk-x:hover{color:var(--crit)}
.att-lbl{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:0 16px 6px}
.att-count{font-size:11px;color:var(--faint);flex-shrink:0}

/* upload row on the reply box */
.up-row2{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.up-row2 input[type=file]{font:inherit;font-size:12px;color:var(--ink-2);max-width:260px}
.up-row2 input[type=file]::file-selector-button{font:inherit;font-size:12px;font-weight:600;
  margin-right:9px;padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--canvas);color:var(--ink-2);cursor:pointer}
.up-row2 input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent)}

/* Shell SITE filter (_supabase.js, PAGE_META site:true) — same look as the Finance portal:
   accented whenever it is NOT on ALL, so a one-site view is visible at a glance. */
.scend-sitewrap{display:inline-flex;align-items:center;gap:7px;margin-left:10px}
.scend-sitelbl{font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.scend-site{font-variant-numeric:tabular-nums;min-width:0}
.scend-site:not([data-all]){border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft);font-weight:650}
@media(max-width:760px){ .scend-sitelbl{display:none} }

/* Native controls follow the TOGGLE, not the OS. The kit sets color-scheme:light dark on
   html, so an unstyled select/date input rendered light-on-dark when the toggle and the OS
   disagreed. */
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
/* Older pages mark the selected filter with .active; the kit's name is .on. Same look. */
.fbtn.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.fbtn.active .c{color:inherit;opacity:.85}
/* Plain inputs and selects get the kit surface. Zero specificity (:where), so any class a
   page already puts on a control still wins. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea){
  font:inherit;color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-sm)}
:where(input,select,textarea):focus{outline:none;border-color:var(--accent)}