/* ═══════════════════════════════════════════════════════════════════════════
   IIO GENESIS — Foundation. Axiome. Ordnung aus Tiefe.
   
   "Wirklichkeit ist nur als beobachtbarer Output anschlussfähig." (A1)
   
   Das Universe als Zustandsmaschine. Jedes Element trägt Bedeutung.
   Keine Ornamente — nur strukturelle Schönheit.
   
   Farb-DNA:
   - Tiefes Navy    #0a1628  — Fundament, Urgrund
   - Genesis-Blau   #1e3a6e  — primäre Struktur
   - Axiom-Cyan     #4a90c4  — Akzent, Klarheit
   - Licht-Creme    #eef4fc  — Output, Erkenntnis
   - Wahrheits-Grün #2d8a5f  — Bestätigung, OK
   
   Dark (Standard) · Accent: #4a90c4
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('../../../b2b/solution-provider/assets/style.css');

:root {
  /* Genesis-Palette */
  --gen-navy:      #0a1628;
  --gen-deep:      #060e1c;
  --gen-struct:    #1e3a6e;
  --gen-cyan:      #4a90c4;
  --gen-cyan-glow: rgba(74,144,196,0.35);
  --gen-light:     #eef4fc;
  --gen-truth:     #2d8a5f;
  --gen-warn:      #b8860b;
  --gen-risk:      #8b2020;

  /* IIO Semantik-Tokens */
  --iio-bg:          #0a1628;
  --iio-surface:     #0f1e38;
  --iio-ink:         #c8dcf0;
  --iio-muted:       #6888a8;
  --iio-line:        #1e3454;
  --iio-accent:      #4a90c4;
  --iio-accent-mid:  #6aaada;
  --iio-accent-light:#0a1e38;
  --iio-ok:          #2d8a5f;
  --iio-warn:        #b8860b;
  --iio-risk:        #8b2020;
  --iio-thead-bg:    #0d1a30;
  --iio-tab-bg:      #0a1528;
  --iio-shadow-md:   0 6px 20px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
  --iio-r-md:        8px;
  --iio-r-lg:        12px;

  /* Portal Bridge */
  --accent:          var(--iio-accent);
  --accent-fg:       #ffffff;
  --tenant-accent:   var(--iio-accent);
  --bg:              var(--iio-bg);
  --surface:         var(--iio-surface);
  --surface-2:       #0d1a30;
  --text:            #c8dcf0;
  --text-1:          #c8dcf0;
  --text-2:          #6888a8;
  --text-3:          #3a5878;
  --border:          #1e3454;
  --border-hover:    #2a4870;
  --green:           #2d8a5f;
  --amber:           #b8860b;
  --red:             #8b2020;

  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* ── Background — kosmisches Fundament ──────────────────────────────────── */
