/* =========================================================================
   Oude Wesselink Routeplanner — mobile-first stylesheet in ikwiltuinmeubelen-stijl
   Drop-in vervanging voor static/style.css. Alle bestaande classnames uit de
   templates blijven werken; alleen de opmaak verandert.
   Brandtokens: donkergroen #2E4033, zand #FAF9F6/#F1EBE0, terracotta #B85C38,
   goud #B59461, borders #E5E0D5. Font: DM Sans (met systemfont-fallback).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');

:root {
  --green-900: #1E2C22;
  --green-700: #2E4033;
  --green-500: #4a6252;
  --green-100: #F1EBE0;   /* warm sand i.p.v. groentint */
  --green-50:  #FAF9F6;
  --gold:      #B59461;
  --gold-100:  #FDF6E9;
  --gold-700:  #8a6f42;
  --terracotta: #B85C38;
  --terracotta-100: #FBEAE4;
  --amber-100: #FDF6E9;
  --amber-700: #8a6f42;
  --red-100:   #FBEAE4;
  --red-700:   #B03A20;
  --ink:       #1a1a1a;
  --ink-soft:  #5a5a5a;
  --ink-faint: #8d8880;
  --border:      #E5E0D5;
  --border-soft: #EFEAE0;
  --bg:   #FAF9F6;
  --card: #ffffff;
  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(30,44,34,.05);
  --shadow: 0 1px 2px rgba(30,44,34,.05), 0 6px 16px rgba(30,44,34,.05);
  --shadow-lg: 0 8px 20px rgba(30,44,34,.07), 0 20px 44px rgba(30,44,34,.08);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --tap: 44px;                 /* minimale raakvlakhoogte */
}

* { box-sizing: border-box; }

