* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

h1, h2, h3 { margin: 0 0 0.75rem; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

/* Layout */
.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.topbar .brand {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
}
.topbar nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.topbar nav a { color: var(--color-text-muted); }
.topbar nav a:hover { color: var(--color-text); text-decoration: none; }
.topbar nav a.active { color: var(--color-text); font-weight: 600; }

/* A group in the bar that opens a menu: Financieel klantcontact, F-gassen.
   <details> does the opening; this places the list under its name. */
.nav-group { position: relative; }
.nav-group > summary {
  list-style: none;
  cursor: pointer;
  color: var(--color-text-muted);
  user-select: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: '▾'; margin-left: 0.3rem; font-size: 0.8em; }
.nav-group > summary:hover,
.nav-group[open] > summary { color: var(--color-text); }
.nav-group.active > summary { color: var(--color-text); font-weight: 600; }
.nav-group > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; }
.nav-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 20;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px var(--color-overlay);
}
.nav-menu a { padding: 0.45rem 1rem; font-weight: 400; }
.nav-menu a:hover { background: var(--color-hover); }
/* On a phone the bar wraps; a menu hanging off one item would run off the
   screen, so it opens in place instead and pushes the rest down. */
@media (max-width: 600px) {
  .nav-group { width: 100%; }
  .nav-menu { position: static; box-shadow: none; margin-top: 0.4rem; }
}

.container {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}
.container-narrow { max-width: 700px; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}
.page-head h1 { margin: 0; }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.card + .card { margin-top: 0; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

/* Forms */
.form-row { margin-bottom: 1rem; }
.form-row .help { display: block; color: var(--color-text-muted); font-size: 0.82rem; margin-top: 0.25rem; }
label { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; color: var(--color-text-muted); }
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=file],
input[type=search],
textarea,
select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-20);
}
.field-error { color: var(--color-error); font-size: 0.85rem; margin-top: 0.25rem; }

.form-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}

button, .btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  line-height: 1.4;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}
button:hover, .btn:hover { background: var(--color-primary-hover); text-decoration: none; color: var(--color-on-primary); }
/* Every button is the filled one above. The only other look is red, for an
   action that removes something. */
.btn-danger { background: var(--color-error); }
.btn-danger:hover { background: var(--color-error); filter: brightness(0.9); }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.85rem; }

/* The Acties column on a quote or invoice. Links and form buttons are mixed in
   it, so every one of them is made the same full-width block here, whatever
   element it happens to be. */
.action-stack { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.action-stack > form { display: block; margin: 0; }
.action-stack .btn { display: block; width: 100%; }
.action-stack .action-note { margin: -0.2rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); }

/* Login screen */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-card { width: 100%; max-width: 380px; }
.login-card h1 { margin: 0 0 1.25rem; font-size: 1.25rem; }

/* Alerts */
.alert {
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: 0.92rem;
}
.alert-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}
.alert-success {
  background: var(--color-primary-20);
  color: var(--color-text);
  border: 1px solid var(--color-primary);
}
/* Nothing has gone wrong; something is waiting to be done. */
.alert-warning {
  background: var(--color-warning-bg, #fff8c5);
  color: var(--color-text);
  border: 1px solid var(--color-warning, #d4a72c);
}
/* Work that autosave.js put back into a form: what happened, and the way out. */
.autosave-note p { margin: 0 0 0.6rem; }

/* Agenda — the work that is coming, grouped by the day it happens on.

   One table for the whole thing, with the days as heading rows inside it. A
   table per day lets every day pick its own column widths, and then nothing
   lines up with anything below it. */
.agenda-table { table-layout: fixed; width: 100%; }
.agenda-table .col-when  { width: 6.5rem; }
.agenda-table .col-trade { width: 11rem; }
.agenda-table .col-sum   { width: 7.5rem; }
.agenda-table .col-ref   { width: 11rem; }
.agenda-table td {
  vertical-align: top;
  /* An address or a long name wraps inside its column instead of pushing the
     ones beside it out of true. */
  overflow-wrap: anywhere;
}

.agenda-table .agenda-day-row th {
  text-align: left;
  font-size: 0.95rem;
  padding: 0.9rem 0.6rem 0.3rem;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
}
.agenda-table .agenda-day-row:first-child th { padding-top: 0.2rem; }
.agenda-table .agenda-day-row th .pill,
.agenda-table .agenda-day-row th .cat-count { margin-left: 0.4rem; }

/* Today is the one you are standing in: marked down the left of its rows
   rather than around a block, so the columns stay where they are. */
.agenda-table .agenda-day-row--today th,
.agenda-table .agenda-job--today td:first-child {
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.agenda-table .agenda-job--today td { background: var(--color-primary-20); }

.agenda-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.agenda-sub { color: var(--color-text-muted); font-size: 0.85rem; }
/* A deadline is not a job: an amber edge on the left and a dashed line above,
   so it reads as a marker among the day's work rather than as one more klus. */
.agenda-table .agenda-deadline td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
.agenda-table .agenda-deadline td { border-top: 1px dashed var(--color-border); }
.agenda-unplanned-list {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}
.agenda-unplanned-list li { margin-bottom: 0.25rem; }

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--color-border);
}
.data-table th {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; }
.data-table .actions { text-align: right; white-space: nowrap; }
.data-table .actions a, .data-table .actions form { margin-left: 0.5rem; display: inline-block; }
.empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 2rem 0;
}

/* Status pills */
.pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  /* A pill is a label, not a paragraph. Every status used to be one word, so
     "plan datum" was the first to wrap — and a fully rounded box around two
     lines is a balloon that stands taller than the row it sits in. */
  white-space: nowrap;
}
.pill-concept    { color: var(--color-text-muted); }
.pill-verzonden  { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-20); }
.pill-akkoord    { color: var(--color-secondary); border-color: var(--color-secondary); background: var(--color-secondary-20); }
/* Akkoord, maar de datum moet nog gepland worden: nog geen factuur. */
.pill-plan_datum { color: var(--color-warning, #9a6700); border-color: var(--color-warning, #d4a72c); background: var(--color-warning-bg, #fff8c5); }
/* A pill that is also the button for what it asks: plan datum in the list. */
a.pill { text-decoration: none; cursor: pointer; }
a.pill:hover { box-shadow: 0 0 0 2px var(--color-warning-bg); text-decoration: underline; }
.pill-verlopen   { color: var(--color-text-muted); }
.pill-vervangen  { color: var(--color-text-muted); text-decoration: line-through; }
.pill-afgewezen  { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-bg); }
.pill-betaald    { color: var(--color-secondary); border-color: var(--color-secondary); background: var(--color-secondary-20); }
.pill-archived   { color: var(--color-text-muted); }

/* Inline forms (e.g. archive button) */
.inline-form { display: inline; margin: 0; }
/* A bare button here reads as a quiet text link; one that asks to be a .btn
   keeps the button look. */
.inline-form button:not(.btn) {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.inline-form button:not(.btn):hover { color: var(--color-text); text-decoration: underline; }
.inline-form button.danger { color: var(--color-error); }
.inline-form button.danger:hover { color: var(--color-error); filter: brightness(1.2); }

/* Line-item editor (quotes) */
.lines-editor table { width: 100%; border-collapse: collapse; }
.lines-editor th, .lines-editor td { padding: 0.4rem; vertical-align: top; }
.lines-editor input, .lines-editor select { padding: 0.35rem 0.5rem; font-size: 0.9rem; }
.lines-editor .remove-btn { background: transparent; color: var(--color-error); border: none; cursor: pointer; }
.lines-editor .group-header td {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  padding-top: 0.8rem;
}
.totals-box {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1rem;
  max-width: 320px;
  margin-left: auto;
  font-size: 0.95rem;
}
.totals-box .label { color: var(--color-text-muted); }
.totals-box .grand { font-weight: 600; font-size: 1.05rem; }

/* Topbar logout */
.logout-form { display: inline; }
.logout-form button {
  background: transparent;
  color: var(--color-text-muted);
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.logout-form button:hover { color: var(--color-text); }

/* Dashboard */
.dash-logo {
  text-align: center;
  padding: 1.75rem 0 1.25rem;
}
.dash-logo-img {
  max-height: 300px;
  width: auto;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 800px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  text-align: center;
}
.stat-card--accent {
  border-color: var(--color-primary);
  background: var(--color-primary-20);
}
.stat-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}
.stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

/* Two-column page layout (quote/invoice edit) */
.col-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}
@media (max-width: 800px) { .col-2 { grid-template-columns: 1fr; } }

/* Charts -------------------------------------------------------------- */
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.chart-head h2 { margin: 0; }
.chart-sub {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
  max-width: 62ch;
}
.chart-hero { text-align: right; }
.chart-hero-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 1.1rem 0 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.legend-item strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  display: inline-block;
}
.swatch-portal   { background: var(--series-portal); }
.swatch-archive  { background: var(--series-archive); }
.swatch-quotes   { background: var(--series-quotes); }
.swatch-invoices { background: var(--series-invoices); }
.chart-box { overflow-x: auto; }
.chart-table { margin-top: 1rem; }
.chart-table summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: 0.25rem 0;
}
.chart-table summary:hover { color: var(--color-text); }
.chart-table summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.chart-table .data-table { margin-top: 0.6rem; }
.chart-note {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Catalogue: manual ordering, collapsing, aligned columns --------------- */
.catalog-hint {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: -0.25rem 0 1rem;
}

/* Fixed layout with shared column widths, so Prijs / BTW / Eenheid line up
   across every subcategory table on the page instead of each table sizing
   its own columns. */
.catalog-table { table-layout: fixed; }
.catalog-table .col-drag    { width: 2.4rem; }
.catalog-table .col-name    { width: auto; }
.catalog-table .col-price   { width: 7.5rem; }
.catalog-table .col-vat     { width: 5rem; }
.catalog-table .col-unit    { width: 6.5rem; }
.catalog-table .col-actions { width: 19rem; }
.catalog-table th.num,
.catalog-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Alternating tint: on a long product list the eye needs a rail to follow.
   Hover stays a separate, stronger shade so it is still visible on a tinted
   row. */
.catalog-table tbody tr:nth-child(odd) { background: var(--color-row-alt); }
.catalog-table tbody tr:hover { background: var(--color-hover); }
.catalog-table .cell-name { overflow-wrap: anywhere; }
.catalog-table td { vertical-align: middle; }
@media (max-width: 720px) {
  .catalog-table { table-layout: auto; }
  .catalog-table .col-actions { width: auto; }
}

/* Drag handles */
.drag-handle {
  cursor: grab;
  color: var(--color-text-muted);
  user-select: none;
  padding: 0 0.15rem;
  line-height: 1;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle:hover { color: var(--color-text); }
.drag-handle--inline { cursor: default; }
.drag-cell { text-align: center; }
tr.dragging, .sub-block.dragging {
  opacity: 0.55;
  outline: 2px dashed var(--color-primary);
}
.sortable-subs .sub-block { background: var(--color-surface); }

/* Up/down fallback buttons */
.move-group { display: inline-flex; gap: 0.15rem; margin-right: 0.35rem; }
.move-btn {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.35rem;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
}
.move-btn:hover { background: var(--color-hover); color: var(--color-text); }
.move-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.sort-note {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  margin: 0.6rem 0 0;
  min-height: 1.1em;
}
.sort-note--error { color: var(--color-error); }

/* Collapsing a main category */
.collapse-btn {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.collapse-btn:hover { background: transparent; color: var(--color-primary); }
.collapse-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.collapse-btn .chevron { transition: transform 0.15s ease; font-size: 0.8em; }
/* Any collapsed section, card or subcategory alike. */
.collapsed > .page-head .collapse-btn .chevron,
.cat-root.collapsed .collapse-btn .chevron { transform: rotate(-90deg); }
.cat-head h2, .sub-head h3 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cat-count {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
@media (prefers-reduced-motion: reduce) {
  .collapse-btn .chevron { transition: none; }
}

.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;
}

/* Search bars and type-to-filter dropdowns ------------------------------ */
.search-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.search-bar input[type=search] {
  flex: 1 1 22rem;
  max-width: 32rem;
  margin: 0;
}
.search-count {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.filter-input { margin-bottom: 0.35rem; }
/* Where the combo box took over, that box *is* the search box. The filter
   input stays in the DOM — it owns the option filtering the combo reads, and
   the category dropdown narrows through it — but showing both left two search
   boxes stacked in one field. */
[data-combo-select] .filter-input,
[data-combo-select] .filter-note { display: none; }
.filter-note {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin: -0.15rem 0 0.35rem;
  min-height: 1em;
}

.lines-warning {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-error);
  background: var(--color-error-bg);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.88rem;
}

/* Type-to-search combobox over a <select> --------------------------------- */
.combo { position: relative; }
.combo .combo-native {
  /* The select keeps the value and stays in the form; the combo box is what
     you see. Not display:none, so a required select would still be focusable
     if this pattern is ever used on one. */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.combo-input { width: 100%; margin: 0; }
.combo.open .combo-input {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary-20);
  outline-offset: 0;
}
.combo-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  /* As tall as the window allows rather than a fixed sliver — the picker sits
     near the top of the form, so there is room below it. */
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px var(--color-overlay);
}
.combo-option {
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.92rem;
}
/* Alternating tint, as on the catalogue page: a long list of products needs a
   rail for the eye to follow. It counts the rows that are actually listed, so
   a filtered list alternates too. Hover and the keyboard-active row are the
   rules after this one, so they still show through. */
.combo-option:nth-child(odd) { background: var(--color-row-alt-strong); }
.combo-option:hover,
.combo-option.active { background: var(--color-primary-20); }
.combo-option[aria-selected=true] { font-weight: 600; }
.combo-empty {
  padding: 0.4rem 0.55rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  list-style: none;
}

/* The same rail in a native dropdown. What a browser does with the popup is
   its own business -- Chrome and Firefox paint this, Safari ignores it -- so it
   is a help where it lands, never something the list depends on. Options are
   counted inside their optgroup, which is where the alternation reads best. */
select option:nth-child(odd) { background: var(--color-row-alt-strong); }
.combo-status {
  /* Out of flow. Reserving a line for the result count made the field taller
     than the controls beside it, so the box it belongs to sat above the row it
     is part of. It appears under the box when it has something to say. */
  position: absolute;
  top: calc(100% + 0.15rem);
  left: 0;
  right: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

/* Hoofdcategorieën are a sortable list too */
.sortable-roots { display: block; }
.sortable-roots .cat-root.dragging { outline: 2px dashed var(--color-primary); }
.cat-head h2 .drag-handle { font-size: 0.9em; }

/* A combobox that was submitted without a choice */
.combo.invalid .combo-input {
  border-color: var(--color-error);
  outline: 2px solid var(--color-error-bg);
}
.combo.invalid .combo-status { color: var(--color-error); }

/* A paid invoice reads as done at a glance ------------------------------- */
.data-table tr.row-paid { background: var(--color-success-bg); }
.data-table tr.row-paid td { border-bottom-color: var(--color-success); }
.data-table tr.row-paid td:first-child { box-shadow: inset 3px 0 0 var(--color-success); }

/* Past its vervaldatum and still open: the one row in the list that wants
   doing something about, so it reads as loudly as paid reads as settled. */
.data-table tr.row-overdue { background: var(--color-error-bg); }
.data-table tr.row-overdue td { border-bottom-color: var(--color-error); }
.data-table tr.row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--color-error); }
.data-table td.cell-overdue { color: var(--color-error); font-weight: 600; }
.pill-overdue {
  color: var(--color-error);
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

/* Where today falls in a list that runs from the future back into the past. */
.data-table tr.row-today-divider td {
  padding: 0;
  border-bottom: 0;
  position: relative;
  height: 1.6rem;
  vertical-align: middle;
}
.data-table tr.row-today-divider td::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed var(--color-border);
}
.data-table tr.row-today-divider span {
  position: relative;
  background: var(--color-surface, #fff);
  padding: 0 0.5rem;
  margin-left: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Paid is the one status worth reading as good news, so it goes green rather
   than sharing the secondary blue with everything else. */
.pill-betaald {
  color: var(--color-success);
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

/* Address lookup on a form ---------------------------------------------- */
.address-lookup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: -0.4rem 0 1rem;
}
.address-status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  min-height: 1.2em;
}
.address-status--ok { color: var(--color-success); }
.address-status--error { color: var(--color-error); }

/* Three across: ex. BTW, percentage, incl. BTW */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } }

/* A date field with its "Vandaag" shortcut */
.date-with-today {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.date-with-today input[type=date] { flex: 1 1 auto; }
.date-with-today button { white-space: nowrap; }

/* The brand doubles as the way home */
.topbar a.brand { color: var(--color-text); text-decoration: none; }
.topbar a.brand:hover { color: var(--color-primary); text-decoration: none; }
.topbar a.brand:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; }

/* Quick-add a customer from the quote form ------------------------------- */
.quick-customer { margin-top: 0.5rem; }
.quick-customer-form {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
}
.quick-customer-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.quick-customer-row input { flex: 1 1 14rem; }
.quick-customer-status {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  min-height: 1.1em;
}
.quick-customer-status--error { color: var(--color-error); }

/* A collapsed subcategory is a single line: no border hanging under it. */
.sub-block.collapsed { padding-bottom: 0; }
.sub-block.collapsed .sub-head { margin-bottom: 0; }
.sub-head .collapse-btn { font: inherit; font-weight: inherit; }

/* Facturen: portal and archive in one list ------------------------------- */
.source-tabs {
  display: flex;
  gap: 1rem;
  margin: -0.5rem 0 1rem;
  font-size: 0.9rem;
}
.source-tabs a { color: var(--color-text-muted); padding-bottom: 0.2rem; }
.source-tabs a:hover { color: var(--color-text); text-decoration: none; }
.source-tabs a.is-current {
  color: var(--color-text);
  border-bottom: 2px solid var(--color-primary);
}
/* An imported invoice is a document, not a live one: muted, so the rows that
   still need something from you stand out next to it. */
.data-table tr.row-archived td { color: var(--color-text-muted); }
.data-table tr.row-archived td:first-child { color: var(--color-text); }
.list-pager {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Klus uitbesteden */
.job-details {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--color-row-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  white-space: pre-wrap;
}
label.checkbox { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; }
label.checkbox input { width: auto; margin: 0; }
.photo-drop {
  padding: 1.25rem;
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  text-align: center;
  color: var(--color-text-muted);
}
.photo-drop:focus, .photo-drop.is-over { border-color: var(--color-primary); outline: none; }
.photo-drop input[type="file"] { display: none; }
.photo-pick { display: inline; color: var(--color-primary); cursor: pointer; text-decoration: underline; font-weight: normal; }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.photo-thumb { display: flex; flex-direction: column; gap: 0.35rem; width: 120px; }
.photo-thumb img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-border); }
/* A grid or flex rule would otherwise win over the hidden attribute. */
[hidden] { display: none !important; }

/* Buitenunit and binnenunit fields: in the catalogue and on an installatie. */
.unit-fields {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem 0;
  margin: 0 0 1rem;
}
.unit-fields legend { padding: 0 0.35rem; font-size: 0.9rem; font-weight: 600; }
.indoor-unit { position: relative; }
.indoor-unit-remove { position: absolute; top: 0.35rem; right: 0.5rem; }
.refrigerant-total { font-variant-numeric: tabular-nums; }

/* The werkbon is filled in on a phone at the job: large fields, and text big
   enough that iOS does not zoom the page when one is tapped. */
.work-order input[type=text],
.work-order input[type=date],
.work-order input[type=search],
.work-order select,
.work-order textarea { font-size: 16px; padding: 0.7rem 0.75rem; }
.check-large { padding: 0.5rem 0; font-size: 1rem; color: var(--color-text); }
.check-large input { width: 1.4rem; height: 1.4rem; flex: none; }
.activity-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.activity-head h2 { margin: 0; }
.implicit-submit { position: absolute; left: -9999px; }
.save-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.save-bar button { flex: 1; padding-top: 0.8rem; padding-bottom: 0.8rem; font-size: 1rem; }
.work-order-delete { margin-bottom: 2rem; }
.signature-pad, .signature-image {
  display: block;
  width: 100%;
  max-width: 600px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
/* The finger signs; it does not scroll the page. */
.signature-pad { touch-action: none; }
.template-step { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.template-step select { flex: 1; min-width: 0; }

@media print {
  .topbar, .no-print { display: none !important; }
}

/* A table wider than a phone scrolls inside its card, not the whole page. */
.table-scroll { overflow-x: auto; }