/* ============================================================
   Design-Tokens
   Aufgeräumtes hell-blau-technisches System.
   Die Farben stammen aus dem testclient, sind hier aber sauber
   in ein semantisches Token-System gegliedert.
   ============================================================ */
:root {
  /* Surface-Hierarchie.
     - App-Body ist weiß (Main-Fläche).
     - Header und Sidebar nutzen die bläulichen Töne.
     - Pillen/Cards heben sich mit Rand + leichtem blauen Hintergrund ab. */
  --surface-page: #ffffff;      /* Main-Fläche (weiß) */
  --surface-chrome: #e6f1fb;    /* Header + Sidebar */
  --surface-chrome-2: #d6e6f4;  /* Sidebar Hover */
  --surface-accent: #eaf4fc;    /* Pillen-Hintergrund bei Hover */
  --surface-accent-2: #d8ecfa;  /* Header-Pille (kräftiger) */
  --surface-input: #f5f9fd;

  /* Legacy-Aliase, damit bestehende CSS-Regeln noch funktionieren */
  --surface-0: var(--surface-page);
  --surface-1: var(--surface-chrome);
  --surface-2: var(--surface-accent-2);
  --surface-3: var(--surface-chrome-2);
  --surface-4: #b8d4f0;

  /* Text-Hierarchie */
  --text-1: #0a1628;
  --text-2: #2a4a6a;
  --text-3: #5580a0;
  --text-inverse: #ffffff;

  /* Borders */
  --border-1: #90b8d8;
  --border-2: #7aa8cc;

  /* Semantik */
  --ok:    #007a50;    /* "OK/Aktiv" — nur in Badges und Erfolgs-Toasts */
  --ok-2:  #006040;
  --warn:  #b86000;
  --err:   #cc1a2a;
  --info:  #0055aa;

  /* Brand / Interaktion */
  --brand:    #0066cc;   /* Haupt-Interaktionsfarbe: Buttons, Fokus, Hover, aktive Nav */
  --brand-2:  #004d99;   /* Hover/Pressed */
  --brand-tint: rgba(0,102,204,0.08);   /* sanftes Tint für Row-Selected, Bulk-Bar, etc. */
  --brand-ring: rgba(0,102,204,0.15);   /* Fokus-Ring */

  /* Badge-Paare (Hintergrund/Text/Border) */
  --bg-green: #c8f0e0;   --tx-green: #003d22;
  --bg-red:   #ffd0d4;   --tx-red:   #6a0010;
  --bg-amber: #ffecc8;   --tx-amber: #6a3000;
  --bg-blue:  #cce0ff;   --tx-blue:  #002d70;
  --bg-gray:  #c8d8e8;   --tx-gray:  #1a3050;

  /* Typo */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Syne', system-ui, sans-serif;

  /* Layout */
  --radius: 6px;
  --radius-sm: 4px;
  --shadow-1: 0 1px 2px rgba(10,22,40,.06);
  --shadow-2: 0 4px 12px rgba(10,22,40,.10);
  --shadow-pop: 0 12px 32px rgba(10,22,40,.16);

  /* Transition */
  --t-fast: 120ms ease-out;
  --t-med: 200ms ease-out;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--surface-page);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Helpers
   ============================================================ */
.hidden { display: none !important; }
.mono { font-family: var(--font-mono); }
.tid { font-size: 11px; color: var(--text-3); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--text-3); }

/* v7.52: vom EV ans RFID vererbte Werte — gedimmt + kursiv */
.inherited { color: var(--text-3); font-style: italic; opacity: 0.85; }
.inherited.mono { font-family: var(--font-mono); }
.row { display: flex; align-items: center; gap: 8px; }
.row-sb { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.grow { flex: 1; }