/* ===========================================================================
Online-MJOP :: stijlblad
EÊn bestand voor de publieke site en de toepassing.
Kleuren en maten staan als variabelen bovenaan.
=========================================================================== */

:root {
--inkt: #2E1F45;
--inkt-zacht: #4A3568;
--papier: #F8F5FB;
--wit: #FFFFFF;
--lijn: #E3DAEF;
--lijn-zacht: #F1ECF8;
--roest: #C69430;
--roest-donker:#A97B22;
--lila: #8B7BAE;
--lila-zacht: #EFEBF7;
--mos: #3F7C74;
--rood: #9B2C2C;
--rood-zacht: #FBEFEF;
--grijs: #6E6480;
--grijs-licht: #948AA3;

--radius: 10px;
--radius-groot: 20px;
--breedte: 1120px;
--kop: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

--schaduw: 0 1px 2px rgba(46, 31, 69, .05), 0 10px 26px rgba(46, 31, 69, .07);
--schaduw-groot: 0 4px 10px rgba(46, 31, 69, .07), 0 24px 56px rgba(46, 31, 69, .14);
--zwaai: .18s cubic-bezier(.2, .7, .3, 1);
}

/* --- Basis --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
margin: 0;
font-family: var(--kop);
font-size: 16px;
line-height: 1.6;
color: var(--inkt);
background: var(--papier);
-webkit-font-smoothing: antialiased;
}

::selection { background: var(--lila); color: var(--wit); }

h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.18; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

a { color: var(--inkt); text-decoration-color: var(--lijn); text-underline-offset: 3px; transition: color var(--zwaai); }
a:hover { text-decoration-color: var(--roest); }

img, svg { max-width: 100%; height: auto; display: block; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--breedte); margin: 0 auto; padding: 0 20px; }
.smal { max-width: 720px; }
.stil { color: var(--grijs); }
.klein { font-size: .85rem; }
.rechts { text-align: right; }
.midden { text-align: center; }
.nowrap { white-space: nowrap; }

.overslaan {
position: absolute; left: -9999px; top: 0;
background: var(--inkt); color: var(--papier); padding: 12px 18px; z-index: 200;
border-radius: 0 0 var(--radius) 0;
}
.overslaan:focus { left: 12px; top: 12px; border-radius: var(--radius); }

:focus-visible { outline: 2px solid var(--roest); outline-offset: 2px; border-radius: 4px; }

/* --- Knoppen ------------------------------------------------------------- */

.knop {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 20px;
font: inherit; font-size: .93rem; font-weight: 600;
border: 1px solid transparent; border-radius: var(--radius);
cursor: pointer; text-decoration: none;
transition: background-color var(--zwaai), border-color var(--zwaai), color var(--zwaai), transform var(--zwaai), box-shadow var(--zwaai);
}
.knop-primair { background: var(--inkt); color: var(--papier); box-shadow: var(--schaduw); }
.knop-primair:hover { background: var(--inkt-zacht); transform: translateY(-1px); box-shadow: var(--schaduw-groot); }
.knop-roest { background: var(--roest); color: #fff; box-shadow: var(--schaduw); }
.knop-roest:hover { background: var(--roest-donker); transform: translateY(-1px); box-shadow: var(--schaduw-groot); }
.knop-rand { background: var(--wit); color: var(--inkt); border-color: var(--lijn); }
.knop-rand:hover { border-color: var(--inkt); transform: translateY(-1px); }
.knop-gevaar { background: transparent; color: var(--rood); border-color: #DFBDBD; }
.knop-gevaar:hover { background: var(--rood-zacht); }
.knop-klein { padding: 7px 13px; font-size: .85rem; border-radius: calc(var(--radius) - 2px); }
.knop-breed { width: 100%; justify-content: center; }
.knop[disabled], .knop[aria-disabled="true"] { opacity: .5; pointer-events: none; transform: none !important; }

/* --- Formulieren --------------------------------------------------------- */

.veld { display: block; margin-bottom: 16px; }
.veld > span.label,
.label {
display: block; margin-bottom: 5px;
font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
color: var(--grijs);
}
.hint { display: block; margin-top: 5px; font-size: .8rem; color: var(--grijs-licht); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], input[type=url],
select, textarea {
width: 100%; padding: 10px 12px;
font: inherit; font-size: .93rem; color: var(--inkt);
background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
transition: border-color var(--zwaai), box-shadow var(--zwaai);
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--lila);
box-shadow: 0 0 0 3px var(--lila-zacht);
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--rood); }
textarea { min-height: 120px; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6480' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

fieldset { border: 1px solid var(--lijn); padding: 16px; margin: 0 0 18px; border-radius: var(--radius); background: var(--wit); }
legend { padding: 0 8px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); }

.rij-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rij-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 640px) { .rij-2, .rij-3 { grid-template-columns: 1fr; } }

.keuze { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; font-size: .92rem; }
.keuze input { width: auto; margin-top: 3px; flex-shrink: 0; }

/* --- Meldingen ----------------------------------------------------------- */

.melding {
display: flex; gap: 10px; align-items: flex-start;
padding: 12px 15px; margin-bottom: 16px;
font-size: .9rem; border: 1px solid var(--lijn); border-left-width: 3px;
background: var(--wit); border-radius: var(--radius);
box-shadow: var(--schaduw);
}
.melding-goed { border-left-color: var(--mos); }
.melding-fout { border-left-color: var(--rood); background: var(--rood-zacht); }
.melding-let-op { border-left-color: var(--roest); }
.melding-info { border-left-color: var(--inkt-zacht); }

