/*
 * Batches: een lijst om af te vinken, ook met natte handen op een beurs.
 *
 * De vinkjes zijn knoppen van veertig punten, niet een selectievakje van
 * twaalf. Wie dit gebruikt staat bij een pallet en kijkt op zijn telefoon.
 */
/* Een blok per leverancier: één order, met de onderdelen eronder. */
.batch-lev { padding: 10px 0; border-top: 1px solid var(--lijn, rgba(128, 128, 128, 0.25)); }
.batch-lev:first-of-type { border-top: 0; }
/* Een leverancier die geleverd heeft valt terug; wat nog moet komen springt eruit. */
.batch-lev-klaar { opacity: 0.55; }
.batch-lev-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.batch-lev-naam { font-weight: 600; }
.batch-bedrag { white-space: nowrap; }

/* De onderdelen van die leverancier: aantal, geen prijs. Dit is de lijst om na
   te lezen of de opdracht compleet is. */
.batch-onderdeel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 0 2px 2px; }
.batch-onderdeel-aantal { white-space: nowrap; text-align: right; }
.batch-onderdeel-aantal .is { display: block; }

.batch-vinkjes { display: flex; gap: 8px; margin-top: 6px; }
.batch-vink {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--lijn, rgba(128, 128, 128, 0.35));
  border-radius: 999px; background: transparent; color: inherit;
  font: inherit; cursor: pointer;
}
.batch-vink[disabled] { opacity: 0.5; cursor: default; }
.batch-vink-aan { border-color: var(--goud, #b48e47); font-weight: 600; }
/* Het lege vakje heeft dezelfde maat als het vinkje, zodat de knop niet
   verspringt zodra je hem aantikt. */
.batch-vakje {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid var(--lijn, rgba(128, 128, 128, 0.45));
}

.batch-wat { margin-bottom: 12px; }
/* Aantal en liters naast elkaar, met de cijfers onder elkaar uitgelijnd. */
.batch-watrij { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 0; }
.batch-watcijfers { display: flex; gap: 14px; white-space: nowrap; }
.batch-watcijfers b { min-width: 4.5em; text-align: right; }
.batch-watcijfers span { min-width: 5.5em; text-align: right; }
.batch-watrij-som { border-top: 1px solid var(--lijn, rgba(128, 128, 128, 0.25)); margin-top: 4px; padding-top: 6px; }

/* Het productielogboek: per product een kaartje met de lotcode erboven. */
.batch-prod { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn, rgba(128, 128, 128, 0.25)); }
.batch-prod-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.batch-prod-lot { font-variant-numeric: tabular-nums; white-space: nowrap; }
.batch-totaal {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 12px; padding-top: 10px;
  border-top: 2px solid var(--lijn, rgba(128, 128, 128, 0.35));
}