/* Huisstijl 2SERVE (10-WIKI/01-HUISSTIJL/2serve-stijlgids-algemeen.md): blauw #003D8E + geel #FFCC00, Arial.
   Look-and-feel van het rapport "2SERVE Prestatieoverzicht" (view 7869): wit papier, rechte hoeken, dunne
   grijze randen, tabelkop blauw met kleine witte hoofdletters, kleine blauwe vette labels boven de waarde,
   afwisselend lichte rijen, totaalregel vet, voettekst met dunne lijn. Geen oranje (formele toepassing). */
:root {
  --blauw: #003D8E; --blauw-donker: #002C68; --geel: #FFCC00;
  --tekst: #1A1A1A; --zacht: #5A5A5A; --lijn: #C9CED6; --lijn-zacht: #E3E6EB;
  --papier: #FFFFFF; --achter: #FFFFFF; --rij: #F7F8FA; --licht: #E6EEF7; --koptekst: #003D8E;
  --goed: #1E7B3A; --goed-vlak: #E7F4EC; --slecht: #B42318; --slecht-vlak: #FDECEA;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tekst: #E8ECF2; --zacht: #A3ADBB; --lijn: #3A4554; --lijn-zacht: #2A333F;
    --papier: #161D27; --achter: #10151D; --rij: #1B232F; --licht: #182A45; --koptekst: #8DB4F0;
    --goed: #4CC27A; --goed-vlak: #15291D; --slecht: #FF7A6E; --slecht-vlak: #2E1716;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--achter); color: var(--tekst);
  font: 15px/1.45 Arial, "Helvetica Neue", Helvetica, sans-serif; }
[hidden] { display: none !important; }

/* kopbalk: wit zoals de briefhoofd van het rapport, logo links */
.kop { background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--rand); border-bottom: 3px solid var(--blauw); position: sticky; top: 0; z-index: 5; }
.merk { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo { display: block; width: 116px; height: auto; }
.sub { color: var(--blauw); font-size: 15px; white-space: nowrap; }
.wie { display: flex; gap: 12px; align-items: center; font-size: 13px; color: #1A1A1A; white-space: nowrap; }
.kop .link { color: var(--blauw); }
@media (max-width: 420px) { .sub { display: none; } }

/* menu: rechthoekige tabs onder de kopbalk, modus rechts */
.menu { display: flex; align-items: stretch; gap: 0; background: var(--papier); border-bottom: 1px solid var(--lijn);
  padding: 0 var(--rand); overflow-x: auto; }
.menu .tab:first-child { padding-left: 0; }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--tekst); padding: 11px 16px 8px;
  font-size: 14px; white-space: nowrap; border-radius: 0; }
.tab:hover { color: var(--koptekst); }
.tab.aan { color: var(--koptekst); font-weight: 700; border-bottom-color: var(--geel); }
.modus { margin-left: auto; align-self: center; padding: 4px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.modus.dry { background: var(--licht); color: var(--koptekst); }
.modus.test { background: var(--geel); color: #1A1A1A; }
@media (max-width: 560px) { .modus { display: none; } }

/* één kolombreedte voor alles: kopbalk, menu, inhoud en voettekst lijnen links en rechts op elkaar uit */
:root { --breedte: 1180px; --rand: max(16px, calc((100% - var(--breedte)) / 2 + 16px)); }
main { max-width: var(--breedte); margin: 0 auto; padding: 16px; }
#scherm-aanmelden { max-width: 420px; }

/* "blad" = sectie zoals op het rapport: geen kaart, maar een titel en een dunne kader */
.kaart { background: var(--papier); border: 1px solid var(--lijn); padding: 18px 16px; margin-bottom: 16px; }
.kaart.smal { max-width: 420px; margin: 40px auto; }
h1 { font-size: 21px; font-weight: 400; margin: 0 0 16px; color: var(--koptekst); }
h1.zonder-marge { margin: 0; }
h2 { font-size: 13px; font-weight: 700; margin: 0; color: var(--koptekst); }

.veld { margin-bottom: 14px; }

/* registratieformulier: twee kolommen vanaf tabletbreedte, zodat alles zonder scrollen past */
.raster { display: grid; grid-template-columns: 1fr; gap: 0 28px; margin-bottom: 0; }
@media (min-width: 860px) {
  .raster { grid-template-columns: 1fr 1fr; padding: 20px 24px; }
  .raster .kolom + .kolom { border-left: 1px solid var(--lijn-zacht); padding-left: 28px; }
}
/* breed scherm: het formulier vult de vensterhoogte, "Wat heb je gedaan?" krijgt alle resterende ruimte */
@media (min-width: 860px) and (min-height: 560px) {
  body { display: flex; flex-direction: column; min-height: 100vh; }
  main { flex: 1; display: flex; flex-direction: column; width: 100%; }
  #scherm-registreren { flex: 1; display: flex; flex-direction: column; }
  #form-reg { flex: 1; margin-bottom: 0; }
  #form-reg .kolom { display: flex; flex-direction: column; }
  #form-reg .veld-oms { flex: 1; display: flex; flex-direction: column; }
  #omschrijving { flex: 1; min-height: 140px; resize: none; }
}
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .duo { grid-template-columns: 1fr; } }
.tijd-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tijd-rij .keuzes.snel { margin-top: 0; }
.vandaag { font-size: 13px; color: var(--zacht); margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--lijn-zacht); }
.vandaag:empty { display: none; }
.vandaag strong { color: var(--koptekst); }

/* overzicht: werkbalk met filters op één rij (breed scherm) */
.werkbalk { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; padding: 14px 16px; }
.werkbalk .groep { min-width: 0; }
.werkbalk .groep .label { margin-bottom: 6px; }
.rij.smal { flex-wrap: nowrap; }
.rij.smal input { flex: 0 0 148px; min-width: 0; width: 148px; }
.groep.totaal { margin-left: auto; text-align: right; }
.totaal-getal { display: block; font-size: 24px; font-weight: 700; color: var(--koptekst); font-variant-numeric: tabular-nums; }
.uren th.k-datum { width: 92px; }
.uren th.k-taak { width: 22%; }
.met-datum th.k-taak { width: 18%; }
.uren td.k-datum { white-space: nowrap; font-size: 12px; }
.uren td.k-taak { font-size: 12px; }
@media (max-width: 600px) { .uren th.k-taak { width: 30%; } .uren th.k-datum { width: 72px; } }

/* beheer: kaarten naast elkaar op een breed scherm */
.beheer-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 16px; }
.label, label { display: block; font-weight: 700; font-size: 12px; color: var(--koptekst); margin-bottom: 4px; }
label > input, label > .keuzes { margin-top: 4px; font-weight: 400; }
.zacht { color: var(--zacht); font-weight: 400; }

input, select, textarea { width: 100%; font: inherit; color: var(--tekst); background: var(--papier);
  border: 1px solid var(--lijn); border-radius: 0; padding: 9px 10px; min-height: 42px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--blauw); outline-offset: -1px; border-color: var(--blauw); }
select:disabled { background: var(--rij); color: var(--zacht); }

.rij { display: flex; gap: 8px; align-items: center; }
.rij input { flex: 1 1 140px; min-width: 140px; }
.rij .chip { padding: 8px 10px; }
.rij:has(input) { flex-wrap: wrap; }
.rij.tussen { justify-content: space-between; margin-bottom: 10px; }

/* keuzes = rechthoekige knoppen die tegen elkaar aansluiten waar het kan */
.keuzes { display: flex; flex-wrap: wrap; gap: 6px; }
.keuzes.snel { margin-top: 8px; }
button { font: inherit; cursor: pointer; }
.chip { border: 1px solid var(--lijn); background: var(--papier); color: var(--tekst); border-radius: 0;
  padding: 8px 12px; min-height: 38px; white-space: nowrap; font-size: 14px; }
