/* =============================================================
   KDMN Platform — Globaal Design System
   Versie: 1.0
   Taal: NL
   Doel: Admin + Operations + Planners + Monteurs (mobiel)
   ============================================================= */

/* ---------------------------------------------------------------
   1. CSS Design Tokens (Custom Properties)
--------------------------------------------------------------- */
:root {
  /* Kleuren — Primair */
  --blauw: #2563eb;
  --blauw-licht: #3b82f6;
  --blauw-bg: #eff6ff;

  /* Kleuren — Status */
  --groen: #16a34a;
  --groen-licht: #dcfce7;
  --oranje: #d97706;
  --oranje-licht: #fef3c7;
  --rood: #dc2626;
  --rood-licht: #fee2e2;
  --paars: #7c3aed;
  --paars-licht: #ede9fe;

  /* Kleuren — Neutraal */
  --grijs: #e2e8f0;
  --grijs-donker: #64748b;
  --grijs-licht: #f8fafc;
  --tekst: #1e293b;
  --tekst-zacht: #475569;
  --wit: #ffffff;
  --rand: #e2e8f0;

  /* Typografie */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Afmetingen & Schaduw */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --schaduw: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --schaduw-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --schaduw-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------------------------
   2. Reset & Base
--------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--tekst);
  background: #f1f5f9;
  line-height: 1.5;
  min-height: 100vh;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: var(--font);
}

input,
select,
textarea {
  font-family: var(--font);
}

a {
  color: var(--blauw);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   3. App Shell & Layout
--------------------------------------------------------------- */
.app {
  display: flex;
  min-height: 100vh;
}

/* --- Zijbalk (Sidebar) --- */
.zijbalk {
  width: 240px;
  background: var(--wit);
  border-right: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
  transition: transform 0.25s ease;
}

/* Scrollbar zijbalk */
.zijbalk::-webkit-scrollbar {
  width: 4px;
}
.zijbalk::-webkit-scrollbar-track {
  background: transparent;
}
.zijbalk::-webkit-scrollbar-thumb {
  background: var(--grijs);
  border-radius: 2px;
}

/* Logo gebied */
.zijbalk-logo {
  padding: 20px 20px 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--tekst);
  border-bottom: 1px solid var(--rand);
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

.zijbalk-logo span {
  color: var(--blauw);
}

/* Navigatie */
.zijbalk nav {
  padding: 12px 8px;
  flex: 1;
}

.zijbalk nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--tekst-zacht);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background 0.15s, color 0.15s;
}

.zijbalk nav a:hover {
  background: var(--grijs-licht);
  color: var(--tekst);
  text-decoration: none;
}

.zijbalk nav a.actief {
  background: var(--blauw-bg);
  color: var(--blauw);
  font-weight: 600;
}

.zijbalk nav a .icoon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Sectielabels in nav */
.nav-sectie {
  font-size: 10px;
  font-weight: 700;
  color: var(--grijs-donker);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 12px 12px 4px;
}

/* Gebruikersinfo onderaan sidebar */
.zijbalk-gebruiker {
  padding: 16px;
  border-top: 1px solid var(--rand);
  font-size: 13px;
  flex-shrink: 0;
}

.zijbalk-gebruiker strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.zijbalk-gebruiker .rol-badge {
  font-size: 11px;
  color: var(--grijs-donker);
}

/* --- Hoofdinhoud --- */
.hoofdinhoud {
  margin-left: 240px;
  flex: 1;
  padding: 24px;
  max-width: 1200px;
}

/* --- Paginakop --- */
.paginakop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.paginakop h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.paginakop-acties {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Broodkruimel --- */
.broodkruimel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--grijs-donker);
  margin-bottom: 16px;
}

.broodkruimel a {
  color: var(--grijs-donker);
}

.broodkruimel a:hover {
  color: var(--blauw);
  text-decoration: none;
}

.broodkruimel .scheidteken {
  opacity: 0.4;
}

/* ---------------------------------------------------------------
   4. Kaarten (Cards)
--------------------------------------------------------------- */
.kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--schaduw);
}

.kaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}

.kaart-titel {
  font-size: 13px;
  font-weight: 600;
  color: var(--grijs-donker);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.kaart-waarde {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--tekst);
}

