:root{
  /* Typografie volgens het huisstijldocument (BOOT, V.1.01).
     De huisstijl schrijft Magistral Bold voor titels en Gravita HUM Light voor broodtekst voor, maar dat
     zijn Adobe Fonts: die mogen niet als fontbestand worden meegeleverd, vereisen een abonnement én
     internet, en werken helemaal niet in de PDF-generatie (WeasyPrint heeft echte fontbestanden nodig).
     Het document geeft zelf de regel voor precies dit soort toepassingen: "In e-mail en andere
     programma's, zoals Word, gebruiken we het standaard font Arial." Een intern werkprogramma valt daar
     onder — vandaar Arial, met Liberation Sans als metrisch identieke terugval op Linux (daar draait de
     PDF-generatie, en straks de hosting).
     Titels gebruiken Arial Bold (de rol van Magistral Bold), broodtekst Arial regular.

     Op het SCHERM staan de echte huisstijlletters nu vooraan in de stack: "magistral" en
     "gravita-hum-variable", de namen uit de Adobe Fonts-kit van de website. Ze worden alleen geladen als
     ADOBE_FONTS_KIT is gezet (zie _lettertypen.html); anders (of als Adobe ze niet levert) valt de browser
     vanzelf terug op Arial. PDF's gebruiken dit bestand niet en blijven Arial. Nergens anders staat een
     fontnaam: pas alleen deze twee regels aan. */
  --font-titel: "magistral", Arial, "Liberation Sans", Helvetica, sans-serif;
  --font-tekst: "gravita-hum-variable", Arial, "Liberation Sans", Helvetica, sans-serif;

  --navy:#19232A;
  --lightblue:#E6EDF0;
  --green:#B6BC46;
  --teal:#2C6F7A;
  --white:#FFFFFF;
  --grey:#8a97a0;
  /* Twee ronde en twee scherpe hoeken — het vormmotief uit de huisstijl. Twee dingen om niet te
     verliezen bij een aanpassing hier:
     1. Géén 999px op de ronde hoeken: die maakt de radius zo groot als de hoogte toelaat, waardoor
        knoppen en labels een uitgerekte, lensachtige vorm kregen.
     2. De scherpe hoeken op 0, dus echt recht. Ze stonden op 6px; dat kwam alleen als recht over
        doordat de andere hoeken 999px waren. Bij een kleinere ronding valt zo'n 4-6px meteen op als
        "ook rond" en is het motief weg.
     Pas dit hier aan, niet per component — alles verwijst naar deze token. */
  --radius-pill: 12px 0 12px 0;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font-tekst);
  background:var(--lightblue);
  color:var(--navy);
}
h1,h2,h3,h4,.brandfont{
  font-family:var(--font-titel);
  font-weight:700;
  color:var(--navy);
}
a{color:var(--teal); text-decoration:none;}
a:hover{text-decoration:underline;}

.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:240px; background:var(--navy); color:var(--white);
  display:flex; flex-direction:column; padding:24px 0; flex-shrink:0;
}
.sidebar .logo{padding:0 20px 20px 20px;}
.sidebar .logo-tekst{display:block; color:#E6EDF0; font-weight:700; font-size:18px; line-height:1.25;}
.sidebar .logo img{
  max-width:100%; height:auto; display:block;
}
.sidebar nav a{
  display:block; color:var(--lightblue); padding:10px 24px;
  font-family:var(--font-titel); font-weight:600; font-size:14.5px;
}
.sidebar nav a:hover, .sidebar nav a.active{
  background:rgba(255,255,255,0.08); text-decoration:none; color:var(--white);
  border-left:3px solid var(--green);
}
/* Secties in de navigatie (Werk/Financieel/Beheer/Overig) — voorheen één platte lijst van bijna
   20 losse links, wat niet meer overzichtelijk aanvoelde. Groeperen maakt in één oogopslag
   duidelijk waar iets bij hoort, zonder dat er functioneel iets verandert. */
.navgroep{margin-top:10px;}
.navgroep-label{
  font-family:var(--font-titel); font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(230,237,240,0.4); padding:10px 24px 4px 24px;
}
.sidebar .user-box{margin-top:auto; padding:16px 20px 0 20px; font-size:12.5px; color:var(--grey); border-top:1px solid rgba(255,255,255,.1);}
.sidebar .user-box a{color:var(--green);}

.main{flex:1; min-width:0; padding:32px 40px; max-width:1200px;}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px;}
.topbar h1{margin:0; font-size:26px;}
.breadcrumb{font-size:13px; color:var(--grey); margin-bottom:6px;}

