/* ============================================================================
   keuringtool/app.css — app-specifieke stijl (Blok KT-1)
   Startscherm "Wat wil je doen?", werkstroom-kaarten, gids-overlay, statusstrip.
   Bouwt voort op shared/theme.css.
   ============================================================================ */

/* ── Views (navigatie) ───────────────────────────────────────────────────── */
.view[hidden]{display:none;}

/* ── Home-hero ───────────────────────────────────────────────────────────── */
.home-hero{text-align:center;padding:14px 0 20px;}
.home-h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;letter-spacing:.01em;line-height:1;}
.home-sub{font-size:13px;color:var(--muted);margin-top:6px;}

/* ── Werkstroom-kaarten ──────────────────────────────────────────────────── */
.wf-card{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,#1f2735,#1a212c);
  border:1px solid var(--border-2);border-left:4px solid var(--red);border-radius:var(--radius);
  padding:18px 16px;margin-bottom:12px;box-shadow:0 3px 14px rgba(0,0,0,.3);
  transition:transform .06s,border-color .15s,box-shadow .15s;
}
.wf-card:hover{border-left-color:var(--red-accent);box-shadow:0 6px 20px rgba(0,0,0,.4);}
.wf-card:active{transform:translateY(1px);}
.wf-ic{font-size:30px;flex-shrink:0;width:44px;text-align:center;}
.wf-tx{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
.wf-tx b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;color:var(--text);}
.wf-tx small{font-size:12px;color:var(--muted);line-height:1.3;}
.wf-arr{font-size:26px;color:var(--muted);flex-shrink:0;line-height:1;}

/* ── "Zo werkt het" ──────────────────────────────────────────────────────── */
.home-help{
  display:block;width:100%;cursor:pointer;margin:2px 0 14px;padding:14px;
  background:rgba(47,129,201,.12);border:1px solid var(--blue);color:#7fc0ff;border-radius:11px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.02em;
}
.home-help:hover{background:rgba(47,129,201,.2);}

