/*
 * Operator-Konsole — dunkle, technische Optik (ADR 0009, M0).
 * Streng CSP-konform: kein Inline-Style, kein Inline-Script. Eigenständig (teilt sich
 * NICHTS mit dem Gilden-Dashboard — eigene Failure-Domain, eigene Tonleiter).
 */
:root {
  --ops-bg: #0b0e11;
  --ops-panel: #11161b;
  --ops-deep: #0d1216;
  --ops-row-hover: #0e151b;
  --ops-line: #1e262e;
  --ops-fg: #c5d0d8;
  --ops-bright: #e6edf2;
  --ops-mono-fg: #aebcc6;
  --ops-muted: #6b7a86;
  --ops-muted-hi: #7a8b98;
  --ops-accent: #46d39a;
  --ops-accent-ink: #06231a; /* dunkle Tinte AUF Aether UND Gold (beide hell genug) */
  --ops-warn: #d8a34a;
  --ops-fail: #e0584f;
  /* ── Marke/Aktion (ADR 0012, geteilter Token mit Sigil/Agent-Hub) ── */
  --ops-gold: #ffba00; /* NEU, ADR 0012: geteilter Marke/Aktion-Token. Entspricht
                           oklch(84% 0.19 80.46) = sigilGold aus DESIGN.md, nach sRGB für
                           Ops' Hex-Tonleiter konvertiert. Kontrast gegen alle vier
                           Ops-Flächen (bg/panel/deep/rowHover) >10:1, Tinte #06231a
                           darauf 9,72:1 — beides weit über AA. */
  --ops-gold-soft: #ffba001f; /* Gold bei ~12% Alpha, für den Nav-Aktiv-Gradient-Wash (analog
                                  Agent-Hub --gold-soft), rein dekorativ, keine Text-Rolle. */
  --ops-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--ops-bg);
  color: var(--ops-fg);
  font-family: var(--ops-mono);
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.console {
  width: min(560px, 92vw);
  background: var(--ops-panel);
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  overflow: hidden;
}

.console__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ops-line);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.console__brand {
  color: var(--ops-accent);
  font-weight: 600;
}

.console__mode {
  color: var(--ops-muted);
  text-transform: uppercase;
}

.console__body {
  padding: 28px 20px;
}

.console__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ops-bright);
}

.console__lede {
  margin: 0 0 22px;
  color: var(--ops-muted);
  max-width: 46ch;
}

.console__gate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-deep);
  color: var(--ops-warn);
  font-size: 13px;
}

.console__lock {
  font-size: 15px;
  line-height: 1;
}

.console__foot {
  padding: 10px 16px;
  border-top: 1px solid var(--ops-line);
  color: var(--ops-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ── Auth-Seiten (login/enroll) ──────────────────────────────────────────── */

.console__label {
  display: block;
  margin: 0 0 6px;
  color: var(--ops-muted);
  font-size: 12px;
}

.console__input {
  width: 100%;
  margin: 0 0 16px;
  padding: 9px 12px;
  background: var(--ops-deep);
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  color: var(--ops-fg);
  font-family: var(--ops-mono);
  font-size: 14px;
}

.console__input:focus {
  outline: 2px solid var(--ops-accent);
  outline-offset: 1px;
}

/* Primärer Submit (ADR 0012, Auflage 3/9): Gold statt Aether — Aether bleibt der Fokusring. */
.console__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 16px;
  background: var(--ops-gold);
  color: var(--ops-accent-ink);
  border: 1px solid var(--ops-gold);
  border-radius: 4px;
  font-family: var(--ops-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.console__btn:hover {
  filter: brightness(1.08);
}

.console__btn:focus-visible {
  outline: 2px solid var(--ops-bright);
  outline-offset: 2px;
}

.console__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.console__status {
  margin-top: 16px;
  min-height: 1.4em;
  font-size: 13px;
  color: var(--ops-muted);
}

.console__status[data-kind="ok"] {
  color: var(--ops-accent);
}

.console__status[data-kind="error"] {
  color: var(--ops-warn);
}

.console__status[data-kind="info"] {
  color: var(--ops-fg);
}

.console__link {
  display: inline-block;
  margin-top: 12px;
  color: var(--ops-accent);
  text-decoration: underline;
}

/* ── Fleet-View (M2) ───────────────────────────────────────────────────────── */

.console-page {
  display: block;
  align-items: stretch;
  justify-content: flex-start;
}

.fleet {
  width: min(1200px, 96vw);
  margin: 0 auto;
  padding: 0 16px 40px;
}

/*
 * Persistenter Kopf (A1): liegt AUSSERHALB der data-page-mains und bleibt in jeder View
 * sichtbar. Eigene Breite (zentriert, wie .fleet), eigener Unterstrich.
 */
.ops__topbar {
  width: min(1200px, 96vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ops-line);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.ops__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * Ruhige Re-Login-Aufforderung (A4/B4): nüchterne Leiste am oberen Rand, KEIN Toast/Animation.
 * Wird dynamisch eingehängt, wenn ein laufender fetch 401 liefert (Sitzung abgelaufen/widerrufen).
 */
.ops__relogin {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--ops-panel);
  border-bottom: 1px solid var(--ops-warn);
  color: var(--ops-warn);
  font-size: 13px;
}

.ops__relogin-link {
  color: var(--ops-accent);
  text-decoration: underline;
  font-weight: 600;
}

.ops__relogin-link:focus-visible {
  outline: 2px solid var(--ops-accent);
  outline-offset: 2px;
}

.fleet__lang {
  padding: 5px 12px;
  background: var(--ops-deep);
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  color: var(--ops-fg);
  font-family: var(--ops-mono);
  font-size: 12px;
  cursor: pointer;
}

.fleet__lang:hover {
  border-color: var(--ops-accent);
}

.fleet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 4px 10px;
}

.fleet__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ops-bright);
}