.card{
  background:var(--white); border-radius:14px; padding:24px;
  box-shadow:0 1px 3px rgba(25,35,42,0.08); margin-bottom:24px;
}
.card h2, .card h3{margin-top:0;}

/* Actieknop = platte, gekleurde tekst — géén kader, vlak of schaduw meer, op geen enkele knop
   (2026-08-29, expliciet en herhaaldelijk gevraagd). Onderscheid tussen varianten zit nu puur in
   tekstkleur/gewicht, niet meer in vorm — dit werkt via deze ene basis-component overal in de app
   door, zonder dat elke template los aangepast hoeft te worden. */
.btn{
  display:inline-block; font-family:var(--font-titel); font-weight:600;
  padding:4px 2px; border:none; background:none; box-shadow:none;
  cursor:pointer; font-size:14px; text-decoration:none; color:var(--teal);
  transition:opacity .12s ease;
}
.btn:hover{text-decoration:underline;}
.btn-primary{color:var(--teal);}
.btn-outline{color:var(--navy);}
.btn-accent{color:#5c6321;}
.btn-dark{color:var(--navy); font-weight:700;}
.btn-sm{font-size:12px;}
.btn-danger{color:#b3413a;}

/* Knop in de stijl van de website — alleen voor de pagina's die een klant ziet (inloggen, akkoord geven,
   de scanpagina van een sticker). Binnen de app zelf blijven acties bewust platte tekst (zie .btn). Effen
   groen met donkere vetgedrukte tekst en 8px afronding, zoals "Quickscan aanvragen" op de site. */
.btn-site{
  display:inline-block; box-sizing:border-box; text-align:center; cursor:pointer;
  background:var(--green); color:var(--navy); border:1px solid var(--green); border-radius:8px;
  padding:12px 22px; font-family:var(--font-titel); font-weight:700; font-size:15px; text-decoration:none;
  transition:filter .12s ease;
}
.btn-site:hover{filter:brightness(.94); text-decoration:none;}
.btn-site-secundair{background:var(--lightblue); border-color:var(--lightblue);}

/* Subtiele tekst-link met knop-gedrag: voor acties zonder gevolg (een rij in-/uitklappen, naar een
   detail springen) — een echte <button> voor toetsenbord/focus, maar zonder knop-uiterlijk. Acties
   mét gevolg (verwijderen, activeren/deactiveren, opslaan) blijven een echte .btn-variant; alleen
   navigatie/weergave-acties worden hiermee "gewoon tekst". */
.link-actie{
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  color:var(--teal); font-family:var(--font-tekst); font-size:13.5px; font-weight:600;
  text-decoration:none;
}
.link-actie:hover{text-decoration:underline;}
.link-actie:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:2px;}

/* Aan/uit-schuifje (iOS/macOS-stijl) voor losse boolean-instellingen — bewust de klassieke volledig
   ronde vorm i.p.v. het --radius-pill huisstijlmotief: een schuifje is een universeel herkenbaar
   vorm-idioom, geen huisstijl-knop, en het motief zou hier juist verwarren. Gebruik dit alleen voor
   een op-zichzelf-staande aan/uit-instelling, niet voor het kiezen van meerdere uit een lijst (daar
   is .chip-toggle hierboven of een gewone checkboxlijst het juiste patroon). */
.switch{position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-weight:400;}
.switch input{position:absolute; opacity:0; width:0; height:0;}
.switch-track{
  position:relative; width:42px; height:24px; border-radius:999px; flex-shrink:0;
  background:#d5dbdd; transition:background-color .15s ease;
}
.switch-track::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--white); box-shadow:0 1px 2px rgba(25,35,42,.25); transition:transform .15s ease;
}
.switch input:checked + .switch-track{background:var(--teal);}
.switch input:checked + .switch-track::after{transform:translateX(18px);}
.switch input:focus-visible + .switch-track{outline:2px solid var(--teal); outline-offset:2px;}
.switch input:disabled + .switch-track{opacity:.5; cursor:not-allowed;}

/* Zachte "chip"-stijl i.p.v. een vol gevuld blok — een badge is statusinformatie, geen knop, en een
   verzadigde volle kleurvlek (het oude .badge-green/.badge-teal met var(--green)/var(--teal) als
   achtergrond) las juist als een knop. Elke variant: lichte kleurtint als achtergrond, verzadigde
   tekstkleur, geen rand — consistent met hoe .badge-amber/.badge-red al waren (die twee waren al
   een tint) i.p.v. een vlak. */