.notitie {
padding: 12px 15px; margin: 18px 0;
font-size: .85rem; color: var(--grijs);
background: var(--lijn-zacht); border-left: 3px solid var(--lila);
border-radius: 0 var(--radius) var(--radius) 0;
}

/* --- Kop van de site ----------------------------------------------------- */

.sitekop {
position: sticky; top: 0; z-index: 50;
background: rgba(248, 245, 251, .90);
backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(46, 31, 69, .08);
}
.sitekop-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }

.merk { display: flex; align-items: center; gap: 10px; font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 1.2rem; text-decoration: none; letter-spacing: -.015em; }
.merk .streep { color: var(--roest); margin: 0 -10px; }

.hoofdnav { display: flex; align-items: center; gap: 2px; }
.hoofdnav a {
padding: 9px 13px; font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--grijs);
border-radius: var(--radius);
transition: background-color var(--zwaai), color var(--zwaai);
}
.hoofdnav a:hover, .hoofdnav a[aria-current="page"] { color: var(--inkt); background: var(--lijn-zacht); }

.kop-acties { display: flex; align-items: center; gap: 8px; }

.menuknop { display: none; background: var(--wit); border: 1px solid var(--lijn); padding: 8px 10px; cursor: pointer; border-radius: var(--radius); }

@media (max-width: 900px) {
.menuknop { display: inline-flex; }
.hoofdnav {
display: none; position: absolute; left: 0; right: 0; top: 68px;
flex-direction: column; align-items: stretch; gap: 2px;
background: var(--wit); border-bottom: 1px solid var(--lijn); padding: 10px;
box-shadow: var(--schaduw);
}
.hoofdnav.open { display: flex; }
.hoofdnav a { padding: 12px 14px; }
.kop-acties .knop-rand { display: none; }
}

/* --- Held ---------------------------------------------------------------- */

.raster {
background-image:
linear-gradient(rgba(139, 123, 174, .16) 1px, transparent 1px),
linear-gradient(90deg, rgba(139, 123, 174, .16) 1px, transparent 1px);
background-size: 28px 28px;
}

.held { padding: 80px 0 88px; }
.held-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 920px) { .held { padding: 52px 0 60px; } .held-raster { grid-template-columns: 1fr; gap: 40px; } }

.oogje {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
font-size: .73rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--grijs);
}
.oogje .stip { width: 6px; height: 6px; background: var(--roest); border-radius: 50%; }

.held h1 em { font-style: normal; color: var(--roest); }
.inleiding { font-size: 1.08rem; color: var(--grijs); max-width: 34rem; margin-bottom: 28px; }
.held-knoppen { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 22px; }
.held-voet { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--grijs-licht); }

.blauwdruk { background: linear-gradient(150deg, var(--inkt), var(--inkt-zacht)); padding: 24px; border-radius: var(--radius-groot); position: relative; box-shadow: var(--schaduw-groot); }
.zwevend {
position: absolute; display: flex; align-items: center; gap: 7px;
background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
padding: 8px 13px;
font-size: .76rem; box-shadow: var(--schaduw-groot);
}

/* --- Secties ------------------------------------------------------------- */

.sectie { padding: 76px 0; }
.sectie + .sectie { border-top: 1px solid var(--lijn); }
@media (max-width: 720px) { .sectie { padding: 50px 0; } }

.sectiekop { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.sectiekop .kicker {
font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
color: var(--roest); margin-bottom: 12px;
}
.sectiekop p { color: var(--grijs); margin: 0; }

.strook { background: var(--inkt); color: var(--papier); padding: 18px 0; }
.strook .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.strook .label { color: #A896C4; margin: 0 8px 0 0; }
.pil { border: 1px solid rgba(248, 245, 251, .25); border-radius: 999px; padding: 5px 13px; font-size: .82rem; }

/* --- Kaarten ------------------------------------------------------------- */

.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.kaart { background: var(--wit); padding: 28px 26px; border: 1px solid var(--lijn); border-radius: var(--radius-groot); box-shadow: var(--schaduw); transition: transform var(--zwaai), box-shadow var(--zwaai); }
.kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-groot); }
.kaart h3 { margin-bottom: 8px; }
.kaart p { margin: 0; font-size: .91rem; color: var(--grijs); }
.kaart .ikoon { color: var(--roest); margin-bottom: 14px; }

.stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }
.stap .nummer { font-family: var(--mono); font-size: 1.6rem; font-weight: 600; color: var(--lila); opacity: .55; margin-bottom: 8px; }
.stap h3 { margin-bottom: 6px; }
.stap p { font-size: .9rem; color: var(--grijs); margin: 0; }

.uitgelicht {
display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-groot); box-shadow: var(--schaduw); padding: 44px;
}
@media (max-width: 860px) { .uitgelicht { grid-template-columns: 1fr; gap: 32px; padding: 30px; } }

.staafdiagram { display: flex; align-items: flex-end; gap: 12px; height: 190px; }
.staafdiagram .staaf { flex: 1; background: var(--inkt); border-radius: 6px 6px 0 0; position: relative; min-height: 8px; }
.staafdiagram .staaf.accent { background: var(--roest); }
.staafdiagram .staaf span {
position: absolute; bottom: -22px; left: 0; right: 0; text-align: center;
font-family: var(--mono); font-size: .68rem; color: var(--grijs-licht);
}

