/* Security-Cluster — Bestands-Styles der Masken, an ihre Wurzelklasse
 * gebunden (Vues `scoped`-Ersatz, erzeugt mit
 * frontends/vc-components/scripts/scope-legacy-styles.mjs):
 *
 *   .sec-overlay       components/security-compliance/styles/overlay.scoped.css
 *                      (SecurityComplianceOverlay.vue)
 *   .testsvc-overlay   components/TestServiceOverlay.vue
 *   .sectest-overlay   components/SecurityTestServiceOverlay.vue
 *   .signoff-backdrop  components/reports/ReportSignoffDialog.vue
 *
 * ABWEICHUNG vom Bestand (PORT-AUFTRAG Schritt 5 — ausschliesslich
 * Token-Variablen): saemtliche `var(--token, <fallback>)`-Rueckfaelle sind
 * entfernt und die nackten Farbliterale auf Tokens abgebildet. Im Bestand
 * sind die Fallbacks Dunkel-Theme-Werte; sie schlagen im Hell-/Kontrast-Theme
 * durch, sobald ein Token fehlt.
 *   --core-color-accent-amber -> --warning     --core-color-accent-green -> --success
 *   --core-color-surface-2    -> --surface-elevated
 *   --surface-2               -> --surface-elevated
 *   --surface-warning         -> --warning-soft
 *   --primary-contrast        -> --text-inverse
 *   #8fd9a8/#9ee2b2/#35c46b   -> --success     rgba(46,184,92,.16)  -> --success-soft
 *   #f0cc75                   -> --warning     rgba(240,190,80,.2)  -> --warning-soft
 *   #ff9a9a                   -> --danger      rgba(230,80,80,.2)   -> --danger-soft
 *   #5d9cff                   -> --core-color-accent-blue
 *   rgba(52,120,246,.16)/rgba(50,150,160,.15) -> --primary-soft
 *   rgba(255,255,255,.12)     -> --surface-elevated
 *   #fff/#ffffff              -> --text-inverse
 * Vues `:deep(x)` entfaellt ersatzlos (Light DOM, SPEC-0002 §5).
 */
/* Welle 1 migration — see docs/architecture/ui-theming.md
 *
 * The Security & Compliance overlay is the largest welle-1 entry by
 * far (~540 style lines, 45 hardcoded literals). The migration keeps
 * the layout untouched and only swaps the visual values onto the
 * shared semantic tokens — surfaces, borders, text, status colours
 * (success / warning / info / danger), spacing/radii. Status banners
 * and the primary action button no longer carry their own
 * hand-picked accent. */
