/* Wacht op uren (versie 1.36.0): het tabblad met het bakje, en het blok met de
   tellers op Overzicht. Eigen bestand naast stijl.css, met de kleuren en maten
   uit de huisstijl daar (CLAUDE.md §9). Alle namen beginnen met wu-, zodat er
   niets botst met de rest van de app; stijl.css blijft ongemoeid. */

/* Het tabblad blijft verborgen tot de server zegt dat de gebruiker finance is. */
body.geen-finance #tab-wachtopuren{display:none}

.wu-uitleg{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:12px 18px;margin-bottom:12px;box-shadow:var(--kaartschaduw);font-size:14px;line-height:1.55;max-width:1240px}

/* ---------- De vier tellers ---------- */
.wu-tellers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;max-width:1240px}
.wu-teller{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left;background:#fff;border:1px solid var(--kaartrand);border-left:5px solid var(--blauw-soft);border-radius:14px;padding:12px 14px;box-shadow:var(--kaartschaduw);font-family:'Exo',Arial,sans-serif;color:var(--blauw-black);cursor:pointer;transition:background-color .15s,border-color .15s}
.wu-teller:hover{border-color:var(--blauw)}
.wu-teller:focus-visible{outline:none;box-shadow:var(--focusring)}
.wu-teller.wu-teller-aan{background:var(--blauw-hairline);border-color:var(--blauw);border-left-width:5px}
.wu-teller-geparkeerd{border-left-color:var(--geel)}
.wu-teller-teLang.wu-teller-signaal{border-left-color:var(--oranje)}
.wu-teller-dreigtTeVervallen.wu-teller-signaal{border-left-color:var(--oranje)}
.wu-teller-vervallen.wu-teller-signaal{border-left-color:var(--rood)}
.wu-teller-n{font-size:26px;font-weight:800;line-height:1.1;color:var(--blauw);font-variant-numeric:tabular-nums}
.wu-teller-vervallen.wu-teller-signaal .wu-teller-n{color:var(--rood)}
.wu-teller-dreigtTeVervallen.wu-teller-signaal .wu-teller-n,.wu-teller-teLang.wu-teller-signaal .wu-teller-n{color:var(--oranje-donker)}
.wu-teller-naam{font-size:13.5px;font-weight:800;color:var(--blauw-black)}
.wu-teller-uitleg{font-size:12px;line-height:1.35;color:var(--grijs);overflow-wrap:anywhere}

/* ---------- Filters ---------- */
.wu-balk{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-bottom:12px}
.wu-balk label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;min-width:0}
.wu-balk select{font-family:'Exo',Arial,sans-serif;font-size:13px;font-weight:600;color:var(--blauw);border:1px solid var(--kaartrand);border-radius:999px;padding:8px 32px 8px 14px;background:#fff;cursor:pointer;box-shadow:0 1px 3px rgba(3,21,63,.06);max-width:100%;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073889' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;text-transform:none;letter-spacing:0}
.wu-balk select:hover{border-color:var(--blauw)}

/* Alleen voor schermlezers: wat er net gebeurde. */
.wu-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- De lijst ---------- */
.wu-lijst{display:flex;flex-direction:column;background:#fff;border:1px solid var(--kaartrand);border-left:5px solid var(--geel);border-radius:14px;box-shadow:var(--kaartschaduw);overflow:hidden;max-width:1240px}
.wu-lijst>.leeg{border:none;box-shadow:none;margin:0}
.wu-regel{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding:12px 18px;border-bottom:1px solid var(--grijs-thin);font-size:14px;color:var(--blauw-black);min-width:0}
.wu-regel:last-child{border-bottom:none}
.wu-regel.wu-regel-vervallen{box-shadow:inset 4px 0 0 var(--rood)}
.wu-regel.wu-regel-dreigt,.wu-regel.wu-regel-te-lang{box-shadow:inset 4px 0 0 var(--oranje)}
.wu-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.wu-lev{font-weight:700;font-size:15px;overflow-wrap:anywhere;min-width:0}
.wu-levnr{font-weight:600;font-size:12.5px;color:var(--grijs);font-variant-numeric:tabular-nums}
.wu-bedrag{font-weight:800;font-size:15.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.wu-bedrag small{display:block;font-size:11px;font-weight:600;color:var(--grijs);text-align:right}
.wu-delen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--grijs);min-width:0}
.wu-delen>*{min-width:0;overflow-wrap:anywhere}
.wu-veld b{color:var(--blauw-black);font-weight:700}
.wu-chip{font-size:12px;font-weight:600;color:var(--blauw);background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:999px;padding:2px 11px;white-space:nowrap}
.wu-chip.wu-zacht{color:var(--grijs);background:#fff;border-color:var(--grijs-thin)}
.wu-chip.wu-dreigt,.wu-chip.wu-te-lang{color:var(--geel-tekst);background:var(--geel-bg);border-color:var(--geel-rand);font-weight:700}
.wu-chip.wu-vervallen{color:var(--rood);background:var(--rood-bg);border-color:var(--rood-rand);font-weight:700}
.wu-verval-bron{font-weight:800}
.wu-bc{font-size:11.5px;font-weight:700;color:var(--grijs);background:var(--grijs-thin);border-radius:999px;padding:2px 9px;white-space:nowrap}
.wu-bc.wu-bc-ja{color:var(--groen-tekst);background:var(--groen-bg)}
.wu-onder{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:13px;min-width:0}
.wu-reden{color:var(--blauw-black);font-weight:600;overflow-wrap:anywhere;min-width:0}
.wu-toelichting{color:var(--grijs);overflow-wrap:anywhere;min-width:0}
.wu-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.wu-knop{padding:7px 14px;font-size:12.5px}
.wu-knop:focus-visible{outline:none;box-shadow:var(--focusring)}
.wu-meer{margin-top:12px}
.wu-meer[hidden]{display:none}

/* ---------- Het blok op Overzicht ---------- */
.wu-overzicht{background:#fff;border:1px solid var(--kaartrand);border-left:5px solid var(--geel);border-radius:14px;padding:12px 18px;margin-bottom:14px;box-shadow:var(--kaartschaduw);max-width:1240px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.wu-overzicht[hidden]{display:none}
.wu-ov-kop{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 200px}
.wu-ov-kop h3{font-size:12px;font-weight:800;color:var(--blauw);text-transform:uppercase;letter-spacing:.05em}
.wu-ov-uitleg{font-size:13px;color:var(--grijs)}
.wu-ov-tellers{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.wu-ov-teller{display:inline-flex;align-items:baseline;gap:8px;font-family:'Exo',Arial,sans-serif;background:var(--hairline);border:1px solid var(--blauw-soft);border-radius:999px;padding:6px 14px;cursor:pointer;color:var(--blauw-black)}
.wu-ov-teller:hover{border-color:var(--blauw)}
.wu-ov-teller:focus-visible,.wu-ov-open:focus-visible{outline:none;box-shadow:var(--focusring)}
.wu-ov-teller .wu-teller-naam{font-size:12.5px}
.wu-ov-teller .wu-teller-n{font-size:16px}
.wu-ov-teller.wu-teller-vervallen.wu-teller-signaal{background:var(--rood-bg);border-color:var(--rood-rand)}
.wu-ov-teller.wu-teller-teLang.wu-teller-signaal,.wu-ov-teller.wu-teller-dreigtTeVervallen.wu-teller-signaal{background:var(--geel-bg);border-color:var(--geel-rand)}

/* Op een breed scherm staan de kenmerken naast de reden. */
@media (min-width:1100px){
  .wu-regel{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;column-gap:22px;align-items:start}
  .wu-kop{grid-column:1/-1}
  .wu-delen{grid-column:1/2}
  .wu-onder{grid-column:2/3;flex-direction:column;gap:4px}
  .wu-knoppen{grid-column:3/4;justify-content:flex-end}
}
@media (max-width:720px){
  .wu-tellers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wu-teller{padding:10px 12px}
  .wu-teller-n{font-size:22px}
  .wu-regel{padding:12px 14px}
  .wu-uitleg,.wu-overzicht{padding:10px 14px}
  .wu-balk label{flex:1 1 100%}
  .wu-balk select{width:100%}
  .wu-knoppen .wu-knop{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){.wu-teller{transition:none}}