.cta-band { background: linear-gradient(135deg, var(--inkt), var(--inkt-zacht)); color: var(--papier); padding: 68px 0; text-align: center; }
.cta-band h2 { color: var(--papier); }
.cta-band p { color: #CFC5DE; margin-bottom: 24px; }

/* --- Voettekst ----------------------------------------------------------- */

.sitevoet { background: var(--wit); border-top: 1px solid var(--lijn); padding: 48px 0 24px; font-size: .88rem; }
.voet-raster { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 760px) { .voet-raster { grid-template-columns: 1fr 1fr; gap: 26px; } }
.voet-kolom h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--grijs); margin-bottom: 12px; }
.voet-kolom a { display: block; padding: 3px 0; color: var(--grijs); text-decoration: none; }
.voet-kolom a:hover { color: var(--inkt); text-decoration: underline; }
.voet-onder {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--lijn);
font-size: .8rem; color: var(--grijs-licht);
}

/* --- Toepassing: schil --------------------------------------------------- */

.appkop { background: var(--inkt); color: var(--papier); box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.appkop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 62px; }
.appkop a { color: var(--papier); text-decoration: none; }
.appkop .org { font-size: .8rem; color: #B4A5CE; }

.apptabs { background: var(--inkt-zacht); }
.apptabs .wrap { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.apptabs .wrap::-webkit-scrollbar { display: none; }
.apptabs a {
padding: 12px 15px; font-size: .88rem; font-weight: 500; white-space: nowrap; text-decoration: none;
color: #CFC5DE; border-bottom: 2px solid transparent;
transition: color var(--zwaai);
}
.apptabs a:hover { color: #fff; }
.apptabs a[aria-current="page"] { color: #fff; border-bottom-color: var(--roest); }

.appromp { padding: 30px 0 64px; }
.paginakop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.paginakop h1 { font-size: 1.65rem; margin: 0; }
.paginakop .stil { margin: 4px 0 0; }

.kruimels { font-size: .82rem; color: var(--grijs); margin-bottom: 12px; }
.kruimels a { color: var(--grijs); }

/* --- Panelen en tabellen ------------------------------------------------- */

.paneel { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-groot); box-shadow: var(--schaduw); margin-bottom: 22px; overflow: hidden; }
.paneel-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--lijn); }
.paneel-kop h2, .paneel-kop h3 { margin: 0; font-size: 1rem; }
.paneel-romp { padding: 22px; }
.paneel-romp > :last-child { margin-bottom: 0; }

.tabelomhulsel { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--lijn-zacht); vertical-align: top; }
table.data thead th {
font-size: .71rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
color: var(--grijs); background: var(--lijn-zacht); border-bottom: 1px solid var(--lijn); white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background-color var(--zwaai); }
table.data tbody tr:hover { background: var(--papier); }
table.data td.getal, table.data th.getal { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tfoot td { padding: 13px 16px; font-weight: 600; border-top: 2px solid var(--lijn); background: var(--papier); }
table.data tr.verschoven td { background: var(--rood-zacht); }
table.data tr.uitgevoerd td { color: var(--grijs-licht); }
table.data tr.uitgevoerd td:first-child { text-decoration: line-through; }

/* --- Kengetallen --------------------------------------------------------- */

.kengetallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kengetal { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw); padding: 19px 21px; }
.kengetal .naam { font-size: .71rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); margin-bottom: 6px; }
.kengetal .waarde { font-family: var(--mono); font-size: 1.45rem; font-weight: 600; line-height: 1.15; }
.kengetal .bij { font-size: .78rem; color: var(--grijs-licht); margin-top: 4px; }
.kengetal.let-op .waarde { color: var(--rood); }
.kengetal.goed .waarde { color: var(--mos); }

/* --- Merktekens ---------------------------------------------------------- */

