/* ============================================================
   Hout Video — Montage Planning Dashboard
   Huisstijl: #123238 achtergrond · #F4F1ED tekst · #A582FA accent
   Fonts: Open Sans (body) | voeg Neue Metana & Selasy toe via @font-face
   ============================================================ */

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* --- Fonts --- */
/* Voeg hieronder je eigen @font-face regels toe voor Neue Metana & Selasy:
   @font-face { font-family: 'Neue Metana'; src: url('/static/fonts/NieuweMetana.woff2') format('woff2'); }
   @font-face { font-family: 'Selasy'; src: url('/static/fonts/Selasy.woff2') format('woff2'); }
*/

/* --- CSS variabelen --- */
:root {
    --bg:            #123238;
    --bg-card:       #1a3e46;
    --bg-card-hover: #1f4850;
    --bg-input:      #0e272c;
    --kleur-tekst:   #F4F1ED;
    --kleur-subtiel: #9db8bc;
    --kleur-accent:  #A582FA;
    --kleur-accent-hover: #8f67e8;
    --kleur-rand:    #1f4a52;
    --kleur-succes:  #34d399;
    --kleur-waarsch: #fbbf24;
    --font-hoofd:    'Neue Metana', 'Selasy', 'Open Sans', sans-serif;
    --font-body:     'Open Sans', sans-serif;
    --radius:        10px;
    --schaduw:       0 2px 10px rgba(0,0,0,0.35);
}

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

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--kleur-tekst);
    line-height: 1.6;
    min-height: 100vh;
}

/* ============================================================
   Header & nav
   ============================================================ */
header {
    background: #0b2227;
    border-bottom: 1px solid var(--kleur-rand);
    padding: 0 2rem;
    height: 60px;
    display: flex;
    align-items: center;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

nav .logo {
    color: var(--kleur-tekst);
    font-family: var(--font-hoofd);
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.logo-beeldmerk {
    height: 32px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.logo-tekst {
    display: inline-block;
    line-height: 1.1;
}
.logo-sub {
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--kleur-subtiel);
    display: block;
    margin-top: -0.2rem;
}

.nav-rechts {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.nav-user {
    font-size: 0.9rem;
    color: var(--kleur-subtiel);
}

.nav-logout {
    font-size: 0.85rem;
    color: var(--kleur-subtiel);
    text-decoration: none;
    border: 1px solid var(--kleur-rand);
    padding: 0.3rem 0.7rem;
    border-radius: 5px;
    transition: color 0.15s, border-color 0.15s;
}
.nav-logout:hover { color: var(--kleur-tekst); border-color: var(--kleur-accent); }

/* ============================================================
   Main container
   ============================================================ */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

@media (max-width: 640px) {
    main { padding: 1.25rem 0.75rem; }
}

/* ============================================================
   Banners
   ============================================================ */
.banner {
    padding: 0.75rem 2rem;
    font-size: 0.9rem;
}

.banner-info {
    background: rgba(165, 130, 250, 0.15);
    color: var(--kleur-accent);
    border-left: 3px solid var(--kleur-accent);
}

.banner-success {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
    border-left: 3px solid #34d399;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}

.banner-warning {
    background: rgba(251, 191, 36, 0.12);
    color: var(--kleur-waarsch);
    border-radius: var(--radius);
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--kleur-waarsch);
}

.banner code {
    background: rgba(255,255,255,0.1);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.85em;
}

/* ============================================================
   Pagina header
   ============================================================ */
.page-header { margin-bottom: 2rem; }

.page-header h1 {
    font-family: var(--font-hoofd);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--kleur-tekst);
}

.page-header p { color: var(--kleur-subtiel); font-size: 0.95rem; }
.subtitle { color: var(--kleur-subtiel); font-size: 1rem; margin-top: 0.25rem; }
h2 { font-size: 1.2rem; margin-bottom: 0.5rem; font-family: var(--font-hoofd); }

/* ============================================================
   Back link
   ============================================================ */
.back-link {
    display: inline-block;
    color: var(--kleur-subtiel);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    transition: color 0.15s;
}
.back-link:hover { color: var(--kleur-tekst); }

/* ============================================================
   Tabel
   ============================================================ */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schaduw);
}

.table th {
    background: #0e272c;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kleur-subtiel);
    font-weight: 600;
    user-select: none;
}

.sorteerbaar { cursor: pointer; }
.sorteerbaar:hover { color: var(--kleur-accent); }
.sorteer-pijl { font-size: 0.7rem; opacity: 0.7; }

.table td {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--kleur-rand);
    font-size: 0.93rem;
    color: var(--kleur-tekst);
}

.table tr:hover td { background: var(--bg-card-hover); }
td.nummer { font-family: monospace; font-size: 0.88rem; color: var(--kleur-subtiel); }

/* ============================================================
   Badge
   ============================================================ */
.badge {
    display: inline-block;
    padding: 0.2em 0.65em;
    border-radius: 5px;
    font-size: 0.78rem;
    background: rgba(165, 130, 250, 0.15);
    color: var(--kleur-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: background 0.15s, transform 0.1s;
    font-family: var(--font-body);
}

.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.83rem; }

.btn-primary {
    background: var(--kleur-accent);
    color: #fff;
    text-align: center;
}
.btn-primary:hover { background: var(--kleur-accent-hover); }

.btn-full { width: 100%; }

.btn:not(.btn-primary):not(.btn-primary):not(.btn-alles) {
    background: var(--kleur-rand);
    color: var(--kleur-tekst);
}
.btn:not(.btn-primary):not(.btn-alles):hover { background: #2a5e6a; }

.btn-alles {
    display: inline-block;
    padding: 0.7rem 1.75rem;
    background: var(--kleur-accent);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    font-family: var(--font-body);
}
.btn-alles:hover { background: var(--kleur-accent-hover); transform: translateY(-1px); }

/* ============================================================
   Zoekbalk
   ============================================================ */
.zoekbalk { margin-bottom: 1.25rem; }

.zoekbalk input {
    width: 100%;
    max-width: 420px;
    padding: 0.55rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--kleur-rand);
    border-radius: 7px;
    font-size: 0.93rem;
    color: var(--kleur-tekst);
    outline: none;
    transition: border-color 0.15s;
}
.zoekbalk input::placeholder { color: var(--kleur-subtiel); }
.zoekbalk input:focus { border-color: var(--kleur-accent); }

/* ============================================================
   Versie grid
   ============================================================ */
.versie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.keuze-blok {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    max-width: 640px;
}
.keuze-kaart {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--kleur-rand);
    border-left: 4px solid var(--kleur-accent);
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: var(--kleur-tekst);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: background 0.15s, border-left-color 0.15s;
}
.keuze-kaart:hover { background: var(--bg-card-hover); border-left-color: var(--kleur-accent-hover); }
.keuze-kaart-icon { font-size: 1.5rem; flex-shrink: 0; }
.keuze-kaart-tekst { flex: 1; }
.keuze-titel { font-size: 1.1rem; font-weight: 700; color: var(--kleur-tekst); }
.keuze-sub   { font-size: 0.85rem; color: var(--kleur-subtiel); margin-top: 0.2rem; }
.keuze-pijl  { color: var(--kleur-accent); font-size: 1.2rem; flex-shrink: 0; }

.versie-kaart {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: 1.5rem 1.25rem;
    text-decoration: none;
    color: var(--kleur-tekst);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: box-shadow 0.15s, transform 0.1s;
    border-top: 3px solid var(--kleur-rand);
}
.versie-kaart:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4); transform: translateY(-2px); }
.versie-geblokkeerd { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.versie-geblokkeerd:hover { box-shadow: var(--schaduw); transform: none; }
.versie-slot-melding { font-size: 0.8rem; font-weight: 600; color: var(--kleur-subtiel); margin-top: 0.5rem; }
.tussentijd-balk { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--kleur-rand); border-radius: var(--radius); padding: 0.9rem 1.25rem; margin-bottom: 1rem; }
.tussentijd-toelichting { font-size: 0.82rem; color: var(--kleur-subtiel); }

.versie-1 { border-top-color: var(--kleur-accent); }
.versie-2 { border-top-color: #34d399; }
.versie-3 { border-top-color: #60a5fa; }

.versie-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--kleur-subtiel); }
.versie-titel { font-size: 1.05rem; font-weight: 700; font-family: var(--font-hoofd); }
.versie-percentage { font-size: 2.4rem; font-weight: 800; line-height: 1; margin: 0.3rem 0; color: var(--kleur-accent); font-family: var(--font-hoofd); }
.versie-uren { font-size: 1rem; color: var(--kleur-subtiel); font-weight: 500; }
.versie-omschrijving { font-size: 0.83rem; color: var(--kleur-subtiel); margin-top: 0.25rem; }

/* ============================================================
   Percentages / uren balk
   ============================================================ */
.percentages-balk {
    background: var(--bg-card);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.percentages-balk label { font-size: 0.9rem; color: var(--kleur-subtiel); display: block; margin-bottom: 0.8rem; }
.percentages-balk label strong { color: var(--kleur-tekst); }
.percentages-invoer { display: flex; gap: 2rem; flex-wrap: wrap; }
.pct-veld { display: flex; align-items: center; gap: 0.5rem; font-size: 0.93rem; }
.pct-veld span:first-child { font-weight: 600; min-width: 65px; }
.pct-veld input {
    width: 68px;
    padding: 0.32rem 0.5rem;
    background: var(--bg-input);
    border: 1px solid var(--kleur-rand);
    border-radius: 5px;
    font-size: 0.93rem;
    text-align: center;
    color: var(--kleur-tekst);
    outline: none;
}
.pct-veld input:focus { border-color: var(--kleur-accent); }
.pct-toon { font-size: 0.82rem; color: var(--kleur-accent); font-weight: 600; min-width: 40px; }

/* ============================================================
   Alle versies knop
   ============================================================ */
.alles-knop { margin-top: 2rem; }

/* ============================================================
   Alle versies kolommen (alles.html)
   ============================================================ */
.alles-kolommen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.alles-kolom {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schaduw);
}

.alles-kolom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    background: rgba(0,0,0,0.25);
    border-bottom: 2px solid var(--kleur-rand);
}

.versie-kleur-1 { border-bottom-color: var(--kleur-accent) !important; }
.versie-kleur-2 { border-bottom-color: #34d399 !important; }
.versie-kleur-3 { border-bottom-color: #60a5fa !important; }

.versie-label-klein { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kleur-subtiel); }
.versie-pct { font-size: 0.9rem; font-weight: 700; color: var(--kleur-accent); }

/* Optie kaart (radio selectie) */
.optie-kaart {
    display: block;
    cursor: pointer;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--kleur-rand);
    transition: background 0.12s;
    position: relative;
}
.optie-kaart input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.optie-kaart:hover { background: var(--bg-card-hover); }
.optie-geselecteerd {
    background: rgba(165, 130, 250, 0.12);
    border-left: 3px solid var(--kleur-accent);
}
.optie-ongeldig { opacity: 0.35; pointer-events: none; }
.laden { padding: 1rem; color: var(--kleur-subtiel); font-size: 0.9rem; }
.optie-inhoud { display: flex; flex-direction: column; gap: 0.15rem; }

