/* =========================================================
   Garage & Banden Dashboard — flat, solid, professional
   ========================================================= */

:root {
  color-scheme: dark;

  --bg: #000000;
  --surface: #0c0c0e;
  --surface-alt: #141417;
  --surface-head: #17171b;

  --border: #2b2b32;
  --border-soft: #1d1d22;

  --text: #f3f4f6;
  --text-dim: #a4abb8;
  --text-faint: #6d7481;

  --accent: #3b82f6;
  --accent-dark: #2563eb;
  --green: #22c55e;
  --green-bg: #0e2a1a;
  --red: #ef4444;
  --red-bg: #2b1315;
  --amber: #f59e0b;
  --stock: #38bdf8;

  /* Subtiele donkergrijze scheidingslijn tussen secties en kolommen. */
  --rule: #23232a;

  --radius: 6px;
  --radius-sm: 4px;

  --line: cubic-bezier(0.4, 0, 0.2, 1);

  --font: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body { padding: 0; }

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.muted { color: var(--text-faint); font-weight: 400; }

/* ---------- login ---------- */
.login-screen {
  /* 100dvh volgt de adresbalk van de telefoon terwijl die in- en uitschuift.
     Met 100vh rekent de browser met het scherm zónder balk, waardoor de kaart
     net te laag staat en het scherm mee op en neer schuift. 100vh blijft als
     terugval staan voor browsers die dvh nog niet kennen. */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}
.login-screen[hidden] { display: none; }

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
}
/* De logo stond al gecentreerd, de tekst eronder niet - die viel daardoor
   links weg naast een gecentreerd beeldmerk. De velden zelf blijven links
   uitgelijnd, want labels boven een invoerveld horen links te beginnen. */
.login-title { font-size: 21px; letter-spacing: -0.01em; text-align: center; }
.login-sub {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 4px;
  margin-bottom: 22px;
  text-align: center;
}
.login-card .field { margin-bottom: 14px; }
.btn-block { width: 100%; justify-content: center; margin-top: 6px; }

/* ---------- app shell ---------- */
.app[hidden] { display: none; }
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  text-decoration: none; color: inherit;
  position: relative;
  padding-bottom: 2px;
}
.brand::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transition: left 0.24s var(--line), right 0.24s var(--line);
}
.brand:hover::after { left: 0; right: 0; }
.brand-text h1 { font-size: 15px; white-space: nowrap; }
.brand-text p { font-size: 12px; color: var(--text-faint); margin-top: 1px; white-space: nowrap; }

.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
a.btn { text-decoration: none; display: inline-block; }
a.btn[hidden] { display: none; }

/* ---------- buttons ---------- */
/* No transforms, no shadows: a crisp border transition plus a line that
   grows out from the centre of the button on hover. */