.kaart-waarde.groen { color: var(--groen); }
.kaart-waarde.rood  { color: var(--rood); }
.kaart-waarde.blauw { color: var(--blauw); }

.kaart-sub {
  font-size: 12px;
  color: var(--grijs-donker);
  margin-top: 4px;
}

/* KPI-raster */
.kpi-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* KPI-kaart accent */
.kaart.accent-blauw  { border-top: 3px solid var(--blauw); }
.kaart.accent-groen  { border-top: 3px solid var(--groen); }
.kaart.accent-oranje { border-top: 3px solid var(--oranje); }
.kaart.accent-rood   { border-top: 3px solid var(--rood); }
.kaart.accent-paars  { border-top: 3px solid var(--paars); }

/* ---------------------------------------------------------------
   5. Knoppen (Buttons)
--------------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: 36px;
  text-decoration: none;
  font-family: var(--font);
  line-height: 1;
}

.knop:focus-visible {
  outline: 2px solid var(--blauw);
  outline-offset: 2px;
}

.knop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Varianten */
.knop-primair {
  background: var(--blauw);
  color: var(--wit);
}
.knop-primair:hover {
  background: var(--blauw-licht);
  text-decoration: none;
  color: var(--wit);
}

.knop-groen {
  background: var(--groen);
  color: var(--wit);
}
.knop-groen:hover {
  background: #15803d;
  text-decoration: none;
  color: var(--wit);
}

.knop-rood {
  background: var(--rood);
  color: var(--wit);
}
.knop-rood:hover {
  background: #b91c1c;
  text-decoration: none;
  color: var(--wit);
}

.knop-oranje {
  background: var(--oranje);
  color: var(--wit);
}
.knop-oranje:hover {
  background: #b45309;
  text-decoration: none;
  color: var(--wit);
}

.knop-lijn {
  background: transparent;
  color: var(--tekst);
  border: 1.5px solid var(--rand);
}
.knop-lijn:hover {
  border-color: var(--grijs-donker);
  background: var(--grijs-licht);
  text-decoration: none;
}

.knop-ghost {
  background: transparent;
  color: var(--blauw);
}
.knop-ghost:hover {
  background: var(--blauw-bg);
  text-decoration: none;
}

.knop-ghost-rood {
  background: transparent;
  color: var(--rood);
}
.knop-ghost-rood:hover {
  background: var(--rood-licht);
  text-decoration: none;
}

/* Groottes */
.knop-sm  { padding: 6px 12px;  font-size: 12px; min-height: 30px; }
.knop-lg  { padding: 12px 20px; font-size: 15px; min-height: 46px; }
.knop-xl  { padding: 14px 24px; font-size: 16px; min-height: 52px; }

/* Icoononlyknop */
.knop-icon {
  padding: 8px;
  min-height: 36px;
  width: 36px;
}

/* Volledige breedte */
.knop-blok {
  width: 100%;
  justify-content: center;
}

/* Knoppengroep */
.knop-groep {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   6. Formulieren (Forms)
--------------------------------------------------------------- */
.formulier-rij {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.formulier-veld {
  flex: 1;
  min-width: 140px;
}

.formulier-veld label,
label.veld-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}

/* Vereist markering */
.veld-vereist::after {
  content: ' *';
  color: var(--rood);
}

/* Input, Select, Textarea */
.invoer {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--rand);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--tekst);
  background: var(--wit);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--font);
  min-height: 40px;
  appearance: none;
  -webkit-appearance: none;
}

.invoer:focus {
  outline: none;
  border-color: var(--blauw);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.invoer::placeholder {
  color: #94a3b8;
}

.invoer:disabled {
  background: var(--grijs-licht);
  color: var(--grijs-donker);
  cursor: not-allowed;
}

select.invoer {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

textarea.invoer {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Validatie-states */
.invoer.fout {
  border-color: var(--rood);
}
.invoer.fout:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.invoer.goed {
  border-color: var(--groen);
}
.invoer.goed:focus {
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

.veld-fout { font-size: 12px; color: var(--rood);         margin-top: 4px; }
.veld-hint { font-size: 12px; color: var(--grijs-donker); margin-top: 4px; }
.veld-ok   { font-size: 12px; color: var(--groen);        margin-top: 4px; }

/* Checkbox & Radio */
.vinkje-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.vinkje-rij input[type="checkbox"],
.vinkje-rij input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--blauw);
}

/* ---------------------------------------------------------------
   7. Tabellen (Tables)
--------------------------------------------------------------- */
.tabel-wrapper {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--schaduw);
}

/* Optioneel: scrollbare tabel op mobiel */
.tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background: var(--grijs-licht);
  padding: 11px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--grijs-donker);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}

/* Rechts uitlijnen voor getallen */
thead th.getal,
tbody td.getal {
  text-align: right;
}

tbody td {
  padding: 13px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--grijs-licht);
}

/* Lege tabel */
.tabel-leeg {
  text-align: center;
  padding: 48px 24px;
  color: var(--grijs-donker);
  font-size: 14px;
}

.tabel-leeg-icoon {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: 0.4;
}

/* Sorteerbare kolommen */
th.sorteerbaar {
  cursor: pointer;
  user-select: none;
}

th.sorteerbaar:hover {
  color: var(--tekst);
}

th.sorteerbaar::after {
  content: ' ↕';
  opacity: 0.3;
  font-size: 10px;
}

th.sorteerbaar.oplopend::after  { content: ' ↑'; opacity: 0.8; color: var(--blauw); }
th.sorteerbaar.aflopend::after  { content: ' ↓'; opacity: 0.8; color: var(--blauw); }

/* Uitklapbare detailrij */
.detail-rij td {
  padding: 0 !important;
  background: var(--grijs-licht);
}

.detail-inhoud {
  padding: 16px 20px;
  border-bottom: 2px solid var(--rand);
}

/* ---------------------------------------------------------------
   8. Badges & Status chips
--------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  gap: 4px;
}

/* Generieke kleurbadges */
.badge-groen  { background: var(--groen-licht);  color: #15803d; }
.badge-rood   { background: var(--rood-licht);   color: #b91c1c; }
.badge-oranje { background: var(--oranje-licht);  color: #92400e; }
.badge-blauw  { background: var(--blauw-bg);     color: var(--blauw); }
.badge-grijs  { background: var(--grijs);         color: var(--grijs-donker); }
.badge-paars  { background: var(--paars-licht);  color: #5b21b6; }

/* Indiening-statussen */
.badge-concept     { background: var(--grijs);        color: var(--grijs-donker); }
.badge-ingediend   { background: var(--blauw-bg);     color: var(--blauw); }
.badge-goedgekeurd { background: var(--groen-licht);  color: #15803d; }
.badge-afgekeurd   { background: var(--rood-licht);   color: #b91c1c; }
.badge-betaald     { background: var(--groen-licht);  color: #15803d; }

/* Adres-statussen */
.badge-nieuw      { background: var(--grijs);        color: var(--grijs-donker); }
.badge-bevestigd  { background: var(--groen-licht);  color: #15803d; }
.badge-weigeraar  { background: var(--rood-licht);   color: #b91c1c; }
.badge-gereed     { background: var(--blauw-bg);     color: var(--blauw); }

/* Prioriteit */
.badge-hoog   { background: var(--rood-licht);   color: #b91c1c; }
.badge-normaal{ background: var(--blauw-bg);     color: var(--blauw); }
.badge-laag   { background: var(--grijs);         color: var(--grijs-donker); }

/* Ja / Nee */
.badge-ja  { background: var(--groen-licht);  color: #15803d; }
.badge-nee { background: var(--rood-licht);   color: #b91c1c; }

/* ---------------------------------------------------------------
   9. Filterbalk
--------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--schaduw);
}

.filter-groep {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-groep label {
  font-size: 11px;
  font-weight: 600;
  color: var(--grijs-donker);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.filter-acties {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}

/* ---------------------------------------------------------------
   10. Modals
--------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal-overlay.verborgen {
  display: none;
}

.modal {
  background: var(--wit);
  border-radius: var(--radius-xl);
  padding: 28px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--schaduw-lg);
  animation: modalIn 0.2s ease-out;
}

.modal-lg {
  max-width: 720px;
}

.modal-sm {
  max-width: 400px;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.modal h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.modal-sluit {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--grijs-donker);
  font-size: 20px;
  padding: 2px;
  line-height: 1;
  flex-shrink: 0;
  border-radius: var(--radius);
  transition: color 0.15s;
}

.modal-sluit:hover {
  color: var(--tekst);
}

.modal-acties {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rand);
}

/* Bevestigingsmodal */
.bevestig-icoon {
  font-size: 40px;
  text-align: center;
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------
   11. Meldingen & Toasts
--------------------------------------------------------------- */
.melding-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.melding {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--schaduw-lg);
  min-width: 240px;
  max-width: 360px;
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: meldingIn 0.25s ease-out;
}

@keyframes meldingIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes meldingUit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

.melding.verdwijnen {
  animation: meldingUit 0.2s ease-in forwards;
}

.melding-icoon {
  font-size: 16px;
  flex-shrink: 0;
}

.melding-tekst {
  flex: 1;
}

.melding-succes       { background: var(--groen);  color: var(--wit); }
.melding-fout         { background: var(--rood);   color: var(--wit); }
.melding-info         { background: var(--tekst);  color: var(--wit); }
.melding-waarschuwing { background: var(--oranje); color: var(--wit); }

/* ---------------------------------------------------------------
   12. Notificatiebel
--------------------------------------------------------------- */
.notificatie-knop {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius);
  font-size: 18px;
  color: var(--tekst-zacht);
  transition: background 0.15s, color 0.15s;
}

.notificatie-knop:hover {
  background: var(--grijs-licht);
  color: var(--tekst);
}

.notificatie-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--rood);
  color: var(--wit);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ---------------------------------------------------------------
   13. Hub-pagina (Dashboard per rol)
--------------------------------------------------------------- */
.hub-welkom {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

.hub-sub {
  font-size: 14px;
  color: var(--grijs-donker);
  margin-bottom: 24px;
}

.hub-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.hub-kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s;
  box-shadow: var(--schaduw);
}

.hub-kaart:hover {
  border-color: var(--blauw);
  box-shadow: var(--schaduw-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.hub-kaart .hub-icoon { font-size: 28px; }
.hub-kaart .hub-naam  { font-size: 15px; font-weight: 600; color: var(--tekst); }
.hub-kaart .hub-desc  { font-size: 12px; color: var(--grijs-donker); }

/* Accentkleuren aan de linkerzijde */
.hub-kaart.kleur-blauw  { border-left: 3px solid var(--blauw); }
.hub-kaart.kleur-groen  { border-left: 3px solid var(--groen); }
.hub-kaart.kleur-oranje { border-left: 3px solid var(--oranje); }
.hub-kaart.kleur-paars  { border-left: 3px solid var(--paars); }
.hub-kaart.kleur-rood   { border-left: 3px solid var(--rood); }

/* ---------------------------------------------------------------
   14. Mobiele bottomnavigatie
--------------------------------------------------------------- */
.mobiel-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--wit);
  border-top: 1px solid var(--rand);
  padding: 8px 0 env(safe-area-inset-bottom, 8px);
  z-index: 100;
  grid-template-columns: repeat(5, 1fr);
}

.mobiel-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--grijs-donker);
  font-size: 10px;
  font-weight: 500;
  padding: 6px 4px;
  text-decoration: none;
  transition: color 0.15s;
  min-height: 44px;
  justify-content: center;
}

.mobiel-nav a .icoon { font-size: 20px; }
.mobiel-nav a.actief { color: var(--blauw); }
.mobiel-nav a:hover  { color: var(--blauw); text-decoration: none; }

/* ---------------------------------------------------------------
   15. Login-pagina
--------------------------------------------------------------- */
.login-pagina {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  padding: 24px;
}

.login-kaart {
  background: var(--wit);
  border-radius: var(--radius-xl);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--schaduw-lg);
}

.login-logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.login-logo span {
  color: var(--blauw);
}

.login-subtitel {
  font-size: 14px;
  color: var(--grijs-donker);
  margin-bottom: 28px;
}

/* ---------------------------------------------------------------
   16. Voortgangsbalk
--------------------------------------------------------------- */
.voortgang-balk {
  width: 100%;
  height: 8px;
  background: var(--grijs);
  border-radius: 4px;
  overflow: hidden;
}

.voortgang-balk-vulling {
  height: 100%;
  background: var(--blauw);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.voortgang-balk-vulling.groen  { background: var(--groen); }
.voortgang-balk-vulling.oranje { background: var(--oranje); }
.voortgang-balk-vulling.rood   { background: var(--rood); }

/* Percentage label */
.voortgang-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voortgang-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--grijs-donker);
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

/* ---------------------------------------------------------------
   17. Stap-indicator (wizard — monteur indiening)
--------------------------------------------------------------- */
.stap-indicator {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.stap {
  flex: 1;
  height: 4px;
  background: var(--grijs);
  border-radius: 2px;
}

.stap.actief { background: var(--blauw); }
.stap.klaar  { background: var(--groen); }

/* Stap-nummers */
.stap-lijst {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
}

.stap-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.stap-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--grijs);
  z-index: 0;
}

.stap-item.klaar:not(:last-child)::after  { background: var(--groen); }
.stap-item.actief:not(:last-child)::after { background: var(--blauw); }

.stap-cirkel {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grijs);
  color: var(--grijs-donker);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  z-index: 1;
  position: relative;
}

.stap-item.actief .stap-cirkel { background: var(--blauw);  color: var(--wit); }
.stap-item.klaar  .stap-cirkel { background: var(--groen);  color: var(--wit); }

.stap-naam {
  font-size: 11px;
  font-weight: 600;
  color: var(--grijs-donker);
  text-align: center;
}

.stap-item.actief .stap-naam { color: var(--blauw); }
.stap-item.klaar  .stap-naam { color: var(--groen); }

/* ---------------------------------------------------------------
   18. Uitlogknop
--------------------------------------------------------------- */
.uitloggen-knop {
  background: none;
  border: 1px solid var(--rand);
  color: var(--grijs-donker);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
  font-family: var(--font);
}

.uitloggen-knop:hover {
  border-color: var(--rood);
  color: var(--rood);
}

/* ---------------------------------------------------------------
   19. Adreskaart (planning-module)
--------------------------------------------------------------- */
.adres-kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.adres-kaart:hover {
  border-color: var(--blauw);
  box-shadow: var(--schaduw);
}

.adres-kaart.geselecteerd {
  border-color: var(--blauw);
  background: var(--blauw-bg);
}

.adres-kaart-info {
  flex: 1;
  min-width: 0;
}

.adres-kaart-straat {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adres-kaart-meta {
  font-size: 12px;
  color: var(--grijs-donker);
  margin-top: 2px;
}

/* ---------------------------------------------------------------
   20. Week display
--------------------------------------------------------------- */
.week-label {
  font-size: 12px;
  color: var(--grijs-donker);
  font-weight: 500;
}

.week-badge {
  background: var(--blauw-bg);
  color: var(--blauw);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}

/* ---------------------------------------------------------------
   21. Autocomplete dropdown
--------------------------------------------------------------- */
.ac-wrapper {
  position: relative;
}

.ac-lijst {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--wit);
  border: 1px solid var(--blauw);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 200px;
  overflow-y: auto;
  z-index: 300;
  box-shadow: var(--schaduw-md);
}

.ac-lijst.verborgen {
  display: none;
}

.ac-optie {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.1s;
}

.ac-optie:hover,
.ac-optie.actief {
  background: var(--grijs-licht);
}

.ac-tarief {
  font-size: 11px;
  color: var(--grijs-donker);
}

/* ---------------------------------------------------------------
   22. Mobiel portaal (monteur-gerichte views)
--------------------------------------------------------------- */
.portaal-kop {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  color: var(--wit);
  padding: 20px 20px 32px;
  margin: -24px -24px 24px;
}

.portaal-kop h1 {
  font-size: 20px;
  font-weight: 700;
}

.portaal-kop .portaal-sub {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 4px;
}

/* Actiekaart voor mobiel (grote touch targets) */
.actie-kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--tekst);
  transition: all 0.15s;
  margin-bottom: 12px;
  min-height: 72px;
  box-shadow: var(--schaduw);
}

.actie-kaart:hover {
  border-color: var(--blauw);
  box-shadow: var(--schaduw-md);
  text-decoration: none;
  color: var(--tekst);
}

.actie-kaart .actie-icoon {
  font-size: 28px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blauw-bg);
  border-radius: var(--radius);
}

.actie-kaart .actie-tekst strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.actie-kaart .actie-tekst span {
  font-size: 12px;
  color: var(--grijs-donker);
}

/* ---------------------------------------------------------------
   23. Laadindicatoren
--------------------------------------------------------------- */
.laden {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--grijs-donker);
  font-size: 14px;
  gap: 10px;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--grijs);
  border-top-color: var(--blauw);
  border-radius: 50%;
  animation: spinnen 0.7s linear infinite;
  flex-shrink: 0;
}

