/* Meldo, 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); }
.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; }

/* 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-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; }
.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 Meldo 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; }