/* tickets-beheer.css — het beheerscherm voor supporttickets.
 *
 * WAAROM EEN EIGEN BESTAND
 * static/index.html is 529 KB en wordt door vier partijen tegelijk bewerkt.
 * Een scherm van 500 regels daar middenin zetten is vragen om een botsing.
 * Dit bestand hoort bij één scherm, en het scherm hoort bij één menu-item.
 *
 * De kleuren komen uit de tokens van de app (phrona-tokens.css / phrona-dark.css),
 * zodat dit scherm in donkere modus automatisch meegaat. Geen eigen hexwaarden
 * voor vlakken: alleen voor de statuskleuren, en die hebben een lichte én een
 * donkere variant.
 */

/* ---------- kleur van gedempte tekst in dit scherm ----------
   Gemeten in LICHT: --muted (#6b7280) geeft 4,32:1 op --surface en 4,05:1 op
   --surface-2. WCAG AA vraagt 4,5:1 voor tekst onder 18,66px. Deze paar
   tinten donkerder maken haalt de norm zonder het uiterlijk te veranderen.
   Niet globaal aanpassen: dat raakt elk scherm van de app. */
#tickets-view { --tk-muted: #5f6672; }
html[data-mode="dark"] #tickets-view { --tk-muted: #9aa2b1; }
@media (prefers-color-scheme: dark) {
  html[data-mode="system"] #tickets-view { --tk-muted: #9aa2b1; }
}

/* ---------- kop en tellers ---------- */
.tkb-kop { display:flex; gap:14px; flex-wrap:wrap; align-items:stretch; margin-bottom:16px; }
.tkb-teller {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 16px; min-width:118px; flex:1 1 118px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:2px;
}
.tkb-teller .n { font-size:22px; font-weight:650; line-height:1.15; font-variant-numeric:tabular-nums; }
.tkb-teller .l { font-size:11.5px; color:var(--tk-muted); text-transform:uppercase; letter-spacing:.04em; }
.tkb-teller.alert { border-color:var(--err); background:var(--err-soft); }
.tkb-teller.alert .n { color:var(--err); }
.tkb-teller.alert .l { color:var(--err); opacity:.9; }
.tkb-teller.warn { border-color:var(--warn); background:var(--warn-soft); }
.tkb-teller.warn .n { color:var(--warn); }
.tkb-teller.warn .l { color:var(--warn); opacity:.9; }

/* ---------- filterbalk ---------- */
.tkb-filters {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:14px; display:flex; flex-direction:column; gap:10px;
}
.tkb-frow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tkb-frow > input[type=search] { flex:1 1 240px; min-width:180px; }
.tkb-filters input, .tkb-filters select {
  font-family:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--txt); min-height:40px;
}
/* De app zet `select { width:100% }` globaal. In deze balk betekent dat: elk
 * filter op een eigen regel, 224 px hoog, en de zoekbalk duwt de rest weg.
 * Hier is een select een label van 12 tekens, geen invulveld van de pagina. */
.tkb-filters select { width:auto; flex:0 1 auto; max-width:260px; margin-bottom:0; }
.tkb-filters input[type=search] { margin-bottom:0; }
/* Knoppen in dit scherm zijn klein van opzet (`.small` = 24 px), maar 24 px is
 * onder de grens van wat je met een muis of duim betrouwbaar raakt. 32 px is
 * de maat die de rest van de app op desktop aanhoudt. */
#tickets-view button { min-height:32px; }
.tkb-filters input[type=search] { padding-left:11px; }
.tkb-chip {
  border:1px solid var(--line); background:var(--surface); color:var(--tk-muted);
  border-radius:20px; padding:6px 11px; font-size:12.5px; cursor:pointer; min-height:34px;
  font-family:inherit; line-height:1;
}
.tkb-chip:hover { border-color:var(--line-strong); color:var(--txt); }
.tkb-chip.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-hover); font-weight:600; }
.tkb-chip .c { font-variant-numeric:tabular-nums; opacity:.72; margin-left:4px; }

/* ---------- werkblad: lijst + detail ---------- */
.tkb-werk { display:flex; gap:14px; align-items:flex-start; }
.tkb-lijstvak { flex:1 1 520px; min-width:0; }
.tkb-detailvak { flex:0 0 480px; max-width:480px; min-width:340px; position:sticky; top:70px; }
.tkb-detailvak.leeg { display:none; }
@media (max-width:1180px){
  .tkb-werk { flex-direction:column; }
  .tkb-detailvak { flex:1 1 auto; width:100%; max-width:none; min-width:0; position:static; }
}

/* ---------- tabel ---------- */
.tkb-tabel { width:100%; border-collapse:collapse; font-size:13px; }
.tkb-tabel thead th {
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--tk-muted); font-weight:600; padding:8px 9px; border-bottom:1px solid var(--line);
  white-space:nowrap; position:sticky; top:0; background:var(--surface); z-index:1;
}
.tkb-tabel tbody td { padding:9px 9px; border-bottom:1px solid var(--line); vertical-align:top; }
.tkb-tabel tbody tr { cursor:pointer; }
.tkb-tabel tbody tr:hover { background:var(--surface-2); }
.tkb-tabel tbody tr.sel { background:var(--accent-soft); }
.tkb-tabel tbody tr.actief { box-shadow:inset 3px 0 0 var(--accent); }
.tkb-tabel .td-num { font-variant-numeric:tabular-nums; color:var(--tk-muted); font-size:12px; white-space:nowrap; }
.tkb-tabel .td-ond { font-weight:600; line-height:1.35; }
.tkb-tabel .td-sub { color:var(--tk-muted); font-size:11.5px; margin-top:2px; }
.tkb-tabel .td-klant { font-size:12px; color:var(--tk-muted); max-width:150px; }
.tkb-tabel .td-tijd { white-space:nowrap; font-size:11.5px; color:var(--tk-muted); font-variant-numeric:tabular-nums; }
.tkb-tabel input[type=checkbox] { width:16px; height:16px; min-width:0; }
.tkb-scroll { max-height:calc(100vh - 330px); overflow:auto; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); }

/* ---------- badges ---------- */
.tkb-badge { display:inline-block; padding:1px 7px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.tkb-s-open { background:#e8f0fe; color:#1a56c4; }
.tkb-s-in_behandeling { background:#fff3d4; color:#8a5a00; }
.tkb-s-wacht_op_klant { background:#f0e8fe; color:#6435c9; }
.tkb-s-opgelost { background:#e2f5e9; color:#1a7a3e; }
.tkb-s-gesloten { background:#eceff3; color:#5b6472; }
html[data-mode="dark"] .tkb-s-open { background:#1b2b46; color:#9dc0f7; }
html[data-mode="dark"] .tkb-s-in_behandeling { background:#3a3222; color:#e8c377; }
html[data-mode="dark"] .tkb-s-wacht_op_klant { background:#2c2440; color:#c3aaf5; }
html[data-mode="dark"] .tkb-s-opgelost { background:#1d3327; color:#8fd3ab; }
html[data-mode="dark"] .tkb-s-gesloten { background:#2a2f38; color:#a9b2bf; }
.tkb-prio { display:inline-block; font-size:11px; font-weight:600; padding:1px 6px; border-radius:5px; }
.tkb-prio-urgent { background:#fde3e0; color:#a5261a; }
.tkb-prio-hoog { background:#fdeee0; color:#9a5a12; }
.tkb-prio-normaal { color:var(--tk-muted); }
.tkb-prio-laag { color:var(--tk-muted); opacity:.75; }
html[data-mode="dark"] .tkb-prio-urgent { background:#3e211d; color:#f3a79c; }
html[data-mode="dark"] .tkb-prio-hoog { background:#3a3020; color:#e5bc7a; }

.tkb-te-laat { color:#a5261a; font-weight:600; font-size:11.5px; }
.tkb-op-tijd { color:var(--tk-muted); font-size:11.5px; }
.tkb-tag {
  display:inline-block; background:var(--surface-2); border:1px solid var(--line);
  color:var(--tk-muted); border-radius:5px; padding:0 5px; font-size:10.5px; margin-right:4px;
}
.tkb-toegewezen { font-size:11.5px; }
.tkb-toegewezen.leeg { color:#8a5a00; font-style:italic; }

/* ---------- knoppen in dit scherm ---------- */
/* Verwijderen is een `secondary`-knop met een rood label. De inline
 * `color:#a5261a` die hier stond, was 2,4:1 op de donkere knop -- onleesbaar.
 * `var(--err)` is per palet ingesteld en haalt in licht EN donker de norm. */
.tkb-verwijder { color:var(--err); }
.tkb-verwijder:hover { background:var(--err-soft); border-color:var(--err); }

/* De verstuurknop is de belangrijkste knop van dit scherm en de app zet er
 * `color:#fff` op met `background:var(--accent)`. In donker is dat 2,7:1:
 * wit op oranje. `--txt-inverse` is per palet de kleur die WEL contrasteert
 * (in donker bijna zwart, in licht wit). */
#tkb-send-btn { color:var(--txt-inverse); font-weight:600; }
#tkb-send-btn:disabled { color:var(--txt-inverse); }

/* ---------- grendel (collision avoidance) ---------- */
/* Een lock is een afspraak tussen beheerders. De strook moet opvallen als hij
 * een ANDER is (want dan kun je niet antwoorden) en rustig zijn als hij van
 * jou is (want dan is er niets aan de hand). */
.tkb-grendel {
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; padding:7px 14px; font-size:12px; line-height:1.4;
  border-bottom:1px solid var(--line);
}
/* De tekst mag krimpen, de knop niet: anders duwt de knop de mededeling weg
 * of valt hij naar de volgende regel (gemeten: 76px hoog, drie regels). */
.tkb-grendel > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tkb-grendel-sub { color:inherit; opacity:.82; }
@media (max-width:640px){
  .tkb-grendel { flex-wrap:wrap; }
  .tkb-grendel > span { overflow:visible; white-space:normal; }
}
.tkb-grendel.van-mij { background:var(--surface-2); color:var(--tk-muted); }
.tkb-grendel.van-ander { background:#fff8e6; border-bottom-color:#e0c860; color:#7a5200; }
html[data-mode="dark"] .tkb-grendel.van-ander { background:#3a3222; border-bottom-color:#6d5c34; color:#e8c377; }
.tkb-grendel button { flex:0 0 auto; }

/* De grendel in de lijst: een klein hangslot-achtig merkteken, geen kolom. */
.tkb-lock { font-size:10.5px; color:#8a5a00; white-space:nowrap; }
html[data-mode="dark"] .tkb-lock { color:#e8c377; }
.tkb-lock.mij { color:var(--accent-hover); }

/* ---------- detail ---------- */
.tkb-kaart { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); display:flex; flex-direction:column; max-height:calc(100vh - 120px); }
.tkb-dhead { padding:14px 16px 10px; border-bottom:1px solid var(--line); }
.tkb-dhead .rij1 { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.tkb-dhead .nr { font-size:11.5px; color:var(--tk-muted); font-variant-numeric:tabular-nums; }
.tkb-dhead h3 { margin:2px 0 6px; font-size:15px; line-height:1.35; word-break:break-word; }
.tkb-dhead .klant { font-size:12px; color:var(--tk-muted); }
.tkb-velden { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.tkb-velden label { display:flex; flex-direction:column; gap:3px; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--tk-muted); font-weight:600; }
.tkb-velden select, .tkb-velden input {
  font-family:inherit; font-size:12.5px; padding:7px 8px; border:1px solid var(--line);
  border-radius:7px; background:var(--bg); color:var(--txt); min-height:38px; width:100%;
}
.tkb-velden .vol { grid-column:1 / -1; }

/* DE VERDELING VAN DE HOOGTE, en waarom dit zo staat.
 *
 * De kaart is een flex-kolom met vier blokken: kop, grendel, thread, antwoord.
 * Zonder flex-shrink-regels krimpen ze ALLEMAAL als de kaart begrensd wordt.
 * Gemeten op een telefoon: kop 552 px, grendel 84, thread 24 (!), antwoord 297
 * -- samen 849 in een kaart van 748. De thread werd dus tot een strook van 24 px
 * geplet en de antwoordbalk stak 95 px onder de kaart uit. Het antwoordveld was
 * onbereikbaar precies omdat er te veel probeerde te passen.
 *
 * De regel: alleen de THREAD mag krimpen en scrollen. Kop, grendel en
 * antwoordbalk houden hun hoogte -- dat zijn de drie dingen die je altijd wilt
 * zien. */
.tkb-dhead, .tkb-grendel, .tkb-dfoot { flex:0 0 auto; }
.tkb-dbody { overflow:auto; padding:12px 16px; flex:1 1 auto; min-height:0; }
.tkb-thread { display:flex; flex-direction:column; gap:10px; }
.tkb-msg { border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.tkb-msg.klant { background:var(--surface-2); }
.tkb-msg.beheer { background:var(--accent-soft); border-color:var(--accent); }
.tkb-msg.intern { background:var(--warn-soft); border-color:var(--warn);
  border-style:dashed; color:var(--warn); }
.tkb-msg.intern .tkb-msg-body { color:var(--txt); }
.tkb-msg.intern .tkb-msg-head { color:var(--warn); opacity:.95; }
.tkb-msg-head { display:flex; justify-content:space-between; gap:8px; font-size:11px;
  color:var(--tk-muted); margin-bottom:4px; }
.tkb-msg-head .rol { text-transform:uppercase; letter-spacing:.04em; font-weight:700;
  background:var(--surface-3); color:var(--txt); border-radius:4px; padding:0 5px; }
.tkb-msg-body { font-size:13px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }

.tkb-events { margin-top:14px; border-top:1px dashed var(--line); padding-top:10px; }
.tkb-events h4 { margin:0 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--tk-muted); }
.tkb-ev { font-size:11.5px; color:var(--tk-muted); padding:2px 0; display:flex; gap:6px; flex-wrap:wrap; }
.tkb-ev .wan { font-variant-numeric:tabular-nums; opacity:.8; }

.tkb-dfoot { border-top:1px solid var(--line); padding:10px 16px 12px; background:var(--surface); }
.tkb-dfoot textarea {
  width:100%; font-family:inherit; font-size:13px; padding:9px 11px; border:1px solid var(--line);
  border-radius:9px; background:var(--bg); color:var(--txt); min-height:84px; resize:vertical;
}
.tkb-dfoot .rij { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.tkb-dfoot .rij .groei { flex:1 1 auto; }
/* De macroselect heeft een eigen maat nodig: de globale `select`-regel maakt
 * hem 40 px, maar de inline stijl in de JS zet 32 px. Op een telefoon is dat
 * onder de duimgrens. */
.tkb-dfoot select { width:auto; max-width:220px; margin-bottom:0; min-height:36px; }
.tkb-intern-lbl { display:flex; gap:7px; align-items:center; font-size:12px;
  cursor:pointer; background:var(--warn-soft); color:var(--warn);
  border:1px dashed var(--warn); border-radius:8px; padding:6px 9px; font-weight:500; }
.tkb-intern-lbl:hover { filter:brightness(1.06); }
.tkb-intern-lbl input { accent-color:var(--warn); }
.tkb-intern-lbl input { width:15px; height:15px; min-width:0; }
.tkb-hint { font-size:11.5px; color:var(--tk-muted); }
/* Een hint binnen de interne-notitiebox erft de waarschuwingskleur:
 * grijs op geel is 2,5:1 en dus onleesbaar. */
.tkb-intern-lbl .tkb-hint { color:inherit; opacity:.85; }

/* ---------- bulkbalk ---------- */
.tkb-bulk {
  position:sticky; bottom:0; z-index:5; display:none; gap:8px; align-items:center; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--accent); border-radius:10px;
  padding:9px 12px; margin-top:10px; box-shadow:0 -2px 12px rgba(16,24,40,.08);
}
.tkb-bulk.on { display:flex; }
.tkb-bulk select, .tkb-bulk input {
  font-family:inherit; font-size:12.5px; padding:6px 8px; border:1px solid var(--line);
  border-radius:7px; background:var(--bg); color:var(--txt); min-height:36px;
}

/* ---------- leeg / laden ---------- */
.tkb-leeg { padding:26px 18px; text-align:center; color:var(--tk-muted); font-size:13px; }

@media (max-width:720px){
  .tkb-velden { grid-template-columns:1fr; }
  .tkb-tabel .hide-sm { display:none; }
  .tkb-scroll { max-height:none; }
  .tkb-filters input, .tkb-filters select { min-height:44px; }
  .tkb-filters select { width:100%; max-width:none; flex:1 1 100%; }
  .tkb-chip { min-height:40px; }
  #tickets-view button { min-height:44px; }
  .tkb-dfoot select { min-height:44px; }
  /* Op een telefoon is de grendel een blok boven de thread, niet een regel
   * ernaast: de knop moet volle breedte hebben of hij verdwijnt. */
  .tkb-grendel { flex-direction:column; align-items:stretch; gap:8px; }
  .tkb-grendel button { width:100%; }
  /* Op een telefoon is de detailkaart een eigen scherm, geen zijkolom.
   *
   * Eerst stond hier `max-height:none`, met de gedachte "laat hem zo lang zijn
   * als hij is". Gevolg: een thread van 1019 px op een scherm van 844 px, en
   * de antwoordbalk -- met de enige knop die de beheerder nodig heeft -- lag
   * 213 px onder de vouw. Wie wil antwoorden moet dan eerst door de hele
   * thread scrollen. Nu houdt de kaart zich aan het scherm en scrollt de
   * THREAD, zodat de antwoordbalk altijd blijft staan. */
  /* De 100vh hieronder is niet de ruimte die je hébt: de topbalk van de app
   * staat er nog boven (gemeten 78 px op een telefoon). Met calc(100vh - 84px)
   * kwam de antwoordbalk alsnog 95 px onder de vouw -- de kaart paste, maar
   * het scherm eromheen niet. `100dvh` rekent met de zichtbare hoogte.
   * De marge van 78 px is de topbalk; die moet er dus vanaf. */
  .tkb-kaart { max-height:calc(100dvh - 96px); }
  .tkb-dbody { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  /* En de sluitknop wordt een echte knop, geen 16 px kruisje: dit is de
   * enige weg terug naar de lijst. */
  #tkb-sluit-btn { min-width:44px; font-size:16px; }
}

/* ── "Systeem": de browser beslist ────────────────────────────────────────
   De standaardstand van de app is data-mode="system", niet "dark". De regels
   hierboven gelden dus niet voor de meeste bezoekers. Deze media-query zet
   dezelfde kleuren als de browser donker is; zonder dit blok staat er een
   licht badge op een donker vlak (gemeten 1,16:1 -- onleesbaar).
   Bewust dezelfde waarden als html[data-mode="dark"], zodat er één donker
   uiterlijk is en niet twee die uit elkaar lopen. */
@media (prefers-color-scheme: dark) {
  html[data-mode="system"] .tkb-s-open { background:#1b2b46; color:#9dc0f7; }
  html[data-mode="system"] .tkb-s-in_behandeling { background:#3a3222; color:#e8c377; }
  html[data-mode="system"] .tkb-s-wacht_op_klant { background:#2c2440; color:#c3aaf5; }
  html[data-mode="system"] .tkb-s-opgelost { background:#1d3327; color:#8fd3ab; }
  html[data-mode="system"] .tkb-s-gesloten { background:#2a2f38; color:#a9b2bf; }
  html[data-mode="system"] .tkb-prio-urgent { background:#3e211d; color:#f3a79c; }
  html[data-mode="system"] .tkb-prio-hoog { background:#3a3020; color:#e5bc7a; }
  html[data-mode="system"] .tkb-grendel.van-ander { background:#3a3222; border-bottom-color:#6d5c34; color:#e8c377; }
  html[data-mode="system"] .tkb-lock { color:#e8c377; }
}

/* ==========================================================================
   KLANTKANT (Help → Mijn tickets)
   ==========================================================================
   Deze regels staan hier en niet in index.html: dat bestand is 529 KB en wordt
   door vier partijen tegelijk bewerkt. De klantkant hoort bij hetzelfde
   onderwerp als de beheerkant, dus bij hetzelfde bestand.

   Wat hier gerepareerd wordt is GEMETEN, niet geraden: --muted geeft 4,05:1 op
   --surface-2 (net onder AA), en de rolbadge zette `rgba(0,0,0,.06)` onder
   --muted -- op een donker vlak valt dat helemaal weg. Beide hadden geen
   donkere variant, want de app gebruikt html[data-mode], geen .dark-class.
   -------------------------------------------------------------------------- */
#help-tickets-pane { --tk-muted: #5f6672; }
html[data-mode="dark"] #help-tickets-pane { --tk-muted: #9aa2b1; }
@media (prefers-color-scheme: dark) {
  html[data-mode="system"] #help-tickets-pane { --tk-muted: #9aa2b1; }
}

#help-tickets-pane #tk-list .tk-num,
#help-tickets-pane #tk-list .tk-meta,
#help-tickets-pane #tk-detail .tk-meta { color:var(--tk-muted); }

/* De rolbadge: eigen tekstkleur en een achtergrond uit de tokens. */
#help-tickets-pane .tk-msg-head .tk-rol {
  background:var(--surface-3); color:var(--txt);
}

/* De statusbadges van de klantkant hadden dezelfde lichte kleuren als die van
 * de beheerkant en dus dezelfde fout in donker. */
#help-tickets-pane .tk-badge.open { background:#e8f0fe; color:#1a56c4; }
#help-tickets-pane .tk-badge.in_behandeling { background:#fff3d4; color:#8a5a00; }
#help-tickets-pane .tk-badge.wacht_op_klant { background:#f0e8fe; color:#6435c9; }
#help-tickets-pane .tk-badge.opgelost { background:#e2f5e9; color:#1a7a3e; }
#help-tickets-pane .tk-badge.gesloten { background:#eceff3; color:#5b6472; }
#help-tickets-pane .tk-badge.prio-urgent { background:#fde3e0; color:#a5261a; }

html[data-mode="dark"] #help-tickets-pane .tk-badge.open { background:#1b2b46; color:#9dc0f7; }
html[data-mode="dark"] #help-tickets-pane .tk-badge.in_behandeling { background:#3a3222; color:#e8c377; }
html[data-mode="dark"] #help-tickets-pane .tk-badge.wacht_op_klant { background:#2c2440; color:#c3aaf5; }
html[data-mode="dark"] #help-tickets-pane .tk-badge.opgelost { background:#1d3327; color:#8fd3ab; }
html[data-mode="dark"] #help-tickets-pane .tk-badge.gesloten { background:#2a2f38; color:#a9b2bf; }
html[data-mode="dark"] #help-tickets-pane .tk-badge.prio-urgent { background:#3e211d; color:#f3a79c; }

@media (prefers-color-scheme: dark) {
  html[data-mode="system"] #help-tickets-pane .tk-badge.open { background:#1b2b46; color:#9dc0f7; }
  html[data-mode="system"] #help-tickets-pane .tk-badge.in_behandeling { background:#3a3222; color:#e8c377; }
  html[data-mode="system"] #help-tickets-pane .tk-badge.wacht_op_klant { background:#2c2440; color:#c3aaf5; }
  html[data-mode="system"] #help-tickets-pane .tk-badge.opgelost { background:#1d3327; color:#8fd3ab; }
  html[data-mode="system"] #help-tickets-pane .tk-badge.gesloten { background:#2a2f38; color:#a9b2bf; }
  html[data-mode="system"] #help-tickets-pane .tk-badge.prio-urgent { background:#3e211d; color:#f3a79c; }
}

/* De knop "Toevoegen" op de klantkant is wit-op-oranje, net als Versturen op de
 * beheerkant: 2,7:1 in donker. */
#help-tickets-pane .btn-primary { color:var(--txt-inverse); font-weight:600; }

/* ==========================================================================
   DE HOOGTE IS EEN OPTELSOM -- en die klopte niet
   ==========================================================================
   Gemeten op 390px: kaart 748 px met kop 552 + grendel 84 + antwoord 297.
   Samen 933 in 748, dus de thread werd tot 24 px geplet. De oorzaak zat niet
   in de kaart maar in de onderdelen:

   - elk veld in de kop was 67 px: de globale regel `input, select {
     margin-bottom:10px }` telt op bij label, invoerveld en tussenruimte. Vijf
     velden onder elkaar = 436 px aan formulier in een paneel waar je vooral
     wilt LEZEN.
   - de antwoordbalk was 297 px omdat de knoppen op een telefoon over drie
     regels vielen.

   Hieronder staan de maten daher opnieuw, voor dit paneel alleen. De globale
   regels blijven ongemoeid: die zijn voor formulieren op een pagina, niet voor
   een werkpaneel waar de inhoud voorrang hoort te hebben.
   -------------------------------------------------------------------------- */
.tkb-velden { gap:8px 8px; }
.tkb-velden label { margin-bottom:0; gap:2px; font-size:10px; }
.tkb-velden select, .tkb-velden input {
  margin-bottom:0; min-height:34px; padding:5px 7px; font-size:12.5px;
}

.tkb-dfoot { display:flex; flex-direction:column; gap:7px; }
.tkb-dfoot textarea { margin-bottom:0; min-height:56px; resize:vertical; }
.tkb-dfoot .rij { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.tkb-dfoot button { min-height:34px; }

@media (max-width:720px){
  /* Twee kolommen in plaats van één: status+prioriteit en categorie+toegewezen
   * horen bij elkaar en zijn kort genoeg om naast elkaar te staan. Dat scheelt
   * op een telefoon drie volle regels. */
  .tkb-velden { grid-template-columns:1fr 1fr; }
  .tkb-dfoot .rij { gap:6px; }
  .tkb-dfoot textarea { min-height:48px; }
  /* Op een telefoon is "Verwijderen" geen knop die je per ongeluk wilt raken
   * naast "Versturen": hij gaat naar een eigen regel onderaan. */
  .tkb-dfoot .rij .tkb-verwijder { order:3; width:100%; }
}