/* style.css — aanvulling op Tailwind (CDN) voor de dingen die utility classes
   niet (netjes) dekken: canvas-gedrag, focus-details op dynamische SVG-iconen,
   en printweergave. De rest van de visuele stijl zit in de Tailwind-classes
   direct in de HTML/JS. */

html {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body {
  background-color: #F8FAFC; /* slate-50 */
}

/* Meettool: canvas moet een duidelijke "klik om te meten" cursor tonen en
   precies op zijn eigen resolutie renderen (geen extra CSS-schaling). De
   hoogte is viewport-relatief (i.p.v. een vast aantal pixels) zodat de
   tekening op grotere schermen ook echt groter en beter leesbaar is, met
   minder noodzaak om in een klein vakje te scrollen. */
.canvas-wrap {
  background: #1E293B; /* slate-800, zodat de tekening er als een lightbox uitspringt */
  max-height: min(86vh, 1200px);
  /* Alleen zo breed als de tekening zelf (niet de volle kaartbreedte) — anders
     blijft er bij een smallere tekening een lege donkere strook naast de
     afbeelding staan. Bij een tekening die breder is dan de kaart blijft
     overflow-auto hierboven gewoon zorgen voor een horizontale scrollbalk. */
  width: fit-content;
  max-width: 100%;
}
.canvas-wrap canvas {
  display: block;
  /* Eigen cursor i.p.v. de standaard crosshair. Die standaard is een dun
     zwart kruisje en dat verdwijnt volledig in een bouwtekening vol dunne
     zwarte lijnen — precies op het moment dat je nauwkeurig wilt aanwijzen.
     Dit kruis is oranje met een witte rand eromheen, dus het blijft zichtbaar
     op wit papier, op zwarte lijnen én op de donkere achtergrond. De laatste
     twee getallen zetten het "hete punt" precies in het midden van het kruis,
     zodat je klikt waar je richt. */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round'><path d='M16 2.5v9M16 20.5v9M2.5 16h9M20.5 16h9'/></g><g fill='none' stroke='%23EA580C' stroke-width='2' stroke-linecap='round'><path d='M16 2.5v9M16 20.5v9M2.5 16h9M20.5 16h9'/></g><circle cx='16' cy='16' r='2' fill='%23EA580C' stroke='white' stroke-width='1.2'/></svg>") 16 16, crosshair;
  /* Zonder dit probeert een touchscreen de pagina te scrollen/pinch-zoomen
     zodra je met je vinger over de tekening beweegt om te richten (zie de
     touchstart/touchmove-afhandeling in app.js) — dat verstoort het gericht
     aanwijzen van een meetpunt. */
  touch-action: none;
}

/* Volledig-scherm-modus voor de meettool: geeft de tekening vrijwel het hele
   scherm, wat het navigeren/scrollen op een grote tekening sterk vereenvoudigt
   t.o.v. het kleine kaartje middenin de pagina. */
#meetTool:fullscreen {
  background: #fff;
  padding: 20px;
  overflow: auto;
}
#meetTool:fullscreen .canvas-wrap {
  max-height: calc(100vh - 210px);
}

/* "Lengte/Hoogte"-schakelaar bij de meettool: bepaalt welk formulierveld
   een gevonden/gemeten maat invult (zie state.meetDoel in app.js). */
.doel-knop {
  color: #64748b; /* slate-500 */
  background: transparent;
}
.doel-knop.actief {
  background-color: #EA580C; /* orange-600 */
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Stappenbalk (Kalibreren -> Meten -> Omtrek meten) bovenaan de meettool.

   Uitgangspunt: dit is de énige rij waar je moet beginnen, dus die mag hard
   roepen. De hulpmiddelen eronder (zoom, draaien, scannen) zijn juist bewust
   stiller gemaakt — anders vechten twaalf even zware knoppen om aandacht en
   valt de stap die je nodig hebt nergens meer op. Zie zetActieveStap() in
   app.js voor het omzetten van de statussen.
   ------------------------------------------------------------------------- */
.stapbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #E2E8F0; /* slate-200 */
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);

  /* Blijft tijdens het scrollen in beeld. Op een grote bouwtekening scrol je
     ver naar beneden om het juiste stuk te vinden, en dan wil je "2. Meten"
     of "Gebied kiezen" niet eerst weer omhoog moeten zoeken. 68px = net onder
     de vaste paginakop; de z-index houdt hem boven de tekening maar onder die
     kop, zodat de twee elkaar nooit overlappen. */
  position: sticky;
  top: 68px;
  z-index: 15;
}
/* Iets duidelijker afgetekend zodra de tekening eronder doorschuift. */
.stapbalk {
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 16px -12px rgba(15, 23, 42, .35);
}
.meet-hint {
  flex-wrap: wrap;
}
.stappen {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 10px;
  border: 1px solid #E2E8F0; /* slate-200 */
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: #475569; /* slate-600 */
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.stap:hover:not(:disabled):not(.actief) {
  background: #F8FAFC; /* slate-50 */
  border-color: #CBD5E1; /* slate-300 */
}
.stap:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Het rondje met het stapnummer. Is de stap afgerond, dan wordt het cijfer
   vervangen door een vinkje — beide staan in de HTML, de CSS bepaalt welke
   van de twee je ziet. */
.stap .nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #F1F5F9; /* slate-100 */
  color: #64748B; /* slate-500 */
  font-size: 12px;
  font-weight: 800;
  flex: none;
}
/* Het vinkje van een afgeronde stap wordt als achtergrond-SVG getekend in
   plaats van als icoon uit de lucide-bibliotheek. Die bibliotheek komt van een
   CDN, en juist op een bouwplaats met slecht bereik laadt zo'n CDN weleens
   niet — dan zou een afgeronde stap een lege groene bol zijn en zie je niet
   meer wat er al gelukt is. Dit vinkje zit in het CSS-bestand zelf en is er
   dus altijd. De .vink in de HTML blijft daarom verborgen. */