.sec-overlay {
  width: min(1320px, calc(100vw - 70px));
  max-height: calc(100dvh - 40px);
  overflow: auto;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-sizing: border-box;
}
.sec-overlay .sec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.sec-overlay .sec-header h3 {
  margin: 0;
}
.sec-overlay .sec-header p {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  max-width: 620px;
}
.sec-overlay .sec-actions,
.sec-overlay .platform-toolbar,
.sec-overlay .tenant-toolbar,
.sec-overlay .oss-toolbar,
.sec-overlay .dialog-tabs,
.sec-overlay .dialog-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.sec-overlay .sec-kpis,
.sec-overlay .oss-summary {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: var(--space-2);
}
.sec-overlay .oss-summary {
  margin-bottom: var(--space-2);
}
.sec-overlay .oss-hint {
  margin-bottom: var(--space-3);
  font-size: 0.84rem;
  color: var(--text-muted);
}
.sec-overlay .oss-hint--error {
  color: var(--danger);
}
/* V635 — Umschalter zwischen aktuellem Stand und Historie. */
.sec-overlay .sec-history-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sec-overlay .sec-history-toggle label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.86rem;
}
.sec-overlay .sec-history-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.sec-overlay .scan-config-panel {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-elevated);
}
.sec-overlay .scan-config-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.84rem;
}
.sec-overlay .operation-running-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--success);
  border-radius: var(--radius-control);
  background: var(--success-soft);
  color: var(--success);
  font-size: 0.86rem;
}
.sec-overlay .operation-running-spinner {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  animation: security-spin 1.2s linear infinite;
}
.sec-overlay .activity-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-3);
  padding: 7px var(--space-3);
  border: 1px solid var(--info);
  border-radius: var(--radius-control);
  background: var(--info-soft);
  color: var(--info);
  font-size: 0.84rem;
}
.sec-overlay .activity-banner .material-icons {
  font-size: 1rem;
  line-height: 1;
}
.sec-overlay .activity-banner--live .operation-running-spinner {
  color: var(--info);
}
.sec-overlay .activity-banner__start {
  font-size: 0.78rem;
  opacity: 0.72;
}
@keyframes security-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sec-overlay .oss-findings-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: var(--space-3) 0 var(--space-2);
}
.sec-overlay .scan-status-block {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--info);
  background: var(--info-soft);
  border-radius: var(--radius-control);
}
.sec-overlay .scan-status-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.sec-overlay .scan-status-sub {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.sec-overlay .scan-status-table {
  width: 100%;
  border-collapse: collapse;
}
.sec-overlay .scan-status-table th,
.sec-overlay .scan-status-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
.sec-overlay .ticket-filter-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(120px, 0.7fr)) auto;
  gap: 8px;
  margin-bottom: 10px;
}
.sec-overlay .ticket-filter-row--tickets {
  grid-template-columns:
  minmax(220px, 1.2fr)
  repeat(4, minmax(120px, 0.7fr))
  repeat(2, minmax(110px, 0.56fr))
  repeat(2, minmax(130px, 0.7fr))
  auto;
  align-items: center;
}
.sec-overlay .oss-filter-row {
  grid-template-columns: minmax(280px, 1.2fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr) auto;
  align-items: center;
}
.sec-overlay .vuln-filter-row {
  grid-template-columns: minmax(260px, 1.2fr) repeat(2, minmax(140px, 0.7fr)) minmax(140px, 0.7fr) minmax(180px, 0.8fr) auto;
  align-items: center;
}
.sec-overlay .sbom-workbench {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(360px, 1.15fr) minmax(300px, 0.95fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sec-overlay .sbom-task-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.sec-overlay .sbom-task-card--primary {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.sec-overlay .sbom-task-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
}
.sec-overlay .sbom-task-head > .material-icons {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: var(--surface-elevated);
  font-size: 1.15rem;
}
.sec-overlay .sbom-task-head h4 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.15;
}
.sec-overlay .sbom-task-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
/* .sbom-field entfernt (Step 4d) — Felder sind jetzt VcField (eigenes Styling). */
.sec-overlay .sbom-search-row input {
  min-height: 38px;
}
.sec-overlay .sbom-action-row,
.sec-overlay .sbom-prune-row,
.sec-overlay .sbom-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
}
.sec-overlay .sbom-action-row .vc-button,
.sec-overlay .sbom-search-row .vc-button {
  flex: 0 0 auto;
}
.sec-overlay .sbom-prune-row .vc-field {
  flex: 1 1 150px;
}
.sec-overlay .sbom-prune-row .vc-button {
  flex: 1 1 170px;
  justify-content: center;
}
.sec-overlay .sbom-search-row input {
  flex: 1 1 220px;
}
.sec-overlay .vuln-filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  opacity: 0.92;
}
.sec-overlay .vuln-workbench {
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.2fr) minmax(320px, 1fr);
}
.sec-overlay .vuln-scanner-grid,
.sec-overlay .vuln-scope-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.sec-overlay .vuln-scanner-grid label,
.sec-overlay .vuln-scope-grid label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  color: var(--text);
  font-size: 0.82rem;
}
.sec-overlay .vuln-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}
.sec-overlay .scan-target-kinds {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
/* .scan-target-kind* CSS entfernt (Step 4b) — Badges sind jetzt VcPill. */
/* Delivery-Scope-Gruppierung (Kunde / nur interne Nutzung) — Step 2 Dialog-Welle */
.sec-overlay .scope-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}
.sec-overlay .scope-filter-label {
  font-size: 0.85em;
  opacity: 0.7;
  margin-right: 2px;
}
.sec-overlay .scan-target-group {
  margin-top: 10px;
}
.sec-overlay .scan-target-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--core-color-text-muted);
  border-bottom: 1px solid var(--core-color-border);
  padding-bottom: 3px;
}
.sec-overlay .scan-target-group--internal .scan-target-group-head {
  color: var(--warning);
}
.sec-overlay .scan-target-group-count {
  font-size: 0.8em;
  opacity: 0.7;
  font-weight: 400;
}
/* Prominente Liefer-Scope-Bar am CVE-Register (Step 3 Klarheit) */
.sec-overlay .cve-scope-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--core-color-border);
  border-radius: 8px;
  background: var(--surface-elevated);
}
.sec-overlay .cve-scope-bar-label {
  font-weight: 600;
  font-size: 0.9em;
}
.sec-overlay .cve-scope-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--core-color-border);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.9em;
}
.sec-overlay .cve-scope-btn-count {
  font-weight: 700;
  font-size: 0.85em;
  opacity: 0.85;
}
.sec-overlay .cve-scope-btn--active {
  border-color: var(--core-color-accent-blue);
  background: var(--core-color-accent-blue);
  color: var(--text-inverse);
}
.sec-overlay .cve-scope-btn--product.cve-scope-btn--active {
  border-color: var(--success);
  background: var(--success);
}
.sec-overlay .cve-scope-btn--internal.cve-scope-btn--active {
  border-color: var(--warning);
  background: var(--warning);
}
.sec-overlay .cve-scope-bar-hint {
  font-size: 0.8em;
  opacity: 0.65;
  margin-left: auto;
}
.sec-overlay .sbom-stage-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--core-color-accent-blue);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
}
.sec-overlay .sbom-stage-hint .material-icons {
  font-size: 1.05rem;
  color: var(--core-color-accent-blue);
  flex-shrink: 0;
}
/* Pipeline lock / superadmin notice — amber, stands apart from the blue info hints. */
.sec-overlay .sbom-stage-hint.pipeline-lock-notice {
  background: var(--warning-soft);
  border-color: var(--warning);
  font-weight: 600;
}
.sec-overlay .sbom-stage-hint.pipeline-lock-notice .material-icons {
  color: var(--warning);
}
/* Remediation hint cell — truncate the (often long) suppression reason; full text on hover. */
.sec-overlay .remediation-hint-cell {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  color: var(--text-muted);
  cursor: help;
}
.sec-overlay .vuln-filter-card {
  margin-bottom: var(--space-3);
}
.sec-overlay .vuln-filter-grid {
  display: grid;
  grid-template-columns:
  minmax(260px, 1.3fr)
  repeat(5, minmax(130px, 0.72fr))
  repeat(2, minmax(92px, 0.45fr))
  minmax(150px, auto)
  auto;
  align-items: end;
  gap: var(--space-2);
}
.sec-overlay .vuln-filter-grid input,
.sec-overlay .vuln-filter-grid select {
  min-height: 38px;
}
.sec-overlay .vuln-filter-checkbox--card {
  min-height: 38px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-elevated);
  color: var(--text);
}
.sec-overlay .kpi {
  min-height: 0;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 7px var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.sec-overlay .kpi span {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.sec-overlay .kpi strong {
  font-size: 0.95rem;
  line-height: 1.1;
}
.sec-overlay .dialog-tabs button,
.sec-overlay .primary-btn {
  border-radius: var(--radius-control);
  padding: 7px var(--space-3);
  cursor: pointer;
}
.sec-overlay .dialog-tabs button {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: inherit;
}
.sec-overlay .dialog-tabs .active {
  background: var(--primary-soft);
  color: var(--primary);
}
.sec-overlay .sec-body,
.sec-overlay .dialog-surface {
  width: 100%;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-2);
  overflow: auto;
  box-sizing: border-box;
}
.sec-overlay .dialog-surface--modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  z-index: 1200;
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
  overflow: auto;
}
.sec-overlay .dialog-surface--wide {
  width: min(1200px, calc(100vw - 32px));
}
.sec-overlay .sbom-details-dialog {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-overlay);
  backdrop-filter: blur(2px);
}
.sec-overlay .sbom-details-summary {
  margin-bottom: var(--space-3);
}
.sec-overlay .sbom-details-filter-row {
  grid-template-columns: minmax(260px, 1fr) auto;
}
.sec-overlay .sbom-details-table-wrap {
  max-height: 42vh;
}
.sec-overlay .sbom-purl-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8rem;
  word-break: break-all;
}
.sec-overlay .dialog-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-1);
}
.sec-overlay .dialog-table-wrap {
  max-height: 52vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}
.sec-overlay .dialog-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-elevated);
}
.sec-overlay table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.sec-overlay th,
.sec-overlay td {
  padding: var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  vertical-align: top;
}
.sec-overlay .actions-cell {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.sec-overlay .tenant-toolbar select,
.sec-overlay .tenant-toolbar input[list="security-tenant-options"] {
  min-width: 220px;
}
.sec-overlay .selected {
  background: var(--primary-soft);
}
.sec-overlay .audit-list {
  display: grid;
  gap: var(--space-2);
}
.sec-overlay .audit-item {
  display: grid;
  grid-template-columns: 2fr 2fr 1.4fr 1fr;
  gap: var(--space-2);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.sec-overlay .audit-empty {
  display: grid;
  gap: var(--space-1);
  background: var(--surface-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
/* .ghost-btn/.action-btn/.icon-action-btn entfernt (Step 4e) — alle Buttons sind
   jetzt VcButton (variant ghost/primary). */
.sec-overlay .sbom-empty-import-btn {
  margin-left: var(--space-2);
  vertical-align: middle;
}
.sec-overlay .primary-btn {
  border: 1px solid var(--primary-strong);
  background: var(--primary);
  color: var(--text-inverse);
  font-weight: 600;
}
.sec-overlay .dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.sec-overlay .dialog-grid label {
  display: grid;
  gap: var(--space-1);
  font-size: 0.85rem;
}
.sec-overlay .dialog-grid .full {
  grid-column: 1 / -1;
}
.sec-overlay textarea,
.sec-overlay input[type="text"],
.sec-overlay input[type="number"],
.sec-overlay input[type="date"],
.sec-overlay select {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .sec-overlay .sec-kpis,
  .sec-overlay .oss-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sec-overlay .audit-item,
  .sec-overlay .dialog-grid {
    grid-template-columns: 1fr;
  }
  .sec-overlay .ticket-filter-row {
    grid-template-columns: 1fr 1fr;
  }
  .sec-overlay .ticket-filter-row--tickets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sec-overlay .oss-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sec-overlay .vuln-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sec-overlay .sbom-workbench {
    grid-template-columns: 1fr;
  }
  .sec-overlay .vuln-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .sec-overlay {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: 10px;
  }
  .sec-overlay .sec-kpis,
  .sec-overlay .oss-summary {
    grid-template-columns: 1fr;
  }
  .sec-overlay .ticket-filter-row {
    grid-template-columns: 1fr;
  }
  .sec-overlay .oss-filter-row {
    grid-template-columns: 1fr;
  }
  .sec-overlay .vuln-filter-row {
    grid-template-columns: 1fr;
  }
  .sec-overlay .vuln-filter-grid {
    grid-template-columns: 1fr;
  }
  .sec-overlay .dialog-surface--modal,
  .sec-overlay .dialog-surface--wide {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .sec-overlay .sbom-details-dialog {
    top: 8px;
    left: 8px;
    right: 8px;
  }
}
/* Welle 3 — Test Service overlay. Vorher hand-rolled deep-blue HUD
 * (linear+radial gradients, transparent white overlays, cyan-tinted
 * activity ping). Im Hell-Theme unleserlich. Jetzt komplett auf
 * semantische Tokens; status-pills passed/failed/warn mappen auf
 * --success/--danger/--warning(+soft); activity-line/spinner-dot
 * verwenden --primary. */
.testsvc-overlay {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-3);
  border-radius: 0;
  border: none;
  background: var(--surface);
  color: var(--text);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  overflow: hidden;
  min-height: 0;
}
.testsvc-overlay .testsvc-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}
.testsvc-overlay .testsvc-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  overflow: hidden;
}
.testsvc-overlay .testsvc-panel--collapsed {
  flex: 0 0 auto;
}
.testsvc-overlay .testsvc-panel-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: none;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.testsvc-overlay .testsvc-panel-toggle:hover {
  background: var(--surface-elevated);
}
.testsvc-overlay .testsvc-panel-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.testsvc-overlay .testsvc-panel-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.testsvc-overlay .testsvc-top {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3);
  padding-right: var(--space-2);
}
.testsvc-overlay .testsvc-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.testsvc-overlay .testsvc-header h3 {
  margin: 0;
}
.testsvc-overlay .testsvc-header p {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
}
.testsvc-overlay .testsvc-actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.testsvc-overlay .testsvc-toolbar-btn {
  width: 42px;
  height: 42px;
}
.testsvc-overlay .testsvc-toolbar-btn--primary {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.testsvc-overlay .testsvc-toolbar-btn--danger {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}
.testsvc-overlay .icon-btn--busy .material-icons {
  animation: spin 0.9s linear infinite;
}
.testsvc-overlay .activity-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
}
.testsvc-overlay .spinner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 var(--primary-soft);
  animation: pulse 1.2s infinite;
}
.testsvc-overlay .testsvc-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.3fr);
  grid-template-areas:
  "filters scopes"
  "scenarios scenarios";
  align-items: start;
  gap: 12px;
  min-height: 0;
}
.testsvc-overlay .testsvc-control-card,
.testsvc-overlay .testsvc-scope-picker,
.testsvc-overlay .testsvc-scenario-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  background: var(--surface-elevated);
  min-height: 0;
}
.testsvc-overlay .testsvc-control-card {
  grid-area: filters;
}
.testsvc-overlay .testsvc-scope-picker {
  grid-area: scopes;
  display: grid;
  gap: 8px;
  min-height: 0;
}
.testsvc-overlay .testsvc-scenario-picker {
  grid-area: scenarios;
  display: grid;
  gap: 8px;
  min-height: 0;
}
.testsvc-overlay .testsvc-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.testsvc-overlay .testsvc-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.testsvc-overlay .testsvc-filters span,
.testsvc-overlay .testsvc-scope-picker .title,
.testsvc-overlay .testsvc-scenario-picker .title {
  font-size: 12px;
  color: var(--text-muted);
}
.testsvc-overlay .testsvc-filters select {
  border-radius: var(--radius-md);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--control-text);
  padding: var(--space-2) var(--space-3);
}
.testsvc-overlay .scenario-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.testsvc-overlay .scope-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.testsvc-overlay .scope-header small {
  font-size: 12px;
  color: var(--text-muted);
}
.testsvc-overlay .scenario-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.testsvc-overlay .mini-btn {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: 11px;
  cursor: pointer;
  font: inherit;
}
/* SPEC-0646 — Zielgroesse (WCAG 2.2 SC 2.5.8): `padding: 2px` plus
   `font-size: 11px` ergeben eine Knopfhoehe von rund 17 px. Die
   TREFFERFLAECHE waechst auf 24 px, das sichtbare Bild bleibt unveraendert —
   der Knopf sitzt in einer Zeile mit genug Luft nach oben und unten. */
