/* Forked from scend-client-portal/scend-client.css, fork date 2026-07-31.
 * The approved SCEND design system: teal accent, zinc neutrals, 16px cards,
 * system font, real dark mode, motion tokens. Adopted here in place of the older
 * ops scend.css so CS staff get the same product language clients see.
 * Do NOT edit this file — change it upstream in the client portal and re-fork.
 * CS-specific additions live in cs.css.
 *
 * TRAP (cost the client session a transparent panel): there is no --card token
 * here. The raised surface is --canvas. --card-shadow DOES exist, which makes the
 * absence easy to miss.
 */
/* ============================================================================
   SCEND Client Portal — shared theme & component kit
   The single source of truth for the client portal's look, feel, and states.
   Every client page links this and composes from these classes. Do NOT define
   page-local :root tokens or re-implement these components (STANDARDS + DESIGN.md).

   Base: black-and-white neutrals · SCEND Teal accent used sparingly · semantic
   colours (green/amber/red) reserved for data state. Light primary, dark supported.
   ============================================================================ */

:root{
  --bg:#F4F4F5; --canvas:#FFFFFF;
  --rail:#0B0B0C; --rail-2:#18181B; --rail-ink:#A1A1AA; --rail-ink-strong:#FFFFFF; --rail-lbl:#6B6B72;
  --ink:#111111; --ink-2:#3F3F46; --muted:#71717A; --faint:#A1A1AA;
  --line:#E4E4E7; --line-2:#F1F1F3;
  --accent:#00B5B6; --accent-ink:#0A7C7C; --accent-soft:#E3F6F6; --skel-1:#BFEAEA; --skel-2:#EAF9F9;
  --good:#12925A; --good-soft:#E4F4EC;
  --warn:#B7791F; --warn-soft:#FBF1DF;
  --crit:#D33A45; --crit-soft:#FBE8EA;
  --card-shadow:0 1px 2px rgba(9,9,11,.04), 0 6px 18px rgba(9,9,11,.06);
  --r:16px; --r-sm:10px;
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  /* motion — the sleekness knobs. Keep transitions short + consistent. */
  --t-fast:120ms; --t:170ms; --ease:cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#0A0A0B; --canvas:#151518; --rail:#000000; --rail-2:#151518; --rail-ink:#8A8A93; --rail-ink-strong:#FFF; --rail-lbl:#6B6B72;
  --ink:#F4F4F5; --ink-2:#C4C4CC; --muted:#8A8A93; --faint:#57575F; --line:#27272B; --line-2:#1C1C20;
  --accent:#22C9C9; --accent-ink:#7DE6E6; --accent-soft:#0E2E2E; --skel-1:#123433; --skel-2:#1C4645;
  --good:#3FBE84; --good-soft:#123227; --warn:#E0A64A; --warn-soft:#33280F; --crit:#F06B74; --crit-soft:#3A1B20;
  --card-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  --bg:#0A0A0B; --canvas:#151518; --rail:#000000; --rail-2:#151518; --rail-ink:#8A8A93; --rail-ink-strong:#FFF; --rail-lbl:#6B6B72;
  --ink:#F4F4F5; --ink-2:#C4C4CC; --muted:#8A8A93; --faint:#57575F; --line:#27272B; --line-2:#1C1C20;
  --accent:#22C9C9; --accent-ink:#7DE6E6; --accent-soft:#0E2E2E; --skel-1:#123433; --skel-2:#1C4645;
  --good:#3FBE84; --good-soft:#123227; --warn:#E0A64A; --warn-soft:#33280F; --crit:#F06B74; --crit-soft:#3A1B20;
  --card-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.3);
}
:root[data-theme="light"]{
  --bg:#F4F4F5; --canvas:#FFFFFF; --rail:#0B0B0C; --rail-2:#18181B; --rail-ink:#A1A1AA; --rail-lbl:#6B6B72;
  --ink:#111111; --ink-2:#3F3F46; --muted:#71717A; --faint:#A1A1AA; --line:#E4E4E7; --line-2:#F1F1F3;
  --accent:#00B5B6; --accent-ink:#0A7C7C; --accent-soft:#E3F6F6; --skel-1:#BFEAEA; --skel-2:#EAF9F9;
  --good:#12925A; --good-soft:#E4F4EC; --warn:#B7791F; --warn-soft:#FBF1DF; --crit:#D33A45; --crit-soft:#FBE8EA;
  --card-shadow:0 1px 2px rgba(9,9,11,.04), 0 6px 18px rgba(9,9,11,.06);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--accent);text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---- app shell ---- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
