:root {
  --navy: #1a3c6e;
  --navy-dark: #122a4e;
  --navy-light: #eaf0fa;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --text: #171923;
  --text-muted: #6b7280;
  --success-bg: #e6f6ec;
  --success-text: #1e7d43;
  --warning-bg: #fff4de;
  --warning-text: #92640a;
  --danger-text: #b3261e;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-md: 0 2px 8px rgba(16,24,40,0.07);
  --shadow-lg: 0 8px 28px rgba(16,24,40,0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3 { letter-spacing: -0.01em; }

button, .btn-primary, .btn-secondary, a.btn-secondary {
  font-family: inherit; cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
button:active, .btn-primary:active, .btn-secondary:active { transform: scale(0.98); }

.hidden { display: none !important; }

/* --- Setup scherm (eenmalig, API-adres instellen) --- */
.setup-overlay {
  position: fixed; inset: 0;
  background: var(--navy-dark);
  display: flex; align-items: center; justify-content: center;
}
.setup-kaart {
  background: var(--surface); border-radius: 12px; padding: 32px;
  width: 360px; box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.setup-kaart h1 { font-size: 20px; margin: 0 0 4px; color: var(--navy); }
.setup-uitleg { color: var(--text-muted); font-size: 13px; margin: 0 0 20px; }
.setup-kaart label { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 4px; color: var(--text-muted); }
.setup-kaart input { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
.setup-kaart button { margin-top: 20px; width: 100%; }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 16px; background: var(--bg); border-radius: 6px; padding: 3px; }
.auth-tab { flex: 1; background: none; border: none; padding: 8px; border-radius: 5px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.auth-tab.active { background: var(--surface); color: var(--navy); font-weight: 600; }
.setup-kaart .hint a { color: var(--navy); }
#org-switcher { flex: 1; background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.sidebar-footer { margin-top: auto; padding: 12px 8px; display: flex; flex-direction: column; gap: 6px; }
.sidebar { display: flex; flex-direction: column; }

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

.sidebar {
  width: 224px; background: var(--navy-dark); color: white;
  display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar-logo {
  padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: center;
}
/* Geen achtergrondkleur en 'contain' i.p.v. 'cover': een logo met transparante
   achtergrond blijft zo transparant, en wordt niet bijgesneden. */
.sidebar-logo img { max-width: 140px; max-height: 56px; width: auto; height: auto; object-fit: contain; }
.sidebar nav { display: flex; flex-direction: column; padding: 14px 10px; gap: 2px; }
.nav-item {
  background: none; border: none; color: rgba(255,255,255,0.72);
  text-align: left; padding: 10px 14px; border-radius: 8px; font-size: 14px;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: rgba(255,255,255,0.08); color: white; }
.nav-item.active { background: rgba(255,255,255,0.14); color: white; font-weight: 500; }

.content { flex: 1; padding: 28px 40px; max-width: 1400px; }

.content-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.content-header h2 { margin: 0; font-size: 21px; font-weight: 600; }

.header-acties { display: flex; gap: 8px; }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* --- Buttons --- */
button, .btn-primary, .btn-secondary {
  font-family: inherit; font-size: 13px;
  border-radius: 8px; padding: 9px 15px; border: none;
}
.btn-primary { background: var(--navy); color: white; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy-dark); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--navy-light); border-color: var(--navy); color: var(--navy); }

/* --- Kaarten (dashboard) --- */
.kaarten-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
}
.kaart {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s;
}
.kaart-label { font-size: 12px; color: var(--text-muted); margin: 0 0 6px; }
.kaart-waarde { font-size: 25px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.kaart.accent { background: var(--navy-light); border-color: transparent; }
.kaart.accent .kaart-waarde { color: var(--navy); }

/* --- Tabellen --- */
.data-tabel {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.data-tabel th {
  text-align: left; font-size: 11.5px; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: #fafbfc;
}
.data-tabel td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.data-tabel tr:last-child td { border-bottom: none; }
.data-tabel tr:hover td { background: #fafbfc; }

.status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  text-transform: lowercase;
}
.status-badge.betaald, .status-badge.geaccepteerd { background: var(--success-bg); color: var(--success-text); }
.status-badge.verzonden, .status-badge.concept { background: var(--warning-bg); color: var(--warning-text); }
.status-badge.te_laat, .status-badge.verlopen { background: #fdeaea; color: var(--danger-text); }

/* --- Formulieren / instellingen --- */
.instellingen-form, .modal-form {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 32px; max-width: 640px; box-shadow: var(--shadow-sm);
}
.instellingen-form label, .modal-form label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 14px 0 4px;
}
.instellingen-form label:first-of-type { margin-top: 0; }
.instellingen-form input, .modal-form input, .modal-form select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px;
  transition: border-color 0.12s, box-shadow 0.12s; background: var(--surface); color: var(--text);
}
.instellingen-form input:focus, .modal-form input:focus, .modal-form select:focus,
.instellingen-form select:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-light);
}
.form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 16px; }
.checkbox-label input { width: auto; }
.instellingen-form button, .modal-form button { margin-top: 20px; }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

.kleur-kiezer-rij { display: flex; align-items: center; gap: 10px; }
.kleur-kiezer-rij input[type="color"] { width: 48px; height: 38px; padding: 2px; cursor: pointer; }
.kleur-hex {
  font-family: ui-monospace, monospace; font-size: 13px; color: var(--text-muted);
  background: var(--bg); padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border);
}
.klant-type-toggle { display: flex; gap: 16px; margin-bottom: 4px; }
.klant-type-toggle label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; }
.klant-type-toggle input { width: auto; }

/* ============ RESPONSIVE ============ */
.mobiel-menu-knop {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 60;
  width: 40px; height: 40px; border-radius: 8px; background: var(--navy-dark);
  color: white; border: none; font-size: 18px; cursor: pointer;
}
.mobiel-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 45;
}

