/* De schil van Planner, letterlijk overgenomen uit SpacePlanner/web/beheer.css door bitzseo/scripts/schil-overnemen.mjs (besluit Jurgen
   14-10: elke app van SpaceBitz heeft dezelfde schil). Niet met de hand aanpassen; wat alleen BitzSEO nodig heeft, staat in bitzseo.css. */

body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font)}

.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login-kaart{width:min(420px,100%);padding:32px;display:flex;flex-direction:column;gap:16px}
.login-kaart .logo{align-self:flex-start}
.login-kaart h1{margin:8px 0 0;font-size:var(--t-22);color:var(--heading)}
.login-kaart .uitleg{margin:0;color:var(--muted);font-size:var(--t-14);line-height:1.5}
.login-kaart .btn.primary{justify-content:center}

.boek-fout{display:flex;align-items:center;gap:8px;margin:0;color:var(--red-text);font-size:var(--t-14)}
.b-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.b-kop h2{margin:4px 0 0;font-size:var(--t-26);color:var(--heading);line-height:1.15}
.b-kop .intro{margin:6px 0 0;color:var(--muted);font-size:var(--t-14);max-width:64ch}
.b-kop .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.b-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px);gap:16px;align-items:start}
.b-stapel{display:flex;flex-direction:column;gap:16px}
.card .cb{padding:16px 20px}
.card .cf{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;align-items:start}
.fgrid>.field{margin:0}
.fgrid .wide{grid-column:1/-1}
.fgrid.c3{grid-template-columns:repeat(3,1fr)}

.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.sw:last-child{border-bottom:0}
.sw .t{font-weight:600;color:var(--heading);display:block}
.sw small{color:var(--muted);font-size:var(--t-12)}
.sw input{width:40px;height:24px;appearance:none;background:var(--line-strong);border-radius:var(--r-pill);position:relative;cursor:pointer;flex:none;margin:0}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--card)}
.sw input:checked{background:var(--navy-line)} /* licht: navy; donker: een lichte grijs, zodat aan en uit ook daar verschillen */
.sw input:checked::after{left:19px}
@media (max-width:1100px){.b-grid2{grid-template-columns:1fr}}
@media (max-width:900px){
  .topbar .search{display:none}
  .fgrid,.fgrid.c3{grid-template-columns:1fr}
}

/* Tikdoelen op een telefoon: elke knop, icoonknop, select en elk invoerveld in het beheer minstens 40 × 40 px. De compacte maten uit ui.css
   (.btn.sm 32, .btn.xs 28, .ibtn.ghost 32, knoppen in de ladevoet 36, filterselects 36, de rolkeuze 32) blijven op desktop; hier alleen een
   minimum, zodat de tekst en de breedte gelijk blijven. Hier en niet in ui.css: die is gedeeld met het dashboard. */
@media (max-width:560px){
  .btn,.drawer .df .btn,.pop button{min-height:40px}
  .btn:not(.link){min-width:40px}
  .ibtn,.drawer .df .ibtn,.tbl .acts .ibtn{min-width:40px;min-height:40px}
  .inp,.sel,.ta,.chip-sel select,select,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),textarea{min-height:40px}
}
body.no-scroll{overflow:hidden}

/* topbalk zoals het dashboard: accountmenu rechts */
.acc-wrap{position:relative}
.acc-menu{min-width:240px}
.acc-menu .user{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.acc-menu .user .n{font-weight:700;color:var(--heading);font-size:var(--t-14)}
.acc-menu .user .r{color:var(--muted);font-size:var(--t-12)}
.topbar .acc .avatar{width:32px;height:32px}

/* Zijbalk: bovenaan de navigatie voor elke dag (Plannen, Beheer), vast onderaan de voet met de instellingen (Organisatie,
   Koppelingen, Abonnement) en daaronder de ingelogde persoon. Dezelfde links als erboven (.nav a, navy als actief), iets compacter, met een
   eyebrow en de haarlijn van .foot erboven. De navigatie krimpt niet: bij een laag venster scrolt de zijbalk (.side heeft overflow:auto) en
   schuift niets over de voet. Op een telefoon staan de instellingen onder Meer in de bottombar (#meer-knop, .meer-menu boven de balk). */
.side .nav{flex:1 0 auto}
.side .foot{flex:none;padding:8px 12px 16px}
.side .foot .nav{flex:none;padding:0 0 8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.side .foot .grp{padding:8px 12px 4px}
.side .foot .nav a{height:36px;font-size:var(--t-13)}
.side .foot .nav a .i{width:18px;height:18px}
.side .foot .user{padding:4px 12px 0}
.bottombar .meer-knop,.meer-menu{display:none}
@media (max-width:900px){
  .bottombar .meer-knop{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:0;border:0;background:none;font:inherit;font-size:var(--t-11);font-weight:700;color:var(--muted);cursor:pointer}
  .bottombar .meer-knop[aria-expanded="true"],.bottombar .meer-knop.aan{color:var(--heading)}
  .bottombar .meer-knop.aan .i{color:var(--heading)}
  .meer-menu:not([hidden]){display:grid;position:fixed;top:auto;right:8px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:31;min-width:240px;max-width:calc(100vw - 16px)}
  .meer-menu .grp{font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
  .meer-menu a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-sm);color:var(--text-2);font-size:var(--t-14);font-weight:600;text-decoration:none}
  .meer-menu a:hover{background:var(--surface-2);color:var(--heading)}
  .meer-menu a[aria-current="page"]{background:var(--navy);color:var(--on-navy)}
}

.inbegrepen{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.inbegrepen li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-14);color:var(--text);line-height:1.5}
.inbegrepen .i{color:var(--green-text);flex:none;margin-top:3px}
.inbegrepen b{color:var(--heading);font-weight:600}

.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* Schema stap 35: de organisatie in de zijbalk, onder het woordmerk (dat blijft zoals het is): logo of initiaal en de naam. In het Merk-blok
   en in de lade van een aanbieder de upload (.drop uit ui.css); het geplakte adres ingeklapt eronder, zoals het iCal-adres. */
.side .org{display:flex;align-items:center;gap:8px;padding:16px 24px 0;min-width:0;font-size:var(--t-13);font-weight:600;color:var(--heading)}
.side .org .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Inrichten (10 oktober, /beheer#inrichten, web/beheer.js; stijlgids 4, "Een wizard"): over de volle breedte van het werkvlak, de
   stappenbalk (.stappen, ui.css) en één kaart met één vraag; Terug links en Verder rechts in de voet. Rijen voor mensen en diensten met
   haarlijnen (geen kaart in een kaart), op een telefoon onder elkaar. Klaar: links de link en de teksten, rechts de QR-code op een vast
   licht vlak (--paneel-licht en --paneel-donker zijn in beide standen gelijk, zodat elke camera ze leest). */
.inrichten{display:flex;flex-direction:column;gap:16px;min-width:0}
.inrichten .b-kop{margin-bottom:0}
.inr-kaart .ch{align-items:flex-start}
.inr-kop{display:flex;flex-direction:column;gap:4px;min-width:0}
.inr-kop h3{font-size:var(--t-18);color:var(--heading);margin:0}
.inr-kop h3:focus{outline:none}
.inr-kop .sub{margin:0;max-width:72ch;color:var(--muted);font-size:var(--t-13)}
.inr-kaart .cb{display:flex;flex-direction:column;gap:16px}
.inr-kaart .cf.inr-voet{justify-content:space-between}
.card .cf .inr-opnieuw{margin-right:auto}

/* Zoeken (golf 3, bevinding 16 en 17; stijlgids 4, "Zoekresultaten in groepen"): onder het veld een lijst in groepen met per groep de eerste
   drie en "Alles tonen"; de gekozen rij (pijltjes) in --surface-2 met een navy streep. Op een telefoon opent het vergrootglas in de topbalk
   het veld over de volle breedte van de topbalk, met een kruisje om te sluiten. */
.zoek-knop,.zoek-dicht{display:none}
.search .zoek-lijst{left:0;right:0;top:calc(100% + 6px);min-width:0;max-height:min(70vh,560px);overflow:auto;padding:4px 0;display:block;z-index:40}
.search .zoek-lijst[hidden]{display:none}
.zk-groep{padding:4px 0}
.zk-groep+.zk-groep{border-top:1px solid var(--line)}
.zk-kop{display:flex;align-items:center;gap:8px;padding:8px 12px 4px;font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.zk-tel{font-weight:600;letter-spacing:0;color:var(--muted-2)}
.zk-item{display:flex;flex-direction:column;gap:1px;min-height:40px;justify-content:center;padding:6px 12px;border-left:3px solid transparent;cursor:pointer;min-width:0}
.zk-item b{font-size:var(--t-14);font-weight:600;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zk-item small{font-size:var(--t-12);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zk-item:hover,.zk-item.actief{background:var(--surface-2)}
.zk-item.actief{border-left-color:var(--navy-line)}
.zk-meer{margin:2px 12px 4px}
.zk-leeg{margin:0;padding:12px;color:var(--muted);font-size:var(--t-13)}
@media (max-width:900px){
  .zoek-knop{display:inline-flex}
  .topbar.zoek-open .search{display:block;position:absolute;left:8px;right:8px;top:8px;max-width:none;z-index:45}
  .topbar.zoek-open .search input{height:40px;padding-right:48px;background:var(--field)}
  .topbar.zoek-open .search input::-webkit-search-cancel-button{display:none}
  .topbar.zoek-open .zoek-dicht{display:inline-flex;position:absolute;right:0;top:0}
  .topbar.zoek-open .search .zoek-lijst{position:fixed;left:8px;right:8px;top:calc(var(--demobar) + 56px);max-height:calc(100vh - 140px)}
}

/* De onderste balk (golf 3, bevinding 34): de actieve knop in de kleur van een kop, niet oranje (stijlgids 1, regel 4 en 5). */
@media (max-width:900px){.bottombar a[aria-current="page"] .i{color:var(--heading)}.bottombar a[aria-current="page"]{box-shadow:inset 0 2px 0 var(--navy-line)}}

.tbl tr.klikbaar{cursor:pointer}

.gebruikers{display:flex;flex-direction:column}
.gebruikers .rij{display:flex;align-items:center;gap:10px;padding:10px 20px;border-top:1px solid var(--line);min-width:0}
.gebruikers .rij .wie{flex:1;min-width:0}
.gebruikers .rij .wie b{display:block;color:var(--heading);font-weight:600;font-size:var(--t-14)}
.gebruikers .rij .wie small{display:block;color:var(--muted);font-size:var(--t-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gebruikers .rij .chip{flex:none}
.gebruikers .rij .nooit{display:flex;align-items:center;flex-wrap:wrap;gap:0 12px;margin-top:2px}
.gebruikers .rij .nooit .btn.link{font-size:var(--t-12)}
.gebruikers .rij .nooit small{white-space:normal}
/* Op een telefoon: naam, adres en Opnieuw sturen over de hele breedte; rol en intrekken eronder (ingesprongen tot de naam). */
@media (max-width:560px){
  .gebruikers .rij{flex-wrap:wrap;row-gap:4px;padding:12px 16px}
  .gebruikers .rij .wie{flex-basis:calc(100% - 34px)}
  .gebruikers .rij .wie~.chip,.gebruikers .rij .wie~.chip-sel{margin-left:34px}
  .gebruikers .rij .ibtn{margin-left:auto}
}

.gebruikers .rij .chip-sel select{height:32px;font-size:var(--t-12);max-width:160px}
.card .cf .hint{color:var(--muted);font-size:var(--t-12)}

.card .cf .hint:first-child{margin-right:auto}

details.meer{border-top:1px solid var(--line);padding-top:4px}
details.meer>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer}
details.meer>summary::-webkit-details-marker{display:none}
.drawer .form-kolom details.meer>summary h3{margin:0}
details.meer>summary .i{color:var(--muted);transition:transform .15s}
details.meer[open]>summary .i{transform:rotate(180deg)}
details.meer>summary:hover h3,details.meer>summary:hover .i{color:var(--heading)}
details.meer .meer-tel{margin-left:auto;font-size:var(--t-12);color:var(--muted)}
details.meer .meer-inhoud{display:flex;flex-direction:column;gap:16px;padding-top:8px}
details.meer .field{margin:0}

details.meer.nb>summary{align-items:flex-start;padding:8px 0}
details.meer.nb>summary .i{margin-top:2px;flex:none}
.nb-kop{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
/* golf 3: de kop van een blok is een gewone vraag, geen eyebrow (stijlgids 1, regel 9: kapitalen alleen voor eyebrows en kolomkoppen) */
.drawer .form-kolom details.meer.nb>summary h3{margin:0;font-size:var(--t-16);font-weight:700;text-transform:none;letter-spacing:0;color:var(--heading);line-height:1.3}
details.meer.nb>summary:hover .nb-zin{color:var(--text)}

.nb-zin{font-size:var(--t-13);color:var(--text-2);line-height:1.45}

.b-grid.koppel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.b-grid.koppel-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- abonnement (schema stap 48, plan stap 14; web/abonnement.js, stijlgids 4 "Een abonnement kiezen") ----------
   De stand in één zin (22 px) met één zin uitleg en de feiten in .kv; de pakketten als keuzetegels met prijs (.keuzetegel .p in ui.css) en
   de schakelaar Maandelijks | Jaarlijks rechts in de kop; de knop "Kies Team" rechts in de voet, met de hint links. */
.abon .abon-zin{margin:4px 0 8px;font-size:var(--t-22);color:var(--heading);line-height:1.25}
.abon-stand .uitleg,.abon-platform .uitleg{margin:0;color:var(--muted);font-size:var(--t-14);line-height:1.5;max-width:60em}
.abon-stand .kv{margin-top:16px}
.abon-kies .ch{flex-wrap:wrap;gap:8px 16px}
.abon-tegels{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.abon-tegels .keuzetegel .t{min-height:24px}
.abon .cf{flex-wrap:wrap;align-items:center}
.abon .cf .hint{margin-right:auto}
.abon-dicht{max-width:640px}
@media (max-width:700px){.abon .cf .btn{width:100%;justify-content:center;min-height:40px}.abon .cf .hint{width:100%}.abon-kies .seg button{height:40px}}

/* Koppelingen (golf 3, bevinding 27; stijlgids 4, "Koppelingen in gewone taal"): per koppeling één rij met de stand in gewone taal en één
   knop. Mollie klapt open in de rij zelf (een details met de rij als summary). Onderaan, dicht, Voor je ontwikkelaar. */
.k-lijst{list-style:none;margin:0;padding:0}
.k-rij{border-top:1px solid var(--line)}
.k-rij,.k-rij>details>summary{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 20px}
.k-rij>details{grid-column:1/-1;margin:-12px -20px}
.k-rij:has(>details){display:block;padding:12px 20px}
.k-rij>details>summary{list-style:none;cursor:pointer;padding:12px 20px}
.k-rij>details>summary::-webkit-details-marker{display:none}
.k-rij>details[open]>summary .k-knop .btn{background:var(--surface-2)}
.k-ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--inset);border:1px solid var(--line);display:grid;place-items:center;color:var(--text-2)}
.k-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.k-tekst b{color:var(--heading);font-size:var(--t-14);font-weight:700}
.k-tekst small{color:var(--text-2);font-size:var(--t-13);line-height:1.45;overflow-wrap:anywhere}
.k-link{font-family:var(--mono);font-size:var(--t-12)}
.k-inhoud{display:flex;flex-direction:column;gap:16px;padding:4px 20px 20px 72px}
.k-inhoud .kv{margin:0}
.k-acties{display:flex;gap:8px;flex-wrap:wrap}
.k-dev{border-top:1px solid var(--line);padding:4px 0}
.k-dev>summary h3{margin:0;font-size:var(--t-16);font-weight:700;color:var(--heading)}
@media (max-width:560px){.k-rij,.k-rij>details>summary{grid-template-columns:40px minmax(0,1fr);padding:12px 16px}.k-rij>details{margin:-12px -16px}.k-rij:has(>details){padding:12px 16px}.k-knop{grid-column:2}.k-knop .btn{min-height:40px}.k-inhoud{padding:4px 16px 16px}}

/* ---------- zelf aanmelden: /start (11 oktober, plan stap 14; stijlgids 4, "Zelf aanmelden") ----------
   De loginkaart van het beheer, iets breder voor de vijf keuzetegels van de sector; onder de kaart de talen van de pagina en de links naar
   privacy en voorwaarden (tikdoelen van 40 px). Het bericht na verzenden staat in dezelfde kaart, met een icoon in een groene cirkel. */
.start{place-content:center;gap:16px}
.start-kaart{width:min(560px,100%)}
.s-sector{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.s-sector legend{padding:0;margin:0 0 6px;font-size:var(--t-12);font-weight:700;color:var(--text-2);letter-spacing:.02em}
.s-sector .keuzetegel{padding:12px 16px}
.s-sector .keuzetegels.err .keuzetegel{border-color:var(--red-rand)}
.s-sector .hint{font-size:var(--t-12)}
.s-controle{min-height:65px}
.s-al{margin:0;font-size:var(--t-14);color:var(--muted)}
.s-al a{color:var(--blue-text);font-weight:600}
.s-klaar-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green-text)}
.s-klaar-ic .i{width:20px;height:20px}
#s-klaar-kop:focus{outline:none}
.s-voet{display:flex;flex-wrap:wrap;justify-content:center;gap:0 16px}
.s-voet a{display:inline-flex;align-items:center;min-height:40px;font-size:var(--t-13);color:var(--text-2);text-decoration:none}
.s-voet a:hover{color:var(--heading);text-decoration:underline}
.s-voet a[aria-current="true"]{color:var(--heading);font-weight:700}
/* De inlogpagina: onderaan de kaart de rustige link naar /start, voor wie nog geen account heeft (vóór het inloggen, voor iedereen). */
.login-nieuw{margin:0;padding-top:16px;border-top:1px solid var(--line);font-size:var(--t-14);color:var(--muted)}
.login-nieuw a{color:var(--blue-text);font-weight:600}

/* /start die overtuigt (12 oktober, golf 4; web/start.html, start.js). Boven het formulier, op een breed scherm ernaast: wat je krijgt in
   drie zinnen met een icoon, het voorbeeld van de gekozen sector (een schermafbeelding van de boekingspagina, met de link naar de
   proefpagina) en de prijs klein. Op een telefoon blijft het formulier binnen de eerste twee schermen. Het woord naast het woordmerk staat
   op een eigen spatie afstand (bevinding 32); Inloggen is een tikdoel van 40 px. */
.start-kaart .logo .word .os{margin-left:5px}
.s-raster{display:flex;flex-direction:column;gap:24px}
.s-wat{display:flex;flex-direction:column;gap:12px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.s-wat-kop{margin:0;font-size:var(--t-18);font-weight:800;line-height:1.3;color:var(--heading)}
.s-wat-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.s-wat-lijst li{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-14);line-height:1.45;color:var(--text)}
.s-wat-lijst .i{flex:none;width:18px;height:18px;margin-top:1px;color:var(--orange)}
.s-voorbeeld{display:flex;align-items:center;gap:16px}
.s-voorbeeld-beeld{flex:none;display:block;width:96px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.s-voorbeeld-beeld:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.s-voorbeeld-beeld img{display:block;width:100%;height:auto}
.s-voorbeeld-tekst{display:flex;flex-direction:column;gap:6px;min-width:0}
.s-voorbeeld-link{display:inline-flex;align-items:center;gap:4px;min-height:40px;font-size:var(--t-14);font-weight:600;color:var(--blue-text)}
.s-prijs{margin:0;font-size:var(--t-13);line-height:1.45;color:var(--muted)}
.s-fout{align-items:flex-start;padding:10px 12px;border:1px solid var(--red-rand);border-radius:var(--r);background:var(--red-soft);line-height:1.45}
.s-fout .i{flex:none;margin-top:2px}
.s-al a{display:inline-flex;align-items:center;min-height:40px}
@media (min-width:900px){
  .start-kaart{width:min(1000px,100%)}
  .s-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:start}
  .s-wat{position:sticky;top:24px;padding:0 40px 0 0;border-bottom:0;border-right:1px solid var(--line)}
  .s-voorbeeld{flex-direction:column;align-items:flex-start}
  .s-voorbeeld-beeld{width:200px}
}
@media (max-width:560px){
  /* telefoon: het voorbeeld klein naast de link en de prijs, zodat de knop Begin gratis binnen twee schermen blijft */
  .start-kaart{padding:24px 20px}
  .s-raster{gap:16px}
  .s-wat{gap:10px;padding-bottom:16px}
  .s-wat-kop{font-size:var(--t-16)}
  .s-wat-lijst{gap:6px}
  .s-wat-lijst li{font-size:var(--t-13)}
  .s-voorbeeld{gap:12px}
  .s-voorbeeld-beeld{width:64px}
  .s-sector .keuzetegel{padding:10px 14px}
}