@media(max-width:860px){
  .app{grid-template-columns:1fr;padding-bottom:70px}
  .app .rail{display:none}
  .topbar{padding:13px 18px}
  .content{padding:22px 18px 36px}
}
.rail{background:var(--rail);color:var(--rail-ink);padding:22px 16px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 20px;color:var(--rail-ink-strong)}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff;letter-spacing:-.5px;overflow:hidden}
.brand b{font-size:16.5px;letter-spacing:-.2px;font-weight:700}
.brand .plat{font-size:9px;letter-spacing:.6px;color:var(--rail-lbl);font-weight:700;text-transform:uppercase;margin-top:1px}
.navlbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--rail-lbl);padding:16px 8px 6px;font-weight:700}
.nav{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--rail-ink);cursor:pointer;text-decoration:none;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
.nav:hover{background:rgba(255,255,255,.06);color:#fff}
.nav.on{background:var(--accent);color:#fff}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 8px;border:none;border-top:1px solid rgba(255,255,255,.08);background:transparent;width:100%;cursor:pointer;font-family:inherit;transition:background var(--t-fast) var(--ease)}
.rail-foot:hover{background:rgba(255,255,255,.05)}
.rail-foot .cog{width:16px;height:16px;stroke:var(--rail-ink);fill:none;stroke-width:1.7;margin-left:auto;flex:none}
.rail-foot:hover .cog{stroke:#fff}
.avatar{width:30px;height:30px;border-radius:50%;background:#26262B;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}

/* ---- mobile navigation ---- */
.mobile-tabs,.mobile-drawer,.mobile-drawer-backdrop{display:none}
@media(max-width:860px){
  .mobile-tabs{position:fixed;z-index:40;left:0;right:0;bottom:0;height:70px;padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(5,1fr);gap:3px;background:var(--canvas);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(9,9,11,.08)}
  .mobile-tab{min-width:0;border:0;background:transparent;color:var(--muted);font:600 10.5px/1 var(--ff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:9px;text-decoration:none;cursor:pointer;padding:4px}
  .mobile-tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
  .mobile-tab.on{color:var(--accent-ink);background:var(--accent-soft)}
  .mobile-drawer-backdrop{position:fixed;z-index:2147483099;inset:0;display:block;background:rgba(0,0,0,.42);border:0;padding:0}
  .mobile-drawer{position:fixed;z-index:2147483100;left:12px;right:12px;bottom:82px;display:block;max-height:min(72vh,620px);overflow:auto;background:var(--canvas);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 55px rgba(0,0,0,.24);padding:10px 14px 14px}
  .mobile-drawer-head{position:sticky;top:-10px;z-index:1;display:flex;align-items:center;gap:12px;padding:14px 4px 10px;background:var(--canvas);border-bottom:1px solid var(--line)}
  .mobile-drawer-head b{font-size:15px}
  .mobile-drawer-close{margin-left:auto}
  .mobile-drawer .navlbl{color:var(--faint);padding-top:14px}
  .mobile-drawer .nav{color:var(--ink-2);padding:11px 9px}
  .mobile-drawer .nav:hover{background:var(--line-2);color:var(--ink)}
  .mobile-drawer .nav.on{background:var(--accent-soft);color:var(--accent-ink)}
  .mobile-drawer .mobile-settings{width:100%;margin-top:12px;justify-content:flex-start}
  .mobile-scroll-hint{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin:0 2px 7px;color:var(--faint);font-size:11px;font-weight:600}
}
@media(max-width:420px){
  .topbar{padding-left:14px;padding-right:14px}
  .content{padding-left:14px;padding-right:14px}
  .fresh{max-width:108px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---- top bar ---- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:16px 32px;border-bottom:1px solid var(--line);background:var(--canvas);position:sticky;top:0;z-index:5}
.crumb{font-size:13px;color:var(--muted)} .crumb b{color:var(--ink);font-weight:600}
.spacer{margin-left:auto}
.fresh{font-size:12px;color:var(--faint)}
.icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--canvas);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}

/* ---- content + type scale ---- */
.content{padding:28px 32px 44px;max-width:1180px;width:100%}
.h1{font-size:25px;font-weight:700;letter-spacing:-.5px;margin:0 0 3px;text-wrap:balance}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 24px}

/* ---- KPI tiles ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--card-shadow)}
.kpi .lbl{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px;margin-bottom:12px}
.kpi .lbl .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.kpi .lbl .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.kpi .val{font-size:33px;font-weight:750;letter-spacing:-1px;line-height:1}
.kpi .val small{font-size:17px;font-weight:600;color:var(--muted);letter-spacing:0}
.kpi .meta{font-size:12px;margin-top:9px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.trend{font-weight:700;display:inline-flex;align-items:center;gap:3px}
.trend.up{color:var(--good)} .trend.down{color:var(--crit)}

/* ---- cards / layout ---- */
.grid2{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.card{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--card-shadow);overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:17px 20px 0}
.card-h h3{font-size:14px;font-weight:650;margin:0;letter-spacing:-.1px}
.card-h .link{font-size:12.5px;color:var(--accent);font-weight:600}
.card-b{padding:16px 20px 20px}

/* ---- list rows ---- */
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-2)}
.row:first-child{border-top:none}
.row .main2{flex:1;min-width:0}
.row .t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:12px;color:var(--muted)}

