:root {
  --border: #dde3ea;
  --border-strong: #c3cbd6;
  --bg: #ffffff;
  --bg-alt: #f4f6f9;
  --bg-subtle: #eceff3;
  --text: #1a2130;
  --text-muted: #64707e;
  --accent: #2952e3;
  --accent-hover: #1f3fc0;
  --accent-soft: #ecf0ff;
  --hoog: #c0281a;
  --hoog-soft: #fdecea;
  --normaal: #9a6700;
  --normaal-soft: #fdf1d9;
  --laag: #5c6672;
  --laag-soft: #eef0f2;
  --ok: #15803d;
  --ok-soft: #e6f6ec;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.1);
  --nav-height: 3.5rem;
  --gevaar: #c0281a;
  --gevaar-soft: #fdecea;
  --gevaar-hover: #a31f14;
  /* Afstand-schaal: elders in dit bestand staan nog losse rem-waarden (dat
     blijft zo, dit is alleen voor nieuwe componenten), maar nieuwe regels
     gebruiken deze schaal i.p.v. weer een eigen getal te verzinnen. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
}

* { box-sizing: border-box; }

html { font-size: 15px; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg-alt);
  line-height: 1.5;
}

/* -- Kop en navigatie -- */

header.topnav {
  height: var(--nav-height);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

header.topnav .merk {
  display: flex;
  align-items: center;
}

header.topnav .merk img {
  height: 40px;
  display: block;
}

header.topnav nav {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
}

header.topnav nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

header.topnav nav a:hover { background: var(--bg-alt); color: var(--text); }
header.topnav nav a.actief { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Placeholder voor een tijdelijk uitgeschakelde functie (bv. IC-runs/Min-max
   tijdens een rebuild) — zelfde opmaak als een navlink, maar niet klikbaar. */
.nav-uitgeschakeld {
  color: var(--text-muted);
  opacity: 0.5;
  padding: 0.5rem 0.75rem;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: not-allowed;
}

header.topnav button {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  box-shadow: none;
}
header.topnav button:hover { background: var(--bg-alt); border-color: transparent; color: var(--text); }

main {
  max-width: 1220px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem;
}

/* Geen vaste px-cap: bij uitzoomen (grotere viewport in CSS-pixels) mag de
   brede pagina (Artikeloverzicht) gewoon meegroeien tot bijna de volle
   breedte, zodat er geen lege ruimte naast de tabel overblijft — alleen de
   header/logo loopt al helemaal door tot de rand. */
main.breed { max-width: 98vw; }

h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1.25rem; }
h2 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 2rem 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

/* -- Statuskaarten (dashboard, IC-run-detail) -- */

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.kaart {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.15rem;
}

.kaart .label { font-size: 0.76rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kaart .waarde { font-size: 1.55rem; font-weight: 700; margin-top: 0.25rem; }

/* -- Tabellen -- */

.tabel-wrap {
  overflow: auto;
  max-height: 74vh;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.tabel-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.tabel-wrap::-webkit-scrollbar-track { background: transparent; }
.tabel-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

/* Variant zonder eigen scrollbox: alleen de hele pagina scrolt (voorkomt
   een geneste verticale scrolbalk bovenop de paginascrollbalk). De
   tabelkop blijft zichtbaar door 'm sticky te maken t.o.v. de paginascroll,
   net onder de sticky topnav. */
.tabel-wrap--pagina {
  overflow: visible;
  max-height: none;
}
.tabel-wrap--pagina th {
  top: var(--nav-height);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.87rem;
  vertical-align: top;
}

th {
  background: var(--bg-alt);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .03em;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--border);
}

.th-sorteer {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}
.th-sorteer:hover { color: var(--accent); }
.sorteer-pijl { font-size: 0.65rem; }

tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--bg-alt); }
/* Geen filter/transform/opacity hier: die maken van de rij een nieuwe
   stacking context, waardoor een z-index'ed popup binnen die rij (zoals
   .ean-popup) opgesloten raakt en door de eronder gerenderde volgende rij
   heen bleedt. box-shadow (inset, met een enorme spread) geeft hetzelfde
   "verdonker de rij"-effect zonder dat neveneffect. */
tbody tr:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.03); }
tbody tr.afwijking { background: var(--hoog-soft); }

/* -- Badges (zacht getint: leesbaarder dan volle kleurvlakken in tabeldichte schermen) -- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}
.badge.hoog { background: var(--hoog-soft); color: var(--hoog); }
.badge.normaal { background: var(--normaal-soft); color: var(--normaal); }
.badge.laag { background: var(--laag-soft); color: var(--laag); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.grijs { background: var(--bg-subtle); color: var(--text-muted); }

.acties { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* -- Knoppen en formulieren -- */

