/* Werkplekinspectie — css/beheer.css
   Beheer (monteurs, doel % conform, rapporten mailen naar, gebruikers), het overzicht op Vandaag voor wie niet inspecteert,
   programma-voorstel op de Planning en gemiste-inspectie-meldingen.
   Stijl B: crème achtergrond, witte ronde kaarten, één donkergroen accent; rood = actie te laat, warm oranje =
   inspectie niet gedaan (styles.css, "Te laat"). */

/* ---- Beheer ---- */
.bhgrid{display:grid;gap:14px;grid-template-columns:1fr}
.bhkol{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(min-width:900px){
  /* links de gebruikers (de hoofdtaak), rechts monteurs, doel en rapporten onder elkaar: kolommen even hoog (de laatste
     kaart rechts rekt mee). Op de telefoon staat Gebruikers bovenaan (zelfde volgorde als in de DOM). */
  .bhgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .bhkol>.bhkaart:last-child{flex:1}
  .bhgrid>.bhteam{margin-top:0}
  .bhgrid.enkel{grid-template-columns:1fr}
  .bhgrid.enkel .bhlijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));column-gap:32px}
  .bhgrid.enkel .bhrij:last-child{border-bottom:1px solid var(--line, #F1ECE4)}
  .tabbar a.bhtab{margin-top:auto}
}
.bhkaart .bhkop{font-size:18px;font-weight:800;display:flex;align-items:baseline;gap:8px;margin:0 0 2px}
.bhkaart .bhkop .sub{font-size:13.5px;font-weight:700;color:var(--soft)}
.bhuitleg{margin:4px 0 12px;line-height:1.45}
.bhtoevoeg,.bhdoel{display:flex;gap:8px;align-items:center}
.bhtoevoeg .fin{flex:1;min-width:0}
.bhtoevoeg .btn.sm,.bhdoel .btn.sm,.bhrij .btn.sm{width:auto;flex:none;min-height:44px;padding:0 16px}
.bhdoel .fin{width:110px;flex:none;font-weight:800;font-size:17px}
.bhpct{font-weight:800;color:var(--soft);font-size:17px;margin-right:6px}
.bhstand{margin-top:2px}
/* foutmelding en "geen doel" niet tegen elkaar aan */
#bh-doel-fout:not(:empty){margin-bottom:10px}
.bhlijst{margin-top:2px}
.bhrij{gap:10px;min-height:58px;padding:8px 0}
.bhrij:last-child{border-bottom:0}
.bhrij .grow{flex:1;min-width:0}
.bhrij .t{font-weight:800;overflow-wrap:anywhere}
.bhrij.uit .t{color:var(--soft)}
.bhrij.uit .mini-av,.bhrij.uit .pini{background:#F4EDE3;color:var(--soft);box-shadow:none}
/* wijzigen: naam over de hele breedte, knoppen eronder */
.bhrij.bewerk{flex-wrap:wrap;padding:12px 0}
.bhrij.bewerk .fin{flex:1 1 100%;min-width:0}
.bhbew{display:flex;gap:8px;flex:1 1 100%}
.bhbew .btn.sm{flex:1}
@media(min-width:441px){.bhbew .btn.sm{flex:none}}
.bhlink{flex:1 1 100%;text-align:left;font-size:13.5px;font-weight:800;color:var(--accent);padding:6px 0;min-height:40px}
.bhlink span{font-weight:600;color:var(--soft)}
.bhknop{position:relative;flex:none;min-height:40px;padding:0 14px;border-radius:12px;font-size:13.5px;font-weight:800;color:var(--accent);background:#fff;box-shadow:inset 0 0 0 1.5px #E8DDCD}
.bhknop:active{background:#FBF7F1}
.bhvh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.bhsub{font-size:13px;font-weight:800;color:#6E6255;letter-spacing:.04em;text-transform:uppercase;margin:18px 0 2px}
@media(max-width:440px){
  .bhkaart{padding:16px 14px}
}
/* Gebruikers (beheerrollen): naam, functie, rol, actief en laatst ingelogd; "Wijzig" opent een venster */
.bhteam{margin-top:0;min-width:0}
.bhkopregel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.bhkopregel .bhkop{margin:0}
.bhkopregel .btn.sm{width:auto;flex:none;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:6px}
.bhkopregel .btn.sm svg{width:auto;display:inline-block;flex:none}
@media(max-width:440px){.bhkopregel .btn.sm{flex:1 1 100%;justify-content:center}}
.bhgebr{align-items:flex-start}
.bhgebr .pini{margin-top:2px}
.bhgebr .bhfunctie{display:block;margin-top:1px}
.bhmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;font-size:12.5px}
.bhroltekst{font-size:12.5px;font-weight:800;color:var(--accent);background:var(--accent-bg);border-radius:999px;padding:4px 10px}
.bhstatus{font-weight:800;color:#2F5D50}
.bhstatus.uit{color:#6E6255}
.bhlaatst{color:#6E6255}
/* nog niet ingelogd: uitnodiging staat open (misschien verlopen; via Wijzig een nieuwe link) */
.bhopen{font-weight:800;color:#8A4F0A;background:var(--warm, #FCEBD3);border-radius:999px;padding:3px 9px}
.bhlet{margin:10px 0 4px;line-height:1.45}
.bhlet[hidden]{display:none}
.bhgebr .bhknop{align-self:center}
.bhregels{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:#6E6255}
#bh-gebr-fout:not(:empty),#bh-ontvanger-fout:not(:empty){margin:6px 0 10px}
.bhscheid{height:1px;background:var(--line, #F1ECE4);margin:18px 0 14px}
.bhgebruitleg{margin:8px 0 0;line-height:1.45}
.bhdemolink{margin:0 0 12px;line-height:1.45}
.bhlinkveld.fin{font-size:13.5px;font-family:inherit;overflow:hidden;text-overflow:ellipsis}
.bhlinkknoppen{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.bhlinkknoppen .btn{flex:1 1 160px;width:auto;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
#gu-gekopieerd{margin-top:8px;min-height:1.4em;font-weight:700;color:var(--accent)}
/* rapporten mailen naar: keuzelijst over de breedte, knop ernaast; op de telefoon de lijst over de hele breedte en de
   knop eronder (zo past een hele naam met rol) */
.bhontvanger .fin{flex:1;min-width:0;width:auto;font-weight:700;font-size:15px;text-overflow:ellipsis}
@media(max-width:600px){
  .bhontvanger{flex-wrap:wrap}
  .bhontvanger .fin{flex:1 1 100%}
  .bhontvanger .btn.sm{flex:1 1 100%}
}
.bhontvnu{margin-top:2px}
/* Vandaag voor QHSE-manager en beheerder: overzicht in plaats van "inspectie starten" */
.bhoverzicht{margin:-4px 0 14px;line-height:1.45;max-width:640px}
.bhteamacties svg{width:auto;display:inline-block;flex:none}

/* gedeeld met het team of alleen op dit toestel; melding als de server een wijziging weigerde */
.bhdeel{margin:12px 4px 0;font-size:13px;line-height:1.45;color:#6E6255}
.bhsyncfout{margin:0 0 12px}
.bhsyncfout .bhlink{display:inline;min-height:0;padding:0 0 0 4px;color:inherit;text-decoration:underline}

/* ---- Programma-voorstel (Planning) ---- */
.listcard.progrij{margin:-4px 0 16px;padding-top:0;padding-bottom:0}
.progrij .vknop{min-height:64px}
.progrij svg,.vgemist svg,.bhknop svg{width:auto;display:inline-block;flex:none}
.progvs{margin:0 0 8px}
.vsal{margin:0 0 8px;font-size:13.5px}
.progvs h2{margin-top:2px}
/* kicker: het voorstel komt uit vaste regels en de projectplanning (geen AI-voorstel, dus geen lila) */
.vskicker{font-size:13.5px;margin:6px 0 0}
.vsuitleg{margin:0 0 6px;font-size:14px;line-height:1.45}
.vswaarom{margin:0 0 12px;font-size:13.5px}
.vswaarom summary{cursor:pointer;font-weight:800;color:var(--accent);padding:6px 0;min-height:32px;list-style-position:inside}
.vswaarom p{margin:4px 0 0;line-height:1.5}
.vsgroep{font-size:13px;font-weight:800;color:#6E6255;margin:14px 2px 8px}
.vskaart{position:relative;box-shadow:var(--shadow),inset 0 0 0 1.5px #EFE6D8}
.vskaart.vsfout{box-shadow:var(--shadow),inset 0 0 0 2px var(--red)}
.vskaart .vsreden{font-size:12.5px;font-weight:700;padding-right:44px;margin-top:2px}
.vskaart .titel{margin-top:2px;padding-right:44px}
.vskaart .vsweg{position:absolute;top:12px;right:12px}
.vslooptijd{margin-top:2px}
.vslet{margin-top:6px;font-weight:700;color:#6E6255}
.vsweg{flex:none;width:36px;height:36px;border-radius:50%;background:#F4EDE3;color:#6E6255;font-size:20px;line-height:1;display:grid;place-items:center}
.vsweg:active{background:#EADFCF}
/* weggehaalde voorstellen: één rustige regel met "Terugzetten" (geen kaart, geen kleur) */
.progweg{margin:-4px 2px 16px;font-size:13.5px;line-height:1.45}
.progvs .progweg{margin:12px 2px 0}
.bhlinkk{display:inline;font:inherit;font-weight:800;color:var(--accent);text-decoration:underline;text-underline-offset:2px;padding:6px 2px;min-height:0}
.vsvelden{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px;margin-top:6px}
.vsvelden .fin{min-height:44px;font-size:14.5px;padding:8px 10px}
.vsacties{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.vsacties .btn{flex:1;min-width:150px}
.vsacties .btn.ghost{flex:0 1 auto}
.vsacties .btn:disabled{opacity:.6}
@media(min-width:900px){.vsacties .btn{flex:0 0 auto;width:auto;padding:0 26px}}
/* zelfde raster als de planningkaarten eronder (kolommen lijnen uit); op de computer Dag en Inspecteur onder
   elkaar, zodat een hele naam in de keuzelijst past */
@media(min-width:900px){.vsvelden{grid-template-columns:1fr;gap:0}}
@media(max-width:360px){.vsvelden{grid-template-columns:1fr}}

/* ---- Meldingen: drie blokken (te laat = rood, niet gedaan = oranje, binnenkort = blauw), elke melding een eigen tegel ----
   De hele tegel licht getint in de kleur van het blok, met een rand in dezelfde kleur. Tekst ≥ 4.5:1 (AA) op de tint.
   Nieuw = gekleurde stip + vette titel; gelezen = geen stip, rustige titel. */
.mritme{margin-top:14px;font-size:12.5px;line-height:1.45}
.mblokken{display:flex;flex-direction:column;gap:18px}
.mblok{--mk:#8F1D14;--mkb:#FDECEA;--mt:#FFF5F4;--mr:#F1B9B2;--mpb:#FBD9D5}
.mblok.gemist{--mk:#B93D0A;--mkb:#FFEBDB;--mt:#FFF6EE;--mr:#F5B98F;--mpb:var(--warm)}
.mblok.week{--mk:#1D4F8F;--mkb:#E3EDF9;--mt:#F4F8FD;--mr:#B7CDEB;--mpb:#DCE8F7}
.mkop{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:8px 8px 8px 14px;border-radius:14px;background:var(--mkb);color:var(--mk);font-size:15px;font-weight:800}
.mkop .mkt{flex:1;min-width:0}
.mkop .mnr{flex:none;min-width:30px;height:26px;padding:0 9px;border-radius:999px;background:var(--mk);color:#fff;font-size:13.5px;font-weight:800;display:grid;place-items:center}
.mtegels{display:flex;flex-direction:column;gap:8px}
.mrij{align-items:flex-start;cursor:pointer;gap:10px;padding:12px 14px;border-radius:18px;background:var(--mt);border:1.5px solid var(--mr);transition:transform .08s ease,filter .08s ease}
.mrij.row{border-bottom:1.5px solid var(--mr)}
.mrij:last-child{border-bottom:1.5px solid var(--mr)}
.mrij:hover{filter:brightness(.98)}
.mrij:active{transform:scale(.99)}
.mrij .mstip{width:10px;height:10px;border-radius:50%;flex:none;margin-top:6px;background:transparent}
.mrij.nieuw .mstip{background:var(--mk)}
.mrij.nieuw .t{font-weight:800}
.mrij.gelezen .t{font-weight:600}
.mrij .t{display:block;line-height:1.35}
.mrij .mmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px}
.mpil{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--mpb,#F4EDE3);color:var(--mk,#6E6255)}
.mpil.laat{color:var(--mk,#8A4F0A)}
.mblok.gemist .mpil.laat{background:var(--warm);color:var(--warm-ink)}   /* warm-ink iets donkerder: leesbaar op 12px (contrast ≥ 4.5) */
.mrij .mmeta .s{color:#5E544A}
@media(min-width:900px){.mrij{padding:14px 16px}}
body.veld .mrij{min-height:64px;padding:14px 16px}
body.zon .mkop{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px var(--mk)}
body.zon .mkop .mnr{background:#141A22}
body.zon .mrij{background:#fff;border:2px solid var(--mk)}
body.zon .mrij .mmeta .s{color:#141A22}
body.zon .mpil,body.zon .mblok.gemist .mpil.laat{background:#fff;color:#141A22;box-shadow:inset 0 0 0 1.5px currentColor}
body.zon .mrij.nieuw .mstip{background:#141A22}

/* (de alertbalk volgt de paginabreedte: geen vaste maximale breedtes meer per pagina; zie styles.css) */

/* ---- veldmodus en zonmodus ---- */
body.veld .bhknop,body.veld .vsweg{min-height:50px}
body.veld .vsweg{width:50px;height:50px}
body.veld .vskaart .titel,body.veld .vskaart .vsreden{padding-right:58px}
body.veld .vsvelden .fin,body.veld .bhrij .fin{min-height:52px;font-size:16px}
body.zon .bhknop,body.zon .vsweg{background:#fff;color:#141A22;box-shadow:inset 0 0 0 2px #141A22}
body.zon .vskaart{background:#fff;box-shadow:0 0 0 2px #141A22}
body.zon .bhrij.uit .t,body.zon .bhsub,body.zon .bhpct,body.zon .bhstatus,body.zon .bhlaatst{color:#141A22}
body.zon .bhopen{background:#fff;color:#141A22;box-shadow:inset 0 0 0 1.5px #141A22}
body.zon .bhroltekst{background:#fff;color:#141A22;box-shadow:inset 0 0 0 1.5px #141A22}

/* Beheer voor de coördinator (alleen de monteurslijst): lijst links, "Zo werkt de lijst" rechts, invoerveld niet
   over de hele breedte (één naam), namen in kolommen. Geen halve lege pagina met één kaart. */
.bhstappen{list-style:none;padding:0;margin:8px 0 0;counter-reset:bh;display:flex;flex-direction:column;gap:12px}
.bhstappen li{counter-increment:bh;display:grid;grid-template-columns:30px 1fr;column-gap:12px;row-gap:2px;line-height:1.4}
.bhstappen li::before{content:counter(bh);grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);font-weight:800;font-size:14px}
.bhstappen b{font-weight:800}
.bhstappen span{font-size:14px;color:#5E544A}
body.zon .bhstappen span{color:#141A22}
@media(min-width:900px){
  .bhgrid.enkel .bhtoevoeg{max-width:560px}
  .bhgrid.enkel .bhlijst{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
@media(min-width:1100px){
  .bhgrid.enkel .bhkol{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);align-items:start}
  .bhgrid.enkel .bhinfo{position:sticky;top:calc(var(--tb) + 12px)}
}

/* Beheer voor de coördinator: onder de monteurslijst "Laatst bij inspecties" (de laatste inspecties met hun monteurs),
   zodat de pagina op een groot scherm gevuld is met iets bruikbaars; "Zo werkt de lijst" staat ernaast. */
.bhkopregel .bhalle{flex:none;width:auto;min-height:44px;padding:0 4px}
.bhrecentlijst{list-style:none;margin:0;padding:0}
.bhrecentrij{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--line, #F1ECE4)}
.bhrecentrij:last-child{border-bottom:0}
.bhrecentrij .dchip{flex:none;margin-top:1px}
.bhrecentrij .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bhrecentrij .t{font-weight:800;line-height:1.3}
.bhmonteurs{display:flex;flex-wrap:wrap;gap:6px}
@media(min-width:1100px){
  .bhgrid.enkel .bhkol{grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);column-gap:14px;row-gap:14px}
  .bhgrid.enkel #bh-monteurs{grid-column:1;grid-row:1}
  /* rij 1: de lijst en "Zo werkt de lijst" even hoog naast elkaar; rij 2: "Laatst bij inspecties" over de volle
     breedte in kolommen. Geen lege rechterkolom onder de uitleg op een groot scherm. */
  .bhgrid.enkel .bhkol{align-items:stretch}
  .bhgrid.enkel .bhinfo{grid-column:2;grid-row:1;align-self:stretch;position:static}
  .bhgrid.enkel .bhrecent{grid-column:1/-1;grid-row:2}
  .bhgrid.enkel .bhrecentlijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));column-gap:40px}
  .bhgrid.enkel .bhrecentrij:last-child{border-bottom:1px solid var(--line, #F1ECE4)}
  .bhgrid.enkel .bhinfo .bhstappen{gap:16px}
}

/* ---- beheerrechten (migratie 0012): schakelaar per persoon en een klein label in de lijst ---- */
.bhbeheerlabel{font-size:12px;font-weight:800;color:#2E3A48;background:#E6EAF0;border-radius:999px;padding:3px 9px}
.bhschakelblok{margin:4px 0 0}
.bhschakel{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 14px;border:0;border-radius:16px;
  background:var(--mist, #F6F3EE);text-align:left;font:inherit;color:inherit;cursor:pointer}
.bhschakel .t{display:block;font-weight:800;font-size:16px}
.bhschakel .s{display:block;font-size:13.5px;line-height:1.35;margin-top:2px;color:#5E544A}
.bhschakel:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.bhschakel.vast{cursor:default}
.bhschakel.vast .sw{opacity:.75}
.bhschakel .sw{flex:none}
.bhschakel .grow{flex:1;min-width:0}
body.zon .bhbeheerlabel{background:#fff;color:#141A22;box-shadow:inset 0 0 0 1.5px #141A22}
body.zon .bhschakel{background:#fff;box-shadow:inset 0 0 0 2px #141A22}
body.zon .bhschakel .s{color:#141A22}

/* ===================== deel D (nov 2026): Account, link voor wachtwoord, app installeren, inspectie verwijderen ===================== */
/* Wijzig: de schakelaar zit in het formulier; bevestigen van "uit" in hetzelfde venster */
.bhgebrform .bhschakelblok{margin:14px 0 0}
.bhbevestig{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bhbevestig .btn.sm{width:auto;min-height:44px;padding:0 16px;margin-top:4px}
/* Account */
.acctkop{display:flex;gap:14px;align-items:center;margin:2px 0 14px}
.acctav{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--accent-bg);color:var(--accent);font-weight:800;font-size:22px}
.acctkop .grow{flex:1;min-width:0}
.acctnaam{font-weight:800;font-size:18px;overflow-wrap:anywhere}
.acctmail{overflow-wrap:anywhere;margin-top:2px}
.acctdemo{margin:0 0 12px}
.accth{font-size:13px;font-weight:800;color:#6E6255;letter-spacing:.04em;text-transform:uppercase;margin:18px 0 8px}
.installkaart .accth{margin-top:0}
.acctlijst{background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:4px 18px}
.acctform p{margin:0 0 8px}
.acctuitleg{line-height:1.45;margin:8px 0 0}
.acctherauth{margin:12px 0 4px;line-height:1.45;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.acctherauth .btn.sm{width:auto;min-height:44px;padding:0 16px}
.acctmfa .t{font-weight:800}
.acctlinks{line-height:1.45;margin:10px 4px 0;overflow-wrap:anywhere}
.acctlinklijst{margin:0 0 10px;padding-left:20px;line-height:1.5}
body.zon .acctlijst{background:#fff!important;box-shadow:0 0 0 2px #141A22!important}
/* uitlegkaart "App op je telefoon zetten" (Account en bij een link in Beheer) */
.installkaart{margin-top:14px}
.ikuitleg{line-height:1.45;margin:0 0 10px}
.iklijst{margin:0 0 10px}
.iklijst dt{font-weight:800;font-size:14px;margin-top:10px}
.iklijst dt:first-child{margin-top:0}
.iklijst dd{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--ink, #2A2520)}
.installkaart .btn{margin:2px 0 8px}
#ik-status:empty{display:none}
/* inspectie verwijderen: rustig onderaan het rapport, rood alleen bij de laatste bevestiging */
.insverwijder{margin:28px 0 8px;padding-top:14px;border-top:1px solid var(--line, #F1ECE4)}
.insverwijder .btn.danger{width:auto;min-height:44px;padding:0 18px;font-size:14px;box-shadow:inset 0 0 0 1.5px var(--red)}
.insverwijder .s{margin-top:6px;line-height:1.45}
.btn.rood{background:var(--red);color:#fff;box-shadow:none;width:100%}
.btn.rood:active{filter:brightness(.92)}
body.zon .btn.rood{background:#8E1B12;color:#fff}
.verwijderlijst{margin:0 0 12px;padding-left:20px;line-height:1.5}