/* Huisstijlfont: Agenda (Light/Medium/Bold). Dat is een commercieel font en
   mag niet worden meegeleverd, dus het wordt alleen gebruikt als het op de
   computer van de gebruiker staat. Anders valt alles terug op Barlow, dat
   hieronder is meegeleverd en qua smalle, humanistische vorm het dichtst bij
   Agenda komt. Zie public/fonts/LEESMIJ.txt. */
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/barlow-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/barlow-700.woff2') format('woff2');
}

/* Huisstijl Eliveld ICT: donkerblauw #191b38 en geel #fdc517 — de twee
   kleuren uit het logo. Donkerblauw draagt het beeld (menu, knoppen,
   koppen), geel is het accent dat de aandacht stuurt. */
:root {
  color-scheme: light;
  --font: 'Agenda', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --brand: #191b38;
  --brand-dark: #0f1128;
  --brand-light: #e8e9f0;
  --brand-contrast: #ffffff;
  --accent: #fdc517;
  --accent-dark: #d9a600;
  --accent-soft: #fff6d9;
  --accent-contrast: #191b38;
  --sidebar-bg: #191b38;
  --sidebar-hover: #2a2d54;
  --bg: #f2f3f7;
  --card: #ffffff;
  --surface2: #f8f9fc;
  --surface3: #e9eaf1;
  --hover: #f4f5fa;
  --text: #191b38;
  --muted: #626880;
  --border: #e2e4ec;
  --danger: #dc2626;
  --warning: #d97706;
  --success: #16a34a;
  --link: #0f1128;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow: 0 1px 3px rgba(25, 27, 56, 0.10), 0 1px 2px rgba(25, 27, 56, 0.05);
  --shadow-md: 0 6px 20px rgba(25, 27, 56, 0.14);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.3);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