/* Eigen optie voorstellen */
.extra-optie-sectie { margin-top: 0.75rem; padding: 0 0.25rem; }
.btn-extra-optie {
    background: none;
    border: 1px dashed var(--kleur-subtiel);
    color: var(--kleur-subtiel);
    border-radius: var(--radius);
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.btn-extra-optie:hover { border-color: var(--accent); color: var(--accent); }
.extra-optie-form { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.extra-optie-input {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--tekst);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.btn-extra-optie-ok {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    align-self: flex-start;
}
.btn-extra-optie-ok:hover { opacity: 0.88; }
.extra-optie-fout { color: #c00; font-size: 0.85rem; }

.suggestie-medewerker { font-size: 1rem; font-weight: 700; color: var(--kleur-tekst); }
.suggestie-datum { font-size: 0.88rem; color: var(--kleur-subtiel); }
.suggestie-tijdvak { font-size: 0.88rem; font-weight: 600; color: var(--kleur-accent); }
.suggestie-uren { font-size: 0.82rem; color: var(--kleur-subtiel); }

/* Bevestig alles balk */
.bevestig-alles-balk {
    margin-top: 2.5rem;
    text-align: center;
}

.feedback-schema-blok {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: var(--kleur-bg-kaart, #1e2d35);
    border-radius: 8px;
    border: 1px solid var(--kleur-rand, #2e4050);
}

.feedback-schema-blok h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.feedback-schema-blok textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: monospace;
    font-size: 0.9rem;
    padding: 0.75rem;
    background: var(--kleur-bg, #152028);
    color: var(--kleur-tekst, #d0e4ec);
    border: 1px solid var(--kleur-rand, #2e4050);
    border-radius: 6px;
    resize: none;
    line-height: 1.6;
}

.btn-kopieer {
    margin-top: 0.75rem;
    padding: 0.4rem 1rem;
    background: var(--kleur-accent, #1a8a9e);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-kopieer:hover { background: var(--kleur-accent-hover, #1a7a8e); }

/* ============================================================
   Suggesties grid (planning.html)
   ============================================================ */
.suggesties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.suggestie-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--kleur-accent);
}

.suggestie-header {
    background: rgba(0,0,0,0.25);
    color: var(--kleur-subtiel);
    padding: 0.55rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.suggestie-body {
    padding: 1.25rem 1rem 0.75rem;
    flex: 1;
}

.suggestie-card form { padding: 0 1rem 1rem; }

/* ============================================================
   Bevestigd pagina
   ============================================================ */
.bevestigd {
    text-align: center;
    padding: 4rem 2rem;
}

.check-icon {
    width: 76px;
    height: 76px;
    background: rgba(52, 211, 153, 0.15);
    color: var(--kleur-succes);
    border-radius: 50%;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.bevestigd h1 { font-size: 2rem; margin-bottom: 0.75rem; font-family: var(--font-hoofd); }
.bevestigd p { color: var(--kleur-subtiel); font-size: 1.05rem; margin-bottom: 1.5rem; }
.bevestigd .btn { display: inline-block; width: auto; padding: 0.6rem 1.5rem; }

/* Ingepland overzicht (alles_bevestigd.html) */
.ingepland-overzicht {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.5rem auto;
    max-width: 600px;
    box-shadow: var(--schaduw);
    text-align: left;
}

.ingepland-rij {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--kleur-rand);
    font-size: 0.93rem;
}
.ingepland-rij:last-child { border-bottom: none; }

/* ============================================================
   Login pagina
   ============================================================ */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
}

.login-wrapper {
    width: 100%;
    max-width: 400px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.login-beeldmerk {
    width: 96px;
    height: auto;
    display: block;
    margin: 0 auto;
    animation: login-beeldmerk-puls 2.8s ease-in-out infinite;
    transform-origin: center;
    filter: drop-shadow(0 6px 18px rgba(63, 156, 149, 0.25));
}

@keyframes login-beeldmerk-puls {
    0%, 100% {
        transform: scale(1);
        opacity: 0.92;
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-beeldmerk {
        animation: none;
    }
}

.login-logo {
    font-family: var(--font-hoofd);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kleur-tekst);
    text-align: center;
    line-height: 1.05;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.login-logo-sub {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--kleur-subtiel);
    text-transform: uppercase;
}

.login-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 2rem;
    width: 100%;
    box-shadow: var(--schaduw);
    border: 1px solid var(--kleur-rand);
}

.login-card h1 {
    font-family: var(--font-hoofd);
    font-size: clamp(1.15rem, 5.5vw, 1.5rem);
    margin-bottom: 1.5rem;
    color: var(--kleur-tekst);
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.15;
}

.form-veld {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.form-veld label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kleur-subtiel);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-veld input,
.form-veld textarea,
.form-veld select {
    padding: 0.6rem 0.9rem;
    background: var(--bg-input);
    border: 1px solid var(--kleur-rand);
    border-radius: 7px;
    color: var(--kleur-tekst);
    font-size: 0.95rem;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.15s;
}
.form-veld textarea {
    resize: vertical;
    min-height: 4.5rem;
}
.form-veld input:focus,
.form-veld textarea:focus,
.form-veld select:focus { border-color: var(--kleur-accent); }
.form-veld input[type="file"] {
    padding: 0.4rem 0.6rem;
    color: var(--kleur-subtiel);
}
.form-veld input::placeholder,
.form-veld textarea::placeholder { color: var(--kleur-subtiel); opacity: 0.8; }

/* Globale fallback: voorkom witte text-inputs/textareas zonder .form-veld wrapper */
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select {
    background-color: var(--bg-input);
    color: var(--kleur-tekst);
    border: 1px solid var(--kleur-rand);
    border-radius: 7px;
    font-family: var(--font-body);
}
textarea::placeholder,
input::placeholder { color: var(--kleur-subtiel); opacity: 0.8; }

/* ============================================================
   Empty state
   ============================================================ */
.empty { color: var(--kleur-subtiel); font-style: italic; padding: 1rem 0; }

/* ============================================================
   Admin navigatie
   ============================================================ */
.nav-beheer {
    font-size: 0.85rem;
    color: var(--kleur-accent);
    text-decoration: none;
    border: 1px solid var(--kleur-accent);
    padding: 0.3rem 0.7rem;
    border-radius: 5px;
    transition: background 0.15s;
}
.nav-beheer:hover { background: rgba(165,130,250,0.12); }
.nav-beheer-filled {
    background: var(--kleur-accent);
    color: #fff;
    border-color: var(--kleur-accent);
}
.nav-beheer-filled:hover { background: var(--kleur-accent-hover); }

.nav-dropdown {
    position: relative;
}
.nav-dropdown > button {
    cursor: pointer;
    background: none;
    font-family: inherit;
}
.nav-dropdown-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    top: calc(100% + 0.35rem);
    background: #0f2a30;
    border: 1px solid #2a4a52;
    border-radius: 6px;
    width: 200px;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    padding: 0.4rem 0;
    transition: opacity 0.15s, visibility 0.15s;
}
.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu {
    visibility: visible;
    opacity: 1;
}
.nav-dropdown-menu a {
    display: block !important;
    padding: 0.55rem 1rem;
    color: #e0f0f3;
    text-decoration: none;
    font-size: 0.88rem;
    white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: rgba(165,130,250,0.15); }
.nav-dropdown-groep-label {
    padding: 0.45rem 1rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kleur-subtiel);
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 0.25rem;
}
.nav-dropdown-groep-label:first-child { border-top: none; margin-top: 0; }
.nav-dropdown-menu a.actief {
    color: var(--kleur-accent);
    font-weight: 600;
}

/* ============================================================
   Admin gebruikersbeheer
   ============================================================ */
.admin-form-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--schaduw);
    max-width: 760px;
    margin-top: 1rem;
}

.admin-form { display: flex; flex-direction: column; gap: 1rem; }

.form-rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) { .form-rij { grid-template-columns: 1fr; } }

.form-veld-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--kleur-tekst);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.form-veld-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--kleur-accent);
    cursor: pointer;
}

