/* ==========================================================================
   RISE Softball — admin shell  (v3)

   Conventions taken from current design-system practice rather than taste:
     · sidebar 256px expanded / 48px icon rail / 288px mobile overlay
       (shadcn, Carbon, Primer all converge on these)
     · topbar 56px (Polaris --pg-top-bar-height, Atlassian top nav)
     · 4px spacing base
     · Material 3 easing; exit ≈ 0.65 × enter
     · animate transform/opacity ONLY — shadows cross-fade two layers rather
       than animating box-shadow, which forces paint
     · :focus-visible (not :focus), ring ≥3:1 per WCAG 1.4.11
     · prefers-reduced-motion removes translate/scale, keeps opacity fades
   Theme flips via [data-theme] on <html>, set by a blocking inline script in
   partials/head.ejs before first paint. One semantic token layer, two palettes.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  /* brand — constant across themes */
  --teal-900:#043230; --teal-800:#064443; --teal-700:#0b6d68;
  --teal-500:#278885; --teal-400:#36b4b0; --teal-300:#49c4bf; --teal-200:#7fd9d5;
  --red:#cd1f36; --red-300:#e8737f;

  /* semantic — light */
  --bg:#F7F5F1;            /* warm canvas, never blue-grey */
  --surface:#ffffff;
  --surface-2:#FBFAF8;
  --surface-3:#F1EEE9;
  --line:#E6E3DD;
  --line-soft:#EFECE6;
  --ink:#2B2B30;
  --text:#4A4A50;
  --muted:#83838B;
  --accent:var(--teal-800);
  --accent-fg:#ffffff;
  --accent-soft:#EAF5F4;
  --accent-line:#CFE8E6;

  --ok:#1F7A5C;    --ok-soft:#E4F4EE;   --ok-line:#BFE3D5;
  --warn:#8a5a12;  --warn-soft:#FBF1DE; --warn-line:#EBDCB6;
  --danger:var(--red); --danger-soft:#FBE8EA; --danger-line:#F0C9CE;

  --focus:#0b6d68;
  --scrim:rgba(43,43,48,.46);
  --glass:rgba(247,245,241,.72);

  --sh-1:0 1px 2px rgba(10,10,12,.06), 0 1px 3px rgba(10,10,12,.05);
  --sh-2:0 8px 22px rgba(10,10,12,.10), 0 2px 6px rgba(10,10,12,.06);
  --sh-3:0 24px 50px rgba(10,10,12,.20);

  /* geometry */
  --side-w:256px; --side-rail:48px; --side-mobile:288px; --topbar-h:56px;
  --r:14px; --r-sm:10px; --r-xs:7px; --r-pill:999px;
  --sp:4px;
  --max:1500px;

  /* motion — Material 3 */
  --e-standard:cubic-bezier(.2,0,0,1);
  --e-decel:cubic-bezier(0,0,0,1);
  --e-accel:cubic-bezier(.3,0,1,1);
  --t-in:200ms; --t-out:130ms;        /* exit ≈ .65 × enter */
  --t-hover:120ms;

  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#141619;
  --surface:#1B1E22;
  --surface-2:#212529;
  --surface-3:#282C31;
  --line:#32373D;
  --line-soft:#272B30;
  --ink:#F2F0ED;
  --text:#C9C8C6;
  --muted:#8E9095;
  --accent:var(--teal-400);        /* 800 fails contrast on dark */
  --accent-fg:#06211F;
  --accent-soft:#14312F;
  --accent-line:#25514E;

  --ok:#5BC79E;    --ok-soft:#14302A;   --ok-line:#24503F;
  --warn:#D7A64B;  --warn-soft:#332813; --warn-line:#4E3E1C;
  --danger:#F0798A; --danger-soft:#38191E; --danger-line:#5A272E;

  --focus:var(--teal-300);
  --scrim:rgba(0,0,0,.62);
  --glass:rgba(20,22,25,.72);

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 8px 22px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --sh-3:0 24px 50px rgba(0,0,0,.6);
}

/* ---------- base ---------- */
.admin-body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--topbar-h);
}
.admin-body *{box-sizing:border-box}
/* Base link colour via :where(), which contributes ZERO specificity — so any
   component rule (.btn, .admin-nav a.active, .pager a …) wins without needing
   !important or an escalating :not() chain. Writing this as `.admin-body a`
   would be (0,1,1) and silently beat `.btn` (0,1,0), rendering every
   anchor-styled button as accent-on-accent — invisible. */
:where(.admin-body a){color:var(--accent);text-decoration:none}
:where(.admin-body a):hover{text-decoration:underline}
:where(.admin-body a[class*="btn"]):hover{text-decoration:none}
.admin-body h1,.admin-body h2,.admin-body h3,.admin-body h4{
  margin:0 0 .5em;line-height:1.25;color:var(--ink);font-weight:600;letter-spacing:-.011em;
}
.admin-body h1{font-size:1.5rem}.admin-body h2{font-size:1.16rem}.admin-body h3{font-size:1rem}
.admin-body p{margin:0 0 1em}
.admin-body svg{flex:0 0 auto}

/* focus — visible only for keyboard, ring ≥3:1 (WCAG 1.4.11) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs);
}
:where(a,button,input,select,textarea,summary,[tabindex]):focus:not(:focus-visible){outline:none}

.skip-link{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--surface);color:var(--ink);padding:10px 16px;
  border-radius:var(--r-sm);box-shadow:var(--sh-2);font-weight:600;
  transition:top var(--t-in) var(--e-decel);
}
.skip-link:focus{top:8px;text-decoration:none}

/* ==========================================================================
   Global topbar
   ========================================================================== */
.topbar{
  position:fixed;inset:0 0 auto 0;height:var(--topbar-h);z-index:60;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
/* no blur support → opaque, never a translucent unreadable bar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{background:var(--surface)}
}
.topbar .brand{display:flex;align-items:center;gap:9px;text-decoration:none;padding-right:6px}
.topbar .brand img{height:26px;width:auto;display:block}
.topbar .brand b{color:var(--ink);font-size:.95rem;letter-spacing:-.01em}
.topbar .brand:hover{text-decoration:none}
.topbar .spacer{flex:1}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 auto;
  border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:var(--text);cursor:pointer;
  transition:background var(--t-hover) var(--e-standard),
             color var(--t-hover) var(--e-standard);
}
.icon-btn:hover{background:var(--surface-3);color:var(--ink)}
.icon-btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}

/* ⌘K launcher */
.k-trigger{
  display:flex;align-items:center;gap:9px;
  min-width:210px;height:36px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--muted);
  font:inherit;font-size:.86rem;cursor:pointer;text-align:left;
  transition:border-color var(--t-hover) var(--e-standard),
             background var(--t-hover) var(--e-standard);
}
.k-trigger:hover{border-color:var(--accent-line);background:var(--surface-2)}
.k-trigger .kbd{margin-left:auto}
.kbd{
  font:600 11px/1 var(--mono);color:var(--muted);
  background:var(--surface-3);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:3px 5px;
}

/* quick actions
   NEVER wraps. The topbar is a fixed-height flex row, so a wrapped bar pushes
   its second line out of the bar entirely (two separate header-overflow bugs so
   far). Width is bought back in stages instead: drop the optional actions, then
   the labels, then the brand wordmark. Badged actions survive every stage —
   lib/admin-badges.js only badges work that is genuinely waiting. */
.quick-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto;flex-wrap:nowrap}
.quick-actions .btn{height:34px;padding:0 12px;flex:0 0 auto}
/* Badge reuses the sidebar `.pill` recipe (same class, same tokens) — the pill
   there is only styled under .admin-nav, so the topbar needs its own selector.
   .pill-info is for work that is merely pending, not wrong: 646 unpublished
   ranking rows in danger-red reads as an outage rather than a quarterly chore. */
.quick-actions .pill{
  background:var(--danger);color:#fff;border-radius:var(--r-pill);
  padding:1px 7px;font-size:.7rem;font-weight:700;line-height:1.45;
}
.quick-actions .pill-info{background:var(--accent-soft);color:var(--accent)}
.quick-actions .btn:not(.btn-ghost) .pill{background:var(--accent-fg);color:var(--accent)}

