/* Stijl van de app. Overgenomen uit de demo: donkere verloopachtergrond in de
   huisstijlkleuren (#1d1d1b en #95bf1d), glaspanelen daarboven, Fraunces
   cursief voor koppen en Inter voor de rest.

   Puur #1d1d1b als vlak vlak wordt dof, dus de achtergrond loopt van
   bijna-zwart naar een heel donkere olijftint, met een lime gloed linksboven.
   Het glas-effect komt op donker beter uit dan op een lichte ondergrond. */

@import url("fonts.58b51162f930.css");

:root{
  --accent:#95BF1D;
  --accent-rgb:149,191,29;
  --hi:#D6EC9B;                 /* lichte accenttekst: getallen, "vandaag" */
  --ink:#1A1A18;
  --rood:#E07B5F;
  --achtergrond:
    radial-gradient(ellipse 70% 60% at 12% 6%, rgba(149,191,29,0.20), transparent 62%),
    radial-gradient(ellipse 60% 60% at 90% 94%, rgba(149,191,29,0.09), transparent 60%),
    linear-gradient(160deg, #1D1D1B 0%, #212220 32%, #262B20 62%, #2E3522 100%);
}

*{ box-sizing:border-box; }
/* Een eigen display-regel (flex, grid, inline-flex) wint van het standaard
   verbergen door de browser, waardoor een element met hidden tóch zichtbaar
   blijft. Daarom hier één keer hard gezet. */
[hidden]{ display:none !important; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;                /* niet kleiner: iOS zoomt anders in op invoervelden */
  background:var(--achtergrond);
  background-attachment:fixed;
  color:#FFFFFF;
  min-height:100vh;
  padding:1.6rem;
  padding-top:calc(1.6rem + env(safe-area-inset-top));
  display:flex; flex-direction:column; align-items:center;
  -webkit-text-size-adjust:100%;
  /* body is hier de scrollcontainer (zie overflow-x hierboven). Reserveer
     de ruimte voor de scrollbalk altijd, anders schuift de gecentreerde
     kaart op een laptop een halve balkbreedte op tussen korte en lange
     schermen. Op een telefoon zweeft de balk en kost dit niets. */
  scrollbar-gutter:stable;
}
/* ruimte voor de zwevende navigatie: een kolom links op een breed scherm,
   een balk onderaan op een telefoon — zie .sidebar hieronder. Alleen
   ingelogd, dus als eigen klasse i.p.v. altijd-aan op body. */
body.met-navigatie{ padding-left:6.6rem; }

.glas{
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 24px 70px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Eén breedte voor elk scherm. Eerder was de kaart 640px en sprongen Uren en
   het weekoverzicht naar 1180px: op een laptop verspringt de app dan bij
   elke klik in de navigatie. 1040px is afgestemd op het planbord: een
   werkweek met lege zaterdag en zondag (uren/views.py, BORD_*) past er
   precies in zonder te scrollen, en formulieren rekken nog niet uit. Wie
   die kolommen breder maakt, moet hier mee. */
.kaart{
  border-radius:28px; padding:1.8rem 2rem 2.2rem;
  width:100%; max-width:1040px;
}

/* ══════════ TELEFOON: DE APP *IS* HET SCHERM ══════════
   Op een breed scherm is de app één zwevende glaskaart op de gradient — dat
   is de vormtaal en die blijft. Op een telefoon klopte dat niet: je keek naar
   een scherm, met daarin een marge, met daarin een kader met ronde hoeken en
   een randje, en pas daarbínnen begon de app. Drie lagen om hetzelfde te
   zeggen, en je verliest er aan alle kanten ruimte mee op het smalste scherm
   dat we hebben.

   Op een telefoon vult de app daarom het hele scherm: geen buitenmarge, geen
   rand, geen ronde hoeken, geen slagschaduw. De gradient blijft de ondergrond
   en de losse onderdelen (rijen, knoppen, dialogen, de navigatiebalk) houden
   hun glas — de herkenning zit in díé onderdelen, niet in een kader eromheen.

   Meegenomen voordeel: zonder backdrop-filter op .kaart is die geen
   containing block meer voor position:fixed-kinderen, wat eerder al een
   zwevende knop binnen de kaart liet vastlopen. */
@media (max-width:700px){
  body{ padding:0; padding-top:env(safe-area-inset-top); }
  body.met-navigatie{ padding-left:0; padding-bottom:0; }
  .kaart.glas{
    max-width:none;
    border:0; border-radius:0; box-shadow:none;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:1.2rem 1rem 1.6rem;
  }
  /* De navigatiebalk zweeft over de inhoud heen en valt buiten de
     scrollhoogte: zonder deze ruimte ligt de laatste knop van een scherm
     eronder en is hij niet aan te tikken. */
  body.met-navigatie .kaart{ padding-bottom:calc(6rem + env(safe-area-inset-bottom)); }
}

/* ══════════ AANRAAKGEDRAG ══════════
   Alles hierboven is ontworpen voor een telefoon, maar een browser gedraagt
   zich op touch net even anders dan met een muis:

   1. Een tik geeft standaard een blauwe/grijze flits over het element heen.
      Die vloekt met het glas en hoort bij geen enkele knop hier.
   2. :hover blíjft op touch hangen ná een tik, tot je ergens anders tikt —
      een aangetikte klusregel blijft dan "opgelicht" alsof hij geselecteerd
      is. Daarom staat elke hover-regel in dit bestand in @media (hover:hover):
      alleen een echte muis krijgt ze.
   3. Zonder drukfeedback voelt een tik als "er gebeurt niets" zolang de
      volgende pagina laadt — op 4G in de bus zijn dat zomaar twee seconden.
      Daarom krijgt alles wat je kunt aantikken een :active-staat.
   4. touch-action:manipulation haalt de dubbeltik-om-in-te-zoomen weg op
      knoppen en rijen; dat scheelt de vertraging vóór een tik "aankomt". */
a, button, .knop, .knop-stil, .pil, .side-icon, .klusregel, .profielregel,
.klus-slide, .klustegel, .maanddag, .maandwidget, .fotokaart-nieuw, .keuzepil .vlak,
.dialog-sluiten, .weg button, .legenda a{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.knop:active, .knop-stil:active, .pil:active, .legenda a:active,
.fotokaart-nieuw:active, .keuzepil .vlak:active, .tabblad:active{
  filter:brightness(.92);
}
.klusregel:active, .profielregel:active, .klus-slide:active,
.maanddag:active, .adres-suggesties li:active{
  background:rgba(255,255,255,0.16);
}
.klustegel:active, .blok:active, .bord-chip:active{ transform:scale(.985); }
.side-icon:active{ background:rgba(255,255,255,0.16); }
.weg button:active, .dialog-sluiten:active{ background:rgba(255,255,255,0.28); }

/* ══════════ KOP ══════════ */
.kop{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; margin-bottom:1.4rem;
}
/* Het blad uit het logo van De Groene M, links naast de titel. De lichte
   variant (donkere blad-helften vervangen door gebroken wit) omdat de zwarte
   uit het origineel wegvalt tegen de donkere achtergrond. */
.kop .merk{ width:34px; height:auto; flex-shrink:0; margin-top:.1rem; }
.kop .koptekst{ flex:1 1 auto; min-width:0; }

/* Terugpijltje op de plek van het logo (klusdossier e.d.): zelfde 34px zodat
   de kop niet springt tussen schermen met en zonder logo. .bewerk-knop (het
   potlood naast de hero-foto, zie .klus-hero-blok) deelt dezelfde
   rondje-vormtaal. */
.terug-pijl, .bewerk-knop{
  width:34px; height:34px; flex-shrink:0; margin-top:.1rem;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.85); transition:background .12s;
}
.terug-pijl svg, .bewerk-knop svg{ width:19px; height:19px; }
.terug-pijl:active, .bewerk-knop:active{ background:rgba(255,255,255,0.18); }
@media (hover:hover){
  .terug-pijl:hover, .bewerk-knop:hover{ background:rgba(255,255,255,0.14); color:#fff; }
}

/* Inlogscherm: daar is het blad geen bijzaak maar het eerste dat je ziet. */
.kaart.inloggen{ max-width:420px; }
.kaart.inloggen .kop{ flex-direction:column; align-items:center; text-align:center; gap:.9rem; }
.kaart.inloggen .merk{ width:96px; margin-top:.4rem; }
/* "Wachtwoord vergeten?" en "Terug naar inloggen": rustige link onder het
   formulier, geen tweede knop naast de hoofdactie */
.inloglink{ margin:1.2rem 0 0; text-align:center; font-size:13px; }
.inloglink a{ color:rgba(255,255,255,0.65); }
@media (hover:hover){ .inloglink a:hover{ color:#fff; } }
/* Zonder kaartkader (zie "TELEFOON: DE APP IS HET SCHERM") plakt een
   inlogscherm bovenaan met een half scherm leegte eronder. Verticaal
   centreren geeft hetzelfde beeld als het inlogscherm van een echte app. */
@media (max-width:700px){
  .kaart.inloggen{
    display:flex; flex-direction:column; justify-content:center;
    min-height:calc(100vh - env(safe-area-inset-top));
    min-height:calc(100dvh - env(safe-area-inset-top));
  }
}

h1{
  font-family:'Fraunces',serif; font-style:italic; font-weight:600;
  font-size:1.6rem; margin:0; line-height:1.15;
}
.kop .sub{ font-size:11.5px; color:rgba(255,255,255,0.6); margin:.25rem 0 0; }

/* Klusdossier: titel gecentreerd onder de hero-waaier (zie .klus-hero-blok
   hierboven), i.p.v. links uitgelijnd naast een logo/pijl die er niet meer
   staat. */
.kaart.klus-dossier .kop{ justify-content:center; }
.kaart.klus-dossier .koptekst{ flex:0 1 auto; text-align:center; }
/* De terugverwijzing in .sub is op bijna elk scherm de enige weg terug, en
   was een regel tekst van 11,5px zonder ruimte eromheen — met een duim raak
   je die half. De tekst blijft even klein, de tikruimte eromheen niet. */
.kop .sub a{ display:inline-block; padding:.45rem .6rem .45rem 0; margin:-.45rem 0; }

/* ══════════ NAVIGATIE: ZWEVENDE ZIJBALK / ONDERBALK ══════════
   Eén nav-element, alleen ingelogd getoond (basis.html). Op een breed
   scherm een verticale, zwevende glaspil links, verticaal gecentreerd —
   zelfde idee als de gecentreerde .kaart, niet een balk die tegen de rand
   plakt. Op een telefoon wordt diezelfde pil een horizontale balk onderaan,
   met horizontaal scrollen als niet alles past (zelfde idioom als de
   weekkalender/planbord: liever scrollen dan iconen verstoppen). */
.sidebar{
  position:fixed; left:1.3rem; top:50%; transform:translateY(-50%);
  z-index:20; display:flex; flex-direction:column; align-items:center;
  gap:.3rem; padding:.85rem .5rem; border-radius:999px;
  max-height:calc(100vh - 2.6rem); overflow-y:auto;
}
.sidebar::-webkit-scrollbar{ display:none; }
.sidebar{ scrollbar-width:none; }

.side-icon{
  position:relative; flex-shrink:0; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.6); text-decoration:none;
  transition:background .12s, color .12s;
}
@media (hover:hover){ a.side-icon:hover{ background:rgba(255,255,255,0.10); color:#fff; } }
.side-icon svg{ width:20px; height:20px; }
.side-icon.actief{
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.55), rgba(var(--accent-rgb),0.20));
  border:1px solid rgba(var(--accent-rgb),0.45);
  color:var(--hi);
}
.side-icon.nog-niet{ opacity:.35; }
/* Mijn profiel toont je eigen avatarrondje (_medewerkerbol.html) i.p.v. een
   icoon; actief krijgt het een accentring in plaats van de gevulde pil */
.side-icon .nav-bol{
  width:30px; height:30px; border-radius:999px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; color:#fff; letter-spacing:.02em;
}
.side-icon.actief:has(.nav-bol){ background:none; border-color:transparent; }
.side-icon.actief .nav-bol{ box-shadow:0 0 0 2px var(--ink), 0 0 0 4px rgba(var(--accent-rgb),0.9); }
/* zichtbaar voor schermlezers en voor de tegeltitels()-tests, niet in beeld */
.side-icon .titel{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width:700px){
  .sidebar{
    left:50%; top:auto; bottom:calc(.7rem + env(safe-area-inset-bottom));
    transform:translateX(-50%);
    flex-direction:row; max-width:calc(100% - 1.4rem); max-height:none;
    /* iets krapper dan op breed: met Loonstrook erbij heeft de eigenaar
       zeven iconen, en die passen met .3rem net niet op 375px */
    gap:.2rem;
    overflow-x:auto; overflow-y:visible;
    /* er passen meestal niet alle iconen op 375px; deze rand-vervaging is
       het enige signaal dat de balk nog verder scrolt. Smal houden: bij 14px/22px
       op een icoon van 44px doofde de rand zelf grotendeels mee, ook als alles
       gewoon past (geen overflow) en er dus niets te verbergen viel. */
    mask-image:linear-gradient(to right, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
  }
}

/* ══════════ KNOPPEN ══════════ */
.knop{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-height:50px; padding:.85rem 1.2rem;
  border:1px solid rgba(var(--accent-rgb),0.5); border-radius:999px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-rgb),0.72));
  color:var(--ink); font-family:'Inter',sans-serif; font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer;
}
.knop:active{ filter:brightness(.94); }

/* tweede knop: doorschijnend, voor navigatie naast de hoofdactie */
.knop-stil{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; min-height:40px; padding:.5rem .9rem;
  background:rgba(255,255,255,0.10); color:#fff; border:1px solid rgba(255,255,255,0.24);
  border-radius:999px; font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
  text-decoration:none; cursor:pointer; line-height:1;
}
@media (hover:hover){ .knop-stil:hover{ background:rgba(255,255,255,0.18); } }

/* ══════════ FORMULIEREN ══════════ */
label{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:rgba(255,255,255,0.5);
  margin:1.1rem 0 .35rem;
}
/* alles behalve de vinkjes, de kleurkiezer en het zoekveld: die hebben hun
   eigen vorm (het zoekveld leeft in de pil van .foto-zoekbalk). Zo valt een
   nieuw soort veld — tel, email, number — nooit meer wit uit. */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=search]),select,textarea{
  width:100%; padding:.8rem .9rem; font-size:16px;
  font-family:'Inter',sans-serif; color:#fff;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.20);
  border-radius:14px; appearance:none;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:rgba(var(--accent-rgb),0.7); }
select option{ background:#24291E; color:#fff; }
textarea{ resize:vertical; }
/* de klok- en kalendericonen van de browser zijn zwart op donker; omkeren */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.6; }

.fout{ color:var(--rood); font-size:12.5px; margin:.4rem 0 0; }
.onderaan{ text-align:center; margin:1rem 0 0; font-size:12px; }
.onderaan a{ color:rgba(255,255,255,0.6); }
.verwijder{ text-align:center; margin-top:1.2rem; }
.verwijder button{
  background:none; border:0; color:var(--rood);
  font-family:'Inter',sans-serif; font-size:12.5px; cursor:pointer; padding:.6rem;
  text-decoration:underline;
}

/* ══════════ UREN SCHRIJVEN: COMPACTE KOP ══════════
   Verving drie blokken (weergave-pillen, navbalk, een volle-breedte
   "Uren toevoegen"-knop — samen ruim 180px) door twee korte regels. De oude
   klassen (.navbalk, .totaal-chip, .weergave-pillen/.pil) blijven bestaan
   voor aanwezigheid.html, export.html en planbord.html — dit zijn bewust
   nieuwe, eigen klassen, geen herstyling van de oude. */