.verplicht { color: var(--kleur-accent); }
.tekst-subtiel { font-size: 0.82rem; color: var(--kleur-subtiel); }

.form-select {
    padding: 0.6rem 0.9rem;
    background: var(--bg-input);
    border: 1px solid var(--kleur-rand);
    border-radius: 7px;
    color: var(--kleur-tekst);
    font-size: 0.95rem;
    font-family: var(--font-body);
    outline: none;
    width: 100%;
}
.form-select:focus { border-color: var(--kleur-accent); }
.form-select option { background: var(--bg-input); color: var(--kleur-tekst); }

.badge-actief  { background: rgba(52,211,153,0.15); color: #34d399; }
.badge-inactief { background: rgba(251,191,36,0.15); color: var(--kleur-waarsch); }

.btn-gevaar {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.3);
}
.btn-gevaar:hover { background: rgba(239,68,68,0.28); }

/* ============================================================
   Audit log tabel
   ============================================================ */
.audit-tabel .versie-badge-1 { background: rgba(165,130,250,0.15); color: var(--kleur-accent); }
.audit-tabel .versie-badge-2 { background: rgba(52,211,153,0.15); color: #34d399; }
.audit-tabel .versie-badge-3 { background: rgba(96,165,250,0.15); color: #60a5fa; }

/* Gripp-status meldingen */
.gripp-status { font-size: 0.9rem; margin: 0.5rem 0 1rem; padding: 0.5rem 0.75rem; border-radius: 6px; }
.gripp-ok   { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.gripp-fout { background: rgba(239,68,68,0.12);  color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.gripp-status-lijst { margin-bottom: 1rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    max-width: 1200px;
    margin: 3rem auto 0;
    padding: 1.5rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--kleur-subtiel);
    opacity: 0.6;
    border-top: 1px solid var(--kleur-rand);
}

/* ============================================================
   Print styles
   ============================================================ */
@media print {
    header, .nav-rechts, .nav-dropdown, .nav-hamburger, .nav-mobile-menu, .site-footer { display: none !important; }
    body { background: #fff; color: #000; }
    main { padding: 0; }
    .site-footer-print {
        display: block !important;
        text-align: center;
        font-size: 9pt;
        color: #666;
        border-top: 1px solid #ccc;
        padding-top: 0.75rem;
        margin-top: 2rem;
    }
}
.site-footer-print { display: none; }

/* ============================================================
   Mega-menu dropdowns (Productie, Organisatie, Innovatie)
   ============================================================ */
.nav-mega-menu {
    min-width: 280px;
    width: auto;
}
.nav-mega-menu .nav-mega-item {
    display: flex !important;
    flex-direction: column;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: #e0f0f3;
    border-radius: 4px;
    margin: 0.15rem 0.4rem;
    transition: background 0.12s;
}
.nav-mega-menu .nav-mega-item:hover {
    background: rgba(165, 130, 250, 0.15);
}
.nav-mega-menu .nav-mega-item.actief {
    background: rgba(165, 130, 250, 0.18);
    border-left: 3px solid var(--kleur-accent);
    padding-left: calc(1rem - 3px);
}
.nav-mega-menu .nav-mega-item.actief .nav-mega-item-naam {
    color: var(--kleur-accent);
}
.nav-mega-item-naam {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
}
.nav-mega-item-desc {
    font-size: 0.78rem;
    color: var(--kleur-subtiel);
    line-height: 1.35;
    margin-top: 0.1rem;
}

/* ============================================================
   Hamburger button & mobile menu
   ============================================================ */
.nav-hamburger {
    display: none;
    background: none;
    border: 1px solid var(--kleur-rand);
    color: var(--kleur-tekst);
    font-size: 1.4rem;
    padding: 0.25rem 0.55rem;
    border-radius: 5px;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s;
}
.nav-hamburger:hover {
    border-color: var(--kleur-accent);
}

.nav-mobile-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #0b2227;
    border-bottom: 1px solid var(--kleur-rand);
    z-index: 9998;
    padding: 0.5rem 0 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    flex-direction: column;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}
.nav-mobile-menu.open {
    display: flex;
}

.nav-mobile-groep-label {
    padding: 0.6rem 1.25rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kleur-subtiel);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.25rem;
}
.nav-mobile-groep-label:first-child {
    border-top: none;
    margin-top: 0;
}

.nav-mobile-item {
    display: block;
    padding: 0.6rem 1.25rem;
    color: #e0f0f3;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.12s;
}
.nav-mobile-item:hover {
    background: rgba(165, 130, 250, 0.12);
}
.nav-mobile-item.actief {
    color: var(--kleur-accent);
    font-weight: 600;
}
.nav-mobile-user {
    color: var(--kleur-subtiel);
    font-size: 0.85rem;
}

/* ============================================================
   Mobile responsive (< 900px)
   ============================================================ */
@media (max-width: 900px) {
    .nav-rechts {
        display: none !important;
    }
    .nav-hamburger {
        display: block;
    }
    nav {
        position: relative;
    }
}