/* =============================================================================
   Hybrid Console — design system
   =============================================================================
   One stylesheet, semantic class names, no framework. Every page composes the
   same primitives (.card, .row, .field, .tablewrap, .chip, .msg), so a change
   here lands everywhere and the pages stay free of layout detail.

   Two rules worth knowing before editing:

   1. Form rows align to the TOP, never the bottom. Fields have optional helper
      text of varying height; aligning to the bottom staggered every input in a
      row by however much helper text sat under its neighbour.
   2. Colour is defined once on :root as light, then re-declared for dark. No
      colour is ever declared only inside a media query, so a value can never go
      missing in one theme.
   ========================================================================== */

:root {
  /* neutrals — a single cool-grey ramp, so borders and fills never clash */
  --bg:#F7F9FC; --panel:#FFFFFF; --panel-2:#F1F5F9; --panel-3:#E8EEF5;
  --ink:#0F1B2A; --ink-2:#33465C; --muted:#64768A;
  --line:#E1E8F0; --line-2:#CBD6E3;

  /* one accent, used for focus, primary action and current nav */
  --accent:#2563A8; --accent-hi:#1D4E86; --accent-soft:#E8F1FB; --on-accent:#FFFFFF;

  --ok:#0F7B4F; --ok-bg:#E6F5ED; --ok-line:#A8DcC0;
  --warn:#8A5A0B; --warn-bg:#FDF3DF; --warn-line:#EBCF92;
  --bad:#B3261E; --bad-bg:#FDECEA; --bad-line:#F0B4AE;

  --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  --shadow-1:0 1px 2px rgba(15,27,42,.04), 0 1px 3px rgba(15,27,42,.06);
  --shadow-2:0 2px 4px rgba(15,27,42,.04), 0 12px 28px -8px rgba(15,27,42,.12);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

  --font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0B121B; --panel:#121C28; --panel-2:#182534; --panel-3:#1F2E40;
    --ink:#E9EFF6; --ink-2:#BCCBDA; --muted:#8698AC;
    --line:#22303F; --line-2:#31424F;

    --accent:#54A3E8; --accent-hi:#7BBBF0; --accent-soft:#132639; --on-accent:#08131F;

    --ok:#4FC088; --ok-bg:#0E2A1D; --ok-line:#1F5A3D;
    --warn:#E0AC53; --warn-bg:#2E2410; --warn-line:#5C4718;
    --bad:#EE7A72; --bad-bg:#301514; --bad-line:#632C28;

    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 4px rgba(0,0,0,.3), 0 12px 28px -8px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --bg:#0B121B; --panel:#121C28; --panel-2:#182534; --panel-3:#1F2E40;
  --ink:#E9EFF6; --ink-2:#BCCBDA; --muted:#8698AC;
  --line:#22303F; --line-2:#31424F;
  --accent:#54A3E8; --accent-hi:#7BBBF0; --accent-soft:#132639; --on-accent:#08131F;
  --ok:#4FC088; --ok-bg:#0E2A1D; --ok-line:#1F5A3D;
  --warn:#E0AC53; --warn-bg:#2E2410; --warn-line:#5C4718;
  --bad:#EE7A72; --bad-bg:#301514; --bad-line:#632C28;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 4px rgba(0,0,0,.3), 0 12px 28px -8px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
code, .mono { font-family: var(--mono); font-size:.875em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible focus everywhere, for keyboard users. Never remove without replacing. */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.side {
  background: var(--panel); border-right:1px solid var(--line);
  padding: var(--sp-5) var(--sp-4); position: sticky; top:0; height:100vh;
  overflow:auto; display:flex; flex-direction:column;
}
.brand { font-weight:650; font-size:16px; letter-spacing:-.015em; margin:0 0 var(--sp-1); }
.brand small {
  display:block; font-weight:500; color:var(--muted); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; margin-top:3px;
}
.navlist { list-style:none; padding:0; margin: var(--sp-5) 0 0; display:flex; flex-direction:column; gap:2px; }
.navlist a {
  display:block; padding:8px 11px; border-radius:var(--r-sm); color:var(--ink-2);
  font-size:14px; font-weight:500; transition: background .12s ease, color .12s ease;
}
.navlist a:hover { background:var(--panel-2); color:var(--ink); text-decoration:none; }
.navlist a[aria-current="page"] { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.navgroup { margin-top: 14px; }
.navlist a.navgroup-label {
  display: block; padding: 10px 11px 2px; border-radius: 0; background: transparent;
  font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.navlist a.navgroup-label:hover { background: transparent; color: var(--ink); text-decoration: none; }
.navlist a.navgroup-label[aria-current="page"] { background: transparent; color: var(--accent); }
.navgroup .navsub { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.navgroup .navsub a { padding-left: 18px; }
.side-foot { margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
/* min-width:0 lets the column be narrower than its widest table, so a wide table scrolls inside
   its .tablewrap instead of widening the whole page (a grid item is never narrower than its
   content otherwise). */
.main { padding: var(--sp-6) var(--sp-6) 64px; max-width:1220px; min-width:0; }
@media (max-width:860px) {
  .shell { grid-template-columns:1fr; }
  .side { position:static; height:auto; }
  .main { padding: var(--sp-4); }
}

/* ── type ──────────────────────────────────────────────────────────────── */
h1 { font-size:26px; font-weight:660; margin:0 0 var(--sp-2); letter-spacing:-.02em; }
h2 { font-size:18px; font-weight:620; margin: var(--sp-6) 0 var(--sp-3); letter-spacing:-.01em; }
h3 { font-size:15px; font-weight:620; margin:0 0 var(--sp-2); }
.sub { color:var(--muted); margin:0 0 var(--sp-5); max-width:76ch; }

/* ── surfaces ──────────────────────────────────────────────────────────── */
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding: var(--sp-5); box-shadow:var(--shadow-1); margin:0 0 var(--sp-4);
}
.grid { display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.stat { font-size:30px; font-weight:680; letter-spacing:-.03em; line-height:1.15; }
.stat-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.09em; font-weight:600; }

/* ── tables ────────────────────────────────────────────────────────────── */
.tablewrap {
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--panel); box-shadow:var(--shadow-1);
}
table { border-collapse:separate; border-spacing:0; width:100%; font-size:14px; }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:middle; }
th {
  background:var(--panel-2); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); font-weight:650;
  position:sticky; top:0; z-index:1;
}
tbody tr { transition: background .1s ease; }
tbody tr:hover { background:var(--panel-2); }
tbody tr:last-child td { border-bottom:0; }
td .chip + .chip { margin-left:4px; }

/* ── chips ─────────────────────────────────────────────────────────────── */
.chip {
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px;
  border-radius:var(--r-pill); font-size:11.5px; font-weight:600;
  border:1px solid transparent; line-height:1.7; white-space:nowrap;
}
.chip-ok   { color:var(--ok);    background:var(--ok-bg);    border-color:var(--ok-line); }
.chip-warn { color:var(--warn);  background:var(--warn-bg);  border-color:var(--warn-line); }
.chip-bad  { color:var(--bad);   background:var(--bad-bg);   border-color:var(--bad-line); }
.chip-mute { color:var(--muted); background:var(--panel-2);  border-color:var(--line); }
button.chip { cursor:pointer; }

/* ── controls ──────────────────────────────────────────────────────────── */
button, .btn {
  font:inherit; font-size:14px; font-weight:550; padding:8px 14px;
  border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--panel); color:var(--ink); cursor:pointer;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
button:hover:not(:disabled), .btn:hover { background:var(--panel-2); border-color:var(--muted); }
button:active:not(:disabled) { background:var(--panel-3); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
button.primary:hover:not(:disabled) { background:var(--accent-hi); border-color:var(--accent-hi); }
/* Destructive. Outline by default so a row full of them does not read as an
   alarm; solid only for the button that actually commits, inside a confirmation
   card. Both are built from the --bad tokens, which are already redefined per
   theme, so neither needs a dark-mode rule of its own. */
button.danger { color:var(--bad); background:var(--bad-bg); border-color:var(--bad-line); }
button.danger:hover:not(:disabled) { background:var(--bad); border-color:var(--bad); color:var(--on-accent); }
button.danger.primary { background:var(--bad); border-color:var(--bad); color:var(--on-accent); }
button.danger.primary:hover:not(:disabled) { filter:brightness(.9); }
button + button { margin-left:6px; }

input, select, textarea {
  font:inherit; font-size:14px; padding:8px 11px; border:1px solid var(--line-2);
  border-radius:var(--r-sm); background:var(--panel); color:var(--ink); width:100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover:not(:disabled), select:hover, textarea:hover { border-color:var(--muted); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
input[readonly] { background:var(--panel-2); color:var(--ink-2); }
input[type="checkbox"] { width:auto; }
label {
  display:block; font-size:11px; color:var(--muted); margin:0 0 5px;
  text-transform:uppercase; letter-spacing:.08em; font-weight:650;
}

/* Form layout. Rows align to the TOP so helper text under one field cannot
   shove its neighbours out of line — the stagger this replaced. */
.row { display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:flex-start; }
.row > .field { margin-bottom:0; }
.field { margin:0 0 var(--sp-3); min-width:0; }
.field small, .field .sub, .hint {
  display:block; margin:5px 0 0; font-size:12px; line-height:1.45;
  color:var(--muted); text-transform:none; letter-spacing:normal; max-width:44ch;
}
/* A row of buttons sitting beside inputs still lines up with them, because the
   label above the inputs is replaced by an equivalent spacer height. */
.row .actions { display:flex; align-items:center; gap:6px; padding-top:22px; }
.form-actions { display:flex; gap:var(--sp-2); align-items:center; margin-top:var(--sp-4); flex-wrap:wrap; }

/* ── messages ──────────────────────────────────────────────────────────── */
.msg { padding:10px 13px; border-radius:var(--r-sm); font-size:13.5px; margin:0 0 var(--sp-3); border:1px solid; overflow-wrap:anywhere; }
.msg-err { color:var(--bad); background:var(--bad-bg); border-color:var(--bad-line); }
.msg-ok  { color:var(--ok);  background:var(--ok-bg);  border-color:var(--ok-line); }
.ghost {
  background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn);
  padding:10px 13px; border-radius:var(--r-sm); margin:0 0 var(--sp-4); font-size:13.5px;
}
.empty { color:var(--muted); padding:36px 20px; text-align:center; font-size:14px; }

/* ── invitation onboarding ─────────────────────────────────────────────── */
/* A password box with a reveal control inside it, so the toggle cannot be
   mistaken for a submit button sitting next to the field. */
.pw-wrap { position:relative; display:block; }
.pw-wrap input { padding-right:64px; }
.pw-reveal {
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  padding:4px 8px; font-size:11.5px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted); background:transparent;
  border:0; cursor:pointer; border-radius:var(--r-sm);
}
.pw-reveal:hover { color:var(--ink); background:var(--panel-2); }

/* The policy, rendered as it is met. Never a numeric "strength" score: a score
   tells the invitee they scored 3, a checklist tells them what to type next. */
.rules { list-style:none; margin:8px 0 0; padding:0; }
.rules li {
  display:flex; align-items:flex-start; gap:7px;
  font-size:12px; line-height:1.5; color:var(--muted);
}
.rules li::before {
  content:"○"; flex:0 0 auto; font-size:11px; line-height:1.6; color:var(--line-2);
}
.rules li.met { color:var(--ok); }
.rules li.met::before { content:"●"; color:var(--ok); }

/* What the invitee is joining: address, tenant, roles. Read-only facts, so
   they are typography rather than disabled form controls. */
.invite-facts { list-style:none; margin:0; padding:0; }
.invite-facts li {
  display:flex; justify-content:space-between; gap:var(--sp-3);
  padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px;
}
.invite-facts li:last-child { border-bottom:0; }
.invite-facts dt, .invite-facts .k {
  color:var(--muted); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.04em; font-weight:600; flex:0 0 auto; padding-top:2px;
}
.invite-facts .v { color:var(--ink); text-align:right; font-weight:550; min-width:0; word-break:break-word; }

/* ── sign-in / standalone cards ────────────────────────────────────────── */
.signin { max-width:452px; margin:10vh auto; padding:0 var(--sp-4); }
.signin h1 { font-size:24px; }
details.card summary { cursor:pointer; font-size:13.5px; color:var(--muted); font-weight:550; }
details.card summary:hover { color:var(--ink); }
details.card[open] summary { margin-bottom:var(--sp-2); color:var(--ink); }