.portaal{font-size:1rem}
.proefbalk{background:var(--note);color:var(--signal-ink);text-align:center;padding:8px 16px;font-weight:600;font-size:.95rem}
.pheader{background:var(--navy-deep);color:#fff}
.pheader .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;padding-block:8px}
.pmerk{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:500 1.3rem var(--display);min-height:44px}
.pheader ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.pheader nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:#fff;text-decoration:none;border-radius:var(--radius-s)}
.pheader nav a[aria-current=page]{box-shadow:inset 0 -3px var(--teal);font-weight:600}
/* Zachte knopdiepte; bestaande kleuren, vorm en focusring blijven leidend. */
.btn{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform 100ms ease-out,box-shadow 180ms ease-out}
@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):not([aria-disabled="true"]):hover{box-shadow:0 4px 8px -3px rgba(6,48,79,.18),0 10px 24px -8px rgba(6,48,79,.24)}
}
.btn:not(:disabled):not([aria-disabled="true"]):focus-visible{box-shadow:0 4px 8px -3px rgba(6,48,79,.18),0 10px 24px -8px rgba(6,48,79,.24)}
.btn:not(:disabled):not([aria-disabled="true"]):active{box-shadow:0 2px 4px rgba(6,48,79,.16)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.pheader .btn-ghost{border-color:#fff;color:#fff}
.pheader .btn-ghost:hover{background:#fff;color:var(--navy-deep)}
.pheader :focus-visible{outline-color:var(--teal)}
.pmain{padding-block:28px 56px}
.pfoot{padding-block:20px;color:var(--ink-soft);font-size:.9rem}
.zacht{color:var(--ink-soft);font-size:.95rem}
.kaarten{list-style:none;padding:0;display:grid;gap:14px;margin-top:24px}
.kaart{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-decoration:none;color:var(--ink);min-height:44px}
.kaart h2{font-size:1.4rem;margin-bottom:6px}
.kaart p{margin:0}
.pkaart{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-top:20px}
.pkaart h2{font-size:1.4rem;margin-bottom:12px}
.pkaart h3{font-size:1.1rem;margin-top:14px}
.wat-mist{border-color:var(--signal);border-width:2px;background:#FFFBEF}
.lijst,.aanvragen,.voorstel{list-style:none;margin:0;padding:0}
.lijst li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.lijst li:first-child{border-top:0}
.voortgang{display:flex;align-items:center;gap:18px;margin-top:20px}
.voortgang p{margin:0}
.ring{--p:0;width:84px;height:84px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--teal-text) calc(var(--p)*1%),var(--mist) 0)}
.ring span{width:64px;height:64px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-weight:700;color:var(--navy-deep)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.9rem;font-weight:600;border:1.5px solid currentColor;line-height:1.3}
.b-ok,.c-bevestigd{color:#14602B;background:#E6F4EA}
.b-expiring,.c-voorgesteld{color:var(--signal-ink);background:#FFF1CC}
.c-geannuleerd{color:var(--danger);background:#fff;border-style:dotted}
.b-pending,.c-open{color:var(--navy);background:#E3EEF7}
.b-rejected,.b-expired{color:var(--danger);background:#FCE8E6}
.b-missing,.c-afgerond{color:var(--ink-soft);background:var(--mist);border-style:dashed}
.btn-small{min-height:44px;padding:8px 16px}
.acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
input.vh:focus-visible+*{outline:3px solid var(--navy)}
label.btn:has(+input:focus-visible){outline:3px solid var(--navy);outline-offset:3px}
.form{display:grid;gap:8px}
.form label,.vakantie label{font-weight:600;display:block}
input[type=date],select{min-height:48px;padding:8px 12px;font:inherit;border:1.5px solid var(--ink-soft);border-radius:8px;background:#fff;width:100%;max-width:100%}
fieldset{border:0;padding:0;margin:8px 0;min-width:0}
legend{font-weight:600;margin-bottom:6px;padding:0}
.blokken{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.form .blok{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:1.5px solid var(--line);border-radius:8px;font-weight:400}
.blok input{width:22px;height:22px;flex:none}
.rij{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pro{display:grid;gap:6px;justify-items:start;padding:14px 0;border-top:1px solid var(--line)}
.uitkomst{margin:0;min-height:1.2em;font-weight:600;color:var(--navy)}
.vakantie{display:grid;gap:10px;margin-top:14px;grid-template-columns:1fr 1fr}
.vakantie button{grid-column:1/-1}
.melding{min-height:1.5em;font-weight:600;color:var(--navy);margin:10px 0 0}
.tabs{display:flex;gap:6px;margin-top:16px}
.tab{flex:1;min-height:48px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);font:600 1rem var(--body);border-radius:10px;cursor:pointer}
.tab[aria-pressed=true]{background:var(--navy);color:#fff}
[hidden]{display:none!important}
.blokknop{min-height:44px;width:100%;padding:4px 6px;border:1.5px solid var(--line);background:#fff;border-radius:8px;font:500 .9rem var(--body);cursor:pointer;touch-action:manipulation;transition:background-color 150ms ease-out}
.blokknop.aan{background:var(--mist);border-color:var(--teal-text);color:var(--navy-deep);font-weight:700}
.weekraster{display:grid;gap:14px}
.weekdag{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.weekdag h3{grid-column:1/-1;margin:0}
.dagblokken{display:grid;gap:8px;margin-top:12px}
.maandraster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.maandraster .kop{text-align:center;font-weight:600;font-size:.85rem}
.dagcel{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:8px;background:#fff;font:inherit;cursor:pointer;padding:2px;transition:transform 150ms ease-out}
.dagcel:active{transform:scale(.96)}
.dagcel .nr{font-weight:700}
.dagcel .tx{font-size:.78rem}
.s-full{background:var(--teal);border-color:var(--teal-text);color:var(--navy-deep)}
.s-partial{background:repeating-linear-gradient(45deg,#fff,#fff 5px,var(--mist) 5px,var(--mist) 10px);border-color:var(--teal-text)}
.s-none{color:var(--ink-soft)}
@media (min-width:700px){
  .kaarten{grid-template-columns:repeat(3,1fr)}
  .weekraster{grid-template-columns:repeat(7,1fr);gap:6px}
  .weekdag{grid-template-columns:1fr}
  .blokknop{font-size:.78rem;padding:4px 2px}
  .dagblokken{grid-template-columns:repeat(3,1fr)}
  .vakantie{grid-template-columns:200px 200px auto;align-items:end}
  .vakantie button{grid-column:auto}
  .blokken{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* aanmelden */
.aanm{max-width:560px;margin-top:12px}
.voortg{margin-bottom:22px}
.balk{height:8px;background:var(--mist);border-radius:99px;overflow:hidden}
.balk i{display:block;height:100%;width:8.33%;background:var(--teal-text);transition:width 200ms ease-out}
.stapnr{margin:8px 0 0;font-weight:600;color:var(--ink-soft)}
.js .stap{display:none}
.js .stap.actief{display:block;animation:stapin 200ms ease-out}
@keyframes stapin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.stap h2{font-size:1.6rem;margin-bottom:16px}
.stap h2:focus{outline:none}
.stap label:not(.keuze):not(.chip){display:block;font-weight:600;margin:14px 0 6px}
input.inv{min-height:48px;padding:8px 12px;font:inherit;border:1.5px solid var(--ink-soft);border-radius:8px;background:#fff;width:100%}
.aanm :focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.keuze{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;margin-top:8px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font-weight:400;cursor:pointer}
.keuze input,.chip input{width:24px;height:24px;flex:none}
.keuze:has(input:checked){border-color:var(--teal-text);background:var(--mist)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;cursor:pointer}
.chip:has(input:checked){border-color:var(--teal-text);background:var(--mist);font-weight:600}
.chip:has(input:focus-visible),.keuze:has(input:focus-visible){outline:3px solid var(--navy);outline-offset:2px}
.fgroep{margin-top:16px}
.fout{color:var(--danger);font-weight:600;margin:12px 0 0}
.knoppen{margin-top:24px}
.kader{padding:12px 14px;border-left:4px solid var(--teal-text);background:var(--mist);font-weight:600}
.uitleg{display:grid;gap:16px}
.plaatje{width:140px;color:var(--navy);justify-self:center}
.lijstje{padding-left:20px}
.lijstje li{margin-bottom:10px}
.stappen{padding-left:40px}
.stappen li{margin-bottom:12px}
@media (min-width:700px){.uitleg{grid-template-columns:160px 1fr;align-items:start}}
/* instelling */
.pheader .rolwissel{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.pheader nav.rolwissel a{color:#fff;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border:1.5px solid #fff;border-radius:var(--radius-s);text-decoration:none;font-size:.95rem}
.groot{min-height:52px;font-size:1.1rem}
.tellers{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tellers a{display:block;height:100%;min-height:44px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink)}
.tellers strong{display:block;font:500 2rem var(--display);color:var(--navy-deep)}
.tellers span{font-size:.95rem}
.fchip{min-height:44px;padding:6px 14px;border:1.5px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font:600 .95rem var(--body);cursor:pointer}
.fchip[aria-pressed=true]{background:var(--navy);color:#fff}
.filter{margin:16px 0 8px}
.aanvragen .titel{font-weight:700;font-size:1.1rem;display:inline-block;min-height:44px;line-height:44px}
.aanvragen .pkaart{margin-top:12px}
.info{padding:14px 16px;border:1.5px solid var(--navy);border-radius:var(--radius);background:#E3EEF7;margin:16px 0}
.info ul{margin:8px 0 0;padding-left:20px}
.tijdlijn{list-style:none;margin:20px 0 8px;padding:0;display:grid;gap:6px}
.tijdlijn li{display:flex;align-items:center;gap:10px;min-height:36px;color:var(--ink-soft)}
.tijdlijn .stip{width:28px;height:28px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;font-size:.9rem;flex:none}
.tijdlijn .klaar{color:#14602B}
.tijdlijn .nu{color:var(--navy);font-weight:700}
.tijdlijn .nu .stip{background:var(--navy);color:#fff}
.dl{margin:0}
.dl dt{font-weight:600;margin-top:12px}
.dl dd{margin:2px 0 0}
.dl .pre{white-space:pre-line;display:block;margin-bottom:6px}
textarea.inv{width:100%;padding:8px 12px;font:inherit;border:1.5px solid var(--ink-soft);border-radius:8px;background:#fff}
.reden{margin-top:8px;width:100%}
.dienstrij{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:6px;justify-items:start}
.dienstrij:first-child{border-top:0}
.dagcel.gekozen{outline:3px solid var(--navy);outline-offset:1px}
.bgroep{margin-top:18px}
.bgroep .acties{margin-bottom:8px}
.portaal :focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.pheader :focus-visible{outline-color:var(--teal)}
@media (min-width:700px){.tellers{grid-template-columns:repeat(4,1fr)}}
.kaart a{text-decoration:underline}
.inlog{max-width:440px;margin:8px auto 0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 20px}
.inlog .pmerk{color:var(--navy);margin-bottom:8px}
.inlog h1{font-size:1.7rem;margin:6px 0 14px}
.inlog label{display:block;font-weight:600;margin:14px 0 6px}
.inlog input:focus-visible,.inlog button:focus-visible,.inlog a:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.inlog .btn{width:100%;margin-top:18px}
.ww{display:flex;gap:8px}
.ww .btn{width:auto;margin:0;min-height:48px;flex:none}
.inlog .fout::before{content:"Let op: "}
.inlog .fout:empty{display:none}
.inlog .fout{margin:6px 0 0}
.hint{max-width:440px;margin:16px auto 0;background:var(--note);color:var(--signal-ink);border:2px solid var(--signal);border-radius:12px;padding:12px 16px}
.check{display:block;list-style:none;padding:0;margin:8px 0}
.check li{display:block;margin:4px 0}
.check li::before{content:"\25CB  "}
.check li.ok::before{content:"\2713  "}
.check li.ok{font-weight:600}
@media (prefers-reduced-motion:reduce){.inlog *{transition:none!important;animation:none!important}}
/* Toeslagen en verdiensten */
.toeslag{border-top:1px solid var(--line);padding-top:6px;margin-top:14px}
.toeslag h3{margin-top:6px}
.sliderrij{display:flex;align-items:center;gap:12px}
.slider{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--navy);touch-action:pan-y;cursor:pointer}
.slider::-webkit-slider-thumb{width:44px;height:44px}
.slider::-moz-range-thumb{width:44px;height:44px}
.slider:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:8px}
.uitlees{min-width:4ch;text-align:right;font-weight:700;color:var(--navy-deep);font-size:1.2rem}
.nlabel{font-weight:400!important;color:var(--ink-soft)}
.inv.klein,input[type=number].inv{max-width:9rem}
.uitzin{margin:4px 0 0;font-weight:600;color:var(--navy);overflow-wrap:anywhere}
.urenraster{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.urenraster label{font-size:.95rem}
.kaarten{display:grid;gap:12px;margin-top:14px}
.uitkaart{border:1.5px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--paper)}
.uitkaart h3{margin:0 0 6px}
.uitkaart dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:4px 12px}
.uitkaart dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.uitkaart dt:nth-of-type(3),.uitkaart .groot{font-weight:700;color:var(--navy-deep)}
.balk{display:flex;height:22px;border:1.5px solid var(--navy);border-radius:6px;overflow:hidden;margin:8px 0}
.seg{display:block;height:100%;flex:none}
.seg-normaal{background:var(--mist)}
.seg-avond{background:var(--teal)}
.seg-nacht{background:var(--navy)}
.seg-weekend{background:repeating-linear-gradient(45deg,var(--navy),var(--navy) 3px,#fff 3px,#fff 6px)}
.vak{display:inline-block;width:16px;height:16px;border:1.5px solid var(--navy);border-radius:3px;margin-right:8px;vertical-align:-3px}
.verdeling{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
.verdeling caption{text-align:left;padding-bottom:4px}
.verdeling th,.verdeling td{padding:6px 4px;border-top:1px solid var(--line);text-align:right}
.verdeling th[scope=row],.verdeling th:first-child{text-align:left}
@media (prefers-reduced-motion:no-preference){.seg{transition:width 200ms ease-out}}
@media (min-width:640px){.kaarten{grid-template-columns:1fr 1fr}.urenraster{grid-template-columns:repeat(4,1fr)}}
/* Financiën, punten en afdrukken */
.periode{margin-top:16px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.periode .datums{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.periode label:not(.chip){display:block;font-weight:600;margin-bottom:4px}
.periodenav{margin:14px 0 0}
.tabelwrap{position:relative;overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:8px;background:#fff}
.tabelwrap:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.tabelwrap table:not(.fintabel){border-collapse:collapse;width:100%}
.tabelwrap table:not(.fintabel) :is(th,td,caption){padding:8px 12px;text-align:left}
.tabelwrap table:not(.fintabel) td{border-top:1px solid var(--line)}
.nb{white-space:nowrap}
.fintabel{border-collapse:collapse;width:100%;min-width:620px;font-size:.95rem;font-variant-numeric:tabular-nums}
.fintabel th,.fintabel td{padding:8px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.fintabel thead th{border-top:0;background:var(--mist);font-weight:700}
.fintabel .get{text-align:right}
.fintabel tfoot th,.fintabel tfoot td{font-weight:700;border-top:2px solid var(--navy)}
.fintabel tr.huidig{background:#E6F4EA;font-weight:700}
.fintabel .btn{margin-top:6px}
.staafgrafiek{margin:8px 0 0}
.staafgrafiek figcaption{font-weight:600;color:var(--navy)}
.staafgrafiek ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.staafgrafiek li{display:grid;grid-template-columns:1fr auto;gap:2px 10px}
.staafgrafiek .swaarde{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.staaf{grid-column:1/-1;display:block;height:16px;background:var(--mist);border:1.5px solid var(--navy);border-radius:4px;overflow:hidden}
.staaf i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--navy),var(--navy) 4px,var(--teal-text) 4px,var(--teal-text) 8px)}
.telaat{border:3px solid var(--danger);background:#FCE8E6}
.telaat-tekst{color:var(--danger);font-weight:700}
.rustmelding{background:#FFF1CC;border-color:var(--signal)}
.dba{background:#E3EEF7}
.dba p{margin:0 0 6px;color:var(--ink)}
.dba a{text-decoration:underline}
.niveaubalk{display:block;height:18px;background:var(--mist);border:1.5px solid var(--navy);border-radius:99px;overflow:hidden;margin:10px 0}
.niveaubalk.klein{height:12px;margin:6px 0 14px}
.niveaubalk i{display:block;height:100%;background:var(--teal-text)}
.mijlpalen{list-style:none;margin:0;padding:0}
.bevestig{margin-top:10px;padding:12px;border:2px solid var(--navy);border-radius:8px;background:var(--paper)}
.printkop{display:none}
.papier{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:16px}
.doc-kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:14px}
.doc-merk{margin:0;font-size:.95rem}
.doc-gegevens,.doc-totaal{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:12px 0}
.doc-gegevens dt,.doc-totaal dt{font-weight:600}
.doc-gegevens dd,.doc-totaal dd{margin:0}
.doc-totaal{max-width:420px;margin-left:auto}
.doc-totaal dd{text-align:right;font-variant-numeric:tabular-nums}
.doc-noot{margin-top:14px;padding:8px 10px;border:1px dashed var(--ink-soft);font-size:.9rem}
@media (min-width:700px){.periode .datums{grid-template-columns:220px 220px}}
@media print{
  @page{size:A4;margin:14mm}
  .proefbalk,.pheader,.skip,.pfoot,.noprint,.btn,button,details>summary{display:none!important}
  html,body.portaal{background:#fff!important;color:#000;font-size:10.5pt}
  .wrap{max-width:none;padding:0}
  .pmain{padding:0}
  .printkop{display:block;border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:10px;font-size:11pt}
  .pkaart,.papier{border:0;box-shadow:none;padding:0;margin-top:12px;background:#fff;break-inside:avoid}
  .telaat{border:2px solid #000;padding:6px}
  .tabelwrap{overflow:visible;border:0}
  .fintabel{min-width:0;font-size:9pt}
  .fintabel thead{display:table-header-group}
  .fintabel tr{break-inside:avoid}
  .lijst li{break-inside:avoid}
  a{color:#000;text-decoration:none}
  .info,.rustmelding,.dba{border:1px solid #000;background:#fff}
  .staaf,.niveaubalk{border-color:#000;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .staaf i{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  h1{font-size:18pt}
  h2{font-size:13pt}
}
.periode .chip,.periode .chip:has(input:checked){border:0;padding:0;min-height:0;background:none;font-weight:400}
.periode .chip span{min-height:48px}
.fintabel tbody th[scope=row]{white-space:nowrap}

/* Schuif voor het basistarief, soort werk, werksoorten */
.schuifblok{margin-top:6px}
.schuiflim{display:flex;justify-content:space-between;gap:12px;margin:0;color:var(--ink-soft);font-size:.95rem}
.js .zonderjs{display:none}
.melding.rustmelding{padding:10px 12px;border:1.5px solid var(--signal);border-radius:var(--radius)}
.pgb p,.pgb ul{margin:0 0 8px}
.pgb ul{padding-left:20px}
.tabs{flex-wrap:wrap}
.tab{min-width:0;padding:6px 12px}
.tab[aria-selected=true]{background:var(--navy);color:#fff}
.tab:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.js .tabpaneel[hidden]{display:none}
.tabpaneel{margin-top:14px}
.check-lijst{list-style:none;margin:0;padding:0}
.uitleg-blok{margin:0 0 12px}
select{max-width:100%}
html:not(.js) .tabs{display:none}

/* kleurband: drie kaarten in teal, geel en blauw (palet van de site). Staat stil onder elkaar: een vanzelf wisselende band zonder pauzeknop haalt WCAG 2.2.2 niet. */
.kleurband{max-width:440px;margin:0 auto 14px;display:grid}
.kleurband>p{margin:0 0 8px;padding:14px 18px;border-radius:12px;font-weight:600}
.kleurband>p:nth-child(1){background:#DDEFF1;color:var(--navy-deep)}
.kleurband>p:nth-child(2){background:#FBEFC9;color:var(--signal-ink)}
.kleurband>p:nth-child(3){background:#E3E9F4;color:var(--navy)}
.kaarten>li:nth-child(3n+1) .kaart{border-top:5px solid var(--teal)}
.kaarten>li:nth-child(3n+2) .kaart{border-top:5px solid var(--signal)}
.kaarten>li:nth-child(3n) .kaart{border-top:5px solid var(--navy)}
section.pkaart:not(.wat-mist):nth-of-type(3n+1){border-top:5px solid var(--teal)}
section.pkaart:not(.wat-mist):nth-of-type(3n+2){border-top:5px solid var(--signal)}
section.pkaart:not(.wat-mist):nth-of-type(3n){border-top:5px solid var(--navy)}
.mt16{margin-top:16px}
.scrol-x{overflow-x:auto}
label.blok{display:block}

/* Deel A: profiel, tarief en overzichten */
.veldfout{margin:6px 0 0;font-weight:600;color:var(--danger)}
fieldset.groep{border:0;margin:0;padding:0;min-width:0}
fieldset.groep legend{font:500 1.4rem var(--display);color:var(--navy-deep);padding:0;margin-bottom:10px}

/* Deel A: pagina Tarief */
html:not(.js) .alleenjs{display:none}
.bon{margin:8px 0 0;display:grid;grid-template-columns:1fr auto;gap:6px 0;max-width:36rem}
.bon dt{margin:0}
.bon dd{margin:0;padding-left:16px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bon .som{font-weight:700;color:var(--navy-deep);border-top:2px solid var(--navy);padding-top:6px}
/* weekstrook: lichte cellen zijn zonder toeslag, donkere en gestreepte hebben een toeslag */
.weekstrook{display:grid;grid-template-columns:2.2rem repeat(24,minmax(0,1fr));gap:1px;margin:14px 0 2px;max-width:44rem;align-items:center;padding:3px;border:1.5px solid var(--navy-deep);border-radius:6px;background:#fff}
.weekstrook b{font-weight:600;font-size:.85rem;color:var(--ink-soft)}
.weekstrook i{display:block;height:20px}
.ws-uren{display:grid;grid-template-columns:2.2rem repeat(4,minmax(0,1fr));max-width:44rem;padding:0 3px;font-size:.8rem;color:var(--ink-soft)}
.ws-normaal{background:var(--mist)}
.ws-marand{background:var(--teal)}
.ws-manacht{background:var(--navy-deep)}
.ws-zadag{background:var(--teal-text)}
.ws-zanacht{background:repeating-linear-gradient(45deg,var(--navy-deep),var(--navy-deep) 3px,var(--teal) 3px,var(--teal) 6px)}
.ws-zo{background:repeating-linear-gradient(90deg,var(--signal),var(--signal) 4px,#fff 4px,#fff 6px)}
.ws-oud{background:repeating-linear-gradient(135deg,var(--signal),var(--signal) 3px,var(--navy-deep) 3px,var(--navy-deep) 6px)}
.kleurvak{display:inline-block;width:14px;height:14px;border:1.5px solid var(--navy-deep);border-radius:3px;margin-right:8px;vertical-align:-1px}
.bovenaan{display:grid;gap:20px;align-items:start;margin-top:20px}
@media (min-width:820px){.bovenaan{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
section.nu{background:#fff;border:2px solid var(--signal);border-radius:var(--radius);padding:20px}
section.nu.klaar{border-color:#14602B;background:#E6F4EA}
section.nu h2{font-size:1.5rem;margin:0 0 8px}
section.nu ul{margin:0;padding-left:1.2em}
section.nu li{padding:5px 0}
section.nu p{margin:0}
.voortgang-balk label{display:block;font-size:1.1rem}
.voortgang-balk progress{display:block;width:100%;height:16px;margin:8px 0;accent-color:var(--teal-text)}
.voortgang-balk p{margin:0}
.stand{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.stand>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.stand h2{font-size:1.25rem;margin:0;grid-column:1}
.stand p{margin:0;grid-column:1}
.stand>li>a{grid-column:2;grid-row:1/span 3;display:inline-flex;align-items:center;min-height:44px}
@media (max-width:560px){.stand>li{grid-template-columns:minmax(0,1fr)}.stand>li>a{grid-column:1;grid-row:auto}}
.week7{display:flex;flex-wrap:wrap;gap:4px}
.week7>span{width:34px;height:34px;border:1.5px solid var(--navy-deep);border-radius:4px;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.week7>.d-full{background:var(--teal-text);color:#fff}
.week7>.d-partial{background:var(--mist);color:var(--navy-deep);border-style:dashed}
.week7>.d-none{background:#fff;color:var(--ink-soft);border-color:var(--line)}
.stappenlijst{margin:0 0 12px;padding-left:1.4em}
.stappenlijst li{padding:4px 0}
section.nu.klaar ul{margin-top:6px}
section.nu.wacht{border-color:var(--line)}
fieldset.groep .blokken{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
/* weekrooster op de pagina Beschikbaarheid: tegels met een tint per dagdeel, zoals het rooster op de website. De tegels zijn gewone aanvinkvakjes. */
.weekrooster{border-collapse:separate;border-spacing:5px;width:100%;max-width:560px;background:#fff;border-radius:18px 18px 18px 6px;padding:clamp(6px,2vw,16px);box-shadow:0 1px 0 var(--line),0 18px 36px -26px rgba(6,48,79,.45);user-select:none;-webkit-user-select:none}
.weekrooster th,.weekrooster td{padding:0}
.weekrooster thead th{font-weight:600;font-size:.86rem;text-align:center;padding-bottom:4px}
.weekrooster thead .weekend{color:var(--teal-text)}
.weekrooster tbody th{text-align:left;font-weight:400;font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-soft)}
.weekrooster tbody th span{display:block;line-height:34px;padding:0 10px 0 12px;border-left:3px solid var(--tint-rand)}
.weekrooster .start>*{padding-top:8px}
.weekrooster .nacht{--tint:#E4E9F3;--tint-rand:#8D9CC0}
.weekrooster .ochtend{--tint:#FBF0CF;--tint-rand:#F4B740}
.weekrooster .middag{--tint:#DDF0F1;--tint-rand:#5CBEC7}
.weekrooster .avond{--tint:#ECE5F0;--tint-rand:#A78BB8}
.weekrooster input{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:26px;height:34px;margin:0;border:1.5px solid var(--field-line,#8a9aa6);border-radius:8px;background:var(--tint);cursor:pointer;position:relative;transition:background-color 120ms ease}
.weekrooster input:checked{background:var(--navy);border-color:var(--navy)}
.weekrooster input:checked::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:6px;margin:-5px 0 0 -6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
.weekrooster input:focus-visible,.weekrooster button:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.weekrooster button{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;width:100%;text-align:inherit;min-height:24px}
.weektools{display:none}
.js p.weektools{display:block}
.js span.weektools{display:inline}
@media (hover:hover) and (pointer:fine){.weekrooster input:hover{background:var(--tint-rand)}.weekrooster input:checked:hover{background:var(--navy-deep)}.weekrooster button:hover{color:var(--navy);text-decoration:underline}}
@media (max-width:420px){.weekrooster{border-spacing:3px;padding:4px}.weekrooster input{min-width:24px}.weekrooster tbody th{font-size:.76rem}.weekrooster tbody th span{padding:0 4px 0 6px}}

/* MijnLimitless werkplek — 2026-10-07 */
.portaal{background:#f5f6f3;line-height:1.6}.pheader{position:sticky;top:0;z-index:60;background:var(--navy-deep)}
.pheader .wrap{max-width:none;min-height:76px;padding:12px 28px;gap:16px}.pheader form{margin-left:auto}.pmerk{font-family:var(--body);font-size:1.15rem;font-weight:600}
.pheader nav{background:#fff;color:var(--ink);padding:20px 14px}.pheader nav ul{display:grid;gap:3px}.pheader nav a{color:var(--ink);padding:10px 14px;font-size:.94rem;border-radius:6px;min-height:44px;line-height:1.4}
.pheader nav a:hover{background:#eef2ed;color:var(--navy)}.pheader nav a[aria-current=page]{background:#e5efec;color:var(--navy-deep);box-shadow:none;border-left:3px solid var(--teal-text);font-weight:700}
.menu-label{color:var(--ink-soft);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:0 14px 12px}
.portal-menu-toggle{display:none;background:transparent;color:#fff;border:1px solid #abc8d2;border-radius:6px;min-height:44px;padding:8px 14px;font:600 .95rem var(--body)}
.pmain{padding-block:40px 56px}.pmain>h1{font-size:clamp(1.85rem,3.2vw,2.7rem);margin-bottom:8px}.pfoot{display:flex;flex-wrap:wrap;gap:12px 28px;border-top:1px solid var(--line)}
.page-heading{margin-bottom:28px;max-width:780px}.page-heading h1{font-size:clamp(2rem,3.5vw,3rem);margin-bottom:16px}.page-heading p:last-child{max-width:65ch}.page-heading .eyebrow{margin-bottom:12px}
.dashboard-date{font-size:.9rem;margin-bottom:24px}.pkaart{border-radius:8px;border:1px solid #d4ddd6;padding:24px;margin-top:22px;box-shadow:none}.pkaart h2{font-size:1.4rem;line-height:1.35}.pkaart p+p{margin-top:10px}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;gap:16px;margin:24px 0 28px}.metrics li{padding:22px;background:#fff;border:1px solid #d4ddd6;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}.metrics li>span{font-size:.85rem;color:var(--ink-soft);font-weight:600}.metrics strong{font-family:var(--display);font-size:2.1rem;font-weight:500;line-height:1.2;color:var(--navy-deep)}.metrics .metric-label{font-size:1.4rem}.metrics small{color:var(--ink-soft)}.metrics a{font-size:.88rem;min-height:44px;display:flex;align-items:center;margin-top:auto}
.next-shift{padding:24px 0;border-block:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.next-shift h2{font-size:1.3rem;margin-bottom:8px}.next-shift .eyebrow{margin-bottom:8px}
.nu{border-radius:8px;padding:24px;background:#fff8e9;border:1px solid #dbc798;border-left:4px solid #97722a;margin-top:24px}.nu.klaar,.nu.wacht{background:#edf3ee;border-color:#b7cbbd;border-left-color:#337452}.nu h2{font-size:1.4rem;margin-bottom:12px}
.stand{gap:16px}.stand li{border-radius:8px;box-shadow:none}.stand h2{font-size:1.3rem}
.empty-state{padding:40px 24px;background:#fff;border:1px dashed #a9bcb3;border-radius:8px;margin-block:24px;text-align:center}.empty-state h2{font-size:1.55rem;margin-bottom:12px}.empty-state .btn{margin-top:24px}
.task-list{list-style:none;padding:0;margin:24px 0;background:#fff;border:1px solid var(--line);border-radius:8px}.task-list li+li{border-top:1px solid var(--line)}.task-list a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px;min-height:60px;text-decoration:none;font-weight:600}.task-list a:hover{background:var(--mist)}
.period-form{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-block:20px}.period-form input{width:auto;min-width:180px}.form input[type=number],input[type=month]{min-height:48px;padding:10px 12px;border:1px solid var(--field-line);border-radius:6px;font:inherit;background:#fff;width:100%;max-width:100%}.time-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:400px}.uren-samenvatting{margin:20px 0}.workflow{display:flex;flex-wrap:wrap;list-style:none;padding:0;gap:12px;margin:24px 0}.workflow li{padding:10px 18px;background:#e5eeea;color:var(--navy-deep);font-weight:600;border-radius:4px}
.history{border-top:1px solid var(--line);margin-top:20px;padding-top:8px}.history summary,.pkaart summary{cursor:pointer;min-height:48px;padding-block:12px;font-weight:600;color:var(--navy)}.history ol{padding-left:22px}.history li{padding:12px 0}.pkaart details+details{border-top:1px solid var(--line)}.pkaart details>p{padding-bottom:16px}
.preference{display:flex!important;gap:12px;align-items:center;padding:12px 0}.preference input{width:22px;height:22px;flex:none}.form .btn{justify-self:start}.help-contact{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-block:28px}.help-contact h2{font-size:1.5rem;margin-bottom:12px}.help-contact .btn{margin-top:20px}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-block:24px}.calendar-toolbar h2{font-size:1.5rem}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.calendar-weekday{font-size:.8rem;text-align:center;font-weight:700;padding:10px}.calendar-day{padding:10px 8px;background:#fff;border:1px solid #d4ddd6;border-radius:6px;min-height:120px;min-width:0}.calendar-day h3{font:600 .85rem var(--body);margin-bottom:12px}.calendar-day.today{border:2px solid var(--teal-text)}.calendar-shift{display:block;padding:8px;background:#e5eeea;margin-top:6px;font-size:.75rem;text-decoration:none;border-left:2px solid var(--teal-text);overflow-wrap:anywhere}.calendar-shift span,.calendar-shift small,.calendar-shift strong{display:block}.mobile-day{display:none}
.tabelwrap{margin-block:24px;overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:6px;background:#fff}.tabelwrap table{width:100%;border-collapse:collapse}.tabelwrap caption{text-align:left;padding:16px;font-weight:600}.tabelwrap th,.tabelwrap td{padding:14px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}.tabelwrap thead{background:#edf2ee}.tabelwrap tbody th{font-weight:500}
button[aria-disabled=true]{opacity:.7;cursor:wait}.portaal main{min-width:0}.portaal .notice{padding:16px 20px;margin:20px 0;border-radius:6px}.portaal .notice-info{background:#eaf1f6;border:1px solid #b8ccdc;color:var(--navy-deep)}
@media(min-width:1050px){.has-menu .pheader nav{position:fixed;left:0;top:76px;bottom:0;width:230px;overflow-y:auto;border-right:1px solid var(--line)}.has-menu .pmain,.has-menu .pfoot{margin-left:230px;max-width:calc(100% - 230px);padding-inline:clamp(28px,4vw,64px)}}
@media(max-width:1049px){.pheader .wrap{padding:12px 18px}.portal-js .portal-menu-toggle{display:inline-flex;align-items:center;justify-content:center}.pheader nav{width:100%;order:4}.portal-js .pheader nav{display:none;max-height:70vh;overflow-y:auto}.portal-js .pheader nav.is-open{display:block}.pheader nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}.pmain{padding-top:28px}.pheader .pmerk img{width:28px}.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:700px){.metrics{grid-template-columns:1fr;gap:10px}.metrics li{padding:18px;display:grid;grid-template-columns:1fr auto;gap:8px}.metrics strong{grid-column:2;grid-row:1/3;font-size:1.8rem}.metrics a{min-height:44px}.metrics small{grid-column:1/-1}.metrics .metric-label{font-size:1.05rem}.next-shift{align-items:flex-start;flex-direction:column;gap:16px}.pkaart{padding:20px 16px}.calendar-grid{display:block}.calendar-weekday,.calendar-spacer,.calendar-day:not(.has-shift){display:none}.calendar-day{min-height:0;margin-block:12px;padding:16px}.calendar-day h3{font-size:1rem}.calendar-shift{font-size:.95rem;padding:12px}.mobile-day{display:inline}.help-contact{grid-template-columns:1fr;gap:28px}.pheader .pmerk{font-size:.98rem}.pheader .wrap{gap:8px}.pheader form .btn{padding:8px 10px;font-size:.8rem}.portal-menu-toggle{padding:8px 10px;font-size:.85rem}.pmain{padding-inline:18px}.workflow li{font-size:.88rem;padding:8px 12px}}

/* Navigation groups: one clear starting point, all roles. */
.pheader nav .menu-label{margin:18px 10px 7px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#526b63}.pheader nav .menu-label:first-child{margin-top:0}.pheader nav ul{margin-top:0}.pheader nav ul:last-child{margin-bottom:16px}

/* Login ergonomics: clear controls without changing authentication. */
.inlog .password-toggle{display:block;min-height:44px;margin:4px 0 0 auto;padding:8px 0 8px 12px;border:0;background:transparent;color:var(--navy);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.inlog .password-toggle[hidden]{display:none}
.inlog .password-recovery{display:inline-flex;align-items:center;min-height:44px;padding-block:8px;text-underline-offset:3px}
.inlog [data-error-focus]:focus{outline:3px solid var(--navy);outline-offset:4px}
/* Keep the existing logo size; give narrow authenticated headers two clear rows. */
@media(max-width:400px){
  .has-menu .pheader .pmerk{flex-basis:100%}
  .has-menu .pheader .portal-menu-toggle{min-height:44px}
  .has-menu .pheader form{margin-left:auto}
}

/* inlogpagina: welkom en foto links, inlogkaart rechts; op een smal scherm alleen tekst en kaart */
.inlog-pagina{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,440px);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(8px,3vw,40px)}
.inlog-pagina .inlog{margin:0;max-width:none;border-radius:18px;padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-1)}
.inlog-welkom .kicker{font-size:1.8rem;margin-bottom:6px}
.inlog-welkom h1{font-size:clamp(2.1rem,4vw,3.2rem);max-width:14ch}
.inlog-welkom > p:not(.kicker){font-size:1.15rem;margin-top:14px;max-width:38ch}
.inlog-welkom img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin-top:28px;border-radius:18px 56px 18px 18px;box-shadow:var(--shadow-2)}
.inlog h2{font-size:1.5rem;margin:0 0 10px}
.inlog-toegang{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.inlog .inlog-toegang h2{font-family:var(--hand);font-weight:600;font-size:1.6rem;line-height:1.1;letter-spacing:0;color:var(--teal-text);margin:0}
.inlog-toegang .zacht{margin:6px 0 12px}
.inlog-toegang a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-top:10px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.45;transition:border-color 140ms ease,background-color 140ms ease}
.inlog-toegang a strong{display:block;font-size:1rem;color:var(--ink)}
.inlog-toegang a i{font-style:normal;font-size:1.2rem;color:var(--navy)}
@media (hover:hover) and (pointer:fine){.inlog-toegang a:hover{border-color:var(--navy);background:var(--mist)}}
@media (max-width:860px){.inlog-pagina{grid-template-columns:minmax(0,1fr);gap:20px;max-width:480px}.inlog-welkom img{display:none}.inlog-welkom h1{font-size:1.9rem;max-width:none}.inlog-welkom > p:not(.kicker){font-size:1rem;margin-top:8px}}
/* inlogpagina compacter: welkom en kaart beginnen bovenaan, minder lucht tussen de velden */
.inlog-pagina{align-items:start;padding-block:clamp(0px,1.5vw,16px)}
.inlog-pagina .inlog{padding:clamp(18px,2.4vw,24px)}
.inlog-pagina .inlog form{gap:0}
.inlog-pagina .inlog label{margin:10px 0 4px}
.inlog-pagina .inlog .password-toggle{margin-top:0}
.inlog-pagina .inlog .btn{margin-top:4px}
.inlog-pagina .inlog .mt16{margin-top:4px}
.inlog-pagina .inlog-toegang{margin-top:8px;padding-top:14px}
.inlog-pagina .inlog-toegang .zacht{margin:4px 0 8px}
.inlog-pagina .inlog-toegang a{margin-top:8px;padding:10px 14px}
.inlog-welkom img{margin-top:20px}
.inlog-pagina .inlog input + .btn{margin-top:14px}
.inlog-pagina .inlog > p{margin:0 0 6px}
.inlog-pagina .inlog > p.mt16{margin-top:8px}

/* velden in een kaart: lucht boven elk label, zodat het niet tegen het vorige veld aan staat */
.form .pkaart > label{margin-top:14px;margin-bottom:6px}
.form .pkaart > h2 + label{margin-top:4px}
/* losse koppen en alinea's direct op een portaalpagina: lucht erboven, zodat ze niet tegen het vorige blok aan staan */
.pmain > h2,.pmain > form.form > h2{margin-top:28px;margin-bottom:8px}
.pmain > p + p,.pmain > h2 + p{margin-top:6px}

/* lijsten op een telefoon: een kaartje per rij, met de kolomkop als label voor elke regel (werkplek.js zet .kaartjes en data-label) */
@media (max-width:640px){
  .portaal :is(.tabelwrap,.scrol-x):has(.kaartjes){overflow:visible;border:0;background:none}
  .portaal table.kaartjes,.portaal table.kaartjes tbody,.portaal table.kaartjes tbody tr{display:block;width:100%}
  .portaal table.kaartjes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .portaal table.kaartjes caption{display:block;padding:0 0 10px;font-weight:600;text-align:left}
  .portaal table.kaartjes tbody tr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 16px;margin-bottom:12px}
  .portaal table.kaartjes tbody :is(td,th){display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:12px;padding:8px 0;border:0;border-top:1px solid var(--line);text-align:left;font-weight:400;overflow-wrap:anywhere}
  .portaal table.kaartjes tbody tr > :first-child{border-top:0}
  .portaal table.kaartjes tbody :is(td,th)::before{content:attr(data-label);font-weight:600;font-size:.9rem;color:var(--ink-soft)}
  .portaal table.kaartjes tbody :is(td,th):empty{display:none}
}
/* Alleen voor schermlezers; teller achter een menu-item (open voorstellen, wachtende kandidaten). */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.menu-teller{display:inline-block;min-width:1.5em;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--ink);color:#fff;font-size:.8rem;font-weight:700;line-height:1.4;text-align:center}
/* Het werk van een aanvraag: label boven de waarde op een telefoon, naast elkaar vanaf 560px. */
.werk{margin:10px 0;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--mist);display:grid;gap:2px 16px}
.werk dt{font-weight:600;font-size:.9rem;color:var(--ink-soft);margin-top:8px}
.werk dt:first-child{margin-top:0}
.werk dd{margin:0}
@media(min-width:560px){.werk{grid-template-columns:minmax(10rem,auto) 1fr;gap:6px 16px}.werk dt{margin-top:0}}
.form fieldset legend{font-weight:600;margin:14px 0 2px;padding:0}
.aan-zet{margin:6px 0 10px;font-size:.95rem;color:var(--ink-soft)}
.aan-zet strong{color:var(--ink)}
.tekenteller{margin-top:4px;text-align:right}
/* Te keuren documenten: twee kaarten naast elkaar op een breed scherm, onder elkaar op een telefoon. */
.keurlijst{display:grid;gap:16px}
.keurlijst>.pkaart{margin:0}
@media(min-width:900px){.keurlijst{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
/* Dossier: per document één rij (naam, status, knop), gegroepeerd; het uploadveld klapt pas uit als je het nodig hebt. */
.dossier-stand{margin:0 0 18px}
.docgroep{margin:0 0 22px}
.docgroep h2{font-size:1.15rem;margin:0 0 8px}
.doclijst{list-style:none;margin:0;padding:0;border:1.5px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.docrij{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 14px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.docrij:first-child{border-top:0}
.docrij-naam{display:flex;flex-direction:column;gap:2px;min-width:0}
.docrij-naam span,.docrij-naam a{font-size:.92rem}
.docrij-actie{display:contents}
.docrij-actie summary{grid-column:3;grid-row:1;list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border:1.5px solid var(--navy);border-radius:999px;font-weight:600;color:var(--navy);background:#fff}
.docrij-actie summary::-webkit-details-marker{display:none}
.docrij-actie[open] summary{background:var(--mist)}
.docrij-actie summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.docrij-actie .form{grid-column:1/-1;margin:4px 0 6px;padding:12px;border-radius:8px;background:var(--mist)}
@media(max-width:560px){.docrij{grid-template-columns:minmax(0,1fr) auto}.docrij-naam{grid-row:1/span 2}.docrij-status{justify-self:end}.docrij-actie summary{grid-column:2;grid-row:2;justify-self:end}.docrij-actie .form{max-width:none}}
.weekkop{margin:22px 0 8px;font-size:1.05rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
/* Agenda: week en maand in één kader, met legenda en de diensten op volgorde. */
.ag{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-block:24px}
.ag-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}
.ag-kop h2{font-size:1.15rem;margin:0}
.ag-kop h2 small{font-weight:400;color:var(--ink-soft);font-size:.9rem;margin-left:6px}
.ag-knoppen{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ag-schakel{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:#F3F5F4}
.ag-schakel a{padding:8px 16px;border-radius:999px;font-size:.88rem;font-weight:600;text-decoration:none;color:var(--ink-soft)}
.ag-schakel a[aria-current]{background:var(--navy-deep);color:#fff}
.ag-pijl,.ag-vandaag{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.88rem;font-weight:600;text-decoration:none;color:var(--ink)}
.ag-vandaag{padding:0 14px}
.ag-pijl:hover,.ag-vandaag:hover{border-color:var(--teal-text)}
.ag-legenda{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0;padding:10px 18px;border-bottom:1px solid var(--line);font-size:.85rem;color:var(--ink-soft)}
.ag-legenda span{display:inline-flex;align-items:center;gap:7px}
.ag-legenda .aantal{margin-left:auto}
.ag .stip{width:8px;height:8px;border-radius:50%;background:var(--teal-text);flex:none;display:inline-block}
.ag .stip.af{background:var(--navy)}
.ag-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.ag-dagnaam{padding:8px 4px;text-align:center;font-size:.78rem;font-weight:700;color:var(--ink-soft);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.ag-dag{min-height:150px;padding:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.ag-raster.maand .ag-dag{min-height:104px}
.ag-dag:nth-child(7n),.ag-dagnaam:nth-child(7n){border-right:0}
.ag-dag.leeg{background:#FAFBFA}
.ag-dag.vandaag{background:#EEF6F5}
.ag-dag h3{display:flex;align-items:center;justify-content:space-between;gap:4px;font:600 .9rem var(--body);margin:0 0 8px;font-variant-numeric:tabular-nums}
.ag-dag.vandaag h3 b{background:var(--teal-text);color:#fff;border-radius:999px;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}
.ag-dag h3 i{display:inline-flex;gap:3px}
.ag-dienst{display:block;padding:7px 8px;margin-top:6px;border-radius:6px;background:#E5EEEA;border-left:3px solid var(--teal-text);font-size:.78rem;line-height:1.3;text-decoration:none;color:var(--ink);overflow-wrap:anywhere}
.ag-dienst.af{background:#E8EEF3;border-left-color:var(--navy)}
.ag-dienst strong,.ag-dienst span{display:block}
.ag-dienst span{color:var(--ink-soft)}
.ag-lijst{padding:16px 18px 18px}
.ag-lijst h3{font-family:var(--hand);font-weight:600;font-size:1.5rem;color:var(--teal-text);margin:0 0 8px;letter-spacing:0}
.ag-lijst ol{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid var(--line)}
.ag-lijst li{position:relative;padding:9px 12px;border-radius:8px;display:grid;grid-template-columns:5.5rem 7.5rem 1fr auto;gap:10px;align-items:baseline;font-size:.92rem;scroll-margin-top:110px}
.ag-lijst li::before{content:"";position:absolute;left:-26px;top:12px;width:15px;height:15px;box-sizing:border-box;border:3px solid #fff;border-radius:50%;background:var(--teal-text)}
.ag-lijst li.af::before{background:var(--navy)}
.ag-lijst li:target{background:#EEF6F5;outline:1px solid var(--teal)}
.ag-lijst .wanneer{font-weight:600}
.ag-lijst .status{color:var(--ink-soft);font-size:.85rem}
.ag-lijst .meer{grid-column:1/-1;color:var(--ink-soft);font-size:.85rem}
.ag-lijst .meer a{font-weight:600;margin-left:10px}
@media(max-width:640px){
.ag-kop,.ag-legenda,.ag-lijst{padding-inline:12px}
.ag-kop h2 small{display:block;margin:2px 0 0}
.ag-dag,.ag-raster.maand .ag-dag{min-height:0;padding:8px 2px;text-align:center}
.ag-dag h3{flex-direction:column;margin:0;gap:5px}
.ag-dag h3>span{display:flex;flex-direction:column;align-items:center;gap:2px}
.ag-dag h3 i{min-height:8px}
.ag-dienst{display:none}
.ag-lijst li{grid-template-columns:1fr auto;gap:2px 10px}
}
/* beheerdossier: kop met kerncijfers, documentrijen met een icoon (doc_icoon in lib/documents.php) */
.ico{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}
.doskop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
.doskop h1{margin:6px 0}
.doskop p{margin:0}
.doscijfers{display:flex;flex-wrap:wrap;margin:0;background:#fff;border:1px solid var(--line);border-radius:8px}
.doscijfers div{display:flex;flex-direction:column-reverse;padding:10px 18px;text-align:right}
.doscijfers div+div{border-left:1px solid var(--line)}
.doscijfers dt{font-size:.8rem;color:var(--ink-soft)}
.doscijfers dd{margin:0;font-weight:700;font-size:1.15rem;color:var(--navy-deep);font-variant-numeric:tabular-nums}
.dosdocs :is(th,td){vertical-align:middle;font-variant-numeric:tabular-nums}
.dosdocs tbody tr:hover{background:#F6F9F7}
.dosdocs .doc{display:flex;align-items:center;gap:12px}
.dosdocs .tegel{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:8px;background:#E3EEF7;color:var(--navy)}
.dosdocs .tegel .ico{width:22px;height:22px}
.dosdocs small{display:block;font-size:.8rem;color:var(--ink-soft)}
.dosdocs .leeg td{color:var(--ink-soft)}
.dosdocs .leeg .tegel{background:var(--mist);color:var(--ink-soft)}
.dosvoet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:-12px}
@media(max-width:640px){.portaal table.dosdocs.kaartjes tbody th{display:block}.portaal table.dosdocs.kaartjes tbody th::before{content:none}}

/* Raamovereenkomst: leesbare tekst met ingevulde velden, stappen, akkoord en bewijsblad; afdrukken zonder portaal eromheen. */
.raam{max-width:820px}
.raam-stappen{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:16px 0 0;counter-reset:stap}
.raam-stappen li{counter-increment:stap;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;color:var(--ink-soft);background:#fff}
.raam-stappen li::before{content:counter(stap) ". "}
.raam-stappen li.klaar{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.raam-gegevens,.raam-teken,.raam-bewijs{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-block:24px}
.raam-doc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(20px,4vw,40px);margin-block:24px;line-height:1.65}
.raam-doc h2{font-size:1.15rem;margin:28px 0 8px}
.raam-doc h2:first-child{margin-top:0}
.raam-doc p,.raam-doc ul{margin:0 0 12px}
.raam-doc li{margin-bottom:4px}
.raam-titel{font:700 1.45rem var(--body);color:var(--navy-deep);margin:4px 0 18px}
.raam-tabel{width:100%;border-collapse:collapse}.raam-tabel th,.raam-tabel td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}.raam-tabel th{width:38%;font-weight:600}
.raam-veld{background:#EEF6F5;border-bottom:2px solid var(--teal-text);padding:0 3px;font-weight:600}
.raam-open{background:#FFF6DF;border-bottom:2px dashed #A0781A;padding:0 3px;color:#5A4100;font-style:italic}
.raam-keuze{background:#FFE9A6;color:#3C2E00;padding:0 3px}
.raam-concept{font-weight:700;color:#8A1F11}
.raam-bewijs table{width:100%;font-size:.85rem}
.raam-bewijs code{overflow-wrap:anywhere;font-size:.8rem}
@media print{
.pheader,.pfoot,.portal-menu-toggle,.raam-gegevens,.raam-teken,.raam-geen-print,.flash,.skip{display:none!important}
.raam,.raam-doc{max-width:none;border:0;padding:0;margin:0}
.raam-bewijs{break-before:page;border:0;padding:0}
.raam-veld,.raam-open,.raam-keuze{background:none;border:0;padding:0}
}
.raam-kop h1{font-size:clamp(1.6rem,3vw,2.3rem)}
/* aanvraagformulier: weekrooster met data, een week tegelijk met pijlen, en de lijst van gekozen dagen */
.wk-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:560px;margin:4px 0 10px}
.wk-nav strong{font-size:.98rem}
.wk-pijl{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font-size:1.1rem;font-weight:700}
.wk-pijl[disabled]{opacity:.35}
.wk-titel{margin:14px 0 6px}
.weekrooster thead th small{display:block;font-weight:400;font-size:.74rem;color:var(--ink-soft)}
.weekrooster thead th.verleden{opacity:.45}
.weekrooster input:disabled{background:repeating-linear-gradient(135deg,#F1F3F3 0 6px,#E4E8E8 6px 12px);border-color:var(--line);cursor:not-allowed}
.wk-lijst{max-width:560px;margin:16px 0 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:10px;background:#fff}
.wk-lijst li{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:.93rem}
.wk-lijst li:last-child{border-bottom:0;background:var(--mist);font-weight:600}
.wk-lijst span{color:var(--ink-soft)}
.wk-lijst li:last-child span{color:var(--ink)}
.wk-lijst li.fout span{color:var(--danger)}
/* Dashboard-kaarten (Financieel, Tarief): een raster van kaarten met één groot cijfer, in de kleuren van mijnLimitless. */
.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-block:0 16px}
.dk{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}
.dk.mint{background:#e7efea;border-color:#bdcfc2}
.dk.navy{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.dk.navy .dk-label,.dk.navy small{color:#C7DCE4}
.dk h2{font-size:1.15rem;margin:0 0 4px}
.dk .hulp{font-size:.88rem;color:var(--ink-soft);margin:0 0 14px}
.dk-label{font-size:.85rem;font-weight:600;color:var(--ink-soft);margin:0 0 6px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.dk-cijfer{font:600 clamp(1.6rem,3vw,2.2rem)/1.1 var(--display);color:var(--navy-deep);margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dk.navy .dk-cijfer{color:#fff}
.dk small{display:block;color:var(--ink-soft);font-size:.84rem;margin-top:6px}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s7{grid-column:span 7}.s12{grid-column:span 12}
.pil{display:inline-flex;align-items:center;font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap;max-width:100%}
.pil.groen{background:#E5EEEA;border-color:#bdcfc2;color:var(--teal-text)}
.pil.geel{background:#FFF6DF;border-color:#EBD9A6;color:#5A4100}
.kopbalk{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.kopbalk h1{font-size:clamp(1.8rem,3vw,2.5rem);margin:6px 0 0}
.kopbalk .eyebrow{margin:0}
.maandkeus{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px}
.maandkeus a{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;text-decoration:none;color:var(--ink);font-weight:700}
.maandkeus a:hover{background:#F3F5F4}
.maandkeus strong{padding:0 10px;font-size:.95rem}
.staven{display:flex;align-items:flex-end;gap:10px;height:130px;margin-top:18px;border-bottom:1px solid #bdcfc2}
.staven div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;font-size:.75rem;color:var(--ink-soft);min-width:0}
.staven i{display:block;width:100%;max-width:38px;min-height:3px;border-radius:6px 6px 0 0;background:var(--teal-text)}
.staven i.leeg{background:#cfdcd5}
.staven-as{display:flex;gap:10px;margin-top:6px}.staven-as span{flex:1;text-align:center;font-size:.75rem;color:var(--ink-soft);min-width:0}
.meter{width:150px;aspect-ratio:1;border-radius:50%;margin:10px auto 6px;display:grid;place-items:center}
.meter::before{content:"";grid-area:1/1;width:72%;aspect-ratio:1;border-radius:50%;background:#fff}
.meter b{grid-area:1/1;font:600 1.7rem var(--display);color:var(--navy-deep)}
.meter-tekst{text-align:center;font-size:.88rem;color:var(--ink-soft);margin:0}
.mini{display:grid;gap:12px;margin:0}
.mini div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mini div:last-child{border:0;padding:0}
.mini dt{font-size:.9rem;color:var(--ink-soft)}.mini dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.rijen{list-style:none;margin:12px 0 0;padding:0}
.rijen li{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 4px;border-top:1px solid var(--line)}
.rijen strong{display:block}.rijen .zacht{display:block;font-size:.86rem;color:var(--ink-soft)}
.rijen .bedrag{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.klein-noot{font-size:.85rem;color:var(--ink-soft);margin:14px 0 0}
.weekstrook.stippen{border:0;padding:0;gap:3px;max-width:none;margin:6px 0 4px;grid-template-columns:2rem repeat(24,minmax(0,1fr))}
.weekstrook.stippen i{height:auto;aspect-ratio:1;border-radius:50%}
.weekstrook.stippen+.ws-uren{max-width:none;padding:0;grid-template-columns:2rem repeat(4,minmax(0,1fr))}
.verdeling{display:grid;gap:10px;margin:0}
.verdeling div{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:.9rem}
.verdeling .balk{display:block;height:12px;border-radius:999px;min-width:2px}
.verdeling dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.verdeling .totaal{border-top:1px solid var(--line);padding-top:10px}
@media(max-width:900px){.s3,.s4,.s5,.s7{grid-column:span 12}}
@media(max-width:560px){.rijen li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.rijen li .tijd{grid-column:1}.rijen li .bedrag{grid-column:2;grid-row:1}.rijen li .pil{grid-column:2;grid-row:2;justify-self:end}
.verdeling div{grid-template-columns:minmax(0,1fr) 84px}.verdeling .balk{grid-column:1/-1;grid-row:2}}
.tarief-dash.tarief-premium,.tarief-dash .form{max-width:none}
.tarief-dash .bon{margin-top:16px}
.verdeling .ws-normaal{background:var(--teal-text)}

/* Bedrijfsgegevens en het adres van een bevestigde dienst. */
.adres{display:flex;gap:12px;align-items:flex-start;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#F7FAF9}
.adres{flex-wrap:wrap}.adres-bel{flex:1 0 100%}.adres strong{display:block}.adres p{margin:0}.adres .route{margin-left:auto;flex:none}
.pf-kaart>p.zacht{margin:0;padding:12px 18px 0}
.bedrijf-locatie{position:relative;border-bottom:1px solid var(--line)}.bedrijf-locatie:last-child{border-bottom:0}
.bedrijf-locatie .pf-rijen>div{padding-right:130px}
.bedrijf-locatie .pf-wijzig>summary{top:10px}
.bedrijf-locatie:last-child .pf-wijzig>summary{position:static;margin:12px 18px}
@media(max-width:560px){.adres{flex-wrap:wrap}.adres .route{margin-left:0;width:100%;justify-content:center}}
/* Startpagina's van beheer en instelling: klikbare cijferkaarten, een takenlijst, diensten en een korte tijdlijn. Bouwt op de dashboard-kaarten hierboven. */
.start .kopbalk{gap:16px 24px;margin-bottom:24px}
.start .kopbalk>div{min-width:0;flex:1 1 340px}
.start .kopbalk h1{max-width:28ch;margin-top:10px}
.start .dash{align-items:start;gap:20px}
.start .dk{padding:24px}
.start .dk-label{color:var(--ink);font-size:1rem;line-height:1.4;margin:0}
.start .dk-cijfer{margin-top:16px}
.start .dk small{font-size:.875rem;line-height:1.5;margin-top:10px}
.start .s8{grid-column:span 8}
.start a.dk{display:flex;flex-direction:column;align-self:stretch;text-decoration:none;color:var(--ink)}
.start a.dk .dk-label{font-size:.92rem;align-items:start;flex-wrap:nowrap;min-height:2.8em}
.start a.dk small{margin-top:auto;padding-top:10px}
.start .pijl{flex:none;font-size:1.3rem;line-height:1;font-weight:600;color:var(--navy)}
.start .dk.let-op{border-color:var(--navy);background:var(--navy-deep);color:#fff}
.start .let-op .dk-label,.start .let-op .dk-cijfer,.start .let-op small,.start .let-op .pijl{color:#fff}
.start a.dk:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.start a.dk:hover{border-color:var(--teal-text)}.start a.dk:hover .dk-label{text-decoration:underline;text-underline-offset:4px}}
.start .takenkaart{border-top:3px solid var(--navy)}
.start .achtergrond{background:var(--mist)}
.kaartkop{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:8px}
.kaartkop a:not(.btn){font-size:.92rem;min-height:44px;display:inline-flex;align-items:center}
.taken{list-style:none;margin:16px 0 0;padding:0}
.taken li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.taken li:last-child{padding-bottom:0}
.taken .getal{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--mist);color:var(--navy-deep);font:700 1.05rem var(--display);font-variant-numeric:tabular-nums}
.taken strong{display:block;font-size:.95rem;line-height:1.5}
.taken .zacht{display:block;font-size:.875rem;color:var(--ink-soft);margin-top:4px}
.taken .btn{max-width:12rem;white-space:normal;text-align:center}
.leeg-taken{margin:16px 0 0;font-size:1.1rem;font-weight:600;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.leeg-taken a{font-size:.95rem;font-weight:400}
.tijdlijn{list-style:none;margin:16px 0 0;padding:0 0 0 20px;border-left:1px solid var(--line)}
.tijdlijn li{display:block;position:relative;padding:0 0 18px;font-size:.9rem;line-height:1.55}
.tijdlijn li:last-child{padding-bottom:0}
.tijdlijn li::before{content:"";position:absolute;left:-25px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--teal-text)}
.tijdlijn time{display:block;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-soft);margin-bottom:4px;white-space:nowrap}
.tijdlijn .zacht{color:var(--ink-soft)}
.verhouding{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:18px 0 8px}
.verhouding i{display:block;height:100%;background:var(--teal-text)}
.start .mini{margin-top:20px;gap:14px}
.start .mini div{flex-wrap:wrap}
.start .mini dd{margin-left:auto;text-align:right}
.start .hulp{margin:16px 0 8px;font-size:.9rem}
.uitleg{border-top:1px solid var(--line);margin-top:12px}
.uitleg summary{cursor:pointer;font-weight:600;min-height:44px;padding:12px 0;color:var(--navy)}
.uitleg .stappenlijst{padding-left:24px;margin:8px 0 0;font-size:.9rem}
.uitleg .kleine-lijst{list-style:none;margin:4px 0 8px;padding:0;display:grid;gap:8px;font-size:.92rem}
.start .privacykaart{background:transparent;padding:16px 20px}
.start .privacykaart .klein-noot{margin:0}
@media(max-width:1000px){.start .dash>.s3{grid-column:span 6}.start .dash>.s8,.start .dash>.s4{grid-column:span 12}}
@media(max-width:560px){.start .dash{gap:14px}.start .dk{padding:20px}.start a.dk{padding:18px}.start a.dk .dk-label{min-height:0}.start .kopbalk .btn{width:100%}
.taken li{grid-template-columns:40px minmax(0,1fr);gap:10px 12px}.taken .btn{grid-column:2;justify-self:start;max-width:100%}}
@media(max-width:419px){.start .dash>.s3{grid-column:span 12}}

.adres{flex-wrap:wrap}.adres .adres-bel{flex-basis:100%}

/* Lijsten van beheer en instelling: statusknoppen met een teller, rijen in een kaart, voortgang als balkje, acties ingeklapt. */
.filters-rij{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.filters-rij a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}
.filters-rij a b{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--mist);font-size:.8rem;color:var(--navy-deep)}
.filters-rij a[aria-current]{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.filters-rij a[aria-current] b{background:#fff;color:var(--navy-deep)}
.filters-rij a:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.lijstkaart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 24px}
.lrij{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto auto;gap:8px 20px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.lrij:first-child{border-top:0}
.lrij strong{display:block;font:600 1.05rem/1.4 var(--display)}
.lrij .zacht{display:block;font-size:.87rem;color:var(--ink-soft);margin-top:4px}
.lrij .labels{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lrij .bedrag{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.lrij .reden{grid-column:1/-1;margin:0;font-size:.87rem;color:var(--ink-soft)}
.pil.oranje{background:#FBE6D8;border-color:#EFC3A5;color:#7A3410}
.pil.blauw{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.vgang{display:block;min-width:130px;width:100%}
.vgang .vg-tekst{font-size:.85rem;color:var(--ink-soft);margin:0 0 6px}
.vgang .balkje{display:block;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.vgang .balkje div{display:block;height:100%;min-width:4px;background:var(--teal-text);margin:0}
details.acties-in{grid-column:1/-1}
details.acties-in summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--navy);font-size:.92rem}
.acties-in .paneel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:8px;padding:16px;background:var(--mist);border-radius:10px}
.acties-in label,.aanvraag details label{display:block;font-size:.85rem;font-weight:600}
.acties-in input,.aanvraag details input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin:4px 0 8px;font:inherit}
.acties-in p,.aanvraag details p{margin:0 0 8px;font-size:.85rem}
.aanvraag{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:16px}
.aanvraag.wacht{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.aanvraag-kop{display:flex;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;align-items:flex-start}
.aanvraag-kop h2{font-size:1.5rem;margin:0 0 6px}
.aanvraag-kop .zacht{color:var(--ink-soft);font-size:.92rem;margin:0}
.werk-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.werk-tags li{font-size:.82rem;padding:4px 10px;border-radius:999px;background:var(--mist);color:var(--navy-deep)}
.aanvraag .vgang{margin-top:16px;max-width:320px}
.kandidaten{margin:20px 0 0;padding:0;list-style:none}
.kandidaten h3{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 4px}
.kandidaat{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px 16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.kandidaat .avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mist);color:var(--navy-deep);font-weight:700}
.kandidaat .knoppen{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start}
.kandidaat .knoppen form{margin:0}
.kandidaat .zacht{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:2px}
.kandidaat details{grid-column:2/-1}
.aanvraag>details{margin-top:14px;border-top:1px solid var(--line);padding-top:4px}
.aanvraag summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink-soft);font-size:.9rem}
@media(max-width:760px){
  .lrij{grid-template-columns:minmax(0,1fr) auto}
  .lrij .vgang,.lrij .plaats{grid-column:1}
  .lrij .actie{grid-column:2;grid-row:1}
  .lijstkaart{padding:4px 16px}
  .kandidaat{grid-template-columns:44px minmax(0,1fr)}
  .kandidaat .knoppen{grid-column:1/-1;justify-content:flex-start}
  .kandidaat details{grid-column:1/-1}
}

/* Diensten en uren: de eerstvolgende dienst als donkere kaart, rijen per week, uren met een balk van drie stappen. */
.eerst{background:var(--navy-deep);color:#fff;border-radius:16px;padding:24px;margin-bottom:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center}
.eerst .eyebrow{color:#cfe3dc;margin:0 0 6px}
.eerst h2{color:#fff;font-size:1.6rem;margin:0 0 6px}
.eerst p{margin:0;color:#dfe8ec}
.eerst .bedrag-groot{font:700 1.4rem var(--display);color:#fff}
.eerst .knoppen{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.eerst .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.eerst details.acties-in summary{color:#fff}
.eerst .paneel{color:var(--ink)}
.eerst .paneel p{color:var(--ink)}
.eerst .paneel .zacht{color:var(--ink-soft)}
.eerst .paneel .btn-ghost{color:var(--navy);border-color:var(--navy)}
.weekkop-k{font:600 .8rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:24px 0 8px}
.lrij .bedrag .houd{display:block;font-weight:400;font-size:.8rem;color:var(--ink-soft)}
.acties-in .knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.acties-in dl.werk{margin:8px 0 0}
.ustap{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 0 6px;min-width:180px}
.ustap i{display:block;height:8px;border-radius:999px;background:var(--line)}
.ustap i.klaar{background:var(--teal-text)}
.ustap i.bezig{background:#E3B341}
.stap-tekst{font-size:.85rem;color:var(--ink-soft);margin:0}
.stap-tekst b{color:var(--ink)}
.uren-tijd{font-variant-numeric:tabular-nums;font-size:.9rem;text-align:right}
.uren-tijd small{display:block;color:var(--ink-soft);font-size:.8rem}
.tijd-in{display:flex;gap:12px}
.tijd-in div{flex:1}
.noot{font-size:.87rem;color:var(--ink-soft);margin:16px 0 0}
.lrij .history{grid-column:1/-1;border:0;margin:0;padding:0}
@media(max-width:760px){.eerst{grid-template-columns:1fr}.uren-tijd{text-align:left}}

/* Voorstellen: links wat en waar, rechts het bedrag met de knoppen. */
.vk{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.vk .werk-tags{margin-top:16px}
.vk .labels{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.noot-klein{font-size:.87rem;color:var(--ink-soft);margin:16px 0 0}
.waarschuw{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:#FFF6DF;border:1px solid #EBD9A6;color:#5A4100;font-size:.9rem}
.bedragkaart{background:var(--mist);border-radius:12px;padding:20px}
.bedragkaart .houd-label{font-size:.85rem;color:var(--ink-soft);margin:0}
.bedragkaart .houd-groot{font:700 2rem/1.1 var(--display);color:var(--navy-deep);margin:4px 0 14px;font-variant-numeric:tabular-nums}
.bedragkaart dl{margin:0 0 16px;font-size:.87rem;display:grid;gap:6px}
.bedragkaart dl div{display:flex;justify-content:space-between;gap:12px}
.bedragkaart dt{color:var(--ink-soft)}
.bedragkaart dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.bedragkaart form{margin:0}
.bedragkaart .btn-primary{width:100%;justify-content:center}
.bedragkaart details{margin-top:8px}
.bedragkaart summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--navy);font-size:.92rem}
.bedragkaart label{display:block;font-size:.85rem;font-weight:600}
.bedragkaart input[type=text]{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin:4px 0 8px;font:inherit}
.bedragkaart .zacht{font-size:.8rem;color:var(--ink-soft);margin:0 0 8px}
.bedragkaart .notice{margin:0;font-size:.87rem}
.beslis{font-size:.85rem;color:var(--ink-soft);text-align:center;margin:10px 0 0}
@media(max-width:860px){.vk{grid-template-columns:1fr}
/* Op de telefoon: bedrag en Accepteren direct onder datum, plaats en waarschuwing; de rest van de uitleg daaronder. */
.vk{display:flex;flex-direction:column;gap:16px}.vk>div:first-child{display:contents}.vk>div:first-child>*{order:2;margin:0}.vk>div:first-child>:is(.aanvraag-kop,.labels,.waarschuw){order:0}.vk .bedragkaart{order:1;align-self:stretch;width:auto}}

/* Een aanvraag openen in beheer: links de aanvraag en de kandidaten, rechts de stand. */
.terug{display:inline-flex;align-items:center;min-height:44px;font-size:.92rem;margin-bottom:4px}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.bkaart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:20px}
.bkaart h2{font-size:1.15rem;margin:0 0 4px}
.bkaart .toel{font-size:.87rem;color:var(--ink-soft);margin:0 0 8px}
.bkaart .lrij{grid-template-columns:minmax(0,1fr) auto auto}
.bkaart .lrij form{margin:0}
.kopregel{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.kopregel .tel{font-size:.85rem;color:var(--ink-soft)}
.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 20px;margin:16px 0 0}
.feiten dt{font-size:.8rem;color:var(--ink-soft);margin:0 0 2px}
.feiten dd{margin:0;font-weight:600}
.intern{margin:18px 0 0;padding:14px 16px;background:var(--mist);border-radius:10px;font-size:.9rem}
.intern p{margin:0 0 6px}
.intern p:last-child{margin:0}
.intern .kopje{font:600 .75rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.redenen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:0;list-style:none}
.redenen li{font-size:.8rem;padding:3px 10px;border-radius:999px;background:#FBE6D8;color:#7A3410}
.zij .bkaart{padding:20px}
.zij .grootgetal{font:700 2rem/1.1 var(--display);color:var(--navy-deep);margin:4px 0 10px}
.stappenrij{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;font-size:.88rem}
.stappenrij li{display:flex;justify-content:space-between;gap:10px}
.stappenrij b{font-variant-numeric:tabular-nums}
.zij details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--navy);font-size:.92rem}
.zij label{display:block;font-size:.85rem;font-weight:600}
.zij input[type=text]{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin:4px 0 8px;font:inherit}
@media(max-width:900px){.detail{grid-template-columns:1fr}.zij{order:-1}}

/* Agenda-abonnement: de kaart op Diensten en Agenda. */
.ak{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;margin:0 0 24px}
.ak h2{font-size:1.25rem;margin:0 0 6px}
.ak .lead{color:var(--ink-soft);margin:0 0 18px;max-width:60ch}
.ak .knoprij{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.ak .knoprij form{margin:0}
.ak label{display:block;font-size:.85rem;font-weight:600}
.linkveld{display:flex;gap:8px;margin:6px 0 4px}
.linkveld input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:500 .85rem/1.2 ui-monospace,Consolas,monospace;background:#F7F9F8;color:var(--ink)}
.ak .klein{font-size:.85rem;color:var(--ink-soft);margin:0}
.ak .goed{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;font-size:.92rem}
.ak .goed li{display:grid;grid-template-columns:22px 1fr;gap:8px}
.ak .goed li::before{content:"✓";color:var(--teal-text);font-weight:700}
.ak .goed li.let::before{content:"!";color:#7A3410}
.ak .beheer{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.ak .beheer summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--navy);font-size:.92rem}
.ak .beheer .paneel{background:var(--mist);border-radius:10px;padding:16px;display:grid;gap:10px}
.ak .beheer .knoprij{margin:0}
.ak-stand{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.ak .ak-open{border-top:0;margin-top:0;padding-top:0}.ak .ak-open[open]>summary{margin-bottom:8px}

/* Dossier openen in beheer: cijferkaarten, documenten als rijen, vaste week als raster. */
.dos-sub{margin:6px 0 0}
.lrij .zacht,.dos-sub,.profiel-dl dd{overflow-wrap:anywhere}
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 20px}
.kpi>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.kpi dt{font-size:.85rem;color:var(--ink-soft)}
.kpi dd{margin:6px 0 0;font:700 1.6rem/1.15 var(--display);color:var(--navy-deep)}
.kpi small{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:4px}
.kpi .let{border-color:#EFC3A5;background:#FFF8F3}
.bkaart .doc-r{grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr) auto}
.doc-r .zacht b{color:var(--ink);font-weight:600}
.doc-r .reden{color:#7A3410;margin:6px 0 0;font-size:.85rem}
.doc-r>span:last-child{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.doc-r form{margin:0}
.compleet{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;font-size:.92rem}
.compleet li{display:flex;justify-content:space-between;gap:10px;align-items:center}
.profiel-dl{display:grid;gap:10px;margin:12px 0 0}
.profiel-dl dt{font-size:.8rem;color:var(--ink-soft)}
.profiel-dl dd{margin:2px 0 0;font-weight:600}
.tarief-r{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.92rem}
.tarief-r b{font-variant-numeric:tabular-nums;text-align:right}
.tarief-r small{display:block;color:var(--ink-soft);font-size:.8rem;font-weight:400}
.vweek{display:grid;grid-template-columns:34px repeat(12,1fr);gap:3px;margin-top:12px;font-size:.75rem;color:var(--ink-soft)}
.vweek span{height:16px;border-radius:4px;background:var(--line)}
.vweek span.aan{background:var(--teal-text)}
.vweek .d{background:none;height:auto;line-height:16px;font-weight:600}
.vweek .u{background:none;height:auto;text-align:left;font-style:normal}
.vweek .vh{height:auto}
.afwijking{font-size:.88rem;margin:14px 0 0;padding-left:20px}
.afwijking li{margin:4px 0}
.prive{background:#fff;border:1px dashed var(--line);border-radius:14px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.prive p{margin:0;font-size:.9rem;color:var(--ink-soft);max-width:60ch}
.prive strong{color:var(--ink)}
@media(max-width:900px){.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.bkaart .doc-r{grid-template-columns:minmax(0,1fr) auto}.doc-r>span:last-child{justify-content:flex-start}}
.doc-r strong{overflow-wrap:anywhere;hyphens:auto}

/* Gebruikers en Documenten in beheer. */
.zoekrij{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:0 0 16px}
.zoekrij .filters-rij{margin:0}
.gzoek{display:flex;gap:8px;margin:0}
.gzoek input{min-width:240px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;font:inherit;background:#fff}
.lijstkaart .gebr{grid-template-columns:44px minmax(0,1.4fr) minmax(0,1fr) auto auto}
.gav{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mist);color:var(--navy-deep);font-weight:700}
.nognodig{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.nognodig li{font-size:.78rem;padding:3px 9px;border-radius:999px;background:#FBE6D8;color:#7A3410}
.rijacties{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.rijacties form{margin:0}
.acties-in .paneel select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin:4px 0 8px;font:inherit;background:#fff}
.bkaart .aanmr{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto}
.uitnodig{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin:20px 0}
.uitnodig h2{font-size:1.15rem;margin:0 0 12px}
.uitnodig .velden,.vastleggen .velden{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end}
.vastleggen .velden{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;margin-top:12px}
.uitnodig label,.vastleggen label{display:block;font-size:.82rem;font-weight:600;margin-bottom:4px}
.uitnodig input,.uitnodig select,.vastleggen input,.vastleggen select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.kpi.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.keur{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:14px}
.keur h3{font-size:1.1rem;margin:0 0 4px}
.keur .zacht{font-size:.88rem;color:var(--ink-soft);margin:0}
.keur .bestand{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-weight:600;text-decoration:none;min-height:44px}
.keur .bestand .zacht{font-weight:400}
.keur-actie{background:var(--mist);border-radius:12px;padding:16px}
.keur-actie form{margin:0}
.keur-actie label{display:block;font-size:.82rem;font-weight:600;margin-bottom:4px}
.keur-actie input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;margin-bottom:6px;background:#fff}
.keur-actie .btn-primary{width:100%;justify-content:center;margin-top:6px}
.keur-actie details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--navy);font-size:.92rem}
.keur-actie .klein{font-size:.8rem;color:var(--ink-soft);margin:0}
@media(max-width:900px){.lijstkaart .gebr{grid-template-columns:44px minmax(0,1fr)}.lijstkaart .gebr>*:nth-child(n+3){grid-column:2}.rijacties{justify-content:flex-start}.uitnodig .velden,.vastleggen .velden{grid-template-columns:1fr}.keur{grid-template-columns:1fr}.gzoek{width:100%}.gzoek input{min-width:0;flex:1}.kpi.drie{grid-template-columns:1fr}.bkaart .aanmr{grid-template-columns:1fr}.rijacties{justify-content:flex-start}}

/* Facturen: actie bovenaan, filters met jaar, rijen per maand, btw ingeklapt. */
.factuur-actie{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#FFF8F3;border:1px solid #EFC3A5;border-radius:14px;padding:16px 20px;margin:0 0 20px}
.factuur-actie p{margin:0}
.factuur-actie .zacht{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:2px}
.fbalk{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:0 0 8px}
.fbalk .filters-rij{margin:0}
.fbalk form{display:flex;gap:8px;align-items:center;margin:0}
.fbalk select{width:auto;padding:10px 14px;border:1px solid var(--line);border-radius:999px;font:inherit;background:#fff;min-height:44px}
.maandkop{font:600 1.05rem var(--display);margin:24px 0 10px;color:var(--navy-deep)}
.lijstkaart .frij{grid-template-columns:minmax(0,1.5fr) auto auto minmax(110px,auto) auto}
.frij .verval{font-size:.85rem;color:var(--ink-soft);white-space:nowrap}
.pil.navy{background:#E6EDF4;border-color:#C5D3E1;color:var(--navy-deep)}
.btwkaart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 24px;margin-top:24px}
.btwkaart[open]{padding-bottom:20px}
.btwkaart summary{display:flex;gap:12px;align-items:center;justify-content:space-between;min-height:56px;cursor:pointer;font-weight:600}
.btwkaart summary .zacht{font-weight:400;color:var(--ink-soft);font-size:.9rem}
.btwkaart summary .wijzig{color:var(--navy);text-decoration:underline}
@media(max-width:900px){.lijstkaart .frij{grid-template-columns:minmax(0,1fr) auto}.frij>.pil{grid-column:1;grid-row:2;justify-self:start}.frij>.verval{grid-column:1;grid-row:3}.frij>.bedrag{grid-column:2;grid-row:1}.frij>.btn{grid-column:2;grid-row:2/4;align-self:end}}

/* Beschikbaarheid: strook van 14 dagen, schakelaar vaste week of een dag, blokken per dagdeel. */
.schakel{display:inline-flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:999px;margin:0 0 4px}
.schakel a{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem}
.schakel a[aria-current]{background:var(--navy-deep);color:#fff}
.schakel a:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.veertien{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:0 0 12px;padding:0;list-style:none}
.veertien a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 10px 12px;text-decoration:none;color:var(--ink);position:relative}
.veertien a[aria-current]{border:2px solid var(--navy-deep);padding:9px 9px 11px}
.veertien .dg{display:block;font-weight:700;font-size:.9rem}
.veertien .dt{display:block;font-size:.78rem;color:var(--ink-soft)}
.veertien .delen{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:8px}
.veertien .delen i{height:8px;border-radius:3px;background:#EEF1F3}
.veertien .delen i.n{background:#8D9CC0}.veertien .delen i.o{background:#F4B740}.veertien .delen i.m{background:#5CBEC7}.veertien .delen i.a{background:#E0876A}
.veertien .uur{display:block;font-size:.78rem;margin-top:6px;color:var(--ink-soft)}
.veertien .afw{position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:#E07B39}
.legenda{display:flex;flex-wrap:wrap;gap:14px;font-size:.8rem;color:var(--ink-soft);margin:0 0 24px}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:12px;height:8px;border-radius:3px;display:inline-block}
.legenda i.n{background:#8D9CC0}.legenda i.o{background:#F4B740}.legenda i.m{background:#5CBEC7}.legenda i.a{background:#E0876A}
.legenda i.r{width:9px;height:9px;border-radius:50%;background:#E07B39}
.dagkaart{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.dagkop{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.dagkop h2{margin:0}
.dblokken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;margin:0;padding:0}
.dblokken label{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:.9rem;cursor:pointer}
.dblokken label:has(input:checked){background:#DDF0F1;border-color:#5CBEC7;font-weight:600}
.dblokken label:has(input:focus-visible){outline:3px solid var(--navy);outline-offset:2px}
.dagdeelkop{grid-column:1/-1;font-size:.8rem;font-weight:600;color:var(--ink-soft);margin:8px 0 0}
.herstel{margin-top:12px}
.herstel button{background:none;border:0;padding:0;min-height:44px;color:var(--navy);text-decoration:underline;font:inherit;font-size:.9rem;cursor:pointer}
.dagvergelijk{background:var(--mist);border-radius:12px;padding:16px;font-size:.9rem}
.dagvergelijk p{margin:0 0 8px}
.dagvergelijk form{display:grid;gap:6px;margin-top:14px}
.dagvergelijk input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
@media(max-width:900px){.veertien{grid-template-columns:repeat(7,minmax(64px,1fr));overflow-x:auto;padding-bottom:6px}.dagkaart{grid-template-columns:1fr}}
@media(max-width:520px){.dblokken{grid-template-columns:repeat(2,minmax(0,1fr))}}
.btwkaart fieldset{border:0;padding:0;margin:8px 0 12px}
.btwkaart legend{font-weight:600;margin-bottom:4px;padding:0}
.btwkaart label.check{display:flex;gap:10px;align-items:center;min-height:44px}
.btwkaart label[for]{display:block;font-weight:600;margin-top:8px}
.btwkaart .hint{all:unset;font-weight:400;color:var(--ink-soft);font-size:.9rem}
.btwkaart input:not([type]){display:block;width:100%;max-width:320px;min-height:44px;padding:9px 12px;margin-top:4px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.dagkaart .herstel{display:block;text-align:left}
.dagkaart .herstel button{width:auto;display:inline;text-align:left}

/* Raamovereenkomst: wie is aan zet, wat ontbreekt, volgende stap; bewijsblad ingeklapt zonder brede tabel. */
.rstand{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin:20px 0 24px}
.rstand.een{grid-template-columns:1fr}
.rstand h2{margin:0 0 6px;font-size:1.3rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rstand .zet{margin:0 0 16px;color:var(--ink-soft)}
.rstand.een .zet{margin:0}
.rlijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rlijst li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.rlijst .bol{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);font-weight:700;font-size:.85rem;color:var(--ink-soft)}
.rlijst .klaar .bol{background:var(--teal-text);border-color:var(--teal-text);color:#fff}
.rlijst .aanzet .bol{border-color:#E07B39;color:#7A3410;background:#FFF8F3}
.rlijst strong{display:block}
.rlijst .zacht{display:block;font-size:.87rem;color:var(--ink-soft)}
.mist{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.mist li{display:inline;font-size:.78rem;padding:3px 9px;border-radius:999px;background:#FBE6D8;color:#7A3410}
.ractie{background:var(--mist);border-radius:12px;padding:18px;display:grid;gap:10px;align-content:start}
.ractie p{margin:0;font-size:.92rem}
.ractie .btn{justify-content:center}
.rbewijs{padding:4px 24px}
.rbewijs[open]{padding-bottom:16px}
.rbewijs summary{display:flex;justify-content:space-between;align-items:center;min-height:56px;cursor:pointer;font-weight:600}
.rbewijs summary .zacht{font-weight:400;font-size:.9rem;color:var(--ink-soft)}
.bewijsrij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 20px;padding:14px 0;margin:0;border-top:1px solid var(--line);font-size:.9rem}
.bewijsrij dt{font-size:.78rem;color:var(--ink-soft)}
.bewijsrij dd{margin:0;overflow-wrap:anywhere}
.rbewijs .vingerafdruk{font-size:.82rem;color:var(--ink-soft)}
@media(max-width:900px){.rstand{grid-template-columns:1fr}.bewijsrij{grid-template-columns:1fr 1fr}}

/* Logboek: soorten met tellers, periode en persoon, regels per dag met details ingeklapt. */
.lbalk{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:0 0 12px}
.lzoek{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lzoek select{width:auto;padding:10px 14px;border:1px solid var(--line);border-radius:999px;font:inherit;background:#fff;min-height:44px}
.dagkop-l{font:600 1rem var(--display);margin:22px 0 8px;color:var(--navy-deep)}
.lijstkaart .lgrij{grid-template-columns:52px 40px minmax(0,1.6fr) minmax(0,1fr) auto}
.lgrij time{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.9rem}
.lgrij .gav{width:36px;height:36px;font-size:.85rem}
.lgrij .op{font-size:.88rem;color:var(--ink-soft)}
.lgrij details{grid-column:3/-1;font-size:.85rem;color:var(--ink-soft);overflow-wrap:anywhere}
.lgrij details summary{cursor:pointer;color:var(--navy);min-height:32px;display:inline-flex;align-items:center}
.pil.rood{background:#FBE3E3;border-color:#EBB9B9;color:#8A1F1F}
@media(max-width:900px){.lijstkaart .lgrij{grid-template-columns:52px minmax(0,1fr)}.lgrij .gav{display:none}.lgrij>*:nth-child(n+3){grid-column:2}.lgrij>.pil{justify-self:start}.lzoek,.lzoek select{width:100%}}
.lijstkaart .lgrij{padding:12px 0;gap:2px 16px}
.lgrij details summary{min-height:28px;font-size:.82rem}

/* Tarief: uurtarief met bonnetje bovenaan, toeslagen als rijen, uitleg en rekenvoorbeeld ingeklapt, opslaan onderaan. */
.tkaart{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;margin:0 0 20px}
.tkaart h2{font-size:1.25rem;margin:0 0 12px}
.tinvoer{display:flex;align-items:center;gap:10px}
.tinvoer span{font:700 1.6rem var(--display);color:var(--navy-deep)}
.tarief-premium .tinvoer input.inv{width:170px;max-width:100%;font:700 1.6rem var(--display);color:var(--navy-deep);border-radius:12px}
.tkaart .schuiflim{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-soft);margin:0}
.tbon{background:var(--mist);border-radius:14px;padding:20px;align-self:start}
.tbon dl{margin:0}
.tbon dl>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:.95rem}
.tbon dl>div+div{border-top:1px solid #d6e2dd}
.tbon dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.tbon .som dt{font-size:1.05rem;font-weight:600}
.tbon .som dd{font:700 1.5rem var(--display);color:var(--navy-deep)}
.tbon>.zacht{font-size:.8rem;color:var(--ink-soft);margin:10px 0 0}
.tskop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:28px 0 6px}
.tskop h2{font-size:1.25rem;margin:0}
.lijstkaart .tsrij{grid-template-columns:16px minmax(0,1.3fr) minmax(120px,1fr) auto 110px;gap:8px 18px}
.tsrij .kleurvak{width:14px;height:14px;border-radius:4px}
.tsrij .slider{height:32px}
.tsrij .pct{display:flex;align-items:center;gap:6px;white-space:nowrap}
.tarief-premium .tsrij .pct input.inv{width:78px;min-height:40px;text-align:right}
.tsrij .bedrag small{display:block;font-weight:400;font-size:.78rem;color:var(--ink-soft)}
.tsrij .veldfout{grid-column:2/-1;margin:0}
.uitklap{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 24px;margin-top:14px}
.uitklap[open]{padding-bottom:20px}
.uitklap summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;cursor:pointer;font-weight:600}
.uitklap summary .zacht{font-weight:400;font-size:.9rem;color:var(--ink-soft)}
.opslaanbalk{position:sticky;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 20px;margin-top:20px;box-shadow:0 -6px 20px -14px rgba(6,48,79,.35)}
.opslaanbalk p{margin:0;font-size:.9rem;color:var(--ink-soft)}
@media(max-width:900px){.tkaart{grid-template-columns:1fr;padding:20px}.lijstkaart .tsrij{grid-template-columns:16px minmax(0,1fr) auto}.tsrij>.slider{grid-column:2;grid-row:2}.tsrij>.pct{grid-column:3;grid-row:2}.tsrij>.bedrag{grid-column:3;grid-row:1}}

/* Financieel: wat je nu moet doen eerst, diensten in groepen per stand, weekgrafiek onderaan. */
.groepkop{display:flex;align-items:baseline;gap:10px;font:600 1.05rem var(--display);margin:22px 0 10px;color:var(--navy-deep)}
.groepkop .zacht{font:400 .88rem var(--body);color:var(--ink-soft)}
.lijstkaart .frij2{grid-template-columns:minmax(0,1.5fr) auto auto 110px}
.fbalkje{display:block;height:8px;border-radius:999px;background:#e3ebe7;margin-top:10px;overflow:hidden}
.fbalkje i{display:block;height:100%;background:var(--teal-text)}
.kpi .fknop{margin-top:10px}
.fweek{margin-top:24px}
@media(max-width:900px){.lijstkaart .frij2{grid-template-columns:minmax(0,1fr) auto}}

/* Kopbalk op telefoon en tablet: één rij (logo en Menu), Uitloggen onderaan in het menu. */
.menu-uitloggen{display:none}
@media(max-width:1049px){
  .has-menu .pheader .wrap{min-height:0;padding-block:8px;flex-wrap:wrap}
  .has-menu .pheader .pmerk{flex-basis:auto}
  .has-menu .pheader .portal-menu-toggle{margin-left:auto}
  .has-menu .kop-uitloggen{display:none}
  .pheader nav .menu-uitloggen{display:block;margin:12px 10px 4px;padding-top:14px;border-top:1px solid var(--line)}
  .pheader nav .menu-uitloggen .btn-ghost{border-color:var(--navy);color:var(--navy)}
}

/* Dossier: wat in orde is, is rustig (vinkje in groen, Vervangen als tekstlink) en klapt in. */
.docgroep-klap>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px}
.docgroep-klap>summary::-webkit-details-marker{display:none}
.docgroep-klap>summary h2{margin:0}
.docgroep-klap>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(-45deg);transition:transform .2s ease}
.docgroep-klap[open]>summary::after{transform:rotate(45deg)}
.docgroep-klap>summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.docgroep-klaar .badge{border:0;padding:0;font-size:.85rem;color:#1f6b3a;background:none}
.docgroep-klaar .docrij-actie summary{border:0;padding:0 4px;background:none;font-weight:500;text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.docgroep-klap>summary::after{transition:none}}
.veertien-kop{font-size:1.15rem;margin:28px 0 2px}
.schakel+.veertien-kop{margin-top:20px}
/* Tarief: de opslaanbalk plakt pas onderin na een wijziging; zonder script blijft hij altijd plakken. */
.js #tariefform:not(.is-gewijzigd) .opslaanbalk{position:static;box-shadow:none}
/* Dashboard instelling: de vier tellers op telefoon en tablet twee aan twee, niet vier hoge kaarten onder elkaar. */
@media(max-width:900px){.start .dash>.s3{grid-column:span 6;padding:16px}}
@media(max-width:380px){.start .dash>.s3 small{font-size:.8rem}}
/* Filterknoppen op telefoon: één rij die opzij schuift, in plaats van drie of vier rijen knoppen. */
@media(max-width:700px){
  .filters-rij{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:18px;margin-inline:-18px;padding:2px 18px 6px;scrollbar-width:none}
  .filters-rij::-webkit-scrollbar{display:none}
  .filters-rij li{flex:none;scroll-snap-align:start}
  .filters-rij a{white-space:nowrap}
}
/* Tellers bovenaan (Documenten en Financieel) op telefoon twee aan twee. */
@media(max-width:700px){.kpi,.kpi.drie{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi>div{padding:14px 16px}.kpi.drie>div:last-child{grid-column:1/-1}.kpi dd{font-size:1.3rem;white-space:nowrap}}
/* Gebruikers op telefoon: statuslabel zo breed als de tekst, avatar bovenaan bij de naam. */
@media(max-width:900px){.lijstkaart .gebr{align-items:start}.lijstkaart .gebr>.pil{justify-self:start}.lijstkaart .gebr>:first-child{grid-row:1/span 2}}

/* Breedte (w-) en hoogte (h-) van balken in stappen van 5%, via pct_klasse() in _start.php; de CSP staat geen style-attributen toe. */
.w-0{width:0%}.h-0{height:0%}.w-5{width:5%}.h-5{height:5%}.w-10{width:10%}.h-10{height:10%}.w-15{width:15%}.h-15{height:15%}.w-20{width:20%}.h-20{height:20%}.w-25{width:25%}.h-25{height:25%}.w-30{width:30%}.h-30{height:30%}.w-35{width:35%}.h-35{height:35%}.w-40{width:40%}.h-40{height:40%}.w-45{width:45%}.h-45{height:45%}.w-50{width:50%}.h-50{height:50%}.w-55{width:55%}.h-55{height:55%}.w-60{width:60%}.h-60{height:60%}.w-65{width:65%}.h-65{height:65%}.w-70{width:70%}.h-70{height:70%}.w-75{width:75%}.h-75{height:75%}.w-80{width:80%}.h-80{height:80%}.w-85{width:85%}.h-85{height:85%}.w-90{width:90%}.h-90{height:90%}.w-95{width:95%}.h-95{height:95%}.w-100{width:100%}.h-100{height:100%}
.ruimte-boven{margin-top:12px}.klein-tekst{font-size:.85rem}
/* Toegankelijkheid (26 okt): focusring zichtbaar op het witte menu, en focus niet onder de vaste kopbalk. */
.pheader nav :focus-visible{outline-color:var(--navy)}
html{scroll-padding-top:96px}
/* Op een smal scherm mag een lange status in een pil afbreken in plaats van de rij te verbreden. */
@media(max-width:400px){.pil{white-space:normal;text-align:center}}
.kpi.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
.uren-beslis{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}.uren-beslis form{margin:0}
@media (hover:none){.alleen-muis{display:none}}
.dpanelen{display:grid;gap:6px;margin-top:8px;grid-column:1/-1}
.kopbalk>div>p:not(.eyebrow){margin:8px 0 0;max-width:65ch}
.kopbalk>.knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
/* Facturen: knoppen Pdf en Urenstaat naast elkaar, formulieren (betaald, crediteren) op een eigen regel. Uren: alles in één keer. */
.frij>.fknop{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.frij>form{grid-column:1/-1;order:1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.frij>details{order:2}
.frij>form input[type=date]{width:auto;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font:inherit}
.credit-in .paneel{display:block;max-width:640px}
.credit-in .check{display:flex;gap:8px;align-items:flex-start;font-weight:400}
.credit-in .check input{width:auto;margin:3px 0 0}
@media(max-width:900px){.frij>.fknop{grid-column:1/-1;grid-row:auto;justify-content:flex-start}}
.uren-alles{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#EEF5F4;border:1px solid #bdcfc2;border-radius:14px;padding:16px 20px;margin:0 0 20px}
.uren-alles p{margin:0}
.uren-alles .zacht{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:2px}
/* Beschikbaarheid: afwezig van-tot. */
.afwezig-form{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:12px 0 20px}
.afwezig-form label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px}
.afwezig-form input[type=date]{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;min-height:44px}
.afwezig-form .acties{margin:0}
.afwezig-form select{padding:8px 32px 8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;min-height:44px;width:16rem;max-width:100%}
.afwezig-form > p{flex-basis:100%;margin:0}
.afwezig-lijst{list-style:none;margin:8px 0 0;padding:0}
.afwezig-lijst li{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.afwezig-lijst form{margin:0}
.export-maand{align-items:flex-end}.export-maand label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}
/* Rustige werkplek (nov 2026): witte kop en zijbalk, lijniconen, dunne randen, kaarten met icoontegel. Staat onderaan zodat het eerdere regels overschrijft. */
.portaal{background:#F7F9F9}
.portaal .pheader{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.portaal .pheader .wrap{min-height:64px;padding-block:8px}
.portaal .pheader .pmerk img{filter:brightness(0) saturate(100%) invert(14%) sepia(39%) saturate(1500%) hue-rotate(178deg) brightness(92%)}
.portaal .pheader .btn-ghost{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:8px}
.portaal .pheader .btn-ghost:hover{background:var(--mist);color:var(--navy-deep)}
.portaal .pheader :focus-visible{outline-color:var(--teal-text)}
.portaal .portal-menu-toggle{color:var(--ink);border-color:var(--line);border-radius:8px}
.kop-bel{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;margin-left:auto;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#fff}
.kop-bel:hover{background:var(--mist)}
.kop-bel+.kop-uitloggen{margin-left:0}
.kop-bel-aantal{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#C9302C;color:#fff;font-size:.72rem;font-weight:700;line-height:20px;text-align:center}
.menu-ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portaal .pheader nav{background:#FBFCFC}
.portaal .pheader nav a{gap:10px;padding:8px 12px;border-radius:8px;border-left:0;color:#33474F}
.portaal .pheader nav a .menu-ico{color:#7A8C93}
.portaal .pheader nav a:hover{background:#EEF3F2;color:var(--ink)}
.portaal .pheader nav a[aria-current=page]{background:#E3F0EF;color:var(--navy-deep);border-left:0;font-weight:600}
.portaal .pheader nav a[aria-current=page] .menu-ico{color:var(--teal-text)}
.menu-teller{margin-left:auto;background:#E3F0EF;color:var(--teal-text)}
.menu-groep>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:32px}
.menu-groep>summary::-webkit-details-marker{display:none}
.menu-groep>summary::after{content:"";width:7px;height:7px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.menu-groep:not([open])>summary::after{transform:rotate(-45deg)}
.menu-groep>summary:hover{color:var(--ink)}
.menu-account{display:flex;align-items:center;gap:10px;margin:16px 6px 0;padding:14px 8px 0;border-top:1px solid var(--line)}
.menu-account strong{display:block;font-size:.9rem;line-height:1.3}
.menu-account small{color:var(--ink-soft);font-size:.78rem}
.menu-avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:.9rem}
.portaal .pheader nav .menu-uitloggen{border-top:0;margin-top:8px;padding-top:0}
.portaal .pheader nav .menu-uitloggen .btn{width:100%}
/* Kaarten: dunne rand, grotere ronding, zachte schaduw. */
.portaal :is(.metrics li,.pkaart,.kaart,.next-shift){border:1px solid #E1E8E7;border-radius:14px;box-shadow:0 1px 2px rgba(18,41,58,.04)}
.portaal .kaarten>li .kaart{border-top:1px solid #E1E8E7}
.metrics li{position:relative}
.metrics li>span{display:flex;align-items:center;gap:10px;font-weight:500}
.metrics li>span::before{content:"";width:36px;height:36px;flex:none;border-radius:10px;background:#EEF3F2 no-repeat center/18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}
.metrics strong{font-weight:600;letter-spacing:-.01em}
.metrics a{font-weight:500}
@media(min-width:1050px){.portaal.has-menu .pheader nav{top:64px;width:248px;padding:16px 12px}.has-menu .pmain,.has-menu .pfoot{margin-left:248px;max-width:calc(100% - 248px)}}
@media(prefers-reduced-motion:reduce){.menu-groep>summary::after{transition:none}}
/* Grafieken op de overzichten: uren per maand en diensten per status (public/_grafiek.php). */
.grafieken{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin:0 0 24px}
.grafieken .pkaart{margin:0;padding:20px 22px}
.grafieken h2{font-size:1rem;font-weight:600;margin:0 0 4px}
.grafiek-totaal{font-size:1.7rem;font-weight:600;color:var(--navy-deep);margin:0 0 14px;letter-spacing:-.01em}
.grafiek-totaal small{font-size:.8rem;font-weight:400;color:var(--ink-soft);margin-left:6px}
.grafiek-vlak{display:grid;grid-template-columns:auto 1fr;grid-template-rows:180px auto;column-gap:10px}
.grafiek-vlak svg{width:100%;height:180px;overflow:visible}
.grafiek-as{grid-row:1;display:flex;flex-direction:column;justify-content:space-between;list-style:none;margin:-8px 0;padding:0;font-size:.72rem;color:var(--ink-soft);text-align:right}
.grafiek-maanden{grid-column:2;display:flex;justify-content:space-between;list-style:none;margin:8px 0 0;padding:0;font-size:.75rem;color:var(--ink-soft)}
.grafiek-raster{stroke:#E6ECEB;stroke-width:1;vector-effect:non-scaling-stroke}
.grafiek-lijn{fill:none;stroke:var(--teal-text);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ring-vak{position:relative;width:170px;margin:12px auto 16px}
.ring-vak svg{display:block;width:100%;height:auto}
.ring-vak circle{fill:none;stroke-width:6}
.ring-spoor{stroke:#EEF3F2}
.ring-gewerkt{stroke:var(--teal-text);background:var(--teal-text)}
.ring-gepland{stroke:var(--teal);background:var(--teal)}
.ring-vervallen{stroke:#C7D2D6;background:#C7D2D6}
.ring-midden{position:absolute;inset:0;display:grid;place-content:center;text-align:center;margin:0;line-height:1.2}
.ring-midden strong{font-size:1.6rem;color:var(--navy-deep)}
.ring-midden small{font-size:.78rem;color:var(--ink-soft)}
.ring-legenda{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9rem}
.ring-legenda li{display:flex;align-items:center;gap:10px}
.ring-legenda span{width:10px;height:10px;border-radius:50%}
.ring-legenda strong{margin-left:auto}
.grafiek-leeg{color:var(--ink-soft);font-size:.92rem}
@media(max-width:800px){.grafieken{grid-template-columns:1fr}}
/* Zoeken (Ctrl K) in de kopbalk. */
.kop-zoek{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:auto;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink-soft);font:inherit;font-size:.9rem;cursor:pointer}
.kop-zoek:hover{background:var(--mist);color:var(--ink)}
.kop-zoek kbd{font:600 .72rem var(--body);padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:#F7F9F9}
.kop-zoek:not([hidden])~.kop-bel{margin-left:0}
.kop-thema{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.kop-thema:hover{background:var(--mist)}
.kop-thema[aria-pressed=true]{background:#E3F0EF;color:var(--teal-text)}
.zoek-dialoog{width:min(560px,calc(100% - 32px));max-height:70vh;margin:12vh auto auto;padding:0;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(18,41,58,.18);color:var(--ink)}
.zoek-dialoog::backdrop{background:rgba(18,41,58,.35)}
.zoek-vorm{display:flex;gap:8px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
.zoek-vorm input{flex:1;min-height:44px;border:0;font:inherit;font-size:1rem;padding:0 6px;background:transparent}
.zoek-vorm input:focus{outline:none}
.zoek-dialoog:has(input:focus-visible) .zoek-vorm{box-shadow:inset 0 -2px var(--teal-text)}
.portaal .pheader .zoek-lijst{display:block;list-style:none;margin:0;padding:8px;overflow-y:auto;max-height:calc(70vh - 70px)}
.zoek-lijst a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:8px;color:var(--ink);text-decoration:none}
.zoek-lijst a:is(:hover,:focus-visible){background:#EEF3F2}
.zoek-lijst li:first-child a{background:#E3F0EF}
.zoek-lijst small{color:var(--ink-soft);font-size:.78rem}
.zoek-leeg{padding:16px 20px;margin:0;color:var(--ink-soft)}
@media(max-width:700px){.kop-zoek span,.kop-zoek kbd{display:none}.kop-zoek{width:44px;justify-content:center;padding:0}}
/* Donkere weergave: één filter over de hele pagina draait de kleuren om, foto's en video draaien terug.
   ponytail: kleurfilter i.p.v. eigen donkere kleuren per onderdeel; eigen tinten per onderdeel als het filter ergens lelijk uitvalt. */
html[data-donker]{background:#fff;filter:invert(.9) hue-rotate(180deg)}
html[data-donker] :is(img:not(.brand-lockup),video,svg.qr){filter:invert(1) hue-rotate(180deg)}
html[data-donker] :is(.metrics li,.pkaart,.kaart,.next-shift,.zoek-dialoog){box-shadow:none}
@media print{html[data-donker]{filter:none}html[data-donker] img{filter:none}}
/* Rustige werkplek, rest van het portaal: blokken zonder gekleurde bovenrand, rustiger velden, tabellen en labels. */
.portaal section.pkaart:not(.wat-mist):nth-of-type(n),.portaal .kaarten>li:nth-child(n) .kaart,.portaal .start .takenkaart{border-top:1px solid #E1E8E7}
.portaal :is(input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=number],input[type=search],input[type=time],select,textarea){border:1px solid #7A8C93;border-radius:10px;background-color:#fff;transition:border-color .15s,box-shadow .15s}
.portaal :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):hover{border-color:var(--ink-soft)}
.portaal :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus-visible{outline:none;border-color:var(--teal-text);box-shadow:0 0 0 3px rgba(27,116,128,.22)}
.portaal :is(input,select,textarea)[aria-invalid=true]{border-color:#B3261E}
.portaal :is(input[type=checkbox],input[type=radio]){accent-color:var(--teal-text)}
.portaal .tabelwrap{border:1px solid #E1E8E7;border-radius:14px;box-shadow:0 1px 2px rgba(18,41,58,.04)}
.portaal .tabelwrap thead{background:#F7F9F9}
.portaal .tabelwrap thead th{font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.portaal .tabelwrap tbody tr:hover{background:#FAFBFB}
.portaal .badge{border:0;padding:3px 10px;font-size:.82rem;background:color-mix(in srgb,currentColor 12%,#fff)}
@media(prefers-reduced-motion:reduce){.portaal :is(input,select,textarea){transition:none}}
/* Eigen icoon per kerncijfer op het overzicht van de professional: dienst, voorstellen, uren, documenten. */
.metrics.vandaag li:nth-child(1)>span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v16H4zM4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E")}
.metrics.vandaag li:nth-child(2)>span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12H8l-4 4zM8 9h8M8 12h5'/%3E%3C/svg%3E")}
.metrics.vandaag li:nth-child(3)>span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v5l3 2M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18'/%3E%3C/svg%3E")}
.metrics.vandaag li:nth-child(4)>span::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h6l2 2h10v12H3z'/%3E%3C/svg%3E")}
/* Grafiek: wissel tussen uren en bedrag, als pilknoppen rechtsboven in de kaart. */
.grafiek-uren{position:relative}
.grafiek-wissel{position:absolute;top:16px;right:18px;display:inline-flex;gap:2px;padding:3px;border:1px solid #E1E8E7;border-radius:999px;background:#F7F9F9}
.grafiek-wissel button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);font:600 .85rem var(--body);cursor:pointer}
.grafiek-wissel button[aria-pressed=true]{background:#fff;color:var(--navy-deep);box-shadow:0 1px 2px rgba(18,41,58,.12)}
.grafiek-wissel button:focus-visible{outline:2px solid var(--teal-text);outline-offset:1px}
.grafiek-reeks:not([hidden])~.grafiek-reeks:not([hidden]){margin-top:24px}
.grafiek-as{min-width:2.5em}
@media(max-width:500px){.grafiek-wissel{position:static;margin-bottom:12px}}
.gesprek{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}.gesprek li{max-width:min(36rem,92%);padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}.gesprek li.eigen{align-self:flex-end;background:var(--mist)}.gesprek-wie{margin:0 0 4px;font-size:.85rem;color:var(--ink-soft)}.gesprek-wie strong{color:var(--ink)}.gesprek-tekst{margin:0;overflow-wrap:anywhere}.gesprek-link .tel-nieuw{margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--signal);color:var(--signal-ink);font-size:.75rem;font-weight:700}
/* Telefoon: logo, Menu, zoeken, thema en bel op één regel (de bel viel anders naar een tweede regel). */
@media(max-width:480px){.portaal .pheader .wrap{flex-wrap:nowrap;gap:6px;padding-inline:14px}.portaal .pheader .pmerk{flex:0 1 auto;min-width:0}.portaal .pheader .pmerk img{width:112px;height:auto}.portaal .pheader .portal-menu-toggle{margin-left:auto;padding:8px 10px}.portaal .pheader :is(.kop-zoek,.kop-thema,.kop-bel){flex:none;min-width:44px;min-height:44px;padding:0;justify-content:center}}
.gesprek-rij{display:block;margin-top:6px}
/* Feedback na een dienst */
.feedback-keuzes legend{font-weight:600;margin-bottom:2px}
.reden .pre{white-space:pre-line}
.briefing{margin:10px 0;padding:10px 12px;border-left:3px solid var(--line)}
.briefing p{margin:0 0 4px}
.briefing .pre{white-space:pre-line;overflow-wrap:anywhere}
.feedback-gegeven{grid-column:1/-1;margin:4px 0 0}
.acties-in .feedback-keuzes .keuze{display:flex;font-weight:400}
.acties-in .feedback-keuzes .keuze input{width:24px;margin:0}
/* Beschikbaarheid: dagen met een bevestigde dienst */
.veertien .ing{display:inline-block;margin-top:6px;padding:1px 6px;border-radius:6px;background:var(--navy-deep);color:#fff;font-size:.72rem;font-weight:600}
.legenda i.ing{width:12px;height:8px;background:var(--navy-deep)}
.ingepland-noot{margin:8px 0 12px;padding:10px 12px;border-left:4px solid var(--navy-deep);background:var(--mist);border-radius:6px}
/* Actiebalk: op de telefoon blijft de hoofdknop van een lang formulier onderaan in beeld zolang het formulier op het scherm staat. Ruimte voor de onderrand van de telefoon. */
@media (max-width:700px){html:has(.actiebalk){scroll-padding-bottom:96px}.actiebalk{position:sticky;bottom:0;z-index:2;margin:16px 0 0;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 16px -12px rgba(6,48,79,.35)}.actiebalk .btn{flex:1;min-height:48px}}