@media(max-width:1320px){ .quick-actions .qa-opt{display:none} }
@media(max-width:900px){ .quick-actions .qa-lo{display:none} }
/* icon-only: the label stays in the accessibility tree, so no aria-label needed
   and the tooltip/name still says which queue the badge belongs to */
@media(max-width:1000px){
  .quick-actions .btn{padding:0 9px}
  .quick-actions .qa-lbl{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
}
@media(max-width:860px){ .k-trigger{min-width:0;width:36px;padding:0;justify-content:center} .k-trigger span,.k-trigger .kbd{display:none} }
/* phone: 375px cannot hold hamburger + wordmark + search + 3 actions + 2 icons */
@media(max-width:620px){
  .topbar{gap:6px;padding:0 10px}
  .topbar .brand b{display:none}
  .quick-actions{gap:5px}
}
/* 375px with both badges live overflowed by 4px, so the last pixels come out of
   the gaps and the hit-target padding rather than out of any action */
@media(max-width:430px){
  .topbar{gap:4px;padding:0 7px}
  .topbar .icon-btn,.k-trigger{width:32px}
  .quick-actions{gap:4px}
  .quick-actions .btn{padding:0 7px}
}
/* 320px (SE-class) still overflowed. The search trigger goes last: the drawer
   reaches everything it does, and a badge you can act on beats a box you cannot
   fit. */
@media(max-width:360px){
  .k-trigger{display:none}
  /* Badge shrinks to a dot: "something is waiting here" is the part that has to
     survive at this width. The exact number stays in the title and in the
     .sr-only text, so nothing is lost for assistive tech. */
  .quick-actions .pill{
    width:7px;height:7px;padding:0;overflow:hidden;text-indent:-9em;
    align-self:flex-start;margin-top:5px;
  }
}

/* ==========================================================================
   Shell + sidebar
   ========================================================================== */
.admin-shell{display:flex;min-height:calc(100vh - var(--topbar-h))}

.admin-side{
  width:var(--side-w);flex:0 0 var(--side-w);
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));
  overflow-y:auto;overscroll-behavior:contain;
  transition:width var(--t-in) var(--e-standard), flex-basis var(--t-in) var(--e-standard);
}
/* icon rail */
:root[data-side="rail"] .admin-side{width:var(--side-rail);flex-basis:var(--side-rail)}
:root[data-side="rail"] .admin-side .lbl,
:root[data-side="rail"] .admin-side .admin-nav-group,
:root[data-side="rail"] .admin-side .pill,
:root[data-side="rail"] .admin-side .chev,
:root[data-side="rail"] .admin-userbox{display:none}
:root[data-side="rail"] .admin-nav a,
:root[data-side="rail"] .admin-nav .grp-btn{justify-content:center;padding:9px 0}
/* in rail mode every group is forced open so items stay reachable */
:root[data-side="rail"] .admin-nav .grp-items{display:block!important;height:auto!important}

.admin-brand{padding:16px 16px 10px}
.admin-brand img{max-width:112px;height:auto;display:block}
.admin-brand .admin-brand-sub{
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:8px;font-weight:700;
}

.admin-nav{padding:8px 8px 14px;flex:1}
.admin-nav-group{
  padding:14px 8px 6px;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:700;
}

/* group disclosure button */
.admin-nav .grp-btn{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;margin-bottom:2px;border:none;
  border-radius:var(--r-sm);background:transparent;
  color:var(--text);font:inherit;font-size:.9rem;font-weight:600;
  cursor:pointer;text-align:left;
  transition:background var(--t-hover) var(--e-standard),color var(--t-hover) var(--e-standard);
}
.admin-nav .grp-btn:hover{background:var(--surface-3);color:var(--ink)}
.admin-nav .grp-btn .chev{
  margin-left:auto;color:var(--muted);
  transition:transform var(--t-in) var(--e-standard);
}
.admin-nav .grp-btn[aria-expanded="true"] .chev{transform:rotate(90deg)}
.admin-nav .grp-btn.has-active{color:var(--accent)}

.admin-nav .grp-items{overflow:hidden;padding-left:6px}
.admin-nav .grp-items[hidden]{display:none}

