/* public/schermen/stuklijst/stuklijst.css — Inkoop → Sets, het SKU-scherm, Artikelen → Onderdelen en het blok
   Stuklijst (29-09-2026, versie 2). Alleen indeling; kleuren, maten en afstanden komen uit de variabelen van
   bouwdoos.css. */

.sl-scherm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a4); max-width: var(--inhoud-max, none); }
.sl-kop { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: flex-end; justify-content: space-between; }
.sl-sectie { display: grid; gap: var(--a3); }
.sl-sectie h2, .sl-onderdeel h2 { font-size: var(--tekst-titel); margin: 0; display: flex; gap: var(--a2); align-items: baseline; }
.sl-2regels { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* Inkoop → Sets: de lijst van onderdelen, één rij per SKU met afbeelding, cijfers en het signaal. */
.sl-lijst { display: grid; gap: var(--a2); }
.sl-rij { display: grid; grid-template-columns: 48px minmax(180px, 2fr) repeat(4, minmax(72px, 1fr)) minmax(120px, 1.4fr); gap: var(--a3);
  align-items: center; width: 100%; text-align: left; font: inherit; color: var(--tekst); cursor: pointer;
  background: var(--vlak); border: none; border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a2) var(--a3); min-height: var(--rijhoogte); }
.sl-rij:hover, .sl-rij:focus-visible { background: var(--accent-licht); }
.sl-rij-naam { display: grid; gap: 2px; min-width: 0; font-size: var(--tekst-tabel); }
.sl-rij-getal { display: grid; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--tekst-tabel); }
.sl-rij-signaal { display: flex; gap: var(--a1); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1100px) { .sl-rij { grid-template-columns: 48px minmax(0, 1fr) repeat(2, minmax(64px, auto)); } .sl-rij-getal:nth-of-type(4), .sl-rij-getal:nth-of-type(5) { display: none; } .sl-rij-signaal { grid-column: 2 / -1; justify-content: flex-start; } }

/* Het SKU-scherm: het onderdeel bovenaan, dan het voorstel, de splitsorders, afgerond en de geschiedenis. */
.sl-terug { margin-bottom: calc(-1 * var(--a2)); }
.sl-onderdeel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--a4); align-items: start;
  background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a4); }
.sl-onderdeel-foto { display: grid; gap: var(--a1); justify-items: center; }
.sl-onderdeel-foto .bd-mini { width: 96px; height: 96px; }
.sl-onderdeel-tekst { display: grid; gap: var(--a2); }
.sl-onderdeel-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); margin-top: var(--a2); }
.sl-onderdeel-cijfers > div { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.sl-groot { font-size: var(--tekst-kaartgetal); font-weight: 600; }
.sl-handeling { display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; }
.sl-aantal input, .sl-form input, .sl-form select { font-size: var(--tekst-tabel); padding: var(--a1) var(--a2); border: none; border-radius: var(--radius-veld);
  background: var(--achtergrond); color: var(--tekst); min-height: var(--klikdoel); }
.sl-aantal input { width: 88px; text-align: right; }

/* Elk deel onder het onderdeel staat op een eigen wit vlak, met een kop en eventueel een knop rechts. */
.sl-vlak { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a3); background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a4); min-width: 0; }
.sl-vlak-kop { display: flex; gap: var(--a3); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sl-vlak-kop h2 { font-size: var(--tekst-titel); margin: 0; display: flex; flex-wrap: wrap; gap: var(--a2); align-items: baseline; }
.sl-vlak-kop > div { display: grid; gap: 2px; }
.sl-stil { margin: 0; color: var(--tekst-zacht); font-size: var(--tekst-tabel); display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; }
.sl-vul { flex: 1 1 auto; }
/* Lichtblauw: een tweede keuze die wel opvalt (Twan: "Zelf een splitsorder maken" lichtblauw). */
.sl-knop-zacht { background: var(--accent-licht); border-color: var(--accent-licht); color: var(--accent); font-weight: 500; }
.sl-knop-zacht:hover { border-color: var(--accent); }

/* Het voorstel: één zin, een regel per set, en Akkoord / Aanpassen / Weigeren. */
.sl-voorstel-zin { margin: 0; font-size: var(--tekst-voorstel); display: flex; gap: var(--a2); align-items: baseline; flex-wrap: wrap; }
.sl-voorstel-regels { display: grid; gap: var(--a2); }
.sl-voorstel-rij { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--a3); align-items: center; font-size: var(--tekst-tabel); }
.sl-voorstel-rij .bd-mini { width: 44px; height: 44px; }
.sl-voorstel-naam { display: grid; gap: 2px; min-width: 0; }
.sl-voorstel-getal { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.sl-voorstel-getal b { font-size: var(--tekst-voorstel); }
.sl-termijn { position: relative; }
.sl-termijn > summary { list-style: none; cursor: pointer; }
.sl-termijn > summary::-webkit-details-marker { display: none; }
.sl-termijn[open] > .sl-form { position: absolute; right: 0; top: 100%; z-index: 20; min-width: min(520px, calc(100vw - 32px)); box-sizing: border-box;
  background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw-laag); padding: var(--a3); }

/* Splitsorders: een kaart per order met de stappenbalk van de inkooporders. */
.sl-orders { display: grid; gap: var(--a2); }
.sl-rij--order { grid-template-columns: 40px minmax(0, 1fr) auto; }
/* Binnen het vlak "Splitsorders" een order als kader met een lijn; los (Vandaag) als eigen kaart. */
.sl-so { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a3); background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a4); min-width: 0; }
.sl-vlak .sl-so { box-shadow: none; border: 1px solid var(--lijn); }
.sl-so--concept { border-style: dashed; }
.sl-so-kop { display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; }
.sl-so-regels { display: grid; gap: var(--a2); }
.sl-so-rij { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 88px auto; gap: var(--a2); align-items: center; font-size: var(--tekst-tabel); }
.sl-so-rij .bd-mini { width: 36px; height: 36px; }
.sl-so-rij--bewerk { grid-template-columns: 36px minmax(0, 1fr) 88px 88px auto; }
.sl-so-rij--bewerk select { min-width: 0; width: 100%; font-size: var(--tekst-tabel); padding: var(--a1) var(--a2); border: none; border-radius: var(--radius-veld); background: var(--achtergrond); color: var(--tekst); min-height: var(--klikdoel); }
.sl-regel-erbij { justify-self: start; }
@media (max-width: 700px) {
  .sl-so-rij, .sl-so-rij--bewerk { grid-template-columns: 36px minmax(0, 1fr) 88px; }
  .sl-so-rij > :nth-child(n+4), .sl-so-rij--bewerk > :nth-child(n+4) { grid-column: 2 / -1; }
}
.sl-so-rij input { width: 88px; text-align: right; font-size: var(--tekst-tabel); padding: var(--a1) var(--a2); border: none; border-radius: var(--radius-veld); background: var(--achtergrond); min-height: var(--klikdoel); }
.sl-so-knoppen { border-top: 1px solid var(--lijn); padding-top: var(--a2); }
.sl-uitval { display: flex; gap: var(--a1); align-items: center; font-size: var(--tekst-tabel); color: var(--tekst-zacht); }
.sl-uitval input { width: 88px; font-size: var(--tekst-tabel); padding: var(--a1) var(--a2); border: none; border-radius: var(--radius-veld); background: var(--achtergrond); min-height: var(--klikdoel); }
.sl-uitval input[type=text] { width: 160px; }
.sl-scherm .inkoop-stap, .sl-scherm .inkoop-stap-sub, .sl-scherm .inkoop-stap-sub .tag-muted { font-size: var(--tekst-klein); }
/* Afgeronde orders: één regel per order, uitklapbaar tot de hele kaart. */
.sl-afg-lijst { display: grid; }
/* Een lijn tussen de orders (Twan: "wat lijnen om de verschillende orders aan te duiden"). */
.sl-afg { border-top: 1px solid var(--lijn); }
.sl-afg:last-child, .sl-afg-meer > .sl-afg:last-child { border-bottom: 1px solid var(--lijn); }
.sl-afg-meer { border-top: 1px solid var(--lijn); padding-top: var(--a1); }
.sl-afg > summary { display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; cursor: pointer; font-size: var(--tekst-tabel); min-height: var(--klikdoel); padding: var(--a1) 0; }
.sl-afg > summary:hover { background: var(--accent-licht); }
.sl-afg[open] > .sl-so { margin: var(--a1) 0 var(--a2); }
.sl-afg-beeld { display: inline-flex; gap: 2px; width: calc(3 * 32px + 4px); flex: none; }
.sl-afg-beeld .bd-mini { width: 32px; height: 32px; }
.sl-afg-meer > summary { list-style: none; cursor: pointer; }
.sl-afg-meer > summary::-webkit-details-marker { display: none; }
.sl-afg-meer[open] { display: grid; gap: var(--a1); }

/* Het tandwiel van het onderdeel: sets beheren, prijs, locatie, afbeelding. */
.sl-tandwiel { position: relative; align-self: start; }
.sl-tandwiel > summary { list-style: none; cursor: pointer; min-width: var(--klikdoel); text-align: center; font-size: var(--tekst-titel); }
.sl-tandwiel > summary::-webkit-details-marker { display: none; }
/* Eén kolom minmax(0, 1fr): anders rekt het grid mee met de volle breedte van een afgekapte naam. */
.sl-tandwiel-paneel { position: absolute; right: 0; top: 100%; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a2);
  box-sizing: border-box; width: min(640px, calc(100vw - 32px)); max-height: 80vh; overflow: auto;
  background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw-laag); padding: var(--a4); }
