/* ============================================================
   IIO Manual – B2B Solution Provider Theme
   Design Token System: light + dark, vererbt via CSS Custom Properties
   Pages dürfen NUR var(--iio-*) verwenden – keine hardcodierten Farben.
   ============================================================ */

/* ------------------------------------------------------------
   LIGHT MODE (default)
   ------------------------------------------------------------ */
:root,
[data-theme="light"] {
  /* Hintergründe */
  --iio-bg:           #f0f5fd;
  --iio-bg-subtle:    #f7fafe;
  --iio-bg-raised:    #ffffff;
  --iio-bg-sunken:    #e8eef8;

  /* Oberflächen / Panels */
  --iio-surface:      #ffffff;
  --iio-surface-soft: #f7faff;
  --iio-surface-mid:  #eef3fb;

  /* Schrift */
  --iio-ink:          #1a2230;
  --iio-ink-soft:     #2e3d55;
  --iio-muted:        #4b5670;
  --iio-muted-light:  #8494b0;
  --iio-on-accent:    #ffffff;

  /* Linien / Rahmen */
  --iio-line:         #ccd6e8;
  --iio-line-strong:  #a4b4cc;
  --iio-line-subtle:  #dfe8f4;
  /* Lesbarkeit / Rhythmus */
  --iio-reading-max: 84ch;

  /* Akzent / Brand */
  --iio-accent:       #1f3f7a;

/* Längere Absätze im Manual ruhiger halten */
main p,
.wrap p,
.card p,
.panel p {
  max-width: var(--iio-reading-max);
}
  --iio-accent-mid:   #2e5bab;
  --iio-accent-light: #e8eef8;
  --iio-accent-hover: #163060;

  background: linear-gradient(180deg, color-mix(in srgb, var(--iio-pre-bg) 92%, var(--iio-surface) 8%), var(--iio-pre-bg));
  --iio-ok:           #16a34a;
  border-left: 3px solid color-mix(in srgb, var(--iio-accent) 45%, var(--iio-pre-line) 55%);
  --iio-ok-bg:        #dcfce7;
  --iio-ok-line:      #86efac;
  --iio-warn:         #6f4a00;
  --iio-warn-bg:      #fef9c3;
  --iio-warn-line:    #fde047;
  --iio-risk:         #dc2626;
  --iio-risk-bg:      #fee2e2;
  --iio-risk-line:    #fca5a5;
  --iio-info:         #0369a1;
  --iio-info-bg:      #e0f2fe;
  --iio-info-line:    #7dd3fc;

h1 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
h2 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); }
h3 { font-size: clamp(1rem, 1.35vw, 1.2rem); }

  /* Gate-Chips (semantisch) */
  --iio-gate-all-bg:          #dcfce7;
  --iio-gate-all-line:        #86efac;
  --iio-gate-all-ink:         #166534;
  --iio-gate-boundary-bg:     #fef9c3;
  --iio-gate-boundary-line:   #fde047;
  box-shadow: var(--iio-shadow-sm);
  position: relative;
  --iio-gate-txn-bg:          #e0f2fe;
  --iio-gate-txn-line:        #7dd3fc;
  --iio-gate-txn-ink:         #075985;
  --iio-gate-story-bg:        #ede9fe;
  --iio-gate-story-line:      #c4b5fd;

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--iio-r-lg) var(--iio-r-lg) 0 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--iio-accent) 45%, transparent), transparent 60%);
  pointer-events: none;
}
  --iio-gate-story-ink:       #4c1d95;
  --iio-gate-role-bg:         #fae8ff;
  --iio-gate-role-line:       #e879f9;
  --iio-gate-role-ink:        #701a75;
  --iio-gate-unknown-bg:      #f1f5f9;
  --iio-gate-unknown-line:    #cbd5e1;

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--iio-tr-hover) 50%, transparent 50%);
}
  --iio-gate-unknown-ink:     #475569;

  /* Typografie */
  --iio-font-base:    "Segoe UI", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --iio-font-mono:    "IBM Plex Mono", "Consolas", "Liberation Mono", monospace;
  --iio-font-size:    14px;
  --iio-line-height:  1.6;


.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
  /* Radien */
  --iio-r-sm:   4px;
  --iio-r-md:   8px;
  --iio-r-lg:   12px;
  --iio-r-xl:   16px;
  --iio-r-pill: 999px;

  /* Schatten */
  --iio-shadow-sm:  0 1px 3px rgba(20, 37, 58, 0.08);
  --iio-shadow-md:  0 4px 12px rgba(20, 37, 58, 0.10);
  --iio-shadow-lg:  0 8px 24px rgba(20, 37, 58, 0.12);

  /* Spacing */
  --iio-sp-xs:  4px;
  --iio-sp-sm:  8px;
  --iio-sp-md:  16px;
  --iio-sp-lg:  24px;
  --iio-sp-xl:  32px;
  --iio-sp-2xl: 48px;

  /* Shell-spezifisch (von _shell.js genutzt) */
  --iio-h-bg:   #f9fcff;
  --iio-h-ink:  #1a2433;
  --iio-h-muted: #5d6d82;
  --iio-h-line:  #d4deeb;

  /* Code-Blöcke */
  --iio-code-bg:   #f1f5f9;
  --iio-code-ink:  #1e293b;
  --iio-pre-bg:    #f8fafc;
  --iio-pre-line:  #e2e8f0;

  /* Tabellen */
  --iio-thead-bg:  #eef3fb;
  --iio-tr-hover:  #f5f8ff;
  --iio-tr-active: #e8eef8;

  /* Tabs */
  --iio-tab-bg:     #edf2fb;
  --iio-tab-active-bg:  #dfe8f7;
  --iio-tab-active-ink: #1f3f7a;
}

/* ------------------------------------------------------------
   DARK MODE
   Zwei Varianten werden korrekt getrennt definiert:
   1. [data-theme="dark"]  — vom Shell-Toggle gesetzt (explizit)
   2. @media prefers-color-scheme: dark — System-Präferenz (implizit,
      nur wenn kein data-theme="light" explizit gesetzt ist)
   ------------------------------------------------------------ */

/* Variante 1: Explizit via Shell-Toggle */
[data-theme="dark"] {
  --iio-bg:           #0f1622;
  --iio-bg-subtle:    #131c2e;
  --iio-bg-raised:    #1a2540;
  --iio-bg-sunken:    #0b1019;

  --iio-surface:      #1a2540;
  --iio-surface-soft: #1e2b48;
  --iio-surface-mid:  #162035;

  --iio-ink:          #e2eaf8;
  --iio-ink-soft:     #c8d8f0;
  --iio-muted:        #8ca4c4;
  --iio-muted-light:  #5a7294;
  --iio-on-accent:    #111111;

  --iio-line:         #2a3a58;
  --iio-line-strong:  #3d527a;
  --iio-line-subtle:  #1e2d47;

  --iio-accent:       #5b8de8;
  --iio-accent-mid:   #4472d4;
  --iio-accent-light: #1e2f50;
  --iio-accent-hover: #7aaaf0;

  --iio-ok:           #4ade80;
  --iio-ok-bg:        #14532d;
  --iio-ok-line:      #166534;
  --iio-warn:         #fbbf24;
  --iio-warn-bg:      #451a03;
  --iio-warn-line:    #78350f;
  --iio-risk:         #f87171;
  --iio-risk-bg:      #450a0a;
  --iio-risk-line:    #7f1d1d;
  --iio-info:         #38bdf8;
  --iio-info-bg:      #0c2a3f;
  --iio-info-line:    #075985;

  --iio-gate-all-bg:          #14532d;
  --iio-gate-all-line:        #166534;
  --iio-gate-all-ink:         #86efac;
  --iio-gate-boundary-bg:     #451a03;
  --iio-gate-boundary-line:   #78350f;
  --iio-gate-boundary-ink:    #fde68a;
  --iio-gate-txn-bg:          #0c2a3f;
  --iio-gate-txn-line:        #075985;
  --iio-gate-txn-ink:         #7dd3fc;
  --iio-gate-story-bg:        #2e1065;
  --iio-gate-story-line:      #4c1d95;
  --iio-gate-story-ink:       #c4b5fd;
  --iio-gate-role-bg:         #4a044e;
  --iio-gate-role-line:       #701a75;
  --iio-gate-role-ink:        #f0abfc;
  --iio-gate-unknown-bg:      #1e293b;
  --iio-gate-unknown-line:    #334155;
  --iio-gate-unknown-ink:     #94a3b8;

  --iio-h-bg:    #131c2e;
  --iio-h-ink:   #dde8f8;
  --iio-h-muted: #7a92b2;
  --iio-h-line:  #2a3a58;

  --iio-code-bg:   #1e2d47;
  --iio-code-ink:  #c8d8f0;
  --iio-pre-bg:    #141f35;
  --iio-pre-line:  #2a3a58;

  --iio-thead-bg:  #162035;
  --iio-tr-hover:  #1e2b48;
  --iio-tr-active: #1a2f50;

  --iio-tab-bg:         #162035;
  --iio-tab-active-bg:  #1e2f50;
  --iio-tab-active-ink: #7aaaf0;
}

