/* ═══════════════════════════════════════════════════════════════════════════
   XOX Future Mode – L-A-R-A Zukunftsentwicklung
   Aktivierung: X → O → X (Tastatur, kein Eingabefeld aktiv)
   Vollständig eigenständiges Layer – keine Kopplung zum normalen Theme-System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Palette & Theme-Override-Variablen ──────────────────────────────────── */
html.future-mode {
  --fm-void:       #01050F;
  --fm-deep:       #030B18;
  --fm-surface:    #060F20;
  --fm-raised:     #0A1830;
  --fm-line:       #122040;
  --fm-cyan:       #8ECFFF;
  --fm-cyan-dim:   rgba(142,207,255,0.14);
  --fm-cyan-glow:  0 0 22px rgba(142,207,255,0.45);
  --fm-fg1:        #EAF4FF;
  --fm-fg2:        #B0CCEF;
  --fm-fg3:        #6A8AAF;
  --fm-fg4:        #3A5070;
  --fm-border:     rgba(142,207,255,0.10);
  --fm-border-hot: rgba(142,207,255,0.32);

  --bg:                  #01050F;
  --bg-card:             rgba(3,11,24,0.92);
  --bg-sidebar:          rgba(3,11,24,0.97);
  --bg-input:            #060F20;
  --text:                #EAF4FF;
  --text-muted:          #B0CCEF;
  --text-dim:            #6A8AAF;
  --accent:              #8ECFFF;
  --accent-rgb:          142, 207, 255;
  --border:              rgba(142,207,255,0.12);
  --border-hover:        rgba(142,207,255,0.35);
  --border-hover-subtle: rgba(142,207,255,0.22);
  --border-input:        rgba(142,207,255,0.18);
  --border-strong:       rgba(142,207,255,0.28);
  --shadow:              0 4px 24px rgba(142,207,255,0.08);
  --nav-hover:           rgba(142,207,255,0.06);
  --bg-nav-hover:        rgba(142,207,255,0.06);
  --bg-progress:         rgba(142,207,255,0.10);
  --bg-role-badge:       rgba(142,207,255,0.06);
  --border-role:         rgba(142,207,255,0.14);
  --bg-table-sep:        #060F20;
  --bg-option:           #060F20;
  --bg-btn-danger:       rgba(220,38,38,0.12);
  --border-btn-danger:   rgba(220,38,38,0.35);
  --color-btn-danger:    #fca5a5;
  --primary:             #8ECFFF;
}

/* ── Canvas Netzwerk-Hintergrund ─────────────────────────────────────────── */
#fm-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
html.future-mode #fm-canvas {
  opacity: 1;
}

/* ── Basis-Layout ────────────────────────────────────────────────────────── */
html.future-mode body {
  background: #01050F !important;
  color: #EAF4FF !important;
}

html.future-mode .main {
  background: transparent !important;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
html.future-mode .topbar {
  background: rgba(1,5,15,0.92) !important;
  border-bottom: 1px solid rgba(142,207,255,0.14) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* L-A-R-A Titel leuchtet in Cyan */
html.future-mode .topbar [style*="Syncopate"],
html.future-mode .topbar [style*="FF2200"] {
  color: #8ECFFF !important;
  text-shadow: 0 0 18px rgba(142,207,255,0.50) !important;
}

html.future-mode .topbar small {
  color: rgba(142,207,255,0.45) !important;
}

html.future-mode .topbar-user span {
  color: #B0CCEF !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
html.future-mode .sidebar {
  background: rgba(3,11,24,0.97) !important;
  border-right: 1px solid rgba(142,207,255,0.10) !important;
}

html.future-mode .nav-link {
  color: #6A8AAF !important;
  transition: color 0.18s, background 0.18s, border-color 0.18s !important;
}

html.future-mode .nav-link:hover {
  color: #8ECFFF !important;
  background: rgba(142,207,255,0.06) !important;
}

html.future-mode .nav-link.active {
  color: #8ECFFF !important;
  background: rgba(142,207,255,0.08) !important;
  border-left-color: #8ECFFF !important;
}

html.future-mode .nav-label {
  color: #3A5070 !important;
}

html.future-mode .nav-divider {
  background: rgba(142,207,255,0.08) !important;
  border-color: rgba(142,207,255,0.08) !important;
}

/* ── Cards & Panels ──────────────────────────────────────────────────────── */
html.future-mode .card,
html.future-mode .detail-meta,
html.future-mode .radar-item {
  background: rgba(3,11,24,0.92) !important;
  border-color: rgba(142,207,255,0.10) !important;
  backdrop-filter: blur(4px) !important;
  transition: border-color 0.22s, box-shadow 0.22s !important;
  position: relative !important;
}

html.future-mode .card:hover,
html.future-mode .card-clickable:hover,
html.future-mode .radar-item:hover {
  border-color: rgba(142,207,255,0.28) !important;
  box-shadow: 0 0 20px rgba(142,207,255,0.07), inset 0 1px 0 rgba(142,207,255,0.06) !important;
}

/* Hologramm-Glanzstreifen oben an jeder Card */
html.future-mode .card::after {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142,207,255,0.30), transparent);
  pointer-events: none;
  border-radius: 0;
}

/* ── KPI Kacheln ─────────────────────────────────────────────────────────── */
html.future-mode .kpi-card {
  background: rgba(3,11,24,0.92) !important;
  border-color: rgba(142,207,255,0.10) !important;
}

html.future-mode .kpi-value {
  color: #8ECFFF !important;
  text-shadow: 0 0 14px rgba(142,207,255,0.32);
}

html.future-mode .kpi-label {
  color: #3A5070 !important;
}

html.future-mode .kpi-sub {
  color: #6A8AAF !important;
}

/* Alle KPI-Farbstreifen → Cyan-Gradient */
html.future-mode .kpi-red::before,
html.future-mode .kpi-green::before,
html.future-mode .kpi-blue::before,
html.future-mode .kpi-yellow::before,
html.future-mode .kpi-purple::before,
html.future-mode .kpi-teal::before,
html.future-mode .kpi-accent::before {
  background: linear-gradient(90deg, rgba(90,170,240,0.7), rgba(142,207,255,0.9), rgba(90,170,240,0.7)) !important;
}

/* ── Fortschrittsbalken ──────────────────────────────────────────────────── */
html.future-mode .progress-bar {
  background: rgba(142,207,255,0.10) !important;
}

html.future-mode .progress-fill,
html.future-mode .progress-fill.green,
html.future-mode .progress-fill.blue,
html.future-mode .progress-fill.yellow {
  background: linear-gradient(90deg, rgba(90,170,240,0.9), rgba(142,207,255,1.0)) !important;
  box-shadow: 0 0 8px rgba(142,207,255,0.40) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
html.future-mode .btn-primary {
  background: rgba(142,207,255,0.10) !important;
  border: 1px solid rgba(142,207,255,0.32) !important;
  color: #8ECFFF !important;
  box-shadow: 0 0 10px rgba(142,207,255,0.10) !important;
}

html.future-mode .btn-primary:hover {
  background: rgba(142,207,255,0.18) !important;
  box-shadow: 0 0 18px rgba(142,207,255,0.22) !important;
  color: #EAF4FF !important;
  text-decoration: none !important;
}

html.future-mode .btn-secondary {
  background: transparent !important;
  border-color: rgba(142,207,255,0.20) !important;
  color: #6A8AAF !important;
}

html.future-mode .btn-secondary:hover {
  border-color: rgba(142,207,255,0.40) !important;
  color: #8ECFFF !important;
  background: rgba(142,207,255,0.06) !important;
  text-decoration: none !important;
}

html.future-mode .btn-ghost {
  color: #6A8AAF !important;
}
html.future-mode .btn-ghost:hover {
  color: #8ECFFF !important;
  text-decoration: none !important;
}

html.future-mode .btn-anleitung {
  border-color: rgba(142,207,255,0.16) !important;
  color: #6A8AAF !important;
}
html.future-mode .btn-anleitung:hover {
  border-color: rgba(142,207,255,0.35) !important;
  color: #8ECFFF !important;
  text-decoration: none !important;
}

html.future-mode .topbar-btn {
  border-color: rgba(142,207,255,0.18) !important;
  color: #6A8AAF !important;
}
html.future-mode .topbar-btn:hover {
  border-color: rgba(142,207,255,0.40) !important;
  color: #8ECFFF !important;
}

/* Inline-style Buttons im Topbar (Intro-Link) */
html.future-mode a[style*="border:1px solid"] {
  border-color: rgba(142,207,255,0.18) !important;
  color: #6A8AAF !important;
}
html.future-mode a[style*="border:1px solid"]:hover {
  border-color: rgba(142,207,255,0.40) !important;
  color: #8ECFFF !important;
}

/* ── Tabellen ────────────────────────────────────────────────────────────── */
html.future-mode .data-table th {
  background: rgba(6,15,32,0.9) !important;
  color: #8ECFFF !important;
  border-bottom-color: rgba(142,207,255,0.14) !important;
  letter-spacing: 0.06em !important;
}

html.future-mode .data-table td {
  border-bottom-color: rgba(142,207,255,0.06) !important;
  color: #B0CCEF !important;
}

html.future-mode .data-table td.title {
  color: #EAF4FF !important;
}

html.future-mode .data-table tr:hover td {
  background: rgba(142,207,255,0.04) !important;
}

/* ── Formulare ───────────────────────────────────────────────────────────── */
html.future-mode .form-ctrl {
  background: rgba(6,15,32,0.85) !important;
  border-color: rgba(142,207,255,0.18) !important;
  color: #EAF4FF !important;
}

html.future-mode .form-ctrl:focus {
  border-color: rgba(142,207,255,0.45) !important;
  box-shadow: 0 0 0 2px rgba(142,207,255,0.08) !important;
  outline: none !important;
}

html.future-mode .form-label {
  color: #6A8AAF !important;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
html.future-mode .badge-idee         { background: rgba(142,207,255,0.08) !important; color: #8ECFFF !important; border-color: rgba(142,207,255,0.22) !important; }
html.future-mode .badge-konzept      { background: rgba(90,170,240,0.07)  !important; color: #B0CCEF !important; border-color: rgba(90,170,240,0.20)  !important; }
html.future-mode .badge-planung      { background: rgba(90,170,240,0.10)  !important; color: #8ECFFF !important; border-color: rgba(90,170,240,0.25)  !important; }
html.future-mode .badge-umsetzung    { background: rgba(142,207,255,0.12) !important; color: #EAF4FF !important; border-color: rgba(142,207,255,0.30) !important; }
html.future-mode .badge-abgeschlossen{ background: rgba(58,80,112,0.28)   !important; color: #6A8AAF !important; border-color: rgba(58,80,112,0.45)   !important; }
html.future-mode .badge-pausiert     { background: rgba(58,80,112,0.18)   !important; color: #6A8AAF !important; border-color: rgba(58,80,112,0.35)   !important; }
html.future-mode .badge-hoch         { background: rgba(239,68,68,0.12)   !important; color: #fca5a5 !important; border-color: rgba(239,68,68,0.28)   !important; }
html.future-mode .badge-mittel       { background: rgba(234,179,8,0.10)   !important; color: #fde68a !important; border-color: rgba(234,179,8,0.24)   !important; }
html.future-mode .badge-niedrig      { background: rgba(142,207,255,0.06) !important; color: #8ECFFF !important; border-color: rgba(142,207,255,0.16) !important; }
html.future-mode .badge-beobachten   { background: rgba(58,80,112,0.18)   !important; color: #6A8AAF !important; border-color: rgba(58,80,112,0.35)   !important; }
html.future-mode .badge-testen       { background: rgba(90,170,240,0.08)  !important; color: #B0CCEF !important; border-color: rgba(90,170,240,0.20)  !important; }
html.future-mode .badge-einsetzen    { background: rgba(142,207,255,0.10) !important; color: #8ECFFF !important; border-color: rgba(142,207,255,0.25) !important; }
html.future-mode .badge-verwerfen    { background: rgba(220,38,38,0.12)   !important; color: #fca5a5 !important; border-color: rgba(220,38,38,0.28)   !important; }

html.future-mode .badge-digitalisierung { background: rgba(90,170,240,0.10) !important; color: #8ECFFF !important; border-color: rgba(90,170,240,0.25) !important; }
html.future-mode .badge-prozess         { background: rgba(234,179,8,0.08)  !important; color: #fde68a !important; border-color: rgba(234,179,8,0.22)  !important; }
html.future-mode .badge-produkt         { background: rgba(142,207,255,0.08) !important; color: #8ECFFF !important; border-color: rgba(142,207,255,0.20) !important; }
html.future-mode .badge-infrastruktur   { background: rgba(90,170,240,0.07) !important; color: #B0CCEF !important; border-color: rgba(90,170,240,0.18) !important; }
html.future-mode .badge-personal        { background: rgba(58,80,112,0.20)  !important; color: #6A8AAF !important; border-color: rgba(58,80,112,0.38)  !important; }
html.future-mode .badge-sonstige        { background: rgba(58,80,112,0.14)  !important; color: #6A8AAF !important; border-color: rgba(58,80,112,0.28)  !important; }

/* ── Page Header ─────────────────────────────────────────────────────────── */
html.future-mode .page-header {
  border-bottom-color: rgba(142,207,255,0.12) !important;
}

html.future-mode .page-header-left h1 {
  color: #EAF4FF !important;
}

html.future-mode .page-header-left .subtitle {
  color: #6A8AAF !important;
}

/* ── Überschriften ───────────────────────────────────────────────────────── */
html.future-mode h1, html.future-mode h2,
html.future-mode h3, html.future-mode h4 {
  color: #EAF4FF !important;
}

html.future-mode .card-title { color: #EAF4FF !important; }
html.future-mode .card-body  { color: #B0CCEF !important; }

/* ── Empty State ─────────────────────────────────────────────────────────── */
html.future-mode .empty-state {
  position: relative;
  padding: 80px 20px !important;
}

html.future-mode .empty-state::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(142,207,255,0.07) 0%, rgba(142,207,255,0.02) 50%, transparent 70%);
  pointer-events: none;
}

html.future-mode .empty-icon {
  filter: drop-shadow(0 0 8px rgba(142,207,255,0.4)) !important;
}

html.future-mode .empty-title {
  color: #B0CCEF !important;
}

html.future-mode .empty-desc {
  color: #6A8AAF !important;
}

/* ── Meta-Rows ───────────────────────────────────────────────────────────── */
html.future-mode .meta-row {
  border-bottom-color: rgba(142,207,255,0.08) !important;
}

html.future-mode .meta-key { color: #3A5070 !important; }
html.future-mode .meta-val { color: #B0CCEF !important; }

/* ── Role Badge ──────────────────────────────────────────────────────────── */
html.future-mode .role-badge {
  background: rgba(142,207,255,0.06) !important;
  border-color: rgba(142,207,255,0.14) !important;
  color: #6A8AAF !important;
}

/* ── Radar-Gruppe ────────────────────────────────────────────────────────── */
html.future-mode .radar-group-title {
  color: #3A5070 !important;
  border-bottom-color: rgba(142,207,255,0.08) !important;
}

html.future-mode .radar-name { color: #EAF4FF !important; }
html.future-mode .radar-desc { color: #6A8AAF !important; }

/* ── HR / Divider ────────────────────────────────────────────────────────── */
html.future-mode hr,
html.future-mode .divider,
html.future-mode .nav-divider {
  background: rgba(142,207,255,0.08) !important;
  border-color: rgba(142,207,255,0.08) !important;
}

/* ── Flash Messages ──────────────────────────────────────────────────────── */
html.future-mode .flash-info {
  background: rgba(142,207,255,0.07) !important;
  border-color: rgba(142,207,255,0.22) !important;
  color: #8ECFFF !important;
}

/* ── Hamburger ───────────────────────────────────────────────────────────── */
html.future-mode .hamburger span {
  background: #6A8AAF !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
html.future-mode ::-webkit-scrollbar { width: 5px; }
html.future-mode ::-webkit-scrollbar-track { background: #030B18; }
html.future-mode ::-webkit-scrollbar-thumb { background: rgba(142,207,255,0.18); border-radius: 3px; }
html.future-mode ::-webkit-scrollbar-thumb:hover { background: rgba(142,207,255,0.32); }

/* ── Scan-Linie (Aktivierungseffekt) ─────────────────────────────────────── */
#fm-scanline {
  position: fixed;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(90,170,240,0.6) 10%,
    rgba(142,207,255,0.9) 35%,
    rgba(215,238,255,1.0) 50%,
    rgba(142,207,255,0.9) 65%,
    rgba(90,170,240,0.6) 90%,
    transparent 100%
  );
  box-shadow: 0 0 18px rgba(142,207,255,0.55), 0 0 4px rgba(215,238,255,0.85);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  top: 0;
}

#fm-scanline.active {
  opacity: 1;
  animation: fm-scan 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fm-scan {
  0%   { top: 0;    opacity: 1; }
  80%  { opacity: 0.8; }
  100% { top: 100vh; opacity: 0; }
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
#fm-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  background: rgba(6,15,32,0.97);
  border: 1px solid rgba(142,207,255,0.28);
  color: #8ECFFF;
  padding: 10px 20px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s;
  pointer-events: none;
  box-shadow: 0 0 22px rgba(142,207,255,0.14);
}

#fm-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Reduced Motion: Animationen deaktivieren ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #fm-scanline { display: none !important; }
  #fm-canvas   { display: none !important; }
  html.future-mode * { transition: none !important; animation: none !important; }
}


/* ── Wall Link Cards (Verbundene Systeme) ────────────────────────────────── */
html.future-mode .wall-link-card {
  background: rgba(3,11,24,0.85) !important;
  border-color: rgba(142,207,255,0.12) !important;
  color: var(--text) !important;
}
html.future-mode .wall-link-card:hover {
  border-color: rgba(142,207,255,0.38) !important;
  box-shadow: 0 0 18px rgba(142,207,255,0.07) !important;
}
html.future-mode .wall-link-card div {
  color: var(--text) !important;
}