@media (max-width: 700px) {
  .sl-tandwiel-paneel { position: fixed; left: 16px; right: 16px; top: 72px; width: auto; }
}
.sl-tandwiel-paneel label { min-width: 0; max-width: 100%; }
.sl-tandwiel-paneel select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.sl-tandwiel-paneel h3 { font-size: var(--tekst-voorstel); margin: var(--a2) 0 0; }
.sl-beheer-rij { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--a2); align-items: center; font-size: var(--tekst-tabel); }
.sl-beheer-rij .bd-mini { width: 36px; height: 36px; }
.sl-beheer-rij form, .sl-beheer-rij > .sl-handeling { grid-column: 1 / -1; }
.sl-beheer-foto { grid-template-columns: 64px minmax(0, 1fr); }
.sl-beheer-foto .bd-mini { width: 64px; height: 64px; }
.sl-beheer-foto > span { display: grid; gap: var(--a1); }
.sl-onderdeel-foto .sl-upload { font-size: var(--tekst-klein); }

/* Het menu "…": minder vaak gebruikte handelingen, uitgeklapt onder de knop. */
.sl-menu { position: relative; }
.sl-menu > summary { list-style: none; cursor: pointer; min-width: var(--klikdoel); text-align: center; }
.sl-menu > summary::-webkit-details-marker { display: none; }
.sl-menu-paneel { position: absolute; right: 0; top: 100%; z-index: 20; display: grid; gap: var(--a2); min-width: 300px;
  background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw-laag); padding: var(--a3); }
.sl-upload { cursor: pointer; }

/* Formulieren: invoer → keuze → actie op één rij waar het past. */
.sl-form { display: grid; gap: var(--a2); font-size: var(--tekst-tabel); }
.sl-form label { display: grid; gap: var(--a1); color: var(--tekst-zacht); }
.sl-form--rij { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: flex-end; }
.sl-form--rij label { display: flex; gap: var(--a1); align-items: center; }
.sl-toevoegen { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3) var(--a4); }
.sl-toevoegen select { max-width: 420px; }

/* Geschiedenis en boekingen. */
.sl-hist-lijst, .sl-boekingen { list-style: none; margin: var(--a2) 0 0; padding: 0; display: grid; gap: var(--a1); font-size: var(--tekst-tabel); }
.sl-hist-lijst li, .sl-boekingen li { display: grid; grid-template-columns: 96px auto 1fr; gap: var(--a2); align-items: center; }
.sl-boekingen li { grid-template-columns: 96px 1fr auto; }
.sl-plus { color: var(--goed-tekst); font-variant-numeric: tabular-nums; }
.sl-min { color: var(--tekst); font-variant-numeric: tabular-nums; }

/* Artikelen → Onderdelen: dezelfde rijkaarten, zes kolommen. */
.sl-rij--artikel { grid-template-columns: 48px minmax(180px, 2fr) repeat(4, minmax(72px, 1fr)); }
/* Bijschriften in kaarten minimaal 12 px (sectie 9; bd-kaart-label is elders 11 px). */
.sl-scherm .bd-kaart-label, .sl-pv .bd-kaart-label, .sl-scherm .bd-pil, .sl-pv .bd-pil { font-size: var(--tekst-klein); }

/* Het blok Stuklijst op de productpagina. */
.sl-pv { display: grid; gap: var(--a2); }
.sl-pv h4 { display: flex; gap: var(--a2); align-items: center; }
.sl-pv-onderdeel { display: flex; gap: var(--a2); align-items: center; text-align: left; font: inherit; color: var(--tekst); background: none; border: none; padding: 0; cursor: pointer; }
.sl-pv-onderdeel > span { display: grid; gap: 2px; }
.sl-aanv { display: inline-flex; gap: var(--a1); align-items: center; }
.sl-aanv .bd-mini { width: 24px; height: 24px; }

/* Meldingen rechtsonder, boven alles. */
.sl-meldingen { position: fixed; right: var(--a4); bottom: var(--a4); z-index: 9000; display: grid; gap: var(--a2); max-width: 520px; }
.sl-meldingen .bd-melding { box-shadow: var(--schaduw-laag); margin: 0; }
@media (prefers-reduced-motion: no-preference) { .sl-meldingen .bd-melding { animation: sl-in .2s ease-out; } }
@keyframes sl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Smal (telefoon): alles onder elkaar, niets breder dan het scherm. */
@media (max-width: 700px) {
  .sl-onderdeel { grid-template-columns: minmax(0, 1fr) auto; }
  .sl-onderdeel-foto { grid-column: 1 / -1; justify-items: start; grid-row: 1; }
  .sl-onderdeel-tekst { grid-column: 1; }
  .sl-onderdeel-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-vlak, .sl-onderdeel, .sl-so { padding: var(--a3); }
  .sl-scherm .inkoop-tijdlijn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a2); }
  .sl-voorstel-rij { grid-template-columns: 44px minmax(0, 1fr); }
  .sl-voorstel-getal { grid-column: 2; text-align: left; }
  .sl-hist-lijst li { grid-template-columns: auto minmax(0, 1fr); }
  .sl-hist-lijst li > span:last-child { grid-column: 1 / -1; }
  .sl-rij, .sl-rij--artikel { grid-template-columns: 48px minmax(0, 1fr); }
  .sl-rij > .sl-rij-getal { display: none; }
  .sl-rij > .sl-rij-signaal { grid-column: 2; justify-content: flex-start; }
  .sl-rij--order { grid-template-columns: 40px minmax(0, 1fr); }
  .sl-uitval input[type=text] { width: 100%; }
}