/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, module afleverbon: alleen de indeling van de eigen schermen (klassen m-afleverbon-...). Knoppen, velden,
   tabellen, vensters, meldingen en de feitenbalk zijn de componenten van app.css; kleuren, maten, afronding en schaduw
   alleen met de tokens van tokens.css (docs/DESIGNSYSTEEM.md 8.4). Uitzondering is het blok PAPIER onderaan: het
   voorbeeld van de pakbon volgt het document (wit, ook in de donkere modus, met de letters en maten van de pakbon). */

/* de aantallen in de tabel van een nieuwe pakbon en de colli op de pakbon */
.m-afleverbon-regels td { vertical-align: top; }
.m-afleverbon-regels input.m-afleverbon-aantal { width: 90px; }
.m-afleverbon-regels tr.m-afleverbon-uit td { color: var(--pp-tekst-3); text-decoration: line-through; }
.m-afleverbon-regels tr.m-afleverbon-uit input { text-decoration: none; }

/* het basisvenster: de feiten bovenaan, links de kop en de tabbladen, rechts de pakbon zoals hij op papier staat */
.m-afleverbon-feiten { margin-bottom: var(--pp-r-4); }
.m-afleverbon-meldingen { margin: 0 0 var(--pp-r-4); }
.m-afleverbon-meldingen .knop { margin-top: var(--pp-r-1); }
.m-afleverbon-werk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); gap: var(--pp-r-6); align-items: start; }
.m-afleverbon-links, .m-afleverbon-rechts { min-width: 0; }
.m-afleverbon-rechts { position: sticky; top: calc(var(--pp-balk) + var(--pp-r-4)); }
.m-afleverbon-voorbeeld .blokkop { margin-top: 0; }
/* de naam van de PDF in de map (B-146) is lang: hij breekt af in plaats van de pagina breder te maken */
.m-afleverbon-voorbeeld > .sub { margin: var(--pp-r-2) 0 0; overflow-wrap: anywhere; }
.m-afleverbon-adres div { line-height: 1.4; }

/* Nieuw: de voorbeelden naast elkaar onder de tabel */
.m-afleverbon-voorbeelden { display: flex; flex-wrap: wrap; gap: var(--pp-r-4); margin: var(--pp-r-2) 0 var(--pp-r-3); }
.m-afleverbon-levmelding:empty { display: none; }

/* het tabblad Afleverbon op de order */
.m-afleverbon-orderkop { display: flex; align-items: center; justify-content: space-between; gap: var(--pp-r-3); flex-wrap: wrap;
  margin-bottom: var(--pp-r-2); }
.m-afleverbon-orderkop p { margin: 0; }

/* smal: de pakbon onder het werk */
@media (max-width: 1180px) {
  .m-afleverbon-werk { grid-template-columns: minmax(0, 1fr); }
  .m-afleverbon-rechts { position: static; }
}

/* ------------------------------------------------------------------ PAPIER: het voorbeeld van de pakbon
   Het blad volgt de pakbon (Afleverbon 26503177 van MultiPress 2026): wit papier, zwarte letters in Helvetica, de titel
   groot en het kader van 2,25 pt (3 px) rondom de opmerkingen. Alles hieronder begint met .m-afleverbon-blad. */
.m-afleverbon-blad {
  flex: 1 1 360px; min-width: 0; max-width: 720px; padding: 22px 28px;
  background: var(--pp-papier); color: var(--pp-papier-tekst); box-shadow: var(--pp-papier-schaduw);
  font-family: Helvetica, Arial, sans-serif; font-size: 12.5px; line-height: 1.45;
}
.m-afleverbon-blad .m-afleverbon-bladregel { white-space: pre-wrap; }
.m-afleverbon-blad .m-afleverbon-bladregel.vet { font-weight: 700; }
.m-afleverbon-blad .m-afleverbon-titel { font-size: 24px; line-height: 1.2; }
.m-afleverbon-blad .m-afleverbon-wit1 { margin-top: 1.2em; }
.m-afleverbon-blad .m-afleverbon-wit2 { margin-top: 2.4em; }
/* op het blad niet de opmaak van de tabellen van het scherm (grijze kop, lijnen, volle breedte) */
.m-afleverbon-blad table { width: auto; margin: 0; border-collapse: collapse; }
.m-afleverbon-blad table.m-afleverbon-bladtabel { width: 100%; }
.m-afleverbon-blad th, .m-afleverbon-blad td {
  background: none; border: 0; color: inherit; font-size: inherit; letter-spacing: normal; text-transform: none;
}
.m-afleverbon-blad .m-afleverbon-velden th { text-align: left; font-weight: 400; padding: 0 28px 0 0; min-width: 110px; }
.m-afleverbon-blad .m-afleverbon-velden td { padding: 0; }
.m-afleverbon-blad .m-afleverbon-bladtabel th { font-weight: 700; text-align: left; padding: 2px 8px 4px 0; }
.m-afleverbon-blad .m-afleverbon-bladtabel td { vertical-align: top; padding: 2px 8px 2px 0; }
.m-afleverbon-blad .m-afleverbon-bladtabel .m-afleverbon-midden { text-align: center; }
.m-afleverbon-blad .m-afleverbon-bladtabel .n { text-align: right; }
/* het kader met de opmerkingen (MP26: 2,25 pt rondom, ook leeg) */
.m-afleverbon-blad .m-afleverbon-kader {
  border: 3px solid var(--pp-papier-tekst); min-height: 3.6em; padding: 6px 10px; white-space: pre-wrap; margin-top: 4px;
}
/* een telefoon: het blad met kleinere marges, de tabel mag opzij schuiven */
@media (max-width: 760px) {
  .m-afleverbon-blad { padding: 14px 12px; font-size: 11px; overflow-x: auto; }
  .m-afleverbon-blad .m-afleverbon-titel { font-size: 20px; }
}