.urentop{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.5rem; }
.urentop-nav{ display:flex; align-items:center; gap:.3rem; min-width:0; }
.urenpijl{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  color:#fff; font-size:16px; text-decoration:none; line-height:1;
}
@media (hover:hover){ .urenpijl:hover{ background:rgba(255,255,255,0.16); } }
.urenpijl:active{ background:rgba(255,255,255,0.22); }
.urentop .periodetitel{
  flex:1 1 auto; min-width:0; margin:0 .2rem; font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Dag/Week/Maand als drie pillen, net als de zoomknoppen op Aanwezigheid
   (.wp-weken). Ze krimpen niet; als het krap wordt, kort de datumtitel in. */
.weergave-knoppen{ display:flex; gap:.4rem; flex-shrink:0; }
.weergave-knoppen .pil{ padding:.4rem .85rem; }
.urentop .periodetitel .kort{ display:none; }
@media (max-width:480px){
  .weergave-knoppen{ gap:.3rem; }
  .weergave-knoppen .pil{ padding:.4rem .6rem; }
  /* naast de pillen past "Donderdag 1 oktober" niet; dan "Do 1 Okt" */
  .urentop .periodetitel .lang{ display:none; }
  .urentop .periodetitel .kort{ display:inline; }
}

/* ══════════ FOTO'S: ZOEKBARE KLUS-KIEZER ══════════
   Bij een paar opties volstaat de kale <select> hierboven, maar met
   tientallen klussen moet je kunnen typen om er één te vinden. static/js/
   fotozoeken.js bouwt hier in JS een zoekbare knop + lijst overheen; de
   <select> blijft de bron van waarheid voor het formulier (form=
   "foto-zoekform") en is het volledige element zolang JS niet is geladen. */
.klus-kiezer{ position:relative; flex-shrink:1; min-width:0; }
/* pas verstopt zodra JS 'm daadwerkelijk vervangen heeft door de knop
   hieronder — anders is de select bij een falende/trage script-load
   onbereikbaar */
.klus-kiezer.js-klaar .klus-kiezer-select{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.klus-kiezer-trigger{
  display:none; align-items:center; gap:.5rem; max-width:100%;
  padding:.4rem 1.8rem .4rem .85rem; font-size:12.5px; font-weight:600;
  font-family:'Inter',sans-serif; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.20);
  color:#fff; position:relative;
}
.klus-kiezer.js-klaar .klus-kiezer-trigger{ display:inline-flex; }
.klus-kiezer-trigger .label{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:44vw;
}
.klus-kiezer-trigger svg{
  position:absolute; top:50%; right:.6rem; transform:translateY(-50%);
  width:13px; height:13px; color:rgba(255,255,255,0.6); pointer-events:none;
}

.klus-kiezer-popover{
  position:absolute; z-index:30; top:calc(100% + .5rem); left:0;
  width:290px; max-width:min(290px, 88vw); border-radius:18px; padding:.8rem;
  display:flex; flex-direction:column; gap:.6rem;
  /* Dekkend, niet doorzichtig: dit paneel staat boven het fotoraster en
     glas over foto's maakt de tekst onleesbaar. Zelfde nagebouwde glaslook
     als de namenkolom van het planbord (.bord-naam). */
  background:
    linear-gradient(150deg, rgba(255,255,255,0.125), rgba(255,255,255,0.05)),
    linear-gradient(160deg, #20211C, #282C21);
}
.klus-kiezer-zoek{
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18);
  border-radius:999px; padding:.55rem .85rem;
}
.klus-kiezer-zoek svg{ width:14px; height:14px; color:rgba(255,255,255,0.5); flex-shrink:0; }
.klus-kiezer-zoek input{
  -webkit-appearance:none; appearance:none;
  background:none; border:none; outline:none; flex:1 1 auto; min-width:0;
  font-family:'Inter',sans-serif; font-size:13.5px; color:#fff;
}
.klus-kiezer-zoek input::placeholder{ color:rgba(255,255,255,0.45); }
.klus-kiezer-zoek input::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* de drie-standenknop "Alle / Actief / Niet actief" die de lijst hieronder
   filtert — zelfde .keuzepil-vormtaal als de aanwezigheidsregistratie, maar
   neutraal: elke gekozen stand krijgt dezelfde accenttint, geen semantiek
   per kleur zoals bij ja/nee/onbekend. */
.klus-kiezer-scope{ gap:.35rem; }
.klus-kiezer-scope .vlak{ min-height:30px; padding:.3rem .7rem; font-size:11.5px; }
.keuzepil.scope input:checked + .vlak{
  background:rgba(var(--accent-rgb),0.32); border-color:rgba(var(--accent-rgb),0.6); color:var(--hi);
}

.klus-kiezer-lijst{
  list-style:none; margin:0; padding:0; max-height:250px; overflow-y:auto;
  display:flex; flex-direction:column; gap:.15rem;
}
.klus-kiezer-item{
  display:block; width:100%; text-align:left; border:0; cursor:pointer;
  background:none; color:rgba(255,255,255,0.8); font-family:'Inter',sans-serif;
  font-size:13.5px; padding:.55rem .7rem; border-radius:12px;
}
@media (hover:hover){ .klus-kiezer-item:hover{ background:rgba(255,255,255,0.10); color:#fff; } }
.klus-kiezer-item[aria-selected="true"]{
  background:rgba(var(--accent-rgb),0.28); color:var(--hi); font-weight:600;
}
/* Adres en plaats onder de klusnaam: twee klussen van dezelfde opdrachtgever
   zijn zo uit elkaar te houden (zie klussen.forms.KlusSelect). */
.klus-kiezer-waar{
  display:block; font-size:11.5px; font-weight:400; color:rgba(255,255,255,0.55); margin-top:.1rem;
}
.klus-kiezer-leeg{
  color:rgba(255,255,255,0.5); font-size:12.5px; text-align:center; padding:.9rem .5rem; margin:0;
}

/* Dezelfde kiezer, nu als invulveld in plaats van als filterpil: de klus bij
   het uren schrijven (uren/_uurblokformulier.html). Hij staat daar tussen
   Dag/Van/Tot en moet dus de vorm van die velden aannemen — volle breedte,
   radius 14, 16px tekst (kleiner en iOS zoomt bij het openen in) — in plaats
   van de kleine pil die boven het fotoraster tussen andere pillen staat. De
   popover loopt mee in de breedte van het veld eronder. */
.klus-kiezer-veld{ display:block; width:100%; }
.klus-kiezer-veld .klus-kiezer-trigger{
  width:100%; justify-content:flex-start; border-radius:14px;
  padding:.8rem 2.4rem .8rem .9rem; font-size:16px; font-weight:400;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.20);
}
.klus-kiezer-veld .klus-kiezer-trigger .label{ max-width:100%; }
.klus-kiezer-veld .klus-kiezer-trigger svg{ right:.9rem; width:15px; height:15px; }
.klus-kiezer-veld .klus-kiezer-popover{
  width:100%; max-width:none;
  /* Eigen, bijna dekkende ondergrond i.p.v. alleen het glas van .glas: in een
     bottom sheet (die zelf al een backdrop-filter heeft) blurt een geneste
     backdrop-filter de velden eronder niet, en dan lees je dwars door de
     lijst heen. Zelfde tint als de keuzelijst van de browser hierboven. */
  background:#252A1E;
}

.urensub{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.totaal-chip-klein{
  display:inline-flex; align-items:baseline; gap:.35rem;
  padding:.3rem .7rem; border-radius:999px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.30), rgba(var(--accent-rgb),0.12));
  border:1px solid rgba(var(--accent-rgb),0.35);
}
.totaal-chip-klein .n{
  font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:.95rem; color:var(--hi);
}
.totaal-chip-klein .l{ font-size:10.5px; color:rgba(255,255,255,0.7); }
.vandaag-chip{
  padding:.3rem .75rem; border-radius:999px; font-size:11px; font-weight:600;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.7); text-decoration:none;
}
@media (hover:hover){ .vandaag-chip:hover{ background:rgba(255,255,255,0.14); color:#fff; } }

/* "Uren toevoegen": op een breed scherm een gewone knop met tekst; op een
   telefoon een zwevend rond "+"-knopje rechtsonder (zoals het "+"-knopje in
   een agenda-app), altijd in beeld — niet meer ergens onderaan een agenda
   van ~700px die meestal leeg is. */
.knop-uren-toevoegen{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; min-height:50px; margin-top:1.2rem; padding:.85rem 1.2rem;
  border:1px solid rgba(var(--accent-rgb),0.5); border-radius:999px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-rgb),0.72));
  color:var(--ink); font-family:'Inter',sans-serif; font-size:15px; font-weight:600;
  cursor:pointer;
}
.knop-uren-toevoegen:active{ filter:brightness(.94); }
.knop-uren-toevoegen svg{ display:none; }
@media (max-width:700px){
  .knop-uren-toevoegen{
    position:fixed; z-index:19; margin:0;
    right:1rem; bottom:calc(5.3rem + env(safe-area-inset-bottom));
    width:56px; height:56px; min-height:0; padding:0; border-radius:50%;
    box-shadow:0 10px 26px rgba(0,0,0,0.35);
  }
  /* tekst blijft voor schermlezers, verdwijnt visueel — zelfde truc als
     .side-icon .titel elders in dit bestand */
  .knop-uren-toevoegen .tekst{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .knop-uren-toevoegen svg{ display:block; width:24px; height:24px; }
}

/* ══════════ UREN SCHRIJVEN: WEEKKALENDER ══════════
   Maten uit de demo: van 06:00 tot 20:00 in vakken van een half uur van
   26px. Zeven dagen naast elkaar passen niet op een telefoon, dus het
   raster scrollt horizontaal binnen zijn eigen kader. */
.navbalk{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; flex-wrap:wrap; margin-bottom:1rem;
}
.navlinks{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.periodetitel{
  font-family:'Fraunces',serif; font-style:italic; font-weight:600;
  font-size:1.05rem; margin-left:.3rem;
}
.totaal-chip{
  border-radius:999px; padding:.45rem 1rem; display:flex; align-items:baseline; gap:.4rem;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.42), rgba(var(--accent-rgb),0.14));
  border:1px solid rgba(var(--accent-rgb),0.4);
}
.totaal-chip .n{
  font-family:'Fraunces',serif; font-style:italic; font-weight:600;
  font-size:1.1rem; color:var(--hi);
}
.totaal-chip .l{ font-size:11px; color:rgba(255,255,255,0.75); }

.raster-scroll{
  overflow-x:auto; overflow-y:hidden; padding-bottom:.4rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  /* de sticky tijdas dekt de eerste 48px van elke snap; zonder scroll-padding
     snapt de browser op de rauwe kolomgrens (waar de dag dus half achter de
     as verdwijnt) in plaats van waar de dag zichtbaar begint */
  scroll-padding-left:48px;
  /* rechts een vervagende rand als scroll-hint, zelfde idioom als .sidebar —
     alleen rechts: links zit de vaste tijdas, die moet vol zichtbaar blijven */
  mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.raster-scroll::-webkit-scrollbar{ height:6px; }
.raster-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.2); border-radius:999px; }
/* Op een telefoon breekt de agenda uit de kaartpadding: dezelfde reden als
   "TELEFOON: DE APP IS HET SCHERM" hierboven — de tijd-as moet aan de echte
   schermrand staan, niet nog eens 1rem naar binnen. De padding komt terug op
   het rooster zelf, zodat de uren-tekst niet letterlijk tegen de rand plakt. */
@media (max-width:700px){
  /* -1rem (kaartpadding) + .5rem terug = per saldo 8px van de fysieke
     schermrand i.p.v. de volle 16px van de rest van de pagina-inhoud — merkbaar
     dichter tegen de rand, maar de tijden plakken niet letterlijk tegen de rand. */
  .raster-scroll{ margin:0 -1rem; padding-left:.5rem; padding-right:.5rem; width:calc(100% + 2rem); }
}
.raster{ display:grid; grid-template-columns:48px repeat(7, minmax(92px,1fr)); min-width:700px; }
/* dagweergave: één kolom, geen vaste breedte — dit is de regel die het
   horizontaal scrollen op een telefoon opheft. */
.raster.raster-dag{ grid-template-columns:48px 1fr; min-width:0; }
/* Weekweergave op een telefoon: alle zeven dagen tegelijk in beeld i.p.v.
   scrollen, zoals Google Calendar — smallere kolommen i.p.v. horizontaal
   vegen. Dit mag hier wél, anders dan bij het planbord (SPEC §5, daar
   expliciet vastgelegd als "wordt onleesbaar zodra zes mensen op één dag
   staan"): op dit scherm staat nooit meer dan één persoon — jijzelf — per
   dag, een kolom hoeft dus nooit verder te splitsen. */
@media (max-width:700px){
  .raster:not(.raster-dag){ grid-template-columns:34px repeat(7, minmax(0,1fr)); min-width:0; }
}

.kolomkop{ font-size:11px; text-align:center; padding-bottom:.5rem; color:rgba(255,255,255,0.7); }
.kolomkop .dag{ font-weight:600; text-transform:capitalize; }
.kolomkop .datum{ color:rgba(255,255,255,0.5); font-size:10px; }
.kolomkop .dagtotaal{
  font-size:10px; color:var(--hi); font-variant-numeric:tabular-nums; min-height:13px;
}
.kolomkop.vandaag .dag{ color:var(--hi); }

/* Tijdas. Twee weergaven, twee behoeften:
   - Dagweergave scrollt nooit horizontaal — daar was een vast vlak nergens
     voor nodig en oogde het als een los, verkeerd uitgelijnd blokje. Daar
     gewoon platte tekst op de achtergrond, zoals bij Google Calendar.
   - Weekweergave scrollt wél horizontaal tussen zeven dagen. Zónder sticky
     tijdas scrol je 'm daar simpelweg uit beeld zodra je voorbij de eerste
     dag bent — je uurtjes-referentie is dan weg. De cijfers blijven dus
     gepind, maar zónder eigen ondergrond: staat "vandaag" dicht bij het
     einde van de week (bv. vrijdag), dan is er letterlijk niet genoeg om
     nog naar te scrollen — de browser stopt dan bij zijn scrollgrens, en een
     reepje van de vorige dag blijft noodgedwongen zichtbaar. Met een eigen
     vlak zag dat eruit als een lelijk afgesneden blok; zonder vlak schuift
     dat reepje gewoon natuurlijk door, met de cijfers erboven via
     text-shadow leesbaar in plaats van via een dekkende ondergrond. */
.raster-hoek, .gutter{ position:relative; background:none; }
.raster:not(.raster-dag) .raster-hoek,
.raster:not(.raster-dag) .gutter{ position:sticky; left:0; }
.raster:not(.raster-dag) .raster-hoek{ z-index:4; }
.raster:not(.raster-dag) .gutter{ z-index:3; }
.gutter-lbl{
  position:absolute; right:.5rem; transform:translateY(-50%);
  font-size:9.5px; color:rgba(255,255,255,0.5);
  text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);
}
/* Het eerste label (06:00) hoort exact op de bovenrand van het rooster, en
   translateY(-50%) hangt 'm dus voor de helft ín het rijtje erboven —
   zonder deze regel liep dat dwars door de dagkop ("Vr 18 Sep") heen. */
.gutter-lbl:first-child{ top:2px; transform:none; }

.dagkolom{
  position:relative; border-left:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  /* Was pan-x pan-y (native scrollen toestaan), maar dat zit vast eenmaal
     bepaald bij het begin van een aanraking — de browser negeert latere
     JS-wijzigingen daaraan (ook via pointer capture), dus kon nooit alsnog
     geblokkeerd worden zodra vasthouden-om-te-slepen (kalender.js) bevestigd
     werd: de pagina bleef gewoon scrollen in plaats van het tijdvak te
     tekenen. Met "none" staat vast dat de browser híer nooit zelf scrollt,
     en doet kalender.js dat zelf na voor een gewone swipe. */
  touch-action:none;
  scroll-snap-align:start;
}
@media (hover:hover){ .dagkolom:hover{ background:rgba(255,255,255,0.05); } }
/* zelfde tint als .bord-cel.vandaag bij het planbord */
.dagkolom.vandaag{ background:rgba(var(--accent-rgb),0.07); }
.vak{
  height:26px; border-top:1px solid rgba(255,255,255,0.06); cursor:pointer;
  /* anders toont iOS bij het vasthouden (voor het sleepgebaar) een
     selectie-magnifier over dit lege vak */
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.vak.uurlijn{ border-top:1px solid rgba(255,255,255,0.14); }
.vak.kiezen{ background:rgba(var(--accent-rgb),0.35); }

.blok{
  position:absolute; border-radius:9px; padding:.28rem .5rem;
  overflow:hidden; cursor:pointer; font-size:10.5px; line-height:1.35;
  border:1px solid; color:#fff; text-decoration:none;
  transition:transform .1s;
}
@media (hover:hover){ .blok:hover{ transform:scale(1.015); border-color:rgba(255,255,255,0.75); z-index:5; } }
.blok .tijd{ display:block; font-weight:600; font-variant-numeric:tabular-nums; }
.blok .onder{
  display:block; opacity:.85; margin-top:.1rem;
  overflow-wrap:break-word; word-break:break-word;
}

/* ══════════ UREN: MAANDWEERGAVE ══════════
   Puur navigeren: een dag aantikken opent de dagweergave van die datum.
   Geen tijdas, dus altijd 7 kolommen breed — past zonder scrollen, ook op
   een telefoon. */
.maandkoppen{
  display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem;
  font-size:10.5px; text-align:center; color:rgba(255,255,255,0.5);
  margin-bottom:.4rem;
}
.maandraster{ display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; }
.maanddag{
  aspect-ratio:1; border-radius:12px; padding:.3rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  color:#fff; text-decoration:none; transition:background .12s;
}
@media (hover:hover){ .maanddag:hover{ background:rgba(255,255,255,0.13); } }
.maanddag.buiten-maand{ opacity:.3; }
.maanddag.vandaag{ border-color:rgba(var(--accent-rgb),0.6); background:rgba(var(--accent-rgb),0.18); }
.maanddag .nr{ font-size:13px; font-weight:600; }
.maanddag .uren{ font-size:12px; font-weight:600; line-height:1; color:var(--hi); font-variant-numeric:tabular-nums; }

/* ══════════ MELDINGEN ══════════
   Zweven als tijdelijke toasts onderaan het scherm i.p.v. vast bovenaan de
   kaart te blijven staan — anders blijft bv. "1 bestand toegevoegd" de hele
   sessie in beeld. static/js/meldingen.js voegt na een paar seconden
   .melding-uit toe (deze animatie) en verwijdert het element daarna. */
.meldingen{
  list-style:none; margin:0; padding:0; display:grid; gap:.5rem;
  position:fixed; z-index:40; left:50%; bottom:1.5rem;
  transform:translateX(-50%); width:calc(100% - 2.6rem); max-width:420px;
  pointer-events:none;
}
.melding{
  border-radius:14px; padding:.7rem 1rem; font-size:13px;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
  animation:melding-in .22s ease-out;
}
.melding.melding-uit{ animation:melding-uit .22s ease-in forwards; }
@keyframes melding-in{ from{ opacity:0; transform:translateY(.6rem); } to{ opacity:1; transform:translateY(0); } }
@keyframes melding-uit{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(.6rem); } }
@media (prefers-reduced-motion:reduce){
  .melding{ animation:none; }
  .melding.melding-uit{ animation:none; opacity:0; }
}
.melding.success{
  background:rgba(var(--accent-rgb),0.18); border-color:rgba(var(--accent-rgb),0.42);
  color:var(--hi);
}
.melding.error{ background:rgba(224,123,95,0.18); border-color:rgba(224,123,95,0.45); }
@media (max-width:700px){
  /* boven de vaste iconenbalk onderaan uit, zie .sidebar hierboven */
  .meldingen{ bottom:calc(5.4rem + env(safe-area-inset-bottom)); }
}

/* ══════════ BIJLAGEN: FOTO'S EN DOCUMENTEN ══════════
   Gedeelde bouwstenen voor het klusdossier, de fotodropbox en de foto's bij
   een uurblok. Drie plekken, één vormtaal. */
.foto-zoekbalk{
  display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18);
  border-radius:999px; padding:.75rem 1.1rem; margin-bottom:.9rem;
}
.foto-zoekbalk svg{ width:16px; height:16px; color:rgba(255,255,255,0.5); flex-shrink:0; }
.foto-zoekbalk input{
  -webkit-appearance:none; appearance:none;
  background:none; border:none; outline:none; flex:1 1 auto; min-width:0;
  font-family:'Inter',sans-serif; font-size:13.5px; color:#fff;
}
.foto-zoekbalk input::placeholder{ color:rgba(255,255,255,0.45); }
/* verbergt de zoekknop die sommige browsers in een type=search tonen */
.foto-zoekbalk input::-webkit-search-cancel-button{ -webkit-appearance:none; }

.weergave-pillen{ display:flex; gap:.5rem; margin-bottom:1.4rem; }
.foto-filterrij{ display:flex; margin-bottom:1.4rem; }
.pil{
  font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
  padding:.45rem 1rem; border-radius:999px; text-decoration:none;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.7); transition:background .12s, color .12s, border-color .12s;
}
@media (hover:hover){ .pil:hover{ background:rgba(255,255,255,0.14); color:#fff; } }
.pil.actief{
  background:rgba(var(--accent-rgb),0.32); border-color:rgba(var(--accent-rgb),0.55); color:var(--hi);
}

/* ══════════ PERIODEKALENDER (urenexport) ══════════
   Twee velden (begin, eind) die een maandraster openklappen; zie
   static/js/periodekalender.js. De periode is een doorlopende lime band,
   begin en einde zijn volle bolletjes erop. */
.pk-velden{ display:flex; align-items:center; gap:.5rem; }
.pk-veld{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  padding:.6rem .9rem; border-radius:14px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.20);
  color:#fff; font-family:'Inter',sans-serif;
}
@media (hover:hover){ .pk-veld:hover{ background:rgba(255,255,255,0.15); } }
.pk-veld.actief{ border-color:rgba(var(--accent-rgb),0.7); background:rgba(var(--accent-rgb),0.14); }
.pk-veldlabel{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.pk-veld.actief .pk-veldlabel{ color:var(--hi); }
.pk-waarde{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.pk-pijl{ color:rgba(255,255,255,0.4); flex-shrink:0; }
.periodekalender{
  margin-top:.5rem; padding:.9rem .9rem .6rem; border-radius:18px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
  animation:pk-open .18s ease-out; transform-origin:top center;
}
@keyframes pk-open{ from{ opacity:0; transform:translateY(-6px) scaleY(.96); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .periodekalender{ animation:none; } }
.pk-kop{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.5rem; }
.pk-titel{
  font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:1.05rem;
}
.pk-titel::first-letter{ text-transform:uppercase; }
.pk-raster{ width:100%; border-collapse:separate; border-spacing:0 3px; table-layout:fixed; }
.pk-raster th{
  font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,0.45); padding:.2rem 0 .4rem;
}
.pk-raster td{ padding:0; text-align:center; }
.pk-raster button{
  width:40px; height:40px; max-width:100%; border-radius:50%; border:1px solid transparent;
  background:none; color:#fff; font-family:'Inter',sans-serif; font-size:14px;
  cursor:pointer; font-variant-numeric:tabular-nums;
}
@media (hover:hover){ .pk-raster button:hover{ background:rgba(255,255,255,0.14); } }
.pk-raster button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.pk-raster td.buiten button{ color:rgba(255,255,255,0.3); }
.pk-raster button.vandaag{ color:var(--hi); font-weight:700; border-color:rgba(var(--accent-rgb),0.5); }
.pk-raster td.in-periode{ background:rgba(var(--accent-rgb),0.2); }
/* band rond afmaken aan begin en eind, en aan de randen van elke week */
.pk-raster td.in-periode:first-child, .pk-raster td.begin{ border-top-left-radius:999px; border-bottom-left-radius:999px; }
.pk-raster td.in-periode:last-child, .pk-raster td.eind{ border-top-right-radius:999px; border-bottom-right-radius:999px; }
.pk-raster td.begin button, .pk-raster td.eind button{
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-rgb),0.72));
  color:var(--ink); font-weight:700;
}
.pk-hint{ margin:.3rem 0 0; min-height:1.2em; font-size:12.5px; color:var(--hi); text-align:center; }
.periode-velden{ display:flex; gap:.6rem; }
.periode-snelkeuzes{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem; }

.sectiekop{
  font-family:'Fraunces',serif; font-style:italic; font-weight:600;
  font-size:1.15rem; margin:1.8rem 0 .8rem;
}
/* kop met een actie ernaast, bv. de export-knop op het klusdossier */
.sectiekop-rij{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
/* zonder kop-tekst (het "Documenten"/"Uren"-tabblad, waar de tabnaam al als
   kop dient — zie klussen/klus_detail.html) mist deze rij de marge die
   .sectiekop anders via zijn eigen margin zou geven, en plakt de knop tegen
   de lijst eronder. */
.sectiekop-rij.alleen-actie{ margin-bottom:.8rem; }
/* Met een kop erin: de marge van de rij, niet van de kop. Anders duwt de
   bovenmarge van .sectiekop de tekst omlaag en staat hij lager dan de knop. */
.sectiekop-rij:not(.alleen-actie){ margin:1.8rem 0 .8rem; }
.sectiekop-rij > .sectiekop{ margin:0; }
/* direct onder de tabbladen: die hebben zelf al ruimte eronder */
.tabblad-paneel > .sectiekop-rij:first-child{ margin-top:0; }

/* Tabbladen: Documenten/Uren/Foto's op het klusdossier, één zichtbaar
   tegelijk i.p.v. alle drie onder elkaar (static/js/klustabs.js zet
   .actief/[hidden] om bij een klik). Zelfde pil-vormtaal als .keuzepil,
   maar met knoppen i.p.v. verborgen radio's: hier hoeft geen ander element
   op de pagina te reageren op de stand, dus een klein scriptje is
   eenvoudiger dan de aangrenzende-sibling-trucs die .keuzepil nodig heeft. */
.tabbladen-kop{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem; }
.tabblad{
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:38px; padding:.4rem .95rem; border-radius:999px; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.7); transition:background .12s, color .12s, border-color .12s;
}
.tabblad svg{ width:16px; height:16px; flex-shrink:0; }
@media (hover:hover){ .tabblad:hover{ background:rgba(255,255,255,0.14); color:#fff; } }
.tabblad.actief{
  background:rgba(var(--accent-rgb),0.32); border-color:rgba(var(--accent-rgb),0.6); color:var(--hi);
}
.tabblad:focus-visible{ outline:2px solid rgba(var(--accent-rgb),0.9); outline-offset:2px; }
/* de wachtwoordeisen, direct onder het invulveld */
.eisen-blok{ margin:.5rem 0 0; }
.eisen{
  margin:0; padding:0 0 0 1.1rem;
  color:rgba(255,255,255,0.55); font-size:12px; line-height:1.6;
}
.eisen li::marker{ color:rgba(var(--accent-rgb),0.7); }
.eisen em{ font-style:normal; color:rgba(255,255,255,0.75); }

/* Een avatarrondje met een foto erin. De maat en de ronding komen van de
   klasse van het scherm zelf (mw-bol, aw-bol, bol, ur-bol, fk-bol); dit zorgt
   alleen dat de foto het rondje vult zonder uitgerekt te worden. */
.met-foto{ overflow:hidden; padding:0; }
.bolfoto{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }

/* Buiten beeld, maar wel te bedienen: een invoerveld dat door een label
   elders wordt aangestuurd. Niet display:none — dan negeert de browser het
   bij het versturen op sommige toestellen en werkt het label niet meer. */
.buiten-beeld{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* Foto wisselen door op de foto te tikken; het pennetje maakt zichtbaar dat
   dat kan, zonder een "Bestand kiezen"-knop in het scherm. */
/* Alleen tijdens het wijzigen: anders suggereert een pennetje dat je zomaar
   iets kunt veranderen terwijl de rest van het scherm op slot staat. */
.fotowissel{ position:relative; display:inline-block; margin:0; cursor:default; }
.fotowissel.aan{ cursor:pointer; }
.fotowissel .pen{ display:none; }
.fotowissel.aan .pen{
  position:absolute; right:-2px; bottom:-2px;
  width:26px; height:26px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--ink);
  border:2px solid #20211C;
}
.fotowissel .pen svg{ width:14px; height:14px; }
@media (hover:hover){ .fotowissel.aan:hover .pen{ filter:brightness(1.1); } }

/* De kop van het profielscherm: grote foto naast je naam. */
.profielkop{ display:flex; align-items:center; gap:.9rem; margin:0 0 1.2rem; }
/* nieuwe medewerker: nog geen initialen of foto */
.profielkop .grote-bol.leeg-bol{ background:rgba(255,255,255,0.06); border:1px dashed rgba(255,255,255,0.3); }
/* Telefoon en e-mail in de leesstand: een link in dezelfde bubbel als een
   veld op slot, in de accentkleur zodat je ziet dat je erop kunt tikken. In
   de bewerkstand het gewone invulvak (medewerkers/_gegevens.html). */
.gegeven-link{
  display:block; padding:.8rem .9rem; font-size:16px; border-radius:14px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
  color:var(--hi); text-decoration:none; overflow-wrap:anywhere;
}
@media (hover:hover){ .gegeven-link:hover{ border-color:rgba(var(--accent-rgb),0.5); } }
#gegevensformulier:not(.bewerkt) .heeft-link > :not(.gegeven-link){ display:none; }
#gegevensformulier.bewerkt .gegeven-link{ display:none; }
/* uitleg bij een veld alleen tijdens het invullen (medewerkers/_gegevens.html) */
#gegevensformulier:not(.bewerkt) .hulptekst{ display:none; }
.profielkop .grote-bol{
  width:72px; height:72px; flex-shrink:0; border-radius:999px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; color:#fff;
}
.profielkop .wie{ display:grid; gap:.15rem; min-width:0; }
.profielkop .naam{ font-size:18px; font-weight:600; }
.profielkop .rol{ font-size:12.5px; color:rgba(255,255,255,0.55); }

/* Profiel: dezelfde velden voor lezen en wijzigen. Op slot zien ze eruit als
   gegevens (geen rand, geen invulvak), open als een gewoon formulier — zo
   verspringt er niets als je op wijzigen klikt. */
.gegevens-blok{ margin:0; display:grid; gap:.2rem; }
.gegeven{ display:grid; gap:.25rem; padding:.35rem 0; }
.gegeven dt label{
  margin:0; font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:rgba(255,255,255,0.5);
}
.gegeven dd{ margin:0; }
/* Op slot houdt een veld dezelfde vorm als tijdens het bewerken — zelfde
   bubbel, zelfde maat — maar rustiger van kleur. Zo verspringt er niets als
   je gaat wijzigen en zie je aan de kleur in welke stand je staat.

   De algemene invoerregel hierboven telt vier :not()-voorwaarden en weegt
   daardoor zwaarder dan een losse klasse; die voorwaarden staan hier dus ook,
   anders wint hij. */
.gegeven input:disabled:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.gegeven select:disabled,
.gegeven textarea:disabled{
  background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.09);
  color:#fff; opacity:1; -webkit-text-fill-color:#fff;   /* Safari dimt anders */
  cursor:default;
}

/* Aan het wijzigen: de velden lichten op in de accentkleur. Dat is het enige
   verschil met de leesstand, en genoeg om het in één oogopslag te zien. */
.bewerkt .gegeven input:not(:disabled):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.bewerkt .gegeven select:not(:disabled),
.bewerkt .gegeven textarea:not(:disabled){
  background:rgba(var(--accent-rgb),0.10);
  border-color:rgba(var(--accent-rgb),0.45);
}
.bewerkt .gegeven dt label{ color:var(--hi); }
.gegeven input[type=checkbox]:disabled{ opacity:.6; }
/* Kleur: een klein vlakje, geen balk over de volle breedte — in beide
   standen dezelfde maat, zodat er niets verspringt bij wijzigen. */
.gegeven input[type=color]{ width:64px; height:40px; padding:.2rem; }
.gegeven input[type=color]:disabled{ border:1px solid rgba(255,255,255,0.12); cursor:default; }

/* Rijbewijscategorieën (medewerkers/widgets/rijbewijzen.html): per groep een
   rij pillen. In de leesstand alleen wat je hebt; niets aangevinkt geeft een
   streepje, zoals bij een leeg veld. */
.rijbewijzen{ display:grid; gap:.55rem; }
.rijbewijs-groep{ display:grid; gap:.3rem; }
.rijbewijs-groepnaam{ font-size:11.5px; color:rgba(255,255,255,0.55); }
.rijbewijzen .keuzepil .vlak{ min-width:48px; }
#gegevensformulier:not(.bewerkt) .rijbewijs-groep:not(:has(input:checked)),
#gegevensformulier:not(.bewerkt) .rijbewijzen .keuzepil:not(:has(input:checked)){ display:none; }
#gegevensformulier:not(.bewerkt) .rijbewijzen .vlak{ cursor:default; }
/* Leesstand: wat je hebt als bubbels op één rij, zonder groepsnamen —
   "C", niet "Vrachtwagen: C". De groepen zijn er alleen om te kiezen. */
#gegevensformulier:not(.bewerkt) .rijbewijzen{ display:flex; flex-wrap:wrap; gap:.4rem; }
#gegevensformulier:not(.bewerkt) .rijbewijs-groep,
#gegevensformulier:not(.bewerkt) .rijbewijzen .keuzes{ display:contents; }
#gegevensformulier:not(.bewerkt) .rijbewijs-groepnaam{ display:none; }
#gegevensformulier:not(.bewerkt) .rijbewijzen:not(:has(input:checked))::after{
  content:"—"; display:block; flex:1 1 100%; padding:.8rem .9rem; border-radius:14px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
}

/* Zelfde "op slot ziet eruit als gegevens" als .gegeven hierboven, nu voor
   het uurblok-detailscherm (_uurblokdetail_inhoud.html): vóór een klik op het
   bewerk-potlood staan de velden er niet als grijs uitgevinkt invulvak bij,
   maar als gewone tekst. */
.uurblokformulier input:disabled:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.uurblokformulier select:disabled,
.uurblokformulier textarea:disabled{
  background:none; border-color:transparent; padding-left:0; padding-right:0;
  color:#fff; opacity:1; -webkit-text-fill-color:#fff;
  cursor:default;
}

.profielknop{ margin:0 0 .6rem; }
.opslaanrij{ display:flex; align-items:center; gap:.6rem; margin-top:1.6rem; }
/* dezelfde twee knoppen rechtsboven tijdens het wijzigen (_gegevens.html) */
.bewerkacties{ display:flex; justify-content:flex-end; align-items:center; gap:.5rem; margin:0 0 .6rem; }
.opslaanrij .knop{ width:auto; }

/* Uitklapbaar blok met een formulier erin: het staat op dezelfde pagina en
   verstuurt naar hetzelfde adres, zodat je niet naar een apart scherm hoeft
   om één nummer te wijzigen. <details> doet dat zonder script. */
.vouw{
  margin-top:1rem; border-radius:16px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
}
.vouw > summary{
  cursor:pointer; padding:.85rem 1rem; font-size:14px; font-weight:600;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.vouw > summary::-webkit-details-marker{ display:none; }
.vouw > summary::after{
  content:"+"; font-size:17px; font-weight:500; color:rgba(255,255,255,0.55);
}
.vouw[open] > summary::after{ content:"–"; }
@media (hover:hover){ .vouw > summary:hover{ color:var(--hi); } }
.vouw > form{ padding:0 1rem 1.1rem; }
.vouw .sectiekop:first-child{ margin-top:.2rem; }

/* lijstje met vaste gegevens, zonder invulvelden */
.gegevens{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.2rem; }
.gegevens dt{
  font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); align-self:center;
}
.gegevens dd{ margin:0; font-size:14px; }

/* korte toelichting boven of onder een formulier */
.uitleg{
  color:rgba(255,255,255,0.65); font-size:13px; line-height:1.55;
  margin:0 0 1.2rem;
}

.leeg{
  color:rgba(255,255,255,0.5); font-size:13px; text-align:center;
  padding:1.6rem 1rem; margin:0;
  border:1px dashed rgba(255,255,255,0.16); border-radius:18px;
}
/* ruimte tussen de "+"-tegel en de leegmelding erna, anders schuren ze tegen
   elkaar aan zodra het raster nog maar één (leeg) tegeltje breed is */
.fotoraster + .leeg{ margin-top:.9rem; }

/* Ruime padding-top: het kruisje staat hier linksboven (zie
   .uploadveld > .dialog-sluiten hieronder) en botst dus met het begin van het
   eerste label — met 1.1rem padding liep "Klus" dwars door het rondje heen.
   2.2rem + de 1.1rem margin van het label zet dat label net onder de 34px van
   het knopje. Geen margin-top:0 op dat eerste label (zoals .uurblokformulier
   hieronder ook niet doet): bij een boxed eerste veld (de klus-select in
   AlleenFotosForm) plakt dat vak anders tegen het kruisje aan. */
.uploadveld{ position:relative; border-radius:20px; padding:2.2rem 1.2rem 1.3rem; }
/* sluitknopje rechtsboven op de dialoog, zelfde vormtaal als .weg bij een foto */
.dialog-sluiten{
  position:absolute; top:.7rem; right:.7rem;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:18px; line-height:1;
  background:rgba(255,255,255,0.10); color:#fff; border:1px solid rgba(255,255,255,0.24);
}
/* zelfde reden als bij .weg button: zichtbaar rustig, aanraakgebied ~44px */
.dialog-sluiten::after{ content:''; position:absolute; inset:-5px; border-radius:50%; }
@media (hover:hover){ .dialog-sluiten:hover{ background:rgba(255,255,255,0.18); } }
/* op het foto-posten-formulier staat het kruisje linksboven i.p.v. rechtsboven */
.uploadveld > .dialog-sluiten{ left:.7rem; right:auto; }

/* Kopregel van een bottom sheet (_uurblokformulier.html met in_dialoog): het
   kruisje en de Opslaan-knop naast elkaar bovenin i.p.v. Opslaan helemaal
   onderaan het (mogelijk lange, scrollende) formulier — op een telefoon met
   het toetsenbord open was die knop anders niet te bereiken zonder eerst
   weg te tikken. Het kruisje verliest hier zijn eigen absolute positie: die
   plek is nu voor Opslaan. `relative` i.p.v. `static`: het knopje blijft zo
   nog altijd gewoon in de flex-flow van .sheet-kop staan (er is geen
   top/left gezet), maar blijft ook de containing block van zijn eigen
   ::after (het opgerekte aanraakgebied, inset:-5px hieronder). Met `static`
   viel die ::after terug op de eerstvolgende position:relative-ouder — hier
   de hele .uurblokformulier.glas — waardoor het "kruisje" bijna het hele
   formulier overdekte en je nergens anders meer kon klikken zonder de sheet
   te sluiten. */
.sheet-kop{ display:flex; align-items:center; justify-content:space-between; margin:0 0 .7rem; }
/* In de kopregel staat het kruisje gewoon in de rij. top/right van de
   losse variant hierboven moeten dan weg: bij position:relative verschuiven
   ze het kruisje juist, over de titel eronder en tegen de rand. */
.sheet-kop .dialog-sluiten{ position:relative; top:auto; right:auto; }
/* kruisje en prullenbak samen links, potlood/Opslaan samen rechts — anders
   verspreidt justify-content:space-between alle vier de knoppen gelijk over
   de rij zodra de prullenbak zichtbaar wordt, en zwerft die los in het
   midden i.p.v. naast het kruisje. */
.sheet-kop-links, .sheet-kop-rechts{ display:flex; align-items:center; gap:.5rem; }
.knop-klein{
  width:auto; min-height:38px; padding:.5rem 1.15rem; font-size:13.5px;
}
/* het standaard bestandsknopje van de browser is wit-op-wit op deze
   achtergrond; hier krijgt het dezelfde pilvorm als de rest.

   Bewust op elk bestandsveld en niet alleen binnen .uploadveld: hetzelfde
   veld staat ook op het aanmaakformulier van een klus, en daar viel het
   anders terug op de kale browserknop. */
input[type=file]{
  width:100%; font-size:13px; color:rgba(255,255,255,0.75);
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18);
  border-radius:14px; padding:.7rem .8rem;
}
input[type=file]::file-selector-button{
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  /* min-height 44px: dit is op een telefoon de knop waarmee je de camera of
     je fotorol opent, en daar moet je met een duim niet naar hoeven mikken */
  min-height:44px; margin-right:.8rem; padding:.45rem 1.1rem; cursor:pointer;
  border:1px solid rgba(var(--accent-rgb),0.5); border-radius:999px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.9), rgba(var(--accent-rgb),0.68));
  color:var(--ink);
}

/* Eigen knop vóór het bestandsveld (static/js/bestandsveld.js). Het echte
   veld gaat buiten beeld maar blijft bestaan en bedienbaar — vandaar geen
   display:none, want dan is het niet meer te focussen met een toetsenbord en
   koppelt het label er niet meer aan. */
input[type=file].bestandsveld-verborgen{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Bewust neutraal/doorschijnend (niet de groene .knop-kleur): dit is een
   secundaire actie naast Opslaan, en met dezelfde accentkleur oogde hij als
   een tweede "opslaan"-knop op hetzelfde formulier. */
.bestandsknop{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  width:100%; min-height:50px; padding:.8rem 1.2rem; margin:0;
  border:1px solid rgba(255,255,255,0.22); border-radius:999px;
  background:rgba(255,255,255,0.08); cursor:pointer;
  /* label krijgt in dit stylesheet standaard de kleine hoofdletter-opmaak van
     een formulierkopje; dit label ís de knop, dus die opmaak moet eraf */
  font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600;
  letter-spacing:normal; text-transform:none; color:rgba(255,255,255,0.85);
}
.bestandsknop svg{ width:18px; height:18px; flex-shrink:0; }
@media (hover:hover){ .bestandsknop:hover{ background:rgba(255,255,255,0.14); } }
.bestandsknop:active{ filter:brightness(.92); }
input[type=file]:focus-visible + .bestandsknop{
  outline:2px solid rgba(var(--accent-rgb),0.9); outline-offset:2px;
}
.bestandsstatus{
  margin:.5rem 0 0; font-size:12.5px; color:rgba(255,255,255,0.6);
  text-align:center; overflow-wrap:break-word;
}
/* De statusregel heeft zelf geen ondermarge — normaal komt er een label
   achteraan, en dat brengt zijn eigen 1.1rem mee. In de documentendialoog
   (klussen/_uploadveld.html met documentdialoog) staat er eerst nog een
   .uitleg, en die begint met margin-top:0: dan plakken de twee regels aan
   elkaar en lezen ze als één alinea, terwijl de ene bij de knop hoort en de
   andere bij het veld. */
.bestandsstatus + .uitleg{ margin-top:.9rem; }

/* Masonry-raster: elke kolom stapelt zijn eigen tegels met een vaste
   tussenruimte, onafhankelijk van hoe lang de andere kolommen zijn — dus
   geen rij die op de hoogste tegel moet wachten voor de volgende begint.
   Een echte CSS-grid met rijen (wat hier eerst stond) gaf precies dat
   probleem: een rij werd zo hoog als de hoogste tegel erin, dus een kortere
   buurtegel liet een lelijk stuk lucht achter voor de volgende rij begon.
   CSS `columns` lost de tussenruimte wel op, maar vult daarbij kolom 1
   helemaal vol vóór kolom 2 begint (of balanceert op hoogte) — dat gaf
   destijds de rommelige volgorde waar dit raster ooit last van had.

   Daarom verdeelt static/js/fotoraster.js de tegels hier zelf over
   `.fotoraster-kolom`-divs, telkens rond-robin (tegel i naar kolom
   i % aantal): de volgorde blijft dus altijd exact de uploadvolgorde, wat
   er ook met de hoogte van een kolom gebeurt. Zonder JS blijft dit gewoon
   één kolom (flex-direction:column hieronder is de basisstand, het script
   zet 'm op row zodra het de tegels verdeeld heeft). */
.fotoraster{ display:flex; flex-direction:column; gap:.7rem; }
.fotoraster-kolom{ display:flex; flex-direction:column; gap:.7rem; flex:1 1 0; min-width:0; }

.fotokaart{
  position:relative; margin:0; border-radius:20px; overflow:hidden;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
}
/* de thumbnail-knop die de popup opent, was een <a target=_blank>: zelfde
   reset als .fotoslide button, anders krijgt hij standaard knopopmaak. */
.fotokaart button{
  display:block; width:100%; padding:0; margin:0; border:0; background:none; cursor:pointer;
}
/* max-height + cover: bij een rijen-raster wordt een rij zo hoog als de
   hoogste tegel erin, dus een staande foto naast een liggende trok anders
   een groot leeg stuk open naast de liggende. Normale foto's (breder dan
   hoog, of licht staand) blijven onaangeroerd; alleen een uitschieter wordt
   bovenaan/onderaan bijgesneden. */
.fotokaart img{
  display:block; width:100%; height:auto; max-height:240px; object-fit:cover;
  background:rgba(0,0,0,0.2);
}
.fotokaart figcaption{ padding:.5rem .65rem .6rem; display:grid; gap:.15rem; }
/* max 2 regels: een lange standaard-bestandsnaam (WhatsApp-downloads heten
   bijvoorbeeld "Afbeelding van WhatsApp op 2024-08-30 om 22.10.09_xxx.jpg")
   wrapte anders naar 3+ regels en trok zo'n tegel torenhoog boven de rest
   van de rij uit. */
.fotokaart .wat{
  font-size:12px; line-height:1.3;
  overflow-wrap:break-word; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fotokaart .wie{
  font-size:10.5px; color:rgba(255,255,255,0.5);
  display:flex; align-items:center; gap:.3rem;
}
/* Zelfde avatarrondje als elders (initialen op de eigen/palet-kleur), hier
   piepklein omdat de hele bijschrift-regel al 10.5px is. */
.fotokaart .fk-bol{
  flex-shrink:0; width:15px; height:15px; border-radius:999px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:7px; font-weight:700; color:#fff; letter-spacing:.01em;
}

/* Bestanden op het klusdossier (_bestandenraster.html): dezelfde kaart, met
   een link naar de overlay in plaats van een knop. Zonder voorbeeld (Word,
   Excel) een vlak met een bestandsicoon en de extensie. */
.fotokaart-open{ display:block; color:inherit; text-decoration:none; }
.bestandtegel{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  aspect-ratio:4/3; background:rgba(0,0,0,0.2); color:rgba(255,255,255,0.6);
}
.bestandtegel svg{ width:40px; height:40px; }
.bestandtegel-ext{ font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--hi); }

/* eerste tegel in het raster: lege plek met een plus, opent de invoegdialoog.
   Grid-kolommen hebben altijd dezelfde breedte (ook als dit de enige tegel
   is), dus geen aparte max-width meer nodig zoals bij de oude columns-layout. */
.fotokaart-nieuw{
  margin:0; border-radius:20px;
  width:100%; aspect-ratio:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.05); border:1px dashed rgba(255,255,255,0.28);
  color:rgba(255,255,255,0.6);
}
@media (hover:hover){ .fotokaart-nieuw:hover{ background:rgba(255,255,255,0.10); color:#fff; } }
.fotokaart-nieuw svg{ width:22px; height:22px; }

/* post van meerdere foto's uit één upload (_fotoraster.html): zelfde kaart als
   .fotokaart, maar met een mini-collage in plaats van één afbeelding. De
   tegelverhouding verschilt per aantal foto's, net als bij een social-media-
   post met meerdere foto's: 2 naast elkaar, 3 één groot + twee klein, 4+ een
   vast 2x2-raster met "+N" op de laatste tegel voor de rest van de post. */
.fotokaart-post-grid{ display:grid; gap:2px; aspect-ratio:1; }
.fotokaart-post-grid.telt-2{ grid-template-columns:1fr 1fr; }
.fotokaart-post-grid.telt-3{ grid-template-columns:1.4fr 1fr; }
.fotokaart-post-grid.telt-3 button:first-child{ grid-row:span 2; }
.fotokaart-post-grid.telt-4{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.fotokaart-post-grid button{
  position:relative; display:block; width:100%; height:100%;
  padding:0; margin:0; border:0; background:none; cursor:pointer; overflow:hidden;
}
.fotokaart-post-grid img{ display:block; width:100%; height:100%; object-fit:cover; background:rgba(0,0,0,0.2); }
.fotokaart-post-meer{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,8,0.55); color:#fff; font-size:15px; font-weight:700;
}

/* dialoog met het uploadveld: de form zelf is al een glaskaart (.uploadveld
   .glas), de dialoog is alleen een neutrale drager met een donkere backdrop */
dialog.foto-invoegen{
  border:0; padding:0; background:transparent; color:inherit;
  max-width:520px; width:calc(100% - 2.4rem);
}
dialog.foto-invoegen::backdrop{ background:rgba(10,10,8,0.55); backdrop-filter:blur(3px); }

/* zelfde idee voor "uren toevoegen": als dialoog boven de agenda in plaats
   van een navigatie ernaartoe, zodat de agenda op de achtergrond zichtbaar
   blijft (SPEC: sleep/tik in het raster mag de kalender niet laten verdwijnen). */
.uurblokformulier.glas{ position:relative; border-radius:20px; padding:1.1rem 1.2rem 1.3rem; }
dialog.uren-invoegen{
  border:0; padding:0; background:transparent; color:inherit;
  max-width:480px; width:calc(100% - 2.4rem);
}
dialog.uren-invoegen::backdrop{ background:rgba(10,10,8,0.55); backdrop-filter:blur(3px); }

/* zelfde idee voor het uurblok-detail vanuit de agenda: een sheet boven de
   agenda i.p.v. een navigatie naar uurblok_detail, zodat de kalender op de
   achtergrond zichtbaar blijft. De dialoog zelf staat leeg in mijn_uren.html
   en wordt pas gevuld ná een klik op een blok (static/js/kalender.js, via
   laadEnOpenSheet in bottomsheet.js). */
.uurblokdetail.glas{ position:relative; border-radius:20px; padding:1.1rem 1.2rem 1.3rem; }
/* rood getint i.p.v. de neutrale kruisje-kleur, zelfde reden als .fout: dit
   is een destructieve actie en mag er als zodanig uitzien, niet pas bij
   hover (zie .weg button, dat wél pas bij hover rood wordt — hier staat de
   knop expres los van andere content, dus mag hij meteen opvallen). */
.verwijder-icoonknop{
  color:var(--rood); border-color:rgba(224,123,95,0.45); background:rgba(224,123,95,0.12);
}
@media (hover:hover){ .verwijder-icoonknop:hover{ background:rgba(224,123,95,0.28); } }
dialog.uurblok-detail{
  border:0; padding:0; background:transparent; color:inherit;
  max-width:560px; width:calc(100% - 2.4rem);
}
dialog.uurblok-detail::backdrop{ background:rgba(10,10,8,0.55); backdrop-filter:blur(3px); }
/* op het weekoverzicht, dat op een laptop wordt geopend: ruimer */
dialog.uurblok-detail.breed{ max-width:760px; }
/* klusnaam bovenin het venster: link naar de klus (zie _uurblokdetail_inhoud.html) */
.sheet-kluslink{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; }
.sheet-kluslink svg{ width:16px; height:16px; opacity:.6; flex-shrink:0; }
@media (hover:hover){ .sheet-kluslink:hover{ color:var(--hi); } .sheet-kluslink:hover svg{ opacity:1; } }

/* Een dialoog op een telefoon: zodra het toetsenbord opengaat (tikken in
   "Werkzaamheden" of "Toelichting") houdt de browser maar een strook scherm
   over. Een dialoog die dood in het midden staat en niet kan scrollen, duwt
   zijn eigen opslaan-knop dan buiten beeld — je vult iets in en kunt het niet
   wegschrijven. Vandaar: hoogte begrenzen op wat er écht zichtbaar is (dvh
   volgt het toetsenbord, vh niet), binnenin scrollen, en niet verticaal
   gecentreerd maar iets naar boven zodat het veld waar je in typt in beeld
   blijft. overscroll-behavior houdt de pagina eronder stil tijdens dat
   scrollen. */
dialog.foto-invoegen, dialog.uren-invoegen, dialog.uurblok-detail{
  max-height:calc(100vh - 2rem);
  max-height:calc(100dvh - 2rem);
  margin-top:max(1rem, env(safe-area-inset-top));
  margin-bottom:max(1rem, env(safe-area-inset-bottom));
  overflow:visible;
}
dialog.foto-invoegen .uploadveld, dialog.uren-invoegen .uurblokformulier, dialog.uurblok-detail .uurblokdetail{
  max-height:calc(100vh - 3rem);
  max-height:calc(100dvh - 3rem);
  overflow-y:auto; overscroll-behavior:contain;
}

/* ══════════ TELEFOON: BOTTOM SHEET I.P.V. DIALOOG IN HET MIDDEN ══════════
   Op een telefoon komt "uren toevoegen" nu vanaf onderen omhoog, zoals in
   zowat elke native agenda-app — dat voelt bij één hand bedienen natuurlijker
   dan een kaart die zomaar in het midden van het scherm verschijnt. Hetzelfde
   geldt voor het uurblok-detail dat opent als je op een bestaand blok klikt.
   Alleen deze twee dialogen, bewust niet ook dialog.foto-invoegen: dat is een
   apart scherm dat (nog) niet is gevraagd te veranderen.

   De overgang wordt in JS in gang gezet (static/js/bottomsheet.js): een
   <dialog> zet display meteen om bij showModal(), dus zonder die omweg is er
   niets om te animeren. */
@media (max-width:700px){
  dialog.uren-invoegen, dialog.uurblok-detail{
    position:fixed; inset:auto 0 0 0; margin:0;
    max-width:none; width:100%;
    max-height:85vh; max-height:85dvh;
    transform:translateY(100%);
    transition:transform .22s ease-out;
  }
  dialog.uren-invoegen.open-anim, dialog.uurblok-detail.open-anim{ transform:translateY(0); }
  .uurblokformulier.glas, .uurblokdetail.glas{
    border-radius:22px 22px 0 0;
    padding:.6rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom));
  }
  dialog.uren-invoegen .uurblokformulier, dialog.uurblok-detail .uurblokdetail{
    max-height:85vh; max-height:85dvh;
  }
  /* zichtbaar sleepstaafje bovenaan — het universele signaal "dit is een
     bottom sheet"; puur decoratief, er zit geen sleepgebaar achter */
  .sheet-hendel{
    width:36px; height:4px; border-radius:999px; margin:.3rem auto 1rem;
    background:rgba(255,255,255,0.25);
  }
}
@media (min-width:701px){
  .sheet-hendel{ display:none; }
}

/* verwijderknopje rechtsboven op de kaart */
.weg{ position:absolute; top:.4rem; right:.4rem; }
.weg button{
  position:relative;
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:15px; line-height:1;
  background:rgba(0,0,0,0.45); color:#fff; border:1px solid rgba(255,255,255,0.25);
}
/* Een kruisje van 26px is met een muis prima en met een duim niet: je raakt
   net de foto eronder en opent 'm in plaats van te verwijderen. Het zichtbare
   rondje blijft klein — het aanraakgebied groeit eromheen naar ~44px, de maat
   die Apple en Google allebei als minimum aanhouden. */
.weg button::after{ content:''; position:absolute; inset:-9px; border-radius:50%; }
@media (hover:hover){ .weg button:hover{ background:rgba(224,123,95,0.8); } }
/* een foto-verwijderknop toont het prullenbakje (_prullenbak.html) i.p.v.
   het kruisje — alleen bij foto's, de documentenlijst laat .weg ongemoeid. */
.weg button svg{ width:13px; height:13px; }

.doclijst{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.doclijst li{
  position:relative; border-radius:16px; padding:.8rem 3rem .8rem .8rem;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
}
/* de hele rij (thumbnail + tekst) is de link, net als een bijlage in
   WhatsApp: klikken op het voorbeeld opent dezelfde inline preview als
   klikken op de naam (zie media_bestand in klussen/views.py). */
.doclijst .doc-rij{ display:flex; align-items:center; gap:.7rem; color:#fff; text-decoration:none; }
.doclijst .doc-thumb{
  flex-shrink:0; width:44px; height:44px; border-radius:10px;
  object-fit:cover; background:rgba(255,255,255,0.12);
}
.doclijst .doc-icoon{
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.55);
}
.doclijst .doc-icoon svg{ width:20px; height:20px; }
.doclijst .doc-tekst{ display:grid; gap:.2rem; min-width:0; }
.doclijst .doc-naam{ font-size:13.5px; font-weight:500; overflow-wrap:break-word; }
.doclijst .wat{ font-size:12px; color:rgba(255,255,255,0.7); }
.doclijst .wie{ font-size:10.5px; color:rgba(255,255,255,0.5); }
/* Document dat maar voor een paar mensen zichtbaar is: zie klussen/_afgeschermd.html. */
.afgeschermd{
  display:flex; align-items:center; gap:.3rem; font-size:10.5px; color:rgba(var(--accent-rgb),0.95);
}
.afgeschermd svg{ width:11px; height:11px; flex:none; }
.doclijst .weg{ top:50%; transform:translateY(-50%); right:.7rem; }

/* ══════════ KLUSSENLIJST EN KLUSDETAIL ══════════ */
.klussenlijst{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
/* Twee kolommen: tekst links, de gewaaierde voorbeeldstapel rechts. Niet
   onder elkaar, want dan wordt elke regel ~80px hoger en past er op een
   telefoon nog maar een handvol klussen op een scherm. De tekst zit in een
   eigen kolom-container: zonder dat rekken badge/naam/adres mee met de
   hoogte van de stapel en staan ze met grote gaten uit elkaar. */
.klusregel{
  /* 1.1rem en niet minder: de achterste laag van de stapel staat gedraaid en
     steekt ~15px naar links uit, en die mag de tekst niet raken */
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.1rem;
  align-items:center;
  border-radius:16px; padding:.85rem 1rem;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  color:#fff; text-decoration:none; transition:background .12s;
}
.klusregel-tekst{ display:grid; gap:.3rem; min-width:0; }
@media (hover:hover){ .klusregel:hover{ background:rgba(255,255,255,0.13); } }
.klusregel.afgerond{ opacity:.55; }
.klusregel .naam{ font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:1rem; }
.klusregel .adres{ font-size:12px; color:rgba(255,255,255,0.6); }

/* kleurstip vóór de naam — dezelfde kleur als het planbord (SPEC §5: "de
   kleur draagt de klusidentiteit"). .legenda .vlek hierboven geeft de vorm
   alleen binnen die context; hier staat de stip los in tekst, dus krijgt hij
   zijn eigen afmetingen in plaats van op .legenda te leunen. */
.naam .vlek, h1 .vlek{
  display:inline-block; width:14px; height:14px; border-radius:999px; border:1px solid;
  vertical-align:middle; margin:0 .5rem 0 0;
}

/* ══════════ APPS-RASTER (beginscherm) ══════════
   Compacte app-iconen zoals op een telefoon-beginscherm: vierkant pictogram
   met de naam eronder, geen kaart eromheen. Vier per rij op een telefoon. */
.appgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem .5rem; }
@media (min-width:560px){ .appgrid{ grid-template-columns:repeat(6,1fr); } }

.apptegel{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  text-align:center; color:#fff; text-decoration:none;
}
.apptegel.nog-niet{ opacity:.4; }
.apptegel-icoon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.55), rgba(var(--accent-rgb),0.18));
  border:1px solid rgba(var(--accent-rgb),0.4); color:var(--hi);
  transition:background .12s, transform .1s;
}
@media (hover:hover){ .apptegel:hover .apptegel-icoon{ background:rgba(255,255,255,0.13); transform:translateY(-1px); } }
.apptegel-icoon svg{ width:24px; height:24px; }
.apptegel-titel{ font-size:11.5px; font-weight:600; line-height:1.2; }

