/* Acc101 — app-specific component styles.

   The GENERIC design layer — self-hosted fonts, Ops Light/Dark tokens, the
   Bootstrap --bs-* mapping, --shadow/--shadow-lg elevation, brand buttons,
   edge-clarity (cards/inputs/tables), a11y focus/reduced-motion defaults,
   the viewport-lock layout (#wrapper / #page-content-wrapper) AND the sidebar
   rail component (.s-side CSS + /theme/sidebar.js behavior; our markup in
   views/partials/sidebar.ejs) — lives in the shared `@aria-framework/theme`
   npm package, served from /theme/theme.css and loaded BEFORE this file
   (see views/partials/header.ejs, views/auth/login.ejs, views/errors/*).

   ⇒ Change shared tokens/colours/components in the package (bump its version,
     `npm update @aria-framework/theme` here), NOT in this file.
   ⇒ Keep ONLY Acc101-specific component rules below. All var(--brand|--line|
     --surface|--text|--shadow…) references resolve from theme.css.
   ⇒ Never paint a scheme-independent surface with var(--side-*) — those
     tokens follow the light/dark scheme (theme 0.5.0+); use fixed hexes. */

/* Chrome bits that use fixed Bootstrap utilities need a nudge in dark mode
   until they're rebuilt on tokens (the error pages still use body.bg-light;
   login dropped it in v1.44.0 — its pane paints var(--paper) directly). */
[data-bs-theme="dark"] body.bg-light,
[data-bs-theme="dark"] .bg-light { background-color: var(--paper) !important; }

/* ── Top bar (ported from the Support101 reference shell) ─────────────────*/
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 13px 24px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--text); }
.topbar .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── KPI cards ────────────────────────────────────────────────────────────*/
.card h3 {
  margin-bottom: 0;
}

/* ── Table tweaks ─────────────────────────────────────────────────────────*/
.table th {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--text-soft, #6c757d);
}

/* ── Login split screen ───────────────────────────────────────────────────*/
/* Two panels: a dark pitch surface and the sign-in pane. Shared shape with
   Support101's login (same product family); the copy is Acc101's own. */
.login-split{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.login-art{ position:relative; overflow:hidden; padding:54px; display:flex; flex-direction:column; justify-content:space-between;
  /* Deliberately dark in BOTH schemes (white headings/copy sit on it) — fixed
     hexes, NOT var(--side-*): since theme 0.5.0 the rail tokens follow the
     scheme, and a light gradient here would wash out the white text. */
  background:linear-gradient(160deg, #0E1417, #141C21); color:#AEB8BE; }
/* Dark mode only: the pane's --paper (#0C1215) is DARKER than this panel's own
   gradient (#0E1417 → #141C21), so the split all but vanishes and the one bold
   surface stops reading as a surface. A hairline restores the seam. Light mode
   needs none — and must not have one, since a light --line against the
   near-black panel would read as an artifact rather than an edge. */
[data-bs-theme="dark"] .login-art{ border-right:1px solid var(--line); }
.login-art::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0) 0 0/26px 26px; }
.login-art > *{ position:relative; z-index:1; }
.la-brand{ display:flex; align-items:center; gap:12px; }
.la-brand .mark{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:20px;
  background:linear-gradient(140deg, var(--brand-bright), var(--brand-deep)); }
.la-brand b{ color:#fff; font-size:19px; font-weight:700; }
.la-pitch{ max-width:430px; }
.la-pitch h2{ color:#fff; font-size:32px; font-weight:700; line-height:1.18; letter-spacing:-.02em; }
.la-pitch p{ margin-top:14px; font-size:15px; line-height:1.6; color:#AEB8BE; }
.la-feats{ display:flex; flex-direction:column; gap:12px; }
.la-feats div{ display:flex; align-items:center; gap:11px; font-size:13.5px; }
.la-feats i{ color:var(--brand-bright); font-size:17px; }

.login-pane{ position:relative; display:grid; place-items:center; padding:40px; background:var(--paper); }
.login-box{ width:100%; max-width:360px; }
.login-box h1{ font-size:23px; font-weight:700; letter-spacing:-.01em; margin:0; }
.login-box .lead{ color:var(--text-soft); margin:4px 0 24px; font-size:14px; }
.login-theme{ position:absolute; top:20px; right:20px; display:flex; gap:3px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:3px; }
.login-theme button{ border:0; background:transparent; color:var(--text-faint); width:30px; height:28px; border-radius:7px; cursor:pointer; display:grid; place-items:center; font-size:14px; }
.login-theme button:hover{ color:var(--text-soft); }
.login-theme button.on{ background:var(--surface-2); color:var(--brand); }
/* The theme's global ring (button:focus-visible, outline-offset:2px) would
   straddle this pill's 1px border; tuck it inside the 3px padding instead. */
.login-theme button:focus-visible{ outline-offset:-1px; border-radius:7px; }
@media (max-width: 860px){ .login-split{ grid-template-columns:1fr; } .login-art{ display:none; } }