/*
 * Schwachstellenmanagement-Konsole (Lab C), Vorbild Tenable.io und Qualys VMDR.
 *
 * Workplace V3: Kopf .ds-toolhead (dunkel) mit Suche, Kennzahlen je Schwere als Kacheln
 * mit Verteilungsbalken, Befehlsleiste .ds-cmdbar (Schwere, Asset, Sortieren), Treffer-
 * liste .ds-table, rechts das Detailpanel mit Score-Ring und Reitern. Die Schwerefarben
 * kommen aus .ds-sev--c/h/m/l; Kachelflaechen mischen dieselben Werte nur ab.
 */

.vs { --vs-c: #7f1d1d; }   /* wie .ds-sev--c in design.css */
.vs .ds-toolhead-search { max-width: 420px; }

/* ---------- Kennzahlen ---------- */
.vs-summary {
  display: flex; align-items: stretch; gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  background: var(--ds-bg-subtle);
  border-bottom: var(--bd-subtle);
  flex-shrink: 0;
}
.vs-tiles { display: grid; grid-template-columns: minmax(150px, 1.25fr) repeat(4, minmax(104px, 1fr)); gap: var(--sp-3); flex: 1; min-width: 0; }
.vs .vs-tile {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: end;
  gap: 2px var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 2px);
  background: var(--ds-bg-surface);
  border: var(--bd); border-radius: var(--r-m);
  box-shadow: 0 1px 2px rgba(19, 26, 33, 0.04);
  text-align: left; color: var(--ds-text);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease), opacity var(--dur-2) var(--ease);
}
.vs .vs-tile-label { grid-column: 1 / -1; align-self: start; }
.vs .vs-tile-num { grid-column: 1; }
.vs .vs-tile-sub { grid-column: 2; align-self: end; padding-bottom: 5px; }
.vs .vs-leg { cursor: pointer; }
.vs .vs-leg:hover { border-color: var(--ds-border-strong); box-shadow: var(--sh-2); }
.vs .vs-leg:active { transform: translateY(0.5px); }
.vs .vs-leg:focus-visible { outline: var(--focus-outline); outline-offset: 1px; }
.vs .vs-leg--c { background: color-mix(in srgb, var(--vs-c) 6%, var(--ds-bg-surface)); }
.vs .vs-leg--h { background: color-mix(in srgb, var(--ds-bad) 6%, var(--ds-bg-surface)); }
.vs .vs-leg--m { background: color-mix(in srgb, var(--ds-warn) 7%, var(--ds-bg-surface)); }
.vs .vs-leg--l { background: color-mix(in srgb, var(--ds-gray-500) 6%, var(--ds-bg-surface)); }
.vs .vs-leg--c .vs-tile-num { color: var(--vs-c); }
.vs .vs-leg--h .vs-tile-num { color: var(--ds-bad-text); }
.vs .vs-leg--m .vs-tile-num { color: var(--ds-warn-text); }
.vs .vs-leg--l .vs-tile-num { color: var(--ds-text-2); }
.vs .vs-leg.is-off { background: var(--ds-bg-surface); opacity: 0.55; }
.vs .vs-leg.is-off .vs-tile-bar { background: var(--ds-gray-300); }
.vs .vs-leg.is-off .vs-tile-num { color: var(--ds-text-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.vs .vs-leg.is-zero .vs-tile-num { color: var(--ds-text-3); }
.vs-tile-bar.ds-sev { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; height: auto; min-width: 0; padding: 0; border-radius: 0; }
.vs-tile-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ds-text-3); white-space: nowrap;
}
.vs-tile-num { font-size: var(--fs-xxl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.vs-tile-sub { font-size: var(--fs-xs); color: var(--ds-text-3); white-space: nowrap; }
.vs .vs-tile--total { padding-left: var(--sp-4); grid-template-rows: auto auto auto; }
.vs-tile--total .vs-tile-sub { grid-column: 2; grid-row: 2; }
.vs-dist { grid-column: 1 / -1; display: flex; gap: 2px; height: 6px; margin-top: var(--sp-1); border-radius: var(--r-pill); overflow: hidden; }
.vs-dist .ds-sev { height: 100%; min-width: 0; padding: 0; border-radius: 0; }

.vs-scaninfo {
  grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--sp-3);
  align-content: center; width: 280px; flex-shrink: 0;
  padding-left: var(--sp-5); border-left: var(--bd);
  font-size: var(--fs-s);
}

/* ---------- Befehlsleiste ---------- */
.vs-cmdbar { gap: 2px; }
.vs-hostfeld {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 6px 0 10px; border-radius: var(--r-s);
  color: var(--ds-text-2);
  transition: background var(--dur-1) var(--ease);
}
.vs-hostfeld:hover { background: var(--ds-bg-hover); color: var(--ds-text); }
.vs-hostfeld.is-on { background: var(--ds-primary-soft); color: var(--ds-primary-text); }
.vs-hostfeld > svg { width: 16px; height: 16px; color: var(--accent, var(--ds-primary)); flex-shrink: 0; }
.vs-hostfeld select {
  appearance: none; -webkit-appearance: none;
  height: 30px; margin: 0; padding: 0 22px 0 0; border: 0; background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8793' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 12px;
  font: inherit; font-size: var(--fs-m); color: inherit; cursor: pointer; outline: 0;
}
.vs-hostfeld:focus-within { box-shadow: var(--focus-ring); }
.vs-suchchip { cursor: default; margin-right: var(--sp-2); }

/* ---------- Liste und Panel ---------- */
.vs-main { display: flex; flex: 1; min-height: 0; }
.vs-wrap { flex: 1; min-height: 0; min-width: 0; container: vsliste / inline-size; }
.vs-tab tbody td { height: auto; padding-top: 8px; padding-bottom: 8px; }
.vs-tab th.c-sev { width: 116px; }
.vs-tab th.c-cvss { width: 78px; }
.vs-tab th.c-host { width: 150px; }
.vs-tab th.c-port { width: 82px; }
.vs-tab th.c-plugin { width: 82px; }
.vs-zeile { cursor: pointer; }
.vs-zeile:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.vs-tab tbody tr.vs-zeile.is-selected, .vs-tab tbody tr.vs-zeile.is-selected:hover { box-shadow: none; }
.vs-tab td.c-sev { position: relative; padding-left: var(--sp-4); }
.vs-rail.ds-sev { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; height: auto; min-width: 0; padding: 0; border-radius: 0; }
.vs-zeile.is-selected .vs-rail.ds-sev { width: 4px; }
.vs-title { display: block; font-size: var(--fs-m); font-weight: var(--fw-medium); color: var(--ds-text); line-height: var(--lh-snug); }
.vs-meta { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ds-text-3); }
.vs-hostname { display: block; font-size: var(--fs-s); color: var(--ds-text); }
.c-port, .c-plugin { color: var(--ds-text-2); }
.vs-cvss { display: block; font-size: var(--fs-m); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--ds-text); }
.vs-cvss-track { display: block; width: 48px; height: 3px; margin: 5px 0 0 auto; background: var(--ds-bg-sunken); border-radius: var(--r-pill); overflow: hidden; }
.vs-cvss-fill.ds-sev { display: block; height: 100%; min-width: 0; padding: 0; border-radius: var(--r-pill); }
.vs-leerzeile td { border-bottom: 0; }
.vs-leerzeile .ds-empty-v3 { min-height: 280px; }

/* Schmale Liste (Panel offen, kleines Fenster): weniger Spalten */
@container vsliste (max-width: 1000px) { .vs-tab .c-port { display: none; } }
@container vsliste (max-width: 620px) { .vs-tab .c-plugin { display: none; } }
@container vsliste (max-width: 520px) {
  .vs-tab th.c-sev { width: 100px; }
  .vs-tab th.c-cvss { width: 64px; }
  .vs-tab th.c-host { width: 128px; }
}

/* ---------- Detailpanel ---------- */
.vs-panel {
  width: clamp(380px, 36%, 560px); flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--ds-bg-surface); border-left: var(--bd);
  animation: vs-panel-in var(--dur-2) var(--ease-out) both;
}
@keyframes vs-panel-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.vs-p-head { padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5); border-bottom: var(--bd-subtle); }
.vs-p-top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.vs-p-plugin { font-size: var(--fs-s); color: var(--ds-text-3); }
.vs-p-plugin .ds-mono { color: var(--ds-text-2); font-size: var(--fs-s); }
.vs-p-pos { font-size: var(--fs-s); color: var(--ds-text-3); margin-right: var(--sp-1); white-space: nowrap; }
.vs .vs-panel .ds-iconbtn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.vs-dsev.ds-sev { height: 22px; padding: 0 var(--sp-2); text-transform: uppercase; letter-spacing: 0.04em; }
.vs-dtitle { margin: 0; font-size: var(--fs-l); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--ds-text); }
.vs-dsub { display: block; margin-top: 3px; font-size: var(--fs-s); color: var(--ds-text-3); }
.vs-dsub .ds-mono { font-size: var(--fs-s); color: var(--ds-text-2); }
.vs-dot-sep { margin: 0 var(--sp-2); color: var(--ds-gray-400); }

.vs-p-risk {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--ds-bg-subtle); border-bottom: var(--bd-subtle);
}
.vs-p-riskinfo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vs-p-risk-l { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ds-text-3); }
.vs-vektor {
  display: block; padding: 5px var(--sp-2);
  background: var(--ds-bg-surface); border: var(--bd); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ds-text); overflow-wrap: anywhere;
}
.vs-p-facts { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--sp-4); margin: 0; }
.vs-p-facts > div { min-width: 0; }
.vs-p-facts dt { font-size: var(--fs-xs); color: var(--ds-text-3); margin-bottom: 2px; }
.vs-p-facts dd { margin: 0; font-size: var(--fs-s); color: var(--ds-text); }
.vs-p-tabs { padding: 0 var(--sp-3); }
.vs-p-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sp-5) var(--sp-5); }
.vs-p-sec .ds-panel-section:first-child { margin-top: var(--sp-4); }
.vs-p-sec p { font-size: var(--fs-m); line-height: var(--lh-base); color: var(--ds-text); }
.vs-metrik, .vs-erkdl { grid-template-columns: 150px minmax(0, 1fr); font-size: var(--fs-s); }
.vs-erkdl { margin-top: var(--sp-4); }
.vs-out { border: var(--bd); border-radius: var(--r-s); overflow: hidden; }
.vs-out-kopf {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 6px var(--sp-3);
  background: var(--ds-bg-muted); border-bottom: var(--bd);
  font-size: var(--fs-xs); color: var(--ds-text-2);
}
.vs-out-kopf .ds-mono { font-size: var(--fs-xs); }
.vs-out-text {
  margin: 0; padding: var(--sp-3);
  background: var(--ds-bg-subtle); color: var(--ds-text);
  font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-base);
  white-space: pre; overflow-x: auto;
}

/* Score-Ring in der Schwerefarbe */
.vs .cf-ring--c { --ring: var(--vs-c); }
.vs .cf-ring--h { --ring: var(--ds-bad); }
.vs .cf-ring--m { --ring: var(--ds-warn); }
.vs .cf-ring--l { --ring: var(--ds-gray-600); }

/* ---------- Zwei Fenster nebeneinander (Container wz) ---------- */
.vs-main { position: relative; }

/* Scan-Angaben rechts neben den Kacheln nur im breiten Fenster; schmaler als eine
   Zeile darunter, damit nichts ueber den Kacheln liegt. */
@container wz (max-width: 980px) {
  .vs-summary { flex-wrap: wrap; row-gap: var(--sp-2); }
  .vs-scaninfo {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2);
    flex: 1 1 100%; width: auto; padding-left: 0; border-left: 0; font-size: var(--fs-xs);
  }
  .vs-scaninfo dt { color: var(--ds-text-3); }
  .vs-scaninfo dd { margin: 0 var(--sp-3) 0 0; }
  .vs-scaninfo dd.ds-mono { font-size: var(--fs-xs); }
}
/* Noch schmaler: zwei feste Zeilen, Bezeichnung und Wert bleiben beieinander */
@container wz (max-width: 820px) {
  .vs-scaninfo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 2px var(--sp-2); }
  .vs-scaninfo dd:first-of-type { grid-column: 2 / -1; }
}
/* Kennzahlkacheln: alle in einer Reihe, kompakter */
@container wz (max-width: 760px) {
  .vs-summary { padding: var(--sp-3); }
  .vs-tiles { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .vs .vs-tile { padding: var(--sp-2) var(--sp-2) var(--sp-2) calc(var(--sp-3) + 2px); column-gap: var(--sp-1); }
  .vs .vs-tile--total { padding-left: var(--sp-3); }
  .vs-tile-label { letter-spacing: 0.02em; }
  .vs-tile-num { font-size: var(--fs-xl); }
}
/* Detailpanel als Ueberlagerung von rechts (Schliessen-Knopf im Kopf), die Liste
   behaelt die volle Breite. */
@container wz (max-width: 820px) {
  .vs-panel {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 3;
    width: min(440px, calc(100% - 56px)); box-shadow: var(--sh-3);
  }
}