body {
  font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  color-scheme: light;
  margin: 0;
  padding: 0 16px 96px;        /* mobiel: smalle marges, ruimte voor stickybar */
  line-height: 1.55;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
@media (min-width: 760px) { body { padding: 0 28px 56px; } }

::selection { background: var(--green-100); color: var(--green-700); }
a { color: var(--green-700); }
a:hover { color: var(--terracotta); }

/* ---------- Topbar: plakkend, logo + navigatiepillen ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin: 0 -16px var(--space-4);
  position: sticky; top: 0; z-index: 20;
  background: var(--green-700);
}
@media (min-width: 760px) { .topbar { padding: 14px 28px; margin: 0 -28px var(--space-6); } }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 20px; width: auto; display: block; }
@media (min-width: 760px) { .brand-logo { height: 26px; } }

.topbar nav {
  display: flex; gap: 4px; flex: 1 1 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .topbar nav { flex: 0 0 auto; } }

.topbar nav a {
  color: rgba(255,255,255,.82); text-decoration: none;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  padding: 12px 15px; border-radius: var(--radius-full);
  min-height: var(--tap); display: inline-flex; align-items: center;
}
.topbar nav a:hover { color: #fff; }
.topbar nav a.active { background: #fff; color: var(--green-700); font-weight: 700; }

/* ---------- Koppen ---------- */

h1 {
  font-size: 25px; font-weight: 700; margin: 0 0 6px;
  letter-spacing: -.02em; color: var(--ink);
}
@media (min-width: 760px) { h1 { font-size: 28px; } }

.page-lede { color: var(--ink-soft); font-size: 14px; max-width: 66ch; margin: 0 0 var(--space-4); }
.plankaart-hint { font-size: 13px; color: var(--ink-faint); margin: -8px 0 var(--space-4); }

h2 {
  font-size: 17px; font-weight: 700; color: var(--ink);
  margin: var(--space-6) 0 var(--space-3); padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; text-transform: capitalize;
}
.day-map-link {
  font-size: 13.5px; font-weight: 700; text-transform: none;
  color: var(--green-700); text-decoration: none; white-space: nowrap;
  padding: 8px 0; min-height: var(--tap); display: inline-flex; align-items: center;
}
.freeze-all-form { margin: 0 0 var(--space-4); }

/* ---------- Knoppen: vol-breed op mobiel ---------- */

button, .btn {
  font-family: inherit; font-size: 15px; font-weight: 700;
  border: 1px solid var(--border); background: var(--card); color: var(--green-700);
  border-radius: var(--radius); padding: 13px 16px; min-height: var(--tap);
  cursor: pointer; transition: background .14s var(--ease), border-color .14s var(--ease);
  width: 100%;
}
@media (min-width: 620px) { button, .btn { width: auto; } }
button:hover, .btn:hover { border-color: var(--green-500); }
button:active { background: var(--green-100); }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
button.primary, .btn.primary { background: var(--green-700); color: #fff; border-color: var(--green-700); }
button.primary:hover { background: var(--green-900); border-color: var(--green-900); color: #fff; }

button.danger, .btn.danger { color: var(--terracotta); border-color: #e8c9ba; }
button.danger:hover, .btn.danger:hover { background: var(--terracotta-100); border-color: var(--terracotta); color: var(--terracotta); }

.toolbar { margin: var(--space-4) 0 var(--space-3); }
.solver-form {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
@media (min-width: 620px) { .solver-form { flex-direction: row; align-items: center; } }

.exclude-drivers {
  font-size: 13px; color: var(--ink-faint); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; background: var(--card);
}
.exclude-drivers summary { cursor: pointer; font-weight: 700; }
.exclude-drivers label { display: flex; align-items: center; gap: 6px; padding: 6px 0 0 2px; color: var(--ink); }
.excluded-drivers-note { color: var(--ink-faint); font-size: 13px; margin: 0 0 var(--space-3); }

/* ---------- Chauffeursschermen-links ---------- */

.driver-links {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; margin: var(--space-2) 0 var(--space-5); padding: 0;
}
.driver-links-label { color: var(--ink-faint); font-weight: 700; flex: 1 1 100%; font-size: 12px;
  text-transform: uppercase; letter-spacing: .07em; }
.driver-links a {
  color: var(--green-700); text-decoration: none; font-weight: 700;
  padding: 11px 15px; min-height: var(--tap); display: inline-flex; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-full);
}
.driver-links a:hover { background: var(--green-100); }

/* ---------- Dag-tabs: horizontaal scrollend ---------- */

.day-tabs {
  display: flex; gap: 8px; margin: 0 -16px var(--space-4); padding: 0 16px var(--space-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: 1px solid var(--border-soft);
}
.day-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .day-tabs { flex-wrap: wrap; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }

.day-tab {
  font-size: 14px; font-weight: 700; text-decoration: none; color: var(--ink);
  padding: 11px 15px; min-height: var(--tap); border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--card);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.day-tab.active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.day-tab.empty { color: var(--ink-faint); font-weight: 500; }
.day-tab-count { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.25); border-radius: var(--radius-full); padding: 2px 7px; }
.day-tab:not(.active) .day-tab-count { background: var(--green-100); color: var(--green-700); }

/* ---------- Samengevouwen dagen ---------- */

.day-collapsed h2 { border-bottom: none; margin-bottom: var(--space-2); }
.day-collapsed-link { color: var(--ink); text-decoration: none; }
.route-summary-rows { display: flex; flex-direction: column; gap: 8px; }
.route-summary-row {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; min-height: var(--tap);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink); font-size: 14px; flex-wrap: wrap;
}
.route-summary-row.frozen { border-left: 3px solid var(--green-700); }
.route-summary-row.repaired { border-left: 3px solid var(--gold); }
.route-summary-row.flagged_unviable { border-left: 3px solid var(--terracotta); }
.route-summary-driver { font-weight: 700; text-transform: capitalize; font-size: 16px; flex: 1; }
.route-summary-stat { color: var(--ink-soft); font-size: 13px; }

/* ---------- Routekaarten ---------- */

.day { margin-bottom: var(--space-4); }
.routes { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 760px) { .routes { flex-direction: row; flex-wrap: wrap; gap: 18px; } }

.route {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 0; overflow: hidden;
}
@media (min-width: 760px) { .route { min-width: 260px; flex: 1 1 300px; max-width: 360px; } }

.route.frozen { border-left: 3px solid var(--green-700); }
.route.repaired { border-left: 3px solid var(--gold); }
.route.flagged_unviable { border-left: 3px solid var(--terracotta); }

.route h3 {
  margin: 0; padding: 14px 16px; background: var(--green-100);
  font-size: 17px; font-weight: 700; text-transform: capitalize;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between;
}
.status-pill {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 9px; border-radius: var(--radius-full);
  color: var(--green-700); background: #fff;
}
.route.frozen .status-pill { background: var(--green-700); color: #fff; }
.route.repaired .status-pill { background: var(--gold); color: var(--green-900); }
.route.flagged_unviable .status-pill { background: var(--terracotta); color: #fff; }
.route-km { font-size: 13px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; text-transform: none; }

.route-departure {
  font-size: 13px; font-weight: 700; color: var(--gold-700); background: var(--gold-100);
  display: block; padding: 10px 16px; margin: 0;
}

.stop {
  font-size: 14px; padding: 13px 16px; margin: 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 3px;
}
.stop:last-of-type { border-bottom: none; }
/* Ophaal-stop (Jeroen, 2026-08-18: "kunnen we zien wat ophalen is") — een
   linker accentrand is scanbaar zonder de badge te moeten lezen, blauw
   zelfde als de personeel-weekagenda's "magazijn"-kleur. */
.stop.pickup { border-left: 3px solid var(--blue-700); padding-left: 13px; }
.stop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.stop .seq {
  flex: none; color: var(--green-700); font-weight: 700; font-size: 11px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--green-100);
  display: inline-flex; align-items: center; justify-content: center; margin-right: 4px;
}
.stop .window { color: var(--ink-soft); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.stop-address { color: var(--ink-soft); font-size: 13.5px; padding-left: 26px; }
.stop-details { color: var(--ink-soft); font-size: 13px; padding-left: 26px; display: flex; flex-direction: column; gap: 2px; }
.stop-badges { padding-left: 26px; margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

.badge {
  font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: var(--radius-sm);
  background: var(--green-100); color: var(--green-700); white-space: nowrap;
}
.badge.cod { background: var(--terracotta); color: #fff; }
.badge.paid { background: var(--green-100); color: var(--green-500); }
.badge.km { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--border); }
.badge.overdue { background: var(--terracotta-100); color: var(--red-700); }
.badge.pickup { background: var(--blue-100); color: var(--blue-700); }

.end-of-day {
  margin: 0; padding: 12px 16px; background: var(--bg); border-top: 1px solid var(--border-soft);
  font-size: 13px; color: var(--ink-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.end-of-day-toggle { display: flex; gap: 8px; }
.end-of-day-toggle form { display: contents; }
.end-of-day-toggle button { font-size: 13px; padding: 11px 10px; width: 100%; }
.end-of-day-toggle button.active { background: var(--green-700); color: #fff; border-color: var(--green-700); }

.actions {
  margin: 0; padding: 12px 16px; border-top: 1px solid var(--border-soft); background: #FCFBF8;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch;
}
.actions form { flex: 1 1 130px; display: block; }
.actions button { font-size: 14px; padding: 12px 10px; }
.actions a {
  flex: 1 1 90px; color: var(--green-700); text-decoration: none; font-weight: 700; font-size: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 10px; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
}

/* Bevroren routes stapelden Kaart/Bellijst/Overdracht/Herstellen/Ontdooien
   allemaal los onder elkaar (Jeroen, 2026-08-15: "dit is wel echt een stuk
   drukte") — Overdracht/Herstellen/Ontdooien (zeldzamer gebruikt dan Kaart/
   Bellijst) zitten nu achter een <details>-uitklapper, geen JS nodig. */
.actions details { flex: 1 1 90px; }
.actions summary {
  list-style: none; cursor: pointer; color: var(--green-700); font-weight: 700; font-size: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 10px; min-height: var(--tap); display: flex; align-items: center; justify-content: center;
}
.actions summary::-webkit-details-marker { display: none; }
.actions summary::after { content: "▾"; margin-left: 6px; font-size: 11px; }
.actions details[open] summary { border-color: var(--green-500); }
.actions details[open] summary::after { content: "▴"; }
.actions-more-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; min-width: 160px; }

/* ---------- Run-paneel ---------- */

.run-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 14px 16px; margin: var(--space-2) 0 var(--space-4);
}
.run-panel-failed { border-left: 3px solid var(--terracotta); background: var(--red-100); }
.run-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.run-panel-title { font-weight: 700; font-size: 14px; }
.run-panel-time { font-size: 13px; color: var(--ink-faint); }
.run-panel-metrics { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); margin: 6px 0; }
.run-panel-metrics b { color: var(--ink); font-weight: 700; font-size: 17px; }
.run-panel-note { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.run-panel-error { color: var(--red-700); font-weight: 600; }
.run-panel-progress { color: var(--gold-700); font-weight: 600; }

.run-panel-details { margin-top: 4px; }
.run-panel-details summary { cursor: pointer; }
.run-panel-details summary::marker { color: var(--ink-faint); }
.run-panel-detail-list { margin: 6px 0 0 20px; padding: 0; font-size: 13px; color: var(--ink-soft); }
.run-panel-detail-list li { margin-bottom: 3px; }
.run-panel-detail-list a { color: var(--green-700); font-weight: 600; text-decoration: none; }

.skipped-orders { margin-top: 12px; }
.skipped-orders-title { font-size: 12px; font-weight: 700; color: var(--terracotta);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.skipped-orders a { color: var(--green-700); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--tap); }
.huisnummer-fix-form { display: flex; gap: 6px; align-items: center; }
.huisnummer-fix-form input[type="text"] { width: 84px; padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.huisnummer-fix-form button { padding: 6px 10px; font-size: 13px; min-height: 0; }

/* ---------- Flashes ---------- */

.flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-4); }
.flash {
  padding: 13px 15px; border-radius: var(--radius); font-size: 14px;
  border: 1px solid var(--border); display: flex; align-items: center; gap: 8px;
}
.flash-success { background: var(--green-100); color: var(--green-700); border-color: var(--border); }
.flash-error { background: var(--red-100); color: var(--red-700); border-color: #f0d3c9; }
.flash-warning { background: var(--gold-100); color: var(--gold-700); border-color: #ecdcc0; }
.flash-info { background: var(--bg); color: var(--ink-soft); }

.empty {
  color: var(--ink-faint); font-size: 14px;
  padding: 16px; background: var(--card); border: 1px dashed var(--border);
  border-radius: var(--radius); text-align: left;
}

/* ---------- Tabellen: kaartrijen op mobiel ---------- */

table { border-collapse: collapse; width: 100%; background: var(--card);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
th, td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
th { background: var(--green-100); color: var(--green-700); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; }
tr.cod { background: var(--terracotta-100); }
tr:last-child td { border-bottom: none; }

@media (max-width: 759px) {
  table { display: block; background: none; box-shadow: none; }
  thead { display: none; }
  tbody, tr, td { display: block; width: 100%; }
  tr {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    margin-bottom: 10px; padding: 6px 0; overflow: hidden;
  }
  tr.cod { border-left: 3px solid var(--terracotta); background: var(--card); }
  td { border-bottom: none; padding: 7px 16px; }
  td:first-child { font-weight: 700; font-size: 16px; padding-top: 12px; }
  td:empty { display: none; }
  td button { margin-top: 4px; }
  td a[href^="tel:"], td a[href*="wa.me"], td a[href^="sms:"] {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
    padding: 12px 16px; margin: 4px 6px 4px 0; border-radius: var(--radius);
    background: var(--green-700); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
  }
  td a[href*="wa.me"] { background: #fff; color: var(--green-700); border: 1px solid var(--border); }
  td a[href^="sms:"] { background: #fff; color: var(--green-700); border: 1px solid var(--border); }
}

/* ---------- Formulieren ---------- */

input, select, textarea {
  font-family: inherit; font-size: 16px;      /* 16px voorkomt zoom op iOS */
  padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--ink); width: 100%; min-height: var(--tap);
}
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--green-700); }

/* Bellijst: andere-dag-paneel */
.andere-dag-panel {
  margin-top: 10px; padding: 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px;
}
.andere-dag-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); }
.andere-dag-weekday {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600;
  padding: 10px 13px; min-height: var(--tap); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-full);
}

/* Personeel */
.pers-form {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 18px 16px; margin: var(--space-2) 0 var(--space-5); max-width: 640px;
}
.pers-form h2 { margin: 0 0 4px; padding: 0; border: none; font-size: 17px; }
.pers-form .hint { color: var(--ink-soft); font-size: 13px; margin: 0 0 16px; }
.pers-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
@media (min-width: 620px) { .pers-grid { grid-template-columns: 1fr 1fr; gap: 14px 16px; } }
.pers-grid label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.pers-grid textarea { resize: vertical; min-height: 56px; }
.pers-full { grid-column: 1 / -1; }

/* Personeel — statuskleuren, ook gebruikt door de weekgrid-cellen hieronder.
   'magazijn' krijgt een eigen (nieuwe) tint — de bestaande --gold/--amber en
   --terracotta/--red-paren zijn letterlijk dezelfde kleuren (zie :root),
   dus 'afwezig' (terracotta) en 'deels' (gold) hadden al geen derde tint
   over die er niet als een van beide uitziet. */
:root {
  --blue-100: #E7EFF6;
  --blue-700: #2f5d8a;
}
.pers-status { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.pers-status.unavailable { background: var(--terracotta-100); color: var(--terracotta); }
.pers-status.partial { background: var(--gold-100); color: var(--gold-700); }

/* Personeel — weekagenda (Jeroen, 2026-08-17: "een daadwerkelijke agenda/
   week planning" i.p.v. een los invulformulier) */
.week-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: var(--space-2) 0 var(--space-4);
}
.week-nav-btn {
  font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: none;
  padding: 9px 13px; min-height: var(--tap); display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card);
  white-space: nowrap;
}
.week-nav-today { background: var(--green-100); border-color: var(--green-100); }
.week-nav-label { font-size: 14px; font-weight: 700; color: var(--ink-soft); text-align: center; flex: 1; }

.week-grid-wrap { overflow-x: auto; margin-bottom: var(--space-5); }
.week-grid { border-collapse: collapse; width: 100%; min-width: 640px; }
.week-grid th, .week-grid td { border: 1px solid var(--border-soft); padding: 6px; text-align: center; }
.week-grid thead th { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; padding: 8px 6px; }
.week-grid th.week-grid-today, .week-grid td.week-grid-today { background: var(--green-50); }
.week-grid-driver-col { text-align: left !important; font-size: 13.5px; font-weight: 700; white-space: nowrap; padding-left: 10px !important; }
.week-grid-driver-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

.week-grid-cell { position: relative; min-width: 88px; }
.week-grid-cell details { position: relative; }
.week-grid-cell summary {
  list-style: none; cursor: pointer; min-height: var(--tap); display: flex;
  align-items: center; justify-content: center; padding: 4px;
}
.week-grid-cell summary::-webkit-details-marker { display: none; }
.cell-empty { color: var(--ink-faint); font-size: 16px; font-weight: 700; }
.cell-pill.afwezig { background: var(--terracotta-100); color: var(--terracotta); font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: var(--radius-full); }
.cell-pill.magazijn { background: var(--blue-100); color: var(--blue-700); font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: var(--radius-full); }
.cell-pill.deels { background: var(--gold-100); color: var(--gold-700); font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: var(--radius-full); }
.cell-pill.conflict { background: var(--red-100); color: var(--red-700); font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: var(--radius-full); }

.cell-panel {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 12px; width: 220px; text-align: left;
}
.cell-warning { font-size: 12px; color: var(--red-700); margin: 0 0 8px; }
.cell-radio-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cell-radio-group label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cell-time-row { display: flex; gap: 6px; margin-bottom: 8px; }
.cell-time-row input[type="time"] { width: 100%; font-size: 13px; padding: 7px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.week-grid-cell input[type="text"] {
  width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 8px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit;
}
.cell-save { width: 100%; font-size: 13px; padding: 8px; min-height: 36px; }
.cell-clear {
  width: 100%; margin-top: 6px; font-size: 12px; color: var(--ink-soft); background: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px; cursor: pointer;
}

.bulk-form { margin-bottom: var(--space-6); }
.bulk-form summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink-soft); padding: 8px 0; }
.bulk-form .cell-radio-group { flex-direction: row; flex-wrap: wrap; gap: 16px; }

/* Aankomende uitzonderingen — scanbaar overzicht los van de zichtbare week
   (Jeroen, 2026-08-17: "zijn de toekomstige vakanties ook inzichtelijk") */
.upcoming-title { font-size: 16px; margin: 0 0 var(--space-2); }
.upcoming-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-5); }
.upcoming-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px;
  background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 10px 12px;
}
.upcoming-driver { font-weight: 700; }
.upcoming-day { color: var(--ink-soft); }
.upcoming-note { color: var(--ink-faint); font-style: italic; }
.upcoming-link { font-size: 12.5px; font-weight: 700; color: var(--green-700); text-decoration: none; margin-left: auto; }
.upcoming-clear { width: auto; margin-top: 0; padding: 5px 10px; font-size: 11.5px; }

/* Inloggen */
.gate-wrap { max-width: 380px; margin: 48px auto 0; }
.gate-wrap form { display: flex; flex-direction: column; gap: 12px; }
.gate-wrap .error { color: var(--red-700); margin-bottom: 12px; font-size: 14px; }
.gate-logo {
  background: var(--green-700); border-radius: var(--radius-lg); padding: 22px 26px;
  display: flex; justify-content: center; margin-bottom: 26px;
}
.brand-logo-lg { height: 34px; width: auto; display: block; }

/* Overdracht */
.overdracht-cols { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 760px) { .overdracht-cols { flex-direction: row; gap: 32px; } }
.overdracht-col { flex: 1; min-width: 0; }
.overdracht-route { margin-bottom: var(--space-6); }
@media print { .no-print { display: none; } }

/* Kaarten (Leaflet) */
#map, #intl-map {
  height: 58vh; min-height: 320px; margin: var(--space-3) -16px;
  border-radius: 0; border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
@media (min-width: 760px) {
  #map, #intl-map { margin: var(--space-3) 0; border: 1px solid var(--border); border-radius: var(--radius-lg); height: 70vh; }
}
.legend {
  display: flex; flex-direction: column; gap: 4px; margin: var(--space-3) 0 0; padding: 8px 0;
  background: none; border: none; box-shadow: none; font-size: 14px;
}
.legend-item {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; min-height: var(--tap);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.legend-item a { font-weight: 700; text-decoration: none; flex: 1; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.legend-count { color: var(--ink-soft); font-size: 13px; }

/* Buitenland: tripplanner */
.intl-nav { display: flex; gap: 8px; margin: 0 -16px var(--space-3); padding: 0 16px;
  overflow-x: auto; scrollbar-width: none; }
.intl-nav::-webkit-scrollbar { display: none; }
.intl-nav a {
  padding: 11px 15px; min-height: var(--tap); border-radius: var(--radius-full);
  border: 1.5px solid var(--border); font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--ink); background: var(--card); white-space: nowrap;
  display: inline-flex; align-items: center;
}
.intl-summary { display: flex; flex-direction: column; gap: 12px; margin: var(--space-2) 0 var(--space-4); }
@media (min-width: 760px) { .intl-summary { flex-direction: row; flex-wrap: wrap; gap: 14px; } }
.intl-summary-card {
  flex: 1; min-width: 0; padding: 16px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border-top: 3px solid var(--border);
}
.intl-summary-card h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.intl-summary-card h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.intl-summary-card .metrics { display: flex; gap: 20px; flex-wrap: wrap; }
.intl-summary-card .metrics .metric { display: flex; flex-direction: column; gap: 2px; }
.intl-summary-card .metrics .metric-label { font-size: 11px; color: var(--ink-faint); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.intl-summary-card .metrics b { color: var(--ink); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.intl-driver-section { margin-top: var(--space-3); }
.intl-driver-heading { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.intl-driver-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.trip-timeline { position: relative; margin: var(--space-2) 0 var(--space-5); padding-left: 34px; }
.trip-timeline::before { content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.trip-timeline .day { position: relative; margin-bottom: var(--space-5); }
.trip-timeline .day::before {
  content: ""; position: absolute; left: -34px; top: 2px; width: 25px; height: 25px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--day-color, var(--green-700));
}
.trip-timeline .day::after {
  content: attr(data-day-num); position: absolute; left: -34px; top: 2px; width: 25px; height: 25px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--day-color, var(--green-700));
}
.trip-timeline .day h2 { border-bottom: none; margin: 0 0 4px; padding-bottom: 0; font-size: 15.5px; }
.day-meta { font-size: 13px; color: var(--ink-faint); font-weight: 500; }
.day-endcap {
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft); background: var(--green-100);
  border-radius: var(--radius-full); padding: 7px 13px; margin: 10px 0 14px; display: inline-flex;
}
.pause-row {
  font-size: 12.5px; font-weight: 700; color: var(--gold-700); background: var(--gold-100);
  padding: 9px 16px; margin: 8px 0;
}
.intl-waiting { margin: var(--space-2) 0 var(--space-4); }
.intl-waiting h2 { margin-bottom: 8px; }
.intl-waiting-list { background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.intl-waiting-item {
  display: flex; gap: 6px; flex-direction: column; padding: 13px 16px; font-size: 14px;
  border-bottom: 1px solid var(--border-soft); color: var(--ink-soft);
}
@media (min-width: 620px) { .intl-waiting-item { flex-direction: row; gap: 14px; align-items: baseline; } }
.intl-waiting-item:last-child { border-bottom: none; }
.intl-waiting-item .name { font-weight: 700; color: var(--ink); min-width: 90px; }
.intl-waiting-item .place { flex: 1; }
.intl-waiting-item .days { color: var(--ink-faint); font-size: 13px; }

/* Verplaatsen (drag-and-drop) — blijft desktop-gedrag */
.stop[draggable="true"] { cursor: grab; }
.stop[draggable="true"]:active { cursor: grabbing; }
.stop.dragging { opacity: .4; }
.route.drop-target { outline: 2px dashed var(--gold); outline-offset: 4px; background: var(--green-50); }