/* werkbak.css — de voordeur van Verkoop (bouwspec Verkoopstraat v7 §3.1).
   Kleurkeuze: te lang wachten is een **signaal**, geen blokkade — daarom
   amber/terra en géén rood. Rood blijft in dit platform voorbehouden aan
   blokkades en confidence D (CLAUDE.md).
   Eén rij per opname, en de wachttijd is het enige dat opvalt: een gekleurde
   rand links en één cijfer rechts. Verder blijft het scherm kaal, want de
   binnendienst scant hier en leest niet. Alleen tokens. */
.wbk-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 26px 32px 72px;
  display: flex; flex-direction: column; gap: 14px; }

.wbk-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wbk-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.wbk-lead { margin: 6px 0 0; max-width: 62ch; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }
.wbk-regelset { font-size: .64rem; color: var(--c-ink-3); background: var(--c-paneel);
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 5px 11px; white-space: nowrap; }

.wbk-meld { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 11px 14px; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); background: var(--c-paneel); }
.wbk-meld.is-stop { background: var(--c-amber-t); border-color: var(--c-amber); }
.wbk-meld.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); }
.wbk-meld b { color: var(--c-ink); }

.wbk-zoek { display: flex; align-items: center; gap: 8px; }
.wbk-zoek .bs-zoek { flex: 1; max-width: 380px; }

.wbk-hoofd { margin: 8px 0 0; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; }

/* één rij per opname — zes kolommen, links de wachttijdkleur */
.wbk-rij { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 34px minmax(0, 2.1fr) minmax(0, 1.3fr) minmax(0, 1.2fr) 120px auto;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn);
  border-radius: var(--radius); padding: 11px 14px; box-shadow: var(--schaduw-tegel);
  transition: border-color 160ms ease; }
.wbk-rij:hover { border-color: var(--c-groen); }
.wbk-rij.is-goed { border-left-color: var(--c-groen); }
.wbk-rij.is-let  { border-left-color: var(--c-amber); }
.wbk-rij.is-stop { border-left-color: var(--c-terra-d); }
.wbk-rij.is-rust { border-left-color: var(--c-lijn); }
@media (max-width: 1080px) {
  .wbk-rij { grid-template-columns: 34px minmax(0, 1fr); grid-auto-rows: min-content; }
  .wbk-rij .wbk-kol, .wbk-rij .wbk-akties { grid-column: 2; }
}

.wbk-avatar { width: 30px; height: 30px; border-radius: 99px; display: flex; align-items: center;
  justify-content: center; font-size: .64rem; font-weight: 800; letter-spacing: .02em;
  background: var(--c-groen-t); color: var(--c-groen-d); border: var(--lijndikte) solid var(--c-lijn); }

.wbk-kol { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .82rem; }
.wbk-kol b { font-weight: 700; }
.wbk-sub { font-size: .69rem; color: var(--c-ink-3); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; }
.wbk-kol--wacht { text-align: right; }
.wbk-kol--wacht b { font-size: .92rem; font-weight: 800; }
.wbk-kol--wacht b.is-goed { color: var(--c-groen-d); }
.wbk-kol--wacht b.is-let  { color: var(--c-amber); }
.wbk-kol--wacht b.is-stop { color: var(--c-terra-d); }
.wbk-kol--wacht b.is-rust { color: var(--c-ink-3); }

.wbk-stat { display: inline-block; align-self: flex-start; font-size: .64rem; font-weight: 700;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 3px 9px; color: var(--c-ink-2); }
.wbk-stat.is-goed { border-color: var(--c-groen); color: var(--c-groen-d); }
.wbk-stat.is-let  { border-color: var(--c-amber); color: var(--c-amber); }

.wbk-akties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.wbk-akties .btn { padding: 5px 11px; font-size: .7rem; }

/* de opname zelf, in de drawer */
.wbk-opnamekaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.wbk-opnamekaart p { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--c-ink-2); }
.wbk-lijstje { margin: 0; padding-left: 16px; font-size: .74rem; color: var(--c-ink-2); line-height: 1.7; }
.wbk-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; line-height: 1.6; margin: 10px 0 0; }
.wbk-bijlagen { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }