:root {
  --bg-page: #f5f6f8;
  --bg-surface: #ffffff;
  --bg-surface-2: #eef0f4;
  --bg-hover: #e4e7ec;
  --text-primary: #0f1419;
  --text-secondary: #3d4655;
  --text-muted: #6b7380;
  --text-inverse: #ffffff;
  --border-subtle: #e5e7eb;
  --border-default: #d1d5db;
  --border-strong: #9ca3af;
  --accent: #ff6b00;
  --accent-hover: #e35e00;
  --accent-text: #ffffff;
  --accent-zacht: #fff2e8;
  /* Tweede accent: het indigo dat al in de boekflow, diensten en afrekening zit. */
  --indigo: #4f46e5;
  --indigo-zacht: rgba(79, 70, 229, 0.10);
  --indigo-rand: rgba(79, 70, 229, 0.24);
  --indigo-vlak: #eef0ff;
  /* Tekst óp een gevuld indigo vlak. In het donkere thema is --indigo juist
     licht, dus daar keert de inkt om. */
  --indigo-tekst: #ffffff;
  /* De twee stops van een indigo verloop (licht boven, donker onder). */
  --indigo-licht: #6366f1;
  --indigo-donker: #4338ca;
  /* Teal en amber: al in gebruik voor "nieuw" en de hoogseizoen-tint. */
  --teal: #0d9488;
  --teal-zacht: #e6f6f4;
  --amber-ink: #b45309;
  --amber-zacht: #fef3c7;
  /* Rood voor "moet nog gebeuren": donker genoeg voor tekst op het lichte vlak. */
  --rood-ink: #b91c1c;
  --rood-zacht: #fee2e2;
  --rood-hover: #991b1b;
  --rood-tekst: #ffffff;
  /* Een rode kaart heeft een eigen rand en hover nodig: --border-subtle valt
     weg tegen --rood-zacht, en --bg-hover haalt het rood er juist af. */
  --rood-rand: rgba(185, 28, 28, 0.35);
  --rood-hoverbg: #fdd9d9;
  /* De wordmark: navy op licht, cream op donker, met een goud kleinkapitaal
     eronder. Dezelfde twee kleuren als op de beslis-kaart. */
  --merk-ink: #152242;
  --merk-tag: #8a763f;
  --success: #15803d;
  /* Tekst óp een gevuld groen vlak; ook deze keert om in het donkere thema. */
  --success-tekst: #ffffff;
  --danger: #b91c1c;
  --warning: #b45309;
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.06), 0 1px 3px rgba(15, 20, 25, 0.05);
  --shadow-md: 0 4px 6px rgba(15, 20, 25, 0.07), 0 10px 15px rgba(15, 20, 25, 0.08);
  --focus-ring: 0 0 0 3px rgba(255, 107, 0, 0.35);
  --font-sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
  color: var(--text-primary);
  background: var(--bg-page);
  font-family: var(--font-sans);
}

html[data-theme='dark'] {
  --bg-page: #0f1419;
  --bg-surface: #161b22;
  --bg-surface-2: #1c222b;
  --bg-hover: #242c37;
  --text-primary: #f4f1ea;
  --text-secondary: #c8ccd4;
  --text-muted: #8b919a;
  --text-inverse: #0f1419;
  --border-subtle: #1f262f;
  --border-default: #2e353f;
  --border-strong: #4a5260;
  --accent: #ff8533;
  --accent-hover: #ff9a52;
  --accent-text: #0f1419;
  --accent-zacht: #33210f;
  --indigo: #818cf8;
  --indigo-zacht: rgba(129, 140, 248, 0.14);
  --indigo-rand: rgba(129, 140, 248, 0.30);
  --indigo-vlak: #1c2140;
  --indigo-tekst: #12163a;
  /* Donker thema: het verloop blijft binnen de lichte indigo-familie, anders
     valt de donkere inkt onderaan de knop weg. */
  --indigo-licht: #8f99fa;
  --indigo-donker: #6f79ee;
  --teal: #2dd4bf;
  --teal-zacht: #0f2b29;
  --amber-ink: #fcd34d;
  --amber-zacht: #3a2f12;
  /* Donker thema: lichte rode tekst op een diep rood vlak, zelfde contrast. */
  --rood-ink: #fca5a5;
  --rood-zacht: #3b1618;
  --rood-hover: #ef4444;
  --rood-tekst: #0f1419;
  --rood-rand: rgba(252, 165, 165, 0.35);
  --rood-hoverbg: #4a1c1e;
  --merk-ink: #f6efe1;
  --merk-tag: #d8b25e;
  --success: #4ade80;
  --success-tekst: #04210f;
  --danger: #f87171;
  --warning: #fbbf24;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.55), 0 10px 15px rgba(0, 0, 0, 0.45);
  --focus-ring: 0 0 0 3px rgba(255, 133, 51, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

body, html { height: 100%; }
a { color: inherit; }

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 0.9rem;
  border: 1px solid var(--border-subtle);
}

.status-pill::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--success);
}

.main-content {
  flex: 1;
  padding: 2rem 1.4rem 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* De omhulling om de flash-meldingen en de pagina-inhoud. .main-content
   hierboven is een flex-row die zijn ene kind centreert; zonder deze truc
   komt een melding er NAAST te staan in plaats van erboven.
   display:contents laat de omhulling verdwijnen zolang er niets te melden
   valt, zodat elk scherm zonder melding precies blijft zoals het was. */
.melding-stapel { display: contents; }
.melding-stapel.heeft-melding {
  display: flex;
  flex-direction: column;
  /* Neemt de plek van .page over: bovenaan, niet verticaal gecentreerd.
     Zonder dit erft de omhulling align-items:center van .main-content en zakt
     de pagina naar het midden -- gemeten op een scherm van 1200px hoog: 32px
     van boven zonder melding, 323px met. */
  align-self: flex-start;
  /* En centreert zijn eigen kinderen, zodat .page staat waar hij anders stond. */
  align-items: center;
  /* GEEN vaste 1100px: .page bepaalt zijn eigen breedte, en .page-breed
     houdt daarmee zijn 1240 (de opdrachtentabel telt negen kolommen en past
     niet in 1100). Gemeten: met een vaste 1100 kromp die pagina zodra er een
     melding stond. */
  width: 100%;
}
.melding-stapel.heeft-melding > .alert { width: min(100%, 1100px); }
/* .page draagt align-self:flex-start voor de RIJ hierboven; in deze KOLOM zou
   datzelfde hem naar links duwen (gemeten: 28px). Binnen de omhulling dus
   centreren. */
.melding-stapel.heeft-melding > .page { align-self: center; }

.card {
  width: min(100%, 480px);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
}

.card h1 {
  margin: 0 0 0.4rem;
  font-size: 1.65rem;
}

.card p {
  margin: 0 0 1rem;
  color: var(--text-secondary);
}

/* --- Alleen de inlogschermen: de foto eronder ---------------------------
   De klasse staat op <body> en wordt door auth_layout.html gezet, dus dit
   raakt uitsluitend /login en /beheer. De rest van de app houdt --bg-page.

   Het beeld hangt aan de BODY en niet aan een vaste laag: zo groeit hij mee
   als de kaart bij een foutmelding of op een smal scherm hoger wordt, en
   blijft cover doen wat het moet doen zonder background-attachment: fixed —
   dat schokt op telefoons. */
.auth-scherm {
  min-height: 100vh;
  background-image: url("login-achtergrond.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* De app-schil draagt normaal de paginakleur; die zou de foto afdekken. */
.auth-scherm .app-shell { background: transparent; position: relative; z-index: 1; }

/* Donkerder naar de randen, lichter in het midden: geeft diepte en houdt de
   kaart leesbaar, ongeacht welke foto eronder ligt. Vast aan het venster, dus
   de randen blijven donker ook als je scrolt. */
.auth-scherm::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 38%,
              rgba(10, 12, 20, .12), rgba(10, 12, 20, .5) 100%);
}

/* De voettekst staat nu op de foto en niet meer op een rustig vlak. */
.auth-scherm .footer { color: rgba(255, 255, 255, .72); }

/* De kaart drijft er ongewijzigd op, met een diepere schaduw omdat hij nu
   los boven een beeld hangt in plaats van op een effen achtergrond. */
.auth-scherm .auth-card {
  position: relative;
  z-index: 2;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
}

/* De login als split-paneel: links wie wij zijn, rechts waar je inlogt.
   Breder dan een gewone .card en zonder eigen padding — de twee helften
   dragen hun eigen ruimte, en overflow: hidden houdt het donkere paneel
   binnen de afgeronde hoek. */
.auth-card {
  width: min(100%, 860px);
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* Dit paneel blijft donker in BEIDE thema's. Het is geen kaartvlak maar een
   merkvlak: de gloed en het witte chipje hebben een donkere ondergrond nodig
   om te doen wat ze doen, en in het lichte thema zou het anders een grijze
   vlek worden. Daarom staan de tekstkleuren hier vast en niet op tokens. */
.auth-merk {
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .85rem;
  color: #f2f3f8;
  background:
    radial-gradient(500px 300px at 20% 10%, rgba(255, 122, 26, .28), transparent 60%),
    radial-gradient(420px 300px at 100% 100%, rgba(79, 70, 229, .24), transparent 55%),
    #12131b;
}

.auth-embleem {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.auth-embleem img { width: 70px; height: 70px; object-fit: cover; display: block; }

.auth-merk-naam { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }

.auth-merk-tag {
  font-size: .88rem;
  line-height: 1.5;
  max-width: 26ch;
  color: rgba(255, 255, 255, .62);
}

.auth-form-kant {
  padding: 2.1rem 1.9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-surface);
}

.auth-form-kant h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.auth-form-kant > p { margin: 0 0 1.15rem; color: var(--text-secondary); font-size: .92rem; }

/* Alleen binnen dit paneel, zodat de formulieren elders hun eigen maat
   houden. De markup in de login-templates blijft zoals hij is. */
.auth-form-kant input[type="email"],
.auth-form-kant input[type="password"] {
  border-radius: 11px;
  padding: .82rem .95rem;
}

.auth-form-kant input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

.auth-form-kant .btn-primary {
  border: none;
  border-radius: 11px;
  padding: .88rem;
  font-size: 1rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), #ff9142);
  box-shadow: 0 12px 26px rgba(255, 107, 0, .28);
}

.auth-form-kant .btn-primary:hover { filter: brightness(1.06); }

/* Op een telefoon past er geen tweede kolom naast: dan het merkvlak boven
   het formulier, en compacter — je komt hier om in te loggen. */
@media (max-width: 720px) {
  .auth-card { grid-template-columns: 1fr; }

  .auth-merk {
    padding: 1.5rem 1.4rem;
    gap: .5rem;
  }

  .auth-embleem { width: 56px; height: 56px; border-radius: 13px; }
  .auth-embleem img { width: 50px; height: 50px; }
  .auth-merk-naam { font-size: 1.25rem; }
  .auth-merk-tag { font-size: .82rem; max-width: none; }
  .auth-form-kant { padding: 1.6rem 1.35rem; }
}

.auth-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border-subtle);
}

.tab.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

form {
  display: grid;
  gap: 0.9rem;
}

input {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

.btn {
  border: 0;
  border-radius: 0.8rem;
  padding: 0.85rem 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}

/* Rood, voor de knop die een openstaande taak oppakt: die moet opvallen en
   niet verdrinken in het oranje van de huisstijl. */
.btn-rood {
  background: var(--rood-ink);
  color: var(--rood-tekst);
}

.btn-rood:hover {
  background: var(--rood-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.alert {
  padding: 0.8rem 0.95rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
}

.alert-danger {
  color: var(--danger);
  border-color: rgba(185, 28, 28, 0.25);
  background: rgba(185, 28, 28, 0.08);
}

.alert-succes {
  color: var(--success);
  border-color: rgba(21, 128, 61, 0.25);
  background: rgba(21, 128, 61, 0.08);
}

html[data-theme='dark'] .alert-succes {
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.12);
}

/* --- De zwevende melding na de App-knop ---------------------------------
   Rechtsboven en position: fixed, zodat de scrollpositie er niet toe doet:
   de knop staat onder in een lange order, en een balk bovenaan had je al
   weggescrold voor je hem zocht. Een verstuurd appje is niet terug te halen,
   dus dit is precies de melding die niet mag ontsnappen. */
/* Nét onder de kopbalk en niet op 20px zoals de mock: daar zitten Uitloggen
   en de thema-knop, en een foutmelding blijft staan tot je hem wegklikt —
   die mag die twee niet afdekken. Zodra je scrolt is de kopbalk toch weg en
   zweeft de toast gewoon over de order. */
.toast {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 50;
  width: 330px;
  max-width: calc(100vw - 40px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 15px;
  border-radius: 13px;
  border: 1px solid var(--toast-rand);
  border-left: 5px solid var(--toast-kleur);
  background: color-mix(in oklab, var(--bg-surface) 88%, var(--toast-kleur));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .16);
  animation: toast-erin .28s ease both;
}

html[data-theme='dark'] .toast {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .35);
}

/* Groen bij verstuurd, rood bij een reden waarom het niet ging, en gedempt
   bij een proefrun: daar is niets aangekomen, dus groen zou liegen. */
.toast-go   { --toast-kleur: var(--success); --toast-rand: color-mix(in oklab, var(--success) 45%, transparent); }
.toast-stop { --toast-kleur: var(--danger);  --toast-rand: color-mix(in oklab, var(--danger) 45%, transparent); }
.toast-zacht {
  --toast-kleur: var(--text-secondary);
  --toast-rand: var(--border-subtle);
}

.toast-cirkel {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--toast-kleur);
  color: var(--bg-surface);
}

.toast-cirkel svg { width: 18px; height: 18px; }

.toast-tekst { flex: 1; min-width: 0; }

.toast-kop {
  display: block;
  font-weight: 800;
  font-size: .95rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.toast-onder {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.toast-sluit {
  flex: 0 0 auto;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.toast-sluit:hover { color: var(--text-primary); }

/* Alleen de goede afloop valt vanzelf weg — een fout draagt de REDEN en moet
   blijven staan tot je hem wegklikt. visibility mee in de eindstand, anders
   blijft een onzichtbare toast de klikken boven de order opvangen. */
.toast-vervaagt { animation: toast-erin .28s ease both, toast-weg .45s ease 4s forwards; }

@keyframes toast-erin {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes toast-weg {
  to { opacity: 0; transform: translateY(-10px); visibility: hidden; }
}

/* Wie beweging heeft uitgezet krijgt geen schuif en geen zelf-verdwijnende
   melding: dan blijft hij staan tot het kruisje. */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast-vervaagt { animation: none; }
}

/* Op een smal scherm vouwt de kopbalk naar meer regels, dus moet de toast
   verder omlaag; over de volle breedte, want 330px past er niet meer naast. */
@media (max-width: 560px) {
  .toast { top: 118px; right: 12px; left: 12px; width: auto; }
}

.dashboard-grid {
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  padding: 1.2rem;
  box-shadow: var(--shadow-sm);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tile h2 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.tile p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.footer {
  padding: 1rem 1.4rem 1.4rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Header: één vormtaal */
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  color: var(--text-primary); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em;
  border-radius: .5rem; transition: color .15s ease; }
.brand:hover { color: var(--accent); }
/* Het merkchipje draagt het embleem, niet meer de letters BB. Wit in BEIDE
   thema's: het bestand heeft zelf een lichte achtergrond, dus zonder dat
   witte vlak zou het in het donker als los vlekje in de balk hangen. De
   schaduw houdt het chipje ook op een licht vlak van de balk gescheiden. */
.brand-logo { width: 38px; height: 38px; border-radius: 10px; background: #fff;
  display: inline-grid; place-items: center; flex: 0 0 38px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.brand-logo img { width: 34px; height: 34px; object-fit: cover; display: block; }

.header-status { display: inline-flex; align-items: center; gap: .45rem;
  color: var(--text-muted); font-size: .92rem; }
.header-status .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--success); }

.user-meta { display: inline-flex; align-items: baseline; gap: .4rem; background: none;
  border: 0; padding: 0; color: var(--text-secondary); font-size: .95rem; }
.greeting { font-weight: 700; color: var(--text-primary); }
.user-sep { color: var(--border-strong); }
.user-role { color: var(--text-muted); font-size: .9rem; }

.header-nav { display: inline-flex; align-items: center; gap: .5rem; padding-left: .7rem;
  margin-left: .2rem; border-left: 1px solid var(--border-subtle); }

.header-actions { display: inline-flex; align-items: center; gap: .5rem; padding-left: .7rem;
  margin-left: .2rem; border-left: 1px solid var(--border-subtle); }
.btn-ghost { height: 40px; display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; padding: 0 .9rem; border-radius: .7rem; border: 1px solid var(--border-default);
  background: var(--bg-surface-2); color: var(--text-primary); font-weight: 600; font-size: .95rem;
  font-family: inherit; text-decoration: none; cursor: pointer; transition: background .15s ease; }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-icon { width: 40px; padding: 0; color: var(--text-secondary); }
.btn-ghost svg { width: 18px; height: 18px; }

html[data-theme='light'] .icon-moon { display: none; }
html[data-theme='dark']  .icon-sun  { display: none; }

/* Woningbeheer */

/* Paginawrapper: vaste breedte en bovenaan uitgelijnd. .main-content centreert
   zijn kind horizontaal en verticaal (goed voor de logincards), waardoor een
   volle pagina anders smal en scheef uitkomt. */
.page {
  width: min(100%, 1100px);
  align-self: flex-start;
}

/* Eén pagina heeft meer nodig: de opdrachtentabel telt negen kolommen en
   past net niet in 1100px. Alleen déze pagina wordt breder; op een smaller
   scherm valt hij vanzelf terug op 100% en blijft de tabel scrollen. */
.page.page-breed { width: min(100%, 1240px); }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* De naam en het reserveringsnummer delen bewust één maatvoering: ze staan
   naast elkaar op de koptekst en moeten als één regel lezen. Eén declaratie,
   zodat ze niet uit elkaar kunnen groeien. */
.page-head h1, .kop-boekingnr { margin: 0; font-size: 1.65rem; }

/* De koptekst-regel zelf: naam links, ordernummer erachter. Op de basislijn
   uitgelijnd, en hij mag wikkelen op een smal scherm. */
.kop-regel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .75rem;
  min-width: 0;
}

/* Zelfde lettertype en -grootte als de naam — bewust NIET de monospace van
   .reserveringsnummer, want daarmee oogde het als een los kaartje in plaats
   van als onderdeel van de kop. Gedempt en op normaal gewicht, zodat de naam
   dominant blijft. */
.kop-boekingnr {
  color: var(--text-secondary);
  font-weight: 400;
  white-space: nowrap;
}
.page-head-text { min-width: 0; }
.page-head .btn { flex: 0 0 auto; white-space: nowrap; text-decoration: none; }
.page-sub { margin: 0.35rem 0 0; color: var(--text-secondary); }
.sectie-kop { margin: 2rem 0 1rem; font-size: 1.15rem; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* Klikbaar woningkaartje */
.pand-kaart {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pand-kaart:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

.pand-kaart:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

.pand-foto {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-subtle);
}

.pand-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder als er nog geen foto is */
.pand-foto-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  background: var(--bg-surface-2);
}

.pand-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.1rem 1.1rem;
}

.pand-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pand-titel strong { font-size: 1.02rem; }

.pand-actie {
  margin-top: 0.35rem;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.92rem;
}

/* Gestippeld kaartje om een woning toe te voegen */
.pand-kaart-nieuw {
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: transparent;
  border: 2px dashed var(--border-default);
  box-shadow: none;
}

.pand-kaart-nieuw:hover {
  background: var(--bg-surface-2);
  border-color: var(--accent);
  box-shadow: none;
}

.pand-nieuw-inhoud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
}

.pand-plus { font-size: 1.9rem; line-height: 1; color: var(--accent); font-weight: 700; }
.pand-nieuw-tekst { font-weight: 700; }