.chip:hover { border-color: var(--blauw); color: var(--koptekst); }
.chip.aan { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.chip:disabled { opacity: .45; cursor: not-allowed; border-style: dashed; }
.chip:disabled:hover { border-color: var(--lijn); color: var(--tekst); }
.rubrieken .chip { font-size: 12px; font-weight: 700; letter-spacing: .03em; }

.hoofd { width: 100%; background: var(--blauw); color: #fff; border: 0; border-radius: 0;
  padding: 13px; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; min-height: 48px; }
.hoofd:hover { background: var(--blauw-donker); }
.hoofd:disabled { opacity: .55; cursor: progress; }
.link { background: none; border: 0; color: var(--koptekst); text-decoration: underline; padding: 4px; font-size: 13px; }

.tijd { display: flex; align-items: stretch; }
.tijd output { font-size: 26px; font-weight: 700; min-width: 120px; text-align: center; color: var(--koptekst);
  font-variant-numeric: tabular-nums; border: 1px solid var(--lijn); border-left: 0; border-right: 0;
  display: flex; align-items: center; justify-content: center; }
.stap { width: 48px; min-height: 48px; border-radius: 0; border: 1px solid var(--blauw); background: var(--blauw);
  color: #fff; font-size: 22px; line-height: 1; }
.stap:hover { background: var(--blauw-donker); }

.hint { font-size: 12px; color: var(--zacht); margin: 8px 0 0; padding: 6px 10px; background: var(--licht);
  border-left: 3px solid var(--blauw); }
.fout { color: var(--slecht); min-height: 1.4em; margin: 10px 0 0; }
.melding { margin: 12px 0 0; }
.melding:empty { display: none; }
.melding.goed, .melding.slecht { padding: 9px 12px; border-left: 3px solid; font-size: 14px; }
.melding.goed { color: var(--goed); background: var(--goed-vlak); }
.melding.slecht { color: var(--slecht); background: var(--slecht-vlak); }
.melding pre { white-space: pre-wrap; font: 12px/1.4 Consolas, monospace; background: var(--rij); padding: 8px;
  color: var(--tekst); border-left: 3px solid var(--blauw); }

/* overzicht = de tabel van het prestatieoverzicht */
.dag { margin-top: 18px; }
.dag-titel { font-size: 13px; font-weight: 700; color: var(--koptekst); margin: 0 0 4px; }
.dag-titel::first-letter { text-transform: uppercase; }
table.uren { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--lijn); table-layout: fixed; }
.uren td { overflow-wrap: anywhere; }
.uren th { background: var(--blauw); color: #fff; font-size: 10.5px; font-weight: 400; letter-spacing: .04em;
  text-transform: uppercase; text-align: left; padding: 7px 8px; border-right: 1px solid rgba(255,255,255,.25); }
.uren td { padding: 9px 8px; vertical-align: top; border-top: 1px solid var(--lijn-zacht);
  border-right: 1px solid var(--lijn-zacht); }
.uren th:last-child, .uren td:last-child { border-right: 0; text-align: right; white-space: nowrap; width: 56px; }
.uren tbody tr:nth-child(even) td { background: var(--rij); }
.uren .proj { display: block; color: var(--zacht); font-size: 12px; margin-top: 2px; }
.uren tfoot td { font-weight: 700; border-top: 1px solid var(--tekst); background: var(--papier); }
.uren tr.nieuw td { background: var(--licht); }
.uren tr.nieuw td:first-child { box-shadow: inset 3px 0 0 var(--geel); }

/* beheer */
.beheer h2 { font-size: 16px; font-weight: 400; }
.beheer > .zacht { margin: 2px 0 12px; font-size: 13px; }
.schakel { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tekst); margin: 0 0 12px; cursor: pointer; }
.schakel input, .klant-naam input { width: 18px; height: 18px; min-height: 0; accent-color: var(--blauw); margin: 0; border-radius: 0; }
.toegang-lijst { border: 1px solid var(--lijn); max-height: 440px; overflow-y: auto; margin-bottom: 12px; }
.toegang-kop { background: var(--blauw); color: #fff; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 10px; position: sticky; top: 0; z-index: 1; }
.klant-rij { padding: 9px 10px; border-top: 1px solid var(--lijn-zacht); }
.klant-rij:nth-child(odd) { background: var(--rij); }
.klant-rij.aan { background: var(--licht); box-shadow: inset 3px 0 0 var(--geel); }
.klant-naam { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tekst); margin: 0; cursor: pointer; }
.keuzes.klein { margin: 6px 0 0 28px; gap: 4px; }
.keuzes.klein .chip { font-size: 12px; padding: 4px 8px; min-height: 28px; }
.keuzes.klein .chip.aan:disabled { opacity: .7; border-style: solid; cursor: default; }
.waarschuwing { display: block; margin: 3px 0 0 28px; font-size: 12px; color: #8A5A00; }
@media (prefers-color-scheme: dark) { .waarschuwing { color: #FFD666; } }
.zoek { margin-bottom: 12px; }
.zoek-resultaten { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.samenvatting { font-weight: 700; font-size: 13px; color: var(--koptekst); margin: 0 0 12px; }

/* passkeys */
.klein-tekst { font-size: 12px; }
.scheiding { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); }
.hoofd.licht { background: var(--papier); color: var(--koptekst); border: 1px solid var(--blauw); }
.hoofd.licht:hover { background: var(--licht); }
#scherm-aanmelden .hoofd, #scherm-uitnodiging .hoofd { margin-top: 6px; }
.boven { margin-top: 16px; }
.onderaan { display: flex; align-items: flex-end; }
.uren.toestellen td:last-child, .uren.toestellen th:last-child { width: auto; text-align: left; }
.uren td.ok { color: var(--goed); font-weight: 700; }
.uren td.wacht { color: #8A5A00; font-weight: 700; }
.toestel-blok { border: 1px solid var(--lijn); margin: 0 0 14px; }
.toestel-blok > .keuzes, .toestel-blok > .uitnodiging { padding: 8px 10px 0; margin: 0; }
.toestel-blok > .uitnodiging { padding-bottom: 8px; }
.toestel-blok .rand { padding: 8px 10px; margin: 0; }
.toestel-rij { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px;
  border-top: 1px solid var(--lijn-zacht); flex-wrap: wrap; }
.toestel-rij.wacht { background: #FFF6D1; box-shadow: inset 3px 0 0 var(--geel); }
@media (prefers-color-scheme: dark) { .toestel-rij.wacht { background: #2E2808; } }
.toestel-rij .keuzes.klein { margin: 0; }
.uitnodiging p { margin: 6px 0; }
.uitnodiging input { font: 12px Consolas, monospace; min-height: 34px; }

/* voettekst zoals op het rapport */
.voet { max-width: calc(var(--breedte) - 32px); margin: 8px auto 0; display: flex; justify-content: space-between; gap: 12px;
  font-size: 11px; color: var(--zacht); padding: 10px 0 24px; border-top: 1px solid var(--lijn-zacht); }
@media (max-width: 1212px) { .voet { margin-left: 16px; margin-right: 16px; } }
@media (max-width: 520px) { .voet { flex-direction: column; gap: 2px; } }