/* TransPlan — Hoofd CSS */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Light theme */
  --bg: #f0f2f5;
  --sb: #fff;
  --sb-b: #e5e7eb;
  --panel: #fff;
  --ph: #f9fafb;
  --card: #fff;
  --ch: #f3f4f6;
  --border: #e5e7eb;
  --bhi: #d1d5db;
  --tx: #111827;
  --tx2: #374151;
  --mu: #6b7280;
  --mu2: #9ca3af;
  --ac: #3b5bdb;
  --alo: rgba(59, 91, 219, 0.1);
  --atx: #3b5bdb;
  --gr: #16a34a;
  --glo: rgba(22, 163, 74, 0.1);
  --or: #d97706;
  --olo: rgba(217, 119, 6, 0.1);
  --re: #dc2626;
  --rlo: rgba(220, 38, 38, 0.1);
  --sh: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shm: 0 4px 12px rgba(0, 0, 0, 0.12);
  --r: 8px;
  --sans: 'Inter', sans-serif;
}

[data-theme=dark] {
  --bg: #0f1117;
  --sb: #13151a;
  --sb-b: #1f2330;
  --panel: #1e2128;
  --ph: #252930;
  --card: #252930;
  --ch: #2d3139;
  --border: #2d3139;
  --bhi: #3a4060;
  --tx: #e8eaf0;
  --tx2: #c9cdd6;
  --mu: #6b7280;
  --mu2: #9ca3af;
  --ac: #4f7bff;
  --alo: rgba(79, 123, 255, 0.12);
  --atx: #7b9fff;
  --gr: #22c55e;
  --glo: rgba(34, 197, 94, 0.12);
  --or: #f59e0b;
  --olo: rgba(245, 158, 11, 0.12);
  --re: #ef4444;
  --rlo: rgba(239, 68, 68, 0.12);
  --sh: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shm: 0 4px 12px rgba(0, 0, 0, 0.4);
}

html, body {
  height: 100%;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--tx);
  overflow: hidden;
  font-size: 13px;
  transition: background 0.2s, color 0.2s;
}

.app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* Animations */
@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes pulse-stop {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  60% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}

@keyframes lpulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}