/* ---- status pills (semantic only, never the accent) ---- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:20px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.good{color:var(--good);background:var(--good-soft)}
.pill.warn{color:var(--warn);background:var(--warn-soft)}
.pill.crit{color:var(--crit);background:var(--crit-soft)}
.pill.mut{color:var(--muted);background:var(--line-2)}

/* ---- progress track ---- */
.track{height:6px;border-radius:4px;background:var(--line-2);overflow:hidden}
.fill{height:100%;border-radius:4px}

/* ---- buttons ---- */
.btn{border:none;border-radius:9px;font-family:inherit;font-size:13px;font-weight:600;padding:9px 15px;cursor:pointer;transition:filter var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--accent);color:#fff} .btn.primary:hover{filter:brightness(1.06)}
.btn.subtle{background:var(--accent-soft);color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-link{border:0;background:transparent;color:var(--accent);font:600 12.5px/1.4 var(--ff);padding:0;cursor:pointer}
.btn-link:hover{text-decoration:underline}

/* ---- states: loading / empty / error (MANDATORY on every data surface) ---- */
.skel{height:11px;border-radius:6px;margin:8px 0;background:linear-gradient(90deg,var(--skel-1) 25%,var(--skel-2) 42%,var(--skel-1) 58%);background-size:220% 100%;animation:sk 1.2s infinite}
.skel-tile{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--card-shadow);padding:18px 20px;min-height:96px}
@keyframes sk{from{background-position:120% 0}to{background-position:-120% 0}}
.empty{text-align:center;color:var(--muted);font-size:12.5px;padding:22px 14px}
.empty .e-ic{font-size:20px;margin-bottom:6px;opacity:.55}
.error{text-align:center;color:var(--crit);font-size:12.5px;padding:22px 14px}

/* content fades in once data lands — no abrupt swaps (sleekness) */
.fade-in{animation:fade var(--t) var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* respect reduced motion everywhere */
@media(prefers-reduced-motion:reduce){
  *,.skel,.fade-in{animation:none!important;transition:none!important}
}