/* Same token system as ROJA's own renderer/styles.css (dark theme values
   only — this is a small admin surface, not worth a full theme switcher),
   so the dashboard reads as part of the same product instead of a bolted-on
   generic admin panel. */
:root {
  --bg-void: #0b0b12;
  --bg-panel: #14141f;
  --bg-raised: #1e1e2c;
  --bg-raised-2: #1a1a26;
  --border: #23232f;
  --border-strong: #2a2a3a;

  --text-primary: #f2f2f7;
  --text-secondary: #c9c9d8;
  --text-muted: #8b8ba3;
  --text-faint: #6a6a80;
  --text-faint-2: #55556a;

  --accent-primary-rgb: 37, 244, 238;   /* cyan — primary brand accent */
  --accent-warn-rgb: 247, 209, 84;      /* yellow — live_manager role */
  --accent-alert-rgb: 254, 44, 85;      /* red — destructive actions */
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: "Segoe UI", system-ui, sans-serif;
}
a { color: rgb(var(--accent-primary-rgb)); }

/* -- header: mirrors ROJA desktop's own .deck bar ---------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 24px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Bahnschrift", "Segoe UI Semibold", sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  letter-spacing: 0.04em;
  font-size: 18px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.wordmark-logo { width: 22px; height: 22px; object-fit: contain; }
.wordmark-accent { color: rgb(var(--accent-primary-rgb)); }
.wordmark-suffix { color: var(--text-faint); font-weight: 600; margin-left: 2px; }

.topnav { display: flex; align-items: center; gap: 2px; }
.topnav a {
  color: var(--text-faint);
  text-decoration: none;
  font-family: "Bahnschrift", "Segoe UI Semibold", sans-serif;
  font-stretch: condensed;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease;
}
.topnav a:hover { color: var(--text-secondary); }
.topnav a.active { color: rgb(var(--accent-primary-rgb)); border-bottom-color: rgb(var(--accent-primary-rgb)); }

.topbar-spacer { flex: 1; }

.role-badge {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.role-badge-admin { background: rgba(var(--accent-primary-rgb), 0.15); color: rgb(var(--accent-primary-rgb)); border: 1px solid rgba(var(--accent-primary-rgb), 0.4); }
.role-badge-live_manager { background: rgba(var(--accent-warn-rgb), 0.15); color: rgb(var(--accent-warn-rgb)); border: 1px solid rgba(var(--accent-warn-rgb), 0.4); }
.role-badge-creator { background: var(--bg-raised); color: var(--text-muted); border: 1px solid var(--border-strong); }

/* Self-registration (2026-08-23) — a 'pending' account needs to visibly
   stand out (it needs an admin action), 'active' is the routine/expected
   state so it stays quiet, same muted treatment role-badge-creator above
   already uses for its own "nothing to see here" case. */
.status-badge {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.status-badge-pending { background: rgba(var(--accent-warn-rgb), 0.15); color: rgb(var(--accent-warn-rgb)); border: 1px solid rgba(var(--accent-warn-rgb), 0.4); }
.status-badge-active { background: var(--bg-raised); color: var(--text-muted); border: 1px solid var(--border-strong); }
.status-badge-disabled { background: rgba(var(--accent-alert-rgb), 0.15); color: rgb(var(--accent-alert-rgb)); border: 1px solid rgba(var(--accent-alert-rgb), 0.4); }

.link-accent { background: none; border: none; padding: 0; color: rgb(var(--accent-primary-rgb)); font-size: 12.5px; cursor: pointer; }
.link-accent:hover { text-decoration: underline; }

.topbar-user { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }

.btn-logout {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.btn-logout:hover { color: rgb(var(--accent-alert-rgb)); border-color: rgba(var(--accent-alert-rgb), 0.5); }

/* -- page shell --------------------------------------------------------------- */

/* 900 -> 1080 (2026-08-24) -> 1320 (2026-08-26) — the accounts table gained
   a 9th column (Last seen) on top of the 8-column/3-action layout that
   already needed the 1080 bump, and was wrapping email addresses/timestamps
   onto multiple lines at that width. .panel's own overflow:hidden below
   then silently CLIPPED the actions column instead of wrapping or showing a
   scrollbar — real elements, real dimensions, just positioned entirely
   outside the visible area (confirmed live via getBoundingClientRect(): the
   cell's own x was already past main's right edge). Auth pages (login/
   register/etc) are unaffected — those center a much narrower .form-card
   inside main regardless of main's own max-width. */
main { max-width: 1320px; margin: 32px auto; padding: 0 24px 60px; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.page-header h1 {
  font-family: "Bahnschrift", "Segoe UI Semibold", sans-serif;
  font-stretch: condensed;
  font-weight: 700;
  font-size: 22px;
  margin: 0;
}

/* -- card panel (mirrors ROJA's .rank-panel) ----------------------------------- */

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  /* overflow-x:auto (2026-08-24, was overflow:hidden on both axes) — a
     table wider than its container should scroll, not silently clip
     content off the visible edge with zero indication anything's missing
     (see main's own comment above for the real bug this caused). overflow-y
     stays hidden so the panel's rounded corners still clip the table's own
     square edges vertically, same as before. */
  overflow-x: auto;
  overflow-y: hidden;
}
.panel-title {
  padding: 12px 18px;
  border-bottom: 1px solid var(--bg-raised-2);
  font-family: "Bahnschrift", "Segoe UI Semibold", sans-serif;
  font-stretch: condensed;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* -- accounts table ------------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 18px; font-size: 13.5px; }
thead th {
  color: var(--text-faint);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bg-raised-2);
  padding-top: 10px;
  padding-bottom: 10px;
}
tbody tr { border-bottom: 1px solid var(--bg-raised-2); transition: background 100ms ease; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-raised); }
td.username { font-weight: 600; }
td.muted, .muted { color: var(--text-faint); }
td.mono, .mono { font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px; color: var(--text-secondary); }

