/* ============================================================
   EDM/DLM Admin Portal — Redesign design tokens + primitives
   Source of truth: "Admin Portal Redesign / IMPLEMENTATION_SPEC.md"
   §2.3 tokens · §2.4 type scale · §2.5 radius/shadow · §6 primitives
   ------------------------------------------------------------
   Vanilla, drop-in. New redesign surfaces link this file; the
   existing 31 live pages are untouched. Brand-green build.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

/* -------- 2.3 tokens -------- */
:root{
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --bg:#ffffff; --surface:#fff; --surface-1:#F7F8FA; --surface-2:#F1F3F6; --surface-3:#EAEDF1;
  --ink:#14161C; --ink-2:#565B67; --ink-3:#8A909C; --ink-4:#B4B9C3;
  --border:rgba(20,22,30,.09); --border-2:rgba(20,22,30,.15);

  --accent:#2FA25C; --accent-2:#49B066; --accent-soft:rgba(47,162,92,.13); --on-accent:#fff;
  --green:#0E9F6E; --green-bg:rgba(14,159,110,.12);
  --amber:#C77E0B; --amber-bg:rgba(199,126,11,.13);
  --red:#E14434;   --red-bg:rgba(225,68,52,.11);
  --blue:#2E7DD8;  --blue-bg:rgba(46,125,216,.12);
  --violet:#7C5CE0;--violet-bg:rgba(124,92,224,.13);

  --rail:#16171F; --rail-ink:#8E93A0; --rail-ink-2:#C9CCD4;

  --radius:11px; --radius-lg:15px; --radius-modal:20px;
  --shadow-sm:0 1px 2px rgba(20,24,40,.05);
  --shadow:0 1px 2px rgba(20,24,40,.04),0 12px 26px -14px rgba(20,24,40,.18);
  --shadow-lg:0 2px 4px rgba(20,24,40,.04),0 24px 48px -20px rgba(20,24,40,.24);
  --shadow-modal:0 40px 90px -30px rgba(10,14,25,.55),0 0 0 1px rgba(20,22,30,.06);
}

/* -------- base -------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
.rd{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:13.5px; line-height:1.45; -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv11','ss01'; text-rendering:optimizeLegibility;
}
.rd .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rd .num,.rd .tnum{font-variant-numeric:tabular-nums}

/* -------- 2.4 typography scale -------- */
.rd h1{font-size:24px;font-weight:750;letter-spacing:-.02em;margin:0}
.rd .h-sub{font-size:13.5px;color:var(--ink-3);margin:.25rem 0 0}
.rd .sec-title{font-size:14.5px;font-weight:700;margin:0}
.rd .item-title{font-size:13.5px;font-weight:650}
.rd .label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.rd .metric{font-size:22px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* -------- 6. buttons -------- */
.rd .btn{
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:13px;font-weight:600;line-height:1;
  padding:9px 14px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:background .12s,border-color .12s,box-shadow .12s,transform .04s;
  white-space:nowrap;
}
.rd .btn:hover{background:var(--surface-2)}
.rd .btn:active{transform:translateY(.5px)}
.rd .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rd .btn svg{width:16px;height:16px;flex:0 0 auto}
.rd .btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rd .btn--primary:hover{background:#2b9455;border-color:#2b9455}
.rd .btn--danger{color:var(--red);border-color:var(--border-2)}
.rd .btn--danger:hover{background:var(--red-bg);border-color:rgba(225,68,52,.4)}
.rd .btn--ghost{background:transparent}
.rd .btn--sm{padding:6px 10px;font-size:12px;border-radius:8px}
.rd .btn:disabled,.rd .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* -------- 6. badges / status pills -------- */
.rd .badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;line-height:1;
  padding:4px 8px;border-radius:7px;background:var(--surface-3);color:var(--ink-2);
  white-space:nowrap;
}
.rd .badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.rd .badge--success{color:var(--green);background:var(--green-bg)}
.rd .badge--warning{color:var(--amber);background:var(--amber-bg)}
.rd .badge--danger{color:var(--red);background:var(--red-bg)}
.rd .badge--info{color:var(--blue);background:var(--blue-bg)}
.rd .badge--violet{color:var(--violet);background:var(--violet-bg)}
.rd .badge--accent{color:var(--accent);background:var(--accent-soft)}
/* status pill = larger badge for modal header (§5.2) */
.rd .pill{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:6px 11px;border-radius:8px}

/* brand tag: EDM green / DLM blue (§2.2) */
.rd .brand-tag{font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px}
.rd .brand-edm{color:var(--green);background:var(--green-bg)}
.rd .brand-dlm{color:var(--blue);background:var(--blue-bg)}

/* -------- 6. avatar (initials, color-hashed) -------- */
.rd .avatar{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;background:var(--ink-3);
  text-transform:uppercase;
}

/* -------- 6. progress bar -------- */
.rd .progress{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.rd .progress > i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .3s}

/* -------- 6. loading spinner (shared — use whenever a surface/tab fetches data) -------- */
.rd-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:60px 20px;color:var(--ink-3);font-size:13px;font-weight:500}
.rd-spinner{width:34px;height:34px;border-radius:50%;
  background:conic-gradient(from 90deg at 50% 50%,transparent 0deg,var(--accent) 300deg,var(--accent) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px));
  animation:rd-spin .75s linear infinite}
