/* Dark theme for the auth / admin / status pages (login, login_not_registered,
   register, register_request, register_terms, check-email, verify-confirm, connect,
   error, admin). Loaded AFTER each page's own inline <style>, so these rules win.

   Light mode is untouched: every rule here is scoped to :root[data-theme="dark"],
   which fara-theme.js sets before paint. Palette values are copied from index.html's
   dark token block so the whole product is one theme, not two that drift.

   These pages share one token vocabulary (--bg / --card / --ink / --muted / --accent
   / --border / ...), so the token block below does most of the work. The rules under
   it only retone the places a page hardcoded a light literal that a token cannot
   reach. Selectors for elements a given page does not have are simply inert there,
   which is why this is ONE shared file instead of ten near-identical inline blocks. */

/* ---- Shared responsive correction (BOTH themes) ----
   These pages lay their header out as `display:flex; justify-content:space-between`
   with the title on the left and the meta links on the right. On a phone the two
   compete for the same line and interleave (admin.html's title wraps INTO its "Sign
   in / back to chat / log out" links). Nothing overflows the viewport, so an overflow
   check does not catch it; it just reads badly. Letting the header wrap puts the title
   on its own line and the links below it. Pages with no .meta (login, error, ...) are
   unaffected apart from the tighter phone padding. */
@media (max-width: 560px) {
  header { flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px; }
  header h1 { flex: 1 1 100%; font-size: 15px; }
  header .meta { flex: 1 1 100%; flex-wrap: wrap; }
}

:root[data-theme="dark"] {
  /* Dark native UI: scrollbars, form controls, spinners follow the theme. */
  color-scheme: dark;
  --bg: #1f1f1f;
  --card: #272727;
  --ink: #e8e8e8;
  --muted: #a6a6a6;
  --muted-2: #757575;
  /* --accent is the LIGHTER green, for foreground use (links, borders, icons) so it
     stays visible on the dark page. Filled surfaces use --accent-fill so white text
     on them still reads (~5:1). Same split as index.html. */
  --accent: #46b472;
  --accent-fill: #2e7d52;
  --accent-soft: #1b2c22;
  --accent-hover: #348a58;
  --soft: #1b2c22;          /* the auth pages' name for --accent-soft */
  --code-bg: #2e2e2e;
  --warn: #e3b24a;
  --warn-soft: #322a16;
  --refusal: #e88a8a;
  --refusal-soft: #341f1f;
  --border: #3a3a3a;
  --chip: #2e2e2e;
  --info: #7ba6e8;
  --info-soft: #1a2535;
}

/* Header. Light mode draws it as an INVERTED dark bar (background: var(--ink));
   in dark mode --ink is the light text colour, which would flip the header light.
   Pin it to the dark chrome surface and keep its light text. */
:root[data-theme="dark"] header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

/* Form fields: the light pages paint #fafafa idle and #fff on focus, both of which
   stay white on a dark page. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--border);
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
  background: var(--bg);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--muted); }

/* Filled buttons: --accent is the light foreground green in dark mode, so a button
   filled with it would wash out its white label. Fill with --accent-fill instead. */
:root[data-theme="dark"] button,
:root[data-theme="dark"] .actions .primary,
:root[data-theme="dark"] .btn-primary { background: var(--accent-fill); color: #ffffff; }
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .actions .primary:hover,
:root[data-theme="dark"] .btn-primary:hover { background: var(--accent-hover); }
:root[data-theme="dark"] button:disabled { background: var(--border); color: var(--muted); }
/* Link-styled buttons in the header sit on the header bar, not on a green fill. */
:root[data-theme="dark"] header button.linkish { background: transparent; color: var(--muted); }
:root[data-theme="dark"] header button.linkish:hover { color: var(--ink); }

/* Secondary / ghost button: light mode hovers to #fafafa. */
:root[data-theme="dark"] .actions .secondary { background: transparent; color: var(--ink); }
:root[data-theme="dark"] .actions .secondary:hover { background: var(--chip); color: var(--ink); }

/* Cards and the soft status panels. The success panels hardcode a pale green
   hairline (#bbf7d0) and the error panels a pale red one (#fecaca); both read as a
   bright line on a dark surface. */
:root[data-theme="dark"] .card { background: var(--card); border-color: var(--border); box-shadow: none; }
:root[data-theme="dark"] .note,
:root[data-theme="dark"] .success,
:root[data-theme="dark"] .sent { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
:root[data-theme="dark"] .error,
:root[data-theme="dark"] .err { background: var(--refusal-soft); border-color: var(--refusal); color: var(--ink); }

/* Copy-the-link affordance (login_not_registered, register_request): white chip on a
   light grey well. */
:root[data-theme="dark"] .copy-row,
:root[data-theme="dark"] .link-box { background: var(--chip); border-color: var(--border); }
:root[data-theme="dark"] .copy-btn { background: var(--card); color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] .copy-btn:hover { background: var(--chip); }
:root[data-theme="dark"] .copy-btn.copied { background: var(--accent-fill); color: #ffffff; }

/* Inline code / token blocks (connect.html). */
:root[data-theme="dark"] code,
:root[data-theme="dark"] pre { background: var(--code-bg); color: var(--ink); }

/* ---- admin.html ---- */
:root[data-theme="dark"] table { background: var(--card); }
:root[data-theme="dark"] th { background: var(--chip); color: var(--ink); border-bottom-color: var(--border); }
:root[data-theme="dark"] td { border-bottom-color: var(--border); color: var(--ink); }
:root[data-theme="dark"] tr:hover td { background: rgba(255, 255, 255, 0.04); }
/* Usage meter: the light track (#e5e7eb) reads as a bright bar on the dark page. */
:root[data-theme="dark"] .progress { background: var(--border); }
:root[data-theme="dark"] .progress-fill { background: var(--accent-fill); }
:root[data-theme="dark"] .progress-fill.danger { background: var(--refusal); }
/* Role pills: light-tinted fills with dark ink. Retone fill + ink together so the
   pill keeps its meaning-by-colour without becoming a bright block. */
:root[data-theme="dark"] .pill { border-color: var(--border); }
:root[data-theme="dark"] .pill.role-consultant { background: var(--info-soft); color: var(--info); border-color: var(--info); }
:root[data-theme="dark"] .pill.role-admin { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .section { background: var(--card); border-color: var(--border); }