.merkteken {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px; font-size: .73rem; font-weight: 600;
border: 1px solid var(--lijn); border-radius: 999px; white-space: nowrap;
}
.merkteken-rood { color: var(--rood); border-color: #E3C2C2; background: var(--rood-zacht); }
.merkteken-mos { color: var(--mos); border-color: #BFD8D4; background: #F0F7F6; }
.merkteken-roest { color: var(--roest-donker); border-color: #E8D5A8; background: #FCF6E9; }
.merkteken-grijs { color: var(--grijs); background: var(--papier); }

.conditie { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; }
.conditie .bol { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* --- Jaarbalk ------------------------------------------------------------ */

.jaarblok { border: 1px solid var(--lijn); background: var(--wit); border-radius: var(--radius-groot); box-shadow: var(--schaduw); margin-bottom: 14px; overflow: hidden; }
.jaarblok > summary {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 15px 20px; cursor: pointer; list-style: none; user-select: none;
transition: background-color var(--zwaai);
}
.jaarblok > summary::-webkit-details-marker { display: none; }
.jaarblok > summary:hover { background: var(--papier); }
.jaarblok[open] > summary { border-bottom: 1px solid var(--lijn); }
.jaarblok .jaartal { font-family: var(--mono); font-size: 1.15rem; font-weight: 600; }
.jaarblok .som { font-family: var(--mono); font-weight: 600; }

.balk { height: 6px; background: var(--lijn-zacht); border-radius: 999px; overflow: hidden; }
.balk > i { display: block; height: 100%; background: var(--inkt); border-radius: 999px; }
.balk > i.accent { background: var(--roest); }
.balk > i.waarschuwing { background: var(--rood); }

/* --- Leeg ---------------------------------------------------------------- */

.leeg { text-align: center; padding: 56px 24px; color: var(--grijs); }
.leeg h3 { color: var(--inkt); }
.leeg p { max-width: 30rem; margin: 0 auto 18px; }

/* --- Inlogpagina --------------------------------------------------------- */

.toegang { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 68px); }
@media (max-width: 900px) { .toegang { grid-template-columns: 1fr; min-height: 0; } .toegang .zijkant { display: none; } }
.toegang .zijkant { background: linear-gradient(160deg, var(--inkt), var(--inkt-zacht)); color: var(--papier); padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.toegang .zijkant h2 { color: var(--papier); }
.toegang .zijkant ul { list-style: none; padding: 0; margin: 24px 0 0; }
.toegang .zijkant li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 13px; font-size: .92rem; color: #DDD3EC; }
.toegang .zijkant li .vink { color: var(--roest); flex-shrink: 0; margin-top: 2px; }
.toegang .formulier { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.toegang .formulier > div { width: 100%; max-width: 390px; }

.tabstrip { display: flex; border-bottom: 1px solid var(--lijn); margin-bottom: 24px; }
.tabstrip a { padding: 10px 14px; font-size: .92rem; font-weight: 500; text-decoration: none; color: var(--grijs-licht); border-bottom: 2px solid transparent; transition: color var(--zwaai); }
.tabstrip a[aria-current="page"] { color: var(--inkt); border-bottom-color: var(--roest); }

/* --- Cookiemelding ------------------------------------------------------- */

.cookiebalk {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100;
max-width: 560px; margin: 0 auto; padding: 22px 24px;
background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-groot); box-shadow: var(--schaduw-groot);
}
.cookiebalk h2 { font-size: 1rem; margin-bottom: 8px; }
.cookiebalk p { font-size: .87rem; color: var(--grijs); margin-bottom: 14px; }
.cookiebalk .knoppen { display: flex; flex-wrap: wrap; gap: 9px; }
.cookiebalk .fijn { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.cookiebalk[hidden] { display: none; }

/* --- Juridische teksten -------------------------------------------------- */

.juridisch { max-width: 44rem; }
.juridisch h2 { font-size: 1.25rem; margin-top: 2em; padding-top: .6em; border-top: 1px solid var(--lijn); }
.juridisch h3 { font-size: 1rem; margin-top: 1.6em; }
.juridisch ul, .juridisch ol { padding-left: 1.3em; }
.juridisch li { margin-bottom: .45em; }
.juridisch table.data { margin: 1.2em 0; }
.juridisch .bijgewerkt { font-size: .84rem; color: var(--grijs-licht); }

/* --- Afdrukken ----------------------------------------------------------- */

@media print {
.sitekop, .apptabs, .sitevoet, .cookiebalk, .knop, .menuknop, .paginakop .knop { display: none !important; }
body { background: #fff; font-size: 11pt; }
.paneel, .kaart, table.data { border-color: #999; box-shadow: none; }
.appromp { padding: 0; }
.jaarblok { break-inside: avoid; }
table.data thead { display: table-header-group; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ===========================================================================
   Toepassing: jaargrafiek, ruimtetegels, gebouwbalk, bulkacties, kaartweergave
   =========================================================================== */

/* --- Grafiek op het overzicht ------------------------------------------ */
.jaargrafiek { display: flex; align-items: stretch; gap: 8px; height: 210px; }
.jaargrafiek .kolom {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px; text-decoration: none; border-radius: var(--radius); padding: 2px 0 4px;
}
.jaargrafiek .kolom:hover { background: var(--lila-zacht); }
.jaargrafiek .bedrag { font-family: var(--mono); font-size: .68rem; color: var(--grijs); white-space: nowrap; }
.jaargrafiek .staafvak { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.jaargrafiek .staaf { display: block; width: 100%; min-height: 3px; background: var(--inkt); border-radius: 3px 3px 0 0; transition: background-color var(--zwaai); }
.jaargrafiek .kolom.dit-jaar .staaf { background: var(--roest); }
.jaargrafiek .kolom:hover .staaf { background: var(--inkt-zacht); }
.jaargrafiek .kolom.dit-jaar:hover .staaf { background: var(--roest-donker); }
.jaargrafiek .jaarlabel { font-size: .75rem; color: var(--grijs); }
@media (max-width: 520px) { .jaargrafiek { gap: 4px; } .jaargrafiek .bedrag { font-size: .58rem; } }

/* --- Ruimtetegels op de gebouwpagina ------------------------------------ */
.tegelkop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 22px 0 10px; }
.tegelstip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 4px 0 12px; vertical-align: -1px; }
.tegelstip.tegel-rood { background: var(--rood); }
.tegelstip.tegel-oranje { background: var(--roest); }
.tegelstip.tegel-groen { background: var(--mos); }
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tegel {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-decoration: none; color: var(--inkt);
  background: var(--wit); border: 1px solid var(--lijn); border-left-width: 5px; border-radius: var(--radius);
  box-shadow: var(--schaduw); transition: transform var(--zwaai), box-shadow var(--zwaai);
}
.tegel:hover { transform: translateY(-1px); box-shadow: var(--schaduw-groot); }
.tegel-rood { border-left-color: var(--rood); }
.tegel-oranje { border-left-color: var(--roest); }
.tegel-groen { border-left-color: var(--mos); }
.tegel-naam { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.tegel-regel { display: flex; flex-direction: column; gap: 1px; font-size: .78rem; }
.tegel-rood .tegel-regel strong { color: var(--rood); }
.tegel-onder { font-size: .72rem; color: var(--grijs); margin-top: auto; }

/* --- Balk met jaarkeuze, springen en filter ------------------------------ */
.gebouwbalk {
  position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  background: rgba(248, 245, 251, .95); backdrop-filter: blur(8px);
  border: 1px solid var(--lijn); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 18px;
  box-shadow: var(--schaduw);
}
.gebouwbalk-veld { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.gebouwbalk select { width: auto; padding: 6px 10px; font-size: .85rem; }
.gebouwbalk form { margin: 0; }
.bulkkeuze { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bulkkeuze input { width: auto; margin: 0; }
.paneel[id^="ruimte-"] { scroll-margin-top: 70px; }
.paneel.opgelicht { box-shadow: 0 0 0 3px var(--roest); }
.paneel.verborgen, tr.verborgen { display: none; }

/* --- In- en uitklappen van een ruimte ------------------------------------ */
.inklap {
  display: inline-block; width: 26px; height: 26px; margin: 0 6px 0 0; padding: 0; vertical-align: middle;
  background: transparent; border: 1px solid var(--lijn); border-radius: 6px; cursor: pointer; position: relative;
}
.inklap:hover { border-color: var(--inkt); }
.inklap::before {
  content: ''; position: absolute; left: 8px; top: 7px; width: 7px; height: 7px;
  border-right: 2px solid var(--inkt); border-bottom: 2px solid var(--inkt); transform: rotate(45deg); transition: transform var(--zwaai);
}
.paneel.ingeklapt .inklap::before { transform: rotate(-45deg); top: 9px; }
.paneel.ingeklapt > .tabelomhulsel, .paneel.ingeklapt > .paneel-romp { display: none; }
.paneel.ingeklapt > .paneel-kop { border-bottom: none; }

/* --- Snel aanpassen in de tabel ------------------------------------------ */
td.snel { cursor: text; }
td.snel:hover { background: var(--lila-zacht); box-shadow: inset 0 -2px 0 var(--lila); }
td.snel.ontbreekt { color: var(--rood); }
td.snel.bezig { background: var(--lila-zacht); }
td.snel.opgeslagen { background: #E4F1EE; }
td.snel.fout { background: var(--rood-zacht); }
input.snelveld { width: 100%; min-width: 5.5rem; max-width: 9rem; padding: 5px 8px; font: inherit; text-align: right; }

/* --- Meerdere posten tegelijk afhandelen --------------------------------- */
.bulkbalk { padding: 14px 22px; background: var(--lila-zacht); border-bottom: 1px solid var(--lijn); }
.bulkbalk[hidden] { display: none; }
.bulkbalk-kop { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; }
.bulkbalk-acties { display: flex; flex-wrap: wrap; gap: 14px; }
.bulkgroep { flex: 1; min-width: 280px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0; padding: 12px 14px; background: var(--wit); }
.bulkgroep legend { font-size: .78rem; font-weight: 600; padding: 0 6px; }
.bulkgroep label { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.bulkgroep label.bulkkeuze { flex-direction: row; align-items: center; }
.bulkgroep input[type="date"], .bulkgroep input[type="number"], .bulkgroep input[type="text"] { padding: 6px 9px; font-size: .85rem; }

/* --- Tabellen als kaarten op smalle schermen ----------------------------- */
@media (max-width: 720px) {
  .tabelomhulsel { overflow-x: visible; }
  table.data.tabelkaart, table.data.tabelkaart tbody, table.data.tabelkaart tr, table.data.tabelkaart td { display: block; width: 100%; }
  table.data.tabelkaart thead { position: absolute; left: -9999px; }
  table.data.tabelkaart tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--lijn); }
  table.data.tabelkaart tbody tr:last-child { border-bottom: none; }
  table.data.tabelkaart td { border: none; padding: 3px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; text-align: right; }
  table.data.tabelkaart td::before { content: attr(data-label); flex: none; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--grijs); text-align: left; }
  table.data.tabelkaart td[data-label=""]::before, table.data.tabelkaart td:not([data-label])::before { content: none; }
  table.data.tabelkaart td[data-label="Onderdeel"] { display: block; text-align: left; font-weight: 600; padding-bottom: 6px; }
  table.data.tabelkaart td[data-label="Onderdeel"]::before { display: none; }
  table.data.tabelkaart td.rechts { justify-content: flex-end; padding-top: 8px; }
  table.data.tabelkaart td.kaart-vink { justify-content: flex-start; padding-bottom: 6px; }
  .gebouwbalk { position: static; }
  .bulkbalk { padding: 12px 16px; }
}

/* --- Groepskoppen boven de ruimtetegels --------------------------------- */
.tegels .tegelgroep { grid-column: 1 / -1; margin: 8px 0 -2px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--grijs); }
.tegels .tegelgroep:first-child { margin-top: 0; }

/* ===========================================================================
   Toepassing v2: zijbalk, topbalk, kaartenlook en donkere modus
   Standaard is de toepassing donker; de gebruiker kan kiezen via het accountmenu.
   =========================================================================== */

:root {
  --zijbalk: #FFFFFF;
  --boven: rgba(248, 245, 251, .88);
  --invoer: #FFFFFF;
  --rij-hover: #F8F5FB;
  --primair: #4A3568;
  --primair-hover: #2E1F45;
  --zijbalk-breedte: 248px;
  --boven-hoogte: 64px;
}

/* --- Schil --------------------------------------------------------------- */

body.app { background: var(--papier); }
.appschil { display: flex; min-height: 100vh; --radius-groot: 14px; }
.appkolom { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.zijbalk {
  width: var(--zijbalk-breedte); flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--zijbalk); border-right: 1px solid var(--lijn); z-index: 60;
}
.zijbalk-kop { display: flex; align-items: center; height: var(--boven-hoogte); padding: 0 20px; border-bottom: 1px solid var(--lijn); flex: none; }
.zijbalk-kop .merk { font-size: 1.1rem; color: var(--inkt); }
.zijbalk-kop .merk > span { white-space: nowrap; }
.zijbalk-kop .merk .streep { margin: 0 1px; }
html[data-theme="light"] .zijbalk-kop .merk rect { fill: #2E1F45; }
html[data-theme="light"] .zijbalk-kop .merk path { stroke: #F8F5FB; }

.zijbalk-nav { flex: 1; padding: 14px 12px 8px; }
.zijbalk-groep { margin-bottom: 16px; }
.zijbalk-label {
  padding: 0 12px; margin-bottom: 6px;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--grijs-licht);
}
.zijbalk a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 2px;
  font-size: .92rem; font-weight: 500; text-decoration: none; color: var(--grijs);
  border-radius: var(--radius); box-shadow: inset 3px 0 0 transparent;
  transition: background-color var(--zwaai), color var(--zwaai), box-shadow var(--zwaai);
}
.zijbalk a .ikoon { flex: none; opacity: .9; }
.zijbalk a:hover { background: var(--lila-zacht); color: var(--inkt); }
.zijbalk a[aria-current="page"] { background: var(--lila-zacht); color: var(--inkt); box-shadow: inset 3px 0 0 var(--primair); }
.zijbalk a[aria-current="page"] .ikoon { color: var(--primair); opacity: 1; }
.zijbalk-voet { padding: 10px 12px 16px; border-top: 1px solid var(--lijn); flex: none; }
.zijbalk-scrim { display: none; }

/* --- Topbalk ------------------------------------------------------------- */

.boven {
  position: sticky; top: 0; z-index: 50; height: var(--boven-hoogte); flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px;
  background: var(--boven); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}
.boven-links, .boven-rechts { display: flex; align-items: center; gap: 12px; min-width: 0; }
.boven-org { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 600; color: var(--inkt); min-width: 0; }
.boven-org .ikoon { color: var(--grijs); flex: none; }
.boven-org > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boven-menuknop {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  background: transparent; color: var(--inkt); border: 1px solid var(--lijn); border-radius: var(--radius); cursor: pointer;
}
.boven-menuknop:hover { background: var(--lila-zacht); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: var(--primair); border-radius: 50%; user-select: none;
}
.avatar-groot { width: 44px; height: 44px; font-size: .95rem; flex: none; }

details.gebruiker { position: relative; }
details.gebruiker > summary { list-style: none; cursor: pointer; border-radius: 50%; display: block; }
details.gebruiker > summary::-webkit-details-marker { display: none; }
details.gebruiker > summary:hover .avatar, details.gebruiker[open] > summary .avatar { box-shadow: 0 0 0 3px var(--lila-zacht), 0 0 0 4px var(--lila); }
.gebruiker-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 300px; z-index: 70;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-groot); box-shadow: var(--schaduw-groot);
  padding: 6px; font-size: .9rem;
}
.gebruiker-kop { display: flex; gap: 12px; align-items: center; padding: 12px 12px 14px; }
.gebruiker-gegevens { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gebruiker-gegevens strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gebruiker-email { font-size: .8rem; color: var(--grijs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rolbadge {
  align-self: flex-start; margin-top: 4px; padding: 1px 9px; font-size: .7rem; font-weight: 600;
  color: var(--inkt); background: var(--lila-zacht); border-radius: 999px;
}
.gebruiker-sectie { padding: 12px; border-top: 1px solid var(--lijn); }
.gebruiker-sectie .zijbalk-label { padding: 0; margin-bottom: 8px; }
.gebruiker-links { padding: 6px; }
.gebruiker-links a {
  display: flex; align-items: center; gap: 12px; padding: 9px 8px; text-decoration: none; color: var(--inkt); font-weight: 500;
  border-radius: calc(var(--radius) - 2px);
}
.gebruiker-links a:hover { background: var(--lila-zacht); }
.gebruiker-links .ikoon { color: var(--grijs); }

.themakeuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--radius); }
.themakeuze button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px;
  font: inherit; font-size: .76rem; font-weight: 600; color: var(--grijs);
  background: transparent; border: 1px solid transparent; border-radius: calc(var(--radius) - 3px); cursor: pointer;
  transition: background-color var(--zwaai), color var(--zwaai);
}
.themakeuze button:hover { color: var(--inkt); }
.themakeuze button[aria-pressed="true"] { color: var(--inkt); background: var(--wit); border-color: var(--lijn); box-shadow: var(--schaduw); }

/* --- Inhoud -------------------------------------------------------------- */

.appromp { flex: 1; padding: 32px 0 56px; }
.appromp > .wrap { max-width: 1280px; padding: 0 32px; }
.paginakop h1 { font-size: 1.75rem; }
.appvoet {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 18px 32px;
  border-top: 1px solid var(--lijn); font-size: .8rem; color: var(--grijs-licht);
}
.appvoet a { color: var(--grijs); text-decoration: none; margin-left: 16px; }
.appvoet a:first-child { margin-left: 0; }
.appvoet a:hover { color: var(--inkt); text-decoration: underline; }

/* Kaarten en tegels: rustiger, met haarlijn in plaats van zware schaduw */
.appschil .paneel, .appschil .jaarblok { box-shadow: none; }
.appschil .paneel-kop { padding: 16px 22px; }
.appschil .kengetallen { gap: 14px; }
.appschil .kengetal { border-radius: var(--radius-groot); box-shadow: none; padding: 18px 20px; }
.appschil .kengetal .waarde { font-size: 1.7rem; }
.appschil .tegel { box-shadow: none; }
.appschil .tegel:hover { border-color: var(--lila); box-shadow: none; }
.appschil table.data tbody tr:hover { background: var(--rij-hover); }
.appschil table.data tfoot td { background: var(--lijn-zacht); }
.appschil .gebouwbalk { background: var(--boven); top: calc(var(--boven-hoogte) + 8px); box-shadow: none; }
.appschil .paneel[id^="ruimte-"] { scroll-margin-top: 140px; }
html { scroll-padding-top: 140px; }
.appschil input[type=text], .appschil input[type=email], .appschil input[type=password], .appschil input[type=number],
.appschil input[type=date], .appschil input[type=search], .appschil input[type=tel], .appschil input[type=url],
.appschil select, .appschil textarea { background-color: var(--invoer); }
.appschil fieldset { background: transparent; }
.appschil .bulkgroep { background: var(--wit); }

/* --- Smalle schermen: zijbalk schuift over de pagina --------------------- */

@media (max-width: 960px) {
  .zijbalk {
    position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-102%);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1); box-shadow: var(--schaduw-groot);
  }
  .zijbalk.open { transform: none; }
  .zijbalk-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(8, 5, 14, .55); }
  body.zijbalk-open .zijbalk-scrim { display: block; }
  body.zijbalk-open { overflow: hidden; }
  .boven { padding: 0 16px; }
  .boven-menuknop { display: inline-flex; }
  .appromp > .wrap { padding: 0 16px; }
  .appromp { padding-top: 22px; }
  .appvoet { padding: 16px; }
  .gebruiker-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--boven-hoogte) + 6px); width: auto; }
}

/* --- Donkere modus ------------------------------------------------------- */

@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --inkt: #EDE8F7;
    --inkt-zacht: #CFC6E6;
    --papier: #0E0A17;
    --wit: #181225;
    --lijn: #2B2240;
    --lijn-zacht: #21192F;
    --lila: #9A87CC;
    --lila-zacht: #271E40;
    --roest: #D9A441;
    --roest-donker: #E8B955;
    --mos: #4DB6A8;
    --rood: #F27E7B;
    --rood-zacht: #2E171B;
    --grijs: #A89DBF;
    --grijs-licht: #8F84AB;
    --schaduw: 0 1px 2px rgba(0, 0, 0, .35);
    --schaduw-groot: 0 12px 34px rgba(0, 0, 0, .55);
    --zijbalk: #120D1E;
    --boven: rgba(14, 10, 23, .86);
    --invoer: #120D1E;
    --rij-hover: rgba(255, 255, 255, .035);
    --primair: #7C5CD6;
    --primair-hover: #8E72E3;
  }
  html[data-theme="dark"] .knop-primair { background: var(--primair); color: #fff; }
  html[data-theme="dark"] .knop-primair:hover { background: var(--primair-hover); }
  html[data-theme="dark"] .knop-roest { color: #1B1226; }
  html[data-theme="dark"] .knop-rand { background: transparent; }
  html[data-theme="dark"] .knop-rand:hover { border-color: var(--lila); }
  html[data-theme="dark"] .knop-gevaar { border-color: #5B2C33; }
  html[data-theme="dark"] .knop-gevaar:hover { background: var(--rood-zacht); }
  html[data-theme="dark"] .overslaan { background: var(--wit); color: var(--inkt); }
  html[data-theme="dark"] .balk > i { background: var(--lila); }
  html[data-theme="dark"] .balk > i.accent { background: var(--roest); }
  html[data-theme="dark"] .balk > i.waarschuwing { background: var(--rood); }
  html[data-theme="dark"] .jaargrafiek .staaf { background: var(--lila); }
  html[data-theme="dark"] .jaargrafiek .kolom:hover .staaf { background: var(--inkt-zacht); }
  html[data-theme="dark"] .jaargrafiek .kolom.dit-jaar .staaf { background: var(--roest); }
  html[data-theme="dark"] .jaargrafiek .kolom.dit-jaar:hover .staaf { background: var(--roest-donker); }
  html[data-theme="dark"] .staafdiagram .staaf { background: var(--lila); }
  html[data-theme="dark"] .merkteken-rood { border-color: #5B2C33; background: rgba(242, 126, 123, .12); }
  html[data-theme="dark"] .merkteken-mos { border-color: #24524C; background: rgba(77, 182, 168, .13); }
  html[data-theme="dark"] .merkteken-roest { border-color: #5E4A1E; background: rgba(217, 164, 65, .13); }
  html[data-theme="dark"] .merkteken-grijs { background: var(--lijn-zacht); }
  html[data-theme="dark"] td.snel.opgeslagen { background: rgba(77, 182, 168, .16); }
  html[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A89DBF' stroke-width='1.6'/%3E%3C/svg%3E");
  }
  html[data-theme="dark"] .melding-fout { background: var(--rood-zacht); }
  html[data-theme="dark"] .notitie { background: var(--lijn-zacht); }
  html[data-theme="dark"] .zijbalk-kop .merk { color: var(--inkt); }

  /* Vaste kleuren die in pagina's als stijlregel staan, zonder de pagina's zelf aan te passen */
  html[data-theme="dark"] [style*="#EEF4FB" i] { background: rgba(110, 160, 230, .14) !important; color: #9CC1F2 !important; border-color: rgba(110, 160, 230, .35) !important; }
  html[data-theme="dark"] [style*="background:#fff" i], html[data-theme="dark"] [style*="background: #fff" i] { background: var(--wit) !important; color: var(--inkt) !important; }
  html[data-theme="dark"] [style*="#ddd" i] { border-color: var(--lijn) !important; }
  html[data-theme="dark"] [style*="#faf8fc" i] { background: var(--lijn-zacht) !important; }
  html[data-theme="dark"] [style*="background:var(--inkt)" i] { background: var(--primair) !important; color: #fff !important; border-color: var(--primair) !important; }
}

/* Afdrukken: altijd licht, zonder menu */
@media print {
  .zijbalk, .boven, .zijbalk-scrim, .appvoet { display: none !important; }
  .appschil, .appkolom { display: block; }
}

/* ===========================================================================
   Zoeken, tickets en kleine aanvullingen op de toepassing
   =========================================================================== */

/* --- Zoekveld in de topbalk ---------------------------------------------- */
.zoek { position: relative; flex: 1; max-width: 460px; margin: 0 auto; }
.zoek > .ikoon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--grijs-licht); pointer-events: none; }
.zoek input[type=search] {
  width: 100%; padding: 9px 62px 9px 38px; font-size: .9rem; border-radius: var(--radius);
  background: var(--invoer); border: 1px solid var(--lijn); color: var(--inkt);
  -webkit-appearance: none; appearance: none;
}
.zoek input[type=search]::-webkit-search-cancel-button { display: none; }
.zoek input[type=search]::placeholder { color: var(--grijs-licht); }
.zoek kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 600 .68rem var(--kop); color: var(--grijs); letter-spacing: .02em;
  padding: 2px 7px; border: 1px solid var(--lijn); border-radius: 6px; background: var(--papier); pointer-events: none;
}
.zoek input:focus + kbd { display: none; }
.zoekresultaten {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 80; max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius-groot); box-shadow: var(--schaduw-groot); padding: 6px;
}
.zoekresultaten[hidden] { display: none; }
.zoek-groep { padding: 10px 10px 4px; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--grijs-licht); }
.zoekresultaten a, .zoek-leeg {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: calc(var(--radius) - 2px);
  text-decoration: none; color: var(--inkt); font-size: .9rem;
}
.zoekresultaten a span { font-size: .78rem; color: var(--grijs); }
.zoekresultaten a:hover, .zoekresultaten a.actief { background: var(--lila-zacht); }
.zoek-leeg { color: var(--grijs); }
.zoekresultaten a.zoek-alles { margin-top: 4px; border-top: 1px solid var(--lijn); border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); font-weight: 600; color: var(--primair); }
.zoeklijst a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 11px 22px; text-decoration: none; border-bottom: 1px solid var(--lijn-zacht); color: var(--inkt); }
.zoeklijst a:last-child { border-bottom: none; }
.zoeklijst a:hover { background: var(--rij-hover); }
@media (max-width: 720px) {
  .boven-org > span { display: none; }
  .zoek kbd { display: none; }
  .zoek input[type=search] { padding-right: 12px; }
}

/* --- Teller in het menu -------------------------------------------------- */
.teller {
  margin-left: auto; min-width: 22px; padding: 1px 7px; text-align: center;
  font-size: .72rem; font-weight: 700; line-height: 1.5; color: #1B1226; background: var(--roest); border-radius: 999px;
}

/* --- Tickets: gesprek ---------------------------------------------------- */
.draad { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 0 22px; }
.bubbel { padding: 14px 18px; border: 1px solid var(--lijn); border-radius: var(--radius-groot); background: var(--wit); max-width: 92%; }
.bubbel-klant { align-self: flex-end; background: var(--lila-zacht); }
.bubbel-beheer { align-self: flex-start; border-left: 3px solid var(--roest); }
.bubbel-intern { align-self: stretch; max-width: 100%; border-style: dashed; background: transparent; }
.bubbel-kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin-bottom: 6px; font-size: .88rem; }
.bubbel-tekst { white-space: pre-line; overflow-wrap: anywhere; font-size: .94rem; }
html[data-theme="dark"] .teller { color: #1B1226; }

/* Telefoon: brede tabellen, vingervriendelijke links, compactere cookiemelding */
@media (max-width: 720px) { .juridisch table.data { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } }
@media (pointer: coarse) {
  td.nowrap a, td.klein a, div.klein a, .kruimels a, .appvoet-links a { display: inline-block; padding: 10px 6px; margin: -10px -6px; }
  td a:not(.knop) { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 600px) {
  .cookiebalk { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; }
  .cookiebalk h2 { font-size: .95rem; margin-bottom: 4px; }
  .cookiebalk p { font-size: .8rem; margin-bottom: 10px; line-height: 1.45; }
}

/* Financieel: rij van het huidige jaar leesbaar in licht en donker (overschrijft inline crèmekleur) */
table.data tbody tr[style*="FCF6E9"] { background: rgba(154, 135, 204, .16) !important; }
table.data tbody tr[style*="FCF6E9"] td:first-child { box-shadow: inset 3px 0 0 var(--lila); }

/* Bijlagen: knop en uploadformulier duidelijk, ook in de donkere modus */
html .bijlage-knop { background: var(--lila-zacht); color: var(--inkt); border-color: var(--lijn); opacity: .85; padding: 2px 10px; }
html .bijlage-knop:hover, html .bijlage-knop:focus-visible { opacity: 1; border-color: var(--lila); }
html .bijlage-knop:not(.heeft)::after { content: "Bijlage"; font-weight: 500; }
html .bijlage-knop.heeft { opacity: 1; border-color: var(--lila); }
.bijlage-kies { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.bijlage-kies input[type=file] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.bijlage-kies:focus-within .knop { outline: 2px solid var(--lila); outline-offset: 2px; }

/* Kolomkoppen: er staat bij of het bedrag met of zonder btw is */
.kop-sub { display: block; font-size: .72em; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }