/* ============================================================================
   Zaaglab — app.css
   Scherm-specifieke stijl voor het rekenscherm. Alle kleuren via de tokens uit
   design-tokens.css; alleen het zandkleurige paneel en de afval-arcering zijn
   lokale materiaalkleuren (decoratief, geen merk-token).
   ============================================================================ */

:root {
  --panel-fill:   #F1E7CD;  /* licht zandkleurig houtpaneel */
  --panel-stroke: #D8C293;
  --waste-line:   #DBE0E8;  /* lichte arcering = afval */
  --rest-color:   var(--green-600);  /* bruikbaar reststuk */
  --nerf-line:    #C9AE74;  /* houtnerf in een paneel */
}

/* Het hidden-attribuut moet altijd winnen, ook van display:flex/inline-flex. */
[hidden] { display: none !important; }

/* Geavanceerde functies: alleen tonen als de modus 'Geavanceerd' aan staat. */
body:not(.geavanceerd) .alleen-geavanceerd { display: none !important; }
/* Hint naar Geavanceerd (nerf/kantenband) alleen tonen in Standaard. */
body.geavanceerd #ond-adv-hint { display: none; }

/* Het instellingen-paneel hergebruikt de modal-stijl van de bibliotheek. */
.inst-body { padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Actiebalk met meerdere knoppen */

/* Print-kop (alleen op de afdruk zichtbaar) */
.print-kop { display: none; margin-bottom: var(--space-2); padding-bottom: var(--space-3); border-bottom: 2px solid var(--amber-600); }
.print-kop-titel { display: flex; align-items: baseline; gap: var(--space-2); }
.print-logo { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--navy-700); font-size: 20px; }
#print-naam { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 20px; color: var(--text-strong); }
.print-kop-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* Topbar-acties en kop */
.topbar-acties { display: flex; align-items: center; gap: var(--space-2); }
.topbar-ghost { color: rgba(255,255,255,.85); }
.topbar-ghost:hover { color: #fff; filter: none; text-decoration: underline; }

/* Eén projectbalk: titel + status links, modus + acties rechts. De titel groeit,
   zodat modus-toggle en werkbalk naar rechts worden geduwd (space-between-effect
   met drie kinderen). Op mobiel valt titel-rij op volle breedte en wrapt de rest. */
.kop { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.kop > .titel-rij { flex: 1 1 auto; min-width: 0; }
.kop #project-naam { font-size: var(--text-h2); }
/* ── Projectactie-balk (design system: toolbar) ───────────── */
.project-acties { margin: 0; }
/* Werkruimte stapelt met één rustig ritme; verborgen kinderen (alarm, doel-keuze)
   tellen niet mee, dus geen loze gaten. */
#zaag-werkruimte { display: flex; flex-direction: column; gap: var(--space-4); }
.toolbar { display: flex; align-items: center; gap: var(--space-3); }
.toolbar .group { display: flex; align-items: center; gap: var(--space-2); }
.toolbar .spacer { flex: 1; }
.toolbar .divider { width: 1px; align-self: stretch; background: var(--border-default); margin: 2px var(--space-1); }

.tbtn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 42px; padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--white); color: var(--text-strong);
  font-family: var(--font-body); font-size: 15px; font-weight: var(--weight-semibold);
  cursor: pointer; transition: background .12s var(--ease-out), border-color .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.tbtn:hover { background: var(--surface-sunken); }
.tbtn svg { color: var(--text-muted); }
.tbtn:hover svg { color: var(--teal-700); }

.tbtn--primary { background: var(--color-primary); border-color: transparent; color: #fff; }
.tbtn--primary svg { color: #fff; }
.tbtn--primary:hover { background: var(--color-primary-hover); }
.tbtn--primary:hover svg { color: #fff; }

.tbtn--lead { padding-right: var(--space-3); }
.tbtn .chev { color: var(--text-muted); }

.tbtn--icon { width: 42px; padding: 0; justify-content: center; }
.tbtn--icon svg { color: var(--text-muted); }

/* Overflow-menu (mobiel) */
.menu-wrap { position: relative; }
.menu-wrap--overflow { display: none; } /* het ⋯-menu: alleen op smal scherm */
.menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px;
  background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-2); z-index: 30;
}
.menu[hidden] { display: none; }
.menu button {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  height: 44px; padding: 0 var(--space-3); border: none; background: none; cursor: pointer;
  border-radius: var(--radius-sm); text-align: left;
  font-family: var(--font-body); font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-strong);
}
.menu button:hover, .menu button:focus-visible { background: var(--surface-sunken); outline: none; }
.menu button svg { color: var(--text-muted); flex: none; }
.menu hr { border: none; border-top: 1px solid var(--border-default); margin: var(--space-2) var(--space-1); }

/* Smal scherm: alleen Projecten + Nieuw; de rest naar het ⋯-menu. */
@media (max-width: 639px) {
  .toolbar .tb-breed { display: none; }
  .menu-wrap--overflow { display: block; }
  .tbtn--projecten { flex: 1; }
  .tbtn--projecten .chev { margin-left: auto; }
  .tbtn--nieuw { width: 42px; padding: 0; justify-content: center; } /* compact naast Projecten */
  .tbtn--nieuw .tbtn__label { display: none; }
}
.btn--klein { min-height: 38px; padding: 0 14px; font-size: 14px; }

/* ── Hoofdnavigatie: Zaagschema ⇄ Kastontwerp ──────────────── */
/* Desktop: segmented switch centraal, identiteit links (groeit), acties rechts. */
.topbar-start { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.topbar .logo { flex: none; }
.topbar-eind { flex: 1; display: flex; align-items: center; justify-content: flex-end; }

/* Projectidentiteit als ingetogen breadcrumb in de lege linkerzone. */
.tb-divider { width: 1px; height: 22px; background: rgba(255,255,255,.18); flex: none; }
.proj-crumb { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.proj-crumb__map { color: rgba(255,255,255,.5); flex: none; }
.topbar #project-naam {
  font-family: var(--font-body); font-size: 15px; font-weight: var(--weight-medium);
  color: rgba(255,255,255,.92); letter-spacing: 0; cursor: text;
  max-width: 30ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: var(--radius-sm);
}
.topbar #project-naam:hover { color: #fff; }
.topbar #project-naam:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
/* Opslag-teken: klein vinkje in plaats van het woord "Bewaard". */
.topbar .opslag-status { color: rgba(255,255,255,.55); font-size: 0; gap: 0; }
.topbar .opslag-status::before { content: '✓'; font-size: 13px; }
/* Hernoem-invoerveld leesbaar op de donkere balk. */
.topbar .titel-input { font: inherit; font-size: 15px; font-weight: var(--weight-medium); color: #fff; border-bottom-color: rgba(255,255,255,.7); }
/* Project ▾-knop: omrande ghost-knop zoals de ≡- en taal-knop, zodat direct zichtbaar
   is dat het een knop is (was een kale, bijna onzichtbare caret). */
.proj-chev { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-full); background: transparent; color: rgba(255,255,255,.9); cursor: pointer; }
.proj-chev svg { flex: none; }
.proj-chev:hover, .proj-chev[aria-expanded="true"] { background: rgba(255,255,255,.14); color: #fff; }
/* Project-menu: witte dropdown, links uitgelijnd onder de breadcrumb. */
.proj-menu { left: 0; right: auto; min-width: 218px; }
.proj-menu__modus { padding: 2px 6px 6px; }
.proj-menu__modus .modetoggle { width: 100%; display: flex; }
.proj-menu__modus .modetoggle button { flex: 1; }
/* Ghost-actieknop op de donkere balk (Exporteren): enige zichtbare project-actie. */
.tb-navbtn { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 14px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-full); background: transparent; color: rgba(255,255,255,.92); font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-semibold); cursor: pointer; }
.tb-navbtn:hover { background: rgba(255,255,255,.14); color: #fff; }
.tb-navbtn svg { color: currentColor; }
.tb-navbtn .chev { opacity: .75; }
/* Mobiel: modus-switch is verborgen (zit in de onderbalk), dus de balk wordt ruimer.
   Export als icoon, projectnaam korter. */
@media (max-width: 639px) {
  .tb-divider { display: none; }
  /* Exporteren blijft op mobiel in de balk, maar als icoon (label + caret weg) zodat
     export vindbaar is waar je 'm verwacht. Het menu opent als bottom-sheet. */
  .topbar #btn-export { width: 34px; padding: 0; justify-content: center; }
  .topbar #btn-export .tb-navbtn__label, .topbar #btn-export .chev { display: none; }
  /* Woordmerk wijkt op mobiel voor de projectnaam (identiteit > merk op de tool). */
  .topbar .logo { display: none; }
  /* Rechter-cluster op contentbreedte i.p.v. flex:1, zodat de naam de rest krijgt
     (flex:1 op beide zou een 50/50-split forceren en de naam wegdrukken). */
  .topbar-eind { flex: none; }
  .topbar #project-naam { max-width: 60vw; }
}
.modus-switch { display: inline-flex; gap: 3px; padding: 4px; background: rgba(255,255,255,.10); border-radius: var(--radius-full); }
.modus-switch .ms-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border: none; background: transparent; border-radius: var(--radius-full); cursor: pointer;
  color: rgba(255,255,255,.78); font: var(--weight-semibold) 14px var(--font-body);
}
.modus-switch .ms-tab:hover { color: #fff; }
.modus-switch .ms-tab svg { color: rgba(255,255,255,.7); }
.modus-switch .ms-tab[aria-current="page"] { background: #fff; color: var(--navy-700); }
.modus-switch .ms-tab[aria-current="page"] svg { color: var(--color-primary); }
.modus-switch .ms-tab[data-modus="kast"][aria-current="page"] svg { color: var(--amber-700); }

/* Bereken: nette teal-knop (geen oranje balk). Desktop in de flow, gecentreerd. */
.berekenbar { padding: var(--space-3) var(--space-4); }
.berekenbar .btn { max-width: 360px; margin: 0 auto; }

/* ── Kastontwerp: galerij + voorbeeld ──────────────────────── */
.kast-kop { margin-bottom: var(--space-4); }
.kast-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.kast-kop-acties { display: inline-flex; align-items: center; gap: var(--space-1); }
.kast-kop-acties .btn--icon { padding: 0; width: 36px; justify-content: center; }
.kast-kop-acties .btn:disabled { opacity: 0.4; cursor: default; }
.kast-deuren-toggle { display: inline-flex; align-items: center; gap: 6px; }
.kast-deuren-toggle svg { display: block; }
.kast-deuren-toggle[aria-pressed="false"] { background: var(--teal-50); border-color: var(--teal-500); color: var(--teal-700); }
.kast-titel { font-size: 22px; }
.kast-sub { color: var(--text-muted); margin-top: var(--space-2); max-width: 52ch; }
.kast-galerij { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 560px) { .kast-galerij { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .kast-galerij { grid-template-columns: repeat(4, 1fr); } }
.kast-tpl {
  display: flex; flex-direction: column; gap: var(--space-2); text-align: left; padding: var(--space-3); cursor: pointer;
  background: var(--white); border: 1.5px solid var(--border-default); border-radius: var(--radius-lg);
  transition: border-color .12s var(--ease-out), box-shadow .12s var(--ease-out), transform .06s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .kast-tpl:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
}
.kast-tpl:active { transform: translateY(0); }
.kast-tpl:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--teal-100); }
/* Eigen (bewaarde) sjablonen: kaart met een eigen kies-knop + verwijderknop in de hoek. */
.kast-tpl--eigen { position: relative; padding: 0; }
.kast-tpl-kies { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; width: 100%; padding: var(--space-3); background: transparent; border: none; border-radius: var(--radius-lg); cursor: pointer; font: inherit; color: inherit; }
.kast-tpl-kies:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-100); }
.kast-tpl-weg { position: absolute; top: 8px; right: 8px; z-index: 1; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); background: var(--white); border-radius: var(--radius-md); color: var(--text-muted); cursor: pointer; }
.kast-tpl-weg:hover { color: var(--color-danger, #c0392b); border-color: var(--color-danger, #c0392b); }
.kast-tpl-weg svg { width: 16px; height: 16px; }
.kast-thumb { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-2); display: flex; align-items: center; justify-content: center; }
/* Het model vult de voorbeeld-canvas i.p.v. klein te zweven. */
.kast-thumb svg { width: 100%; height: 76px; max-height: 76px; }
/* Eigen-sjabloon-preview toont de echte kasttekening; bemating/handles/randen weglaten. */
.kast-tpl--eigen .kast-thumb svg { max-height: 64px; }
.kast-tpl--eigen .kast-thumb .kast-handles, .kast-tpl--eigen .kast-thumb .kast-randen,
.kast-tpl--eigen .kast-thumb .kast-maat, .kast-tpl--eigen .kast-thumb text { display: none !important; }
.kast-nm { font: var(--weight-semibold) 14px var(--font-body); color: var(--text-strong); }
.kast-ds { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
/* thumbnail-vlakken, op de --kast-* tokens */
.kast-thumb .crc { fill: var(--kast-carcass); stroke: var(--kast-deel-lijn); stroke-width: 3.5; stroke-linejoin: round; }
.kast-thumb .in { fill: var(--kast-binnen); }
.kast-thumb .ln { stroke: var(--kast-deel-lijn); stroke-width: 3.5; stroke-linecap: round; }
.kast-thumb .dr { fill: var(--kast-deur-vlak); stroke: var(--kast-deur-lijn); stroke-width: 2.5; }
.kast-thumb .ld { fill: var(--kast-lade-vlak); stroke: var(--kast-lade-lijn); stroke-width: 2.5; }
.kast-thumb .rd { stroke: var(--kast-roede); stroke-width: 3; stroke-linecap: round; }
/* 2D voor-aanzicht (tekening) */
.kast-stage { padding: var(--space-3); position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.kast-werkbalk { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.kast-wb-eind { display: inline-flex; align-items: center; gap: var(--space-1); }
.kast-stage .kast-palette { margin: 0; }
.kast-stage .kast-tekening { flex: 1; }

/* Volledig scherm */
.kast-stage.is-fs {
  position: fixed; inset: 0; z-index: 80; max-width: none; border-radius: 0;
  padding: var(--space-3) var(--space-4); background: var(--surface-card); margin: 0;
}
.kast-stage.is-fs .kast-tekening { background: none; padding: 0; }
.kast-stage.is-fs .kast-tekening svg { max-width: 94vw; max-height: 82vh; }
body.kast-fs { overflow: hidden; }
/* Canvas-vlak: de tekening ligt op een subtiel verzonken vlak met rand-padding, zodat de
   kast "op een werkblad" ligt en het vlak gevuld oogt, ongeacht de kastverhouding. */
.kast-tekening { display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); border-radius: var(--radius-lg); padding: var(--space-4); }
/* Vul de breedte (caps op hoogte, niet op een vaste pixelbreedte) zodat horizontale ruimte
   benut wordt; de hoogte-cap voorkomt dat de tekening de viewport overstroomt. */
.kast-tekening svg { width: 100%; max-width: 100%; height: auto; max-height: 60vh; display: block; touch-action: none; }
.kast-handle:hover circle:nth-of-type(2) { filter: brightness(0.97); }
.kast-handle:active { cursor: grabbing; }
/* Twee-koloms editor op desktop: tekening links, constructie + feedback rechts. */
.kast-editor { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.kast-editor-main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.kast-editor-zij { display: flex; flex-direction: column; gap: var(--space-4); }
/* Rond 1000-1100px voelt de kastontwerper krap: extra horizontale ademruimte + iets
   meer ruimte tussen de twee kolommen. */
@media (min-width: 960px) and (max-width: 1180px) {
  .kast-editor, .two-col { padding-inline: var(--space-2); }
  .kast-editor { gap: var(--space-5); }
}
@media (min-width: 920px) {
  .kast-editor { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  /* Tekening blijft in beeld terwijl je het constructie-paneel rechts doorscrolt. */
  .kast-editor-main { position: sticky; top: var(--space-3); align-self: start; }
  .kast-tekening svg { max-width: 100%; max-height: 64vh; }
}

/* Vanaf 1024px: de per-vak-acties (#kast-palette) staan NAAST de tekening i.p.v. eronder.
   Zo blijven de actieknoppen in beeld (vielen eerder onder de vouw doordat ze onder een
   grote, sticky tekening hingen) en wordt de horizontale ruimte benut. De DOM blijft gelijk;
   we leggen het 'voor'-paneel alleen anders uit met grid-areas. Onder 1024px: gestapeld,
   palette onder de tekening (zoals op mobiel). */
@media (min-width: 1024px) {
  .kast-pane[data-pane="voor"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 176px;
    grid-template-areas: "werkbalk werkbalk" "tekening palette";
    column-gap: var(--space-4);
    align-items: start;
  }
  .kast-pane[data-pane="voor"] > .kast-werkbalk { grid-area: werkbalk; }
  .kast-pane[data-pane="voor"] > .kast-tekening { grid-area: tekening; }
  .kast-pane[data-pane="voor"] > .kast-palette {
    grid-area: palette; flex-direction: column; align-items: stretch; margin: 0;
  }
  .kast-pane[data-pane="voor"] > .kast-palette .kast-chip { flex: 0 0 auto; }
  .kast-pane[data-pane="voor"] > .kast-palette .kast-pal-hint { flex-basis: auto; margin: 0 0 4px; }
  .kast-pane[data-pane="voor"] > .kast-palette .kast-pal-kop { flex-basis: auto; }
  .kast-pane[data-pane="voor"] > .kast-palette .kast-pal-div { flex-basis: auto; }
}

/* Compacte maatrij bovenaan (Hoogte/Breedte/Diepte/Dikte) */
.kast-mat-rij { display: flex; gap: 6px; align-items: center; }
.kast-mat-rij .select { flex: 1; min-width: 0; }
.kast-mat-rij .btn { flex: none; }
.kast-maatrij { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kast-maatrij .field { flex: 1 1 0; min-width: 72px; }
.kast-maatrij .field label { font-size: 12px; }
.kast-maatrij .control, .kast-maatrij .input { width: 100%; min-width: 0; }

/* Inklapbaar constructie-paneel */
.kast-paneel-kop {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--text-strong);
}
.kast-klap-chev { transition: transform .15s var(--ease-out); color: var(--text-muted); flex: none; }
.kast-paneel:not(.is-open) .kast-klap-chev { transform: rotate(-90deg); }
.kast-paneel-body { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.kast-paneel:not(.is-open) .kast-paneel-body { display: none; }
/* Lade-/deur-constructie subsecties in het Constructie-paneel */
.kast-cgroep { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.kast-cgroep-kop { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.kast-veldrij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.kast-veldlijst { display: flex; flex-direction: column; gap: var(--space-3); }
.kast-veldlijst .field--klein label { font-size: 13px; color: var(--text-strong); }
.kast-veldlijst .control { max-width: 160px; }
.field--klein label { font-size: 12px; color: var(--text-muted); }
.field--klein .control { margin-top: 2px; }
.veld-hint { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.35; margin: 1px 0 3px; }
/* Gelabeld, interactief lade-schema */
.lade-schema { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle, #faf8f3); }
.lade-clbl { font: 600 9px var(--font-mono); fill: var(--speling-label); }
.lade-dlbl { font: 600 9px var(--font-body); fill: var(--text-muted); }
.lade-schema .part { transition: opacity .15s var(--ease-out); }
.lade-schema.focusing .part { opacity: .32; }
.lade-schema.focusing .part.hot { opacity: 1; }
.lade-schema .hot .hl { stroke: var(--amber-600) !important; stroke-width: 3 !important; }
.lade-schema .hot .hlf { fill: var(--amber-50) !important; }
.lade-schema.flits { animation: ladeFlits .3s var(--ease-out); }
@keyframes ladeFlits { 0%,100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 3px var(--teal-100); } }
/* Instelling-rij: label links, control rechts; brede segmenten wrappen eronder */
.kast-veld-rij { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); min-height: 40px; flex-wrap: wrap; }
.kast-veld-rij > label { font-size: 13px; color: var(--text-strong); font-weight: 500; }
.kast-veld-rij .seg { margin-left: auto; }
/* Live bakbreedte-resultaat */
.lade-result { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-1) 0; padding: var(--space-2) var(--space-3); background: var(--teal-50); border-radius: var(--radius-md); }
.lade-result-big { font: 700 17px var(--font-mono); color: var(--teal-700); font-variant-numeric: tabular-nums; }
.lade-result-lbl { font-size: 12px; color: var(--teal-700); }
/* Stepper voor aantal laden */
.lade-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.lade-stepper button { width: 40px; height: 40px; border: none; background: var(--white); cursor: pointer; font-size: 18px; color: var(--text-strong); }
.lade-stepper button:hover { background: var(--surface-sunken, var(--teal-50)); }
.lade-stepper-val { min-width: 40px; text-align: center; font: 600 15px var(--font-mono); }
/* Handmatige hoogtevelden */
.lade-hoogtes { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.lade-hgrij { display: flex; align-items: center; gap: var(--space-2); }
.lade-hg-nr { width: 54px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.lade-hgrij .control { flex: 1; display: flex; align-items: center; gap: 6px; }
.lade-hgrij .control input { flex: 1; min-width: 0; }
.lade-hgrij .control.is-ro input { background: var(--surface-sunken, var(--teal-50)); color: var(--text-muted); }
.lade-hg-rest { font-size: 11px; color: var(--text-muted); }
.kast-fijn { margin-top: var(--space-1); }
.kast-fijn > summary { cursor: pointer; font-size: 12px; font-weight: var(--weight-semibold); color: var(--teal-700); padding: 4px 0; list-style: revert; }
.kast-fijn[open] > summary { margin-bottom: var(--space-2); }
.kast-panelen-klap { margin-top: var(--space-2); }
.kast-panelen-klap > summary { cursor: pointer; font-size: 13px; color: var(--text-muted); padding: var(--space-1) 0; list-style: revert; }
.kast-naarzaag { width: 100%; margin-top: var(--space-3); }

/* Live feedback (K7b): panelen, platen, afval */
.kast-feedback:empty { display: none; }
.kast-feedback {
  display: flex; gap: var(--space-2); margin: var(--space-2) 0 0;
}
.kast-fb-item {
  flex: 1; min-width: 0; text-align: center;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-2) 2px;
  display: flex; flex-direction: column; gap: 1px;
}
.kast-fb-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: var(--weight-semibold); color: var(--text-strong); }
.kast-fb-lbl { font-size: 11px; color: var(--text-muted); }
.kast-fb-item--leeg .kast-fb-num { color: var(--text-muted); }

/* K12: klein zij-aanzicht */
.kast-zij-wrap { display: flex; justify-content: center; }
.kast-zij { width: 100%; max-width: 220px; height: auto; max-height: 46vh; display: block; }

/* Aanzicht-tabs (Voor/Zij/3D) boven de hoofdtekening. */
.kast-atabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunken, #eef0f4); border-radius: 999px; margin-bottom: var(--space-3); }
.kast-atab { appearance: none; border: 0; background: transparent; color: var(--text-muted); font: 600 13px var(--font-body); padding: 7px 16px; min-height: 36px; border-radius: 999px; cursor: pointer; }
.kast-atab[aria-selected="true"] { background: var(--white); color: var(--text-strong); box-shadow: var(--shadow-sm); }
.kast-pane[hidden] { display: none; }

/* 3D-aanzicht kast (axonometrie). */
.kast3d-werkbalk { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
/* 'Nummers' is een weergave-toggle; duw de camerahoek-knoppen visueel apart. */
.kast3d-werkbalk [data-3d-nummers] { margin-inline-end: auto; }
.kast3d-tbtn { appearance: none; border: 1px solid var(--border-strong); background: var(--white); color: var(--text-strong); font: 600 12px var(--font-body); padding: 6px 12px; min-height: 36px; border-radius: var(--radius-md); cursor: pointer; }
.kast3d-tbtn[aria-pressed="true"] { border-color: var(--color-primary); color: var(--teal-700, var(--color-primary)); background: var(--teal-50, #eaf6f6); }
.kast3d-tbtn--icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; padding: 6px; }
/* Draai-segment: links/rechts draaien + beginstand als één rustige groep (één lijn, gedeelde randen). */
.kast3d-seg { display: inline-flex; }
.kast3d-seg .kast3d-tbtn { border-radius: 0; border-inline-width: 0; }
.kast3d-seg .kast3d-tbtn:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); border-inline-start-width: 1px; }
.kast3d-seg .kast3d-tbtn:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); border-inline-end-width: 1px; }
.kast3d-seg .kast3d-tbtn + .kast3d-tbtn { border-inline-start: 1px solid var(--border-strong); }
/* Declutter-chips (Alles / Carcass / Planken / Fronten). */
.kast3d-groepen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.kast3d-groepen:empty { display: none; }
.k3d-chip { appearance: none; border: 1px solid var(--border-default, #d8dbe2); background: var(--surface-sunken, #f1f3f7); color: var(--text-muted); font: 600 12px var(--font-body); padding: 5px 12px; min-height: 32px; border-radius: 999px; cursor: pointer; }
.k3d-chip[aria-pressed="true"] { border-color: var(--color-primary); color: var(--white); background: var(--color-primary); }
/* Hoogte-cap zodat de 3D-werkbalk (boven) en de explode-slider (onder) samen met het model in
   beeld blijven; zonder cap werd de tekening op een brede kolom te hoog en vielen de knoppen weg. */
/* 3D-stage: WebGL-canvas met een SVG-overlay erbovenop voor de nummer-badges en explode-lijnen
   (de overlay vangt geen muis, zodat draaien/klikken op het canvas blijft werken). */
.kast3d-stage { position: relative; }
.kast3d-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* Koel lichtgrijs radiaal verloop zodat de witte melaminekast en het warme berken allebei loskomen
   van de pagina (canvas zelf is transparant, dit verloop schijnt erdoorheen). */
.kast3d-svg { width: 100%; height: 56vh; max-height: 56vh; display: block; touch-action: none; border-radius: var(--radius-sm); background: radial-gradient(ellipse at 50% 42%, #EDEFF1 0%, #E3E6EB 76%, #DBDFE6 100%); }
.kast3d-svg:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.kast3d-bar { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.kast3d-eind { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.kast3d-val { font-family: var(--font-mono); font-size: 12px; color: var(--text-strong); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.kast3d-bar input[type=range] { flex: 1; min-width: 0; height: 6px; -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 999px;
  background: linear-gradient(var(--color-primary), var(--color-primary)) no-repeat, var(--border-default, #d8dbe2); background-size: var(--fill, 0%) 100%; }
.kast3d-bar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 2px solid var(--color-primary); box-shadow: var(--shadow-sm); cursor: pointer; }
.kast3d-bar input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 2px solid var(--color-primary); cursor: pointer; }
/* Genummerde onderdelenlijst onder het 3D-aanzicht (tekst-equivalent + isoleren). */
.kast3d-lijst { margin-top: var(--space-3); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.k3d-rij { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; appearance: none; border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); padding: 5px 8px; min-height: 34px; cursor: pointer; color: var(--text-strong); }
.k3d-rij:hover, .k3d-rij.on, .k3d-rij:focus-visible { border-color: var(--border-default, #d8dbe2); background: var(--surface-sunken, #f4f6f9); outline: none; }
.k3d-rij.on { border-color: var(--color-primary); }
.k3d-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--navy-700); color: #fff; font: 700 11px var(--font-mono); display: inline-flex; align-items: center; justify-content: center; }
.k3d-sw { flex: none; width: 14px; height: 14px; border-radius: 3px; border: 1px solid; }
.k3d-rol { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k3d-dim { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .kast3d-lijst { grid-template-columns: 1fr; } }
/* Het 3D-aanzicht heeft geen autoplay/tweens (explode en draaien zijn directe manipulatie);
   bij reduced-motion zetten we ook eventuele hover-overgangen uit. */
@media (prefers-reduced-motion: reduce) { .kast-atab, .kast3d-tbtn, .k3d-rij, .kast3d-svg { transition: none !important; } }

/* K12: live waarschuwingen */
.kast-validatie { margin-top: var(--space-2); border: 1px solid var(--amber-300, #e3b778); background: var(--amber-50, #fbf1de); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.kast-validatie[hidden] { display: none; }

/* ── Stabiliteit-blok (kastontwerper): rustige, onderbouwde vuistregels ── */
.stab.card { padding: var(--space-4); }
.stab-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.stab-kop h3 { margin: 0; font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.stab-status { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.stab-status--ok { color: var(--green-600); }
.stab-status--kwaliteit { color: var(--amber-600); }
.stab-status--veilig { color: var(--rust-600); }
.stab-status--gedaan { color: var(--text-muted); }
.stab-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
/* Belasting-keuze: volle-breedte segmented (hergebruikt .seg) */
.stab-belasting { display: flex; width: 100%; margin-bottom: var(--space-3); }
.stab-belasting button { flex: 1; }
/* Meldingen als hairline-gescheiden lijst (geen kaartjes-in-kaartjes) */
.stab-lijst { list-style: none; margin: 0; padding: 0; }
.stab-rij { display: flex; gap: var(--space-3); padding: var(--space-3) 0; }
.stab-rij + .stab-rij { border-top: 1px solid var(--border-default); }
.stab-ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.stab-titel { margin: 0 0 2px; font-size: 14px; font-weight: var(--weight-semibold); color: var(--text-strong); }
.stab-body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
/* Kleur zit in het icoon, niet de tekst */
.stab-rij--kwaliteit .stab-ico { color: var(--amber-600); }
.stab-rij--ok .stab-ico { color: var(--green-600); }
/* Veiligheid: de enige getinte rij, bovenaan */
.stab-rij--veilig { padding: var(--space-3); background: var(--rust-50); border-radius: var(--radius-md); }
.stab-rij--veilig + .stab-rij { border-top: 0; }
.stab-rij--veilig .stab-ico { color: var(--rust-600); }
.stab-rij--veilig .stab-titel { color: var(--rust-700); }
.stab-acties { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.stab-actie { border: 1px solid var(--border-strong); background: var(--white); color: var(--text-strong); border-radius: var(--radius-md); padding: 6px 12px; font: 13px var(--font-body); cursor: pointer; min-height: 32px; }
.stab-actie:hover { border-color: var(--text-muted); }
/* Afgehandeld-voetje (standaard ingeklapt) */
.stab-afgehandeld { margin-top: var(--space-2); }
.stab-afgehandeld > summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--text-muted); padding: var(--space-2) 0; }
.stab-afgehandeld > summary::-webkit-details-marker { display: none; }
.stab-gedaan-rij { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 13px; color: var(--text-muted); padding: 3px 0; }
.stab-herstel { border: none; background: none; color: var(--teal-700); font-size: 12px; cursor: pointer; padding: 4px 6px; }
/* Regelwerk-infoblok: rustige bevestiging (geen waarschuwing), met doorklik. */
.stab-regelwerk { display: flex; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3); background: var(--surface-muted, #f4f6f8); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.stab-regel-ico { flex: none; color: var(--text-muted); margin-top: 1px; }
.stab-regel-titel { margin: 0 0 2px; font-weight: 600; font-size: 14px; color: var(--text-strong); }
.stab-regel-body { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.stab-regel-signaal { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--amber-700, #a66a12); }
.stab-regel-link { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--color-primary); font: 600 13px var(--font-body); cursor: pointer; }
.stab-regel-link:hover { text-decoration: underline; }
.stab-disclaimer { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-default); font-size: 12px; line-height: 1.45; color: var(--text-muted); }
@media (hover: none), (max-width: 760px) {
  .stab-actie, .stab-belasting button { min-height: 44px; }
  .stab-herstel { min-height: 40px; }
}
.kast-val-kop { font-size: 12px; font-weight: var(--weight-semibold); color: var(--amber-700, #9a6a16); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.kast-val-item { font-size: 13px; color: var(--text-strong); line-height: 1.4; padding: 1px 0; }

.kast-tekening .kast-maat { cursor: pointer; }
.kast-tekening .kast-maat:hover text { fill: var(--color-primary); }
.kast-tekening .kast-rand:hover rect:nth-of-type(2) { filter: brightness(0.97); }

/* Meebewegende maat tijdens slepen (K7) */
.kast-sleepmaat {
  position: absolute; transform: translate(-50%, calc(-100% - 12px));
  background: var(--navy-700); color: var(--white);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: var(--weight-semibold);
  padding: 4px 9px; border-radius: var(--radius-md);
  pointer-events: none; white-space: nowrap; z-index: 5; box-shadow: var(--shadow-md);
}
.kast-sleepmaat[hidden] { display: none; }

/* Zwevend selectie-toolbartje (deur) — stap 2 */
.kast-toast {
  margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); font-size: 14px; line-height: 1.35;
  display: flex; align-items: center; gap: 8px;
}
.kast-toast::before { content: "⚠"; font-size: 16px; flex: none; }
.kast-toast--warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.kast-toast--ok { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.kast-toast--ok::before { content: "✓"; }
.kast-toolbar {
  position: absolute; z-index: 7; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px;
  max-width: calc(100% - 12px);
  background: var(--toolbar-bg); border: 1px solid var(--border-default);
  border-radius: var(--toolbar-radius); box-shadow: var(--toolbar-schaduw);
  padding: var(--toolbar-padding);
}
.kast-toolbar::after { /* pijltje naar het element */
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: 100%; border: var(--toolbar-pijl) solid transparent; border-top-color: var(--toolbar-bg);
}
.kast-toolbar.is-onder::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--toolbar-bg); }
.kast-tb-label { font: var(--toolbar-label-font); color: var(--toolbar-label-kleur); padding: 0 4px; white-space: nowrap; }
.kast-tb-maatknop { border: none; background: transparent; cursor: pointer; border-radius: var(--toolbar-knop-radius); }
.kast-tb-maatknop:hover { background: var(--toolbar-knop-hover); }
.kast-tb-maatedit { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; }
.kast-tb-inp {
  width: 56px; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; padding: 4px 4px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text-strong);
}
.kast-tb-inp:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--teal-100); }
.kast-tb-sep { color: var(--text-muted); }
.kast-tb-eenheid { font-family: var(--font-mono); font-size: 12px; color: var(--toolbar-maat-kleur); }
/* Tweede regel in het lade-balkje: een hoogteveld per lade (laatste = rest). */
.kast-tb-rij2 { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; }
.kast-tb-rij2 .kast-tb-inp { width: 48px; }
.kast-tb-rest { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--toolbar-maat-kleur); padding: 4px 6px; }

/* Mobiel: maat-bewerken in een vast balkje bovenaan, zodat het toetsenbord het niet
   bedekt en de pagina niet wegscrollt. */
.kast-maat-fixed {
  position: fixed !important; top: 64px !important; left: 50% !important; transform: translateX(-50%) !important;
  z-index: 95; background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 8px 10px; display: inline-flex; align-items: center; gap: 6px;
}
.kast-tb-maat { font: var(--toolbar-maat-font); color: var(--toolbar-maat-kleur); font-variant-numeric: tabular-nums; }
.kast-tb-div { width: 1px; height: 22px; background: var(--toolbar-divider); flex: none; }
.kast-tb-knop {
  width: var(--toolbar-knop); height: var(--toolbar-knop); flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--toolbar-knop-radius);
  background: transparent; color: var(--text-strong); cursor: pointer;
}
.kast-tb-knop:hover { background: var(--toolbar-knop-hover); }
.kast-tb-knop.is-aan { background: var(--toolbar-knop-actief-bg); border-color: var(--toolbar-knop-actief-rand); color: var(--toolbar-knop-actief-fg); }
.kast-tb-del:hover { background: var(--toolbar-del-hover-bg); color: var(--toolbar-del-hover-fg); }
.kast-tb-knop svg { width: 17px; height: 17px; }
/* Draaglast-chip in de scheiding-toolbar + popover met toelichting (op verzoek). */
.kast-tb-draag {
  height: var(--toolbar-knop); flex: none; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--toolbar-divider); border-radius: var(--toolbar-knop-radius);
  background: transparent; color: var(--toolbar-label-kleur); cursor: pointer;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap;
}
.kast-tb-draag:hover { background: var(--toolbar-knop-hover); }
.kast-draag-pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 260px; text-align: left; z-index: 8;
  background: var(--surface-card); color: var(--text-strong);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 10px 12px;
}
.kast-draag-pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--surface-card);
}
.draag-titel { margin: 0; font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-strong); }
.draag-sub { margin: 3px 0 0; font-size: 13px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.draag-uitleg { margin: 5px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.kast-tb-tekst { font-size: 20px; font-weight: var(--weight-semibold); line-height: 1; font-family: var(--font-mono); }
@media (max-width: 639px) {
  .kast-tb-knop { width: 40px; height: 40px; }
  .kast-tb-knop svg { width: 19px; height: 19px; }
  .kast-tb-label { flex-basis: 100%; text-align: center; }
}

/* Inline maat-invoer (tik een maatlijn) */
.kast-maat-inp {
  position: absolute; transform: translate(-50%, -50%);
  width: 86px; text-align: center; z-index: 6; padding: 5px 6px;
}

/* Inline maten voor een schot/plank (dubbelklik/long-press): twee buurvakken */
.kast-schoteditor {
  position: absolute; transform: translate(-50%, -50%); z-index: 6;
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-card); padding: 6px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border-default);
}
.kast-schoteditor .kast-maat-inp { position: static; transform: none; width: 72px; }
.kast-schot-sep { color: var(--text-muted); font-family: var(--font-mono); }
.kast-vak { cursor: pointer; }
.kast-vak:hover { fill: rgba(28, 138, 150, 0.07); }

/* component-palet */
.kast-palette { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.kast-pal-hint { font-size: 12px; color: var(--text-muted); margin-right: var(--space-1); flex-basis: 100%; }
.kast-pal-hint--vol { flex-basis: 100%; margin: 2px 0 0; }
/* Kop boven de vak-acties + dunne scheidslijn tussen toevoeg-acties en vak-acties (rust). */
.kast-pal-kop { flex-basis: 100%; font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.kast-pal-div { flex-basis: 100%; height: 1px; background: var(--border-default); margin: 6px 0 2px; }
/* Vak-toevoegknoppen even breed naast elkaar, hint op eigen regel erboven. */
.kast-palette .kast-chip { flex: 1 1 0; justify-content: center; }
.kast-chip {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--white);
  font: var(--weight-semibold) 13px var(--font-body); color: var(--text-strong); cursor: pointer;
}
.kast-chip:hover { background: var(--surface-sunken); }
.kast-chip--leeg { color: var(--text-muted); }
.kast-chip--weg { color: var(--status-warn-fg); border-color: var(--rust-200, var(--border-strong)); }
.kast-chip--weg:hover { background: var(--status-warn-bg); }
.kast-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-full); overflow: hidden; }
.kast-seg-btn { border: none; background: var(--white); height: 38px; padding: 0 12px; font: var(--weight-semibold) 13px var(--font-body); color: var(--text-strong); cursor: pointer; }
.kast-seg-btn.is-aan { background: var(--teal-50); color: var(--teal-700); }

/* bewerkbaar voorbeeld: buitenmaten + materiaal */
.kast-velden { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 560px) { .kast-velden { grid-template-columns: repeat(4, 1fr); } }
.kast-rij2 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 560px) { .kast-rij2 { grid-template-columns: 1fr 1fr; } }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; align-self: start; }
.seg button { border: none; background: var(--white); padding: 8px 12px; font: 13px var(--font-body); cursor: pointer; color: var(--text-strong); min-height: 40px; }
.seg button[aria-pressed="true"] { background: var(--teal-50); color: var(--teal-700); font-weight: var(--weight-semibold); }

/* afgeleide panelenlijst */
.kast-panelen { list-style: none; margin: 0; padding: 0; }
.kast-panelen li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-default); }
.kast-panelen li:last-child { border-bottom: 0; }
.kast-panelen .nm { font-weight: var(--weight-medium); color: var(--text-strong); }
.kast-panelen .mt { color: var(--text-muted); white-space: nowrap; }

/* Mobiele tab-balk en vaste Bereken-knop: alleen op smal scherm. */
.tabbar { display: none; }
/* Resultaat-accordeons: detail standaard ingeklapt, kop = klikbare samenvatting. */
.result-acc > summary.result-acc-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.result-acc > summary.result-acc-head::-webkit-details-marker { display: none; }
.result-acc > summary.result-acc-head::before { content: '\203A'; font-size: 20px; line-height: 1; color: var(--text-muted); transition: transform .15s var(--ease-out); flex: none; }
.result-acc[open] > summary.result-acc-head::before { transform: rotate(90deg); }
.result-acc > summary.result-acc-head h2 { margin: 0; }
.result-acc > summary.result-acc-head:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.result-acc[open] > summary.result-acc-head { margin-bottom: var(--space-3); }
.naar-schema-fab { display: none; }
@media (max-width: 639px) {
  .naar-schema-fab:not([hidden]) {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 76px; z-index: 22;
    display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 28px);
    background: var(--teal-600); color: #fff; border: none; border-radius: 999px;
    padding: 11px 18px; font: var(--weight-semibold) 14px var(--font-body);
    box-shadow: 0 6px 20px rgba(0,0,0,.22); cursor: pointer;
  }
  .naar-schema-fab .fab-tekst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modus-switch { display: none; }
  .content { padding-bottom: 150px; }
  .berekenbar {
    position: fixed; left: 0; right: 0; bottom: 64px; z-index: 20;
    background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-top: 1px solid var(--border-default);
  }
  .berekenbar .btn { max-width: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; display: flex; height: 64px;
    background: var(--white); border-top: 1px solid var(--border-default);
  }
  .tabbar .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: none; background: transparent; cursor: pointer; color: var(--text-muted); font: 500 11px var(--font-body);
  }
  .tabbar .tab[aria-current="page"] { color: var(--teal-700); font-weight: var(--weight-semibold); }
  .tabbar .tab[data-modus="kast"][aria-current="page"] { color: var(--amber-700); }
}

/* Optimalisatiedoel-keuze */
/* Inline, geen kaart: label + smalle select op één rustige regel. De hint
   dupliceerde het gekozen option-label en is weg. */
.doel-keuze {
  display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap;
  padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.doel-keuze > label { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: 14px; }
.doel-keuze .select { width: auto; min-width: 0; flex: 0 1 260px; max-width: 100%; }
.doel-hint { display: none; }
.opslag-status {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 12px; color: var(--status-ok-fg); font-weight: var(--weight-semibold);
}
.opslag-status::before { content: '✓'; }
.section-head--rij { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

.kolom { display: flex; flex-direction: column; gap: var(--space-5); }
/* In de resultaatkolom de zaaglijst/zaagvolgorde dichter onder het schema brengen. */
.kolom--weergave { gap: var(--space-4); }

/* ── Sleepbare scheiding invoer|weergave (alleen desktop >=900px) ──────────────
   Onder 900px display:none, dus geen grid-cel: de 2-koloms/gestapelde layout blijft
   ongewijzigd. Vanaf 900px een middelste track met een fijne lijn + grijp; de
   kolombreedte staat in de var --onderdelen-col (geklemd), onthouden in localStorage. */
.kolom-splitter { display: none; }
@media (min-width: 900px) {
  .two-col {
    grid-template-columns: clamp(300px, var(--onderdelen-col, 50%), 60%) 22px minmax(0, 1fr);
    gap: 0;
  }
  .kolom-splitter {
    display: flex; align-self: stretch; justify-content: center; position: relative;
    cursor: col-resize; touch-action: none; -webkit-user-select: none; user-select: none;
  }
  .kolom-splitter::before {
    content: ""; position: absolute; inset-block: 0; left: 50%; width: 1px;
    transform: translateX(-50%); background: var(--border-default, #e6e1d6);
    transition: background .15s var(--ease-out, ease), width .15s var(--ease-out, ease);
  }
  .kolom-splitter:hover::before, .kolom-splitter:focus-visible::before, .kolom-splitter.sleept::before {
    background: var(--handle-rand, var(--color-primary, #16707A)); width: 2px;
  }
  /* Grijp-indicator blijft verticaal in beeld tijdens het scrollen van een lange lijst. */
  .kolom-splitter-greep {
    position: sticky; top: 50vh; width: 4px; height: 30px; border-radius: 3px;
    background: var(--border-strong, #cbd2dd); transition: background .15s var(--ease-out, ease);
  }
  .kolom-splitter:hover .kolom-splitter-greep, .kolom-splitter:focus-visible .kolom-splitter-greep,
  .kolom-splitter.sleept .kolom-splitter-greep { background: var(--handle-rand, var(--color-primary, #16707A)); }
  .kolom-splitter:focus-visible { outline: none; }
  .kolom-splitter:focus-visible::before { width: 2px; box-shadow: 0 0 0 2px var(--color-primary, #16707A); }
}
@media (prefers-reduced-motion: reduce) {
  .kolom-splitter::before, .kolom-splitter-greep { transition: none; }
}

/* ── Onderdelenlijst ───────────────────────────────────────── */
.parts-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.parts-list:empty { margin: 0; }
.parts-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3);
  padding: var(--space-2) 4px; border-bottom: 1px solid var(--border-default);
  border-radius: var(--radius-sm); transition: background .12s var(--ease-out);
}
@media (hover: hover) { .parts-list li:hover, .parts-list li:focus-within { background: var(--surface-sunken); } }
/* Hoofd (badge + naam/maat) krijgt de eerste regel; de acties schuiven op smalle
   schermen naar een tweede regel i.p.v. de naam plat te knijpen. */
.onderdeel-hoofd { flex: 1 1 170px; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.onderdeel-acties { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); margin-left: auto; }
.parts-list .num-badge {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-700); color: #fff;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 12px;
}
/* Naam voluit op een eigen regel, de maatvelden eronder. Voorkomt dat lange namen
   ("Verstelbare plank") afkappen in de smalle Onderdelen-kolom (mobiel én desktop). */
.parts-list .meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.parts-list .meta .name { flex: 0 1 auto; min-width: 0; font-weight: var(--weight-semibold); color: var(--text-strong); white-space: normal; }
.parts-list .meta .dim  { flex: 0 0 auto; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
/* Inline-bewerkbare maatgetallen: zien eruit als tekst, met een subtiel stippeltje
   als hint dat je ze kunt aanpassen. */
.maat-veld {
  font: inherit; font-family: var(--font-mono); color: var(--text-muted);
  background: transparent; border: none; padding: 1px 1px; margin: 0;
  text-align: center; min-width: 1ch; box-sizing: content-box;
  border-bottom: 1px dashed var(--border-strong); border-radius: 3px;
}
.maat-veld:hover { color: var(--text-strong); border-bottom-color: var(--text-muted); }
.maat-veld:focus { outline: none; color: var(--text-strong); background: var(--teal-50); border-bottom-color: var(--color-primary); }
/* Kerndata (maten) iets meer gewicht zodat ze opvallen als het belangrijkste getal. */
.maat-veld { font-weight: 600; }
/* Cel-wrappers in de onderdeelrij: op mobiel transparant zodat de kaart-flow exact
   blijft; op desktop worden ze echte tabelcellen (zie de tabel-media-query onderaan). */
.c-cel { display: contents; }
/* Kopregels alleen in tabelmodus (desktop, brede kolom); op mobiel verborgen. */
.parts-kop, .platen-kop { display: none; }
/* Inline bewerkbare onderdeelnaam: subtiele hover-affordance + bewerkveld. */
.name-txt--edit { cursor: text; border-radius: 3px; padding: 0 2px; }
.name-txt--edit:hover { background: var(--surface-sunken); box-shadow: inset 0 -1px 0 var(--border-strong); }
.name-txt--edit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.naam-inline { font: inherit; font-weight: 600; padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--white); color: var(--text-strong); }

/* Nerf-icoon (SVG) op tekstgrootte */
.nerf-svg { width: 17px; height: 17px; flex: none; }
/* Ingestelde nerf valt op (teal chip met richting-icoon + label) */
.nerf-chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  min-height: 40px; padding: 0 13px; border-radius: var(--radius-full);
  border: 1px solid var(--teal-100); background: var(--teal-50);
  color: var(--teal-700); font-size: 12px; font-weight: var(--weight-semibold);
  cursor: pointer; white-space: nowrap; transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}
.nerf-chip:hover { border-color: var(--teal-500); }
/* Standaard 'vrij' blijft rustig: een subtiel "+ nerf" om er een toe te voegen */
.nerf-add {
  flex: none; min-height: 40px; padding: 0 12px; border-radius: var(--radius-full);
  border: 1px dashed var(--border-strong); background: transparent;
  color: var(--text-muted); font-size: 12px; font-weight: var(--weight-medium);
  cursor: pointer; white-space: nowrap; transition: color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.nerf-add:hover { color: var(--text-strong); border-color: var(--text-muted); }
/* Icoon-only variant (nerf/band/voorgeband): compact en subtiel. "geen" is een rustig
   streepje zonder rand; ingesteld is een klein teal chipje met richtingspijl/band-icoon. */
.nerf-ico { display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: 34px; height: 28px; min-height: 28px; padding: 0; gap: 2px; border-radius: 5px; }
.nerf-ico .nerf-svg { display: block; flex: none; }
.nerf-add.nerf-ico { border: 1px solid var(--border-default); background: var(--white); color: var(--text-muted); }
.nerf-add.nerf-ico:hover { border-color: var(--text-muted); background: var(--white); color: var(--text-strong); }
.nerf-chip.nerf-ico { border-radius: 5px; }
.nerf-ico .nerf-count { font-size: 11px; font-weight: var(--weight-semibold); }
/* Compacte onderdeelrij: nerf/band als kleine chips, kleinere actie-iconen en een
   strakke materiaalkeuze, zodat de rij ~de helft lager wordt zonder bewerken te verliezen. */
.onderdeel-acties { gap: 4px; }
.onderdeel-acties .nerf-add, .onderdeel-acties .nerf-chip {
  min-height: 32px; min-width: 0; padding: 0 10px; font-size: 12px; justify-content: center;
}
.onderdeel-acties .nerf-svg { width: 15px; height: 15px; }
.onderdeel-acties .icon-btn { width: 34px; height: 34px; }
.onderdeel-acties .mat-select { min-height: 32px; height: 32px; padding: 2px 8px; font-size: 13px; max-width: 150px; }
/* Kopieer/verwijder zijn secundair: op desktop pas tonen bij hover/focus van de rij. */
@media (hover: hover) {
  .parts-list li .onderdeel-acties .icon-btn { opacity: 0; transform: translateX(4px); transition: opacity .12s var(--ease-out), transform .12s var(--ease-out); }
  .parts-list li:hover .onderdeel-acties .icon-btn,
  .parts-list li:focus-within .onderdeel-acties .icon-btn { opacity: 1; transform: none; }
}
/* Touch: knoppen blijven zichtbaar maar compact; 44px-tikvlak via een onzichtbare hitbox. */
@media (hover: none) {
  .onderdeel-acties .icon-btn, .onderdeel-acties .nerf-add, .onderdeel-acties .nerf-chip { position: relative; }
  .onderdeel-acties .icon-btn::after, .onderdeel-acties .nerf-add::after, .onderdeel-acties .nerf-chip::after { content: ""; position: absolute; inset: -6px; }
}

/* ── Onderdelenlijst als compacte TABEL op desktop ─────────────────────────────
   De onderdelenkolom is een container; de tabel verschijnt alleen als de kolom breed
   genoeg is (container-query op de PANEELbreedte). Versmal je de sleepbare kolom te ver,
   dan klapt hij netjes terug naar kaarten i.p.v. de kolommen af te kappen. Onder 900px
   (kolommen niet naast elkaar) is de kolom geen container -> altijd de kaart. */
@media (min-width: 900px) {
  .kolom--invoer { container-type: inline-size; container-name: invoer; }
}
/* Gedeelde vaste kolom-tracks voor de onderdelentabel: de kopregel, de onderdeelrijen én
   het invoerformulier gebruiken exact dezelfde breedtes (var --pcols), zodat alles onder
   elkaar uitlijnt. Naam = 1fr (vult de resterende ruimte), de rest vast in px. Buiten de
   container-query gedefinieerd omdat die alleen descendants van .kolom--invoer stijlt,
   niet de container zelf. */
/* Materiaal- en dikte-track van de onderdelentabel als variabelen, zodat we ze wegklappen als
   het project maar één materiaal / één dikte heeft (kop zonder inhoud leest als kapot). */
.kolom--invoer { --matcol: minmax(74px,1.4fr); --diktecol: 66px; }
body.eenheid-lang .kolom--invoer { --diktecol: 82px; }
body.geen-ond-mat .kolom--invoer { --matcol: 0px; }
body.geen-ond-dikte .kolom--invoer { --diktecol: 0px; }
/* Rustige contextregel boven de onderdelen als materiaal/dikte overal gelijk zijn (vervangt de
   nu weggeklapte lege kolommen). */
.ond-context { margin: calc(var(--space-1) * -1) 0 var(--space-2); font-size: 12.5px; color: var(--text-muted); }
.ond-context:empty { display: none; }
.kolom--invoer { --pcols: 22px minmax(72px,1.3fr) 62px 62px 32px var(--matcol) var(--diktecol) auto; }
body.geavanceerd .kolom--invoer { --pcols: 22px minmax(72px,1.3fr) 62px 62px 32px var(--matcol) var(--diktecol) 36px 36px auto; }
/* Imperiale eenheden (inch/ft): langere maat-strings, dus bredere maat-kolommen en een
   krappere naam-min, zodat lengte/breedte/aantal niet meer overlappen. */
body.eenheid-lang .kolom--invoer { --pcols: 22px minmax(72px,1.3fr) 92px 92px 52px var(--matcol) var(--diktecol) auto; }
body.eenheid-lang.geavanceerd .kolom--invoer { --pcols: 22px minmax(72px,1.3fr) 92px 92px 52px var(--matcol) var(--diktecol) 36px 36px auto; }
/* Plaattabel-tracks: swatch, materiaal (1fr, als de naam), lengte, breedte, dikte, aantal,
   [winkel, nerf, band, prijs in geavanceerd], status (herkomst/gebruikt), acties. Alle
   tracks vast behalve materiaal (1fr), zodat de kopregel en de rijen exact uitlijnen. */
.kolom--invoer { --plaatcols: 22px minmax(72px,1.3fr) 62px 62px 32px minmax(74px,1.5fr) 66px 30px 56px; }
body.geavanceerd .kolom--invoer { --plaatcols: 22px minmax(72px,1.3fr) 62px 62px 32px minmax(74px,1.5fr) 66px 58px 36px 36px 44px 30px 56px; }
body.eenheid-lang .kolom--invoer { --plaatcols: 22px minmax(72px,1.3fr) 92px 92px 52px minmax(74px,1.5fr) 66px 30px 56px; }
body.eenheid-lang.geavanceerd .kolom--invoer { --plaatcols: 22px minmax(72px,1.3fr) 92px 92px 52px minmax(74px,1.5fr) 66px 58px 36px 36px 44px 30px 56px; }
@container invoer (min-width: 750px) {
  /* Eén master-grid: kop, rijen én formulier delen als subgrid dezelfde kolombreedtes,
     zodat content-afhankelijke kolommen (materiaal, acties) over alles samen worden
     berekend en overal exact uitlijnen. */
  /* De tabel groeit mee tot z'n inhoud-breedte (kolommen hebben een max) en stopt dan, links
     uitgelijnd; op smalle panelen vult max-width:100% de kolom. Zo geen dode ruimte ná de acties
     op brede panelen, en beide tabellen (zelfde maxima) blijven onderling uitgelijnd. */
  .onderdelen-grid { display: grid; grid-template-columns: var(--pcols); column-gap: var(--space-2); max-width: 1040px; }
  .parts-kop {
    grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
    padding: 0 var(--space-2) 4px; margin-bottom: 2px;
    font-size: 11px; letter-spacing: .02em; color: var(--text-muted);
    border-bottom: 1px solid var(--border-default);
  }
  .parts-kop .pk-l, .parts-kop .pk-b, .parts-kop .pk-n { justify-self: end; }
  .parts-kop .pk-mat { justify-self: start; }
  .parts-kop .pk-dikte { justify-self: end; }
  /* Kop-label mee verbergen als de kolom is weggeklapt (uniform materiaal/dikte). visibility i.p.v.
     display:none, zodat de kolom-plek in de auto-flow behouden blijft en Dikte niet opschuift. */
  body.geen-ond-mat .parts-kop .pk-mat { visibility: hidden; }
  body.geen-ond-dikte .parts-kop .pk-dikte { visibility: hidden; }
  .parts-kop .pk-nerf, .parts-kop .pk-band { justify-self: center; font-size: 10px; overflow: hidden; }
  .parts-kop .pk-eenheid {
    justify-self: end; cursor: pointer; font: inherit; letter-spacing: 0;
    background: var(--surface-sunken, var(--gray-50)); border: 1px solid var(--border-default);
    border-radius: 999px; padding: 2px 10px; color: var(--text-strong); font-weight: var(--weight-semibold);
  }
  .parts-kop .pk-eenheid:hover, .parts-kop .pk-eenheid:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }

  /* Onderdeelrijen: elke li krijgt dezelfde vaste tracks (geen subgrid meer, want kop en
     form staan buiten de lijst en moeten exact meelopen). */
  .parts-list { display: contents; }
  .parts-list li {
    grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
    align-items: center; padding: 2px var(--space-2);
  }
  .parts-list .onderdeel-hoofd, .parts-list .meta, .parts-list .dim, .parts-list .onderdeel-acties { display: contents; }
  .parts-list .c-cel { display: flex; align-items: center; min-width: 0; }
  .parts-list .maat-sep, .parts-list .dim .maat-eenheid { display: none; }
  .parts-list .meta .name { justify-self: stretch; min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; }
  .parts-list .meta .name .name-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .parts-list .meta .name .deel-badge, .parts-list .meta .name .past-niet-badge { flex: none; }
  .parts-list .c-maat { justify-self: end; }
  .parts-list .c-maat .maat-veld { text-align: right; }
  .parts-list .c-mat { justify-self: start; min-width: 0; gap: 4px; }
  /* select op natuurlijke breedte (past bij de gekozen waarde) zodat de max-content-kolom
     meegroeit tot het langst gekozen materiaal; wél een plafond tegen extreme namen. */
  .parts-list .c-mat .mat-select { width: 100%; max-width: 160px; min-width: 0; }
  .parts-kop .pk-dikte { justify-self: end; }
  .parts-list .c-dikte { justify-self: stretch; min-width: 0; }
  .parts-list .c-dikte .mat-select { width: 100%; min-width: 0; }
  /* Onderdelen-dropdowns (dikte/materiaal) even subtiel als de plaatvelden: randloos in rust,
     rand + witte vulling pas bij hover/focus. Zo oogt de hele tabel rustig en consistent. */
  .kolom--invoer .parts-list .mat-select { border: 1px solid var(--border-default); background-color: var(--white); border-radius: 5px; box-sizing: border-box; height: 28px; min-height: 28px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .12s var(--ease-out), box-shadow .12s var(--ease-out); }
  .kolom--invoer .parts-list .mat-select:hover { border-color: var(--text-muted); }
  .kolom--invoer .parts-list .mat-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--teal-100); }
  /* Onderdelen lengte/breedte/aantal blijven stippel-tekst (fijne inline-bewerking), maar
     kleiner en subtieler (13px) zodat ze bij de compacte plaatvelden passen. */
  .kolom--invoer .parts-list .maat-veld { font-size: 13px; font-weight: 500; }
  .parts-list .c-nerf, .parts-list .c-band { justify-self: center; }
  /* Nerf/band tonen hun label ("+ Nerf", "+ Band"); de kolom is breed genoeg (zie --pcols),
     de knop krijgt z'n natuurlijke breedte en valt zo niet over de buurkolom. */
  .parts-list .c-nerf .nerf-chip, .parts-list .c-band .nerf-chip,
  .parts-list .c-nerf .nerf-add, .parts-list .c-band .nerf-add { min-height: 30px; padding: 0 8px; gap: 4px; white-space: nowrap; }
  .parts-list .c-acts { justify-self: end; gap: 2px; }
  /* Tikvlak van rij-acties naar ~44px zonder de knop groter te maken of de layout te raken:
     onzichtbare inset. De vlakken van naastliggende knoppen mogen elkaar iets overlappen; een tik
     valt dan naar de dichtstbijzijnde knop. (Knop-spreiding volgt met het overflow-menu.) */
  .parts-list .c-acts .icon-btn, .plaat-rij .plaat-acties .icon-btn { position: relative; }
  /* Vergroot tikvlak alleen op touch (geen muis): op desktop stak de inset naar rechts over de
     scrollbalk. Op touch is er geen classic scrollbar, dus daar speelt dat niet. */
  @media (hover: none) {
    .parts-list .c-acts .icon-btn::after, .plaat-rij .plaat-acties .icon-btn::after { content: ''; position: absolute; inset: -7px; border-radius: inherit; }
  }
  /* Kopiëren + verwijderen altijd tonen (niet hover-only): dan hebben ze een vaste plek
     en overlappen ze niet meer met het band-icoon. */
  .parts-list li .onderdeel-acties .icon-btn { opacity: 1; transform: none; }
  .parts-list .c-acts .icon-btn { width: 30px; height: 30px; }

  /* Invoerformulier exact onder de tabelkolommen; de kop levert de labels, dus die
     verbergen we in het formulier (screenreader houdt ze via clip). */
  .kolom--invoer .onderdeel-form { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: 4px; padding: 2px var(--space-2); }
  .kolom--invoer .onderdeel-form .field { margin: 0; }
  .kolom--invoer .onderdeel-form .field label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kolom--invoer .onderdeel-form #veld-materiaal, .kolom--invoer .onderdeel-form #veld-dikte { display: none; }
  .kolom--invoer .onderdeel-form .field--naam { grid-column: 2; min-width: 0; }
  .kolom--invoer .onderdeel-form .field--naam .input { width: 100%; min-width: 0; }
  .kolom--invoer .onderdeel-form .maten-rij { display: contents; }
  .kolom--invoer .onderdeel-form .maten-rij .field:nth-of-type(1) { grid-column: 3; }
  .kolom--invoer .onderdeel-form .maten-rij .field:nth-of-type(2) { grid-column: 4; }
  .kolom--invoer .onderdeel-form .maten-rij .field--aantal { grid-column: 5; width: auto; min-width: 0; }
  .kolom--invoer .onderdeel-form .maten-rij .field .control, .kolom--invoer .onderdeel-form .maten-rij .field .input { width: 100%; min-width: 0; }
  /* invoervelden even compact als de tabel-getallen erboven (mono, kleiner, minder padding) */
  .kolom--invoer .onderdeel-form .maten-rij .field .input { font-size: 14px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding: 0 6px; text-align: right; }
  /* eenheid staat al in de kop -> in het formulier verbergen zodat het getal past */
  .kolom--invoer .onderdeel-form .maten-rij .field .unit { display: none; }
  .kolom--invoer .onderdeel-form .field--aantal .input { text-align: center; padding: 0 4px; }
  /* toevoegen-knop naast de ingevulde maten, in de materiaal/nerf/band/acties-ruimte */
  .kolom--invoer .onderdeel-form > button[type="submit"] { grid-row: 1; grid-column: 6 / -1; justify-self: stretch; width: auto; margin: 0; min-height: 36px; white-space: nowrap; padding: 0 8px; }
  .kolom--invoer .onderdeel-form #plak-knop, .kolom--invoer .onderdeel-form .field-hint, .kolom--invoer .onderdeel-form .form-fout { grid-column: 1 / -1; margin-top: 0; }
  /* De plaat-toevoegrij deelt de opmaak van de onderdelen-toevoegrij, maar staat niet in een
     wrappende grid (elke plaatrij is een eigen grid). Daarom een eigen grid met de plaatkolommen
     i.p.v. subgrid, zodat naam/lengte/breedte/aantal netjes onder de tabelkolommen uitlijnen. */
  .kolom--invoer .plaat-form { grid-template-columns: var(--plaatcols); max-width: 1040px; }
  body.geavanceerd .kolom--invoer .plaat-form { max-width: none; }

  /* Plaatmateriaal als uitgelijnde tabel, net als de onderdelen: de kopregel en elke
     plaat-rij zijn een grid met dezelfde tracks (materiaal = 1fr zoals de naam). */
  .kolom--invoer .platen-kop {
    display: grid; grid-template-columns: var(--plaatcols); align-items: center;
    gap: 0 var(--space-2); padding: 0 0 4px; margin: var(--space-1) 0 2px;
    font-size: 11px; letter-spacing: .02em; color: var(--text-muted);
    border-bottom: 1px solid var(--border-default);
    max-width: 1040px;
  }
  /* Alle kop-labels op rij 1: de labels staan in een andere DOM-volgorde dan de kolommen,
     en zonder deze regel duwt de grid-auto-plaatsing ze in een trapje over meerdere regels
     (dat was de "overlap" onderin). */
  .platen-kop .pk-c { grid-row: 1; }
  .platen-kop .pk-pnaam { grid-column: 2; justify-self: start; }
  .platen-kop .pk-pl { grid-column: 3; justify-self: end; }
  .platen-kop .pk-pb { grid-column: 4; justify-self: end; }
  .platen-kop .pk-pa { grid-column: 5; justify-self: end; }
  .platen-kop .pk-pmat { grid-column: 6; justify-self: start; }
  .platen-kop .pk-pd { grid-column: 7; justify-self: end; }
  .platen-kop .pk-pwinkel { grid-column: 8; justify-self: start; }
  .platen-kop .pk-pnerf { grid-column: 9; justify-self: center; }
  .platen-kop .pk-pvgb { grid-column: 10; justify-self: center; }
  .platen-kop .pk-pprijs { grid-column: 11; justify-self: end; }
  /* Euro uit het invulvakje: de kop toont de valuta, dus in de tabel verbergen we de unit
     binnen het prijsveld (scheelt breedte; het getal krijgt de volle ruimte). */
  .kolom--invoer .plaat-rij .plaat-prijs .unit { display: none; }
  .kolom--invoer .plaat-rij .plaat-prijs .input { width: 100%; min-width: 0; text-align: right; padding: 0 6px; }

  .kolom--invoer .plaat-rij {
    display: grid; grid-template-columns: var(--plaatcols);
    align-items: center; gap: 2px var(--space-2); padding: var(--space-2) 0;
    max-width: 1040px;
  }
  .kolom--invoer .plaat-hoofd, .kolom--invoer .plaat-velden { display: contents; }
  /* Geavanceerd is inherent breder (winkel/nerf/band/prijs); geen cap, anders wordt de tabel afgesneden. */
  body.geavanceerd .onderdelen-grid, body.geavanceerd .kolom--invoer .plaat-rij, body.geavanceerd .kolom--invoer .platen-kop { max-width: none; }
  /* Alles op rij 1: de DOM-volgorde (acties vóór de maten) mag geen tweede rij forceren. */
  .kolom--invoer .plaat-hoofd > *, .kolom--invoer .plaat-velden > * { grid-row: 1; }
  .plaat-rij .mat-swatch { grid-column: 1; width: 18px; height: 18px; }
  .plaat-rij .plaat-naam-input { grid-column: 2; width: 100%; min-width: 0; }
  .plaat-rij .c-plaat-l { grid-column: 3; }
  .plaat-rij .c-plaat-b { grid-column: 4; }
  .plaat-rij .c-plaat-a { grid-column: 5; }
  .plaat-rij .plaat-materiaal-input { grid-column: 6; width: 100%; min-width: 0; max-width: none; }
  .plaat-rij .c-plaat-d { grid-column: 7; }
  .plaat-rij .plaat-winkel { grid-column: 8; min-width: 0; }
  .plaat-rij [data-plaat-nerf] { grid-column: 9; justify-self: center; padding: 0 8px; gap: 4px; }
  .plaat-rij [data-plaat-vgb] { grid-column: 10; justify-self: center; padding: 0 8px; gap: 4px; }
  .plaat-rij .plaat-prijs { grid-column: 11; min-width: 0; }
  .plaat-rij .plaat-prijs .input { width: 100%; min-width: 0; }
  /* Nerf/voorgeband tonen hun label ("+ Nerf", "+ Voorgeband"); de kolommen (zie --plaatcols)
     zijn breed genoeg zodat de knoppen hun natuurlijke breedte houden en niet overlappen. */
  .plaat-rij [data-plaat-nerf], .plaat-rij [data-plaat-vgb] { white-space: nowrap; }
  .plaat-rij .plaat-herkomst { grid-column: -3 / -2; justify-self: end; margin: 0; font-size: 10px; padding: 1px 6px; }
  .plaat-rij .plaat-gebruikt { grid-column: -3 / -2; justify-self: end; margin: 0; }
  /* Gebruikte plaat: de teller telt, de voorstel-chip niet (delen dezelfde kolom). */
  .plaat-rij.is-gebruikt .plaat-herkomst { display: none; }
  .plaat-rij .plaat-acties { grid-column: -2 / -1; justify-self: end; margin: 0; }
  /* De maat/dikte/aantal-cellen vullen hun kolom; selects en inputs op 100%. */
  .plaat-rij .c-plaat-l, .plaat-rij .c-plaat-b, .plaat-rij .c-plaat-d, .plaat-rij .c-plaat-a { display: flex; min-width: 0; }
  .kolom--invoer .plaat-rij .c-plaat-l > *, .kolom--invoer .plaat-rij .c-plaat-b > *, .kolom--invoer .plaat-rij .c-plaat-d > *, .kolom--invoer .plaat-rij .c-plaat-a > * { width: 100%; min-width: 0; }
  /* Net als bij de onderdelen: élke cel-inhoud strak begrenzen tot de kolombreedte, ook de
     input Ín een vrije-invoer-.control (anders houdt die z'n natuurlijke breedte en valt over
     aantal/materiaal). De "mm"-unit verbergen we in de tabel; de kolomkop zegt al genoeg. */
  .plaat-rij .c-plaat-l .control, .plaat-rij .c-plaat-b .control, .plaat-rij .c-plaat-d .control { width: 100%; min-width: 0; }
  .plaat-rij .c-plaat-l .input, .plaat-rij .c-plaat-b .input, .plaat-rij .c-plaat-d .input { width: 100%; min-width: 0; padding: 0 4px; text-align: right; font-size: 12px; }
  /* Dropdowns/velden in de plaattabel even compact als bij de onderdelen (waren 34-44px hoog). */
  .kolom--invoer .plaat-rij select, .kolom--invoer .plaat-rij .select, .kolom--invoer .plaat-rij .input, .kolom--invoer .plaat-rij .plaat-materiaal-input { min-height: 28px; height: 28px; }
  /* Compacte, subtiele velden (eznesting-stijl): lichte rand, licht afgerond, klein font,
     ellipsis zodat lange waarden ("Multiplex (be…") netjes afkappen en alles op één regel blijft. */
  .kolom--invoer .plaat-rij .select,
  .kolom--invoer .plaat-rij .input,
  .kolom--invoer .plaat-rij .plaat-materiaal-input {
    border: 1px solid var(--border-default); background-color: var(--white); box-shadow: none;
    border-radius: 5px; box-sizing: border-box; font-size: 12px; font-weight: 500;
    white-space: nowrap;
    transition: border-color .12s var(--ease-out), box-shadow .12s var(--ease-out);
  }
  /* Alleen het materiaal (lange naam) kapt af met "…"; getallen tonen we altijd voluit
     (die krijgen genoeg kolombreedte). Zo geen "15…" meer bij lengte/breedte. */
  .kolom--invoer .plaat-rij .plaat-materiaal-input { overflow: hidden; text-overflow: ellipsis; }
  .kolom--invoer .plaat-rij .select:hover,
  .kolom--invoer .plaat-rij .input:hover,
  .kolom--invoer .plaat-rij .plaat-materiaal-input:hover { border-color: var(--text-muted); }
  .kolom--invoer .plaat-rij .select:focus,
  .kolom--invoer .plaat-rij .input:focus,
  .kolom--invoer .plaat-rij .plaat-materiaal-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--teal-100); }
  /* Compacte, uniforme dropdown-pijl in beide tabellen (i.p.v. de brede native pijl die ~30px
     opeist en de mono-getallen zou afkappen). */
  .kolom--invoer .plaat-rij .select,
  .kolom--invoer .parts-list .mat-select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center; background-size: 9px;
    padding-right: 16px;
  }
  /* Lengte/breedte/aantal in mono, zelfde grootte en gewicht als de onderdelen (16px 600),
     zodat de getallen exact hetzelfde ogen. Dikte en materiaal houden de kleinere dropdown-stijl. */
  .kolom--invoer .plaat-rij .plaat-lb,
  .kolom--invoer .plaat-rij .plaat-aantal,
  .kolom--invoer .plaat-rij .c-plaat-l .input,
  .kolom--invoer .plaat-rij .c-plaat-b .input {
    font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-strong);
  }
  /* Plaatnaam even strak op het kleurblokje als de onderdeelnaam op zijn nummer (was ~28px). */
  .kolom--invoer .plaat-rij .plaat-naam-input { padding-left: 2px; margin-left: -10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .plaat-rij .c-plaat-l .unit, .plaat-rij .c-plaat-b .unit, .plaat-rij .c-plaat-d .unit { display: none; }
  .kolom--invoer .plaat-rij .plaat-materiaal-input, .kolom--invoer .plaat-rij .plaat-lb, .kolom--invoer .plaat-rij .c-plaat-d select { width: 100%; min-width: 0; max-width: none; }
  /* Smallere selects (maat, dikte) krijgen in de tabel minder pijltje-padding, anders kapt de
     waarde af ("18 mm" -> "18 m"). Materiaal is breed genoeg en houdt zijn ruimere padding. */
  .plaat-rij .plaat-lb, .plaat-rij .c-plaat-d select { padding-left: 6px; padding-right: 4px; }
  .plaat-rij .plaat-aantal { text-align: center; }
  .plaat-rij .plaat-acties .icon-btn { width: 30px; height: 30px; }
}

/* In Geavanceerd heeft de plaattabel veel meer kolommen (winkel, nerf, band, prijs) en past
   ze pas vanaf ~900px. Is de kolom smaller, dan tonen we de platen als kaarten in plaats van
   een tabel die zijn acties-knoppen wegknipt. De onderdelentabel past wél en blijft een tabel. */
@container invoer (min-width: 750px) and (max-width: 659px) {
  body.geavanceerd .kolom--invoer .platen-kop { display: none; }
  body.geavanceerd .kolom--invoer .plaat-rij { display: flex; flex-direction: column; grid-template-columns: none; }
  body.geavanceerd .kolom--invoer .plaat-hoofd { display: flex; }
  body.geavanceerd .kolom--invoer .plaat-velden { display: flex; flex-wrap: wrap; padding-left: calc(24px + var(--space-2)); }
  body.geavanceerd .kolom--invoer .plaat-velden > * { grid-row: auto; }
  body.geavanceerd .kolom--invoer .plaat-velden .c-cel { display: inline-flex; width: auto; }
  body.geavanceerd .kolom--invoer .plaat-velden .c-cel > * { width: auto; }
  body.geavanceerd .kolom--invoer .plaat-naam-input { width: auto; flex: 1 1 120px; }
  body.geavanceerd .kolom--invoer [data-plaat-nerf] span, body.geavanceerd .kolom--invoer [data-plaat-vgb] span { display: inline; }
  /* In de kaart-modus tonen we de labels ("+ nerf"), dus de knoppen mogen NIET krimpen onder hun
     tekst (de tabel-modus zet min-width:0). Anders puilt de tekst uit en overlappen de dashed randen
     van nerf en band. Natuurlijke breedte, niet-krimpend, en de ruimere kaart-padding. */
  body.geavanceerd .kolom--invoer [data-plaat-nerf], body.geavanceerd .kolom--invoer [data-plaat-vgb] { min-width: max-content; flex: 0 0 auto; padding: 0 11px; }
}

.icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text-strong); }
.icon-btn--warn:hover { background: var(--status-warn-bg); color: var(--status-warn-fg); }

/* ── Onderdeel-invoerformulier ─────────────────────────────── */
.onderdeel-form { display: flex; flex-direction: column; gap: var(--space-3); }
.maten-rij { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-3); }
.field--aantal { width: 80px; }
.field-hint { font-size: 13px; color: var(--text-muted); margin-top: var(--space-3); }

.input--error, .input--error:focus { border-color: var(--status-warn-fg); box-shadow: 0 0 0 3px var(--rust-50); }
.form-fout { font-size: 13px; color: var(--status-warn-fg); margin: 0; }

/* Materiaal-keuze in een onderdeelrij */
.mat-select {
  flex: none; min-height: 36px; max-width: 150px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--white); font-family: var(--font-body); font-size: 13px; color: var(--text-body);
}

/* ── Platenlijst (compact: dropdowns blijven, maar zonder labels) ── */
.plaat-kop-acties { display: flex; align-items: center; gap: var(--space-2); }
.plaat-rij { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border-default); }
.plaat-rij:first-child { border-top: none; padding-top: 0; }

/* Samenvatting: hoeveel platen je echt nodig hebt voor het zaagschema. */
.platen-samenvatting { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: var(--radius-md); font-size: 14px; color: var(--teal-700); }
.platen-samenvatting b { color: var(--text-strong); }

/* Materiaalgroep: veel beschikbare formaten ingeklapt achter één regel (de optimizer
   kiest eruit). Uitklappen toont de losse, bewerkbare maten. */
.plaat-groep { border-top: 1px solid var(--border-default); }
.plaat-groep:first-child, .platen-samenvatting + .plaat-groep { border-top: none; }
.plaat-groep-kop { width: 100%; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; background: none; border: none; cursor: pointer; text-align: left; color: var(--text-strong); }
.plaat-groep-tekst { display: flex; flex-direction: column; min-width: 0; }
.plaat-groep-naam { font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plaat-groep-meta { font-size: 12.5px; color: var(--text-muted); }
.plaat-groep-chev { flex: none; margin-left: auto; color: var(--text-muted); transition: transform .15s var(--ease-out); }
.plaat-groep.is-open .plaat-groep-chev { transform: rotate(180deg); }
.plaat-groep-rijen { padding: 0 0 var(--space-2) calc(24px + var(--space-2)); }
.plaat-groep-rijen .plaat-rij { border-top: 1px dashed var(--border-default); }
.plaat-groep-rijen .plaat-rij:first-child { border-top: none; }

/* Gebruikte formaten: één rustig signaal (lichte teal-plaque op de rij, geen balk/stip). */
.plaat-rij.is-gebruikt {
  background: var(--teal-50);
  border-radius: var(--radius-sm);
  margin-inline: calc(var(--space-2) * -1);
  padding-inline: var(--space-2);
}
.plaat-groep-rijen .plaat-rij.is-gebruikt,
.plaat-groep-rijen .plaat-rij.is-gebruikt + .plaat-rij.is-gebruikt { border-top-color: transparent; }
/* Niet-gebruikte rijen een fractie ingetogener: alleen de swatch, nooit de tekst. */
.plaat-groep-rijen .plaat-rij:not(.is-gebruikt) .mat-swatch { opacity: .55; }
/* Het aantal: kale mono-indicatie, rechts in regel 2 (raakt de materiaalnaam niet). */
.plaat-gebruikt {
  flex: none; margin-left: auto; align-self: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: var(--weight-medium); letter-spacing: -0.01em;
  color: var(--teal-700); white-space: nowrap;
}
.plaat-gebruikt .x { color: var(--teal-600); opacity: .6; margin-left: 1px; }
/* Herkomst-chip op een plaatrij: 'standaard' (nieuw project) of 'voorstel' (kast).
   Het chip is de melding: muted, tikbaar (opent de bibliotheek), en verdwijnt zodra
   de gebruiker de rij bewerkt. Geen aparte banner nodig. */
.plaat-herkomst {
  flex: none; align-self: center; cursor: pointer;
  font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: .02em;
  color: var(--text-muted); background: var(--surface-sunken, var(--gray-50));
  border: 1px dashed var(--border-default); border-radius: 999px; padding: 2px 8px;
  min-height: 0; line-height: 1.4;
}
.plaat-herkomst:hover { color: var(--teal-700); border-color: var(--teal-200, var(--teal-100)); }
/* Hint onder de samenvatting: het schema rekent (mede) op de standaardplaat. */
.platen-standaardhint { margin: calc(var(--space-2) * -0.5) 0 var(--space-2); font-size: 12.5px; color: var(--text-muted); }
/* Kast-automatiek uit: zichtbare status met herstel-knop (geen verborgen vlag). */
.platen-autostatus { margin: 0 0 var(--space-2); font-size: 12.5px; color: var(--text-muted); }
/* Scheiding tussen gebruikte en overige formaten. */
.plaat-scheiding { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-1); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.plaat-scheiding::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
/* Overige (niet-gebruikte) formaten: aparte inklapper onder de gebruikte platen, zodat de
   gebruikte platen altijd zichtbaar blijven en de lijst kort start. */
.plaat-overige { border-top: 1px solid var(--border-default); margin-top: var(--space-2); }
.plaat-overige-kop { width: 100%; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; background: none; border: none; cursor: pointer; text-align: left; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.plaat-overige-kop:hover, .plaat-overige-kop:focus-visible { color: var(--text-strong); }
.plaat-overige-kop .plaat-groep-chev { margin-left: 0; }
.plaat-overige.is-open .plaat-groep-chev { transform: rotate(180deg); }
/* Kaartweergave (mobiel/smal): de bovenregel mag wrappen, en naam + materiaal krijgen een
   leesbare minimumbreedte zodat ze niet platgedrukt worden (materiaal was zo tot alleen een
   pijltje geslonken, naam tot "Pla"). Op desktop stuurt de grid dit via hogere specificiteit. */
.plaat-hoofd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mat-swatch { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--sw-rand, var(--border-strong)); background: var(--sw-fill, var(--panel-fill)); }
/* Klik-om-te-bewerken: de plaatnaam oogt als tekst (de titel van de plaat), niet als een
   permanent invoervak. Bij hover een subtiele rand, bij focus een echt invoerveld. */
.plaat-naam-input { flex: 1 1 150px; min-width: 130px; border-color: transparent; background: transparent; font-weight: var(--weight-semibold); color: var(--text-strong); }
.plaat-naam-input::placeholder { color: var(--text-muted); font-weight: var(--weight-medium, 500); }
.plaat-naam-input:hover { border-color: var(--border-default); background: var(--white); }
.plaat-naam-input:focus { border-color: var(--color-primary); background: var(--white); }
.plaat-materiaal-input { flex: 1 1 160px; min-width: 140px; }
.plaat-acties { display: flex; gap: 2px; margin-left: auto; }
/* ⋯-menu per plaat: bewaren + dupliceren achter een overflow, zodat de acties-kolom maar twee
   knoppen heeft (⋯ + prullenbak) en niet meer over de rand/scrollbalk puilt. */
.plaat-overflow { position: relative; display: inline-flex; }
.plaat-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 190px;
  background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.15)); padding: 4px; display: flex; flex-direction: column; }