.testsvc-overlay .mini-btn {
  position: relative;
}

.testsvc-overlay .mini-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  min-width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

.testsvc-overlay .mini-btn:hover {
  border-color: var(--primary);
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--primary-soft); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.testsvc-overlay .scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  min-height: 0;
  align-content: start;
  padding-right: 2px;
}
.testsvc-overlay .scope-chip {
  display: inline-flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.testsvc-overlay .scope-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.testsvc-overlay .scope-chip--scenario {
  align-items: center;
}
.testsvc-overlay .testsvc-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1.85fr) minmax(320px, 1.05fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
  padding: 12px;
  padding-top: 0;
}
.testsvc-overlay .testsvc-runs,
.testsvc-overlay .testsvc-detail,
.testsvc-overlay .grafana-links {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  background: var(--surface-elevated);
  min-height: 0;
}
.testsvc-overlay .testsvc-runs {
  overflow: auto;
}
.testsvc-overlay .testsvc-detail {
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.testsvc-overlay .grafana-links {
  overflow: auto;
}
.testsvc-overlay .detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.testsvc-overlay .detail-title-row h4 {
  margin: 0;
}
.testsvc-overlay .detail-title-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.testsvc-overlay .testsvc-report-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.testsvc-overlay .testsvc-report-pdf-btn:hover:not(:disabled) {
  background: var(--primary);
  color: var(--text-inverse);
}
.testsvc-overlay .testsvc-report-pdf-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.testsvc-overlay .testsvc-report-pdf-btn .material-icons {
  font-size: 18px;
}
.testsvc-overlay .icon-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.testsvc-overlay .icon-btn:hover:not(:disabled) {
  border-color: var(--primary);
}
.testsvc-overlay .icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.testsvc-overlay .icon-btn .material-icons {
  font-size: 18px;
}
.testsvc-overlay .run-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.testsvc-overlay .run-item.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.testsvc-overlay .run-item-head {
  display: flex;
  justify-content: space-between;
}
.testsvc-overlay .run-item-meta {
  margin-top: 6px;
  display: grid;
  gap: 2px;
  font-size: 12px;
  opacity: 0.85;
}
.testsvc-overlay .detail-head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.testsvc-overlay .detail-table-wrap {
  max-height: none;
  overflow: auto;
  min-height: 0;
  flex: 1;
}
.testsvc-overlay .detail-table {
  width: 100%;
  border-collapse: collapse;
}
.testsvc-overlay .detail-table th,
.testsvc-overlay .detail-table td {
  border: 1px solid var(--border);
  padding: var(--space-2);
  vertical-align: top;
  font-size: 12px;
}
.testsvc-overlay .action-cell {
  width: 64px;
  text-align: center;
}
.testsvc-overlay .row-action-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.testsvc-overlay .impact {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 4px;
}
.testsvc-overlay .status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid transparent;
}
.testsvc-overlay .status-passed {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}
.testsvc-overlay .status-failed {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}
.testsvc-overlay .status-warn,
.testsvc-overlay .status-warning {
  background: var(--warning-soft);
  border-color: var(--warning);
  color: var(--warning);
}
.testsvc-overlay .status-running {
  background: var(--info-soft);
  border-color: var(--info);
  color: var(--info);
}
.testsvc-overlay .link-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.testsvc-overlay .link-grid a {
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  background: var(--surface);
}
.testsvc-overlay .link-grid a:hover {
  border-color: var(--primary);
}
.testsvc-overlay .run-details-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  padding: 0;
}
.testsvc-overlay .run-details-overlay-card {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  background: var(--surface);
  color: var(--text);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.testsvc-overlay .run-details-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.testsvc-overlay .run-details-overlay-header h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}