/* Variante 2: System-Präferenz — nur wenn kein explizites data-theme gesetzt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --iio-bg:           #0f1622;
    --iio-bg-subtle:    #131c2e;
    --iio-bg-raised:    #1a2540;
    --iio-bg-sunken:    #0b1019;

    --iio-surface:      #1a2540;
    --iio-surface-soft: #1e2b48;
    --iio-surface-mid:  #162035;

    --iio-ink:          #e2eaf8;
    --iio-ink-soft:     #c8d8f0;
    --iio-muted:        #8ca4c4;
    --iio-muted-light:  #5a7294;
    --iio-on-accent:    #ffffff;

    --iio-line:         #2a3a58;
    --iio-line-strong:  #3d527a;
    --iio-line-subtle:  #1e2d47;

    --iio-accent:       #5b8de8;
    --iio-accent-mid:   #4472d4;
    --iio-accent-light: #1e2f50;
    --iio-accent-hover: #7aaaf0;

    --iio-ok:           #4ade80;
    --iio-ok-bg:        #14532d;
    --iio-ok-line:      #166534;
    --iio-warn:         #fbbf24;
    --iio-warn-bg:      #451a03;
    --iio-warn-line:    #78350f;
    --iio-risk:         #f87171;
    --iio-risk-bg:      #450a0a;
    --iio-risk-line:    #7f1d1d;
    --iio-info:         #38bdf8;
    --iio-info-bg:      #0c2a3f;
    --iio-info-line:    #075985;

    --iio-gate-all-bg:          #14532d;
    --iio-gate-all-line:        #166534;
    --iio-gate-all-ink:         #86efac;
    --iio-gate-boundary-bg:     #451a03;
    --iio-gate-boundary-line:   #78350f;
    --iio-gate-boundary-ink:    #fde68a;
    --iio-gate-txn-bg:          #0c2a3f;
    --iio-gate-txn-line:        #075985;
    --iio-gate-txn-ink:         #7dd3fc;
    --iio-gate-story-bg:        #2e1065;
    --iio-gate-story-line:      #4c1d95;
    --iio-gate-story-ink:       #c4b5fd;
    --iio-gate-role-bg:         #4a044e;
    --iio-gate-role-line:       #701a75;
    --iio-gate-role-ink:        #f0abfc;
    --iio-gate-unknown-bg:      #1e293b;
    --iio-gate-unknown-line:    #334155;
    --iio-gate-unknown-ink:     #94a3b8;

    --iio-h-bg:    #131c2e;
    --iio-h-ink:   #dde8f8;
    --iio-h-muted: #7a92b2;
    --iio-h-line:  #2a3a58;

    --iio-code-bg:   #1e2d47;
    --iio-code-ink:  #c8d8f0;
    --iio-pre-bg:    #141f35;
    --iio-pre-line:  #2a3a58;

    --iio-thead-bg:  #162035;
    --iio-tr-hover:  #1e2b48;
    --iio-tr-active: #1a2f50;

    --iio-tab-bg:         #162035;
    --iio-tab-active-bg:  #1e2f50;
    --iio-tab-active-ink: #7aaaf0;
  }
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: var(--iio-font-size);
}

body {
  font-family: var(--iio-font-base);
  font-size: 1rem;
  line-height: var(--iio-line-height);
  color: var(--iio-ink);
  background-color: var(--iio-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  color: var(--iio-ink);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: 1.875rem; margin-bottom: var(--iio-sp-md); }
h2 { font-size: 1.375rem; margin-bottom: var(--iio-sp-sm); }
h3 { font-size: 1.125rem; margin-bottom: var(--iio-sp-sm); }
h4 { font-size: 1rem;     margin-bottom: var(--iio-sp-xs); }
h5 { font-size: 0.875rem; margin-bottom: var(--iio-sp-xs); }
h6 { font-size: 0.75rem;  margin-bottom: var(--iio-sp-xs); }

p  { margin-bottom: var(--iio-sp-md); color: var(--iio-ink-soft); }

a {
  color: var(--iio-accent-mid);
  text-decoration: none;
}
a:hover {
  color: var(--iio-accent-hover);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--iio-accent);
  outline-offset: 2px;
  border-radius: var(--iio-r-sm);
}

strong, b { font-weight: 700; color: var(--iio-ink); }
small      { font-size: 0.8125rem; color: var(--iio-muted); }

/* ============================================================
   CODE
   ============================================================ */
