/* ===== Reset & Box model ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== CSS Variables — Theme ===== */
:root {
    --bg: #0f1117;
    --bg-card: #1a1d27;
    --bg-header: #141720;
    --bg-card-hover: #22253a;
    --bg-surface: #1e2130;
    --border: #2a2d3a;
    --text: #e4e6ed;
    --text-muted: #8b8fa3;
    --text-heading: #f0f1f4;
    --highlight: #3498db;
    --success: #2ecc71;
    --danger: #e74c3c;
    --warning: #f39c12;
    --info: #3498db;
    --scrollbar: #2a2d3a;
    --input-bg: #1a1d27;
    --input-border: #2a2d3a;
    --input-focus: #3498db;

    /* Discipline kleuren */
    --brandweer: #e74c3c;
    --ambulance: #f39c12;
    --politie: #3498db;
    --lifeliner: #9b59b6;
    --knrm: #1abc9c;
    --reddingsbrigade: #e67e22;
    --meldkamer: #27ae60;
    --veiligheidsregio: #27ae60;
    --grip: #e74c3c;

    /* Prioriteit kleuren */
    --prio-1: #e74c3c;
    --prio-2: #f39c12;
    --prio-3: #3498db;
    --prio-4: #8b8fa3;
}

[data-theme="light"] {
    --bg: #f5f6f8;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --bg-card-hover: #f0f1f4;
    --bg-surface: #f0f1f4;
    --border: #dfe1e6;
    --text: #1a1d27;
    --text-muted: #6b7280;
    --text-heading: #111318;
    --scrollbar: #ccc;
    --input-bg: #ffffff;
    --input-border: #dfe1e6;
    --input-focus: #3498db;
}

/* ===== Typography ===== */
html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: 700; line-height: 1.2; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

a { color: var(--highlight); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ===== Utility ===== */
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.hidden { display: none !important; }