.material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 400, 'OPSZ' 20; font-size: 18px; vertical-align: middle; line-height: 1; user-select: none; }
/* ── Bolder — Gemeente Rotterdam huislettertype ── */
@font-face {
  font-family: 'Bolder';
  src: url('/fonts/Bolder-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bolder';
  src: url('/fonts/Bolder-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bolder';
  src: url('/fonts/Bolder-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bolder';
  src: url('/fonts/Bolder-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bolder Heading';
  src: url('/fonts/Bolder-Heading.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Kenteken — LeFly (c) 2004. Alleen voor kenteken-weergave. */
@font-face {
  font-family: 'Kenteken';
  src: url('/fonts/Kenteken.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════
   THEMA: Werkplaats Pro (standaard)
   ══════════════════════════════════════════════════════ */
:root,
[data-theme="wendle"] {
  /* ── Wendle — Vervoer en Materieel Rotterdam ── */
  /* Palette #87394 — Muted · Earth · Ocean · Vintage */
  --accent:        #91A471;  /* Saliegroen — succes, actief, goedgekeurd */
  --primary:       #668BC4;  /* Staalblauwe Hemel — knoppen, links, focus */
  --primary-dark:  #335495;  /* Marineblauw — headers, titels */
  --primary-light: rgba(102,139,196,0.12); /* Hover-laag */
  --text:          #040A1B;  /* Nachtblauw — donkere tekst */
  --white:         #FEFEFE;
  --op-accent:     white;    /* v189.70: tekst op een gekleurde chip/avatar — bewust wit in licht én dark */
  --input-placeholder: #94A3B8;  /* v189.78: placeholder/hint-tekst in formuliervelden (was hardcoded) */
  --bg:            #F4F6FA;  /* Lichtblauw-grijs paginaachtergrond */
  --surface:       #FEFEFE;  /* Kaartachtergrond */
  --border:        #A5BECF;  /* IJsblauw — kaart- en inputranden */
  --muted:         #334465;  /* Leisteen — labels, secondaire info */
  --success:       #91A471;  /* Saliegroen */
  --cat-groen:     #43A047;  /* Groen van de voertuigcategorie-badge (N1) — zelfde in licht/dark */
  --danger:        #C0392B;  /* Fout / afgewezen */
  --warn:          #D4870A;  /* Waarschuwing */
  --navy:          #040A1B;  /* Nachtblauw — nav, zware koppen */
  --slate:         #334465;  /* Leisteen */
  --icoon:         #324363;  /* Wendle icoon-tint — actieve labels / list-headers */
  --telling:       #C2185B;  /* Magenta — accent voor count-badges, attention-cijfers */
  --blok-inactief-bg:    #6B7280;  /* grijze 'niet meer actief'-tile (afgerond/afgevoerd) — theme-onafhankelijk */
  --blok-inactief-tekst: #0F172A;
  --font:          'Bolder', sans-serif;
  --font-display:  'Bolder Heading', 'Bolder', sans-serif;
  --radius:        8px;
  --radius-lg:     12px;
  --shadow-card:   0 2px 8px rgba(4, 10, 27, 0.06);
  --shadow-modal:  0 8px 32px rgba(4, 10, 27, 0.18);
}

/* ══════════════════════════════════════════════════════
   THEMA: Werkplaats Pro (legacy, Apple kleuren)
   ══════════════════════════════════════════════════════ */
[data-theme="werkplaats"] {
  --accent:        #FF9500;
  --primary:       #007AFF;
  --primary-dark:  #0051A8;
  --primary-light: #F0F6FF;
  --icoon:         #1D1D1F;
  --telling:       #FF2D55;  /* iOS pink */
  --text:          #1D1D1F;
  --white:         #FFFFFF;
  --bg:            #F5F5F7;
  --surface:       #FFFFFF;
  --border:        #E0E0E5;
  --muted:         #86868B;
  --success:       #34C759;
  --danger:        #FF3B30;
  --warn:          #FF9500;
  --font:          'Bolder', sans-serif;
  --font-display:  'Bolder Heading', 'Bolder', sans-serif;
  --radius:        8px;
  --radius-lg:     14px;
}

/* ══════════════════════════════════════════════════════
   THEMA: Neutraal (Universal Design System)
   ══════════════════════════════════════════════════════ */
[data-theme="neutraal"] {
  --accent:        #2563EB;
  --primary:       #3B82F6;
  --primary-dark:  #1D4ED8;
  --primary-light: #DBEAFE;
  --icoon:         #111827;
  --telling:       #DB2777;
  --text:          #111827;
  --white:         #FFFFFF;
  --bg:            #F7F7F8;
  --surface:       #FFFFFF;
  --border:        #E5E7EB;
  --muted:         #6B7280;
  --success:       #22C55E;
  --danger:        #EF4444;
  --warn:          #F59E0B;
  --blok-inactief-bg:    #6B7280;  /* grijze 'niet meer actief'-tile (afgerond/afgevoerd) — theme-onafhankelijk */
  --blok-inactief-tekst: #0F172A;
  --font:          'Bolder', sans-serif;
  --font-display:  'Bolder Heading', 'Bolder', sans-serif;
  --radius:        8px;
  --radius-lg:     12px;
}

/* ══════════════════════════════════════════════════════
   THEMA: Apple iOS 18
   Bron: Apple Human Interface Guidelines 2024
   ══════════════════════════════════════════════════════ */
[data-theme="apple"] {
  --accent:        #FF9500;  /* iOS System Orange */
  --primary:       #007AFF;  /* iOS System Blue */
  --primary-dark:  #0051A8;  /* Blue pressed */
  --primary-light: #D6E8FF;  /* Blue tint */
  --icoon:         #1D1D1F;  /* iOS icoon-tint */
  --telling:       #FF2D55;  /* iOS System Pink */
  --text:          #1D1D1F;  /* Apple label primary */
  --white:         #FFFFFF;
  --bg:            #F2F2F7;  /* iOS grouped background */
  --surface:       #FFFFFF;  /* iOS secondary grouped */
  --border:        #D1D1D6;  /* iOS separator */
  --muted:         #8E8E93;  /* iOS label secondary */
  --success:       #34C759;  /* iOS System Green */
  --danger:        #FF3B30;  /* iOS System Red */
  --warn:          #FF9500;  /* iOS System Orange */
  --font:          'Bolder', sans-serif;
  --font-display:  'Bolder Heading', 'Bolder', sans-serif;
  --radius:        10px;     /* iOS control radius */
  --radius-lg:     16px;     /* iOS card radius */
}

/* ══════════════════════════════════════════════════════
   NACHTMODUS (dark) — losse as t.o.v. merkthema (data-theme).
   Geactiveerd via data-mode="dark" op <html> (key: cd_theme).
   Mat-neutraal grijs-zwart, Jira-stijl. Diepte via lichtheid,
   niet via schaduw. Overschrijft de merkthema-tokens dankzij
   hogere specificiteit (:root[data-mode] = 0,2,0) + plaatsing.
   Spec: DESIGN_TOKENS_COOLDUDE.md § Nachtmodus.
   ══════════════════════════════════════════════════════ */
:root[data-mode="dark"] {
  /* Native controls (checkbox, radio, date-picker, select-popup) donker laten
     renderen door de browser i.p.v. wit. */
  color-scheme: dark;
  /* Surface-ladder */
  --bg:            #0C0D0F;  /* App-achtergrond — mat near-black, geen #000 */
  --white:         #16171A;  /* Kaart / paneel / modal */
  --op-accent:     white;    /* v189.70: tekst op een gekleurde chip/avatar — bewust wit in beide modi */
  --input-placeholder: #6B7280;  /* v189.78: placeholder dimmer op donker oppervlak */
  --surface:       #16171A;
  --surface-2:     #1F2125;  /* Hover / verhoogd oppervlak */
  --surface-alt:   #1F2125;  /* Subtiele paneel-/chip-vulling (skill-chips, mini-forms) */
  --border:        #26282D;  /* Border / divider — laag contrast */
  /* Tekst */
  --text:          #E6E8EC;  /* Primair — zacht wit, niet #FFF */
  --muted:         #9BA1AD;  /* Secundair */
  --slate:         #9BA1AD;
  --icoon:         #8A8F99;  /* Icoon-tint */
  /* Accenten — iets feller zodat ze op donker poppen */
  --accent:        #A6BA86;
  --primary:       #7BA0D6;
  --primary-dark:  #4373B8;  /* iets donkerder zodat witte knoptekst ≥4.5:1 haalt (4.75) */
  --primary-light: rgba(123,160,214,0.16); /* Hover-laag */
  --success:       #A6BA86;
  --cat-groen:     #43A047;  /* Groen van de voertuigcategorie-badge (N1) — zelfde in licht/dark */
  --danger:        #F2584C;
  --warn:          #F59E0B;  /* ongewijzigd */
  --blok-inactief-bg:    #6B7280;  /* zelfde grijze tile in dark — kleurtegel staat los van thema */
  --blok-inactief-tekst: #0F172A;
  --telling:       #E84A86;
  /* WCAG-AA tekst-varianten op donker (op kaart #16171A): accent/status als tekst
     juist iets lichter dan op licht. */
  --link:          #7BA0D6;  /* accent-tekst op donker — 6.69:1 */
  --success-text:  #A6BA86;  /* groene tekst op donker — 8.53:1 */
  --warn-text:     #F59E0B;  /* oranje tekst op donker — 8.35:1 */
  --switch-knop:   #E6E8EC;  /* schakelaar-knop op donker — zacht wit */
  /* --navy: header/chrome blijft een donker oppervlak; iets opgetild
     t.o.v. --bg zodat de navy header zich aftekent (was #040A1B → zou
     in dark wegvallen tegen de achtergrond). NIET als tekstkleur gebruiken. */
  --navy:          #1A1B1F;
  /* Schaduwen op donker nauwelijks zichtbaar → diepere alpha */
  --shadow-card:   0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-modal:  0 8px 32px rgba(0, 0, 0, 0.55);
}

/* --surface-2 ook in licht beschikbaar (zodat componenten die 'm
   gebruiken niet stuk gaan buiten dark mode) */
:root {
  --surface-2: #EEF1F5; --surface-alt: #F5F6FA; color-scheme: light;
  /* WCAG-AA tekst-varianten (≥4.5:1 op licht). Accent-/status-kleuren als KLEINE
     tekst op wit zakken onder 4.5:1 (--primary 3.44, --success 2.69, --warn 2.86),
     dus aparte tekst-tokens. De felle varianten blijven voor vlakken/knoppen. */
  --link:         #335495;  /* accent-tekst (links/labels) — 7.32:1 op wit */
  --success-text: #4F7A3C;  /* groene tekst op licht — 4.98:1 */
  --warn-text:    #B45309;  /* oranje tekst op licht — 4.98:1 */
  --switch-knop:  #FEFEFE;  /* schakelaar-knop — blijft licht in beide modi (native-conventie) */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
/* overflow-x: hidden NIET op html/body — breekt position:sticky.
   Als een specifiek element overflow nodig heeft, regel dat op dat element. */
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; min-height: 100vh; -webkit-tap-highlight-color: transparent; }

/* Globale scrollbars — token-gebaseerd, donker in nachtmodus. Specifiekere
   regels (bv. .gantt-outer) overschrijven dit waar nodig. */
html { scrollbar-color: var(--border) var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; border:3px solid var(--bg); background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }
::-webkit-scrollbar-corner { background:var(--bg); }

/* ── Zichtbare focus-indicator (WCAG 2.4.7 / 1.4.11) ──
   Alleen bij toetsenbord-navigatie (:focus-visible), niet bij muisklik. Token-kleur
   --link haalt ≥3:1 niet-tekst-contrast in licht én donker. Inputs houden hun eigen
   focus-ring (border + box-shadow) → daar geen dubbele outline. */
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.form-input:focus-visible, .form-control:focus-visible, .login-input:focus-visible,
.pr-rail-zoek input:focus-visible, .bp-zoek-input:focus-visible { outline: none; }

/* ── PAGE CONTAINER ── */
.page-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ── LOGIN SCHERM ── */
/* 100% immuun voor nachtmodus: forceer lichte tokens + color-scheme op het
   login-scherm zelf. ID-specificiteit (1,0,0) wint altijd van :root[data-mode],
   dus ongeacht of data-mode="dark" op <html> staat, blijft login licht. */
#login-scherm {
  color-scheme: light;
  --bg:           #F4F6FA;
  --white:        #FEFEFE;
  --surface:      #FEFEFE;
  --border:       #A5BECF;
  --text:         #040A1B;
  --navy:         #040A1B;
  --muted:        #334465;
  --danger:       #C0392B;
}
#login-scherm {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
#login-hero {
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, #040A1B 0%, #335495 60%, #668BC4 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px;
  min-height: 100vh;
  overflow: hidden;
}
#login-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity 0.4s;
}
#login-hero-overlay {
  position: absolute; inset: 0;
  background: rgba(4,10,27,0.45);
  transition: background 0.3s;
}
.login-hero-content { position: relative; z-index: 2; }
.login-hero-brand { display: flex; align-items: center; gap: 14px; }
.login-hero-brand-tekst { margin-bottom: 12px; }
.login-hero-brand-tekst .login-hero-appnaam { font-size: 15px; font-weight: 800; color: #FEFEFE; letter-spacing: -0.2px; line-height: 1.2; }
.login-hero-brand-tekst .login-hero-appsub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.login-hero-logo {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; color: white;
  text-transform: uppercase; letter-spacing: 0.5px; overflow: hidden; flex-shrink: 0;
}
.login-hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.login-hero-appnaam { font-size: 15px; font-weight: 800; color: #FEFEFE; letter-spacing: -0.2px; line-height: 1.2; }
.login-hero-appsub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.login-hero-slogan {
  margin-top: 16px;
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 900; color: #FEFEFE;
  line-height: 1.1; letter-spacing: -1px; max-width: 520px;
}
.login-hero-slogan em { font-style: normal; color: #A5BECF; }
.login-hero-slogan .slogan-dim { color: #A5BECF; }
#login-paneel {
  width: 420px; flex-shrink: 0;
  background: #FEFEFE;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 40px;
  position: relative; z-index: 10;
}
.login-box { width: 100%; max-width: 340px; }
.login-box-titel { font-size: 20px; font-weight: 900; color: var(--navy); letter-spacing: -0.4px; margin-bottom: 4px; }
.login-box-sub { font-size: 12px; color: var(--muted); margin-bottom: 32px; }
.login-paneel-logo { text-align: center; margin-bottom: 32px; }
.login-paneel-logo-img { width: 220px; max-width: 100%; height: auto; }
.login-logo { display: none; }
.login-title { display: none; }
.login-sub { display: none; }
.login-label { font-size: 11px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 5px; }
.login-input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: var(--font); font-size: 14px; outline: none;
  transition: border-color 0.15s; margin-bottom: 16px; background: #F8FAFD;
}
.login-input:focus { border-color: #668BC4; box-shadow: 0 0 0 3px rgba(102,139,196,0.20); background: #fff; }
.login-btn {
  width: 100%; padding: 12px;
  background: var(--primary-dark); color: #FEFEFE;
  border: none; border-radius: var(--radius);
  font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.15s; margin-top: 4px; letter-spacing: 0.02em;
}
.login-btn:hover { background: #27407A; }
.login-btn:disabled { opacity: 0.6; cursor: default; }
/* v191.9: display:none verwijderd — Vue's v-if regelt de zichtbaarheid; met display:none bleef
   de foutmelding onzichtbaar (gebruiker kreeg geen feedback bij een foute login). */
.login-fout { background: #FDEAEA; border: 1px solid #F5AAAA; border-radius: var(--radius); padding: 10px 14px; font-size: 12px; color: var(--danger); margin-top: 12px; }
/* v191.9: prominente rode "moet wachten"-melding bij account-lockout (5 foute pogingen). */
.login-lockout { display: flex; gap: 10px; align-items: flex-start; background: #FDEAEA; border: 1px solid #E89A9A; border-left: 4px solid var(--danger); border-radius: var(--radius); padding: 12px 14px; margin-top: 12px; }
.login-lockout > .material-symbols-rounded { font-size: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--danger); }
.login-lockout-titel { font-size: 13px; font-weight: 700; color: var(--danger); margin-bottom: 2px; }
.login-lockout-sub { font-size: 12px; color: #9B4A44; line-height: 1.5; }
.login-lockout-tijd { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--danger); }
@media (max-width: 768px) {
  #login-scherm { flex-direction: column; }
  #login-hero { min-height: 240px; padding: 28px 24px 36px; flex: none; }
  .login-hero-slogan { font-size: 22px; margin-top: 24px; }
  #login-paneel { width: 100%; flex: 1; padding: 32px 20px; box-shadow: none; overflow-y: auto; }
}
@media (orientation: landscape) and (max-height: 600px) {
  #login-scherm { flex-direction: row; }
  #login-hero { min-height: unset; padding: 20px 24px; flex: 1; }
  .login-hero-slogan { font-size: 18px; margin-top: 16px; }
  #login-paneel { width: 360px; flex-shrink: 0; overflow-y: auto; padding: 20px 24px; }
}
/* ── APP SHELL ── */
#app-shell { display: none; }

/* ── HEADER ── */
.header {
  background: var(--navy, #040A1B); padding: env(safe-area-inset-top) 32px 0 32px;
  height: auto; min-height: calc(64px + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between;
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(4,10,27,0.18);
}
/* Compenseer fixed header met padding-top — alleen als de header daadwerkelijk in DOM staat (= ingelogd, niet op login-scherm) */
body:has(.header) { padding-top: calc(64px + env(safe-area-inset-top)); }
.header-brand { display: flex; align-items: center; gap: 14px; }
.logo { width: 56px; height: 56px; background: var(--primary-dark); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 9px; color: white; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.1; text-align: center; overflow: hidden; flex-shrink: 0; }
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo:has(img) { background: transparent; }
.logo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 100%; }
.header-title { font-weight: 700; font-size: 15px; color: #FEFEFE; letter-spacing: -0.3px; }
.header-subtitle { font-size: 11px; color: #A5BECF; }
.header-right { display: flex; align-items: center; gap: 12px; }
.user-chip { font-size: 12px; color: #FEFEFE; background: rgba(255,255,255,0.08); padding: 5px 12px; border-radius: 20px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(165,190,207,0.3); }
.user-rol { font-size: 10px; opacity: 0.75; }
.btn-logout { background: transparent; border: 1.5px solid rgba(165,190,207,0.4); color: #A5BECF; border-radius: var(--radius); padding: 5px 12px; font-size: 11px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.15s; }
.btn-logout:hover { background: rgba(255,255,255,0.1); color: #FEFEFE; }

/* ── AVATAR + PROFIEL DROPDOWN ── */
.header-avatar-wrap { position: relative; flex-shrink: 0; z-index: 600; }
.header-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary); border: 2px solid rgba(165,190,207,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white;
  cursor: pointer; overflow: hidden; transition: border-color 0.15s;
  font-family: var(--font);
}
.header-avatar:hover { border-color: #A5BECF; }
.header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profiel-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  min-width: 200px; z-index: 500; overflow: hidden;
  display: none;
}
.profiel-dropdown.open { display: block; }
.profiel-dropdown-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid transparent;
  background: var(--navy);
}
.profiel-dropdown-naam { font-weight: 700; font-size: 13px; color: #A5BECF; }
.profiel-dropdown-rol  { font-size: 11px; color: #A5BECF; opacity: 0.75; margin-top: 2px; }
.profiel-dropdown-header > div { color: #A5BECF; }
.profiel-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; font-size: 13px; color: var(--text);
  cursor: pointer; transition: background 0.1s; font-family: var(--font);
  border: none; background: none; width: 100%; text-align: left;
}
.profiel-dropdown-item:hover { background: var(--bg); }
.profiel-dropdown-item .material-symbols-rounded { font-size: 18px; color: var(--muted); }
.profiel-dropdown-item.danger { color: var(--danger); }
.profiel-dropdown-item.danger .material-symbols-rounded { color: var(--danger); }
.profiel-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── TABS ── */
.tabs { display: flex; background: var(--surface); padding: 0 32px; border-bottom: 2px solid var(--border); position: sticky; top: calc(64px + env(safe-area-inset-top)); z-index: 190; }
.tab { padding: 12px 18px; font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
.tab:hover { color: var(--primary-dark); }
.tab.active { color: var(--link); border-bottom-color: var(--primary); font-weight: 700; }
.tab.verborgen { display: none; }
.tab-badge { background: var(--danger); color: white; border-radius: 10px; padding: 1px 7px; font-size: 10px; margin-left: 4px; display: none; }
.tab-badge.zichtbaar { display: inline; }
#badge-recall, #badge-klant, #badge-wagenpark { display: none !important; }

/* ── TABLET NAV: linkerzijbalk met iconen — tablet landscape (768px – 1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .header { position:fixed; top:0; left:0; right:0; z-index:100; }
  .tabs { position:fixed; left:0; top:calc(64px + env(safe-area-inset-top)); bottom:0; width:56px; flex-direction:column; padding:12px 4px 8px; border-bottom:none; border-right:1px solid var(--border); overflow-x:hidden; overflow-y:auto; z-index:90; align-items:center; justify-content:flex-start; }
  .tab { display:flex; flex-direction:column; align-items:center; justify-content:center; width:48px; padding:10px 0; border-bottom:none; border-left:3px solid transparent; border-radius:8px; margin-bottom:2px; margin-bottom-color:0; font-size:0; line-height:0; letter-spacing:0; position:relative; }
  .tab .material-symbols-rounded { font-size:22px; display:block; line-height:1; }
  .tab.active { background:rgba(51,84,149,0.1); color:var(--primary); border-bottom-color:transparent; border-left-color:var(--primary); }
  .tab.active .material-symbols-rounded { color:var(--primary); }
  .tab-badge { position:absolute; top:4px; right:4px; padding:1px 4px; margin:0; font-size:9px; min-width:14px; text-align:center; }
  .content { margin-left:56px; padding:20px 20px; }
  .page-outer { padding-top:calc(64px + env(safe-area-inset-top)); margin-left:56px; }
}

/* ── MOBIEL NAV: onderbalk met iconen — telefoon + tablet portrait ── */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .tabs { position:fixed; bottom:0; left:0; right:0; top:auto; height:calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); flex-direction:row; padding-left:0; padding-right:0; padding-top:0; border-bottom:none; border-top:1px solid var(--border); overflow-x:auto; overflow-y:hidden; z-index:90; align-items:flex-start; justify-content:flex-start; -webkit-overflow-scrolling:touch; background:var(--white); }
  .tab { display:flex; flex:0 0 auto; min-width:56px; flex-direction:column; align-items:center; justify-content:center; padding:8px 12px; border-bottom:none; border-top:3px solid transparent; margin-bottom:0; font-size:0; line-height:0; letter-spacing:0; position:relative; border-radius:0; }
  .tab .material-symbols-rounded { font-size:22px; display:block; line-height:1; }
  .tab.active { border-bottom-color:transparent; border-top-color:var(--primary); color:var(--primary); background:rgba(51,84,149,0.06); }
  .tab.active .material-symbols-rounded { color:var(--primary); }
  .tab-badge { position:absolute; top:4px; right:6px; padding:1px 4px; margin:0; font-size:9px; min-width:14px; text-align:center; }
  .content { padding:16px 16px calc(76px + env(safe-area-inset-bottom, 0px)) 16px; }
}

/* ── CONTENT ── */
.page-outer { padding: 0 32px; }
.page-outer:has(#login-scherm) { padding: 0 !important; margin: 0 !important; width: 100% !important; }
.content { padding: 28px 32px; display: block; }
.page-outer .content { padding-left: 0; padding-right: 0; }
.content.active { display: block; }

/* ── PAGE HEADER ── */
.page-header { margin-top: 13px; margin-bottom: 13px; }
.content .page-header { margin-top: 0; }
.feit { font-family: var(--font-display); font-weight: 900; font-size: 26px; text-transform: none; color: var(--text); letter-spacing: -0.5px; line-height: 1; }
.feit::after { content: '.'; }
.slogan { font-family: var(--font); color: var(--muted); font-size: 13px; margin-top: 4px; font-weight: 300; font-style: italic; }
.header-versie::after { content: 'v191.19 · 27-06-2026 20:10'; font-size: 9px; font-weight: 400; color: #A5BECF; opacity: 0.55; font-family: monospace; letter-spacing: 0.2px; }

/* ── SCOREBOARD (concentrische ringen) ── */
.scoreboard {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  margin-bottom: 24px; padding: 8px 0;
  background: transparent; border: 0; box-shadow: none;
}
.ring-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.ring-wrap { position:relative; width:160px; height:160px; }
.ring-svg { width:100%; height:100%; display:block; }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.ring-value { font-weight: 900; font-size: 34px; line-height: 1; color: var(--primary-dark); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.ring-icon  { color: var(--slate, #334465); opacity: 0.55; display:flex; }
.ring-icon .material-symbols-rounded { font-size: 24px; }
.ring-label { font-size: 13px; font-weight: 800; color: var(--link); margin-top: 4px; }
.ring-sub   { font-size: 11px; color: var(--slate, #334465); opacity: 0.65; }

@media (max-width: 1100px) { .scoreboard { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .scoreboard { grid-template-columns: repeat(2, 1fr); } .ring-wrap { width:130px; height:130px; } .ring-value { font-size:26px; } }

/* legacy .score-* (overige plekken — bv. Import.js) */
.score-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card, 0 2px 8px rgba(4,10,27,0.06));
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
/* Kleuraccent = dunne linker balk, rest blijft wit */
.score-card.danger::before  { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--danger); border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
.score-card.warn::before    { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--warn);   border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
.score-card.success::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--success);border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
.score-card.orange::before  { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
.score-card.blue::before    { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--primary);border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
/* Label: klein, uppercase, leisteen grijs — zoals "DASHBOARD CARD" in foto */
.score-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--slate, #334465); margin-bottom: 6px; min-height: 24px; display: flex; align-items: center; gap: 4px; opacity: 0.75; }
/* Getal: groot, donkerblauw (#335495) — zoals "82%" in foto */
.score-value { font-weight: 900; font-size: 32px; line-height: 1; color: var(--primary-dark); }
.score-value.danger  { color: var(--danger); }
.score-value.warn    { color: var(--warn-text); }
.score-value.success { color: var(--success-text); }
.score-value.blue    { color: var(--primary-dark); }
.score-value.orange  { color: var(--accent); }
/* Subtekst: klein grijs — zoals "Weekly satisfaction" in foto */
.score-sub { font-size: 11px; color: var(--slate, #334465); margin-top: 5px; min-height: 16px; opacity: 0.65; }

/* ── VOORTGANG ── */
.progress-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 24px; display: none; }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.progress-title { font-weight: 900; font-size: 12px; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.5px; }
.progress-pct { font-size: 13px; font-weight: 700; color: var(--link); }
.progress-bar-bg { background: #A5BECF; border-radius: 999px; height: 6px; overflow: hidden; }
.progress-bar-fill { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.progress-leg { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.progress-leg-item { font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.leg-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ── FILTER BALK ── */
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }

/* ── v18: weergave-toggle per voertuig / per model ── */
.weergave-toggle { display: flex; gap: 24px; margin-bottom: 16px; }
.weergave-toggle-opt {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  cursor: pointer; user-select: none; transition: color 0.15s;
}
.weergave-toggle-opt.actief { color: var(--link); font-weight: 700; }
.weergave-toggle-opt .material-symbols-rounded { font-size: 18px; }

/* ── v18: model-tabel ── */
.model-tabel-rij { cursor: pointer; }
.model-tabel-rij:hover td { background: var(--primary-light); }
.model-stat { font-size: 12px; color: var(--muted); }
.model-stat.ernstig { color: var(--danger); font-weight: 600; }
.model-stat.openstaand { color: var(--warn-text); font-weight: 600; }
.model-stat.afgerond { color: var(--success-text); }
.model-detail-modal { display: none; }
#modal-model-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding-top: 40px; }
#modal-model-overlay.open { display: flex; }
#modal-model-box { background: var(--surface); border-radius: var(--radius); width: min(820px, 95vw); max-height: 85vh; overflow-y: auto; padding: 28px 28px 20px; position: relative; }
#modal-model-titel { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 4px; }
#modal-model-sub { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.filter-group { display: flex; align-items: center; gap: 6px; }
.filter-label { font-size: 10px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
select, input[type="text"], input[type="email"], input[type="password"] {
  font-family: var(--font); font-size: 12px; padding: 7px 10px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--white); color: var(--text); outline: none; transition: border-color 0.15s;
}
select:focus, input:focus { border-color: #668BC4; box-shadow: 0 0 0 3px rgba(102,139,196,0.18); }
.result-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--white); border: 1px solid var(--border); padding: 7px 12px; border-radius: var(--radius); min-height: 38px; display: flex; align-items: center; box-sizing: border-box; }

/* ── BADGES ── */
.badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
/* Type-badges: volledig verwijderd — vervangen door .soort-label plain tekst */
.badge-intern    { background: transparent; color: #6B7280; border: none; padding: 0; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.badge-extern    { background: transparent; color: #6B7280; border: none; padding: 0; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.badge-onbekend  { background: transparent; color: #9CA3AF; border: none; padding: 0; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
/* Soort-label: plain tekst, geen badge */
.soort-label { font-size: 11px; color: var(--muted); font-weight: 400; }
/* Rol-badges: neutraal */
.badge-admin     { background: transparent; color: #6B7280; border: 1px solid #D1D5DB; }
.badge-werkplaats{ background: transparent; color: #6B7280; border: 1px solid #D1D5DB; }
.badge-importeur { background: transparent; color: #6B7280; border: 1px solid #D1D5DB; }
.badge-manager   { background: transparent; color: #6B7280; border: 1px solid #D1D5DB; }
/* Prioriteit-badges: kleur behouden — functionele info */
.badge-ernstig   { background: rgba(192,57,43,0.08); color: var(--danger); border: 1px solid rgba(192,57,43,0.25); }
.badge-gemiddeld { background: rgba(212,135,10,0.08); color: var(--warn-text); border: 1px solid rgba(212,135,10,0.25); }
.badge-laag      { background: rgba(102,139,196,0.12); color: var(--primary-dark); border: 1px solid rgba(102,139,196,0.35); }
/* Overige status-badges */
.badge-recall    { background: #FDEAEA; color: var(--danger); border: 1px solid #F5AAAA; }
.badge-ok        { background: rgba(145,164,113,0.12); color: #5A6B45; border: 1px solid rgba(145,164,113,0.4); }
.badge-count     { background: var(--border); color: var(--muted); border: 1px solid var(--border); font-weight: 700; }
.badge-muted   { background: var(--bg);           color: var(--muted);         border: 1px solid var(--border); }
.badge-blauw   { background: rgba(37,99,235,.10);  color: #2563eb;              border: 1px solid rgba(37,99,235,.25); }
.badge-paars   { background: rgba(124,58,237,.10); color: #7c3aed;              border: 1px solid rgba(124,58,237,.25); }
.badge-oranje  { background: rgba(217,119,6,.10);  color: var(--warn-text);          border: 1px solid rgba(217,119,6,.25); }
.badge-groen   { background: rgba(22,163,74,.10);  color: var(--success-text);       border: 1px solid rgba(22,163,74,.25); }
tr.ovz-rij.actief { background: rgba(37,99,235,.06) !important; }

/* ── ACTIE KAART ── */
/* ── CARD GRID LAYOUT ── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

/* ── WERK ORDER CARD ── */
.actie-kaart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.18s;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card, 0 2px 8px rgba(4,10,27,0.06));
}
.actie-kaart:hover { box-shadow: 0 6px 20px rgba(4,10,27,0.12); transform: translateY(-2px); }
.actie-kaart.status-afgerond { opacity: 0.55; }
.actie-kaart.status-nvt      { opacity: 0.45; }

/* Prio indicator: dunne balk boven */
.kaart-prio-bar { height: 4px; width: 100%; }
.prio-ERNSTIG  .kaart-prio-bar { background: var(--danger); }
.prio-GEMIDDELD .kaart-prio-bar { background: var(--warn); }
.prio-LAAG     .kaart-prio-bar { background: var(--primary); }
.prio-ONBEKEND .kaart-prio-bar { background: var(--border); }

/* Card summary (always visible) */
.kaart-header {
  padding: 16px 18px 14px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.kaart-kenteken { font-family: monospace; font-weight: 700; font-size: 17px; color: var(--text); letter-spacing: 1.5px; }
.kaart-voertuig { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kaart-klant { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kaart-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.kaart-acties { display: flex; align-items: center; gap: 8px; }

/* Card footer strip */
.kaart-footer {
  padding: 10px 18px;
  background: rgba(165,190,207,0.10);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--slate, #334465);
}
.kaart-footer-expand { font-size: 11px; font-weight: 600; color: var(--link); display: flex; align-items: center; gap: 4px; }

/* Detail drawer (under card, full width) */
.kaart-body { display: none; border-top: 1px solid var(--border); background: var(--white); }
.kaart-body.open { display: block; }
.btn-afhandel { padding: 6px 14px; border-radius: var(--radius); font-size: 11px; font-weight: 900; font-family: var(--font); border: 1.5px solid var(--border); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.btn-afhandel.open:hover { background: var(--success); color: white; border-color: var(--success-text); }
.btn-afhandel.done { background: var(--success); color: white; border-color: var(--success-text); }
.btn-afhandel.done:hover { background: #c00; color: white; border-color: #c00; }
.chevron { font-size: 12px; color: var(--muted); transition: transform 0.2s; display: inline-block; }
.chevron.open { transform: rotate(180deg); }
.kaart-body { display: none; border-top: 1px solid var(--border); }
.kaart-body.open { display: block; }
.melding-blok { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.melding-blok:last-child { border-bottom: none; }
.melding-ref { font-size: 10px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
.melding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.melding-veld-label { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 3px; }
.melding-veld-waarde { font-size: 12px; line-height: 1.5; }
.herstel-box { background: #E8F8EE; border: 1px solid #80D4A0; border-radius: var(--radius); padding: 10px 14px; margin-top: 10px; font-size: 12px; line-height: 1.6; }
.herstel-box strong { color: var(--success-text); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.contact-rij { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.contact-btn { padding: 5px 12px; border-radius: var(--radius); font-size: 11px; font-weight: 700; font-family: var(--font); border: 1.5px solid var(--border); background: var(--white); color: var(--primary-dark); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: all 0.12s; }
.contact-btn:hover { background: var(--primary-dark); color: white; border-color: var(--primary-dark); }
.notitie-wrap { background: var(--bg); border-top: 1px solid var(--border); padding: 14px 20px; }
.notitie-label { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 6px; }
.notitie-textarea { width: 100%; font-family: var(--font); font-size: 12px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius); resize: vertical; min-height: 64px; background: var(--white); outline: none; line-height: 1.5; transition: border-color 0.15s; }
.notitie-textarea:focus { border-color: var(--accent); }
.notitie-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.notitie-opgeslagen { font-size: 11px; color: var(--success-text); font-weight: 700; opacity: 0; transition: opacity 0.3s; }
.notitie-opgeslagen.show { opacity: 1; }

/* ── KNOPPEN ── */
.btn { padding: 7px 14px; border: none; border-radius: var(--radius); font-size: 11px; font-weight: 900; font-family: var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s; }
.btn-primary  { background: var(--primary-dark); color: #FEFEFE; border: none; }
.btn-primary:hover { background: #27407A; }
.btn-success  { background: var(--success); color: #FEFEFE; border: none; }
.btn-success:hover { background: #728558; }
.btn-danger   { background: var(--danger); color: #FEFEFE; border: none; }
.btn-orange   { background: var(--primary-dark); color: #FEFEFE; border: none; }
.btn-orange:hover { background: #27407A; }
/* Ghost: wit met lichte border — zoals "View demo" knop in foto */
.btn-ghost    { background: var(--surface); color: var(--link); border: 1.5px solid var(--border); }
.btn-ghost:hover { background: rgba(102,139,196,0.10); border-color: var(--primary); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-opslaan { padding: 5px 14px; background: var(--primary); color: white; border: none; border-radius: var(--radius); font-size: 11px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background 0.15s; }
.btn-opslaan:hover { background: var(--primary-dark); }

/* ── PER KLANT — FACET TABEL LAYOUT ── */
.pk-tabel { width: 100%; border-collapse: collapse; }
.pk-thead { background: var(--navy, #040A1B); }
.pk-thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: #A5BECF;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.pk-rij {
  display: table-row;
  cursor: pointer;
  transition: background 0.1s;
}
.pk-rij:hover td { background: var(--bg); }
.pk-rij td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.pk-naam { font-weight: 700; color: var(--text); }
.pk-type { font-size: 11px; color: #6B7280; }
.pk-count-open { font-weight: 900; font-size: 18px; color: var(--danger); line-height: 1; }
.pk-count-open.geen { color: var(--success-text); font-size: 14px; }
.pk-count-totaal { font-size: 11px; color: var(--muted); margin-top: 1px; }
.pk-expand-knop {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
  white-space: nowrap;
  min-height: 32px;
}
.pk-expand-knop:hover { background: var(--primary-light); }
/* Detail rijen (expandable) */
.pk-detail-rij { display: none; }
.pk-detail-rij.open { display: table-row; }
.pk-detail-rij td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.pk-detail-inner {
  padding: 6px 14px 10px 14px;
}
.pk-sub-tabel { width: 100%; border-collapse: collapse; }
.pk-sub-tabel th {
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.pk-sub-tabel td {
  padding: 7px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.pk-sub-tabel tr:last-child td { border-bottom: none; }
.pk-sub-tabel tr:hover td { background: var(--primary-light); }
/* Mobile: stacked */
@media (max-width: 768px) {
  .pk-thead th.pk-col-type,
  .pk-rij td.pk-col-type { display: none; }
  .pk-thead th.pk-col-acties,
  .pk-rij td.pk-col-acties { display: none; }
  .pk-detail-rij td { border-bottom: 2px solid var(--border); }
  .pk-count-open { font-size: 15px; }
  .pk-sub-tabel th, .pk-sub-tabel td { padding: 6px 8px; font-size: 11px; }
}

/* ── FACET TABEL — universele tabelstructuur ── */
.facet-tabel {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.facet-tabel thead {
  background: var(--navy, #040A1B);
  position: sticky;
  top: 0;
  z-index: 1;
}
.facet-tabel th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: #A5BECF;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  border-bottom: 2px solid var(--primary-dark);
  cursor: default;
  background: var(--navy, #040A1B);
}
.facet-tabel td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.facet-tabel tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.facet-tabel tbody tr:hover td { background: var(--primary-light); }
.facet-tabel tbody tr:last-child td { border-bottom: none; }
.facet-tabel tbody tr.row-afgehandeld td { opacity: 0.65; }
.facet-tabel tbody tr.row-afgehandeld:hover td { opacity: 1; background: var(--primary-light); }

/* Kolom-breedte presets */
.facet-col-kenteken   { width: 110px; }
.facet-col-voertuig   { width: 22%; }
.facet-col-klant      { width: 20%; }
.facet-col-type       { width: 70px; }
.facet-col-ernst      { width: 110px; }
.facet-col-meld       { width: 60px; text-align: center; }
.facet-col-status     { width: 150px; }
.facet-col-datum      { width: 80px; }
.facet-col-cb         { width: 36px; }

/* Prio-indicator: gekleurde stip links in rij */
.facet-prio-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
  vertical-align: middle;
}
.facet-prio-dot.ERNSTIG   { background: var(--danger); }
.facet-prio-dot.GEMIDDELD { background: var(--warn); }
.facet-prio-dot.LAAG      { background: var(--primary); }
.facet-prio-dot.ONBEKEND  { background: var(--border); }

/* Mobile: stacked per rij */
@media (max-width: 768px) {
  .facet-tabel { table-layout: auto; }
  .facet-tabel thead { display: none; }
  .facet-tabel tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border);
  }
  .facet-tabel tbody tr:hover { background: var(--primary-light); }
  .facet-tabel td {
    display: block;
    padding: 2px 0;
    border: none;
    white-space: normal;
    overflow: visible;
    font-size: 12px;
  }
  /* Kenteken: vol breedte, grote tekst */
  .facet-tabel td.facet-col-kenteken {
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 2px;
  }
  /* Verberg minder belangrijke kolommen */
  .facet-tabel td.facet-col-meld,
  .facet-tabel td.facet-col-datum { display: none; }
  /* Checkbox: verberg op mobiel */
  .facet-tabel td.facet-col-cb { display: none; }
}

/* Tablet: iets minder padding */
@media (min-width: 769px) and (max-width: 1024px) {
  .facet-tabel th,
  .facet-tabel td { padding: 9px 10px; }
  .facet-col-voertuig { width: 18%; }
}
.table-wrapper { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card, 0 2px 8px rgba(4,10,27,0.06)); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead { background: var(--navy, #040A1B); }
th { padding: 10px 12px; text-align: left; font-size: 10px; font-weight: 700; font-family: var(--font); color: #A5BECF; text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; cursor: pointer; user-select: none; transition: background 0.15s; border-bottom: 1px solid var(--border); background: var(--navy, #040A1B); }
th:hover { background: var(--primary-dark); color: #FEFEFE; }
td { padding: 9px 12px; border-top: 1px solid var(--border); font-size: 12px; white-space: nowrap; }
tr:hover td { background: var(--bg); }
.mono { font-family: monospace; font-size: 11px; }
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--white); }
.page-info { font-size: 11px; color: var(--muted); font-weight: 700; }
.page-buttons { display: flex; gap: 3px; }
.page-btn { padding: 4px 9px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); color: var(--link); cursor: pointer; font-size: 11px; font-weight: 700; font-family: var(--font); transition: all 0.15s; }
.page-btn:hover { background: var(--primary-dark); color: #FEFEFE; border-color: var(--primary-dark); }
.page-btn.active { background: var(--primary-dark); color: #FEFEFE; border-color: var(--primary-dark); }
.page-btn:disabled { opacity: 0.35; cursor: default; }

/* ── ADMIN TABEL ── */
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.admin-card-header { background: rgba(165,190,207,0.12); border-bottom: 1px solid var(--border); padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; }
.admin-card-header h3 { font-size: 11px; font-weight: 700; color: var(--slate,#334465); text-transform: uppercase; letter-spacing: 0.8px; }
.thema-optie { display:flex; align-items:center; gap:10px; padding:10px 18px; border:2px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); cursor:pointer; font-family:var(--font); font-size:13px; font-weight:700; color:var(--text); transition:all 0.15s; }
.thema-optie:hover { border-color:var(--primary); }
.thema-optie.actief { border-color:var(--primary); background:var(--primary-light); }
.thema-bol { width:28px; height:28px; border-radius:50%; flex-shrink:0; }
.thema-naam { flex:1; }
.thema-check { font-size:16px; color:var(--primary-dark); font-weight:900; min-width:16px; }
.gebruiker-rij { display: grid; grid-template-columns: 2fr 170px 100px 100px auto; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); align-items: center; transition: background 0.1s; }
.badge-rol { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #475569; background: #F1F5F9; border: 1px solid #CBD5E1; white-space: nowrap; }
.gebruiker-rij:hover { background: var(--bg); }
.gebruiker-rij:last-child { border-bottom: none; }
.gebruiker-naam { font-weight: 700; }
.gebruiker-email { font-size: 11px; color: var(--muted); }

/* v31: Profiel modal */
.profiel-foto-ring {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--primary-dark);
  border: 3px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; position: relative;
  flex-shrink: 0; transition: opacity 0.15s;
}
.profiel-foto-ring:hover { opacity: 0.85; }
.profiel-foto-ring img { width: 100%; height: 100%; object-fit: cover; }
.profiel-foto-ring .foto-initialen {
  font-size: 26px; font-weight: 700; color: white;
  font-family: var(--font); pointer-events: none;
}
.profiel-foto-ring .foto-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s; border-radius: 50%;
}
.profiel-foto-ring:hover .foto-overlay { opacity: 1; }
.profiel-naam-rij {
  display: grid; grid-template-columns: 1fr 80px 1fr; gap: 8px;
}
.werkrooster-grid {
  display: flex; flex-direction: column; gap: 6px;
}
.werkrooster-dag-rij {
  display: grid; grid-template-columns: 28px 90px 1fr 16px 1fr; gap: 8px;
  align-items: center; padding: 6px 10px;
  border-radius: 8px; background: var(--bg);
  transition: background 0.1s;
}
.werkrooster-dag-rij.inactief { opacity: 0.4; }
.werkrooster-dag-label {
  font-size: 12px; font-weight: 600; color: var(--text);
}
.werkrooster-dag-rij input[type="time"] {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: 12px; font-family: var(--font);
  background: var(--surface); color: var(--text); width: 100%;
}
.werkrooster-dag-rij input[type="time"]:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.dag-scheiding { font-size: 11px; color: var(--muted); text-align: center; }
/* v189.79: profielfoto-preview in de aanmaak/bewerk-modal (token-gedreven, dark-proof). */
.profiel-foto-preview {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--op-accent); border: 2px solid var(--border);
}
.profiel-foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.profiel-foto-preview .material-symbols-rounded { font-size: 32px; }
.profiel-sectie-titel {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.7px;
  margin: 18px 0 8px;
}
.gebruiker-avatar-klein {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-dark); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white;
  overflow: hidden; flex-shrink: 0; vertical-align: middle;
}
.gebruiker-avatar-klein img { width: 100%; height: 100%; object-fit: cover; }

/* ── PRINT STYLESHEET ── */
@media print {
  body { background: white; font-size: 12px; }
  .header, .tabs, .filter-bar, .bulk-bar, .pagination,
  .btn, .btn-logout, .modal-overlay, .upload-zone,
  #login-scherm { display: none !important; }
  .content { display: block !important; padding: 0; }
  .content:not(.active) { display: none !important; }
  .table-wrapper { box-shadow: none; border: 1px solid #ccc; }
  .score-card { border: 1px solid #ccc; break-inside: avoid; }
  .scoreboard { grid-template-columns: repeat(3, 1fr); }
  th, td { font-size: 11px; padding: 5px 8px; }
  a { text-decoration: none; color: black; }
  .wp-status { background: transparent !important; border: 1px solid #ccc; }
}
.modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 520px) {
  .modal-form-grid { grid-template-columns: 1fr; gap: 10px; }
}
input[type="date"].form-input { width: 100%; min-width: 0; box-sizing: border-box; }
/* Overlay: half-transparant zodat app eronder herkenbaar blijft. */
.modal-overlay { position: fixed; inset: 0; background: rgba(4,10,27,0.55); z-index: 1000; display: none; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.modal-overlay.open, .modal-overlay.modal-overlay--visible { display: flex; }
.modal { background: var(--white); border-radius: var(--radius-lg); max-height: 90vh; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.18); border: none; display: flex; flex-direction: column; }
/* Donkere header → background navy + geen shadow. Alle direct kinderen behalve de header
   krijgen witte achtergrond (planning-detail gebruikt geen .modal-body class, dus generieke selector). */
.modal:has(> .modal-header) { background: var(--navy); box-shadow: none; }
.modal:has(> .modal-header) > *:not(.modal-header) { background: var(--white); }
/* Body = enige scrollbare laag — header/footer blijven gefixeerd, scrollbar loopt niet door afgeronde hoeken */
.modal > *:not(.modal-header):not(.modal-footer) { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; }
.modal > .modal-header, .modal > .modal-footer { flex: 0 0 auto; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:none; background:var(--navy); color:#A5BECF; border-radius:0; }
.modal-header h3, .modal-header h2, .modal-header .modal-titel { color:#A5BECF; }
.modal-header .btn-icon, .modal-header .modal-sluit { color:#A5BECF; }
.modal-header .btn-icon:hover, .modal-header .modal-sluit:hover { background: rgba(255,255,255,0.12); color:#fff; }
.modal-header--success { background: var(--navy); }
.modal-sluit { background:transparent; border:1px solid transparent; border-radius:6px; padding:2px 8px; font-size:20px; line-height:1.2; cursor:pointer; color:#A5BECF; }
.modal-sluit:hover { background:rgba(255,255,255,0.12); color:#fff; }
.modal-box { background: var(--white); border-radius: var(--radius-lg); padding: 32px; width: 440px; max-width: 95vw; max-height: 90vh; overflow-y: auto; overflow-x: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12); border: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Modal-box met header/body/footer-structuur: zelfde flex-clip-aanpak als .modal */
/* Background van de box wordt navy zodat er geen witte sub-pixel-gap kan doorschijnen
   tussen border-radius en modal-header. De body bedekt de navy voor het lichte deel.
   Geldt voor zowel klassieke .modal-box als de M3 .modal-card variant. */
/* Modals met donkere header: background navy + GEEN box-shadow (shadow op donkere overlay
   geeft een lichtere halo-ring rond de modal-hoeken). */
.modal-box:has(> .modal-header) { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--navy); box-shadow: none; }
.modal-card:has(> .modal-header) { background: var(--navy); box-shadow: none; }
.modal-box:has(> .modal-header) > .modal-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; min-height: 0; background: var(--white); padding: 16px 20px; }
.modal-box:has(> .modal-header) > .modal-header, .modal-box:has(> .modal-header) > .modal-footer { flex: 0 0 auto; }
/* Header en footer hebben zelf GEEN radius — modal-box clipt alles via overflow:hidden.
   Twee overlappende radii (box + header) geven sub-pixel-mismatch en zichtbare witte streep. */
.modal-box:has(> .modal-header) > .modal-footer { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)) 20px; margin-top: 0; border-top: 1px solid var(--border); background: var(--white); }

/* Moderne modal met header/body/footer structuur (Cooldude v100+). */
.modal-card { background: var(--white); border-radius: var(--radius-lg); padding: 0; width: 480px; max-width: 95vw; max-height: 90vh; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12); border: none; display:flex; flex-direction:column; }

/* v185.3: Herbruikbare M3 banner — voor in-page actie-meldingen (info / waarschuwing).
   Compact, subtiele tint, icon + tekst + actie-knop in één rij. */
.m3-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  background: rgba(102,139,196,0.10);
  border: 1px solid rgba(102,139,196,0.22);
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
}
.m3-banner.m3-banner-warn {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.30);
}
.m3-banner.m3-banner-error {
  background: rgba(217,45,32,0.08);
  border-color: rgba(217,45,32,0.25);
}
.m3-banner-icoon {
  font-size: 22px;
  color: var(--primary-dark);
  flex-shrink: 0;
}
.m3-banner-warn .m3-banner-icoon { color: var(--warn-text); }
.m3-banner-error .m3-banner-icoon { color: var(--danger); }
.m3-banner-tekst {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
}
.m3-banner-actie {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(102,139,196,0.45);
  color: var(--primary-dark);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.m3-banner-actie:hover {
  background: rgba(102,139,196,0.12);
  border-color: var(--primary-dark);
}

/* v185.3: Herbruikbare uitklap-kaart — M3 outlined card pattern.
   Eén consistent uiterlijk voor alle uitklap-blokken (APK, Terugroepactie, Bericht sturen, etc.) */
.uitklap-kaart {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  margin-top: 8px;
  overflow: hidden;
}
.uitklap-kaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms;
}
.uitklap-kaart-kop:hover { background: rgba(102,139,196,0.06); }
.uitklap-kaart-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.uitklap-kaart-titel .material-symbols-rounded { font-size: 18px; color: var(--icoon); }
.uitklap-kaart-titel-extra {
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}
.uitklap-kaart-chevron {
  font-size: 22px !important;
  color: var(--muted);
  transition: transform 160ms cubic-bezier(.2,0,0,1);
  flex-shrink: 0;
}
.uitklap-kaart.open .uitklap-kaart-chevron { transform: rotate(180deg); }
.uitklap-kaart-body {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.uitklap-kaart.open .uitklap-kaart-body { display: block; }

/* APK / RDW-voertuiggegevens — definition-list in RDW-stijl */
.apk-tabel { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--white); }
.apk-rij { display:grid; grid-template-columns: 200px 1fr; gap:12px; padding:8px 12px; font-size:12px; border-bottom:1px solid var(--border); }
.apk-rij:last-child { border-bottom:none; }
.apk-rij:nth-child(even) { background: rgba(165,190,207,0.08); }
.apk-label { color:var(--muted); font-weight:600; }
.apk-waarde { color:var(--text); font-weight:500; word-break:break-word; }

/* Scrollbar binnen modals niet door de afgeronde hoeken laten lopen */
.modal::-webkit-scrollbar,
.modal-box::-webkit-scrollbar,
.modal-card .modal-body::-webkit-scrollbar { width: 8px; }
.modal::-webkit-scrollbar-track,
.modal-box::-webkit-scrollbar-track,
.modal-card .modal-body::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.modal::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb,
.modal-card .modal-body::-webkit-scrollbar-thumb { background: rgba(4,10,27,0.18); border-radius: 4px; }
.modal::-webkit-scrollbar-thumb:hover,
.modal-box::-webkit-scrollbar-thumb:hover,
.modal-card .modal-body::-webkit-scrollbar-thumb:hover { background: rgba(4,10,27,0.32); }
.modal, .modal-box, .modal-card .modal-body { scrollbar-width: thin; scrollbar-color: rgba(4,10,27,0.18) transparent; }
.modal-card--form   { width: 520px; }
.modal-card--wide   { width: 760px; }
.modal-card--xwide  { width: 900px; }

/* Icon-utility — drie vaste maten */
.icon-sm { font-size: 14px; }
.icon-md { font-size: 20px; }
.icon-lg { font-size: 24px; }

/* Icon-knop met 40x40 touch-target */
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:6px; background:transparent; border:1px solid transparent; cursor:pointer; color:var(--text); padding:0; }
.btn-icon:hover { background: var(--bg); }
.btn-icon--danger { color: var(--danger); }
.btn-icon--danger:hover { background: rgba(217,45,32,0.08); }
.btn-icon .material-symbols-rounded { font-size: 20px; }

/* Runner-page-header: gewone titel, scrollt mee met content. Alleen de Wendle-bar blijft sticky. */
.runner-page-header { padding-top: 32px; padding-bottom: 8px; }

/* Pagina alleen op desktop bruikbaar — toont op kleinere schermen een melding i.p.v. de inhoud */
.page-desktop-only-blok { display: none; }
@media (max-width: 1024px) {
  .page-desktop-only .page-desktop-only-content { display: none !important; }
  .page-desktop-only .page-desktop-only-blok {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; padding: 32px 16px; text-align: center; color: var(--text);
  }
  .page-desktop-only-blok .material-symbols-rounded { font-size: 56px; color: var(--muted); margin-bottom: 16px; }
  .page-desktop-only-blok h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
  .page-desktop-only-blok p { font-size: 14px; color: var(--muted); max-width: 360px; line-height: 1.5; }
}
.modal-title { font-weight: 700; font-size: 17px; color: var(--text); margin-bottom: 20px; }
.form-group { margin-bottom: 16px; }
/* M3-stijl form label: sentence-case, medium gewicht, subtieler — niet meer uppercase
   (Google-systematiek: titel + helper-text eronder, zoals 'Beveiliging en inloggen'-lijst) */
.form-label { font-size: 13px; font-weight: 500; color: var(--text, #1F2937); text-transform: none; letter-spacing: 0; display: block; margin-bottom: 6px; }
.form-helper { font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 4px; line-height: 1.4; }
/* Oogje: wachtwoord tonen/verbergen (Beheer-formulier + login). Tokens, dark-proof. */
.pw-veld-wrap, .login-pw-wrap { position: relative; }
/* login-input heeft margin-bottom:16px; verplaats die naar de wrapper, anders is de wrapper
   hoger dan het veld en zakt het oogje (top:50% van de wrapper) onder het midden. */
.login-pw-wrap { margin-bottom: 16px; }
.login-pw-wrap .login-input { margin-bottom: 0; }
.pw-veld-wrap .form-input, .login-pw-wrap .login-input { padding-right: 42px; }
.pw-oog { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); background: transparent;
  border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); border-radius: 6px; }
.pw-oog:hover { color: var(--text); background: var(--surface-2); }
.pw-oog .material-symbols-rounded { font-size: 20px; }

/* Kleur-palet voor gebruiker/monteur (grijs ontbreekt bewust — gereserveerd voor 'Opdracht uitgevoerd') */
.kleur-palet { display: flex; flex-wrap: wrap; gap: 8px; }
.kleur-cirkel { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s; display: inline-flex; align-items: center; justify-content: center; }
.kleur-cirkel:hover { transform: scale(1.08); }
.kleur-cirkel.aan { border-color: var(--text, #0F172A); box-shadow: 0 0 0 2px #fff inset; }
.kleur-cirkel.kleur-geen { background: #fff; border: 1.5px dashed var(--border); color: var(--muted); }
.kleur-cirkel.kleur-geen.aan { border-style: solid; border-color: var(--text, #0F172A); }
.kleur-cirkel.kleur-wit { border-color: var(--border); }  /* v189.82: witte swatch zichtbaar op witte modal */
.form-info-tip { display:inline-flex; align-items:center; justify-content:center; position:relative; cursor:default; margin-left:5px; vertical-align:middle; }
.form-info-tip .material-symbols-rounded { font-size:15px; color:var(--primary); opacity:0.75; transition:opacity 0.15s; }
.form-info-tip:hover .material-symbols-rounded { opacity:1; }
.form-info-tip::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--primary-dark,#1a2f4a); color:#fff; font-size:11px; font-weight:400; font-family:var(--font); text-transform:none; letter-spacing:0; white-space:nowrap; padding:5px 9px; border-radius:5px; pointer-events:none; opacity:0; transition:opacity 0.15s; z-index:999; }
.form-info-tip:hover::after { opacity:1; }
/* v189.36.10: portal-balloon — een fixed-position tooltip op <body> die ontsnapt aan alle
   stacking-contexts (sticky cells in tabellen, transforms, isolation). Gebruik via
   data-balloon="tekst" data-balloon-modus="onder|boven|links|rechts" op het hover-element. */
.app-balloon {
  position: fixed;
  background: var(--primary-dark, #1a2f4a);
  color: #fff;
  font-size: 11px; font-weight: 400; font-family: var(--font);
  letter-spacing: 0; text-transform: none; line-height: 1.4;
  padding: 8px 12px;
  border-radius: 6px;
  max-width: 280px;
  width: max-content;
  text-align: left;
  white-space: pre-line;          /* multi-line balloons (regelafbrekingen via \n) */
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 5000;
  opacity: 1;
}

/* v189-Fase2: multiline variant voor langere uitleg — wraps + schaduw, opent NAAR ONDEREN */
.form-info-tip.is-multiline::after {
  white-space: normal;
  max-width: 260px;
  width: max-content;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  bottom: auto;
  top: calc(100% + 6px);
}
/* v189.25: variant die NAAR BOVEN opent — voor info-iconen onderaan een modal/scherm */
.form-info-tip.tip-boven::after {
  top: auto;
  bottom: calc(100% + 6px);
}
/* v189.36.8: variant die LINKS-UITGELIJND uitklapt (i.p.v. gecentreerd) — voor iconen aan de linkerrand */
.form-info-tip.tip-links::after {
  left: 0;
  transform: none;
}
/* v189.36.9: forceer dat de balloon BOVEN alles uitkomt — tabel-rijen creëren stacking-issues. */
.form-info-tip.tip-links {
  position: relative;
  z-index: 2000;
  isolation: isolate;
}
.form-info-tip.tip-links::after {
  z-index: 2000;
}
/* M3 outlined textfield-stijl: ruimere padding, 8px corners, dunne maar duidelijke border */
.form-input { width: 100%; min-height: 44px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: 14px; color: var(--text, #1F2937); background: var(--white); outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; }
.form-input:hover  { border-color: #94A3B8; }
.form-input:focus  { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(51,84,149,0.12); }
.form-input::placeholder { color: var(--input-placeholder); }
/* v189.78: foutmarkering op een verplicht veld dat leeg/ongeldig is — rode rand + zachte ring, token-gedreven (dark-proof). */
.form-input.input-fout       { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.form-input.input-fout:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); }

/* Native date/time input: zorg dat het binnen de M3-box past + nettere calendar-knop */
input[type="date"].form-input,
input[type="time"].form-input,
input[type="datetime-local"].form-input { font-variant-numeric: tabular-nums; min-height: 44px; }
input[type="date"].form-input::-webkit-calendar-picker-indicator,
input[type="time"].form-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; transition: opacity 0.15s; }
input[type="date"].form-input:hover::-webkit-calendar-picker-indicator,
input[type="time"].form-input:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* .form-control is in legacy modals gebruikt (Verlof-, Parkeer-modal) zonder CSS — alias op M3 stijl */
.form-control { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: 14px; color: var(--text, #1F2937); background: var(--white); outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; }
.form-control:hover { border-color: #94A3B8; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(51,84,149,0.12); }
.form-control::placeholder { color: #94A3B8; }
textarea.form-control { min-height: 64px; resize: vertical; font-family: inherit; line-height: 1.4; }
/* Native chevron behouden — custom SVG-bg veroorzaakte een zichtbare verticale streep
   in de uitgevouwen dropdown-lijst van Chrome. */
select.form-control { cursor: pointer; }
input[type="date"].form-control,
input[type="time"].form-control { font-variant-numeric: tabular-nums; min-height: 44px; }
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; transition: opacity 0.15s; }
input[type="date"].form-control:hover::-webkit-calendar-picker-indicator,
input[type="time"].form-control:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.modal-footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 24px; }
/* Modern header/body/footer binnen .modal-card */
.modal-card .modal-header { padding: 14px 20px; }
.modal-card .modal-body   { padding: 16px 20px; overflow-y: auto; flex:1; background: var(--white); }
.modal-card .modal-footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)) 20px; border-top: 1px solid var(--border); background: var(--white); margin-top: 0; }
/* .modal (oudere planning/verlof detail) krijgt zelfde nette footer-padding zodat knoppen niet tegen de rand staan */
.modal .modal-footer { padding: 12px 20px 16px; border-top: 1px solid var(--border); background: var(--white); margin-top: 0; flex-wrap: wrap; }

/* ── Side panel (terugroepactie detail) ── */
.sp-overlay { position:fixed; inset:0; z-index:1000; pointer-events:none; }
.sp-overlay.open { pointer-events:auto; }
.sp-overlay::before { content:''; position:fixed; inset:0; background:rgba(0,0,0,0.28); opacity:0; transition:opacity 0.25s; }
.sp-overlay.open::before { opacity:1; }
.sp-paneel { position:fixed; top:0; right:0; height:100dvh; width:440px; max-width:100vw; background:var(--white); box-shadow:none; display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.25s ease; z-index:1001; border-left:1px solid var(--border); }
.sp-overlay.open .sp-paneel { transform:translateX(0); box-shadow:-4px 0 24px rgba(4,10,27,0.16); }
.sp-header { padding:16px 20px 16px; border-bottom:0; background:var(--navy); flex-shrink:0; }
.sp-header-naam { font-size:15px; font-weight:800; color:var(--text); }
.sp-header-sub { font-size:12px; margin-top:4px; }
.sp-header-contract { font-size:11px; color:var(--muted); margin-top:3px; }
.sp-sluiten { background:none; border:none; font-size:20px; cursor:pointer; color:#9DBBE8; padding:4px 8px; border-radius:4px; flex-shrink:0; }
.sp-sluiten:hover { background:rgba(255,255,255,0.12); color:#fff; }
.sp-body { flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:0 20px; display:flex; flex-direction:column; }
.sp-blok { border-bottom:0; }
.sp-footer { padding:12px 20px; background:rgba(102,139,196,0.10); border-top:0; flex-shrink:0; display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.sp-footer .btn { padding:8px 16px; font-size:12px; font-weight:600; }
.sp-blok-header { display:flex; align-items:center; justify-content:space-between; padding:13px 20px; cursor:pointer; user-select:none; background:var(--white); transition:background 0.1s; }
.sp-blok-header:hover { background:var(--bg); }
.sp-blok-titel { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:0.6px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.sp-badge { background:var(--danger); color:white; font-size:10px; font-weight:800; padding:1px 7px; border-radius:10px; line-height:1.7; }
.sp-chevron { font-size:18px; color:var(--muted); transition:transform 0.2s; }
.sp-blok.open .sp-chevron { transform:rotate(180deg); }
.sp-blok-inhoud { display:none; padding:16px 20px; }
.sp-blok.open .sp-blok-inhoud { display:block; }
.sp-rdw-rij { display:grid; grid-template-columns:110px 1fr; gap:6px; align-items:start; margin-bottom:8px; font-size:12px; }
.sp-rdw-label { color:var(--muted); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.3px; padding-top:1px; }
.sp-rdw-waarde { color:var(--text); font-weight:500; }
.sp-form-sectie { padding:16px 20px; border-bottom:1px solid var(--border); }
.sp-sectie-titel { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:0.6px; display:flex; align-items:center; gap:6px; margin-bottom:14px; }
@media (max-width:520px) { .sp-paneel { width:100vw; } }

/* ── RAIL RECHTS (vaste icoon-balk + side-panelen) ── */
.rail-rechts {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 56px;
  background: var(--white);
  border-left: 1px solid var(--border);
  z-index: 150;
  display: flex; flex-direction: column; align-items: center;
  /* Header (64px) + tabs (~46px) + 10px lucht = 120px clearance bovenaan */
  padding: calc(120px + env(safe-area-inset-top)) 0 12px 0;
  gap: 6px;
}
.rail-knop {
  width: 40px; height: 40px;
  border: none; background: transparent;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.rail-knop:hover { background: var(--bg); color: var(--text); }
/* Label onder de knop: alleen tonen in mobile-bottom-bar (body.rol-mobiel @ ≤1024px) */
.rail-label { display: none; }
.rail-knop.actief { background: rgba(102,139,196,0.10); color: var(--primary); }
.rail-knop { position: relative; }
.rail-knop .material-symbols-rounded { font-size: 22px; }
.rail-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  background: var(--danger); color: white;
  font-size: 10px; font-weight: 800;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 1.5px solid var(--white);
  line-height: 1;
}
.rail-spacer { flex: 1; }
.rail-profiel { margin-top: 4px; }
.rail-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  overflow: hidden;
}
.rail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rail-knop.rail-profiel { width: 40px; height: 40px; }
.rail-knop.rail-profiel:hover .rail-avatar,
.rail-knop.rail-profiel.actief .rail-avatar { box-shadow: 0 0 0 2px var(--primary); }

/* Overlay achter de rail-panelen */
.rr-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.28);
  z-index: 230;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.rr-overlay.open { opacity: 1; pointer-events: auto; }

/* Rail-panelen: schuiven in vanaf rechterrand en sluiten volledig aan (covert de rail). */
.rr-paneel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 100vw;
  background: var(--white);
  box-shadow: none; /* schaduw alleen wanneer open — voorkomt links lekkende gloed op rechterrand bij dicht/off-screen paneel */
  z-index: 240;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-left: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.rr-paneel.open { transform: translateX(0); box-shadow: -4px 0 24px rgba(4,10,27,0.16); }
/* v189.48.6: donkere (navy) paneel-header met lichte tekst/iconen, consistent met de side panel */
.rr-header {
  padding: 16px 20px;
  background: var(--navy);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.rr-titel { font-size: 15px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.rr-titel .material-symbols-rounded { font-size: 20px; color: #9DBBE8; flex-shrink: 0; }
.rr-sluit {
  background: none; border: none; cursor: pointer;
  color: #9DBBE8; padding: 4px 6px; border-radius: 4px;
  display: flex; align-items: center;
}
.rr-sluit:hover { background: rgba(255,255,255,0.12); color: #fff; }
.rr-sluit .material-symbols-rounded { font-size: 20px; }
.rr-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.rr-placeholder {
  color: var(--muted); font-size: 13px; font-style: italic;
  padding: 32px 8px; text-align: center; line-height: 1.5;
}

/* Terug-knop in paneel-header (subviews) */
.rr-terug {
  background: none; border: none; cursor: pointer;
  color: #9DBBE8; padding: 4px 6px; border-radius: 4px;
  display: flex; align-items: center; margin-right: 4px;
}
.rr-terug:hover { background: rgba(255,255,255,0.12); color: #fff; }
.rr-terug .material-symbols-rounded { font-size: 20px; }

/* Profiel-paneel: header-card met avatar */
.rr-profiel-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 8px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.rr-profiel-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  overflow: hidden; margin-bottom: 10px;
  border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--border);
}
.rr-profiel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rr-profiel-naam { font-size: 16px; font-weight: 800; color: var(--text); }
.rr-profiel-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Sectierij (link naar subview, Google-stijl met gekleurd icoon-rondje) */
.rr-sectie-rij {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 8px;
  background: transparent; border: none; border-radius: 8px;
  cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.rr-sectie-rij:hover { background: var(--bg); }
.rr-sectie-icoon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rr-sectie-icoon .material-symbols-rounded { font-size: 18px; color: white; }
.rr-icoon-groen { background: #5BB078; }
.rr-icoon-blauw { background: #668BC4; }
.rr-icoon-nacht { background: var(--icoon); }
.rr-sectie-naam { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.rr-sectie-pijl { font-size: 20px; color: var(--muted); }
.rr-icoon-nacht { background: var(--icoon); }

/* Dag/nacht-schakelaar in het profiel-paneel (v189.53). Track via tokens; de knop
   blijft licht in beide modi (--switch-knop) — native-switch-conventie. */
.rr-thema-switch { width: 42px; height: 24px; border-radius: 12px; background: var(--border); position: relative; flex-shrink: 0; transition: background 0.2s; }
.rr-thema-switch.aan { background: var(--primary-dark); }
.rr-thema-knop { width: 18px; height: 18px; border-radius: 50%; background: var(--switch-knop); position: absolute; top: 3px; left: 3px; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.rr-thema-switch.aan .rr-thema-knop { left: 21px; }

/* Dag/nacht-schakelaar in het profiel-paneel (v189.53). Track via tokens; de knop
   blijft licht in beide modi — native-switch-conventie, net als .dev-toggle-knop. */
.rr-thema-switch { width: 42px; height: 24px; border-radius: 12px; background: var(--border); position: relative; flex-shrink: 0; transition: background 0.2s; }
.rr-thema-switch.aan { background: var(--primary-dark); }
.rr-thema-knop { width: 18px; height: 18px; border-radius: 50%; background: #FEFEFE; position: absolute; top: 3px; left: 3px; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.rr-thema-switch.aan .rr-thema-knop { left: 21px; }

/* Uitlog-knop onderaan hoofdview profiel */
.rr-uitlog-knop {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-top: 16px;
  padding: 12px 16px;
  background: transparent; color: var(--danger);
  border: 1px solid var(--danger); border-radius: var(--radius);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer;
  justify-content: center;
}
.rr-uitlog-knop:hover { background: rgba(220, 53, 69, 0.06); }
.rr-uitlog-knop .material-symbols-rounded { font-size: 18px; }

/* Veldrij in subviews (Persoonlijk / Beveiliging) */
.rr-veld-rij {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 8px;
  background: transparent; border: none; border-radius: 8px;
  cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.rr-veld-rij:hover { background: var(--bg); }
.rr-veld-rij-readonly { cursor: default; }
.rr-veld-rij-readonly:hover { background: transparent; }
.rr-veld-icoon { font-size: 20px; color: var(--muted); flex-shrink: 0; width: 24px; text-align: center; }
.rr-veld-tekst { flex: 1; min-width: 0; }
.rr-veld-label { font-size: 13px; font-weight: 700; color: var(--text); }
.rr-veld-waarde { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-word; }
.rr-veld-pijl { font-size: 20px; color: var(--muted); flex-shrink: 0; }
.rr-veld-thumb {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  overflow: hidden; flex-shrink: 0;
}
.rr-veld-thumb img { width: 100%; height: 100%; object-fit: cover; }

.rr-veld-info {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 16px; padding: 12px;
  background: var(--bg); border-radius: var(--radius);
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.rr-veld-info .material-symbols-rounded { font-size: 18px; color: var(--muted); flex-shrink: 0; }

/* ── Contacten/Leveranciers tab-bar (v189) ── */
.rr-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.rr-tab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.rr-tab:hover { color: var(--text); background: rgba(102,139,196,0.06); }
.rr-tab.actief { color: var(--primary); border-bottom-color: var(--primary); }
.rr-tab .material-symbols-rounded { font-size: 16px; }

/* Leverancier-formulier: groepeer-secties (Bezoekadres / Postadres) ademruimte geven */
.rr-personen-sectie > .rr-detail-veld {
  padding: 14px 14px 0 14px;
}
.rr-personen-sectie > .rr-detail-veld:last-child {
  padding-bottom: 14px;
}
.rr-personen-sectie > .rr-detail-veld + .rr-detail-veld {
  padding-top: 12px;
}

/* Leverancier-rij in lijst */
.rr-leverancier-rij {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.rr-leverancier-rij:hover { background: rgba(102,139,196,0.08); }
.rr-leverancier-naam { font-size: 14px; font-weight: 500; color: var(--text); }
.rr-leverancier-sub  { font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* ── Contacten-paneel (v160) ── */
.rr-contacten-zoekbalk {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: rgba(102,139,196,0.10);
  border-bottom: 1px solid var(--border);
}
.rr-contacten-zoekbalk .material-symbols-rounded { font-size: 18px; color: var(--muted); }
.rr-contacten-zoekbalk input {
  flex: 1; border: none; background: transparent;
  font-family: var(--font); font-size: 13px; outline: none; color: var(--text);
  padding: 4px 4px;
}
.rr-contacten-zoekbalk input::placeholder { color: var(--muted); }
.rr-zoek-wis {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 2px 4px; border-radius: 4px;
  display: flex; align-items: center;
}
.rr-zoek-wis:hover { background: var(--white); color: var(--text); }

.rr-contacten-body {
  flex: 1; overflow: hidden; position: relative;
  display: flex; flex-direction: row;
}
.rr-contacten-lijst {
  flex: 1; overflow-y: auto; padding: 8px 8px 32px 16px;
}
.rr-letter-kop {
  font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.8px;
  margin: 12px 0 6px; padding-left: 4px;
}
.rr-debiteur-blok { margin-bottom: 10px; }
.rr-debiteur-naam {
  font-size: 12px; font-weight: 800; color: var(--text);
  padding: 4px 8px; background: var(--bg); border-radius: 6px;
  margin-bottom: 4px;
}
.rr-contact-rij {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.rr-contact-rij:last-child { border-bottom: none; }
.rr-contact-rij:hover { background: var(--bg); }
.rr-contact-naam { font-size: 13px; font-weight: 700; color: var(--text); }
.rr-contact-functie { font-size: 11px; color: var(--muted); }
.rr-contact-doelen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.rr-doel-chip {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 2px 7px; border-radius: 8px;
  color: white;
}
.rr-doel-chip.doel-financieel   { background: #B8860B; }
.rr-doel-chip.doel-onderhoud    { background: #4D7AAE; }
.rr-doel-chip.doel-operationeel { background: #5BB078; }
.rr-doel-chip.doel-eigenaar     { background: #8B5CF6; }
.rr-doel-chip.doel-algemeen     { background: #94A3B8; }

/* A-Z letterrail (rechts in paneel) */
.rr-letterrail {
  flex: 0 0 18px;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0;
  background: rgba(102,139,196,0.05);
  border-left: 1px solid var(--border);
  overflow: hidden;
}
.rr-letterrail button {
  background: none; border: none; cursor: pointer;
  font-size: 9px; font-weight: 700; color: var(--text);
  padding: 1px 0; width: 16px; line-height: 1.2;
  text-align: center;
}
.rr-letterrail button.leeg { color: var(--border); cursor: default; }
.rr-letterrail button.actief { color: var(--primary); font-weight: 900; }
.rr-letterrail button:hover:not(.leeg) { color: var(--primary); }

/* ── Contact-modal doelgebied checkbox-stijl ── */
.cm-doel-checkbox {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--white);
  cursor: pointer; font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.3px;
  user-select: none;
  transition: all 0.15s;
}
.cm-doel-checkbox:hover { border-color: var(--primary); color: var(--text); }
.cm-doel-checkbox.aan { background: var(--primary); border-color: var(--primary); color: white; }
.cm-kanaal-rij { display: flex; gap: 6px; align-items: center; }

/* ── Contact detail-view (in-paneel sub-view, vervangt modal) ── */
.rr-contact-detail {
  padding: 16px 18px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.rr-detail-veld {
  display: flex; flex-direction: column; gap: 6px;
}
/* M3 list-item headline: sentence-case, primair, medium gewicht */
.rr-detail-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text, #1F2937);
}
.rr-detail-label .material-symbols-rounded { font-size: 18px; color: var(--muted); }
.rr-optioneel { font-size: 9px; font-weight: 600; opacity: .6; text-transform: none; letter-spacing: 0; }
.rr-detail-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font); font-size: 13px;
  background: var(--white); color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.rr-detail-input:focus { border-color: var(--primary); }
textarea.rr-detail-input { resize: vertical; min-height: 60px; }
.rr-detail-hint {
  font-size: 11px; color: var(--muted); line-height: 1.4;
  display: flex; align-items: center; gap: 4px;
}
.rr-detail-hint .material-symbols-rounded { font-size: 14px; }
.rr-detail-hint-actief { color: var(--primary); font-weight: 600; }

.rr-doel-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.rr-kanaal-rij { display: flex; gap: 6px; align-items: center; }
.rr-kanaal-rij .rr-doel-input { flex: 0 0 130px; }
.rr-kanaal-del {
  flex: 0 0 32px; padding: 7px 8px;
  background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius);
  cursor: pointer; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.rr-kanaal-del:hover { color: var(--danger); border-color: var(--danger); }
.rr-kanaal-del .material-symbols-rounded { font-size: 16px; }
.rr-kanaal-add {
  display: flex; align-items: center; gap: 4px;
  background: transparent; border: none; cursor: pointer;
  color: var(--primary); font-family: var(--font); font-size: 12px; font-weight: 600;
  padding: 4px 0;
}
.rr-kanaal-add:hover { color: var(--primary-dark, var(--primary)); text-decoration: underline; }
.rr-kanaal-add .material-symbols-rounded { font-size: 16px; }

.rr-detail-fout {
  color: var(--danger); font-size: 12px;
  padding: 8px 12px; background: rgba(220,53,69,0.08); border-radius: var(--radius);
}

.rr-detail-acties {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 18px;
  background: var(--bg); border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.rr-detail-acties .btn { padding: 8px 14px; font-size: 12px; }
.rr-detail-acties .btn-ghost { margin-left: auto; }

/* v168 — debiteur groep-view */
/* Kinderen van .rr-contact-detail mogen niet shrinken — anders schiet content weg en kan body niet scrollen */
.rr-contact-detail > * { flex-shrink: 0; }
.rr-detail-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rr-toggle-groep { display: flex; gap: 0; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rr-toggle {
  padding: 5px 12px;
  background: transparent; border: none;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--muted); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rr-toggle.aan { background: var(--primary); color: white; }
.rr-toggle:not(.aan):hover { background: var(--bg); color: var(--text); }
.rr-toggle + .rr-toggle { border-left: 1.5px solid var(--border); }

.rr-personen-sectie {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.rr-personen-kop {
  font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text, #1F2937); padding: 10px 14px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.rr-persoon-blok {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.rr-persoon-blok:last-child { border-bottom: none; }
.rr-persoon-blok.open { background: var(--white); }
.rr-persoon-rij {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 14px;
  background: transparent; border: none; cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.rr-persoon-rij:hover { background: var(--bg); }
.rr-persoon-blok.open .rr-persoon-rij { background: rgba(102,139,196,0.10); }
.rr-persoon-rij-tekst { flex: 1; min-width: 0; }
.rr-persoon-rij-naam { font-size: 13px; font-weight: 700; color: var(--text); }
.rr-persoon-rij-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rr-persoon-rij-acties { display: flex; align-items: center; gap: 4px; }
.rr-persoon-chevron { font-size: 22px; color: var(--muted); }
.rr-persoon-velden {
  padding: 4px 14px 14px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--border);
}
.rr-persoon-toevoegen {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 1.5px dashed var(--border); border-radius: var(--radius);
  cursor: pointer; padding: 12px;
  font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--primary);
  transition: background 0.15s, border-color 0.15s;
}
.rr-persoon-toevoegen:hover { background: rgba(102,139,196,0.06); border-color: var(--primary); border-style: solid; }
.rr-persoon-toevoegen .material-symbols-rounded { font-size: 18px; }

/* Kanaal-rij: doel als dropdown (select) krijgt zelfde styling als input */
.rr-doel-input { padding-right: 22px; }
select.rr-detail-input.rr-doel-input { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 12px) calc(50% - 2px), calc(100% - 8px) calc(50% - 2px); background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; appearance: none; }

/* ── Notificaties-paneel (v164) ── */
.rr-notif-lijst {
  display: flex; flex-direction: column;
}
/* v185.5: wrapper voor reveal-pattern — strookje rechts wordt onthuld bij klik */
.rr-notif-item-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.rr-notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  background: var(--white);
  transition: background 0.15s, transform 200ms cubic-bezier(.2,0,0,1);
  z-index: 1;
}
.rr-notif-item:hover { background: var(--bg); }
.rr-notif-item-wrap.reveal-actief .rr-notif-item { transform: translateX(-96px); }

/* Acties-strookje rechts (gelezen + verwijderen) — 2 knoppen elk 48px breed */
.rr-notif-acties {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 96px;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms;
  z-index: 0;
}
.rr-notif-item-wrap.reveal-actief .rr-notif-acties {
  opacity: 1;
  visibility: visible;
}
.rr-notif-actie {
  flex: 1;
  background: var(--success);
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: filter 120ms;
}
.rr-notif-actie:hover { filter: brightness(1.08); }
.rr-notif-actie .material-symbols-rounded { font-size: 22px; }
.rr-notif-actie-gelezen   { background: var(--success); }
.rr-notif-actie-verwijder { background: var(--danger); }
.rr-notif-item.nieuw { background: rgba(102,139,196,0.06); }
.rr-notif-item.nieuw::before {
  content: ''; position: absolute; left: 4px; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); transform: translateY(-50%);
}
.rr-notif-icoon {
  flex: 0 0 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white;
}
.rr-notif-icoon .material-symbols-rounded { font-size: 18px; }
.rr-notif-icoon.notif-rdw               { background: #CC3300; }
.rr-notif-icoon.notif-opdracht_inbox    { background: #4D7AAE; }
.rr-notif-icoon.notif-runner_ophalen    { background: #5BB078; }
.rr-notif-icoon.notif-runner_aflevering { background: #5BB078; }
.rr-notif-icoon.notif-runner_te_laat    { background: #D97706; }
.rr-notif-icoon.notif-werkplaats_klaar  { background: #668BC4; }
.rr-notif-icoon.notif-onderdelen_binnen { background: #16A34A; }
.rr-notif-icoon.notif-dealer_recall_brief { background: #92400E; }  /* v189.36: amber/bruin — past bij bij_dealer-thema */
.rr-notif-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-notif-titel { font-size: 12px; font-weight: 800; color: var(--text); line-height: 1.35; }
.rr-notif-regel { font-size: 12px; font-weight: 400; color: var(--text); line-height: 1.35; }
.rr-notif-tijd {
  flex: 0 0 auto; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700;
  padding-top: 4px;
}

/* v189.39: notificatiebox-beheer — weergave-switcher, selectie-actiebalk, checkbox, herstel, prullenbak */
.rr-notif-tabs {
  display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--white);
}
.rr-notif-tabs button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border: none; border-radius: 8px; background: transparent;
  font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; min-height: 40px;
}
.rr-notif-tabs button .material-symbols-rounded { font-size: 18px; }
.rr-notif-tabs button.actief { background: rgba(102,139,196,0.12); color: var(--primary); }
.rr-notif-tabs button:hover:not(.actief) { background: var(--bg); }

.rr-notif-selbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); background: var(--navy); color: var(--white);
}
.rr-selbar-x { background: transparent; border: none; color: var(--white); cursor: pointer; display: flex; padding: 4px; border-radius: 6px; }
.rr-selbar-x:hover { background: rgba(255,255,255,0.12); }
.rr-selbar-x .material-symbols-rounded { font-size: 20px; }
.rr-selbar-aantal { font-size: 13px; font-weight: 600; flex: 1; }
.rr-selbar-alles {
  background: transparent; border: 1px solid rgba(255,255,255,0.4); color: var(--white);
  font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; min-height: 36px;
}
.rr-selbar-alles:hover { background: rgba(255,255,255,0.12); }
.rr-selbar-verwijder {
  display: flex; align-items: center; gap: 5px; background: var(--danger, #C2185B); border: none; color: var(--white);
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; min-height: 36px;
}
.rr-selbar-verwijder .material-symbols-rounded { font-size: 18px; }
.rr-selbar-verwijder.bevestig { background: #8E0038; }
.rr-selbar-verwijder:disabled { opacity: 0.5; cursor: not-allowed; }

.rr-notif-check { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); cursor: pointer; align-self: center; }
.rr-notif-lijst.sel-modus .rr-notif-item { cursor: pointer; }
.rr-notif-item.sel-checked { background: rgba(102,139,196,0.10); }

/* Alleen de melding-inhoud vervaagt in de prullenbak — de herstel-knop blijft vol in beeld. */
.rr-notif-item-wrap.verborgen-item .rr-notif-icoon,
.rr-notif-item-wrap.verborgen-item .rr-notif-tekst { opacity: 0.55; }
.rr-notif-herstel {
  flex: 0 0 auto; align-self: center; display: flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 12px; border: 1px solid var(--primary); border-radius: 999px;
  background: rgba(102,139,196,0.12); color: var(--primary); cursor: pointer;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.rr-notif-herstel:hover { background: var(--primary); color: var(--white); }
.rr-notif-herstel .material-symbols-rounded { font-size: 18px; }
.rr-notif-herstel-label { line-height: 1; }

/* Layout: alleen page-content schuift 56px naar links zodat 't niet onder de rail loopt.
   Margin alleen wanneer rail-rechts daadwerkelijk in DOM staat (= ingelogd, geen login-scherm).
   Alle slide-in panelen (sp-paneel, berichten, rail-panelen) sluiten volledig aan op de rechterrand. */
@media (min-width: 1025px) {
  /* ── Scroll-architectuur (v189.53): de rail sluit flush aan op de viewport-rand,
     en de content-scrollbar valt op de LINKERgrens van de rail i.p.v. op de
     viewport-rand erbuiten. Daarvoor scrollt het document NIET; de app is een
     100vh flex-kolom (header + tabs vast bovenin, page-outer als enige scroller).
     De bestaande margin-right:56px op page-outer zorgt dat z'n eigen scrollbar
     net links van de rail uitkomt. Alleen ingelogd-desktop (body:has(.rail-rechts));
     login, tablet en mobiel houden het document-scroll-model. */
  body:has(.rail-rechts) { overflow: hidden; height: 100vh; padding-top: 0; }
  body:has(.rail-rechts) .app-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  body:has(.rail-rechts) .nav-wrap { flex: 0 0 auto; position: relative; z-index: 200; }
  /* Relative i.p.v. static: z-index blijft gelden, zodat header+tabs de fixed rail
     (z150) bovenin blijven afdekken — anders schildert de rail over de tabbar/header. */
  body:has(.rail-rechts) .header { position: relative; z-index: 200; }
  body:has(.rail-rechts) .tabs { position: relative; z-index: 190; top: auto; }
  body:has(.rail-rechts) .page-outer { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-right: 56px; }
}
/* Onder 1025px (tablet portrait/mobile): rail verbergen, behalve voor mobiele rollen (runner/monteur) */
@media (max-width: 1024px) {
  .rail-rechts { display: none; }
  /* v189.33: runner/monteur krijgt rail als BOTTOM-tab-bar i.p.v. rechter zijbalk
     v189.38: rol-bureau (alle overige ingelogde rollen) krijgt dezelfde mini bottom-bar op mobiel
              zodat er altijd een uitlog-uitgang is. */
  body:is(.rol-mobiel, .rol-bureau) .rail-rechts {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; height: calc(60px + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom) 0;
    border-left: none;
    border-top: 1px solid var(--border);
    gap: 0;
    box-shadow: 0 -2px 12px rgba(4,10,27,0.08);
  }
  body:is(.rol-mobiel, .rol-bureau) .rail-knop {
    width: 64px; height: 52px;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--muted);
  }
  body:is(.rol-mobiel, .rol-bureau) .rail-knop.actief { color: var(--primary); background: transparent; }
  body:is(.rol-mobiel, .rol-bureau) .rail-knop .material-symbols-rounded { font-size: 24px; }
  body:is(.rol-mobiel, .rol-bureau) .rail-label { display: block; font-size: 10px; font-weight: 500; line-height: 1; }
  body:is(.rol-mobiel, .rol-bureau) .rail-spacer { display: none; }
  /* v189.38: Planbord-knop heeft op de mobiele balk geen functie (desktop-only) → verbergen */
  body:is(.rol-mobiel, .rol-bureau) .rail-knop-planbord { display: none; }
  body:is(.rol-mobiel, .rol-bureau) .rail-avatar { width: 24px; height: 24px; font-size: 11px; }
  /* Content krijgt onderaan ruimte zodat de bottom-bar niets afdekt */
  body:is(.rol-mobiel, .rol-bureau) .page-outer { margin-right: 0 !important; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* v189.38: niet-mobiele rollen navigeren niet op mobiel (elke pagina toont 'Open op desktop')
     → route-tab-balk verbergen en de sidebar-/tab-marge resetten; alleen de mini utility-bar blijft. */
  body.rol-bureau .tabs { display: none !important; }
  body.rol-bureau .content,
  body.rol-bureau .page-outer { margin-left: 0 !important; }
}

/* ── IMPORT TAB ── */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 48px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--white); }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--primary); background: var(--primary-light); }
.upload-zone h3 { font-weight: 900; font-size: 16px; color: var(--primary-dark); margin-bottom: 6px; margin-top: 12px; }
.upload-zone p { color: var(--muted); font-size: 13px; }
.upload-btn-label { display: inline-block; margin-top: 16px; padding: 10px 24px; background: var(--primary); color: white; border-radius: var(--radius); font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.15s; }
.upload-btn-label:hover { background: var(--primary-dark); }
#bestandInput { display: none; }

/* ── PREVIEW TABEL ── */
.preview-rij-nieuw      { background: #E8F8EE; }
.preview-rij-gewijzigd  { background: #FFF4E0; }
.preview-rij-verdwenen  { background: #FDEAEA; opacity: 0.8; }
.preview-rij-ongewijzigd{ background: var(--white); }

/* ── AUDIT LOG / SYSTEEMLOGBOEK ── */
.audit-rij { display: grid; grid-template-columns: 148px 90px 90px 1fr 120px; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--border); font-size: 12px; align-items: center; }
.audit-rij:hover { background: var(--bg); }
.audit-rij.niveau-fout { background: color-mix(in srgb, var(--danger) 12%, transparent); border-left: 3px solid var(--danger); }
.audit-rij.niveau-waarschuwing { background: color-mix(in srgb, var(--warn) 14%, transparent); border-left: 3px solid var(--warn); }
.audit-rij.niveau-info { border-left: 3px solid transparent; }
.audit-tijd { font-family: monospace; font-size: 11px; color: var(--muted); }
.audit-kenteken { font-family: monospace; font-weight: 600; color: var(--text); }
.audit-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.audit-badge.cat-rdw { background: #EFF6FF; color: #1D4ED8; }
.audit-badge.cat-gebruiker { background: #F0FDF4; color: #15803D; }
.audit-badge.cat-systeem { background: #F5F3FF; color: #7C3AED; }
.audit-badge.cat-import { background: #FFF7ED; color: #C2410C; }
.audit-niveau-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.audit-niveau-dot.fout { background: #DC2626; }
.audit-niveau-dot.waarschuwing { background: #D97706; }
.audit-niveau-dot.info { background: #9CA3AF; }
.log-filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
.log-filter-bar select, .log-filter-bar input { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.log-filter-bar label { font-size: 11px; color: var(--muted); font-weight: 600; }
.log-teller { font-size: 11px; color: var(--muted); margin-left: auto; }

/* ── BANNER ── */
.banner { border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 12px; }
.banner.warn  { background: rgba(212,135,10,0.07);   border: 1px solid rgba(212,135,10,0.3); }
.banner.ok    { background: rgba(145,164,113,0.10); border: 1px solid rgba(145,164,113,0.35); }
.banner.info  { background: rgba(102,139,196,0.10); border: 1px solid var(--border); }
.banner-title { font-weight: 900; font-size: 13px; }
.banner-title.orange { color: var(--accent); }
.banner-title.green  { color: var(--success-text); }
.banner-title.blue   { color: var(--primary); }
.banner-detail { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ── WERKPLAATS STATUS PILLS ── */
.wp-status { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:0.03em; }
.wp-status.openstaand       { background:rgba(192,57,43,0.08);  color:var(--danger);     border:1px solid rgba(192,57,43,0.2); }
.wp-status.ingepland        { background:rgba(102,139,196,0.12); color:var(--primary-dark); border:1px solid rgba(102,139,196,0.3); }
.wp-status.in_behandeling   { background:rgba(53,84,149,0.10);  color:#335495;           border:1px solid rgba(53,84,149,0.25); }
.wp-status.wacht_onderdelen { background:rgba(212,135,10,0.08); color:var(--warn-text);        border:1px solid rgba(212,135,10,0.2); }
.wp-status.afgerond         { background:rgba(145,164,113,0.12); color:#5A6B45;           border:1px solid rgba(145,164,113,0.35); }
.wp-status.nvt              { background:rgba(165,190,207,0.15); color:var(--slate,#334465); border:1px solid rgba(165,190,207,0.4); }
.wp-status.afgehandeld      { background:rgba(61,170,106,0.12); color:#257A47;            border:1px solid rgba(61,170,106,0.35); }

/* ── WAGENPARK KAART ── */
.wp-kaart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.18s;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card, 0 2px 8px rgba(4,10,27,0.06));
}
.wp-kaart:hover { box-shadow: 0 6px 20px rgba(4,10,27,0.12); transform: translateY(-2px); }
.wp-kaart.status-afgerond { opacity: 0.65; }
.wp-kaart.status-afgehandeld { opacity: 0.70; }

/* Status prio-bar boven de wp-kaart */
.wp-kaart.status-openstaand      .kaart-prio-bar { background: var(--danger); }
.wp-kaart.status-ingepland        .kaart-prio-bar { background: var(--warn); }
.wp-kaart.status-in_behandeling   .kaart-prio-bar { background: var(--primary); }
.wp-kaart.status-wacht_onderdelen .kaart-prio-bar { background: var(--accent); }
.wp-kaart.status-afgerond         .kaart-prio-bar { background: var(--success); }
.wp-kaart.status-nvt              .kaart-prio-bar { background: var(--border); }
.wp-kaart.status-afgehandeld      .kaart-prio-bar { background: #3DAA6A; }

.wp-kaart-header {
  padding: 16px 18px 14px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  flex: 1;
}
.wp-info-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:16px 18px;border-top:1px solid var(--border);background: var(--bg); }
.wp-info-blok { }
.wp-info-label { font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);margin-bottom:3px; }
.wp-info-waarde { font-size:12px;line-height:1.5; }

/* ── BERICHTEN ── */
.berichten-wrap { border-top:1px solid var(--border);background: var(--bg); }
.berichten-lijst { max-height:300px;overflow-y:auto;padding:12px 18px; }
.bericht-item { display:flex;gap:10px;margin-bottom:12px; }
.bericht-item:last-child { margin-bottom:0; }
.bericht-avatar { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:#FEFEFE; }
.bericht-avatar.werkplaats { background:#335495; }
.bericht-avatar.wagenpark  { background:#668BC4; }
.bericht-avatar.admin      { background:#040A1B; }
.bericht-avatar.magazijn   { background:#91A471; }
.bericht-bubble { background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;max-width:85%;font-size:12px;line-height:1.5;color:var(--text); }
.bericht-bubble.eigen { background:#668BC4;border-color:#668BC4;color:#FEFEFE;margin-left:auto; }
.bericht-meta { font-size:10px;color:var(--muted);margin-top:3px; }
.bericht-input-wrap { display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--border); }
.bericht-input { flex:1;padding:8px 12px;border:1.5px solid var(--border);border-radius:20px;font-family:var(--font);font-size:12px;outline:none;transition:border-color 0.15s; }
.bericht-input:focus { border-color:var(--primary); }
.btn-stuur { padding:8px 16px;background:var(--primary);color:white;border:none;border-radius:20px;font-family:var(--font);font-weight:600;font-size:11px;cursor:pointer; }
.btn-stuur:hover { background:var(--primary-dark); }

/* ── WERKPLAATS FORMULIER ── */
.wp-form { padding:16px 20px;border-top:1px solid var(--border);background: var(--bg); }
.wp-form-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px; }
.form-check { display:flex;align-items:center;gap:8px;font-size:12px; }
.form-check input[type=checkbox] { width:16px;height:16px;cursor:pointer; }
.status-select { font-family:var(--font);font-size:12px;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--radius);outline:none;width:100%;transition:border-color 0.15s; }
.status-select:focus { border-color:var(--accent); }

/* ══════════════════════════════════════════════════════
   MOBIEL RESPONSIEF — iPhone & iPad
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .header { padding: 0 12px; height: auto; min-height: calc(56px + env(safe-area-inset-top)); flex-wrap: wrap; gap: 6px; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; width: 100%; max-width: 100vw; }
  .header-title { font-size: 13px; }
  .header-subtitle { font-size: 10px; }
  .header-right { gap: 6px; }
  .user-chip { font-size: 10px; padding: 3px 8px; }
  .btn-logout { font-size: 10px; padding: 4px 10px; }
  .header-avatar { width: 32px; height: 32px; font-size: 11px; }
  .tabs { padding: 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; max-width: 100vw; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 10px 10px; font-size: 9px; white-space: nowrap; flex-shrink: 0; letter-spacing: 0.3px; }
  .content { padding: 12px 12px calc(76px + env(safe-area-inset-bottom, 0px)) 12px; max-width: 100%; }
  .feit { font-size: 22px !important; }
  .page-header { margin-bottom: 16px; }
  .scoreboard { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .score-value { font-size: 22px; }
  .score-label { font-size: 9px; }
  .score-sub { font-size: 10px; }
  .filter-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .filter-group { width: 100%; flex-direction: column; align-items: stretch; gap: 2px; }
  .filter-group select,
  .filter-group input[type="text"] { width: 100% !important; box-sizing: border-box; max-width: 100%; }
  .result-count { margin-left: 0; }
  .filter-bar > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }
  .kaart-header { gap: 8px; padding: 14px 14px 10px; }
  .kaart-kenteken { font-size: 15px; }
  .kaart-badges { flex-wrap: wrap; gap: 4px; }
  .kaart-footer { padding: 8px 14px; }
  .cards-grid { grid-template-columns: 1fr; gap: 12px; }
  .melding-grid { grid-template-columns: 1fr !important; }
  .melding-blok { padding: 12px; }
  .wp-form { padding: 12px; }
  .wp-form-grid { grid-template-columns: 1fr !important; }
  .wp-kaart-header { gap: 8px; padding: 14px 14px 10px; }
  .wp-info-grid { grid-template-columns: 1fr !important; padding: 12px; gap: 8px; }
  .berichten-lijst { max-height: 200px; }
  .bericht-input-wrap { padding: 8px 12px; }
  .bericht-input { min-width: 0; flex: 1; }
  .bulk-bar { flex-direction:column; gap:8px; align-items:stretch; }
  .bulk-bar select { width:100%; }
  .modal-box { width:100%; max-width:100%; max-height:92vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
  .modal-overlay.open { align-items:flex-end; padding:0; overflow:hidden; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  td, th { padding: 7px 8px; font-size: 11px; }
  .progress-wrap { padding: 12px; }
  .progress-leg { gap: 10px; }
  .pagination { flex-direction: column; gap: 8px; align-items: flex-start; }
  .gebruiker-rij { grid-template-columns: 1fr auto; gap: 6px; padding: 10px 12px; }
  .gebruiker-rij > *:nth-child(3),
  .gebruiker-rij > *:nth-child(4) { display: none; }
  .login-box { width: 95vw; max-width: 95vw; padding: 28px 18px; }
  .herstel-box { padding: 8px 10px; }
  .notitie-wrap { padding: 12px; }
  .admin-card-header { flex-wrap: wrap; gap: 8px; }
  .btn { padding: 8px 12px; }
  /* Weergave toggle: kleinere tekst */
  .weergave-toggle-opt { font-size: 12px; }
  /* Preview samenvatting: 2 kolommen */
  #preview-samenvatting { grid-template-columns: 1fr 1fr !important; }
  /* Audit */
  .audit-rij { grid-template-columns: 100px 1fr; gap: 4px; }
  .audit-rij > *:nth-child(3) { display: none; }
  .audit-rij > *:nth-child(4) { grid-column: 1/-1; }
  .audit-rij > *:nth-child(5) { display: none; }
  .log-filter-bar { gap: 6px; }
  .log-filter-bar select, .log-filter-bar input { font-size: 11px; }
}

@media (max-width: 420px) {
  .score-value { font-size: 18px; }
  .tab { font-size: 8px; padding: 8px 8px; }
  .content { padding: 8px 8px calc(76px + env(safe-area-inset-bottom, 0px)) 8px; }
  .header-title { font-size: 12px; }
  .scoreboard { grid-template-columns: 1fr 1fr; gap: 8px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .content { padding: 20px 24px; }
  .header { padding: 0 24px; }
  .tabs { padding: 0 24px; }
  .scoreboard { grid-template-columns: repeat(3, 1fr); }
  .wp-info-grid { grid-template-columns: 1fr 1fr; }
  /* Facet tabel: verberg minder kritieke kolommen */
  .facet-tabel td.facet-col-meld { display: none; }
  .facet-tabel th.facet-col-meld { display: none; }
}

/* ── TOUCH TARGETS (min 44px) ── */
.btn { min-height: 44px; }
.tab { min-height: 44px; display: flex; align-items: center; gap: 6px; }
.pk-expand-knop { min-height: 44px; }
select { min-height: 38px; }
input[type="text"], input[type="email"], input[type="password"] { min-height: 38px; }

/* Tablet landscape: zijbalk actief — geen horizontale tabs-padding,
   wel ademruimte tussen header en eerste tab-icoon */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .content { padding: 20px 24px; }
  .tabs { padding: 12px 4px 8px; }
}
/* Tablet portrait: onderbalk actief — horizontale tab-padding */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .content { padding: 20px 24px; }
  .tabs { padding: 0 24px; }
}

/* ── LANDSCAPE MODUS ── */
@media (orientation: landscape) and (max-width: 1024px) {
  .header { min-height: calc(48px + env(safe-area-inset-top)); padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .content { padding: 10px 16px; }
  .scoreboard { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
  .score-value { font-size: 20px; }
  .page-header { margin-bottom: 10px; }
  .feit { font-size: 20px !important; }
  .filter-bar { gap: 6px; margin-bottom: 10px; }
  .filter-bar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .filter-group select,
  .filter-group input[type="text"] { width: auto !important; }
  .modal-box { max-height: 80vh; }
  .progress-wrap { padding: 10px 16px; margin-bottom: 12px; }
  /* Facet tabel compacter in landscape */
  .facet-tabel th, .facet-tabel td { padding: 7px 10px; }
}

/* ── v20: BERICHTEN KNOP (header) ── */
/* ── TOAST MELDING ── */
.app-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: white; padding: 10px 20px;
  border-radius: var(--radius-lg); font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 9999;
  opacity: 0; transition: opacity 0.2s; pointer-events: none; white-space: nowrap;
}
.app-toast.succes { background: var(--success); }
.app-toast.fout   { background: var(--danger); }
.app-toast.zichtbaar { opacity: 1; }

/* v189.57: toast met actie-knop (bv. bewerk-conflict). Dark-proof via tokens; klikbaar. */
.app-actie-toast {
  pointer-events: auto; white-space: normal;
  display: flex; align-items: center; gap: 14px;
  max-width: min(92vw, 480px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--warn);
}
.app-actie-toast-knop {
  flex-shrink: 0; cursor: pointer;
  background: transparent; color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: var(--radius);
  font-size: 12px; font-weight: 700; padding: 6px 12px;
}
.app-actie-toast-knop:hover { background: var(--primary-light); }

.berichten-knop {
  position: relative;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  min-height: 36px;
  min-width: 36px;
}
.berichten-knop:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.berichten-knop.heeft-ongelezen { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }
.berichten-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--danger);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
  font-family: var(--font);
  padding: 1px 5px;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
  border: 2px solid var(--white);
  pointer-events: none;
}

/* ── v20: SLIDE-IN PANEEL ── */
#berichten-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 200;
  display: none;
  opacity: 0;
  transition: opacity 0.2s;
}
#berichten-overlay.open { display: block; opacity: 1; }

#berichten-paneel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background: var(--surface);
  box-shadow: none; /* schaduw alleen bij open — anders lekt de -4px-gloed off-screen op de rechterrand */
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid var(--border);
  padding-top: env(safe-area-inset-top); /* iOS PWA statusbar */
}
#berichten-paneel.open { transform: translateX(0); box-shadow: -4px 0 24px rgba(0,0,0,0.12); }

.bp-header {
  padding: 18px 20px;
  border-bottom: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--navy);
  flex-shrink: 0;
}
.bp-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bp-zoek-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.bp-zoek-wrap .material-symbols-rounded {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--muted);
  pointer-events: none;
}
input.bp-zoek-input[type="text"] {
  width: 100%;
  padding: 7px 10px 7px 38px;
  border: 1.5px solid rgba(165,190,207,0.35);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 12px;
  outline: none;
  background: rgba(165,190,207,0.12);
  color: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.bp-zoek-input::placeholder { color: #A5BECF; opacity: 0.85; }
.bp-zoek-input:focus { border-color: #A5BECF; background: rgba(165,190,207,0.20); }
.bp-zoek-wrap .material-symbols-rounded { color: #A5BECF; }
.bp-titel {
  font-weight: 700;
  font-size: 15px;
  color: #A5BECF;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bp-titel .material-symbols-rounded { color: #A5BECF; font-size: 20px; }
.bp-sluit {
  background: none;
  border: none;
  cursor: pointer;
  color: #A5BECF;
  padding: 4px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.bp-sluit:hover { background: rgba(255,255,255,0.12); color: #fff; }
.bp-alles-gelezen {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.bp-alles-gelezen:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

.bp-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* v178: Inbox / Archief tab-switcher bovenin berichtenbox-body */
.bp-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  position: sticky; top: 0; z-index: 5;
}
.bp-tab {
  flex: 1; padding: 11px 14px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.bp-tab:hover { background: var(--bg); color: var(--text); }
.bp-tab.actief { color: var(--primary); border-bottom-color: var(--primary); }
.bp-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; padding: 0 5px; height: 16px;
  background: var(--bg); color: var(--muted);
  border-radius: 8px; font-size: 10px; font-weight: 800;
  letter-spacing: 0;
}
.bp-tab.actief .bp-tab-count { background: var(--primary); color: white; }

/* Groepering per voertuig */
/* v185.5: M3-stijl two-line list-item voor berichten-inbox (Gmail-pattern) */
.bp-groep {
  /* Inset divider — start na de leading kenteken-plate (16+plate+12 ≈ 24+plate) */
  position: relative;
}
.bp-groep + .bp-groep::before {
  content: '';
  position: absolute;
  top: 0; left: 88px; right: 0;
  height: 1px;
  background: var(--border);
  opacity: 0.45;
}
.bp-groep-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 120ms;
  background: var(--white);
  min-height: 60px;
}
.bp-groep-header:hover { background: rgba(102,139,196,0.06); }
.bp-groep-header.heeft-ongelezen .bp-naam { font-weight: 700; color: var(--text); }
.bp-groep-header.heeft-ongelezen .bp-snippet { font-weight: 600; color: var(--text); }
.bp-groep-header.heeft-ongelezen .bp-tijd { font-weight: 700; color: var(--text); }
.bp-leading { flex-shrink: 0; }
.bp-leading .kenteken-plate { height: 22px; }
.bp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bp-naam {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-snippet {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.bp-trailing {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 50px;
}
.bp-tijd {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.bp-trailing-icons {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 120ms;
}
.bp-groep-header:hover .bp-trailing-icons { opacity: 1; }
.bp-trailing-icons.altijd-zichtbaar { opacity: 1; }   /* paperclip + ongelezen-pill blijven zichtbaar */
.bp-paperclip {
  font-size: 18px !important;
  color: var(--muted);
  opacity: 0.8;
}
.bp-paperclip-altijd { opacity: 1; }  /* paperclip blijft zichtbaar als er foto's zijn */
.bp-kenteken {
  font-family: 'Kenteken', monospace;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text);
}
.bp-klant {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.bp-groep-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bp-ongelezen-dot {
  background: var(--danger);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
  font-family: var(--font);
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
/* Outlook-stijl: blauwe stip links + blauwe pill met aantal rechts */
.bp-ongelezen-stip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary-dark);
  flex-shrink: 0;
  display: inline-block;
}
.bp-ongelezen-stip-leeg {
  width: 8px; height: 8px;
  flex-shrink: 0;
  display: inline-block;
}
.bp-ongelezen-pill {
  background: var(--primary-dark);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font);
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
  line-height: 16px;
}
.bp-open-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.bp-open-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

/* Berichten thread in het paneel */
.bp-thread {
  display: none;
  background: var(--bg);
  padding: 10px 20px 14px;
  border-top: 1px solid var(--border);
}
.bp-thread-lijst {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  max-height: 320px;
  overflow-y: auto;
}
/* In side-panel context scrollt .sp-body al — geen dubbele scrollbar */
#ovz-sp-body .bp-thread-lijst { max-height: none; overflow-y: visible; }

/* Terugroepactie-melding (RDW-stijl) */
.tg-melding { margin-bottom: 6px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tg-melding-header { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--bg); font-size:12px; font-weight:700; color:var(--text); cursor:pointer; user-select:none; }
.tg-melding-header:hover { background:#EEF1F6; }
.tg-melding-body { padding: 0; background: var(--white); }
.tg-rij { display:grid; grid-template-columns: 40% 60%; gap:0; border-top:1px solid var(--border); font-size:12px; }
.tg-rij:first-child { border-top:0; }
.tg-label { padding:8px 12px; font-weight:700; color:var(--text); background:transparent; }
.tg-waarde { padding:8px 12px; color:var(--text); line-height:1.45; word-break:break-word; }
.bp-thread.open { display: block; }
.bp-bericht-item {
  margin-bottom: 10px;
}
.bp-bericht-item:last-child { margin-bottom: 0; }
.bp-bericht-bubble {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 100%;
  color: var(--text);
}
.bp-bericht-bubble {
  transition: font-weight 0.4s ease;
}
.bp-bericht-bubble.ongelezen {
  background: transparent;
  color: var(--text);
  font-weight: 700;
}
.bp-bericht-systeem.ongelezen { font-weight: 700; }
.bp-bericht-systeem { transition: font-weight 0.4s ease; }
.bp-bericht-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bp-bericht-naam { font-weight: 700; color: var(--text); }

/* Antwoord input in paneel */
.bp-reply {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.bp-reply-input {
  flex: 1;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
.bp-reply-input:focus { border-color: var(--primary); }
/* v189.55: mention-rij hover (verving inline onmouseenter/onmouseleave i.v.m. CSP) */
.bp-mention-rij:hover { background: var(--primary-light); }
.bp-reply-btn {
  padding: 7px 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.bp-reply-btn:hover { background: var(--primary-dark); }

/* Lege staat */
.bp-leeg {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.bp-leeg .material-symbols-rounded { font-size: 48px; margin-bottom: 12px; display: block; color: var(--border); }

/* Mobile: paneel wordt full-screen */
@media (max-width: 480px) {
  #berichten-paneel { width: 100vw; }
}

/* ── v20: SPINNER CSS ── */
@keyframes spin { to { transform: rotate(360deg); } }
.laden-overlay { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.no-data { padding: 36px; text-align: center; color: var(--muted); font-style: italic; }

/* ── v12: BULK ACTIEBALK ── */
.bulk-bar { display:none; align-items:center; gap:12px; background:rgba(102,139,196,0.10); border:1.5px solid #668BC4; border-radius:var(--radius-lg); padding:10px 18px; margin-bottom:14px; animation:slideDown 0.2s ease; }
.bulk-bar.zichtbaar { display:flex; }
.bulk-count { font-weight:700; font-size:13px; color:#335495; white-space:nowrap; }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
tr.selected td { background:color-mix(in srgb, var(--primary) 8%, var(--white)); }
tr.clickable { cursor:pointer; }
tr.clickable:active td { background:var(--primary-light); }
th.cb-col, td.cb-col { width:36px; text-align:center; padding:9px 8px; }
td.cb-col input[type="checkbox"], th.cb-col input[type="checkbox"] { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.status-dot.openstaand { background:var(--danger); }
.status-dot.ingepland { background:var(--warn); }
.status-dot.in_behandeling { background:var(--primary); }
.status-dot.wacht_onderdelen { background:var(--accent); }
.status-dot.afgerond { background:var(--success); }
.status-dot.nvt { background:var(--border); }
.status-dot.afgehandeld { background:#3DAA6A; }
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:#A5BECF; padding:4px 8px; border-radius:4px; }
.modal-header .modal-close:hover, .modal-close:hover { background: rgba(255,255,255,0.12); color:#fff; }
.form-check { display:flex; align-items:center; gap:8px; font-size:12px; cursor:pointer; }
.form-check input[type="checkbox"] { width:16px; height:16px; accent-color:var(--primary); }

/* ══════════════════════════════
   PLANNING / GANTT (v34)
══════════════════════════════ */
.planning-toolbar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:0 0 14px; margin-top:0; margin-bottom:4px;
}
.planning-nav { display:flex; align-items:center; gap:4px; }
.planning-nav-btn { padding:6px 10px; min-height:36px; }
.planning-toolbar .btn { height:36px; min-height:36px; padding:0 14px; }
.planning-weergave-knoppen { display:flex; gap:3px; }
.planning-view-btn {
  width:36px; height:36px; padding:0;
  font-size:12px; font-weight:700;
  border-radius:6px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.12s;
}
.planning-view-btn:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary-dark); }
.planning-view-actief {
  background:var(--primary-dark) !important;
  border-color:var(--primary-dark) !important;
  color:#fff !important;
}

/* Weekend header */
.gantt-dag-weekend { background:#2a3a5c !important; opacity:0.85; }
.gantt-uur-weekend { background:var(--bg) !important; }

/* Rode huidige-tijd aanwijzer */
#gantt-tijd-lijn {
  position:absolute;
  top:0; bottom:0;
  width:2px;
  background:#E53E3E;
  z-index:30;
  pointer-events:none;
}
#gantt-tijd-lijn::before {
  content:'';
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:8px; height:8px;
  background:#E53E3E;
  border-radius:50%;
  margin-top:-4px;
}

/* Gantt scroll wrapper */
.gantt-outer {
  width:100%; overflow-x:auto; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface);
  max-height: calc(100vh - 260px);
  min-height: 300px;
  position:relative;
}
/* Scrollbars in dezelfde stijl als het blok — geen witte balk, ronde uiteinden
   zodat de onderkant aansluit op de border-radius van .gantt-outer. */
.gantt-outer::-webkit-scrollbar { height:12px; width:12px; }
.gantt-outer::-webkit-scrollbar-track { background:var(--surface); border-radius:0 0 var(--radius) var(--radius); }
.gantt-outer::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; border:3px solid var(--surface); background-clip:padding-box; }
.gantt-outer::-webkit-scrollbar-thumb:hover { background:var(--muted); }
.gantt-outer::-webkit-scrollbar-corner { background:var(--surface); }
.gantt-outer { scrollbar-color: var(--border) var(--surface); scrollbar-width: thin; }

/* Gantt tabel */
.gantt-table {
  border-collapse:collapse;
  min-width:100%;
  table-layout:fixed;
}
.gantt-table th, .gantt-table td {
  border:1px solid var(--border);
  padding:0;
  vertical-align:top;
  box-sizing:border-box;
}

/* Koptekst rijen */
.gantt-header-datum th {
  background:var(--primary-dark);
  color:#fff;
  font-size:11px;
  font-weight:700;
  text-align:center;
  padding:5px 2px;
  white-space:nowrap;
  position:sticky; top:0; z-index:20;
}
.gantt-dag-vandaag {
  background:rgba(34,197,94,0.28) !important;
  color:#fff !important;
}
.gantt-dag-vakantie {
  background:#c47a0a !important;
  color:#fff !important;
}
.gantt-header-uur th {
  background:var(--surface);
  color:var(--muted);
  font-size:10px;
  text-align:center;
  padding:3px 0;
  font-weight:400;
  position:sticky; top:28px; z-index:19;
  border-bottom:2px solid var(--border);
}

/* Naam-kolom */
.gantt-naam-cel {
  width:90px; min-width:90px; max-width:90px;
  background:var(--surface);
  position:sticky; left:0; z-index:15;
  font-size:11px; font-weight:700; color:var(--text);
  padding:2px 8px;            /* v189.71: rij hugt de tekst (was 6px) */
  border-right:2px solid var(--border);
  white-space:nowrap; overflow:visible; text-overflow:ellipsis;
}
.gantt-naam-cel.header-cel {
  background:var(--primary-dark); color:var(--op-accent);  /* v189.77: rauwe wit-hex vervangen door token (wit in beide modi) */
  position:sticky; left:0; top:0; z-index:25;
}
/* v189.77: compacte sorteer-toggle (Naam/Kleur) onder de MONTEUR-koptekst — verhuisd uit de werkbalk.
   Zit in de donkere primary-dark headercel (beide modi) → wit accent via --op-accent (color-mix voor transparantie). */
.gantt-naam-header { display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding-left:12px; }  /* v189.77.1: lijnt "Monteur"+toggle uit met de monteurnamen eronder (14px), weg van de rand */
.gantt-naam-header-titel { font-size:11px; font-weight:700; line-height:1; }
.gantt-sorteer-toggle {
  display:inline-flex; align-items:center; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--op-accent) 35%, transparent);
  border-radius:6px;
  background:color-mix(in srgb, var(--op-accent) 8%, transparent);
}
.gantt-sorteer-seg {
  width:30px; height:18px; padding:0; border:none; cursor:pointer;  /* v189.77.3: breder + groter icoon (16px), hoogte gelijk → header blijft 46px, geen shift */
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:color-mix(in srgb, var(--op-accent) 72%, transparent);
  transition:background 0.12s, color 0.12s;
}
.gantt-sorteer-seg + .gantt-sorteer-seg { border-left:1px solid color-mix(in srgb, var(--op-accent) 25%, transparent); }
.gantt-sorteer-seg .material-symbols-rounded { font-size:16px; pointer-events:none; }
.gantt-sorteer-seg:hover { background:color-mix(in srgb, var(--op-accent) 16%, transparent); color:var(--op-accent); }
.gantt-sorteer-seg.is-actief { background:var(--op-accent); color:var(--primary-dark); }
.gantt-naam-cel.uur-cel {
  background:var(--surface);
  position:sticky; left:0; top:28px; z-index:24;
}

/* Uurcellen achtergrond */
.gantt-uur-cel {
  width:48px; min-width:48px;
  height:22px;            /* v189.71: rijhoogte = teksthoogte (was 44px -> 32px -> 22px) */
  position:relative;
  padding:0;
  overflow:visible;
}
.gantt-uur-cel.werkblok  { background:rgba(34,197,94,0.18); }
.gantt-uur-cel.pauzeblok { background:rgba(251,191,36,0.18); }
.gantt-uur-cel.buiten    { background:var(--bg); }

/* Afspraakblok */
.gantt-afspraak {
  position:absolute;
  top:2px; bottom:2px;            /* v189.71: meekrimpen met de compactere rij */
  left:0;
  border-radius:5px;
  background:var(--primary);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:2px 4px;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  display:flex; align-items:center; gap:3px;
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
  transition:opacity .15s;
  z-index:5;
}
.gantt-afspraak:hover { opacity:0.85; }
.gantt-afspraak .ga-icon { font-size:11px; flex-shrink:0; }
.gantt-afspraak.status-ingepland    { background:var(--primary); }
.gantt-afspraak.status-in_behandeling { background:#0e7a5e; }
.gantt-afspraak.status-wacht_onderdelen { background:#b45309; }
/* Opdracht uitgevoerd: donkerder grijs + zwarte tekst = niet meer actief, maar leesbaar */
/* v189.86: afgevoerd voertuig krijgt dezelfde grijze 'niet meer actief'-behandeling als gereedgemeld. */
.gantt-afspraak.status-afgerond, .gantt-afspraak.status-afgevoerd       { background:var(--blok-inactief-bg); color:var(--blok-inactief-tekst); opacity:0.70; }
.gantt-afspraak.status-afgerond:hover, .gantt-afspraak.status-afgevoerd:hover { opacity:0.90; }
.gantt-afspraak.status-afgerond .ga-icon, .gantt-afspraak.status-afgevoerd .ga-icon { color:var(--blok-inactief-tekst); }
.gantt-afspraak.status-openstaand   { background:var(--accent); }

/* v189.86: oranje 'uit de vloot'-strook in hover-tooltip + planning-detail-modal (token-gedreven → dark-proof). */
.afgevoerd-strook {
  display:flex; gap:6px; align-items:center;
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn-text);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px; font-weight: 600;
  margin-bottom: 6px;
  white-space: nowrap;   /* v189.88: tekst op één regel, niet twee */
}
.afgevoerd-strook .material-symbols-rounded { font-size:15px; flex-shrink:0; color:var(--warn-text); }
/* v189.89: in de hover-tooltip loopt de strook full-bleed tot de randen (tooltip-padding
   wegcompenseren met negatieve marges); tekst blijft uitgelijnd met de overige rijen. */
.gantt-tooltip .afgevoerd-strook { margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; border-radius:0; }

/* Vervoer-icoon kleuren in blok */
.ga-vervoer-inleveren  { color:#bfdbfe; }
.ga-vervoer-ophalen    { color:#fde68a; }
.ga-vervoer-ter_plaatse { color:#bbf7d0; }
.ga-vervoer-dealer     { color:#e9d5ff; }

/* Monteur-rij label */
.gantt-monteur-rij td.gantt-naam-cel {
  background:var(--bg);
  font-weight:700;
  vertical-align:middle;            /* v189.72: naam verticaal centreren i.p.v. bovenaan hangen */
  padding-left:14px;                /* v189.76: naam vrij van het 4px kleurrandje links (was 8px) */
}
.gantt-monteur-rij.geen-afspraken td.gantt-naam-cel {
  color:var(--muted);
  font-weight:400;
}

/* Avatar in naam-cel */
.gantt-monteur-avatar {
  width:32px; height:32px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--border);
  flex-shrink:0;
}
.gantt-monteur-initiaal {
  width:32px; height:32px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
/* v189.70: compacte horizontale naam-cel — kleur/initiaal-chip náást de naam (was verticale stack met grote avatar) */
.gantt-naam-cel-inner {
  display:flex; flex-direction:row; align-items:center;
  gap:6px;
}
.gantt-monteur-chip {
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--op-accent);
  flex-shrink:0;
}
.gantt-naam-tekst {
  flex:1 1 auto;
  font-size:11px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
/* Kop van de monteur-hover-tooltip met volledige profielfoto */
.gmt-kop { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.gmt-foto { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--border); flex-shrink:0; }
.gmt-foto-initiaal { display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--op-accent); }

/* Tooltip werkrooster */
.gantt-monteur-tooltip {
  position:fixed;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  min-width:170px;
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
  z-index:9999;
  pointer-events:none;
  display:none;
  white-space:nowrap;
}
.gantt-monteur-tooltip .gmt-naam {
  font-weight:700; font-size:13px; color:var(--text);
  margin-bottom:6px;
}
.gantt-monteur-tooltip .gmt-dag {
  font-size:11px; color:var(--muted);
  display:flex; gap:6px; margin-bottom:2px;
}
.gantt-monteur-tooltip .gmt-dag strong {
  color:var(--text); min-width:28px;
}
.gantt-naam-cel:hover .gantt-monteur-tooltip { /* positie via JS */ }

/* Niet-ingepland zone */
.gantt-niet-ingepland-rij td {
  background:var(--bg);
  height:36px;
}

/* Tooltip */
.gantt-tooltip {
  position:fixed;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 14px;
  font-size:12px;
  z-index:9999;
  pointer-events:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
  max-width:380px;   /* v189.88: breder zodat de afgevoerd-strook op één regel past */
  min-width:160px;
}
.gantt-tooltip-titel {
  font-weight:700; font-size:13px; margin-bottom:6px; color:var(--primary);
}
.gantt-tooltip-rij {
  display:flex; gap:6px; align-items:flex-start; margin-bottom:3px;
}
.gantt-tooltip-rij .material-symbols-rounded { font-size:13px; color:var(--muted); flex-shrink:0; margin-top:1px; }

/* Inplan modal specifiek */
.inplan-kenteken-zoek {
  display:flex; gap:8px; align-items:center; margin-bottom:12px;
}
.inplan-result-lijst {
  max-height:280px; overflow-y:auto;
  border:1px solid var(--border); border-radius:6px;
  margin-bottom:12px;
}
/* v189.42: teller boven de resultatenlijst (blijft staan bij scrollen) */
.inplan-result-teller {
  position:sticky; top:0; z-index:1;
  padding:6px 12px; font-size:11px; font-weight:600; color:var(--muted);
  background:var(--bg); border-bottom:1px solid var(--border);
}
/* v189.42: categorie-badge in een zoekresultaat hergebruikt de Overzicht-badge (zelfde kleuren). */

/* v189.45: sub-tabs op Overzicht (Jira-stijl) */
.ovz-subtabs { display:flex; gap:2px; border-bottom:2px solid var(--border); margin-bottom:16px; }
.ovz-subtab {
  background:transparent; border:none; padding:9px 16px; font-size:13px; font-weight:600;
  color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:color .15s, border-color .15s;
}
.ovz-subtab:hover { color:var(--text); }
.ovz-subtab.actief { color:var(--primary); border-bottom-color:var(--primary); }

/* v189.45: drill-down per terugroepactie (modellen + debiteuren) */
.ovz-recall-rij:hover { background:var(--bg); }
.ovz-recall-rij.open { background:rgba(102,139,196,0.06); }
.ovz-recall-detail-rij > td { padding:0 !important; background:var(--bg); }
.ovz-recall-detail { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:14px 18px 18px; border-bottom:2px solid var(--border); }
.ovz-recall-blok-titel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; }
.ovz-recall-blok-rij { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; font-size:13px; border-bottom:1px solid var(--border); }
.ovz-recall-blok-rij > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovz-recall-aantal { flex:0 0 auto; min-width:24px; text-align:center; font-weight:700; font-size:11px; color:var(--primary); background:var(--primary-light,rgba(102,139,196,0.12)); padding:1px 7px; border-radius:10px; }
.ovz-recall-deb { padding:6px 0; }
.ovz-recall-kts { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
/* v189.45.7: kentekens in het kenteken-font, zachte secundaire tekstkleur zodat ze niet 'knallen' — lichte blauwe gloed + iets donkerder bij hover */
.ovz-recall-kt { font-family:'Kenteken', monospace; font-size:12px; font-weight:400; letter-spacing:.5px; padding:2px 6px; border:none; background:transparent; color:var(--muted); cursor:pointer; border-radius:4px; transition:background .12s, color .12s; }
.ovz-recall-kt:hover { background:var(--primary-light,rgba(102,139,196,0.15)); color:var(--primary); }
@media (max-width:900px){ .ovz-recall-detail { grid-template-columns:1fr; gap:14px; } }
.inplan-result-item {
  padding:8px 12px; cursor:pointer; font-size:12px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
/* v189.42: vaste kolommen — categorie | kenteken | naam (links, ruim van kenteken) | status (rechts) */
.inplan-res-cat    { flex:0 0 auto; display:flex; align-items:center; }
.inplan-res-kt     { flex:0 0 auto; font-weight:700; white-space:nowrap; }
.inplan-res-naam   { flex:1 1 auto; min-width:0; text-align:left; color:var(--text);
                     overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inplan-res-status { flex:0 0 auto; font-size:10px; color:var(--muted); white-space:nowrap; text-align:right; }
/* v189.42.4: status als gekleurd label (pill), zoals de categorie-badges. Ingepland = groen + datum. */
.inplan-status-badge { display:inline-block; padding:2px 8px; border-radius:8px; font-size:10px; font-weight:700; color:#fff; white-space:nowrap; }
.inplan-status-ingepland { background:#43A047; }
.inplan-result-item:last-child { border-bottom:none; }
.inplan-result-item:hover { background:var(--bg); }
.inplan-result-item.geselecteerd { background:rgba(var(--primary-rgb,51,84,149),0.1); font-weight:700; }

/* Rol rechten matrix (beheerder) */
.rol-rechten-tabel { width:100%; border-collapse:collapse; font-size:12px; }
.rol-rechten-tabel th { background:var(--bg); font-weight:700; padding:8px 10px; text-align:left; border-bottom:2px solid var(--border); }
.rol-rechten-tabel td { padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.rol-rechten-tabel tr:last-child td { border-bottom:none; }
.rechten-toggle { display:flex; gap:6px; }
.rechten-badge { padding:3px 8px; border-radius:4px; font-size:11px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--bg); color:var(--muted); }
.rechten-badge.actief-lezen { background:rgba(var(--primary-rgb,51,84,149),0.12); color:var(--primary); border-color:var(--primary); }
.rechten-badge.actief-schrijven { background:var(--primary); color:#fff; border-color:var(--primary); }
/* v42: "Niet zichtbaar" badge */
.rechten-badge.actief-verborgen { background:rgba(239,68,68,0.12); color:#ef4444; border-color:#ef4444; }
/* v51ad: Rollen & rechten — icon knoppen */
.rechten-icon-groep { display:flex; gap:2px; justify-content:center; align-items:center; }
.rechten-icon-btn { background:none; border:1px solid transparent; border-radius:6px; padding:3px 5px; cursor:pointer; color:var(--muted); line-height:1; transition:background .1s,color .1s; }
.rechten-icon-btn .material-symbols-rounded { font-size:16px; vertical-align:middle; }
.rechten-icon-btn:hover { background:var(--bg); border-color:var(--border); color:var(--text); }
.rechten-icon-btn.ri-actief-nv { background:#b91c1c; border-color:#b91c1c; color:#fff; }

.ovz-cat-tooltip {
  position: fixed; z-index: 9999;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  pointer-events: none;
}
.rechten-icon-btn.ri-actief-le { background:rgba(51,84,149,0.12); border-color:var(--primary); color:var(--primary); }
.rechten-icon-btn.ri-actief-sc { background:var(--primary); border-color:var(--primary); color:var(--op-accent); }

/* ── Rollen & rechten — granulaire matrix (rollen-/rechtenfundament v1, fase 2) ── */
.rm-banner { display:flex; gap:10px; align-items:flex-start; padding:11px 14px; margin-bottom:14px;
  background:var(--bg); border-left:3px solid var(--primary); border-radius:8px; font-size:12.5px; color:var(--text); line-height:1.45; }
.rm-banner .material-symbols-rounded { font-size:19px; color:var(--primary); flex-shrink:0; }
/* Fase 4 — handhaving-status + aan/uit-schakelaar (alleen systeembeheerder). Tokens, dark-proof. */
.rm-banner-actief { border-left-color: var(--success); }
.rm-banner-actief .material-symbols-rounded { color: var(--success); }
.rm-handhaving { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:14px;
  background:var(--white); border:1px solid var(--border); border-left-width:4px; border-radius:10px; }
.rm-handhaving .rm-hh-icon { font-size:26px; flex-shrink:0; }
.rm-handhaving .rm-hh-tekst { flex:1; min-width:0; }
.rm-handhaving .rm-hh-tekst strong { font-size:14px; font-weight:600; color:var(--text); }
.rm-handhaving .rm-hh-sub { font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.45; }
.rm-handhaving.is-uit   { border-left-color: var(--muted); }
.rm-handhaving.is-uit   .rm-hh-icon { color: var(--muted); }
.rm-handhaving.is-vraag { border-color: var(--warn); border-left-color: var(--warn); }
.rm-handhaving.is-vraag .rm-hh-icon { color: var(--warn); }
.rm-handhaving.is-aan   { border-color: var(--success); border-left-color: var(--success); }
.rm-handhaving.is-aan   .rm-hh-icon { color: var(--success); }
.rm-hh-knoppen { display:flex; gap:8px; flex-shrink:0; }
.rm-hh-knop { font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:8px; border:1px solid var(--border);
  background:var(--white); color:var(--text); cursor:pointer; white-space:nowrap; }
.rm-hh-knop:hover { background:var(--surface-2); }
.rm-hh-knop.rm-hh-prim { background:var(--primary); color:var(--white); border-color:var(--primary); }
.rm-hh-knop.rm-hh-prim:hover { background:var(--primary-dark); }
.rm-hh-knop.rm-hh-sec { background:var(--white); color:var(--text); }
.rm-balk { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.rm-filter { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); cursor:pointer; }
.rm-save { font-size:12px; font-weight:600; color:var(--muted); min-height:16px; }
.rm-save-ok { color:var(--success); } .rm-save-fout { color:var(--danger); } .rm-save-bezig { color:var(--muted); }
.rm-kop { font-size:14px; font-weight:600; color:var(--text); margin:18px 0 4px; }
/* Inklapbare secties (Schermen / Handelingen / Klantgegevens). */
.rm-sectie { border-top:1px solid var(--border); }
.rm-sectie:first-child { border-top:none; }
.rm-sectie-kop { display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; margin:0; padding:12px 0; }
.rm-sectie-kop:hover { color:var(--primary); }
.rm-sectie-chevron { font-size:20px; color:var(--muted); }
.rm-sectie-kop:hover .rm-sectie-chevron { color:var(--primary); }
.rm-hint { font-size:11.5px; color:var(--muted); margin:0 0 10px; line-height:1.4; }
.rm-hint-icon { font-size:13px; vertical-align:-2px; }
.rm-scroll { overflow-x:auto; margin-bottom:8px; }
.rm-tabel { min-width:760px; }
.rm-tabel th, .rm-tabel td { text-align:center; }
/* Sentence-case koppen + leesbare kleur (niet het glazige #A5BECF van de globale th);
   font-size 11px zodat "Recht"/"Gegevensblok" gelijk is aan de rolnamen. */
.rm-tabel th { text-transform:none; letter-spacing:normal; color:var(--muted); font-size:11px; }
.rm-tabel th.rm-hoek, .rm-tabel .rm-rechtlabel { text-align:left; }
.rm-rolkop { cursor:pointer; user-select:none; width:92px; white-space:normal; vertical-align:bottom; }
.rm-rolkop:hover { color:var(--primary); }
.rm-rolnaam { display:block; font-size:11px; }
.rm-teller { display:inline-block; margin-top:3px; font-size:10px; font-weight:700; color:var(--op-accent);
  background:var(--cat-groen); border:none; border-radius:10px; padding:1px 7px; min-width:18px; }
.rm-rechtlabel { cursor:pointer; font-size:12px; color:var(--text); }
.rm-rechtlabel:hover { color:var(--primary); }
.rm-velden { display:block; font-size:10px; color:var(--muted); font-weight:400; white-space:normal; max-width:240px; margin-top:1px; }
.rm-groepkop td { background:var(--bg); font-weight:700; font-size:11px; color:var(--muted); padding:6px 10px; text-align:left; }
.rm-cel-td { padding:5px 6px; }
/* Handelingscellen: kale native checkbox — identiek aan de mention-/notificatie-matrix
   (zelfde kleur + grootte, geen eigen accent-color), geeft lucht t.o.v. grote toggle-knoppen. */
.rm-niveau { font-size:11.5px; padding:3px 6px; border:1px solid var(--border); border-radius:6px; background:var(--white); color:var(--text); cursor:pointer; }
.rm-niveau-vast { font-size:11px; color:var(--muted); font-style:italic; }
.rm-rolkop:focus-visible, .rm-rechtlabel:focus-visible, .rm-niveau:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
/* v42/v189.91: gedeelde sidebar-layout — Beheer én Admin gebruiken dezelfde regels (één bron). */
.beheer-layout, .admin-layout { display:flex; align-items:flex-start; }
.beheer-sidebar, .admin-sidebar { position:sticky; top:0; width:200px; flex-shrink:0; padding:12px 8px; align-self:flex-start; }
.beheer-nav-item, .admin-nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; cursor:pointer; color:var(--muted); font-size:13px; font-weight:500; transition:background .15s,color .15s; }
.beheer-nav-item:hover, .admin-nav-item:hover { background:var(--bg); color:var(--text); }
.beheer-nav-item.actief, .admin-nav-item.actief { background:rgba(51,84,149,0.1); color:var(--primary); }
.beheer-nav-label, .admin-nav-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.beheer-content, .admin-content { flex:1; min-width:0; padding:0 0 40px 0; }
.beheer-sectie, .admin-sectie { padding:0; }
/* Inklapbare zijbalk — toggle + icoon-rail (M3 navigation rail), gedeeld Beheer/Admin. */
.beheer-sidebar, .admin-sidebar { transition:width .18s ease; }
/* Geen kader: zelfde geometrie als een nav-item (padding/gap), zodat het icoon recht boven
   het Gebruikers-icoon staat op gelijke verticale afstand. */
.sidebar-toggle { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; margin:0; background:transparent; border:none; border-radius:8px; color:var(--muted); cursor:pointer; transition:background .15s,color .15s; }
.sidebar-toggle:hover { background:var(--bg); color:var(--text); }
.sidebar-toggle:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.is-ingeklapt .sidebar-toggle { justify-content:center; padding:10px 0; }
.beheer-sidebar.is-ingeklapt, .admin-sidebar.is-ingeklapt { width:56px; }
.is-ingeklapt .beheer-nav-label, .is-ingeklapt .admin-nav-label { display:none; }
.is-ingeklapt .beheer-nav-item, .is-ingeklapt .admin-nav-item { justify-content:center; padding:10px 0; }
@media (max-width:1024px) { .beheer-sidebar, .admin-sidebar { width:56px; } .beheer-nav-label, .admin-nav-label { display:none; } .beheer-nav-item, .admin-nav-item { justify-content:center; padding:10px 0; } .sidebar-toggle { display:none; } }

/* Mobiel planning aanpassingen */
@media (max-width: 768px) {
  .planning-toolbar { gap:8px; padding:8px 0 10px; }
  .planning-nav-btn { padding:6px 8px; }
  .gantt-naam-cel { width:64px; min-width:64px; font-size:10px; padding:4px 6px; }
  .gantt-uur-cel { width:36px; min-width:36px; height:48px; }
  .gantt-afspraak { font-size:9px; padding:1px 2px; }
  .planning-weergave-knoppen .planning-view-btn { padding:4px 8px; font-size:11px; }
  .gantt-outer { max-height:calc(100vh - 200px); }
}
@media (max-width: 480px) {
  .gantt-naam-cel { width:52px; min-width:52px; font-size:9px; }
  .gantt-uur-cel { width:28px; min-width:28px; }
}

/* ── PARKEERBORD (v43) ───────────────────────────── */
.parkeerbord-sectie { margin-top:32px; }
.parkeerbord-header { display:flex; align-items:center; gap:10px; padding:8px 0 10px; border-bottom:2px solid var(--border); margin-bottom:12px; }
.parkeerbord-header h3 { margin:0; font-size:15px; font-weight:800; color:var(--text); }
.parkeerbord-leeg { padding:20px; color:var(--muted); font-size:13px; text-align:center; }
.parkeerbord-tabel { width:100%; border-collapse:collapse; font-size:12px; }
.parkeerbord-tabel th { background:var(--primary-light); color:var(--primary-dark); font-weight:700; font-size:11px; padding:6px 8px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.parkeerbord-tabel td { padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
/* Hover-highlight alleen op de hoofd-data-rijen — niet op de uitgeklapte
   historie (read-only); die hover suggereerde onterecht klikbaarheid. */
.parkeerbord-tabel > tbody > tr:not(.pb-historie-rij):hover > td { background:var(--bg); }
/* Read-only historie: neutraliseer de globale `tr:hover td`-regel (regel ~883)
   die anders zwart-op-hover gaf in het uitklappaneel. Hogere specificiteit wint. */
.parkeerbord-tabel > tbody > tr.pb-historie-rij:hover > td { background:var(--surface-2); }
.pb-historie-tabel tr:hover td { background:transparent; }
/* Stoplicht badges */
.pb-stoplicht { width:14px; height:14px; border-radius:50%; display:inline-block; flex-shrink:0; }
.pb-stoplicht.rood   { background:#ef4444; box-shadow:0 0 4px rgba(239,68,68,.4); }
.pb-stoplicht.oranje { background:#f97316; box-shadow:0 0 4px rgba(249,115,22,.4); }
.pb-stoplicht.groen  { background:#22c55e; box-shadow:0 0 4px rgba(34,197,94,.4); }
/* Reden-badge */
.pb-reden-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:10px; font-size:10px; font-weight:700; white-space:nowrap; }
.pb-reden-badge.rood   { background:rgba(239,68,68,.12); color:var(--danger); }
.pb-reden-badge.oranje { background:rgba(249,115,22,.12); color:var(--warn-text); }
.pb-reden-badge.groen  { background:rgba(34,197,94,.12); color:var(--success-text); }
/* Wachttijd-kleur */
.pb-wacht-rood   { color:#ef4444; font-weight:700; }
.pb-wacht-oranje { color:#f97316; font-weight:600; }
.pb-wacht-normaal { color:var(--text); }
/* Parkeerbord actieknoppen */
.pb-acties { display:flex; gap:4px; align-items:center; }
/* Uitklapbare historierij */
.pb-historie-rij td { background:var(--surface-2); padding:12px 16px; }
.pb-historie-tabel { width:100%; border-collapse:collapse; font-size:11px; }
.pb-historie-tabel th { color:var(--muted); font-weight:600; padding:3px 6px; text-align:left; }
.pb-historie-tabel td { padding:4px 6px; border-bottom:1px solid var(--border); }
/* Drag-source stijlen */
.gantt-afspraak.dragging { opacity:0.5; cursor:grabbing; }
.gantt-uur-cel.drag-over { background:rgba(99,179,237,0.3) !important; outline:2px dashed #3b82f6; outline-offset:-2px; }
.gantt-openstaand-pill { display:inline-flex; align-items:center; background:var(--accent); color:#fff; border-radius:10px; padding:2px 8px; font-size:11px; font-weight:700; margin:2px 2px 2px 0; cursor:grab; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; user-select:none; }
.gantt-openstaand-pill:hover { opacity:0.85; }
.gantt-openstaand-pill.dragging { opacity:0.45; cursor:grabbing; }
.gantt-niet-ingepland-rij td { background:#fffdf0; }
.parkeerbord-sectie.pb-drop-actief { outline: 2px dashed #f97316; outline-offset: -2px; border-radius:6px; background:rgba(251,146,60,0.08); }
.gantt-skill-bevestig { position:absolute; inset:0; background:rgba(251,146,60,0.22); display:flex; align-items:center; justify-content:center; z-index:20; border:2px solid #f97316; border-radius:2px; }
.gantt-skill-bevestig-btn { background:#f97316; color:#fff; border:none; border-radius:6px; padding:4px 12px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.gantt-skill-bevestig-btn:hover { background:#ea580c; }
.parkeerbord-tabel tr.pb-dragging td { opacity:0.5; }
.parkeerbord-tabel tr.pb-drag-source td { background:rgba(251,191,36,.15); }
/* Parkeerbord drop-zone highlight */
.gantt-uur-cel.pb-drop-target { background:rgba(251,146,60,.25) !important; outline:2px dashed #f97316; outline-offset:-2px; }

/* ── v46: VERLOF + CAPACITEIT ────────────────────── */
#planning-verlof-knoppen { display:flex; }
.planning-verlof-btn { font-size:12px; font-weight:600; padding:0 10px; height:36px; min-height:36px; border-radius:6px; opacity:0.92; transition:opacity .15s,box-shadow .15s; }
.planning-verlof-btn:hover { opacity:1; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.planning-verlof-btn.verlof-actief { box-shadow:0 0 0 2px #fff, 0 0 0 4px currentColor; opacity:1; transform:translateY(-1px); }
/* v189.40: niet-gekozen knoppen vervagen zodat de actieve keuze eruit springt */
.planning-verlof-btn.verlof-inactief { opacity:0.4; box-shadow:none; }
.verlof-modus-actief td.gantt-uur-cel { cursor:crosshair !important; }
.verlof-modus-actief td.gantt-uur-cel:hover { background:rgba(99,179,237,0.18) !important; }
/* v189.40: opvallende rand rond het Gantt zolang de invoer-modus actief is */
#gantt-outer.verlof-modus-actief { box-shadow:0 0 0 2px var(--primary); border-radius:8px; }

/* v189.40: zwevende melding (snackbar) onderaan tijdens de verlof/ziek/vrije-invoer-modus */
.verlof-snackbar {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:4000;
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:var(--navy, #040A1B); color:#fff; border-radius:12px;
  box-shadow:0 6px 24px rgba(4,10,27,0.35); font-size:13px; font-weight:500;
  max-width:calc(100vw - 32px);
}
.verlof-snackbar > .material-symbols-rounded { font-size:20px; color:#9DBBE8; flex:0 0 auto; }
.verlof-snackbar-tekst { white-space:nowrap; }
.verlof-snackbar-annuleer {
  display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.4); background:transparent; color:#fff;
  font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; flex:0 0 auto;
}
.verlof-snackbar-annuleer:hover { background:rgba(255,255,255,0.14); }
.verlof-snackbar-annuleer .material-symbols-rounded { font-size:16px; }
@media (max-width:520px) { .verlof-snackbar-tekst { white-space:normal; } }
.gantt-verlof-blok {
  position:absolute;
  top:3px; bottom:3px;
  border-radius:5px;
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:2px 4px;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  display:flex; align-items:center; gap:3px;
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
  transition:opacity .15s;
  z-index:5;
}
.gantt-verlof-blok:hover { opacity:0.85; }
.gantt-verlof-blok .gv-icon { font-size:11px; flex-shrink:0; }
.gantt-cap-rij td { height:26px; }
.gantt-cap-pill { display:inline-flex; align-items:center; justify-content:center; border-radius:4px; padding:2px 6px; font-size:9px; font-weight:700; color:#fff; white-space:nowrap; width:100%; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; gap:4px; }
/* (was duplicaat; primaire definitie nu boven met text-transform:none) */
.form-label { text-transform: none; letter-spacing: 0; }

/* ── RUNNER VIEW ─────────────────────────────────── */
.runner-dag-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FEFEFE;
  background: var(--navy, #040A1B);
  border-radius: var(--radius);
  margin-bottom: 8px;
  margin-top: 16px;
}
.runner-sectie-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 6px;
}
.runner-sectie-label .material-symbols-rounded { font-size: 15px; }
.runner-kaart {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s;
}
.runner-kaart:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.runner-kaart-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.runner-kaart-icoon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.runner-kaart-icoon .material-symbols-rounded { font-size: 20px; }
.runner-kaart-kenteken {
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--text);
}
.runner-kaart-tijd {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.runner-kaart-adres {
  font-size: 12px;
  color: var(--muted);
  padding: 0 14px 10px 64px;
  margin-top: -4px;
}
/* Foto-galerij carousel — bij ≤4 vult grid de volle breedte, bij 5+ scrollen via pijltjes */
.fg-carousel-row {
  display: grid;
  /* auto-fill (niet auto-fit): lege kolommen blijven staan, zodat 1–3 foto's een
     nette thumbnail-breedte houden i.p.v. uit te rekken tot de volle modalbreedte. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 180px));
  gap: 10px;
  padding: 6px 2px;
}
.fg-carousel-row:has(> :nth-child(5)) {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.fg-carousel-row:has(> :nth-child(5)) > * {
  flex: 0 0 calc((100% - 30px) / 4);
  min-width: 140px;
  scroll-snap-align: start;
}
.fg-carousel-knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 5;
  color: var(--text);
  padding: 0;
}
.fg-carousel-knop:hover { background: var(--bg); }
.fg-carousel-prev { left: -12px; }
.fg-carousel-next { right: -12px; }

/* Nederlandse kentekenplaat — CSS-only visual */
.kenteken-plate {
  display: inline-flex;
  align-items: stretch;
  background: #F7C500;
  border: 1px solid #000;
  border-radius: 3px;
  overflow: hidden;
  height: 22px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
  font-family: Arial, Helvetica, sans-serif;
}
.kenteken-plate-eu {
  background: #003399;
  color: #F7C500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  min-width: 14px;
  line-height: 1;
}
.kenteken-plate-stars {
  width: 10px;
  height: 10px;
  margin-bottom: 1px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23F7C500'><circle cx='12' cy='4' r='1.4'/><circle cx='16' cy='5.07' r='1.4'/><circle cx='18.93' cy='8' r='1.4'/><circle cx='20' cy='12' r='1.4'/><circle cx='18.93' cy='16' r='1.4'/><circle cx='16' cy='18.93' r='1.4'/><circle cx='12' cy='20' r='1.4'/><circle cx='8' cy='18.93' r='1.4'/><circle cx='5.07' cy='16' r='1.4'/><circle cx='4' cy='12' r='1.4'/><circle cx='5.07' cy='8' r='1.4'/><circle cx='8' cy='5.07' r='1.4'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
  color: transparent;
}
.kenteken-plate-nl {
  font-size: 7px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}
.kenteken-plate-tekst {
  display: flex;
  align-items: center;
  padding: 0 7px;
  font-family: 'Kenteken', Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #1a1a1a;
}

/* ── v185: PLANNER-RAIL (push-style, links) ─────────────────────────────
   Inklapbare linker-sidebar in planning-tab voor planner-rollen.
   Material 3 navigation drawer + list-item richtlijnen toegepast (M3-pass).
   Behoud: navy header voor visuele consistentie met rechter icon-rail. */
.pr-rail {
  position: fixed;
  top: 108px;           /* onder app-header (64) + tab-bar (44) */
  left: 0;
  bottom: 0;
  width: 320px;         /* M3: 256–360, sweet-spot 320 */
  background: var(--white);
  border-right: 1px solid var(--border);
  /* M3: standard drawer = geen schaduw; push-style hoort plat tegen content */
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(.2,0,0,1);  /* M3 easing-emphasized */
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pr-rail.open { transform: translateX(0); }

body.pr-rail-open .page-desktop-only-content {
  padding-left: 320px;
}
.page-desktop-only-content { transition: padding-left 260ms cubic-bezier(.2,0,0,1); }

.pr-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--navy);   /* huisstijl-keuze: navy ipv M3 surface */
  color: #fff;
  flex-shrink: 0;
  min-height: 56px;
}
.pr-rail-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;           /* M3 Title Small */
  font-weight: 600;
  letter-spacing: 0.1px;
  color: #A5BECF;            /* matcht zachte header-tekst van berichten-paneel */
}
.pr-rail-titel .material-symbols-rounded { font-size: 20px; color: #A5BECF; }
.pr-rail-badge {
  background: rgba(255,255,255,0.18);
  color: #A5BECF;
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
  min-width: 22px;
  text-align: center;
}
.pr-rail-sluit {
  background: transparent;
  border: none;
  color: #A5BECF;
  width: 40px; height: 40px;  /* M3 touch-target */
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms;
  margin-right: -8px;
}
.pr-rail-sluit:hover { background: rgba(255,255,255,0.12); }
.pr-rail-sluit .material-symbols-rounded { font-size: 24px; }

/* Search bar — pill-shape met enkele border. Berichten-patroon: één rand, subtiele bg-shift op focus. */
.pr-rail-zoek {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--bg);
  flex-shrink: 0;
  height: 40px;
  transition: border-color 120ms, background 120ms;
}
.pr-rail-zoek:focus-within {
  border-color: var(--primary);
  background: rgba(102,139,196,0.06);
}
.pr-rail-zoek .material-symbols-rounded { font-size: 18px; color: var(--muted); }
.pr-rail-zoek input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-size: 14px; color: var(--text);
  font-family: var(--font);
  padding: 0;
}
.pr-rail-zoek input::placeholder { color: var(--muted); }
.pr-rail-zoek input:focus { outline: 0; box-shadow: none; }
.pr-rail-zoek input::placeholder { color: var(--muted); }
.pr-rail-zoek-wis {
  background: transparent; border: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.pr-rail-zoek-wis:hover { background: rgba(0,0,0,0.06); }
.pr-rail-zoek-wis .material-symbols-rounded { font-size: 16px; }

.pr-rail-body {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin;
  padding-top: 4px;
}
.pr-rail-leeg {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* ── Status-secties (M3 list sub-header) ─────────────────────── */
.pr-status-sectie { /* geen extra border — M3 gebruikt inset dividers per item */ }
.pr-status-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  min-height: 48px;             /* M3 sub-header */
  background: transparent;
  font-size: 14px;              /* M3 Title Small */
  font-weight: 700;             /* matcht active tab-label */
  letter-spacing: 0.1px;
  text-transform: none;         /* M3: geen ALLCAPS */
  color: var(--icoon);          /* zelfde tint als de Material-iconen */
  cursor: pointer;
  user-select: none;
  width: 100%;
  border: none;
  text-align: left;
}
.pr-status-kop:hover { background: rgba(102,139,196,0.08); }  /* 8% primary tint */

/* Chevron — links, klein. Default '>' (dicht), roteert naar '⌄' bij open. */
.pr-status-chevron {
  font-size: 16px !important;
  color: var(--muted);
  transition: transform 160ms cubic-bezier(.2,0,0,1);
  flex-shrink: 0;
}
.pr-status-sectie:not(.dicht) .pr-status-chevron { transform: rotate(90deg); }

/* Status-icoon — leading anchor (admin-sidebar pattern) */
.pr-status-kop-icoon {
  font-size: 20px !important;
  color: var(--icoon);
  flex-shrink: 0;
}

/* Label — iets lichter dan 700, voelt zachter */
.pr-status-kop-label {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Telling — subtieler: geen achtergrond-pill, alleen gemute tekst */
.pr-status-kop-aantal {
  background: transparent;
  color: var(--telling);       /* magenta accent — trekt blik */
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
  min-width: 18px;
  text-align: right;
}
/* Drop-target: lichte groene gloed + zachte ring rondom — duidelijk "hier kun je droppen". */
.pr-status-sectie.drop-actief {
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(22,163,74,0.55), 0 0 16px rgba(22,163,74,0.35);
  background: rgba(22,163,74,0.08);
  transition: box-shadow 0.15s, background 0.15s;
}
.pr-status-sectie.drop-actief .pr-status-kop {
  background: rgba(22,163,74,0.18);
}
.pr-status-sectie.drop-actief .pr-status-lijst {
  background: rgba(22,163,74,0.10);
}
.pr-status-lijst { display: flex; flex-direction: column; }
.pr-status-sectie.dicht .pr-status-lijst { display: none; }

/* ── Item-rij (M3 two-line list item, 72dp) ─────────────────── */
.pr-item {
  background: transparent;
  cursor: grab;
  transition: background 120ms;
  position: relative;
}
/* M3: inset divider — start na leading-element (16+40+16 ≈ 72px) */
.pr-item + .pr-item::before {
  content: '';
  position: absolute;
  top: 0; left: 72px; right: 0;
  height: 1px;
  background: var(--border);
  opacity: 0.5;
}
.pr-item:hover { background: rgba(102,139,196,0.08); }     /* 8% primary tint */
.pr-item.dragging {
  opacity: 0.4;
  background: rgba(102,139,196,0.12);
}
.pr-item-kop {
  display: flex;
  align-items: center;
  gap: 12px;                   /* M3: 16dp tussen leading en text; iets krapper want tekst is weg */
  padding: 8px 16px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  min-height: 56px;            /* M3 one-line list item (tekst is hover-only) */
}
.pr-item-kop .kenteken-plate { flex-shrink: 0; }

/* v185-hotfix: hover-tooltip verwijderd. Hover-zone blijft als grow-flex voor de layout. */
.pr-item-hover-zone {
  flex: 1; min-width: 0;
  align-self: stretch;
}

/* v185.3: bulk-selectie checkboxes (alleen op werkopdracht-items) */
.pr-item-check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  cursor: pointer;
  margin: 0 2px 0 0;
  accent-color: var(--primary);
}

.pr-item.pr-item-checked {
  background: rgba(102,139,196,0.14);   /* M3 secondary-container — zelfde tint als context-bar */
}

/* v185.3: M3 Contextual app bar — vervangt rail-header tijdens selectie.
   Zelfde surface als de rest van de rail (lichte achtergrond), niet zwevend. */
.pr-rail-context-bar {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(102,139,196,0.12);   /* M3 secondary-container tint */
  border-bottom: 1px solid var(--border);
  min-height: 56px;
  flex-shrink: 0;
}
.pr-rail.pr-bulk-actief .pr-rail-header { display: none; }
.pr-rail.pr-bulk-actief .pr-rail-context-bar { display: flex; }

.pr-ctx-sluit, .pr-ctx-actie {
  background: transparent;
  border: 0;
  width: 36px; height: 36px;       /* compact om met label + alles-knop te passen */
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icoon);
  transition: background 120ms;
  flex-shrink: 0;
}
.pr-ctx-sluit:hover, .pr-ctx-actie:hover {
  background: rgba(102,139,196,0.18);
}
.pr-ctx-sluit .material-symbols-rounded, .pr-ctx-actie .material-symbols-rounded {
  font-size: 22px;
}

.pr-ctx-aantal {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--icoon);
  letter-spacing: 0.1px;
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* "Alles"-knop in context-bar — M3 tekst-knop met pill-shape */
.pr-ctx-alles {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(102,139,196,0.45);
  color: var(--primary-dark);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  margin-right: 2px;
  white-space: nowrap;
}
.pr-ctx-alles:hover {
  background: rgba(102,139,196,0.12);
  border-color: var(--primary-dark);
}

.pr-ctx-actie-accept { color: var(--success-text); }
.pr-ctx-actie-accept:hover { background: rgba(145,164,113,0.18); }

.pr-ctx-actie-weiger { color: var(--danger); }
.pr-ctx-actie-weiger:hover { background: rgba(217,45,32,0.12); }

/* Bulk-weiger-paneel — schuift in van bovenaf, onder context-bar */
.pr-rail-weiger-paneel {
  display: none;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pr-rail.pr-weiger-actief .pr-rail-weiger-paneel { display: block; }
.pr-weiger-label {
  display: block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 6px;
}
.pr-weiger-tekst {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 13px;
  outline: 0;
  resize: vertical;
  min-height: 56px;
}
.pr-weiger-tekst:focus {
  border-color: var(--danger);
  background: rgba(217,45,32,0.04);
}
.pr-weiger-acties {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 8px;
}
.pr-weiger-annuleer, .pr-weiger-bevestig {
  border: 0;
  border-radius: 20px;        /* M3 pill button */
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 120ms;
}
.pr-weiger-annuleer { background: transparent; color: var(--muted); }
.pr-weiger-annuleer:hover { background: rgba(0,0,0,0.06); }
.pr-weiger-bevestig { background: var(--danger); color: #fff; }
.pr-weiger-bevestig:hover { filter: brightness(1.1); }
.pr-weiger-bevestig .material-symbols-rounded { font-size: 16px; }

/* v185.3: "Nieuw"-badge — verschijnt bij werkopdracht-items die nog niet zijn aangeklikt */
.pr-nieuw-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--telling);
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}

/* Dagen-in-status chip */
.pr-dagen-chip {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.2px;
  background: rgba(102,139,196,0.15);
  color: var(--primary-dark);
}
.pr-dagen-chip.pr-dagen-oranje {
  background: rgba(245,158,11,0.18);
  color: #B45309;
}
.pr-dagen-chip.pr-dagen-rood {
  background: rgba(217,45,32,0.15);
  color: var(--danger);
}
/* v189.36: bijlagen-rij in detail krijgt een lichtblauwe accent-balk (volledige breedte, geen ronding) */
.pr-item-detail-rij-bijlage {
  background: rgba(102,139,196,0.10);
  border-radius: 0;
  padding: 8px 14px;
  margin: 4px -14px;
}
.pr-item-detail-rij-bijlage .material-symbols-rounded { color: var(--primary); }
.pr-item-chevron {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 160ms cubic-bezier(.2,0,0,1);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.pr-item.open .pr-item-chevron { transform: rotate(180deg); }
.pr-item-chevron .material-symbols-rounded { font-size: 24px; }

.pr-item-detail {
  display: none;
  padding: 4px 16px 14px 16px;  /* v185-hotfix: vol gebruik van rail-breedte */
  background: transparent;
  font-size: 12px;
  color: var(--text);
}
.pr-item.open .pr-item-detail { display: block; }
.pr-item-detail-rij {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  align-items: flex-start;
  line-height: 1.4;
}
.pr-item-detail-rij .material-symbols-rounded {
  font-size: 16px;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 1px;
}
.pr-item-detail-rij strong {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: none;        /* M3: geen ALLCAPS */
  letter-spacing: 0.1px;
  margin-right: 4px;
}
.pr-item-detail-leeg {
  font-style: italic;
  color: var(--muted);
  font-size: 11px;
  padding: 2px 0;
}

/* v185-hotfix: verplaats-knop in item-rij — alternatief voor drag-and-drop */
.pr-item-verplaats {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms, color 120ms;
}
.pr-item-verplaats:hover {
  background: rgba(102,139,196,0.18);
  color: var(--primary-dark);
}
.pr-item-verplaats .material-symbols-rounded { font-size: 20px; }

/* Floating status-menu (singleton op <body>) */
#pr-status-menu {
  position: fixed;
  background: var(--white);
  border: 0;                              /* v185.2: geen rand — consequent met andere floating popovers */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(4,10,27,0.18);
  padding: 6px;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 120ms, transform 120ms, visibility 120ms;
  z-index: 9999;
}
#pr-status-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#pr-status-menu .pr-menu-kop {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  padding: 8px 12px 6px;
}
#pr-status-menu .pr-menu-optie {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  font-family: var(--font);
  transition: background 100ms;
}
#pr-status-menu .pr-menu-optie:hover {
  background: rgba(102,139,196,0.12);
  color: var(--primary-dark);
}
#pr-status-menu .pr-menu-optie .material-symbols-rounded {
  font-size: 20px;
  color: var(--muted);
}
#pr-status-menu .pr-menu-optie:hover .material-symbols-rounded {
  color: var(--primary-dark);
}

/* Divider tussen secties in het menu */
#pr-status-menu .pr-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
  opacity: 0.5;
}

/* Sublabel ("Of verplaats naar…") */
#pr-status-menu .pr-menu-sublabel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  padding: 4px 12px 6px;
}

/* Groene accent voor Accepteren */
#pr-status-menu .pr-menu-optie.pr-menu-accept {
  color: var(--success-text);
  font-weight: 600;
}
#pr-status-menu .pr-menu-optie.pr-menu-accept .material-symbols-rounded {
  color: var(--success-text);
}
#pr-status-menu .pr-menu-optie.pr-menu-accept:hover {
  background: rgba(145,164,113,0.15);
  color: var(--success-text);
}
#pr-status-menu .pr-menu-optie.pr-menu-accept:hover .material-symbols-rounded {
  color: var(--success-text);
}

/* Rode accent voor Weigeren */
#pr-status-menu .pr-menu-optie.pr-menu-weiger {
  color: var(--danger);
  font-weight: 600;
}
#pr-status-menu .pr-menu-optie.pr-menu-weiger .material-symbols-rounded {
  color: var(--danger);
}
#pr-status-menu .pr-menu-optie.pr-menu-weiger:hover {
  background: rgba(217,45,32,0.12);
  color: var(--danger);
}
#pr-status-menu .pr-menu-optie.pr-menu-weiger:hover .material-symbols-rounded {
  color: var(--danger);
}

/* Inline weiger-paneel — verschijnt na klik op Weigeren */
.pr-menu-weiger-paneel {
  display: none;
  padding: 10px 12px 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.pr-menu-weiger-paneel.open {
  display: block;
}
#pr-status-menu.weiger-modus .pr-menu-optie:not(.pr-menu-weiger),
#pr-status-menu.weiger-modus .pr-menu-divider,
#pr-status-menu.weiger-modus .pr-menu-sublabel,
#pr-status-menu.weiger-modus .pr-menu-kop {
  display: none;
}
.pr-menu-weiger-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 6px;
}
.pr-menu-weiger-tekst {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  min-height: 60px;
  outline: 0;
  background: var(--bg);
}
.pr-menu-weiger-tekst:focus {
  border-color: var(--danger);
  background: rgba(217,45,32,0.04);
}
.pr-menu-weiger-acties {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.pr-menu-weiger-annuleer,
.pr-menu-weiger-bevestig {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 120ms;
}
.pr-menu-weiger-annuleer {
  background: transparent;
  color: var(--muted);
}
.pr-menu-weiger-annuleer:hover {
  background: rgba(0,0,0,0.06);
}
.pr-menu-weiger-bevestig {
  background: var(--danger);
  color: #fff;
}
.pr-menu-weiger-bevestig:hover {
  background: #B22518;
}

/* Klant-blok in runner-kaart (open, geen omkadering) */
.runner-klantblok {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 4px 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 4px;
}
.runner-klantblok:active { background: var(--bg); }
.runner-klantblok-pin {
  color: var(--danger);
  font-size: 28px;
  flex-shrink: 0;
  /* Punt van de pin uitlijnen met onderkant van klantnaam-regel */
  margin-top: -6px;
}
.runner-klantblok-tekst { flex: 1; min-width: 0; line-height: 1.4; }
/* Veld-label boven elke waarde in het runner-bestemmingsblok (M3 supporting-text) */
.runner-veld-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 1px;
}
.runner-klantblok-naam {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 8px;
}
.runner-klantblok-adres {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}
.runner-klantblok-contact {
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
  margin-bottom: 8px;
}
.runner-klantblok-tel {
  font-size: 13px;
  margin-top: 2px;
}
.runner-klantblok-tel a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
}
/* v189.31: alle klikbare regels in het bestemmingsblok krijgen dezelfde stijl (adres + tel + e-mail) */
.runner-klantblok a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
}
.runner-kaart-detail {
  display: none;
  padding: 0 14px 14px 14px;
  border-top: 1px solid var(--border);
}
.runner-kaart.open .runner-kaart-detail { display: block; }
.runner-detail-rij {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text);
}
.runner-detail-rij .material-symbols-rounded {
  font-size: 16px;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 1px;
}
.runner-detail-rij a { color: var(--primary); text-decoration: none; }
.runner-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.runner-acties {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.runner-acties button {
  flex: 1;
  min-width: 100px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, transform .08s;
}
.runner-acties button:active { transform: scale(.97); }
.runner-btn-bevestig {
  background: var(--primary);
  color: #fff;
}
.runner-btn-bevestig.oranje {
  background: #F59E0B;
  color: #fff;
}
.runner-btn-bevestig.groen {
  background: #22C55E;
  color: #fff;
}
.runner-btn-bevestig:disabled {
  background: color-mix(in srgb, var(--success) 20%, transparent);
  color: var(--muted);
  cursor: default;
}
.runner-btn-bericht {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border) !important;
}
.runner-btn-foto {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border) !important;
}
.runner-bericht-inline {
  display: none;
  margin-top: 10px;
  background: var(--surface);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid var(--border);
}
.runner-bericht-inline.open { display: block; }
.runner-bericht-inline textarea {
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  background: var(--card-bg);
  color: var(--text);
}
.runner-bericht-ontvanger {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.runner-bericht-ontvanger button {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  transition: background .1s;
}
.runner-bericht-ontvanger button.actief {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.runner-foto-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.runner-foto-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.runner-leeg {
  text-align: center;
  color: var(--muted);
  padding: 48px 0;
  font-size: 14px;
}
@media (max-width: 768px) {
  .runner-kaart-header { padding: 10px 12px; }
  .runner-kaart-adres  { padding: 0 12px 8px 54px; }
  .runner-kaart-detail { padding: 0 12px 12px 12px; }
}

/* ── v68: DEV MODE BALK ──────────────────────────── */
.dev-bar { font-family: monospace; font-size: 11px; background: #92400e; color: #fef3c7; position: relative; z-index: 100; }
.dev-bar-strip { display: flex; align-items: center; justify-content: space-between; padding: 4px 14px; cursor: pointer; user-select: none; background: #b45309; min-height: 26px; }
.dev-bar-strip:hover { background: #92400e; }
.dev-bar-label { display: flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: 0.05em; font-size: 11px; }
.dev-bar-chevron { font-size: 9px; opacity: 0.7; }
.dev-bar-panel { padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; background: #78350f; border-bottom: 2px solid #451a03; }
.dev-bar-rij { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dev-bar-groep-label { font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; min-width: 28px; }
.dev-bar-knop { font-family: monospace; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(254,243,199,0.3); background: rgba(254,243,199,0.08); color: #fef3c7; cursor: pointer; transition: background 0.1s; white-space: nowrap; }
.dev-bar-knop:hover { background: rgba(254,243,199,0.2); }
.dev-bar-knop.actief { background: #fef3c7; color: #78350f; border-color: #fef3c7; }
.dev-bar-reset { border-color: rgba(252,165,165,0.5); color: #fca5a5; }
.dev-bar-reset:hover { background: rgba(252,165,165,0.15); }

/* Admin: dev toggle */
.dev-toggle-wrap { width: 42px; height: 24px; border-radius: 12px; background: var(--border); position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.dev-toggle-wrap.actief { background: #b45309; }
.dev-toggle-knop { width: 18px; height: 18px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.dev-toggle-wrap.actief .dev-toggle-knop { left: 21px; }

/* ── TOUCH: hover-effecten uitschakelen op touch-apparaten ── */
@media (hover: none) {
  tr:hover td { background: transparent !important; }
  .pk-sub-tabel tr:hover td { background: transparent !important; }
  .facet-tabel tbody tr:hover td { background: transparent !important; }
  .facet-tabel tbody tr.row-afgehandeld:hover td { opacity: 0.65 !important; background: transparent !important; }
  .model-tabel-rij:hover td { background: transparent !important; }
  .actie-kaart:hover { box-shadow: none !important; transform: none !important; }
  .wp-kaart:hover { box-shadow: none !important; transform: none !important; }
}