.plaat-menu[hidden] { display: none; }
.plaat-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--radius-sm); padding: 8px 10px; min-height: 40px;
  font: var(--weight-medium, 500) 13.5px var(--font-body); color: var(--text-strong); cursor: pointer; }
.plaat-menu button:hover, .plaat-menu button:focus-visible { background: var(--surface-sunken, var(--gray-50)); outline: none; }
.plaat-menu button svg { flex: none; color: var(--text-muted); }
/* Velden compact op één meegroeiende regel; uitgelijnd onder het materiaal. */
.plaat-velden { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding-left: calc(24px + var(--space-2)); }
.plaat-velden .select, .plaat-velden .input { flex: 0 0 auto; width: auto; min-height: 34px; font-size: 13px; padding: 0 9px; }
.plaat-velden .select { padding-right: 30px; }
.plaat-velden .control { position: relative; display: inline-flex; align-items: center; }
.plaat-velden .control .input { padding-right: 26px; }
.plaat-velden .unit { position: absolute; right: 9px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); pointer-events: none; }
.plaat-velden .plaat-aantal { width: 46px; text-align: center; padding: 0 4px; }
.plaat-velden .plaat-prijs .input { width: 80px; }
/* Nerf-control in de plaatrij op dezelfde compacte hoogte als de velden */
.plaat-velden .nerf-chip, .plaat-velden .nerf-add { min-height: 34px; padding: 0 11px; }
.plaat-onderbalk { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; margin-top: var(--space-4); }
.field--kerf { width: 110px; }

/* ── Schema-weergave ───────────────────────────────────────── */
.schema-container { display: flex; flex-direction: column; gap: var(--space-4); }
.schema-figure { margin: 0; }
/* Op smalle/medium schermen kleine platen niet als minuscule figuurtjes tonen: laat ze
   meeschalen naar (vrijwel) de volle kolombreedte zodat het schema leesbaar blijft. */
@media (max-width: 639px) { .schema-figure { width: 100% !important; } }
@media (min-width: 640px) and (max-width: 900px) { .schema-figure { min-width: min(100%, 360px); } }
.schema-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-2); }
.schema-mat-dot { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--mat-fill, var(--panel-fill)); border: 1px solid var(--mat-stroke, var(--panel-stroke)); }
.schema-plaatmaat { color: var(--text-strong); font-weight: var(--weight-semibold); }
.schema-mat-naam { color: var(--text-strong); font-weight: var(--weight-semibold); }
.schema-benut { margin-left: auto; color: var(--text-muted); }
.schema-rest-chip {
  flex: none; font-size: 11px; font-weight: var(--weight-semibold); line-height: 1;
  padding: 3px 7px; border-radius: var(--radius-full);
  background: var(--amber-50); color: var(--amber-700);
}
/* Restplaat: amber accent op het vel, zodat je in het schema ziet dat het een
   reststuk uit de voorraad is. */
.schema-figure--rest .schema-sheet { stroke: var(--amber-700); stroke-dasharray: 18 10; }
.plaat-hint {
  display: inline-block; margin: var(--space-2) 0 0; padding: 5px 11px;
  font-size: 12px; color: var(--amber-700);
  background: var(--amber-50); border: 1px solid var(--amber-100); border-radius: var(--radius-md);
}
.schema-leeg { color: var(--text-muted); font-size: 14px; padding: var(--space-6) 0; text-align: center; }
.schema-svg { width: 100%; height: auto; display: block; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ── Materialenbibliotheek-kiezer ──────────────────────────── */
.mat-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(18, 30, 54, 0.45); padding: var(--space-4);
}
.mat-overlay[hidden] { display: none; }
.mat-dialog {
  width: 100%; max-width: 540px; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.mat-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-2); }
.mat-kop h3 { font-size: var(--text-h3); }
.mat-uitleg { font-size: 13px; color: var(--text-muted); padding: 0 var(--space-4) var(--space-2); margin: 0; }
.mat-lijst { overflow-y: auto; padding: 0 var(--space-4) var(--space-4); }
.mat-sectie-kop { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: var(--space-3) 0 var(--space-2); }
.mat-rij { display: flex; align-items: center; gap: var(--space-2); }
.mat-keuze {
  flex: 1; min-width: 0; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--white); margin-bottom: var(--space-2);
}
.mat-keuze:hover { border-color: var(--color-primary); background: var(--teal-50); }
.mat-keuze .mat-swatch { width: 28px; height: 28px; }
.mat-keuze-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mat-keuze .mat-naam { font-weight: var(--weight-semibold); color: var(--text-strong); }
.mat-keuze .mat-spec { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.mat-leeg { font-size: 13px; color: var(--text-muted); padding: var(--space-2) 0; }

/* Generieke bevestig-modal */
.mat-dialog--smal { max-width: 420px; }
/* Schermvullende modals op smal scherm: meer hoogte, zodat de bediening (knoppen
   onderaan, scrollende inhoud) altijd bereikbaar blijft. */
@media (max-width: 560px) { .mat-dialog { max-height: 92vh; } }
/* Mobiele export-knop bij het resultaat: alleen op smal scherm, binnen duimbereik. */
/* Wrapper telt niet mee in de layout (geen lege flex-gap op desktop), maar bestaat in
   de DOM zodat closest('.menu-wrap') klopt en de buiten-klik het menu niet meteen sluit. */
.result-export-mob-wrap { display: contents; }
.result-export-mob { display: none; }
@media (max-width: 639px) {
  .result-export-mob:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--space-3); }
  /* Export-menu als bottom-sheet op mobiel, zodat de keuzes binnen duimbereik staan. */
  #export-menu:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; min-width: 0; max-width: none; z-index: 90; }
}
.bevestig-acties { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
#bevestig-tekst { padding-bottom: var(--space-2); line-height: 1.45; }

/* ── Kantenband-editor ─────────────────────────────────────── */
.kb-body { padding: 0 var(--space-4) var(--space-4); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.kb-paneel {
  position: relative; width: 200px; height: 200px; margin: var(--space-5) auto var(--space-4);
  background: var(--white); border: 1px dashed var(--border-default); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.kb-maat { font-family: var(--font-mono); color: var(--text-muted); }
/* Randlengtes langs de vier zijden: boven/onder = lengte, links/rechts = breedte. */
.kb-dim { position: absolute; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); pointer-events: none; }
.kb-dim--boven  { top: 24px; left: 30px; right: 30px; text-align: center; }
.kb-dim--onder  { bottom: 24px; left: 30px; right: 30px; text-align: center; }
.kb-dim--links  { left: 24px; top: 30px; bottom: 30px; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; }
.kb-dim--rechts { right: 24px; top: 30px; bottom: 30px; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; }
.kb-rand {
  position: absolute; border: none; background: var(--surface-sunken); color: var(--text-muted);
  font: var(--weight-semibold) 11px var(--font-body); cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; transition: background .12s var(--ease-out), color .12s var(--ease-out);
}
.kb-rand:hover { background: var(--border-default); color: var(--text-strong); }
.kb-rand.is-band { background: var(--color-primary); color: #fff; }
.kb-rand.is-band-reeds { background: var(--amber-600); color: #fff; }
.kb-rand--boven  { top: -11px; left: 30px; right: 30px; height: 30px; }
.kb-rand--onder  { bottom: -11px; left: 30px; right: 30px; height: 30px; }
.kb-rand--links  { left: -11px; top: 30px; bottom: 30px; width: 30px; writing-mode: vertical-rl; }
.kb-rand--rechts { right: -11px; top: 30px; bottom: 30px; width: 30px; writing-mode: vertical-rl; }
.kb-legenda { display: flex; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.kb-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.kb-leg::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.kb-leg--zelf::before { background: var(--color-primary); }
.kb-leg--reeds::before { background: var(--amber-600); }
.kb-regel { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.kb-snel { display: flex; gap: var(--space-2); }
.kb-resultaat { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: 13px; }
/* Partiële fabrieksrand-melding: een deel van de exemplaren valt op een voorgebande
   plaatrand. Amber, net als 'zit er al op', want het is dezelfde soort besparing. */
.kb-deels { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--amber-700, #a66a12); }
.zl-band { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

/* ── Projecttitel + status-chip ────────────────────────────── */
.titel-rij { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
#project-naam { cursor: text; border-radius: var(--radius-sm); }
#project-naam:hover { color: var(--color-primary); }
#project-naam:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.titel-input {
  font: inherit; font-size: var(--text-h1, 1.6rem); font-weight: var(--weight-bold);
  color: var(--text-strong); border: none; border-bottom: 2px solid var(--color-primary);
  background: transparent; padding: 0; width: min(100%, 22ch); max-width: 100%;
}
.titel-input:focus { outline: none; }
.status-chip {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: var(--weight-semibold);
  line-height: 1; padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border-default);
}
.status-chip[hidden] { display: none; }
.status-chip[data-status="gereed"] { background: var(--status-ok-bg, var(--teal-50)); color: var(--status-ok-fg, var(--color-primary)); border-color: transparent; }

/* ── Projectoverzicht (design system: projecten-modal) ─────── */
/* Het dialoogvenster zit in de bestaande .mat-overlay backdrop. */
.proj-modal {
  width: 520px; max-width: 100%; background: var(--surface-card);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: 86vh;
}
.proj-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-2);
}
.proj-modal__head h3 { font-size: 22px; }
.proj-modal__intro { padding: 0 var(--space-5); color: var(--text-muted); font-size: 14px; margin: 0; }
.proj-modal__list { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; min-height: 160px; }
/* Uitnodigende lege staat (geen projecten of geen zoekresultaat). */
.proj-leeg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-muted); margin: auto 0; }
.proj-leeg__icoon { color: var(--border-strong); }
.proj-leeg p { margin: 0; font-size: 14px; max-width: 28ch; }
/* Klein info-merkje bij de Rest/Afval-tegels (tooltip + toegankelijke naam). */
.stat-context { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.stat-info { margin-left: 4px; color: var(--text-muted); font-size: 11px; cursor: pointer; vertical-align: super; }
.stat-info:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; border-radius: 2px; }
/* Aantikbare uitlegbubbel bij het ⓘ (werkt ook op mobiel, waar hover en dus de title-tooltip ontbreekt) */
.uitleg-pop { position: absolute; z-index: 60; max-width: 260px; background: #1f2d4e; color: #fff; font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 8px; box-shadow: 0 4px 14px rgba(20, 40, 80, 0.22); }
.uitleg-pop[hidden] { display: none; }
.proj-modal__foot { padding: 0 var(--space-5) var(--space-5); }

/* Projectrij */
.proj {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); cursor: pointer;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--white); transition: border-color .12s var(--ease-out), background .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.proj:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.proj:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--teal-100); }
.proj.is-open { border-color: var(--color-primary); background: var(--teal-50); }

.proj__main { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.proj__body { flex: 1; min-width: 0; }
.proj__title-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.proj__name { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.proj__meta { margin-top: 3px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.proj__meta .label { font-family: var(--font-body); }

/* Statusbadge = voortgang (In bewerking / Gereed). Los van "nu geopend". */
.status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: var(--weight-semibold); padding: 2px 9px; border-radius: var(--radius-full); }
.status--bewerking { background: var(--surface-sunken); color: var(--text-muted); }
.status--gereed { background: var(--status-ok-bg); color: var(--status-ok-fg); }

/* Type-chip: kastontwerp vs alleen zaagschema (outline, los van de status-badge) */
.proj__type { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: var(--weight-medium); padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid var(--border-default); color: var(--text-muted); }
.proj__type svg { flex: 0 0 auto; }
.proj__type--kast { border-color: var(--teal-100); background: var(--teal-50); color: var(--teal-700); }
.proj__type--zaag { border-color: var(--border-strong); color: var(--text-muted); }

/* "Nu geopend" — een plaats-markering, geen status */
.open-marker { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: var(--weight-semibold); color: var(--teal-700); }
.open-marker .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-primary); }
.proj:not(.is-open) .open-marker { display: none; }

/* Gereed-rij iets rustiger (afgerond gevoel) */
.proj.is-done:not(.is-open) .proj__name { color: var(--text-muted); }

/* Actiebalk: rustig tot je de rij aanraakt */
.proj__actions { display: flex; align-items: center; gap: 2px; flex: none; opacity: 0; transition: opacity .12s var(--ease-out); }
.proj:hover .proj__actions,
.proj:focus-within .proj__actions { opacity: 1; }
@media (hover: none) { .proj__actions { opacity: 1; } }

.iconbtn {
  width: 38px; height: 38px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-sm); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { background: var(--white); color: var(--teal-700); box-shadow: var(--shadow-xs); }
.proj.is-open .iconbtn:hover { background: #fff; }
.iconbtn svg { display: block; }
/* Verwijderen apart gezet + pas terracotta bij hover */
.iconbtn--danger { margin-left: var(--space-2); position: relative; }
.iconbtn--danger::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-1)); top: 8px; bottom: 8px;
  width: 1px; background: var(--border-default);
}
.iconbtn--danger:hover { background: var(--status-warn-bg); color: var(--status-warn-fg); }

/* Inline rename binnen de rij */
.proj__name-input {
  font: var(--weight-semibold) 15px var(--font-body); color: var(--text-strong);
  border: none; border-bottom: 2px solid var(--color-primary); background: transparent;
  padding: 0; min-width: 8ch; max-width: 100%;
}
.proj__name-input:focus { outline: none; }

/* Bevestiging bij verwijderen (vervangt de rij-inhoud) */
.proj.confirming { border-color: var(--status-warn-fg); background: var(--status-warn-bg); cursor: default; }
.confirm { display: flex; align-items: center; gap: var(--space-3); width: 100%; flex-wrap: wrap; }
.confirm__text { flex: 1; min-width: 12ch; color: var(--rust-700); font-size: 14px; }
.confirm__text b { font-weight: var(--weight-semibold); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn--danger { background: var(--rust-600); color: #fff; }
.hidden { display: none !important; }

/* ── Pull-to-refresh ───────────────────────────────────────── */
.ptr {
  position: fixed; top: 0; left: 50%; z-index: 80;
  width: 40px; height: 40px; margin-left: -20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
  transform: translateY(-52px); opacity: 0; pointer-events: none;
}
.ptr.ptr--terug { transition: transform .2s var(--ease-out), opacity .2s var(--ease-out); }
.ptr-icoon { width: 22px; height: 22px; color: var(--color-primary); display: block; }
.ptr.ptr--laden .ptr-icoon { animation: ptr-tol .7s linear infinite; }
@keyframes ptr-tol { to { transform: rotate(360deg); } }

/* ── Restvoorraad (design system: restvoorraad) ────────────── */
.rest-list { gap: var(--space-3); }
.rest-item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--white);
}
.rest-item .ico {
  width: 46px; height: 46px; flex: none; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-50); color: var(--amber-700); font-size: 20px;
}
.rest-item .info { flex: 1; min-width: 0; }
.rest-item .info .mat { font-weight: var(--weight-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rest-item .info .dim { font-size: 13px; color: var(--text-muted); }
.rest-item .info .from { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.rest-item .info .mat { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rest-item.is-geclaimd { opacity: .7; }
.rest-acties { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.rest-leeg { color: var(--text-muted); font-size: 14px; padding: var(--space-3) 0; }

.rest-optie { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--border-default); }
.rest-optie .schakelaar { font-weight: var(--weight-semibold); }

.rest-form { display: flex; flex-direction: column; gap: var(--space-3); }
.rest-form__velden { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rest-form__velden #rest-materiaal { flex: 1 1 140px; min-width: 120px; }
.rest-form__velden .input--mono { width: 64px; flex: 0 0 auto; }
.rest-form__velden #rest-dikte { width: 72px; }
.rest-form__x { color: var(--text-muted); }

/* Weergave-acties (zaagsneden-schakelaar + vergroten) */
.weergave-acties { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* Weergave-opties (zaagsneden/maten/kleur/tekstgrootte) achter één knop -> knoppenrij op één regel. */
.wv-opties { position: relative; display: inline-flex; }
.wv-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .08);
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); min-width: 210px; }
.wv-menu[hidden] { display: none; }
.wv-menu .schakelaar { font-size: 14px; }
.wv-tekst { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-size: 14px; color: var(--text-strong); padding-top: var(--space-2); border-top: 1px solid var(--border-default); }
.wv-tekst .tekst-schaal { display: inline-flex; gap: var(--space-1); }

/* Schermvullende vergroot-/zoommodus */
.fs-overlay { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--surface-page); }
.fs-overlay[hidden] { display: none; }
body.fs-open { overflow: hidden; }
.fs-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); background: var(--surface-card); border-bottom: 1px solid var(--border-default);
}
.fs-titel { font-weight: var(--weight-semibold); color: var(--text-strong); margin-right: auto; }
.fs-zoomknoppen { display: flex; gap: var(--space-1); }
.fs-zoomknoppen .btn { min-width: var(--tap-min); }
/* Echte scroll met scrollbar voor navigeren; alleen vegen/scrollen, geen browser-pinch. */
.fs-viewport { flex: 1; position: relative; overflow: auto; touch-action: pan-x pan-y; background: var(--surface-page); -webkit-overflow-scrolling: touch; }
/* Het echte schema-wrap verhuist in fullscreen hierheen en is de scroll-inhoud
   (maat via JS = geschaalde grootte); de schema-laag krijgt de zoom-transform,
   de overlays (popover/ghost/melding) blijven op schermschaal en scrollen mee. */
.schema-wrap.in-fs { position: relative; }
.schema-wrap.in-fs .schema-container { transform-origin: 0 0; will-change: transform; }

/* Bewerk-balk boven het schema (ongedaan maken / terug naar automatisch) */
.bewerk-balk { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.bewerk-balk[hidden] { display: none; }
.bewerk-balk .btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }

/* Selectie van een onderdeel in het schema. Slepen/selecteren kan alleen in de
   geavanceerde modus; daarom daar pas de grab-cursor en touch-action:none. */
.paneel { cursor: default; }
body.geavanceerd .paneel { cursor: grab; touch-action: none; }
.paneel.vergrendeld .paneel-vlak { stroke: var(--navy-500); stroke-width: 8; }
.paneel.geselecteerd .paneel-vlak { stroke: var(--color-accent); stroke-width: 14; }
.slot-body   { fill: var(--navy-700); }
.slot-beugel { stroke: var(--navy-700); }

/* Zwevende bediening bij het geselecteerde onderdeel */
.schema-wrap { position: relative; }
.stuk-popover {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: var(--space-2);
  max-width: calc(100% - 8px); padding: 6px 8px; background: var(--white);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.pop-info { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-2); padding: 0 2px 0 4px; min-width: 0; }