/* white-space:nowrap on the CELL (not just the flex container) — without
   it, the table's default auto-layout algorithm can size this last column
   down toward zero width once it holds 3 actions instead of 2 (Enable/
   Disable added 2026-08-24), squeezing OTHER columns' long content (email
   addresses) to wrap instead, since those have somewhere to shrink and this
   flex row doesn't get consulted for its own min-content width by every
   browser's table layout the same way a plain text cell would. Confirmed
   live via a real screenshot: Disable/Edit/Delete all still existed in the
   DOM (accessibility tree) but the whole column rendered with ~0 visible
   width. nowrap forces the table to size this column to fit its real
   content instead. */
.row-actions-cell { white-space: nowrap; }
/* inline-flex, not flex — a block-level flex box as a table cell's only
   child reports a min-content width of 0 to some browsers' table
   auto-layout algorithm (confirmed live: the column rendered at ~0 width,
   Disable/Edit/Delete all still present in the DOM/accessibility tree but
   completely unpainted, even with white-space:nowrap on the cell above).
   inline-flex participates in the surrounding inline/shrink-to-fit sizing
   the same way plain text would, which the table layout algorithm reads
   correctly. */
.row-actions { display: inline-flex; gap: 4px; align-items: center; }
.row-actions a { font-size: 12.5px; text-decoration: none; }
.row-actions form { margin: 0; }
.link-danger { background: none; border: none; padding: 0; color: var(--text-faint); font-size: 12.5px; cursor: pointer; }
.link-danger:hover { color: rgb(var(--accent-alert-rgb)); }
/* Icon action buttons (2026-08-26, replaced the old text links — "too much
   linebreak" at the previous width) — a shared square hit-target/hover
   treatment for .link-accent/.link-danger regardless of whether the element
   is an <a> (Edit) or a <button> (Enable/Disable/Delete, each its own
   one-button <form>). SVG icons use stroke="currentColor" so they pick up
   each class's own color (and :hover color, e.g. .link-danger's red-on-
   hover) with no separate icon-color rules needed. title attributes on each
   element carry the label that used to be visible text, for
   tooltip/accessibility purposes. */
.row-actions a, .row-actions .link-accent, .row-actions .link-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  transition: background 100ms ease, color 100ms ease;
}
.row-actions a:hover, .row-actions .link-accent:hover, .row-actions .link-danger:hover {
  background: var(--bg-raised-2);
}
.row-actions svg { width: 16px; height: 16px; display: block; }

.empty-state { padding: 32px 18px; text-align: center; color: var(--text-faint); font-size: 13px; }

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

.btn-primary {
  background: rgb(var(--accent-primary-rgb));
  color: var(--bg-void);
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: filter 120ms ease;
}
.btn-primary:hover { filter: brightness(1.1); color: var(--bg-void); }

.btn-secondary {
  background: var(--bg-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 13px;
  cursor: pointer;
}
.btn-secondary:hover { color: var(--text-primary); border-color: rgb(var(--accent-primary-rgb)); }

.btn-danger {
  background: none;
  color: rgb(var(--accent-alert-rgb));
  border: 1px solid rgba(var(--accent-alert-rgb), 0.4);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 12.5px;
  cursor: pointer;
}
.btn-danger:hover { background: rgba(var(--accent-alert-rgb), 0.12); }

/* -- forms ------------------------------------------------------------------ */

.form-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  max-width: 420px;
}
.form-card.wide { max-width: 480px; }
label {
  display: block;
  margin: 14px 0 5px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--bg-void);
  color: var(--text-primary);
  font-size: 13.5px;
  font-family: "Cascadia Code", Consolas, monospace;
  transition: border-color 120ms ease;
}
input:focus, select:focus { outline: none; border-color: rgb(var(--accent-primary-rgb)); }
.form-card button[type="submit"] { margin-top: 22px; width: 100%; }

.field-hint { color: var(--text-faint); font-size: 11.5px; margin-top: 6px; }
.field-static { color: var(--text-secondary); font-size: 13px; padding: 8px 0 2px; }

.error-banner {
  background: rgba(var(--accent-alert-rgb), 0.1);
  border: 1px solid rgba(var(--accent-alert-rgb), 0.35);
  color: #ff8fa3;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.success-banner {
  background: rgba(var(--accent-primary-rgb), 0.1);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.35);
  color: rgb(var(--accent-primary-rgb));
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* -- auth pages (login/forgot/reset) center a form card on the void bg -------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-page .wordmark { justify-content: center; font-size: 22px; margin-bottom: 22px; }
.auth-page .form-card { width: 340px; }
.auth-page-footer-link { text-align: center; margin-top: 16px; }

.inline-form { margin: 0; }
.inline-form-block { display: inline; }