/*
 * Voorraad (blok C). Het staafje per SKU uit AANVULLING-12 §8, met de leeftijd
 * net zo zichtbaar als het aantal.
 */

.vrd-regel { padding: 10px 0; border-bottom: 1px solid var(--white-a04); }
.vrd-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vrd-stand { font-size: var(--fs-support); }

.vrd-balk {
  height: 6px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--white-a04);
  overflow: hidden;
}
.vrd-balk > i {
  display: block;
  height: 100%;
  width: var(--breed, 0%);
  border-radius: 3px;
  background: var(--grad-gold-btn);
}
.vrd-laag .vrd-balk > i { background: var(--warn); }

.vrd-onder { margin-top: 5px; font-size: var(--fs-meta); color: var(--muted-2); }
.vrd-waarschuwing { color: var(--warn); }

.vrd-mutatie {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--white-a04);
  font-size: var(--fs-support);
}
.vrd-wie { white-space: nowrap; }

.voorraad-vorm[hidden] { display: none; }

/* Orders: de regelinvoer. */
.orders-regel { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.orders-regel .inlees-select { flex: 1; min-width: 0; }
.orders-aantal { width: 72px; }
.orders-korting { width: 64px; }
.orders-vorm[hidden] { display: none; }

/* ---- Inspiratie (blok D) ------------------------------------------------ */

.insp-kaarten { display: grid; gap: 12px; }
@media (min-width: 1024px) { .insp-kaarten { grid-template-columns: repeat(3, 1fr); } }

.insp-kaart {
  background: var(--surface);
  border: 1px solid var(--white-a06);
  border-radius: var(--r-card);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.insp-foto { border-radius: 8px; overflow: hidden; min-height: 40px; }
.insp-foto img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.insp-domein { letter-spacing: var(--ls-eyebrow); }
.insp-waarom { margin: 0; font-size: var(--fs-support); color: var(--muted); }
.insp-voet { font-size: var(--fs-meta); }
.insp-vorm[hidden] { display: none; }

/* ---- Het generieke recordscherm (BOUWOPDRACHT-5 fase 1) ----------------- */
.gg-zoek { width: 100%; }
.gg-tabelrol { overflow-x: auto; }
.gg-rij { cursor: pointer; }
.gg-rij:hover td { background: var(--white-a04); }
.gg-vorm[hidden] { display: none; }
/* Fase 2: bord- en kalenderweergaven op het generieke scherm. */
.gg-bordrol { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start; }
.gg-kolom { min-width: 200px; flex: 0 0 auto; }
.gg-kaart { padding: 8px 10px; border: 1px solid var(--white-a08, rgba(255,255,255,.08));
            border-radius: 8px; margin-top: 6px; }
.gg-kaart:hover, .gg-regel:hover { background: var(--white-a04, rgba(255,255,255,.04)); }
.gg-regel { padding: 10px 0; border-bottom: 1px solid var(--white-a08, rgba(255,255,255,.08)); }
.gg-filterregel { flex-wrap: wrap; }
.gg-aantal { width: 72px; }
.gg-relatief[hidden] { display: none; }
/* Par. 5.3 en par. 18.5: een veld dat niet van toepassing is gaat weg met een
   klasse, nooit alleen met hidden. */
.veld-voorwaardelijk-uit { display: none; }
.fl[data-verplicht="ja"]::after { content: " *"; }