/* ===========================================================================
   BOUWDOOS-SCHERMEN (huid, 26-09-2026): onderdelen die de bouwdoos nog niet had en die Vandaag, WMS,
   Koppelingen en Producten nodig hebben. Alleen de tokens van bouwdoos.css; geen nieuwe kleuren.
   bouwdoos.css zelf is in deze tak alleen-lezen (de Stuurhut-sessie werkt daar nog in).
   =========================================================================== */

/* Statuslijst: per regel een stip met icoon (nooit alleen kleur), naam, tijd rechts en een onderregel. */
.bds-statuslijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.bds-status { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--a2); row-gap: 2px; align-items: center; }
.bds-stip { grid-row: span 2; width: 24px; height: 24px; border-radius: var(--radius-rond); display: inline-flex; align-items: center;
  justify-content: center; font-size: var(--tekst-klein); font-weight: 700; }
.bds-status--goed .bds-stip { background: var(--goed-vlak); color: var(--goed-tekst); }
.bds-status--letop .bds-stip { background: var(--letop-vlak); color: var(--letop-tekst); }
.bds-status--fout .bds-stip { background: var(--fout-vlak); color: var(--fout-tekst); }
.bds-status--stil .bds-stip { background: var(--achtergrond); color: var(--tekst-zacht); }
.bds-status-naam { font-size: var(--tekst-tabel); font-weight: 600; color: var(--tekst); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bds-status-tijd { font-size: var(--tekst-tabel); color: var(--tekst); font-variant-numeric: tabular-nums; }
.bds-status-sub { grid-column: 2 / -1; font-size: var(--tekst-klein); color: var(--tekst-zacht); }

/* Een ring met een bijschrift ernaast (bijvoorbeeld "3 van 4 bijgewerkt"). */
.bds-ringregel { display: flex; align-items: center; gap: var(--a3); font-size: var(--tekst-klein); color: var(--tekst-zacht); }

/* Kaart binnen een laag die urgent is: de bedragkleur van de bouwdoos als rand links is verboden (sectie 9),
   dus een zachte foutvulling over de hele kaart. */
.bds-urgent { background: linear-gradient(120deg, var(--fout-vlak), var(--laag-vlak)); }

/* Chip met kanaal en fulfilment (bol/Shopify, FBR/LVB): één vorm voor WMS en Producten. */
.bds-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 var(--a2); border-radius: var(--radius-rond);
  font-size: var(--tekst-klein); font-weight: 600; background: var(--accent-licht); color: var(--accent); white-space: nowrap; }
.bds-chip--stil { background: var(--achtergrond); color: var(--tekst-zacht); }
.bds-chip--goed { background: var(--goed-vlak); color: var(--goed-tekst); }
.bds-chip--letop { background: var(--letop-vlak); color: var(--letop-tekst); }
.bds-chip--fout { background: var(--fout-vlak); color: var(--fout-tekst); }

/* Voorraadbalk tegen de dekking: de vulling is het deel van het doel (dagen) dat de voorraad dekt. */
.bds-balk { display: grid; gap: 2px; min-width: 96px; }
.bds-balk-baan { height: 8px; border-radius: var(--radius-rond); background: var(--ring-baan); overflow: hidden; }
.bds-balk-baan i { display: block; height: 100%; border-radius: var(--radius-rond); background: var(--vn-na); }
.bds-balk--goed .bds-balk-baan i { background: var(--vn-gemeten); }
.bds-balk--letop .bds-balk-baan i { background: var(--letop-tekst); }
.bds-balk--fout .bds-balk-baan i { background: var(--fout-tekst); }
.bds-balk-tekst { font-size: var(--tekst-klein); color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }

/* Urgentielaag: storingen of vastgelopen werk bovenaan een scherm, in de foutkleur van de bouwdoos (sectie 9:
   een zachte vulling over het hele blok, geen streep aan de zijkant). */
.bds-urgentlaag { border-radius: var(--radius-laag); padding: var(--a4); background: linear-gradient(120deg, var(--fout-vlak), var(--vlak)); box-shadow: var(--schaduw-laag); }
.bds-urgentlaag-kop { display: flex; align-items: baseline; gap: var(--a2); margin-bottom: var(--a3); }
.bds-urgentlaag-kop h2 { margin: 0; font-size: var(--tekst-titel); font-weight: 700; color: var(--fout-tekst); }
.bds-urgentlaag-meer { margin-top: var(--a2); font-size: var(--tekst-klein); color: var(--tekst-zacht); }