/* 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%;
}
/* 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);
}

.kaart{
  border-radius:28px; padding:1.8rem 2rem 2.2rem;
  width:100%; max-width:640px;
}
/* de weekkalender is 700px breed; die krijgt een ruimere kaart */
.kaart.breed{ max-width:1180px; }

/* ══════════ 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; }
/* 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; }
/* 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;
    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;
}

/* Eén <select> i.p.v. drie knoppen naast elkaar: de browser geeft de native
   platformkeuzelijst (wieltje op iOS, dropdown op Android) er gratis bij —
   geen eigen JS-menu om open/dicht/toetsenbord/focus voor te bouwen. De
   pijl staat los achter het (doorzichtige) select-element, met
   pointer-events:none zodat een tik er dwars doorheen bij het select komt. */
.weergave-kiezer{ position:relative; flex-shrink:0; }
.weergave-kiezer select{
  width:auto; margin:0; padding:.4rem 1.8rem .4rem .85rem; font-size:12.5px; font-weight:600;
  border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  color:#fff; cursor:pointer;
}
.weergave-kiezer svg{
  position:absolute; top:50%; right:.6rem; transform:translateY(-50%);
  width:13px; height:13px; color:rgba(255,255,255,0.6); pointer-events:none;
}

/* ══════════ 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;
}
.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;
}
.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:9.5px; 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);
}

.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; }

/* 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); }

/* 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; }
.gegeven input[type=color]:disabled{ width:44px; padding:0; border:1px solid rgba(255,255,255,0.2); }

/* 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; }
.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 .3rem; }
.sheet-kop .dialog-sluiten{ position:relative; }
/* 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 forceer_document) 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;
}

/* 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); }

/* 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; }
.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); }
.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);
}

.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. */
.bord{ display:grid; grid-template-columns:132px repeat(7, minmax(142px,1fr)); min-width:1126px; }

.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);
  box-shadow:14px 0 18px -14px rgba(0,0,0,0.75);
}
.bord-hoek{
  position:sticky; left:0; z-index:4;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.125), rgba(255,255,255,0.05)),
    linear-gradient(160deg, #20211C, #282C21);
}
/* 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; }
.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); }
.bord-naam .week{
  font-size:10.5px; color:var(--hi); font-variant-numeric:tabular-nums; margin-top:.2rem;
}
/* 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{
  min-height:58px; 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; }

.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{ background:none; text-align:center; }
.bord-voet .dagtotaal{ font-size:11px; color:var(--hi); 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; }

/* ══════════ AANWEZIGHEID ══════════
   Eén rij per medewerker, op een telefoon onder elkaar: naam, dan de drie
   standen, dan de opmerking. Drie en niet twee — "nog niet ingevuld" is iets
   anders dan "afwezig", en die rij staat daarom gedimd tot er iets gekozen is.

   De keuzeknoppen zijn radio's in een label: de radio 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. */
.aanwezigheidslijst{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.aanwezig-rij{
  border-radius:18px; padding:.85rem 1rem;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  display:grid; gap:.55rem;
}
.aanwezig-rij.onbekend{ background:rgba(255,255,255,0.035); border-color:rgba(255,255,255,0.10); }
.aanwezig-rij .wie{
  font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:.6rem;
}
.aanwezig-rij.onbekend .wie{ color:rgba(255,255,255,0.6); font-weight:500; }
/* Zelfde avatarrondje als bij de medewerkerslijst en de gewerkte uren
   (initialen op de eigen/palet-kleur van de medewerker). */
.aanwezig-rij .aw-bol{
  flex-shrink:0; 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;
}
.aanwezig-rij.onbekend .aw-bol{ opacity:.55; }
.aanwezig-rij .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);
}

.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; }

.opmerkingveld{ font-size:13.5px; padding:.6rem .85rem; }

/* leesweergave voor een medewerker: dezelfde standen, zonder knoppen */
.aanwezig-rij .stand{
  justify-self:start; padding:.3rem .8rem; border-radius:999px;
  font-size:11.5px; font-weight:600;
}
.aanwezig-rij .stand.ja{
  background:rgba(var(--accent-rgb),0.22); border:1px solid rgba(var(--accent-rgb),0.45); color:var(--hi);
}
.aanwezig-rij .stand.nee{
  background:rgba(224,123,95,0.22); border:1px solid rgba(224,123,95,0.48); color:#F6C7B6;
}
.aanwezig-rij .stand.onbekend{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.55);
}
.aanwezig-rij .opmerking{ font-size:12.5px; color:rgba(255,255,255,0.7); }

/* ══════════ 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, speelt de uitschuifanimatie af en navigeert pas daarna —
     zelfde "animeer, wacht op transitionend, dan pas de echte actie"-opzet
     als static/js/bottomsheet.js.
   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. */
.kaart:has(.terug-pijl){
  animation:klus-in-van-rechts .32s cubic-bezier(.32,.72,0,1) both;
}
html.klus-terug-navigatie .kaart:has(.terug-pijl){
  animation:klus-in-van-links .32s cubic-bezier(.32,.72,0,1) both;
}
.kaart.klus-uit-animatie{
  animation:klus-uit-naar-rechts .26s cubic-bezier(.32,.72,0,1) both;
}
@keyframes klus-in-van-rechts{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
@keyframes klus-in-van-links{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
@keyframes klus-uit-naar-rechts{ from{ transform:translateX(0); } to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .kaart:has(.terug-pijl), html.klus-terug-navigatie .kaart:has(.terug-pijl),
  .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). "Eenmalig" 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);
}

#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; }
}