.pop-tekst { display: flex; flex-direction: column; min-width: 0; }
.pop-naam {
  font-weight: var(--weight-semibold); color: var(--text-strong); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pop-maat { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.pop-btn { flex: 0 0 auto; }
.pop-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min); padding: 0;
  background: var(--white); color: var(--text-strong);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer;
}
.pop-btn:hover { background: var(--surface-sunken); }
.pop-btn.is-actief { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.pop-sluit { color: var(--text-muted); }
.pop-nerf-glyph { display: inline-flex; }
.pop-nerf-glyph .nerf-svg { width: 20px; height: 20px; }
/* Pijltje naar het onderdeel; --pijl-x volgt het midden van het stuk. */
.pop-pijl { position: absolute; bottom: -7px; left: var(--pijl-x, 50%); width: 14px; height: 7px; overflow: hidden; }
.pop-pijl::after {
  content: ''; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg); background: var(--white); border: 1px solid var(--border-default);
}
.stuk-popover.onder .pop-pijl { bottom: auto; top: -7px; }
.stuk-popover.onder .pop-pijl::after { top: auto; bottom: -7px; }
/* Foutmelding (bijv. niet kunnen draaien) zweeft onder de betrokken plaat. */
.stuk-melding {
  position: absolute; z-index: 4; max-width: calc(100% - 8px);
  padding: 8px 12px; font-size: 14px; border-radius: var(--radius-md);
  background: var(--status-warn-bg); color: var(--status-warn-fg); box-shadow: var(--shadow-sm);
}
/* Sleep-schaduw tijdens verslepen */
.sleep-ghost {
  position: absolute; z-index: 6; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-accent); border-radius: 4px;
  background: rgba(200, 132, 30, 0.18);
  font-family: var(--font-mono); font-size: 13px; font-weight: var(--weight-semibold);
  color: var(--text-strong); box-shadow: var(--shadow-md);
}
.schema-wrap.sleept .paneel { cursor: grabbing; }
/* Tijdens een actieve sleep geen tekstselectie, nergens. */
body.sleept-bezig { -webkit-user-select: none; user-select: none; cursor: grabbing; }

/* SVG-onderdelen — lichte technische-tekening-stijl */
.schema-sheet  { fill: var(--white); stroke: var(--border-strong); stroke-width: 2; }
.trim-rand     { fill: none; stroke: var(--rust-600, #b4532a); stroke-dasharray: 14 9; opacity: .7; }
.hatch-line    { stroke: var(--waste-line); }
.paneel-vlak   { fill: var(--mat-fill, var(--panel-fill)); stroke: var(--mat-stroke, var(--panel-stroke)); stroke-width: 2; }
.paneel-band   { stroke: var(--teal-600, var(--color-primary)); stroke-width: 11; stroke-linecap: round; opacity: .92; }
/* Grondig zoeken: knop + voortgangspaneel. */
.btn-grondig { border-color: var(--teal-500, var(--color-primary)); color: var(--teal-700); }
.btn-grondig:hover { background: var(--teal-50); }
.grondig-paneel { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: var(--radius-md); font-size: 13px; color: var(--teal-700); }
.grondig-paneel .btn { margin-left: auto; }
.grondig-tekst { font-weight: var(--weight-semibold); }
.grondig-klaar-icoon { font-weight: 700; color: var(--teal-700); }
.grondig-spin { width: 15px; height: 15px; flex: none; border: 2px solid var(--teal-100); border-top-color: var(--teal-600); border-radius: 50%; animation: grondigSpin .7s linear infinite; }
@keyframes grondigSpin { to { transform: rotate(360deg); } }
.cnc-notice { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); background: var(--status-warn-bg); color: var(--status-warn-fg); border-radius: var(--radius-md); font-size: 13px; font-weight: var(--weight-semibold); }
.paneel-badge  { fill: var(--navy-700); }
.paneel-badge-tekst { fill: #fff; font-family: var(--font-display); font-weight: var(--weight-semibold); }
.paneel-naam   { fill: var(--navy-700); font-family: var(--font-display); font-weight: var(--weight-semibold); }
.paneel-maat   { fill: var(--navy-700); font-weight: var(--weight-medium); }
.paneel-naam + .paneel-maat { fill: var(--gray-500); }
.nerf-lijn     { stroke: var(--nerf-line); stroke-width: 2; stroke-linecap: round; }
.rest-vlak     { fill: none; stroke: var(--rest-color); stroke-width: 3; stroke-dasharray: 20 12; }
.rest-tekst    { fill: var(--rest-color); font-family: var(--font-display); font-weight: var(--weight-semibold); }
/* Schuine zaaglijn (zolderkast): afvaldriehoek + diagonale snede op de omhullende plaat */
.schuin-afval    { fill: var(--navy-700, #1B2A4A); opacity: .10; }
.schuin-zaaglijn { fill: none; stroke: var(--navy-700, #1B2A4A); stroke-width: 5; stroke-dasharray: 16 9; stroke-linecap: round; }
.schuin-maat     { fill: var(--navy-700, #1B2A4A); font-weight: var(--weight-medium); }
.schuin-hoek     { fill: var(--navy-700, #1B2A4A); font-weight: var(--weight-semibold); }
.schuin-hoekboog { fill: none; stroke: var(--navy-700, #1B2A4A); stroke-width: 3; opacity: .65; }
.schuin-maatlijn { fill: none; stroke: var(--navy-700, #1B2A4A); stroke-width: 2.5; opacity: .55; stroke-linecap: round; }
/* Weergave-toggles: maten verbergen (Dimensions) en kleurvulling uit (Color fill,
   voor zwart-wit printen). Stuk vs offcut/afval blijft leesbaar via rand + arcering. */
.geen-maten .paneel-maat { display: none; }
.geen-maten .rest-tekst.num { display: none; }   /* offcut-maat volgt de Dimensions-toggle, label blijft */
.geen-vulling .paneel-vlak { fill: #fff; stroke: var(--navy-400, #5b6b85); stroke-width: 2; }
/* Zaagsneden-laag: standaard verborgen, zichtbaar bij klasse 'toon-snedes' */
.snede-laag    { display: none; }
.toon-snedes .snede-laag { display: block; }
.snede-lijn    { stroke: var(--amber-600); stroke-dasharray: 22 14; stroke-linecap: round; }
.snede-badge   { fill: var(--amber-600); }
.snede-nummer  { fill: #fff; font-family: var(--font-display); font-weight: var(--weight-semibold); }

/* Geanimeerde zaagvolgorde: tijdens het afspelen dimmen de nog te zagen sneden,
   de gedane vervagen verder, en de actieve snede licht op (navy + dikker). */
.snede-item { transition: opacity .2s var(--ease-out); }
.zaag-bezig .snede-item.is-todo { opacity: .28; }
.zaag-bezig .snede-item.is-af { opacity: .5; }
.zaag-bezig .snede-item.is-af .snede-lijn { stroke: var(--gray-300); }
.zaag-bezig .snede-item.is-af .snede-badge { fill: var(--gray-300); }
/* De actieve snede 'tekent' zich, alsof de zaag de lijn loopt (genormaliseerd via pathLength). */
.snede-item.is-actief .snede-lijn { stroke: var(--navy-700); stroke-dasharray: 100; animation: snede-teken .42s var(--ease-out) forwards; }
@keyframes snede-teken { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .snede-item.is-actief .snede-lijn { animation: none; stroke-dasharray: none; } }
.snede-item.is-actief .snede-badge { fill: var(--navy-700); }
.snede-item.is-actief { animation: snede-pop .18s var(--ease-out); }
@keyframes snede-pop { 0% { opacity: .3; } 100% { opacity: 1; } }
.maatlijn line { stroke: var(--gray-300); }
.maat-tekst    { fill: var(--text-muted); }

/* ── Restplaten-overzicht ──────────────────────────────────── */
.restplaten { margin-top: var(--space-5); }
.rest-titel { font-size: var(--text-h3); display: flex; align-items: baseline; gap: var(--space-2); }
.rest-titel .num { color: var(--text-muted); font-weight: var(--weight-regular); font-size: 15px; }
.rest-uitleg { font-size: 13px; color: var(--text-muted); margin: var(--space-1) 0 var(--space-3); }
.rest-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rest-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: var(--radius-md);
  border: 1px dashed var(--rest-color); background: var(--status-ok-bg);
  color: var(--green-700); font-size: 13px;
}

/* ── Zaaglijst-tabel ───────────────────────────────────────── */
.tabel-scroll { overflow-x: auto; }
.zaaglijst-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.zaaglijst-tabel th {
  text-align: left; padding: 0 var(--space-2) var(--space-2);
  font-size: 12px; font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap;
}
.zaaglijst-tabel td { padding: var(--space-2); border-top: 1px solid var(--border-default); vertical-align: middle; }
.zaaglijst-tabel th:nth-child(3), .zaaglijst-tabel th:nth-child(4), .zaaglijst-tabel th:nth-child(5) { text-align: right; }
.zl-naam { font-weight: var(--weight-medium); color: var(--text-strong); }
.zl-maat, .zl-aantal { text-align: right; white-space: nowrap; color: var(--text-body); }
.zl-anders { color: var(--amber-700); font-weight: var(--weight-semibold); }
.zaaglijst-uitleg { font-size: 13px; color: var(--text-muted); margin-top: var(--space-3); }

/* ── Zaagvolgorde (afvinkbaar aan de zaagtafel) ────────────── */
.num-badge {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-700); color: #fff;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 12px;
}
.schakelaar {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 14px; font-weight: var(--weight-medium); color: var(--text-strong); cursor: pointer;
}
.schakelaar input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.num-badge--snede { background: var(--amber-600); }
.zaag-plaat + .zaag-plaat { margin-top: var(--space-5); }
.zaag-plaat-kop { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.zaag-stappen { list-style: none; margin: 0; padding: 0; }
.zaag-stap label {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-default); cursor: pointer;
}
.zaag-check { width: 24px; height: 24px; flex: none; accent-color: var(--color-primary); }
.zaag-naam { flex: 1; font-weight: var(--weight-medium); color: var(--text-strong); }
.zaag-maat { color: var(--text-muted); font-size: 13px; }
.zaag-stap.af .zaag-naam, .zaag-stap.af .zaag-maat { text-decoration: line-through; color: var(--text-muted); }
.zaag-stap.af .num-badge { opacity: .45; }

/* Afspeelbalk van de zaagvolgorde — een toolbar boven de platenweergave */
.zaag-speler-host { margin-bottom: var(--space-2); }
.zaag-speler-host[hidden] { display: none; }
.zaag-speler { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 5px var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); }
.zaag-speler-titel { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-muted); margin-right: var(--space-1); }
.zaag-speler .iconbtn { width: 38px; height: 38px; background: var(--white); }
.zaag-speler [data-zaag="speel"] { display: inline-flex; align-items: center; gap: 6px; }
.zaag-teller { margin-left: auto; font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* Fullscreen "Zaag mee": afspeelbalk vast onderin de focusmodus */
.fs-speler { flex: none; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-default); background: var(--surface-card); display: flex; justify-content: center; }
.fs-speler[hidden] { display: none; }
.zaag-speler--fs { background: transparent; padding: 0; flex-wrap: nowrap; }
.zaag-speler--fs .zaag-teller { margin-left: var(--space-2); }
.zaag-stap.actief label { background: var(--amber-50); border-radius: var(--radius-md); }
.zaag-stap.actief .zaag-naam { color: var(--amber-700); }
.zaag-stap.actief .num-badge { box-shadow: 0 0 0 3px var(--amber-100); }

/* ── Statistieken (één rustig paneel met scheidingslijnen) ──── */
/* Responsieve grid: op brede schermen één rij, op een telefoon vanzelf in twee
   rijen. De 1px-gap toont de paneelachtergrond als nette hairlines tussen de cellen. */
/* Samenvatting boven de tekening: compact + inklapbaar. Ingeklapt = één regel met het
   held-cijfer (benut%), een dunne gestapelde balk en gedempt "N platen · X% afval". */
.samenvatting { margin: 0 0 var(--space-4); }
.samenvatting[hidden] { display: none; }
.sv-kop { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; padding: var(--space-1) 0; border-bottom: 1px solid var(--border-default); }
.sv-kop::-webkit-details-marker { display: none; }
.sv-kop:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.sv-regel { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex: 1; min-width: 0; flex-wrap: wrap; }
.sv-hero { font-family: var(--font-mono); font-size: 26px; font-weight: var(--weight-medium); line-height: 1; color: var(--teal-600); }
.sv-hero small { font-size: 15px; font-weight: var(--weight-medium); color: var(--teal-600); margin-left: 1px; }
.sv-hero-lbl { font-size: 13px; color: var(--text-muted); }
.sv-balk { flex: 0 0 auto; width: 92px; height: 6px; }
.sv-sec { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-left: auto; }
.sv-chev { flex: none; color: var(--text-muted); transition: transform .15s var(--ease-out); }
.samenvatting[open] .sv-chev { transform: rotate(180deg); }
.sv-body { padding-top: var(--space-4); }

/* Cijferrij (uitgeklapt): rustige figuur-plus-label-paren, geen tegels, geen kleur. */
.statspanel { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; }
.statspanel:empty { display: none; }
.statspanel-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.statspanel .value { font-family: var(--font-mono); font-size: 15px; font-weight: var(--weight-semibold); line-height: 1.2; color: var(--text-strong); white-space: nowrap; }
.statspanel .value small { font-size: 12px; font-weight: var(--weight-medium); color: var(--text-muted); }
.statspanel .value small.euro { margin-right: 3px; }
.statspanel .label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
/* Resultaat-toolbar: volwaardige tikvlakken aan de werkbank (mobiel). */
@media (max-width: 720px) { .btn--klein { min-height: 44px; } }

/* Uitsplitsing per materiaal (alleen bij 2+ materialen) */
.per-materiaal { margin-top: var(--space-5); border-top: 1px solid var(--border-default); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.per-materiaal[hidden] { display: none; }
.pm-titel { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-muted); margin: 0; }
.pm-rij { display: flex; flex-direction: column; gap: 6px; }
.pm-kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pm-naam { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: 14px; }
.pm-platen { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pm-balk { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-sunken); }
.pm-seg { height: 100%; }
.pm-seg--benut { background: var(--teal-600); }
.pm-seg--rest { background: var(--teal-200); }
.pm-seg--afval { background: var(--gray-300); }
.pm-cijfers { font-size: 12px; color: var(--text-muted); }
.pm-cijfers .pm-benut { color: var(--teal-700); }
.pm-cijfers .pm-rest { color: var(--text-muted); }
/* Geruststellende balk + kopregel boven de losse totaal-tegels */
.stat-balk { margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: 6px; }
.stat-balk[hidden] { display: none; }
.stat-balk-kop { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-strong); }
.stat-balk .pm-balk { height: 14px; }
.stat-balk .pm-cijfers { font-size: 13px; }
/* Dezelfde balk per plaat: ruimte tussen de kop en de detaillijst */
.plaatstats > .pm-balk { margin: 6px 0 var(--space-3); }
.value--ok    { color: var(--status-ok-fg); }
.value--warn  { color: var(--status-warn-fg); }
.value--teal  { color: var(--teal-600); }
.value--amber { color: var(--amber-600); }

/* Per-plaat statistieken (blader met ‹ N / M ›) */
.plaatstats { margin-top: var(--space-5); border-top: 1px solid var(--border-default); padding-top: var(--space-4); }
.plaatstats[hidden] { display: none; }
.ps-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.ps-titel { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-muted); margin: 0; }
.ps-nav { display: flex; align-items: center; gap: var(--space-2); }
.ps-teller { font-size: 13px; color: var(--text-muted); min-width: 52px; text-align: center; }
.ps-btn { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default); background: var(--surface-card); border-radius: var(--radius-md);
  font-size: 20px; line-height: 1; color: var(--text-strong); cursor: pointer; }
.ps-btn:hover:not(:disabled) { background: var(--surface-sunken); }
.ps-btn:disabled { opacity: .4; cursor: default; }
.ps-lijst { display: flex; flex-direction: column; }
.ps-rij { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 7px 0; border-top: 1px solid var(--border-default); }
.ps-rij:first-child { border-top: 0; }
.ps-lbl { font-size: 13px; color: var(--text-muted); }
.ps-val { font-size: 14px; font-weight: var(--weight-semibold); color: var(--text-strong); text-align: right; }
.ps-pct { color: var(--text-muted); font-weight: var(--weight-regular); margin-left: 4px; }
.ps-tag { display: inline-block; font-size: 11px; font-weight: var(--weight-semibold); color: var(--teal-700);
  background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }

/* ── Melding ───────────────────────────────────────────────── */
.melding { margin-top: var(--space-3); font-size: 14px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.melding--warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.melding--ok { background: var(--status-ok-bg); color: var(--status-ok-fg); }

/* Op smalle schermen de aantal-kolom iets ruimer onder elkaar houden */
@media (max-width: 420px) {
  .maten-rij { grid-template-columns: 1fr 1fr; }
  .field--aantal { width: auto; grid-column: 1 / -1; }
  /* Weergave-acties als eigen, volle regel onder de titel; netjes verdeeld. */
  .weergave-acties { width: 100%; justify-content: space-between; gap: var(--space-2) var(--space-3); }
}

/* ── Labels printen ────────────────────────────────────────── */
.mat-dialog--breed { max-width: 880px; width: calc(100vw - var(--space-6)); }
.label-intro { margin: 0 var(--space-4); color: var(--text-muted); font-size: 14px; }
.label-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
.label-bar .label-aantal { color: var(--text-muted); font-size: 13px; }
.label-bar #label-print { margin-left: auto; }
.label-preview { max-height: 62vh; overflow: auto; padding: 0 var(--space-4) var(--space-4); }
.label-leeg { color: var(--text-muted); padding: var(--space-4); }

.lbl-groep { margin-bottom: var(--space-4); }
.lbl-groep-kop { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-muted); margin: 0 0 var(--space-2); padding-bottom: 4px; border-bottom: 1px solid var(--border-default); }
.lbl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.lbl-grid--compact { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

.lbl { border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 10px 12px; background: var(--white); break-inside: avoid; page-break-inside: avoid; }
.lbl-kop { display: flex; align-items: center; gap: 8px; }
.lbl-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; background: var(--navy-700); color: #fff; border-radius: 7px; font-size: 14px; font-weight: var(--weight-semibold); }
.lbl-kop-tekst { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.lbl-naam { font-weight: var(--weight-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbl-project { font-size: 11px; color: var(--text-muted); }
.lbl-kopie { margin-left: auto; font-size: 12px; font-weight: var(--weight-semibold); color: var(--amber-700); background: var(--amber-50); padding: 2px 7px; border-radius: 999px; }

.lbl-body { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.lbl-maten { flex: 1 1 auto; min-width: 0; }
.lbl-rij { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 1px 0; }
.lbl-cap { color: var(--text-muted); }
.lbl-zaag { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: 15px; white-space: nowrap; }
.lbl-eind { color: var(--text-muted); white-space: nowrap; }
.lbl-diagram { flex: 0 0 auto; }
.lbl-svg { width: 96px; height: 60px; display: block; }
.lbl-paneel { fill: var(--gray-100); stroke: var(--navy-300); stroke-width: 1.5; }
.lbl-band-lijn { stroke: var(--amber-600); stroke-width: 4; stroke-linecap: round; }
.lbl-band-reeds { stroke-dasharray: 5 4; }
.lbl-nerf { stroke: var(--navy-500); stroke-width: 1.5; fill: none; }
.lbl-voet { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border-default); font-size: 11px; color: var(--text-muted); }

.lbl--compact { padding: 7px 9px; }
.lbl--compact .lbl-zaag { font-size: 14px; margin-top: 3px; }
.lbl--compact .lbl-meta { font-size: 12px; color: var(--text-muted); }
.lbl--compact .lbl-voet { margin-top: 5px; }

@media (max-width: 560px) {
  .lbl-grid { grid-template-columns: 1fr; }
  .lbl-grid--compact { grid-template-columns: repeat(2, 1fr); }
}

#label-vel { display: none; }
.lbl-vel-kop { display: none; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--amber-600); font-weight: var(--weight-semibold); }

/* CSV-import-modal */
.csv-body { padding: 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.csv-tekst { width: 100%; resize: vertical; min-height: 120px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font: 13px var(--font-mono); color: var(--text-strong); background: var(--white); }
.csv-tekst:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--teal-50); }
.csv-rij { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.csv-bestand { cursor: pointer; }
.csv-preview { color: var(--text-muted); font-size: 13px; }
.csv-voet { display: flex; justify-content: flex-end; padding: var(--space-3) var(--space-4) var(--space-4); }

/* ── Printen / PDF ─────────────────────────────────────────── */
@media print {
  @page { margin: 14mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }

  /* Labels printen: alleen het labelvel, de rest verbergen. */
  body.print-labels .app, body.print-labels .mat-overlay { display: none !important; }
  body.print-labels #label-vel { display: block; }
  body.print-labels .lbl-vel-kop { display: flex; }
  #label-vel .lbl-groep-kop { border-color: #bbb; }
  #label-vel .lbl-grid { gap: 8px; }
  #label-vel .lbl-grid--compact { grid-template-columns: repeat(3, 1fr); }
  #label-vel .lbl { border-color: #999; }
  .topbar, .toolbar, .berekenbar, .tabbar, .modus-switch, .kop, .kolom--invoer, .melding, .app-info { display: none !important; }
  /* Scherm-bediening en de demo-strook horen niet op papier. */
  #demo-strip, .section-head .btn, .kolom-splitter { display: none !important; }
  /* De weergave-kaart (schema's + restplaten) is groter dan één pagina; met
     break-inside:avoid schoof hij integraal naar pagina 2 en bleef pagina 1
     vrijwel leeg. Laat juist déze kaart doorbreken; de losse figuren erin
     houden hun eigen avoid. */
  .kolom--weergave > .card { break-inside: auto; page-break-inside: auto; }
  .app { min-height: 0; }
  .content { padding: 0; gap: var(--space-4); }
  .two-col { display: block !important; }
  .print-kop { display: block !important; }
  .card { box-shadow: none; break-inside: avoid; page-break-inside: avoid; margin-bottom: var(--space-4); }
  /* Accordeons worden vóór het printen via JS opengeklapt; verberg alleen de chevron. */
  .result-acc > summary.result-acc-head::before { display: none; }
  .schema-figure, .zaag-stap, .zaaglijst-tabel tr, .stat-tile, .rest-chip { break-inside: avoid; page-break-inside: avoid; }
  .schema-svg { max-height: 60vh; }

  /* Lineair zagen: alleen het resultaat (strip + zaagvolgorde) printen, invoer eruit. */
  .lin-wrap { display: block !important; }
  .lin-invoer, .lin-detail, .lin-add { display: none !important; }
  .lin-staafrow, .lin-volg-staaf, .lin-snede { break-inside: avoid; page-break-inside: avoid; }

  /* Kastontwerp: alleen de tekening + samenvatting printen, bedieningselementen eruit. */
  .kast-kop-rij, .kast-sub, .kast-maatrij, .kast-werkbalk, .kast-palette,
  .kast-paneel, .kast-naarzaag, .kast-validatie { display: none !important; }
  .kast-editor { display: block !important; }
  .kast-editor-zij { margin-top: var(--space-4); }
  .kast-stage { box-shadow: none; border: 1px solid #ddd; }
  .kast-tekening { break-inside: avoid; page-break-inside: avoid; }
  .kast-tekening svg { max-height: 64vh; width: auto; max-width: 100%; height: auto; margin: 0 auto; display: block; }
}

/* ── Plaatmateriaal-catalogus ──────────────────────────────────── */
.mat-dialog--catalogus { max-width: 1320px; width: calc(100vw - var(--space-5)); max-height: 92vh; display: flex; flex-direction: column; }
.cat-kop-acties { display: flex; gap: var(--space-2); }
.cat-host { flex: 1; overflow: auto; padding: 0 var(--space-4) var(--space-4); }
.cat-laden, .cat-leeg { color: var(--text-muted); padding: var(--space-5); text-align: center; }

.cat-bar { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) 0 var(--space-3); position: sticky; top: 0; background: var(--surface-card); z-index: 2; }
.cat-zoek { flex: 1; }
.cat-zoek input { width: 100%; min-height: 42px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: 16px; background: var(--white); color: var(--text-strong); }
.cat-zoek input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--teal-50); }
.cat-filterknop { display: none; }
.cat-filterbadge { background: var(--teal-600); color: #fff; border-radius: 999px; padding: 0 6px; margin-left: 4px; font-size: 12px; }
.cat-info-knop { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--white); color: var(--teal-700); font: 700 16px var(--font-body); cursor: pointer; }
.cat-info-knop:hover { border-color: var(--teal-600); background: var(--teal-50); }

/* Uitleg-paneel over de bibliotheek */
.cat-uitleg { max-width: 640px; margin: 0 auto; padding: 4px 0 12px; }
.cat-uitleg-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cat-uitleg-kop h3 { font-size: 18px; margin: 0; color: var(--text-strong); }
.cat-uitleg-intro { font-size: 15px; line-height: 1.55; color: var(--text-body, var(--text-strong)); margin: 0 0 14px; }
.cat-uitleg h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 18px 0 6px; }
.cat-uitleg p { font-size: 15px; line-height: 1.55; color: var(--text-body, var(--text-strong)); margin: 0; }
.cat-uitleg-lijst { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.cat-uitleg-lijst li { background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-100); border-radius: 999px; padding: 4px 12px; font-size: 14px; }

.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--space-3); }
.cat-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: var(--weight-medium); padding: 3px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-fg); border: 1px solid var(--chip-rand); cursor: pointer; }
.cat-wis { margin-left: auto; background: none; border: none; color: var(--text-link); font-size: 13px; cursor: pointer; font-weight: var(--weight-medium); }

.cat-body { display: grid; grid-template-columns: 230px 1fr; gap: var(--space-5); align-items: start; }
.cat-facetten { display: flex; flex-direction: column; gap: var(--space-4); }
.cat-facetten-kop { display: none; }
.facet-groep { display: flex; flex-direction: column; gap: 2px; }
.facet-titel { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 4px; }
.facet-optie { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 6px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; }
.facet-optie.is-aan { background: var(--facet-actief-bg); }
.facet-optie.is-uit { opacity: .4; cursor: default; }
.facet-optie input { width: 18px; height: 18px; accent-color: var(--color-primary); flex: none; }
.facet-label { flex: 1; color: var(--text-strong); }
.facet-aantal { color: var(--facet-aantal); font-size: 12px; }

.cat-telling { font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-2); }
.cat-tabel { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(6, max-content); align-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.cat-koprij, .cat-rij { display: contents; }
.cat-th { background: var(--surface-sunken); border: none; border-bottom: 1px solid var(--border-default); padding: 9px 10px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); text-align: left; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.cat-th.is-actief { color: var(--teal-700); }
.cat-th-actie { cursor: default; }
.cat-pijl { font-size: 11px; opacity: .6; }
.cat-th.is-actief .cat-pijl { opacity: 1; }
.cat-c { padding: 8px 10px; border-bottom: 1px solid var(--border-default); font-size: 13px; color: var(--text-strong); }
.cat-rij:hover .cat-c { background: var(--teal-50); }
/* De hele rij is klikbaar om de plaat te kiezen (de knop/links houden hun eigen cursor). */
.cat-rij .cat-c { cursor: pointer; }
.cat-rij .cat-c a, .cat-rij .cat-c .cat-bekijk { cursor: pointer; }
.cat-c-plaat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cat-naam { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-thumb { position: relative; width: 46px; height: 32px; border-radius: 5px; flex: none; border: 1px solid rgba(0,0,0,.08); display: flex; align-items: flex-end; justify-content: flex-end; }
.cat-thumb-dikte { font-size: 11px; color: var(--navy-700); background: rgba(255,255,255,.82); border-radius: 3px 0 4px 0; padding: 0 3px; line-height: 1.4; }
.cat-thumb-dikte small { font-size: 10px; }
.winkel-badge { display: inline-block; font-size: 12px; font-weight: var(--weight-medium); padding: 2px 8px; border-radius: 999px; background: var(--winkel-badge-bg); color: var(--winkel-badge-fg); border: 1px solid var(--winkel-badge-rand); white-space: nowrap; }
.cat-c-prijs { display: flex; flex-direction: column; line-height: 1.25; }
.cat-prijs { font-weight: var(--weight-semibold); color: var(--prijs-kleur); white-space: nowrap; }
.cat-indicatie { font-size: 11px; color: var(--text-muted); }
.cat-verouderd { display: block; font-size: 11px; color: var(--verouderd-fg); }
.cat-c-actie { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cat-c-actie .cat-add { padding: 6px 10px; }
.cat-bekijk { font-size: 12px; color: var(--text-link); text-decoration: none; white-space: nowrap; }
.cat-add.is-toegevoegd { background: var(--status-ok-fg, #1a7f4b); border-color: transparent; }
.cat-vertrouwen { font-size: 12px; color: var(--text-muted); margin-top: var(--space-3); }
.cat-geen { text-align: center; padding: var(--space-6) var(--space-4); color: var(--text-muted); display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }

/* Mobiel: kaarten + filter-sheet */
@media (max-width: 760px) {
  .cat-filterknop { display: inline-flex; }
  .cat-body { grid-template-columns: 1fr; }
  .cat-facetten { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow: auto; background: var(--surface-card); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.18); padding: var(--space-4); transform: translateY(102%); transition: transform .22s var(--ease-out); z-index: 5; }
  .cat-facetten.is-open { transform: none; }
  .cat-facetten-kop { display: flex; align-items: center; justify-content: space-between; font-weight: var(--weight-semibold); margin-bottom: var(--space-2); position: sticky; top: 0; background: var(--surface-card); }
  .cat-naam { white-space: normal; overflow: visible; }
  .cat-tabel { display: block; border: none; }
  .cat-koprij { display: none; }
  .cat-rij { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px; margin-bottom: var(--space-3); align-items: center; }
  .cat-rij:hover .cat-c { background: transparent; }
  .cat-c { border: none; padding: 2px 0; }
  .cat-c-plaat { grid-column: 1 / -1; }
  .cat-c-plaat .cat-thumb { width: 56px; height: 38px; }
  .cat-c-formaat, .cat-c-dikte, .cat-c-nerf, .cat-c-winkel { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 13px; }
  .cat-c-formaat::before, .cat-c-dikte::before, .cat-c-nerf::before, .cat-c-winkel::before { content: attr(data-l); color: var(--text-muted); }
  .cat-c-prijs { grid-column: 1 / -1; margin-top: 4px; }
  .cat-c-prijs::before { content: ''; }
  .cat-c-actie { grid-column: 1 / -1; justify-content: space-between; margin-top: 8px; }
  .cat-c-actie .cat-add { flex: 1; }
}

/* ── Prominente waarschuwing: onderdelen passen op geen plaat ───── */
/* Warn/rust i.p.v. amber (amber = merk-accent, alleen voor de zaagsnede). Rustig, geen
   gevaarsdriehoek: dit los je zelf in één stap op. */
.zaag-alarm { display: flex; gap: var(--space-2); align-items: flex-start; background: var(--rust-50); border-left: 2px solid var(--rust-600); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: 0; color: var(--text-strong); }
.zaag-alarm[hidden] { display: none; }
.zaag-alarm-icoon { color: var(--rust-600); flex: none; margin-top: 1px; }
.zaag-alarm-tekst { display: flex; flex-direction: column; gap: var(--space-2); font-size: 13.5px; line-height: 1.35; min-width: 0; flex: 1; }
.zaag-alarm-tekst strong { font-size: 14px; }
.zaag-alarm-stuk { display: inline-block; background: var(--surface-card); color: var(--rust-700); border: 1px solid var(--rust-600); border-radius: 999px; padding: 0 8px; margin: 0 2px; font-size: 12px; font-weight: var(--weight-medium); }
/* Per-oorzaak-regel: exacte reden + chips links, één fix-knop rechts. */
.pn-kop { display: block; margin-bottom: 2px; }
.pn-groep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.pn-reden { flex: 1 1 220px; min-width: 0; }
.pn-acties { display: flex; gap: var(--space-2); flex: none; }
.pn-fix { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--rust-600); border-radius: var(--radius-md); background: var(--rust-600); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; }
.pn-fix:hover { background: var(--rust-700); border-color: var(--rust-700); }
.pn-fix--sec { background: transparent; color: var(--rust-700); }
.pn-fix--sec:hover { background: var(--surface-card); }
@media (max-width: 639px) { .pn-acties { width: 100%; } .pn-fix { min-height: 44px; flex: 1; } }

/* Markering van een niet-passend onderdeel in de invoerlijst */
/* 'Past niet' als accent-randje i.p.v. een vol gekleurd vlak: rustiger, minder zwaar. */
.onderdeel--past-niet { box-shadow: inset 3px 0 0 var(--rust-600); padding-left: 8px; }
.past-niet-badge { display: inline-block; margin-left: 8px; background: var(--rust-600); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: var(--weight-semibold); vertical-align: middle; }
.deel-badge { display: inline-block; margin-left: 8px; background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-100); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: var(--weight-semibold); vertical-align: middle; }

/* Automatische formaatkeuze: toggle + winkelpaneel */
.auto-schakelaar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: var(--space-3); background: var(--panel-fill, #f7f8fa); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-weight: var(--weight-semibold); cursor: pointer; }
.auto-schakelaar input { width: 20px; height: 20px; accent-color: var(--color-accent); flex: none; }
.auto-rij { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); }
.auto-rij label { font-weight: var(--weight-semibold); min-width: 56px; }
.auto-rij .select { flex: 1; }

/* Winkel-vinklijst (auto-modus) */
.auto-winkel-blok { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.auto-winkel-label { font-weight: var(--weight-semibold); }
.auto-winkels { display: flex; flex-wrap: wrap; gap: 8px; }
.auto-winkel { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; min-height: 40px; border: 1px solid var(--border-default); border-radius: 999px; font-weight: var(--weight-medium); cursor: pointer; user-select: none; }
.auto-winkel:has(input:checked) { border-color: var(--color-accent); background: var(--winkel-badge-bg, #eef1f6); }
.auto-winkel input { width: 18px; height: 18px; accent-color: var(--color-accent); }

/* Inkooplijst: benodigde platen per winkel + prijzen (onder Plaatmateriaal) */
#inkoop-card { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
#inkoop-card[hidden] { display: none; }
.inkoop-kop { margin-bottom: var(--space-1); }
.inkoop-kop h3 { font-size: 15px; margin: 0; }
#inkoop-lijst { display: flex; flex-direction: column; }
.inkoop-winkelkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 6px; margin-top: 6px; border-top: 1px solid var(--border-default); }
.inkoop-winkelkop:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
.inkoop-winkelkop .measure { color: var(--text-muted); font-weight: var(--weight-semibold); }
.inkoop-rij { display: grid; grid-template-columns: 22px 24px 1fr auto auto auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-subtle, var(--border-default)); }
.inkoop-kies { width: 18px; height: 18px; accent-color: var(--color-accent); }
#btn-overnemen { margin-top: var(--space-3); }
.inkoop-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inkoop-titel { font-weight: var(--weight-semibold); }
.inkoop-spec { font-size: 13px; color: var(--text-muted); }
.inkoop-winkel { background: var(--winkel-badge-bg, #eef1f6); color: var(--winkel-badge-text, var(--text-strong)); border-radius: 999px; padding: 2px 11px; font-size: 12px; font-weight: var(--weight-semibold); }
.inkoop-linkrij { margin-top: 1px; }
.inkoop-link { color: var(--color-accent); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: var(--weight-medium); text-decoration: none; }
.inkoop-link:hover { text-decoration: underline; }
.inkoop-aantal { color: var(--text-muted); }
.inkoop-prijs { color: var(--text-muted); }
.inkoop-sub { font-weight: var(--weight-semibold); text-align: right; }
.inkoop-rij--totaal { grid-template-columns: 1fr auto; border-top: 2px solid var(--border-strong); font-size: 15px; }
.inkoop-rij--totaal .inkoop-meta { font-weight: var(--weight-semibold); }

/* ============================================================================
   LINEAIR ZAGEN (1D) — invoer, balken-strip, afvinklijst
   ============================================================================ */
.lin-wrap { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .lin-wrap { grid-template-columns: 360px 1fr; align-items: start; } }

/* Invoer */
.lin-invoer { display: grid; gap: var(--space-3); }
.lin-paneel { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); }
.lin-paneel h3 { font-size: 15px; margin: 0 0 var(--space-3); }
.lin-rij { display: grid; grid-template-columns: 1fr 70px 56px 36px; gap: 6px; align-items: center; margin-bottom: 6px; }
.lin-rij.staaf { grid-template-columns: 80px 56px 70px 36px; }
.lin-rij input, .lin-rij select { min-height: 42px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: 16px; background: var(--white); color: var(--text-strong); width: 100%; box-sizing: border-box; }
.lin-rij .lin-del { width: 36px; height: 36px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--white); color: var(--text-muted); cursor: pointer; font-size: 16px; }
/* Auto-rij (regelwerk): read-only, herkomst-label, geen verwijderknop. */
.lin-rij--auto { background: var(--surface-muted, #f4f6f8); border-radius: var(--radius-md); padding: 4px 8px; }
.lin-rij--auto.is-gemarkeerd { animation: linAutoFlits 1.6s ease; }
.l-auto { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; font-size: 13px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; }
.l-auto-tag { flex: none; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--amber-100, #f7e7cc); color: var(--amber-700, #a66a12); }
.l-auto-val { align-self: center; font-family: var(--font-mono); font-size: 14px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.lin-del--leeg { width: 36px; }
@keyframes linAutoFlits { 0%, 100% { background: var(--surface-muted, #f4f6f8); } 25%, 60% { background: var(--amber-100, #f7e7cc); } }
.lin-kop { display: grid; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 4px; }
.lin-kop.stuk { grid-template-columns: 1fr 70px 56px 36px; }
.lin-kop.staaf { grid-template-columns: 80px 56px 70px 36px; }
/* Lineair: de prijs/kosten-kolom hoort bij Geavanceerd. In Standaard valt 'm weg,
   zodat de Standaard/Geavanceerd-toggle ook in Lineair een zichtbaar effect heeft. */
body:not(.geavanceerd) .lin-rij.staaf,
body:not(.geavanceerd) .lin-kop.staaf { grid-template-columns: 80px 56px 36px; }
body:not(.geavanceerd) .lin-rij.staaf .s-prijs,
body:not(.geavanceerd) .lin-kop.staaf > span:nth-child(3) { display: none; }
/* De doel-keuze (afval/sneden/kosten) stuurt het 1D-resultaat nog niet; verberg 'm in Lineair. */
body.modus-lineair .doel-keuze { display: none !important; }
/* Export-menu afstemmen op Lineair: labels, PNG/SVG/DXF horen bij het 2D-plaatschema.
   In Lineair blijven Zaaglijst (CSV), projectbestand en print over. */
body.modus-lineair #export-menu [data-action="labels"],
body.modus-lineair #export-menu [data-action="export-png"],
body.modus-lineair #export-menu [data-action="export-svg"],
body.modus-lineair #export-menu [data-action="export-dxf"],
body.modus-lineair #export-menu hr { display: none; }
/* CNC-modus is een 2D-plaatindeling; in Lineair niet van toepassing. */
body.modus-lineair #in-cnc-veld { display: none; }
.lin-add { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: transparent; color: var(--teal-700); font-weight: 600; cursor: pointer; }

/* Resultaat */
.lin-res { display: grid; gap: var(--space-4); }
.lin-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline; }
.lin-stats .hoofd { font: 700 32px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--navy-700); }
.lin-stats .hoofd small { font-size: 15px; color: var(--text-muted); font-weight: 600; }
.lin-stats .sec { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.lin-stats .sec b { font: 600 15px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.lin-stats .sec span { font-size: 12px; color: var(--text-muted); display: block; }

/* De balken-strip */
.lin-staafrow { display: flex; gap: var(--space-3); align-items: stretch; margin-bottom: 10px; }
.lin-staafrow .lin-meta { width: 104px; flex: none; display: flex; flex-direction: column; justify-content: center; }
.lin-staafrow .lin-meta .grp { font: 700 13px var(--font-body); color: var(--text-strong); }
.lin-staafrow .lin-meta .len { font: 500 12px var(--font-mono); color: var(--text-muted); margin-top: 1px; }
.lin-staafrow .lin-meta .ben { font: 500 12px var(--font-mono); margin-top: 5px; }
.lin-staaf { flex: 1; min-width: 0; height: 54px; border: 1px solid var(--staaf-omtrek); border-radius: var(--radius-sm); background: var(--white); display: flex; overflow: hidden; }
.lin-staafrow.stacked { flex-direction: column; gap: 6px; }
.lin-staafrow.stacked .lin-staaf { width: 100%; }
.lin-staafinfo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lin-staafinfo .grp { font: 700 12px var(--font-body); color: var(--text-strong); }
.lin-staafinfo .len { font: 500 12px var(--font-mono); color: var(--text-muted); }
.lin-staafinfo .ben { font: 600 12px var(--font-mono); flex: none; }
.lin-ben-ok { color: var(--green-600); } .lin-ben-mid { color: var(--text-muted); }
.lin-seg { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.lin-seg.stuk { background: var(--staaf-stuk); }
.lin-seg.kerf { background: var(--staaf-kerf); min-width: 2px; align-self: stretch; }
.lin-seg .nm { font: 600 11px var(--font-body); color: var(--staaf-stuk-label); line-height: 1.1; white-space: nowrap; opacity: .85; }
.lin-seg .mt { font: 500 10px var(--font-mono); color: var(--staaf-stuk-label); opacity: .6; white-space: nowrap; }
.lin-seg.mid .nm { display: none; }
.lin-seg.tiny .nm, .lin-seg.tiny .mt { display: none; }
.lin-seg.rest { background-color: var(--staaf-rest-vlak); background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--staaf-rest-lijn) 6px, var(--staaf-rest-lijn) 7px); }
.lin-seg.rest.bruik { background-color: var(--staaf-rest-bruik); background-image: none; border-left: 3px solid var(--staaf-rest-bruik-rand); }
.lin-seg.rest .nm { font-weight: 600; color: var(--staaf-rest-label); opacity: .9; }
.lin-seg.rest .mt { color: var(--staaf-rest-label); opacity: .75; }
.lin-seg.klik { cursor: pointer; } .lin-seg.klik:hover { filter: brightness(.97); }
.lin-seg.sel { box-shadow: inset 0 0 0 2px var(--staaf-actief); }

/* legenda + tik-detail */
.lin-legend { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: 4px; }
.lin-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); }
.lin-sw { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.lin-sw.stuk { background: var(--staaf-stuk); border: 1px solid var(--staaf-stuk-rand); }
.lin-sw.rest { background-color: var(--staaf-rest-vlak); background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--staaf-rest-lijn) 4px, var(--staaf-rest-lijn) 5px); }
.lin-sw.bruik { background: var(--staaf-rest-bruik); border: 1px solid rgba(22,112,122,.3); }
.lin-sw.kerf { width: 3px; height: 16px; border-radius: 2px; background: var(--staaf-kerf); }
.lin-detail { display: none; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-sunken); margin-top: 8px; }
.lin-detail.open { display: flex; }
.lin-detail .dot { width: 30px; height: 30px; border-radius: 7px; flex: none; border: 1px solid var(--staaf-stuk-rand); background: var(--staaf-stuk); }
.lin-detail .dot.rest { background-color: var(--staaf-rest-bruik); border-color: rgba(22,112,122,.3); }
.lin-detail .dnm { font: 600 14px var(--font-body); color: var(--text-strong); }
.lin-detail .dmt { font: 500 12px var(--font-mono); color: var(--text-muted); }
.lin-detail .dact { margin-left: auto; }

/* afvinklijst (zaagvolgorde) */
.lin-volg { display: grid; gap: 14px; }
.lin-volg-staaf .vh { font: 600 13px var(--font-body); color: var(--text-strong); margin-bottom: 6px; }
.lin-snede { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--border-default); cursor: pointer; }
.lin-snede .vink { width: 26px; height: 26px; flex: none; border: 2px solid var(--border-strong); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; }
.lin-snede.af .vink { background: var(--green-600); border-color: var(--green-600); }
/* Korte oplichting van de bijbehorende zaagvolgorde-rij bij klik op een segment. */
.lin-snede.flits { animation: linFlits 1.3s var(--ease-out); border-radius: var(--radius-md); }
@keyframes linFlits { 0%, 100% { background: transparent; } 20% { background: var(--teal-100); } }
.lin-snede.af .lbl { text-decoration: line-through; color: var(--text-muted); }
.lin-snede .nr { font: 700 13px var(--font-mono); color: var(--text-muted); width: 22px; }
.lin-snede .lbl { font-size: 15px; color: var(--text-strong); }
.lin-snede .maat { margin-left: auto; font: 600 14px var(--font-mono); font-variant-numeric: tabular-nums; }
.lin-voortgang { font: 600 13px var(--font-mono); color: var(--text-muted); }
.lin-leeg { padding: 24px; color: var(--text-muted); text-align: center; }

/* ============================================================================
   Tikvlakken op touch-apparaten (min. 44px, conform huisstijl)
   Alleen onder (pointer: coarse): op de werkbank met vinger/tablet groeien de
   compacte controls naar 44px, terwijl de dichte desktop-UI met muis compact
   blijft. Visueel formaat verandert niet op desktop.
   ============================================================================ */
@media (pointer: coarse) {
  .btn--klein,
  .btn--sm,
  .kast-atab,
  .kast3d-tbtn,
  .k3d-chip,
  .k3d-rij,
  .kast-seg-btn,
  .seg button,
  .plaat-velden .nerf-chip,
  .plaat-velden .nerf-add { min-height: var(--tap-min); }

  .lade-stepper button,
  .zaag-speler .iconbtn,
  .ps-btn,
  .cat-info-knop,
  .kast-tb-knop { width: var(--tap-min); height: var(--tap-min); }
}

/* ============================================================================
   Press-feedback (Emil Kowalski): chrome-knoppen reageren tactiel op een tik
   (scale 0.97). Bewust NIET op tekening-elementen, sleep-handles, accordions
   of chips in de SVG, waar een schaalsprong juist fout zou staan.
   ============================================================================ */
.modus-switch .ms-tab,
.kast-atab,
.seg button,
.kast-seg-btn,
.lade-stepper button,
.ps-btn,
.cat-info-knop,
.zaag-speler .iconbtn { transition: transform .1s var(--ease-out); }

.modus-switch .ms-tab:active,
.kast-atab:active,
.seg button:active,
.kast-seg-btn:active,
.lade-stepper button:active,
.ps-btn:active,
.cat-info-knop:active,
.zaag-speler .iconbtn:active { transform: scale(0.96); }

/* ── UX-audit: werkbank-tikvlakken >=44px en inline velden >=16px (geen iOS-zoom) ── */
.maat-veld { font-size: 16px; }
.icon-btn { width: 44px; height: 44px; }
.iconbtn { width: 44px; height: 44px; }
.modus-switch .ms-tab { min-height: 44px; }
.k3d-chip { min-height: 44px; }
.lang-menu > summary,
a.topbar-ghost,
#more-btn { min-height: 44px; box-sizing: border-box; padding-inline: 12px; display: inline-flex; align-items: center; justify-content: center; }
@media (hover: none), (max-width: 760px) {
  /* Inline maatvelden compacter op touch (de hele rij vormt de context); blijven goed
     aantikbaar maar maken de onderdeelrij niet onnodig hoog. */
  .maat-veld { min-height: 34px; padding-block: 4px; }
  .tabbar a, .tabbar button, .tabbar [data-modus] { min-height: 44px; }
  .kast-chip { min-height: 44px; }
}

/* ── UX-audit: micro-interacties, modal/toast/dropdown-animatie, press-feedback ── */
/* Modals zacht in/uit (moderne CSS; degradeert naar direct tonen). */
.mat-overlay { transition: opacity .18s var(--ease-out), display .18s allow-discrete; }
.mat-overlay[hidden] { opacity: 0; }
.mat-overlay:not([hidden]) { opacity: 1; }
@starting-style { .mat-overlay:not([hidden]) { opacity: 0; } }
.mat-overlay .mat-dialog, .mat-overlay .proj-modal { transition: transform .2s var(--ease-out), opacity .2s var(--ease-out); }
@starting-style { .mat-overlay:not([hidden]) .mat-dialog, .mat-overlay:not([hidden]) .proj-modal { transform: scale(.975); opacity: 0; } }
/* Toasts en strips zacht in beeld. */
#undo-toast { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
#undo-toast[hidden] { opacity: 0; }
@starting-style { #undo-toast:not([hidden]) { opacity: 0; transform: translateX(-50%) translateY(8px); } }
#undo-toast-btn { min-height: 44px; }
/* Dropdown-panelen origin-bewuste entree. */
.lang-menu__list, .hdr-menu .menu, #open-menu, #export-menu, #more-menu { transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); }
@starting-style { .lang-menu[open] .lang-menu__list, .hdr-menu[open] .menu { opacity: 0; transform: scale(.97); } }
/* Micro-transities + press-feedback op interactieve chips/segmenten. */
.vink, .lin-seg, .lin-snede, .nerf-chip, .nerf-add, .kast-chip, .k3d-chip, .ms-tab, .tbtn {
  transition: background-color .14s var(--ease-out), border-color .14s var(--ease-out), box-shadow .14s var(--ease-out), color .14s var(--ease-out), opacity .14s var(--ease-out), transform .1s var(--ease-out);
}
.nerf-chip:active, .nerf-add:active, .kast-chip:active, .k3d-chip:active, .icon-btn:active, .iconbtn:active, .tbtn:active, .lin-snede:active,
.hdr-menu > summary:active, .lang-menu > summary:active { transform: scale(.96); }
/* Zichtbare focus-ring ook op de inline maat-velden (naast de globale regel). */
.maat-veld:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .mat-overlay, .mat-overlay .mat-dialog, .mat-overlay .proj-modal, #undo-toast,
  .lang-menu__list, .hdr-menu .menu, #open-menu, #export-menu, #more-menu,
  .vink, .lin-seg, .lin-snede, .nerf-chip, .nerf-add, .kast-chip, .k3d-chip, .ms-tab, .tbtn { transition: none !important; }
  .nerf-chip:active, .nerf-add:active, .kast-chip:active, .k3d-chip:active, .icon-btn:active, .iconbtn:active, .tbtn:active, .lin-snede:active { transform: none; }
}

/* ============================================================================
   Mobiele UX-audit (impeccable-lens, 30 juni 2026). Zie BACKLOG.md.
   ============================================================================ */

/* (2) De zwevende "Bekijk zaagschema"-pill nooit over een veld dat je invult. */
body:has(.content input:focus, .content textarea:focus, .content select:focus) .naar-schema-fab { display: none !important; }

/* Help staat op smal scherm in het hamburgermenu; op desktop in de balk. */
@media (min-width: 640px) { .hdr-help-mobiel { display: none; } }

@media (max-width: 639px) {
  /* (1) Onderdelen-lijst staat al gestapeld (basisregel); op mobiel de maat iets groter. */
  .parts-list .meta .dim { font-size: 14px; }

  /* (3) Topbalk past niet op 390px → "Inloggen" werd afgekapt. Help verhuist naar
         het hamburgermenu, balk compacter. */
  .topbar-ghost { display: none !important; }
  .topbar-eind { gap: 8px !important; }
  #btn-login { padding: 0 12px !important; }

  /* (4) Kastontwerp-picker: redundante "KASTONTWERP"-eyebrow weg (je tikte net die
         tab) en minder ruimte boven de kaarten. */
  .kast-kop .eyebrow { display: none; }
  .kast-kop { margin-bottom: var(--space-3); }
  .kast-kop .kast-sub { margin-top: var(--space-1); }

  /* (5) Restvoorraad (kernfeature) blijft zichtbaar als icoonknop i.p.v. verstopt
         in "...". */
  .toolbar #btn-restvoorraad.tb-breed { display: inline-flex; width: 42px; padding: 0; justify-content: center; }
  #btn-restvoorraad.tb-breed > span, #btn-restvoorraad.tb-breed > .chev { display: none; }

  /* (6) 3D-canvas iets lager zodat werkbalk + model + explode-schuif beter samen
         in beeld komen. */
  .kast3d-svg { height: 48vh; max-height: 48vh; }

  /* (7) Lange projecttitel + status-pill: laat de pill onder de titel vallen i.p.v.
         afkappen. */
  .kop > div:first-child { min-width: 0; max-width: 100%; }
  .titel-rij { width: 100%; }

  /* (8) Maatveld-eenheid ("mm") niet tegen een 4-cijferig getal: smallere
         linkerpadding + eenheid dichter naar de rand geeft het getal lucht. */
  .kast-maatrij .input { padding-left: 10px; padding-right: 26px; }
  .kast-maatrij .field .unit { right: 8px; }
}

/* ── Desktop-naloop (impeccable-lens, 30 juni 2026) ─────────────────────────── */

/* (D2) Lineair lege staat: niet 360px-invoer + lege rechterhelft, maar de invoer
   gecentreerd met een nette maximumbreedte zolang er nog geen resultaat is. */
@media (min-width: 900px) {
  .lin-wrap:has(.lin-leeg) { grid-template-columns: minmax(0, 560px); justify-content: center; }
}

/* (D3) Galerij-kop: "Verder met mijn ontwerp" op een eigen regel i.p.v. naast de
   eyebrow. */
.kast-kop [data-kast-verder] { display: flex; width: fit-content; margin-bottom: var(--space-2); }

/* "Wat heb ik nodig"-knop: rustige teal-nadruk zodat hij als eindpunt opvalt. */
.wat-nodig-knop { border-color: var(--teal-500); color: var(--teal-700); font-weight: var(--weight-semibold); }
.wat-nodig-knop svg { color: var(--teal-600); }
.wat-nodig-knop:hover { background: var(--teal-50); border-color: var(--teal-600); }

/* Land-selector bovenaan de materiaalcatalogus (alleen cutlistlab). Toont waaróm je
   bepaalde winkels ziet; losgekoppeld van de interfacetaal. */
.cat-land { position: relative; margin-bottom: var(--space-3); }
.cat-land-knop { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--white);
  color: var(--text-strong); font-weight: var(--weight-semibold); cursor: pointer; min-height: 40px; }
.cat-land-knop:hover { border-color: var(--border-strong); }
.cat-land-vlag { font-size: 18px; line-height: 1; }
.cat-land-meta { color: var(--text-muted); font-weight: var(--weight-regular); font-size: 13px; }
.cat-land-chev { color: var(--text-muted); margin-left: 2px; }
.cat-land-lijst { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 250px;
  background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 4px; display: flex; flex-direction: column; }
.cat-land-optie { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: none;
  background: transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  color: var(--text-strong); font-weight: var(--weight-medium); min-height: 44px; }
.cat-land-optie:hover { background: var(--surface-sunken); }
.cat-land-optie.is-actief { color: var(--teal-700); font-weight: var(--weight-semibold); }
.cat-land-optie .cat-land-meta { margin-left: auto; }
.cat-land-uitleg { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

/* Land-signpost in het Plaatmateriaal-paneel (cutlistlab): zichtbaar buiten de bibliotheek. */
.plaat-land { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 var(--space-2);
  padding: 6px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-full);
  background: var(--surface-sunken); color: var(--text-strong); font-size: 13px;
  font-weight: var(--weight-medium); cursor: pointer; min-height: 36px; }
.plaat-land:hover { border-color: var(--border-strong); }
.plaat-land .cat-land-chev { color: var(--teal-700); font-weight: var(--weight-semibold); }

/* "Verouderd"-balk boven het zaagschema: je wijzigde iets, met een preview van wat
   bijwerken doet met je platen, en een knop om zelf bij te werken (geen stille wissel). */
.zaag-verouderd { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--amber-300, #e3b778); background: var(--amber-50, #fbf1de);
  border-radius: var(--radius-md); }
.zaag-verouderd-kop { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.zaag-verouderd-tekst { flex: 1 1 auto; min-width: 0; font-size: 14px;
  color: var(--amber-700, #9a6a16); font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums; }
.zaag-verouderd-detail { margin-top: var(--space-2); font-size: 13px; }
.zaag-verouderd-detail summary { cursor: pointer; color: var(--amber-700, #9a6a16); }
.zvd-kols { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: 6px; }
.zvd-kol { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--text-strong); }
.zvd-lbl { font-family: var(--font-sans, inherit); font-size: 12px; color: var(--text-muted);
  font-weight: var(--weight-semibold); margin-bottom: 2px; }
/* Vergelijkingstabel: houd mijn platen vs nieuwe platen. */
.zv-tabel { margin: 8px 0; border-collapse: collapse; font-size: 13px; }
.zv-tabel th, .zv-tabel td { padding: 3px 14px 3px 0; text-align: left; }
.zv-tabel td:not(:first-child), .zv-tabel tr:first-child th { text-align: right;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.zv-tabel tr:first-child th { color: var(--text-muted); font-weight: var(--weight-semibold); font-family: inherit; }
.zv-tabel th:first-child { color: var(--amber-700, #9a6a16); font-weight: var(--weight-medium); }
.zv-waarschuw { margin: 4px 0 0; font-size: 13px; color: var(--amber-700, #9a6a16); }
.zv-knoppen { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 8px; }
.zv-aanbevolen { display: inline-block; font-family: var(--font-sans, inherit); font-size: 10px;
  font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .04em;
  color: var(--teal-700); background: var(--teal-50, #e6f2f1); border-radius: var(--radius-full);
  padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
/* "Gemengd"-regel onder het kast-materiaal + inline linkknop. */
.kast-mat-gemengd { margin: 6px 0 0; font-size: 13px; color: var(--amber-700, #9a6a16); }
.linkbtn { background: none; border: none; padding: 0; margin: 0; color: var(--teal-700);
  font: inherit; text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--teal-800, var(--teal-700)); }

/* ============================================================================
   Boodschappenlijst ("Wat heb ik nodig"). Eén doorlopend document: getallen in
   mono tabular, rechts uitgelijnd; eerlijkheidsstaten als rustige onderschriften;
   kleur alleen functioneel; afvinken grijst de regel zonder hem te verbergen.
   ============================================================================ */
.bl-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(18,30,54,.45);
  display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 640px) { .bl-overlay { align-items: center; padding: 24px; } }
.bl-dialog { background: var(--white); width: 100%; max-width: 560px; max-height: 92vh;
  display: flex; flex-direction: column; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg); }
@media (min-width: 640px) { .bl-dialog { border-radius: var(--radius-lg); max-height: 88vh; } }
.bl-kop { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); }
.bl-kop h2 { margin: 0; font-size: var(--text-h2); }
.bl-sluit { font-size: 18px; line-height: 1; color: var(--text-muted); }
.bl-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); -webkit-overflow-scrolling: touch; }
.bl-acties { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-default); }
.bl-acties .btn { flex: 1; }

.bl-herkomst { margin: 0 0 var(--space-4); font-size: var(--text-small); color: var(--text-muted); }
.bl-sec { margin-bottom: var(--space-5); }
.bl-sec h3 { margin: 0 0 var(--space-2); font-size: 13px; font-weight: var(--weight-semibold);
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.bl-uitleg { margin: -2px 0 var(--space-2); font-size: var(--text-small); color: var(--text-muted); }
.bl-rij { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min);
  padding: 6px 0; border-bottom: 1px solid var(--border-default); cursor: pointer; }
.bl-rij:last-child { border-bottom: none; }
.bl-vink { width: 20px; height: 20px; flex: none; accent-color: var(--color-primary); cursor: pointer; }
.bl-nm { flex: 1 1 auto; min-width: 0; color: var(--text-strong); font-weight: var(--weight-medium); }
.bl-sub { display: block; font-size: 12px; font-weight: var(--weight-regular); color: var(--text-muted); }
.bl-qty { flex: none; display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-qty b { font-weight: var(--weight-bold); color: var(--text-strong); }
.bl-pr { flex: none; min-width: 8.5ch; text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.bl-onbekend { font-style: italic; }
.bl-ind { color: var(--text-muted); }
.bl-voet { margin: var(--space-2) 0 0; font-size: 12px; color: var(--text-muted); }
.bl-disclaimer { margin: var(--space-4) 0 0; font-size: 12px; color: var(--text-muted);
  padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
/* Afgevinkt: rustig vergrijzen en doorstrepen, niets verbergen. */
.bl-rij:has(.bl-vink:checked) .bl-nm { text-decoration: line-through; color: var(--text-muted); font-weight: var(--weight-regular); }
.bl-rij:has(.bl-vink:checked) .bl-qty b { color: var(--text-muted); font-weight: var(--weight-medium); }


/* ── Custom dropdown: gestylede optielijst i.p.v. de native (lelijke) select-lijst ──
   De <select> blijft de databron; JS toont deze popup. Alleen desktop (touch = OS-picker). */
.dd-pop {
  position: fixed; z-index: 1200; margin: 0;
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
  padding: 5px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 1px; min-width: 130px;
  animation: dd-in .12s var(--ease-out);
}
@keyframes dd-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.dd-opt {
  appearance: none; border: 0; background: transparent; text-align: left; width: 100%;
  font: inherit; font-size: 13px; line-height: 1.3; color: var(--text-strong);
  padding: 8px 30px 8px 11px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; position: relative; transition: background-color .1s var(--ease-out);
}
.dd-opt:hover, .dd-opt.is-hl { background: var(--surface-sunken); }
.dd-opt.is-sel { color: var(--color-primary); font-weight: var(--weight-semibold); }
.dd-opt.is-sel::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 10px;
  border: solid var(--color-primary); border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg);
}
/* De aparte "anders/vrij invullen"-optie krijgt een scheidslijn erboven. */
.dd-opt.dd-opt--anders { color: var(--text-muted); font-style: italic; margin-top: 3px; }
.dd-pop .dd-opt--anders { border-top: 1px solid var(--border-default); border-radius: 0 0 6px 6px; padding-top: 9px; }