/*
 * Gemeinsame Gestaltungsgrundlage fuer eingebettete CMOS-Module.
 * Farbwerte duerfen nur in diesem Token-Satz definiert werden.
 */
:root {
  color-scheme: dark;

  /*
   * Quelle: apps/os-shell/styles.css :root. Eingebettete Module teilen kein
   * CSS-Erbe mit dem Desktop und brauchen deshalb diese bewusst benannten
   * Spiegel der Shell-Grundgestaltung. Die Shell-Datei bleibt die Quelle;
   * diese Datei ist nur die konfliktfreie Uebergabeflaeche fuer Module.
   */
  --cmos-shell-bg-start: #0a1930;
  --cmos-shell-bg-mid: #123d6b;
  --cmos-shell-bg-end: #195f88;
  --cmos-shell-background: linear-gradient(160deg, var(--cmos-shell-bg-start), var(--cmos-shell-bg-mid), var(--cmos-shell-bg-end));
  --cmos-shell-surface: rgba(8, 20, 35, 0.78);
  --cmos-shell-surface-strong: rgba(8, 20, 35, 0.92);
  --cmos-shell-surface-soft: rgba(14, 30, 52, 0.55);
  --cmos-shell-border: rgba(150, 210, 255, 0.28);
  --cmos-shell-text: #e7f5ff;
  --cmos-shell-text-muted: #9ac3e1;
  --cmos-shell-accent: #5bd0ff;
  /* Dunkle Beschriftung auf dem hellen Shell-Akzent (z. B. Website anlegen). */
  --ux-text-on-accent: var(--cmos-shell-bg-start);
  --cmos-shell-accent-strong: #12aee8;
  --cmos-shell-danger: #ff5d6c;
  --cmos-shell-shadow: 0 24px 44px rgba(2, 7, 16, 0.42);
  --cmos-shell-font-family: "Space Grotesk", "Segoe UI", sans-serif;
  --cmos-shell-taskbar-height: 64px;

  --ux-space-1: 4px;
  --ux-space-2: 8px;
  /* Verdichtete Listen und ihre direkt anschliessenden Details brauchen
     zwischen 8 und 12px einen eigenen, wiederverwendbaren Rhythmus. */
  --ux-space-2-5: 10px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-5: 20px;
  --ux-space-6: 24px;
  --ux-space-8: 32px;
  --ux-font-xs: 12px;
  --ux-font-small: 13px;
  --ux-font-body: 14px;
  --ux-font-lg: 16px;
  --ux-font-xl: 20px;
  --ux-font-2xl: 26px;
  --ux-font-metric: 28px;
  --ux-font-tiny: var(--ux-font-xs);
  --ux-radius-sm: 6px;
  --ux-radius: 9px;
  --ux-radius-lg: 12px;
  --ux-radius-pill: 999px;

  --ux-bg-app: #06182b;
  --ux-bg-sidebar: #071b31;
  --ux-bg-header: #071a2f;
  --ux-bg-surface: #09223c;
  --ux-bg-surface-raised: #0b2948;
  --ux-bg-surface-hover: #0d3156;
  --ux-bg-input: #071d35;
  --ux-bg-recessed: #041424;
  --ux-bg-popover: #08223b;
  --ux-bg-interactive-hover: #2373a9;
  --ux-bg-interactive-active: #1e6fa6;
  --ux-bg-selection: #125b8b;
  --ux-bg-good: #0b4f3f;
  --ux-bg-warning: #644813;
  --ux-bg-critical: #701f1f;
  --ux-bg-surface-legacy: #0c2b49;
  --ux-bg-document: #fff;
  --ux-bg-code: #071f35;
  --ux-border-subtle: #123b61;
  --ux-border-default: #16517f;
  --ux-border-strong: #1975b9;
  --ux-border-highlight: #5ab8f6;
  --ux-border-faint: #97b7d0;
  /* #0871ce erreicht mit --ux-text-primary 4.62:1 statt 3.16:1. */
  --ux-primary: #0871ce;
  --ux-primary-hover: #2ca0ff;
  --ux-primary-active: #0d73db;
  --ux-primary-legacy: #0c7eae;
  --ux-action-secondary: #0c4270;
  --ux-action-secondary-hover: #125687;
  --ux-brand-mark: #1768e6;
  --ux-state-good: #19cf7a;
  --ux-state-note: #2fa7ff;
  --ux-state-warning: #ffb31a;
  --ux-state-critical: #ff4d64;
  --ux-state-ai: #b690ff;
  --ux-chart-ring-track: rgba(148, 163, 184, .25);
  --ux-text-primary: #f4f8fc;
  --ux-text-secondary: #bfd0e2;
  --ux-text-muted: #8399af;
  --ux-text-navigation: #d7eafa;
  --ux-text-navigation-icon: #9ccbe9;
  --ux-text-inverse: #fff;
  --ux-text-brand: #eff9ff;
  --ux-text-good: #c9ffe0;
  --ux-text-warning: #ffe4a8;
  --ux-text-critical: #ffd8d8;
  --ux-text-code: #d8f3ff;
  --ux-transparent: transparent;
  --ux-overlay-base: #000;

  /* Bestehende Modulklassen erhalten semantische, gemeinsame Aliasnamen. */
  --bg: var(--ux-bg-app);
  --panel: var(--ux-bg-surface);
  --panel-raised: var(--ux-bg-surface-raised);
  --panel-alt: var(--ux-bg-input);
  --sidebar: var(--ux-bg-sidebar);
  --header: var(--ux-bg-header);
  --line: var(--ux-border-default);
  --text: var(--ux-text-primary);
  --muted: var(--ux-text-secondary);
  --accent: var(--ux-primary);
  /* Die historischen Aliasse bleiben fuer bestehende Module erhalten.
     Diese vier Rollen trennen aber belegte helle und dunkle Flaechen: ein
     einziger heller Akzent bzw. Rand kann weder helle Beschriftung noch
     den Legal-Center-Dokumentrand gleichzeitig kontraststark halten. */
  --accent-on-dark: #4ec6ff;
  --accent-on-light: var(--ux-primary);
  --line-on-dark: var(--ux-border-highlight);
  --line-on-light: var(--ux-border-default);
  --ok: var(--ux-state-good);
  --warn: var(--ux-state-warning);
  --danger: var(--ux-state-critical);
}

