/* ══════════════════════════════════════════════════════════════════════════
   SCAI design system — shared theme for every page
   ─────────────────────────────────────────────────────────────────────────
   Loaded by app/*.html, default apps/*.html and superadmin/*.html as
   <link rel="stylesheet" href="/scai-theme.css?v=1">.

   ONE theme: dark only (Adam 2026-10-14 — the cream light theme is killed;
   the app is used by Charleston Strength Club, so the in-app palette is the
   CHS website palette: black, white, and CHS red #9D181B — NO other hues,
   NO gray. Rose #E11D48 remains the SCAI website/brand color only and must
   not appear in-app. The one functional exception is green #3fb950, kept
   solely where it means done/completed; errors use the app red #9D181B.
   Hierarchy comes from size, weight, spacing and borders — secondary text
   is white, differentiated by size/weight, never by a gray tone. Borders
   and dividers are white at alpha (the palette color white, translucent).

   CONTRACT: this file only adds and re-scopes. It never removes a page's own
   styles, so a page that ignores it still looks exactly as it did.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* surfaces — black only; separation comes from borders, not gray fills */
  --bg:#000000; --bg2:#000000; --bg3:#000000; --bg4:#000000;
  --border:rgba(255,255,255,.28); --border-soft:rgba(255,255,255,.16);
  /* text — white only; secondary text is white at a smaller size/weight */
  --text:#ffffff; --muted:#ffffff; --dim:#ffffff;
  /* the single accent — CHS red. Stray purple/blue/gold are gone from chrome. */
  --accent:#9D181B; --accent-hi:#C1272D; --accent-press:#7A1215;
  --accent-tint:rgba(157,24,27,.12); --accent-border:rgba(157,24,27,.35);
  /* semantic — green survives ONLY as the done/completed status color;
     error red IS the app red; amber/blue tokens collapse to the app red so
     any legacy var(--amber)/var(--blue) reference renders in-palette. */
  --green:#3fb950; --amber:#9D181B; --red:#9D181B; --blue:#9D181B;
  /* shape — 6px corners is the "sharper" half of athletic/industrial */
  --radius-sm:6px; --radius:8px; --radius-lg:12px; --radius-pill:999px;
  /* density — phone 44 / tablet 40 / desktop 34 (see §9) */
  --btn-h:34px; --btn-h-touch:44px; --btn-pad-x:12px; --btn-font:12px;
  --btn-gap:10px;
  /* type */
  --font:'Inter',-apple-system,system-ui,-apple-system,sans-serif;
  --display:'Oswald',system-ui,sans-serif;
  --type-section:16px; --type-body:14px; --type-label:11px; --type-metric:28px;
  /* layout */
  --shell-max:1240px; --shell-pad:20px; --grid-min:220px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 16px rgba(0,0,0,.45);
  /* accent as small text uses the lighter same-hue step for contrast
     on black (#9D181B on #000 = 3.4:1, #C1272D = 4.6:1) */
  --accent-text:var(--accent-hi);
  color-scheme:dark;
}

/* NO light theme (Adam 2026-10-14): the app is dark only. The cream
   light theme that lived here is deleted, not restyled — data-theme="light"
   and OS light preference now render the same dark CHS palette. */

/* ── 2 · SHELL ──────────────────────────────────────────────────────────── */
/* Every page gets a centred content column so nothing hugs the left edge of a
   wide screen. Pages opt in with .wrap / .container as they already do. */
.wrap,.container{
  width:min(var(--shell-max),100%);
  margin-inline:auto;
  padding-inline:var(--shell-pad);
}
@media (max-width:639px){ :root{ --shell-pad:14px } }

/* ── 3 · CARD GRIDS — auto-fill + centred (this is the dead-space fix) ──── */
.grid-auto,.card-grid,.feature-grid,.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--grid-min),1fr));
  gap:14px;
  justify-content:center;
}

/* ── 4 · TYPE ───────────────────────────────────────────────────────────── */
body{ font-family:var(--font); }
h1,h2,h3,h4,.hdg{
  font-family:var(--display);
  font-weight:700;                 /* was 600 — heavier, per direction A */
  letter-spacing:-.02em;
  text-transform:uppercase;
}
/* metrics never jitter */
.metric,.stat,.kpi,.tabular,table,td,th,.price{
  font-variant-numeric:tabular-nums;
}
/* hard floor: nothing renders at 10px */
body :is(small,.tiny){ font-size:var(--type-label) }
[style*="font-size:10px"]{ font-size:var(--type-label) !important }