/* Nog verder versoberd (2026-08-29): ook de lichte tint-achtergrond oogde nog als "een vlak" — nu
   puur gekleurde tekst, geen vlak/rand meer, en nowrap zodat een korte statustekst nooit over
   meerdere regels breekt in een smalle kolom (was het geval op mobiel). */
.badge{
  display:inline-block; white-space:nowrap; background:none;
  font-size:11.5px; font-weight:700; font-family:var(--font-titel); letter-spacing:.01em;
}
.badge-green{color:#5c6321;}
.badge-teal{color:#1f5761;}
.badge-grey{color:#5b6b72;}
.badge-red{color:#96332b;}
.badge-amber{color:#8a5c11;}
.badge-open{color:#8a5c11;}
.badge-betaald{color:#5c6321;}
.badge-vervallen{color:#96332b;}
.badge-gecrediteerd{color:#5b6b72;}
.badge-oninbaar{color:#7a231b;}

/* Rij-acties-menu (bijv. facturenlijst): een tabelrij met veel mogelijke acties (PDF, betaling,
   creditnota, oninbaar, status wijzigen) werd al snel een rommelige rij losse knoppen, vooral op
   mobiel. Dit is een gewone <select> — de browser tekent en positioneert het keuzemenu zelf, dus
   geen eigen (foutgevoelige) positionerings-JS nodig en geen clipping-risico op mobiel. Kiezen van
   een optie voert de actie uit (zie novaActieUitvoeren in base.html) en springt daarna terug naar
   de placeholder-optie — het is een actiemenu, geen ingestelde waarde die zichtbaar moet blijven. */
.acties-cel{white-space:nowrap;}
.acties-select{
  width:auto; max-width:150px; padding:4px 8px; font-size:12.5px; font-weight:600;
  color:var(--teal); border-color:#d5dbdd;
}
.badge-geaccepteerd{color:#5c6321;}
.badge-afgewezen{color:#96332b;}
.badge-feedback{color:#8a5c11;}

.progress-bar{background:#dfe4e6; border-radius:var(--radius-pill); height:10px; overflow:hidden;}
.progress-bar-fill{background:var(--teal); height:100%;}
.stat-mini{display:flex; flex-direction:column; gap:4px; padding:14px 16px; background:var(--lightblue); border-radius:12px;}
.stat-mini .num{font-family:var(--font-titel); font-weight:700; font-size:22px; color:var(--navy);}
.stat-mini .label{font-size:12.5px; color:var(--grey);}

table{width:100%; border-collapse:collapse; font-size:14px;}
th{
  text-align:left; font-family:var(--font-titel); font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--grey);
  padding:10px 12px; border-bottom:2px solid var(--lightblue);
}
td{padding:12px; border-bottom:1px solid var(--lightblue); vertical-align:top;}
tr:hover td{background:#fafcfd;}
/* Geldbedragen mogen nooit tussen het €-teken en het bedrag afbreken — bij een net iets te smalle
   kolom (bijv. 6+ cijfers) sprong het bedrag anders onder het euroteken. */
.geld{white-space:nowrap;}

.form-group{margin-bottom:16px;}
label{display:block; font-family:var(--font-titel); font-weight:600; font-size:13px; margin-bottom:5px;}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=url], input[type=tel],
select, textarea{
  width:100%; padding:10px 12px; border:1.5px solid #d5dbdd; border-radius:8px;
  font-family:var(--font-tekst); font-size:14px; background:white;
}
textarea{min-height:80px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
/* Voor de "Voortgang"-kaart op de projectpagina: de financiële kolom heeft veel meer inhoud
   (5-8 regels) dan de conditie-/uren-kolommen ernaast (1-5 regels) — een gelijke .grid-3-verdeling
   perste die financiële cijfers daardoor in een te smalle kolom. Krijgt bewust meer breedte. */
.grid-voortgang{display:grid; grid-template-columns:1fr 1.6fr; gap:16px;}

.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  background:#E6EDF0; border:1.5px solid #d5dbdd; border-radius:999px; padding:8px 14px;
  font-family:var(--font-tekst); font-size:13px; cursor:pointer; color:var(--navy, #19232A);
  text-align:left; line-height:1.3; max-width:100%;
}
.chip:hover{border-color:#2C6F7A;}
.chip.chip-toegepast{background:#B6BC46; border-color:#B6BC46; color:white; cursor:default;}

/* Checkbox-gedreven pilletjes (bijv. categoriefilter bij documenten genereren) — echte checkbox
   blijft functioneel/toegankelijk maar visueel verborgen, de span ernaast oogt als klikbare chip. */
.chip-toggle{display:inline-block;}
.chip-toggle input{position:absolute; opacity:0; width:0; height:0;}
.chip-toggle span{
  display:inline-block; background:#E6EDF0; border:1.5px solid #d5dbdd; border-radius:999px;
  padding:6px 14px; font-size:12.5px; cursor:pointer; color:var(--navy, #19232A);
}
.chip-toggle input:checked + span{background:var(--teal); border-color:var(--teal); color:white;}
.chip-toggle input:focus-visible + span{outline:2px solid var(--teal); outline-offset:2px;}

/* iOS-achtige segmented control: voor een 2-3-optionele EXCLUSIEVE keuze (radio-knoppen) die als
   een doorlopende knoppenrij moet ogen i.p.v. losse radiobolletjes onder elkaar — bijv. "Bestaande
   klant"/"Nog geen klant". Anders dan .chip-toggle hierboven (losse pilletjes, voor een filter
   waarbij je er meerdere tegelijk kunt aanvinken) is dit één doorlopende afgeronde baan met de
   geselecteerde optie als eigen wit "kaartje" erin — voor een exclusieve keuze, niet voor meerdere. */
.segmented{display:flex; background:var(--lightblue); border-radius:10px; padding:3px; gap:2px;}
.segmented .segment{flex:1; position:relative; cursor:pointer;}
.segmented .segment input{position:absolute; opacity:0; width:0; height:0;}
.segmented .segment span{
  display:flex; align-items:center; justify-content:center; text-align:center; height:100%;
  padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:500; line-height:1.3;
  color:var(--grey); transition:background-color .15s ease, color .15s ease;
}
.segmented .segment input:checked + span{background:var(--white); color:var(--navy); box-shadow:0 1px 3px rgba(25,35,42,.15);}
.segmented .segment input:focus-visible + span{outline:2px solid var(--teal); outline-offset:2px;}
.segmented .segment input:disabled + span{opacity:.5; cursor:not-allowed;}

/* Documenten-genereren: elke documentsoort een eigen nette rij i.p.v. alles op één regel. */
.doc-genereer-rij{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0;
  border-bottom:1px solid #E6EDF0;
}
.doc-genereer-rij:last-child{border-bottom:none;}
.doc-genereer-rij .doc-naam{min-width:170px; font-weight:600;}
.doc-genereer-rij .doc-opties{display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:1;}

/* auto-fit i.p.v. een vast aantal kolommen: past zich aan het aantal kaarten én de schermbreedte aan
   zonder dat de template de kolombreedte per rol/aantal moet berekenen (dat gaf eerder een inline
   style die de @media-aanpassingen hieronder blokkeerde, zie max-width:480px). */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:18px; margin-bottom:28px;}
.stat-card{
  background:var(--navy); color:white; border-radius:14px; padding:20px;
  position:relative; overflow:hidden;
  display:block; text-decoration:none;
}
.stat-card[href]{cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;}
.stat-card[href]:hover, .stat-card[href]:focus-visible{
  transform:translateY(-2px); box-shadow:0 6px 16px rgba(10,14,17,.22);
}
.stat-card .num{font-family:var(--font-titel); font-size:32px; font-weight:700;}
.stat-card .label{font-size:12.5px; color:var(--lightblue); opacity:.85;}
.stat-card.accent{background:var(--teal);}
.stat-card.green{background:var(--green); color:var(--navy);}
.stat-card.green .label{color:var(--navy); opacity:.7;}

.ai-advies{
  margin-top:10px; padding:12px 14px; background:#eef3ea; border-left:4px solid var(--green);
  border-radius:8px; font-size:13.5px;
}
.ai-advies ul{font-size:13.5px;}

@keyframes item-flash-anim{
  0%{box-shadow:0 0 0 4px rgba(44,111,122,.55);}
  100%{box-shadow:0 0 0 0 rgba(44,111,122,0);}
}
.item-flash{animation:item-flash-anim 1.4s ease-out;}

/* Zelfde reden als bij .badge: puur gekleurde tekst, geen vlak — en nowrap zodat een code als
   "NOVA-2026-014" nooit in een smalle kolom over meerdere regels breekt. */
.pill-tag{
  display:inline-block; white-space:nowrap; background:none; color:#5c6321;
  font-size:11.5px; font-weight:700; font-family:var(--font-titel);
}

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--navy);
}
.login-box{background:white; padding:40px; border-radius:16px; width:380px; text-align:center;}
.login-box img{max-width:180px; margin-bottom:20px;}

.item-row{border:1.5px solid var(--lightblue); border-radius:12px; padding:16px; margin-bottom:14px;}
/* Sinds 2026-08-16 staan alle voorzieningen met een plattegrond-pin ook gewoon onder elkaar (net als
   .item-row hierboven) i.p.v. één-voor-één achter een klik verstopt — anders leek het of de foto's
   los van hun voorziening stonden. */
.werkbon-detail-item{border:1.5px solid var(--lightblue); border-radius:12px; padding:16px; margin-bottom:14px;}
/* Niet meer gescoped op .item-row (2026-08-16) — .thumb wordt ook gebruikt buiten die wrapper
   (bijv. de plattegrond-detailkaart), en moest daar altijd al klein zijn, niet alleen daarbinnen. */
.thumb{width:64px; height:64px; object-fit:cover; border-radius:8px; margin-right:8px; cursor:zoom-in;}
.foto-lightbox{display:none; position:fixed; inset:0; background:rgba(10,14,17,.88); z-index:2000;
  align-items:center; justify-content:center; padding:24px; cursor:zoom-out;}
.foto-lightbox.open{display:flex;}
.foto-lightbox img{max-width:92vw; max-height:92vh; border-radius:8px; box-shadow:0 8px 32px rgba(0,0,0,.4);}
.thumb-tile{display:inline-block; margin-right:8px; margin-bottom:6px; vertical-align:top; text-align:center;}
.thumb-tile .thumb{margin-right:0; display:block;}
.flash{background:#dcefe0; border-left:4px solid var(--green); padding:12px 16px; border-radius:8px; margin-bottom:20px; font-size:14px;}
.flash-error{background:#f6dcd9; border-left-color:#b3413a;}

.sig-pad{border:1.5px dashed #c3ccce; border-radius:10px; background:white; touch-action:none;}

.doc-actions{display:flex; gap:10px; flex-wrap:wrap;}
.muted{color:var(--grey); font-size:13px;}
hr{border:none; border-top:1px solid var(--lightblue); margin:20px 0;}

/* Materiaal-zoekveld (materiaalzoeker.js) — hergebruikt bij materiaalgebruik op een opname,
   bij het materiaal van een voorziening en in de regels van een factuurconcept. */
.mz-wrap{position:relative;}
.mz-resultaten{
  display:none; position:absolute; z-index:20; left:0; right:0; top:100%; margin-top:4px;
  background:white; border:1.5px solid var(--lightblue); border-radius:10px; overflow:hidden;
  box-shadow:0 10px 24px rgba(25,35,42,.12); max-height:280px; overflow-y:auto;
}
.mz-treffer{
  display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%;
  padding:10px 14px; border:none; background:white; text-align:left; cursor:pointer;
  font-family:inherit; font-size:14px; color:var(--navy); border-bottom:1px solid #eef2f3;
}
.mz-treffer:last-child{border-bottom:none;}
.mz-treffer:hover{background:#f2f7f8;}
.mz-treffer-meta{color:var(--grey); font-size:12px; white-space:nowrap;}
.mz-keuze{display:none; margin-top:10px; padding:12px 14px; background:#f2f7f8; border-radius:10px;}
.mz-gekozen{font-weight:600; color:var(--navy); font-size:14px;}
.mz-eenheid{color:var(--grey); font-size:12px; margin-top:2px;}
.mz-sublabel{color:var(--grey); font-size:12px; margin:10px 0 6px 0;}
.mz-varianten{display:flex; gap:8px; flex-wrap:wrap;}
.mz-variant{
  padding:7px 14px; border:1.5px solid var(--lightblue); border-radius:20px; background:white;
  cursor:pointer; font-family:inherit; font-size:13px; color:var(--navy);
}
.mz-variant:hover{border-color:var(--teal);}
.mz-variant.actief{background:var(--teal); border-color:var(--teal); color:white; font-weight:600;}

/* Plattegrond-viewer (plattegrondviewer.js) — zoomen/schuiven op een bouwtekening.
   De viewport scrollt; de binnenlaag wordt breder gemaakt om te zoomen. Markeringen staan op een
   percentage-positie in die laag en houden daardoor hun eigen pixelgrootte bij elke zoomstand. */
.pg-viewport{
  position:relative; overflow:auto; max-width:100%;
  max-height:70vh; background:#fbfcfc;
  border:1px solid #E6EDF0; border-radius:8px;
  cursor:grab; overscroll-behavior:contain;
}
.pg-viewport.pg-sleept{cursor:grabbing;}
.pg-viewport.pg-ingezoomd{cursor:grab;}
.pg-vlak{position:relative; width:100%; line-height:0;}
.pg-vlak img{width:100%; display:block; border-radius:0;}
/* Bij het plaatsen van een nieuwe pin moet de tekening een kruisdraad tonen i.p.v. een sleep-hand */
.pg-viewport.pg-klikbaar .pg-vlak img{cursor:crosshair;}
.pg-balk{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px;}
.pg-balk .pg-zoomstand{font-size:12px; color:var(--grey); min-width:44px;}
/* Markering = kruisdraad met een stip in het midden, exact gecentreerd op de coördinaat.
   Bewust géén druppel-/ballonvorm: die is langwerpig, waardoor onduidelijk is wélk punt van de vorm
   de voorziening aanduidt. Bij een ring met middenstip is het midden onmiskenbaar de plek, en de vorm
   is symmetrisch — dus geen "begin" of "eind" en geen richting waar je naar moet zoeken. De dubbele
   witte rand houdt 'm leesbaar op een drukke bouwtekening vol lijnen. */
.pg-pin{
  position:absolute; text-decoration:none; z-index:2;
  transform:translate(-50%,-50%);
  /* Groter dan de zichtbare stip (die blijft 15px via de span erbinnen) — anders is een markering
     op een telefoon nauwelijks precies te raken en klik je op de tekening ernaast. */
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
}
.pg-pin span{
  display:block; position:relative; width:15px; height:15px; border-radius:50%;
  background:transparent; border:3px solid var(--pin-kleur, #19232A);
  box-shadow:0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.45); cursor:pointer;
}
.pg-pin span::after{
  content:""; position:absolute; left:50%; top:50%;
  width:4px; height:4px; border-radius:50%;
  background:var(--pin-kleur, #19232A);
  box-shadow:0 0 0 1.5px #fff;
  transform:translate(-50%,-50%);
}
/* Even oplichten wanneer je vanuit een lijst naar een markering springt */
.pg-pin.pg-gemarkeerd span{outline:3px solid rgba(44,111,122,.55); outline-offset:3px;}
/* De nog niet opgeslagen markering tijdens het plaatsen van een nieuwe voorziening */
.pg-pin-nieuw{--pin-kleur:#19232A;}
.pg-pin-nieuw span{animation:pg-klop 1.2s ease-in-out infinite;}
@keyframes pg-klop{50%{transform:scale(1.25);}}
/* Openstaande melding (defect gemeld via de sticker-scan) — een rode ring eromheen, zodat het
   opvalt tussen de andere markeringen zonder de conditie-kleur zelf te overschrijven. */
.pg-pin-melding span::before{
  content:""; position:absolute; left:50%; top:50%; width:23px; height:23px; margin:-11.5px 0 0 -11.5px;
  border-radius:50%; border:2px solid #b3413a; animation:pg-melding-puls 1.6s ease-in-out infinite;
}
@keyframes pg-melding-puls{0%,100%{opacity:1;} 50%{opacity:.3;}}

/* Plus/min-teller bij materiaalregels (materiaalregels.js). Tikvlak blijft 30x30px (al onder de
   aanbevolen 44px-minimum voor een telefoon, dus niet kleiner) — alleen visueel lichter gemaakt:
   dunnere/lichtere rand, minder dik lettergewicht, zodat het minder blokkerig oogt. */
.mr-teller{display:inline-flex; align-items:center; gap:0; vertical-align:middle;}
.mr-teller button{
  width:30px; height:30px; padding:0; line-height:1; font-size:15px; font-weight:600;
  border:1px solid #e5e9ea; background:white; color:var(--navy); cursor:pointer;
  font-family:inherit;
}
.mr-teller button:first-child{border-radius:8px 0 0 8px;}
.mr-teller button:last-child{border-radius:0 8px 8px 0;}
.mr-teller button:hover{background:#f2f7f8; border-color:var(--teal);}
.mr-teller input{
  width:62px; height:30px; margin:0; text-align:center; border-radius:0;
  border:1px solid #e5e9ea; border-left:none; border-right:none; padding:0 4px; font-weight:400;
}
.mr-regel{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 0; border-bottom:1px solid #EEF2F3;
}
/* Los van de teller, helemaal rechts in de rij — anders zit 'm vlak naast de +/- knoppen en druk je
   'm per ongeluk in bij het aanpassen van een aantal. */
.mr-regel .mr-verwijderen{margin-left:auto;}
.mr-regel:last-of-type{border-bottom:none;}
.mr-regel .mr-naam{flex:1; min-width:180px;}
.mr-melding{color:#b3413a; font-size:12px;}
.mr-blok{background:#F7F9FA; border-radius:10px; padding:14px; margin-top:10px;}

/* Mobiel: de sidebar was een vaste 240px flex-kolom zonder enige media-aanpassing, waardoor de hele
   pagina op een telefoonscherm breder dan het viewport werd (horizontaal scrollen). Op mobiel wordt de
   sidebar daarom een off-canvas menu (vast, verschoven buiten beeld) dat via een hamburger-knop als
   overlay inschuift, zodat .main altijd de volle, echte schermbreedte heeft. */
.mobiel-menu-knop{
  display:none; position:fixed; top:14px; left:14px; z-index:1001; width:42px; height:42px;
  border-radius:10px; background:var(--navy); color:white; border:none; font-size:20px;
  align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sidebar-overlay{display:none;}
/* Terugknop naast de menuknop (zie app-mobiel.js); in een losse app op het beginscherm is er geen browserbalk met terugknop. */
.mobiel-terug-knop{
  display:none; position:fixed; top:14px; left:64px; z-index:1001; width:42px; height:42px;
  border-radius:10px; background:var(--navy); color:white; border:none; font-size:22px;
  align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.mobiel-terug-knop.zonder-menu{left:14px;}
/* Planning: op een computer zeven kolommen naast elkaar (de week), op een telefoon de dagen onder elkaar. */
.week-balk{margin-bottom:14px; gap:10px; flex-wrap:wrap;}
.week-knoppen{display:flex; gap:6px; flex-wrap:wrap;}
.week-raster{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:10px;}
.week-dag{border:1px solid #E6EDF0; border-radius:8px; padding:10px; min-height:160px; min-width:0;}
.week-dag.vandaag{background:#F7F9EE;}
.week-dag-kop{display:flex; flex-direction:column; gap:2px;}
.week-niets{display:none; font-size:13px;}
@media (max-width: 900px){
  .week-raster{grid-template-columns:1fr; gap:8px;}
  .week-dag{min-height:0; padding:10px 12px;}
  .week-dag-kop{flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 10px;}
  .week-dag.leeg{background:transparent; padding:8px 12px;}
  .week-dag.leeg .week-niets{display:inline;}
  .week-dag.leeg strong{font-weight:600;}
}
@media (max-width:768px){ body[data-terug-knop]{padding-top:68px !important;} }
@media print{ .mobiel-terug-knop, .nova-download-balk{display:none !important;} }
/* Melding onderaan bij het ophalen van een bestand (pdf, export, back-up). */
.nova-download-balk{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:2000;
  background:var(--navy); color:white; border-radius:12px; padding:12px 14px; box-shadow:0 4px 16px rgba(0,0,0,.35);
  display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; font-size:14px;
}
.nova-download-balk span{flex:1 1 100%; word-break:break-word;}
.nova-download-balk button{
  background:rgba(255,255,255,.14); color:white; border:1px solid rgba(255,255,255,.35); border-radius:8px;
  padding:9px 14px; font-size:14px; cursor:pointer;
}
.nova-download-balk button:first-of-type{background:white; color:var(--navy); border-color:white; font-weight:600;}
@media (max-width: 768px){
  .mobiel-menu-knop{display:flex;}
  .mobiel-terug-knop{display:flex;}
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:1000; width:260px;
    transform:translateX(-100%); transition:transform .2s ease; padding-top:64px;
    /* Zonder dit scrolt een sleepgebaar op de sidebar door naar de pagina erachter zodra het menu
       hoger is dan het scherm (fixed elementen scrollen zichzelf niet automatisch mee). */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    /* 100vh op mobiel Safari telt de adresbalk mee die in staande stand zichtbaar is, waardoor het
       onderste deel (Uitloggen) buiten het echte, tikbare scherm valt — pas in liggende stand (waar
       die balk kleiner is) was het wel bereikbaar. 100dvh volgt de werkelijk zichtbare hoogte. */
    height:100dvh;
  }
  .app-shell.sidebar-open .sidebar{transform:translateX(0);}
  .app-shell.sidebar-open .sidebar-overlay{
    display:block; position:fixed; inset:0; background:rgba(10,14,17,.55); z-index:999;
  }
  /* De pagina erachter mag niet meescrollen terwijl het menu open staat. */
  body.sidebar-open{overflow:hidden;}
  .main{max-width:100%; padding:64px 16px 24px 16px;}
  /* De pagina zelf wordt op een telefoon nooit breder dan het scherm: iets breeds (een tabel, een formulierveld) schuift binnen
     zijn eigen kaart in plaats van de hele pagina uit het beeld te trekken. */
  html, body{overflow-x:hidden; max-width:100%;}
  .grid-2 > *, .grid-3 > *{min-width:0;}
  .main input, .main select, .main textarea{max-width:100%;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .grid-3, .grid-voortgang{grid-template-columns:1fr;}
  .card{overflow-x:auto;}
  /* Zoom-knoppen (−/+/Passend) zijn op een telefoon overbodig — pinch-zoom (zie
     plattegrondviewer.js) doet hetzelfde met een natuurlijker gebaar. */
  .pg-balk{display:none;}
  /* De "Versturen naar"-select in elke documenten-rij staat bewust op width:auto (past zich op
     desktop netjes aan de langste optietekst aan), maar die optietekst is vaak een volledig
     e-mailadres — op een telefoon werd de select daardoor breder dan het scherm en trok hij de hele
     rij (en daarmee de kaart) mee. Rij wordt op mobiel een kolom en de velden erin vullen die kolom. */
  .doc-genereer-rij{flex-direction:column; align-items:stretch;}
  .doc-opties select, .doc-opties input[type="text"]{width:100% !important;}
}
@media (max-width: 480px){
  .stat-grid, .grid-2{grid-template-columns:1fr;}
}

/* Plattegrond: volledig scherm + hover-infobalk (zie plattegrondviewer.js).
   100dvw/100dvh i.p.v. 100vw/100vh (2026-08-29) — zelfde reden als bij .sidebar hierboven: 100vh
   telt op mobiel de (soms zichtbare) adresbalk mee, waardoor de dialoog groter werd berekend dan het
   echte, tikbare scherm. Het gevolg: de binnenste .pg-viewport (via flex:1) kreeg een hoogte die niet
   overeenkwam met wat er werkelijk op het scherm paste, waardoor slepen/scrollen binnenin leek vast
   te zitten. */
.pg-fullscreen-dialog{
  border:none; padding:0; width:100dvw; height:100dvh; max-width:100dvw; max-height:100dvh;
  background:var(--navy); margin:0;
}
.pg-fullscreen-dialog::backdrop{background:rgba(10,14,17,.92);}
.pg-fullscreen-body{
  width:100%; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:56px 16px 16px 16px;
}
/* De verplaatste cluster (.pg-cluster, zie plattegrondviewer.js) is de daadwerkelijke flex-kind van
   .pg-fullscreen-body — .pg-viewport zit daar nog een laag onder. flex:1 op .pg-viewport zelf had
   dus geen enkel effect (flex geldt alleen voor een direct flex-kind): de plattegrond kreeg geen
   begrensde hoogte en groeide bij inzoomen gewoon door voorbij het scherm, zonder dat er iets
   scrollbaar werd — vandaar "vergroot maar kan niet scrollen". Nu is .pg-cluster zelf ook een
   kolom-flexcontainer, zodat .pg-viewport daarbinnen wél normaal kan meekrimpen/scrollen. */
.pg-fullscreen-body .pg-cluster{
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto; width:100%;
}
.pg-fullscreen-body .pg-viewport{
  max-height:none; flex:1 1 auto; min-height:0; -webkit-overflow-scrolling:touch;
}
.pg-fullscreen-body .pg-balk, .pg-fullscreen-body .pg-zoomstand{color:var(--white);}
.pg-fullscreen-close{
  position:absolute; top:14px; right:14px; z-index:20; width:42px; height:42px; border-radius:999px;
  background:var(--white); color:var(--navy); border:none; font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.3);
}
/* Twee uitlegteksten boven de plattegrond, elk voor het apparaat waar 'm daadwerkelijk klopt: op
   een precieze muis/trackpad plaatst een klik meteen een markering (zie het klik-gedrag hierboven
   in opname_detail.html), op een aanraakscherm opent een tik eerst groot om precisie te houden. */
.pg-hint-muis{display:none;}
@media (hover: hover) and (pointer: fine){
  .pg-hint-touch{display:none;}
  .pg-hint-muis{display:block;}
}
.pg-hover-info{
  position:fixed; z-index:2000; display:none; background:var(--navy); color:white;
  padding:8px 12px; border-radius:10px; font-size:12.5px; max-width:240px; pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}