/* Copyright (c) 2026 Rajesh Krishnasing. Alle rechten voorbehouden. */
/* PrimaPress, module orders: alleen de indeling van de eigen schermen (klassen m-orders-...), met de tokens van de laag
 * betekenis (tokens.css). Knoppen, tabellen, velden, merkjes, meldingen, de feitenbalk en de stappen komen uit app.css. */

/* een datum met iets ernaast (de weekdag, de tijd, de knop Voorstel) */
.m-orders-datum { display: flex; flex: 1 1 auto; align-items: center; gap: var(--pp-r-2); flex-wrap: wrap; min-width: 0; }
.m-orders-datum input.datumvak { flex: 0 1 140px; min-width: 0; }
.m-orders-datum .vinkje { margin: 0; }
.m-orders-datum .m-orders-tijd { flex: 0 0 76px; }
.m-orders-weekdag { min-width: 2ch; white-space: nowrap; }

/* de klant in de titelbalk: een naam kort in met een beletselteken */
.m-orders-klant { min-width: 0; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-orders-toetsen { display: inline-flex; align-items: center; gap: var(--pp-r-1); white-space: nowrap; }

/* een lopende order waarvan de leverdatum voorbij is (de gekozen regel houdt de kleur van de gekozen regel) */
.zoektabel tr.m-orders-te-laat td { color: var(--pp-fout-tekst); }
.zoektabel tr.m-orders-te-laat.gekozen td { color: var(--pp-gekozen-tekst); }

/* de kop van de order: de derde kolom (de datums met weekdag en tijd) iets breder, zodat elke datum op een regel past;
 * alleen op een breed scherm (smaller volgt het raster van app.css: twee kolommen, op een telefoon een) */
@media (min-width: 1181px) {
  .raster-invoer.raster-3.m-orders-kopraster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* een melding in de meldingrij staat op een regel: de kop, de knop en de eerste zin naast elkaar (DESIGNSYSTEEM.md
 * 7.7: de tabbladen en de eerste suborders blijven in beeld); de knop achter de kop toont alles */
.m-orders-kort > .tekst { display: flex; align-items: baseline; gap: var(--pp-r-2); min-width: 0; }
.m-orders-kort > .tekst > .m-orders-meer { flex: none; }
.m-orders-kort > .tekst > strong { flex: 0 1 auto; max-width: 60%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-orders-kort > .tekst > ul, .m-orders-kort > .tekst > .tekstblok { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.m-orders-kort li:nth-child(n+2) { display: none; }
.m-orders-kort li, .m-orders-kort .tekstblok { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-orders-meer { margin-left: var(--pp-r-1); }

/* de kop van de order iets dichter op elkaar (twee regels Suborders boven de knoppenrij op 1440 bij 900) */
.m-orders-kopraster .rkolom { gap: var(--pp-r-1); }

/* de werkstappen van de offerteknop in de kop (W3-ui, B-09 en B-147): elke stap zo breed als zijn naam, de lijntjes
 * vullen de rest; past het niet, dan schuift de rij opzij */
.stappen.m-orders-werkstappen { position: relative; margin: 0 0 var(--pp-r-2); overflow-x: auto; scrollbar-width: none; }
.stappen.m-orders-werkstappen::-webkit-scrollbar { display: none; }
.stappen.m-orders-werkstappen li { flex: 0 0 auto; }
.stappen.m-orders-werkstappen li:not(:last-child) { flex: 1 0 auto; }

/* het blok MP Status in het venster Status, en de map in Prindustry op het tabblad Workflow */
.m-orders-mp { margin-top: var(--pp-r-3); }
.m-orders-kandidaten { display: inline-flex; flex-wrap: wrap; gap: var(--pp-r-1); }
.m-orders-prindustry-map { display: flex; align-items: center; gap: var(--pp-r-2); margin: 0 0 var(--pp-r-3); }

/* het venster Order maken */
.m-orders-keuzetabel td { vertical-align: top; }
.m-orders-keuzetabel select { max-width: 340px; }
.m-orders-uitkomst { margin: var(--pp-r-3) 0; }
.m-orders-totaal { margin: var(--pp-r-2) 0; }

/* het venster Status: de meldingen van de controle met een reden per melding, en Bericht aan de klant */
.m-orders-controles > *, .m-orders-bericht > * { margin-top: var(--pp-r-2); }
.m-orders-controles li { margin: var(--pp-r-2) 0; }
.m-orders-controles input { width: 100%; max-width: 520px; margin-top: var(--pp-r-1); }

/* het tabblad Workflow: de submappen (Fonts, Beelden, Proef PDF) in hun hoofdmap */
.m-orders-submappen { display: grid; gap: var(--pp-r-2); margin-top: var(--pp-r-3); }
.map.m-orders-submap { padding: var(--pp-r-2) var(--pp-r-3); }
.m-orders-uitleg { margin: var(--pp-r-1) 0 0; }

/* de telling boven de afleveradressen, Vorige en Volgend, de mailknop naast E-mail */
.m-orders-telling { margin: var(--pp-r-1) 0; }
.m-orders-blader { display: flex; gap: var(--pp-r-2); align-items: center; }
.m-orders-mail { display: flex; gap: var(--pp-r-2); align-items: center; min-width: 0; }
.m-orders-mail input { flex: 1 1 auto; min-width: 0; }
.m-orders-mail a[aria-disabled="true"] { pointer-events: none; }
.m-orders-bijwerken td { vertical-align: top; }

/* een suborder op een regel: het product, daarachter de contactpersoon en de producent */
.m-orders-regel { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--pp-r-2); }