/* Terminal-Präfixe Ebene 1 (View-Titel, ADR 0012 Auflage 7) — NUR diese drei Selektoren. */
.fleet__title::before,
.metrics__title::before,
.audit__title::before {
  content: "› ";
  color: var(--ops-gold);
  font-weight: 600;
}

.health {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
}

.health__lamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ops-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.health__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  /* Flacher Ring statt Glow (a11y/anti-slop A2): kein box-shadow-Schein. */
  background: var(--ops-muted);
  border: 1px solid var(--ops-line);
}

.health__lamp[data-state="ok"] .health__dot {
  background: var(--ops-accent);
  border-color: var(--ops-accent);
}

.health__lamp[data-state="fail"] .health__dot {
  background: var(--ops-fail);
  border-color: var(--ops-fail);
}

.health__lamp[data-state="unknown"] .health__dot,
.health__lamp[data-state="pending"] .health__dot {
  background: var(--ops-warn);
  border-color: var(--ops-warn);
}

/*
 * Nicht-farbliches Status-Kürzel neben jeder Ampel (WCAG 1.4.1 — Zustand ohne Farbe ablesbar):
 * ok = „ok", fail = „!", unknown/pending = „?". Mono, gedämpft, additiv zur Farbe.
 */
.health__sig {
  font-size: 11px;
  font-weight: 600;
  color: var(--ops-muted);
  font-variant-numeric: tabular-nums;
}

.health__lamp[data-state="ok"] .health__sig {
  color: var(--ops-accent);
}

.health__lamp[data-state="fail"] .health__sig {
  color: var(--ops-fail);
}

.health__lamp[data-state="unknown"] .health__sig,
.health__lamp[data-state="pending"] .health__sig {
  color: var(--ops-warn);
}

.health__ver {
  color: var(--ops-muted);
  font-size: 11px;
  padding-left: 6px;
  border-left: 1px solid var(--ops-line);
}

.fleet__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 4px 18px;
}

.sum {
  display: flex;
  flex-direction: column;
  min-width: 96px;
  padding: 10px 14px;
  background: var(--ops-panel);
  border: 1px solid var(--ops-line);
  border-radius: 5px;
}

.sum__v {
  font-size: 20px;
  font-weight: 700;
  color: var(--ops-bright);
}

.sum__l {
  font-size: 11px;
  color: var(--ops-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.fleet__tablewrap {
  overflow-x: auto;
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  background: var(--ops-panel);
}

.fleet__msg {
  margin: 0;
  padding: 16px;
  color: var(--ops-muted);
  font-size: 13px;
}

.fleet__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fleet__table th {
  text-align: left;
  padding: 10px 14px;
  color: var(--ops-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--ops-line);
  white-space: nowrap;
}

.fleet__table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ops-line);
  color: var(--ops-fg);
  white-space: nowrap;
}

.fleet__table tbody tr:last-child td {
  border-bottom: none;
}

.fleet__table tbody tr:hover {
  background: var(--ops-row-hover);
}

.fleet__table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fleet__table .mono {
  font-family: var(--ops-mono);
  color: var(--ops-mono-fg);
}

/*
 * A11y-Fund (ADR 0012, Auflage 12): opacity:.55 maß 4,30:1/3,67:1 < AA-Pflicht 4,5:1. Feste
 * gedimmte Textfarbe var(--ops-muted-hi) misst 5,17:1 gegen --ops-panel und 5,23:1 gegen
 * --ops-row-hover — beides AA-konform. Per Spezifität ((0,0,2,2) schlägt die .mono-Regel
 * (0,0,2,0)) gilt die gedimmte Farbe auch für die Guild-ID-Spalte in dieser Zeile. Bekannte
 * Nebenwirkung: Badges/Buttons in einer entfernten Zeile rendern jetzt in voller Farbstärke
 * statt gedimmt (opacity betraf vorher alles, color nur die vererbte Textfarbe) — bewusst so.
 */
.fleet__table tr.is-removed td {
  color: var(--ops-muted-hi);
}

.tag-removed {
  color: var(--ops-warn);
  font-size: 11px;
}

/* Kill-Switch (M4): gesperrte Gilden deutlich markieren (nicht nur Farbe — Tag + Rahmen). */
.fleet__table tr.is-suspended td {
  background: var(--ops-deep);
  border-left: 2px solid var(--ops-warn);
}

.tag-suspended {
  color: var(--ops-warn);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fleet__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fleet__mod {
  /* C5 (WCAG 2.5.8 Target Size): min-height ≥24px + größeres vertikales Padding. */
  padding: 7px 11px;
  min-height: 26px;
  background: var(--ops-deep);
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  color: var(--ops-muted);
  font-family: var(--ops-mono);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.fleet__mod:hover,
.fleet__mod:focus-visible {
  border-color: var(--ops-warn);
  color: var(--ops-warn);
}

.fleet__mod:focus-visible {
  outline: 2px solid var(--ops-warn);
  outline-offset: 1px;
}

/* Bereits gesperrt ⇒ der Button entsperrt (Akzentfarbe statt Warnfarbe). */
.fleet__mod--on {
  color: var(--ops-accent);
  border-color: var(--ops-line);
}

.fleet__mod--on:hover,
.fleet__mod--on:focus-visible {
  border-color: var(--ops-accent);
  color: var(--ops-accent);
}

/* Nav-Umschalter (Flotte ↔ Audit-Suche). */
.fleet__navbtn {
  padding: 6px 12px;
  background: var(--ops-deep);
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  color: var(--ops-muted);
  font-family: var(--ops-mono);
  font-size: 12px;
  cursor: pointer;
}

.fleet__navbtn:hover,
.fleet__navbtn:focus-visible {
  color: var(--ops-fg);
  border-color: var(--ops-accent);
}

/*
 * 3px-Aktiv-Markierung (ADR 0012, Auflage 3/5): Gold statt Aether, analog Agent-Hub
 * .nav a.active — aber eigene, zum Pill-Button passende Insets (kein 1:1-Copy der
 * Sidebar-Absolutwerte). overflow:hidden clippt den Streifen an der 4px-Rundung, kein
 * box-shadow/Glow (Anti-Slop A2). Explizit gegen die spätere allgemeine :hover-Regel
 * ausgeschrieben (gleiche Spezifität, .is-active:hover/:focus-visible schlagen die
 * allgemeine :hover/:focus-visible-Regel ohnehin per höherer Spezifität).
 */
.fleet__navbtn.is-active {
  position: relative;
  overflow: hidden;
  color: var(--ops-gold);
  border-color: var(--ops-gold);
  background: linear-gradient(90deg, var(--ops-gold-soft), transparent 70%), var(--ops-deep);
}

.fleet__navbtn.is-active::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 3px;
  background: var(--ops-gold);
}

.fleet__navbtn.is-active:hover,
.fleet__navbtn.is-active:focus-visible {
  color: var(--ops-gold);
  border-color: var(--ops-gold);
}

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid var(--ops-line);
}

.badge--premium {
  color: var(--ops-accent-ink);
  background: var(--ops-accent);
  border-color: var(--ops-accent);
}

.badge--free {
  /* C7 (Kontrast ≥4,5:1 auf --ops-deep): heller als --ops-muted (--ops-muted ≈4,0:1). */
  color: var(--ops-muted-hi);
  background: var(--ops-deep);
}