/* Gemeinsame, visuell verborgene Beschriftung. Eingebettete Module laden
 * diese Grunddatei auch ohne die Desktop-Shell; der Text bleibt damit fuer
 * Screenreader verfuegbar, ohne den sichtbaren Ablauf zu veraendern. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Gemeinsame Kategorienavigation, derzeit im SEO Audit Hub und im
 * Credentials Hub eingesetzt. Module liefern nur Labels und Eintraege. */
.workspace-nav {
  display: flex;
  gap: var(--ux-space-2);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--ux-space-3);
  border: 1px solid color-mix(in srgb, var(--ux-border-highlight) 35%, var(--ux-transparent));
  border-radius: var(--ux-radius);
  background: color-mix(in srgb, var(--ux-bg-recessed) 24%, var(--ux-transparent));
}

.workspace-nav-label {
  color: var(--ux-text-secondary);
  font-size: var(--ux-font-xs);
  font-weight: 700;
  margin-right: var(--ux-space-1);
}

.workspace-tab {
  border: 1px solid var(--ux-border-default);
  border-radius: var(--ux-radius-sm);
  background: color-mix(in srgb, var(--ux-bg-recessed) 42%, var(--ux-transparent));
  color: var(--ux-text-primary);
  font: inherit;
  padding: var(--ux-space-2) var(--ux-space-3);
  cursor: pointer;
}

.workspace-tab.active {
  background: var(--accent, var(--ux-primary));
  border-color: var(--accent, var(--ux-primary));
}

.workspace-tab.designer.active {
  background: var(--ux-bg-good);
  border-color: var(--ux-state-good);
}

.workspace-tab.data.active {
  background: var(--ux-bg-selection);
  border-color: var(--ux-border-default);
}

/* Tastaturbedienung braucht einen sichtbaren Fokus, auch in den eingebetteten
 * Arbeitsbereichen. Die gemeinsame Navigation verwendet normale Buttons und
 * erbt diese Markierung ebenso wie jede sichtbare Aktionsschaltflaeche. */
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ux-border-highlight);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ux-bg-app) 72%, var(--ux-transparent));
}

/* Gemeinsame Control-Center-Tabelle. Alle Gestaltungswerte bleiben Tokens
 * aus diesem einen Satz; die Tabelle blendet keine fachlich wichtige Spalte
 * aus, sondern bleibt horizontal scrollbar. */
body[data-cmos-control-center] {
  --ux-table-row-height: 46px;
  --ux-table-min-width: 980px;
}

body[data-cmos-control-center] .control-center-table {
  margin-top: var(--ux-space-4);
}

body[data-cmos-control-center] .control-center-table-toolbar,
body[data-cmos-control-center] .control-center-table-footer {
  display: flex;
  gap: var(--ux-space-2);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

body[data-cmos-control-center] .control-center-table-toolbar {
  margin-bottom: var(--ux-space-3);
}

body[data-cmos-control-center] .control-center-table-controls {
  display: flex;
  gap: var(--ux-space-2);
  align-items: center;
  flex-wrap: wrap;
}

body[data-cmos-control-center] .control-center-table label {
  color: var(--ux-text-secondary);
  font-size: var(--ux-font-small);
}

body[data-cmos-control-center] .control-center-table input,
body[data-cmos-control-center] .control-center-table select {
  min-height: var(--ux-table-row-height);
  border: 1px solid var(--ux-border-default);
  border-radius: var(--ux-radius-sm);
  background: var(--ux-bg-input);
  color: var(--ux-text-primary);
  padding: 0 var(--ux-space-3);
}

body[data-cmos-control-center] .control-center-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--ux-border-default);
  border-radius: var(--ux-radius);
}

body[data-cmos-control-center] .control-center-table-grid {
  width: 100%;
  min-width: var(--ux-table-min-width);
  border-collapse: collapse;
  background: var(--ux-bg-surface);
}

body[data-cmos-control-center] .control-center-table-grid caption {
  padding: var(--ux-space-3);
  color: var(--ux-text-secondary);
  text-align: left;
  font-size: var(--ux-font-small);
}

body[data-cmos-control-center] .control-center-table-grid th,
body[data-cmos-control-center] .control-center-table-grid td {
  display: table-cell;
  height: var(--ux-table-row-height);
  min-height: var(--ux-table-row-height);
  padding: var(--ux-space-2) var(--ux-space-3);
  border-bottom: 1px solid var(--ux-border-subtle);
  vertical-align: middle;
  white-space: nowrap;
}

body[data-cmos-control-center] .control-center-table-grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ux-bg-header);
  color: var(--ux-text-navigation);
  text-align: left;
  font-size: var(--ux-font-small);
}

body[data-cmos-control-center] .control-center-table-grid th button {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ux-transparent);
  color: inherit;
  font-weight: 700;
}

body[data-cmos-control-center] .control-center-table-grid tbody tr:hover {
  background: var(--ux-bg-surface-hover);
}

body[data-cmos-control-center] .control-center-table-grid td:last-child,
body[data-cmos-control-center] .control-center-table-grid th:last-child {
  text-align: right;
}

body[data-cmos-control-center] .control-center-table-empty {
  margin: 0;
  border-style: solid;
}

body[data-cmos-control-center] .control-center-empty--filtered {
  border-left: 4px solid var(--ux-state-warning);
}

body[data-cmos-control-center] .control-center-empty--failed {
  border: 1px solid var(--ux-state-critical);
  border-left: 4px solid var(--ux-state-critical);
  background: var(--ux-bg-critical);
  color: var(--ux-text-critical);
}

body[data-cmos-control-center] .control-center-table-footer {
  margin-top: var(--ux-space-3);
  color: var(--ux-text-secondary);
  font-size: var(--ux-font-small);
}

body[data-cmos-control-center] .control-center-table-pages {
  display: flex;
  gap: var(--ux-space-2);
  align-items: center;
}