/* ── Severity-Modifier für detail-panel — semantische Akzentkante links.
   Verwenden, sobald ein Panel kritische / warn / ok / info-Lage darstellt;
   ersetzt nichts Bestehendes. ── */
.detail-panel--severity-risk { border-left-color: var(--clr-risk); }
.detail-panel--severity-warn { border-left-color: var(--clr-warn); }
.detail-panel--severity-ok   { border-left-color: var(--clr-ok); }
.detail-panel--severity-info { border-left-color: var(--clr-info); }
.detail-panel--severity-neutral { border-left-color: var(--clr-border-mid); }

/* ── Tabular-Nums für alle Kennzahl-strong-Elemente in Cockpit/Archiv ── */
.dashboard-summary-primary strong,
.dashboard-summary-fact strong,
.archive-stat strong,
.compact-stat-pill,
.config-tile-value,
.bastion-audit-stats strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at top left, rgba(26, 107, 138, 0.10), transparent 36%),
    radial-gradient(circle at top right, rgba(30, 154, 184, 0.08), transparent 28%),
    linear-gradient(180deg, var(--n-50) 0%, var(--n-50) 100%);
}

button,
input {
  font: inherit;
}

.shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 0;
}

.login-panel {
  width: min(100% - 40px, 420px);
  padding: 32px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  box-shadow: 0 18px 60px rgba(16, 32, 40, 0.12);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--clr-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
}

h1 {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.1;
}

.lead {
  margin: 12px 0 28px;
  color: var(--n-700);
}

.login-form {
  display: grid;
  gap: 16px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--n-800);
  font-weight: 700;
}

input {
  width: 100%;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--n-25);
  color: var(--n-900);
}

input:focus {
  outline: 3px solid rgba(61, 107, 92, 0.22);
  border-color: var(--clr-primary);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--n-800);
  font-size: 0.9rem;
  font-weight: 700;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--clr-primary);
}

button {
  min-height: 46px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 18px;
  background: var(--clr-primary);
  color: var(--n-0);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-base), box-shadow var(--t-base), opacity var(--t-base);
}

button:hover {
  background: var(--clr-primary-dark);
  box-shadow: 0 2px 8px rgba(31,111,104,0.22);
}

.menu-item {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--n-300);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.menu-item .ui-icon {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.07);
  color: var(--b-500);
  font-size: 0.72rem;
}

.menu-item .subnav-logo {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.menu-item:hover .subnav-logo {
  color: rgba(255,255,255,0.96);
}

.menu-item:hover,
.menu-item.active {
  background: rgba(255,255,255,0.10);
  color: var(--n-0);
  box-shadow: none;
}

.menu-item.active {
  border-color: rgba(159,209,200,0.34);
  background: var(--b-50);
  color: var(--b-700);
  box-shadow: 0 2px 8px rgba(0,0,0,0.16);
}

.menu-item.active .ui-icon {
  background: var(--b-100);
  color: var(--clr-primary);
}

.menu-item.active .subnav-logo {
  background: rgba(13,43,58,0.08);
}

.secondary {
  background: var(--clr-nav-active);
}

.form-message {
  min-height: 22px;
  margin: 0;
  color: var(--r-600);
  font-weight: 700;
}

.app {
  --menubar-h: 52px;
  width: 100%;
  min-height: 100vh;
  background: var(--clr-subtle);
}

.menu-bar {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, var(--b-700) 0%, var(--b-700) 100%);
  color: var(--n-0);
  box-shadow: 0 1px 0 rgba(12,26,36,0.22), 0 8px 24px rgba(12,26,36,0.14);
}

.brand {
  min-width: 146px;
  display: grid;
  gap: 0;
  padding: 0 6px;
  color: var(--n-0);
  text-decoration: none;
}

.brand span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 700;
}

.brand strong {
  font-size: 0.9rem;
}

.main-menu {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 34px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: normal;
}

.user-menu span {
  color: var(--n-200);
  font-weight: 700;
}

.settings-shell {
  display: grid;
  gap: 8px;
}

.settings-subnav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  padding: 3px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.settings-subnav-item {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.settings-subnav-item:hover {
  border-color: rgba(26, 107, 138, 0.22);
  background: var(--clr-surface);
  color: var(--clr-primary);
}

.settings-subnav-item.active {
  border-color: rgba(26, 107, 138, 0.35);
  background: var(--clr-surface);
  color: var(--clr-primary);
  box-shadow: inset 0 -2px 0 rgba(26, 107, 138, 0.45);
}

.settings-subnav-item .subnav-logo,
.m365-subnav-btn .subnav-logo {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.settings-subnav-item:hover .subnav-logo,
.settings-subnav-item.active .subnav-logo,
.m365-subnav-btn:hover:not(:disabled) .subnav-logo,
.m365-subnav-btn.is-active .subnav-logo {
  background-color: color-mix(in srgb, currentColor 14%, transparent);
}

.settings-body {
  min-width: 0;
  display: grid;
  gap: 10px;
}

/* Innerhalb der Settings die Panels etwas kompakter halten. */
.settings-body .detail-panel {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  gap: 5px;
}
.settings-body .detail-panel h2 {
  font-size: 1rem;
  margin: 0;
}
.settings-body .detail-panel > p {
  font-size: 0.78rem;
  margin: 0;
}

/* Only shown when a tab needs attention, so it carries the warn colour. */
.settings-subnav-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--clr-muted);
}
.settings-subnav-dot--warn { background: var(--clr-warn); }
.settings-subnav-dot--risk { background: var(--clr-risk); }
.settings-subnav-dot--ok { background: var(--clr-ok); }

.settings-subnav-badge {
  margin-left: 2px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.5;
}

.settings-overview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.settings-overview-head .eyebrow { margin: 0; }
.settings-overview-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

/* ── Settings panels ────────────────────────────────────────────────────── */
.settings-panel {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}
.settings-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.settings-panel-head .eyebrow { margin: 0; }
.settings-panel-head h2 {
  margin: 1px 0 0;
  font-size: 1rem;
}
.settings-panel-lead {
  max-width: 62ch;
  margin: 4px 0 0;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.settings-panel-meta {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}
.settings-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.settings-status-chip {
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-muted) 12%, transparent);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.settings-status-chip--ok   { background: color-mix(in srgb, var(--clr-ok) 14%, transparent);   color: var(--clr-ok); }
.settings-status-chip--warn { background: color-mix(in srgb, var(--clr-warn) 16%, transparent); color: var(--clr-warn); }
.settings-status-chip--info { background: color-mix(in srgb, var(--clr-info) 14%, transparent); color: var(--clr-info); }

.settings-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px dashed var(--clr-border);
}
.settings-subhead h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.settings-subhead h3 > span {
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font-size: 0.66rem;
}

.settings-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}
.settings-note strong { color: var(--clr-text); }

.settings-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin: 0;
}
.settings-facts > div {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.settings-facts dt {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.settings-facts dd {
  margin: 0;
  color: var(--clr-text);
  font-size: 0.84rem;
  font-weight: 700;
  word-break: break-word;
}

.settings-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-toolbar .scan-history-search { flex: 1 1 220px; }
.settings-toolbar-count {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
/* A fixed 460px cap clipped a row halfway while half the page stayed empty.
   The list now takes the height the viewport actually offers. */
.settings-table-scroll {
  max-height: min(68vh, 820px);
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
}
.settings-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--clr-surface-alt);
}
.settings-hunt-table td { vertical-align: top; }
.settings-hunt-action {
  max-width: 52ch;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}
/* Muted rules stay readable but visibly stepped back. */
.settings-hunt-row--muted td:not(:first-child) { opacity: 0.5; }

/* Compact switch so the mute state reads at a glance in a long rule list. */
.settings-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}
.settings-switch input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.settings-switch span {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-muted) 34%, transparent);
  transition: background-color 0.15s ease;
  pointer-events: none;
}
.settings-switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--n-0);
  transition: transform 0.15s ease;
}
.settings-switch input:checked + span { background: var(--clr-ok); }
.settings-switch input:checked + span::after { transform: translateX(13px); }
.settings-switch input:focus-visible + span {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* ── LLM endpoints ──────────────────────────────────────────────────────── */
.llm-endpoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 10px;
}
.llm-endpoint-card {
  display: grid;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
}
.llm-endpoint-card--ok    { border-left-color: var(--clr-ok); }
.llm-endpoint-card--warn  { border-left-color: var(--clr-warn); }
.llm-endpoint-card--muted { border-left-color: var(--clr-border); }
.llm-endpoint-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.llm-endpoint-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.llm-endpoint-state {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-muted) 12%, transparent);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
}
.llm-endpoint-card--ok .llm-endpoint-state {
  background: color-mix(in srgb, var(--clr-ok) 14%, transparent);
  color: var(--clr-ok);
}
.llm-endpoint-card--warn .llm-endpoint-state {
  background: color-mix(in srgb, var(--clr-warn) 16%, transparent);
  color: var(--clr-warn);
}
.llm-endpoint-remove {
  border: 0;
  background: transparent;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}
.llm-endpoint-remove:hover { color: var(--clr-risk); }
.llm-endpoint-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 9px;
}
.llm-field {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.llm-field--wide { grid-column: 1 / -1; }
.llm-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.llm-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.llm-area-card {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.llm-area-name {
  color: var(--clr-text);
  font-size: 0.78rem;
  font-weight: 700;
}
.llm-area-card small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  line-height: 1.4;
}
.llm-area-card select { margin-top: 3px; }

/* Sticky save bar: settings edits are lost on a tab switch otherwise. */
.settings-save-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px -16px -14px;
  padding: 9px 16px;
  border-top: 1px solid var(--clr-warn);
  border-radius: 0 0 10px 10px;
  background: var(--clr-warn-bg);
  color: var(--clr-text);
  font-size: 0.72rem;
  font-weight: 700;
}
.settings-save-bar[hidden] { display: none; }
.settings-save-bar > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 720px) {
  .llm-endpoint-fields { grid-template-columns: 1fr; }
  .settings-panel { padding: 12px; }
  .settings-save-bar { margin: 2px -12px -12px; padding: 9px 12px; }
}

.settings-overview-hint {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

/* auto-fill left empty 160px tracks on a wide screen, so four tiles huddled in
   the left quarter of the page. auto-fit collapses the empty tracks and lets
   the tiles carry the full width. */
/* `.config-grid` is declared further down with a 130px minimum and, at equal
   specificity, won — which is why the tiles stayed narrow. */
.config-grid.config-grid--tiles {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.config-tile {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-left: 3px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, transform 80ms;
}

/* The state dot sits with the area name so the tile answers "is this fine?"
   before anything is read. */
.config-tile-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.config-tile-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--clr-muted);
}

.config-tile--ok .config-tile-dot { background: var(--clr-ok); }
.config-tile--warn .config-tile-dot { background: var(--clr-warn); }
.config-tile--risk .config-tile-dot { background: var(--clr-risk); }
.config-tile--info .config-tile-dot { background: var(--clr-info); }

.config-tile:hover {
  border-color: var(--clr-info);
  background: var(--clr-surface);
}

.config-tile:active {
  transform: translateY(1px);
}

.config-tile-eyebrow {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.config-tile-value {
  color: var(--clr-text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.config-tile-sub {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Status ruhig: linke Akzentkante trägt die Aussage, Label bleibt dezent. */
.config-tile-status {
  justify-self: start;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-muted) 12%, transparent);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.config-tile--ok { border-left-color: var(--clr-ok); }
.config-tile--ok .config-tile-status {
  background: color-mix(in srgb, var(--clr-ok) 14%, transparent);
  color: var(--clr-ok);
}

.config-tile--warn { border-left-color: var(--clr-warn); }
.config-tile--warn .config-tile-status {
  background: color-mix(in srgb, var(--clr-warn) 16%, transparent);
  color: var(--clr-warn);
}

.config-tile--info { border-left-color: var(--clr-info); }
.config-tile--info .config-tile-status {
  background: color-mix(in srgb, var(--clr-info) 14%, transparent);
  color: var(--clr-info);
}

.config-tile--risk { border-left-color: var(--clr-risk); }
.config-tile--risk .config-tile-status {
  background: color-mix(in srgb, var(--clr-risk) 16%, transparent);
  color: var(--clr-risk);
}

/* Read-only values that carry a state say so; "Nicht erreichbar" in the same
   white as "Bereit" forces the reader to interpret seven fields one by one. */
.settings-facts dd.is-ok, .runner-facts dd.is-ok { color: var(--clr-ok); }
.settings-facts dd.is-warn, .runner-facts dd.is-warn { color: var(--clr-warn); }
.settings-facts dd.is-risk, .runner-facts dd.is-risk { color: var(--clr-risk); }
.settings-facts dd.is-muted, .runner-facts dd.is-muted { color: var(--clr-muted); font-weight: 400; }

.workspace {
  min-height: calc(100vh - var(--menubar-h));
  display: grid;
  grid-template-columns: var(--tree-width, 280px) minmax(0, 1fr);
}

.workspace.workspace--no-tree {
  grid-template-columns: minmax(0, 1fr);
}

.workspace.workspace--no-tree .agent-tree {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   KUNDENTREE (Monitoring-Sidebar)
   Einzige Quelle für Layout und Dichte. Frühere Fassungen lagen in fünf
   Kaskadenschichten übereinander und setzten sich nur noch per !important
   durch — Maße stehen jetzt hier und nirgends sonst. Dichte ändern heißt:
   die Custom Properties unten anpassen, nicht eine weitere Schicht anlegen.
   ═══════════════════════════════════════════════════════════════════════ */
.agent-tree {
  --tree-row-device: 28px;
  --tree-row-customer: 32px;
  --tree-row-group: 28px;
  --tree-indent: 18px;
  --tree-name-customer: 0.8rem;
  --tree-name-device: 0.76rem;
  --tree-sub: 0.65rem;
  --tree-line: rgba(148, 163, 184, 0.42);

  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--menubar-h));
  max-height: calc(100vh - var(--menubar-h));
  padding: 8px 7px;
  border-right: 1px solid var(--clr-border);
  background: var(--n-25);
  overflow: hidden;
}

/* Kopf trug zuvor drei Labels für dieselbe Sache (Eyebrow, H2, Pill) und
   kostete zwei Zeilen; jetzt eine Zeile: Titel links, Assetzahl rechts. */
.sidebar-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  padding: 0 2px 5px;
  border-bottom: 1px solid var(--n-200);
}

.sidebar-head h2 {
  max-width: 100%;
  overflow: hidden;
  color: var(--n-900);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-search {
  min-height: 26px;
  padding: 0 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--n-900);
  font-size: 0.72rem;
  font-weight: 600;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.tree-search:focus {
  border-color: rgba(64, 100, 215, 0.45);
  box-shadow: 0 0 0 2px rgba(64, 100, 215, 0.08);
  outline: none;
}

.tree-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--n-300) transparent;
}

.tree-scroll::-webkit-scrollbar { width: 5px; }
.tree-scroll::-webkit-scrollbar-track { background: transparent; }
.tree-scroll::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: var(--radius-sm); }
.tree-scroll::-webkit-scrollbar-thumb:hover { background: var(--n-400); }

.tree-footer {
  flex: 0 0 auto;
  display: grid;
  gap: 5px;
  margin-top: 6px;
  padding: 6px 2px 0;
  border-top: 1px solid var(--n-200);
}

.tree-customer-create {
  min-height: 28px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--b-500);
  border-radius: var(--radius-sm);
  background: var(--b-50);
  color: var(--b-700);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.tree-customer-create:hover,
.tree-customer-create:focus-visible {
  border-color: var(--b-500);
  background: var(--b-100);
  color: var(--b-500);
}

.tree-core-version {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--n-500);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6rem;
  font-weight: 700;
}

h2 {
  margin: 0;
  font-size: 0.9rem;
}

.content-head h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.45rem;
}

.ui-icon,
.title-icon {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.title-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--clr-nav);
  color: var(--n-0);
  font-size: 0.72rem;
}

.tree-count,
.system-pill,
.device-kind {
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  background: var(--n-200);
  color: var(--n-800);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.tree {
  display: grid;
  gap: 2px;
}

.root-node,
.customer-node {
  display: grid;
  gap: 0;
}

.customer-node {
  position: relative;
  border-radius: var(--radius-sm);
}

.customer-node:not(.collapsed) {
  background: linear-gradient(180deg, rgba(64, 100, 215, 0.04), transparent 60%);
}

.customer-list {
  display: grid;
  gap: 1px;
}

.root-button,
.customer-button,
.device-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--n-900);
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.root-button {
  min-height: 24px;
  padding: 2px 5px;
  border-color: var(--clr-border);
  background: var(--n-50);
  color: var(--clr-text);
  font-size: 0.72rem;
}

.customer-button {
  min-height: var(--tree-row-customer);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 5px;
  padding: 1px 5px;
}

/* Die Gerätezeile hatte zwei feste Spuren, die auch dann Platz belegten,
   wenn kein Plattform-Icon und kein Tunnel-Button existierte. Beide sind
   jetzt bedarfsgesteuert — der Name bekommt die Breite zurück. */
.device-button {
  min-height: var(--tree-row-device);
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 5px;
  padding: 1px 4px;
}

.device-button .node-metrics:empty { display: none; }

.root-button:hover,
.customer-button:hover,
.device-button:hover {
  background: var(--n-50);
  color: var(--clr-text);
}

.customer-button.selected,
.device-button.selected {
  background: var(--n-50);
  color: var(--clr-text);
  box-shadow: inset 2px 0 0 var(--clr-primary);
}

.customer-button.selected { box-shadow: inset 2px 0 0 var(--clr-accent); }
.customer-button.selected .node-title strong { color: var(--b-700); }

.node-title {
  display: grid;
  gap: 0;
  min-width: 0;
}

.node-title strong,
.node-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kunde und Gerät lagen bei 0,77 rem gegen 0,74 rem — praktisch gleich groß.
   Der Rang kommt jetzt aus Gewicht und Farbe, nicht aus Zeilenhöhe. */
.customer-button .node-title strong {
  color: var(--n-900);
  font-size: var(--tree-name-customer);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.005em;
}

.device-button .node-title strong {
  color: var(--n-800);
  font-size: var(--tree-name-device);
  font-weight: 600;
  line-height: 1.06;
}

.node-subtitle {
  color: var(--n-500);
  font-size: var(--tree-sub);
  font-weight: 600;
  line-height: 1.05;
}

.device-button .node-subtitle {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-weight: 500;
}

.node-metrics {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  white-space: nowrap;
}

.node-count,
.node-risk,
.device-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, 0.06);
  color: var(--n-800);
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Die Sidebar läuft bewusst dichter als die Badges im Content-Bereich; über
   die Verschachtelung gewinnt das ohne !important gegen die geteilte Regel. */
.agent-tree .node-count,
.agent-tree .node-risk,
.agent-tree .device-kind {
  min-height: 15px;
  padding: 0 5px;
  line-height: 15px;
}

.node-risk {
  background: var(--a-50);
  color: var(--a-500);
}

.status-dot {
  width: 7px;
  height: 7px;
  align-self: center;
  border-radius: var(--radius-sm);
  background: var(--n-400);
  box-shadow: 0 0 0 2px rgba(141,153,158,0.14);
}

.status-dot--green {
  background: var(--g-500);
  box-shadow: 0 0 0 2px rgba(27,143,75,0.12);
}

.status-dot--red {
  background: var(--r-500);
  box-shadow: 0 0 0 2px rgba(191,59,59,0.12);
}

.status-dot--orange {
  background: var(--a-500);
  box-shadow: 0 0 0 2px rgba(201,122,0,0.12);
}

.status-dot--gray {
  background: var(--n-400);
  box-shadow: 0 0 0 2px rgba(138,152,166,0.14);
}

.home-icon {
  width: 12px;
  display: inline-grid;
  place-items: center;
  font-size: 0.84rem;
  line-height: 1;
}

/* Kundenavatar — Initialen, trägt zusammen mit dem Gewicht die Kundenebene. */
.customer-avatar {
  position: relative;
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--n-50);
  color: var(--n-800);
  font: 800 9px/1 ui-sans-serif, system-ui;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.customer-avatar-text { line-height: 1; }

.tree-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border-radius: 3px;
  color: var(--clr-xmuted);
  font-size: 9px;
  cursor: pointer;
  transition: transform var(--t-fast);
}

.tree-chevron:hover { color: var(--clr-accent, var(--b-500)); background: rgba(64, 100, 215, 0.12); }
.customer-node:not(.collapsed) .tree-chevron { transform: rotate(90deg); }
.customer-node:not(.collapsed) > .customer-button .tree-chevron { color: var(--clr-accent, var(--b-500)); }

/* Legacy-Markup: durch .tree-chevron ersetzt, Klasse bleibt als No-op. */
.tree-branch,
.customer-button .tree-branch { display: none; }

/* Eine durchgehende Linie an der Geräteliste statt zweier Pseudo-Elemente
   pro Zeile — bei 20-px-Zeilen war das reines Rauschen. */
.device-list {
  position: relative;
  display: grid;
  gap: 0;
  margin: 1px 0 2px var(--tree-indent);
  padding-left: 7px;
  border-left: 1px solid var(--tree-line);
}

.customer-node.collapsed > .device-list { display: none; }

/* Zeile trägt nur noch den Button; der Tunnel-Button liegt darüber statt in
   einer immer reservierten Rasterspur. */
.device-row {
  position: relative;
  display: block;
}

.device-row .device-button { width: 100%; }
.device-row:has(.tunnel-btn) .device-button { padding-right: 22px; }

.device-row .tunnel-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  z-index: 2;
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.device-row:hover .tunnel-btn,
.device-row:focus-within .tunnel-btn,
.device-row .tunnel-btn:focus-visible,
.tunnel-btn.tunnel-active,
.tunnel-btn.tunnel-pending { opacity: 1; }

.device-row .tunnel-btn.tunnel-active {
  border-color: var(--g-500);
  background: var(--g-50);
}

/* === Tree device groups (Server / Clients / Network / Orphan) === */
.device-group {
  display: grid;
  margin-left: 0;
}

.device-group-head {
  min-height: var(--tree-row-group);
  display: grid;
  grid-template-columns: 13px 14px minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  width: 100%;
  padding: 1px 4px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
}

.device-group-head:hover { color: var(--clr-text); background: rgba(15, 23, 42, 0.04); }
.device-group-head .tree-chevron { transition: transform 0.15s; }
.device-group:not(.collapsed) > .device-group-head .tree-chevron { transform: rotate(90deg); }
.device-group-icon { color: var(--clr-muted); }
.device-group-label { color: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.device-group-count {
  display: inline-block;
  min-width: 17px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

.device-group-body {
  position: relative;
  display: grid;
  gap: 0;
  margin-left: 6px;
  padding-left: 7px;
  border-left: 1px solid rgba(148, 163, 184, 0.34);
}

.device-group.collapsed > .device-group-body { display: none; }
.device-group--orphan > .device-group-head { color: var(--clr-risk); }
.device-group--orphan > .device-group-head .device-group-count { background: var(--clr-risk-bg, var(--r-50)); color: var(--clr-risk); }

/* Sammelknoten für nicht zugeordnete Agents bleibt sichtbar nachrangig. */
.customer-node[data-customer-id="__unassigned"] { opacity: 0.78; }
.customer-node[data-customer-id="__unassigned"]:hover { opacity: 0.95; }
.customer-node[data-customer-id="__unassigned"] .customer-avatar {
  background: var(--n-25);
  color: var(--n-400);
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.16);
}
.customer-node[data-customer-id="__unassigned"] .customer-button .node-title strong,
.customer-node[data-customer-id="__unassigned"] .node-count { color: var(--n-500); }

/* === Lifecycle pills (orphan / stale) in tree === */
.lifecycle-pill {
  display: inline-block;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.lifecycle-pill--orphan { background: var(--clr-risk-bg, var(--r-50)); color: var(--clr-risk); }
.lifecycle-pill--stale  { background: var(--clr-warn-bg, var(--a-50)); color: var(--clr-warn); }
.device-row--orphan .device-button strong { color: var(--clr-muted); text-decoration: line-through; }
.device-row--stale .device-button strong  { color: var(--clr-muted); }

/* === Orphan-Modal === */
.orphan-modal {
  background: var(--clr-surface);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  max-width: 640px;
  width: calc(100% - 40px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}
.orphan-modal header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.orphan-modal header h2 { margin: 0; font-size: 1rem; }
.orphan-modal .modal-close {
  background: none; border: 0; font-size: 1.45rem; cursor: pointer; color: var(--clr-muted);
}
.orphan-list { overflow-y: auto; margin: 10px 0; border-top: 1px solid var(--clr-border); }
.orphan-list-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: var(--clr-surface-alt); position: sticky; top: 0;
}
.orphan-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--clr-border);
  cursor: pointer;
}
.orphan-row:hover { background: var(--clr-surface-alt); }
.orphan-row-main { min-width: 0; display: flex; flex-direction: column; }
.orphan-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orphan-row-main small  { color: var(--clr-muted); font-size: 0.72rem; }
.orphan-row-meta { text-align: right; display: flex; flex-direction: column; }
.orphan-row-meta small { font-size: 0.72rem; }
.orphan-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--clr-border);
}
.action-button--danger {
  background: var(--clr-risk); color: white; border-color: var(--clr-risk);
}
.action-button--danger:disabled { opacity: 0.45; cursor: not-allowed; }

/* === Incident-Row Status pill === */
.incident-status-pill {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
  background: var(--clr-muted);
}
.incident-row--open      { border-left: 2px solid var(--clr-warn); }
.incident-row--open      .incident-status-pill { background: var(--clr-warn); }
.incident-row--progress  { border-left: 2px solid var(--b-500); }
.incident-row--progress  .incident-status-pill { background: var(--b-500); }
.incident-row--waiting   { border-left: 2px solid var(--clr-muted); }
.incident-row--waiting   .incident-status-pill { background: var(--clr-muted); }
.incident-row--escalated { border-left: 2px solid var(--clr-risk); }
.incident-row--escalated .incident-status-pill { background: var(--clr-risk); }
.incident-row--closed    { border-left: 2px solid var(--clr-ok); opacity: 0.78; }
.incident-row--closed    .incident-status-pill { background: var(--clr-ok); }
.incident-status-select { padding: 2px 6px; }

.context-menu {
  position: fixed;
  z-index: 50;
  width: 290px;
  max-width: calc(100vw - 16px);
  padding: 8px;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  box-shadow: 0 12px 34px rgba(16, 32, 40, 0.18);
}

.context-menu-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 4px 5px 8px;
}

.context-menu-head strong,
.context-menu-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-menu-head strong {
  color: var(--n-900);
  font-size: 0.84rem;
}

.context-menu-head small {
  margin-top: 2px;
  color: var(--n-500);
  font-size: 0.72rem;
  font-weight: 700;
}

.context-menu-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--n-50);
  color: var(--clr-primary);
  font-weight: 700;
}

.context-menu-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding: 6px 7px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--b-50);
  color: var(--n-700);
  font-size: 0.72rem;
  font-weight: 700;
}

.context-menu-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--n-50);
  color: var(--n-700);
}

.context-menu-badge--active {
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.context-menu-section {
  display: grid;
  gap: 2px;
  padding: 5px 0;
  border-top: 1px solid var(--n-50);
}

.context-menu-section--compact .context-menu-item {
  min-height: 34px;
}

.context-menu-item {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px 7px;
  background: transparent;
  color: var(--n-900);
  text-align: left;
  border-radius: var(--radius-sm);
}

.context-menu-item:hover {
  background: var(--n-200);
}

.context-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.context-menu-item:disabled:hover {
  background: transparent;
}

.context-menu-item--danger {
  color: var(--clr-danger);
}

.context-menu-item--danger:hover {
  background: var(--clr-danger-bg);
}

.context-menu-item--danger .context-menu-icon {
  background: var(--clr-danger-bg);
  color: var(--clr-danger);
}

.context-menu-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--n-50);
  color: var(--clr-primary);
  font-weight: 700;
}

.context-menu-item strong,
.context-menu-item small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-menu-item strong {
  font-size: 0.78rem;
}

.context-menu-item small {
  margin-top: 2px;
  color: var(--n-500);
  font-size: 0.66rem;
  font-weight: 700;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 32, 40, 0.36);
}

.tunnel-progress-backdrop {
  z-index: 70;
}

.tunnel-progress-modal {
  width: min(100%, 420px);
  display: grid;
  gap: 14px;
  padding: 22px 20px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-lg);
  background: var(--n-0);
  box-shadow: 0 18px 60px rgba(16, 32, 40, 0.18);
}

.tunnel-progress-modal-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.tunnel-progress-copy {
  display: grid;
  gap: 4px;
}

.tunnel-progress-modal h2 {
  margin: 0;
  font-size: 1.25rem;
}

.tunnel-progress-close {
  min-height: 30px;
  width: 30px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 1rem;
  line-height: 1;
}

.tunnel-progress-close:hover {
  background: var(--clr-border);
  color: var(--clr-text);
}

.tunnel-progress-spinner {
  width: 52px;
  height: 52px;
  border: 4px solid rgba(26, 107, 138, 0.18);
  border-top-color: var(--clr-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.tunnel-progress-message,
.tunnel-progress-meta {
  margin: 0;
  color: var(--n-700);
  line-height: 1.45;
}

.tunnel-progress-message {
  font-size: 0.9rem;
}

.tunnel-progress-meta {
  font-size: 0.78rem;
  text-align: center;
}

.bastion-pending-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(26, 107, 138, 0.25);
  background: rgba(26, 107, 138, 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
}
.bastion-pending-banner strong {
  display: block;
  margin-bottom: 6px;
  color: var(--clr-primary);
}
.bastion-pending-banner ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bastion-pending-banner li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bastion-pending-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(26, 107, 138, 0.25);
  border-top-color: var(--clr-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.assignment-modal,
.customer-create-modal,
.customer-edit-modal {
  width: min(100%, 520px);
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.agent-edit-modal {
  width: min(100%, 760px);
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.assignment-modal select,
.assignment-modal input {
  min-height: 40px;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  background: var(--n-25);
  color: var(--n-900);
  font: inherit;
  font-weight: 700;
}

.customer-create-modal input,
.customer-edit-modal input,
.agent-edit-modal select,
.agent-edit-modal input,
.agent-edit-modal textarea {
  min-height: 40px;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  background: var(--n-25);
  color: var(--n-900);
  font: inherit;
  font-weight: 700;
}

.agent-edit-modal textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
  font-weight: 600;
}

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

.agent-edit-subtitle,
.agent-note,
.deployment-queue-note {
  margin-top: 4px;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.deployment-queue-note {
  max-width: 26ch;
}

.agent-edit-modal label,
.customer-create-modal label,
.customer-edit-modal label,
.assignment-modal label,
.deployment-queue-actions label {
  display: grid;
  gap: 6px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.content {
  min-width: 0;
  padding: 18px;
}

.content-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.content-head .eyebrow {
  margin-bottom: 6px;
}

.content-body {
  display: grid;
  gap: 14px;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

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

.live-card,
.donut-card,
.bar-card,
.line-card {
  min-height: 94px;
  display: grid;
  align-content: space-between;
  padding: 12px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-lg);
  background: var(--n-0);
  box-shadow: var(--shadow-xs);
}

.live-card {
  gap: 10px;
}

.live-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.live-card-head span {
  color: var(--n-700);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
}

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

.live-card-grid div {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.live-card-grid span {
  color: var(--n-700);
  font-size: 0.72rem;
  font-weight: 700;
}

.live-card-grid strong {
  font-size: 0.96rem;
}

.donut-card {
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;
}

.donut {
  width: 52px;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: conic-gradient(var(--r-500) calc(var(--value) * 1%), var(--b-100) 0);
  position: relative;
}

.donut::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: inherit;
  background: var(--n-0);
}

.donut-card small {
  display: block;
  margin-top: 6px;
  color: var(--n-700);
  font-weight: 700;
}

.bars {
  display: grid;
  gap: 6px;
}

.bars span {
  height: 7px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--clr-accent) var(--bar), var(--clr-border) 0);
}

.line-card svg {
  width: 100%;
  height: 48px;
}

.line-card polyline {
  fill: none;
  stroke: var(--clr-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metric-strip article {
  min-height: 74px;
  display: grid;
  align-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-lg);
  background: var(--n-0);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base), border-color var(--t-base);
}

.metric-strip article:hover {
  border-color: var(--n-400);
  box-shadow: var(--shadow-sm);
}

.metric-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--n-800);
  font-size: 0.84rem;
  font-weight: 600;
}

.metric-strip strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--n-900);
}

.context-headline {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.context-headline p {
  margin: 0;
  color: var(--n-700);
  font-weight: 700;
}

.detail-panel {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
  border-left: 2px solid var(--clr-primary);
}

/* === Compact detail-panel: collapses padding for header-only blocks === */
.detail-panel--compact {
  padding: 8px 14px;
  gap: 2px;
}
.detail-panel--compact .eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.detail-panel--compact h2 { display: none; }

/* === Compact stat line: inline metrics next to a heading === */
.compact-h2 {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.compact-stat-line {
  display: inline-flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--clr-muted);
}
.compact-stat-line strong { color: var(--clr-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.compact-stat-line .kpi-bad strong { color: var(--clr-risk); }

/* === Hardening compact summary === */
.hardening-summary { margin-bottom: 10px; }
.hardening-score-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-muted);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}
.hardening-score-card--ok   { border-left-color: var(--clr-ok); }
.hardening-score-card--warn { border-left-color: var(--clr-warn); }
.hardening-score-card--risk { border-left-color: var(--clr-risk); }
.hardening-score-main { display: flex; align-items: center; gap: 12px; }
.hardening-score-label { color: var(--clr-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.hardening-score-value { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hardening-score-meta { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.hardening-crit { font-size: 0.84rem; font-weight: 700; }
.hardening-crit--bad { color: var(--clr-risk); }
.hardening-crit--ok  { color: var(--clr-ok); }
.hardening-inline-badge {
  display: inline-block; padding: 0 6px; border-radius: var(--radius-sm);
  font-size: 0.72rem; font-weight: 700; margin-right: 2px;
  background: var(--clr-surface-alt);
}
.hardening-inline-badge--bad  { color: var(--clr-risk); }
.hardening-inline-badge--warn { color: var(--clr-warn); }
.hardening-inline-badge--ok   { color: var(--clr-ok); }

/* === Disk percent pill (replaces progress bar) === */
.disk-pct-pill {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm);
  font-size: 0.72rem; font-weight: 700;
  background: var(--clr-surface-alt);
  font-variant-numeric: tabular-nums;
}
.disk-pct-pill--ok   { color: var(--clr-ok); }
.disk-pct-pill--warn { color: var(--clr-warn); }
.disk-pct-pill--crit { color: var(--clr-risk); background: var(--clr-risk-bg, var(--r-50)); }

/* === Nested HW details for combined disks+ports === */
.agent-hw-details--nested {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--clr-border);
}
.agent-hw-details--nested > summary { font-size: 0.78rem; color: var(--clr-muted); cursor: pointer; }

/* === Compact findings table === */
.findings-table--compact td:first-child { width: 60px; }
.findings-head--compact { padding: 4px 0 8px; }

/* === Analysis panel compact head === */
.analysis-panel-head--compact { gap: 8px; }
.analysis-panel-head--compact h2 { display: none; }
.analysis-panel-head--compact .analysis-updated-meta { display: none; }

/* === Compact stat pills (Vulnerabilities + Threat Hunting toolbar) === */
.compact-stat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.compact-stat-pill strong {
  color: var(--clr-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.compact-stat-pill:hover { background: var(--clr-surface-alt); }
.compact-stat-pill--bad  { border-color: var(--clr-risk); }
.compact-stat-pill--bad  strong { color: var(--clr-risk); }
.compact-stat-pill--warn { border-color: var(--clr-warn); }
.compact-stat-pill--warn strong { color: var(--clr-warn); }
.compact-stat-pill--active {
  background: var(--clr-text); color: var(--clr-surface); border-color: var(--clr-text);
}
.compact-stat-pill--active strong { color: var(--clr-surface); }

/* === Compact toolbar row (replaces dedicated *-noise-toolbar blocks) === */
.compact-toolbar-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--clr-border);
  font-size: 0.78rem;
  color: var(--clr-muted);
}
.compact-toolbar-row label { display: inline-flex; align-items: center; gap: 6px; }
.compact-toolbar-row input[type="range"] { width: 120px; }
.compact-toolbar-panel { margin-bottom: 8px; }

/* === detail-panel--listish: less padding, tighter list-feel === */
.detail-panel--listish {
  padding: 8px 0;
  border-left: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--clr-border);
}

/* === M365 Identity Findings: grouped accordion === */
.m365-findings-groups { display: grid; gap: 6px; }
.m365-findings-group {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.m365-findings-group > summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none;
}
.m365-findings-group > summary::-webkit-details-marker { display: none; }
.m365-findings-group > summary strong { font-size: 0.9rem; }
.m365-findings-group[open] > summary { border-bottom: 1px solid var(--clr-border); }
.m365-findings-group table { margin: 0; }

.detail-panel p {
  margin: 0;
  color: var(--clr-muted);
  font-weight: 500;
  font-size: 0.84rem;
  line-height: 1.5;
}

.detail-panel h2 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.device-detail {
  display: grid;
  gap: 8px;
}

.device-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  overflow-x: auto;
}

.device-summary div {
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.device-summary dt {
  color: var(--n-700);
  font-size: 0.72rem;
  font-weight: 700;
}

.device-summary dd {
  margin: 0;
  color: var(--n-900);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.element-submenu {
  display: grid;
  gap: 0;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  overflow: visible;
  box-shadow: 0 2px 8px rgba(12,26,36,0.08), 0 0 0 1px rgba(12,26,36,0.04);
}

.element-submenu-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 9px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.element-submenu-head h2 {
  margin: 2px 0 0;
  font-size: 0.96rem;
  font-weight: 700;
}

.subnav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  background: var(--clr-nav);
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav::-webkit-scrollbar { display: none; }

.subnav-item {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255,255,255,0.60);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.subnav-item .ui-icon {
  font-size: 0.78rem;
  opacity: 0.65;
  flex-shrink: 0;
}

.subnav-logo {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
  overflow: hidden;
  line-height: 1;
}

.subnav-logo svg {
  width: 15px;
  height: 15px;
  display: block;
}

.subnav-logo svg path,
.subnav-logo svg rect,
.subnav-logo svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subnav-logo--argus svg rect {
  fill: currentColor;
  stroke: none;
}

.subnav-logo--microsoft {
  grid-template-columns: repeat(2, 7px);
  grid-template-rows: repeat(2, 7px);
  gap: 2px;
  padding: 1px;
  background: rgba(255,255,255,0.11);
}

.subnav-logo--microsoft span {
  width: 7px;
  height: 7px;
  border-radius: 1px;
}

.subnav-logo--microsoft span:nth-child(1) { background: var(--r-500); }
.subnav-logo--microsoft span:nth-child(2) { background: var(--g-500); }
.subnav-logo--microsoft span:nth-child(3) { background: var(--b-500); }
.subnav-logo--microsoft span:nth-child(4) { background: var(--a-500); }

.subnav-logo--argus { color: var(--b-500); background: rgba(20,184,166,0.16); }
.subnav-logo--network { color: var(--b-500); background: rgba(14,165,233,0.16); }
.subnav-logo--ai { color: var(--b-200); background: rgba(124,58,237,0.16); }
.subnav-logo--logs { color: var(--b-200); background: rgba(2,132,199,0.14); }
.subnav-logo--hunt { color: var(--a-500); background: rgba(217,119,6,0.16); }
.subnav-logo--vuln { color: var(--r-500); background: rgba(220,38,38,0.16); }
.subnav-logo--hardening { color: var(--g-500); background: rgba(22,163,74,0.16); }
.subnav-logo--integrity { color: var(--g-200); background: rgba(5,150,105,0.14); }
.subnav-logo--response { color: var(--a-500); background: rgba(245,158,11,0.16); }
.subnav-logo--findings { color: var(--r-500); background: rgba(225,29,72,0.16); }
.subnav-logo--inventory { color: var(--b-500); background: rgba(37,99,235,0.16); }
.subnav-logo--license { color: var(--a-200); background: rgba(202,138,4,0.16); }
.subnav-logo--identity { color: var(--b-200); background: rgba(59,130,246,0.16); }
.subnav-logo--mail { color: var(--b-500); background: rgba(8,145,178,0.16); }
.subnav-logo--connect,
.subnav-logo--settings,
.subnav-logo--deployment { color: var(--n-500); background: rgba(100,116,139,0.18); }
.subnav-logo--external-scan { color: var(--b-500); background: rgba(14,165,233,0.16); }
.subnav-logo--diagnostics { color: var(--a-500); background: rgba(245,158,11,0.16); }

.subnav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subnav-item:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.88);
}
.subnav-item:hover .ui-icon { opacity: 0.9; }
.subnav-item:hover .subnav-logo { color: rgba(255,255,255,0.94); }

.subnav-item.active {
  font-weight: 700;
}
.subnav-item.active .ui-icon { opacity: 1; }
.subnav-item.active .subnav-logo {
  color: var(--n-0);
  background: rgba(255,255,255,0.15);
}

/* Issue-Dot auf Subnav-Tab */
.subnav-item { position: relative; }
.subnav-issue-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-nav, var(--n-900));
}
.subnav-issue-dot--risk { background: var(--clr-risk, var(--r-600)); }
.subnav-issue-dot--warn { background: var(--clr-warn, var(--a-500)); }

.subcontent {
  padding: 10px;
}

.subcontent p {
  margin: 0;
  color: var(--clr-muted);
  font-weight: 600;
  font-size: 0.84rem;
}

.capability-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-list li {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  color: var(--n-900);
  font-size: 0.84rem;
  font-weight: 700;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  table-layout: auto;
  font-variant-numeric: tabular-nums;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 8px;
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}

.filter-row > span {
  line-height: 1;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.filter-row > select {
  min-height: 26px;
  width: auto;
  max-width: 200px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--t-fast);
}

.filter-row > select:focus {
  outline: none;
  border-color: var(--clr-primary);
}

.data-table th,
.data-table td {
  padding: 8px 11px;
  border-bottom: 1px solid var(--clr-border);
  text-align: left;
  white-space: nowrap;
  font-size: 0.84rem;
  line-height: 1.45;
}

/* Lange Zellinhalte sauber kürzen statt die Tabelle in den Horizontal-Scroll
   zu treiben. Gilt global; Zellen mit .cell-wrap dürfen weiterhin umbrechen. */
.data-table td {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-table td.cell-wrap {
  max-width: none;
  white-space: nowrap;
  overflow: visible;
}
.data-table td.cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table th.cell-num {
  text-align: right;
}

.compact-table th,
.compact-table td {
  padding: 5px 9px;
  font-size: 0.78rem;
}

/* === Subpage list densification ===
   Applied to all list-like tables under customer/agent subpages.
   Goals:
   - Single row of vertical text per record (title + small meta below)
   - Ellipsis instead of wrap for long cells
   - Reduced row height and consistent baseline */
.findings-table--compact td,
.cust-endpoint-table td,
.scan-history-table td,
.qc-table td,
.hardening-table td,
.hunt-table--single td,
.vuln-table--single td,
.scan-targets-table td {
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 1.25;
  vertical-align: middle;
}
.findings-table--compact td strong,
.scan-history-table td strong,
.cust-endpoint-table td strong,
.compact-table td > strong:only-child,
.compact-table td > strong + small,
.compact-table td > strong + div.muted-small {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.findings-table--compact td small,
.scan-history-table td small,
.cust-endpoint-table td small,
.compact-table td > small,
.compact-table td > div.muted-small {
  display: block;
  font-size: 0.72rem;
  color: var(--clr-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
/* Finding rows: clickable feel + severity left rail. */
.finding-row {
  border-left: 2px solid transparent;
}
.finding-row--nav { cursor: pointer; }
.finding-row--nav:hover td { background: var(--clr-info-bg); }
.finding-row--critical, .finding-row--high  { border-left-color: var(--clr-risk); }
.finding-row--medium  { border-left-color: var(--clr-warn); }
.finding-row--low     { border-left-color: var(--clr-info); }
.finding-row--info    { border-left-color: var(--clr-border); }
.finding-row td:first-child { padding-left: 8px; }
.finding-nav-cell {
  width: 24px;
  color: var(--clr-muted);
  font-size: 0.78rem;
  text-align: right;
  padding-right: 8px;
}
.finding-row--nav:hover .finding-nav-cell { color: var(--clr-primary); }

/* Vulnerability product stack: tighter, single text-block style. */
.vuln-product-stack { gap: 1px !important; }
.vuln-cve-stack { gap: 2px !important; }
.vuln-product-name { font-size: 0.84rem !important; line-height: 1.2 !important; }
.vuln-product-meta { font-size: 0.72rem !important; line-height: 1.2 !important; }

/* Hunt assessment row: compact defaults; single-line table overrides follow below. */
.hunt-signal-stack { gap: 1px !important; }
.hunt-signal-title { font-size: 0.84rem !important; line-height: 1.2 !important; }
.hunt-signal-meta-line { font-size: 0.72rem !important; }
.hunt-cell-tactic strong { font-size: 0.84rem; }
.hunt-cell-tactic .hunt-tactic-mitre { display: block; font-size: 0.66rem; margin-left: 0; }
.hunt-action-text, .vuln-action-text {
  display: block;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status pills inline next to badge instead of stacked below. */
.hardening-status-text { font-size: 0.72rem !important; font-weight: 700; }

/* Threat-Hunting compact stat strip. */
.th-stat-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  margin: 4px 0 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  flex-wrap: wrap;
}
.th-stat-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  font-size: 0.72rem;
}
.th-stat-pill strong {
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--clr-muted);
}
.th-stat-pill span { color: var(--clr-muted); }
.th-stat-pill--risk { background: color-mix(in srgb, var(--clr-risk) 14%, transparent); }
.th-stat-pill--risk strong { color: var(--clr-risk); }
.th-stat-pill--warn { background: color-mix(in srgb, var(--clr-warn) 14%, transparent); }
.th-stat-pill--warn strong { color: var(--clr-warn); }
.th-stat-scope {
  margin-left: auto;
  font-size: 0.72rem;
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--n-900);
  color: rgba(255,255,255,0.78);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--n-900);
}

.data-table tbody tr:hover td {
  background: var(--n-25);
}

.data-table tbody tr:first-child td { border-top: none; }

.data-table td { vertical-align: middle; }

.visual-panel {
  display: grid;
  gap: 14px;
}

.attack-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.attack-map article {
  min-height: 44px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  color: var(--n-900);
  font-size: 0.84rem;
  font-weight: 700;
}

.hunt-summary {
  display: grid;
  grid-template-columns: 110px 110px 110px 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.hunt-summary article {
  min-height: 52px;
  display: grid;
  align-content: space-between;
  padding: 9px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}

.hunt-summary article.hunt-stat-risk {
  border-left: 2px solid var(--clr-warn);
}

.hunt-summary span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.hunt-summary strong {
  font-size: 0.96rem;
}

.hunt-top-tactic {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-text);
}

.hunt-workbench {
  display: grid;
  grid-template-columns: minmax(200px, 0.3fr) minmax(0, 1fr);
  gap: 8px;
}

.hunt-rail {
  display: grid;
  align-content: start;
  gap: 4px;
}

.hunt-rail-item {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 28px 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  background: var(--clr-surface);
  color: var(--clr-text);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.hunt-rail-item:nth-child(odd) {
  background: var(--n-25);
}

.hunt-rail-item.active {
  border-color: var(--clr-primary);
  border-left-color: var(--clr-accent);
  background: var(--clr-info-bg);
}

.hunt-rail-item:hover {
  background: var(--clr-surface-alt);
  border-color: var(--clr-border-mid);
}

.hunt-rail-item strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.hunt-rail-item span {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 600;
}

.hunt-rail-item small {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  min-width: 20px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--clr-primary);
  color: var(--n-0);
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}

.hunt-result {
  display: grid;
  gap: 8px;
}

.hunt-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}

.hunt-result-head h2 {
  margin: 4px 0 0;
  font-size: 1rem;
}

.hunt-result-head p {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted);
}

.hunt-result-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hunt-result-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  font-size: 0.66rem;
  font-weight: 700;
}

.hunt-technique {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--b-500);
  font-size: 0.66rem;
  font-weight: 700;
  font-family: "Cascadia Code", "Fira Code", ui-monospace, monospace;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
}

a.hunt-technique:hover {
  background: var(--clr-primary);
  color: var(--n-0);
}

.hunt-table td:first-child {
  max-width: 280px;
  font-weight: 700;
}

.source-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.customer-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  padding: 5px 10px;
  background: var(--clr-nav);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: 0;
}

.customer-tabs-shell {
  display: grid;
  gap: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: visible;
  box-shadow: var(--shadow-sm);
}

.customer-tabs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px;
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
}

.customer-tabs-head h2 {
  margin: 2px 0 0;
  font-size: 1rem;
  font-weight: 700;
}

.customer-tab-pane {
  padding: 14px;
  background: var(--clr-surface);
}

.customer-tabs .subnav-item {
  min-height: 32px;
  font-size: 0.78rem;
}

.customer-overview-kpis {
  margin: 14px 14px 0;
}

.customer-overview-kpis + .viz-row {
  margin-top: 8px;
}

.customer-tab-pane--inner {
  display: grid;
  gap: 8px;
}

.logviewer-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}

.logviewer-search {
  display: grid;
  gap: 5px;
  flex: 1;
  min-width: 200px;
  max-width: 440px;
}

.logviewer-search label {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.logviewer-search input {
  min-height: 34px;
  width: 100%;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  padding: 0 10px 0 32px;
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font: inherit;
  font-size: 0.84rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa5ae' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
  transition: border-color var(--t-fast);
}

.logviewer-search input:focus {
  outline: none;
  border-color: var(--clr-primary);
  background-color: var(--clr-surface);
}

.logviewer-meta {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.logviewer-page-size {
  display: grid;
  gap: 5px;
}

.logviewer-page-size label {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.logviewer-page-size select {
  min-height: 34px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font: inherit;
  font-size: 0.78rem;
}

/* Log-Viewer scroll container — Monospace, dark panel */
.logviewer-scroll {
  height: calc(100vh - 310px);
  min-height: 320px;
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--n-900);
  scrollbar-width: thin;
  scrollbar-color: var(--n-800) transparent;
  grid-column: 3;
  grid-row: 2;
}

.logviewer-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.logviewer-scroll::-webkit-scrollbar-thumb { background: var(--n-800); border-radius: var(--radius-sm); }

/* Override table colours inside dark log-viewer */
.logviewer-scroll .data-table th {
  background: var(--n-900);
  color: rgba(255,255,255,0.5);
  border-bottom-color: var(--n-900);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.logviewer-scroll .data-table td {
  color: var(--n-300);
  border-bottom-color: var(--n-900);
  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  vertical-align: top;
}

.logviewer-scroll .data-table {
  min-width: 0;
  table-layout: auto;
}

.logviewer-scroll .data-table td:last-child {
  width: 100%;
}

.logviewer-scroll .data-table tbody tr:nth-child(even) td {
  background: var(--n-900);
}

.logviewer-scroll .data-table tbody tr:hover td {
  background: var(--n-900) !important;
}

.logviewer-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  font-size: 0.78rem;
  color: var(--clr-muted);
  grid-column: 3;
  grid-row: 3;
}

.device-log-pane {
  gap: 8px;
}

.device-log-workbench {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.device-log-picker {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.device-log-picker > span {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.device-log-picker > div {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.device-log-pill {
  display: inline-grid;
  gap: 1px;
  min-width: 150px;
  max-width: 240px;
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
  cursor: pointer;
}

.device-log-pill.active {
  border-color: var(--clr-primary);
  border-left: 2px solid var(--clr-primary);
  background: var(--clr-info-bg);
}

.device-log-pill strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.device-log-pill span {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.device-log-workbench .logviewer-scroll-header,
.device-log-workbench .logviewer-scroll,
.device-log-workbench .logviewer-pager {
  grid-column: auto;
  grid-row: auto;
}

.device-log-workbench .logviewer-scroll {
  height: calc(100vh - 390px);
  min-height: 300px;
}

.source-assignment {
  display: grid;
  align-items: stretch;
  gap: 8px;
}

.source-summary-head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.source-summary-head > div {
  min-width: 0;
}

.source-summary > div {
  margin-right: auto;
}

.source-summary p {
  margin: 0;
}

.source-summary h2 {
  white-space: nowrap;
}

.collector-agents {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.source-summary > span,
.collector-agents span {
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  background: var(--n-200);
  color: var(--n-900);
  font-size: 0.72rem;
  font-weight: 700;
}

.source-assignment .stream-table {
  overflow-x: auto;
}

.data-source-module,
.data-source-explorer {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.data-source-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.source-config {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}

.source-config p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--clr-muted);
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  margin: 0;
}

.config-grid div {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.config-grid dt {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.config-grid dd {
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--clr-text);
  font-size: 0.78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact-Variante (z. B. LLM-Bereichszuordnung): <article>-Karten mit
   konsistentem Chrome — vorher ungestylt, da .config-grid div nur div traf. */
.config-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.config-grid--compact article {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--clr-surface-alt);
}
.config-grid--compact article > span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.config-grid--compact article > select {
  width: 100%;
  min-width: 0;
}

.source-config-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.source-config-form select,
.source-config-form input {
  min-height: 34px;
  width: 100%;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  background: var(--n-0);
  color: var(--n-900);
}

.source-config-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  grid-column: 1 / -1;
}

.license-audit-intro {
  display: grid;
  gap: 4px;
}

.license-audit-disclaimer {
  color: var(--n-500);
  font-size: 0.78rem;
}

.license-audit-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.license-audit-summary article {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.license-audit-summary span {
  color: var(--n-700);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.license-audit-summary strong {
  color: var(--n-900);
  font-size: 1rem;
  font-weight: 700;
}

.license-audit-scope {
  color: var(--n-700);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.license-audit-table td:last-child {
  white-space: nowrap;
}

/* The collapsible <details> wrapper was replaced by real settings tabs; only
   the inner action/scroll/meta helpers are still used (Analyse-Regeleditor). */
.license-audit-settings-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.license-audit-settings-meta {
  margin: 0;
  color: var(--n-500);
  font-size: 0.78rem;
}

.license-audit-settings-scroll {
  overflow-x: auto;
}

.license-audit-settings-table td:nth-child(2),
.license-audit-settings-table td:nth-child(3) {
  white-space: nowrap;
}

.license-audit-settings-table td:nth-child(4) {
  max-width: 420px;
}

.license-audit-settings-table input,
.license-audit-settings-table select {
  min-height: 32px;
  width: 100%;
  font-size: 0.78rem;
}

.license-audit-settings-table td small {
  display: block;
  margin-top: 4px;
  color: var(--n-500);
  font-size: 0.66rem;
  line-height: 1.3;
}

.license-audit-settings-table td:first-child {
  width: 72px;
  text-align: center;
}

.license-audit-settings-table td:last-child {
  width: 88px;
  white-space: nowrap;
}

.alert-rule-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--clr-surface) 0%, var(--n-25) 100%);
  box-shadow: var(--shadow-xs);
}

.alert-rule-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, max-content));
  gap: 8px;
}

.alert-rule-summary article {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  box-shadow: var(--shadow-xs);
}

.alert-rule-summary span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.alert-rule-summary strong {
  font-size: 1.1rem;
}

.alert-rules-panel {
  overflow-x: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  box-shadow: var(--shadow-xs);
}

.alert-rules-table td:nth-child(2),
.alert-rules-table td:nth-child(6),
.alert-rules-table td:nth-child(8) {
  white-space: nowrap;
}

.alert-rules-table input,
.alert-rules-table select {
  min-height: 30px;
  width: 100%;
  font-size: 0.78rem;
  border-radius: 3px;
}

.alert-rules-table td:first-child {
  width: 72px;
  text-align: center;
}

.alert-rules-table td:last-child {
  width: 84px;
  white-space: nowrap;
}

.alert-rules-table thead th {
  background: var(--n-50);
  border-bottom-color: var(--n-300);
}

.alert-rules-table tbody td {
  background: var(--n-0);
}

.alert-rules-table tbody tr:hover td {
  background: var(--n-50);
}

.alert-channel-cell {
  display: grid;
  gap: 6px;
  min-width: 130px;
}

.alert-channel-cell label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--clr-text);
  padding: 4px 6px;
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  background: var(--clr-surface-alt);
}

.alert-channel-cell input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
}

.license-family-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--n-200);
  color: var(--n-900);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.license-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.license-badge-neutral {
  background: var(--n-200);
  color: var(--n-900);
}

.license-badge-cal {
  background: var(--a-100);
  color: var(--a-500);
}

.license-badge-under {
  background: var(--r-100);
  color: var(--r-600);
}

.license-badge-oss {
  background: var(--g-100);
  color: var(--g-500);
}

.collector-assignment-list {
  display: grid;
  gap: 8px;
}

.collector-assignment-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--n-0) 0%, var(--n-25) 100%);
  box-shadow: var(--shadow-xs);
}

.collector-assignment-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.collector-assignment-meta {
  margin: 3px 0 0;
  color: var(--n-700);
  font-size: 0.78rem;
  font-weight: 700;
}

.collector-assignment-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--n-200);
  color: var(--n-900);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.collector-assignment-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.source-workbench {
  display: grid;
  grid-template-columns: minmax(170px, 0.22fr) minmax(115px, 0.16fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 8px;
}

.source-list-panel {
  display: grid;
  align-content: start;
  gap: 4px;
  grid-row: 1 / -1;
}

.source-row {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
  border-left: 2px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.source-row.active {
  border-left-color: var(--clr-accent);
  background: var(--clr-info-bg);
  border-color: var(--clr-primary);
}

button.source-row:hover {
  background: var(--clr-surface-alt);
  border-color: var(--clr-border-mid);
}

.source-row strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-text);
}

.source-row span,
.source-row small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 600;
}

.source-device-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--clr-info-bg);
  border: 1px solid var(--clr-info);
  color: var(--clr-primary) !important;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast);
}

.source-device-link:hover {
  background: var(--clr-primary);
  color: var(--n-0) !important;
}

.stream-list {
  display: grid;
  align-content: start;
  gap: 3px;
  grid-row: 1 / -1;
}

.stream-item {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 0;
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
  border-left: 2px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.stream-item.active {
  border-left-color: var(--clr-primary);
  background: var(--clr-info-bg);
  border-color: var(--clr-primary);
}

button.stream-item:hover {
  background: var(--clr-surface-alt);
  border-color: var(--clr-border-mid);
}

.stream-item strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.stream-item span {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 600;
}

.stream-table {
  min-width: 0;
  overflow-x: auto;
}

.stream-table .data-table,
.subcontent .data-table,
.data-source-module .data-table,
.data-source-explorer .data-table {
  min-width: 720px;
}

.source-assignment-table {
  min-width: 960px;
}

.inventory-panel {
  display: grid;
  gap: 8px;
}

.agent-management {
  display: grid;
  gap: 8px;
}

.deployment-management {
  gap: 16px;
}

/* ── Page header ─────────────────────────────────────────── */
.deploy-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.deploy-page-head h2 { margin: 2px 0 0; }

/* ── Step flow ───────────────────────────────────────────── */
.deploy-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.deploy-step {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deploy-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: var(--n-0);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.deploy-step-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.deploy-step-body strong {
  font-size: 0.84rem;
  color: var(--clr-text);
}

.deploy-step-body span {
  font-size: 0.72rem;
  color: var(--clr-muted);
}

.deploy-step-arrow {
  color: var(--clr-xmuted);
  font-size: 1rem;
  margin: 0 4px;
}

/* ── Enrollment token card ───────────────────────────────── */
.enroll-token-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border-mid);
  background: var(--clr-surface);
  overflow: hidden;
}

.enroll-token-card--active {
  border-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

.enroll-token-card--inactive {
  border-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.enroll-token-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.enroll-token-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.enroll-token-card--active .enroll-token-dot   { background: var(--clr-ok); box-shadow: 0 0 0 3px rgba(40,167,69,0.2); }
.enroll-token-card--inactive .enroll-token-dot { background: var(--clr-warn); }

.enroll-token-status {
  margin: 0;
  font-size: 0.84rem;
  color: var(--clr-text);
  font-weight: 500;
}

.enroll-token-value {
  display: block;
  margin: 0 16px 14px;
  padding: 8px 12px;
  background: var(--n-900);
  color: var(--g-200);
  font: 0.78rem/1.4 "SFMono-Regular", Consolas, monospace;
  border-radius: var(--radius-sm);
  word-break: break-all;
  border: 1px solid var(--g-700);
  user-select: all;
}

.enroll-token-warn {
  margin: 0 16px 14px;
  font-size: 0.78rem;
  color: var(--clr-warn);
}

/* ── Section label ───────────────────────────────────────── */
.deploy-section-label {
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--clr-border);
}

/* ── Outdated count badge ────────────────────────────────── */
.deploy-outdated-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
  border: 1px solid var(--clr-warn);
  font-size: 0.66rem;
  font-weight: 700;
}

.deployment-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.deployment-intro {
  max-width: 68ch;
  margin: 6px 0 0;
  color: var(--n-700);
  font-size: 0.9rem;
  line-height: 1.45;
}

.deployment-warning {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--a-500);
  border-radius: var(--radius-md);
  background: var(--a-50);
  color: var(--a-600);
  font-size: 0.84rem;
  line-height: 1.4;
}

.agent-update-panel {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
  border-top: 2px solid var(--clr-primary);
}

.agent-update-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-update-panel-head h2 {
  margin: 2px 0 0;
  font-size: 0.96rem;
}

.agent-update-table td strong {
  display: block;
  font-size: 0.84rem;
}

.agent-update-sub {
  color: var(--clr-muted);
  font-size: 0.66rem;
  margin-top: 2px;
}

.agent-update-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.agent-update-status--current {
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.agent-update-status--outdated {
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.agent-update-status--pending {
  background: var(--clr-info-bg);
  color: var(--clr-info);
}

.agent-update-status--unknown {
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
}

.agent-update-action--inactive {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

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

.deploy-platform-picker {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--n-0) 0%, var(--b-50) 100%);
  box-shadow: var(--shadow-xs);
}

.deploy-platform-picker h3 {
  margin: 0 0 4px;
  font-size: 0.96rem;
}

.deploy-platform-picker .deployment-intro {
  margin: 0;
}

.deploy-platform-select {
  display: grid;
  gap: 5px;
  min-width: 230px;
  font-size: 0.72rem;
  color: var(--clr-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.deploy-platform-select select {
  min-height: 34px;
}

.deployment-selected-tile {
  margin-top: 10px;
}

.deployment-public-key-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}

.deployment-public-key-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.deployment-public-key-head h3 {
  margin: 2px 0 0;
}

@media (max-width: 860px) {
  .deployment-os-grid { grid-template-columns: 1fr; }
  .deploy-platform-picker {
    flex-direction: column;
    align-items: stretch;
  }
  .deploy-platform-select {
    min-width: 0;
  }
}

.deployment-os-card {
  display: grid;
  gap: 0;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.deployment-os-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--clr-nav);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.deployment-os-card-head > div {
  min-width: 0;
}

.deployment-os-logo {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: rgba(255,255,255,0.88);
}

.deployment-os-logo rect,
.deployment-os-logo path,
.deployment-os-logo circle {
  fill: currentColor;
}

.deployment-os-card--windows .deployment-os-logo {
  color: var(--b-500);
}

.deployment-os-card--linux .deployment-os-logo {
  color: var(--g-200);
}

.deployment-os-card--mac .deployment-os-logo {
  color: var(--n-300);
}

.deployment-os-card--sentinel .deployment-os-logo {
  color: var(--clr-primary);
}

.deployment-os-card-head .eyebrow {
  color: rgba(255,255,255,0.55);
  margin: 0 0 1px;
  font-size: 0.66rem;
}

.deployment-os-card-head h3 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--n-0);
}

.deployment-os-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.80);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* OS accent lines on card header */
.deployment-os-card--windows .deployment-os-card-head { border-left: 2px solid var(--b-500); }
.deployment-os-card--linux   .deployment-os-card-head { border-left: 2px solid var(--g-500); }
.deployment-os-card--mac     .deployment-os-card-head { border-left: 2px solid var(--n-400); }
.deployment-os-card--sentinel .deployment-os-card-head { border-left: 2px solid var(--clr-primary); }

.deployment-os-body {
  display: grid;
  gap: 8px;
  padding: 10px 12px 11px;
}

.deployment-os-note {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.deployment-code-group {
  display: grid;
  gap: 5px;
}

.deployment-code-group--inline {
  gap: 4px;
}

.deployment-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.deployment-code-label {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.deployment-inline-code,
.deployment-code {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--n-900);
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--n-300);
  font: 0.74rem/1.45 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.deployment-inline-code {
  color: var(--b-500);
}

/* Firewall-Adoption: Einmalcode fuer vorinstallierte pfSense-Pakete */
.deployment-adoption {
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--clr-border) 80%, transparent);
}

.deployment-adoption-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.deployment-adoption-customer {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 7px 9px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: 0.78rem;
}

.deployment-adoption-result {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--clr-accent) 32%, var(--clr-border));
  border-left: 2px solid var(--clr-accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-accent) 6%, var(--clr-surface));
}

.deployment-adoption-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.deployment-adoption-code code {
  font: 700 1.05rem/1.3 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  letter-spacing: 0.12em;
  color: var(--clr-primary);
}

.deployment-error {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--r-200);
  border-radius: var(--radius-md);
  background: var(--n-25);
  color: var(--r-700);
}

.deployment-error p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--r-700);
}

.deployment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 12px;
}

.deployment-queue,
.deployment-summary {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--n-0) 0%, var(--n-25) 100%);
}

.deployment-queue-head,
.deployment-queue-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.deployment-queue-head h3 {
  margin: 0;
  font-size: 0.96rem;
}

.queue-count {
  min-width: 28px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--n-0);
  font-size: 0.72rem;
  text-align: center;
}

.deployment-queue-list {
  display: grid;
  gap: 10px;
}

.deployment-queue-empty {
  padding: 16px;
  border: 1px dashed var(--n-300);
  border-radius: var(--radius-md);
  background: var(--n-0);
}

.deployment-queue-empty strong,
.deployment-queue-empty p {
  display: block;
}

.deployment-queue-empty p {
  margin: 4px 0 0;
  color: var(--n-600);
  font-size: 0.78rem;
}

.deployment-queue-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-md);
  background: var(--n-0);
}

.deployment-queue-card-head strong {
  display: block;
}

.deployment-queue-card-head span {
  display: block;
  color: var(--n-600);
  font-size: 0.78rem;
}

.deployment-queue-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.deployment-queue-meta dt {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--n-500);
}

.deployment-queue-meta dd {
  margin: 2px 0 0;
  font-size: 0.84rem;
}

.deployment-queue-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.deployment-queue-actions label {
  display: grid;
  gap: 4px;
  min-width: 220px;
  font-size: 0.72rem;
}

.deployment-queue-actions select {
  min-height: 30px;
}

.deployment-summary-note {
  color: var(--n-700);
  font-size: 0.84rem;
  line-height: 1.35;
}

.deployment-unassigned {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: rgba(176, 42, 55, 0.12);
  color: var(--r-700);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

.inventory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.inventory-toolbar p {
  margin: 0;
}

.action-button {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  font-size: 0.72rem;
}

.action-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.table-action {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
}

.table-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.report-module {
  display: grid;
  gap: 10px;
}

.alert-module {
  display: grid;
  gap: 10px;
}

.automation-module {
  display: grid;
  gap: 10px;
}

.alert-toolbar,
.automation-toolbar,
.report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.report-toolbar p,
.alert-toolbar p,
.automation-toolbar p {
  margin: 0;
}

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

.alert-builder div {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.alert-builder p {
  margin: 0;
  color: var(--n-700);
  font-weight: 700;
}

.automation-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.automation-flow article {
  min-height: 96px;
  display: grid;
  align-content: space-between;
  padding: 16px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.automation-flow span {
  color: var(--n-700);
  font-size: 0.78rem;
  font-weight: 700;
}

.automation-flow strong {
  font-size: 1rem;
}

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

.report-scope-tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  overflow-x: auto;
}

.report-scope-tab {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--n-700);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.report-scope-tab.active {
  background: var(--n-900);
  color: var(--n-0);
}

.report-filter-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(180px, 0.8fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.report-filter-strip label,
.report-filter-strip > div {
  display: grid;
  gap: 6px;
}

.report-filter-strip span {
  color: var(--n-700);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.report-filter-strip select {
  min-width: 0;
}

.report-filter-strip strong {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  font-size: 0.84rem;
}

.report-action-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--n-900);
}

.report-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.report-preview--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-preview article {
  min-height: 84px;
  display: grid;
  align-content: space-between;
  padding: 14px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.report-preview span {
  color: var(--n-700);
  font-size: 0.78rem;
  font-weight: 700;
}

.report-preview strong {
  font-size: 1.1rem;
}

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

.report-finding-grid .finding-card {
  min-height: 100%;
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--b-500);
  background: var(--b-50);
}

.report-finding-grid .finding-card--improve {
  border-left-color: var(--a-500);
}

.report-finding-grid .finding-card h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--n-900);
}

.report-finding-grid .finding-card ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  list-style: none;
}

.report-finding-grid .finding-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  line-height: 1.45;
  color: var(--n-900);
}

.report-finding-grid .finding-item::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.48em;
  border-radius: 50%;
  background: var(--n-400);
}

.report-finding-grid .finding-item--high::before {
  background: var(--clr-risk);
}

.report-finding-grid .finding-item--medium::before {
  background: var(--clr-warn);
}

.report-finding-grid .finding-item--action::before {
  background: var(--clr-ok);
}

.report-character-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.report-character-grid article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.report-character-grid span {
  color: var(--n-700);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.report-character-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.attack-map strong {
  margin-top: 4px;
  color: var(--r-600);
}

.hidden {
  display: none;
}

@media (max-width: 900px) {
  .shell {
    display: block;
  }

  .login-panel {
    margin: 40px auto;
    padding: 24px;
  }

  .menu-bar {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .main-menu {
    width: 100%;
    flex-wrap: wrap;
  }

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

  .agent-tree {
    min-height: auto;
    height: auto;
    max-height: 42vh;
    border-right: 0;
    border-bottom: 1px solid var(--n-300);
  }

  .license-audit-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .license-audit-table td:last-child {
    white-space: normal;
  }

  .metric-strip,
  .viz-row,
  .module-grid,
  .hunt-workbench,
  .config-grid,
  .source-workbench,
  .deployment-os-grid,
  .deployment-grid,
  .hunt-summary,
  .attack-map,
  .report-preview,
  .report-filter-strip,
  .report-finding-grid,
  .report-character-grid,
  .alert-builder,
  .automation-flow,
  .capability-list {
    grid-template-columns: 1fr;
  }

  .module-grid--wide,
  .module-grid--two,
  .module-grid--three {
    grid-template-columns: 1fr;
  }

  .inline-form {
    grid-template-columns: 1fr;
  }

  .bastion-audit-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-workbench .source-list-panel,
  .source-workbench .stream-list {
    grid-row: auto;
  }

  .logviewer-scroll-header,
  .logviewer-scroll,
  .logviewer-pager {
    grid-column: auto;
    grid-row: auto;
  }

  .logviewer-scroll {
    height: 60vh;
  }

  .alert-toolbar,
  .automation-toolbar,
  .report-toolbar,
  .source-summary-head,
  .data-source-head,
  .deployment-queue-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .deployment-queue-meta {
    grid-template-columns: 1fr;
  }

  .deployment-os-card-head,
  .deployment-queue-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .deployment-code-row,
  .deployment-toolbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .deployment-queue-actions label {
    min-width: 100%;
  }
}

/* ============================================================
   BASTION
   ============================================================ */

.tunnel-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--n-500);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tunnel-btn:hover {
  background: var(--b-100);
  border-color: var(--b-500);
  color: var(--b-500);
}
.tunnel-btn.tunnel-active {
  background: var(--g-100);
  border-color: var(--g-500);
  color: var(--g-500);
}
.tunnel-btn.tunnel-pending {
  opacity: 0.5;
}
.tunnel-icon {
  pointer-events: none;
}

.bastion-investigation-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.bastion-investigation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--clr-muted);
  font-size: 12px;
  gap: 10px;
}

.bastion-investigation-head > div {
  display: grid;
  gap: 2px;
}

.bastion-audit-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bastion-investigation-head strong {
  color: var(--clr-text);
  font-size: 0.78rem;
}

.bastion-investigation-head span {
  color: var(--clr-muted);
  font-size: 0.66rem;
}

.bastion-audit-export {
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-audit-export:hover:not(:disabled) {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.bastion-audit-export--danger:hover:not(:disabled) {
  border-color: var(--clr-danger);
  color: var(--clr-danger);
  background: var(--clr-danger-bg);
}

.bastion-audit-export:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bastion-audit-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bastion-audit-stats article {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.bastion-audit-stats span {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bastion-audit-stats strong {
  color: var(--clr-text);
  font-size: 0.9rem;
}

.bastion-audit-summary {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.bastion-audit-list {
  display: grid;
  gap: 8px;
}

.bastion-report-archive-list {
  display: grid;
  gap: 10px;
}

.bastion-archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 4px;
}

.bastion-archive-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.bastion-archive-tab {
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.bastion-archive-tab:hover,
.bastion-archive-tab.active {
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

.bastion-archive-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bastion-archive-actions {
  justify-content: flex-start;
}

.bastion-archive-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 4px;
}

.bastion-archive-header-text h2 {
  margin: 4px 0 2px;
}

.bastion-archive-header-text p {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.78rem;
  max-width: 70ch;
}

.bastion-deploy-links-button {
  white-space: nowrap;
}

.bastion-deploy-links-backdrop {
  z-index: 72;
}

.bastion-deploy-links-modal > * {
  min-width: 0;
}

.bastion-deploy-links-modal {
  width: min(100%, 620px);
  max-height: min(88vh, 760px);
  display: grid;
  gap: 10px;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: 0 22px 70px rgba(16, 32, 40, 0.22);
}

.bastion-deploy-links-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--clr-border);
}

.bastion-deploy-links-head h2 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.bastion-deploy-go-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--b-200);
  border-radius: var(--radius-sm);
  background: var(--b-50);
}

.bastion-deploy-go-card .eyebrow {
  margin: 0 0 3px;
  color: var(--b-500);
}

.bastion-deploy-go-card code {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--n-900);
  font: 0.9rem/1.3 "SFMono-Regular", Consolas, monospace;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-deploy-go-card small {
  display: block;
  margin-top: 3px;
  color: var(--clr-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

/* ── Zielsystem-Auswahl: statt aller Plattformen untereinander nur die eine,
   die der Techniker gerade braucht. ── */
.bastion-deploy-tabs {
  display: flex;
  min-width: 0;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  overflow-x: auto;
}

.bastion-deploy-tab {
  flex: 1 1 auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.bastion-deploy-tab:hover {
  color: var(--clr-text);
}

.bastion-deploy-tab[aria-selected="true"] {
  border-color: var(--b-200);
  background: var(--n-0);
  color: var(--b-700);
  box-shadow: 0 1px 3px rgba(16, 32, 40, 0.1);
}

.bastion-deploy-panel {
  display: grid;
  gap: 8px;
}

.bastion-deploy-panel[hidden] {
  display: none !important;
}

.bastion-deploy-panel-note {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.bastion-deploy-card {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.bastion-deploy-card--sentinel {
  border-color: rgba(20, 184, 166, 0.34);
  border-left: 2px solid var(--b-700);
  background: linear-gradient(90deg, var(--b-50) 0%, var(--n-0) 48%);
}

.bastion-deploy-card--agent {
  border-left: 2px solid var(--n-400);
}

.bastion-deploy-card--disabled {
  background: var(--n-25);
}

.bastion-deploy-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.bastion-deploy-card-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.bastion-deploy-card-heading .eyebrow {
  margin: 0;
}

.bastion-deploy-card--sentinel .bastion-deploy-card-heading .eyebrow {
  color: var(--b-700);
}

.bastion-deploy-card-heading strong {
  color: var(--clr-text);
  font-size: 0.86rem;
}

.bastion-deploy-card-heading small {
  color: var(--clr-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.bastion-deploy-card-warning {
  margin: 0;
  color: var(--r-700);
  font-size: 0.7rem;
  line-height: 1.45;
}

.bastion-deploy-inline-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--b-700);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

.bastion-deploy-mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.bastion-deploy-mode > span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bastion-deploy-mode select {
  min-height: 28px;
  font-size: 0.76rem;
}

.bastion-deploy-mode > small {
  grid-column: 1 / -1;
  color: var(--clr-muted);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.4;
}

.bastion-deploy-public-key-card {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.bastion-deploy-public-key-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.bastion-deploy-public-key-head .eyebrow {
  margin: 0 0 3px;
}

.bastion-deploy-public-key-head strong {
  color: var(--clr-text);
  font-size: 0.84rem;
}

.bastion-deploy-public-key-card .deployment-os-note {
  font-size: 0.72rem;
}

.bastion-deploy-public-key-code {
  max-height: 96px;
  margin: 0;
  overflow: auto;
  font-size: 0.66rem;
}

.bastion-deploy-advanced {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.bastion-deploy-advanced > summary {
  padding: 7px 10px;
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  list-style: none;
}

.bastion-deploy-advanced > summary::-webkit-details-marker {
  display: none;
}

.bastion-deploy-advanced > summary::before {
  content: "▸ ";
}

.bastion-deploy-advanced[open] > summary::before {
  content: "▾ ";
}

.bastion-deploy-advanced[open] > summary {
  color: var(--clr-text);
}

.bastion-deploy-advanced .bastion-deploy-public-key-card {
  margin: 0 8px 8px;
  background: var(--n-0);
}

.bastion-deploy-link-logo {
  display: inline-grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid var(--b-100);
  border-radius: var(--radius-sm);
  background: var(--b-50);
  color: var(--b-500);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
}

.bastion-deploy-link-logo span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-deploy-link-logo-icon {
  width: 20px;
  height: 20px;
  color: currentColor;
}

.bastion-deploy-link-logo-icon rect,
.bastion-deploy-link-logo-icon path,
.bastion-deploy-link-logo-icon circle {
  fill: currentColor;
}

.bastion-deploy-link-logo-icon .bastion-deploy-link-logo-cutout {
  fill: var(--n-0);
}

.bastion-deploy-link-logo-icon .bastion-deploy-link-logo-line {
  fill: none;
}

.bastion-deploy-link-logo-icon text {
  fill: currentColor;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0;
}

.bastion-deploy-link-logo--linux {
  border-color: var(--n-300);
  background: var(--n-25);
  color: var(--n-800);
}

.bastion-deploy-link-logo--mac {
  border-color: var(--n-300);
  background: var(--n-25);
  color: var(--n-800);
}

/* Neutral statt rot/gelb: die Plattform ist kein Warnzustand. */
.bastion-deploy-link-logo--bsd,
.bastion-deploy-link-logo--pfsense {
  border-color: var(--n-300);
  background: var(--n-25);
  color: var(--n-800);
}

.bastion-deploy-link-logo--sentinel {
  border-color: rgba(20, 184, 166, 0.28);
  background: var(--b-50);
  color: var(--b-700);
}

.bastion-deploy-card--disabled .bastion-deploy-link-logo {
  opacity: 0.72;
}

.bastion-deploy-pin-row {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.bastion-deploy-pin-label {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bastion-deploy-pin-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  min-width: 92px;
  padding: 0 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  color: var(--b-700);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bastion-deploy-card--disabled .bastion-deploy-pin-value {
  color: var(--clr-muted);
}

.bastion-deploy-pin-status {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-deploy-card--disabled .bastion-deploy-pin-status {
  color: var(--r-700);
  font-weight: 700;
}

.bastion-deploy-copy-btn {
  min-height: 28px;
  gap: 5px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.bastion-deploy-command-details {
  border-top: 1px dashed var(--clr-border);
  padding-top: 6px;
}

.bastion-deploy-command-details > summary {
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  list-style: none;
}

.bastion-deploy-command-details > summary::-webkit-details-marker {
  display: none;
}

.bastion-deploy-command-details > summary::before {
  content: "▸ ";
}

.bastion-deploy-command-details[open] > summary::before {
  content: "▾ ";
}

.bastion-deploy-command-row {
  display: grid;
  grid-template-columns: minmax(64px, 92px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.bastion-deploy-command-row > span {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.bastion-deploy-command {
  display: block;
  min-width: 0;
  padding: 5px 7px;
  overflow: hidden;
  border: 1px solid var(--n-900);
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--n-300);
  font: 0.62rem/1.3 "SFMono-Regular", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-deploy-command-note {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.bastion-deploy-links-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--clr-border);
}

.bastion-deploy-links-footer-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.bastion-deploy-token-note {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.bastion-deploy-token-note[data-tone="ok"] {
  color: var(--g-600);
}

.bastion-deploy-token-note[data-tone="warn"] {
  color: var(--a-600);
}

.bastion-deploy-token-note[data-tone="error"] {
  color: var(--r-700);
}

@media (max-width: 720px) {
  .bastion-deploy-go-card,
  .bastion-deploy-card-head {
    grid-template-columns: 1fr;
  }
  .bastion-deploy-pin-row {
    display: flex;
    flex-wrap: wrap;
  }
  .bastion-deploy-pin-status {
    grid-column: 1 / -1;
    white-space: normal;
  }
  .bastion-deploy-tab {
    flex: 0 0 auto;
  }
  .bastion-deploy-command-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .bastion-deploy-link-logo {
    width: fit-content;
    max-width: 100%;
  }
  .bastion-deploy-links-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

.bastion-archive-tabs--window {
  margin-left: 6px;
}

.archive-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.archive-stat {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  border-left: 2px solid transparent;
}

.archive-stat span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.archive-stat strong {
  color: var(--clr-text);
  font-size: 1rem;
  font-weight: 700;
}

.archive-stat--today    { border-left-color: var(--b-500); }
.archive-stat--week     { border-left-color: var(--b-500); }
.archive-stat--agent    { border-left-color: var(--b-500); }
.archive-stat--sentinel { border-left-color: var(--r-700); }
.archive-stat--interim  { border-left-color: var(--a-500); }
.archive-stat--final    { border-left-color: var(--g-500); }

.archive-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 2px;
}

.archive-result-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-muted);
}

.archive-export-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.archive-bulkbar {
  position: sticky;
  top: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: var(--clr-info-bg);
  border: 1px solid rgba(45, 122, 94, 0.35);
  box-shadow: 0 4px 14px rgba(20, 32, 55, 0.08);
  font-size: 0.78rem;
  color: var(--clr-text);
}

.archive-bulkbar[hidden] { display: none; }

.archive-bulkbar-actions {
  display: inline-flex;
  gap: 6px;
}

.bastion-investigation-card.archive-card {
  display: grid;
  grid-template-columns: 28px 110px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  position: relative;
  border-left-width: 4px;
  min-height: 0;
}

.bastion-investigation-card.archive-card > div {
  display: block;
}

.archive-card .bastion-report-card-actions {
  position: static;
  transform: none;
}

.archive-card--interim { border-left-color: rgba(196, 122, 30, 0.55); }
.archive-card--final   { border-left-color: rgba(45, 122, 94, 0.55); }

.archive-card .bastion-archive-select {
  position: static;
}

.archive-card-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.archive-card-main {
  display: grid !important;
  gap: 4px !important;
  min-width: 0;
}

.archive-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-card-subtitle {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.archive-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.archive-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 720px) {
  .archive-card {
    grid-template-columns: 28px 1fr;
  }
  .archive-card-badges {
    flex-direction: row;
    grid-column: 1 / -1;
  }
  .archive-card .bastion-report-card-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.bastion-archive-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(4, auto);
  gap: 8px;
  align-items: center;
}

.bastion-archive-filters input,
.bastion-archive-filters select {
  min-height: 30px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  padding: 0 9px;
  font-size: 0.78rem;
}

.bastion-archive-card {
  padding-left: 42px;
  padding-right: 172px;
}

.bastion-archive-card-main {
  display: grid !important;
  justify-content: stretch !important;
  align-items: start !important;
  gap: 3px !important;
  padding-right: 6px;
}

.bastion-archive-select {
  position: absolute;
  left: 12px;
  top: 14px;
  display: inline-flex;
  align-items: center;
}

.bastion-archive-preview {
  margin: 7px 0 0;
  max-height: 170px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  padding: 8px 10px;
  font-size: 0.72rem;
  line-height: 1.45;
}

.bastion-archive-type {
  width: fit-content;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--n-200);
  color: var(--n-800);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bastion-archive-type--sentinel {
  background: var(--a-50);
  color: var(--r-700);
}

.bastion-archive-type--agent {
  background: var(--b-50);
  color: var(--b-500);
}

.bastion-phase-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.bastion-phase-badge--interim {
  background: rgba(196, 122, 30, 0.18);
  color: var(--a-500);
  border: 1px solid rgba(196, 122, 30, 0.45);
}

.bastion-phase-badge--final {
  background: rgba(45, 122, 94, 0.16);
  color: var(--g-500);
  border: 1px solid rgba(45, 122, 94, 0.4);
}

.bastion-investigation-card {
  border: 1px solid rgba(158, 183, 190, 0.45);
  border-radius: var(--radius-sm);
  padding: 10px 92px 10px 10px;
  background: rgba(255, 255, 255, 0.72);
  position: relative;
  min-height: 46px;
}

.bastion-investigation-card div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.bastion-investigation-card span,
.bastion-investigation-card small {
  color: var(--clr-muted);
  font-size: 12px;
}

.bastion-investigation-card .bastion-archive-type {
  color: var(--n-800);
  font-size: 0.6rem;
}

.bastion-investigation-card .bastion-archive-type--sentinel {
  color: var(--r-700);
}

.bastion-investigation-card .bastion-archive-type--agent {
  color: var(--b-500);
}

.bastion-report-card-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  align-items: center;
}

.bastion-report-card-btn {
  min-height: 24px;
  min-width: 28px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-report-card-btn:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.bastion-report-card-btn--delete:hover {
  border-color: var(--clr-danger);
  color: var(--clr-danger);
  background: var(--clr-danger-bg);
}

.bastion-archive-detail {
  padding: 0 12px 14px;
}

.bastion-archive-detail .bastion-archive-header {
  margin-left: -12px;
  margin-right: -12px;
  padding-left: 12px;
  padding-right: 12px;
}

.bastion-archive-toolbar {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
}

.bastion-archive-tabs,
.bastion-archive-tabs--window {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.archive-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.bastion-archive-filters {
  grid-template-columns: minmax(180px, 2fr) repeat(2, minmax(112px, 1fr)) minmax(120px, 1fr) minmax(120px, 1fr) auto;
}

.bastion-investigation-card.archive-card,
.bastion-archive-card {
  display: grid;
  grid-template-columns: 24px minmax(96px, max-content) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  padding: 10px 12px;
  min-width: 0;
}

.bastion-investigation-card.archive-card > div,
.bastion-investigation-card.archive-card .archive-card-badges,
.bastion-investigation-card.archive-card .archive-card-main,
.bastion-investigation-card.archive-card .archive-card-meta {
  min-width: 0;
}

.bastion-investigation-card.archive-card .archive-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}

.bastion-investigation-card.archive-card .archive-card-main {
  display: grid !important;
  gap: 3px !important;
  padding-right: 0;
}

.bastion-investigation-card.archive-card .archive-card-title,
.bastion-investigation-card.archive-card .archive-card-subtitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-investigation-card.archive-card .archive-card-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.bastion-investigation-card.archive-card .bastion-report-card-actions {
  position: static;
  transform: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: max-content;
}

@media (max-width: 860px) {
  .bastion-archive-detail {
    padding-left: 10px;
    padding-right: 10px;
  }
  .bastion-archive-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
  .bastion-archive-filters {
    grid-template-columns: 1fr 1fr;
  }
  .bastion-investigation-card.archive-card,
  .bastion-archive-card {
    grid-template-columns: 24px minmax(0, 1fr);
  }
  .bastion-investigation-card.archive-card .bastion-archive-select {
    grid-column: 1;
    grid-row: 1;
  }
  .bastion-investigation-card.archive-card .archive-card-badges {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .bastion-investigation-card.archive-card .archive-card-main,
  .bastion-investigation-card.archive-card .bastion-report-card-actions {
    grid-column: 1 / -1;
  }
  .bastion-investigation-card.archive-card .bastion-report-card-actions {
    margin-top: 4px;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .bastion-archive-filters {
    grid-template-columns: 1fr;
  }
}

/* Bastion page layout */
/* ── Bastion layout ──────────────────────────────────────── */
.bastion-layout {
  display: grid;
  grid-template-columns: clamp(228px, 18vw, 256px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns var(--t-base);
}

.bastion-layout--sessions-collapsed {
  grid-template-columns: 42px 1fr;
}

.bastion-sidebar {
  background: var(--clr-surface-alt);
  border-right: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.bastion-sidebar-head {
  padding: 12px 10px 10px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.bastion-sidebar-title {
  flex: 1;
  min-width: 0;
}

.bastion-sidebar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.bastion-sidebar-toggle {
  width: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.bastion-sidebar-toggle:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

.bastion-sidebar-toggle span {
  display: block;
  font-size: 1rem;
  line-height: 1;
}

.bastion-sidebar-head h2 {
  font-size: 0.9rem;
  margin: 3px 0 0;
}

.bastion-session-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bastion-workspace-section {
  border-bottom: 1px solid var(--clr-border);
  padding: 8px 6px 7px;
  background: var(--clr-surface-alt);
}

.bastion-workspace-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 4px 6px;
}

.bastion-workspace-head strong {
  display: block;
  font-size: 0.78rem;
  color: var(--clr-text);
}

.bastion-workspace-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bastion-workspace-card {
  width: 100%;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
}

.bastion-workspace-card:hover,
.bastion-workspace-card.selected {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.bastion-workspace-card span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bastion-workspace-card strong,
.bastion-workspace-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-workspace-card strong {
  font-size: 0.72rem;
}

.bastion-workspace-card small {
  font-size: 0.66rem;
  color: var(--clr-muted);
}

.bastion-workspace-card em {
  min-width: 32px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
  padding: 2px 6px;
}

.bastion-sentinel-section {
  border-top: 1px solid var(--clr-border);
}

.bastion-sentinel-section > .eyebrow {
  padding: 10px 14px 4px;
  margin: 0;
}

/* Wartende Freigaben sind handlungsrelevant — Warn-Akzent an der Kante;
   die Sektion erscheint nur, wenn Anfragen vorliegen (hidden-Toggle im JS). */
.bastion-sentinel-section--requests {
  border-left: 2px solid var(--clr-warn);
  background: var(--clr-warn-bg);
}
.bastion-sentinel-section--requests > .eyebrow { color: var(--clr-warn); }

.bastion-layout--sessions-collapsed .bastion-sidebar {
  overflow: hidden;
}

.bastion-layout--sessions-collapsed .bastion-sidebar-head {
  padding: 10px 8px;
  justify-content: center;
}

.bastion-layout--sessions-collapsed .bastion-sidebar-title,
.bastion-layout--sessions-collapsed .bastion-sidebar-actions,
.bastion-layout--sessions-collapsed .bastion-refresh-bar,
.bastion-layout--sessions-collapsed .bastion-workspace-section,
.bastion-layout--sessions-collapsed .bastion-session-list,
.bastion-layout--sessions-collapsed .bastion-sentinel-section {
  display: none;
}

.bastion-empty {
  color: var(--clr-xmuted);
  font-size: 0.78rem;
  padding: 8px 4px;
}

.bastion-error {
  color: var(--clr-risk);
  font-size: 0.78rem;
  padding: 8px 4px;
}

/* Session cards */
.bastion-session-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 32px 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--clr-surface);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  box-shadow: var(--shadow-xs);
}

.bastion-session-card:hover { background: var(--clr-info-bg); border-color: var(--clr-border-mid); box-shadow: var(--shadow-sm); }
.bastion-session-card.selected { background: var(--clr-info-bg); border-color: var(--clr-primary); box-shadow: 0 0 0 1px var(--clr-primary); }
.bastion-session-card--stale { opacity: 0.72; }
.bastion-session-card--pending { opacity: 0.86; }
.bastion-session-card--unreachable { opacity: 0.68; }
.bastion-session-card--stale .bastion-session-title strong { color: var(--clr-muted); }
.bastion-session-card--unreachable .bastion-session-title strong { color: var(--clr-muted); }
.bastion-sentinel-request-card {
  cursor: default;
  padding-right: 10px;
  flex-wrap: wrap;
}
.bastion-sentinel-request-card .bastion-request-actions {
  flex-basis: 100%;
  justify-content: flex-end;
}
.bastion-sentinel-expiry {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.bastion-sentinel-expiry [data-sentinel-countdown] {
  color: var(--clr-text);
  font-size: 0.72rem;
  font-weight: 700;
}
.bastion-sentinel-expiry time {
  color: var(--clr-muted);
  font-size: 0.65rem;
}
.bastion-sentinel-request-card--expiring .bastion-sentinel-expiry [data-sentinel-countdown] {
  color: var(--clr-risk);
}
.bastion-sentinel-request-card .bastion-request-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bastion-session-open {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.bastion-session-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.bastion-status-ok      { background: var(--clr-ok); }
.bastion-status-warn    { background: var(--clr-warn); }
.bastion-status-stale   { background: var(--clr-xmuted); }
.bastion-status-pending { background: var(--clr-warn); }
.bastion-status-unreachable { background: var(--clr-risk); }
.bastion-status-unknown { background: var(--clr-border-mid); }

.bastion-session-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.bastion-session-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bastion-session-title strong {
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bastion-session-info span {
  font-size: 0.72rem;
  color: var(--clr-muted);
}

.bastion-session-time {
  font-size: 0.66rem;
  color: var(--clr-xmuted);
  font-weight: 700;
}

.bastion-stale-badge {
  display: inline-flex;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--clr-border);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
}

.bastion-stale-badge--pending {
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.bastion-stale-badge--unreachable {
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.bastion-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bastion-badge.argus    { background: var(--clr-info-bg); color: var(--clr-primary); }
.bastion-badge.sentinel { background: var(--clr-info-bg); color: var(--clr-primary); }

.bastion-customer-tag {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--clr-muted);
  background: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  border-radius: 3px;
  padding: 1px 5px;
}

.bastion-workspace-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 150px;
  padding-right: 2px;
}

.bastion-workspace-tag-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-workspace-tag-remove {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 14px;
  min-height: 14px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--clr-xmuted);
  font-size: 0.6rem;
  line-height: 1;
}

.bastion-workspace-tag-remove:hover {
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.bastion-session-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.bastion-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  min-height: 18px;
  width: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--clr-xmuted);
  font-size: 0.72rem;
  border-radius: 3px;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
}

.bastion-workspace-add-btn {
  position: absolute;
  top: 28px;
  right: 6px;
  min-height: 18px;
  width: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--clr-xmuted);
  font-size: 0.72rem;
  border-radius: 3px;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
}

.bastion-request-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

.bastion-request-btn {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: 0.66rem;
  font-weight: 700;
  min-height: 26px;
  padding: 0 7px;
}

.bastion-request-btn.approve {
  background: var(--clr-ok-bg);
  border-color: color-mix(in srgb, var(--clr-ok) 30%, var(--clr-border));
  color: var(--clr-ok);
}

.bastion-request-btn.deny {
  background: var(--clr-risk-bg);
  border-color: color-mix(in srgb, var(--clr-risk) 28%, var(--clr-border));
  color: var(--clr-risk);
}

.bastion-session-card:hover .bastion-remove-btn { opacity: 1; }
.bastion-session-card:hover .bastion-workspace-add-btn { opacity: 1; }
.bastion-remove-btn:hover { background: var(--clr-risk-bg); color: var(--clr-risk); }
.bastion-workspace-add-btn:hover { background: var(--clr-info-bg); color: var(--clr-primary); }

/* Main panel */
.bastion-main-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.bastion-main { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
.bastion-tab-strip {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 4px 8px 0;
  background: var(--clr-surface-alt);
  border-bottom: 1px solid var(--clr-border);
  overflow-x: auto;
  flex-wrap: nowrap;
}
.bastion-tab-strip:empty { display: none; }
.bastion-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--clr-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--clr-surface);
  color: var(--clr-text-muted, var(--n-700));
  font-size: 0.84rem;
  cursor: pointer;
  white-space: nowrap;
  max-width: 220px;
}
.bastion-tab:hover { background: rgba(26, 107, 138, 0.06); }
.bastion-tab.active {
  background: var(--clr-bg, var(--n-0));
  color: var(--clr-text, var(--n-900));
  border-color: var(--clr-primary);
  box-shadow: 0 -2px 0 var(--clr-primary) inset;
}
.bastion-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.bastion-tab-provider {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--clr-primary);
  opacity: 0.85;
}
.bastion-tab.active .bastion-tab-provider { opacity: 1; }
.bastion-tab-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.96rem;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.55;
}
.bastion-tab-close:hover { opacity: 1; color: var(--clr-danger, var(--r-600)); }
.bastion-tab-attention {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-warn, var(--a-500));
  box-shadow: 0 0 0 2px rgba(210, 153, 34, 0.18);
}

.bastion-welcome { padding: 40px 32px; color: var(--clr-muted); }
.bastion-welcome h2 { margin: 8px 0 12px; color: var(--clr-text); }
/* Intro (Titel + Erklärung) steht vor Diagramm und Legende. */
.bastion-welcome-intro { margin-bottom: 24px; }
.bastion-welcome-intro p:last-child { max-width: 72ch; }

.bastion-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.bastion-detail-head {
  display: grid;
  grid-template-columns: minmax(150px, max-content) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  min-height: 44px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--clr-border);
  /* Kopf hebt sich als eigene Zone ab: dezenter Verlauf + Accent-Kante links. */
  background: linear-gradient(180deg, var(--clr-surface), color-mix(in srgb, var(--clr-surface-alt) 55%, var(--clr-surface)));
  border-left: 2px solid var(--clr-nav);
  flex-shrink: 0;
}

.bastion-detail-title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.bastion-detail-head .eyebrow {
  flex: 0 0 auto;
  margin: 0;
  letter-spacing: 0.08em;
}
.bastion-detail-head h2 {
  min-width: 0;
  font-size: 0.9rem;
  margin: 0;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-tunnel-warning {
  margin: 8px 16px 0;
  color: var(--clr-warn);
}

.bastion-detail-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px 10px;
  width: 100%;
  margin: 0;
  font-size: 0.68rem;
}

.bastion-detail-meta div {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.bastion-detail-meta dt {
  flex: 0 0 auto;
  color: var(--clr-muted);
  font-weight: 700;
}
.bastion-detail-meta dt::after { content: ":"; }
.bastion-detail-meta dd {
  min-width: 0;
  margin: 0;
  color: var(--clr-text);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Provider-/Steuerleiste — ein Streifen: Provider wählen · Verbindungsstatus ·
   Verbinden/Trennen. Ersetzt das frühere separate Status-Band darunter und
   gibt dem Terminal die gewonnene Höhe. */
.bastion-provider-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--clr-surface-alt);
  border-bottom: 1px solid var(--clr-border);
  flex-wrap: wrap;
}

/* Provider-Umschalter als segmentierte Einheit (ein gefasster Toggle). */
.bastion-provider-buttons {
  display: flex;
  gap: 2px;
  padding: 1px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
}

.bastion-provider-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--clr-muted);
  min-height: 26px;
}
.bastion-provider-btn span { opacity: 0.85; font-weight: 700; }

.bastion-provider-btn:hover   { background: var(--clr-info-bg); color: var(--clr-primary); }
.bastion-provider-btn.active  {
  background: var(--clr-nav);
  border-color: var(--clr-nav);
  color: var(--n-0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.bastion-provider-btn.active span { opacity: 1; }

.bastion-action-bar { display: flex; gap: 6px; }
.bastion-provider-bar .action-button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.72rem;
}

/* Verbindungsstatus in der Steuerleiste als Pill. Zustandsfarben kommen weiter
   aus .bastion-conn-<state> (idle/connected/error …) — hier nur die Pill-Form,
   damit die Farbcodierung nicht überschrieben wird. */
.bastion-conn-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--t-base);
}

.bastion-provider-bar .bastion-conn-status {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.bastion-conn-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bastion-conn-idle        { background: var(--clr-surface-alt); color: var(--clr-muted); }
.bastion-conn-idle .bastion-conn-dot        { background: var(--clr-xmuted); }
.bastion-conn-connecting  { background: var(--clr-warn-bg); color: var(--clr-warn); }
.bastion-conn-connecting .bastion-conn-dot  { background: var(--clr-warn); animation: pulse-dot 1s infinite; }
.bastion-conn-connected   { background: var(--clr-ok-bg); color: var(--clr-ok); }
.bastion-conn-connected .bastion-conn-dot   { background: var(--clr-ok); }
.bastion-conn-reconnecting{ background: var(--clr-warn-bg); color: var(--clr-warn); }
.bastion-conn-reconnecting .bastion-conn-dot{ background: var(--clr-warn); animation: pulse-dot 0.6s infinite; }
.bastion-conn-error       { background: var(--clr-risk-bg); color: var(--clr-risk); }
.bastion-conn-error .bastion-conn-dot       { background: var(--clr-risk); }

.bastion-conn-duration { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: 0.8; }


/* Terminal toolbar — als kompakte, gruppierte Kommandoleiste über dem Screen.
   Gruppen (Clipboard · Modus · Suche · Anzeige) trennen die Funktionen optisch,
   statt alle Buttons in eine flache Reihe zu legen. */
.bastion-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: linear-gradient(180deg, var(--n-900), var(--n-900));
  border-bottom: 1px solid var(--n-900);
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.bastion-tool-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.bastion-tool-group--right { margin-left: auto; }

.bastion-tool-search {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Stepper (Schriftgröße / Höhe): −/Wert/+ als eine gefasste Einheit. */
.bastion-tool-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--n-900);
  border: 1px solid var(--n-900);
  border-radius: var(--radius-sm);
  padding: 1px;
}
.bastion-tool-stepper .bastion-tool-btn { border-color: transparent; }
.bastion-tool-stepper .bastion-font-size-label { min-width: 34px; }

.bastion-tool-btn {
  min-height: 24px;
  padding: 0 9px;
  background: transparent;
  color: var(--n-400);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.bastion-tool-btn:hover { background: var(--n-900); color: var(--n-50); border-color: var(--n-800); }
.bastion-tool-btn:active { background: var(--n-900); }

.bastion-tool-btn.active {
  background: var(--clr-accent);
  border-color: color-mix(in srgb, var(--clr-accent) 70%, var(--n-0));
  color: var(--b-700);
}

/* Befund erzeugen = Primäraktion der Session → dezenter Accent-Tint. */
.bastion-tool-btn--accent {
  color: color-mix(in srgb, var(--clr-accent) 82%, var(--n-50));
  border-color: color-mix(in srgb, var(--clr-accent) 40%, transparent);
  background: color-mix(in srgb, var(--clr-accent) 12%, transparent);
}
.bastion-tool-btn--accent:hover {
  color: var(--b-700);
  background: var(--clr-accent);
  border-color: var(--clr-accent);
}

.bastion-toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--n-900);
  margin: 0 2px;
  flex-shrink: 0;
}

.bastion-font-size-label {
  font-size: 0.66rem;
  color: var(--n-400);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: center;
}

.bastion-terminal-search {
  width: 150px;
  min-height: 26px;
  border: 1px solid var(--n-900);
  border-radius: var(--radius-sm);
  padding: 0 9px;
  background: var(--n-900);
  color: var(--n-200);
  font: inherit;
  font-size: 0.72rem;
}

.bastion-terminal-search::placeholder {
  color: var(--n-500);
}

.bastion-terminal-search:focus {
  outline: none;
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-accent) 28%, transparent);
}

.bastion-terminal-event {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 12px 0;
  padding: 7px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
}

.bastion-terminal-event[hidden] {
  display: none;
}

.bastion-terminal-event strong {
  color: var(--clr-text);
}

.bastion-terminal-event--warn {
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.bastion-terminal-event--risk {
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.bastion-copilot-panel {
  display: grid;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--clr-border);
  /* Dezente KI-Identität: leichter Accent-Tint + Accent-Kante links,
     konsistent mit „Accent = KI/neu" im Rest der App. */
  border-left: 2px solid var(--clr-accent);
  background: color-mix(in srgb, var(--clr-accent) 5%, var(--clr-surface));
  flex-shrink: 0;
}

.bastion-copilot-panel--below-terminal {
  border-top: 1px solid var(--clr-border);
}

.bastion-copilot-title {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.bastion-copilot-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-accent) 14%, transparent);
  color: var(--clr-accent);
  font-size: 0.9rem;
  line-height: 1;
}

.bastion-pivot-panel {
  display: grid;
  gap: 11px;
  margin: 10px 12px 0;
  padding: 13px 14px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--b-500);
  background: var(--n-0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.bastion-workspace-detail {
  overflow-y: auto;
}

.bastion-workspace-shell-hint {
  padding: 8px 16px;
  margin: 0;
  border-bottom: 1px solid var(--clr-border);
  background: var(--b-50);
}

.bastion-workspace-terminal-container {
  min-height: 320px;
  border-bottom: 1px solid var(--clr-border);
}

.bastion-transfer-panel {
  display: grid;
  gap: 11px;
  margin: 10px 12px 0;
  padding: 13px 14px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--g-500);
  background: var(--n-0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.bastion-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--n-50);
}

.bastion-section-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.bastion-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--b-100);
  font-size: 0.9rem;
  font-weight: 700;
}

.bastion-section-title > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.bastion-section-title h3 {
  margin: 0;
  color: var(--clr-text);
  font-size: 0.9rem;
}

.bastion-section-title span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.bastion-section-status {
  flex: 0 0 auto;
}

.bastion-transfer-path {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 8px 10px;
  border: 1px solid var(--n-50);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.bastion-transfer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.bastion-transfer-path code {
  padding: 4px 8px;
  border: 1px solid var(--n-900);
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--b-100);
  font-family: "JetBrains Mono", "Cascadia Code", monospace;
  font-size: 0.72rem;
}

.bastion-transfer-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.bastion-transfer-list .bastion-empty,
.bastion-active-pivots .bastion-empty {
  margin: 0;
  padding: 11px 12px;
  border: 1px dashed var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.bastion-transfer-file {
  display: grid;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  color: var(--clr-text);
  text-decoration: none;
  box-shadow: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.bastion-transfer-file:hover {
  border-color: var(--n-400);
  background: var(--n-25);
}

.bastion-transfer-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--b-100);
  font-size: 0.9rem;
}

.bastion-transfer-file-main {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.bastion-transfer-file-main strong {
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
}

.bastion-transfer-file-main small {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-transfer-file-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 118px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.bastion-transfer-file-meta small {
  font: inherit;
}

.bastion-transfer-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  color: var(--n-800);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.bastion-transfer-type--protocol {
  border-color: var(--b-200);
  background: var(--b-50);
  color: var(--b-500);
}

.bastion-transfer-type--report {
  border-color: var(--g-200);
  background: var(--g-50);
  color: var(--g-600);
}

.bastion-transfer-type--transcript,
.bastion-transfer-type--log {
  border-color: var(--a-200);
  background: var(--a-50);
  color: var(--a-500);
}

.bastion-transfer-type--json,
.bastion-transfer-type--code,
.bastion-transfer-type--script,
.bastion-transfer-type--config {
  border-color: var(--b-100);
  background: var(--b-50);
  color: var(--b-500);
}

.bastion-transfer-type--archive,
.bastion-transfer-type--pdf {
  border-color: var(--r-200);
  background: var(--r-50);
  color: var(--r-600);
}

.bastion-transfer-type--table,
.bastion-transfer-type--markdown,
.bastion-transfer-type--text {
  border-color: var(--b-200);
  background: var(--b-50);
  color: var(--b-700);
}

.bastion-transfer-file-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bastion-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  color: var(--n-900);
  font-size: 0.66rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.bastion-mini-btn:hover {
  border-color: var(--n-400);
  background: var(--n-25);
}

.bastion-mini-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bastion-icon-btn {
  width: 30px;
  min-width: 30px;
  padding: 0;
  font-size: 0.78rem;
}

.bastion-transfer-modal {
  width: min(100%, 980px);
  max-height: min(86vh, 760px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  box-shadow: 0 18px 60px rgba(16, 32, 40, 0.18);
}

.bastion-transfer-modal-head,
.bastion-transfer-modal-actions,
.bastion-transfer-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.bastion-transfer-modal-head h2 {
  margin: 0;
  color: var(--clr-text);
  font-size: 1.1rem;
}

.bastion-transfer-modal-actions,
.bastion-transfer-preview-head {
  align-items: center;
}

.bastion-transfer-modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 12px;
}

.bastion-transfer-preview-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.bastion-transfer-preview-item {
  width: 100%;
  min-height: 48px;
  display: grid;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  color: var(--clr-text);
  text-align: left;
}

.bastion-transfer-preview-item.active {
  border-color: var(--b-500);
  background: var(--b-50);
}

.bastion-transfer-preview-item-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.bastion-transfer-preview-item .bastion-transfer-type {
  min-width: 62px;
  height: 20px;
  font-size: 0.6rem;
}

.bastion-transfer-preview-item-title strong,
.bastion-transfer-preview-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-transfer-preview-item-title strong {
  font-size: 0.78rem;
}

.bastion-transfer-preview-item small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-transfer-preview-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.bastion-transfer-preview-head {
  min-height: 34px;
  padding: 0 2px;
}

.bastion-transfer-preview-title {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.bastion-transfer-preview-title strong,
.bastion-transfer-preview-title small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-transfer-preview-title strong {
  font-size: 0.84rem;
}

.bastion-transfer-preview-title small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-transfer-preview-pane pre {
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--n-900);
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--b-100);
  font-family: "JetBrains Mono", "Cascadia Code", monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 760px) {
  .bastion-transfer-file {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bastion-transfer-type {
    justify-content: flex-start;
    min-width: 0;
  }

  .bastion-transfer-file-main,
  .bastion-transfer-file-meta {
    grid-column: 1 / -1;
  }

  .bastion-transfer-file-meta {
    justify-content: flex-start;
    min-width: 0;
  }

  .bastion-transfer-file-actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .bastion-transfer-modal {
    max-height: 92vh;
  }

  .bastion-transfer-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 30vh) minmax(220px, 1fr);
  }
}

.bastion-workspace-panel {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--clr-border);
  background: var(--n-25);
}

.bastion-workspace-leg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.bastion-workspace-leg-card {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  padding: 12px;
  display: grid;
  gap: 10px;
  box-shadow: var(--shadow-xs);
}

.bastion-workspace-leg-card--offline {
  opacity: 0.72;
}

.bastion-workspace-leg-card > div:first-child {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 6px 8px;
  align-items: start;
}

.bastion-workspace-leg-card > div:first-child strong,
.bastion-workspace-leg-card > div:first-child small {
  grid-column: 2;
}

.bastion-workspace-leg-card strong {
  font-size: 0.84rem;
  color: var(--clr-text);
}

.bastion-workspace-leg-card small {
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.bastion-workspace-leg-card code {
  display: block;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--b-100);
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bastion-workspace-leg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bastion-pivot-head,
.bastion-pivot-form,
.bastion-pivot-command,
.bastion-pivot-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.bastion-pivot-head {
  align-items: flex-start;
  justify-content: space-between;
}

.bastion-pivot-head h3 {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--clr-text);
}

/* One mask instead of a six-column toolbar: protocol first, then target,
   then the two fields that depend on it. Protocol and login are switches —
   a choice between two named options costs one touch, not open-read-hit. */
.bastion-pivot-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.bastion-pivot-target,
.bastion-pivot-field--wide,
.bastion-pivot-form #bastion-pivot-password-wrap,
.bastion-pivot-start-btn {
  grid-column: 1 / -1;
}

.bastion-pivot-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bastion-pivot-field-label {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-pivot-switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.bastion-pivot-switch > button {
  flex: 1 1 0;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--clr-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.bastion-pivot-switch > button:hover:not(:disabled) {
  background: var(--n-50);
  color: var(--clr-text);
}

.bastion-pivot-switch > button.is-active {
  border-color: var(--clr-primary);
  background: var(--b-50);
  color: var(--clr-primary);
}

.bastion-pivot-switch > button:disabled {
  opacity: 0.45;
  cursor: default;
}

.bastion-pivot-port-toggle {
  display: inline-flex;
  align-items: baseline;
  justify-self: start;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px dashed var(--n-300);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.bastion-pivot-port-toggle:hover:not(:disabled) {
  border-style: solid;
  color: var(--clr-text);
}

.bastion-pivot-port-toggle > strong {
  color: var(--clr-text);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.bastion-pivot-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-pivot-form input,
.bastion-pivot-form select {
  min-height: 34px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  padding: 0 9px;
  background: var(--n-0);
  color: var(--clr-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.bastion-pivot-form select {
  min-width: 0;
}

.bastion-pivot-form input[type="number"] {
  width: 100%;
}

.bastion-pivot-start-btn {
  min-height: 34px;
  padding: 0 16px;
  white-space: nowrap;
}

.bastion-pivot-help {
  padding: 8px 10px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .bastion-pivot-start-btn {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .bastion-section-head {
    flex-direction: column;
  }
  .bastion-pivot-form {
    grid-template-columns: 1fr;
  }
}

.bastion-pivot-help--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 32%, var(--clr-border));
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.bastion-pivot-help--error {
  border-color: color-mix(in srgb, var(--clr-risk) 32%, var(--clr-border));
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.bastion-pivot-output {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  padding: 9px 10px;
}

.bastion-active-pivots {
  display: grid;
  gap: 7px;
}

.bastion-active-pivot-list {
  display: grid;
  gap: 7px;
}

.bastion-active-pivot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.bastion-active-pivot strong {
  display: block;
  color: var(--clr-text);
  font-size: 0.78rem;
}

.bastion-active-pivot small {
  display: block;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-pivot-command {
  justify-content: space-between;
  align-items: center;
}

.bastion-pivot-command > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bastion-pivot-command strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  color: var(--clr-text);
  font-size: 0.78rem;
}

.bastion-pivot-auth-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--n-25);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
}

.bastion-pivot-command code {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.bastion-pivot-note {
  display: block;
  margin-top: 4px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-pivot-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.bastion-copilot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bastion-copilot-head h3 {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--clr-text);
}

.bastion-copilot-health {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.bastion-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.bastion-health-pill strong {
  color: var(--clr-text);
}

.bastion-health-pill--ok {
  border-color: var(--clr-ok);
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.bastion-health-pill--warn {
  border-color: var(--clr-warn);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.bastion-health-pill--risk {
  border-color: var(--clr-risk);
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.bastion-copilot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.bastion-prompt-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  transition: border-color 120ms, box-shadow 120ms;
}
.bastion-prompt-card:hover {
  border-color: color-mix(in srgb, var(--clr-accent) 45%, transparent);
  box-shadow: 0 1px 4px rgba(12, 26, 36, 0.07);
}

.bastion-prompt-card strong {
  display: block;
  margin-bottom: 2px;
  color: var(--clr-text);
  font-size: 0.78rem;
}

.bastion-prompt-card span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.bastion-prompt-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.bastion-prompt-btn {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
}

.bastion-prompt-btn:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

/* KI-Primäraktion in Accent (Teal) statt dunklem Navy — konsistent mit der
   App-Button-Sprache und der KI-Accent-Identität. */
.bastion-prompt-btn--primary {
  border-color: var(--clr-accent);
  background: var(--clr-accent);
  color: var(--n-0);
}

.bastion-prompt-btn--primary:hover {
  background: color-mix(in srgb, var(--clr-accent) 88%, var(--n-900));
  border-color: color-mix(in srgb, var(--clr-accent) 88%, var(--n-900));
  color: var(--n-0);
}

.bastion-prompt-btn--danger:hover {
  border-color: var(--clr-danger);
  background: var(--clr-danger-bg);
  color: var(--clr-danger);
}

.bastion-copilot-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .bastion-copilot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .bastion-copilot-head,
  .bastion-copilot-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .bastion-copilot-health {
    justify-content: flex-start;
  }
  .bastion-copilot-grid {
    grid-template-columns: 1fr;
  }
}

/* Terminal container */
/* Toolbar (Header) und Terminal-Body lesen sich als EIN Fenster: gemeinsamer
   Rahmen + Radius, overflow-hidden klippt beide zu einer Einheit. */
.bastion-terminal-frame {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 6px 8px 0;
  background: var(--n-900);
  border: 1px solid var(--n-900);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(2, 6, 12, 0.34), 0 2px 6px rgba(0, 0, 0, 0.28);
}

.bastion-live-access-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 3px 10px 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--clr-muted);
  font-size: 0.66rem;
  line-height: 1.3;
}

.bastion-live-access-hint > span {
  color: var(--clr-accent);
  font-size: 0.78rem;
  line-height: 1;
}

.bastion-terminal-chrome {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) auto minmax(160px, 1fr);
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-bottom: 1px solid var(--n-900);
  background: linear-gradient(180deg, var(--n-900) 0%, var(--n-900) 100%);
  color: var(--n-400);
}

.bastion-terminal-lights {
  display: flex;
  gap: 6px;
}

.bastion-terminal-lights i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--r-500);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.26);
}

.bastion-terminal-lights i:nth-child(2) { background: var(--a-500); }
.bastion-terminal-lights i:nth-child(3) { background: var(--g-500); }

.bastion-terminal-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

.bastion-terminal-title strong {
  overflow: hidden;
  max-width: 42ch;
  color: var(--n-50);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-terminal-title-product {
  color: var(--b-500);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bastion-terminal-title-sep { color: var(--n-600); }

.bastion-terminal-capabilities {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.bastion-terminal-capability {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--n-800);
  border-radius: var(--radius-sm);
  background: rgba(7, 11, 18, 0.4);
  color: var(--n-400);
  font-size: 0.6rem;
  font-weight: 700;
}

.bastion-terminal-capability--live {
  border-color: rgba(69, 189, 114, 0.3);
  color: var(--g-500);
}

.bastion-terminal-capability--live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-500);
  box-shadow: 0 0 0 3px rgba(69, 189, 114, 0.12);
}

@media (max-width: 760px) {
  .bastion-terminal-chrome {
    grid-template-columns: auto 1fr;
  }
  .bastion-terminal-title {
    justify-content: flex-end;
  }
  .bastion-terminal-capabilities {
    display: none;
  }
}

.bastion-terminal-container {
  flex: 0 0 auto;
  /* Legacy nutzt einen angenehmen Teil der Fensterhöhe; Ausgabe scrollt intern. */
  height: clamp(260px, 62dvh, 680px);
  min-height: 260px;
  max-height: min(72dvh, 820px);
  overflow: hidden;
  /* nahtlos zum xterm-Screen (var(--n-900)) — kein sichtbarer Rand ums Terminal */
  background: var(--n-900);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  resize: vertical;
}

@media (max-width: 900px) {
  .bastion-layout:not(.bastion-layout--sessions-collapsed):not(.bastion-layout--archive) {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .bastion-detail-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bastion-detail-meta {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bastion-provider-bar .bastion-conn-status {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .bastion-detail-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#bastion-terminal {
  flex: 1;
  height: 100%;
  min-height: 0;
}

.bastion-terminal-frame.bastion-terminal-fullscreen,
.bastion-terminal-container.bastion-terminal-fullscreen {
  position: fixed !important;
  inset: 0;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none;
  z-index: 9999;
  padding: 12px;
  border-radius: 0;
  resize: none;
}

.bastion-terminal-frame.bastion-terminal-fullscreen {
  display: flex;
  flex-direction: column;
  background: var(--n-900);
}

.bastion-terminal-frame.bastion-terminal-fullscreen .bastion-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 1px 0 var(--n-900);
}

.bastion-terminal-frame.bastion-terminal-fullscreen .bastion-terminal-container {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  resize: none;
}

body.bastion-terminal-lock {
  overflow: hidden;
}
.xterm {
  height: 100%;
  font-feature-settings: "liga" 0, "calt" 0;
}
.xterm-viewport {
  border-radius: var(--radius-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--n-800) transparent;
}
.xterm-viewport::-webkit-scrollbar {
  width: 10px;
}
.xterm-viewport::-webkit-scrollbar-track {
  background: transparent;
}
.xterm-viewport::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background-clip: padding-box;
  background-color: var(--n-800);
}
.xterm-viewport::-webkit-scrollbar-thumb:hover {
  background-color: var(--n-800);
}
.xterm-screen {
  text-rendering: geometricPrecision;
}
.bastion-terminal-ran-mask-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
}
.bastion-terminal-ran-mask-layer[hidden] {
  display: none;
}
.bastion-terminal-ran-mask-row {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  background: var(--n-900);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 280px;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--n-0);
  box-shadow: 0 8px 28px rgba(16, 32, 40, 0.16);
  pointer-events: all;
  animation: toast-in 0.22s ease;
}

.toast.toast-out {
  animation: toast-out 0.22s ease forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

.toast-success {
  border-color: var(--g-500);
  background: var(--g-50);
}

.toast-error {
  border-color: var(--r-500);
  background: var(--r-50);
}

.toast-info {
  border-color: var(--b-500);
  background: var(--b-50);
}

.toast-warn {
  border-color: var(--a-500);
  background: var(--a-50);
}

.toast-icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1.4;
}

.toast-success .toast-icon { color: var(--g-500); }
.toast-error   .toast-icon { color: var(--r-500); }
.toast-info    .toast-icon { color: var(--b-500); }
.toast-warn    .toast-icon { color: var(--a-500); }

.toast-body {
  flex: 1;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--n-900);
  word-break: break-word;
}

.toast-close {
  flex-shrink: 0;
  min-height: 20px;
  padding: 0 5px;
  background: transparent;
  border: 0;
  color: var(--n-400);
  font-size: 0.9rem;
  cursor: pointer;
}

.toast-close:hover {
  color: var(--n-900);
}


/* Customer navigation controls and bounded asset pages. */
.agent-tree [hidden] { display: none !important; }
.agent-tree.tree-comfortable { --tree-row-device: 38px; --tree-row-customer: 42px; --tree-row-group: 34px; }
.tree-customer-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; }
.tree-toggle, .tree-pin { min-height: 28px; width: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); color: var(--n-600); background: transparent; }
.tree-pin[aria-pressed="true"] { color: var(--b-700); }
.tree-toggle:hover, .tree-pin:hover { background: var(--n-100); }
.tree-section-title { margin: 10px 4px 4px; font-size: 0.67rem; font-weight: 700; color: var(--n-500); }
.tree-inventory-link { text-align: left; border: 0; background: transparent; color: var(--b-700); font-size: 0.7rem; padding: 7px 2px; }
.tree-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding-top: 5px; }
.tree-actions > button, .tree-options summary, .tree-page { min-height: 28px; padding: 4px 6px; font-size: 0.68rem; border: 1px solid var(--n-200); border-radius: var(--radius-sm); background: var(--clr-surface); color: var(--n-800); cursor: pointer; }
.tree-options { margin-left: auto; position: relative; }
.tree-options > div { position: absolute; right: 0; top: 100%; z-index: 20; width: 240px; padding: 12px; background: var(--clr-surface); border: 1px solid var(--n-300); border-radius: var(--radius-sm); box-shadow: 0 4px 16px #0002; }
.tree-options label { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 0.75rem; }
.tree-options select { min-width: 0; width: 135px; }
#tree-results { margin: 6px 3px; color: var(--n-600); font-size: 0.69rem; }
#tree-filter-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#tree-filter-chips select { min-width: 0; width: 100%; min-height: 28px; font-size: 0.7rem; border: 1px solid var(--n-300); border-radius: var(--radius-sm); background: var(--clr-surface); color: var(--n-800); }
#tree-filter-chips select:last-child { grid-column: 1 / -1; }
.tree-pager { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 5px 0; font-size: 0.68rem; }
.tree-empty { padding: 14px 6px; font-size: 0.8rem; color: var(--n-600); }
.contains-selection > .tree-customer-row { background: var(--b-50); border-radius: var(--radius-sm); }
.agent-tree button:focus-visible, .agent-tree summary:focus-visible, .agent-tree select:focus-visible { outline: 2px solid var(--b-500); outline-offset: -2px; }

/* Compact customer navigation: tools stay secondary to customers and assets. */
.agent-tree { --tree-row-customer: 28px; --tree-row-group: 24px; --tree-indent: 10px; padding: 6px; }
.agent-tree .sidebar-head { margin-bottom: 4px; padding-bottom: 4px; }
.tree-search-toolbar { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.tree-search-toolbar .tree-search-wrap { flex: 1 1 auto; min-width: 0; }
.tree-filter-menu { position: relative; flex: 0 0 auto; }
.tree-filter-menu summary { display: flex; align-items: center; min-height: 28px; padding: 0 7px; border: 1px solid var(--n-300); border-radius: var(--radius-sm); background: var(--clr-surface); cursor: pointer; font-size: 0.72rem; }
.tree-filter-menu summary::marker { content: ''; }
.tree-filter-menu[open] summary, .tree-filter-menu:has(#tree-filter-count:not(:empty)) summary { border-color: var(--b-500); color: var(--b-700); background: var(--b-50); }
.tree-filter-menu #tree-filter-chips { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: 244px; padding: 8px; grid-template-columns: 1fr; border: 1px solid var(--n-300); border-radius: var(--radius-sm); background: var(--clr-surface); box-shadow: 0 4px 16px #0002; }
.tree-filter-menu #tree-filter-chips select { min-height: 32px; font-size: 0.75rem; }
.agent-tree .tree-actions { gap: 4px; padding: 3px 0; }
.agent-tree .tree-actions > button, .agent-tree .tree-options summary { min-height: 24px; padding: 2px 5px; border-color: transparent; background: transparent; font-size: 0.68rem; }
.agent-tree .tree-actions > button:hover, .agent-tree .tree-options summary:hover { background: var(--n-100); }
.agent-tree #tree-results { flex-basis: 100%; margin: 1px 2px; font-size: 0.68rem; line-height: 1.3; }
.agent-tree .tree-customer-row { grid-template-columns: 24px minmax(0, 1fr) 24px; }
.agent-tree .tree-toggle, .agent-tree .tree-pin { width: 24px; min-height: 24px; }
.agent-tree .tree-pin[aria-pressed="false"] { opacity: 0; }
.agent-tree .tree-customer-row:hover .tree-pin, .agent-tree .tree-customer-row:focus-within .tree-pin { opacity: 1; }
.agent-tree:not(.tree-comfortable) .customer-button .node-subtitle { display: none; }
.agent-tree .customer-button { padding: 1px 2px; }
.agent-tree .tree-section-title { margin: 5px 3px 2px; }
.agent-tree .device-list { margin-top: 0; margin-bottom: 2px; padding-left: 3px; }
.agent-tree .device-list:empty { display: none; }
.agent-tree .device-group { gap: 0; }
.agent-tree .device-group-head { min-height: var(--tree-row-group); line-height: 1.2; }
.agent-tree .device-group-body { margin-left: 3px; padding-left: 3px; }
.agent-tree .tree-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px; margin-top: 3px; padding: 4px 0 0; }
.agent-tree .tree-customer-create { min-height: 28px; padding: 2px 3px; font-size: 0.67rem; border-color: var(--n-300); background: transparent; }
.agent-tree .tree-core-version { grid-column: 1 / -1; }
@media (hover: none) { .agent-tree .tree-pin[aria-pressed="false"] { opacity: 1; } }

/* The runner state in one sentence, before the seven fields that detail it. */
.runner-lead {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
}
.runner-lead.is-ok { color: var(--clr-ok); }
.runner-lead.is-warn { color: var(--clr-warn); }
.runner-lead.is-risk { color: var(--clr-risk); }

/* The count carries the state; the panel head no longer repeats it. */
.settings-toolbar-count--ok { color: var(--clr-ok); }
.settings-toolbar-count--warn { color: var(--clr-warn); }

/* Create customer: name on its own line, the two optional fields beside each
   other, and the generated ID visible before it becomes permanent. */
.customer-create-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.customer-create-head h2 { margin: 0; font-size: 1.05rem; }
.customer-create-close {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  cursor: pointer;
}
.customer-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}
.customer-create-id {
  display: grid;
  gap: 5px;
  font-size: 13px;
  min-width: 0;
}
/* `hidden` loses against the modal's `display: grid` on labels. */
.customer-create-modal label[hidden] { display: none; }
.customer-create-id-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
/* The cancel path was a filled dark button and outweighed the action. */
.customer-create-modal .modal-actions .secondary,
.customer-edit-modal .modal-actions .secondary {
  border: 1px solid var(--clr-border);
  background: transparent;
  color: var(--clr-muted);
  font-weight: 500;
}
.customer-create-modal .modal-actions .secondary:hover { color: var(--clr-text); }
.customer-create-id > output {
  min-height: 40px;
  padding: 9px 10px;
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-muted);
  font-family: "JetBrains Mono", "Cascadia Code", monospace;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-create-id-head > button {
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--clr-primary);
  font-size: 11px;
  cursor: pointer;
}
.customer-create-id-head > button:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .customer-create-row { grid-template-columns: 1fr; }
}
/* ============================================================
   BUTTON LOADING STATE
   ============================================================ */

button.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

button.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--n-0);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* For secondary / transparent buttons with dark spinner */
button.loading.secondary::after,
button.loading.action-button.secondary::after,
button.loading.table-action::after {
  border-color: rgba(16, 32, 40, 0.2);
  border-top-color: var(--n-900);
}

/* ============================================================
   DEVICE STATUS BADGES
   ============================================================ */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.status-badge-online  { background: var(--g-100); color: var(--g-500); }
/* Status-Badges folgen den Status-Tokens, damit sie eine Paletten-Änderung
   mitmachen (vorher fest auf die alte Petrol-/Amber-Palette verdrahtet). */
.status-badge-warning { background: var(--clr-warn-bg); color: var(--clr-warn); }
.status-badge-offline { background: var(--clr-risk-bg); color: var(--clr-risk); }
.status-badge-planned { background: var(--clr-surface-alt); color: var(--clr-muted); }
.status-badge-ok { background: var(--clr-ok-bg); color: var(--clr-ok); }
.status-badge-info { background: var(--clr-info-bg); color: var(--clr-info); }
.status-badge-critical { background: var(--clr-risk-bg); color: var(--clr-risk); }
.status-badge-unknown { background: var(--clr-subtle); color: var(--clr-muted); }

.last-seen-label {
  font-size: 0.72rem;
  color: var(--n-700);
  font-weight: 700;
}

/* ============================================================
   BACK NAVIGATION & BREADCRUMB
   ============================================================ */

.breadcrumb {
  font-size: 0.72rem;
  color: var(--n-500);
  font-weight: 700;
  margin: 2px 0 0;
}

.breadcrumb span {
  color: var(--n-400);
}

/* ============================================================
   EMPTY STATES
   ============================================================ */

.empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
}

.empty-state-icon {
  font-size: 1.8rem;
  opacity: 0.35;
  line-height: 1;
}

.empty-state h3 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--n-800);
}

.empty-state p {
  margin: 0;
  color: var(--n-500);
  font-size: 0.78rem;
  font-weight: 700;
  max-width: 360px;
}

/* ============================================================
   TABLE SORTING
   ============================================================ */

th.sort-header {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th.sort-header:hover {
  background: var(--clr-subtle);
  color: var(--n-900);
}

th.sort-header::after {
  content: " ↕";
  opacity: 0.35;
  font-size: 0.7em;
}

th.sort-header.sort-asc::after {
  content: " ↑";
  opacity: 1;
  color: var(--b-700);
}

th.sort-header.sort-desc::after {
  content: " ↓";
  opacity: 1;
  color: var(--b-700);
}

th.sort-header.sort-asc,
th.sort-header.sort-desc {
  color: var(--b-700);
}

/* ============================================================
   COMING SOON BADGE
   ============================================================ */

.soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--a-100);
  color: var(--a-500);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 4px;
}

/* ============================================================
   ACCESSIBILITY — FOCUS STYLES
   ============================================================ */

*:focus-visible {
  outline: 2px solid var(--b-700);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--b-700);
  outline-offset: 2px;
}

/* ============================================================
   GLOBAL SEARCH
   ============================================================ */

.global-search-wrap {
  position: relative;
  flex: 0 1 212px;
}

.global-search-input {
  width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.075);
  color: var(--n-50);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.global-search-input::placeholder {
  color: var(--n-400);
}

.global-search-input:focus {
  outline: 2px solid var(--b-700);
  outline-offset: 2px;
  border-color: rgba(159,209,200,0.62);
  background: rgba(255,255,255,0.12);
}

.global-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 280px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 200;
  background: var(--n-0);
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 34px rgba(16, 32, 40, 0.18);
  padding: 4px;
}

.search-group-label {
  padding: 6px 8px 2px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--n-500);
}

.search-result-item {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--n-900);
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.search-result-item:hover,
.search-result-item:focus,
.search-result-item.is-active {
  background: var(--n-200);
  outline: none;
}
.search-result-item.is-active {
  box-shadow: inset 3px 0 0 var(--clr-accent, var(--b-500));
}

.search-result-item small {
  display: block;
  color: var(--n-500);
  font-size: 0.66rem;
  font-weight: 700;
}

.search-no-results {
  padding: 12px 8px;
  color: var(--n-500);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

/* ============================================================
   BASTION REFRESH INDICATOR
   ============================================================ */

.bastion-refresh-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  background: var(--n-25);
  border-bottom: 1px solid var(--n-200);
  font-size: 0.72rem;
  color: var(--n-500);
  font-weight: 700;
}

.bastion-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-500);
  flex-shrink: 0;
}

.bastion-pulse-dot.paused {
  animation: none;
  background: var(--n-400);
}


.bastion-refresh-time {
  flex: 1 1 auto;
  min-width: 0;
}

.bastion-manual-refresh {
  min-height: 24px;
  padding: 0 8px;
  font-size: 0.66rem;
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  color: var(--n-800);
  cursor: pointer;
}

.bastion-manual-refresh:hover {
  background: var(--b-50);
  border-color: var(--b-500);
  color: var(--b-500);
}

.bastion-maintenance-button {
  border-color: var(--clr-nav, var(--n-900));
  background: var(--clr-nav, var(--n-900));
  color: var(--n-0);
  font-weight: 700;
  flex: 0 0 auto;
}

.bastion-archive-button {
  border-color: var(--clr-primary, var(--b-500));
  background: var(--clr-info-bg, var(--b-50));
  color: var(--clr-primary, var(--b-500));
  font-weight: 700;
  flex: 0 0 auto;
}

.bastion-archive-button:hover {
  background: var(--clr-primary, var(--b-500));
  border-color: var(--clr-primary, var(--b-500));
  color: var(--n-0);
}

.bastion-maintenance-button:hover {
  background: var(--clr-primary, var(--b-500));
  border-color: var(--clr-primary, var(--b-500));
  color: var(--n-0);
}

.bastion-manual-refresh--danger {
  flex: 1 1 100%;
  min-width: 0;
  white-space: normal;
}

.bastion-manual-refresh--danger:hover {
  background: var(--r-50);
  border-color: var(--r-500);
  color: var(--r-500);
}

/* ============================================================
   UI POLISH — transitions, table UX, scrollbars, depth, motion
   ============================================================ */

/* — Input & select transitions -------------------------------- */
input,
select {
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.global-search-input {
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}

/* — Secondary button ------------------------------------------ */
.secondary {
  transition: background var(--t-base), box-shadow var(--t-base);
}

.secondary:hover {
  background: var(--n-900);
  box-shadow: 0 2px 8px rgba(34,51,59,0.22);
}

/* — Table row hover ------------------------------------------- */
.data-table tbody tr {
  transition: background var(--t-fast);
}

.data-table tbody tr:hover {
  background: var(--n-50);
}

/* logviewer-scroll scrollbar already defined in the logviewer block above */

/* — Section content fade-in ----------------------------------- */

.content-body {
}

/* — Cards depth ---------------------------------------------- */
.context-headline,
.detail-panel,
.source-summary,
.element-submenu,
.hunt-result-head,
.hunt-rail-item,
.data-source-module,
.data-source-explorer {
  box-shadow: var(--shadow-xs);
}

/* — Hunt rail item transition -------------------------------- */
.hunt-rail-item {
  transition: background var(--t-fast), border-color var(--t-fast);
}

/* — Tunnel button -------------------------------------------- */
.tunnel-btn {
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

/* — Content area generous spacing ---------------------------- */
.content {
  padding: 18px 22px;
}

.content-body {
  gap: 12px;
}

/* — Content header separator --------------------------------- */
.content-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--n-200);
  margin-bottom: 16px;
}

/* — Capability list items ----------------------------------- */
.capability-list li {
  transition: background var(--t-fast), border-color var(--t-fast);
}

.capability-list li:hover {
  background: var(--n-50);
  border-color: var(--n-400);
}

/* — Source row transition ----------------------------------- */
.source-row {
  transition: background var(--t-fast), border-color var(--t-fast);
}

/* — Logviewer toolbar refinement ---------------------------- */
.logviewer-toolbar {
  background: var(--n-25);
}

/* — Modal shadow -------------------------------------------- */
.assignment-modal,
.customer-create-modal,
.customer-edit-modal {
  box-shadow: var(--shadow-md);
}

/* — Context menu refinement ---------------------------------- */
.context-menu button {
  transition: background var(--t-fast);
  border-radius: var(--radius-sm);
}

/* — Bastion manual refresh button ---------------------------- */
.bastion-manual-refresh {
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

/* — Search result item -------------------------------------- */
.search-result-item {
  transition: background var(--t-fast);
}

/* ============================================================
   RISK BADGE — farbige Pills für Risikostufen
   ============================================================ */

.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-risk  { background: var(--r-100); color: var(--r-600); }
.badge-info  { background: var(--a-100); color: var(--a-500); }
.badge-clear { background: var(--g-100); color: var(--g-500); }

/* ============================================================
   STATUS DOT — inside status-badge
   ============================================================ */

.status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.status-badge-online  .status-dot { background: var(--g-500); }
.status-badge-warning .status-dot { background: var(--a-500); }
.status-badge-offline .status-dot { background: var(--r-500); }
.status-badge-planned .status-dot { background: var(--n-400); }
.status-badge-unknown .status-dot { background: var(--n-400); }

/* ============================================================
   METRIC STRIP — semantische Karten-Varianten
   ============================================================ */

.metric-strip article small {
  display: block;
  margin-top: 2px;
  color: var(--n-500);
  font-size: 0.66rem;
  font-weight: 700;
}

.metric-strip article.metric-risk {
  border-color: var(--r-500);
  background: linear-gradient(135deg, var(--n-25) 0%, var(--n-0) 60%);
}

.metric-strip article.metric-risk strong {
  color: var(--r-600);
  font-size: 1.25rem;
}

.metric-strip article.metric-risk small {
  color: var(--r-600);
  font-weight: 700;
}

.metric-strip article.metric-ok strong {
  color: var(--g-500);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.module-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-grid--wide {
  grid-template-columns: 1.4fr 1fr;
}

.module-card,
.module-panel {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-lg);
  background: var(--n-0);
  box-shadow: var(--shadow-xs);
}

.module-card span,
.module-panel h3 {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.module-card strong {
  font-size: 1rem;
  color: var(--clr-text);
}

.module-card small {
  color: var(--clr-muted);
  line-height: 1.45;
}

.module-card--tall {
  min-height: 112px;
}

.module-panel {
  align-content: start;
}

.module-panel p {
  margin: 0;
  color: var(--clr-muted);
  line-height: 1.55;
}

.module-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.module-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.module-bullet-list {
  margin: 0;
  padding-left: 18px;
  color: var(--clr-muted);
  line-height: 1.55;
}

.module-form {
  display: grid;
  gap: 10px;
}

.module-form input,
.module-form textarea,
.inline-form input,
.inline-form select,
.module-form select {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--n-25);
  color: var(--clr-text);
}

.module-form textarea {
  min-height: 90px;
  padding: 12px;
  resize: vertical;
}

.inline-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.toggle-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.analysis-callout {
  padding: 12px 14px;
  border: 1px solid var(--n-300);
  border-left: 2px solid var(--clr-primary);
  border-radius: var(--radius-md);
  background: var(--b-50);
  color: var(--clr-text);
  line-height: 1.55;
}

.report-preview {
  overflow: auto;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-md);
  background: var(--n-25);
}

.report-preview--shell {
  padding: 12px;
}

.report-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.report-preview-body {
  color: var(--clr-muted);
  line-height: 1.55;
}

.raw-report {
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-md);
  background: var(--b-700);
  color: var(--b-100);
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
}

.report-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--n-0) 0%, var(--b-50) 100%);
}

.report-hero--risk {
  border-left-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.report-hero--warn {
  border-left-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.report-hero--ok {
  border-left-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

.report-hero-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.report-hero h2 {
  margin: 0;
  font-size: 1.25rem;
}

.report-hero p {
  margin: 0;
  max-width: 780px;
  color: var(--clr-muted);
  line-height: 1.45;
}

.report-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.report-hero-meta span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.75);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.report-hero-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.report-control-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.report-control-row .report-scope-tabs,
.report-control-row .report-filter-strip {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

.report-preview.report-preview--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.report-preview .report-metric {
  min-height: 94px;
  border-color: var(--clr-border);
  border-left: 2px solid var(--clr-info);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.report-preview .report-metric--risk {
  border-left-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.report-preview .report-metric--warn {
  border-left-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.report-preview .report-metric--ok {
  border-left-color: var(--clr-ok);
}

.report-preview .report-metric small {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.report-findings-panel {
  border-left: 2px solid var(--clr-primary);
}

.report-brief-panel {
  border-left: 2px solid var(--clr-info);
}

.report-generator-panel {
  border-left: 2px solid var(--clr-primary);
}

.report-generator-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.report-generator-head h2 {
  margin: 2px 0 0;
}

.report-generator-head p:not(.eyebrow) {
  margin: 3px 0 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.report-generator-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.report-module-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.report-module-choice {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  cursor: pointer;
}

.report-module-choice input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.report-module-choice span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.report-module-choice strong,
.report-module-choice small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-module-choice strong {
  font-size: 0.72rem;
}

.report-module-choice small {
  color: var(--clr-muted);
  font-size: 0.66rem;
}

.report-brief-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.report-brief-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--clr-border);
  border-top: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.report-brief-card--risk {
  border-top-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.report-brief-card--validation {
  border-top-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.report-brief-card--talking {
  border-top-color: var(--clr-primary);
}

.report-brief-card--commercial {
  border-top-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

.report-brief-card h3 {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.2;
}

.report-brief-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 16px;
  color: var(--clr-text);
  font-size: 0.72rem;
  line-height: 1.32;
}

.report-brief-card li {
  overflow-wrap: anywhere;
}

.report-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.report-table-wrap .report-table {
  min-width: 980px;
  border: 0;
}

.report-table-wrap .report-table th:first-child,
.report-table-wrap .report-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--clr-surface);
}

.report-table-wrap .report-table th:first-child {
  z-index: 3;
  background: var(--clr-surface-alt);
}

.report-designer {
  gap: 12px;
}

.report-designer-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}

.report-designer-bar-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.report-designer-bar-title .eyebrow {
  margin: 0;
  font-size: 0.66rem;
}

.report-designer-bar-title h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.18;
}

.report-designer-bar-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.report-designer-layout {
  display: grid;
  grid-template-columns: minmax(245px, 290px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.report-designer-pane {
  position: sticky;
  top: 10px;
  display: grid;
  gap: 10px;
  align-self: start;
  min-width: 0;
}

.report-designer-block {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}

.report-designer-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.report-designer-block-title {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.report-scope-tabs.report-scope-tabs--vertical {
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.report-scope-tabs--vertical .report-scope-tab {
  min-height: 42px;
  display: grid;
  gap: 2px;
  justify-items: start;
  align-content: center;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  text-align: left;
  white-space: normal;
}

.report-scope-tabs--vertical .report-scope-tab.active {
  border-color: var(--clr-primary);
  background: var(--clr-nav);
  color: var(--n-0);
}

.report-scope-tabs--vertical .report-scope-tab small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.25;
}

.report-scope-tabs--vertical .report-scope-tab.active small {
  color: rgba(255, 255, 255, 0.76);
}

.report-designer-field {
  display: grid;
  gap: 5px;
  margin: 0;
}

.report-designer-field + .report-designer-field {
  margin-top: 2px;
}

.report-designer-field span {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-designer-field select {
  min-width: 0;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font-weight: 700;
}

.report-designer-field select:disabled {
  color: var(--clr-xmuted);
  background: var(--clr-subtle);
}

.report-preset-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.report-preset-pill {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.report-preset-pill:hover,
.report-preset-pill.active {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
  color: var(--clr-primary-dark);
}

.report-module-toggles {
  display: grid;
  gap: 6px;
}

.report-module-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.report-module-toggle:hover,
.report-module-toggle:focus-within,
.report-module-toggle.is-on {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.report-module-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.report-module-toggle-dot {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.report-module-toggle.is-on .report-module-toggle-dot {
  border-color: var(--clr-primary);
  background: var(--clr-primary);
  box-shadow: inset 0 0 0 3px var(--clr-surface);
}

.report-module-toggle-label {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.report-module-toggle-label strong,
.report-module-toggle-label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-module-toggle-label strong {
  color: var(--clr-text);
  font-size: 0.72rem;
  line-height: 1.2;
}

.report-module-toggle-label small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 600;
}

.report-designer-preview {
  min-width: 0;
}

.report-preview-page {
  display: grid;
  gap: 12px;
  min-height: 620px;
  padding: 16px;
  border: 1px solid var(--clr-border);
  border-top: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  box-shadow: 0 10px 28px rgba(12, 26, 36, 0.08);
}

.report-preview-page--risk {
  border-top-color: var(--clr-risk);
}

.report-preview-page--warn {
  border-top-color: var(--clr-warn);
}

.report-preview-page--ok {
  border-top-color: var(--clr-ok);
}

.report-preview-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--clr-border);
}

.report-preview-page-head .eyebrow {
  margin: 0 0 4px;
  font-size: 0.66rem;
}

.report-preview-page-head h1 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.18;
}

.report-preview-page-sub {
  margin: 6px 0 0;
  max-width: 86ch;
  color: var(--clr-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.report-decision-pill {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.report-decision-pill--risk {
  border-color: rgba(184, 48, 48, 0.34);
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.report-decision-pill--warn {
  border-color: rgba(184, 112, 0, 0.34);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.report-decision-pill--ok {
  border-color: rgba(22, 112, 64, 0.34);
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.report-designer .report-preview.report-preview--wide {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin: 0;
}

.report-designer .report-preview .report-metric {
  min-height: 76px;
  padding: 10px;
  border-left-width: 3px;
  box-shadow: none;
}

.report-designer .report-preview .report-metric span,
.report-designer .report-preview .report-metric small {
  font-size: 0.66rem;
}

.report-designer .report-preview .report-metric strong {
  font-size: 1rem;
}

.report-preview-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.report-designer .report-findings-panel {
  border-left-color: var(--clr-primary);
}

.report-designer .report-brief-panel {
  border-left-color: var(--clr-info);
}

.report-preview-section > .eyebrow {
  margin: 0;
  font-size: 0.66rem;
}

.report-preview-section > h2 {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.2;
}

.report-preview-section > .detail-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.report-preview-section > .detail-panel > .eyebrow {
  margin: 0;
  font-size: 0.66rem;
}

.report-preview-section > .detail-panel h2 {
  font-size: 0.96rem;
}

.cve-report-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.cve-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cve-report-head h2 {
  margin: 2px 0 0;
}

.cve-report-head p:not(.eyebrow) {
  margin: 4px 0 0;
  color: var(--clr-muted);
  font-size: 0.78rem;
}

.cve-report-form {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(140px, 1fr) minmax(110px, 0.75fr) minmax(140px, 1fr) max-content max-content;
  gap: 8px;
  align-items: end;
}

.cve-report-form label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cve-report-form input,
.cve-report-form select {
  min-width: 0;
  height: 36px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  padding: 0 10px;
  font-size: 0.84rem;
  text-transform: none;
}

.cve-report-check {
  grid-template-columns: 16px max-content;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: var(--clr-text);
}

.cve-report-check input {
  width: 14px;
  height: 14px;
  padding: 0;
}

.cve-report-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cve-report-summary .report-metric {
  min-height: 78px;
}

.cve-report-meta,
.cve-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cve-report-meta span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.cve-report-table td > small {
  display: block;
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: 0.66rem;
}

.cve-asset-pill,
.cve-match-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
}

.cve-asset-pill {
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
}

.cve-asset-pill--container {
  border-color: var(--b-200);
  background: var(--b-50);
  color: var(--b-500);
}

.cve-asset-pill--vm {
  border-color: var(--b-100);
  background: var(--b-50);
  color: var(--b-500);
}

.cve-match-pill--confirmed,
.cve-match-pill--affected {
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.cve-match-pill--possible {
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.cve-report-notes {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.report-designer .report-brief-grid,
.report-designer .report-finding-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

.report-designer .report-brief-card {
  padding: 10px;
  border-top-width: 2px;
  background: var(--clr-surface);
}

.report-designer .report-brief-card h3 {
  font-size: 0.78rem;
}

.report-designer .report-brief-card ul {
  gap: 4px;
  font-size: 0.72rem;
  line-height: 1.34;
}

.report-designer .report-finding-grid .finding-card {
  padding: 10px;
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.report-designer .report-finding-grid .finding-card h4 {
  margin-bottom: 6px;
  font-size: 0.78rem;
}

.report-designer .report-finding-grid .finding-card ul {
  gap: 4px;
}

.report-designer .report-finding-grid .finding-item {
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 6px;
  font-size: 0.72rem;
  line-height: 1.32;
}

.report-designer .report-character-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.report-designer .report-character-grid article {
  padding: 10px;
  background: var(--clr-surface);
}

.report-designer .report-table-wrap {
  max-height: 360px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.report-designer .report-table-wrap .report-table {
  min-width: 760px;
}

.report-designer .report-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--clr-surface-alt);
}

.report-designer .report-table th:first-child {
  z-index: 4;
}

.report-designer .report-table td {
  vertical-align: top;
}

.report-stack-metric {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.report-stack-metric strong {
  color: var(--clr-text);
  font-size: 0.84rem;
  line-height: 1.2;
}

.report-stack-metric small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.report-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.report-stack-metric + .report-signal-row {
  margin-top: 5px;
}

.report-signal {
  min-height: 19px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 6px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.report-signal--ok {
  border-color: rgba(22, 112, 64, 0.24);
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.report-signal--warn {
  border-color: rgba(184, 112, 0, 0.24);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.report-signal--risk {
  border-color: rgba(184, 48, 48, 0.24);
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.report-focus-cell {
  max-width: 34ch;
  color: var(--clr-text);
  font-weight: 600;
  line-height: 1.32;
}

.report-preview-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  text-align: center;
}

.report-preview-empty span {
  color: var(--clr-xmuted);
  font-size: 1.45rem;
  line-height: 1;
}

.report-preview-empty p {
  max-width: 42ch;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 1120px) {
  .report-designer-layout {
    grid-template-columns: 1fr;
  }

  .report-designer-pane {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-designer-block:first-child,
  .report-designer-block:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .report-designer-bar,
  .report-preview-page-head {
    flex-direction: column;
  }

  .report-designer-bar-actions {
    justify-content: flex-start;
  }

  .cve-report-head {
    display: grid;
  }

  .cve-report-form {
    grid-template-columns: 1fr;
  }

  .cve-report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-designer-pane,
  .report-designer .report-preview.report-preview--wide,
  .report-designer .report-brief-grid,
  .report-designer .report-finding-grid,
  .report-designer .report-character-grid {
    grid-template-columns: 1fr;
  }

  .report-preview-page {
    min-height: 0;
    padding: 12px;
  }
}

@media (max-width: 900px) {
  .report-hero {
    flex-direction: column;
  }

  .report-hero-actions {
    justify-content: flex-start;
  }

	  .report-control-row,
	  .report-preview.report-preview--wide,
	  .report-brief-grid,
	  .report-module-picker {
	    grid-template-columns: 1fr;
	  }

  .report-control-row .report-scope-tabs {
    width: fit-content;
  }
}

.finding-list {
  display: grid;
  gap: 10px;
}

.finding-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-lg);
  background: var(--n-0);
}

.finding-card--critical {
  border-left: 2px solid var(--clr-risk);
}

.finding-card--high {
  border-left: 2px solid var(--a-500);
}

.finding-card--medium {
  border-left: 2px solid var(--clr-warn);
}

.finding-card--low,
.finding-card--info {
  border-left: 2px solid var(--clr-info);
}

.finding-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.finding-card-head strong {
  color: var(--clr-text);
}

.finding-card p {
  margin: 0;
  color: var(--clr-muted);
  line-height: 1.55;
}

.finding-meta {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 4px 10px;
  margin: 0;
}

.finding-meta dt {
  color: var(--clr-xmuted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.finding-meta dd {
  margin: 0;
  color: var(--clr-text);
  font-weight: 700;
}

.finding-reco {
  padding-top: 8px;
  border-top: 1px solid var(--n-200);
}

/* ============================================================
   DASHBOARD — klickbare Risiko-Zeilen
   ============================================================ */

.risk-row {
  cursor: pointer;
}

.risk-row:hover td {
  background: var(--n-25);
}

/* ============================================================
   DONUT — Farbvarianten
   ============================================================ */

.donut.donut-risk {
  background: conic-gradient(var(--r-500) calc(var(--value) * 1%), var(--b-100) 0);
}

.donut.donut-ok {
  background: conic-gradient(var(--g-500) calc(var(--value) * 1%), var(--b-100) 0);
}

/* ============================================================
   CONFIRM-PENDING — zwei-Klick destruktive Aktion
   ============================================================ */

button.confirm-pending {
  background: var(--r-600);
}

button.confirm-pending:hover {
  background: var(--r-700);
}


/* ── Button variants ─────────────────────────────────────── */
.action-button--ghost {
  background: transparent;
  color: var(--clr-primary);
  border: 1px solid var(--clr-border-mid);
  box-shadow: none;
}
.action-button--ghost:hover {
  background: var(--clr-info-bg);
  border-color: var(--clr-primary);
  box-shadow: none;
}
.action-button--danger {
  background: var(--clr-risk);
}
.action-button--danger:hover {
  background: var(--r-600);
  box-shadow: 0 2px 8px rgba(192,57,43,0.28);
}

.table-action--danger {
  color: var(--clr-danger);
}

.table-action--danger:hover:not(:disabled) {
  background: var(--clr-danger-bg);
  color: var(--clr-danger);
}

/* ── Enrollment panel ────────────────────────────────────── */
.enrollment-panel {
  margin-bottom: 20px;
  padding: 18px 20px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.enrollment-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.enrollment-panel-head h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text);
}

.enrollment-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.enrollment-token-row {
  margin-bottom: 12px;
}

.enrollment-token {
  display: inline-block;
  padding: 6px 12px;
  background: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-family: "Cascadia Code", "Fira Mono", "Consolas", monospace;
  font-size: 0.84rem;
  color: var(--clr-text);
  letter-spacing: 0.04em;
  word-break: break-all;
  user-select: all;
}

.enrollment-cmd-label {
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.enrollment-cmd {
  margin: 0 0 10px;
  padding: 12px 14px;
  background: var(--b-700);
  color: var(--b-500);
  border-radius: var(--radius-md);
  font-family: "Cascadia Code", "Fira Mono", "Consolas", monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

.enrollment-copy-cmd {
  margin-top: 2px;
}

/* ── Hunt view toggle + export ───────────────────────────── */
.hunt-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.hunt-toggle-btn {
  min-height: 26px;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--clr-surface);
  color: var(--clr-muted);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.hunt-toggle-btn.active {
  background: var(--clr-nav);
  color: var(--n-0);
  border-color: var(--clr-nav);
}

.hunt-toggle-btn:hover:not(.active) {
  background: var(--clr-surface-alt);
  border-color: var(--clr-border-mid);
}

.hunt-export-btn {
  margin-left: auto;
  min-height: 26px;
  font-size: 0.72rem;
}

/* ── Confidence badges ───────────────────────────────────── */
.hunt-confidence {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.hunt-confidence.conf-crit {
  background: var(--r-700);
  color: var(--r-500);
}


.hunt-confidence.conf-high {
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.hunt-confidence.conf-mid {
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.hunt-confidence.conf-low {
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
}

/* ── Score bar ───────────────────────────────────────────── */
.hunt-score-bar {
  display: inline-block;
  vertical-align: middle;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--clr-border);
  margin-left: 6px;
  position: relative;
  overflow: hidden;
}
.hunt-score-bar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--score, 50%);
  background: var(--clr-primary);
  border-radius: 2px;
}

/* ── Timeline column ─────────────────────────────────────── */
.hunt-time {
  font-size: 0.66rem;
  color: var(--clr-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Timeline date separator ─────────────────────────────── */
.hunt-date-separator td {
  padding: 6px 10px 4px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-muted);
  background: var(--clr-surface-alt);
  border-bottom: 1px solid var(--clr-border);
}

/* ── Kill-chain row ──────────────────────────────────────── */
.hunt-row--chain {
  background: linear-gradient(90deg, rgba(192,57,43,0.07) 0, transparent 100%) !important;
  border-left: 2px solid var(--clr-risk);
}

.hunt-chain-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
  border: 1px solid var(--clr-risk);
}

/* ── Row expand/detail ───────────────────────────────────── */
.hunt-row {
  cursor: pointer;
}
.hunt-row:hover td {
  background: var(--clr-info-bg);
}
.hunt-row--expanded td {
  background: var(--clr-info-bg);
}

.hunt-detail-cell {
  padding: 0 !important;
}

.hunt-detail {
  padding: 12px 20px 14px 36px;
  background: var(--clr-surface-alt);
  border-bottom: 2px solid var(--clr-primary);
  font-size: 0.84rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hunt-detail strong {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hunt-detail p {
  margin: 0;
  color: var(--clr-text);
}

.hunt-detail a {
  color: var(--clr-primary);
}

/* ── Dismiss button ──────────────────────────────────────── */
.hunt-action-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hunt-action-text {
  flex: 1;
  min-width: 0;
}

.hunt-dismiss-btn {
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--clr-xmuted);
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.hunt-row:hover .hunt-dismiss-btn,
.hunt-row--expanded .hunt-dismiss-btn {
  opacity: 1;
}

.hunt-dismiss-btn:hover {
  color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.hunt-detail .hunt-dismiss-btn {
  opacity: 1;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px solid var(--clr-border);
  background: var(--n-0);
  font-size: 0.78rem;
  line-height: 1.2;
}

/* ── Meta crit counter ───────────────────────────────────── */
.hunt-meta-crit {
  color: var(--clr-risk);
  font-weight: 700;
}

/* ── Tactic distribution bars ────────────────────────────── */
.hunt-stat-tactics {
  grid-column: span 2;
}

.hunt-tactic-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.hunt-tactic-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hunt-tactic-label {
  font-size: 0.66rem;
  color: var(--clr-muted);
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.hunt-tactic-bar-track {
  flex: 1;
  height: 6px;
  background: var(--clr-border);
  border-radius: 3px;
  overflow: hidden;
}

.hunt-tactic-bar-fill {
  height: 100%;
  background: var(--clr-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.hunt-tactic-count {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--clr-text);
  width: 20px;
  text-align: right;
}

/* ── Critical stat card ──────────────────────────────────── */
.hunt-summary article.hunt-stat-crit {
  border-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.hunt-summary article.hunt-stat-crit strong {
  color: var(--clr-risk);
}

/* ── Hunt summary responsive ─────────────────────────────── */
@media (max-width: 900px) {
  .hunt-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .job-kpi-strip {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .vuln-source-panel {
    grid-template-columns: 1fr;
  }
  .hunt-summary article.hunt-stat-mitre,
  .hunt-summary article.hunt-stat-tactics {
    grid-column: span 2;
  }
  .agent-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Hunt detail sections ────────────────────────────────── */
.hunt-detail-section {
  display: grid;
  /* 140px schnitten "Empfohlene Maßnahme:" in Versalien auf "EMPFOHLENE MASSN…". */
  grid-template-columns: minmax(0, 172px) minmax(0, 1fr);
  gap: 2px 12px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--clr-border);
}

.hunt-detail-section .hunt-detail-actions {
  grid-column: 2;
}

.hunt-detail-section:last-child { border-bottom: none; }
.hunt-detail-section strong { color: var(--clr-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.hunt-detail-section p { margin: 0; }

/* ── Vuln/CVE stat cards ─────────────────────────────────── */
.hunt-summary article.hunt-stat-vuln {
  border-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}
.hunt-summary article.hunt-stat-vuln strong { color: var(--clr-warn); }

.hunt-summary article.hunt-stat-chain {
  border-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}
.hunt-summary article.hunt-stat-chain strong { color: var(--clr-risk); }

/* ── Severity badge ──────────────────────────────────────── */
.sev-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.sev-badge--risk { background: var(--clr-risk-bg); color: var(--clr-risk); border: 1px solid var(--clr-risk); }
.sev-badge--info { background: var(--clr-info-bg); color: var(--clr-primary); border: 1px solid var(--clr-primary); }
.sev-badge--ok   { background: var(--clr-ok-bg); color: var(--clr-ok); border: 1px solid var(--clr-ok); }

/* ── CVE badge (NVD link) ────────────────────────────────── */
.cve-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  background: var(--n-900);
  color: var(--b-500);
  border: 1px solid var(--n-800);
  text-decoration: none;
  white-space: nowrap;
}
.cve-badge:hover { background: var(--n-900); color: var(--clr-primary); border-color: var(--clr-primary); }
.cve-count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
  border: 1px solid var(--clr-warn);
  font-size: 0.66rem;
  font-weight: 700;
}
.cve-none { color: var(--clr-xmuted); }

/* ── Software version code ───────────────────────────────── */
.ver-code {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  background: var(--clr-surface-alt);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--clr-text);
}
.ver-code--new {
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

/* ── Update / ok badges ──────────────────────────────────── */
.update-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
  border: 1px solid var(--clr-warn);
}
.ok-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  color: var(--clr-xmuted);
}

/* ── Software row highlights ─────────────────────────────── */
.sw-row--risk td { background: rgba(220,53,69,0.06) !important; }
.sw-row--cve td  { background: rgba(248,177,51,0.05) !important; }
.sw-row--update td { background: rgba(var(--clr-warn-rgb, 248,177,51),0.04) !important; }

.security-table-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.vuln-table {
  table-layout: auto;
  min-width: 820px;
}

.vuln-table th:nth-child(1),
.vuln-table td:nth-child(1) {
  width: 54%;
}

.vuln-table th:nth-child(2),
.vuln-table td:nth-child(2) {
  width: 220px;
}

.vuln-table th:nth-child(3),
.vuln-table td:nth-child(3) {
  width: 190px;
}

.vuln-row {
  cursor: pointer;
}

.vuln-row:hover td,
.vuln-row--expanded td {
  background: var(--clr-info-bg) !important;
}

.vuln-product-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vuln-product-cell strong,
.vuln-product-cell span,
.vuln-action-cell span,
.vuln-version-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vuln-product-cell strong {
  flex: 0 1 auto;
  color: var(--clr-text);
  font-size: 0.84rem;
  line-height: 1.25;
}

.vuln-product-cell span {
  flex: 1 1 120px;
  padding-left: 8px;
  border-left: 1px solid var(--clr-border);
}

.vuln-product-cell .vuln-expand-icon {
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding-left: 0;
  border-left: 0;
  color: var(--clr-muted);
  transition: transform var(--t-fast), color var(--t-fast);
}

.vuln-row--expanded .vuln-expand-icon {
  transform: rotate(90deg);
  color: var(--clr-primary);
}

.vuln-product-cell span,
.vuln-version-text,
.vuln-cve-inline,
.vuln-rating-cell span {
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.vuln-version-cell,
.vuln-rating-cell,
.vuln-action-cell {
  min-width: 0;
}

.vuln-version-cell,
.vuln-rating-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.vuln-version-line {
  display: flex !important;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.vuln-version-text {
  flex: 0 1 auto;
  color: var(--clr-text) !important;
}

.vuln-cve-inline {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}

.vuln-action-cell {
  color: var(--clr-muted);
  line-height: 1.35;
}

.vuln-detail-cell {
  padding: 0 !important;
}

.vuln-detail {
  padding: 12px 20px 14px 36px;
  background: var(--clr-surface-alt);
  border-bottom: 2px solid var(--clr-primary);
  font-size: 0.84rem;
}

.vuln-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--clr-border);
}

.vuln-detail-grid span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vuln-detail-grid strong,
.vuln-detail-section strong {
  color: var(--clr-muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vuln-detail-section {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 2px 12px;
  padding-top: 10px;
}

.vuln-detail-section p {
  margin: 0;
  color: var(--clr-text);
}

@media (max-width: 900px) {
  .vuln-detail-grid,
  .vuln-detail-section {
    grid-template-columns: 1fr;
  }
}

/* ── Advisory cell ───────────────────────────────────────── */
.advisory-cell {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  color: var(--clr-muted);
}

/* ── Vuln KPI bar ────────────────────────────────────────── */
.vuln-kpi-bar {
  display: flex;
  gap: 10px;
  padding: 10px 0 8px;
  flex-wrap: wrap;
}

.vuln-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 8px 14px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.vuln-kpi span {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.vuln-kpi strong {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1;
}

.vuln-kpi--risk { border-color: var(--clr-risk); background: var(--clr-risk-bg); }
.vuln-kpi--risk strong { color: var(--clr-risk); }
.vuln-kpi--warn { border-color: var(--clr-warn); background: var(--clr-warn-bg); }
.vuln-kpi--warn strong { color: var(--clr-warn); }

/* ── Vuln in-table search ────────────────────────────────── */
.vuln-search-wrap {
  padding: 8px 0 4px;
}

.vuln-search {
  width: 100%;
  max-width: 360px;
  padding: 6px 12px 6px 32px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-md);
  background: var(--clr-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") 10px center no-repeat;
  font-size: 0.78rem;
  color: var(--clr-text);
  outline: none;
  transition: border-color 0.15s;
}

.vuln-search:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 2px rgba(13,110,253,0.15); }

/* ═══════════════════════════════════════════════════════════
   Response Tab
   ═══════════════════════════════════════════════════════════ */

.resp-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  align-items: start;
}

/* ── Header bar ──────────────────────────────────────────── */
.resp-agent-status {
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
}

.resp-agent-on {
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
  border: 1px solid var(--clr-ok);
}

.resp-agent-off {
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  border: 1px solid var(--clr-border);
}

/* ── Action table ────────────────────────────────────────── */
.resp-table {
  width: 100%;
}

.resp-cat-header td {
  padding: 8px 10px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-text);
  background: var(--clr-surface-alt);
  border-top: 2px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}
.resp-category:first-child .resp-cat-header td { border-top: 0; }

.resp-action-row td {
  vertical-align: middle;
}

.resp-icon {
  width: 28px;
  text-align: center;
  font-size: 1rem;
  color: var(--clr-muted);
}

.resp-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--clr-text);
}

.resp-desc {
  display: block;
  font-size: 0.72rem;
  color: var(--clr-muted);
  margin-top: 1px;
}

/* ── Risk row highlight ──────────────────────────────────── */
.resp-risk-high {
  background: linear-gradient(90deg, rgba(192,57,43,0.06) 0, transparent 100%) !important;
}

.resp-risk-med {
  background: linear-gradient(90deg, rgba(200,127,0,0.06) 0, transparent 100%) !important;
}

/* ── Status badges ───────────────────────────────────────── */
.resp-ready {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
  border: 1px solid var(--clr-ok);
}

.resp-no-agent {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  border: 1px solid var(--clr-border);
}

/* ── Run buttons ─────────────────────────────────────────── */
.resp-run-btn {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-primary);
  background: var(--clr-primary);
  color: var(--n-0);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, opacity 0.15s;
}

.resp-run-btn:hover:not(:disabled) {
  background: var(--clr-primary-dark);
}

.resp-run-btn:disabled {
  background: var(--clr-surface-alt);
  border-color: var(--clr-border);
  color: var(--clr-xmuted);
  cursor: default;
}

.resp-run-btn--danger {
  background: var(--clr-risk);
  border-color: var(--clr-risk);
}

.resp-run-btn--danger:hover:not(:disabled) {
  background: var(--r-700);
  border-color: var(--r-700);
}

/* ── Log panel ───────────────────────────────────────────── */
.resp-log-panel {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.resp-log-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted);
}

.resp-log-empty {
  font-size: 0.78rem;
  color: var(--clr-xmuted);
  margin: 0;
}

.resp-log-table {
  font-size: 0.72rem;
}

.resp-log-time {
  color: var(--clr-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-right: 8px;
}

.resp-log-ok td:last-child { color: var(--clr-ok); }
.resp-log-err td:last-child { color: var(--clr-risk); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .resp-layout {
    grid-template-columns: 1fr;
  }
  .resp-log-panel {
    order: -1;
  }
}

/* ═══════════════════════════════════════════════════════════
   KPI-Karten (Dashboard)
   ═══════════════════════════════════════════════════════════ */

.metric-strip article.kpi-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  user-select: none;
}

.metric-strip article.kpi-card:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

.kpi-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  background: var(--clr-surface-alt);
  color: var(--clr-primary);
  flex-shrink: 0;
}

.kpi-customers .kpi-icon-wrap { background: var(--b-50); color: var(--clr-primary); }
.kpi-devices   .kpi-icon-wrap { background: var(--g-50); color: var(--clr-ok); }
.kpi-risk      .kpi-icon-wrap { background: var(--clr-risk-bg); color: var(--clr-risk); }
.kpi-ok        .kpi-icon-wrap { background: var(--clr-ok-bg); color: var(--clr-ok); }
.kpi-agents    .kpi-icon-wrap { background: var(--b-50); color: var(--b-500); }

.kpi-body {
  display: grid;
  gap: 1px;
}

.kpi-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-value {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--clr-text);
}

.kpi-delta {
  font-size: 0.66rem;
  color: var(--clr-muted);
  font-weight: 600;
}

.kpi-delta--ok   { color: var(--clr-ok); }
.kpi-delta--warn { color: var(--clr-warn); }
.kpi-delta--risk { color: var(--clr-risk); }

.kpi-risk .kpi-value,
.metric-strip article.metric-risk strong { color: var(--clr-risk); }
.kpi-ok .kpi-value { color: var(--clr-ok); }
.dashboard-status-bar__kpis--compact {
  grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(130px, .8fr));
}
.dashboard-status-bar__kpis--compact .kpi-card {
  min-width: 0;
}
.dashboard-status-bar__kpis--compact .kpi-card:not(.kpi-card--primary) {
  grid-template-columns: 34px 1fr;
  padding: 10px;
}
.dashboard-status-bar__kpis--compact .kpi-card:not(.kpi-card--primary) .kpi-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
}
.dashboard-status-bar__kpis--compact .kpi-card:not(.kpi-card--primary) .kpi-value {
  font-size: 1.25rem;
}
.kpi-card--primary {
  border-left: 2px solid var(--clr-risk);
  background: var(--clr-risk-bg, var(--r-50));
}
.kpi-card--primary.kpi-ok {
  border-left-color: var(--clr-ok);
  background: var(--clr-ok-bg, var(--g-50));
}

.monitoring-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.monitoring-breadcrumb button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--clr-primary);
  font: inherit;
  cursor: pointer;
}

.monitoring-breadcrumb button:hover {
  text-decoration: underline;
}



.monitoring-breadcrumb-sep {
  color: var(--clr-xmuted);
}

.dashboard-summary-band {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 8px;
}
.dashboard-summary-primary,
.dashboard-summary-fact {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
  cursor: pointer;
}
.dashboard-summary-primary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 1px;
  padding: 8px 12px;
  border-left: 2px solid var(--clr-info);
}
.dashboard-summary-primary--risk {
  border-left-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}
.dashboard-summary-primary--ok {
  border-left-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}
.dashboard-summary-primary span,
.dashboard-summary-fact span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dashboard-summary-primary span {
  flex: 1 0 100%;
}
.dashboard-summary-primary strong {
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dashboard-summary-primary small,
.dashboard-summary-fact small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}
.dashboard-summary-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.dashboard-summary-fact {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 0;
  min-width: 0;
  padding: 6px 10px;
}
.dashboard-summary-fact span {
  flex: 1 0 100%;
}
.dashboard-summary-primary:hover,
.dashboard-summary-fact:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}
.dashboard-summary-fact strong {
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Einheit-Suffix an der grossen Akut-Zahl (z. B. "3 Kunden") */
.dashboard-summary-primary .dashboard-summary-unit {
  flex: 0 0 auto;
  margin-left: 4px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Aktiver Filter: Ring statt Hintergrundwechsel, damit risk/ok-Tönung bleibt */
.dashboard-summary-primary.is-active,
.dashboard-summary-fact.is-active {
  border-color: var(--clr-primary);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--clr-primary) 55%, transparent);
}

.dashboard-diff-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.dashboard-diff-pill--warn {
  background: rgba(196, 122, 30, 0.18);
  color: var(--a-500);
  border: 1px solid rgba(196, 122, 30, 0.45);
}

.dashboard-diff-pill--ok {
  background: rgba(45, 122, 94, 0.16);
  color: var(--g-500);
  border: 1px solid rgba(45, 122, 94, 0.4);
}

.dashboard-data-basis {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin: 0 0 8px;
}

.dashboard-data-basis-head {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.dashboard-data-basis--ok .dashboard-data-basis-head {
  border-left-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

.dashboard-data-basis--warn .dashboard-data-basis-head {
  border-left-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.dashboard-data-basis--risk .dashboard-data-basis-head {
  border-left-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.dashboard-data-basis-head strong {
  overflow: hidden;
  color: var(--clr-text);
  font-size: 0.96rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-data-basis-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.dashboard-basis-pill {
  display: grid;
  align-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 58px;
  padding: 6px 9px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
}

button.dashboard-basis-pill {
  cursor: pointer;
}

button.dashboard-basis-pill:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.dashboard-basis-pill span,
.dashboard-basis-pill strong,
.dashboard-basis-pill small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-basis-pill span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-basis-pill strong {
  color: var(--clr-text);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dashboard-basis-pill small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.dashboard-basis-pill--ok {
  border-left-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

.dashboard-basis-pill--warn {
  border-left-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.dashboard-basis-pill--risk {
  border-left-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.dashboard-control-coverage {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin: 0 0 10px;
}

.dashboard-control-head {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-primary);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.dashboard-control-head strong {
  overflow: hidden;
  color: var(--clr-text);
  font-size: 0.96rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-control-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.dashboard-control-card {
  display: grid;
  grid-template-rows: auto auto auto auto 4px;
  gap: 2px;
  min-width: 0;
  min-height: 86px;
  padding: 7px 9px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font: inherit;
  text-align: left;
}

button.dashboard-control-card {
  cursor: pointer;
}

button.dashboard-control-card:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.dashboard-control-card span,
.dashboard-control-card strong,
.dashboard-control-card small,
.dashboard-control-card em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-control-card span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-control-card strong {
  color: var(--clr-text);
  font-size: 0.96rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dashboard-control-card small,
.dashboard-control-card em {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.dashboard-control-card em {
  font-style: normal;
  font-weight: 700;
}

.dashboard-control-meter {
  display: block;
  align-self: end;
  overflow: hidden;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.dashboard-control-meter b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--clr-info);
}

.dashboard-control-card--ok {
  border-left-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

.dashboard-control-card--ok .dashboard-control-meter b {
  background: var(--clr-ok);
}

.dashboard-control-card--warn {
  border-left-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.dashboard-control-card--warn .dashboard-control-meter b {
  background: var(--clr-warn);
}

.dashboard-control-card--risk {
  border-left-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.dashboard-control-card--risk .dashboard-control-meter b {
  background: var(--clr-risk);
}

@media (max-width: 1100px) {
  .dashboard-data-basis,
  .dashboard-control-coverage {
    grid-template-columns: 1fr;
  }

  .dashboard-data-basis-grid,
  .dashboard-control-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .dashboard-data-basis-grid,
  .dashboard-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.dashboard-refresh-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  color: var(--clr-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Der Punkt markiert nur, dass die Ansicht automatisch nachlädt. Als
   Daueranimation im Blickfeld hat er nichts erklärt und alles unruhig
   gemacht. */
.dashboard-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-border-strong, var(--n-400));
}

.dashboard-events {
  display: grid;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}

.dashboard-events--empty {
  color: var(--clr-muted);
}

.dashboard-events-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dashboard-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dashboard-event {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--clr-text);
}

.dashboard-event-age {
  font-variant-numeric: tabular-nums;
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-event--high  { border-color: rgba(220, 38, 38, 0.5); background: rgba(220, 38, 38, 0.08); }
.dashboard-event--warn  { border-color: rgba(196, 122, 30, 0.5); background: rgba(196, 122, 30, 0.08); }
.dashboard-event--ok    { border-color: rgba(45, 122, 94, 0.45); background: rgba(45, 122, 94, 0.08); }
.dashboard-event--info  { color: var(--clr-muted); }

.dashboard-command-bar {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}
.dashboard-command-title {
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.dashboard-command-title span,
.dashboard-command-card small,
.dashboard-trend span,
.dashboard-signal span {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dashboard-command-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}
.dashboard-command-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.dashboard-command-card {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 74px;
  padding: 11px 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
  cursor: pointer;
}
.dashboard-command-card:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}
.dashboard-command-card--risk { border-left-color: var(--clr-risk); background: var(--clr-risk-bg); }
.dashboard-command-card--warn { border-left-color: var(--clr-warn); background: var(--clr-warn-bg); }
.dashboard-command-card--ok { border-left-color: var(--clr-ok); background: var(--clr-ok-bg); }
.dashboard-command-card strong {
  font-size: 0.9rem;
  line-height: 1.25;
}
.dashboard-command-card small {
  text-transform: none;
  letter-spacing: 0;
}

.dashboard-trend-strip,
.dashboard-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.dashboard-trend,
.dashboard-signal {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.dashboard-signal {
  min-height: 72px;
  border-left: 2px solid var(--clr-info);
  color: var(--clr-text);
  text-align: left;
  cursor: pointer;
}
.dashboard-signal:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}
.dashboard-trend strong,
.dashboard-signal strong {
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.dashboard-trend small,
.dashboard-signal small {
  overflow: hidden;
  color: var(--clr-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
}
.dashboard-trend--bad { border-left: 2px solid var(--clr-risk); background: var(--clr-risk-bg); }
.dashboard-trend--good { border-left: 2px solid var(--clr-ok); background: var(--clr-ok-bg); }
.dashboard-trend--neutral { border-left: 2px solid var(--clr-border); }
.dashboard-signal--risk { border-left-color: var(--clr-risk); background: var(--clr-risk-bg); }
.dashboard-signal--warn { border-left-color: var(--clr-warn); background: var(--clr-warn-bg); }
.dashboard-signal--neutral { border-left-color: var(--clr-border); }

/* Dashboard refresh timestamp */
.dashboard-refresh-row {
  display: flex;
  justify-content: flex-end;
  margin: 2px 0 6px;
}

.dashboard-refresh-ts {
  font-size: 0.66rem;
  color: var(--clr-xmuted);
  font-variant-numeric: tabular-nums;
}

.radar-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--n-0) 0%, var(--b-50) 100%);
}

.radar-hero h2 {
  margin: 2px 0 4px;
  font-size: 1.25rem;
}

.radar-hero p {
  margin: 0;
  color: var(--clr-muted);
  line-height: 1.45;
}

.radar-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.radar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.75fr);
  gap: 12px;
}

.radar-layout--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Cockpit-Panels kompakter: weniger Polsterung, flachere Köpfe */
.radar-layout--split > .detail-panel {
  padding: 11px 13px;
  gap: 8px;
  border-radius: var(--radius-md);
}
.radar-layout--split .inventory-toolbar {
  margin: 0;
}
.radar-layout--split .detail-panel > .eyebrow {
  margin: 0;
}
.radar-layout--split .detail-panel h2 {
  margin: 1px 0 0;
  font-size: 0.96rem;
}
.radar-layout--split .detail-panel > p {
  margin: 1px 0 0;
}

/* === Radar Tiers === */
.radar-tiers { display: grid; gap: 10px; }
.radar-tier { border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-surface); }
.radar-tier-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; list-style: none;
}
.radar-tier-head::-webkit-details-marker { display: none; }
.radar-tier-head h3 { margin: 0; font-size: 0.84rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; flex: 1; }
.radar-tier-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--clr-muted); }
.radar-tier-count {
  display: inline-block; padding: 1px 9px; border-radius: var(--radius-sm);
  background: var(--clr-surface-alt); color: var(--clr-text);
  font-size: 0.72rem; font-weight: 700;
}
.radar-tier--critical .radar-tier-dot { background: var(--clr-risk); }
.radar-tier--critical { border-left: 2px solid var(--clr-risk); }
.radar-tier--risk     .radar-tier-dot { background: var(--clr-warn); }
.radar-tier--risk     { border-left: 2px solid var(--clr-warn); }
.radar-tier--watch    .radar-tier-dot { background: var(--b-500); }
.radar-tier--ok       .radar-tier-dot { background: var(--clr-ok); }

.radar-tier-body--cards { display: grid; gap: 8px; padding: 4px 10px 10px; }
.radar-tier-body--list { list-style: none; margin: 0; padding: 0 6px 6px; }

.radar-customer-card {
  display: grid; gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-risk);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  cursor: pointer; transition: box-shadow .15s;
}
.radar-customer-card:hover { box-shadow: var(--shadow-sm); }
.radar-customer-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.radar-customer-card-id strong { display: block; font-size: 0.96rem; }
.radar-customer-card-id small { color: var(--clr-muted); font-size: 0.72rem; font-weight: 700; }
.radar-score--lg { font-size: 1.1rem; padding: 6px 12px; }
.radar-customer-card-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.radar-chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 0.72rem; font-weight: 700;
  background: var(--clr-surface-alt); color: var(--clr-text);
}
.radar-chip--crit { background: var(--clr-risk-bg, var(--r-50)); color: var(--clr-risk); }
.radar-chip--warn { background: var(--clr-warn-bg, var(--a-50)); color: var(--clr-warn); }
.radar-chip--info { background: var(--b-50); color: var(--b-500); }
.radar-customer-card-top { margin: 0; font-size: 0.84rem; color: var(--clr-text); }
.radar-customer-card-top span { color: var(--clr-muted); }
.radar-customer-card-action { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.radar-customer-card-cta { color: var(--clr-primary, var(--b-500)); font-size: 0.78rem; font-weight: 700; }

.radar-compact-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(70px, max-content);
  gap: 10px; align-items: center;
  padding: 6px 12px;
  border-top: 1px solid var(--clr-border);
  border-left: 2px solid transparent;
  cursor: pointer;
  font-size: 0.84rem;
  min-height: 38px;
}
.radar-compact-row > * { min-width: 0; max-width: 100%; }
.radar-compact-row:first-child { border-top: 0; }
.radar-compact-row:hover { background: var(--clr-info-bg); }
.radar-compact-row--critical { border-left-color: var(--clr-risk); background: color-mix(in srgb, var(--clr-risk) 5%, transparent); }
.radar-compact-name { min-width: 0; }
.radar-compact-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; }
.radar-compact-name small { color: var(--clr-muted); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.radar-compact-reason { margin-top: 1px; }
.radar-compact-sev { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; justify-content: flex-end; }

/* Severity chips */
.sev-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sev-chip--critical { background: var(--clr-risk-bg); color: var(--clr-risk); }
.sev-chip--high     { background: var(--a-50); color: var(--r-600); }
.sev-chip--medium   { background: var(--clr-warn-bg); color: var(--clr-warn); }
.sev-chip--ok       { background: var(--clr-ok-bg); color: var(--clr-ok); }

/* Score-Delta */
.radar-score-delta {
  display: inline-block;
  margin-left: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  vertical-align: super;
}
.radar-score-delta--ok   { color: var(--clr-ok); }
.radar-score-delta--warn { color: var(--clr-risk); }

@media (max-width: 700px) {
  .radar-compact-row { grid-template-columns: 40px 1fr auto; }
}

/* === Action Groups === */
.radar-action-groups { display: grid; gap: 8px; }
.radar-action-group {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.radar-action-group--critical { border-left: 2px solid var(--clr-risk); }
.radar-action-group--risk     { border-left: 2px solid var(--clr-warn); }
.radar-action-group-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; list-style: none;
}
.radar-action-group-head::-webkit-details-marker { display: none; }
.radar-action-group-name strong { display: block; font-size: 0.9rem; }
.radar-action-group-name small { color: var(--clr-muted); font-size: 0.72rem; }
.radar-action-group-meta { display: flex; align-items: center; gap: 8px; }
.radar-action-group-count {
  padding: 2px 9px; border-radius: var(--radius-sm);
  background: var(--clr-surface-alt); color: var(--clr-text);
  font-size: 0.72rem; font-weight: 700;
}
.radar-action-group-body { display: grid; gap: 6px; padding: 4px 10px 10px; }

.radar-action-dup {
  display: inline-block; margin-left: 6px;
  padding: 0 6px; border-radius: var(--radius-sm);
  background: var(--clr-surface-alt); color: var(--clr-muted);
  font-size: 0.72rem; font-weight: 700;
}
@media (max-width: 1100px) {
  .radar-layout--split { grid-template-columns: 1fr; }
}

.dashboard-status-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 10px;
}
.dashboard-status-bar__kpis,
.dashboard-status-bar__sev {
  margin: 0;
}
.dashboard-status-bar .severity-strip { grid-template-columns: repeat(4, 1fr); }
.dashboard-status-bar .sev-stat-meta { display: none; }
@media (max-width: 1100px) {
  .dashboard-status-bar { grid-template-columns: 1fr; }
}

.dashboard-refresh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 10px;
}
.dashboard-refresh-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.radar-hero--compact {
  display: block;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.radar-hero--compact h2 {
  margin: 0;
  font-size: 1rem;
}

.empty-state-card {
  padding: 16px;
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  text-align: center;
}
.empty-state-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--clr-text);
}
.empty-state-card-icon {
  font-size: 1.45rem;
  margin-bottom: 6px;
  color: var(--clr-muted);
}
.empty-state-card--warn { border-color: var(--clr-warn); }
.empty-state-card--ok   { border-color: var(--clr-ok); }
.empty-state-card .action-button {
  margin-top: 10px;
}

.dashboard-strategic {
  margin: 10px 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.dashboard-strategic > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.dashboard-strategic > summary::-webkit-details-marker { display: none; }
.dashboard-strategic-title {
  font-weight: 700;
  color: var(--clr-text);
}
.dashboard-strategic-meta {
  color: var(--clr-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.dashboard-strategic-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 0 14px 14px;
}
@media (max-width: 1000px) {
  .dashboard-strategic-body { grid-template-columns: 1fr; }
}

.radar-primary,
.radar-side {
  display: grid;
  align-content: start;
  gap: 12px;
}

.dashboard-domain-overview {
  display: grid;
  grid-template-columns: minmax(160px, 210px) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin: 0 0 10px;
}

.dashboard-domain-head {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.dashboard-domain-head strong {
  overflow: hidden;
  color: var(--clr-text);
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 6px;
  min-width: 0;
}

.dashboard-domain-card {
  display: grid;
  grid-template-rows: auto auto auto auto 4px;
  gap: 3px;
  min-width: 0;
  min-height: 104px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
  cursor: pointer;
}

.dashboard-domain-card:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.dashboard-domain-card.is-active {
  border-color: var(--clr-primary);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--clr-primary) 45%, transparent);
}

.dashboard-domain-card span {
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-domain-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--clr-text);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.dashboard-domain-card small,
.dashboard-domain-card em {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-domain-card small {
  font-size: 0.66rem;
  font-weight: 700;
}

.dashboard-domain-card em {
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
}

.dashboard-domain-meter {
  display: block;
  align-self: end;
  overflow: hidden;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.dashboard-domain-meter b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--clr-info);
}

.dashboard-domain-card--ok {
  border-left-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

.dashboard-domain-card--ok .dashboard-domain-meter b {
  background: var(--clr-ok);
}

.dashboard-domain-card--warn {
  border-left-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.dashboard-domain-card--warn .dashboard-domain-meter b {
  background: var(--clr-warn);
}

.dashboard-domain-card--risk {
  border-left-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.dashboard-domain-card--risk .dashboard-domain-meter b {
  background: var(--clr-risk);
}

.dashboard-exploit-card,
.dashboard-sensor-card {
  cursor: default;
}

button.dashboard-exploit-card,
button.dashboard-sensor-card {
  cursor: pointer;
}

span.dashboard-exploit-card:hover,
span.dashboard-sensor-card:hover {
  border-color: var(--clr-border);
}

span.dashboard-exploit-card.dashboard-domain-card--ok:hover,
span.dashboard-sensor-card.dashboard-domain-card--ok:hover {
  background: var(--clr-ok-bg);
}

span.dashboard-exploit-card.dashboard-domain-card--warn:hover,
span.dashboard-sensor-card.dashboard-domain-card--warn:hover {
  background: var(--clr-warn-bg);
}

span.dashboard-exploit-card.dashboard-domain-card--risk:hover,
span.dashboard-sensor-card.dashboard-domain-card--risk:hover {
  background: var(--clr-risk-bg);
}

@media (max-width: 760px) {
  .dashboard-domain-overview {
    grid-template-columns: 1fr;
  }
}

.dashboard-customer-domain-panel {
  margin-bottom: 10px;
}

.dashboard-customer-domain-wrap {
  overflow-x: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.dashboard-customer-domain-table {
  min-width: 100%;
  margin: 0;
}

/* Nur die volle Kunden-×-Domänen-Matrix braucht den breiten Horizontal-Scroll. */
.dashboard-customer-domain-table--full {
  min-width: 1360px;
}

.dashboard-customer-domain-table th,
.dashboard-customer-domain-table td {
  vertical-align: middle;
}

.dashboard-customer-domain-row {
  border-left: 2px solid transparent;
  cursor: pointer;
}

.dashboard-customer-domain-row:hover {
  background: var(--clr-info-bg);
}

.dashboard-customer-domain-row--risk {
  border-left-color: var(--clr-risk);
  background: color-mix(in srgb, var(--clr-risk) 5%, transparent);
}

.dashboard-customer-domain-row--warn {
  border-left-color: var(--clr-warn);
}

.dashboard-customer-domain-row--ok {
  border-left-color: var(--clr-ok);
}

.dashboard-customer-domain-name strong,
.dashboard-customer-domain-name small,
.dashboard-customer-domain-reason small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-customer-domain-name small,
.dashboard-customer-domain-reason small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.dashboard-customer-domain-cell {
  display: grid;
  gap: 1px;
  min-width: 86px;
  max-width: 128px;
  padding: 3px 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.dashboard-customer-domain-cell strong,
.dashboard-customer-domain-cell small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-customer-domain-cell strong {
  color: var(--clr-text);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dashboard-customer-domain-cell small {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
}

.dashboard-customer-domain-cell--risk {
  border-color: color-mix(in srgb, var(--clr-risk) 55%, var(--clr-border));
  background: var(--clr-risk-bg);
}

.dashboard-customer-domain-cell--risk strong {
  color: var(--clr-risk);
}

.dashboard-customer-domain-cell--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 55%, var(--clr-border));
  background: var(--clr-warn-bg);
}

.dashboard-customer-domain-cell--warn strong {
  color: var(--clr-warn);
}

.dashboard-customer-domain-cell--ok {
  border-color: color-mix(in srgb, var(--clr-ok) 45%, var(--clr-border));
  background: var(--clr-ok-bg);
}

.dashboard-customer-domain-cell--ok strong {
  color: var(--clr-ok);
}

.dashboard-context-panel {
  margin-bottom: 10px;
}

.dashboard-context-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.dashboard-context-table {
  min-width: 860px;
  margin: 0;
}

.dashboard-context-table th,
.dashboard-context-table td {
  vertical-align: middle;
}

.dashboard-context-row {
  border-left: 2px solid transparent;
  cursor: pointer;
}

.dashboard-context-row:hover {
  background: var(--clr-info-bg);
}

.dashboard-context-row--risk {
  border-left-color: var(--clr-risk);
  background: color-mix(in srgb, var(--clr-risk) 5%, transparent);
}

.dashboard-context-row--warn {
  border-left-color: var(--clr-warn);
}

.dashboard-context-row--ok {
  border-left-color: var(--clr-ok);
}

.dashboard-context-name strong,
.dashboard-context-name small,
.dashboard-context-reason small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-context-name small,
.dashboard-context-reason small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.dashboard-context-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dashboard-context-source {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-context-source--risk {
  border-color: color-mix(in srgb, var(--clr-risk) 55%, var(--clr-border));
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.dashboard-context-source--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 55%, var(--clr-border));
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.dashboard-context-source--info {
  border-color: color-mix(in srgb, var(--clr-info) 55%, var(--clr-border));
  background: var(--clr-info-bg);
  color: var(--clr-info);
}

.dashboard-system-panel {
  margin-bottom: 10px;
}

.dashboard-system-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.dashboard-system-table {
  min-width: 1120px;
  margin: 0;
}

.dashboard-system-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.dashboard-system-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.dashboard-system-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.dashboard-system-filter em {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-style: normal;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dashboard-system-filter:hover,
.dashboard-system-filter.is-active {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.dashboard-system-filter.is-active em {
  background: var(--clr-primary);
  color: var(--n-0);
}

.dashboard-system-search {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dashboard-system-search span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dashboard-system-search input {
  min-width: 0;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font: inherit;
  font-size: 0.78rem;
}

.dashboard-system-result-count {
  justify-self: end;
  white-space: nowrap;
}

.dashboard-system-table th,
.dashboard-system-table td {
  vertical-align: middle;
}

.dashboard-system-row {
  cursor: pointer;
  border-left: 2px solid transparent;
}

.dashboard-system-row:hover {
  background: var(--clr-info-bg);
}

.dashboard-system-row--risk {
  border-left-color: var(--clr-risk);
}

.dashboard-system-row--warn {
  border-left-color: var(--clr-warn);
}

.dashboard-system-row--ok {
  border-left-color: var(--clr-ok);
}

.dashboard-system-name strong,
.dashboard-system-name small,
.dashboard-system-reason small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-system-name small,
.dashboard-system-reason small {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.dashboard-system-asset {
  display: grid;
  gap: 2px;
  min-width: 128px;
  max-width: 180px;
}

.dashboard-system-asset strong,
.dashboard-system-asset small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-system-asset strong {
  color: var(--clr-text);
  font-size: 0.78rem;
  font-weight: 700;
}

.dashboard-system-asset small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.dashboard-system-asset em {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
  font-style: normal;
}

.dashboard-system-asset em span {
  display: inline-flex;
  max-width: 100%;
  min-height: 18px;
  align-items: center;
  overflow: hidden;
  padding: 1px 5px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-system-asset--warn em span {
  border-color: color-mix(in srgb, var(--clr-warn) 55%, var(--clr-border));
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.dashboard-system-asset--risk em span {
  border-color: color-mix(in srgb, var(--clr-risk) 55%, var(--clr-border));
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.dashboard-system-state {
  display: inline-flex;
  min-width: 82px;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  font-size: 0.72rem;
  font-weight: 700;
}

.dashboard-system-state--ok {
  border-color: var(--clr-ok);
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.dashboard-system-state--warn {
  border-color: var(--clr-warn);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.dashboard-system-state--risk {
  border-color: var(--clr-risk);
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.dashboard-system-state--info {
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
}

.dashboard-system-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dashboard-system-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.dashboard-system-chip--ok {
  border-color: color-mix(in srgb, var(--clr-ok) 50%, var(--clr-border));
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.dashboard-system-chip--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 55%, var(--clr-border));
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.dashboard-system-chip--risk {
  border-color: color-mix(in srgb, var(--clr-risk) 55%, var(--clr-border));
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.dashboard-system-reason {
  max-width: 320px;
}

.dashboard-system-reason strong {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 2px;
}

.dashboard-system-freshness {
  display: grid;
  gap: 1px;
  min-width: 116px;
}

.dashboard-system-freshness strong {
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-system-freshness small {
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-system-freshness--ok strong {
  color: var(--clr-ok);
}

.dashboard-system-freshness--warn strong {
  color: var(--clr-warn);
}

.dashboard-system-freshness--risk strong {
  color: var(--clr-risk);
}

.dashboard-system-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
}

.dashboard-system-category {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-system-category--risk {
  border-color: color-mix(in srgb, var(--clr-risk) 55%, var(--clr-border));
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.dashboard-system-category--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 55%, var(--clr-border));
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.dashboard-system-category--info {
  border-color: color-mix(in srgb, var(--clr-info) 55%, var(--clr-border));
  background: var(--clr-info-bg);
  color: var(--clr-info);
}

.dashboard-system-category--ok {
  border-color: color-mix(in srgb, var(--clr-ok) 45%, var(--clr-border));
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.dashboard-quiet-state--compact {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.radar-action-list {
  display: grid;
  gap: 8px;
}

/* radar-action-card now piggy-backs on .mon-row — no separate styling needed.
   Left as a hook for callers that want extra padding/border tone. */
.radar-action-card { /* inherits .mon-row layout */ }

.radar-action-rank {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.radar-action-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.radar-action-main strong {
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.radar-action-main small,
.radar-action-main em {
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.35;
  font-style: normal;
  overflow-wrap: anywhere;
}

.radar-action-kind,
.radar-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.radar-action-pill--risk,
.radar-action-card--risk .radar-action-kind {
  border-color: var(--clr-risk);
  background: var(--n-0);
  color: var(--clr-risk);
}

.radar-action-pill--warn,
.radar-action-card--warn .radar-action-kind {
  border-color: var(--clr-warn);
  background: var(--n-0);
  color: var(--clr-warn);
}

.radar-score {
  display: inline-flex;
  min-width: 34px;
  justify-content: center;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.radar-score--ok { color: var(--clr-ok); background: var(--clr-ok-bg); }
.radar-score--warn { color: var(--clr-warn); background: var(--clr-warn-bg); }
.radar-score--risk { color: var(--clr-risk); background: var(--clr-risk-bg); }
.radar-score-stack {
  display: grid;
  gap: 2px;
  justify-items: end;
  min-width: 0;
  max-width: 100%;
}
.radar-score-stack small {
  max-width: 100%;
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.radar-score-stack--compact {
  justify-items: center;
}

.radar-customer-row td:first-child strong,
.radar-customer-row td:first-child small {
  display: block;
}

.radar-customer-row td:first-child small {
  color: var(--clr-muted);
  margin-top: 2px;
}

.radar-coverage-grid {
  display: grid;
  gap: 8px;
}

/* Coverage list: hairline list with embedded progress bar. */
.radar-coverage-list { /* uses .mon-list base */ }
.radar-coverage-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) 70px 48px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-left: 2px solid var(--clr-border);
  font-size: 0.84rem;
}
.radar-coverage-row--ok   { border-left-color: var(--clr-ok); }
.radar-coverage-row--warn { border-left-color: var(--clr-warn); }
.radar-coverage-row--risk { border-left-color: var(--clr-risk); }
.radar-coverage-label {
  display: grid; gap: 1px; min-width: 0;
}
.radar-coverage-label strong { font-size: 0.84rem; font-weight: 600; }
.radar-coverage-label small  { color: var(--clr-muted); font-size: 0.72rem; }
.radar-coverage-bar {
  position: relative;
  height: 7px;
  background: var(--clr-surface-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.radar-coverage-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--clr-info);
  border-radius: var(--radius-sm);
}
.radar-coverage-bar-fill--ok   { background: var(--clr-ok); }
.radar-coverage-bar-fill--warn { background: var(--clr-warn); }
.radar-coverage-bar-fill--risk { background: var(--clr-risk); }
.radar-coverage-num {
  color: var(--clr-muted); font-size: 0.72rem; font-style: normal;
  text-align: right; font-variant-numeric: tabular-nums;
}
.radar-coverage-pct {
  font-weight: 700; font-size: 0.72rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
.radar-coverage-pct--ok   { color: var(--clr-ok); }
.radar-coverage-pct--warn { color: var(--clr-warn); }
.radar-coverage-pct--risk { color: var(--clr-risk); }
@media (max-width: 640px) {
  .radar-coverage-row { grid-template-columns: 1fr 60px 48px; }
  .radar-coverage-bar { grid-column: 1 / -1; order: 4; }
}

/* Opportunity list now reuses mon-row via .radar-opportunity-grid wrapper. */
.radar-opportunity-grid { /* uses .mon-list base */ }
.radar-opportunity {
  /* single-line layout inherited from .mon-row */
}

.radar-opportunity strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* Monitoring dashboard — shared single-line list look.
   mon-list is a <ul>; each <li> contains either a button or inline content.
   Items are flat (hairline separators, no per-row rounding) so dense data
   reads as a list, not as 10 separate cards. */
.mon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  overflow: hidden;
}
.mon-list > li {
  margin: 0;
  border-top: 1px solid var(--clr-border);
}
.mon-list > li:first-child { border-top: 0; }

.mon-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--clr-border);
  color: var(--clr-text);
  text-align: left;
  cursor: pointer;
  font-size: 0.84rem;
  line-height: 1.25;
  min-height: 34px;
}
.mon-row > * {
  min-width: 0;
  max-width: 100%;
}
.mon-row:hover { background: var(--clr-info-bg); }
.mon-row--risk { border-left-color: var(--clr-risk); }
.mon-row--warn { border-left-color: var(--clr-warn); }
.mon-row--info { border-left-color: var(--clr-info); }
.mon-row--ok   { border-left-color: var(--clr-ok); }

.dashboard-work-item {
  grid-template-columns: 28px minmax(0, 1fr) minmax(64px, .38fr) max-content;
  min-height: 40px;
  padding: 6px 12px;
}

.mon-row-rank,
.mon-row-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mon-row--risk .mon-row-rank,
.mon-row--risk .mon-row-count { background: color-mix(in srgb, var(--clr-risk) 15%, transparent); color: var(--clr-risk); }
.mon-row--warn .mon-row-rank,
.mon-row--warn .mon-row-count { background: color-mix(in srgb, var(--clr-warn) 15%, transparent); color: var(--clr-warn); }

.mon-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.mon-row-title {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-row-summary {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
}

.mon-row-meta {
  color: var(--clr-muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-self: stretch;
  max-width: none;
}
.mon-row-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mon-row-pill--risk { border-color: var(--clr-risk); color: var(--clr-risk); background: var(--n-0); }
.mon-row-pill--warn { border-color: var(--clr-warn); color: var(--clr-warn); background: var(--n-0); }
.mon-row-pill--info { border-color: var(--clr-info); color: var(--clr-info); background: var(--n-0); }
.mon-row-pill--ok   { border-color: var(--clr-ok); color: var(--clr-ok); background: var(--n-0); }
.mon-row-dup {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.dashboard-list-more {
  margin: 6px 2px 0;
  text-align: right;
}

@media (max-width: 720px) {
  .mon-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .mon-row-meta { display: none; }
  .dashboard-work-item { min-height: 48px; }
}

@media (max-width: 900px) {
  .radar-hero {
    flex-direction: column;
  }

  .radar-hero-actions {
    justify-content: flex-start;
  }

  .radar-layout,
  .radar-action-card,
  .dashboard-summary-band,
  .dashboard-command-bar,
  .dashboard-work-item,
  .radar-coverage-row,
  .radar-opportunity-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-summary-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radar-action-kind {
    justify-self: start;
  }

  .radar-coverage-row em {
    text-align: left;
  }

  .dashboard-system-table {
    min-width: 1040px;
  }

  .dashboard-system-controls {
    grid-template-columns: 1fr;
  }

  .dashboard-system-result-count {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .dashboard-summary-facts {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   Device-Header Card
   ═══════════════════════════════════════════════════════════ */

.device-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.element-submenu-head { display: none; }

/* ── Compact device header (single bar) ──────────────────── */
.device-compact-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}

.device-compact-header--risk { border-left-color: var(--clr-risk); }
.device-compact-header--warn { border-left-color: var(--clr-warn); }
.device-compact-header--ok   { border-left-color: var(--clr-ok); }

.dch-divider {
  width: 1px;
  height: 16px;
  background: var(--clr-border-mid);
  flex-shrink: 0;
}

.dch-icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}

.dch-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
}

.dch-kind {
  font-size: 0.66rem;
  color: var(--clr-muted);
  font-weight: 600;
  white-space: nowrap;
}

.dch-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.dch-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.dch-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  font-size: 0.66rem;
  white-space: nowrap;
}

.dch-meta-key {
  color: var(--clr-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6rem;
}

/* kept for backward compat if referenced elsewhere */
.device-header-card { display: none; }
.device-header-badge-row { display: flex; align-items: center; gap: 6px; }
.ds-icon { font-size: 0.78rem; opacity: 0.5; margin-right: 2px; }

/* ═══════════════════════════════════════════════════════════
   Customer Overview – Incident-Kachel
   ═══════════════════════════════════════════════════════════ */

.viz-row {
  grid-template-columns: 1fr 1fr 1.2fr 1fr;
}

.agent-overview-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(170px, 0.55fr) repeat(2, minmax(230px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.agent-overview-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-hw-grid--single { grid-template-columns: 1fr; }

/* === Firewall Health Cards === */
.fw-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.fw-health-cell {
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.fw-health-cell dt { margin: 0 0 4px; color: var(--clr-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.fw-health-cell dd { margin: 0; font-size: 1rem; font-weight: 700; color: var(--clr-text); }
.fw-health-cell--warn { border-color: var(--clr-warn); }
.fw-health-cell--warn dd { color: var(--clr-warn); }
.fw-health-cell--crit { border-color: var(--clr-risk); }
.fw-health-cell--crit dd { color: var(--clr-risk); }
@media (max-width: 720px) {
  .fw-health-grid { grid-template-columns: repeat(2, 1fr); }
}

.fw-hash-copy {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--clr-text);
  font: inherit;
}
.fw-hash-copy code {
  background: var(--clr-surface-alt);
  padding: 2px 6px; border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}
.fw-hash-copy:not([disabled]):hover code { background: var(--clr-border); }

.fw-sev-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.fw-sev-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border); background: var(--clr-surface);
  font-size: 0.72rem; font-weight: 700; cursor: pointer;
  color: var(--clr-text);
}
.fw-sev-pill span {
  padding: 0 6px; border-radius: var(--radius-sm);
  background: var(--clr-surface-alt); color: var(--clr-muted);
  font-size: 0.72rem; font-weight: 700;
}
.fw-sev-pill.active { border-color: var(--clr-text); background: var(--clr-text); color: var(--clr-surface); }
.fw-sev-pill.active span { background: var(--clr-surface); color: var(--clr-text); }
.fw-sev-pill--critical { border-color: var(--clr-risk); }
.fw-sev-pill--high     { border-color: var(--clr-warn); }
.fw-sev-pill--medium   { border-color: var(--a-500); }

.fw-cat-pill {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm);
  background: var(--clr-surface-alt); color: var(--clr-text);
  font-size: 0.72rem; font-weight: 700;
}
/* Firewall tab status header: online state + uptime/CPU/RAM/storage at a glance. */
.fw-status-header {
  display: grid;
  gap: 0;
  margin-bottom: 14px;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.fw-status-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--clr-border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--clr-primary) 9%, var(--clr-surface)), var(--clr-surface));
}
.fw-status-widget-head h2 {
  margin: 1px 0 2px;
  color: var(--clr-text);
  font-size: 1rem;
}
.fw-status-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}
.fw-status-headline > span:last-child { display: grid; gap: 1px; }
.fw-status-headline small { color: var(--clr-muted); font-size: 0.66rem; font-weight: 600; }
.fw-status-headline strong { color: var(--clr-text); }
.fw-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--clr-muted);
  flex: 0 0 auto;
}
.fw-status-headline--ok .fw-status-dot { background: var(--clr-ok, var(--g-500)); }
.fw-status-headline--warn .fw-status-dot { background: var(--clr-warn, var(--a-500)); }
.fw-status-headline--risk .fw-status-dot { background: var(--clr-risk, var(--r-500)); }
.fw-status-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
  padding: 12px 14px 14px;
}
.fw-status-tile {
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.fw-status-tile dt {
  margin: 0 0 3px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fw-status-tile dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.fw-status-tile--warn { border-color: var(--clr-warn, var(--a-500)); }
.fw-status-tile--warn dd { color: var(--clr-warn, var(--a-500)); }
.fw-status-tile--crit { border-color: var(--clr-risk, var(--r-500)); }
.fw-status-tile--crit dd { color: var(--clr-risk, var(--r-500)); }
@media (max-width: 720px) {
  .fw-status-tiles { grid-template-columns: repeat(2, 1fr); }
  .fw-status-widget-head { align-items: flex-start; flex-direction: column; }
}

/* pfSense-style monitoring widgets: object status first, detail on demand. */
/* ── Abschnittsnavigation im Firewall-Tab ───────────────────────────────────
   Konnektivitaet, Betrieb, Sicherheit und Befunde liegen jeweils hinter einem
   eigenen Panel; sichtbar ist immer nur eines. ── */
.fw-section-nav {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 3px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
  overflow-x: auto;
}
.fw-section-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.fw-section-tab:hover { color: var(--clr-text); }
.fw-section-tab[aria-selected="true"] {
  border-color: var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text);
  box-shadow: var(--shadow-xs);
}
.fw-section-tab-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--clr-ok) 16%, transparent);
  color: var(--clr-ok);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}
.fw-section-tab-count--warn {
  background: color-mix(in srgb, var(--clr-warn) 18%, transparent);
  color: var(--clr-warn);
}
.fw-section-tab-count--risk {
  background: color-mix(in srgb, var(--clr-risk) 16%, transparent);
  color: var(--clr-risk);
}
.fw-section-tab-count--unknown,
.fw-section-tab-count--na {
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
}
.fw-section[hidden] { display: none !important; }

.fw-focus-more {
  grid-column: 2;
  justify-self: end;
  padding: 5px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.fw-widget-allclear {
  margin: 0;
  padding: 14px 12px 6px;
  color: var(--clr-muted);
  font-size: 0.78rem;
}
.fw-service-rest { padding: 0 10px 10px; }
.fw-service-rest > summary {
  padding: 6px 2px;
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  list-style: none;
}
.fw-service-rest > summary::-webkit-details-marker { display: none; }
.fw-service-rest > summary::before { content: "▸ "; }
.fw-service-rest[open] > summary::before { content: "▾ "; }
.fw-service-rest .fw-service-grid { padding: 0; }

.fw-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.fw-dashboard-grid--single .fw-dashboard-widget { grid-column: span 12; }
.fw-dashboard-widget {
  grid-column: span 6;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}
.fw-dashboard-widget--interfaces { grid-column: span 12; }
.fw-dashboard-widget--health { grid-column: span 8; }
.fw-dashboard-widget--services { grid-column: span 12; }
.fw-dashboard-widget--config { grid-column: span 4; }
/* Gateways und VPN stehen nebeneinander und sollen oben buendig beginnen,
   statt sich gegenseitig auf die Hoehe des groesseren zu ziehen. */
.fw-dashboard-widget--gateways,
.fw-dashboard-widget--vpn { align-self: start; }
.fw-widget-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}
.fw-widget-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-primary) 12%, var(--clr-surface));
  color: var(--clr-primary);
  font-size: 1rem;
  font-weight: 700;
}
.fw-widget-head h3 { margin: 0; color: var(--clr-text); font-size: 0.9rem; }
.fw-widget-head p { margin: 2px 0 0; color: var(--clr-muted); font-size: 0.66rem; line-height: 1.3; }
.fw-widget-count {
  min-width: 25px;
  padding: 3px 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.fw-widget-empty { margin: 0; padding: 18px 14px; color: var(--clr-muted); font-size: 0.78rem; }
.fw-widget-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
}
.fw-widget-alert strong { flex: 0 0 auto; }
.fw-widget-alert--warn { border-color: color-mix(in srgb, var(--clr-warn) 48%, var(--clr-border)); background: var(--clr-warn-bg, var(--a-50)); color: var(--clr-warn); }
.fw-widget-alert--risk { border-color: color-mix(in srgb, var(--clr-risk) 48%, var(--clr-border)); background: var(--clr-risk-bg, var(--r-50)); color: var(--clr-risk); }
.fw-object-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 8px;
  padding: 10px;
}
.fw-object-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-muted);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.fw-object-card--ok { border-left-color: var(--clr-ok); }
.fw-object-card--warn { border-left-color: var(--clr-warn); }
.fw-object-card--risk { border-left-color: var(--clr-risk); }
.fw-object-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fw-object-card > header > div { display: grid; min-width: 0; gap: 2px; }
.fw-object-card > header strong { overflow: hidden; color: var(--clr-text); font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; }
.fw-object-kind { color: var(--clr-muted); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.fw-object-description { margin: -2px 0 0; color: var(--clr-muted); font-size: 0.66rem; line-height: 1.35; }
.fw-object-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.fw-object-status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.fw-object-status--ok { color: var(--clr-ok); }
.fw-object-status--warn { color: var(--clr-warn); }
.fw-object-status--risk { color: var(--clr-risk); }
.fw-object-meta { display: grid; gap: 4px; margin: 0; }
.fw-object-meta > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 7px; }
.fw-object-meta dt { color: var(--clr-muted); font-size: 0.6rem; }
.fw-object-meta dd { overflow: hidden; margin: 0; color: var(--clr-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.fw-object-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding-top: 7px;
  border-top: 1px solid var(--clr-border);
}
.fw-object-metrics--single { grid-template-columns: minmax(0, 1fr); }
.fw-object-metrics span { display: grid; gap: 1px; }
.fw-object-metrics small { color: var(--clr-muted); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; }
.fw-object-metrics strong { color: var(--clr-text); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.fw-interface-grid { display: grid; gap: 6px; padding: 10px; }
.fw-interface-card {
  display: grid;
  grid-template-columns: auto minmax(100px, .8fr) minmax(150px, 1.35fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
}
.fw-interface-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clr-muted); }
.fw-interface-card--ok .fw-interface-dot { background: var(--clr-ok); }
.fw-interface-card--warn .fw-interface-dot { background: var(--clr-warn); }
.fw-interface-card--risk .fw-interface-dot { background: var(--clr-risk); }
.fw-interface-card > div { display: grid; min-width: 0; gap: 1px; }
.fw-interface-card strong { overflow: hidden; color: var(--clr-text); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.fw-interface-card small { overflow: hidden; color: var(--clr-muted); font-size: 0.6rem; text-overflow: ellipsis; white-space: nowrap; }
.fw-interface-address { text-align: right; }
.fw-interface-address strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.fw-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; padding: 10px; }
.fw-service-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); }
.fw-service-chip > i { width: 7px; height: 7px; border-radius: 50%; background: var(--clr-muted); }
.fw-service-chip--ok > i { background: var(--clr-ok); }
.fw-service-chip--warn > i { background: var(--clr-warn); }
.fw-service-chip--risk > i { background: var(--clr-risk); }
.fw-service-chip > span { display: grid; min-width: 0; gap: 1px; }
.fw-service-chip strong { overflow: hidden; color: var(--clr-text); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.fw-service-chip small { color: var(--clr-muted); font-size: 0.6rem; }
.fw-dashboard-widget .fw-health-grid { padding: 10px; }
.fw-config-list { padding: 6px 10px 10px; }

@media (max-width: 1120px) {
  .fw-dashboard-widget,
  .fw-dashboard-widget--interfaces,
  .fw-dashboard-widget--health,
  .fw-dashboard-widget--services,
  .fw-dashboard-widget--config { grid-column: span 12; }
}
@media (max-width: 680px) {
  .fw-object-grid { grid-template-columns: minmax(0, 1fr); }
  .fw-interface-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fw-interface-address { grid-column: 2 / -1; text-align: left; }
  .fw-service-grid { grid-template-columns: minmax(0, 1fr); }
}

.fw-codex-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  border-color: color-mix(in srgb, var(--clr-primary) 34%, var(--clr-border));
  background: linear-gradient(135deg, var(--clr-info-bg), var(--clr-surface) 72%);
}
.fw-codex-launch-copy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.fw-codex-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--clr-primary);
  color: var(--n-0);
  font-size: 1.1rem;
  box-shadow: 0 6px 18px rgba(26, 107, 138, 0.18);
}
.fw-codex-launch h2 { margin: 1px 0 4px; font-size: 1rem; }
.fw-codex-launch p:not(.eyebrow) {
  max-width: 760px;
  margin: 0 0 7px;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.fw-codex-availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--clr-ok, var(--g-500));
  font-size: 0.72rem;
  font-weight: 700;
}
.fw-codex-availability::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.fw-codex-availability--stale { color: var(--clr-warn); }
.fw-codex-availability--offline { color: var(--clr-risk); }
.fw-codex-launch-actions { display: flex; flex: 0 0 auto; gap: 8px; }

.fw-hardening-confirm {
  display: grid;
  gap: 16px;
  width: min(100%, 620px);
  padding: 20px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(15, 23, 42, 0.28));
}
.fw-hardening-confirm > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.fw-hardening-confirm h2 { margin: 1px 0 0; font-size: 1.1rem; }
.fw-hardening-confirm > p { margin: 0; color: var(--clr-muted); line-height: 1.5; }
.fw-hardening-safety-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.fw-hardening-safety-flow span {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.fw-hardening-safety-flow strong {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}
.fw-hardening-confirm-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--clr-warn) 45%, var(--clr-border));
  border-radius: var(--radius-sm);
  background: var(--clr-warn-bg, var(--a-50));
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.45;
}
.fw-hardening-confirm-check input { margin-top: 3px; }
.fw-hardening-confirm > footer { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 840px) {
  .fw-codex-launch { align-items: stretch; flex-direction: column; }
  .fw-codex-launch-actions { flex-wrap: wrap; }
  .fw-hardening-safety-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* QTC Befund — live view with per-element toggles (modal). */
.qtc-report-modal { align-items: stretch; padding: 24px; }
.qtc-report-dialog {
  display: flex;
  flex-direction: column;
  width: min(1280px, 100%);
  max-height: 100%;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(15,23,42,.28));
}
.qtc-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--clr-border);
}
.qtc-report-head strong { font-size: 0.96rem; color: var(--clr-text); }
.qtc-report-close {
  border: none;
  background: var(--clr-subtle);
  color: var(--clr-muted);
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  cursor: pointer;
}
.qtc-report-close:hover { background: var(--clr-border); color: var(--clr-text); }
.qtc-report-body {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  flex: 1;
}
.qtc-report-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  overflow-y: auto;
  border-right: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}
.qtc-report-control-title {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--clr-muted);
}
.qtc-report-view-block { gap: 6px; }
.qtc-report-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.qtc-report-segment.is-loading { opacity: 0.6; cursor: progress; }
.qtc-report-segment-btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-muted);
  background: transparent;
  cursor: pointer;
}
.qtc-report-segment-btn:hover:not(:disabled) { color: var(--clr-text); }
.qtc-report-segment-btn.active {
  color: var(--n-0);
  background: var(--clr-accent, var(--b-500));
}
.qtc-report-segment-btn:disabled { cursor: progress; }
.qtc-report-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  font-size: 0.78rem;
  color: var(--clr-text);
  cursor: pointer;
}
.qtc-report-check--section { font-weight: 700; margin-top: 6px; }
.qtc-report-section-group { margin-bottom: 6px; }
.qtc-report-items {
  display: grid;
  gap: 2px;
  margin: 2px 0 0 20px;
  padding-left: 8px;
  border-left: 1px solid var(--clr-border);
}
.qtc-report-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--clr-muted);
  cursor: pointer;
}
.qtc-report-item input { margin-top: 2px; }
.qtc-report-actions { margin-top: auto; gap: 8px; }
.qtc-report-actions .action-button { width: 100%; justify-content: center; }
.qtc-report-preview-wrap { min-width: 0; background: var(--n-50); }
.qtc-report-frame { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) {
  .qtc-report-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .qtc-report-controls { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--clr-border); }
}

/* Cross-customer firewall fleet overview. */
.fleet-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.fleet-tile {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.fleet-tile span { color: var(--clr-muted); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.fleet-tile strong { font-size: 1.25rem; font-weight: 700; color: var(--clr-text); font-variant-numeric: tabular-nums; }
.fleet-tile--ok { border-left-color: var(--clr-ok, var(--g-500)); }
.fleet-tile--warn { border-left-color: var(--clr-warn, var(--a-500)); }
.fleet-tile--risk { border-left-color: var(--clr-risk, var(--r-500)); }

.fleet-table th, .fleet-table td { white-space: nowrap; }
.fleet-row { cursor: pointer; }
.fleet-row:hover { background: var(--clr-surface-alt); }
.fleet-row--risk { box-shadow: inset 3px 0 0 var(--clr-risk, var(--r-500)); }
.fleet-row--warn { box-shadow: inset 3px 0 0 var(--clr-warn, var(--a-500)); }
.fleet-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.72rem; }
.fleet-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clr-muted); }
.fleet-status--ok .fleet-status-dot { background: var(--clr-ok, var(--g-500)); }
.fleet-status--warn .fleet-status-dot { background: var(--clr-warn, var(--a-500)); }
.fleet-status--risk .fleet-status-dot { background: var(--clr-risk, var(--r-500)); }
.fleet-metric { font-variant-numeric: tabular-nums; }
.fleet-metric--warn { color: var(--clr-warn, var(--a-500)); font-weight: 700; }
.fleet-metric--crit { color: var(--clr-risk, var(--r-500)); font-weight: 700; }
@media (max-width: 900px) {
  .fleet-tiles { grid-template-columns: repeat(3, 1fr); }
}

.fw-findings-panel { margin-top: 14px; }
.fw-more { margin-top: 8px; }
.fw-more > summary { cursor: pointer; padding: 6px 8px; color: var(--clr-primary, var(--b-500)); font-weight: 700; }

/* Expandable firewall finding cards — collapsed = scannable, expanded = what to do / where. */
.fw-find-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.fw-find-card {
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  overflow: hidden;
}
.fw-find-card[open] {
  box-shadow: var(--shadow-xs);
}
.fw-find-card--critical { border-left-color: var(--clr-risk); }
.fw-find-card--high     { border-left-color: var(--clr-warn); }
.fw-find-card--medium   { border-left-color: var(--a-500); }
.fw-find-card--info     { border-left-color: var(--clr-border); }

.fw-find-summary {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}
.fw-find-summary::-webkit-details-marker { display: none; }
.fw-find-summary:hover { background: var(--clr-surface-alt); }

.fw-find-headline { min-width: 0; }
.fw-find-headline strong {
  display: block;
  font-size: 0.84rem;
  line-height: 1.25;
  color: var(--clr-text);
}
.fw-find-headline small {
  display: block;
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fw-find-card[open] .fw-find-headline small { white-space: normal; }

.fw-find-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fw-find-age {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fw-find-chevron {
  color: var(--clr-muted);
  transition: transform 0.15s ease;
  text-align: center;
}
.fw-find-card[open] .fw-find-chevron { transform: rotate(90deg); }

.fw-find-body {
  padding: 0 10px 10px 12px;
  border-top: 1px solid var(--clr-border);
}
.fw-find-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 8px 16px;
  margin-top: 10px;
}
.fw-find-block dt,
.fw-find-evidence dt {
  margin: 0 0 2px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fw-find-block dd {
  margin: 0;
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.fw-find-block--fix dd { font-weight: 600; }
.fw-find-evidence {
  margin-top: 10px;
}
.fw-find-evidence dd {
  margin: 0;
}
.fw-find-evidence code {
  display: block;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.fw-find-body > .fw-find-evidence code { color: var(--clr-text); font-size: 0.82rem; }
.fw-find-body > details > summary { cursor: pointer; color: var(--clr-muted); }
.fw-find-body > details pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.72rem; }

.agent-firewall-jump {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.agent-firewall-jump:hover {
  background: var(--clr-surface-alt);
  border-color: var(--clr-primary, var(--b-500));
}

@media (max-width: 720px) {
  .fw-find-summary { grid-template-columns: 48px minmax(0, 1fr) 18px; }
  .fw-find-tags { grid-column: 1 / -1; justify-content: flex-start; }
  .fw-find-grid { grid-template-columns: minmax(0, 1fr); }
}

.devlog-component-pill {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm);
  background: var(--b-50); color: var(--b-500);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem; font-weight: 700;
}

.agent-status-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-muted);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}
.agent-status-header--ok      { border-left-color: var(--clr-ok); }
.agent-status-header--warn    { border-left-color: var(--clr-warn); }
.agent-status-header--offline { border-left-color: var(--clr-risk); }

.agent-status-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.agent-status-host {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agent-status-host strong {
  font-size: 0.96rem;
  color: var(--clr-text);
  overflow-wrap: anywhere;
}
.agent-status-host span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.agent-status-snapshot {
  flex-basis: 100%;
  margin: -4px 0 0;
  color: var(--clr-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.agent-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
}
.agent-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-muted);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}
.agent-status-badge--ok      { background: var(--clr-ok-bg, var(--g-50)); color: var(--clr-ok); border-color: var(--clr-ok); }
.agent-status-badge--ok .agent-status-dot      { background: var(--clr-ok); }
.agent-status-badge--warn    { background: var(--clr-warn-bg, var(--a-50)); color: var(--clr-warn); border-color: var(--clr-warn); }
.agent-status-badge--warn .agent-status-dot    { background: var(--clr-warn); }
.agent-status-badge--offline { background: var(--clr-risk-bg, var(--r-50)); color: var(--clr-risk); border-color: var(--clr-risk); }
.agent-status-badge--offline .agent-status-dot { background: var(--clr-risk); }

.agent-status-metrics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(96px, 1fr);
  gap: 8px;
  margin: 0;
  flex: 1 1 480px;
}
.agent-status-header--warn .agent-status-metrics,
.agent-status-header--offline .agent-status-metrics {
  opacity: 0.72;
}
.agent-status-metric {
  padding: 6px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  min-width: 0;
}
.agent-status-metric dt {
  margin: 0 0 2px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}
.agent-status-metric dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text);
  overflow-wrap: anywhere;
}
.agent-status-metric--warn dd { color: var(--clr-warn); }
.agent-status-metric--crit dd { color: var(--clr-risk); }
.agent-status-metric--warn { border-color: var(--clr-warn); }
.agent-status-metric--crit { border-color: var(--clr-risk); }

.agent-section {
  margin-top: 14px;
}
.agent-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  padding: 0 2px;
}
.agent-section-head h3 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--clr-text);
}
.agent-section-head span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.netdiag-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
}
.netdiag-card--risk { border-left-color: var(--clr-risk); }
.netdiag-card--warn { border-left-color: var(--clr-warn); }
.netdiag-card--ok   { border-left-color: var(--clr-ok); }
.netdiag-head-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.netdiag-run-modal {
  width: min(100%, 760px);
  max-height: min(92vh, 840px);
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: 0 18px 60px rgba(16, 32, 40, 0.18);
}

.netdiag-run-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.netdiag-run-modal-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.netdiag-run-modal-head span {
  color: var(--clr-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

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

.netdiag-run-prompt {
  display: grid;
  gap: 5px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.netdiag-run-prompt textarea {
  width: 100%;
  min-height: 82px;
  padding: 9px 10px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
  resize: vertical;
  text-transform: none;
}

.netdiag-run-grid label,
.netdiag-run-option-group {
  min-width: 0;
}

.netdiag-run-grid label {
  display: grid;
  gap: 5px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.netdiag-run-grid input:not([type="checkbox"]),
.netdiag-run-grid select {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: none;
}

.netdiag-run-grid input:not([type="checkbox"]):disabled {
  opacity: 0.55;
}

.netdiag-run-option-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft);
}

.netdiag-run-option-group legend {
  padding: 0 5px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.netdiag-run-option-group--pcap {
  grid-template-columns: 1fr;
}

.netdiag-run-grid--pcap {
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
}

.netdiag-run-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-transform: none;
}

.netdiag-run-check input {
  width: auto;
  min-height: auto;
  margin-top: 2px;
}

.netdiag-run-check strong {
  display: block;
  color: var(--clr-text);
  font-size: 0.84rem;
}

.netdiag-run-check small {
  display: block;
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.netdiag-run-note {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.netdiag-run-note--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 35%, var(--clr-border));
  background: var(--clr-warn-bg);
  color: var(--clr-text);
}

.netdiag-run-note--risk {
  border-color: color-mix(in srgb, var(--clr-risk) 40%, var(--clr-border));
  background: var(--clr-risk-bg);
  color: var(--clr-text);
  font-weight: 700;
}

.netdiag-run-advanced {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.netdiag-run-advanced > summary {
  padding: 8px 10px;
  cursor: pointer;
  color: var(--clr-text);
  font-size: 0.78rem;
  font-weight: 700;
}

.netdiag-run-advanced > .netdiag-run-grid {
  padding: 0 10px 10px;
}

.netdiag-run-modal-spacer {
  flex: 1 1 auto;
}

.netdiag-progress {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--clr-info) 28%, var(--clr-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-info-bg) 42%, var(--clr-surface));
}

.netdiag-progress--queued {
  border-color: color-mix(in srgb, var(--clr-muted) 26%, var(--clr-border));
  background: var(--clr-surface-soft);
}

.netdiag-progress--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 42%, var(--clr-border));
  background: var(--clr-warn-bg);
}

.netdiag-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.netdiag-progress-head strong {
  display: block;
  font-size: 0.9rem;
  color: var(--clr-text);
}

.netdiag-progress-percent {
  min-width: 46px;
  text-align: right;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.netdiag-progress-bar {
  height: 7px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--clr-border) 70%, transparent);
}

.netdiag-progress-bar span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--clr-info);
  transition: width 0.35s ease;
}

.netdiag-progress--queued .netdiag-progress-bar span { background: var(--clr-muted); }
.netdiag-progress--warn .netdiag-progress-bar span { background: var(--clr-warn); }

.netdiag-progress-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  margin: 0;
}

.netdiag-progress-facts div {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-surface) 72%, transparent);
}

.netdiag-progress-facts dt {
  margin: 0 0 2px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.netdiag-progress-facts dd {
  margin: 0;
  color: var(--clr-text);
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.netdiag-progress-warning {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--clr-warn) 38%, var(--clr-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-warn-bg) 72%, var(--clr-surface));
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.4;
}

.netdiag-progress-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.netdiag-progress-step {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  min-height: 46px;
  padding: 7px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.netdiag-progress-step-dot {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--clr-border-mid);
  background: var(--clr-surface);
}

.netdiag-progress-step strong {
  display: block;
  font-size: 0.78rem;
  line-height: 1.25;
}

.netdiag-progress-step small {
  display: block;
  margin-top: 1px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  line-height: 1.28;
}

.netdiag-progress-step--done .netdiag-progress-step-dot {
  border-color: var(--clr-ok);
  background: var(--clr-ok);
}

.netdiag-progress-step--active {
  border-color: color-mix(in srgb, var(--clr-info) 38%, var(--clr-border));
  background: color-mix(in srgb, var(--clr-info-bg) 52%, var(--clr-surface));
}

.netdiag-progress-step--active .netdiag-progress-step-dot {
  border-color: var(--clr-info);
  background: var(--clr-info);
}

.netdiag-progress-step--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 42%, var(--clr-border));
  background: var(--clr-warn-bg);
}

.netdiag-progress-step--warn .netdiag-progress-step-dot {
  border-color: var(--clr-warn);
  background: var(--clr-warn);
}

.netdiag-progress-step--skipped {
  opacity: 0.72;
  background: var(--clr-surface-soft);
}

.netdiag-progress-step--skipped .netdiag-progress-step-dot {
  border-style: dashed;
}

/* KPI-Kacheln */
.netdiag-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.netdiag-kpi {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.netdiag-kpi--risk { border-left-color: var(--clr-risk); background: var(--clr-risk-bg); }
.netdiag-kpi--warn { border-left-color: var(--clr-warn); background: var(--clr-warn-bg); }
.netdiag-kpi--ok   { border-left-color: var(--clr-ok); }
.netdiag-kpi span  { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-muted); }
.netdiag-kpi strong { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Kopf-Aktionen */
.netdiag-head-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* Kontext-Chips (kleinere Zusatzinfo) */
.netdiag-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

/* Aufklappbare Detail-Sektionen */
.netdiag-section-fold {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.netdiag-section-fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  background: var(--clr-surface-soft);
  list-style: none;
  user-select: none;
}
.netdiag-section-fold > summary::-webkit-details-marker { display: none; }
.netdiag-section-fold > summary::after { content: "▸"; margin-left: auto; font-size: 0.72rem; }
.netdiag-section-fold[open] > summary::after { content: "▾"; }
.netdiag-section-fold > table,
.netdiag-section-fold > p,
.netdiag-section-fold > ul {
  margin: 0;
  padding: 8px 12px;
}
.netdiag-section-fold > table { padding: 0; }

.netdiag-detail-sections {
  display: grid;
  gap: 6px;
}
.netdiag-detail-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
@media (max-width: 700px) {
  .netdiag-detail-pair { grid-template-columns: 1fr; }
}

.netdiag-fold-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 5px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: var(--clr-border);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.netdiag-fold-count--risk { background: var(--clr-risk-bg); color: var(--clr-risk); }
.netdiag-fold-count--warn { background: var(--clr-warn-bg); color: var(--clr-warn); }

/* Anomalie-Liste mit Drilldown */
.netdiag-anomaly-list {
  list-style: none;
  padding: 8px 12px;
  margin: 0;
  display: grid;
  gap: 6px;
}
.netdiag-anomaly {
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  background: var(--clr-surface);
}
.netdiag-anomaly--risk { border-left-color: var(--clr-risk); background: var(--clr-risk-bg); }
.netdiag-anomaly--warn { border-left-color: var(--clr-warn); background: var(--clr-warn-bg); }
.netdiag-anomaly-head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.netdiag-anomaly-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.netdiag-anomaly-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.netdiag-anomaly-cat {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted);
}
.netdiag-anomaly-title { font-size: 0.84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.netdiag-anomaly-toggle {
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.netdiag-anomaly-detail {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--clr-border);
  font-size: 0.84rem;
  display: grid;
  gap: 6px;
}
.netdiag-anomaly-detail p { margin: 0; line-height: 1.45; }
.netdiag-evidence pre {
  margin: 4px 0 0;
  padding: 8px;
  background: var(--clr-surface-alt);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.netdiag-hosts code { font-size: 0.78rem; background: var(--clr-surface-alt); padding: 1px 5px; border-radius: 3px; }
.netdiag-steps { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 3px; }
.netdiag-steps li { font-size: 0.84rem; line-height: 1.4; }
.netdiag-no-anomalies { padding: 8px 12px; }
.netdiag-log-preview { margin-top: 6px; }
.netdiag-log-preview code { display: block; padding: 8px; background: var(--clr-surface-alt); border-radius: var(--radius-sm); font-size: 0.72rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow-y: auto; }
.netdiag-ipam-list { list-style: none; padding: 4px 0 0; margin: 0; display: grid; gap: 4px; }
.netdiag-ipam-finding { font-size: 0.78rem; padding: 3px 8px; border-left: 2px solid var(--clr-border); border-radius: var(--radius-sm); }
.netdiag-ipam-finding--warn { border-left-color: var(--clr-warn); background: var(--clr-warn-bg); }
.netdiag-ipam-finding--risk { border-left-color: var(--clr-risk); background: var(--clr-risk-bg); }

.netdiag-strip {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.netdiag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.netdiag-chip strong {
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}

.netdiag-chip--risk {
  border-color: color-mix(in srgb, var(--clr-risk) 36%, var(--clr-border));
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.netdiag-chip--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 36%, var(--clr-border));
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.netdiag-spacer {
  flex: 1 1 12px;
}

.netdiag-ai-btn {
  min-height: 28px;
}

.netdiag-anomalies {
  min-width: 720px;
}

.netdiag-anomaly--risk {
  background: color-mix(in srgb, var(--clr-risk-bg) 64%, transparent);
}

.netdiag-anomaly--warn {
  background: color-mix(in srgb, var(--clr-warn-bg) 64%, transparent);
}

.netdiag-ai-result {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.netdiag-ai-result[hidden] { display: none; }

/* Report-Ansicht nach KI-Analyse */
.netdiag-report {
  display: grid;
  gap: 10px;
}

.netdiag-fazit-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.netdiag-fazit {
  margin: 0;
  padding: 8px 12px;
  background: var(--clr-surface-alt);
  border-left: 2px solid var(--clr-info);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--clr-text);
}

.netdiag-report-meta {
  padding-left: 15px;
}

.netdiag-ai-advice {
  display: grid;
  gap: 0;
  color: var(--clr-text);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.netdiag-ai-advice > * { margin: 0; }

.netdiag-ai-advice h4,
.netdiag-ai-advice h5 {
  margin: 14px 0 4px;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--clr-primary, var(--b-500));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-primary, var(--b-500));
}

.netdiag-ai-advice h4:first-child,
.netdiag-ai-advice h5:first-child {
  margin-top: 0;
}

.netdiag-ai-advice p {
  margin: 0 0 4px;
  font-size: 0.84rem;
  line-height: 1.55;
}

.netdiag-ai-advice ul,
.netdiag-ai-advice ol {
  margin: 2px 0 6px;
  padding-left: 18px;
}

.netdiag-ai-advice li {
  font-size: 0.84rem;
  line-height: 1.5;
  margin-bottom: 2px;
}

.netdiag-ai-advice code {
  padding: 1px 4px;
  background: var(--clr-subtle);
  border-radius: 3px;
  font-size: 0.82em;
}

.netdiag-evidence { display: grid; gap: 4px; }
.netdiag-evidence-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

/* History-Tabelle */
.netdiag-run-row { cursor: pointer; }
.netdiag-run-row:hover { background: var(--clr-surface-soft); }
.netdiag-run-row--active { background: var(--clr-info-bg) !important; font-weight: 600; }
.netdiag-run-row--active td { border-bottom-color: color-mix(in srgb, var(--clr-primary) 25%, transparent); }

/* Probe-Heatmap */
.netdiag-hm-scroll { overflow-x: auto; }
.netdiag-heatmap { border-collapse: collapse; font-size: 0.72rem; }
.netdiag-hm-target { padding: 3px 10px 3px 0; text-align: left; font-weight: 700; white-space: nowrap; }
.netdiag-hm-col { padding: 3px 4px; color: var(--clr-muted); min-width: 54px; text-align: center; }
.netdiag-hm-cell {
  padding: 4px 6px;
  text-align: center;
  border-radius: var(--radius-sm);
  min-width: 54px;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 700;
}
.netdiag-hm-cell--ok     { background: var(--clr-ok-bg, var(--g-100)); color: var(--g-600); }
.netdiag-hm-cell--warn   { background: var(--clr-warn-bg); color: var(--a-500); }
.netdiag-hm-cell--risk   { background: var(--clr-risk-bg); color: var(--r-700); }
.netdiag-hm-cell--empty  { background: var(--clr-surface-soft); color: var(--clr-muted); }
.netdiag-heatmap-panel { overflow-x: auto; }

/* Empty-State CLI-Hinweis */
.netdiag-empty-body { padding: 8px 0; }
.netdiag-cli-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--clr-surface-soft);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
}
.netdiag-cli-hint code {
  flex: 1;
  font-size: 0.84rem;
  word-break: break-all;
}

.netdiag-history-panel,
.netdiag-pcap-panel {
  overflow-x: auto;
}

.netdiag-run-table {
  min-width: 860px;
}

.netdiag-pcap-panel code,
.netdiag-run-table code {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .netdiag-card {
    padding: 10px;
  }
  .netdiag-run-grid,
  .netdiag-run-grid--pcap,
  .netdiag-run-option-group {
    grid-template-columns: 1fr;
  }
  .netdiag-strip {
    align-items: stretch;
  }
  .netdiag-chip,
  .netdiag-ai-btn {
    flex: 1 1 140px;
    justify-content: center;
  }
  .netdiag-spacer {
    display: none;
  }
}

.agent-hw-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 720px) {
  .agent-status-header { flex-direction: column; align-items: stretch; }
  .agent-status-metrics { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }
  .agent-overview-grid--two { grid-template-columns: 1fr; }
}

.agent-live-card,
.agent-health-card,
.agent-overview-panel {
  border-radius: var(--radius-sm);
}

.agent-overview-panel {
  min-height: 94px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--n-300);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}

.agent-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.agent-overview-head strong {
  color: var(--clr-text);
}

.agent-overview-head span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: right;
}

.agent-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.agent-detail-list div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.agent-detail-list dt {
  margin: 0 0 3px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.agent-detail-list dd {
  margin: 0;
  color: var(--clr-text);
  font-size: 0.84rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.incident-kachel {
  min-height: 94px;
  display: grid;
  align-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  user-select: none;
  transition: box-shadow var(--t-base), border-color var(--t-base);
}

.incident-kachel:hover { box-shadow: var(--shadow-sm); }
.incident-kachel:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }

.incident-kachel--risk {
  border-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.incident-kachel--info {
  border-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.incident-kachel--ok {
  border-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

.incident-kachel-count {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--clr-text);
}

.incident-kachel--risk .incident-kachel-count { color: var(--clr-risk); }
.incident-kachel--info .incident-kachel-count { color: var(--clr-warn); }
.incident-kachel--ok  .incident-kachel-count { color: var(--clr-ok); }

/* ═══════════════════════════════════════════════════════════
   Incident Bulk-Toolbar
   ═══════════════════════════════════════════════════════════ */

.incident-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--clr-info-bg);
  border: 1px solid var(--clr-primary);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}


.bulk-selection-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-primary);
  flex: 1;
}

.incident-cb-cell {
  width: 32px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   Log-Viewer Auto-Scroll Header
   ═══════════════════════════════════════════════════════════ */

.logviewer-scroll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--clr-surface-alt);
  border-bottom: 1px solid var(--clr-border);
  font-size: 0.72rem;
  grid-column: 3;
  grid-row: 1;
}

.logviewer-count {
  color: var(--clr-muted);
  font-weight: 600;
}

.logviewer-autoscroll-label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-weight: 700;
  color: var(--clr-primary);
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   SNMP Scan Progress Bar
   ═══════════════════════════════════════════════════════════ */

.snmp-progress-wrap {
  margin-top: 10px;
  display: grid;
  gap: 4px;
}

.snmp-progress-track {
  height: 6px;
  background: var(--clr-border);
  border-radius: 3px;
  overflow: hidden;
}

.snmp-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--clr-primary);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.snmp-progress-label {
  font-size: 0.72rem;
  color: var(--clr-muted);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   Tabellen – Zebra, Hover, clickable-row
   ═══════════════════════════════════════════════════════════ */

.data-table tbody tr:nth-child(even) td {
  background: var(--clr-surface-alt);
}

.data-table tbody tr:hover td {
  background: var(--clr-info-bg) !important;
}

.clickable-row { cursor: pointer; }
.clickable-table tbody tr { cursor: pointer; }

.empty-cell {
  color: var(--clr-xmuted);
  padding: 10px 7px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   Agent Hardware Dashboard Panels
   ═══════════════════════════════════════════════════════════ */

.agent-hw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.agent-hw-panel {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.agent-hw-details {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
}

.agent-hw-details > summary {
  list-style: none;
}

.agent-hw-details > summary::-webkit-details-marker {
  display: none;
}

.agent-hw-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.agent-hw-summary-count {
  flex-shrink: 0;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.agent-hw-summary-text {
  min-width: 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-hw-details[open] .agent-hw-summary {
  margin-bottom: 2px;
}

.agent-hw-table-wrap {
  min-width: 0;
  overflow-x: auto;
}

.agent-hw-head {
  padding: 7px 12px;
  background: var(--n-900);
  color: rgba(255,255,255,0.85);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--clr-nav);
}

.agent-hw-empty {
  color: var(--clr-xmuted);
  font-size: 0.72rem;
  text-align: center;
  padding: 12px !important;
}

.agent-hw-mac {
  font-family: "Cascadia Code", "Fira Code", ui-monospace, monospace;
  font-size: 0.66rem;
  color: var(--clr-muted);
}

.agent-disk-bar {
  display: inline-block;
  width: 80px;
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--clr-border);
  overflow: hidden;
  vertical-align: middle;
  margin-right: 6px;
}

.agent-disk-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.3s ease;
}

.agent-disk-pct {
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .agent-overview-grid {
    grid-template-columns: 1fr;
  }

  .agent-hw-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Security / Detection Alerts ─────────────────────────────────────────── */

.security-section {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1400px;
}

.security-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.security-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.security-kpi-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.sec-kpi-critical { border-top: 2px solid var(--r-500); }
.sec-kpi-error    { border-top: 2px solid var(--a-500); }
.sec-kpi-warning  { border-top: 2px solid var(--a-500); }
.sec-kpi-info     { border-top: 2px solid var(--b-600); }
.sec-kpi-total    { border-top: 2px solid var(--n-800); }

.security-alerts-wrap {
  overflow-x: auto;
}

.security-alerts-table .alert-title-cell {
  max-width: 340px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.security-alerts-table .mitre-cell {
  font-size: 0.72rem;
  font-family: monospace;
}

.sev-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

.sev-critical { background: var(--r-50); color: var(--r-700); border: 1px solid var(--r-200); }
.sev-error    { background: var(--a-50); color: var(--r-700); border: 1px solid var(--a-500); }
.sev-warning  { background: var(--a-50); color: var(--a-600); border: 1px solid var(--a-500); }
.sev-info     { background: var(--b-100); color: var(--b-700); border: 1px solid var(--b-500); }
.sev-debug    { background: var(--n-50); color: var(--n-800); border: 1px solid var(--n-300); }

.alert-status-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: lowercase;
}

.status-open         { background: var(--r-100); color: var(--r-700); }
.status-acknowledged { background: var(--a-50); color: var(--a-500); }
.status-resolved     { background: var(--g-50); color: var(--g-600); }
.status-suppressed   { background: var(--n-50); color: var(--n-600); }

.security-alert-detail {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  position: relative;
}

.security-alert-detail.hidden { display: none; }

.alert-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.alert-detail-header strong {
  flex: 1;
  font-size: 1rem;
}

.alert-detail-header #sec-detail-close {
  margin-left: auto;
}

.alert-detail-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  margin-bottom: 20px;
}

.alert-detail-grid dt {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: start;
  padding-top: 1px;
}

.alert-detail-grid dd {
  margin: 0;
  font-size: 0.9rem;
  word-break: break-word;
}

.alert-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.muted-small {
  font-size: 0.72rem;
  color: var(--n-500);
}

/* ── Device Log Viewer (improved) ───────────────────────────────────────── */
/* ================================================================
   LOG VIEW — Device Log Tab
   ================================================================ */

.device-log-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.device-log-layout {
  display: grid;
  grid-template-columns: minmax(286px, 318px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar */
.device-log-sidebar {
  background: var(--n-900);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  border-right: 1px solid var(--n-900);
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--n-800) transparent;
}

.device-log-sidebar::-webkit-scrollbar { width: 4px; }
.device-log-sidebar::-webkit-scrollbar-track { background: transparent; }
.device-log-sidebar::-webkit-scrollbar-thumb { background: var(--n-800); border-radius: var(--radius-sm); }

.devlog-sidebar-section {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}

.devlog-sidebar-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n-500);
  padding: 10px 14px 5px;
}

.devlog-sidebar-group-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-500);
  padding: 14px 14px 4px;
  border-top: 1px solid var(--n-900);
  margin-top: 4px;
}
.devlog-sidebar-group-label:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 10px;
}

.devlog-stream-group-label {
  display: block;
  margin: 10px 10px 4px;
  padding: 6px 8px 5px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.045);
  color: var(--n-400);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0;
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(6px);
}

.devlog-source-btn,
.devlog-stream-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--n-400);
  transition: background 0.12s, color 0.12s;
  border-left: 2px solid transparent;
  min-height: 42px;
}

.devlog-source-btn:hover,
.devlog-stream-btn:hover {
  background: rgba(255,255,255,0.055);
  color: var(--b-200);
}

.devlog-source-btn.active,
.devlog-stream-btn.active {
  background: rgba(30,154,184,0.14);
  border-left-color: var(--b-600);
  color: var(--b-100);
}

.devlog-stream-btn.has-critical {
  border-left-color: var(--r-500);
}
.devlog-stream-btn.has-critical:not(.active) {
  color: var(--r-500);
}

.devlog-source-icon,
.devlog-stream-icon {
  font-size: 1rem;
  opacity: 0.6;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.devlog-source-btn.active .devlog-source-icon,
.devlog-stream-btn.active .devlog-stream-icon {
  opacity: 0.9;
}

.devlog-source-info,
.devlog-stream-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.devlog-source-info strong,
.devlog-stream-info strong {
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.devlog-source-info small,
.devlog-stream-info small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--n-600);
  line-height: 1.25;
  min-width: 0;
}

.devlog-stream-info small span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devlog-stream-info small b {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.075);
  color: var(--n-400);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
}

.devlog-stream-meta--count-only {
  justify-content: flex-end;
}

.devlog-stream-btn.active .devlog-stream-info small {
  color: var(--b-500);
}

.devlog-stream-icon--blank {
  opacity: 0.25;
}

/* Main content area */
.device-log-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--b-50) 0%, var(--n-25) 100%);
}

.devlog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--clr-border);
  flex-wrap: wrap;
}

.devlog-header-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.devlog-header-title .eyebrow {
  margin: 0;
  font-size: 0.66rem;
}

.devlog-header-title h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--clr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devlog-main-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: transparent;
  border-bottom: 1px solid var(--clr-border);
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-bottom: 0;
}

.devlog-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.devlog-search-wrap input[type="search"] {
  width: 100%;
  padding: 6px 12px 6px 32px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  background: var(--n-0);
  color: var(--n-900);
  line-height: 1.4;
}
.devlog-search-wrap::before {
  content: "⌕";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--n-400);
  font-size: 1rem;
  pointer-events: none;
}

.devlog-search-wrap input:focus {
  outline: none;
  border-color: var(--b-600);
  box-shadow: 0 0 0 2px rgba(30,154,184,0.18);
}

.devlog-sev-filter {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.devlog-sev-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-lg);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--n-0);
  color: var(--n-700);
  transition: all 0.1s;
  min-height: 28px;
}

.devlog-sev-pill:hover { background: var(--n-50); border-color: var(--n-400); }
.devlog-sev-pill.active { background: var(--n-800); color: var(--n-0); border-color: var(--n-800); }
.devlog-sev-pill.sev-critical { box-shadow: inset 3px 0 0 var(--r-600); }
.devlog-sev-pill.sev-critical.active { background: var(--r-600); color: var(--n-0); border-color: var(--r-600); box-shadow: none; }
.devlog-sev-pill.sev-error { box-shadow: inset 3px 0 0 var(--a-500); }
.devlog-sev-pill.sev-error.active { background: var(--a-500); color: var(--n-0); border-color: var(--a-500); box-shadow: none; }
.devlog-sev-pill.sev-warning { box-shadow: inset 3px 0 0 var(--a-500); }
.devlog-sev-pill.sev-warning.active { background: var(--a-500); color: var(--n-0); border-color: var(--a-500); box-shadow: none; }
.devlog-sev-pill.sev-info { box-shadow: inset 3px 0 0 var(--n-500); }
.devlog-sev-pill.sev-info.active { background: var(--n-500); color: var(--n-0); border-color: var(--n-500); box-shadow: none; }
.devlog-sev-pill span {
  font-size: 0.66rem;
  font-weight: 600;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.06);
  color: inherit;
}
.devlog-sev-pill.active span { background: rgba(255,255,255,0.18); }

.devlog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  flex-wrap: wrap;
}

.devlog-count {
  font-size: 0.78rem;
  color: var(--n-500);
  white-space: nowrap;
  font-weight: 600;
}

/* Table */
.devlog-table-wrap {
  flex: 1;
  overflow: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--n-300) transparent;
}

.devlog-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

.devlog-table th {
  position: sticky;
  top: 0;
  background: var(--n-50);
  z-index: 2;
  padding: 8px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--n-700);
  white-space: nowrap;
  border-bottom: 2px solid var(--n-300);
  user-select: none;
}

.devlog-table tbody tr {
  border-bottom: 1px solid var(--n-50);
  transition: background 0.08s;
}
.devlog-table tbody tr:hover {
  background: var(--b-50);
}

.devlog-table td {
  padding: 8px 10px;
  font-size: 0.84rem;
  vertical-align: top;
  line-height: 1.35;
}

.devlog-time {
  white-space: nowrap;
  font-size: 0.78rem;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-variant-numeric: tabular-nums;
  color: var(--n-500);
  min-width: 118px;
  letter-spacing: -0.01em;
}

.devlog-sev-col {
  white-space: nowrap;
  width: 80px;
}

.devlog-prog {
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.84rem;
  color: var(--n-800);
}

.devlog-host {
  white-space: nowrap;
  font-size: 0.84rem;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--n-800);
}

.devlog-msg {
  word-break: break-word;
  min-width: 200px;
  color: var(--n-900);
  font-size: 0.84rem;
  line-height: 1.45;
}

.devlog-msg--long {
  cursor: pointer;
  max-height: 2.9em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.devlog-msg--long::after {
  content: " ▸";
  color: var(--b-600);
  font-size: 0.72rem;
  font-weight: 700;
}

.devlog-msg--long.expanded {
  background: var(--a-50);
  max-height: none;
  -webkit-line-clamp: unset;
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
}
.devlog-msg--long.expanded::after { display: none; }

.devlog-code-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-weight: 600;
  background: var(--n-50);
  color: var(--n-800);
  white-space: nowrap;
  cursor: default;
  letter-spacing: -0.01em;
}

.devlog-code-pill--known {
  background: var(--b-100);
  color: var(--b-700);
  cursor: help;
  border: 1px solid var(--b-200);
}

/* Severity row coloring — left stripe only, no fill (calmer). */
.sev-row-critical { box-shadow: inset 3px 0 0 var(--r-600); }
.sev-row-error    { box-shadow: inset 3px 0 0 var(--a-500); }
.sev-row-warning  { box-shadow: inset 3px 0 0 var(--a-500); }
.sev-row-info     { box-shadow: inset 3px 0 0 var(--n-300); }

.devlog-table mark {
  background: var(--a-500);
  padding: 0 2px;
  border-radius: 2px;
  color: inherit;
}

/* Pager */
.devlog-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  font-size: 0.84rem;
  color: var(--n-700);
  flex-shrink: 0;
  gap: 8px;
  flex-wrap: wrap;
}

/* Event detail panel */
.devlog-event-detail {
  border: 1px solid var(--n-300);
  background: linear-gradient(180deg, var(--b-50) 0%, var(--b-50) 100%);
  max-height: 300px;
  overflow-y: auto;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.devlog-event-detail.hidden { display: none; }

.devlog-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(30,154,184,0.08);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--b-700);
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--n-300);
}

.devlog-detail-close {
  min-height: 28px;
  padding: 0 12px;
  background: var(--n-0);
  color: var(--b-700);
  font-size: 0.78rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--b-500);
}
.devlog-detail-close:hover { background: var(--b-50); }

.devlog-detail-header-copy {
  display: grid;
  gap: 2px;
}

.devlog-detail-header-copy span {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--n-500);
}

.devlog-detail-header-copy strong {
  font-size: 0.9rem;
  color: var(--b-700);
}

.devlog-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 0;
}

.devlog-detail-meta span {
  display: inline-grid;
  gap: 2px;
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-md);
  background: var(--n-0);
  color: var(--n-800);
  font-size: 0.78rem;
  line-height: 1.3;
}

.devlog-detail-meta strong {
  color: var(--b-700);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.devlog-detail-body {
  margin: 0;
  padding: 12px 14px 14px;
  font-size: 0.84rem;
  font-family: ui-monospace, "Cascadia Code", monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--n-900);
  line-height: 1.6;
}

/* View-toggle for Security section */
.sec-view-toggle {
  display: flex;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.sec-view-btn {
  padding: 5px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  border: none;
  background: var(--n-0);
  cursor: pointer;
  color: var(--n-600);
  transition: background 0.1s, color 0.1s;
}

.sec-view-btn + .sec-view-btn {
  border-left: 1px solid var(--n-300);
}

.sec-view-btn.active {
  background: var(--n-900);
  color: var(--n-0);
}

.security-incidents-wrap {
  overflow-x: auto;
}

@media (max-width: 900px) {
  .device-log-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .devlog-header {
    flex-direction: column;
    align-items: stretch;
  }
  .device-log-sidebar {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--n-900);
  }
  .devlog-sidebar-section {
    flex-direction: row;
    padding-top: 0;
  }
  .devlog-sidebar-label { display: none; }
  .devlog-main-toolbar,
  .devlog-pager,
  .devlog-event-detail {
    border-radius: var(--radius-md);
  }
  .devlog-main-toolbar {
    align-items: stretch;
  }
  .devlog-search-wrap {
    min-width: 100%;
  }
  .devlog-meta {
    margin-left: 0;
  }
}

.incident-count-badge {
  display: inline-block;
  background: var(--n-800);
  color: var(--n-0);
  border-radius: var(--radius-md);
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}

.incident-row {
  cursor: pointer;
}

.incident-row:hover td {
  background: var(--b-50);
}

/* MITRE ATT&CK cards */
.mitre-section { padding: 16px; }
.mitre-section h3 { font-size: 0.9rem; color: var(--clr-muted); margin-bottom: 16px; }
.attack-map { display: flex; flex-wrap: wrap; gap: 10px; }
.mitre-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-width: 160px;
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mitre-card--risk { border-color: var(--clr-risk); background: color-mix(in srgb, var(--clr-risk) 8%, var(--clr-card)); }
.mitre-card--warn { border-color: var(--clr-warn); }
.mitre-card-tactic { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-muted); }
.mitre-card-technique { font-size: 1rem; font-weight: 700; }
.mitre-card-technique a { color: inherit; text-decoration: none; }
.mitre-card-technique a:hover { text-decoration: underline; }
.mitre-card-count { font-size: 0.72rem; color: var(--clr-muted); }
.mitre-card-signals { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.mitre-signal-dot { color: var(--clr-accent); font-size: 0.6rem; cursor: default; }
.mitre-signal-more { font-size: 0.72rem; color: var(--clr-muted); }

/* CVSS badge */
.cvss-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 0.72rem; font-weight: 700; }
.cvss-critical { background: var(--clr-risk); color: var(--n-0); }
.cvss-high { background: var(--a-500); color: var(--n-0); }
.cvss-medium { background: var(--clr-warn); color: var(--n-900); }
.cvss-low { background: var(--clr-ok); color: var(--n-0); }

/* Advisory expand */
.advisory-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--clr-accent);
  color: var(--clr-accent);
  font-size: 0.66rem;
  font-weight: 700;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}
.advisory-expand-btn:hover { background: var(--clr-accent); color: var(--n-0); }
.advisory-short { font-size: 0.78rem; color: var(--clr-muted); }

/* Vuln KPI bar buttons */
.vuln-kpi-bar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.vuln-kpi {
  flex: 1 1 100px;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}
.vuln-kpi:hover, .vuln-kpi.active { border-color: var(--clr-accent); }
.vuln-kpi--risk { border-color: var(--clr-risk); }
.vuln-kpi--warn { border-color: var(--clr-warn); }
.vuln-kpi span { display: block; font-size: 0.72rem; color: var(--clr-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.vuln-kpi strong { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.2; }

.vuln-source-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.vuln-source-panel .eyebrow {
  margin-bottom: 8px;
}

.vuln-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vuln-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.vuln-source-chip.active {
  border-color: var(--clr-info);
  background: var(--clr-info-bg);
  color: var(--clr-info);
}

.vuln-source-chip.planned {
  border-style: dashed;
}

.vuln-source-chip strong {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.vuln-res-badge,
.confidence-badge,
.epss-badge,
.kev-badge,
.freshness-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.vuln-res-confirmed {
  border-color: var(--clr-ok);
  color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

.vuln-res-nvd {
  border-color: var(--clr-info);
  color: var(--clr-info);
  background: var(--clr-info-bg);
}

.vuln-res-update,
.confidence-mid,
.epss-mid {
  border-color: var(--clr-warn);
  color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.confidence-high,
.epss-high {
  border-color: var(--clr-ok);
  color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

.confidence-low,
.epss-low,
.freshness-badge {
  border-color: var(--clr-border-mid);
  color: var(--clr-muted);
  background: var(--clr-surface-alt);
}

.kev-badge--hit {
  border-color: var(--clr-risk);
  color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.kev-badge--none,
.confidence-none,
.epss-none,
.freshness-none,
.vuln-res-none {
  color: var(--clr-xmuted);
  background: var(--clr-surface-alt);
}

.security-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.security-signal-card {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.security-signal-card span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.security-signal-card strong {
  color: var(--clr-text);
  font-size: 1.45rem;
  line-height: 1.1;
}

.security-signal-card small {
  color: var(--clr-muted);
  font-weight: 700;
}

.security-signal-card--risk {
  border-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.security-signal-card--risk strong {
  color: var(--clr-risk);
}

/* AV/EDR Schutzfunktionen-Checkliste */
.av-check-list { display: flex; flex-direction: column; }
.av-check-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--clr-border);
  font-size: 0.84rem;
}
.av-check-item:last-child { border-bottom: 0; }
.av-check-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-border-mid);
  margin-top: 3px;
}
.av-check-item--ok   .av-check-dot { background: var(--clr-ok); }
.av-check-item--warn .av-check-dot { background: var(--clr-warn); }
.av-check-item--risk .av-check-dot { background: var(--clr-risk); }
.av-check-label { font-weight: 600; white-space: nowrap; }
.av-check-detail {
  color: var(--clr-muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.av-check-item--risk .av-check-label { color: var(--clr-risk); }
.av-check-item--warn .av-check-label { color: var(--clr-warn); }

/* AV/EDR alert banner */
.av-alert {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  line-height: 1.45;
}
.av-alert--risk { background: var(--clr-risk-bg); box-shadow: inset 3px 0 0 var(--clr-risk); }
.av-alert--warn { background: var(--clr-warn-bg); box-shadow: inset 3px 0 0 var(--clr-warn); }
.av-alert strong { display: block; margin-bottom: 2px; }

/* Kill Chain hunt rail */
.hunt-row--chain { background: color-mix(in srgb, var(--clr-risk) 6%, transparent); }

/* ============================================================
   Customer logviewer table — readability tuning
   ============================================================ */
.logviewer-scroll .logviewer-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--n-900);
  box-shadow: 0 1px 0 var(--n-900);
}

.logviewer-scroll .logviewer-table .logv-cell {
  padding: 4px 10px;
  vertical-align: top;
}

.logviewer-scroll .logviewer-table .logv-cell--time {
  white-space: nowrap;
  color: var(--n-400);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
}

.logviewer-scroll .logviewer-table .logv-cell--host {
  white-space: nowrap;
  color: var(--n-400);
}

.logviewer-scroll .logviewer-table .logv-cell--sev {
  white-space: nowrap;
}

.logviewer-scroll .logviewer-table .logv-cell--msg {
  color: var(--n-200);
  white-space: pre-wrap;
  word-break: break-word;
}

.logviewer-scroll .logviewer-table mark {
  background: var(--a-500);
  color: var(--n-900);
  padding: 0 2px;
  border-radius: 2px;
}

/* Severity row stripes (dark theme) */
.logviewer-scroll .logviewer-table tbody tr.logv-row--critical td {
  box-shadow: inset 3px 0 0 var(--r-500);
  background: var(--r-700) !important;
}
.logviewer-scroll .logviewer-table tbody tr.logv-row--error td {
  box-shadow: inset 3px 0 0 var(--a-500);
  background: var(--a-700) !important;
}
.logviewer-scroll .logviewer-table tbody tr.logv-row--warning td {
  box-shadow: inset 3px 0 0 var(--a-500);
  background: var(--a-700) !important;
}
.logviewer-scroll .logviewer-table tbody tr.logv-row--info td {
  box-shadow: inset 3px 0 0 var(--b-500);
}
.logviewer-scroll .logviewer-table tbody tr.logv-row--debug td {
  color: var(--n-400);
}

.logviewer-scroll .logviewer-table tbody tr:hover td {
  background: var(--n-900) !important;
}

/* ============================================================
   Slice C: keyboard help overlay, tail-toggle, timezone label, j/k row
   ============================================================ */

/* Timezone label + help button in user menu */
.timezone-pill,
.user-menu #kbd-help {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

.user-menu #kbd-help:hover {
  border-color: var(--clr-border-mid);
  background: var(--clr-subtle);
  color: var(--clr-text);
}

.timezone-pill {
  padding: 0 9px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.user-menu #kbd-help {
  min-width: 34px;
  padding: 0 8px;
  font-size: 0.78rem;
}

/* Active row highlight for j/k navigation */
.content-body .row-active,
.content-body .row-active > td {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--clr-primary) 12%, transparent) !important;
}

/* Keyboard help overlay */
.kbd-help-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 16, 24, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}
.kbd-help-card {
  background: var(--clr-surface, var(--n-0));
  color: var(--clr-text, var(--n-900));
  border: 1px solid var(--clr-border, var(--n-300));
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  min-width: 360px;
  max-width: 520px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}
.kbd-help-card header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.kbd-help-card h3 { margin: 0; font-size: 1rem; }
.kbd-help-close {
  border: none; background: transparent; font-size: 1.45rem; cursor: pointer;
  color: var(--clr-muted, var(--n-500));
  line-height: 1;
}
.kbd-help-close:hover { color: var(--clr-text, var(--n-900)); }
.kbd-help-card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 0.84rem;
}
.kbd-help-card dt { white-space: nowrap; }
.kbd-help-card kbd {
  font-family: "Cascadia Code", "Fira Code", ui-monospace, monospace;
  font-size: 0.78rem;
  padding: 1px 6px;
  border: 1px solid var(--clr-border, var(--n-400));
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--n-25);
  color: var(--n-900);
}
.kbd-help-card dd { margin: 0; color: var(--clr-muted, var(--n-700)); }

/* Tail toggle (devlog) */
.devlog-tail-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border, var(--n-400));
  background: var(--clr-surface, var(--n-0));
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.devlog-tail-toggle .tail-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--n-400);
}
.devlog-tail-toggle[data-tail-state="live"] {
  border-color: var(--g-500);
  color: var(--g-600);
  background: var(--g-50);
}
.devlog-tail-toggle[data-tail-state="live"] .tail-dot {
  background: var(--g-500);
  box-shadow: 0 0 0 0 rgba(31,157,85,0.6);
}
.devlog-tail-toggle[data-tail-state="paused"] {
  border-color: var(--a-500);
  color: var(--a-600);
  background: var(--a-50);
}
@media (prefers-reduced-motion: reduce) {
  .devlog-tail-toggle[data-tail-state="live"] .tail-dot { animation: none; }
}

/* ============================================================
   Dashboard Severity Strip
   ============================================================ */
.severity-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}
.severity-strip .sev-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border, var(--n-300));
  background: var(--clr-surface, var(--n-0));
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.severity-strip .sev-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.severity-strip .sev-stat:focus-visible {
  outline: 2px solid var(--clr-primary, var(--b-500));
  outline-offset: 2px;
}
.severity-strip .sev-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted, var(--n-700));
  font-weight: 600;
}
.severity-strip .sev-stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.severity-strip .sev-stat--critical { border-left: 2px solid var(--r-600); }
.severity-strip .sev-stat--critical .sev-stat-value { color: var(--r-600); }
.severity-strip .sev-stat--error    { border-left: 2px solid var(--a-500); }
.severity-strip .sev-stat--error    .sev-stat-value { color: var(--a-500); }
.severity-strip .sev-stat--warning  { border-left: 2px solid var(--a-500); }
.severity-strip .sev-stat--warning  .sev-stat-value { color: var(--a-500); }
.severity-strip .sev-stat--info     { border-left: 2px solid var(--b-500); }
.severity-strip .sev-stat--info     .sev-stat-value { color: var(--b-500); }
.severity-strip .sev-stat--zero     { opacity: 0.55; }
.severity-strip .sev-stat--zero .sev-stat-value { color: var(--clr-muted, var(--n-400)); }
.severity-strip .sev-stat-meta {
  align-self: center;
  padding: 0 14px;
  font-size: 0.78rem;
  color: var(--clr-muted, var(--n-500));
}
.severity-strip .sev-stat-meta--alarm {
  color: var(--r-600);
  font-weight: 600;
}
.severity-strip .sev-stat--critical:has(.sev-stat-value:not(:empty)):not(.sev-stat--zero) {
}
@media (prefers-reduced-motion: reduce) {
  .severity-strip .sev-stat--critical { animation: none; }
}
@media (max-width: 900px) {
  .severity-strip { grid-template-columns: repeat(2, 1fr); }
  .severity-strip .sev-stat-meta { grid-column: 1 / -1; padding: 4px 0 0; }
}

/* sev-row stripes for any table — generic helpers */
tr.sev-row-critical > td { box-shadow: inset 3px 0 0 var(--r-600); }
tr.sev-row-error    > td { box-shadow: inset 3px 0 0 var(--a-500); }
tr.sev-row-warning  > td { box-shadow: inset 3px 0 0 var(--a-500); }
tr.sev-row-info     > td { box-shadow: inset 3px 0 0 var(--b-500); }

.sev-badge.sev-empty { background: var(--n-50); color: var(--n-700); border: 1px solid var(--n-300); }
.sev-badge.sev-ok    { background: var(--g-50); color: var(--g-600); border: 1px solid var(--g-200); }

/* Time/numeric cells: tabular nums + nowrap for tidy columns */
td.cell-time, .data-table td.cell-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--clr-muted, var(--n-500));
  font-size: 0.84rem;
}

/* ============================================================
   Tabellen-Lesbarkeits-Pass: ruhigerer Hover, sticky thead in
   scrollbaren Containern, einheitliche Zebra.
   ============================================================ */

/* .table-scroll wraps .data-table so it never overflows the layout.
   `--auto` is applied automatically via JS observer; explicit
   `.table-scroll` (no modifier) is what render code can use to opt into
   sticky-header + a tighter max-height. */
.table-scroll {
  overflow: auto;
  max-height: calc(100vh - 280px);
  min-width: 0;       /* allow shrinking inside grid/flex parents */
}
.table-scroll--auto {
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;   /* no clipping vertically — preserves page scroll */
  min-width: 0;
  /* tame the scrollbar visually so it doesn't feel like a leak */
  scrollbar-width: thin;
}
.table-scroll--auto::-webkit-scrollbar { height: 8px; }
.table-scroll--auto::-webkit-scrollbar-thumb {
  background: var(--clr-border-mid, var(--n-400));
  border-radius: var(--radius-sm);
}
.table-scroll .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--clr-surface, var(--n-0));
  box-shadow: inset 0 -1px 0 var(--clr-border, var(--n-300));
}

/* Generic cell-truncation helpers — opt-in per cell where long content
   is expected (agent names, process paths, hostnames). */
.cell-truncate {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-truncate--md { max-width: 180px; }
.cell-truncate--sm { max-width: 120px; }
.cell-truncate--lg { max-width: 320px; }

/* Sub-cell wrapper for cases where a <td> contains badges + text and we
   only want to truncate the text part. */
.cell-truncate > * {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Konsistenter Hover über alle data-tables */
.data-table tbody tr:hover > td {
  background: color-mix(in srgb, var(--clr-primary, var(--b-500)) 6%, transparent);
}

/* Subtiler Zebra (nur wenn .data-table--zebra explizit, sonst per-View entscheiden) */
.data-table--zebra tbody tr:nth-child(even) > td {
  background: color-mix(in srgb, var(--clr-text, var(--n-900)) 3%, transparent);
}

/* Klickbar-Indikation: cursor + leichter Affordance-Schatten beim Hover */
.data-table tbody tr.clickable-row { cursor: pointer; }
.data-table tbody tr.clickable-row:hover > td:first-child {
  box-shadow: inset 3px 0 0 var(--clr-primary, var(--b-500));
}

/* ──────────────────────────────────────────────────────────────────────
   Customer Cockpit — replaces the old viz-row / donut overview.
   Goal: show "what needs attention right now" first, KPIs as a single
   strip, drill-downs collapsed below.
   ────────────────────────────────────────────────────────────────────── */

.cust-cockpit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cust-cockpit-meta { min-width: 0; }
.cust-cockpit-meta .eyebrow { margin: 0 0 2px; }
.cust-cockpit-meta h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--clr-text);
}

.cust-cockpit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-summary-band {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
  margin-bottom: 10px;
}
.customer-summary-primary,
.customer-summary-fact {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
  cursor: pointer;
}
.customer-summary-primary {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 62px;
  padding: 8px 12px;
  border-left: 2px solid var(--clr-ok);
}
.customer-summary-primary--warn { border-left-color: var(--clr-warn); background: var(--clr-warn-bg); }
.customer-summary-primary--risk { border-left-color: var(--clr-risk); background: var(--clr-risk-bg); }
.customer-summary-primary--ok { border-left-color: var(--clr-ok); background: var(--clr-ok-bg); }
.customer-summary-primary span,
.customer-summary-fact span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.customer-summary-primary strong {
  font-size: 1.45rem;
  line-height: 1.05;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.customer-summary-primary small,
.customer-summary-fact small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}
.customer-summary-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.customer-summary-fact {
  display: grid;
  gap: 1px;
  align-content: center;
  min-width: 0;
  min-height: 58px;
  padding: 7px 10px;
}
.customer-summary-primary:hover,
.customer-summary-fact:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}
.customer-summary-fact strong {
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.customer-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 12px;
  align-items: start;
}
.customer-overview-layout .detail-panel {
  min-width: 0;
}
.customer-overview-secondary {
  margin-top: 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.customer-overview-secondary > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.customer-overview-secondary > summary::-webkit-details-marker { display: none; }
.customer-overview-secondary > summary span {
  color: var(--clr-text);
  font-weight: 700;
}
.customer-overview-secondary > summary small {
  color: var(--clr-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.customer-overview-secondary > .posture-domains,
.customer-overview-secondary > .cust-section {
  margin: 0 14px 12px;
}

/* Compact KPI strip — single row, monospace numbers, no decoration.
   Doubles as the customer-overview heading: KPIs left, last-heartbeat right. */
.cust-kpi-strip {
  display: flex;
  gap: 22px;
  margin: 0 0 14px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--clr-border);
  flex-wrap: wrap;
  align-items: baseline;
}
.cust-kpi-spacer { flex: 1; min-width: 0; }
.cust-kpi-meta dd {
  color: var(--clr-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
}
.cust-kpi-strip > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 60px;
}
.cust-kpi-strip dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin: 0;
}
.cust-kpi-strip dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.cust-kpi-strip dd strong {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.cust-kpi-strip dd span {
  color: var(--clr-xmuted);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
.cust-kpi-strip .kpi-bad  { color: var(--clr-risk); }
.cust-kpi-strip .kpi-warn { color: var(--clr-warn); }

/* Attention strip — only items with count>0 render; severity sets the stripe. */
.cust-attention {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.attn-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.attn-card:hover {
  background: var(--clr-surface-alt);
  border-color: var(--clr-border-mid);
}
.attn-card:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}
.attn-card .attn-num {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 2ch;
  color: var(--clr-text);
}
.attn-card .attn-label {
  font-size: 0.84rem;
  color: var(--clr-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attn-critical { box-shadow: inset 3px 0 0 var(--clr-risk); }
.attn-critical .attn-num { color: var(--clr-risk); }
.attn-warning  { box-shadow: inset 3px 0 0 var(--clr-warn); }
.attn-warning  .attn-num { color: var(--clr-warn); }
.attn-info     { box-shadow: inset 3px 0 0 var(--clr-info); }
.attn-info     .attn-num { color: var(--clr-info); }

/* Reassurance state when nothing is critical — single quiet line. */
.cust-allgood {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  box-shadow: inset 3px 0 0 var(--clr-ok);
  background: transparent;
}
.cust-allgood-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--clr-ok);
  color: var(--n-0);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.cust-allgood strong {
  color: var(--clr-text);
  font-size: 0.84rem;
  font-weight: 600;
}
.cust-allgood small {
  color: var(--clr-muted);
  font-size: 0.78rem;
  margin-left: 4px;
}

/* Drill-down sections — chrome-less, separated by a thin rule. */
.cust-section {
  margin: 0;
  border: none;
  border-top: 1px solid var(--clr-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.cust-section:first-of-type { border-top: none; }
.cust-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}
.cust-section > summary::-webkit-details-marker { display: none; }
.cust-section > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--clr-xmuted);
  transition: transform var(--t-fast);
  width: 0.8em;
  font-size: 0.84rem;
}
.cust-section[open] > summary::before { transform: rotate(90deg); }
.cust-section-title {
  font-weight: 600;
  color: var(--clr-text);
  font-size: 0.96rem;
  flex: 1;
}
.cust-section-meta {
  font-size: 0.78rem;
  color: var(--clr-muted);
  font-variant-numeric: tabular-nums;
}
.cust-section-body {
  padding: 4px 0 14px;
  border-top: none;
}

.cust-section-body--stack {
  display: grid;
  gap: 14px;
}

.cust-section--focus {
}


.cust-action-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr)) auto;
  align-items: stretch;
  gap: 10px;
}

.cust-action-summary article {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.cust-action-summary span {
  color: var(--clr-muted);
  font-size: 0.78rem;
}

.cust-action-summary strong {
  color: var(--clr-text);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.cust-action-summary .kpi-bad { color: var(--clr-risk); }
.cust-action-summary .kpi-warn { color: var(--clr-warn); }

.cust-action-summary .action-button {
  align-self: stretch;
  justify-content: center;
}

@media (max-width: 760px) {
  .customer-summary-band,
  .customer-overview-layout {
    grid-template-columns: 1fr;
  }

  .customer-summary-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cust-action-summary {
    grid-template-columns: 1fr 1fr;
  }

  .cust-action-summary .action-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .customer-summary-facts {
    grid-template-columns: 1fr;
  }
}

.job-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.job-kpi-strip article {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.job-kpi-strip span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.job-kpi-strip strong {
  font-size: 1.45rem;
  line-height: 1.1;
}

.job-kpi--risk {
  border-color: var(--clr-risk) !important;
  background: var(--clr-risk-bg) !important;
}

.job-kpi--risk strong {
  color: var(--clr-risk);
}

.job-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.job-status--ok {
  border-color: var(--clr-ok);
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.job-status--running {
  border-color: var(--clr-info);
  background: var(--clr-info-bg);
  color: var(--clr-info);
}

.job-status--failed,
.job-result-error {
  color: var(--clr-risk);
}

.job-status--failed {
  border-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.job-row--failed td {
  background: var(--clr-risk-bg);
}

.network-inventory-kpis {
  margin-top: 0;
}

.network-asset--warn td {
  background: var(--clr-warn-bg);
}

.asset-type-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.asset-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  min-height: 23px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.asset-type-pill > span {
  display: inline-grid;
  place-items: center;
  width: 14px;
  min-width: 14px;
  line-height: 1;
}

.asset-type-evidence,
.asset-type-raw {
  display: block;
  max-width: 210px;
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-type-pill--firewall { border-color: var(--a-200); background: var(--a-50); color: var(--r-600); }
.asset-type-pill--router,
.asset-type-pill--switch,
.asset-type-pill--accesspoint { border-color: var(--b-200); background: var(--b-50); color: var(--b-500); }
.asset-type-pill--server,
.asset-type-pill--hypervisor { border-color: var(--b-200); background: var(--b-50); color: var(--b-500); }
.asset-type-pill--client { border-color: var(--g-200); background: var(--g-50); color: var(--g-600); }
.asset-type-pill--storage { border-color: var(--b-200); background: var(--b-50); color: var(--b-700); }
.asset-type-pill--printer { border-color: var(--b-100); background: var(--b-50); color: var(--b-500); }
.asset-type-pill--management { border-color: var(--r-200); background: var(--r-50); color: var(--r-600); }
.asset-type-pill--voip { border-color: var(--r-200); background: var(--n-25); color: var(--r-600); }
.asset-type-pill--network,
.asset-type-pill--agent,
.asset-type-pill--unknown { border-color: var(--clr-border); background: var(--clr-surface-alt); color: var(--clr-muted); }

/* Endpoint mini-list inside the cockpit — clickable rows. */
.cust-endpoint-table tbody tr {
  cursor: pointer;
}
.cust-endpoint-table tbody tr:hover {
  background: var(--clr-surface-alt);
}

/* ── Insights tab header ──────────────────────────────────────────── */
.insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--clr-border);
  margin-bottom: 8px;
}
.insights-header--critical { border-left-color: var(--clr-risk); }
.insights-header--high     { border-left-color: var(--a-500); }
.insights-header--medium   { border-left-color: var(--clr-warn); }
.insights-header--info     { border-left-color: var(--clr-info); }
.insights-header--ok       { border-left-color: var(--clr-ok); }
.insights-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.insights-header-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--clr-muted);
  white-space: nowrap;
}
.insights-sev-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.insights-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.insights-header-meta {
  font-size: 0.72rem;
  color: var(--clr-muted);
  white-space: nowrap;
}

.analysis-panel {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}

.analysis-panel-head,
.analysis-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.analysis-job-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.analysis-panel-head {
  margin-bottom: 10px;
}

.analysis-panel h3,
.analysis-modal h2 {
  margin: 0;
  color: var(--clr-text);
}

.analysis-panel h3 {
  font-size: 1rem;
}

.analysis-job-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--clr-subtle);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.analysis-agent-list {
  display: grid;
  gap: 12px;
}

.analysis-agent-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.analysis-agent-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.analysis-agent-head strong,
.analysis-agent-head small {
  display: block;
}

.analysis-agent-head small,
.analysis-panel-head small {
  color: var(--clr-muted);
  font-size: 0.78rem;
}

.analysis-agent-card .analysis-job-card {
  padding: 10px;
  background: var(--clr-surface-alt);
  box-shadow: none;
}

/* In the device insights panel the card is already inside a bordered panel */
.analysis-panel > .analysis-job-card {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.analysis-overview-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}

.analysis-overview-strip span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.analysis-overview-strip strong,
.analysis-overview-strip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-overview-strip strong {
  color: var(--clr-text);
  font-size: 0.96rem;
}

.analysis-overview-strip small {
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.analysis-overview-strip .analysis-kpi-risk {
  border-color: rgba(220, 53, 69, 0.34);
  background: rgba(220, 53, 69, 0.06);
}

.analysis-priority-list {
  display: grid;
  gap: 7px;
  margin: 8px 0 12px;
}

.analysis-priority-list > strong {
  color: var(--clr-text);
  font-size: 0.84rem;
}

.analysis-priority-list--compact {
  margin-bottom: 4px;
}

.analysis-priority-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.analysis-priority-item strong,
.analysis-priority-item small {
  display: block;
  min-width: 0;
}

.analysis-priority-item strong {
  color: var(--clr-text);
  font-size: 0.84rem;
  line-height: 1.3;
}

.analysis-priority-item small {
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .analysis-overview-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-agent-head {
    display: grid;
  }

  .analysis-agent-head .action-button {
    justify-self: start;
  }
}

.analysis-job-top strong,
.analysis-job-top small {
  display: block;
}

.analysis-job-top small,
.analysis-live-note {
  color: var(--clr-muted);
  font-size: 0.78rem;
}

.analysis-status,
.analysis-severity {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.analysis-findings {
  display: grid;
  gap: 8px;
}

.analysis-findings--compact {
  max-height: 260px;
  overflow: auto;
}

.analysis-focus-grid {
  display: grid;
  gap: 8px;
}

.analysis-focus-grid--compact {
  max-height: 420px;
  overflow: auto;
}

.analysis-focus-group {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.analysis-focus-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.analysis-focus-group > summary::-webkit-details-marker {
  display: none;
}

.analysis-focus-group > summary strong {
  min-width: 24px;
  text-align: center;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.analysis-focus-group .analysis-findings,
.analysis-focus-group > p {
  padding: 0 10px 10px;
}

.analysis-finding {
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.analysis-finding > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.analysis-finding > summary::-webkit-details-marker {
  display: none;
}

.analysis-finding p {
  margin: 8px 0;
  color: var(--clr-muted);
  line-height: 1.45;
}

.analysis-finding pre {
  max-height: 180px;
  overflow: auto;
  margin: 8px 0;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--n-25);
  color: var(--clr-text);
  font-size: 0.78rem;
  white-space: pre-wrap;
}

.analysis-sev-critical,
.analysis-sev-high {
  border-left: 2px solid var(--clr-risk);
}

.analysis-sev-medium,
.analysis-sev-warning {
  border-left: 2px solid var(--clr-warn);
}

.analysis-sev-low,
.analysis-sev-info {
  border-left: 2px solid var(--clr-info);
}

.analysis-history {
  margin-top: 10px;
}

.analysis-history > summary {
  cursor: pointer;
  color: var(--clr-muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.analysis-history-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.analysis-job-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.analysis-job-compact strong,
.analysis-job-compact small {
  display: block;
  min-width: 0;
}

.analysis-job-compact strong {
  max-width: 52rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-job-compact small {
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: 0.78rem;
}

.analysis-error {
  margin: 0;
  color: var(--clr-risk);
  font-weight: 700;
}

.analysis-modal {
  width: min(100%, 680px);
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  box-shadow: 0 18px 60px rgba(16, 32, 40, 0.18);
}

.analysis-modal label,
.analysis-scope-grid {
  display: grid;
  gap: 6px;
  color: var(--clr-text);
  font-weight: 700;
}

.analysis-modal select,
.analysis-modal textarea {
  width: 100%;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  background: var(--n-25);
  color: var(--n-900);
  font: inherit;
  font-weight: 600;
}

.analysis-modal textarea {
  resize: vertical;
}

.analysis-scope-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.analysis-scope-grid legend {
  padding: 0 4px;
  color: var(--clr-muted);
  font-size: 0.78rem;
}

.analysis-scope-grid label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  font-size: 0.84rem;
}
.state-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--clr-xmuted);
}
.state-dot--ok   { background: var(--clr-ok); }
.state-dot--warn { background: var(--clr-warn); }
.state-dot--risk { background: var(--clr-risk); }

/* ──────────────────────────────────────────────────────────────────────
   Customer-tree refresh — toolbar, health-pill, hover-tunnel, search.
   ────────────────────────────────────────────────────────────────────── */

.tree-search-wrap {
  position: relative;
  margin-bottom: 3px;
}
.tree-search-wrap .tree-search { width: 100%; padding-right: 30px; }
.tree-filter-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-search-clear {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  min-height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--clr-subtle);
  color: var(--clr-muted);
  font-size: 0.96rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.tree-search-clear:hover { background: var(--clr-border); color: var(--clr-text); }

/* Device-type filter chips above the tree. */
.tree-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 5px;
}
.tree-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 18px;
  padding: 1px 5px;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(71, 85, 105, .78);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tree-filter-chip:hover {
  border-color: rgba(64, 100, 215, .35);
  color: var(--n-800);
  background: rgba(64, 100, 215, .04);
}
.tree-filter-chip.active {
  background: rgba(64, 100, 215, .07);
  border-color: rgba(64, 100, 215, .42);
  color: var(--b-700);
}
.tree-filter-count {
  min-width: 12px;
  padding: 0 3px;
  border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, .14);
  color: rgba(71, 85, 105, .72);
  font-size: 0.6rem;
  line-height: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.tree-filter-chip.active .tree-filter-count {
  background: rgba(64, 100, 215, .12);
  color: var(--b-700);
}
.tree-filter-chip--critical.active {
  background: rgba(220, 38, 38, .06);
  border-color: rgba(220, 38, 38, .32);
  color: var(--r-700);
}
.tree-filter-chip--critical.active .tree-filter-count {
  background: rgba(220, 38, 38, .10);
  color: var(--r-700);
}
.tree-filter-chip--offline.active {
  background: rgba(71, 85, 105, .06);
  border-color: rgba(71, 85, 105, .30);
  color: var(--n-800);
}
.tree-filter-chip--offline.active .tree-filter-count {
  background: rgba(71, 85, 105, .10);
  color: var(--n-800);
}

/* Last-seen freshness in device subtitle. */
.node-subtitle-fresh {
  color: var(--clr-xmuted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Search-match highlight inside the tree. */
.tree mark {
  background: var(--a-200);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ──────────────────────────────────────────────────────────────────────
   Threat Hunting — readability pass
   ────────────────────────────────────────────────────────────────────── */
.hunt-row--risk    > td:first-child { box-shadow: inset 3px 0 0 var(--clr-risk); }
.hunt-row--warning > td:first-child { box-shadow: inset 3px 0 0 var(--clr-warn); }
.hunt-row--info    > td:first-child { box-shadow: inset 3px 0 0 var(--clr-border); }

.hunt-table {
  table-layout: auto;
  min-width: 860px;
}

.hunt-table td:first-child {
  max-width: none;
  font-weight: inherit;
}

.hunt-table th:nth-child(1),
.hunt-table td:nth-child(1) {
  width: 52%;
}

.hunt-table th:nth-child(2),
.hunt-table td:nth-child(2) {
  width: 28%;
}

.hunt-table th:nth-child(3),
.hunt-table td:nth-child(3) {
  width: 180px;
}

.hunt-table:has(.hunt-time) th:nth-child(1),
.hunt-table:has(.hunt-time) td:nth-child(1) {
  width: 132px;
}

.hunt-table:has(.hunt-time) th:nth-child(2),
.hunt-table:has(.hunt-time) td:nth-child(2) {
  width: 44%;
}

.hunt-row td {
  vertical-align: middle;
  padding-top: 7px;
  padding-bottom: 7px;
}

.hunt-signal {
  min-width: 0;
}

.hunt-signal-inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.hunt-expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--clr-muted);
  transition: transform 0.16s ease, color 0.16s ease;
}

.hunt-row--expanded .hunt-expand-icon {
  transform: rotate(90deg);
  color: var(--clr-primary);
}

.hunt-signal-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
}

.hunt-signal-text {
  display: block;
  max-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-text);
}

.hunt-signal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.hunt-context-cell {
  min-width: 0;
}

.hunt-context-cell strong,
.hunt-context-cell span {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.hunt-context-cell strong {
  font-size: 0.84rem;
  color: var(--clr-text);
}

.hunt-context-cell span {
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--clr-muted);
}

.hunt-rating-cell {
  white-space: nowrap;
}

.hunt-rating-confidence {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.hunt-action-cell .hunt-action-text {
  display: inline-block;
  max-width: calc(100% - 34px);
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  vertical-align: middle;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--clr-muted);
}

.hunt-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--clr-border);
}

.hunt-detail-grid span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.hunt-detail-grid strong {
  color: var(--clr-muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .hunt-detail-grid {
    grid-template-columns: 1fr;
  }
}

.hunt-detail-raw {
  margin: 0;
  padding: 10px 12px;
  background: var(--clr-subtle);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
  color: var(--clr-text);
}

/* ──────────────────────────────────────────────────────────────────────
   Tables — unified header treatment (overrides earlier per-table styles).
   Goals:
   • single calm header look across every .data-table
   • sticky headers when the parent scrolls
   • clearer sort affordance (arrow on hover, solid on active)
   • tabular-nums in body for aligned numerics
   ────────────────────────────────────────────────────────────────────── */
.data-table {
  border-collapse: separate;
  border-spacing: 0;
}
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 9px 11px;
  height: 34px;
  border-bottom: 1px solid var(--clr-border);
  text-align: left;
  white-space: nowrap;
  user-select: none;
}
.compact-table thead th {
  height: 28px;
  padding: 6px 9px;
  font-size: 0.72rem;
}

/* Tabular numerics in body — keeps numbers aligned without per-table tweaks. */
.data-table tbody td {
  font-variant-numeric: tabular-nums;
}

/* Sort affordance unified. */
.data-table th.sort-header {
  cursor: pointer;
  padding-right: 22px;
  position: sticky;
  top: 0;
}
.data-table th.sort-header::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position: 0 0, 0 100%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0.25;
  transition: opacity var(--t-fast);
}
.data-table th.sort-header:hover::after { opacity: 0.6; }
.data-table th.sort-header.sort-asc::after,
.data-table th.sort-header.sort-desc::after {
  opacity: 1;
  color: var(--clr-primary);
}
.data-table th.sort-header.sort-asc::after {
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) center/50% 50% no-repeat;
}
.data-table th.sort-header.sort-desc::after {
  background:
    linear-gradient(-45deg, transparent 50%, currentColor 50%) center/50% 50% no-repeat;
}
.data-table th.sort-header.sort-asc,
.data-table th.sort-header.sort-desc {
  color: var(--clr-text);
}

/* Action / icon-only column convention: th gets aria-label, no visible text. */
.data-table th.col-actions,
.data-table td.col-actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

/* Override the older dark heavy header style (was: var(--n-900) bg / white text). */
.data-table th { background: var(--clr-surface-alt) !important; color: var(--clr-muted) !important; }
.data-table th.sort-header.sort-asc,
.data-table th.sort-header.sort-desc { color: var(--clr-text) !important; }

/* ──────────────────────────────────────────────────────────────────────
   License Audit — cockpit + smart hints + AI button
   ────────────────────────────────────────────────────────────────────── */
.license-audit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.license-audit-head-copy { min-width: 0; }
.license-audit-head-copy h2 {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
}
.license-ai-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.license-cockpit {
  display: flex;
  gap: 24px;
  margin: 0 0 14px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--clr-border);
  flex-wrap: wrap;
  align-items: baseline;
}
.license-cockpit > div { display: flex; flex-direction: column; gap: 1px; min-width: 80px; }
.license-cockpit dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin: 0;
}
.license-cockpit dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.license-cockpit dd strong {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text);
}
.license-cockpit .kpi-bad  { color: var(--clr-risk); }
.license-cockpit .kpi-warn { color: var(--clr-warn); }

.license-hints {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.license-hint {
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.license-hint strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 3px;
}
.license-hint p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--clr-muted);
  line-height: 1.4;
}
.license-hint small {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--clr-xmuted);
}
.license-hint--critical { box-shadow: inset 3px 0 0 var(--clr-risk); }
.license-hint--warn     { box-shadow: inset 3px 0 0 var(--clr-warn); }
.license-hint--info     { box-shadow: inset 3px 0 0 var(--clr-info); }
.license-hint[data-customer-tab] {
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.license-hint[data-customer-tab]:hover {
  background: var(--clr-surface-alt);
  border-color: var(--clr-border-mid);
}

.license-ai-result.hidden { display: none; }

/* ──────────────────────────────────────────────────────────────────────
   Customer overview — AI-Insights teaser (compact, calmer than the full tab)
   ────────────────────────────────────────────────────────────────────── */
.posture-hero {
  display: grid;
  grid-template-columns: minmax(118px, 148px) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: stretch;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: inset 4px 0 0 var(--clr-ok);
}
.posture-hero--warn { box-shadow: inset 4px 0 0 var(--clr-warn); }
.posture-hero--risk { box-shadow: inset 4px 0 0 var(--clr-risk); }
.posture-score {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding-right: 16px;
  border-right: 1px solid var(--clr-border);
}
.posture-score span,
.posture-score small,
.posture-severity-strip dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.posture-score strong {
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.posture-summary {
  min-width: 0;
}
.posture-summary .eyebrow {
  margin: 0 0 3px;
}
.posture-summary h2 {
  margin: 0 0 5px;
  font-size: 1.25rem;
  line-height: 1.2;
}
.posture-summary p {
  margin: 0;
  color: var(--clr-muted);
  line-height: 1.45;
}
.posture-severity-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 10px;
  align-items: center;
  margin: 0;
}
.posture-severity-strip div {
  min-width: 0;
}
.posture-severity-strip dt,
.posture-severity-strip dd {
  margin: 0;
}
.posture-severity-strip dd {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.posture-severity-strip .sev-critical { color: var(--clr-risk); }
.posture-severity-strip .sev-high,
.posture-severity-strip .sev-medium { color: var(--clr-warn); }

.posture-domains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.posture-domain {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label value"
    "detail detail";
  gap: 3px 8px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  box-shadow: inset 3px 0 0 var(--clr-ok);
}
.posture-domain:hover {
  background: var(--clr-surface-alt);
  border-color: var(--clr-border-mid);
  transform: translateY(-1px);
}
.posture-domain--warn { box-shadow: inset 3px 0 0 var(--clr-warn); }
.posture-domain--critical { box-shadow: inset 3px 0 0 var(--clr-risk); }
.posture-domain--info { box-shadow: inset 3px 0 0 var(--clr-info); }
.posture-domain span {
  grid-area: label;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-text);
}
.posture-domain strong {
  grid-area: value;
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.posture-domain small {
  grid-area: detail;
  color: var(--clr-muted);
  line-height: 1.35;
}

.top-actions {
  display: grid;
  gap: 4px;
}
.top-action {
  display: block;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: inherit;
  box-shadow: inset 3px 0 0 var(--clr-info);
  overflow: hidden;
}

.top-action > summary {
  display: grid;
  grid-template-columns: 16px 24px minmax(0, 1fr) minmax(150px, 260px);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}

.top-action > summary::-webkit-details-marker {
  display: none;
}

.top-action > summary:hover,
.top-action[open] > summary {
  background: var(--clr-surface-alt);
}

.top-action > summary:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
}

.top-action--critical { box-shadow: inset 3px 0 0 var(--clr-risk); }
.top-action--warn { box-shadow: inset 3px 0 0 var(--clr-warn); }
.top-action--low { box-shadow: inset 3px 0 0 var(--clr-border-mid); }

.top-action-toggle {
  display: inline-block;
  color: var(--clr-muted);
  transition: transform var(--t-fast);
}

.top-action[open] .top-action-toggle {
  transform: rotate(90deg);
}

.top-action-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--clr-subtle);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-muted);
}
.top-action-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.top-action-main strong {
  color: var(--clr-text);
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-action-main small,
.top-action-next {
  color: var(--clr-muted);
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.35;
}
.top-action-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-action-next {
  justify-self: end;
  max-width: 100%;
  color: var(--clr-text);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-action-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-primary);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.top-action-jump:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.top-action-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px 8px 50px;
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}

.top-action-detail-main {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.top-action-remediation-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.top-action-remediation-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.top-action-remediation-btn:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

.top-action-remediation-btn--qtc {
  background: var(--clr-primary, var(--b-700));
  border-color: var(--clr-primary, var(--b-700));
  color: var(--n-0);
}
.top-action-remediation-btn--qtc:hover {
  background: color-mix(in srgb, var(--clr-primary) 85%, var(--n-900));
  border-color: color-mix(in srgb, var(--clr-primary) 85%, var(--n-900));
  color: var(--n-0);
}

.top-action-remediation-btn:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.top-action-summary {
  flex: 1;
  margin: 0;
  font-size: 0.78rem;
  color: var(--clr-text);
  line-height: 1.4;
}

.top-action-detail section {
  min-width: 0;
}

.top-action-detail strong {
  display: block;
  margin-bottom: 3px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.top-action-detail p {
  margin: 0;
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.4;
}

.top-action-open {
  align-self: center;
  white-space: nowrap;
}

.top-action-device-list {
  display: flex;
  flex: 0 1 260px;
  gap: 5px;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 160px;
}

.top-action-device-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 150px;
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
}

.top-action-device-chip:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.top-action-device-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-action-device-chip em {
  color: var(--clr-muted);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
}

.top-remediation-modal {
  width: min(100%, 760px);
  max-height: min(86vh, 820px);
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: 0 12px 38px rgba(16, 32, 40, 0.22);
}

.top-remediation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--clr-border);
}
.top-remediation-head-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.top-remediation-head h2 {
  margin: 0;
  color: var(--clr-text);
  font-size: 1rem;
  line-height: 1.25;
}
.top-remediation-cause {
  margin: 0;
  font-size: 0.84rem;
  color: var(--clr-text);
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--clr-surface-alt);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--clr-border-mid);
}

.top-remediation-steps {
  display: grid;
  gap: 6px;
}
.top-remediation-steps-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.top-remediation-steps ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: var(--clr-text);
  font-size: 0.84rem;
  line-height: 1.45;
}

.top-action-device-list--modal {
  justify-content: flex-start;
  flex-basis: auto;
  min-width: 0;
}

.top-remediation-device-static {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.top-remediation-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.coverage-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.coverage-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(160px, 2fr) 52px;
  gap: 12px;
  align-items: center;
}
.coverage-row-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.coverage-row strong { font-size: 0.84rem; color: var(--clr-text); }
.coverage-row small  { font-size: 0.72rem; color: var(--clr-muted); }

.coverage-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  overflow: hidden;
}
.coverage-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}
.coverage-bar-fill--ok   { background: var(--clr-ok, var(--g-500)); }
.coverage-bar-fill--warn { background: var(--clr-warn, var(--a-500)); }
.coverage-bar-fill--risk { background: var(--clr-risk, var(--r-600)); }

.coverage-row-value {
  font-style: normal;
  color: var(--clr-muted);
  font-size: 0.78rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.findings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.findings-head h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}
.findings-kpis {
  display: flex;
  gap: 18px;
  margin: 0;
  flex-wrap: wrap;
}
.findings-kpis div {
  min-width: 58px;
}
.findings-kpis dt,
.findings-kpis dd {
  margin: 0;
}
.findings-kpis dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.findings-kpis dd {
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.findings-kpis .sev-critical,
.findings-kpis .sev-high,
.findings-kpis .sev-medium {
  color: var(--clr-warn);
}
.findings-kpis .sev-critical {
  color: var(--clr-risk);
}
.findings-table {
  table-layout: fixed;
}
.findings-table th:nth-child(1),
.findings-table td:nth-child(1) { width: 42px; }
.findings-table th:nth-child(2),
.findings-table td:nth-child(2) { width: 118px; }
.findings-table th:nth-child(3),
.findings-table td:nth-child(3) { width: 130px; }
.findings-table th:nth-child(4),
.findings-table td:nth-child(4) { width: 150px; }
.findings-row {
  cursor: pointer;
}
.findings-row:hover td {
  background: var(--clr-surface-alt);
}
.findings-row--critical > td:first-child { box-shadow: inset 3px 0 0 var(--clr-risk); }
.findings-row--warn > td:first-child { box-shadow: inset 3px 0 0 var(--clr-warn); }
.findings-row--low > td:first-child { box-shadow: inset 3px 0 0 var(--clr-border-mid); }
.findings-row--info > td:first-child { box-shadow: inset 3px 0 0 var(--clr-info); }
.finding-sev-label {
  margin-left: 6px;
  color: var(--clr-muted);
  font-size: 0.78rem;
}
.findings-row td strong,
.findings-row td small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.findings-row td strong {
  color: var(--clr-text);
  font-size: 0.84rem;
}
.findings-row td small {
  color: var(--clr-muted);
  font-size: 0.72rem;
  margin-top: 2px;
}

@media (max-width: 980px) {
  .posture-hero {
    grid-template-columns: 1fr;
  }
  .posture-score {
    border-right: 0;
    border-bottom: 1px solid var(--clr-border);
    padding-right: 0;
    padding-bottom: 10px;
  }
  .posture-severity-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .top-action {
    min-width: 0;
  }
  .top-action > summary {
    grid-template-columns: 16px 24px minmax(0, 1fr);
  }
  .top-action-next {
    grid-column: 3;
    justify-self: start;
    text-align: left;
  }
  .top-action-detail {
    flex-direction: column;
    grid-template-columns: 1fr;
    padding-left: 42px;
  }
  .top-action-device-list {
    justify-content: flex-start;
    min-width: 0;
    flex-basis: auto;
  }
  .top-remediation-summary {
    grid-template-columns: 1fr;
  }
  .top-remediation-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .coverage-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .coverage-row em {
    text-align: left;
  }
  .findings-head {
    flex-direction: column;
  }
}

.overview-ai-summary {
  margin: 0 0 10px;
  font-size: 0.84rem;
  color: var(--clr-muted);
  line-height: 1.45;
}
.overview-ai-list {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.overview-ai-item {
  padding: 8px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.overview-ai-item strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 2px;
}
.overview-ai-item p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--clr-muted);
  line-height: 1.4;
}
.overview-ai-item--critical { box-shadow: inset 3px 0 0 var(--clr-risk); }
.overview-ai-item--warn     { box-shadow: inset 3px 0 0 var(--clr-warn); }
.overview-ai-item--info     { box-shadow: inset 3px 0 0 var(--clr-info); }

/* ──────────────────────────────────────────────────────────────────────
   Microsoft 365 tab — calmer layout (cockpit-strip + collapsed sections)
   ────────────────────────────────────────────────────────────────────── */
.m365-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.m365-head-copy { min-width: 0; }
.m365-head-copy .eyebrow { margin: 0 0 2px; }
.m365-head-copy h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--clr-text);
}
.m365-head-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.m365-cockpit {
  display: flex;
  gap: 22px;
  margin: 0 0 14px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--clr-border);
  flex-wrap: wrap;
  align-items: baseline;
}
.m365-cockpit > div { display: flex; flex-direction: column; gap: 1px; min-width: 80px; }
.m365-cockpit dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin: 0;
}
.m365-cockpit dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.m365-cockpit dd strong {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--clr-text);
}
.m365-cockpit .kpi-warn { color: var(--clr-warn); }
.m365-tenantid {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--clr-muted) !important;
}

.m365-empty {
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  background: var(--clr-info-bg);
  box-shadow: inset 3px 0 0 var(--clr-info);
}
.m365-empty p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--clr-text);
}

.m365-onboarding {
  display: grid;
  gap: 10px;
}
.m365-onboarding-head strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.m365-onboarding-steps ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 0.84rem;
}
.m365-onboarding-steps li { line-height: 1.45; }

.m365-credentials-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr);
  gap: 12px;
  margin-bottom: 10px;
}
.m365-credentials-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-text);
}
.m365-credentials-grid input {
  font-size: 0.9rem;
  padding: 8px 10px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-md);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, Consolas, monospace;
}
.m365-credentials-grid small {
  font-weight: 500;
  line-height: 1.35;
}
.m365-credentials-grid small code {
  background: var(--clr-surface-alt);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 0.72rem;
}

.m365-central-app-card {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.m365-central-app-card strong {
  color: var(--clr-text);
  font-size: 0.84rem;
}

.m365-central-app-card span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.m365-central-app-card.is-ok {
  border-color: rgba(55, 131, 104, 0.35);
  background: rgba(55, 131, 104, 0.08);
}

.m365-central-app-card.is-warn {
  border-color: rgba(196, 122, 30, 0.45);
  background: rgba(196, 122, 30, 0.08);
}
@media (max-width: 880px) {
  .m365-credentials-grid {
    grid-template-columns: 1fr;
  }
}

.m365-app-hint {
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-info-bg);
  display: grid;
  gap: 4px;
}
.m365-app-hint strong { font-size: 0.84rem; color: var(--clr-primary); }
.m365-app-hint button { justify-self: start; margin-top: 2px; }
.m365-app-hint--warn {
  background: rgba(196, 122, 30, 0.1);
  border-color: rgba(196, 122, 30, 0.4);
}
.m365-app-hint--warn strong { color: var(--a-500); }

.m365-advanced {
  margin: 4px 0 10px;
  padding: 8px 12px;
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
}
.m365-advanced > summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-muted);
  list-style: none;
  padding: 2px 0;
}
.m365-advanced > summary::-webkit-details-marker { display: none; }
.m365-advanced[open] > summary { margin-bottom: 8px; }

/* ── Microsoft 365 · Security-Überblick ── */
.m365-security {
  margin: 4px 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--clr-border);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  display: grid;
  gap: 12px;
}
.m365-security--ok      { border-left-color: var(--clr-ok); }
.m365-security--warn    { border-left-color: var(--clr-warn); background: linear-gradient(180deg, rgba(196, 122, 30, 0.06), var(--clr-surface) 50%); }
.m365-security--risk    { border-left-color: var(--clr-risk); background: linear-gradient(180deg, rgba(184, 48, 48, 0.06), var(--clr-surface) 50%); }
.m365-security--unknown { border-left-color: var(--clr-border-mid); }

.m365-security-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.m365-security-head h3 { margin: 2px 0 0; font-size: 1rem; }
.m365-security-head p.muted-small { margin: 4px 0 0; }

.m365-security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.m365-security-kpi {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}
.m365-security-kpi--risk { border-color: rgba(184, 48, 48, 0.4); }
.m365-security-kpi--warn { border-color: rgba(196, 122, 30, 0.4); }
.m365-security-kpi-eyebrow {
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.m365-security-kpi-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.m365-security-kpi-sub {
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.m365-security-kpi .status-badge { justify-self: start; margin-top: 2px; }
.m365-security-kpi-msg { margin: 4px 0 0; }

.m365-security-findings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.m365-finding {
  padding: 9px 12px;
  border: 1px solid var(--clr-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
}
.m365-finding--ok   { border-left-color: var(--clr-ok); }
.m365-finding--warn { border-left-color: var(--clr-warn); }
.m365-finding--risk { border-left-color: var(--clr-risk); }
.m365-finding--info { border-left-color: var(--clr-info); }
.m365-finding-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.m365-finding-head strong { font-size: 0.84rem; }
.m365-finding p { margin: 2px 0; font-size: 0.78rem; line-height: 1.45; }
.m365-finding-action { color: var(--clr-primary); font-weight: 600; }
.m365-finding-action span { font-weight: 700; margin-right: 4px; }

.m365-security-loading,
.m365-security-empty {
  padding: 12px 14px;
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.m365-security-empty--warn {
  border-color: rgba(196, 122, 30, 0.4);
  background: rgba(196, 122, 30, 0.06);
  color: var(--clr-text);
}
.m365-security-empty code {
  background: var(--clr-surface);
  padding: 0 4px;
  border-radius: 3px;
}

/* KI-Empfehlung — Trigger-Button mit Akzent */
.m365-ai-trigger {
  background: linear-gradient(135deg, var(--b-500), var(--b-500));
  border: 0;
  color: var(--n-0);
  font-weight: 700;
}
.m365-ai-trigger:hover { filter: brightness(1.06); }

.module-form--compact label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78rem;
  color: var(--clr-muted);
}
.module-form--compact .module-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
  margin-bottom: 10px;
}
.module-form--compact .toggle-line {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.module-form--compact textarea {
  font: inherit;
  resize: vertical;
}

/* ──────────────────────────────────────────────────────────────────────
   Security signal table (Defender / AV, File Integrity)
   ────────────────────────────────────────────────────────────────────── */
.sec-table { table-layout: auto; }
.sec-row[data-sec-target] { cursor: pointer; }
.sec-row[data-sec-target]:hover td { background: var(--clr-surface-alt); }
.sec-row--risk > td:first-child { box-shadow: inset 3px 0 0 var(--clr-risk); }
.sec-row--warn > td:first-child { box-shadow: inset 3px 0 0 var(--clr-warn); }
.sec-row--info > td:first-child { box-shadow: inset 3px 0 0 var(--clr-border); }

.sec-time {
  white-space: nowrap;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--clr-muted);
}
.sec-msg {
  max-width: 0; /* lets the column shrink so ellipsis kicks in */
  width: 100%;
}
.sec-msg-text {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.sec-msg-more {
  margin-left: 4px;
  color: var(--clr-xmuted);
  font-size: 0.72rem;
  transition: transform var(--t-fast);
}
.sec-row[aria-expanded="true"] .sec-msg-more { transform: rotate(90deg); }

.sec-detail-row td { padding: 0 !important; }
.sec-detail-cell {
  padding: 0 !important;
}
.sec-detail-raw {
  margin: 0;
  padding: 10px 14px;
  background: var(--clr-subtle);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
  color: var(--clr-text);
}

.fim-table {
  min-width: 980px;
  table-layout: fixed;
}

.fim-table th:nth-child(1),
.fim-table td:nth-child(1) {
  width: 118px;
}

.fim-table th:nth-child(2),
.fim-table td:nth-child(2) {
  width: 28%;
}

.fim-table th:nth-child(3),
.fim-table td:nth-child(3) {
  width: 180px;
}

.fim-table th:nth-child(5),
.fim-table td:nth-child(5) {
  width: 116px;
}

.fim-row[data-sec-target] {
  cursor: pointer;
}

.fim-row[data-sec-target]:hover td,
.fim-row[aria-expanded="true"] td {
  background: var(--clr-info-bg) !important;
}

.fim-row > td:first-child {
  box-shadow: inset 3px 0 0 var(--clr-border);
}

.fim-row.fim-action--deleted > td:first-child {
  box-shadow: inset 3px 0 0 var(--clr-risk);
}

.fim-row.fim-action--modified > td:first-child,
.fim-row.fim-action--added > td:first-child {
  box-shadow: inset 3px 0 0 var(--clr-warn);
}

.fim-action-label {
  display: block;
  margin-top: 4px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.fim-path-cell,
.fim-detail-summary {
  min-width: 0;
}

.fim-path-cell strong,
.fim-path-cell span,
.fim-detail-summary {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fim-path-cell strong {
  color: var(--clr-text);
  font-size: 0.84rem;
}

.fim-path-cell span {
  margin-top: 3px;
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.fim-change-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fim-change-cell span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 6px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.kpi-ok { color: var(--clr-ok); }

/* ──────────────────────────────────────────────────────────────────────
   External scan tab — calmer (cockpit + scan history + collapsed config)
   ────────────────────────────────────────────────────────────────────── */
.scan-history-block { margin-bottom: 14px; }
.scan-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.scan-history-head h3 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
}
.scan-history-table tbody tr {
  cursor: pointer;
  transition: background var(--t-fast);
}
.scan-history-table tbody tr:hover { background: var(--clr-surface-alt); }
.scan-history-table tbody tr.scan-row--active {
  background: var(--clr-info-bg);
  box-shadow: inset 3px 0 0 var(--clr-info);
}

.scan-target-form,
[data-scan-start-form] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.scan-target-form input,
.scan-target-form select,
[data-scan-start-form] input,
[data-scan-start-form] select {
  flex: 1 1 120px;
  min-width: 100px;
}
.scan-target-form input[name="targetValue"] {
  flex-basis: 230px;
}
.scan-target-form input[name="description"] {
  flex-basis: 180px;
}
.scan-target-form select[name="defaultProfile"] {
  flex-basis: 150px;
}
.scan-target-description {
  display: block;
  margin-top: 2px;
}

.scan-detail-block {
  margin-top: 14px;
  border-top: 2px solid var(--clr-border);
  padding-top: 12px;
}
.scan-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.scan-detail-head .eyebrow { margin: 0 0 2px; }
.scan-detail-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.scan-detail-sev {
  display: flex;
  gap: 12px;
  margin: 0;
}
.scan-detail-sev .scan-sev {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
}
.scan-detail-sev dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin: 0 0 2px;
}
.scan-detail-sev dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--clr-text);
}
.scan-sev--crit { box-shadow: inset 3px 0 0 var(--clr-risk); }
.scan-sev--high { box-shadow: inset 3px 0 0 var(--a-500); }
.scan-sev--med  { box-shadow: inset 3px 0 0 var(--clr-warn); }

.scan-detail-summary {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--clr-info-bg);
  box-shadow: inset 3px 0 0 var(--clr-info);
}
.scan-detail-summary .eyebrow { margin: 0 0 4px; }
.scan-detail-summary p:last-child {
  margin: 0;
  font-size: 0.84rem;
  color: var(--clr-text);
  line-height: 1.5;
}

.scan-detail-summary--pending {
  background: var(--clr-surface2);
  box-shadow: inset 3px 0 0 var(--clr-muted);
}
.scan-summary-body--pending {
  display: flex; align-items: center; gap: 8px;
  color: var(--clr-muted);
  font-style: italic;
}
.scan-summary-spinner {
  width: 12px; height: 12px;
  border: 2px solid var(--clr-border);
  border-top-color: var(--clr-info);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scan-detail-watch {
  margin: 8px 0 14px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  overflow: hidden;
}
.scan-detail-watch-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--clr-border);
}
.scan-watch-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--clr-info);
}
.scan-watch-output {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--clr-muted);
  background: var(--clr-bg);
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Quick Check redesign */
.qc-page { gap: 10px !important; }
@media (max-width: 620px) { .qc-page { gap: 6px !important; } }

.qc-status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--clr-border);
  flex-wrap: wrap;
}
.qc-status-bar--active { border-left-color: var(--clr-info); }
.qc-status-bar--warn   { border-left-color: var(--clr-warn); }
.qc-status-bar--ok     { border-left-color: var(--clr-ok); }

.qc-status-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.qc-status-bar-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--clr-muted);
}
.qc-status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-lg);
  background: var(--clr-surface2);
  color: var(--clr-muted);
}
.qc-status-badge--active { background: color-mix(in srgb, var(--clr-info) 18%, transparent); color: var(--clr-info); }
.qc-status-badge--warn   { background: color-mix(in srgb, var(--clr-warn) 18%, transparent); color: var(--clr-warn); }
.qc-status-badge--ok     { background: color-mix(in srgb, var(--clr-ok)   18%, transparent); color: var(--clr-ok); }

.qc-status-bar-last {
  font-size: 0.78rem;
  color: var(--clr-text);
  font-weight: 500;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 4px;
  border-left: 1px solid var(--clr-border);
}
.qc-status-bar-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.qc-status-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.qc-live-indicator {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-info);
}

/* ── status bar: collapse on narrow screens ─────────────────────── */
@media (max-width: 720px) {
  .qc-status-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 12px;
  }
  .qc-status-bar-left { flex-wrap: wrap; }
  .qc-status-bar-stats { display: none; } /* stats visible in left badges, no need to duplicate */
  .qc-status-bar-actions { justify-content: flex-start; flex-wrap: wrap; }
  .qc-status-bar-last { display: none; }
}
@media (max-width: 480px) {
  .qc-status-bar { padding: 7px 10px; }
  .qc-status-bar-actions .action-button { font-size: 0.72rem; padding: 3px 8px; }
}

/* Compact form panel */
.qc-form-panel {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qc-form-panel-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  border-bottom: 1px solid transparent;
}
.qc-form-panel[open] .qc-form-panel-summary {
  border-bottom-color: var(--clr-border);
}
.qc-form-panel-summary::-webkit-details-marker { display: none; }
.qc-form-panel-summary::before {
  content: "▸";
  font-size: 0.72rem;
  color: var(--clr-muted);
  transition: transform .15s;
}
.qc-form-panel[open] .qc-form-panel-summary::before { transform: rotate(90deg); }
.qc-form-panel-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--clr-muted);
}
.qc-form-panel-hint {
  font-size: 0.78rem;
  color: var(--clr-muted);
}
.qc-form {
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}
.qc-form-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}
.qc-form-label-target { min-width: 0; }
.qc-form-submit-col { display: flex; align-items: flex-end; padding-bottom: 1px; }
.qc-form-comment { display: grid; gap: 4px; }
.qc-form-comment textarea { resize: vertical; }
@media (max-width: 860px) {
  .qc-form-row { grid-template-columns: 1fr 1fr; }
  .qc-form-submit-col { grid-column: span 2; }
}
@media (max-width: 540px) {
  .qc-form-row { grid-template-columns: 1fr; }
  .qc-form-submit-col { grid-column: auto; }
}

/* History block */
.qc-history-block {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qc-history-block .compact-toolbar-row {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--clr-border);
  margin: 0;
  border-top: none;
}
@media (max-width: 620px) {
  .qc-history-block .compact-toolbar-row { padding: 8px 10px 6px; }
  .qc-history-block .compact-toolbar-row-tools { width: 100%; }
  .scan-history-search { width: 100%; box-sizing: border-box; }
}
.qc-table { margin: 0; border-top: none; }
.qc-table thead th { background: var(--clr-surface2); }

/* ── qc-table responsive column hiding ────────────────────────────── */
/* ≤860px: hide Severity bar (col 7) */
@media (max-width: 860px) {
  .qc-table th:nth-child(7),
  .qc-table td:nth-child(7) { display: none; }
}
/* ≤720px: also hide Dauer (col 6) */
@media (max-width: 720px) {
  .qc-table th:nth-child(6),
  .qc-table td:nth-child(6) { display: none; }
}
/* ≤620px: also hide Kunde (col 3) + Profil (col 4) */
@media (max-width: 620px) {
  .qc-table th:nth-child(3),
  .qc-table td:nth-child(3),
  .qc-table th:nth-child(4),
  .qc-table td:nth-child(4) { display: none; }
}
/* ≤480px: also hide Datum (col 1) */
@media (max-width: 480px) {
  .qc-table th:nth-child(1),
  .qc-table td:nth-child(1) { display: none; }
}

/* legacy layout class — keep for compat, override */
.quickcheck-layout { display: contents; }
.quickcheck-form, .quickcheck-history { min-width: 0; }
.quickcheck-form h3 { margin: 0; font-size: 1rem; }
.quickcheck-form textarea { resize: vertical; }

.external-scan-page {
  display: grid;
  gap: 12px;
}
.external-scan-page--customer {
  gap: 10px;
}
.external-scan-page--customer > .scan-history-block,
.external-scan-page--customer > .cust-section,
.external-scan-page--customer > .scan-detail-block {
  margin-bottom: 0;
}

.external-scan-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: inset 3px 0 0 var(--clr-info);
}
.external-scan-hero--active { box-shadow: inset 3px 0 0 var(--clr-info); }
.external-scan-hero--warn { box-shadow: inset 3px 0 0 var(--clr-warn); }
.external-scan-hero--ok { box-shadow: inset 3px 0 0 var(--clr-ok); }
.external-scan-hero--idle { box-shadow: inset 3px 0 0 var(--clr-border); }

.scan-hero-ai {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.scan-hero-ai > summary { cursor: pointer; list-style: none; }
.scan-hero-ai > summary::-webkit-details-marker { display: none; }
.scan-hero-ai p { margin: 8px 0 0; color: var(--clr-text); font-size: 0.84rem; line-height: 1.45; }
.scan-hero-ai-body { margin-top: 8px; color: var(--clr-text); font-size: 0.84rem; line-height: 1.45; }
.scan-hero-ai-body p:first-child { margin-top: 0; }
.scan-hero-ai-body p, .scan-hero-ai-body ul { margin: 6px 0; }
.scan-hero-ai-body ul { padding-left: 18px; }
.scan-hero-ai-body h4 { margin: 10px 0 4px; font-size: 0.84rem; }

/* === Severity stacked bar in scan detail hero === */
.scan-sev-stack {
  display: flex;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
  background: var(--clr-surface-alt);
}
.scan-sev-stack-seg { display: block; min-width: 2px; }
.scan-sev-stack-seg--crit { background: var(--clr-risk); }
.scan-sev-stack-seg--high { background: var(--a-500); }
.scan-sev-stack-seg--med  { background: var(--clr-warn); }
.scan-sev-stack-seg--low  { background: var(--b-500); }

/* === Hero inline status pill in eyebrow line === */
.external-scan-title .eyebrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.external-scan-last { font-weight: 600; }

/* ── Kompaktes Status-Band (Hero + KPIs fusioniert) ──────────── */
.scan-status-band {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.scan-status-band--active { border-left-color: var(--clr-info); }
.scan-status-band--warn   { border-left-color: var(--clr-warn); }
.scan-status-band--ok     { border-left-color: var(--clr-ok); }
.scan-status-band--idle   { border-left-color: var(--clr-border-mid); }
.scan-status-band-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scan-status-band-target {
  font-size: 1rem; font-weight: 700; color: var(--clr-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
.scan-status-band-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scan-status-band-kpis {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto;
}
.scan-sband-kpi { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.scan-sband-kpi strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.scan-sband-kpi small { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-muted); font-weight: 700; }
.scan-sband-kpi--active strong { color: var(--clr-info); }
.scan-sband-kpi--warn strong { color: var(--clr-warn); }
.scan-status-band-actions { display: flex; gap: 8px; }

/* ── Severity-Pills im Detail-Header ─────────────────────────── */
.scan-sev-pills { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.scan-spill {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: var(--radius-sm);
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.scan-spill--crit { background: var(--clr-risk-bg); color: var(--clr-risk); }
.scan-spill--high { background: var(--a-100); color: var(--a-500); }
.scan-spill--med  { background: var(--clr-warn-bg); color: var(--clr-warn); }
.scan-spill--low  { background: var(--b-100); color: var(--b-500); }
.scan-spill--none { background: var(--clr-ok-bg, var(--g-50)); color: var(--clr-ok); }

.scan-detail-head--compact { gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.scan-detail-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scan-detail-title-row h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.scan-detail-meta { margin: 3px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scan-diff-inline { font-size: 0.72rem; }

/* ── Inline Scan-Start ───────────────────────────────────────── */
.scan-start-inline { margin-top: 8px; align-items: center; }
.scan-start-label { font-weight: 700; white-space: nowrap; }

.scan-delta-card {
  display: grid; gap: 8px;
  padding: 10px 14px; margin: 10px 0;
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.scan-delta-head { display: flex; flex-direction: column; gap: 2px; }
.scan-delta-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0;
}
.scan-delta-item {
  padding: 6px 10px; border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  background: var(--clr-surface-alt); text-align: center;
}
.scan-delta-item dt { margin: 0; color: var(--clr-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.scan-delta-item dd { margin: 2px 0 0; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.scan-delta-item--bad     { border-color: var(--clr-risk); }
.scan-delta-item--bad dd  { color: var(--clr-risk); }
.scan-delta-item--warn    { border-color: var(--clr-warn); }
.scan-delta-item--warn dd { color: var(--clr-warn); }
.scan-delta-item--good    { border-color: var(--clr-ok); }
.scan-delta-item--good dd { color: var(--clr-ok); }

.scan-trend-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center;
  padding: 8px 14px; margin: 8px 0;
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.scan-trend-head { display: flex; flex-direction: column; gap: 2px; }
.scan-trend-card--stacked .scan-trend-head { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.scan-trend-svg { width: 240px; height: 48px; max-width: 100%; }
.scan-trend-card--stacked .scan-trend-svg { width: 280px; height: 64px; }
.scan-trend-legend { display: flex; gap: 10px; font-size: 0.72rem; flex-wrap: wrap; }
.scan-trend-legend span { display: inline-flex; align-items: center; gap: 4px; color: var(--clr-muted); }
.scan-trend-legend i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
.scan-trend-delta {
  font-size: 0.72rem; font-weight: 700;
  padding: 2px 6px; border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.scan-trend-delta--warn    { background: color-mix(in srgb, var(--clr-warn) 18%, transparent); color: var(--clr-warn); }
.scan-trend-delta--ok      { background: color-mix(in srgb, var(--clr-ok)   18%, transparent); color: var(--clr-ok); }
.scan-trend-delta--neutral { background: var(--clr-surface2); color: var(--clr-muted); }

.scan-schedule-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--clr-info) 14%, transparent);
  color: var(--clr-info);
}

.finding-bulk-check {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  cursor: pointer;
}
.finding-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  background: var(--clr-info-bg, var(--clr-surface2));
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
}
.finding-bulk-bar[hidden] { display: none; }

.scan-tools-block {
  margin: 8px 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.scan-tools-block summary {
  display: flex; gap: 10px; align-items: baseline;
  cursor: pointer;
  list-style: none;
}
.scan-tools-block summary::-webkit-details-marker { display: none; }
.scan-tools-block summary::before {
  content: "▸"; font-size: 0.72rem; color: var(--clr-muted);
  margin-right: 4px; transition: transform .15s;
}
.scan-tools-block[open] summary::before { transform: rotate(90deg); }
.scan-tools-list {
  list-style: none; padding: 8px 0 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px;
  font-size: 0.78rem;
}
.scan-tools-list code {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--clr-text);
}

.scanner-health-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600;
  padding: 2px 7px; border-radius: var(--radius-md);
}
.scanner-health-badge--ok       { background: color-mix(in srgb, var(--clr-ok)   18%, transparent); color: var(--clr-ok); }
.scanner-health-badge--degraded { background: color-mix(in srgb, var(--clr-warn) 18%, transparent); color: var(--clr-warn); }
.scanner-health-badge--down     { background: color-mix(in srgb, var(--clr-risk) 18%, transparent); color: var(--clr-risk); }
.scanner-health-badge--unknown  { background: var(--clr-surface2); color: var(--clr-muted); }

.scanner-tools-panel {
  margin: 8px 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}
.scanner-tools-panel[hidden] { display: none; }
.scanner-tools-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.scanner-tools-head h2 { margin: 2px 0 0; font-size: 0.96rem; }
.scanner-tools-head p.muted-small { margin: 2px 0 0; }

.qc-row--cursor {
  box-shadow: inset 3px 0 0 var(--clr-info);
  background: color-mix(in srgb, var(--clr-info) 6%, transparent) !important;
}

/* Tastatur-Cursor auf der Sofortmaßnahmen-Liste (box-shadow auf <tr> ist
   unzuverlässig → auf die Zellen anwenden). */
.dashboard-work-row--cursor > td {
  background: color-mix(in srgb, var(--clr-info) 7%, transparent) !important;
}
.dashboard-work-row--cursor > td:first-child {
  box-shadow: inset 3px 0 0 var(--clr-info);
}

.dashboard-kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.66rem;
  color: var(--clr-xmuted, var(--clr-muted));
  font-weight: 600;
}
.dashboard-kbd-hint kbd {
  font: 0.64rem/1 ui-monospace, Consolas, monospace;
  padding: 1px 4px;
  border: 1px solid var(--clr-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
}
@media (max-width: 760px) { .dashboard-kbd-hint { display: none; } }

.discovery-heatmap {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
}
.discovery-heatmap summary {
  cursor: pointer;
  display: flex; gap: 10px; align-items: baseline;
  list-style: none;
}
.discovery-heatmap summary::-webkit-details-marker { display: none; }
.discovery-heatmap summary::before {
  content: "▸"; font-size: 0.72rem; color: var(--clr-muted);
  margin-right: 4px; transition: transform .15s;
}
.discovery-heatmap[open] summary::before { transform: rotate(90deg); }
.discovery-heatmap-wrap { overflow-x: auto; margin-top: 8px; }
.discovery-heatmap-table {
  border-collapse: collapse;
  font-size: 0.66rem;
}
.discovery-heatmap-table th {
  font-weight: 500;
  color: var(--clr-muted);
  text-align: left;
  padding: 2px 4px;
  white-space: nowrap;
}
.discovery-heatmap-table thead th {
  text-align: center;
  font-family: var(--font-mono, monospace);
  width: 22px;
  position: sticky; top: 0;
  background: var(--clr-surface);
}
.discovery-heatmap-table tbody th {
  font-family: var(--font-mono, monospace);
  max-width: 200px;
  overflow: hidden; text-overflow: ellipsis;
}
.dh-cell { width: 16px; height: 16px; border: 1px solid var(--clr-border); }
.dh-cell--ok   { background: color-mix(in srgb, var(--clr-ok)   60%, transparent); }
.dh-cell--warn { background: color-mix(in srgb, var(--clr-warn) 60%, transparent); }
.dh-cell--risk { background: color-mix(in srgb, var(--clr-risk) 60%, transparent); }
.dh-cell--neutral { background: color-mix(in srgb, var(--clr-muted) 40%, transparent); }

.scan-compare-modal {
  width: min(1100px, 96vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
}
.scan-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  overflow: auto;
}
.scan-compare-col {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-width: 0;
}
.scan-compare-col header {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--clr-border);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.scan-compare-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 60vh; overflow: auto;
}
.scan-compare-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface2);
  font-size: 0.84rem;
}
.scan-compare-item small { grid-column: 2; }
.scan-compare-item--diff {
  box-shadow: inset 3px 0 0 var(--clr-warn);
  background: color-mix(in srgb, var(--clr-warn) 8%, var(--clr-surface));
}
@media (max-width: 760px) {
  .scan-compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .scan-trend-card { grid-template-columns: 1fr; }
}

.scan-delta-head { flex-direction: row !important; align-items: center; justify-content: space-between; }
.scan-delta-peer-select { display: inline-flex; gap: 6px; align-items: center; font-size: 0.78rem; }
.scan-delta-peer-select select { padding: 2px 6px; }
.scan-delta-since { margin-top: 4px; }

.scan-diff-lists {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-top: 8px;
}
@media (max-width: 800px) {
  .scan-diff-lists { grid-template-columns: 1fr; }
}
.scan-diff-list {
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.scan-diff-list--added   { border-left: 2px solid var(--clr-risk); }
.scan-diff-list--removed { border-left: 2px solid var(--clr-ok); }
.scan-diff-list--empty   { opacity: 0.7; }
.scan-diff-list strong   { display: block; margin-bottom: 6px; font-size: 0.84rem; }
.scan-diff-count {
  margin-left: 4px; padding: 0 6px; border-radius: var(--radius-sm);
  background: var(--clr-surface); color: var(--clr-text);
  font-size: 0.72rem; font-weight: 700;
}
.scan-diff-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.scan-diff-finding {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem;
}
.scan-diff-finding span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.finding-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--clr-border);
}
.finding-fingerprint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}

.finding-status-badge {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm);
  font-size: 0.72rem; font-weight: 700; margin-left: 6px;
  vertical-align: middle;
}
.finding-status-badge--accepted        { background: var(--clr-ok-bg, var(--g-50)); color: var(--clr-ok); }
.finding-status-badge--false_positive  { background: var(--clr-surface-alt); color: var(--clr-muted); text-decoration: line-through; }
.finding-status-badge--snoozed         { background: var(--b-50); color: var(--b-500); }

.finding-list-item--status-accepted,
.finding-list-item--status-false_positive,
.finding-list-item--status-snoozed { opacity: 0.65; }
.finding-list-item--status-accepted:hover,
.finding-list-item--status-false_positive:hover,
.finding-list-item--status-snoozed:hover { opacity: 1; }

.finding-status-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0;
  padding: 8px;
  background: var(--clr-surface-alt);
  border-radius: var(--radius-sm);
}
.finding-status-btn { font-size: 0.72rem; padding: 4px 10px; }

.finding-suppressed-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; color: var(--clr-muted);
  user-select: none;
}
.finding-suppressed-toggle input { margin: 0; }

/* === Scan Target Tags === */
.scan-target-tags {
  display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap;
}
.scan-target-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--b-50);
  color: var(--b-500);
  font-size: 0.66rem;
  font-weight: 700;
}
.scan-tag-filter {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 8px 0;
}
.scan-tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: 0.72rem; font-weight: 700;
  cursor: pointer;
}
.scan-tag-pill:hover { background: var(--clr-surface-alt); }
.scan-tag-pill.active {
  background: var(--clr-text); color: var(--clr-surface);
  border-color: var(--clr-text);
}
.scan-tag-pill span {
  padding: 0 6px; border-radius: var(--radius-sm);
  background: var(--clr-surface-alt); color: var(--clr-muted);
  font-size: 0.72rem;
}
.scan-tag-pill.active span {
  background: var(--clr-surface); color: var(--clr-text);
}

.scan-row--live { animation: scan-row-pulse 1.6s ease-in-out infinite; }
.scan-row--live td:first-child::before {
  content: "●"; color: var(--clr-info); margin-right: 6px;
}
.scan-row--failed td:first-child::before {
  content: "✕"; color: var(--clr-risk); margin-right: 6px;
}

.external-scan-title {
  min-width: 0;
}
.external-scan-title .eyebrow {
  margin: 0 0 2px;
}
.external-scan-title h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.25;
}
.external-scan-title p:last-child {
  margin: 4px 0 0;
  color: var(--clr-muted);
  font-size: 0.84rem;
}

.external-scan-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.external-scan-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  background: var(--clr-subtle);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.external-scan-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
  margin: 0;
}
.external-scan-kpis > div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.external-scan-kpis dt {
  margin: 0 0 2px;
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.external-scan-kpis dd {
  margin: 0;
  min-width: 0;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.external-scan-kpis dd,
.external-scan-kpis > div > small {
  display: block;
}
.external-scan-kpis dd strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.96rem;
  line-height: 1.1;
}
.external-scan-kpis dd small,
.external-scan-kpis > div > small {
  min-width: 0;
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--clr-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.2;
}
.external-scan-kpis .status-badge {
  max-width: 100%;
}

/* CVE → NVD-Links in Findings */
.cve-link {
  color: var(--clr-info, var(--b-500));
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
  border-bottom: 1px dotted currentColor;
}
.cve-link:hover { text-decoration: underline; }

.external-scan-layout {
  grid-template-columns: minmax(260px, 0.72fr) minmax(440px, 1.28fr);
  gap: 10px;
  margin: 0;
}
.external-scan-layout--history-only {
  grid-template-columns: 1fr;
}
.external-scan-mode-switch {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--clr-surface));
}

/* Toolbar tools (filter pills, search, live dot) sit on one right-aligned
   line instead of stacking as block children. */
.compact-toolbar-row-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.darkweb-crawler-page {
  --darkweb-violet: var(--b-500);
  --darkweb-cyan: var(--b-500);
}

.darkweb-query-card {
  border-color: color-mix(in srgb, var(--darkweb-violet) 38%, var(--clr-border));
  background:
    radial-gradient(circle at 8% 0%, rgb(139 92 246 / 12%), transparent 38%),
    var(--clr-surface);
}

.darkweb-crawl-consent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.darkweb-crawl-detail {
  display: grid;
  gap: 1rem;
}

.darkweb-crawl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--darkweb-violet) 35%, var(--clr-border));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgb(139 92 246 / 10%), rgb(34 211 238 / 5%));
}

.darkweb-crawl-hero h2 {
  margin: .25rem 0;
}

.darkweb-crawl-hero p {
  margin: 0;
  color: var(--clr-muted);
}

.darkweb-match-list {
  display: grid;
  gap: .65rem;
}

.darkweb-discovery-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .8rem;
  padding: .75rem 1rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  font-size: 0.78rem;
}

.darkweb-discovery-strip span,
.darkweb-query-privacy {
  color: var(--clr-muted);
}

.darkweb-query-privacy {
  margin: 0;
  font-size: 0.78rem;
}

.darkweb-match-card {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .8rem;
  padding: .9rem 1rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}

.darkweb-match-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--darkweb-cyan);
  background: rgb(34 211 238 / 10%);
}

.darkweb-match-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.darkweb-match-head span,
.darkweb-match-card p,
.queue-position {
  color: var(--clr-muted);
  font-size: 0.78rem;
}

.darkweb-match-card a {
  display: block;
  margin: .25rem 0;
  overflow: hidden;
  color: var(--darkweb-cyan);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.darkweb-match-card p,
.queue-position {
  margin: 0;
}

.queue-position {
  display: block;
  margin-top: .25rem;
}

@media (max-width: 980px) {
  .darkweb-crawl-hero {
    grid-template-columns: 1fr;
  }

  .darkweb-crawl-consent {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Monitoring trust & workflow pass
   - globaler Rahmen und Baum bleiben sichtbar
   - kompakter Objektkontext bleibt beim Scrollen erhalten
   - Aktionen, leere Zustände und Fokusziele sind klarer und größer
   ════════════════════════════════════════════════════════════════════════════ */
.app--monitoring .menu-bar {
  position: sticky;
  top: 0;
  z-index: 100;
}

.app--monitoring .workspace {
  grid-template-columns: var(--tree-width, 280px) minmax(0, 1fr);
}

.app--monitoring .agent-tree {
  position: sticky;
  top: var(--menubar-h);
  align-self: start;
}

.monitoring-context-bar {
  position: sticky;
  top: var(--menubar-h);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: -2px 0 6px;
  padding: 5px 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-surface) 96%, transparent);
  box-shadow: 0 4px 14px rgba(23, 43, 58, 0.08);
  backdrop-filter: blur(8px);
}
.monitoring-context-bar--risk { border-left-color: var(--clr-risk); }
.monitoring-context-bar--warn { border-left-color: var(--clr-warn); }
.monitoring-context-bar--ok { border-left-color: var(--clr-ok); }
.monitoring-context-bar .monitoring-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  margin: 0;
}
.monitoring-context-bar .monitoring-breadcrumb button {
  min-height: 32px;
  padding-inline: 2px;
}
.monitoring-context-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.monitoring-context-view {
  padding: 3px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-primary);
}
.monitoring-context-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--clr-muted);
}

/* Der kompakte Kontext ersetzt die frühere, allein stehende Sticky-Tableiste. */
.content--customer .customer-tabs {
  position: static;
  top: auto;
}

.customer-overview-work--priority {
  border-left: 2px solid var(--clr-primary) !important;
}
.top-actions-more {
  margin-top: 8px;
  border-top: 1px solid var(--clr-border);
}
.top-actions-more > summary,
.customer-overview-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px;
  color: var(--clr-primary);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.top-actions-more > summary::-webkit-details-marker,
.customer-overview-disclosure > summary::-webkit-details-marker { display: none; }
.top-actions-more[open] > summary,
.customer-overview-disclosure[open] > summary { border-bottom: 1px solid var(--clr-border); }
.top-actions-more > .top-actions { padding-top: 8px; }
.customer-overview-disclosure { padding: 0 !important; overflow: hidden; }
.customer-overview-disclosure > summary span:first-child { display: grid; gap: 2px; }
.customer-overview-disclosure > summary small { color: var(--clr-muted); font-weight: 600; }
.customer-overview-disclosure-state { color: var(--clr-muted); }
.customer-overview-disclosure[open] .customer-overview-disclosure-state { font-size: 0; }
.customer-overview-disclosure[open] .customer-overview-disclosure-state::after { content: "Schließen"; font-size: 0.72rem; }
.customer-overview-disclosure-body { padding: 10px 12px; }

.asset-data-gap,
.fw-data-gap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-warn);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.asset-data-gap strong,
.fw-data-gap strong { flex: 0 0 auto; font-size: 0.78rem; }
.asset-data-gap span,
.fw-data-gap span { color: var(--clr-muted); font-size: 0.72rem; }
.asset-overview-events--empty { min-height: auto; }
.asset-compact-empty { margin: 0; padding: 10px 12px; color: var(--clr-muted); font-size: 0.72rem; }

.fw-qtc-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-left: 2px solid var(--clr-primary) !important;
}
.fw-qtc-handoff-copy { min-width: 0; }
.fw-qtc-handoff-copy h2 { margin: 2px 0 3px; font-size: 0.9rem; }
.fw-qtc-handoff-copy p { margin: 0; color: var(--clr-muted); font-size: 0.72rem; }
.fw-qtc-availability { display: inline-block; margin-top: 5px; color: var(--clr-muted); font-size: 0.72rem; font-weight: 700; }
.fw-qtc-handoff-actions { flex: 0 0 auto; }

.resp-qtc-ready {
  display: inline-flex;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--clr-primary) 38%, var(--clr-border));
  border-radius: var(--radius-sm);
  color: var(--clr-primary);
  font-size: 0.66rem;
  font-weight: 700;
}
.resp-connection-note {
  margin: 8px 0 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* Eindeutige Ziele und lesbare Metadaten in den operativen Ansichten. */
.content--customer .wz-btn,
.content--device .wz-btn,
.content--customer .action-button,
.content--device .action-button,
.content--device .resp-run-btn {
  min-height: 44px;
  padding-inline: 14px;
}
.content--customer .subnav-item,
.content--device .subnav-item {
  min-height: 40px;
}
.content--customer .wz-statuspill,
.content--device .wz-statuspill,
.content--customer .top-action-jump,
.content--device .asset-overview-open-logs {
  min-height: 36px;
}
.content--customer .wz-table tbody tr,
.content--device .data-table tbody tr { min-height: 44px; }
.content--customer .wz-table tbody td,
.content--device .data-table tbody td { padding-block: 9px; }
.content--customer .muted-small,
.content--device .muted-small,
.content--customer small,
.content--device small { font-size: max(0.7rem, var(--fs-2xs)); }
.agent-tree { --tree-name-customer: 0.79rem; --tree-name-device: 0.74rem; --tree-sub: 0.64rem; }

/* Sortierstatus kommt semantisch über aria-sort und visuell über Farbe/Kante;
   generierte Pfeilzeichen werden nicht mehr als doppelter Text ausgegeben. */
.wz-th .table-sort-button::after { content: none; }
.wz-th.sort-asc .table-sort-button,
.wz-th.sort-desc .table-sort-button {
  color: var(--clr-primary);
  box-shadow: inset 0 -2px 0 var(--clr-primary);
}

@media (max-width: 760px) {
  .app--monitoring { --menubar-h: 104px; }
  .app--monitoring .workspace { grid-template-columns: minmax(0, 1fr); }
  /* The customer navigation has a mobile disclosure in the shell. */
  .monitoring-context-bar { align-items: flex-start; flex-direction: column; gap: 2px; }
  .monitoring-context-meta { width: 100%; justify-content: space-between; }
  .fw-qtc-handoff { align-items: stretch; flex-direction: column; }
  .fw-qtc-handoff-actions .action-button { width: 100%; }
  .asset-data-gap,
  .fw-data-gap { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   Wazuh grammar for deep customer and asset views
   ============================================================ */

.content--customer .customer-deep-visuals,
.content--device .asset-overview-visuals {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.content--customer .customer-deep-card,
.content--device .asset-overview-card,
.content--device .asset-overview-events,
.content--device .asset-overview-kpis,
.content--device .devlog-evolution {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: none;
}

.content--customer .customer-deep-card > header,
.content--device .asset-overview-card > header,
.content--device .asset-overview-events > header,
.content--device .devlog-evolution > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--clr-border);
}

.content--customer .customer-deep-card > header > span,
.content--device .asset-overview-card > header > span,
.content--device .asset-overview-events > header > span,
.content--device .devlog-evolution > header > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.content--customer .customer-deep-card header strong,
.content--device .asset-overview-card header strong,
.content--device .asset-overview-events header strong,
.content--device .devlog-evolution header strong {
  color: var(--clr-text);
  font-size: 0.84rem;
  font-weight: 700;
}

.content--customer .customer-deep-card header small,
.content--device .asset-overview-card header small,
.content--device .asset-overview-events header small,
.content--device .devlog-evolution header small {
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content--customer .customer-deep-canvas,
.content--device .asset-overview-canvas {
  height: 158px;
  padding: 5px 8px 3px;
}

.content--customer .customer-deep-canvas canvas,
.content--device .asset-overview-canvas canvas,
.content--device .devlog-evolution-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.content--customer .customer-deep-donut-layout,
.content--device .asset-overview-donut-layout {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) minmax(130px, 1.1fr);
  align-items: center;
  min-height: 158px;
}

.content--customer .customer-deep-canvas--donut,
.content--device .asset-overview-canvas--donut {
  height: 150px;
}

.content--customer .customer-deep-legend,
.content--device .asset-overview-legend {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 8px 12px 8px 2px;
}

.content--customer .customer-overview-assets {
  margin-bottom: 10px;
}

.content--customer .customer-overview-domains {
  margin-top: 10px;
}

.content--customer .customer-domain-disclosure {
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.content--customer .customer-domain-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 7px 11px;
  color: var(--clr-text);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.content--customer .customer-domain-disclosure > summary::-webkit-details-marker { display: none; }
.content--customer .customer-domain-disclosure > summary span { color: var(--clr-muted); font-size: 0.66rem; font-weight: 600; }
.content--customer .customer-domain-disclosure[open] > summary { border-bottom: 1px solid var(--clr-border); }
.content--customer .customer-domain-disclosure .posture-domain-list { border: 0; border-radius: 0; }

.content--device .asset-overview-kpis {
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(0, 2fr);
  align-items: stretch;
  margin-bottom: 10px;
}

.content--device .asset-overview-kpi-label {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 11px;
  border-right: 1px solid var(--clr-border);
}

.content--device .asset-overview-kpi-label strong { font-size: 0.84rem; font-weight: 700; }
.content--device .asset-overview-kpi-label small {
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content--device .asset-overview-resource-rail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 0;
  border-radius: 0;
}

.content--device .asset-overview-resource-rail .agent-status-metric { min-width: 0; }

.content--device .asset-overview-events {
  margin: 10px 0;
}

.content--device .asset-overview-open-logs,
.content--device .devlog-sidebar-toggle,
.content--device .devlog-detail-button {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-primary);
  font-size: 0.72rem;
  font-weight: 700;
}

.content--device .asset-overview-open-logs:hover,
.content--device .devlog-sidebar-toggle:hover,
.content--device .devlog-detail-button:hover { background: var(--clr-surface-alt); }

.content--device .asset-overview-events-wrap { overflow-x: auto; }
.content--device .asset-overview-events table { min-width: 700px; }
.content--device .asset-overview-events th:first-child { width: 112px; }
.content--device .asset-overview-events th:nth-child(2) { width: 78px; }
.content--device .asset-overview-events th:nth-child(3) { width: 150px; }
.content--device .asset-event-source { color: var(--clr-muted); font-size: 0.72rem; font-weight: 600; }
.content--device .asset-event-open {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--clr-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content--device .asset-event-open:hover { color: var(--clr-primary); text-decoration: underline; }

.content--device .device-log-layout--sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
.content--device .device-log-layout--sidebar-collapsed .device-log-sidebar { display: none; }
.content--device .devlog-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.content--device .devlog-evolution {
  flex: 0 0 auto;
  margin: 0 12px;
}

.content--device .devlog-evolution > header { min-height: 34px; padding-block: 6px; }
.content--device .devlog-evolution-canvas { height: 76px; padding: 3px 8px 5px; }

.content--device .devlog-row--structured td { vertical-align: middle; white-space: nowrap; }
.content--device .devlog-structured-sub { display: block; margin-top: 1px; color: var(--clr-muted); font-size: 0.6rem; font-weight: 600; }
.content--device .devlog-action,
.content--device .devlog-protocol {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}
.content--device .devlog-action--block { border-color: var(--a-200); background: var(--a-50); color: var(--a-500); }
.content--device .devlog-action--pass { border-color: var(--g-200); background: var(--n-50); color: var(--g-500); }
.content--device .devlog-endpoint { color: var(--clr-text); font-size: 0.72rem; }
.content--device .devlog-rule { color: var(--clr-muted); font-family: ui-monospace, "Cascadia Code", monospace; font-size: 0.72rem; }
.content--device .devlog-count { text-align: right; font-variant-numeric: tabular-nums; }
.content--device .devlog-message-button {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content--device .devlog-message-button:hover { color: var(--clr-primary); text-decoration: underline; }

/* Compact asset log worklist: stable columns, one-line previews, optional chart. */
.content--device .device-log-section.device-log-section--compact {
  height: calc(100dvh - 302px);
  min-height: 360px;
}

.device-log-section--compact .device-log-main {
  background: var(--clr-surface);
}

.content--device .device-log-section--compact .devlog-header {
  flex-wrap: wrap;
  flex-shrink: 0;
}

.device-log-section--compact .devlog-header-actions { gap: 6px; }

.devlog-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 6px 12px;
  padding: 4px 10px;
  color: var(--clr-muted);
  font-size: 0.75rem;
  flex-wrap: wrap;
}

.devlog-results-bar strong { color: var(--clr-text); }

.devlog-results-bar .devlog-chart-toggle {
  min-height: 26px;
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: var(--clr-muted);
  font: inherit;
  white-space: nowrap;
}

.devlog-results-bar .devlog-chart-toggle:hover { color: var(--clr-primary); }
.content--device .devlog-evolution[hidden] { display: none; }

.content--device .device-log-section--compact .devlog-main-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.content--device .device-log-section--compact .devlog-search-wrap { flex: 1 1 190px; }

.content--device .device-log-section--compact .devlog-sev-filter {
  max-width: 100%;
  flex-wrap: wrap;
  overflow: visible;
  gap: 4px;
}

.content--device .device-log-section--compact .devlog-sev-pill {
  min-height: 28px;
  padding: 3px 7px;
}

.content--device .device-log-section--compact .devlog-meta { margin-left: auto; }
.device-log-section--compact .devlog-tail-toggle { min-height: 28px; padding: 3px 8px; }
.content--device .device-log-section--compact .devlog-pager .action-button {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 0.75rem;
}

.content--device .devlog-table.devlog-table--events {
  table-layout: fixed;
  min-width: 740px;
}

.devlog-col-time { width: 106px; }
.devlog-col-severity { width: 84px; }
.devlog-col-code { width: 64px; }
.devlog-col-source { width: 174px; }
.devlog-col-count { width: 64px; }
.content--device .devlog-table--structured { min-width: 1050px; }

.content--device .device-log-section--compact .devlog-table td {
  height: 36px;
  padding: 4px 8px;
  vertical-align: middle;
  border-left: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.78rem;
}

.content--device .device-log-section--compact .devlog-table th {
  border-bottom: 1px solid var(--clr-border);
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.content--device .device-log-section--compact .devlog-table tbody tr {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
}

.content--device .device-log-section--compact .devlog-table tbody tr:nth-child(even) { background: var(--clr-surface-alt); }
.content--device .device-log-section--compact .devlog-table tbody tr:hover,
.content--device .device-log-section--compact .devlog-table tbody tr.devlog-row--selected { background: var(--b-50); }

.content--device .device-log-section--compact .devlog-table .devlog-message-button {
  min-height: 26px;
  padding: 3px 0;
  border-radius: 2px;
  font-size: 0.78rem;
  line-height: 20px;
  font-weight: 400;
}

.device-log-section--compact .devlog-repeat-count {
  display: inline-block;
  min-width: 28px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--n-100);
  color: var(--clr-text);
  font-size: 0.72rem;
  font-weight: 600;
}

.content--device .device-log-section--compact .devlog-event-detail { max-height: 45%; }
.device-log-section--compact .devlog-detail-header {
  z-index: 3;
  background: var(--clr-surface-alt);
}
.devlog-detail-group { margin: 8px 10px 0; color: var(--clr-muted); font-size: 0.75rem; }

.device-log-section--compact :is(.devlog-message-button, .devlog-chart-toggle, .devlog-table-wrap):focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .content--device .device-log-section--compact .devlog-header-actions { width: auto; }
  .content--device .device-log-section--compact .devlog-table-wrap { min-height: 220px; }
  .content--device .device-log-section--compact .device-log-main { overflow: hidden; }
}

@media (max-width: 1180px) {
  .content--customer .customer-deep-visuals,
  .content--device .asset-overview-visuals { grid-template-columns: minmax(0, 1.35fr) minmax(270px, 1fr); }
  .content--device .device-log-layout { grid-template-columns: minmax(238px, 270px) minmax(0, 1fr); }
  .content--device .device-log-layout--sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .content--customer .customer-deep-visuals,
  .content--device .asset-overview-visuals { grid-template-columns: 1fr; }
  .content--device .asset-overview-kpis { grid-template-columns: 1fr; }
  .content--device .asset-overview-kpi-label { border-right: 0; border-bottom: 1px solid var(--clr-border); }
  .content--device .device-log-layout { grid-template-columns: 1fr; overflow: auto; }
  .content--device .device-log-sidebar { max-height: 250px; border-right: 0; border-bottom: 1px solid var(--n-900); }
  .content--device .device-log-main { overflow: visible; }
  .content--device .devlog-table-wrap { max-height: 58vh; }
}

@media (max-width: 700px) {
  .content--customer .customer-deep-donut-layout,
  .content--device .asset-overview-donut-layout { grid-template-columns: 1fr; }
  .content--customer .customer-deep-legend,
  .content--device .asset-overview-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 10px 10px; }
  .content--device .asset-overview-resource-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content--device .devlog-header-actions { justify-content: flex-start; width: 100%; }
  .content--device .devlog-evolution { margin-inline: 8px; }
}
.external-scan-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.external-scan-mode-btn:hover:not(.active) {
  background: color-mix(in srgb, var(--clr-text) 8%, transparent);
  color: var(--clr-text);
}
.external-scan-mode-btn:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 1px;
}
.external-scan-mode-btn.active {
  background: var(--clr-text);
  color: var(--clr-surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
}
/* Running-job counter: readable on both the plain and the inverted segment. */
.external-scan-mode-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-md);
  background: var(--clr-info);
  color: var(--n-0);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
}
.external-scan-mode-btn--running:not(.active) { color: var(--clr-text); }
.external-scan-mode-btn--running .external-scan-mode-count {
}
.external-scan-mode-btn.active .external-scan-mode-count {
  background: var(--clr-surface);
  color: var(--clr-text);
}

/* Passive breach intelligence: dense enough for operations, with a visual
   hierarchy that keeps confirmed breach matches separate from OSINT signals. */
.leak-page {
  display: grid;
  gap: 10px;
}
.leak-query-card,
.leak-detail-hero,
.leak-results,
.leak-signals,
.leak-source-section,
.leak-progress-card,
.leak-coverage-note {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}
.leak-query-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(480px, 1.28fr);
  gap: 18px;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--clr-primary) 11%, transparent), transparent 34%),
    var(--clr-surface);
}
.leak-query-intro {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.leak-query-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--clr-primary) 35%, var(--clr-border));
  border-radius: 50%;
  color: var(--clr-primary);
  background: color-mix(in srgb, var(--clr-primary) 8%, var(--clr-surface));
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--clr-primary) 4%, transparent);
}
.leak-query-intro h2,
.leak-section-heading h3,
.leak-detail-title h2,
.leak-progress-card h3,
.leak-results--empty h3 {
  margin: 0;
}
.leak-query-intro h2 { font-size: 1rem; }
.leak-query-intro p:last-child,
.leak-detail-title p,
.leak-progress-card p,
.leak-results--empty p {
  margin: 5px 0 0;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.leak-query-form { display: grid; gap: 9px; }
.leak-query-main {
  display: grid;
  grid-template-columns: 126px minmax(210px, 1fr) minmax(145px, 0.65fr) auto;
  gap: 8px;
  align-items: end;
}
.leak-query-form label { min-width: 0; }
.leak-query-main .action-button { min-height: 35px; white-space: nowrap; }
.leak-repository-options {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.leak-repository-options summary {
  padding: 7px 9px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.leak-repository-options label { display: grid; gap: 5px; padding: 0 9px 9px; }
.leak-repository-options textarea { resize: vertical; }
.leak-authorization {
  display: flex !important;
  gap: 7px;
  align-items: flex-start;
  color: var(--clr-muted);
  font-size: 0.66rem !important;
  line-height: 1.35;
}
.leak-authorization input { width: auto; margin-top: 1px; }
.leak-detail-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-left: 2px solid var(--clr-ok);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--clr-ok) 7%, transparent), transparent 42%),
    var(--clr-surface);
}
.leak-detail-hero--hits {
  border-left-color: var(--clr-risk);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--clr-risk) 7%, transparent), transparent 42%),
    var(--clr-surface);
}
.leak-detail-title { min-width: 0; }
.leak-detail-title h2 {
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leak-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap: 5px;
  margin: 0;
}
.leak-kpis div {
  min-width: 72px;
  padding: 6px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-surface-alt) 70%, transparent);
}
.leak-kpis dt {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.leak-kpis dd {
  margin: 2px 0 0;
  color: var(--clr-text);
  font-size: 0.84rem;
  font-weight: 700;
}
.leak-detail-actions { display: flex; gap: 5px; }
.leak-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid var(--clr-border);
}
.leak-section-heading h3 { font-size: 0.9rem; }
.leak-section-heading > span {
  color: var(--clr-muted);
  font-size: 0.66rem;
}
.leak-result-search {
  width: min(240px, 38vw);
  min-height: 29px;
  padding: 4px 8px;
  font-size: 0.72rem;
}
.leak-list-head,
.leak-item > summary {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(110px, 0.6fr) minmax(140px, 0.8fr) minmax(150px, 0.8fr) 72px;
  gap: 10px;
  align-items: center;
}
.leak-list-head {
  padding: 6px 13px;
  color: var(--clr-muted);
  background: var(--clr-surface-alt);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.leak-list { display: grid; }
.leak-item {
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
}
.leak-item:last-child { border-bottom: 0; }
.leak-item > summary {
  min-height: 55px;
  padding: 7px 13px;
  cursor: pointer;
  list-style: none;
}
.leak-item > summary::-webkit-details-marker { display: none; }
.leak-item > summary:hover { background: var(--clr-surface-alt); }
.leak-item[open] > summary { background: color-mix(in srgb, var(--clr-primary) 4%, var(--clr-surface)); }
.leak-item-what {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
  min-width: 0;
}
.leak-item-rail { border-radius: var(--radius-sm); background: var(--clr-info); }
.leak-item--high .leak-item-rail { background: var(--clr-risk); }
.leak-item--medium .leak-item-rail { background: var(--clr-warn); }
.leak-item--low .leak-item-rail { background: var(--b-500); }
.leak-item-what strong,
.leak-item-what small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leak-item-what strong { font-size: 0.78rem; }
.leak-item-what small,
.leak-item time,
.leak-item-where { color: var(--clr-muted); font-size: 0.66rem; }
.leak-provider-badges,
.leak-data-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.leak-provider-badges span,
.leak-data-chips span {
  display: inline-flex;
  min-height: 19px;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-muted);
  background: var(--clr-surface-alt);
  font-size: 0.6rem;
  font-weight: 700;
}
.leak-risk-pill {
  justify-self: start;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  color: var(--clr-info);
  background: var(--clr-info-bg);
  font-size: 0.6rem;
  font-weight: 700;
}
.leak-risk-pill--high { color: var(--clr-risk); background: var(--clr-risk-bg); }
.leak-risk-pill--medium { color: var(--a-600); background: var(--clr-warn-bg); }
.leak-item-detail {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) auto minmax(260px, 1.2fr);
  gap: 14px;
  padding: 11px 13px 13px 26px;
  border-top: 1px dashed var(--clr-border);
  background: var(--clr-surface-alt);
}
.leak-item-detail dl { display: flex; gap: 12px; margin: 0; }
.leak-item-detail dl div { min-width: 74px; }
.leak-item-detail dt { color: var(--clr-muted); font-size: 0.6rem; text-transform: uppercase; }
.leak-item-detail dd { margin: 2px 0 0; font-size: 0.72rem; font-weight: 700; }
.leak-item-detail p { margin: 0; color: var(--clr-muted); font-size: 0.72rem; line-height: 1.5; }
.leak-item-detail > a { align-self: start; color: var(--clr-primary); font-size: 0.66rem; font-weight: 700; text-decoration: none; }
.leak-results--empty {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-left: 2px solid var(--clr-ok);
}
.leak-empty-mark {
  display: grid;
  flex: 0 0 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: var(--clr-ok);
  background: var(--clr-ok-bg);
  font-weight: 700;
}
.leak-signal-grid,
.leak-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 7px;
  padding: 10px 12px 12px;
}
.leak-signal {
  padding: 9px 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.leak-signal--high { border-left-color: var(--clr-risk); }
.leak-signal--medium { border-left-color: var(--clr-warn); }
.leak-signal div span { display: block; color: var(--clr-primary); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; }
.leak-signal div strong { font-size: 0.72rem; }
.leak-signal p { margin: 5px 0; color: var(--clr-muted); font-size: 0.66rem; line-height: 1.4; }
.leak-signal small { color: var(--clr-muted); font-size: 0.6rem; }
.leak-source-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: inherit;
  background: var(--clr-surface-alt);
  text-decoration: none;
}
.leak-source-card:hover { border-color: color-mix(in srgb, var(--clr-primary) 45%, var(--clr-border)); }
.leak-source-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--clr-primary);
  background: color-mix(in srgb, var(--clr-primary) 9%, var(--clr-surface));
}
.leak-source-copy { min-width: 0; }
.leak-source-copy strong,
.leak-source-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leak-source-copy strong { font-size: 0.72rem; }
.leak-source-copy small { margin-top: 2px; color: var(--clr-muted); font-size: 0.6rem; }
.leak-source-state {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--clr-ok);
  background: var(--clr-ok-bg);
  font-size: 0.6rem;
  font-weight: 700;
}
.leak-source-state--error,
.leak-source-state--unavailable,
.leak-source-state--missing { color: var(--clr-risk); background: var(--clr-risk-bg); }
.leak-source-state--rate_limited { color: var(--a-600); background: var(--clr-warn-bg); }
.leak-source-state--not_applicable { color: var(--clr-muted); background: var(--clr-surface); }
.leak-progress-card {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 18px;
  border-left: 2px solid var(--clr-primary);
}
.leak-progress-card--error { border-left-color: var(--clr-risk); }
.leak-progress-orbit {
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--clr-primary) 18%, transparent);
  border-top-color: var(--clr-primary);
  border-radius: 50%;
  animation: leak-spin 0.9s linear infinite;
}
@keyframes leak-spin { to { transform: rotate(360deg); } }
/* Crawl progress: a long Tor crawl otherwise shows an empty result list for
   minutes without telling the operator that it is advancing. */
.darkweb-progress-card { align-items: flex-start; }
.darkweb-progress-card > div { min-width: 0; flex: 1 1 auto; }
.darkweb-progress-paused {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
  font-size: 0.78rem;
}
.darkweb-progress-bar {
  margin-top: 8px;
  height: 5px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-primary) 14%, transparent);
  overflow: hidden;
}
.darkweb-progress-bar > span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--clr-primary);
  transition: width 0.4s ease;
}
/* Crawl locations that are not plain http(s) stay inert text. */
.darkweb-match-where {
  color: var(--clr-muted);
  font-size: 0.66rem;
  word-break: break-all;
}

/* Wrapper keeps the leak detail blocks on the page grid rhythm. */
.leak-detail-wrap {
  display: grid;
  gap: 10px;
}

/* History rows are activated with mouse or keyboard, so they need a visible
   focus ring of their own. */
.scan-history-table tbody tr[tabindex="0"] { cursor: pointer; }
.scan-history-table tbody tr[tabindex="0"]:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
}

.leak-coverage-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 9px 12px;
  color: var(--clr-muted);
  background: var(--clr-surface-alt);
  font-size: 0.66rem;
  line-height: 1.45;
}
.leak-coverage-note strong { color: var(--clr-text); }
.leak-attribution { margin: -3px 2px 0; color: var(--clr-muted); font-size: 0.6rem; text-align: right; }
.leak-attribution a { color: inherit; }
.leak-history-block { margin-top: 2px; }

@media (max-width: 1080px) {
  .leak-query-card { grid-template-columns: 1fr; }
  .leak-query-main { grid-template-columns: 120px minmax(200px, 1fr) minmax(140px, 0.6fr) auto; }
  .leak-detail-hero { grid-template-columns: 1fr; }
  .leak-kpis { width: 100%; }
}
@media (max-width: 760px) {
  .leak-query-main { grid-template-columns: 1fr; }
  .leak-list-head { display: none; }
  .leak-item > summary { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 9px; }
  .leak-item-what { grid-row: span 2; }
  .leak-item-where,
  .leak-provider-badges { display: none; }
  .leak-risk-pill { grid-column: 2; }
  .leak-item-detail { grid-template-columns: 1fr; padding-left: 18px; }
  .leak-kpis { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
  .leak-source-grid,
  .leak-signal-grid { grid-template-columns: 1fr; }
}
.external-scan-card {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.external-scan-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.external-scan-card-head .eyebrow {
  margin: 0 0 2px;
}
.external-scan-card-head h3 {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.25;
}
.external-scan-card-head > span,
.external-scan-card-head > small {
  color: var(--clr-muted);
  font-size: 0.72rem;
  text-align: right;
}

.external-scan-form-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) minmax(140px, 0.65fr);
  gap: 8px;
}
.external-scan-card--form textarea {
  min-height: 72px;
}
.external-scan-card--form .module-actions {
  justify-content: flex-end;
}
.external-scan-card--history-full {
  margin-top: 10px;
}
.external-scan-terminal-card {
  min-width: 0;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid rgba(88, 166, 255, 0.24);
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--n-200);
}
.external-scan-ai-card {
  min-width: 0;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
}
.external-scan-ai-card .external-scan-terminal-head .eyebrow,
.external-scan-ai-card .external-scan-terminal-toolbar {
  color: var(--clr-muted);
}
.external-scan-ai-card .external-scan-terminal-head h3 {
  color: var(--clr-text);
}
.external-scan-ai-card .external-scan-terminal-status {
  border-color: var(--clr-border);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
}
.external-scan-ai-form {
  display: grid;
  grid-template-columns: minmax(170px, .55fr) minmax(180px, .55fr) minmax(280px, 1.35fr) auto;
  gap: 8px;
  margin: 8px 0 10px;
  align-items: end;
}
.external-scan-ai-form label {
  color: var(--clr-muted);
}
.external-scan-ai-mode-field {
  min-width: 0;
  color: var(--clr-muted);
}
.external-scan-ai-mode-field > span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}
.external-scan-ai-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  min-height: 36px;
  padding: 2px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.external-scan-ai-mode-toggle label {
  position: relative;
  min-width: 0;
}
.external-scan-ai-mode-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.external-scan-ai-mode-toggle span {
  display: grid;
  place-items: center;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--clr-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.external-scan-ai-mode-toggle input:focus-visible + span {
  outline: 2px solid var(--clr-primary);
  outline-offset: 1px;
}
.external-scan-ai-mode-toggle input:checked + span {
  background: var(--clr-text);
  color: var(--clr-surface);
}
.external-scan-ai-mode-toggle input[value="aggressive"]:checked + span {
  background: var(--r-700);
  color: var(--n-0);
}
.external-scan-ai-form input,
.external-scan-ai-form select,
.external-scan-ai-form textarea {
  background: var(--clr-surface-alt);
  border-color: var(--clr-border);
  color: var(--clr-text);
}
.external-scan-ai-focus {
  grid-column: auto;
}
.external-scan-ai-focus textarea {
  min-height: 42px;
  resize: vertical;
}
.external-scan-ai-actions {
  grid-column: auto;
  justify-content: flex-end;
}
.external-scan-ai-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 10px;
  align-items: stretch;
}
.external-scan-ai-main {
  min-width: 0;
}
.external-scan-ai-status-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.external-scan-ai-live-progress {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

/* Full-width Variante: Progress-Banner über Terminal + Aside. */
.external-scan-ai-live-progress--bar {
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
}
.external-scan-ai-live-progress--bar .external-scan-ai-live-progress-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.external-scan-ai-live-progress--bar .external-scan-ai-live-progress-step {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
  color: var(--clr-text);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.external-scan-ai-live-progress--bar small {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.external-scan-ai-live-progress--bar .external-scan-ai-progress-track {
  height: 9px;
  margin: 0 0 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.04);
}
.external-scan-ai-live-progress--bar .external-scan-ai-progress-track span {
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
  box-shadow: 0 0 12px rgba(26, 107, 138, 0.35);
}
.external-scan-ai-live-progress--bar .external-scan-ai-phasebar {
  height: 22px;
  border-radius: var(--radius-sm);
}
.external-scan-ai-live-progress-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  margin-bottom: 7px;
}
.external-scan-ai-live-progress-head > span {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.external-scan-ai-live-progress-head strong {
  color: var(--clr-text);
  font-size: 0.9rem;
}
.external-scan-ai-live-progress-head p,
.external-scan-ai-live-progress-head small,
.external-scan-ai-live-progress-meta {
  grid-column: 1 / -1;
}
.external-scan-ai-live-progress-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}
.external-scan-ai-live-progress-meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.external-scan-ai-activity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 34ch;
  color: var(--clr-text);
}
.external-scan-ai-activity-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--clr-muted);
}
.external-scan-ai-activity-pill[data-state="active"]::before {
  background: var(--g-500);
  box-shadow: 0 0 0 4px rgba(31, 157, 106, .13);
}
.external-scan-ai-activity-pill[data-state="waiting"]::before {
  background: var(--a-500);
  box-shadow: 0 0 0 4px rgba(192, 138, 32, .12);
}
.external-scan-ai-activity-pill[data-state="complete"]::before {
  background: var(--g-500);
}
.external-scan-ai-phasebar {
  display: flex;
  min-width: 0;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.external-scan-ai-phasebar-segment {
  display: grid;
  place-items: center;
  min-width: 20px;
  padding: 0 4px;
  border-right: 1px solid var(--clr-border);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.external-scan-ai-phasebar-segment:last-child {
  border-right: 0;
}
.external-scan-ai-phasebar-segment.is-complete {
  background: rgba(38, 132, 92, .16);
  color: var(--g-500);
}
.external-scan-ai-phasebar-segment.is-active {
  background: rgba(21, 130, 216, .18);
  color: var(--clr-primary);
}
.external-scan-ai-progress-track {
  height: 5px;
  margin: 7px 0 8px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.external-scan-ai-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--clr-primary);
  transition: width .25s ease;
}
.external-scan-ai-live-progress p {
  margin: 0;
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 700;
}
.external-scan-ai-live-progress small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--clr-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
}
.external-scan-ai-command {
  margin-top: 7px;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.66rem;
}
.external-scan-ai-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.external-scan-ai-progress > div {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.external-scan-ai-progress span {
  display: block;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.external-scan-ai-progress strong {
  display: block;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
}
.external-scan-ai-processes {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.external-scan-ai-processes strong {
  display: block;
  margin-bottom: 5px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}
.external-scan-ai-processes pre {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.72rem;
}
.external-scan-ai-terminal-container {
  height: clamp(420px, 56vh, min(760px, calc(100vh - 250px)));
}
.external-scan-ai-report {
  margin-top: 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  overflow: hidden;
}
.external-scan-ai-report-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
}
.external-scan-ai-report-head .eyebrow,
.external-scan-ai-report-head h3 {
  margin: 0;
}
.external-scan-ai-report-head small {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.external-scan-ai-report-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 44px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--b-700);
}
.external-scan-ai-report-brand img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}
.external-scan-ai-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.external-scan-ai-report-preview {
  padding: 12px;
  border-top: 1px solid var(--clr-border);
  background: var(--n-50);
}
.external-scan-ai-report-preview[hidden] {
  display: none;
}
.external-scan-ai-report-preview-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.7fr .85fr .55fr;
  gap: 8px;
  margin-bottom: 10px;
}
.external-scan-ai-report-preview-grid > div,
.external-scan-ai-report-card {
  min-width: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.external-scan-ai-report-preview-grid > div {
  padding: 10px;
}
.external-scan-ai-report-preview-grid span,
.external-scan-ai-report-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}
.external-scan-ai-report-preview-grid strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--clr-text);
  font-size: 0.84rem;
}
.external-scan-ai-report-cards {
  display: grid;
  gap: 8px;
}
.external-scan-ai-report-card {
  padding: 10px;
  border-left: 2px solid var(--n-400);
}
.external-scan-ai-report-card--high {
  border-left-color: var(--r-600);
}
.external-scan-ai-report-card--medium {
  border-left-color: var(--a-500);
}
.external-scan-ai-report-card--info {
  border-left-color: var(--clr-primary);
}
.external-scan-ai-report-card strong {
  display: block;
  color: var(--clr-text);
  font-size: 0.9rem;
}
.external-scan-ai-report-card p {
  margin: 5px 0 0;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.external-scan-ai-report-line {
  padding: 10px 12px;
  color: var(--clr-muted);
  font-size: 0.84rem;
  font-weight: 700;
}
.external-scan-terminal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.external-scan-terminal-head .eyebrow {
  margin: 0 0 2px;
  color: var(--b-500);
}
.external-scan-terminal-head h3 {
  margin: 0;
  color: var(--b-50);
  font-size: 1rem;
}
.external-scan-terminal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.external-scan-terminal-status {
  min-width: 76px;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: var(--radius-sm);
  color: var(--n-400);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.external-scan-terminal-status[data-tone="ok"] {
  border-color: rgba(86, 211, 100, 0.36);
  color: var(--g-500);
}
.external-scan-terminal-status[data-tone="active"] {
  border-color: rgba(121, 192, 255, 0.42);
  color: var(--b-500);
}
.external-scan-terminal-status[data-tone="risk"] {
  border-color: rgba(255, 123, 114, 0.42);
  color: var(--r-500);
}
.external-scan-terminal-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--n-400);
  font-size: 0.72rem;
}
.external-scan-terminal-container {
  height: clamp(420px, 62vh, min(820px, calc(100vh - 190px)));
  min-height: 360px;
  max-height: none;
  margin: 0;
  border-color: rgba(88, 166, 255, 0.22);
  background: var(--n-900);
}
#external-scan-terminal {
  flex: 1;
  height: 100%;
  min-height: 0;
}
.external-scan-table {
  min-width: 780px;
}
.external-scan-page > .scan-detail-block {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.external-scan-empty-detail {
  padding: 14px;
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
}
.external-scan-empty-detail .eyebrow {
  margin: 0 0 2px;
}
.external-scan-empty-detail h3 {
  margin: 0;
  font-size: 0.96rem;
  color: var(--clr-text);
}

@media (max-width: 980px) {
  .external-scan-hero {
    flex-direction: column;
  }
  .external-scan-hero-actions {
    justify-content: flex-start;
  }
  .external-scan-layout,
  .external-scan-form-grid {
    grid-template-columns: 1fr;
  }
  .external-scan-terminal-head,
  .external-scan-terminal-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .external-scan-terminal-actions {
    justify-content: flex-start;
  }
  .external-scan-ai-form {
    grid-template-columns: 1fr;
  }
  .external-scan-ai-workspace,
  .external-scan-ai-report-head,
  .external-scan-ai-report-preview-grid {
    grid-template-columns: 1fr;
  }
  .external-scan-ai-progress {
    grid-template-columns: 1fr;
  }
  .external-scan-ai-report-actions {
    justify-content: flex-start;
  }
  .external-scan-ai-focus,
  .external-scan-ai-actions,
  .external-scan-ai-mode-field {
    grid-column: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   KI Insights — calmer, severity-coloured, fewer accordion levels
   ────────────────────────────────────────────────────────────────────── */
.analysis-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.analysis-panel-title { min-width: 0; }
.analysis-panel-title .eyebrow { margin: 0 0 2px; }
.analysis-panel-title h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--clr-text);
}
.analysis-updated-meta {
  margin: 3px 0 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.analysis-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.analysis-severity-strip,
.analysis-category-strip,
.ai-agent-findings,
.ai-agent-categories {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.analysis-category-strip {
  margin: 0 0 12px;
}

.analysis-category-strip--inline {
  margin: 0 0 8px;
}

.analysis-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 7px;
}

.analysis-section-title .eyebrow {
  margin: 0;
}

.analysis-section-title span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.analysis-section-title--agents {
  margin-top: 12px;
}

.ai-sev-pill,
.analysis-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ai-sev-pill strong,
.analysis-cat-chip strong,
.analysis-cat-chip small {
  color: var(--clr-text);
  font-size: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.analysis-cat-chip small {
  min-width: 16px;
  min-height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, .08);
  color: var(--clr-muted);
}

.analysis-cat-chip--compact {
  min-height: 22px;
  padding: 2px 7px;
  font-size: 0.66rem;
}

.analysis-cat-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(15, 23, 42, .07);
  color: currentColor;
  font-size: 0.66rem;
  line-height: 1;
}

.ai-sev-pill--critical,
.ai-sev-pill--high,
.analysis-cat-chip--risk {
  border-color: rgba(185, 28, 28, .28);
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.ai-sev-pill--medium,
.analysis-cat-chip--warn {
  border-color: rgba(217, 119, 6, .3);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.ai-sev-pill--info,
.analysis-cat-chip--info {
  border-color: rgba(64, 100, 215, .22);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

.ai-sev-pill--clear,
.analysis-cat-chip--clear,
.analysis-cat-chip--neutral {
  border-color: var(--clr-border);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
}

.analysis-kpi {
  display: flex;
  gap: 18px;
  margin: 0;
  flex-wrap: wrap;
}
.analysis-kpi--insights {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--clr-border);
}
.analysis-kpi > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 56px;
}
.analysis-kpi dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin: 0;
}
.analysis-kpi dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.analysis-kpi dd strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text);
}
.analysis-kpi dd strong.analysis-kpi-risk {
  color: var(--clr-risk);
}

.analysis-priority {
  margin-bottom: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--clr-border);
}
.analysis-priority-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px;
}
.ai-priority-item {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ai-priority-item--critical { box-shadow: inset 3px 0 0 var(--clr-risk); }
.ai-priority-item--risk     { box-shadow: inset 3px 0 0 var(--clr-risk); }
.ai-priority-item--high     { box-shadow: inset 3px 0 0 var(--a-500); }
.ai-priority-item--medium,
.ai-priority-item--warning,
.ai-priority-item--warn     { box-shadow: inset 3px 0 0 var(--clr-warn); }
.ai-priority-item--info     { box-shadow: inset 3px 0 0 var(--clr-info); }
.ai-priority-item > summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}
.ai-priority-sev {
  justify-self: start;
}
.ai-priority-item > summary > strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--clr-text);
}
.ai-priority-item > p {
  margin: 0;
  padding: 0 10px 10px;
  font-size: 0.78rem;
  color: var(--clr-muted);
  line-height: 1.4;
}

/* Per-agent collapsible row — single line when closed. */
.analysis-agent-list {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}
.ai-agent-row {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  overflow: hidden;
}
.ai-agent-row > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 16px 28px minmax(170px, 1.2fr) minmax(120px, .9fr) minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 10px;
  user-select: none;
}
.ai-agent-row > summary::-webkit-details-marker { display: none; }
.ai-agent-row > summary::before {
  content: none;
}
.ai-agent-chevron {
  color: var(--clr-xmuted);
  transition: transform var(--t-fast);
}
.ai-agent-row[open] .ai-agent-chevron { transform: rotate(90deg); }
.ai-agent-row--critical { box-shadow: inset 3px 0 0 var(--clr-risk); }
.ai-agent-row--high     { box-shadow: inset 3px 0 0 var(--a-500); }
.ai-agent-row--medium   { box-shadow: inset 3px 0 0 var(--clr-warn); }
.ai-agent-row--info     { box-shadow: inset 3px 0 0 var(--clr-border); }

.ai-agent-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.ai-agent-icon--critical,
.ai-agent-icon--high {
  border-color: rgba(185, 28, 28, .28);
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.ai-agent-icon--medium {
  border-color: rgba(217, 119, 6, .3);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.ai-agent-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ai-agent-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--clr-text);
}
.ai-agent-title small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.ai-agent-when {
  font-size: 0.72rem;
  color: var(--clr-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ai-agent-renew {
  padding: 4px 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}
.ai-agent-body {
  padding: 9px 12px 12px 62px;
  border-top: 1px solid var(--clr-subtle);
  background: var(--clr-surface-alt);
}

.ai-job-summary { display: none; } /* replaced by analysis-fazit */

.analysis-fazit {
  margin: 0 0 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--clr-info) 6%, var(--clr-surface));
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: 0 6px 6px 0;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--clr-text);
}

.ai-finding-list {
  display: grid;
  gap: 4px;
}
.ai-finding {
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.ai-finding-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ai-finding--critical .ai-finding-row { box-shadow: inset 3px 0 0 var(--clr-risk); }
.ai-finding--risk     .ai-finding-row { box-shadow: inset 3px 0 0 var(--clr-risk); }
.ai-finding--high     .ai-finding-row { box-shadow: inset 3px 0 0 var(--a-500); }
.ai-finding--medium   .ai-finding-row,
.ai-finding--warning  .ai-finding-row,
.ai-finding--warn     .ai-finding-row { box-shadow: inset 3px 0 0 var(--clr-warn); }
.ai-finding--info     .ai-finding-row { box-shadow: inset 3px 0 0 var(--clr-info); }
.ai-finding-sev {
  justify-self: start;
}
.ai-finding-text { min-width: 0; }
.ai-finding-text strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-text);
}
.ai-finding-more {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}
.ai-finding-detail {
  display: grid;
  gap: 8px;
  padding: 9px 12px 10px;
  border: 1px solid var(--clr-border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--clr-surface-alt);
}

.ai-finding-detail-section {
  display: grid;
  gap: 5px;
}

.ai-finding-detail-section h4 {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.ai-finding-detail-section p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--clr-text);
  line-height: 1.5;
}

.ai-finding-steps-list {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.84rem;
}
.ai-finding-steps-list li { line-height: 1.45; }
.ai-finding-steps-list li strong { display: block; font-size: 0.84rem; }
.ai-finding-steps-list li span { color: var(--clr-text-muted, var(--n-800)); font-size: 0.78rem; }

.ai-evidence-kv-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 0.78rem;
}
.ai-evidence-kv {
  display: grid;
  grid-template-columns: minmax(100px, 30%) 1fr;
  gap: 0;
  border-bottom: 1px solid var(--clr-border);
}
.ai-evidence-kv:last-child { border-bottom: 0; }
.ai-evidence-kv--raw { grid-template-columns: 1fr; }
.ai-evidence-kv dt {
  padding: 3px 8px;
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--clr-border);
}
.ai-evidence-kv dd {
  margin: 0;
  padding: 3px 8px;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.78rem;
  word-break: break-all;
  color: var(--clr-text);
}

.ai-evidence-list {
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78rem;
  font-family: ui-monospace, "Cascadia Code", monospace;
  color: var(--clr-text);
  line-height: 1.45;
}

.ai-finding-evidence {
  margin: 0;
  padding: 8px 10px;
  background: var(--clr-subtle);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
  color: var(--clr-text);
}

@media (max-width: 900px) {
  .ai-agent-row > summary {
    grid-template-columns: 16px 28px minmax(0, 1fr) auto;
  }
  .analysis-head-actions {
    justify-content: flex-start;
  }
  .ai-agent-findings,
  .ai-agent-categories,
  .ai-agent-when { display: none; }
  .ai-agent-body {
    padding-left: 12px;
  }
  .ai-finding-row {
    grid-template-columns: 1fr auto;
  }
  .ai-finding-category,
  .ai-finding-sev {
    display: none;
  }
}

.analysis-priority-list {
  grid-template-columns: 1fr;
}

.analysis-priority-table-scroll,
.analysis-agent-table-scroll {
  max-height: calc(100vh - 260px);
  overflow: auto;
}

.analysis-priority-table-scroll {
  margin-bottom: 12px;
}

.ai-priority-table,
.ai-finding-table,
.ai-agent-table {
  width: 100%;
  table-layout: fixed;
  border: 0;
  border-radius: 0;
}

.ai-agent-table {
  min-width: 1040px;
}

.ai-priority-table {
  min-width: 920px;
}

.ai-finding-table {
  min-width: 540px;
}

.ai-priority-table .ai-priority-col-sev {
  width: 96px;
}

.ai-priority-table .ai-priority-col-category {
  width: 170px;
}

.ai-priority-table .ai-priority-col-title {
  width: 38%;
}

.ai-priority-table .ai-priority-col-action {
  width: auto;
}

.ai-finding-table .ai-finding-col-sev {
  width: 108px;
}

.ai-finding-table .ai-finding-col-category {
  width: 150px;
}

.ai-finding-table .ai-finding-col-title {
  width: auto;
}

.ai-agent-table .ai-agent-col-state {
  width: 76px;
}

.ai-agent-table .ai-agent-col-agent {
  width: 260px;
}

.ai-agent-table .ai-agent-col-findings {
  width: 230px;
}

.ai-agent-table .ai-agent-col-categories {
  width: 260px;
}

.ai-agent-table .ai-agent-col-updated {
  width: 150px;
}

.ai-agent-table .ai-agent-col-action {
  width: 116px;
}

.ai-agent-table .ai-agent-row {
  display: table-row;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 0;
  grid-template-columns: none;
  min-height: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.ai-priority-table .ai-priority-row,
.ai-finding-table .ai-finding-row {
  display: table-row;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 0;
  grid-template-columns: none;
  min-height: 0;
  box-shadow: none;
  padding: 0;
}

.ai-agent-table .ai-agent-row td,
.ai-priority-table .ai-priority-row td,
.ai-finding-table .ai-finding-row td {
  vertical-align: middle;
}

.ai-agent-table .ai-agent-row:hover td,
.ai-agent-table .ai-agent-row--expanded td,
.ai-priority-table .ai-priority-row:hover td,
.ai-priority-table .ai-priority-row--expanded td,
.ai-finding-table .ai-finding-row:hover td,
.ai-finding-table .ai-finding-row--expanded td {
  background: var(--clr-surface-alt);
}

.ai-agent-table .ai-agent-row:focus-visible td,
.ai-priority-table .ai-priority-row:focus-visible td,
.ai-finding-table .ai-finding-row:focus-visible td {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
}

.ai-agent-table .ai-agent-row td:first-child,
.ai-priority-table .ai-priority-row td:first-child,
.ai-finding-table .ai-finding-row td:first-child {
  border-left: 2px solid var(--clr-border);
}

.ai-agent-table .ai-agent-row--critical td:first-child,
.ai-agent-table .ai-agent-row--high td:first-child,
.ai-priority-table .ai-priority-row--critical td:first-child,
.ai-priority-table .ai-priority-row--high td:first-child,
.ai-finding-table .ai-finding-row--critical td:first-child,
.ai-finding-table .ai-finding-row--high td:first-child {
  border-left-color: var(--clr-risk);
}

.ai-agent-table .ai-agent-row--medium td:first-child,
.ai-priority-table .ai-priority-row--medium td:first-child,
.ai-finding-table .ai-finding-row--medium td:first-child {
  border-left-color: var(--clr-warn);
}

.ai-agent-table .ai-agent-row--info td:first-child,
.ai-priority-table .ai-priority-row--info td:first-child,
.ai-finding-table .ai-finding-row--info td:first-child {
  border-left-color: var(--clr-info);
}

.ai-agent-state-cell {
  white-space: nowrap;
}

.ai-priority-sev-cell,
.ai-finding-sev-cell {
  white-space: nowrap;
}

.ai-finding-sev-cell {
  display: flex !important;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.ai-row-toggle,
.ai-agent-row-toggle {
  display: inline-block;
  width: 14px;
  margin-right: 6px;
  color: var(--clr-muted);
  transition: transform var(--t-fast);
}

.ai-agent-row--expanded .ai-agent-row-toggle,
.ai-priority-row--expanded .ai-row-toggle,
.ai-finding-row--expanded .ai-row-toggle {
  transform: rotate(90deg);
}

.ai-agent-title-cell,
.ai-agent-action-cell,
.ai-priority-title-cell,
.ai-priority-action-cell,
.ai-finding-title-cell,
.ai-finding-action-cell {
  min-width: 0;
}

.ai-agent-table .ai-agent-icon {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
}

.ai-agent-table .ai-agent-findings,
.ai-agent-table .ai-agent-categories,
.ai-priority-category-cell,
.ai-finding-category-cell {
  flex-wrap: nowrap;
  overflow: hidden;
}

.ai-agent-table .ai-sev-pill,
.ai-agent-table .analysis-cat-chip,
.ai-priority-table .ai-sev-pill,
.ai-priority-table .analysis-cat-chip,
.ai-finding-table .ai-sev-pill,
.ai-finding-table .analysis-cat-chip {
  flex: 0 0 auto;
}

.ai-priority-title-cell strong,
.ai-finding-title-cell strong {
  display: block;
  min-width: 0;
  color: var(--clr-text);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}
.ai-finding-summary-preview {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.ai-agent-table .ai-agent-when,
.ai-priority-action-cell {
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Action preview embedded in title cell */
.ai-finding-action-preview {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--clr-info);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  opacity: .85;
}

.ai-agent-detail-cell,
.ai-priority-detail-row .ai-finding-detail-cell,
.ai-finding-detail-cell {
  padding: 0 !important;
  background: var(--clr-surface-alt);
}

.ai-agent-detail-row[hidden],
.ai-priority-detail-row[hidden],
.ai-finding-detail-row[hidden] {
  display: none;
}

.ai-agent-table .ai-agent-body {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}

/* Device assessment tabs: keep Threat Hunting and Vulnerabilities aligned with Hardening. */
.threat-signal-grid,
.vulnerability-assessment-panel + .security-signal-grid {
  margin-top: 0;
}

.threat-signal-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.security-signal-card--button {
  appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

.security-signal-card--button:hover,
.security-signal-card--button.active {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.security-signal-card--button:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

.security-signal-card--warn {
  border-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.security-signal-card--warn strong {
  color: var(--clr-warn);
}

.security-signal-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem !important;
}

.threat-assessment-panel,
.vulnerability-assessment-panel {
  display: grid;
  gap: 10px;
}

.assessment-list {
  display: grid;
  gap: 8px;
}

.assessment-item {
  display: grid;
  grid-template-columns: 128px minmax(280px, 1fr) minmax(260px, 0.78fr);
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  cursor: default;
}

.assessment-item[role="button"] {
  cursor: pointer;
}

.assessment-item[role="button"]:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.assessment-status,
.assessment-action,
.assessment-main {
  min-width: 0;
}

.assessment-status {
  display: grid;
  align-content: start;
  gap: 6px;
}

.assessment-status strong,
.assessment-action span,
.assessment-title-row span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.assessment-main {
  display: grid;
  gap: 8px;
}

.assessment-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.hardening-assessment-item .assessment-title-row {
  grid-template-columns: minmax(0, 1fr);
}

.assessment-title-row strong {
  display: block;
  color: var(--clr-text);
  font-size: 0.96rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.assessment-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.assessment-meta-line > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.assessment-action {
  display: grid;
  gap: 5px;
  line-height: 1.45;
}

.assessment-action strong {
  color: var(--clr-text);
  font-size: 0.84rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.assessment-evidence {
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.assessment-detail {
  margin-top: -4px;
}

.assessment-item.sw-row--risk,
.assessment-item.hardening-row--fail {
  border-left-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.assessment-item.sw-row--cve,
.assessment-item.sw-row--update,
.assessment-item.hardening-row--warn,
.assessment-item.hardening-row--warning {
  border-left-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.assessment-item.sw-row--clear,
.assessment-item.hardening-row--pass,
.assessment-item.hardening-row--ok {
  border-left-color: var(--clr-ok);
}

.hardening-table {
  min-width: 1080px;
  table-layout: fixed;
}

/* 112px schnitten "Nicht anwendbar" auf "Nicht anwen…" ab. */
.hardening-col-status {
  width: 140px;
}

.hardening-settled {
  margin-top: 10px;
  border-top: 1px solid var(--clr-border);
}

.hardening-settled > summary {
  padding: 9px 2px;
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  list-style: none;
}

.hardening-settled > summary::-webkit-details-marker { display: none; }
.hardening-settled > summary::before { content: "▸ "; }
.hardening-settled[open] > summary::before { content: "▾ "; }

.hardening-no-action {
  color: var(--clr-muted);
  font-size: 0.74rem;
}

.hardening-col-check {
  width: 300px;
}

.hardening-col-detail {
  width: 320px;
}

.hardening-col-recommendation {
  width: auto;
}

.hardening-table th:nth-child(1),
.hardening-table td:nth-child(1) {
  width: 140px;
}

.hardening-table th:nth-child(2),
.hardening-table td:nth-child(2) {
  width: 300px;
}

.hardening-table th:nth-child(3),
.hardening-table td:nth-child(3) {
  width: 320px;
}

.hardening-table th:nth-child(4),
.hardening-table td:nth-child(4) {
  width: auto;
}

.hardening-table td {
  vertical-align: top;
}

.hardening-table-row {
  cursor: pointer;
}

.hardening-table-row:hover td,
.hardening-row--expanded td {
  background: var(--clr-surface-alt);
}

.hardening-table-row:focus-visible td {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
}

.hardening-table-row td:first-child {
  border-left: 2px solid var(--clr-info);
}

.hardening-table-row.hardening-row--fail td:first-child {
  border-left-color: var(--clr-risk);
}

.hardening-table-row.hardening-row--warn td:first-child,
.hardening-table-row.hardening-row--warning td:first-child {
  border-left-color: var(--clr-warn);
}

.hardening-table-row.hardening-row--pass td:first-child,
.hardening-table-row.hardening-row--ok td:first-child {
  border-left-color: var(--clr-ok);
}

.hardening-status-text {
  display: block;
  margin-top: 5px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.hardening-status-cell,
.hardening-check-cell {
  min-width: 0;
}

.hardening-status-inline {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 6px;
  white-space: nowrap;
}

.hardening-check-stack {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.hardening-check-cell strong {
  display: block;
  color: var(--clr-text);
  font-size: 0.84rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hardening-detail-expanded-cell {
  background: var(--clr-surface-alt);
}

.hardening-detail-expanded {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1fr) minmax(300px, 1.15fr);
  gap: 14px;
  padding: 14px 16px;
}

.hardening-detail-block {
  min-width: 0;
}

.hardening-detail-block--recommendation {
  padding-left: 12px;
  border-left: 2px solid var(--clr-primary);
}

.hardening-detail-expanded strong {
  display: block;
  margin-bottom: 5px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hardening-detail-expanded p {
  margin: 0;
  color: var(--clr-text);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 900px) {
  .hardening-detail-expanded {
    grid-template-columns: 1fr;
  }
}

.hardening-check-stack > span {
  display: block;
  margin-top: 1px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Detail + recommendation cells: keep single line in compact mode; expanded
   row already provides the full multi-line text. */
.hardening-detail-cell,
.hardening-recommendation-cell {
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}
.hardening-table-row td {
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
}
.hardening-table-row td:first-child {
  white-space: nowrap;
}
.hardening-status-text {
  margin-left: 0;
  margin-top: 0;
  display: inline-block;
  vertical-align: middle;
}

.hunt-table--assessment,
.vuln-table--assessment {
  min-width: 980px;
  table-layout: fixed;
}

.hunt-table--assessment th:nth-child(1),
.hunt-table--assessment td:nth-child(1),
.vuln-table--assessment th:nth-child(1),
.vuln-table--assessment td:nth-child(1) {
  width: 150px;
}

.hunt-table--assessment th:nth-child(2),
.hunt-table--assessment td:nth-child(2),
.vuln-table--assessment th:nth-child(2),
.vuln-table--assessment td:nth-child(2) {
  width: 32%;
}

.hunt-table--assessment th:nth-child(3),
.hunt-table--assessment td:nth-child(3),
.vuln-table--assessment th:nth-child(3),
.vuln-table--assessment td:nth-child(3) {
  width: 25%;
}

.hunt-table--assessment th:nth-child(4),
.hunt-table--assessment td:nth-child(4),
.vuln-table--assessment th:nth-child(4),
.vuln-table--assessment td:nth-child(4) {
  width: auto;
}

.hunt-table--assessment .hunt-rating-cell,
.vuln-table--assessment .vuln-rating-cell {
  white-space: normal;
}

.hunt-table--assessment .hunt-row td,
.vuln-table--assessment .vuln-row td {
  vertical-align: middle;
  padding-top: 9px;
  padding-bottom: 9px;
}

.hunt-table--assessment .hunt-signal-text,
.hunt-table--assessment .hunt-signal-meta,
.hunt-table--assessment .hunt-context-cell strong,
.hunt-table--assessment .hunt-context-cell span,
.hunt-table--assessment .hunt-action-text,
.vuln-table--assessment .vuln-product-cell strong,
.vuln-table--assessment .vuln-product-cell span,
.vuln-table--assessment .vuln-version-text,
.vuln-table--assessment .vuln-cve-inline,
.vuln-table--assessment .vuln-action-cell span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}

.hunt-table--assessment .hunt-signal-text {
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.hunt-table--assessment .hunt-signal-meta {
  min-height: 0;
}

.hunt-table--assessment .hunt-rating-cell {
  white-space: nowrap;
}

.hunt-table--assessment .hunt-rating-confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  margin-left: 6px;
  vertical-align: middle;
}

.hunt-table--assessment .hunt-signal-inner {
  display: grid;
  grid-template-columns: 18px minmax(140px, 1fr) minmax(90px, 0.45fr);
  align-items: center;
  gap: 8px;
}

.hunt-table--assessment .hunt-expand-icon {
  margin-top: 0;
}

.hunt-table--assessment .hunt-signal-text {
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.25;
}

.hunt-table--assessment .hunt-signal-meta {
  min-width: 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.hunt-table--assessment .hunt-context-cell {
  min-width: 0;
  white-space: nowrap;
}

.hunt-table--assessment .hunt-context-cell strong {
  display: inline-block;
  max-width: 44%;
  vertical-align: middle;
}

.hunt-table--assessment .hunt-context-cell span {
  display: inline-block;
  max-width: calc(56% - 12px);
  margin-top: 0;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--clr-border);
  vertical-align: middle;
}

.hunt-table--assessment .hunt-action-cell .hunt-action-text {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vuln-table-row > td:first-child {
  box-shadow: inset 3px 0 0 var(--clr-border);
}

.vuln-table-row.sw-row--risk > td:first-child {
  box-shadow: inset 3px 0 0 var(--clr-risk);
}

.vuln-table-row.sw-row--cve > td:first-child,
.vuln-table-row.sw-row--update > td:first-child {
  box-shadow: inset 3px 0 0 var(--clr-warn);
}

.hunt-action-cell,
.vuln-action-cell {
  color: var(--clr-text);
  font-size: 0.84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.vuln-table--assessment .vuln-version-cell {
  display: flex;
  gap: 7px;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.vuln-table--assessment .vuln-product-cell,
.hunt-table--assessment .hunt-signal {
  min-width: 0;
}

@media (max-width: 900px) {
  .assessment-item {
    grid-template-columns: 1fr;
  }

  .hunt-table--assessment,
  .vuln-table--assessment {
    min-width: 860px;
  }
}

/* Compact KPI surfaces and true expandable finding lists. */
.metric-strip {
  gap: 6px;
}

.metric-strip article {
  min-height: 54px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.metric-strip article.kpi-card {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  min-height: 54px;
  padding: 8px 10px;
}

.kpi-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  font-size: 0.96rem;
}

.kpi-body {
  gap: 0;
}

.kpi-label,
.kpi-delta,
.metric-strip article small {
  font-size: 0.6rem;
  line-height: 1.25;
}

.kpi-value {
  font-size: 1.1rem;
  line-height: 1;
}

.security-signal-grid,
.threat-signal-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.security-signal-card {
  gap: 2px;
  min-height: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.security-signal-card span,
.security-signal-card small {
  font-size: 0.66rem;
  line-height: 1.25;
}

.security-signal-card strong {
  font-size: 1.1rem;
  line-height: 1;
}

.cust-kpi-strip,
.m365-cockpit,
.license-cockpit,
.analysis-kpi,
.findings-kpis {
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.cust-kpi-strip dt,
.m365-cockpit dt,
.license-cockpit dt,
.analysis-kpi dt,
.findings-kpis dt {
  font-size: 0.6rem;
  line-height: 1.2;
}

.cust-kpi-strip dd strong,
.m365-cockpit dd strong,
.license-cockpit dd strong,
.analysis-kpi dd strong,
.findings-kpis dd,
.job-kpi-strip strong,
.analysis-overview-strip strong {
  font-size: 0.96rem;
  line-height: 1.05;
}

.job-kpi-strip {
  gap: 6px;
  margin-bottom: 10px;
}

.job-kpi-strip article,
.analysis-overview-strip span,
.scan-detail-sev .scan-sev {
  padding: 7px 8px;
  border-radius: var(--radius-sm);
}

.job-kpi-strip span,
.analysis-overview-strip small,
.scan-detail-sev dt {
  font-size: 0.6rem;
}

.assessment-list,
.finding-list,
.ai-finding-list,
.overview-ai-list,
.analysis-priority-list {
  gap: 4px;
}

.assessment-item.expandable-list-item {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.assessment-item.expandable-list-item > summary {
  list-style: none;
}

.assessment-item.expandable-list-item > summary::-webkit-details-marker,
.ai-finding > summary::-webkit-details-marker,
.ai-priority-item > summary::-webkit-details-marker,
.overview-ai-item > summary::-webkit-details-marker,
.finding-list-item > summary::-webkit-details-marker {
  display: none;
}

.assessment-summary {
  display: grid;
  grid-template-columns: 118px minmax(220px, 1fr) minmax(190px, 0.72fr);
  gap: 12px;
  align-items: start;
  padding: 9px 12px;
  cursor: pointer;
}

.assessment-item.expandable-list-item:hover,
.assessment-item.expandable-list-item[open] {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.assessment-item.expandable-list-item[open] .vuln-expand-icon {
  transform: rotate(90deg);
}

.vuln-expand-icon {
  transition: transform var(--t-fast);
}

.assessment-item.expandable-list-item .assessment-status,
.assessment-item.expandable-list-item .assessment-action,
.assessment-item.expandable-list-item .assessment-main {
  display: grid;
}

.assessment-item.expandable-list-item .assessment-meta-line > span {
  min-height: 20px;
  padding: 1px 6px;
}

.assessment-item.expandable-list-item .vuln-detail {
  padding: 10px 12px 12px 32px;
  border-top: 1px solid var(--clr-border);
  border-bottom: 0;
}

.assessment-item.expandable-list-item .vuln-detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.ai-finding,
.ai-priority-item,
.overview-ai-item,
.finding-list-item {
  display: block;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  overflow: hidden;
}

.ai-finding-row,
.ai-priority-item > summary,
.overview-ai-item > summary,
.finding-list-item > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.ai-finding-row {
  border: 0;
  border-radius: 0;
}

.ai-finding[open] .ai-finding-row,
.ai-priority-item[open] > summary,
.overview-ai-item[open] > summary,
.finding-list-item[open] > summary {
  background: var(--clr-info-bg);
}

.ai-finding-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.ai-finding-more::before,
.ai-priority-item > summary::before,
.overview-ai-item > summary::before,
.finding-list-item > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--clr-xmuted);
  transition: transform var(--t-fast);
}

.ai-finding[open] .ai-finding-more::before,
.ai-priority-item[open] > summary::before,
.overview-ai-item[open] > summary::before,
.finding-list-item[open] > summary::before {
  transform: rotate(90deg);
}

.ai-priority-item > summary,
.overview-ai-item > summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
}

.overview-ai-item > summary {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.overview-ai-item > summary strong,
.ai-priority-item > summary strong,
.finding-list-item > summary strong {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.overview-ai-item > summary span,
.finding-list-item > summary small {
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.overview-ai-item p,
.ai-priority-item p,
.finding-list-detail {
  margin: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--clr-subtle);
  background: var(--clr-surface-alt);
}

.finding-list-item > summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(160px, 0.7fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
}

.finding-list-detail {
  display: grid;
  gap: 8px;
}

.finding-list-detail p {
  margin: 0;
  color: var(--clr-text);
  line-height: 1.45;
}

.finding-list-item--critical,
.overview-ai-item--critical,
.ai-finding--critical,
.ai-finding--risk,
.ai-priority-item--critical,
.ai-priority-item--risk {
  box-shadow: inset 3px 0 0 var(--clr-risk);
}

.finding-list-item--high,
.ai-finding--high,
.ai-priority-item--high {
  box-shadow: inset 3px 0 0 var(--a-500);
}

.finding-list-item--medium,
.overview-ai-item--warn,
.ai-finding--medium,
.ai-finding--warning,
.ai-finding--warn,
.ai-priority-item--medium,
.ai-priority-item--warning,
.ai-priority-item--warn {
  box-shadow: inset 3px 0 0 var(--clr-warn);
}

.finding-list-item--low,
.finding-list-item--info,
.overview-ai-item--info,
.ai-finding--info,
.ai-priority-item--info {
  box-shadow: inset 3px 0 0 var(--clr-info);
}

.ai-priority-item > summary::before {
  content: none;
}

.ai-priority-item > summary {
  align-items: center;
}

@media (max-width: 900px) {
  .assessment-summary,
  .finding-list-item > summary,
  .overview-ai-item > summary {
    grid-template-columns: 1fr;
  }

  .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dense information layout pass. Keeps the UI compact for large datasets. */
.content {
  padding: 12px;
}

.content-head {
  align-items: center;
  min-height: 44px;
  margin-bottom: 9px;
}

.content-head .eyebrow {
  margin: 0 0 2px;
  font-size: 0.6rem;
}

.content-head h1 {
  gap: 6px;
  font-size: 1.1rem;
  line-height: 1.15;
}

.title-icon {
  width: 21px;
  height: 21px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
}

.content-body {
  gap: 10px;
}

.detail-panel,
.automation-module,
.report-module,
.agent-management,
.deployment-module,
.system-settings,
.security-dashboard,
.analysis-panel,
.license-audit-panel {
  border-radius: var(--radius-sm);
}



.detail-panel > .eyebrow,
.detail-panel > p.eyebrow,
.inventory-toolbar .eyebrow,
.report-toolbar .eyebrow,
.automation-toolbar .eyebrow,
.alert-toolbar .eyebrow,
.module-panel-head .eyebrow {
  margin-bottom: 2px;
  font-size: 0.6rem;
}

.detail-panel h2,
.inventory-toolbar h2,
.report-toolbar h2,
.automation-toolbar h2,
.alert-toolbar h2,
.module-panel-head h2 {
  font-size: 0.96rem;
  line-height: 1.2;
}

.detail-panel p,
.inventory-toolbar p,
.report-toolbar p,
.automation-toolbar p,
.alert-toolbar p,
.module-panel-head p {
  line-height: 1.35;
}

.inventory-toolbar,
.report-toolbar,
.automation-toolbar,
.alert-toolbar,
.module-panel-head,
.scan-detail-head,
.devlog-header,
.license-audit-head {
  gap: 9px;
  margin-bottom: 8px;
}

.inventory-toolbar > div,
.report-toolbar > div,
.automation-toolbar > div,
.alert-toolbar > div,
.module-panel-head > div,
.devlog-header-title {
  min-width: 0;
}

.inventory-toolbar > div > p:not(.eyebrow),
.report-toolbar > div > p:not(.eyebrow),
.automation-toolbar > div > p:not(.eyebrow),
.alert-toolbar > div > p:not(.eyebrow),
.module-panel-head > div > p:not(.eyebrow) {
  margin-top: 2px;
  max-width: 78ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
}

.action-button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
}

.icon-btn,
.table-action {
  min-height: 24px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  line-height: 1;
}

.table-action + .table-action {
  margin-left: 3px;
}

.table-action-menu {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.table-action-menu > summary {
  width: 26px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
}

.table-action-menu > summary::-webkit-details-marker {
  display: none;
}

.table-action-menu[open] > summary,
.table-action-menu > summary:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.table-action-menu-list {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 4px);
  min-width: 116px;
  display: grid;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: var(--shadow-md);
}

.table-action-menu-list--portal {
  position: fixed !important;
  right: auto !important;
  top: 0;
  z-index: 10000;
  min-width: 132px;
}

.table-action-menu-list .table-action {
  width: 100%;
  justify-content: flex-start;
  margin: 0;
}



.data-table th,
.data-table td {
  padding: 6px 8px;
  line-height: 1.28;
}

.compact-table th,
.compact-table td {
  padding: 4px 7px;
}

.compact-table thead th {
  height: 26px;
  padding: 5px 7px;
  font-size: 0.66rem;
}

.data-table td strong {
  font-size: 0.78rem;
}

.data-table td small,
.muted-cell,
.muted-small {
  font-size: 0.66rem;
}

.status-badge,
.severity-badge,
.radar-action-pill,
.device-kind,
.node-count,
.node-risk {
  min-height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  line-height: 18px;
}

.filter-row,
.report-filter-strip,
.devlog-main-toolbar,
.logviewer-toolbar {
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-sm);
}

.filter-row > select,
.filter-control select,
.report-filter-strip select,
.filter-select,
.devlog-search-wrap input,
.logviewer-search input,
.module-form input,
.module-form textarea,
.module-form select,
.inline-form input,
.inline-form select {
  min-height: 30px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
}

.module-form textarea {
  min-height: 68px;
}

.devlog-header {
  align-items: center;
  min-height: 34px;
}

.devlog-header-title .eyebrow {
  margin: 0 0 1px;
  font-size: 0.6rem;
}

.devlog-header-title h2 {
  font-size: 0.96rem;
}

.devlog-sidebar-section {
  gap: 2px;
}

.devlog-stream-group-label {
  margin: 8px 8px 3px;
  padding: 5px 7px;
}

.devlog-source-btn,
.devlog-stream-btn {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

.devlog-source-icon,
.devlog-stream-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
}

.devlog-source-info strong,
.devlog-stream-info strong {
  font-size: 0.72rem;
}

.devlog-source-info small,
.devlog-stream-info small {
  font-size: 0.6rem;
}

.devlog-stream-info small b {
  min-width: 24px;
}

.devlog-sev-filter {
  gap: 4px;
}

.devlog-sev-pill {
  min-height: 24px;
  padding: 0 7px;
  font-size: 0.66rem;
}

.devlog-table th,
.devlog-table td {
  padding: 4px 7px;
}

.devlog-msg {
  max-width: min(72ch, 55vw);
}

.devlog-msg--long {
  max-height: 2.7em;
}

.devlog-pager {
  min-height: 32px;
  padding: 5px 0;
}

.scan-detail-block {
  margin-top: 10px;
  padding-top: 10px;
}

.scan-detail-summary {
  margin-bottom: 10px;
  padding: 8px 10px;
}

.scan-detail-sev {
  gap: 6px;
}

.cust-section > summary {
  min-height: 34px;
}

.report-preview,
.report-preview--wide {
  gap: 7px;
}

.report-preview article,
.report-metric,
.radar-opportunity,
.radar-coverage-grid article,
.live-card,
.donut-card,
.bar-card,
.line-card {
  min-height: 0;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
}

.report-preview article span,
.report-metric span,
.radar-opportunity span,
.radar-coverage-grid span,
.live-card-grid span {
  font-size: 0.6rem;
}

.report-preview article strong,
.report-metric strong,
.radar-opportunity strong,
.radar-coverage-grid strong {
  font-size: 1rem;
  line-height: 1.05;
}

.report-metric small,
.radar-opportunity small {
  font-size: 0.66rem;
  line-height: 1.25;
}

.report-control-row {
  gap: 8px;
  margin-bottom: 8px;
}

.report-scope-tabs {
  padding: 3px;
  border-radius: var(--radius-sm);
}

.report-scope-tab {
  min-height: 28px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
}

.report-filter-strip {
  grid-template-columns: minmax(150px, 0.9fr) minmax(180px, 1fr) minmax(160px, 0.8fr);
  gap: 6px;
  padding: 7px;
}

.report-filter-strip label,
.report-filter-strip > div {
  gap: 3px;
}

.report-filter-strip span {
  font-size: 0.6rem;
}

.report-filter-strip strong {
  min-height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
}

.cust-kpi-strip,
.m365-cockpit,
.license-cockpit,
.analysis-kpi,
.findings-kpis,
.external-scan-kpis {
  gap: 6px;
}

.m365-cockpit,
.license-cockpit {
  padding: 6px 0 8px;
  margin-bottom: 8px;
}

.m365-cockpit > div,
.license-cockpit > div,
.cust-kpi-strip > div,
.analysis-kpi > div,
.findings-kpis > div {
  min-width: 68px;
}

.external-scan-kpis {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.external-scan-kpis > div {
  padding: 7px 8px;
}

.external-scan-layout {
  gap: 8px;
}

.external-scan-card {
  padding: 10px;
}

.external-scan-card-head {
  margin-bottom: 6px;
}

.security-signal-grid,
.threat-signal-grid,
.analysis-overview-strip,
.job-kpi-strip {
  gap: 5px;
}

.security-signal-card,
.analysis-overview-strip span,
.job-kpi-strip article {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

.filter-row {
  margin-bottom: 6px;
}

.filter-row > span {
  font-size: 0.6rem;
}

.filter-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.filter-control span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.filter-row > select,
.filter-control select {
  max-width: 170px;
}

.data-table td > strong:first-child,
.data-table td > small:first-child,
.data-table td > span:first-child {
  vertical-align: middle;
}

.data-table td small {
  display: block;
  margin-top: 1px;
  color: var(--clr-muted);
  line-height: 1.2;
}

.data-table td:first-child,
.data-table td:nth-child(2),
.data-table td:nth-child(3) {
  max-width: 260px;
}

.data-table td:first-child strong,
.data-table td:nth-child(2) strong,
.data-table td:nth-child(3) strong,
.data-table td:first-child small,
.data-table td:nth-child(2) small,
.data-table td:nth-child(3) small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table td:not(.col-actions):last-child {
  max-width: min(460px, 38vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-action-menu-list .table-action {
  min-height: 26px;
}

.empty-row,
.empty-cell {
  padding: 12px !important;
  font-size: 0.78rem;
}

.assessment-summary {
  grid-template-columns: 106px minmax(180px, 1fr) minmax(160px, 0.65fr);
  gap: 8px;
  padding: 7px 9px;
}

.assessment-item.expandable-list-item .vuln-detail {
  padding: 8px 10px 10px 26px;
}

.ai-priority-item > summary,
.overview-ai-item > summary,
.finding-list-item > summary {
  padding: 7px 8px;
}

.overview-ai-item p,
.ai-priority-item p,
.finding-list-detail {
  padding: 7px 8px 8px;
}

.finding-list-item > summary {
  grid-template-columns: auto auto minmax(0, 1fr) minmax(120px, 0.55fr);
}

.hunt-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 7px 0 8px;
}

.hunt-detail-raw,
.sec-detail-raw {
  max-height: 240px;
  padding: 8px 10px;
  font-size: 0.72rem;
}

.devlog-table-wrap,
.logviewer-scroll {
  scrollbar-width: thin;
}

.devlog-detail-header {
  padding: 8px 10px;
}

.devlog-detail-body {
  padding: 8px 10px 10px;
}

.devlog-detail-meta {
  gap: 5px;
}

.devlog-detail-meta span {
  padding: 5px 7px;
  border-radius: var(--radius-sm);
}

.devlog-event-detail {
  max-height: 240px;
}

.radar-action-list {
  gap: 5px;
}

.radar-action-card {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 9px;
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}

.radar-action-rank {
  width: 22px;
  height: 22px;
  font-size: 0.66rem;
}

.radar-action-main {
  gap: 1px;
}

.radar-action-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  line-height: 1.2;
}

.radar-action-main small,
.radar-action-main em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  line-height: 1.2;
}

.radar-action-kind,
.radar-action-pill {
  min-height: 20px;
  padding: 0 7px;
  font-size: 0.6rem;
}

.report-finding-grid {
  gap: 8px;
}

.report-finding-grid .finding-card {
  padding: 9px 10px;
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}

.report-finding-grid .finding-card h4 {
  margin-bottom: 6px;
  font-size: 0.78rem;
}

.report-finding-grid .finding-card ul {
  gap: 4px;
}

.report-finding-grid .finding-item {
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 6px;
  line-height: 1.3;
  font-size: 0.72rem;
}

@media (max-width: 1100px) {
  .report-filter-strip {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 9px;
  }
}

/* === External Scan v2 === */
.scan-sev-bar {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  height: 18px;
  min-width: 90px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--clr-surface-alt, var(--n-50));
  font: 700 10px/1 ui-sans-serif, system-ui;
}
.scan-sev-bar--empty {
  align-items: center;
  justify-content: center;
  color: var(--clr-muted, var(--n-400));
  padding: 0 8px;
  background: transparent;
}
.scan-sev-bar-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--n-0);
  padding: 0 4px;
  min-width: 16px;
}
.scan-sev-bar-seg--critical { background: var(--r-600); }
.scan-sev-bar-seg--high     { background: var(--r-500); }
.scan-sev-bar-seg--medium   { background: var(--a-500); }
.scan-sev-bar-seg--low      { background: var(--b-500); }

.scan-detail-headline { display: flex; flex-direction: column; gap: 4px; }
.scan-detail-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.scan-detail-sev .scan-sev--low { background: var(--b-100); color: var(--b-700); }
.scan-detail-sev .scan-sev--total { background: var(--n-50); color: var(--n-900); font-weight: 700; }

.scan-diff {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11.5px;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-50));
}
.scan-diff-seg {
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: .02em;
}
.scan-diff-seg--up   { background: var(--r-100); color: var(--r-700); }
.scan-diff-seg--down { background: var(--g-100); color: var(--g-600); }
.scan-diff-seg--neutral { background: var(--n-200); color: var(--n-800); }

.scan-finding-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}
.scan-filter-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.scan-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border, var(--n-300));
  background: var(--n-0);
  color: var(--clr-text, var(--n-900));
  font: 700 11.5px/1 ui-sans-serif, system-ui;
  cursor: pointer;
  transition: all .12s ease;
}
.scan-filter-pill[data-active="false"] { opacity: .35; text-decoration: line-through; }
.scan-filter-pill:hover { border-color: var(--clr-accent, var(--b-500)); }
.scan-filter-pill--critical[data-active="true"] { border-color: var(--r-600); background: var(--r-100); color: var(--r-700); }
.scan-filter-pill--high[data-active="true"]     { border-color: var(--r-500); background: var(--r-100); color: var(--r-700); }
.scan-filter-pill--medium[data-active="true"]   { border-color: var(--a-500); background: var(--a-100); color: var(--a-500); }
.scan-filter-pill--low[data-active="true"]      { border-color: var(--b-500); background: var(--b-100); color: var(--b-700); }
.scan-filter-pill--info[data-active="true"]     { border-color: var(--n-800); background: var(--n-50); color: var(--n-800); }
.scan-filter-count {
  display: inline-flex;
  min-width: 18px;
  justify-content: center;
  padding: 0 5px;
  height: 16px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.08);
  font-size: 10.5px;
}
.scan-finding-search {
  flex: 1 1 200px;
  min-width: 160px;
  padding: 6px 10px;
  border: 1px solid var(--clr-border, var(--n-300));
  border-radius: var(--radius-sm);
  background: var(--n-0);
  font-size: 13px;
}
.scan-finding-export { display: inline-flex; gap: 6px; margin-left: auto; }
.scan-finding-empty {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-50));
  color: var(--clr-muted, var(--n-500));
  font-size: 13px;
  font-style: italic;
}

.finding-list {
  display: grid;
  gap: 6px;
}
.finding-list-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--n-0);
}
.finding-list-item > summary {
  display: grid;
  grid-template-columns: 5px auto minmax(180px, 1.1fr) minmax(170px, .9fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px 7px 12px;
  cursor: pointer;
  list-style: none;
}
.finding-list-item > summary::-webkit-details-marker { display: none; }
.finding-sev-rail { width: 5px; height: 100%; min-height: 28px; border-radius: 2px; background: var(--clr-border, var(--n-300)); }
.finding-list-item--critical .finding-sev-rail { background: linear-gradient(var(--r-600), var(--r-700)); }
.finding-list-item--high     .finding-sev-rail { background: linear-gradient(var(--r-500), var(--r-600)); }
.finding-list-item--medium   .finding-sev-rail { background: linear-gradient(var(--a-500), var(--a-500)); }
.finding-list-item--low      .finding-sev-rail { background: linear-gradient(var(--b-500), var(--b-500)); }
.finding-list-item--info     .finding-sev-rail { background: linear-gradient(var(--n-400), var(--n-500)); }
.finding-title-stack {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.finding-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.finding-meta-line { color: var(--clr-muted, var(--n-500)); }
.finding-reco-inline {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--clr-muted, var(--n-500));
  font-size: 12px;
}
.finding-anchor {
  text-decoration: none;
  color: var(--clr-muted, var(--n-400));
  font: 700 12px/1 ui-monospace, Consolas, monospace;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity .12s ease, background .12s ease;
}
.finding-list-item:hover .finding-anchor { opacity: 1; }
.finding-anchor:hover { background: var(--clr-surface-alt, var(--n-50)); color: var(--clr-accent, var(--b-500)); }
.finding-list-item:target { outline: 2px solid var(--clr-accent, var(--b-500)); outline-offset: 2px; }
.finding-list-detail {
  padding: 8px 12px 11px 33px;
  border-top: 1px solid var(--clr-border, var(--n-200));
}
.finding-reco { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--clr-surface-alt, var(--n-50)); }

.scan-summary-body {
  display: grid;
  gap: 8px;
}
.scan-summary-body h4 {
  margin: 6px 0 0;
  color: var(--clr-text, var(--n-900));
  font-size: 13px;
  letter-spacing: 0;
}
.scan-summary-body p { margin: 0 0 8px; line-height: 1.55; }
.scan-summary-body ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}
.scan-summary-body li {
  margin: 0;
  line-height: 1.45;
}
.scan-summary-body code {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, .08);
  font: 12px/1.4 ui-monospace, Consolas, monospace;
}
.scan-summary-body strong { color: var(--clr-text, var(--n-900)); }

.scan-report-frame {
  width: 100%;
  min-height: 620px;
  height: 70vh;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--n-0);
}
.scan-report-preview-shell {
  max-height: 76vh;
  overflow: auto;
  border-radius: var(--radius-sm);
  background: var(--n-0);
}
.scan-report-editor {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}
.scan-report-editor strong,
.scan-report-editor small {
  display: block;
}
.scan-report-editor small {
  margin-top: 2px;
  color: var(--clr-muted, var(--n-500));
  font-size: 12px;
}
.scan-report-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 10px;
}
.scan-report-module-grid label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
}
.scan-report-editor-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scan-ai-modal .scan-ai-context {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}
.scan-ai-modal .scan-ai-context small {
  color: var(--clr-muted, var(--n-500));
}
.scan-ai-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.scan-history-tools { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.scan-history-search {
  padding: 5px 10px;
  border: 1px solid var(--clr-border, var(--n-300));
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  min-width: 200px;
}
.scan-history-filter-pills {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}
.scan-history-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--clr-border, var(--n-300));
  border-radius: var(--radius-sm);
  background: var(--n-0);
  color: var(--clr-muted, var(--n-500));
  font: 800 11.5px/1 ui-sans-serif, system-ui;
  cursor: pointer;
}
.scan-history-filter-pill span {
  min-width: 18px;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-50));
  color: var(--clr-text, var(--n-900));
  text-align: center;
  font-size: 10.5px;
}
.scan-history-filter-pill:hover {
  border-color: var(--clr-accent, var(--b-500));
  color: var(--clr-text, var(--n-900));
}
.scan-history-filter-pill.active {
  border-color: var(--clr-accent, var(--b-500));
  background: rgba(64, 100, 215, .08);
  color: var(--clr-accent, var(--b-500));
}
.scan-job-target {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.scan-job-target strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scan-job-target small {
  color: var(--clr-muted, var(--n-500));
  font-size: 11.5px;
  font-weight: 700;
}
.scan-history-table tbody tr[class*="scan-row--severity-"] td:first-child {
  position: relative;
  box-shadow: inset 3px 0 0 transparent;
}
.scan-history-table tbody tr.scan-row--severity-critical td:first-child { box-shadow: inset 3px 0 0 var(--r-600); }
.scan-history-table tbody tr.scan-row--severity-high td:first-child     { box-shadow: inset 3px 0 0 var(--r-500); }
.scan-history-table tbody tr.scan-row--severity-medium td:first-child   { box-shadow: inset 3px 0 0 var(--a-500); }
.scan-history-table tbody tr.scan-row--severity-low td:first-child      { box-shadow: inset 3px 0 0 var(--b-500); }
.scan-history-table tbody tr.scan-row--severity-info td:first-child     { box-shadow: inset 3px 0 0 var(--n-500); }
.external-scan-risk-panel { display: none; } /* replaced by risk-strip */
.external-scan-risk-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-left: 2px solid var(--n-300);
  padding-left: 10px;
}
.external-scan-risk-strip--critical { border-left-color: var(--r-600); }
.external-scan-risk-strip--high     { border-left-color: var(--r-500); }
.external-scan-risk-strip--medium   { border-left-color: var(--a-500); }
.external-scan-risk-strip--low      { border-left-color: var(--b-500); }
.external-scan-risk-strip--info     { border-left-color: var(--n-500); }
.external-scan-risk-strip--none     { border-left-color: var(--g-500); }
.external-scan-risk-copy { display: none; }
.external-scan-severity-tiles {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.external-scan-severity-tile {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
  min-height: unset;
}
.external-scan-severity-tile span {
  color: var(--clr-muted, var(--n-500));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.external-scan-severity-tile strong {
  color: var(--clr-text, var(--n-900));
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.external-scan-severity-tile--critical.has-value { border-color: var(--r-200); background: var(--r-50); }
.external-scan-severity-tile--critical.has-value strong { color: var(--r-700); }
.external-scan-severity-tile--high.has-value { border-color: var(--r-200); background: var(--r-50); }
.external-scan-severity-tile--high.has-value strong { color: var(--r-600); }
.external-scan-severity-tile--medium.has-value { border-color: var(--a-200); background: var(--a-50); }
.external-scan-severity-tile--medium.has-value strong { color: var(--a-500); }
.external-scan-severity-tile--low.has-value { border-color: var(--b-200); background: var(--b-50); }
.external-scan-severity-tile--low.has-value strong { color: var(--b-500); }
.external-scan-severity-tile--info.has-value { border-color: var(--n-300); background: var(--n-25); }
.external-scan-active-strip {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.external-scan-active-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--b-200);
  border-radius: var(--radius-sm);
  background: var(--b-50);
  min-height: unset;
}
.external-scan-active-card strong,
.external-scan-active-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.external-scan-active-card small {
  color: var(--b-700);
  font-size: 11.5px;
}
.scan-live-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--b-500);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}
@media (max-width: 760px) {
  .external-scan-risk-panel {
    grid-template-columns: 1fr;
  }
  .external-scan-severity-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .external-scan-severity-tile--info {
    grid-column: 1 / -1;
  }
  .scan-history-search {
    width: 100%;
    min-width: 0;
  }
}

.scan-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  margin: 8px 0;
  border: 1px dashed var(--clr-accent, var(--b-500));
  border-radius: var(--radius-sm);
  background: rgba(64, 100, 215, .06);
  font-size: 13px;
}
.scan-bulk-bar select { padding: 4px 8px; }
.col-bulk { width: 32px; text-align: center; }

.external-scan-status--ok     { background: var(--g-100); color: var(--g-600); }
.external-scan-status--warn   { background: var(--a-100); color: var(--a-500); }
.external-scan-status--active { background: var(--b-100); color: var(--b-700); }
.external-scan-status--idle   { background: var(--n-50); color: var(--n-800); }

.external-scan-empty-detail .empty-state { padding: 28px; text-align: center; }
.external-scan-empty-detail .empty-state-icon { font-size: 32px; opacity: .55; margin-bottom: 8px; }

/* === Deployment v2 === */
.deploy-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.deploy-header-title h2 { margin: 4px 0 0; }
.deploy-header-status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.deployment-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}
.deployment-command-main,
.deployment-command-side {
  min-width: 0;
  display: grid;
  gap: 10px;
}
.deployment-command-main {
  padding: 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-left: 2px solid var(--clr-primary);
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
}
.deployment-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.deployment-section-head h3 {
  margin: 2px 0 0;
  font-size: 1rem;
}
.deployment-section-meta {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
  color: var(--clr-muted, var(--n-500));
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}
.agent-platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--n-0);
  color: var(--clr-primary);
  font-size: 0.84rem;
  font-weight: 700;
  flex-shrink: 0;
}
.deploy-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font: 700 11.5px/1 ui-sans-serif, system-ui;
  border: 1px solid var(--clr-border, var(--n-200));
  background: var(--clr-surface-alt, var(--n-25));
  color: var(--clr-text, var(--n-900));
}
.deploy-status-pill--ok      { background: var(--g-100); color: var(--g-600); border-color: var(--g-500); }
.deploy-status-pill--warn    { background: var(--a-100); color: var(--a-500); border-color: var(--a-500); }
.deploy-status-pill--info    { background: var(--b-100); color: var(--b-700); border-color: var(--b-500); }
.deploy-status-pill--neutral { background: var(--n-50); color: var(--n-800); border-color: var(--n-300); }
.deploy-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.deploy-status-pill--button {
  cursor: pointer;
  user-select: none;
}
.deploy-token-menu {
  position: relative;
  display: inline-flex;
}
.deploy-token-menu > summary {
  list-style: none;
}
.deploy-token-menu > summary::-webkit-details-marker {
  display: none;
}
.deploy-token-menu[open] > summary {
  box-shadow: 0 0 0 3px rgba(64, 100, 215, .14);
}
.deploy-token-popout {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(430px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
  box-shadow: 0 16px 42px rgba(15, 23, 42, .18);
}
.deploy-token-popout .enroll-token-row {
  align-items: flex-start;
}
.deploy-token-popout .enroll-token-meta {
  align-items: flex-start;
  min-width: 0;
}
.deploy-token-popout .enroll-token-meta > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.deploy-token-popout .enroll-token-value {
  margin-top: 10px;
  max-height: 120px;
  overflow: auto;
}
.deploy-token-popout .enroll-token-warn {
  margin: 10px 0 0;
}

.deploy-key-menu {
  z-index: 42;
}

.deploy-key-popout {
  width: min(620px, calc(100vw - 32px));
}

.deploy-key-popout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.deploy-key-popout-head strong {
  display: block;
  margin-top: 2px;
  color: var(--clr-text, var(--n-900));
  font-size: 0.9rem;
}

.deploy-key-code {
  max-height: 180px;
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-all;
}

.enroll-token-card {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border, var(--n-200));
  background: var(--clr-surface-alt, var(--n-25));
}
.enroll-token-card--active   { border-color: var(--g-500); background: rgba(16, 185, 129, .06); }
.enroll-token-card--inactive { border-color: var(--a-500); background: rgba(245, 158, 11, .06); }
.enroll-token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.enroll-token-meta { display: inline-flex; gap: 10px; align-items: center; }
.enroll-token-meta small { color: var(--clr-muted, var(--n-500)); }
.enroll-token-card .enroll-token-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--a-500); }
.enroll-token-card--active .enroll-token-dot { background: var(--g-500); }
.enrollment-actions { display: inline-flex; gap: 6px; }
.enroll-token-value { display: block; margin-top: 8px; padding: 6px 10px; border-radius: var(--radius-sm); background: rgba(15,23,42,.06); font: 12.5px/1.4 ui-monospace, Consolas, monospace; word-break: break-all; }
.enroll-token-warn { margin: 8px 0 0; color: var(--a-500); font-size: 13px; }

.deploy-platform-block { margin-bottom: 0; }
.deploy-platform-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt, var(--n-25));
  margin-bottom: 12px;
}
.deploy-platform-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-text, var(--n-900));
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.deploy-platform-tab:hover { background: rgba(64, 100, 215, .08); }
.deploy-platform-tab--active {
  background: var(--clr-accent, var(--b-500));
  color: var(--n-0);
  box-shadow: 0 1px 3px rgba(64, 100, 215, .35);
}
.deploy-platform-tab-icon { font-size: 14px; }

.deploy-public-key-wrap {
  margin-bottom: 0;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}
.deploy-public-key-wrap > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--clr-text, var(--n-900));
  list-style: none;
}
.deploy-public-key-wrap > summary::before { content: "▸ "; color: var(--clr-muted, var(--n-400)); }
.deploy-public-key-wrap[open] > summary::before { content: "▾ "; }
.deploy-public-key-wrap > .deployment-public-key-card { margin: 0; border-top: 1px solid var(--clr-border, var(--n-200)); border-radius: 0 0 8px 8px; }

.agent-summary-band {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin: 0 0 12px;
}
.agent-summary-primary,
.agent-summary-fact {
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
  color: var(--clr-text, var(--n-900));
  text-align: left;
  cursor: pointer;
}
.agent-summary-primary {
  display: grid;
  gap: 3px;
  min-height: 86px;
  padding: 13px 14px;
  border-left: 2px solid var(--clr-ok);
}
.agent-summary-primary--warn {
  border-left-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}
.agent-summary-primary--ok {
  border-left-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}
.agent-summary-primary span,
.agent-summary-fact span {
  color: var(--clr-muted, var(--n-500));
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.agent-summary-primary strong {
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.agent-summary-primary small,
.agent-summary-fact small {
  color: var(--clr-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
}
.agent-summary-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.agent-summary-fact {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
  min-height: 76px;
  padding: 10px 11px;
}
.agent-summary-primary:hover,
.agent-summary-fact:hover,
.agent-summary-primary.agent-filter-pill--active,
.agent-summary-fact.agent-filter-pill--active {
  border-color: var(--clr-accent, var(--b-500));
  background: rgba(64, 100, 215, .08);
}
.agent-summary-fact strong {
  color: var(--clr-text, var(--n-900));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.deployment-install-details {
  margin-top: 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
}
.deployment-install-details > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.deployment-install-details > summary::-webkit-details-marker { display: none; }
.deployment-install-details > summary span {
  color: var(--clr-text, var(--n-900));
  font-weight: 700;
}
.deployment-install-details > summary small {
  color: var(--clr-muted, var(--n-500));
  font-size: 0.78rem;
  font-weight: 700;
}
.deployment-install-details .deploy-platform-block,
.deployment-install-details .deploy-public-key-wrap {
  margin: 0 14px 14px;
}

.agent-update-panel-actions { display: inline-flex; gap: 8px; align-items: center; }

.agent-name-cell {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.agent-name-stack {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.agent-name-stack strong,
.agent-name-stack small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-signal-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.agent-signal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.agent-signal-badge--ok { background: var(--g-100); color: var(--g-600); }
.agent-signal-badge--warn { background: var(--a-100); color: var(--a-500); }
.agent-signal-badge--offline { background: var(--r-100); color: var(--r-700); }
.agent-signal-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-sm);
  background: currentColor;
}
.agent-signal-cell small {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-platform-icon--windows { color: var(--b-500); background: var(--b-50); border-color: var(--b-200); }
.agent-platform-icon--linux { color: var(--g-600); background: var(--g-50); border-color: var(--g-200); }
.agent-platform-icon--macos { color: var(--n-800); background: var(--n-25); border-color: var(--n-300); }
.agent-platform-icon--bsd { color: var(--r-600); background: var(--r-50); border-color: var(--r-200); }
.agent-platform-icon--unknown { color: var(--clr-muted); background: var(--clr-surface-alt); }

.agent-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}
.agent-filter-pills { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.agent-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border, var(--n-300));
  background: var(--n-0);
  color: var(--clr-text, var(--n-900));
  font: 700 11.5px/1 ui-sans-serif, system-ui;
  cursor: pointer;
}
.agent-filter-pill:hover { border-color: var(--clr-accent, var(--b-500)); }
.agent-filter-pill--active {
  background: var(--clr-accent, var(--b-500));
  color: var(--n-0);
  border-color: var(--clr-accent, var(--b-500));
}
.agent-filter-count {
  display: inline-flex;
  min-width: 18px;
  justify-content: center;
  padding: 0 5px;
  height: 16px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.08);
  font-size: 10.5px;
}
.agent-filter-pill--active .agent-filter-count { background: rgba(255,255,255,.22); }
.agent-search {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 5px 10px;
  border: 1px solid var(--clr-border, var(--n-300));
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  background: var(--n-0);
}
.agent-detail-toggle { font-size: 12px; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }

.agent-update-table--lean .agent-col-detail,
.agent-update-table--lean tbody tr td:nth-child(5),
.agent-update-table--lean tbody tr td:nth-child(6),
.agent-update-table--lean tbody tr td:nth-child(7) { display: none; }
.agent-update-table--lean.agent-update-table--detail .agent-col-detail,
.agent-update-table--lean.agent-update-table--detail tbody tr td:nth-child(5),
.agent-update-table--lean.agent-update-table--detail tbody tr td:nth-child(6),
.agent-update-table--lean.agent-update-table--detail tbody tr td:nth-child(7) { display: table-cell; }

.agent-table-empty {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-50));
  color: var(--clr-muted, var(--n-500));
  font-size: 13px;
  font-style: italic;
}

@media (max-width: 720px) {
  .agent-summary-band {
    grid-template-columns: 1fr;
  }

  .agent-summary-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deploy-header { flex-direction: column; align-items: stretch; }
  .deploy-header-status { align-items: flex-start; }
  .deployment-command-grid {
    grid-template-columns: 1fr;
  }
  .deploy-token-popout {
    left: 0;
    right: auto;
    width: min(430px, calc(100vw - 24px));
  }
  .deploy-platform-tabs { width: 100%; overflow-x: auto; }
  .finding-list-item > summary {
    grid-template-columns: 5px auto minmax(0, 1fr) auto;
  }
  .finding-reco-inline {
    grid-column: 3 / 5;
  }
  .scan-detail-actions {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .agent-summary-facts {
    grid-template-columns: 1fr;
  }
}

/* === Vulnerability + Hunt Single-Line Tables === */
.vuln-table--single,
.hunt-table--single {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.vuln-table--single thead th,
.hunt-table--single thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--clr-surface-alt, var(--n-25));
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--clr-muted, var(--n-500));
  padding: 8px 10px;
  border-bottom: 1px solid var(--clr-border, var(--n-200));
  white-space: nowrap;
}
.vuln-table--single tbody tr.vuln-row--single,
.hunt-table--single tbody tr.hunt-row--single {
  height: 36px;
  cursor: pointer;
  transition: background .12s ease;
}
.vuln-table--single tbody tr.vuln-row--single:hover,
.hunt-table--single tbody tr.hunt-row--single:hover {
  background: rgba(64, 100, 215, .06);
}
.vuln-table--single tbody td,
.hunt-table--single tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--clr-border, var(--n-50));
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.4;
}

/* Expand caret */
.vuln-cell-expand,
.hunt-cell-expand {
  width: 26px;
  text-align: center;
  padding-right: 0 !important;
  padding-left: 6px !important;
}
.vuln-expand-icon,
.hunt-expand-icon {
  display: inline-block;
  color: var(--clr-muted, var(--n-400));
  font-size: 11px;
  transition: transform .12s ease;
}
.vuln-row--expanded .vuln-expand-icon,
.hunt-row--expanded .hunt-expand-icon { transform: rotate(90deg); color: var(--clr-accent, var(--b-500)); }

/* Severity rail (left edge) */
.vuln-row--single,
.hunt-row--single { box-shadow: inset 3px 0 0 transparent; }
.vuln-row--single.sw-row--risk,
.hunt-row--single.hunt-row--risk { box-shadow: inset 3px 0 0 var(--r-600); }
.vuln-row--single.sw-row--cve,
.hunt-row--single.hunt-row--warning { box-shadow: inset 3px 0 0 var(--a-500); }
.vuln-row--single.sw-row--update { box-shadow: inset 3px 0 0 var(--b-500); }
.hunt-row--single.hunt-row--info { box-shadow: inset 3px 0 0 var(--n-500); }

/* Vulnerability column widths */
.vuln-table--single col,
.vuln-table--single th.vuln-cell-rating, .vuln-table--single td.vuln-cell-rating { width: 64px; text-align: center; }
.vuln-table--single th.vuln-cell-status, .vuln-table--single td.vuln-cell-status { width: 110px; }
.vuln-table--single th.vuln-cell-product, .vuln-table--single td.vuln-cell-product { width: auto; min-width: 0; }
.vuln-table--single th.vuln-cell-version, .vuln-table--single td.vuln-cell-version { width: 220px; }
.vuln-table--single th.vuln-cell-cve, .vuln-table--single td.vuln-cell-cve { width: 130px; }
.vuln-table--single th.vuln-cell-action, .vuln-table--single td.vuln-cell-action { width: 28%; }

.vuln-cell-product { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vuln-product-name { font-weight: 700; color: var(--clr-text, var(--n-900)); overflow: hidden; text-overflow: ellipsis; }
.vuln-product-vendor { color: var(--clr-muted, var(--n-500)); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.vuln-status-text { color: var(--clr-muted, var(--n-500)); font-size: 11.5px; }
.vuln-cell-version { white-space: nowrap; }
.vuln-ver-code {
  font: 11.5px/1.2 ui-monospace, Consolas, monospace;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, .06);
  color: var(--clr-text, var(--n-900));
}
.vuln-ver-code--new { background: var(--b-100); color: var(--b-700); }
.vuln-ver-arrow { color: var(--clr-muted, var(--n-400)); font-size: 11px; }
.vuln-cve-chip { display: inline-flex; align-items: center; gap: 4px; }
.vuln-cve-more { font: 700 10.5px/1 ui-sans-serif, system-ui; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--n-50); color: var(--n-800); }
.vuln-cve-empty { color: var(--clr-muted, var(--n-300)); }
.vuln-action-text { color: var(--clr-text, var(--n-900)); }

/* Hunt column widths */
.hunt-table--single th.hunt-cell-rating, .hunt-table--single td.hunt-cell-rating { width: 64px; text-align: center; }
.hunt-table--single th.hunt-cell-confidence, .hunt-table--single td.hunt-cell-confidence { width: 130px; }
.hunt-table--single th.hunt-cell-signal, .hunt-table--single td.hunt-cell-signal { width: auto; min-width: 0; }
.hunt-table--single th.hunt-cell-tactic, .hunt-table--single td.hunt-cell-tactic { width: 200px; }
.hunt-table--single th.hunt-cell-source, .hunt-table--single td.hunt-cell-source { width: 130px; }
.hunt-table--single th.hunt-cell-action, .hunt-table--single td.hunt-cell-action { width: 26%; }

.hunt-cell-confidence { display: flex !important; align-items: center; gap: 6px; }
.hunt-score-wrap { display: inline-flex; align-items: center; gap: 4px; }
.hunt-score-num { font: 700 10.5px/1 ui-sans-serif, system-ui; color: var(--clr-muted, var(--n-500)); }
.hunt-cell-signal { display: flex !important; align-items: center; gap: 8px; }
.hunt-cell-signal .hunt-signal-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.hunt-signal-meta-line { display: inline-flex; gap: 4px; flex-shrink: 0; }
.hunt-meta-chip {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, .06);
  font: 700 10.5px/1.4 ui-sans-serif, system-ui;
  color: var(--clr-muted, var(--n-800));
}
.hunt-meta-chip.muted-chip { background: transparent; color: var(--clr-muted, var(--n-400)); font-weight: 500; }
.hunt-cell-tactic strong { font-weight: 700; }
.hunt-cell-tactic .hunt-tactic-mitre { color: var(--clr-muted, var(--n-500)); font-size: 11.5px; margin-left: 4px; }
.hunt-source-text { color: var(--clr-muted, var(--n-500)); font-size: 11.5px; }
.hunt-action-text { color: var(--clr-text, var(--n-900)); }

/* Detail row spacing when expanded */
.vuln-table--single .vuln-detail-row[hidden],
.hunt-table--single .hunt-detail-row[hidden] { display: none; }
.vuln-table--single .vuln-detail-cell,
.hunt-table--single .hunt-detail-cell {
  padding: 0 !important;
  background: var(--clr-surface-alt, var(--n-25));
  border-bottom: 1px solid var(--clr-border, var(--n-200));
}
.vuln-table--single .vuln-detail-cell .vuln-detail,
.hunt-table--single .hunt-detail-cell .hunt-detail { padding: 14px 18px; }

/* Sticky toolbar above the table when scrolling */
.security-table-scroll {
  max-height: calc(100vh - 280px);
  overflow: auto;
}

/* Responsive: collapse low-priority columns on narrow screens */
@media (max-width: 1100px) {
  .vuln-table--single th.vuln-cell-status, .vuln-table--single td.vuln-cell-status,
  .hunt-table--single th.hunt-cell-source, .hunt-table--single td.hunt-cell-source {
    display: none;
  }
}
@media (max-width: 860px) {
  .vuln-table--single th.vuln-cell-cve, .vuln-table--single td.vuln-cell-cve,
  .hunt-table--single th.hunt-cell-tactic, .hunt-table--single td.hunt-cell-tactic {
    display: none;
  }
}

/* Threat Hunting + Vulnerability lists: dense, readable analyst rows. */
.hunt-workbench--assessment {
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  align-items: start;
}

.hunt-workbench--assessment .hunt-rail {
  position: sticky;
  top: 8px;
}

.vuln-table--single,
.hunt-table--single {
  min-width: 960px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.vuln-table--single tbody tr.vuln-row--single,
.hunt-table--single tbody tr.hunt-row--single {
  height: 48px;
}

.vuln-table--single tbody td,
.hunt-table--single tbody td {
  padding: 7px 10px;
}

.vuln-table--single .vuln-cell-product,
.hunt-table--single .hunt-cell-signal,
.hunt-table--single .hunt-cell-confidence {
  display: table-cell !important;
}

.vuln-table--single thead .vuln-cell-version {
  display: table-cell !important;
}

.vuln-table--single tbody .vuln-cell-version {
  display: table-cell !important;
}

.vuln-table--single th.vuln-cell-expand,
.vuln-table--single td.vuln-cell-expand,
.hunt-table--single th.hunt-cell-expand,
.hunt-table--single td.hunt-cell-expand {
  width: 32px;
}

.vuln-table--single th.vuln-cell-rating,
.vuln-table--single td.vuln-cell-rating {
  width: 88px;
  text-align: left;
}

.vuln-table--single th.vuln-cell-product,
.vuln-table--single td.vuln-cell-product {
  width: 30%;
}

.vuln-table--single th.vuln-cell-version,
.vuln-table--single td.vuln-cell-version {
  width: 190px;
}

.vuln-table--single th.vuln-cell-cve,
.vuln-table--single td.vuln-cell-cve {
  width: 220px;
}

.vuln-table--single th.vuln-cell-action,
.vuln-table--single td.vuln-cell-action {
  width: 30%;
}

.vuln-product-stack,
.hunt-signal-stack,
.vuln-cve-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vuln-product-name,
.hunt-signal-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--clr-text);
  font-size: 0.84rem;
  line-height: 1.2;
}

.vuln-product-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.vuln-signal-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.vuln-signal-pill--risk {
  border-color: var(--clr-risk);
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.vuln-signal-pill--warn {
  border-color: var(--clr-warn);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.vuln-signal-pill--info {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

/* Ohne Umbruch schnitt die Spalte die Chips mitten im Wert ab ("Conf 10(",
   "CISA KE'"). Lieber eine Zeile mehr als ein unlesbarer Wert. */
.vuln-meta-chipline,
.hunt-signal-meta-line {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

.vuln-meta-chipline > *,
.hunt-signal-meta-line > * {
  flex: 0 0 auto;
}

.vuln-list-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 18px;
  padding: 1px 6px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vuln-list-chip--risk {
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.vuln-list-chip--container {
  border: 1px solid var(--b-200);
  background: var(--b-50);
  color: var(--b-500);
}

.hunt-table--single th.hunt-cell-rating,
.hunt-table--single td.hunt-cell-rating {
  width: 70px;
  text-align: left;
}

.hunt-table--single col.hunt-col-expand {
  width: 32px;
}

.hunt-table--single col.hunt-col-rating {
  width: 70px;
}

.hunt-table--single col.hunt-col-signal {
  width: 32%;
}

.hunt-table--single col.hunt-col-confidence {
  width: 142px;
}

.hunt-table--single col.hunt-col-tactic {
  width: 220px;
}

.hunt-table--single col.hunt-col-action {
  width: auto;
}

.hunt-table--single th.hunt-cell-signal,
.hunt-table--single td.hunt-cell-signal {
  width: 32%;
}

.hunt-table--single th.hunt-cell-confidence,
.hunt-table--single td.hunt-cell-confidence {
  width: 142px;
}

.hunt-table--single th.hunt-cell-tactic,
.hunt-table--single td.hunt-cell-tactic {
  width: 220px;
}

.hunt-table--single th.hunt-cell-action,
.hunt-table--single td.hunt-cell-action {
  width: 30%;
}

.hunt-cell-confidence .hunt-score-wrap {
  margin-top: 4px;
}

.hunt-cell-tactic strong,
.hunt-cell-tactic .hunt-tactic-mitre {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hunt-cell-tactic strong {
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.2;
}

.hunt-cell-tactic .hunt-tactic-mitre {
  margin: 3px 0 0;
  color: var(--clr-muted);
  font-size: 0.66rem;
  line-height: 1.25;
}

.hunt-action-text,
.vuln-action-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  line-height: 1.35;
}

.hunt-table--single .hunt-detail-cell .hunt-detail,
.vuln-table--single .vuln-detail-cell .vuln-detail {
  border-top: 1px solid var(--clr-border);
}

.vuln-table--single tbody tr.vuln-row--single {
  height: 40px;
}

.vuln-table--single tbody td {
  padding: 5px 10px;
}

.vuln-table--single .vuln-product-stack,
.vuln-table--single .vuln-cve-stack {
  display: flex;
  align-items: center;
  gap: 7px !important;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.vuln-table--single .vuln-product-name {
  flex: 0 1 auto;
  max-width: 56%;
}

.vuln-table--single .vuln-product-meta {
  display: inline;
  flex: 1 1 auto;
  min-width: 0;
}

.vuln-table--single .vuln-cve-chip,
.vuln-table--single .vuln-cve-empty {
  flex: 0 0 auto;
}

.vuln-table--single .vuln-meta-chipline {
  display: inline-flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
}

.vuln-table--single .vuln-list-chip {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vuln-table--single tbody td,
.hunt-table--single tbody td {
  display: table-cell;
  border-bottom: 1px solid var(--clr-border, var(--n-50));
}

.vuln-table--single .vuln-version-line,
.hunt-table--single .hunt-confidence-line,
.hunt-table--single .hunt-tactic-line {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}

.vuln-table--single .vuln-version-line {
  gap: 5px;
}

.vuln-table--single .vuln-ver-code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vuln-table--single .vuln-ver-arrow {
  flex: 0 0 auto;
  margin: 0;
}

.hunt-table--single tbody tr.hunt-row--single {
  height: 40px;
}

.hunt-table--single tbody td {
  padding: 5px 10px;
}

.hunt-table--single .hunt-signal-stack {
  display: flex;
  align-items: center;
  gap: 7px !important;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.hunt-table--single .hunt-signal-title {
  flex: 1 1 auto;
  max-width: 58%;
}

.hunt-table--single .hunt-signal-meta-line {
  display: inline-flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

.hunt-table--single .hunt-meta-chip {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hunt-table--single .hunt-cell-confidence .hunt-score-wrap {
  margin-top: 0;
  flex: 0 0 auto;
}

.hunt-table--single .hunt-cell-confidence .hunt-score-bar {
  margin-left: 0;
}

.hunt-table--single .hunt-cell-tactic strong,
.hunt-table--single .hunt-cell-tactic .hunt-tactic-mitre {
  display: inline-block;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.hunt-table--single .hunt-cell-tactic strong {
  flex: 0 1 auto;
  max-width: 48%;
}

.hunt-table--single .hunt-cell-tactic .hunt-tactic-mitre {
  flex: 1 1 auto;
  max-width: 52%;
}

.hunt-table--single th.hunt-cell-rating,
.hunt-table--single td.hunt-cell-rating {
  width: 76px;
}

.hunt-table--single th.hunt-cell-signal,
.hunt-table--single td.hunt-cell-signal {
  width: 36%;
}

.hunt-table--single th.hunt-cell-confidence,
.hunt-table--single td.hunt-cell-confidence {
  width: 148px;
}

.hunt-table--single th.hunt-cell-tactic,
.hunt-table--single td.hunt-cell-tactic {
  width: 23%;
}

.hunt-table--single th.hunt-cell-action,
.hunt-table--single td.hunt-cell-action {
  width: auto;
}

@media (max-width: 1120px) {
  .hunt-workbench--assessment {
    grid-template-columns: 1fr;
  }
  .hunt-workbench--assessment .hunt-rail {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.device-kind--icon {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  line-height: 1;
  font-weight: 700;
}
.device-kind--windows { background: var(--b-50); color: var(--b-500); }
.device-kind--linux   { background: var(--g-50); color: var(--g-600); }
.device-kind--macos   { background: var(--n-50); color: var(--n-800); }
.device-kind--firewall { background: var(--a-50); color: var(--r-600); }
.device-kind--bsd     { background: var(--a-50); color: var(--r-700); }
.device-kind--switch,
.device-kind--router,
.device-kind--accesspoint { background: var(--b-50); color: var(--b-500); }
.device-kind--server,
.device-kind--hypervisor { background: var(--b-50); color: var(--b-500); }
.device-kind--client { background: var(--g-50); color: var(--g-600); }
.device-kind--storage { background: var(--b-50); color: var(--b-700); }
.device-kind--printer { background: var(--b-50); color: var(--b-500); }
.device-kind--management { background: var(--r-50); color: var(--r-600); }
.device-kind--voip { background: var(--n-25); color: var(--r-600); }
.device-kind--agent   { background: var(--b-50); color: var(--b-700); }

/* === Customer detail: move subnavigation up and tighten tab content === */
.content--customer {
  padding-top: 8px !important;
}

.content--customer .content-head {
  display: none !important;
}

.content--customer .content-body {
  gap: 6px !important;
}

.content--customer .monitoring-breadcrumb {
  min-height: 20px;
  margin: 0 0 4px;
  font-size: 0.66rem;
}

.content--customer .monitoring-breadcrumb button {
  min-height: 20px;
}

/* Beim Blättern in einem langen Tab bleibt die Kundennavigation stehen. */
.content--customer .customer-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
}

.content--customer .customer-tab-pane {
  padding: 10px;
}
/* === Microsoft 365: denser two-column operations layout === */
.m365-page {
  display: grid;
  gap: 8px;
}

.m365-page--agent {
  gap: 7px;
}

.m365-agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-primary);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.m365-agent-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.m365-agent-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--b-100);
  color: var(--clr-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.m365-agent-identity h2 {
  margin: 0;
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1.15;
}

.m365-agent-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 3px 0 0;
  flex-wrap: wrap;
}

.m365-agent-sub .status-badge,
.m365-agent-sub .m365-state-note {
  flex: 0 0 auto;
}

.m365-subnav {
  display: flex;
  gap: 3px;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  overflow-x: auto;
}

.m365-subnav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.m365-subnav-btn:hover:not(:disabled) {
  color: var(--clr-primary);
  background: var(--clr-surface);
  border-color: rgba(26, 107, 138, 0.22);
}

.m365-subnav-btn.is-active {
  color: var(--clr-primary);
  background: var(--clr-surface);
  border-color: rgba(26, 107, 138, 0.35);
  box-shadow: inset 0 -2px 0 rgba(26, 107, 138, 0.45);
}

.m365-subnav-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.m365-subnav-icon {
  display: inline-grid;
  min-width: 18px;
  place-items: center;
  color: var(--clr-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.m365-sub-content,
.m365-sub-pane {
  min-width: 0;
}

.m365-sub-pane {
  display: grid;
  gap: 8px;
}

.m365-sub-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.m365-sub-pane-head h3 {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.2;
}

.m365-sub-pane-head p {
  margin: 2px 0 0;
}

/* Kontext-Streifen: ruhige Betriebskennzahlen */
.m365-context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 2px;
}
.m365-context-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft, var(--n-25));
  font-size: 0.78rem;
}
.m365-context-chip-label { color: var(--clr-text-muted, var(--n-500)); }
.m365-context-chip strong { font-variant-numeric: tabular-nums; }

/* Lizenzen & Kosten */
.m365-license-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.m365-license-kpi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-left: 2px solid var(--clr-accent, var(--b-500));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
}
.m365-license-kpi--warn { border-left-color: var(--clr-warning, var(--a-500)); }
.m365-license-kpi span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-muted, var(--n-500)); }
.m365-license-kpi strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.m365-license-kpi small { font-size: 0.66rem; color: var(--clr-text-muted, var(--n-400)); }

.m365-license-table-wrap {
  overflow-x: auto;
}

.m365-license-table {
  min-width: 920px;
  table-layout: fixed;
}

.m365-license-col-product { width: 26%; }
.m365-license-col-sku { width: 17%; }
.m365-license-col-num { width: 8%; }
.m365-license-col-util { width: 13%; }
.m365-license-col-price { width: 10%; }

.m365-license-table th,
.m365-license-table td {
  vertical-align: middle;
}

.m365-license-table th:nth-child(n+3),
.m365-license-table td.cell-num {
  text-align: right;
}

.m365-license-product strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.m365-license-sku code {
  display: inline-block;
  max-width: 100%;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-50));
  font-size: 0.72rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.m365-license-util-cell {
  display: grid;
  grid-template-columns: 36px minmax(70px, 1fr);
  align-items: center;
  gap: 8px;
}

.m365-license-util-value {
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.m365-license-bar {
  position: relative;
  height: 8px;
  min-width: 70px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft, var(--n-50));
  overflow: hidden;
}
.m365-license-bar span {
  position: absolute; inset: 0 auto 0 0;
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--b-500), var(--b-500));
  border-radius: var(--radius-sm);
}

/* Anbindung-Tab — Status-Strip + geführte Schritte */
.m365-connect { display: grid; gap: 10px; }

.m365-connect-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-left: 2px solid var(--clr-border-mid, var(--n-400));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
}
.m365-connect-status--ok   { border-left-color: var(--clr-success, var(--g-500)); }
.m365-connect-status--warn { border-left-color: var(--clr-warning, var(--a-500)); }
.m365-connect-status--risk { border-left-color: var(--clr-danger, var(--r-500)); }
.m365-connect-status-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m365-connect-status-icon {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 30px; padding: 0 7px; border-radius: var(--radius-sm);
  background: var(--clr-surface-soft, var(--n-50));
  color: var(--clr-muted, var(--n-500));
  font-size: 0.66rem;
  font-weight: 700;
}
.m365-connect-status-main p { margin: 1px 0 0; }
.m365-connect-status-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.m365-connect-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.m365-connect-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft, var(--n-25));
}
.m365-connect-step-num {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  background: var(--clr-border, var(--n-200));
  font-size: 0.78rem; font-weight: 700;
}
.m365-connect-step.is-done .m365-connect-step-num {
  background: var(--clr-success-soft, var(--g-100));
  color: var(--clr-success, var(--g-500));
}
.m365-connect-step.is-done .m365-connect-step-num::after { content: "✓"; }
.m365-connect-step.is-done .m365-connect-step-num { font-size: 0; }
.m365-connect-step.is-done .m365-connect-step-num::after { font-size: 0.84rem; }
.m365-connect-step-body { min-width: 0; display: grid; gap: 6px; }
.m365-connect-step-body > strong { font-size: 0.84rem; }
.m365-connect-step-body .module-actions { margin: 2px 0 0; }

.m365-permissions-fold { margin-top: 2px; }

.m365-connect-danger {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--clr-border, var(--n-200));
}

.m365-sub-pane--assistant {
  display: grid;
  gap: 10px;
}

.m365-ops-shell {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.m365-ops-side,
.m365-ops-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.m365-ops-side-block {
  min-width: 0;
}

.m365-ops-side-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-muted);
  padding: 0 0 5px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 8px;
}

.m365-ops-recommendations,
.m365-ops-presets,
.m365-ops-status-panel,
.m365-chat-form {
  min-width: 0;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
}

.m365-ops-recommendations,
.m365-ops-presets,
.m365-ops-status-panel {
  padding: 10px;
}

.m365-ops-presets-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.m365-ops-presets-head h4 {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.2;
}

.m365-ops-reco-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.m365-ops-metric {
  display: grid;
  gap: 1px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}

.m365-ops-metric strong {
  font-size: 1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.m365-ops-metric span {
  overflow: hidden;
  color: var(--clr-text-muted, var(--n-500));
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.m365-ops-metric--risk { border-color: rgba(184, 48, 48, 0.35); }
.m365-ops-metric--warn { border-color: rgba(196, 122, 30, 0.4); }
.m365-ops-metric--unknown { border-color: rgba(100, 116, 139, 0.35); }

.m365-ops-reco-primary {
  display: grid;
  gap: 2px;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border, var(--n-300));
  border-left: 2px solid var(--clr-primary, var(--b-700));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
  color: var(--clr-primary, var(--b-700));
  text-align: left;
  cursor: pointer;
}

.m365-ops-reco-primary strong {
  font-size: 0.84rem;
  line-height: 1.2;
}

.m365-ops-reco-primary span {
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.72rem;
}

.m365-ops-reco-primary:hover,
.m365-ops-reco-primary.is-selected {
  background: var(--clr-info-bg, var(--b-50));
}

.m365-ops-reco-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
}

.m365-ops-reco-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 9px;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--clr-border, var(--n-200));
  background: var(--clr-surface, var(--n-0));
}

.m365-ops-reco-row:last-child {
  border-bottom: 0;
}

.m365-ops-reco-row--risk { border-left-color: var(--clr-risk, var(--r-600)); }
.m365-ops-reco-row--warn { border-left-color: var(--clr-warn, var(--a-500)); }
.m365-ops-reco-row--unknown,
.m365-ops-reco-row--unlicensed { border-left-color: var(--clr-border-strong, var(--n-400)); }

.m365-ops-reco-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.m365-ops-reco-row-main strong {
  overflow: hidden;
  color: var(--clr-text, var(--n-900));
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.m365-ops-reco-row-main span {
  overflow: hidden;
  color: var(--clr-text-muted, var(--n-800));
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
}

.m365-ops-reco-source {
  white-space: nowrap;
}

.m365-ops-reco-card {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-left: 2px solid var(--clr-border-strong, var(--n-400));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}

.m365-ops-reco-card--risk { border-left-color: var(--clr-risk, var(--r-600)); }
.m365-ops-reco-card--warn { border-left-color: var(--clr-warn, var(--a-500)); }
.m365-ops-reco-card--unlicensed,
.m365-ops-reco-card--unknown { border-left-color: var(--clr-border-strong, var(--n-400)); }

.m365-ops-reco-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.m365-ops-reco-card > strong {
  font-size: 0.84rem;
  line-height: 1.25;
}

.m365-ops-reco-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--clr-text-muted, var(--n-800));
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.78rem;
  line-height: 1.35;
}

.m365-ops-reco-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--clr-border, var(--n-300));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
}
.m365-ops-reco-btn:hover { color: var(--clr-primary); border-color: var(--clr-primary); }

.m365-ops-reco-btn:hover,
.m365-ops-reco-btn.is-selected {
  border-color: rgba(26, 107, 138, 0.38);
  background: var(--clr-info-bg, var(--b-50));
}

.m365-ops-reco-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.78rem;
}

.m365-ops-readiness-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-ops-check-list,
.m365-ops-permission-list,
.m365-ops-history-list {
  display: grid;
  gap: 6px;
}

.m365-ops-check-row,
.m365-ops-permission-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}

.m365-ops-check-row strong,
.m365-ops-permission-row strong {
  display: block;
  font-size: 0.78rem;
  line-height: 1.25;
}

.m365-ops-check-row span:not(.status-badge),
.m365-ops-permission-row span:not(.status-badge) {
  display: block;
  margin-top: 2px;
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.72rem;
  line-height: 1.35;
}

.m365-ops-fold {
  margin-top: 7px;
}

.m365-ops-fold > summary {
  cursor: pointer;
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-ops-fold .m365-ops-permission-list {
  margin-top: 6px;
  max-height: 260px;
  overflow: auto;
}

.m365-ops-history-item {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}

.m365-ops-history-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.m365-ops-history-top strong {
  font-size: 0.78rem;
}

.m365-ops-history-item p {
  margin: 0;
  color: var(--clr-text-muted, var(--n-800));
  font-size: 0.72rem;
}

.m365-ops-history-item > span {
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.66rem;
  font-weight: 700;
}

.m365-chat-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.m365-chat-preset {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--clr-border, var(--n-300));
  background: var(--clr-surface, var(--n-0));
  border-radius: var(--radius-sm);
  color: var(--clr-text, var(--n-900));
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.m365-chat-preset:hover {
  background: var(--clr-hover, var(--n-50));
}

.m365-chat-preset.is-selected {
  border-color: rgba(26, 107, 138, 0.38);
  background: var(--clr-info-bg, var(--b-50));
}

.m365-chat-preset--primary {
  border-color: rgba(37, 99, 235, 0.38);
  background: var(--b-50);
  color: var(--b-500);
  font-weight: 700;
}

.m365-chat-preset--primary:hover {
  background: var(--b-100);
}

@media (max-width: 980px) {
  .m365-ops-shell {
    grid-template-columns: 1fr;
  }
}

.m365-ops-plan-result {
  min-width: 0;
}

.m365-plan-empty,
.m365-plan-card {
  min-width: 0;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
}

.m365-plan-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 150px;
  padding: 18px;
  color: var(--clr-text-muted, var(--n-500));
  text-align: center;
}

.m365-plan-empty strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--clr-text, var(--n-900));
}

.m365-plan-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-left: 2px solid var(--clr-warning, var(--a-500));
}

.m365-plan-card--low { border-left-color: var(--clr-success, var(--g-500)); }
.m365-plan-card--medium { border-left-color: var(--clr-warning, var(--a-500)); }
.m365-plan-card--high,
.m365-plan-card--critical { border-left-color: var(--clr-danger, var(--r-500)); }

.m365-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.m365-plan-head-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.m365-plan-head-title strong { font-size: 0.9rem; }
.m365-plan-head-title .muted-small { font-size: 0.78rem; }

.m365-plan-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.m365-plan-scope-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 4px 0;
}
.m365-plan-meta-label {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-muted);
}
.m365-plan-tail-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0;
  font-size: 0.78rem;
}
.m365-plan-tail-row > div { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

.m365-plan-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.m365-plan-chip {
  padding: 2px 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  font-size: 0.72rem;
  white-space: nowrap;
}

.m365-panel-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0 6px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 8px;
}
.m365-panel-bar strong { font-size: 0.84rem; }
.m365-panel-bar .muted-small { margin-left: auto; }
.m365-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.m365-exo-bootstrap-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  margin-top: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(196, 122, 30, 0.26);
  border-radius: var(--radius-sm);
  background: rgba(255, 247, 237, 0.72);
}

.m365-exo-bootstrap-note span:not(.status-badge) {
  min-width: 0;
  color: var(--clr-text-muted, var(--n-800));
  font-size: 0.72rem;
  line-height: 1.35;
}

.m365-plan-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.m365-plan-proposal {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-left: 2px solid var(--clr-info, var(--b-500));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}

.m365-plan-proposal--approved {
  border-left-color: var(--clr-success, var(--g-500));
}

.m365-plan-proposal--aborted {
  border-left-color: var(--clr-warning, var(--a-500));
}

.m365-plan-proposal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}
.m365-plan-proposal-head strong { font-size: 0.78rem; }
.m365-plan-proposal-head .status-badge { margin-left: auto; }

.m365-plan-change-list {
  display: grid;
  gap: 6px;
}

.m365-plan-change {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
}

.m365-plan-change > span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft, var(--n-50));
  color: var(--clr-primary, var(--b-700));
  font-size: 0.66rem;
  font-weight: 700;
}

.m365-plan-change strong {
  display: block;
  font-size: 0.78rem;
  line-height: 1.25;
}

.m365-plan-change p {
  margin: 3px 0 0;
  color: var(--clr-text-muted, var(--n-800));
  font-size: 0.72rem;
  line-height: 1.35;
}

.m365-plan-change small {
  display: block;
  margin-top: 4px;
  color: var(--clr-muted, var(--n-500));
  font-size: 0.66rem;
  font-weight: 700;
}

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

.m365-plan-grid > section,
.m365-plan-pre,
.m365-plan-blockers,
.m365-plan-steps,
.m365-plan-playbooks {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}

.m365-plan-grid > section > strong,
.m365-plan-pre > strong,
.m365-plan-blockers > strong,
.m365-plan-steps > strong,
.m365-plan-playbooks > strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.78rem;
}

.m365-plan-grid ul,
.m365-plan-pre ul,
.m365-plan-blockers ul {
  margin: 0;
  padding-left: 17px;
  color: var(--clr-text-muted, var(--n-800));
  font-size: 0.78rem;
  line-height: 1.4;
}

.m365-plan-grid li,
.m365-plan-pre li,
.m365-plan-blockers li {
  margin: 3px 0;
}

.m365-plan-blockers {
  border-left: 2px solid var(--clr-warning, var(--a-500));
}

.m365-plan-steps > div {
  display: grid;
  gap: 7px;
}

.m365-plan-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.m365-plan-step-num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
  color: var(--clr-primary, var(--b-700));
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-plan-step-body {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
}

.m365-plan-step--guarded .m365-plan-step-body {
  border-left: 2px solid var(--clr-warning, var(--a-500));
}

.m365-plan-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.m365-plan-step-head strong {
  font-size: 0.78rem;
  line-height: 1.25;
}

.m365-plan-step-tags {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

.m365-plan-step-tags span {
  min-height: 18px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft, var(--n-50));
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.m365-plan-step-body p {
  margin: 4px 0 0;
  color: var(--clr-text-muted, var(--n-800));
  font-size: 0.78rem;
  line-height: 1.4;
}

.m365-plan-code {
  max-height: 180px;
  margin: 7px 0 0;
  overflow: auto;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--n-200);
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre;
}

.m365-plan-playbooks {
  border-left: 2px solid var(--clr-primary, var(--b-700));
}

.m365-plan-playbooks > p {
  margin: 0 0 8px;
}

.m365-plan-playbooks .m365-chat-actions {
  margin-top: 6px;
}

.m365-chat-fold {
  min-width: 0;
}

.m365-chat-fold > summary {
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
  color: var(--clr-text-muted, var(--n-500));
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
}

.m365-chat-fold[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.m365-chat-fold .m365-chat-history {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (max-width: 760px) {
  .m365-plan-head,
  .m365-plan-grid {
    grid-template-columns: 1fr;
  }

  .m365-plan-proposal-head {
    align-items: stretch;
    flex-direction: column;
  }

  .m365-plan-badges {
    justify-content: flex-start;
  }
}

.m365-chat-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 430px;
  max-height: 640px;
  overflow-y: auto;
  padding: 12px;
  background: var(--clr-surface-soft, var(--n-25));
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
}

.m365-chat-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 180px;
  padding: 18px;
  text-align: center;
  color: var(--clr-text-muted, var(--n-500));
}

.m365-chat-empty strong {
  color: var(--clr-text, var(--n-900));
  font-size: 0.96rem;
}

.m365-chat-empty span {
  font-size: 0.78rem;
}

.m365-chat-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.m365-chat-msg--user {
  background: var(--clr-surface, var(--n-0));
  border-color: var(--clr-border, var(--n-200));
  align-self: flex-end;
  max-width: min(78%, 760px);
}

.m365-chat-msg--assistant {
  background: var(--clr-surface, var(--n-0));
  border-color: var(--clr-border-strong, var(--n-300));
  max-width: 100%;
}

.m365-chat-msg-role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--clr-text-muted, var(--n-500));
}

.m365-chat-msg-body {
  font-size: 0.84rem;
  line-height: 1.45;
}

.m365-chat-msg-body p {
  margin: 4px 0;
}

.m365-chat-msg-body h3,
.m365-chat-msg-body h4,
.m365-chat-msg-body h5 {
  margin: 10px 0 4px;
  font-size: 0.9rem;
  line-height: 1.25;
}

.m365-chat-msg-body ul,
.m365-chat-msg-body ol {
  margin: 5px 0 8px;
  padding-left: 20px;
}

.m365-chat-msg-body li {
  margin: 3px 0;
}

.m365-chat-msg-body code {
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-50));
  font-size: 0.82em;
}

.m365-code-block {
  margin: 8px 0;
  overflow: hidden;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--n-900);
}

.m365-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: var(--n-900);
  color: var(--n-300);
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-code-copy,
.m365-code-check {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(203, 213, 225, 0.32);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--n-25);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-code-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.m365-code-check {
  border-color: rgba(125, 211, 252, 0.45);
  background: rgba(14, 165, 233, 0.14);
  color: var(--b-100);
}

.m365-code-run {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(96, 165, 250, 0.5);
  border-radius: var(--radius-sm);
  background: var(--b-500);
  color: var(--n-0);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-code-copy:hover,
.m365-code-check:hover,
.m365-code-run:hover {
  background: rgba(255, 255, 255, 0.12);
}

.m365-code-run:hover {
  background: var(--b-500);
}

.m365-code-block pre {
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
}

.m365-code-block code {
  padding: 0;
  background: transparent;
  color: var(--n-200);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre;
}

.m365-ps-result {
  display: grid;
  gap: 6px;
  margin: 8px 0 2px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-left: 2px solid var(--clr-border-strong, var(--n-400));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}

.m365-ps-result--success {
  border-left-color: var(--clr-success, var(--g-500));
}

.m365-ps-result--failed {
  border-left-color: var(--clr-danger, var(--r-500));
}

.m365-ps-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.m365-ps-result-head strong {
  font-size: 0.84rem;
}

.m365-ps-result-head span {
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-ps-result p {
  margin: 0;
  font-size: 0.78rem;
}

.m365-ps-result details > summary {
  cursor: pointer;
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-ps-result pre {
  max-height: 260px;
  margin: 4px 0 0;
  overflow: auto;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--n-900);
  color: var(--n-200);
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.m365-ps-preflight {
  display: grid;
  gap: 7px;
  margin: 8px 0 2px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-left: 2px solid var(--clr-border-strong, var(--n-400));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}

.m365-ps-preflight--allowed {
  border-left-color: var(--clr-success, var(--g-500));
}

.m365-ps-preflight--rejected {
  border-left-color: var(--clr-danger, var(--r-500));
}

.m365-ps-preflight-head,
.m365-ps-preflight-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.m365-ps-preflight-head strong {
  font-size: 0.84rem;
}

.m365-ps-preflight-head span {
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-ps-preflight p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.m365-ps-preflight-reason {
  color: var(--clr-danger, var(--r-500));
  font-weight: 700;
}

.m365-ps-preflight details > summary {
  cursor: pointer;
  color: var(--clr-text-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-ps-preflight ul {
  margin: 5px 0 0;
  padding-left: 18px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.m365-ps-preflight code {
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
}

.m365-delta {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 4px;
  border-radius: var(--radius-sm);
}
.m365-delta--up { color: var(--clr-danger, var(--r-500)); }
.m365-delta--down { color: var(--clr-success, var(--g-500)); }

.m365-signal-drill > summary {
  cursor: pointer;
  list-style: revert;
}
.m365-signal-drill > summary strong { font-weight: 600; }
.m365-signal-drill ul {
  margin: 4px 0 2px 4px;
  padding-left: 14px;
  font-size: 0.78rem;
  color: var(--clr-text-muted, var(--n-800));
}
.m365-signal-drill ul li { word-break: break-all; }

.m365-info-cell {
  width: 42px;
  text-align: center;
  white-space: nowrap;
}

.m365-info-btn {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--clr-border, var(--n-300));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
  color: var(--clr-primary, var(--b-700));
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.m365-info-btn:hover {
  border-color: rgba(26, 107, 138, 0.42);
  background: var(--clr-info-bg, var(--b-50));
}

/* Aktions-Buttons an M365-Befunden/-Signalen (Öffnen / Schritte). */
.m365-problem-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.m365-problem-act {
  padding: 2px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-primary);
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}
.m365-problem-act:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

/* Asset SNMP info button */
.asset-info-cell { width: 32px; text-align: center; }
.asset-info-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-primary, var(--b-700));
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.asset-info-btn:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

/* Asset SNMP Modal */
.asset-snmp-modal {
  width: min(100%, 760px);
  max-height: min(85vh, 820px);
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.asset-snmp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.asset-snmp-modal-head h2 { margin: 0; font-size: 1rem; }
.asset-snmp-modal-close {
  background: none;
  border: 0;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  color: var(--clr-muted);
  padding: 2px 6px;
}
.asset-snmp-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 12px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  font-size: 0.78rem;
}
.asset-snmp-meta > div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.asset-snmp-meta dt { flex-shrink: 0; color: var(--clr-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.asset-snmp-meta dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.asset-type-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.asset-snmp-ports strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-muted); margin-bottom: 6px; }
.asset-snmp-ports > div { display: flex; flex-wrap: wrap; gap: 4px; }
.asset-port-chip {
  padding: 2px 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  font-size: 0.72rem;
}
.asset-snmp-table-wrap { overflow-x: auto; }
.asset-snmp-table { min-width: 400px; }

.m365-signal-modal {
  width: min(100%, 620px);
  max-height: min(82vh, 720px);
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--clr-border, var(--n-300));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
  box-shadow: 0 18px 60px rgba(16, 32, 40, 0.18);
}

.m365-signal-modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.m365-signal-modal-head h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
}

.m365-signal-modal-close {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
  color: var(--clr-muted, var(--n-800));
  font-size: 1rem;
  line-height: 1;
}

.m365-signal-modal-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.m365-signal-modal-meta > span:not(.status-badge) {
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--clr-border, var(--n-300));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
  color: var(--clr-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
}

.m365-signal-modal-section {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}

.m365-signal-modal-section > strong {
  color: var(--clr-text, var(--n-900));
  font-size: 0.78rem;
}

.m365-signal-modal-section p,
.m365-signal-modal-section ol,
.m365-signal-modal-section ul,
.m365-signal-modal-section dl {
  margin: 0;
}

.m365-signal-modal-section ol,
.m365-signal-modal-section ul {
  padding-left: 18px;
}

.m365-signal-modal-section li {
  margin: 3px 0;
  line-height: 1.4;
}

.m365-signal-modal-section dl {
  display: grid;
  gap: 6px;
}

.m365-signal-modal-section dl > div {
  display: grid;
  gap: 2px;
}

.m365-signal-modal-section dt {
  color: var(--clr-muted, var(--n-500));
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.m365-signal-modal-section dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.m365-unlicensed-group {
  margin: 0 0 8px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft, var(--n-25));
}

.m365-unlicensed-group > summary {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.m365-unlicensed-group > summary::-webkit-details-marker {
  display: none;
}

.m365-unlicensed-group > summary::after {
  content: "Aufklappen";
  color: var(--clr-muted, var(--n-500));
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.m365-unlicensed-group[open] > summary::after {
  content: "Zuklappen";
}

.m365-unlicensed-group > summary small {
  color: var(--clr-muted, var(--n-500));
  font-size: 0.72rem;
  text-align: right;
}

.m365-unlicensed-group .table-scroll {
  border-top: 1px solid var(--clr-border, var(--n-200));
}

.m365-signal-table--nested {
  border: 0;
}

.m365-sparklines {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft, var(--n-25));
}
.m365-spark-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--clr-accent, var(--b-500));
}
.m365-spark-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--clr-text-muted, var(--n-500));
}

.m365-headline-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 8px 0;
  overflow: hidden;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface, var(--n-0));
}

.m365-headline-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 120px;
  flex: 1 1 120px;
  padding: 8px 12px;
  border-right: 1px solid var(--clr-border, var(--n-200));
  border-left: 2px solid transparent;
  background: transparent;
}

.m365-headline-tile--risk { border-left-color: var(--clr-danger, var(--r-500)); }
.m365-headline-tile--warn { border-left-color: var(--clr-warning, var(--a-500)); }
.m365-headline-tile--ok { border-left-color: var(--clr-success, var(--g-500)); }
.m365-headline-tile--unknown { border-left-color: var(--clr-border-strong, var(--n-400)); }
.m365-headline-tile--unlicensed { border-left-color: var(--clr-border-strong, var(--n-400)); }
.m365-headline-tile--info { border-left-color: var(--clr-accent, var(--b-500)); }

.m365-headline-tile-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--clr-muted, var(--n-500));
  white-space: nowrap;
}

.m365-headline-tile-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--clr-text);
}

/* Kompakte Statuszeile der Übersicht */
.m365-security-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt, var(--n-25));
}
.m365-security-bar-title {
  font-size: 0.9rem;
  font-weight: 700;
}
.m365-security-bar .m365-summary-rail { margin: 0; }
.m365-security-bar-meta { margin-left: auto; white-space: nowrap; }
@media (max-width: 720px) {
  .m365-security-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .m365-security-bar-meta { margin-left: 0; }
  .m365-security-bar-title { font-size: 0.84rem; }
}

.m365-trends-fold > summary {
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--clr-muted, var(--n-500));
  padding: 4px 0;
}

.m365-chat-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.m365-chat-action {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--clr-accent-border, var(--b-500));
  background: var(--clr-accent-soft, var(--b-50));
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.m365-chat-action > div { flex: 1; }
.m365-chat-action strong { display: block; font-size: 0.9rem; }
.m365-chat-action p { margin: 4px 0; font-size: 0.84rem; }
.m365-chat-action small { font-size: 0.72rem; color: var(--clr-text-muted, var(--n-800)); }
.m365-chat-action-status {
  display: block;
  margin-top: 4px;
}
.m365-chat-action button[disabled] { opacity: 0.7; cursor: default; }

.m365-permission-gaps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--clr-warn) 35%, transparent);
  background: color-mix(in srgb, var(--clr-warn) 8%, var(--clr-surface));
  border-left: 2px solid var(--clr-warn);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  margin: 6px 0;
  font-size: 0.78rem;
}
.m365-permission-gaps strong { white-space: nowrap; }
.m365-permission-gaps ul {
  flex-basis: 100%;
  margin: 2px 0 0 16px;
  padding: 0;
  font-size: 0.78rem;
}

.m365-signal-cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-text-muted, var(--n-500));
}

.m365-signal-cell { display: flex; flex-direction: column; gap: 1px; }
.m365-signal-cat-inline { font-size: 0.72rem; color: var(--clr-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* Signal-Liste (einzeilig) */
.m365-signal-list { display: flex; flex-direction: column; }

.m365-signal-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--clr-border);
  min-height: 32px;
}
.m365-signal-item:last-child { border-bottom: 0; }
.m365-signal-item:hover { background: var(--clr-surface-alt); }
.m365-signal-item--risk    { box-shadow: inset 3px 0 0 var(--clr-risk); }
.m365-signal-item--warn    { box-shadow: inset 3px 0 0 var(--clr-warn); }
.m365-signal-item--ok      { box-shadow: inset 3px 0 0 var(--clr-ok); }
.m365-signal-item--unknown { box-shadow: inset 3px 0 0 var(--clr-border-mid); }
.m365-signal-item--unlicensed { box-shadow: inset 3px 0 0 var(--clr-border-strong, var(--n-400)); }

.m365-signal-name-group {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.m365-signal-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--clr-text);
}

.m365-signal-urgency {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.m365-signal-urgency--risk    { color: var(--clr-risk); }
.m365-signal-urgency--warn    { color: var(--clr-warn); }
.m365-signal-urgency--unknown { color: var(--clr-muted); }
.m365-signal-urgency--unlicensed { color: var(--clr-muted); }
.m365-signal-cat-tag {
  flex-shrink: 0;
  font-size: 0.66rem;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.m365-signal-value {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--clr-text);
  text-align: right;
  white-space: nowrap;
}
.m365-signal-samples {
  flex-shrink: 0;
}
.m365-signal-samples-toggle {
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--clr-muted);
  list-style: none;
  padding: 2px 4px;
  border-radius: 3px;
  user-select: none;
}
.m365-signal-samples-toggle::-webkit-details-marker { display: none; }
.m365-signal-samples > ul {
  position: absolute;
  z-index: 10;
  max-width: 280px;
  padding: 6px 10px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  font-size: 0.78rem;
  list-style: disc;
  margin: 0;
}
.m365-signal-samples > ul li { word-break: break-all; }

/* Befund-Liste (einzeilig, analog zur Signal-Liste) */
.m365-finding-list { display: flex; flex-direction: column; }
.m365-finding-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--clr-border);
  min-height: 32px;
}
.m365-finding-item:last-child { border-bottom: 0; }
.m365-finding-item:hover { background: var(--clr-surface-alt); }
.m365-finding-item--risk { box-shadow: inset 3px 0 0 var(--clr-risk); }
.m365-finding-item--warn { box-shadow: inset 3px 0 0 var(--clr-warn); }
.m365-finding-item--ok   { box-shadow: inset 3px 0 0 var(--clr-ok); }
.m365-finding-item--unknown,
.m365-finding-item--info { box-shadow: inset 3px 0 0 var(--clr-border-mid); }
.m365-finding-title {
  flex: 1 1 46%;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--clr-text);
}
.m365-finding-action {
  flex: 1 1 54%;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--clr-info);
}
.m365-finding-samples { flex-shrink: 0; position: relative; }
.m365-finding-samples-toggle {
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--clr-muted);
  list-style: none;
  padding: 2px 4px;
  border-radius: 3px;
  user-select: none;
}
.m365-finding-samples-toggle::-webkit-details-marker { display: none; }
.m365-finding-detail-pop {
  position: absolute;
  right: 0;
  z-index: 10;
  max-width: 320px;
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--clr-text);
  white-space: normal;
}

/* Betrieb & Fehler — einzeilige Ops-Listen (analog Signal/Befund) */
.m365-ops-list { display: flex; flex-direction: column; }
.m365-ops-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--clr-border);
  min-height: 32px;
}
.m365-ops-item:last-child { border-bottom: 0; }
.m365-ops-item:hover { background: var(--clr-surface-alt); }
.m365-ops-item--risk { box-shadow: inset 3px 0 0 var(--clr-risk); }
.m365-ops-item--warn { box-shadow: inset 3px 0 0 var(--clr-warn); }
.m365-ops-svc {
  flex: 0 0 auto;
  max-width: 32%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-text);
}
.m365-ops-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--clr-text);
}
.m365-ops-detail {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  color: var(--clr-muted);
}
.m365-ops-tag {
  flex: 0 0 auto;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--clr-muted);
  white-space: nowrap;
}
.m365-ops-code {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--clr-muted);
}
.m365-ops-num {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--clr-text);
}
.m365-ops-bar {
  flex: 0 0 70px;
  height: 5px;
  border-radius: 3px;
  background: var(--clr-surface-alt);
  overflow: hidden;
}
.m365-ops-bar > span {
  display: block;
  height: 100%;
  background: var(--clr-warn);
  border-radius: 3px;
}
.m365-ops-foot { margin: 6px 10px 2px; }
.m365-list-empty--warn { color: var(--clr-warn); }

.m365-permissions-block {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border, var(--n-200));
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft, var(--n-25));
}

.m365-permissions-list {
  margin: 6px 0 6px 18px;
  padding: 0;
  font-size: 0.84rem;
  line-height: 1.5;
}

.m365-permissions-list code {
  font-size: 0.78rem;
}

.m365-chat-form textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--clr-border, var(--n-300));
  border-radius: 8px 8px 0 0;
  background: var(--clr-surface, var(--n-0));
}

.m365-chat-form textarea:focus {
  outline: 2px solid rgba(26, 107, 138, 0.18);
  outline-offset: -2px;
}

.m365-chat-form .module-actions {
  padding: 8px 10px;
  gap: 8px;
}

.m365-chat-form .form-message {
  min-height: 0;
  margin: 0;
  padding: 0 10px 8px;
  font-size: 0.78rem;
}

.m365-chat-form {
  overflow: hidden;
}

.m365-chat-form button {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .m365-chat-msg--user {
    max-width: 100%;
  }

  .m365-ops-reco-metrics {
    grid-template-columns: 1fr;
  }

  .m365-ops-reco-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .m365-ops-reco-source,
  .m365-ops-reco-row .m365-ops-reco-btn {
    grid-column: 2;
    justify-self: start;
  }
}

/* ── Tenant status bar ──────────────────────────────────────── */
.m365-tenant-status-bar {
  display: grid;
  grid-template-columns: auto auto minmax(140px, 1.3fr) minmax(130px, 1fr) auto auto;
  gap: 4px 12px;
  align-items: center;
  margin: 6px 0 0;
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  font-size: 0.78rem;
}
.m365-tenant-status-bar--ok   { border-left-color: var(--clr-ok); }
.m365-tenant-status-bar--warn { border-left-color: var(--clr-warn); }
.m365-tenant-status-bar--risk { border-left-color: var(--clr-risk); }
.m365-tenant-status-bar--slim {
  display: flex;
  grid-template-columns: none;
  padding: 5px 10px;
}
.m365-ts-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--clr-text);
  white-space: nowrap;
}
.m365-ts-item code {
  min-width: 0;
  overflow: hidden;
  max-width: 240px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
}
.m365-ts-key {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.m365-ts-item--status .status-badge {
  min-height: 20px;
}

/* Overview: Identity fold */
.m365-identity-fold, .m365-overview-ai-fold {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.m365-identity-fold > summary, .m365-overview-ai-fold > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  cursor: pointer; font-size: 0.84rem; font-weight: 700;
  background: var(--clr-surface-soft);
  list-style: none; user-select: none;
}
.m365-identity-fold > summary::-webkit-details-marker,
.m365-overview-ai-fold > summary::-webkit-details-marker { display: none; }
.m365-identity-fold > summary::after,
.m365-overview-ai-fold > summary::after { content: "▸"; margin-left: auto; font-size: 0.72rem; }
.m365-identity-fold[open] > summary::after,
.m365-overview-ai-fold[open] > summary::after { content: "▾"; }
.m365-identity-fold > div { padding: 8px 12px; }
.m365-overview-ai-fold > div { padding: 8px 12px; font-size: 0.84rem; line-height: 1.5; }
.m365-fold-badge {
  display: inline-grid; place-items: center;
  min-width: 20px; padding: 0 5px; height: 18px;
  border-radius: var(--radius-sm); background: var(--clr-border); font-size: 0.72rem; font-weight: 700;
}

/* ── Security: Signal-Karten + Kategorie-Gruppen ─────────────── */
.m365-signal-groups { display: grid; gap: 6px; }

.m365-signal-group {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.m365-signal-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  cursor: pointer; list-style: none; user-select: none;
  font-size: 0.84rem; font-weight: 700;
  background: var(--clr-surface-soft);
}
.m365-signal-group-head::-webkit-details-marker { display: none; }
.m365-signal-group-head::after { content: "▸"; margin-left: auto; font-size: 0.72rem; }
.m365-signal-group[open] .m365-signal-group-head::after { content: "▾"; }
.m365-signal-group-head--risk   { background: var(--clr-risk-bg); }
.m365-signal-group-head--warn   { background: var(--clr-warn-bg); }
.m365-signal-group-icon { font-size: 0.9rem; }
.m365-cat-badge {
  display: inline-grid; place-items: center;
  min-width: 20px; padding: 0 5px; height: 18px;
  border-radius: var(--radius-sm); background: var(--clr-border);
  color: var(--clr-muted); font-size: 0.72rem; font-weight: 700;
}
.m365-cat-badge--critical { background: var(--clr-risk-bg); color: var(--clr-risk); }
.m365-cat-badge--warning  { background: var(--clr-warn-bg); color: var(--clr-warn); }
.m365-cat-badge--unknown  { background: var(--clr-surface-alt); }

.m365-signal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  padding: 8px;
}
.m365-signal-card {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  min-width: 0;
}
.m365-signal-card--risk    { border-left-color: var(--clr-risk); background: var(--clr-risk-bg); }
.m365-signal-card--warn    { border-left-color: var(--clr-warn); background: var(--clr-warn-bg); }
.m365-signal-card--ok      { border-left-color: var(--clr-ok); }
.m365-signal-card--unknown { border-left-color: var(--clr-border-strong, var(--n-400)); background: var(--clr-surface-soft); }

.m365-signal-card-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.m365-signal-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.m365-signal-card-name { font-size: 0.78rem; font-weight: 700; color: var(--clr-text); }
.m365-signal-card-value { font-size: 0.9rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.m365-signal-card-detail { font-size: 0.66rem; letter-spacing: 0.02em; }
.m365-signal-card-msg { font-size: 0.72rem; color: var(--clr-text); line-height: 1.35; }
.m365-signal-card-drill { font-size: 0.72rem; margin-top: 4px; }
.m365-signal-card-drill summary { cursor: pointer; color: var(--clr-muted); }
.m365-signal-card-drill ul { margin: 4px 0 0 14px; padding: 0; line-height: 1.45; word-break: break-all; }
.m365-signal-card-actions { display: flex; align-items: flex-start; }

/* ── Ops-Shell v2 ────────────────────────────────────────────── */
.m365-ops-shell--v2 {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
}

.m365-ops-shell--terminal-only {
  grid-template-columns: minmax(0, 1fr);
}

.m365-ops-shell--terminal-only .m365-terminal-mount {
  height: clamp(420px, 62vh, 760px);
}

.m365-ops-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.m365-ops-actions-right { margin-left: auto; }
.m365-chat-fold-count {
  display: inline-flex; place-items: center;
  min-width: 20px; padding: 0 5px; height: 18px;
  border-radius: var(--radius-sm); background: var(--clr-border);
  color: var(--clr-muted); font-size: 0.72rem; font-weight: 700;
}
.m365-ops-side-fold {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.m365-ops-side-fold > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  cursor: pointer; list-style: none; font-size: 0.78rem; font-weight: 700;
  background: var(--clr-surface-soft); user-select: none;
}
.m365-ops-side-fold > summary::-webkit-details-marker { display: none; }
.m365-ops-side-fold > summary::after { content: "▸"; margin-left: auto; font-size: 0.72rem; }
.m365-ops-side-fold[open] > summary::after { content: "▾"; }
.m365-ops-side-fold > div { padding: 8px 10px; }
.m365-ops-side-fold .m365-chat-presets { padding-top: 4px; }

.m365-terminal-panel {
  min-width: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  overflow: hidden;
}

.m365-terminal-bar {
  gap: 10px;
  flex-wrap: wrap;
}

.m365-terminal-providers {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft);
}

.m365-terminal-provider-btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  background: transparent;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.m365-terminal-provider-btn:hover:not(:disabled),
.m365-terminal-provider-btn.is-active {
  background: var(--clr-surface);
  color: var(--clr-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.m365-terminal-provider-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.m365-terminal-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Autoscroll toggle: muted when paused, accented while following the tail. */
.m365-terminal-autoscroll.is-active {
  color: var(--clr-accent);
  border-color: var(--clr-accent);
  box-shadow: inset 0 0 0 1px var(--clr-accent);
}

.m365-terminal-status {
  min-width: 76px;
  text-align: center;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  color: var(--clr-muted);
  background: var(--clr-surface);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.m365-terminal-status[data-tone="ok"] {
  border-color: rgba(28, 128, 84, 0.28);
  color: var(--clr-ok, var(--g-500));
  background: var(--clr-ok-bg, var(--g-50));
}

.m365-terminal-status[data-tone="warn"] {
  border-color: rgba(196, 122, 30, 0.34);
  color: var(--clr-warn, var(--a-500));
  background: var(--clr-warn-bg, var(--a-50));
}

.m365-terminal-status[data-tone="risk"] {
  border-color: rgba(184, 48, 48, 0.32);
  color: var(--clr-risk, var(--r-600));
  background: var(--clr-risk-bg, var(--r-50));
}

.m365-terminal-mount {
  height: clamp(320px, 42vh, 520px);
  min-height: 320px;
  background: var(--n-900);
  color: var(--n-200);
  overflow: hidden;
}

.m365-terminal-xterm {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.m365-terminal-xterm .xterm {
  height: 100%;
}

.m365-terminal-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 18px;
  text-align: center;
  color: var(--n-200);
}

.m365-terminal-placeholder strong {
  font-size: 0.9rem;
  color: var(--b-50);
}

.m365-terminal-placeholder span {
  max-width: 620px;
  color: var(--n-400);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Prompt-Arbeitsfläche des M365-Terminals — dieselbe Sprache wie das
   QT-AI-Panel in QTC (Accent-Kante = KI), nur an die Terminal-Pane angesetzt. */
.m365-prompt-panel {
  display: grid;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-accent);
  background: color-mix(in srgb, var(--clr-accent) 5%, var(--clr-surface));
}

.m365-prompt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.m365-prompt-title {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.m365-prompt-mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-accent) 14%, transparent);
  color: var(--clr-accent);
  font-size: 0.78rem;
}

.m365-prompt-title .eyebrow { margin: 0; }
.m365-prompt-title h3 {
  margin: 2px 0 0;
  color: var(--clr-text);
  font-size: 0.9rem;
}

.m365-prompt-hint { align-self: center; }

.m365-prompt-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
}

.m365-prompt-composer textarea {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  resize: vertical;
  font-size: 0.78rem;
  line-height: 1.4;
}

.m365-prompt-composer-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.m365-prompt-route {
  min-height: 24px;
  padding: 5px 8px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-strong, var(--n-400));
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.66rem;
  line-height: 1.35;
}

.m365-prompt-route--ok { border-left-color: var(--clr-ok, var(--g-500)); }
.m365-prompt-route--info { border-left-color: var(--clr-primary, var(--b-500)); }
.m365-prompt-route--warn { border-left-color: var(--clr-warn, var(--a-500)); }
.m365-prompt-route--risk { border-left-color: var(--clr-risk, var(--r-600)); }

.m365-prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 7px;
}

.m365-prompt-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  transition: border-color 120ms, box-shadow 120ms;
}

.m365-prompt-card:hover {
  border-color: color-mix(in srgb, var(--clr-accent) 45%, transparent);
  box-shadow: 0 1px 4px rgba(12, 26, 36, 0.07);
}

.m365-prompt-card strong {
  display: block;
  margin-bottom: 2px;
  color: var(--clr-text);
  font-size: 0.78rem;
}

.m365-prompt-card span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--clr-muted);
  font-size: 0.66rem;
  line-height: 1.35;
}

.m365-prompt-card .m365-prompt-readiness {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 20px;
  align-items: center;
  padding: 2px 7px;
  overflow: visible;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  -webkit-line-clamp: unset;
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

.m365-prompt-readiness--ok {
  border-color: color-mix(in srgb, var(--clr-ok, var(--g-500)) 40%, var(--clr-border));
  background: color-mix(in srgb, var(--clr-ok, var(--g-500)) 8%, var(--clr-surface));
  color: var(--clr-ok, var(--g-500));
}

.m365-prompt-readiness--info {
  border-color: color-mix(in srgb, var(--clr-primary, var(--b-500)) 35%, var(--clr-border));
  background: color-mix(in srgb, var(--clr-primary, var(--b-500)) 7%, var(--clr-surface));
  color: var(--clr-primary, var(--b-500));
}

.m365-prompt-readiness--warn {
  border-color: color-mix(in srgb, var(--clr-warn, var(--a-500)) 45%, var(--clr-border));
  background: color-mix(in srgb, var(--clr-warn, var(--a-500)) 8%, var(--clr-surface));
  color: var(--clr-warn, var(--a-500));
}

.m365-prompt-readiness--risk {
  border-color: color-mix(in srgb, var(--clr-risk, var(--r-600)) 45%, var(--clr-border));
  background: color-mix(in srgb, var(--clr-risk, var(--r-600)) 8%, var(--clr-surface));
  color: var(--clr-risk, var(--r-600));
}

.m365-prompt-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: auto;
}

.m365-prompt-btn {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
}

.m365-prompt-btn:hover:not(:disabled) {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

.m365-prompt-btn--primary {
  border-color: var(--clr-accent);
  background: var(--clr-accent);
  color: var(--n-0);
}

.m365-prompt-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--clr-accent) 88%, var(--n-900));
  border-color: color-mix(in srgb, var(--clr-accent) 88%, var(--n-900));
  color: var(--n-0);
}

.m365-prompt-btn:disabled,
.m365-prompt-composer textarea:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 760px) {
  .m365-prompt-composer { grid-template-columns: 1fr; }
}

.m365-terminal-reachability {
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.m365-terminal-reach-fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 38px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.m365-terminal-reach-fold > summary::-webkit-details-marker { display: none; }

.m365-terminal-reach-fold > summary::after {
  content: "▸";
  margin-left: 2px;
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.m365-terminal-reach-fold[open] > summary::after { content: "▾"; }

.m365-terminal-reach-fold > summary > strong {
  font-size: 0.84rem;
}

.m365-terminal-reach-fold > summary > .muted-small {
  margin-left: auto;
}

.m365-terminal-reach-body {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.m365-terminal-reach-body > .muted-small { margin: 0; }

.m365-terminal-reach-actions {
  display: flex;
  justify-content: flex-end;
}

.m365-terminal-workload-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.m365-terminal-workload {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(140px, 220px) minmax(0, 1fr) minmax(160px, 280px);
  gap: 6px 10px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-strong, var(--n-400));
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.m365-terminal-workload--ok { border-left-color: var(--clr-ok, var(--g-500)); }
.m365-terminal-workload--warn { border-left-color: var(--clr-warn, var(--a-500)); }
.m365-terminal-workload--risk { border-left-color: var(--clr-risk, var(--r-600)); }
.m365-terminal-workload--unknown,
.m365-terminal-workload--info { border-left-color: var(--clr-border-strong, var(--n-400)); }

.m365-terminal-workload > span {
  min-width: 78px;
  align-self: center;
}

.m365-terminal-workload > strong {
  min-width: 0;
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m365-terminal-workload > small {
  min-width: 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m365-terminal-workload > code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--clr-text);
  font-size: 0.66rem;
  justify-self: end;
  max-width: 100%;
}

@media (max-width: 720px) {
  .m365-terminal-actions {
    width: 100%;
    margin-left: 0;
  }
  .m365-terminal-status {
    flex: 1;
  }
  .m365-terminal-mount {
    height: 340px;
  }
  .m365-terminal-workload {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .m365-terminal-workload > span {
    grid-row: 1 / span 3;
    min-width: 0;
  }
  .m365-terminal-workload > small,
  .m365-terminal-workload > code {
    grid-column: 2;
    justify-self: stretch;
  }
}

/* ── Compact-Header ──────────────────────────────────────────── */
.m365-compact-header {
  margin-bottom: 0;
  padding: 5px 12px;
  row-gap: 3px;
}

.m365-compact-header .dch-name {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m365-compact-header .dch-icon {
  min-width: auto;
  color: var(--clr-muted, var(--n-500));
  font-size: 0.66rem;
  font-weight: 700;
}

.m365-compact-header .dch-meta {
  min-width: 0;
}

.m365-compact-header .m365-head-actions {
  margin-left: 0;
}

.m365-overview-stack {
  display: grid;
  gap: 8px;
}

.m365-list-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}
.m365-list-grid--stack {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 860px) {
  .m365-list-grid { grid-template-columns: minmax(0, 1fr); }
}

.m365-list-block {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.m365-list-block--wide {
  grid-column: 1 / -1;
}

.m365-list-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}

.m365-list-block-head strong {
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.m365-list-block-head .muted-small {
  flex: 0 0 auto;
  margin-left: auto;
}

.m365-list-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 10px;
  color: var(--clr-muted);
  font-size: 0.78rem;
}

.m365-list-block > .table-scroll,
.m365-list-block > table {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.m365-identity-table,
.m365-tenant-table {
  margin: 0;
}

.m365-identity-table td,
.m365-tenant-table td,
.m365-tenant-table th {
  vertical-align: top;
}

.m365-summary-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.m365-summary-rail-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: none;
}

.m365-summary-rail-item strong {
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1;
}

.m365-summary-rail-item--risk {
  border-color: rgba(184, 48, 48, 0.35);
}

.m365-summary-rail-item--warn {
  border-color: rgba(196, 122, 30, 0.4);
}

.m365-summary-rail-item--unlicensed,
.m365-summary-rail-item--unknown {
  border-color: rgba(100, 116, 139, 0.35);
}

.m365-summary-rail-item--ok {
  border-color: rgba(42, 125, 85, 0.35);
}

.m365-tenant-table tbody th {
  width: 120px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.m365-tenant-table code {
  font-size: 0.72rem;
}

.m365-table-note {
  margin: 6px 10px 9px;
}

.m365-overview-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
}

.m365-kpi {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.m365-kpi--wide {
  grid-column: span 2;
}

.m365-kpi-eyebrow {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.m365-kpi strong {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  line-height: 1.15;
}

.m365-kpi .status-badge {
  justify-self: start;
}

.m365-overview-ai,
.m365-connect-form,
.m365-onboarding {
  padding: 9px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.m365-overview-ai {
  border-left: 2px solid var(--clr-primary);
}

.m365-onboarding {
  border-left: 2px solid var(--clr-info);
  background: var(--clr-info-bg);
}

.m365-onboarding-steps-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.m365-connect-form .m365-credentials-grid {
  gap: 8px;
  margin-bottom: 6px;
}

.m365-connect-form .m365-form-message {
  min-height: 0;
  margin: 2px 0 8px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.m365-connect-form .module-actions {
  gap: 6px;
  flex-wrap: wrap;
}

.m365-connect-form .module-actions .action-button {
  min-height: 32px;
  padding: 0 10px;
}

.m365-overview-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-primary);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.m365-overview-main {
  min-width: 0;
}

.m365-overview-main .eyebrow {
  margin: 0 0 2px;
}

.m365-overview-main h2 {
  margin: 0;
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.m365-overview-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.m365-overview-meta > span:not(.status-badge),
.m365-connect-hint,
.m365-state-note {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.m365-state-note--active {
  border-color: rgba(26, 107, 138, 0.35);
  color: var(--clr-primary);
}

.m365-state-note--warn {
  border-color: rgba(196, 122, 30, 0.45);
  color: var(--a-500);
}

.m365-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.38fr);
  gap: 10px;
  align-items: start;
}

.m365-layout-main,
.m365-layout-side {
  display: grid;
  gap: 8px;
  min-width: 0;
}

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

.m365-page .m365-security {
  margin: 0;
  padding: 10px 12px;
  gap: 8px;
  border-radius: var(--radius-sm);
}

.m365-page .m365-security-head {
  align-items: center;
}

.m365-page .m365-security-head h3 {
  font-size: 0.96rem;
}

.m365-page .m365-security-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
}

.m365-page .m365-security-kpi {
  gap: 3px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.m365-page .m365-security-kpi-value {
  font-size: 1rem;
}

.m365-page .m365-security-findings {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}

.m365-page .m365-finding {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.m365-layout-side .m365-cockpit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.m365-layout-side .m365-cockpit > div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.m365-layout-side .m365-cockpit dt {
  font-size: 0.6rem;
}

.m365-layout-side .m365-cockpit dd strong {
  font-size: 0.84rem;
}

.m365-config-section .cust-section-body {
  padding: 9px 10px;
}

.m365-config-section .m365-credentials-grid {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

.m365-config-section .m365-credentials-grid label {
  display: grid;
  gap: 4px;
}

.m365-config-section .m365-credentials-grid input {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 0.84rem;
}

.m365-config-section .m365-advanced {
  margin: 4px 0 8px;
  padding: 7px 9px;
}

.m365-config-section .m365-form-message {
  min-height: 0;
  margin: 2px 0 8px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.m365-config-section .module-actions {
  gap: 6px;
  flex-wrap: wrap;
}

.m365-config-section .module-actions .action-button {
  min-height: 32px;
  padding: 0 10px;
}

@media (max-width: 1120px) {
  .m365-layout,
  .m365-section-grid {
    grid-template-columns: 1fr;
  }

  .m365-layout-side .m365-cockpit {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }
}

@media (max-width: 700px) {
  .content--customer .customer-tabs {
    position: static;
  }

  .m365-overview-card {
    align-items: stretch;
    flex-direction: column;
  }

  .m365-agent-head {
    align-items: stretch;
    flex-direction: column;
  }

  .m365-agent-identity h2 {
    white-space: normal;
  }

  .m365-compact-header .dch-meta {
    margin-left: 0;
    width: 100%;
  }

  .m365-tenant-status-bar {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .m365-ts-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    white-space: normal;
  }

  .m365-summary-rail {
    gap: 4px 6px;
  }

  .m365-consent-flow-head {
    flex-direction: column;
  }

  .m365-consent-steps {
    grid-template-columns: 1fr;
  }

  .m365-subnav-btn {
    flex: 1 0 auto;
  }

  .m365-kpi--wide {
    grid-column: auto;
  }

  .m365-head-actions {
    flex-wrap: wrap;
  }
}

/* === Device detail: compact page header === */
.content--device {
  padding-top: 8px !important;
}

.content--device .content-head {
  display: none !important;
}

.content--device .content-body {
  gap: 6px !important;
}

.content--device .device-detail {
  gap: 6px;
}

/* ============================================================
   Report Designer — 2-pane layout
   ============================================================ */

/* Wrapper */
.report-designer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Top action bar */
.report-designer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--n-200);
  background: var(--n-25);
  flex-shrink: 0;
  gap: 12px;
}
.report-designer-bar-title {
  font: 600 0.82rem/1 system-ui, sans-serif;
  color: var(--n-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-designer-bar-actions {
  display: flex;
  gap: 8px;
}
.report-designer-bar-actions button {
  padding: 5px 13px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--n-300);
  background: var(--n-0);
  color: var(--n-800);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.report-designer-bar-actions button:hover {
  background: var(--n-50);
  border-color: var(--n-400);
}

/* Two-column grid */
.report-designer-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* Left pane (designer controls) */
.report-designer-pane {
  border-right: 1px solid var(--n-200);
  overflow-y: auto;
  padding: 16px 14px;
  background: var(--n-25);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.report-designer-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.report-designer-block-label {
  font: 600 0.65rem/1 system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--n-400);
  padding-bottom: 2px;
}

/* Scope tabs (vertical) */
.report-scope-tabs--vertical {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.report-scope-tab {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  text-align: left;
  transition: background .12s, border-color .12s;
}
.report-scope-tab strong {
  font: 600 0.76rem/1.2 system-ui, sans-serif;
  color: var(--n-800);
}
.report-scope-tab span {
  font: 400 0.67rem/1.3 system-ui, sans-serif;
  color: var(--n-400);
  margin-top: 1px;
}
.report-scope-tab:hover {
  background: var(--n-50);
  border-color: var(--n-300);
}
.report-scope-tab.active {
  background: var(--b-50);
  border-color: var(--b-200);
}
.report-scope-tab.active strong { color: var(--b-500); }

/* Fields */
.report-designer-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.report-designer-field label {
  font: 500 0.7rem/1 system-ui, sans-serif;
  color: var(--n-500);
}
.report-designer-field select,
.report-designer-field input {
  padding: 6px 9px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  color: var(--n-900);
  background: var(--n-0);
  outline: none;
  transition: border-color .12s;
}
.report-designer-field select:focus,
.report-designer-field input:focus {
  border-color: var(--b-500);
}

/* Preset pills */
.report-preset-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.report-preset-pill {
  padding: 5px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--n-300);
  background: var(--n-0);
  font: 500 0.72rem/1 system-ui, sans-serif;
  color: var(--n-800);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.report-preset-pill:hover {
  background: var(--n-50);
  border-color: var(--n-400);
}
.report-preset-pill.active {
  background: var(--b-500);
  border-color: var(--b-500);
  color: var(--n-0);
}

/* Module toggles */
.report-module-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--n-50);
  cursor: pointer;
}
.report-module-toggle:last-child { border-bottom: none; }
.report-module-toggle-label {
  font: 500 0.75rem/1.2 system-ui, sans-serif;
  color: var(--n-800);
  display: flex;
  align-items: center;
  gap: 6px;
}
.report-module-toggle-label .icon { color: var(--n-400); font-size: 0.78rem; }
/* Pill-style toggle switch */
.report-toggle-switch {
  position: relative;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
}
.report-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.report-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: var(--n-300);
  transition: background .15s;
  cursor: pointer;
}
.report-toggle-switch input:checked + .report-toggle-track { background: var(--b-500); }
.report-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--n-0);
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.report-toggle-switch input:checked + .report-toggle-track::after {
  transform: translateX(14px);
}

/* Right pane (preview) */
.report-designer-preview {
  overflow-y: auto;
  padding: 24px 28px;
  background: var(--n-50);
}

/* Paper preview card */
.report-preview-page {
  max-width: 780px;
  margin: 0 auto;
  background: var(--n-0);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 18px rgba(0,0,0,.10);
  overflow: hidden;
}
.report-preview-page-head {
  padding: 22px 28px 18px;
  border-bottom: 2px solid var(--n-50);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.report-preview-page-head h2 {
  font: 700 1.05rem/1.25 system-ui, sans-serif;
  color: var(--n-900);
  margin: 0;
}
.report-preview-page-head p {
  font-size: 0.72rem;
  color: var(--n-500);
  margin: 4px 0 0;
}

/* Decision pill */
.report-decision-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font: 700 0.7rem/1 system-ui, sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}
.report-decision-pill--ok    { background: var(--g-100); color: var(--g-500); }
.report-decision-pill--warn  { background: var(--a-100); color: var(--a-500); }
.report-decision-pill--crit  { background: var(--r-100); color: var(--r-600); }
.report-decision-pill--info  { background: var(--b-100); color: var(--b-700); }
.report-decision-pill--neutral { background: var(--n-50); color: var(--n-800); }

/* KPI strip */
.report-kpi-strip {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--n-50);
}
.report-kpi-cell {
  flex: 1;
  padding: 14px 16px;
  border-right: 1px solid var(--n-50);
  text-align: center;
}
.report-kpi-cell:last-child { border-right: none; }
.report-kpi-value {
  font: 700 1.35rem/1 system-ui, sans-serif;
  color: var(--n-900);
}
.report-kpi-label {
  font: 500 0.65rem/1.3 system-ui, sans-serif;
  color: var(--n-400);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
}

/* Sections inside preview */
.report-preview-section {
  padding: 18px 28px;
  border-bottom: 1px solid var(--n-25);
}
.report-preview-section:last-child { border-bottom: none; }
.report-preview-section-title {
  font: 700 0.72rem/1 system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--n-400);
  margin-bottom: 12px;
}

/* Brief cards (summary cards) */
.report-brief-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.report-brief-card {
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--n-25);
}
.report-brief-card-title {
  font: 600 0.72rem/1.2 system-ui, sans-serif;
  color: var(--n-800);
  margin-bottom: 4px;
}
.report-brief-card-body {
  font: 400 0.7rem/1.4 system-ui, sans-serif;
  color: var(--n-500);
}

/* Finding cards */
.report-finding-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.report-finding-card {
  border: 1px solid var(--n-200);
  border-left: 2px solid var(--n-200);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--n-0);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.report-finding-card--critical { border-left-color: var(--r-500); }
.report-finding-card--high     { border-left-color: var(--a-500); }
.report-finding-card--medium   { border-left-color: var(--a-500); }
.report-finding-card--low      { border-left-color: var(--g-500); }
.report-finding-card--info     { border-left-color: var(--b-600); }
.report-finding-card-title {
  font: 600 0.76rem/1.25 system-ui, sans-serif;
  color: var(--n-900);
}
.report-finding-card-meta {
  font: 400 0.67rem/1.3 system-ui, sans-serif;
  color: var(--n-400);
  margin-top: 2px;
}

/* Detail table inside preview */
.report-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}
.report-preview-table th {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 2px solid var(--n-200);
  font: 600 0.68rem/1 system-ui, sans-serif;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.report-preview-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--n-50);
  color: var(--n-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-preview-table tr:last-child td { border-bottom: none; }
.report-preview-table tbody tr:nth-child(even) td { background: var(--n-25); }

/* Empty state */
.report-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
  text-align: center;
  color: var(--n-400);
  gap: 10px;
}
.report-preview-empty-icon { font-size: 1.8rem; }
.report-preview-empty-text {
  font: 500 0.8rem/1.4 system-ui, sans-serif;
  color: var(--n-500);
}

/* ============================================================
   Bastion — Flow topology watermark / welcome diagram
   ============================================================ */

.bastion-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 40px 28px;
  text-align: center;
}

.bastion-flow-diagram {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 14px;
  width: min(900px, 100%);
  margin-bottom: 14px;
}

.bastion-flow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .07);
  text-align: left;
}

.bastion-flow-card--sentinel { border-top: 2px solid var(--b-500); }
.bastion-flow-card--agent { border-top: 2px solid var(--g-500); }
.bastion-flow-card--multisite {
  grid-column: 1 / -1;
  border-top: 2px solid var(--b-500);
}

.bastion-flow-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.bastion-flow-card-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--n-500);
  font: 700 0.62rem/1.1 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bastion-flow-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--n-900);
  font: 700 0.98rem/1.15 system-ui, sans-serif;
  letter-spacing: 0;
}

.bastion-flow-card p {
  margin: 0;
  color: var(--n-800);
  font: 500 0.75rem/1.45 system-ui, sans-serif;
}

.bastion-mini-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--n-25);
  border: 1px solid var(--n-200);
}

.bastion-mini-chain span {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--n-0);
  border: 1px solid var(--n-200);
  color: var(--n-800);
  font: 700 0.66rem/1 system-ui, sans-serif;
}

.bastion-mini-chain i {
  color: var(--n-400);
  font-style: normal;
  font-weight: 700;
}

.bastion-pivot-badge {
  align-self: flex-start;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--b-50);
  border: 1px solid var(--b-500);
  color: var(--b-700);
  font: 700 0.64rem/1 system-ui, sans-serif;
}

.bastion-star-map {
  position: relative;
  height: 250px;
  margin-top: 2px;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, .13), transparent 34%),
    linear-gradient(180deg, var(--n-25), var(--n-0));
  border: 1px solid var(--n-200);
  overflow: hidden;
}

.bastion-star-center,
.bastion-star-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--n-200);
  background: var(--n-0);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
  color: var(--n-900);
  font: 800 0.72rem/1.1 system-ui, sans-serif;
  z-index: 2;
}

.bastion-star-center {
  left: 50%;
  top: 50%;
  width: 136px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-color: var(--b-200);
  background: var(--b-50);
}

.bastion-star-center small,
.bastion-star-node small {
  margin-top: 4px;
  color: var(--n-500);
  font: 600 0.58rem/1.1 system-ui, sans-serif;
}

.bastion-star-node {
  width: 126px;
  min-height: 54px;
  padding: 8px;
}

.bastion-star-node--top {
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
}
.bastion-star-node--right {
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
}
.bastion-star-node--bottom {
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
}
.bastion-star-node--left {
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
}

.bastion-star-link {
  position: absolute;
  display: block;
  background: var(--n-300);
  z-index: 1;
}

.bastion-star-link--top,
.bastion-star-link--bottom {
  left: 50%;
  width: 2px;
  height: 62px;
  transform: translateX(-50%);
}
.bastion-star-link--top { top: 74px; }
.bastion-star-link--bottom { bottom: 74px; }
.bastion-star-link--left,
.bastion-star-link--right {
  top: 50%;
  width: calc(50% - 150px);
  height: 2px;
  transform: translateY(-50%);
}
.bastion-star-link--left { left: 152px; }
.bastion-star-link--right { right: 152px; }

.bastion-flow-legend {
  display: grid;
  grid-template-columns: repeat(7, minmax(86px, 1fr));
  gap: 8px;
  width: min(900px, 100%);
  margin: 0;
  padding: 10px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  text-align: left;
}

.bastion-flow-legend div {
  min-width: 0;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--n-0);
  border: 1px solid var(--n-50);
}

.bastion-flow-legend dt {
  margin-bottom: 4px;
  color: var(--n-900);
  font: 800 0.64rem/1 system-ui, sans-serif;
}

.bastion-flow-legend dd {
  margin: 0;
  color: var(--n-500);
  font: 500 0.6rem/1.3 system-ui, sans-serif;
}

@media (max-width: 1000px) {
  .bastion-flow-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .bastion-flow-diagram {
    grid-template-columns: 1fr;
  }

  .bastion-star-map {
    height: 360px;
  }

  .bastion-star-node--top,
  .bastion-star-node--right,
  .bastion-star-node--bottom,
  .bastion-star-node--left {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .bastion-star-node--top { top: 14px; }
  .bastion-star-node--right { top: 96px; }
  .bastion-star-node--bottom { bottom: 14px; }
  .bastion-star-node--left { top: auto; bottom: 96px; }

  .bastion-star-link {
    left: 50%;
    width: 2px;
    height: 32px;
    transform: translateX(-50%);
  }
  .bastion-star-link--top { top: 70px; }
  .bastion-star-link--right { top: 150px; right: auto; }
  .bastion-star-link--bottom { bottom: 70px; }
  .bastion-star-link--left { top: auto; bottom: 150px; }
}

/* ============================================================
   Bastion — Workspace card improvements
   ============================================================ */

.bastion-workspace-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
}
.bastion-workspace-card-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bastion-workspace-card-main strong {
  font: 600 0.76rem/1.2 system-ui, sans-serif;
  color: var(--n-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bastion-workspace-card-main small {
  font: 400 0.67rem/1.3 system-ui, sans-serif;
  color: var(--n-500);
}
.bastion-workspace-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.bastion-workspace-card-meta em {
  font: 500 0.65rem/1 system-ui, sans-serif;
  color: var(--n-400);
  font-style: normal;
}

/* Status pills */
.bastion-workspace-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font: 600 0.62rem/1.4 system-ui, sans-serif;
  white-space: nowrap;
}
.bastion-workspace-status-pill--ok      { background: var(--g-100); color: var(--g-500); }
.bastion-workspace-status-pill--pending { background: var(--a-100); color: var(--a-500); }
.bastion-workspace-status-pill--stale   { background: var(--r-100); color: var(--r-600); }
.bastion-workspace-status-pill--neutral { background: var(--n-50); color: var(--n-800); }

/* Countdown */
.bastion-workspace-countdown {
  font: 500 0.63rem/1 system-ui, sans-serif;
  color: var(--n-500);
  margin-top: 1px;
}
.bastion-workspace-countdown--warn {
  color: var(--r-500);
  font-weight: 700;
}

/* ============================================================
   Bastion — Parser warning in report record
   ============================================================ */

.bastion-parse-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--a-100);
  border: 1px solid var(--a-200);
  color: var(--a-500);
  font: 500 0.76rem/1.4 system-ui, sans-serif;
  margin-bottom: 16px;
}

/* ============================================================
   Agent improvements — heartbeat tiers, version distance,
   stale/IP badges, masked token, destructive confirm modal
   ============================================================ */

/* Stale heartbeat row highlight */
[data-agent-tier="stale"] td { background: var(--a-50) !important; }

.agent-stale-note {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  font: 600 0.65rem/1 system-ui, sans-serif;
  color: var(--a-500);
}

.agent-ip-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--a-100);
  border: 1px solid var(--a-200);
  font: 600 0.62rem/1.5 system-ui, sans-serif;
  color: var(--a-500);
}

/* Version distance urgency levels */
.agent-update-status--outdated-major {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--r-100);
  color: var(--r-600);
  font: 700 0.7rem/1.4 system-ui, sans-serif;
}
.agent-update-status--outdated-minor {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--a-100);
  color: var(--a-500);
  font: 600 0.7rem/1.4 system-ui, sans-serif;
}

/* Masked token reveal row */
.enroll-token-reveal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.enroll-token-value--masked {
  letter-spacing: .12em;
  color: var(--n-400);
  user-select: none;
  font-size: 0.84rem;
}
.enroll-token-reveal-btn {
  flex-shrink: 0;
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
}

/* Destructive confirm modal */
.destructive-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.destructive-modal {
  background: var(--n-0);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
  padding: 28px 28px 24px;
  max-width: 440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.destructive-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.destructive-modal-icon {
  font-size: 1.45rem;
  color: var(--r-500);
}
.destructive-modal-head h3 {
  font: 700 1rem/1.2 system-ui, sans-serif;
  color: var(--n-900);
  margin: 0;
}
.destructive-modal-desc {
  font: 400 0.8rem/1.5 system-ui, sans-serif;
  color: var(--n-800);
  margin: 0;
}
.destructive-modal-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 500 0.76rem/1.3 system-ui, sans-serif;
  color: var(--n-800);
}
.destructive-modal-label strong { color: var(--n-900); }
.destructive-modal-input {
  padding: 8px 12px;
  border: 1.5px solid var(--n-200);
  border-radius: var(--radius-sm);
  font: 400 0.82rem/1 ui-monospace, monospace;
  color: var(--n-900);
  outline: none;
  transition: border-color .15s;
}
.destructive-modal-input:focus { border-color: var(--r-500); }
.destructive-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.action-button--danger {
  background: var(--r-500);
  color: var(--n-0);
  border-color: var(--r-500);
}
.action-button--danger:not(:disabled):hover {
  background: var(--r-600);
  border-color: var(--r-600);
}
.action-button--danger:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ============================================================
   Noise reduction — Quiet-Mode banner, calm states, ack flags
   ============================================================ */

.quiet-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--g-50) 0%, var(--g-50) 100%);
  border: 1px solid var(--g-200);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.quiet-banner-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--g-100);
  border-radius: 50%;
}
.quiet-banner-icon::after {
  content: "";
  display: block;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--g-500);
  border-bottom: 2.5px solid var(--g-500);
  transform: rotate(-45deg) translate(1px, -2px);
}
.quiet-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.quiet-banner-text strong {
  font: 600 0.92rem/1.2 system-ui, sans-serif;
  color: var(--g-600);
}
.quiet-banner-text small {
  font: 400 0.74rem/1.3 system-ui, sans-serif;
  color: var(--g-600);
}
.quiet-banner-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-500);
  margin-left: auto;
}

/* ============================================================
   Radar — healthy customer collapsed row
   ============================================================ */

.radar-healthy-row td.radar-healthy-cell {
  background: var(--n-25);
  font: 500 0.78rem/1.4 system-ui, sans-serif;
  color: var(--n-500);
  text-align: center;
  padding: 11px 14px;
  border-top: 1px dashed var(--n-200);
}
.radar-healthy-icon {
  color: var(--g-500);
  font-weight: 700;
  margin-right: 6px;
}
.radar-healthy-toggle {
  margin-left: 8px;
  background: transparent;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  font: 500 0.7rem/1 system-ui, sans-serif;
  color: var(--n-800);
  cursor: pointer;
}
.radar-healthy-toggle:hover {
  background: var(--n-0);
  border-color: var(--n-400);
}

/* ============================================================
   Hunt — confidence cutoff toolbar, ack state
   ============================================================ */

.hunt-noise-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 14px;
  background: var(--n-25);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  margin: 10px 0 14px;
}
.hunt-noise-cutoff {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 0.74rem/1 system-ui, sans-serif;
  color: var(--n-800);
}
.hunt-noise-cutoff strong {
  color: var(--b-500);
  font-weight: 700;
  min-width: 36px;
}
.hunt-noise-cutoff input[type="range"] {
  width: 140px;
  accent-color: var(--b-500);
}
.hunt-noise-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 0.74rem/1 system-ui, sans-serif;
  color: var(--n-800);
  cursor: pointer;
}
.hunt-noise-toggle input { accent-color: var(--b-500); }

.hunt-row--acked { opacity: .55; }
.hunt-row--acked:hover { opacity: 1; }
.hunt-acked-chip {
  background: var(--g-50) !important;
  border: 1px solid var(--g-200) !important;
  color: var(--g-500) !important;
}
.hunt-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.hunt-ack-btn {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--g-200);
  background: var(--g-50);
  color: var(--g-500);
  font: 600 0.72rem/1.2 system-ui, sans-serif;
  cursor: pointer;
}
.hunt-ack-btn:hover {
  background: var(--g-100);
  border-color: var(--g-500);
}

/* ============================================================
   Vulnerabilities — actionable filter, aging, ack state
   ============================================================ */

.vuln-noise-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--n-25);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  gap: 14px;
}
.vuln-noise-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 0.76rem/1 system-ui, sans-serif;
  color: var(--n-800);
  cursor: pointer;
}
.vuln-noise-toggle input { accent-color: var(--r-500); }
.vuln-noise-hint {
  font: 400 0.68rem/1 system-ui, sans-serif;
  color: var(--n-400);
}

.vuln-row--acked { opacity: .55; }
.vuln-acked-flag {
  color: var(--g-500);
  font-weight: 600;
}

.vuln-aging-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font: 600 0.6rem/1.5 system-ui, sans-serif;
  margin-left: 6px;
  vertical-align: middle;
}
.vuln-aging-badge--mid {
  background: var(--a-100);
  border: 1px solid var(--a-200);
  color: var(--a-500);
}
.vuln-aging-badge--old {
  background: var(--r-100);
  border: 1px solid var(--r-500);
  color: var(--r-600);
}

/* ============================================================
   Hardening — drift indicator
   ============================================================ */

.hardening-drift {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font: 700 0.62rem/1.4 system-ui, sans-serif;
  margin-left: 6px;
}
.hardening-drift--up {
  background: var(--g-100);
  color: var(--g-500);
}
.hardening-drift--down {
  background: var(--r-100);
  color: var(--r-600);
}
.hardening-drift--stable {
  background: var(--n-50);
  color: var(--n-500);
}

/* ============================================================
   Device tabs density pass — logs, vulnerabilities, hunting
   ============================================================ */

.content--device .subcontent {
  padding: 8px;
}

.content--device .filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 6px;
  padding: 5px 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.content--device .filter-row > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.content--device .filter-control {
  flex: 0 0 auto;
  min-width: max-content;
}

.content--device .filter-control select,
.content--device .filter-row > select {
  flex: 0 0 auto;
  min-height: 26px;
  max-width: 190px;
  padding: 2px 8px;
}

.content--device .compact-toolbar-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 6px;
  padding: 6px 12px;
}

.content--device .detail-panel--compact .eyebrow {
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
  white-space: nowrap;
}

.content--device .compact-stat-line {
  flex-wrap: nowrap;
  gap: 8px;
}

.content--device .compact-toolbar-row {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  border-top: 0;
  white-space: nowrap;
}

.content--device .compact-toolbar-row label,
.content--device .vuln-noise-toggle,
.content--device .hunt-noise-toggle,
.content--device .hunt-noise-cutoff {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

.content--device .compact-toolbar-row .action-button {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 0 10px;
}

.content--device .hunt-noise-cutoff input[type="range"] {
  width: 150px;
}

.content--device .threat-assessment-panel,
.content--device .vulnerability-assessment-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.content--device .security-table-scroll {
  max-height: calc(100vh - 214px);
  overflow: auto;
}

.content--device .vuln-table--single,
.content--device .hunt-table--single {
  width: 100%;
  min-width: 1080px;
  border: 0;
  border-radius: 0;
  table-layout: fixed;
}

.content--device .vuln-table--single {
  min-width: 880px;
}

.content--device .vuln-table--single thead th,
.content--device .hunt-table--single thead th {
  padding: 7px 9px;
}

.content--device .vuln-table--single tbody tr.vuln-row--single,
.content--device .hunt-table--single tbody tr.hunt-row--single {
  height: 36px;
}

.content--device .vuln-table--single tbody td,
.content--device .hunt-table--single tbody td {
  padding: 5px 9px;
  line-height: 1.28;
}

.content--device .vuln-table--single th.vuln-cell-expand,
.content--device .vuln-table--single td.vuln-cell-expand,
.content--device .hunt-table--single th.hunt-cell-expand,
.content--device .hunt-table--single td.hunt-cell-expand {
  width: 30px;
}

.content--device .vuln-table--single th.vuln-cell-rating,
.content--device .vuln-table--single td.vuln-cell-rating {
  width: 104px;
}

.content--device .vuln-table--single th.vuln-cell-product,
.content--device .vuln-table--single td.vuln-cell-product {
  width: 25%;
}

.content--device .vuln-table--single th.vuln-cell-version,
.content--device .vuln-table--single td.vuln-cell-version {
  width: 20%;
}

.content--device .vuln-table--single th.vuln-cell-cve,
.content--device .vuln-table--single td.vuln-cell-cve {
  width: 24%;
}

.content--device .vuln-table--single th.vuln-cell-action,
.content--device .vuln-table--single td.vuln-cell-action {
  width: auto;
}

.content--device .vuln-table--single .vuln-product-stack,
.content--device .vuln-table--single .vuln-cve-stack,
.content--device .hunt-table--single .hunt-signal-stack {
  gap: 6px !important;
}

.content--device .vuln-table--single .vuln-product-name,
.content--device .hunt-table--single .hunt-signal-title {
  max-width: 62%;
}

.content--device .vuln-table--single .vuln-product-meta,
.content--device .vuln-table--single .vuln-meta-chipline,
.content--device .hunt-table--single .hunt-signal-meta-line {
  min-width: 0;
}

.content--device .hunt-workbench--assessment {
  grid-template-columns: minmax(188px, 220px) minmax(0, 1fr);
  gap: 8px;
}

.content--device .hunt-workbench--assessment .hunt-rail {
  top: 6px;
}

.content--device .hunt-rail-item {
  min-height: 42px;
  padding: 7px 10px;
}

.content--device .hunt-table--single th.hunt-cell-rating,
.content--device .hunt-table--single td.hunt-cell-rating {
  width: 82px;
}

.content--device .hunt-table--single col.hunt-col-expand {
  width: 30px;
}

.content--device .hunt-table--single col.hunt-col-rating {
  width: 82px;
}

.content--device .hunt-table--single col.hunt-col-signal {
  width: 380px;
}

.content--device .hunt-table--single col.hunt-col-confidence {
  width: 158px;
}

.content--device .hunt-table--single col.hunt-col-tactic {
  width: 200px;
}

.content--device .hunt-table--single col.hunt-col-action {
  width: auto;
}

.content--device .hunt-table--single th.hunt-cell-signal,
.content--device .hunt-table--single td.hunt-cell-signal {
  width: 340px;
}

.content--device .hunt-table--single th.hunt-cell-confidence,
.content--device .hunt-table--single td.hunt-cell-confidence {
  width: 118px;
}

.content--device .hunt-table--single th.hunt-cell-tactic,
.content--device .hunt-table--single td.hunt-cell-tactic {
  width: 200px;
}

.content--device .hunt-table--single th.hunt-cell-action,
.content--device .hunt-table--single td.hunt-cell-action {
  width: auto;
}

/* Ohne white-space-Regel brach die Empfehlung um und die zweite Zeile wurde
   von der Zeilenhöhe gekappt — sichtbar blieb "CVE-2026-0021 pa". */
.content--device .hunt-table--single .hunt-action-text {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.content--device .hunt-table--single .hunt-score-wrap {
  min-width: 60px;
}

.content--device .hunt-table--single .hunt-signal-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 168px);
  align-items: center;
}

.content--device .hunt-table--single .hunt-signal-title {
  max-width: none;
}

/* flex-end plus overflow:hidden beschnitt die Chips am LINKEN Rand: aus
   "Vulnerabilities" wurde "lnerabilities". Umbrechen statt abschneiden. */
.content--device .hunt-table--single .hunt-signal-meta-line {
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 3px;
  overflow: visible;
}

.content--device .hunt-table--single .hunt-confidence-line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
}

.content--device .hunt-table--single .hunt-tactic-line {
  display: grid;
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
  align-items: center;
}

.content--device .hunt-table--single .hunt-cell-tactic strong {
  max-width: none;
}

.content--device .hunt-table--single .hunt-cell-tactic .hunt-tactic-mitre {
  max-width: none;
}

.content--device .device-log-section {
  height: calc(100vh - 106px);
  min-height: 520px;
}

.content--device .device-log-layout {
  grid-template-columns: minmax(226px, 248px) minmax(0, 1fr);
}

/* Diese kompakte Desktop-Regel steht nach der allgemeinen Collapse-Regel.
   Ohne den erneuten Override landet der Main-Bereich bei ausgeblendeter
   Sidebar im schmalen ersten Grid-Track und der Rest der Asset-Fläche bleibt
   leer. */
.content--device .device-log-layout--sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.content--device .device-log-main {
  gap: 0;
}

.content--device .devlog-header {
  min-height: 42px;
  padding: 6px 10px;
  gap: 8px;
  flex-wrap: nowrap;
}

.content--device .devlog-header-title {
  flex: 1 1 auto;
  min-width: 0;
}

.content--device .devlog-header-title .eyebrow {
  font-size: 0.6rem;
}

.content--device .devlog-header-title h2 {
  font-size: 0.9rem;
}

.content--device .devlog-sev-filter {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  max-width: 48%;
  overflow-x: auto;
}

.content--device .devlog-sev-pill {
  min-height: 25px;
  padding: 2px 8px;
  font-size: 0.72rem;
}

.content--device .devlog-main-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  padding: 6px 10px;
  gap: 8px;
}

.content--device .devlog-search-wrap {
  min-width: 0;
}

.content--device .devlog-search-wrap input {
  min-height: 28px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.content--device .devlog-meta {
  flex-wrap: nowrap;
  gap: 6px;
}

.content--device .devlog-meta .filter-select {
  min-height: 28px;
  max-width: 108px;
}

.content--device .devlog-source-btn,
.content--device .devlog-stream-btn {
  min-height: 34px;
  padding: 6px 10px;
  gap: 8px;
}

.content--device .devlog-sidebar-label {
  padding: 8px 12px 4px;
  font-size: 0.66rem;
}

.content--device .devlog-stream-group-label {
  margin: 8px 8px 3px;
  padding: 5px 7px;
}

.content--device .devlog-source-info strong,
.content--device .devlog-stream-info strong {
  font-size: 0.78rem;
}

.content--device .devlog-source-info small,
.content--device .devlog-stream-info small {
  font-size: 0.66rem;
}

.content--device .devlog-table th {
  padding: 6px 8px;
}

.content--device .devlog-table td {
  padding: 5px 8px;
  font-size: 0.78rem;
}

.content--device .devlog-time {
  width: 72px;
  min-width: 72px;
}

.content--device .devlog-table th:nth-child(2),
.content--device .devlog-table td:nth-child(2) {
  width: 94px;
}

.content--device .devlog-msg {
  min-width: 0;
  white-space: nowrap;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content--device .devlog-msg--long {
  display: table-cell;
  max-height: none;
  -webkit-line-clamp: unset;
}

.content--device .devlog-msg--long::after {
  content: "";
}

.content--device .devlog-pager {
  min-height: 36px;
  padding: 5px 10px;
}

@media (max-width: 900px) {
  .content--device .device-log-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  .content--device .compact-toolbar-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .content--device .compact-toolbar-row {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .content--device .hunt-workbench--assessment {
    grid-template-columns: 1fr;
  }

  .content--device .hunt-workbench--assessment .hunt-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

/* External Scan calm compact layout */
.external-scan-page,
.external-scan-page--customer,
.qc-page {
  gap: 8px;
}

.scan-status-band--quiet {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, auto) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 7px 10px;
  border-left-width: 2px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.scan-status-band-target {
  max-width: none;
  font-size: 0.9rem;
  font-weight: 700;
}

.scan-status-band-pills {
  gap: 6px;
}

.external-scan-status {
  min-height: 20px;
  padding: 0 7px;
  font-size: 0.6rem;
  letter-spacing: 0;
}

.scan-status-summary-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, auto));
  gap: 4px 12px;
  align-items: center;
  margin: 0;
}

.scan-status-summary-list div {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px;
  align-items: baseline;
  min-width: 0;
}

.scan-status-summary-list dt {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.scan-status-summary-list dd {
  min-width: 0;
  max-width: 220px;
  margin: 0;
  overflow: hidden;
  color: var(--clr-text);
  font-size: 0.78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-status-band-actions {
  justify-content: flex-end;
}

.scan-detail-block {
  margin-top: 8px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.scan-detail-head--compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--clr-border);
}

.scan-detail-title-row {
  gap: 7px;
}

.scan-detail-title-row h3 {
  min-width: 0;
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scan-detail-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin: 4px 0 0;
}

.scan-detail-meta-list div {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 4px;
  align-items: baseline;
}

.scan-detail-meta-list dt {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.scan-detail-meta-list dd {
  margin: 0;
  color: var(--clr-text);
  font-size: 0.72rem;
  font-weight: 600;
}

.scan-sev-stack {
  display: none;
}

.scan-sev-pills {
  gap: 4px;
}

.scan-spill {
  min-height: 19px;
  padding: 0 6px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.66rem;
  font-weight: 700;
}

.scan-spill--crit,
.scan-spill--high,
.scan-spill--med,
.scan-spill--low,
.scan-spill--none {
  background: transparent;
}

.scan-diff {
  gap: 4px;
  margin: 0;
  padding: 0;
  background: transparent;
}

.scan-diff-seg {
  padding: 1px 5px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  letter-spacing: 0;
}

.scan-tools-block,
.scan-detail-summary {
  margin: 8px 10px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
}

.scan-detail-summary {
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}

.scan-detail-watch {
  margin: 8px 10px;
  border-radius: var(--radius-sm);
}

.scan-detail-watch-head {
  min-height: 30px;
  padding: 6px 9px;
}

.scan-watch-label {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-info);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.scan-watch-output {
  max-height: 180px;
  padding: 8px 10px;
  font-size: 0.72rem;
}

.scan-detail-block > .cust-section {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

.scan-detail-block > .cust-section > summary {
  min-height: 32px;
  padding: 6px 10px;
}

.scan-detail-block > .cust-section .cust-section-body {
  padding: 8px 10px 10px;
}

.scan-finding-toolbar {
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

.scan-filter-pills {
  gap: 4px;
}

.scan-filter-pill {
  min-height: 24px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  letter-spacing: 0;
  transition: none;
}

.scan-filter-count {
  min-width: 16px;
  height: 15px;
  font-size: 0.6rem;
}

.scan-finding-search {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.72rem;
}

.scan-delta-card {
  gap: 6px;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.scan-delta-head {
  align-items: center;
  gap: 8px;
}

.scan-delta-peer-select {
  gap: 5px;
  font-size: 0.72rem;
}

.scan-delta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.scan-delta-item {
  display: inline-flex;
  align-items: baseline;
  min-height: 24px;
  gap: 5px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
}

.scan-delta-item dt {
  font-size: 0.66rem;
  letter-spacing: 0;
  text-transform: none;
}

.scan-delta-item dd {
  margin: 0;
  font-size: 0.78rem;
}

.scan-diff-lists {
  gap: 6px;
  margin-top: 6px;
}

.scan-diff-list {
  padding: 7px 8px;
  border-radius: var(--radius-sm);
}

.scan-hero-ai {
  margin-top: 0;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
}

.external-scan-risk-panel {
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
  gap: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.external-scan-risk-panel--critical { border-left-color: var(--r-600); }
.external-scan-risk-panel--high     { border-left-color: var(--r-500); }
.external-scan-risk-panel--medium   { border-left-color: var(--a-500); }
.external-scan-risk-panel--low      { border-left-color: var(--b-500); }
.external-scan-risk-panel--info     { border-left-color: var(--n-500); }
.external-scan-risk-panel--none     { border-left-color: var(--g-500); }

.external-scan-risk-copy {
  gap: 1px;
}

.external-scan-risk-copy span,
.external-scan-severity-tile span {
  font-size: 0.6rem;
  letter-spacing: 0;
}

.external-scan-risk-copy strong {
  font-size: 0.9rem;
}

.external-scan-risk-copy small {
  font-size: 0.66rem;
}

.external-scan-severity-tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.external-scan-severity-tile {
  display: inline-flex;
  align-items: baseline;
  min-height: 24px;
  gap: 5px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: transparent;
}

.external-scan-severity-tile strong {
  font-size: 0.84rem;
}

.external-scan-active-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.external-scan-active-card {
  min-height: 30px;
  padding: 5px 7px;
  border-color: var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.scan-live-dot {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

.scan-history-block {
  border-radius: var(--radius-sm);
}

.scan-history-head,
.external-scan-page .compact-toolbar-row {
  min-height: 34px;
  padding: 6px 8px;
}

.scan-history-tools {
  gap: 6px;
}

.scan-history-filter-pills {
  gap: 4px;
}

.scan-history-filter-pill {
  min-height: 24px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
}

.scan-history-filter-pill span {
  min-width: 16px;
  padding: 1px 4px;
  font-size: 0.6rem;
}

.scan-history-search {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.72rem;
}

.qc-live-indicator,
.scan-watch-dot,
.scan-row--live {
  animation: none;
}

.scan-row--live td:first-child::before,
.scan-row--failed td:first-child::before {
  content: "";
  margin-right: 0;
}

.compact-stat-pill--muted {
  color: var(--clr-muted);
}

@media (max-width: 980px) {
  .scan-status-band--quiet {
    grid-template-columns: 1fr;
  }

  .scan-status-summary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scan-status-band-actions {
    justify-content: flex-start;
  }

  .external-scan-risk-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .scan-detail-head--compact {
    grid-template-columns: 1fr;
  }

  .scan-detail-actions {
    margin-left: 0;
  }

  .scan-delta-head {
    align-items: flex-start;
    flex-direction: column !important;
  }

  .scan-status-summary-list {
    grid-template-columns: 1fr;
  }
}

/* External Scan dense layout pass */
.external-scan-page,
.external-scan-page.qc-page {
  gap: 8px !important;
}

.external-scan-terminal-card,
.external-scan-ai-card {
  margin-bottom: 8px;
  padding: 9px;
  border-radius: var(--radius-sm);
}

.external-scan-terminal-head {
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-bottom: 6px;
}

.external-scan-terminal-head .eyebrow {
  display: none;
}

.external-scan-terminal-head h3 {
  font-size: 0.9rem;
  line-height: 1.15;
}

.external-scan-terminal-actions {
  gap: 4px;
}

.external-scan-terminal-actions .action-button {
  min-height: 26px;
  padding: 3px 8px;
  font-size: 0.72rem;
}

.external-scan-terminal-status {
  min-width: 64px;
  padding: 2px 7px;
  font-size: 0.66rem;
}

.external-scan-terminal-toolbar {
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 6px;
  overflow: hidden;
  font-size: 0.66rem;
  line-height: 1.2;
}

.external-scan-terminal-toolbar > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-scan-terminal-size {
  flex: 0 0 auto;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.external-scan-terminal-container {
  height: clamp(220px, 30vh, 380px);
  min-height: 210px;
  border-radius: var(--radius-sm);
}

.external-scan-ai-terminal-container {
  height: clamp(220px, 31vh, 390px);
  min-height: 210px;
}

.external-scan-ai-form {
  grid-template-columns: minmax(160px, 0.65fr) minmax(150px, 0.48fr) minmax(240px, 1.15fr) auto;
  gap: 6px;
  margin: 6px 0 7px;
}

.external-scan-ai-form input,
.external-scan-ai-form select,
.external-scan-ai-form textarea {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.78rem;
}

.external-scan-ai-mode-field > span {
  margin-bottom: 3px;
  font-size: 0.66rem;
}

.external-scan-ai-mode-toggle {
  min-height: 30px;
  border-radius: var(--radius-sm);
}

.external-scan-ai-mode-toggle span {
  min-height: 24px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
}

.external-scan-ai-focus textarea {
  min-height: 32px;
  max-height: 78px;
}

.external-scan-ai-live-progress--bar {
  margin-bottom: 6px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
}

.external-scan-ai-live-progress--bar .external-scan-ai-live-progress-head {
  gap: 8px;
  margin-bottom: 5px;
}

.external-scan-ai-live-progress-head > span,
.external-scan-ai-live-progress-meta,
.external-scan-ai-live-progress--bar small {
  font-size: 0.66rem;
}

.external-scan-ai-live-progress-head strong {
  font-size: 0.78rem;
}

.external-scan-ai-live-progress--bar .external-scan-ai-live-progress-step {
  flex-basis: 220px;
  font-size: 0.72rem;
}

.external-scan-ai-live-progress--bar .external-scan-ai-progress-track {
  height: 6px;
  margin-bottom: 5px;
}

.external-scan-ai-live-progress--bar .external-scan-ai-phasebar {
  height: 16px;
  border-radius: var(--radius-sm);
}

.external-scan-ai-phasebar-segment {
  min-width: 12px;
  padding: 0 2px;
  font-size: 0.6rem;
}

.external-scan-ai-workspace {
  grid-template-columns: minmax(360px, min(720px, 58vw)) minmax(300px, 1fr);
  align-items: start;
  gap: 10px;
}

.external-scan-ai-main {
  min-width: 0;
  max-width: 760px;
}

.external-scan-ai-status-pane {
  gap: 6px;
  max-height: clamp(360px, 46vh, 620px);
  overflow: auto;
}

.external-scan-ai-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.external-scan-ai-status-head span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.external-scan-ai-status-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
}

.external-scan-ai-progress {
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.external-scan-ai-progress > div {
  min-height: 42px;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
}

.external-scan-ai-progress span {
  font-size: 0.6rem;
}

.external-scan-ai-progress strong {
  font-size: 0.72rem;
}

.external-scan-ai-process-fold {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.external-scan-ai-live-findings {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.external-scan-ai-live-findings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.external-scan-ai-live-findings-head span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.external-scan-ai-live-findings-head strong {
  color: var(--clr-text);
  font-size: 0.72rem;
}

.external-scan-ai-live-findings > p {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.external-scan-ai-live-finding-list {
  display: grid;
  gap: 5px;
}

.external-scan-ai-live-finding {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.external-scan-ai-live-finding--critical,
.external-scan-ai-live-finding--high {
  border-left-color: var(--clr-risk);
}

.external-scan-ai-live-finding--medium {
  border-left-color: var(--clr-warn);
}

.external-scan-ai-live-finding--low {
  border-left-color: var(--b-500);
}

.external-scan-ai-live-finding span {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.external-scan-ai-live-finding strong {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-text);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-scan-ai-live-finding p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 0.66rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.external-scan-ai-process-fold > summary {
  min-height: 28px;
  padding: 5px 8px;
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 700;
  list-style: none;
  text-transform: uppercase;
}

.external-scan-ai-process-fold > summary::-webkit-details-marker {
  display: none;
}

.external-scan-ai-processes {
  padding: 6px 8px;
  border: 0;
  border-top: 1px solid var(--clr-border);
  border-radius: 0;
  background: transparent;
}

.external-scan-ai-processes strong {
  display: none;
}

.external-scan-ai-processes pre {
  max-height: 110px;
  font-size: 0.66rem;
  line-height: 1.35;
}

.scan-detail-block {
  margin-top: 8px;
  padding-top: 0;
}

.external-scan-page > .scan-detail-block {
  padding: 0;
  overflow: hidden;
}

.scan-detail-summary {
  margin: 6px 8px;
  padding: 6px 8px;
}

.scan-summary-body {
  gap: 5px;
  font-size: 0.78rem;
}

.scan-summary-body p {
  margin-bottom: 5px;
  line-height: 1.4;
}

.scan-summary-body ul {
  gap: 3px;
}

.scan-watch-output {
  max-height: 128px;
  font-size: 0.66rem;
  line-height: 1.35;
}

.scan-report-frame {
  min-height: 360px;
  height: min(48vh, 520px);
}

.scan-report-preview-shell {
  max-height: 52vh;
}

.scan-detail-block .raw-report {
  max-height: 260px;
  overflow: auto;
  font-size: 0.66rem;
  line-height: 1.35;
}

.finding-list-item > summary {
  min-height: 34px;
  padding: 6px 8px;
}

.finding-reco-inline {
  font-size: 0.66rem;
}

@media (max-width: 980px) {
  .external-scan-ai-workspace {
    grid-template-columns: 1fr;
  }

  .external-scan-ai-status-pane {
    max-height: none;
    overflow: visible;
  }
}

/* Calm UI pass: global density, list-first overviews, clearer findings. */
.detail-panel,
.agent-section,
.agent-overview-panel,
.m365-list-block,
.scan-history-block,
.scan-detail-block,
.customer-overview-work,
.customer-overview-inventory {
  box-shadow: none;
}

.detail-panel,
.agent-section,
.m365-list-block,
.scan-history-block {
  border-radius: var(--radius-sm);
}

.detail-panel {
  padding: 12px;
}

.agent-section {
  margin-top: 8px;
}

.agent-section-head,
.inventory-toolbar,
.compact-toolbar-row,
.m365-security-bar,
.m365-list-block-head {
  min-height: 32px;
}

.agent-overview-grid,
.customer-overview-layout,
.m365-list-grid,
.m365-overview-stack {
  gap: 8px;
}

.agent-overview-panel {
  min-height: 0;
  padding: 10px;
  border-color: var(--clr-border);
}

.agent-detail-list {
  gap: 5px;
}

.agent-detail-list div,
.fw-health-cell,
.m365-headline-tile,
.m365-license-kpi,
.customer-summary-fact {
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.data-table {
  font-size: 0.78rem;
}

.data-table tbody td {
  border-bottom-color: color-mix(in srgb, var(--clr-border) 76%, transparent);
  line-height: 1.35;
}

.compact-table th,
.compact-table td {
  padding: 5px 8px;
}

.status-badge,
.agent-status-badge,
.ai-sev-pill,
.analysis-cat-chip,
.fw-sev-pill,
.scan-filter-pill,
.scan-history-filter-pill {
  border-radius: var(--radius-sm);
  box-shadow: none;
  letter-spacing: 0;
}

.status-badge {
  min-height: 20px;
  padding: 1px 7px;
  font-size: 0.66rem;
}

.m365-headline-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.m365-headline-tile {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 0;
  padding: 5px 8px;
  border-left-width: 3px;
}

.m365-headline-tile-label {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

.m365-headline-tile-value {
  font-size: 0.96rem;
}

.findings-table.findings-table--compact {
  min-width: 1080px;
  table-layout: fixed;
}

.findings-table.findings-table--compact th:nth-child(1),
.findings-table.findings-table--compact td:nth-child(1) {
  width: 58px;
}

.findings-table.findings-table--compact th:nth-child(2),
.findings-table.findings-table--compact td:nth-child(2) {
  width: auto;
}

.findings-table.findings-table--compact th:nth-child(3),
.findings-table.findings-table--compact td:nth-child(3) {
  width: 220px;
}

.findings-table.findings-table--compact th:nth-child(4),
.findings-table.findings-table--compact td:nth-child(4) {
  width: 160px;
}

.findings-table.findings-table--compact th:nth-child(5),
.findings-table.findings-table--compact td:nth-child(5) {
  width: 240px;
}

/* Responsive: auf schmaleren Schirmen die nachrangigen Spalten ausblenden,
   damit Befund + nächste Aktion (inkl. QTC-Button) ohne Querscrollen lesbar
   bleiben. Reihenfolge des Wegfalls: Betroffen → Einordnung. */
@media (max-width: 1080px) {
  .findings-table.findings-table--compact { min-width: 720px; }
  .findings-table.findings-table--compact th:nth-child(4),
  .findings-table.findings-table--compact td:nth-child(4) { display: none; } /* Betroffen */
}
@media (max-width: 760px) {
  .findings-table.findings-table--compact { min-width: 0; }
  .findings-table.findings-table--compact th:nth-child(3),
  .findings-table.findings-table--compact td:nth-child(3) { display: none; } /* Einordnung */
.findings-table.findings-table--compact th:nth-child(5),
.findings-table.findings-table--compact td:nth-child(5) { width: 38%; }
}

/* === Customer report tab === */
.customer-report-tab {
  padding: 0;
  background: var(--clr-surface-alt);
}

.customer-report-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
}

.customer-report-controls {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 10px;
}

.customer-report-control-block {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}

.customer-report-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.customer-report-control-head > span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.customer-report-control-title {
  margin: 0;
  color: var(--clr-text);
  font-size: 0.78rem;
  font-weight: 700;
}

.customer-report-field {
  display: grid;
  gap: 5px;
}

.customer-report-field > span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.customer-report-field select,
.customer-report-field input {
  min-height: 34px;
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: 0.78rem;
}

.customer-report-period {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-report-checkbox-list,
.customer-report-device-list {
  display: grid;
  gap: 6px;
}

.customer-report-check,
.customer-report-device-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font-size: 0.78rem;
  font-weight: 700;
}

.customer-report-check input,
.customer-report-device-choice input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--clr-primary);
}

.customer-report-device-choice {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
}

.customer-report-device-choice.is-selected {
  border-color: rgba(26,107,138,0.45);
  background: var(--b-50);
}

.customer-report-device-choice strong,
.customer-report-device-choice small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-report-device-choice small {
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.customer-report-device-actions,
.customer-report-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.customer-report-actions {
  display: grid;
}

.customer-report-actions .action-button {
  justify-content: center;
}

.customer-report-archive-list {
  display: grid;
  gap: 8px;
}

.customer-report-archive-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.customer-report-archive-item--ok {
  border-left-color: var(--clr-ok);
}

.customer-report-archive-item--warn {
  border-left-color: var(--clr-warn);
}

.customer-report-archive-item header,
.customer-report-archive-item footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.customer-report-archive-item strong,
.customer-report-archive-item small {
  display: block;
  min-width: 0;
}

.customer-report-archive-item strong {
  color: var(--clr-text);
  font-size: 0.84rem;
  line-height: 1.25;
}

.customer-report-archive-item small {
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.customer-report-archive-item dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.customer-report-archive-item dl div {
  padding: 6px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.customer-report-archive-item dt,
.customer-report-archive-item dd {
  margin: 0;
}

.customer-report-archive-item dt {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.customer-report-archive-item dd {
  color: var(--clr-text);
  font-size: 0.84rem;
  font-weight: 700;
}

.customer-report-archive-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-info-bg);
  color: var(--clr-info);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.customer-report-archive-status--ok {
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.customer-report-archive-status--warn {
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.customer-report-preview-wrap {
  min-width: 0;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--n-50);
}

.customer-report-page {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
  padding: 34px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  color: var(--n-900);
  box-shadow: 0 12px 34px rgba(15,33,45,0.13);
}

.customer-report-cover {
  display: grid;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--n-900);
}

.customer-report-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--n-700);
  font-size: 0.78rem;
  font-weight: 700;
}

.customer-report-brand img {
  width: min(270px, 56vw);
  max-width: 100%;
  max-height: 46px;
  object-fit: contain;
}

.customer-report-cover h1 {
  margin: 0;
  color: var(--n-900);
  font-size: 1.8rem;
  line-height: 1.12;
}

.customer-report-cover p {
  margin: 8px 0 0;
  color: var(--n-700);
  font-size: 0.96rem;
}

.customer-report-cover-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.customer-report-cover-meta div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.customer-report-cover-meta dt {
  color: var(--n-600);
  font-size: 0.66rem;
  font-weight: 700;
}

.customer-report-cover-meta dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.customer-report-description {
  max-width: 70ch;
}

.customer-report-sample-note {
  padding: 9px 12px;
  border: 1px solid var(--clr-warn);
  border-radius: var(--radius-sm);
  background: var(--clr-warn-bg);
  color: var(--a-700);
  font-size: 0.78rem;
  font-weight: 700;
}

.customer-report-preview-section {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.customer-report-preview-section h2 {
  margin: 0;
  color: var(--n-900);
  font-size: 1.1rem;
}

.customer-report-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.customer-report-summary-grid article {
  display: grid;
  gap: 4px;
  position: relative;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.customer-report-summary-grid span,
.customer-report-summary-grid small {
  color: var(--n-600);
  font-size: 0.72rem;
  font-weight: 700;
}

.customer-report-summary-grid strong {
  color: var(--n-900);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.customer-report-risk {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.customer-report-risk strong {
  display: block;
  margin-bottom: 4px;
  color: var(--n-900);
  font-size: 1rem;
}

.customer-report-risk p {
  margin: 0;
  color: var(--n-700);
  line-height: 1.5;
}

.customer-report-traffic {
  display: grid;
  gap: 5px;
  justify-items: center;
  width: 42px;
  padding: 7px;
  border-radius: var(--radius-lg);
  background: var(--n-900);
}

.customer-report-traffic span {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  opacity: 0.28;
}

.customer-report-traffic span:nth-child(1) { background: var(--r-600); }
.customer-report-traffic span:nth-child(2) { background: var(--a-500); }
.customer-report-traffic span:nth-child(3) { background: var(--g-500); }
.customer-report-traffic--red span:nth-child(1),
.customer-report-traffic--amber span:nth-child(2),
.customer-report-traffic--green span:nth-child(3) {
  opacity: 1;
}

.customer-report-finding-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-report-finding {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--n-200);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--n-0);
}

.customer-report-finding--risk { border-left-color: var(--clr-risk); }
.customer-report-finding--warn { border-left-color: var(--clr-warn); }
.customer-report-finding--ok { border-left-color: var(--clr-ok); }
.customer-report-finding--info { border-left-color: var(--clr-info); }

.customer-report-finding header {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex-wrap: wrap;
}

.customer-report-finding header strong {
  flex: 1;
  min-width: 150px;
  color: var(--n-900);
  line-height: 1.25;
}

.customer-report-finding-recommendation {
  margin: 0;
  color: var(--n-800);
  font-size: 0.78rem;
  line-height: 1.4;
}

.customer-report-finding-recommendation strong {
  color: var(--n-900);
}

.customer-report-finding footer {
  color: var(--n-600);
  font-size: 0.72rem;
  font-weight: 700;
}

.customer-report-severity,
.customer-report-device-status {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.customer-report-severity--risk,
.customer-report-device-status--risk {
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.customer-report-severity--warn,
.customer-report-device-status--warn {
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.customer-report-severity--ok,
.customer-report-device-status--ok {
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.customer-report-severity--info,
.customer-report-device-status--info {
  background: var(--clr-info-bg);
  color: var(--clr-info);
}

.customer-report-device-table td,
.customer-report-appendix-table td {
  white-space: normal;
}

.customer-report-device-detail {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  background: var(--n-25);
}

.customer-report-device-detail header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.customer-report-device-detail h3 {
  margin: 0;
  color: var(--n-900);
  font-size: 0.96rem;
}

.customer-report-device-detail p {
  margin: 4px 0 0;
  color: var(--n-600);
  font-size: 0.78rem;
}

.customer-report-device-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--n-600);
  font-size: 0.78rem;
  font-weight: 700;
}

.customer-report-recommendations {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 9px;
}

.customer-report-recommendation {
  padding-left: 4px;
}

.customer-report-recommendation strong,
.customer-report-recommendation span,
.customer-report-recommendation small {
  display: block;
}

.customer-report-recommendation strong {
  color: var(--n-900);
}

.customer-report-recommendation span {
  margin-top: 2px;
  color: var(--n-800);
  line-height: 1.45;
}

.customer-report-recommendation small {
  margin-top: 3px;
  color: var(--n-600);
  font-weight: 700;
}

.customer-report-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--n-400);
  border-radius: var(--radius-sm);
  color: var(--n-600);
  background: var(--n-25);
  font-weight: 700;
}

.customer-report-inline-block {
  position: relative;
}

.customer-report-block-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  min-height: 24px;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  background: var(--n-0);
  color: var(--n-800);
  box-shadow: 0 2px 8px rgba(15,33,45,0.12);
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
}

.customer-report-block-toggle:hover {
  border-color: var(--clr-info);
  color: var(--clr-info);
}

.customer-report-page:not(.customer-report-page--export) [data-customer-report-block] {
  padding-top: max(34px, var(--customer-report-block-pad, 0px));
}

.customer-report-page:not(.customer-report-page--export) .customer-report-risk[data-customer-report-block] {
  padding-top: 36px;
}

.customer-report-page:not(.customer-report-page--export) .customer-report-block--disabled {
  opacity: 0.48;
  outline: 2px dashed var(--n-400);
  outline-offset: -4px;
  filter: grayscale(0.25);
}

.customer-report-page:not(.customer-report-page--export) .customer-report-block--disabled .customer-report-block-toggle {
  border-color: var(--clr-warn);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.customer-report-page--export .customer-report-block-toggle {
  display: none;
}

@media (max-width: 1180px) {
  .customer-report-layout {
    grid-template-columns: 1fr;
  }

  .customer-report-controls {
    position: static;
  }
}

@media (max-width: 760px) {
  .customer-report-layout,
  .customer-report-preview-wrap {
    padding: 8px;
  }

  .customer-report-page {
    padding: 18px;
  }

  .customer-report-cover-meta,
  .customer-report-summary-grid,
  .customer-report-finding-list {
    grid-template-columns: 1fr;
  }

  .customer-report-period,
  .customer-report-risk {
    grid-template-columns: 1fr;
  }

  .customer-report-device-choice {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .customer-report-device-choice em {
    grid-column: 2;
  }
}

.finding-main-cell strong,
.finding-main-cell small,
.finding-affected-cell strong,
.finding-affected-cell small,
.finding-cause-line,
.finding-evidence-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finding-main-cell strong {
  font-size: 0.84rem;
}

.finding-cause-line,
.finding-evidence-line {
  margin-top: 2px;
  color: var(--clr-text);
  font-size: 0.72rem;
  line-height: 1.3;
}

.finding-evidence-line {
  color: var(--clr-muted);
}

.finding-cause-line b,
.finding-evidence-line b {
  margin-right: 5px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.finding-status-cell {
  white-space: normal;
}

.finding-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font-size: 0.66rem;
  font-weight: 700;
}

.finding-status-pill--risk {
  border-color: color-mix(in srgb, var(--clr-risk) 42%, var(--clr-border));
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.finding-status-pill--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 42%, var(--clr-border));
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.finding-status-pill--info {
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

.finding-status-cell small,
.finding-action-cell small {
  display: block;
  margin-top: 3px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  line-height: 1.3;
}

.finding-affected-cell strong {
  color: var(--clr-text);
  font-size: 0.78rem;
}

.finding-affected-cell small {
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.finding-action-cell {
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
}

.finding-action-main {
  display: block;
  min-width: 0;
  margin-bottom: 6px;
}

.finding-action-cell strong {
  display: block;
  font-size: 0.78rem;
}

.qtc-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--clr-primary) 38%, var(--clr-border));
  border-radius: var(--radius-sm);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.qtc-action-btn:hover:not(:disabled) {
  border-color: var(--clr-primary);
  background: var(--clr-primary);
  color: var(--n-0);
}

.qtc-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-finding-table {
  min-width: 980px;
}

.ai-finding-table .ai-finding-col-title {
  width: 36%;
}

.ai-finding-table .ai-finding-col-action {
  width: 108px;
}

.ai-finding-action-cell {
  color: var(--clr-text);
  text-align: right;
  white-space: nowrap;
}

.ai-priority-action-cell > span {
  display: block;
  margin-bottom: 5px;
}

.ai-priority-action-cell {
  white-space: normal;
}

.finding-desc-inline {
  display: block;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  color: var(--clr-text);
  font-size: 0.72rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finding-reco-inline {
  color: var(--clr-text);
  white-space: normal;
}

@media (max-width: 760px) {
  .detail-panel {
    padding: 10px;
  }

  .m365-headline-metrics,
  .external-scan-severity-tiles,
  .m365-summary-rail {
    width: 100%;
  }
}

/* Workflow / run report system */
.ui-workflow-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-workflow-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.ui-workflow-step-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.ui-workflow-step strong,
.ui-workflow-step small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-workflow-step strong {
  color: var(--clr-text);
  font-size: 0.78rem;
}

.ui-workflow-step small {
  margin-top: 1px;
  color: var(--clr-muted);
  font-size: 0.66rem;
}

.ui-workflow-step--done {
  border-left-color: var(--clr-ok);
}

.ui-workflow-step--active {
  border-left-color: var(--clr-info);
  background: var(--clr-info-bg);
}

.ui-workflow-step--blocked {
  border-left-color: var(--clr-warn);
  background: var(--clr-warn-bg);
}

.m365-ops-workflow {
  margin: 0 0 8px;
}

.agent-section--fold {
  overflow: hidden;
}

.agent-section--fold > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.agent-section--fold > summary::-webkit-details-marker {
  display: none;
}

.agent-section-summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.agent-section--fold[open] > .agent-section-summary::after {
  content: "▾";
}

.agent-section--fold:not([open]) {
  padding-bottom: 0;
}

.scan-run-digest,
.netdiag-local-report {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 10px;
  align-items: stretch;
  margin: 6px 8px 8px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.scan-run-digest--critical,
.scan-run-digest--high,
.netdiag-local-report--risk {
  border-left-color: var(--clr-risk);
}

.scan-run-digest--medium,
.netdiag-local-report--warn {
  border-left-color: var(--clr-warn);
}

.scan-run-digest--none,
.netdiag-local-report--ok {
  border-left-color: var(--clr-ok);
}

.scan-run-digest-main,
.netdiag-local-report-main {
  min-width: 0;
}

.scan-run-digest-main .eyebrow,
.netdiag-local-report-main .eyebrow {
  margin: 0 0 2px;
}

.scan-run-digest-main strong,
.netdiag-local-report-main strong {
  display: block;
  color: var(--clr-text);
  font-size: 0.9rem;
}

.scan-run-digest-main p,
.netdiag-local-report-main p {
  margin: 4px 0 0;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.scan-run-digest-facts,
.netdiag-local-report-facts {
  display: grid;
  gap: 5px;
  margin: 0;
}

.scan-run-digest-facts div,
.netdiag-local-report-facts div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.scan-run-digest-facts dt,
.netdiag-local-report-facts dt {
  margin: 0;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.scan-run-digest-facts dd,
.netdiag-local-report-facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.netdiag-local-next {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.38;
}

.empty-state,
.empty-state-card,
.m365-security-loading,
.m365-security-empty,
.scan-finding-empty,
.resp-log-empty,
.m365-list-empty {
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.empty-state {
  border: 1px dashed var(--clr-border);
  background: var(--clr-surface-alt);
}

.empty-state-card--loading,
.m365-security-loading {
  border-left: 2px solid var(--clr-info);
}

.empty-state-card--error,
.form-message--error,
.m365-security-empty--warn {
  border-left: 2px solid var(--clr-warn);
}

@media (max-width: 900px) {
  .ui-workflow-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scan-run-digest,
  .netdiag-local-report {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ui-workflow-rail {
    grid-template-columns: 1fr;
  }

  .scan-run-digest-facts div,
  .netdiag-local-report-facts div {
    grid-template-columns: 1fr;
    gap: 1px;
  }
}

.bastion-sidebar-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px 8px;
  align-items: start;
}

.bastion-sidebar-toggle {
  grid-row: 1 / span 2;
}

.bastion-sidebar-title {
  min-width: 0;
}

.bastion-sidebar-actions {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-left: 0;
}

.bastion-deploy-links-button,
.bastion-archive-button {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-layout--sessions-collapsed .bastion-sidebar-head {
  display: flex;
}

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: clamp(186px, 19vw, 206px) minmax(0, 1fr);
  }
}

/* === Monitoring cockpit calm triage === */
.dashboard-summary-band {
  grid-template-columns: minmax(116px, 164px) minmax(0, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}

.dashboard-summary-primary {
  min-height: 46px;
  padding: 5px 8px;
}

.dashboard-summary-primary strong {
  font-size: 1rem;
}

.dashboard-summary-primary small,
.dashboard-summary-fact small {
  font-size: 0.6rem;
}

.dashboard-summary-facts {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.dashboard-summary-fact {
  min-height: 46px;
  padding: 5px 7px;
}

.dashboard-summary-fact--quiet {
  background: var(--n-25);
}

.dashboard-summary-fact--quiet strong {
  color: var(--clr-muted);
}

.dashboard-events {
  margin-bottom: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.dashboard-event-list {
  gap: 4px;
}

.dashboard-event {
  padding: 1px 6px;
  font-size: 0.66rem;
}

.dashboard-refresh-row {
  margin: 0 0 4px;
}

.dashboard-monitoring-stack {
  display: grid;
  gap: 6px;
}

/* Auf breiten Schirmen Worklist und Kundenliste nebeneinander —
   halbiert die Scrollhöhe und nutzt die Breite statt sie leer zu lassen. */
@media (min-width: 1200px) {
  .dashboard-monitoring-stack {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

.dashboard-monitoring-stack > .detail-panel {
  padding: 7px 9px;
  gap: 5px;
}

.dashboard-monitoring-stack .inventory-toolbar {
  align-items: center;
  gap: 6px;
  margin: 0;
}

.dashboard-monitoring-stack .inventory-toolbar h2,
.dashboard-monitoring-stack .detail-panel h2 {
  margin: 1px 0 0;
  font-size: 0.9rem;
}

.dashboard-work-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.dashboard-work-table {
  min-width: 500px;
  width: 100%;
  border: 0;
  font-size: 0.72rem;
  table-layout: fixed;
}

.dashboard-work-table thead th {
  position: static;
}

.dashboard-work-table th,
.dashboard-work-table td {
  padding: 3px 6px;
  line-height: 1.15;
  white-space: nowrap;
}

.dashboard-work-table td.dashboard-work-title-cell {
  white-space: nowrap;
}

.dashboard-work-table th.sort-header {
  position: relative;
  top: auto;
}

.dashboard-work-table th:nth-child(1),
.dashboard-work-table td:nth-child(1) {
  width: 24px;
}

.dashboard-work-table th:nth-child(2),
.dashboard-work-table td:nth-child(2) {
  width: 58px;
}

.dashboard-work-table th:nth-child(3),
.dashboard-work-table td:nth-child(3) {
  width: 112px;
}

.dashboard-work-table th:nth-child(5),
.dashboard-work-table td:nth-child(5) {
  width: 82px;
}

.dashboard-work-sort-btn {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.dashboard-work-toggle-head,
.dashboard-work-toggle-cell {
  width: 24px;
  text-align: center;
}

.dashboard-work-row {
  cursor: pointer;
}

.dashboard-work-row--expanded > td {
  background: var(--clr-info-bg);
}

.dashboard-work-row-toggle {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.dashboard-work-row-toggle:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.dashboard-work-severity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  font-size: 0.6rem;
  font-weight: 700;
}

.dashboard-work-severity--risk {
  border-color: color-mix(in srgb, var(--clr-risk) 55%, transparent);
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.dashboard-work-severity--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 55%, transparent);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.dashboard-work-severity--info,
.dashboard-work-severity--neutral {
  border-color: color-mix(in srgb, var(--clr-info) 45%, transparent);
  background: var(--clr-info-bg);
  color: var(--clr-info);
}

.dashboard-work-customer,
.dashboard-work-title-cell {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-work-customer {
  max-width: 120px;
  color: var(--clr-text);
  font-weight: 600;
}

.dashboard-work-title-cell {
  max-width: none;
  line-height: 1.15;
  white-space: nowrap;
}

.dashboard-work-title-cell strong {
  display: inline;
  font-weight: 600;
  line-height: inherit;
}

.dashboard-work-meta {
  display: inline;
  margin-top: 0;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: inherit;
}

.dashboard-work-meta::before {
  content: " · ";
}

.dashboard-work-action-cell {
  width: 82px;
  text-align: right;
  white-space: nowrap;
}

.dashboard-work-dup {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
}

.dashboard-work-detail-row > td {
  padding: 0;
  background: var(--b-50);
}

.dashboard-work-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 9px 12px 10px 42px;
  border-left: 2px solid var(--clr-border);
  white-space: normal;
}

.dashboard-work-detail strong {
  display: block;
  color: var(--clr-text);
  font-size: 0.72rem;
}

.dashboard-work-detail p {
  margin: 3px 0 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: normal;
}

.dashboard-work-detail-actions {
  display: flex;
  justify-content: flex-end;
}

.radar-layout--split {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  gap: 8px;
}

.radar-layout--split > .detail-panel {
  padding: 9px 11px;
  gap: 6px;
}

.radar-layout--split .inventory-toolbar {
  align-items: center;
  gap: 8px;
}

.radar-layout--split .inventory-toolbar h2 {
  font-size: 0.9rem;
}

.dashboard-work-list {
  border-radius: var(--radius-sm);
}

.dashboard-work-item {
  grid-template-columns: 24px minmax(0, 1fr) minmax(58px, .3fr) max-content;
  min-height: 44px;
  padding: 6px 9px;
}

.dashboard-work-item .mon-row-summary {
  display: block;
  color: var(--n-800);
  font-size: 0.66rem;
  font-weight: 600;
}

.mon-row-rank,
.mon-row-count {
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  font-size: 0.66rem;
}

.mon-row-pill {
  height: 20px;
  max-width: 112px;
  padding: 0 7px;
  font-size: 0.66rem;
}

.mon-row-meta {
  font-size: 0.72rem;
}

.dashboard-quiet-state {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-ok);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.dashboard-quiet-state strong {
  color: var(--clr-text);
  font-size: 0.84rem;
}

.dashboard-quiet-state span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radar-tiers {
  gap: 6px;
}

.radar-tier-head {
  padding: 6px 9px;
}

.radar-tier-head h3 {
  font-size: 0.72rem;
}

.radar-tier-count {
  padding: 0 7px;
  font-size: 0.66rem;
}

.radar-tier--watch,
.radar-tier--ok {
  background: var(--b-50);
  opacity: 0.92;
}

.radar-compact-row {
  grid-template-columns: 46px minmax(92px, 1fr) minmax(38px, .28fr) minmax(0, 1.25fr) max-content;
  min-height: 34px;
  padding: 5px 9px;
  gap: 7px;
}

.radar-compact-top {
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.dashboard-strategic {
  margin: 7px 0 0;
}

.dashboard-strategic > summary {
  padding: 8px 11px;
}

.dashboard-strategic-body {
  gap: 8px;
  padding: 0 11px 11px;
}

@media (max-width: 1100px) {
  .radar-layout--split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .dashboard-summary-band {
    grid-template-columns: 1fr;
  }

  .dashboard-summary-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-work-item {
    grid-template-columns: 24px minmax(0, 1fr) max-content;
  }

  .dashboard-work-item .mon-row-meta {
    display: none;
  }

  .dashboard-quiet-state {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .dashboard-quiet-state span {
    white-space: normal;
  }

  .dashboard-work-table {
    min-width: 860px;
  }

  .dashboard-work-detail {
    grid-template-columns: 1fr;
    padding-left: 12px;
  }
}

/* === Monitoring flow cleanup: flatter customer/device views === */
.customer-overview-work,
.customer-overview-inventory {
  display: grid;
  align-content: start;
  gap: 10px;
}

.customer-overview-layout {
  gap: 10px;
}

.customer-overview-layout .detail-panel,
.customer-overview-modules {
  padding: 11px 13px;
}

.customer-overview-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.customer-overview-block + .customer-overview-block {
  padding-top: 10px;
  border-top: 1px solid var(--clr-border);
}

.customer-overview-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.customer-overview-block-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 700;
}

.customer-overview-block-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-muted);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.customer-coverage-block .empty-state-card {
  padding: 10px 12px;
  text-align: left;
}

.discovery-setup-card {
  display: grid;
  gap: 6px;
}

.discovery-scan-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.discovery-scan-row input {
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font: inherit;
  font-size: 0.78rem;
}

.discovery-agent-hint {
  margin: 0;
}

@media (max-width: 680px) {
  .discovery-scan-row {
    grid-template-columns: 1fr;
  }
}

.customer-overview-modules {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.customer-overview-modules .posture-domains {
  margin: 0;
}

.customer-summary-fact,
.agent-summary-fact {
  grid-template-rows: auto auto auto;
}

.customer-summary-fact strong,
.agent-summary-fact strong {
  line-height: 1.15;
}

.customer-summary-fact small,
.agent-summary-fact small {
  min-height: 0.8rem;
}

.agent-summary-primary small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .customer-overview-block-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .customer-overview-block-head span {
    text-align: left;
    white-space: normal;
  }
}

.posture-domain-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  overflow: hidden;
}

.posture-domain-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 6px 11px;
  border: 0;
  border-left: 2px solid var(--clr-border-mid);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
  cursor: pointer;
}

.posture-domain-row:last-child {
  border-bottom: 0;
}

.posture-domain-row:hover {
  background: var(--clr-info-bg);
}

.posture-domain-row-main {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.posture-domain-row-main strong,
.posture-domain-row-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.posture-domain-row-main strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.posture-domain-row-main small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.posture-domain-row em {
  color: var(--clr-text);
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Einheitliche Werte-Spalte: Zahl + kleine Einheit, rechtsbündig. */
.posture-domain-value {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 64px;
  line-height: 1.1;
}
.posture-domain-value small {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.posture-domain-value--na,
.posture-domain-value--na small {
  color: var(--clr-muted);
  font-weight: 700;
}

.posture-domain-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-muted);
}

.posture-domain-row.posture-domain--ok { border-left-color: var(--clr-ok); }
.posture-domain-row.posture-domain--warn { border-left-color: var(--clr-warn); }
.posture-domain-row.posture-domain--critical { border-left-color: var(--clr-risk); }
.posture-domain-row.posture-domain--info { border-left-color: var(--clr-primary); }
.posture-domain-row.posture-domain--ok .posture-domain-dot { background: var(--clr-ok); }
.posture-domain-row.posture-domain--warn .posture-domain-dot { background: var(--clr-warn); }
.posture-domain-row.posture-domain--critical .posture-domain-dot { background: var(--clr-risk); }
.posture-domain-row.posture-domain--info .posture-domain-dot { background: var(--clr-primary); }

.agent-area-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}

.agent-area-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 9px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
}

button.agent-area-row {
  cursor: pointer;
}

button.agent-area-row:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.agent-area-main {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.agent-area-main strong,
.agent-area-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-area-main strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.agent-area-main small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.agent-area-row em {
  color: var(--clr-text);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.agent-area-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-muted);
}

.agent-area-row--ok { border-left-color: var(--clr-ok); }
.agent-area-row--warn { border-left-color: var(--clr-warn); }
.agent-area-row--risk { border-left-color: var(--clr-risk); }
.agent-area-row--info { border-left-color: var(--clr-primary); }
.agent-area-row--ok .agent-area-dot { background: var(--clr-ok); }
.agent-area-row--warn .agent-area-dot { background: var(--clr-warn); }
.agent-area-row--risk .agent-area-dot { background: var(--clr-risk); }
.agent-area-row--info .agent-area-dot { background: var(--clr-primary); }

.devlog-health-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 8px;
}

.devlog-health-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.devlog-health-strip strong {
  color: var(--clr-text);
  font-size: 0.78rem;
}

.devlog-health-strip--risk span:last-child {
  border-color: color-mix(in srgb, var(--clr-risk) 42%, var(--clr-border));
  background: var(--clr-risk-bg);
}

.devlog-health-strip--warn span:last-child {
  border-color: color-mix(in srgb, var(--clr-warn) 42%, var(--clr-border));
  background: var(--clr-warn-bg);
}

.netdiag-trend-strip {
  display: grid;
  grid-template-columns: minmax(170px, 0.35fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.netdiag-trend-head {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.netdiag-trend-head strong,
.netdiag-trend-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.netdiag-trend-head strong {
  color: var(--clr-text);
  font-size: 0.78rem;
}

.netdiag-trend-head small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.netdiag-trend-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.netdiag-trend-metric {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.netdiag-trend-metric b,
.netdiag-trend-metric small {
  overflow: hidden;
  color: var(--clr-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 700;
}

.netdiag-trend-metric strong {
  color: var(--clr-text);
  font-size: 0.84rem;
  font-weight: 700;
}

.netdiag-trend-metric--worse strong { color: var(--clr-risk); }
.netdiag-trend-metric--better strong { color: var(--clr-ok); }

.scan-run-next {
  display: grid;
  gap: 2px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--clr-border);
}

.scan-run-next span {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.scan-run-next strong {
  color: var(--clr-text);
  font-size: 0.78rem;
  line-height: 1.35;
}

.scan-run-next small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

@media (max-width: 820px) {
  .netdiag-trend-strip,
  .netdiag-trend-metrics {
    grid-template-columns: 1fr;
  }

  .agent-area-main small,
  .posture-domain-row-main small {
    white-space: normal;
  }
}

/* ============================================================
   Monitoring-Cockpit — beruhigtes Layout (2026-06)
   Kompakter KPI-Strip, Kundenlage-Hero mit Makro-Gruppen,
   fusionierte Domänenliste, einklappbare Detailsektionen.
   Ersetzt die früheren vier Karten-Raster.
   ============================================================ */

/* ── KPI-Strip ──────────────────────────────────────────────── */
.dashboard-kpi-strip {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}
@media (max-width: 900px) {
  .dashboard-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dashboard-kpi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
}
.dashboard-kpi:hover { border-color: var(--clr-info); }
.dashboard-kpi.is-active {
  border-color: var(--clr-info);
  box-shadow: inset 0 0 0 1px var(--clr-info);
}
.dashboard-kpi-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.dashboard-kpi-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--clr-text);
}
.dashboard-kpi-value small {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--clr-muted);
}
.dashboard-kpi-sub {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--clr-muted);
}
.dashboard-kpi--primary { border-left-color: var(--clr-info); }
.dashboard-kpi--primary.dashboard-kpi--risk {
  border-left-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}
.dashboard-kpi--primary.dashboard-kpi--ok {
  border-left-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}

/* ── Zone 1: Lagebild (Verdikt + Hygiene) ───────────────────── */
.dashboard-lagebild {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.dashboard-verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  color: var(--clr-text);
}
.dashboard-verdict:hover { border-color: var(--clr-info); }
.dashboard-verdict.is-active {
  border-color: var(--clr-info);
  box-shadow: inset 0 0 0 1px var(--clr-info);
}
.dashboard-verdict--risk {
  border-left-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}
.dashboard-verdict--ok {
  border-left-color: var(--clr-ok);
  background: var(--clr-ok-bg);
}
.dashboard-verdict-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.dashboard-verdict--risk .dashboard-verdict-icon { color: var(--clr-risk); }
.dashboard-verdict--ok .dashboard-verdict-icon { color: var(--clr-ok); }
.dashboard-verdict-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.dashboard-verdict-headline {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--clr-text);
}
.dashboard-verdict-sub {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--clr-muted);
}
.dashboard-verdict-cta {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--clr-muted);
  white-space: nowrap;
}
.dashboard-hygiene {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
@media (max-width: 900px) {
  .dashboard-hygiene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Zone 2: „Was jetzt" (Sofortmaßnahmen + Event-Rail) ─────── */
.dashboard-now {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}
.dashboard-now--solo { grid-template-columns: 1fr; }
.dashboard-now > .radar-actions-panel { margin-bottom: 0; }
.dashboard-now .dashboard-events { margin: 0; }
@media (max-width: 1100px) {
  .dashboard-now { grid-template-columns: 1fr; }
}

/* ── Zone 3: Drilldown-Tabs ─────────────────────────────────── */
.dashboard-drill { margin-bottom: 12px; }
.dashboard-drill-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  overflow-x: auto;
}
.dashboard-drill-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.dashboard-drill-tab:hover {
  color: var(--clr-primary);
  background: var(--clr-surface);
  border-color: rgba(26, 107, 138, 0.22);
}
.dashboard-drill-tab.is-active {
  color: var(--clr-primary);
  background: var(--clr-surface);
  border-color: rgba(26, 107, 138, 0.35);
  box-shadow: inset 0 -2px 0 rgba(26, 107, 138, 0.45);
}
.dashboard-drill-badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--clr-risk);
  color: var(--n-0);
  font-size: 0.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dashboard-drill-body > .detail-panel:last-child { margin-bottom: 0; }

/* ── „Neu seit letztem Quittieren"-Marker ───────────────────── */
.dashboard-work-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* „N neu"-Zähler im Verdikt (Zone 1) und im Sofortmaßnahmen-Header */
.dashboard-new-badge,
.dashboard-new-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--clr-accent) 55%, transparent);
  background: color-mix(in srgb, var(--clr-accent) 12%, var(--clr-surface));
  color: var(--clr-accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.dashboard-new-badge { margin-left: 8px; vertical-align: middle; }
.dashboard-new-count { margin-left: 6px; }
/* NEU-Badge direkt an der Sofortmaßnahmen-Zeile */
.dashboard-work-new {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: var(--clr-accent);
  color: var(--n-0);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
/* Linke Akzentkante für neue Punkte (spiegelt das Cursor-Muster, eigene Farbe;
   bewusst ohne Voll-Zeilen-Hintergrund, damit expanded/cursor nicht überdeckt wird) */
.dashboard-work-row--new > td:first-child {
  box-shadow: inset 3px 0 0 var(--clr-accent);
}

/* ── Monitoring im Wazuh-Stil ─────────────────────────────────────────────────
   Wazuh macht lange Sicherheitslisten lesbar, weil jede Ansicht dieselbe
   Mechanik trägt: Statusleiste, Modul-Tabs, Kennzahlkacheln als Filter, eine
   Suchleiste mit entfernbaren Filter-Pills und darunter eine dichte, sortier-
   und blätterbare Tabelle. Die Klassen hier bilden genau diese Bausteine ab und
   werden von allen vier Listen (Vorfälle, Kunden, Firewalls, Assets) gemeinsam benutzt. */
.mon-cockpit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ── Statusleiste des Moduls ─────────────────────────────────────────────── */
.wz-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 14px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-ok);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}
.wz-status--risk { border-left-color: var(--clr-risk); }
.wz-status--warn { border-left-color: var(--clr-warn); }
.wz-status--ok { border-left-color: var(--clr-ok); }
.wz-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.wz-status--risk .wz-status-icon { background: var(--clr-risk-bg); color: var(--clr-risk); }
.wz-status--warn .wz-status-icon { background: var(--clr-warn-bg); color: var(--clr-warn); }
.wz-status--ok .wz-status-icon { background: var(--clr-ok-bg); color: var(--clr-ok); }
.wz-status-icon--loading {
  background: var(--clr-info-bg);
  color: var(--clr-info);
  animation: wz-monitoring-spin 900ms linear infinite;
}
@keyframes wz-monitoring-spin { to { transform: rotate(360deg); } }
.wz-status-text { display: grid; gap: 1px; min-width: 0; }
.wz-status-text strong { font-size: 0.96rem; font-weight: 700; color: var(--clr-text); letter-spacing: -0.01em; }
.wz-status--risk .wz-status-text strong { color: var(--clr-risk); }
.wz-status-text small { font-size: var(--fs-xs); font-weight: 700; color: var(--clr-muted); }
.wz-status-scope {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wz-status-new {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  background: var(--clr-accent);
  color: var(--clr-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

/* ── Modul-Tabs ──────────────────────────────────────────────────────────── */
.wz-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 1px solid var(--clr-border);
  overflow-x: auto;
}
.wz-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: none;
  color: var(--clr-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  /* Sitzt bewusst auf der Trennlinie: der aktive Tab überdeckt sie und wirkt
     dadurch mit dem Panel darunter verbunden. */
  margin-bottom: -1px;
}
.wz-tab:hover { color: var(--clr-primary); background: var(--clr-info-bg); }
.wz-tab.is-active {
  border-color: var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-primary);
  box-shadow: inset 0 2px 0 var(--clr-primary);
}
.wz-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--clr-subtle);
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wz-tab.is-active .wz-tab-count { background: var(--clr-info-bg); color: var(--clr-primary); }

.wz-panel { display: flex; flex-direction: column; gap: 10px; }
.mon-empty--loading { min-height: 190px; }

.wz-view-context {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}
.wz-view-context > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-primary);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wz-view-context p {
  margin: 0;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
}

/* ── Kennzahlkacheln ─────────────────────────────────────────────────────────
   Zahl groß, Bedeutung klein — und jede Kachel ist zugleich der Filter auf
   genau diese Menge. */
.wz-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}
.wz-stat {
  display: grid;
  gap: 1px;
  padding: 9px 12px;
  border: 1px solid var(--clr-border);
  border-top: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.wz-stat:hover { border-color: var(--clr-primary); box-shadow: var(--shadow-xs); }
.wz-stat.is-active { background: var(--clr-info-bg); border-color: var(--clr-primary); }
.wz-stat-value {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.wz-stat-label { font-size: var(--fs-xs); font-weight: 700; color: var(--clr-text); }
.wz-stat-sub { font-size: var(--fs-2xs); font-weight: 700; color: var(--clr-muted); }
.wz-stat--risk { border-top-color: var(--clr-risk); }
.wz-stat--risk .wz-stat-value { color: var(--clr-risk); }
.wz-stat--warn { border-top-color: var(--clr-warn); }
.wz-stat--warn .wz-stat-value { color: var(--clr-warn); }
.wz-stat--ok { border-top-color: var(--clr-ok); }
.wz-stat--ok .wz-stat-value { color: var(--clr-ok); }
.wz-stat--info { border-top-color: var(--clr-info); }
.wz-stat--accent { border-top-color: var(--clr-accent); }
.wz-stat--accent .wz-stat-value { color: var(--clr-accent); }
.wz-stat--muted { border-top-color: var(--clr-border-mid); }
.wz-stat--muted .wz-stat-value { color: var(--clr-muted); }
.wz-stat--plain { border-top-color: var(--clr-primary); }

/* ── Suchleiste und Filter-Pills ─────────────────────────────────────────── */
.wz-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wz-searchfield {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
}
.wz-search-icon {
  position: absolute;
  left: 10px;
  display: inline-flex;
  align-items: center;
  color: var(--clr-muted);
  font-size: 0.9rem;
  pointer-events: none;
}

.wz-search-icon svg { display: block; }
.wz-searchfield .wz-search-input {
  width: 100%;
  min-height: 34px;
  padding: 0 30px 0 32px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: var(--fs-sm);
  font-family: inherit;
}
.wz-searchfield .wz-search-input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-info-bg);
}
.wz-search-clear {
  position: absolute;
  right: 6px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--clr-subtle);
  color: var(--clr-muted);
  font-size: 0.84rem;
  line-height: 1;
  cursor: pointer;
}
.wz-search-clear:hover { background: var(--clr-border); color: var(--clr-text); }
.wz-timerange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.wz-timerange select {
  border: 0;
  background: none;
  color: var(--clr-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.wz-timerange select:focus { outline: none; }
.wz-timerange select:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.wz-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.wz-btn:hover { border-color: var(--clr-primary); background: var(--clr-info-bg); color: var(--clr-primary); }
.wz-btn--primary { border-color: var(--clr-primary); background: var(--clr-primary); color: var(--n-0); }
.wz-btn--primary:hover { background: var(--clr-primary-dark); border-color: var(--clr-primary-dark); color: var(--n-0); }

.wz-filterbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.wz-filterbar-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-xmuted);
}
.wz-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 4px 0 8px;
  border: 1px solid color-mix(in srgb, var(--clr-primary) 32%, var(--clr-border));
  border-radius: var(--radius-sm);
  background: var(--clr-info-bg);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.wz-filter-field { color: var(--clr-muted); }
.wz-filter-value { color: var(--clr-primary); font-weight: 700; }
.wz-filter-pill button {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--clr-muted);
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}
.wz-filter-pill button:hover { background: var(--clr-surface); color: var(--clr-risk); }
.wz-filter-clear {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--clr-primary);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.wz-resultline {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Top-Werte je Feld ───────────────────────────────────────────────────────
   Beantwortet „worauf konzentriert sich das gerade", ohne die Liste selbst zu
   durchsuchen; jede Zeile ist zugleich der Filter auf diesen Wert. */
.wz-facets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.wz-facet {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 8px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.wz-facet h4 {
  margin: 0 0 4px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-xmuted);
}
.wz-facet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 28px;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  text-align: left;
}
.wz-facet-row:hover { background: var(--clr-info-bg); }
.wz-facet-row.is-active { border-color: var(--clr-primary); background: var(--clr-info-bg); }
.wz-facet-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-text);
}
.wz-facet-bar {
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--clr-subtle);
  overflow: hidden;
}
.wz-facet-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--clr-primary);
}
.wz-facet-count {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wz-facet-empty { margin: 0; font-size: var(--fs-xs); color: var(--clr-muted); }

/* Textlink-Button — auch außerhalb des Monitorings in Sprung-Bannern benutzt. */
.mon-linkbtn {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--clr-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.mon-linkbtn:hover { color: var(--clr-primary-dark); }

/* ── Statuspills der Assetliste ──────────────────────────────────────────── */
.wz-statuspills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wz-statuspill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.wz-statuspill span {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.wz-statuspill:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.wz-statuspill--risk.is-active { border-color: var(--clr-risk); background: var(--clr-risk-bg); color: var(--clr-risk); }
.wz-statuspill--warn.is-active { border-color: var(--clr-warn); background: var(--clr-warn-bg); color: var(--clr-warn); }
.wz-statuspill--ok.is-active { border-color: var(--clr-ok); background: var(--clr-ok-bg); color: var(--clr-ok); }
.wz-statuspill--plain.is-active { border-color: var(--clr-primary); background: var(--clr-info-bg); color: var(--clr-primary); }

/* ── Tabelle ─────────────────────────────────────────────────────────────── */
.wz-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.wz-table {
  width: 100%;
  min-width: 900px;
  margin: 0;
  border-collapse: collapse;
}
.wz-th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
  text-align: left;
  white-space: nowrap;
}
.wz-th.is-sorted { background: var(--clr-info-bg); }
.wz-th--plain {
  padding: 7px 10px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.wz-sort {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: none;
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.wz-sort:hover { color: var(--clr-primary); }
.wz-th.is-sorted .wz-sort { color: var(--clr-primary); }
.wz-sort-icon { font-size: 0.6rem; opacity: 0.5; }
.wz-th.is-sorted .wz-sort-icon { opacity: 1; }

.wz-table tbody tr > td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--clr-border);
  vertical-align: top;
}
.wz-table tbody tr:last-child > td { border-bottom: 0; }
.wz-row { cursor: pointer; }
.wz-row:hover > td { background: color-mix(in srgb, var(--clr-info-bg) 60%, var(--clr-surface)); }
.wz-row:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: -2px; }
.wz-row--cursor > td { background: var(--clr-info-bg); }
.wz-row.is-expanded > td { background: var(--clr-surface-alt); border-bottom-color: transparent; }
/* Der Level-Ton sitzt als schmale Kante links, damit die Zeile selbst ruhig
   bleibt und die Schwere trotzdem beim Scannen auffällt. */
.wz-row--critical > td:first-child { box-shadow: inset 3px 0 0 var(--clr-risk); }
.wz-row--high > td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--clr-risk) 60%, var(--clr-warn)); }
.wz-row--medium > td:first-child { box-shadow: inset 3px 0 0 var(--clr-warn); }
.wz-row--low > td:first-child { box-shadow: inset 3px 0 0 var(--clr-border-mid); }
.wz-row--hygiene > td:first-child { box-shadow: inset 3px 0 0 var(--clr-accent); }

.wz-col-expand { width: 30px; }
.wz-expand {
  width: 20px;
  height: 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--clr-muted);
  font-size: 0.84rem;
  line-height: 1;
  cursor: pointer;
}
.wz-expand:hover { border-color: var(--clr-border); background: var(--clr-surface); color: var(--clr-primary); }

.wz-col-time { width: 118px; }
.wz-col-time .wz-time {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wz-col-time small {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
  white-space: nowrap;
}

.wz-col-level { width: 62px; }
/* Numerisches Regel-Level wie in Wazuh: vergleichbar und sortierbar, wo ein
   Wort wie „hoch" es nicht ist. */
.wz-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--n-0);
  background: var(--clr-border-mid);
}
.wz-level--risk { background: var(--clr-risk); }
.wz-level--warn { background: var(--clr-warn); }
.wz-level--info { background: var(--clr-info); }
.wz-level--ok { background: var(--clr-ok); }

.wz-col-customer { width: 15%; }
.wz-col-asset { width: 15%; }
.wz-agent {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-text);
}
.wz-col-type { width: 12%; }
.wz-type { font-size: var(--fs-xs); font-weight: 700; color: var(--clr-muted); }

.wz-col-desc { min-width: 220px; }
.wz-desc { font-size: var(--fs-sm); font-weight: 700; color: var(--clr-text); }
.wz-col-desc small {
  display: -webkit-box;
  margin-top: 1px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wz-dup,
.wz-new {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  vertical-align: 1px;
}
.wz-dup { background: var(--clr-subtle); color: var(--clr-muted); font-variant-numeric: tabular-nums; }
.wz-new { background: var(--clr-accent); color: var(--clr-text); letter-spacing: 0.05em; }

.wz-col-num { width: 88px; }
.wz-num { font-size: var(--fs-xs); font-weight: 700; color: var(--clr-text); font-variant-numeric: tabular-nums; }
.wz-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 20px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wz-score--ok { background: var(--clr-ok-bg); color: var(--clr-ok); }
.wz-score--warn { background: var(--clr-warn-bg); color: var(--clr-warn); }
.wz-score--risk { background: var(--clr-risk-bg); color: var(--clr-risk); }

.wz-col-version { width: 130px; }
.wz-agentstate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-muted);
}
.wz-agentstate::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-sm);
  background: currentColor;
}
.wz-agentstate--ok { color: var(--clr-ok); }
.wz-agentstate--warn { color: var(--clr-warn); }
.wz-agentstate--risk { color: var(--clr-risk); }
.wz-col-version small { display: block; font-size: var(--fs-2xs); font-weight: 700; color: var(--clr-muted); }

.wz-col-status { width: 84px; }
.wz-col-name { width: 20%; }
.wz-col-signal { width: 118px; }
.wz-col-areas { width: 20%; }
.wz-col-reason { max-width: 300px; }
.wz-col-site { width: 11%; }
.wz-col-config { width: 150px; }

.wz-table--firewalls { min-width: 1160px; }
.wz-firewall-row > td { vertical-align: middle; }
.wz-firewall-row .wz-col-num small,
.wz-col-config small {
  display: block;
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.wz-linkstate,
.wz-configstate {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wz-linkstate::before,
.wz-configstate::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: var(--radius-sm);
  background: currentColor;
}
.wz-linkstate--ok,
.wz-configstate--ok { color: var(--clr-ok); }
.wz-linkstate--risk,
.wz-configstate--risk { color: var(--clr-risk); }
.wz-configstate--warn { color: var(--clr-warn); }
/* „unbekannt" ist kein Befund und darf nicht wie einer aussehen. */
.wz-configstate--unknown,
.wz-linkstate--muted { color: var(--clr-xmuted); }
.wz-configstate--unknown::before { opacity: 0.45; }

/* Kachel ohne Datengrundlage bleibt sichtbar, aber ist kein Filter. */
.wz-stat:disabled {
  cursor: default;
  opacity: 0.62;
}
.wz-stat:disabled:hover {
  border-color: var(--clr-border);
  border-top-color: var(--clr-border-mid);
  box-shadow: none;
}

/* ── Aufgeklapptes Alert-Dokument ─────────────────────────────────────────── */
.wz-table tbody .wz-detail-row > td {
  padding: 0 10px 12px 40px;
  background: var(--clr-surface-alt);
}
.wz-doc {
  width: 100%;
  margin: 0 0 8px;
  border-collapse: collapse;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  overflow: hidden;
}
.wz-doc th,
.wz-doc td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--clr-border);
  vertical-align: top;
  text-align: left;
}
.wz-doc tr:last-child th,
.wz-doc tr:last-child td { border-bottom: 0; }
.wz-doc th {
  width: 160px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-primary);
  white-space: nowrap;
}
.wz-doc td { font-size: var(--fs-xs); color: var(--clr-text); }
.wz-doc-value { word-break: break-word; }
.wz-doc-filter {
  margin-left: 6px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}
.wz-doc-filter:hover { border-color: var(--clr-primary); background: var(--clr-info-bg); color: var(--clr-primary); }
.wz-doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Blätterfuß ──────────────────────────────────────────────────────────── */
.wz-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 2px 0;
}
.wz-pagesize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
}
.wz-pagesize select {
  min-height: 26px;
  padding: 0 4px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.wz-pagerange {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
  font-variant-numeric: tabular-nums;
}
.wz-pages { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.wz-page {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.wz-page:hover:not(:disabled) { border-color: var(--clr-border); background: var(--clr-surface); color: var(--clr-primary); }
.wz-page.is-active { border-color: var(--clr-primary); background: var(--clr-primary); color: var(--n-0); }
.wz-page:disabled { opacity: 0.35; cursor: not-allowed; }
.wz-page-gap { padding: 0 2px; color: var(--clr-muted); font-size: var(--fs-2xs); }

@media (max-width: 900px) {
  .wz-status-scope { margin-left: 0; width: 100%; }
  .wz-facets { grid-template-columns: 1fr; }
  .wz-pages { margin-left: 0; width: 100%; }
}

.mon-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.mon-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-muted);
}
.mon-summary-strong {
  color: var(--clr-text);
  font-weight: 700;
}
.mon-summary-sep { margin: 0 6px; opacity: 0.5; }
.mon-summary-acute { font-weight: 700; }
.mon-summary-acute--risk { color: var(--clr-risk); }
.mon-summary-acute--ok { color: var(--clr-ok); }
.mon-summary-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mon-summary-score--ok { color: var(--clr-ok); }
.mon-summary-score--warn { color: var(--clr-warn); }
.mon-summary-score--risk { color: var(--clr-risk); }
.mon-breakdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--clr-border);
}
.mon-breakdown-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mon-breakdown-item--risk { border-color: color-mix(in srgb, var(--clr-risk) 34%, var(--clr-border)); color: var(--clr-risk); }
.mon-breakdown-item--warn { border-color: color-mix(in srgb, var(--clr-warn) 34%, var(--clr-border)); color: var(--clr-warn); }
.mon-breakdown-item--ok { border-color: color-mix(in srgb, var(--clr-ok) 30%, var(--clr-border)); color: var(--clr-ok); }
/* Kundenübersicht: gleiche Toolbar-Zeile wie der Monitoring-Einstieg. */
.mon-toolbar--customer { margin-bottom: 10px; }
.mon-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mon-filter-toggle {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.mon-filter-toggle:hover { border-color: var(--clr-info); color: var(--clr-primary); }
.mon-filter-toggle.is-active {
  border-color: rgba(26, 107, 138, 0.35);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

/* Assettabelle des Kunden: Filter, Suche und Trefferzahl über der Liste. */
.mon-asset-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.mon-asset-toolbar .scan-history-search { flex: 1 1 200px; min-width: 0; }

.mon-asset-count {
  color: var(--clr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.mon-cust-row[tabindex="0"] { cursor: pointer; }
.mon-cust-row[tabindex="0"]:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
}

/* Vor/Zurück zwischen den Assets eines Kunden — ohne das führte jeder
   Gerätewechsel über die Kundentabelle zurück. */
.device-sibling-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.device-sibling-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.84rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}

.device-sibling-btn:hover:not(:disabled) {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

.device-sibling-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.device-sibling-count {
  padding: 0 4px;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .device-sibling-count { display: none; }
}

.mon-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.mon-cust-table {
  min-width: 780px;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.mon-cust-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 10px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--clr-muted);
  text-align: left;
  white-space: nowrap;
}
.mon-cust-row > td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--clr-border);
  vertical-align: middle;
}
.mon-cust-table tbody tr:last-child > td { border-bottom: 0; }
.mon-cust-row { cursor: pointer; }
.mon-cust-row:hover > td,
.mon-cust-row:focus-visible > td { background: color-mix(in srgb, var(--clr-info-bg) 70%, var(--clr-surface)); }
.mon-cust-row:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
}
.mon-cust-row--risk > td:first-child { box-shadow: inset 3px 0 0 var(--clr-risk); }
.mon-cust-row--warn > td:first-child { box-shadow: inset 3px 0 0 var(--clr-warn); }

.mon-cust-status,
.mon-cust-status-head { width: 74px; text-align: left; }
.mon-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 58px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.mon-status-pill--risk {
  border-color: color-mix(in srgb, var(--clr-risk) 46%, var(--clr-border));
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}
.mon-status-pill--warn {
  border-color: color-mix(in srgb, var(--clr-warn) 46%, var(--clr-border));
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}
.mon-status-pill--ok {
  border-color: color-mix(in srgb, var(--clr-ok) 34%, var(--clr-border));
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}
.mon-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-sm);
  background: var(--clr-ok);
  flex: 0 0 auto;
}
.mon-dot--risk { background: var(--clr-risk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-risk) 13%, transparent); }
.mon-dot--warn { background: var(--clr-warn); }
.mon-dot--ok { background: var(--clr-ok); }
/* Leere Ampelstufe: sichtbar, aber ohne Signalwirkung. */
.mon-dot--empty { background: var(--clr-border-strong, var(--n-400)); }

.mon-traffic-step--empty { color: var(--clr-muted); }

.mon-cust-name { min-width: 0; }
.mon-cust-name strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--clr-text);
}
.mon-cust-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--clr-muted);
}

.mon-cust-areas {
  max-width: 100%;
}
.mon-area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}
.mon-area {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--clr-muted);
  background: var(--clr-surface-alt);
}
.mon-area--risk { border-color: color-mix(in srgb, var(--clr-risk) 45%, transparent); background: var(--clr-risk-bg); color: var(--clr-risk); }
.mon-area--warn { border-color: color-mix(in srgb, var(--clr-warn) 45%, transparent); background: var(--clr-warn-bg); color: var(--clr-warn); }
.mon-area--ok { color: var(--clr-ok); border-color: color-mix(in srgb, var(--clr-ok) 40%, transparent); background: var(--clr-ok-bg); }

.mon-cust-incidents { white-space: nowrap; }
.mon-incident {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--clr-muted);
}
.mon-incident b { font-weight: 700; color: var(--clr-muted); font-size: 0.66rem; }
.mon-incident--risk { color: var(--clr-risk); }
.mon-incident--warn { color: var(--clr-warn); }
.mon-incident--ok { color: var(--clr-muted); }

.mon-cust-signal { white-space: nowrap; }
.mon-signal {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--clr-muted);
}
.mon-signal--warn { color: var(--clr-warn); }
.mon-signal--risk { color: var(--clr-risk); }
.mon-signal--ok { color: var(--clr-muted); }
/* Kein Ereignis im Zeitfenster ist der Normalfall, kein Befund. */
.mon-signal--idle { color: var(--clr-muted); }

/* Geräte-Statuskopf: Bereichs-Chips + Vorfallzusammenfassung (gleiche Sprache
   wie Monitoring-/Kunden-Tabelle). */
.agent-status-areas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.mon-cust-reason { max-width: 320px; }
.mon-cust-reason small {
  color: var(--clr-muted);
  font-size: 0.72rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mon-cust-table th:nth-child(1),
.mon-cust-table td:nth-child(1) { width: 74px; }
.mon-cust-table th:nth-child(2),
.mon-cust-table td:nth-child(2) { width: 24%; }
.mon-cust-table th:nth-child(3),
.mon-cust-table td:nth-child(3) { width: 25%; }
.mon-cust-table th:nth-child(4),
.mon-cust-table td:nth-child(4) { width: 108px; }
.mon-cust-table th:nth-child(5),
.mon-cust-table td:nth-child(5) { width: 118px; }
.mon-cust-table th:nth-child(6),
.mon-cust-table td:nth-child(6) { width: auto; }

@media (max-width: 760px) {
  .mon-toolbar {
    align-items: stretch;
  }

  .mon-summary {
    width: 100%;
  }

  .mon-breakdown {
    width: 100%;
    margin: 6px 0 0;
    padding: 6px 0 0;
    border-top: 1px solid var(--clr-border);
    border-left: 0;
  }

  .mon-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .mon-cust-table {
    min-width: 720px;
  }
}

.mon-empty {
  display: grid;
  gap: 4px;
  padding: 28px 16px;
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
  text-align: center;
}
.mon-empty strong { color: var(--clr-text); font-size: 0.96rem; }
.mon-empty span { color: var(--clr-muted); font-size: 0.78rem; }

.mon-hint { margin: 6px 2px 0; }
.mon-refreshline {
  display: flex;
  justify-content: flex-end;
  padding: 2px 2px 0;
}

/* ── Kundenlage-Hero: Severity-Chips + Makro-Gruppen ────────── */
.dashboard-customer-domain-sev { white-space: nowrap; }
.dashboard-cust-group-head {
  text-align: center;
  white-space: nowrap;
  font-size: 0.6rem !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.dashboard-cust-group-head abbr {
  text-decoration: none;
  cursor: help;
}
.dashboard-cust-group-cell { text-align: center; }
/* Kompakte Legende erklärt Punktfarbe + Zahl. */
.dashboard-cust-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--clr-muted);
}
.dashboard-cust-legend .dashboard-cust-group {
  min-width: 0;
  gap: 0;
  margin-right: 2px;
}
.dashboard-cust-legend-note {
  padding-left: 8px;
  border-left: 1px solid var(--clr-border);
}
.dashboard-cust-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 30px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.72rem;
}
.dashboard-cust-group-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clr-ok) 40%, var(--clr-surface-alt));
}
.dashboard-cust-group--warn .dashboard-cust-group-dot { background: var(--clr-warn); }
.dashboard-cust-group--risk .dashboard-cust-group-dot { background: var(--clr-risk); }
.dashboard-cust-group-val { color: var(--clr-muted); }
.dashboard-cust-group--warn .dashboard-cust-group-val { color: var(--clr-warn); }
.dashboard-cust-group--risk .dashboard-cust-group-val { color: var(--clr-risk); }

/* ── Fusionierte Domänenliste (statt Karten-Raster) ─────────── */
.dashboard-domain-panel { margin: 0; }
.dashboard-domain-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.dashboard-domain-table { min-width: 100%; margin: 0; }
.dashboard-domain-row { border-left: 2px solid transparent; cursor: pointer; }
.dashboard-domain-row:hover { background: var(--clr-info-bg); }
.dashboard-domain-row.is-active { background: var(--clr-info-bg); }
.dashboard-domain-row--risk { border-left-color: var(--clr-risk); }
.dashboard-domain-row--warn { border-left-color: var(--clr-warn); }
.dashboard-domain-row--ok   { border-left-color: color-mix(in srgb, var(--clr-ok) 45%, transparent); }
.dashboard-domain-row--risk .dashboard-domain-meter b { background: var(--clr-risk); }
.dashboard-domain-row--warn .dashboard-domain-meter b { background: var(--clr-warn); }
.dashboard-domain-row--ok   .dashboard-domain-meter b { background: var(--clr-ok); }
.dashboard-domain-row-label strong { display: block; font-weight: 700; }
.dashboard-domain-row-label small,
.dashboard-domain-row-sub small,
.dashboard-domain-row-top small {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}
.dashboard-domain-row-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dashboard-domain-row-top { max-width: 340px; }
.dashboard-domain-row-top small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-domain-row-meter { width: 90px; }
.dashboard-subhead { margin-top: 12px; }
.dashboard-subhead h3 { margin: 0; font-size: 0.84rem; }

/* ── Einklappbare Detailsektionen (nutzen .dashboard-strategic) ── */
/* Direkt eingebettete Detail-Panels randlos einpassen. */
.dashboard-collapse > .detail-panel {
  border: 0;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}
.dashboard-fullmatrix { margin: 12px 0 0; }
.dashboard-fullmatrix > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--clr-muted);
}
.dashboard-customer-domain-wrap--full { margin-top: 6px; }

/* ============================================================
   KPI-Strips vereinheitlicht (2026-06)
   Inventar (.network-inventory-kpis) und M365 (.m365-headline-metrics)
   auf das ruhige Cockpit-Kacheldesign (.dashboard-kpi) gebracht:
   separierte Karten, linke Akzentkante, gleiche Typografie.
   Inventar gezielt über .network-inventory-kpis gescopt, damit die
   job-kpi-strips auf Scans-/Jobs-Seiten unberührt bleiben.
   ============================================================ */

/* Container → responsives Raster aus separierten Kacheln. */
.job-kpi-strip.network-inventory-kpis,
.m365-headline-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
  margin: 0 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

/* Kachel-Chrome wie .dashboard-kpi. */
.job-kpi-strip.network-inventory-kpis article,
.m365-headline-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

/* Label. */
.job-kpi-strip.network-inventory-kpis article span,
.m365-headline-tile-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-muted);
  white-space: nowrap;
}

/* Wert. */
.job-kpi-strip.network-inventory-kpis article strong,
.m365-headline-tile-value {
  font-size: 1rem;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--clr-text);
}

/* Ton-Akzent ausschließlich über die linke Kante (ruhig, nicht flächig). */
.m365-headline-tile--risk { border-left-color: var(--clr-risk); }
.m365-headline-tile--warn { border-left-color: var(--clr-warn); }
.m365-headline-tile--ok   { border-left-color: var(--clr-ok); }
.m365-headline-tile--info { border-left-color: var(--clr-info); }
.m365-headline-tile--unknown,
.m365-headline-tile--unlicensed { border-left-color: var(--clr-border-mid); }

/* Inventar-Risiko-Kachel ("Ohne Agent") ebenfalls nur als linke Kante. */
.job-kpi-strip.network-inventory-kpis article.job-kpi--risk {
  border-color: var(--clr-border) !important;
  border-left-color: var(--clr-risk) !important;
  background: var(--clr-surface) !important;
}
.job-kpi-strip.network-inventory-kpis article.job-kpi--risk strong {
  color: var(--clr-risk);
}

/* Systemlage-Befundzelle: Severity links, QTC-Schnellaktion rechts. */
.dashboard-system-reason-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.qtc-action-btn--mini {
  min-height: 20px;
  padding: 0 6px;
  font-size: 0.6rem;
  flex-shrink: 0;
}

/* ============================================================
   Calm interface layer (2026-07)

   A single, quiet visual hierarchy for monitoring, customer,
   device, diagnostics, scan and settings views. Status colour is
   reserved for meaning; structure is carried by spacing and borders.
   ============================================================ */

/* Die früher hier stehende zweite :root-Definition wurde entfernt. Sie
   überschrieb sämtliche Farb-, Radius- und Schatten-Tokens aus
   styles/tokens.css, sodass die eigentliche Design-Quelle wirkungslos war und
   Farbänderungen an zwei Stellen gepflegt werden mussten. Einzige Quelle ist
   jetzt styles/tokens.css. */

body {
  background: var(--clr-subtle);
}

.app {
  background: var(--clr-subtle);
}

/* Top-level navigation: one calm dark plane, no floating pill effect. */
.menu-bar {
  min-height: 50px;
  padding: 0 14px;
  border-bottom-color: rgba(255, 255, 255, 0.075);
  background: var(--clr-nav);
  box-shadow: 0 1px 0 rgba(12, 28, 36, 0.24);
}

.brand {
  min-width: 154px;
  gap: 1px;
}

.brand span {
  color: rgba(255, 255, 255, 0.64);
  font-weight: 700;
  letter-spacing: 0.035em;
}

.brand strong {
  font-size: 0.84rem;
  font-weight: 700;
}

.main-menu {
  min-height: 36px;
  padding: 0;
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.menu-item {
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.66);
  font-weight: 600;
}

.menu-item:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 255, 255, 0.92);
}

.menu-item.active {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.105);
  color: var(--n-0);
  box-shadow: none;
}

.menu-item.active .subnav-logo {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

.user-menu {
  gap: 6px;
}

.user-menu span {
  color: var(--clr-xmuted);
  font-weight: 600;
}

.global-search-input,
.menu-bar .secondary,
.timezone-pill {
  border-color: var(--clr-border);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  box-shadow: none;
}

.global-search-input:focus {
  border-color: var(--clr-primary);
  background: var(--clr-surface);
  box-shadow: none;
}

/* Shell and page hierarchy. */
.sidebar-head .eyebrow,
.content-head .eyebrow,
.inventory-toolbar .eyebrow {
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.content {
  padding: 20px clamp(16px, 2vw, 28px) 28px;
}

.content-head {
  align-items: center;
  margin-bottom: 16px;
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--clr-border);
}

.content-head .eyebrow {
  margin-bottom: 4px;
}

.content-head h1 {
  gap: 9px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.title-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--n-200);
  color: var(--clr-primary);
}

.content-body,
.settings-body,
.customer-overview-work,
.customer-overview-inventory {
  gap: 12px;
}

/* Panels and cards share one structural treatment. */
.detail-panel,
.live-card,
.donut-card,
.bar-card,
.line-card,
.metric-strip article,
.context-headline,
.element-submenu,
.deployment-os-card,
.customer-summary-primary,
.customer-summary-fact,
.agent-summary-primary,
.agent-summary-fact,
.dashboard-summary-primary,
.dashboard-summary-fact,
.hardening-score-card,
.config-tile,
.dashboard-kpi,
.dashboard-verdict,
.agent-area-row {
  border-color: var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: none;
}

.detail-panel {
  gap: 7px;
  padding: 14px 16px;
  border-left-width: 1px;
  border-left-color: var(--clr-border);
}

.detail-panel--severity-risk { border-left: 2px solid var(--clr-risk); }
.detail-panel--severity-warn { border-left: 2px solid var(--clr-warn); }
.detail-panel--severity-ok { border-left: 2px solid var(--clr-ok); }
.detail-panel--severity-info { border-left: 2px solid var(--clr-info); }
.detail-panel--severity-neutral { border-left: 2px solid var(--clr-border-mid); }

.detail-panel h2,
.inventory-toolbar h2,
.element-submenu-head h2 {
  color: var(--clr-text);
  font-weight: 700;
  letter-spacing: -0.006em;
}

.detail-panel p,
.inventory-toolbar p,
.subcontent p {
  color: var(--clr-muted);
  font-weight: 500;
  line-height: 1.45;
}

.metric-strip article:hover,
.config-tile:hover,
.customer-summary-primary:hover,
.customer-summary-fact:hover,
.agent-summary-primary:hover,
.agent-summary-fact:hover,
.dashboard-kpi:hover,
.dashboard-verdict:hover {
  border-color: var(--clr-border-mid);
  background: var(--clr-surface);
  box-shadow: none;
}

/* Severity is a thin edge and text cue, not a full coloured card. */
.customer-summary-primary--warn,
.customer-summary-primary--risk,
.customer-summary-primary--ok,
.agent-summary-primary--warn,
.agent-summary-primary--ok,
.dashboard-kpi--primary.dashboard-kpi--risk,
.dashboard-kpi--primary.dashboard-kpi--ok,
.dashboard-verdict--risk,
.dashboard-verdict--ok,
.hardening-score-card--ok,
.hardening-score-card--warn,
.hardening-score-card--risk,
.job-kpi-strip.network-inventory-kpis article.job-kpi--risk {
  background: var(--clr-surface) !important;
}

.dashboard-kpi--primary.dashboard-kpi--risk,
.dashboard-verdict--risk,
.customer-summary-primary--risk,
.hardening-score-card--risk {
  border-left-color: var(--clr-risk);
}

.dashboard-kpi--primary.dashboard-kpi--ok,
.dashboard-verdict--ok,
.customer-summary-primary--ok,
.agent-summary-primary--ok,
.hardening-score-card--ok {
  border-left-color: var(--clr-ok);
}

.customer-summary-primary--warn,
.agent-summary-primary--warn,
.hardening-score-card--warn {
  border-left-color: var(--clr-warn);
}

/* Secondary navigation reads as one control, with a quiet active state. */
.element-submenu {
  overflow: hidden;
}

.element-submenu-head {
  padding: 11px 14px 10px;
  background: var(--clr-surface);
}

.subnav {
  gap: 1px;
  padding: 5px 8px;
  border-bottom-color: var(--clr-border);
  background: var(--n-50);
}

.subnav-item {
  min-height: 30px;
  padding: 0 10px;
  color: var(--clr-muted);
  font-weight: 600;
}

.subnav-logo:not(.subnav-logo--microsoft) {
  background: transparent;
  color: var(--clr-muted);
}

.subnav-item:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--clr-text);
}

.subnav-item:hover .subnav-logo {
  color: var(--clr-text);
}

.subnav-item.active {
  font-weight: 600;
}

.subnav-item.active .subnav-logo:not(.subnav-logo--microsoft) {
  background: transparent;
  color: var(--clr-primary);
}

.settings-subnav {
  gap: 2px;
  padding: 3px;
  background: var(--n-50);
}

.settings-subnav-item {
  color: var(--clr-muted);
  font-weight: 600;
}

.settings-subnav-item.active {
  border-color: var(--clr-border);
  color: var(--clr-text);
  box-shadow: inset 0 -2px 0 var(--clr-primary);
}

/* Tables and filters: stable rhythm, low-contrast chrome. */
.data-table th,
.data-table td {
  border-bottom-color: var(--n-200);
}

.data-table th,
.mon-cust-table thead th {
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-weight: 700;
  letter-spacing: 0.035em;
}

.data-table tbody tr:hover > td,
.mon-cust-row:hover > td,
.mon-cust-row:focus-visible > td,
.dashboard-domain-row:hover,
.dashboard-domain-row.is-active {
  background: var(--n-25);
}

.filter-row,
.mon-toolbar,
.mon-table-wrap,
.dashboard-domain-table-wrap,
.dashboard-work-table-wrap {
  border-color: var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: none;
}

.filter-row,
.mon-toolbar {
  padding: 8px 10px;
}

.mon-toolbar {
  background: var(--clr-surface);
}

.mon-breakdown-item,
.mon-status-pill,
.mon-area,
.compact-stat-pill,
.status-badge,
.severity-badge,
.tree-count,
.system-pill,
.device-kind {
  border-color: var(--clr-border);
  background: var(--clr-surface-alt);
  box-shadow: none;
}

.mon-status-pill--risk,
.mon-area--risk,
.status-badge-critical,
.status-badge-offline {
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.mon-status-pill--warn,
.mon-area--warn,
.status-badge-warning {
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.mon-status-pill--ok,
.mon-area--ok,
.status-badge-ok,
.status-badge-online {
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.mon-dot--risk {
  box-shadow: none;
}

/* Controls stay crisp without competing with the content. */
button,
.action-button,
.mon-filter-toggle {
  box-shadow: none;
}

button:hover,
.action-button:hover,
.mon-filter-toggle:hover {
  box-shadow: none;
}

.action-button--ghost,
.mon-filter-toggle {
  border-color: var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-muted);
}

.action-button--ghost:hover,
.mon-filter-toggle:hover {
  border-color: var(--clr-border-mid);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
}

input,
select,
textarea {
  border-color: var(--clr-border-mid);
  background: var(--clr-surface);
  color: var(--clr-text);
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--clr-primary);
  outline: 2px solid color-mix(in srgb, var(--clr-primary) 18%, transparent);
  outline-offset: 0;
  box-shadow: none;
}

/* Respect reduced-motion preferences everywhere, including late-added views. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 900px) {
  .menu-bar {
    padding-inline: 8px;
  }

  .content {
    padding: 16px 12px 22px;
  }

  .content-head {
    margin-bottom: 12px;
    padding-bottom: 11px;
  }
}

/* ============================================================
   Monitoring sublevels (customer, device and domain views)
   ============================================================ */

.content--customer .customer-tab-pane {
  background: var(--clr-surface);
}

.content--customer .customer-tab-pane--inner,
.content--customer .customer-overview-layout,
.content--customer .customer-overview-work,
.content--customer .customer-overview-inventory,
.content--customer .customer-overview-modules {
  gap: 8px;
}

/* Customer KPIs read as one summary strip instead of six competing cards. */
.content--customer .customer-summary-band {
  grid-template-columns: minmax(160px, 0.9fr) minmax(0, 4fr);
  gap: 0;
  margin-bottom: 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  overflow: hidden;
}

.content--customer .customer-summary-primary,
.content--customer .customer-summary-fact {
  min-height: 56px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}

.content--customer .customer-summary-primary {
  padding: 7px 11px;
  border-left: 2px solid var(--clr-border-mid);
  border-right: 1px solid var(--clr-border);
}

.content--customer .customer-summary-primary--risk { border-left-color: var(--clr-risk); }
.content--customer .customer-summary-primary--warn { border-left-color: var(--clr-warn); }
.content--customer .customer-summary-primary--ok { border-left-color: var(--clr-ok); }

.content--customer .customer-summary-facts {
  gap: 0;
}

.content--customer .customer-summary-fact {
  padding: 7px 9px;
  border-right: 1px solid var(--clr-border);
}

.content--customer .customer-summary-fact:last-child {
  border-right: 0;
}

.content--customer .customer-summary-primary:hover,
.content--customer .customer-summary-fact:hover {
  background: var(--clr-surface-alt) !important;
}

.content--customer .customer-summary-primary strong {
  font-size: 1.25rem;
  font-weight: 700;
}

.content--customer .customer-summary-fact strong {
  font-size: 0.9rem;
  font-weight: 700;
}

.content--customer .customer-summary-primary span,
.content--customer .customer-summary-fact span {
  font-weight: 700;
}

/* Customer overview: sections are separated by rhythm, not nested card chrome. */
.content--customer .customer-overview-layout .detail-panel,
.content--customer .customer-overview-modules {
  padding: 12px 14px;
  border-color: var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.content--customer .customer-overview-block {
  gap: 7px;
}

.content--customer .customer-overview-block + .customer-overview-block {
  padding-top: 12px;
}

.content--customer .customer-overview-block-head strong {
  font-size: 0.84rem;
  font-weight: 700;
}

.content--customer .customer-overview-block-head span {
  font-size: 0.72rem;
  font-weight: 600;
}

/* Domain state uses a single dot cue. Repeated coloured rails were too loud. */
.content--customer .posture-domain-list {
  border-color: var(--clr-border);
  border-radius: var(--radius-md);
}

.content--customer .posture-domain-row {
  min-height: 42px;
  padding: 7px 11px;
  border-left: 0;
  border-bottom-color: var(--n-200);
}

.content--customer .posture-domain-row:hover {
  background: var(--clr-surface-alt);
}

.content--customer .posture-domain-row-main strong {
  font-weight: 600;
}

.content--customer .posture-domain-row-main small {
  font-weight: 500;
}

.content--customer .posture-domain-row em {
  font-size: 0.84rem;
  font-weight: 700;
}

.content--customer .posture-domain-row.posture-domain--ok .posture-domain-dot {
  opacity: 0.55;
}

.content--customer .coverage-row {
  border-color: var(--n-200);
  background: transparent;
}

.content--customer .coverage-bar {
  height: 5px;
  background: var(--n-200);
}

/* Device shell and all device domain tabs. */
.content--device .element-submenu {
  border-color: var(--clr-border);
  background: var(--clr-surface);
  box-shadow: none;
}

.content--device .subcontent {
  background: var(--clr-surface);
}

.content--device .filter-row,
.content--device .compact-toolbar-panel,
.content--device .devlog-main-toolbar,
.content--device .logviewer-toolbar {
  border-color: var(--clr-border);
  background: var(--clr-surface-alt);
  box-shadow: none;
}

/* Device status: one calm header with a grouped metric rail. */
.content--device .agent-status-header {
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-left-width: 1px;
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: none;
}

.content--device .agent-status-identity {
  gap: 9px;
}

.content--device .agent-status-badge {
  padding: 3px 8px;
  border-color: var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.content--device .agent-status-badge--ok { color: var(--clr-ok); }
.content--device .agent-status-badge--warn { color: var(--clr-warn); }
.content--device .agent-status-badge--offline { color: var(--clr-risk); }

.content--device .agent-status-dot {
  width: 7px;
  height: 7px;
  box-shadow: none;
}

.content--device .agent-status-host strong {
  font-size: 0.9rem;
  font-weight: 700;
}

.content--device .agent-status-host span,
.content--device .agent-status-snapshot {
  font-weight: 500;
}

.content--device .agent-status-metrics {
  gap: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  overflow: hidden;
}

.content--device .agent-status-metric {
  padding: 6px 9px;
  border: 0;
  border-right: 1px solid var(--clr-border);
  border-radius: 0;
  background: transparent;
}

.content--device .agent-status-metric:last-child {
  border-right: 0;
}

.content--device .agent-status-metric--warn,
.content--device .agent-status-metric--crit {
  border-color: var(--clr-border);
}

.content--device .agent-status-metric dt {
  font-weight: 600;
  letter-spacing: 0.035em;
}

.content--device .agent-status-metric dd {
  font-size: 0.84rem;
  font-weight: 700;
}

/* Operational domains on a device follow the same dot-only status pattern. */
.content--device .agent-area-status {
  gap: 5px;
  margin-bottom: 7px;
}

.content--device .agent-area-row {
  min-height: 42px;
  padding: 6px 9px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.content--device button.agent-area-row:hover {
  border-color: var(--clr-border-mid);
  background: var(--clr-surface-alt);
}

.content--device .agent-area-main strong {
  font-weight: 600;
}

.content--device .agent-area-main small {
  font-weight: 500;
}

.content--device .agent-area-row em {
  font-weight: 700;
}

.content--device .agent-area-row--ok .agent-area-dot {
  opacity: 0.55;
}

/* System details and hardware become simple grouped lists. */
.content--device .agent-overview-panel {
  gap: 8px;
  padding: 10px 12px;
  border-color: var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.content--device .agent-overview-head strong {
  font-weight: 700;
}

.content--device .agent-overview-head span {
  font-weight: 500;
}

.content--device .agent-detail-list {
  gap: 0;
  border-top: 1px solid var(--n-200);
}

.content--device .agent-detail-list div {
  padding: 7px 5px;
  border: 0;
  border-bottom: 1px solid var(--n-200);
  border-radius: 0;
  background: transparent;
}

.content--device .agent-detail-list dt {
  font-weight: 600;
}

.content--device .agent-detail-list dd {
  font-weight: 600;
}

.content--device .agent-section--fold,
.content--device .netdiag-card,
.content--device .agent-hw-panel {
  border-color: var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: none;
}

.content--device .agent-section--fold {
  border: 1px solid var(--clr-border);
}

.content--device .agent-section--fold > .agent-section-head {
  margin: 0;
  padding: 8px 11px;
  background: var(--clr-surface-alt);
}

.content--device .agent-section-head h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.content--device .agent-section-head span {
  font-weight: 500;
}

.content--device .agent-hw-grid {
  gap: 7px;
  margin: 0;
  padding: 8px;
}

.content--device .agent-hw-head {
  padding: 7px 10px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font-weight: 600;
  letter-spacing: 0;
}

.content--device .netdiag-card {
  border-left-width: 3px;
}

/* Dense domain tables retain information but stop alternating large fills. */
.content--customer .data-table tbody tr:nth-child(even) td,
.content--device .data-table tbody tr:nth-child(even) td {
  background: transparent;
}

.content--customer .data-table tbody tr:hover td,
.content--device .data-table tbody tr:hover td {
  background: var(--clr-surface-alt) !important;
}

.content--customer .data-table thead th,
.content--device .data-table thead th {
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-weight: 600;
}

@media (max-width: 900px) {
  .content--customer .customer-summary-band {
    grid-template-columns: 1fr;
  }

  .content--customer .customer-summary-primary {
    border-right: 0;
    border-bottom: 1px solid var(--clr-border);
  }

  .content--device .agent-status-metrics {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content--device .agent-status-metric {
    border-right: 0;
    border-bottom: 1px solid var(--clr-border);
  }
}

@media (max-width: 680px) {
  .content--customer .customer-summary-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content--customer .customer-summary-fact {
    border-right: 0;
    border-bottom: 1px solid var(--clr-border);
  }

  .content--customer .customer-summary-fact:nth-child(odd) {
    border-right: 1px solid var(--clr-border);
  }

  .content--customer .customer-summary-fact:last-child {
    border-bottom: 0;
    border-right: 0;
  }

  .content--device .agent-detail-list {
    grid-template-columns: 1fr;
  }
}
/* === Netzwerkscan: ruhige, listenbasierte Arbeitsansicht ===
   Eine zusammenhängende Fläche ersetzt das frühere Raster aus Status-,
   Fortschritts- und Reportkacheln. */
.external-scan-page--ai-only {
  gap: 0 !important;
}

.external-scan-page--ai-only > .qc-status-bar {
  min-height: 38px;
  padding: 0 2px 8px;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
  background: transparent;
}

.external-scan-page--ai-only .qc-status-bar-actions {
  margin-left: auto;
}

.external-scan-ai-card {
  margin: 10px 0 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.external-scan-ai-card > .external-scan-terminal-head {
  min-height: 66px;
  margin: 0;
  padding: 12px 15px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.external-scan-ai-card > .external-scan-terminal-head .eyebrow {
  display: block;
  margin: 0 0 2px;
  color: var(--clr-muted);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
}

.external-scan-ai-card > .external-scan-terminal-head h3 {
  font-size: 1rem;
}

.external-scan-ai-intro {
  margin: 3px 0 0;
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.external-scan-ai-card .external-scan-terminal-actions {
  flex-wrap: nowrap;
}

.external-scan-ai-card .external-scan-terminal-actions .action-button {
  min-height: 28px;
  padding: 3px 8px;
}

.external-scan-ai-card .external-scan-ai-form {
  margin: 0;
  padding: 11px 15px 12px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}

.external-scan-ai-card .external-scan-ai-live-progress--bar {
  margin: 0;
  padding: 8px 15px 9px;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
  background: var(--clr-surface);
}

.external-scan-ai-card--idle .external-scan-ai-live-progress--bar {
  display: none;
}

.external-scan-ai-card .external-scan-ai-live-progress-head {
  gap: 9px;
  margin-bottom: 6px;
}

.external-scan-ai-card .external-scan-ai-live-progress-head > span,
.external-scan-ai-card .external-scan-ai-live-progress-head strong,
.external-scan-ai-card .external-scan-ai-live-progress-head small,
.external-scan-ai-card .external-scan-ai-live-progress-meta {
  font-size: 0.66rem;
}

.external-scan-ai-card .external-scan-ai-live-progress-step {
  font-size: 0.78rem;
}

.external-scan-ai-card .external-scan-ai-progress-track {
  height: 4px;
  margin-bottom: 6px;
  border: 0;
  box-shadow: none;
}

.external-scan-ai-card .external-scan-ai-progress-track span {
  box-shadow: none;
}

.external-scan-ai-card .external-scan-ai-phasebar {
  height: 14px;
  border: 0;
  border-radius: 3px;
  background: var(--clr-surface-alt);
}

.external-scan-ai-card .external-scan-ai-phasebar-segment {
  min-width: 8px;
  padding: 0 2px;
  border-right-color: var(--clr-surface);
  font-size: 0.6rem;
  font-weight: 700;
}

.external-scan-ai-card .external-scan-ai-activity-pill[data-state="active"]::before,
.external-scan-page--ai-only .qc-live-indicator {
  animation: none;
  box-shadow: none;
}

.external-scan-ai-card .external-scan-ai-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
  gap: 0;
  align-items: stretch;
}

.external-scan-ai-main {
  padding: 10px 12px 12px;
}

.external-scan-ai-card .external-scan-terminal-toolbar {
  display: flex;
  min-height: 24px;
  margin: 0;
  padding: 0 2px 7px;
  font-size: 0.66rem;
}

.external-scan-ai-card .external-scan-ai-terminal-container {
  height: clamp(180px, 23vh, 270px);
  min-height: 180px;
  border-color: var(--n-900);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: height 180ms ease;
}

.external-scan-ai-card--active .external-scan-ai-terminal-container {
  height: clamp(300px, 43vh, 560px);
}

.external-scan-ai-card .external-scan-ai-status-pane {
  gap: 0;
  max-height: none;
  padding: 10px 13px 12px;
  overflow: visible;
  border-left: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}

.external-scan-ai-card .external-scan-ai-status-head {
  min-height: 26px;
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
  background: transparent;
}

.external-scan-ai-card .external-scan-ai-status-head span {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

.external-scan-ai-card .external-scan-ai-status-head strong {
  font-size: 0.72rem;
}

.external-scan-ai-card .external-scan-ai-progress {
  display: block;
  margin: 0;
}

.external-scan-ai-card .external-scan-ai-progress > div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  min-height: 29px;
  align-items: baseline;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--clr-border) 76%, transparent);
  border-radius: 0;
  background: transparent;
}

.external-scan-ai-card .external-scan-ai-progress dt,
.external-scan-ai-card .external-scan-ai-progress dd {
  margin: 0;
}

.external-scan-ai-card .external-scan-ai-progress dt {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.external-scan-ai-card .external-scan-ai-progress dd {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
}

.external-scan-ai-card .external-scan-ai-live-findings {
  gap: 0;
  margin-top: 8px;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px solid var(--clr-border);
  border-radius: 0;
  background: transparent;
}

.external-scan-ai-card .external-scan-ai-live-findings > p {
  padding: 5px 0 1px;
  font-size: 0.72rem;
}

.external-scan-ai-card .external-scan-ai-live-finding-list {
  gap: 0;
  margin-top: 5px;
}

.external-scan-ai-card .external-scan-ai-live-finding {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 2px 7px;
  padding: 7px 0 7px 8px;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: 0;
  background: transparent;
}

.external-scan-ai-card .external-scan-ai-live-finding strong {
  font-size: 0.72rem;
}

.external-scan-ai-card .external-scan-ai-live-finding p {
  grid-column: 2;
  font-size: 0.66rem;
  -webkit-line-clamp: 2;
}

.external-scan-ai-card .external-scan-ai-process-fold {
  margin-top: 8px;
  border: 0;
  border-top: 1px solid var(--clr-border);
  border-radius: 0;
  background: transparent;
}

.external-scan-ai-card .external-scan-ai-process-fold > summary {
  min-height: 28px;
  padding: 7px 0 0;
  font-size: 0.6rem;
}

.external-scan-ai-card .external-scan-ai-processes {
  padding: 7px 0 0;
  border: 0;
}

.external-scan-ai-card .external-scan-ai-report {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--clr-border);
  border-radius: 0;
  background: var(--clr-surface);
}

.external-scan-ai-card .external-scan-ai-report-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
}

.external-scan-ai-card .external-scan-ai-report-head h3 {
  font-size: 0.78rem;
}

.external-scan-ai-card .external-scan-ai-report-head small,
.external-scan-ai-card .external-scan-ai-report-line {
  font-size: 0.66rem;
}

.external-scan-ai-card .external-scan-ai-report-actions .action-button {
  min-height: 26px;
  padding: 2px 7px;
  font-size: 0.66rem;
}

.external-scan-ai-card .external-scan-ai-report-line {
  padding: 0 14px 9px;
}

.external-scan-ai-report-details {
  border-top: 1px solid var(--clr-border);
}

.external-scan-ai-report-details:has(.external-scan-ai-report-preview[hidden]) {
  display: none;
}

.external-scan-ai-report-details > summary {
  padding: 8px 14px;
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
}

.external-scan-ai-card .external-scan-ai-report-preview {
  padding: 0 14px 12px;
  border: 0;
  background: transparent;
}

.external-scan-ai-card .external-scan-ai-report-preview-grid {
  display: flex;
  gap: 0;
  margin: 0 0 8px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
}

.external-scan-ai-card .external-scan-ai-report-preview-grid > div {
  flex: 1 1 0;
  padding: 7px 9px;
  border: 0;
  border-right: 1px solid var(--clr-border);
  border-radius: 0;
}

.external-scan-ai-card .external-scan-ai-report-preview-grid > div:last-child {
  border-right: 0;
}

.external-scan-ai-card .external-scan-ai-report-card {
  padding: 8px 10px;
  border-width: 0 0 0 2px;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 980px) {
  .external-scan-ai-card .external-scan-ai-workspace {
    grid-template-columns: 1fr;
  }

  .external-scan-ai-card .external-scan-ai-status-pane {
    border-top: 1px solid var(--clr-border);
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .external-scan-page--ai-only > .qc-status-bar {
    padding-bottom: 7px;
  }

  .external-scan-ai-card > .external-scan-terminal-head,
  .external-scan-ai-card .external-scan-terminal-actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .external-scan-ai-card .external-scan-ai-report-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .external-scan-ai-card .external-scan-ai-report-preview-grid > div {
    border-bottom: 1px solid var(--clr-border);
  }
}

.external-scan-severity-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 7px 10px;
}

.external-scan-severity-summary-label {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.external-scan-severity-summary dl {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  margin: 0;
}

.external-scan-severity-summary-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 9px;
  border-left: 1px solid var(--clr-border);
  color: var(--clr-muted);
}

.external-scan-severity-summary-item dt,
.external-scan-severity-summary-item dd {
  margin: 0;
  font-size: 0.66rem;
}

.external-scan-severity-summary-item dt {
  font-weight: 600;
}

.external-scan-severity-summary-item dd {
  color: var(--clr-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.external-scan-severity-summary-item--critical.has-value dd,
.external-scan-severity-summary-item--high.has-value dd {
  color: var(--clr-risk);
}

.external-scan-severity-summary-item--medium.has-value dd {
  color: var(--clr-warn);
}

@media (max-width: 720px) {
  .external-scan-severity-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .external-scan-severity-summary dl {
    flex-wrap: wrap;
    row-gap: 5px;
  }
}

/* ============================================================
   Final interaction and reflow contracts

   These rules intentionally live after the legacy/calm layers: both layers
   still contain shell and table declarations, so responsive and accessibility
   behavior must win the source-order cascade.
   ============================================================ */

.data-table th.sort-header[data-sort-enhanced="true"] {
  padding: 0;
  cursor: default;
}

.data-table th.sort-header[data-sort-enhanced="true"]::after {
  content: none;
}

.data-table th.sort-header > .table-sort-button {
  width: 100%;
  min-height: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 9px 22px 9px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.compact-table th.sort-header > .table-sort-button {
  padding: 6px 20px 6px 9px;
}

.data-table th.sort-header > .table-sort-button::after {
  content: "↕";
  position: absolute;
  right: 8px;
  opacity: 0.42;
  color: currentColor;
  font-size: 0.78em;
}

.data-table th.sort-header[aria-sort="ascending"] > .table-sort-button::after {
  content: "↑";
  opacity: 1;
  color: var(--clr-primary);
}

.data-table th.sort-header[aria-sort="descending"] > .table-sort-button::after {
  content: "↓";
  opacity: 1;
  color: var(--clr-primary);
}

.data-table th.sort-header > .table-sort-button:hover {
  background: var(--clr-subtle);
  color: var(--clr-text);
}

.data-table th.sort-header > .table-sort-button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .menu-bar {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    padding: 12px;
  }

  .main-menu,
  .global-search-wrap,
  .global-search-input {
    width: 100%;
  }

  .global-search-wrap {
    flex: 0 0 auto;
    min-width: 0;
  }

  .main-menu,
  .user-menu {
    flex-wrap: wrap;
  }

  .workspace {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-tree {
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: 42vh;
    border-right: 0;
    border-bottom: 1px solid var(--clr-border);
  }

  .content {
    min-width: 0;
  }
}

/* ============================================================
   Design-Erneuerung (2026-08) — Variante B

   Baut ausschließlich auf den Tokens aus styles/tokens.css auf.
   Ziel: Status ist auf einen Blick scanbar, Bedienelemente sind
   einheitlich gestaltet, und Hierarchie entsteht durch eine feste
   Typo-Skala statt durch 105 Ad-hoc-Schriftgrößen.

   Dieser Block steht bewusst am Dateiende: er ersetzt die ältere
   „Calm interface layer"-Schicht bei gleicher Spezifität.
   ============================================================ */

/* ── Navigation ───────────────────────────────────────────────
   Aktiver Bereich als heller Chip auf dunklem Grund — der zuvor
   nur 4 % hellere Hintergrund war kaum vom Ruhezustand zu
   unterscheiden. */
.menu-bar {
  min-height: 52px;
  padding: 0 var(--sp-4);
}

.brand strong {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.main-menu {
  gap: var(--sp-1);
}

.menu-item {
  min-height: 34px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background var(--t-fast), color var(--t-fast);
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--n-0);
}

.menu-item.active {
  background: var(--n-0);
  border-color: var(--n-0);
  color: var(--clr-nav);
  box-shadow: var(--shadow-xs);
}

.menu-item.active .subnav-logo,
.menu-item.active .ui-icon {
  background: color-mix(in srgb, var(--clr-nav) 10%, transparent);
  color: var(--clr-nav);
}

/* ── Bedienelemente ──────────────────────────────────────────
   Primär, Sekundär und Eingaben teilen Höhe, Radius und Schrift,
   damit Formularzeilen auf einer Linie sitzen. */
.action-button {
  min-height: 36px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--clr-primary);
  border: 1px solid var(--clr-primary);
  color: var(--n-0);
  box-shadow: var(--shadow-xs);
}

.action-button:not(:disabled):hover {
  background: var(--clr-primary-dark);
  border-color: var(--clr-primary-dark);
}

.action-button--ghost {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  color: var(--clr-primary);
  box-shadow: none;
}

.action-button--ghost:not(:disabled):hover {
  background: var(--clr-info-bg);
  border-color: var(--clr-primary);
  color: var(--clr-primary-dark);
}

.action-button--danger {
  background: var(--clr-risk);
  border-color: var(--clr-risk);
  color: var(--n-0);
}

.action-button--danger:not(:disabled):hover {
  background: color-mix(in srgb, var(--clr-risk) 82%, var(--n-900));
  border-color: color-mix(in srgb, var(--clr-risk) 82%, var(--n-900));
}

/* Eingaben waren bisher weitgehend Browser-Default und passten in
   Höhe und Radius nicht zu den Buttons daneben. */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
select,
textarea {
  min-height: 36px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-family: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

textarea {
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.5;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: var(--focus-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--clr-xmuted);
}

/* ── Status ──────────────────────────────────────────────────
   „Akut" und „Prüfen" als Vollfläche: Der Zustand muss über eine
   ganze Tabelle hinweg erkennbar sein, ohne Zeile für Zeile zu
   lesen. „OK" bleibt bewusst zurückhaltend. */
.mon-status-pill {
  min-height: 24px;
  border: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mon-status-pill--risk {
  background: var(--clr-risk);
  color: var(--n-0);
}

.mon-status-pill--warn {
  background: var(--clr-warn);
  color: var(--n-0);
}

.mon-status-pill--ok {
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clr-ok) 25%, transparent);
}

/* Der Punkt ist neben der eingefärbten Fläche redundant. */
.mon-status-pill--risk .mon-dot,
.mon-status-pill--warn .mon-dot {
  display: none;
}

/* ── Monitoring-Flächen ──────────────────────────────────────
   Etwas mehr Luft und eine ruhigere Tabellenkopfzeile. */

.mon-table-wrap {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.mon-cust-table thead th {
  padding: var(--sp-3);
  background: var(--clr-surface-alt);
  color: var(--clr-xmuted);
  font-size: var(--fs-2xs);
  letter-spacing: 0.05em;
}

.mon-cust-row > td {
  padding: var(--sp-3);
}

.mon-cust-name strong {
  font-size: var(--fs-sm);
}

.mon-cust-name small {
  font-size: var(--fs-2xs);
}

/* ── Diagnose (QTC) ──────────────────────────────────────────
   Gleiche Bedienlogik wie im Monitoring: Provider-Umschalter und
   Statuspille übernehmen Radius, Schrift und Fokusring. */
.bastion-provider-btn {
  font-size: var(--fs-sm);
}

.bastion-provider-btn.active {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--n-0);
}

.bastion-tool-btn {
  font-size: var(--fs-xs);
}

.bastion-terminal-search {
  min-height: 26px;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
}

.bastion-terminal-search:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-accent) 26%, transparent);
}

/* Terminal-Toolbar bleibt dunkel — dort gelten eigene Flächenfarben,
   damit der Übergang zum xterm-Screen nahtlos wirkt. */
.bastion-toolbar .bastion-terminal-search {
  background: var(--n-900);
  color: var(--n-200);
  border-color: var(--n-900);
}

/* ── Sekundäre Aktionen ──────────────────────────────────────
   Der generische button-Stil füllt jede Schaltfläche mit der
   Markenfarbe. In dichten Listen wirkten damit zwanzig gleichwertige
   „Öffnen"-Knöpfe wie zwanzig Primäraktionen. Tabellen- und
   Werkzeugaktionen treten deshalb zurück; die Markenfarbe bleibt
   echten Primäraktionen vorbehalten. */
.table-action {
  min-height: 26px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-primary);
  font-size: var(--fs-2xs);
  font-weight: 700;
  box-shadow: none;
}

.table-action:not(:disabled):hover {
  background: var(--clr-info-bg);
  border-color: var(--clr-primary);
  color: var(--clr-primary-dark);
  box-shadow: none;
}

/* Hover-Schatten folgte einer Teal-Palette, die es nicht mehr gibt. */
button:hover {
  box-shadow: var(--shadow-xs);
}

/* ── Firewall: Problem-Fokus und Sicherheitspakete ────────────
   Der Fokus steht über dem Widget-Raster und beantwortet zuerst
   „was ist gerade kaputt?" — die Findings-Liste selbst bleibt
   unten als vollständige Referenz. */
.fw-focus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-ok);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}
.fw-focus--risk { border-left-color: var(--clr-risk); }
.fw-focus--warn { border-left-color: var(--clr-warn); }
.fw-focus--info { border-left-color: var(--clr-info); }
.fw-focus--ok   { border-left-color: var(--clr-ok); }
.fw-focus--unknown { border-left-color: var(--clr-muted); }

.fw-focus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
}
.fw-focus--risk .fw-focus-icon { background: var(--clr-risk-bg); color: var(--clr-risk); }
.fw-focus--warn .fw-focus-icon { background: var(--clr-warn-bg); color: var(--clr-warn); }
.fw-focus--ok   .fw-focus-icon { background: var(--clr-ok-bg);   color: var(--clr-ok); }

.fw-focus-text { display: grid; gap: 1px; min-width: 0; }
.fw-focus-text strong { font-size: var(--fs-md); font-weight: 700; color: var(--clr-text); }
.fw-focus--risk .fw-focus-text strong { color: var(--clr-risk); }
.fw-focus-text small { font-size: var(--fs-xs); font-weight: 700; color: var(--clr-muted); }

.fw-focus-list {
  grid-column: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}
.fw-focus-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}
.fw-focus-item--critical { background: var(--clr-risk-bg); }
.fw-focus-item--high { background: var(--clr-warn-bg); }
.fw-focus-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fw-focus-area {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
  white-space: nowrap;
}

/* Suricata / pfBlockerNG: „nicht installiert" ist neutral, nur ein
   installiertes-aber-gestopptes Paket ist ein Betriebsproblem. */
.fw-security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3);
}
.fw-security-card {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.fw-security-card--ok   { border-left-color: var(--clr-ok); }
.fw-security-card--warn { border-left-color: var(--clr-warn); }
.fw-security-card--risk { border-left-color: var(--clr-risk); background: var(--clr-risk-bg); }
.fw-security-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.fw-security-head strong { font-size: var(--fs-sm); font-weight: 700; color: var(--clr-text); }
.fw-security-detail { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--clr-muted); }
.fw-security-version {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-xmuted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .fw-focus { grid-template-columns: auto minmax(0, 1fr); }
  .fw-focus-list { grid-column: 1 / -1; }
  .fw-focus-item { grid-template-columns: auto minmax(0, 1fr); }
  .fw-focus-area { display: none; }
}

/* Interface-Laufzeitwerte: MTU, Fehlerzähler und Linkmedium. Fehler waren
   bisher nur als Finding sichtbar, nicht am betroffenen Interface selbst. */
.fw-interface-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  align-items: center;
}
.fw-interface-fact {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  white-space: nowrap;
}
.fw-interface-fact small {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-xmuted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fw-interface-fact strong {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.fw-interface-fact--warn { background: var(--clr-warn-bg); }
.fw-interface-fact--warn strong { color: var(--clr-warn); }
.fw-interface-fact--risk { background: var(--clr-risk-bg); }
.fw-interface-fact--risk strong { color: var(--clr-risk); }

/* Interface-Karte trägt jetzt eine Spalte mehr (Laufzeitwerte). Das alte
   4-Spalten-Raster ließ den Status-Badge umbrechen. */
.fw-interface-card {
  grid-template-columns: auto minmax(90px, .7fr) minmax(120px, 1fr) minmax(0, auto) auto;
}
.fw-interface-card .fw-interface-facts { justify-content: flex-end; }

@media (max-width: 900px) {
  .fw-interface-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .fw-interface-card .fw-interface-facts {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
}

/* ── Sprung-Kontext in der Geräteansicht ──────────────────────
   Ein Klick auf einen Vorfall landete bisher nur im richtigen Tab; welcher
   Befund gemeint war, musste dort neu gesucht werden. Das Band benennt den
   auslösenden Befund, markiert ihn und hält den Rückweg offen. */
.device-jump-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-2) var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--clr-primary) 30%, var(--clr-border));
  border-left: 2px solid var(--clr-primary);
  border-radius: var(--radius-md);
  background: var(--clr-info-bg);
}
.device-jump-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--clr-primary);
  color: var(--n-0);
  font-weight: 700;
  font-size: var(--fs-xs);
  flex-shrink: 0;
}
.device-jump-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.device-jump-text small {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.device-jump-text strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.device-jump-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* Markierter Befund: kurz pulsierender Rahmen, danach dauerhaft dezent
   hervorgehoben, damit er beim Scrollen wiederfindbar bleibt. */
.device-jump-target {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 22%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .device-jump-target { animation: none; }
}

@media (max-width: 760px) {
  .device-jump-banner { flex-wrap: wrap; }
  .device-jump-actions { width: 100%; justify-content: flex-start; }
}

/* Signale ohne Daten: eingeklappt und optisch zurückgenommen. Sie sagen nichts
   über den Tenant aus, füllten aber bei unvollständigen Permissions den halben
   Bildschirm und verdrängten die echten Befunde. */
.m365-unknown-group > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.m365-unknown-hint {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-xmuted);
}
.m365-unknown-group[open] > summary { margin-bottom: var(--sp-1); }
.m365-unknown-group .m365-signal-item { opacity: 0.72; }
.m365-signal-empty { padding: var(--sp-3); margin: 0; }

/* Veralteter Tenant-Sync: "connected" allein sagt nichts über die Datenfrische.
   Ein Tenant kann verbunden sein und trotzdem seit Wochen nichts geliefert
   haben — dann bewertet die Übersicht einen alten Stand. */
.m365-ts-item--warn { color: var(--clr-warn); font-weight: 700; }
.m365-ts-item--risk { color: var(--clr-risk); font-weight: 700; }
.m365-ts-item--warn .m365-ts-key,
.m365-ts-item--risk .m365-ts-key { color: inherit; opacity: 0.8; }

/* Kennzahlen ohne Messwert zu einer Kachel zusammengefasst. */
.m365-headline-tile--muted {
  opacity: 0.6;
  border-style: dashed;
}
.m365-headline-empty {
  margin: 0;
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-muted);
}

/* Nachschlagetabelle der Bereiche: eingeklappt, damit die Übersicht den
   Tenant-Zustand zeigt statt Handbuchinhalt. */
.m365-area-boundaries > summary {
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.m365-area-boundaries > summary::before {
  content: "▸";
  color: var(--clr-xmuted);
  font-size: var(--fs-2xs);
}
.m365-area-boundaries[open] > summary::before { content: "▾"; }
.m365-area-boundaries > summary::-webkit-details-marker { display: none; }
.m365-area-boundaries > summary:hover { border-color: var(--clr-primary); }
.m365-area-boundaries[open] > summary { margin-bottom: var(--sp-2); }

/* KI-Scan: persistente Job-Warteschlange mit Findings-first Detailansicht. */
.external-scan-ai-card .external-scan-ai-form {
  grid-template-columns: minmax(170px, .75fr) minmax(150px, .55fr) minmax(160px, .65fr) minmax(280px, 1.35fr) auto;
  gap: var(--sp-2);
}

.external-scan-ai-card .external-scan-ai-form label,
.external-scan-ai-card .external-scan-ai-mode-field > span {
  font-size: var(--fs-xs);
}

.external-scan-ai-card .external-scan-ai-form input,
.external-scan-ai-card .external-scan-ai-form select,
.external-scan-ai-card .external-scan-ai-form textarea {
  min-height: 36px;
  font-size: var(--fs-sm);
}

.external-scan-ai-form-note,
.external-scan-ai-card .external-scan-ai-form > .form-message {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-xs);
}

.external-scan-ai-form-note { color: var(--clr-muted); }

.external-scan-ai-jobs-workspace {
  min-width: 0;
  background: var(--clr-surface-alt);
}

.external-scan-ai-queue-summary {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 58px;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.external-scan-ai-queue-summary > div {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  min-width: 104px;
  padding: var(--sp-3) var(--sp-4);
  border-right: 1px solid var(--clr-border);
}

.external-scan-ai-queue-summary > div:first-child { padding-left: 0; }
.external-scan-ai-queue-summary strong { font-size: var(--fs-lg); }
.external-scan-ai-queue-summary span { color: var(--clr-muted); font-size: var(--fs-xs); font-weight: 700; }
.external-scan-ai-queue-summary p {
  align-self: center;
  margin: 0 0 0 auto;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.external-scan-ai-jobs-layout {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  min-height: 440px;
}

.external-scan-ai-job-list {
  min-width: 0;
  border-right: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.external-scan-ai-job-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
}

.external-scan-ai-job-list-head .eyebrow,
.external-scan-ai-findings-head .eyebrow { margin: 0 0 2px; font-size: var(--fs-2xs); }
.external-scan-ai-job-list-head h3,
.external-scan-ai-findings-head h3 { margin: 0; font-size: var(--fs-md); }
.external-scan-ai-job-list-head > span {
  min-width: 28px;
  padding: 3px var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--clr-subtle);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}

.external-scan-ai-job-select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}

.external-scan-ai-job-select-head label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 24px;
  color: var(--clr-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.external-scan-ai-job-select-head small {
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  text-align: right;
}

.external-scan-ai-job-bulkbar {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-risk-bg);
}

.external-scan-ai-job-bulkbar > strong { font-size: var(--fs-sm); }
.external-scan-ai-job-bulkbar > div { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.external-scan-ai-job-bulkbar .action-button { min-height: 34px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.external-scan-ai-job-bulkbar > small { color: var(--clr-muted); font-size: var(--fs-2xs); line-height: 1.4; }

.external-scan-ai-job-rows {
  max-height: 72vh;
  overflow: auto;
}

.external-scan-ai-job-pagination {
  display: grid;
  justify-items: stretch;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}

.external-scan-ai-job-pagination:focus { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
.external-scan-ai-job-pagination p {
  margin: 0;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.external-scan-ai-job-pagination .external-scan-ai-job-pagination-error { color: var(--clr-danger); }
.external-scan-ai-job-pagination .action-button { width: 100%; }
.external-scan-ai-job-pagination .action-button[aria-disabled="true"] { cursor: progress; opacity: .7; }

.external-scan-ai-job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  background: transparent;
  color: var(--clr-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}

.external-scan-ai-job-row-shell {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--t-fast);
}

.external-scan-ai-job-row-shell.is-marked { background: var(--clr-risk-bg); }
.external-scan-ai-job-row-shell > .external-scan-ai-job-row { padding-left: var(--sp-2); border-bottom: 0; }
.external-scan-ai-job-select-target {
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: stretch;
  min-width: 34px;
  min-height: 34px;
  cursor: pointer;
}
.external-scan-ai-job-select-target:has(.external-scan-ai-job-select:disabled) { cursor: not-allowed; }
.external-scan-ai-job-select-placeholder {
  align-self: center;
  justify-self: center;
}
.external-scan-ai-job-select { width: 16px; height: 16px; accent-color: var(--clr-risk); cursor: pointer; }
.external-scan-ai-job-select:disabled { cursor: not-allowed; opacity: .55; }

.external-scan-ai-job-row:hover { background: var(--clr-surface-alt); }
.external-scan-ai-job-row:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
.external-scan-ai-job-list-head:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
.external-scan-ai-job-row.is-selected {
  background: var(--clr-info-bg);
  box-shadow: inset 3px 0 0 var(--clr-primary);
}

.external-scan-ai-job-row-main,
.external-scan-ai-job-row-phase,
.external-scan-ai-job-row-findings,
.external-scan-ai-job-row-status {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.external-scan-ai-job-row-main strong,
.external-scan-ai-job-row-phase strong { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.external-scan-ai-job-row small { overflow: hidden; color: var(--clr-muted); font-size: var(--fs-2xs); text-overflow: ellipsis; white-space: nowrap; }
.external-scan-ai-job-row-status { align-items: flex-end; }
.external-scan-ai-job-row-findings { align-items: flex-end; justify-content: flex-end; }
.external-scan-ai-job-row-findings strong { font-size: var(--fs-md); }

.external-scan-ai-job-detail {
  min-width: 0;
  padding: var(--sp-4);
  background: var(--clr-surface-alt);
}

.external-scan-ai-job-detail--empty { display: grid; place-items: center; }
.external-scan-ai-job-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--clr-surface);
}

.external-scan-ai-job-hero .eyebrow { margin: 0 0 var(--sp-1); font-size: var(--fs-2xs); }
.external-scan-ai-job-hero h2 { margin: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.external-scan-ai-job-hero p { margin: var(--sp-1) 0 0; color: var(--clr-muted); font-size: var(--fs-xs); }
.external-scan-ai-job-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }

.external-scan-ai-job-state {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--clr-border);
  border-top: 0;
  background: var(--clr-surface);
}

.external-scan-ai-job-state-copy { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 1; }
.external-scan-ai-job-state-copy strong { font-size: var(--fs-sm); }
.external-scan-ai-job-state-copy > span:last-child { overflow: hidden; color: var(--clr-muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.external-scan-ai-job-state > span { color: var(--clr-muted); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }

.external-scan-ai-job-progress {
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-top: 0;
  background: var(--clr-subtle);
}

.external-scan-ai-job-progress > span { display: block; height: 100%; background: var(--clr-primary); transition: width var(--t-base); }

.external-scan-ai-card .external-scan-ai-job-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--sp-4);
  border: 1px solid var(--clr-border);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--clr-surface);
}

.external-scan-ai-card .external-scan-ai-job-meta > div {
  display: block;
  min-height: 58px;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-right: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

.external-scan-ai-card .external-scan-ai-job-meta dt { margin-bottom: var(--sp-1); font-size: var(--fs-2xs); }
.external-scan-ai-card .external-scan-ai-job-meta dd { font-size: var(--fs-xs); }
.external-scan-ai-card .external-scan-ai-job-meta--wide { grid-column: span 3; }

.external-scan-ai-findings {
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}

.external-scan-ai-findings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
}

.external-scan-ai-findings-head h3 span { color: var(--clr-muted); font-size: var(--fs-xs); font-weight: 700; }
.external-scan-ai-finding-filters { display: flex; gap: var(--sp-2); }
.external-scan-ai-finding-filters input,
.external-scan-ai-finding-filters select {
  min-height: 34px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: var(--fs-xs);
}

.external-scan-ai-severity-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}

.external-scan-ai-severity-filters button {
  min-height: 30px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: capitalize;
  cursor: pointer;
}

.external-scan-ai-severity-filters button[aria-pressed="true"] { border-color: var(--clr-primary); background: var(--clr-info-bg); color: var(--clr-primary-dark); }
.external-scan-ai-severity-filters button span { margin-left: var(--sp-1); }
.external-scan-ai-truncation-note {
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--clr-warn);
  background: var(--clr-warn-bg);
  color: var(--clr-text);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.external-scan-ai-finding-list { display: grid; gap: 0; }

.external-scan-ai-finding-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  border-bottom: 1px solid var(--clr-border);
}

.external-scan-ai-finding-card:last-child { border-bottom: 0; }
.external-scan-ai-finding-severity {
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--clr-border);
  background: var(--clr-info-bg);
}

.external-scan-ai-finding-severity span { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; }
.external-scan-ai-finding-card--critical .external-scan-ai-finding-severity,
.external-scan-ai-finding-card--high .external-scan-ai-finding-severity { background: var(--clr-risk-bg); color: var(--clr-risk); }
.external-scan-ai-finding-card--medium .external-scan-ai-finding-severity { background: var(--clr-warn-bg); color: var(--clr-warn); }
.external-scan-ai-finding-card--low .external-scan-ai-finding-severity { background: var(--clr-ok-bg); color: var(--clr-ok); }
.external-scan-ai-finding-copy { min-width: 0; padding: var(--sp-3) var(--sp-4); }
.external-scan-ai-finding-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.external-scan-ai-finding-title strong { font-size: var(--fs-sm); }
.external-scan-ai-finding-title span { color: var(--clr-muted); font-size: var(--fs-2xs); white-space: nowrap; }
.external-scan-ai-finding-copy > p { margin: var(--sp-2) 0; color: var(--clr-muted); font-size: var(--fs-xs); line-height: 1.5; overflow-wrap: anywhere; }
.external-scan-ai-finding-copy dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; }
.external-scan-ai-finding-copy dl div { min-width: 0; }
.external-scan-ai-finding-copy dt { color: var(--clr-muted); font-size: var(--fs-2xs); font-weight: 700; }
.external-scan-ai-finding-copy dd { margin: 2px 0 0; overflow: hidden; font-size: var(--fs-xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.external-scan-ai-finding-copy details { margin-top: var(--sp-2); font-size: var(--fs-xs); }
.external-scan-ai-finding-copy details p { white-space: normal; }
.external-scan-ai-finding-evidence pre {
  max-height: 240px;
  margin: var(--sp-2) 0 0;
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  padding: var(--sp-3);
  color: var(--clr-text);
  font: 500 var(--fs-2xs)/1.55 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.external-scan-ai-finding-evidence > p { margin: var(--sp-2) 0 0; color: var(--clr-muted); }

.external-scan-ai-evidence-panels {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.external-scan-ai-tool-coverage,
.external-scan-ai-evidence-panels .external-scan-ai-technical-log {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}

.external-scan-ai-tool-coverage > summary,
.external-scan-ai-evidence-panels .external-scan-ai-technical-log > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: var(--sp-2) var(--sp-4);
  color: var(--clr-text);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.external-scan-ai-tool-coverage > summary span { color: var(--clr-muted); font-weight: 700; }
.external-scan-ai-tool-coverage-body { max-height: 420px; overflow: auto; }
.external-scan-ai-tool-coverage-summary { margin: 0; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--clr-border); color: var(--clr-muted); font-size: var(--fs-xs); line-height: 1.45; }
.external-scan-ai-tool-list,
.external-scan-ai-phase-coverage ol { margin: 0; padding: 0; list-style: none; }
.external-scan-ai-tool,
.external-scan-ai-phase-coverage li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--clr-border); }
.external-scan-ai-tool > div,
.external-scan-ai-phase-coverage li > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.external-scan-ai-tool strong,
.external-scan-ai-phase-coverage strong { overflow: hidden; font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.external-scan-ai-tool small,
.external-scan-ai-phase-coverage small { color: var(--clr-muted); font-size: var(--fs-2xs); line-height: 1.35; }
.external-scan-ai-tool > span,
.external-scan-ai-phase-coverage li > span { flex: 0 0 auto; color: var(--clr-muted); font-size: var(--fs-2xs); font-weight: 700; }
.external-scan-ai-tool--missing > span,
.external-scan-ai-tool--error > span { color: var(--clr-risk); }
.external-scan-ai-tool--timeout > span { color: var(--clr-warn); }
.external-scan-ai-tool--running > span { color: var(--clr-primary); }
.external-scan-ai-tool--success { opacity: .82; }
.external-scan-ai-phase-coverage h4 { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--clr-border); font-size: var(--fs-xs); }

.external-scan-ai-technical-log {
  margin-top: var(--sp-4);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}

.external-scan-ai-technical-log > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: var(--sp-2) var(--sp-4);
  color: var(--clr-text);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.external-scan-ai-technical-log > summary span { color: var(--clr-muted); font-weight: 700; }
.external-scan-ai-technical-log > .external-scan-ai-truncation-note { border-bottom-color: var(--clr-border); }
.external-scan-ai-technical-log pre {
  max-height: 420px;
  margin: 0;
  padding: var(--sp-4);
  overflow: auto;
  background: var(--n-900);
  color: var(--b-100);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1240px) {
  .external-scan-ai-card .external-scan-ai-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .external-scan-ai-focus { grid-column: 1 / 3; }
  .external-scan-ai-actions { grid-column: 3; }
}

@media (max-width: 980px) {
  .external-scan-ai-jobs-layout { grid-template-columns: 1fr; }
  .external-scan-ai-evidence-panels { grid-template-columns: 1fr; }
  .external-scan-ai-job-list { border-right: 0; border-bottom: 1px solid var(--clr-border); }
  .external-scan-ai-job-rows { max-height: 300px; }
  .external-scan-ai-queue-summary { overflow-x: auto; }
  .external-scan-ai-queue-summary p { min-width: 180px; padding-left: var(--sp-4); }
}

@media (max-width: 720px) {
  .external-scan-ai-card .external-scan-ai-form { grid-template-columns: 1fr; }
  .external-scan-ai-focus,
  .external-scan-ai-actions { grid-column: 1; }
  .external-scan-ai-actions .action-button { width: 100%; }
  .external-scan-ai-queue-summary { padding: 0 var(--sp-3); }
  .external-scan-ai-queue-summary > div { min-width: 88px; padding: var(--sp-3); }
  .external-scan-ai-job-detail { padding: var(--sp-2); }
  .external-scan-ai-job-select-head { align-items: flex-start; flex-direction: column; }
  .external-scan-ai-job-select-head small { text-align: left; }
  .external-scan-ai-job-bulkbar > div { display: grid; grid-template-columns: 1fr; }
  .external-scan-ai-job-bulkbar .action-button { width: 100%; }
  .external-scan-ai-job-hero,
  .external-scan-ai-findings-head { align-items: stretch; flex-direction: column; }
  .external-scan-ai-job-actions { justify-content: flex-start; }
  .external-scan-ai-job-state-copy { align-items: flex-start; flex-direction: column; }
  .external-scan-ai-job-state-copy > span:last-child { white-space: normal; }
  .external-scan-ai-card .external-scan-ai-job-meta { grid-template-columns: 1fr 1fr; }
  .external-scan-ai-card .external-scan-ai-job-meta--wide { grid-column: span 2; }
  .external-scan-ai-finding-filters { align-items: stretch; flex-direction: column; }
  .external-scan-ai-finding-card { grid-template-columns: 1fr; }
  .external-scan-ai-finding-severity { padding: var(--sp-2) var(--sp-3); border-right: 0; border-bottom: 1px solid var(--clr-border); }
  .external-scan-ai-finding-title { align-items: flex-start; flex-direction: column; gap: var(--sp-1); }
  .external-scan-ai-finding-title span { white-space: normal; }
  .external-scan-ai-finding-copy dl { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .external-scan-ai-job-progress > span,
  .external-scan-ai-job-row { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Monitoring-Unterebenen — eine Optik für Kunde, Asset und M365

   Die drei Ebenen trugen bisher je eigene Bauformen: dunkle Tab-Leiste hier,
   helle dort, Kennzahlen mal als Pillen-Reihe, mal als Kachelband, und die
   Tab-Optik hatte vier sich gegenseitig mit !important überschreibende
   Besitzer. Dieser Block ist ab jetzt der einzige Besitzer — er zieht die
   Bausteine der Modulebene (.wz-*) nach unten durch.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Pfadzeile ─────────────────────────────────────────────────────────────
   Auf allen drei Ebenen dieselbe Zeile, damit „wo bin ich" immer an derselben
   Stelle steht. */
.monitoring-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  margin: 0 0 6px;
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.monitoring-breadcrumb button {
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--clr-primary);
  font: inherit;
  cursor: pointer;
}
.monitoring-breadcrumb button:hover { text-decoration: underline; }
.monitoring-breadcrumb-sep { color: var(--clr-border-mid); }
.monitoring-breadcrumb span[aria-current="page"],
.monitoring-breadcrumb > span:last-child {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Objektkopf ────────────────────────────────────────────────────────────
   Name und Status oben, darunter beschriftete Felder. Dieselbe Bauform für
   Kunde, Asset und M365-Tenant — ein Wert steht damit auf jeder Ebene an
   derselben Stelle. */
.wz-objhead {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  padding: 9px 12px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xs);
}
.wz-objhead--risk { border-left-color: var(--clr-risk); }
.wz-objhead--warn { border-left-color: var(--clr-warn); }
.wz-objhead--ok { border-left-color: var(--clr-ok); }

.wz-objhead-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.wz-objhead-icon {
  flex: 0 0 auto;
  font-size: 0.96rem;
  line-height: 1;
  color: var(--clr-muted);
}
.wz-objhead--risk .wz-objhead-icon { color: var(--clr-risk); }
.wz-objhead--warn .wz-objhead-icon { color: var(--clr-warn); }
.wz-objhead--ok .wz-objhead-icon { color: var(--clr-ok); }
.wz-objhead-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--clr-text);
}
.wz-objhead-sub {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.wz-objhead-badges { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wz-objhead-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
/* Die Geschwister-Navigation sitzt vor den Aktionen und schiebt sie nach
   rechts — ohne eigenen auto-Rand landen beide aufeinander. */
.wz-objhead-top > .device-sibling-nav { margin-left: auto; }
.wz-objhead-top > .device-sibling-nav ~ .wz-objhead-actions { margin-left: 0; }

/* Feldzeile: Beschriftung klein und ruhig darüber, Wert darunter. */
.wz-objfields {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  padding-top: 7px;
  border-top: 1px solid var(--clr-border);
}
.wz-objfield {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 0 14px;
  border-left: 1px solid var(--clr-border);
}
.wz-objfield:first-child { padding-left: 0; border-left: 0; }
.wz-objfield-key {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-xmuted);
  white-space: nowrap;
}
.wz-objfield-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.wz-objfield--risk .wz-objfield-value { color: var(--clr-risk); }
.wz-objfield--warn .wz-objfield-value { color: var(--clr-warn); }
.wz-objfield--ok .wz-objfield-value { color: var(--clr-ok); }

/* ── Tab-Leisten der Unterebenen ───────────────────────────────────────────
   Kundentabs und Geräte-Untertabs übernehmen die Leiste der Modulebene: heller
   Grund, aktiver Reiter als angehobene Fläche mit Primärkante. */
.customer-tabs,
.subnav {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 6px;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
  background: var(--clr-surface-alt);
  overflow-x: auto;
  scrollbar-width: none;
}
.customer-tabs::-webkit-scrollbar,
.subnav::-webkit-scrollbar { display: none; }

.customer-tabs .subnav-item,
.subnav .subnav-item {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: none;
  color: var(--clr-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  /* Sitzt auf der Trennlinie, damit der aktive Reiter mit dem Inhalt darunter
     verbunden wirkt. */
  margin-bottom: -1px;
}
.customer-tabs .subnav-item:hover,
.subnav .subnav-item:hover {
  border-color: transparent;
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}
.customer-tabs .subnav-item.active,
.subnav .subnav-item.active {
  border-color: var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-primary);
  font-weight: 700;
  box-shadow: inset 0 2px 0 var(--clr-primary);
}
.customer-tabs .subnav-logo:not(.subnav-logo--microsoft),
.subnav .subnav-logo:not(.subnav-logo--microsoft) {
  background: transparent;
  color: currentColor;
}
/* Der aktive Reiter trug die Logo-Fläche der dunklen Leiste — auf hellem Grund
   war sie ein weißer Fleck. */
.customer-tabs .subnav-item.active .subnav-logo,
.subnav .subnav-item.active .subnav-logo {
  background: transparent;
  color: currentColor;
}

/* Der Statuspunkt läuft in der Reihe mit, statt in der Ecke zu schweben — dort
   trug er einen Ring in der Farbe der alten dunklen Leiste. */
.customer-tabs .subnav-issue-dot,
.subnav .subnav-issue-dot {
  position: static;
  width: 7px;
  height: 7px;
  margin-left: 1px;
  border: 0;
}

/* Rahmen um Tabs und Inhalt — gleiche Kante wie .wz-table-wrap. */
.customer-tabs-shell,
.element-submenu {
  display: grid;
  gap: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: none;
  overflow: hidden;
}
.customer-tab-pane,
.subcontent { padding: 10px; background: var(--clr-surface); }

/* ── Listenleiste über einer Tabelle ───────────────────────────────────────
   Statusfilter links, Suche mittig, Trefferzahl rechts — dieselbe Zeile wie
   in der Assetliste der Modulebene. */
.wz-listbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.wz-listbar .wz-searchfield { flex: 1 1 220px; }
.wz-listbar .mon-asset-count {
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}

/* ── Inhaltskarten ─────────────────────────────────────────────────────────
   Die 14px-Radien und der 4px-Primärbalken stammten aus einer älteren
   Kartenoptik und standen quer zu den ruhigen Tabellenrahmen daneben. */
.content--customer .detail-panel,
.content--device .detail-panel {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-left-width: 1px;
  border-left-color: var(--clr-border);
  box-shadow: none;
}
.content--customer .detail-panel--severity-risk,
.content--device .detail-panel--severity-risk { border-left: 2px solid var(--clr-risk); }
.content--customer .detail-panel--severity-warn,
.content--device .detail-panel--severity-warn { border-left: 2px solid var(--clr-warn); }
.content--customer .detail-panel--severity-ok,
.content--device .detail-panel--severity-ok { border-left: 2px solid var(--clr-ok); }
.content--customer .detail-panel--severity-info,
.content--device .detail-panel--severity-info { border-left: 2px solid var(--clr-info); }

/* Sprung-Banner in derselben Sprache wie der Objektkopf. */
.device-jump-banner {
  border-radius: var(--radius-sm);
  border-left-width: 3px;
}

@media (max-width: 900px) {
  .wz-objfields { gap: 6px 0; }
  .wz-objfield { padding: 0 10px; }
  .wz-objhead-actions { margin-left: 0; }
  .wz-objhead-top > .device-sibling-nav { margin-left: 0; }
}

/* Sortierköpfe, die enhanceSortableTable zur Laufzeit mit einem Button füllt,
   in derselben Optik wie die fest gerenderten .wz-sort-Köpfe. */
.wz-th .table-sort-button {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: none;
  color: var(--clr-muted);
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.wz-th .table-sort-button::after {
  content: "⇅";
  font-size: 0.6rem;
  opacity: 0.5;
}
.wz-th .table-sort-button:hover { color: var(--clr-primary); }
.wz-th.sort-asc,
.wz-th.sort-desc { background: var(--clr-info-bg); }
.wz-th.sort-asc .table-sort-button,
.wz-th.sort-desc .table-sort-button { color: var(--clr-primary); }
.wz-th.sort-asc .table-sort-button::after { content: "▲"; opacity: 1; }
.wz-th.sort-desc .table-sort-button::after { content: "▼"; opacity: 1; }


.tree-mobile-toggle { display: none; }
@media (max-width: 900px) {
  .app--monitoring .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace:not(.workspace--no-tree) > .tree-mobile-toggle { display: block; width: 100%; min-height: 36px; text-align: left; padding: 8px 14px; background: var(--clr-surface); color: var(--b-700); border: 0; border-bottom: 1px solid var(--clr-border); }
  .app--monitoring .workspace > .agent-tree { display: none; }
  .app--monitoring .workspace[data-tree-mobile-open] > .agent-tree { display: flex; position: relative; top: 0; height: min(65dvh, 480px); max-height: none; }
  .tree-options > div { max-width: calc(100vw - 30px); }
}
/* ── Monitoring: globale, kundenübergreifende Triage ───────────────────── */
.content--monitoring-root {
  padding-top: 12px;
  padding-bottom: 18px;
}
.content--monitoring-root .content-head {
  margin-bottom: 8px;
  padding-bottom: 7px;
}
.content--monitoring-root .content-head .eyebrow { margin-bottom: 1px; }
.content--monitoring-root .content-head h1 { font-size: 1.1rem; }
.content--monitoring-root .content-body { gap: 8px; }

.mon-cockpit--overview { gap: 4px; }
.mon-cockpit .wz-status--compact {
  min-height: 34px;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 4px 10px;
}
.mon-cockpit .wz-status-icon {
  width: 20px;
  height: 20px;
  font-size: 0.66rem;
}
.mon-cockpit .wz-status-text strong { font-size: 0.84rem; }
.mon-cockpit .wz-status-scope {
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-2xs);
  text-overflow: ellipsis;
}
.mon-cockpit--overview .wz-tab {
  min-height: 30px;
  padding-inline: 10px;
  font-size: var(--fs-xs);
}
.mon-cockpit--overview .wz-tab-count {
  min-width: 18px;
  height: 16px;
  padding-inline: 5px;
}
.wz-panel--overview { gap: 6px; }

.mon-overview-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.mon-overview-controls .wz-searchbar {
  min-width: 0;
  flex-wrap: nowrap;
}
.mon-overview-controls .wz-search-input,
.mon-overview-controls .wz-timerange,
.mon-overview-controls .wz-btn { min-height: 30px; }

.mon-overview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mon-overview-kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  padding: 8px 11px;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
}
.mon-overview-kpi:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--clr-primary) 38%, transparent);
  outline-offset: -3px;
}
.mon-overview-kpi--risk { border-left-color: var(--clr-risk); }
.mon-overview-kpi--warn { border-left-color: var(--clr-warn); }
.mon-overview-kpi--ok { border-left-color: var(--clr-ok); }
.mon-overview-kpi-label {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.mon-overview-kpi > strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--clr-text);
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mon-overview-kpi--breakdown > strong { grid-row: 1; }
.mon-overview-kpi > small {
  min-width: 0;
  overflow: hidden;
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mon-overview-traffic-breakdown {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 8px;
  align-items: center;
}
.mon-overview-traffic-breakdown > span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}
.mon-overview-traffic-breakdown .mon-dot {
  width: 7px;
  height: 7px;
}
.mon-cockpit--overview .mon-overview-kpi {
  min-height: 48px;
  gap: 1px 7px;
  padding: 5px 8px;
}
.mon-cockpit--overview .mon-overview-kpi > strong { font-size: 1.1rem; }

@media (max-width: 900px) {
  .mon-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mon-overview-controls { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .content--monitoring-root { padding-top: 10px; }
  .mon-cockpit .wz-status--compact { flex-wrap: wrap; }
  .mon-cockpit .wz-status-scope {
    flex: 1 1 100%;
    margin-left: 28px;
  }
  .mon-cockpit--overview .wz-tab { min-height: 34px; }
  .mon-overview-controls .wz-searchbar { flex-wrap: wrap; }
  .mon-overview-controls .wz-search-input,
  .mon-overview-controls .wz-timerange,
  .mon-overview-controls .wz-btn { min-height: 34px; }
  .mon-cockpit .wz-view-context { align-items: flex-start; flex-wrap: wrap; }
  .mon-cockpit .wz-view-context p {
    min-width: 0;
    flex: 1 1 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .mon-cockpit .wz-searchfield { flex-basis: 100%; }
  .mon-cockpit .wz-timerange { min-width: 0; }
  .mon-cockpit .wz-timerange select { min-width: 0; max-width: 100%; }
  .mon-cockpit .wz-resultline { flex: 0 0 auto; }
}
@media (max-width: 520px) {
  .mon-overview-kpis { gap: 6px; }
  .mon-overview-kpi { min-height: 62px; padding: 7px 8px; }
  .mon-overview-kpi > strong { font-size: 1.25rem; }
  .mon-cockpit--overview .mon-overview-kpi { min-height: 54px; }
  .mon-overview-traffic-breakdown { gap: 5px; }
}
@media (max-width: 380px) {
  .mon-overview-kpis { grid-template-columns: 1fr; }
}

/* ── Monitoring: kompakte, altersbewusste Listen ──────────────────────────
   Alert-, Kunden-, Asset- und Firewall-Zeilen teilen sich eine enge
   Ein-Zeilen-Grundform. Ausführliche Evidenz bleibt im aufklappbaren Dokument. */
.mon-cockpit .wz-table tbody tr:not(.wz-detail-row) > td {
  padding: 4px 7px;
  vertical-align: middle;
}
.mon-cockpit .wz-sort,
.mon-cockpit .wz-th--plain,
.mon-cockpit .wz-th .table-sort-button {
  padding: 5px 7px;
}
.mon-cockpit .mon-status-pill {
  min-height: 20px;
  min-width: 52px;
  padding: 0 6px;
}
.mon-cockpit .wz-table--events {
  min-width: 720px;
  table-layout: fixed;
}
.mon-cockpit .wz-table--events tbody tr:not(.wz-detail-row) > td {
  padding: 3px 6px;
}
.mon-cockpit .wz-table--events .wz-sort {
  padding: 4px 6px;
}
.mon-cockpit .wz-table--events .wz-col-time {
  width: 112px;
}
.mon-cockpit .wz-table--events .wz-col-level {
  width: 52px;
}
.mon-cockpit .wz-table--events .wz-time {
  overflow: hidden;
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mon-cockpit .wz-table--events .wz-level {
  min-width: 24px;
  height: 19px;
  padding: 0 5px;
}
.mon-cockpit .wz-table--events .wz-col-desc {
  white-space: nowrap;
}
.mon-cockpit .wz-table--events .wz-desc {
  display: inline-block;
  max-width: min(52vw, 720px);
  overflow: hidden;
  font-size: var(--fs-xs);
  line-height: 1.2;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.mon-cockpit .wz-table--events .wz-row--unknown-age > td {
  background: color-mix(in srgb, var(--clr-surface-alt) 45%, var(--clr-surface));
}
.mon-cockpit .wz-table--events .wz-row--stale-state > td {
  background: color-mix(in srgb, var(--clr-surface-alt) 58%, var(--clr-surface));
}
.mon-cockpit .wz-table--events .wz-row--stale-state .wz-time,
.mon-cockpit .wz-table--events .wz-row--stale-state .wz-desc { color: var(--clr-muted); }
.mon-cockpit .mon-cust-name strong,
.mon-cockpit .mon-cust-name small,
.mon-cockpit .mon-cust-reason small,
.mon-cockpit .wz-col-version small,
.mon-cockpit .wz-col-config small {
  line-height: 1.15;
}

/* Flottenlisten: fünf scanbare Informationsblöcke statt separater Spalten für
   jedes Metadatum. Die Identität trägt Haupt- und Meta-Zeile; Lagewerte bleiben
   auf einer Zeile. Damit pendeln die Datenzeilen stabil um 40px. */
.mon-cockpit .wz-table--customers,
.mon-cockpit .wz-table--assets,
.mon-cockpit .wz-table--firewalls {
  table-layout: fixed;
}
.mon-cockpit .wz-table--customers { min-width: 760px; }
.mon-cockpit .wz-table--assets { min-width: 800px; }
.mon-cockpit .wz-table--firewalls { min-width: 850px; }
.mon-cockpit .wz-table--customers tbody tr,
.mon-cockpit .wz-table--assets tbody tr,
.mon-cockpit .wz-table--firewalls tbody tr {
  height: 40px;
}
.mon-cockpit .wz-table--customers tbody td,
.mon-cockpit .wz-table--assets tbody td,
.mon-cockpit .wz-table--firewalls tbody td {
  min-width: 0;
  overflow: hidden;
}

.mon-cockpit .wz-table--customers .wz-col-status,
.mon-cockpit .wz-table--assets .wz-col-status,
.mon-cockpit .wz-table--firewalls .wz-col-status { width: 72px; }
.mon-cockpit .wz-table--customers .wz-col-name { width: 27%; }
.mon-cockpit .wz-table--customers .wz-col-health { width: 30%; }
.mon-cockpit .wz-table--customers .wz-col-signal { width: 112px; }
.mon-cockpit .wz-table--customers .wz-col-reason { width: auto; }
.mon-cockpit .wz-table--assets .wz-col-name { width: 34%; }
.mon-cockpit .wz-table--assets .wz-col-version { width: 132px; }
.mon-cockpit .wz-table--assets .wz-col-health { width: 170px; }
.mon-cockpit .wz-table--assets .wz-col-activity { width: auto; }
.mon-cockpit .wz-table--firewalls .wz-col-name { width: 31%; }
.mon-cockpit .wz-table--firewalls .wz-col-version { width: 132px; }
.mon-cockpit .wz-table--firewalls .wz-col-links { width: 196px; }
.mon-cockpit .wz-table--firewalls .wz-col-posture { width: auto; }

.mon-cockpit .mon-compact-identity strong,
.mon-cockpit .mon-compact-identity small,
.mon-cockpit .mon-compact-activity strong,
.mon-cockpit .mon-compact-activity small,
.mon-cockpit .wz-col-posture small,
.mon-cockpit .wz-table--customers .mon-cust-reason small,
.mon-cockpit .wz-table--customers .mon-signal,
.mon-cockpit .wz-table--assets .wz-col-version small,
.mon-cockpit .wz-table--firewalls .wz-col-version small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mon-cockpit .mon-compact-identity strong,
.mon-cockpit .mon-compact-activity strong {
  color: var(--clr-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.12;
}
.mon-cockpit .mon-compact-identity small,
.mon-cockpit .mon-compact-activity small,
.mon-cockpit .wz-col-posture small {
  margin-top: 1px;
  color: var(--clr-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.1;
}
.mon-cockpit .mon-compact-health,
.mon-cockpit .mon-link-list {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.mon-cockpit .mon-compact-health > *,
.mon-cockpit .mon-link-list > * { flex: 0 0 auto; }
.mon-cockpit .wz-table--customers .mon-area-list {
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow: hidden;
}
.mon-cockpit .wz-table--customers .mon-area {
  padding: 0 5px;
  font-size: var(--fs-2xs);
}
.mon-cockpit .mon-area--more {
  border-color: var(--clr-border);
  background: var(--clr-surface-alt);
  color: var(--clr-xmuted);
}
.mon-cockpit .mon-compact-activity,
.mon-cockpit .wz-col-posture { min-width: 0; }
.mon-cockpit .mon-compact-activity .mon-signal,
.mon-cockpit .wz-col-posture .mon-signal { font-size: var(--fs-2xs); }
.mon-cockpit .mon-link-list .wz-linkstate {
  min-width: 0;
  font-size: var(--fs-2xs);
}
.mon-cockpit .mon-link-list .wz-linkstate b {
  margin-right: 2px;
  font-weight: 700;
}
.mon-cockpit .wz-col-posture .wz-configstate {
  max-width: 145px;
  min-height: 18px;
  overflow: hidden;
  font-size: var(--fs-2xs);
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════════════════
   Externe Scans — zwei Scanarten mit Detailstufen

   Vorher standen vier gleichrangige Modi nebeneinander, jeder mit eigener
   Statusleiste und eigener Kartenoptik. Das Modul übernimmt jetzt dieselben
   Bausteine wie das Monitoring: Statuszeile, Reiter, Panel.
   ════════════════════════════════════════════════════════════════════════════ */
.external-scan-page.wz-module {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Detailstufen ───────────────────────────────────────────────────────────
   Die Stufe ist die wichtigste Entscheidung vor dem Start, deshalb steht sie
   über dem Formular und nennt Umfang und Dauer statt nur eines Profilnamens. */
.wz-levels {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}
.wz-levels-legend {
  padding: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-xmuted);
}
.wz-levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.external-scan-page .wz-level {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--clr-border);
  border-top: 2px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.external-scan-page .wz-level:hover { border-color: var(--clr-primary); }
.external-scan-page .wz-level.is-active {
  border-color: var(--clr-primary);
  border-top-color: var(--clr-primary);
  background: var(--clr-info-bg);
}
/* Der Radio-Input bleibt bedienbar und fokussierbar, nur unsichtbar — die
   Karte selbst ist das Bedienelement. */
.external-scan-page .wz-level input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.external-scan-page .wz-level:focus-within {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}
.wz-level-label { font-size: var(--fs-sm); font-weight: 700; color: var(--clr-text); }
.external-scan-page .wz-level.is-active .wz-level-label { color: var(--clr-primary); }
.wz-level-scope { font-size: var(--fs-2xs); font-weight: 700; color: var(--clr-muted); }
.wz-level-duration {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-xmuted);
  font-variant-numeric: tabular-nums;
}
.wz-level-consent {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 8px 0 0;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--clr-warn) 40%, var(--clr-border));
  border-radius: var(--radius-sm);
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ── Formularkarte ─────────────────────────────────────────────────────────
   Gleiche Kante wie Stufenauswahl und Tabellenrahmen statt der früheren
   Hero-Karte mit eigenem Farbverlauf. */
.wz-formcard {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: none;
}
.wz-formcard .leak-query-intro h2 { font-size: var(--fs-lg); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════════
   Monitoring — durchgängiger Rahmen nach der Wazuh-Referenz

   Der globale Rahmen bleibt von der Cockpit-Wurzel bis zum Asset gleich. Die
   tieferen Ebenen wechseln nur Breadcrumb, Objektkopf und lokale Tabs.
   ════════════════════════════════════════════════════════════════════════════ */
.brand-mark {
  display: none;
  width: 112px;
  height: auto;
  object-fit: contain;
}

.app--monitoring {
  --menubar-h: 58px;
}

.app--monitoring .workspace {
  min-height: calc(100vh - var(--menubar-h));
}

.content--monitoring-root {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 6px 10px 12px;
}

.content--monitoring-root .content-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.content--monitoring-root .content-body {
  gap: 6px;
}

/* Die Leiste bricht um, sobald ihr eigener Platz nicht mehr reicht — nicht erst
   bei einer Viewport-Breite. Der Kundenbaum nimmt Fläche weg, von der eine
   Media-Query nichts weiß; ohne Umbruch lief der Aktualisieren-Knopf hinaus. */
.mon-reference-toolbar {
  min-width: 0;
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 8px 12px;
  border: 1px solid var(--n-50);
  border-radius: var(--radius-md);
  background: var(--n-0);
}

.mon-reference-toolbar > .wz-tabs {
  flex: 0 1 auto;
  /* Hebt das Leistenpadding auf, damit der Unterstrich des aktiven Tabs
     ungebrochen an der Kartenkante sitzt. */
  margin-block: -8px;
}

.mon-reference-toolbar > .mon-overview-controls {
  min-width: 0;
  /* Die Basis ist die Breite, die Suchfeld, Zeitraum und Knopf nebeneinander
     wirklich brauchen. Zu klein angesetzt bliebe die Zeile ungebrochen stehen
     und ihr Inhalt liefe aus der Karte heraus. */
  flex: 1 1 460px;
}

.mon-reference-toolbar .wz-tabs {
  align-self: stretch;
  border-bottom: 0;
}

.mon-reference-toolbar .wz-tab {
  min-height: 30px;
  padding-inline: 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--n-500);
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: none;
}

.mon-reference-toolbar .wz-tab:hover {
  background: transparent;
  color: var(--b-500);
}

.mon-reference-toolbar .wz-tab.is-active {
  border-bottom-color: var(--b-500);
  background: transparent;
  color: var(--b-500);
  box-shadow: none;
}

.mon-reference-toolbar .wz-tab-count {
  background: var(--n-50);
  color: var(--n-500);
}

.mon-overview-controls {
  display: block;
}

.mon-overview-controls .wz-searchbar {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(130px, 190px) auto;
  gap: 7px;
  flex-wrap: nowrap;
}

.mon-overview-controls .wz-timerange { min-width: 0; }
.mon-overview-controls .wz-timerange select {
  min-width: 0;
  max-width: 100%;
}

.mon-overview-controls .wz-search-input,
.mon-overview-controls .wz-timerange,
.mon-overview-controls .wz-btn {
  min-height: 32px;
  border-color: var(--n-200);
  background: var(--n-50);
}

.mon-overview-controls .wz-btn--primary {
  border-color: transparent;
  background: var(--n-0);
  color: var(--n-900);
}

.mon-overview-controls .wz-btn--primary:hover {
  border-color: var(--b-200);
  background: var(--b-50);
  color: var(--b-500);
}

.mon-cockpit--overview {
  gap: 6px;
}

.mon-cockpit .wz-status--compact {
  min-height: 26px;
  margin: 0;
  padding: 3px 8px;
  border-color: var(--n-200);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--b-50);
}

.mon-cockpit .wz-status-text strong {
  color: var(--n-800);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Das Verdikt ist die Kernaussage des Moduls — es behält seinen Ton, auch in
   der kompakten Zeile. */
.mon-cockpit .wz-status--risk .wz-status-text strong { color: var(--clr-risk); }
.mon-cockpit .wz-status--warn .wz-status-text strong { color: var(--clr-warn); }

.mon-cockpit .wz-status-scope {
  color: var(--n-500);
  font-size: 0.66rem;
}

.wz-panel--overview {
  gap: 6px;
}

.mon-cockpit--overview .mon-overview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--n-50);
  border-radius: var(--radius-md);
  background: var(--n-0);
}

.mon-cockpit--overview .mon-overview-kpi {
  display: flex;
  min-height: 68px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 12px;
  border: 0;
  border-left: 0;
  border-radius: 0;
  background: var(--n-0);
  text-align: center;
}

.mon-cockpit--overview .mon-overview-kpi + .mon-overview-kpi {
  border-left: 1px solid var(--n-50);
}

.mon-cockpit--overview .mon-overview-kpi-label {
  color: var(--n-900);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.mon-cockpit--overview .mon-overview-kpi > strong {
  color: var(--n-900);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
}

.mon-cockpit--overview .mon-overview-kpi--ok > strong {
  color: var(--g-500);
}

.mon-cockpit--overview .mon-overview-kpi--risk > strong {
  color: var(--r-500);
}

.mon-cockpit--overview .mon-overview-kpi--warn > strong {
  color: var(--a-500);
}

/* Die Aufschlüsselung erklärt, woher der Wert kommt — sie war ausgeblendet
   und hat die Kennzahlenzeile zu vier nackten Zahlen gemacht. */
.mon-cockpit--overview .mon-overview-kpi > small {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--n-500);
  font-size: 0.66rem;
  font-weight: 600;
}

.mon-cockpit--overview .mon-overview-traffic-breakdown span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}

.mon-reference-chart-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.mon-reference-chart-grid--primary {
  grid-template-columns: minmax(0, 1.65fr) minmax(340px, 1fr);
}

.mon-reference-chart-grid--secondary {
  grid-template-columns: minmax(330px, 0.9fr) minmax(0, 2fr);
}

.mon-reference-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--n-50);
  border-radius: var(--radius-md);
  background: var(--n-0);
}

.mon-reference-card > header {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px 4px;
}

.mon-reference-card > header > span {
  min-width: 0;
}

.mon-reference-card h2,
.mon-reference-card small {
  margin: 0;
}

.mon-reference-card h2 {
  color: var(--n-900);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mon-reference-card small {
  color: var(--n-500);
  font-size: 0.66rem;
  font-weight: 600;
}

.mon-reference-canvas-wrap {
  position: relative;
  min-width: 0;
  height: 158px;
  padding: 0 10px 8px;
}

/* Nur wo wirklich ein Segment liegt, verspricht der Zeiger eine Aktion. */
.mon-reference-canvas-wrap canvas.is-clickable.is-hovering { cursor: pointer; }

.mon-reference-legend-item--filter {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: -2px -4px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.mon-reference-legend-item--filter:hover { background: var(--b-50); }

.mon-reference-legend-item--filter.is-active {
  background: var(--b-100);
  color: var(--b-600);
}

.mon-reference-legend-item--filter.is-active strong { color: var(--b-600); }

.mon-reference-legend-item--filter:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 1px;
}

.mon-reference-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.mon-reference-donut-layout {
  min-height: 164px;
  display: grid;
  grid-template-columns: minmax(150px, 0.92fr) minmax(150px, 1.08fr);
  align-items: center;
  gap: 4px;
  padding: 0 10px 8px;
}

.mon-reference-canvas-wrap--donut {
  height: 150px;
  padding: 0;
}

.mon-reference-legend {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.mon-reference-legend-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: var(--n-800);
  font-size: 0.66rem;
}

.mon-reference-legend-item > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-reference-legend-item strong {
  color: var(--n-500);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

/* Legende unter einem breiten Diagramm läuft waagerecht, nicht als Spalte. */
.mon-reference-legend--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0 12px 9px;
}

.mon-reference-legend--inline .mon-reference-legend-item {
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.mon-reference-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--legend-color);
}

/* Legendenstufen ohne Treffer: Beschriftung bleibt lesbar, die Signalfarbe
   tritt zurück — sonst erklärt die Legende vor allem, was nicht da ist. */
.mon-reference-legend-item--empty { color: var(--clr-muted); }
.mon-reference-legend-item--empty strong { font-weight: 500; }
.mon-reference-legend-swatch--empty {
  background: var(--clr-border-strong, var(--n-400));
  opacity: 0.55;
}

.mon-reference-legend-empty {
  color: var(--n-500);
  font-size: 0.72rem;
}

.mon-reference-alerts > header {
  min-height: 46px;
  padding: 9px 14px;
}

.mon-reference-alerts > header > span {
  display: grid;
  gap: 2px;
}

.mon-reference-open-events,
.mon-reference-alert-link {
  border: 0;
  background: transparent;
  color: var(--b-500);
  font: inherit;
  cursor: pointer;
}

.mon-reference-open-events {
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
}

.mon-reference-open-events:hover,
.mon-reference-alert-link:hover {
  background: var(--b-50);
  color: var(--b-700);
  box-shadow: none;
}

.mon-reference-table-wrap {
  overflow: auto;
  border-top: 1px solid var(--n-50);
}

.mon-reference-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  table-layout: fixed;
}

.mon-reference-table th,
.mon-reference-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--n-50);
  color: var(--n-900);
  font-size: 0.72rem;
  font-weight: 500;
  text-align: left;
  vertical-align: middle;
}

.mon-reference-table th {
  color: var(--n-700);
  font-size: 0.66rem;
  font-weight: 600;
}

.mon-reference-table th:first-child,
.mon-reference-table td:first-child { width: 28px; padding-right: 0; }
.mon-reference-table th:nth-child(2) { width: 150px; }
.mon-reference-table th:nth-child(3) { width: 58px; }
.mon-reference-table th:nth-child(4) { width: 13%; }
.mon-reference-table th:nth-child(5) { width: 14%; }
.mon-reference-table th:last-child { width: 84px; }

.mon-reference-table tbody tr:hover td {
  background: var(--b-50);
}

.mon-reference-table time,
.mon-reference-rule {
  color: var(--n-600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mon-reference-alert-link {
  min-height: 24px;
  max-width: 100%;
  display: block;
  overflow: hidden;
  padding: 2px 4px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mon-reference-col-expand {
  color: var(--n-500);
  font-size: 1rem;
  text-align: center;
}

.mon-reference-alert-empty {
  height: 40px;
  color: var(--n-500);
  text-align: center !important;
}

@media (max-width: 1120px) {
  .mon-reference-toolbar > .wz-tabs {
    flex-basis: 100%;
    margin-block: 0;
    border-bottom: 1px solid var(--n-50);
  }

  .mon-reference-chart-grid--primary,
  .mon-reference-chart-grid--secondary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .menu-bar {
    flex-wrap: wrap;
    padding: 7px 10px;
  }

  .brand {
    min-width: 175px;
  }

  .brand-mark {
    width: 76px;
  }

  .main-menu {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
  }

  .user-menu .timezone-pill,
  .user-menu #session-status {
    display: none;
  }

  .content--monitoring-root {
    padding-inline: 8px;
  }

  .mon-overview-controls .wz-searchbar {
    grid-template-columns: 1fr auto;
  }

  .mon-overview-controls .wz-searchfield {
    grid-column: 1 / -1;
  }

  .mon-cockpit--overview .mon-overview-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mon-cockpit--overview .mon-overview-kpi + .mon-overview-kpi {
    border-left: 0;
  }

  .mon-cockpit--overview .mon-overview-kpi:nth-child(even) {
    border-left: 1px solid var(--n-50);
  }

  .mon-cockpit--overview .mon-overview-kpi:nth-child(n + 3) {
    border-top: 1px solid var(--n-50);
  }

  .mon-reference-donut-layout {
    grid-template-columns: minmax(132px, 0.8fr) minmax(140px, 1.2fr);
  }
}

@media (max-width: 480px) {
  .brand > span,
  .user-menu #logout {
    display: none;
  }

  .brand {
    min-width: 92px;
  }

  .mon-reference-toolbar {
    padding-inline: 8px;
  }

  .mon-reference-toolbar .wz-tab {
    padding-inline: 9px;
  }

  .mon-reference-donut-layout {
    grid-template-columns: 1fr;
  }

  .mon-reference-canvas-wrap--donut {
    height: 126px;
  }

  .mon-reference-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 4px 8px;
  }
}

/* Final interaction overrides: the stylesheet contains several historical
   table layers, so these rules intentionally close the cascade. */
.wz-th .table-sort-button::after {
  content: none;
}

.customer-overview-data-gap {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  margin: 8px 10px 10px;
  padding: 18px 20px;
  border: 1px dashed var(--clr-border-strong);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-soft);
  color: var(--clr-muted);
}

.customer-overview-data-gap strong {
  color: var(--clr-text);
  font-size: var(--fs-sm);
}

.customer-overview-data-gap span {
  max-width: 660px;
  line-height: 1.5;
}


/* ── Themenleiste ────────────────────────────────────────────────────────────
   Erste Entscheidung vor jeder Detailarbeit: Bedrohung, Härtung, Betrieb oder
   Sichtlücke. Die farbige Kante trägt die Zuordnung, die Zahl den Umfang. */
.mon-domainbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.mon-domain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 8px;
  padding: 7px 10px;
  border: 1px solid var(--clr-border);
  border-left: 3px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  cursor: pointer;
  text-align: left;
}

.mon-domain:hover { border-color: var(--clr-border-mid); }
.mon-domain.is-active { border-color: var(--clr-primary); background: var(--clr-info-bg); }
.mon-domain--risk { border-left-color: var(--clr-risk); }
.mon-domain--warn { border-left-color: var(--clr-warn); }
.mon-domain--info { border-left-color: var(--clr-info); }
.mon-domain--muted { border-left-color: var(--clr-border-mid); }

.mon-domain-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-text);
}

.mon-domain-value {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}

.mon-domain-sub {
  grid-column: 1 / -1;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
  font-variant-numeric: tabular-nums;
}

/* Themenmarke in Listenzeilen: ordnet die Zeile zu, ohne die Beschreibung
   zu verdrängen. */
.wz-domain {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid var(--clr-border);
  background: var(--clr-subtle);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
  vertical-align: baseline;
}

.wz-domain--risk { border-color: var(--clr-risk); background: var(--clr-risk-bg); color: var(--clr-risk); }
.wz-domain--warn { border-color: var(--clr-warn); background: var(--clr-warn-bg); color: var(--clr-warn); }
.wz-domain--info { border-color: var(--clr-info); background: var(--clr-info-bg); color: var(--clr-info); }

/* Originalmeldungen im aufgeklappten Dokument: verdichtet wird die Zeile,
   nicht die Beweislage. */
.wz-doc-originals { margin: 6px 0 0; }
.wz-doc-originals > summary {
  cursor: pointer;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
}
.wz-doc-originals article { margin-top: 6px; }
.wz-doc-originals h5 {
  margin: 0 0 2px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-muted);
  font-variant-numeric: tabular-nums;
}
.wz-doc-originals pre {
  margin: 0;
  padding: 6px 8px;
  max-height: 132px;
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  font-size: var(--fs-2xs);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--clr-text);
}

/* Triage urgency is separate from technical severity and report volume. */
/* Compact signals above the list; explanatory context lives below it. */
.mon-area-assessments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 8px; }
.mon-assessment { --assessment-tone: var(--clr-muted); border: 1px solid var(--clr-border); border-left: 3px solid var(--assessment-tone); border-radius: var(--radius-sm); background: var(--clr-surface); min-width: 0; }
.mon-assessment--risk { --assessment-tone: var(--clr-risk); }
.mon-assessment--warn { --assessment-tone: var(--clr-warn); }
.mon-assessment--ok { --assessment-tone: var(--clr-ok); }
.mon-assessment--info { --assessment-tone: var(--clr-info); }
.mon-assessment--muted { --assessment-tone: var(--clr-muted); }
.mon-assessment-open { display: flex; align-items: center; gap: 16px; width: 100%; height: 100%; padding: 12px; border: 0; background: transparent; color: var(--clr-text); font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.mon-assessment-open:hover, .mon-customer-assessment:hover { background: var(--clr-subtle); }
.mon-assessment-open[aria-pressed="true"], .mon-customer-assessment[aria-pressed="true"] { background: var(--clr-info-bg); box-shadow: inset 0 0 0 2px var(--clr-primary); }
.mon-assessment-open:focus-visible, .mon-customer-assessment:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }
.mon-assessment-primary { display: grid; gap: 1px; flex: 0 0 auto; text-align: center; color: var(--assessment-tone); }
.mon-assessment-primary b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.mon-assessment-primary > span { font-size: 11px; color: var(--clr-muted); }
.mon-assessment-copy { display: grid; gap: 2px; min-width: 0; }
.mon-assessment-heading { font-size: 13px; line-height: 1.3; font-weight: 700; }
.mon-assessment-verdict { font-size: 12px; line-height: 1.3; color: var(--assessment-tone); }
.mon-assessment-secondary { font-size: 11px; line-height: 1.3; color: var(--clr-muted); }
.mon-assessment-arrow { margin-left: auto; color: var(--clr-muted); }
.mon-assessment-selection { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--clr-info-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); font-size: 12px; }
.mon-customer-assessments > .mon-reference-table-wrap { max-height: 380px; overflow: auto; }
.mon-assessment-table { min-width: 730px; table-layout: fixed; width: 100%; }
.mon-customer-assessments .mon-assessment-table th { width: 25%; }
.mon-assessment-table th[scope="row"] { white-space: normal; overflow-wrap: anywhere; }
.mon-assessment-table th small { display: block; color: var(--clr-muted); font-weight: 400; margin-top: 4px; }
.mon-customer-assessment { display: grid; gap: 5px; width: 100%; padding: 10px; border: 1px solid var(--clr-border); border-left: 3px solid var(--assessment-tone); border-radius: var(--radius-sm); background: var(--clr-surface); color: var(--assessment-tone); font: inherit; text-align: left; cursor: pointer; white-space: normal; }
.mon-customer-assessment small { color: var(--clr-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .mon-area-assessments { gap: 6px; } .mon-assessment-open { padding: 10px; gap: 8px; } .mon-assessment-arrow { display: none; } }
@media (max-width: 600px) { .mon-area-assessments { grid-template-columns: 1fr; gap: 4px; } .mon-assessment-open { padding: 6px 10px; gap: 12px; } .mon-assessment-primary b { font-size: 26px; } .mon-assessment-copy { grid-template-columns: 1fr auto; column-gap: 10px; flex: 1; } .mon-assessment-verdict { grid-row: 2; } .mon-assessment-secondary { grid-column: 2; grid-row: 1 / 3; align-self: center; } }
.mon-attention-note { margin: 8px 0 16px; color: var(--clr-muted); font-size: 12px; line-height: 1.5; }
.operational-attention { display: grid; gap: 4px; min-width: 160px; max-width: 420px; margin-bottom: 8px; font-size: 12px; line-height: 1.45; }
.operational-attention strong { font-size: 12px; }
.operational-attention > span { color: var(--clr-muted); font-size: 11px; }
.operational-attention--risk > strong { color: var(--clr-risk); }
.operational-attention--warn > strong { color: var(--clr-warn); }
.operational-attention--muted > strong { color: var(--clr-muted); }
.operational-attention p { margin: 4px 0; }
.mon-event-drawer .operational-attention, .soc-alert-detail .operational-attention { max-width: none; font-size: 13px; }
.mon-event-drawer .operational-attention > span, .soc-alert-detail .operational-attention > span { font-size: 13px; }

/* The row shows a short description; the exact wording lives in the expansion
   rather than behind a second dialog. */
.mon-problem-original { margin: 8px 0; }
.mon-core-message { min-width: 0; margin: 0 0 14px; color: var(--clr-text); }
.mon-core-message > header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.mon-core-message h4 { margin: 0; color: var(--clr-muted); font-size: 12px; font-weight: 500; }
.mon-core-message pre.mon-core-text {
  margin: 0;
  padding: 0;
  max-height: none;
  background: transparent;
  color: var(--clr-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mon-core-message .mon-core-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.mon-core-title > span, .mon-core-label { color: var(--clr-muted); font-size: 12px; font-weight: 400; }
.mon-core-message .mon-core-fields { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.mon-core-fields > div { min-width: 0; }
.mon-core-message .mon-core-fields dt { color: var(--clr-muted); font-size: 12px; }
.mon-core-message .mon-core-fields dd { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.mon-core-fields code, .mon-network-path code { overflow-wrap: anywhere; white-space: normal; }
.mon-network-path { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 16px; align-items: center; max-width: 760px; }
.mon-network-path > div { min-width: 0; }
.mon-network-path > div > div { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; }
.mon-network-direction { color: var(--clr-muted); font-size: 20px; }
.mon-core-message .mon-core-context { margin: 8px 0 0; color: var(--clr-muted); font-size: 12px; }
.mon-copy-button { flex-shrink: 0; min-height: 32px; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--clr-muted); font: inherit; font-size: 12px; line-height: 1.4; cursor: pointer; }
.mon-copy-button:hover { border-color: var(--clr-border); color: var(--clr-text); background: var(--clr-surface); }
.mon-copy-button[aria-busy="true"] { opacity: .6; cursor: progress; }
.mon-copy-button:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }
.mon-next-step { color: var(--clr-text); font-size: 13px; line-height: 1.6; }
.mon-next-step b { font-weight: 600; }
@media (max-width: 760px) {
  .mon-network-path { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mon-network-direction { display: none; }
  .mon-copy-button { min-height: 44px; padding-inline: 8px; }
}
.mon-detail-context { margin: 12px 0; }
.mon-detail-context > summary, .mon-problem-original > summary { cursor: pointer; color: var(--clr-muted); font-size: var(--fs-xs); }
.mon-detail-context[open] > summary, .mon-problem-original[open] > summary { margin-bottom: 10px; }
.mon-problem-original h4 {
  margin: 0 0 4px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.mon-problem-original h4 > span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.mon-problem-original pre {
  margin: 0;
  padding: 8px 10px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  font-family: "JetBrains Mono", "Cascadia Code", monospace;
  font-size: var(--fs-2xs);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.mon-problem-original-summary { margin: 5px 0 0; color: var(--clr-muted); font-size: var(--fs-2xs); line-height: 1.5; }
/* SOC Operations */
.soc-module {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.soc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.soc-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
}

.soc-live-state {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 190px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}

.soc-live-state > span:last-child,
.soc-live-state strong,
.soc-live-state small {
  display: block;
}

.soc-live-state strong {
  font-size: var(--fs-xs);
}

.soc-live-state small {
  margin-top: 1px;
  color: var(--clr-muted);
  font-size: 11px;
}

.soc-live-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--clr-ok);
  box-shadow: 0 0 0 4px var(--clr-ok-bg);
}

.soc-live-state.is-loading .soc-live-dot {
  background: var(--clr-info);
  box-shadow: 0 0 0 4px var(--clr-info-bg);
}


.soc-header h2,
.soc-header p {
  margin: 0;
}

.soc-header > div > p:last-child {
  margin-top: var(--sp-1);
  color: var(--clr-muted);
}

.soc-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: var(--sp-2);
}

.soc-mode-tabs,
.soc-saved-views {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
}

.soc-mode-tabs {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--clr-border);
}

.soc-mode-tabs button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  font-weight: 600;
}

.soc-mode-tabs button b,
.soc-view-chip b {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--clr-subtle);
  color: var(--clr-muted);
  font-size: 10px;
  text-align: center;
}

.soc-mode-tabs button.active b,
.soc-view-chip.active b {
  background: var(--clr-primary);
  color: var(--n-0);
}

.soc-saved-views {
  min-height: 38px;
}

.soc-saved-views-label {
  margin-right: var(--sp-1);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.soc-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.soc-view-chip:hover,
.soc-view-chip.active {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

.soc-mode-tabs button:hover,
.soc-mode-tabs button.active {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

.soc-performance {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-performance strong {
  margin-left: var(--sp-1);
  color: var(--clr-text);
}

.soc-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 68px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  color: var(--clr-text);
  text-align: left;
  box-shadow: var(--shadow-xs);
}

.soc-kpi span {
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-kpi strong {
  font-size: var(--fs-xl);
  line-height: 1;
}

.soc-kpi:hover,
.soc-kpi--active {
  border-color: var(--clr-primary);
  box-shadow: var(--focus-ring);
}

.soc-kpi--warn strong {
  color: var(--clr-warn);
}

.soc-kpi--critical strong {
  color: var(--clr-risk);
}

.soc-filter-panel {
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
}

.soc-filter-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.soc-filter-panel > header strong,
.soc-filter-panel > header span {
  display: block;
}

.soc-filter-panel > header strong {
  font-size: var(--fs-xs);
}

.soc-filter-panel > header span {
  margin-top: 1px;
  color: var(--clr-muted);
  font-size: 11px;
}

.soc-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3);
}

.soc-search {
  grid-column: span 2;
}

.soc-search > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.soc-search kbd {
  min-width: 20px;
  padding: 1px 5px;
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font: inherit;
  text-align: center;
}

.soc-filter-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  min-height: 38px;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.soc-filter-context-label {
  margin-right: var(--sp-1);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid var(--clr-info);
  border-radius: var(--radius-sm);
  background: var(--clr-info-bg);
  color: var(--clr-info);
  font-size: var(--fs-xs);
}

.soc-filter-chip:hover {
  border-color: var(--clr-primary-dark);
  color: var(--clr-primary-dark);
}

.soc-filter-chip b {
  font-size: 14px;
  line-height: 1;
}

.soc-filter-reset {
  margin-left: auto;
}

.soc-filters label,
.soc-assign-form label,
.soc-note-form label,
.soc-case-toolbar label,
.soc-case-detail form,
.soc-operations-grid form {
  display: grid;
  gap: var(--sp-1);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-filters input,
.soc-filters select,
.soc-assign-form input,
.soc-note-form textarea,
.soc-terminal-actions input,
.soc-terminal-actions select,
.soc-terminal-actions textarea,
.soc-sla-form input,
.soc-case-toolbar input,
.soc-case-toolbar select,
.soc-case-detail input,
.soc-case-detail select,
.soc-case-detail textarea,
.soc-operations-grid input,
.soc-operations-grid select,
.soc-operations-grid textarea {
  min-width: 0;
  width: 100%;
}

/* `renderSOCBulkBar` blendet die Leiste über `hidden` aus. Ohne diese Regel
   gewinnt der Klassenselektor gegen die UA-Regel für [hidden], und die leere,
   blau gerahmte Massenaktionsleiste stand dauerhaft über der Queue. */
.soc-bulk[hidden] {
  display: none;
}

.soc-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--clr-primary);
  border-radius: var(--radius-md);
  background: var(--clr-info-bg);
}

.soc-bulk-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
}

/* Auf dem hellblauen Grund der Sammelleiste ist das globale Muted-Grau zu
   schwach — der Hinweis auf das 500er-Limit muss lesbar bleiben. */
.soc-bulk-scope .muted-small {
  color: var(--clr-text);
}

.soc-bulk-note {
  display: grid;
  gap: var(--sp-1);
  flex: 1 1 260px;
  min-width: 200px;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-bulk-note input {
  width: 100%;
  min-width: 0;
}

.soc-bulk-note select {
  width: 100%;
  min-width: 0;
}

.soc-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.soc-select-cell {
  width: 36px;
  text-align: center;
}

.soc-select-cell input {
  accent-color: var(--clr-primary);
  cursor: pointer;
}

.soc-table-wrap {
  position: relative;
  max-height: min(64vh, 760px);
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--clr-surface);
}

.soc-alert-table {
  min-width: 1040px;
}

.soc-alert-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--clr-surface-alt);
  box-shadow: inset 0 -1px 0 var(--clr-border);
}

.soc-alert-row {
  transition: background-color 120ms ease;
}

.soc-alert-row:hover > td,
.soc-alert-row:has([data-soc-select]:checked) > td {
  background: var(--clr-info-bg);
}

.soc-alert-row > td:first-child {
  border-left: 2px solid transparent;
}

.soc-alert-row--critical > td:first-child {
  border-left-color: var(--clr-risk);
}

.soc-alert-row--error > td:first-child {
  border-left-color: var(--r-600);
}

.soc-alert-row--warning > td:first-child {
  border-left-color: var(--clr-warn);
}

.soc-alert-main strong,
.soc-alert-main small,
.soc-cell-sub {
  display: block;
}

.soc-alert-main small,
.soc-cell-sub {
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-severity,
.soc-status,
.soc-sla,
.soc-assignee {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-subtle);
  color: var(--clr-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.soc-severity--critical,
.soc-sla--breached {
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.soc-severity--error,
.soc-sla--urgent {
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.soc-severity--warning {
  background: var(--a-100);
  color: var(--a-700);
}

/* „Offen" und „nicht zugewiesen" sind der Normalzustand einer frischen Queue,
   keine Störung. Vorher trugen sie Warn- und Risikofarbe und färbten damit in
   der Beispiellage sieben von neun Zeilen rot beziehungsweise amber ein — die
   eine echte SLA-Verletzung ging darin unter. Farbe bleibt der Dringlichkeit
   vorbehalten: Schweregrad und SLA-Stand. */
.soc-status--open,
.soc-assignee--empty {
  background: var(--clr-subtle);
  color: var(--clr-xmuted);
  font-weight: 500;
}

.soc-status--acknowledged,
.soc-sla--due {
  background: var(--clr-info-bg);
  color: var(--clr-info);
}

.soc-status--resolved,
.soc-sla--done {
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.soc-sla-meter {
  display: block;
  width: 100%;
  min-width: 92px;
  height: 3px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--clr-subtle);
}

.soc-sla-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--clr-info);
}

.soc-sla-meter--urgent > span {
  background: var(--clr-warn);
}

.soc-sla-meter--breached > span {
  background: var(--clr-risk);
}

.soc-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.soc-empty-queue {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--clr-muted);
  text-align: center;
}

.soc-empty-queue > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
  font-weight: 700;
}

.soc-empty-queue strong {
  color: var(--clr-text);
}

.soc-empty-queue p {
  margin: 0;
}

.soc-alert-detail-row > td {
  padding: 0 !important;
  background: var(--clr-surface-alt);
}

.soc-alert-detail {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
}

.soc-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: var(--sp-5);
}

.soc-detail-grid h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
}

.soc-detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4);
}

.soc-detail-facts div {
  min-width: 0;
}

.soc-detail-facts dt {
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-detail-facts dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.soc-detail-actions,
.soc-assign-form,
.soc-note-form,
.soc-sla-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.soc-terminal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.soc-terminal-actions form,
.soc-case-detail form,
.soc-policy-list form,
.soc-handover-list form {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.soc-case-toolbar,
.soc-case-toolbar form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-2);
}

.soc-section-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  padding: var(--sp-1) 0;
}

.soc-section-intro h3,
.soc-section-intro p {
  margin: 0;
}

.soc-section-intro > div > p:last-child {
  margin-top: 3px;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-section-count {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-section-count strong {
  margin-right: 3px;
  color: var(--clr-text);
  font-size: var(--fs-md);
}

.soc-case-toolbar {
  justify-content: space-between;
  padding: var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
}

.soc-case-toolbar form {
  flex: 1 1 680px;
}

.soc-case-toolbar form > * {
  flex: 1 1 140px;
}

.soc-case-list,
.soc-task-list,
.soc-linked-alerts,
.soc-suppression-list,
.soc-handover-list,
.soc-policy-list {
  display: grid;
  gap: var(--sp-2);
}

.soc-case-card {
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-left: 2px solid var(--clr-info);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}

.soc-case-card--critical {
  border-left-color: var(--clr-risk);
}

.soc-case-card--error {
  border-left-color: var(--r-600);
}

.soc-case-card--warning {
  border-left-color: var(--clr-warn);
}

.soc-case-head {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto minmax(130px, auto) minmax(110px, auto) auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--clr-text);
  text-align: left;
}

.soc-case-head:hover,
.soc-case-head[aria-expanded="true"] {
  background: var(--clr-surface-alt);
}

.soc-case-head strong,
.soc-case-head small {
  display: block;
}

.soc-case-head small {
  margin-top: 2px;
  color: var(--clr-muted);
}

.soc-case-owner,
.soc-case-updated {
  min-width: 0;
}

.soc-case-owner strong,
.soc-case-updated strong {
  overflow: hidden;
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soc-case-chevron {
  color: var(--clr-muted);
  font-size: var(--fs-md);
}

.soc-status--pending {
  background: var(--clr-warn-bg);
  color: var(--clr-warn);
}

.soc-status--contained {
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.soc-status--closed {
  background: var(--clr-subtle);
  color: var(--clr-muted);
}

.soc-case-detail {
  padding: var(--sp-4);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}

.soc-case-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.soc-case-detail h3,
.soc-operations-grid h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
}

.soc-task-list,
.soc-linked-alerts {
  margin: var(--sp-2) 0;
  padding: 0;
  list-style: none;
}

.soc-task-list li,
.soc-linked-alerts li,
.soc-suppression-list > li,
.soc-handover-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.soc-task-list li > span:first-child,
.soc-task-list li strong,
.soc-task-list li small {
  display: block;
}

.soc-task-list li small {
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-task-list li.is-overdue {
  border-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.soc-task-list li.is-overdue small {
  color: var(--clr-risk);
  font-weight: 600;
}

.soc-task-list li.is-complete strong {
  color: var(--clr-muted);
  text-decoration: line-through;
}

.soc-task-check {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
  font-weight: 700;
}

.soc-heading-count {
  margin-left: var(--sp-1);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.soc-operations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.soc-operations-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-3);
}

.soc-operations-toolbar label {
  display: grid;
  gap: var(--sp-1);
  min-width: min(100%, 320px);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-operations-grid > section {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
}

.soc-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.soc-card-heading h3,
.soc-card-heading p {
  margin: 0;
}

.soc-card-heading p {
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-coverage-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.soc-coverage-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.soc-coverage-badge--degraded,
.soc-coverage-badge--unknown {
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.soc-coverage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.soc-coverage > div {
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
}

.soc-coverage > div span,
.soc-coverage > div strong {
  display: block;
}

.soc-coverage > div span {
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-coverage > div strong {
  margin-top: 3px;
  color: var(--clr-text);
  font-size: var(--fs-lg);
}

.soc-coverage > strong {
  grid-column: 1 / -1;
}

.soc-coverage > span {
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-coverage--degraded {
  border-color: var(--clr-risk);
  background: var(--clr-risk-bg);
}

.soc-policy-list form {
  grid-template-columns: minmax(70px, auto) repeat(2, minmax(110px, 1fr)) auto;
  align-items: end;
}

.soc-policy-list form > strong {
  align-self: center;
}

.soc-suppression-list small,
.soc-handover-list small {
  display: block;
  margin-top: 2px;
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-handover-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.soc-handover-list > li p {
  grid-column: 1 / -1;
  margin: 0;
}

.soc-risk-note {
  padding: var(--sp-2);
  border-left: 2px solid var(--clr-risk);
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.soc-assign-form label,
.soc-note-form label {
  flex: 1 1 260px;
}

.soc-note-form textarea {
  resize: vertical;
}

.soc-activity-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.soc-activity-list li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: var(--sp-2);
}

.soc-activity-marker {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--clr-info);
}

.soc-activity-list strong,
.soc-activity-list small {
  display: block;
}

.soc-activity-list small,
.soc-activity-list p {
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-activity-list p {
  margin: var(--sp-1) 0 0;
}

.soc-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--clr-border);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
}

.soc-pagination > div {
  display: flex;
  gap: var(--sp-2);
}

.soc-loading {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--clr-muted);
}

@media (max-width: 1180px) {
  .soc-summary {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .soc-filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

	.soc-case-head {
		grid-template-columns: auto minmax(220px, 1fr) auto minmax(120px, auto) auto;
	}

	.soc-case-updated {
		display: none;
	}

}

@media (max-width: 760px) {
	.soc-header,
	.soc-header-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.soc-header-actions {
		width: 100%;
	}

	.soc-live-state {
		min-width: 0;
	}

	.soc-mode-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.soc-mode-tabs button {
		flex: 0 0 auto;
	}

	.soc-filter-panel > header {
		align-items: flex-start;
	}

	.soc-section-intro {
		align-items: flex-start;
		flex-direction: column;
	}

  .soc-summary,
  .soc-filters,
  .soc-detail-grid,
  .soc-detail-facts,
  .soc-terminal-actions,
  .soc-case-detail-grid,
  .soc-operations-grid,
  .soc-coverage {
    grid-template-columns: 1fr;
  }

  .soc-case-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

	.soc-case-head .soc-status,
	.soc-case-owner {
		grid-column: 2;
	}

	.soc-case-chevron {
		grid-column: 3;
		grid-row: 1;
	}

  .soc-search {
    grid-column: auto;
  }

	.soc-filter-reset {
		margin-left: 0;
	}

	.soc-card-heading {
		align-items: stretch;
		flex-direction: column;
	}

	.soc-policy-list form {
		grid-template-columns: 1fr;
	}

	.soc-table-wrap {
		max-height: none;
	}

	.soc-pagination {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
  .soc-live-state.is-loading .soc-live-dot {
    animation: none;
  }
}


.soc-alert-table .operational-attention {
  min-width: 170px;
  max-width: 240px;
  white-space: normal;
  overflow-wrap: break-word;
}
/* Diagnostics GUI — operational entry, safer archive and accessible dialogs */
.bastion-layout--archive {
  grid-template-columns: 42px minmax(0, 1fr);
}

.bastion-layout--archive .bastion-sidebar {
  overflow: hidden;
}

.bastion-layout--archive .bastion-sidebar-head {
  display: flex;
  justify-content: center;
  padding: 10px 8px;
}

.bastion-layout--archive .bastion-sidebar-title,
.bastion-layout--archive .bastion-sidebar-actions,
.bastion-layout--archive .bastion-refresh-bar,
.bastion-layout--archive .bastion-workspace-section,
.bastion-layout--archive .bastion-session-list,
.bastion-layout--archive .bastion-sentinel-section {
  display: none;
}

.bastion-workspace-create {
  min-width: 42px;
  min-height: 32px;
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-session-open:focus-visible,
.bastion-welcome-action:focus-visible,
.bastion-archive-filter-chip:focus-visible,
.archive-management-menu > summary:focus-visible,
.bastion-report-card-menu > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--clr-primary) 34%, transparent);
  outline-offset: 2px;
}

.bastion-welcome {
  align-items: stretch;
  justify-content: flex-start;
  width: min(100%, 1040px);
  min-height: 100%;
  margin: 0 auto;
  padding: 34px 28px;
  text-align: left;
}

.bastion-welcome-command {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  box-shadow: var(--shadow-sm);
}

.bastion-welcome-intro {
  margin: 0;
}

.bastion-welcome-intro h2 {
  margin: 5px 0 7px;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

.bastion-welcome-intro p:last-child {
  max-width: 76ch;
  margin: 0;
  line-height: 1.55;
}

.bastion-welcome-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bastion-welcome-action {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 104px;
  padding: 15px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  text-align: left;
}

.bastion-welcome-action:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.bastion-welcome-action strong {
  font-size: 0.9rem;
}

.bastion-welcome-action span {
  color: var(--clr-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.bastion-welcome-action--primary {
  border-color: var(--clr-primary);
  background: var(--clr-primary);
  color: var(--n-0);
}

.bastion-welcome-action--primary:hover {
  background: color-mix(in srgb, var(--clr-primary) 88%, var(--n-900));
  color: var(--n-0);
}

.bastion-welcome-action--primary span {
  color: rgba(255, 255, 255, 0.8);
}

.bastion-welcome-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--clr-border);
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.bastion-welcome-status span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.bastion-welcome-status strong {
  color: var(--clr-text);
  font-size: 0.9rem;
}

.bastion-welcome-help {
  margin-top: 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-alt);
}

.bastion-welcome-help > summary {
  min-height: 42px;
  padding: 12px 15px;
  color: var(--clr-text);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
}

.bastion-welcome-help .bastion-flow-diagram {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: auto;
  margin: 0;
  padding: 0 12px 12px;
}

.bastion-welcome-help .bastion-flow-card,
.bastion-welcome-help .bastion-flow-card--multisite {
  grid-column: auto;
  min-height: 0;
  gap: 8px;
  padding: 14px;
  box-shadow: none;
}

.bastion-workspace-create-modal {
  width: min(100%, 520px);
}

.bastion-workspace-create-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.bastion-workspace-create-head h2,
.bastion-archive-clear-modal h2 {
  margin: 4px 0 0;
}

.bastion-workspace-create-close {
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 1.1rem;
}

.assignment-modal textarea {
  min-height: 96px;
  padding: 10px;
  resize: vertical;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  background: var(--n-25);
  color: var(--n-900);
  font: inherit;
  font-weight: 600;
}

.bastion-workspace-create-context {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.72rem;
}

.bastion-workspace-create-context strong {
  color: var(--clr-primary);
  font-size: 1rem;
}

.archive-summary-strip {
  display: grid;
  grid-template-columns: minmax(90px, 0.55fr) minmax(90px, 0.55fr) minmax(180px, 1fr) minmax(150px, 1fr);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}

.archive-summary-strip > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 13px;
  border-right: 1px solid var(--clr-border);
}

.archive-summary-strip > span:last-child {
  border-right: 0;
}

.archive-summary-strip small {
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.archive-summary-strip strong {
  overflow: hidden;
  color: var(--clr-text);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bastion-archive-filters {
  grid-template-columns: minmax(200px, 2fr) repeat(2, minmax(126px, 0.8fr)) repeat(2, minmax(130px, 1fr)) auto;
  align-items: end;
  gap: 8px;
}

.bastion-archive-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--clr-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.bastion-archive-filters .bastion-archive-field input,
.bastion-archive-filters .bastion-archive-field select,
.bastion-archive-filters > button {
  min-width: 0;
  min-height: 40px;
}

.bastion-archive-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bastion-archive-active-filters[hidden] {
  display: none;
}

.bastion-archive-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--clr-primary) 35%, var(--clr-border));
  border-radius: var(--radius-sm);
  background: var(--clr-info-bg);
  color: var(--clr-primary);
  font-size: 0.66rem;
  font-weight: 700;
}

.archive-export-actions {
  align-items: center;
}

.archive-management-menu,
.bastion-report-card-menu {
  position: relative;
}

.archive-management-menu > summary,
.bastion-report-card-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  list-style: none;
}

.archive-management-menu > summary::-webkit-details-marker,
.bastion-report-card-menu > summary::-webkit-details-marker {
  display: none;
}

.archive-management-menu[open] > summary,
.bastion-report-card-menu[open] > summary {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

.archive-management-popover,
.bastion-report-card-popover {
  position: absolute;
  right: 0;
  z-index: 8;
  display: grid;
  gap: 7px;
  width: 250px;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  box-shadow: var(--shadow-md);
}

.archive-management-popover strong {
  color: var(--clr-risk);
  font-size: 0.72rem;
}

.archive-management-popover span {
  color: var(--clr-muted);
  font-size: 0.66rem;
  line-height: 1.4;
}

.bastion-investigation-card.archive-card,
.bastion-archive-card {
  grid-template-columns: 24px minmax(150px, max-content) minmax(220px, 1fr) auto;
  overflow: visible;
  padding: 12px;
}

.bastion-investigation-card.archive-card .archive-card-badges {
  gap: 5px;
}

.bastion-archive-priority,
.bastion-archive-status {
  display: inline-flex;
  width: fit-content;
  min-height: 20px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
}

.bastion-archive-priority--high {
  border-color: color-mix(in srgb, var(--clr-risk) 35%, var(--clr-border));
  background: var(--clr-risk-bg);
  color: var(--clr-risk);
}

.bastion-investigation-card .bastion-archive-priority--high {
  color: var(--clr-risk);
}

.bastion-archive-priority--medium {
  border-color: color-mix(in srgb, var(--clr-warn) 40%, var(--clr-border));
  background: var(--clr-warn-bg);
  color: var(--a-500);
}

.bastion-investigation-card .bastion-archive-priority--medium {
  color: var(--a-500);
}

.bastion-archive-priority--low,
.bastion-archive-status--done {
  border-color: color-mix(in srgb, var(--clr-ok) 35%, var(--clr-border));
  background: var(--clr-ok-bg);
  color: var(--clr-ok);
}

.bastion-investigation-card .bastion-archive-priority--low,
.bastion-investigation-card .bastion-archive-status--done {
  color: var(--clr-ok);
}

.bastion-archive-status--open {
  border-color: color-mix(in srgb, var(--clr-info) 35%, var(--clr-border));
  background: var(--clr-info-bg);
  color: var(--clr-primary);
}

.bastion-investigation-card .bastion-archive-status--open {
  color: var(--clr-primary);
}

.bastion-investigation-card.archive-card.archive-card--priority-high {
  border-left: 2px solid var(--clr-risk);
}

.bastion-investigation-card.archive-card.archive-card--priority-medium {
  border-left: 2px solid var(--clr-warn);
}

.archive-card-action-count {
  color: var(--clr-primary) !important;
}

.bastion-investigation-card.archive-card .bastion-report-card-actions {
  align-items: center;
  gap: 6px;
}

.bastion-report-card-btn,
.bastion-report-card-menu-btn {
  min-height: 36px;
}

.bastion-report-card-btn--primary {
  border-color: var(--clr-primary);
  background: var(--clr-primary);
  color: var(--n-0);
}

.bastion-report-card-btn--primary:hover {
  background: color-mix(in srgb, var(--clr-primary) 88%, var(--n-900));
  color: var(--n-0);
}

.bastion-report-card-popover {
  width: 210px;
}

.bastion-investigation-card.archive-card .bastion-report-card-popover {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  gap: 4px;
}

.bastion-report-card-menu-btn {
  width: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-text);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
}

.bastion-report-card-menu-btn:hover {
  background: var(--clr-surface-alt);
}

.bastion-report-card-menu-btn--danger {
  color: var(--clr-risk);
}

.bastion-archive-clear-modal button.danger:not(:disabled) {
  background: var(--clr-risk);
  color: var(--n-0);
}

.bastion-archive-clear-modal button.danger:disabled {
  background: var(--clr-subtle);
  color: var(--clr-muted);
  cursor: not-allowed;
  opacity: 0.75;
}

@media (max-width: 1040px) {
  .bastion-welcome-actions,
  .bastion-welcome-help .bastion-flow-diagram {
    grid-template-columns: 1fr;
  }

  .bastion-archive-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bastion-archive-field--search {
    grid-column: 1 / -1;
  }

  .bastion-investigation-card.archive-card,
  .bastion-archive-card {
    grid-template-columns: 24px minmax(130px, max-content) minmax(0, 1fr);
  }

  .bastion-investigation-card.archive-card .bastion-report-card-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 680px) {
  .bastion-welcome {
    padding: 18px 12px;
  }

  .bastion-welcome-command {
    padding: 17px;
  }

  .archive-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-summary-strip > span:nth-child(2) {
    border-right: 0;
  }

  .archive-summary-strip > span:nth-child(-n+2) {
    border-bottom: 1px solid var(--clr-border);
  }

  .bastion-archive-filters {
    grid-template-columns: 1fr;
  }

  .bastion-archive-field--search {
    grid-column: auto;
  }

  .archive-result-row,
  .archive-export-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .archive-management-popover,
  .bastion-report-card-popover {
    right: auto;
    left: 0;
    max-width: min(250px, calc(100vw - 40px));
  }

  .bastion-investigation-card.archive-card,
  .bastion-archive-card {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .bastion-investigation-card.archive-card .archive-card-badges {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .bastion-investigation-card.archive-card .archive-card-main,
  .bastion-investigation-card.archive-card .bastion-report-card-actions {
    grid-column: 1 / -1;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Anwendungsrahmen — eine Definition für alle Sektionen

   Vorher hatte das Monitoring einen eigenen hellen Rahmen (`.app--monitoring`),
   während SOC, Diagnose und Einstellungen auf der dunklen Navigationsfläche
   liefen. Beim Menüwechsel sprang dadurch das gesamte Farbschema. Kopfleiste,
   Marke, Hauptmenü, Suche und Benutzermenü sind jetzt sektionsunabhängig; nur
   der Inhaltsbereich wechselt. `.app--monitoring` trägt nur noch Layout.
   ════════════════════════════════════════════════════════════════════════════ */
.app {
  --menubar-h: 52px;
  background: var(--clr-subtle);
}

.menu-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--menubar-h);
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text);
  box-shadow: none;
}

.brand {
  min-width: 232px;
  display: grid;
  grid-template-columns: 104px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--sp-3);
  padding: 0 var(--sp-4) 0 0;
  border-right: 1px solid var(--clr-border);
  color: var(--clr-text);
}

.brand-mark {
  display: block;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 104px;
  height: auto;
  object-fit: contain;
}

.brand > span {
  grid-column: 2;
  grid-row: 1;
  color: var(--clr-xmuted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.brand > strong {
  grid-column: 2;
  grid-row: 2;
  color: var(--clr-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.main-menu {
  min-height: 34px;
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.menu-item {
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: none;
}

.menu-item:hover {
  border-color: transparent;
  background: var(--clr-subtle);
  color: var(--clr-text);
}

.menu-item.active {
  border-color: var(--clr-border);
  background: var(--clr-info-bg);
  color: var(--clr-primary-dark);
  font-weight: 700;
  box-shadow: none;
}

.menu-item .subnav-logo,
.menu-item .ui-icon,
.menu-item.active .subnav-logo,
.menu-item.active .ui-icon {
  background: transparent;
  color: currentColor;
}

.global-search-wrap {
  display: block;
  width: 170px;
  flex: 0 1 170px;
  min-width: 120px;
}

.menu-bar .global-search-input {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
}

.menu-bar .global-search-input::placeholder {
  color: var(--clr-xmuted);
}

.user-menu span {
  color: var(--clr-xmuted);
}

.app-theme-picker { display: flex; align-items: center; gap: 6px; flex: 0 0 120px; width: 120px; padding: 0 6px; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-surface-alt); }
.app-theme-picker svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--clr-muted); pointer-events: none; }
.app-theme-picker select {
  flex: 1; width: 0; min-width: 0; min-height: 28px; padding: 3px 0; border: 0;
  background: transparent; color: var(--clr-text); font: inherit; font-size: 12px;
}
.app-theme-picker:hover { border-color: var(--clr-border-mid); }
.app-theme-picker:focus-within { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.app-theme-picker select:focus { outline: none; }

@media (max-width: 900px) {
  .global-search-wrap { width: 100%; flex: 0 0 auto; }
}

.menu-bar .timezone-pill,
.menu-bar .secondary {
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
  color: var(--clr-muted);
}

.menu-bar .secondary:hover {
  border-color: var(--clr-border-mid);
  background: var(--clr-subtle);
  color: var(--clr-text);
}

/* ════════════════════════════════════════════════════════════════════════════
   Monitoring-Einstieg — Teil der Seite statt eingesetztes Fremdmodul

   Der Einstieg blendete seinen Seitenkopf aus und begann direkt mit einer
   freistehenden Werkzeugkarte. Jede andere Sektion beginnt mit Eyebrow, Titel
   und Statusanzeige; dadurch wirkte ausgerechnet die Startseite wie ein
   fremdes Widget im Rahmen. Kopf und Werkzeugleiste folgen jetzt derselben
   Struktur wie SOC, Diagnose und Einstellungen.
   ════════════════════════════════════════════════════════════════════════════ */
.content--monitoring-root .content-head {
  min-height: 25px;
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 4px;
  padding: 0 0 4px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  border-bottom: 1px solid var(--clr-border);
}

.content--monitoring-root .content-head .eyebrow { display: none; }
.content--monitoring-root .content-head h1 { font-size: 14px; line-height: 20px; }

/* Die Symbole vor den Seitentiteln (▤ ◎ ⌘ ◫) benannten nichts, was der Titel
   nicht schon sagt, und wechselten je Sektion die Formensprache. */
.content-head .title-icon {
  display: none;
}

/* Die Werkzeugleiste ist Seitennavigation, keine Karte. Als eigene weiße
   Fläche mit Rahmen und Radius stand sie als drittes Element neben Kopf und
   Inhalt und trennte den Einstieg optisch vom Rest der Sektion. */
.mon-reference-toolbar {
  min-height: 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
  background: transparent;
  gap: 4px 10px;
}

.mon-reference-toolbar > .wz-tabs {
  margin-block: 0;
}

/* ── Kennzahlenzeile ─────────────────────────────────────────────────────────
   Zentrierte Displayzahlen über einer Punktlegende lasen sich wie eine
   Marketingkachel. Betriebswerte werden links ausgerichtet und in der
   Typo-Skala gesetzt, damit Auge und Spaltenraster übereinstimmen. */
.mon-cockpit--overview .mon-overview-kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  gap: 3px 8px;
  padding: 7px 10px;
  text-align: left;
}

.mon-cockpit--overview .mon-overview-kpi + .mon-overview-kpi {
  border-left: 1px solid var(--clr-border);
}

.mon-cockpit--overview .mon-overview-kpi-label {
  grid-column: 1;
  grid-row: 1;
  color: var(--clr-xmuted);
  font-size: 12px;
  font-weight: 600;
}

.mon-cockpit--overview .mon-overview-kpi > strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mon-cockpit--overview .mon-overview-kpi > small {
  grid-column: 1 / -1;
  grid-row: 2;
  flex-wrap: wrap;
  gap: 3px 6px;
  font-size: var(--fs-2xs);
  font-weight: 500;
}

/* ── Karten ──────────────────────────────────────────────────────────────────
   Eine Linie trennt, kein Schatten und kein zweiter Rahmenton. */
.mon-reference-card {
  border-color: var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.mon-reference-card > header {
  padding: 6px 10px 4px;
}

.mon-reference-card h2 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0;
}

.mon-reference-card small {
  color: var(--clr-xmuted);
  font-size: var(--fs-2xs);
  font-weight: 500;
}

/* Die Kennzahl stand über `align-self: center` aus der Grid-Variante mittig
   über ihrem linksbündigen Label. */
.mon-cockpit--overview .mon-overview-kpi > strong {
  align-self: flex-start;
}

/* ════════════════════════════════════════════════════════════════════════════
   Reiter — eine Formensprache für alle Sektionen

   Die Oberfläche führte parallel mehrere Reiter-Bauarten: Unterstrich im
   Monitoring, gerahmte Pillen im SOC, Chips mit Symbol in den Einstellungen,
   Kästchen im Kundendrilldown. Beim Wechsel der Sektion wechselte damit auch
   die Bedienlogik des immer gleichen Elements. Kanonisch ist der Unterstrich:
   er trägt keine eigene Fläche, kein Radius und keinen Rahmen und bleibt
   deshalb auch neben dichten Tabellen ruhig.
   ════════════════════════════════════════════════════════════════════════════ */
.wz-tabs,
.soc-mode-tabs,
.dashboard-drill-tabs,
.bastion-archive-tabs,
.customer-tabs,
.settings-subnav {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
}

.wz-tab,
.soc-mode-tabs button,
.dashboard-drill-tab,
.bastion-archive-tab,
.customer-tabs .subnav-item,
.settings-subnav-item {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 -1px;
  padding: 0 var(--sp-3);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--clr-xmuted);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
}

.wz-tab:hover,
.soc-mode-tabs button:hover,
.dashboard-drill-tab:hover,
.bastion-archive-tab:hover,
.customer-tabs .subnav-item:hover,
.settings-subnav-item:hover {
  border-bottom-color: var(--clr-border-mid);
  background: transparent;
  color: var(--clr-text);
}

.wz-tab.is-active,
.soc-mode-tabs button.active,
.dashboard-drill-tab.is-active,
.bastion-archive-tab.active,
.customer-tabs .subnav-item.active,
.settings-subnav-item.active {
  border-bottom-color: var(--clr-primary);
  background: transparent;
  color: var(--clr-text);
  font-weight: 700;
  box-shadow: none;
}

/* Zähler am Reiter sind Nebeninformation und bleiben neutral; farbig gefüllt
   sahen sie aus wie Statusmeldungen. */
.wz-tab-count,
.soc-mode-tabs button b,
.settings-subnav-badge {
  min-width: 18px;
  height: 17px;
  padding: 0 var(--sp-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--clr-subtle);
  color: var(--clr-xmuted);
  font-size: var(--fs-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wz-tab.is-active .wz-tab-count,
.soc-mode-tabs button.active b,
.settings-subnav-item.active .settings-subnav-badge {
  background: var(--clr-info-bg);
  color: var(--clr-primary-dark);
}

/* Modulmarken bleiben auch in der Unterebene sichtbar. Sie erleichtern die
   Orientierung beim Wechsel zwischen ähnlich benannten Arbeitsbereichen. */
.settings-subnav-item .subnav-logo {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

/* Der SOC-Modulkopf wiederholte Eyebrow und Titel des Seitenkopfs direkt
   darunter. Übrig bleibt die Einordnung in einer Zeile mit Live-Status und
   Aktualisieren — dieselbe Anordnung wie die Werkzeugleiste im Monitoring. */
.soc-header-lead {
  margin: 0;
  color: var(--clr-muted);
  font-size: var(--fs-sm);
}

/* ════════════════════════════════════════════════════════════════════════════
   Kennzahlenstreifen — dieselbe Bauform in Monitoring und SOC

   Das Monitoring zeigt seine Kennzahlen als einen zusammenhängenden Streifen
   mit inneren Trennlinien, das SOC zeigte sieben einzeln gerahmte Kacheln mit
   Schatten. Es ist dieselbe Information in derselben Rolle; sie bekommt
   dieselbe Form.
   ════════════════════════════════════════════════════════════════════════════ */
.soc-summary {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
}

.soc-kpi {
  min-height: 0;
  gap: var(--sp-1);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.soc-kpi + .soc-kpi {
  border-left: 1px solid var(--clr-border);
}

.soc-kpi span {
  color: var(--clr-xmuted);
  font-weight: 600;
}

.soc-kpi strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.soc-kpi:hover,
.soc-kpi--active {
  border-color: var(--clr-border);
  background: var(--clr-info-bg);
  box-shadow: none;
}

.soc-kpi--active {
  box-shadow: inset 0 -2px 0 var(--clr-primary);
}

/* Die Kennzahlenzeile darunter gehört zum selben Block. */
.soc-performance {
  grid-column: 1 / -1;
  border-top: 1px solid var(--clr-border);
}

/* ── Filterchips ─────────────────────────────────────────────────────────────
   Gespeicherte Ansichten sind Filter, keine Hauptaktionen: neutrale Fläche,
   aktiver Zustand über Rahmen und Textfarbe statt über eine Vollfläche. */
.soc-view-chip {
  min-height: 28px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.soc-view-chip:hover {
  border-color: var(--clr-border-mid);
  background: var(--clr-surface-alt);
  color: var(--clr-text);
}

.soc-view-chip.active {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
  color: var(--clr-primary-dark);
}

.soc-view-chip b,
.soc-view-chip.active b {
  background: transparent;
  color: inherit;
  font-weight: 700;
}

/* Der Einstellungen-Überblick wiederholte Eyebrow und Titel des Seitenkopfs.
   Übrig bleibt die Einordnung als Fließtext — wie der Modulkopf im SOC. */
.settings-overview-lead {
  margin: 0;
  color: var(--clr-muted);
  font-size: var(--fs-sm);
}

/* ════════════════════════════════════════════════════════════════════════════
   QTC-Einstieg — Auswahl statt Werbeseite

   Die Startseite trug eine Display-Überschrift bis 1.8rem und stellte den
   ersten von drei gleichrangigen Wegen als vollflächig blaue Kachel heraus.
   Das ist die Bauform einer Preisseite; hier wählt eine Technikerin einen von
   drei Diagnosewegen. Alle drei bekommen dieselbe Fläche, der empfohlene Weg
   wird über eine Akzentkante geführt statt über Farbe im Vollton.
   ════════════════════════════════════════════════════════════════════════════ */
.bastion-welcome-intro h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.bastion-welcome-intro p:last-child {
  color: var(--clr-muted);
  font-size: var(--fs-sm);
}

.bastion-welcome-action {
  min-height: 0;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--clr-border);
  background: var(--clr-surface);
}

.bastion-welcome-action strong {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.bastion-welcome-action span {
  font-size: var(--fs-xs);
}

.bastion-welcome-action--primary {
  border-color: var(--clr-border);
  border-left-color: var(--clr-primary);
  background: var(--clr-surface);
  color: var(--clr-text);
}

.bastion-welcome-action--primary:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.bastion-welcome-action--primary strong {
  color: var(--clr-primary-dark);
}

.bastion-welcome-action--primary span {
  color: var(--clr-muted);
}

/* Der Einstieg ist der Inhalt der Seite, keine schwebende Karte darauf. */
.bastion-welcome-command {
  box-shadow: none;
}

/* Kunden- und Asset-Reiter folgen derselben Bauform wie die übrigen Reiter. */
.customer-tabs {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.customer-tabs .subnav-item,
.content--customer .subnav-item,
.content--device .subnav-item {
  min-height: 36px;
  padding: 0 var(--sp-3);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--clr-xmuted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.customer-tabs .subnav-item:hover {
  border-bottom-color: var(--clr-border-mid);
  background: transparent;
  color: var(--clr-text);
}

.customer-tabs .subnav-item.active {
  border-bottom-color: var(--clr-primary);
  background: transparent;
  color: var(--clr-text);
  font-weight: 700;
}

.customer-tabs .subnav-logo {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

/* Die Geräte-Unterleiste ist derselbe Reiter-Typ wie Kunden- und Sektionsreiter. */
.subnav {
  padding: 0;
  background: transparent;
}

.subnav .subnav-item {
  min-height: 36px;
  padding: 0 var(--sp-3);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--clr-xmuted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.subnav .subnav-item:hover {
  border-bottom-color: var(--clr-border-mid);
  background: transparent;
  color: var(--clr-text);
}

.subnav .subnav-item.active {
  border-bottom-color: var(--clr-primary);
  background: transparent;
  color: var(--clr-text);
  font-weight: 700;
}

.subnav .subnav-logo {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

/* ════════════════════════════════════════════════════════════════════════════
   SOC-Queue — Feinschliff an der Arbeitsfläche
   ════════════════════════════════════════════════════════════════════════════ */

/* „Übernehmen" gibt es nur bei nicht zugewiesenen Alerts. Linksbündig sprang
   „Details" dadurch je Zeile um die Breite dieses Knopfes hin und her; das Ziel
   für den immer gleichen Klick lag nie an derselben Stelle. */
.soc-row-actions {
  justify-content: flex-end;
}

/* Der Kontextstreifen stand auch ohne Filter als leere Zeile über der Liste und
   sagte dort nur, wonach die aktive Sortierung ohnehin sortiert. */
.soc-filter-context:empty {
  display: none;
}

/* ── Filterleiste ────────────────────────────────────────────────────────────
   Vorher standen acht Felder dauerhaft offen über der Queue, sechs davon in der
   Regel auf „Alle". Das Formular nahm damit mehr Höhe ein als die ersten drei
   Alerts. Suche und Sortierung bleiben sichtbar — sie werden ständig benutzt —,
   der Rest klappt auf und meldet über den Zähler, wie viele Filter greifen. */
.soc-filter-panel {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
}

/* Das Formular trug ein festes Fünfspaltenraster für die alte Feldreihe. Es
   führt jetzt nur noch zwei Zeilen: sichtbare Grundeinstellung und Aufklapper. */
.soc-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding: 0;
}

.soc-filter-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
  gap: var(--sp-3);
  align-items: end;
}

.soc-filter-primary .soc-search {
  grid-column: auto;
}

.soc-filter-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  min-height: 28px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--clr-primary-dark);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.soc-filter-more > summary::-webkit-details-marker { display: none; }

.soc-filter-more > summary::before {
  content: "›";
  display: inline-block;
  color: var(--clr-xmuted);
  transition: transform var(--t-fast);
}

.soc-filter-more[open] > summary::before {
  transform: rotate(90deg);
}

.soc-filter-more > summary:hover {
  background: var(--clr-info-bg);
}

.soc-filter-more > summary b {
  min-width: 18px;
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
  background: var(--clr-info-bg);
  color: var(--clr-primary-dark);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.soc-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

@media (max-width: 900px) {
  .soc-filter-primary { grid-template-columns: minmax(0, 1fr); }
}

/* Der Tastaturhinweis gehört an die Beschriftung, nicht an das andere Ende der
   Suchzeile — dort stand er über dem Feldrand ohne erkennbaren Bezug. */
.soc-filter-primary .soc-search > span {
  justify-content: flex-start;
  gap: var(--sp-2);
}

/* ── SOC-Reiter Cases und Betrieb ────────────────────────────────────────────
   Beide Reiter wiederholten unter ihrem eigenen Namen nochmals Eyebrow und
   Titel derselben Ansicht. Übrig bleibt die Einordnung in einer Zeile. */
.soc-section-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.soc-section-lead {
  margin: 0;
  color: var(--clr-muted);
  font-size: var(--fs-sm);
}

/* Anlegen ist nicht die Hauptaufgabe des Reiters — überprüfen ist es. Das
   Formular lag als gefüllter Primärknopf mitten in der Filterzeile und war das
   auffälligste Element einer ansonsten leeren Ansicht. */
.soc-case-create > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-primary-dark);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.soc-case-create > summary::-webkit-details-marker { display: none; }

.soc-case-create > summary::before {
  content: "+";
  color: var(--clr-xmuted);
}

.soc-case-create > summary:hover {
  border-color: var(--clr-primary);
  background: var(--clr-info-bg);
}

.soc-case-create[open] {
  flex-basis: 100%;
}

.soc-case-create form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

/* ── SLA-Vorgaben ────────────────────────────────────────────────────────────
   Vorher trug jede Schweregradzeile ein eigenes Formular samt Speichern-Knopf;
   wer zwei Zeilen änderte und einmal speicherte, verlor die zweite Änderung. */
.soc-policy-list {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
}

.soc-policy-row {
  display: grid;
  grid-template-columns: minmax(84px, 110px) minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--sp-3);
}

.soc-policy-row > strong {
  padding-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.soc-policy-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--clr-border);
}

@media (max-width: 720px) {
  .soc-policy-row { grid-template-columns: minmax(0, 1fr); }
}

/* Die Spaltenköpfe standen an jeder der vier Schweregradzeilen. Sie gehören
   einmal an den Kopf; die Felder behalten ihre Beschriftung für Screenreader. */
.soc-policy-head {
  color: var(--clr-xmuted);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .soc-policy-head { display: none; }
}

/* Monitoring: priorisierte Arbeitsliste und kontexttreue Ereignisdetails. */
.mon-data-notice {
  padding: 9px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface, #fff);
  color: var(--clr-xmuted);
  font-size: 12px;
}
.mon-data-notice summary { cursor: pointer; color: var(--clr-text); font-weight: 600; }
.mon-data-notice summary span { margin-left: 12px; color: var(--clr-xmuted); font-weight: 400; }
.mon-data-notice p { max-width: 105ch; margin: 10px 0 2px; line-height: 1.6; }
.mon-worklist { margin-bottom: 8px; }
.mon-cockpit--overview .wz-panel--overview > * { flex: 0 0 auto; }
.mon-mobile-label { display: none; }
.mon-worklist .mon-reference-table-wrap:focus-visible { outline: 2px solid var(--b-500, #1d5fd0); outline-offset: -2px; }
.mon-worklist > header { min-height: 30px; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.mon-worklist > header > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.mon-worklist small, .mon-reference-card .mon-event-snapshot { font-size: 12px; line-height: 1.5; }
.mon-work-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 10px 5px; }
.mon-work-filters .wz-btn { min-height: 28px; padding: 3px 8px; font-size: 12px; }
.mon-work-filters [aria-pressed="true"] { color: var(--b-700, #1746a2); border-color: var(--b-400, #6189d8); background: var(--b-50, #eff5ff); }
/* Keep fleet tables and their context at the same compact density. */
.mon-cockpit .wz-panel { gap: 6px; }
.mon-cockpit .wz-table th, .mon-cockpit .wz-table td { padding: 6px 10px; line-height: 1.3; }
.mon-cockpit .wz-view-context { padding-block: 3px; gap: 4px 8px; }
.mon-cockpit .wz-view-context p { margin: 0; }
.mon-cockpit .wz-statuspills { margin-block: 0; gap: 4px; }
.mon-work-table { min-width: 820px; table-layout: fixed; }
.mon-work-table th, .mon-work-table td { padding: 7px 10px; font-size: 12px; }
.mon-work-table th:first-child, .mon-work-table td:first-child { width: 83px; padding-right: 4px; }
.mon-work-table th:nth-child(2) { width: auto; }
.mon-work-table th:nth-child(3) { width: 150px; }
.mon-work-table th:nth-child(4) { width: 79px; }
.mon-work-table th:nth-child(5) { width: 82px; }
.mon-work-table .mon-problem-customer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-work-table th:last-child { width: 105px; }
.mon-work-table td { vertical-align: middle; }
.mon-problem-row, .mon-problem-detail-row { --problem-tone: var(--clr-muted); }
.mon-problem-row--risk { --problem-tone: var(--clr-risk); }
.mon-problem-row--warn { --problem-tone: var(--clr-warn); }
.mon-problem-row > td:first-child { border-left: 3px solid var(--problem-tone); }
.mon-work-table .mon-problem-row[data-expanded="true"] > td { background: var(--clr-surface-alt); border-bottom-color: transparent; }
.mon-problem-line { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-height: 26px; }
.mon-problem-toggle { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 26px; padding: 0; border: 0; background: transparent; color: var(--clr-text); font: inherit; font-weight: 600; line-height: 1.35; text-align: left; white-space: normal; cursor: pointer; }
.mon-problem-toggle:hover { color: var(--clr-primary); }
.mon-problem-chevron { display: inline-block; color: var(--clr-muted); font-size: 18px; transition: transform .12s; }
.mon-problem-toggle[aria-expanded="true"] .mon-problem-chevron { transform: rotate(90deg); }
.mon-problem-scope { color: var(--clr-muted); font-size: 11px; white-space: nowrap; }
.mon-problem-assets { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mon-asset-chip { max-width: 110px; min-height: 24px; padding: 2px 6px; border: 1px solid var(--clr-border); border-radius: 4px; background: var(--clr-surface-alt); color: var(--clr-text); font: inherit; font-size: 11px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mon-asset-chip:hover { color: var(--clr-primary); border-color: var(--clr-primary); }
.mon-problem-toggle:focus-visible, .mon-asset-chip:focus-visible, .mon-asset-detail:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }
.mon-severity { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--clr-subtle); color: var(--clr-muted); }
.mon-severity--risk { background: var(--clr-risk-bg); color: var(--clr-risk); }
.mon-severity--warn { background: var(--clr-warn-bg); color: var(--clr-warn); }
.mon-severity--ok { background: var(--clr-ok-bg); color: var(--clr-ok); }
.mon-severity--info { background: var(--clr-info-bg); color: var(--clr-info); }
.mon-problem-new { display: inline-block; margin-left: 4px; width: 5px; height: 5px; background: var(--clr-primary); border-radius: 50%; vertical-align: middle; }
.mon-problem-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.mon-sparkline { display: inline-flex; align-items: center; color: var(--problem-tone); }
.mon-sparkline svg { display: block; }
.mon-sparkline--partial polyline { stroke-dasharray: 2 1; }
.mon-sparkline > span { font-size: 11px; }
.mon-sparkline-empty { color: var(--clr-muted); }
.mon-problem-detail-row[hidden] { display: none; }
.mon-work-table .mon-problem-detail-row > td { padding: 0; }
.mon-problem-expansion { padding: 12px 24px 18px 96px; border-left: 3px solid var(--problem-tone); background: var(--clr-surface-alt); white-space: normal; overflow-wrap: anywhere; }
.mon-problem-expansion > p { margin: 0 0 8px; max-width: 100ch; color: var(--clr-muted); font-size: 12px; line-height: 1.5; }
.mon-problem-expansion > .mon-next-step { margin: 0 0 14px; color: var(--clr-text); font-size: 13px; line-height: 1.6; }
.mon-problem-asset-row { display: grid; grid-template-columns: minmax(160px, 1.3fr) minmax(140px, 1fr) 105px 110px; align-items: center; gap: 12px; padding: 4px 0; border-top: 1px solid var(--clr-border); font-size: 12px; }
.mon-asset-detail { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 3px 0; min-height: 26px; border: 0; background: transparent; color: var(--clr-primary); font: inherit; text-align: left; cursor: pointer; }
.mon-asset-detail > span { color: var(--clr-muted); font-size: 11px; }
.mon-problem-expansion-actions, .mon-problem-expansion-actions nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 8px; }
.mon-problem-expansion-actions .wz-btn { min-height: 28px; padding: 3px 8px; font-size: 12px; }
.mon-problem-expansion-actions .mon-secondary-action { background: transparent; color: var(--clr-muted); }
.mon-problem-expansion-actions .mon-secondary-action:hover { background: var(--clr-surface); color: var(--clr-text); }
.mon-event-assets .wz-btn { margin: 4px; white-space: normal; }
.mon-work-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 10px; font-size: 12px; color: var(--clr-xmuted); border-top: 1px solid var(--clr-border); }
.mon-work-footer nav { display: flex; align-items: center; gap: 10px; }
.mon-work-footer .wz-btn { min-height: 28px; padding: 3px 8px; }
.mon-work-footer button:disabled { opacity: .45; cursor: default; }
.mon-source-bars { display: grid; gap: 5px; padding: 4px 16px 10px; }
.mon-source-bar { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(50px, 1.2fr) 48px; align-items: center; gap: 12px; min-height: 34px; padding: 5px 7px; background: transparent; border: 1px solid transparent; border-radius: 4px; text-align: left; color: var(--clr-text); font-size: 12px; cursor: pointer; }
.mon-source-bar:hover, .mon-source-bar[aria-pressed="true"] { background: var(--b-50, #eff5ff); border-color: var(--clr-border); }
.mon-source-bar strong { text-align: right; font-variant-numeric: tabular-nums; }
.mon-source-bar meter { width: 100%; height: 8px; }
.mon-source-bar meter::-webkit-meter-bar { background: #e8edf4; border: 0; }
.mon-source-bar meter::-webkit-meter-optimum-value { background: #1d5fd0; }
.mon-attack-categories { padding: 12px 16px; border-top: 1px solid var(--clr-border); }
.mon-attack-categories h3 { font-size: 12px; margin: 0 0 6px; }
.mon-event-snapshot { font-size: 12px; color: var(--clr-xmuted); line-height: 1.6; margin: 4px 0 12px; }
.mon-event-backdrop { display: flex; justify-content: flex-end; align-items: stretch; padding: 0; background: rgba(19, 32, 51, .25); z-index: 1200; }
.mon-event-drawer { display: flex; flex-direction: column; width: min(700px, 100vw); max-width: 100%; height: 100dvh; min-height: 0; background: var(--clr-surface); color: var(--clr-text); box-shadow: -12px 0 36px rgba(19,32,51,.15); }
.mon-event-drawer > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--clr-border); }
.mon-event-drawer > header small { font-size: 12px; color: var(--clr-xmuted); }
.mon-event-drawer h2 { font-size: 20px; line-height: 1.4; margin: 6px 0 0; overflow-wrap: anywhere; }
.mon-event-drawer h3 { font-size: 14px; margin: 20px 0 8px; }
.mon-event-drawer .wz-btn { min-height: 36px; flex-shrink: 0; }
.mon-event-drawer-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; padding: 0 24px 24px; font-size: 13px; line-height: 1.6; }
.mon-event-drawer-body > p { margin: 18px 0; }
.mon-event-drawer dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 9px 16px; }
.mon-event-drawer dt { color: var(--clr-xmuted); }
.mon-event-drawer dd { margin: 0; overflow-wrap: anywhere; }
.mon-event-facts { padding: 16px; background: var(--clr-surface-alt); border-radius: var(--radius-md); }
.mon-event-action { border-left: 3px solid var(--b-500, #1d5fd0); padding-left: 14px; }
.mon-event-drawer > footer { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--clr-border); }
.mon-occurrence-detail { padding: 12px 0; border-bottom: 1px solid var(--clr-border); }
.mon-occurrence-detail summary { font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }
.mon-occurrence-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow-y: auto; padding: 12px; background: var(--clr-surface-alt); font-size: 12px; line-height: 1.6; }
.mon-worklist button:focus-visible, .mon-source-bar:focus-visible, .mon-data-notice summary:focus-visible, .mon-event-drawer :is(button, summary):focus-visible { outline: 2px solid var(--b-500, #1d5fd0); outline-offset: 3px; }
.app--monitoring .tree-filter-chips .tree-filter-chip { min-height: 27px; font-size: 11px; }
.mon-cockpit--overview .mon-overview-kpi > small, .mon-reference-legend-item { font-size: 12px; }
@media (max-width: 1100px) {
  .mon-worklist .mon-reference-table-wrap { overflow: visible; }
  .mon-work-table { display: block; min-width: 0; width: 100%; }
  .mon-work-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mon-work-table tbody { display: block; }
  .mon-work-table .mon-problem-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "problem problem problem" "customer customer customer" "severity count trend" "time time time"; align-items: center; gap: 6px 12px; padding: 12px; border-left: 3px solid var(--problem-tone); border-bottom: 1px solid var(--clr-border); }
  .mon-work-table .mon-problem-row > td { display: block; width: auto; min-width: 0; padding: 0; border: 0; white-space: normal; }
  .mon-work-table .mon-problem-row[data-expanded="true"] { background: var(--clr-surface-alt); border-bottom: 0; }
  .mon-work-table .mon-problem-title { grid-area: problem; }
  .mon-work-table .mon-problem-customer { grid-area: customer; overflow-wrap: anywhere; }
  .mon-work-table .mon-problem-severity { grid-area: severity; }
  .mon-work-table .mon-problem-count { grid-area: count; }
  .mon-work-table .mon-problem-trend { grid-area: trend; justify-self: end; }
  .mon-work-table .mon-problem-time { grid-area: time; color: var(--clr-muted); }
  .mon-mobile-label { display: inline; color: var(--clr-muted); font-weight: 400; }
  .mon-problem-toggle { min-height: 44px; font-size: 14px; }
  .mon-asset-chip { min-height: 36px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .mon-work-table .mon-problem-detail-row, .mon-work-table .mon-problem-detail-row > td { display: block; width: auto; }
  .mon-work-table .mon-problem-detail-row[hidden] { display: none; }
  .mon-problem-expansion { padding: 4px 12px 16px; }
  .mon-problem-asset-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding-block: 8px; }
  .mon-problem-asset-row > .mon-asset-detail { grid-column: 1 / -1; min-height: 44px; overflow-wrap: anywhere; }
  .mon-problem-asset-row > time { grid-column: 1 / -1; color: var(--clr-muted); }
}
@media (max-width: 760px) {
  .mon-work-filters .wz-btn, .mon-work-footer .wz-btn, .mon-problem-expansion-actions .wz-btn, .mon-asset-chip { min-height: 44px; }
  .mon-data-notice summary span { display: block; margin: 5px 0 0; }
  .mon-work-footer nav { width: 100%; justify-content: space-between; }
  .mon-event-drawer > header, .mon-event-drawer > footer { padding: 16px; }
  .mon-event-drawer-body { padding-inline: 16px; }
  .mon-event-drawer dl { grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }
}
/* Operator accounts: native labelled controls, responsive layout. */
.operator-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.operator-form h3, .operator-form fieldset { grid-column: 1 / -1; }
.operator-form label { display: grid; gap: .35rem; align-content: start; }
.operator-form small { color: var(--clr-muted); font-size: .8rem; }
.operator-form input:not([type="checkbox"]), .operator-form select { width: 100%; min-height: 2.5rem; padding: .5rem; border: 1px solid var(--clr-border); border-radius: .35rem; background: var(--clr-surface, white); color: var(--clr-text); }
.operator-form label:has(input[type="checkbox"]) { display: flex; align-items: center; }
.operator-form fieldset { border: 1px solid var(--clr-border); border-radius: .35rem; padding: .8rem; }
.operator-form [data-customer-choices] { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .5rem; margin-top: .75rem; }
.operator-form [hidden] { display: none; }
@media (max-width: 700px) { .operator-form { grid-template-columns: 1fr; } }

.canonical-finding, .canonical-quality { margin-block: .8rem; border: 1px solid var(--clr-border); border-radius: .35rem; padding: .8rem; }
.canonical-finding summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
.canonical-finding summary span { color: var(--clr-muted); font-size: .8rem; }
.canonical-finding dl { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 3fr); gap: .5rem 1rem; }
.canonical-finding dd { margin: 0; overflow-wrap: anywhere; }
.canonical-finding dd p { margin: 0 0 .4rem; }
.canonical-search { display: grid; gap: .4rem; margin-top: 1rem; max-width: 34rem; }
.canonical-search input { padding: .65rem; border: 1px solid var(--clr-border); border-radius: .35rem; min-width: 0; }
[data-findings-more][hidden] { display: none; }
@media (max-width: 550px) { .canonical-finding dl { grid-template-columns: 1fr; } }

.operator-form input[type="checkbox"] { width: 1rem; height: 1rem; min-width: 1rem; flex: 0 0 auto; margin: 0; }
.operator-form label:has(input[type="checkbox"]) { justify-content: flex-start; gap: .5rem; }

#tree-customer-create[hidden],
body[data-operator-role="viewer"] [data-section="bastion"],
body[data-operator-scoped="true"] [data-section="bastion"],
body[data-operator-role="viewer"] .soc-detail-actions,
body[data-operator-role="viewer"] .soc-terminal-actions,
body[data-operator-role="viewer"] .soc-assign-form,
body[data-operator-role="viewer"] .soc-note-form,
body[data-operator-role="viewer"] .soc-sla-form,
body[data-operator-role="viewer"] .soc-bulk,
body[data-operator-role="viewer"] [data-soc-action],
body[data-operator-role="viewer"] [data-soc-create-case] { display: none; }

body[data-operator-scoped="true"] [data-soc-mode="operations"],
body[data-operator-role="viewer"] [data-soc-case-create-form],
body[data-operator-role="viewer"] [data-soc-case-action],
body[data-operator-role="viewer"] [data-soc-task-add],
body[data-operator-role="viewer"] [data-soc-task-complete],
body[data-operator-role="viewer"] [data-soc-handover-form],
body[data-operator-role="viewer"] [data-soc-policy-form],
body[data-operator-role="viewer"] [data-soc-suppression-revoke] { display: none; }
.auth-dialog { width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 3rem); overflow-y: auto; padding: 1.25rem; border: 1px solid var(--clr-border-mid, var(--border, #596576)); border-radius: 12px; color: var(--clr-text, var(--text, #e8edf3)); background: var(--clr-surface, var(--surface, #19212c)); box-shadow: 0 16px 60px #0006; }
.auth-dialog::backdrop { background: #0009; }
.auth-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-dialog h2 { margin: 0; font-size: 1.15rem; color: inherit; }
.auth-dialog p, .auth-dialog small, .auth-dialog label, .auth-dialog summary { color: inherit; }
.auth-dialog p { line-height: 1.5; }
.auth-dialog form, .auth-dialog label:not(.auth-check) { display: grid; gap: .5rem; }
.auth-dialog form { gap: .9rem; margin-block: 1rem; }
.auth-dialog input:not([type=checkbox]) { width: 100%; min-width: 0; padding: .6rem .75rem; border: 1px solid var(--clr-border-mid, var(--border, #778290)); border-radius: 6px; color: inherit; background: var(--clr-surface-alt, var(--surface-soft, #f7f9fc)); font: inherit; }
.auth-dialog button, .auth-factor-list button, .auth-actions button { min-height: 34px; padding: .45rem .75rem; border: 1px solid var(--clr-border-mid, var(--border, #778290)); border-radius: 6px; color: inherit; background: var(--clr-surface-alt, var(--surface, #263443)); font: inherit; cursor: pointer; }
.auth-dialog button:disabled { opacity: .5; cursor: default; }
.auth-dialog [data-error] { margin-bottom: 0; }
.auth-qr { display: block; margin: .75rem auto; max-width: 100%; height: auto; border: 8px solid white; background: white; }
.auth-secret { display: block; overflow-wrap: anywhere; margin-block: .75rem; }
.auth-recovery { font-size: .8rem; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.auth-check { display: flex; align-items: center; gap: .6rem; margin-block: 1rem; }
.auth-check input { width: auto; margin: 0; }
.auth-factor-list { padding: 0; list-style: none; }
.auth-factor-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .5rem; border-bottom: 1px solid var(--clr-border, var(--border, #596576)); }
.auth-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
[data-auth-security] { margin-top: 1.25rem; }

/* KI settings: runner status and maintenance stay separate from endpoint mapping. */
.runner-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 20px 0; }
.runner-facts > div { min-width: 0; }
.runner-facts dt { color: var(--clr-muted); font-size: 12px; margin-bottom: 6px; }
.runner-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.runner-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.runner-settings-card { min-width: 0; padding: 20px; border: 1px solid var(--clr-border); border-radius: 12px; }
.runner-settings-card h3, .runner-operation h3 { margin: 0 0 10px; }
.runner-settings-card .llm-field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.runner-settings-card input, .runner-settings-card select { width: 100%; min-height: 38px; box-sizing: border-box; }
.runner-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.runner-operation { margin-top: 20px; padding: 18px; border: 1px solid var(--clr-border); border-radius: 12px; }
.runner-operation small, .runner-operation time { color: var(--clr-muted); }
.runner-operation details { margin-top: 12px; }
.runner-operation li { margin: 8px 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .runner-settings-grid { grid-template-columns: 1fr; } .runner-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .runner-facts { grid-template-columns: 1fr; } .runner-settings-card { padding: 14px; } }
.runner-settings-card [hidden] { display: none; }
.runner-model-refresh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.runner-model-refresh p { flex: 1 1 180px; }
.runner-settings-card [data-runner-model-detail] { overflow-wrap: anywhere; }
/* Agent/customer management: a column dialog — slim head, the list in the room
   that is left, and the assignment bar at the bottom where the selecting
   happens. Standing prose lives in a fold; it used to push the list itself
   below the fold every time the dialog opened. */
.modal-backdrop.agent-customer-backdrop { z-index: 1200; padding: 8px; }
.agent-customer-management {
  display: flex;
  flex-direction: column;
  width: min(1280px, 100%);
  min-width: 0;
  max-height: calc(100dvh - 40px);
  padding: 18px 20px 0;
  background: var(--clr-surface, #fff);
  color: var(--clr-text, #172b3a);
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  box-shadow: 0 20px 60px #0003;
}

.management-header, .management-toolbar, .management-row-actions, .management-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.management-header { gap: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--clr-border); }
.management-header h2 { margin: 0; font-size: 18px; white-space: nowrap; }
.management-close { margin-left: auto; }
.management-tabs { gap: 8px; }
.management-tabs button[aria-pressed="true"] { border-color: var(--clr-primary); background: var(--b-50, #eef4ff); color: var(--clr-primary); font-weight: 700; }
.management-tabs span { font-size: 12px; margin-left: 6px; color: var(--clr-muted); }
.management-tabs button[aria-pressed="true"] span { color: inherit; }

.agent-customer-management button {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  color: var(--clr-text);
  background: var(--clr-surface);
  cursor: pointer;
}
.agent-customer-management button:hover:not(:disabled) { border-color: var(--clr-border-mid, var(--clr-muted)); }
.agent-customer-management .management-primary,
.agent-customer-management button[type="submit"] { border-color: var(--clr-primary); background: var(--clr-primary); color: #fff; font-weight: 600; }
.agent-customer-management button:disabled { cursor: default; opacity: .55; }
.agent-customer-management label { display: grid; gap: 5px; font-size: 13px; }
.agent-customer-management input:not([type="checkbox"]),
.agent-customer-management select { width: 100%; min-width: 0; min-height: 32px; padding: 6px 9px; border: 1px solid var(--clr-border); border-radius: 6px; background: var(--clr-surface, #fff); color: inherit; }

/* Only this part scrolls, so the list keeps the height instead of the head. */
.management-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 12px; }
.management-toolbar { margin: 12px 0; align-items: end; }
.management-toolbar label { flex: 1 1 220px; max-width: 340px; }
.management-toolbar-spacer { flex: 1 1 auto; text-align: right; color: var(--clr-muted); font-size: 12px; }

.management-hint { margin-bottom: 10px; color: var(--clr-muted); font-size: 12px; line-height: 1.5; }
.management-hint > summary { cursor: pointer; min-height: 24px; padding: 3px 0; }
.management-hint p { margin: 4px 0; max-width: 90ch; }

.management-table-scroll { overflow-x: auto; }
.agent-customer-management table { min-width: 630px; width: 100%; }
.agent-customer-management tbody tr { cursor: pointer; }
.agent-customer-management tbody tr:hover { background: var(--clr-surface-alt); }
/* While the list is filtered to one customer, the customer column repeats the
   filter on every row and says nothing. */
.agent-customer-management table.is-scoped thead th:nth-child(3),
.agent-customer-management table.is-scoped tbody td:nth-child(3) { display: none; }
.agent-customer-management td small { display: block; color: var(--clr-muted); overflow-wrap: anywhere; }
.agent-customer-management td.management-row-actions { display: table-cell; white-space: nowrap; }
.agent-customer-management td.management-row-actions button + button { margin-left: 6px; }

/* Appears only with a selection, and stays in reach of the rows being ticked. */
.management-actionbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 -20px;
  padding: 12px 20px;
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface-alt);
}
.management-actionbar[hidden] { display: none; }
.management-actionbar > strong { padding-bottom: 7px; white-space: nowrap; }
.management-actionbar-target { flex: 1 1 260px; max-width: 420px; }
.management-review { flex: 0 1 auto; max-height: 150px; overflow: auto; font-size: 12px; }
.management-review summary { cursor: pointer; padding-bottom: 7px; color: var(--clr-muted); }
.management-review ul { margin: 4px 0 0; padding-left: 18px; }

.agent-customer-management [data-management-status] { color: var(--clr-text); margin: 8px 0 0; }
.agent-customer-management [data-management-status].management-error { color: var(--r-700, #b42318); }
.agent-customer-management [data-management-status]:empty { display: none; }
.management-error { color: var(--r-700, #b42318); }
.management-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.management-customer-editor { padding: 12px 0; }
.management-customer-editor h3 { margin: 0 0 12px; font-size: 15px; }

@media (max-width: 700px) {
  .agent-customer-management { padding: 14px 14px 0; max-height: calc(100dvh - 16px); }
  .management-header { gap: 10px; }
  .management-fields { grid-template-columns: 1fr; }
  .management-toolbar label { max-width: none; }
  .management-actionbar { margin: 0 -14px; padding: 10px 14px; }
  .management-toolbar > button, .management-actionbar > button { flex: 1; }
}
/* Device policy extends the shared management dialog. */
.event-baseline-management .management-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.event-baseline-management .baseline-routine-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.event-baseline-management .baseline-routine-option input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}
.event-baseline-management [data-baseline-status]:empty {
  display: none;
}
@media (max-width: 600px) {
  .event-baseline-management .management-fields { grid-template-columns: 1fr; }
}
/* QTC conversation and the original PTY are two views of one session.
   One layer, one place per decision: the file grew in five generations that
   overrode each other (the transcript width was declared three times, the
   panel height five times with five different viewport offsets). Everything
   below is stated once. The application occupies the viewport; flex layout gives the remaining
   height to the active work area. Only that area owns vertical scrolling. */

/* ── Tokens ──────────────────────────────────────────────────────────────────
   The workspace is a self-contained console surface, so it carries its own
   palette and also remaps the app tokens: session elements moved into the
   nav and menus then inherit correct colours instead of needing per-element
   dark-mode patches. `--qtc-edge` is the meaning-carrying border (inputs,
   table grid, bubbles) at >=3:1 against its surface, `--qtc-line` the quiet
   separator. Both themes are checked against those ratios. */
.qtc-workspace[data-qtc-theme="light"] {
  color-scheme: light;
  --qtc-bg: #fff; --qtc-bg-alt: #f6f7f9; --qtc-bubble: #eef2f8;
  --qtc-line: #e4e8ec; --qtc-edge: #8b939c;
  --qtc-text: #23282f; --qtc-muted: #5c646e; --qtc-link: #2a5b96;
  --qtc-risk: #b3261e; --qtc-risk-bg: #fdeceb; --qtc-ok: #1a7f4b; --qtc-warn: #8a5300;
  --qtc-accent-fg: #fff; --qtc-shadow: #10182824;
}
.qtc-workspace[data-qtc-theme="dark"] {
  color-scheme: dark;
  --qtc-bg: #17181a; --qtc-bg-alt: #1e2023; --qtc-bubble: #232936;
  --qtc-line: #2f3338; --qtc-edge: #666c74;
  --qtc-text: #e3e5e8; --qtc-muted: #a8adb4; --qtc-link: #9cc0f0;
  --qtc-risk: #ff9d92; --qtc-risk-bg: #3a2523; --qtc-ok: #7fd6a8; --qtc-warn: #e5be81;
  --qtc-accent-fg: #17181a; --qtc-shadow: #00000073;
}
.qtc-workspace[data-qtc-theme] {
  --clr-surface: var(--qtc-bg); --clr-surface-alt: var(--qtc-bg-alt); --b-50: var(--qtc-bubble);
  --clr-border: var(--qtc-line); --border-color: var(--qtc-line); --panel-bg: var(--qtc-bg);
  --clr-text: var(--qtc-text); --clr-muted: var(--qtc-muted); --clr-text-muted: var(--qtc-muted);
  --clr-primary: var(--qtc-link); --clr-primary-light: var(--qtc-bubble);
  --clr-risk: var(--qtc-risk); --clr-risk-bg: var(--qtc-risk-bg);
  --clr-success: var(--qtc-ok); --clr-warning: var(--qtc-warn);
}

/* ── Shell ───────────────────────────────────────────────────────────────── */
.bastion-detail { position: relative; }
.qtc-workspace {
  display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0 6px; min-width: 0;
  background: var(--qtc-bg); color: var(--qtc-text); border-radius: var(--radius-md);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.qtc-workspace + .bastion-terminal-frame {
  flex: 0 1 auto;
  /* The legacy PTY has an independent, permanently dark palette. */
  --n-0: #fff; --n-25: #f7f9fc; --n-50: #eef1f6; --n-200: #dde3ec;
  --n-300: #c7d0db; --n-400: #8496a8; --n-500: #5f7288;
  --n-600: #536b77; --n-700: #4d5f70; --n-800: #2e3c4c; --n-900: #0f1a26;
}
.qtc-workspace:has([data-qtc-mode="raw"][aria-pressed="true"]):not(:has(#qtc-report-panel:not([hidden]))) { flex: 0 0 auto; }
.qtc-workspace + .bastion-terminal-frame .bastion-terminal-container { flex: 1 1 auto; min-height: 0; resize: none; }
.qtc-workspace [hidden] { display: none !important; }
.qtc-workspace button:disabled { opacity: .45; cursor: default; }
.qtc-workspace button:focus-visible, .qtc-workspace summary:focus-visible,
.qtc-workspace a:focus-visible, .qtc-workspace pre:focus-visible,
.qtc-workspace input:focus-visible, .qtc-workspace select:focus-visible, .qtc-workspace textarea:focus-visible {
  outline: 2px solid var(--qtc-link); outline-offset: 2px; border-radius: 3px;
}

/* ── Control system ──────────────────────────────────────────────────────────
   Three steps, not eleven look-alikes: quiet (companion action), default
   (navigation and filters) and primary (the action that moves work forward).
   Every target is at least 24px high. */
.qtc-text-button {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 24px; padding: 2px 4px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--qtc-link); font: 500 12px/1.4 Inter, sans-serif;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.qtc-text-button:hover, .qtc-text-button:focus-visible { background: var(--qtc-bg-alt); color: var(--qtc-link); text-decoration: none; }
.qtc-btn--quiet { color: var(--qtc-muted); font-weight: 400; }
.qtc-btn--quiet:hover { color: var(--qtc-text); }
.qtc-btn--primary { border-color: var(--qtc-edge); color: var(--qtc-link); font-weight: 600; padding: 2px 9px; }
.qtc-btn--primary:hover { background: var(--qtc-bubble); border-color: var(--qtc-link); }
.qtc-btn--danger { color: var(--qtc-risk); font-weight: 400; }
.qtc-chip { border-color: var(--qtc-line); padding: 2px 9px; color: var(--qtc-muted); }
.qtc-chip:hover { border-color: var(--qtc-edge); color: var(--qtc-text); }
.qtc-chip[aria-pressed="true"] { border-color: var(--qtc-edge); background: var(--qtc-bubble); color: var(--qtc-text); font-weight: 600; }
.qtc-send, .qtc-interrupt {
  min-height: 30px; padding: 6px 14px; border: 1px solid var(--qtc-link); border-radius: var(--radius-sm);
  background: var(--qtc-link); color: var(--qtc-accent-fg); font: 600 13px/1.3 Inter, sans-serif; cursor: pointer;
}
.qtc-send:hover:not(:disabled) { filter: brightness(1.08); }
.qtc-interrupt { background: transparent; color: var(--qtc-text); border-color: var(--qtc-edge); }
.qtc-send:disabled { opacity: .5; cursor: default; }
.qtc-icon { width: 14px; height: 14px; flex: 0 0 14px; vertical-align: middle; opacity: .7; }
[data-qtc-theme="dark"] .qtc-icon { filter: invert(1); }

/* ── Navigation row ──────────────────────────────────────────────────────── */
.qtc-workspace-nav {
  position: relative;
  display: flex; flex-shrink: 0; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--qtc-line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--qtc-bg);
}
.qtc-view-tabs { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.qtc-view-tabs > button {
  appearance: none; border: 0; border-bottom: 2px solid transparent; background: transparent;
  padding: 8px 0 6px; font: 600 13px/1.3 Inter, sans-serif; color: var(--qtc-muted); cursor: pointer;
}
.qtc-view-tabs > button[aria-selected="true"] { color: var(--qtc-link); border-bottom-color: var(--qtc-link); }
.qtc-view-tabs > button:hover { color: var(--qtc-text); background: transparent; }
.qtc-context { margin-left: auto; color: var(--qtc-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.qtc-diagnosis-mode { display: flex; flex-shrink: 0; gap: 2px; }
.qtc-diagnosis-mode > button {
  appearance: none; display: grid; place-items: center; width: 28px; min-height: 28px;
  border: 1px solid transparent; border-radius: var(--radius-sm); padding: 5px;
  background: transparent; color: var(--qtc-muted); cursor: pointer;
}
.qtc-diagnosis-mode svg { width: 16px; height: 16px; }
.qtc-diagnosis-mode > button:hover { background: var(--qtc-bg-alt); color: var(--qtc-text); }
.qtc-diagnosis-mode > button[aria-pressed="true"] { background: var(--qtc-bubble); border-color: var(--qtc-edge); color: var(--qtc-text); }

/* ── Panels ──────────────────────────────────────────────────────────────── */
#qtc-ai-panel, #qtc-report-panel {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  background: var(--qtc-bg); border: 1px solid var(--qtc-line); border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.qtc-history-toolbar {
  flex-shrink: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; min-height: 34px; padding: 4px 10px;
  border-bottom: 1px solid var(--qtc-line); color: var(--qtc-muted); font-size: 12px;
}
.qtc-history-toolbar .qtc-search { display: flex; align-items: center; gap: 6px; flex: 1 1 180px; max-width: 340px; margin: 0; }
.qtc-search input {
  width: 100%; min-width: 80px; min-height: 26px; padding: 3px 8px;
  border: 1px solid var(--qtc-edge); border-radius: var(--radius-sm);
  background: var(--qtc-bg); color: var(--qtc-text); font-size: 12px;
}
.qtc-search input::placeholder { color: var(--qtc-muted); opacity: 1; }
.qtc-history-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.qtc-more { position: relative; }
.qtc-more > summary { list-style: none; cursor: pointer; min-height: 24px; padding: 2px 6px; border: 1px solid var(--qtc-line); border-radius: var(--radius-sm); color: var(--qtc-muted); font-size: 12px; }
.qtc-more > summary::-webkit-details-marker { display: none; }
.qtc-more > summary:hover { border-color: var(--qtc-edge); color: var(--qtc-text); }
.qtc-more > div {
  position: absolute; right: 0; top: 30px; z-index: 4; display: flex; flex-direction: column; gap: 4px;
  width: min(300px, 80vw); padding: 10px 12px; border: 1px solid var(--qtc-edge); border-radius: var(--radius-sm);
  background: var(--qtc-bg); box-shadow: 0 6px 24px var(--qtc-shadow);
}
.qtc-more .qtc-text-button { justify-content: flex-start; text-align: left; white-space: normal; }
.qtc-storage { border-top: 1px solid var(--qtc-line); margin-top: 4px; padding-top: 8px; font-size: 11px; line-height: 1.6; }
.qtc-page-nav { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 26px; color: var(--qtc-muted); font-size: 11px; }
.qtc-page-nav .qtc-text-button { font-size: 11px; }

/* Connection state: one dot in the toolbar, the detail list on demand. */
.qtc-connection-details { position: relative; font-size: 11px; color: var(--qtc-muted); }
.qtc-connection-details > summary { display: flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 4px; list-style: none; cursor: pointer; }
.qtc-connection-details > summary::-webkit-details-marker { display: none; }
.qtc-connection-details > summary > i { width: 6px; height: 6px; border-radius: 50%; background: var(--qtc-muted); }
.qtc-connection--ready > summary > i { background: var(--qtc-ok); }
.qtc-connection--issue > summary > i { background: var(--qtc-risk); }
.qtc-connection-details .qtc-health {
  position: absolute; right: 0; top: 100%; z-index: 10; display: grid; gap: 8px; min-width: 230px; padding: 12px;
  border: 1px solid var(--qtc-edge); border-radius: var(--radius-sm); background: var(--qtc-bg);
  box-shadow: 0 6px 20px var(--qtc-shadow); font-size: 11px; color: var(--qtc-muted);
}
.qtc-health > span { display: inline-flex; align-items: center; gap: 6px; }
.qtc-health i { width: 6px; height: 6px; border-radius: 50%; background: var(--qtc-ok); }
.qtc-health .qtc-health--issue i { background: var(--qtc-muted); }
.qtc-connection--issue .qtc-health .qtc-health--issue i { background: var(--qtc-risk); }

/* ── Transcript ──────────────────────────────────────────────────────────────
   The scroll area is a column: the transcript is pushed to the bottom so a
   short conversation sits on the composer instead of leaving a hole above it.
   Prose is limited to a readable measure while code, tables and command rows
   keep the full width they need. */
.qtc-scroll {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable; overflow-anchor: none; padding: 10px clamp(12px, 2.4vw, 32px) 12px;
}
.qtc-transcript, .qtc-protocol { width: 100%; max-width: 1100px; margin: 0 auto; }
.qtc-transcript { margin-top: auto; flex-shrink: 0; }
.qtc-day { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: var(--qtc-muted); font-size: 11px; }
.qtc-day::before, .qtc-day::after { content: ""; flex: 1; height: 1px; background: var(--qtc-line); }
.qtc-message { margin: 6px 0 10px; font-size: 14px; line-height: 1.55; }
.qtc-message-label { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; font-size: 11px; color: var(--qtc-muted); }
.qtc-message-who { font-weight: 600; color: var(--qtc-text); }
.qtc-message-time { font-variant-numeric: tabular-nums; }
.qtc-streaming { color: var(--qtc-muted); font-weight: 400; }
.qtc-message--user {
  width: fit-content; max-width: min(90%, 60ch); margin: 6px 0 12px auto; padding: 7px 12px;
  border: 1px solid var(--qtc-edge); border-radius: var(--radius-md); background: var(--qtc-bubble);
}
.qtc-workspace .qtc-message--user pre { margin: 2px 0; padding: 0; border: 0; background: transparent; white-space: pre-wrap; font: inherit; }
.qtc-message--user .qtc-message-actions a { display: none; }
.qtc-message--error { padding: 10px 14px; border: 1px solid var(--qtc-risk); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--qtc-risk-bg); }
.qtc-message--error .qtc-message-who { color: var(--qtc-risk); }
.qtc-message-content { overflow-wrap: anywhere; }
.qtc-message-content > .qtc-text-line, .qtc-message-content > .qtc-verbatim,
.qtc-message-content > h2, .qtc-message-content > h3, .qtc-message-content > h4,
.qtc-message-content > h5, .qtc-message-content > h6 { max-width: 68ch; }
.qtc-message-content h2 { margin: 8px 0 4px; font-size: 17px; line-height: 1.35; }
.qtc-message-content h3 { margin: 8px 0 4px; font-size: 15px; }
.qtc-message-content h4, .qtc-message-content h5, .qtc-message-content h6 { margin: 6px 0 4px; font-size: 14px; }
.qtc-paragraph-gap { height: 6px; }
.qtc-verbatim, .qtc-text-line { white-space: pre-wrap; }
.qtc-message-actions { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-top: 2px; }
.qtc-message-actions > .qtc-text-button { font-size: 11px; }
.qtc-item--revealed { outline: 2px solid var(--qtc-link); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Commentary and reasoning are conversation asides, not results. */
.qtc-message--aside { position: relative; margin: 6px 0 10px; padding-right: 22px; font-size: 13px; color: var(--qtc-muted); }
.qtc-message--aside > .qtc-message-label { display: none; }
.qtc-message--aside .qtc-message-actions { opacity: 0; }
.qtc-message--aside:hover .qtc-message-actions, .qtc-message--aside:focus-within .qtc-message-actions { opacity: 1; }
.qtc-message--assistant:not(.qtc-message--aside) > .qtc-message-label { color: var(--qtc-muted); }
.qtc-aside-actions > summary { position: absolute; right: 0; top: 0; list-style: none; cursor: pointer; }
.qtc-aside-actions[open] .qtc-message-actions { opacity: 1; }
.qtc-aside { margin: 5px 0; color: var(--qtc-muted); font-size: 12px; }
.qtc-aside > summary { display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 0; list-style: none; cursor: pointer; }
.qtc-aside > summary::-webkit-details-marker { display: none; }
.qtc-aside-label { font-weight: 500; }
.qtc-aside-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qtc-aside-content { padding: 3px 0 5px 20px; font-size: 13px; line-height: 1.55; }
.qtc-aside-content .qtc-part-tabs { margin: 0; }
.qtc-aside .qtc-streaming { animation: qtc-working 1.8s ease-in-out infinite; }
@keyframes qtc-working { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .qtc-aside .qtc-streaming { animation: none; } }

/* A whole work phase occupies one row; the original items stay inside it.
   Count and error state sit next to the label — at the far end of a wide row
   they were more than a thousand pixels away from what they describe. */
.qtc-activity-group { margin: 5px 0; color: var(--qtc-muted); font-size: 12px; }
.qtc-activity-group > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 26px; padding: 2px 0; list-style: none; cursor: pointer; }
.qtc-activity-group > summary::-webkit-details-marker { display: none; }
.qtc-activity-label { min-width: 0; }
.qtc-activity-status { font-size: 11px; white-space: nowrap; }
.qtc-activity--error > summary .qtc-activity-status { color: var(--qtc-risk); font-weight: 600; }
.qtc-activity--working > summary .qtc-activity-status { color: var(--qtc-link); }
.qtc-activity-time { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.qtc-activity-preview { display: none; flex-basis: 100%; margin-left: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.qtc-activity--working:not([open]) > summary .qtc-activity-preview { display: block; }
.qtc-activity-items { padding: 2px 0 2px 20px; }
.qtc-activity-items .qtc-message--aside .qtc-message-actions { opacity: 1; }
.qtc-context-group .qtc-message--user { margin-left: 0; max-width: 100%; background: var(--qtc-bg-alt); }
.qtc-user-fold > summary { cursor: pointer; font-size: 11px; }
.qtc-user-preview { display: block; max-width: min(420px, 60vw); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--qtc-text); }

/* ── Commands ────────────────────────────────────────────────────────────────
   Exit state, duration and size belong on the closed row: a failed command
   must never hide behind a fold. */
.qtc-command { margin: 3px 0; font-size: 12px; }
.qtc-command > summary { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 3px 0; list-style: none; cursor: pointer; color: var(--qtc-muted); }
.qtc-command > summary::-webkit-details-marker { display: none; }
.qtc-command-mark { flex: 0 0 auto; width: 13px; text-align: center; color: var(--qtc-ok); font-size: 12px; }
.qtc-command--failed .qtc-command-mark { color: var(--qtc-risk); }
.qtc-command-heading { flex: 1; min-width: 0; }
.qtc-command-heading > code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.6 "JetBrains Mono", "Cascadia Code", monospace; }
.qtc-command[open] > summary { color: var(--qtc-text); }
.qtc-command[open] .qtc-command-heading > code { white-space: pre-wrap; }
.qtc-command-status { flex: 0 0 auto; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qtc-status--error { color: var(--qtc-risk); font-weight: 600; }
.qtc-command-body { padding: 4px 0 8px 21px; }
.qtc-part-tabs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; }
.qtc-output-toolbar { display: flex; justify-content: space-between; gap: 16px; padding: 6px 10px; border: 1px solid var(--qtc-line); border-bottom: 0; background: var(--qtc-bg-alt); font-size: 11px; color: var(--qtc-muted); overflow-wrap: anywhere; }
.qtc-output-context, .qtc-loading { padding: 3px 0; font-size: 11px; color: var(--qtc-muted); overflow-wrap: anywhere; }
.qtc-output-pages { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 11px; color: var(--qtc-muted); }
.qtc-item-details { margin-top: 8px; font-size: 12px; color: var(--qtc-muted); }
.qtc-item-details summary, .qtc-protocol summary { cursor: pointer; min-height: 24px; padding: 4px 0; }
.qtc-protocol { margin-top: 18px; font-size: 12px; color: var(--qtc-muted); }
.qtc-protocol pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.qtc-workspace pre, .qtc-workspace code { font-family: "JetBrains Mono", "Cascadia Code", monospace; font-size: 12px; }
.qtc-workspace pre {
  margin: 0; padding: 8px 10px; overflow-x: auto; white-space: pre; tab-size: 4; line-height: 1.5;
  border: 1px solid var(--qtc-line); border-radius: var(--radius-sm); background: var(--qtc-bg-alt); color: var(--qtc-text);
}
.qtc-table-scroll { max-width: 100%; margin: 8px 0; overflow: auto; }
.qtc-workspace table { width: auto; min-width: 50%; border-collapse: collapse; font-size: 13px; }
.qtc-workspace td, .qtc-workspace th { padding: 5px 10px; border: 1px solid var(--qtc-edge); text-align: left; }
.qtc-workspace th { background: var(--qtc-bg-alt); font-weight: 600; }
.qtc-empty { max-width: 560px; margin: auto; padding: 40px 0; color: var(--qtc-muted); font-size: 14px; line-height: 1.7; }
.qtc-empty h3 { color: var(--qtc-text); font-size: 20px; }

/* ── Composer ────────────────────────────────────────────────────────────── */
.qtc-statusbar { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; min-height: 26px; margin: 0 12px; color: var(--qtc-muted); font-size: 11px; }
.qtc-status-details { position: relative; margin-left: auto; min-width: 0; }
.qtc-status-summary { min-height: 24px; padding: 3px 0; cursor: pointer; white-space: nowrap; }
.qtc-statusbar--issue .qtc-status-summary { color: var(--qtc-warn); }
.qtc-status-popover { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 15; width: min(460px, calc(100vw - 48px)); padding: 12px; border: 1px solid var(--qtc-edge); border-radius: var(--radius-md); background: var(--qtc-bg); box-shadow: 0 6px 24px var(--qtc-shadow); overflow-wrap: anywhere; }
.qtc-notice, .qtc-delivery { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--qtc-text); }
.qtc-delivery .qtc-text-button { margin-left: 8px; }
.qtc-work-status { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--qtc-muted); font-size: 11px; }
.qtc-work-time { font-variant-numeric: tabular-nums; }
.qtc-work-spinner { display: none; box-sizing: border-box; width: 11px; height: 11px; flex: 0 0 11px; margin-right: 2px; border: 1.5px solid var(--qtc-line); border-top-color: var(--qtc-link); border-radius: 50%; }
.qtc-work-status--active .qtc-work-spinner { display: inline-block; animation: qtc-work-spin .8s linear infinite; }
@keyframes qtc-work-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qtc-work-status--active .qtc-work-spinner { animation: none; } }
.qtc-composer {
  display: flex; flex: 0 0 auto; align-items: flex-end; gap: 8px; margin: 0 10px 8px; padding: 6px 8px;
  border: 1px solid var(--qtc-edge); border-radius: var(--radius-md); background: var(--qtc-bg);
}
.qtc-composer:focus-within { border-color: var(--qtc-link); box-shadow: var(--focus-ring); }
.qtc-composer textarea {
  width: 100%; min-height: 26px; max-height: 180px; padding: 3px; resize: vertical;
  border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--qtc-text);
  font: 400 14px/1.5 Inter, sans-serif;
}
.qtc-composer textarea::placeholder { color: var(--qtc-muted); opacity: 1; }
.qtc-composer-meta { padding: 4px 0 0; font-size: 11px; color: var(--qtc-muted); }
.qtc-composer .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Report ──────────────────────────────────────────────────────────────────
   Same control system and the same surfaces as the diagnosis: a finding is
   the result of the conversation, not a separate application. */
.qtc-report-toolbar { flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 6px 10px; border-bottom: 1px solid var(--qtc-line); font-size: 12px; }
.qtc-report-toolbar label { display: flex; align-items: center; gap: 6px; }
.qtc-report-toolbar select { max-width: 150px; }
.qtc-report-toolbar .qtc-send { margin-left: 0; }
.qtc-report-state { margin-left: auto; padding: 2px 9px; border: 1px solid var(--qtc-line); border-radius: 999px; color: var(--qtc-muted); font-size: 11px; white-space: nowrap; }
.qtc-report-state--dirty { border-color: var(--qtc-warn); color: var(--qtc-warn); font-weight: 600; }
.qtc-report-state--released { border-color: var(--qtc-ok); color: var(--qtc-ok); font-weight: 600; }
.qtc-report-notice { flex-shrink: 0; margin: 6px 12px; font-size: 12px; color: var(--qtc-muted); }
.qtc-report-editor { flex: 1; min-height: 0; padding: 14px 16px 18px; overflow: auto; overscroll-behavior: contain; }
.qtc-report-editor > * { max-width: 900px; }
/* Field captions inherited a hardcoded navy from the app's form styles, which
   is unreadable on the dark surface. Every label in the workspace states its
   own colour instead of depending on what the host page happens to set. */
.qtc-workspace label { color: var(--qtc-text); }
.qtc-report-editor label, .qtc-report-toolbar label { display: flex; gap: 4px; font-size: 12px; font-weight: 500; color: var(--qtc-muted); }
.qtc-report-editor label { flex-direction: column; }
.qtc-report-editor input, .qtc-report-editor textarea, .qtc-report-editor select, .qtc-report-toolbar select {
  max-width: 100%; padding: 6px 9px; border: 1px solid var(--qtc-edge); border-radius: var(--radius-sm);
  background: var(--qtc-bg); color: var(--qtc-text); font: 400 13px/1.45 Inter, sans-serif;
}
.qtc-report-editor textarea { min-height: 52px; resize: vertical; }
.qtc-report-meta { display: grid; grid-template-columns: 1fr 180px; gap: 14px; }
.qtc-report-help { margin: 10px 0; color: var(--qtc-muted); font-size: 12px; line-height: 1.6; }
.qtc-finding { margin: 8px 0; border: 1px solid var(--qtc-line); border-radius: var(--radius-sm); }
.qtc-finding > summary { min-height: 26px; padding: 8px 12px; cursor: pointer; font-size: 13px; overflow-wrap: anywhere; }
.qtc-finding > summary small { margin-left: 10px; color: var(--qtc-muted); }
.qtc-finding-fields { display: grid; gap: 10px; padding: 4px 12px 12px; }
.qtc-finding-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qtc-finding-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qtc-evidence { margin: 6px 0; font-size: 12px; }
.qtc-evidence summary { min-height: 24px; padding: 4px 0; cursor: pointer; }
.qtc-evidence a { display: block; padding: 5px 0; overflow-wrap: anywhere; color: var(--qtc-link); }
.qtc-report-empty { padding: 20px 0; color: var(--qtc-muted); font-size: 13px; line-height: 1.6; }
.qtc-review-note { margin-top: 16px; }
.qtc-report-sources { margin: 8px 12px; font-size: 12px; }
.qtc-report-sources > summary { min-height: 24px; padding: 4px 0; cursor: pointer; }
.qtc-report-sources > div { max-height: 220px; padding: 8px; overflow: auto; }
.qtc-report-sources a { display: block; padding: 5px 0; overflow-wrap: anywhere; }
.qtc-report-sources label { margin-right: 14px; }

/* ── Session menus and moved-in host elements ────────────────────────────── */
.qtc-session-menu { position: relative; margin-left: auto; min-width: 0; color: var(--qtc-muted); font-size: 12px; }
.qtc-session-menu > summary { max-width: 220px; min-height: 24px; padding: 5px 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; list-style: none; cursor: pointer; }
.qtc-session-menu > summary::-webkit-details-marker { display: none; }
.qtc-session-menu-body {
  position: absolute; top: 100%; right: 0; z-index: 12; width: min(440px, 88vw); padding: 12px;
  border: 1px solid var(--qtc-edge); border-radius: var(--radius-sm); background: var(--qtc-bg);
  box-shadow: 0 8px 25px var(--qtc-shadow);
}
.qtc-session-menu-body .bastion-detail-head { display: block; border: 0; padding: 0; }
.qtc-session-menu-body .bastion-detail-title h2 { font-size: 15px; }
.qtc-session-menu-body .bastion-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0; }
.qtc-session-menu-body .bastion-provider-buttons { margin-top: 8px; }
.qtc-session-menu-body .agent-edit-subtitle { margin: 8px 0 0; font-size: 11px; }
.qtc-model-settings { border-top: 1px solid var(--qtc-line); margin-top: 12px; padding-top: 12px; }
.qtc-model-settings label { display: grid; gap: 6px; font-size: 12px; color: var(--qtc-text); }
.qtc-model-settings select { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--qtc-line); border-radius: 6px; background: var(--qtc-bg); color: var(--qtc-text); }
.qtc-model-settings p { font-size: 11px; line-height: 1.5; margin: 8px 0; }
.qtc-workspace-nav .bastion-provider-bar { flex: 0 0 auto; gap: 6px; min-height: 0; margin: 0 0 0 auto; padding: 0; border: 0; background: transparent; }
.qtc-workspace-nav .bastion-conn-status { display: none; }
.qtc-workspace-nav .bastion-action-bar { margin: 0; gap: 4px; }
.qtc-workspace-nav .bastion-action-bar .qtc-session-menu { position: static; margin-left: 0; }
.qtc-workspace-nav .bastion-action-bar .qtc-session-menu-body { right: 0; }
.qtc-workspace-nav .action-button { min-height: 26px; padding: 4px 8px; font-size: 11px; }
.qtc-workspace-nav #bastion-stop-btn:disabled { display: none; }
.qtc-workspace-nav #core-status { flex: 0 0 auto; padding: 2px 4px; font-size: 10px; line-height: 1.2; }
.qtc-ai-ready:has([data-qtc-mode="ai"][aria-pressed="true"]) #bastion-start-btn { display: none; }
.qtc-legacy-tools { flex-shrink: 0; }
.qtc-legacy-tools > summary { display: none; }
/* Keep xterm measured and alive. display:none would resize the PTY to zero. */
.bastion-terminal-frame.qtc-raw-hidden { position: absolute; top: 0; left: 0; width: calc(100% - 16px); visibility: hidden; pointer-events: none; }

/* ── Jump-host targets ───────────────────────────────────────────────────── */
.qtc-pivot-dialog {
  width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 12px;
  border: 1px solid var(--qtc-edge); border-radius: 8px; background: var(--qtc-bg); color: var(--qtc-text);
  box-shadow: 0 16px 70px #0003;
}
.qtc-pivot-dialog::backdrop { background: #10182865; }
.qtc-pivot-close { position: absolute; top: 9px; right: 9px; z-index: 1; }
.qtc-pivot-dialog .bastion-pivot-panel { gap: 6px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.qtc-pivot-dialog .bastion-section-head { margin: 0; padding: 0 24px 6px 0; }
.qtc-pivot-dialog h3 { margin: 0; font-size: 14px; }
.qtc-pivot-dialog .bastion-pivot-form { grid-template-columns: minmax(0, 1fr) 138px; gap: 7px 8px; padding: 0; border: 0; background: transparent; }
.qtc-pivot-dialog .bastion-pivot-form label, .bastion-pivot-recent { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 11px; font-weight: 500; }
.qtc-pivot-dialog .bastion-pivot-field { gap: 2px; }
.qtc-pivot-dialog .bastion-pivot-field--wide { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; }
.qtc-pivot-dialog .bastion-pivot-field-label { font-size: 11px; font-weight: 500; }
.qtc-pivot-dialog input, .qtc-pivot-dialog select { width: 100%; min-width: 0; min-height: 28px; padding: 3px 7px; font-size: 12px; font-weight: 400; box-sizing: border-box; }
.qtc-pivot-dialog input, .qtc-pivot-dialog select, .qtc-pivot-dialog .bastion-pivot-switch { border-color: var(--qtc-edge); background: var(--qtc-bg); color: var(--qtc-text); }
.qtc-pivot-dialog .bastion-pivot-switch { justify-self: start; gap: 2px; padding: 2px; }
.qtc-pivot-dialog .bastion-pivot-switch > button { flex: 0 1 auto; min-height: 24px; padding: 2px 8px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.qtc-pivot-dialog .bastion-pivot-switch > button.is-active { border-color: var(--qtc-link); background: var(--qtc-bubble); color: var(--qtc-link); }
.qtc-pivot-dialog .bastion-pivot-switch > button:hover:not(:disabled) { background: var(--qtc-bg-alt); color: var(--qtc-text); }
.qtc-pivot-dialog .bastion-pivot-port-toggle { min-height: 28px; align-items: center; gap: 5px; padding: 2px 6px; border-color: var(--qtc-edge); color: var(--qtc-muted); font-size: 10px; font-weight: 400; }
.qtc-pivot-dialog .bastion-pivot-form #bastion-pivot-password-wrap { grid-column: 1; }
.qtc-pivot-dialog .bastion-pivot-start-btn { grid-column: 2; min-height: 28px; width: 100%; padding: 3px 10px; font-size: 12px; }
.qtc-pivot-dialog .bastion-pivot-port-toggle > strong, .qtc-pivot-dialog .bastion-pivot-field-label { color: var(--qtc-text); }
.qtc-pivot-dialog .bastion-pivot-field-label { color: var(--qtc-muted); }
/* These boxes keep a hardcoded light fill from the app's form styles; on the
   dark surface that left grey text on near-white at 2.1:1. */
.qtc-pivot-dialog .bastion-pivot-form, .qtc-pivot-dialog .bastion-pivot-help, .qtc-pivot-dialog .bastion-empty { color: var(--qtc-muted); }
.qtc-pivot-dialog .bastion-pivot-help, .qtc-pivot-dialog .bastion-empty { margin: 0; padding: 6px 0 0; border: 0; border-top: 1px solid var(--qtc-line); border-radius: 0; background: transparent; font-size: 11px; font-weight: 400; line-height: 1.35; }
.bastion-pivot-route { margin: 3px 0 0; font-size: 11px; color: var(--qtc-muted); overflow-wrap: anywhere; }
.bastion-pivot-recent { margin: 6px 0; }
.bastion-pivot-progress { padding: 6px 0; font-size: 11px; line-height: 1.4; }
.bastion-pivot-progress.is-working::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border: 2px solid #94a3b8; border-right-color: transparent; border-radius: 50%; animation: qtc-work-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .bastion-pivot-progress.is-working::before { animation: none; } }
.qtc-pivot-dialog .bastion-pivot-output { max-width: 100%; font-size: 12px; }
.qtc-pivot-dialog pre { max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.qtc-pivot-dialog .bastion-active-pivot { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.qtc-pivot-dialog .bastion-active-pivot > div { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.qtc-pivot-dialog .bastion-active-pivot small { display: block; font-size: 11px; }
.qtc-leg-strip { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 8px; border-bottom: 1px solid var(--qtc-line); font-size: 11px; }
.qtc-leg { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 3px 6px; border: 1px solid var(--qtc-line); border-radius: 6px; }
.qtc-leg > span { overflow-wrap: anywhere; }
.qtc-leg button { min-height: 24px; padding: 1px 4px; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.qtc-leg-origin { align-self: center; color: var(--qtc-muted); }
.qtc-leg-state { color: var(--qtc-muted); }
.qtc-leg[data-status="ready"] .qtc-leg-state { color: var(--qtc-ok); }
.qtc-leg[data-status="unreachable"] .qtc-leg-state, .qtc-leg[data-status="auth_failed"] .qtc-leg-state { color: var(--qtc-warn); }
.qtc-leg--selected { border-color: var(--qtc-edge); background: var(--qtc-bubble); }

/* One fixed application frame. Dialogs are temporary surfaces; the active
   transcript or report is the only scrolling region in the main window. */
html:has(.qtc-workspace), body:has(.qtc-workspace) { height: 100%; min-height: 0; overflow: clip; }
.shell:has(.qtc-workspace) { display: block; height: 100dvh; min-height: 0; overflow: clip; }
.app:has(.qtc-workspace) { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.app:has(.qtc-workspace) > .menu-bar { flex: 0 0 auto; }
.workspace:has(.qtc-workspace) { flex: 1; min-height: 0; overflow: clip; }
.content:has(.qtc-workspace) { display: flex; flex-direction: column; min-height: 0; padding: 0 12px 10px; overflow: clip; }
.content:has(.qtc-workspace) > .content-head { display: none; }
.content-body:has(.qtc-workspace) { flex: 1; min-height: 0; overflow: clip; gap: 0; }
.bastion-layout:has(.qtc-workspace) { grid-template-rows: minmax(0, 1fr); }
.bastion-layout:has(.qtc-workspace) > .bastion-sidebar { min-height: 0; overscroll-behavior: contain; }
.bastion-detail:has(.qtc-workspace) { overflow: clip; scrollbar-gutter: auto; }
.bastion-main-wrap:has(.qtc-workspace) > .bastion-tab-strip { flex-shrink: 0; padding-top: 2px; }
.bastion-main-wrap:has(.qtc-workspace) .bastion-tab { min-height: 28px; padding: 3px 8px; font-size: 12px; }
.bastion-main-wrap:has(.qtc-workspace) .bastion-tab-close { width: 24px; height: 24px; min-height: 24px; padding: 0; }
.qtc-tools-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--qtc-edge); border-radius: var(--radius-md); background: var(--qtc-bg); color: var(--qtc-text); overscroll-behavior: contain; }
.qtc-tools-dialog::backdrop { background: #0008; }
.qtc-tools-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--qtc-line); }
.qtc-tools-dialog > :not(header) { margin: 12px; }
:root[data-qtc-theme="dark"] .brand-mark { filter: brightness(1.8); }

/* ── Narrow viewports ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .app:has(.qtc-workspace) > .menu-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; min-height: 0; padding: 6px 12px; align-items: center; }
  .app:has(.qtc-workspace) .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .app:has(.qtc-workspace) .brand > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .app:has(.qtc-workspace) .user-menu { grid-column: 2; grid-row: 1; }
  .app:has(.qtc-workspace) .global-search-wrap { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .app:has(.qtc-workspace) .main-menu { grid-column: 1 / -1; grid-row: 3; min-width: 0; min-height: 0; width: 100%; overflow: visible; gap: 2px; }
  .app:has(.qtc-workspace) .menu-item { min-height: 30px; padding: 0 4px; gap: 4px; font-size: 12px; }
}

@media (max-width: 700px) {
  .bastion-layout:has(.qtc-workspace):not(.bastion-layout--archive) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .bastion-layout:has(.qtc-workspace) > .bastion-sidebar { max-height: 170px; border-right: 0; border-bottom: 1px solid var(--clr-border); }
  .bastion-layout:has(.qtc-workspace) .bastion-sidebar-head { flex-shrink: 0; }
  .bastion-layout:has(.qtc-workspace) .bastion-session-list { order: 1; }
  .bastion-layout:has(.qtc-workspace) .bastion-refresh-bar { order: 2; }
  .bastion-layout:has(.qtc-workspace) .bastion-workspace-section { order: 3; }
  .bastion-layout:has(.qtc-workspace) .bastion-sentinel-section { order: 4; }
  .content:has(.qtc-workspace) { padding: 0 6px 6px; }
  .qtc-workspace { margin: 4px 0 0; }
  .qtc-workspace-nav { flex-wrap: wrap; gap: 4px 8px; padding: 0 8px; }
  .qtc-view-tabs { gap: 14px; }
  .qtc-context { display: none; }
  .qtc-session-menu > summary { max-width: 130px; }
  .qtc-session-menu-body { right: -60px; }
  .qtc-workspace-nav .bastion-provider-bar { margin-left: auto; }
  .qtc-workspace-nav .action-button { padding: 4px 6px; }
  .qtc-history-toolbar { padding: 4px 8px; gap: 4px 8px; }
  .qtc-history-toolbar .qtc-search { flex-basis: 100%; max-width: none; }
  .qtc-history-actions { width: 100%; margin-left: 0; justify-content: flex-end; flex-wrap: wrap; gap: 4px 6px; }
  .qtc-connection-details > summary { min-width: 24px; justify-content: center; }
  .qtc-connection-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .qtc-connection-details .qtc-health { right: -60px; }
  .qtc-scroll { padding: 8px 10px; }
  .qtc-message--user { max-width: 95%; }
  .qtc-command-body { padding-left: 12px; }
  .qtc-activity-items { padding-left: 12px; }
  .qtc-aside-content { padding-left: 12px; }
  .qtc-composer { margin: 0 8px 6px; }
  .qtc-statusbar { margin: 0 10px; }
  .qtc-report-editor { padding: 6px 10px 18px; }
  .qtc-report-meta { grid-template-columns: 1fr; gap: 10px; }
  .qtc-report-toolbar { gap: 8px 12px; padding: 6px 10px; }
  .qtc-finding-selects { grid-template-columns: 1fr; }
  .qtc-legacy-tools > summary { display: list-item; padding: 8px 12px; background: var(--n-900); color: #c2d0df; font-size: 12px; cursor: pointer; }
}