/* ── Statusstrip ─────────────────────────────────────────────────────────── */
.status-strip{
  background:#141b26;border:1px solid var(--border-2);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:4px;
}
.status-strip .ss-row{padding:1px 0;}
.status-strip b{color:var(--text);}
.status-strip .ss-warn{color:#f9a03f;}
.status-strip .ss-ok{color:var(--green-bright);}

/* ── "Komt eraan"-placeholders ───────────────────────────────────────────── */
.soon-card{
  text-align:center;padding:44px 20px;color:var(--muted);
  background:linear-gradient(180deg,#1f2735,#1a212c);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-card);
}
.soon-ic{display:block;font-size:44px;margin-bottom:10px;}
.soon-card b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;color:var(--text);display:block;margin-bottom:6px;}
.soon-card p{font-size:13px;max-width:340px;margin:0 auto;line-height:1.5;}

/* ── Gids-overlay ────────────────────────────────────────────────────────── */
#gidsModal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:10000;display:flex;align-items:flex-end;justify-content:center;}
.gids-card{background:var(--card);border-top:3px solid var(--red);border-radius:16px 16px 0 0;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;padding:18px 18px 26px;box-shadow:0 -8px 30px rgba(0,0,0,.5);}
@media(min-width:600px){#gidsModal{align-items:center;}.gids-card{border-radius:16px;border-top:none;border-left:3px solid var(--red);}}
.gids-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:2px;}
.gids-top>span{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;line-height:1.1;}
.gids-x{background:transparent;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;flex-shrink:0;}
.gids-sub{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:8px 0 10px;}
.gids-step{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px;line-height:1.4;}
.gids-step:last-of-type{border-bottom:none;}
.gs-n{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.gids-sc{display:block;width:100%;text-align:left;background:var(--card-2);border:1px solid var(--border-2);color:var(--text);border-radius:10px;padding:12px 14px;margin-bottom:8px;font-size:14px;cursor:pointer;font-family:inherit;}
.gids-sc>span{float:right;color:var(--muted);}
.gids-go{display:block;width:100%;background:linear-gradient(90deg,var(--red),var(--red-accent));border:none;color:#fff;border-radius:11px;padding:15px;margin-top:16px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;cursor:pointer;letter-spacing:.02em;}
.gids-back{display:block;width:100%;background:transparent;border:none;color:var(--muted);padding:12px;margin-top:6px;font-size:13px;cursor:pointer;font-family:inherit;}

/* ══ LIJST (Blok KT-2) ══════════════════════════════════════════════════════ */
/* Zoekbalk */
.search{width:100%;background:var(--inp);border:1px solid var(--border-2);border-radius:var(--radius-sm);
  color:var(--text);font-size:15px;padding:11px 12px;outline:none;margin-bottom:10px;transition:border-color var(--dur),box-shadow var(--dur);}
.search:focus{border-color:var(--red-accent);box-shadow:0 0 0 3px var(--red-glow);}

/* Statusfilter-knoppen */
.fbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.fbtn{padding:8px 12px;border-radius:var(--radius-pill);border:1px solid var(--border-2);background:#161c26;color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:all var(--dur);}
.fbtn:hover{color:var(--text);}
.fbtn.active{background:rgba(227,91,76,.14);border-color:var(--red-accent);color:var(--red-soft);}

/* Mappenpad (crumb) */
.crumbbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-family:'Barlow Condensed',sans-serif;font-size:14px;margin-bottom:12px;}
.crumb{cursor:pointer;font-weight:700;padding:4px 10px;border-radius:8px;background:var(--card-2);color:#cfd6de;}
.crumb.active{background:transparent;color:var(--red-accent);cursor:default;}
.crumbsep{color:var(--muted-2);}

/* Mapkaart */
.folder{background:linear-gradient(180deg,#1f2735,#1a212c);border:1px solid var(--border);border-left:3px solid var(--red);
  border-radius:11px;padding:13px 15px;margin-bottom:10px;cursor:pointer;transition:background .12s,border-color .15s;}
.folder:hover{background:var(--card-2);border-left-color:var(--red-accent);}
.fld-top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.fld-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;color:#fff;}
.fld-cnt{font-size:14px;color:var(--muted);white-space:nowrap;font-weight:600;}
.fld-chips{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;}
.fchip{font-size:11px;font-weight:800;font-family:'Barlow Condensed',sans-serif;padding:3px 10px;border-radius:20px;letter-spacing:.02em;}
.fchip.ok{background:rgba(15,157,88,.18);color:var(--green-bright);}
.fchip.rep{background:rgba(249,115,22,.18);color:var(--orange);}
.fchip.nok{background:rgba(225,29,42,.18);color:#ff6b5a;}
.fchip.verl{background:rgba(225,29,42,.28);color:#ff6b5a;}
.fchip.soon{background:rgba(249,115,22,.22);color:#f9a03f;}

/* Item-kaart */
.ic{display:flex;gap:10px;align-items:flex-start;background:linear-gradient(180deg,#1e2531,#191f29);
  border:1px solid var(--border);border-left:3px solid var(--border-2);border-radius:10px;padding:11px 12px;margin-bottom:8px;
  cursor:pointer;transition:transform .12s,box-shadow .15s;}
.ic:hover{transform:translateX(2px);box-shadow:0 4px 14px rgba(0,0,0,.35);}
/* Vraagt om actie: keurdatum voorbij (rood) of komt eraan (oranje). Een waas
   over de hele kaart, zodat het opvalt tussen honderden regels. De linkerrand
   blijft de keuruitslag - die twee door elkaar halen kost informatie. */
.ic.ic-verl{background:linear-gradient(180deg,#2a1e21,#221a1d);border-color:rgba(225,29,42,.42);}
.ic.ic-soon{background:linear-gradient(180deg,#2a251c,#221e18);border-color:rgba(249,115,22,.38);}
.ic.r1{border-left-color:var(--green);}
.ic.r2{border-left-color:var(--orange);}
.ic.r3{border-left-color:var(--nok);}
.icm{flex:1;min-width:0;}
.icid{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;letter-spacing:-.02em;display:flex;align-items:center;gap:6px;}
.ic-unsent{color:var(--orange);font-size:10px;line-height:1;}
.veld-hint{font-weight:400;color:var(--muted);font-size:11.5px;}
/* Beheer: eigen keur- en meetmiddelen. */
.mm-kaart{border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:12px;}
.mm-kaart.mm-uit{opacity:.55;}
.mm-kop{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.mm-naam{flex:1;min-width:0;font-weight:600;font-size:14px;}
.mm-aan{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap;}
.mm-aan input{width:16px;height:16px;accent-color:var(--red);cursor:pointer;}
.mm-weg{background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px;}
.mm-weg:hover{color:var(--red);}
.mm-docs{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:6px 14px;}
.mm-docs-kop{width:100%;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin-bottom:2px;}
.mm-doc{display:flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer;}
.mm-doc input{width:15px;height:15px;accent-color:var(--red);cursor:pointer;}
/* Balk boven de itemlijst: documenttype van de hele map omzetten. */
.map-acties{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;
  padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card-2,rgba(255,255,255,.02));}
.map-acties .ma-tekst{flex:1;min-width:200px;font-size:12.5px;color:var(--muted);}
.map-acties select{padding:6px 8px;border-radius:6px;max-width:230px;}
/* width:auto is nodig: .btn erft width:100% uit het thema, waardoor elke knop
   hier een eigen regel besloeg en de balk een halve schermhoogte werd. */
.map-acties .btn{width:auto;padding:7px 14px;font-size:12.5px;margin:0;}
.map-acties .btn[disabled]{opacity:.4;cursor:default;}
.map-kies .ma-kop{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex-basis:100%;}
.map-kies .ma-aantal{flex:1;min-width:150px;font-size:14px;font-weight:600;color:var(--text);}
.ma-gatknop{margin-left:6px;padding:3px 10px;border-radius:5px;cursor:pointer;
  background:rgba(255,176,32,.16);border:1px solid rgba(255,176,32,.45);
  color:#ffb020;font-size:12px;font-weight:600;}
.ma-gatknop:hover{background:rgba(255,176,32,.28);}
.ma-gaten-aan{color:#ffb020;font-weight:600;}
.map-acties .btn-rood{border-color:rgba(255,92,92,.45);color:#ff7676;}
/* Samenvatting en Map leegmaken blijven naast elkaar staan. */
.map-acties .ma-paar{display:inline-flex;gap:8px;flex-wrap:nowrap;}
.map-acties .btn-rood:hover{background:rgba(255,92,92,.12);}
/* Nauwkeurigheidsklasse nog niet van de wijzerplaat bevestigd. */
.keur-ontbreekt{margin-bottom:12px;padding:10px 12px;border-radius:8px;line-height:1.5;
  background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.45);color:#ffcc66;font-size:13px;}
.keur-ontbreekt b{color:#ffb020;}
.keur-ontbreekt .ko-sub{display:block;margin-top:3px;color:var(--muted);font-size:12px;}
.veld-ontbreekt{border-color:#ffb020 !important;box-shadow:0 0 0 2px rgba(255,176,32,.18);}
/* Verplicht maar al ingevuld: rustig grijs, zodat je blijft zien welke velden
   ertoe doen zonder dat het scherm oranje kleurt. */
.veld-verplicht{border-color:var(--border-2,#4a4a4a) !important;box-shadow:0 0 0 2px rgba(255,255,255,.05);}
/* Potloodje op een mapkaart: naam wijzigen zonder de map te openen. */
.fld-pen{background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;
  padding:2px 8px;border-radius:5px;line-height:1;}
.fld-pen:hover{background:rgba(255,255,255,.08);color:var(--text);}
/* Items kiezen: vinkje voor het nummer, gekozen kaart licht op. */
/* Zelf bepalen of de afhandeling op het document komt. */
.afk-rij{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.afk-rij .afk-tekst{flex:1;min-width:0;}
.afk-vrij{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  white-space:nowrap;cursor:pointer;}
.afk-vrij input{width:15px;height:15px;accent-color:var(--red);cursor:pointer;}
.afkeur-toon{display:flex;align-items:center;gap:9px;margin-top:10px;cursor:pointer;
  font-size:13px;color:var(--text);user-select:none;}
.afkeur-toon input{width:17px;height:17px;accent-color:var(--red);cursor:pointer;}
.ic-vink{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  margin-right:8px;border:1.5px solid var(--border-2,#555);border-radius:4px;
  font-size:11px;color:#fff;vertical-align:middle;}
.ic-gekozen .ic-vink{background:var(--red);border-color:var(--red);}
.ic-gekozen{outline:2px solid var(--red);outline-offset:-2px;}
.ic-kies .ic-acts{display:none;}
.map-kies{border-color:rgba(255,92,92,.45);}
.map-acties .ma-rij{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-basis:100%;}
.ic-gat{margin-left:6px;padding:1px 6px;border-radius:4px;vertical-align:middle;
  background:rgba(255,92,92,.15);color:#ff7676;font-size:10px;font-weight:700;}
.map-acties .ma-gaten{flex-basis:100%;margin-top:2px;padding-top:8px;
  border-top:1px solid var(--border);font-size:12.5px;color:#ffb020;line-height:1.5;}
.ic-gok{margin-left:6px;padding:1px 6px;border-radius:4px;vertical-align:middle;
  background:rgba(255,176,32,.15);color:#ffb020;font-size:10px;font-weight:700;letter-spacing:.02em;}
.icd{font-size:13px;color:#cfd6de;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.icmeta{font-size:10.5px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.02em;}
.icvolg{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.icvolg.iv-verl{color:#ff6b5a;}
.icvolg.iv-soon{color:#f9a03f;}
.iv{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:10.5px;padding:2px 8px;border-radius:10px;}
.iv-verl{background:rgba(225,29,42,.22);color:#ff6b5a;}
.iv-soon{background:rgba(249,115,22,.22);color:#f9a03f;}
.ibadge{align-self:center;border-radius:20px;padding:5px 10px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;white-space:nowrap;flex-shrink:0;}
.ibadge.r1{background:var(--green);color:#fff;}
.ibadge.r2{background:var(--orange);color:#fff;}
.ibadge.r3{background:var(--nok);color:#fff;}

/* Lege staat */
.empty{text-align:center;padding:40px 20px;color:var(--muted);}
.eico{font-size:44px;margin-bottom:10px;}

/* Tijdelijke testbalk */
.devbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:18px;padding:10px 12px;
  background:rgba(47,129,201,.08);border:1px dashed var(--blue);border-radius:10px;font-size:12px;color:var(--muted);}
.devbar button{background:var(--card-2);border:1px solid var(--border-2);color:var(--text);border-radius:8px;
  padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Barlow Condensed',sans-serif;}
.devbar button:hover{border-color:var(--blue);}

/* ══ KEURFORMULIER (Blok KT-3) ══════════════════════════════════════════════ */
.nieuw-btn{margin-bottom:14px;}
.lijst-acties{display:flex;gap:8px;margin-bottom:14px;}
.lijst-acties .btn{width:auto;flex:1;}
.export-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px;padding:12px;
  background:linear-gradient(180deg,#1f2735,#1a212c);border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:12px;color:var(--muted);}
.export-bar button{background:var(--card-2);border:1px solid var(--border-2);color:var(--text);border-radius:8px;
  padding:8px 12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;cursor:pointer;}
.export-bar button:hover{border-color:var(--green-bright);}

/* Terug-kop */
.keur-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
/* De terugknop zag eruit als grijze tekst tussen de andere grijze vlakken.
   Op een telefoon met werkhandschoenen moet je hem kunnen raken zonder zoeken:
   daarom een rand in de huisstijlkleur, een grotere pijl en de volledige tekst
   in plaats van alleen "Terug". */
.keur-back{background:var(--card-2);border:1.5px solid var(--red);color:var(--text);border-radius:9px;
  padding:10px 16px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;
  letter-spacing:.3px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.keur-back .kb-pijl{font-size:20px;line-height:1;color:var(--red);font-weight:900;}
.keur-back:hover{background:var(--red);border-color:var(--red);}
.keur-back:hover .kb-pijl{color:#fff;}
.keur-back:active{transform:translateY(1px);}
/* Op een smal scherm past de volledige tekst er niet naast de titel en de drie
   knoppen rechts: dan viel de prullenbak van het scherm af. Daar blijft alleen
   "Terug" staan; de knop zelf houdt zijn formaat en zijn rand. */
@media(max-width:520px){
  .keur-back{padding:10px 12px;font-size:14px;}
  .keur-back .kb-lang{display:none;}
  .keur-title{font-size:17px;}
}
.keur-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.keur-title{flex:1;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;}
.keur-del{background:transparent;border:1px solid var(--border-2);color:#ff6b5a;border-radius:9px;padding:9px 12px;font-size:15px;cursor:pointer;}
.keur-del:hover{border-color:var(--nok);background:rgba(225,29,42,.1);}

/* Resultaatknoppen */
.reslbl{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px;}
.resrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.rb{padding:12px 6px;border-radius:10px;border:2px solid var(--border-2);background:linear-gradient(180deg,#1c232f,#171d27);
  color:var(--muted);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-align:center;cursor:pointer;transition:all .15s;}
.rb b{display:block;font-size:22px;line-height:1;font-weight:400;}
.rb small{display:block;font-size:10px;font-weight:600;margin-top:4px;}
.rb.on1{border-color:var(--green);background:var(--green);color:#fff;box-shadow:0 3px 12px rgba(15,157,88,.35);}
.rb.on2{border-color:var(--orange);background:var(--orange);color:#fff;box-shadow:0 3px 12px rgba(249,115,22,.35);}
.rb.on3{border-color:var(--nok);background:var(--nok);color:#fff;box-shadow:0 3px 12px rgba(225,29,42,.35);}

/* Uitklapkaart (technische details) */
.adv{background:linear-gradient(180deg,#1f2735,#1a212c);border:1px solid var(--border-2);border-radius:var(--radius);
  margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-card);}
.adv>summary{padding:16px;cursor:pointer;list-style:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:15px;color:var(--text);display:flex;align-items:center;gap:8px;}
.adv>summary::-webkit-details-marker{display:none;}
.adv>summary::after{content:"⌄";margin-left:auto;font-size:20px;color:var(--muted);transition:transform .2s;}
.adv[open]>summary::after{transform:rotate(180deg);}
.adv[open]>summary{border-bottom:1px solid var(--border);}
.adv-body{padding:16px;}

/* Foto-strip */
.photo-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.photo-wrap{position:relative;display:inline-block;}
.photo-thumb{width:72px;height:72px;border-radius:8px;object-fit:cover;border:1px solid var(--border-2);display:block;}
.photo-del{position:absolute;top:-6px;right:-6px;background:var(--nok);color:#fff;border:none;border-radius:50%;
  width:20px;height:20px;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.hint{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.4;}

/* ══ MEETWAARDEN (Blok KT-4) ════════════════════════════════════════════════ */
.meet-tabel{margin-top:6px;}
/* Aan/uit voor de meettabel op een kalibratierapport. */
.meet-tabel-vink{display:flex;align-items:center;gap:8px;margin-top:10px;cursor:pointer;
  font-size:13px;color:var(--muted);user-select:none;}
.meet-tabel-vink input{width:16px;height:16px;accent-color:var(--red);cursor:pointer;}
/* Niet-bevestigde nauwkeurigheidsklasse van een manometer: de tool heeft hem
   geraden en dat moet je zien staan voor je het rapport maakt. */
.mano-gok{margin-top:8px;padding:8px 10px;border-radius:6px;line-height:1.45;
  background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.45);color:#ffcc66;font-size:13px;}
.mano-gok b{color:#ffb020;}
.mano-gok button{margin-left:6px;padding:4px 10px;border-radius:5px;cursor:pointer;
  background:#ffb020;border:0;color:#1a1200;font-weight:600;font-size:12px;}
.meet-rij{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.meet-rij:last-child{border-bottom:none;}
.meet-rij.mr-kop{border-bottom:1px solid var(--border-2);font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding-bottom:5px;}
.mr-label{flex:1;min-width:0;font-size:13.5px;color:var(--text);display:flex;flex-direction:column;gap:2px;}
.mr-norm{font-size:10.5px;color:var(--muted);font-weight:600;}
.mr-inp{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.mr-inp input{width:88px;background:var(--inp);border:1px solid var(--border-2);border-radius:8px;color:var(--text);
  font-size:14px;padding:8px 9px;outline:none;text-align:right;}
.mr-inp input:focus{border-color:var(--red-accent);box-shadow:0 0 0 3px var(--red-glow);}
.mr-eh{font-size:12px;color:var(--muted);min-width:26px;}
.mr-oordeel{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;min-width:34px;text-align:center;}
.mr-oordeel.goed{color:var(--green-bright);}
.mr-oordeel.fout{color:#ff6b5a;}

/* OK / niet-OK schakelaar */
.oknok{display:flex;gap:6px;flex-shrink:0;}
.oknok button{border:1px solid var(--border-2);background:var(--inp);color:var(--muted);border-radius:8px;
  padding:7px 11px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;cursor:pointer;transition:all .12s;}
.oknok .ok-btn.on{background:var(--green);border-color:var(--green);color:#fff;}
.oknok .nok-btn.on{background:var(--nok);border-color:var(--nok);color:#fff;}
/* Derde knop bij lasapparaten en aggregaten: een elektrodelasapparaat heeft
   geen gasslang, een zwevend net geen aardpen. De label krijgt dan een eigen
   regel, anders drukken drie knoppen de tekst op een telefoon weg. */
.oknok .nvt-btn.on{background:var(--border-2);border-color:var(--border-2);color:var(--text);}
.meet-rij.drie{flex-wrap:wrap;row-gap:6px;}
.meet-rij.drie .mr-label{flex:1 1 100%;}
.meet-rij.drie .oknok{margin-left:auto;}
.meet-sub{margin-top:14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}

/* ══ CERTIFICAAT (Blok KT-6a) ═══════════════════════════════════════════════ */
.cert-modal{display:none;position:fixed;inset:0;z-index:10000;flex-direction:column;background:#000;}
.cert-modal.open{display:flex;}
.cert-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;
  background:linear-gradient(180deg,#1b2230,#141924);border-bottom:1px solid #262e3b;flex-shrink:0;}
.cert-top>span{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:var(--text);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cert-actions{display:flex;gap:8px;flex-shrink:0;}
.cert-btn{border:none;border-radius:8px;padding:9px 14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:13px;cursor:pointer;}
.cert-print{background:linear-gradient(180deg,#3a8fd6,#2670b0);color:#fff;}
.cert-close{background:var(--card-2);color:var(--text);border:1px solid var(--border-2);}
#certFrame,#stickerFrame{flex:1;border:none;background:#fff;width:100%;}

/* Certificaatknoppen */
.keur-cert{background:transparent;border:1px solid var(--border-2);color:#7fc0ff;border-radius:9px;padding:9px 12px;font-size:15px;cursor:pointer;}
.keur-cert:hover{border-color:var(--blue);background:rgba(47,129,201,.12);}
.ic-acts{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;}
.ic-cert{background:rgba(47,129,201,.12);border:1px solid var(--blue);color:#7fc0ff;border-radius:8px;
  padding:6px 11px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;cursor:pointer;}
.ic-cert:hover{background:rgba(47,129,201,.2);}
/* Verwijderen staat naast twee onschuldige knoppen. Rood en op afstand, zodat je
   hem niet per ongeluk raakt terwijl je een certificaat wilde openen. */
.ic-del{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.45);color:#ff8f8f;
  margin-left:auto;padding:6px 10px;}
.ic-del:hover{background:rgba(255,107,107,.22);border-color:#ff6b6b;}

/* ══ KETTINGBEREKENING ══════════════════════════════════════════════════════ */
.ketting-result{margin-top:6px;}
.ket-titel{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:var(--red-accent);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.ket-tabel{border:1px solid var(--border-2);border-radius:8px;overflow:hidden;}
.ket-rij{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border);}
.ket-rij:last-child{border-bottom:none;}
.ket-rij span{color:var(--muted);font-size:13px;}
.ket-rij b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;color:var(--green-bright);}

/* ══ COPYRIGHT ══════════════════════════════════════════════════════════════ */
.app-copy{text-align:center;font-size:11px;color:var(--muted-2);margin-top:22px;letter-spacing:.03em;}
.login-copy{text-align:center;font-size:11px;color:var(--muted-2);margin-top:16px;letter-spacing:.03em;}

/* ══ KEURINGSGESCHIEDENIS ═══════════════════════════════════════════════════ */
.hist-jaar{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:var(--red-accent);
  border-bottom:1px solid var(--border);padding:8px 0 4px;margin-top:8px;}
.hist-jaar:first-child{margin-top:0;}
.hist-rij{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border);}
.hist-rij:last-child{border-bottom:none;}
.hist-badge{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;}
.hist-badge.r1{background:rgba(15,157,88,.18);} .hist-badge.r2{background:rgba(249,115,22,.18);} .hist-badge.r3{background:rgba(225,29,42,.18);}
.hist-tx{flex:1;min-width:0;font-size:13.5px;color:var(--text);}
.hist-tx b{font-family:'IBM Plex Mono',monospace;font-weight:600;}
.hist-tx small{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.hist-opdr{display:inline-block;font-size:10.5px;font-weight:700;font-family:'Barlow Condensed',sans-serif;
  background:var(--card-2);color:var(--muted);padding:1px 7px;border-radius:10px;margin-left:4px;}
.hist-leeg{color:var(--muted);font-size:13px;}

/* ══ SYNC-INDICATOR (automatische sync) ═════════════════════════════════════ */
.sync-badge{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;padding:4px 9px;border-radius:20px;
  cursor:pointer;white-space:nowrap;border:1px solid transparent;transition:all .2s;}
.sync-badge:empty{display:none;}
.sync-badge.ok{background:rgba(15,157,88,.15);color:var(--green-bright);border-color:rgba(15,157,88,.4);}
.sync-badge.busy{background:rgba(47,129,201,.15);color:#7fc0ff;border-color:rgba(47,129,201,.4);}
.sync-badge.off{background:rgba(249,115,22,.15);color:#f9a03f;border-color:rgba(249,115,22,.4);}

/* ══ BEHEER (Blok KT-11) ════════════════════════════════════════════════════ */
.motion-row{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text);cursor:pointer;margin-top:4px;}
.motion-row input{width:22px;height:22px;accent-color:var(--red);}

/* ══ SNEL KEUREN (Blok KT-10) ═══════════════════════════════════════════════ */
.snel-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(8,10,14,.93);align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto;}
.snel-modal.open{display:flex;}
.snel-card{background:linear-gradient(180deg,#1f2735,#1a212c);border:1px solid var(--border-2);border-radius:16px;
  padding:20px;width:100%;max-width:460px;margin-top:12px;box-shadow:0 24px 60px rgba(0,0,0,.6);}
.snel-topbar{display:flex;justify-content:space-between;align-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:var(--muted);margin-bottom:8px;}
.snel-progress{height:6px;background:var(--card-2);border-radius:3px;overflow:hidden;margin-bottom:16px;}
.snel-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-bright));transition:width .2s;}
.snel-id{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:22px;color:#fff;}
.snel-oms{font-size:16px;color:#e8ebef;margin-top:2px;}
.snel-meta{font-size:12.5px;color:var(--muted);margin:4px 0 14px;}
.snel-meta b{color:var(--text);}
.snel-lbl{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.snel-date,.snel-opm{width:100%;background:var(--inp);border:1px solid var(--border-2);border-radius:8px;color:var(--text);font-size:15px;padding:10px;margin-bottom:12px;outline:none;}
.snel-opm{min-height:52px;resize:vertical;font-family:inherit;}
.snel-acts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.gbtn{border:none;border-radius:10px;padding:15px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;cursor:pointer;color:#fff;transition:filter .12s;}
.gbtn:hover{filter:brightness(1.08);}
.gok{background:var(--green);} .grep{background:var(--orange);} .gnok{background:var(--nok);}
.snel-nav{display:flex;justify-content:space-between;}
.snel-nav button{background:transparent;border:1px solid var(--border-2);color:var(--muted);border-radius:8px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Barlow Condensed',sans-serif;}
.snel-nav button:disabled{opacity:.4;}
.snel-done{font-size:52px;text-align:center;}
.snel-klaar{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:24px;text-align:center;margin-top:4px;}
.snel-klaar-sub{text-align:center;color:var(--muted);margin-bottom:18px;}
.snel-sum{display:flex;justify-content:space-around;background:var(--card-2);border-radius:12px;padding:16px;margin-bottom:18px;}
.snel-sum div{display:flex;flex-direction:column;align-items:center;}
.snel-sum b{font-family:'Barlow Condensed',sans-serif;font-size:28px;line-height:1;}
.snel-sum span{font-size:11px;color:var(--muted);text-transform:uppercase;margin-top:4px;}

/* ══ CERTIFICAAT-PICKER (Blok KT-8b) ════════════════════════════════════════ */
.picker-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(8,10,14,.82);align-items:flex-end;justify-content:center;}
.picker-modal.open{display:flex;}
.picker-box{background:linear-gradient(180deg,#1f2735,#1a212c);border-top:3px solid var(--red);border-radius:16px 16px 0 0;
  width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;padding:18px;box-shadow:0 -8px 30px rgba(0,0,0,.5);}
@media(min-width:600px){.picker-modal{align-items:center;}.picker-box{border-radius:16px;border-top:none;border-left:3px solid var(--red);}}
.picker-top{display:flex;justify-content:space-between;align-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;margin-bottom:8px;}
.picker-acts{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.picker-acts button{background:var(--card-2);border:1px solid var(--border-2);color:var(--text);border-radius:8px;padding:7px 12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;cursor:pointer;}
.pick-info{margin-left:auto;font-size:12px;color:var(--muted);}
.picker-list{flex:1;overflow-y:auto;margin-bottom:10px;}
.pick-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border);cursor:pointer;}
.pick-row input{width:22px;height:22px;accent-color:var(--red);flex-shrink:0;}
.pick-tx{flex:1;min-width:0;}
.pick-tx b{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14px;}
.pick-tx small{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ══ SCANNER (Blok KT-5) ════════════════════════════════════════════════════ */
.scan-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(8,10,14,.94);
  align-items:center;justify-content:center;padding:16px;}
.scan-modal.open{display:flex;}
.scan-box{width:100%;max-width:460px;background:linear-gradient(180deg,#1f2735,#1a212c);
  border:1px solid var(--border-2);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6);}
.scan-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--border);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;}
.scan-x{background:transparent;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;}
.scan-tools{display:flex;align-items:center;gap:8px;}
.scan-tool{background:rgba(255,255,255,.07);border:1px solid var(--border-2);border-radius:8px;color:var(--text);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;padding:7px 10px;cursor:pointer;line-height:1;}
.scan-tool:hover{background:rgba(255,255,255,.13);}
.scan-tool.on{background:rgba(90,169,255,.22);border-color:rgba(90,169,255,.6);color:#cfe4ff;}
#scanTorchBtn.on{background:rgba(255,196,60,.25);border-color:rgba(255,196,60,.7);color:#ffe08a;}

/* ═══ HANDSCHOENMODUS ═══ grotere raakvlakken voor gebruik met werkhandschoenen.
   Schakelaar in Beheer → Voorkeuren (body.handschoenen). Standaard uit. */
body.handschoenen .btn{padding:18px 20px;font-size:18px;min-height:60px;}
body.handschoenen .gbtn{padding:20px;font-size:19px;}
body.handschoenen .rb{padding:20px 6px;font-size:16px;min-height:64px;}
body.handschoenen .fbtn{padding:12px 16px;font-size:15px;}
body.handschoenen .bnav .nb{font-size:12px;padding:12px 0;}
body.handschoenen .bnav .ni{font-size:22px;}
body.handschoenen input:not([type=checkbox]):not([type=radio]),
body.handschoenen select,
body.handschoenen textarea{min-height:52px;font-size:16px;}
body.handschoenen .ronde-inp{min-height:52px;font-size:16px;}
body.handschoenen .scan-tool{font-size:15px;padding:11px 14px;}
body.handschoenen .ronde-bewerk,
body.handschoenen .ronde-weg{padding:16px;font-size:15px;}
.scan-video-wrap{position:relative;background:#000;aspect-ratio:4/3;overflow:hidden;}
.scan-video{width:100%;height:100%;object-fit:cover;display:block;}
.scan-frame{position:absolute;inset:18%;border:3px solid rgba(227,91,76,.9);border-radius:14px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35);pointer-events:none;}
.scan-hint{padding:12px 16px;font-size:13px;color:var(--muted);text-align:center;line-height:1.45;}
.scan-manual{display:flex;gap:8px;padding:0 16px 16px;}
.scan-manual input{flex:1;background:var(--inp);border:1px solid var(--border-2);border-radius:var(--radius-sm);
  color:var(--text);font-size:15px;padding:11px 12px;outline:none;}
.scan-manual input:focus{border-color:var(--red-accent);box-shadow:0 0 0 3px var(--red-glow);}

/* Gescand item even laten oplichten in de lijst */
.ic.scan-hit{animation:scanHit 2.6s ease;}
@keyframes scanHit{
  0%{box-shadow:0 0 0 3px #3aa0e0,0 0 22px rgba(58,160,224,.75);}
  70%{box-shadow:0 0 0 3px #3aa0e0,0 0 22px rgba(58,160,224,.55);}
  100%{box-shadow:0 2px 8px rgba(0,0,0,.3);}
}

/* Automatisch invullen (elektrisch) */
.autofill-btn{margin:2px 0 4px;width:100%;}
.herken-note{background:rgba(15,157,88,.10);border:1px solid rgba(15,157,88,.4);border-radius:9px;
  padding:9px 11px;margin:6px 0 10px;font-size:12px;line-height:1.45;color:#cfe9d8;}
.herken-note b{color:var(--green-bright);}
/* Twijfel (klasse bevestigen) en blokkade-route (niet automatisch keuren) */
.herken-note.warn{background:rgba(240,180,20,.10);border-color:rgba(240,180,20,.45);color:#efe4c2;}
.herken-note.warn b{color:#ffd766;}
.herken-note.stop{background:rgba(226,61,61,.12);border-color:rgba(226,61,61,.55);color:#f3cccc;}
.herken-note.stop b{color:#ff9a9a;}
.herken-note .alt-btns{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.herken-note .alt-btns span{opacity:.85;}
.herken-note .alt-btns button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.28);
  color:inherit;border-radius:999px;padding:4px 10px;font-size:11.5px;cursor:pointer;}
.herken-note .alt-btns button:hover{background:rgba(255,255,255,.16);}

/* ── Mobiel: geen automatische inzoom van iOS Safari bij het aantikken van een
   invoerveld (gebeurt bij lettergrootte < 16px). Alles blijft passend in beeld. */
@media (max-width: 820px){
  input, select, textarea { font-size: 16px !important; }
}

/* QR-stickerreeksen (Beheer) */
.reeks-rij{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;}
.reeks-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.reeks-info b{font-size:13.5px;}
.reeks-info span{font-size:12px;color:var(--muted);}
.reeks-btns{display:flex;gap:6px;flex-wrap:wrap;}
.reeks-btns .btn{width:auto;padding:8px 12px;font-size:12.5px;margin:0;}

/* ── BIJLAGEN bij een item (bijlagen.js) ──────────────────────────────────── */
.bijl-uitleg{font-size:13px;color:var(--muted);margin-bottom:12px;line-height:1.5;}
.bijl-rij{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px;}
.bijl-rij select,.bijl-rij input[type=text]{background:var(--card);border:1px solid var(--border-2);
  border-radius:9px;color:var(--ink);font-size:14px;padding:10px 12px;font-family:inherit;}
.bijl-rij input[type=text]{flex:1 1 220px;min-width:0;}
.bijl-rij input[type=file]{flex:1 1 240px;min-width:0;color:var(--muted);font-size:13px;}
.bijl-status{font-size:13px;color:var(--muted);min-height:18px;margin-bottom:8px;}
.bijl-status.goed{color:#3ddc84;}
.bijl-status.fout{color:#ff6b6b;}
.bijl-lijst{display:flex;flex-direction:column;gap:8px;}
.bijl-leeg{font-size:13px;color:var(--muted);padding:10px 0;}
.bijl-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--border-2);border-radius:10px;padding:10px 12px;}
.bijl-ic{font-size:18px;line-height:1;}
.bijl-naam{flex:1 1 160px;min-width:0;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bijl-meta{font-size:12px;color:var(--muted);white-space:nowrap;}
.bijl-zicht{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);
  cursor:pointer;white-space:nowrap;}
.bijl-btn{background:var(--card);border:1px solid var(--border-2);border-radius:8px;color:var(--muted);
  font-size:12px;font-weight:600;padding:7px 11px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.bijl-btn:hover{color:var(--ink);}
.bijl-del:hover{color:#ff6b6b;border-color:#ff6b6b;}
.adv summary .tel{font-size:13px;color:var(--muted);font-weight:600;margin-left:6px;}
@media(max-width:820px){
  .bijl-rij select,.bijl-rij input[type=text],.bijl-rij input[type=file]{flex:1 1 100%;width:100%;box-sizing:border-box;}
  .bijl-naam{flex:1 1 100%;white-space:normal;}
  .bijl-item .bijl-btn{flex:1 1 calc(50% - 5px);text-align:center;}
}

/* Geldigheid van de eigen kalibratie-opstelling (beheerscherm) */
.opst-geldig{font-size:13px;font-weight:600;margin-top:-4px;padding:8px 12px;border-radius:9px;
  background:var(--card);border:1px solid var(--border-2);color:var(--muted);}
.opst-geldig.goed{color:#3ddc84;border-color:rgba(61,220,132,.35);}
.opst-geldig.waarschuwing{color:#f0a92b;border-color:rgba(240,169,43,.35);}
.opst-geldig.fout{color:#ff6b6b;border-color:rgba(255,107,107,.45);}

/* ── ADRESBOEK (adresboek.js) ──────────────────────────────────────────────── */
.ab-tel{font-size:12.5px;color:var(--muted);margin:2px 0 10px;}
.ab-rij{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border-2);
  border-radius:11px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .12s,background .12s;}
.ab-rij:hover{border-color:var(--red-accent);background:var(--card-2);}
/* Gearchiveerde klant: hele rij vervaagd. De 📦/↩︎-knop houdt volle sterkte,
   zodat terugzetten altijd goed zichtbaar en klikbaar blijft. */
.ab-rij.ab-uit{opacity:.6;}
.ab-rij.ab-uit .ab-arch{opacity:1;}
.ab-info{flex:1;min-width:0;}
.ab-naam{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ab-adres{font-size:12.5px;color:var(--muted);margin-top:2px;}
.ab-vlag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(240,169,43,.16);color:#f0a92b;border-radius:5px;padding:2px 7px;}
.ab-vlag-uit{background:rgba(255,255,255,.13);color:#cbd3dc;}
/* Teller tussen haakjes op elke filterknop; neemt de kleur van de knop over */
.fcount{color:inherit;opacity:.65;font-weight:600;margin-left:3px;}
.ab-btn{background:var(--card);border:1px solid var(--border-2);color:var(--muted);border-radius:9px;
  font-size:12.5px;font-weight:600;padding:9px 14px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.ab-btn:hover{color:var(--text);}
/* Eén-klik archiveren (📦) / terugzetten (↩︎) */
.ab-arch{background:var(--card);border:1px solid var(--border-2);border-radius:9px;
  font-size:16px;line-height:1;padding:8px 11px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.ab-arch:hover{border-color:var(--red-accent);}
.ab-leeg{color:var(--muted);font-size:13.5px;padding:18px 2px;}
.ab-sectie{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:18px 0 10px;padding-bottom:6px;
  border-bottom:1px solid var(--border);}
.ab-sectie:first-child{margin-top:0;}
.ab-actief{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);margin-top:6px;cursor:pointer;}

/* ── Klantkaart: portaaltoegang, documenten en definitief verwijderen ─────── */
.ab-kaart{background:var(--card);border:1px solid var(--border-2);border-radius:12px;padding:13px 14px;margin:10px 0 4px;}
.ab-kaart-stil{color:var(--muted);font-size:13px;line-height:1.55;}
.ab-kaart-status{font-size:13.5px;color:var(--text);margin-bottom:10px;}
.ab-kaart-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.ab-kaart-knoppen .btn{flex:1 1 180px;margin:0;}
.ab-pw-rij,.afr-pw-rij{display:flex;gap:8px;align-items:stretch;}
.ab-pw-rij input,.afr-pw-rij input{flex:1;min-width:0;}
.ab-pw-rij .ab-btn,.afr-pw-rij .ab-btn{flex:0 0 auto;font-size:15px;padding:0 12px;}
.ab-tg-result{margin-top:12px;}
.ab-tg-ok{background:rgba(61,220,132,.12);border:1px solid rgba(61,220,132,.4);color:#3ddc84;
  border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.5;}
.ab-tg-fout{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.4);color:#ff9b9b;
  border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.5;}
.ab-tg-lbl{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px;}
.ab-tg-result textarea{width:100%;background:var(--card-2);border:1px solid var(--border-2);border-radius:9px;
  color:var(--text);font-family:inherit;font-size:12.5px;line-height:1.55;padding:10px;resize:vertical;}
.ab-doc-rij{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px;}
.ab-doc-rij input[type=text],.ab-doc-rij #ab_doc_titel{flex:1 1 200px;min-width:0;background:var(--card);
  border:1px solid var(--border-2);border-radius:9px;color:var(--text);font-family:inherit;font-size:13.5px;padding:9px 11px;}
.ab-doc-rij .btn{flex:0 0 auto;margin:0;}
.ab-sectie-gevaar{color:#ff8f8f;border-bottom-color:rgba(255,107,107,.35);}
.ab-gevaar-btn{color:#ff8f8f;border-color:rgba(255,107,107,.4);}
.ab-gevaar-btn:hover{border-color:#ff6b6b;}

/* Venster voor het bewerken van een klant */
.modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(6,9,14,.82);
  align-items:center;justify-content:center;padding:18px;}
.modal.open{display:flex;}
.modal-card{background:linear-gradient(180deg,#1f2735,#1a212c);border:1px solid var(--border-2);
  border-radius:16px;width:100%;max-width:620px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-kop{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;}
.modal-kop span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.modal-x{background:transparent;border:none;color:var(--muted);font-size:19px;cursor:pointer;padding:2px 6px;}
.modal-body{padding:16px 18px;overflow-y:auto;flex:1;}
.modal-voet{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--border);}
.modal-voet .btn{flex:1;margin:0;}
@media(max-width:820px){
  .modal{padding:0;}
  .modal-card{max-width:none;height:100%;max-height:none;border-radius:0;border:none;}
}

/* Voorstel voor een consequente omschrijving (leren.js) */
.leer-voorstel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 12px;
  background:rgba(61,140,220,.10);border:1px solid rgba(61,140,220,.34);border-radius:10px;
  padding:9px 12px;font-size:13px;color:var(--text);}
.lv-tekst{flex:1;min-width:150px;}
.lv-knoppen{display:flex;gap:6px;flex-wrap:wrap;}
.lv-btn{background:var(--card);border:1px solid var(--border-2);color:var(--muted);border-radius:8px;
  font-size:12px;font-weight:600;padding:6px 11px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.lv-btn:hover{color:var(--text);}
.lv-ja{border-color:rgba(61,220,132,.45);color:#3ddc84;}
.lv-nee:hover{color:#ff6b6b;border-color:#ff6b6b;}
@media(max-width:820px){ .lv-knoppen{width:100%;} .lv-btn{flex:1;text-align:center;} }
.ab-vlag-portaal{background:rgba(61,220,132,.16);color:#3ddc84;}

/* Wat er na een afkeuring met het middel is gebeurd (keurform.js) — intern */
.afkeur-blok{margin-top:14px;background:rgba(225,29,42,.07);border:1px solid rgba(225,29,42,.34);
  border-radius:11px;padding:13px 14px;}
.afkeur-kop{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.03em;
  text-transform:uppercase;color:#ff6b6b;margin-bottom:4px;}
.afkeur-uitleg{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:10px;}
.afkeur-keuze{display:flex;flex-direction:column;gap:8px;}
.afkeur-keuze label{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text);
  cursor:pointer;line-height:1.4;}
.afkeur-keuze input{margin-top:2px;flex-shrink:0;}
.afkeur-blok .field{margin-top:10px;margin-bottom:0;}
.li-afkeur{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;
  background:rgba(225,29,42,.14);color:#ff8a92;border-radius:5px;padding:2px 8px;margin-top:4px;}

/* Klantkiezer: het typeveld verschijnt onder de keuzelijst zodra je
   "Andere klant typen" kiest (klantkiezer.js). */
.field select[data-klantkiezer] + input:not([hidden]){margin-top:6px;}

/* Knoppenrij bij de handleidingen in Beheer */
.hl-knoppen{display:flex;flex-direction:column;gap:8px;}

/* ── Inventarisarchief: mappen per klant, jaren erbinnen ─────────────────── */
.inv-map{background:var(--card-2);border:1px solid var(--border-2);border-radius:11px;margin-bottom:8px;}
.inv-map summary{cursor:pointer;padding:12px 14px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;font-size:14.5px;list-style:none;}
.inv-map summary::-webkit-details-marker{display:none;}
.inv-map summary::before{content:'📁';margin-right:8px;}
.inv-map[open] summary::before{content:'📂';}
.inv-map summary span{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;}
.inv-rij{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--border);}
.inv-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.inv-info b{font-family:'Barlow Condensed',sans-serif;font-size:17px;}
.inv-info span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inv-btns{display:flex;gap:6px;flex-shrink:0;}
.inv-btns button{background:var(--card);border:1px solid var(--border-2);border-radius:8px;
  padding:8px 10px;font-size:14px;cursor:pointer;font-family:inherit;}
.inv-btns button:hover{border-color:var(--red-accent);}

/* ── Omschrijving met knop 'kies uit lijst' ──────────────────────────────── */
.oms-rij{display:flex;gap:6px;}
.oms-rij input{flex:1;min-width:0;}
.oms-lijst{flex-shrink:0;background:var(--card-2);border:1px solid var(--border-2);color:var(--muted);
  border-radius:var(--radius-sm);padding:0 13px;font-size:16px;cursor:pointer;font-family:inherit;}
.oms-lijst:hover{border-color:var(--red-accent);color:var(--text);}
/* Keuzestrip 'Bedoel je …?' bij een verzamelwoord */
.oms-varianten{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px;}
.oms-varianten[hidden]{display:none;}
.ov-label{font-size:12px;color:var(--muted);font-weight:600;}
.ov-chip{background:var(--card-2);border:1px solid var(--border-2);color:var(--text);
  border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;font-family:inherit;line-height:1.2;}
.ov-chip:hover{border-color:var(--red-accent);}
.ov-meer{color:var(--muted);font-style:italic;}

/* ── Klimmateriaal: inspectie of nieuwlevering ───────────────────────────── */
.klim-keuze{background:rgba(47,129,201,.1);border:1px solid var(--blue);border-radius:10px;
  padding:10px 12px;margin-bottom:12px;}
.klim-keuze>span{display:block;font-size:12px;color:#7fc0ff;font-weight:600;margin-bottom:8px;}
.klim-btns{display:flex;gap:6px;flex-wrap:wrap;}
.klim-btn{flex:1;min-width:130px;background:var(--card);border:1px solid var(--border-2);color:var(--muted);
  border-radius:9px;padding:10px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;}
.klim-btn.active{background:rgba(47,129,201,.22);border-color:var(--blue);color:#cfe6ff;}

/* ── Keuzelijst klimmateriaal ────────────────────────────────────────────── */
#klimLijst .modal-card{max-height:80vh;display:flex;flex-direction:column;}
.modal-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;}
.modal-top>span{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;}
#klimOpties{overflow-y:auto;display:flex;flex-direction:column;gap:5px;}
.kies-groep{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  padding:9px 2px 3px;position:sticky;top:0;background:var(--card);}
.kies-groep[hidden]{display:none;}
.klim-optie{text-align:left;background:var(--card-2);border:1px solid var(--border-2);color:var(--text);
  border-radius:9px;padding:11px 13px;font-size:14px;cursor:pointer;font-family:inherit;}
.klim-optie:hover{border-color:var(--red-accent);}
.klim-optie[hidden]{display:none;}

/* ── Juridische tekst in Beheer ──────────────────────────────────────────── */
.jur-aan{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;}
.jur-aan input{width:17px;height:17px;accent-color:var(--red-accent);cursor:pointer;}
.jur-voorbeeld{background:#fff;color:#4a4a4a;border-radius:8px;padding:10px 12px;
  margin:10px 0;font-size:11px;line-height:1.4;}
.jur-voorbeeld i{color:#8a8a8a;}
.jur-mini{display:block;margin-top:4px;font-size:9px;color:#9a9a9a;text-align:justify;}

/* ── Subkoppen binnen de kaart 'Wat op documenten verschijnt' ────────────── */
.doc-sub{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;
  color:var(--text);margin-bottom:4px;}
.doc-scheiding{border-top:1px solid var(--border-2);margin:18px 0;}

/* ── Handleidingen-bibliotheek in Beheer ─────────────────────────────────── */
.hl-rij{display:flex;align-items:center;gap:12px;background:var(--card-2);border:1px solid var(--border-2);
  border-radius:10px;padding:10px 12px;margin-bottom:7px;}
.hl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.hl-info b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hl-info span{font-size:11px;color:var(--muted);}
.hl-btns{display:flex;gap:6px;flex-shrink:0;}
.hl-btns button{background:var(--card);border:1px solid var(--border-2);border-radius:8px;
  padding:7px 10px;font-size:14px;cursor:pointer;font-family:inherit;}
.hl-btns button:hover{border-color:var(--red-accent);}
/* Aan/uit-schakelaar (zichtbaar voor de klant) */
.hl-schakel{position:relative;flex-shrink:0;width:40px;height:23px;cursor:pointer;}
.hl-schakel input{opacity:0;width:0;height:0;position:absolute;}
.hl-schakel span{position:absolute;inset:0;background:#3a4453;border-radius:20px;transition:background .15s;}
.hl-schakel span::before{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;background:#fff;
  border-radius:50%;transition:transform .15s;}
.hl-schakel input:checked + span{background:var(--green,#0f9d58);}
.hl-schakel input:checked + span::before{transform:translateX(17px);}
.hl-upload{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.hl-upload input#hlTitel{flex:1;min-width:140px;background:var(--inp);border:1px solid var(--border-2);
  color:var(--text);border-radius:9px;padding:9px 11px;font-size:14px;font-family:inherit;}

/* ── Klantlogo in het adresboek-bewerkscherm ─────────────────────────────── */
.ablogo-rij{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ablogo-preview{width:120px;height:60px;border:1px solid var(--border-2);border-radius:8px;
  background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.ablogo-preview img{max-width:100%;max-height:100%;object-fit:contain;}
.ablogo-leeg{color:var(--muted);font-size:11px;text-align:center;padding:0 6px;}
.ablogo-knoppen{display:flex;flex-direction:column;gap:6px;}
.ablogo-knoppen .btn{padding:8px 12px;font-size:12.5px;}

/* ═══ HERKEURINGSRONDE ══════════════════════════════════════════════════════ */
.ronde-card{max-width:560px;width:100%;}
.ronde-h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;color:#eef1f5;margin-bottom:6px;}
.ronde-sub{font-size:13px;color:#9aa4b1;line-height:1.5;margin-bottom:16px;}
.ronde-lbl{display:block;font-size:12px;font-weight:700;color:#9aa4b1;text-transform:uppercase;letter-spacing:.04em;margin:12px 0 5px;}
.ronde-inp{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#141a24;color:#eef1f5;font-size:15px;font-family:inherit;}
/* De klantnaam eerst, over de volle breedte. Stond hij naast de datumknop, dan
   brak hij op een telefoon middenin af: "Hydrauvision IJmond" met "B.V." op de
   volgende regel. Daaronder de twee knoppen naast elkaar. */
.ronde-kop{display:block;margin-bottom:10px;}
.ronde-kopknoppen{display:flex;gap:8px;margin-top:8px;}
.rk-btn{flex:1;min-width:0;display:flex;align-items:center;gap:9px;
  padding:9px 11px;border:1px solid var(--border-2);border-radius:10px;
  background:var(--card-2);color:var(--text);font-family:inherit;text-align:left;
  cursor:pointer;min-height:46px;transition:border-color .12s,background .12s;}
.rk-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26);}
.rk-ic{flex:0 0 auto;font-size:17px;line-height:1;}
.rk-tx{min-width:0;display:flex;flex-direction:column;gap:1px;
  font-size:13px;font-weight:700;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rk-tx small{font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);}
@media (max-width:820px){ .rk-btn{min-height:52px} }
.ronde-klantnaam{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:21px;color:#eef1f5;line-height:1.15;}
.ronde-datum{font-size:12.5px;color:#9aa4b1;white-space:nowrap;}
.ronde-prog{margin-bottom:12px;}
.ronde-progbar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;}
.ronde-progfill{height:100%;background:linear-gradient(90deg,#3fb56e,#57c98a);border-radius:99px;transition:width .2s ease;}
.ronde-progtxt{font-size:12.5px;color:#9aa4b1;margin-top:6px;}
.ronde-progtxt b{color:#eef1f5;}
.ronde-zoekrij{display:flex;gap:8px;margin-bottom:10px;}
.ronde-zoek{flex:1;min-width:0;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#141a24;color:#eef1f5;font-size:15px;font-family:inherit;}
.ronde-scan{flex-shrink:0;width:52px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#141a24;color:#eef1f5;font-size:20px;cursor:pointer;}
.ronde-scan:hover{background:#1b2430;border-color:rgba(255,255,255,.28);}

/* ═══ IMPORT-CONTROLE ═══════════════════════════════════════════════════════ */
.imc-card{max-width:860px;width:100%;}
.imc-kop{margin-bottom:12px;}
.imc-kop b{font-family:'Barlow Condensed',sans-serif;font-size:18px;color:#eef1f5;}
.imc-sub{font-size:12.5px;color:#9aa4b1;line-height:1.5;margin-top:4px;}
/* Kolommen die worden overgeslagen. Amber en niet rood: er is niets kapot, je
   moet alleen even kijken of je die kolommen nodig had. */
.imc-mis{background:rgba(249,160,63,.12);border:1px solid rgba(249,160,63,.45);
  border-radius:10px;padding:11px 13px;margin-bottom:12px;line-height:1.5;}
.imc-mis b{display:block;font-size:13px;color:#f9a03f;margin-bottom:5px;}
.imc-mis>div{font-size:12.5px;color:#eef1f5;}
.imc-mis-uitleg{font-size:11.5px;color:#9aa4b1;margin-top:6px;}
/* Reden waarom een werklast nagekeken moet worden */
.wlt-reden{color:#e0a020;font-size:11.5px;white-space:normal;min-width:200px;}

/* ── Dubbele nummers oplossen ─────────────────────────────────────────────── */
.dub-alles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.dub-alles .btn{margin:0;width:auto;padding:7px 12px;font-size:12px;}
.dub-groep{border:1px solid var(--border-2);border-radius:11px;padding:12px 13px;margin-bottom:12px;
  background:rgba(255,255,255,.02);}
.dub-kop{font-size:13px;color:#c7d0da;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dub-kop b{font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:#eef1f5;}
.dub-tip{font-size:11px;color:#9aa4b1;border:1px solid var(--border-2);border-radius:20px;padding:2px 9px;}
.dub-tabelwrap{overflow-x:auto;margin-bottom:10px;}
.dub-tabel{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap;}
.dub-tabel th{text-align:left;font-weight:600;color:#8d99ab;padding:4px 9px 5px;border-bottom:1px solid var(--border-2);}
.dub-tabel td{padding:5px 9px;color:#dfe5ec;border-bottom:1px solid rgba(255,255,255,.05);}
.dub-nr{color:#8d99ab;font-size:11px;}
/* Wat afwijkt van de eerste regel: dáár zit het verschil, en dat is precies wat
   je moet zien om te kunnen kiezen. */
.dub-anders{color:#f9a03f;font-weight:600;}
/* Hoe compleet een regel is. Bij een dubbel nummer door een typefout geeft dit
   vaak de doorslag: zelfde machine, maar de ene regel is verder ingevuld. */
.dub-vol{color:#8d99ab;font-size:11.5px;white-space:nowrap;}
.dub-best td{background:rgba(28,122,69,.10);}
.dub-badge{display:inline-block;background:rgba(28,122,69,.25);border:1px solid rgba(60,190,120,.45);
  color:#7ddc9a;border-radius:20px;padding:1px 8px;font-size:10.5px;margin-left:5px;}
.dub-keuze{display:flex;flex-direction:column;gap:7px;}
.dub-keuze label{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#c7d0da;
  line-height:1.45;cursor:pointer;}
.dub-keuze input{margin-top:2px;flex-shrink:0;}
.dub-keuze b{color:#eef1f5;}

/* Inspreken in plaats van typen. Rood en pulserend zolang hij luistert, zodat
   je ziet dat de microfoon aanstaat. */
.spraak-btn{margin-top:8px;background:rgba(255,255,255,.05);border:1px solid var(--border-2);
  border-radius:9px;padding:9px 13px;color:var(--text);font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;min-height:44px;}
.spraak-btn:hover{background:rgba(255,255,255,.09);}
.spraak-btn.luistert{background:var(--red);border-color:var(--red);color:#fff;animation:spraakpuls 1.1s infinite;}
@keyframes spraakpuls{0%,100%{opacity:1}50%{opacity:.55}}
.ronde-inp-rij{display:flex;gap:8px;align-items:center;}
.ronde-inp-rij .ronde-inp{flex:1;min-width:0;}
.ronde-inp-rij .spraak-btn{margin-top:0;flex:0 0 auto;}

/* ── Planning: wie moet er wanneer ───────────────────────────────────────── */
.plan-sub{color:var(--muted);font-size:13px;line-height:1.5;margin:2px 0 10px;}
.plan-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.plan-chip{background:var(--card);border:1px solid var(--border-2);color:var(--text);border-radius:999px;
  padding:6px 11px;font-size:13px;cursor:pointer;text-transform:capitalize;}
.plan-chip b{margin-left:3px;}
.plan-chip.aan{background:var(--red);border-color:transparent;color:#fff;}
.plan-chip.plan-rood{border-color:rgba(230,70,60,.6);}
.plan-kop{font-size:14px;color:var(--text);margin:4px 0 10px;}
.plan-klant{border:1px solid var(--border-2);border-radius:12px;padding:10px 11px;margin-bottom:10px;}
.plan-klant-kop{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.plan-klant-kop>div{flex:1;min-width:0;}
.plan-klant-kop b{display:block;font-size:14.5px;color:var(--text);overflow-wrap:anywhere;}
.plan-klant-kop small,.plan-map-t small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;}
.plan-map{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border-2);padding:8px 0 2px;}
.plan-map-t{flex:1;min-width:0;}
.plan-map-t b{display:block;font-size:13.5px;color:var(--text);overflow-wrap:anywhere;}
.plan-klant .ab-btn{flex:0 0 auto;padding:7px 10px;font-size:13px;white-space:nowrap;}
.plan-rood-t{color:#ff8a80;}
.plan-voet{color:var(--muted);font-size:12.5px;margin-top:8px;}

/* ── Handtekening voor akkoord op de bon ─────────────────────────────────── */
.hk-overlay{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.78);display:none;
  align-items:center;justify-content:center;padding:12px;}
.hk-overlay.open{display:flex;}
.hk-kaart{background:var(--card);border:1px solid var(--border-2);border-radius:14px;padding:14px;
  width:100%;max-width:640px;}
.hk-titel{font-weight:800;font-size:16px;color:var(--text);}
.hk-sub{color:var(--muted);font-size:12.5px;line-height:1.5;margin:3px 0 10px;}
/* touch-action:none: anders scrolt de pagina mee terwijl de klant tekent. */
.hk-canvas{width:100%;height:220px;background:#fff;border-radius:10px;touch-action:none;display:block;}
.hk-knoppen{display:flex;gap:8px;margin-top:10px;}
.hk-knoppen .btn{flex:1;margin:0;}
.hk-status{display:flex;gap:10px;align-items:center;border:1px solid var(--border-2);border-radius:10px;
  padding:8px;margin:4px 0 10px;background:rgba(255,255,255,.03);}
.hk-status img{width:120px;height:auto;background:#fff;border-radius:6px;flex:0 0 auto;}
.hk-status div{flex:1;min-width:0;font-size:13px;line-height:1.45;color:var(--text);}
.hk-status span{color:#ffd766;}
.hk-status.hk-let{border-color:rgba(240,180,20,.55);}

/* ── Klant op het portaal: stap voor stap ────────────────────────────────── */
.pw-uitleg{color:var(--muted);font-size:13px;line-height:1.55;margin-top:6px;}
.pw-voortgang{display:flex;align-items:center;gap:10px;margin:6px 0 14px;font-size:12.5px;color:var(--muted);}
.pw-balk{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;}
.pw-balk div{height:100%;background:var(--green);border-radius:6px;transition:width .3s;}
.pw-stap{border:1px solid var(--border-2);border-radius:12px;padding:12px 13px;margin-bottom:10px;
  background:rgba(255,255,255,.02);}
.pw-stap.pw-klaar{border-color:rgba(60,190,120,.45);}
.pw-kop{display:flex;align-items:center;gap:9px;font-size:14.5px;}
.pw-kop b{flex:1;min-width:0;}
.pw-nr{flex:0 0 26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:13px;}
.pw-klaar .pw-nr{background:var(--green);color:#fff;}
.pw-icoon{font-size:16px;}
.pw-waarom{margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(240,180,20,.10);
  border:1px solid rgba(240,180,20,.45);color:#efe4c2;font-size:12.5px;line-height:1.5;}
.pw-fout{margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(226,61,61,.12);
  border:1px solid rgba(226,61,61,.55);color:#f3cccc;font-size:12.5px;line-height:1.5;}
.pw-inhoud{margin-top:8px;}
.pw-regel{font-size:13px;line-height:1.55;margin:6px 0;color:var(--text);}
.pw-zacht{color:var(--muted);}
.pw-rood{color:#ff6b5a;}
.pw-mappen,.pw-lijst{margin:4px 0 8px 18px;font-size:13px;line-height:1.6;color:var(--text);}
.pw-mappen span{color:var(--muted);}
.pw-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.pw-knoppen .btn{width:auto;margin:0;flex:1 1 160px;}
.pw-vink{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13.5px;min-height:44px;cursor:pointer;}
.pw-vink input{width:20px;height:20px;flex:0 0 auto;}
#pwMsg{width:100%;min-height:190px;font-size:13px;line-height:1.5;}

/* De keuringsdatum in het itemscherm van de ronde. */
.ra-datum{width:100%;display:flex;align-items:center;gap:9px;margin:8px 0 2px;
  background:rgba(255,255,255,.04);border:1px solid var(--border-2);border-radius:10px;
  padding:9px 11px;color:#eef1f5;font-size:14px;font-weight:600;cursor:pointer;text-align:left;min-height:48px;}
.ra-datum:hover{background:rgba(255,255,255,.07);}
.ra-datum-wijz{margin-left:auto;font-size:11px;font-weight:700;color:#9aa4b1;
  text-transform:uppercase;letter-spacing:.04em;}


.imc-tabelwrap{max-height:54vh;overflow:auto;border:1px solid rgba(255,255,255,.1);border-radius:10px;margin-bottom:14px;}
.imc-tabel{width:100%;border-collapse:collapse;font-size:12.5px;}
.imc-tabel th{position:sticky;top:0;background:#222c3a;color:#cbd3dc;text-align:left;padding:8px 10px;font-weight:700;white-space:nowrap;z-index:1;}
.imc-tabel td{padding:7px 10px;border-top:1px solid rgba(255,255,255,.07);color:#dfe4ea;vertical-align:top;}
.imc-id{font-family:'IBM Plex Mono',monospace;font-weight:600;white-space:nowrap;color:#eef1f5;}
.imc-ruw{color:#9aa4b1;white-space:pre-wrap;max-width:200px;}
.imc-leeg{color:#6f7883;}
.imc-cap{font-weight:700;}
/* werklast/WLL = groen. hoeken2/hoeken3/gebruik/wll_minmax ontbraken hier,
   waardoor kettingregels grijs bleven alsof ze niet herkend waren. */
.imc-wll_kg,.imc-wll_ton,.imc-hoeken,.imc-hoeken2,.imc-hoeken3,
.imc-gebruik,.imc-wll_minmax{color:#57c98a;}
.imc-lc{color:#38b6a6;}                                     /* sjorcapaciteit */
.imc-voltage{color:#5aa9ff;}                                /* voltage */
.imc-druk,.imc-bereik,.imc-nm{color:#e0a020;}              /* druk/bereik/moment */
.imc-stelling{color:#b98be6;}                               /* draagkracht stelling */
.imc-nvt{color:#8a94a0;}
.imc-onbekend{color:#ff6b5a;}                               /* niet herkend → let op! */
.imc-voet{display:flex;gap:8px;}
.imc-voet .btn{flex:1;margin:0;}
.ronde-rijen{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-bottom:12px;border-radius:10px;}
.rr{display:flex;align-items:center;gap:10px;padding:12px 12px;border:1px solid rgba(255,255,255,.09);border-radius:10px;margin-bottom:7px;cursor:pointer;background:rgba(255,255,255,.02);transition:background .12s,border-color .12s;}
.rr:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);}
.rr-done{opacity:.72;}
.rr-txt{flex:1;min-width:0;}
.rr-id{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14px;color:#eef1f5;}
.rr-oms{font-size:12.5px;color:#9aa4b1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rr-st{flex-shrink:0;}
.rr-open{font-size:12.5px;font-weight:700;color:#e0a020;}
.rr-chip{font-size:12px;font-weight:800;white-space:nowrap;}
.rr-c1{color:#3fb56e;} .rr-c2{color:#e8590c;} .rr-c3{color:#ff6b5a;}
.ronde-voet{display:flex;gap:8px;}
.ronde-voet .btn{flex:1;margin:0;}
.ronde-leeg{padding:22px;text-align:center;color:#9aa4b1;font-size:13.5px;}
.ronde-terug{background:none;border:none;color:#9aa4b1;font-size:13px;cursor:pointer;padding:2px 0;margin-bottom:12px;}
.ronde-terug:hover{color:#eef1f5;}
.ra-id{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:19px;color:#eef1f5;}
.ra-oms{font-size:15px;color:#eef1f5;margin-top:2px;}
.ra-meta{font-size:12.5px;color:#9aa4b1;margin:4px 0 6px;}
.ra-btns{display:flex;flex-direction:column;gap:9px;margin-top:16px;}
.ronde-weg{width:100%;margin-top:12px;padding:12px;border:1px solid rgba(255,107,90,.4);border-radius:10px;background:rgba(255,107,90,.08);color:#ff8f80;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;}
.ronde-weg:hover{background:rgba(255,107,90,.15);}
.ronde-bewerk{width:100%;margin-top:12px;padding:12px;border:1px solid rgba(90,169,255,.4);border-radius:10px;background:rgba(90,169,255,.08);color:#8fc0ff;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;}
.ronde-bewerk:hover{background:rgba(90,169,255,.15);}

/* ── Bon & specificatie ──────────────────────────────────────────────────── */
.afr-bedrag{font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;white-space:nowrap;color:var(--text);}
.afr-kop{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--border);}
.afr-kop:first-child{margin-top:0;}
.afr-regel{background:var(--card);border:1px solid var(--border-2);border-radius:11px;padding:10px 12px;margin-bottom:8px;}
.afr-r1{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.afr-naam{flex:1;min-width:0;font-weight:700;font-size:14px;color:var(--text);}
.afr-hint{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:rgba(61,220,132,.16);color:#3ddc84;}
.afr-hint-alg{background:rgba(255,255,255,.13);color:#cbd3dc;}
.zek-opruim{display:flex;flex-direction:column;gap:6px;border:1px solid var(--border-2);border-radius:10px;
  padding:8px 10px;margin:6px 0;font-size:12.5px;line-height:1.45;color:var(--text);}
.zek-opruim .btn{margin:0;}
.afr-hint-afspr{background:rgba(74,158,255,.18);color:#8cc4ff;}
.afr-hint-afw{background:rgba(255,183,77,.2);color:#ffc266;}
.afr-pin{flex:0 0 auto;background:none;border:1px solid transparent;border-radius:8px;font-size:15px;line-height:1;
  padding:4px 6px;cursor:pointer;font-family:inherit;opacity:.45;filter:grayscale(1);}
.afr-pin.aan{opacity:1;filter:none;border-color:rgba(74,158,255,.45);background:rgba(74,158,255,.12);}
.afr-afspr{margin-top:10px;border:1px solid rgba(74,158,255,.35);border-radius:11px;padding:9px 11px;background:rgba(74,158,255,.06);}
.afr-afspr-kop{font-weight:800;font-size:13px;color:var(--text);margin-bottom:4px;}
.afr-afspr-rij{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);padding:3px 0;}
.afr-afspr-rij span{flex:1;min-width:0;}
.afr-afspr-uitleg{color:var(--muted);font-size:11.5px;line-height:1.45;margin-top:4px;}
.afr-weg{flex:0 0 auto;background:none;border:none;color:var(--muted);font-size:16px;line-height:1;
  padding:4px 6px;cursor:pointer;font-family:inherit;}
.afr-weg:hover{color:#ff6b6b;}
.afr-r2{display:flex;align-items:flex-end;gap:8px;}
.afr-veld{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px;}
.afr-veld span{font-size:10.5px;color:var(--muted);}
.afr-veld input{width:100%;background:var(--card-2);border:1px solid var(--border-2);border-radius:8px;
  color:var(--text);font-family:inherit;font-size:15px;padding:9px 10px;text-align:right;font-variant-numeric:tabular-nums;}
.afr-x{flex:0 0 auto;color:var(--muted);font-size:13px;padding-bottom:10px;}
.afr-r2 .afr-bedrag{flex:0 0 auto;min-width:78px;text-align:right;padding-bottom:9px;}
.afr-tr{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;
  color:var(--muted);padding:5px 0;}
.afr-tr b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:800;}
.afr-scheiding{border-top:1px solid var(--border);margin:7px 0;}
.afr-tr-eind{border-top:2px solid var(--red-accent);margin-top:7px;padding-top:10px;font-size:16px;color:var(--text);}
.afr-tr-eind b{font-size:19px;}
.afr-btw{width:46px;background:var(--card-2);border:1px solid var(--border-2);border-radius:6px;color:var(--text);
  font-family:inherit;font-size:12.5px;padding:3px 5px;text-align:right;margin:0 2px;}
.afr-postknop{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--border-2);border-radius:10px;padding:11px 12px;margin-bottom:7px;cursor:pointer;
  font-family:inherit;color:var(--text);}
.afr-postknop:hover{border-color:var(--red-accent);}
.afr-postknop-uit{opacity:.45;cursor:default;}
.afr-postnaam{flex:1;min-width:0;font-weight:700;font-size:14px;}
.afr-postmeta{flex:0 0 auto;font-size:11.5px;color:var(--muted);white-space:nowrap;}
.afr-posteigen{flex:0 0 auto;font-size:14px;opacity:.7;padding:0 2px;}
.afr-posteigen:hover{opacity:1;}
.afr-opdrrij{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--border-2);
  border-radius:10px;padding:12px;margin-bottom:8px;cursor:pointer;}
.afr-opdrrij:hover{border-color:var(--red-accent);}
.afr-opdrrij input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--red-accent);}
.afr-opdrnaam{flex:1;min-width:0;font-weight:700;font-size:14px;color:var(--text);}
.afr-kopieer{width:100%;background:var(--card-2);border:1px solid var(--border-2);border-radius:9px;
  color:var(--text);font-family:'Courier New',monospace;font-size:12.5px;line-height:1.6;padding:10px;
  resize:vertical;white-space:pre;overflow-x:auto;}

/* ── Geleverd bij een item (keurformulier) ───────────────────────────────── */
.gel-blok{background:var(--card);border:1px solid var(--border-2);border-radius:11px;padding:12px;margin-top:12px;}
.gel-kop{font-weight:700;font-size:13.5px;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.gel-sub{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:rgba(61,220,132,.16);color:#3ddc84;}
.gel-leeg{color:var(--muted);font-size:12.5px;padding:2px 0 4px;}
.gel-rij{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border);}
.gel-rij:last-child{border-bottom:none;}
.gel-naam{flex:1;min-width:0;font-size:13.5px;color:var(--text);}
.gel-knop{flex:0 0 auto;width:34px;height:34px;background:var(--card-2);border:1px solid var(--border-2);
  border-radius:9px;color:var(--text);font-size:18px;line-height:1;cursor:pointer;font-family:inherit;}
.gel-knop:hover{border-color:var(--red-accent);}
.gel-aantal{flex:0 0 auto;min-width:26px;text-align:center;font-weight:800;font-size:15px;
  color:var(--text);font-variant-numeric:tabular-nums;}
.gel-toevoeg{margin-top:10px;}
.afr-voorstellen{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px;}
.afr-voorstel{background:var(--card-2);border:1px solid var(--border-2);border-radius:999px;color:var(--text);
  font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;cursor:pointer;}
.afr-voorstel span{color:var(--muted);font-weight:600;}
.afr-voorstel:hover{border-color:var(--red-accent);}
.gel-snelrij{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px;}
.gel-snel{background:var(--card-2);border:1px solid var(--border-2);border-radius:999px;color:var(--text);
  font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 13px;cursor:pointer;text-align:left;}
.gel-snel:hover{border-color:var(--red-accent);}
.afr-tr-let{color:#f9a03f;font-size:12.5px;line-height:1.5;display:block;padding:8px 0 2px;}
.afr-tr-let b{color:#f9a03f;}
.gel-keuzerij{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border-2);
  border-radius:10px;padding:9px 11px;margin-bottom:7px;flex-wrap:wrap;}
.gel-keuzenaam{flex:1 1 140px;min-width:0;font-weight:700;font-size:13.5px;color:var(--text);}
.gel-variant{flex:0 0 auto;background:var(--card-2);border:1px solid var(--border-2);border-radius:999px;
  color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;padding:7px 12px;cursor:pointer;}
.gel-variant:hover{border-color:var(--red-accent);color:var(--text);}
.gel-variant b{color:#3ddc84;}

/* ── Opslag: de balk die blijft staan als opslaan mislukt ────────────────── */
.opslag-balk{position:fixed;top:0;left:0;right:0;z-index:11000;display:flex;align-items:flex-start;gap:10px;
  background:#7a1d1d;border-bottom:2px solid #ff6b6b;color:#ffe4e4;padding:12px 14px;
  box-shadow:0 6px 20px rgba(0,0,0,.45);}
.opslag-balk[hidden]{display:none;}
.ob-tx{flex:1;min-width:0;font-size:13.5px;line-height:1.5;}
.ob-tx b{display:block;color:#fff;font-size:14px;margin-bottom:2px;}
.ob-tx span{display:block;color:#ffcccc;font-size:12.5px;}
.ob-x{flex:0 0 auto;background:none;border:none;color:#ffcccc;font-size:18px;line-height:1;
  padding:2px 4px;cursor:pointer;font-family:inherit;}
.ob-x:hover{color:#fff;}
.om-bar{height:10px;background:var(--card-2);border:1px solid var(--border-2);border-radius:999px;overflow:hidden;}
.om-vul{display:block;height:100%;border-radius:999px;transition:width .3s;}
.om-ok{background:#3ddc84;} .om-bijna{background:#f9a03f;} .om-vol{background:#ff6b6b;}
.om-tx{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.5;}
.om-zacht{opacity:.8;}
.om-let{font-size:12.5px;color:#f9a03f;margin-top:8px;line-height:1.55;}

/* Mapnaam bij het importeren. Zonder dit kwam alles van één klant op één hoop —
   drie lijsten achter elkaar importeren gaf één onleesbare map. */
.imc-map{background:rgba(47,129,201,.10);border:1px solid rgba(47,129,201,.4);
  border-radius:10px;padding:12px 14px;margin-bottom:14px;}
.imc-map label{display:block;font-size:12px;color:#7fc0ff;font-weight:700;margin-bottom:6px;}
.imc-map input{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--border-2);
  background:var(--card);color:var(--text);font-family:inherit;font-size:13.5px;}
.imc-map input:focus{outline:none;border-color:var(--blue);}
.imc-map-uitleg{font-size:11.5px;color:#9aa4b1;line-height:1.5;margin-top:7px;}

/* Beschermingsklasse als keuze van drie knoppen: met het apparaat in de hand
   is dat één tik, en dan is de klasse een waarneming in plaats van een
   aanname. Zie renderDocVelden in docvelden.js. */
.klassekeuze{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.klassebtn{flex:1 1 auto;min-width:74px;padding:9px 10px;border:1px solid var(--lijn,#2a2e37);
  background:var(--kaart,#1b1e24);color:inherit;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}
.klassebtn:hover{border-color:var(--accent,#4a9eff)}
.klassebtn.on{background:var(--accent,#4a9eff);border-color:var(--accent,#4a9eff);color:#fff}
.klassebtn.leeg{font-weight:400;opacity:.75}
.klassebtn.leeg.on{background:var(--lijn,#2a2e37);color:inherit;opacity:1}

/* Afkeurcriteria uit TCVT bijlage A op het keurformulier: letterlijk de tekst
   uit het normblad, leesbaar terwijl je meet. Zie toonAfkeurcriteria(). */
.afkeurlijst{margin:0;padding-left:18px}
.afkeurlijst li{margin-bottom:7px;line-height:1.45;font-size:13.5px}
.afkeurlijst li::marker{color:var(--accent,#4a9eff)}
.afkeurgroep{font-weight:650;font-size:13px;margin:12px 0 4px;color:var(--accent,#4a9eff)}
.afkeurgroep:first-child{margin-top:0}

/* Afkeurcriteria: naslag, geen vragenlijst. Standaard ingeklapt, met in de kop
   de norm en het aantal punten zodat je weet wat je opent. Zie
   toonAfkeurcriteria() in keurform.js. */
.criteria-blok{margin:8px 0 14px;border:1px solid var(--lijn,#2a2e37);border-radius:9px;overflow:hidden}
.criteria-kop{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 13px;background:var(--kaart,#1b1e24);border:0;color:inherit;font:inherit;
  font-size:13.5px;font-weight:600;text-align:left;cursor:pointer}
.criteria-kop:hover{background:var(--lijn,#2a2e37)}
.criteria-pijl{font-weight:400;font-size:12.5px;opacity:.7;white-space:nowrap}
.criteria-body{padding:4px 15px 12px}

/* Machineveiligheid: drie vragen boven de waarschuwingen. Bewust geen
   ingeklapt blok zoals de afkeurcriteria — dit moet je zien staan. */
.machine-blok{margin:8px 0 10px;border:1px solid var(--lijn,#2a2e37);border-radius:9px;
  padding:10px 12px;background:rgba(255,176,32,.06)}
.machine-kop{font-weight:600;font-size:12px;margin-bottom:8px;opacity:.9}
.machine-vraag{margin-bottom:8px}
.machine-vraag:last-child{margin-bottom:0}
.machine-vraag .mv-tekst{font-size:12px;margin-bottom:4px;line-height:1.4}
.machine-vraag .klassebtn{min-width:56px;padding:6px 10px}

/* Locatiestrook in de keuringsronde. Scrollt opzij als er veel ruimtes zijn;
   de knoppen zijn bewust groot genoeg voor werkhandschoenen. */
.ronde-loc{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;margin-bottom:2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rl-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--card-2);border:1px solid var(--border-2);color:var(--text);
  border-radius:999px;padding:9px 13px;font-size:13px;font-weight:700;white-space:nowrap}
.rl-chip .rl-n{background:var(--red);color:#fff;border-radius:999px;
  min-width:20px;text-align:center;padding:1px 6px;font-size:12px;font-weight:800}
.rl-chip.aan{border-color:var(--red);background:rgba(192,45,34,.14)}
.rl-chip.rl-klaar{opacity:.45}
.rl-chip.rl-klaar .rl-n{background:var(--border-2);color:var(--text)}

/* Knop "Vandaag" naast de inspectiedatum. Licht op zolang er nog de datum
   van de vorige keuring staat, zodat je ziet dat je hem moet zetten. */
.datumrij{display:flex;gap:6px;align-items:stretch}
.datumrij input{flex:1 1 auto;min-width:0}
.datum-nu{flex:0 0 auto;cursor:pointer;border-radius:9px;padding:0 14px;
  background:var(--card-2);border:1px solid var(--border-2);color:var(--text);
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;white-space:nowrap}
.datum-nu.nodig{border-color:var(--red);background:rgba(192,45,34,.16)}
.datum-nu:hover{background:var(--red);border-color:var(--red);color:#fff}

/* Nummers wijzigen: oud links, nieuw rechts, botsingen in het rood. */
.omn-card{max-width:760px;width:96vw}
.omn-uitleg{font-size:12.5px;line-height:1.5;opacity:.85;margin-bottom:10px}
.omn-vul{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.omn-vulblok{flex:1 1 280px;display:flex;flex-direction:column;gap:6px}
.omn-vulblok label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.7;font-weight:700}
.omn-vulblok textarea{width:100%;border-radius:9px;padding:8px 10px;font-family:inherit;
  background:var(--card-2);border:1px solid var(--border-2);color:var(--text)}
.omn-reeks{display:flex;gap:6px;flex-wrap:wrap}
.omn-telrij{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;border-top:1px solid var(--border-2);font-size:13px}
.omn-lijst{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.omn-rij{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;
  background:var(--card-2);border:1px solid transparent}
.omn-rij-fout{border-color:var(--red);background:rgba(192,45,34,.10)}
.omn-oud{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.omn-oud b{font-size:13px}
.omn-oud span{font-size:11.5px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.omn-pijl{flex:0 0 auto;opacity:.5}
.omn-nieuw{flex:0 0 190px;display:flex;flex-direction:column;gap:2px}
.omn-nieuw input{width:100%;border-radius:8px;padding:7px 9px;font-family:inherit;
  background:var(--card);border:1px solid var(--border-2);color:var(--text)}
.omn-fout{color:var(--red);font-size:11px;font-weight:700}
@media(max-width:520px){ .omn-nieuw{flex:0 0 128px} .omn-oud span{display:none} }

/* Trefferlijst: boven elk item staat waar het vandaan komt. */
.zoek-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;margin-bottom:8px;
  border-radius:9px;background:var(--card-2);border:1px solid var(--border-2);font-size:13px}
.zoek-rij{margin-bottom:8px}
.zoek-waar{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.6;
  font-weight:700;padding:0 4px 3px}

/* Herinneringen op het startscherm. Alleen zichtbaar als er echt iets ligt;
   geen popup, geen wegklikken -- een regel met de knop die het oplost. */
.herin-blok{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.herin-rij{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;
  background:var(--card-2);border:1px solid var(--border-2);font-size:13px;line-height:1.4}
.herin-tekst{flex:1 1 auto;min-width:0}
.herin-knop{flex:0 0 auto;cursor:pointer;border:none;border-radius:8px;padding:8px 14px;
  background:var(--red);color:#fff;font-family:inherit;font-weight:800;font-size:12.5px;white-space:nowrap}
.herin-urgent{border-color:var(--red);background:rgba(192,45,34,.12)}
.herin-letop{border-color:#c8892a;background:rgba(200,137,42,.12)}
.herin-bezig{opacity:.8}
.herin-bezig .herin-knop{background:var(--border-2);color:var(--text)}

/* De enige melding die tijdens het keuren mag onderbreken: je werk staat
   nog niet veilig. Alles wat kan wachten, wacht tot het startscherm. */
.ronde-sync{display:flex;align-items:center;gap:10px;margin:2px 0 10px;padding:9px 12px;
  border-radius:9px;font-size:12.5px;line-height:1.35;
  background:rgba(200,137,42,.14);border:1px solid #c8892a}
.ronde-sync span{flex:1 1 auto;min-width:0}
.ronde-sync button{flex:0 0 auto;cursor:pointer;border:none;border-radius:8px;padding:7px 12px;
  background:#c8892a;color:#fff;font-family:inherit;font-weight:800;font-size:12px;white-space:nowrap}
.ronde-sync-uit{background:rgba(192,45,34,.14);border-color:var(--red)}
.ronde-sync-uit button{background:var(--red)}

/* De rondedatum is aanklikbaar: ook halverwege moet je hem nog kunnen
   verzetten, bijvoorbeeld als je het werk van gisteren bijwerkt. */
button.ronde-datum{cursor:pointer;font-family:inherit;color:inherit;
  background:var(--card-2);border:1px solid var(--border-2);border-radius:8px;padding:5px 10px}
button.ronde-datum:hover{border-color:var(--red)}

/* De map naast de klantnaam in de kop van de ronde. */
/* De mapnaam is nu een knop: je wisselt er halverwege de ronde mee van map,
   zonder de ronde af te sluiten. Blijft er wel uitzien als een onderschrift. */
.ronde-mapnaam{display:inline-block;font-size:12px;font-weight:600;opacity:.75;margin-top:4px;
  background:var(--card-2);border:1px solid var(--border-2);border-radius:8px;
  color:inherit;font-family:inherit;padding:6px 10px;min-height:34px;cursor:pointer}
.ronde-mapnaam:hover{opacity:1;border-color:rgba(255,255,255,.28)}
@media (max-width:820px){ .ronde-mapnaam{min-height:44px} }

/* Meerdere tegelijk afvinken in de ronde. */
.rr-vink{flex:0 0 auto;width:22px;height:22px;border-radius:6px;margin-right:10px;
  border:1.5px solid var(--border-2);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#fff}
.rr-vink.aan{background:var(--red);border-color:var(--red)}
.rr-gekozen{border-color:var(--red)}

/* ═══ OPGEMETEN OP DE TELEFOON ═══════════════════════════════════════════════
   Nagemeten op een schermbreedte van 402 punten — een iPhone 16 Pro. Het meeste
   klopte al: geen horizontale overloop, invoervelden op 16 punten zodat iOS niet
   inzoomt, itemrijen 63 punten hoog en de onderbalk 69. Drie dingen bleven
   achter, en de handschoenmodus hielp daar niet bij omdat die ze niet noemde.

   Deze regels staan bewust onderaan het bestand: hierboven staan de gewone
   regels voor dezelfde onderdelen, en die zouden anders winnen omdat ze later
   komen. Een mediaregel telt niet zwaarder, alleen de volgorde telt.
   ========================================================================== */
@media (max-width: 820px){

  /* 1 — Het label boven elk invulvak was 10 punten, in hoofdletters en grijs.
         Dat leest niet prettig in een werkplaats of buiten in de zon. Alleen op
         een telefoon groter; op een beeldscherm blijft de opmaak zoals hij was. */
  .field label{ font-size:11.5px; letter-spacing:.3px; }

  /* 2 — De datumknop van de keuringsronde was 28 punten hoog, terwijl je hem
         met een werkhandschoen moet kunnen raken. Apple houdt 44 punten aan als
         ondergrens en dat is met handschoenen aan de krappe kant, niet ruim. */
  .ronde-datum{ min-height:44px; padding:7px 11px; font-size:13.5px;
    border:1px solid var(--border-2); border-radius:9px; background:var(--card-2); }

  /* 3 — De locatiechips zaten met 39 punten net onder die grens. */
  .rl-chip{ min-height:44px; }

  /* 4 — De itemlijst stond vast op 46% van de schermhoogte. Op een telefoon van
         874 punten hoog kwamen er zo 5 items in beeld terwijl er onderaan 228
         punten leeg bleven. Nu neemt de lijst de ruimte die er werkelijk is:
         alles eromheen — kop, voortgangsbalk, zoekbalk, locatiestrook,
         knoppenrij en de onderbalk — is samen ongeveer 360 punten.

         100dvh rekent met de adresbalk van Safari die in- en uitschuift; de
         regel erboven is de terugval voor browsers die dat niet kennen. */
  .ronde-rijen{ max-height: calc(100vh - 360px); }
  .ronde-rijen{ max-height: max(46vh, calc(100dvh - 360px)); }
}

/* De handschoenmodus noemde deze drie niet, waardoor ze juist klein bleven op
   het moment dat je grote raakvlakken nodig hebt. */
body.handschoenen .ronde-datum{ min-height:52px; font-size:15px; }
body.handschoenen .rl-chip{ min-height:52px; font-size:15px; padding:11px 15px; }
body.handschoenen .field label{ font-size:13px; }

/* ── Een vastgelegde lijst bekijken ────────────────────────────────────────
   Je kon een archieflijst alleen downloaden of terugzetten. Op een telefoon is
   downloaden onhandig — dan moet je het bestand opzoeken en er een Excel-app bij
   pakken — terwijl je meestal alleen even wilt zien wat er dat jaar stond.
   Dit is dat kijkvenster: de tabel scrollt opzij, de pagina zelf niet. */
.inv-bekijk{margin-top:14px;border:1px solid var(--border-2);border-radius:11px;
  background:var(--card-2);overflow:hidden;}
.inv-bekijk-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 13px;border-bottom:1px solid var(--border-2);}
.inv-bekijk-kop b{font-size:14px;}
.inv-bekijk-kop span{flex:1;min-width:0;font-size:12px;color:var(--muted);}
.inv-bekijk-tabelwrap{max-height:52vh;overflow:auto;-webkit-overflow-scrolling:touch;}
.inv-bekijk-tabel{width:100%;border-collapse:collapse;font-size:12.5px;}
.inv-bekijk-tabel th{position:sticky;top:0;z-index:1;background:var(--card);
  text-align:left;padding:8px 10px;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--border-2);white-space:nowrap;}
.inv-bekijk-tabel td{padding:8px 10px;border-bottom:1px solid var(--border);
  vertical-align:top;max-width:220px;}
.inv-bekijk-tabel tr:last-child td{border-bottom:none;}

/* Welk filter er aan staat als de lijst leeg blijft. "Geen items die aan het
   filter voldoen" liet je zoeken naar een knop die je schermen geleden had
   aangetikt; nu staat het er gewoon, met een knop om het uit te zetten. */
.empty-filter{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--muted);}
.empty .btn{width:auto;margin-top:12px;}

/* Zoek je in een ronde iets dat niet in de gekozen map zit, dan zoekt hij
   verder in de andere mappen van die klant. Deze twee laten zien dat dat is
   gebeurd — anders keur je iets af in de veronderstelling dat het bij deze
   ronde hoort. */
.rr-buiten{background:rgba(90,169,255,.10);border:1px solid rgba(90,169,255,.35);
  border-radius:10px;padding:9px 12px;margin-bottom:8px;font-size:12.5px;
  line-height:1.5;color:#cfe4ff}
.rr-map{display:inline-block;margin-left:8px;font-family:'Barlow',sans-serif;
  font-size:11px;font-weight:700;color:#8fc0ff;background:rgba(90,169,255,.14);
  border-radius:999px;padding:2px 8px;vertical-align:middle}

/* ── Mapkeuze in de keuringsronde ──────────────────────────────────────────
   Dit was een popup met genummerde regels: "1, 2, 3 alles tegelijk". Dat leest
   niet en je kunt er met een handschoen aan niets mee. Nu is het een scherm met
   knoppen zoals de rest van de tool, met per map hoeveel er nog te doen is. */
.mk-lijst{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.mk-rij{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  padding:14px 15px;border:1px solid var(--border-2);border-radius:11px;
  background:var(--card-2);color:var(--text);font-family:inherit;text-align:left;
  cursor:pointer;min-height:56px;transition:border-color .12s,background .12s;}
.mk-rij:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);}
.mk-rij.mk-nu{border-color:var(--red);background:rgba(192,45,34,.12);}
.mk-naam{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;
  line-height:1.15;display:flex;align-items:center;gap:8px;}
.mk-naam::before{content:'🗂';font-family:inherit;}
.mk-nu-tag{font-family:'Barlow',sans-serif;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;background:var(--red);color:#fff;
  border-radius:999px;padding:2px 8px;}
.mk-stand{font-size:12.5px;color:var(--muted);}
.mk-stand b{color:#e0a020;}

/* ── Foto in de keuringsronde ─────────────────────────────────────────────── */
.ronde-foto{width:100%;margin-top:12px;padding:13px;border:1px dashed rgba(255,255,255,.28);
  border-radius:10px;background:transparent;color:var(--text);font-weight:700;font-size:14px;
  cursor:pointer;font-family:inherit;min-height:48px;}
.ronde-foto:hover{background:rgba(255,255,255,.05);}
.ronde-fotos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.ronde-fotos img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border-2);}
.ronde-fotos .rf-tel{font-size:12px;color:var(--muted);align-self:center;}

/* ── Nieuw hoofdnummer: waar gaat het oude nummer heen ───────────────────── */
.hn-vraag{margin:14px 0 8px;font-size:14px;line-height:1.4;}
.hn-keuzes{display:flex;flex-direction:column;gap:7px;}
.hn-keuze{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  padding:11px 13px;border:1px solid var(--border-2);border-radius:10px;background:var(--card-2);
  color:var(--text);font-family:inherit;text-align:left;cursor:pointer;min-height:52px;}
.hn-keuze.aan{border-color:var(--red);background:rgba(192,45,34,.13);}
.hn-titel{font-weight:800;font-size:14px;}
.hn-sub{font-size:12px;color:var(--muted);}
.hn-sub b{color:var(--text);}
.hn-noot{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.5;}

/* ── Bulk omnummeren: dezelfde keuze voor de hele reeks ──────────────────── */
.omn-waar{margin:4px 0 10px;}

/* ── Controle vóór importeren op een telefoon ──────────────────────────────
   Vier of vijf kolommen passen niet op 390 pixels: de tabel schoof zijwaarts weg
   en juist de kolom waaróm een regel nagekeken moet worden viel buiten beeld.
   Onder 700px wordt elke rij een kaartje, met de kolomnaam (data-l) vóór de
   waarde. Op een groter scherm blijft het gewoon een tabel. */
@media(max-width:700px){
  .imc-tabelwrap{max-height:none;border:none;border-radius:0;overflow:visible;}
  .imc-tabel thead{display:none;}
  .imc-tabel,.imc-tabel tbody,.imc-tabel tr,.imc-tabel td{display:block;width:auto;}
  .imc-tabel tr{border:1px solid rgba(255,255,255,.12);border-radius:10px;
    padding:8px 10px;margin-bottom:8px;background:rgba(255,255,255,.03);}
  .imc-tabel td{border:none;padding:3px 0;white-space:normal;max-width:none;}
  .imc-tabel td[data-l]:before{content:attr(data-l) ": ";color:#9aa4b1;font-weight:700;}
  .imc-tabel td:empty{display:none;}
  .wlt-reden{min-width:0;}
  .imc-ruw{max-width:none;}

  .dub-tabelwrap{overflow-x:visible;}
  .dub-tabel{white-space:normal;}
  .dub-tabel thead{display:none;}
  .dub-tabel,.dub-tabel tbody,.dub-tabel tr,.dub-tabel td{display:block;width:auto;}
  .dub-tabel tr{border:1px solid var(--border-2);border-radius:10px;padding:9px 11px;margin-bottom:9px;}
  .dub-tabel td{border:none;padding:2px 0;}
  .dub-tabel td[data-l]:before{content:attr(data-l) ": ";color:#8d99ab;font-weight:700;}
  .dub-tabel .dub-kies label{display:flex;align-items:center;gap:9px;min-height:40px;font-size:14px;}
  .dub-tabel .dub-kies input{width:20px;height:20px;}
  .dub-nr{font-size:11px;}
  .dub-vol{white-space:normal;}
  .dub-best{background:rgba(28,122,69,.10);}
  .dub-best td{background:transparent;}

  /* Hetzelfde voor het kijkvenster van het inventarisarchief: tien kolommen
     naast elkaar passen niet op een telefoon. Het venster blijft wel een venster
     met een eigen schuifbalk, anders wordt de pagina eindeloos lang. */
  .inv-bekijk-tabel thead{display:none;}
  .inv-bekijk-tabel,.inv-bekijk-tabel tbody,.inv-bekijk-tabel tr,.inv-bekijk-tabel td{display:block;width:auto;}
  .inv-bekijk-tabel tr{border:1px solid var(--border-2);border-radius:10px;
    padding:8px 10px;margin:0 0 8px;background:rgba(255,255,255,.02);}
  .inv-bekijk-tabel td{border:none;padding:2px 0;white-space:normal;}
  .inv-bekijk-tabel td[data-l]:before{content:attr(data-l) ": ";color:var(--muted);font-weight:700;}
  .inv-bekijk-tabel td:empty{display:none;}
  .inv-bekijk-tabelwrap{max-height:60vh;}
}

/* ── Herkeuringsronde: tabbladen en knoppen die in beeld blijven ────────────
   Onderaan het bestand, zodat deze regels winnen van de gewone regels hierboven.
   De knoppenrij scrolde mee uit beeld zodra je door de lijst ging; nu plakt hij
   onderaan het venster. */
.ronde-tabs{display:flex;gap:6px;margin:0 0 10px;}
.rt-tab{flex:1;min-height:44px;padding:6px 8px;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  background:#141a24;color:#cbd3dc;font-weight:700;font-size:13.5px;font-family:inherit;cursor:pointer;line-height:1.15;}
.rt-tab b{margin-left:3px;color:#eef1f5;}
.rt-tab.aan{background:var(--red);border-color:var(--red);color:#fff;}
.rt-tab.aan b{color:#fff;}
.rr-cweg{color:#9aa4b1;}
.ronde-voet{position:sticky;bottom:-16px;z-index:5;margin:0 -4px -4px;padding:12px 4px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(26,33,44,0) 0,#1a212c 14px);flex-wrap:wrap;}
body.handschoenen .rt-tab{min-height:52px;font-size:15px;}

/* ── Automatische back-ups in Beheer ─────────────────────────────────────── */
/* Eigen klassen (bk-): .ab-rij is van het adresboek en de bonnenlijst. */
.bk-lijst{max-height:280px;overflow-y:auto;border:1px solid var(--border-2);border-radius:10px;}
.bk-rij{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text);}
.bk-rij:last-child{border-bottom:none;}
.bk-rij span{flex:1;min-width:0;}
.bk-rij small{color:var(--muted);margin-left:4px;}
.bk-rij .bk-btn{flex:0 0 auto;padding:6px 10px;font-size:15px;}

/* ── Knoppen bovenaan het keurformulier: een woordje onder het icoon ────────
   Op een telefoon kun je niet met de muis over een knop gaan om te zien wat hij
   doet; alleen een 📑, 🔖 of 📄 zei niet genoeg. */
.keur-cert,.keur-del{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:5px 8px;line-height:1.05;min-width:52px;}
.keur-cert[hidden],.keur-del[hidden]{display:none!important;}
.kt-ic{font-size:16px;}
.kt-lb{font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--muted);}
.keur-del .kt-lb{color:#ff6b5a;}
@media (max-width:420px){
  .keur-top{gap:6px;}
  .keur-cert,.keur-del{min-width:46px;padding:5px 5px;}
  .kt-lb{font-size:9.5px;}
}

/* ── Aanvragen en afmeldingen van klanten (klantacties.js) ───────────────── */
.ka-blok{margin:0 0 16px;}
.ka-kop{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin:4px 0 8px;}
.ka-kop b{background:var(--red-accent,#e11d2a);color:#fff;border-radius:999px;padding:1px 8px;font-size:12px;margin-left:6px;}
.ka-kaart{background:var(--card);border:1px solid var(--red-accent,#e11d2a);border-radius:12px;padding:12px 14px;margin-bottom:8px;}
.ka-titel{font-size:14px;color:var(--text);margin-bottom:4px;}
.ka-regel{font-size:13px;color:var(--text);margin-top:2px;white-space:pre-wrap;}
.ka-meta{font-size:12px;color:var(--muted);margin-top:6px;}
.ka-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.ka-vlag{font-size:10.5px;font-weight:700;text-transform:uppercase;background:rgba(61,220,132,.15);color:#3ddc84;border-radius:6px;padding:1px 6px;margin-left:4px;}
.rr-afm{font-size:12px;color:#ffb35c;margin-top:3px;}

/* ── Samenvatting naar de klant (samenvatting.js) ───────────────────────── */
.sv-uitleg{font-size:13px;color:var(--muted);margin-bottom:12px;}
.sv-vink{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);margin:4px 0 10px;cursor:pointer;}
.sv-eerder{background:rgba(255,179,92,.12);border:1px solid rgba(255,179,92,.45);color:#ffb35c;border-radius:10px;padding:9px 12px;font-size:13px;margin:6px 0 10px;}
.sv-voorbeeld{background:#fff;border-radius:10px;padding:14px;color:#1f2933;overflow-x:auto;}
#svModal .modal-card{max-width:720px;}

/* ── Nieuwe middelen van de klant en te lang wachten (klantacties.js) ─────── */
.ka-laat{color:#ff6b5a;font-weight:700;}
.ka-ronde{background:rgba(78,161,255,.10);border:1px solid rgba(78,161,255,.45);border-radius:12px;padding:10px 12px;margin:10px 0;}
.ka-ronde-kop{font-weight:700;font-size:13.5px;color:var(--text);margin-bottom:6px;}
.ka-ronde-rij{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--border);}
.ka-ronde-rij:first-of-type{border-top:none;}
.ka-ronde-t{flex:1;min-width:0;font-size:13.5px;color:var(--text);}
.ka-ronde-t small{display:block;color:var(--muted);font-size:12px;}

/* ── Startscherm: "Ook handig" onder de vier hoofdtaken ─────────────────── */
.home-meer-kop{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:18px 2px 8px;}
.home-meer{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.home-meer button{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card);
  border:1px solid var(--border-2);border-radius:12px;padding:10px 4px;color:var(--text);font-family:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer;}
.home-meer button span{font-size:20px;}
.home-meer button:hover{border-color:var(--red-accent);}

/* ── Keur- en afkeurpunten (keurnaslag.js) ───────────────────────────────── */
.naslag-uitleg{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 10px}
.naslag-zoek{width:100%;padding:9px 11px;border-radius:8px;margin-bottom:10px}
.naslag-groep{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
.naslag-kaart{border:1px solid var(--lijn,#2a2e37);border-radius:9px;margin-bottom:6px;padding:0 12px}
.naslag-kaart>summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px;padding:10px 0;list-style:none}
.naslag-kaart>summary::-webkit-details-marker{display:none}
.naslag-kaart[open]>summary{border-bottom:1px solid var(--lijn,#2a2e37);margin-bottom:6px}
.naslag-titel{font-weight:600;font-size:14px}
.naslag-meta{color:var(--muted);font-size:12px;white-space:nowrap}
.naslag-bron{color:var(--muted);font-size:12px;line-height:1.4;margin:4px 0 8px}
.naslag-extra{margin:10px 0 12px}
.naslag-extra>summary{cursor:pointer;color:var(--accent,#4a9eff);font-size:13px}
.naslag-leeg{color:var(--muted);padding:12px 0}