button, .knop {
  font: inherit;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
button:hover, .knop:hover { background: var(--bg-alt); border-color: var(--text-muted); }
button.primair, .knop.primair { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
button.primair:hover, .knop.primair:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Voor destructieve/onomkeerbare acties (deactiveren e.d.) — bewust geen
   volle rode vlek (dat oogt als een foutmelding, niet als een knop), zelfde
   zacht-getinte aanpak als de badges. */
button.knop-gevaar, .knop.knop-gevaar { background: var(--gevaar-soft); border-color: var(--gevaar-soft); color: var(--gevaar); }
button.knop-gevaar:hover, .knop.knop-gevaar:hover { background: var(--gevaar); border-color: var(--gevaar); color: #fff; }

button:disabled, .knop[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
button:disabled:hover { background: var(--bg); border-color: var(--border-strong); }

button:focus-visible, .knop:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}

.leeg { color: var(--text-muted); font-style: italic; padding: 1.25rem; }

form.inline { display: inline; }
form.rij-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

input, select, textarea {
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}

.flash {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.flash.succes { background: var(--ok-soft); color: var(--ok); border-left-color: var(--ok); }
.flash.fout { background: var(--hoog-soft); color: var(--hoog); border-left-color: var(--hoog); }
.flash.info { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); }

.waarschuwing {
  background: var(--normaal-soft);
  color: var(--normaal);
  border-left: 3px solid var(--normaal);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

.subtiel { color: var(--text-muted); font-size: 0.85rem; }

/* -- Voortgangsbalk (sync/bulk-acties) -- */

.voortgangsbalk {
  background: var(--bg-subtle);
  border-radius: 999px;
  height: 8px;
  margin-top: var(--space-2);
  overflow: hidden;
}
.voortgangsbalk-vulling { background: var(--accent); height: 100%; }

/* -- Formulieren (labels boven de velden, gegroepeerd in rijen) -- */

.formulier { display: flex; flex-direction: column; gap: var(--space-4); }
.formulier-rij { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.formulier-rij > .veld { flex: 1 1 200px; }
.veld { display: flex; flex-direction: column; gap: 0.35rem; }
.veld label, .veld > span.veld-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}
.veld input, .veld select, .veld textarea { width: 100%; }
.veld input[type="checkbox"], .veld input[type="radio"] { width: auto; }
.veld--checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
.veld--checkbox label { font-size: 0.85rem; font-weight: 500; color: var(--text); }

.formulier-acties {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* -- Filterbalk (boven een tabel) -- */

.filterbalk {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.filterbalk .veld { flex: 0 1 auto; }

/* -- Tabbladen -- */

.tabnav { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: var(--space-4); }
.tabnav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}
.tabnav a:hover { background: var(--bg-alt); }
.tabnav a.actief { background: var(--accent); border-color: var(--accent); color: #fff; }
.tabnav a .badge { background: rgba(255, 255, 255, 0.25); color: inherit; }
.tabnav a.actief .badge { background: rgba(255, 255, 255, 0.25); color: #fff; }
.tabnav a:not(.actief) .badge { background: var(--bg-subtle); color: var(--text-muted); }

/* -- Modaal (native <dialog>) -- */

dialog.modaal {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0;
  width: min(560px, 92vw);
  max-height: 88vh;
  color: var(--text);
}
dialog.modaal::backdrop { background: rgba(16, 24, 40, 0.45); }
dialog.modaal .modaal-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
dialog.modaal .modaal-kop h2 { margin: 0; padding: 0; border: none; font-size: 1.1rem; }
dialog.modaal .modaal-inhoud { padding: var(--space-5); overflow-y: auto; }
dialog.modaal .modaal-sluiten {
  padding: 0.3rem;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}
dialog.modaal .modaal-sluiten:hover { background: var(--bg-alt); border-color: transparent; }

/* -- Iconen (inline SVG, zie de icoon()-Jinja-global) -- */

.icoon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -- Inlogscherm -- */

body.login-pagina {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-kaart {
  width: 100%;
  max-width: 360px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.25rem 2rem 2rem;
}

.login-kaart h1 {
  display: flex;
  align-items: center;
  margin: 0 0 1.5rem;
}
.login-kaart h1 img {
  height: 48px;
  display: block;
}

.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
.login-form input { width: 100%; }
.login-form button { justify-content: center; margin-top: 0.4rem; }

/* -- Artikeloverzicht: gestapelde CLS/BD-regels per cel -- */

.kol-picklocaties { min-width: 280px; }
.kol-productcode { min-width: 195px; }
.kol-koppeling { width: 135px; max-width: 135px; overflow-wrap: break-word; word-break: break-word; }
.kol-omschrijving { width: 200px; max-width: 200px; overflow-wrap: break-word; word-break: break-word; }
/* Compacte kolommen (badges, getallen, korte categorieën): krimpen naar hun
   inhoud in plaats van gelijk verdeeld te worden over de resterende
   breedte, zodat brede kolommen (Omschrijving, Picklocaties) de ruimte
   krijgen die ze nodig hebben. De headertekst mag wél afbreken (voorkomt
   dat een lange kolomnaam als "Aantal per pallet/omdoos" de kolom zelf
   breder maakt dan de waarden erin nodig hebben); de waarden in de tabel
   blijven op 1 regel. */
td.kol-smal { width: 1%; white-space: nowrap; }
th.kol-smal { width: 1%; }

.actief-ja, .actief-nee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}
.actief-ja { background: var(--ok-soft); color: var(--ok); }
.actief-nee { background: var(--bg-subtle); color: var(--text-muted); }

/* EAN in de tabel blijft platte tekst (meerdere gelijktijdig zichtbare
   barcodes in een kolom scannen juist slecht) — de scanbare barcode
   verschijnt pas los, in een zwevend popup-vlak, bij hover. */
.ean-hover { position: relative; display: inline-block; }
.ean-popup {
  display: none;
  position: absolute;
  z-index: 25;
  top: 100%;
  left: 0;
  margin-top: 0.35rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.6rem 0.75rem;
}
.ean-hover:hover .ean-popup { display: block; }
.ean-popup svg { display: block; background: #ffffff; }

.barcode-detail svg { display: block; max-width: 100%; height: auto; margin: 0.35rem 0 0.75rem; }

.voorraad-getal {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}

/* min-height moet de eigen top/bottom-padding meetellen (box-sizing:
   border-box trekt die er sowieso van af) — anders past een cel met
   écht 2 regels inhoud (zoals de productcode-cel) niet binnen deze
   "minimum" en wordt hij alsnog hoger dan cellen met maar 1 regel. */
.zijde-regel { padding: 0.15rem 0; min-height: calc(2 * 1.5em + 0.3rem); }
/* Productcode + syncknop en de syncstatus-regel eronder mogen nooit
   terugvouwen naar een 3e regel — anders wordt precies deze kolom hoger
   dan de rest, die allemaal op de gedeelde min-height van 2 regels blijven
   staan. kol-productcode geeft er genoeg breedte voor. */
.productcode-rij {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.5;
  white-space: nowrap;
}
.knop-sync {
  padding: 0 0.35rem;
  font-size: 0.75rem;
  line-height: 1.5;
  flex-shrink: 0;
}
.productcode-rij + .subtiel { white-space: nowrap; display: block; }
.productcode-rij .klant-label { margin-right: 0; }
.zijde-regel + .zijde-regel { border-top: 1px dashed var(--border); margin-top: 0.2rem; padding-top: 0.35rem; }
.klant-label {
  display: inline-block;
  min-width: 2.4em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 0.35rem;
}
.zijde-regel-horizontaal { display: flex; align-items: flex-start; gap: 0.15rem; }
.zijde-regel-horizontaal .klant-label { margin-top: 0.2rem; flex-shrink: 0; }
.picklocatie-groep { display: flex; flex-direction: column; gap: 0.3rem; }
.picklocatie-item { line-height: 1.3; }
.picklocatie-groep.meerdere {
  background: var(--normaal-soft);
  border-left: 3px solid var(--normaal);
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
}

/* -- Productdetailpagina: 1 of 2 zijden (CLS/BD) naast elkaar -- */
.detail-zijden { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.detail-zijde { flex: 1 1 480px; min-width: 0; }
.detail-zijde h3 { font-size: 0.95rem; font-weight: 600; margin: 1.5rem 0 0.6rem; }

/* -- Labelsjabloon bewerken: formulier + live preview naast elkaar -- */

.sjabloon-editor { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start; }
.sjabloon-formulier { flex: 1 1 22rem; min-width: 20rem; }

.veld-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.veld-editor legend { font-weight: 600; padding: 0 0.4rem; }
.veld-editor-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.veld-editor-rij .veld label { font-size: 0.76rem; }
.veld-editor-urls { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }

/* De preview is 1 ingesloten SVG (zie genereer_label_svg) — breedte/hoogte
   komen uit sjabloon.breedte_mm/hoogte_mm, dus die blijven inline (data). */
.label-preview { position: relative; border: 1px solid var(--text-muted); background: #fff; line-height: 0; }