.testsvc-overlay .run-details-overlay-actions {
  display: inline-flex;
  gap: 8px;
}
.testsvc-overlay .detail-table-wrap--overlay {
  max-height: none;
  flex: 1;
}
.testsvc-overlay .result-flow-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300;
  padding: var(--space-5);
}
.testsvc-overlay .result-flow-card {
  width: min(980px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  padding: var(--space-3);
  box-shadow: var(--shadow-overlay);
}
.testsvc-overlay .result-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.testsvc-overlay .result-flow-header h3 {
  margin: 0;
}
.testsvc-overlay .result-flow-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.testsvc-overlay .result-flow-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
}
.testsvc-overlay .result-flow-json {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 1200px) {
  .testsvc-overlay .testsvc-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
    "filters"
    "scopes"
    "scenarios";
  }
  .testsvc-overlay .scope-grid {
    grid-template-columns: 1fr 1fr;
  }
  .testsvc-overlay .testsvc-main {
    grid-template-columns: 1fr;
    padding: 12px;
    padding-top: 0;
  }
  .testsvc-overlay .testsvc-filters {
    grid-template-columns: 1fr;
  }
  .testsvc-overlay .detail-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .testsvc-overlay .testsvc-filters,
  .testsvc-overlay .scope-grid,
  .testsvc-overlay .detail-head {
    grid-template-columns: 1fr;
  }
}
.sectest-overlay {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 18px;
  color: var(--text);
  background: var(--surface);
  overflow: auto;
}
.sectest-overlay .sectest-header,
.sectest-overlay .sectest-panel-head,
.sectest-overlay .sectest-actions,
.sectest-overlay .sectest-mini-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sectest-overlay .sectest-header {
  justify-content: space-between;
}
.sectest-overlay .sectest-header h3,
.sectest-overlay .sectest-panel h4,
.sectest-overlay .sectest-runs h4 {
  margin: 0;
}
.sectest-overlay .sectest-header p,
.sectest-overlay .sectest-panel p {
  margin: 4px 0 0;
  color: var(--text-muted);
}
.sectest-overlay .sectest-toolbar-btn,
.sectest-overlay .sectest-actions .icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-elevated);
  color: inherit;
  text-decoration: none;
}
.sectest-overlay .sectest-toolbar-btn--primary {
  background: var(--primary);
}
.sectest-overlay .icon-btn--busy .material-icons {
  animation: sectest-spin 1s linear infinite;
}
.sectest-overlay .sectest-status,
.sectest-overlay .sectest-panel,
.sectest-overlay .sectest-runs,
.sectest-overlay .sectest-detail {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-elevated);
}
.sectest-overlay .sectest-status {
  padding: 10px 12px;
}
.sectest-overlay .sectest-status--success {
  color: var(--success);
}
.sectest-overlay .sectest-status--warn {
  color: var(--warning);
}
.sectest-overlay .sectest-status--error {
  color: var(--danger);
}
.sectest-overlay .sectest-activity {
  display: grid;
  gap: 10px;
}
.sectest-overlay .sectest-activity-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
}
.sectest-overlay .sectest-activity-line strong {
  font-weight: 700;
}
.sectest-overlay .sectest-activity-line span {
  opacity: 0.92;
}
.sectest-overlay .sectest-activity-line small {
  margin-left: auto;
  color: var(--text-muted);
}
.sectest-overlay .sectest-activity-line--primary {
  color: var(--success);
  background: var(--success-soft);
}
.sectest-overlay .sectest-activity-line--secondary {
  color: var(--core-color-accent-blue);
  background: var(--primary-soft);
}
.sectest-overlay .sectest-panel {
  padding: 14px;
}
.sectest-overlay .sectest-panel-head {
  justify-content: space-between;
  margin-bottom: 12px;
}
.sectest-overlay .sectest-mini-actions button {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: inherit;
}
.sectest-overlay .sectest-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.sectest-overlay .sectest-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.sectest-overlay .sectest-main {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}
.sectest-overlay .sectest-runs,
.sectest-overlay .sectest-detail {
  padding: 14px;
  min-height: 360px;
}
.sectest-overlay .sectest-run {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
}
.sectest-overlay .sectest-run.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.sectest-overlay .sectest-run span {
  color: var(--text-muted);
  font-size: 12px;
}
.sectest-overlay .sectest-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.sectest-overlay .sectest-summary article {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.sectest-overlay .sectest-summary span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
}
.sectest-overlay .sectest-summary strong {
  font-size: 22px;
}
.sectest-overlay .sectest-table-wrap {
  overflow: auto;
}
.sectest-overlay .sectest-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.sectest-overlay .sectest-report-actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.sectest-overlay .sectest-report-actions .material-icons {
  font-size: 18px;
}
.sectest-overlay .sectest-report-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary);
  color: var(--text-inverse);
  cursor: pointer;
  font: inherit;
}
.sectest-overlay .sectest-report-pdf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sectest-overlay .sectest-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sectest-overlay .sectest-table th,
.sectest-overlay .sectest-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}
.sectest-overlay .sectest-table td strong,
.sectest-overlay .sectest-table td span {
  display: block;
}
.sectest-overlay .sectest-table small {
  color: var(--text-muted);
}
.sectest-overlay .sectest-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-elevated);
  color: inherit;
  font-size: 12px;
}
.sectest-overlay .sectest-pill--passed,
.sectest-overlay .sectest-pill--pass {
  background: var(--success-soft);
  color: var(--success);
}
.sectest-overlay .sectest-pill--warn {
  background: var(--warning-soft);
  color: var(--warning);
}
.sectest-overlay .sectest-pill--failed,
.sectest-overlay .sectest-pill--fail {
  background: var(--danger-soft);
  color: var(--danger);
}
.sectest-overlay .sectest-empty {
  padding: 18px;
  color: var(--text-muted);
}
@keyframes sectest-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
  .sectest-overlay .sectest-header,
  .sectest-overlay .sectest-main {
    display: block;
  }
  .sectest-overlay .sectest-actions {
    margin-top: 12px;
  }
  .sectest-overlay .sectest-detail {
    margin-top: 14px;
  }
  .sectest-overlay .sectest-activity-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
  }
  .sectest-overlay .sectest-activity-line small {
    margin-left: 0;
  }
}

.signoff-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--surface-overlay);
}
.signoff-backdrop .signoff-card {
  width: min(460px, 96vw);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  padding: var(--space-4);
  box-shadow: var(--shadow-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.signoff-backdrop .signoff-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.signoff-backdrop .signoff-header h3 {
  margin: 0;
  font-size: 1.1rem;
}
.signoff-backdrop .signoff-header-icon {
  color: var(--primary);
  font-size: 26px;
}
.signoff-backdrop .signoff-body {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 0.92rem;
}
.signoff-backdrop .signoff-current-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}
.signoff-backdrop .signoff-current-user-icon {
  font-size: 18px;
  color: var(--primary);
}
.signoff-backdrop .signoff-username-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.signoff-backdrop .signoff-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.signoff-backdrop .signoff-field {
  display: grid;
  gap: var(--space-1);
  font-size: 0.85rem;
}
.signoff-backdrop .signoff-field span {
  color: var(--text-muted);
}
.signoff-backdrop .signoff-field input {
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--control-text);
  font: inherit;
}
/* SPEC-0646 — Klasse B, gleiche Stelle wie in setup-stages.css (die
   Freigabe-Rueckfrage ist zweimal formatiert): reiner Rahmenwechsel als
   Ersatz. Ring nachgezogen, `:focus` auf `:focus-visible` praezisiert. */