@media (max-width: 900px) {
  .mobiel-menu-knop { display: block; }
  .app { position: relative; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: 240px; transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .mobiel-overlay.zichtbaar { display: block; }

  .content { padding: 70px 16px 24px; max-width: 100%; }
  .content-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .header-acties { flex-wrap: wrap; }

  .kaarten-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kaart-waarde { font-size: 19px; }

  .data-tabel { display: block; overflow-x: auto; white-space: nowrap; }

  .document-formulier, .instellingen-form, .modal-form, .detail-paneel { padding: 18px; }
  .form-rij { grid-template-columns: 1fr; }
  .regel-rij-velden { grid-template-columns: 1fr; gap: 6px; }
  .regel-rij { flex-direction: column; align-items: stretch; }

  .lijst-filters { flex-direction: column; align-items: stretch; }
  .zoekveld { max-width: 100%; }

  .setup-kaart { width: 90%; margin: 0 16px; }

  .modal-overlay { padding: 12px; }
  .modal-kaart { width: 100%; }
}

@media (max-width: 480px) {
  .kaarten-grid { grid-template-columns: 1fr; }
  .logo-upload-blok { flex-direction: column; align-items: flex-start; }
}

/* --- Nieuw dashboard: actie-kaarten en tabs --- */
.actie-kaarten-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin: 16px 0 24px;
}
.actie-kaart {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; transition: border-color 0.15s;
}
.actie-kaart:hover { border-color: var(--navy); }
.actie-kaart-titel { font-size: 13px; font-weight: 600; margin: 0; }
.actie-kaart-sub { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }
.actie-kaart-icoon { font-size: 20px; }
.actie-kaart-icoon.waarschuwing { color: #b45309; }
.actie-kaart-icoon.gevaar { color: var(--danger-text); }
.actie-kaart-icoon.info { color: var(--navy); }

.dash-tabs-blok { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dash-tabs-koppen { display: flex; border-bottom: 1px solid var(--border); }
.dash-tab-knop {
  flex: 1; padding: 10px; font-size: 13px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent;
}
.dash-tab-knop.actief { background: var(--bg); color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }
.dash-tab-rij {
  display: flex; justify-content: space-between; padding: 10px 16px; font-size: 13px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.dash-tab-rij:last-child { border-bottom: none; }
.dash-tab-rij:hover { background: var(--bg); }
.dash-tab-leeg { padding: 20px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* --- Eigen bevestig-/meldingsvenster (i.p.v. confirm()/alert()) --- */
.bevestig-kaart {
  max-width: 420px; text-align: left;
  background: var(--surface); border-radius: 16px; padding: 26px 28px;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.bevestig-titel { font-size: 17px; font-weight: 600; margin: 0 0 10px; color: var(--text); }
.bevestig-tekst { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin: 0 0 22px; }
.bevestig-acties { display: flex; justify-content: flex-end; gap: 8px; }
.bevestig-acties .btn-primary.gevaar { background: var(--danger-text); }
.bevestig-acties .btn-primary.gevaar:hover { background: #8f1f19; }

/* --- Skeleton-laadstatus --- */
.skeleton-rij td { padding: 12px 14px; }
.skeleton-blok {
  height: 14px; border-radius: 4px; background: linear-gradient(90deg, #eceef1 25%, #f5f6f8 50%, #eceef1 75%);
  background-size: 200% 100%; animation: skeleton-schuiven 1.4s ease-in-out infinite;
}
@keyframes skeleton-schuiven { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- Paginering --- */
.paginering {
  display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 13px;
  color: var(--text-secondary);
}
.paginering-knoppen { display: flex; gap: 6px; }
.paginering-knoppen button:disabled { opacity: 0.4; cursor: not-allowed; }

.logo-upload-blok { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.logo-preview {
  width: 64px; height: 64px; border: 1px dashed var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted);
  overflow: hidden;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }

/* --- Modal --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(2px);
  /* Boven het detailpaneel (55). Stond dit lager, dan viel een venster dat je
     vanuit een detailpaneel opent er half achter — precies wat er gebeurde bij
     "Wanneer is er betaald?". */
  display: flex; align-items: center; justify-content: center; z-index: 70;
}
.modal-kaart { max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-form h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }

.regel-blok { border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-bottom: 8px; }
.regel-blok-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; }
.regel-blok label { margin: 6px 0 2px; }

/* --- Toast --- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--navy-dark); color: white; padding: 10px 20px; border-radius: 6px;
  font-size: 13px; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.toast.fout { background: var(--danger-text); }

/* --- Volledige-pagina document-formulieren --- */
.document-formulier {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 28px 32px; max-width: 100%; box-shadow: var(--shadow-sm);
}
.document-formulier label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 14px 0 4px; }
.document-formulier input, .document-formulier select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
  transition: border-color 0.15s;
}
.document-formulier input:focus, .document-formulier select:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-light);
}
.subkop { font-size: 15px; margin: 24px 0 10px; }
.btn-klein { font-size: 12px; padding: 6px 10px; margin-top: 8px; }
.inline-klant-form {
  background: var(--navy-light); border-radius: 6px; padding: 14px; margin: 10px 0;
}
.form-acties { margin-top: 20px; display: flex; gap: 8px; }

.regel-rij {
  display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--border);
  border-radius: 6px; padding: 10px; margin-bottom: 8px; background: var(--surface);
  cursor: grab;
}
.regel-rij-inhoud { flex: 1; }
.regel-korting-link { display: inline-block; font-size: 12px; margin-top: 8px; color: var(--navy); }
.regel-korting-veld { margin-top: 8px; max-width: 160px; }
.regel-korting-veld label { font-size: 11px; margin: 0 0 2px; }
.regel-rij.slepen { opacity: 0.4; }
.regel-rij .sleep-handvat { color: var(--text-muted); font-size: 16px; cursor: grab; user-select: none; }
.regel-rij-velden { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; flex: 1; }
.regel-rij-velden label { margin: 0 0 2px; font-size: 11px; }
.regel-verwijder-btn {
  background: none; border: none; color: var(--danger-text); font-size: 18px; cursor: pointer;
  padding: 4px 8px; line-height: 1;
}

.sorteerbaar { cursor: pointer; user-select: none; }
.sorteerbaar:hover { color: var(--navy); }

.zoekveld {
  width: 100%; max-width: 340px; padding: 8px 12px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
}
.lijst-filters {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.lijst-filters .zoekveld { margin-bottom: 0; }
.periode-select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
}
.periode-aangepast { display: flex; align-items: center; gap: 6px; }
.periode-aangepast input { padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.data-tabel tr.klikbaar { cursor: pointer; }
/* Detailpaneel schuift vanaf rechts in: dat leest prettiger dan een blok dat
   onder de lijst verschijnt, want de lijst blijft zichtbaar en op zijn plek. */
.detail-paneel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 92vw);
  background: var(--surface); border-left: 1px solid var(--border);
  padding: 26px 28px; overflow-y: auto; z-index: 55;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform 0.22s ease;
}
.detail-paneel.open { transform: translateX(0); }
.detail-achtergrond {
  position: fixed; inset: 0; background: rgba(15,23,42,0.35);
  backdrop-filter: blur(1px); z-index: 54;
}
body.detail-open { overflow: hidden; }
.detail-sluiten {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none; font-size: 26px; line-height: 1;
  color: var(--text-muted); padding: 4px 8px; border-radius: 8px;
}
.detail-sluiten:hover { background: var(--bg); color: var(--text); }
.detail-paneel-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; padding-right: 36px; gap: 12px; flex-wrap: wrap; }
.detail-paneel-titel { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.detail-paneel-sub { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.detail-paneel-tabel { width: 100%; font-size: 13.5px; border-collapse: collapse; }
.detail-paneel-tabel td { padding: 10px 0; border-bottom: 1px solid var(--border); }
.detail-paneel-tabel tr:last-child td { border-bottom: none; }
.detail-paneel-tabel td:last-child { font-variant-numeric: tabular-nums; }
.detail-paneel-tabel td:last-child { text-align: right; }
.detail-paneel-acties { display: flex; gap: 6px; }
.bijlage-blok {
  border: 1px dashed var(--border-strong); border-radius: 6px; padding: 12px;
  text-align: center; font-size: 12px; color: var(--text-muted);
  min-width: 0;  /* zonder dit kan het blok zelf niet krimpen in een grid */
}
.bijlage-kop { font-weight: 600; color: var(--tekst); margin: 0 0 8px; text-align: left; }

/* Het echte document als voorbeeld, niet een pictogram. Een PDF laten we door
   de browser zelf tekenen in een kader; die kan dat en het scheelt een
   omzetting op de server. */
.bijlage-kader {
  width: 100%; height: 420px; border: 1px solid var(--border);
  border-radius: 6px; background: #fff; display: block;
}
.bijlage-voorbeeld img {
  width: 100%; max-height: 420px; object-fit: contain;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
@media (max-width: 560px) {
  .bijlage-kader { height: 300px; }
  .bijlage-voorbeeld img { max-height: 300px; }
}

/* --- Bulkselectie --- */
.selectie-cel { width: 40px; }
.selectie-vakje, .selectie-alles {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--navy);
}
.data-tabel th:first-child:has(.selectie-alles) { width: 40px; }

.selectiebalk {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--navy-dark); color: white; border-radius: 12px;
  padding: 12px 18px; display: flex; align-items: center; gap: 18px;
  box-shadow: var(--shadow-lg); z-index: 60; font-size: 13px;
  animation: selectiebalk-op 0.15s ease-out;
}
@keyframes selectiebalk-op {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.selectiebalk-knoppen { display: flex; gap: 8px; }
.selectiebalk .btn-secondary {
  background: rgba(255,255,255,0.12); color: white; border-color: rgba(255,255,255,0.25);
}
.selectiebalk .btn-secondary:hover { background: rgba(255,255,255,0.22); color: white; border-color: rgba(255,255,255,0.4); }
.btn-gevaar { background: var(--danger-text); color: white; border: none; }
.btn-gevaar:hover { background: #8f1e17; }

@media (max-width: 600px) {
  .selectiebalk { flex-direction: column; gap: 10px; width: calc(100% - 32px); }
  .selectiebalk-knoppen { flex-wrap: wrap; justify-content: center; }
}

/* =========================================================
   Moderniseringsslag: dashboard + facturen
   Kern: bedragen zijn het belangrijkste wat je scant, dus die
   krijgen tabulaire cijfers (gelijke breedte) en staan rechts
   uitgelijnd — dan lopen de kolommen echt recht onder elkaar.
   ========================================================= */

.bedrag, .data-tabel td.bedrag, .kaart-waarde, .positie-waarde {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.data-tabel td.bedrag, .data-tabel th.bedrag { text-align: right; }
.bedrag-valuta { color: var(--text-muted); font-weight: 400; margin-right: 2px; }

.content-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }

.sectie-kop {
  display: flex; align-items: center; justify-content: space-between;
  margin: 28px 0 12px; gap: 12px; flex-wrap: wrap;
}
.sectie-kop h3 {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}

/* --- Geldpositie-band (dashboard) --- */
.positie-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.positie-vak { background: var(--surface); padding: 20px 22px; }
.positie-label {
  margin: 0 0 8px; font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 7px;
}
.positie-waarde { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.positie-toelichting { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.positie-vak.let-op .positie-waarde { color: var(--danger-text); }
.positie-stip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.positie-stip.open { background: #b45309; }
.positie-stip.verlopen { background: var(--danger-text); }
.positie-stip.btw { background: var(--navy); }

/* --- Samenvattingsband (facturen) --- */
.samenvatting-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.samenvatting-vak {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 15px 17px; box-shadow: var(--shadow-sm);
}
.samenvatting-label { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); }
.samenvatting-waarde {
  margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.samenvatting-vak.waarschuwing .samenvatting-waarde { color: var(--danger-text); }

/* --- Statusfilter-chips --- */
.filter-chips { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  padding: 7px 14px; border-radius: 999px; font-size: 13px;
}
.filter-chip:hover { border-color: var(--border-strong); color: var(--text); }
.filter-chip.actief {
  background: var(--navy); border-color: var(--navy); color: white; font-weight: 500;
}

/* --- Status als stip + tekst i.p.v. gekleurde blob --- */
/* Status als GEKLEURD LABEL, net als bij categorieën. Een bolletje van 7 pixels
   met zwarte tekst ernaast is te weinig om een lijst te kunnen scannen; een
   label met een eigen achtergrond zie je in één oogopslag staan. */
.status-punt {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  white-space: nowrap; padding: 3px 9px; border-radius: 999px; font-weight: 500;
  background: var(--bg); color: var(--text-muted);
}
.status-punt::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor;
}
.status-punt.betaald::before, .status-punt.geaccepteerd::before { background: var(--success-text); }
.status-punt.verzonden::before { background: #b45309; }
.status-punt.te_laat::before, .status-punt.verlopen::before { background: var(--danger-text); }
.status-punt.concept::before { background: var(--border-strong); }
/* De tekst kleurt mee met het bolletje. Alleen een gekleurd puntje van 7 pixels
   is te weinig om een lijst in één oogopslag te kunnen scannen - en juist dat
   wil je bij een lijst met openstaande posten. */
.status-punt.te_laat, .status-punt.verlopen { color: var(--danger-text); background: var(--danger-bg, #fdeceb); }
.status-punt.betaald, .status-punt.geaccepteerd { color: var(--success-text); background: var(--succes-achtergrond, #e8f5ee); }
.status-punt.verzonden { color: #b45309; background: #fef3e2; }
.status-punt.nieuw, .status-punt.openstaand { color: #1d4ed8; background: #e8eefc; }
.status-punt.te_controleren { color: #7c3aed; background: #f1e9fd; }
.status-punt.concept { color: var(--text-muted); background: var(--bg); }
.status-punt.gefactureerd { color: #0f766e; background: #e3f4f2; }

/* --- Rij-acties pas tonen bij hover: rustiger tabel --- */
.rij-acties { display: flex; gap: 6px; justify-content: flex-end; opacity: 0.35; transition: opacity 0.12s; }
.data-tabel tr:hover .rij-acties, .rij-acties:focus-within { opacity: 1; }
.rij-acties .btn-secondary { padding: 6px 11px; font-size: 12px; }
@media (hover: none) { .rij-acties { opacity: 1; } }

/* --- Actiekaart met telling --- */
.actie-kaart.leeg { opacity: 0.55; }
.actie-kaart-telling {
  font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .positie-waarde { font-size: 25px; }
  .sectie-kop { margin: 22px 0 10px; }
}
.lege-staat { text-align: center; color: var(--text-muted); padding: 32px 16px !important; }
.status-select {
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px;
  font-size: 12.5px; background: var(--surface); color: var(--text);
}
.credit-label {
  display: inline-block; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px;
  background: var(--warning-bg); color: var(--warning-text); vertical-align: middle;
}

/* --- Bonscan-uitslag --- */
.scan-uitslag { margin-top: 16px; }
.scan-kop { margin-bottom: 10px; }
.scan-zekerheid {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.scan-zekerheid.hoog { background: var(--success-bg); color: var(--success-text); }
.scan-zekerheid.gemiddeld { background: var(--warning-bg); color: var(--warning-text); }
.scan-zekerheid.laag, .scan-zekerheid.onbekend { background: #fdeaea; color: var(--danger-text); }
.scan-waarschuwing {
  margin: 6px 0; font-size: 12.5px; color: var(--warning-text);
  background: var(--warning-bg); padding: 8px 11px; border-radius: 8px;
}
.scan-fout {
  margin: 12px 0 0; font-size: 13px; color: var(--danger-text);
  background: #fdeaea; padding: 11px 13px; border-radius: 8px;
}
.scan-tabel { width: 100%; border-collapse: collapse; margin: 12px 0 4px; font-size: 13.5px; }
.scan-tabel td { padding: 7px 0; border-bottom: 1px solid var(--border); }
.scan-tabel td:first-child { color: var(--text-muted); width: 42%; }
.scan-tabel td.bedrag { text-align: right; font-variant-numeric: tabular-nums; }
.scan-tabel tr.scan-totaal td { border-bottom: none; border-top: 1.5px solid var(--border-strong); padding-top: 10px; }

/* --- Deelcrediteren --- */
.credit-keuze-tabel { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 13px; }
.credit-keuze-tabel th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.credit-keuze-tabel th:nth-child(2), .credit-keuze-tabel th:nth-child(3) { text-align: right; }
.credit-keuze-tabel td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.credit-keuze-tabel td.bedrag { text-align: right; font-variant-numeric: tabular-nums; }
.credit-keuze-tabel input.credit-aantal {
  width: 78px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 7px;
  font-size: 13px; text-align: right; font-variant-numeric: tabular-nums;
}
.credit-max { font-size: 11.5px; color: var(--text-muted); margin-left: 6px; }
.credit-totaal {
  margin: 14px 0 0; padding: 11px 13px; background: var(--bg); border-radius: 8px; font-size: 13.5px;
}
.concept-nummer {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px;
  border-radius: 5px; background: var(--bg); color: var(--text-muted);
  border: 1px dashed var(--border-strong); cursor: help;
}

/* --- Zijbalk-knoppen: eigen stijl, los van de huisstijlkleur ---
   De algemene .btn-secondary past zich aan aan de accentkleur; op een gekleurde
   zijbalk levert dat kleur-op-kleur op (nauwelijks leesbaar bij hover). Deze
   knoppen werken daarom met doorschijnend wit en blijven bij elke huisstijl leesbaar. */
.sidebar-footer .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}
.sidebar-footer .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.sidebar-footer .btn-secondary:active { background: rgba(255, 255, 255, 0.28); }
.sidebar-footer .btn-secondary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px;
}

/* --- Versienummer --- */
.versie-regel {
  text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.4);
  padding: 8px 8px 4px; font-variant-numeric: tabular-nums;
}
.versie-regel:hover { color: rgba(255,255,255,0.7); }
.wijziging-lijst { list-style: none; padding: 0; margin: 14px 0 0; }
.wijziging-lijst li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.wijziging-lijst li:last-child { border-bottom: none; }
.wijziging-versie {
  display: inline-block; font-weight: 600; font-size: 12px; padding: 2px 8px;
  border-radius: 5px; background: var(--navy-light); color: var(--navy); margin-right: 8px;
}
.wijziging-datum { font-size: 12px; color: var(--text-muted); }
.wijziging-lijst p { margin: 7px 0 0; font-size: 13.5px; }

/* --- Sleepvak voor bonnen --- */
.sleepvak {
  border: 2px dashed var(--border-strong); border-radius: 12px;
  padding: 32px 20px; text-align: center; margin: 16px 0;
  background: var(--bg); transition: border-color 0.15s, background 0.15s; cursor: pointer;
}
.sleepvak:hover { border-color: var(--navy); }
.sleepvak-actief { border-color: var(--navy); background: var(--navy-light); }
.sleepvak-tekst { margin: 0; font-size: 14px; font-weight: 500; }
.sleepvak-sub { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }
.sleepvak-knop {
  background: none; border: none; padding: 0; font-size: 12.5px;
  color: var(--navy); text-decoration: underline; cursor: pointer;
}

.gekozen-lijst { margin-bottom: 14px; }
.gekozen-rij {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--bg); border-radius: 8px;
  margin-bottom: 6px; font-size: 13px;
}
.gekozen-weg {
  background: none; border: none; color: var(--text-muted);
  font-size: 17px; line-height: 1; padding: 0 4px; cursor: pointer;
}
.gekozen-weg:hover { color: var(--danger-text); }

.scan-samenvatting {
  margin: 16px 0 12px; padding: 10px 13px; background: var(--navy-light);
  border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--navy);
}
.scan-uitslag + .scan-uitslag { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.scan-bestandsnaam { margin: 0; font-size: 13px; font-weight: 600; }
.scan-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.scan-dubbel { opacity: 0.75; }
.scan-acties { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.scan-acties select { flex: 1; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13px; }

/* --- Btw-aangifte --- */
.btw-kiezer { margin-bottom: 22px; }
.kwartaal-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.kwartaal-knop {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 16px; text-align: left; font-size: 13.5px; font-weight: 500;
  display: flex; flex-direction: column; gap: 2px; color: var(--text);
}
.kwartaal-knop span { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.kwartaal-knop:hover { border-color: var(--navy); }
.kwartaal-knop.actief { background: var(--navy); border-color: var(--navy); color: #fff; }
.kwartaal-knop.actief span { color: rgba(255,255,255,0.75); }

.btw-eigen-periode { margin-top: 6px; }
.btw-eigen-periode summary {
  font-size: 12.5px; color: var(--text-muted); cursor: pointer; list-style: none;
}
.btw-eigen-periode summary::-webkit-details-marker { display: none; }
.btw-eigen-periode summary::before { content: "▸ "; }
.btw-eigen-periode[open] summary::before { content: "▾ "; }

.btw-uitkomst {
  border-radius: 14px; padding: 24px 26px; margin-bottom: 22px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); background: var(--surface);
}
.btw-uitkomst.betalen { border-left: 4px solid var(--danger-text); }
.btw-uitkomst.terug { border-left: 4px solid var(--success-text); }
.btw-uitkomst-label { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); }
.btw-uitkomst-bedrag {
  margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.btw-uitkomst.betalen .btw-uitkomst-bedrag { color: var(--danger-text); }
.btw-uitkomst.terug .btw-uitkomst-bedrag { color: var(--success-text); }
.btw-uitkomst-sub { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }

.btw-blok { margin-bottom: 20px; }
.btw-blok-kop {
  margin: 0 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}
.btw-tabel {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-sm); font-size: 13.5px;
}
.btw-tabel th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 600; padding: 10px 16px;
  border-bottom: 1px solid var(--border); background: #fafbfc;
}
.btw-tabel th.bedrag, .btw-tabel td.bedrag { text-align: right; font-variant-numeric: tabular-nums; }
.btw-tabel td { padding: 11px 16px; border-bottom: 1px solid var(--border); }
.btw-tabel tr:last-child td { border-bottom: none; }
.btw-totaalrij td { background: #fafbfc; }
.btw-toelichting { margin-top: 4px; }

/* --- Bijlage bij inkoop --- */
.bijlage-voorbeeld {
  display: block; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--bg); margin-bottom: 10px;
  transition: border-color 0.15s;
}
.bijlage-voorbeeld:hover { border-color: var(--navy); }
.bijlage-voorbeeld img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; }
/* De knoppen liepen over de rand van het gestippelde kader heen. Oorzaak: een
   knop mag niet afbreken, dus als "Downloaden" breder is dan de helft van het
   vak kan flex hem niet kleiner maken en steekt hij eruit. min-width:0 geeft
   toestemming om te krimpen, en wrap zorgt dat ze onder elkaar gaan als het
   echt niet past. */
.bijlage-acties { display: flex; flex-wrap: wrap; gap: 6px; }
.bijlage-acties .btn-secondary {
  flex: 1 1 auto; min-width: 0; text-align: center; text-decoration: none;
  padding: 7px 8px; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis;
}

/* --- Voortgang bij scannen --- */
.scan-voortgang { margin: 16px 0; }
.scan-voortgang-balk {
  height: 6px; background: var(--border); border-radius: 999px; overflow: hidden;
}
.scan-voortgang-vulling {
  height: 100%; background: var(--navy); border-radius: 999px;
  transition: width 0.3s ease; width: 0%;
}
.scan-voortgang-tekst { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); text-align: center; }
.scan-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.scan-keuzes label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.scan-keuzes select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13px; }
.scan-betaald { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 13px; }
.scan-betaald input { width: auto; }
.scan-acties { margin-top: 12px; }
.scan-acties .btn-primary { width: 100%; }

/* --- Boekingsvoorstel bij een gescande bon --- */
.boekregels { margin-top: 14px; padding: 12px 14px; background: var(--bg); border-radius: 10px; }
.boekregels-kop {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.boekregels-laden { font-size: 13px; color: var(--text-muted); }
.boekregel { display: grid; grid-template-columns: 1fr 100px 130px; gap: 6px; margin-bottom: 6px; }
.boekregel:last-child { margin-bottom: 0; }
.boekregel input, .boekregel select {
  padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 7px;
  font-size: 12.5px; background: var(--surface); width: 100%;
}
.boekregel .boekregel-bedrag { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .boekregel { grid-template-columns: 1fr; }
}
.categorie-knop {
  background: var(--warning-bg); border: 1px dashed var(--warning-text);
  color: var(--warning-text); padding: 4px 10px; border-radius: 6px; font-size: 12px;
}
.categorie-knop:hover { background: #ffe9bd; }
.categorie-label { font-size: 13px; }
.geleerd-label {
  display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px;
  background: var(--navy-light); color: var(--navy); vertical-align: middle;
}

/* Inkoopdetail: de bijlage staat ONDER de regels, over de volle breedte.
   Ernaast betekende een kolom van 170px, en daar past geen leesbaar voorbeeld
   in - je zag een postzegel. Onder elkaar kan het document zo breed als het
   paneel, en dan herken je meteen of je de goede factuur voor je hebt. */
.inkoop-detail-inhoud { display: grid; grid-template-columns: 1fr; gap: 18px; }
.regel-tarief {
  font-size: 11px; color: var(--text-muted); background: var(--bg);
  padding: 1px 6px; border-radius: 4px; margin-left: 4px;
}
.detail-paneel-acties { flex-wrap: wrap; align-items: center; }
.detail-paneel-acties .status-select { min-width: 130px; }

/* --- Kas en bank: betaling koppelen --- */
.bedrag-in { color: var(--success-text); font-weight: 500; }
.bedrag-uit { color: var(--text); }
.omschrijving-cel { max-width: 320px; font-size: 12.5px; color: var(--text-muted); }
.gekoppeld-label {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px;
  border-radius: 5px; background: var(--success-bg); color: var(--success-text);
}
.btn-mini {
  background: none; border: none; color: var(--text-muted);
  font-size: 11.5px; text-decoration: underline; padding: 2px 4px; margin-left: 6px;
}
.btn-mini:hover { color: var(--text); }

.bestemming-kop {
  margin: 18px 0 8px; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.suggestie-lijst { display: flex; flex-direction: column; gap: 6px; }
.suggestie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 12px 14px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.suggestie:hover { border-color: var(--navy); background: var(--navy-light); }
.suggestie-datum { color: var(--text-muted); font-size: 12px; margin-left: 6px; }
.suggestie-rechts { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.match-reden { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; }
.hint-klein { font-size: 12px; color: var(--text-muted); }

/* --- Categorie kiezen --- */
.groep-uitleg { display: block; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin-top: 2px; }
.categorie-keuzes { display: flex; flex-wrap: wrap; gap: 6px; }
.categorie-keuze {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 14px; font-size: 13px; color: var(--text); cursor: pointer;
}
.categorie-keuze:hover { border-color: var(--navy); background: var(--navy-light); }
.categorie-keuze.niet_aftrekbaar { border-color: #f0d9a8; background: var(--warning-bg); color: var(--warning-text); }
.categorie-keuze.niet_aftrekbaar:hover { background: #ffe9bd; }
.categorie-keuze.prive { border-style: dashed; color: var(--text-muted); }
.categorie-keuze.prive:hover { border-color: var(--border-strong); color: var(--text); }
.categorie-keuze.investering { border-color: #c7ddf5; background: var(--navy-light); color: var(--navy); }
.eigen-categorie { display: flex; gap: 6px; }
.eigen-categorie input { flex: 1; }
.btw-verlegd-regel td { color: var(--text-muted); }
.verlegd-uitleg { display: block; font-size: 11px; color: var(--text-muted); font-style: italic; }
.verlegd-toelichting {
  margin: 12px 0 0; padding: 11px 13px; background: var(--navy-light);
  border-radius: 8px; font-size: 12.5px; color: var(--navy); line-height: 1.5;
}

/* --- Bedrijf verwijderen --- */
.gevaar-blok { border-color: #f3c9c5; }
.gevaar-blok .subkop { color: var(--danger-text); }
.verwijder-lijst { margin: 10px 0 16px; padding-left: 20px; font-size: 13.5px; }
.verwijder-lijst li { padding: 3px 0; }
.verwijder-waarschuwing {
  margin: 0 0 14px; padding: 12px 14px; background: var(--warning-bg);
  color: var(--warning-text); border-radius: 8px; font-size: 12.5px; line-height: 1.5;
}

/* --- Mail versturen --- */
.mail-eerder {
  margin: 0 0 14px; padding: 10px 13px; background: var(--warning-bg);
  color: var(--warning-text); border-radius: 8px; font-size: 12.5px;
}
.mail-bijlage {
  margin: 14px 0 0; padding: 10px 13px; background: var(--bg);
  border-radius: 8px; font-size: 12.5px; color: var(--text-muted);
}
.modal-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: 8px; font-size: 13.5px; font-family: inherit; line-height: 1.55;
  resize: vertical;
}
.geen-suggestie {
  margin: 16px 0; padding: 12px 14px; background: var(--warning-bg);
  color: var(--warning-text); border-radius: 8px; font-size: 12.5px; line-height: 1.5;
}
.nummerstand { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.nummerstand-tabel { width: 100%; font-size: 13.5px; border-collapse: collapse; }
.nummerstand-tabel td { padding: 8px 0; border-bottom: 1px solid var(--border); }
.nummerstand-tabel tr:last-child td { border-bottom: none; }
.nummerstand-tabel td:last-child { text-align: right; }
.pincode-veld {
  font-size: 24px; letter-spacing: 8px; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.hulp-goed {
  margin: 14px 0 0; padding: 11px 13px; background: var(--success-bg);
  color: var(--success-text); border-radius: 8px; font-size: 13px;
}
.tijdelijk-wachtwoord {
  margin: 14px 0 0; padding: 14px; background: var(--bg); border-radius: 10px;
  border: 1px solid var(--border-strong);
}
.tijdelijk-wachtwoord p { margin: 0 0 8px; font-size: 13px; }
.tijdelijk-wachtwoord code {
  display: block; font-size: 20px; font-weight: 600; letter-spacing: 2px;
  padding: 10px; background: var(--surface); border-radius: 7px; text-align: center;
  user-select: all;
}

/* --- PDF-sjabloon kiezen --- */
.sjabloon-keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.sjabloon-keuze {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; text-align: left; display: flex; flex-direction: column; gap: 3px;
}
.sjabloon-keuze:hover { border-color: var(--navy); }
.sjabloon-keuze.actief { border-color: var(--navy); background: var(--navy-light); box-shadow: inset 0 0 0 1px var(--navy); }
.sjabloon-naam { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sjabloon-uitleg { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }

.sjabloon-voorbeeld { margin-bottom: 18px; }
.sjabloon-voorbeeld-knoppen { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.sjabloon-voorbeeld-knoppen .btn-secondary { font-size: 12px; padding: 6px 12px; }
.sjabloon-voorbeeld-knoppen .btn-secondary.actief { background: var(--navy); color: #fff; border-color: var(--navy); }
#sjabloon-frame {
  width: 100%; height: 520px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg);
}
@media (max-width: 700px) { #sjabloon-frame { height: 380px; } }

/* --- Categorielabels met kleur --- */
.categorie-label {
  display: inline-block; padding: 3px 9px; border-radius: 5px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.categorie-keuze { transition: filter 0.12s, box-shadow 0.12s; }
.categorie-keuze:hover { filter: brightness(0.95); box-shadow: inset 0 0 0 1.5px currentColor; }
.categorie-keuze.prive { border-style: dashed !important; }
.import-uitslag { margin-top: 16px; padding: 14px; background: var(--bg); border-radius: 10px; font-size: 13.5px; }
.import-uitslag p { margin: 0 0 8px; }
.import-uitslag p:last-child { margin-bottom: 0; }
.import-meldingen { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--text-muted); }
.import-meldingen li { padding: 2px 0; }
.btw-uitleg-blok {
  margin: 14px 0; padding: 12px 14px; background: var(--navy-light); border-radius: 9px;
}
.btw-uitleg-blok .bestemming-kop { margin-top: 0; color: var(--navy); }

/* --- Kostenoverzicht --- */
.aandeel-balk { display: inline-block; width: 90px; height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.aandeel-vulling { height: 100%; border-radius: 4px; }
.aandeel-tekst { margin-left: 8px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.periode-keuze { padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13px; }

/* --- Inkoopimport: keuze per leverancier ---
   Elke leverancier een eigen kaartje. Wie een keuze nódig heeft (geen btw op de
   facturen, dus 0%/vrijgesteld/verlegd is niet te zien) krijgt een gele rand,
   zodat je in één blik ziet waar je nog naar moet kijken. */
.import-leveranciers { margin: 14px 0 4px; max-height: 46vh; overflow-y: auto; }
.import-leverancier {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--surface);
}
.import-leverancier-let-op { border-color: var(--warning-text); background: var(--warning-bg); }
.import-leverancier-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.import-leverancier-cijfers { font-size: 12.5px; color: var(--text-muted); }
.import-nieuw { color: var(--navy); font-weight: 600; }
.import-leverancier-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.import-leverancier-velden label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-muted); }
.import-leverancier-velden select { width: 100%; }
.import-leverancier-velden .hint-klein { margin: 4px 0 0; }
.import-leverancier .checkbox-regel {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 12.5px; color: var(--text-muted); font-weight: normal;
}
.import-leverancier .checkbox-regel input { width: auto; margin: 0; }
.modal-knoppen { display: flex; gap: 10px; margin-top: 16px; }
.modal-knoppen button { flex: 1; }
@media (max-width: 640px) {
  .import-leverancier-velden { grid-template-columns: 1fr; }
}

/* --- Toegestane bestandstypen bij een uploadveld ---
   Het accept-attribuut filtert alleen de bestandskiezer en zegt niets bij
   slepen. Deze regel staat er dus zichtbaar bij, overal in dezelfde vorm. */
.toegestane-types {
  margin: 5px 0 0; font-size: 12px; color: var(--text-muted);
}
.sleepvak .toegestane-types { margin-top: 8px; }
.verbruik-totaal td { border-top: 2px solid var(--border-strong); }

/* --- Adresdiagnose in Beheer ---
   Laat direct zien of het adres waar je nu op kijkt herkend wordt. Zonder dit
   merk je een verkeerd ingesteld adres pas aan een activatiemail die bij een
   klant nergens op uitkomt. */
.adres-diagnose { margin: 10px 0 4px; padding: 11px 13px; border-radius: 8px; font-size: 13px; }
.adres-diagnose:empty { display: none; }
.adres-goed { background: var(--success-bg, #e7f6ec); color: var(--success-text, #1a6b38); }
.adres-mis { background: var(--warning-bg); color: var(--warning-text); }

/* --- Activatiescherm na aanmelden --- */
.activatie-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.activatie-kop h3 { margin: 0; font-size: 17px; }
.activatie-vinkje {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--success-bg, #e7f6ec); color: var(--success-text, #1a6b38); font-weight: 700;
}
.activatie-uitleg { font-size: 13.5px; color: var(--text-muted); margin: 0 0 18px; }
.activatie-stap { display: flex; gap: 11px; margin-bottom: 16px; }
.activatie-stap > div { flex: 1; }
.activatie-stap strong { display: block; font-size: 14px; margin-bottom: 2px; }
.activatie-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; border-radius: 50%; flex: none; margin-top: 1px;
  background: var(--navy-light); color: var(--navy); font-size: 12px; font-weight: 700;
}

/* --- Gelukt-melding na activeren ---
   Bovenaan de kaart en niet als regeltje eronder: dit is het moment waarop
   iemand voor het eerst binnenkomt, en dat mag je zien. */
.activatie-gelukt {
  text-align: center; padding: 16px 14px 14px; margin-bottom: 18px;
  background: var(--success-bg, #e7f6ec); border-radius: 10px;
}
.activatie-gelukt h3 { margin: 8px 0 4px; font-size: 16px; color: var(--success-text, #1a6b38); }
.activatie-gelukt p { margin: 0; font-size: 13px; color: var(--success-text, #1a6b38); opacity: .85; }
.activatie-vinkje-groot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--success-text, #1a6b38); color: #fff; font-size: 20px; font-weight: 700;
}

/* --- Livegang-lijst in Beheer --- */
.livegang-lijst { margin: 12px 0 22px; }
.livegang-punt {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 13px; margin-bottom: 8px; border-radius: 9px; background: var(--bg);
}
.livegang-punt p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.livegang-punt strong { font-size: 13.5px; }
.livegang-teken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%; flex: none; margin-top: 1px;
  font-size: 12px; font-weight: 700; color: #fff;
}
.livegang-goed .livegang-teken { background: var(--success-text, #1a6b38); }
.livegang-mis { background: var(--warning-bg); }
.livegang-mis .livegang-teken { background: var(--warning-text); }
.livegang-handmatig .livegang-teken { background: var(--text-muted); }

/* --- Sterktemeter bij een wachtwoord --- */
.ww-meter { margin: 6px 0 4px; }
.ww-meter:empty { display: none; }
.ww-balk { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ww-balk span { display: block; height: 100%; border-radius: 3px; transition: width .2s, background .2s; }
.ww-oordeel { margin: 5px 0 0; font-size: 12px; font-weight: 600; }
.ww-punten { margin: 5px 0 0; padding-left: 18px; font-size: 12px; color: var(--danger-text); }
.ww-punten li { padding: 1px 0; }
.ww-tip { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.ww-niveau-0 .ww-balk span { background: var(--danger-text); }
.ww-niveau-0 .ww-oordeel { color: var(--danger-text); }
.ww-niveau-1 .ww-balk span { background: var(--warning-text); }
.ww-niveau-1 .ww-oordeel { color: var(--warning-text); }
.ww-niveau-2 .ww-balk span,
.ww-niveau-3 .ww-balk span { background: var(--success-text, #1a6b38); }
.ww-niveau-2 .ww-oordeel,
.ww-niveau-3 .ww-oordeel { color: var(--success-text, #1a6b38); }

/* --- Controle vóór de aangifte --- */
.controle-blok { padding: 15px 17px; border-radius: 11px; margin-bottom: 18px; }
.controle-af      { background: var(--success-bg, #e7f6ec); }
.controle-bijna   { background: var(--warning-bg); }
.controle-niet_af { background: var(--warning-bg); border: 1px solid var(--warning-text); }
.controle-kop { display: flex; gap: 11px; align-items: flex-start; }
.controle-kop strong { font-size: 15px; }
.controle-kop p { margin: 2px 0 0; font-size: 13px; opacity: .85; }
.controle-teken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none; margin-top: 1px;
  color: #fff; font-size: 13px; font-weight: 700;
}
.controle-af .controle-teken      { background: var(--success-text, #1a6b38); }
.controle-af .controle-kop        { color: var(--success-text, #1a6b38); }
.controle-bijna .controle-teken,
.controle-niet_af .controle-teken { background: var(--warning-text); }
.controle-bijna .controle-kop,
.controle-niet_af .controle-kop   { color: var(--warning-text); }
.controle-punten { list-style: none; margin: 14px 0 0; padding: 0; }
.controle-punten li {
  padding: 10px 12px; margin-bottom: 7px; border-radius: 8px;
  background: rgba(255,255,255,.6);
}
.controle-punten li p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
.controle-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--navy); text-align: left;
  text-decoration: underline; text-underline-offset: 2px;
}
.controle-punten li.controle-info { opacity: .8; }

/* --- De vraag bij een creditdocument --- */
.documentsoort-vraag {
  margin: 14px 0; padding: 13px 15px;
  background: var(--warning-bg); border-radius: 10px;
}
.documentsoort-kop { margin: 0; font-size: 14px; font-weight: 600; color: var(--warning-text); }
.documentsoort-vraag .hint-klein { margin: 2px 0 10px; }
.documentsoort-optie {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 11px; margin-bottom: 7px; border-radius: 8px;
  background: var(--surface); cursor: pointer; font-weight: normal;
}
.documentsoort-optie input { width: auto; margin: 2px 0 0; flex: none; }
.documentsoort-optie strong { display: block; font-size: 13.5px; }
.documentsoort-optie em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); }

/* --- Kleur kiezen voor een categorie --- */
.categorie-label-knop { border: none; cursor: pointer; font: inherit; }
.categorie-label-knop:hover { filter: brightness(0.94); }
.kleurpalet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.kleurkeuze {
  border: 0.5px solid rgba(0,0,0,.08); border-radius: 8px; padding: 9px 6px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kleurkeuze:hover { filter: brightness(0.94); }

/* --- Kenmerken van een leverancier in de lijst --- */
.lev-merk {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 5px;
  background: var(--navy-light); color: var(--navy); font-size: 11.5px; white-space: nowrap;
}
.lev-mist { background: var(--warning-bg); color: var(--warning-text); }

/* --- Creditvraag binnen het importscherm --- */
.ii-creditvraag {
  margin: 10px 0 4px; padding: 11px 13px;
  background: var(--warning-bg); border-radius: 9px;
}
.ii-creditvraag .documentsoort-kop { font-size: 13px; }

/* --- Boekingsregels bij een gescande bon --- */
.boekregel { display: grid; grid-template-columns: 1fr 110px 190px 28px; gap: 6px; margin-bottom: 5px; }
.boekregel-weg {
  border: none; background: transparent; color: var(--tekst-zwak); font-size: 17px;
  cursor: pointer; border-radius: 6px; line-height: 1;
}
.boekregel-weg:hover { background: var(--gevaar-bg); color: var(--gevaar); }
.boekregel-toevoegen { margin: 2px 0 8px; }
.boekregel-categorie { display: flex; align-items: center; gap: 9px; margin: 8px 0 4px; }
.boekregel-categorie label { font-size: 12.5px; color: var(--tekst-zwak); min-width: 62px; }
.boekregel-categorie select { flex: 1; }
.boekregel-saldo { font-size: 12.5px; margin: 6px 0 0; padding: 6px 9px; border-radius: 7px; }
.saldo-goed { background: var(--succes-bg); color: var(--succes-tekst); }
.saldo-fout { background: var(--warning-bg); color: var(--warning-text); }

/* --- Categorieënscherm --- */
.cat-eigen {
  margin-left: 8px; font-size: 11px; color: var(--tekst-zwak);
  background: var(--grijs-licht); padding: 1px 7px; border-radius: 5px;
}
.cat-uitleg { display: block; font-size: 11.5px; color: var(--tekst-zwak); margin-top: 2px; }
.cat-acties { text-align: right; white-space: nowrap; }
.cat-acties button { margin-left: 5px; }

/* --- Backup en dataverbruik in Beheer --- */
.backup-lijst { margin-top: 10px; font-size: 13px; }
.backup-lijst summary { cursor: pointer; color: var(--tekst-zwak); }
.backup-lijst ul { margin: 8px 0 4px 18px; }
.backup-lijst li { margin-bottom: 3px; color: var(--tekst-zwak); }
.opslag-vak { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 10px; }
.opslag-vak div { min-width: 96px; }
.opslag-getal { font-size: 19px; font-weight: 600; }
.opslag-label { font-size: 12px; color: var(--tekst-zwak); }
.opslag-blok { margin-bottom: 18px; }
.sectie-kop-klein { font-size: 13px; font-weight: 600; margin-bottom: 8px; }

/* --- Beoordelen van gescande documenten: document links, gegevens rechts --- */
/* Het beoordelen van een gescand document is een eigen pagina geworden. De
   kolommen mogen dus de volle breedte gebruiken - hoe groter het document in
   beeld, hoe eerder je ziet dat er iets niet klopt. */
.beoordeel-scherm {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 26px; box-shadow: var(--shadow-sm);
}

.beoordeel-kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 12px;
}
.beoordeel-teller { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst-zwak); }
.beoordeel-pijl {
  border: 1px solid var(--border); background: white; border-radius: 6px;
  width: 26px; height: 26px; font-size: 16px; line-height: 1; cursor: pointer;
}
.beoordeel-pijl:disabled { opacity: .35; cursor: default; }

/* Het document krijgt meer ruimte dan de velden. Je zit hier om te controleren
   of de scan het goed gelezen heeft, en dat lukt beter naarmate je het origineel
   groter ziet. De velden hebben die breedte niet nodig. */
.beoordeel-kolommen { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; }
.beoordeel-document { position: sticky; top: 0; }
.beoordeel-kader {
  width: 100%; height: 80vh; border: 1px solid var(--border);
  border-radius: 8px; background: var(--grijs-licht);
}
.beoordeel-afbeelding {
  width: 100%; max-height: 80vh; object-fit: contain;
  border: 1px solid var(--border); border-radius: 8px; background: var(--grijs-licht);
}
.beoordeel-openen { display: inline-block; margin-top: 6px; font-size: 12.5px; }
.beoordeel-velden { max-height: 84vh; overflow-y: auto; padding-right: 6px; font-size: 13.5px; }
.beoordeel-velden input, .beoordeel-velden select { padding: 6px 9px; font-size: 13px; }
.beoordeel-velden .scan-tabel td { padding: 5px 0; }
.beoordeel-veld { margin-bottom: 10px; }
.beoordeel-veld label { display: block; font-size: 12.5px; color: var(--tekst-zwak); margin-bottom: 3px; }
.beoordeel-veld input { width: 100%; }
.beoordeel-veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.beoordeel-overig { margin-top: 16px; font-size: 13px; }
.beoordeel-overig summary { cursor: pointer; color: var(--tekst-zwak); }

/* Op een smal scherm onder elkaar: naast elkaar wordt allebei onleesbaar */
@media (max-width: 900px) {
  .beoordeel-kolommen { grid-template-columns: 1fr; }
  .beoordeel-document { position: static; }
  .beoordeel-kader, .beoordeel-afbeelding { height: 50vh; max-height: 50vh; }
  .beoordeel-velden { max-height: none; overflow: visible; }
}

/* Op een telefoon past een boekingsregel niet meer naast elkaar: omschrijving,
   bedrag en tarief samen zijn breder dan het scherm, en dan steekt de rij uit
   het kader. Onder elkaar met het kruisje rechtsboven. */
@media (max-width: 560px) {
  .beoordeel-scherm { padding: 16px 14px; }
  .beoordeel-veld-rij { grid-template-columns: 1fr; }
  .boekregel {
    grid-template-columns: 1fr auto; gap: 6px;
    border: 1px solid var(--border); border-radius: 8px; padding: 9px; margin-bottom: 8px;
  }
  .boekregel-omschrijving { grid-column: 1; }
  .boekregel-weg { grid-column: 2; grid-row: 1; }
  .boekregel-bedrag, .boekregel-tarief { grid-column: 1 / -1; }
  .beoordeel-kop { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* --- De offerte zoals de klant hem ziet --- */
.offerte-kaart {
  background: var(--surface); border-radius: 16px; padding: 32px 36px;
  max-width: 680px; width: 100%; box-shadow: var(--shadow-lg);
  max-height: 92vh; overflow-y: auto;
}
.offerte-kop { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.offerte-kop h1 { font-size: 22px; margin: 2px 0 0; }
.offerte-van { font-size: 13px; color: var(--tekst-zwak); margin: 0; }
.offerte-meta { font-size: 13px; color: var(--tekst-zwak); text-align: right; }
.offerte-meta p { margin: 0 0 3px; }
.offerte-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.offerte-tabel th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--tekst-zwak); border-bottom: 1px solid var(--border); padding: 6px 8px;
}
.offerte-tabel td { padding: 8px; border-bottom: 1px solid var(--border-licht); }
.offerte-korting { color: var(--succes-tekst); font-size: 12px; }
.offerte-totalen { width: 100%; margin-top: 12px; font-size: 14px; }
.offerte-totalen td { padding: 4px 8px; }
.offerte-totaalregel td { border-top: 2px solid var(--border); padding-top: 8px; font-size: 16px; }
.offerte-akkoordblok {
  margin-top: 26px; padding: 20px; border-radius: 12px; background: var(--grijs-licht);
}
.offerte-akkoordblok h3 { margin: 0 0 4px; font-size: 16px; }
.offerte-akkoordblok input { width: 100%; margin-bottom: 12px; }
.offerte-akkoordblok button { width: 100%; }
.offerte-status { font-size: 13px; margin-top: 10px; }
.offerte-status.fout { color: var(--danger-text); }
.offerte-akkoord-gegeven {
  margin-top: 26px; padding: 22px; border-radius: 12px; text-align: center;
  background: var(--succes-bg); color: var(--succes-tekst);
}
.offerte-akkoord-gegeven h3 { margin: 8px 0 6px; }
.offerte-niet-meer {
  margin-top: 26px; padding: 20px; border-radius: 12px;
  background: var(--warning-bg); color: var(--warning-text);
}
.offerte-laden { text-align: center; color: var(--tekst-zwak); padding: 30px 0; }

/* Op een telefoon liep de regeltabel buiten de kaart: de omschrijvingen zijn
   lang en de kolommen konden nergens heen. Minder ruimte eromheen, kleinere
   letter, en de tabel mag horizontaal schuiven als het echt niet past. */
@media (max-width: 560px) {
  .offerte-kaart { padding: 20px 16px; border-radius: 12px; }
  .offerte-kop { flex-direction: column; gap: 8px; }
  .offerte-meta { text-align: left; }
  .offerte-tabel { font-size: 13px; display: block; overflow-x: auto; }
  .offerte-tabel th, .offerte-tabel td { padding: 6px 5px; }
  .offerte-akkoordblok { padding: 16px; }
}

/* --- Kleur kiezen bij een nieuwe categorie --- */
.kleurkeuze-standaard {
  background: var(--surface); color: var(--tekst-zwak);
  border: 1px dashed var(--border);
}
/* Welke je gekozen hebt moet zonder twijfel te zien zijn, ook bij de lichte
   achtergronden van het palet */
.kleurpalet .kleurkeuze.actief {
  outline: 2px solid var(--navy); outline-offset: 1px;
}

/* --- Bonnen die nog nergens geboekt zijn --- */
.open-bonnen-blok {
  background: var(--warning-bg); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px;
}
.open-bonnen-kop { font-weight: 600; color: var(--warning-text); margin: 0 0 2px; }
.open-bon-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border-radius: 8px; padding: 10px 12px; margin-top: 8px;
}
.open-bon-details { display: block; font-size: 12.5px; color: var(--tekst-zwak); margin-top: 2px; }
.open-bon-acties { display: flex; gap: 6px; white-space: nowrap; }
@media (max-width: 560px) {
  .open-bon-rij { flex-direction: column; align-items: stretch; }
  .open-bon-acties button { flex: 1; }
}

/* --- Kleurvoorbeeld naast een categoriekeuze ---
   Safari tekent een keuzelijst met het besturingssysteem en negeert opmaak op
   de opties. Daarom staat het voorbeeld ernaast: dat werkt in elke browser. */
.categorie-voorbeeld { display: inline-flex; align-items: center; min-height: 22px; }
.categorie-voorbeeld:empty { display: none; }
.betaald-datum { margin-top: 8px; max-width: 200px; }
.rol-label { display: block; font-size: 11.5px; color: var(--tekst-zwak); margin-bottom: 2px; }

/* Het scanscherm mag de hele breedte van je beeldscherm gebruiken */
.content.volle-breedte { max-width: none; }

/* Aanbod om de btw-behandeling bij de leverancier vast te leggen */
.onthoud-btw {
  background: var(--surface-2, #f6f7f9); border-radius: 8px;
  padding: 10px 12px; margin: 10px 0;
}
.onthoud-btw .hint { margin: 2px 0 0 24px; }


/* --- Publieke offertepagina: jouw huisstijl --- */
.offerte-logo { max-height: 56px; max-width: 220px; margin-bottom: 10px; display: block; }
/* De merkkleur wordt door de pagina zelf gezet op basis van je instelling.
   Valt terug op het standaardblauw als er niets is ingesteld. */
.offerte-kop h1 { color: var(--merkkleur, #1a3c6e); }
.offerte-tabel thead th { background: var(--merkkleur, #1a3c6e); color: #fff; }
.offerte-akkoordblok .btn-primary {
  background: var(--merkkleur, #1a3c6e); border-color: var(--merkkleur, #1a3c6e);
}
.offerte-akkoordblok textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; resize: vertical; margin-bottom: 12px;
}

/* --- Akkoord van je klant, in het offertepaneel --- */
.akkoord-blok {
  background: var(--succes-achtergrond, #e8f5ee); border-radius: 8px;
  padding: 12px 14px; margin-top: 14px; font-size: 13.5px;
}
.akkoord-kop { font-weight: 600; margin: 0 0 3px; color: var(--success-text); }
.akkoord-blok p { margin: 0; }
.akkoord-opmerking { margin-top: 8px; font-style: italic; }
.akkoord-blok.aangepast { background: var(--warning-bg); }
.akkoord-blok.aangepast .akkoord-kop { color: var(--warning-text); }
.akkoord-waarschuwing { margin-top: 8px; font-size: 12.5px; color: var(--warning-text); }

/* De verlegde btw staat ONDER het te betalen bedrag: hij telt er niet in mee.
   Stond hij ertussen, dan leek het alsof de optelling niet klopte. */
.btw-verlegd-regel td { border-top: 1px dashed var(--border) !important; color: var(--text-muted); }
.btw-verlegd-regel .verlegd-uitleg { display: block; font-size: 11.5px; }
.credit-melding {
  background: var(--warning-bg); color: var(--warning-text);
  border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin: 8px 0 0;
}

/* Een geaccepteerde offerte is goed nieuws, dus groen — niet het oranje van
   "er staat iets open". Je klant heeft ja gezegd; jij bent nu aan zet. */


/* Zoekveld boven een lange keuzelijst */
.select-zoek {
  width: 100%; padding: 7px 10px; margin-bottom: 6px; font: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}

/* --- Betalingen op een factuur of inkoop --- */
.betalingen-blok {
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px;
}
.betalingen-kop {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 13.5px; margin-bottom: 8px;
}
.betalingen-open { color: var(--danger-text); font-weight: 500; }
.betalingen-voldaan { color: var(--success-text); font-weight: 500; }
.betalingen-tabel { width: 100%; font-size: 13px; margin-bottom: 10px; }
.betalingen-tabel td { padding: 4px 0; }
.betalingen-tabel .bedrag { text-align: right; }
.betaalwijze {
  background: var(--bg); border-radius: 999px; padding: 2px 8px; font-size: 11.5px;
}
.btn-tekst {
  background: none; border: none; padding: 0; font: inherit; font-size: 12px;
  color: var(--text-muted); cursor: pointer; text-decoration: underline;
}
.status-punt.deels_betaald { color: #b45309; background: #fef3e2; }

/* --- Kasboek --- */
.kasboek-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.kasboek-kop h3 { margin: 0 0 2px; font-size: 16px; }
.kasboek-tabel .bedrag { text-align: right; white-space: nowrap; }
.kasboek-tabel .negatief { color: var(--danger-text); }
.kasboek-tabel tfoot td { border-top: 2px solid var(--border-strong); padding-top: 8px; }

/* --- Meldingen die opvallen --- */
.toast.fout {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--danger-bg, #fdeceb); color: var(--danger-text);
  border: 1px solid var(--danger-text); border-radius: 10px;
  padding: 12px 14px; max-width: 520px; line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.toast.fout .toast-tekst { flex: 1; }
.toast-sluiten {
  background: none; border: none; color: inherit; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0 2px; opacity: 0.7;
}
.toast-sluiten:hover { opacity: 1; }

/* --- Een onderdeel dat niet geladen kon worden --- */
.laadfout {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--danger-bg, #fdeceb); border: 1px solid var(--danger-text);
  border-radius: 10px; padding: 14px 16px; color: var(--danger-text);
}
.laadfout-tekst { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.laadfout-tekst span { opacity: 0.85; }

/* ============================================================
   INLOGSCHERM
   ============================================================
   Twee kolommen: links waar je bent en waar het voor is, rechts het
   invulveld. Onder de 900 px valt de linkerkant weg - op een telefoon
   wil je meteen kunnen inloggen, niet eerst een halve pagina wegscrollen.

   De naam en de kleur komen uit de instellingen van deze installatie, niet
   vast uit de code. Noem je het product straks anders, dan verandert dit
   scherm mee zonder dat er iemand aan de code hoeft te komen. */
.setup-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: stretch; justify-content: center;
  /* Rustig verloop in plaats van één vlakke kleur. Geeft diepte zonder dat
     het een reclamefolder wordt - dit is tenslotte een boekhoudprogramma. */
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(255,255,255,0.07), transparent 60%),
    linear-gradient(135deg, var(--navy-dark) 0%, #16304d 55%, #0f2338 100%);
  overflow: auto;
}

.auth-zijkant {
  flex: 1 1 0; max-width: 520px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 56px; color: rgba(255,255,255,0.92);
}
.auth-merk { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.auth-merkteken {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; letter-spacing: -0.5px;
}
.auth-merknaam { font-size: 16px; font-weight: 600; letter-spacing: 0.2px; }
.auth-slogan {
  font-size: 30px; line-height: 1.25; font-weight: 600; margin: 0 0 24px;
  letter-spacing: -0.4px;
}
.auth-punten { list-style: none; padding: 0; margin: 0; }
.auth-punten li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: 14.5px; color: rgba(255,255,255,0.78); line-height: 1.5;
}
.auth-punten li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: rgba(255,255,255,0.55); font-weight: 700;
}
.auth-voet {
  margin-top: 40px; font-size: 12px; color: rgba(255,255,255,0.45);
}

/* De kaart zelf: iets ruimer en zachter dan hij was */
.setup-kaart {
  align-self: center;
  background: var(--surface); border-radius: 14px; padding: 36px 34px;
  width: 380px; margin: 32px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.32);
}
.setup-kaart h1 { font-size: 21px; margin: 0 0 18px; color: var(--navy); letter-spacing: -0.3px; }
.setup-kaart input { padding: 10px 12px; border-radius: 8px; }
.setup-kaart input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.12);
}
.setup-kaart button { margin-top: 22px; }

@media (max-width: 900px) {
  .auth-zijkant { display: none; }
  .setup-overlay { align-items: center; }
  .setup-kaart { width: 100%; max-width: 380px; margin: 20px; }
}

/* ============================================================
   STARTSCHERM VOOR NIEUWE GEBRUIKERS
   ============================================================
   Vier stappen, en alleen dingen die je later niet goed kunt maken of die
   een factuur ongeldig maken. Een logo staat er bewust niet in: dat kan
   altijd nog, en elke extra vraag is een reden om af te haken.

   "Later invullen" staat er met opzet bij. Iemand die eerst wil rondkijken
   moet dat kunnen; wie je dwingt haakt af en komt niet terug. */
.wizard-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15, 35, 56, 0.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: 24px;
}
.wizard-kaart {
  background: var(--surface); border-radius: 14px; padding: 32px;
  width: 560px; max-width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.wizard-kaart h2 { margin: 0 0 6px; font-size: 21px; color: var(--navy); letter-spacing: -0.3px; }
.wizard-uitleg { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 20px; }
.wizard-kaart label { display: block; font-size: 12px; font-weight: 600; margin: 14px 0 4px; color: var(--text-muted); }
.wizard-kaart input[type="text"],
.wizard-kaart input[type="number"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 14px;
}
.wizard-kaart input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,95,0.12); }

/* Bolletjes bovenaan: waar ben ik en hoeveel komt er nog */
.wizard-voortgang { display: flex; align-items: center; gap: 6px; margin-bottom: 26px; }
.wizard-stap-bol {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  background: var(--bg); color: var(--text-muted); border: 1px solid var(--border);
}
.wizard-stap-bol.actief { background: var(--navy); color: #fff; border-color: var(--navy); }
.wizard-stap-bol.gedaan { background: var(--succes-achtergrond, #e8f5ee); color: var(--success-text); border-color: var(--success-text); }
.wizard-lijn { flex: 1; height: 1px; background: var(--border); }

/* Keuze tussen "ik begin net" en "ik kom ergens vandaan" */
.wizard-keuze { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
.wizard-optie {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; font-size: 14px; margin: 0;
}
.wizard-optie:hover { border-color: var(--navy); }
.wizard-optie input { margin-top: 2px; }
.wizard-optie .hint { font-size: 12.5px; }

/* Wat wil je als eerste doen */
.wizard-vervolg { display: flex; flex-direction: column; gap: 10px; }
.wizard-vervolgknop {
  text-align: left; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: 2px;
}
.wizard-vervolgknop:hover { border-color: var(--navy); background: var(--bg); }
.wizard-vervolgknop strong { font-size: 14.5px; color: var(--navy); }

.wizard-knoppen { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.wizard-vulling { flex: 1; }
.wizard-fout {
  background: var(--danger-bg, #fdeceb); border: 1px solid var(--danger-text);
  color: var(--danger-text); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; margin: 16px 0 0;
}

@media (max-width: 620px) {
  .wizard-kaart { padding: 24px 20px; }
  .wizard-kaart h2 { font-size: 19px; }
}