/* ============================================================
   Ontwerp E: projectenlijst als werklijst (richting A)
   Kop met telling, snelle weergaven, fasefilters met aantallen,
   zoekveld en een tabel met vaste kop, signaalstip en totaalregel.
   Alleen bestaande tokens; licht en donker via de tokens.
   ============================================================ */

.wl { display: flex; flex-direction: column; gap: 14px; }
.wl .wl-head { margin-bottom: 2px; }
.wl .dash-head__actions { align-items: center; }
.wl .dash-head__actions .btn { padding: 9px 16px; font-size: 13px; }
.wl .dash-head__actions .btn[disabled] { opacity: .5; cursor: not-allowed; }
.wl .dash-head__actions .btn--ghost.is-on { box-shadow: inset 0 0 0 1px var(--brand); }

/* ---- kolomkeuze ---- */
.wl-kolwrap { position: relative; }
.wl-kolmenu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 220px; padding: 8px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); }
.wl-kolmenu__kop { padding: 6px 8px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.wl-kolmenu__rij { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.wl-kolmenu__rij:hover { background: var(--bg-2); }
.wl-kolmenu__rij input { accent-color: var(--brand); width: 15px; height: 15px; }
.wl-kolmenu__rij.is-vast { color: var(--text-3); cursor: default; }
.wl-kolmenu__rij.is-vast:hover { background: none; }
.wl-kolmenu__std { margin-top: 6px; padding: 8px; border-top: 1px solid var(--line); text-align: left; font: inherit; font-size: 12.5px; color: var(--brand); background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.wl-kolmenu__std:hover { text-decoration: underline; }
[data-theme="dark"] .wl-kolmenu__std { color: #8BB1C8; }

/* ---- weergaven, fasefilters, zoeken ---- */
.wl-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wl-seg { display: flex; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); flex-shrink: 0; }
.wl-seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; font: inherit; font-size: 12.5px; padding: 7px 14px; border-radius: 9px; background: transparent; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.wl-seg button:hover { color: var(--text); }
.wl-seg button.is-on { background: var(--brand); color: #fff; font-weight: 500; }
.wl-seg__tel { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; color: #fff; background: var(--neg); }
.wl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-chip { height: 34px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.wl-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand) 50%, var(--line-strong)); }
.wl-chip em { font-style: normal; font-size: 11px; color: var(--text-3); }
.wl-chip.is-on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--text); font-weight: 500; }
.wl-chip.is-on em { color: var(--text-2); }
.wl-zoek { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 320px; max-width: 100%; height: 38px; padding: 0 10px 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-3); font-size: 13px; }
.wl-zoek:focus-within { border-color: var(--brand); }
.wl-zoek input { border: 0; outline: 0; background: transparent; font: inherit; flex: 1; min-width: 0; color: var(--text); }
.wl-zoek input::placeholder { color: var(--text-3); }
.wl-zoek__x { display: inline-flex; border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 3px; border-radius: 6px; }
.wl-zoek__x:hover { color: var(--text); background: var(--bg-2); }