/* Donkere modus: zelfde variabelen, andere waarden. */
html[data-theme="dark"] {
  color-scheme: dark;
  /* In het donker draagt het geel het beeld: donkerblauw valt weg tegen
     de achtergrond, dus knoppen en accenten worden geel met donkere tekst. */
  --brand: #fdc517;
  --brand-dark: #ffd450;
  --brand-contrast: #191b38;
  --brand-light: rgba(253, 197, 23, 0.16);
  --accent-soft: rgba(253, 197, 23, 0.14);
  --sidebar-bg: #12142c;
  --sidebar-hover: #23264a;
  --bg: #14162e;
  --card: #1f2244;
  --surface2: #262a4f;
  --surface3: #1a1d3a;
  --hover: rgba(253, 197, 23, 0.08);
  --text: #e7e8ef;
  --muted: #9ba1bb;
  --border: #343964;
  --link: #ffd450;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .badge.gray { background: rgba(148,163,184,.18); color: #cbd5e1; }
html[data-theme="dark"] .badge.green { background: rgba(34,197,94,.18); color: #4ade80; }
html[data-theme="dark"] .badge.red { background: rgba(239,68,68,.18); color: #f87171; }
html[data-theme="dark"] .badge.orange { background: rgba(249,115,22,.18); color: #fb923c; }
html[data-theme="dark"] .badge.blue { background: rgba(59,130,246,.18); color: #93c5fd; }
html[data-theme="dark"] .badge.teal { background: rgba(45,212,191,.18); color: #5eead4; }
html[data-theme="dark"] .tag-chip { background: rgba(253,197,23,.16); color: #fdc517; }
html[data-theme="dark"] .toast { background: #334155; }
html[data-theme="dark"] .msg.internal { background: rgba(253,197,23,.08); border-color: rgba(253,197,23,.3); }
/* Het offertedocument blijft altijd licht (print-/klantweergave). */
html[data-theme="dark"] .q-doc { background: #fff; color: #0f172a; --text: #0f172a; --muted: #64748b; --border: #e2e8f0; --surface2: #f8fafc; --brand: #191b38; --brand-dark: #0f1128; --brand-contrast: #ffffff; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  /* Barlow oogt iets kleiner dan het systeemfont bij dezelfde puntgrootte. */
  font-size: 14.5px;
}

button { font-family: inherit; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn:hover { text-decoration: none; }

/* Terugkerende tekstrollen: overal dezelfde maat, contexten hieronder mogen
   afwijken met een specifiekere regel. */
.meta { color: var(--muted); font-size: 12.5px; }
.title { font-weight: 600; }
.sub { color: var(--muted); font-size: 12.5px; }

/* Zichtbare focus voor toetsenbordgebruik. */
a:focus-visible, .btn:focus-visible, .pill:focus-visible, .tabs button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.sidebar nav a:focus-visible, .sidebar .userbox button:focus-visible, .zoek-knop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  background: var(--sidebar-bg);
  color: #b9bdd6;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 10;
}
.sidebar .logo {
  padding: 16px 16px 14px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 10px;
}
/* Het logo is donkerblauw en zou wegvallen tegen het donkere menu, dus het
   staat op een lichte drager — zo blijft elk aangeleverd logo leesbaar. */
.sidebar .logo img {
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  width: 100%;
  height: auto !important;
  max-width: none !important;
  max-height: 54px;
  object-fit: contain;
}
.sidebar .logo .mark {
  background: var(--accent);
  color: var(--accent-contrast);
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
.sidebar nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.sidebar nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  color: #b9bdd6;
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: var(--sidebar-hover); color: #fff; }
.sidebar nav a.active { background: var(--sidebar-hover); color: #fff; border-left-color: var(--accent); }
.sidebar nav a .icon { width: 20px; text-align: center; font-size: 16px; }
/* Naam met foto op de eerste regel, de knoppen eronder: naast elkaar is er
   in 220 px te weinig ruimte en werd de naam tot één letter ingekort. */
.sidebar .userbox {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
.sidebar .userbox .name { color: #fff; font-weight: 600; }
.sidebar .userbox .me {
  display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1;
  text-decoration: none; border-radius: 8px; padding: 3px 6px 3px 3px; margin-left: -3px;
}
.sidebar .userbox .me:hover { background: var(--sidebar-hover); }
/* Eén regel met puntjes: een lange naam mag de knoppen ernaast niet
   wegduwen of eroverheen lopen. */
.sidebar .userbox .me .name {
  font-size: 13px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar .userbox > span:last-child { flex-shrink: 0; }
.sidebar .userbox button {
  background: none; border: none; color: #b9bdd6; cursor: pointer; font-size: 13px;
}
.sidebar .userbox button:hover { color: #fff; text-decoration: underline; }

.main { flex: 1; margin-left: 220px; padding: 24px 28px; min-width: 0; }

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
}
.page-header h1 { font-size: 22px; font-weight: 700; }
/* Acties wijken als geheel uit naar een volgende regel in plaats van dat
   knoplabels afbreken — anders verspringt de pagina bij elke tabwissel. */
.page-header .actions {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; justify-content: flex-end; margin-left: auto;
}
.page-header .actions > * { flex: 0 0 auto; }
/* Zoekvelden in de kop hebben een vaste breedte: met width:100% zouden ze
   de knoppen naar een tweede regel duwen. */
.page-header .actions .search-input { width: 250px; }
.page-header .actions select { width: auto; min-width: 130px; }
.page-header { min-height: 46px; }

/* ---------- Components ---------- */
.btn {
  background: var(--brand); color: var(--brand-contrast, #fff);
  border: none; border-radius: 8px;
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap; /* labels breken nooit over meerdere regels */
}
.btn:hover { background: var(--brand-dark); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--bg); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #b91c1c; }
.btn.small { padding: 5px 10px; font-size: 12.5px; border-radius: var(--radius-sm); }
.btn.ghost { background: transparent; color: var(--brand-dark); }
.btn.ghost:hover { background: var(--brand-light); }

.search-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="file"], select, textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
::placeholder { color: var(--muted); opacity: .8; }
input[readonly], textarea[readonly] { background: var(--surface2); color: var(--muted); }
input.invalid, select.invalid, textarea.invalid { border-color: var(--danger); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--danger); }
.search-input { max-width: 280px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Geen overflow:hidden op de tabel zelf (dat breekt position:sticky op de
   koppen); de hoeken ronden mee via de hoekcellen en de scrollwrapper. */
table.data thead th:first-child { border-top-left-radius: var(--radius); }
table.data thead th:last-child { border-top-right-radius: var(--radius); }
table.data tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
table.data tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
table.data th, table.data td { text-align: left; padding: 11px 14px; vertical-align: middle; }
table.data th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); background: var(--surface2);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; /* kolomkoppen blijven op één regel */
}
table.data td { border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr[role="button"] { cursor: pointer; }
table.data tbody tr:nth-child(even) { background: var(--surface2); }
table.data tbody tr:hover { background: var(--hover); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data th.num { text-align: right; }

/* Knoppenrij in een tabelcel: altijd op één regel, rechts uitgelijnd, zodat
   rijen even hoog blijven ongeacht het aantal knoppen. */
.row-actions {
  display: flex; gap: 6px; flex-wrap: nowrap;
  justify-content: flex-end; align-items: center; white-space: nowrap;
}
table.data td:has(.row-actions) { width: 1%; white-space: nowrap; }
/* Past een tabel toch niet, dan schuift hij horizontaal in plaats van
   buiten de kaart te lopen. */
.table-scroll { overflow-x: auto; border-radius: var(--radius); }

/* Vaste kolombreedtes: de kolommen blijven op hun plek staan, ook als de
   inhoud verandert door filteren of bladeren. Te lange tekst wordt
   afgekapt in plaats van de kolom op te rekken. */
table.data.fixed { table-layout: fixed; }
table.data.fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.fixed td .tag-chip { vertical-align: middle; }

/* Cellen die per se op één regel horen (nummers, datums, bedragen). */
.nowrap { white-space: nowrap; }
/* Lange namen korten af in plaats van af te breken: gelijke rijhoogtes. */
.ellipsis { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Op een tabelcel mag deze class de celweergave niet omzetten naar block:
   de cel valt dan uit de kolomindeling en de kolommen schuiven in elkaar.
   De breedte komt uit de colgroup, het afkappen uit de regel hierboven. */
td.ellipsis, th.ellipsis { display: table-cell; max-width: none; }

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px; font-weight: 600;
  line-height: 1.5; vertical-align: middle;
}
.badge.dot::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: currentColor; margin-right: 5px;
}
.badge.gray { background: #f1f5f9; color: #475569; }
.badge.green { background: #dcfce7; color: #15803d; }
.badge.red { background: #fee2e2; color: #b91c1c; }
.badge.orange { background: #ffedd5; color: #c2410c; }
.badge.blue { background: #dbeafe; color: #1d4ed8; }
.badge.teal { background: #ccfbf1; color: #0f766e; }

.tag-chip {
  display: inline-block;
  background: var(--brand-light); color: var(--brand-dark);
  border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; font-weight: 600;
  margin-right: 4px;
}

.empty {
  text-align: center; color: var(--muted); padding: 40px 20px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}

.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 14px; color: var(--muted); font-size: 13px; }

/* ---------- Dashboard ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px;
}
.stat .label { color: var(--muted); font-size: 13px; font-weight: 600; }
.stat .value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.stat .sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
/* Kolomindeling in plaats van een raster: de kaarten verschillen sterk in
   hoogte, en in een raster laat een korte kaart een gat achter tot de hoogste
   kaart in dezelfde rij. Kolommen schuiven de volgende kaart gewoon door. */
.dash-cols { columns: 2; column-gap: 16px; }
.dash-cols > * { break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 1000px) { .dash-cols { columns: 1; } }
.card h2 { font-size: 15px; margin-bottom: 12px; }
.list-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border); gap: 10px;
}
.list-row:last-child { border-bottom: none; }
.list-row .title { font-weight: 600; }
.list-row .meta { color: var(--muted); font-size: 12.5px; }
.list-row a { color: var(--brand-dark); text-decoration: none; }
.list-row a:hover { text-decoration: underline; }

/* ---------- Timeline ---------- */
.note-form { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.note-form textarea { flex: 1; }
.timeline-list { margin-top: 4px; }
.timeline-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item .ico { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; margin-top: 1px; }
.timeline-item .what { flex: 1; min-width: 0; }
.timeline-item .lbl { font-weight: 600; }
.timeline-item .txt { white-space: pre-wrap; }
.timeline-item .meta { color: var(--muted); font-size: 12px; margin-top: 3px; }
.timeline-item .rm { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.timeline-item .rm:hover { color: var(--danger); }

/* ---------- Stale deal indicators ---------- */
.deal-card .stale, .stale { color: var(--warning); font-size: 12px; font-weight: 600; margin-top: 4px; }
.deal-card .stale.bad, .stale.bad { color: var(--danger); }
.stale-card { border-left: 4px solid var(--warning); }

/* ---------- Vandaag-blok op het dashboard ---------- */
.today-card { border-left: 4px solid var(--brand); }
.today-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
@media (max-width: 900px) { .today-grid { grid-template-columns: 1fr; gap: 10px; } }
.today-col { min-width: 0; }
.today-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
  padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.today-col .list-row { padding: 7px 0; }
.today-col .title { font-size: 14px; }

/* ---------- Kanban ---------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kanban-col {
  background: var(--surface3);
  border-radius: var(--radius);
  min-width: 260px; width: 260px;
  flex-shrink: 0;
  padding: 10px;
}
.kanban-col h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); padding: 4px 6px 10px;
  display: flex; justify-content: space-between;
}
.kanban-col.drag-over { outline: 2px dashed var(--brand); outline-offset: -4px; }
.deal-card {
  background: var(--card); border-radius: 8px; box-shadow: var(--shadow);
  padding: 10px 12px; margin-bottom: 8px; cursor: grab;
}
.deal-card .t { font-weight: 600; margin-bottom: 3px; }
.deal-card .v { color: var(--brand-dark); font-weight: 700; font-size: 13px; }
.deal-card .c { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.deal-card.dragging { opacity: 0.5; }

/* ---------- Detail / forms ---------- */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.field-list dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 12px; }
.field-list dd { margin-top: 3px; font-size: 14px; }
.field-list dt:first-child { margin-top: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; z-index: 100; overflow-y: auto;
}
.modal {
  background: var(--card); border-radius: var(--radius-lg);
  width: 100%; max-width: 640px;
  box-shadow: var(--shadow-lg);
}
.modal.wide { max-width: 980px; }
.modal header {
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.modal header h2 { font-size: 17px; }
.modal header .close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted); }
.modal .body { padding: 20px 22px; }
.modal footer {
  padding: 14px 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ---------- Lines editor ---------- */
.lines-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.lines-table th { text-align: left; font-size: 12px; color: var(--muted); padding: 4px 6px; }
.lines-table td { padding: 4px 6px; vertical-align: top; }
.lines-table input, .lines-table select { padding: 6px 8px; font-size: 13px; }
.lines-table .rm { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; }
.totals { text-align: right; margin-top: 10px; font-size: 14px; }
.totals .grand { font-size: 16px; font-weight: 700; }

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #0f172a; color: #fff; padding: 11px 18px; border-radius: 8px;
  box-shadow: var(--shadow); font-size: 14px;
  animation: toast-in 0.2s ease-out;
}
.toast.error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #191b38 0%, #2f3466 100%);
}
.login-card {
  background: var(--card); border-radius: 16px; padding: 36px;
  width: 100%; max-width: 380px; box-shadow: var(--shadow-lg);
}
.login-card .logo { font-size: 24px; font-weight: 800; margin-bottom: 4px; color: var(--brand-dark); }
.login-card .sub { color: var(--muted); font-size: 14.5px; margin-bottom: 24px; }
.login-card label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
.login-card .btn { width: 100%; margin-top: 20px; padding: 11px; }
.login-card .hint { margin-top: 18px; font-size: 12.5px; color: var(--muted); background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.login-error { color: var(--danger); font-size: 13px; margin-top: 12px; }

/* ---------- Tabs ---------- */
/* Scrollt horizontaal als de tabs niet passen; de onderlijn is een inset-
   schaduw zodat hij binnen de scrollcontainer zichtbaar blijft. */
.tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  overflow-x: auto; scrollbar-width: none;
  box-shadow: inset 0 -2px 0 var(--border);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: none; border: none; padding: 9px 16px; font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent;
}
.tabs button.active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.tabs button { white-space: nowrap; }
/* Vaste minimumhoogte onder de tabs: wisselen van tab (of het laadmoment)
   laat de pagina niet meer op- en neerspringen. */
.tab-panel { min-height: 360px; }

.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }

code.token { background: var(--bg); padding: 3px 8px; border-radius: var(--radius-sm); font-size: 13px; }

/* ---------- Ticket conversation ---------- */
.msg {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card);
}
.msg.customer { background: var(--surface2); }
.msg.reply { border-left: 3px solid var(--brand); }
.msg.internal { background: #fefce8; border-color: #fde68a; }
.msg-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-weight: 600; font-size: 13px; margin-bottom: 6px;
}
.msg-time { color: var(--muted); font-weight: 400; font-size: 12px; }
.msg-body { white-space: pre-wrap; line-height: 1.5; }
.msg-body.rich { white-space: normal; }
.msg-body.rich ul, .msg-body.rich ol { margin: 4px 0 4px 20px; }
.msg-body.rich p { margin: 0 0 6px; }
/* Naar wie een reactie is gemaild, onder het bericht zelf. */
.msg-mail {
  margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--muted); word-break: break-word;
}
.msg-mail strong { color: var(--text); font-weight: 600; }
/* Geciteerde/gequote tekst die bij het verwerken van de mail is weggeknipt,
   maar wel bewaard blijft — uitklapbaar per bericht. */
.msg-quoted-toggle {
  margin-top: 6px; font-size: 12px; color: var(--muted); background: none;
  border: none; padding: 0; cursor: pointer; text-decoration: underline;
}
.msg-quoted-toggle:hover { color: var(--text); }
.msg-quoted {
  margin-top: 8px; padding-top: 7px; padding-left: 10px;
  border-top: 1px dashed var(--border); border-left: 2px solid var(--border);
  color: var(--muted); white-space: pre-wrap; line-height: 1.5; font-size: 13px;
}
/* Adresvelden onder het antwoordvak; verschijnen zodra "ook mailen" aan staat. */
.mail-fields { margin-top: 10px; padding: 12px; background: var(--surface2); border-radius: 8px; }
.mail-fields .q-label { display: block; margin-bottom: 3px; }

/* ---------- Autocomplete ---------- */
.ac { position: relative; }
.ac input.ac-selected { border-color: var(--brand); background: var(--brand-light); font-weight: 600; }
.ac-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-md); max-height: 264px; overflow-y: auto;
}
.ac-item { padding: 8px 12px; cursor: pointer; }
.ac-item:hover, .ac-item.active { background: var(--hover); }
.ac-label { font-weight: 600; font-size: 13.5px; }
.ac-sub { color: var(--muted); font-size: 12px; }

/* ---------- Opgemaakte AI-tekst ---------- */
.md { line-height: 1.6; }
.md > *:first-child { margin-top: 0; }
.md p { margin: 0 0 8px; }
.md h3, .md h4 { font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
.md h3:first-child, .md h4:first-child { margin-top: 0; }
.md ul { margin: 0 0 10px; padding-left: 20px; }
.md li { margin-bottom: 4px; }
.md li::marker { color: var(--brand-dark); }
.md strong { font-weight: 700; }

/* ---------- Weekbriefing ---------- */
.briefing-card { border-left: 4px solid var(--brand-dark); }
.briefing-text { margin-top: 12px; font-size: 14.5px; }
/* Elke bullet als eigen regel met wat lucht, zodat de briefing scanbaar is. */
.briefing-text ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.briefing-text li {
  position: relative; padding: 7px 0 7px 22px; margin: 0;
  border-bottom: 1px solid var(--border);
}
.briefing-text li:last-child { border-bottom: 0; }
.briefing-text li::before {
  content: ''; position: absolute; left: 4px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-dark);
}
.briefing-text > p:last-child { margin-bottom: 0; padding-top: 10px; color: var(--muted); }
.briefing-leeg { margin-top: 10px; max-width: 70ch; }

/* ---------- Aan/uit-schakelaar ---------- */
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track {
  width: 38px; height: 22px; border-radius: 999px; background: var(--border);
  position: relative; transition: background .15s; flex: 0 0 auto;
}
.toggle .track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .3);
}
.toggle input:checked + .track { background: var(--success); }
.toggle input:checked + .track::after { transform: translateX(16px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--brand); outline-offset: 2px; }
.toggle .lbl { font-size: 13px; color: var(--muted); }
.toggle input:checked ~ .lbl { color: var(--text); font-weight: 600; }

/* ---------- Contactpersonen bij een bedrijf ---------- */
.person-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.person-row:last-child { border-bottom: none; }
.person-row .who { flex: 1; min-width: 0; }
.person-row .who .name { font-weight: 600; }
.person-row .who .sub { color: var(--muted); font-size: 12.5px; }
.person-row .role { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.person-row select { width: 165px; }

/* ---------- Keuze-pills ---------- */
.pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.pill:hover { border-color: var(--brand); }
.pill.active { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast, #fff); }
.pill.ghost { border-style: dashed; color: var(--muted); background: transparent; }
.pill.ghost:hover { color: var(--brand-dark); }

/* ---------- Mini rich-text editor ---------- */
.rte { border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.rte:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.rte-toolbar { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.rte-btn {
  background: none; border: none; border-radius: 6px; padding: 3px 10px;
  cursor: pointer; font-size: 13px; color: var(--text); font-weight: 700;
}
.rte-btn:hover { background: var(--hover); }
.rte-area { min-height: 96px; padding: 10px 12px; outline: none; font-size: 14px; line-height: 1.5; }
.rte-area:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.rte-area ul, .rte-area ol { margin: 4px 0 4px 20px; }

/* ---------- Quotation document ---------- */
.q-doc { max-width: 860px; padding: 32px 40px; }
.q-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.q-type { font-size: 12px; letter-spacing: 3px; color: var(--brand-dark); font-weight: 700; }
.q-number { font-size: 24px; font-weight: 800; margin-top: 2px; }
.q-title { color: var(--muted); margin-top: 4px; font-size: 15px; }
.q-from { text-align: right; font-size: 13px; color: var(--muted); }
.q-from strong { color: var(--text); font-size: 14px; }
.q-meta {
  display: flex; gap: 40px; padding: 14px 0; margin-bottom: 18px;
  border-top: 2px solid var(--brand); border-bottom: 1px solid var(--border);
}
.q-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 3px; }
.q-text { margin: 14px 0; white-space: pre-wrap; line-height: 1.55; }
.q-section { margin-top: 18px; }
.q-section h3 { font-size: 14px; margin-bottom: 8px; color: var(--brand-dark); }
.q-table { box-shadow: none; border: 1px solid var(--border); }
/* Klantdocument: geen zebra in de regeltabel. */
table.data.q-table tbody tr:nth-child(even) { background: transparent; }
.q-doc .totals { margin-top: 18px; }

/* ---------- Print (Afdrukken / PDF) ---------- */
@media print {
  .sidebar, .no-print, .page-header, #toast-root, #modal-root { display: none !important; }
  .main { margin-left: 0; padding: 0; }
  body { background: #fff; }
  .card, .q-doc { box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
}

/* ---------- Sortable table headers ---------- */
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--brand-dark); }
table.data th.sortable .dir { margin-left: 4px; }

/* ---------- Sidebar timer widget ---------- */
.sidebar .timerbox {
  margin: 10px 14px;
  background: rgba(253, 197, 23, 0.10);
  border: 1px solid rgba(253, 197, 23, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #b9bdd6;
}
.sidebar .timerbox .elapsed {
  font-size: 17px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.sidebar .timerbox .desc {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 2px 0 8px;
}
.sidebar .timerbox .stop {
  background: var(--danger); color: #fff; border: none; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}

/* ---------- Command palette (Cmd+K) ---------- */
.palette-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; z-index: 300;
}
.palette {
  width: 100%; max-width: 560px;
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.palette input {
  border: none; border-radius: 0; border-bottom: 1px solid var(--border);
  padding: 15px 18px; font-size: 16px; background: var(--card);
}
.palette input:focus { outline: none; }
.palette .results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.palette .result {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
}
.palette .result .ico { width: 22px; text-align: center; }
.palette .result .what { flex: 1; min-width: 0; }
.palette .result .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette .result .s { color: var(--muted); font-size: 12.5px; }
.palette .result.active { background: var(--brand-light); }
.palette .hint {
  padding: 8px 16px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 12px; display: flex; gap: 14px;
}

/* ---------- Copyable contact details ---------- */
.copyable { display: inline-flex; align-items: center; gap: 6px; }
.copyable a { color: var(--brand-dark); text-decoration: none; }
.copyable a:hover { text-decoration: underline; }
.copy-btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 13px; padding: 1px 4px; border-radius: 4px;
}
.copy-btn:hover { color: var(--brand-dark); background: var(--brand-light); }

/* ---------- SVG mini charts ---------- */
.chart-bars { width: 100%; }
.chart-bars .bar-bg { fill: var(--surface3); }
.chart-bars .bar-fill { fill: var(--brand); }
.chart-bars text { fill: var(--text); font-size: 11px; }
.chart-bars text.val { fill: var(--muted); }

/* ---------- Mobiel ---------- */
.menu-btn {
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 30;
  background: var(--sidebar-bg); color: #fff; border: none;
  border-radius: 10px; width: 42px; height: 42px; font-size: 19px; cursor: pointer;
  box-shadow: var(--shadow);
}
.sidebar-overlay { display: none; }
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; width: 250px; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-overlay {
    display: block; position: fixed; inset: 0; z-index: 9;
    background: rgba(15, 23, 42, 0.45);
  }
  .main { margin-left: 0; padding: 64px 14px 20px; }
  .page-header h1 { font-size: 19px; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .q-doc { padding: 20px 16px; }
}

/* ---------- SVG icons & avatars ---------- */
.svgicon { vertical-align: -3px; flex-shrink: 0; }
.sidebar nav a .svgicon { width: 19px; height: 19px; }
h2 .svgicon { margin-right: 7px; vertical-align: -3.5px; color: var(--brand-dark); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700; letter-spacing: 0.3px;
  flex-shrink: 0; user-select: none;
}
/* Met profielfoto: de foto vult de cirkel, initialen vervallen. */
.avatar.photo { background-size: cover; background-position: center; color: transparent; }

/* ---------- Mijn profiel ---------- */
.profile-photo {
  width: 96px; height: 96px; border-radius: 50%;
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 34px; user-select: none;
  border: 3px solid var(--card); box-shadow: var(--shadow);
}
.profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.signature-preview {
  white-space: pre-wrap; font-size: 13.5px; line-height: 1.5;
  background: var(--surface2); border-radius: 8px; padding: 12px 14px;
  border-left: 3px solid var(--accent); color: var(--text);
}

/* ---------- Skeleton loaders (pure CSS on .loading) ---------- */
/* De laadtekst blijft zichtbaar: gedempt onder de skeletonbalken (de balken
   staan via order vóór de tekst). */
.loading {
  display: flex; flex-direction: column;
  text-align: left; padding: 18px 20px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--muted); font-size: 13px;
}
.loading::before, .loading::after {
  content: ''; display: block; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface3) 25%, var(--surface2) 50%, var(--surface3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
}
.loading::before { order: -2; width: 38%; height: 16px; margin-bottom: 14px; }
.loading::after { order: -1; width: 100%; height: 110px; margin-bottom: 10px; }
.loading.card::after { height: 64px; }
.loading.table::before { width: 26%; }
.loading.table::after { height: 200px; }
.loading.list::before { display: none; }
.loading.list::after { height: 140px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .loading::before, .loading::after { animation: none; }
}

/* ---------- Micro-animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .stat, .deal-card { transition: transform 0.12s ease, box-shadow 0.12s ease; }
  .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .deal-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .deal-card.dragging { transform: rotate(2deg) scale(1.02); }
  .btn { transition: background 0.15s, transform 0.06s; }
  .btn:active { transform: scale(0.97); }
  .modal { animation: modal-in 0.16s ease-out; }
  .modal-backdrop { animation: fade-in 0.16s ease-out; }
  .palette { animation: modal-in 0.14s ease-out; }
  main.main > * { animation: fade-in 0.18s ease-out; }
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Compact table density ---------- */
body.density-compact table.data th, body.density-compact table.data td { padding: 6px 10px; font-size: 13px; }
body.density-compact .list-row { padding: 5px 0; }
body.density-compact .card { padding: 13px 15px; }
body.density-compact .stat { padding: 12px 14px; }
body.density-compact .form-grid { gap: 8px 10px; }

/* ---------- Kanban phase accents ---------- */
.kanban-col { border-top: 3px solid var(--phase-color, var(--brand)); }
.kanban-col h3 .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--phase-color, var(--brand)); margin-right: 6px;
}
.kanban-col .add-in-col {
  width: 100%; border: 1px dashed var(--border); background: none; color: var(--muted);
  border-radius: 8px; padding: 6px; cursor: pointer; font-size: 13px;
}
.kanban-col .add-in-col:hover { color: var(--brand-dark); border-color: var(--brand); }
/* Afsluitkolommen (Gewonnen/Verloren): gedempt naast de open fases. */
.kanban-col-closed { background: var(--surface2); }
.kanban-col-closed h3 { opacity: .8; }
.deal-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

/* ---------- Company page tabs ---------- */
.entity-header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; margin-bottom: 16px;
}
.entity-header .who { flex: 1; min-width: 200px; }
.entity-header h1 { font-size: 21px; }
.entity-header .meta { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ---------- Agenda week grid ---------- */
.week-grid {
  display: grid; grid-template-columns: 52px repeat(7, 1fr);
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.week-grid .day-head {
  padding: 9px 6px; text-align: center; font-size: 12.5px; font-weight: 600;
  border-bottom: 1px solid var(--border); border-left: 1px solid var(--border);
  color: var(--muted);
}
.week-grid .day-head.today { color: var(--brand-dark); background: var(--brand-light); }
.week-grid .time-col { border-bottom: 1px solid var(--border); }
.week-grid .time-label {
  height: 44px; font-size: 11px; color: var(--muted); text-align: right;
  padding: 2px 6px 0 0; box-sizing: border-box;
}
.week-grid .day-col {
  position: relative; border-left: 1px solid var(--border); cursor: pointer;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 43px, var(--border) 43px, var(--border) 44px);
}
.week-grid .day-col.today { background-color: var(--hover); }
.week-grid .event {
  position: absolute; left: 3px; right: 3px;
  background: var(--brand); color: var(--brand-contrast); border-radius: var(--radius-sm);
  padding: 3px 6px; font-size: 11.5px; overflow: hidden; cursor: default;
  box-shadow: var(--shadow); z-index: 2;
}
.week-grid .event .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-grid .event .x {
  position: absolute; top: 1px; right: 4px; cursor: pointer; opacity: 0.75; background: none; border: none; color: var(--brand-contrast);
}
.week-grid .event .x:hover { opacity: 1; }

/* ---------- Quotation document themes ---------- */
.q-doc.q-theme-modern { border-top: 12px solid var(--brand); }
.q-doc.q-theme-modern .q-head {
  background: var(--brand); margin: -32px -40px 24px; padding: 26px 40px 20px;
}
.q-doc.q-theme-modern .q-head .q-type { color: rgba(255,255,255,0.85); }
.q-doc.q-theme-modern .q-head .q-number, .q-doc.q-theme-modern .q-head .q-title { color: #fff; }
.q-doc.q-theme-modern .q-head .q-from, .q-doc.q-theme-modern .q-head .q-from strong { color: rgba(255,255,255,0.92); }
.q-doc.q-theme-minimal .q-type { color: #555; letter-spacing: 5px; }
.q-doc.q-theme-minimal .q-meta { border-top-color: #0f172a; }
.q-doc.q-theme-eliveld { font-family: var(--font); }
.q-doc.q-theme-eliveld .q-head {
  background: #191b38; margin: -32px -40px 24px; padding: 28px 40px 24px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.q-doc.q-theme-eliveld .q-type { color: #fdc517; letter-spacing: 4px; }
.q-doc.q-theme-eliveld .q-head .q-number { color: #fff; }
.q-doc.q-theme-eliveld .q-head .q-title { color: rgba(255,255,255,0.78); }
.q-doc.q-theme-eliveld .q-head .q-from { color: rgba(255,255,255,0.75); }
.q-doc.q-theme-eliveld .q-head .q-from strong { color: #fff; }
/* Donkere koppen: het logo op een lichte drager, anders valt een
   donker logo weg tegen de achtergrond. */
.q-doc.q-theme-eliveld .q-head .q-from img,
.q-doc.q-theme-modern .q-head .q-from img { background: #fff; padding: 7px 11px; border-radius: 8px; }
.q-doc.q-theme-eliveld .q-meta { border-top: 3px solid #fdc517; }
.q-doc.q-theme-eliveld .q-section h3 {
  color: #191b38; text-transform: uppercase; font-size: 13px; letter-spacing: 1px;
  border-left: 4px solid #fdc517; padding-left: 9px;
}
.q-doc.q-theme-eliveld .q-table th { background: #191b38; color: rgba(255,255,255,0.92); }
.q-doc.q-theme-minimal .q-section h3 { color: #0f172a; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
.q-doc.q-theme-minimal .q-table th { background: #fff; border-bottom: 2px solid #0f172a; }

/* ---------- Factuurregels (Inkomsten) ---------- */
/* Compacte invoertabel: de velden vullen hun cel, zodat er zoveel mogelijk
   regels tegelijk zichtbaar blijven. */
table.data.lines th { font-size: 11px; }
table.data.lines td { padding: 5px 6px; }
table.data.lines tbody tr { cursor: default; }
table.data.lines tbody tr:nth-child(even) { background: transparent; }
table.data.lines tbody tr:hover { background: transparent; }
table.data.lines input, table.data.lines select {
  padding: 5px 8px; font-size: 13px; border-radius: 6px; min-width: 0;
}
/* De suggestielijst van het artikelveld moet buiten de tabel kunnen vallen. */
.lines-wrap { overflow: visible; }
table.data.lines { overflow: visible; }
table.data.lines td:nth-child(1) { width: 190px; }
/* Breder dan de kolom: artikelnamen passen zo op één regel. */
table.data.lines .ac-list { min-width: 320px; }
table.data.lines td:nth-child(3) { width: 90px; }
table.data.lines td:nth-child(4) { width: 90px; }
table.data.lines td:nth-child(5) { width: 110px; }
table.data.lines td:nth-child(6) { width: 80px; }
table.data.lines td:nth-child(7) { width: 80px; }
table.data.lines td:nth-child(8) { width: 90px; white-space: nowrap; }
table.data.lines td:last-child { width: 40px; }
/* De contractregels hebben een kolom extra (ingangsdatum); zonder eigen
   breedtes slokt "aantal" de vrije ruimte op en blijft er voor de
   omschrijving niets over. */
table.data.lines.contract-lines td:nth-child(1) { width: auto; min-width: 230px; }
table.data.lines.contract-lines td:nth-child(2) { width: 70px; }
table.data.lines.contract-lines td:nth-child(4) { width: 112px; }
table.data.lines.contract-lines td:nth-child(5) { width: 132px; }

/* Zoeken over alles heen. Staat bovenaan het menu en opent met Ctrl+K; bij een
   servicedesk begint elk gesprek met een code of een nummer. */
.zoek-knop {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 10px; padding: 8px 12px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px; color: inherit; cursor: pointer;
  font: inherit; font-size: 13.5px; text-align: left;
}
.zoek-knop:hover { background: rgba(255,255,255,0.13); }
.zoek-knop .icon { display: flex; opacity: 0.75; }
.zoek-knop kbd {
  margin-left: auto; font: inherit; font-size: 11px; opacity: 0.6;
  border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px;
}

/* ---------- Modulair dashboard (versleepbaar raster) ---------- */
.dash-grid { position: relative; width: 100%; min-height: 200px; }
.dash-widget { position: absolute; box-sizing: border-box; }
.dash-widget .dw-body { height: 100%; }
.dash-widget .dw-body > .card { height: 100%; margin: 0; overflow: auto; }
.dash-grid.editing .dash-widget { outline: 2px dashed var(--border); border-radius: var(--radius); }
.dash-grid.editing .dw-body { pointer-events: none; }
.dw-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 3px 8px; font-size: 11.5px; font-weight: 600; color: var(--brand-contrast);
  background: var(--brand-dark, #191b38); border-radius: var(--radius) var(--radius) 0 0;
}
.dw-drag { cursor: move; user-select: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-x { cursor: pointer; border: none; background: none; color: var(--brand-contrast); font-size: 13px; line-height: 1; padding: 2px 4px; }
.dw-x:hover { color: #fca5a5; }
.dw-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; z-index: 3;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--brand, #191b38) 50%);
  border-radius: 0 0 var(--radius) 0;
}
.dash-widget.dragging, .dash-widget.resizing { z-index: 20; box-shadow: var(--shadow-md); opacity: .92; }

/* ---------------- UX-helpers: teruglink, menugroep, verplicht, focus ------ */
.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); text-decoration: none;
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
}
.back-link:hover { color: var(--brand-dark); }
.nav-group {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); opacity: .7; padding: 14px 12px 4px; user-select: none;
}
nav .nav-group:first-child { padding-top: 2px; }
label .req { color: var(--danger); font-weight: 700; }
/* Herbruikbare mini-KPI en muted-tekst, zodat losse inline-styles kunnen
   verdwijnen en tegels overal dezelfde maat krijgen. */
.metric { min-width: 88px; }
.metric .metric-value { font-size: 22px; font-weight: 700; line-height: 1.15; }
.metric .metric-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.muted { color: var(--muted); }
/* Zichtbare focus voor toetsenbord-navigatie op klikbare rijen en kaarten. */
tr[role="button"]:focus-visible,
[role="button"][tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* ---------- Meldingsblok (callout) ---------- */
.notice {
  padding: 11px 14px; margin-bottom: 12px;
  background: var(--surface2); border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm); font-size: 13.5px;
}
.notice.success { border-left-color: var(--success); background: rgba(22,163,74,.08); }
.notice.warning { border-left-color: var(--warning); background: rgba(217,119,6,.08); }
.notice.danger { border-left-color: var(--danger); background: rgba(220,38,38,.08); }

/* ---------- Voortgangsbalk ---------- */
.progress {
  height: 8px; border-radius: 999px;
  background: var(--surface3); overflow: hidden;
}
.progress > * {
  display: block; height: 100%; width: 0;
  background: var(--brand); border-radius: 999px;
  transition: width .2s ease;
}

/* ---------- Spacing-utilities ---------- */
.stack > * + * { margin-top: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }