/*
 * Dunkle SIEM-/Incident-Response-Konsolen-Hülle (Labs E & F).
 * Bewusster Kontrast zur hellen Fachtool-Hülle (console-shell.css): hier "Security-Operations"-Anmutung,
 * Log-Viewer + Aktions-Panel im Split-Layout, Syntax-hervorgehobene Skripte mit Lückentext-Eingaben.
 */

:root {
  /* Seit dem Designsystem (28_Designsystem.md) liegen die SIEM-Variablen auf dem dunklen
     Werkzeug-Set aus design.css. Werte identisch, nur Rot ist als Text heller (4,5:1). */
  --siem-bg: var(--ds-dk-bg);
  --siem-panel: var(--ds-dk-surface);
  --siem-panel-2: var(--ds-dk-surface-2);
  --siem-border: var(--ds-dk-border);
  --siem-text: var(--ds-dk-text-2);
  --siem-text-dim: var(--ds-dk-text-3);
  --siem-accent: var(--ds-dk-accent);
  --siem-mono: var(--font-mono);
  --siem-sans: var(--font-sans);
  --siem-red: var(--ds-bad-dk);
  --siem-red-bg: color-mix(in srgb, var(--ds-bad-dk) 12%, transparent);
  --siem-amber: var(--ds-warn-dk);
  --siem-amber-bg: color-mix(in srgb, var(--ds-warn-dk) 12%, transparent);
  --siem-green: var(--ds-ok-dk);
  --siem-green-bg: color-mix(in srgb, var(--ds-ok-dk) 12%, transparent);
  --siem-purple: #8b5cf6;
}

.siem {
  border: 1px solid var(--siem-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--siem-bg);
  color: var(--siem-text);
  font-family: var(--siem-sans);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.siem-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--siem-panel);
  border-bottom: 1px solid var(--siem-border);
  padding: 10px 16px;
  font-family: var(--siem-mono);
  font-size: var(--fs-m);
}
.siem-topbar-left { display: flex; align-items: center; gap: 10px; }
.siem-live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--siem-red);
  box-shadow: 0 0 0 0 rgba(229,72,77,0.6);
  animation: siem-pulse 1.8s infinite;
}
@keyframes siem-pulse {
  0% { box-shadow: 0 0 0 0 rgba(229,72,77,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(229,72,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}
.siem-topbar-title { color: #e6edf4; letter-spacing: 0.02em; }
.siem-topbar-right { color: var(--siem-text-dim); }

.siem-split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0;
}
.siem-split > * { min-width: 0; }
.siem-col-evidence { border-right: 1px solid var(--siem-border); }
.siem-col-action { background: var(--siem-panel); }

.siem-section-head {
  padding: 12px 16px 8px;
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--siem-text-dim);
  border-bottom: 1px solid var(--siem-border);
}

/* Log-Viewer */
.siem-logview {
  padding: 6px 0;
  font-family: var(--siem-mono);
  font-size: var(--fs-m);
  max-height: 460px;
  overflow-y: auto;
}
.siem-logline {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  padding: 7px 16px;
  border-left: 3px solid transparent;
  cursor: pointer;
  line-height: 1.45;
}
.siem-logline:hover { background: rgba(255,255,255,0.03); }
.siem-logline.sev-red { border-left-color: var(--siem-red); }
.siem-logline.sev-amber { border-left-color: var(--siem-amber); }
.siem-logline.sev-normal { border-left-color: transparent; color: var(--siem-text-dim); }
.siem-logline.flagged { background: var(--siem-red-bg); }
.siem-logline.flagged.sev-amber { background: var(--siem-amber-bg); }
.siem-log-time { color: var(--siem-text-dim); white-space: nowrap; }
.siem-log-msg .evt {
  font-weight: 700;
}
.siem-logline.sev-red .evt { color: var(--siem-red); }
.siem-logline.sev-amber .evt { color: var(--siem-amber); }
.siem-log-flag {
  display: inline-block;
  margin-left: 8px;
  font-size: var(--fs-xs);
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--siem-red-bg);
  color: var(--siem-red);
  vertical-align: middle;
}

.siem-hint {
  padding: 10px 16px;
  font-size: var(--fs-s);
  color: var(--siem-text-dim);
  border-top: 1px solid var(--siem-border);
}
.siem-hint b { color: var(--siem-amber); font-weight: 600; }

/* Aktions-Panel */
.siem-panel-body { padding: 16px; }
.siem-panel-title {
  font-size: var(--fs-l);
  font-weight: 700;
  color: #e6edf4;
  margin: 0 0 4px;
}
.siem-panel-sub { font-size: var(--fs-m); color: var(--siem-text-dim); margin: 0 0 16px; }

.siem-field { margin-bottom: 16px; }
.siem-field label {
  display: block;
  font-size: var(--fs-m);
  color: var(--siem-text);
  margin-bottom: 6px;
  font-weight: 600;
}
.siem-field .q-num { color: var(--siem-accent); font-family: var(--siem-mono); margin-right: 4px; }
.siem-input {
  width: 100%;
  background: var(--siem-bg);
  border: 1px solid var(--siem-border);
  border-radius: 5px;
  padding: 9px 11px;
  color: var(--siem-text);
  font-family: var(--siem-mono);
  font-size: var(--fs-m);
}
.siem-input::placeholder { color: #7a8a9b; }
.siem-input:focus { outline: none; border-color: var(--siem-accent); }
.siem-input.correct { border-color: var(--siem-green); }
.siem-input.wrong { border-color: var(--siem-red); }

.siem-select {
  background: var(--siem-bg);
  border: 1px solid var(--siem-border);
  border-radius: 4px;
  padding: 3px 6px;
  color: var(--siem-text);
  font-family: var(--siem-mono);
  font-size: var(--fs-m);
}

/* Code-Block mit Syntax-Highlighting und Lückentext */
.siem-code {
  background: #0a1119;
  border: 1px solid var(--siem-border);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--siem-mono);
  font-size: var(--fs-m);
  line-height: 1.7;
  color: var(--siem-text);
  overflow-x: auto;
  white-space: pre-wrap;
}
.siem-code .cmt { color: #8a9bad; }
.siem-code .cmd { color: #6cb6ff; }
.siem-code .str { color: #7ee787; }
.siem-code .par { color: #d2a8ff; }
.siem-code-blank {
  background: var(--siem-panel-2);
  border: 1px dashed var(--siem-accent);
  border-radius: 3px;
  padding: 1px 6px;
  color: #fff;
  font-family: var(--siem-mono);
  font-size: var(--fs-m);
  min-width: 120px;
}
.siem-code-blank.correct { border-style: solid; border-color: var(--siem-green); }
.siem-code-blank.wrong { border-style: solid; border-color: var(--siem-red); }

.siem-cta {
  display: block;
  width: 100%;
  border: none;
  border-radius: 6px;
  padding: 15px 18px;
  margin-top: 6px;
  font-size: var(--fs-l);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #e5484d, #8b5cf6);
  box-shadow: 0 3px 14px rgba(139,92,246,0.3);
}
.siem-cta:hover { filter: brightness(1.08); }
.siem-cta:disabled { opacity: 0.45; cursor: default; filter: none; }

.siem-note { font-size: var(--fs-s); color: var(--siem-text-dim); margin-top: 10px; }

/* Live-Response-Terminal (EDR) */
.lr-term {
  background: #070d14;
  font-family: var(--siem-mono);
  font-size: var(--fs-m);
  line-height: 1.55;
  padding: 12px 14px;
  height: 430px;
  overflow-y: auto;
  cursor: text;
}
.lr-out { white-space: pre-wrap; color: #b9c7d4; margin: 0 0 2px; }
.lr-out.echo { color: #e6edf4; }
.lr-out.err { color: var(--siem-red); }
.lr-out.ok { color: var(--siem-green); }
.lr-out.dim { color: #8a9bad; }
.lr-inputline { display: flex; align-items: center; gap: 6px; }
.lr-prompt { color: var(--siem-green); flex-shrink: 0; }
.lr-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e6edf4;
  font-family: var(--siem-mono);
  font-size: var(--fs-m);
  padding: 2px 0;
}
.lr-status {
  display: flex;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid var(--siem-border);
  font-family: var(--siem-mono);
  font-size: var(--fs-s);
  color: var(--siem-text-dim);
}
.lr-status b { color: var(--siem-text); font-weight: 600; }
.lr-status .on { color: var(--siem-green); }
.lr-status .off { color: var(--siem-amber); }

.siem-result-summary {
  margin: 14px 16px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--siem-panel-2);
  border: 1px solid var(--siem-border);
  font-size: var(--fs-m);
  line-height: 1.55;
}
.siem-result-summary ul { margin: 8px 0 0; padding-left: 18px; }

/* ---------- nano-Editor (Lab C, SSH-Sitzung Portal) ---------- */
.vb-nano { flex-direction: column; height: 430px; background: #070d14; }

.vb-nano-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #c9d4de;
  color: #0b1218;
  font-family: var(--siem-mono);
  font-size: var(--fs-s);
  padding: 3px 10px;
  flex-shrink: 0;
}

.vb-nano-top span:nth-child(2) { font-weight: 700; }

.vb-nano-text {
  flex: 1;
  background: #070d14;
  color: #e6edf4;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--siem-mono);
  font-size: var(--fs-m);
  line-height: 1.55;
  padding: 8px 10px;
}

.vb-nano-keys {
  display: flex;
  gap: 18px;
  background: #0b1218;
  border-top: 1px solid #22303f;
  padding: 5px 10px;
  font-family: var(--siem-mono);
  font-size: var(--fs-s);
  color: #9fb0bf;
  flex-shrink: 0;
}

.vb-nano-keys b {
  background: #c9d4de;
  color: #0b1218;
  padding: 0 4px;
  margin-right: 4px;
}

/* ---------- Chronik der Woche (Lab C, Ergebnis) ---------- */
.vb-chronicle {
  padding: 14px 16px;
  max-height: 420px;
  overflow-y: auto;
}

.vb-chron-row {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #22303f;
}

.vb-chron-when {
  color: #9fb0bf;
  flex: 0 0 130px;
  font-size: var(--fs-s);
}

.vb-chron-text {
  flex: 1;
  font-size: var(--fs-m);
  line-height: 1.5;
}

.vb-chron-row.kind-ok   .vb-chron-text { color: var(--siem-green); }
.vb-chron-row.kind-warn .vb-chron-text { color: #e0a020; }
.vb-chron-row.kind-bad  .vb-chron-text { color: var(--siem-red); }

.vb-chronicle-foot { padding: 12px 16px 16px; }
.vb-chronicle-foot .siem-cta { max-width: 280px; }
.vb-skip { background: #1b2733; color: #9fb0c0; }
.vb-sum-bad  { color: var(--siem-red); }
.vb-sum-ok   { color: var(--siem-green); }
.vb-sum-note { margin-top: 6px; }

/* ---------- Dienst-Statusleiste (Lab C, SSH-Sitzung) ---------- */
/* Zeigt den laufenden Zustand. Weicht er von der Datei ab, sagt die Leiste das - der
   Teilnehmer sieht die Wirkung (oder Wirkungslosigkeit) seiner Änderung sofort. */
.vb-svcbar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  background: #0b1218;
  border-top: 1px solid #22303f;
  padding: 8px 14px;
  font-size: var(--fs-s);
}

.vb-svc-cell { display: flex; flex-direction: column; gap: 1px; }
.vb-svc-label { color: #8a9bad; font-size: var(--fs-xs); letter-spacing: 0.03em; }
.vb-svc-val { color: #e6edf4; font-weight: 700; }

.vb-svc-dirty {
  margin-left: auto;
  color: #e0a020;
  border: 1px solid #5a4416;
  background: #21190a;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: var(--fs-s);
}