/* ---- tabel ---- */
/* overflow: clip in plaats van hidden, zodat de kop kan blijven staan bij scrollen */
.wl-tabel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: clip; box-shadow: var(--shadow); }
.wl-kop, .wl-rij, .wl-totaal { display: grid; grid-template-columns: var(--wl-raster); gap: 12px; align-items: center; padding: 0 18px; }
.wl-kop { position: sticky; top: 0; z-index: 3; padding-top: 11px; padding-bottom: 11px; background: var(--bg-2); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); border-bottom: 1px solid var(--line); }
.wl-kop .is-rechts, .wl-cel.is-rechts { text-align: right; justify-content: flex-end; }
.wl-rij { width: 100%; padding-top: 12px; padding-bottom: 12px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.wl-kop + .wl-rij { border-top: 0; }
.wl-rij:hover { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.wl-rij:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.wl-rij.is-signaal { background: color-mix(in srgb, var(--neg) 5%, var(--surface)); }
.wl-rij.is-signaal:hover { background: color-mix(in srgb, var(--neg) 8%, var(--surface)); }
.wl-sig { display: flex; justify-content: center; }
.wl-sig i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--neg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 18%, transparent); }
.wl-proj { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-proj b { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-proj > span { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-cel { min-width: 0; display: flex; font-size: 13px; }
.wl-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.wl-klein { font-size: 12px; }
.wl-leeg { color: var(--text-3); font-style: italic; }
.wl-zacht { color: var(--text-2); }
.wl-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-fase { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wl-fase .wb-fasen { margin-top: 0; }
.wl-fase .wb-fasen i { width: 12px; }
.wl-fase > span:last-child { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-bv { display: inline-flex; align-items: center; gap: 6px; }
.wl-pijl { display: flex; color: var(--text-3); }
.wl-rij:hover .wl-pijl { color: var(--brand); }

/* status: terugval als het gedeelde StatusLabel (patronen.jsx) ontbreekt */
.wl-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--text-2); background: color-mix(in srgb, var(--text-2) 12%, transparent); }
.wl-status--acquisitie { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.wl-status--gegund { color: var(--steel); background: color-mix(in srgb, var(--steel) 14%, transparent); }
.wl-status--uitvoering { color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.wl-status--opgeleverd { color: var(--pos-tekst); background: color-mix(in srgb, var(--pos) 13%, transparent); }
.wl-status--gearchiveerd { color: var(--text-3); }
[data-theme="dark"] .wl-status--uitvoering { color: #8BB1C8; background: color-mix(in srgb, #8BB1C8 16%, transparent); }

/* besteed: balk met bedrag en percentage */
.wl-besteed { display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 0; }
.wl-besteed > .wl-klein { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wl-besteed__balk { position: relative; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.wl-besteed__balk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--brand); min-width: 2px; }
.wl-besteed__balk i.is-neg { background: var(--neg); }

/* lege toestand en totaalregel */
.wl-leegrij { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 30px 20px; font-size: 13px; color: var(--text-2); text-align: center; line-height: 1.5; }
.wl-totaal { padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg-2) 45%, var(--surface)); font-size: 12.5px; }
.wl-totaal b { font-weight: 500; }
.wl-voet { margin: 0; padding: 10px 18px 11px 56px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.wl-voet .link-btn { padding: 3px 10px; font-size: 11.5px; }

@media (max-width: 1360px) {
  .wl-zoek { width: 300px; font-size: 12.5px; }
  .wl-kop, .wl-rij, .wl-totaal { gap: 10px; padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 1180px) {
  .wl-zoek { margin-left: 0; flex: 1 1 260px; }
}
/* h64: op de telefoon (375) viel de projectnaam weg omdat de vaste kolommen alle breedte namen.
   Onder 760 px een rij als kaart: naam en code over de volle breedte, daaronder fase en status. */
@media (max-width: 760px) {
  .wl-kop { display: none; }
  .wl-rij { grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; padding-left: 12px; padding-right: 12px; }
  .wl-rij > .wl-sig { grid-row: 1; grid-column: 1; }
  .wl-rij > .wl-proj { grid-row: 1; grid-column: 2 / 4; }
  .wl-rij > .wl-cel, .wl-rij > .wl-pijl { display: none; }
  .wl-rij > .wl-cel[data-k="fase"] { display: flex; grid-row: 2; grid-column: 2; }
  .wl-rij > .wl-cel[data-k="status"] { display: flex; grid-row: 2; grid-column: 3; justify-content: flex-end; }
  .wl-proj b { white-space: normal; }
  .wl-totaal { grid-template-columns: minmax(0, 1fr) auto; padding-left: 12px; padding-right: 12px; }
  .wl-totaal > span:first-child, .wl-totaal > span:last-child, .wl-totaal > .wl-cel { display: none; }
  .wl-totaal > .wl-cel[data-k="som"] { display: flex; justify-content: flex-end; }
  .wl-voet { padding-left: 12px; }
}