/* ===========================================================================
   Admin Console — kit-specific styles
   Sits on top of kit-framework.css. The admin console reads as a serious
   institutional surface: bone background, dense panels, monospace data,
   sparse but precise color (forest-green confirmations, halo for
   priority/alerts, coral for incidents).
   =========================================================================== */

.adm-app { background: var(--bg-bone); color: var(--fg-1); min-height: 100vh; }

/* ── Admin-specific severity pill (used inside shared k-status strip) ──── */
.adm-sev-pill {
  padding: 1px 8px; border: 1px solid var(--border-1); border-radius: 999px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-2); white-space: nowrap;
}
.adm-sev-pill.green { color: #2a5d4f; border-color: rgba(42,93,79,0.38); background: rgba(17,122,77,0.05); }
.adm-sev-pill.amber { color: #8a6a1f; border-color: rgba(184,137,62,0.38); background: rgba(176,141,60,0.05); }
.adm-sev-pill.red   { color: #8b2a20; border-color: rgba(178,58,46,0.38);  background: rgba(178,58,46,0.05); }

/* ── Brand bar overrides — admin slots search + userchip into k-nav ────── */
.adm-nav.k-nav {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
}
.adm-nav .k-brand .mark {
  background: linear-gradient(180deg, var(--accent-anchor) 0%, var(--ink) 100%);
  position: relative;
  font-size: 18px;
  line-height: 1;
}
.adm-nav .k-brand .mark::after {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 4px;
  pointer-events: none;
}
.adm-nav .k-brand .wm-1 sup { font-size: 11px; vertical-align: super; }

/* ── Admin search field (inline, replaces nav links) ───────────────────── */
.adm-search {
  position: relative; max-width: 520px; width: 100%;
  justify-self: center;
}
.adm-search input {
  width: 100%; padding: 9px 14px 9px 34px;
  border: 1px solid var(--border-1); border-radius: 8px;
  background: var(--bg-bone);
  font: 13px/1.4 var(--font-sans);
  color: var(--fg-1);
}
.adm-search input:focus { outline: none; border-color: var(--accent-anchor); background: #fff; }
.adm-search::before {
  content: "⌕"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--fg-3); font-size: 14px;
}
.adm-search::after {
  content: "⌘K"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
  padding: 2px 6px; border: 1px solid var(--border-1); border-radius: 4px;
  background: var(--bg-parchment);
}

/* ── User chip in nav right edge ───────────────────────────────────────── */
.adm-userchip {
  display: flex; align-items: center; gap: 10px;
  padding-left: 12px; margin-left: 4px;
  border-left: 1px solid var(--border-1);
  flex-shrink: 0;
}
.adm-userchip .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-anchor); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.adm-userchip .meta { line-height: 1.2; min-width: 0; }
.adm-userchip .name { font-size: 12px; font-weight: 600; color: var(--fg-1); white-space: nowrap; }
.adm-userchip .role { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.04em; white-space: nowrap; }

/* ── Layout: sidebar + main ────────────────────────────────────────────── */
.adm-shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 88px); }

.adm-side { background: var(--bg-parchment); border-right: 1px solid var(--border-1); padding: 18px 12px; }
.adm-side h6 {
  margin: 18px 8px 6px; font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3);
}
.adm-side a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--fg-2); cursor: pointer;
}
.adm-side a:hover { background: var(--bg-mist); color: var(--fg-1); }
.adm-side a.active { background: rgba(20,83,45,0.08); color: var(--accent-anchor); font-weight: 600; }
.adm-side a .glyph {
  width: 18px; text-align: center; font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3);
}
.adm-side a.active .glyph { color: var(--accent-anchor); }
.adm-side a .badge {
  margin-left: auto; padding: 1px 6px; border-radius: 999px;
  font: 600 10px/1.4 var(--font-mono); background: var(--accent-coral); color: #fff;
}
.adm-side a .badge.amber { background: var(--accent-halo); }

.adm-main { padding: 24px 32px 80px; min-width: 0; }
.adm-main h1 { font: 600 26px/1.2 var(--font-display); margin: 0 0 4px; letter-spacing: -0.01em; }
.adm-main .lede { color: var(--fg-2); margin: 0 0 24px; font-size: 14px; max-width: 760px; }
.adm-eyebrow { font: 600 10px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }

/* ── Cards & panels ────────────────────────────────────────────────────── */
.adm-grid { display: grid; gap: 16px; }
.adm-grid.k4 { grid-template-columns: repeat(4, 1fr); }
.adm-grid.k3 { grid-template-columns: repeat(3, 1fr); }
.adm-grid.k2 { grid-template-columns: repeat(2, 1fr); }
.adm-grid.k2-3 { grid-template-columns: 2fr 1fr; }

.adm-card {
  background: var(--bg-parchment);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 18px;
  position: relative;
}
.adm-card.dark { background: var(--bg-mist, #EAE6DA); color: var(--fg-1); border-color: var(--border-1); }
.adm-card.dark .adm-card-h h3, .adm-card.dark .adm-card-h .sub, .adm-card.dark .adm-stat-v { color: var(--fg-1); }
.adm-card.dark .adm-card-h .sub { color: var(--fg-3); }
.adm-card-h {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 12px;
}
.adm-card-h h3 { font: 600 14px/1.2 var(--font-display); margin: 0 0 2px; letter-spacing: -0.005em; }
.adm-card-h .sub { font-size: 12px; color: var(--fg-3); }
.adm-card-h .more { font-size: 11px; color: var(--accent-anchor); cursor: pointer; }

/* ── Stat tiles ────────────────────────────────────────────────────────── */
.adm-stat { padding: 16px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-parchment); }
.adm-stat .lbl { font: 600 10px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
.adm-stat .v   { font: 600 28px/1.1 var(--font-display); margin: 8px 0 4px; letter-spacing: -0.01em; }
.adm-stat .v.halo { color: var(--accent-halo); }
.adm-stat .v.guardian { color: var(--accent-anchor); }
.adm-stat .v.coral { color: var(--accent-coral); }
.adm-stat .sub { font-size: 11px; color: var(--fg-3); }
.adm-stat .sub.up   { color: var(--accent-vitals); }
.adm-stat .sub.down { color: var(--accent-coral); }

/* ── Tables (audit log, users, etc.) ───────────────────────────────────── */
.adm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.adm-table thead th {
  text-align: left; padding: 10px 12px;
  font: 600 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3); border-bottom: 1px solid var(--border-1);
  background: var(--bg-mist); position: sticky; top: 0;
}
.adm-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--border-1);
  vertical-align: top;
}
.adm-table tbody tr:hover { background: var(--bg-mist); }
.adm-table tbody td.mono { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
.adm-table tbody td .pid { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.adm-table tbody tr.crit td { background: rgba(178,58,46,0.04); }
.adm-table tbody tr.amber td { background: rgba(176,141,60,0.05); }
.adm-table .pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font: 600 10px/1.5 var(--font-mono); letter-spacing: 0.04em;
  background: var(--bg-mist); color: var(--fg-2);
  border: 1px solid var(--border-1);
}
.adm-table .pill.green { background: rgba(20,83,45,0.08); color: var(--accent-anchor); border-color: transparent; }
.adm-table .pill.amber { background: rgba(176,141,60,0.12); color: #8a6d2c; border-color: transparent; }
.adm-table .pill.coral { background: rgba(178,58,46,0.10); color: var(--accent-coral); border-color: transparent; }
.adm-table .pill.sky { background: rgba(44,95,135,0.08); color: var(--accent-sky); border-color: transparent; }

/* ── Filter bar ────────────────────────────────────────────────────────── */
.adm-filters {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
  border: 1px solid var(--border-1); border-radius: 10px;
  background: var(--bg-parchment); margin-bottom: 16px;
  align-items: center;
}
.adm-filters .lbl { font: 600 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-right: 4px; }
.adm-filters .chip {
  padding: 6px 10px; border: 1px solid var(--border-1); border-radius: 999px;
  font-size: 12px; color: var(--fg-2); cursor: pointer; background: var(--bg-bone);
}
.adm-filters .chip.on { background: var(--accent-anchor); color: #fff; border-color: var(--accent-anchor); }
.adm-filters input[type="text"], .adm-filters select {
  padding: 6px 10px; border: 1px solid var(--border-1); border-radius: 6px;
  font: 12px var(--font-sans); color: var(--fg-1); background: #fff;
}
.adm-filters .spacer { flex: 1; }
.adm-filters .btn { font-size: 12px; padding: 6px 10px; border: 1px solid var(--border-1); border-radius: 6px; background: #fff; cursor: pointer; }
.adm-filters .btn.primary { background: var(--accent-anchor); color: #fff; border-color: var(--accent-anchor); }

/* ── Compliance ring + bars ────────────────────────────────────────────── */
.adm-ring { display: flex; align-items: center; gap: 16px; }
.adm-ring svg { flex: 0 0 92px; }
.adm-ring .body { min-width: 0; }
.adm-ring .v { font: 600 24px/1 var(--font-display); margin-bottom: 4px; letter-spacing: -0.01em; }
.adm-ring .lbl { font: 600 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.adm-ring .sub { font-size: 11px; color: var(--fg-3); }

.adm-bar { display: grid; grid-template-columns: 110px 1fr 70px; gap: 10px; align-items: center; padding: 6px 0; }
.adm-bar .name { font-size: 12px; color: var(--fg-2); }
.adm-bar .track { background: var(--bg-mist); height: 8px; border-radius: 999px; overflow: hidden; position: relative; }
.adm-bar .fill { height: 100%; border-radius: 999px; background: var(--accent-clinical); }
.adm-bar .fill.amber { background: var(--accent-halo); }
.adm-bar .fill.coral { background: var(--accent-coral); }
.adm-bar .v { font: 600 11px/1 var(--font-mono); color: var(--fg-2); text-align: right; }

/* ── Live event stream ─────────────────────────────────────────────────── */
.adm-stream { max-height: 380px; overflow: auto; }
.adm-stream-row {
  display: grid; grid-template-columns: 80px 100px 80px 1fr;
  gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--border-1);
  font: 11px/1.4 var(--font-mono);
}
.adm-stream-row .ts { color: var(--fg-3); }
.adm-stream-row .ev { font-weight: 600; color: var(--fg-1); }
.adm-stream-row .ev.write { color: var(--accent-anchor); }
.adm-stream-row .ev.read { color: var(--accent-sky); }
.adm-stream-row .ev.deny { color: var(--accent-coral); }
.adm-stream-row .ev.admin { color: var(--accent-halo); }
.adm-stream-row .src { color: var(--fg-3); }
.adm-stream-row .det { color: var(--fg-2); }
.adm-stream-row.fresh .ts { color: var(--accent-anchor); animation: admFresh 1.4s ease-out; }
@keyframes admFresh { from { background: rgba(20,83,45,0.18); } to { background: transparent; } }

/* ── Investigation profile ─────────────────────────────────────────────── */
.adm-prof {
  display: grid; grid-template-columns: 280px 1fr; gap: 24px;
  background: var(--bg-parchment); border: 1px solid var(--border-1); border-radius: 10px;
  padding: 24px;
}
.adm-prof .id-box { padding: 16px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-bone); }
.adm-prof .id-box .photo {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(180deg, #14532D, #0c1116);
  color: #fff; display: grid; place-items: center;
  font: 600 24px/1 var(--font-display); margin-bottom: 12px;
}
.adm-prof .id-box .name { font: 600 16px/1.2 var(--font-display); margin-bottom: 2px; }
.adm-prof .id-box .role { font-size: 11px; color: var(--fg-3); margin-bottom: 12px; }
.adm-prof .id-box dl { margin: 0; display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; font-size: 11px; }
.adm-prof .id-box dt { color: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.adm-prof .id-box dd { margin: 0; color: var(--fg-1); }

.adm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-1); margin-bottom: 16px; }
.adm-tabs .tab {
  padding: 10px 14px; border-bottom: 2px solid transparent;
  font-size: 12px; font-weight: 500; color: var(--fg-2); cursor: pointer;
}
.adm-tabs .tab.on { border-color: var(--accent-anchor); color: var(--accent-anchor); }
.adm-tabs .tab .ct {
  margin-left: 4px; padding: 1px 6px; border-radius: 999px;
  font: 600 10px/1.4 var(--font-mono); background: var(--bg-mist); color: var(--fg-3);
}

/* ── Sparkline blocks (system health) ──────────────────────────────────── */
.adm-spark { width: 100%; height: 56px; }
.adm-spark path { fill: none; stroke: var(--accent-anchor); stroke-width: 1.5; }
.adm-spark .area { fill: rgba(20,83,45,0.08); stroke: none; }
.adm-spark.amber path { stroke: var(--accent-halo); }
.adm-spark.amber .area { fill: rgba(176,141,60,0.10); }
.adm-spark.coral path { stroke: var(--accent-coral); }
.adm-spark.coral .area { fill: rgba(178,58,46,0.08); }

/* ── Compliance frameworks list ────────────────────────────────────────── */
.adm-comp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adm-comp-card { padding: 14px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-parchment); }
.adm-comp-card h4 { font: 600 13px/1.2 var(--font-display); margin: 0 0 4px; }
.adm-comp-card .sub { font-size: 11px; color: var(--fg-3); margin-bottom: 10px; }
.adm-comp-card .pct { font: 600 24px/1 var(--font-display); letter-spacing: -0.01em; margin-bottom: 6px; }
.adm-comp-card .pct.green { color: var(--accent-anchor); }
.adm-comp-card .pct.amber { color: var(--accent-halo); }
.adm-comp-card .pct.coral { color: var(--accent-coral); }
.adm-comp-card .meta { font: 11px/1.6 var(--font-mono); color: var(--fg-3); display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.adm-comp-card .meta:first-of-type { margin-top: 12px; }
.adm-comp-card .meta span { white-space: nowrap; }
.adm-comp-card .adm-bar { padding: 0 !important; }
.adm-comp-card .adm-bar .track { height: 6px; }

/* ── Big number + trend (for hero compliance) ──────────────────────────── */
.adm-hero {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
  background: var(--bg-mist, #EAE6DA);
  color: var(--fg-1); padding: 28px 32px; border-radius: 12px;
  border: 1px solid var(--border-1);
  margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.adm-hero::after {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(176,141,60,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.adm-hero .eyebrow { font: 600 10px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.adm-hero h2 { font: 600 28px/1.2 var(--font-display); margin: 0 0 8px; letter-spacing: -0.01em; }
.adm-hero .lede { font-size: 13px; color: var(--fg-2); margin: 0 0 20px; max-width: 540px; }
.adm-hero .stats { display: flex; gap: 32px; }
.adm-hero .stats .stat .lbl { font: 600 10px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
.adm-hero .stats .stat .v { font: 600 22px/1.1 var(--font-display); margin: 6px 0 4px; }
.adm-hero .stats .stat .sub { font-size: 11px; color: var(--fg-3); }
.adm-hero .right-rail { font: 11px var(--font-mono); color: var(--fg-2); display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.adm-hero .right-rail .row { display: flex; justify-content: space-between; gap: 24px; padding: 8px 0; border-bottom: 1px solid var(--border-1); }
.adm-hero .right-rail .row span { color: var(--fg-1); font-weight: 600; }

/* ── Action buttons ────────────────────────────────────────────────────── */
.adm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border-1);
  font: 600 12px/1 var(--font-sans); color: var(--fg-1); background: #fff;
  cursor: pointer;
}
.adm-btn.primary { background: var(--accent-anchor); color: #fff; border-color: var(--accent-anchor); }
.adm-btn.danger { background: var(--accent-coral); color: #fff; border-color: var(--accent-coral); }
.adm-btn.ghost { background: transparent; }
.adm-btn:hover { transform: translateY(-1px); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.adm-foot {
  margin-top: 48px; padding: 24px 32px; border-top: 1px solid var(--border-1);
  background: var(--bg-parchment);
  display: flex; justify-content: space-between; gap: 24px;
  font-size: 11px; color: var(--fg-3);
}
.adm-foot .integrity { font-style: italic; font-family: var(--font-equation); font-size: 12px; color: var(--accent-halo); letter-spacing: 0; }

/* ── Dialog (incident response, redactions) ───────────────────────────── */
.adm-dialog {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12,17,22,0.5); display: grid; place-items: center;
  padding: 24px;
}
.adm-dialog .panel {
  background: var(--bg-parchment); border-radius: 12px;
  width: 100%; max-width: 640px; max-height: 80vh; overflow: auto;
  padding: 28px; border: 1px solid var(--border-1);
}
.adm-dialog h3 { font: 600 18px/1.2 var(--font-display); margin: 0 0 8px; }

/* Severity ribbon */
.adm-sev {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font: 600 10px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.adm-sev.p1 { background: var(--accent-coral); color: #fff; }
.adm-sev.p2 { background: var(--accent-halo); color: #fff; }
.adm-sev.p3 { background: var(--accent-sky); color: #fff; }
.adm-sev.p4 { background: var(--bg-mist); color: var(--fg-2); }

/* small util */
.muted { color: var(--fg-3); }
.mono { font-family: var(--font-mono); }
.right { text-align: right; }