/* =====================================================================
   Navstar Team — stijlcontract v1.0
   Opzet van de DistriLink EDI-portal (navy zijbalk, zachte kaarten,
   verloopknoppen, Montserrat-koppen) in de Navstar-kleuren:
   helderblauw #0088ca, donker #006697, licht #eff6f9, oranje #ff9421.
   ===================================================================== */
:root{
  --navy:#0b2740; --diep:#006697; --blauw:#0088ca; --helder:#33a9e0;
  --lichtblauw:#e3f2fb; --grijsblauw:#5b7389; --oranje:#ff9421; --oranje-tint:#fff1e3;
  --verloop:linear-gradient(135deg,#006697 0%,#0088ca 55%,#33a9e0 100%);
  --wit:#ffffff; --inkt:#1b2a38; --stil-k:#52677a; --vaag:#92a4b4;
  --rand:#dbe6ee; --achter:#eff6f9; --rij:#edf3f7; --hover:#f3f9fd;
  --goed:#17a36b; --goed-tint:#e6f7ef;
  --letop:#c47d0e; --letop-fel:#f3a72b; --letop-tint:#fdf3dd;
  --fout:#e5484d; --fout-tint:#fdebec;
  --paars:#6b4fd8; --paars-tint:#eeeafb;
  --font:Verdana,"Segoe UI",Arial,sans-serif;
  --kop:"Montserrat","Segoe UI",Arial,sans-serif;
  --radius:10px; --radius-kaart:16px;
  --schaduw:0 12px 34px rgba(0,102,151,.07);
  --schaduw-zwaar:0 18px 44px rgba(0,102,151,.14);
  --ring:0 0 0 3px rgba(0,136,202,.2);
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --topbalkhoogte:72px;
}

/* ---------- basis ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;display:flex;font:14px/1.6 var(--font);color:var(--inkt);background:var(--achter);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1{margin:0;font:800 32px/1.15 var(--kop);color:var(--navy);letter-spacing:-.015em}
h2{margin:0;font:800 17px/1.25 var(--kop);color:var(--navy);letter-spacing:-.01em}
h3{margin:0;font:700 14.5px/1.3 var(--kop);color:var(--navy)}
p{margin:0}
a{color:var(--blauw);text-decoration:none}
a:hover{color:var(--diep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--ring)}
::selection{background:var(--lichtblauw)}
svg{flex:none}
[hidden]{display:none!important}
.label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil-k)}
.num{text-align:right;font-variant-numeric:tabular-nums lining-nums}
.stil{color:var(--stil-k)}
.vaag{color:var(--vaag)}
.klein{font-size:12.5px}
.groen{color:var(--goed)}
.oranje{color:var(--letop)}
.rood{color:var(--fout)}
.blauw{color:var(--blauw)}
.paars{color:var(--paars)}
.vet{font-weight:700}
.stip{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin:0 6px 2px 0;background:var(--vaag)}
.stip--goed{background:var(--goed)}.stip--letop{background:var(--letop-fel)}.stip--fout{background:var(--fout)}
.stip--blauw{background:var(--blauw)}.stip--paars{background:var(--paars)}.stip--grijs{background:var(--vaag)}
.stip--oranje{background:var(--oranje)}.stip--rood{background:var(--fout)}.stip--groen{background:var(--goed)}.stip--rood{background:var(--fout)}.stip--groen{background:var(--goed)}
.hulp{display:inline-flex;color:var(--vaag);cursor:pointer;vertical-align:middle;margin-left:4px}
.hulp:hover{color:var(--blauw)}
.hulp svg{width:17px;height:17px}
.hulp-pop{position:absolute;z-index:120;max-width:320px;background:var(--wit);border:1px solid var(--rand);
  border-radius:12px;box-shadow:var(--schaduw-zwaar);padding:12px 15px;font:400 13px/1.55 var(--font);color:var(--inkt)}

/* ---------- zijbalk ---------- */
.zijbalk{width:236px;flex:none;background:var(--navy);display:flex;flex-direction:column;gap:4px;
  padding:22px 14px;position:sticky;top:0;height:100vh;transition:width .18s ease-out,padding .18s ease-out}
.zijbalk__merk{display:flex;align-items:center;justify-content:center;padding:4px 8px 2px;margin-bottom:22px;overflow:hidden}
.zijbalk__merk img{display:block;height:46px;width:auto}
.zijbalk__merk img.beeldmerk{display:none;height:40px;width:40px;border-radius:12px}
.zijbalk a.item{position:relative;display:flex;align-items:center;gap:12px;height:46px;padding:0 13px;border-radius:12px;
  color:rgba(255,255,255,.62);font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  transition:background .15s ease-out,color .15s ease-out}
.zijbalk a.item:hover{background:rgba(255,255,255,.10);color:#fff}
.zijbalk a.item.actief{background:var(--blauw);color:#fff;box-shadow:0 6px 18px rgba(0,136,202,.5)}
.zijbalk a.item:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}
.zijbalk a.item svg{width:20px;height:20px;flex:none}
.zijbalk .teller{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--oranje);
  color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;flex:none}
.zijbalk__kop{padding:16px 13px 5px;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.35);white-space:nowrap;overflow:hidden}
.zijbalk__knik{margin-top:auto;display:flex;align-items:center;gap:12px;height:44px;padding:0 13px;border:0;border-radius:12px;
  background:transparent;cursor:pointer;color:rgba(255,255,255,.45);font:600 12.5px var(--font);white-space:nowrap;overflow:hidden}