/* ══════════ MEDEWERKERSLIJST ══════════
   Zelfde rijvorm als .klusregel en .profielregel (16px radius, glasvlak,
   zelfde padding), maar met de volgorde die bij een persoon hoort: naam
   voorop, eronder waaraan je 'm herkent, en de rol rechts als etiket.
   De naam staat hier in Inter en niet in cursieve Fraunces: dat is de kop-
   letter, en een naam in een lijst is gegevens, geen kop. */
.mwlijst{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.mwregel{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.8rem;
  align-items:center;
  border-radius:16px; padding:.85rem 1rem;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  color:#fff; text-decoration:none; transition:background .12s;
}
@media (hover:hover){ .mwregel:hover{ background:rgba(255,255,255,0.13); } }
.mwregel.afgerond{ opacity:.55; }
/* Zelfde idee als .bord-naam .bol op het planbord (initialen op de eigen
   kleur van de medewerker), maar groter: hier is het de hoofdfoto van de
   rij, niet een klein herkenningspuntje ernaast. */
.mw-bol{
  flex-shrink:0; width:40px; height:40px; border-radius:999px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; letter-spacing:.02em;
}
.mwregel.afgerond .mw-bol{ opacity:.7; }
.mwregel-tekst{ display:grid; gap:.15rem; min-width:0; }
.mwregel .naam{ font-size:15px; font-weight:600; }
.mwregel .meta{
  font-size:12px; color:rgba(255,255,255,0.55);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Rol als rustig etiket: alleen de eigenaar krijgt de accentkleur, anders
   schreeuwen zes gelijke groene labels om aandacht die ze niet verdienen. */
.soort-badge.stil{
  background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.6);
}

/* ══════════ PROFIELSCHERM: MENULIJST ══════════
   Zelfde rijenpatroon als .klussenlijst/.klusregel hierboven, nu met een
   icoon ervoor — voor de schermen die niet in de navigatiebalk passen (zie
   medewerkers/tegels.py: PROFIEL_TEGELS). */
.profiellijst{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.profielregel{
  display:flex; align-items:center; gap:.8rem; border-radius:16px; padding:.85rem 1rem;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  color:#fff; text-decoration:none; transition:background .12s;
}
@media (hover:hover){ .profielregel:hover{ background:rgba(255,255,255,0.13); } }
.profielregel svg{ width:20px; height:20px; flex-shrink:0; color:rgba(255,255,255,0.7); }
.profielregel .titel{ font-size:14px; font-weight:500; }

/* ══════════ STARTSCHERM: KLUSSENSLIDER, STATS, FOTOSLIDESHOW ══════════
   Beide sliders zijn horizontaal scrollende rijen met scroll-snap, zelfde
   idioom als .raster-scroll en .bord-scroll elders in de app: vegen op een
   telefoon, geen JS-timer nodig. */
.klussen-slider{
  display:flex; gap:.7rem; overflow-x:auto; padding-bottom:.3rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.klussen-slider::-webkit-scrollbar{ height:6px; }
.klussen-slider::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.2); border-radius:999px; }
.klus-slide{
  scroll-snap-align:start; flex:0 0 78%; max-width:280px;
  /* Tekst links, soort rechtsboven ernaast, fotostapel eronder over de volle
     breedte. Naam en adres staan dicht op elkaar zodat ze als één blokje
     lezen; de ruimte valt eronder, vóór de stapel. */
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "naam  soort"
    "adres soort"
    "stapel stapel";
  gap:.2rem .6rem; align-content:start;
  border-radius:16px; padding:.85rem 1rem;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  color:#fff; text-decoration:none; transition:background .12s;
}
@media (hover:hover){ .klus-slide:hover{ background:rgba(255,255,255,0.13); } }
/* De naam draagt de kaart: die zoek je, niet het soort werk. Het soort
   staat er als klein etiket boven — je wilt het weten, maar pas nadat je
   hebt gezien wélke klus het is. */
.klus-slide .naam{
  font-family:'Fraunces',serif; font-style:italic; font-weight:600;
  font-size:1.12rem; line-height:1.2;
  /* Twee regels en dan afbreken, zelfde idioom als de notitielaag: een lange
     klusnaam mag de kaart niet hoger maken dan zijn buren, want dan staan de
     fotostapels in de slider niet meer op één lijn. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.klus-slide .naam{ grid-area:naam; }
.klus-slide .adres{ grid-area:adres; font-size:12.5px; color:rgba(255,255,255,0.55); }
/* align-self:start houdt het etiket op de hoogte van de naam in plaats van
   het over twee regels te centreren. */
.klus-slide .soort-badge{
  grid-area:soort; align-self:start;
  font-size:9px; padding:.18rem .5rem; letter-spacing:.02em;
}
.klus-slide .voorbeeldstapel{ grid-area:stapel; margin-top:.5rem; }

/* ══════════ STARTSCHERM: MAANDWIDGET ══════════
   Vervangt de twee stattegels die eerder onder de apps stonden: hetzelfde
   cijfer, maar bovenaan en met het patroon van de maand erbij.

   Op een breed scherm staan het cijfer en de kalender naast elkaar — de
   kalender is gebonden aan 320px, want zeven kolommen van 1fr in een kaart
   van 640px maakt vakjes ter grootte van een postzegel en dan lees je geen
   patroon meer, maar een agenda. Op een telefoon gaan ze onder elkaar en mag
   de kalender wel de volle breedte pakken. */
.maandwidget{
  display:flex; gap:1.4rem; align-items:center;
  text-decoration:none; color:#fff;
  border-radius:22px; padding:1.2rem 1.3rem; margin:0 0 .4rem;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.30), rgba(var(--accent-rgb),0.10));
  border:1px solid rgba(var(--accent-rgb),0.38);
  transition:border-color .15s, transform .12s;
}
@media (hover:hover){ .maandwidget:hover{ border-color:rgba(var(--accent-rgb),0.65); } }
.maandwidget:active{ transform:scale(.99); }

.maandwidget-cijfers{ display:flex; flex-direction:column; gap:.2rem; min-width:0; flex:1; }
.maandwidget-cijfers .maand{
  font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,0.6);
}
.maandwidget-cijfers .n{
  font-family:'Fraunces',serif; font-style:italic; font-weight:600;
  font-size:2.6rem; line-height:1.05; color:var(--hi); font-variant-numeric:tabular-nums;
}
.maandwidget-cijfers .l{ font-size:12.5px; color:rgba(255,255,255,0.78); }
/* De twee cijfers die de oude stattegels lieten zien, nu als één regel
   eronder — ondergeschikt aan de maand, maar niet verdwenen. */
.maandwidget-cijfers .neven{
  margin-top:.55rem; font-size:11.5px; color:rgba(255,255,255,0.58);
  font-variant-numeric:tabular-nums;
}

/* De widget is één grote link, maar dat zie je aan een kaart met een cijfer
   erin niet. Deze pil zegt dát je ergens uitkomt en waar — in de vormtaal van
   .knop-stil, maar kleiner: het is een wegwijzer, geen knop die met het
   maandcijfer om aandacht staat te vechten. */
.maandwidget-naar{
  align-self:flex-start; margin-top:.7rem;
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.34rem .52rem .34rem .75rem; border-radius:999px;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22);
  font-size:11.5px; font-weight:500; line-height:1; color:rgba(255,255,255,0.9);
  transition:background .15s;
}
.maandwidget-naar svg{ width:13px; height:13px; transition:transform .15s; }
@media (hover:hover){
  .maandwidget:hover .maandwidget-naar{ background:rgba(255,255,255,0.18); }
  .maandwidget:hover .maandwidget-naar svg{ transform:translateX(2px); }
}
@media (prefers-reduced-motion:reduce){
  .maandwidget-naar svg{ transition:none; }
  .maandwidget:hover .maandwidget-naar svg{ transform:none; }
}

.maandwidget-kalender{ flex:0 0 auto; width:320px; max-width:100%; }
.maandwidget-dagkoppen{
  display:grid; grid-template-columns:repeat(7,1fr); gap:.28rem;
  font-size:9.5px; text-align:center; color:rgba(255,255,255,0.45);
  margin-bottom:.28rem;
}
.maandwidget-raster{ display:grid; grid-template-columns:repeat(7,1fr); gap:.28rem; }

/* Vijf tinten: leeg, en dan vier keer voller richting de accentkleur. De
   trappen staan hier hard in CSS en niet als inline style, zodat de tint een
   klasse blijft die je in de legenda hergebruikt — zie
   uren/totalen.py:maand_heatmap voor welke dag welke tint krijgt. */
.heatvak{
  display:block; aspect-ratio:1; border-radius:7px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.10);
}
.heatvak.tint-1{ background:rgba(var(--accent-rgb),0.28); border-color:rgba(var(--accent-rgb),0.30); }
.heatvak.tint-2{ background:rgba(var(--accent-rgb),0.48); border-color:rgba(var(--accent-rgb),0.50); }
.heatvak.tint-3{ background:rgba(var(--accent-rgb),0.70); border-color:rgba(var(--accent-rgb),0.72); }
.heatvak.tint-4{ background:rgba(var(--accent-rgb),0.95); border-color:rgba(var(--accent-rgb),1); }
.heatvak.buiten-maand{ opacity:.28; }
/* Vandaag krijgt een ring in plaats van een andere vulling: de vulling zegt
   hier al hoeveel uur je hebt geschreven en die mag niet twee dingen doen. */
.heatvak.vandaag{ box-shadow:0 0 0 2px rgba(255,255,255,0.75); }

.maandwidget-legenda{
  display:flex; align-items:center; justify-content:flex-end; gap:.22rem;
  margin-top:.5rem; font-size:9.5px; color:rgba(255,255,255,0.45);
}
.maandwidget-legenda .heatvak{ width:10px; aspect-ratio:1; border-radius:3px; }

/* Op een telefoon blijven cijfer en kalender náást elkaar staan in plaats van
   onder elkaar te vallen. Gestapeld worden de vakjes ruim veertig pixels breed
   en vult de widget in z'n eentje het eerste scherm — dan staat "Jouw klussen"
   onder de vouw. Naast elkaar krimpen ze mee tot echte heatmap-formaat en
   blijft het één blok dat je in één oogopslag leest. */
@media (max-width:700px){
  .maandwidget{ gap:.9rem; padding:1.1rem; border-radius:20px; }
  .maandwidget-cijfers{ flex:0 1 auto; }
  .maandwidget-cijfers .n{ font-size:2rem; }
  .maandwidget-cijfers .neven{ margin-top:.45rem; font-size:10.5px; }
  .maandwidget-naar{ margin-top:.55rem; padding:.3rem .45rem .3rem .65rem; font-size:10.5px; }
  .maandwidget-kalender{ flex:1 1 140px; width:auto; min-width:0; }
  .maandwidget-dagkoppen, .maandwidget-raster{ gap:.2rem; }
  .heatvak{ border-radius:4px; }
  .maandwidget-legenda{ font-size:9px; gap:.18rem; }
  .maandwidget-legenda .heatvak{ width:8px; }
}

.fotoslider{
  display:flex; gap:.7rem; overflow-x:auto; padding-bottom:.3rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.fotoslider::-webkit-scrollbar{ height:6px; }
.fotoslider::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.2); border-radius:999px; }
.fotoslide{
  scroll-snap-align:start; flex:0 0 62%; max-width:220px; margin:0;
  border-radius:20px; overflow:hidden;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
}
.fotoslide button{
  display:block; width:100%; padding:0; margin:0; border:0; background:none; cursor:pointer;
}
.fotoslide img{ display:block; width:100%; height:150px; object-fit:cover; background:rgba(0,0,0,0.2); }

/* popup: de foto op een donkere backdrop, als glaskaart met titel, wie/
   wanneer en downloaden/delen/sluiten eronder — in plaats van rechtstreeks
   naar het kale mediabestand te linken. Klik naast de kaart sluit 'm, zie
   _fotopopup.html voor de open/sluit-animatie. */
dialog.foto-popup{
  border:0; padding:0; background:transparent; color:inherit;
  max-width:min(92vw, 480px); width:calc(100% - 2.4rem);
  max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem);
  margin-top:max(1rem, env(safe-area-inset-top));
  margin-bottom:max(1rem, env(safe-area-inset-bottom));
  overflow:visible;
  /* "komt naar voren": begint iets kleiner en doorzichtig, schaalt open
     zodra _fotopopup.html na showModal() .open-anim toevoegt. showModal()
     zet display synchroon om, dus zonder die omweg (en het dubbele-frame-
     wachten in JS) is er niets om te animeren, zelfde als dialog.uren-invoegen. */
  transform:scale(.92) translateY(10px); opacity:0;
  transition:transform .22s ease-out, opacity .22s ease-out;
}
dialog.foto-popup.open-anim{ transform:scale(1) translateY(0); opacity:1; }
dialog.foto-popup::backdrop{ background:rgba(10,10,8,0.75); backdrop-filter:blur(3px); }

.foto-popup-kaart{
  display:flex; flex-direction:column; border-radius:20px; overflow-y:auto;
  overscroll-behavior:contain;
  max-height:calc(100vh - 3rem); max-height:calc(100dvh - 3rem);
}
.foto-popup-afbeelding{ position:relative; }
.foto-popup-kaart img{
  display:block; width:100%; max-height:55vh; max-height:55dvh;
  object-fit:contain; background:rgba(0,0,0,0.3);
}
/* linksboven op de foto i.p.v. rechtsboven op de dialoog (.dialog-sluiten
   standaard): zelfde plek als op het uploadformulier, zie .uploadveld boven. */
.foto-popup-afbeelding > .dialog-sluiten{ left:.7rem; right:auto; }
/* vorige/volgende: alleen zichtbaar als fotoPopupOpenGalerij een post van
   meer dan één foto opent (_fotoraster.html) — verborgen bij een losse foto. */
.foto-popup-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,8,0.45); color:#fff; border:1px solid rgba(255,255,255,0.24);
}
.foto-popup-nav svg{ width:18px; height:18px; }
.foto-popup-vorige{ left:.6rem; }
.foto-popup-volgende{ right:.6rem; }
@media (hover:hover){ .foto-popup-nav:hover{ background:rgba(10,10,8,0.65); } }
.foto-popup-teller{
  position:absolute; bottom:.6rem; left:50%; transform:translateX(-50%);
  padding:.2rem .6rem; border-radius:999px; font-size:11px; font-weight:600;
  background:rgba(10,10,8,0.55); color:#fff;
}
.foto-popup-info{ padding:.9rem 1.1rem .2rem; display:grid; gap:.2rem; }
.foto-popup-titel{ font-size:14.5px; font-weight:600; overflow-wrap:break-word; }
.foto-popup-meta{ font-size:11.5px; color:rgba(255,255,255,0.55); }
/* klusnaam + klein knopje op één regel i.p.v. een volle knop eronder: dit
   is een link terug, geen hoofdactie van de popup. */
.foto-popup-klus-regel{
  display:flex; align-items:center; gap:.6rem; margin-top:.5rem;
}
.foto-popup-klus-naam{
  flex:1; min-width:0; font-size:13px; font-weight:600;
  color:rgba(255,255,255,0.85); overflow-wrap:break-word;
}
.foto-popup-klus-knop{ flex-shrink:0; }
/* rechtsonderin, zelfde rondje-vormtaal als .weg en .dialog-sluiten */
.foto-popup-acties{
  display:flex; justify-content:flex-end; gap:.5rem;
  padding:.8rem 1.1rem calc(.9rem + env(safe-area-inset-bottom));
}
.foto-popup-knop{
  position:relative;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:19px; line-height:1;
  background:rgba(255,255,255,0.10); color:#fff; border:1px solid rgba(255,255,255,0.24);
}
.foto-popup-knop::after{ content:''; position:absolute; inset:-4px; border-radius:50%; }
.foto-popup-knop svg{ width:19px; height:19px; }
@media (hover:hover){ .foto-popup-knop:hover{ background:rgba(255,255,255,0.18); } }

/* popup met wat er niet klopt bij het opslaan van een uurblok
   (_uurblokformulier.html): zelfde komt-naar-voren-animatie als
   dialog.foto-popup hierboven, maar dan als korte tekstkaart i.p.v. een foto. */
dialog.foutpopup{
  border:0; padding:0; background:transparent; color:inherit;
  max-width:min(92vw, 420px); width:calc(100% - 2.4rem);
  transform:scale(.92) translateY(10px); opacity:0;
  transition:transform .22s ease-out, opacity .22s ease-out;
}
dialog.foutpopup.open-anim{ transform:scale(1) translateY(0); opacity:1; }
dialog.foutpopup::backdrop{ background:rgba(10,10,8,0.75); backdrop-filter:blur(3px); }
.foutpopup-kaart{ position:relative; border-radius:20px; padding:1.1rem 1.2rem 1.3rem; }
.foutpopup-lijst{
  margin:0; padding-left:1.1rem;
  color:rgba(255,255,255,0.85); font-size:13.5px; line-height:1.65;
}
.foutpopup-lijst li::marker{ color:var(--rood); }

.soort-badge{
  display:inline-flex; align-items:center; width:fit-content;
  padding:.25rem .7rem; border-radius:999px; font-size:10.5px; font-weight:600;
  letter-spacing:.03em; background:rgba(var(--accent-rgb),0.22); color:var(--hi);
  border:1px solid rgba(var(--accent-rgb),0.4);
}
.soort-badge.afgerond-badge{
  background:rgba(255,255,255,0.10); color:rgba(255,255,255,0.6);
  border-color:rgba(255,255,255,0.2); margin-left:.4rem;
}

.klusinfo{ display:grid; gap:.3rem; margin-bottom:1.5rem; }
.klusinfo .regel{ margin:.15rem 0; font-size:13.5px; }
.klusinfo .lbl{
  display:inline-block; min-width:110px; font-size:10.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,0.45);
}

/* Gewaaierde stapel, naar het "Poetry"-voorbeeld: 2-3 lagen licht gedraaid
   en verschoven achter een voorste laag die recht staat. Nieuw idioom in
   deze app (nergens anders staat iets gekanteld) — daarom bewust ingetogen:
   kleine hoeken, subtiele offsets, verder dezelfde glaskaart-taal (afgeronde
   hoeken, dun randje, schaduw) als de rest van de app. */
.voorbeeldstapel{ position:relative; height:78px; width:78px; margin-top:.2rem; }
.voorbeeldlaag{
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 10px 22px rgba(0,0,0,0.28);
  transition:transform .18s ease;
}
.laag-voor-1{ z-index:3; transform:rotate(0deg) translate(0, 0) scale(1); }
.laag-voor-2{ z-index:2; transform:rotate(8deg) translate(11px, 5px) scale(0.95); }
.laag-voor-3{ z-index:1; transform:rotate(-10deg) translate(-11px, 9px) scale(0.90); }
@media (hover:hover){ .klus-slide:hover .laag-voor-2, .klusregel:hover .laag-voor-2{ transform:rotate(11deg) translate(15px, 7px) scale(0.95); } }
@media (hover:hover){ .klus-slide:hover .laag-voor-3, .klusregel:hover .laag-voor-3{ transform:rotate(-13deg) translate(-15px, 12px) scale(0.90); } }

.voorbeeldlaag-foto img, .voorbeeldlaag-document img{ display:block; width:100%; height:100%; object-fit:cover; background:rgba(0,0,0,0.2); }
.voorbeeldlaag-document .voorbeeldlaag-inhoud,
.voorbeeldlaag-notitie .voorbeeldlaag-inhoud,
.klus-hero-laag-document .voorbeeldlaag-inhoud,
.klus-hero-laag-notitie .voorbeeldlaag-inhoud{
  height:100%; padding:.4rem; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.2rem; text-align:center;
}
.voorbeeldlaag-document, .klus-hero-laag-document{ background:rgba(255,255,255,0.05); }
.voorbeeldlaag-document svg, .klus-hero-laag-document svg{ width:20px; height:20px; color:rgba(255,255,255,0.55); }
.voorbeeldlaag-document .naam, .klus-hero-laag-document .naam{
  font-size:9px; color:rgba(255,255,255,0.6); line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.voorbeeldlaag-notitie, .klus-hero-laag-notitie{ background:rgba(var(--accent-rgb),0.14); border-color:rgba(var(--accent-rgb),0.30); }
/* line-clamp i.p.v. alleen op tekens afkappen: bij een klus zonder foto's of
   documenten wordt dit de voorste, niet-gedraaide laag (dus volledig
   leesbaar in plaats van half achter iets anders verstopt), en dan moet een
   lange beschrijving netjes op een paar regels stoppen in plaats van in
   piepkleine regeltjes te worden geknipt. */
.voorbeeldlaag-notitie .notitietekst, .klus-hero-laag-notitie .notitietekst{
  margin:0; font-family:'Fraunces',serif; font-style:italic; font-size:10.5px; line-height:1.3; color:var(--hi);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

.voorbeeldstapel-meer{
  position:absolute; bottom:-4px; right:-4px; z-index:4;
  background:var(--ink); color:#fff; font-size:10px; font-weight:600;
  padding:.15rem .45rem; border-radius:999px; border:1px solid rgba(255,255,255,0.25);
}
.voorbeeldstapel-leeg{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px dashed rgba(255,255,255,0.20); border-radius:14px;
  color:rgba(255,255,255,0.4); font-size:10px;
}

/* ══════════ KLUSDOSSIER: HERO BOVENAAN ══════════
   Eigen, vaste waaier i.p.v. de .voorbeeldstapel hierboven hergebruikt: die
   is een vierkantje van 78px waar een rotatie van een paar px nauwelijks
   opvalt, maar op volle kaartbreedte duwde diezelfde rotatie de achterste
   lagen ver buiten hun eigen doos. Vandaar: altijd exact drie lagen
   (klus_detail vult ontbrekende foto's/documenten/notitie aan met lege
   lagen, zie klussen/views.py), elke laag met een vaste rand van 16px
   t.o.v. de hero zelf waarin de gedraaide achterlagen mogen uitsteken, en
   `overflow:hidden` op de hero als vangnet daarbuiten. (Let op: `inset` op
   de laag zelf, niet `padding` op `.klus-hero` — padding op de container
   doet niets voor een absoluut gepositioneerd kind, dat volgt de rand-doos,
   niet de padding-doos.)

   De hero zelf is bewust smaller dan de kaart (geen edge-to-edge banner) en
   staat gecentreerd; de terugpijl en (voor de eigenaar) het bewerk-potlood
   zweven ernaast als spiegelbeeld van elkaar, in gewone kaartkleur, in
   plaats van erboven met een donkere glastint. Zo kan geen van beide ooit
   door een foto geraakt worden, wat er ook in de waaier zit — en het
   potlood hangt los van de titel eronder, want je bewerkt de hele klus, niet
   alleen de naam. */
.klus-hero-blok{
  position:relative; margin-bottom:1.4rem;
  display:flex; justify-content:center;
}
.klus-hero-blok .terug-pijl{ position:absolute; left:0; top:0; margin:0; }
.klus-hero-blok .bewerk-knop{ position:absolute; right:0; top:0; margin:0; }
.klus-hero{
  position:relative; width:58%; max-width:230px; aspect-ratio:1/1;
  border-radius:22px; overflow:hidden; background:rgba(255,255,255,0.05);
}
.klus-hero-laag{
  position:absolute; inset:14px; border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 10px 22px rgba(0,0,0,0.28);
}
.klus-hero-laag-1{ z-index:3; }
.klus-hero-laag-2{ z-index:2; transform:rotate(-6deg) translate(-6%, 3%); }
.klus-hero-laag-3{ z-index:1; transform:rotate(7deg) translate(6%, 6%); }
.klus-hero-laag img{ display:block; width:100%; height:100%; object-fit:cover; background:rgba(0,0,0,0.2); }
.klus-hero-laag-document svg{ width:22px; height:22px; }
.klus-hero-laag-document .naam{ font-size:10px; }
.klus-hero-laag-notitie .notitietekst{ font-size:11.5px; }
.klus-hero-leeg{ background:rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.20); box-shadow:none; }
.klus-hero-meer{
  position:absolute; bottom:.5rem; right:.5rem; z-index:4;
  font-size:11px; padding:.2rem .55rem;
}

/* ══════════ KLUSDOSSIER: GEWERKTE UREN ══════════
   Wie er in deze lijst staat is afgeleid uit de geschreven uren, niet uit een
   toewijzing. Zie uren/totalen.py. */
.klusinfo .beschrijving{
  margin:.6rem 0 0; font-size:13.5px; line-height:1.5;
  color:rgba(255,255,255,0.78);
}

/* Microfoonknop in een tekstvak (static/js/dicteren.js). Rechtsonder in het
   vak, met ruimte ervoor vrijgehouden zodat de tekst er niet onder loopt.
   Rood en pulserend zolang hij luistert: je moet zien dat de microfoon aan
   staat. */
.dicteer-veld{ position:relative; display:block; }
.dicteer-veld textarea{ padding-right:3rem; }
.dicteer-knop{
  position:absolute; right:.45rem; bottom:.45rem;
  width:34px; height:34px; border-radius:50%; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.10); color:rgba(255,255,255,0.8);
  border:1px solid rgba(255,255,255,0.22);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.dicteer-knop::after{ content:''; position:absolute; inset:-5px; border-radius:50%; }
.dicteer-knop svg{ width:17px; height:17px; }
.dicteer-knop:active{ background:rgba(255,255,255,0.24); }
@media (hover:hover){ .dicteer-knop:hover{ background:rgba(255,255,255,0.18); } }
.dicteer-knop.luistert{
  background:var(--rood); border-color:var(--rood); color:#fff;
  animation:dicteer-puls 1.4s ease-out infinite;
}
@keyframes dicteer-puls{
  0%{ box-shadow:0 0 0 0 rgba(224,123,95,0.55); }
  100%{ box-shadow:0 0 0 12px rgba(224,123,95,0); }
}
@media (prefers-reduced-motion:reduce){ .dicteer-knop.luistert{ animation:none; } }
/* Een uitgeschakeld vak (uurblok in de leesstand) krijgt geen knop. */
.dicteer-veld textarea:disabled + .dicteer-knop{ display:none; }
.notitie-nieuw .dicteer-veld{ flex:1; min-width:0; }

/* Notities in het klusdossier: tekstvak + logboek eronder. De lijst krijgt
   een maximale hoogte en scrolt zelf, anders groeit het dossier bij een
   lange klus eindeloos door voordat je bij de tabbladen bent. */
.notities{ margin:-.4rem 0 1.6rem; }
.notities > .lbl{
  display:block; margin-bottom:.5rem; font-size:10.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,0.45);
}
.notitie-nieuw{ display:flex; gap:.5rem; align-items:flex-end; }
.notitie-nieuw textarea{ flex:1; min-height:48px; padding:.65rem .85rem; line-height:1.4; }
.notitie-nieuw .knop-stil{ min-height:48px; flex-shrink:0; }
.notitielijst{
  list-style:none; margin:.7rem 0 0; padding:0 .2rem 0 0;
  display:grid; gap:.4rem;
  max-height:min(320px, 45vh); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.25) transparent;
}
.notitielijst li{
  display:flex; gap:.65rem; align-items:flex-start;
  border-radius:14px; padding:.65rem .75rem;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
}
.notitielijst .nt-bol{
  flex-shrink:0; width:28px; height:28px; border-radius:999px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#fff; letter-spacing:.02em;
}
.notitielijst .nt-bol.leeg-bol{ background:rgba(255,255,255,0.06); border:1px dashed rgba(255,255,255,0.3); }
.nt-inhoud{ flex:1; min-width:0; }
.nt-inhoud .wie{ display:block; font-size:12.5px; font-weight:600; }
.nt-inhoud .wanneer{ margin-left:.35rem; font-weight:400; color:rgba(255,255,255,0.45); }
.nt-inhoud p{
  margin:.2rem 0 0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,0.85);
  overflow-wrap:anywhere;
}
.nt-weg{ margin:0; flex-shrink:0; }
.nt-weg button{
  position:relative; width:30px; height:30px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  background:none; color:rgba(255,255,255,0.5); border:1px solid transparent;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.nt-weg button::after{ content:''; position:absolute; inset:-7px; border-radius:50%; }
.nt-weg svg{ width:16px; height:16px; }
.nt-weg button:active{ background:rgba(255,255,255,0.18); }
@media (hover:hover){ .nt-weg button:hover{ color:var(--rood); border-color:rgba(255,255,255,0.18); } }

.urenlijst{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.urenlijst li{
  display:grid; grid-template-columns:auto 1fr auto; gap:.15rem .7rem;
  align-items:center;
  border-radius:14px; padding:.7rem .95rem;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
}
/* Zelfde avatarrondje als op de medewerkerslijst (.mw-bol), hier kleiner
   omdat de rij zelf compacter is en er al een naam + functie-badge staat. */
.urenlijst .ur-bol{
  grid-column:1; grid-row:1 / span 2;
  flex-shrink:0; width:32px; height:32px; border-radius:999px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; letter-spacing:.02em;
}
.urenlijst .ur-bol.leeg-bol{ background:none; border-color:transparent; }
.urenlijst .wie{ grid-column:2; font-size:13.5px; font-weight:500; }
.urenlijst .functie{
  margin-left:.45rem; font-size:10.5px; font-weight:500; padding:.1rem .5rem;
  border-radius:999px; color:var(--hi);
  background:rgba(var(--accent-rgb),0.16); border:1px solid rgba(var(--accent-rgb),0.34);
}
.urenlijst .wanneer{
  grid-column:2; font-size:11px; color:rgba(255,255,255,0.5);
}
.urenlijst .uren{
  grid-column:3; grid-row:1 / span 2;
  font-family:'Fraunces',serif; font-style:italic; font-weight:600;
  font-size:1.05rem; color:var(--hi); font-variant-numeric:tabular-nums;
}
.urenlijst .totaalregel{
  background:rgba(var(--accent-rgb),0.14); border-color:rgba(var(--accent-rgb),0.34);
}
.urenlijst .totaalregel .wie{ color:rgba(255,255,255,0.75); }

/* de kleurkiezer is standaard een klein grijs vakje; hier een brede pil */
input[type=color]{
  width:100%; height:46px; padding:.25rem; cursor:pointer;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.20);
  border-radius:14px;
}
input[type=color]::-webkit-color-swatch{ border:none; border-radius:10px; }
input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }

/* Een checkbox moet niet over de volle breedte gerekt worden. Wel groter dan
   de standaard 16px: met scale(1.25) is het vinkje ~20px en dat is met een
   duim mikken. Het label ernaast heeft een `for`, dus de tekst schakelt mee —
   samen is dat een fatsoenlijk aanraakgebied. */
input[type=checkbox]{
  width:auto; accent-color:var(--accent); transform:scale(1.5);
  margin:.35rem .5rem .35rem .25rem;
}
label:has(> input[type=checkbox]), input[type=checkbox] + label{ cursor:pointer; }

/* ══════════ WISSELAAR (toggle switch) ══════════
   Zie DESIGN.md voor de recept-tekens; dit is de eerste keer dat 'm in de
   klusapp echt gebouwd wordt (was tot nu toe een simpele pil-link). */
.wisselaar-rij{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  margin-bottom:1.2rem; cursor:pointer;
}
.wisselaar-label{ font-size:13px; color:rgba(255,255,255,0.75); }
.wisselaar{ position:relative; width:42px; height:24px; flex-shrink:0; }
.wisselaar input{
  position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; overflow:hidden;
}
.wisselaar-track{
  position:absolute; inset:0; border-radius:999px; pointer-events:none;
  background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.25);
  transition:background .15s, border-color .15s;
}
.wisselaar-track::before{
  content:''; position:absolute; width:18px; height:18px; left:2px; top:2px;
  background:#fff; border-radius:50%; transition:transform .15s;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.wisselaar input:checked + .wisselaar-track{
  background:var(--accent); border-color:rgba(var(--accent-rgb),0.6);
}
.wisselaar input:checked + .wisselaar-track::before{ transform:translateX(18px); }
.wisselaar input:focus-visible + .wisselaar-track{
  outline:2px solid rgba(var(--accent-rgb),0.9); outline-offset:2px;
}

/* ══════════ ADRES-AUTOCOMPLETE (klusformulier) ══════════
   Suggesties van OpenStreetMap/Nominatim onder het adresveld. Positie komt uit
   static/js/adres-zoeken.js (position:fixed, dus geen wrappend element nodig). */
.adres-suggesties{
  position:fixed; z-index:30; list-style:none; margin:.3rem 0 0; padding:.3rem;
  max-height:220px; overflow-y:auto; border-radius:14px;
  background:rgba(30,32,26,0.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.20); box-shadow:0 18px 40px rgba(0,0,0,0.35);
}
.adres-suggesties li{
  padding:.6rem .7rem; border-radius:10px; font-size:13px; line-height:1.35;
  color:rgba(255,255,255,0.85); cursor:pointer;
}
@media (hover:hover){ .adres-suggesties li:hover{ background:rgba(255,255,255,0.12); color:#fff; } }

/* ══════════ PLANBORD ══════════
   Rijen zijn medewerkers, kolommen zijn dagen (SPEC §5). Zeven dagkolommen
   passen niet op een telefoon, dus het bord scrollt horizontaal binnen zijn
   eigen kader — hetzelfde idioom als .raster-scroll bij de weekkalender. */
.bord-scroll{ overflow-x:auto; padding-bottom:.4rem; }
.bord-scroll::-webkit-scrollbar{ height:6px; }
.bord-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.2); border-radius:999px; }
/* Bredere kolommen dan eerst: in de chips staat nu de klusnaam, en die
   heeft ruimte nodig om herkenbaar te zijn in plaats van afgekapt. De
   kolommen zelf staan in de view (uren/views.py, BORD_*): een lege
   zaterdag of zondag wordt daar smal. Dit is alleen de terugval. */
.bord{ display:grid; grid-template-columns:176px repeat(7, minmax(124px,1fr)); min-width:1044px; }
.bord-kop.smal{ padding-left:0; padding-right:0; }
.bord-cel.smal{ padding-left:0; padding-right:0; }

.bord-kop{ font-size:11px; text-align:center; padding:.1rem .2rem .5rem; color:rgba(255,255,255,0.7); }
.bord-kop .dag{ font-weight:600; text-transform:capitalize; }
.bord-kop .datum{ color:rgba(255,255,255,0.5); font-size:10px; }
.bord-kop.vandaag .dag{ color:var(--hi); }

/* De namenkolom blijft staan bij horizontaal scrollen, anders lees je getallen
   van wie-weet-wie (SPEC §5). Een sticky cel is doorzichtig en de kaart
   eronder is glas, dus de blokken zouden zichtbaar ónder de namen door
   schuiven: daarom krijgt deze cel een eigen, dekkende ondergrond. Die is
   nagebouwd met dezelfde donkere verlooptinten plus hetzelfde witfilm als
   .glas, zodat hij als glas leest zonder een licht vlak te worden — en
   bewust niet met background-attachment:fixed, want dat valt op iOS terug op
   scroll en dan wordt de hele paginagradient in één smalle cel geperst. */
.bord-naam{
  position:sticky; left:0; z-index:3;
  padding:.5rem .55rem; border-top:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.125), rgba(255,255,255,0.05)),
    linear-gradient(160deg, #20211C, #282C21);
}
/* De hoekcel boven de namen heeft geen eigen vlak: hij hoort bij de
   kopregel, niet bij de namenkolom. Dit scherm wordt op een laptop
   geopend, waar het bord meestal niet horizontaal hoeft te scrollen. */
.bord-hoek{ position:sticky; left:0; z-index:4; }
/* Rondje met initialen vóór de naam, zoals in de demo: op een bord vol
   getallen herken je een rij sneller aan kleur dan aan tekst. */
.bord-naam{ display:flex; align-items:flex-start; gap:.45rem; }
.bord-naam-tekst{ display:grid; min-width:0; }
.bord-naam .bol{
  flex-shrink:0; width:24px; height:24px; border-radius:999px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:700; color:#fff; letter-spacing:.02em;
}
.bord-naam.zonder-uren .bol{ opacity:.45; }
/* de naam is een link naar de persoonskaart (medewerkers/_persoonkaart.html) */
.bord-naam-link{ display:flex; align-items:flex-start; gap:.45rem; min-width:0; color:inherit; text-decoration:none; }
@media (hover:hover){ .bord-naam-link:hover .wie{ color:var(--hi); } }

/* persoonskaart: kop met grote bol zoals op het profiel, daaronder de gegevens */
/* ruimte onder de rij met kruisje en potlood, anders valt het kruisje over
   de bol */
.persoonkaart .profielkop{ margin:.3rem 0 .4rem; }
.persoonkaart .klusinfo{ margin-bottom:.4rem; }
.persoonkaart .klusinfo a{ color:var(--hi); text-decoration:none; }
/* zelfde soort kop als de groepen op het profielscherm (.sectiekop), iets
   kleiner: een kop moet anders ogen dan de labels eronder */
.persoonkaart-kop{
  margin:1.1rem 0 .45rem; font-family:'Fraunces',serif; font-style:italic;
  font-weight:600; font-size:1rem; color:#fff;
}
.bord-naam .wie{ font-size:12.5px; font-weight:600; line-height:1.25; overflow-wrap:break-word; }
.bord-naam .functie{ font-size:10px; color:rgba(255,255,255,0.5); }
/* Het weektotaal per persoon: eigen kolom rechts, zie BORD_WEEK in
   uren/views.py. Een trede hoger dan de uren in de blokjes: wit en groter,
   op een eigen band, anders lees je hem als nog een blokje. Het groene
   accent blijft voor de blokjes en de dagtotalen; het eindtotaal
   rechtsonder is het zwaarst. */
.bord-cel.bord-week{
  align-content:center; justify-items:center;
  background:rgba(255,255,255,0.07); border-left-color:rgba(255,255,255,0.18);
  font-size:12.5px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums;
}
.bord-week-kop{ background:rgba(255,255,255,0.07); border-radius:10px 10px 0 0; }
/* De regel "Per dag" krijgt dezelfde trede als de kolom Week: een eigen
   band, witte vette getallen. Op het kruispunt het eindtotaal, groen. */
.bord-cel.bord-voet{ background:rgba(255,255,255,0.07); border-top-color:rgba(255,255,255,0.18); }
.bord-voet .dagtotaal{ font-size:12.5px; font-weight:700; color:#fff; }
.bord-cel.bord-voet.bord-week{ background:rgba(var(--accent-rgb),0.16); border-radius:0 0 10px 0; }
.bord-cel.bord-voet.bord-week .dagtotaal{ font-size:13px; font-weight:800; color:var(--hi); }
/* wie deze week nergens staat blijft leesbaar maar valt terug — precies de
   vraag waarvoor dit scherm open staat, dus niet verbergen */
.bord-naam.zonder-uren .wie{ color:rgba(255,255,255,0.55); font-weight:500; }

.bord-cel{
  padding:.3rem;
  border-top:1px solid rgba(255,255,255,0.08); border-left:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  display:grid; gap:.25rem; align-content:start;
}
.bord-cel.vandaag{ background:rgba(var(--accent-rgb),0.07); }

/* Chip als in de demo: kleurstip, klusnaam, uren rechts. De naam zegt op dit
   bord meer dan de begintijd — de vraag is waar iemand stond, niet hoe laat
   hij begon. Die staat in de tooltip en op het detailscherm. */
.bord-chip{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.35rem;
  border-radius:9px; padding:.3rem .45rem;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  font-size:10.5px; line-height:1.3; color:#fff; text-decoration:none;
  transition:background .12s, border-color .12s;
}
@media (hover:hover){ .bord-chip:hover{ background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.4); } }
.bord-chip .vlek{
  width:8px; height:8px; border-radius:999px; border:1px solid; display:block;
}
.bord-chip .klus{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bord-chip .uren{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--hi); }
/* een lege dag krijgt een streepje: dan zie je dat er gekeken is en er niets
   was, in plaats van een gat waarvan je je afvraagt of het scherm klopt */
.bord-leeg{ color:rgba(255,255,255,0.22); font-size:12px; text-align:center; }
/* staat in elke cel; weg zodra er een zichtbaar blok in staat, ook na
   filteren (static/js/planbordfilter.js) */
.bord-cel:has(.bord-chip:not([hidden])) .bord-leeg{ display:none; }

.bord-voet{ min-height:0; padding-top:.45rem; padding-bottom:.45rem; }
.bord-voet .wie{ color:rgba(255,255,255,0.6); font-size:11px; }
/* alleen de dagcellen van de voetregel; de naamcel houdt zijn dekkende
   ondergrond, anders scrollen de chips er onderdoor */
.bord-cel.bord-voet{ text-align:center; }
.bord-voet .dagtotaal{ font-variant-numeric:tabular-nums; }

/* de kleur draagt op deze breedte de klusidentiteit, dus staat eronder wat
   welke kleur is */