.signoff-backdrop .signoff-field input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.signoff-backdrop .signoff-error {
  margin: 0;
  color: var(--danger);
  font-size: 0.85rem;
}
.signoff-backdrop .signoff-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.signoff-backdrop .signoff-btn {
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-elevated);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.signoff-backdrop .signoff-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.signoff-backdrop .signoff-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}
.signoff-backdrop .signoff-btn--ghost {
  background: transparent;
}
.signoff-backdrop .signoff-spin {
  font-size: 18px;
  animation: signoff-spin 0.9s linear infinite;
}
@keyframes signoff-spin {
  to { transform: rotate(360deg); }
}

/* ====== SPEC-0646 — Windows-Kontrastmodus =============================== *
 * Edge/Chromium zeichnen unter `forced-colors: active` KEINEN `box-shadow`
 * und zwingen jede Rahmen- und Flaechenfarbe auf eine Systemfarbe. Damit
 * faellt jeder Fokusring dieses Blattes dort ersatzlos aus — der ring-lose
 * Rahmenwechsel ebenso, weil dann jeder Rahmen dieselbe Farbe traegt.
 * `outline` WIRD gezeichnet und ist das einzige Mittel, das dort traegt.
 * `Highlight` ist die Systemfarbe fuer Auswahl und hebt sich per Definition
 * vom `Canvas` des Nutzers ab; `outline-offset` haelt den Ring von der
 * eigenen Kante frei, die dort ebenfalls `CanvasText` traegt.
 * KEIN `forced-color-adjust: none` — das naehme dem Nutzer genau die
 * Farbwahl, um die es hier geht (SPEC-0646, Entscheidung E3).
 * ====================================================================== */
@media (forced-colors: active) {
  .signoff-backdrop .signoff-field input:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}