html, body {
  background-color: var(--gen-deep);
  background-image:
    /* Sternfeld-Andeutung */
    radial-gradient(circle at 20% 15%,  rgba(74,144,196,0.08) 0%, transparent 35%),
    radial-gradient(circle at 80% 85%,  rgba(74,144,196,0.06) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%,  rgba(30,58,110,0.15)  0%, transparent 60%),
    /* Tiefes Blau-Schwarz */
    linear-gradient(160deg, #060e1c 0%, #0a1628 50%, #060c18 100%);
  color: var(--iio-ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Subtiles Grid-Overlay — wie Koordinatensystem */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(74,144,196,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,144,196,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.6;
  z-index: 0;
}

/* ── Header — Axiom-Linie ────────────────────────────────────────────────── */
#app-header,
header {
  background: linear-gradient(180deg,
    rgba(15, 30, 56, 0.98) 0%,
    rgba(10, 22, 40, 0.99) 100%);
  border-bottom: 1px solid rgba(74,144,196,0.2);
  position: relative;
  overflow: visible;
  backdrop-filter: blur(4px);
  z-index: 1;
}

/* Axiom-Linie: klar, präzise, unveränderlich */
#app-header::before,
header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent          0%,
    rgba(74,144,196,0.3) 10%,
    rgba(74,144,196,0.8) 30%,
    rgba(106,170,218,1.0)50%,
    rgba(74,144,196,0.8) 70%,
    rgba(74,144,196,0.3) 90%,
    transparent          100%
  );
  box-shadow:
    0 0 8px  rgba(74,144,196,0.5),
    0 0 20px rgba(74,144,196,0.25);
  z-index: 10;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar {
  background: linear-gradient(180deg,
    rgba(15,30,56,0.98) 0%,
    rgba(10,22,40,0.99) 100%);
  border-right: 1px solid rgba(30,52,84,0.8);
  z-index: 1;
}

.nav-item {
  color: #6888a8;
  border-radius: 6px;
  font-family: var(--font-family-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  transition: background 80ms, color 80ms;
}

.nav-item:hover {
  background: rgba(74,144,196,0.10);
  color: var(--gen-cyan);
}

.nav-item.active {
  background: rgba(74,144,196,0.14);
  color: var(--gen-cyan);
  border-left: 2px solid var(--gen-cyan);
  font-weight: 600;
}

.nav-section-label {
  color: #3a5878;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-family-mono);
}

/* Axiom-Reminder — für Eingeweihte */
#sidebar::after {
  content: 'F = C(R)';
  display: block;
  text-align: center;
  font-size: 9px;
  color: rgba(74,144,196,0.2);
  padding: 8px 0 4px;
  letter-spacing: 0.15em;
  font-family: var(--font-family-mono);
  pointer-events: none;
}

/* ── Cards / Panels ──────────────────────────────────────────────────────── */
.iio-card, .card, .pnl {
  background: rgba(15,30,56,0.92);
  border: 1px solid rgba(30,52,84,0.9);
  border-radius: var(--iio-r-md);
  box-shadow: var(--iio-shadow-md);
  position: relative;
  z-index: 1;
}

.iio-card:hover, .card:hover {
  border-color: rgba(74,144,196,0.3);
  box-shadow: var(--iio-shadow-md), 0 0 0 1px rgba(74,144,196,0.08);
}

/* Tenant-Cards */
.tenant-card {
  background: rgba(15,30,56,0.92);
  border: 1px solid rgba(30,52,84,0.8);
  border-radius: var(--iio-r-md);
}

.tenant-card:hover {
  border-color: rgba(74,144,196,0.35);
  box-shadow: var(--iio-shadow-md), 0 0 20px rgba(74,144,196,0.06);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.iio-btn-primary {
  background: var(--gen-struct) !important;
  color: var(--gen-light) !important;
  border: 1px solid rgba(74,144,196,0.4) !important;
  font-weight: 600;
  font-family: var(--font-family-mono);
  letter-spacing: 0.04em;
  box-shadow: 0 0 12px rgba(74,144,196,0.15);
}

.iio-btn-primary:hover {
  background: #253f78 !important;
  border-color: rgba(74,144,196,0.6) !important;
  box-shadow: 0 0 20px rgba(74,144,196,0.25) !important;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.iio-input, input, select, textarea {
  background: rgba(10,22,40,0.9) !important;
  border-color: rgba(30,52,84,0.9) !important;
  color: var(--iio-ink) !important;
  border-radius: 6px;
  font-family: var(--font-family-mono);
}

.iio-input:focus, input:focus, select:focus {
  border-color: var(--gen-cyan) !important;
  box-shadow: 0 0 0 3px rgba(74,144,196,0.15) !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.people-table thead th, thead th {
  background: rgba(13,26,48,0.9);
  color: #6888a8;
  border-bottom: 1px solid rgba(30,52,84,0.9);
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.people-tr:hover td, tbody tr:hover td {
  background: rgba(74,144,196,0.05);
}

/* ── Badges / Status ─────────────────────────────────────────────────────── */
.people-status-active  { color: var(--gen-truth); font-weight: 600; }
.people-status-invited { color: var(--gen-cyan);  font-weight: 600; }
.people-role-operator  { color: var(--gen-cyan);  font-weight: 700; font-family: var(--font-family-mono); }

.people-group-badge {
  background: rgba(30,52,84,0.8);
  color: #6888a8;
  border: 1px solid rgba(42,72,112,0.6);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--font-family-mono);
}

.people-avatar {
  background: var(--gen-struct) !important;
  color: var(--gen-light) !important;
  font-weight: 700;
  border: 1px solid rgba(74,144,196,0.3);
}

/* ── Code ────────────────────────────────────────────────────────────────── */
code, kbd, pre {
  background: rgba(10,22,40,0.8);
  color: var(--gen-cyan);
  border: 1px solid rgba(30,52,84,0.8);
  border-radius: 4px;
  font-family: var(--font-family-mono);
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a       { color: var(--gen-cyan); }
a:hover { color: #80b8e0; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: rgba(10,22,40,0.5); }
::-webkit-scrollbar-thumb { background: rgba(30,52,84,0.9); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(74,144,196,0.3); }

/* ── Selection ───────────────────────────────────────────────────────────── */
::selection { background: rgba(74,144,196,0.22); color: var(--gen-light); }

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #app-header::before,
  header::before { animation: none; }
}