/* AuthKit standalone — design tokens + the component styles the views need.
 *
 * WHY THIS FILE EXISTS
 * Upstream, views/login.php and views/admin.php link two root-relative sheets
 * (/assets/css/tokens.css and /assets/css/brand.css) that are served by a
 * SIBLING app (evanda-shell) on the same vhost. This package has no shell, so
 * both would 404 and every var() in shared.css would resolve to nothing —
 * an unstyled login page. Everything those sheets provided is defined here,
 * unbranded, so the package is self-contained.
 *
 * Two layers, deliberately separate:
 *   1. TOKENS — the "--color-", "--radius-" and "--font-sans" names shared.css
 *      maps onto its own "--ak-" variables. shared.css is shipped UNMODIFIED;
 *      it only ever sees these names.
 *      (Careful with wildcards in these comments: a literal star-slash pair
 *      ends the comment early, and the rest of the file then parses as garbage
 *      — which silently took the :root block below with it once already.)
 *   2. COMPONENTS — styles for the markup in views/admin.php (.chip, .msg,
 *      .bar, .dlg, .roles-box, bare <table>, …). shared.css never defined
 *      these; on the shell-served deployment they came from brand.css. Without
 *      them the user-management console renders as raw HTML.
 *
 * Recolour by editing the token block below — nothing downstream hardcodes a
 * colour.
 */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --color-bg: #f4f6f8;
  --color-bg-wash: #eceff3;
  --color-surface: #ffffff;
  --color-border: #d6dce3;
  --color-text: #1b2430;
  --color-text-muted: #5c6b7a;

  --color-accent-strong: #2f6fb2;
  --color-accent-strong-hover: #275f99;
  --color-danger: #b3261e;
  --color-success: #2e7d4f;
  --color-warning: #9a6700;

  /* views/login.php uses these two names inline. */
  --pri: var(--color-accent-strong);
  --mut: var(--color-text-muted);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f141a;
    --color-bg-wash: #1c242e;
    --color-surface: #171e26;
    --color-border: #2a333d;
    --color-text: #e6ebf1;
    --color-text-muted: #93a1b0;

    --color-accent-strong: #5b9bd8;
    --color-accent-strong-hover: #74acdf;
    --color-danger: #ff6b63;
    --color-success: #5cbd84;
    --color-warning: #d9a441;
  }
}

/* ── Admin console layout ──────────────────────────────────────────────────
 * shared.css centres <body> with flex for the login card. The admin page is a
 * full-width document, and a flex ROW body would put the header beside the
 * table. views/admin.php carries class="admin" so this can undo it. */
body.admin {
  display: block;
  min-height: 0;
  background: var(--color-bg);
  padding: 0;
}

.admin-header {
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-bottom: 0;
  /* shared.css sets space-between, but the markup is h1 + "signed in as X" +
     a flex spacer + Log out — so without a gap the first two collide. */
  gap: 1rem;
}
.admin-header h1 { font-size: 18px; margin: 0; }

.muted { color: var(--color-text-muted); }
.mono  { font-family: var(--font-mono); font-size: 13px; }
.sp    { flex: 1 1 auto; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  min-height: 0;
}
.btn:hover { background: var(--color-bg-wash); }
.btn-pri { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: #fff; }
.btn-pri:hover { background: var(--color-accent-strong-hover); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-dng { color: var(--color-danger); border-color: var(--color-danger); background: transparent; }
.btn-dng:hover { background: var(--color-danger); color: #fff; }
form.inline { display: inline; }

/* ── Messages ────────────────────────────────────────────────────────────── */
.msg {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 16px;
}
.msg.ok  { border-color: var(--color-success); color: var(--color-success); }
.msg.err { border-color: var(--color-danger);  color: var(--color-danger); }

/* ── Toolbar above the table ─────────────────────────────────────────────── */
.bar { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.bar h2 { font-size: 16px; margin: 0; }

/* ── The user table (views/admin.php uses a BARE <table>, not .table) ────── */
table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 14px; }
thead th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 10px;
}
tbody td { padding: 10px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
tbody tr:hover { background: var(--color-bg-wash); }

/* ── Chips + status badges ───────────────────────────────────────────────── */
.chip {
  display: inline-block;
  padding: 2px 9px;
  margin: 1px 2px 1px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-wash);
  font-size: 12px;
  font-weight: 600;
}
.chip.ext  { border-color: var(--color-accent-strong); color: var(--color-accent-strong); }
.chip.warn { border-color: var(--color-warning); color: var(--color-warning); }

.badge-on, .badge-off {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.badge-on  { background: var(--color-success); color: #fff; }
.badge-off { background: var(--color-text-muted); color: #fff; }

/* ── Create / edit dialog ────────────────────────────────────────────────── */
dialog#dlg {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 22px;
  width: 92%;
  max-width: 460px;
}
dialog#dlg::backdrop { background: rgba(0, 0, 0, .45); }
.dlg h3 { margin: 0 0 12px; font-size: 17px; }
label.f { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 15px;
}
.roles-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  max-height: 190px;
  overflow-y: auto;
}
.roles-box label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  margin: 6px 0;
}
.roles-box input[type="checkbox"] { width: auto; margin-top: 3px; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.actions .btn { min-width: 96px; text-align: center; }