/* Cupstack Tracing — single stylesheet, no framework.
   Brand (cupstack brandsheet): blue #0065FB · black #222222 · white,
   accents #4D94FF / #99c2ff, greys #F3F3F3 / #dddddd, font Inter. */

/* Inter van onze eigen server (2.210.0), niet van Google. */
@import url('fonts/web/inter.css');

:root {
  --bg: #F3F3F3;
  --card: #ffffff;
  --ink: #222222;
  --muted: #596170;
  --line: #dddddd;
  --brand: #0065FB;
  --brand-dark: #0050c8;
  --brand-mid: #4D94FF;
  --brand-light: #99c2ff;
  --brand-ink: #ffffff;
  --ok-bg: #dcfce7;  --ok-ink: #166534;  --ok-line: #86efac;
  --err-bg: #fee2e2; --err-ink: #991b1b; --err-line: #fca5a5;
  --warn-bg: #fef9c3; --warn-ink: #854d0e; --warn-line: #fde047;
  --info-bg: #e8f1ff; --info-ink: #0047b3; --info-line: #99c2ff;
  --sidebar: #222222;
  --sidebar-ink: #dddddd;
  --radius: 10px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.app { display: flex; min-height: 100vh; }

/* ------------------------------------------------------------- sidebar */
.sidebar {
  width: 230px; flex-shrink: 0;
  background: var(--sidebar); color: var(--sidebar-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Wordmark on black: "cup" bold white, "stack" brand blue (brandsheet) */
.brand {
  font-size: 1.35rem; font-weight: 400; letter-spacing: .3px;
  padding: 18px 20px; color: var(--brand-mid);
}
.brand span { font-weight: 700; color: #fff; }
.sidebar nav { flex: 1; }
.nav-header {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: #8a8a8a; padding: 14px 20px 4px;
}
.sidebar nav a {
  display: block; padding: 8px 20px; color: var(--sidebar-ink);
  font-size: .92rem; border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.sidebar nav a.active {
  background: rgba(255,255,255,.09); color: #fff;
  border-left-color: var(--brand);
}
.sidebar-footer { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.09); }
.user-chip { color: #fff; font-size: .92rem; margin-bottom: 8px; }
.user-chip small { display: block; color: #8a8a8a; }

/* ---------------------------------------------------------------- main */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 14px 26px; display: flex; align-items: center; gap: 12px;
}
.topbar h1 { font-size: 1.15rem; margin: 0; font-weight: 600; }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 6px; font-size: 1rem; padding: 4px 10px; cursor: pointer; }
.content { padding: 22px 26px; flex: 1; }
.footer { padding: 12px 26px; color: var(--muted); font-size: .8rem; }

/* --------------------------------------------------------------- cards */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px;
}
.card h2 { margin: 0 0 12px; font-size: 1.02rem; font-weight: 600; }

/* Een kaart die om aandacht vraagt: de order is aangepast nadat er gepikt was,
   of je staat in de stand waarin een scan een krat er juist áf haalt. De rand
   is dik genoeg om vanaf een meter afstand te zien, want dat is de afstand
   waarop iemand met een handscanner naar het scherm kijkt. */
.card-warn {
  border: 2px solid var(--warn-line);
  background: var(--warn-bg);
}
.card-warn h2 { color: var(--warn-ink); }
.card h2 small { color: var(--muted); font-weight: 400; }
/* Een grid-kolom is standaard minstens zo breed als zijn breedste kind, dus
   een brede tabel duwde de hele kolom — en daarmee de pagina — uit beeld,
   ook al zat hij netjes in een .table-scroll. min-width: 0 laat de kolom
   krimpen en het schuiven binnen de kaart gebeuren, zoals bedoeld. */
.grid { display: grid; gap: 18px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 800px)  { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

/* stat tiles */
.stat { text-align: left; }
.stat .num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat .lbl { color: var(--muted); font-size: .85rem; }

/* --------------------------------------------------------------- flash */
.flash {
  margin: 16px 26px -4px; padding: 12px 16px;
  border-radius: var(--radius); border: 1px solid; font-weight: 500;
}
.flash-success { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.flash-error   { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); font-size: 1.05rem; }
.flash-warning { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.flash-info    { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }

/* ---------------------------------------------------------- scan input */
.scan-form { margin: 0 0 14px; }
.scan-label { display: block; font-weight: 600; margin-bottom: 6px; }
.scan-input {
  width: 100%; font-size: 1.5rem; padding: 14px 18px;
  border: 2px solid var(--brand); border-radius: var(--radius);
  outline: none; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.scan-input:focus { box-shadow: 0 0 0 4px rgba(0, 101, 251, .18); }

/* De stand waarin een scan een krat er juist áf haalt. De rand om het veld
   wordt rood, niet alleen de knop erboven: wie met een scanner staat te werken
   kijkt naar het veld waar de code in landt. Zelfde kleur als in de app, zodat
   het op beide schermen hetzelfde betekent. */
.card-warn .scan-input { border-color: #b91c1c; background: #fff; }
.card-warn .scan-input:focus { box-shadow: 0 0 0 4px rgba(185, 28, 28, .18); }

/* -------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: #f7faff; }
tr.row-new td { background: var(--ok-bg); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- forms */
input[type=text], input[type=search], input[type=password], input[type=date], input[type=datetime-local],
input[type=time], input[type=email], input[type=number], select, textarea {
  width: 100%; max-width: 100%; padding: 9px 12px; font-size: .95rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-family: inherit;
}
/* A date-and-time field needs room for both halves, otherwise the browser
   clips the clock icon and the time is unreadable. */
input[type=datetime-local] { min-width: 190px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; }
label { display: block; font-size: .85rem; font-weight: 600; margin: 10px 0 4px; }
/* A row of fields wraps rather than pushing the page sideways: on a phone the
   fields stack, on a desktop nothing changes. */
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > div, .form-row > label { flex: 1; min-width: 170px; }
/* Fields of different heights (a select next to a label-less button) line up
   along their bottom edge instead of floating at different heights. */
.form-row.bottom { align-items: flex-end; }
.form-row.bottom > div > label:first-child { margin-top: 0; }
.form-row.bottom .btn { margin-bottom: 1px; }

.btn {
  display: inline-block; padding: 9px 16px; font-size: .92rem; font-weight: 600;
  border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  background: var(--brand); color: var(--brand-ink);
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn-secondary:hover, .btn-ghost:hover { background: var(--info-bg); }
.btn-danger:hover { background: #991b1b; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-danger { background: #b91c1c; }
.btn-ghost { background: transparent; color: var(--sidebar-ink); border-color: rgba(255,255,255,.2); }
.btn-sm { padding: 4px 10px; font-size: .8rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* --------------------------------------------------------------- badge */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; border: 1px solid;
}
.badge-ok    { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.badge-err   { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.badge-warn  { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.badge-info  { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.badge-muted { background: #F3F3F3; color: var(--muted); border-color: var(--line); }

/* progress bar (pallet / PO completion) */
.progress { background: #dddddd; border-radius: 999px; height: 14px; overflow: hidden; }
.progress > div { height: 100%; background: var(--brand); transition: width .3s; }
.progress.full > div { background: #16a34a; }

/* big check result (SSCC check) */
.check-result { padding: 26px; text-align: center; border-radius: var(--radius); font-size: 1.4rem; font-weight: 700; }
.check-ok  { background: var(--ok-bg); color: var(--ok-ink); border: 2px solid var(--ok-line); }
.check-err { background: var(--err-bg); color: var(--err-ink); border: 2px solid var(--err-line); }
.check-warn{ background: var(--warn-bg); color: var(--warn-ink); border: 2px solid var(--warn-line); }

/* timeline (crate history) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 26px; border-left: 2px solid var(--line); margin-left: 8px; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand); border: 2px solid #fff;
}
.timeline .t-when { color: var(--muted); font-size: .8rem; }

/* pager */
.pager { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.pager a, .pager span { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: .85rem; }
.pager a.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* login page */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sidebar); }
.login-box { width: 360px; background: #fff; border-radius: 14px; padding: 34px; }
/* Wordmark on white: "cup" bold black, "stack" brand blue (brandsheet) */
.login-box .brand { color: var(--brand); text-align: center; padding: 0 0 18px; font-size: 1.6rem; }
.login-box .brand span { font-weight: 700; color: #222222; }

.help { color: var(--muted); font-size: .85rem; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mt { margin-top: 14px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: 30; left: -240px; transition: left .2s; }
  body.nav-open .sidebar { left: 0; }
  .menu-toggle { display: block; }
  .content { padding: 16px; }
  .flash { margin: 12px 16px -4px; }

  /* De balk met het menuknopje bleef bovenaan de pagina staan, dus na een
     scherm scrollen stond hij buiten beeld en moest je helemaal terug naar
     boven om van pagina te wisselen. */
  .topbar { position: sticky; top: 0; z-index: 10; }

  /* Een lade zonder achtergrond is een lade die je alleen kunt sluiten met
     hetzelfde knopje waarmee je hem opende. */
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 25;
    background: rgba(16, 23, 32, .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ------------------------------------------------------------------- tabs */
.tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 18px; border-bottom: 1px solid var(--line);
}
.tabs a {
  padding: 9px 16px; font-size: .92rem; font-weight: 600; color: var(--muted);
  border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0; margin-bottom: -1px;
}
.tabs a:hover { background: var(--info-bg); text-decoration: none; }
.tabs a.on {
  background: var(--card); color: var(--ink);
  border-color: var(--line); border-bottom-color: var(--card);
}

/* attention counter in the top bar */
.attn-chip {
  margin-left: auto; padding: 4px 12px; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line);
  font-size: .85rem; font-weight: 700; white-space: nowrap;
}
.attn-chip:hover { text-decoration: none; background: #fef08a; }

/* checkboxes must not stretch to the full width like text inputs */
input[type=checkbox], input[type=radio] { width: auto; }

/* The menu grew with the sales section: let the nav scroll on its own so the
   user chip and log-out stay pinned at the bottom instead of scrolling away. */
.sidebar { overflow: hidden; }
.sidebar nav { flex: 1; min-height: 0; overflow-y: auto; }

/* Action cells in a table row: keep the buttons side by side. */
td.actions { display: table-cell; white-space: nowrap; }
td.actions .btn { display: inline-block; vertical-align: middle; }
td.actions form { display: inline; }

/* Dropdowns in a table need room for the longest option, otherwise a role
   like "Production" is cut off halfway. */
td select { min-width: 140px; }

/* Price fields: blue = an agreement with this client, yellow = no price
   anywhere (an order with this article cannot be confirmed). An empty white
   field simply follows the base price list. */
/* Note the `input` in front: a bare class loses to input[type=text] on
   specificity, so the white background would win and the colour never show. */
input.price-own  { border-color: var(--brand); background: var(--info-bg); font-weight: 600; }
input.price-none { border-color: var(--warn-line); background: var(--warn-bg); }
.price-own, .price-none { border-radius: 6px; }
input::placeholder { color: #9ca3af; }

/* Legend swatches next to the price table. */
.swatch { padding: 2px 8px; border-radius: 6px; border: 1px solid; font-weight: 600; }
.swatch-own  { background: var(--info-bg); border-color: var(--brand); color: var(--info-ink); }
.swatch-none { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }

/* Price inputs need a width of their own: inside a table the column would
   otherwise squeeze them until the amount no longer fits. */
input.price-input { width: 92px; min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.price-table td:first-child { min-width: 180px; }
.price-table th, .price-table td { padding: 8px 6px; }

/* A wide table scrolls inside its own frame; the page itself never scrolls
   sideways. */
.table-scroll { overflow-x: auto; }

/* ---------------------------------------------------------------- the order card */

/* The order card is two columns: the paperwork on the left, the checks that
   look over your shoulder (availability, revisions) on the right. Under
   1200px they stack, because the left column has date fields that must not
   be squeezed. */
.cols-order { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
/* Without this a grid column refuses to shrink below its content and the whole
   page starts scrolling sideways on a phone. */
.cols-order > * { min-width: 0; }
@media (max-width: 1200px) { .cols-order { grid-template-columns: 1fr; } }

/* One article's stock picture. A shortage is coloured, but never blocks. */
.avail { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.avail.short { border-color: var(--warn-line); background: var(--warn-bg); }
.avail .row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* The sum behind a transport amount, written out so nobody has to guess
   where the number came from. */
.calc { color: var(--muted); font-size: .82rem; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- order line table */

/* One article is a small block of its own: a heading row with the number of
   crates, and under it the three charges. The indent is what tells you at a
   glance which rows belong together. */
.lines td, .lines th { padding: 7px 8px; }
.lines .line-head td { border-top: 2px solid var(--line); background: #fbfbfd; }
.lines .line-head td:first-child { font-size: .95rem; }
.lines .line-sub td { border-top: 1px solid #f0f0f4; }
.lines .line-sub .sub { display: inline-block; padding-left: 18px; font-weight: 600; font-size: .88rem; }
.lines .line-info td { color: var(--muted); }
.lines .help { font-weight: 400; }
input.qty-input { width: 92px; min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }

/* Kratten en los naast elkaar (2.50.0). Op de vloer wordt in kratten geteld en
   pas het restje los, dus die twee horen naast elkaar te staan en samen één
   telling te zijn — niet twee handelingen achter elkaar. */
.krat-invoer { display: inline-flex; gap: 8px; align-items: flex-end; }
.krat-invoer label { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.krat-invoer label .help { font-size: .72rem; line-height: 1.1; white-space: nowrap; }
.krat-som { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* A search box in front of a long dropdown. */
.picker { display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
.picker select[size="1"] { max-height: none; }
.picker-search { max-width: 320px; }
.table-search { max-width: 280px; }
/* Amounts must not wrap: "€ 125,00" broken over two lines reads as two numbers. */
.lines td.num, .lines th.num { white-space: nowrap; }

/* A button that cannot be pressed must look like it. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--brand); }

/* And so must a field. A locked order still shows every number — a disabled
   input that looks exactly like a live one invites people to type in it and
   wonder why nothing happens. */
input:disabled, select:disabled, textarea:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--muted);   /* Safari ignores color on a disabled field */
  opacity: 1;
}

/* --------------------------------------------------------- internal notes */
ul.notes { list-style: none; margin: 12px 0 0; padding: 0; }
ul.notes li { border-top: 1px solid var(--line); padding: 9px 0; }
ul.notes li:first-child { border-top: 0; }
.note-body { white-space: pre-wrap; font-size: .92rem; }
.note-when { color: var(--muted); font-size: .78rem; margin-top: 3px; }
.btn-link {
  background: none; border: 0; padding: 0; margin-left: 6px;
  color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; text-decoration: underline;
}
.btn-link:hover { color: var(--err-ink); }

/* A plain label/value table, for detail panels. */
table.kv { width: 100%; border-collapse: collapse; }
table.kv th, table.kv td {
  border: 0; padding: 3px 0; font-size: .88rem; text-align: left;
  text-transform: none; letter-spacing: 0;
}
table.kv th { color: var(--muted); font-weight: 400; width: 42%; }
/* A date that has passed should read as a date that has passed. */
.help.overdue { color: var(--err-ink); font-weight: 600; }

/* --------------------------------------------------- production overview */

/* The invoice is built on these numbers, so the table reads like a sum on
   paper: what is given, what is booked, and the totals in between. */
table.prod td { padding: 6px 8px; vertical-align: middle; }
table.prod td.num { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 90px; font-size: 1rem; }
table.prod tr.given td { color: var(--muted); }
table.prod tr.given td.num { color: var(--ink); }
table.prod tr.sum td { border-top: 2px solid var(--line); background: #fbfbfd; }
table.prod tr.sum.wrong td { background: var(--err-bg); color: var(--err-ink); }
table.prod tr.scrub td:first-child { padding-left: 20px; }
table.prod td.book form { margin: 0; }
table.prod td.book { width: 1%; white-space: nowrap; }
/* The amount and its + belong on one line: two lines reads as two fields. */
table.prod td.book .actions { flex-wrap: nowrap; }
table.prod td.book input { width: 102px; min-width: 102px; }

/* --------------------------------------------- een artikel op een productieorder
   Tien artikelen onder elkaar met elk een volle tabel maakte van deze pagina
   een rol van drie meter. Ingeklapt staat op de balk wat je van een afstand
   wilt weten: gewassen, afkeur, geschrobd, tweede afkeur — en of het klopt. */
.prod-article > summary {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  cursor: pointer; padding: 2px 0; list-style: none;
}
.prod-article > summary::-webkit-details-marker { display: none; }
.prod-article > summary::before {
  content: '▸'; color: var(--muted); font-size: .8rem; width: 12px; flex: none;
}
.prod-article[open] > summary::before { content: '▾'; }
.prod-article[open] > summary { margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.prod-article .pa-name { font-size: 1.05rem; }
.prod-article .pa-name .help { font-weight: 400; margin-left: 6px; }
.prod-article .pa-stand { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.prod-article .pa-cel { display: flex; flex-direction: column; line-height: 1.25; }
.prod-article .pa-cel b { font-variant-numeric: tabular-nums; font-size: 1rem; }
.prod-article .pa-lbl { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.prod-article .pa-nul b { color: var(--muted); font-weight: 400; }
.prod-article .pa-lost b { color: #b91c1c; }

@media (max-width: 720px) {
  .prod-article .pa-stand { margin-left: 0; gap: 12px; width: 100%; }
  .prod-article .pa-cel { min-width: 62px; }
}

.prod-problem {
  background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-line);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-weight: 500;
}
.check { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }


/* --------------------------------------------------------- invoice lines
   Each block of an invoice is its own table, so without fixed widths the
   columns of "Transport" would not stand under those of "Rent and cleaning".
   They are read as one list, so they line up as one list. */
table.inv-lines { table-layout: fixed; min-width: 720px; }
.inv-lines th:nth-child(2), .inv-lines td:nth-child(2),
.inv-lines th:nth-child(3), .inv-lines td:nth-child(3) { width: 120px; }
.inv-lines th:nth-child(4), .inv-lines td:nth-child(4) { width: 130px; }
.inv-lines th.act, .inv-lines td.actions { width: 170px; }
.inv-lines input[type="text"] { width: 100%; min-width: 0; }
.inv-lines td { vertical-align: middle; }
/* De post en de rekening onder de omschrijving (2.204.0). */
.inv-lines select.inv-post { width: 100%; min-width: 0; margin-top: 4px; font-size: 13px; }
.inv-lines .inv-gl { font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }

/* A button that reads as a link: for folding a row open, where a real button
   would shout louder than the number next to it. */
.link-toggle {
  background: none; border: 0; padding: 0 0 0 6px; cursor: pointer;
  color: var(--brand); font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.link-toggle:hover { text-decoration: underline; }
tr.row-part td { background: var(--info-bg); color: var(--muted); }
tr.row-part td.ind { padding-left: 22px; }

/* -------------------------------------------------------------- dagbord (2.105.0)
   Eerst de dag in vier getallen, dan waar de omzet vandaan komt, dan wie er
   was, en onderaan de dagen ervoor. Invullen staat achter een uitklapper:
   op een ingevulde dag kijk je vooral. */
.db-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.db-weekday { color: var(--muted); font-size: .85rem; text-transform: capitalize; }
.db-date { font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.db-nav { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.db-nav input[type=date] { width: auto; padding: 6px 10px; }
@media (max-width: 460px) { .db-head { display: block; } .db-nav { margin-top: 10px; } .db-nav input[type=date] { flex: 1; min-width: 0; } }
.js .db-go { display: none; }

.db-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 18px; }
.db-kpis > .card { margin-bottom: 0; }
.db-kpi .lbl { color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.db-kpi .num { font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.db-kpi .num small { font-size: .85rem; font-weight: 600; color: var(--muted); }
.db-kpi .sub { color: var(--muted); font-size: .85rem; }
.db-kpi .db-cmp { display: block; margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.db-kpi .db-up { color: var(--ok-ink); }
.db-kpi .db-down { color: var(--err-ink); }
.db-none { color: var(--line); }
.db-bad, td.db-bad { color: var(--err-ink); }
@media (max-width: 1100px) { .db-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .db-kpis { gap: 10px; } .db-kpi .num { font-size: 1.35rem; } .db-kpis > .card { padding: 14px; } }

/* De start- en sluitlijst (2.146.0), zoals ze in Airtable bovenaan het dagbord
   stonden: de lijst met wie teamleider was, en ernaast de voortgang. */
.db-lists { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 18px; margin-bottom: 18px; align-items: start; }
.db-list-lbl { font-weight: 600; margin-bottom: 8px; }
.db-list-card { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 14px; color: inherit; text-decoration: none; }
.db-list-card:hover, .db-list-card:focus-visible { border-color: var(--muted); text-decoration: none; }
.db-list-date { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }
.db-list-k { color: var(--muted); font-size: .78rem; }
.db-list-prog { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: inherit; text-decoration: none; }
@media (max-width: 460px) { .db-lists { gap: 6px 12px; } .db-lists .cl-bar i { width: 9px; height: 12px; } .db-list-lbl { font-size: .9rem; } }
@media (max-width: 900px) { .db-lists { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
td.db-open { color: var(--warn-ink); }

.cl-bar { display: inline-flex; gap: 2px; vertical-align: middle; }
.cl-bar i { display: inline-block; width: 14px; height: 14px; border-radius: 2px; background: #d9d9d9; border: 1px solid #c4c4c4; }
.cl-bar i.on { background: #f59e0b; border-color: #d97706; }
.cl-bar.cl-full i.on { background: #3fa53a; border-color: #2e7d2a; }
.cl-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cl-prog { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cl-headform { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.cl-headform > div { min-width: 0; }
.cl-items { list-style: none; margin: 0; padding: 0; }
.cl-items li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cl-items li:last-child { border-bottom: 0; }
.cl-items form { margin: 0; }
.cl-box { width: 44px; height: 44px; flex: none; border: 2px solid var(--muted); border-radius: 6px; background: var(--card);
          font-size: 1.4rem; font-weight: 700; line-height: 1; color: #fff; cursor: pointer; padding: 0; }
.cl-items li.done .cl-box { background: #3fa53a; border-color: #2e7d2a; }
.cl-box:disabled { cursor: default; opacity: .7; }
.cl-title { font-weight: 600; }
.cl-items li.done .cl-title { color: var(--muted); }
.cl-no { color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-who { font-size: .8rem; color: var(--ok-ink); margin-top: 2px; }
.cl-tasks td { vertical-align: top; }
.cl-tasks td:nth-child(2) { min-width: 220px; }
.cl-tasks tr.mute input, .cl-tasks tr.mute textarea { color: var(--muted); }

.db-uitleg { margin: -6px 0 18px; font-size: .85rem; color: var(--muted); }
.db-uitleg summary { cursor: pointer; width: fit-content; }
.db-uitleg ul { margin: 8px 0 0; padding-left: 20px; }
.db-uitleg li { margin-bottom: 4px; }

.db-sub { font-size: .95rem; margin: 4px 0 8px; }
.db-sub .help { font-weight: 400; margin-left: 6px; }
.db-sub.mt { margin-top: 26px; }
.db-page td.num, .db-page td.db-time { white-space: nowrap; }
.db-barcol { width: 110px; }
.db-bar { display: block; height: 8px; border-radius: 4px; background: var(--brand); opacity: .75; }

.db-edit { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.db-edit > summary { cursor: pointer; font-weight: 600; color: var(--brand); width: fit-content; list-style: none; }
.db-edit > summary::-webkit-details-marker { display: none; }
.db-edit > summary::before { content: '▸ '; }
.db-edit[open] > summary::before { content: '▾ '; }
.db-edit[open] > summary { margin-bottom: 10px; }
.db-edit h3 { font-size: .95rem; margin: 10px 0 6px; }
.db-checks { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.db-checks label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 8px; cursor: pointer; }
.db-checks label:has(input:checked) { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); font-weight: 600; }
.db-checks input { width: auto; margin: 0; }
.db-shifts td { padding: 5px 6px; }
.db-shifts .db-people { max-width: 80px; }
.db-shifts input[type=time] { min-width: 110px; }
.db-leads { margin: 0 0 10px; }
.db-note { margin: 0 0 10px; padding: 8px 12px; background: var(--info-bg); border-radius: 8px; color: var(--info-ink); font-size: .9rem; }

.db-histhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.db-histhead h2 { margin: 0; }
.db-seg { display: flex; gap: 6px; }
.db-hist .db-wd { display: inline-block; width: 22px; color: var(--muted); font-size: .8rem; }
.db-hist tr.db-sel td { background: var(--info-bg); }
.db-hist tr.db-sel td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.nw { white-space: nowrap; }
.mb { margin-bottom: 14px; }

/* -------------------------------------------------- de offerte in het portaal (2.108.0)
   Dezelfde regels als op het schermvoorbeeld (print.css), hier los van het
   A4-vel: op de akkoordpagina staat de offerte in een gewone kaart. */
.portal-doc table.doc-lines { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 480px; }
.portal-doc .doc-lines th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  border-bottom: 1.5px solid var(--ink); padding: 6px; text-align: left; }
.portal-doc .doc-lines td { padding: 5px 6px; border-bottom: 1px solid #f0f0f3; vertical-align: top; }
.portal-doc .doc-lines .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal-doc .doc-lines tr.art td { padding-top: 12px; border-bottom: 0; }
.portal-doc .doc-lines td.ind { padding-left: 18px; }
.portal-doc .doc-lines tr.info td, .portal-doc .mute { color: var(--muted); }
.portal-doc .doc-lines tfoot td { border-bottom: 0; padding: 3px 6px; }
.portal-doc .doc-lines tfoot tr:first-child td { padding-top: 12px; border-top: 1.5px solid var(--ink); }
.portal-doc .doc-lines tfoot tr.grand td { font-size: 1.05rem; font-weight: 700; border-top: 1px solid var(--line); padding-top: 7px; }
.portal-doc tr:hover td { background: transparent; }
.portal-doc .doc-note { margin-top: 16px; padding: 10px 12px; background: var(--info-bg); border-radius: 8px; font-size: .9rem; }
.portal-doc .doc-terms { margin-top: 18px; font-size: .85rem; color: var(--muted); }
.portal-doc .doc-terms h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; }
.portal-doc .doc-terms ul { margin: 0; padding-left: 18px; }
.portal-doc p.doc-terms { margin-bottom: 0; }
.portal-doc .doc-fine { margin-top: 10px; font-size: .8rem; color: var(--muted); }
.portal-doc .doc-fine p { margin: 0 0 4px; }

/* Is de order compleet? Staat op het pikscherm boven de dragers (2.110.0). Een
   losse drager heeft geen eigen plan, dus dit is waar je het ziet. */
.pick-need {
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pick-need-ok {
  border-color: var(--ok-line);
  background: var(--ok-bg);
}

/* Verbruiksartikelen (2.111.0): afboeken en ontvangen op één regel. */
.supply-list td { vertical-align: middle; }
.supply-book { display: flex; gap: 4px; align-items: center; }
.supply-book .qty-input { width: 56px; min-width: 56px; }
.supply-book input[type=text] { width: 100px; }
.supply-list .badge { white-space: nowrap; }
.supply-next { margin-top: 6px; }

/* Het zoekveld boven een lijst (2.122.0): over de breedte, met een vergrootglas,
   en een streepje dat meeloopt zolang er gezocht wordt. */
.search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.search-bar input[type="search"] {
  flex: 1 1 320px; max-width: 560px; min-width: 0; padding-left: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;
}
.search-bar.is-searching input[type="search"] { box-shadow: inset 0 -2px 0 var(--brand); }
.search-bar .search-tip { flex-basis: 100%; margin: 0; }
.search-bar .search-tip kbd { font: inherit; font-size: .8em; border: 1px solid #d1d5db; border-bottom-width: 2px;
  border-radius: 4px; padding: 0 4px; background: #f9fafb; }
.js .search-bar button[type="submit"] { display: none; }
.search-switched { margin: -4px 0 10px; }
a[data-row-link]:focus { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.search-bar .search-kbd kbd { font: inherit; font-size: .8em; border: 1px solid #d1d5db; border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; background: #f9fafb; color: #596170; }
.search-bar .check-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: .9rem; }
.search-bar .check-inline input { width: auto; }
/* Wat bij het zoeken wel gevonden wordt, maar niet actief is: lichter. */
tr.row-inactive td { color: #8a8f98; }
tr.row-inactive a { opacity: .8; }

/* Een kaart die dichtgeklapt kan (2.124.0): de samenvatting is de knop. */
details.card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
details.card > summary::-webkit-details-marker { display: none; }
details.card[open] > summary { margin-bottom: 12px; }
details.card[open] > summary .btn { background: var(--brand); color: #fff; border-color: var(--brand); }

/* De hele regel is aan te klikken (2.124.0). */
.js tr:has(a[data-row-link]) { cursor: pointer; }
.js tr:has(a[data-row-link]):hover td { background: #f3f7ff; }
details.mail-compose > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
details.mail-compose > summary::-webkit-details-marker { display: none; }
details.mail-compose[open] > summary { margin-bottom: 6px; }

/* De kop van een order blijft staan bij scrollen (2.124.0), alleen op een groot scherm. */
@media (min-width: 901px) {
  .order-head { position: sticky; top: 8px; z-index: 8; box-shadow: 0 6px 16px -12px rgba(0,0,0,.35); }
}

/* Eén zoekbalk voor alles (2.125.0): bovenaan elke pagina, met een lijstje
   eronder dat per soort de eerste treffers laat zien. */
.qs { position: relative; margin-left: auto; flex: 0 1 380px; min-width: 0; }
.topbar .attn-chip { order: 3; }
.qs input[type="search"] {
  width: 100%; padding: 7px 70px 7px 34px; border-radius: 8px; background-color: #f6f7f9;
  background: #f6f7f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center;
}
.qs input[type="search"]:focus { background-color: #fff; }
.qs.is-searching input[type="search"] { box-shadow: inset 0 -2px 0 var(--brand); }
.qs-kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; gap: 2px; }
.qs-kbd kbd { font: inherit; font-size: .7rem; border: 1px solid #d1d5db; border-bottom-width: 2px; border-radius: 4px;
  padding: 0 4px; background: #fff; color: #596170; }
.qs input:focus ~ .qs-kbd, .qs input:not(:placeholder-shown) ~ .qs-kbd { display: none; }
.qs-drop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(520px, 92vw);
  max-height: min(70vh, 620px); overflow-y: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 23, 32, .16);
}
.qs-panel { padding: 6px 0; }
.qs-group + .qs-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.qs-head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 14px 3px;
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.qs-count { text-transform: none; letter-spacing: 0; font-weight: 400; }
.qs-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 14px; color: inherit; text-decoration: none; }
.qs-item:hover { text-decoration: none; }
.qs-item.is-active { background: #eef4ff; }
.qs-title { font-weight: 600; overflow-wrap: anywhere; }
.qs-sub { flex-basis: 100%; color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.qs-more { color: var(--brand); font-size: .85rem; }
.qs-none { padding: 8px 14px; color: var(--muted); }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
  .qs { order: 4; flex: 1 1 100%; margin-left: 0; }
  .qs-kbd { display: none; }
  .qs-drop { left: 0; right: 0; width: auto; }
}

/* Het menu in kopjes die in- en uitklappen (2.126.0). */
.nav-header .nav-toggle {
  display: flex; width: 100%; align-items: center; gap: 6px; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: left;
}
.nav-header .nav-toggle::after { content: "▾"; margin-left: auto; font-size: .8rem; transition: transform .15s; }
.nav-sec.closed .nav-toggle::after { transform: rotate(-90deg); }
.nav-sec.closed .nav-items { display: none; }
.nav-sec.closed .nav-toggle[data-n]::before {
  content: attr(data-n); order: 2; background: rgba(255,255,255,.14); color: #fff; border-radius: 9px;
  padding: 1px 7px; font-size: .68rem; letter-spacing: 0;
}
.nav-header .nav-toggle:hover { color: #d1d5db; }
.nav-header .nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Vandaag (2.126.0). */
.today-hello { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 14px; }
.today-hello h2 { margin: 0; font-size: 1.3rem; }
.today-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.today-chip { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; min-width: 150px; color: inherit; }
.today-chip:hover { border-color: var(--brand); text-decoration: none; }
.today-chip .num { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.today-chip .lbl { color: var(--muted); font-size: .85rem; line-height: 1.2; max-width: 12rem; }
.today-chip.is-warn { background: #fef9c3; border-color: #fde68a; }
.today-chip.is-warn .num { color: #a16207; }
.today-chip.is-err { background: #fee2e2; border-color: #fca5a5; }
.today-chip.is-err .num { color: #b91c1c; }
.today-empty { color: #047857; font-weight: 600; margin: 0 0 16px; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.today-block { margin: 0; }
.today-block h3 { margin: 0 0 8px; font-size: 1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.today-block h3 a { font-size: .82rem; font-weight: 500; white-space: nowrap; }
.today-why { margin: -4px 0 8px; font-size: .82rem; }
.today-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid #f0f1f3; }
.today-row:first-of-type { border-top: 0; }
.today-row .t { width: 96px; flex-shrink: 0; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.today-row .m { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.today-row .s { display: block; color: var(--muted); font-size: .82rem; }
.today-row .r { white-space: nowrap; }
.today-more { display: block; margin-top: 6px; font-size: .85rem; }
.today-split { display: flex; gap: 14px; }
.today-split > div { flex: 1; }
.today-split .kv { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.today-split small { color: var(--muted); font-size: .8rem; }
.today-bar { height: 8px; background: #eef2f7; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.today-bar i { display: block; height: 100%; background: var(--brand); }
.today-btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
  .today-grid { grid-template-columns: 1fr; }
  .today-chip { min-width: 0; flex: 1 1 140px; }
  .today-row .t { width: 76px; }
}
.today-row .m > b { font-weight: 500; }
.today-row .m a b { font-weight: 600; }

/* Te factureren, per klant (2.128.0). */
tr.client-group td { background: #f6f7f9; padding-top: 10px; padding-bottom: 6px; border-top: 2px solid var(--line); }

/* Overschot op een productieregel (2.129.0): zegt het, houdt niets tegen. */
.prod-surplus {
  background: var(--info-bg); border: 1px solid var(--info-line);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
}

/* Toegankelijkheid (2.130.0). */
.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; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--brand);
  padding: 10px 14px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.2); font-weight: 600; }
.skip-link:focus { top: 12px; }
#main-content:focus { outline: none; }
/* Een link midden in een zin is aan meer te herkennen dan aan zijn kleur. */
p a:not(.btn), li a:not(.btn), .help a:not(.btn), .flash a:not(.btn), .card > span a:not(.btn),
.card > div:not([class]) a:not(.btn), dd a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }

/* Een regel die er minder toe doet: grijs, niet doorzichtig — doorzichtig maakt tekst onleesbaar (2.130.0). */
tr.row-dim td, tr.row-dim td b { color: var(--muted); }

/* Bevestigen (2.131.0): een eigen venster, met knoppen die zeggen wat ze doen. */
dialog.cs-confirm { border: none; border-radius: 12px; padding: 22px 24px 18px; max-width: 440px; width: calc(100% - 32px);
  box-shadow: 0 20px 50px rgba(0,0,0,.25); color: var(--text, #1f2937); }
dialog.cs-confirm::backdrop { background: rgba(17,24,39,.45); }
.cs-confirm-q { font-weight: 600; font-size: 1.05rem; margin: 0 0 6px; }
.cs-confirm-more { color: var(--muted); margin: 0 0 16px; }
.cs-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.help-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.help-toggle { display: inline-block; margin: 0 0 10px; font-size: .82rem; }

/* Een tekstregel kan een heel verhaal zijn (2.135.0). */
textarea.line-text { width: 100%; min-height: 2.6em; resize: vertical; font: inherit; }
/* De post van een toeslag op een order (2.205.0). */
select.line-post { display: block; width: 100%; max-width: 360px; margin-top: 4px; font-size: 13px; }
.line-move { min-width: 30px; min-height: 30px; padding: 2px 6px; margin-right: 3px; font-size: 1rem; }

/* Opmerkingen op de factuur (2.142.0) */
.remarks-preview { margin-top: 6px; padding: 10px 12px; background: var(--info-bg); border-radius: 8px; font-size: .9rem; }
.remarks-preview p, .doc-remarks p { margin: 0 0 6px; }
.remarks-preview ul, .remarks-preview ol, .doc-remarks ul, .doc-remarks ol { margin: 0 0 6px; padding-left: 20px; }
.remarks-preview > :last-child, .doc-remarks > :last-child { margin-bottom: 0; }

/* Oppervlaktemetingen (2.215.0) */
.swab-ok { color: var(--ok-ink); }
.swab-no { color: var(--err-ink); font-weight: 600; }
tr.swab-fail > td { background: var(--err-bg); }
tr.swab-fail-detail > td { background: #fff8f8; }
.swab-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.swab-cols > * { min-width: 0; }
@media (max-width: 900px) { .swab-cols { grid-template-columns: 1fr; } }