:root {
    --bg: #f1f5f9;
    --paneel: #ffffff;
    --rand: #e2e8f0;
    --tekst: #1e293b;
    --tekst-zacht: #64748b;
    --primair: #2563eb;
    --primair-donker: #1d4ed8;
    --gevaar: #dc2626;
    --grijs: #94a3b8;
    --blauw: #3b82f6;
    --groen: #16a34a;
    --rood: #dc2626;
    --schaduw: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--tekst);
    line-height: 1.5;
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 0 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.75rem; }

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

/* Topbar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--paneel);
    padding: 0.75rem 1.25rem;
    box-shadow: var(--schaduw);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-wrap: wrap;
}
.logo { font-weight: 700; font-size: 1.1rem; color: var(--tekst); }
.logo:hover { text-decoration: none; }
.nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.nav a {
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    color: var(--tekst-zacht);
    font-weight: 500;
}
.nav a:hover { background: var(--bg); text-decoration: none; }
.nav a.actief { background: var(--primair); color: #fff; }
.nav a.uitloggen { color: var(--gevaar); }

.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* Flashes */
.flashes { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.flash { padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.92rem; }
.flash-succes { background: #dcfce7; color: #166534; }
.flash-fout { background: #fee2e2; color: #991b1b; }

/* Knoppen */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--rand);
    background: var(--paneel);
    color: var(--tekst);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    text-decoration: none;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn-primair { background: var(--primair); color: #fff; border-color: var(--primair); }
.btn-primair:hover { background: var(--primair-donker); }
.btn-gevaar { color: var(--gevaar); }
.btn-gevaar:hover { background: #fee2e2; }
.btn-klein { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.btn-mini { padding: 0.2rem 0.45rem; font-size: 0.8rem; line-height: 1; }

/* Login */
.login-wrapper { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.login-card {
    background: var(--paneel);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.login-card h1 { text-align: center; margin-bottom: 0; }
.subtiel { text-align: center; color: var(--tekst-zacht); margin: 0 0 0.5rem; }

label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; color: var(--tekst-zacht); font-weight: 500; }
input, select, textarea {
    font: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: #fff;
    color: var(--tekst);
    width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primair); outline-offset: -1px; border-color: var(--primair); }
input[type="color"] { padding: 2px; height: 40px; width: 52px; }

/* Stat-kaarten */
.stat-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.stat-kaart {
    background: var(--paneel);
    padding: 1.1rem;
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.stat-label { color: var(--tekst-zacht); font-size: 0.85rem; }
.stat-waarde { font-size: 1.5rem; font-weight: 700; }
.telkaart { align-items: center; text-align: center; }
.telkaart .stat-waarde { font-size: 2rem; }
.telkaart.status-todo { border-left: 4px solid var(--grijs); }
.telkaart.status-bezig { border-left: 4px solid var(--blauw); }
.telkaart.status-klaar { border-left: 4px solid var(--groen); }

.positief { color: var(--groen); }
.negatief { color: var(--rood); }

.snellinks { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }

/* Sectiekop */
.sectie-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* Ruimte-kaarten */
.kaart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.ruimte-kaart {
    background: var(--paneel);
    padding: 1.1rem;
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    color: var(--tekst);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: transform 0.12s, box-shadow 0.12s;
}
.ruimte-kaart:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-decoration: none; }
.ruimte-kaart h3 { margin: 0; }
.voortgang { display: flex; flex-direction: column; gap: 0.3rem; }
.voortgang-balk { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.voortgang-vulling { height: 100%; background: var(--groen); border-radius: 99px; transition: width 0.3s; }
.voortgang-tekst { font-size: 0.82rem; color: var(--tekst-zacht); }
.ruimte-begroting { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.86rem; color: var(--tekst-zacht); }

.leeg { color: var(--tekst-zacht); font-style: italic; padding: 1rem 0; }

/* Panelen */
.paneel { background: var(--paneel); padding: 1.25rem; border-radius: var(--radius); box-shadow: var(--schaduw); margin-bottom: 1.5rem; }
.twee-kolommen { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem; align-items: start; }

.kruimels { margin-bottom: 0.5rem; }
.titel-input { font-size: 1.3rem; font-weight: 700; border: 1px dashed var(--rand); max-width: 320px; }
.ruimte-naam-form { display: flex; gap: 0.5rem; align-items: center; }

/* Inline forms */
.inline-form { display: inline; margin: 0; }
.toevoeg-form { display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; flex-wrap: wrap; }
.toevoeg-form input[type="text"] { flex: 1; min-width: 160px; }

/* Takenlijst */
.takenlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.taak {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.55rem 0.7rem; border-radius: 8px; background: var(--bg); border-left: 4px solid var(--grijs);
    flex-wrap: wrap;
}
.taak.status-todo { border-left-color: var(--grijs); }
.taak.status-bezig { border-left-color: var(--blauw); }
.taak.status-klaar { border-left-color: var(--groen); }
.taak.status-klaar .taak-omschrijving { text-decoration: line-through; color: var(--tekst-zacht); }
.taak-omschrijving { flex: 1; min-width: 120px; }
.taak-acties { display: flex; gap: 0.25rem; align-items: center; }
.taak-status-form select { padding: 0.25rem 0.4rem; font-size: 0.82rem; }

/* Tabellen */
.tabel-scroll { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabel th, .tabel td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--rand); }
.tabel th { color: var(--tekst-zacht); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }
.tabel .rechts { text-align: right; }
.tabel tfoot .subtotaal td { font-weight: 700; border-top: 2px solid var(--rand); border-bottom: none; }
.acties-cel { display: flex; gap: 0.25rem; white-space: nowrap; }

.post-form { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }
.post-form input[type="text"] { flex: 1; min-width: 140px; }
.post-form input[type="number"] { width: 110px; }

/* Filters */
.filter-form, .bereik-form { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1.25rem; flex-wrap: wrap; }
.bereik-form label { flex-direction: row; align-items: center; gap: 0.4rem; }

.status-select { padding: 0.3rem 0.5rem; font-size: 0.82rem; border-radius: 6px; }
.status-bestelling-te_bestellen { background: #f1f5f9; }
.status-bestelling-besteld { background: #dbeafe; }
.status-bestelling-geleverd { background: #dcfce7; }

/* Dialogen */
.dialoog { border: none; border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.2); max-width: 420px; width: 92%; }
.dialoog::backdrop { background: rgba(0,0,0,0.4); }
.dialoog form { display: flex; flex-direction: column; gap: 0.75rem; }
.dialoog-acties { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }

/* Gantt */
.gantt-scroll { overflow-x: auto; background: var(--paneel); border-radius: var(--radius); box-shadow: var(--schaduw); padding: 0.5rem; margin-bottom: 1.5rem; }
.gantt { display: block; font-family: inherit; }
.week-kop { fill: #f8fafc; stroke: var(--rand); stroke-width: 1; }
.week-kop-alt { fill: #eef2ff; }
.week-label { font-size: 12px; font-weight: 700; fill: var(--tekst); }
.week-datum { font-size: 10px; fill: var(--tekst-zacht); }
.dag-label { font-size: 10px; fill: var(--tekst-zacht); }
.raster-lijn { stroke: var(--rand); stroke-width: 1; }
.raster-lijn-sterk { stroke: var(--grijs); stroke-width: 1.5; }
.gantt-rij { fill: #ffffff; }
.gantt-rij-alt { fill: #f8fafc; }
.rij-label { font-size: 12px; fill: var(--tekst); }
.gantt-balk { cursor: default; }
.gantt-balk:hover { opacity: 0.85; }
.vandaag-lijn { stroke: var(--rood); stroke-width: 2; stroke-dasharray: 4 3; }
.vandaag-label { font-size: 10px; fill: var(--rood); font-weight: 700; }

/* Legenda */
.legenda { background: var(--paneel); padding: 1.25rem; border-radius: var(--radius); box-shadow: var(--schaduw); margin-bottom: 1.5rem; }
.legenda-items { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.legenda-item { display: flex; align-items: center; gap: 0.4rem; background: var(--bg); padding: 0.3rem 0.6rem; border-radius: 99px; font-size: 0.88rem; }
.legenda-kleur { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.legenda-kleur.klein { width: 12px; height: 12px; vertical-align: middle; }

/* Responsive */
@media (max-width: 800px) {
    .stat-rij { grid-template-columns: 1fr; }
    .twee-kolommen { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .nav { width: 100%; }
    .stat-rij { grid-template-columns: repeat(3, 1fr); }
    .telkaart .stat-waarde { font-size: 1.4rem; }
}