.rd-spinner--sm{width:18px;height:18px}
@keyframes rd-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rd-spinner{animation-duration:1.5s}}

/* -------- 6. shared empty state — "All Clear 🎉" (standard across every surface) -------- */
.rd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 24px;color:var(--ink-3)}
.rd-empty__emoji{font-size:40px;line-height:1;margin-bottom:10px}
.rd-empty__t{font-size:16px;font-weight:700;color:var(--ink-2)}
.rd-empty__s{font-size:13px;margin-top:4px;max-width:46ch}

/* -------- 6. meta grid (§5.3) -------- */
.rd .meta-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;
}
.rd .meta-grid > div{background:var(--surface);padding:11px 13px}
.rd .meta-grid .label{margin-bottom:4px}
.rd .meta-grid .val{font-size:13px;font-weight:600;color:var(--ink)}

/* -------- 6. card / inset -------- */
.rd .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.rd .inset{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)}

/* -------- 6. modal shell (§5.1) -------- */
.rd-scrim{
  position:fixed;inset:0;z-index:1000;
  background:rgba(12,14,20,.55);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:max(24px,4vh) 16px;overflow:auto;
}
.rd-modal{
  width:960px;max-width:96vw;max-height:90vh;margin:auto;
  background:var(--surface);border-radius:var(--radius-modal);
  box-shadow:var(--shadow-modal);
  display:flex;flex-direction:column;overflow:hidden;
}
.rd-modal__head,.rd-modal__foot{flex:0 0 auto}      /* pinned */
.rd-modal__body{flex:1 1 auto;overflow-y:auto}       /* scrolls */
.rd-modal__head{padding:20px 22px;border-bottom:1px solid var(--border)}
.rd-modal__body{padding:20px 22px}
.rd-modal__foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface)}
.rd-x{width:34px;height:34px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.rd-x:hover{background:var(--surface-2)}

@media (prefers-reduced-motion:reduce){
  .rd-scrim{backdrop-filter:none}
  .rd *{transition:none!important;animation:none!important}
}

/* Global omni search bar — visible focus affordance (shortcuts: ⌘K / Ctrl+K / "/") */
.omni:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.omni input{caret-color:var(--accent)}

/* ============================================================
   SHARED SURFACE COMPONENTS
   ------------------------------------------------------------
   Canonicalised from the Today / Requests surfaces — those are the
   reference look for the whole portal (Chris, 2026-08-15). Every page
   had grown its own near-identical copy of these (.seg lived in 7
   pages, the table in 4 under 3 different names), which is how the
   Clients primary button drifted into a raw UA-bordered <button>.

   MIGRATION: page <style> blocks load AFTER this file, so a page that
   still defines its own copy simply overrides and is unaffected.
   Deleting that local block is what opts the page in. Do it page by
   page and verify — no big-bang rename needed, because these use the
   class names pages already carry.
   ============================================================ */

/* -------- toolbar -------- */
.toolbar{display:flex;gap:10px;align-items:center;margin:0 0 14px;flex-wrap:wrap}

/* -------- filter chips -------- */
.filt{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:0 0 auto;
  font:inherit;font-size:12.5px;font-weight:600;padding:8px 13px;
  border:1px solid var(--border-2);border-radius:999px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
}
.filt:hover{background:var(--surface-1)}
.filt.on{background:var(--accent);border-color:var(--accent);color:#fff}
.filt.dark.on{background:var(--ink);border-color:var(--ink)}
.filt .fdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
/* A selected chip is filled with the accent, so a green status dot on it is
   invisible. Accent-filled chips force the dot to the label colour — !important
   because the dot's meaning-colour is set inline per chip. Dark chips (.filt.dark)
   keep their dot: on ink the meaning-colour still reads, and calendar's type /
   status dots are the whole point of those chips. */
.filt.on:not(.dark) .fdot{background:currentColor!important}

/* -------- segmented control -------- */
.seg,.dens{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;flex:0 0 auto}
.seg button,.dens button{
  border:none;background:none;font:inherit;font-size:12.5px;font-weight:650;color:var(--ink-3);
  padding:7px 13px;border-radius:8px;cursor:pointer;white-space:nowrap;
}
.seg button:hover,.dens button:hover{color:var(--ink-2)}
.seg button.on,.dens button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.dens button{font-size:12px;font-weight:600;padding:6px 11px;border-radius:7px}

/* -------- stat tiles -------- */
.stats{display:flex;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px 16px;min-width:118px;box-shadow:var(--shadow-sm)}
.stat .n{font-size:21px;font-weight:700;letter-spacing:-.4px;line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-size:11px;color:var(--ink-3);margin-top:6px;display:flex;align-items:center;gap:6px}
.stat .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.stat.acc .n{color:var(--accent)}

/* -------- data table (the Requests table, portal-wide) -------- */
.twrap{border:1px solid var(--border);border-radius:16px;overflow:auto;background:var(--surface);box-shadow:var(--shadow)}
.tk{width:100%;border-collapse:collapse;font-size:13.5px;min-width:900px}
.tk thead th{
  position:sticky;top:0;z-index:3;background:var(--surface-1);text-align:left;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  padding:13px 18px;border-bottom:1px solid var(--border);white-space:nowrap;
}
.tk tbody td{padding:15px 18px;border-top:1px solid var(--border);vertical-align:middle;color:var(--ink-2);transition:background .12s}
.tk tbody tr:first-child td{border-top:none}
.tk.compact tbody td{padding:9px 18px}
/* hover is on every body row — pages name their clickable rows differently
   (.row / .pl-row / .fn-row / .crow); cursor stays the page's call */
.tk tbody tr:hover td{background:var(--surface-1)}
/* first column pinned while the table scrolls sideways */
.tk .stick{position:sticky;left:0;background:var(--surface);z-index:2;min-width:230px}
.tk thead .stick{z-index:4}
.tk tbody tr:hover .stick{background:var(--surface-1)}
/* opt-in zebra — subtle, and hover still wins */
.tk.zebra tbody tr.alt td,
.tk.zebra.auto tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-1) 55%,var(--surface))}
.tk.zebra tbody tr.alt:hover td,
.tk.zebra.auto tbody tr:nth-child(even):hover td{background:var(--surface-1)}
/* sortable headers */
.tk th.sortable{cursor:pointer;user-select:none}
.tk th.sortable:hover{color:var(--ink)}
.tk th .caret,.tk th .sarw{font-size:10px;margin-left:5px;color:var(--accent)}