.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

@keyframes spinnen {
  to { transform: rotate(360deg); }
}

/* Skelet-lader */
.skelet {
  background: linear-gradient(90deg, var(--grijs) 25%, var(--grijs-licht) 50%, var(--grijs) 75%);
  background-size: 200% 100%;
  animation: skeletLaden 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}

@keyframes skeletLaden {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skelet-tekst  { height: 14px; margin-bottom: 8px; }
.skelet-kop    { height: 20px; width: 40%; margin-bottom: 12px; }
.skelet-knop   { height: 36px; width: 100px; }
.skelet-kaart  { height: 80px; }

/* ---------------------------------------------------------------
   24. Lege states
--------------------------------------------------------------- */
.leeg-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  color: var(--grijs-donker);
}

.leeg-state-icoon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.35;
}

.leeg-state h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--tekst-zacht);
  margin-bottom: 6px;
}

.leeg-state p {
  font-size: 13px;
  max-width: 320px;
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------
   25. Tabs
--------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--rand);
  margin-bottom: 20px;
}

.tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grijs-donker);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--font);
  white-space: nowrap;
}

.tab:hover {
  color: var(--tekst);
}

.tab.actief {
  color: var(--blauw);
  border-bottom-color: var(--blauw);
}

/* Pill tabs variant */
.tabs-pill {
  display: flex;
  gap: 6px;
  background: var(--grijs-licht);
  padding: 4px;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tabs-pill .tab {
  border-bottom: none;
  border-radius: var(--radius);
  padding: 7px 14px;
  margin-bottom: 0;
}

.tabs-pill .tab.actief {
  background: var(--wit);
  color: var(--tekst);
  box-shadow: var(--schaduw);
}

/* ---------------------------------------------------------------
   26. Waarschuwingsblokken (inline alerts)
--------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
}

.alert-icoon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

.alert-info         { background: var(--blauw-bg);    border-left: 3px solid var(--blauw);  color: var(--blauw); }
.alert-succes       { background: var(--groen-licht); border-left: 3px solid var(--groen);  color: #15803d; }
.alert-waarschuwing { background: var(--oranje-licht); border-left: 3px solid var(--oranje); color: #92400e; }
.alert-gevaar       { background: var(--rood-licht);  border-left: 3px solid var(--rood);   color: #b91c1c; }

/* ---------------------------------------------------------------
   27. Paginering (Pagination)
--------------------------------------------------------------- */
.paginering {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 0;
}

.pagina-knop {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--rand);
  background: var(--wit);
  color: var(--tekst-zacht);
  transition: all 0.15s;
  font-family: var(--font);
}

.pagina-knop:hover {
  border-color: var(--grijs-donker);
  color: var(--tekst);
}

.pagina-knop.actief {
  background: var(--blauw);
  border-color: var(--blauw);
  color: var(--wit);
  font-weight: 600;
}

.pagina-knop:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.paginering-info {
  font-size: 12px;
  color: var(--grijs-donker);
  padding: 0 8px;
}

/* ---------------------------------------------------------------
   28. Utility classes
--------------------------------------------------------------- */
.verborgen  { display: none !important; }
.onzichtbaar { visibility: hidden; }

/* Tekst uitlijning */
.tekst-rechts { text-align: right; }
.tekst-midden { text-align: center; }
.tekst-links  { text-align: left; }

/* Gewicht */
.vetgedrukt   { font-weight: 700; }
.normaalgewicht { font-weight: 400; }

/* Kleur */
.grijs        { color: var(--grijs-donker); }
.groen-tekst  { color: var(--groen); }
.rood-tekst   { color: var(--rood); }
.blauw-tekst  { color: var(--blauw); }
.oranje-tekst { color: var(--oranje); }
.paars-tekst  { color: var(--paars); }

/* Mono */
.mono { font-family: var(--font-mono); font-size: 0.9em; }

/* Marges */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

/* Flex */
.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.gap-4           { gap: 4px; }
.gap-8           { gap: 8px; }
.gap-12          { gap: 12px; }
.gap-16          { gap: 16px; }

/* Breedte */
.w-full  { width: 100%; }
.w-half  { width: 50%; }
.w-auto  { width: auto; }

/* Afronding */
.afgerond-vol { border-radius: 9999px; }

/* Scheidslijn */
.scheiding {
  border: none;
  border-top: 1px solid var(--rand);
  margin: 16px 0;
}

/* Sectielabel */
.sectie-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--grijs-donker);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Truncate tekst */
.afkappen {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------
   29. Responsief — Tablet & Mobiel
--------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Verberg zijbalk, toon mobiele nav */
  .zijbalk { display: none; }
  .hoofdinhoud {
    margin-left: 0;
    padding: 16px;
    padding-bottom: 80px; /* ruimte voor mobiele nav */
    max-width: 100%;
  }
  .mobiel-nav { display: grid; }

  /* Pagina-kop */
  .paginakop h1 { font-size: 18px; }

  /* Formulieren stapelen */
  .formulier-rij   { flex-direction: column; }
  .formulier-veld  { min-width: unset; }

  /* KPI-rasters */
  .kpi-raster  { grid-template-columns: 1fr 1fr; }
  .hub-raster  { grid-template-columns: 1fr 1fr; }

  /* Modals */
  .modal { padding: 20px; }
  .modal-lg { max-width: 100%; }

  /* Login */
  .login-kaart { padding: 24px; }

  /* Grotere aanraakdoelen */
  .invoer  { min-height: 46px; padding: 10px 12px; }
  .knop    { min-height: 44px; padding: 10px 16px; }
  .knop-sm { min-height: 38px; }

  /* Meldingen laag boven nav */
  .melding-container {
    bottom: 80px;
    right: 16px;
    left: 16px;
  }

  /* Verberg kolommen op mobiel */
  th.d-none-sm,
  td.d-none-sm { display: none; }

  /* Portaalkop vult scherm */
  .portaal-kop {
    margin: -16px -16px 20px;
    padding: 16px 16px 28px;
  }

  /* Tabs scrollen horizontaal */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
}

