:root {
    --achtergrond: #f4f5f7;
    --vlak: #ffffff;
    --rand: #dfe3e8;
    --rand-sterk: #c3cad2;
    --tekst: #1f2733;
    --tekst-zacht: #64707f;
    --donker: #1a2233;
    --accent: #2f6f4f;
    --accent-zacht: #e7f2ec;
    --waarschuwing: #a5601a;
    --waarschuwing-zacht: #fdf1e2;
    --gevaar: #a32b2b;
    --gevaar-zacht: #fbecec;
    --radius: 6px;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--achtergrond);
    color: var(--tekst);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

a { color: var(--accent); }

/* ---------- kop ---------- */

.kop {
    background: var(--donker);
    color: #fff;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 52px;
}

.kop .merk { font-weight: 600; letter-spacing: .01em; }
.kop .merk span { opacity: .5; font-weight: 400; }

.kop nav { display: flex; gap: .25rem; margin-right: auto; }

.kop nav a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    padding: .35rem .7rem;
    border-radius: var(--radius);
    font-size: .875rem;
}

.kop nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.kop nav a.actief { background: rgba(255,255,255,.16); color: #fff; }

/* Hoofditems met een uitklapbaar submenu. Het hoofditem is een knop die
   eruitziet als de andere menulinks; het submenu hangt eronder. */
.hoofdmenu .menu { position: relative; }

.hoofdmenu .hoofditem {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.75);
    padding: .35rem 1.5rem .35rem .7rem;
    border-radius: var(--radius);
    font-size: .875rem;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.hoofdmenu .hoofditem::after {
    content: '';
    position: absolute;
    right: .6rem;
    top: 50%;
    width: .35rem;
    height: .35rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: .7;
}

.hoofdmenu .hoofditem:hover,
.hoofdmenu .menu.open .hoofditem { background: rgba(255,255,255,.1); color: #fff; }
.hoofdmenu .hoofditem.actief { background: rgba(255,255,255,.16); color: #fff; }

.hoofdmenu .submenu {
    display: none;
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    min-width: 200px;
    background: var(--donker);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius);
    padding: .3rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    z-index: 50;
    flex-direction: column;
    gap: .1rem;
}

.hoofdmenu .menu.open .submenu { display: flex; }
.hoofdmenu .submenu a { display: block; white-space: nowrap; }

.kop .gebruiker { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; color: rgba(255,255,255,.65); }
.kop .gebruiker button {
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    color: rgba(255,255,255,.85);
    padding: .25rem .6rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .8125rem;
}
.kop .gebruiker button:hover { background: rgba(255,255,255,.12); }

/* ---------- indeling ---------- */

.omhulsel { max-width: 1500px; margin: 1.5rem auto; padding: 0 1.5rem 3rem; }
.omhulsel.smal { max-width: 460px; margin-top: 6vh; }

.paginakop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.paginakop h1 { font-size: 1.375rem; font-weight: 600; }
.paginakop p { color: var(--tekst-zacht); font-size: .875rem; margin-top: .15rem; }

.kruimels { font-size: .8125rem; color: var(--tekst-zacht); margin-bottom: .5rem; }
.kruimels a { color: var(--tekst-zacht); }

.kaart {
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.kaart > h2 {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tekst-zacht);
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--rand);
    font-weight: 600;
}

.kaart .inhoud { padding: 1rem; }

.raster { display: grid; gap: 1rem; }
.raster.vier { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.raster.twee { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.cijfer { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: .9rem 1rem; }
.cijfer .waarde { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.cijfer .naam { font-size: .8125rem; color: var(--tekst-zacht); }

/* ---------- tabellen ---------- */

.tabelhouder { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: .8125rem; }
th, td { text-align: left; padding: .5rem .65rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-weight: 600; color: var(--tekst-zacht); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
tbody tr:hover { background: #fafbfc; }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; }
.zacht { color: var(--tekst-zacht); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }

/* ---------- matrix ---------- */

.matrix { font-size: .75rem; }
.matrix th.kolomkop {
    height: 190px;
    white-space: nowrap;
    vertical-align: bottom;
    padding: .35rem .1rem;
    width: 26px;
    border-bottom: 2px solid var(--rand-sterk);
}
.matrix th.kolomkop > div {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-transform: none;
    letter-spacing: 0;
    font-size: .75rem;
    font-weight: 500;
    color: var(--tekst);
    max-height: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.matrix th.kolomkop.ongebruikt > div { color: var(--tekst-zacht); font-style: italic; }
.matrix td.cel { text-align: center; padding: .3rem .1rem; border-right: 1px solid #f0f2f4; }
.matrix td.cel.aan { background: var(--accent-zacht); color: var(--accent); font-weight: 600; }
.matrix td.cel.uit { color: #d3d8de; }
.matrix td.cel.waarde { background: #eef3f8; color: #2a4c6b; font-size: .6875rem; }
.matrix th.rijkop, .matrix td.rijkop {
    position: sticky;
    left: 0;
    background: var(--vlak);
    z-index: 1;
    border-right: 2px solid var(--rand-sterk);
    white-space: nowrap;
}
.matrix tbody tr:hover td.rijkop { background: #fafbfc; }
.matrix tfoot td { font-size: .6875rem; color: var(--tekst-zacht); text-align: center; }

/* ---------- boom ---------- */

.boomrij .inspring { display: inline-block; }
.boomrij .tak { color: var(--rand-sterk); }

/* ---------- etiketten ---------- */

.etiket {
    display: inline-block;
    padding: .05rem .4rem;
    border-radius: 3px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: #eceff2;
    color: var(--tekst-zacht);
    white-space: nowrap;
}
.etiket.swv { background: #e4ecf7; color: #2b4f7e; }
.etiket.kamer { background: #f0eaf7; color: #5b3d82; }
.etiket.bestuur { background: #fdf1e2; color: var(--waarschuwing); }
.etiket.school { background: var(--accent-zacht); color: var(--accent); }
.etiket.gearchiveerd { background: var(--gevaar-zacht); color: var(--gevaar); }
.etiket.aan { background: var(--accent-zacht); color: var(--accent); }
.etiket.uit { background: #eceff2; color: var(--tekst-zacht); }

/* ---------- meldingen ---------- */

.melding { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .875rem; }
.melding.goed { background: var(--accent-zacht); color: var(--accent); border: 1px solid #c6e0d2; }
.melding.fout { background: var(--gevaar-zacht); color: var(--gevaar); border: 1px solid #f0cfcf; }
.melding.let-op { background: var(--waarschuwing-zacht); color: var(--waarschuwing); border: 1px solid #f2ddc0; }

.leeg { padding: 2rem 1rem; text-align: center; color: var(--tekst-zacht); font-size: .875rem; }

/* ---------- formulieren ---------- */

.balk { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }

/* Alle tekstachtige invoer krijgt dezelfde stijl. Ontbreekt een type in
   deze lijst, dan valt dat veld terug op de opmaak van de browser en valt
   het zichtbaar uit de toon tussen de rest. */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=tel], input[type=url], input[type=number], input[type=date],
select, textarea {
    font: inherit;
    font-size: .8125rem;
    padding: .35rem .55rem;
    border: 1px solid var(--rand-sterk);
    border-radius: var(--radius);
    background: #fff;
    color: var(--tekst);
}

input[type=color] { width: 42px; height: 30px; padding: 2px; border: 1px solid var(--rand-sterk); border-radius: var(--radius); background: #fff; }

button, .knop {
    font: inherit;
    font-size: .8125rem;
    padding: .35rem .75rem;
    border: 1px solid var(--rand-sterk);
    border-radius: var(--radius);
    background: #fff;
    color: var(--tekst);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
button:hover, .knop:hover { background: #f2f4f6; }
button.primair, .knop.primair { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primair:hover { background: #275c42; }
button:disabled { opacity: .5; cursor: not-allowed; }

.schakelaar { display: flex; align-items: center; gap: .5rem; }

/* Pictogramknop, bijvoorbeeld het vuilnisbakje achter een mailticket. */
button.pictogram {
    padding: .2rem .35rem;
    line-height: 0;
    border-color: transparent;
    background: transparent;
    color: var(--tekst-zacht);
}
button.pictogram:hover { background: var(--gevaar-zacht); color: var(--gevaar); border-color: #f0cfcf; }
button.pictogram:disabled:hover { background: transparent; color: var(--tekst-zacht); border-color: transparent; }
button.pictogram svg { width: 15px; height: 15px; display: block; }
td.acties { width: 1%; white-space: nowrap; }

/* ---------- dialoog ---------- */

.dialoog {
    border: 1px solid var(--rand-sterk);
    border-radius: var(--radius);
    padding: 0;
    width: min(680px, 94vw);
    /* De browser centreert een modale dialog met margin:auto binnen inset 0.
       De reset bovenaan (* { margin: 0 }) haalt dat weg, waardoor hij
       linksboven blijft hangen; daarom hier weer expliciet. */
    margin: auto;
    max-height: 92vh;
    background: var(--vlak);
    color: var(--tekst);
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
}
.dialoog::backdrop { background: rgba(15,20,28,.45); }
.dialoog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--rand);
}
.dialoog header h2 { font-size: 1rem; font-weight: 600; }
.dialoog header button { font-size: 1.1rem; line-height: 1; }
.dialoog-inhoud { padding: 1rem; max-height: 70vh; overflow-y: auto; }
.dialoog footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--rand);
    background: #fafbfc;
}

.velden { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
.velden label { display: flex; flex-direction: column; gap: .2rem; font-size: .8125rem; }
.velden label.breed { grid-column: 1 / -1; }
.velden label > span { color: var(--tekst-zacht); font-size: .75rem; }
.velden label em { font-style: normal; opacity: .75; }
.velden input, .velden select { width: 100%; }

@media (max-width: 620px) {
    .velden { grid-template-columns: 1fr; }
}

.instellingrij { display: grid; grid-template-columns: 1fr 260px; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--rand); align-items: center; }
.instellingrij:last-child { border-bottom: 0; }
.instellingrij .naam { font-weight: 500; }
.instellingrij .toelichting { color: var(--tekst-zacht); font-size: .75rem; margin-top: .1rem; }
.instellingrij .herkomst { color: var(--rand-sterk); font-size: .6875rem; margin-top: .15rem; }
.instellingrij form { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }

@media (max-width: 720px) {
    .instellingrij { grid-template-columns: 1fr; }
    .instellingrij form { justify-content: flex-start; }
    .kop { flex-wrap: wrap; height: auto; padding: .6rem 1rem; gap: .75rem; }
    .kop nav { flex-wrap: wrap; }
}

/* ---------- maillog ---------- */

.mailinhoud { display: block; width: 100%; min-height: 480px; border: 0; background: #fff; }
.mailinhoud.tekst { min-height: 0; padding: 1rem; font-size: .8125rem; white-space: pre-wrap; word-break: break-word; margin: 0; }

/* ---------- tabbladen ---------- */

/* Klassieke tabbladen: omrande lipjes op een lijn, het actieve tabblad is
   wit en loopt door in de inhoud eronder. */
.tabs {
    display: flex;
    gap: .25rem;
    align-items: flex-end;
    border-bottom: 1px solid var(--rand-sterk);
    margin-bottom: 1.25rem;
    padding: 0 .25rem;
    flex-wrap: wrap;
}

.tabs button {
    background: #e4e8ec;
    border: 1px solid var(--rand-sterk);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: -1px;
    padding: .5rem 1rem;
    font-size: .875rem;
    color: var(--tekst-zacht);
    cursor: pointer;
    position: relative;
}

.tabs button:hover { background: #eceff2; color: var(--tekst); }

.tabs button.actief {
    background: var(--achtergrond);
    color: var(--accent);
    font-weight: 600;
    padding-top: .6rem;
    box-shadow: inset 0 3px 0 var(--accent);
}

/* De actieve tab dekt de lijn van de balk af, zodat hij één geheel wordt
   met de pagina eronder. */
.tabs button.actief::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--achtergrond);
}

.tabs button .aantal {
    display: inline-block;
    margin-left: .35rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #dfe4e9;
    color: var(--tekst-zacht);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5;
}
.tabs button.actief .aantal { background: var(--accent-zacht); color: var(--accent); }

/* ---------- kaart met een knop in de kop ---------- */

.kaartkop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .75rem .55rem 1rem;
    border-bottom: 1px solid var(--rand);
}
.kaartkop h2 {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tekst-zacht);
    font-weight: 600;
}

/* ---------- telefonische vragen ---------- */

.vraag {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    margin-bottom: .75rem;
}
.vraag:last-child { margin-bottom: 0; }

.vraagkop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .75rem;
    background: #fafbfc;
    border-bottom: 1px solid var(--rand);
    border-radius: var(--radius) var(--radius) 0 0;
    flex-wrap: wrap;
}
.vraagkop .etiket { margin-left: .35rem; }

.vraagtekst {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: .75rem;
}
@media (max-width: 720px) {
    .vraagtekst { grid-template-columns: 1fr; }
}

/* Opmaak uit de editor: dezelfde maten als de rest van de pagina. */
.rijketekst { font-size: .8125rem; margin-top: .15rem; }
.rijketekst p { margin: 0 0 .4rem; }
.rijketekst p:last-child { margin-bottom: 0; }
.rijketekst h2 { font-size: .9375rem; font-weight: 600; margin: .5rem 0 .25rem; }
.rijketekst h3 { font-size: .875rem; font-weight: 600; margin: .5rem 0 .25rem; }
.rijketekst ul, .rijketekst ol { margin: 0 0 .4rem 1.1rem; }
.rijketekst blockquote {
    margin: 0 0 .4rem;
    padding-left: .6rem;
    border-left: 2px solid var(--rand-sterk);
    color: var(--tekst-zacht);
}
.rijketekst pre { white-space: pre-wrap; font-size: .75rem; margin: 0 0 .4rem; }

/* ---------- rich-text velden (Quill) ---------- */

.dialoog.breed { width: min(860px, 94vw); }

.velden .veld { display: flex; flex-direction: column; gap: .2rem; font-size: .8125rem; }
.velden .veld > span { color: var(--tekst-zacht); font-size: .75rem; }
.velden .veld.breed { grid-column: 1 / -1; }

/* Een aanvinkregel binnen .velden blijft op één regel: .velden label zet
   flex-direction op column, en .velden input zet elke invoer op volle
   breedte - voor een aanvinkvakje klopt geen van beide. */
.velden label.schakelaar { flex-direction: row; align-items: center; justify-content: flex-start; }
.velden label.schakelaar input[type="checkbox"] { width: auto; flex: none; margin: 0; }

/* De editor krijgt dezelfde rand en radius als een gewoon invoerveld. */
.rte { background: var(--vlak); min-height: 120px; font-size: .8125rem; }
.ql-toolbar.ql-snow {
    border-color: var(--rand-sterk);
    border-radius: var(--radius) var(--radius) 0 0;
    background: #fafbfc;
    padding: .3rem .4rem;
}
.ql-container.ql-snow { border-color: var(--rand-sterk); border-radius: 0 0 var(--radius) var(--radius); }
.ql-editor { min-height: 120px; font-family: inherit; }
.ql-editor.ql-blank::before { color: var(--tekst-zacht); font-style: normal; left: 15px; }

/* ---------- aanvraagdetail ---------- */

/* In de dialog krijgen de kaarten geen schaduw en staan ze dichter op elkaar. */
.aanvraagdialoog { width: min(1100px, 96vw); }
.aanvraagdialoog .dialoog-inhoud { max-height: 80vh; background: var(--achtergrond); }
.aanvraagdialoog header .balk { display: flex; gap: .5rem; align-items: center; }
.aanvraagdetail > .kaart, .aanvraagdetail > .raster { margin-bottom: 1rem; }
.aanvraagdetail .inhoud h3 { font-size: .8125rem; font-weight: 600; margin: .75rem 0 .3rem; }
.aanvraagdetail .inhoud h3:first-child { margin-top: 0; }
.aanvraagdetail .inhoud + .inhoud { border-top: 1px solid var(--rand); }
.tekstblok { font-size: .8125rem; line-height: 1.5; word-break: break-word; }
.tekstblok p { margin: 0 0 .5rem; }