/* -------- hub tab bar (Clients / Library / Asset Hub / Reports / Studio) -------- */
.s-tabs{display:inline-flex;gap:2px;background:var(--surface-2);border-radius:11px;padding:4px;margin:0 0 16px;flex-wrap:wrap}
.s-tab{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  border:none;background:none;font:inherit;font-size:13px;font-weight:650;color:var(--ink-3);
  padding:8px 15px;border-radius:8px;cursor:pointer;
}
.s-tab:hover{color:var(--ink-2)}
.s-tab.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.count{font-size:12px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.empty{text-align:center;color:var(--ink-4);padding:40px;font-size:14px;border:1px dashed var(--border-2);border-radius:12px}

/* -------- filter select (square, pairs with .filt chips) -------- */
.fsel{font:inherit;font-size:13px;font-weight:600;padding:8px 11px;border:1px solid var(--border-2);
  border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer;flex:0 0 auto;max-width:240px}
.fsel:hover{background:var(--surface-1)}

/* -------- transient toast (live-load failures) --------
   Replaces the old persistent "Loading live data…" banner bar: loading is shown by
   each page's own spinner/skeleton, and only genuine failures need to speak up. */
.rd-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);opacity:1;pointer-events:none;
  background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:11px 18px;border-radius:10px;
  box-shadow:var(--shadow-lg);transition:opacity .18s,transform .18s;z-index:3000;max-width:90vw;text-align:center}
/* The VISIBLE state is the default and `.enter` is the offset one, so if the
   transition never runs the toast still shows. The reverse (opacity:0 by default,
   revealed by a class) fails silent — a load failure nobody sees. */
.rd-toast.enter{opacity:0;transform:translateX(-50%) translateY(12px)}
.rd-toast.err{background:var(--red)}

/* -------- sidebar footer (avatar + name + role -> profile) -------- */
.side__foot{text-decoration:none;border-radius:10px;transition:background .12s}
a.side__foot:hover{background:rgba(255,255,255,.06)}
.side__avatar{overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;color:#fff;letter-spacing:.02em}
.side__avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.side__who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.side__who b{font-size:12.5px;font-weight:650;color:var(--rail-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side__who span{font-size:10.5px;color:var(--rail-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}