/* ============================================================
   QuantumSaaS Design Tokens v2 — 4-Ebenen-System (A/B/C/D)
   ============================================================ */

:root {
  /* === EBENEN-FARBEN === */
  --level-a: #6366f1;   /* Indigo — Plattform Admin */
  --level-b: #3b82f6;   /* Blau — Mandant Supervisor */
  --level-c: #10b981;   /* Grün — Agent Desktop */
  --level-d: #f59e0b;   /* Amber — Self-Service Portal */

  /* === SURFACE (Dark Mode) === */
  --surface-root: #0b0f1a;
  --surface-elevated: #0f1323;
  --surface-card: #131829;
  --surface-hover: #1a1f35;
  --surface-border: rgba(255,255,255,0.06);
  --surface-border-active: rgba(99,102,241,0.3);

  /* === SURFACE (Light Mode — Ebene D) === */
  --surface-light-root: #f8fafc;
  --surface-light-card: #ffffff;
  --surface-light-border: #e5e7eb;

  /* === TYPOGRAPHY === */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --text-xxs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* === SPACING === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;

  /* === RADIUS === */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.2);
  --shadow-glow: 0 0 40px rgba(59,130,246,0.12);

  /* === TRANSITIONS === */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.16,1,0.3,1);
}

/* === GLASS CARDS (Dark Mode) === */
.glass {
  background: rgba(19, 24, 41, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
}
.glass-hover {
  transition: all var(--transition-normal);
}
.glass-hover:hover {
  border-color: rgba(59,130,246,0.3);
  box-shadow: 0 4px 30px rgba(59,130,246,0.08);
  transform: translateY(-2px);
}

/* === GLASS CARDS (Light Mode) === */
.light .glass {
  background: white;
  border-color: var(--surface-light-border);
  color: #1f2937;
}
.light .glass-hover:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 20px rgba(245,158,11,0.1);
}

/* === KPI TILE === */
.kpi-tile { padding: var(--space-lg); }
.kpi-label { font-size: var(--text-xs); color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { font-size: var(--text-2xl); font-weight: 700; color: #fff; font-family: var(--font-mono); }
.kpi-trend-up { font-size: var(--text-xxs); color: #34d399; }
.kpi-trend-down { font-size: var(--text-xxs); color: #f87171; }

/* === STATUS BADGES === */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: var(--text-xxs); font-weight: 600; letter-spacing: 0.02em;
}
.badge-success { background: rgba(16,185,129,0.15); color: #34d399; }
.badge-warning { background: rgba(245,158,11,0.15); color: #fbbf24; }
.badge-danger { background: rgba(239,68,68,0.15); color: #f87171; }
.badge-info { background: rgba(59,130,246,0.15); color: #60a5fa; }

/* === DATA TABLE === */
.data-table { width: 100%; font-size: var(--text-xs); border-collapse: collapse; }
.data-table th { text-align: left; padding: var(--space-md) var(--space-lg); color: #6b7280; font-size: var(--text-xxs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.06); }
.data-table td { padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.03); color: #d1d5db; }
.data-table tr:hover td { background: rgba(255,255,255,0.02); }
.data-table .mono { font-family: var(--font-mono); }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-md);
  font-size: var(--text-xs); font-weight: 600;
  transition: all var(--transition-fast); cursor: pointer;
  border: none; outline: none;
}
.btn-primary { background: var(--level-a); color: #fff; }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { background: var(--surface-card); color: #9ca3af; border: 1px solid var(--surface-border); }
.btn-secondary:hover { border-color: rgba(255,255,255,0.15); color: #d1d5db; }
.btn-ghost { background: transparent; color: #6b7280; }
.btn-ghost:hover { color: #d1d5db; background: rgba(255,255,255,0.04); }

/* === INPUTS === */
.input {
  width: 100%; padding: 8px 12px;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); color: #d1d5db; font-family: var(--font-sans);
  transition: border-color var(--transition-fast);
  outline: none;
}
.input:focus { border-color: rgba(59,130,246,0.4); }
.input::placeholder { color: #4b5563; }

/* === SIDEBAR === */
.sidebar { width: 56px; background: var(--surface-elevated); border-right: 1px solid var(--surface-border); display: flex; flex-direction: column; align-items: center; padding: var(--space-md) 0; gap: var(--space-xs); }
.sidebar-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: #6b7280; cursor: pointer; transition: all var(--transition-fast); font-size: var(--text-sm); }
.sidebar-icon:hover, .sidebar-icon.active { background: rgba(59,130,246,0.12); color: #60a5fa; }

/* === TOPBAR === */
.topbar { height: 56px; background: rgba(11, 15, 26, 0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--surface-border); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-xl); position: sticky; top: 0; z-index: 50; }

/* === TABS === */
.tabs { display: flex; gap: var(--space-xs); }
.tab-item { padding: 6px 14px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; color: #6b7280; cursor: pointer; transition: all var(--transition-fast); }
.tab-item:hover { color: #d1d5db; }
.tab-item.active { background: rgba(59,130,246,0.1); color: #60a5fa; }

/* === AI PANEL === */
.ai-panel { width: 288px; background: var(--surface-elevated); border-left: 1px solid var(--surface-border); padding: var(--space-lg); overflow-y: auto; }

/* === LAYOUT === */
.layout { display: flex; min-height: calc(100vh - 56px); }
.main-content { flex: 1; padding: var(--space-xl); overflow-y: auto; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.05); border-radius: 3px; }