/* Regelkamer. Alles hangt aan de --wb-variabelen hieronder; die staan standaard op Spare Hands
   (oranje, inkt en wit, Archivo). Een klant met een eigen thema (klanten/<id>/thema/thema.css) overschrijft ze,
   zodat Colin zijn Regelkamer in de huisstijl van Whole-Fit ziet.
   Kleurrollen: goed = draait, let = mislukt of niet op tijd, uit = staat uit. */
:root{
  --wb-achter:#f2f1ee; --wb-vlak:#fff; --wb-tekst:#1c1b1f; --wb-kop:#1c1b1f; --wb-zacht:#57545b; --wb-lijn:#e4e1d8;
  --wb-accent:#ff5f1f; --wb-focus:#ff5f1f; --wb-knop:#1c1b1f; --wb-knop-tekst:#fff; --wb-knop-hover:#000;
  --wb-goed:#1f8a5b; --wb-goed-zacht:#e3f3ea; --wb-let:#ff5f1f; --wb-let-zacht:#ffeadf; --wb-let-tekst:#a83a0b;
  --wb-uit:#b9b6b0; --wb-uit-zacht:#ecebe8;
  --wb-font-kop:"Archivo",system-ui,sans-serif; --wb-font-tekst:"Archivo",system-ui,sans-serif;
  --wb-kop-gewicht:850; --wb-kop-hoofdletters:uppercase; --wb-kop-breedte:125%; --wb-kop-spatie:-.02em; --wb-kop-regel:.95;
  --wb-rond:20px; --wb-schaduw:6px 6px 0 var(--wb-accent); --wb-kopbalk:#fff; --wb-kopbalk-tekst:#1c1b1f; --wb-kopbalk-lijn:#1c1b1f;
  --wb-logo-filter:none;
  --rand:clamp(16px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--wb-achter);color:var(--wb-tekst);font:400 16px/1.55 var(--wb-font-tekst);-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:3px solid var(--wb-focus);outline-offset:3px;border-radius:6px}
h1,h2{font-family:var(--wb-font-kop);font-stretch:var(--wb-kop-breedte);font-weight:var(--wb-kop-gewicht);text-transform:var(--wb-kop-hoofdletters);letter-spacing:var(--wb-kop-spatie);line-height:var(--wb-kop-regel);color:var(--wb-kop);text-wrap:balance}
h1{font-size:clamp(30px,5vw,54px)}
h2{font-size:22px;margin:44px 0 14px}
h2 small{font:400 15px/1.4 var(--wb-font-tekst);text-transform:none;letter-spacing:0;color:var(--wb-zacht);display:block;margin-top:6px}

.kop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--rand);background:var(--wb-kopbalk);color:var(--wb-kopbalk-tekst);border-bottom:2px solid var(--wb-kopbalk-lijn)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.logo img{height:30px;width:auto;filter:var(--wb-logo-filter)}
.logo b{font-family:var(--wb-font-kop);font-weight:var(--wb-kop-gewicht);font-stretch:var(--wb-kop-breedte);text-transform:var(--wb-kop-hoofdletters);font-size:19px;white-space:nowrap}
.logo span{font-size:13px;opacity:.75;white-space:nowrap}
.kop-rechts{display:flex;gap:10px;align-items:center}
select,input,textarea{font:inherit;color:var(--wb-tekst);background:var(--wb-vlak)}
.kop select{padding:8px 12px;border:1.5px solid currentColor;border-radius:999px;background:transparent;color:inherit}

main{flex:1;width:100%;max-width:1060px;margin:0 auto;padding:clamp(28px,5vw,56px) var(--rand)}
.laden{color:var(--wb-zacht)}
.paneel{background:var(--wb-vlak);border-radius:var(--wb-rond);padding:clamp(24px,4vw,40px);box-shadow:var(--wb-schaduw)}
.smal{max-width:520px;margin:0 auto}
.paneel h1{margin-bottom:16px}
.paneel p{margin-bottom:18px}
label{display:block;font-weight:600;margin-bottom:6px}
.paneel input{width:100%;font-size:17px;padding:13px 16px;border:1.5px solid var(--wb-tekst);border-radius:12px;margin-bottom:16px}
.knop{display:inline-flex;align-items:center;gap:10px;background:var(--wb-knop);color:var(--wb-knop-tekst);border:0;border-radius:999px;font:600 15px/1.2 var(--wb-font-tekst);padding:12px 22px;cursor:pointer;text-decoration:none}
.knop:hover{background:var(--wb-knop-hover)}
.knop.licht{background:transparent;color:inherit;border:1.5px solid currentColor;padding:8px 16px}
.knop.klein{padding:8px 14px;font-size:14px}
.knop.tekstknop{background:none;color:var(--wb-tekst);padding:6px 4px;text-decoration:underline;text-underline-offset:3px}
.knop:disabled{opacity:.5;cursor:wait}
.melding{margin:14px 0 0;font-weight:600}
.melding.fout{color:var(--wb-let-tekst)}
.melding.goed{color:var(--wb-goed)}

.titel{margin-bottom:28px}
.samen{margin-top:14px;font-size:18px;font-weight:600}
.wat{margin-top:14px;font-size:18px;max-width:62ch}
.klein{margin-top:22px;font-size:14px;color:var(--wb-zacht)}

.klussen{list-style:none;display:grid;gap:12px}
.klus{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--wb-vlak);border-radius:16px;padding:18px 22px;text-decoration:none;border:1.5px solid transparent;transition:border-color .15s}
.klus:hover{border-color:var(--wb-tekst)}
.klus h3{font-size:18px;font-weight:700;color:var(--wb-kop)}
.klus p{font-size:14.5px;color:var(--wb-zacht);margin-top:2px}
.stip{width:14px;height:14px;border-radius:50%;background:var(--wb-goed);flex:none}
.stip.fout,.stip.laat{background:var(--wb-let)}
.stip.uit,.stip.onbekend{background:var(--wb-uit)}
.label{font:700 12px/1 var(--wb-font-tekst);text-transform:uppercase;letter-spacing:.06em;padding:7px 11px;border-radius:999px;white-space:nowrap;background:var(--wb-goed-zacht);color:var(--wb-goed)}
.label.fout,.label.laat{background:var(--wb-let-zacht);color:var(--wb-let-tekst)}
.label.uit,.label.onbekend{background:var(--wb-uit-zacht);color:var(--wb-zacht)}

.terug{display:inline-block;margin-bottom:22px;font-weight:600;text-decoration:none}
.terug:hover{text-decoration:underline}

/* aan/uit */
.schakel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--wb-vlak);border-radius:16px;padding:18px 22px;margin-bottom:12px}
.schakel p{color:var(--wb-zacht);font-size:15px}
.schakel .melding{flex-basis:100%;margin:0}
.schakel .melding:empty{display:none}
.schakel b{color:var(--wb-kop);font-size:17px;display:block}
.knopje{position:relative;width:58px;height:32px;border-radius:999px;border:0;background:var(--wb-uit);cursor:pointer;flex:none;transition:background .2s}
.knopje::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.knopje[aria-checked="true"]{background:var(--wb-goed)}
.knopje[aria-checked="true"]::after{transform:translateX(26px)}
.knopje:disabled{opacity:.5;cursor:not-allowed}

.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.feiten div{background:var(--wb-vlak);border-radius:14px;padding:16px 18px}
.feiten dt{font-size:13px;color:var(--wb-zacht);font-weight:600}
.feiten dd{font-size:17px;font-weight:600;margin-top:4px;color:var(--wb-kop)}

/* instellingen */
.instellingen{display:grid;gap:12px}
.inst{background:var(--wb-vlak);border-radius:16px;padding:18px 22px}
.inst-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.inst-kop b{display:block;color:var(--wb-kop);font-size:16.5px}
.inst-kop .waarde{display:block;font-size:17px;margin-top:4px;word-break:break-word}
.inst .uitleg{font-size:14.5px;color:var(--wb-zacht);margin-top:8px;max-width:64ch}
.inst .bewerk{margin-top:16px;padding-top:16px;border-top:1px solid var(--wb-lijn);display:grid;gap:12px}
.inst .bewerk input[type=text],.inst .bewerk input[type=email],.inst .bewerk input[type=tel],.inst .bewerk input[type=number],.inst .bewerk input[type=time],.inst .bewerk select,.inst .bewerk textarea{padding:11px 14px;border:1.5px solid var(--wb-tekst);border-radius:10px;font-size:16px;width:100%;max-width:440px}
.inst .bewerk input[type=number]{max-width:140px}
.inst .bewerk input[type=time]{max-width:160px}
.rij{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.keuzes{display:grid;gap:8px}
.keuzes label{display:flex;gap:10px;align-items:center;font-weight:500;cursor:pointer}
.uren{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-width:560px}
.uren label{display:block;margin:0;cursor:pointer}
.uren input{position:absolute;opacity:0;pointer-events:none}
.uren span{display:block;text-align:center;padding:9px 8px;border-radius:10px;border:1.5px solid var(--wb-lijn);font-variant-numeric:tabular-nums;font-weight:600;font-size:14px}
.uren input:checked+span{background:var(--wb-goed);border-color:var(--wb-goed);color:#fff}
.uren input:focus-visible+span{outline:3px solid var(--wb-focus);outline-offset:2px}
.hint{font-size:13.5px;color:var(--wb-zacht)}
.waarschuw{color:var(--wb-let-tekst);font-size:14px;font-weight:600}

/* wijzigingen */
.wijzigingen{list-style:none;background:var(--wb-vlak);border-radius:16px;overflow:hidden}
.wijzigingen li{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--wb-lijn)}
.wijzigingen li:last-child{border-bottom:0}
.wijzigingen time{font-weight:600;font-variant-numeric:tabular-nums}
.wijzigingen .wat-w{color:var(--wb-zacht)}
.wijzigingen .wat-w b{color:var(--wb-tekst);font-weight:600}
.wijzigingen .leeg{color:var(--wb-zacht);grid-column:1/-1}

.logboek{list-style:none;background:var(--wb-vlak);border-radius:16px;overflow:hidden}
.logboek li{display:grid;grid-template-columns:auto 170px 1fr auto;gap:14px;align-items:baseline;padding:13px 20px;border-bottom:1px solid var(--wb-lijn)}
.logboek li:last-child{border-bottom:0}
.logboek .stip{width:10px;height:10px;align-self:center}
.logboek time{font-weight:600;font-variant-numeric:tabular-nums}
.logboek .tekst{color:var(--wb-zacht)}
.logboek .duur{font-size:13px;color:var(--wb-zacht);font-variant-numeric:tabular-nums}
.logboek .leeg{display:block;color:var(--wb-zacht)}

dialog{border:0;border-radius:var(--wb-rond);padding:28px;max-width:min(480px,calc(100vw - 32px));background:var(--wb-vlak);color:var(--wb-tekst);box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog h2{margin:0 0 12px;font-size:22px}
dialog p{margin-bottom:20px}
dialog .rij{justify-content:flex-end}

.overdracht{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:40px;background:var(--wb-vlak);border-radius:var(--wb-rond);padding:24px 28px}
.overdracht h2{margin:0 0 8px}
.overdracht p{max-width:62ch;color:var(--wb-zacht)}
.voet{padding:24px var(--rand);font-size:13px;color:var(--wb-zacht);text-align:center}

@media (max-width:640px){
  .logo span{display:none}
  .klus{grid-template-columns:auto 1fr;padding:16px}
  .klus .label{grid-column:2;justify-self:start}
  .logboek li{grid-template-columns:auto 1fr;row-gap:2px;padding:12px 16px}
  .logboek .tekst,.logboek .duur{grid-column:2}
  .wijzigingen li{grid-template-columns:1fr;row-gap:4px;padding:12px 16px}
  .wijzigingen li .knop{justify-self:start}
}