/* ── 5 · BUTTONS ────────────────────────────────────────────────────────── */
/* Craft pass. Works alongside a page's own .btn — same class, better states. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--btn-h); min-height:var(--btn-h);
  padding:0 var(--btn-pad-x);
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg3); color:var(--text);
  font-family:var(--font); font-size:var(--btn-font); font-weight:600;
  line-height:1.2; white-space:nowrap; cursor:pointer; text-decoration:none;
  box-shadow:var(--shadow-1);
  transition:background .12s ease,border-color .12s ease,transform .06s ease;
}
.btn:hover{ background:var(--bg4); border-color:var(--muted) }
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn:disabled,.btn[disabled]{ opacity:.42; pointer-events:none; box-shadow:none }
.btn-sm{ height:calc(var(--btn-h) - 4px); min-height:calc(var(--btn-h) - 4px) }

/* variants */
.btn-primary{ background:var(--accent); border-color:var(--accent-hi); color:#fff }
.btn-primary:hover{ background:var(--accent-hi); border-color:var(--accent-hi) }
.btn-primary:active{ background:var(--accent-press) }
.btn-tint{ background:var(--accent-tint); border-color:var(--accent-border); color:var(--accent-text) }
.btn-tint:hover{ border-color:var(--accent) }
.btn-ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--muted) }
.btn-ghost:hover{ background:var(--bg3); color:var(--text) }
.btn-outline{ border-color:var(--accent-border); color:var(--accent-text); background:transparent }
.btn-outline:hover{ border-color:var(--accent) }

/* ── 6 · SEGMENTED CONTROL ──────────────────────────────────────────────── */
/* Used for the tab rails. A page opts in with .seg on a container whose
   children are buttons/links. */
.seg{
  display:inline-flex; align-items:center; gap:2px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:3px;
  max-width:100%; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.seg::-webkit-scrollbar{ display:none }
.seg > .btn,.seg > button,.seg > a{
  background:transparent; border:0; color:var(--muted);
  border-radius:var(--radius-pill);
  height:var(--btn-h); padding:0 12px; font-weight:600;
  flex:0 0 auto; box-shadow:none;
}
.seg > .btn:hover,.seg > button:hover,.seg > a:hover{
  background:var(--bg4); color:var(--text)
}
.seg > [aria-selected="true"],.seg > .active{ background:var(--accent); color:#fff }

/* ── 7 · ICON-FIRST ─────────────────────────────────────────────────────── */
/* Icon over label. Add .ifbtn to a button and keep the label as a child. */
.ifbtn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-width:74px; padding:9px 8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--bg3); color:var(--muted);
  font-family:var(--font); font-size:10.5px; font-weight:600; line-height:1.15;
  text-align:center; cursor:pointer; text-decoration:none;
  box-shadow:var(--shadow-1);
  transition:background .12s,color .12s,transform .06s;
}
.ifbtn .icon,.ifbtn .icon-sm,.ifbtn .icon-lg{ width:19px; height:19px }
.ifbtn:hover{ background:var(--bg4); color:var(--text) }
.ifbtn:active{ transform:translateY(1px) }
.ifbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.ifbtn[aria-pressed="true"],.ifbtn.active{
  background:var(--accent-tint); border-color:var(--accent-border); color:var(--accent-text)
}

/* ── 8 · CARDS ──────────────────────────────────────────────────────────── */
.card,.tier,.feature,.wrap-card,.contact-box{
  border-radius:var(--radius-sm);
  border-color:var(--border);
}
.card{ background:var(--bg2) }
.tier:hover,.feature:hover{ border-color:var(--accent) }

/* ── 9 · DENSITY LADDER ─────────────────────────────────────────────────── */
/* The fix for "buttons are way too big": targets are sized per tier, not
   globally. Phone keeps 44px touch targets; desktop drops to 34px. */
@media (min-width:640px) and (max-width:1024px){
  :root{ --btn-h:40px; --btn-pad-x:13px; --btn-font:12.5px }
}
@media (min-width:1025px){
  :root{ --btn-h:34px; --btn-pad-x:12px; --btn-font:12px }
}
@media (max-width:639px){
  :root{ --btn-h:44px; --btn-pad-x:14px; --btn-font:13px }
}
/* coarse pointers (phones/tablets in touch mode) keep the touch target */
@media (pointer:coarse){
  :root{ --btn-h:var(--btn-h-touch) }
  .btn{ min-height:36px }        /* coarse gets 44 only for primary actions */
}

/* ── 10 · MODALS — width/centring only ─────────────────────────────────── */
/* The app owns modal display and alignment: it hides them with display:none and
   switches phone/desktop alignment itself. Setting `display` here overrides that
   and leaves EVERY modal permanently open (shipped bug, 2026-09-30). Never set
   display or alignment on the modal containers from here. */
.modal{
  max-width:min(1000px,94vw);
  margin-inline:auto;
}

/* ── 11 · FOCUS + A11Y ──────────────────────────────────────────────────── */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
/* Respect a stated reduction in motion. */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ── 12 · THEME TOGGLE (opt-in) ─────────────────────────────────────────── */
/* Pages that want the switch add <button class="theme-toggle">. Without
   JS the button is hidden rather than broken. */
.theme-toggle{
  display:none;
  align-items:center; gap:6px;
  height:var(--btn-h); padding:0 var(--btn-pad-x);
  border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--bg3); color:var(--text);
  font-family:var(--font); font-size:var(--type-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}
.theme-toggle.ready{ display:inline-flex }
.theme-toggle:hover{ background:var(--bg4) }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
/* ── Messages tab ───────────────────────────────────────────────────────
   Additive only. Every rule is scoped to .msg-*, which nothing else uses,
   so this cannot reach a component it does not own. Deliberately no
   `display` on any shared class — the 2026-09-30 outage came from a shared
   layer setting display on a component the app owned.                    */
.msg-split{ display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:12px; align-items:start }
.msg-list{ display:flex; flex-direction:column; gap:4px; max-height:62vh; overflow-y:auto }
.msg-pane{ display:flex; flex-direction:column; gap:10px; min-height:38vh }
@media (max-width:768px){ .msg-split{ grid-template-columns:1fr } .msg-list{ max-height:34vh } }

.msg-row{ display:flex; gap:10px; width:100%; text-align:left; padding:10px; cursor:pointer;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font:inherit }
.msg-row:hover{ background:var(--bg3) }
.msg-row.active{ border-color:var(--accent); background:var(--accent-bg) }
.msg-ava{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:32px; height:32px; border-radius:50%; background:var(--bg4); color:var(--text);
  font-size:12px; font-weight:700; font-family:var(--font-display,inherit) }
.msg-row-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto }
.msg-row-top{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted) }
.msg-subject{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.msg-preview{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.msg-when{ margin-left:auto; font-size:10px; color:var(--muted); white-space:nowrap }
.msg-unread{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px;
  padding:0 4px; border-radius:8px; background:var(--accent); color:var(--bg1); font-size:10px; font-weight:700 }

.msg-kind{ display:inline-block; padding:1px 6px; border-radius:4px; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--border); color:var(--muted) }
.msg-kind-desk{ color:var(--accent); border-color:var(--accent) }
.msg-kind-staff{ color:var(--green); border-color:var(--green) }
.msg-kind-client{ color:var(--blue,var(--accent)); border-color:var(--blue,var(--accent)) }

.msg-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding-bottom:8px; border-bottom:1px solid var(--border) }
.msg-head-sub{ font-size:11px; color:var(--muted); white-space:nowrap }
.msg-scroll{ display:flex; flex-direction:column; gap:8px; max-height:44vh; overflow-y:auto; padding:4px 2px }
.msg-bubble{ align-self:flex-start; max-width:82%; padding:8px 10px; border-radius:10px;
  background:var(--bg2); border:1px solid var(--border) }
.msg-bubble.mine{ align-self:flex-end; background:var(--accent-bg); border-color:var(--accent) }
.msg-bubble.from-client{ border-left:3px solid var(--green) }
.msg-bub-head{ font-size:10px; font-weight:600; color:var(--muted); margin-bottom:3px }
.msg-role{ font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:9px }
.msg-text{ font-size:13px; line-height:1.45; overflow-wrap:anywhere }

.msg-compose{ display:flex; gap:8px; align-items:flex-end; padding-top:8px; border-top:1px solid var(--border) }
.msg-compose textarea{ flex:1 1 auto; box-sizing:border-box; background:var(--bg2); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px; font:inherit; font-size:13px; resize:vertical }
.msg-status{ font-size:11px; color:var(--muted) }
.msg-empty{ padding:24px; text-align:center; color:var(--muted); font-size:12px }