/* ============================================================================
   app.css — vormgeving van de rekentool in de huisstijl van de
   Aanbestedingsplanner. Kleuren en weergaven komen uit css/theme.css.
   ============================================================================ */

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font-tekst);
  color:rgb(var(--onsurf));
  background:rgb(var(--bg));
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Sprong naar de inhoud: alleen zichtbaar zodra hij focus krijgt. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:rgb(var(--knop-p));color:rgb(var(--knop-p-tekst));padding:10px 16px;
  border-radius:0 0 8px 0;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---- topbar ---- */
#topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgb(var(--sclst));
  border-bottom:1px solid rgb(var(--outlinevar)/.6);
  padding:9px 18px;
  box-shadow:var(--card-shadow);
  position:relative;z-index:5;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.menu-knop{
  display:none;background:none;border:1px solid rgb(var(--outlinevar));border-radius:8px;
  font-size:18px;line-height:1;padding:6px 10px;cursor:pointer;color:rgb(var(--onsurf));
}
.menu-knop:focus-visible{outline:2px solid rgb(var(--s));outline-offset:2px}
#menu-overlay{position:fixed;inset:0;background:rgb(8 20 34/.45);z-index:55}
#menu-overlay[hidden]{display:none}
.brand .logo{
  display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
  background:var(--rail);color:#fff;font-family:var(--font-kop);font-size:19px;font-weight:800;
  box-shadow:0 2px 6px rgb(var(--p)/.28);flex:0 0 36px;
}
.brand img.logo-img{height:34px;width:auto;display:block}
.brand strong{display:block;font-family:var(--font-kop);font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:rgb(var(--kop))}
.brand .sub{font-size:11.5px;color:rgb(var(--onsurfvar))}
.header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.header-right .hint{font-size:11.5px;color:rgb(var(--onsurfvar))}
.header-right select{max-width:230px}

/* themaschakelaar */
.thema-schakelaar{display:flex;gap:2px;padding:2px;border:1px solid rgb(var(--outlinevar)/.7);border-radius:999px;background:rgb(var(--scl))}
.thema-knop{
  width:28px;height:28px;border:0;border-radius:999px;cursor:pointer;background:transparent;
  display:grid;place-items:center;padding:0;opacity:.5;transition:opacity .2s,background-color .2s;
}
.thema-knop:hover{opacity:.85}
.thema-knop[aria-pressed="true"]{opacity:1;background:rgb(var(--p)/.13)}
.thema-knop .stip{width:13px;height:13px;border-radius:50%;display:block;border:1px solid rgb(0 0 0/.15)}

/* ---- indeling ---- */
#layout{display:flex;height:calc(100% - 56px)}
#sidebar{
  width:252px;flex:0 0 252px;overflow:auto;padding:14px 0 20px;
  background:var(--rail);color:rgb(var(--rail-fg));
  box-shadow:var(--rail-shadow);
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;z-index:2;
}
#main{flex:1;overflow:auto;padding:22px 28px 64px;outline:none;background:var(--page-tint)}
/* [hidden] wint het niet van display:flex; expliciet verbergen tijdens het aanmelden. */
#sidebar[hidden]{display:none}
.side-title{font-family:var(--font-kop);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgb(var(--rail-fg-zacht));padding:10px 18px 6px}
.side-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;
  padding:9px 18px;font:inherit;color:rgb(var(--rail-fg));cursor:pointer;border-left:3px solid transparent;
}
.side-item:hover{background:rgb(255 255 255/.14);color:#fff}
.side-item.active{background:rgb(255 255 255/.2);border-left-color:rgb(var(--secfix));color:#fff;font-weight:600}
/* Eigen klasse: de generieke .sub zet donkergrijze tekst en die is op het navy
   zijpaneel vrijwel onleesbaar. */
.side-item-sub{padding-left:22px;font-size:13.5px}
#sidebar .sub{color:rgb(var(--rail-fg-zacht))}
.side-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:rgb(var(--rail-fg-zacht));flex:0 0 8px}
.dot.beoordeling{background:rgb(var(--s))}
.dot.vastgesteld{background:#4ade80}
.side-foot{padding:14px 18px;border-top:1px solid rgb(255 255 255/.14);margin-top:14px}
.side-foot .side-title{padding:0 0 4px}
.side-foot .sub{font-size:12px;color:rgb(var(--rail-fg-zacht));margin:0}

/* ---- koppen ---- */
h1{font-family:var(--font-kop);font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:rgb(var(--kop))}
h2{font-family:var(--font-kop);font-size:20px;font-weight:800;letter-spacing:-.015em;margin:0 0 2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:rgb(var(--kop))}
h3{font-family:var(--font-kop);font-size:15px;font-weight:700;margin:0 0 8px;color:rgb(var(--onsurf))}
h4{font-family:var(--font-kop);font-size:11.5px;font-weight:700;margin:0 0 8px;color:rgb(var(--onsurfvar));text-transform:uppercase;letter-spacing:.06em}
.page-head,.tender-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.sub{color:rgb(var(--onsurfvar));font-size:12.5px;margin:2px 0 0}
.actions{display:flex;gap:8px;align-items:center}
.page-head .actions .btn,.tender-head .actions .btn{white-space:nowrap}
.actions.wrap{flex-wrap:wrap}
.mb{margin-bottom:12px}.mt{margin-top:10px}

/* ---- fasebalk ---- */
.fasebalk{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.fase{
  display:flex;align-items:center;gap:8px;background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.7);
  border-radius:999px;padding:7px 15px 7px 11px;font:inherit;color:rgb(var(--onsurfvar));cursor:pointer;
  transition:border-color .15s,background-color .15s,color .15s;
}
.fase:hover{border-color:rgb(var(--p)/.45);color:rgb(var(--onsurf))}
.fase:focus-visible{outline:2px solid rgb(var(--s));outline-offset:2px}
.fase.active{background:rgb(var(--p)/.09);border-color:rgb(var(--p)/.5);color:rgb(var(--kop));font-weight:600}
.fase-nr{
  display:grid;place-items:center;width:21px;height:21px;border-radius:50%;flex:0 0 21px;
  background:rgb(var(--outlinevar)/.55);color:rgb(var(--onsurf));font-size:11.5px;font-weight:700;font-family:var(--font-kop);
}
.fase.active .fase-nr{background:rgb(var(--knop-p));color:rgb(var(--knop-p-tekst))}
.fase.klaar .fase-nr{background:rgb(var(--ok));color:rgb(var(--ok-tekst))}
.fase-vink{color:rgb(var(--ok));font-weight:700;font-size:13px}
.fase-hint{color:rgb(var(--onsurfvar));font-size:12.5px;margin:0 0 10px}

/* ---- volgende stap ---- */
.volgende-balk{
  display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgb(var(--outlinevar)/.6);margin-top:22px;padding-top:16px;
}
.volgende-balk .sub{margin:0}

/* ---- blokkades bij vaststellen ---- */
.blokkades{margin-top:14px;border-left:3px solid rgb(var(--err));background:rgb(var(--err-vlak));border-radius:8px;padding:10px 14px}
.blokkades h4{margin-bottom:6px;color:rgb(var(--err))}
.blokkade{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:3px 0;font-size:13px}
.blokkade .mark{color:rgb(var(--err));font-weight:700}

/* ---- tabbladen ---- */
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid rgb(var(--outlinevar)/.7);margin:0 0 20px}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;font:inherit;color:rgb(var(--onsurfvar));cursor:pointer;border-radius:8px 8px 0 0}
.tab:hover{background:rgb(var(--p)/.06);color:rgb(var(--onsurf))}
.tab.active{color:rgb(var(--kop));border-bottom-color:rgb(var(--s));font-weight:600}