.prem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.prem__warn {
  color: var(--ops-warn);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fleet__manage {
  /* C5 (WCAG 2.5.8 Target Size): min-height ≥24px + größeres vertikales Padding. */
  padding: 7px 11px;
  min-height: 26px;
  background: var(--ops-deep);
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  color: var(--ops-fg);
  font-family: var(--ops-mono);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.fleet__manage:hover {
  border-color: var(--ops-accent);
  color: var(--ops-accent);
}

.fleet__manage:focus-visible {
  outline: 2px solid var(--ops-accent);
  outline-offset: 1px;
}

.fleet__foot {
  padding: 16px 4px 0;
  color: var(--ops-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ── Billing-Dialog (M3) ───────────────────────────────────────────────────── */

.bdlg {
  width: min(440px, 92vw);
  padding: 0;
  background: var(--ops-panel);
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  color: var(--ops-fg);
}

.bdlg::backdrop {
  /* opsBg (#0b0e11) mit ~72% Alpha — bleibt in der dokumentierten Ops-Tonleiter. */
  background: #0b0e11b8;
}

.bdlg__form {
  padding: 22px 20px;
}

.bdlg__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ops-bright);
}

.bdlg__lede {
  margin: 0 0 16px;
  color: var(--ops-muted);
  font-size: 12px;
  line-height: 1.5;
}

.bdlg__target {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ops-fg);
}

.bdlg__target .mono {
  font-family: var(--ops-mono);
  color: var(--ops-accent);
}

.bdlg__label {
  display: block;
  margin: 0 0 6px;
  color: var(--ops-muted);
  font-size: 12px;
}

.bdlg__input {
  width: 100%;
  margin: 0 0 14px;
  padding: 9px 12px;
  background: var(--ops-deep);
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  color: var(--ops-fg);
  font-family: var(--ops-mono);
  font-size: 14px;
}

.bdlg__input:focus {
  outline: 2px solid var(--ops-accent);
  outline-offset: 1px;
}

.bdlg__row[hidden] {
  display: none;
}

/* Privacy-Hinweis unter dem reason-Feld (Auflage 3a): dezenter Hilfetext, aria-describedby. */
.bdlg__hint {
  margin: -10px 0 14px;
  color: var(--ops-muted);
  font-size: 11px;
  line-height: 1.45;
}

.bdlg__status {
  margin: 4px 0 14px;
  min-height: 1.3em;
  font-size: 13px;
  color: var(--ops-muted);
}

.bdlg__status[data-kind="ok"] {
  color: var(--ops-accent);
}

.bdlg__status[data-kind="error"] {
  color: var(--ops-warn);
}

.bdlg__status[data-kind="info"] {
  color: var(--ops-fg);
}

.bdlg__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Primärer Submit (ADR 0012, Auflage 3/9): Gold statt Aether — Aether bleibt der Fokusring. */
.bdlg__btn {
  padding: 9px 16px;
  background: var(--ops-gold);
  color: var(--ops-accent-ink);
  border: 1px solid var(--ops-gold);
  border-radius: 4px;
  font-family: var(--ops-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.bdlg__btn:hover {
  filter: brightness(1.08);
}

.bdlg__btn:focus-visible {
  outline: 2px solid var(--ops-bright);
  outline-offset: 2px;
}

.bdlg__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bdlg__btn--ghost {
  background: var(--ops-deep);
  color: var(--ops-fg);
  border-color: var(--ops-line);
}

.bdlg__btn--ghost:hover {
  filter: none;
  border-color: var(--ops-muted);
}

/* Kill-Switch-Submit (M4): warnender Akzent statt Premium-Grün (und statt Gold — bewusst kein
   primärer Marke/Aktion-Ton für eine Gefahren-Aktion). Tinte = --ops-accent-ink, gilt für
   Aether/Gold/Warn gleichermaßen (alle drei hell genug für die dunkle Tinte). */
.bdlg__btn--danger {
  background: var(--ops-warn);
  border-color: var(--ops-warn);
  color: var(--ops-accent-ink);
}

/* ── Audit-Such-View (M4 Teil A) ──────────────────────────────────────────────── */

.audit {
  width: min(1080px, 96vw);
  margin: 0 auto;
  padding: 28px 20px 48px;
}

.audit__bar {
  margin-bottom: 18px;
}

.audit__title {
  margin: 0;
  font-size: 18px;
  color: var(--ops-fg);
}

.audit__form {
  background: var(--ops-panel);
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 20px;
}

.audit__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.audit__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--ops-muted);
}

.audit__field--reason {
  margin-top: 14px;
}

.audit__input {
  padding: 8px 10px;
  background: var(--ops-deep);
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  color: var(--ops-fg);
  font-family: var(--ops-mono);
  font-size: 13px;
}

.audit__input:focus-visible {
  outline: 2px solid var(--ops-accent);
  outline-offset: 1px;
}

.audit__hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--ops-muted);
}

