/* aio UI — one design system for every aio surface (dashboard, SSO, kanban).
 *
 * WHY THIS FILE EXISTS
 * Each aio page had grown its own spacing, its own greys and its own idea of a button, so the
 * whole estate read as "lightly themed default pages": uneven vertical rhythm, secondary
 * controls so close to the background they disappeared on a dim display, and an accent used
 * once with no relationship to anything else. A shared stylesheet is the only way those stay
 * consistent as pages are added, and serving it from the CDN means one cached copy for all of
 * them.
 *
 * DESIGN RULES (deliberate, not defaults)
 *  - ONE spacing scale (4/8/12/16/24/32). Rhythm comes from the scale, never from eyeballing.
 *  - ONE accent (neon green), used for the primary action, links and focus. Anything else that
 *    looks interactive must be visibly interactive too.
 *  - Secondary surfaces are LIGHTER than the page, never darker: a control that cannot be seen
 *    is not minimal, it is missing.
 *  - Contrast that survives a dim screen: body text >= #cfe3d4, muted >= #8fa89a.
 *  - Every interactive element defines hover, focus-visible, active and disabled.
 *  - Dark + neon, per the operator's standing preference for aio monitoring surfaces.
 */

:root {
  --bg: #0b0f12;
  --surface: #121a1f;      /* cards, inputs: LIGHTER than the page */
  --surface-hi: #18232a;   /* hover */
  --line: #24463a;
  --line-soft: #1b2b24;
  --fg: #d7ece0;
  --fg-muted: #8fa89a;
  --accent: #39ff88;
  --accent-dim: #1f7a4a;
  --amber: #ffd166;
  --red: #ff6b6b;
  --radius: 8px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--s5);
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ── typography ───────────────────────────────────────────────────────────── */
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 var(--s2); color: #fff; letter-spacing: -0.01em; }
h2 { font-size: 15px; font-weight: 600; margin: var(--s5) 0 var(--s2); color: var(--fg); }
p  { margin: 0 0 var(--s4); color: var(--fg-muted); }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .small { font-size: 12px; }
.muted { color: var(--fg-muted); }
.accent { color: var(--accent); }
.warn { color: var(--amber); }
.bad  { color: var(--red); }

/* ── layout ───────────────────────────────────────────────────────────────── */
.stack > * + * { margin-top: var(--s4); }
.stack-tight > * + * { margin-top: var(--s2); }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.between { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--s5);
}
.centre { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); }
.col { width: 100%; max-width: 420px; }

/* ── controls ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; padding: 11px var(--s4);
  font: 600 14px/1 var(--font);
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover { background: var(--surface-hi); border-color: #2f5c4a; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #06210f; }
.btn-primary:hover { background: #5cffa4; border-color: #5cffa4; }
.btn svg { width: 16px; height: 16px; flex: none; }

.field { display: block; }
.field > span { display: block; margin-bottom: var(--s1); font-size: 13px; color: var(--fg-muted); }
input[type="text"], input[type="password"], input[type="search"], input[type="email"], select, textarea {
  width: 100%; padding: 10px var(--s3);
  font: 14px/1.4 var(--font); color: var(--fg);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
input::placeholder, textarea::placeholder { color: #6f8a7a; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57, 255, 136, .14);
}

/* a divider that is actually visible, with the label still subordinate */
.divider { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0; color: var(--fg-muted); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── brand ────────────────────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.brand .mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  box-shadow: 0 0 12px rgba(57, 255, 136, .35);
}
.brand .name { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: .02em; }

/* ── tables + data ────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; }
th, td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-soft); }
th { color: var(--fg-muted); font-weight: 500; font-size: 13px; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
pre { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: var(--s3); overflow: auto; }
code { background: var(--surface); border-radius: 4px; padding: 1px 5px; }

/* ── notices ──────────────────────────────────────────────────────────────── */
.notice { border-radius: var(--radius); padding: var(--s3) var(--s4); border: 1px solid var(--line); margin-bottom: var(--s4); }
.notice.bad { border-color: #6b2b2b; background: #1d1113; color: #ffc9c9; }
.notice.ok { border-color: var(--accent-dim); background: #0f1f16; color: var(--fg); }