@media (max-width: 480px) {
  /* Enkele kolom op klein scherm */
  .kpi-raster { grid-template-columns: 1fr; }
  .hub-raster { grid-template-columns: 1fr; }

  /* Filters stapelen volledig */
  .filters { flex-direction: column; }
  .filter-acties { margin-left: 0; width: 100%; }

  /* Modals volledig scherm */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 95vh;
    padding: 20px 16px;
    animation: modalInMobiel 0.25s ease-out;
  }

  @keyframes modalInMobiel {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Hub-kaarten krimpen niet te klein */
  .hub-kaart { padding: 16px; }
  .hub-kaart .hub-icoon { font-size: 24px; }
}

/* ---------------------------------------------------------------
   30. Afdrukken (Print)
--------------------------------------------------------------- */
@media print {
  .zijbalk,
  .mobiel-nav,
  .modal-overlay,
  .melding-container,
  .notificatie-knop,
  .filters,
  .paginering {
    display: none !important;
  }

  .hoofdinhoud {
    margin-left: 0;
    padding: 0;
    max-width: 100%;
  }

  .tabel-wrapper {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .kaart {
    box-shadow: none;
    break-inside: avoid;
  }

  a {
    text-decoration: none;
    color: var(--tekst);
  }

  .badge {
    border: 1px solid currentColor;
  }

  body {
    background: white;
    font-size: 12px;
  }
}