/* Symbiose Brewing / Blending — huisstijl
   Crème/wit basis, zwarte tekst, klassieke serif, accentkleur per drank/blend. */

:root {
  --paper: #faf7f0;
  --paper-2: #ffffff;
  /* Iets dieper dan het papier: voor vullingen die geen invoervak zijn. */
  --paper-3: #f1ece0;
  --ink: #14110e;
  --ink-soft: #56504a;
  --line: #d9d2c5;
  --line-strong: #14110e;
  --accent-bier: #c8952a;
  --accent-wijn: #6b2f4a;
  --accent-cider: #7d8f6a;
  --accent-blend: #2f4a5c;
  --accent-bib: #a35c2a;
  --danger: #9b2c2c;
  --ok: #3f6b46;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --radius: 2px;
  --shadow: 0 1px 2px rgba(20,17,14,.06), 0 8px 24px rgba(20,17,14,.05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font-family: inherit; font-size: 1rem; color: inherit; }

/* ---------- Typografie ---------- */
.brand {
  font-size: .95rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}
.brand-sub {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: lowercase;
  text-align: center;
  color: var(--ink-soft);
  margin: .25rem 0 0;
}
h1 { font-size: 1.6rem; font-weight: 500; letter-spacing: .02em; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin: 2rem 0 .75rem; }
h3 { font-size: 1rem; font-weight: 500; margin: 0 0 .5rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .8rem; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

header.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: .6rem 0;
  padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
}
/* Logo, tabbladen en inhoud in dezelfde kolom: alle drie 1180 px breed met
   1rem lucht opzij. Eerder liep de tabbalk tot de vensterrand door terwijl de
   rest gecentreerd stond, en begon het logo 16 px links van de inhoud. */
.topbar-inner { display: flex; align-items: center; gap: 1rem; max-width: 1180px; margin: 0 auto; padding: 0 1rem; }
.topbar .logo { width: 38px; height: 38px; flex: none; }
.topbar .titles { flex: 1; }
.topbar .titles .brand { text-align: left; }
.topbar .titles .brand-sub { text-align: left; }
.topbar .who { font-size: .75rem; color: var(--ink-soft); text-align: right; }
.topbar .who button { margin-top: .2rem; }

nav.tabs {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.tabs-inner {
  display: flex; gap: .25rem; overflow-x: auto;
  max-width: 1180px; margin: 0 auto;
  /* De kolom is 1rem breed opzij; de tabbladen hebben zelf .8rem padding, dus
     hier blijft .2rem over om de tekst met het logo en de inhoud te laten
     uitlijnen in plaats van met de rand van het klikvlak. */
  padding: 0 .2rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-inner::-webkit-scrollbar { display: none; }
nav.tabs a {
  flex: none;
  padding: .7rem .8rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
nav.tabs a.active { color: var(--ink); border-bottom-color: var(--line-strong); }

main {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1rem calc(4rem + env(safe-area-inset-bottom, 0px));
}

.page-head { margin-bottom: 1rem; }
.page-head .lede { color: var(--ink-soft); font-size: .9rem; }
/* Titel links, de instellingen van deze pagina rechts op dezelfde regel. Het
   zijn geen filters, dus ze horen niet tussen de keuzemenu's te staan. Past het
   niet naast elkaar, dan zakken ze onder de hele kop -- en niet tussen de titel
   en de omschrijving in. */
.page-head:has(> .page-acties) {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .4rem 1rem; flex-wrap: wrap;
}
.page-head > .page-head-tekst { flex: 1 1 22rem; }
.page-head > .page-head-tekst > :last-child { margin-bottom: 0; }
.page-acties { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Bovenaan uitlijnen: velden met een toelichting eronder zijn hoger dan de rest,
   en bij uitlijnen op de onderkant lopen de labels en invoervakken dan uiteen. */
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
/* Losse knoppen zonder label horen wel op de hoogte van het invoervak ernaast. */
.row > button { align-self: flex-start; }
.row > * { min-width: 0; }
.grid { display: grid; gap: .9rem; }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid.stats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
/* De tegels stonden met hun onderkant op de bovenlijn van de tabel eronder. */
.grid.stats { margin-bottom: 1.1rem; }
.spacer { flex: 1; }

/* ---------- Formulieren ---------- */
.field { display: flex; flex-direction: column; gap: .22rem; margin-bottom: .55rem; flex: 1 1 200px; }
.field > label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .6rem;
  width: 100%;
  min-height: 42px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.field .hint { font-size: .72rem; color: var(--ink-soft); }
.field.invalid input, .field.invalid select { border-color: var(--danger); }

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem .8rem .6rem;
  margin: 0 0 1rem;
  background: var(--paper-2);
}
fieldset > legend {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  padding: 0 .4rem;
}

.checks { display: flex; flex-wrap: wrap; gap: .4rem; }
.check {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .7rem; background: var(--paper-2); cursor: pointer;
  font-size: .88rem;
}
.check input { accent-color: var(--ink); }
.check.on { border-color: var(--line-strong); background: #efe9dc; }

.radio-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.radio-row .check { min-height: 42px; }

/* ---------- Knoppen ---------- */
button {
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: .55rem .9rem;
  letter-spacing: .08em;
  font-size: .82rem;
  text-transform: uppercase;
  min-height: 42px;
}
button:hover { opacity: .88; }
button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button.ghost:hover { border-color: var(--line-strong); }
/* Hulpknop naast een invoervak. Met de gewone omlijning leek hij een tweede,
   leeg invoerveld; nu een gevuld chipje dat als knop leest. */
button.chip {
  background: var(--paper-3);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .4rem .85rem;
  min-height: 42px;
  font-size: .7rem;
  letter-spacing: .1em;
  white-space: nowrap;
}
button.chip:hover { background: #e8e2d4; opacity: 1; }
button.chip:disabled { background: var(--paper-3); }

button.link, a.link { background: none; border: none; color: var(--ink-soft); text-decoration: underline; padding: .2rem; min-height: 0; text-transform: none; letter-spacing: 0; font-size: .8rem; }
a.link { display: inline-block; cursor: pointer; }
button.danger { background: var(--danger); border-color: var(--danger); }
button:disabled { opacity: .4; cursor: not-allowed; }
/* Kleine knop in een tabelregel; op een aanraakscherm wordt hij weer ruimer. */
button.knop-klein { font-size: .7rem; padding: .3rem .6rem; min-height: 0; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---------- Kaarten ---------- */
.card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1rem .9rem .9rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card .accent {
  position: absolute; top: 0; right: 0;
  width: 92px; height: 92px;
  background: var(--card-accent, var(--accent-bier));
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: .9;
}
.card .card-head { text-align: center; position: relative; z-index: 1; }
.card .card-head .logo { width: 30px; height: 30px; margin: 0 auto .35rem; display: block; }
.card .card-title { font-size: 1.25rem; font-style: italic; text-align: center; margin: .4rem 0 .1rem; }
.card .card-meta { text-align: center; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.card .card-icon { display: flex; justify-content: center; margin: .7rem 0 .5rem; }
.card .card-icon svg { width: 62px; height: 62px; }
/* Rij verpakkingsiconen op een blend-groepskaart. */
.card .card-icon .icoonrij { display: flex; gap: .5rem; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.card .card-icon .icoonrij svg { width: 42px; height: 42px; }
/* minmax(0, …): zonder die 0 kunnen invoervelden in de rechterkolom niet
   krimpen en lopen de waarden buiten het kader. */
.card dl {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: .18rem .6rem;
  margin: .6rem 0 0;
  font-size: .86rem;
}
.card dt {
  color: var(--ink-soft);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  align-self: center;
  min-width: 0;
  overflow-wrap: anywhere;
}
.card dd {
  margin: 0;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.card dd input, .card dd select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: right;
  padding: .3rem .4rem;
  min-height: 34px;
  font-size: .82rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* Lange productnamen en veel gegevens: iets kleiner, zodat alles binnen het kader past. */
.card.compact dl { font-size: .78rem; gap: .14rem .5rem; }
.card.compact dt { font-size: .66rem; }
.card .card-title.lang { font-size: 1.05rem; }
.card .card-title.xlang { font-size: .92rem; line-height: 1.2; }
.card .card-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.card .card-actions button { flex: 1 1 auto; font-size: .72rem; padding: .45rem .6rem; }

/* Compacte invoer in de stijl van de vinkjes: pilvorm met een klein knopje. */
.pil-invoer {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  padding: .18rem .18rem .18rem .8rem;
  font-size: .88rem;
  max-width: 100%;
}
.pil-invoer:focus-within { border-color: var(--line-strong); }
.pil-invoer input {
  border: none;
  background: none;
  padding: 0;
  min-height: 0;
  width: 6.5rem;
  min-width: 0;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.pil-invoer input:focus { outline: none; }
.pil-invoer button {
  border: none;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: .3rem .8rem;
  min-height: 0;
  font-size: .68rem;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* ---------- Bedragenblok op een kaart ---------- */
/* Twee kolommen incl./excl. btw, cijfers netjes onder elkaar. */
.bedragen {
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) minmax(3.6rem, auto) minmax(3.6rem, auto);
  gap: .22rem .55rem;
  align-items: center;
  font-size: .84rem;
}
.bedragen .titel {
  grid-column: 1 / -1;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .1rem;
}
.bedragen .kop {
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}
.bedragen .veldnaam {
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-width: 0;
  /* break-word i.p.v. anywhere: anders breekt "Prijs per stuk" per letter af */
  overflow-wrap: break-word;
}
.bedragen .veldnaam.breed { grid-column: 1 / 3; }
.bedragen .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bedragen .streep { grid-column: 1 / -1; border-top: 1px solid var(--line); margin: .3rem 0 .15rem; }
.bedragen input {
  width: 100%;
  min-width: 0;
  max-width: 6.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: .22rem .35rem;
  min-height: 30px;
  font-size: .82rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card.compact .bedragen { font-size: .78rem; gap: .18rem .45rem; }

.pill {
  display: inline-block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: .12rem .5rem; color: var(--ink-soft);
}
.pill.schorsing { border-color: var(--accent-blend); color: var(--accent-blend); }
.pill.veraccijnsd { border-color: var(--ok); color: var(--ok); }

details.herkomst { margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .5rem; }
details.herkomst > summary { cursor: pointer; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
details.herkomst ul { margin: .5rem 0 0; padding-left: 1rem; font-size: .84rem; }
details.herkomst ul ul { font-size: .78rem; color: var(--ink-soft); }

/* ---------- Dashboardsecties ---------- */
/* Elk onderdeel staat op zichzelf, in welke volgorde de gebruiker ze ook zet. */
.dash-sectie { margin-top: 1.75rem; }
.dash-sectie:first-of-type { margin-top: 1rem; }
.dash-sectie > h2:first-child { margin-top: 0; }

/* Dichtklapbare onderdelen. De kop blijft de kop: het driehoekje ervoor is het
   enige dat verraadt dat er iets achter zit. */
details.dash-sectie > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: .5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .3rem;
}
details.dash-sectie > summary::-webkit-details-marker { display: none; }
details.dash-sectie > summary::before {
  content: '';
  flex: none;
  width: 0; height: 0;
  border-left: 5px solid var(--ink-soft);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-1px);
  transition: transform .12s ease;
}
details.dash-sectie[open] > summary::before { transform: rotate(90deg) translateX(-1px); }
details.dash-sectie > summary h2 { margin: 0; }
details.dash-sectie > summary:hover h2 { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  details.dash-sectie > summary::before { transition: none; }
}

/* ---------- Stat tegels ---------- */
.stat {
  border: 1px solid var(--line);
  border-left: 3px solid var(--card-accent, var(--ink));
  background: var(--paper-2);
  padding: .8rem;
}
.stat .k { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.stat .v { font-size: 1.5rem; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.stat .s { font-size: .78rem; color: var(--ink-soft); }

/* ---------- Tabellen ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
/* Brede tabellen schuiven binnen hun eigen kader, maar dat zag je niet: op een
   telefoon leek de tabel gewoon afgesneden. Deze schaduwen aan de randen komen
   op zodra er meer staat dan past, en verdwijnen als je aan het eind bent.
   background-attachment: local laat de verloopjes meebewegen met de inhoud. */
.table-wrap {
  background-image:
    linear-gradient(to right, var(--paper-2) 40%, rgba(250, 247, 240, 0)),
    linear-gradient(to left, var(--paper-2) 40%, rgba(250, 247, 240, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(20, 17, 14, .14), rgba(20, 17, 14, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(20, 17, 14, .14), rgba(20, 17, 14, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, .9rem 100%, .9rem 100%;
  background-attachment: local, local, scroll, scroll;
}
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
tfoot td { font-weight: 600; border-top: 1px solid var(--line-strong); }

.empty {
  border: 1px dashed var(--line);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: .9rem;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,17,14,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1rem; overflow-y: auto; z-index: 100;
}
.modal {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  max-width: 720px; width: 100%;
  margin: auto;
  padding: 1rem;
  box-shadow: var(--shadow);
}
.modal-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.modal-head h3 { flex: 1; margin: 0; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; }

/* Tabbladen binnen een venster. Zelfde vorm als de tabbladen bovenin de app,
   zodat het venster niet een tweede vormentaal introduceert. */
.modal-tabs {
  display: flex; gap: .25rem; overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
  scrollbar-width: none;
}
.modal-tabs::-webkit-scrollbar { display: none; }
.modal-tabs button {
  flex: none;
  background: none; border: none; border-radius: 0;
  padding: .55rem .8rem;
  min-height: 40px;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.modal-tabs button:hover { background: none; opacity: 1; color: var(--ink); }
.modal-tabs button.active { color: var(--ink); border-bottom-color: var(--line-strong); }
/* Op een telefoon moeten alle drie de namen zichtbaar zijn zonder te schuiven. */
@media (max-width: 560px) {
  .modal-tabs button { padding: .55rem .5rem; letter-spacing: .06em; }
}

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login {
  width: 100%; max-width: 380px;
  border: 1px solid var(--line-strong); background: var(--paper-2);
  padding: 2rem 1.5rem; box-shadow: var(--shadow);
}
.login .logo { width: 76px; height: 76px; margin: 0 auto 1rem; display: block; }
.login h1 { text-align: center; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; margin: 1.5rem 0 .75rem; }
.error { color: var(--danger); font-size: .85rem; margin: .5rem 0; }
.notice { color: var(--ok); font-size: .85rem; margin: .5rem 0; }
/* Een aandachtspunt, geen fout: dezelfde kleur als "let op" op het dashboard. */
.waarschuwing { color: var(--accent-bier); }
.waarschuwing:empty { display: none; }
.hint.waarschuwing { color: var(--accent-bier); }

/* ---------- Metinglog ---------- */
.metingen { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .82rem; }
.metingen li { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dotted var(--line); padding: .18rem 0; }

/* ---------- Label 50 x 88 mm ---------- */
.label-preview { display: flex; justify-content: center; padding: 1rem 0; }
.label {
  width: 50mm; height: 88mm;
  background: #fff; color: #000;
  border: 1px solid var(--line);
  padding: 3mm;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--serif);
  overflow: hidden;
}
.label .l-logo { width: 9mm; height: 9mm; }
.label .l-brand { font-size: 2.6mm; letter-spacing: .9mm; text-transform: uppercase; margin-top: 1mm; }
.label .l-sub { font-size: 1.9mm; letter-spacing: .5mm; color: #444; }
.label .l-accent { width: 100%; height: 1.4mm; margin: 1.6mm 0; background: var(--card-accent, #000); }
.label .l-title { font-size: 4mm; font-style: italic; text-align: center; line-height: 1.15; margin-bottom: .6mm; }
/* Een lange productnaam mag de QR-code niet van het label duwen: hij krijgt een
   kleinere letter en houdt op na vier regels. */
.label .l-title.klein { font-size: 3.2mm; }
.label .l-title.xklein { font-size: 2.7mm; line-height: 1.2; }
.label .l-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden; min-height: 0;
}
.label .l-icon svg { width: 9mm; height: 9mm; }
.label .l-data { width: 100%; font-size: 2.3mm; line-height: 1.35; margin-top: 1mm; }
.label .l-data div { display: flex; justify-content: space-between; gap: 1.5mm; }
.label .l-data span:first-child { color: #555; text-transform: uppercase; letter-spacing: .25mm; font-size: 2mm; }
/* flex: none — de QR en het batchnummer mogen nooit meekrimpen of wegvallen. */
.label .l-qr { margin-top: auto; padding-top: 1.5mm; flex: none; }
.label .l-code { flex: none; }
.label .l-qr img, .label .l-qr canvas { width: 26mm; height: 26mm; display: block; image-rendering: pixelated; }
.label .l-code { font-size: 2mm; letter-spacing: .3mm; text-align: center; margin-top: .8mm; }

/* ---------- Scanner ---------- */
.scanner video { width: 100%; max-height: 60vh; background: #000; border: 1px solid var(--line-strong); }

/* ---------- Print ---------- */
@media print {
  @page { size: 50mm 88mm; margin: 0; }
  body { background: #fff; }
  body * { visibility: hidden; }
  .label, .label * { visibility: visible; }
  .label {
    position: absolute; left: 0; top: 0;
    border: none; box-shadow: none;
    width: 50mm; height: 88mm;
  }
  .modal-backdrop { position: static; background: none; padding: 0; overflow: visible; }
  .modal { border: none; box-shadow: none; padding: 0; }
  /* Zonder dit drukt de browser achtergrondvlakken (de accentbalk) niet af. */
  .label { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 640px) {
  /* Zelfde ruimte opzij als de inhoud, anders begint het logo 4 px naast de kop. */
  .topbar-inner { gap: .6rem; padding: 0 .75rem; }
  .tabs-inner { padding: 0 .75rem; }
  .topbar .titles .brand { font-size: .78rem; letter-spacing: .26em; }
  .topbar .titles .brand-sub { display: none; }
  .topbar .who { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
  .topbar .who > div:first-child { display: none; }
  .topbar button.ghost { font-size: .68rem; padding: .4rem .5rem; }
  main { padding: 1rem .75rem 4rem; }
  .field { flex-basis: 100%; }
}

/* Uitklapbare historie: vaten die leeg zijn geraakt. */
.historie { margin: 1.2rem 0 0; border-top: 1px solid var(--line); padding-top: .6rem; }
.historie > summary { cursor: pointer; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.historie-lijst { margin-top: .6rem; display: flex; flex-direction: column; gap: .35rem; }
.historie-regel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem .8rem;
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 2px; font-size: .9rem; }
/* Op een smal scherm past de knop niet meer naast de naam; dan zakt hij eronder
   in plaats van buiten de rand te steken. */
.historie-regel button { flex: 0 0 auto; padding: .25rem .6rem; font-size: .75rem; max-width: 100%; }

/* De knop om een ingekorte tabel helemaal uit te klappen. */
.tabel-meer { margin-top: .4rem; }

/* Totalen onder een brede tabel, voluit geschreven. */
dl.totalen { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem;
  margin: .8rem 0 0; font-size: .92rem; }
dl.totalen dt { color: var(--ink-soft); }
dl.totalen dd { margin: 0; }

/* ---------- Origineel logo ---------- */
/* Het woordmerk is een vector; de breedte bepaalt de maat, de hoogte volgt. */
.woordmerk svg, .logo svg, .l-logo svg, .l-merk svg { display: block; width: 100%; height: auto; }
.topbar .titles { display: flex; align-items: center; }
.topbar .woordmerk { width: 190px; }
.card .card-head .woordmerk { width: 108px; margin: .45rem auto 0; }
.login .woordmerk { width: 190px; margin: 0 auto 1rem; }
.label .l-merk { width: 30mm; margin: 1mm auto 0; }
@media (max-width: 720px) { .topbar .woordmerk { width: 132px; } }

/* Het echte embleem is smal en hoog (verhouding ~1:2,75): breedte bepaalt de maat. */
.topbar .logo { width: 15px; height: auto; }
.card .card-head .logo { width: 13px; height: auto; margin: 0 auto .2rem; }
.login .logo { width: 30px; height: auto; margin: 0 auto .8rem; }
.label .l-logo { width: 3.6mm; height: auto; margin: 0 auto; }

/* Op het 50 x 88 mm etiket: embleem en woordmerk boven de accentbalk. */
.label .l-logo { width: 2.9mm; margin: 1mm auto 0; }
.label .l-merk { width: 24mm; margin: 1.2mm auto 0; }

/* ---------- Accentkleur kiezen ---------- */
.card .accent.klikbaar { cursor: pointer; }
.card .accent.klikbaar:hover { filter: brightness(1.15); }
.kleurgroep { margin-bottom: .9rem; }
.stalen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
button.staal { width: auto; padding: 0; border: 1px solid var(--line); border-radius: 2px;
  cursor: pointer; overflow: hidden; }
button.staal .staal-naam { display: block; padding: 1.5rem .55rem .3rem; font-size: .68rem;
  letter-spacing: .06em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
button.staal.aan { outline: 2px solid var(--ink); outline-offset: 1px; }
input[type=color] { padding: .2rem; height: 2.4rem; }

/* ---------- Etiket in zwart-wit ---------- */
/* Een thermische labelprinter (Leitz Icon) drukt alleen zwart: grijstinten
   worden dan gerasterd en lichte kleuren verdwijnen. Alles hard op zwart. */
.label.zw, .label.zw * { color: #000 !important; }
.label.zw .l-accent { background: #000 !important; }
.label.zw .l-data span, .label.zw .l-sub, .label.zw .l-code { color: #000 !important; }

/* De driehoek moet boven de kaartkop liggen, anders vangt die de klik op.
   clip-path knipt ook de klikzone, dus alleen het gekleurde vlak reageert. */
.card .accent { width: 124px; height: 124px; z-index: 2; }
.card .accent.klikbaar:hover { filter: brightness(1.12); }
.card .accent.klikbaar:active { filter: brightness(.92); }

/* Op een lichte staal leest zwarte tekst beter dan witte. */
button.staal.licht .staal-naam { color: #14110e; text-shadow: 0 1px 2px rgba(255,255,255,.6); }

/* ---------- Kostprijs op de kaart ---------- */
.card details.kosten { margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.card details.kosten > summary { cursor: pointer; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); }
dl.kostenlijst { display: grid; grid-template-columns: 1fr minmax(0, auto); gap: .12rem .6rem;
  margin: .4rem 0 0; font-size: .88rem; }
dl.kostenlijst dt { color: var(--ink-soft); }
dl.kostenlijst dd { margin: 0; text-align: right; }
dl.kostenlijst dd.num { font-variant-numeric: tabular-nums; }

/* ---------- Resultatenrekening ---------- */
table.resultaat tr.subregel td:first-child { padding-left: 1.4rem; color: var(--ink-soft); font-size: .88rem; }
table.resultaat tr.subregel td { padding-top: .12rem; padding-bottom: .12rem; }
tr.totaalregel td { font-weight: 600; border-top: 1px solid var(--line-strong); }
td.afwijking { color: var(--danger); }

/* ---------- Alleen meekijken ---------- */
.lees-balk { background: #f3ead6; border-bottom: 1px solid var(--line);
  padding: .5rem 1.25rem; font-size: .85rem; color: var(--ink-soft); text-align: center; }
/* Vastleggen uitschakelen: formulieren en knoppen die iets wijzigen. */
.app.alleen-lezen fieldset { opacity: .55; pointer-events: none; }
.app.alleen-lezen .card .btn-row button:not(.ghost),
.app.alleen-lezen .card input, .app.alleen-lezen .card select,
.app.alleen-lezen .card .check { pointer-events: none; opacity: .6; }

/* ---------- Controle van de administratie ---------- */
.controle-goed { border: 1px solid var(--line); border-left: 2px solid var(--ok);
  background: var(--paper-2); padding: .8rem 1rem; font-size: .95rem; }
.controle-lijst { display: flex; flex-direction: column; gap: .35rem; }
.controle-regel { display: grid; grid-template-columns: 4.2rem 1fr max-content; gap: .1rem .8rem;
  align-items: baseline; border: 1px solid var(--line); border-left: 2px solid var(--line-strong);
  background: var(--paper-2); padding: .5rem .8rem; font-size: .92rem; }
.controle-regel.fout { border-left-color: var(--danger); }
.controle-regel.letop { border-left-color: var(--accent-bier); }
.controle-merk { font-size: .62rem; letter-spacing: .12em; color: var(--ink-soft); }
.controle-regel.fout .controle-merk { color: var(--danger); }
.controle-waar { font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 640px) {
  .controle-regel { grid-template-columns: 1fr; }
  .controle-waar { white-space: normal; }
}

/* Voorraadkaart met het icoon van het artikel ernaast. */
.stat.met-icoon { display: flex; align-items: center; gap: .7rem; }
.stat.met-icoon .stat-icoon { flex: 0 0 auto; width: 30px; color: var(--ink); }
.stat.met-icoon .stat-icoon svg { width: 30px; height: 30px; display: block; }

/* ---------- Kaarten op gelijke hoogte ---------- */
/* De kaarten in een rij verschilden in hoogte doordat titels over twee regels
   liepen en het aantal gegevensregels per kaart verschilt. Nu rekken ze mee
   met de hoogste in de rij en staan de knoppen altijd onderaan op één lijn. */
.grid.cards { align-items: stretch; }
.grid.cards > .card { display: flex; flex-direction: column; height: 100%; }
.card .card-title { min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.card .card-title.lang { min-height: 2.5em; }
.card .card-title.xlang { min-height: 2.6em; }
.card .card-actions { margin-top: auto; }

/* Tweede regel in een tabelcel: batchnummer en verpakking onder de naam. */
table td .sub { font-size: .78rem; color: var(--ink-soft); margin-top: .1rem; }

/* Bier meegeven aan een evenement: product, aantal en waarvoor. */
.meegeef-lijst { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.meegeef-regel { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center;
  border: 1px solid var(--line); padding: .5rem .7rem; background: var(--paper-2); }
.meegeef-regel .sub { font-size: .78rem; color: var(--ink-soft); margin-top: .1rem; }
@media (max-width: 620px) { .meegeef-regel { grid-template-columns: 1fr; } }

/* ---------- Kosten toevoegen op een evenementkaart ---------- */
.kosten-invoer { display: grid; grid-template-columns: 1fr 5.5rem; gap: .4rem; margin-top: .5rem; }
.kosten-invoer input { min-width: 0; }
.kosten-invoer button { grid-column: 1 / -1; }

/* Lijstregels in een kaart mogen afbreken in plaats van uit te lopen. */
.metingen li { flex-wrap: wrap; }
.metingen li > span:first-child { flex: 1 1 100%; }
.metingen li > span:last-child { margin-left: auto; white-space: nowrap; }

/* Tabelcellen staan standaard op één regel, zodat bedragen niet afbreken. Een
   lange productnaam duwt de tabel dan wel naar rechts; die mag afbreken. */
th.naam, td.naam { white-space: normal; min-width: 12rem; }
td.naam .sub { white-space: normal; }

/* ---------- Formulieren op breed scherm ---------- */
/* Velden rekten mee tot de volle breedte, waardoor één invoervak van 1200 pixels
   ontstond en knoppen ernaast in de verdrukking kwamen. Een maximum per veld
   houdt de regels leesbaar; de rij vult niet meer op wat er niet is. */
fieldset .field, .modal .field { max-width: 22rem; }
/* Uitzondering: vinkjesrijen, keuzerondjes en tekstvlakken hebben de volle
   breedte nodig, anders vallen tien fruitsoorten in een smalle kolom. */
.field.breed,
.field:has(> .checks),
.field:has(> .radio-row),
.field:has(> .houdbaarheid),
.field:has(> textarea) { max-width: none; }
button { white-space: nowrap; }
/* Vinkjes wat compacter: bij tien fruitsoorten scheelt dat een regel. */
.checks .check { padding: .38rem .7rem; }
@media (max-width: 720px) {
  fieldset .field, .modal .field { max-width: none; }
}

/* Rijen die alleen uit velden bestaan als raster in plaats van als flexrij.
   Met flex kreeg een veld dat als laatste omsloeg de volle 22rem, terwijl de
   velden erboven de regel deelden en dus smaller waren — de kolommen liepen
   daardoor niet door. In een raster is elke kolom even breed en lijnt het
   laatste veld uit met het eerste erboven. Rijen met een knop of vinkje
   ertussen blijven flex; daar is geen kolomritme. */
.row:not(:has(> :not(.field))) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 22rem));
  justify-content: start;
  align-items: start;
  column-gap: .6rem;
  row-gap: 0;
}
@media (max-width: 1100px) { .row:not(:has(> :not(.field))) { grid-template-columns: repeat(3, minmax(0, 22rem)); } }
@media (max-width: 820px)  { .row:not(:has(> :not(.field))) { grid-template-columns: repeat(2, minmax(0, 22rem)); } }
@media (max-width: 560px)  { .row:not(:has(> :not(.field))) { grid-template-columns: minmax(0, 22rem); } }
.row:not(:has(> :not(.field))) > .field { max-width: none; }
/* Een veld met vinkjes of met de houdbaarheidsknopjes eist de volle regel op. */
.row:not(:has(> :not(.field))) > .field:has(> .checks),
.row:not(:has(> :not(.field))) > .field:has(> .radio-row),
.row:not(:has(> :not(.field))) > .field:has(> .houdbaarheid),
.row:not(:has(> :not(.field))) > .field:has(> textarea),
.row:not(:has(> :not(.field))) > .field.breed { grid-column: 1 / -1; }

/* Formulieren die je alleen bij de start gebruikt, staan onderaan de pagina.
   Zonder ruimte erboven plakt de legend tegen de kaarten of het archief. */
fieldset.eenmalig { margin-top: 2rem; }
.historie { margin-bottom: 1.2rem; }

/* ---------- Houdbaarheid in jaren ---------- */
/* Ronde knopjes in de stijl van de vinkjes, maar het is een keuze uit één:
   de termijn verschilt per batch en de datum volgt eruit. */
/* Een eigen regel: vijf knopjes naast vier andere velden persen levert drie
   rommelige rijen op. */
.field:has(> .houdbaarheid) { flex-basis: 100%; }
.houdbaarheid .jaarkeuze { display: flex; flex-wrap: wrap; gap: .4rem; }
.houdbaarheid .jaarkeuze button {
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .85rem;
  min-height: 34px;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.houdbaarheid .jaarkeuze button:hover { opacity: 1; color: var(--ink); border-color: var(--line-strong); }
.houdbaarheid .jaarkeuze button.aan {
  background: var(--ink); color: var(--paper); border-color: var(--line-strong);
}
.houdbaarheid .hint { margin: .35rem 0 0; }
.houdbaarheid .hint.muted { opacity: .7; font-style: italic; }

/* Los van de onderbalk: dit icoon staat ook in het scherm 'Volgorde van het
   menu', en dat gebruik je juist op een laptop. Stond de maat binnen de
   mediaquery, dan was het daar 0 px breed en dus onzichtbaar. */
.menu-icoon { display: block; width: 22px; height: 22px; flex: none; }
.menu-icoon svg { width: 100%; height: 100%; display: block; }

/* ---------- Ruimer aanraakvlak op telefoon en tablet ---------- */
/* Met een vinger — en in de kelder met natte handen — is 24 px te klein om te
   raken. Op een laptop met een muis blijft het compact; daar hoeft het niet. */
@media (max-width: 999px), (hover: none) and (pointer: coarse) {
  button.link, a.link { min-height: 34px; padding: .4rem .2rem; }
  td button.link { padding: .4rem 0; }
  .pil-invoer { padding: .2rem .3rem .2rem .7rem; }
  .pil-invoer input { min-height: 34px; }
  .pil-invoer button { min-height: 34px; }
  .check { min-height: 36px; }
  button.knop-klein { min-height: 34px; padding: .4rem .7rem; }
  .kosten-invoer input, .kosten-invoer button { min-height: 34px; }
}

/* ---------- Menu onderin (telefoon en tablet) ---------- */
/* De tabbalk bovenaan past niet op een telefoon en niet op een iPad. */
.onderbalk, .meer-blad, .meer-waas { display: none; }

/* Twee gevallen krijgen de onderbalk: een scherm dat te smal is voor de
   tabbladen (die hebben 964 px nodig), en elk apparaat dat met een vinger
   bediend wordt. Dat tweede is nodig omdat een iPad liggend juist breed genoeg
   is: op alleen breedte zou het menu van vorm veranderen als je hem draait. */
@media (max-width: 999px), (hover: none) and (pointer: coarse) {
  nav.tabs { display: none; }
  /* De handleiding staat hier onder "Meer"; de kopbalk is te krap voor nog een
     regel. Met a. ervoor, anders wint de algemene regel voor a.link. */
  a.handleiding-link { display: none; }

  .onderbalk {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Op een iPad niet vijf iconen over 1024 px uitsmeren: dezelfde maat als op
     de telefoon, in het midden. */
  .onderbalk-inner { display: flex; max-width: 560px; margin: 0 auto; }
  .onderbalk a, .onderbalk button.meer {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .18rem;
    min-height: 58px;
    padding: .3rem .2rem;
    background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px;
    font-family: inherit; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-soft); text-decoration: none; cursor: pointer;
  }
  .onderbalk a.actief, .onderbalk button.meer.actief { color: var(--ink); border-top-color: var(--line-strong); }
  .onderbalk button.meer.open { color: var(--ink); }

  /* Ruimte onder de inhoud, anders valt de laatste knop achter de balk. */
  main { padding-bottom: calc(58px + 1.5rem + env(safe-area-inset-bottom, 0px)); }

  /* display:block hierboven wint het van het standaard [hidden]; die moet dus
     expliciet terug, anders staat het blad meteen open. */
  .meer-blad[hidden], .meer-waas[hidden] { display: none; }

  .meer-waas {
    display: block;
    position: fixed; inset: 0; z-index: 44;
    background: rgba(20, 17, 14, .34);
  }
  .meer-blad {
    display: block;
    position: fixed; left: 0; right: 0; z-index: 46;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    max-width: 560px; margin: 0 auto;
    background: var(--paper-2);
    border: 1px solid var(--line); border-bottom: 0;
    border-radius: 10px 10px 0 0;
    padding: .35rem .25rem .5rem;
    box-shadow: 0 -8px 30px rgba(20, 17, 14, .18);
  }
  .meer-blad .greep { width: 38px; height: 3px; border-radius: 2px; background: var(--line); margin: .2rem auto .45rem; }
  .meer-blad a {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .8rem;
    color: var(--ink); text-decoration: none; font-size: .95rem;
  }
  .meer-blad a + a { border-top: 1px solid var(--line); }
  .meer-blad a .menu-icoon { color: var(--ink-soft); flex: none; }
  .meer-blad a.actief { font-weight: 500; }
  .meer-blad a.actief .menu-icoon { color: var(--ink); }
  .meer-blad .pijl { margin-left: auto; color: var(--line-strong); opacity: .35; }
}

@media print { .onderbalk, .meer-blad, .meer-waas { display: none !important; } }