.legenda{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.legenda a{
  display:flex; align-items:center; gap:.45rem;
  border-radius:999px; padding:.35rem .8rem .35rem .45rem;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  font-size:12px; color:#fff; text-decoration:none;
}
@media (hover:hover){ .legenda a:hover{ background:rgba(255,255,255,0.14); } }
.legenda .vlek{ width:14px; height:14px; border-radius:999px; border:1px solid; flex-shrink:0; }
/* de gekozen klus als filter (uren/views.py:planbord, ?klus=) */
.legenda a.actief{
  background:rgba(var(--accent-rgb),0.32); border-color:rgba(var(--accent-rgb),0.6); color:var(--hi);
}
.legenda a.alle{ padding-left:.8rem; color:rgba(255,255,255,0.8); }

/* ══════════ KEUZEPILLEN ══════════
   Radio's of vinkjes in een label: de knop zelf staat buiten beeld en het
   label eromheen is de pil. Dat is dezelfde vormtaal als .pil, werkt
   zonder een regel JavaScript, en houdt toetsenbord- en schermlezerbediening
   intact. Het vinkje wordt met de buur-selector gestyled (input:checked +
   .vlak), niet met :has() — dezelfde look op elke browser die de mannen op
   hun telefoon hebben staan. Ja/nee/onbekend kleuren groen/rood/grijs, zoals
   in de werkplanning. */
.keuzes{ display:flex; flex-wrap:wrap; gap:.4rem; }
/* een <label> is in dit stylesheet een formulierkopje (klein, hoofdletters,
   eigen marge); die opmaak moet er hier weer af, want dit label ís de knop */
.keuzepil{
  display:inline-block; position:relative; margin:0;
  text-transform:none; letter-spacing:normal; color:inherit;
}
/* buiten beeld, maar niet display:none — anders is hij niet meer te focussen */
.keuzepil input{
  position:absolute; width:1px; height:1px; opacity:0; margin:0; padding:0;
  transform:scale(1);
}
.keuzepil .vlak{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:.4rem .95rem; border-radius:999px; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.7); transition:background .12s, color .12s, border-color .12s;
}
@media (hover:hover){ .keuzepil .vlak:hover{ background:rgba(255,255,255,0.14); color:#fff; } }
.keuzepil.ja input:checked + .vlak{
  background:rgba(var(--accent-rgb),0.32); border-color:rgba(var(--accent-rgb),0.6); color:var(--hi);
}
.keuzepil.nee input:checked + .vlak{
  background:rgba(224,123,95,0.30); border-color:rgba(224,123,95,0.62); color:#F6C7B6;
}
.keuzepil.onbekend input:checked + .vlak{
  background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.32); color:#fff;
}
.keuzepil input:focus-visible + .vlak{ outline:2px solid rgba(var(--accent-rgb),0.9); outline-offset:2px; }

/* ══════════ WERKPLANNING ══════════
   templates/uren/aanwezigheid.html: het rooster dat de Excel van Maarten
   vervangt. Leent het raamwerk van het planbord (.bord, .bord-naam,
   .bord-kop) en kleurt de cellen zoals hij gewend is: groen aanwezig, rood
   afwezig. Gemaakt voor een laptop; de kolombreedtes staan in de view
   (PLANNING_WEERGAVEN in uren/views.py). "Deze week" past in de kaart,
   "Doorlopend" scrolt opzij met de namen vast links.

   Kop, namen en cellen zijn knoppen (klikken kiest, zie
   static/js/werkplanning.js). Daarom eerst de knopopmaak eraf. */
/* Alleen de familie erven, niet de hele font-regel: die zou de kleine
   maten van .bord-kop en .wp-cel overschrijven (deze selector weegt zwaarder). */
.wp-bord button{
  font-family:inherit; color:inherit; text-align:inherit; margin:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.wp-weken{ display:flex; gap:.4rem; flex-wrap:wrap; }
.wp-weken .pil{ padding:.4rem .85rem; cursor:pointer; }
/* het bord rekt niet op tot de kaart: elke dag is precies --dag breed */
.wp-bord{ min-width:0; width:max-content; }
.wp-kop .nr{ display:none; }
/* Maandnaam boven de 1e van de maand. Alleen in de maandzoom: bij Dag en
   Week staat de maand al in de datum ("1 okt"). Hij mag over de buurdagen
   heen lopen, de kop is daar maar 26px breed. */
.wp-kop .maand{ display:none; }
.wp-zoom-maand .wp-kop .maand{
  display:block; font-size:10px; font-weight:700; color:var(--hi);
  text-transform:capitalize; white-space:nowrap; justify-self:start; margin-left:2px;
}
.wp-zoom-maand .wp-kop{ align-content:end; }
.wp-zoom-maand .wp-kop.maandstart{ box-shadow:inset 2px 0 0 rgba(var(--accent-rgb),0.7); }
/* De hoek boven de namen dekt de kopregel af als je opzij scrolt; anders
   schuiven de dagen er zichtbaar onderdoor. Zelfde ondergrond als .bord-naam. */
.wp-bord .bord-hoek{
  background:
    linear-gradient(150deg, rgba(255,255,255,0.125), rgba(255,255,255,0.05)),
    linear-gradient(160deg, #20211C, #282C21);
}

/* Zoom "Maand": een dag is 26px. Daar past alleen kleur in: tekst wordt
   een rondje, de kop alleen het dagnummer. De tekst staat in de tooltip. */
.wp-zoom-maand .wp-kop .dag, .wp-zoom-maand .wp-kop .datum, .wp-zoom-maand .wp-telling .van{ display:none; }
.wp-zoom-maand .wp-kop .nr{ display:block; font-size:10px; font-weight:600; }
.wp-zoom-maand .wp-kop .feest{ width:6px; height:6px; padding:0; margin:.2rem auto 0; font-size:0; }
.wp-zoom-maand .wp-kop{ padding-left:0; padding-right:0; overflow:visible; }
.wp-zoom-maand .vandaag-label{ font-size:8px; padding:0 .25rem; position:relative; z-index:5; }
.wp-zoom-maand .wp-telling .n{ font-size:10.5px; }
.wp-zoom-maand .wp-cel, .wp-zoom-maand .wp-kc{ padding:.25rem 2px; }
.wp-zoom-maand .wp-cel .tekst, .wp-zoom-maand .wp-kc .tekst, .wp-zoom-maand .wp-mensen,
.wp-zoom-maand .wp-kluslijn .naam, .wp-zoom-maand .wp-notitie .tekst{ display:none; }
.wp-zoom-maand .wp-cel:has(.wp-kluslijn){ display:flex; flex-wrap:wrap; align-content:flex-start; gap:2px; }
.wp-zoom-maand .wp-notitie:has(.tekst)::before{
  content:""; display:block; width:5px; height:5px; margin:auto; border-radius:999px; background:currentColor;
}
/* Notities in de maandzoom. Een dag is daar 26px, te smal voor tekst; maar
   dezelfde notitie op een paar dagen achter elkaar ("Vakantie" van ma t/m
   vr) staat nu één keer over dat hele blok. De view zet "reeks" en --reeks
   (het aantal dagen) op de eerste cel, de rest houdt zijn tekst verborgen; een
   losse dag met een notitie heet "los" en krijgt een hoekje, zoals een
   opmerking in Excel. Aanwijzen toont de notitie (werkplanning.js). */
.wp-zoom-maand .bord-cel.reeks{ position:relative; z-index:1; overflow:visible; }
.wp-zoom-maand .bord-cel.reeks > .tekst{
  display:block; position:absolute; left:4px; bottom:3px;
  width:calc(var(--reeks) * var(--dag) - 8px); padding:0;
  font-size:10px; font-weight:600; color:#fff; pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,0.45);
}
.wp-zoom-maand .wp-kc.reeks > .tekst{ bottom:auto; top:50%; transform:translateY(-50%); }
.wp-zoom-maand .bord-cel.los{ position:relative; }
.wp-zoom-maand .bord-cel.los::after{
  content:""; position:absolute; top:0; right:0;
  border-style:solid; border-width:0 7px 7px 0;
  border-color:transparent rgba(255,255,255,0.85) transparent transparent;
}
/* Popje bij aanwijzen: de notitie die in de cel niet past (werkplanning.js) */
.wp-popje{
  position:fixed; z-index:50; max-width:240px; padding:.45rem .65rem;
  display:grid; gap:.1rem; pointer-events:none;
  background:rgba(30,32,28,0.92); border:1px solid rgba(255,255,255,0.14);
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.35);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.wp-popje[hidden]{ display:none; }
.wp-popje-tekst{ font-size:12.5px; font-weight:600; color:#fff; line-height:1.3; overflow-wrap:break-word; }
.wp-popje-sub{ font-size:10.5px; color:rgba(255,255,255,0.55); }
/* Zoom "Dag": breed genoeg om een hele opmerking of locatie te lezen */
.wp-zoom-dag .wp-cel .tekst, .wp-zoom-dag .wp-kc .tekst{ white-space:normal; }

/* Vandaag: een groene verticale lijn door de hele kolom, van de kop tot de
   onderste medewerker, met "Vandaag" boven de dag. Na .weekstart in de
   cascade, zodat de lijn wint als vandaag een maandag is. */
.wp-bord .vandaag{ border-left:2px solid var(--accent) !important; }
.wp-kop.vandaag{ border-radius:0; }
.wp-kop .vandaag-label{
  display:block; margin-bottom:.15rem; padding:.05rem .4rem; border-radius:999px;
  font-size:9.5px; font-weight:700; letter-spacing:.02em;
  background:var(--accent); color:var(--ink);
}

.wp-kop{ background:none; border:0; border-radius:8px; display:grid; justify-items:center; }
@media (hover:hover){ .wp-kop:hover{ background:rgba(255,255,255,0.08); } }
.wp-kop.feestdag .dag, .wp-kop.feestdag .datum{ color:#F6C7B6; }
/* De naam van een feestdag onder de datum. Rood als De Groene M dan dicht
   is, grijs bij een feestdag waarop gewoon gewerkt wordt (5 mei). */
.wp-kop .feest{
  display:block; max-width:100%; margin-top:.15rem; padding:.05rem .35rem; border-radius:999px;
  font-size:9.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.6);
}
.wp-kop.feestdag .feest{ background:rgba(224,123,95,0.28); color:#F6C7B6; }
/* een nieuwe week begint met een duidelijker lijn: in veertien weken naast
   elkaar raak je anders de tel kwijt */
.wp-bord .weekstart{ border-left-color:rgba(255,255,255,0.32); }

/* De rijen "Aanwezig" en "Notitie" bovenaan: dezelfde band als de regel
   "Per dag" op het planbord, want ook dit zijn de totalen. */
.wp-rijkop{ align-items:center; }
.wp-rijkop .wie{ font-size:11px; font-weight:600; color:rgba(255,255,255,0.6); }
.wp-telling{
  background:rgba(255,255,255,0.07); align-content:center; justify-content:center;
  grid-auto-flow:column; gap:.1rem; font-variant-numeric:tabular-nums;
}
.wp-telling .n{ font-size:13px; font-weight:700; color:#fff; }
.wp-telling .n.nul{ color:rgba(255,255,255,0.3); font-weight:500; }
.wp-telling .van{ font-size:10.5px; color:rgba(255,255,255,0.45); align-self:end; }
.wp-notitie{
  min-height:28px; border-right:0; border-bottom:0;
  font-size:10.5px; color:var(--hi); overflow:hidden;
}
@media (hover:hover){ .wp-notitie:hover{ background:rgba(255,255,255,0.10); } }

/* namen zijn knoppen: klikken kiest al zijn dagen */
.wp-naam{ border-right:0; border-bottom:0; border-left:0; width:100%; }
@media (hover:hover){ .wp-naam:hover .wie{ color:var(--hi); } }

/* De cellen. Geen gap in het raster maar een dunne lijn, zoals in de Excel:
   een rij groen leest dan als één balk. */
.wp-cel{
  min-height:34px; padding:.25rem .35rem; border-right:0; border-bottom:0;
  display:block; overflow:hidden; font-size:10.5px; line-height:1.25;
  transition:filter .1s;
}
.wp-cel.aanwezig{ background:rgba(var(--accent-rgb),0.30); }
.wp-cel.afwezig{ background:rgba(224,123,95,0.38); }
.wp-cel.vrij{ background:rgba(255,255,255,0.025); }
/* niet in dienst: gearceerd en niet aan te klikken */
.wp-cel.buiten{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 4px, transparent 4px 8px);
}
@media (hover:hover){ button.wp-cel:hover{ filter:brightness(1.25); } }
.wp-cel.gekozen{ outline:2px solid #fff; outline-offset:-2px; filter:brightness(1.2); }
.wp-cel .tekst, .wp-notitie .tekst{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wp-cel .tekst{ color:#fff; padding-right:.35rem; }

.wp-legenda{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-top:1rem; font-size:11.5px; color:rgba(255,255,255,0.7); }
.wp-legenda span{ display:inline-flex; align-items:center; gap:.4rem; }
.wp-stip{ width:12px; height:12px; border-radius:3px; display:inline-block; border:1px solid rgba(255,255,255,0.2); }
.wp-stip.aanwezig{ background:rgba(var(--accent-rgb),0.55); }
.wp-stip.afwezig{ background:rgba(224,123,95,0.6); }
.wp-stip.vrij{ background:rgba(255,255,255,0.05); }
.wp-legenda .wp-hint{ margin-left:auto; color:rgba(255,255,255,0.45); }

.wp-dialoogtitel{
  margin:.2rem 0 .15rem; font-family:'Fraunces',serif; font-style:italic;
  font-weight:600; font-size:1.2rem; color:#fff;
}
.wp-dialoogsub{ margin:0 0 .4rem; font-size:12px; color:rgba(255,255,255,0.55); }
.wp-dialoogsub:empty{ display:none; }
.wp-standen{ margin:.9rem 0 .2rem; }

/* Ingepland op een klus: een rondje in de kleur van de klus met de naam
   erachter, één regel per klus. De celkleur zelf blijft voor aanwezig/
   afwezig. */
.wp-kluslijn{ display:flex; align-items:center; gap:.3rem; min-width:0; }
.wp-kluslijn i{
  width:8px; height:8px; border-radius:999px; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,0.25);
}
.wp-kluslijn .naam{ font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-cel .tekst.sub{ color:rgba(255,255,255,0.65); font-size:10px; }
.wp-stip.klus{ width:8px; height:8px; border-radius:999px; background:#E8B04B; border:0; }

/* kluskiezer in het venster: doorzoekbaar, aangevinkt bovenaan */
.wp-kluszoek{ margin-bottom:.5rem; }
.wp-kluslijst{
  display:flex; flex-direction:column; gap:.25rem;
  max-height:240px; overflow-y:auto; overscroll-behavior:contain; padding-right:.2rem;
}
.wp-klus{ position:relative; margin:0; text-transform:none; letter-spacing:normal; color:inherit; }
.wp-klus:has(input:checked){ order:-1; }
.wp-klus input{ position:absolute; opacity:0; width:1px; height:1px; }
.wp-klus .vlak{
  display:flex; align-items:center; gap:.55rem; cursor:pointer;
  padding:.5rem .7rem; border-radius:12px; font-size:13px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10);
}
@media (hover:hover){ .wp-klus .vlak:hover{ background:rgba(255,255,255,0.11); } }
.wp-klus input:checked + .vlak{ background:rgba(var(--accent-rgb),0.24); border-color:rgba(var(--accent-rgb),0.55); }
.wp-klus input:focus-visible + .vlak{ outline:2px solid rgba(var(--accent-rgb),0.9); outline-offset:1px; }
.wp-klus i{ width:10px; height:10px; border-radius:999px; flex-shrink:0; }
.wp-klus .naam{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wp-klus .plaats{ margin-left:auto; font-size:11.5px; color:rgba(255,255,255,0.55); white-space:nowrap; }
a.wp-klus{ text-decoration:none; }

/* ── Klussenblok onder de mensen ──
   Een kopregel over de volle breedte; de tekst erin blijft links staan als
   je opzij scrolt, net als de namen. */
.wp-blokkop{
  grid-column:1 / -1; margin-top:.9rem; padding:.45rem 0 .35rem;
  border-top:1px solid rgba(255,255,255,0.22);
}
.wp-blokkop-inhoud{
  position:sticky; left:0; display:inline-flex; align-items:center; gap:.7rem; padding-left:.55rem;
}
.wp-blokkop .wie{ font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:1rem; }
.wp-toevoegknop{ padding:.3rem .8rem; font-size:12px; }
.wp-inklap{
  width:26px; height:26px; border-radius:8px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:16px; font-weight:600; line-height:1; color:#fff;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2);
}
@media (hover:hover){ .wp-inklap:hover{ background:rgba(255,255,255,0.16); } }
.wp-blokkop-aantal{ font-size:11px; color:rgba(255,255,255,0.5); }
/* ingeklapt: alleen de kopregel blijft staan */
.klussen-dicht .wp-klusnaam, .klussen-dicht .wp-kc, .klussen-dicht .wp-klusleeg{ display:none; }

/* Namen ingeklapt: de kolom wordt zo smal als de fotowaaier en houdt alleen
   de bol of de waaier over. De naam staat dan nog in de tooltip. */
.wp-hoek{ display:flex; align-items:flex-end; justify-content:flex-end; padding:0 .45rem .45rem; }
.wp-namen-inklap{ font-size:18px; }
.namen-smal{ --naam:64px; }
.namen-smal .wp-hoek{ justify-content:center; padding-right:0; padding-left:0; }
.namen-smal .bord-naam{ justify-content:center; padding-left:0; padding-right:0; }
.namen-smal .bord-naam-tekst, .namen-smal .wp-rijkop .wie{ display:none; }
.namen-smal .wp-waaier{ margin-left:0; margin-right:0; }

/* ══════════ MIJN AANWEZIGHEID ══════════
   templates/uren/mijn_aanwezigheid.html: dezelfde lijn als de werkplanning
   hierboven, maar één rij. Daarom hoger. Een vak aantikken zet die dag
   (sinds 03-10-2026). De dagbreedte zet mijn-aanwezigheid.js. */
.aw-bord .wp-cel{ min-height:120px; padding:.5rem .55rem; font-size:12.5px; line-height:1.3; }
.aw-bord .wp-cel .tekst{ white-space:normal; overflow-wrap:anywhere; }
.aw-bord.wp-zoom-maand .wp-cel{ padding:.5rem 2px; }
.aw-bord .wp-naam{ align-items:center; }
.aw-bord .wp-kop{ padding-top:.3rem; padding-bottom:.6rem; font-size:12px; }
.aw-bord .wp-kop .datum{ font-size:11px; }
@media (hover:hover){ .aw-bord .wp-kop:hover{ background:none; } }
/* Op een telefoon is een naamkolom van 176px de halve breedte: daar blijft
   alleen je bolletje staan, zoals bij de ingeklapte namen van de eigenaar. */
@media (max-width:700px){
  .aw-bord{ --naam:56px; }
  .aw-bord .bord-naam{ justify-content:center; padding-left:0; padding-right:0; }
  .aw-bord .bord-naam-tekst{ display:none; }
}

/* Op een telefoon geen lijn maar een maandraster, net als Mijn uren: zeven
   kolommen passen zonder opzij te scrollen, en een dag is groot genoeg om
   met een duim te raken. Groen/rood zoals de lijn. */
@media (max-width:700px){ .aw-alleen-breed{ display:none; } }
@media (min-width:701px){ .aw-alleen-smal{ display:none; } }
.aw-maand .maanddag{ font:inherit; color:#fff; cursor:pointer; width:100%; overflow:hidden; }
.aw-maand .maanddag.aanwezig{ background:rgba(var(--accent-rgb),0.30); border-color:rgba(var(--accent-rgb),0.45); }
.aw-maand .maanddag.afwezig{ background:rgba(224,123,95,0.38); border-color:rgba(224,123,95,0.55); }
.aw-maand .maanddag.vrij{ background:rgba(255,255,255,0.03); }
.aw-maand .maanddag.buiten{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 4px, transparent 4px 8px);
  cursor:default;
}
.aw-maand .maanddag.vandaag{ border:2px solid var(--hi); }
.aw-maand .aw-reden{
  font-size:9.5px; line-height:1.1; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9;
}
@media (hover:hover){ .aw-maand button.maanddag:hover{ filter:brightness(1.2); } }
.aw-alleen-smal .urentop{ margin-bottom:.8rem; }

/* fotowaaier bij de klusnaam: de stapel van de klussenlijst, kleiner */
.wp-klusnaam{ gap:.65rem; }
.wp-waaier{ width:38px; height:38px; margin:.25rem .2rem .25rem .3rem; flex-shrink:0; }
.wp-waaier .voorbeeldlaag{ border-radius:8px; box-shadow:0 5px 12px rgba(0,0,0,0.28); }
.wp-waaier .laag-voor-2{ transform:rotate(8deg) translate(5px, 2px) scale(0.95); }
.wp-waaier .laag-voor-3{ transform:rotate(-10deg) translate(-5px, 4px) scale(0.9); }
/* lege blaadjes: dezelfde waaier, alleen zonder inhoud */
.wp-waaier-leeg .voorbeeldlaag{ background:rgba(255,255,255,0.06); border-style:dashed; border-color:rgba(255,255,255,0.22); }
.wp-waaier-leeg .laag-voor-1{ background:rgba(255,255,255,0.09); }
.wp-klusnaam .wie{ display:flex; align-items:center; gap:.35rem; }
.wp-klusnaam .wp-klusbol{ width:8px; height:8px; margin:0; }
.wp-klusleeg{ grid-column:1 / -1; margin:.3rem 0 0; padding-left:.55rem; font-size:12.5px; }

.wp-klusnaam{ border-right:0; border-bottom:0; border-left:0; width:100%; align-items:center; color:inherit; text-decoration:none; }
@media (hover:hover){ .wp-klusnaam:hover .wie{ color:var(--hi); } }
.wp-klusbol{
  width:12px; height:12px; border-radius:999px; flex-shrink:0; margin:0 .3rem 0 .2rem;
  box-shadow:0 0 0 1px rgba(0,0,0,0.25);
}

/* Een klusdag: de cel in de kleur van de klus, met de notitie (bij Van Ee
   de locatie). Dit blok gaat over klussen, niet over mensen, dus hier mag
   de kluskleur wel het vlak vullen; groen/rood staat alleen hierboven. */
.wp-kc{
  min-height:30px; padding:.25rem .35rem; border-right:0; border-bottom:0;
  display:block; overflow:hidden; position:relative;
  font-size:10.5px; line-height:1.25; background:rgba(255,255,255,0.02);
  transition:filter .1s;
}
.wp-kc.gepland{ background:color-mix(in srgb, var(--klus) 55%, transparent); }
@media (hover:hover){ button.wp-kc:hover{ filter:brightness(1.25); background-color:rgba(255,255,255,0.06); } }
.wp-kc.gepland:hover{ background:color-mix(in srgb, var(--klus) 55%, transparent); }
.wp-kc.gekozen{ outline:2px solid #fff; outline-offset:-2px; filter:brightness(1.2); }
.wp-kc .tekst{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; font-weight:600; }
/* hoeveel mensen er die dag op deze klus staan (uit het blok hierboven) */
.wp-mensen{ display:block; font-size:9.5px; color:rgba(255,255,255,0.7); white-space:nowrap; }
.wp-stip.kluscel{ background:#5B8FA8; }

/* ══════════ PAGINA-OVERGANG: KLUS OPENEN/SLUITEN ══════════
   Dit is een gewone server-gerenderde navigatie (geen SPA), dus er bestaat
   geen document dat beide pagina's tegelijk kent om ze synchroon te
   schuiven. In plaats daarvan twee losse, onafhankelijke trucs die samen de
   illusie van één vloeiende overgang geven:
   - Openen: de nieuwe kaart start buiten beeld rechts en schuift bij het
     laden naar zijn plek — puur CSS, gekoppeld aan het terugpijltje in de
     kop (.terug-pijl bestaat alleen op een scherm dat je "in" een klus
     toont), dus dit hoeft niet los aangezet te worden per pagina.
   - Teruggaan: static/js/klus-overgang.js onderschept de klik op dat
     pijltje, laat de kaart wegschuiven en navigeert daarna; is het doel de
     vorige pagina in de geschiedenis, dan via browser-terug (vaak direct
     uit de cache, dus geen wachttijd na de animatie).
   Was eerder een cross-document View Transition (native browser-API); die
   bleek in de praktijk niet overal te animeren, dit werkt zonder
   afhankigheid van die (nog jonge) API.

   Sinds "bewerken" ook een eigen terugpijl heeft (die teruggaat naar het
   klusdossier) kan de kaart waar je op uitkomt ZELF ook weer een terugpijl
   hebben — bijvoorbeeld het klusdossier na "bewerken" afsluiten. Zonder
   verder onderscheid zou die dan weer van rechts inschuiven, alsof je hem
   opnieuw "opent" — terwijl je juist terugging. klus-overgang.js zet daarom
   vlak vóór het navigeren een sessionStorage-vlag; de volgende pagina leest
   die (nog vóór <body> geparst is, dus zonder flits) en schuift dan
   omgekeerd in, van links i.p.v. rechts. */
/* Licht gehouden: een stukje schuiven met een fade, niet de hele kaart over
   het scherm. De kaart is glas (backdrop-filter), en elke frame dat die
   beweegt moet de vervaging opnieuw berekend worden — over de volle breedte
   haperde dat op telefoons.
   Na een terugpijl schuift élke kaart van links in, ook die van het
   startscherm of de werkplanning (die zelf geen terugpijl hebben): het
   uitschuiven van de vorige pagina wordt meestal afgebroken door het laden,
   dus dit is het deel van de overgang dat je echt ziet. */
.kaart:has(.terug-pijl){
  animation:klus-in-van-rechts .28s cubic-bezier(.2,.8,.2,1) both;
}
html.klus-terug-navigatie .kaart{
  animation:klus-in-van-links .28s cubic-bezier(.2,.8,.2,1) both;
}
/* Wegschuiven over de volle breedte, maar zonder glasvervaging (op de
   kaart zelf en op de glazen rijen en knoppen erin, die op een telefoon elk
   hun eigen vervaging hebben): die per frame opnieuw berekenen liet het
   haperen. In de beweging valt het verschil niet op. */
.kaart.klus-uit-animatie{
  animation:klus-uit-naar-rechts .22s cubic-bezier(.4,0,.9,.6) both;
  will-change:transform;
}
.kaart.klus-uit-animatie, .kaart.klus-uit-animatie *{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
@keyframes klus-in-van-rechts{ from{ opacity:0; transform:translateX(64px); } to{ opacity:1; transform:none; } }
@keyframes klus-in-van-links{ from{ opacity:0; transform:translateX(-64px); } to{ opacity:1; transform:none; } }
@keyframes klus-uit-naar-rechts{ from{ transform:none; } to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .kaart:has(.terug-pijl), html.klus-terug-navigatie .kaart,
  .kaart.klus-uit-animatie{ animation:none; }
}

/* ══════════ KLUSFORMULIER — RITME, ADRESSEN, BOTSING ══════════
   Het aanmaakformulier van een klus (templates/klussen/klus_form.html,
   static/js/klusformulier.js). Drie kleine dingen bovenop wat er al staat.

   1. .keuzepil.kies — de neutrale aan-stand van de keuzepillen. De pil zelf
      komt onveranderd van het aanwezigheidsscherm hierboven; daar hebben de
      standen elk hun eigen kleur (.ja groen, .nee koraal). "Aanleg" en
      "Onderhoud" zijn geen goed en fout maar twee gelijkwaardige keuzes, dus
      krijgen ze allebei dezelfde accentkleur als aan-stand.
   2. De rij bekende adressen gebruikt diezelfde .keuzes/.keuzepil, dus daar
      staat hier niets extra's voor.
   3. .klusbotsing-* — de melding dat er op deze opdrachtgever + dit adres al
      een klus staat. Bewust in de koraalkleur van een waarschuwing en niet in
      het rood van een fout: doorgaan is toegestaan, twee afspraken op één
      adres is een geldig geval. */
.keuzepil.kies input:checked + .vlak{
  background:rgba(var(--accent-rgb),0.32); border-color:rgba(var(--accent-rgb),0.6); color:var(--hi);
}

/* "Zichtbaar voor" (klussen/_zichtbaarvoor.html): een pil met het
   avatarrondje van de medewerker ervoor. Links minder ruimte, zodat het
   rondje net binnen de ronding van de pil valt. */
.keuzepil .vlak.met-bol{ gap:.5rem; padding-left:.35rem; }
.keuzepil .zv-bol{
  flex-shrink:0; width:26px; height:26px; border-radius:999px; border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#fff; letter-spacing:.02em;
}

#bekende-adressen[hidden], #klusbotsing[hidden]{ display:none; }

.klusbotsing-kaart{
  margin:1.1rem 0 0; padding:.9rem 1rem 1rem; border-radius:18px;
  background:rgba(224,123,95,0.13); border:1px solid rgba(224,123,95,0.38);
  display:grid; gap:.55rem;
}
.klusbotsing-kop{
  margin:0; font-size:12.5px; font-weight:600; color:#F6C7B6;
}
.klusbotsing-regel{
  display:flex; align-items:center; gap:.6rem; min-height:40px;
  padding:.5rem .75rem; border-radius:14px; text-decoration:none;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  font-size:13.5px; color:#fff;
}
@media (hover:hover){
  .klusbotsing-regel:hover{ background:rgba(255,255,255,0.13); border-color:rgba(255,255,255,0.3); }
}
.klusbotsing-regel .naam{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* de knop staat los onder de regels en hoeft niet de volle breedte */
.klusbotsing-kaart .knop-stil{ justify-self:start; }

/* ── Filterrij op de klussenlijst: twee gelijkwaardige groepen ──
   [ Alles | Eenmalig | Onderhoud ]  |  [ Alles | Actief | Afgerond ]

   Elke groep is één flex-kind van .keuzes met zijn eigen binnenkant. Daardoor
   breekt de rij op een telefoon tússen de groepen af en nooit middenin één
   groep — belangrijk, want allebei beginnen ze met "Alles" en die twee mogen
   niet naast elkaar op dezelfde regel eindigen.

   Het scheidingslijntje maakt van twee keer drie pillen twee assen in plaats
   van één lijst van zes. Onder 700px staan de groepen onder elkaar en zou dat
   lijntje als los streepje boven de tweede groep hangen, dus daar vervalt het. */
.keuzegroep{ display:flex; flex-wrap:wrap; gap:.4rem; }
.keuzegroep.tweede{
  margin-left:.9rem; padding-left:.9rem;
  /* zelfde sterkte als de rand van een invoerveld: zwakker dan dit valt het
     op deze achtergrond weg en doet het lijntje zijn werk niet */
  border-left:1px solid rgba(255,255,255,0.20);
}
@media (max-width:700px){
  .keuzegroep.tweede{ margin-left:0; padding-left:0; border-left:0; }
}

/* ══════════ TIJDELIJK: MEEKIJKEN ALS MEDEWERKER ══════════
   Zie medewerkers/views.py:wissel_naar. Weg vóór de oplevering. */
.wisselrij{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
.wisselknop{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  width:68px; padding:.45rem .2rem; background:none; border:0; border-radius:16px;
  color:#fff; font-family:'Inter',sans-serif; cursor:pointer;
}
@media (hover:hover){ .wisselknop:hover{ background:rgba(255,255,255,0.08); } }
.wisselnaam{
  font-size:12px; color:rgba(255,255,255,0.75); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wisselbalk{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  margin:0 0 1rem; padding:.55rem .6rem .55rem .9rem; border-radius:16px;
  background:rgba(var(--accent-rgb),0.16); border:1px solid rgba(var(--accent-rgb),0.45);
  font-size:13px; color:rgba(255,255,255,0.85);
}
.wisselbalk strong{ color:var(--hi); font-weight:600; }

/* ══════════ BESTAND-OVERLAY ══════════
   Dezelfde popup als voor foto's (dialog.foto-popup hierboven), nu ook voor
   documenten; zie klussen/_fotopopup.html. Een pdf krijgt op een computer
   de volle ruimte, want een A4 in 480px breed is niet te lezen. */
dialog.foto-popup:has(.foto-popup-pdf:not([hidden])){ max-width:min(92vw, 1000px); }
/* Een strook boven de pdf voor het sluitkruisje: bovenop de pdf zelf valt
   het over de knoppenbalk van de pdf-lezer van de browser. */
.foto-popup-afbeelding:has(.foto-popup-pdf:not([hidden])){ padding-top:3.2rem; }
.foto-popup-pdf{
  /* schermhoogte min kopstrook, titel en knoppen: zo past de kaart
     zonder eigen schuifbalk */
  display:block; width:100%; border:0; background:#fff;
  height:max(240px, calc(100vh - 17rem)); height:max(240px, calc(100dvh - 17rem));
}
.foto-popup-bestand{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  padding:3.2rem 1rem 2.2rem; color:rgba(255,255,255,0.6);
  background:rgba(0,0,0,0.2);
}
.foto-popup-bestand svg{ width:56px; height:56px; }
.foto-popup-extensie{ font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--hi); }
.foto-popup-openen{ margin-right:auto; }