/*
 * Inkoop (Simon, 10-10-2026). Eén scherm: boven invullen, daaronder lezen.
 *
 * Op de telefoon staat alles onder elkaar; op het bureau liggen de
 * invulvelden naast elkaar, want dan zie je in één oogopslag wat je vraagt.
 * De tabel scrolt desnoods zelf, de pagina nooit opzij.
 */

.ink-aantallen {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .ink-aantallen { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.ink-aantal { display: flex; flex-direction: column; gap: 4px; }
.ink-aantal-naam { font-weight: 600; }
.ink-aantal-sub { font-size: 12px; opacity: 0.7; }
.ink-veld { font-size: 18px; }
/* De ginregel wordt uitgerekend; hij staat er iets rustiger bij zodat je ziet
   dat je hem niet hoeft in te vullen. */
.ink-volgt .ink-aantal-naam { font-weight: 500; }

.ink-groep { margin-top: 14px; }
.ink-groep:first-child { margin-top: 0; }
.ink-groep-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ink-groep-bedrag { text-align: right; }

.ink-tabel { width: 100%; border-collapse: collapse; margin-top: 6px; }
.ink-tabel td { padding: 6px 0; border-top: 1px solid var(--lijn, rgba(128, 128, 128, 0.25)); vertical-align: top; }
.ink-naam { width: 40%; }
.ink-naam .is { display: block; font-size: 12px; }
.ink-getal { text-align: right; white-space: nowrap; padding-left: 10px !important; }

@media (max-width: 560px) {
  /* Vijf kolommen passen niet op een telefoon: dan per regel twee lagen. */
  .ink-tabel td { display: block; padding: 2px 0; text-align: left; }
  .ink-tabel tr { display: block; padding: 8px 0; border-top: 1px solid var(--lijn, rgba(128, 128, 128, 0.25)); }
  .ink-tabel td { border-top: 0; }
  .ink-naam { width: auto; font-weight: 600; }
  .ink-getal { text-align: left; padding-left: 0 !important; }
}

.ink-totaal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px solid var(--lijn, rgba(128, 128, 128, 0.35));
  flex-wrap: wrap;
}
.ink-totaal-bedrag { font-size: 20px; }

.ink-onderdeel { margin-top: 14px; }
.ink-onderdeel:first-of-type { margin-top: 6px; }
.ink-opmerking { margin-top: 4px; }
.ink-recept-product { margin-top: 14px; }

/* Afdrukken gaat via het pdf-inkoopblad, niet via het scherm: alleen daar
   staat de vertrouwelijkheidsregel en staan de leveranciers er niet op. */

/* Wat we nog niet weten: een lijstje onder elkaar, niet een zin die
   doorloopt tot je hem niet meer leest. */
.ink-onbekend { margin-top: 10px; }
.ink-onbekend ul { margin: 4px 0 0; padding-left: 18px; }
.ink-onbekend li { margin: 2px 0; }

/* Het slot op het blad: één regel, net als een bedrijfsgegeven. */
.ink-slot { margin-top: 10px; }

/* De waarschuwing bij een subtotaal: rood, want hij wordt anders gelezen
   als het hele bedrag. */
.ink-waarschuwing { color: #c0392b; font-weight: 600; margin-top: 4px; }