/* Scope Compass — tabelUI (src/tabelUI.js): het slimme zoekveld met tokens, de snelle filters,
   de kolomkop met slepen en verbreden, en de lade met verborgen kolommen. Ontwerp "Processen
   Tabel 1d Kolommen" (besluit Dennis, 20 okt 2026). Tokens uit styles.css; eigen bestand omdat
   styles.css een hotspot is. De telefoonregels staan onderaan in één blok (<= 640px): geen
   slepen, geen sleeprand, invoer 16px, tokens en chips 44px hoog. */

/* ---------------------------------------------------------------- 1. het zoekveld */
/* De werkbalk van een pagina met dit veld: links groeit mee, zodat het veld de ruimte krijgt. */
.ov-toolbar .toolbar-l { flex: 1 1 auto; min-width: 0; }
.tui-zoek { flex: 1 1 320px; min-width: 240px; max-width: 760px; display: flex; position: relative; }
.tui-zoekveld { flex: 1; flex-wrap: wrap; gap: 6px; padding: 4px 11px; min-height: 38px; min-width: 0; cursor: text; }
.tui-zoekveld .tui-zoek-in { flex: 1 1 160px; min-width: 120px; width: auto; padding: 6px 0; }
.tui-token {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  border-radius: var(--r-sm); background: var(--pri-soft); color: var(--pri-text);
  font-size: 12.5px; font-weight: 500; padding: 3px 4px 3px 8px; white-space: nowrap;
}
.tui-token-l { color: var(--text-2); font-weight: 400; flex: none; }
.tui-token-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tui-token-x {
  border: none; background: none; color: inherit; cursor: pointer; display: inline-flex;
  padding: 2px; border-radius: 4px; font: inherit; line-height: 1;
}
.tui-token-x:hover { background: rgba(79, 70, 229, .14); }
.tui-token-x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.tui-token-x .ic { font-size: 12px; color: inherit; }
.tui-wis { flex: none; }
.tui-wis[hidden] { display: none; }

/* het suggestiemenu groeit uit het veld, links uitgelijnd en net zo breed */
.tui-sug-menu { left: 0; right: auto; width: 100%; max-width: 560px; min-width: 280px; transform-origin: top left; max-height: 60vh; overflow: auto; }
.tui-sug.is-actief, .tui-sug:hover { background: var(--sunken); }
.tui-sug .tui-sug-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tui-sug .tui-sug-n { font-size: 12px; color: var(--text-3); flex: none; }

/* ---------------------------------------------------------------- 2. snelle filters */
.tui-snel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px; }
.tui-snel-l { font-size: 12px; color: var(--text-3); margin-right: 2px; }
.tui-chip {
  display: inline-flex; align-items: center; border: 1px solid var(--border-2); background: var(--surface);
  color: var(--text-2); border-radius: var(--r-pill); font-size: 12.5px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tui-chip.is-aan { background: var(--pri-soft); color: var(--pri-text); border-color: transparent; }
.tui-chip-b { border: none; background: none; font: inherit; color: inherit; cursor: pointer; padding: 5px 4px 5px 11px; border-radius: var(--r-pill) 0 0 var(--r-pill); }
.tui-chip-x { border: none; background: none; color: inherit; cursor: pointer; display: inline-flex; align-items: center; padding: 5px 8px 5px 2px; opacity: .5; border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.tui-chip-x .ic { font-size: 12px; color: inherit; }
.tui-chip-x:hover { opacity: 1; }
.tui-chip-b:focus-visible, .tui-chip-x:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.tui-chip-nieuw {
  display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--border-3); background: transparent;
  border-radius: var(--r-pill); padding: 5px 11px; font: inherit; font-size: 12.5px; color: var(--pri-text); cursor: pointer;
}
.tui-chip-nieuw:hover { background: var(--sunken); }
.tui-chip-nieuw .ic { font-size: 12px; color: inherit; }
.tui-snel-leeg { font-size: 12px; color: var(--text-faint); }
.tui-snel-naam { display: inline-flex; align-items: center; gap: 6px; }
.tui-snel-in {
  border: 1px solid var(--pri); box-shadow: 0 0 0 3px var(--ring); border-radius: var(--r-pill);
  padding: 5px 11px; font: inherit; font-size: 13px; color: var(--text); outline: none; width: 200px; max-width: 100%;
}

/* ---------------------------------------------------------------- 3. de kolomkop */
.ov-kopknoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Beslissingen: zoekveld, snelle filters en het lijstpaneel boven elkaar in de linkerkolom van het
   raster; het paneel vult de hoogte naast het detail. */
.dec-listcol { display: flex; flex-direction: column; min-width: 0; }
.dec-listcol .dec-listpanel { flex: 1; }
/* Deliverables: het zoekveld en de snelle filters staan IN het paneel, dus met de paneelmarge. */
.dlv-layout .tui-snel { padding: 0 16px; }
/* Stories en epics: de tabel staat naast het epicpaneel, dus met de smallere celmarge van de oude
   tabel (6px). De keuzelijst Sorteren is er alleen op de telefoon, waar de kop weg is. */
.wb-ov-tabel.tui-tabel th, .wb-ov-tabel.tui-tabel td { padding-left: 6px; padding-right: 6px; }
.wb-ov-tabel.tui-tabel th:first-child, .wb-ov-tabel.tui-tabel td:first-child { padding-left: 12px; }
/* Een lange epicnaam ("Orderafhandeling en levering") wikkelt binnen zijn kolom in plaats van eruit te lopen. */
.wb-ov-tabel.tui-tabel .tag { max-width: 100%; overflow-wrap: break-word; }
/* Een sprintnaam breekt niet midden in ("Sprint" / "6"); een lange naam krijgt een weglatingsteken. */
.wb-ov-tabel.tui-tabel .wb-ov-sprint .tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.wb-ov-mobsort { display: none; }
/* Informatiebehoeften: de tabel staat in .content (niet breed). Iets minder celmarge, en onder 1280
   kiest de browser de breedtes, zoals vóór het tabelpatroon: anders schoof Compact op 768 en 1024
   zijwaarts. Een gesleepte breedte telt daar dus niet; vanaf 1280 wel. */
.dz-table.ib-tabel.tui-tabel th, .dz-table.ib-tabel.tui-tabel td { padding-left: 8px; padding-right: 8px; }
.dz-table.ib-tabel.tui-tabel th:first-child, .dz-table.ib-tabel.tui-tabel td:first-child { padding-left: 14px; }
@media (min-width: 641px) and (max-width: 1279px) {
  .dz-table.ib-tabel.tui-tabel { table-layout: auto; min-width: 0; }
  .ib-tabel.tui-tabel col { width: auto !important; }
  /* hier telt een gesleepte breedte niet, dus geen sleeprand (verplaatsen kan wel; de hint met
     Herstellen blijft daarom staan) */
  .ib-tabel .tui-th-rand { display: none; }
  .dz-table.ib-tabel.tui-tabel th, .dz-table.ib-tabel.tui-tabel td { padding-left: 6px; padding-right: 6px; }
  /* een lange samenstelling (Voorraadbetrouwbaarheid) breekt op een lettergreep met koppelteken
     als de browser Nederlands kan afbreken, en anders waar het moet: break-word telt niet mee in
     de minimale breedte en liet de tabel op 768 weer zijwaarts schuiven */
  .ib-tabel.tui-tabel td.ib-titel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
}
/* In de vaste kolomindeling mag een lange procesnaam wikkelen in plaats van afgekapt raken. */
.dec-table2.tui-tabel td.card-title { white-space: normal; }
/* De andere cellen blijven op één regel; wat niet past krijgt een weglatingsteken (het domein). */
.dec-table2.tui-tabel td { overflow: hidden; text-overflow: ellipsis; }
.tui-seg { display: inline-flex; align-items: center; gap: 2px; background: var(--sunken); border-radius: var(--r); padding: 2px; }
.tui-seg-b {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 32px;
  padding: 6px 9px; border: none; border-radius: var(--r-sm); background: transparent; font: inherit;
  font-size: 12.5px; font-weight: 500; color: var(--text-3); cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.tui-seg-b .ic { font-size: 18px; color: inherit; }
.tui-seg-b:hover { color: var(--text); }
.tui-seg-b.is-on { background: var(--surface); color: var(--pri-text); font-weight: 600; box-shadow: var(--sh); }
.tui-seg-b:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.tui-seg-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border-3); }
.tui-th-tip { display: inline-flex; vertical-align: middle; margin-left: 2px; }
.tui-th-tip .dz-tip { width: 16px; height: 16px; }
.tui-sug-menu .menu-head .dz-tip-wrap { margin-left: 4px; text-transform: none; }

/* De tabel volgt de bewaarde breedtes: vaste lay-out met een colgroup, en nooit smaller dan de som
   (dan scrolt het vak, niet de pagina). De telefoonlaag (dz-cards) maakt er kaarten van en laat
   de variabele links liggen. Iets minder zijmarge per cel dan de gewone tabel (12 in plaats van
   16px), zodat Compact met negen kolommen op 1440 past zonder zijwaarts te scrollen. */
.dz-table.tui-tabel { table-layout: fixed; min-width: var(--tui-minw, 920px); }
.dz-table.tui-tabel th, .dz-table.tui-tabel td { padding-left: 12px; padding-right: 12px; }
.dz-table.tui-tabel td { overflow: hidden; }
.dz-table.tui-tabel .cell-meter { min-width: 100px; }
/* Het kruisje staat rechts in de kop, los van de tekst: een lange kop ("Verantwoordelijke") schoof
   het anders onder de volgende kop. De kop knipt zelf af in plaats van over de buurkop te lopen. */
.tui-th { position: relative; overflow: hidden; }
/* ruimte voor het kruisje; een smalle kolom met vaste breedte (is-smal) heeft er geen */
.tui-koprij.is-lade .tui-th:not(.is-vast):not(.is-smal) { padding-right: 30px; }
.tui-th .sort-ic { opacity: .45; }
.tui-th.active .sort-ic { opacity: 1; }
.tui-th .th-in { max-width: 100%; }
.tui-th .th-in > span, .tui-th .th-in { overflow: hidden; text-overflow: ellipsis; }
.tui-koprij.is-lade th { background: var(--surface-2); }
.tui-th.is-sleepbaar { cursor: grab; }
.tui-th.is-sleept { opacity: .5; }
.tui-th.is-drop-links { box-shadow: inset 3px 0 0 var(--pri), inset 0 -1px 0 var(--border); }
.tui-th.is-drop-rechts { box-shadow: inset -3px 0 0 var(--pri), inset 0 -1px 0 var(--border); }
.tui-th-x {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; color: var(--text-2); display: inline-flex;
  padding: 3px; border-radius: var(--r-sm); font-size: 13px; opacity: .6;
}
.tui-th-x:hover { background: var(--surface); opacity: 1; }
.tui-th-x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); opacity: 1; }
.tui-th-x .ic { font-size: 13px; color: inherit; }
.tui-th-rand {
  position: absolute; right: 0; top: 4px; bottom: 4px; width: 5px; cursor: col-resize; z-index: 2;
  border-radius: 2px; background: transparent; touch-action: none;
}
.tui-th-rand:hover, .tui-th-rand.is-actief { background: var(--border-3); }
.tui-th-rand.is-actief { background: var(--pri); }

/* ---------------------------------------------------------------- 4. de lade */
.tui-lade {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.tui-lade-in { animation: tui-lade-in .22s ease-out; }
@keyframes tui-lade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tui-lade-l { font-size: 12px; color: var(--text-3); margin-right: 2px; }
.tui-chip-kol {
  display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--border-3); background: var(--surface);
  border-radius: var(--r-sm); padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 500; color: var(--text-2); cursor: grab;
}
.tui-chip-kol:hover { background: var(--sunken); color: var(--text); }
.tui-chip-kol:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.tui-chip-kol .ic { font-size: 12px; color: inherit; }
.tui-lade-leeg { font-size: 12px; color: var(--text-faint); }
.tui-lade-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.tui-lade-mob, .tui-schakel { display: none; }

/* ---------------------------------------------------------------- 5. telefoon (<= 640px) */
@media (max-width: 640px) {
  /* het veld krijgt de hele eerste regel (tokens hebben de breedte nodig); Sorteren en Filters
     wissen staan eronder */
  .ov-toolbar .toolbar-l { flex-wrap: wrap; }
  .tui-zoek { flex: 1 1 100%; min-width: 0; max-width: none; }
  .tui-token { max-width: 100%; }
  .tui-zoekveld { min-height: 44px; padding: 4px 10px; }
  .tui-zoekveld .tui-zoek-in { font-size: 16px; min-height: 36px; min-width: 100px; }
  .tui-token { min-height: 44px; font-size: 14px; padding: 2px 4px 2px 10px; }
  .tui-token-x { min-width: 36px; min-height: 36px; justify-content: center; align-items: center; }
  .tui-sug-menu { max-width: none; min-width: 0; }
  .tui-sug { min-height: 44px; }
  /* de snelle filters: één rij die zijwaarts scrolt, met een zichtbare afsnede rechts */
  .tui-snel { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent 100%); }
  .tui-snel::-webkit-scrollbar { display: none; }
  .tui-snel-l { white-space: nowrap; }
  .tui-chip, .tui-chip-nieuw { min-height: 44px; flex: none; font-size: 14px; }
  .tui-chip-x { min-width: 36px; justify-content: center; }
  .tui-snel-naam { flex: none; }
  .tui-snel-in { min-height: 44px; font-size: 16px; width: 180px; }
  /* Filters wissen blijft zichtbaar naast het veld (styles.css verbergt knoppen in .toolbar-l) */
  .toolbar .toolbar-l .tui-wis:not([hidden]) { display: inline-flex; flex: none; min-height: 44px; }
  /* in de kaartweergave van de telefoonlaag geldt de minimale tabelbreedte niet (styles.css
     zet hem alleen uit voor .wide-tabellen; Beslissingen is er geen) */
  .dz-table.tui-tabel.dz-cards { min-width: 0; }
  /* geen slepen en geen sleeprand op touch: de lade is een lijst schakelaars */
  .tui-th-rand, .tui-th-x, .tui-lade-hint, .tui-chip-kol, .tui-lade-leeg { display: none; }
  .tui-seg-b, .tui-kolknop { min-height: 44px; }
  .tui-lade { padding: 10px 14px; }
  .tui-lade-mob { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .tui-lade-mob .tui-lade-l { padding: 4px 0 8px; }
  .tui-schakel { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; color: var(--text); cursor: pointer; }
  .tui-schakel input { width: 20px; height: 20px; margin: 0; accent-color: var(--pri); }
  .tui-lade-voet { padding-top: 8px; }
  .tui-lade-voet .btn { min-height: 44px; }
  .wb-ov-mobsort { display: flex; align-items: center; gap: 6px; }
  .wb-ov-mobsort .filter-select { min-height: 44px; font-size: 16px; }
  .wb-ov-mobsort .btn { min-width: 44px; min-height: 44px; justify-content: center; }
  /* Op de kaart is Compact gelijk aan Alle kolommen (het proces staat al onder de titel): de
     presetknoppen doen daar niets, alleen het tandwiel blijft. */
  .wb-ov-kop .tui-presetknop, .wb-ov-kop .tui-seg-sep { display: none; }
  /* Doelen van minstens 44 bij 44 (rules.md, WCAG 2.5.8), ook voor het kruisje van een snel filter. */
  .tui-seg-b { min-width: 44px; }
  .tui-chip-b, .tui-chip-x { min-height: 44px; }
  .tui-chip-x { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tui-lade-in { animation: none; }
  .tui-chip, .tui-th { transition: none; }
}