/*
 * Front Office design system - token structure and component classes ported
 * directly from ComCen's own public/adm/assets/style.css, with --accent
 * swapped from teal to peach-orange (per the original scoping doc: same
 * look/feel as ComCen, distinguishable at a glance). Everything else
 * (--ok/--warn/--fail, spacing/radius tokens, font stack) carries over
 * unchanged - those are semantic-status colors, not brand colors, and
 * don't need to differ between the two CPs.
 *
 * Only the rules Front Office actually uses so far (login page, dashboard
 * tiles) are ported - not ComCen's full 784-line stylesheet. More gets
 * added here as later sections (Support/Users/etc.) need their own
 * components, matching whatever ComCen already proved out for the same
 * shape of UI rather than inventing something new.
 */

:root {
  --bg: #f7f5f1;
  --panel: #ffffff;
  --panel-border: #e2ddd3;
  --text: #24282b;
  --text-dim: #6b7280;
  --accent: #c9652f;
  --accent-hover: #a85021;
  --accent-tint: rgba(201, 101, 47, .10);
  --ok: #2f9e68;
  --warn: #b8791f;
  --fail: #c53d43;
  --fail-tint: rgba(197, 61, 67, .12);
  --highlight: #8a6d1a;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --font-display: "Dosis", "Century Gothic", ui-rounded, system-ui, sans-serif;
  --font-body: "Dosis", "Century Gothic", ui-rounded, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --tile-min: 152px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181a;
    --panel: #1c2224;
    --panel-border: #2e3538;
    --text: #e8e6e1;
    --text-dim: #9a9a94;
    --accent: #e8874a;
    --accent-hover: #f09d5f;
    --accent-tint: rgba(232, 135, 74, .14);
    --ok: #4cbf7d;
    --warn: #d99a3f;
    --fail: #e2696d;
    --fail-tint: rgba(226, 105, 109, .16);
    --highlight: #e0c04a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 4px 20px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"] {
  --bg: #14181a;
  --panel: #1c2224;
  --panel-border: #2e3538;
  --text: #e8e6e1;
  --text-dim: #9a9a94;
  --accent: #e8874a;
  --accent-hover: #f09d5f;
  --accent-tint: rgba(232, 135, 74, .14);
  --ok: #4cbf7d;
  --warn: #d99a3f;
  --fail: #e2696d;
  --fail-tint: rgba(226, 105, 109, .16);
  --highlight: #e0c04a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 20px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

/* Found live building Users (2026-08-28): a bare "light dark" here lets
   native form controls (input/select) follow the OS's own dark-mode
   preference regardless of the page's own manual data-theme toggle - so
   toggling to light theme while the OS is in dark mode left every input
   rendering with a near-black background and unreadable text. Pre-existing
   across the whole app (confirmed on Blocked's own inputs too), not
   specific to Users - scoping color-scheme to the explicit toggle fixes it
   everywhere at once. */
html { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--font-body);
  transition: background .15s ease, color .15s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Flagged live (2026-08-28): every page prints <h1>/<h2> straight into body
   flow with no wrapping container, while everything below it sits in a
   `padding:0 18px` div - so headers rendered flush against the viewport
   edge, one indent shallower than their own content. Systemic across every
   page (Dashboard/Support/FAQ/Blocked/Users alike), not new to Users -
   giving h1/h2/h3 the same 18px left/right margin fixes it everywhere at
   once without touching every page template. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; margin-left: 18px; margin-right: 18px; }
h1 { font-size: 24px; margin-top: 0; margin-bottom: 14px; }
h2 { font-size: 17px; margin-top: 24px; margin-bottom: 8px; color: var(--text); }
h2 .count { color: var(--text-dim); font-weight: 400; font-size: 13px; }

/* ---------- topbar / nav ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  margin-right: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* Reusable round icon-button pattern - theme toggle and any future
   single-click state-cycling control share this shape. */
.icon-toggle {
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text-dim);
  border-radius: 999px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  flex-shrink: 0;
}
.icon-toggle:hover { color: var(--accent); border-color: var(--accent); }
.icon-toggle.active { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }

.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; }
.login-box {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px;
  width: 100%;
  max-width: 320px;
}
.login-box .topbar-title { justify-content: center; margin-bottom: 18px; font-size: 22px; }
.login-box input[type=password] {
  width: 100%;
  padding: 10px 12px;
  margin: 14px 0;
  font-size: 16px;
}
.login-box .btn { width: 100%; text-align: center; padding: 10px; }
.login-wrap .icon-toggle { position: absolute; top: 18px; right: 18px; }

/* ---------- dashboard tiles ---------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  gap: 12px;
  padding: 18px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 9px 13px;
  min-width: 110px;
  flex: 1;
}
.stat-card .num { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.stat-card .label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.stat-card.ok .num { color: var(--ok); }
.stat-card.fail .num { color: var(--fail); }
.stat-card.warn .num { color: var(--warn); }

/* ---------- buttons / inputs ---------- */

.btn {
  display: inline-block;
  padding: 5px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 500;
}
.btn:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-danger { color: var(--fail); }
.btn-danger:hover { background: var(--fail-tint); border-color: var(--fail); color: var(--fail); }

.btn, input[type=text], input[type=number], input[type=date], input[type=password], select, textarea {
  min-height: 32px;
}

/* Clickable list rows (Support's ticket queue) - the whole row is a
   navigation target, matching ComCen's own tr[data-href] convention. */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background: var(--accent-tint); }

.error { color: var(--fail); font-size: 12px; margin: 6px 0; }

/* ---------- Users section ---------- */

/* First real use of levelChip() (bootstrap.php) - it existed unstyled since
   the Dashboard was built but nothing rendered one until Users' access
   card. */
.level-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  font-size: 12px;
  font-weight: 500;
  margin: 0 4px 4px 0;
}
.level-swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px 20px;
  padding: 14px;
}
.field-grid label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.field-grid .value { font-size: 14px; }
.field-grid .value.muted { color: var(--text-dim); }

/* Read-only display value, styled to match the input fields around it
   without inviting a click - used for account fields staff can see but not
   edit here (Email, StripeID, API key, OAuth identities). */
.field-static {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  font-family: var(--font-mono);
}

.switch-row { display: flex; align-items: center; gap: 8px; }
.switch-row input[type=checkbox] { width: 16px; height: 16px; min-height: 0; }