/* ---- pictogrammen ---- */
.ico{
  width:1.05em;height:1.05em;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* ---- knoppen ---- */
.btn{
  font:inherit;font-weight:500;border:1px solid rgb(var(--outlinevar));background:rgb(var(--sclst));
  color:rgb(var(--onsurf));padding:7px 14px;border-radius:8px;cursor:pointer;
  transition:background-color .15s,border-color .15s,box-shadow .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.btn:hover{border-color:rgb(var(--p)/.45);background:rgb(var(--p)/.05)}
.btn:focus-visible{outline:2px solid rgb(var(--s));outline-offset:2px}
.btn.primary{background:rgb(var(--knop-p));border-color:rgb(var(--knop-p));color:rgb(var(--knop-p-tekst));box-shadow:0 1px 2px rgb(var(--p)/.3)}
.btn.primary:hover{background:rgb(var(--knop-p)/.88);border-color:rgb(var(--knop-p)/.88)}
.btn.ghost{background:transparent}
.btn.danger{background:rgb(var(--err));border-color:rgb(var(--err));color:#fff}
.btn.danger:hover{background:rgb(var(--err)/.88)}
.btn.danger-ghost{color:rgb(var(--err));border-color:rgb(var(--err)/.35);background:transparent}
.btn.danger-ghost:hover{background:rgb(var(--err)/.08);border-color:rgb(var(--err)/.5)}
.btn.small{padding:4px 10px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.icon-btn{background:none;border:0;font-size:16px;cursor:pointer;color:rgb(var(--onsurfvar));line-height:1}

/* ---- uitkomstkaart ---- */
.uitkomst{
  background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.6);border-left:4px solid rgb(var(--ok));
  border-radius:var(--radius);padding:14px 18px;margin:0 0 16px;box-shadow:var(--card-shadow);
}
.uitkomst.krap{border-left-color:rgb(var(--warn))}
.uitkomst-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:rgb(var(--onsurfvar))}
.uitkomst-naam{font-family:var(--font-kop);font-size:21px;font-weight:800;letter-spacing:-.02em;color:rgb(var(--kop));margin:2px 0}
.uitkomst-waarde{font-size:15px;font-weight:600}
.uitkomst-verschil{font-size:13px;color:rgb(var(--onsurfvar));margin-top:3px}

/* zijbalk: vastgestelde dossiers ingeklapt */
.side-groep{margin-top:4px}
.side-summary{
  list-style:none;cursor:pointer;padding:8px 18px;font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;color:rgb(var(--rail-fg-zacht));font-weight:700;
}
.side-summary::-webkit-details-marker{display:none}
.side-summary::before{content:"▸ ";font-size:10px}
.side-groep[open] .side-summary::before{content:"▾ "}
.side-summary:hover{color:#fff}
.side-vlag{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  /* het vlaggetje staat altijd op een wit chipje, dus een vaste donkere tekstkleur */
  background:rgb(var(--rail-fg));color:#12314f;
  border-radius:4px;padding:1px 5px;flex:0 0 auto;
}

/* ---- kaarten en tegels ---- */
.card{background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.6);border-radius:var(--radius);padding:16px 18px;margin:0 0 16px;box-shadow:var(--card-shadow)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:12px;margin-bottom:18px}
.tile{background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.6);border-radius:var(--radius);padding:13px 15px;box-shadow:var(--card-shadow)}
.tile-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:rgb(var(--onsurfvar))}
.tile-value{font-family:var(--font-kop);font-size:20px;font-weight:800;letter-spacing:-.02em;margin:3px 0;color:rgb(var(--kop))}
.tile-sub{font-size:12px;color:rgb(var(--onsurfvar))}

/* ---- formulieren ---- */
.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px}
.field-label{font-size:12.5px;font-weight:600;color:rgb(var(--onsurfvar))}
.field-help{font-size:11.5px;color:rgb(var(--onsurfvar))}
input[type=text],input[type=search],input[type=number],input[type=date],input[type=email],select,textarea{
  font:inherit;padding:7px 10px;border:1px solid rgb(var(--outlinevar));border-radius:8px;
  background:rgb(var(--sclst));color:rgb(var(--onsurf));width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid rgb(var(--s)/.55);outline-offset:1px;border-color:rgb(var(--s))}
input[disabled],select[disabled],textarea[disabled]{background:rgb(var(--scl));color:rgb(var(--onsurfvar))}
textarea{resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgb(var(--onsurfvar)) 50%),linear-gradient(135deg,rgb(var(--onsurfvar)) 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
.field-label{display:inline-flex;align-items:center;gap:6px}
.uitleg-knop{
  width:16px;height:16px;border-radius:50%;border:1px solid rgb(var(--outlinevar));
  background:rgb(var(--scl));color:rgb(var(--onsurfvar));font-size:10.5px;font-weight:700;
  line-height:1;cursor:pointer;padding:0;display:grid;place-items:center;flex:0 0 16px;
}
.uitleg-knop:hover{border-color:rgb(var(--p)/.5);color:rgb(var(--kop))}
.uitleg-knop:focus-visible{outline:2px solid rgb(var(--s));outline-offset:2px}
.uitleg{
  background:rgb(var(--scl));border-left:3px solid rgb(var(--s));border-radius:6px;
  padding:9px 12px;margin-top:6px;font-size:12.5px;color:rgb(var(--onsurf));
}
.uitleg p{margin:0 0 6px}
.uitleg p:last-child{margin:0}
.uitleg .voorbeeldregel{font-weight:600;color:rgb(var(--kop))}

.row-inline{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.row-inline > *{flex:1;min-width:120px}
.row-inline .btn{flex:0 0 auto}
.row-inline .wide{flex:3}
.indent{padding-left:22px}
.check{display:flex;align-items:center;gap:7px;font-size:13.5px}
.check input{width:auto;accent-color:rgb(var(--p))}
.check-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.sub-block{border:1px dashed rgb(var(--outlinevar));border-radius:var(--radius);padding:12px 14px;background:rgb(var(--scl)/.55)}
.q-edit{border-bottom:1px solid rgb(var(--outlinevar)/.7);padding-bottom:6px;margin-bottom:8px}
.inline-error{color:rgb(var(--err));font-size:12px;margin:4px 0 0;display:block;max-width:34ch}
table.grid .inline-error{margin:4px 0 0}
.calc-hint{font-size:12.5px;color:rgb(var(--onsurfvar));align-self:center}

/* De legenda bij een eigen methodiek: de namen die in een formule mogen staan.
   Staat standaard ópen — dat hij onvindbaar was, was juist de klacht — maar als
   <details>, zodat wie de namen kent hem kan wegklappen. De code-namen mogen
   niet afbreken: een afgebroken MIN_PRIJSDEFICIET is onbruikbaar om over te
   typen. */
.legenda > summary{cursor:pointer;font-weight:600;font-size:13.5px;margin:-2px 0 6px}
.legenda h4{margin:10px 0 4px;font-size:12.5px;color:rgb(var(--onsurfvar))}
.legenda ul.plain{margin:0}
.legenda ul.plain li{font-size:12.5px;line-height:1.5;margin:0 0 2px}
.legenda code{white-space:nowrap}
.legenda p.sub{margin:4px 0 0}

/* ---- tabellen ---- */
.tabel-scroll{
  overflow-x:auto;margin-bottom:16px;position:relative;
  background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.6);
  border-radius:var(--radius);box-shadow:var(--card-shadow);
}
.tabel-scroll:focus-visible{outline:2px solid rgb(var(--s));outline-offset:2px}
.tabel-scroll table.grid{margin-bottom:0}
/* lange lijsten: eigen hoogte zodat de kolomkop in beeld blijft */
.tabel-scroll-lang{max-height:min(70vh,720px);overflow-y:auto}
.tabel-scroll-lang table.grid thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 rgb(var(--outlinevar)/.55)}
.tabel-bijschrift{caption-side:top;text-align:left;font-size:12.5px;color:rgb(var(--onsurfvar));padding:0 0 6px}
/* Geen eigen rand of overflow op de tabel zelf: dat zou vastgezette kolomkoppen
   breken. Rand, afronding en schaduw zitten op .tabel-scroll. */
table.grid{width:100%;border-collapse:separate;border-spacing:0;background:transparent;border:0;margin:0}
table.grid th,table.grid td{border-bottom:1px solid rgb(var(--outlinevar)/.55);padding:9px 11px;text-align:left;vertical-align:top;font-size:13.5px}
table.grid tr:last-child td{border-bottom:0}
table.grid th{background:rgb(var(--scl));font-family:var(--font-kop);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgb(var(--onsurfvar));white-space:nowrap}
table.grid tbody tr:hover td{background:rgb(var(--p)/.035)}
table.grid td.num,table.grid th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.grid tr.excluded td{background:rgb(var(--err-vlak))}
table.grid tr.top-row td{font-weight:600}
table.grid tr.sub-row td:first-child{padding-left:24px;font-weight:400}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* ---- opslagstatus ---- */
.opslagstatus{font-size:11.5px;color:rgb(var(--onsurfvar));white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.opslagstatus::before{content:"";width:7px;height:7px;border-radius:50%;background:rgb(var(--ok))}
.opslagstatus.bezig::before{background:rgb(var(--warn))}
.opslagstatus.waarschuwing{color:rgb(var(--warn))}
.opslagstatus.waarschuwing::before{background:rgb(var(--warn))}

/* ---- acties per rij ---- */
.rij-menu-houder{position:relative;flex:0 0 auto}
.rij-menu-knop{line-height:1;min-width:34px}
.rij-menu{position:fixed;z-index:40;min-width:230px;background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar));
  border-radius:10px;box-shadow:0 12px 30px rgb(8 20 34/.22);padding:5px;display:flex;flex-direction:column}
.rij-menu[hidden]{display:none}
.rij-menu-item{background:none;border:0;font:inherit;text-align:left;padding:8px 11px;border-radius:7px;cursor:pointer;color:rgb(var(--onsurf))}
.rij-menu-item:hover{background:rgb(var(--p)/.07)}
.rij-menu-item:focus-visible{outline:2px solid rgb(var(--s));outline-offset:-2px}
.rij-menu-item.destructief{color:rgb(var(--err))}
.rij-menu-item.destructief:hover{background:rgb(var(--err)/.08)}
.rij-menu-item.destructief::before{content:"⚠ ";font-size:11px}

/* ---- filteren en sorteren ---- */
.filterbalk{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:0 0 14px}
.filterbalk .field{min-width:200px;max-width:340px}
.sorteerknop{
  background:none;border:0;font:inherit;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:inherit;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px;
}
.sorteerknop:hover{color:rgb(var(--kop))}
.sorteerknop:focus-visible{outline:2px solid rgb(var(--s));outline-offset:2px}
.sorteerpijl{opacity:.45;font-size:9px}
.sorteerknop.actief .sorteerpijl{opacity:1;color:rgb(var(--kop))}
table.grid td.kolom-actief{background:rgb(var(--p)/.05)}
table.grid th.kolom-actief{background:rgb(var(--p)/.09)}

/* ---- meldingen ---- */
.notice{background:rgb(var(--scl));border-left:3px solid rgb(var(--s));border-radius:8px;padding:11px 15px;margin:0 0 14px;font-size:13px}
.notice.warn{background:rgb(var(--warn-vlak));border-left-color:rgb(var(--warn));color:rgb(var(--onsurf))}
.notice.error{background:rgb(var(--err-vlak));border-left-color:rgb(var(--err))}
.notice.ok{background:rgb(var(--ok-vlak));border-left-color:rgb(var(--ok))}
.empty{
  color:rgb(var(--onsurfvar));background:rgb(var(--sclst));border:1px dashed rgb(var(--outlinevar));
  border-radius:var(--radius);padding:26px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.empty p{margin:0;max-width:60ch}
.badge{display:inline-block;padding:1px 9px;border-radius:999px;background:rgb(var(--sch));color:rgb(var(--onseccon));font-size:11.5px;font-weight:500;margin-left:6px;white-space:nowrap}
.badge.st-vastgesteld{background:rgb(var(--ok-vlak));color:rgb(var(--ok))}
.badge.st-beoordeling{background:rgb(var(--p)/.16);color:rgb(var(--kop))}
.badge.st-warn{background:rgb(var(--warn-vlak));color:rgb(var(--warn))}
.badge.st-error{background:rgb(var(--err-vlak));color:rgb(var(--err))}
.badge.st-log{background:rgb(var(--scl));color:rgb(var(--onsurfvar));font-family:ui-monospace,Menlo,Consolas,monospace}
.chip{display:inline-block;background:rgb(var(--sch));color:rgb(var(--onseccon));border-radius:999px;padding:1px 9px;margin:1px 3px 1px 0;font-size:12px}
/* Eigen individuele score in de consensustabel: een chip die je kunt aanklikken
   om je oordeel bij te stellen. */
.btn.chip-knop{
  background:rgb(var(--sch));color:rgb(var(--onseccon));border-color:rgb(var(--outlinevar)/.7);
  border-radius:999px;padding:1px 10px;margin:1px 3px 1px 0;font-size:12px;font-weight:600;gap:5px;
}
.btn.chip-knop:hover{background:rgb(var(--p)/.14);border-color:rgb(var(--p)/.5)}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{margin:3px 0}
ul.plain.small li{font-size:12.5px;color:rgb(var(--onsurfvar))}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:rgb(var(--p)/.07);color:rgb(var(--onsurf));padding:1px 6px;border-radius:5px}

