@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
/* SIM Zentrale — Design „Arclon-Finish" (Redesign 01.08.2026, Etappe A). Hell = Standard,
   Dunkel bleibt vollwertig über den Toggle. Token-NAMEN bleiben stabil (andere Sessions bauen
   parallel Ansichten darauf) — nur die WERTE haben sich gedreht: früher war Dunkel der
   :root-Default, jetzt ist es Hell. Siehe docs/redesign-zentrale-2026-08.md. */
:root, html[data-theme="light"] {
  color-scheme: light;
  --sim-blue: #009FE3;
  --sim-blue-bright: #0072BC;
  --sim-blue-deep: #0084C2;
  --sim-grad: linear-gradient(135deg, #0072BC 0%, #009FE3 55%, #2CC1F5 100%);
  --bg-1: #F2F5F8;
  --bg-2: #EDF1F5;
  --s1: #FFFFFF;
  --s2: #F7F9FB;
  --s3: #EFF3F7;
  --l1: rgba(18,32,54,.07);
  --l2: rgba(18,32,54,.14);
  --fg-1: #1B2A41;
  --fg-2: #45536A;
  --fg-3: #7C8AA0;
  --green: #0E8A55;
  --warn: #A05A00;
  --red: #B23A2E;
  --nav-active-text: #0072BC;
  --header-bg: var(--s1);
  --bg-glow: rgba(0,159,227,.10);
  --glow-blue: 0 0 0 1px rgba(0,159,227,.25), 0 10px 32px -8px rgba(0,159,227,.28);
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --shadow: 0 1px 2px rgba(18,32,54,.04), 0 2px 10px rgba(18,32,54,.05);
  --shadow-lift: 0 2px 4px rgba(18,32,54,.06), 0 10px 26px -8px rgba(18,32,54,.13);
  --c1: #0087C9;
  --c2: #B26F00;
  --c3: #7C5FD3;
  --c4: #2E7D52;
  --good-bg: rgba(14,138,85,.12);
  --warn-bg: rgba(160,90,0,.12);
  --crit-bg: rgba(178,58,46,.12);
  --accent-bg: rgba(0,159,227,.10);
  --font: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --sim-blue-bright: #2DB4EC;
  --bg-1: #0C0F16;
  --bg-2: #0A0D13;
  --s1: #121722;
  --s2: #181E2B;
  --s3: #1D2432;
  --l1: rgba(255,255,255,.07);
  --l2: rgba(255,255,255,.14);
  --fg-1: #F1F5FA;
  --fg-2: #B2BDCC;
  --fg-3: #7C889B;
  --green: #4ADE97;
  --warn: #F2C14E;
  --red: #F27E7E;
  --nav-active-text: #2DB4EC;
  --header-bg: var(--s1);
  --bg-glow: rgba(0,159,227,.12);
  --glow-blue: 0 0 0 1px rgba(0,159,227,.25), 0 10px 32px -8px rgba(0,159,227,.40);
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.35);
  --shadow-lift: 0 4px 10px rgba(0,0,0,.30), 0 14px 34px -10px rgba(0,0,0,.50);
  --c1: #009FE3;
  --c2: #BC7A10;
  --c3: #8B6FD9;
  --c4: #2E9E62;
  --good-bg: rgba(74,222,151,.14);
  --warn-bg: rgba(242,193,78,.14);
  --crit-bg: rgba(242,126,126,.14);
  --accent-bg: rgba(0,159,227,.14);
}

/* ===== Generische Basis-Komponenten (Auszug SIM Zentrale v0.68.x) =====
   Klassennamen sind Vorschläge — im Ticketsystem (Vue) die Werte auf die eigenen
   Komponenten mappen. Entscheidend: NUR über die Tokens oben stylen. */
body { font: 14.5px/1.55 var(--font); color: var(--fg-2); background: var(--bg-1); }
h1, h2 { color: var(--fg-1); font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }

/* Karten: randlos, weiche Schatten, Radius 8px */
.sim-card { background: var(--s1); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow); padding: 18px 20px; }

/* Tabellen */
.sim-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.sim-table th { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fg-3); text-align: left; padding: 9px 14px; background: var(--s2); border-bottom: 1px solid var(--l1); }
.sim-table td { padding: 11px 14px; border-bottom: 1px solid var(--l1); font-size: 13.5px; }
.sim-table tbody tr:hover { background: var(--s2); }

/* Buttons */
.sim-btn { height: 30px; padding: 0 13px; border-radius: var(--r-sm); border: 1px solid var(--l2);
  background: var(--s1); color: var(--fg-1); font: 600 12.5px var(--font); cursor: pointer; }
.sim-btn:hover { border-color: var(--sim-blue); color: var(--sim-blue); }
.sim-btn--primary { background: var(--sim-blue); border-color: var(--sim-blue); color: #fff; }
.sim-btn--primary:hover { background: var(--sim-blue-deep); color: #fff; }
.sim-btn--danger { background: transparent; border-color: var(--red); color: var(--red); }

/* Status-Pillen */
.sim-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 3px 10px; }
.sim-pill--good { background: var(--good-bg); color: var(--green); }
.sim-pill--warn { background: var(--warn-bg); color: var(--warn); }
.sim-pill--crit { background: var(--crit-bg); color: var(--red); }
.sim-pill--blue { background: var(--accent-bg); color: var(--sim-blue); }

/* Formulare */
.sim-input { background: var(--s2); color: var(--fg-1); border: 1px solid var(--l2); border-radius: var(--r-sm);
  padding: 9px 12px; font: inherit; }
.sim-input:focus { outline: none; border-color: var(--sim-blue); box-shadow: 0 0 0 3px var(--accent-bg); }