code {
  font-family: var(--iio-font-mono);
  font-size: 0.85em;
  background: var(--iio-code-bg);
  color: var(--iio-code-ink);
  padding: 2px 6px;
  border-radius: var(--iio-r-sm);
}

pre {
  font-family: var(--iio-font-mono);
  font-size: 0.85rem;
  background: var(--iio-pre-bg);
  border: 1px solid var(--iio-pre-line);
  color: var(--iio-ink);
  padding: var(--iio-sp-md);
  border-radius: var(--iio-r-md);
  overflow-x: auto;
  margin-bottom: var(--iio-sp-md);
  line-height: 1.5;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ============================================================
   LAYOUT
   ============================================================ */
main, .wrap {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(12px, 2vw, var(--iio-sp-lg));
}

.container {
  width: 100%;
}

/* ============================================================
   HEADER / NAV (Seiten-eigener, wird vom Shell ausgeblendet)
   ============================================================ */
header {
  background: linear-gradient(135deg, var(--iio-accent) 0%, var(--iio-accent-mid) 100%);
  color: var(--iio-on-accent);
  padding: var(--iio-sp-lg) var(--iio-sp-xl);
  margin-bottom: var(--iio-sp-md);
}

header h1 {
  color: var(--iio-on-accent);
  font-size: 1.5rem;
  margin-bottom: var(--iio-sp-xs);
}

header p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
}

nav {
  background: var(--iio-surface-mid);
  border-bottom: 1px solid var(--iio-line);
  padding: var(--iio-sp-sm) var(--iio-sp-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--iio-sp-sm);
  align-items: center;
}

nav a {
  color: var(--iio-ink);
  padding: var(--iio-sp-xs) var(--iio-sp-sm);
  border-radius: var(--iio-r-sm);
  font-weight: 600;
  font-size: 0.875rem;
}

