/* Load.Live 1.4.6 — views: de lijstcomponent (views, filter, sorteer, groepeer, kolommen; lijst · kaarten · kalender · kanban).
 * Twee balken boven de inhoud, panelen die onder hun knop openen; onder 900 px een bodemblad. */
.vw { position: relative; display: grid; gap: 10px; }
.vw-balk1, .vw-balk2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vw-balk1 { justify-content: space-between; padding-bottom: 4px; }
/* 1.6.0-audit (3.5): op een gsm schoof de hele pagina horizontaal; nu krimpen de balken mee en scrolt enkel de inhoud (brede tabel) */
.vw-balk1, .vw-balk2, .vw-inhoud { min-width: 0; }
.vw-inhoud { overflow-x: auto; }
.vw-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.vw-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pil); border: 1px solid transparent; background: transparent; color: var(--zacht); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.vw-tab:hover { color: var(--tekst); background-color: var(--rack); }
.vw-tab.aan { color: var(--accent-tekst); background: var(--accent); border-color: var(--accent); }
.vw-tab.firma::after { content: 'firma'; font: 700 10px/1 var(--body); letter-spacing: 1px; text-transform: uppercase; color: inherit; opacity: .7; }
.vw-tab .ster { color: var(--let); font-size: 12px; }
.vw-tab.plus { padding: 0 8px; }
.vw-tab.plus svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* 1.5.9.9B: segmenten = pillen in een vak, gekozen = cyaan */
.vw-vormen { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: var(--r-pil); background: var(--vak); overflow: hidden; }
.vw-vormen button { min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pil); background: transparent; color: var(--zacht); font-weight: 600; font-size: 13px; cursor: pointer; }
.vw-vormen button + button { border-left: 0; }
.vw-vormen button[aria-pressed="true"] { background: var(--accent); color: var(--accent-tekst); }
.vw-zoek { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-pil); background: var(--vak); }
.vw-zoek svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--zacht); flex: none; }
.vw-zoek input { border: 0; background: transparent; color: var(--tekst); min-width: 140px; font: inherit; font-size: 14px; outline: none; padding: 0; }
.vw-zoek:focus-within { border-color: var(--accent); }
.vw-knop { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pil); border: 1px solid transparent; background: var(--vak); color: var(--zacht); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.vw-knop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vw-knop b { font-weight: 600; color: var(--tekst); }
.vw-knop:hover { color: var(--tekst); border-color: var(--tekst); }
.vw-knop.aan { color: var(--tekst); background: var(--accent-zacht); border-color: var(--accent); }
.vw-knop.aan b { color: var(--accent); }
.vw-knop.stil { border-color: transparent; background: transparent; }
.vw-knop.icoon { padding: 0 8px; font-size: 18px; line-height: 1; }
.vw-knop[aria-expanded="true"] { border-color: var(--accent); color: var(--tekst); }
.vw-gewijzigd { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.vw .rek { flex: 1; }

/* paneel onder de knop */
.vw-pop { position: absolute; z-index: 25; min-width: 320px; max-width: min(720px, 100%); background-color: var(--rack); border: 1px solid var(--lijn); border-radius: var(--r-kaart); box-shadow: var(--schaduw); }
.vw-pop-in { padding: 12px; display: grid; gap: 10px; }
.vw-regels { display: grid; gap: 8px; }
.vw-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vw-regel select, .vw-regel input { flex: 0 1 auto; width: auto; max-width: 240px; min-height: 36px; padding: 0 10px; border: 1px solid var(--veld-rand); border-radius: var(--r-veld); background: var(--vak); color: var(--tekst); font: inherit; font-size: 13.5px; }
.vw-regel select[data-join] { width: 60px; }
.vw-regel .vw-join { width: 44px; text-align: right; font-size: 13px; }
.vw-waarde { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.vw-waarde input[type="text"], .vw-waarde input[type="number"] { min-width: 160px; }
.vw-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 460px; }
.vw-chips .chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.vw-chips .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vw-chips .chip.aan { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); font-weight: 600; }
.vw-chips .chip:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.vw-pop-voet { display: flex; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid var(--lijn); }
.vw-keuzelijst { display: grid; gap: 2px; min-width: 180px; }
.vw-keuzelijst button, .vw-menu-item { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border: 0; background: transparent; color: var(--tekst); font: inherit; font-size: 14px; text-align: left; border-radius: var(--r-klein); cursor: pointer; }
.vw-keuzelijst button:hover, .vw-menu-item:hover { background: var(--rack-2); }
.vw-keuzelijst button[aria-pressed="true"] { background: var(--rack-2); font-weight: 600; }
.vw-menu { display: grid; gap: 2px; min-width: 240px; }
.vw-kolommen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 50vh; overflow: auto; }
.vw-kolommen li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; border-radius: var(--r-klein); }
.vw-kolommen li:hover { background: var(--rack-2); }
.vw-kolommen .vink { margin: 0; }
.vw-kol-knoppen .icoonknop { width: 30px; height: 30px; font-size: 11px; }

/* inhoud */
.vw-inhoud.rij-compact td, .vw-inhoud.rij-compact th { padding-top: 5px; padding-bottom: 5px; }
.vw-inhoud.rij-ruim td { padding-top: 16px; padding-bottom: 16px; }
.vw-groepkop { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font: 400 22px/1 var(--display); letter-spacing: .03em; }
.vw-groepkop .n { font: 700 11px/1 var(--body); padding: 4px 9px; border: 0; background: var(--vak); border-radius: 999px; color: var(--zacht); }
.vw-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.vw-kaart { display: grid; gap: 8px; padding: 14px 16px 14px 20px; border: 1px solid transparent; border-radius: var(--r-kaart); background-color: var(--rack); }
.vw-kaart.klikbaar { cursor: pointer; }
.vw-kaart.klikbaar:hover, .vw-kaart:focus-visible { border-color: var(--lijn-sterk); }
.vw-kaart.sleept { opacity: .5; }
.vw-kaart-titel { font-weight: 600; }
.vw-kaart dl { margin: 0; display: grid; gap: 3px; font-size: 13.5px; }
.vw-kaart dl div { display: flex; gap: 8px; justify-content: space-between; }
.vw-kaart dt { color: var(--zacht); }
.vw-kaart dd { margin: 0; text-align: right; }
.vw-kb-zet select { min-height: 30px; font-size: 12.5px; border: 1px solid var(--lijn); border-radius: var(--r-veld); background: var(--vak); color: var(--tekst); }

/* kalender */
.vw-kal { display: grid; gap: 10px; }
.vw-kal-kop { display: flex; align-items: center; gap: 8px; }
.vw-kal-kop h2 { margin: 0 8px; font: 400 26px/1 var(--display); letter-spacing: .03em; min-width: 200px; }
.vw-kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 0; border-radius: var(--r-kaart); background-color: var(--rack); overflow: hidden; }
.vw-kal-wd { padding: 10px 10px; font: 700 11px/1 var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--zacht); border-bottom: 1px solid var(--lijn); }
.vw-kal-dag { min-height: 96px; padding: 6px; border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); display: grid; align-content: start; gap: 3px; }
.vw-kal-dag:nth-child(7n + 7) { border-right: 0; }
.vw-kal-dag.buiten { opacity: .45; }
.vw-kal-dag.vandaag .dnr { background: var(--accent); color: var(--accent-tekst); }   /* 1.5.9.9B: vandaag cyaan, niet rood */
.vw-kal-dag .dnr { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font: 400 16px/1 var(--display); letter-spacing: .02em; }
.vw-kal-item { display: block; padding: 3px 6px; border-radius: 6px; font-size: 12.5px; line-height: 1.25; text-decoration: none; color: var(--tekst); background: var(--rack-2); border-left: 3px solid var(--zacht); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vw-kal-item.ok { border-left-color: var(--ok); background: var(--ok-zacht); }
.vw-kal-item.let { border-left-color: var(--let); background: var(--let-zacht); }
.vw-kal-item.live { border-left-color: var(--live); background: var(--live-zacht); }
.vw-kal-item.uit { opacity: .55; text-decoration: line-through; }
.vw-kal-meer { border: 0; background: transparent; color: var(--zacht); font: 600 12px/1 var(--body); cursor: pointer; text-align: left; padding: 2px 6px; }
.vw-daglijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vw-daglijst a { display: block; padding: 10px 12px; border: 0; background: var(--vak); border-radius: var(--r-vak); text-decoration: none; color: var(--tekst); }
.vw-daglijst a.ok { background-image: linear-gradient(90deg, var(--ok) 0 4px, transparent 4px); } .vw-daglijst a.let { background-image: linear-gradient(90deg, var(--let) 0 4px, transparent 4px); } .vw-daglijst a.live { background-image: linear-gradient(90deg, var(--live) 0 4px, transparent 4px); }

/* kanban */
.vw-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.vw-kb-kolom { display: grid; align-content: start; gap: 8px; padding: 10px; border: 1px solid transparent; border-radius: var(--r-kaart); background: color-mix(in srgb, var(--rack) 55%, var(--ground)); min-height: 200px; }
.vw-kb-kolom.over { border-color: var(--accent); }
.vw-kb-kolom h2 { margin: 0; display: flex; align-items: center; gap: 8px; font: 400 16px/1 var(--display); letter-spacing: .04em; }
.vw-kb-kolom h2 .n { font: 700 11px/1 var(--body); color: var(--zacht); }
.vw-kb-rijen { display: grid; gap: 8px; }

@media (max-width: 900px) {
  .vw-pop { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; max-width: none; border-radius: var(--r-kaart) var(--r-kaart) 0 0; max-height: 80vh; overflow: auto; z-index: 40; }
  .vw-kal-dag { min-height: 64px; padding: 4px; }
  .vw-kal-item { font-size: 0; padding: 0; height: 6px; border-radius: 3px; border-left: 0; }
  .vw-kal-item.ok { background: var(--ok); } .vw-kal-item.let { background: var(--let); } .vw-kal-item.live { background: var(--live); } .vw-kal-item.uit { background: var(--zacht); }
  .vw-kal-kop h2 { min-width: 0; font-size: 22px; }
}
@media (max-width: 560px) {
  .vw-knop span:not(.sr), .vw-knop b { display: none; }
  .vw-knop { padding: 0 8px; }
  .vw-zoek input { min-width: 90px; }
}

/* ---------- 1.4.6 aanvraag-pop-up (#12) ---------- */
.dlg.breed { width: min(1100px, 96vw); }
.aanvraag .av-deel { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--lijn); }
.aanvraag .av-deel:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.aanvraag .av-deel > .label { margin: 0 0 8px; }
.aanvraag .av-of { grid-column: 1 / -1; }
.aanvraag .av-nieuw { grid-column: 1 / -1; padding: 10px 12px; border: 1px dashed var(--lijn-sterk); border-radius: var(--r-vak); }
.aanvraag .av-nieuw[hidden] { display: none; }
.av-dagen { display: grid; gap: 8px; }
.av-dag { border: 0; border-radius: var(--r-vak); padding: 10px 14px 12px; background: var(--vak); }
.av-dag.uit { opacity: .6; padding-bottom: 8px; }
.av-dag-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.av-dag-kop .vink { margin: 0; }
.av-dag-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 10px; align-items: end; }
.av-dag-velden .veld { margin: 0; }
.av-dag-velden .veld > span { font-size: 12px; }
.av-dag-velden .veld.breed { grid-column: 1 / -1; }
.av-dag-velden select, .av-dag-velden input { min-height: 36px; }
.av-pbm { align-items: center; }
.av-pbm-extra { max-width: 130px; min-height: 30px !important; border: 1px dashed var(--lijn-sterk); border-radius: 999px; padding: 0 10px; background: transparent; color: var(--tekst); font: inherit; font-size: 12.5px; }
.av-nacht { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.av-nacht .vink { margin: 0; }
.av-nacht input[type="text"] { flex: 1; min-width: 200px; }
.jd-acties { margin-top: 10px; align-items: center; gap: 8px; flex-wrap: wrap; display: flex; }
.jd-info { margin: 6px 0 0; }

/* 1.4.6 stap 3: de configurator van Diensten & Tarieven staat over de volle breedte van de dialoog */
.configurator { grid-column: 1 / -1; }
.configurator .tabelwrap { max-height: none; }
.configurator table { width: 100%; }

/* 1.4.7 (#19) — kiezen in de kaarten, en de keuzebalk met meer acties */
.vw-kaart { position: relative; }
.vw-kaart-kies { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; cursor: pointer; }
.vw-kaart-kies input { width: 18px; height: 18px; }
.vw-kaart.gekozen { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -2px; }
.keuzebalk { flex-wrap: wrap; }
.keuzebalk select { width: auto; max-width: 260px; flex: 0 1 auto; }
/* 1.5.9.9B: op de gsm passen zoeken, filter en sorteer op één rij (pillen iets smaller) */
@media (max-width: 560px) { .vw-knop { padding: 0 10px; } .vw-zoek { padding: 0 10px; flex: 1 1 120px; min-width: 0; } .vw-zoek input { min-width: 0; width: 100%; } }
/* >>> 1.6.1-12 */
/* 1.6.1-12: statusbalk per rij in de tabelweergave — zelfde kleur als de statuspil (data-balk → --balk, zie ll.css) */
.vw-inhoud tr[data-balk] > td:first-child,
.vw-inhoud tr.groepkop[data-balk] > th { box-shadow: inset 5px 0 0 var(--balk); padding-left: 19px; }
.vw-inhoud tr[data-balk="uit"] > td { color: var(--zacht); }
.vw-inhoud tr[data-balk="uit"] .rijlink { color: var(--zacht); text-decoration: line-through; }
@media print { .vw-inhoud tr[data-balk] > td:first-child, .vw-inhoud tr.groepkop[data-balk] > th { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* <<< 1.6.1-12 */