.stap .nr .vink { display: none !important; }
.stap.klaar .nr .cijfer { display: none; }
.stap.klaar .nr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

/* De stap waar je nu in zit. */
.stap.actief {
  background-color: #EA580C; /* orange-600 */
  border-color: #EA580C;
  color: #fff;
  box-shadow: 0 2px 8px rgba(234, 88, 12, .32);
}
.stap.actief .nr {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* Afgeronde stap: groen met een vinkje, zodat je ziet wat al gelukt is. */
.stap.klaar {
  background: #F0FDF4; /* green-50 */
  border-color: #BBF7D0; /* green-200 */
  color: #15803D; /* green-700 */
}
/* Let op: hier bewust background-COLOR en niet de background-shorthand — die
   zou de achtergrond-SVG met het vinkje hierboven weer wissen. */
.stap.klaar .nr {
  background-color: #16A34A; /* green-600 */
  color: #fff;
}

/* De eerstvolgende logische stap, zonder hem al te activeren: een zachte
   oranje rand wijst waar je heen moet, maar klikken op de tekening doet nog
   niets onverwachts omdat de meetmodus uit blijft. */
.stap.volgende {
  border-color: #FDBA74; /* orange-300 */
  color: #C2410C; /* orange-700 */
  background: #FFF7ED; /* orange-50 */
}
.stap.volgende .nr {
  background: #FED7AA; /* orange-200 */
  color: #C2410C;
}

/* Optionele stap vooraf ("Gebied kiezen"). Bewust zonder cijfer en met een
   rustiger uiterlijk dan de genummerde stappen: bij een tekening met één
   plattegrond sla je hem gewoon over, en dan moet hij je niet het gevoel geven
   dat je iets vergeet. Zodra er een gebied vastligt wordt hij groen met een
   vinkje, net als een afgeronde stap. */
.stap.optioneel {
  font-weight: 600;
  color: #64748B; /* slate-500 */
  border-style: dashed;
}
.stap.optioneel .nr { display: none; }
.stap.optioneel.klaar .nr { display: inline-flex; }
.stap.optioneel.klaar,
.stap.optioneel.actief {
  border-style: solid;
}
/* Let op de dubbele klasse: zonder deze twee regels wint de grijze tekstkleur
   van .stap.optioneel hierboven (even specifiek, maar later in het bestand)
   van .stap.actief, en krijg je oranje tekst op een oranje vlak. */
.stap.optioneel.actief { color: #fff; }
.stap.optioneel.klaar { color: #15803D; /* green-700 */ }

.pijl {
  color: #CBD5E1; /* slate-300 */
  display: flex;
  align-items: center;
}

/* De iconen in de stappenbalk krijgen hun maat hier, niet alleen via de
   Tailwind-classes in de HTML: valt de Tailwind-CDN weg (geen internet op de
   bouwplaats), dan zou een lucide-SVG zonder afmeting anders uitdijen tot
   honderden pixels en de hele balk slopen. */
.stap > [data-lucide],
.pijl > [data-lucide],
.statuspil > [data-lucide],
.knop-stil > [data-lucide],
.meet-hint > [data-lucide] {
  width: 16px;
  height: 16px;
}
.stap .nr > [data-lucide] {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}
.gereedschapsbalk [data-lucide] {
  width: 14px;
  height: 14px;
}

/* Statuspil naast de stappen: geen neutrale grijze mededeling meer, maar
   amber zolang er nog gekalibreerd moet worden (dat lees je als "hier moet
   ik iets") en groen mét de gevonden schaal zodra het klopt. */
.statuspil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid;
}
.statuspil.wacht {
  background: #FFFBEB; /* amber-50 */
  border-color: #FDE68A; /* amber-200 */
  color: #B45309; /* amber-700 */
}
.statuspil.klaar {
  background: #F0FDF4; /* green-50 */
  border-color: #BBF7D0; /* green-200 */
  color: #15803D; /* green-700 */
}
.statuspil.wacht .icoon-klaar { display: none; }
.statuspil.klaar .icoon-wacht { display: none; }

/* Neutrale knop in de stappenbalk (Volledig scherm, paginanavigatie). */
.knop-stil {
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 7px;
  border: 1px solid #CBD5E1; /* slate-300 */
  background: #fff;
  border-radius: 8px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 600;
  color: #475569; /* slate-600 */
  cursor: pointer;
  transition: background-color .15s;
}
.knop-stil:hover { background: #F8FAFC; }
.knop-stil:disabled { opacity: .5; cursor: not-allowed; }

/* Uitlegregel onder de stappenbalk: vervangt de instructie die voorheen ver
   onder de tekening stond, waar je hem tijdens het klikken niet zag. De
   tekst wordt per stap bijgewerkt (#meetInstructie in app.js). */
.meet-hint {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  background: #FFF7ED; /* orange-50 */
  border: 1px solid #FED7AA; /* orange-200 */
  font-size: 13.5px;
  line-height: 1.55;
  color: #9A3412; /* orange-800 */
}
.meet-hint > [data-lucide] {
  color: #EA580C;
  flex: none;
  margin-top: 1px;
}

/* ---------------------------------------------------------------------------
   Gereedschapsbalk: dezelfde knoppen als voorheen, maar kleiner, grijzer en
   voorzien van groepslabels. Ze moeten vindbaar blijven, niet opvallen.
   ------------------------------------------------------------------------- */
.gereedschapsbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #F1F5F9; /* slate-100 */
  border: 1px solid #E2E8F0; /* slate-200 */
}
.g-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #94A3B8; /* slate-400 */
}
.g-groep {
  display: inline-flex;
  height: 32px;
  align-items: center;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 2px;
}
.g-knop {
  display: inline-flex;
  height: 26px;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: #64748B; /* slate-500 */
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.g-knop:hover:not(.actief) { background: #F1F5F9; }
.g-icoon {
  display: inline-flex;
  height: 26px;
  width: 26px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 5px;
  color: #64748B;
  cursor: pointer;
  transition: background-color .15s;
}
.g-icoon:hover { background: #F1F5F9; }
.g-icoon:disabled { opacity: .4; cursor: not-allowed; }
.g-waarde {
  min-width: 42px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.g-los {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background-color .15s;
}
.g-los:hover { background: #F8FAFC; }
/* De PDF-tekstscan is de nauwkeurige variant en mag daarom als enige binnen
   deze balk een (zachte) kleuraccent houden. */
.g-los.accent-groen {
  border-color: #A7F3D0; /* emerald-200 */
  background: #ECFDF5; /* emerald-50 */
  color: #047857; /* emerald-700 */
}
.g-los.accent-groen:hover { background: #D1FAE5; }
.g-streep {
  width: 1px;
  height: 20px;
  background: #CBD5E1; /* slate-300 */
}
.g-streep-klein {
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: #E2E8F0;
}

/* Volledig-scherm-knop rechtsboven in rij 1: als de meettool in fullscreen
   staat, wordt dit een opvallende "verlaat scherm"-actie i.p.v. een neutrale
   knop (zie .actief-toggle op #btnFullscreen in app.js). */
#btnFullscreen.actief {
  border-color: #FCA5A5; /* red-300 */
  background-color: #FEF2F2; /* red-50 */
  color: #B91C1C; /* red-700 */
}

/* Gevonden-maat-label dat via Shift+klik is toegevoegd aan de optelselectie
   (zie plaatsMaatBadges/verversOptelPaneel in app.js). */
.optel-geselecteerd {
  background-color: #EA580C !important; /* orange-600 */
  color: #fff !important;
  border-color: #C2410C !important; /* orange-700 */
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.35);
}

/* Lucide-iconen (SVG) laten meelopen met de tekstkleur en netjes uitlijnen. */
[data-lucide] {
  display: inline-block;
  vertical-align: -2px;
}

/* Materialenrapport (print/PDF): categorie-kleuren voor de gegroepeerde
   tabel in renderTotalen() — dezelfde kleurcodes als de badges in Beheer,
   zodat regelwerk/plaatmateriaal/isolatie/overig ook op papier meteen
   herkenbaar zijn. */
.rapport-categorie-regelwerk { border-color: #FDE68A; background: #FFFBEB; } /* amber */
.rapport-categorie-regelwerk .rapport-categorie-kop { color: #92400E; }
.rapport-categorie-plaatmateriaal { border-color: #BFDBFE; background: #EFF6FF; } /* blue */
.rapport-categorie-plaatmateriaal .rapport-categorie-kop { color: #1E40AF; }
.rapport-categorie-isolatie { border-color: #A7F3D0; background: #ECFDF5; } /* emerald */
.rapport-categorie-isolatie .rapport-categorie-kop { color: #065F46; }
.rapport-categorie-folie { border-color: #A5F3FC; background: #ECFEFF; } /* cyan */
.rapport-categorie-folie .rapport-categorie-kop { color: #155E75; }
.rapport-categorie-overig { border-color: #DDD6FE; background: #F5F3FF; } /* violet */
.rapport-categorie-overig .rapport-categorie-kop { color: #5B21B6; }

/* Op het scherm nooit tonen — dit is uitsluitend de papieren/PDF-koptekst. */
.print-only { display: none; }
/* Zelfde idee, maar dan voor een tabelcel (afvink-kolom in het rapport) —
   "display:block" zou de tabellayout breken, dus een aparte regel met
   "table-cell". */
.rapport-vinkje { display: none; }

/* Print: een schoon, op zichzelf staand materialenrapport i.p.v. de hele
   werk-pagina — de meettool, formulieren en projectkeuze zijn daar niet
   relevant (of zelfs verwarrend, met lege invoervelden op papier). */
@media print {
  @page { margin: 16mm 14mm; }
  header.topbar, #melding, .no-print, #btnPrint {
    display: none !important;
  }
  .print-only { display: block !important; }
  .rapport-vinkje { display: table-cell !important; }
  body { background: #fff; }
  main { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .card { box-shadow: none !important; border: none !important; padding: 0 !important; }
  /* Het materialenrapport zelf (de enige kaart die overblijft) houdt wél
     wat binnenruimte, anders plakt de inhoud tegen de paginarand aan. */
  .no-print-shrink { padding: 6mm 0 !important; }
  .rapport-categorie { break-inside: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; break-after: auto; }
}


/* ---------- Kleurmarkering bouwdelen ----------
   Zelfde taal als de kleuren op de tekening: groen = de lengte komt uit een
   meting op de tekening, grijs = handmatig ingevoerd. Een gekleurde balk aan
   de linkerkant is in een lange lijst sneller te scannen dan alleen een
   badge, en blijft ook leesbaar als de kaart smal wordt. */

/* De materiaalopgave heeft meer kolommen gekregen (afmeting en zaag-/
   snijverlies). Op smalle schermen mag die tabel horizontaal schuiven in
   plaats van de hele pagina scheef te trekken. */
.wall-card table, #totalenTabel table { min-width: 560px; }

@media print {
  /* In print is er geen horizontale scroll, dus daar juist alles laten
     meebuigen en de toelichting wat compacter zetten. */
  .wall-card table, #totalenTabel table { min-width: 0 !important; }
  #totalenTabel td, #totalenTabel th { font-size: 11px !important; }
  .wall-card.wall-gemeten, .wall-card.wall-handmatig { border-left: none !important; }
}


/* ---------- 3D-overzicht ----------
   Kleine, rustige knopjes in de balk boven het 3D-venster. Als losse klasse
   (i.p.v. een rij utility-classes per knop) omdat ze allemaal identiek zijn
   en de HTML anders onleesbaar wordt. */
.knop3d {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.knop3d:hover { background: #f1f5f9; border-color: #94a3b8; }
#canvas3d { touch-action: none; }


/* ---------- Materialentabel per bouwdeel: inklapbaar ----------
   Met een handvol bouwdelen wordt de lijst anders meters lang, terwijl je
   meestal alleen de kop (naam, type, maat) wilt scannen. Standaard dicht; de
   tabel eronder verschijnt zodra je op de regel klikt. */
.materialen-blok {
  margin-top: 4px;
}
.materialen-blok > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  background: #F8FAFC; /* slate-50 */
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #475569; /* slate-600 */
  transition: background-color .15s;
}
.materialen-blok > summary::-webkit-details-marker { display: none; }
.materialen-blok > summary:hover { background: #F1F5F9; }
.materialen-blok > summary .pijl { transition: transform .15s; flex: none; }
.materialen-blok[open] > summary .pijl { transform: rotate(90deg); }


/* ---------- Kader "meerdere maten optellen" ----------
   Stond eerder als losse regel plus een alinea van vijf zinnen onder de
   tekening: veel tekst, weinig structuur. Nu één kader met een kop, de twee
   manieren onder elkaar en het invoerveld eronder. */
.optel-kader {
  margin-top: 14px;
  border: 1px solid #E2E8F0; /* slate-200 */
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px 16px;
}
.optel-kader > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0F172A; /* slate-900 */
}
.optel-kader > h3 [data-lucide] { color: #EA580C; flex: none; }
.optel-kader .inleiding {
  margin-top: 4px;
  font-size: 12px;
  color: #64748B; /* slate-500 */
}
.optel-kader .manieren {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.optel-kader .manieren > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 10px;
  background: #F8FAFC; /* slate-50 */
  padding: 9px 11px;
  font-size: 12px;
  color: #475569; /* slate-600 */
  line-height: 1.45;
}
.optel-kader .manieren strong {
  display: block;
  color: #0F172A;
  font-size: 12px;
}
.optel-kader .stap-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #FFEDD5; /* orange-100 */
  color: #C2410C; /* orange-700 */
  font-size: 11px;
  font-weight: 700;
}
.optel-kader kbd {
  display: inline-block;
  border: 1px solid #CBD5E1;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #fff;
  padding: 0 5px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}
.optel-kader .aantal-regel {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #F1F5F9;
  padding-top: 12px;
}
.optel-kader .aantal-regel label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.optel-kader .aantal-regel input {
  width: 88px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 13px;
  color: #0F172A;
}
.optel-kader .aantal-regel input:focus {
  outline: none;
  border-color: #EA580C;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .2);
}
.optel-kader .aantal-regel .toelichting {
  font-size: 11px;
  color: #94A3B8; /* slate-400 */
}

/* ---------- Lege staat: de drie stappen ---------- */
.stap-kaart {
  position: relative;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: #fff;
  padding: 18px 16px 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.stap-kaart-nr {
  position: absolute;
  top: -11px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #EA580C;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}
.stap-kaart h3 {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}
.stap-kaart p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748B;
}

/* Opmerking bij een bouwdeel: valt op zonder te schreeuwen, en blijft in de
   afdruk gewoon leesbaar. */
.opmerking-blok {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 10px;
  border-left: 3px solid #FDBA74; /* orange-300 */
  border-radius: 0 8px 8px 0;
  background: #FFF7ED; /* orange-50 */
  padding: 8px 11px;
  font-size: 13px;
  line-height: 1.5;
  color: #7C2D12; /* orange-900 */
  white-space: pre-line;
}
.opmerking-blok [data-lucide] { flex: none; margin-top: 2px; }


/* ---------- Tabbladen lopende / afgeronde projecten ---------- */
.project-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid #E2E8F0;
}
.project-tabs > button {
  position: relative;
  border: 0;
  background: none;
  padding: 8px 14px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #64748B; /* slate-500 */
  cursor: pointer;
  transition: color .15s;
}
.project-tabs > button:hover { color: #0F172A; }
.project-tabs > button.actief { color: #C2410C; /* orange-700 */ }
.project-tabs > button.actief::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: #EA580C;
}


/* ---------- Formuliervelden ----------
   Eén klasse i.p.v. per veld een rij utility-classes: dat houdt de HTML
   leesbaar en zorgt dat elk veld er precies hetzelfde uitziet. Wit met een
   rand leest rustiger dan het grijze vlak van eerst, en het oranje randje bij
   focus laat zien waar je typt. */
.veld {
  display: block;
  width: 100%;
  border: 1px solid #E2E8F0; /* slate-200 */
  border-radius: 10px;
  background: #fff;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.35;
  color: #0F172A;
  transition: border-color .15s, box-shadow .15s;
}
.veld::placeholder { color: #94A3B8; }
.veld:hover { border-color: #CBD5E1; }
.veld:focus {
  outline: none;
  border-color: #EA580C;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .18);
}
select.veld { cursor: pointer; }
textarea.veld { line-height: 1.55; resize: vertical; }

.veld-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #334155; /* slate-700 */
}
/* De eenheid of toelichting achter een label: hoort erbij, maar mag niet even
   hard roepen als het label zelf. */
.veld-label-extra {
  margin-left: 4px;
  font-weight: 500;
  color: #94A3B8;
}
.veld-hint {
  margin-top: 5px;
  font-size: 11px;
  color: #94A3B8;
}

/* Kopjes die het formulier in stukjes knippen: een klein label met een lijntje
   dat de rest van de breedte vult. */
.form-sectie { margin-top: 22px; }
.form-sectie:first-of-type { margin-top: 0; }
.form-sectie > .kop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.form-sectie > .kop > span {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #94A3B8;
}
.form-sectie > .kop::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E2E8F0;
}
.form-sectie .sectie-uitleg {
  margin: -4px 0 10px;
  font-size: 12px;
  color: #64748B;
}
.vorm-uitleg {
  margin-top: 10px;
  border-left: 3px solid #FDBA74; /* orange-300 */
  border-radius: 0 8px 8px 0;
  background: #FFF7ED;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.5;
  color: #7C2D12;
}
.vorm-uitleg:empty { display: none; }

/* De rij van een deur/raam in hetzelfde jasje als de rest van het formulier. */
.opening-rij { align-items: flex-end; }


/* Beheer: de uitklapbalk van een opbouw duidelijker als knop — rand, iets
   meer hoogte, en een "Lagen bekijken / bewerken"-label rechts. */
.beheer-opbouw-summary {
  border: 1px solid #E2E8F0; /* slate-200 */
  padding: 10px 12px !important;
  font-size: 13px !important;
  color: #1E293B !important; /* slate-800 */
}
.beheer-opbouw-summary:hover { border-color: #FDBA74; background: #FFF7ED !important; } /* orange-300 / orange-50 */
.beheer-opbouw-summary .pijl { color: #EA580C; } /* orange-600 */
.materialen-blok[open] > .beheer-opbouw-summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: #FFF7ED; border-color: #FDBA74; }


/* Rekentool: materiaalkaartjes per laag bij een bouwdeel */
.keuzelaag-kaart { border-radius: 10px; padding: 8px 10px; background: #fff; border: 1px solid #FED7AA; }
.keuzelaag-verwijderd { opacity: .55; background: #F8FAFC; border-style: dashed; }
.keuzelaag-verwijderd .keuzelaag-inhoud { pointer-events: none; }
.keuzelaag-verwijderd .keuzelaag-inhoud .veld { text-decoration: line-through; }


/* Eigen keuzelijst voor materialen bij een laag (i.p.v. de kale datalist
   van de browser): onder het veld, gegroepeerd per categorie, met maat. */
.keuzelaag-pijl { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #94A3B8; padding: 4px; border-radius: 6px; }
.keuzelaag-pijl:hover { color: #EA580C; background: #FFF7ED; }
.keuzelaag-lijst {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
  padding: 4px;
}
.keuzelaag-groep { padding: 8px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94A3B8; position: sticky; top: 0; background: #fff; }
.keuzelaag-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #0F172A; }
.keuzelaag-item:hover, .keuzelaag-item.actief { background: #FFF7ED; }
.keuzelaag-item.gekozen { font-weight: 600; }
.keuzelaag-item.gekozen::after { content: '✓'; color: #EA580C; margin-left: 6px; }
.keuzelaag-item-naam { flex: 1; min-width: 0; }
.keuzelaag-item-oms { flex: none; font-size: 12px; color: #64748B; }
.keuzelaag-leeg { padding: 10px; font-size: 12px; color: #64748B; }
.keuzelaag-gevuld .keuzelaag-veld { border-color: #FDBA74; background: #FFFBF5; }

/* Laagkaartje: duidelijk zichtbaar wanneer een materiaal gekozen is. */
.keuzelaag-kaart.keuzelaag-gevuld { border-color: #86EFAC; background: #F0FDF4; }
.keuzelaag-status[hidden] { display: none; }
.keuzelaag-status { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; margin-right: 8px; font-size: 11px; font-weight: 700; color: #15803D; background: #DCFCE7; border-radius: 999px; padding: 1px 8px; }
.lagen-samenvatting { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; font-size: 13px; }
.lagen-samenvatting strong { color: #C2410C; }

/* Stapnummers voor de koppen van het bouwdeel-formulier. */
.form-sectie > .kop .kop-nr { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 7px; border-radius: 999px; background: #EA580C; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0; vertical-align: middle; }
.lagen-samenvatting.lagen-samenvatting-let-op { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }

/* Favorieten-rij boven de lagen en de favoriet-knopjes. */
.favorieten-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.favorieten-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #9A3412; }
.favoriet-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid #FDBA74; background: #fff; color: #9A3412; font-size: 12px; font-weight: 600; cursor: pointer; }
.favoriet-chip:hover { background: #FFEDD5; }
.favoriet-chip .favoriet-aantal { font-weight: 500; color: #C2410C; opacity: .8; }
.favoriet-chip.favoriet-let-op { border-color: #FCA5A5; color: #991B1B; }
.soort-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: #F1F5F9; color: #475569; font-size: 12px; font-weight: 600; }
.lagen-samenvatting-hint { display: block; margin-top: 2px; font-size: 12px; opacity: .75; }
.form-fout { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid #FCA5A5; background: #FEF2F2; color: #991B1B; font-size: 14px; font-weight: 500; }
.form-fout[hidden] { display: none; }
.veld.veld-fout { border-color: #EF4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }

/* Ingevuld vak: lichtgroen, zodat je ziet wat er al staat en wat nog leeg is.
   Chrome's eigen blauwe "automatisch aangevuld"-kleur wordt overschreven. */
#wandFormulier .veld.veld-gevuld { border-color: #86EFAC; background: #F0FDF4; }
#wandFormulier .veld.veld-gevuld:focus { border-color: #EA580C; box-shadow: 0 0 0 3px rgba(234, 88, 12, .18); }
#wandFormulier .veld:-webkit-autofill, #wandFormulier .veld:-webkit-autofill:hover, #wandFormulier .veld:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #F0FDF4 inset; -webkit-text-fill-color: #0F172A; border-color: #86EFAC;
}

/* Elke stap in een eigen kader; groen zodra de stap compleet is. */
#wandFormulier .form-sectie { margin-top: 14px; padding: 16px 18px 18px; border: 1px solid #E2E8F0; border-radius: 12px; background: #FAFAFA; transition: border-color .2s, background-color .2s; }
#wandFormulier .form-sectie:first-of-type { margin-top: 0; }
#wandFormulier .form-sectie > .kop { margin-bottom: 14px; }
#wandFormulier .form-sectie > .kop > span { color: #475569; }
#wandFormulier .form-sectie > .kop::after { background: #E2E8F0; }
#wandFormulier .form-sectie.stap-compleet { border-color: #86EFAC; background: #F0FDF4; }
#wandFormulier .form-sectie.stap-compleet > .kop .kop-nr { background: #16A34A; }
#wandFormulier .form-sectie.stap-compleet > .kop .kop-nr::before { content: '✓'; }
#wandFormulier .form-sectie.stap-compleet > .kop .kop-nr { font-size: 0; }
#wandFormulier .form-sectie.stap-compleet > .kop .kop-nr::before { font-size: 11px; }
#wandFormulier .form-sectie.stap-compleet > .kop::after { background: #BBF7D0; }
.kop-optioneel { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: #94A3B8; margin-left: 4px; }

/* Bouwdeelkaartjes in de projectlijst: duidelijker kader en een
   uitklapbalk die eruitziet als een knop. */
.wall-card { border: 1px solid #CBD5E1 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 6px 16px rgba(15, 23, 42, .05); border-radius: 14px !important; }
.bouwdeel-kleurstip { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; flex: none; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15,23,42,.12); }
.wall-card > .mb-1 h4 { font-size: 17px; }
.wall-card .bouwdeel-summary {
  border: 1px solid #FDBA74; background: #FFF7ED; color: #9A3412;
  padding: 10px 12px; font-size: 13px; font-weight: 700; border-radius: 10px;
}
.wall-card .bouwdeel-summary:hover { background: #FFEDD5; border-color: #FB923C; }
.wall-card .bouwdeel-summary .pijl { color: #EA580C; }
.wall-card .bouwdeel-summary-tekst { flex: 1; }
.wall-card .bouwdeel-summary-knop { flex: none; font-size: 12px; font-weight: 600; color: #fff; background: #EA580C; border-radius: 999px; padding: 3px 12px; }
.wall-card .bouwdeel-summary-knop .open { display: none; }
.materialen-blok[open] > .bouwdeel-summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.materialen-blok[open] > .bouwdeel-summary .bouwdeel-summary-knop .open { display: inline; }
.materialen-blok[open] > .bouwdeel-summary .bouwdeel-summary-knop .dicht { display: none; }
.materialen-blok[open] > .overflow-x-auto { border: 1px solid #FDBA74; border-top: none; border-radius: 0 0 10px 10px; padding: 12px; background: #fff; }
@media print { .wall-card .bouwdeel-summary-knop { display: none; } .wall-card { box-shadow: none; } }

/* Tekening + meten als genummerde stappen, net als het bouwdeel-formulier. */
.kop-nr-groot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: #EA580C; color: #fff; font-size: 13px; font-weight: 800; }
.stap-kaart.stap-compleet { border-color: #86EFAC !important; background: #F7FEF9 !important; }
.stap-kaart.stap-compleet .kop-nr-groot { background: #16A34A; font-size: 0; }
.stap-kaart.stap-compleet .kop-nr-groot::before { content: '✓'; font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 16px; border: 2px dashed #CBD5E1; border-radius: 12px; background: #F8FAFC; color: #475569; cursor: pointer; text-align: center; transition: border-color .15s, background-color .15s; }
.dropzone:hover, .dropzone.dropzone-over { border-color: #EA580C; background: #FFF7ED; color: #9A3412; }
.dropzone [data-lucide] { color: #EA580C; }
.dropzone-titel { font-size: 15px; font-weight: 600; color: #0F172A; }
.dropzone-sub { font-size: 12px; color: #64748B; }
.dropzone-sub kbd { border: 1px solid #CBD5E1; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 11px; background: #fff; }
.dropzone-bezig { font-size: 13px; font-weight: 600; color: #EA580C; }
.dropzone-bezig[hidden] { display: none; }
/* Uitlegregel compacter. */
.meet-hint { padding: 8px 12px; font-size: 13px; }
/* Optellen: uitleg ingeklapt, alleen de kop blijft altijd staan. */
.optel-kader { padding: 10px 14px 12px; }
.optel-kader > h3 { flex-wrap: wrap; }
.optel-kort { font-weight: 500; color: #64748B; font-size: 12px; }
.optel-uitleg > summary { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: #EA580C; }
.optel-uitleg > summary::-webkit-details-marker { display: none; }
.optel-uitleg > summary:hover { text-decoration: underline; }
.optel-uitleg[open] > summary { margin-bottom: 4px; }

/* Optionele stap in de meetbalk: tweede regel eronder. */
.stap .stap-tekst { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.stap .stap-sub { font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #94A3B8; margin-top: 2px; }
.stap.optioneel.actief .stap-sub { color: rgba(255,255,255,.8); }
.stap.optioneel.klaar .stap-sub { color: #15803D; opacity: .8; }
.bd-ok.bd-ok-gevaarlijk { background: #DC2626 !important; } .bd-ok.bd-ok-gevaarlijk:hover { background: #B91C1C !important; }

/* Lengte die niet meetelt (stap 2): grijs, met een tag in het label. */
.veld.veld-telt-niet, .veld.veld-telt-niet.veld-gevuld, .veld.veld-niet-nodig, .veld.veld-niet-nodig.veld-gevuld { background: #F1F5F9 !important; color: #94A3B8 !important; border-color: #E2E8F0 !important; border-style: dashed; }
.telt-niet-tag { margin-left: 6px; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #94A3B8; background: #F1F5F9; border-radius: 999px; padding: 1px 7px; }

/* Opslaan-balk van het bouwdeelformulier: plakt onderin het scherm zolang
   het formulier in beeld is, zodat opslaan/annuleren altijd binnen bereik is. */
.form-actiebalk { position: sticky; bottom: 0; z-index: 6; margin: 20px -24px -24px; padding: 12px 24px 16px; background: rgba(255,255,255,.96); border-top: 1px solid #E2E8F0; border-radius: 0 0 12px 12px; box-shadow: 0 -6px 16px rgba(15,23,42,.06); backdrop-filter: blur(4px); }
.form-actiebalk .form-fout { margin-bottom: 10px; }
.form-actiebalk-tekst { font-size: 13px; font-weight: 600; color: #9A3412; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 999px; padding: 4px 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Oppervlakte direct (stap 2) — eigen vak binnen de lengtestap. */
.oppervlak-blok { margin-top: 14px; padding: 12px 14px; border: 1px dashed #CBD5E1; border-radius: 10px; background: #F8FAFC; }
.oppervlak-blok.oppervlak-actief { border-style: solid; border-color: #86EFAC; background: #F0FDF4; }
.oppervlak-blok .veld-hint { margin-top: 6px; }
.oppervlak-blok .veld-hint.oppervlak-bron { color: #15803D; font-weight: 600; }

/* ---------------- Vaste bovenbalk en zijmenu ---------------- */
.kop-project { display: none; align-items: center; gap: 8px; min-width: 0; flex: 1; margin: 0 16px; }
@media (min-width: 640px) { .kop-project:not([hidden]) { display: flex; } }
.kop-project-naam { font-size: 14px; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kop-project-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #15803D; background: #DCFCE7; border-radius: 999px; padding: 2px 8px; flex: none; }
.kop-knop { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #CBD5E1; background: #fff; color: #334155; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .15s; }
.kop-knop:hover { background: #F8FAFC; }
.kop-knop[hidden] { display: none; }
.kop-knop-stil { border-color: transparent; color: #64748B; }
.kop-knop-stil:hover { background: #F1F5F9; color: #0F172A; }
.kop-knop [data-lucide] { width: 16px; height: 16px; }
@media (max-width: 1023px) { .kop-knop-tekst { display: none; } .kop-knop { padding: 6px 8px; } }

.zijmenu { position: fixed; left: 0; top: 73px; bottom: 0; width: 84px; z-index: 15; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; background: #fff; border-right: 1px solid #E2E8F0; overflow-y: auto; }
.zijmenu a, .zijmenu button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 10px; border: 0; background: transparent; color: #64748B; font-size: 11px; font-weight: 600; line-height: 1.1; text-align: center; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s; }
.zijmenu a:hover, .zijmenu button:hover { background: #F1F5F9; color: #0F172A; }
.zijmenu a.actief { background: #FFF7ED; color: #C2410C; }
.zijmenu a.actief [data-lucide] { color: #EA580C; }
.zijmenu [data-lucide] { width: 20px; height: 20px; }
.zijmenu [data-project] { display: none; }
.zijmenu.project-open [data-project] { display: flex; }
.zijmenu .zijmenu-onder { margin-top: auto; }
main.met-zijmenu { padding-left: calc(84px + 16px); padding-right: 16px; max-width: none; }
@media (min-width: 1280px) { main.met-zijmenu { max-width: calc(80rem + 84px); padding-left: calc(84px + 32px); padding-right: 32px; } }
/* Smal scherm: het zijmenu wordt een horizontale balk onder de kop. */
@media (max-width: 767px) {
  .zijmenu { top: 65px; bottom: auto; left: 0; right: 0; width: auto; flex-direction: row; gap: 0; padding: 4px 6px; border-right: 0; border-bottom: 1px solid #E2E8F0; overflow-x: auto; overflow-y: hidden; }
  .zijmenu a, .zijmenu button { flex: 1 0 auto; padding: 6px 8px; font-size: 10px; }
  .zijmenu .zijmenu-onder { margin-top: 0; margin-left: auto; }
  main.met-zijmenu { padding-left: 16px; padding-top: 70px; }
}
@media print { .zijmenu { display: none !important; } main.met-zijmenu { padding-left: 0; } }
header > .mx-auto { max-width: none; }
section[id], #wandFormulier { scroll-margin-top: 84px; }
@media (max-width: 767px) { section[id], #wandFormulier { scroll-margin-top: 130px; } }
#wieBenIk { display: none !important; }
@media (min-width: 1024px) { #wieBenIk.wie-zichtbaar { display: inline !important; } }

/* Bestellijst BMN */
.bestellijst-venster { max-width: 860px; width: calc(100% - 32px); }
.bestellijst-inhoud { max-height: 55vh; overflow: auto; border: 1px solid #E2E8F0; border-radius: 10px; margin: 8px 0 4px; }
.bestellijst-inhoud table { width: 100%; font-size: 13px; border-collapse: collapse; }
.bestellijst-inhoud th { position: sticky; top: 0; background: #F8FAFC; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748B; padding: 8px 10px; border-bottom: 1px solid #E2E8F0; }
.bestellijst-inhoud td { padding: 7px 10px; border-bottom: 1px solid #F1F5F9; vertical-align: top; }
.bestellijst-inhoud td.nr { font-family: ui-monospace, monospace; white-space: nowrap; color: #0F172A; }
.bestellijst-inhoud td.aantal { white-space: nowrap; font-weight: 600; text-align: right; }
.bestellijst-inhoud .bestellijst-kop { background: #FFF7ED; color: #9A3412; font-weight: 700; font-size: 12px; padding: 6px 10px; }
.bestellijst-inhoud .bestellijst-kop.grijs { background: #F1F5F9; color: #475569; }
.rapport-artikelnr { font-family: ui-monospace, monospace; font-size: 11px; color: #64748B; white-space: nowrap; }
@media print {
  body.print-bestellijst main > *:not(#bestellijstPrintBlok) { display: none !important; }
  body.print-bestellijst header, body.print-bestellijst .zijmenu, body.print-bestellijst #bestellijstDialoog { display: none !important; }
  #bestellijstPrintBlok { display: block !important; }
}
#bestellijstPrintBlok { display: none; }

/* ---------------- Bouwdeelkaart (nieuwe indeling) ---------------- */
.wall-card { padding: 0 !important; overflow: hidden; border-left: 5px solid var(--bd-kleur, #CBD5E1) !important; }
.bd-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 20px 12px; border-bottom: 1px solid #F1F5F9; }
.bd-kop-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.bd-naam { font-size: 16px; font-weight: 700; color: #0F172A; margin: 0; }
.bd-kop-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.bd-maten { display: inline-flex; gap: 4px; }
.bd-acties { display: inline-flex; gap: 4px; margin-left: 6px; padding-left: 10px; border-left: 1px solid #E2E8F0; }
.bd-actie { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.bd-actie:hover { background: #F1F5F9; color: #0F172A; border-color: #E2E8F0; }
.bd-actie [data-lucide] { width: 15px; height: 15px; }
.bd-actie-gevaar:hover { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
@media (max-width: 900px) { .bd-actie span { display: none; } .bd-actie { padding: 6px; } }
.bd-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 16px 28px; padding: 14px 20px; }
@media (max-width: 767px) { .bd-body { grid-template-columns: 1fr; } }
.bd-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.bd-feit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-feit-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94A3B8; }
.bd-feit-waarde { font-size: 15px; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-feit-sub { font-size: 12px; color: #64748B; }
.bd-opbouw { min-width: 0; }
.bd-lagen { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: laag; }
.bd-lagen li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; padding: 5px 10px; border-radius: 8px; background: #FFF7ED; border: 1px solid #FFEDD5; }
.bd-lagen li::before { counter-increment: laag; content: counter(laag); flex: none; width: 18px; height: 18px; border-radius: 999px; background: #EA580C; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.bd-laag-cat { flex: none; width: 34%; max-width: 180px; font-size: 11px; font-weight: 600; color: #9A3412; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-laag-naam { font-weight: 600; color: #0F172A; min-width: 0; }
.bd-laag-naam small { font-weight: 500; color: #64748B; font-size: 12px; }
.bd-opmerking { display: flex; gap: 8px; align-items: flex-start; margin: 0 20px 12px; padding: 8px 12px; border-radius: 8px; background: #F8FAFC; color: #475569; font-size: 13px; }
.bd-opmerking [data-lucide] { flex: none; margin-top: 2px; color: #94A3B8; }
.bd-materialen { margin: 0 20px 16px; }
.bd-materialen .overflow-x-auto { padding: 12px !important; }
.bd-meet { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #15803D; font-weight: 600; flex-wrap: wrap; }
.bd-meet [data-lucide] { width: 12px; height: 12px; }
.bd-meet-hand { color: #64748B; font-weight: 500; }
.bd-stuk { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 700; margin-left: 2px; }
.bd-feit-som { display: block; font-size: 11px; color: #94A3B8; }

/* Lagen verslepen / verschuiven in het bouwdeelformulier */
.keuzelaag-greep { display: inline-flex; align-items: center; color: #CBD5E1; cursor: grab; flex: none; margin-right: 2px; }
.keuzelaag-greep:hover { color: #64748B; }
.keuzelaag-greep:active { cursor: grabbing; }
.keuzelaag-pijlen { display: inline-flex; gap: 2px; flex: none; }
.keuzelaag-pijlen button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid #E2E8F0; background: #fff; color: #64748B; cursor: pointer; }
.keuzelaag-pijlen button:hover:not(:disabled) { background: #F1F5F9; color: #0F172A; }
.keuzelaag-pijlen button:disabled { opacity: .3; cursor: default; }
.keuzelaag-kaart.keuzelaag-sleept { opacity: .5; border-style: dashed; }
.keuzelaag-kaart.keuzelaag-verplaatst { box-shadow: 0 0 0 3px rgba(234, 88, 12, .25); transition: box-shadow .5s; }

/* ---- Beheer: materialenbibliotheek als uitklapkaarten ----------------------
   De lijstkop (titel + "Alles inklappen") en de kop van een open groep blijven
   plakken onder de vaste bovenbalk, zodat je altijd kunt inklappen zonder
   eerst terug naar boven te scrollen. De bovenbalk is ±66 px hoog. */
.bib-kop { top: 66px; }
.bib-groep-kop.sticky { top: 112px; }
.bib-boom { top: 118px; }
.bib-rij-bewerkt > .bib-rij-kern { background: #FFF7ED; }
.bib-rij-bewerkt > .bib-rij-kern .r-bewerk { background: #FFEDD5; color: #C2410C; }
.bib-groep-open { box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 0 0 1px rgba(234, 88, 12, .18); border-color: #FED7AA; }
@media (max-width: 1023px) {
  .bib-boom { position: static; max-height: none; }
}
@media (max-width: 767px) {
  /* Op een telefoon is de bovenbalk hoger en variabel; dan liever niet plakken. */
  .bib-kop, .bib-groep-kop.sticky { position: static; }
}