.admin-nav a{
  display:flex;align-items:center;gap:10px;
  padding:8px 11px;margin-bottom:2px;border-radius:var(--r-sm);
  color:var(--text);font-size:.885rem;font-weight:500;text-decoration:none;
  position:relative;
  transition:background var(--t-hover) var(--e-standard),color var(--t-hover) var(--e-standard);
}
.admin-nav a:hover{background:var(--surface-3);color:var(--ink);text-decoration:none}
.admin-nav a.active{background:var(--accent);color:var(--accent-fg);font-weight:600}
.admin-nav a.active:hover{background:var(--accent);color:var(--accent-fg)}
.admin-nav a .pill{
  margin-left:auto;background:var(--danger);color:#fff;border-radius:var(--r-pill);
  padding:1px 8px;font-size:.7rem;font-weight:700;
}
.admin-nav a.active .pill{background:var(--accent-fg);color:var(--accent)}
.admin-nav a svg,.admin-nav .grp-btn svg{opacity:.85}
.admin-nav a.active svg{opacity:1}

.admin-userbox{padding:12px 16px;border-top:1px solid var(--line);font-size:.84rem}
.admin-userbox .nm{color:var(--ink);font-weight:600}
.admin-userbox .rl{color:var(--muted);text-transform:uppercase;font-size:.64rem;letter-spacing:.1em;font-weight:700}
.admin-userbox a{color:var(--muted);font-size:.84rem}

/* mobile: sidebar becomes an overlay drawer */
.side-scrim{
  position:fixed;inset:var(--topbar-h) 0 0 0;z-index:49;
  background:var(--scrim);opacity:0;pointer-events:none;
  transition:opacity var(--t-out) var(--e-accel);
}
@media(max-width:900px){
  .admin-side{
    position:fixed;left:0;top:var(--topbar-h);z-index:50;
    width:var(--side-mobile);flex-basis:var(--side-mobile);
    transform:translateX(-100%);
    transition:transform var(--t-in) var(--e-decel);
    box-shadow:var(--sh-3);
  }
  :root[data-side="open"] .admin-side{transform:translateX(0)}
  :root[data-side="open"] .side-scrim{opacity:1;pointer-events:auto;transition-duration:var(--t-in)}
  /* rail is meaningless on a phone */
  :root[data-side="rail"] .admin-side{width:var(--side-mobile);flex-basis:var(--side-mobile)}
  :root[data-side="rail"] .admin-side .lbl,
  :root[data-side="rail"] .admin-side .admin-nav-group,
  :root[data-side="rail"] .admin-side .pill,
  :root[data-side="rail"] .admin-side .chev,
  :root[data-side="rail"] .admin-userbox{display:revert}
  :root[data-side="rail"] .admin-nav a,
  :root[data-side="rail"] .admin-nav .grp-btn{justify-content:flex-start;padding:8px 11px}
}

/* ==========================================================================
   Main
   ========================================================================== */
.admin-main{flex:1;min-width:0;display:flex;flex-direction:column}
.admin-topbar{
  padding:20px 28px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.admin-topbar h1{margin:0;font-size:1.42rem}
.admin-topbar .spacer,.card-head .spacer,.flex .spacer{flex:1}
.admin-content{padding:18px 28px 72px;flex:1;max-width:var(--max);width:100%}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-1);
}
.card+.card{margin-top:18px}
.card-head{padding:16px 20px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:12px}
.card-head h2,.card-head h3{margin:0}
.card-body{padding:20px}
.card-foot{padding:14px 20px;border-top:1px solid var(--line-soft);background:var(--surface-2);border-radius:0 0 var(--r) var(--r)}