.audit__actions {
  margin-top: 16px;
}

/* Primärer Submit (ADR 0012, Auflage 3/9): Gold statt Aether — Aether bleibt der Fokusring. */
.audit__btn {
  padding: 9px 18px;
  background: var(--ops-gold);
  border: 1px solid var(--ops-gold);
  border-radius: 4px;
  color: var(--ops-accent-ink);
  font-family: var(--ops-mono);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.audit__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.audit__btn--ghost {
  background: var(--ops-deep);
  color: var(--ops-fg);
  border-color: var(--ops-line);
}

.audit__btn--ghost:hover {
  border-color: var(--ops-accent);
  color: var(--ops-accent);
}

.audit__status {
  margin: 12px 0 0;
  min-height: 18px;
  font-size: 12px;
  color: var(--ops-muted);
}

.audit__status[data-kind="error"] {
  color: var(--ops-warn);
}

.audit__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.audit__table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ops-line);
  color: var(--ops-muted);
  font-weight: 600;
}

.audit__table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ops-line);
  color: var(--ops-fg);
}

.audit__table .mono {
  font-family: var(--ops-mono);
  color: var(--ops-mono-fg);
}

.audit__more {
  margin-top: 16px;
  text-align: center;
}

/* ── Betriebs-Metriken (M5) ──────────────────────────────────────────────────── */

.metrics__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 4px 14px;
}

.metrics__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ops-fg);
}

.metrics__windows {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  padding: 3px;
  background: var(--ops-panel);
}

.metrics__win {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ops-muted);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.metrics__win:hover,
.metrics__win:focus-visible {
  color: var(--ops-fg);
  outline: none;
}

.metrics__win.is-active {
  background: var(--ops-bg);
  color: var(--ops-accent);
}

.metrics__msg {
  margin: 0;
  padding: 16px 4px;
  color: var(--ops-muted);
  font-size: 13px;
}

.metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.metrics__foot {
  margin-top: 18px;
  color: var(--ops-muted);
  font-size: 11px;
}

.mcard {
  background: var(--ops-panel);
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  padding: 14px 16px;
}

.mcard--wide {
  grid-column: 1 / -1;
}

/*
 * Terminal-Präfixe Ebene 2 (Panel-Kopf, ADR 0012 Auflage 7) + Hairline-Trenner (analog
 * Agent-Hub .panel>.phead — hier direkt am Titel-Element statt an einem Wrapper-Div, weil
 * kein DOM-Umbau erlaubt ist und es keinen separaten Head-Wrapper gibt). NUR diese drei
 * Selektoren; .bdlg__title trägt die margin-bottom-Anpassung für #bdlgTitle/#mdlgTitle
 * (beide teilen die Klasse), .mcard__title bringt ihre eigene bereits im Zielbereich mit.
 */
.mcard__title::before,
#bdlgTitle::before,
#mdlgTitle::before {
  content: "// ";
  color: var(--ops-gold);
  font-weight: 500;
  opacity: 0.85;
}

.mcard__title,
#bdlgTitle,
#mdlgTitle {
  border-bottom: 1px dashed var(--ops-line);
  padding-bottom: 10px;
}

.mcard__title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ops-muted);
}

.mcard__sub {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ops-muted);
}

.mcard__empty {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ops-muted);
}

.mcard__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mstat {
  display: flex;
  flex-direction: column;
  min-width: 84px;
  padding: 8px 12px;
  background: var(--ops-bg);
  border: 1px solid var(--ops-line);
  border-radius: 5px;
}

.mstat__v {
  font-size: 18px;
  font-weight: 700;
  color: var(--ops-bright);
  font-variant-numeric: tabular-nums;
}

.mstat__l {
  font-size: 10px;
  color: var(--ops-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Fälliger Rückstand: Akzent-Ring um die Queue-Statistik (nicht nur Farbe). */
.mcard__stats[data-overdue="1"] {
  outline: 1px solid var(--ops-warn);
  outline-offset: 4px;
  border-radius: 5px;
}

.mlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mlist__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--ops-line);
  font-size: 12px;
}

.mlist__row:last-child {
  border-bottom: none;
}

.mlist__name {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ops-mono-fg);
}

.mlist__count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ops-fg);
  font-weight: 600;
}

/* Horizontaler Balken (CSS-Breite via data-bar 0..10 — kein Inline-Style, CSP-konform). */
.mbar {
  flex: 1 1 auto;
  height: 8px;
  background: var(--ops-bg);
  border-radius: 4px;
  overflow: hidden;
}

.mbar__fill {
  display: block;
  height: 100%;
  background: var(--ops-accent);
  border-radius: 4px;
  width: 0;
}

.mbar[data-bar="1"] .mbar__fill {
  width: 10%;
}
.mbar[data-bar="2"] .mbar__fill {
  width: 20%;
}
.mbar[data-bar="3"] .mbar__fill {
  width: 30%;
}
.mbar[data-bar="4"] .mbar__fill {
  width: 40%;
}
.mbar[data-bar="5"] .mbar__fill {
  width: 50%;
}
.mbar[data-bar="6"] .mbar__fill {
  width: 60%;
}
.mbar[data-bar="7"] .mbar__fill {
  width: 70%;
}
.mbar[data-bar="8"] .mbar__fill {
  width: 80%;
}
.mbar[data-bar="9"] .mbar__fill {
  width: 90%;
}
.mbar[data-bar="10"] .mbar__fill {
  width: 100%;
}

/* Wachstums-Trend: Tages-Spalten als CSS-Höhen-Balken (data-bar 0..10). */
.mtrend {
  display: grid;
  grid-template-columns: 110px 56px 1fr;
  align-items: end;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ops-line);
}

.mtrend:last-child {
  border-bottom: none;
}

.mtrend__label {
  font-size: 12px;
  color: var(--ops-muted);
}

.mtrend__total {
  font-size: 14px;
  font-weight: 700;
  color: var(--ops-accent);
  font-variant-numeric: tabular-nums;
}

.mtrend__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 38px;
}

.mcol {
  flex: 1 1 0;
  min-width: 2px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: var(--ops-bg);
  border-radius: 2px;
  overflow: hidden;
}

.mcol__fill {
  display: block;
  width: 100%;
  background: var(--ops-accent);
  border-radius: 2px;
  height: 0;
}

.mcol[data-bar="0"] .mcol__fill {
  height: 2px;
  opacity: 0.25;
}
.mcol[data-bar="1"] .mcol__fill {
  height: 10%;
}
.mcol[data-bar="2"] .mcol__fill {
  height: 20%;
}
.mcol[data-bar="3"] .mcol__fill {
  height: 30%;
}
.mcol[data-bar="4"] .mcol__fill {
  height: 40%;
}
.mcol[data-bar="5"] .mcol__fill {
  height: 50%;
}
.mcol[data-bar="6"] .mcol__fill {
  height: 60%;
}
.mcol[data-bar="7"] .mcol__fill {
  height: 70%;
}
.mcol[data-bar="8"] .mcol__fill {
  height: 80%;
}
.mcol[data-bar="9"] .mcol__fill {
  height: 90%;
}
.mcol[data-bar="10"] .mcol__fill {
  height: 100%;
}

/*
 * Safe-Area-Insets (C8, viewport-fit=cover): die Konsolen-Ränder respektieren Notch/Home-Indicator
 * auf modernen Mobilgeräten. env() ist überall mit 0px-Fallback gültig (auch Desktop, dort 0).
 */
.ops__topbar {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.fleet__foot,
.audit__foot {
  padding-left: max(4px, env(safe-area-inset-left));
  padding-right: max(4px, env(safe-area-inset-right));
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 640px) {
  .fleet__bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .metrics__grid {
    grid-template-columns: 1fr;
  }

  .mtrend {
    grid-template-columns: 90px 44px 1fr;
  }

  /* C8: Touch-Target ≥44px für Nav-/Sprach-Buttons in der Konsolen-Topbar. */
  .fleet__navbtn,
  .fleet__lang {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  /* Horizontaler Tastatur-Scroll der breiten Fleet-Tabelle (Fokus-Ring sichtbar machen). */
  .fleet__tablewrap:focus-visible {
    outline: 2px solid var(--ops-accent);
    outline-offset: 2px;
  }
}