/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, module inkoop: alleen de indeling van de eigen schermen (klassen m-inkoop-...). Knoppen, velden, tabellen,
   vensters, meldingen, de feitenbalk en de gele kaart met de afspraken zijn de componenten van app.css; kleuren, maten,
   afronding en schaduw alleen met de tokens van tokens.css (docs/DESIGNSYSTEEM.md 8.4). */

/* een veld met iets ernaast (de weekdag, de tijd, de verzendwijze): op een regel; de velden geven mee */
.m-inkoop-rij { display: flex; align-items: center; gap: var(--pp-r-2); flex-wrap: nowrap; min-width: 0; }
.m-inkoop-rij > input, .m-inkoop-rij > select { flex: 1 1 110px; min-width: 0; }
.m-inkoop-rij > input[type=date] { flex: 0 0 136px; max-width: 136px; }
.m-inkoop-rij > input.kort { flex: 0 0 72px; max-width: 72px; }
.m-inkoop-rij > .sub { flex: none; white-space: nowrap; }
.m-inkoop-pcplaats > input:first-child { flex: 0 1 96px; max-width: 96px; }
.m-inkoop-colli > input { flex: 0 1 72px; max-width: 72px; }
.m-inkoop-kop .hulp .knop { margin-top: var(--pp-r-1); }

/* de kop van de bon: de feitenbalk erboven, drie kolommen zoals het Inkoop invoervenster van MultiPress */
.m-inkoop-feiten { margin-bottom: var(--pp-r-4); }
.m-inkoop-kop { row-gap: var(--pp-r-1); }
/* breed: de kolom met de datums iets breder (datum, tijd en verzendwijze op een regel) */
@media (min-width: 1181px) {
  .raster-invoer.raster-3.m-inkoop-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}
.m-inkoop-kop .rkolom { gap: var(--pp-r-1); }

/* de meldingen naast elkaar boven de tabbladen */
.m-inkoop-meldingen { margin: var(--pp-r-4) 0 var(--pp-r-2); }
.m-inkoop-meldingen .knop { margin-top: var(--pp-r-1); }

/* de tekst van de bon en de mail, zoals hij erop komt: een blad papier (wit, ook in de donkere modus) */
.m-inkoop-tekst {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--pp-r-2) 0 0; padding: var(--pp-r-4) var(--pp-r-5); max-width: 780px;
  font: var(--pp-gewicht) var(--pp-maat-s)/1.5 var(--pp-letter-mono);
  background: var(--pp-papier); color: var(--pp-papier-tekst); box-shadow: var(--pp-papier-schaduw);
}
.m-inkoop-voorbeeld .knoppen { margin: 0 0 var(--pp-r-2); }
/* een lange bestandsnaam in de map (B-146) breekt af in plaats van de pagina breder te maken */
.m-inkoop-voorbeeld > .sub, .m-inkoop-naam { overflow-wrap: anywhere; }

/* Nieuw: links de keuzes en de suborders, rechts de afspraken van de gekozen leverancier */
.m-inkoop-kies { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--pp-r-5); align-items: start; }
.m-inkoop-kies-links { min-width: 0; }
.m-inkoop-kaart .afspraak { position: static; }
.m-inkoop-keuze td { vertical-align: top; }
.m-inkoop-levkop { white-space: pre-wrap; }
.m-inkoop-levering { margin: 0; }
.m-inkoop-afsprakenvak .afspraak { position: static; }

/* het tabblad Sub-inkopen: de knoppen onder de regels */
.m-inkoop-knoppen { margin-top: var(--pp-r-2); }

/* het venster van een regel: het blok Geleverd en een nieuwe levering op een regel */
.m-inkoop-geleverd { margin-top: var(--pp-r-3); }
.m-inkoop-ontvangst { align-items: flex-end; flex-wrap: wrap; margin-top: var(--pp-r-2); }
.m-inkoop-ontvangst .rveld { margin: 0; }

/* smal: de afspraken onder de keuzes */
@media (max-width: 980px) {
  .m-inkoop-kies { grid-template-columns: minmax(0, 1fr); }
}