/* stat tiles — hover lift via transform + cross-faded shadow (no paint) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:15px;margin-bottom:22px}
.stat-tile{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:17px 19px;box-shadow:var(--sh-1);
  transition:transform var(--t-hover) var(--e-standard),border-color var(--t-hover) var(--e-standard);
}
.stat-tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:var(--sh-2);opacity:0;pointer-events:none;
  transition:opacity var(--t-hover) var(--e-standard);
}
.stat-tile:hover{transform:translateY(-2px);border-color:var(--accent-line)}
.stat-tile:hover::after{opacity:1}
.stat-tile .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.stat-tile .v{font-size:1.95rem;font-weight:700;color:var(--ink);line-height:1.05;margin-top:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-tile .s{font-size:.81rem;color:var(--muted);margin-top:4px}
.stat-tile.alert{border-color:var(--danger-line);background:var(--danger-soft)}
.stat-tile.alert .v{color:var(--danger)}
.stat-tile a{display:block;color:inherit;text-decoration:none}
.stat-tile a:hover{text-decoration:none}

/* legacy dashboard cards */
.admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:15px;margin-bottom:22px}
.card-stat{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 19px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:5px;
  transition:transform var(--t-hover) var(--e-standard),border-color var(--t-hover) var(--e-standard);
}
.card-stat:hover{transform:translateY(-2px);border-color:var(--accent-line)}
.card-stat .n{font-size:1.95rem;font-weight:700;color:var(--ink);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card-stat .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.card-stat a{color:inherit;text-decoration:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 18px;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--accent);color:var(--accent-fg);
  font-size:.885rem;font-family:var(--font);font-weight:600;
  cursor:pointer;text-decoration:none;line-height:1.2;white-space:nowrap;
  transition:transform var(--t-hover) var(--e-standard),
             background var(--t-hover) var(--e-standard),
             border-color var(--t-hover) var(--e-standard);
}
.btn:hover{background:var(--teal-700);color:var(--accent-fg);text-decoration:none;transform:translateY(-1px)}
:root[data-theme="dark"] .btn:hover{background:var(--teal-300)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn.is-busy{opacity:.5;cursor:not-allowed;transform:none}
.btn-sm{padding:6px 13px;font-size:.81rem}
.btn-lg{padding:12px 28px;font-size:.98rem}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-3);color:var(--ink);border-color:var(--accent-line)}
.btn-danger,.btn-red{background:var(--danger);color:#fff}
.btn-danger:hover,.btn-red:hover{background:var(--danger);color:#fff;filter:brightness(.92)}
.btn-plain{background:transparent;color:var(--muted);border-color:var(--line)}
.btn-plain:hover{background:var(--surface-3);color:var(--text)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* anchors rendered as buttons must take the button foreground, not link colour */
.admin-body a.btn{color:var(--accent-fg)}
.admin-body a.btn-ghost,.admin-body a.btn-plain{color:var(--text)}
.admin-body a.btn-danger,.admin-body a.btn-red{color:#fff}
.admin-body a.btn-ghost:hover,.admin-body a.btn-plain:hover{color:var(--ink)}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.field{display:flex;flex-direction:column;min-width:0}
.field.col-2{grid-column:span 2}.field.col-full{grid-column:1/-1}
.field>label{font-size:.77rem;font-weight:600;color:var(--text);margin-bottom:6px}
.field>label .req{color:var(--danger)}
.field .hint{font-size:.77rem;color:var(--muted);margin-top:5px}

.input,
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=url],.field input[type=number],.field input[type=password],
.field input[type=date],.field select,.field textarea,
label>input[type=text],label>input[type=email],label>input[type=number],
label>input[type=password],label>select,label>textarea{
  width:100%;padding:10px 13px;border:1px solid var(--line);
  border-radius:var(--r-xs);font-size:.92rem;font-family:var(--font);
  color:var(--ink);background:var(--surface);
  transition:border-color var(--t-hover) var(--e-standard),box-shadow var(--t-hover) var(--e-standard);
}
.field textarea,label>textarea{min-height:120px;resize:vertical;line-height:1.5}
.field textarea.code{font-family:var(--mono);font-size:.85rem}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus,
label>input:focus,label>select:focus,label>textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.field input[readonly],.field input:disabled{background:var(--surface-3);color:var(--muted)}

.form-grid>label,.form-row>label{
  display:flex;flex-direction:column;font-size:.77rem;font-weight:600;
  color:var(--text);gap:6px;min-width:0;
}
.form-row{margin-top:16px}
.chk,.form-grid>label.chk,.form-row>label.chk{
  flex-direction:row;align-items:center;gap:9px;font-size:.89rem;color:var(--text);font-weight:500;
}
.chk input{width:17px;height:17px;accent-color:var(--accent);flex:0 0 auto}
.fieldset{border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 20px;background:var(--surface)}
.fieldset>legend{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:0 8px}
.form-actions{display:flex;gap:11px;align-items:center;padding-top:18px;margin-top:20px;border-top:1px solid var(--line-soft)}

.filter-bar{
  display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 18px;box-shadow:var(--sh-1);
}
.filter-bar .field,.filter-bar>label{min-width:150px}
.filter-bar .field>label,.filter-bar>label{font-size:.71rem}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
table.table{width:100%;border-collapse:collapse;font-size:.89rem;background:var(--surface)}
table.table th{
  text-align:left;padding:12px 15px;background:var(--surface-2);color:var(--muted);
  font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;z-index:2;
}
table.table td{padding:12px 15px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--text)}
table.table tbody tr:last-child td{border-bottom:none}
table.table tbody tr{transition:background var(--t-hover) var(--e-standard)}
table.table tbody tr:hover{background:var(--surface-2)}
table.table td.num,table.table th.num{text-align:right;font-variant-numeric:tabular-nums}
table.table td.actions{text-align:right;white-space:nowrap}
table.table .thumb{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:var(--surface-3)}
table.table a{font-weight:500}
.table-empty{padding:44px 20px;text-align:center;color:var(--muted)}

/* ---------- badges / pills ---------- */
.badge{
  display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:600;background:var(--surface-3);
  color:var(--muted);white-space:nowrap;border:1px solid var(--line);
}
.badge.teal{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.badge.green{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.badge.red{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.badge.amber{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.badge.grey{background:var(--surface-3);color:var(--muted)}

.status-pill{display:inline-block;padding:4px 12px;border-radius:var(--r-pill);font-size:.73rem;font-weight:600;border:1px solid transparent}
.status-pill.new,.status-pill.verified{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.status-pill.read,.status-pill.archived{background:var(--surface-3);color:var(--muted);border-color:var(--line)}
.status-pill.replied,.status-pill.paid{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.status-pill.pending{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.status-pill.unpaid,.status-pill.flagged{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.status-pill.verified{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}

/* ---------- notices ---------- */
.notice{padding:13px 17px;border-radius:var(--r-sm);margin-bottom:18px;font-size:.89rem;border:1px solid transparent}
.notice.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.notice.err{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.notice.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.notice.info{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}

/* ---------- pagination ---------- */
.pager{display:flex;gap:7px;align-items:center;justify-content:center;padding:20px 0;flex-wrap:wrap}
.pager a,.pager span{
  padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:.85rem;color:var(--text);background:var(--surface);text-decoration:none;font-weight:500;
  transition:background var(--t-hover) var(--e-standard),border-color var(--t-hover) var(--e-standard);
}
.pager a:hover{background:var(--surface-3);border-color:var(--accent-line);text-decoration:none}
.pager .current{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.pager .muted{color:var(--muted);border:none;background:transparent}

/* ---------- media ---------- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px}
.media-item{
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface);cursor:pointer;position:relative;box-shadow:var(--sh-1);
  transition:transform var(--t-hover) var(--e-standard),border-color var(--t-hover) var(--e-standard);
}
.media-item:hover{transform:translateY(-2px);border-color:var(--accent-line)}
.media-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--surface-3)}
.media-item .meta{padding:9px 11px;font-size:.71rem;color:var(--muted);word-break:break-all}
.media-item.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.media-item .rm{position:absolute;top:7px;right:7px;background:rgba(0,0,0,.66);color:#fff;border:none;border-radius:var(--r-pill);padding:3px 9px;cursor:pointer;font-size:.71rem}
.img-picker{display:flex;gap:15px;align-items:flex-start}
.img-picker .preview{width:116px;height:116px;border-radius:var(--r-sm);object-fit:cover;border:1px solid var(--line);background:var(--surface-3);flex:0 0 auto}
.img-picker .controls{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.dropzone{border:2px dashed var(--line);border-radius:var(--r);padding:30px;text-align:center;color:var(--muted);background:var(--surface);cursor:pointer;transition:border-color var(--t-hover) var(--e-standard),background var(--t-hover) var(--e-standard)}
.dropzone.dragover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* ---------- stat entry grid ---------- */
.stat-entry{width:100%;border-collapse:collapse;font-size:.87rem;background:var(--surface)}
.stat-entry th{position:sticky;top:0;z-index:5;background:var(--accent);color:var(--accent-fg);padding:11px 9px;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;text-align:center;white-space:nowrap;font-weight:700}
.stat-entry th.player-col{text-align:left;left:0;z-index:6;min-width:200px}
.stat-entry td{border-bottom:1px solid var(--line-soft);padding:5px 6px;text-align:center}
.stat-entry td.player-col{text-align:left;position:sticky;left:0;background:var(--surface);z-index:2;border-right:1px solid var(--line);padding:7px 12px}
.stat-entry tbody tr:hover td,.stat-entry tbody tr:hover td.player-col{background:var(--surface-2)}
.stat-entry input{width:78px;padding:7px 6px;text-align:center;border:1px solid var(--line);border-radius:var(--r-xs);font-size:.9rem;font-family:var(--font);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--surface)}
.stat-entry input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.stat-entry input.dirty{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.stat-entry input.outlier{border-color:var(--danger);background:var(--danger-soft);color:var(--danger);font-weight:700}
.stat-entry input.saved{border-color:var(--ok);background:var(--ok-soft)}
.stat-entry .pname{font-weight:600;color:var(--ink)}
.stat-entry .pmeta{font-size:.75rem;color:var(--muted)}
.save-bar{position:sticky;bottom:0;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:13px 22px;display:flex;align-items:center;gap:14px;z-index:30}
.save-bar .count{font-size:.87rem;color:var(--muted)}

/* ---------- band editor ---------- */
.band-editor{display:grid;gap:20px}
.band-stat{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--sh-1)}
.band-stat>header{background:var(--surface-2);padding:14px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.band-stat>header h4{margin:0;font-size:.95rem}
.band-stat>header .dir{font-size:.73rem;color:var(--muted)}
.band-rows{padding:15px 18px;display:flex;flex-direction:column;gap:8px}
.band-row{display:flex;align-items:center;gap:10px}
.band-row .grade{width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent-fg);background:var(--accent);font-size:.9rem}
.band-row .grade select{background:transparent;border:none;color:var(--accent-fg);font-weight:700;text-align:center;-webkit-appearance:none;appearance:none;width:100%;cursor:pointer}
.band-row .grade select option{color:var(--ink);background:var(--surface)}
.band-row .op{color:var(--muted);font-size:.85rem;white-space:nowrap}
.band-row input{width:98px;padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-xs);text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font);background:var(--surface);color:var(--ink)}
.band-row .rm{color:var(--danger);background:none;border:none;cursor:pointer;font-size:1rem;padding:4px 8px}

/* inbox rows */
.rowchk{width:17px;height:17px;accent-color:var(--accent)}
tr.unread td{background:var(--accent-soft)}
tr.unread td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.unread .subj{font-weight:700;color:var(--ink)}

/* ---------- modal + command palette ---------- */
.modal-back{
  position:fixed;inset:0;background:var(--scrim);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;
  animation:fade var(--t-in) var(--e-decel);
}
.modal{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);max-width:960px;width:100%;max-height:88vh;display:flex;flex-direction:column;
  animation:pop var(--t-in) var(--e-decel);
}
.modal-head{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal-head h3{margin:0}
.modal-body{padding:24px;overflow-y:auto}
.modal-foot{padding:15px 24px;border-top:1px solid var(--line);display:flex;gap:11px;justify-content:flex-end}
.modal .close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--muted);line-height:1}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

.kpal-back{
  position:fixed;inset:0;z-index:120;background:var(--scrim);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;
  animation:fade var(--t-in) var(--e-decel);
}
.kpal{
  width:100%;max-width:580px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);
  overflow:hidden;animation:pop var(--t-in) var(--e-decel);
}
.kpal input{
  width:100%;border:none;border-bottom:1px solid var(--line);
  padding:16px 18px;font:inherit;font-size:1rem;background:transparent;color:var(--ink);
}
.kpal input:focus{outline:none}
.kpal ul{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto}
.kpal li{
  display:flex;align-items:center;gap:11px;padding:10px 13px;
  border-radius:var(--r-sm);cursor:pointer;font-size:.9rem;color:var(--text);
}
.kpal li[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.kpal li .grp{margin-left:auto;font-size:.71rem;color:var(--muted)}
.kpal li[aria-selected="true"] .grp{color:var(--accent)}
.kpal .empty{padding:26px;text-align:center;color:var(--muted);font-size:.9rem}

/* ---------- auth screens ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);padding:34px;max-width:430px;width:100%}
.auth-card .brand{text-align:center;margin-bottom:22px}
.auth-card .brand img{max-width:140px}
.auth-card h1{font-size:1.3rem;text-align:center;margin-bottom:6px}
.auth-card .sub{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:24px}
.auth-card .btn{width:100%}
.auth-note{text-align:center;font-size:.85rem;color:var(--muted);margin-top:20px}
.auth-tabs{display:flex;gap:6px;background:var(--surface-3);padding:5px;border-radius:var(--r-pill);margin-bottom:22px}
.auth-tabs button{flex:1;padding:9px 12px;border-radius:var(--r-pill);border:none;background:transparent;font-family:var(--font);font-size:.86rem;font-weight:600;color:var(--muted);cursor:pointer}
.auth-tabs button.active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

/* ---------- utility ---------- */
.muted{color:var(--muted)}
.small{font-size:.83rem}
.mono{font-family:var(--mono);font-size:.85rem}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:24px}
.mb0{margin-bottom:0}.mb1{margin-bottom:8px}.mb2{margin-bottom:16px}.mb3{margin-bottom:24px}
.flex{display:flex;gap:12px;align-items:center}
.flex-wrap{flex-wrap:wrap}
.spacer{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.text-right{text-align:right}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:1024px){.grid2{grid-template-columns:1fr}}
@media(max-width:900px){
  .admin-topbar{padding:16px 16px 0}
  .admin-content{padding:14px 16px 56px}
  .form-grid{grid-template-columns:1fr}
  .field.col-2{grid-column:auto}
  .stat-entry input{width:66px;font-size:16px} /* 16px stops iOS zoom-on-focus */
}

/* ---------- reduced motion ----------
   Per MDN the preference means remove/reduce/REPLACE — so translate and scale
   go, while opacity cross-fades stay as the sanctioned substitute. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
  .admin-side{transition:none}
  .stat-tile:hover,.card-stat:hover,.media-item:hover,.btn:hover{transform:none}
  @keyframes pop{from{opacity:0}to{opacity:1}}
}

.kpal li .ttl{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --------------------------------------------------------------------------
   Shell surfaces stated explicitly. These were previously inherited, which let
   the public stylesheet's stale .admin-main rule paint a light background
   behind near-white headings in dark mode — unreadable.
   -------------------------------------------------------------------------- */
.admin-shell{background:var(--bg)}
.admin-main{background:var(--bg);padding:0}
.admin-content{background:transparent}

/* sidebar now starts at the nav — the topbar carries the brand */
.admin-side{padding-top:8px}
.admin-userbox .userbox-links{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.admin-userbox .userbox-links a{
  padding:5px 0;color:var(--muted);text-decoration:none;
  transition:color var(--t-hover) var(--e-standard);
}
.admin-userbox .userbox-links a:hover{color:var(--ink);text-decoration:none}

/* ---------- stat entry: rank chip + best-of marker ----------
   Two states that must be readable at a glance while typing at a field:
   a rank that is PENDING (entered but not yet published to the public Top 50),
   and a value that was recorded but is NOT the player's best, so her profile
   number did not change. Without the second one the grid looks like it lost
   the number that was just typed. */
.rank-chip{
  display:inline-block;margin-left:6px;font:600 12px/1 var(--mono);
  color:var(--muted);vertical-align:middle;
}
.rank-chip.pending{
  color:var(--warn);background:var(--warn-soft);
  border:1px solid var(--warn-line);border-radius:var(--r-pill);padding:3px 7px;
}
input.not-best{
  background:var(--warn-soft);
  box-shadow:inset 0 0 0 1px var(--warn-line);
}

/* ---------- bulk selection on the players list ---------- */
.table th.sel,.table td.sel{width:34px;text-align:center;padding-left:10px;padding-right:0}
.table td.sel input[disabled]{opacity:.35;cursor:not-allowed}
.bulk-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 10px;padding:10px 14px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-sm);
}
.bulk-bar .spacer{flex:1}
.bulk-bar .muted{font-size:12px}