/* The workspace layer for the administration pages that are not the masterlists.

   Why this file exists. theme.css has always defined the workspace's three
   themes as tokens (--t-bg, --t-surface, --t-accent …) and theme.js has always
   loaded it, written the choice to html[data-theme] and rendered a Light / Grey /
   Dark switcher. But only masterlist.css ever consumed those tokens. Every other
   page carried its own copy of the same dark palette — :root{--bg:#090909;
   --panel:#141414;--line:#303030;--red:#d93a45…} — written out as literal hex, so
   the switcher appeared on seven pages and changed exactly two of them. A control
   that reports a choice the page cannot honour is worse than no control, so this
   sheet is the missing half of that feature.

   What it does. Two things, and nothing else. It maps the legacy variable names
   those pages already use (--bg, --panel, --panel2, --line, --text, --muted,
   --red, --red-dark, --green, --amber, --radius) onto the theme tokens, and it
   repaints the handful of components whose colours were written as literals
   rather than through those variables — buttons, fields, tables, status badges,
   notices, the auth cards, the gallery tiles and the pricing surfaces. Because
   the page's own rules come first and this sheet is linked after them, a rule
   here wins at equal specificity without needing a single !important.

   What it deliberately does not do. It never touches layout: widths, padding,
   grid columns, ordering and the page's own structure are unchanged, because the
   complaint this answers is that the pages do not share a look, not that they
   need the masterlist's docked-editor geometry. It also never defines behaviour —
   no rule here reads data or names a state the page's script does not own.

   The dark values are the fallback on bare :root, so a page that somehow loads
   this sheet without theme.css still renders its old dark appearance instead of
   an unstyled one. Adopting the masterlist's tokens does shift dark slightly
   (#090909 to #0a0a0b, #d93a45 to #e0454f) and adopts its type stack: that is the
   unification, not an accident. Light and grey are new here.
*/

/* ---- the legacy names, answered from the palette ------------------------- */
/* These are the same aliases masterlist.css declares, so the two surfaces read
   from one palette. A page that keeps its own :root block is not in conflict:
   this sheet is linked after it and answers the same custom properties. */
:root{
  color-scheme:var(--t-scheme,dark);
  --bg:var(--t-bg,#0a0a0b);--canvas:var(--t-canvas,#0e0e10);
  --panel:var(--t-surface,#141416);--panel2:var(--t-surface-2,#191a1d);--panel-2:var(--t-surface-2,#191a1d);
  --line:var(--t-line,#26262b);--line-strong:var(--t-line-strong,#3a3a42);
  --text:var(--t-text,#f4f4f6);--dim:var(--t-dim,#b4b4bd);--muted:var(--t-mute,#85858f);
  --red:var(--t-accent,#e0454f);--red-dark:var(--t-accent,#e0454f);--accent-soft:var(--t-accent-soft,rgba(224,69,79,.14));--accent-line:var(--t-accent-line,rgba(224,69,79,.48));
  --green:var(--t-ok,#87d9a3);--amber:var(--t-warn,#eac378);--blue:var(--t-info,#9fd2e8);
  --field:var(--t-field,#0c0c0e);--field-line:var(--t-field-line,#3a3a42);
  --radius:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif
}

/* ---- page frame ---------------------------------------------------------- */
body{background:var(--bg);color:var(--text);font-family:var(--font)}
.header,.head{border-bottom-color:var(--line)}
.kicker,.section-label{color:var(--muted)}
.eyebrow{color:var(--red)}
.header p,.head .sub,.sub,.section-head p,.footer-actions p{color:var(--muted)}

/* ---- buttons ------------------------------------------------------------- */
/* One button vocabulary: a neutral control, a filled accent primary, and the
   three status fills, all read from tokens so they invert correctly in light. */
.btn{border-color:var(--line-strong);background:var(--t-surface-3,#212227);color:var(--text)}
.btn:hover{border-color:var(--dim);background:var(--panel2)}
.btn.primary{background:var(--red);border-color:var(--red);color:var(--t-accent-ink,#fff)}
.btn.primary:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--t-accent-ink,#fff)}
.btn.success,.btn.ok{border-color:var(--t-ok-line,#2f5a3d);background:var(--t-ok-bg,#13251a);color:var(--green)}
.btn.danger{border-color:var(--t-bad-line,#5c2a30);background:transparent;color:var(--t-bad,#ff9aa2)}
.btn.amber{border-color:var(--t-warn-line,#5c4a1c);background:transparent;color:var(--amber)}

/* ---- fields -------------------------------------------------------------- */
/* Scoped away from checkbox, radio, range and file, whose UA appearance would
   not survive a background and border of ours; the switch in the pricing page
   hides its checkbox anyway. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select,textarea,.field input,.filters input,.filters select,.auth-card input,.money input{
  background:var(--field);border-color:var(--field-line);color:var(--text)
}
.field label,.auth-card label{color:var(--muted)}
.money{background:var(--field);border-color:var(--field-line)}
.money span{color:var(--muted)}
.money input{color:var(--text)}

/* ---- surfaces ------------------------------------------------------------ */
.card,.modal,.auth-card{background:var(--panel);border-color:var(--line)}
.modal-overlay{background:rgba(4,4,5,.62)}
.follow{background:var(--t-bad-bg,#2a1518);border-color:var(--t-bad-line,#5c2a30)}
.follow-head{border-bottom-color:var(--t-bad-line,#5c2a30);color:var(--t-bad,#ff9aa2)}

/* ---- tables -------------------------------------------------------------- */
th,td{border-bottom-color:var(--line)}
th{background:var(--panel2);color:var(--muted)}
td{color:var(--dim)}
tr.data-row:hover,tr.selected{background:var(--t-row-hover,rgba(224,69,79,.10))}
tr.selected{background:var(--t-row-selected,rgba(224,69,79,.17))}
.empty{color:var(--muted)}

/* ---- status badges ------------------------------------------------------- */
.badge,.status{font-size:10px;font-weight:700}
.active,.approved,.status.active{background:var(--t-ok-bg,#13251a);color:var(--green)}
.expired,.rejected,.status.inactive{background:var(--t-bad-bg,#2a1518);color:var(--t-bad,#ff9aa2)}
.due,.pending,.status.nocharge{background:var(--t-warn-bg,#2a2110);color:var(--amber)}

/* ---- notices ------------------------------------------------------------- */
.notice.ok{background:var(--t-ok-bg,#13251a);color:var(--green);border-color:var(--t-ok-line,#2f5a3d)}
.notice.err{background:var(--t-bad-bg,#2a1518);color:var(--t-bad,#ff9aa2);border-color:var(--t-bad-line,#5c2a30)}
.notice.warn{background:var(--t-warn-bg,#2a2110);color:var(--amber);border-color:var(--t-warn-line,#5c4a1c)}
.notice.info{background:var(--t-info-bg,#14232a);color:var(--blue);border-color:var(--t-info-line,#2c515e)}
.auth-err{color:var(--t-bad,#ff9aa2)}
.diff-old{color:var(--t-bad,#ff9aa2)}
.diff-new{color:var(--green)}

/* ---- tabs ---------------------------------------------------------------- */
.htab{border-color:var(--line-strong);background:var(--panel2);color:var(--dim)}
.htab.active,.htab[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--text)}

/* ---- pricing surfaces (integration-pricing.html) ------------------------- */
.price-card{background:linear-gradient(145deg,var(--panel2),var(--panel));border-color:var(--line)}
.price-head{border-bottom-color:var(--line)}
.active-control{background:var(--panel2);border-color:var(--line)}
.slider{background:var(--line-strong)}
.slider:before{background:var(--dim)}
.switch input:checked + .slider{background:var(--red)}
.switch input:checked + .slider:before{background:var(--t-accent-ink,#fff)}
.section-head h2{color:var(--text)}

/* ---- gallery tiles (store-logos.html, event-logos.html) ------------------ */
/* The logo wells are the one place that stays a recessed field rather than a
   surface, because the artwork inside is usually light-on-transparent and needs
   the darker ground the palette already provides. */
.logo{background:var(--field);border-color:var(--line)}
.name{color:var(--text)}
.meta{color:var(--muted)}