nav a:hover {
  background: var(--iio-accent-light);
  color: var(--iio-accent);
  text-decoration: none;
}

nav a[aria-current="page"] {
  background: var(--iio-accent-light);
  color: var(--iio-accent);
}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card {
  background: var(--iio-surface);
  border: 1px solid var(--iio-line);
  border-radius: var(--iio-r-lg);
  padding: var(--iio-sp-md);
  margin-bottom: var(--iio-sp-md);
  box-shadow: var(--iio-shadow-sm);
}

.card:hover {
  box-shadow: var(--iio-shadow-md);
}

.card-header {
  border-bottom: 2px solid var(--iio-accent-light);
  padding-bottom: var(--iio-sp-sm);
  margin-bottom: var(--iio-sp-sm);
}

.card h3, .card h2 {
  margin-bottom: 0;
}

.panel {
  background: var(--iio-surface);
  border: 1px solid var(--iio-line);
  border-radius: var(--iio-r-lg);
  padding: var(--iio-sp-md);
  margin-bottom: var(--iio-sp-md);
}

.panel.hidden { display: none; }

/* Hero-Block */
.hero {
  border: 1px solid var(--iio-line);
  border-radius: var(--iio-r-xl);
  background: linear-gradient(160deg, var(--iio-surface-mid), var(--iio-surface));
  padding: var(--iio-sp-md);
  display: grid;
  gap: var(--iio-sp-sm);
  margin-bottom: var(--iio-sp-md);
}

.hero h1 { font-size: 1.5rem; margin-bottom: 0; }
.hero p   { color: var(--iio-muted); margin-bottom: 0; }

.hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iio-sp-sm);
}

.hero-sub {
  font-size: 0.84rem;
  color: var(--iio-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--iio-line);
  padding-top: var(--iio-sp-sm);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  background: var(--iio-surface-soft);
  border: 1px solid var(--iio-line);
  border-radius: var(--iio-r-md);
  padding: var(--iio-sp-md);
  margin-bottom: var(--iio-sp-md);
}

.sidebar h3 { color: var(--iio-accent); margin-bottom: var(--iio-sp-sm); }

.sidebar ul { list-style: none; }

.sidebar li {
  padding: var(--iio-sp-xs) 0;
  border-bottom: 1px solid var(--iio-line-subtle);
}

.sidebar li:last-child { border-bottom: none; }

.sidebar a { display: block; padding: var(--iio-sp-xs); color: var(--iio-ink); }

/* ============================================================
   BADGES / CHIPS / PILLS
   ============================================================ */
.badge, .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--iio-line);
  border-radius: var(--iio-r-pill);
  background: var(--iio-accent-light);
  color: var(--iio-accent);
  padding: 3px 10px;
  font-size: 0.76rem;
  font-weight: 700;
}

.badge-ok, .badge-active, .badge-passed {
  background: var(--iio-ok-bg);
  border-color: var(--iio-ok-line);
  color: var(--iio-ok);
}

.badge-warn, .badge-pending {
  background: var(--iio-warn-bg);
  border-color: var(--iio-warn-line);
  color: var(--iio-warn);
}

.badge-risk, .badge-failed {
  background: var(--iio-risk-bg);
  border-color: var(--iio-risk-line);
  color: var(--iio-risk);
}

.badge-info {
  background: var(--iio-info-bg);
  border-color: var(--iio-info-line);
  color: var(--iio-info);
}

.badge-archived {
  background: var(--iio-surface-mid);
  border-color: var(--iio-line);
  color: var(--iio-muted);
}

/* Filter-Chips (interaktiv) */
.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--iio-line);
  border-radius: var(--iio-r-pill);
  padding: 4px 10px;
  background: var(--iio-surface);
  color: var(--iio-ink);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chip:hover {
  background: var(--iio-accent-light);
  border-color: var(--iio-accent);
  color: var(--iio-accent);
}

.chip.active {
  background: var(--iio-accent);
  border-color: var(--iio-accent);
  color: var(--iio-on-accent);
}

/* Gate-Chips */
.gate-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--iio-r-pill);
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid;
}

.gate-chip.gate-all         { background: var(--iio-gate-all-bg);      border-color: var(--iio-gate-all-line);      color: var(--iio-gate-all-ink); }
.gate-chip.gate-boundary    { background: var(--iio-gate-boundary-bg);  border-color: var(--iio-gate-boundary-line);  color: var(--iio-gate-boundary-ink); }
.gate-chip.gate-transaction { background: var(--iio-gate-txn-bg);      border-color: var(--iio-gate-txn-line);      color: var(--iio-gate-txn-ink); }
.gate-chip.gate-story       { background: var(--iio-gate-story-bg);    border-color: var(--iio-gate-story-line);    color: var(--iio-gate-story-ink); }
.gate-chip.gate-role        { background: var(--iio-gate-role-bg);     border-color: var(--iio-gate-role-line);     color: var(--iio-gate-role-ink); }
.gate-chip.gate-unknown     { background: var(--iio-gate-unknown-bg);  border-color: var(--iio-gate-unknown-line);  color: var(--iio-gate-unknown-ink); }

/* ============================================================
   BUTTONS
   ============================================================ */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--iio-sp-xs);
  padding: var(--iio-sp-xs) var(--iio-sp-sm);
  border: 1px solid var(--iio-line);
  border-radius: var(--iio-r-md);
  background: var(--iio-surface);
  color: var(--iio-ink);
  font-family: var(--iio-font-base);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

button:hover, .btn:hover {
  background: var(--iio-accent-light);
  border-color: var(--iio-accent);
  color: var(--iio-accent);
}

.btn-primary {
  background: var(--iio-accent);
  border-color: var(--iio-accent);
  color: var(--iio-on-accent);
}

.btn-primary:hover {
  background: var(--iio-accent-hover);
  border-color: var(--iio-accent-hover);
  color: var(--iio-on-accent);
}

.btn-secondary {
  background: var(--iio-surface-mid);
  color: var(--iio-muted);
  border-color: var(--iio-line);
}

.btn-secondary:hover {
  background: var(--iio-accent-light);
  color: var(--iio-accent);
}

.qlink,
.fbtn,
.manual-link,
.back-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   TABELLEN
   ============================================================ */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--iio-r-md);
  border: 1px solid var(--iio-line);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead {
  background: var(--iio-thead-bg);
  border-bottom: 2px solid var(--iio-line);
}

th {
  padding: var(--iio-sp-sm) var(--iio-sp-md);
  text-align: left;
  font-weight: 700;
  color: var(--iio-accent);
  white-space: nowrap;
}

td {
  padding: var(--iio-sp-sm) var(--iio-sp-md);
  border-bottom: 1px solid var(--iio-line);
  color: var(--iio-ink-soft);
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

tr:hover { background: var(--iio-tr-hover); }
tr.selected-row, tr.active { background: var(--iio-tr-active); }

/* ============================================================
   FORMULARE
   ============================================================ */
input, textarea, select {
  width: 100%;
  padding: var(--iio-sp-xs) var(--iio-sp-sm);
  border: 1px solid var(--iio-line);
  border-radius: var(--iio-r-md);
  font-family: var(--iio-font-base);
  font-size: 0.875rem;
  color: var(--iio-ink);
  background: var(--iio-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--iio-accent);
  box-shadow: 0 0 0 3px rgba(31, 63, 122, 0.1);
}

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iio-sp-xs);
  margin-bottom: var(--iio-sp-sm);
}

