/* Suppior, klantdashboard. Donkere grond, widgets met een zachte gele en oranje gloed erachter.
   Telefoon = blauw, e-mail = oranje, nieuw = geel; altijd als waas, nooit als fel vlak. */
:root {
  --bg: #0e0e11;
  --vlak: #16161a;
  --vlak2: #1c1c21;
  --hover: #1f1f25;
  --lijn: rgba(255, 255, 255, .08);
  --lijn2: rgba(255, 255, 255, .05);
  --tekst: #f1f1ef;
  --stil: #9a9aa3;
  --zacht: #62626b;
  --geel: #ffd60a;
  --geel-donker: #e6c000;
  --oranje: #ff8a3d;
  --blauw: #5b93ff;
  --groen: #4cc38a;
  --rood: #ff6363;
  --wa-uit: #1f4d3f;
  --wa-in: #23262d;
  --zijbalk: 224px;
  --lijstbalk: 380px;
  --lijstbalk-smal: 208px;
  --radius: 14px;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--tekst); }
body {
  font: 13.5px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--zacht); }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: 16px; font-weight: 700; margin: 1.8rem 0 .7rem; }
h3 { font-size: 13px; font-weight: 700; margin: 1.2rem 0 .5rem; }
p { margin: 0 0 .6rem; }
code, pre { font: 12.5px/1.45 var(--mono); }
pre { white-space: pre-wrap; margin: .4rem 0 0; }
.nr, .datum, .tel, .tabular, .tijd, .getal { font-variant-numeric: tabular-nums; }
::selection { background: rgba(255, 214, 10, .35); }

/* ---------- raster: zijbalk + inhoud ---------- */
.app { display: grid; grid-template-columns: var(--zijbalk) minmax(0, 1fr); min-height: 100dvh; }
.zijbalk {
  position: sticky; top: 0; height: 100dvh; background: #0b0b0d;
  border-right: 1px solid var(--lijn); padding: 18px 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.merk { padding: 4px 10px 18px; display: flex; align-items: center; gap: 10px; }
.merk .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--geel); color: #111; font-weight: 800; font-size: 14px; display: grid; place-items: center; flex: none; letter-spacing: -0.02em; }
.merk strong { display: block; font-size: 14px; letter-spacing: -0.01em; line-height: 1.15; }
.merk span { font-size: 11px; color: var(--stil); }
.merk img.logo { background: none; border-radius: 0; object-fit: contain; }
.groep { font-size: 10.5px; color: var(--zacht); text-transform: uppercase; letter-spacing: .08em; padding: 16px 10px 4px; font-weight: 700; }
.zijbalk nav { display: flex; flex-direction: column; gap: 1px; }
.zijbalk nav a {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  border-radius: 9px; font-weight: 600; color: var(--stil); font-size: 13px;
}
.zijbalk nav a:hover { background: var(--vlak2); color: var(--tekst); text-decoration: none; }
.zijbalk nav a.actief { background: var(--vlak2); color: var(--tekst); box-shadow: inset 2px 0 0 var(--geel); }
.zijbalk nav a .tel { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--stil); }
.zijbalk nav a .tel.geel { background: var(--geel); color: #111; border-radius: 6px; padding: 1px 6px; }
.zijbalk-voet { margin-top: auto; padding: 12px 10px 0; font-size: 11.5px; color: var(--zacht); line-height: 1.5; border-top: 1px solid var(--lijn2); }
.zijbalk-voet a { display: inline-block; margin-top: 6px; color: var(--stil); }

main { padding: 26px 32px 64px; max-width: 1280px; min-width: 0; }
main.breed { max-width: none; padding: 0; }
.paginakop { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.paginakop .sub { color: var(--stil); font-size: 13px; margin: 5px 0 0; }
.paginakop .sub a { text-decoration: underline; text-decoration-color: var(--zacht); }
.paginakop .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.terug { display: inline-block; font-size: 13px; color: var(--stil); margin-bottom: 12px; }
.labels { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--stil); text-transform: uppercase; letter-spacing: .06em; }

.stil { color: var(--stil); }
.zacht { color: var(--zacht); }
.fout { color: var(--rood); }
.ok { color: var(--groen); }
.waarschuwing { color: var(--oranje); }
.bewaar { white-space: pre-wrap; }
.melding { padding: 10px 14px; border-radius: 10px; background: rgba(255, 214, 10, .1); border: 1px solid rgba(255, 214, 10, .25); font-size: 13px; margin-bottom: 14px; }

/* ---------- widgets: kaart met gloed ---------- */
.widget {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
}
.widget::before, .widget::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  filter: blur(56px); opacity: .28;
}
.widget::before { width: 60%; height: 70%; left: -18%; top: -35%; background: var(--geel); }
.widget::after { width: 50%; height: 60%; right: -15%; bottom: -35%; background: var(--oranje); }
.widget.blauw::before { background: var(--blauw); opacity: .22; }
.widget.blauw::after { background: var(--blauw); opacity: .14; }
.widget.oranje::before, .widget.oranje::after { background: var(--oranje); }
.widget.stil::before, .widget.stil::after { opacity: .1; }
.widget.vlak::before, .widget.vlak::after { display: none; }
.widget-kop { display: flex; align-items: center; gap: 10px; padding: 14px 18px 8px; }
.widget-kop h2, .widget-kop h3 { margin: 0; font-size: 14px; }
.widget-kop .sub { font-size: 12px; color: var(--stil); }
.widget-kop .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--stil); }
.widget-inhoud { padding: 0 18px 16px; }
.widget-inhoud.scroll { max-height: 520px; overflow-y: auto; padding-bottom: 8px; }

/* ---------- kpi's ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 4px; min-height: 108px; }
.kpi .label { font-size: 11px; font-weight: 700; color: var(--stil); text-transform: uppercase; letter-spacing: .07em; }
.kpi .getal { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.kpi .getal.geel { color: var(--geel); }
.kpi .uitleg { font-size: 12px; color: var(--stil); margin-top: auto; }
.kpi:hover { text-decoration: none; border-color: rgba(255, 255, 255, .16); }

/* ---------- ticketrijen (dashboard en lijsten) ---------- */
.rijen { display: flex; flex-direction: column; }
.trij { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) 96px 18px; gap: 12px; align-items: center; min-height: 54px; padding: 8px 10px; border-bottom: 1px solid var(--lijn2); border-radius: 10px; }
.trij:last-child { border-bottom: 0; }
.trij:hover { background: rgba(255, 255, 255, .04); }
.trij .inhoud { min-width: 0; }
.trij .titel { display: block; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trij .titel .nr { color: var(--stil); font-weight: 500; }
.trij .meta { display: block; font-size: 12px; color: var(--stil); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trij .meta em { font-style: normal; color: var(--tekst); }
.trij .tijd { font-size: 12px; color: var(--stil); text-align: right; }
.trij .pijl { color: var(--zacht); display: flex; justify-content: flex-end; }
.trij .dek::after { content: ""; position: absolute; inset: 0; }
.trij:hover .dek { text-decoration: none; }
.trij .meta a { position: relative; z-index: 1; }
/* waas per bron: blauw voor telefoon, oranje voor mail, geel voor nieuw */
.trij.tint-telefoon { background: linear-gradient(90deg, rgba(91, 147, 255, .13), rgba(91, 147, 255, .03) 55%, transparent); }
.trij.tint-telefoon:hover { background: linear-gradient(90deg, rgba(91, 147, 255, .2), rgba(91, 147, 255, .06) 55%, transparent); }
.trij.tint-mail { background: linear-gradient(90deg, rgba(255, 138, 61, .14), rgba(255, 138, 61, .03) 55%, transparent); }
.trij.tint-mail:hover { background: linear-gradient(90deg, rgba(255, 138, 61, .22), rgba(255, 138, 61, .06) 55%, transparent); }
.trij.tint-nieuw { background: linear-gradient(90deg, rgba(255, 214, 10, .12), rgba(255, 214, 10, .02) 55%, transparent); }
.nieuwlijn { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; font-size: 11px; font-weight: 700; color: var(--geel); text-transform: uppercase; letter-spacing: .07em; }
.nieuwlijn::before, .nieuwlijn::after { content: ""; height: 2px; background: var(--geel); border-radius: 2px; flex: 1; opacity: .9; box-shadow: 0 0 12px rgba(255, 214, 10, .6); }
.nieuwlijn.onder { color: var(--stil); }
.nieuwlijn.onder::before, .nieuwlijn.onder::after { background: var(--lijn); box-shadow: none; height: 1px; }
.leeg { padding: 36px 0; color: var(--stil); text-align: center; }
.bron { display: inline-flex; align-items: center; gap: 4px; }
.bron.telefoon { color: var(--blauw); }
.bron.mail { color: var(--oranje); }
.bron.eigen { color: var(--stil); }
.ico { width: 12px; height: 12px; vertical-align: -1px; }
.stip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tekst); flex: none; }
.stip.live { background: var(--geel); box-shadow: 0 0 0 3px rgba(255, 214, 10, .25); }
.knop .stip { margin-right: 2px; }

/* ---------- urgentie en status ---------- */
.urg { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: 6px; color: var(--stil); white-space: nowrap; border: 1px solid transparent; }
.urg.dringend { background: var(--geel); color: #111; }
.urg.hoog { background: rgba(255, 255, 255, .12); color: var(--tekst); border-color: rgba(255, 255, 255, .18); }
.urg.normaal { color: var(--tekst); border-color: var(--lijn); }
.urg.laag { color: var(--zacht); border-color: var(--lijn2); }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tekst); flex: none; }
.status[data-s="open"]::before { background: var(--geel); box-shadow: 0 0 8px rgba(255, 214, 10, .6); }
.status[data-s="in behandeling"]::before { background: var(--blauw); }
.status[data-s="afgesloten"] { color: var(--stil); }
.status[data-s="afgesloten"]::before { background: var(--zacht); }
.status[data-s="live"]::before { background: var(--geel); }
.status[data-s="geen ticket"] { color: var(--stil); }
.status[data-s="geen ticket"]::before { background: transparent; border: 1px solid var(--zacht); width: 6px; height: 6px; }
.status.wacht_op_goedkeuring { color: var(--oranje); }
.status.wacht_op_goedkeuring::before { background: transparent; border: 2px solid var(--oranje); width: 6px; height: 6px; }
.status.verzonden::before { background: var(--groen); }
.status.gesimuleerd { color: var(--stil); }
.status.gesimuleerd::before { background: var(--zacht); }
.status.ontvangen::before { background: var(--blauw); }
.status.mislukt, .status.geweigerd { color: var(--rood); }
.status.mislukt::before, .status.geweigerd::before { background: var(--rood); }

/* ---------- knoppen ---------- */
button, .knop {
  font: inherit; font-size: 13px; font-weight: 700; height: 34px; padding: 0 14px;
  border-radius: 9px; border: 1px solid var(--geel-donker); background: var(--geel); color: #111;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
button:hover, .knop:hover { background: #ffe14a; text-decoration: none; }
button:active { transform: scale(.98); }
button.tweede, .knop.tweede { background: var(--vlak2); color: var(--tekst); border-color: var(--lijn); }
button.tweede:hover, .knop.tweede:hover { background: var(--hover); border-color: rgba(255, 255, 255, .18); }
button.zwart, .knop.zwart { background: var(--tekst); color: #111; border-color: var(--tekst); }
button.klein, .knop.klein { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
button.gevaar { background: transparent; color: var(--rood); border-color: rgba(255, 99, 99, .35); }
button.gevaar:hover { background: rgba(255, 99, 99, .12); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--geel); outline-offset: 2px;
}
.acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 22px; }
.acties .label { font-size: 12px; color: var(--stil); margin-right: 4px; }

/* ---------- formulieren ---------- */
.rij { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin: .6rem 0; }
.rij form { margin: 0; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--stil); }
label.vink { flex-direction: row; align-items: center; gap: .4rem; }
input, select, textarea {
  font: inherit; color: var(--tekst); background: var(--vlak2);
  border: 1px solid var(--lijn); border-radius: 9px; padding: 6px 10px; height: 34px;
}
input::placeholder, textarea::placeholder { color: var(--zacht); }
input[type=checkbox] { height: auto; accent-color: var(--geel); }
input[type=file] { height: auto; padding: 6px 0; border: 0; background: transparent; }
textarea { height: auto; width: 100%; line-height: 1.5; resize: vertical; }
textarea.mono { font: 12.5px/1.5 var(--mono); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(255, 214, 10, .6); }
select option { background: var(--vlak2); }
.rij input#tekst { flex: 1; min-width: 240px; }
.formulier { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem 1.2rem; align-items: end; }
.formulier label:has(textarea) { grid-column: 1 / -1; }
.formulier .heel { grid-column: 1 / -1; }

/* ---------- tabellen ---------- */
table.lijst { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lijst th { text-align: left; font-size: 10.5px; font-weight: 700; color: var(--stil); text-transform: uppercase; letter-spacing: .07em; padding: 8px; border-bottom: 1px solid var(--lijn); }
table.lijst td { border-bottom: 1px solid var(--lijn2); padding: 10px 8px; vertical-align: top; }
table.lijst tbody tr:hover td { background: rgba(255, 255, 255, .03); }
table.lijst td a { text-decoration: underline; text-decoration-color: var(--zacht); }
.formtabel input, .formtabel select { width: 100%; min-width: 80px; height: 30px; }
.formtabel input[type=checkbox] { width: auto; min-width: 0; height: auto; }
.formtabel button { height: 30px; padding: 0 10px; font-size: 12px; }

/* ---------- blokken en detail ---------- */
.twee { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .twee { grid-template-columns: 1fr; } }
.blok { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 16px 18px; background: var(--vlak); }
.blok + .blok { margin-top: 14px; }
.blok h3 { margin: 0 0 8px; }
.blok > p:last-child { margin-bottom: 0; }
dl.kenmerken { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px 16px; font-size: 13px; margin: 0; }
dl.kenmerken dt { color: var(--stil); }
dl.kenmerken dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- gesprekken en berichten ---------- */
.gesprek { border: 1px solid var(--lijn); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; background: var(--vlak); }
.gesprekkop { display: flex; gap: .8rem; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--lijn2); background: var(--vlak2); }
.gesprekkop a { margin-left: auto; font-size: 13px; }
.transcript { max-height: 420px; overflow-y: auto; padding: 6px 14px; }
.transcript.groot { max-height: 60vh; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--vlak); }
.lijn { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; padding: 6px 0; border-bottom: 1px solid var(--lijn2); }
.lijn:last-child { border-bottom: 0; }
.lijn .wie { color: var(--stil); font-size: 12px; padding-top: 2px; }
.lijn.agent .wie { color: var(--geel); font-weight: 700; }
.lijn.actie, .lijn.systeem { font-size: 12.5px; }
.lijn.actie .wat { color: var(--groen); }
.lijn.systeem .wat { color: var(--stil); }
.lijn.beller-live .wat, .lijn.wacht .wat { color: var(--stil); }

.bericht { border-top: 1px solid var(--lijn2); padding: 12px 0; }
.bericht:first-of-type { border-top: 0; }
.bericht pre { color: var(--tekst); }
.klant { border-top: 1px solid var(--lijn2); padding: 12px 0; }
.toestel { padding-left: 1rem; }
.toestel input { width: auto; }

/* ---------- tickets: lijstbalk + detail ---------- */
.werkvlak { display: grid; grid-template-columns: var(--lijstbalk) minmax(0, 1fr); min-height: 100dvh; }
.werkvlak.ingeklapt { grid-template-columns: var(--lijstbalk-smal) minmax(0, 1fr); }
.lijstbalk { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; border-right: 1px solid var(--lijn); background: #101013; min-width: 0; }
.lijstbalk-kop { padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 10px; }
.lijstbalk-kop h1 { font-size: 18px; }
.lijstbalk-kop .rechts { display: flex; gap: 6px; }
.lijstbalk .filters { display: flex; gap: 4px; flex-wrap: wrap; }
.lijstbalk .filters a { font-size: 12px; font-weight: 600; color: var(--stil); padding: 4px 9px; border-radius: 999px; border: 1px solid transparent; }
.lijstbalk .filters a:hover { color: var(--tekst); text-decoration: none; }
.lijstbalk .filters a.actief { color: var(--tekst); border-color: var(--lijn); background: var(--vlak2); }
.lijstbalk .filters a .tel { margin-left: 5px; color: var(--zacht); font-weight: 600; }
.lijstbalk-lijst { overflow-y: auto; flex: 1; padding: 0 8px 16px; }
.lijstbalk .groepkop { font-size: 10.5px; font-weight: 700; color: var(--zacht); text-transform: uppercase; letter-spacing: .08em; padding: 14px 10px 4px; }
.item { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 10px 9px 8px; border-radius: 10px; margin-bottom: 1px; }
.item:hover { background: var(--vlak2); text-decoration: none; }
.item.actief { background: var(--vlak2); box-shadow: inset 0 0 0 1px rgba(255, 214, 10, .35); }
.item .streep { width: 4px; height: 100%; min-height: 34px; border-radius: 2px; background: var(--lijn); }
.item.telefoon .streep { background: var(--blauw); box-shadow: 0 0 10px rgba(91, 147, 255, .5); }
.item.mail .streep { background: var(--oranje); box-shadow: 0 0 10px rgba(255, 138, 61, .5); }
.item.eigen .streep { background: var(--zacht); }
.item.afgesloten { opacity: .6; }
.item .naam { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .titel { font-size: 12px; color: var(--stil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.item .rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--zacht); white-space: nowrap; }
.ingeklapt .lijstbalk-kop h1 { font-size: 14px; }
.ingeklapt .lijstbalk .filters a { padding: 3px 7px; font-size: 11px; }
.ingeklapt .lijstbalk .filters a .tel { display: none; }
.ingeklapt .item { grid-template-columns: 3px minmax(0, 1fr); padding: 7px 8px 7px 6px; }
.ingeklapt .item .titel, .ingeklapt .item .rechts, .ingeklapt .item .urg { display: none; }
.ingeklapt .item .naam { font-size: 12.5px; }
.ingeklapt .lijstbalk-kop .nieuw-knop span { display: none; }
.lijstbalk .nieuw-knop { height: 30px; }

.detail { padding: 22px 30px 64px; min-width: 0; max-width: 1180px; }
.detail .kies { display: grid; place-items: center; min-height: 60vh; color: var(--stil); text-align: center; }
.ticketkop { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.ticketkop .inhoud { flex: 1; min-width: 0; }
.ticketkop h1 { font-size: 22px; }
.ticketkop input.titel { font: inherit; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 2px 8px; margin-left: -8px; height: auto; width: 100%; color: var(--tekst); }
.ticketkop input.titel:hover { border-color: var(--lijn); }
.ticketkop input.titel:focus { border-color: rgba(255, 214, 10, .6); background: var(--vlak2); }
.bewaarstatus { font-size: 12px; color: var(--zacht); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.bewaarstatus.bezig { color: var(--stil); }
.bewaarstatus.klaar { color: var(--groen); }
.bewaarstatus.fout { color: var(--rood); }
.kern { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; padding: 14px 18px; }
.kern label { gap: 5px; }
.kern select, .kern input { height: 32px; width: 100%; }
.kern .waarde { font-weight: 600; font-size: 13px; padding-top: 5px; overflow-wrap: anywhere; }
.veld-los { display: block; width: 100%; }
textarea.autosave { min-height: 72px; background: var(--vlak2); }
.deelrij { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.deelrij form { margin: 0; }
.deelrij .rol { color: var(--zacht); font-weight: 500; margin-left: 4px; }

/* WhatsApp-draad */
.chat { display: flex; flex-direction: column; min-height: 320px; max-height: 620px; overflow-y: auto; padding: 14px 16px; gap: 6px; background: #0d1114; background-image: radial-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px); background-size: 18px 18px; border-top: 1px solid var(--lijn2); border-bottom: 1px solid var(--lijn2); }
.chat .scheiding { align-self: center; font-size: 11px; color: var(--stil); background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 3px 10px; margin: 8px 0 4px; }
.chat .scheiding a { color: var(--tekst); }
.bubbel { max-width: 72%; padding: 8px 12px 6px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.bubbel.uit { align-self: flex-end; background: var(--wa-uit); border-bottom-right-radius: 3px; }
.bubbel.in { align-self: flex-start; background: var(--wa-in); border-bottom-left-radius: 3px; }
.bubbel .tijd { display: flex; justify-content: flex-end; gap: 5px; font-size: 10.5px; color: rgba(255, 255, 255, .55); margin-top: 3px; }
.bubbel .tijd .vink { color: var(--groen); font-weight: 700; }
.bubbel .tijd .wacht { color: var(--oranje); }
.bubbel .tijd .mislukt { color: var(--rood); }
.bubbel.ander { opacity: .7; }
.chat-invoer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 12px; }
.chat-invoer textarea { flex: 1; min-height: 40px; max-height: 160px; border-radius: 12px; }
.chat-invoer button { height: 40px; }
.chat-voet { font-size: 11.5px; color: var(--zacht); padding: 0 16px 12px; }

/* mails */
.mailkaart { border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 14px; background: var(--vlak2); margin-bottom: 10px; }
.mailkaart.in { background: linear-gradient(90deg, rgba(255, 138, 61, .12), var(--vlak2) 55%); }
.mailkaart.uit { background: linear-gradient(90deg, rgba(255, 214, 10, .1), var(--vlak2) 55%); }
.mailkaart .kop { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12px; color: var(--stil); margin-bottom: 6px; }
.mailkaart .kop strong { color: var(--tekst); font-size: 13px; }
.mailkaart pre { font: inherit; margin: 0; }
.mailkaart details summary { cursor: pointer; color: var(--stil); font-size: 12px; }

/* versies */
.versies { font-size: 12.5px; }
.versies .versie { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn2); }
.versies .versie .velden { color: var(--stil); flex: 1; min-width: 0; }
.versies form { margin: 0; }

/* ---------- organisatie ---------- */
.orgchart { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.tier { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 0 26px; }
.tier::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 26px; background: var(--lijn); }
.tier:last-child { padding-bottom: 0; }
.tier:last-child::after { display: none; }
.tier .laagtitel { font-size: 10.5px; font-weight: 700; color: var(--zacht); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.tier .personen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.persoon { width: 236px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--lijn); background: var(--vlak2); display: flex; flex-direction: column; gap: 6px; }
.persoon.uit { opacity: .55; }
.persoon .naam { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.persoon .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--geel); color: #111; font-weight: 800; font-size: 11px; display: grid; place-items: center; flex: none; }
.persoon.administratie .avatar { background: var(--oranje); }
.persoon.technieker .avatar { background: var(--blauw); color: #fff; }
.persoon .contact { font-size: 12px; color: var(--stil); display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.persoon details summary { font-size: 11.5px; color: var(--zacht); cursor: pointer; }
.persoon .formulier { grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
.persoon .formulier input, .persoon .formulier select { height: 30px; }
.dagen { display: flex; gap: 6px; flex-wrap: wrap; }
.dagen label { flex-direction: row; align-items: center; gap: 5px; border: 1px solid var(--lijn); border-radius: 8px; padding: 5px 9px; background: var(--vlak2); cursor: pointer; }
.dagen label:has(input:checked) { border-color: rgba(255, 214, 10, .6); color: var(--tekst); }

/* ---------- klantfiche ---------- */
.klantkop { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.klantkop dl.kenmerken { grid-template-columns: 110px minmax(0, 1fr); }
.klantrij { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 120px 18px; gap: 12px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--lijn2); position: relative; }
.klantrij:hover { background: rgba(255, 255, 255, .04); }
.klantrij .naam { font-weight: 700; }
.klantrij .meta { font-size: 12px; color: var(--stil); }
.klantrij .dek::after { content: ""; position: absolute; inset: 0; }
.tijdlijn .punt { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn2); }
.tijdlijn .punt .tijd { font-size: 12px; color: var(--stil); }
.tijdlijn details summary { cursor: pointer; font-size: 12.5px; color: var(--stil); }

/* ---------- segmenten (statusfilter, oudere pagina's) ---------- */
.segmenten { display: flex; gap: 22px; border-bottom: 1px solid var(--lijn); margin-bottom: 2px; }
.segmenten a { padding: 8px 0 10px; margin-bottom: -1px; color: var(--stil); font-weight: 600; border-bottom: 2px solid transparent; }
.segmenten a:hover { color: var(--tekst); text-decoration: none; }
.segmenten a.actief { color: var(--tekst); border-bottom-color: var(--geel); }
.segmenten a .tel { margin-left: 6px; color: var(--zacht); font-weight: 600; }

/* ---------- smal scherm ---------- */
@media (max-width: 900px) {
  .kpis { grid-template-columns: 1fr; }
  .trij { grid-template-columns: 70px minmax(0, 1fr) 18px; }
  .trij .tijd { display: none; }
  .trij .titel, .trij .meta { white-space: normal; }
  .werkvlak, .werkvlak.ingeklapt { grid-template-columns: 1fr; }
  .lijstbalk { position: static; height: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--lijn); }
  .ingeklapt .lijstbalk { max-height: 30vh; }
  .ingeklapt .item .titel, .ingeklapt .item .rechts { display: block; }
  .detail { padding: 18px 16px 48px; }
  .ticketkop { flex-wrap: wrap; }
  .ticketkop input.titel { font-size: 18px; }
  .bubbel { max-width: 90%; }
  .klantrij { grid-template-columns: minmax(0, 1fr) 18px; }
  .klantrij .midden, .klantrij .rechtsk { display: none; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .zijbalk { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--lijn); padding: 12px 12px 8px; }
  .merk { padding-bottom: 8px; }
  .zijbalk nav { flex-direction: row; flex-wrap: wrap; gap: 2px 4px; }
  .groep { display: none; }
  .zijbalk nav a { height: 30px; padding: 0 9px; font-size: 13px; }
  .zijbalk nav a.actief { box-shadow: none; }
  .zijbalk-voet { display: none; }
  main { padding: 20px 16px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  button, .knop { transition: none; }
}

/* ---------- aanmelden ---------- */
body.login { display: grid; place-items: center; min-height: 100dvh; background: var(--bg); }
.loginvak { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--lijn); border-radius: 16px; padding: 2rem; width: min(360px, 92vw); display: grid; gap: 1rem; background: var(--vlak); }
.loginvak::before { content: ""; position: absolute; z-index: -1; width: 70%; height: 80%; left: -20%; top: -40%; background: var(--geel); filter: blur(60px); opacity: .25; border-radius: 50%; }
.loginvak.beheer::before { background: var(--blauw); }
.loginvak h1 { font-size: 20px; }

/* ---------- werkbon: de gedeelde ticketlink op de gsm van de technieker ----------
   Eén kolom, grote raakvlakken (44 px), en geen enkel element dat je moet wegscrollen om te
   kunnen bedienen. Op een breed scherm blijft het één kolom met een maximumbreedte: het is een
   werkbon, geen dashboard. */
body.werkbon {
  max-width: 640px; margin: 0 auto; overflow-wrap: break-word;
  padding: 0 14px calc(28px + env(safe-area-inset-bottom));
  font-size: 15px;
}
.wb-kop { padding: 18px 2px 14px; border-bottom: 1px solid var(--lijn); margin-bottom: 14px; }
.wb-kop-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.wb-kop-rij .nr { font-weight: 800; color: var(--stil); }
.wb-kop-rij .wb-merk { margin-left: auto; color: var(--zacht); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; }
.wb-kop h1 { font-size: 22px; margin: 10px 0 4px; line-height: 1.25; }
.wb-sub { font-size: 12.5px; color: var(--stil); margin: 0; }
.wb-melding { margin: 0 0 14px; }

.wb-vak { border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--vlak); padding: 14px 16px 16px; margin-bottom: 12px; }
.wb-vak h2 { font-size: 15px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wb-vak h3 { font-size: 13px; margin: 0 0 4px; }
.wb-vak > p:last-child { margin-bottom: 0; }
.wb-klein { font-size: 12px; color: var(--stil); margin: 4px 0 0; }
.wb-klein a { text-decoration: underline; text-decoration-color: var(--zacht); }
.wb-adres { font-size: 16px; line-height: 1.45; margin: 0 0 12px; }
.wb-letterlijk { font: 600 15px/1.45 var(--mono); background: var(--vlak2); border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; margin: 0 0 2px; white-space: pre-wrap; }
.wb-voorstel { border-top: 1px solid var(--lijn2); margin-top: 12px; padding-top: 10px; }

/* Grote knoppen: bellen en route zijn wat iemand met handschoenen aan moet kunnen raken. */
.wb-acties { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.wb-acties form { margin: 0; }
.knop.wb-groot, button.wb-groot { height: 46px; padding: 0 18px; font-size: 14.5px; border-radius: 11px; }
.wb-acties .knop.wb-groot:first-child { flex: 1 1 auto; justify-content: center; }

.wb-feiten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 12px 0 0; font-size: 13.5px; }
.wb-feiten dt { font-size: 11px; font-weight: 700; color: var(--stil); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.wb-feiten dd { margin: 0; }
/* de inbelfiche (14-10): gele rand links, zoals de rest van wat dringend is; geen schaduw of gloed */
.wb-fiche { border-left: 3px solid var(--geel, #f5c400); }
.wb-fiche h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--stil); margin: 14px 0 6px; }
.wb-fiche .wb-letterlijk { display: inline-block; font-size: 13.5px; padding: 2px 8px; }
.wb-lijst { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.wb-lijst li + li { margin-top: 6px; }

/* Overbrugging: het enige vlak met kleur, want het is het enige dat je écht niet mag vergeten. */
.wb-vak.wb-let-op { border-color: rgba(255, 138, 61, .45); background: rgba(255, 138, 61, .07); }
.wb-vak.wb-let-op h2 { color: var(--oranje); }

/* ---------- afvinklijst ---------- */
.wb-taken { list-style: none; margin: 0; padding: 0; }
.wb-taken li { border-bottom: 1px solid var(--lijn2); }
.wb-taken li:last-of-type { border-bottom: 0; }
.wb-taken li.stil { padding: 10px 0; }
.wb-titel, .taaktitel { display: block; font-weight: 700; margin-bottom: 2px; }
.wb-vink { margin: 0; }
.wb-vink button {
  width: 100%; height: auto; min-height: 48px; padding: 11px 0; background: transparent; border: 0;
  color: var(--tekst); font-weight: 500; font-size: 14.5px; text-align: left; line-height: 1.4;
  display: flex; align-items: flex-start; gap: 12px;
  white-space: normal;   /* button/.knop staat globaal op nowrap; een taak is een zin, geen label */
}
.wb-vink .tekst { min-width: 0; overflow-wrap: anywhere; }
.wb-vink button:hover { background: transparent; }
.wb-vink .vakje {
  flex: none; width: 24px; height: 24px; margin-top: 1px; border: 1.5px solid var(--zacht);
  border-radius: 7px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #111;
}
.wb-taken li.klaar .vakje { background: var(--geel); border-color: var(--geel-donker); }
.wb-taken li.klaar .tekst { color: var(--stil); text-decoration: line-through; text-decoration-color: var(--zacht); }
.wb-taken li .wb-klein { padding: 0 0 8px 36px; margin: -6px 0 0; }
.wb-erbij { display: flex; gap: 8px; margin-top: 12px; }
.wb-erbij input { flex: 1; min-width: 0; height: 42px; }
.wb-erbij button { height: 42px; }
.wb-teller { font-size: 12px; font-weight: 700; color: var(--stil); font-variant-numeric: tabular-nums; }

/* ---------- verslag en terugkoppelen ---------- */
.wb-label { margin-top: 12px; }
body.werkbon textarea { min-height: 96px; font-size: 15px; }
body.werkbon input, body.werkbon select { height: 42px; font-size: 15px; }
.wb-terugkoppel { border-top: 1px solid var(--lijn2); margin-top: 14px; padding-top: 12px; }
.wb-terugkoppel button { margin-top: 8px; }
/* scoped op .werkbon: dezelfde klasse bestaat al op de ticketpagina van het dashboard */
body.werkbon .bewaarstatus { font-size: 11.5px; font-weight: 600; margin-left: auto; min-height: 0; }

.wb-eerder { list-style: none; margin: 10px 0 0; padding: 0; }
.wb-eerder li { padding: 8px 0; border-bottom: 1px solid var(--lijn2); font-size: 13.5px; }
.wb-eerder li:last-child { border-bottom: 0; }
body.werkbon summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.wb-voet { font-size: 11.5px; color: var(--zacht); text-align: center; padding: 18px 10px 0; line-height: 1.6; }

/* ---------- takenlijst op de ticketpagina (dezelfde lijst als op de werkbon) ---------- */
.takenlijst { list-style: none; margin: 0; padding: 0; }
/* de twee fasen van het voorstel (William 05-10-2026) */
.takenlijst li.fasekop, .wb-taken li.wb-fasekop { display: block; padding: 12px 0 6px; border-bottom: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--geel); }
.takenlijst li.fasekop:first-child, .wb-taken li.wb-fasekop:first-child { padding-top: 2px; }
.takenlijst li { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; gap: 8px; align-items: center; border-bottom: 1px solid var(--lijn2); }
.takenlijst li:last-of-type { border-bottom: 0; }
.takenlijst li.stil { display: block; padding: 8px 0; }
.takenlijst form { margin: 0; }
.vinkknop { width: 100%; height: auto; min-height: 36px; padding: 7px 0; background: transparent; border: 0; color: var(--tekst); font-weight: 500; font-size: 13.5px; text-align: left; line-height: 1.4; display: flex; align-items: flex-start; gap: 10px; white-space: normal; }
.vinkknop .tekst { min-width: 0; overflow-wrap: anywhere; }
.vinkknop:hover { background: transparent; }
.vinkknop .vakje { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--zacht); border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #111; }
.takenlijst li.klaar .vakje { background: var(--geel); border-color: var(--geel-donker); }
.takenlijst li.klaar .tekst { color: var(--stil); text-decoration: line-through; text-decoration-color: var(--zacht); }
.taak-erbij { display: flex; gap: 8px; margin-top: 10px; }
.taak-erbij input { flex: 1; min-width: 0; }

/* ---------- afspraak voorstellen (ticketpagina) ---------- */
.afspraak .duurkeuze { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.afspraak .duurkeuze .label { margin-right: 6px; font-size: 12px; font-weight: 600; }
.afspraak .duur { flex-direction: row; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--lijn); border-radius: 9px; cursor: pointer; color: var(--stil); font-size: 12.5px; }
.afspraak .duur:has(input:checked) { border-color: var(--geel); color: var(--tekst); background: rgba(255, 214, 10, .08); }
.afspraak .duur input { accent-color: var(--geel); }
.afspraak .momenten { display: grid; gap: 6px; margin-bottom: 8px; }
.afspraak .moment { display: flex; gap: 6px; align-items: center; }
.afspraak .moment input[type=date] { flex: 1; min-width: 130px; }
.afspraak .moment input[type=time] { width: 110px; }
.afspraak .versturen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; font-size: 12px; }
.afspraak .momentenlijst { list-style: none; margin: 0 0 8px; padding: 0; }
.afspraak .momentenlijst li { padding: 5px 0; border-bottom: 1px solid var(--lijn2); font-size: 13.5px; }
.afspraak .momentenlijst li:last-child { border-bottom: 0; }
.afspraak .momentenlijst li.voorbij { color: var(--zacht); text-decoration: line-through; }

/* ---------- afsprakenpagina van de klant ---------- */
.afspraakpagina .keuzes { display: grid; gap: 10px; }
.afspraakpagina .keuzes form { margin: 0; }
/* Drie gelijkwaardige keuzes. Bewust GEEN gele vlakken: in Suppior is geel een accent, en drie
   volle gele blokken onder elkaar lezen als reclame in plaats van als een keuze. Donkere kaart met
   een duidelijke rand plus een geel pijltje: rustig, en toch onmiskenbaar aantikbaar. */
.afspraakpagina .keuze {
  width: 100%; height: auto; min-height: 72px; padding: 15px 16px; text-align: left;
  display: flex; align-items: center; gap: 14px; white-space: normal; border-radius: 12px;
  background: var(--vlak2); color: var(--tekst); border: 1px solid rgba(255, 255, 255, .16);
}
.afspraakpagina .keuze:hover { background: var(--hover); border-color: var(--geel); }
.afspraakpagina .keuze:active { transform: scale(.995); }
.afspraakpagina .keuze .tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.afspraakpagina .keuze .dag { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; }
.afspraakpagina .keuze .uur { font-size: 14px; font-weight: 600; color: var(--stil); }
.afspraakpagina .keuze .pijl { flex: none; color: var(--geel); font-size: 20px; font-weight: 700; line-height: 1; }
.afspraakpagina .wb-vak.wb-gekozen { border-color: rgba(76, 195, 138, .45); background: rgba(76, 195, 138, .07); }
.afspraakpagina .wb-gekozen h2 { color: var(--groen); }

/* kennisbank: één blok per merk, gebruikers- en installateursinfo naast elkaar (29-09) */
.merkblok { margin: 18px 0; }
.merkblok-kop { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.merkblok-kop h2 { margin: 0; }
.helften { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.helft { min-width: 0; border-top: 1px solid var(--lijn2); padding-top: 8px; }
.helft h3 { margin: 4px 0 2px; }
.klein { font-size: 12px; }
.merkblok details { border-top: 1px solid var(--lijn2); padding: 8px 0; }
.merkblok summary { cursor: pointer; font-size: 13px; }
.onderwerpen { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--stil); columns: 1; }
.onderwerpen li { margin: 2px 0; }
.snelkaart { margin: 8px 0 0; font-size: 12.5px; }
.snelkaart dt { font-weight: 700; margin-top: 8px; }
.snelkaart dd { margin: 2px 0 0; color: var(--stil); }
.merkblok .fiches { margin-top: 10px; }
@media (max-width: 900px) { .helften { grid-template-columns: minmax(0, 1fr); } }
.standaard { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; padding: 0; font-size: 12.5px; }
.snelkaart-knop { margin: 4px 0 8px; }

/* merkkeuze bij een klantagent (Organisaties > Nieuwe klant, Instellingen > Profiel) */
fieldset.merkkeuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3rem 1rem;
  border: 1px solid var(--lijn); border-radius: 10px; padding: .7rem .9rem .9rem; margin: 0; }
fieldset.merkkeuze[hidden] { display: none; }
fieldset.merkkeuze legend { color: var(--stil); font-size: .85rem; padding: 0 .3rem; }
fieldset.merkkeuze > label:not(.vink), fieldset.merkkeuze > p { grid-column: 1 / -1; }

/* ticket: ingepland via de planning (app/planning.py) */
.planning-feiten { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.planning-feiten li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }

/* ---------- Suppior Assist: meeluisteren (assist.html) ---------- */
.assist { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .assist { grid-template-columns: 1fr; } }
.assist-paneel, .assist-zij { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.assist-kop { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.assist-kop h2 { margin: 0; font-size: 15px; }
.assist-kop > :last-child:not(:first-child) { margin-left: auto; }
.assist-vraag { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--lijn2); cursor: pointer; }
.assist-vraag:last-child { border-bottom: 0; }
.assist-vraag input { margin-top: 3px; }
.assist-vraag .wat { display: block; font-weight: 600; }
.assist-vraag .stil { display: block; font-size: 12.5px; }
.assist-vraag.klaar .wat { color: var(--stil); font-weight: 500; }
.assist-stappen { margin: 0; padding-left: 20px; }
.assist-stappen li { padding: 4px 0; }
.assist-stappen li.klaar { color: var(--stil); text-decoration: line-through; text-decoration-color: var(--zacht); }
.assist-optie { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lijn2); }
.assist-optie button { margin-left: auto; }
.assist-samenvatting { margin: 10px 0 0; }
.assist-waarschuwing { background: rgba(255, 99, 99, .12); border-color: rgba(255, 99, 99, .4); color: var(--tekst); font-weight: 600; }
.assist-test { display: flex; flex-direction: column; gap: 8px; }
.assist-sprekers { display: flex; gap: 16px; font-size: 13px; }
.assist-testknoppen { display: flex; gap: 8px; }
.assist-signaal { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 8px 12px; border-left: 2px solid var(--blauw); margin-bottom: 8px; }
.assist-signaal.gevaar { border-left-color: var(--rood); }
.assist-signaal.snelkaart { border-left-color: var(--groen); }
.assist-signaal span { color: var(--stil); font-size: 13px; }
.assist-meting { font-size: 12px; margin: 6px 0 0; }
.assist-sjabloon { margin: -2px 0 8px; font-size: 12.5px; }
.assist-diagnose { font-weight: 600; margin: 0 0 6px; }

/* ---------- Werkbank Assist (assist_werkbank.html) ---------- */
.werkbank-bediening { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.werkbank-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.werkbank-rij label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.werkbank-rij input { flex: 1 1 320px; }
.werkbank-fase { margin-left: auto; font-size: 13px; }
.werkbank-spreker { background: var(--vlak2); color: var(--tekst); border: 1px solid var(--lijn); }
.werkbank-spreker[aria-pressed="true"] { background: var(--geel); color: #111; border-color: var(--geel); }
.werkbank-spreker:disabled { opacity: .45; }
#notitiemodus[aria-pressed="true"] { border-color: var(--geel); color: var(--geel); }
kbd { font: 11px var(--mono); color: var(--stil); border: 1px solid var(--lijn); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.werkbank-gehoord { margin: 0; min-height: 1.4em; color: var(--stil); font-size: 13px; }
.werkbank-vertraging summary { cursor: pointer; font-size: 13px; color: var(--stil); }
.werkbank-vertraging .formulier { margin-top: 10px; }
.werkbank-noot { margin-left: auto; }
.assist-kop .werkbank-noot ~ .werkbank-noot { display: none; }
.werkbank-tijdlijn { margin: 0; padding-left: 0; list-style: none; max-height: 260px; overflow-y: auto; font-size: 12.5px; }
.werkbank-tijdlijn li { padding: 4px 0; border-bottom: 1px solid var(--lijn2); }
.werkbank-notitie { padding: 8px 0; border-bottom: 1px solid var(--lijn2); font-size: 13px; }
.werkbank-notitie.geschrapt { opacity: .5; text-decoration: line-through; }
body.werkbank-notitiemodus #scherm .assist-vraag, body.werkbank-notitiemodus #scherm li,
body.werkbank-notitiemodus #scherm .assist-signaal, body.werkbank-notitiemodus #scherm .lijn,
body.werkbank-notitiemodus #scherm dd, body.werkbank-notitiemodus #scherm p { cursor: crosshair; }
body.werkbank-notitiemodus #scherm .assist-vraag:hover, body.werkbank-notitiemodus #scherm li:hover,
body.werkbank-notitiemodus #scherm .assist-signaal:hover, body.werkbank-notitiemodus #scherm .lijn:hover,
body.werkbank-notitiemodus #scherm dd:hover { outline: 1px dashed var(--geel); outline-offset: 2px; }
.werkbank-dialoog { background: var(--vlak); color: var(--tekst); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px 20px; width: min(560px, 92vw); }
.werkbank-dialoog.breed { width: min(900px, 94vw); }
.werkbank-dialoog::backdrop { background: rgba(0, 0, 0, .6); }
.werkbank-dialoog form { display: flex; flex-direction: column; gap: 12px; }
.werkbank-dialoog label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.werkbank-dialoog h2 { margin: 0 0 4px; font-size: 16px; }

/* ---------- Assist: dossier bovenaan, fasen, takenlijst (13-10) ---------- */
.assist-scherm { display: flex; flex-direction: column; gap: 14px; }
.assist-verborgen { display: none !important; }
.assist-dossier { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px 22px; }
.assist-dossier-hoofd { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 18px 28px; align-items: start; }
@media (max-width: 1000px) { .assist-dossier-hoofd { grid-template-columns: 1fr 1fr; } }
.assist-dossier-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--stil); margin-bottom: 4px; }
.assist-dossier-wie h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }
.assist-dossier-systemen { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; }
.assist-systeem { font-size: 15px; }
.assist-systeem strong { font-size: 16px; }
.assist-systeem .stil { display: block; font-size: 12px; }
.assist-dossier-gegevens { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 18px 0 0; font-size: 13px; }
.assist-dossier-gegevens dt { color: var(--stil); }
.assist-dossier-gegevens dd { margin: 0; }
.assist-dossier-let { margin: 12px 0 0; font-size: 13.5px; color: var(--oranje); font-weight: 600; }
.assist-dossier-historiek { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn2); font-size: 13px; }
/* Het draaiboek (13-10): één doel en één zin, in het geel van Suppior. Geen schaduw, geen rand-accent:
   het vlak zelf en de grootte van de zin doen het werk. Donkere inkt op geel in beide thema's. */
.assist-focusrij { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 1000px) { .assist-focusrij { grid-template-columns: minmax(0, 1fr); } }
.assist-focus { --inkt: #1E1B16; background: var(--geel); color: var(--inkt); border-radius: 12px; padding: 26px 30px 24px;
  display: flex; flex-direction: column; min-height: 248px; }
.assist-focus-kop { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; }
.assist-focus-doel { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.assist-focus-doel #focus-nr { font-variant-numeric: tabular-nums; margin-right: 12px; opacity: .55; }
.assist-focus-blader { display: flex; gap: 4px; margin-left: 8px; }
.assist-focus .assist-focus-blader button { width: 34px; height: 30px; padding: 0 0 2px; font-size: 22px; font-weight: 700;
  line-height: 1; border-color: rgba(30, 27, 22, .3); }
.assist-focus .assist-focus-blader button:disabled { opacity: .3; cursor: default; background: transparent; }
.assist-focus.blader { background: #FFE58A; }
.assist-focus.blader .assist-focus-doel { opacity: .8; }
.assist-werkbon { list-style: none; padding-left: 0; }
.assist-werkbon li.assist-werkbon-fase { margin-top: 10px; padding: 0 0 4px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--stil); border-bottom: 1px solid var(--lijn2); }
.assist-werkbon li.assist-werkbon-fase:first-child { margin-top: 0; }
.assist-werkbon li.assist-werkbon-stap { padding: 8px 0; border-bottom: 1px solid var(--lijn2); }
.assist-werkbon li.assist-werkbon-stap strong { display: block; margin-bottom: 2px; }
.assist-werkbon li.assist-werkbon-stap span { color: var(--stil); font-size: 13.5px; }
.assist-werkbon kbd { display: inline-block; padding: 0 .35em; font: 600 .85em/1.45 var(--font); border: 1px solid currentColor;
  border-radius: 4px; background: transparent; color: inherit; }
.assist-focus-nog { margin-left: auto; font-size: 12.5px; opacity: .65; font-variant-numeric: tabular-nums; }
.assist-focus-zin { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.18; font-weight: 600; letter-spacing: -0.022em;
  margin: 0; max-width: 30ch; text-wrap: balance; }
.assist-focus-soort { margin: -8px 0 8px; font-size: 13px; font-weight: 600; opacity: .62; }
.assist-focus-soort:empty { display: none; }
.assist-focus-hoe { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(30, 27, 22, .16); font-size: 19px;
  line-height: 1.55; font-weight: 500; max-width: 46ch; }
.assist-focus-hoe:empty, .assist-focus-bron:empty { display: none; }
.assist-focus kbd, .assist-taak-hoe kbd { display: inline-block; min-width: 1.6em; padding: 0 .4em; margin: 0 .08em;
  font: 600 .86em/1.5 var(--font); text-align: center; border: 1px solid currentColor; border-bottom-width: 2px;
  border-radius: 5px; background: transparent; color: inherit; }
/* Stappenplan onder elkaar, toetsen zoals op het klavier (William 27-10) */
.assist-stappenplan { margin: 0; padding-left: 1.5em; display: grid; gap: 8px; }
.assist-stappenplan li { padding-left: .2em; }
.assist-stappenplan li::marker { font-weight: 700; }
.assist-focus .klavier-toets, .assist-taak-hoe .klavier-toets { display: inline-flex; align-items: center; gap: .25em;
  padding: .05em .45em; vertical-align: .05em; white-space: nowrap; }
.klavier-toets svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.klavier-toets.groen { color: #1f7a3d; }
.assist-focus-bron { margin: 10px 0 0; font-size: 12.5px; opacity: .55; }
.assist-taak-hoe { display: block; margin-top: 2px; font-size: 13px; color: var(--stil); }
.assist-taak .wat { display: block; }
.assist-focus-opmerking { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(30, 27, 22, .16); font-size: 15px; line-height: 1.5; max-width: 62ch; }
.assist-focus-opmerking[hidden] { display: none; }
.assist-focus-hulp { margin: 14px 0 0; font-size: 15px; line-height: 1.5; opacity: .72; max-width: 62ch; }
.assist-focus-hulp:empty { display: none; }
.assist-focus-duur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; }
.assist-focus-duur:empty { display: none; }
.assist-focus-duur > span { font-size: 12.5px; font-weight: 600; opacity: .65; margin-right: 6px; }
.assist-focus .assist-focus-duur button { height: 30px; padding: 0 11px; font-size: 13px; font-weight: 600; }
.assist-focus .assist-focus-duur button.gekozen { background: var(--inkt); color: #fff; border-color: var(--inkt); cursor: default; }
.assist-focus-opties { margin-top: 18px; display: flex; flex-direction: column; }
.assist-focus-opties:empty { display: none; }
.assist-focus-optie { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(30, 27, 22, .16); font-size: 15px; }
.assist-focus-optie > span > span { opacity: .7; }
.assist-focus-optie button { margin-left: auto; }
/* het antwoord van de klant aanklikken als Suppior het niet (snel genoeg of juist) hoorde (26-10) */
.assist-focus-antwoorden { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 14px;
  border-top: 1px solid rgba(30, 27, 22, .16); }
.assist-focus-antwoorden:empty { display: none; }
.assist-focus-antwoorden > span { flex-basis: 100%; font-size: 12.5px; font-weight: 600; opacity: .65; }
.assist-focus .assist-focus-antwoorden button { height: 42px; padding: 0 18px; font-size: 15px; background: rgba(255, 255, 255, .55); }
.assist-focus .assist-focus-antwoorden button:hover { background: #fff; }
.assist-focus .assist-focus-antwoorden button.weetniet, .assist-focus .assist-focus-antwoorden button.anders {
  background: transparent; font-weight: 500; }
.assist-focus-antwoorden input { flex: 1 1 220px; height: 42px; padding: 0 12px; font: 500 15px var(--font); color: var(--inkt);
  background: #fff; border: 1px solid rgba(30, 27, 22, .45); border-radius: 8px; }
.assist-focus-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px; }
.assist-focus-acties:empty { display: none; }
.assist-focus button { height: 38px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
  background: transparent; color: var(--inkt); border: 1px solid rgba(30, 27, 22, .28); }
.assist-focus button:hover { background: rgba(30, 27, 22, .07); border-color: rgba(30, 27, 22, .45); }
.assist-focus button.hoofd, .assist-focus-optie.eerste button { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.assist-focus button.hoofd:hover, .assist-focus-optie.eerste button:hover { background: #3A362F; }
.assist-focus button.terug { margin-left: auto; border-color: transparent; font-weight: 500; opacity: .7; }
.assist-focus button.terug:hover { opacity: 1; background: rgba(30, 27, 22, .07); }
.assist-focus.af { background: var(--vlak); color: var(--tekst); border: 1px solid var(--lijn); --inkt: var(--tekst); }
.assist-focus.nieuw .assist-focus-zin, .assist-focus.nieuw .assist-focus-hulp, .assist-focus.nieuw .assist-focus-doel {
  animation: assist-focus-in .22s ease-out both; }
@keyframes assist-focus-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .assist-focus.nieuw * { animation: none !important; } }

/* het dossier naast het draaiboek: gestapeld in plaats van in kolommen */
.assist-focusrij .assist-dossier-hoofd { grid-template-columns: minmax(0, 1fr) auto; }
.assist-focusrij .assist-dossier-wie { grid-column: 1; }
.assist-focusrij .status { grid-column: 2; grid-row: 1; }
.assist-focusrij .assist-dossier-systemen, .assist-focusrij .assist-dossier-gegevens { grid-column: 1 / -1; padding-top: 0; margin-top: 0; }
.assist-focusrij .assist-dossier-systemen { padding: 12px 0; border-top: 1px solid var(--lijn2); border-bottom: 1px solid var(--lijn2); }
.assist-focusrij .assist-dossier-systemen:empty, .assist-focusrij .assist-dossier-gegevens:empty { display: none; }
.assist-leeg { display: none !important; }

/* de doelen van het gesprek: wat af is (met het resultaat), wat nu, wat nog komt */
.assist-doelen { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
@media (max-width: 900px) { .assist-doelen { grid-template-columns: 1fr; } }
.assist-doelen li + li { border-left: 1px solid var(--lijn); }
@media (max-width: 900px) { .assist-doelen li + li { border-left: 0; border-top: 1px solid var(--lijn); } }
.assist-doelen button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 10px;
  width: 100%; height: 100%; padding: 12px 14px; cursor: default; color: var(--zacht); }
.assist-doelen .nr { grid-row: span 2; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid currentColor; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.assist-doelen .t { font-size: 13px; font-weight: 600; line-height: 1.3; }
.assist-doelen .s { font-size: 12px; line-height: 1.4; color: var(--stil); overflow-wrap: anywhere; }
.assist-doelen li.klaar button { color: var(--tekst); }
.assist-doelen li.klaar .nr { background: var(--tekst); color: var(--vlak); border-color: var(--tekst); }
.assist-doelen li.nu button { color: var(--tekst); }
.assist-doelen li.nu .nr { background: var(--geel); color: #1E1B16; border-color: var(--geel); }
.assist-doelen li.nu .s { color: var(--tekst); font-weight: 600; }
.assist-doelen li.kan button { cursor: pointer; }
.assist-doelen li.kan button:hover { color: var(--tekst); background: var(--vlak2); }
.assist-doelen li.kan button:hover .s { color: var(--tekst); }
/* genoeg informatie om het doel af te ronden: groen met een vinkje (werkbank 14-10) */
.assist-doelen li.genoeg { background: #E4F4EA; }
.assist-doelen li.genoeg .nr { background: #1F9D5B; color: #fff; border-color: #1F9D5B; }
.assist-doelen li.genoeg .s { color: #1C5A38; }
.assist-doelen li.genoeg.nu .s { color: #1C5A38; }
.assist-doelen li.beslissing .t::before { content: "? "; color: var(--stil); }
.assist-focus-zin kbd { font-size: .62em; vertical-align: .15em; }
.assist-doelen li.niet_nodig .t { text-decoration: line-through; text-decoration-color: var(--zacht); }
/* de weekplanning bij het inplannen (14-10) */
.assist-week { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px 18px; }
.assist-week-kop { flex-wrap: wrap; }
.assist-week-kop h2 { margin: 0; font-size: 15px; }
.assist-week-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.assist-week-nav span { min-width: 108px; text-align: center; }
.assist-week-nav button { width: 34px; height: 30px; padding: 0 0 2px; font-size: 22px; font-weight: 700; line-height: 1;
  background: transparent; color: var(--tekst); border: 1px solid var(--lijn); }
.assist-week-nav button:disabled { opacity: .3; }
.assist-week-rooster { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 8px;
  padding-bottom: 10px; overflow-x: auto; }
.assist-week-dag { border-left: 1px solid var(--lijn); min-width: 120px; }
.assist-week-dag.voorbij { opacity: .45; }
.assist-week-dagkop { height: 38px; padding: 4px 6px; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid var(--lijn); }
.assist-week-dagkop span { display: block; font-size: 10.5px; font-weight: 500; color: var(--stil); letter-spacing: .03em; }
.assist-week-dag.vandaag .assist-week-dagkop { color: var(--tekst); border-bottom: 2px solid var(--geel); }
.assist-week-kolom { position: relative; }
.assist-week-kolom i { position: absolute; left: 0; right: 0; border-top: 1px solid var(--lijn2); }
.assist-week-uren span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 10.5px; color: var(--stil);
  font-variant-numeric: tabular-nums; }
.assist-week-blok { position: absolute; overflow: hidden; border-radius: 4px; padding: 2px 4px; font-size: 10.5px; line-height: 1.25; }
.assist-week-blok span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assist-week-blok.bezet { background: var(--vlak2); color: var(--stil); border: 1px solid var(--lijn); }
.assist-week-blok.vastgehouden { background: repeating-linear-gradient(45deg, var(--vlak2) 0 4px, transparent 4px 8px);
  border: 1px solid var(--lijn); }
.assist-week-blok.optie { background: #FFF3BF; color: #1E1B16; border: 2px solid #E9B526; font-weight: 700; cursor: pointer; z-index: 2; }
.assist-week-blok.optie:hover, .assist-week-blok.optie:focus { background: var(--geel); outline: none; }
.assist-week-blok.optie.bezig { opacity: .6; }
.assist-week-blok.bevestigd { background: #1F9D5B; color: #fff; border: 2px solid #1F9D5B; font-weight: 700; z-index: 3; }
.assist-week-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--stil); }
.assist-week-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.assist-week-legende i.optie { background: #FFF3BF; border: 2px solid #E9B526; }
.assist-week-legende i.bevestigd { background: #1F9D5B; }
.assist-week-legende i.bezet { background: var(--vlak2); border: 1px solid var(--lijn); }
.assist-achtergrond { margin: 6px 0 -4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stil); }
.assist-taken { display: flex; flex-direction: column; }
.assist-taak { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--lijn2); cursor: pointer; font-size: 14px; }
.assist-taak:last-child { border-bottom: 0; }
.assist-taak input { margin-top: 3px; }
.assist-taak.klaar span { color: var(--stil); text-decoration: line-through; text-decoration-color: var(--zacht); }


/* ---------- Voorgrond v2 tijdens een oproep (uitvoeringsdossier 26-10-2026, fase 1: A1, A2, B2, E1) ----------
   Enkel actief met data-voorgrond="v2" op #scherm (instelling assist_voorgrond of config.ASSIST_VOORGROND). */
.assist-lade-knop { display: none; }
#scherm[data-voorgrond="v2"] .assist-achtergrond, #scherm[data-voorgrond="v2"] .assist-focus-acties { display: none; }
/* het dossier als kop boven het gele vak */
#scherm[data-voorgrond="v2"] .assist-focusrij { display: flex; flex-direction: column; gap: 10px; }
#scherm[data-voorgrond="v2"] .assist-focusrij .assist-dossier { order: -1; padding: 10px 16px; }
#scherm[data-voorgrond="v2"] .assist-focusrij .assist-dossier-hoofd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
#scherm[data-voorgrond="v2"] .assist-focusrij .assist-dossier-wie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
#scherm[data-voorgrond="v2"] .assist-focusrij .assist-dossier-wie h2 { font-size: 17px; margin: 0; }
#scherm[data-voorgrond="v2"] .assist-focusrij .assist-dossier-systemen { padding: 0; border: 0; }
#scherm[data-voorgrond="v2"] .assist-focusrij .status { margin-left: auto; }
#scherm[data-voorgrond="v2"][data-gesprek="tijdens"] .assist-dossier-gegevens,
#scherm[data-voorgrond="v2"][data-gesprek="tijdens"] .assist-dossier-historiek { display: none; }
/* "volgende klaar" (B2): klein, geen kleur, geen beweging */
.assist-focus-wacht { margin-left: 10px; font-size: 12px; font-weight: 600; opacity: .6; }
/* een nieuwe zin: 150 ms van onder, de linkerrand eenmaal 400 ms donkerder geel (B2) */
#scherm[data-voorgrond="v2"] .assist-focus.nieuw .assist-focus-doel,
#scherm[data-voorgrond="v2"] .assist-focus.nieuw .assist-focus-hulp { animation: none; }
#scherm[data-voorgrond="v2"] .assist-focus.nieuw .assist-focus-zin { animation: v2-zin .15s ease-out; }
#scherm[data-voorgrond="v2"] .assist-focus.nieuw { animation: v2-rand .4s ease-out; }
@keyframes v2-zin { from { transform: translateY(10px); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes v2-rand { from { box-shadow: inset 5px 0 0 #D9A400; } to { box-shadow: inset 5px 0 0 rgba(217, 164, 0, 0); } }
/* één rij antwoordknoppen met hun toets (A1, A2) */
#scherm[data-voorgrond="v2"] .assist-focus-antwoorden { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; }
.assist-antw-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.assist-focus .assist-antw-rij button { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; font-size: 15px;
  background: rgba(255, 255, 255, .55); }
.assist-focus .assist-antw-rij button:hover { background: #fff; }
.assist-focus .assist-antw-rij button.hoofd { background: var(--inkt); color: #fff; }
.assist-focus .assist-antw-rij button.gekozen { outline: 2px solid var(--inkt); outline-offset: 1px; }
.assist-focus .assist-antw-rij button.weetniet, .assist-focus .assist-antw-rij button.anders { background: transparent; font-weight: 500; }
.assist-antw-rij .toets { min-width: 1.4em; font-size: 11.5px; font-weight: 700; opacity: .55; text-align: center;
  border: 1px solid currentColor; border-radius: 4px; padding: 0 .3em; line-height: 1.5; }
.assist-antw-rij input { flex: 1 1 240px; height: 46px; padding: 0 12px; font: 500 15px var(--font); color: var(--inkt);
  background: #fff; border: 1px solid rgba(30, 27, 22, .45); border-radius: 8px; }
.assist-antw-rij input:focus { outline: 3px solid var(--inkt); outline-offset: 1px; }
.assist-antw-links { display: flex; justify-content: space-between; gap: 12px; }
.assist-focus .assist-antw-links button { height: auto; padding: 2px 0; border: 0; background: transparent; font-size: 13px;
  font-weight: 500; opacity: .7; text-decoration: underline; text-underline-offset: 3px; }
.assist-focus .assist-antw-links button:hover { opacity: 1; background: transparent; }
.assist-antw-links kbd, .assist-lade-knop kbd { font: 600 11px/1.4 var(--font); border: 1px solid currentColor; border-radius: 4px;
  padding: 0 .35em; margin-left: 6px; opacity: .7; text-decoration: none; display: inline-block; }
/* opgeschoond scherm met de lade "Meer" (E1) */
#scherm[data-voorgrond="v2"] .assist-lade-knop { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 10px 14px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; font-weight: 600; text-align: left; cursor: pointer; }
#scherm[data-voorgrond="v2"] .assist-lade-knop .stil { font-weight: 400; }
#scherm[data-voorgrond="v2"] .assist-lade-knop kbd { margin-left: auto; }
#scherm[data-voorgrond="v2"][data-gesprek="tijdens"][data-lade="dicht"] .assist { display: none; }
#scherm[data-voorgrond="v2"][data-gesprek="tijdens"] .assist [data-sectie="vragen"],
#scherm[data-voorgrond="v2"][data-gesprek="tijdens"] .assist [data-sectie="technieker"],
#scherm[data-voorgrond="v2"][data-gesprek="tijdens"] .assist [data-sectie="ticket"],
#scherm[data-voorgrond="v2"][data-gesprek="tijdens"] .assist [data-sectie="planning"],
#scherm[data-voorgrond="v2"][data-gesprek="tijdens"] .assist [data-sectie="algemeen"] { display: none !important; }
#scherm[data-voorgrond="v2"][data-gesprek="na"] .assist [data-sectie="vragen"],
#scherm[data-voorgrond="v2"][data-gesprek="na"] .assist [data-sectie="signalen"],
#scherm[data-voorgrond="v2"][data-gesprek="na"] .assist [data-sectie="diagnose"],
#scherm[data-voorgrond="v2"][data-gesprek="na"] .assist [data-sectie="stappen"] { display: none !important; }
#scherm[data-voorgrond="v2"][data-gesprek="na"][data-lade="dicht"] .assist [data-sectie="gesprek"],
#scherm[data-voorgrond="v2"][data-gesprek="na"][data-lade="dicht"] .assist [data-sectie="tijdlijn"] { display: none; }
#scherm[data-voorgrond="v2"][data-gesprek="na"] .assist-lade-knop .stil::after { content: ""; }

/* ---------- Voorgrond v2, fase 2 (B1, B3, C1, C2, D1-D4, E2) ---------- */
.assist-uitweg-knop, .assist-focus-veranderd, .assist-focus-waarom, .assist-focus-brug, .assist-geweten, .assist-diagnoseregel { display: none; }
#scherm[data-voorgrond="v2"] #focus-nr, #scherm[data-voorgrond="v2"] #focus-nog { display: none; }   /* C1: geen teller */
/* C2: de uitweg rechtsboven in het gele vak */
#scherm[data-voorgrond="v2"] .assist-uitweg-knop { display: inline-flex; align-items: center; margin-left: auto; height: 30px; padding: 0 10px;
  font-size: 13px; font-weight: 600; }
.assist-overbodig-knop { display: none; }
#scherm[data-voorgrond="v2"] .assist-overbodig-knop:not([hidden]) { display: inline-flex; align-items: center; margin-left: 8px; height: 30px;
  padding: 0 10px; font: 600 12.5px/1 var(--font); border: 1px solid currentColor; border-radius: 6px; background: transparent;
  color: inherit; opacity: .7; cursor: pointer; }
#scherm[data-voorgrond="v2"] .assist-overbodig-knop:disabled { opacity: .45; cursor: default; }
#scherm[data-voorgrond="v2"] .assist-overbodig-knop kbd { font: 600 11px/1.4 var(--font); border: 1px solid currentColor; border-radius: 4px; padding: 0 .35em; margin-left: 8px; opacity: .7; }
#scherm[data-voorgrond="v2"] .assist-uitweg-knop kbd { font: 600 11px/1.4 var(--font); border: 1px solid currentColor; border-radius: 4px; padding: 0 .35em; margin-left: 8px; opacity: .7; }
#scherm[data-voorgrond="v2"] .assist-focus-blader { margin-left: 8px; }
.assist-uitweg-probeer { margin: 2px 0 4px; font-size: 19px; font-weight: 600; }
/* B3: wat net veranderde, één regel klein en grijs boven de zin */
#scherm[data-voorgrond="v2"] .assist-focus-veranderd:not([hidden]) { display: block; margin: 0 0 8px; font-size: 13.5px; opacity: .62;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
#scherm[data-voorgrond="v2"] .assist-focus-veranderd.open { white-space: normal; }
#scherm[data-voorgrond="v2"] .assist-focus-veranderd.open::after { content: attr(title); display: block; margin-top: 4px; }
/* D1: waarom-regel onder de zin; hulp en bron enkel na een klik */
#scherm[data-voorgrond="v2"] .assist-focus-waarom:not([hidden]) { display: block; margin: 8px 0 0; font-size: 15px; opacity: .66;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; max-width: 70ch; }
#scherm[data-voorgrond="v2"] .assist-focus:not(.toon-hulp) .assist-focus-hulp,
#scherm[data-voorgrond="v2"] .assist-focus:not(.toon-hulp) .assist-focus-bron { display: none; }
/* B1: overbruggingszin onder de zin, kleiner en grijs. Denken en de vraag tonen zijn aparte stappen (William 27-10):
   de vraag van nu blijft altijd staan, ook terwijl Suppior nog zoekt. */
#scherm[data-voorgrond="v2"] .assist-focus-brug:not([hidden]) { display: block; margin: 6px 0 0; font-size: 16px; font-weight: 500; color: rgba(30, 27, 22, .58); }
.assist-focus-brug-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
/* D2: het gevolg op de antwoordknop */
.assist-antw-rij .gevolg { font-size: 12.5px; font-weight: 500; opacity: .6; }
.assist-antw-rij button.hoofd .gevolg { opacity: .8; }
/* D3: Al geweten, ingeklapt onder het gele vak */
#scherm[data-voorgrond="v2"] .assist-geweten:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 14px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; font-size: 13.5px; }
.assist-geweten .kop { font-weight: 600; margin-right: 2px; }
.assist-geweten .sep { opacity: .4; }
.assist-geweten button { border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; font: inherit; cursor: pointer; }
.assist-geweten button:hover { background: var(--vlak2); }
.assist-geweten .bron { opacity: .55; }
.assist-geweten-keuze { display: inline-flex; gap: 4px; margin-left: 2px; }
.assist-geweten-keuze button { border: 1px solid var(--lijn); background: #fff; font-size: 12.5px; }
.assist-geweten-keuze input { height: 26px; padding: 0 8px; font: inherit; border: 1px solid var(--lijn); border-radius: 6px; }
/* D4: de vermoedelijke oorzaak als dunne regel */
#scherm[data-voorgrond="v2"] .assist-diagnoseregel:not([hidden]) { display: block; padding: 6px 14px; border: 1px solid var(--lijn); border-radius: 10px;
  background: var(--vlak); font-size: 13.5px; transition: background-color .4s; }
.assist-diagnoseregel .kop { border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assist-diagnoseregel .grof { opacity: .62; }
.assist-diagnoseregel .meer { display: none; margin-top: 6px; opacity: .75; }
.assist-diagnoseregel.open .meer { display: block; }
.assist-diagnoseregel.flits { animation: v2-flits 2s ease-out; }
@keyframes v2-flits { from { background: #FFF1B8; } to { background: var(--vlak); } }
/* C1: het doel van nu vet met een gele onderlijn, later grijs */
#scherm[data-voorgrond="v2"] .assist-doelen li.nu .t { font-weight: 700; box-shadow: inset 0 -3px 0 var(--geel); }
#scherm[data-voorgrond="v2"] .assist-doelen li.later { opacity: .55; }

/* fase 3, A3: wat Suppior hoorde, met de balk van 3 s als automatisch bevestigen aanstaat */
.assist-gehoord { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.assist-gehoord b { font-weight: 700; }
.assist-gehoord .stil { opacity: .6; font-size: 13px; }

/* ---------- indeling 29-10 (William): het dossier bovenaan, het gele vak, de gemiste oproepen; rechts wat er in het
   klantendossier ontbreekt (invulvelden die Suppior uit het gesprek vult, de administratie bewaart) ---------- */
.assist-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.assist-hoofdkolom { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1080px) { .assist-raster { grid-template-columns: minmax(0, 1fr); } }

.assist-dossierbalk { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 18px; align-items: center;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 14px 20px; }
.assist-dossierbalk-wie { min-width: 0; }
.assist-dossierbalk-wie h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; }
.assist-dossierbalk-regel { margin-top: 3px; font-size: 13px; color: var(--stil); }
.assist-dossierbalk-regel .sep { margin: 0 7px; color: var(--zacht); }
.assist-dossierbalk-acties { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.assist-dossierbalk-acties button { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.assist-dossierbalk-acties input { height: 34px; width: 280px; }
.assist-dossierbalk-acties button.hoofd { background: var(--tekst); color: var(--vlak); border-color: var(--tekst); }
.assist-dossierbalk-meer { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--lijn2); font-size: 13px; }
.assist-dossierbalk[data-stand="schatting"], .assist-dossierbalk[data-stand="bevestigen"] { border-style: dashed; border-color: var(--geel-donker); }
.assist-dossierbalk[data-stand="schatting"] .assist-dossier-label,
.assist-dossierbalk[data-stand="bevestigen"] .assist-dossier-label { color: #B9520A; }
.assist-dossierbalk[data-stand="leeg"] h2 { color: var(--stil); }
.assist-dossier-treffers { list-style: none; margin: 0; padding: 0; }
.assist-dossier-treffers li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--lijn2); }
.assist-dossier-treffers li:last-child { border-bottom: 0; }
.assist-dossier-treffers button { height: 28px; padding: 0 10px; font-size: 12.5px; }
@media (max-width: 760px) { .assist-dossierbalk { grid-template-columns: minmax(0, 1fr) auto; }
  .assist-dossierbalk-acties { grid-column: 1 / -1; justify-content: flex-start; grid-row: 2; }
  .assist-dossierbalk-acties input { width: 100%; } }

.assist-gemist { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 18px; }
.assist-gemist .assist-kop { margin-bottom: 2px; }
.assist-gemist .assist-kop h2 { font-size: 14px; }
.assist-gemist ul { list-style: none; margin: 0; padding: 0; }
.assist-gemist li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--lijn2); font-size: 13.5px; }
.assist-gemist li:first-child { border-top: 0; }
.assist-gemist li.stil { display: block; padding: 2px 0 0; font-size: 13px; }
.assist-gemist .tijd { color: var(--stil); font-variant-numeric: tabular-nums; }
.assist-gemist .wie { min-width: 0; }
.assist-gemist .wie a { color: inherit; }
.assist-gemist .wat { display: block; overflow: hidden; color: var(--stil); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.assist-gemist .acties { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.assist-gemist .acties button { height: 30px; padding: 0 10px; font-size: 12.5px; }
@media (max-width: 760px) { .assist-gemist li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.assist-ontbreekt { position: sticky; top: 76px; max-height: calc(100vh - 160px); overflow-y: auto;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px 18px; }
@media (max-width: 1080px) { .assist-ontbreekt { position: static; max-height: none; } }
.assist-ontbreekt .assist-kop { margin-bottom: 2px; }
.assist-ontbreekt-uitleg { margin: 0 0 12px; font-size: 12.5px; }
#ontbreekt-velden { display: flex; flex-wrap: wrap; gap: 10px; }
.assist-veld { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; min-width: 0; font-size: 12.5px; }
.assist-veld.half { flex: 1 1 calc(50% - 5px); }
.assist-veld .naam { color: var(--stil); font-weight: 600; }
.assist-veld .naam .stil { font-weight: 400; color: var(--zacht); }
.assist-veld .bron { color: #7A4E00; font-size: 11.5px; text-align: right; white-space: nowrap; }
.assist-veld input, .assist-veld textarea { grid-column: 1 / -1; width: 100%; font-size: 14px; }
.assist-veld.ingevuld input, .assist-veld.ingevuld textarea { border-color: var(--geel-donker); }
.assist-ontbreekt-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.assist-ontbreekt-acties button { height: 38px; padding: 0 16px; }
.assist-ontbreekt-acties button.hoofd { background: var(--tekst); color: var(--vlak); border-color: var(--tekst); }
.assist-ontbreekt-af { margin: 4px 0 0; font-size: 13.5px; color: var(--groen); }
/* Functies per klant (/functies): klanten als rijen, functies als kolommen */
table.lijst.functietabel th { white-space: nowrap; }
table.lijst.functietabel td { vertical-align: middle; }
table.lijst.functietabel td.aan { box-shadow: inset 3px 0 0 var(--geel); }
.functiecel { display: flex; gap: 6px; align-items: center; }
.functiecel select { min-width: 96px; }
.functieuitleg { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.functieuitleg dt { font-weight: 600; }
.functieuitleg dd { margin: 0; color: var(--stil); }

/* Alle klanten (/overzicht) */
.kpis.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpis.kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
table.lijst.klantentabel th.getal, table.lijst.klantentabel td.getal { text-align: right; font-variant-numeric: tabular-nums; }
table.lijst.klantentabel td.geel { color: var(--geel); font-weight: 700; }
table.lijst.klantentabel tr.uitgeschakeld td { opacity: .55; }
table.lijst.klantentabel .aandacht { font-size: 12px; color: var(--geel); margin-top: 4px; }
table.lijst.klantentabel .aanlijst span { display: block; font-size: 12.5px; line-height: 1.5; }
table.lijst.klantentabel div.geel { color: var(--geel); }