/* Kop van de beheerpagina */
.pand-kop {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.pand-kop-foto {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 132px;
  height: 132px;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  /* Het element is een <form>; de globale form-grid geldt hier niet. */
  gap: 0;
}

.pand-kop-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Rond camera-knopje rechtsboven in de kopfoto */
.foto-wissel {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.foto-wissel:hover { background: var(--bg-hover); color: var(--text-primary); }
.foto-wissel svg { width: 16px; height: 16px; }
.foto-wissel input[type=file] { display: none; }
.foto-wissel:focus-within { box-shadow: var(--focus-ring); border-color: var(--accent); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pand-kop-tekst { min-width: 0; }
.pand-kop-tekst h1 { margin: 0; font-size: 1.55rem; }

/* Foto-upload */
/* Functiekaarten */
.functie-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  min-height: 120px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.functie-kaart:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

a.functie-kaart:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

/* Gekleurd icoonvlakje linksboven op elke functiekaart */
.functie-icoon {
  width: 38px;
  height: 38px;
  margin-bottom: 0.35rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.functie-icoon svg { width: 19px; height: 19px; }

.icoon-gegevens   { color: #ff6b00; background: rgba(255, 107, 0, 0.12); border: 1px solid rgba(255, 107, 0, 0.24); }
.icoon-boekingen  { color: #2563eb; background: rgba(37, 99, 235, 0.12); border: 1px solid rgba(37, 99, 235, 0.24); }
.icoon-kalender   { color: #7c3aed; background: rgba(124, 58, 237, 0.12); border: 1px solid rgba(124, 58, 237, 0.24); }
.icoon-tarieven   { color: #15803d; background: rgba(21, 128, 61, 0.12); border: 1px solid rgba(21, 128, 61, 0.24); }
.icoon-diensten   { color: #0891b2; background: rgba(8, 145, 178, 0.12); border: 1px solid rgba(8, 145, 178, 0.24); }
.icoon-schoonmaak { color: #db2777; background: rgba(219, 39, 119, 0.12); border: 1px solid rgba(219, 39, 119, 0.24); }
.icoon-sleutels   { color: #475569; background: rgba(71, 85, 105, 0.12); border: 1px solid rgba(71, 85, 105, 0.24); }
.icoon-verslag    { color: #0d9488; background: rgba(13, 148, 136, 0.12); border: 1px solid rgba(13, 148, 136, 0.24); }

html[data-theme='dark'] .icoon-gegevens   { color: #ff8533; background: rgba(255, 133, 51, 0.16); border-color: rgba(255, 133, 51, 0.30); }
html[data-theme='dark'] .icoon-boekingen  { color: #60a5fa; background: rgba(96, 165, 250, 0.16); border-color: rgba(96, 165, 250, 0.30); }
html[data-theme='dark'] .icoon-kalender   { color: #a78bfa; background: rgba(167, 139, 250, 0.16); border-color: rgba(167, 139, 250, 0.30); }
html[data-theme='dark'] .icoon-tarieven   { color: #4ade80; background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.30); }
html[data-theme='dark'] .icoon-diensten   { color: #22d3ee; background: rgba(34, 211, 238, 0.16); border-color: rgba(34, 211, 238, 0.30); }
html[data-theme='dark'] .icoon-schoonmaak { color: #f472b6; background: rgba(244, 114, 182, 0.16); border-color: rgba(244, 114, 182, 0.30); }
html[data-theme='dark'] .icoon-sleutels   { color: #94a3b8; background: rgba(148, 163, 184, 0.16); border-color: rgba(148, 163, 184, 0.30); }
html[data-theme='dark'] .icoon-verslag    { color: #2dd4bf; background: rgba(45, 212, 191, 0.16); border-color: rgba(45, 212, 191, 0.30); }

/* Rood telbolletje, nu nog gebruikt op /instellingen */
.alert-badge {
  flex: 0 0 auto;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

html[data-theme='dark'] .alert-badge { background: #f87171; color: #0f1419; }

.functie-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 700;
}

.functie-tekst { color: var(--text-secondary); font-size: 0.92rem; }

.functie-kaart-uit {
  background: var(--bg-surface-2);
  box-shadow: none;
  cursor: default;
}

.functie-kaart-uit .functie-titel { color: var(--text-secondary); }
.functie-kaart-uit .functie-tekst { color: var(--text-muted); }

.badge-binnenkort {
  flex: 0 0 auto;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Gebruikersbeheer */
.blok { display: block; min-height: 0; margin-bottom: 1.25rem; }
.blok h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.blok .muted { display: block; margin-bottom: 0.9rem; }
.blok .alert { margin-bottom: 0.9rem; }

.beheerder-form { max-width: 420px; }
.beheerder-form label { display: block; margin-bottom: 0.9rem; font-weight: 600; color: var(--text-secondary); }
.beheerder-form input, .beheerder-form select { display: block; width: 100%; margin-top: 0.35rem; }
.beheerder-form select {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border-default);
  border-radius: 0.8rem;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  font-weight: 400;
}
.beheerder-form input:disabled { color: var(--text-muted); cursor: not-allowed; }

.gebruiker-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.gebruiker-lijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.8rem;
  background: var(--bg-surface-2);
}

.gebruiker-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.gebruiker-info .muted { display: block; margin: 0; }
.gebruiker-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.gebruiker-acties form { display: inline; gap: 0; }

.btn-klein { padding: 0.45rem 0.75rem; font-size: 0.88rem; border-radius: 0.6rem; }

/* Verwijderen is definitief, maar het is geen knop die je moet uitnodigen aan
   te klikken. Vandaar een omlijning in plaats van een vlak: rood genoeg om te
   waarschuwen, rustig genoeg om naast de rolbadge te staan. Pas bij hover
   loopt hij vol. */
/* Wie betaalt de losse rit. Twee regels met het bolletje vóór de tekst; de
   .rit-form zet zijn labels normaal als kolom, en dan zweeft een radio los
   boven zijn eigen tekst. */
.betaler-keuze {
  margin: 0;
  padding: .6rem .75rem .75rem;
  border: 1px solid var(--border-subtle);
  border-radius: .6rem;
}
.betaler-keuze legend { padding: 0 .3rem; font-size: .82rem; color: var(--text-secondary); }
.betaler-keuze .keuze-regel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  margin: .2rem 0;
  font-size: .9rem;
  cursor: pointer;
}
/* .rit-form geeft elke input display:block en width:100%. Voor een tekstveld
   klopt dat; een keuzerondje zou daarmee de hele regel opeisen en de tekst
   ernaast tot een kolommetje knijpen. */
.rit-form .betaler-keuze .keuze-regel input[type="radio"] {
  flex: 0 0 auto;
  display: inline-block;
  width: auto;
  margin: 0;
}
.betaler-keuze .keuze-regel span { flex: 1 1 auto; font-weight: 500; }

.btn-verwijder {
  background: transparent;
  color: var(--rood-ink);
  border: 1px solid color-mix(in srgb, var(--rood-ink) 45%, transparent);
}
.btn-verwijder:hover {
  background: var(--rood-ink);
  color: var(--rood-tekst);
  border-color: var(--rood-ink);
}

.rol-badge {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.status-badge {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.status-badge-actief { color: #15803d; background: rgba(21, 128, 61, 0.12); border-color: rgba(21, 128, 61, 0.24); }
.status-badge-wacht  { color: #b45309; background: rgba(180, 83, 9, 0.12); border-color: rgba(180, 83, 9, 0.24); }

html[data-theme='dark'] .status-badge-actief { color: #4ade80; background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.30); }
html[data-theme='dark'] .status-badge-wacht  { color: #fbbf24; background: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.30); }

/* Boekingen */
.maand-nav { display: inline-flex; align-items: center; gap: 0.4rem; }

/* "Wanneer wil je komen?": één chip per maand binnen de horizon. Wikkelt door
   op een smal scherm; de maand die in de kalender staat draagt het accent.
   Het blok komt uit JS — zonder script blijft het hidden en blader je met < >. */
.maand-blok { margin-top: .9rem; }

.maand-blok-kop {
  display: block;
  margin-bottom: .4rem;
  font-size: .9rem;
  font-weight: 600;
}

.maand-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.maand-chip {
  padding: .25rem .6rem;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}

.maand-chip:hover { background: var(--bg-hover); }

.maand-chip.is-actief {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.kalender { display: grid; gap: 0.25rem; margin-bottom: 0.9rem; }
.kalender-kop, .kalender-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }

.kalender-kop span {
  text-align: center;
  padding: 0.3rem 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.kalender-dag {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.88rem;
}

.kalender-dag.buiten-maand { color: var(--text-muted); background: transparent; border-color: transparent; }
/* Een dag die voorbij is: wel zichtbaar, niet te kiezen. Bewust niet
   groen ("Vrij" klopt niet meer) en niet rood (er ligt geen boeking) —
   dezelfde demping als een dag buiten de maand, met een streep erdoor
   zodat het ook zonder kleur te zien is. */
.kalender-dag.verleden { color: var(--text-muted); background: transparent;
  border-color: transparent; text-decoration: line-through; cursor: default; }
.legenda-blok.dag-verleden { background: transparent; border: 1px dashed var(--border-strong); }
.kalender-dag.bezet { font-weight: 700; }

/* Kalender als datumkiezer (alleen actief met JavaScript) */
.kalender-klikbaar .kalender-dag.dag-vrij { cursor: pointer; }
.kalender-klikbaar .kalender-dag.dag-vrij:hover { border-color: #4f46e5; }
html[data-theme='dark'] .kalender-klikbaar .kalender-dag.dag-vrij:hover { border-color: #818cf8; }

.kalender-dag.dag-gekozen {
  background: rgba(79, 70, 229, 0.14);
  border-color: rgba(79, 70, 229, 0.3);
  color: #4f46e5;
  font-weight: 700;
}

.kalender-dag.dag-aankomst,
.kalender-dag.dag-vertrek {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #ffffff;
  font-weight: 800;
}

html[data-theme='dark'] .kalender-dag.dag-gekozen {
  background: rgba(129, 140, 248, 0.2);
  border-color: rgba(129, 140, 248, 0.36);
  color: #818cf8;
}

html[data-theme='dark'] .kalender-dag.dag-aankomst,
html[data-theme='dark'] .kalender-dag.dag-vertrek {
  background: #818cf8;
  border-color: #818cf8;
  color: #0f1419;
}

.legenda-blok.dag-gekozen { background: rgba(79, 70, 229, 0.14); border-color: rgba(79, 70, 229, 0.3); }
html[data-theme='dark'] .legenda-blok.dag-gekozen { background: rgba(129, 140, 248, 0.2); border-color: rgba(129, 140, 248, 0.36); }

.kalender-hint {
  margin: 0 0 0.6rem;
  color: var(--warning);
  font-size: 0.85rem;
}

.kalender-hint[hidden] { display: none; }
.kalender-uitleg[hidden] { display: none; }
.legenda-kiezen[hidden] { display: none; }

.kalender-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.kalender-legenda span { display: inline-flex; align-items: center; gap: 0.4rem; }

.legenda-blok {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border-subtle);
}

/* Statuskleuren: optie amber, bevestigd groen. Bronnen: direct blauw,
   Booking.com paars, Airbnb eigen roze-rood, eigen gebruik oranje. */
.bezet-optie        { background: rgba(180, 83, 9, 0.16);   border-color: rgba(180, 83, 9, 0.34);   color: #b45309; }
.bezet-bevestigd    { background: rgba(21, 128, 61, 0.16);  border-color: rgba(21, 128, 61, 0.34);  color: #15803d; }
.bezet-eigen_gebruik{ background: rgba(255, 107, 0, 0.16);  border-color: rgba(255, 107, 0, 0.34);  color: #ff6b00; }
.bezet-booking      { background: rgba(124, 58, 237, 0.16); border-color: rgba(124, 58, 237, 0.34); color: #7c3aed; }
.bezet-airbnb       { background: rgba(255, 56, 92, 0.16);  border-color: rgba(255, 56, 92, 0.34);  color: #ff385c; }
/* Boekpagina: vrij groen, bezet rood. */
.dag-vrij           { background: rgba(21, 128, 61, 0.10);  border-color: rgba(21, 128, 61, 0.26);  color: #15803d; }
.bezet-vol          { background: rgba(190, 24, 60, 0.14);  border-color: rgba(190, 24, 60, 0.32);  color: #be123c; }

html[data-theme='dark'] .bezet-optie        { background: rgba(251, 191, 36, 0.2);  border-color: rgba(251, 191, 36, 0.4);  color: #fbbf24; }
html[data-theme='dark'] .bezet-bevestigd    { background: rgba(74, 222, 128, 0.2);  border-color: rgba(74, 222, 128, 0.4);  color: #4ade80; }
html[data-theme='dark'] .bezet-eigen_gebruik{ background: rgba(255, 133, 51, 0.2);  border-color: rgba(255, 133, 51, 0.4);  color: #ff8533; }
html[data-theme='dark'] .bezet-booking      { background: rgba(167, 139, 250, 0.2); border-color: rgba(167, 139, 250, 0.4); color: #a78bfa; }
html[data-theme='dark'] .bezet-airbnb       { background: rgba(255, 90, 122, 0.22); border-color: rgba(255, 90, 122, 0.42); color: #ff5a7a; }
html[data-theme='dark'] .dag-vrij           { background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.3);  color: #4ade80; }
html[data-theme='dark'] .bezet-vol          { background: rgba(251, 113, 133, 0.16); border-color: rgba(251, 113, 133, 0.34); color: #fb7185; }

.bron-badge, .boek-status {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  font-size: 0.78rem;
  font-weight: 700;
}

.bron-direct  { color: #2563eb; background: rgba(37, 99, 235, 0.12);  border-color: rgba(37, 99, 235, 0.24); }
.bron-booking { color: #7c3aed; background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.24); }
.bron-airbnb  { color: #ff385c; background: rgba(255, 56, 92, 0.12);  border-color: rgba(255, 56, 92, 0.24); }

html[data-theme='dark'] .bron-direct  { color: #60a5fa; background: rgba(96, 165, 250, 0.16); border-color: rgba(96, 165, 250, 0.30); }
html[data-theme='dark'] .bron-booking { color: #a78bfa; background: rgba(167, 139, 250, 0.16); border-color: rgba(167, 139, 250, 0.30); }
html[data-theme='dark'] .bron-airbnb  { color: #ff5a7a; background: rgba(255, 90, 122, 0.18); border-color: rgba(255, 90, 122, 0.34); }

.boek-status-optie       { color: #b45309; background: rgba(180, 83, 9, 0.12);  border-color: rgba(180, 83, 9, 0.24); }
.boek-status-bevestigd   { color: #15803d; background: rgba(21, 128, 61, 0.12); border-color: rgba(21, 128, 61, 0.24); }
.boek-status-geannuleerd { color: var(--text-muted); background: var(--bg-surface-2); }
.boek-status-verbleven   { color: var(--text-secondary); background: var(--bg-surface-2); }

html[data-theme='dark'] .boek-status-optie     { color: #fbbf24; background: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.30); }
html[data-theme='dark'] .boek-status-bevestigd { color: #4ade80; background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.30); }

.boek-form { display: grid; gap: 0.9rem; max-width: 760px; }
.boek-form label { display: block; font-weight: 600; color: var(--text-secondary); }
.boek-form input, .boek-form select { display: block; width: 100%; margin-top: 0.35rem; }

.boek-form select {
  padding: 0.85rem 0.95rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
}

.veld-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; }

/* === De landkiezer bij het telefoonveld op /boeken (#196B) ============
   TWEE STANDEN, EN DAT IS MET OPZET.

   Onder 640px blijft de NATIVE <select> staan, met de vlag in een eigen vakje
   ervoor. De systeemkiezer van een telefoon is een volledig scherm waarin je
   kunt typen om te springen; dertig landen in een eigen lijstje van 22px per
   regel is dat niet. Verenig deze twee standen dus niet tot een -- dan raakt
   de telefoon zijn systeemkiezer kwijt.

   Boven 640px vervangt JavaScript de select door .tel-kies: een knop met vlag
   en landcode, en een lijst met vlag, land en code. Draait het script niet,
   dan blijft de select staan en werkt alles; het formulier post in beide
   gevallen hetzelfde tel_land.

   IN ALLEBEI DE STANDEN STAAT EEN VLAG. Wie zijn telefoon draait mag zijn
   vlag niet kwijtraken.

   De vlaggen komen uit static/vlaggen.svg (flag-icons, MIT). Over file://
   toont <use> naar een extern bestand NIETS -- dat is een browserregel, niet
   een fout in dit bestand. ===================================================== */

.tel-rij { display: flex; align-items: stretch; gap: 0; margin-top: 0.35rem; }

/* HET VLAGVAK VOOR DE SELECT -- de telefoonstand. Boven 640px verbergt het
   script hem, want daar zit de vlag in de knop zelf. */
.tel-vlagvak {
  flex: 0 0 auto;
  display: flex; align-items: center;
  padding: 0 0.7rem;
  border: 1px solid var(--border-default);
  border-right: 0;
  border-radius: 0.8rem 0 0 0.8rem;
  background: var(--bg-surface-2);
}
.tel-rij select { border-radius: 0 0.8rem 0.8rem 0 !important; margin-top: 0 !important; }
.tel-rij select { flex: 1 1 auto; min-width: 0; }
/* Het nummerveld krijgt alles wat de kiezer niet nodig heeft. Een
   internationaal nummer is lang; de knop is dat niet. */
.tel-rij input { flex: 1 1 auto; min-width: 0; margin-top: 0 !important; }

/* 22x15 zoals in de mock. Niet alleen smaak: bij 17px hoog werd de knop een
   regelvak hoger dan de invoervelden ernaast, en dan staat er een rij scheef
   in het formulier. */
.tel-vlag {
  width: 22px; height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  display: block;
}

/* --- de eigen uitklapper, alleen boven 640px en alleen met script ---- */
/* ZIJN EIGEN MAAT, geen halve kolom. Er staat een vlag, een landcode en een
   pijltje in; breder maakt hem niet leesbaarder en haalt ruimte weg bij het
   nummer ernaast. */
.tel-kies { position: relative; flex: 0 0 auto; }

.tel-knop {
  display: flex; align-items: center; gap: 0.55rem;
  width: auto;
  /* De rij eindigt bij de knop, niet bij het nummerveld: zonder deze marge
     plakken ze tegen elkaar. */
  margin-right: 0.5rem;
  /* Gelijk aan .boek-form select hierboven, zodat de knop en het nummerveld
     ernaast even hoog zijn. */
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border-default);
  border-radius: 0.8rem;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  /* Het regelvak van een knop is hoger dan dat van een input; zonder dit staat
     de telefoonrij zes pixels hoger dan Naam en E-mailadres erboven. */
  line-height: 15px;
  cursor: pointer;
  text-align: left;
}
.tel-knop:hover { border-color: var(--border-strong, var(--border-default)); }
.tel-knop .tel-pijl { margin-left: auto; font-size: 0.7em; opacity: .65; }

/* De LIJST blijft breed genoeg om een landnaam te lezen, ook al is de knop
   ernaast smal geworden. */
.tel-lijst {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 4px);
  min-width: 17rem;
  max-height: 17rem; overflow-y: auto;
  margin: 0; padding: 0.3rem;
  list-style: none;
  border: 1px solid var(--border-default);
  border-radius: 0.8rem;
  background: var(--bg-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
.tel-lijst[hidden] { display: none; }

.tel-optie {
  display: flex; align-items: center; gap: 0.6rem;
  /* 40px raakvlak, ook met de muis (les #193). */
  min-height: 40px;
  padding: 0.35rem 0.6rem;
  border-radius: 0.55rem;
  cursor: pointer;
  color: var(--text-primary);
}
.tel-optie:hover, .tel-optie:focus { background: var(--bg-hover); outline: none; }
.tel-optie:focus-visible { box-shadow: inset 0 0 0 2px var(--accent, #4f46e5); }
.tel-optie[aria-selected="true"] { font-weight: 600; }
.tel-optie .tel-code { margin-left: auto; color: var(--text-secondary); }

/* ONDER 640px BESTAAT DE UITKLAPPER NIET, ook niet als het script draaide.
   Draai je je telefoon van liggend naar staand, dan valt hij terug op de
   systeemkiezer en blijft de vlag in zijn vakje staan. */
@media (max-width: 640px) {
  .tel-kies { display: none !important; }
  .tel-vlagvak, .tel-rij select { display: flex !important; }
  .tel-rij select { display: block !important; }
}

.adres-rij { grid-template-columns: minmax(180px, 3fr) minmax(90px, 1fr); }
.detail-grid .kv strong { text-align: right; }

.boek-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.boek-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.8rem;
  background: var(--bg-surface-2);
}

.boek-rij-geannuleerd { opacity: 0.65; }
.boek-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.boek-periode { color: var(--text-secondary); font-size: 0.9rem; }
.boek-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.boek-acties form { display: inline; gap: 0; }

.boek-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.boek-hero img, .boek-hero .pand-foto-leeg {
  width: 120px;
  height: 90px;
  border-radius: 0.8rem;
  object-fit: cover;
  flex: 0 0 auto;
}

.boek-hero-tekst { display: flex; flex-direction: column; gap: 0.2rem; }
/* De bevestiging na een aanvraag. Uit de goedgekeurde mock, maar op de tokens
   van het thema in plaats van de vaste kleuren daar: deze pagina draait ook in
   het donker. Eén smalle kolom — de gast leest hier, hij bedient niets. */
.boek-bevestiging { text-align: left; max-width: 40rem; margin: 0 auto; }
.boek-bevestiging h1 { margin: 0.6rem 0 0.3rem; font-size: 1.5rem; }

/* Het logobestand heeft een ingebakken witte achtergrond. In het lichte thema
   valt die weg, in het donkere staat er een wit vlak. Afgeronde hoeken maken
   er een bewust plaatje van in plaats van een gat in de kaart. */
.bev-logo {
  display: block;
  width: 230px;
  max-width: 70%;
  height: auto;
  margin: 0 auto 1.6rem;
  border-radius: 12px;
}

.bev-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 14px;
  /* Teal is in dit thema de "klaar"-kleur; de mock gebruikte daar groen voor. */
  background: var(--teal-zacht);
  color: var(--teal);
}
.bev-check svg { width: 26px; height: 26px; }

.bev-lead { margin: 0 0 .25rem; font-size: 1.02rem; }
.bev-lead-sub { margin: 0 0 1.3rem; color: var(--text-muted); }
.bev-nummer { margin: 0 0 1.6rem; color: var(--text-secondary); }
.bev-nummer .reserveringsnummer { font-size: .95rem; }

.bev-sectiekop {
  margin: 0 0 .8rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo);
}

/* Hoe het verder gaat: drie stappen, genummerd. */
.bev-stappen { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1rem; }
.bev-stap { display: flex; gap: .9rem; align-items: flex-start; }
.bev-stap-nr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--indigo-tekst, #fff);
  font-size: .9rem;
  font-weight: 800;
}
.bev-stap-tekst strong { display: block; margin-bottom: 1px; font-size: 1rem; }
.bev-stap-tekst span { color: var(--text-muted); font-size: .92rem; }

.bev-scheiding { border: 0; border-top: 1px solid var(--border-subtle); margin: 1.6rem 0; }

/* Toch nog een vraag: het enige blok waar de gast iets kan doen. */
.bev-vraagblok {
  padding: 1.2rem 1.2rem 1.3rem;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--bg-surface-2);
}
.bev-vraagblok h2 { margin: 0 0 .25rem; font-size: 1.08rem; }
.bev-vraagblok p { margin: 0 0 .8rem; color: var(--text-muted); font-size: .94rem; }
.bev-vraagblok textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: .75rem .85rem;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
}
.bev-acties { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .75rem; }
.bev-of { color: var(--text-muted); font-size: .9rem; }
.bev-wa { margin-top: .6rem; }
.bev-bedankt { margin: 0; }

/* Filterbalk */
.filterbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.segmented {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-2);
}

.segment {
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.segment:hover { color: var(--text-primary); }
.segment.actief { background: var(--accent); color: var(--accent-text); }

.periode-nav { display: inline-flex; align-items: center; gap: 0.5rem; }
.periode-label { min-width: 9rem; text-align: center; }
.filter-groep { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }

.filter-select {
  padding: 0.55rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
}

.samenvatting { margin: 0 0 1rem; color: var(--text-secondary); }
.samenvatting strong { color: var(--text-primary); }

/* Lijstweergave */
.tabel-schuif { overflow-x: auto; }
.boek-tabel { width: 100%; border-collapse: collapse; font-size: 0.92rem; }

.boek-tabel th {
  text-align: left;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.boek-tabel td {
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.boek-tabel td .muted { display: block; font-size: 0.82rem; }
.boek-tabel tr.rij-nieuw { background: rgba(180, 83, 9, 0.07); }
html[data-theme='dark'] .boek-tabel tr.rij-nieuw { background: rgba(251, 191, 36, 0.09); }
/* Bij een optie-rij staan er twee knoppen: zonder deze flex plakken de link en
   het formulier tegen elkaar aan. */
.rij-actie {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
}
.rij-actie form { display: inline; gap: 0; margin: 0; }

/* Tijdlijn */
.tijdlijn { min-width: 720px; display: grid; gap: 0.35rem; }
.tijdlijn-kop, .tijdlijn-rij { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 0.6rem; }

.tijdlijn-naam {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tijdlijn-dagen { display: grid; grid-template-columns: repeat(var(--dagen), 1fr); }

.tijdlijn-dag {
  text-align: center;
  font-size: 0.66rem;
  color: var(--text-muted);
  padding-bottom: 0.2rem;
}

.tijdlijn-dag.weekend { color: var(--text-secondary); font-weight: 700; }

.tijdlijn-spoor {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--dagen), 1fr);
  height: 2.1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bg-surface-2);
}

.spoor-dag { border-right: 1px solid var(--border-subtle); }
.spoor-dag.weekend { background: rgba(107, 114, 128, 0.1); }
html[data-theme='dark'] .spoor-dag.weekend { background: rgba(148, 163, 184, 0.09); }

/* Maandband: de as bij kwartaal en jaar, waar losse dagnummers onleesbaar
   zouden worden. Elk blok is zo breed als zijn aandeel dagen. */
.tijdlijn-maanden { position: relative; display: block; height: 2.1rem; }

.maandband {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-left: 1px solid var(--border-default);
}

.maandband:first-child { border-left: 0; }

.maandnaam {
  padding: 0 0.35rem;
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maanddagen { position: relative; height: 0.9rem; }

.maanddagen i {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 0 0.15rem;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-style: normal;
}

/* Spoor in maandmodus: geen dagraster, maar blokken met een scheidslijn. */
.tijdlijn-spoor.spoor-maanden { display: block; }

.spoor-maand {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--border-default);
}

.spoor-maand:first-child { border-left: 0; }

.week-streep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-subtle);
}

.vandaag-lijn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  z-index: 2;
}

.balk {
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  display: flex;
  align-items: center;
  padding: 0 0.45rem;
  border-radius: 0.4rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
}

.balk-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.balk:hover { filter: brightness(1.06); }

.balk-bevestigd { background: rgba(21, 128, 61, 0.85);  color: #ffffff; }
.balk-optie     { background: rgba(180, 83, 9, 0.85);   color: #ffffff; }
.balk-blokkade  {
  color: var(--text-secondary);
  background: repeating-linear-gradient(45deg,
    rgba(107, 114, 128, 0.35) 0 6px, rgba(107, 114, 128, 0.15) 6px 12px);
}

html[data-theme='dark'] .balk-bevestigd { background: rgba(74, 222, 128, 0.8);  color: #0f1419; }
html[data-theme='dark'] .balk-optie     { background: rgba(251, 191, 36, 0.85); color: #0f1419; }
html[data-theme='dark'] .balk-blokkade  {
  background: repeating-linear-gradient(45deg,
    rgba(148, 163, 184, 0.4) 0 6px, rgba(148, 163, 184, 0.18) 6px 12px);
}

/* Boekwizard */
.stepper {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
}

.stap-punt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-surface-2);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.stepper.interactief .stap-punt.gedaan { cursor: pointer; }

.stap-nr {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  font-size: 0.78rem;
  font-weight: 800;
}

.stap-punt.actief {
  border-color: var(--accent);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.stap-punt.actief .stap-nr { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.stap-punt.gedaan { color: var(--text-secondary); }
.stap-punt.gedaan .stap-nr { background: rgba(21, 128, 61, 0.14); border-color: rgba(21, 128, 61, 0.3); color: #15803d; }
html[data-theme='dark'] .stap-punt.gedaan .stap-nr { background: rgba(74, 222, 128, 0.18); border-color: rgba(74, 222, 128, 0.34); color: #4ade80; }

.wizard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 1rem;
  align-items: start;
}

.wizard-zij { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.wizard-zij .blok { margin-bottom: 0; }
.wizard-form { display: block; gap: 0; }
.wizard-stap[hidden] { display: none; }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.wizard-nav [hidden] { display: none; }
.wizard-nav .btn:only-child { margin-left: auto; }

.notitie-veld { display: block; font-weight: 600; color: var(--text-secondary); }
.notitie-veld .muted { display: block; margin-top: 0.3rem; }

.notitie-veld textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  font-weight: 400;
  resize: vertical;
}

.notitie-veld textarea:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

.woningkaart { display: grid; gap: 0.35rem; }

.woningkaart-foto {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 0.7rem;
  overflow: hidden;
  background: var(--bg-surface-2);
  margin-bottom: 0.4rem;
}

.woningkaart-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.woningkaart-naam { font-size: 1.02rem; }
.zij-samenvatting .kv { margin: 0 0 0.9rem; }
.zij-samenvatting .kv li:last-child { border-bottom: 0; }

.prijs-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.prijs-lijst[hidden] { display: none; }

.prijs-lijst li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.prijs-lijst li strong { color: var(--text-primary); font-weight: 700; }
.prijs-lijst li strong.muted { color: var(--text-muted); font-weight: 400; }
.prijs-lijst + .prijs-lijst { margin-top: 0.35rem; }

/* Verblijfprijs per seizoen: tag met de nachten eronder, bedrag rechts. */
.verblijf-lijst:empty { display: none; }
.verblijf-regel > span:first-child { display: grid; gap: 0.15rem; }
.verblijf-regel .seizoen-tag { justify-self: start; }
.verblijf-regel .muted { font-size: 0.82rem; }

.verblijf-gemiddeld {
  padding-top: 0.3rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.82rem;
}

.vertrouwen {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 0.5rem;
}

.vertrouwen li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.35;
}

.vertrouwen svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 0.1rem;
  color: #15803d;
}

html[data-theme='dark'] .vertrouwen svg { color: #4ade80; }
.controle-lijst { margin: 0 0 0.9rem; }
.controle-lijst li:last-child { border-bottom: 0; }

@media (max-width: 860px) {
  .wizard-grid { grid-template-columns: minmax(0, 1fr); }
  .wizard-zij { position: static; }
}

/* Boekingdetail */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 1rem;
  align-items: start;
}

.detail-hoofd > .blok:last-child { margin-bottom: 0; }
.detail-zij { position: sticky; top: 1rem; }

.page-head .page-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.detail-grid .kv { margin: 0; }
.detail-grid .kv li:last-child { border-bottom: 0; }
.detail-grid .kv a { color: var(--accent); text-decoration: none; }
.detail-grid .kv a:hover { text-decoration: underline; }

.notitie { margin: 0; color: var(--text-secondary); white-space: pre-wrap; }

.dienst-regel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.7rem;
  background: var(--bg-surface-2);
}

.dienst-regel .dienst-info { flex: 1 1 auto; }
.dienst-regel .dienst-info strong { font-size: 0.95rem; line-height: 1.25; }
.dienst-regel .dienst-info .muted { font-size: 0.8rem; line-height: 1.2; }

.afrekening-totaal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.afrekening-totaal strong { color: #4f46e5; font-size: 1.25rem; }
html[data-theme='dark'] .afrekening-totaal strong { color: #818cf8; }

/* Wat er van het totaal al binnen is en wat er nog moet komen. Hangt onder de
   Totaal-regel, dus zonder eigen streep erboven. */
.afrekening-stand { margin: 0.5rem 0 0; }
.afrekening-stand li:last-child { border-bottom: 0; }

/* De borg staat aan de andere kant van een lijntje: geen omzet, telt niet mee
   in het totaal en gaat niet van het openstaande bedrag af. */
.afrekening-borg {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.8rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.afrekening-borg strong { color: var(--text-primary); font-size: 1rem; }

.afrekening-borg-sub {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.detail-acties { display: grid; gap: 0.5rem; }
.detail-acties form { display: grid; gap: 0; }
.detail-acties .btn { width: 100%; }

@media (max-width: 860px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-zij { position: static; }
}

/* Diensten */

.dienst-form { display: grid; gap: 0.9rem; max-width: 720px; }
.dienst-form label { display: block; font-weight: 600; color: var(--text-secondary); }
.dienst-form label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.dienst-form input[type=text], .dienst-form input[type=number], .dienst-form select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
}

.dienst-form select {
  padding: 0.85rem 0.95rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
}

.dienst-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.dienst-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.8rem;
  background: var(--bg-surface-2);
}

.dienst-rij.dienst-uit { opacity: 0.6; }
.dienst-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dienst-info .muted { display: block; }
.dienst-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dienst-acties form { display: inline; gap: 0; }

/* Dienstenkeuze op /boeken */
.diensten-keuze {
  margin: 0;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.9rem;
  background: var(--bg-surface-2);
}

.diensten-keuze legend {
  padding: 0 0.4rem;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.9rem;
}

.dienst-opties { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }

/* Zelfde compacte rij als op /diensten: checkbox links, naam met de eenheid
   eronder, prijs rechts. Het hele label is klikbaar. */
.dienst-optie {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.7rem;
  background: var(--bg-surface);
  cursor: pointer;
  font-weight: 400;
  color: var(--text-primary);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dienst-optie:hover { border-color: var(--border-default); }

.dienst-optie input[type=checkbox] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
}

.dienst-optie .dienst-info { flex: 1 1 auto; }
.dienst-optie .dienst-info strong { font-size: 0.95rem; line-height: 1.25; }
.dienst-optie .dienst-info .muted { font-size: 0.8rem; line-height: 1.2; }
.dienst-prijs { flex: 0 0 auto; text-align: right; font-weight: 700; font-size: 0.95rem; }

.dienst-optie:has(input:checked) {
  border-color: #4f46e5;
  background: rgba(79, 70, 229, 0.08);
}

html[data-theme='dark'] .dienst-optie:has(input:checked) {
  border-color: #818cf8;
  background: rgba(129, 140, 248, 0.14);
}

/* --- De extra's op /boeken (#195) ------------------------------------
   DIT IS EEN REPARATIE, GEEN NIEUWE VORM. De compacte rij hierboven werkte
   overal behalve op /boeken, en daar lag een botsing onder:

       .boek-form label { display: block; ... }   (0,1,1)
       .dienst-optie    { display: flex;  ... }   (0,1,0)

   De eerste weegt zwaarder, dus het label werd display:block en de flexrij
   viel uit elkaar -- checkbox, naam en prijs kwamen onder elkaar en een rij
   werd 102px in plaats van 68px. Bij negen diensten is dat een lijst van
   966px.

   Die .boek-form-regel blijft staan: elk ANDER label op dat formulier --
   Woning, Aankomst, Vertrek, Volwassenen, Kinderen -- hangt eraan, en geen
   van die vijf heeft een klasse. Daarom zet deze regel alleen het label MET
   de klasse terug, en alleen binnen dat formulier. Additief, en zwaarder
   (0,2,1) dan wat hem overrulede. */
.boek-form label.dienst-optie {
  display: flex;
  font-weight: 400;
  color: var(--text-primary);
}

/* TWEE KOLOMMEN ZODRA ER RUIMTE IS, en GEEN media query.

   Het venster is hier de verkeerde maat: .wizard-zij is 300px en staat boven
   860px naast het formulier, eronder klapt hij weg. Gemeten breedte van de
   lijst: 555px bij een venster van 640px, maar 499px bij 900px. Een
   @media (max-width: 640px) zou dus een kolom geven waar er twee passen, en
   twee krappe waar er een hoort. auto-fit meet de container zelf -- hetzelfde
   patroon als .veld-rij een paar honderd regels hierboven, in ditzelfde
   formulier.

   DE 330 IS GEMETEN, niet gekozen, EN ER ZIT GEEN SPELING IN.

   Elke rij is los in een proefbak gezet en versmald tot hij een tweede regel
   nam. De bepalende rij is "Honden uitlaat service"; daarna komen
   Boodschappen pakket en Extra voorzieningen, en de smalste
   (Ontvangstpakket) heeft er maar 173 nodig.

   Maar --font-sans is een SYSTEEMSTACK -- system-ui, 'Segoe UI', Roboto,
   sans-serif -- en er wordt geen webfont geladen. Elke bezoeker meet dus in
   ZIJN lettertype, niet in het onze:

       met Segoe UI (Windows)   "Honden uitlaat service" breekt onder 273px
       zonder, val naar DejaVu   dezelfde tekst is 1,21x breder -> 328px

   /boeken staat op het open web, dus die tweede bezoeker bestaat echt. 330
   dekt hem, en 273 zou zijn rij over twee regels breken. Wie hier 280 van
   maakt omdat "er ruimte over is", kijkt naar zijn eigen scherm.

   EN REKEN DIT NIET NA IN EEN CONTAINER DIE HET LETTERTYPE VAN DE BEZOEKER
   NIET HEEFT. Precies zo is dit verschil ontstaan: dezelfde tekst, twee
   machines, 161px tegen 194px. De meting zegt niets zonder de font-stack
   erbij.

   "Ophaal dienst alicante airport" vraagt er 325 en is daarmee de breedste,
   maar telt niet mee: die rij spant beide kolommen, zie de regel hieronder.

   DE min() IS GEEN VERSIERING. Zonder min() wordt het spoor 330px in een
   container van 290px en steekt de rij 40px buiten zijn kaart -- gemeten op
   375px. Haal hem er niet uit omdat hij overbodig lijkt.

   De scope is .boek-form en niet .dienst-opties kaal, want die klasse draagt
   op boeking_detail.html een leeslijst met prijzen die geen kolommen hoort te
   krijgen. */
.boek-form .dienst-opties {
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 0.35rem 0.5rem;
}

/* EEN TRANSFER SPANT BEIDE KOLOMMEN, ALTIJD -- ook als het vluchtblok dicht
   is. Twee redenen. De vluchtvelden (nummer, datum, tijd) horen niet in een
   halve kolom te wringen. En zou de rij pas bij het openklappen verspringen,
   dan schuift de hele lijst onder je vinger weg op het moment dat je hem
   aanvinkt. Voorspelbaar boven zuinig.

   :has() is hier al in gebruik (.dienst-optie:has(input:checked) hierboven),
   dus dit vraagt niets nieuws van de browser. */
.boek-form .dienst-opties li:has(.vluchtblok) { grid-column: 1 / -1; }

.extra-regel {
  margin: 0.8rem 0 0.2rem;
  color: var(--text-secondary);
}

.extra-regel strong { color: #4f46e5; font-size: 1.05rem; }
html[data-theme='dark'] .extra-regel strong { color: #818cf8; }

.extra-samenvatting { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.3rem; max-width: 360px; }

.extra-samenvatting li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.extra-samenvatting .extra-totaal {
  margin-top: 0.3rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-weight: 700;
}

/* Extra's bij een boeking in het adminoverzicht */
.boek-extras { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }

.extra-chip {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(79, 70, 229, 0.24);
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
  font-size: 0.74rem;
  font-weight: 700;
}

.extra-chip-totaal { background: rgba(79, 70, 229, 0.2); }

html[data-theme='dark'] .extra-chip {
  border-color: rgba(129, 140, 248, 0.3);
  background: rgba(129, 140, 248, 0.16);
  color: #818cf8;
}

html[data-theme='dark'] .extra-chip-totaal { background: rgba(129, 140, 248, 0.28); }

@media (max-width: 560px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .btn { width: 100%; }
  .filterbalk { flex-direction: column; align-items: stretch; }
  .periode-nav { justify-content: space-between; }
}

.tile-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.muted { color: var(--text-muted); font-size: .85rem; }
.status-pill-off { background: var(--bg-surface-2); color: var(--text-muted); }
.kv { list-style: none; padding: 0; margin: .75rem 0 1rem; }
.kv li { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid var(--border-subtle); }
.kv li span { color: var(--text-secondary); }
.form-card { max-width: 480px; }
/* BINNEN .page-breed VERVALT DIE 480px (#202B). Het keyholding-contract is
   een lang formulier met acht velden in veld-duo's; op 1440 stond dat als
   een kolom van 480 midden in een leeg vlak. .page-breed is de bestaande
   breedtemaat (1240px), en dit is de regel die de kaart erin laat meegroeien
   -- geen nieuwe klasse, geen derde breedte in het systeem.

   BEIDE EIGENSCHAPPEN ZIJN NODIG. De 480 komt niet van .form-card maar van
   .card { width: min(100%, 480px) }, en `width` wint van `max-width`. Alleen
   de max-width opheffen liet de kaart precies even breed staan -- gemeten,
   480px op een pagina van 1240. Daarom ook width: 100%. */
.page-breed .form-card { width: 100%; max-width: none; }
.form-card label { display: block; margin-bottom: .9rem; font-weight: 600; color: var(--text-secondary); }
.form-card input[type=text], .form-card input[type=number], .form-card select { display: block; width: 100%; margin-top: .35rem; }
.form-card select {
  padding: 0.85rem 0.95rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
}
.form-actions { display: flex; gap: .75rem; margin-top: 1rem; }

/* Twee getalvelden naast elkaar (slaapkamers/badkamers). */
.veld-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .9rem; }
/* DE CHECKLIST VAN EEN PAKKET (#205). Een puntrij is een tekstveld met een
   knop ernaast, geen twee gelijke velden: met 1fr 1fr werd "Verwijderen" een
   halve kolom breed en las de rij als twee invoervelden. Hergebruikt
   .veld-duo, alleen de kolomverdeling is anders -- geen nieuwe klasse. */
#punten .veld-duo { grid-template-columns: 1fr auto; align-items: start; }
.form-card .veld-duo label { margin-bottom: 0; }

/* Groep aanvinkbare keuzes onder een kopje: voorzieningen, status. */
.veld-groep { margin: 0 0 .9rem; padding: 0; border: 0; }

.veld-groep legend {
  padding: 0;
  margin-bottom: .45rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.keuze-rijen { display: grid; gap: .35rem; }

/* Vinkje links, label ernaast; het hele blok is klikbaar. */
.form-card label.keuze-rij {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--border-subtle);
  border-radius: .7rem;
  background: var(--bg-surface);
  font-weight: 400;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.form-card label.keuze-rij:hover { border-color: var(--border-default); }

.form-card label.keuze-rij input[type=checkbox] {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.form-card label.keuze-rij:has(input:checked) {
  border-color: var(--indigo);
  background: var(--indigo-zacht);
}

/* Kenmerken van een woning: chips met lijniconen, in het tweede accent.
   Gebruikt op /boeken, /woningen en de woning-beheerpagina. */
.kenmerken-rij { display: flex; flex-wrap: wrap; gap: .3rem .4rem; }

.kenmerk {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .5rem;
  border: 1px solid var(--indigo-rand);
  border-radius: 999px;
  background: var(--indigo-zacht);
  color: var(--indigo);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.kenmerk svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Tarieven: seizoenstag in vier tinten, plus het prioriteitsblokje. */
.seizoen-tag {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}

.tint-hoog { background: #fef3c7; color: #b45309; }
.tint-mid  { background: #dbeafe; color: #1d4ed8; }
.tint-laag { background: #dcfce7; color: #15803d; }
.tint-piek { background: #fde2e4; color: #b42318; }

html[data-theme='dark'] .tint-hoog { background: rgba(251, 191, 36, 0.16); color: #fbbf24; }
html[data-theme='dark'] .tint-mid  { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
html[data-theme='dark'] .tint-laag { background: rgba(74, 222, 128, 0.16); color: #4ade80; }
html[data-theme='dark'] .tint-piek { background: rgba(248, 113, 113, 0.16); color: #f87171; }

.prio-badge {
  display: inline-block;
  min-width: 1.5rem;
  padding: .1rem .4rem;
  border-radius: .4rem;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
}

/* === Dashboard: één egaal raster van gelijke kaarten ================== */

.dash-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }

.dash-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 10.75rem;
  padding: 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.dash-kaart:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

a.dash-kaart:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

.dash-kaart h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.dash-kaart p { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.88rem; }
/* Kaarten zonder kengetal houden dezelfde ritmiek als de kaarten met. */
.dash-tekst-ruim { margin-top: 0.75rem !important; }

/* Het kengetal in de kaart, in plaats van een aparte KPI-rij bovenaan. */
.kental {
  margin: 0.5rem 0 0.1rem;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.kental small { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.kental-accent { color: var(--accent); }
.kental-teal   { color: var(--teal); }
.kental-indigo { color: var(--indigo); }
.kental-amber  { color: var(--amber-ink); }

.dash-actie {
  margin-top: auto;
  padding-top: 0.75rem;
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 700;
}

/* De taxikaart met een geannuleerde vlucht is geen enkele grote link maar een
   blok met losse links (per rit naar de boeking, onderaan naar taxibeheer).
   Die horen in het kaartritme mee te lopen; de kleur draagt de betekenis al,
   de streep hoeft er alleen bij als je erover gaat. */
a.dash-actie,
.dash-kaart a.alert-regel { text-decoration: none; }
a.dash-actie:hover,
.dash-kaart a.alert-regel:hover { text-decoration: underline; }

.dash-chip {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.8rem;
  border-radius: 0.7rem;
}

.dash-chip svg { width: 20px; height: 20px; }
.chip-accent { background: var(--accent-zacht); color: var(--accent); }
.chip-indigo { background: var(--indigo-vlak); color: var(--indigo); }
.chip-teal   { background: var(--teal-zacht); color: var(--teal); }
.chip-amber  { background: var(--amber-zacht); color: var(--amber-ink); }
/* Rood bestaat al als statustint (tint-rood, kaart-rood, alert-urgent); dit
   zijn de dashboard-varianten ervan, voor een kaart die alarm slaat. */
.chip-rood   { background: var(--rood-zacht); color: var(--rood-ink); }
.chip-dof {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.dash-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.badge-accent { background: var(--accent); color: var(--accent-text); }
.badge-amber { background: var(--amber-ink); color: var(--bg-surface); }
.badge-rood { background: var(--rood-ink); color: var(--rood-tekst); }

/* Alertregels in de Alerts-kaart: open in amber, afgerond in teal. */
.alert-regel { display: block; }
.alert-regel + .alert-regel { margin-top: 0.35rem; }
.alert-regel.alert-open { color: var(--amber-ink); }
.alert-regel.alert-afgerond { color: var(--teal); }

/* Gedempte kaarten voor wat er nog aankomt */
.dash-kop {
  margin: 1.9rem 0 0.9rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dash-kaart-dof {
  min-height: 9.5rem;
  background: var(--bg-surface-2);
  border-style: dashed;
  box-shadow: none;
}

.dash-kaart-dof h2 { color: var(--text-secondary); font-size: 0.98rem; }
.dash-kaart-dof p { margin-top: 0.5rem; font-size: 0.82rem; }

.dash-soon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .dash-raster { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .dash-raster { grid-template-columns: 1fr; }
}

/* === Vertalen ========================================================== */

/* Waarschuwing dat dit geen beëdigde vertaling is; amber, geen alarmrood. */
.disclaimer {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--amber-ink);
  border-radius: 0.7rem;
  background: var(--amber-zacht);
  color: var(--text-primary);
  font-size: 0.86rem;
}

.dienst-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border-default);
  border-radius: 0.8rem;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  font-weight: 400;
  resize: vertical;
}

.dienst-form textarea:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

.dienst-form input[disabled] { color: var(--text-muted); cursor: not-allowed; }

.vertaling-resultaat {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.vertaling-resultaat h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }

.vertaling-tekst {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.8rem;
  background: var(--bg-surface-2);
  white-space: pre-wrap;
  font-size: 0.95rem;
}

/* Woningformulier: het schoonmaakblok heeft een keuzelijst en een tekstvak. */
.form-card .veld-groep label { margin-bottom: .75rem; }
.form-card .veld-groep label:last-child { margin-bottom: 0; }

.form-card textarea {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .85rem .95rem;
  border: 1px solid var(--border-default);
  border-radius: .8rem;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  font-weight: 400;
  resize: vertical;
}

.form-card textarea:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

/* Statuspil, gebruikt op het schoonmaakoverzicht en in de schoonmaker-app */
/* Het randje volgt de tint van de pil zelf: elke .tint-* zet zijn kleur al als
   `color`, dus currentColor is die ene bron — geen regel per stand nodig, en
   een nieuwe tint doet vanzelf mee. Nodig sinds de partnerkaart weer getint is:
   een amber pil op een amber vlak was geen pil meer. Zelfde verzachting als bij
   .rit-blok, zodat het een omtrek blijft en geen tweede accent wordt. */
.taak-status {
  flex: 0 0 auto;
  padding: .15rem .55rem;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Statustints, uit dezelfde variabelen als de rest van het dashboard.
   Stoplicht voor de schoonmaakstatus: rood staat open, amber loopt, teal is
   klaar. Indigo blijft voor alles wat geen schoonmaakstatus is. */
.tint-indigo { background: var(--indigo-zacht); color: var(--indigo); }
.tint-amber  { background: var(--amber-zacht); color: var(--amber-ink); }
.tint-teal   { background: var(--teal-zacht);  color: var(--teal); }
.tint-rood   { background: var(--rood-zacht);  color: var(--rood-ink); }
/* Neutraal: "op schema" is geen nieuws, maar wel een stand die je wilt zien. */
.tint-grijs  { background: var(--bg-surface-2); color: var(--text-secondary); }


/* === Schoonmaker-app (mobiel eerst) ==================================== */

.schoonmaak-app { max-width: 34rem; }
.schoonmaak-app .page-head { align-items: center; }
.btn-breed { display: block; width: 100%; text-align: center; }

/* Takenlijst */
.taak-kaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }

.taak-kaart {
  display: grid;
  gap: .45rem;
  padding: 1rem 1.1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 5px solid var(--border-default);
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
}

/* De balk vertelt in één oogopslag hoe de taak ervoor staat; dezelfde kleur
   als de statuspil ernaast. De tint staat in een eigen variabele zodat een
   kaart hem ook ergens anders dan links kan neerzetten. */
.kaart-rood  { --kaart-tint: var(--rood-ink); }
.kaart-amber { --kaart-tint: var(--amber-ink); }
.kaart-teal  { --kaart-tint: var(--teal); }
.kaart-indigo { --kaart-tint: var(--indigo); }
.kaart-rood, .kaart-amber, .kaart-teal, .kaart-indigo {
  border-left-color: var(--kaart-tint);
}

/* De ritkaart draagt zijn tint bovenaan in plaats van links: de linkerbalk
   begint door de hoekafronding pas een centimeter onder de bovenrand, en dat
   is precies waar het oog begint. De schoonmaaktaak doet mee via
   .taak-kaart-top, zodat chauffeur en schoonmaker dezelfde kaart lezen.

   Meer lucht tussen de kaarten en een diepere schaduw: in een lijst moet je
   zien wáár de ene rit ophoudt en de volgende begint. */
/* Kaarten met een streep bovenaan hebben die lucht allebei nodig: anders
   plakt de streep van de volgende kaart tegen de vorige aan. Gescoped op een
   modifier, zodat een gewone .taak-kaarten-lijst zijn krappe gap houdt. */
.taak-kaarten.rit-kaarten,
.taak-kaarten.taak-kaarten-ruim { gap: 1.25rem; }

.taak-kaart.rit-kaart,
.taak-kaart.taak-kaart-top {
  position: relative;
  gap: .75rem;
  padding: 1.15rem 1rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 1.1rem;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .55);
}
/* De streep ligt strak op de bovenrand en volgt dezelfde hoekafronding als de
   kaart. Dezelfde --kaart-tint als het datumveld en de pil eronder. */
.taak-kaart.rit-kaart::before,
.taak-kaart.taak-kaart-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 1.1rem 1.1rem 0 0;
  background: var(--kaart-tint, var(--border-default));
}

/* Het datumveld: tint-vlak met de dag klein erboven en de klok groot. */
.rit-datumveld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .6rem .8rem;
  border: 1px solid color-mix(in srgb, var(--kaart-tint) 32%, transparent);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--kaart-tint) 12%, var(--bg-surface));
}
.rit-dv { display: grid; line-height: 1.1; min-width: 0; }
.rit-dv-datum {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kaart-tint) 75%, var(--text-primary));
}
.rit-dv-tijd {
  margin-top: 1px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.rit-dv-route { margin-top: 2px; font-size: .72rem; color: var(--text-muted); }

/* De pil naast het datumveld draagt dezelfde tint, in dezelfde opmaak als de
   rest van het veld — niet de vaste tint-<kleur> van de takenlijst. */
.rit-kaart .rit-pil {
  align-self: flex-start;
  padding: .28rem .7rem;
  border: 1.5px solid color-mix(in srgb, var(--kaart-tint) 45%, transparent);
  font-size: .76rem;
  font-weight: 800;
  color: var(--kaart-tint);
  background: color-mix(in srgb, var(--kaart-tint) 15%, transparent);
}

.taak-kop { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.taak-kop strong { font-size: 1.05rem; }
.taak-datum { color: var(--text-secondary); font-size: .92rem; }

/* Nog geen tijd afgesproken: wel benoemen, maar rustig. */
.tijd-leeg { color: var(--text-muted); font-style: italic; }

.taak-toegang {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  padding: .5rem .65rem;
  border-radius: .6rem;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: .85rem;
}

.taak-toegang svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: .12rem; }
.taak-kaart form { margin-top: .2rem; }

/* Taakdetail */
.toegang-blok h2, .afgerond-blok h2 { margin: 0 0 .4rem; font-size: 1rem; }
.toegang-blok p { margin: 0; color: var(--text-secondary); }

.taak-opmerking {
  margin: .4rem 0 0;
  padding: .7rem .85rem;
  border-radius: .7rem;
  background: var(--bg-surface-2);
  white-space: pre-wrap;
}

/* Checklist: grote raakvlakken, hele regel is de knop */
.checklist { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .4rem; }
.checklist form { margin: 0; }

.checklist-knop {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .8rem .85rem;
  border: 1px solid var(--border-subtle);
  border-radius: .8rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: .98rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.checklist-knop:hover { border-color: var(--border-default); }

.checklist-knop:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

.vink {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--border-default);
  border-radius: .5rem;
  color: var(--teal);
}

.vink svg { width: 15px; height: 15px; }

.checklist li.gedaan .checklist-knop,
.checklist-vast li.gedaan {
  border-color: var(--teal);
  background: var(--teal-zacht);
}

.checklist li.gedaan .vink { border-color: var(--teal); }
.checklist li.gedaan .checklist-tekst { text-decoration: line-through; color: var(--text-secondary); }

/* Vaste (afgeronde) checklist heeft geen knoppen meer */
.checklist-vast li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem .85rem;
  border: 1px solid var(--border-subtle);
  border-radius: .8rem;
  font-size: .98rem;
}

.checklist-vast li.gedaan { color: var(--text-secondary); }

@media (min-width: 560px) {
  .btn-breed { display: inline-block; width: auto; min-width: 12rem; }
}

/* === Externe partners ================================================== */

.dash-kaart-uit { opacity: .62; }

.categorie-beheer { margin-top: 1.15rem; }

.categorie-lijst { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .4rem; }

.categorie-rij {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .55rem .7rem;
  border: 1px solid var(--border-subtle);
  border-radius: .7rem;
  background: var(--bg-surface);
}

.categorie-rij form { display: flex; align-items: center; gap: .5rem; }
.categorie-rij form:first-child { flex: 1 1 14rem; }

.categorie-rij input[type=text] {
  flex: 1 1 auto;
  min-width: 8rem;
  padding: .5rem .7rem;
  border: 1px solid var(--border-default);
  border-radius: .6rem;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
}

.categorie-rij input[type=text]:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

/* Inactieve partner in de lijst */
.boek-tabel tr.rij-uit td { color: var(--text-muted); }
.boek-tabel tr.rij-uit strong { font-weight: 600; }

/* Partnerformulier: Account en Gegevens onder elkaar, iets breder dan de
   andere formulierkaarten omdat er twee kolommen in staan. */
.partner-form { max-width: 34rem; }
.partner-form .veld-groep { margin-bottom: 1.4rem; }
.partner-form .veld-groep:last-of-type { margin-bottom: .9rem; }

/* === Schoonmaak-beheer ================================================= */

.sectie-kop-rij {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.8rem 0 .7rem;
}

/* Twee knoppen naast elkaar in een sectiekop, op smal scherm onder elkaar. */
.sectie-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sectie-knoppen .btn { display: inline-flex; align-items: center; gap: .4rem; }
.sectie-knoppen svg { width: 1rem; height: 1rem; }

.sectie-kop-tekst h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.sectie-kop-tekst .dash-chip { width: 2.15rem; height: 2.15rem; margin: 0; border-radius: .6rem; }
.sectie-kop-tekst .dash-chip svg { width: 17px; height: 17px; }
.sectie-kop-tekst .muted { margin: 0; font-size: .86rem; max-width: 46rem; }

/* De centrale takenlijst */
.sjabloon-lijst { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .35rem; }

.sjabloon-lijst li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .75rem;
  border: 1px solid var(--border-subtle);
  border-radius: .7rem;
  background: var(--bg-surface);
}

.sjabloon-item { font-size: .95rem; }

.sjabloon-toevoeg, .aanmeld-instelling {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .7rem .8rem;
  border: 1px solid var(--border-subtle);
  border-radius: .7rem;
  background: var(--bg-surface-2);
}

.sjabloon-toevoeg input[type=text] {
  flex: 1 1 16rem;
  padding: .55rem .75rem;
  border: 1px solid var(--border-default);
  border-radius: .6rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
}

.aanmeld-instelling { margin-top: .6rem; }
.aanmeld-instelling label { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }

.aanmeld-instelling input[type=number] {
  width: 4rem;
  padding: .45rem .6rem;
  border: 1px solid var(--border-default);
  border-radius: .6rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
}

.aanmeld-instelling .muted { flex: 1 1 18rem; font-size: .82rem; }

.sjabloon-toevoeg input:focus, .aanmeld-instelling input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

/* Toewijzen in de opdrachtentabel */

/* Op de orderpagina staat er een knop naast de keuzelijst (daar submit hij
   niet vanzelf, want dan zou je per ongeluk loskoppelen). Ze horen op één
   regel te blijven en op een smal scherm netjes door te wikkelen. */
.toewijs-form { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }

.toewijs-form select,
.toewijs-form input[type='time'] {
  padding: .35rem .5rem;
  border: 1px solid var(--border-default);
  border-radius: .5rem;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  font-size: .85rem;
  max-width: 12rem;
}

/* In de opdrachtentabel is de ruimte krap: de select mag niet breder dan de
   namen die erin staan, anders duwt hij de actiekolom uit de kaart. */
.boek-tabel .toewijs-form select { max-width: 150px; width: 150px; }
.boek-tabel .toewijs-form input[type='time'] { max-width: 7.5rem; }

.opdracht-toevoeg { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.opdracht-toevoeg label { display: block; font-weight: 600; color: var(--text-secondary); font-size: .9rem; }
.opdracht-toevoeg input, .opdracht-toevoeg select {
  display: block;
  width: 100%;
  margin-top: .3rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border-default);
  border-radius: .7rem;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  font-weight: 400;
}
.opdracht-toevoeg .veld-rij { margin-bottom: .9rem; }

/* --- Foto's bij een schoonmaakopdracht ---------------------------------- */
/* Vierkante duimnagels in een raster, met als laatste tegel een gestreepte
   "Foto toevoegen"-knop. Het bestandsveld zit in het label verstopt: tikken
   op de tegel opent de camera, zonder een regel JavaScript. */
.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: .6rem;
}

.foto-tegel {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: .8rem;
  overflow: hidden;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
}

.foto-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Duimformaat: op een telefoon moet dit kruisje raak te tikken zijn zonder
   de foto zelf te openen. Vandaar 2.6rem en een duidelijke witte rand. */
.foto-weg {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(15, 20, 25, 0.72);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.foto-weg svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.5; }
.foto-weg:hover, .foto-weg:active { background: var(--danger); }
.foto-weg:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.foto-tegel-leeg {
  display: grid;
  place-items: center;
  gap: .35rem;
  border: 2px dashed var(--border-strong);
  background: var(--accent-zacht);
  color: var(--accent);
  font-weight: 600;
  font-size: .85rem;
  text-align: center;
  cursor: pointer;
}
.foto-tegel-leeg svg { width: 1.6rem; height: 1.6rem; }
.foto-tegel-leeg input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.foto-toevoeg { display: grid; gap: .5rem; align-content: start; }

/* Problemen: amber, want ze vragen aandacht. */
.probleem-lijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.probleem-lijst li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem;
  border-radius: .8rem;
  background: var(--amber-zacht);
  border: 1px solid var(--border-subtle);
}
.probleem-lijst img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: .6rem;
  display: block;
}
.probleem-tekst { flex: 1; min-width: 0; }
.probleem-tekst p { margin: 0; color: var(--amber-ink); font-weight: 600; }
.probleem-tekst .muted { font-size: .8rem; }

.probleem-form { display: grid; gap: .6rem; }
.foto-knop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem;
  border: 2px dashed var(--border-strong);
  border-radius: .8rem;
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
}
.foto-knop svg { width: 1.2rem; height: 1.2rem; }
.foto-knop input[type='file'] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Beheerkant: een strip duimnagels en de meldingen in de opdrachtentabel. */
/* Geen vaste brede kolom meer: zonder foto's kostte die 12rem aan niets. */
.foto-cel { min-width: 7rem; }
.foto-strip { display: inline-flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.foto-strip img {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: .4rem;
  display: block;
}
.probleem-regel {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: .4rem;
  font-size: .85rem;
  color: var(--amber-ink);
}
.probleem-regel img { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: .4rem; }

/* --- Bovenbalk op een telefoon ------------------------------------------ */
/* Op smal scherm past brand + status + begroetdeel + knoppen niet op één
   regel; de balk liep rechts buiten beeld. Hier mag hij vouwen: links en
   rechts krijgen elk hun eigen regel en de bijzaken (● Online, "· rol")
   gaan uit. Alleen binnen deze media-query — desktop blijft zoals hij was. */
@media (max-width: 560px) {
  .app-header {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: .6rem;
    padding: .8rem 1rem;
  }

  /* Elk op een eigen regel, en binnen die regel mag het nog eens vouwen. */
  .header-left,
  .header-right {
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
  }
  .header-right { justify-content: space-between; }

  /* Ruimtevreters die niets toevoegen op een klein scherm. */
  .header-status,
  .user-sep,
  .user-role { display: none; }

  /* De begroeting blijft, maar kleiner en met puntjes in plaats van
     buiten beeld. */
  .user-meta { min-width: 0; flex: 1 1 auto; }
  .greeting {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .9rem;
  }

  /* De scheidingsstreepjes horen bij één doorlopende regel; op eigen
     regels zijn ze alleen maar rommelig. Knoppen houden hun 40px. */
  .header-nav,
  .header-actions {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
  .header-actions { flex: 0 0 auto; }

  /* De merknaam mag krimpen in plaats van de regel oprekken. */
  .brand { min-width: 0; font-size: 1.05rem; }
}

/* Taalkeuze onder de partnerlogin: vóór het inloggen weet de app nog niet
   wie er kijkt, dus kiest de bezoeker zelf. */
.taalkeuze { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; font-size: .85rem; }
.taalkeuze a { color: var(--text-secondary); }
.taalkeuze strong { color: var(--accent); }

/* --- Bezetting in de boekwizard ---------------------------------------- */
/* Subtekst bij een veldlabel, bijv. "(0-17 jr)" achter Kinderen. */
.veld-sub { font-weight: 400; color: var(--text-muted); font-size: .85em; }

/* "Op aanvraag" onder het huisdierenveld: aandacht, geen alarm. */
.veld-hint-amber {
  display: block;
  margin-top: .3rem;
  color: var(--amber-ink);
  font-weight: 600;
  font-size: .8rem;
}

/* "Afgewezen door Feliz · 3 aug" op de order. Amber en klein: de opdracht
   staat gewoon weer open, er is niets kapot — de eigenaar moet alleen weten
   dat het niet vergeten is maar geweigerd. Rood is hier al de STAND van de
   opdracht; dit zinnetje mag daar niet mee gaan concurreren.

   display: block voor het rit-blok (een grid) en flex-basis voor de
   schoonmaakregel (een flex-rij): in allebei krijgt hij zo zijn eigen regel
   in plaats van achter de statuspil aan te schuiven. */
.afgewezen-seintje {
  display: block;
  flex-basis: 100%;
  color: var(--amber-ink);
  font-weight: 600;
  font-size: .8rem;
}

/* --- Persoonlijke login-link in het partnerbeheer ----------------------- */
.link-blok { margin-top: 1.2rem; }
.link-rij { display: flex; gap: .5rem; align-items: center; margin: .6rem 0; }
.link-rij input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .5rem .6rem;
  border: 1px solid var(--border-default);
  border-radius: .6rem;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font: inherit;
  font-size: .85rem;
}
.link-acties { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.link-acties .btn { display: inline-flex; align-items: center; gap: .4rem; }
.link-acties svg { width: 1rem; height: 1rem; }
.rij-actie .btn svg { width: 1rem; height: 1rem; }

/* --- Betalingen bij een order ------------------------------------------ */
.betaal-samenvatting { margin-bottom: 1rem; }
.betaal-samenvatting .bedrag-open { color: var(--rood-ink); }

.betaal-tabel .rij-actie { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.betaal-tabel td { vertical-align: middle; }

.betaal-toevoeg { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.betaal-toevoeg label { display: block; font-weight: 600; color: var(--text-secondary); font-size: .9rem; }
.betaal-toevoeg input, .betaal-toevoeg select {
  display: block;
  width: 100%;
  margin-top: .3rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border-default);
  border-radius: .7rem;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: inherit;
  font-weight: 400;
}

/* --- Reserveringsnummer ------------------------------------------------- */
/* De rode draad door order, overzicht en bevestiging: klein, monospace en
   rustig, zodat hij herkenbaar is zonder de kop te overschreeuwen. */
.reserveringsnummer {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: .4rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.aanvraagnummer { margin: .2rem 0 .6rem; color: var(--text-secondary); }
.aanvraagnummer .reserveringsnummer { font-size: .95rem; }

/* --- WhatsApp-knop ------------------------------------------------------ */
/* Het herkenbare WhatsApp-groen; donkere tekst omdat dat groen te licht is
   voor wit. Werkt in beide thema's, want de kleuren staan vast. */
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: #25d366;
  color: #06331a;
  border: 1px solid #1eb955;
  text-decoration: none;
}
.btn-wa:hover { background: #1eb955; color: #06331a; }
.btn-wa svg { width: 1rem; height: 1rem; }

/* De actiekolom compact houden: knoppen naast elkaar, niet uitgerekt. */
.boek-tabel .rij-actie { display: flex; gap: .35rem; justify-content: flex-end; align-items: center; }
.boek-tabel .rij-actie .btn { white-space: nowrap; }
.boek-tabel .rij-actie form { margin: 0; }

/* Print-knop in de paginakop van een order. */
.page-head .btn svg { width: 1rem; height: 1rem; }
.page-head .btn { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; }

/* --- Vluchtblok bij een transfer-dienst --------------------------------- */
.vluchtblok {
  margin: .5rem 0 .2rem 1.9rem;
  padding: .8rem .9rem;
  border-left: 3px solid var(--indigo);
  border-radius: .6rem;
  background: var(--indigo-zacht);
}
.vluchtblok p { margin: 0 0 .6rem; }
.vluchtblok label { display: block; font-weight: 600; color: var(--text-secondary); font-size: .88rem; }
.vluchtblok input {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .5rem .6rem;
  border: 1px solid var(--border-default);
  border-radius: .6rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-weight: 400;
}
.vluchtblok .veld-rij { margin-bottom: .6rem; }

/* --- Rit bijstellen in de taxitabel ------------------------------------- */
/* <details> als klein uitklapformulier: werkt zonder JavaScript. */
.rit-bewerk summary { list-style: none; cursor: pointer; }
.rit-bewerk summary::-webkit-details-marker { display: none; }
.rit-form {
  display: grid;
  gap: .5rem;
  margin-top: .5rem;
  padding: .7rem;
  min-width: 15rem;
  border: 1px solid var(--border-subtle);
  border-radius: .7rem;
  background: var(--bg-surface-2);
  text-align: left;
}
.rit-form label { display: block; font-weight: 600; color: var(--text-secondary); font-size: .8rem; }
.rit-form input {
  display: block;
  width: 100%;
  margin-top: .2rem;
  padding: .4rem .5rem;
  border: 1px solid var(--border-default);
  border-radius: .5rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: .85rem;
  font-weight: 400;
}
.rit-form .veld-duo { display: flex; gap: .5rem; }
.rit-form .veld-duo label { flex: 1 1 0; min-width: 0; }

/* Zwaarste alertregel: rood, zoals een rit die nog geen chauffeur heeft. */
.alert-regel.alert-urgent { color: var(--rood-ink); font-weight: 600; }

/* De transfer-uitklapper op de orderpagina mag wat breder dan in een tabelcel. */
.transfer-toevoeg { margin-top: 1rem; }
.transfer-toevoeg .rit-form { min-width: 0; max-width: 28rem; }
.transfer-toevoeg .rit-form select {
  display: block;
  width: 100%;
  margin-top: .2rem;
  padding: .4rem .5rem;
  border: 1px solid var(--border-default);
  border-radius: .5rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: .85rem;
}

/* === Stoplicht: één kleurtaal voor de hele order ======================= */

/* Elk stoplicht-vlak draagt de statuskleur zélf: zachte achtergrond, een
   gekleurde linkerrand en gekleurde tekst. Eén set variabelen, zodat de
   statusbalk en de partnerkaarten gegarandeerd dezelfde kleur spreken. */
.stoplicht-rood   { --stoplicht: var(--rood-ink);  --stoplicht-vlak: var(--rood-zacht); }
.stoplicht-amber  { --stoplicht: var(--amber-ink); --stoplicht-vlak: var(--amber-zacht); }
.stoplicht-teal   { --stoplicht: var(--teal);      --stoplicht-vlak: var(--teal-zacht); }
/* Neutraal: er valt niets af te rekenen, dus geen stoplicht maar rust. */
.stoplicht-indigo { --stoplicht: var(--indigo);    --stoplicht-vlak: var(--indigo-vlak); }
.stoplicht-grijs  { --stoplicht: var(--border-strong); --stoplicht-vlak: var(--bg-surface-2); }

/* === Statusbalk bovenaan de order ===================================== */

.statusbalk {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .7rem;
}

.statusbalk-kaart {
  display: grid;
  gap: .15rem;
  padding: .8rem .95rem;
  background: var(--stoplicht-vlak, var(--bg-surface));
  border: 1px solid var(--border-subtle);
  border-left: 5px solid var(--stoplicht, var(--border-default));
  border-radius: .8rem;
}

/* Klein label boven, de stand groot en in de kleur eronder, dan de toelichting. */
.statusbalk-label {
  color: var(--text-secondary);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.statusbalk-waarde {
  color: var(--stoplicht, var(--text-primary));
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.statusbalk-sub { color: var(--text-secondary); font-size: .84rem; }

/* Wat de kleuren betekenen; klein, want na één keer lezen weet je het. */
.stoplicht-legenda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: 0 0 1.1rem;
  color: var(--text-muted);
  font-size: .78rem;
}

.legenda-punt {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  margin-right: .1rem;
  border-radius: 999px;
  background: var(--stoplicht);
}

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

/* === Startpagina: de aankomende orders ================================ */

/* Een agenda, geen tabel: per maand een opschrift, daaronder één regel per
   bezoek. De regel is helemaal klikbaar — je gaat hier altijd naar de order,
   dus een los linkje zou alleen maar mikwerk zijn. */
.order-maand {
  /* Zelfde breedte als de lijst eronder: een kop die links van zijn eigen
     regels begint, leest als een fout. */
  max-width: 900px;
  margin: 1.4rem auto .5rem;
  color: var(--indigo);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.order-maand:first-of-type { margin-top: .4rem; }

/* Een leesregel, geen tabel: voorbij een centimeter of twintig kost het je
   een oogbeweging om van de naam naar de status te komen. */
.order-lijst {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: .5rem;
  max-width: 900px;
}

.order-regel {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem .9rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: .8rem;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
}
.order-regel:hover { border-color: var(--border-strong); background: var(--bg-hover); }

/* Zolang de order niet bevestigd is kleurt de hele kaart rood. Dat is de stand
   waar iemand achteraan moet; wit betekent "rond". */
.order-regel.onbevestigd { background: var(--rood-zacht); border-color: var(--rood-rand); }

/* De order-alert: de gast komt bijna en er staat nog iets open. Uit de mock
   (variant B) — rode randpuls plus een heel lichte rode tint die mee in- en
   uitademt. Rustig op tempo gehouden: 2.4s, zodat het opvalt zonder dat je
   ernaast kunt werken.

   Het rood komt uit --rood-ink, het bestaande statustoken, en niet uit een
   eigen hex. Dat scheelt een kleur die in het donkere thema niet meedraait:
   daar is --rood-ink juist licht, en de gloed blijft leesbaar. Vandaar ook
   color-mix in plaats van rgba(): een vaste rgba kent de themawaarde niet. */
.order-regel.order-alert {
  border-color: var(--rood-ink);
  animation: pulsDuidelijk 2.4s ease-in-out infinite;
}
@keyframes pulsDuidelijk {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--rood-ink) 10%, transparent),
                var(--shadow-sm);
    background: var(--bg-surface);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--rood-ink) 20%, transparent),
                var(--shadow-sm);
    background: color-mix(in srgb, var(--rood-ink) 7%, var(--bg-surface));
  }
}

/* Het label zegt wát er aan de hand is; de puls trekt alleen de aandacht. */
.alert-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: .72rem;
  font-weight: 800;
  color: var(--rood-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.alert-label .stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rood-ink);
  animation: knipperStip 1.3s ease-in-out infinite;
}
@keyframes knipperStip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Staat "verminder beweging" aan, dan blijft de boodschap staan maar beweegt
   er niets: een vaste rode ring en dezelfde lichte tint. */
@media (prefers-reduced-motion: reduce) {
  .order-regel.order-alert {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rood-ink) 16%, transparent),
                var(--shadow-sm);
    background: color-mix(in srgb, var(--rood-ink) 7%, var(--bg-surface));
  }
  .alert-label .stip { animation: none; }
}
.order-regel.onbevestigd:hover { background: var(--rood-hoverbg); border-color: var(--rood-ink); }

/* Het datumblokje: de dag groot, maand en jaar klein eronder. Vaste breedte,
   zodat de namen eronder allemaal op dezelfde lijn beginnen. */
.order-datum {
  display: grid;
  justify-items: center;
  flex: 0 0 auto;
  width: 3.1rem;
  padding: .3rem 0;
  border-radius: .6rem;
  background: var(--bg-surface-2);
  line-height: 1.1;
}
/* Op de rode kaart valt --bg-surface-2 juist op als een grijze vlek; een rode
   zweem houdt het blokje onderdeel van de kaart. */
.onbevestigd .order-datum { background: rgba(185, 28, 28, 0.12); }
.order-datum strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.order-datum span {
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.order-datum small { color: var(--text-muted); font-size: .66rem; }

/* Alleen zijn eigen breedte: wat de naam overlaat is voor de tegelrij. Wel een
   bodem, anders knijpt een order met veel tegels de naamkolom zo ver dicht dat
   "· 7 nachten" naar een tweede regel valt. Boven die bodem krijgen de tegels
   nog steeds alles wat vrij is.

   17rem en niet 16: bij 16 wrapte een woningnaam als "Villa Los Naranjos" nog.
   Hoger dan dit kost een derde tegelrij, en dan ruil je één tekstregel in voor
   een hele rij — een heel lange naam wrapt dus liever. */
.order-mid { display: grid; gap: .1rem; min-width: 17rem; flex: 0 1 auto; }
.order-naam { font-size: 1rem; font-weight: 600; }
/* Het reserveringsnummer hoort bij de naam: samen zeggen ze wélke order dit
   is. Zwaarder dan de naam mag het niet worden, dus alleen gedempt en vet. */
.order-nummer { color: var(--text-secondary); font-weight: 700; }
.order-mid small { color: var(--text-muted); font-size: .82rem; }

/* De dienst-tegels, rechts naast de ordergegevens. Even grote vierkantjes met
   icoon + label, en een tijdregel die alleen de taxi vult. Gelijke maat is het
   punt: dan lees je de rij als één strook en springt de afwijkende tint eruit,
   niet de afwijkende vorm. Wrapt naar een tweede rij als er veel diensten zijn. */
/* De tegelrij krijgt de vrije breedte van de kaart. Hij stond op een vaste
   300px en groeide niet mee: een order met elf diensten viel daardoor in drie
   smalle rijtjes rechts, terwijl de halve kaart leeg bleef. Nu vullen de
   tegels de ruimte die de naam overlaat en wrappen ze naar zo min mogelijk
   rijen. flex-end blijft: ze houden hun rechterkant tegen de statuspil, dus
   een order met twee diensten ziet er precies zo uit als hiervoor. */
.diensten {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
}
.tegel {
  width: 3.15rem;
  height: 3.15rem;
  border-radius: .6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: .2rem 0;
}
.tegel svg { width: 16px; height: 16px; }
/* Een lange categorienaam ("Zwembad-onderhoud") mag de tegel niet oprekken;
   de volledige naam staat in het title-attribuut. */
.tegel .lab {
  max-width: 100%;
  padding: 0 .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .58rem;
  font-weight: 800;
  line-height: 1.05;
}
.tegel .tijd { font-size: .56rem; font-weight: 700; line-height: 1; opacity: .9; }

/* De tinten komen uit de stoplichtbalk op de order: rood = moet nog gebeuren,
   amber = loopt, teal = rond, indigo = niet van toepassing. */
.di-rood { background: var(--rood-zacht); color: var(--rood-ink); }
.di-amber { background: var(--amber-zacht); color: var(--amber-ink); }
.di-indigo { background: var(--indigo-zacht); color: var(--indigo); }
.di-teal { background: var(--teal-zacht); color: var(--teal); }
/* Op de rode kaart ligt --teal-zacht te dicht bij de achtergrond; een tint
   dieper houdt de tegel leesbaar zonder de teal-betekenis te verliezen. */
.onbevestigd .tegel.di-teal { background: #d8efec; }
html[data-theme='dark'] .onbevestigd .tegel.di-teal { background: #123734; }

.order-status { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.order-status .boek-status { white-space: nowrap; }
.order-chevron { width: 18px; height: 18px; color: var(--text-muted); }

@media (max-width: 560px) {
  /* Op een telefoon wint de naam; de statuspil zakt onder de regel mee. */
  .order-regel { flex-wrap: wrap; }
  .order-status { margin-left: auto; }
}

/* === Partnerkaarten op de order ======================================= */

/* Eén kaart per partner-onderdeel, in dezelfde stoplichttinten als de
   statusbalk erboven: de balk is de samenvatting, de kaart het detail. */
.partnerkaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

/* Elke partnerkaart draagt zijn eigen stand, met hetzelfde recept als
   .statusbalk-kaart en .rit-blok: zacht gekleurd vlak plus een gekleurde
   linkerrand. Dat gaat via de stoplicht-variabelen, dus een nieuwe categorie
   kleurt vanzelf mee — daar is geen regel per soort partner voor nodig. */
.partnerkaart {
  position: relative;
  display: grid;
  gap: .45rem;
  padding: 1rem;
  background: var(--stoplicht-vlak, var(--bg-surface));
  border: 1px solid var(--border-subtle);
  border-left: 5px solid var(--stoplicht, var(--border-default));
  border-radius: .9rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* De kop van de sectie: een opschrift, geen titel. Klein, indigo en in
   hoofdletters, zodat hij de kaarten eronder aankondigt in plaats van ermee te
   concurreren. Alleen deze sectie — de andere blokken houden hun gewone h2. */
.partnersectie > .tile-head h2 {
  color: var(--indigo);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Eén uitzondering: een kaart met gekleurde inhoud houdt zelf een rustig vlak.
   De transferkaart heeft per rit een eigen tint; een getinte kaart eromheen
   maakte daar één groot roze vlak van waarin die ritten juist wegvielen.
   Het accent verhuist naar een balk bovenlangs: dat leest als een dakje boven
   de kaart in plaats van als een streep náást de ritten, die er zelf al een
   hebben. */
/* De bovenbalk in plaats van de linkerrand. Het zachte statusvlak van
   .partnerkaart blijft staan: de kaart hoort zijn stand te dragen, en dat gaat
   generiek via stoplicht-{tint} — een nieuwe categorie kleurt vanzelf mee. */
.partnerkaart-neutraal {
  border-left: 1px solid var(--border-subtle);
  border-top: 4px solid var(--stoplicht, var(--border-default));
}

/* Het icoon in een gevuld vierkantje in de standkleur: samen met de bovenbalk
   is dat waar je de stand het eerst ziet, ook al is het kaartvlak zelf maar
   zacht getint.

   De glyph krijgt de PAGINAKLEUR en niet hard wit: in het donkere thema zijn
   de standkleuren juist licht, en wit op lichtroze is niet te lezen. In het
   lichte thema komt dat op wit uit — precies wat het moet zijn. */
.partnerkaart-neutraal .partnerkaart-icoon {
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  background: var(--stoplicht, var(--text-secondary));
  color: var(--bg-surface);
}

/* "PARTNER · TAXI": een kaartje, geen zin. */
.partnerkaart-neutraal .partnerkaart-namen small {
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* De statusladder onderaan de kaart: welke standen er zijn, in dezelfde
   woorden en kleuren als de ritten erboven. Chips die doorwikkelen; op een
   smal scherm zakken ze onder elkaar zonder de kaart op te rekken. */
.ritladder {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin: .7rem 0 0;
  padding: .6rem 0 0;
  border-top: 1px dashed var(--border-default);
  font-size: .74rem;
}
.ritladder li { display: inline-flex; align-items: center; gap: .35rem; }
.ritladder-punt {
  width: .6rem;
  height: .6rem;
  flex: 0 0 auto;
  border-radius: .18rem;
  background: var(--stoplicht, var(--border-default));
}
.ritladder strong { color: var(--stoplicht, var(--text-primary)); font-weight: 700; }
.ritladder-uitleg { color: var(--text-muted); }

/* Accentbalk over de volle breedte bovenaan, in de statuskleur. De
   partnerkaarten hebben hem niet meer nodig — die dragen de kleur nu zelf —
   maar de Vlucht-tegel gebruikt hem nog wel. */
.partnerkaart-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--stoplicht, var(--border-default));
}

.partnerkaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .2rem;
}

.partnerkaart-titel { display: flex; align-items: center; gap: .6rem; }

.partnerkaart-namen { display: grid; gap: .05rem; }
.partnerkaart-namen strong { font-size: 1rem; }
.partnerkaart-namen small { color: var(--text-muted); font-size: .76rem; }

/* Het icoon in een licht afgerond vierkant, met de glyph in de statuskleur.
   Het vlak eronder is nu zelf getint, dus een getint vierkant zou daarin
   wegvallen — vandaar juist licht. Geldt ook op de Vlucht-tegel. */
.partnerkaart-icoon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .6rem;
  background: var(--bg-surface);
  color: var(--stoplicht, var(--text-secondary));
}

.partnerkaart-icoon svg { width: 18px; height: 18px; }
.partnerkaart-sub { color: var(--text-secondary); font-size: .88rem; }

.partnerkaart-regels { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.partnerkaart-regels li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .92rem;
}

/* De actie-rij onderaan de kaart: appen links, doorklikken rechts. Wikkelt op
   een smal scherm door in plaats van de knop plat te drukken. */
.partnerkaart-acties {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  margin-top: .15rem;
}
.partnerkaart-acties .partnerkaart-link { margin-left: auto; }
/* De hint staat op de plek van de knop en moet daar niet als link opvallen. */
.partnerkaart-acties .veld-hint-amber { margin-top: 0; text-decoration: none; }
.partnerkaart-acties .veld-hint-amber:hover { text-decoration: underline; }

.partnerkaart-link {
  justify-self: start;
  color: var(--accent);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}
.partnerkaart-link:hover { text-decoration: underline; }

/* Er zit nog geen beheer achter deze categorie; de link is er alvast, maar
   gaat nergens heen. Uitgegrijsd in plaats van verstopt, zodat zichtbaar is
   dat hier nog iets moet komen. */
.partnerkaart-link-uit {
  color: var(--text-muted);
  cursor: not-allowed;
  text-decoration: none;
}
.partnerkaart-link-uit:hover { text-decoration: none; }

/* --- Kopbalk van de chauffeur-app -------------------------------------- */
/* Alleen op "Mijn ritten". Een chauffeur staat hiermee buiten op straat: het
   merk als merk in plaats van een embleem-chipje, de twee acties als iconen,
   en meteen daaronder waar hij als eerste moet zijn. De rest van de app houdt
   .app-header. */
.rit-kop {
  padding: .85rem 1.4rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.rit-kop > * { width: min(100%, 34rem); margin-inline: auto; }
.rit-kop-boven {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .8rem;
}

/* De wordmark: naam in serif met veel letterruimte, tagline eronder in het
   goud van de merkkleur. Navy op licht, cream op donker — hetzelfde paar als
   op de beslis-kaart. */
.rit-merk {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
  text-decoration: none;
  font-family: Georgia, 'Times New Roman', serif;
}
.rit-merk-naam {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--merk-ink);
}
.rit-merk-tag {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: .5rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--merk-tag);
}

.rit-kop-acties { display: flex; flex: 0 0 auto; gap: .5rem; }
.rit-ico-knop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--border-subtle);
  border-radius: .7rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}
.rit-ico-knop:hover { background: var(--bg-hover); }
.rit-ico-knop svg { width: 18px; height: 18px; }

.rit-kop-titel { margin: 0; font-size: 1.45rem; font-weight: 800; }
.rit-kop-groet { margin: .05rem 0 0; color: var(--text-muted); font-size: .8rem; }

/* Waar moet je als eerste zijn: de enige regel op deze pagina die kleur
   draagt zonder een status te zijn. Staat er niets op de rol, dan laat de
   template de strip weg. */
.rit-ophaalstrip {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .8rem;
  padding: .7rem .85rem;
  border-radius: .9rem;
  background: linear-gradient(180deg, var(--indigo-licht), var(--indigo-donker));
  color: var(--indigo-tekst);
}
.rit-ophaal-icoon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .6rem;
  background: color-mix(in srgb, var(--indigo-tekst) 16%, transparent);
}
.rit-ophaal-icoon svg { width: 19px; height: 19px; }
.rit-ophaal-tekst { display: grid; gap: 1px; min-width: 0; }
.rit-ophaal-label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}
.rit-ophaal-datum { font-weight: 800; }
.rit-ophaal-tijd {
  margin-left: auto;
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* "tijd nog invullen" staat op de plek van de klok, maar het is geen klok:
   drie woorden in dat formaat zouden de strip uit elkaar duwen en zich
   voordoen als een tijdstip. Klein en gedempt, rechts uitgelijnd. */
.rit-ophaal-tijd-leeg {
  max-width: 7.5rem;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: right;
  opacity: .8;
}

/* --- Ritkaart in de chauffeur-app -------------------------------------- */
/* De live vluchtstand als banner bovenaan: dat is waar een chauffeur op
   stuurt, dus die krijgt de ruimte. Kleur komt van de stoplicht-variabele. */
.rit-banner {
  display: grid;
  gap: .1rem;
  padding: .7rem .85rem;
  border-radius: .7rem;
  border: 1px solid color-mix(in srgb, var(--stoplicht) 42%, var(--border-subtle));
  border-left: 4px solid var(--stoplicht, var(--border-default));
  background: color-mix(in srgb, var(--stoplicht) 10%, var(--bg-surface));
}

/* De statusbalk zit vlak tegen de bovenrand van de banner: hij trekt de
   padding van de banner terug en volgt de ronding van de hoeken. Eigen rand
   heeft hij niet — die van de banner is er al. */
.rit-banner .vluchtbalk {
  margin: -.7rem -.85rem .5rem;
  border-radius: .6rem .6rem 0 0;
}

/* De drie stappen: bol met nummer, label eronder, lijn ertussen. Wat af is
   wordt groen met een vinkje, waar je nu staat is indigo met een ring, en wat
   nog moet komen blijft een lege omtrek. */
.rit-stappen {
  display: flex;
  align-items: flex-start;
  margin: .15rem 0 .1rem;
}
.rit-stap {
  display: grid;
  justify-items: center;
  gap: .3rem;
  flex: 0 0 auto;
  width: 4.8rem;
}
.rit-bol {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rit-bol svg { width: 13px; height: 13px; }
.rit-stap-label {
  font-size: .66rem;
  line-height: 1.15;
  text-align: center;
  color: var(--text-muted);
}
.rit-stap-klaar .rit-bol {
  background: var(--success);
  border-color: var(--success);
  color: var(--success-tekst);
}
.rit-stap-nu .rit-bol {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--indigo-tekst);
  box-shadow: 0 0 0 4px var(--indigo-zacht);
}
.rit-stap-nu .rit-stap-label { color: var(--indigo); font-weight: 700; }
/* De lijn ligt op de hoogte van de bollen, niet van de labels. */
.rit-lijn {
  flex: 1 1 auto;
  height: 2px;
  margin-top: .85rem;
  background: var(--border-default);
}
.rit-lijn-klaar { background: var(--success); }

/* De twee grote knoppen op de ritkaart: de statusknop en de App-knop. Een
   duim mikt op een telefoon, dus ze zijn minstens 54px hoog, en ze zakken
   zichtbaar in bij het tikken — anders weet je op een trage verbinding niet
   of je raak hebt getikt. De gelaagde schaduw met een lichtrandje bovenin
   tilt ze van de kaart af.

   Alleen hier: dezelfde .btn-wa staat in het beheer als klein knopje in een
   tabelrij, en die moet klein blijven. */
.rit-knop,
.rit-kaart .btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 54px;
  padding: 0 1.1rem;
  border: none;
  border-radius: 16px;
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: .01em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease,
              filter .18s ease;
}
.rit-knop svg,
.rit-kaart .btn-wa svg { width: 20px; height: 20px; flex: 0 0 auto; }

.rit-knop:hover,
.rit-kaart .btn-wa:hover { filter: brightness(1.04); }

/* De tik-indruk: de knop zakt in en zijn schaduw krimpt mee. */
.rit-knop:active,
.rit-kaart .btn-wa:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset,
              0 3px 8px -4px rgba(0, 0, 0, .3);
}

.rit-knop:focus-visible,
.rit-kaart .btn-wa:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--knop-ring, var(--indigo)) 55%, transparent);
  outline-offset: 2px;
}

/* Staat "verminder beweging" aan, dan geen overgangen. */
@media (prefers-reduced-motion: reduce) {
  .rit-knop,
  .rit-kaart .btn-wa { transition: none; }
}

/* De statusknop zet de rit een stap verder: indigo. Rood zou hier een
   waarschuwing suggereren die er niet is. */
.rit-knop {
  --knop-ring: var(--indigo);
  background: linear-gradient(180deg, var(--indigo-licht), var(--indigo-donker));
  color: var(--indigo-tekst);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset,
              0 8px 20px -6px color-mix(in srgb, var(--indigo) 70%, transparent),
              0 2px 4px rgba(0, 0, 0, .18);
}

/* De App-knop houdt het WhatsApp-groen; alleen het verloop en de schaduw
   komen erbij. Kleuren staan vast, dus geen thema-varianten. */
.rit-kaart .btn-wa {
  --knop-ring: #25d366;
  background: linear-gradient(180deg, #2ee06f, #1eb35a);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset,
              0 8px 20px -6px rgba(37, 211, 102, .6),
              0 2px 4px rgba(0, 0, 0, .18);
}
.rit-kaart .btn-wa:hover { background: linear-gradient(180deg, #2ee06f, #1eb35a); }

/* Van / Naar, met het adres van de woning eronder. Het blok is de route in
   twee regels; de streep ertussen maakt er één reis van. */
.rit-route {
  position: relative;
  display: grid;
  gap: .7rem;
  padding: .85rem .9rem;
  border: 1px solid var(--border-subtle);
  border-radius: .9rem;
  background: var(--bg-surface-2);
}
.rit-reis-rij { position: relative; display: flex; align-items: flex-start; gap: .7rem; }
/* Verbindt de twee iconen tot één reis. Hangt aan de rij en niet aan het
   icoon, zodat hij meegroeit als het adres over twee regels loopt. */
.rit-reis-rij:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1rem;
  top: 2.3rem;
  bottom: -.75rem;
  width: 2px;
  transform: translateX(-50%);
  background: var(--border-default);
}
.rit-reis-icoon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .6rem;
}
.rit-reis-icoon svg { width: 17px; height: 17px; }
/* Vertrek in indigo, aankomst in teal: dezelfde twee kleuren als de tracker
   en de kaartlink eronder. */
.rit-reis-van { background: var(--indigo-zacht); color: var(--indigo); }
.rit-reis-naar { background: var(--teal-zacht); color: var(--teal); }
.rit-reis-tekst { display: grid; gap: 1px; min-width: 0; }
.rit-reis-label {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rit-reis-waarde { font-size: 1rem; font-weight: 800; }
.rit-reis-waarde small { color: var(--text-muted); font-weight: 600; font-size: .78rem; }
.rit-reis-adres { color: var(--text-secondary); font-size: .82rem; line-height: 1.3; }

/* De kop ván de banner: vluchtnummer links, stand rechts. */
.rit-banner-kop {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .3rem;
}
.rit-banner-icoon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  background: var(--bg-surface);
  color: var(--stoplicht, var(--text-secondary));
}
.rit-banner-icoon svg { width: 16px; height: 16px; }
.rit-banner-namen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  min-width: 0;
}
.rit-banner-namen strong { font-size: .95rem; }

/* Hoe vers de stand is, met de ververs-knop ernaast. Rustig: het is een
   voetnoot bij de tijd erboven, geen actie die aandacht vraagt. */
.rit-vers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border-subtle);
}
.rit-vers-tekst { color: var(--text-muted); font-size: .8rem; }

/* De laatste controle bracht nieuws. Dat is het enige geval waarin deze regel
   aandacht mag vragen; de rest van de tijd is "gekeken, niets veranderd" juist
   een rustige mededeling. */
.rit-vers-nieuws { color: var(--amber-ink); font-weight: 700; }

/* "Vlucht verwijderen": een link-achtige knop, geen vlak. Hij moet vindbaar
   zijn maar niet meedingen met Ververs ernaast. */
.vlucht-tegel-weg { margin: .35rem 0 0; justify-self: start; text-align: left; }
.knop-als-tekst {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.knop-als-tekst:hover { color: var(--danger); text-decoration: underline; }
/* De Ververs-knop zit in een mini-form (POST, geen herlaad-link); dat form
   mag de rij niet uit elkaar duwen. */
.rit-vers form { margin: 0; }
.vlucht-tegel .rit-vers { margin-top: .6rem; }

.rit-banner-groot {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--stoplicht, var(--text-primary));
  font-variant-numeric: tabular-nums;
}
.rit-banner-vervallen { font-size: 1.4rem; }
.rit-banner-label { font-size: .85rem; font-weight: 600; color: var(--text-secondary); }
.rit-banner-detail { font-size: .82rem; color: var(--text-muted); }

/* Gelabelde velden eronder: het labeltje klein en rustig boven de waarde, zodat
   een chauffeur op één blik ziet wat waar staat. */
.rit-veld { display: grid; gap: .1rem; }
.rit-veld > small {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rit-veld .taak-toegang { margin: 0; }
/* De klantnaam is waar een chauffeur naar zoekt als hij aankomt. */
.rit-veld-groot { font-size: 1.05rem; font-weight: 700; }

/* --- Vlucht-tegel in de rechterkolom van de order ----------------------- */
/* De live vluchtstand groot en in kleur: de tijd is het nieuws, de rest is
   toelichting.

   De stand zit in een SOLIDE balk bovenaan, niet in een pil tussen de tekst.
   Dat scheelt zoeken: kleur en woord staan op de plek waar het oog begint. De
   body eronder blijft rustig wit — de balk draagt de kleur, dus een wash over
   de hele tegel zou er alleen tegenin praten. */
.vlucht-tegel {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-color: color-mix(in srgb, var(--stoplicht) 42%, var(--border-subtle));
}

/* De body draagt de padding die de tegel zelf kwijt is, zodat de balk tot
   tegen de rand loopt. */
.vlucht-tegel-body {
  display: grid;
  gap: .15rem;
  padding: 1rem 1.2rem 1.2rem;
}

/* De statusbalk. Fase links (icoon + woord), chip rechts. Solide standkleur
   met de paginakleur als tekst: dat is hetzelfde recept als .badge-amber en
   het klapt vanzelf om in het donkere thema, waar de standkleuren juist licht
   zijn. */
.vluchtbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  padding: .6rem .9rem;
  background: var(--vluchtbalk, var(--text-secondary));
  color: var(--bg-surface);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
}

.vluchtbalk-wat { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.vluchtbalk-icoon { display: inline-grid; place-items: center; flex: 0 0 auto; }
.vluchtbalk-icoon svg { width: 17px; height: 17px; display: block; }

/* Het pilletje met de vertraging: een wash van de báltekst zelf, dus het
   werkt op elke standkleur zonder een eigen kleur te kiezen. */
.vluchtbalk-chip {
  flex: 0 0 auto;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 22%, transparent);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* De standkleuren van de balk. Allemaal bestaande statusvariabelen: donker in
   het lichte thema, licht in het donkere — precies andersom als --bg-surface,
   dus het contrast blijft staan zonder een tweede set kleuren.
   Grijs pakt --text-secondary en niet --border-strong: die randkleur is te
   bleek om witte tekst op te zetten. */
.vluchtbalk-grijs  { --vluchtbalk: var(--text-secondary); }
.vluchtbalk-indigo { --vluchtbalk: var(--indigo); }
.vluchtbalk-amber  { --vluchtbalk: var(--amber-ink); }
.vluchtbalk-teal   { --vluchtbalk: var(--teal); }
.vluchtbalk-rood   { --vluchtbalk: var(--rood-ink); }

/* De rechterkolom is smal; laat de statuspil liever doorwikkelen dan de
   vluchtnaam over twee regels te breken. */
.vlucht-tegel-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  margin-bottom: .35rem;
}
.vlucht-tegel-kop .taak-status { white-space: nowrap; }
.vlucht-tegel-wie { display: flex; align-items: center; gap: .6rem; min-width: 0; }

/* De tijd is het antwoord op de vraag waarvoor je hier komt, dus die krijgt
   het accent — altijd hetzelfde teal, ook bij een amber of grijze balk. De
   stand staat al in de balk; twee dingen tegelijk in kleur laten schreeuwen
   maakt geen van beide duidelijker. */
.vlucht-tegel-groot {
  margin-top: .5rem;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
/* "Rit vervallen" is geen tijd maar een streep door de rit; die hoort rood en
   mag wat kleiner, zodat hij niet gaat schreeuwen naast een klok van vier
   cijfers. */
.vlucht-tegel-vervallen { font-size: 1.35rem; color: var(--rood-ink); }

.vlucht-tegel-label {
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 600;
}
.vlucht-tegel-detail { color: var(--text-muted); font-size: .82rem; }

/* De datum in de subregel onderscheidt twee tegels met hetzelfde vluchtnummer.
   Dat is het enige verschil tussen die twee, dus hij mag zwaarder wegen dan het
   woord ervoor: zelfde regel, maar donkerder en vet. */
.vlucht-tegel-datum { color: var(--text-secondary); font-weight: 700; }

/* --- Rit-blokken in de transferkaart ----------------------------------- */
/* Eén rit is één opdracht: een eigen blok in de stand van díe rit. Zelfde
   recept als .statusbalk-kaart — zacht gekleurd vlak plus een gekleurde
   linkerrand — zodat een rit zonder chauffeur net zo rood oogt als de tegel
   erboven en de vluchttegel ernaast. */
.rit-blokken { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

/* Het rit-blok ligt op de transferkaart, en die draagt sinds kort weer zijn
   eigen standkleur. Een amber blok op een amber kaart is één vlak, dus het
   randje volgt de stand in plaats van de grijze standaardlijn: net genoeg
   contrast om het blok los te laten liggen, zonder een tweede accent naast de
   dikke linkerrand. */
.rit-blok {
  display: grid;
  gap: .45rem;
  padding: .7rem .85rem;
  background: var(--stoplicht-vlak, var(--bg-surface-2));
  border: 1px solid var(--border-subtle);
  border-color: color-mix(in srgb, var(--stoplicht, var(--border-default)) 45%, transparent);
  border-left: 5px solid var(--stoplicht, var(--border-default));
  border-radius: .6rem;
  /* Na een toewijzing springt de browser terug naar deze kaart via zijn id.
     Zonder marge plakt hij tegen de bovenrand van het scherm; met deze ruimte
     zie je hem staan mét de kop van zijn blok erboven. */
  scroll-margin-top: 6rem;
}

/* Gereden werk mag naar de achtergrond; het blijft leesbaar, maar het vraagt
   geen aandacht meer. */
.rit-blok-af { opacity: .62; }

/* De richting, de stand en het tijdstip op één regel: "Ophalen — Status: Op de
   luchthaven ............ 1 aug 2026 12:20". Wikkelt door op een smal scherm in
   plaats van de tekst plat te drukken.

   Het icoonvierkant vóór de titel is eruit: elke rit in dit blok ís een vlucht,
   dus het onderscheidde niets en duwde alle tekst een halve centimeter naar
   binnen. De tekst begint nu gewoon links. */
.rit-blok-titel { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.rit-blok-titel strong { font-size: 1.05rem; }

/* Wanneer de rit is: rechts op dezelfde regel, want dat is de tweede vraag na
   "wat staat er te gebeuren". Stond eronder, waar hij de titel opbrak. */
.rit-blok-wanneer {
  margin-left: auto;
  color: var(--text-muted);
  font-size: .78rem;
  white-space: nowrap;
}

/* De stand zelf draagt de kleur; het woord "Status:" ervoor blijft rustig,
   dat is alleen een wegwijzer. */
.rit-blok-status { font-size: .95rem; font-weight: 700; }
.rit-blok-status .lbl { color: var(--text-muted); font-weight: 600; }
.rit-status-rood   { color: var(--rood-ink); }
.rit-status-amber  { color: var(--amber-ink); }
.rit-status-teal   { color: var(--teal); }
.rit-status-indigo { color: var(--indigo); }

/* Vlucht, luchthaven en pax horen op één regel. ".blok .muted" hierboven zet
   ze op block; binnen een rit-blok moeten ze gewoon meelopen in de zin. */
.rit-blok-feiten { font-size: .88rem; }
.rit-blok-feiten .muted { display: inline; margin: 0; }

/* De actie-rij van een rit: toewijzen, bijstellen en appen naast elkaar, en
   op een smal scherm netjes onder elkaar. */
.rit-blok-acties {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  /* Een dunne streeplijn scheidt het lezen van het doen. Gestreept en niet
     doorgetrokken: het is een vouw in dezelfde kaart, geen nieuw blok. */
  margin-top: .35rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--border-default);
}
.rit-blok-acties form { margin: 0; }
.rit-blok-acties .toewijs-form { display: flex; gap: .35rem; align-items: center; }
.rit-blok-acties .veld-hint-amber { margin-top: 0; text-decoration: none; }
.rit-blok-acties .veld-hint-amber:hover { text-decoration: underline; }

/* Er is nog geen chauffeur, dus ook niemand om te appen. Rustig grijs: dit is
   een volgorde-aanwijzing, geen probleem. */
.rit-blok-hint { color: var(--text-muted); font-size: .8rem; }

/* Appen staat rechts, los van het toewijzen en bijstellen ernaast: dat is de
   stap die je zet als de rest klopt. Geldt voor alle drie de vormen die die
   plek innemen — de knop, de "wijs eerst toe"-hint en de melding dat er geen
   telefoonnummer bij de partner staat. */
.rit-blok-acties .rit-blok-appen { margin-left: auto; }

/* De vluchtstand op de ritkaart: platte tekst in de standkleur, met de
   bijgestelde tijd erachter. Geen pil — die vocht met de statusregel erboven,
   en twee badges boven elkaar leest als twee alarmen. */
.vlucht-regel {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.vlucht-regel strong { font-weight: 700; }

/* Dezelfde ladder als het status-woord in de titel. */
.vlucht-regel-rood   { color: var(--rood-ink); }
.vlucht-regel-amber  { color: var(--amber-ink); }
.vlucht-regel-teal   { color: var(--teal); }
.vlucht-regel-indigo { color: var(--indigo); }

/* Een geannuleerde vlucht is geen nuance maar een alarm. Zonder pil om hem in
   te zetten doet het lettertype het werk. */
.vlucht-alarm-tekst { font-weight: 700; }

/* Een geannuleerde vlucht is geen nuance maar een alarm. Zelfde rode
   variabelen als de rest, alleen zwaarder aangezet dan de andere pillen. */
.taak-status.vlucht-alarm {
  border: 1px solid var(--rood-ink);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Een afgeleverde rit is klaar: rustiger in beeld, maar wel leesbaar. */
.taak-kaart.rit-klaar { opacity: .66; }
.taak-kaart .btn-wa { margin-top: .1rem; }
a.taak-toegang { text-decoration: none; }
a.taak-toegang:hover { background: var(--bg-hover); }


/* === Dashboard "vurig" ================================================= */
/*
   De nieuwe dashboard-stijl uit mock-dashboard-vurig.html. Bewust GESCOOPT op
   .thema-vurig — de wrapper die alleen dashboard.html om zijn inhoud zet — en
   met eigen --v-tokens. De werkschermen draaien nog op de bestaande
   --stoplicht-/theme-tokens; die blijven hier volledig ongemoeid.

   De mock is donker; light-dark() geeft er een lichte kant bij. De app schakelt
   met data-theme op <html>, dus color-scheme volgt die schakelaar in plaats van
   de systeemvoorkeur — anders klopt light-dark() niet met de knop in de header.
*/
.thema-vurig,
.thema-vurig-rit,
.thema-vurig-dash {
  color-scheme: light;

  --v-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --v-bg:       light-dark(#f4f6fb, #070a11);
  --v-glas:     light-dark(rgba(255, 255, 255, .74), rgba(24, 31, 44, .55));
  --v-rand:     light-dark(rgba(16, 20, 30, .09), rgba(255, 255, 255, .08));
  --v-rand-2:   light-dark(rgba(16, 20, 30, .18), rgba(255, 255, 255, .16));
  --v-tekst:    light-dark(#101420, #f2f5fb);
  --v-tekst-2:  light-dark(#55607a, #aab4c6);
  --v-dof:      light-dark(#7b869c, #6b7789);
  /* Schaduwen en mengpercentages kunnen NIET via light-dark(): die functie
     kiest tussen twee kleuren, niet tussen twee shadow- of %-waarden. Vandaar
     hieronder een tweede setje onder html[data-theme='dark']. */
  --v-glans:    0 1px 0 rgba(255, 255, 255, .6) inset;
  --v-diepte:   0 10px 26px rgba(16, 20, 30, .10);
  --v-diepte-2: 0 16px 34px rgba(16, 20, 30, .16);
  --v-gloed: 12%;      /* sterkte van de achtergrondgloed */
  --v-gloed-2: 14%;
  --v-gloed-3: 8%;
  --v-staaf: 16%;      /* vulling van de maandstaafjes */
  --v-glow: 0%;        /* glow achter een kengetal; alleen in het donker */
  --v-r: 20px;

  /* Eén kleur per module, zoals in de mock. De lichte variant is telkens de
     donkerdere neef van dezelfde tint: dezelfde herkenning, maar leesbaar op
     een licht vlak. */
  --v-accent:   light-dark(#e35e00, #ff6b00);
  --v-indigo:   light-dark(#5b52d6, #8b83ff);
  --v-rood:     light-dark(#d63a5c, #ff5d7a);
  --v-amber:    light-dark(#b06b00, #ffb020);
  --v-teal:     light-dark(#0f9c86, #2ee6c5);
  --v-blauw:    light-dark(#2563eb, #5b9dff);
  --v-violet:   light-dark(#7c3aed, #c58bff);
  --v-roze:     light-dark(#d2508f, #ff84c4);
  --v-leisteen: light-dark(#5a687f, #9fb0c9);

  /* Groen is bewust GEEN modulekleur en geen stand: hij bestaat alleen voor
     de go-knop op de beslis-kaart, waar groen "doorgaan" betekent. De ladder
     van een opdracht blijft indigo/amber/teal — zie .beslis-go. */
  --v-groen:    light-dark(#16a34a, #22c55e);
  /* De twee stops van de groene knop op de beslis-kaart, plus de inkt erop.
     In het donker is het groen lichter, dus daar keert de inkt om. */
  --v-groen-licht:  light-dark(#22c55e, #4ade80);
  --v-groen-donker: light-dark(#15803d, #16a34a);
  --v-groen-tekst:  light-dark(#ffffff, #04210f);

  position: relative;
  padding-bottom: 2.5rem;
  font-family: var(--v-font);
  color: var(--v-tekst);
  letter-spacing: -.006em;
}

html[data-theme='dark'] .thema-vurig,
html[data-theme='dark'] .thema-vurig-rit,
html[data-theme='dark'] .thema-vurig-dash {
  color-scheme: dark;
  --v-glans:    0 1px 0 rgba(255, 255, 255, .05) inset;
  --v-diepte:   0 20px 40px rgba(0, 0, 0, .5);
  --v-diepte-2: 0 28px 56px rgba(0, 0, 0, .6);
  --v-gloed: 30%;
  --v-gloed-2: 34%;
  --v-gloed-3: 16%;
  --v-staaf: 22%;
  --v-glow: 55%;
}

/* De gloed uit de mock. Op de wrapper en niet op body: buiten het dashboard
   hoort de pagina te blijven zoals hij is. */
.thema-vurig::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60vw 50vh at 8% -6%, color-mix(in oklab, var(--v-accent) var(--v-gloed), transparent), transparent 60%),
    radial-gradient(56vw 46vh at 104% 8%, color-mix(in oklab, var(--v-indigo) var(--v-gloed-2), transparent), transparent 62%),
    radial-gradient(50vw 50vh at 60% 118%, color-mix(in oklab, var(--v-teal) var(--v-gloed-3), transparent), transparent 60%);
}

.thema-vurig > * { position: relative; z-index: 1; }

/* DE DASHBOARDKOP KREEG EEN KNOP (#206), en had daar geen vorm voor: er
   stonden alleen regels voor de h1 en de p, dus de div zelf was een kaal
   blok en er was geen plek waar rechts iets kon staan.

   DEZELFDE VORM ALS .page-head, MAAR NIET DIE KLASSE ZELF: .page-head zet
   ook een eigen h1-grootte en -marge, en de vurige kop heeft een
   clamp()-typografie die dan afhankelijk zou worden van de volgorde in dit
   bestand. Alleen de indeling overgenomen, niet de typografie.

   flex-wrap: op een smal scherm zakt de knop onder de titel in plaats van
   de h1 in te drukken. */
.vurig-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.vurig-kop-tekst { min-width: 0; }
.vurig-kop .btn { flex: 0 0 auto; white-space: nowrap; text-decoration: none; }

.vurig-kop h1 {
  margin: 0;
  font-size: clamp(26px, 1.4rem + 1.6vw, 36px);
  font-weight: 800;
  letter-spacing: -.03em;
}

.vurig-kop p { margin: .35rem 0 0; color: var(--v-tekst-2); }

/* Bento: vier kolommen, met de Boekingen-hero op 2x2. */
.vurig-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 1.4rem;
}

.vurig-kaart {
  --v-g: var(--v-leisteen);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 158px;
  padding: 20px;
  background: var(--v-glas);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--v-rand);
  border-radius: var(--v-r);
  box-shadow: var(--v-glans), var(--v-diepte);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}

/* De diagonale glansrand van de mock, in de kleur van de module. */
.vurig-kaart::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: .6;
  background: linear-gradient(140deg in oklab, color-mix(in oklab, var(--v-g) 45%, transparent), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

a.vurig-kaart:hover {
  transform: translateY(-4px);
  border-color: var(--v-rand-2);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--v-g) 30%, transparent),
    var(--v-diepte-2),
    0 0 30px color-mix(in oklab, var(--v-g) 22%, transparent);
}

.vurig-groot { grid-column: span 2; grid-row: span 2; }

.vurig-kaartkop { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }

.vurig-chip {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--v-g);
  background: color-mix(in oklab, var(--v-g) 14%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--v-g) 28%, transparent),
    0 0 18px color-mix(in oklab, var(--v-g) 22%, transparent);
}

.vurig-chip svg { width: 20px; height: 20px; }

.vurig-kaartkop h2 { margin: 0; font-size: 15.5px; font-weight: 700; }

.vurig-label {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v-dof);
}

.vurig-getal {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--v-g);
  text-shadow: 0 0 24px color-mix(in oklab, var(--v-g) var(--v-glow), transparent);
}

.vurig-sub { margin: .3rem 0 0; color: var(--v-tekst-2); font-size: 13px; }
.vurig-tekst { margin: 0; color: var(--v-tekst-2); font-size: 13.5px; }

.vurig-actie {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v-accent);
  font-weight: 700;
  font-size: 13.5px;
}

.vurig-actie svg { width: 14px; height: 14px; }

/* De hero: de datum als groot getal, daaronder wie en waar. */
.vurig-hero-getal {
  margin-top: 6px;
  font-size: clamp(34px, 2rem + 2vw, 52px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--v-accent);
}

.vurig-hero-wie { margin: .5rem 0 0; color: var(--v-tekst-2); font-size: 14px; }

/* De maandstaafjes onder de hero. Zolang er geen cijfers aan hangen staan ze
   er als lege bakjes: de vorm is er, de belofte niet. */
.vurig-staafjes {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 78px;
}

.vurig-staaf {
  flex: 1 1 0;
  min-width: 0;
  height: 46%;
  border-radius: 6px 6px 3px 3px;
  background: color-mix(in oklab, var(--v-g) var(--v-staaf), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--v-g) 22%, transparent);
}

.vurig-nog-niet { margin: .5rem 0 0; font-size: 11.5px; color: var(--v-dof); }

/* De bezettingsring. Zonder cijfer blijft de ring leeg en staat er een streepje
   in het midden — een verzonnen percentage is erger dan geen percentage. */
.vurig-ring-rij { display: flex; align-items: center; gap: 14px; }

.vurig-ring {
  --v-pct: 0;
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--v-g) calc(var(--v-pct) * 1%),
                             color-mix(in oklab, var(--v-g) 12%, transparent) 0);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--v-g) 22%, transparent);
}

.vurig-ring span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--v-bg);
  color: var(--v-g);
  font-size: 15px;
  font-weight: 800;
}

.vurig-kop-tussen {
  margin: 2.2rem 0 .9rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-dof);
}

.vurig-raster-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.vurig-binnenkort { min-height: auto; opacity: .62; }

.vurig-soon {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--v-rand);
  background: color-mix(in oklab, var(--v-tekst) 6%, transparent);
  color: var(--v-dof);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
}

/* Eén regel per melding. Wat urgent is draagt de rode tint, de rest leest mee. */
.vurig-regels { display: grid; gap: .3rem; margin: .1rem 0 0; }

.vurig-regel {
  display: block;
  color: var(--v-tekst-2);
  font-size: 13px;
  text-decoration: none;
}

.vurig-regel-urgent,
.vurig-regel-open { color: var(--v-g); font-weight: 600; }
.vurig-regel-afgerond { color: var(--v-teal); }
a.vurig-regel:hover { text-decoration: underline; }

.v-accent   { --v-g: var(--v-accent); }
.v-indigo   { --v-g: var(--v-indigo); }
.v-rood     { --v-g: var(--v-rood); }
.v-amber    { --v-g: var(--v-amber); }
.v-teal     { --v-g: var(--v-teal); }
.v-blauw    { --v-g: var(--v-blauw); }
.v-violet   { --v-g: var(--v-violet); }
.v-roze     { --v-g: var(--v-roze); }
.v-leisteen { --v-g: var(--v-leisteen); }

@media (max-width: 960px) {
  .vurig-raster { grid-template-columns: repeat(2, 1fr); }
  .vurig-groot { grid-column: span 2; }
  .vurig-raster-drie { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .vurig-raster { grid-template-columns: 1fr; }
  .vurig-groot { grid-column: span 1; grid-row: auto; }
}


/* === Order-detail "vurig" ============================================== */
/*
   mock-order-detail-vurig.html, gescoopt op .thema-vurig-order (die naast
   .thema-vurig staat, dus de dashboard-tokens gelden hier ook).

   De truc: dit scherm hangt al aan stoplicht-{tint} en tint-{x}, en die lezen
   --stoplicht / --stoplicht-vlak. In plaats van per component een kleur te
   zetten hangen we hieronder de APP-tokens om binnen deze wrapper. Daarmee
   kleurt élke stand mee — rood, amber, teal, indigo, grijs — ook de standen
   die de mock niet laat zien, en ook een stand die er later bij komt.

   Op dit werkscherm regeert de status, niet de modulekleur. Oranje blijft van
   het merk: links, knoppen en het woning-accent.
*/
.thema-vurig-order {
  /* Vlakken en tekst uit de mock. */
  --bg-surface:   light-dark(#ffffff, #0f1420);
  --bg-surface-2: light-dark(#f1f4f8, #161d2a);
  --bg-hover:     light-dark(#e7ebf2, #1d2635);
  --text-primary:   light-dark(#0e1626, #f2f5fb);
  --text-secondary: light-dark(#586274, #aab4c6);
  --text-muted:     light-dark(#93a0b2, #6b7789);
  --border-subtle: light-dark(#e6e9f0, rgba(255, 255, 255, .08));
  --border-default: light-dark(#d7dce6, rgba(255, 255, 255, .15));
  --border-strong: light-dark(#64748b, #9fb0c9);

  /* De stoplichthues van de mock. stoplicht-{tint} verderop in dit bestand
     leest ze, dus alle bestaande componenten volgen vanzelf. */
  --rood-ink:   light-dark(#e11d48, #ff5d7a);
  --rood-zacht: light-dark(#fdeaee, rgba(255, 93, 122, .11));
  --amber-ink:   light-dark(#c2740a, #ffb020);
  --amber-zacht: light-dark(#fdf3e3, rgba(255, 176, 32, .11));
  --teal:       light-dark(#0f766e, #2ee6c5);
  --teal-zacht: light-dark(#e5f4f2, rgba(46, 230, 197, .10));
  --indigo:      light-dark(#4f46e5, #8b83ff);
  --indigo-vlak: light-dark(#eef0ff, rgba(139, 131, 255, .11));
  --indigo-zacht: light-dark(rgba(79, 70, 229, .10), rgba(139, 131, 255, .14));
  --indigo-rand:  light-dark(rgba(79, 70, 229, .24), rgba(139, 131, 255, .34));
  --success: light-dark(#16a34a, #37d67a);

  --v-kaart-r: 18px;
}

/* Zachte gloed op de kaarten en de tegels; in het licht bijna niets. */
.thema-vurig-order {
  --v-kaartschaduw: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px rgba(16, 24, 40, .06);
  --v-tegelschaduw: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px rgba(16, 24, 40, .06);
  --v-randgloed: 0%;
}

html[data-theme='dark'] .thema-vurig-order {
  --v-kaartschaduw: 0 18px 38px rgba(0, 0, 0, .4);
  --v-tegelschaduw: 0 16px 34px rgba(0, 0, 0, .4);
  --v-randgloed: 55%;
}

/* --- De drie statustegels ---------------------------------------------- */
.thema-vurig-order .statusbalk-kaart {
  padding: 16px 18px;
  border-radius: var(--v-kaart-r);
  border-color: color-mix(in oklab, var(--stoplicht) 26%, var(--border-subtle));
  border-left: 0;
  box-shadow: var(--v-tegelschaduw);
  overflow: hidden;
  position: relative;
  background: color-mix(in oklab, var(--stoplicht) 12%, var(--bg-surface));
}

/* De gloeiende staaf links; in het licht een rustige streep. */
.thema-vurig-order .statusbalk-kaart::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--stoplicht, var(--border-default));
  box-shadow: 0 0 16px color-mix(in oklab, var(--stoplicht) var(--v-randgloed), transparent);
}

.thema-vurig-order .statusbalk-waarde {
  font-size: 18px;
  text-shadow: 0 0 20px color-mix(in oklab, var(--stoplicht) var(--v-randgloed), transparent);
}

.thema-vurig-order .statusbalk-label { color: var(--text-muted); }

/* --- De kaarten -------------------------------------------------------- */
.thema-vurig-order .tile.blok {
  padding: 22px;
  border-radius: var(--v-kaart-r);
  border: 1px solid var(--border-subtle);
  background: var(--v-glas);
  backdrop-filter: blur(14px);
  box-shadow: var(--v-kaartschaduw);
}

.thema-vurig-order .tile-head h2 { font-size: 16px; font-weight: 700; }

/* De partnersectie draagt de indigo sectiekop uit de mock. */
.thema-vurig-order .partnersectie .tile-head h2 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--indigo);
}

/* Rijtjes naam/waarde met een lijn ertussen, zoals .kv in de mock. */
.thema-vurig-order .kv > li {
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.thema-vurig-order .kv > li:last-child { border-bottom: 0; }

/* --- Partnerkaarten: status regeert ------------------------------------ */
/* De mock zet de kleur links en houdt het vlak zacht getint; het gevulde
   icoonvierkant draagt de stand mee. */
.thema-vurig-order .partnerkaart,
.thema-vurig-order .partnerkaart-neutraal {
  border: 1px solid color-mix(in oklab, var(--stoplicht) 26%, var(--border-subtle));
  border-left: 4px solid var(--stoplicht, var(--border-default));
  border-top: 1px solid color-mix(in oklab, var(--stoplicht) 26%, var(--border-subtle));
  border-radius: 14px;
  background: color-mix(in oklab, var(--stoplicht) 11%, var(--bg-surface));
  box-shadow: 0 0 20px color-mix(in oklab, var(--stoplicht) 10%, transparent);
}

.thema-vurig-order .partnerkaart-icoon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--stoplicht, var(--text-secondary));
  color: var(--bg-page);
}

.thema-vurig-order .partnerkaart-namen small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Het rit-blok: neutraal vlak, kleur in de rand --------------------- */
/* Zo blijft het leesbaar op een kaart die zelf al getint is — precies het
   punt waar amber-op-amber eerder misging. */
.thema-vurig-order .rit-blok {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--stoplicht, var(--border-default));
  border-radius: 10px;
  padding: 14px 15px;
}

/* --- Pillen ------------------------------------------------------------ */
.thema-vurig-order .taak-status {
  padding: 5px 11px;
  font-size: 12.5px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* De statusladder onder de ritten. */
.thema-vurig-order .ritladder {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
}

.thema-vurig-order .ritladder-uitleg { color: var(--text-muted); }

/* --- De vluchtkaart ----------------------------------------------------- */
/* De kop is een verloop in de kleur van de STAND, niet in teal: op schema,
   onderweg, vertraagd, geland, geannuleerd en geen-info krijgen zo elk hun
   eigen balk zonder dat hier een regel per stand voor nodig is. */
.thema-vurig-order .vlucht-tegel {
  padding: 0;
  border-radius: var(--v-kaart-r);
  border-color: color-mix(in oklab, var(--stoplicht) 30%, var(--border-subtle));
}

/* In het donker een verloop van de standkleur naar het kaartvlak, met de tekst
   in die kleur — zoals de mock. In het licht blijft de balk solide met de
   paginakleur als tekst; dat leest daar beter, en de mock doet het net zo.
   Alles via --vluchtbalk, dus grijs/indigo/amber/teal/rood volgen vanzelf. */
html[data-theme='dark'] .thema-vurig-order .vluchtbalk {
  background: linear-gradient(135deg in oklab,
    color-mix(in oklab, var(--vluchtbalk) 30%, var(--bg-surface)), var(--bg-surface));
  color: var(--vluchtbalk);
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--vluchtbalk) 30%, transparent);
}

.thema-vurig-order .vlucht-tegel-groot {
  text-shadow: 0 0 24px color-mix(in oklab, var(--stoplicht) var(--v-randgloed), transparent);
}

/* --- Afrekening -------------------------------------------------------- */
.thema-vurig-order .afrekening-totaal {
  padding: 13px 0 2px;
  border-top: 2px solid var(--border-default);
}

.thema-vurig-order .afrekening-totaal strong { font-size: 18px; color: var(--indigo); }

/* --- Knoppen en keuzelijsten ------------------------------------------- */
.thema-vurig-order .btn-secondary,
.thema-vurig-order select,
.thema-vurig-order input,
.thema-vurig-order textarea {
  background: var(--bg-surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
  border-radius: 9px;
}

.thema-vurig-order .btn-secondary:hover { background: var(--bg-hover); }

/* Oranje blijft van het merk: de doorklik-links en het woning-accent. */
.thema-vurig-order .partnerkaart-link,
.thema-vurig-order .kv a { color: var(--accent); font-weight: 700; }


/* === Beslis-kaart "vurig" ============================================== */
/*
   De pagina achter de knop in het bericht: één opdracht of rit, twee keuzes.
   Gescoopt op .thema-vurig-beslis, die NAAST .thema-vurig staat — de --v-
   tokens, de gloed en .vurig-chip/.vurig-label van het dashboard gelden hier
   dus ook, en er hoeft niets van gedupliceerd te worden.

   Smal en gecentreerd: dit scherm komt binnen op een telefoon, via een link in
   een bericht, en er valt precies één ding te doen. Alles wat niet bij die
   keuze hoort staat er niet op.
*/
/* Amber voor élke soort. Deze kaart is het wachtmoment — er is iets gevraagd
   en er is nog niet geantwoord — en dat is wat het accent hoort te zeggen.
   Een modulekleur per soort zei iets anders (welk soort werk), en rood is in
   dit systeem al de STAND van een opdracht; als de kaart zelf rood is, leest
   de chauffeur een alarm waar een vraag staat.

   De kleur staat op de WRAPPER, niet op de kaart zelf: de .v-*-klassen hebben
   dezelfde gewichtsklasse als .beslis-kaart en staan eerder in dit bestand,
   dus een --v-g op de kaart zou ze overstemmen. Via de ouder erft de kaart de
   kleur alleen zolang hij zelf niets zegt. */
.thema-vurig-beslis {
  --v-g: var(--v-amber);
  display: flex;
  justify-content: center;
  padding-top: 1.2rem;
}

.beslis-kaart {
  width: 100%;
  max-width: 440px;
  padding: 24px;
  background: var(--v-glas);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--v-rand);
  border-radius: var(--v-r);
  box-shadow: var(--v-glans), var(--v-diepte);
  position: relative;
  overflow: hidden;
}

/* Dezelfde diagonale glansrand als op een dashboardkaart, in de kleur van de
   soort: schoonmaak teal, taxi rood. */
.beslis-kaart::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: .6;
  background: linear-gradient(140deg in oklab, color-mix(in oklab, var(--v-g) 45%, transparent), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* De amberstreep bovenaan: dit is een wachtmoment, en dat zegt de kaart nu al
   voordat je de eerste regel leest. overflow: hidden op de kaart knipt hem
   langs de hoekafronding, dus hij hoeft zijn eigen radius niet te kennen. */
.beslis-kaart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--v-amber);
  z-index: 1;
}

.beslis-kop { display: flex; align-items: center; gap: 11px; }
/* Het soort-woord draagt de accentkleur van de kaart in plaats van grijs: chip
   en label horen bij elkaar. */
.beslis-kop .vurig-label { color: var(--v-g); }

.beslis-kaart h1 {
  margin: 15px 0 0;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.beslis-datum { margin: .35rem 0 0; color: var(--v-tekst-2); font-size: 14px; }

/* --- De schoonmaakkaart, variant A uit de mock -----------------------------
   Alles hieronder hangt aan .beslis-schoon: de taxikaart houdt zijn eigen
   opmaak tot die ook is goedgekeurd.

   De kop staat gecentreerd als één blok — icoon boven het woord, dan de
   woningnaam groot, dan het adres. Wie hier binnenkomt heeft net op een knop
   in een appje getikt; dit is het antwoord op "waar gaat dit over". */
.beslis-schoon .beslis-kop {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.beslis-schoon .vurig-chip {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.beslis-schoon .vurig-chip svg { width: 27px; height: 27px; }
.beslis-schoon .vurig-label { font-size: .86rem; letter-spacing: .11em; }

/* Groot en dik: dit is het enige woord dat je van een afstand moet kunnen
   lezen. text-wrap balance houdt een naam van twee woorden bij elkaar. */
.beslis-schoon h1 {
  margin: 16px 0 6px;
  font-size: 2.5rem;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-align: center;
  text-wrap: balance;
}

/* Het adres onder de naam: het speldje links van de tekst, samen gecentreerd.
   flex-start op de uitlijning zodat het speldje bij een adres van twee regels
   bovenaan blijft staan en niet in het midden zweeft. */
.beslis-schoon .beslis-adres {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  margin: 0 0 18px;
  color: var(--v-tekst-2);
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.beslis-schoon .beslis-adres svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--v-g);
}

.beslis-schoon .beslis-vraag { text-align: center; }

/* De kopbalk boven de schoonmaakkaart: geen embleem-plaatje meer, alleen de
   merknaam als tekst. Eén regel: naam links, groet erachteraan, de
   licht/donker-knop rechts. De groet knijpt als eerste als het krap wordt —
   de naam en de knop mogen niet afbreken. */
.beslis-kop-balk {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.beslis-merk {
  flex: 0 0 auto;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--text-primary);
}
.beslis-groet {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.beslis-ico-knop {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  cursor: pointer;
}
.beslis-ico-knop svg { width: 17px; height: 17px; }
.beslis-ico-knop:hover { background: var(--bg-surface); }

/* Het lijntje tussen de keuze en het naslagwerk eronder. */
.beslis-scheiding {
  height: 1px;
  margin: 1rem 0 .9rem;
  background: var(--v-rand);
}

/* Van/Naar op de rit-variant: waar begint hij, waar eindigt hij. Alleen
   NAMEN — het adres hoort achter het ja-woord, en dat is het hele idee van
   deze kaart. Zelfde vorm als het reisblok op de ritkaart, maar met de
   --v-tokens van dit scherm. */
.beslis-reis {
  display: grid;
  gap: .65rem;
  margin-bottom: 14px;
  padding: .8rem .9rem;
  border: 1px solid var(--v-rand);
  border-radius: 14px;
  background: color-mix(in oklab, var(--v-tekst) 4%, transparent);
}

.beslis-reis-rij { display: flex; align-items: center; gap: .7rem; }

.beslis-reis-icoon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: .55rem;
}
.beslis-reis-icoon svg { width: 16px; height: 16px; }
/* Vertrek indigo, aankomst teal: dezelfde twee kleuren als op de ritkaart. */
.beslis-reis-van {
  color: var(--v-indigo);
  background: color-mix(in oklab, var(--v-indigo) 14%, transparent);
}
.beslis-reis-naar {
  color: var(--v-teal);
  background: color-mix(in oklab, var(--v-teal) 14%, transparent);
}

.beslis-reis-tekst { display: grid; gap: 1px; min-width: 0; }
.beslis-reis-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v-dof);
}
.beslis-reis-waarde { font-size: 15.5px; font-weight: 800; color: var(--v-tekst); }

/* Feitenrijen: label links, waarde rechts. Eigen regels in plaats van .kv,
   want die leest de app-tokens en hier regeren de --v-tokens. */
.beslis-feiten {
  list-style: none;
  margin: 0;
  padding: 0;
}

.beslis-feiten li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 0 0 11px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--v-rand);
  font-size: 14px;
}

/* De laatste rij hoeft geen streep: daaronder komt de uitleg al. */
.beslis-feiten li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }

.beslis-feiten span { color: var(--v-tekst-2); flex: 0 0 auto; }
.beslis-feiten strong { color: var(--v-tekst); font-weight: 700; text-align: right; }

/* De vraag staat vlak boven de knoppen waar hij over gaat. */
.beslis-vraag {
  margin: 16px 0 9px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* De twee knoppen onder elkaar, even breed: op een telefoon is naast elkaar
   te krap voor deze zinnen, en niets mag hier per ongeluk aangetikt worden. */
.beslis-knoppen { display: grid; gap: 10px; }
.beslis-knoppen form { display: block; gap: 0; margin: 0; }

/* Ja draagt het merkoranje; --accent-text kantelt mee in het donker, dus de
   tekst blijft leesbaar op beide vlakken. */
.beslis-ja {
  background: var(--accent);
  color: var(--accent-text);
  padding: 1rem;
  font-size: 15.5px;
}

.beslis-ja:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* Nee is een rand, geen vlak: afwijzen mag niet even makkelijk wegtikken als
   aanvaarden, en twee volle knoppen naast elkaar vragen allebei aandacht. */
.beslis-nee {
  background: transparent;
  color: var(--v-rood);
  border: 1.5px solid color-mix(in oklab, var(--v-rood) 45%, transparent);
  padding: calc(1rem - 1.5px);
  font-size: 15.5px;
}

.beslis-nee:hover {
  background: color-mix(in oklab, var(--v-rood) 12%, transparent);
  border-color: var(--v-rood);
}

/* Stoplicht-knoppen. Staan NAAST .beslis-ja/.beslis-nee en niet in de plaats
   ervan: die twee zijn nog in gebruik zolang niet elk scherm om is.

   Dezelfde maatvoering als de knoppen op de ritkaart: een duim mikt op een
   telefoon, dus minstens 54px hoog, en ze zakken zichtbaar in bij het tikken. */
.beslis-go,
.beslis-stop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 54px;
  padding: .85rem 1rem;
  border-radius: 16px;
  font-size: 1.02rem;
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease,
              filter .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .beslis-go,
  .beslis-stop { transition: none; }
}

/* Groen gevuld: de weg vooruit. Verloop van licht naar donker met een
   lichtrandje bovenin en een gelaagde schaduw eronder — dezelfde behandeling
   als de statusknop op de ritkaart. */
.beslis-go {
  border: none;
  background: linear-gradient(180deg, var(--v-groen-licht), var(--v-groen-donker));
  color: var(--v-groen-tekst);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset,
              0 8px 20px -6px color-mix(in oklab, var(--v-groen) 55%, transparent),
              0 2px 4px rgba(0, 0, 0, .18);
}

.beslis-go:hover { filter: brightness(1.04); }

.beslis-go:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset,
              0 3px 8px -4px rgba(0, 0, 0, .3);
}

.beslis-go:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--v-groen) 55%, transparent);
  outline-offset: 2px;
}

/* Rood als rand, niet als vlak: weigeren mag niet even makkelijk wegtikken
   als aannemen. Zelfde gewicht als .beslis-nee, andere naam. Ook geen
   schaduw — die zou hem net zo hard mee laten doen als de groene. */
.beslis-stop {
  background: transparent;
  color: var(--v-rood);
  border: 1.5px solid color-mix(in oklab, var(--v-rood) 45%, transparent);
  padding: calc(.85rem - 1.5px) 1rem;
}

.beslis-stop:hover {
  background: color-mix(in oklab, var(--v-rood) 12%, transparent);
  border-color: var(--v-rood);
}

.beslis-stop:active { transform: translateY(1px); filter: brightness(.97); }

.beslis-stop:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--v-rood) 55%, transparent);
  outline-offset: 2px;
}

/* Het vinkje en het kruisje dragen geen betekenis die de tekst niet al geeft
   (ze staan op aria-hidden); ze geven de knop alleen zijn vorm op een rijtje.
   De knop is een flexrij met een eigen gap, dus het teken heeft geen marge
   nodig. */
.beslis-teken { font-size: 1.05em; line-height: 1; }

/* De voorwaarde hoort bij het ja-blok en moet leesbaar zijn zonder de knop te
   beconcurreren: klein, gedempt, maar de link wel als link herkenbaar. */
.beslis-voorwaarden {
  margin: 13px 2px 0;
  color: var(--v-dof);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

/* Volgt de adres-uitleg er direct op, dan zijn het twee gedempte regels
   onder elkaar; die hoeven niet allebei hun volle marge te pakken. */
.beslis-voorwaarden + .beslis-uitleg { margin-top: 7px; }

.beslis-voorwaarden a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.beslis-voorwaarden a:hover { color: var(--v-tekst-2); }

/* Het logo op een eigen wit vlak. Het bestand heeft zelf een witte
   achtergrond, dus in dark zou het anders als los wit blok in de kaart
   hangen; nu is het wit een bedoelde strook met een eigen rand. */
.beslis-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -4px 0 18px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, #000 8%, transparent);
}

.beslis-logo img {
  display: block;
  max-width: 190px;
  width: 100%;
  height: auto;
}

.beslis-uitleg {
  margin: 14px 0 0;
  color: var(--v-dof);
  font-size: 12.5px;
  text-align: center;
}

/* De afloop: afgewezen, of niet meer van hem. */
.beslis-melding { margin: .6rem 0 0; color: var(--v-tekst-2); font-size: 14.5px; }
.beslis-terug { margin-top: 20px; }

@media (max-width: 560px) {
  .thema-vurig-beslis { padding-top: .4rem; }
  .beslis-kaart { padding: 20px; }
}

/* --- De taakpagina van de schoonmaker ----------------------------------- */
/* Uit mock-taak-app.html. Alles hangt aan .taak-app of aan de eigen balk
   erboven, zodat geen enkele andere pagina hier iets van merkt. Bestaande
   tokens: --merk-ink is het navy (cream in het donker), --merk-tag het goud,
   en de knopinkt is --bg-surface — die draait met het thema mee en levert dus
   in allebei de standen vanzelf het juiste contrast op. */

/* De balk: terug + embleem links, de merknaam absoluut in het midden, de
   themaknop rechts. Absoluut gecentreerd en niet met flex, zodat de naam in
   het midden van de BALK staat en niet in het midden van wat er overblijft. */
.taak-balk {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 52px;
  padding: 0 6px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.taak-balk-links { display: flex; align-items: center; gap: .5rem; }
.taak-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
}
.taak-ico:hover { background: var(--bg-surface-2); }
.taak-ico svg { width: 22px; height: 22px; }
.taak-ico-rechts { margin-left: auto; }
.taak-merk-logo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #fff;
  object-fit: cover;
}
.taak-merk {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.08;
  font-family: var(--font-sans);
}
.taak-merk-naam {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-primary);
}
.taak-merk-tag {
  margin-top: 2px;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--merk-tag);
}

.taak-app { display: grid; gap: 0; padding: 20px; }

/* Kopblok: begroeting klein erboven, dan de woningnaam met zijn stand
   ernaast, dan wanneer. */
.taak-app .taak-eyebrow {
  margin: 0 0 6px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.taak-app .taak-kop-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.taak-app .taak-titel {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.taak-app .taak-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .6rem .28rem .5rem;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: .76rem;
  font-weight: 600;
}
.taak-app .taak-chip-bol { width: .5rem; height: .5rem; border-radius: 50%; }
/* De stand kleurt het bolletje; groen is klaar, en de rest volgt de tinten
   die de takenlijst ook gebruikt. */
.taak-app .taak-bol-teal   { background: var(--teal); }
.taak-app .taak-bol-indigo { background: var(--indigo); }
.taak-app .taak-bol-amber  { background: var(--amber-ink); }
.taak-app .taak-bol-rood   { background: var(--rood-ink); }
.taak-app .taak-datum {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: .9rem;
  font-weight: 500;
}

/* De volgende stap. De uitleg staat erboven omdat de knop zonder reden een
   knop is; mét reden is het een afspraak. */
.taak-app .taak-actie { margin: 18px 0 22px; }
.taak-app .taak-actie-hint {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: .85rem;
  line-height: 1.45;
}
.taak-app .taak-knop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 12px;
  background: var(--merk-ink);
  color: var(--bg-surface);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.taak-app .taak-knop:hover { filter: brightness(1.08); }
.taak-app .taak-knop svg { width: 19px; height: 19px; }

/* De kaarten eronder: zachte schaduw, radius 16, en de secties onder elkaar
   met lucht ertussen. */
.taak-app .taak-kaart {
  margin-bottom: 16px;
  padding: 4px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--bg-surface);
  box-shadow: 0 1px 2px rgba(17, 23, 38, .05), 0 6px 20px rgba(17, 23, 38, .06);
}
html[data-theme='dark'] .taak-app .taak-kaart {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px rgba(0, 0, 0, .35);
}
.taak-app .taak-kaart:last-child { margin-bottom: 0; }
.taak-app .taak-kaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 10px;
}
.taak-app .taak-kaart-kop h2 { margin: 0; font-size: .95rem; font-weight: 700; }
/* De secties dragen hun eigen binnenruimte niet meer; de kaart doet dat. */
.taak-app .taak-kaart > p,
.taak-app .taak-kaart > ul,
.taak-app .taak-kaart > form,
.taak-app .taak-kaart > .foto-grid { margin-bottom: 14px; }
.taak-app .toegang-blok > p { padding-top: 14px; }


/* --- Partner bewerken: brede indeling in twee kolommen -------------
   Uit mock-partner-form.html, ongewijzigd overgenomen. De oude
   .partner-form van 34rem blijft staan voor wie hem nog gebruikt; deze
   regels hangen allemaal aan .breed of aan een eigen .pf-klasse. */
/* De kaart mag breed worden; de oude .partner-form was 34rem smal. */
.partner-form.breed{max-width:70rem;width:100%}

/* Kop met de knoppen erin, zodat je niet naar beneden hoeft om op te slaan. */
.pf-kop{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem;
}
.pf-kop h1{margin:0}

/* Twee kolommen: links het account, rechts de gegevens. */
.pf-raster{
  display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);
  gap:1.6rem;align-items:start;
}
@media (max-width:860px){.pf-raster{grid-template-columns:1fr}}

/* Drie velden op één rij (postcode · plaats · land). */
.veld-trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin-bottom:.9rem}
.form-card .veld-trio label{margin-bottom:0}
@media (max-width:620px){.veld-trio{grid-template-columns:1fr 1fr}}

/* Pasfoto: ronde preview naast de knop. */
.pf-foto{display:flex;align-items:center;gap:.8rem;margin-bottom:0}
.pf-duo-uit{align-items:center}
.pf-foto-rond{
  flex:0 0 auto;width:64px;height:64px;border-radius:50%;
  background:var(--surface-2,#eceff5);border:1px solid var(--border-subtle,#dfe3ed);
  display:grid;place-items:center;overflow:hidden;color:var(--text-tertiary,#8d94a5);
}
.pf-foto-rond img{width:100%;height:100%;object-fit:cover}
.pf-foto-rond svg{width:30px;height:30px}
.pf-foto-tekst{min-width:0}
.pf-foto-tekst b{display:block;font-weight:600;color:var(--text-secondary)}
.pf-foto-tekst .muted{font-size:.85rem}
.pf-foto-knoppen{display:flex;gap:.5rem;margin-top:.4rem;flex-wrap:wrap}
/* De knop is een <label> om de verborgen file-input te bedienen; zonder
   deze regel erft hij de hoogte en de ondermarge van een formulierlabel. */
.form-card .pf-foto-knoppen label.btn{display:inline-flex;align-items:center;margin-bottom:0}
/* De foutmelding hoort BIJ het fotoblok, niet bovenaan de pagina. Als
   inline element brak zijn achtergrond per tekstregel; vandaar block. */
.pf-foto-tekst .alert{display:block;margin-top:.45rem;padding:.45rem .6rem;font-size:.85rem;line-height:1.35}

/* Zes regels krimp zodat het scherm op 1280x800 past. Alleen hier: de
   body-class staat op dit ene template, dus geen ander scherm merkt het. */
/* .main-content centreert verticaal voor de logincards. Dit formulier is
   een kale .card en zou daardoor in het midden zweven met een half scherm
   wit erboven; .page doet elders hetzelfde met align-self:flex-start. */
body.pf-scherm .main-content{padding-top:1.25rem;padding-bottom:1.25rem;align-items:flex-start}
body.pf-scherm .footer{padding-top:.5rem;padding-bottom:.5rem;font-size:.8rem}
.partner-form.breed{padding-top:1rem;padding-bottom:1rem}
.partner-form.breed .pf-kop{margin-bottom:.7rem}
.partner-form.breed .pf-opmerking{margin-bottom:0}
.partner-form.breed .veld-groep:last-of-type{margin-bottom:0}

/* De login-link zat onder het formulier; hij staat nu in de linkerkolom. */
/* De login-link staat nu als actie in de kop, niet meer als blok onderaan. */
.pf-kop-acties{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pf-kop-acties .btn{white-space:nowrap}
.pf-link-mini{display:flex;align-items:center;gap:.4rem}
.pf-link-mini input{
  width:13rem;font-size:.85rem;padding:.4rem .6rem;margin:0;
}
.pf-kop-scheiding{width:1px;height:1.6rem;background:var(--border-subtle,#dfe3ed);margin:0 .3rem}
@media (max-width:900px){.pf-link-mini input{width:8rem}}
.partner-form.breed .pf-kop h1{font-size:1.6rem}
.partner-form.breed .tile-head h2{font-size:1rem}

/* Iets krapper ritme, alleen op dit scherm: zo past alles zonder scrollen. */
.partner-form.breed .veld-groep label{margin-bottom:.55rem}
.partner-form.breed .veld-duo,
.partner-form.breed .veld-trio{margin-bottom:.6rem}
.partner-form.breed .keuze-rijen{margin-top:.2rem}

/* Onzichtbaar, maar niet uit de tabvolgorde. display:none of het
   hidden-attribuut zouden het veld ook voor het toetsenbord
   wegnemen; zo blijft de knop bereikbaar met Tab en Enter. */
.enkel-schermlezer{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* --- Betalen in plaats van aanvragen ------------------------------
   Uit mock-betalen.html, ongewijzigd overgenomen (de .mockhint blijft in
   de mock: die houdt daar twee schermen uit elkaar). .bev-betaald staat
   er alvast, maar het blokje zelf komt pas met MultiSafepay: zonder
   echte betaling is er geen bedrag en geen kenmerk om te tonen. */
/* Het betaalblok onderaan stap 3. */
.betaalblok{
  margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid var(--border-subtle,#dfe3ed);
}
.betaal-bedrag{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:.9rem;
}
.betaal-bedrag span{font-weight:600;color:var(--text-secondary)}
.betaal-bedrag strong{font-size:1.75rem;letter-spacing:-.02em}

/* De methodekeuze: radiokaartjes op één rij, wrap op smal. */
.betaal-methoden{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:.6rem;margin-bottom:1rem;
}
.betaal-methode{
  display:flex;align-items:center;gap:.55rem;
  padding:.7rem .8rem;border:1px solid var(--border-subtle,#dfe3ed);
  border-radius:.7rem;cursor:pointer;background:var(--bg-surface,#fff);
  font-weight:600;font-size:.92rem;
}
/* theme.css geeft een input in een label width:100%; een radio moet klein blijven. */
.betaal-methode input[type="radio"]{width:auto;min-width:0;margin:0;flex:0 0 auto}
.betaal-methode:hover{border-color:#c9cfdd}
.betaal-methode:has(input:checked){
  border-color:#4f46e5;box-shadow:0 0 0 1px #4f46e5 inset;background:#f5f5ff;
}
.betaal-methode .mlogo{
  flex:0 0 auto;width:2rem;height:1.35rem;border-radius:.25rem;
  display:grid;place-items:center;font-size:.6rem;font-weight:700;
  letter-spacing:.02em;color:#fff;background:#8d94a5;
}
.mlogo.ideal{background:#cc0066}
.mlogo.visa{background:#1a1f71}
.mlogo.mc{background:#eb001b}
.mlogo.bc{background:#005498}

/* De veilig-betalen-regel onder de knop. */
.betaal-veilig{
  display:flex;align-items:center;gap:.45rem;margin-top:.7rem;
  font-size:.85rem;color:var(--text-tertiary,#8d94a5);
}
.betaal-veilig svg{width:1rem;height:1rem;flex:0 0 auto}
.betaal-knop{width:100%;justify-content:center;font-size:1.05rem;padding:.85rem 1rem}

/* Op het bedankscherm: de betaalbevestiging als eigen blokje. */
.bev-betaald{
  display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;
  max-width:26rem;margin:0 auto 1.2rem;text-align:left;
  padding:.9rem 1.1rem;border-radius:.8rem;
  background:#f0fdf6;border:1px solid #bbe7cd;
}
.bev-betaald dt{color:#2f6b47;font-size:.88rem}
.bev-betaald dd{margin:0;font-weight:700;color:#1c3d2a;text-align:right}

/* De knop naar Mijn verblijf, direct onder de bevestiging. */
.bev-verblijf{margin:.2rem 0 1.4rem;display:inline-flex;text-decoration:none}

/* =====================================================================
   DE RITKAART IN DE CHAUFFEURSAPP  (mock-chauffeur-kaart.html)
   ---------------------------------------------------------------------
   Eén vlak met secties, gescheiden door een haarlijn -- geen dozen in
   dozen meer. De vaste volgorde is: melding, kop, twee tijdblokken,
   van/naar, klant, vlucht, stappen boven de knop, ververs-stempel.

   GEEN NIEUWE KLEUREN. Alles komt uit de --v-tokens die .thema-vurig al
   definieert; de zachte vlakken zijn color-mix van diezelfde tokens.
   Daarom staat .thema-vurig-rit hierboven in dezelfde tokenregel: één
   bron, en het donker volgt vanzelf via light-dark(). De hexcodes van
   /verblijf zijn hier NIET overgeschreven -- dat zou een tweede palet
   maken dat vanzelf uit elkaar loopt.

   Alleen de twee tijdblokken en het personenvakje houden een eigen vlak.
   Dat zijn de getallen waar de chauffeur op mikt; die mogen opvallen.
   ===================================================================== */
.thema-vurig-rit { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.rk-kaart {
  background: var(--v-glas);
  border: 1px solid var(--v-rand);
  border-radius: var(--v-r);
  box-shadow: var(--v-diepte);
  overflow: hidden;
}
/* Een afgezette rit is klaar. Hij blijft leesbaar, maar vraagt niets meer. */
.rk-kaart.rk-dof { opacity: .55; box-shadow: none; }

.rk-sec { padding: 13px 15px; }
.rk-sec + .rk-sec { border-top: 1px solid var(--v-rand); }

.rk-lab {
  display: block;
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--v-dof);
}

/* 1. De melding: volle breedte bovenin, geen eigen doosje. */
.rk-mld {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 15px;
  background: color-mix(in oklab, var(--v-amber) 14%, transparent);
  color: var(--v-amber);
  font-size: 13px; font-weight: 700; line-height: 1.35;
}
.rk-mld-rood {
  background: color-mix(in oklab, var(--v-rood) 14%, transparent);
  color: var(--v-rood);
}
.rk-mld svg {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px;
  stroke: currentColor; fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 2. De kop: waar deze opdracht staat, en wat voor rit het is. */
.rk-kop { display: flex; align-items: center; gap: 9px; }
.rk-kop-vink {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--v-teal) 13%, transparent);
}
.rk-kop-vink svg {
  width: 14px; height: 14px; fill: none; stroke: var(--v-teal);
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.rk-kop-t {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--v-teal);
}
.rk-kop .rk-pil { margin-left: auto; }
.rk-kop-amber .rk-kop-vink { background: color-mix(in oklab, var(--v-amber) 15%, transparent); }
.rk-kop-amber .rk-kop-vink svg { stroke: var(--v-amber); }
.rk-kop-amber .rk-kop-t { color: var(--v-amber); }
.rk-kop-grijs .rk-kop-vink { background: color-mix(in oklab, var(--v-dof) 15%, transparent); }
.rk-kop-grijs .rk-kop-vink svg { stroke: var(--v-dof); }
.rk-kop-grijs .rk-kop-t { color: var(--v-dof); }

.rk-pil {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  color: var(--v-teal);
  background: color-mix(in oklab, var(--v-teal) 13%, transparent);
}
.rk-pil-rood { color: var(--v-rood); background: color-mix(in oklab, var(--v-rood) 13%, transparent); }
.rk-pil-amber { color: var(--v-amber); background: color-mix(in oklab, var(--v-amber) 13%, transparent); }
.rk-pil-dof { color: var(--v-tekst-2); background: color-mix(in oklab, var(--v-dof) 15%, transparent); }

/* 3. De twee getallen: welke dag, en hoe laat jij er moet zijn. */
.rk-tijden { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.rk-tv {
  background: color-mix(in oklab, var(--v-tekst) 4%, transparent);
  border-radius: 13px; padding: 11px 13px;
}
.rk-tv b {
  display: block; margin-top: 5px; line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 29px; font-weight: 700; color: var(--v-tekst);
}
.rk-tv small {
  display: block; margin-top: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--v-tekst-2);
}
/* De datum is een woord, geen klok; hij mag kleiner staan. */
.rk-tv-dag b { font-size: 21px; margin-top: 8px; }
.rk-tv-laat { background: color-mix(in oklab, var(--v-rood) 12%, transparent); }
.rk-tv-laat b, .rk-tv-laat .rk-lab { color: var(--v-rood); }
.rk-tv-laat small { color: var(--v-rood); opacity: .9; }

/* 4. Van en naar. */
.rk-vn { display: flex; align-items: center; gap: 12px; }
.rk-vn + .rk-vn {
  margin-top: 11px; padding-top: 11px;
  border-top: 1px dashed var(--v-rand);
}
.rk-vn-l {
  flex: 0 0 42px;
  font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--v-dof);
}
.rk-vn-t { min-width: 0; }
/* De kaartknop hoort aan de rand, niet tegen de naam aan. */
.rk-vn .rk-rond { margin-left: auto; }
.rk-vn-t b {
  display: block; font-size: 15px; font-weight: 700;
  color: var(--v-tekst); line-height: 1.2;
}
.rk-vn-t small {
  display: block; margin-top: 2px;
  font-size: 12px; font-weight: 600; color: var(--v-tekst-2);
}

/* 5. De klant. */
.rk-kl { display: flex; align-items: center; gap: 10px; }
.rk-kl-w { min-width: 0; }
.rk-kl-w b {
  display: block; margin-top: 2px;
  font-size: 17px; font-weight: 700; color: var(--v-tekst); line-height: 1.2;
}
.rk-kl-nr {
  display: block; margin-top: 2px;
  font-size: 12px; font-weight: 600; color: var(--v-tekst-2);
  font-variant-numeric: tabular-nums;
}
.rk-pers {
  margin-left: auto; flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px; min-height: 40px;
  background: color-mix(in oklab, var(--v-tekst) 4%, transparent);
  border-radius: 11px; padding: 7px 12px;
}
.rk-pers svg {
  width: 18px; height: 18px; fill: none; stroke: var(--v-tekst-2);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rk-pers b { font-size: 22px; font-weight: 800; color: var(--v-tekst); line-height: 1; }

.rk-rond {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 11px; border: 0; display: grid; place-items: center;
  cursor: pointer; text-decoration: none;
}
.rk-rond svg { width: 18px; height: 18px; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.rk-rond-wa { background: var(--v-groen); }
.rk-rond-wa svg { stroke: #fff; }
.rk-rond-loc {
  background: color-mix(in oklab, var(--v-tekst) 4%, transparent);
  border: 1px solid var(--v-rand);
}
.rk-rond-loc svg { stroke: var(--v-tekst); }

/* 6. De vlucht: één regel. De landingstijd woont in het tijdblok en staat
      hier bewust niet nog een keer. */
.rk-vl { display: flex; align-items: center; gap: 11px; }
.rk-vl-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--v-teal) 13%, transparent);
}
.rk-vl-ico svg {
  width: 17px; height: 17px; fill: none; stroke: var(--v-teal);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rk-vl-laat .rk-vl-ico { background: color-mix(in oklab, var(--v-rood) 12%, transparent); }
.rk-vl-laat .rk-vl-ico svg { stroke: var(--v-rood); }
.rk-vl-t { min-width: 0; }
.rk-vl-t b {
  display: block; font-size: 17px; font-weight: 800;
  color: var(--v-tekst); line-height: 1.15; letter-spacing: .01em;
}
.rk-vl-t small {
  display: block; margin-top: 2px;
  font-size: 12px; font-weight: 600; color: var(--v-tekst-2);
}
.rk-vl-st { margin-left: auto; flex: 0 0 auto; text-align: right; }
.rk-vl-st small {
  display: block; margin-top: 4px;
  font-size: 11px; font-weight: 700; color: var(--v-rood);
}

/* De vervallen vlucht: geen tijd, wel een opdracht. */
.rk-vervallen { display: flex; align-items: center; gap: 11px; }
.rk-vervallen-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--v-rood) 12%, transparent);
}
.rk-vervallen-ico svg {
  width: 18px; height: 18px; fill: none; stroke: var(--v-rood);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.rk-vervallen b { display: block; font-size: 16px; font-weight: 800; color: var(--v-rood); }
.rk-vervallen small {
  display: block; margin-top: 2px;
  font-size: 12px; font-weight: 600; color: var(--v-rood); opacity: .85;
}

/* 7. De stappen staan BOVEN de knop, want ze gaan over die knop. */
.rk-stp { display: flex; align-items: center; margin-bottom: 11px; }
.rk-bol {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800;
  background: color-mix(in oklab, var(--v-dof) 15%, transparent); color: var(--v-dof);
}
.rk-bol svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rk-bol-klaar { background: var(--v-teal); color: #fff; }
.rk-bol-nu {
  background: var(--v-accent); color: #fff;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--v-accent) 18%, transparent);
}
.rk-lijn {
  flex: 1; height: 2px; margin: 0 5px;
  background: color-mix(in oklab, var(--v-dof) 22%, transparent);
}
.rk-lijn-klaar { background: var(--v-teal); }
.rk-stpl { display: flex; justify-content: space-between; margin: -6px 0 11px; }
.rk-stpl span { flex: 1; text-align: center; font-size: 9.5px; font-weight: 700; color: var(--v-dof); }
.rk-stpl span:first-child { text-align: left; }
.rk-stpl span:last-child { text-align: right; }
.rk-stpl .rk-nu { color: var(--v-accent); }
.rk-stpl .rk-klaar { color: var(--v-teal); }

.rk-knop {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border: 0; border-radius: 13px;
  background: var(--v-accent); color: #fff;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  text-decoration: none;
}
.rk-knop svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rk-knop-wa { background: var(--v-groen); }
/* Afwijzen is stil: het is een uitweg, geen aanbod. */
.rk-knop-stil {
  background: transparent; color: var(--v-tekst);
  border: 1px solid var(--v-rand-2); font-weight: 700; font-size: 14px; padding: 12px;
}
.rk-knop-stil svg { stroke: var(--v-tekst); width: 15px; height: 15px; }
.rk-sec form + form { margin-top: 8px; }
.rk-sec form + a.rk-knop { margin-top: 8px; }

/* 8. Hoe vers dit is. */
.rk-vers {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 9px 15px 11px; border-top: 1px solid var(--v-rand);
  font-size: 11px; font-weight: 600; color: var(--v-dof);
}
.rk-vers form { margin: 0; }

/* ---------------------------------------------------------------------
   DE RIT TERUGGEVEN — de stille regel op de kaart, en het blad erachter.

   Zelfde tokenlaag als de ritkaart hierboven; geen nieuwe kleuren. De regel
   is ROOD MAAR GEEN KNOP: hij is een uitweg, geen aanbod, en hij mag niet
   concurreren met de oranje actie erboven.
   --------------------------------------------------------------------- */
.rk-terug {
  display: flex;
  justify-content: center;
  padding: 11px 15px 13px;
  border-top: 1px solid var(--v-rand);
}
.rk-terug a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--v-rood);
  text-decoration: none;
}
.rk-terug a:hover { text-decoration: underline; }
.rk-terug svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Het blad zelf. Eén kaart, zo breed als de ritkaart waar hij op volgt. */
.rk-bladpagina { width: min(100%, 460px); margin: 0 auto; }

.rk-blad {
  background: var(--v-glas);
  border: 1px solid var(--v-rand);
  border-radius: var(--v-r);
  box-shadow: var(--v-diepte);
  overflow: hidden;
}
.rk-blad-kop { padding: 15px 15px 4px; }
.rk-blad-kop b {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px; font-weight: 700; line-height: 1.25;
  color: var(--v-tekst);
}
.rk-blad-kop small {
  display: block; margin-top: 5px;
  font-size: 12.5px; font-weight: 600; line-height: 1.45;
  color: var(--v-tekst-2);
}

.rk-keuzes { display: grid; gap: 9px; padding: 13px 15px 15px; }
.rk-keuzes form { display: grid; gap: 8px; margin: 0; }

.rk-keuze {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px; text-align: left;
  background: color-mix(in oklab, var(--v-tekst) 4%, transparent);
  border: 1px solid var(--v-rand);
  border-radius: 13px;
  font: inherit; color: var(--v-tekst); cursor: pointer;
}
.rk-keuze:hover { border-color: var(--v-rand-2); }

/* 'Iets anders' is GEEN derde knop. Hij vraagt een tekst, dus hij is een
   blokje met een eigen knop erin -- één omlijnd vlak dat als één ding leest,
   met wat lucht erboven zodat hij niet in de rij van twee lijkt te staan.
   Drie vlakken die er hetzelfde uitzien horen hetzelfde te doen. */
.rk-keuzeblok {
  display: grid; gap: 9px;
  margin-top: 5px; padding: 11px;
  background: color-mix(in oklab, var(--v-tekst) 4%, transparent);
  border: 1px solid var(--v-rand-2);
  border-radius: 15px;
}
/* De kop erbinnen draagt geen eigen rand meer: het vlak eromheen is de rand. */
.rk-keuzekop {
  display: flex; align-items: center; gap: 11px;
  cursor: pointer;
}
.rk-keuze-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--v-glas);
  border: 1px solid var(--v-rand);
}
.rk-keuze-ico svg {
  width: 17px; height: 17px; fill: none; stroke: var(--v-rood);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rk-keuze-t { min-width: 0; }
.rk-keuze-t b {
  display: block; font-size: 14.5px; font-weight: 700; color: var(--v-tekst);
}
.rk-keuze-t small {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 600; color: var(--v-tekst-2);
}

.rk-veld {
  width: 100%; padding: 12px 13px;
  background: var(--v-glas);
  border: 1px solid var(--v-rand-2);
  border-radius: 12px;
  font: inherit; font-size: 14px; color: var(--v-tekst);
}
.rk-veld::placeholder { color: var(--v-dof); }

.rk-bladterug {
  display: block; width: 100%; padding: 13px 11px;
  border-top: 1px solid var(--v-rand);
  background: color-mix(in oklab, var(--v-tekst) 3%, transparent);
  font-size: 13px; font-weight: 700; text-align: center;
  color: var(--v-tekst-2); text-decoration: none;
}
.rk-bladterug:hover { color: var(--v-tekst); }

/* =====================================================================
   HET DASHBOARD, OPNIEUW INGEDEELD  (mock-dashboard-modern.html, M1)
   ---------------------------------------------------------------------
   Drie lagen: de band ("er wacht iemand"), de tegelrij, en daaronder wat
   later komt. Wat leeg is valt weg, de volgorde schuift nooit.

   ÉÉN BETEKENIS PER KLEUR.
     rood  = er wacht iemand        amber = het loopt af
     groen = klaar                  al het andere is GRIJS
   Daarom hebben de iconen geen gekleurd vlakje meer: één lijndikte, één
   formaat, de doffe tekstkleur. Die kleurtjes betekenden niets en
   concurreerden met de enige kleur die hier wél iets zegt.

   Gescoopt op .thema-vurig-dash, naast .thema-vurig-order en
   .thema-vurig-rit, zodat geen ander scherm dit voelt. Alles op de
   bestaande --v-tokens; alleen --d-rood is nieuw, want het bestaande
   --v-rood is roze en dit moet ECHT rood zijn.
   ===================================================================== */
.thema-vurig-dash {
  /* ECHT rood, niet het roze van --v-rood: deze kleur betekent "er staat
     iemand te wachten" en moet zich van alles onderscheiden. */
  --d-rood:      light-dark(#e11d2e, #ff4d5c);
  --d-rood-vlak: light-dark(#fde7e9, #2a0d11);
  --d-rood-rand: light-dark(#f6bcc2, #5c1119);
  --d-rood-ink:  light-dark(#a5101f, #ff8f97);
  --d-groen:     light-dark(#12a150, #22c55e);
  --d-amber:     var(--v-amber);
  /* DRIE AMBER-TOKENS ERBIJ (#192). Er bestond alleen de kale --d-amber voor
     een streep en een cijfer; een amber BAND heeft net als de rode een vlak,
     een rand en een inkt nodig. Zelfde opbouw als de --d-rood-reeks, zodat
     de twee banden in maat en gedrag niet van elkaar verschillen -- alleen
     in kleur. */
  --d-amber-vlak: light-dark(#fdf3e2, #2a1c05);
  --d-amber-rand: light-dark(#f0d3a0, #5c3f0d);
  --d-amber-ink:  light-dark(#8a5300, #ffc961);
  --d-vlak:      var(--v-glas);
  --d-rand:      var(--v-rand);
  --d-r: 14px;

  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- gedeelde rij: streep, tijd, tekst, knop ------------------------- */
.thema-vurig-dash .dash-rij {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 17px;
}
.thema-vurig-dash .dash-rij + .dash-rij { border-top: 1px solid var(--d-rand); }
.thema-vurig-dash .dash-streep {
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  margin: -2px 0;
  border-radius: 3px;
  background: var(--v-dof);
}
.thema-vurig-dash .dash-streep-rood  { background: var(--d-rood); }
.thema-vurig-dash .dash-streep-amber { background: var(--d-amber); }
.thema-vurig-dash .dash-streep-groen { background: var(--d-groen); }
/* DE STATUSLADDER VAN EEN MELDING, op de band (#211-2). Dit is geen tweede
   reeks kleuren: het zijn dezelfde --v-tokens die /meldingen op .meld-rib
   zet, en dezelfde ladder die ritten en beurten al volgen -- rood = niks
   geregeld, indigo = mee bezig. De klassenaam is de status uit de database,
   dus er valt niets te vertalen.
   Alleen de open standen staan hier: de band toont geen afgesloten melding,
   dus teal en leisteen zouden dode regels zijn. */
.thema-vurig-dash .dash-streep-nieuw          { background: var(--v-rood); }
.thema-vurig-dash .dash-streep-in_behandeling { background: var(--v-indigo); }
.thema-vurig-dash .dash-tijd {
  flex: 0 0 62px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--v-tekst-2);
}
.thema-vurig-dash .dash-t { min-width: 0; }
.thema-vurig-dash .dash-t b {
  display: block;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--v-tekst);
}
.thema-vurig-dash .dash-t small {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--v-tekst-2);
}
.thema-vurig-dash .dash-knop {
  margin-left: auto; flex: 0 0 auto;
  padding: 6px 12px; border-radius: 8px;
  background: color-mix(in oklab, var(--v-tekst) 4%, transparent);
  border: 1px solid var(--d-rand);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--v-tekst); text-decoration: none;
}
.thema-vurig-dash .dash-knop:hover { border-color: var(--v-rand-2); }
.thema-vurig-dash .dash-knop-rood {
  background: var(--d-rood); border-color: var(--d-rood); color: #fff;
}
.thema-vurig-dash .dash-rij-leeg .dash-t b { color: var(--v-tekst-2); font-weight: 600; }

/* DE TELEFOON. Vier dingen naast elkaar -- streep, tijd, tekst, knop -- past
   niet onder de 500px: de tekst wringt zich dan in een kolom van een paar
   letters breed en de knop knijpt hem verder dicht. Daarom valt de rij hier
   uit elkaar: de streep blijft staan als merkteken over de hele hoogte, en
   tijd, tekst en knop komen onder elkaar. De knop pakt de volle breedte,
   want een knop van 80px op een telefoon is geen doel om te raken. */
@media (max-width: 500px) {
  .thema-vurig-dash .dash-rij {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 11px;
    row-gap: 9px;
    padding: 14px 15px;
  }
  .thema-vurig-dash .dash-streep { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .thema-vurig-dash .dash-tijd   { grid-column: 2; flex: none; }
  .thema-vurig-dash .dash-t      { grid-column: 2; }
  .thema-vurig-dash .dash-knop   {
    grid-column: 2;
    margin-left: 0;
    padding: 9px 12px;
    text-align: center;
  }
}

/* --- 1. DE BAND ------------------------------------------------------ */
.thema-vurig-dash .dash-band {
  background: var(--d-rood-vlak);
  border: 1px solid var(--d-rood-rand);
  border-radius: var(--d-r);
  overflow: hidden;
}
.thema-vurig-dash .dash-pkop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 17px;
  border-bottom: 1px solid var(--d-rand);
  font-size: 14.5px; font-weight: 700; color: var(--v-tekst);
}
.thema-vurig-dash .dash-pkop .dash-meta {
  font-size: 12px; font-weight: 500; color: var(--v-tekst-2);
}
/* DE KOP VAN "DEZE WEEK" IS SINDS #204 EEN LINK. Als <a> kreeg hij de
   standaard onderstreping en zag hij eruit als een link in lopende tekst, niet
   als een kopregel. Zelfde afspraak als .dash-meer hierboven: rustig in rust,
   onderstreept bij hover -- dan is hij te vinden zonder dat de kaart drie
   verschillende linkstijlen draagt. */
.thema-vurig-dash a.dash-pkop { text-decoration: none; }
.thema-vurig-dash a.dash-pkop:hover { text-decoration: underline; }
.thema-vurig-dash .dash-band .dash-pkop {
  border-bottom-color: var(--d-rood-rand); color: var(--d-rood-ink);
}
.thema-vurig-dash .dash-band .dash-pkop .dash-meta { color: var(--d-rood-ink); }
.thema-vurig-dash .dash-band .dash-rij + .dash-rij { border-top-color: var(--d-rood-rand); }
.thema-vurig-dash .dash-band .dash-tijd,
.thema-vurig-dash .dash-band .dash-t small { color: var(--d-rood-ink); }

/* DE BAND DRAAGT DE TINT VAN ZIJN LUIDSTE REGEL. Staat er niemand te wachten
   en is de scherpste regel amber, dan is de hele band amber -- van vlak tot
   inkt. Eén klasse erbij die alle rood-verwijzingen hierboven overschrijft;
   maat, spatiëring en gedrag blijven ongemoeid, want die staan in .dash-band
   zelf en worden hier niet herhaald. */
.thema-vurig-dash .dash-band-amber {
  background: var(--d-amber-vlak);
  border-color: var(--d-amber-rand);
}
.thema-vurig-dash .dash-band-amber .dash-pkop,
.thema-vurig-dash .dash-band-amber .dash-pkop .dash-meta { color: var(--d-amber-ink); }
.thema-vurig-dash .dash-band-amber .dash-pkop { border-bottom-color: var(--d-amber-rand); }
.thema-vurig-dash .dash-band-amber .dash-rij + .dash-rij { border-top-color: var(--d-amber-rand); }
.thema-vurig-dash .dash-band-amber .dash-tijd,
.thema-vurig-dash .dash-band-amber .dash-t small { color: var(--d-amber-ink); }

/* DE TWEEDE KOP. Staan beide groepen in de band, dan heeft de tweede kop een
   streep BOVEN zich nodig -- anders plakt "Nog te regelen" tegen de laatste
   wachtende gast en lijkt het een regel van die groep. */
.thema-vurig-dash .dash-band .dash-pkop2 {
  border-top: 1px solid var(--d-rood-rand);
}
.thema-vurig-dash .dash-band-amber .dash-pkop2 { border-top-color: var(--d-amber-rand); }

/* "nog N ->" -- de weg naar de rest. Geen knop: dit is geen actie op een
   boeking maar de rand van de lijst. Wel 42px hoog, want je moet hem op een
   telefoon met je duim kunnen raken (les #193). */
.thema-vurig-dash .dash-meer {
  display: flex; align-items: center;
  min-height: 42px; padding: 6px 17px;
  border-top: 1px solid var(--d-rood-rand);
  font-size: 12.5px; font-weight: 600;
  color: var(--d-rood-ink); text-decoration: none;
}
.thema-vurig-dash .dash-band-amber .dash-meer {
  border-top-color: var(--d-amber-rand); color: var(--d-amber-ink);
}
.thema-vurig-dash .dash-meer:hover { text-decoration: underline; }

/* --- DE PULS: VARIANT B, en alleen B --------------------------------
   Geen knipperend VLAK. Alleen de statusstreep en het aftelpilletje
   ademen; de tekst staat stil zodat hij leesbaar blijft.

   Rood gaat SNELLER dan amber (1,6 s tegen 2,6 s). Dat verschil is met
   opzet: je merkt aan het tempo dat er iets dringender is, ook zonder de
   kleur te lezen.

   En hij houdt AAN tot de regel weg is. Dat is een bewuste afwijking van
   #181, waar de puls één keer ging en daarna stopte: daar ging het om een
   kaart die je gezien moest hebben, hier om iets dat nog geregeld moet
   worden. Dat houdt niet op omdat je gekeken hebt. */
@keyframes dash-adem { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.thema-vurig-dash .dash-leeft       { animation: dash-adem 1.6s ease-in-out infinite; }
.thema-vurig-dash .dash-leeft-traag { animation: dash-adem 2.6s ease-in-out infinite; }

/* Doorlopende beweging is voor sommige mensen echt hinderlijk. De KLEUR
   blijft staan -- die draagt de betekenis, de beweging alleen de nadruk. */
@media (prefers-reduced-motion: reduce) {
  .thema-vurig-dash .dash-leeft,
  .thema-vurig-dash .dash-leeft-traag { animation: none; opacity: 1; }
  /* De fotokijker van Meldingen komt hier ook binnen (#211): wie beweging
     heeft uitgezet krijgt geen opkomend vlak. Bij dit blok en niet bij een
     eigen tweede: twee blokken met dezelfde media-query zijn twee plekken om
     te vergeten, en er staan tests die op HET blok snijden. */
  .thema-vurig-meld .meld-kijker-vak { animation: none; }
}

/* --- 2. DE TEGELRIJ -------------------------------------------------- */
.thema-vurig-dash .dash-tegels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .thema-vurig-dash .dash-tegels { grid-template-columns: repeat(2, 1fr); }
}
.thema-vurig-dash .dash-tegel {
  display: flex; flex-direction: column; gap: 9px;
  min-width: 0; padding: 15px 16px;
  background: var(--d-vlak);
  border: 1px solid var(--d-rand);
  border-radius: var(--d-r);
  text-decoration: none;
}
.thema-vurig-dash a.dash-tegel:hover { border-color: var(--v-rand-2); }
/* SINDS #197 ONGEBRUIKT, wacht op de veegronde. De Taxi-tegel was de enige
   die hem droeg, en die is weg.

   EN DAT IS MEER DAN OPRUIMWERK: hierdoor kan GEEN ENKELE tegel op die rij
   nog rood worden. Aankomst is neutraal, Alerts amber, Woningen groen,
   Keyholding grijs. Rood woont vanaf nu alleen in de band, waar staat wat
   niet geregeld is. Zet deze klasse dus niet terug op een tegel: dan staat
   hetzelfde signaal weer op twee plekken en tellen ze verschillend. */
.thema-vurig-dash .dash-tegel-alarm {
  background: var(--d-rood-vlak); border-color: var(--d-rood-rand);
}
.thema-vurig-dash .dash-tegel-alarm .dash-getal { color: var(--d-rood); }
/* Een tegel die er wél staat maar nog geen bron heeft. */
/* DOOD SINDS #202A. Deze drie -- .dash-tegel-wacht, .dash-getal-dof en
   .dash-nogniet -- kleedden de Keyholding-tegel toen die nog geen bron had:
   een stippellijn, een dof streepje en "nog niet gekoppeld". Sinds er een
   tabel is toont die tegel een echt getal en gebruikt geen enkel sjabloon ze
   nog. Ze blijven staan omdat de volgende tegel-zonder-bron ze zo weer kan
   dragen; weghalen is een veegronde, geen bijvangst van deze wijziging. */
.thema-vurig-dash .dash-tegel-wacht { border-style: dashed; }
.thema-vurig-dash .dash-tkop {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--v-tekst-2);
}
/* ALLE ICONEN DEZELFDE BEHANDELING: één lijndikte, één formaat, de doffe
   tekstkleur. Geen gekleurde vlakjes meer. */
.thema-vurig-dash .dash-tkop svg {
  flex: 0 0 auto; width: 16px; height: 16px;
  stroke-width: 1.7; stroke: currentColor; fill: none;
}
.thema-vurig-dash .dash-getal {
  font-size: 32px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--v-tekst);
}
.thema-vurig-dash .dash-getal-amber { color: var(--d-amber); }
.thema-vurig-dash .dash-getal-groen { color: var(--d-groen); }
.thema-vurig-dash .dash-getal-dof   { color: var(--v-dof); }
.thema-vurig-dash .dash-sub {
  font-size: 12.5px; line-height: 1.45; color: var(--v-tekst-2);
}
.thema-vurig-dash .dash-nogniet {
  align-self: flex-start;
  padding: 2px 6px; border: 1px solid var(--v-rand-2); border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--v-dof);
}

/* --- 3. "DAARNA" + DE RECHTERKOLOM ----------------------------------- */
.thema-vurig-dash .dash-romp {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
  align-items: start;
  min-width: 0;
}
@media (max-width: 900px) {
  .thema-vurig-dash .dash-romp { grid-template-columns: 1fr; }
}
.thema-vurig-dash .dash-paneel {
  min-width: 0;
  background: var(--d-vlak);
  border: 1px solid var(--d-rand);
  border-radius: var(--d-r);
  overflow: hidden;
}
.thema-vurig-dash .dash-kolom { display: flex; flex-direction: column; gap: 16px; }

.thema-vurig-dash .dash-telt {
  flex: 0 0 auto;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.thema-vurig-dash .dash-telt-amber { background: var(--d-amber); color: #231603; }
.thema-vurig-dash .dash-telt-rood  { background: var(--d-rood); color: #fff; }

/* De navigatiekaarten blijven staan tot de zijbalk er is, maar ze mogen
   niet meer om aandacht vragen: geen module-kleur, gewoon grijs. */
.thema-vurig-dash .dash-nav .vurig-chip {
  background: color-mix(in oklab, var(--v-tekst) 5%, transparent);
  color: var(--v-tekst-2);
}
.thema-vurig-dash .dash-nav .vurig-chip svg { stroke-width: 1.7; }

/* =====================================================================
   DE ZIJBALK  (mock-dashboard-modern.html, M1, de kolom links)
   ---------------------------------------------------------------------
   ALLEEN VOOR BEHEERDERS. base.html rendert hem niet als `zijbalk` leeg is,
   dus een chauffeur of schoonmaker krijgt de shell precies zoals hij was --
   .app-shell zonder .app-met-zijbalk, en dan geldt hieronder niets.

   Eén icoonstijl, één lijndikte, de doffe tekstkleur. Kleur betekent hier
   één ding: oranje is waar je nu bent. Alles op de bestaande --v-tokens;
   geen nieuwe kleur.
   ===================================================================== */
.app-met-zijbalk {
  --zij-breed: 212px;
  --zij-vlak: light-dark(#ffffff, #0f141e);
  --zij-rand: light-dark(#e4e7ee, rgba(255, 255, 255, .08));
  --zij-ink: light-dark(#1e2532, #e8ecf4);
  --zij-dof: light-dark(#6b7486, #8a94a6);
  --zij-actief-vlak: light-dark(#fff3e9, rgba(255, 107, 0, .16));
  --zij-actief-ink: light-dark(#c24f00, #ff9a4d);

  display: grid;
  grid-template-columns: var(--zij-breed) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}
/* De balk loopt van boven tot onder; de rest van de app staat rechts. */
.app-met-zijbalk > .zij { grid-column: 1; grid-row: 1 / -1; }
.app-met-zijbalk > .app-header { grid-column: 2; grid-row: 1; }
.app-met-zijbalk > .main-content { grid-column: 2; grid-row: 2; }
.app-met-zijbalk > .footer { grid-column: 2; grid-row: 3; }

/* DE GLOED MOET MEEKRIMPEN MET DE KOLOM.
   .thema-vurig::before is een laag van 100vw die op zijn eigen midden wordt
   gecentreerd. Zonder zijbalk viel dat midden samen met het midden van het
   scherm en sloot hij precies aan. Met de zijbalk ligt het midden van de
   inhoud de halve balkbreedte naar rechts, en stak de laag er aan de
   rechterkant net zo ver uit: de hele pagina kreeg een horizontale
   schuifbalk (1386px op een scherm van 1280). "Vol" is hier niet het scherm
   maar de kolom rechts. De inhoud staat precies in het midden van die kolom,
   dus dit sluit weer aan.

   Alleen boven de 900px: daaronder staat de balk bovenaan en is de kolom wél
   het hele scherm. */
@media (min-width: 901px) {
  .app-met-zijbalk .thema-vurig::before {
    width: calc(100vw - var(--zij-breed));
  }
}

.zij {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 14px;
  background: var(--zij-vlak);
  border-right: 1px solid var(--zij-rand);
}

.zij-merk {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 16px;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--zij-ink); text-decoration: none;
}
.zij-merk-logo {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px; overflow: hidden;
  /* Wit in BEIDE thema's: het embleem heeft zelf een lichte achtergrond en
     zou in het donker als los vlekje in de balk hangen. */
  background: #fff;
}
.zij-merk-logo img { width: 100%; height: 100%; object-fit: contain; }

.zij-nav { display: flex; flex-direction: column; gap: 3px; }
.zij-kop {
  margin: 14px 0 6px;
  padding: 0 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--zij-dof);
}
.zij-regel {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: 9px;
  font-size: 14px; font-weight: 500;
  color: var(--zij-dof); text-decoration: none;
}
.zij-regel:hover {
  background: color-mix(in oklab, var(--zij-ink) 5%, transparent);
  color: var(--zij-ink);
}

/* WAT ER NOG AAN KOMT: dezelfde regel, maar stiller en zonder bestemming.
   Het sjabloon maakt hier een <span> van, dus :hover kan hem al niet raken;
   deze regels zorgen dat hij er ook niet naar uitziet.

   DE KLEUR IS AFGELEID, NIET NIEUW. --zij-dof is al de kleur van een gewone
   menuregel, dus daar iets doffers van maken kan niet met datzelfde token.
   Een verzwakking met color-mix -- dezelfde techniek die vier regels hierboven
   voor de hover staat -- geeft het verschil zonder een kleur bij te verzinnen.
   En niet verder dan dit: dof is niet onzichtbaar, en in donker moet je hem
   nog kunnen lezen. */
.zij-regel[aria-disabled="true"] {
  color: color-mix(in oklab, var(--zij-dof) 62%, transparent);
  cursor: default;
}
.zij-regel svg { flex: 0 0 auto; width: 17px; height: 17px; }
.zij-naam { min-width: 0; }
/* WAAR JE BENT. De enige plek in dit menu waar kleur iets betekent. */
.zij-actief {
  background: var(--zij-actief-vlak);
  color: var(--zij-actief-ink);
  font-weight: 700;
}
.zij-actief:hover { background: var(--zij-actief-vlak); color: var(--zij-actief-ink); }
/* De teller. Een nul komt er niet in -- dat is geen nieuws. */
.zij-bol {
  margin-left: auto; flex: 0 0 auto;
  padding: 1px 7px; border-radius: 999px;
  background: color-mix(in oklab, var(--zij-ink) 8%, transparent);
  color: var(--zij-dof);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.zij-actief .zij-bol {
  background: color-mix(in oklab, var(--zij-actief-ink) 18%, transparent);
  color: var(--zij-actief-ink);
}

.zij-voet {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--zij-rand);
  display: flex; align-items: center; gap: 9px;
}
.zij-wie { min-width: 0; padding-left: 9px; }
.zij-naam-wie {
  display: block; font-size: 13px; font-weight: 600; color: var(--zij-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zij-rol { display: block; font-size: 11.5px; color: var(--zij-dof); }
.zij-uit {
  margin-left: auto; flex: 0 0 auto;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--zij-rand);
  font-size: 12.5px; font-weight: 600;
  color: var(--zij-dof); text-decoration: none;
}
.zij-uit:hover { color: var(--zij-ink); }

/* --- DE TELEFOON ------------------------------------------------------
   Een vaste kolom van 212px past hier niet. De balk ZAKT TERUG NAAR BOVEN
   en wordt een raster dat afbreekt -- geen inklapknop.

   Waarom geen knop: die moet zonder JavaScript werken, en dan blijft alleen
   een <details> over. Op een breed scherm moet zo'n details altijd open
   staan, en dat afdwingen met CSS werkt per browser anders (::details-content
   is nieuw, en de oude truc met display op de kinderen is dat niet meer).
   Een raster verbergt niets, heeft geen script nodig en werkt overal
   hetzelfde -- en met negen regels past het in drie rijen.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app-met-zijbalk {
    display: flex;
    flex-direction: column;
  }
  .zij {
    border-right: 0;
    border-bottom: 1px solid var(--zij-rand);
    padding: 12px 14px;
    gap: 8px;
  }
  .zij-merk { padding: 0 0 4px; }
  .zij-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 4px;
  }
  /* DE GROEPSKOPPEN BLIJVEN STAAN (#204). Hier stond display: none, met als
     reden dat de scheiding in een raster toch wegvalt. Dat klopte tot #199:
     sindsdien draagt de kop "Binnenkort" de enige uitleg bij Financieel en
     2FA. Zonder die kop staat "Financieel" op 375px gedimd tussen
     Instellingen en 2FA, zonder een woord waarom -- en de code gaat er
     (terecht, op de desktop) van uit dat de kop dat zegt.

     grid-column: 1 / -1 en niet een eigen rijhoogte: de kop pakt de volle
     breedte van het raster en staat daarmee boven zijn eigen groep, precies
     zoals in de kolomvorm. */
  .zij-kop { grid-column: 1 / -1; }
  .zij-voet { margin-top: 4px; padding-top: 10px; }
}


/* =====================================================================
   DE WEEK OP /boekingen  (mock-boekingen-agenda.html, weergave B)
   ---------------------------------------------------------------------
   Voorvoegsel wk-. NIET dash-: dat botst met de bestaande .dash-chip op de
   partnerpagina (les #175).

   EEN AFWIJKING VAN DE MOCK, EN MET OPZET. Daar is elke taakregel rood
   (.gebeurt.taak). Rood betekent hier iets anders: er is NIETS geregeld. Een
   ingeplande beurt en een rit met chauffeur zijn dus gewoon een regel; alleen
   .wk-alarm is rood. Zou alles rood zijn, dan valt de ontbrekende beurt --
   waar dit scherm voor bestaat -- nergens meer op.
   ===================================================================== */
.wk-bord {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}

.wk-dag {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  min-height: 12rem;
  padding: 0.55rem 0.5rem;
  background: var(--bg-surface-2);
  border-radius: 0.7rem;
}
.wk-vandaag { outline: 2px solid var(--accent); outline-offset: -2px; }

.wk-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.1rem;
}
.wk-kop b { font-size: 1.1rem; font-weight: 800; }
.wk-kop span {
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.wk-we .wk-kop span { color: var(--accent); }

.wk-r {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.wk-r:hover { border-color: var(--border-default); border-left-color: var(--accent); }
.wk-r em {
  font-style: normal;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.wk-r b {
  font-size: 0.79rem; font-weight: 800;
  overflow-wrap: anywhere;
}
.wk-r small { font-size: 0.66rem; color: var(--text-secondary); overflow-wrap: anywhere; }

/* De vier soorten. Grijs eruit, teal erin -- zoals de mock. */
.wk-uit  { border-left-color: var(--text-muted); }
.wk-aan  { border-left-color: var(--teal); }
.wk-taak { border-left-color: var(--indigo); }
.wk-rit  { border-left-color: var(--indigo); }

/* NIETS GEREGELD. De enige rode regel op dit scherm, en daarom werkt hij. */
.wk-alarm {
  border-color: var(--rood-rand);
  border-left-color: var(--rood-ink);
  background: var(--rood-zacht);
}
.wk-alarm em, .wk-alarm b { color: var(--rood-ink); }
.wk-alarm small { color: var(--rood-ink); }
.wk-alarm:hover { border-color: var(--rood-ink); border-left-color: var(--rood-ink); }

/* Geannuleerd blijft staan (besluit Dex), maar gedempt. Sinds #191B geldt
   dat ook voor het WERK dat aan zo'n boeking hangt: die taak en die rit
   blijven zichtbaar -- een rit die aan een vervallen boeking blijft hangen is
   zelf een opruimsignaal -- maar ze vragen niets meer en worden nooit rood.
   Dat is geen opmaak maar een rekenregel, en die staat in _week_dag().

   DE DOORHALING ALLEEN OP DE BOEKINGREGEL ZELF. Een beurt die aan een
   vervallen boeking hing kan gewoon zijn gedaan ("Afgehandeld · Celina");
   die doorstrepen zegt dat hij niet gebeurd is, en dat is niet waar. Voor het
   werk blijft het bij dempen. */
.wk-dof { border-left-color: var(--border-strong); opacity: 0.62; }
.wk-af b { text-decoration: line-through; color: var(--text-muted); }

.wk-leeg { margin: auto 0; font-size: 0.72rem; color: var(--text-muted); }

/* De streep onderaan: wie ligt er die nacht. margin-top:auto duwt hem naar de
   onderkant van het vak, ook als de dag verder leeg is. */
.wk-bezet {
  margin: auto 0 0;
  padding: 0.18rem 0.35rem;
  border-radius: 0.35rem;
  background: var(--indigo-zacht);
  color: var(--indigo);
  font-size: 0.6rem; font-weight: 800; text-align: center;
  overflow-wrap: anywhere;
}

.wk-rood-uitleg { color: var(--rood-ink); }
.wk-nu { font-size: 0.78rem; }

/* --- DE TELEFOON -----------------------------------------------------
   Onder 700px worden de zeven kolommen zeven RIJEN. Horizontaal schuiven op
   een telefoon is geen weergave maar een straf.

   DEZE BLOK STAAT ONDERAAN, EN DAT IS GEEN SLORDIGHEID: een media query die
   vóór de regel staat die hij moet overrulen, verliest bij gelijke
   specificiteit. Dat is precies de val uit de mock.

   min-height gaat eraf, zodat een stille dag tot één regel krimpt in plaats
   van zeven keer twaalf rem hoog te blijven staan. */
@media (max-width: 700px) {
  .wk-bord { grid-template-columns: minmax(0, 1fr); }
  .wk-dag { min-height: 0; }
  .wk-kop { align-items: center; }
  .wk-kop b { font-size: 1rem; }
  .wk-leeg { margin: 0; }
  .wk-bezet { margin-top: 0; }
}


/* =====================================================================
   /updates  (mock-updates.html)
   ---------------------------------------------------------------------
   EEN EIGEN, RUSTIGER DRIEKLANK. Deze pagina deelt de kleurentaal van de
   rest van het systeem MET OPZET NIET: daar betekent rood "niets geregeld",
   hier zou het "opgelost" moeten betekenen, en twee betekenissen voor een
   kleur is precies wat we elders aan het rechttrekken zijn. Dus indigo voor
   nieuw, teal voor verbeterd, grijs voor opgelost -- en grijs ook voor een
   soort die we niet kennen.

   Voorvoegsel up-. Gegrepen voor gebruik: .up- kwam 0 keer voor in theme.css
   en 0 keer in de sjablonen (les #175). Het kale .soort uit de mock is hier
   .up-soort geworden -- "soort" is een te gewoon woord om als klassenaam los
   in een gedeeld stijlblad te zetten.
   ===================================================================== */
.up {
  --up-rand:   light-dark(rgba(16, 20, 30, .09), rgba(255, 255, 255, .08));
  --up-dof:    light-dark(#55607a, #aab4c6);
  --up-stil:   light-dark(#7b869c, #6b7789);
  --up-indigo: light-dark(#5b52d6, #8b83ff);
  --up-teal:   light-dark(#0f9c86, #2ee6c5);
}

.up-kop { margin-bottom: 1.6rem; }
.up-kop h1 { margin: 0 0 .2rem; font-size: 1.65rem; letter-spacing: -.02em; }
.up-kop p { margin: 0; max-width: 62ch; font-size: .9rem; color: var(--up-dof); }

/* De dag: de datum links, de lijst rechts. */
.up-dag {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0 1.6rem;
}
.up-dag + .up-dag { margin-top: .2rem; }

/* DE DATUM SCHUIFT MEE. Lees je halverwege een lange dag, dan staat er nog
   steeds bij welke dag dat is -- zonder terug te scrollen. */
.up-datum {
  position: sticky;
  top: 1rem;
  align-self: start;
  padding-top: 1.15rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--up-stil);
}

.up-lijst {
  margin: 0;
  padding: 0 0 1.4rem 1.6rem;
  border-left: 1px solid var(--up-rand);
  list-style: none;
}
.up-post { position: relative; padding: 1.15rem 0 0; }
/* De stip op de tijdlijn. box-shadow in de paginakleur maakt het gat in de
   lijn, zodat de stip erop ligt in plaats van erdoorheen. */
.up-post::before {
  content: "";
  position: absolute; left: -1.6rem; top: 1.5rem;
  width: 7px; height: 7px; border-radius: 99px;
  transform: translateX(-3.5px);
  background: var(--up-stil);
  box-shadow: 0 0 0 3px var(--bg-page);
}
.up-post-nieuw::before { background: var(--up-indigo); }
.up-post-beter::before { background: var(--up-teal); }

.up-kopregel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
}
.up-post h2 {
  margin: 0;
  font-size: 1rem; font-weight: 650; letter-spacing: -.01em;
}
.up-post p {
  margin: .3rem 0 0;
  max-width: 64ch;
  font-size: .87rem; color: var(--up-dof);
}

.up-soort {
  padding: .14rem .45rem;
  border-radius: .28rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; white-space: nowrap;
  background: color-mix(in oklab, var(--up-stil) 15%, transparent);
  color: var(--up-stil);
}
.up-soort-nieuw {
  background: color-mix(in oklab, var(--up-indigo) 13%, transparent);
  color: var(--up-indigo);
}
.up-soort-beter {
  background: color-mix(in oklab, var(--up-teal) 15%, transparent);
  color: var(--up-teal);
}

.up-waar {
  margin: .4rem 0 0;
  font-size: .76rem; color: var(--up-stil);
}
.up-waar a { color: inherit; text-decoration: none; }
.up-waar code {
  font-family: ui-monospace, Menlo, monospace; font-size: .92em;
  border-bottom: 1px solid var(--up-rand);
}
.up-waar a:hover code { color: var(--accent); border-bottom-color: var(--accent); }

.up-leeg { color: var(--up-dof); font-size: .9rem; }

/* --- DE TELEFOON -----------------------------------------------------
   Een kolom van 6,5rem naast de tekst laat op een telefoon te weinig over.
   De datum gaat boven de dag staan en houdt op met meeschuiven -- sticky
   heeft geen zin als er niets naast staat.

   ONDERAAN, want bij gelijke specificiteit wint de laatste regel. */
@media (max-width: 640px) {
  .up-dag { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .up-datum { position: static; padding: 1.2rem 0 .2rem; }
  .up-lijst { padding-left: 1.2rem; }
  .up-post::before { left: -1.2rem; }
}


/* --- De updatetegel op het dashboard ---------------------------------
   Dezelfde paneelvorm als "Deze week" ernaast, maar de rijen dragen een
   SOORT-STIP in plaats van een statusstreep: een update heeft geen urgentie,
   dus geen streep die om aandacht vraagt en geen puls. */
.thema-vurig-dash .dash-stip {
  flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 99px;
  background: var(--v-dof);
}
.thema-vurig-dash .dash-stip-nieuw { background: var(--v-indigo); }
.thema-vurig-dash .dash-stip-beter { background: var(--v-teal); }
/* opgelost en onbekend houden de doffe grondkleur van .dash-stip. */

.thema-vurig-dash .dash-updates .dash-rij { align-items: flex-start; }
.thema-vurig-dash .dash-updates .dash-stip { margin-top: 6px; }
.thema-vurig-dash .dash-updates .dash-t small { color: var(--v-dof); }

.thema-vurig-dash .dash-alles {
  display: block;
  padding: 11px 17px;
  border-top: 1px solid var(--d-rand);
  font-size: 12.5px; font-weight: 600;
  color: var(--v-accent); text-decoration: none;
}
.thema-vurig-dash .dash-alles:hover {
  background: color-mix(in oklab, var(--v-tekst) 3%, transparent);
}


/* --- #194: alles wijst naar de boekingkaart --------------------------
   HET BOEKINGSNUMMER IS DE NAAM VAN DE DRAAD en stond weggestopt in de
   onderregel, tussen de gastnaam en de woning, op 12,5px -- de kleinste tekst
   van de regel. Het krijgt nu zijn eigen plek (vooraan) en zijn eigen gewicht.

   .reserveringsnummer bestond al (theme.css, gebruikt op /boekingen,
   taxi_beheer en woning_boekingen) -- gegrepen voor ik iets nieuws maakte,
   les #175. Hier alleen de maatvoering bijgesteld: het chipje van die klasse
   heeft een eigen achtergrond en rand, en dat is te veel meubilair op een
   regel die al een streep, een tijd en een knop draagt. Wat blijft is wat het
   nummer LEESBAAR maakt: monospace, meer gewicht, en de tekstkleur van de
   regel zelf -- ook in de rode band, waar een grijs chipje zou vloeken. */
.thema-vurig-dash .dash-t .reserveringsnummer {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  margin-right: .35rem;
}

/* De regels in "Deze week" zijn nu zelf de link. Een rij die eruitziet als
   een rij moet ook zo blijven lezen: geen onderstreping, geen linkkleur. */
.thema-vurig-dash a.dash-rij {
  color: inherit;
  text-decoration: none;
}
.thema-vurig-dash a.dash-rij:hover {
  background: color-mix(in oklab, var(--v-tekst) 3%, transparent);
}


/* --- #193D: het beeld en de actie ------------------------------------
   BEELD EN LINK DOEN TWEE VERSCHILLENDE DINGEN. Het beeld laat je begrijpen
   wat er veranderd is zonder de pagina te verlaten; de knop laat je het gaan
   gebruiken. Daarom krijgt elke update waar iets te zien is er een, ook als je
   er gewoon heen kunt klikken. */
.up-beeld {
  margin: .8rem 0 0;
  max-width: 520px;
}
/* EEN TELEFOONOPNAME IS SMAL EN HOOG. Op 520px breed wordt zo'n beeld ruim
   duizend pixels hoog en duwt het de tekst eromheen uit beeld; op 300px staat
   hij op de pagina zoals hij in het echt in je hand ligt. */
.up-beeld-staand { max-width: 300px; }
.up-beeld img {
  display: block;
  width: 100%; height: auto;
  border-radius: .55rem;
  border: 1px solid var(--up-rand);
}
.up-beeld figcaption {
  margin-top: .35rem;
  font-size: .73rem; color: var(--up-stil);
}
.up-beeld figcaption b { color: var(--up-dof); font-weight: 650; }

/* DE ACTIE. Stond in klein grijs onderaan -- het minst zichtbare element op de
   pagina, terwijl het het enige is waar je iets mee doet. Nu een knop, met
   genoeg hoogte om op een telefoon te raken. */
.up-doen {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .7rem;
  padding: .6rem .9rem;
  /* MINSTENS 42px HOOG. Met alleen padding kwam hij op 36 uit, en onder de
     40px is een knop op een telefoon te klein om te raken -- gemeten, niet
     geschat. box-sizing zodat de padding er niet nog eens bovenop komt. */
  min-height: 42px;
  box-sizing: border-box;
  border-radius: .5rem;
  background: color-mix(in oklab, var(--up-indigo) 12%, transparent);
  color: var(--up-indigo);
  font-size: .8rem; font-weight: 650; text-decoration: none;
}
.up-doen:hover {
  background: color-mix(in oklab, var(--up-indigo) 20%, transparent);
}
.up-doen:focus-visible {
  outline: 2px solid var(--up-indigo); outline-offset: 2px;
}
/* De route bestaat niet meer: het label blijft leesbaar, maar het is geen
   knop meer -- er valt niets te raken. */
.up-doen-dood {
  background: none;
  color: var(--up-stil);
  padding-left: 0;
}


/* ============================ MELDINGEN (#211) ============================
   Gescoopt op .thema-vurig-meld, naast .thema-vurig-dash en
   .thema-vurig-order. De tokens komen uit het blok bovenaan; er is hier geen
   enkele nieuwe kleur bedacht.

   DE STATUSLADDER IS DE BESTAANDE: rood = niks geregeld, indigo = mee bezig,
   teal = klaar, leisteen = vervallen. Precies de vier standen die het systeem
   al gebruikt voor ritten en beurten. De module zelf is amber, dezelfde
   familie als Alerts -- dit ís de aandacht-module.
   ========================================================================= */
.thema-vurig-meld .meld-filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 20px;
}
.thema-vurig-meld .meld-tab {
  font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--v-rand); color: var(--v-dof); text-decoration: none;
}
.thema-vurig-meld .meld-tab:hover { color: var(--v-tekst); border-color: var(--v-rand-2); }
.thema-vurig-meld .meld-telling {
  font-variant-numeric: tabular-nums; opacity: .75; margin-left: 5px;
}
.thema-vurig-meld .meld-tab[aria-pressed='true'] {
  background: color-mix(in oklab, var(--v-amber) 14%, var(--v-glas));
  border-color: color-mix(in oklab, var(--v-amber) 40%, var(--v-rand));
  color: var(--v-tekst);
}

.thema-vurig-meld .meld-lijst { display: flex; flex-direction: column; gap: 11px; }
.thema-vurig-meld .meld-kaart {
  display: grid; grid-template-columns: 6px 74px 1fr auto; gap: 0 16px;
  align-items: center; border: 1px solid var(--v-rand); border-radius: 15px;
  background: var(--v-glas); box-shadow: var(--v-diepte); overflow: hidden;
  text-decoration: none; color: inherit;
}
.thema-vurig-meld .meld-kaart:hover { box-shadow: var(--v-diepte-2); border-color: var(--v-rand-2); }
.thema-vurig-meld .meld-rib { align-self: stretch; background: var(--v-leisteen); }
.thema-vurig-meld .meld-nieuw .meld-rib          { background: var(--v-rood); }
.thema-vurig-meld .meld-in_behandeling .meld-rib { background: var(--v-indigo); }
.thema-vurig-meld .meld-opgelost .meld-rib       { background: var(--v-teal); }
.thema-vurig-meld .meld-vervallen .meld-rib      { background: var(--v-leisteen); }

.thema-vurig-meld .meld-duim {
  width: 74px; height: 74px; margin: 11px 0 11px 12px; border-radius: 11px;
  overflow: hidden; position: relative; background: rgba(0, 0, 0, .55);
  border: 1px solid var(--v-rand); flex: 0 0 auto; padding: 0; display: block;
}
.thema-vurig-meld .meld-duim img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* GEEN FOTO IS INFORMATIE, geen gat: het vlak zegt het zelf. */
.thema-vurig-meld .meld-duim-leeg {
  background: color-mix(in oklab, var(--v-tekst) 6%, transparent);
  display: grid; place-items: center;
}
.thema-vurig-meld .meld-duim-leeg::after {
  content: 'geen foto'; font-size: 10px; color: var(--v-dof);
}
.thema-vurig-meld .meld-duim-n {
  position: absolute; right: 4px; bottom: 4px; font-size: 10.5px; font-weight: 700;
  color: #fff; background: rgba(0, 0, 0, .62); border-radius: 6px; padding: 2px 5px;
  font-variant-numeric: tabular-nums;
}

.thema-vurig-meld .meld-tekst { padding: 13px 0; min-width: 0; }
.thema-vurig-meld .meld-wat {
  display: block; font-size: 15px; font-weight: 650; line-height: 1.35; margin: 0 0 4px;
}
/* De terugval voor een melding zonder tekst: cursief en doffer, zodat je ziet
   dat dit geen omschrijving is maar het ontbreken ervan. */
.thema-vurig-meld .meld-zonder { font-weight: 500; font-style: italic; color: var(--v-dof); }
.thema-vurig-meld .meld-waar {
  display: block; font-size: 12.5px; color: var(--v-dof); line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.thema-vurig-meld .meld-scheider { opacity: .5; margin: 0 6px; }

.thema-vurig-meld .meld-rechts {
  padding: 13px 16px 13px 0; display: flex; align-items: center; gap: 14px; flex-shrink: 0;
}
.thema-vurig-meld .meld-chip {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 5px 11px;
  border-radius: 999px; white-space: nowrap; border: 1px solid;
}
.thema-vurig-meld .meld-chip-nieuw {
  color: var(--v-rood); background: color-mix(in oklab, var(--v-rood) 12%, transparent);
  border-color: color-mix(in oklab, var(--v-rood) 32%, transparent);
}
.thema-vurig-meld .meld-chip-in_behandeling {
  color: var(--v-indigo); background: color-mix(in oklab, var(--v-indigo) 12%, transparent);
  border-color: color-mix(in oklab, var(--v-indigo) 32%, transparent);
}
.thema-vurig-meld .meld-chip-opgelost {
  color: var(--v-teal); background: color-mix(in oklab, var(--v-teal) 12%, transparent);
  border-color: color-mix(in oklab, var(--v-teal) 32%, transparent);
}
.thema-vurig-meld .meld-chip-vervallen {
  color: var(--v-leisteen); background: color-mix(in oklab, var(--v-leisteen) 12%, transparent);
  border-color: color-mix(in oklab, var(--v-leisteen) 30%, transparent);
}
.thema-vurig-meld .meld-opener {
  font-size: 13px; font-weight: 650; color: var(--v-accent); white-space: nowrap;
}
.thema-vurig-meld .meld-leeg { color: var(--v-dof); font-size: 14.5px; margin: 8px 0 0; }
.thema-vurig-meld .meld-toevoegen { margin-left: auto; text-decoration: none; }

/* Het toevoegformulier (#211-1). Twee kolommen op een breed scherm, een op
   een smal; de omschrijving en de foto lopen altijd over de volle breedte. */
.thema-vurig-meld .meld-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px;
  max-width: 720px;
}
@media (max-width: 620px) {
  .thema-vurig-meld .meld-form { grid-template-columns: 1fr; }
}
.thema-vurig-meld .meld-form label { display: flex; flex-direction: column; gap: 5px; }
.thema-vurig-meld .meld-form label > span { font-size: 12.5px; color: var(--v-dof); }
.thema-vurig-meld .meld-form-breed { grid-column: 1 / -1; }
.thema-vurig-meld .meld-form select,
.thema-vurig-meld .meld-form textarea,
.thema-vurig-meld .meld-form input[type='file'] {
  font: inherit; font-size: 13.5px; padding: 8px 11px; border-radius: 10px;
  border: 1px solid var(--v-rand); background: var(--v-glas); color: var(--v-tekst);
}
.thema-vurig-meld .meld-form textarea { resize: vertical; }
.thema-vurig-meld .meld-form-acties {
  grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding-top: 4px;
}
.thema-vurig-meld .meld-form-acties .btn { text-decoration: none; }
.thema-vurig-meld .meld-fout {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 12px; font-size: 14px;
  color: var(--v-rood); background: color-mix(in oklab, var(--v-rood) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--v-rood) 30%, transparent);
}

@media (max-width: 700px) {
  /* Op een telefoon vallen de duim en de chip onder de tekst; de rib blijft
     staan, want dat is het enige wat de stand op een smal scherm nog zegt. */
  .thema-vurig-meld .meld-kaart { grid-template-columns: 6px 1fr; }
  .thema-vurig-meld .meld-duim { grid-row: 2; margin: 0 0 11px 12px; }
  .thema-vurig-meld .meld-tekst { padding: 13px 12px 4px 0; }
  .thema-vurig-meld .meld-rechts { grid-column: 2; padding: 0 12px 13px 0; }
}

/* ---------- de detailpagina ---------- */
.thema-vurig-meld .meld-terug {
  font-size: 13px; font-weight: 600; color: var(--v-dof); text-decoration: none;
  display: inline-block; margin-bottom: 16px;
}
.thema-vurig-meld .meld-terug:hover { color: var(--v-tekst); }
.thema-vurig-meld .meld-detailkop {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 22px;
}
.thema-vurig-meld .meld-detailkop h1 { margin: 0; }
.thema-vurig-meld .meld-detailkop .meld-chip { margin-top: 5px; }
.thema-vurig-meld .meld-sub { margin: 6px 0 0; font-size: 14px; color: var(--v-dof); }
.thema-vurig-meld .meld-kolommen {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(230px, .85fr);
  gap: 22px; align-items: start;
}
@media (max-width: 760px) { .thema-vurig-meld .meld-kolommen { grid-template-columns: 1fr; } }

.thema-vurig-meld .meld-blok {
  border: 1px solid var(--v-rand); border-radius: 15px; background: var(--v-glas);
  box-shadow: var(--v-diepte); padding: 18px 20px 20px;
}
.thema-vurig-meld .meld-blok + .meld-blok { margin-top: 16px; }
.thema-vurig-meld .meld-blok h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--v-dof); margin: 0 0 12px;
}
.thema-vurig-meld .meld-blok p { margin: 0; font-size: 14.5px; line-height: 1.65; }
/* HIER STOND .meld-antwoord: het antwoord hing los onder het verloop, achter
   een streep, zonder te zeggen van wie of wanneer. Sinds #211-2 hangt het
   onder de wissel waarbij het is getypt, en is er niets meer dat die klasse
   draagt. Weggehaald in plaats van laten staan: dode CSS wordt bij de
   volgende ronde per ongeluk hergebruikt. */

.thema-vurig-meld .meld-feiten {
  display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; font-size: 13.5px;
  align-items: baseline; margin: 0;
}
.thema-vurig-meld .meld-feiten dt { color: var(--v-dof); }
.thema-vurig-meld .meld-feiten dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.thema-vurig-meld .meld-feiten dd a { color: var(--v-accent); text-decoration: none; font-weight: 650; }
.thema-vurig-meld .meld-feiten dd a:hover { text-decoration: underline; }

.thema-vurig-meld .meld-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.thema-vurig-meld .meld-strip .meld-duim {
  margin: 0; width: 104px; height: 104px; cursor: zoom-in; border: 1px solid var(--v-rand);
}
.thema-vurig-meld .meld-duim-knop { background: none; }
.thema-vurig-meld .meld-strip .meld-duim:hover,
.thema-vurig-meld .meld-strip .meld-duim:focus-visible {
  outline: 2px solid var(--v-accent); outline-offset: 2px;
}

.thema-vurig-meld .meld-verloop { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.thema-vurig-meld .meld-verloop li {
  display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding-bottom: 15px; position: relative;
}
.thema-vurig-meld .meld-verloop li:last-child { padding-bottom: 0; }
.thema-vurig-meld .meld-verloop li::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px;
  background: var(--v-leisteen);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--v-leisteen) 22%, transparent);
}
.thema-vurig-meld .meld-verloop li.rood::before {
  background: var(--v-rood); box-shadow: 0 0 0 3px color-mix(in oklab, var(--v-rood) 22%, transparent);
}
.thema-vurig-meld .meld-verloop li.indigo::before {
  background: var(--v-indigo); box-shadow: 0 0 0 3px color-mix(in oklab, var(--v-indigo) 22%, transparent);
}
.thema-vurig-meld .meld-verloop li.teal::before {
  background: var(--v-teal); box-shadow: 0 0 0 3px color-mix(in oklab, var(--v-teal) 22%, transparent);
}
.thema-vurig-meld .meld-verloop li:not(:last-child)::after {
  content: ''; position: absolute; left: 4.5px; top: 18px; bottom: 2px; width: 1px;
  background: var(--v-rand);
}
.thema-vurig-meld .meld-verloop-wat { font-weight: 600; }
.thema-vurig-meld .meld-flauw { color: var(--v-dof); font-weight: 500; }
.thema-vurig-meld .meld-verloop-wie { color: var(--v-dof); font-variant-numeric: tabular-nums; }
/* De notitie bij een wissel: inspringen doet hij niet, hij staat al in de
   tekstkolom van zijn eigen regel. Wel iets donkerder dan het "wie", want dit
   is de inhoud en dat is de herkomst. */
.thema-vurig-meld .meld-verloop-notitie {
  display: block; margin-top: 5px; font-size: 13.5px; color: var(--v-tekst-2);
}

.thema-vurig-meld .meld-acties {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--v-rand);
}
.thema-vurig-meld .meld-notitie { display: flex; flex-direction: column; gap: 5px; flex: 1 1 100%; max-width: 420px; }
.thema-vurig-meld .meld-notitie span { font-size: 12.5px; color: var(--v-dof); }
.thema-vurig-meld .meld-notitie textarea {
  font: inherit; font-size: 13.5px; padding: 8px 11px; border-radius: 10px;
  border: 1px solid var(--v-rand); background: var(--v-glas); color: var(--v-tekst);
  resize: vertical;
}

/* ---------- de fotokijker ----------
   Geen eigen pagina en geen eigen URL: /meldingen/foto/<id> is send_file, dus
   het BESTAND. Een browser toont daar een kale JPEG met niets om naar te
   klikken. Vandaar een lichtbak binnen de detailpagina. */
.thema-vurig-meld .meld-kijker {
  position: fixed; inset: 0; z-index: 200; background: rgba(6, 8, 12, .78);
  display: grid; place-items: center; padding: 18px;
}
/* DIT IS GEEN FRANJE. `display: grid` hierboven overruled de display:none die
   het attribuut [hidden] van zichzelf meebrengt. Zonder deze regel is de
   kijker onzichtbaar maar ligt hij wél over de hele pagina, en vangt hij elke
   klik af -- ook die op de duim die hem zou moeten openen. Gevonden op de
   render, niet in de code. */
.thema-vurig-meld .meld-kijker[hidden] { display: none; }
body.meld-kijker-open { overflow: hidden; }
.thema-vurig-meld .meld-kijker-vak {
  background: #0b0d11; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--v-diepte-2);
  max-width: 620px; width: 100%; animation: meld-kijker-in .16s ease-out;
}
@keyframes meld-kijker-in { from { opacity: 0; transform: scale(.98); } }
.thema-vurig-meld .meld-kijker-balk {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px; color: #e9edf5;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.thema-vurig-meld .meld-kijker-titel { font-size: 14px; font-weight: 650; }
.thema-vurig-meld .meld-kijker-teller {
  font-size: 12.5px; color: #98a2b3; font-variant-numeric: tabular-nums;
}
.thema-vurig-meld .meld-kijker-sluit {
  margin-left: auto; font-size: 20px; line-height: 1; color: #98a2b3; background: none;
  border: 0; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.thema-vurig-meld .meld-kijker-sluit:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.thema-vurig-meld .meld-kijker-vlak {
  position: relative; display: grid; place-items: center; padding: 20px 66px; min-height: 260px;
}
.thema-vurig-meld .meld-kijker-vlak img {
  max-width: 100%; max-height: 56vh; border-radius: 10px; display: block;
}
.thema-vurig-meld .meld-pijl {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .09); color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.thema-vurig-meld .meld-pijl:hover { background: rgba(255, 255, 255, .18); }
.thema-vurig-meld .meld-pijl-links { left: 12px; }
.thema-vurig-meld .meld-pijl-rechts { right: 12px; }
.thema-vurig-meld .meld-kijker-voet {
  padding: 14px 18px 18px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.thema-vurig-meld .meld-kijker-notitie { color: #e9edf5; font-size: 14.5px; margin: 0 0 5px; }
.thema-vurig-meld .meld-kijker-notitie.meld-zonder { color: #98a2b3; }
.thema-vurig-meld .meld-kijker-meta {
  color: #8b95a8; font-size: 12.5px; font-variant-numeric: tabular-nums; margin: 0;
}
.thema-vurig-meld .meld-kijker-toets { color: #667085; font-size: 11.5px; margin: 10px 0 0; }

/* ---------- Plaatsen (#213A) ----------
   Alleen het BEHEERSCHERM. De publieke kant (de balk en de tegels op de
   homepage) is #213B en staat hier bewust nog niet. */
.plaats-mini {
  width: 54px; height: 40px; border-radius: 8px; object-fit: cover;
  display: block; border: 1px solid var(--border-default);
}
/* Zonder foto een leeg vlak dat zegt dat het leeg is -- geen gat in de rij. */
.plaats-mini-leeg {
  background: var(--bg-surface-2);
  background-image: linear-gradient(135deg, transparent 46%,
    var(--border-default) 46%, var(--border-default) 54%, transparent 54%);
}
/* De grijze uitleg onder een veld. Stond als klasse in plaats_form.html en
   woning_form.html zonder dat er ooit een regel voor was, dus hij kwam er als
   gewone tekst uit (#213A-1). Alleen deze twee formulieren gebruiken hem. */
.veld-hint {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-secondary);
  font-weight: 400;
}
.veld-hint + .veld-hint { margin-top: .15rem; }

.plaats-groot {
  max-width: 320px; width: 100%; border-radius: 12px; display: block;
  margin: 0 0 12px; border: 1px solid var(--border-default);
}