.tab {
  border: 1px solid var(--iio-line);
  border-radius: var(--iio-r-md);
  background: var(--iio-tab-bg);
  color: var(--iio-muted);
  padding: var(--iio-sp-xs) var(--iio-sp-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tab:hover { background: var(--iio-tab-active-bg); color: var(--iio-ink); }

.tab.active {
  background: var(--iio-accent);
  border-color: var(--iio-accent);
  color: var(--iio-on-accent);
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding: var(--iio-sp-sm) var(--iio-sp-md);
  margin-bottom: var(--iio-sp-md);
  border-radius: var(--iio-r-md);
  border-left: 4px solid;
  font-size: 0.875rem;
}

.alert-info    { background: var(--iio-info-bg);  border-color: var(--iio-info);  color: var(--iio-info); }
.alert-success { background: var(--iio-ok-bg);    border-color: var(--iio-ok);    color: var(--iio-ok); }
.alert-warning { background: var(--iio-warn-bg);  border-color: var(--iio-warn);  color: var(--iio-warn); }
.alert-danger  { background: var(--iio-risk-bg);  border-color: var(--iio-risk);  color: var(--iio-risk); }

/* ============================================================
   DETAILS / SUMMARY
   ============================================================ */
details {
  border: 1px solid var(--iio-line);
  border-radius: var(--iio-r-md);
  background: var(--iio-surface);
  margin-bottom: var(--iio-sp-sm);
  overflow: hidden;
}

summary {
  list-style: none;
  cursor: pointer;
  padding: var(--iio-sp-sm) var(--iio-sp-md);
  font-weight: 700;
  color: var(--iio-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iio-sp-sm);
  user-select: none;
}

summary::-webkit-details-marker { display: none; }
summary:hover { background: var(--iio-accent-light); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--iio-surface-mid);
  border-top: 1px solid var(--iio-line);
  padding: var(--iio-sp-md) var(--iio-sp-xl);
  text-align: center;
  color: var(--iio-muted);
  font-size: 0.8125rem;
  margin-top: var(--iio-sp-2xl);
}

/* ============================================================
   UTILITY KLASSEN
   ============================================================ */
.muted       { color: var(--iio-muted); }
.accent      { color: var(--iio-accent); }
.ok          { color: var(--iio-ok); }
.warn        { color: var(--iio-warn); }
.risk        { color: var(--iio-risk); }
.mono        { font-family: var(--iio-font-mono); }
.text-sm     { font-size: 0.8125rem; }
.text-xs     { font-size: 0.75rem; }
.right       { text-align: right; }
.fade-in     { animation: iio-fadein 0.2s ease; }

@keyframes iio-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SHELL-OVERRIDES (wenn _shell.js aktiv)
   Höhere Spezifität via body[data-iio-manual-shell]
   ============================================================ */
body[data-iio-manual-shell="1"] {
  background-color: var(--iio-bg);
  color: var(--iio-ink);
}

body[data-iio-manual-shell="1"] main,
body[data-iio-manual-shell="1"] .wrap {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding-left: clamp(12px, 1.8vw, 20px);
  padding-right: clamp(12px, 1.8vw, 20px);
}

/* Seiten-eigene Navs ausblenden wenn Shell aktiv */
body[data-iio-manual-shell="1"] .nav:not([data-shell-nav]),
body[data-iio-manual-shell="1"] .topnav,
body[data-iio-manual-shell="1"] .page-nav {
  display: none !important;
}

/* Seiten-eigene fixed/sticky Header ausblenden wenn Shell aktiv */
body[data-iio-manual-shell="1"] header:not([data-shell-header]) {
  display: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  main, .wrap {
    padding: var(--iio-sp-sm);
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }

  .hero { padding: var(--iio-sp-sm); }
  .hero h1 { font-size: 1.25rem; }

  .tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .tab  { text-align: center; }

  nav { padding: var(--iio-sp-sm); flex-wrap: wrap; }
}

@media (max-width: 600px) {
  th, td { padding: var(--iio-sp-xs) var(--iio-sp-sm); }
  .chip  { font-size: 0.72rem; padding: 3px 8px; }
  .badge, .pill { font-size: 0.72rem; padding: 2px 8px; }
}