.btn {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.18s var(--line), border-color 0.18s var(--line), background 0.18s var(--line);
}
.btn::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 2px;
  background: currentColor;
  transition: left 0.24s var(--line), right 0.24s var(--line);
}
.btn:hover::after { left: 0; right: 0; }
.btn:hover { border-color: var(--text-faint); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:disabled::after { left: 50%; right: 50%; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { border-color: #fff; }
.btn-income { background: var(--green); border-color: var(--green); color: #04170c; }
.btn-income:hover { border-color: #04170c; }
.btn-cost { background: var(--red); border-color: var(--red); color: #1c0708; }
.btn-cost:hover { border-color: #1c0708; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-quiet:hover { color: var(--text); border-color: transparent; }
.btn-danger-quiet { background: transparent; border-color: transparent; color: var(--red); }
.btn-danger-quiet:hover { border-color: transparent; }

.icon-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.icon-btn { transition: color 0.18s var(--line), border-color 0.18s var(--line); }
.icon-btn:hover { color: var(--text); border-color: var(--border); }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
/* display:flex above beats the browser's [hidden] rule, so state it here. */
.field[hidden] { display: none; }
.field-grow { flex: 1 1 200px; }
.field label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
}

input, select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  outline: none;
  width: 100%;
  transition: border-color 0.12s ease;
}
input:focus, select:focus { border-color: var(--accent); }
input::placeholder { color: var(--text-faint); }
input[readonly] { background: var(--surface-alt); color: var(--text-dim); }
select option { background: var(--surface); color: var(--text); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; }

/* ---------- filter bar (moved into the active page by the router) ---------- */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.filterbar[hidden] { display: none; }
.filter-lists { display: contents; }
/* Alleen op een telefoon nuttig; op een breed scherm passen de filters
   gewoon naast elkaar en is een knop om ze te tonen alleen maar in de weg. */
.filter-toggle { display: none; }

main { padding: 22px; max-width: 1500px; }

/* ---------- pages ---------- */
.page { display: none; }
.page.is-active { display: block; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.page-head h2 { font-size: 20px; letter-spacing: -0.01em; }
.page-sub { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

/* ---------- home hub ---------- */
.hub { max-width: 1100px; }
.hub-head { margin-bottom: 22px; }
.hub-head h2 { font-size: 22px; letter-spacing: -0.01em; }
.hub-head p { font-size: 13px; color: var(--text-faint); margin-top: 5px; }

.hub-grid {
  display: grid;
  /* auto-fill en niet auto-fit: auto-fit laat lege kolommen inklappen,
     waardoor een sectie met twee kaarten ze over de volle breedte uitrekt en
     de kaarten per sectie een andere maat krijgen. Met auto-fill blijven de
     kolommen staan en is elke kaart even breed, ongeacht hoeveel er in een
     sectie zitten. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px 20px;
  min-height: 132px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.18s var(--line), background 0.18s var(--line);
}
.hub-card::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 2px;
  background: currentColor;
  transition: left 0.26s var(--line), right 0.26s var(--line);
}
.hub-card:hover { border-color: var(--text-faint); background: var(--surface-alt); }
.hub-card:hover::after { left: 0; right: 0; }

.hub-new { border-top-color: var(--accent); }
.hub-in { border-top-color: var(--green); }
.hub-out { border-top-color: var(--red); }
.hub-stock { border-top-color: var(--stock); }
.hub-dash { border-top-color: var(--amber); }
.hub-set { border-top-color: var(--text-faint); }

.hub-name { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.hub-desc { font-size: 12.5px; color: var(--text-dim); }
.hub-go { margin-top: auto; font-size: 12px; color: var(--text-faint); font-weight: 600; }
.hub-locked {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--amber); border-radius: 2px; padding: 2px 6px;
}
.hub-locked[hidden] { display: none; }

/* ---------- entry form page ---------- */
.form-card { max-width: 720px; margin: 48px auto 0; padding: 22px; }
.form-card .form-grid { margin-top: 18px; }
.form-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

/* ---------- KPI ---------- */
/* "Gemiddelde bon" sits directly under "Winst" in the third column. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "income cost profit"
    "income cost avg";
  gap: 14px;
}
.kpi-income { grid-area: income; }
.kpi-cost { grid-area: cost; }
.kpi-profit { grid-area: profit; }
.kpi-avg { grid-area: avg; }

.kpi { padding: 16px 18px 18px; border-top: 3px solid var(--border); }
.kpi-income { border-top-color: var(--green); }
.kpi-cost { border-top-color: var(--red); }
.kpi-profit { border-top-color: var(--accent); }
.kpi-avg { border-top-color: var(--text-faint); }

.kpi h3 { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.kpi-value {
  font-size: 26px;
  font-weight: 600;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.kpi-income .kpi-value { color: var(--green); }
.kpi-cost .kpi-value { color: var(--red); }
.kpi-profit .kpi-value.is-positive { color: var(--green); }
.kpi-profit .kpi-value.is-negative { color: var(--red); }
.kpi-sub { font-size: 12px; color: var(--text-faint); margin-top: 5px; }

.kpi-bar { margin-top: 12px; height: 5px; background: var(--surface-head); border-radius: 2px; overflow: hidden; }
.kpi-bar span { display: block; height: 100%; width: 0; background: var(--green); transition: width 0.25s ease; }
.kpi-bar span.is-negative { background: var(--red); }

/* ---------- panels ---------- */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.panel { padding: 16px 18px 18px; }
.panel-wide { grid-column: 1 / -1; }
.custom-panels { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.custom-panels:empty { display: none; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.panel-head h3 { font-size: 14px; }
.badge { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* where is the money */
.money-grid { display: grid; gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; }
.money-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 11px 13px; background: var(--surface);
}
.money-name { font-weight: 600; }
.money-flow { font-size: 12px; color: var(--text-faint); margin-top: 2px; font-variant-numeric: tabular-nums; }
.money-net { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-net.is-positive { color: var(--green); }
.money-net.is-negative { color: var(--red); }

/* partners */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.partner-card { padding: 13px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-alt); }
.partner-name { font-weight: 600; font-size: 13px; }
.partner-profit { font-size: 20px; font-weight: 600; margin-top: 7px; font-variant-numeric: tabular-nums; }
.partner-profit.is-positive { color: var(--green); }
.partner-profit.is-negative { color: var(--red); }
.partner-split { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-top: 9px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.partner-split b { display: block; font-weight: 600; margin-top: 2px; }
.partner-split .in b { color: var(--green); }
.partner-split .out b { color: var(--red); }
.partner-share { margin-top: 10px; height: 5px; background: var(--surface-head); border-radius: 2px; overflow: hidden; }
.partner-share span { display: block; height: 100%; background: var(--accent); transition: width 0.25s ease; }

/* breakdown rows (departments + custom lists) */
.dept-list { display: grid; gap: 11px; }
.dept-row { display: grid; grid-template-columns: 150px 1fr 120px; align-items: center; gap: 14px; }
.dept-name { font-weight: 500; }
.dept-name small { display: block; color: var(--text-faint); font-weight: 400; font-size: 11px; margin-top: 2px; }
.dept-bars { display: grid; gap: 4px; }
.bar { height: 8px; background: var(--surface-head); border-radius: 2px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; transition: width 0.25s ease; }
.bar-in span { background: var(--green); }
.bar-out span { background: var(--red); }
.dept-profit { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dept-profit.is-positive { color: var(--green); }
.dept-profit.is-negative { color: var(--red); }

/* ---------- grafiek ---------- */
.chart {
  position: relative;
  height: 240px;
  padding: 18px 0 0 58px;
}
.chart-grid { position: absolute; inset: 18px 0 26px 58px; }
.chart-grid-line {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed var(--border-soft);
}
.chart-grid-line:first-child { border-top-style: solid; border-color: var(--border); }
.chart-grid-label {
  position: absolute; right: calc(100% + 8px); top: -0.65em;
  font-size: 10.5px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.chart-days { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 6px; }
.chart-day {
  flex: 1; height: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--line);
}
.chart-day:hover { background: rgba(255, 255, 255, 0.035); }
.chart-day.is-today .chart-label { color: var(--text); font-weight: 600; }
.chart-day.is-today { background: rgba(255, 255, 255, 0.045); }

.chart-value {
  height: 16px;
  font-size: 10px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chart-cols {
  flex: 1; width: 100%;
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  padding-bottom: 1px;
}
.chart-bar {
  width: 44%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  transition: height 0.35s var(--line), filter 0.15s var(--line);
}
.chart-day:hover .chart-bar { filter: brightness(1.25); }
.bar-in-solid { background: linear-gradient(180deg, var(--green), #15803d); }
.bar-out-solid { background: linear-gradient(180deg, var(--red), #991b1b); }
.bar-cash { background: linear-gradient(180deg, var(--green), #15803d); }
.bar-card { background: linear-gradient(180deg, var(--stock), #0369a1); }
.chart-label {
  height: 26px; line-height: 26px;
  font-size: 10.5px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.legend { display: flex; gap: 18px; margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.legend span { display: flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.swatch-in { background: var(--green); }
.swatch-out { background: var(--red); }
.swatch-cash { background: var(--green); }
.swatch-card { background: var(--stock); }

/* top list */
.top-list { display: grid; gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; }
.top-row {
  display: grid; grid-template-columns: 28px 1fr 70px 110px; align-items: center; gap: 12px;
  padding: 10px 13px; background: var(--surface);
}
.top-rank { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.top-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-count { font-size: 12px; color: var(--text-faint); text-align: right; }
.top-amount { font-weight: 600; color: var(--green); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- tables ---------- */
.table-card { padding: 0; overflow: hidden; }
.t-income { color: var(--green); }
.t-cost { color: var(--red); }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 820px; }

th {
  text-align: left;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  padding: 10px 14px;
  background: var(--surface-head);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sorted-asc::after { content: " \25B2"; font-size: 8px; }
th.sorted-desc::after { content: " \25BC"; font-size: 8px; }

td { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tbody tr:hover { background: var(--surface-alt); }
tbody tr.is-fresh { background: #10203a; }

.num, td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.money-in { color: var(--green); }
.money-out { color: var(--red); }

.cell-desc small { display: block; color: var(--text-faint); font-size: 12px; margin-top: 2px; }
.cell-cat { color: var(--text-dim); white-space: nowrap; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.actions-col { text-align: right; width: 120px; }
.mini {
  /* Bewerk is een <a> en Verwijder een <button>. In de flex-rij rekken beide
     even hoog op, maar een knop centreert zijn tekst vanzelf en een link niet:
     die bleef bovenaan hangen, waardoor Bewerk hoger stond. inline-flex met
     center geeft ze allebei hetzelfde gedrag. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.mini { transition: color 0.18s var(--line), border-color 0.18s var(--line); }
.mini:hover { color: var(--text); border-color: var(--text-faint); }
.mini-danger:hover { color: var(--red); border-color: var(--red); }

tfoot td {
  padding: 12px 14px;
  background: var(--surface-head);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}
tfoot td.num { font-size: 15px; }

.empty-row td { text-align: center; padding: 40px 20px; color: var(--text-faint); }

/* ---------- modals ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
}
.modal-backdrop[hidden] { display: none; }

.modal {
  width: min(620px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.modal-lg { width: min(880px, 100%); }
.modal-sm { width: min(420px, 100%); }
#dash-form .field { margin-bottom: 13px; }
#dash-form .hint { margin-bottom: 16px; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 16px; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.foot-note { margin-right: auto; font-size: 12px; color: var(--text-faint); }

.seg { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn {
  flex: 1;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  padding: 9px;
  cursor: pointer;
  font-weight: 500;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn { transition: color 0.18s var(--line), background 0.18s var(--line); }
.seg-btn:hover:not(:disabled) { color: var(--text); background: var(--surface-alt); }
.seg-btn:disabled { cursor: default; }
/* Boeking en carwash gebruiken dezelfde tab: groen voor inkomen, rood voor kosten. */
#type-seg .seg-btn[data-type="inkomen"].is-active,
#wash-seg .seg-btn[data-wash-type="inkomen"].is-active {
  background: var(--green);
  color: #04170c;
}
#type-seg .seg-btn[data-type="kosten"].is-active,
#wash-seg .seg-btn[data-wash-type="kosten"].is-active {
  background: var(--red);
  color: #1c0708;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 16px; }
.form-lists { display: contents; }
.field-span { grid-column: 1 / -1; }

.form-error {
  margin-top: 14px;
  padding: 9px 12px;
  border: 1px solid var(--red);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--red-bg);
  color: var(--red);
  font-size: 13px;
}

/* ---------- settings ---------- */
.settings-section { margin-bottom: 26px; }
.settings-section > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.settings-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-section-head h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.hint { font-size: 12px; color: var(--text-faint); margin-top: 6px; }

.list-editors { display: grid; gap: 14px; margin-top: 12px; }

.list-editor { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.list-editor-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-head);
  border-bottom: 1px solid var(--border);
}
.list-editor-head input { max-width: 240px; font-weight: 600; }
.list-tag { font-size: 11px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 2px; padding: 2px 6px; background: var(--surface); }
.list-editor-head .spacer { margin-left: auto; }
.list-opt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.list-opt input { width: auto; }

.value-rows { padding: 10px 12px; display: grid; gap: 7px; }
.value-row { display: flex; align-items: center; gap: 6px; }
.value-row input { flex: 1; }
.value-row .used { font-size: 11px; color: var(--text-faint); white-space: nowrap; min-width: 74px; text-align: right; }
.value-row .renamed { color: var(--accent); }
.value-add { display: flex; gap: 6px; padding: 0 12px 12px; }
.value-add input { flex: 1; }

/* ---------- credit ---------- */
.app-credit {
  margin-top: auto;
  padding: 22px;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* Bedrag-label toont het lopende totaal zodra er een product bij zit. */
.amount-hint {
  float: right;
  font-weight: 500;
  color: var(--stock);
  font-variant-numeric: tabular-nums;
}
.amount-hint[hidden] { display: none; }

#tbody-inkomen .pill, #tbody-kosten .pill { margin-right: 4px; }

/* ---------- voorraad koppeling op het boekingsformulier ---------- */
#tyre-block[hidden] { display: none; }

.tyre-panel {
  border: 1px solid var(--border);
  border-left: 3px solid var(--stock);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  padding: 14px;
}
.tyre-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tyre-title { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.tyre-note { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tyre-note.is-error { color: var(--red); }
.tyre-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 13px; }

/* ---------- doorzoekbare productkiezer ---------- */
.combo { position: relative; }
.combo input { padding-right: 30px; }

.combo-clear {
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 28px;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color 0.18s var(--line);
}
.combo-clear:hover { color: var(--text); }
.combo-clear[hidden] { display: none; }

.combo-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
.combo-list[hidden] { display: none; }

.combo-item {
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combo-item:last-child { border-bottom: 0; }
.combo-item.is-active { background: var(--surface-alt); }
.combo-item.is-selected { box-shadow: inset 2px 0 0 var(--accent); font-weight: 600; }

.combo-empty, .combo-more {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-faint);
}
.combo-more { border-top: 1px solid var(--border-soft); background: var(--surface-head); }

@media (max-width: 720px) {
  .tyre-grid { grid-template-columns: 1fr; }
}

/* ---------- voorraad ---------- */
.stock-filters { display: contents; }
.product-lists { display: contents; }

/* Currency prefix that reads as part of the input, not a separate control. */
.input-affix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.12s ease;
}
.input-affix:focus-within { border-color: var(--accent); }
.input-affix .affix {
  display: grid;
  place-items: center;
  min-width: 30px;
  padding: 0 8px;
  color: var(--text-dim);
  background: var(--surface-head);
  border-right: 1px solid var(--border);
  font-size: 13px;
}
.input-affix input {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.input-affix input:focus { border: 0; }

/* Breedte / hoogte / velgmaat on one line, like a tyre marking. */
.size-row { display: flex; align-items: center; gap: 8px; }
.size-row input { flex: 1; min-width: 0; text-align: center; }
.size-sep { color: var(--text-faint); font-weight: 600; }

.check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: 13.5px;
  user-select: none;
  transition: border-color 0.18s var(--line), background 0.18s var(--line);
}
.check-item:hover { border-color: var(--text-faint); }
.check-item input { width: auto; accent-color: var(--accent); cursor: pointer; }
.check-item:has(input:checked) { border-color: var(--accent); background: var(--surface-alt); }

#tbody-voorraad .pill { margin-right: 4px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  min-width: 230px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-faint);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.toast-success { border-left-color: var(--green); }
.toast-info { border-left-color: var(--accent); }

/* Errors stay until dismissed, so they get a heavier treatment. */
.toast-error {
  border-left-color: var(--red);
  border-color: var(--red);
  background: var(--red-bg);
  color: var(--text);
  max-width: 380px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.toast-text { flex: 1; }
.toast-close {
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.toast:hover .toast-close { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; }
  .topbar-right { margin-left: auto; }
}

@media (max-width: 900px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "income cost"
      "profit profit"
      "avg avg";
  }
}

@media (max-width: 720px) {
  main { padding: 16px 14px; }
  /* De terugknop komt onder de titel te staan. Met de oorspronkelijke
     marges liep de afstand tot het eerste veld op tot bijna 90px; op een
     telefoon is dat een scherm vol niets. */
  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .page-head .btn-quiet { padding-left: 0; }
  .hub-grid { grid-template-columns: 1fr; }
  .kpi-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "income" "cost" "profit" "avg";
  }
  .topbar, .filterbar { padding: 12px 14px; }
  .kpi-value { font-size: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .dept-row { grid-template-columns: 1fr; gap: 6px; }
  .dept-profit { text-align: left; }
  .field { min-width: 110px; flex: 1 1 110px; }
  .toasts { left: 14px; right: 14px; bottom: 14px; }
}

/* ---------- Carwash + vergelijking ---------- */
.t-wash { color: var(--stock, var(--accent)); }
.hub-wash { border-top-color: var(--stock, var(--accent)); }
.wash-lists { display: contents; }

.scope-note {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

/* KPI-rij binnen een panel: geen dubbele kaartrand */
.kpi-grid-flat {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-template-areas: none;
  gap: 12px;
}
.kpi-grid-flat .kpi { grid-area: auto !important; }
.section-head-card { background: transparent; box-shadow: none; border-style: dashed; }

.compare { display: grid; gap: 16px; }
.cmp-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.cmp-block {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.cmp-banden { border-left-color: var(--accent); }
.cmp-wash { border-left-color: var(--stock); }
.cmp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cmp-name { font-weight: 600; font-size: 15px; }
.cmp-winst { font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
.cmp-track {
  height: 10px; margin: 12px 0 8px;
  background: var(--surface-head); border-radius: 5px; overflow: hidden;
}
.cmp-track span { display: block; height: 100%; border-radius: 5px; transition: width 0.4s var(--line); }
.cmp-banden .cmp-track span { background: linear-gradient(90deg, var(--accent), #1d4ed8); }
.cmp-wash .cmp-track span { background: linear-gradient(90deg, var(--stock), #0369a1); }
.cmp-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--text-faint); }

.cmp-split { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-head); }
.cmp-share { display: block; transition: width 0.4s var(--line); }
.cmp-share-banden { background: var(--accent); }
.cmp-share-wash { background: var(--stock); }
.cmp-note { font-size: 12px; color: var(--text-faint); }

.kpi-cash { border-top-color: var(--green); }
.kpi-cash .kpi-value { color: var(--green); }
.kpi-card { border-top-color: var(--stock); }
.kpi-card .kpi-value { color: var(--stock); }

/* Carwash begint hier: duidelijke breuk met de garage-cijfers erboven. */
.wash-divider { margin-top: 26px; border-top: 2px solid var(--stock); }

.hist-seg { max-width: 360px; margin-bottom: 12px; }
.hist-scroll { max-height: 460px; overflow-y: auto; }

/* =========================================================
   FLAT / BORDERLESS OVERLAY
   Laatste blok in het bestand: haalt alle randen, kaders en
   schaduwen weg. Hiërarchie komt van witruimte, typografie en
   heel subtiele achtergrondverschillen.
   ========================================================= */

:root {
  --surface: #0e0e11;      /* nauwelijks lichter dan de achtergrond */
  --surface-alt: #141418;
  --surface-head: #16161a;
  --field: #17171c;        /* invulveld */
  --field-focus: #1d1d23;
}

/* ---------- 1. geen kaders meer ---------- */
.card,
.panel,
.table-card,
.form-card,
.login-card,
.filterbar,
.hub-card,
.kpi,
.partner-card,
.cmp-block,
.list-editor,
.tyre-panel,
.money-grid,
.top-list,
.section-head-card,
.wash-divider,
.scope-note {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0;
}

.card, .panel, .table-card { background: transparent; }
.page-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 26px; }
.topbar { border-bottom: 0; background: var(--surface); }
.panel-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.modal-head, .modal-foot { border: 0; }
.modal-foot { background: transparent; }
.form-actions { border-top: 0; padding-top: 22px; }
.hero-foot, .app-credit { border: 0; }

/* modals blijven een oppervlak nodig hebben om leesbaar te zijn */
.modal { background: #101014; border-radius: 10px; }

/* ---------- 2. secties vloeien over ---------- */
.dash-section { margin: 0 0 72px; padding-bottom: 72px; border-bottom: 1px solid var(--rule); }
.dash-section:last-child { margin-bottom: 24px; padding-bottom: 0; border-bottom: 0; }

.dash-header { margin-bottom: 22px; }
.dash-header h2 {
  font-size: 26px;
  letter-spacing: -0.02em;
  font-weight: 650;
}
.dash-header p { font-size: 13px; color: var(--text-faint); margin-top: 4px; }

.dash-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 42px;
  margin-bottom: 34px;
}
.figure { display: flex; flex-direction: column; gap: 4px; }
.figure-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint);
}
.figure-value { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fig-in { color: var(--green); }
.fig-out { color: var(--red); }
.fig-neutral { color: var(--text); }

/* inkomen en kosten strikt naast elkaar */
.split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 44px;
}
/* De middelste kolom is de scheidingslijn zelf. */
.split::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  background: var(--rule);
}
.split-col { min-width: 0; grid-row: 1; }
.split-col.col-in { grid-column: 1; }
.split-col.col-out { grid-column: 3; }
.col-title {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 650; margin-bottom: 10px;
}
.col-in .col-title { color: var(--green); }
.col-out .col-title { color: var(--red); }
.col-total { font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; }
.col-in .col-total { color: var(--green); }
.col-out .col-total { color: var(--red); }
.col-meta { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

.sub-block { margin-top: 44px; }
.sub-title {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 650; margin-bottom: 14px;
}

/* staafjeslijst */
.stack { margin-top: 30px; }
.stack-title {
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 650; margin: 0 0 10px;
}
.stack-empty { font-size: 12.5px; color: var(--text-faint); }
.stack-row {
  display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto;
  align-items: center; gap: 12px; padding: 5px 0;
}
.stack-label {
  font-size: 13px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stack-track { height: 6px; border-radius: 3px; background: var(--surface-head); overflow: hidden; }
.stack-track i { display: block; height: 100%; border-radius: 3px; }
.fill-in { background: var(--green); }
.fill-out { background: var(--red); }
.stack-value { font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- 3. invulvelden ---------- */
input, select, textarea {
  background: var(--field);
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 4px;
  padding: 9px 10px;
  transition: background 0.15s var(--line), border-color 0.15s var(--line);
}
input:hover, select:hover { background: var(--field-focus); }
input:focus, select:focus {
  background: var(--field-focus);
  border-bottom-color: var(--accent);
  outline: 0;
}
input[readonly] { background: transparent; color: var(--text-dim); }
.input-affix { background: var(--field); border: 0; border-radius: 4px; }
.input-affix input { background: transparent; }
.input-affix:focus-within { background: var(--field-focus); }

.check-item, .seg, .seg-btn, .mini, .combo-list, .list-editor-head, .value-row input {
  border-color: transparent !important;
}
.seg { background: var(--field); border-radius: 4px; overflow: hidden; }
.seg-btn { background: transparent; }
.seg-btn:hover:not(:disabled) { background: var(--surface-alt); }
.check-item { background: var(--field); }
.check-item:hover { background: var(--field-focus); }
.mini { background: var(--field); }
.mini:hover { background: var(--field-focus); }
.combo-list { background: #14141a; border-radius: 6px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55) !important; }

/* knoppen zonder rand, wel hun vlak en lijn-animatie */
.btn { border-color: transparent; background: var(--field); }
.btn:hover { border-color: transparent; background: var(--field-focus); }
.btn-quiet { background: transparent; }
.btn-quiet:hover { background: var(--field); }
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: transparent; }
.btn-income { background: var(--green); }
.btn-cost { background: var(--red); }
.icon-btn:hover { border-color: transparent; background: var(--field); }

/* ---------- 4. tabellen: raster zonder lijnen ---------- */
table { border-collapse: separate; border-spacing: 0; }
th {
  background: transparent;
  border-bottom: 0;
  padding: 8px 14px;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint);
}
td { border: 0; padding: 11px 14px; }
tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.022); }
tbody tr:hover { background: rgba(255, 255, 255, 0.05); }
tfoot td {
  background: transparent;
  border-top: 0;
  padding-top: 16px;
  color: var(--text-dim);
}
.table-scroll { border-radius: 6px; }

/* filterbalk als zwevende rij */
.filterbar { background: transparent; padding: 0 0 20px; }

/* hub-kaarten: vlakken in plaats van doosjes */
.hub-card {
  background: var(--surface);
  border-radius: 8px;
  padding: 24px 22px;
}
.hub-card:hover { background: var(--surface-alt); }

/* KPI's en losse blokjes */
.kpi { background: transparent; padding: 0; }
.money-row, .partner-card, .top-row, .value-row, .list-editor {
  background: transparent;
}
.money-grid, .top-list { background: transparent; gap: 0; }
.money-row { padding: 12px 0; }
.money-row + .money-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.list-editor { background: var(--surface); border-radius: 8px; padding-bottom: 4px; }
.list-editor-head { background: transparent; }

/* grafiek: dunnere, rustiger gridlijnen */
.chart-grid-line { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.chart-grid-line:first-child { border-top-color: rgba(255, 255, 255, 0.09); }
.chart-sm { height: 170px; padding-left: 52px; }

/* vergelijking */
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; }
.cmp-block { background: transparent; padding: 0; }
.cmp-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; }
.cmp-name { font-size: 17px; }
.cmp-winst { font-size: 22px; }
.cmp-line { display: grid; grid-template-columns: 60px 1fr 100px; align-items: center; gap: 12px; margin-bottom: 9px; }
.cmp-key { font-size: 12px; color: var(--text-faint); }
.cmp-num { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.cmp-track { height: 8px; border-radius: 4px; background: var(--surface-head); overflow: hidden; }
.cmp-track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.cmp-track-out i { background: var(--red); }
.cmp-track-profit i { background: var(--green); }
.cmp-wash .cmp-track i { background: var(--stock); }
.cmp-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 12px; }
.cmp-split { margin-top: 34px; height: 10px; border-radius: 5px; }
.cmp-note { margin-top: 12px; }

/* historie: meer rijen zichtbaar zonder scrollen */
.hist-scroll { max-height: none; overflow-y: visible; }
.hist-seg { max-width: 340px; margin-bottom: 16px; }

/* main is een flex-item in .app; zonder width:100% laat `margin: 0 auto` het
   krimpen tot de inhoud en klapt het hub-grid naar één kolom. */
main {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 30px 26px 0;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 44px; }
  .dash-figures { gap: 28px; }
}

/* ---------- carwash dagformulier: inkomen en kosten gescheiden ---------- */
.wash-group { margin-top: 30px; }
.wash-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.wash-group-head h3 {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 650;
}
.group-in .wash-group-head h3 { color: var(--green); }
.group-out .wash-group-head h3 { color: var(--red); }
.wash-group-total {
  font-size: 19px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.group-in .wash-group-total { color: var(--green); }
.group-out .wash-group-total { color: var(--red); }
.wash-group .form-grid { margin-top: 0; }

.wash-netto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  padding-top: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.wash-netto-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 650;
}
.wash-netto-value {
  font-size: 28px;
  font-weight: 650;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.wash-netto-value.is-negative { color: var(--red); }

/* ---------- historie: filters ---------- */
.hist-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin: 18px 0 14px;
}
.hist-lists { display: contents; }
.hist-filters .field { min-width: 130px; }

.pill-in { color: var(--green); }
.pill-out { color: var(--red); }

@media (max-width: 900px) {
  /* Onder elkaar: dan wordt de verticale lijn een horizontale. */
  .split { grid-template-columns: 1fr; gap: 36px 0; }
  .split::before { grid-column: 1; grid-row: 2; width: auto; height: 1px; }
  .split-col.col-in { grid-column: 1; grid-row: 1; }
  .split-col.col-out { grid-column: 1; grid-row: 3; }
}

/* ---------- logo ---------- */
.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  flex-shrink: 0;
}
.login-logo {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  display: block;
  margin: 0 auto 18px;
}

/* ---------- integriteitsbanner ---------- */
/* Verschijnt alleen na een automatisch dataherstel; blijft staan tot een
   bewuste klik op sluiten - dit mag nooit ongezien voorbijkomen. */
.integrity-banner {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  background: var(--amber);
  color: #1a1200;
  font-size: 13px;
  font-weight: 600;
}
/* Alleen deze klasse zet de balk aan. Het hidden-attribuut werkt hier niet:
   display: flex in de regel hierboven wint van [hidden] { display: none }. */
.integrity-banner.is-zichtbaar {
  display: flex;
}
.integrity-banner.is-ernstig {
  background: var(--red-bg);
  color: var(--red);
  border-bottom: 1px solid var(--red);
}
.integrity-banner span:first-child { flex: 1; }
.integrity-banner-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}
.integrity-banner-close:hover { opacity: 1; }

/* ---------- historie: paginering ---------- */
/* Na jaren aan boekingen kunnen dit duizenden rijen worden; alleen de
   huidige pagina staat ooit in de DOM. */
.hist-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 0 4px;
}
.hist-pager[hidden] { display: none; }
.hist-pager-label {
  font-size: 12.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   MOBIEL
   ==================================================================
   De app wordt in de garage ook op een telefoon gebruikt, staand, vaak
   met een hand. Alles hieronder is daarop gericht: niets mag horizontaal
   wegvallen, aanraakvlakken zijn minstens 44px, en de brede tabellen
   worden losse kaartjes in plaats van iets waar je opzij voor moet
   scrollen.
   ================================================================== */

@media (max-width: 720px) {
  /* iOS zoomt automatisch in zodra een invoerveld kleiner is dan 16px.
     Dat verspringt het hele scherm bij elke tik in een veld. */
  input, select, textarea, .btn, button {
    font-size: 16px;
  }

  /* Een dubbeltik mag geen zoom worden - dat gebeurt anders zodra iemand
     twee keer snel op een knop drukt. */
  a, button, .btn, .mini, .tab, .check-item, label {
    touch-action: manipulation;
  }

  /* Vingers zijn geen muiscursors: hoogte in plaats van dichtheid. */
  .btn, button[type="submit"], .tab, .seg-btn {
    min-height: 44px;
  }
  /* Bewerk/Verwijder staan met z'n tweeën in een rij; 36px houdt ze
     aantikbaar zonder dat elk kaartje twee keer zo hoog wordt. */
  .mini { min-height: 36px; padding: 0 12px; }

  main { padding: 14px 12px calc(20px + env(safe-area-inset-bottom)); }

  /* Eén compacte regel in plaats van een balk die een vijfde van het scherm
     opeet. De knoppen passen niet naast elkaar op 375px, dus die schuiven
     opzij - dat kost geen hoogte, in tegenstelling tot afbreken naar een
     tweede en derde regel. */
  .topbar {
    gap: 10px;
    flex-wrap: nowrap;
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top));
  }
  .brand { flex: 0 0 auto; }
  .brand img, .brand-logo { width: 28px; height: 28px; }
  .brand-text h1 { font-size: 14px; }
  .brand-text p, .brand-sub { display: none; }

  .topbar-right {
    margin-left: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }
  .topbar-right::-webkit-scrollbar { display: none; }
  .topbar-right > * { flex: 0 0 auto; }
  /* In de balk mogen de knoppen kleiner dan 44px: ze staan naast elkaar en
     worden zelden geraakt, en anders wordt de balk weer even hoog. */
  .topbar-right .btn { min-height: 36px; padding: 6px 10px; font-size: 13px; }

  /* ---- filterbalk: twee kolommen ----
     Zes velden achter elkaar wordt een rommeltje van halve regels. Een vast
     raster van twee houdt de labels boven hun eigen veld. */
  .filterbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    overflow-x: visible;
  }
  .filterbar .field { min-width: 0; width: auto; }
  /* Zoeken en de resetknop krijgen de volle breedte. */
  .filterbar .field-grow,
  .filterbar > .btn { grid-column: 1 / -1; }

  /* Zes filtervelden zijn 350px hoog - dat duwt de boekingen van het scherm
     terwijl je de filters zelden aanpast. Ingeklapt blijft alleen de knop
     staan; wie wil filteren tikt die open. */
  .filter-toggle { display: block; grid-column: 1 / -1; text-align: left; }
  .filterbar:not(.is-open) { padding: 0; border: 0; background: none; }
  .filterbar:not(.is-open) > *:not(.filter-toggle) { display: none; }

  /* Tabbalk horizontaal schuifbaar in plaats van afgekapt. */
  .tabs, .filterbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .filterbar::-webkit-scrollbar { display: none; }
  .tabs > *, .filterbar > * { flex: 0 0 auto; }

  /* ---- tabellen worden kaartjes ----
     Een tabel van acht kolommen is op een telefoon onleesbaar. Elke rij
     wordt hier een blokje met de kolomnaam ervoor; die naam komt uit
     data-label, dat de renderer per cel meegeeft. */
  .table-scroll { overflow-x: visible; }

  .table-scroll table,
  .table-scroll tbody,
  .table-scroll tr,
  .table-scroll td {
    display: block;
    width: 100%;
  }
  /* De basisregel zet min-width: 820px zodat brede tabellen op een groot
     scherm niet samengedrukt worden. Als kaartje moet dat er juist af,
     anders steekt de tabel ruim twee schermbreedtes uit. */
  .table-scroll table { min-width: 0; }
  .table-scroll thead { display: none; }

  .table-scroll tr {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }
  .table-scroll td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border: 0;
    text-align: right;
  }
  .table-scroll td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
  }
  /* Cellen zonder label (knoppen) vullen de volle breedte. */
  .table-scroll td:not([data-label]) { justify-content: flex-end; }
  .table-scroll td[data-label=""]::before { content: none; }

  /* Een lege tabel heeft geen kaartje nodig. De regel hierboven zet elke cel
     op flex met de tekst rechts; voor de "niets gevonden"-melding moet dat
     terug naar een gewone, gecentreerde regel. */
  .table-scroll .empty-row td,
  .table-scroll td.empty {
    display: block;
    text-align: center;
    color: var(--text-dim);
  }
  .table-scroll .empty-row td::before { content: none; }

  /* ---- dashboard ---- */
  .dept-row { grid-template-columns: 1fr; gap: 6px; }
  .compare { gap: 12px; }

  /* De grafiek krijgt eigen ruimte om opzij te schuiven in plaats van
     dat de balken onleesbaar smal worden. */
  .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart-days { min-width: 520px; }

  /* ---- formulieren ---- */
  /* Safari tekent het datumveld zelf en zet de datum in het midden van een
     hoger vak dan de rest. Links uitlijnen en dezelfde hoogte geven laat hem
     bij de andere velden horen in plaats van eruit te springen. */
  input[type="date"] {
    text-align: left;
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Op een breed scherm laat de bovenmarge van 48px het formulier zweven; op
     een telefoon is dat samen met de padding een gat van bijna 90px tussen de
     kop en het eerste veld.
     Deze .page-head-regel staat hier en niet bij de andere mobiele regels
     hierboven: het flat-thema zet later in dit bestand margin-bottom op 26px
     en zou die anders overschrijven. */
  .page-head { margin-bottom: 4px; }
  .form-card { margin-top: 6px; padding: 14px; }

  /* "Terug naar home" is een .btn en krijgt daardoor de 44px aanraakhoogte
     die alle knoppen hier hebben. De tekst staat daarin gecentreerd, dus er
     bleef een strook lege knop onder de tekst staan die als een gat oogde.
     Links uitlijnen en de hoogte alleen aan de bovenkant houden. */
  .page-head .btn-quiet {
    min-height: 0;
    padding: 4px 0 0;
    align-self: flex-start;
  }
  .form-card .form-grid { margin-top: 12px; }
  .form-actions { flex-direction: column-reverse; gap: 8px; }
  .form-actions .btn { width: 100%; }
  .size-row { flex-wrap: nowrap; }

  /* ---- paginering ---- */
  .hist-pager { gap: 10px; flex-wrap: wrap; }

  .toasts { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; max-width: none; }
}

/* Heel smalle toestellen: nog iets meer lucht weghalen. */
@media (max-width: 380px) {
  .kpi-value { font-size: 20px; }
  .login-card { padding: 24px 18px 20px; }
  main { padding: 12px 10px; }
}

/* Liggend op een telefoon: het loginscherm mag dan wél meescrollen,
   anders valt de knop onder de onderkant van het scherm. */
@media (max-height: 460px) {
  .login-screen { min-height: auto; padding: 16px; align-content: start; }
}

/* ---------- startpagina: secties ---------- */
/* Groepen worden gescheiden door witruimte en één zachte lijn, niet door
   kaders om kaders heen. */
.hub-sectie { margin-bottom: 34px; }
.hub-sectie:last-child { margin-bottom: 0; }

.hub-sectie-titel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.hub-facturatie { border-top-color: var(--stock, var(--accent)); }

/* ---------- instellingen: bedrijven ---------- */
.bedrijf-lijst { display: flex; flex-direction: column; gap: 8px; }

.bedrijf-rij {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto auto;
  align-items: center;
  gap: 10px;
}
/* Non-actief blijft leesbaar maar valt duidelijk terug. */
.bedrijf-rij.is-inactief .bedrijf-naam,
.bedrijf-rij.is-inactief .bedrijf-btw { color: var(--text-faint); }

.bedrijf-actief {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  cursor: pointer;
}
.bedrijf-actief input { width: auto; accent-color: var(--accent); cursor: pointer; }

/* ---------- facturaties ---------- */
.fact-regels { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 4px; }

/* Elke regel is één lijn; de scheiding komt van een lijn, niet van een kader. */
.fact-regel {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 150px minmax(0, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.fact-regel:last-child { border-bottom: 0; padding-bottom: 0; }
.fact-regel .fact-verwijder { margin-bottom: 2px; }

.fact-onderbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--border-soft);
}
.fact-totaal { font-size: 13px; color: var(--text-dim); }
.fact-totaal strong {
  margin-left: 8px;
  font-size: 17px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* Eigen kleur voor de facturatiebalk in de grafiek, zodat zakelijk en
   particulier in één oogopslag uit elkaar te houden zijn. */
.bar-fact { background: var(--stock, var(--accent)); }

/* Tablet en kleine laptop: vier kolommen naast elkaar wordt hier te krap -
   het bedrijf en het bedrag horen bij elkaar op de eerste regel, de notitie
   met de verwijderknop op de tweede. */
@media (min-width: 721px) and (max-width: 1024px) {
  .fact-regel {
    grid-template-columns: minmax(0, 1fr) 140px;
    grid-template-areas:
      "bedrijf bedrag"
      "notitie verwijder";
    align-items: end;
    row-gap: 10px;
  }
  .fact-regel > .field:nth-child(1) { grid-area: bedrijf; }
  .fact-regel > .field:nth-child(2) { grid-area: bedrag; }
  .fact-regel > .field:nth-child(3) { grid-area: notitie; }
  .fact-regel > .fact-verwijder { grid-area: verwijder; }

  .bedrijf-rij {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "naam btw"
      "actief verwijder";
    row-gap: 8px;
  }
  .bedrijf-rij > .bedrijf-naam { grid-area: naam; }
  .bedrijf-rij > .bedrijf-btw { grid-area: btw; }
  .bedrijf-rij > .bedrijf-actief { grid-area: actief; }
  .bedrijf-rij > .mini { grid-area: verwijder; justify-self: end; }
}

@media (max-width: 720px) {
  .hub-sectie { margin-bottom: 26px; }
  .fact-onderbalk { flex-direction: column; align-items: stretch; gap: 10px; }
  .fact-onderbalk .btn { width: 100%; }
  .fact-totaal { text-align: center; }

  /* Elke regel wordt een blokje met een eigen lijn eronder, zodat je op een
     telefoon ziet welke velden bij elkaar horen. */
  .fact-regel {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    padding-bottom: 16px;
  }
  .fact-regel .fact-verwijder { width: 100%; margin-bottom: 0; }

  .bedrijf-rij {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
  }
  .bedrijf-rij:last-child { border-bottom: 0; padding-bottom: 0; }
  .bedrijf-rij .mini { width: 100%; }
}

/* ---------- kop boven een tabelkaart ---------- */
/* De bestaande tabellen halen hun titel uit .page-head; deze kaart staat
   onder een formulier en heeft daarom een eigen kop nodig. */
.table-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.table-head h3 { font-size: 14px; font-weight: 600; }
.table-sub {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-faint);
}

@media (max-width: 720px) {
  .table-head { padding: 14px 14px 12px; }
  .table-sub { margin-top: 7px; }

  /* De totaalregel viel buiten de kaartweergave: tfoot bleef een tabelrij en
     kromp daardoor tot een smal blokje naast de kaartjes. */
  .table-scroll tfoot,
  .table-scroll tfoot tr,
  .table-scroll tfoot td {
    display: block;
    width: 100%;
  }
  .table-scroll tfoot tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
  }
  .table-scroll tfoot td { padding: 0; border: 0; background: none; }
  .table-scroll tfoot td:empty { display: none; }

  /* Meer lucht tussen de regels binnen een kaartje. */
  .table-scroll tbody tr { padding: 12px 14px; }
  .table-scroll tbody td { padding: 7px 0; line-height: 1.45; }
}

/* ---------- keuzelijsten: eigen pijl ---------- */
/* De pijl die de browser zelf tekent plakt tegen de rechterrand. Met een
   eigen pijl staat hij op een vaste afstand en oogt de lijst rustiger.
   Kleur is vast: een achtergrondafbeelding kan geen currentColor volgen. */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a4abb8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  /* Ruimte zodat een lange bedrijfsnaam niet onder de pijl doorloopt. */
  padding-right: 36px;
}
/* De pijl van Internet Explorer/Edge-legacy weghalen. */
select::-ms-expand { display: none; }

@media (max-width: 720px) {
  select { background-position: right 16px center; padding-right: 40px; }
}