/* ---- stappen en controles ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:8px}
.steps li{display:flex;gap:9px;align-items:center;background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.6);border-radius:var(--radius);padding:10px 13px;color:rgb(var(--onsurfvar))}
.steps li.done{color:rgb(var(--onsurf));border-color:rgb(var(--ok)/.35);background:rgb(var(--ok-vlak))}
.steps .mark{font-weight:700;color:rgb(var(--ok))}
.steps li:not(.done) .mark{color:rgb(var(--onsurfvar))}
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid rgb(var(--outlinevar)/.5)}
.checks li:last-child{border-bottom:0}
.checks li.ok .mark{color:rgb(var(--ok))}
.checks li.err .mark{color:rgb(var(--err))}
.checks li.warn .mark{color:rgb(var(--warn))}
.checks .mark{font-weight:700}

/* ---- ingebedde rapportage ---- */
.html-embed{background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.6);border-radius:var(--radius);padding:8px 18px 14px;margin-bottom:16px;overflow-x:auto;box-shadow:var(--card-shadow)}
.html-embed table{border-collapse:collapse;width:100%;font-size:13px;margin:8px 0 12px}
.html-embed th,.html-embed td{border:1px solid rgb(var(--outlinevar)/.7);padding:6px 9px;text-align:left}
.html-embed th{background:rgb(var(--scl));font-family:var(--font-kop);font-size:11.5px;font-weight:700;color:rgb(var(--onsurfvar))}
.html-embed td.num,.html-embed th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.html-embed tr.winner td{background:rgb(var(--ok-vlak));font-weight:600}
.html-embed tr.excluded td{background:rgb(var(--err-vlak))}
.html-embed .note{background:rgb(var(--scl));border-left:3px solid rgb(var(--s));padding:9px 13px;font-size:12.5px;border-radius:6px}
.html-embed h1{font-family:var(--font-kop);font-size:18px;color:rgb(var(--kop));margin:6px 0 4px}
.html-embed h2{font-family:var(--font-kop);font-size:15.5px;margin:18px 0 6px;border-bottom:1px solid rgb(var(--outlinevar)/.7);padding-bottom:4px;color:rgb(var(--kop))}
.html-embed h3{font-size:14px;margin:14px 0 4px}
.html-embed .meta{font-size:12px;color:rgb(var(--onsurfvar))}
.html-embed .badge{background:rgb(var(--sch));color:rgb(var(--onseccon))}
.html-embed strong{color:inherit}
.html-embed footer{margin-top:20px;border-top:1px solid rgb(var(--outlinevar)/.7);padding-top:8px;color:rgb(var(--onsurfvar));font-size:11.5px}
.html-embed.preview:empty{display:none}
.modal-preview{max-height:60vh;overflow:auto}

/* ---- aanmelden ---- */
.aanmelden{
  max-width:460px;margin:6vh auto;background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.6);
  border-radius:12px;padding:26px 28px;box-shadow:var(--card-shadow);
}
.aanmelden-merk{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.aanmelden-merk .logo{
  display:grid;place-items:center;width:40px;height:40px;border-radius:10px;flex:0 0 40px;
  background:var(--rail);color:#fff;font-family:var(--font-kop);font-size:21px;font-weight:800;
}
.aanmelden-merk strong{display:block;font-family:var(--font-kop);font-size:16px;color:rgb(var(--kop))}
.aanmelden-merk .sub{font-size:12px}
.aanmelden .btn{width:100%}
.aanmelden .actions .btn{width:auto}
/* De flyerknop staat rechts naast het logo, op zijn eigen breedte. */
.aanmelden-merk .flyer-knop{width:auto;margin-left:auto;flex:0 0 auto;text-decoration:none;white-space:nowrap}
.aanmelden-voet{margin-top:18px;text-align:center}
.aangemeld{font-size:13px;color:rgb(var(--kop))}

/* ---- serverstatus ---- */
.serverstatus{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:rgb(var(--scl));border:1px solid rgb(var(--outlinevar)/.6);border-radius:var(--radius);
  padding:10px 14px;margin:0 0 14px;font-size:13px;
}
.serverstatus .beoordelaar{display:inline-flex;align-items:center;gap:6px;background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.7);border-radius:999px;padding:3px 10px}
.serverstatus .beoordelaar.ingediend{border-color:rgb(var(--ok)/.5);background:rgb(var(--ok-vlak))}
.serverstatus .stip-status{width:8px;height:8px;border-radius:50%;background:rgb(var(--outline))}
.serverstatus .beoordelaar.ingediend .stip-status{background:rgb(var(--ok))}

/* ---- rondleiding ---- */
.rondleiding-ring{
  position:fixed;z-index:70;border-radius:12px;pointer-events:none;
  border:2px solid rgb(var(--s));box-shadow:0 0 0 9999px rgb(8 20 34/.45),0 0 0 4px rgb(var(--s)/.25);
  transition:top .2s,left .2s,width .2s,height .2s;
}
.rondleiding-paneel{
  position:fixed;z-index:71;width:min(370px,calc(100vw - 24px));background:rgb(var(--sclst));
  border:1px solid rgb(var(--outlinevar));border-radius:12px;padding:16px 18px;
  box-shadow:0 18px 44px rgb(8 20 34/.32);
}
.rondleiding-paneel.midden{top:50%;left:50%;transform:translate(-50%,-50%)}
.rondleiding-paneel h3{margin:2px 0 6px;color:rgb(var(--kop))}
.rondleiding-paneel p{margin:0 0 10px;font-size:13.5px}
.rondleiding-teller{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgb(var(--onsurfvar))}
.rondleiding-knoppen{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.rondleiding-nav{display:flex;gap:8px}
.welkom{border-left:3px solid rgb(var(--s))}
.welkom h3{color:rgb(var(--kop))}
.notice.voorbeeld{background:rgb(var(--warn-vlak));border-left-color:rgb(var(--warn))}
.badge.st-voorbeeld{background:rgb(var(--warn-vlak));color:rgb(var(--warn))}

/* ---- handleiding ---- */
.handleiding{max-width:78ch;line-height:1.6}
.handleiding h2{font-size:16px;margin:22px 0 8px;color:rgb(var(--kop));border-bottom:1px solid rgb(var(--outlinevar)/.7);padding-bottom:4px}
.handleiding h3{font-size:14px;margin:16px 0 4px}
.handleiding p{margin:0 0 10px}
.handleiding ul,.handleiding ol{margin:0 0 12px;padding-left:20px}
.handleiding li{margin:3px 0}
.handleiding table{margin:8px 0 14px}
.handleiding .treffer{background:rgb(var(--warn)/.12);border-radius:4px}
.handleiding [hidden]{display:none}

/* ---- modaal en meldingen ---- */
.overlay{position:fixed;inset:0;background:rgb(8 20 34/.5);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px;z-index:50}
.modal{background:rgb(var(--sclst));border-radius:12px;width:min(840px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 56px rgb(8 20 34/.38);border:1px solid rgb(var(--outlinevar)/.5)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid rgb(var(--outlinevar)/.6)}
.modal-head h3{margin:0;font-size:16px;color:rgb(var(--kop))}
.modal-body{padding:18px 20px;overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid rgb(var(--outlinevar)/.6);background:rgb(var(--scl)/.5);border-radius:0 0 12px 12px}
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:rgb(var(--ter));color:#fff;padding:11px 15px;border-radius:9px;box-shadow:0 8px 24px rgb(8 20 34/.3);font-size:13.5px;max-width:390px;transition:opacity .4s,transform .4s}
.toast-success{background:rgb(var(--ok))}
.toast-error{background:rgb(var(--err))}
.toast.out{opacity:0;transform:translateY(6px)}
/* Donkere weergave: geen donkere tekst op een blauw vlak. De gewone melding krijgt
   een neutraal donker vlak met lichte tekst; bevestiging en fout houden hun kleur
   met donkere tekst, omdat groen en rood daar wél voldoende contrast geven. */
html[data-theme="focus"] .toast{background:rgb(var(--schst));color:rgb(var(--onsurf))}
html[data-theme="focus"] .toast-success,
html[data-theme="focus"] .toast-error{color:#0a1420}
/* Links krijgen de kopkleur met een onderstreping. De accentkleur haalde het
   contrast niet in de warme en de donkere weergave; de onderstreping houdt ze
   herkenbaar als link, ook voor wie kleur niet als aanwijzing kan gebruiken. */
.link{color:rgb(var(--kop));font-weight:600;text-decoration:underline;text-underline-offset:2px}
.link:hover{text-decoration-thickness:2px}
.ind-list{display:flex;flex-wrap:wrap}
.scroll{overflow-x:auto}

/* Onder 700 px worden tabellen kaarten: elke rij een blok met de kolomnaam ervoor.
   Zonder dit vallen kolommen buiten beeld op een telefoon. */
@media (max-width:700px){
  .tabel-scroll{overflow:visible;max-height:none;border-radius:0}
  table.grid{border:0;box-shadow:none;background:none;display:block}
  table.grid caption{padding-bottom:8px}
  table.grid thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.grid tbody{display:block}
  table.grid tr{
    display:block;background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.6);
    border-radius:var(--radius);margin-bottom:12px;padding:4px 12px;box-shadow:var(--card-shadow);
  }
  table.grid tbody tr:hover td{background:none}
  table.grid td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    border:0;border-bottom:1px solid rgb(var(--outlinevar)/.4);padding:9px 0;text-align:right;
  }
  table.grid tr td:last-child{border-bottom:0}
  table.grid td[data-label]::before{
    content:attr(data-label);flex:0 0 42%;text-align:left;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;color:rgb(var(--onsurfvar));padding-top:2px;
  }
  table.grid td:empty{display:none}
  table.grid td.num{text-align:right}
  table.grid tr.sub-row td:first-child{padding-left:0}
  table.grid td input,table.grid td select,table.grid td textarea{max-width:58%}
  table.grid td textarea{min-height:72px}
  .row-actions{justify-content:flex-end;width:100%}
  .fase{padding:6px 12px 6px 9px;font-size:13.5px}
  /* kop compacter: merknaam op één regel, status en gebruiker op een eigen rij */
  #topbar{flex-wrap:wrap;gap:8px;padding:8px 14px}
  .brand .sub{display:none}
  .brand strong{font-size:14.5px;white-space:nowrap}
  .brand .logo{width:32px;height:32px;flex:0 0 32px;font-size:17px}
  .header-right{width:100%;justify-content:space-between;gap:8px}
  .header-right select{max-width:none;flex:1;min-width:0}
  .opslagstatus{order:-1}
  .volgende-balk{justify-content:stretch}
  .volgende-balk .btn{flex:1;min-height:44px}
}

@media (max-width:900px){
  #layout{flex-direction:column;height:auto}
  .menu-knop{display:block}
  /* De zijbalk schuift in als menu; het scherm begint direct bij de inhoud. */
  #sidebar{
    position:fixed;top:0;bottom:0;left:0;width:min(86vw,300px);flex:none;z-index:60;
    transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto;
    box-shadow:6px 0 30px rgb(0 0 0/.3);
  }
  #sidebar.open{transform:none}
  .tabs,.fasebalk{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
  .tab,.fase{white-space:nowrap;flex:0 0 auto}
  #main{padding:16px}
  .cols{grid-template-columns:1fr}
  .btn{min-height:44px}
  .btn.small{min-height:38px}
  .row-actions{gap:10px}
}

/* ---- aanmelden: voortgang en authenticator ---- */
.stappen-balk{
  display:flex;gap:6px;list-style:none;margin:0 0 16px;padding:0;
  font-size:11.5px;color:rgb(var(--onsurfvar));
}
.stappen-balk li{
  flex:1;padding:5px 8px;border-radius:6px;background:rgb(var(--scl));
  border-bottom:2px solid rgb(var(--outlinevar)/.7);text-align:center;
}
.stappen-balk li.nu{background:rgb(var(--sch));color:rgb(var(--onseccon));border-bottom-color:rgb(var(--s));font-weight:600}
.stappen-balk li.klaar{color:rgb(var(--onsurf));border-bottom-color:rgb(var(--ok))}
.uitleg-stappen{margin:0;padding-left:20px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.sleutel{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
  background:rgb(var(--scl));border:1px solid rgb(var(--outlinevar)/.7);border-radius:8px;padding:10px 12px;
}
.sleutel code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.10em;
  color:rgb(var(--kop));word-break:break-all;
}
.aanmelden .sleutel .btn{width:auto}
.qr-paneel{display:flex;flex-direction:column;gap:10px}
.qr-vlak{
  display:flex;justify-content:center;padding:12px;border-radius:10px;
  background:#fff;border:1px solid rgb(var(--outlinevar)/.7);
}
/* Ruim genoeg voor de camera: bij 49 modules is dat ongeveer 4 px per module. */
.qr-vlak svg{display:block;width:100%;max-width:240px;height:auto}
/* Bewust de gewone tekstkleur met onderstreping: de accentkleur haalt op een
   donker vlak de contrasteis niet. */
.tekstlink{color:rgb(var(--onsurf));text-decoration:underline;text-underline-offset:2px}
.tekstlink:hover{text-decoration-thickness:2px}
.qr-sleutel summary{cursor:pointer;font-size:13px;color:rgb(var(--kop));padding:4px 0}
.qr-sleutel[open] summary{margin-bottom:6px}
.qr-sleutel > *:not(summary){margin-top:6px}

/* ---- klanten ---- */
.side-klant{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:9px 12px;margin-bottom:10px;border-radius:8px;cursor:pointer;text-align:left;
  background:rgb(var(--sch));border:1px solid rgb(var(--outlinevar)/.6);color:rgb(var(--onseccon));
}
.side-klant:hover,.side-klant.active{border-color:rgb(var(--s))}
.side-klant-naam{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-klant-wissel{font-size:11px;text-decoration:underline;flex:0 0 auto}
/* De zijbalk heeft een donkere ondergrond: hier hoort de tekstkleur van de
   rail bij, niet die van een licht vlak. */
.side-leeg{font-size:12px;color:rgb(var(--rail-fg-zacht));padding:4px 12px;margin:0}
.klantrooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.klantkaart{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;cursor:pointer;
  background:rgb(var(--sclst));border:1px solid rgb(var(--outlinevar)/.6);border-radius:10px;
  padding:16px 18px;box-shadow:var(--card-shadow);color:rgb(var(--onsurf));
}
.klantkaart:hover{border-color:rgb(var(--s))}
.klantkaart-naam{font-family:var(--font-kop);font-size:15px;color:rgb(var(--kop))}
.klantkaart-cijfers{display:flex;gap:10px;font-size:12.5px;color:rgb(var(--onsurfvar))}
.klantveld{display:flex;flex-direction:column;gap:8px}
/* Twee gelijkwaardige manieren om aan te melden, onder elkaar op smalle schermen. */
.aanmeldwijzen{display:flex;flex-direction:column;gap:8px}
/* Afgeschermde waarde: zichtbaar dat er iets staat, zonder het te tonen. */
.afgeschermd{color:rgb(var(--onsurfvar));letter-spacing:.12em}

/* Schermafdrukken in het hulpscherm. */
.html-embed figure.schermafdruk{margin:14px 0;display:flex;flex-direction:column;gap:6px}
.html-embed figure.schermafdruk img{
  display:block;width:100%;height:auto;border-radius:8px;background:#fff;
  border:1px solid rgb(var(--outlinevar)/.7);box-shadow:var(--card-shadow);
}
.html-embed figure.schermafdruk figcaption{font-size:12px;color:rgb(var(--onsurfvar));line-height:1.45}

/* ---- werkomgevingen (klanten) ---- */
.werkomgevingen{display:flex;flex-direction:column;gap:8px}
.werkomgeving-knop{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:8px;background:rgb(var(--scl));
  border:1px solid rgb(var(--outlinevar)/.7);color:rgb(var(--onsurf));
}
.werkomgeving-knop:hover{border-color:rgb(var(--s));background:rgb(var(--sch));color:rgb(var(--onseccon))}
.werkomgeving-knop.actief{border-color:rgb(var(--s));background:rgb(var(--sch));color:rgb(var(--onseccon))}
.werkomgeving-naam{font-weight:600;font-size:14px}
/* Regel uit het foutenlogboek: leesbaar houden, niet de pagina laten uitrekken. */
.foutregel{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:rgb(var(--scl));border:1px solid rgb(var(--outlinevar)/.7);border-radius:6px;
  padding:8px 10px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:rgb(var(--onsurf));
}

/* ---- feedbackknop ----
   Zweeft rechtsonder, buiten de inhoud, zodat hij op elk scherm bereikbaar is
   zonder iets te overlappen wat men aan het lezen is. */
.feedback-knop{
  position:fixed;right:18px;bottom:18px;z-index:900;
  width:48px;height:48px;border-radius:50%;
  background:rgb(var(--knop-p));color:rgb(var(--knop-p-tekst));
  border:1px solid rgb(var(--knop-p));font-size:20px;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px rgba(16,40,70,.28);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease
}
.feedback-knop:hover{transform:translateY(-2px)}
.feedback-knop:focus-visible{outline:2px solid rgb(var(--s));outline-offset:2px}
@media (max-width:700px){.feedback-knop{right:12px;bottom:12px;width:44px;height:44px}}
@media (print){.feedback-knop{display:none}}

/* Een feedbackbericht kan lang zijn; in de tabel blijft het leesbaar zonder de
   rij uit te rekken. */
.feedback-tekst{max-width:38ch;white-space:pre-wrap;word-break:break-word}
tr.gelezen td{color:rgb(var(--onsurfvar))}

/* Voorbeeld van de schermafdruk in het feedbackvenster, en de afdruk zelf in
   het beheeroverzicht. Nooit breder dan het venster. */
.feedback-voorbeeld{display:block;max-width:100%;max-height:220px;margin-top:10px;
  border:1px solid rgb(var(--outlinevar));border-radius:6px;object-fit:contain;background:rgb(var(--sclst))}
.feedback-afdruk{display:block;max-width:100%;height:auto;border:1px solid rgb(var(--outlinevar));border-radius:6px}
.modal:has(.feedback-afdruk){width:min(96vw,1100px)}

/* Privacyverklaring en disclaimer. In de donkere zijbalk in de lichte
   zijbalkkleur — de gewone linkkleur zou daar blauw op blauw zijn. */
.side-juridisch{margin-top:6px !important}
.side-link{color:rgb(var(--rail-fg));text-decoration:underline;text-underline-offset:2px}
.side-link:hover{text-decoration-thickness:2px}
.side-link:focus-visible{outline:2px solid rgb(var(--rail-fg));outline-offset:2px;border-radius:2px}
.modal:has(.juridisch){width:min(96vw,860px)}

/* Beheer → Privacyverzoeken: het zoekveld neemt de ruimte naast de knop. */
.privacy-zoek{flex:1 1 18rem}
.privacy-zoek input{width:100%}

/* Melding bij een kopie die buiten het gelicentieerde adres draait. */
#licentie-melding{padding:8px 16px 0}

/* Akkoord op de disclaimer op het aanmeldscherm. */
.akkoord-vak{margin:4px 0 10px;padding:10px 12px;border:1px solid rgb(var(--outlinevar));border-radius:8px;background:rgb(var(--sclst))}
.akkoord-vak .check{align-items:flex-start}
.akkoord-vak .field-help{margin:6px 0 0}

/* Copyrightregel in de zijbalk en onder het aanmeldscherm. */
.side-copyright{margin-top:2px;font-size:11px}
.aanmelden-voet .copyright{font-size:11.5px}