/* Klantenbord (bord.html) */
body{background:var(--bone)}
.kb{max-width:1280px;margin:0 auto;padding:28px 20px 80px}
.kb-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.kb-kop h1{font-size:clamp(24px,4vw,34px);margin:0}
.kb-kop p{margin:4px 0 0;color:var(--ink-soft)}
.kb-acties{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kb-acties .btn{padding:12px 16px;font-size:13px}
.kb-balk{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.kb-tabs{display:flex;gap:6px;padding:5px;border-radius:999px}
.kb-tabs button{border:0;background:none;font:600 13px/1 Manrope,sans-serif;padding:11px 16px;border-radius:999px;cursor:pointer;color:var(--ink-soft)}
.kb-tabs button[aria-selected=true]{background:var(--ink);color:var(--bone)}
.kb-zoek{flex:1;min-width:200px;max-width:360px;font:500 15px Manrope,sans-serif;padding:12px 16px;border-radius:999px;border:0;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(23,22,27,.1)}
.kb-lijst{display:grid;gap:16px;align-items:start}
@media (min-width:900px){.kb-lijst{grid-template-columns:1fr 1fr}}
.kaart{padding:22px;border-radius:var(--r-lg);display:grid;gap:14px;align-content:start;align-self:start}
.kaart-kop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.kaart-kop h2{font-size:19px;margin:0}
.kaart-kop small{display:block;color:var(--ink-soft);font-size:13px;margin-top:4px}
.stappen{display:flex;gap:5px;flex-wrap:wrap;align-items:flex-start}
.stap{font:700 10.5px/1 Manrope,sans-serif;letter-spacing:.08em;padding:7px 9px;border-radius:999px;background:rgba(23,22,27,.06);color:var(--ink-soft)}
.stap.aan{background:var(--violet);color:#fff}
.stap.open{background:rgba(255,61,129,.14);color:#c42a63}
.gegevens{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:0;font:600 13px/1.2 Manrope,sans-serif;padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(23,22,27,.09);cursor:pointer;color:var(--ink);text-align:left}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--violet)}
.chip i{font-style:normal;color:var(--ink-soft);font-weight:500;margin-right:4px}
.blok{padding:14px;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(23,22,27,.07);display:grid;gap:10px}
.blok h3{font:700 11px/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin:0}
.rij{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rij input{flex:1;min-width:140px;font:500 14px Manrope,sans-serif;padding:11px 12px;border-radius:12px;border:1.5px solid #d9d4ca;background:#fff}
.rij input.bedrag{flex:0 0 110px;min-width:0}
.rij .btn{padding:11px 14px;font-size:12.5px}
.klein{font-size:12.5px;color:var(--ink-soft);margin:0}
.btn-wa{background:#1faa5c !important;color:#fff !important}
.btn-licht{background:#fff !important;color:var(--ink) !important;box-shadow:inset 0 0 0 1.5px #d9d4ca}
textarea.bericht{width:100%;min-height:200px;font:500 14px/1.45 Manrope,sans-serif;padding:12px;border-radius:12px;border:1.5px solid #d9d4ca}
details summary{cursor:pointer;font-weight:700;font-size:13.5px}
details dl{margin:10px 0 0;display:grid;gap:8px}
details dt{font-size:11.5px;color:var(--ink-soft)} details dd{margin:0;font-size:14px;white-space:pre-wrap}
.bewerk{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.bewerk > *{min-width:0}
.bewerk input:not([type=checkbox]),.bewerk select,.bewerk textarea{width:100%;min-width:0}
@media (max-width:520px){.bewerk{grid-template-columns:minmax(0,1fr)}}
.kaart{min-width:0;max-width:100%}
.bewerk label{display:grid;gap:4px;font:700 11px/1 Manrope,sans-serif;letter-spacing:.1em;color:var(--ink-soft)}
.bewerk input,.bewerk select,.bewerk textarea{font:500 14px Manrope,sans-serif;padding:10px 11px;border-radius:10px;border:1.5px solid #d9d4ca;background:#fff;letter-spacing:0;color:var(--ink)}
.bewerk .vol{grid-column:1/-1}
.melding{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;font:600 14px Manrope,sans-serif;padding:13px 20px;border-radius:999px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.login{max-width:420px;margin:12vh auto 0;padding:34px;border-radius:var(--r-lg);display:grid;gap:14px}
.login input{font:500 16px Manrope,sans-serif;padding:14px 16px;border-radius:14px;border:1.5px solid #d9d4ca}
.leeg{padding:40px;text-align:center;color:var(--ink-soft)}
.fout{color:#c9401f;font-weight:700;font-size:13px;margin:0}
.dt{width:100%;border-collapse:collapse;font-size:13.5px}
.dt th{font:700 10.5px/1 Manrope,sans-serif;letter-spacing:.12em;color:var(--ink-soft);text-align:left;padding:6px}
.dt td{padding:4px 6px;border-top:1px solid rgba(23,22,27,.08)}
.dt input,.dt select{width:100%;font:500 13.5px Manrope,sans-serif;padding:8px 9px;border-radius:9px;border:1.5px solid #d9d4ca;background:#fff}
.dt .smal{width:84px}
.kb-meer{position:relative}
.kb-meer summary{list-style:none;cursor:pointer}
.kb-meer summary::-webkit-details-marker{display:none}
.kb-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:250px;padding:8px;border-radius:18px;display:grid;gap:2px}
.kb-menu button{border:0;background:none;text-align:left;font:600 14px Manrope,sans-serif;padding:11px 12px;border-radius:12px;cursor:pointer;color:var(--ink)}
.kb-menu button:hover{background:rgba(23,22,27,.06)}
.kb-menu-rij{display:flex;gap:6px;align-items:center;padding:4px}
.kb-menu-rij input{flex:1;min-width:0;font:500 13px Manrope;padding:8px;border-radius:10px;border:1.5px solid #d9d4ca}
.kb-filters{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:6px;scrollbar-width:none}
.kb-filters::-webkit-scrollbar{display:none}
.kb-filters button{flex:none;border:0;cursor:pointer;font:600 13px/1 Manrope,sans-serif;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(23,22,27,.09);color:var(--ink-soft)}
.kb-filters button b{font-weight:700;margin-left:6px;color:var(--ink)}
.kb-filters button[aria-selected=true]{background:var(--ink);color:var(--bone);box-shadow:none}
.kb-filters button[aria-selected=true] b{color:#fff}
.kb-keuze{font:600 13px Manrope,sans-serif;padding:11px 12px;border-radius:999px;border:0;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(23,22,27,.1);color:var(--ink)}
.kb-weergave{display:flex;gap:4px;padding:4px;border-radius:999px}
.kb-weergave button{border:0;background:none;font:600 13px/1 Manrope,sans-serif;padding:9px 13px;border-radius:999px;cursor:pointer;color:var(--ink-soft)}
.kb-weergave button[aria-pressed=true]{background:var(--ink);color:var(--bone)}
.kb-lijst.lijst{display:block}
.groep{font:700 11.5px/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin:22px 4px 8px;display:flex;gap:8px;align-items:center}
.groep:first-child{margin-top:4px}
.groep span{color:var(--ink-soft);letter-spacing:.04em;text-transform:none;font-weight:600}
.rij-k{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;border:0;cursor:pointer;
  padding:12px 14px;margin:0 0 6px;border-radius:16px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(23,22,27,.07);font:inherit;color:var(--ink)}
.rij-k:hover{background:rgba(255,255,255,.85)}
.rij-k.open{border-radius:16px 16px 0 0;margin-bottom:0;background:#fff}
.rij-k .wanneer{font:700 13px/1.25 Manrope,sans-serif}
.rij-k .wanneer small{display:block;font-weight:500;color:var(--ink-soft)}
.rij-k .wie{min-width:0}
.rij-k .wie b{display:block;font:700 15.5px/1.25 Unbounded,sans-serif;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rij-k .wie small{display:block;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.rij-k .rechts{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bolletjes{display:flex;gap:4px}
.bolletjes i{width:9px;height:9px;border-radius:50%;background:rgba(23,22,27,.14)}
.bolletjes i.aan{background:var(--violet)} .bolletjes i.open{background:#ff3d81}
.actie{font:700 11.5px/1 Manrope,sans-serif;padding:6px 9px;border-radius:999px;white-space:nowrap}
.actie.doe{background:var(--violet);color:#fff} .actie.wacht{background:rgba(23,22,27,.07);color:var(--ink-soft)}
.actie.klaar{background:rgba(31,170,92,.14);color:#178a4a} .actie.weg{background:rgba(201,64,31,.1);color:#c9401f}
.uitklap{margin:0 0 10px}
.uitklap > .kaart{border-radius:0 0 var(--r-lg) var(--r-lg)}
@media (max-width:520px){.rij-k{grid-template-columns:62px minmax(0,1fr)}.rij-k .rechts{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}
.legenda{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);margin:-4px 4px 10px}
.pil-tfp{background:rgba(123,63,228,.12);color:var(--violet)}
.extra-kop{font-size:12.5px;color:var(--violet);font-weight:700;margin:0}
#qr svg{width:200px;height:200px;display:block;background:#fff;padding:10px;border-radius:14px}
[hidden]{display:none !important}

.waarschuwing{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:12px 14px;border-radius:14px;background:#fde8ee;color:#a3203f;font-size:13px}
.waarschuwing span{flex:1;min-width:200px}
/* Nieuw van de klant: roze stip */
.stip{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ff3d81;box-shadow:0 0 0 0 rgba(255,61,129,.55);animation:stip 1.8s ease-out infinite;margin-right:8px;vertical-align:middle;flex:none}
@keyframes stip{0%{box-shadow:0 0 0 0 rgba(255,61,129,.55)}70%{box-shadow:0 0 0 8px rgba(255,61,129,0)}100%{box-shadow:0 0 0 0 rgba(255,61,129,0)}}
@media (prefers-reduced-motion:reduce){.stip{animation:none}}
.nieuw-melding{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:10px 14px;border-radius:14px;background:#ffe9f1;color:#9c1747;font-size:13px}
.nieuw-melding span{flex:1;min-width:200px}
.nieuw-melding small{color:#c0567e;font-weight:600}
.nieuw-melding.gezien{background:rgba(23,22,27,.05);color:var(--ink-soft)}
.nieuw-melding.gezien small{color:var(--ink-soft)}
.kaart.heeft-nieuw{box-shadow:0 0 0 2px rgba(255,61,129,.45),0 10px 30px rgba(23,22,27,.06)}
.kb-filters button.met-nieuw{color:#9c1747}
.kb-filters button.met-nieuw .stip{width:8px;height:8px;margin-right:6px}
.actie.laat{background:#ff3d81;color:#fff}
.verwijs{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:10px 14px;border-radius:14px;background:rgba(123,63,228,.08);color:var(--ink);font-size:13px}
.verwijs span{flex:1;min-width:200px}
.cijfers{width:100%;border-collapse:collapse;font-size:13.5px}
.cijfers th,.cijfers td{text-align:left;padding:7px 8px;border-bottom:1px solid rgba(23,22,27,.08)}
.cijfers td.n,.cijfers th.n{text-align:right;font-variant-numeric:tabular-nums}
.kb-menu a{display:block;text-decoration:none;font:600 14px Manrope,sans-serif;padding:11px 12px;border-radius:12px;color:var(--ink)}
.kb-menu a:hover{background:rgba(23,22,27,.06)}
/* Opvang (kinderopvang/BSO benaderen; zelfde opmaak als Scholen) */
.opvang-weergave{display:none}
body.modus-opvang .opvang-weergave{display:block}
body.modus-opvang #filters,body.modus-opvang .kb-balk,body.modus-opvang #lijst,body.modus-opvang #legenda{display:none}
body.modus-opvang #opvang .kb-balk{display:flex}
#kOpvang[aria-pressed=true]{background:var(--ink);color:var(--bone)}
.opv-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:-2px}
.opv-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(23,22,27,.06)}
.opv-badge--sfeer{background:rgba(123,63,228,.14);color:#4e2599}
.opv-badge--fotodag{background:rgba(29,185,84,.14);color:#126b33}
.opv-badge--gezocht{background:#ff3d81;color:#fff}
.opv-redenen{margin:0}
.opv-locaties{margin:0;padding-left:18px;font-size:13px;color:var(--ink-soft)}
/* Scholen (schoolfotografie benaderen) */
.school-weergave{display:none}
body.modus-scholen .school-weergave{display:block}
body.modus-scholen #filters,body.modus-scholen .kb-balk,body.modus-scholen #lijst,body.modus-scholen #legenda{display:none}
body.modus-scholen #scholen .kb-balk{display:flex}
#kScholen[aria-pressed=true]{background:var(--ink);color:var(--bone)}
.school-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;align-items:start}
.school-rij{gap:10px}
.school-rij h2{font-size:16px;margin:0}
.school-kop{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.school-kop select{max-width:170px}
.school-rij a.chip{text-decoration:none;color:inherit}
.school-bekeken{margin:6px 0 0;padding:4px 10px;display:inline-block;border-radius:999px;background:rgba(123,63,228,.1);color:#5a2bb0;font-size:12.5px;font-weight:700}
.school-webmail{display:grid;gap:8px;padding:12px;border-radius:14px;background:rgba(123,63,228,.07)}
.school-webmail .chip i{font-style:normal}
.school-kies{cursor:pointer;gap:6px}
.school-kies input{accent-color:#7b3fe4;width:16px !important;height:16px !important;min-height:0 !important;margin:0 !important;padding:0 !important;flex:0 0 auto}
.school-verzend{align-items:center;gap:10px;flex-wrap:wrap}
.school-voorbeeld{width:100%;height:560px;border:0;border-radius:12px;background:#fff}
.school-antwoord{padding:8px 12px;border-radius:12px;background:rgba(123,63,228,.08);font-size:13px;line-height:1.45}
.school-antwoord--afwijzing{background:rgba(23,22,27,.06)}
.school-antwoord--onbestelbaar{background:rgba(255,61,129,.1)}
.school-antwoord--automatisch{background:transparent;border:1px dashed rgba(23,22,27,.15)}
.stap-muziek{text-decoration:none;color:#fff !important}
.stap-spotify{background:#1db954 !important}
.stap-apple{background:#fa2d48 !important}
.stap-youtube{background:#e62117 !important}
.dag-liedjes{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 14px;margin:6px 0 12px;border-radius:14px;background:rgba(29,185,84,.08);font-size:13.5px}
.dag-liedjes span{display:inline-flex;gap:6px;align-items:center}
@media print{.stap-muziek{background:none !important;color:inherit !important}}
.jaar-kaart{margin-top:12px;gap:8px}
.school-sjabloon{margin-bottom:16px;gap:10px}
.school-sjabloon label{display:grid;gap:4px}
.school-sjabloon .kb-zoek{width:100%}
/* Castings */
.cast-weergave{display:none}
body.modus-castings .cast-weergave{display:block}
body.modus-castings #filters,body.modus-castings .kb-balk,body.modus-castings #lijst,body.modus-castings #legenda{display:none}
body.modus-castings #castings .kb-balk{display:flex}
#kCastings[aria-pressed=true]{background:var(--ink);color:var(--bone)}
.teller{display:inline-block;min-width:20px;padding:2px 6px;margin-left:4px;border-radius:999px;background:#ff3d81;color:#fff;font-size:11px;line-height:16px;text-align:center}
.cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;align-items:start}
.cast-kaart{padding:0 !important;overflow:hidden;gap:0}
.cast-foto{display:block;position:relative;width:100%;aspect-ratio:4/5;border:0;padding:0;cursor:pointer;background:rgba(23,22,27,.06)}
.cast-foto img{width:100%;height:100%;object-fit:cover;display:block}
.cast-foto.leeg{display:grid;place-items:center;color:var(--ink-soft);font-size:13px;cursor:default}
.cast-teller{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:999px;background:rgba(11,11,15,.6);color:#fff;font:700 11px Manrope}
.cast-tekst{display:flex;flex-direction:column;gap:8px;padding:14px}
.cast-tekst h2{margin:0;font-size:17px}
.cast-tekst small{color:var(--ink-soft);font-size:12px}
.cast-status{display:flex;flex-wrap:wrap;gap:6px}
.cast-status .chip.aan{background:var(--ink);color:var(--bone)}
.cast-gekozen{box-shadow:0 0 0 2px rgba(123,63,228,.55)}
.cast-afgewezen .cast-foto img{filter:grayscale(1);opacity:.55}
/* Als app op het beginscherm (zonder adresbalk): ruimte voor de statusbalk en de notch */
@media (display-mode: standalone){
  body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
}
.dag-balk{align-items:center}
.dag-balk input[type=date]{font:600 13px Manrope;padding:7px 10px;border-radius:10px;border:1.5px solid #d9d4ca;background:#fff}
.dag-kaart{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid rgba(23,22,27,.08)}
.dag-tijd{font:700 22px/1.1 Unbounded,sans-serif;color:var(--violet)}
.dag-inhoud{display:flex;flex-direction:column;gap:8px;min-width:0}
.dag-inhoud h3{margin:0;font-size:18px}
.dag-antwoorden{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 16px;margin:0}
.dag-antwoorden dt{font:700 11px/1.3 Manrope;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.dag-antwoorden dd{margin:2px 0 0;font-size:14px;white-space:pre-wrap}
/* Afdrukken: alleen het dagoverzicht */
@media print{
  body.print-dag #bord > *:not(#dagPaneel){display:none !important}
  body.print-dag #dagPaneel{display:block !important;box-shadow:none;background:#fff;border:0;padding:0}
  body.print-dag .dag-balk button,body.print-dag .dag-balk input{display:none}
  body.print-dag .dag-kaart{break-inside:avoid}
  body.print-dag{background:#fff}
}
.opv-mailknop{display:inline-flex;gap:4px;align-items:center}