.zijbalk__knik:hover{background:rgba(255,255,255,.10);color:#fff}
.zijbalk__knik svg{width:18px;height:18px;flex:none;transition:transform .18s ease-out}
html.zijbalk-dicht .zijbalk{width:76px;padding:22px 14px}
html.zijbalk-dicht .zijbalk__merk img{display:none}
html.zijbalk-dicht .zijbalk__merk img.beeldmerk{display:block}
html.zijbalk-dicht .zijbalk a.item .tekst,html.zijbalk-dicht .zijbalk__knik .tekst{display:none}
html.zijbalk-dicht .zijbalk a.item,html.zijbalk-dicht .zijbalk__knik{justify-content:center;padding:0}
html.zijbalk-dicht .zijbalk .teller{position:absolute;top:4px;right:4px;margin-left:0;min-width:17px;height:17px;font-size:10px}
html.zijbalk-dicht .zijbalk__kop{font-size:0;padding:0;margin:8px 12px;border-top:1px solid rgba(255,255,255,.14)}
html.zijbalk-dicht .zijbalk__knik svg{transform:rotate(180deg)}

/* ---------- rechterdeel ---------- */
.deel{flex:1;min-width:0;display:flex;flex-direction:column;overflow-x:clip}
.topbalk{background:var(--wit);border-bottom:1px solid var(--rand);flex:none}
.topbalk__in{width:100%;max-width:1560px;margin:0 auto;height:var(--topbalkhoogte);padding:0 40px;display:flex;align-items:center;gap:var(--sp-4)}
.topbalk__datum{font:700 14px var(--kop);color:var(--navy)}
.topbalk__rechts{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}
.topbalk__gebruiker{display:flex;align-items:center;gap:10px;color:var(--inkt);font-size:13.5px;font-weight:600;white-space:nowrap;
  border:0;background:transparent;cursor:pointer;font-family:var(--font);padding:4px 6px;border-radius:12px}
.topbalk__gebruiker:hover{background:var(--achter)}
.topbalk__gebruiker .rol{display:block;font-size:11.5px;font-weight:700;color:var(--stil-k);line-height:1.2}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--verloop);color:#fff;font:700 12.5px var(--kop);
  display:flex;align-items:center;justify-content:center;letter-spacing:.03em;flex:none}
.avatar--klein{width:30px;height:30px;font-size:11px}
.avatar--groot{width:56px;height:56px;font-size:18px}
img.avatar{object-fit:cover;background:var(--rij);display:block}
.avatar--uit{background:var(--vaag);filter:grayscale(1);opacity:.7}
.kijkals{display:inline-flex;align-items:center;gap:2px;background:var(--achter);border-radius:999px;padding:3px;margin-right:6px}
.kijkals__label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--stil-k);padding:0 10px 0 12px}
.kijkals button{height:30px;padding:0 13px;border:0;border-radius:999px;background:transparent;font:700 12.5px var(--kop);color:var(--stil-k);cursor:pointer}
.kijkals button:hover{color:var(--navy)}
.kijkals button.actief{background:var(--wit);color:var(--blauw);box-shadow:0 2px 8px rgba(0,102,151,.15)}
.kijkbalk{background:var(--oranje-tint);border-bottom:1px solid #ffd9b0;color:#7a4d05;font-size:13px}
.kijkbalk .omlijning{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.kijkbalk button{height:30px;padding:0 14px;border:1px solid #e3b57a;border-radius:999px;background:var(--wit);font:700 12.5px var(--kop);color:#7a4d05;cursor:pointer}
.kijkbalk button:hover{background:#fff7ec}
@media (max-width:1100px){.kijkals__label{display:none}}
.menu{position:relative}
.menu__lijst{position:absolute;top:calc(100% + 6px);right:0;min-width:240px;z-index:60;background:var(--wit);border-radius:14px;
  box-shadow:0 14px 38px rgba(11,39,64,.22);padding:6px}
.menu__item{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px;border:0;background:none;font:inherit;color:var(--inkt);cursor:pointer}
.menu__item:hover{background:var(--achter)}
.menu__item b{display:block;font-size:13.5px}
.menu__item span{display:block;font-size:12px;color:var(--stil-k)}

.band .omlijning{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);padding-top:40px;flex-wrap:wrap}
.band__meta{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.omlijning{width:100%;max-width:1560px;margin:0 auto;padding:0 40px}
.hoofd{flex:1 0 auto;padding:var(--sp-6) 0 64px}
.hoofd>.omlijning{display:flex;flex-direction:column;gap:var(--sp-6)}
.rooster{display:grid;gap:var(--sp-5);align-items:start}
.rooster--2{grid-template-columns:1fr 1fr}
.rooster--3{grid-template-columns:repeat(3,1fr)}
.rooster--hoofdzij{grid-template-columns:2fr 1fr}
.rooster--zijhoofd{grid-template-columns:1fr 2fr}
.smal{max-width:900px;width:100%;display:flex;flex-direction:column;gap:var(--sp-5)}
.kolom{display:flex;flex-direction:column;gap:var(--sp-5)}

/* ---------- kaarten ---------- */
.kaart{background:var(--wit);border-radius:var(--radius-kaart);box-shadow:var(--schaduw)}
.kaart__kop{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:20px var(--sp-5);border-bottom:1px solid var(--rij)}
.kaart__kop h2{display:flex;align-items:center;gap:10px}
.kaart__kop h2 svg{width:19px;height:19px;color:var(--blauw)}
.kaart__inhoud{padding:var(--sp-5)}
.kaart--vol .kaart__inhoud{padding:0}
.kaart--vol{overflow:hidden}
.kaart__voet{padding:14px var(--sp-5);border-top:1px solid var(--rij);font-size:13.5px;color:var(--stil-k);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.kaart--accent{position:relative;overflow:hidden}
.kaart--accent::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--verloop)}
.kaart--oranje::before{background:linear-gradient(135deg,#e07f12,#ff9421)}
.kaart--groen::before{background:linear-gradient(135deg,#0f8f5d,#17a36b)}
.kaart--rood::before{background:linear-gradient(135deg,#c73b40,#e5484d)}

/* ---------- statistiektegels ---------- */
.statrij{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.statkaart{display:flex;align-items:center;gap:18px;padding:24px var(--sp-5);color:inherit;position:relative;overflow:hidden;
  transition:box-shadow .15s ease-out,transform .15s ease-out}
a.statkaart:hover{box-shadow:var(--schaduw-zwaar);transform:translateY(-2px);color:inherit}
.statkaart::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--verloop)}
.statkaart--oranje::before{background:linear-gradient(135deg,#e07f12,#ff9421)}
.statkaart--goed::before{background:linear-gradient(135deg,#0f8f5d,#17a36b)}
.statkaart--fout::before{background:linear-gradient(135deg,#c73b40,#e5484d)}
.statkaart--grijs::before{background:linear-gradient(135deg,#47566f,#5b7389)}
.statkaart__icoon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--verloop);color:#fff;flex:none}
.statkaart--oranje .statkaart__icoon{background:linear-gradient(135deg,#e07f12,#ff9421)}
.statkaart--goed .statkaart__icoon{background:linear-gradient(135deg,#0f8f5d,#17a36b)}
.statkaart--fout .statkaart__icoon{background:linear-gradient(135deg,#c73b40,#e5484d)}
.statkaart--grijs .statkaart__icoon{background:linear-gradient(135deg,#47566f,#5b7389)}
.statkaart__icoon svg{width:22px;height:22px}
.statkaart>div{min-width:0}
.statkaart__cijfer{font:800 30px/1.1 var(--kop);color:var(--navy);font-variant-numeric:tabular-nums}
.statkaart__cijfer small{font-size:15px;font-weight:700;color:var(--stil-k);margin-left:3px}
.statkaart__label{font-size:13.5px;font-weight:600;color:var(--stil-k);margin-top:3px}

/* ---------- lijstjes & entiteiten ---------- */
.entiteit{display:flex;align-items:center;gap:13px;min-width:0}
.entiteit__naam{font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entiteit__sub{display:block;font-size:12.5px;color:var(--stil-k);font-weight:400;line-height:1.45;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lijstje{list-style:none;margin:0;padding:0}
.lijstje li{display:flex;align-items:center;gap:13px;padding:13px var(--sp-5);border-bottom:1px solid var(--rij)}
.lijstje li:last-child{border-bottom:0}
.lijstje li.groep{background:var(--achter);padding:7px var(--sp-5);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--stil-k)}
.lijstje .waarde{margin-left:auto;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;flex:none;text-align:right;white-space:nowrap}
.lijstje .waarde small{display:block;font-weight:400;font-size:12px;color:var(--stil-k)}
.lijstje--wrap .entiteit__naam,.lijstje--wrap .entiteit__sub{white-space:normal}
.lijstje .rechts{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);flex:none}
.leeg{display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px var(--sp-5);text-align:center;color:var(--stil-k)}
.leeg svg{width:32px;height:32px;color:var(--vaag)}
.leeg strong{font:800 16px var(--kop);color:var(--navy)}
.leeg p{font-size:14px;max-width:460px}

/* ---------- tabellen ---------- */
.tabelhouder{overflow-x:auto}
.tabel{width:100%;border-collapse:collapse;font-size:13.5px}
.tabel th{height:44px;padding:0 16px;text-align:left;white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--stil-k);border-bottom:1px solid var(--rand)}
.tabel th.num{text-align:right}
.tabel td{height:52px;padding:8px 16px;border-bottom:1px solid var(--rij);white-space:nowrap;vertical-align:middle}
.tabel th:first-child,.tabel td:first-child{padding-left:var(--sp-5)}
.tabel th:last-child,.tabel td:last-child{padding-right:var(--sp-5)}
.tabel td.brede{white-space:normal;min-width:200px}
.tabel tbody tr:hover{background:var(--hover)}
.tabel tbody tr:last-child td{border-bottom:0}
.tabel .klikbaar{cursor:pointer}
.tabel td.acties{text-align:right;width:1%}
.tabel td.acties form{display:inline-flex;gap:6px;align-items:center}
.tabel .sub{display:block;font-size:12.5px;color:var(--stil-k);line-height:1.45;margin-top:1px}
.tabel tr.groep td{height:32px;background:var(--achter);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--stil-k)}
.tabel tfoot td{font-weight:700;color:var(--navy);background:var(--achter);border-top:1px solid var(--rand)}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;border-radius:999px;border:0;
  background:var(--verloop);color:#fff;font:700 14px var(--kop);letter-spacing:.01em;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 20px rgba(0,136,202,.25);transition:transform .15s ease-out,box-shadow .15s ease-out;white-space:nowrap}
.knop:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,136,202,.33);color:#fff}
.knop:active{transform:none}
.knop[disabled]{background:var(--rand);color:var(--vaag);box-shadow:none;cursor:not-allowed;transform:none}
.knop svg{width:16px;height:16px}
.knop--secundair{background:var(--wit);color:var(--diep);box-shadow:inset 0 0 0 2px var(--rand)}
.knop--secundair:hover{box-shadow:inset 0 0 0 2px var(--blauw);transform:none;color:var(--diep)}
.knop--stil{background:transparent;color:var(--blauw);box-shadow:none}
.knop--stil:hover{background:var(--lichtblauw);transform:none;box-shadow:none;color:var(--diep)}
.knop--goed{background:linear-gradient(135deg,#0f8f5d,#17a36b);box-shadow:0 8px 20px rgba(23,163,107,.25)}
.knop--fout{background:var(--wit);color:var(--fout);box-shadow:inset 0 0 0 2px var(--fout-tint)}
.knop--fout:hover{box-shadow:inset 0 0 0 2px var(--fout);transform:none;color:var(--fout)}
.knop--oranje{background:linear-gradient(135deg,#e07f12,#ff9421);box-shadow:0 8px 20px rgba(255,148,33,.28)}
.knop--klein{height:34px;padding:0 15px;font-size:12.5px;gap:6px}
.knop--klein svg{width:14px;height:14px}
.knop--icoon{width:38px;height:38px;padding:0;border-radius:10px}
.knop--google{background:var(--wit);color:var(--inkt);box-shadow:inset 0 0 0 2px var(--rand);font-family:var(--font);font-weight:600}
.knop--google:hover{box-shadow:inset 0 0 0 2px var(--blauw);transform:none;color:var(--inkt)}
.knop--google svg{width:18px;height:18px}

/* ---------- formulieren ---------- */
.veld{display:flex;flex-direction:column;gap:5px;min-width:0}
.veld>label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil-k);line-height:1.4}
.invoer{height:44px;padding:0 14px;border:1px solid var(--rand);border-radius:var(--radius);font:13.5px var(--font);color:var(--inkt);
  background:var(--wit);width:100%;transition:border-color .15s ease-out,box-shadow .15s ease-out}
.invoer:hover{border-color:var(--grijsblauw)}
.invoer:focus{outline:none;border-color:var(--blauw);box-shadow:var(--ring)}
.invoer::placeholder{color:var(--vaag)}
.invoer[disabled],.invoer[readonly]{background:var(--achter);color:var(--stil-k)}
.invoer--klein{height:36px;padding:0 10px;font-size:13px}
textarea.invoer{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.5}
select.invoer{appearance:none;padding-right:34px;
  background:var(--wit) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352677a' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") right 12px center no-repeat}
.formulier{display:flex;flex-direction:column;gap:var(--sp-4)}
.formulierrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-4)}
.formulierrij--2{grid-template-columns:1fr 1fr}
.formulierrij--3{grid-template-columns:1fr 1fr 1fr}
.vink{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;user-select:none;min-height:44px}
.vink input{width:18px;height:18px;margin:0;accent-color:var(--blauw);cursor:pointer}
.vink input.wissel{width:42px;height:24px}
.vink input.wissel{width:42px;height:24px}
.wissel{appearance:none;width:42px;height:24px;border-radius:12px;background:var(--vaag);position:relative;cursor:pointer;transition:background .15s ease-out;outline:none;flex:none;margin:0}
.wissel::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s ease-out}
.wissel:checked{background:var(--goed)}
.wissel:checked::after{left:21px}
.wissel:focus-visible{box-shadow:var(--ring)}
.melding{padding:14px 18px;border-radius:12px;font-size:13.5px;line-height:1.55}
.melding--fout{background:var(--fout-tint);color:#9f2a2e}
.melding--goed{background:var(--goed-tint);color:#0f6b47}
.melding--letop{background:var(--letop-tint);color:#7a4d05}
.melding--info{background:var(--lichtblauw);color:var(--diep)}
.melding strong{display:block;margin-bottom:2px}
.knoppenrij{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.knoppenrij--rechts{justify-content:flex-end}
.werkbalk{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.werkbalk__groep{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.segment{display:inline-flex;background:var(--wit);border-radius:999px;padding:4px;box-shadow:var(--schaduw)}
.segment a{display:flex;align-items:center;gap:7px;height:34px;padding:0 16px;border-radius:999px;font:700 13.5px var(--kop);color:var(--stil-k)}
.segment a:hover{color:var(--navy)}
.segment a.actief{background:var(--blauw);color:#fff;box-shadow:0 4px 12px rgba(0,136,202,.3)}
.zoekveld{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;background:var(--wit);border:1px solid var(--rand);border-radius:10px;color:var(--vaag);min-width:260px}
.zoekveld:focus-within{border-color:var(--blauw);box-shadow:var(--ring)}
.zoekveld svg{width:17px;height:17px}
.zoekveld input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:13.5px var(--font);color:var(--inkt)}

/* ---------- kenmerken (definitierooster) ---------- */
.kenmerken{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px var(--sp-6);padding:24px var(--sp-5);margin:0}
.kenmerken dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stil-k)}
.kenmerken dd{margin:6px 0 0;font-size:14px;line-height:1.5}

/* ---------- saldo-balk ---------- */
.saldo{display:flex;flex-direction:column;gap:14px}
.saldo__groot{display:flex;align-items:baseline;gap:10px}
.saldo__groot b{font:800 42px/1 var(--kop);color:var(--navy);font-variant-numeric:tabular-nums}
.saldo__groot span{font-size:14px;color:var(--stil-k)}
.voortgang{height:8px;border-radius:4px;background:var(--rij);overflow:hidden;display:flex}
.voortgang>span{display:block;height:100%}
.voortgang .op{background:var(--verloop)}
.voortgang .aangevraagd{background:var(--letop-fel)}
.saldo__regels{display:grid;grid-template-columns:1fr auto;gap:5px 16px;font-size:13.5px}
.saldo__regels b{text-align:right;font-variant-numeric:tabular-nums;color:var(--navy)}
.saldo__regels .lijn{grid-column:1/-1;border-top:1px solid var(--rij);margin:3px 0}

/* ---------- aanwezigheidskalender ---------- */
.kalender{width:100%;min-width:980px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12.5px}
.kalender th,.kalender td{border-bottom:1px solid var(--rij);height:42px;padding:0;text-align:center;vertical-align:middle}
.kalender th{font-size:11px;font-weight:700;color:var(--stil-k);background:var(--wit);position:sticky;top:0;z-index:2;height:46px;line-height:1.25}
.kalender th b{display:block;font-size:12.5px;color:var(--navy);font-variant-numeric:tabular-nums}
.kalender th.naam,.kalender td.naam{text-align:left;padding:0 16px 0 var(--sp-5);width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.kalender td.naam .entiteit{gap:10px}
.kalender td.naam .entiteit__naam{font-size:13px}
.kalender td.naam .sub{display:block;font-size:11.5px;font-weight:400;color:var(--stil-k);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kalender td.naam{position:sticky;left:0;background:var(--wit);z-index:1}
.kalender th.naam{position:sticky;left:0;z-index:3}
.kalender td.naam .sub{display:block;font-size:11.5px;font-weight:400;color:var(--stil-k);line-height:1.3}
.kalender td.tot{width:52px;color:var(--stil-k);font-variant-numeric:tabular-nums;padding-right:var(--sp-5)}
.kalender th.weekend,.kalender td.weekend{background:#f7fafc}
.kalender tr.groep td{height:26px;padding:0 16px 0 var(--sp-5);background:var(--achter);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--stil-k);text-align:left;border-bottom:1px solid var(--rand)}
.kalender tr.groep:hover td{filter:none}
.kalender th.vandaag{color:var(--blauw)}
.kalender th.vandaag b{color:var(--blauw)}
.kalender td.vandaag{box-shadow:inset 2px 0 0 var(--blauw),inset -2px 0 0 var(--blauw)}
.kalender tbody tr:hover td{filter:brightness(.97)}
.cel{display:block;height:28px;margin:0 2px;border-radius:7px;line-height:28px;font-size:11px;font-weight:700;overflow:hidden;white-space:nowrap}
.cel--kantoor{background:#d6ecf9;color:#0b5f8a}
.cel--thuis{background:#dcf3e8;color:#0f6b47}
.cel--onderweg{background:#ece7fb;color:#4b35a8}
.cel--verlof{background:#ffe3c6;color:#9a4f00}
.cel--ziek{background:#fbd9db;color:#9f2a2e}
.cel--feest{background:repeating-linear-gradient(135deg,#eef3f7 0 5px,#e3eaf0 5px 10px);color:var(--stil-k)}
.cel--vrij{background:transparent;color:var(--vaag)}
.cel--buiten{background:transparent}
.cel--dienst{background:var(--verloop);color:#fff}
.cel--dienst-ochtend{background:linear-gradient(90deg,var(--blauw) 50%,#d6ecf9 50%);color:#fff;text-shadow:0 0 2px rgba(0,60,100,.5)}
.cel--dienst-middag{background:linear-gradient(90deg,#d6ecf9 50%,var(--blauw) 50%);color:#0b5f8a;text-shadow:none}
.cel--afwijkend{box-shadow:inset 0 0 0 2px #9fcfee}
.cel--aangevraagd{box-shadow:inset 0 0 0 2px var(--letop-fel)}
.cel--ochtend{background:linear-gradient(90deg,#ffe3c6 50%,#d6ecf9 50%)}
.cel--middag{background:linear-gradient(90deg,#d6ecf9 50%,#ffe3c6 50%)}
.legenda{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--stil-k);align-items:center}
.legenda span{display:inline-flex;align-items:center;gap:7px}
.legenda i{display:inline-block;width:16px;height:12px;border-radius:4px}

/* ---------- weekplanning ---------- */
.plan{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12.5px}
.plan th,.plan td{border-bottom:1px solid var(--rij);padding:6px 4px;text-align:center;vertical-align:middle}
.plan th{height:54px;font-size:11px;font-weight:700;color:var(--stil-k);line-height:1.3;background:var(--wit)}
.plan th b{display:block;font-size:12.5px;color:var(--navy)}
.plan th .feest{display:block;font-size:10.5px;font-weight:600;color:var(--letop)}
.plan th.naam,.plan td.naam{text-align:left;width:230px;padding-left:var(--sp-5);padding-right:12px}
.plan th.weekend,.plan td.weekend{background:#f7fafc}
.plan th.vandaag,.plan th.vandaag b{color:var(--blauw)}
.plan td.vandaag{box-shadow:inset 2px 0 0 var(--blauw),inset -2px 0 0 var(--blauw)}
.plan tfoot td{height:40px;font-weight:700;color:var(--navy);background:var(--achter);border-top:1px solid var(--rand)}
.plan tr.gastrij td{padding:10px var(--sp-5);background:var(--achter);text-align:left}
.plan tr.gastrij .werkbalk__groep{gap:10px}
.blok{display:flex;flex-direction:column;justify-content:center;min-height:46px;padding:5px 8px;border-radius:9px;line-height:1.3;
  text-decoration:none;color:inherit;overflow:hidden}
.blok b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blok span{font-size:11px;color:inherit;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blok--dienst{background:var(--verloop);color:#fff;box-shadow:0 6px 14px rgba(0,136,202,.22)}
.blok--dienst span{opacity:.9}
.blok--rooster{background:#d6ecf9;color:#0b5f8a}
.blok--ander{background:#ece7fb;color:#4b35a8}
.blok--verlof{background:#ffe3c6;color:#9a4f00}
.blok--ziek{background:#fbd9db;color:#9f2a2e}
.blok--feest{background:repeating-linear-gradient(135deg,#eef3f7 0 5px,#e3eaf0 5px 10px);color:var(--stil-k)}
.blok--ghost{opacity:.35}
a.blok--ghost:hover{opacity:.8}
.cel--ghost{opacity:.3}
.blok--leeg{color:var(--vaag);font:700 18px var(--kop);align-items:center;border:1.5px dashed transparent}
a.blok--leeg:hover{border-color:var(--rand);color:var(--blauw);background:var(--hover)}
a.blok:hover{filter:brightness(.96)}
.cel--deel{background:linear-gradient(135deg,#ffe3c6 50%,#d6ecf9 50%)}

/* ---------- dagstand (dashboard) ---------- */
.dagstand{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:10px 18px}
.persoon{display:flex;align-items:center;gap:11px;min-width:0;padding:6px 0}
.persoon .entiteit__naam{font-size:13.5px}
.persoon .entiteit__sub{font-size:12px}

/* ---------- urenstaat ---------- */
.urenstaat td input.invoer{height:36px;padding:0 10px;font-size:13px}
.urenstaat td.dag{white-space:nowrap;font-weight:600;width:170px}
.urenstaat td.dag .sub{font-weight:400}
.urenstaat td.tijd{width:112px}
.urenstaat td.pauze{width:92px}
.urenstaat td.uur{width:92px}
.urenstaat td.uur input{text-align:right}
.urenstaat td.om{min-width:220px}
.urenstaat td.plus{width:48px;text-align:center}
.urenstaat tr.dag--weg td{background:#fcfdfe}
.knop-rond{width:32px;height:32px;border-radius:50%;border:1px solid var(--rand);background:var(--wit);color:var(--blauw);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font:700 16px var(--kop);line-height:1}
.knop-rond:hover{border-color:var(--blauw);background:var(--lichtblauw)}
.knop-rond--weg{color:var(--vaag)}
.knop-rond--weg:hover{color:var(--fout);border-color:var(--fout);background:var(--fout-tint)}

/* ---------- rooster-bewerken ---------- */
.roosterdagen{display:flex;flex-direction:column;gap:8px}
.roosterdag{display:grid;grid-template-columns:150px 110px 110px 90px 180px 1fr;gap:var(--sp-3);align-items:center;padding:10px 14px;
  border:1px solid var(--rand);border-radius:12px;background:var(--wit)}
.roosterdag--uit{background:var(--achter);color:var(--stil-k)}
.roosterdag--uit .invoer{opacity:.45}
.roosterdag .dagnaam{font-weight:700;display:flex;align-items:center;gap:10px;font-family:var(--kop);color:var(--navy)}
.roosterdag .uurtje{text-align:right;font-variant-numeric:tabular-nums;color:var(--stil-k);white-space:nowrap}
.roosterdag .invoer{height:38px;padding:0 10px;font-size:13px}

/* ---------- weekrooster (sleepbaar) ---------- */
.wrooster{display:grid;grid-template-columns:56px repeat(7,1fr);gap:8px;user-select:none}
.wrooster__askop{height:66px}
.wrooster__uren{position:relative;height:600px}
.wrooster__uur{height:40px;font-size:11px;color:var(--vaag);text-align:right;padding-right:8px;line-height:1;transform:translateY(-6px);font-variant-numeric:tabular-nums}
.wrooster__dag{display:flex;flex-direction:column;gap:6px;min-width:0}
.wrooster__kop{display:flex;flex-direction:column;align-items:center;gap:3px;height:66px;cursor:pointer;text-align:center}
.wrooster__kop span{font:700 13px var(--kop);color:var(--navy)}
.wrooster__kop small{font-size:11px;color:var(--stil-k);white-space:nowrap;font-variant-numeric:tabular-nums}
.wrooster__kolom{position:relative;height:600px;border-radius:10px;background:repeating-linear-gradient(180deg,var(--achter) 0 39px,var(--rand) 39px 40px);border:1px solid var(--rand);overflow:hidden}
.wrooster__dag--uit .wrooster__kolom{opacity:.45}
.wrooster--slot{pointer-events:none;opacity:.75}
.wrooster__dag--feest .wrooster__kolom{background:repeating-linear-gradient(135deg,#eef3f7 0 6px,#e3eaf0 6px 12px)}
.wrooster__dag--feest .wrooster__kop small{color:var(--letop);font-weight:700}
.wrooster__dag--uit .wrooster__blok,.wrooster__dag--uit .wrooster__velden{display:none}
.wrooster__blok{position:absolute;left:4px;right:4px;border-radius:9px;background:var(--verloop);color:#fff;box-shadow:0 6px 16px rgba(0,136,202,.3);cursor:grab;touch-action:none}
.wrooster__blok.sleept{cursor:grabbing;box-shadow:0 10px 24px rgba(0,136,202,.45)}
.wrooster__tijd{position:absolute;top:8px;left:0;right:0;text-align:center;font:700 11.5px var(--kop);pointer-events:none;font-variant-numeric:tabular-nums}
.wrooster__greep{position:absolute;left:0;right:0;height:10px;cursor:ns-resize;touch-action:none}
.wrooster__greep--boven{top:0}
.wrooster__greep--onder{bottom:0}
.wrooster__greep::after{content:"";position:absolute;left:50%;top:3px;width:26px;height:3px;margin-left:-13px;border-radius:2px;background:rgba(255,255,255,.7)}
.wrooster__pauze{position:absolute;left:3px;right:3px;background:#fff;color:var(--diep);border-radius:6px;font-size:10px;white-space:nowrap;overflow:hidden;font-weight:700;text-align:center;line-height:1.1;display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,.2);touch-action:none}
.wrooster__pauze[hidden]{display:none}
.wrooster__greep--pauze{height:6px}
.wrooster__greep--pauze::after{background:var(--helder);top:2px;width:18px;height:2px;margin-left:-9px}
.wrooster__blok--twee{background:linear-gradient(135deg,#0f8f5d,#17a36b);box-shadow:0 6px 16px rgba(23,163,107,.3)}
.wrooster__blok--twee[hidden]{display:none}
.wrooster__twee[hidden]{display:none}
.wrooster__plus{height:28px;padding:0 8px;font-size:11.5px;justify-content:center}
.wrooster__plus[hidden]{display:none}
.wrooster__dag--uit .wrooster__plus,.wrooster__dag--uit .wrooster__twee{display:none}
.wrooster__voet{display:flex;flex-direction:column;gap:5px}
.wrooster__velden{display:flex;flex-direction:column;gap:4px}
.wrooster__velden .invoer{padding:0 6px;font-size:12px;height:32px;min-width:0}
.wrooster__voet .invoer--klein{font-size:12px;height:32px}
@media (max-width:1100px){.wrooster{grid-template-columns:48px repeat(7,minmax(0,1fr))}.wrooster__velden{flex-direction:column}}

/* ---------- stappen / tijdlijn ---------- */
.tijdlijn{list-style:none;margin:0;padding:0}
.tijdlijn li{display:grid;grid-template-columns:130px 1fr;gap:var(--sp-4);padding:10px 0;border-bottom:1px solid var(--rij);font-size:13.5px}
.tijdlijn li:last-child{border-bottom:0}
.tijdlijn .wanneer{color:var(--stil-k);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- popup ---------- */
.sluier{position:fixed;inset:0;background:rgba(11,39,64,.5);z-index:80;display:flex;align-items:center;justify-content:center;padding:var(--sp-4)}
.popup{background:var(--wit);border-radius:var(--radius-kaart);box-shadow:var(--schaduw-zwaar);width:min(460px,94vw)}
.popup .kaart__inhoud{display:flex;flex-direction:column;gap:var(--sp-4)}

/* ---------- voet ---------- */
.voet{flex:none;margin-top:auto;color:var(--stil-k);font-size:12.5px}
.voet .omlijning{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding-top:20px;padding-bottom:20px;border-top:1px solid var(--rand);flex-wrap:wrap}

/* ---------- responsief ---------- */
@media (max-width:1200px){
  .omlijning,.topbalk__in{padding:0 var(--sp-5)}
  .statrij{grid-template-columns:1fr 1fr}
  .rooster--3{grid-template-columns:1fr 1fr}
  .rooster--hoofdzij,.rooster--zijhoofd{grid-template-columns:1fr}
  .roosterdag{grid-template-columns:130px 100px 100px 90px 130px 1fr}
}
@media (max-width:860px){
  html .zijbalk{width:76px;padding:22px 12px}
  html .zijbalk__merk img{display:none}
  html .zijbalk__merk img.beeldmerk{display:block}
  html .zijbalk a.item .tekst,html .zijbalk__knik{display:none}
  html .zijbalk a.item{justify-content:center;padding:0}
  html .zijbalk .teller{position:absolute;top:4px;right:4px;margin-left:0;min-width:17px;height:17px;font-size:10px}
  html .zijbalk__kop{font-size:0;padding:0;margin:8px 12px;border-top:1px solid rgba(255,255,255,.14)}
  .omlijning,.topbalk__in{padding:0 var(--sp-4)}
  .statrij,.rooster--2,.rooster--3{grid-template-columns:1fr}
  .band .omlijning{flex-direction:column;align-items:flex-start;padding-top:28px}
  h1{font-size:26px}
  .topbalk__datum{display:none}
  .statkaart{padding:18px 20px;gap:14px}
  .statkaart__cijfer{font-size:26px}
  .band__meta .knop{height:40px;padding:0 18px;font-size:13px}
  .statkaart{padding:18px 20px;gap:14px}
  .statkaart__cijfer{font-size:26px}
  .band__meta .knop{height:40px;padding:0 18px;font-size:13px}
  .topbalk__gebruiker .naamtekst{display:none}
  .formulierrij--2,.formulierrij--3{grid-template-columns:1fr}
  .roosterdag{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .roosterdag .dagnaam{grid-column:1/-1}
  .kalender th.naam,.kalender td.naam{width:120px;padding-left:var(--sp-4)}
}
@media print{
  .zijbalk,.topbalk,.voet,.knop,.band__meta{display:none!important}
  body{background:#fff}
  .kaart{box-shadow:none;border:1px solid var(--rand)}
}