* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

:root {
  --accent:   #E8431A;
  --accent2:  #FF6B3D;
  --green:    #27AE60;
  --yellow:   #F0B429;
  --navy:     #1B3A6B;
  --red:      #C0392B;
  --purple:   #8B5CF6;
  --blue:     #4A9EFF;

  --bg:       #0A0A0B;
  --surface:  #141416;
  --surface2: #1E1E21;
  --surface3: #252528;
  --border:   #2C2C30;
  --border2:  #3A3A3E;
  --text:     #F5F5F7;
  --subtext:  #8E8E93;
  --muted:    #48484A;

  /* Marc 28 jul: kleine luchtspleet tussen een pil en de daglijnen van het
     planbord, zodat je in één oogopslag ziet bij welke dag een kaart hoort. */
  --sl-pill-gap: 3px;

  --radius:   12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  font-family: 'Avenir Next', 'AvenirNext-Regular', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
}

body { background: var(--bg); color: var(--text); min-height: 100vh; font-weight: 400; }

/* Marc-wens 14 jun: Avenir Next gaat tot Medium (500). Geen bold/700+. */
b, strong, th, dt, h1, h2, h3, h4, h5, h6, .bold,
button, label, legend,
.btn, .btn-primary, .btn-secondary, .btn-sm,
.tab, .ntab, .stab, .stab-group, .vbtn, .rchip,
.modal-title, .section-title, .stat-label,
.form-label, .settings-card-title { font-weight: 500; }

/* Marc-wens 14 jun: Ultra Light (200) voor decoratieve display-typografie —
   geeft elegant typografisch contrast op grote cijfers/datums/titles.
   Niet op kleine tekst (< ~16px) want dat wordt te dun en lastig leesbaar.
   Niet op kentekens of interactieve labels — die moeten duidelijk blijven. */
.stat-value,        /* dashboard cijfers (32px+) */
.tg-day-date,       /* planning datum-display (22px) */
.sl-day-date,       /* slot-overzicht datum (22px) */
.ae-big-days,       /* AE-suggest cijfers (20px) */
.mb-title,                              /* ochtend-briefing groet (16px) */
[data-i18n="login.subtitle"],           /* "Pop-up Damage Repair planner" */
.jv-head-meta {                         /* "Jan de Vries · Dossier #..." onder kenteken */
  font-weight: 200;
}

body.light {
  --bg: #F2F2F7; --surface: #FFFFFF; --surface2: #F2F2F7; --surface3: #E8E8ED;
  --border: #D1D1D6; --border2: #C6C6C8; --text: #000000; --subtext: #6C6C70; --muted: #AEAEB2;
}

/* ── HEADER ─────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,11,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 58px;
  display: flex; align-items: center; justify-content: space-between;
}
body.light .header { background: rgba(242,242,247,0.9); }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 500; color: white; letter-spacing: -1px;
}
.brand-name { font-size: 15px; font-weight: 500; letter-spacing: -0.3px; }
.brand-sub  { font-size: 10px; color: var(--subtext); font-weight: 400; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.hbtn {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 14px;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.18s; white-space: nowrap;
}
.hbtn:hover { border-color: var(--border2); }
.hbtn.primary { background: var(--accent); color: white; border-color: var(--accent); }
.hbtn.primary:hover { background: var(--accent2); }

/* ── NAV TABS ─────────────────────────────── */
.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex; gap: 0; overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.ntab {
  padding: 13px 16px; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--subtext); font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.ntab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.nbadge {
  background: var(--accent); color: white;
  border-radius: 10px; padding: 1px 7px; font-size: 10px; font-weight: 500;
}

/* ── Sub-navigatie: één segmented control binnen de sectie (§3/§5.1) ───────
   Bewust NIET vormgegeven als tweede tab-rij: dat zou de vijftien tabs gewoon
   over twee regels verdelen. Chips in een aparte, lichtere balk — het oog leest
   zo eerst de sectie en daarna de verfijning. */
.subnav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 7px 24px;
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subtab {
  padding: 5px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--subtext); font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
  display: flex; align-items: center; gap: 6px;
}
.subtab:hover { background: var(--surface2); color: var(--text); }
.subtab.active {
  background: var(--accent); color: white; border-color: var(--accent);
}
/* Een sub-view die nog gebouwd wordt (Rapporten › Analyse). Zichtbaar, zodat de
   plek in de structuur al duidelijk is, maar niet klikbaar. */
.subtab.unavailable { opacity: 0.45; cursor: not-allowed; }
.subnav-sep {
  width: 1px; height: 18px; background: var(--border); margin: 0 4px;
  flex: 0 0 auto;
}
/* De originele tellers verhuizen naar de chips. Op een actieve (oranje) chip
   moet de badge leesbaar blijven, ook als hij zijn eigen kleur meebrengt. */
.subtab .nbadge { font-size: 9px; padding: 0 6px; }
.subtab.active .nbadge { background: rgba(255,255,255,0.28) !important; }

/* Locatie-chips in de header (§5.2) — vervangen de drie location-tab-rows. */
.header-loc-tabs { display: flex; align-items: center; gap: 4px; }
.header-loc-tabs .loc-tab { padding: 5px 10px; font-size: 12px; }

.loc-tab {
  padding: 7px 14px; background: var(--surface); 
  border: 1px solid var(--border); border-radius: 18px;
  color: var(--subtext); font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
  display: flex; align-items: center; gap: 5px;
}
.loc-tab:hover { background: var(--surface2); color: var(--text); }
.loc-tab.active {
  background: var(--accent); color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(232, 67, 26, 0.25);
}
.loc-tab-count {
  background: rgba(255,255,255,0.25); color: inherit;
  border-radius: 8px; padding: 0 6px; font-size: 10px; font-weight: 500;
}
.loc-tab:not(.active) .loc-tab-count {
  background: var(--surface2);
}

/* ── MAIN ─────────────────────────────── */
.main { padding: 20px 24px; max-width: 1200px; margin: 0 auto; }
.page { display: none; }
.page.active { display: block; }

/* ── CARDS / SURFACES ─────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.card + .card { margin-top: 14px; }

.section-hdr {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.section-title { font-size: 17px; font-weight: 500; letter-spacing: -0.2px; }
.section-sub {
  font-size: 10px; font-weight: 500; color: var(--subtext);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 10px; margin-top: 18px;
}
.section-sub:first-child { margin-top: 0; }

/* ── BTNS ─────────────────────────────── */
.btn {
  padding: 10px 18px; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; border: none; transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent2); }
.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--border2); }
.btn-green { background: rgba(39,174,96,0.15); color: var(--green); border: 1px solid rgba(39,174,96,0.3); }
.btn-sm { padding: 7px 13px; font-size: 12px; border-radius: 8px; }
.btn-danger { background: rgba(192,57,43,0.12); color: var(--red); border: 1px solid rgba(192,57,43,0.25); }

/* ── FORM ─────────────────────────────── */
.form-field { margin-bottom: 14px; }
.form-label {
  display: block; font-size: 10px; font-weight: 500;
  color: var(--subtext); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; color: var(--text);
  font-family: inherit; font-size: 15px; outline: none;
  transition: border-color 0.18s; -webkit-appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .form-row, .form-row3 { grid-template-columns: 1fr; } }

/* ── SEGMENTED CONTROL (transmission, status, etc) ─────────────── */
.seg-control {
  display: inline-flex; gap: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
  width: 100%;
}
.seg-btn {
  flex: 1;
  background: transparent; border: 0;
  padding: 9px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--subtext);
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
  text-align: center;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── TAGS ─────────────────────────────── */
.tag {
  padding: 3px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  display: inline-block;
}
.tag-green  { background: rgba(39,174,96,0.12);  color: var(--green); }
.tag-orange { background: rgba(232,67,26,0.12);  color: var(--accent); }
.tag-yellow { background: rgba(240,180,41,0.12); color: var(--yellow); }
.tag-blue   { background: rgba(74,158,255,0.12); color: var(--blue); }
.tag-purple { background: rgba(139,92,246,0.12); color: var(--purple); }
.tag-red    { background: rgba(192,57,43,0.12);  color: var(--red); }

/* ── MODAL ─────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 850; display: none; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(6px);
}
@media (min-width: 700px) { .modal-overlay { align-items: center; padding: 24px; } }
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%; max-width: 680px; max-height: 94vh; overflow-y: auto;
}
@media (min-width: 700px) { .modal { border-radius: var(--radius-xl); } }
.modal-drag {
  width: 36px; height: 4px; background: var(--border);
  border-radius: 2px; margin: 12px auto 0;
}
@media (min-width: 700px) { .modal-drag { display: none; } }
.modal-hdr {
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: var(--surface); z-index: 5;
}
.modal-title { font-size: 17px; font-weight: 500; letter-spacing: -0.2px; }
.modal-close {
  background: var(--surface2); border: none; border-radius: 50%;
  width: 30px; height: 30px; color: var(--subtext);
  cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.modal-body { padding: 20px 22px; }
.modal-footer {
  padding: 14px 22px 28px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
}
@media (max-width: 600px) {
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; justify-content: center; padding: 14px; }
  /* Mobile header: verberg labels, alleen icons/vlaggen */
  #lang-toggle .lang-label { display: none !important; }
  .loc-prefix { display: none !important; }
  .intake-label { display: none !important; }
  #location-select { max-width: 140px !important; font-size: 12px !important; padding: 5px 8px !important; }
  .brand-sub { display: none; }
  .header-actions { gap: 4px !important; }
  .header-actions .hbtn { padding: 6px 10px !important; }
}

/* Login-scherm: uniforme taal-vlaggen + thema-toggle (gelijk in office/tech/surmise) */
.login-flag-btn {
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 6px 9px; font-size: 18px; line-height: 1;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.login-flag-btn:hover { border-color: var(--accent); }
.login-flag-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232,67,26,0.25); }
.login-flag-btn:active { transform: scale(0.95); }

/* ══════════════════════════════════════
   PAGE 1 — SCAN INTAKE
══════════════════════════════════════ */

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--border2); border-radius: var(--radius-lg);
  padding: 40px 24px; text-align: center; cursor: pointer;
  transition: all 0.2s; position: relative;
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--accent); background: rgba(232,67,26,0.04); }
.upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon { font-size: 40px; margin-bottom: 10px; }
.upload-title { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.upload-sub { font-size: 12px; color: var(--subtext); }

/* AE breakdown table */
.ae-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ae-table th {
  text-align: left; padding: 7px 10px;
  font-size: 10px; font-weight: 500; color: var(--subtext);
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border); background: var(--surface2);
}
.ae-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.ae-table tr:last-child td { border-bottom: none; }
.ae-table .total-row td { font-weight: 500; color: var(--accent); background: rgba(232,67,26,0.05); }
.ae-bar {
  height: 4px; background: var(--border); border-radius: 2px; margin-top: 4px;
}
.ae-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s; }

/* Star rating */
.star-row { display: flex; gap: 6px; }
.star-btn {
  background: none; border: none; font-size: 26px; cursor: pointer;
  transition: transform 0.1s; padding: 2px; line-height: 1;
  filter: grayscale(1) opacity(0.4);
}
.star-btn.on { filter: none; transform: scale(1.1); }
.star-btn:hover { transform: scale(1.15); filter: none; }

/* Rating chips */
.rating-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rchip {
  padding: 8px 16px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--surface2);
  color: var(--subtext); font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: all 0.18s;
}
.rchip.on { color: var(--text); background: var(--surface3); border-color: var(--accent); }
.rchip.risk-low.on    { border-color: var(--green);  color: var(--green); background: rgba(39,174,96,0.08); }
.rchip.risk-medium.on { border-color: var(--yellow); color: var(--yellow); background: rgba(240,180,41,0.08); }
.rchip.risk-high.on   { border-color: var(--red);    color: var(--red);    background: rgba(192,57,43,0.08); }
.rchip.paint-klein.on  { border-color: var(--green);  color: var(--green);  background: rgba(39,174,96,0.08); }
.rchip.paint-middel.on { border-color: var(--yellow); color: var(--yellow); background: rgba(240,180,41,0.08); }
.rchip.paint-groot.on  { border-color: var(--red);    color: var(--red);    background: rgba(192,57,43,0.08); }

/* Damage photo grid */
.dmg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 700px) { .dmg-grid { grid-template-columns: repeat(4, 1fr); } }

.dmg-slot {
  position: relative; aspect-ratio: 4/3;
  background: var(--surface2); border: 1.5px dashed var(--border2);
  border-radius: 10px; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dmg-slot.filled { border-style: solid; border-color: var(--green); }
.dmg-slot img { width: 100%; height: 100%; object-fit: cover; }
.dmg-slot-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.6); color: white;
  font-size: 10px; font-weight: 500; padding: 4px 6px;
  text-align: center;
}
.dmg-add-btn {
  background: none; border: none; color: var(--subtext);
  font-size: 24px; cursor: pointer; display: flex;
  flex-direction: column; align-items: center; gap: 4px;
  font-family: inherit;
}
.dmg-add-label { font-size: 10px; font-weight: 500; color: var(--subtext); }

/* AE big display */
.ae-big {
  background: linear-gradient(135deg, rgba(232,67,26,0.1), rgba(232,67,26,0.03));
  border: 1px solid rgba(232,67,26,0.2);
  border-radius: var(--radius-lg); padding: 20px 24px;
  display: flex; align-items: center; gap: 20px; margin-bottom: 16px;
}
.ae-big-num { font-size: 52px; font-weight: 500; color: var(--accent); letter-spacing: -2px; line-height: 1; }
.ae-big-info { flex: 1; }
.ae-big-label { font-size: 11px; font-weight: 500; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.1em; }
.ae-big-sub { font-size: 13px; color: var(--subtext); margin-top: 4px; }
.ae-big-days { font-size: 20px; font-weight: 500; color: var(--text); margin-top: 4px; }

/* Scan list */
.scan-card {
  /* Marc 14 jun: zelfde hoogte als Timewise queue-pil (compact) */
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px;
  cursor: pointer; transition: all 0.18s;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.scan-card:hover { border-color: var(--border2); transform: translateY(-1px); }
.scan-card + .scan-card { margin-top: 10px; }
.scan-rego { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }
.scan-meta { font-size: 11px; color: var(--subtext); margin-top: 2px; }
.scan-status { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.stars { display: flex; gap: 2px; font-size: 13px; }

/* Progress stepper */
.stepper { display: flex; gap: 0; margin-bottom: 24px; }
.step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
.step:not(:last-child)::after {
  content: ''; position: absolute;
  top: 14px; left: 50%; width: 100%; height: 2px;
  background: var(--border);
}
.step.done::after { background: var(--green); }
.step.active::after { background: var(--border); }
.step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface2); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: var(--subtext);
  z-index: 1; position: relative;
}
.step.done .step-dot { background: var(--green); border-color: var(--green); color: white; }
.step.active .step-dot { background: var(--accent); border-color: var(--accent); color: white; }
.step-label { font-size: 10px; color: var(--subtext); font-weight: 500; text-align: center; }
.step.active .step-label { color: var(--accent); }
.step.done .step-label { color: var(--green); }

/* Intake wizard steps */
.intake-step { display: none; }
.intake-step.active { display: block; }

/* ══════════════════════════════════════
   PAGE 2 — PLANNING BOARD (TIME GRID)
══════════════════════════════════════ */

/* Calendar nav */
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.cal-title { font-size: 17px; font-weight: 500; letter-spacing: -0.3px; }
.cal-arrow {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 13px;
  color: var(--text); font-family: inherit; font-size: 15px;
  cursor: pointer; transition: all 0.18s; font-weight: 500;
}
.cal-arrow:hover { border-color: var(--border2); }

/* ── TIME GRID ── */
.time-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.time-grid {
  display: grid;
  /* col 0 = time labels, then 1 col per day */
  min-width: 700px;
  position: relative;
}

.tg-header-row {
  display: contents;
}

.tg-time-label-header {
  width: 54px;
  min-width: 54px;
  background: var(--surface2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.tg-day-header {
  background: var(--surface2);
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  padding: 10px 12px;
  text-align: center;
  position: relative;
}
.tg-day-header.today-col { border-bottom-color: var(--accent); }
.tg-day-name { font-size: 11px; font-weight: 500; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.08em; }
.tg-day-date { font-size: 22px; font-weight: 500; color: var(--text); line-height: 1.1; }
.tg-day-header.today-col .tg-day-date { color: var(--accent); }
.tg-day-header.cap-over {
  background: linear-gradient(180deg, rgba(192,57,43,0.12), rgba(192,57,43,0.04));
  border-bottom-color: #C0392B !important;
}
.tg-day-header.cap-over .tg-day-date { color: #C0392B; }
.tg-day-header.day-closed {
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.02));
  opacity: 0.6;
}
.tg-day-header.day-closed .tg-day-date { color: var(--subtext); }
.tg-day-header.day-blocked {
  background: linear-gradient(180deg, rgba(127,140,141,0.18), rgba(127,140,141,0.06));
  border-bottom-color: #7F8C8D !important;
}
.tg-day-header.day-blocked .tg-day-date { color: #7F8C8D; text-decoration: line-through; }

/* ════════════════════════════════════════════════════════════
   SWIMLANE PLANNING VIEW
   ════════════════════════════════════════════════════════════ */
/* Costa 3 aug: de kopbalken van de planning-tab (dag-navigatie, view-knoppen,
   legenda, filterbalk) MOETEN wegscrollen — verticale ruimte is hier het
   kostbaarste goed. Daarom scrolt de pagina zelf weer verticaal (geen eigen
   kader meer om het bord) en blijft alléén de dagkop-rij staan.
   Het bord scrolt nog wél horizontaal, maar die scroll-container zit nu op
   #swimlane-grid; de kop is een losse, aan de viewport plakkende strook die in
   JS horizontaal met het bord wordt meegeschoven. Zou de kop binnen een
   verticale scroll-container zitten, dan zou hij bij het wegscrollen van de
   pagina mee naar boven verdwijnen. */
.swimlane-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  /* Bewust GEEN overflow/max-height: dat zou een scroll-container maken en de
     dagkop weer aan dit kader vastpinnen i.p.v. aan de viewport. */
}
.swimlane-grid {
  display: grid;
  min-width: 100%;
  /* Alleen horizontaal: verticaal groeit het bord mee en scrolt de pagina. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* gridTemplateColumns set in JS: 200px (label) + N day cols */
}

/* ── Plakkende, morphende dagkop (Marc 31 jul) ───────────────────────────
   De kop staat BEWUST in een eigen grid buiten #swimlane-grid: een sticky
   grid-item blijft gevangen in zijn eigen grid-area (één rij) en zou dus
   nooit blijven plakken. Costa 3 aug: het plakt nu aan de VIEWPORT (onder de
   app-header), zodat de rest van de tab wél wegscrolt. */
.swimlane-head {
  display: grid;
  min-width: 100%;
  position: sticky;
  /* Precies onder de plakkende app-header; de hoogte daarvan wordt in JS
     gemeten en als --sl-head-top gezet (verschilt op mobiel). */
  top: var(--sl-head-top, 58px);
  z-index: 20;
  background: var(--surface2);
  border-radius: 11px 11px 0 0;
  /* Horizontaal meeschuiven met het bord gebeurt via scrollLeft in JS. De
     scrollbalk zelf hoort bij het bord, niet bij de kop. */
  overflow: hidden;
  transition: box-shadow 0.18s ease;
  /* gridTemplateColumns set in JS — identiek aan .swimlane-grid */
}
#sl-stick-sentinel { height: 1px; }
/* Compenseert exact de hoogte die de kop verliest bij het krimpen, zodat het
   bord niet met een schokje omhoog springt. Groeit/krimpt mee met de morph. */
#sl-stick-spacer {
  height: 0;
  transition: height 0.18s ease;
}
.swimlane-wrap.sl-stuck #sl-stick-spacer { height: var(--sl-hdr-delta, 0px); }
.swimlane-wrap.sl-stuck .swimlane-head {
  box-shadow: 0 6px 12px -6px rgba(0,0,0,0.45);
}

/* De morph zelf: de uitgebreide regels vouwen dicht, één compacte regel
   ("Ma 14 · 32/40 AE") komt ervoor in de plaats. `height:auto` is niet te
   animeren, vandaar de max-height-truc. */
.sl-day-hdr,
.sl-corner { transition: padding 0.18s ease; }
.sl-day-name,
.sl-day-date,
.sl-day-flow,
.sl-cap-label,
.sl-corner-title,
.sl-hdr-mini,
.sl-col-vlabel,
.sl-col-mini {
  overflow: hidden;
  transition: max-height 0.18s ease, opacity 0.12s ease, margin 0.18s ease;
}
.sl-hdr-mini,
.sl-col-mini {
  max-height: 0;
  opacity: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--subtext);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sl-day-hdr.today-col .sl-hdr-mini,
.sl-day-hdr.today-col .sl-col-mini { color: var(--accent); }

.swimlane-wrap.sl-stuck .sl-day-hdr,
.swimlane-wrap.sl-stuck .sl-corner { padding: 3px 8px; }
.swimlane-wrap.sl-stuck .sl-day-name,
.swimlane-wrap.sl-stuck .sl-day-date,
.swimlane-wrap.sl-stuck .sl-day-flow,
.swimlane-wrap.sl-stuck .sl-cap-label,
.swimlane-wrap.sl-stuck .sl-corner-title,
.swimlane-wrap.sl-stuck .sl-col-vlabel {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
.swimlane-wrap.sl-stuck .sl-hdr-mini,
.swimlane-wrap.sl-stuck .sl-col-mini {
  max-height: 18px;
  opacity: 1;
}
.swimlane-wrap.sl-stuck .sl-cap-bar { margin-top: 3px; }
/* Tijdens het meten van de kop-hoogtes mag niets animeren. */
.swimlane-wrap.sl-no-anim,
.swimlane-wrap.sl-no-anim * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .swimlane-head,
  #sl-stick-spacer,
  .sl-day-hdr, .sl-corner,
  .sl-day-name, .sl-day-date, .sl-day-flow, .sl-cap-label,
  .sl-corner-title, .sl-hdr-mini, .sl-col-vlabel, .sl-col-mini { transition: none; }
}
.sl-corner {
  background: var(--surface2);
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
}
.sl-corner-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* ── Navigatie in de plakkende hoekcel (Costa 3 aug) ─────────────────────
   De .cal-nav-balk scrolt weg; deze vijf mini-knoppen blijven altijd staan,
   ook in de gekrompen kop. Ze staan daarom BEWUST niet in de sl-stuck
   inklap-groep (max-height:0) hierboven. */
.sl-corner-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.sl-nav-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 11px;
  line-height: 1.45;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sl-nav-btn:hover,
.sl-nav-btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* Welke periode staat er op het bord — zodat je bij het scrollen niet omhoog
   hoeft om de datum te zien. Past altijd op één regel binnen de 200px. */
.sl-corner-date {
  font-size: 10px;
  font-weight: 500;
  color: var(--subtext);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swimlane-wrap.sl-stuck .sl-corner { gap: 2px; }

/* ── Zwevende dag-pijlen langs de vensterranden (Costa 3 aug) ────────────
   Grote kliktargets die niet meescrollen: `position: fixed`, verticaal
   gecentreerd. Standaard halfdoorzichtig zodat ze de planning eronder niet
   opdringerig bedekken; bij hover/focus lichten ze volledig op. */
.plan-side-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 30px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.35;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.plan-side-nav:hover,
.plan-side-nav:focus-visible {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.plan-side-prev { left: 0;  border-left: 0;  border-radius: 0 20px 20px 0; }
.plan-side-next { right: 0; border-right: 0; border-radius: 20px 0 0 20px; }
/* Op smalle schermen is de rand te kostbaar (en is er geen muis om te hoveren):
   daar volstaan de knoppen in de hoekcel. */
@media (max-width: 720px) {
  .plan-side-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-side-nav, .sl-nav-btn { transition: none; }
}
/* Voertuig in-/uit-tellers (dag- én weekheader). */
.sl-day-flow {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.sl-flow-in  { color: #2E7D32; white-space: nowrap; }
.sl-flow-out { color: #C0392B; white-space: nowrap; }
.sl-day-hdr {
  padding: 10px 12px;
  text-align: center;
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
  position: relative;
}
.sl-day-hdr.today-col { border-bottom-color: var(--accent); }
.sl-day-hdr.cap-over {
  background: linear-gradient(180deg, rgba(192,57,43,0.12), rgba(192,57,43,0.04));
  border-bottom-color: #C0392B !important;
}
.sl-day-hdr.day-closed { background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.02)); opacity: 0.6; }
.sl-day-hdr.day-blocked {
  background: linear-gradient(180deg, rgba(127,140,141,0.18), rgba(127,140,141,0.06));
  border-bottom-color: #7F8C8D !important;
}
.sl-day-name { font-size: 11px; font-weight: 500; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.08em; }
.sl-day-date { font-size: 22px; font-weight: 500; color: var(--text); line-height: 1.1; margin-top: 2px; }
.sl-day-hdr.today-col .sl-day-date { color: var(--accent); }
.sl-day-hdr.day-blocked .sl-day-date { color: #7F8C8D; text-decoration: line-through; }
.sl-cap-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.sl-cap-fill { height: 100%; transition: width 0.4s; }
.sl-cap-label { font-size: 10px; color: var(--subtext); margin-top: 2px; font-weight: 500; }

/* ── Ingeklapte dag-kolommen (Costa 28 jul) ─────────────────────────────
   Inklappen gebeurt per WEEKDAG: klap één zaterdag in en álle zaterdagen in
   het venster worden een smalle strook met alleen dag + datum verticaal in
   de kop. Zo past een rollend venster incl. weekend op het scherm zonder de
   weekenddagen te verliezen. */
.sl-col-toggle {
  margin-left: 4px;
  cursor: pointer;
  color: var(--subtext);
  opacity: 0;
  font-size: 11px;
  letter-spacing: -0.1em;
  transition: opacity 0.15s;
}
.sl-day-hdr:hover .sl-col-toggle,
.sl-col-toggle:focus-visible { opacity: 0.85; }
.sl-col-toggle:hover { color: var(--accent); }

.sl-day-hdr.sl-col-collapsed {
  padding: 8px 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.sl-day-hdr.sl-col-collapsed:hover { background: var(--surface); }
.sl-col-vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--subtext);
  text-transform: uppercase;
}
.sl-day-hdr.sl-col-collapsed.today-col .sl-col-vlabel { color: var(--accent); }
.sl-col-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
}
/* Cellen van een ingeklapte kolom: alleen achtergrond, geen inhoud. */
.sl-day-cell.sl-col-collapsed { overflow: hidden; }

/* Section heading row (Jobs zonder VV / VV-auto's) */
.sl-section-hdr {
  grid-column: 1 / -1;
  padding: 8px 14px;
  background: var(--surface2);
  font-size: 11px;
  font-weight: 500;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  position: sticky;
  left: 0;
}
/* Inklapbare sectie-kop (Marc 28 jul): beide bord-delen — "Alle auto's" en
   "VV-auto's" — kunnen dicht. De voorkeur wordt per gebruiker bewaard. */
.sl-section-hdr.collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sl-section-hdr.collapsible:hover { color: var(--text); }
.sl-section-chev { font-size: 10px; opacity: 0.8; }
.sl-section-hint {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

/* Compacte multi-select dropdown (pil-info + filters). Bewust klein gehouden:
   álle criteria achter één knop i.p.v. een balk vol chips. */
.plan-dd { position: relative; display: inline-flex; }
.plan-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 230px;
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.plan-dd.open .plan-dd-panel { display: block; }
.plan-dd-group {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--subtext);
  padding: 6px 6px 3px;
}
.plan-dd-group + .plan-dd-group { border-top: 1px solid var(--border); margin-top: 4px; }
/* Vrij invoerveld binnen het filter-menu (Costa 3 aug: zoeken op het externe
   referentienummer). Volle breedte, zodat een lang nummer leesbaar blijft. */
.plan-dd-row { display: block; }
.plan-dd-row .form-input { width: 100%; }
/* Groepskop met EN/OF-schakelaar (Marc 28 jul): binnen één multi-select kiest
   de planner of álle (EN) of minstens één (OF) aangevinkte waarde moet kloppen. */
.plan-dd-group-row { display: flex; align-items: center; gap: 8px; }
.plan-dd-mode {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.plan-dd-mode-btn {
  border: 0;
  background: var(--surface);
  color: var(--subtext);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  cursor: pointer;
}
.plan-dd-mode-btn + .plan-dd-mode-btn { border-left: 1px solid var(--border); }
.plan-dd-mode-btn:hover { background: var(--surface2); }
.plan-dd-mode-btn.on { background: var(--accent); color: #fff; }
.plan-dd-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.plan-dd-opt:hover { background: var(--surface2); }
.plan-dd-opt input { accent-color: var(--accent); cursor: pointer; }
.plan-dd-empty { padding: 5px 6px; font-size: 11px; color: var(--subtext); font-style: italic; }
.plan-dd-actions {
  display: flex;
  gap: 6px;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
/* Avatar/icoon van een grootzakelijke klant (Costa 28 jul): in de instellingen,
   in het opdrachtgevers-filter én op de planning-pil. Zonder geüpload plaatje
   tonen we de initialen in de kleur van de key account. */
.opdr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface2);
  border: 1px solid var(--border);
  vertical-align: middle;
}
.opdr-avatar-txt {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-color: rgba(0,0,0,0.12);
}
.opdr-avatar-cell { position: relative; display: inline-flex; }
.opdr-avatar-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.opdr-avatar-btn:hover .opdr-avatar { filter: brightness(1.08); }
.opdr-avatar-del {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--red);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.sl-pill-account { display: inline-flex; align-items: center; gap: 4px; }

.sl-subsection-hdr {
  grid-column: 1 / -1;
  padding: 6px 14px;
  background: var(--surface);
  font-size: 10px;
  font-weight: 500;
  color: var(--subtext);
  letter-spacing: 0.05em;
  border-top: 1px dashed var(--border);
  border-bottom: 1px solid var(--border);
  opacity: 0.7;
  position: sticky;
  left: 0;
}

/* Row label (left col) */
.sl-row-label {
  grid-row: 1;
  grid-column: 1;
  padding: 5px 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  background: var(--surface);
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 38px;
  justify-content: center;
}
.sl-row-label.dim { opacity: 0.5; }
.sl-row-name { font-weight: 500; color: var(--text); }
.sl-row-sub  { font-size: 11px; color: var(--subtext); }

/* Day cell where pills live */
.sl-day-cell {
  position: relative;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 38px;
  grid-row: 1;
  /* subtle hour grid: vertical lines per work-hour, painted via gradient in JS via background-size */
  background-image: linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: var(--sl-hour-w, 80px) 100%;
  background-position: -1px 0;
}
.sl-day-cell.day-blocked-cell {
  background-color: rgba(127,140,141,0.06);
}
.sl-day-cell.day-closed-cell {
  background-color: rgba(0,0,0,0.04);
}

/* ── NEW pill model — one pill per job, spans multiple grid columns ── */
.sl-row-grid {
  /* Each job/VV row is its own grid that matches the parent template,
     so pills can grid-column-span multiple day-cells.
     grid-template-columns is set inline (matches parent header). */
  display: grid;
  position: relative;
  /* row defaults to 1 row; pills overlap cells via grid-row: 1 */
}

/* Pill (one per job, spans across days via grid-column) */
.sl-pill {
  grid-row: 1;
  /* grid-column set inline */
  align-self: center;
  margin-top: 8px;
  margin-bottom: 8px;
  height: calc(100% - 16px);
  /* margin-left & margin-right set inline (for partial first/last day);
     die bevatten ook --sl-pill-gap zodat de pil de daglijn niet raakt. */
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform 0.1s, box-shadow 0.1s;
  min-width: 8px;
  z-index: 2;  /* above cell backgrounds */
}
.sl-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 4;
}
.sl-pill-rego { font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
.sl-pill-time { font-size: 10px; opacity: 0.85; font-weight: 500; }
/* AE-chip in de pil: compacte badge met de arbeidseenheden van de job. */
.sl-pill-ae {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  white-space: nowrap;
}
/* Extra, optionele pil-informatie (klant / merk-model / key account / status /
   afspraaktype / VV-auto / VC-EC / eigen risico) — aan/uit via de
   'Pil-info'-multiselect. Bewust wat lichter dan het kenteken zodat de pil
   leesbaar blijft. */
.sl-pill-extra {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  opacity: 0.92;
  max-width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* VC/EC-status en eigen risico op de pil (Costa 3 aug). Beide zijn een klein
   badge-je zoals de AE-chip: de pil heeft al een eigen statuskleur, dus de
   tekst blijft wit en de calculatie-fase komt uit een gekleurd bolletje. */
.sl-pill-vcec,
.sl-pill-er,
.sl-pill-extref {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  max-width: none;
}
/* Extern referentienummer (Costa 3 aug). Ontbreekt het nummer, dan mág dat
   opvallen: een zaak zonder referentie is bij de opdrachtgever niet terug te
   vinden. Daarom dan een gestippelde rand i.p.v. een gevuld badge-je. */
.sl-pill-extref {
  font-weight: 500;
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sl-pill-extref-empty {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.65);
  padding: 1px 4px;
}
.sl-pill-vcec-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.55);
  flex: 0 0 auto;
}

/* Buffer-segment (Costa 28 jul): de pil loopt van BRENGEN tot AFLEVEREN.
   Het deel tussen 'reparatie klaar' en het afleveermoment is geen werktijd
   maar geplande speling — we tonen dat als een gestreept, doorschijnend
   segment met een duidelijke scheidingslijn op het klaar-moment. */
.sl-pill-buffer {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  border-left: 2px dashed rgba(255,255,255,0.85);
  background-color: rgba(255,255,255,0.14);
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,0.30) 0, rgba(255,255,255,0.30) 4px,
    rgba(255,255,255,0)    4px, rgba(255,255,255,0)    9px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}
.sl-pill-buffer-lbl {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  opacity: 0.9;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

/* Verweesde afspraak (scan_id verwijst naar een niet meer bestaande intake).
   Wordt NIET verborgen — juist duidelijk gemarkeerd met een gestreepte gele
   rand zodat de planner ziet welke auto's een ontbrekende intake hebben. */
.sl-pill-orphan {
  border: 1.5px dashed #F0B429 !important;
  box-shadow: 0 0 0 1px rgba(240,180,41,0.35), 0 2px 4px rgba(0,0,0,0.2);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 6px, rgba(255,255,255,0.12) 6px, rgba(255,255,255,0.12) 12px);
}
.sl-pill-orphan-flag { font-size: 11px; margin-right: 3px; }

/* VV-conflict (issue-4): dubbelboeking/overlap, tekort of automaat-eis niet
   gehaald. Rode, duidelijk zichtbare rand + pulserend accent zodat de planner
   direct ziet WELKE huurauto-toewijzingen een probleem hebben — ook ná een
   optimalisatie waar een tekort bleef bestaan. */
.sl-pill-vvwarn {
  border: 2px solid #DC2626 !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.35), 0 2px 6px rgba(0,0,0,0.25);
  animation: sl-vvwarn-pulse 1.8s ease-in-out infinite;
}
.sl-pill-vvwarn-flag { font-size: 11px; margin-right: 3px; }
/* Gearbox harde-eis marker (Ⓐ automaat-only / Ⓜ schakel-only). Compact,
   goed leesbaar op de gekleurde pil, zodat de transmissie-constraint opvalt. */
.sl-pill-gb-flag {
  font-size: 12px;
  font-weight: 700;
  margin-right: 3px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}
@keyframes sl-vvwarn-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(220,38,38,0.35), 0 2px 6px rgba(0,0,0,0.25); }
  50%      { box-shadow: 0 0 0 4px rgba(220,38,38,0.55), 0 2px 8px rgba(0,0,0,0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-pill-vvwarn { animation: none; }
}

/* ── Spotlight op persoonlijk gemarkeerde jobs (Marc 31 jul) ────────────
   De niet-gemarkeerde pillen blijven staan — ze dimmen weg, zodat het bord
   zijn vorm houdt en alleen de gepinde auto's naar voren komen. Een filter
   zou de rijen herpakken en precies het overzicht slopen dat je wil zien. */
.sl-pill-dimmed {
  opacity: 0.22;
  filter: grayscale(1);
  /* Bewust GEEN pointer-events:none — een gedimde job moet je nog kunnen
     openen en verslepen; dit is een leeshulp, geen slot. */
}
.sl-pill-dimmed:hover { opacity: 0.6; filter: grayscale(0.3); }
.sl-pill-marked {
  outline: 2px solid #F0B429;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(240,180,41,0.30), 0 2px 8px rgba(0,0,0,0.28);
  z-index: 6;
}
.sl-pill-mark-flag { font-size: 11px; margin-right: 3px; }

/* Jump uit de jobkaart naar het planbord: de betreffende pil pulseert kort
   zodat je hem meteen vindt. Tijdelijk (de klasse wordt na de animatie
   verwijderd), zodat het bord daarna weer rustig is. */
.sl-pill-flash {
  animation: sl-pill-flash 1.1s ease-in-out 3;
  z-index: 7;
}
@keyframes sl-pill-flash {
  0%, 100% { box-shadow: 0 0 0 2px rgba(232,67,26,0.45), 0 2px 6px rgba(0,0,0,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(232,67,26,0.00), 0 2px 12px rgba(0,0,0,0.35); }
}
@media (prefers-reduced-motion: reduce) {
  /* Zonder animatie geen enkele hint — dus dan een harde rand. */
  .sl-pill-flash { animation: none; outline: 3px solid var(--accent, #E8431A); }
}

/* Balk loopt door buiten het zichtbare venster (Costa 21 jul): vlak de
   betreffende zijde af en zet een lichte 'doorloop'-rand zodat direct
   zichtbaar is dat de auto vóór of ná dit venster al gebracht/nog aanwezig is.
   Werkt in alle views (1 dag / 3 dagen / Week / 4 weken). */
.sl-pill-cont-l {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 3px solid rgba(255,255,255,0.6) !important;
}
.sl-pill-cont-r {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 3px solid rgba(255,255,255,0.6) !important;
}
/* Houd de resize-handles' afronding in sync met de afgevlakte zijde. */
.sl-pill-cont-l .sl-pill-handle-l { border-radius: 0; }
.sl-pill-cont-r .sl-pill-handle-r { border-radius: 0; }
/* Richting-chevron (◀ / ▶) die de doorloop benadrukt. */
.sl-pill-cont-arrow { font-size: 11px; opacity: 0.9; font-weight: 700; }

/* Weekgrens in de 4-weken-view (Costa 21 jul): een duidelijke verticale
   scheiding op elke maandag-kolom zodat het verborgen weekend niet als
   'doorlopend' oogt. Geldt voor zowel de header- als de rij-cellen. */
.sl-day-cell.sl-week-start,
.sl-day-hdr.sl-week-start {
  border-left: 2px solid var(--accent, #E8431A);
}
/* Weeknummer-chip op maandag-kolommen in de 4-weken-header. */
.sl-week-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 4px;
  border-radius: 4px;
  background: rgba(232,67,26,0.14);
  color: var(--accent, #E8431A);
  vertical-align: middle;
}

/* ═════════════════════════════════════════════════════════════
   DRAG & RESIZE — pillen verslepen + uiteindes trekken
   ═════════════════════════════════════════════════════════════ */

/* Drag-cursor in midden van pil */
.sl-pill.sl-pill-draggable { cursor: grab; }
.sl-pill.sl-pill-draggable:active { cursor: grabbing; }

/* Tijdens actieve drag: pil semi-transparant + hoge z-index */
.sl-pill.sl-pill-dragging {
  opacity: 0.4;
  z-index: 50;
  pointer-events: none;
  transition: none;
}

/* Resize-handles aan begin/eind van pil */
.sl-pill-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 10px;
  cursor: ew-resize;
  background: rgba(255,255,255,0.0);
  z-index: 3;
  transition: background 0.15s;
  /* iOS-callout uit — anders krijg je 'Copy/Paste' popup bij long-press */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.sl-pill:hover .sl-pill-handle { background: rgba(255,255,255,0.25); }
.sl-pill-handle:hover { background: rgba(255,255,255,0.5) !important; }
.sl-pill-handle-l { left: 0;  border-radius: 6px 0 0 6px; }
.sl-pill-handle-r { right: 0; border-radius: 0 6px 6px 0; }

/* Subtiele 3 streepjes in handle bij hover */
.sl-pill-handle::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 14px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 30%, transparent 30%, transparent 50%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.6) 70%, transparent 70%, transparent 90%);
  opacity: 0;
  transition: opacity 0.15s;
}
.sl-pill:hover .sl-pill-handle::before { opacity: 0.9; }

/* Touch-devices (iPad) — handles altijd zichtbaar + groter hit-area.
   Anders zijn de 10px onvindbaar zonder hover. */
@media (hover: none) and (pointer: coarse) {
  .sl-pill-handle {
    width: 20px;
    background: rgba(255,255,255,0.35);
  }
  .sl-pill-handle::before { opacity: 0.9; }
  .sl-pill.sl-pill-draggable { cursor: default; }
  /* iOS-selectie op de pil uitzetten */
  .sl-pill { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* Ghost preview tijdens drag — toont waar pil komt */
.sl-drag-ghost {
  position: absolute;
  background: linear-gradient(135deg, rgba(232,67,26,0.35), rgba(232,67,26,0.20));
  border: 2px solid var(--accent);
  border-radius: 7px;
  pointer-events: none;
  z-index: 60;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(232,67,26,0.35);
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}
.sl-drag-ghost.conflict {
  background: linear-gradient(135deg, rgba(220,38,38,0.35), rgba(220,38,38,0.20));
  border-color: #DC2626;
  box-shadow: 0 4px 12px rgba(220,38,38,0.4);
}

/* Drop-target cell highlight (uitgeschakeld voor schonere UX — alleen ghost is genoeg)
   Bewaard voor mogelijk toekomstig gebruik. */

/* Handmatige VV-hertoewijzing: markeer de huurauto-rij onder de cursor als
   drop-doel wanneer je een boeking naar een ANDERE huurauto sleept. */
.sl-row-vv.sl-row-drop-target {
  outline: 2px dashed var(--accent, #E8431A);
  outline-offset: -2px;
  background: rgba(232,67,26,0.06);
}

/* Pill markers — 10px colored bars at left edge, side-by-side for multiple traits */
.sl-pill { position: relative; }
.sl-pill-markers {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: flex;
  border-radius: 6px 0 0 6px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.sl-pill-mark {
  width: 10px;
  height: 100%;
}
/* Push label content right so it doesn't sit under the markers */
.sl-pill[data-mark-count="1"] { padding-left: 14px; }
.sl-pill[data-mark-count="2"] { padding-left: 24px; }
.sl-pill[data-mark-count="3"] { padding-left: 34px; }
.sl-pill[data-mark-count="4"] { padding-left: 44px; }

/* ── Gekoppelde voertuigen (SQL 049) ─────────────────────────────── */
/* Link-badge in de pill (klikbaar → open gekoppelde case). */
.sl-pill-link {
  font-size: 11px;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.95;
  pointer-events: auto;
  z-index: 4;
}
/* Box-outline rond gekoppelde pills: sequentieel (groen, streep),
   parallel (paars, vol). related krijgt géén box (alleen badge/hover). */
.sl-pill-link-sequential { outline: 1.5px dashed #27AE60; outline-offset: -1px; }
.sl-pill-link-parallel   { outline: 1.5px solid #7C3AED; outline-offset: -1px; }
/* Hover-highlight: markeert alle siblings van dezelfde link-groep. */
.sl-pill.sl-link-hi {
  box-shadow: 0 0 0 3px rgba(124,58,237,0.30);
  z-index: 6;
}
/* Parallel-groep box: één huurauto, meerdere gelijktijdige auto's die als
   aparte lanes (sub-rijen) binnen de VV-rij worden gestapeld en samen
   omkaderd. Zit achter de pills (z-index 1), boven de cel-achtergrond. */
.sl-parallel-box {
  border: 1.5px solid #7C3AED;
  background: rgba(124,58,237,0.06);
  border-radius: 8px;
  margin: 3px;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.sl-parallel-box-lbl {
  position: absolute;
  top: -8px;
  left: 8px;
  font-size: 9px;
  font-weight: 600;
  color: #7C3AED;
  background: var(--surface);
  padding: 0 4px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* View-mode toggle buttons */
.vbtn {
  background: transparent;
  border: none;
  color: var(--subtext);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vbtn:hover { color: var(--text); background: var(--surface); }
.vbtn.active {
  background: var(--accent);
  color: white;
}

/* VV row — uses VV color as left accent + tinted background */
.sl-row-vv .sl-row-label {
  border-left: 4px solid var(--vv-color, #7F8C8D);
}
.sl-day-cell.vv-cell {
  background-color: color-mix(in srgb, var(--vv-color, #7F8C8D) 8%, transparent);
}
/* Compacter VV-rijen voor sneller overzicht */
.sl-row-vv .sl-row-label { min-height: 38px; padding: 5px 12px; }
.sl-row-vv .sl-day-cell  { min-height: 38px; }
/* Automaat-badge in VV-rijlabel */
.vv-auto-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  line-height: 15px;
  border-radius: 4px;
  color: var(--vv-color, #7F8C8D);
  background: color-mix(in srgb, var(--vv-color, #7F8C8D) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--vv-color, #7F8C8D) 40%, transparent);
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.tg-ae-bar {
  height: 3px; background: var(--border); border-radius: 2px; margin-top: 6px;
}
.tg-ae-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.4s; }
.tg-ae-label { font-size: 9px; color: var(--subtext); margin-top: 3px; font-weight: 500; }

/* Body rows */
.tg-body { display: contents; }

.tg-time-label {
  width: 54px; min-width: 54px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0 6px;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding-top: 3px;
  font-size: 10px; font-weight: 500; color: var(--muted);
  height: var(--slot-h, 36px);
  box-sizing: border-box;
}
.tg-time-label.half { color: transparent; border-bottom-style: dashed; }

.tg-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  height: var(--slot-h, 36px);
  position: relative;
  transition: background 0.1s;
}
.tg-cell.half { border-bottom-style: dashed; border-bottom-color: rgba(255,255,255,0.04); }
.tg-cell:hover { background: rgba(232,67,26,0.03); }
.tg-cell.outside-hours { background: rgba(0,0,0,0.18); }
body.light .tg-cell.outside-hours { background: rgba(0,0,0,0.05); }

/* Appointment block — absolutely positioned inside .tg-day-col-body */
.tg-day-col-body {
  position: relative;
}

.appt-block {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 11px; font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid transparent;
  z-index: 2;
  transition: filter 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.appt-block:hover { filter: brightness(1.1); z-index: 5; }
.appt-block .ab-rego { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-block .ab-time { font-size: 9px; opacity: 0.8; }
.appt-block .ab-ae   { font-size: 9px; opacity: 0.75; }
.appt-block .ab-rental { font-size: 9px; }

.appt-block.type-normal { background: rgba(74,158,255,0.18); color: #7BC8FF; border-color: rgba(74,158,255,0.35); }
.appt-block.type-combo  { background: rgba(139,92,246,0.18); color: #C4B5FD; border-color: rgba(139,92,246,0.35); }
.appt-block.type-risk   { background: rgba(240,180,41,0.18); color: #FCD34D; border-color: rgba(240,180,41,0.35); }
.appt-block.type-vip    { background: rgba(232,67,26,0.2);   color: #FFA07A; border-color: rgba(232,67,26,0.4); }

.appt-block.multiday-start { border-right: none; border-radius: 7px 0 0 7px; right: 0; }
.appt-block.multiday-mid   { border-left: none; border-right: none; border-radius: 0; left: 0; right: 0; }
.appt-block.multiday-end   { border-left: none; border-radius: 0 7px 7px 0; left: 0; }

/* Now indicator */
.now-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--accent); z-index: 10; pointer-events: none;
}
.now-dot {
  position: absolute; left: -4px; top: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
}

/* Suggestions */
.suggest-slot {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: all 0.18s; margin-bottom: 8px;
}
.suggest-slot:hover { border-color: var(--accent); }
.suggest-slot.best { border-color: var(--green); background: rgba(39,174,96,0.05); }
.suggest-slot.selected { border-color: var(--green); outline: 2px solid var(--green); }
.suggest-badge {
  padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0;
}
.suggest-badge.best { background: var(--green); color: white; }
.suggest-badge.good { background: rgba(240,180,41,0.15); color: var(--yellow); }
.suggest-date { font-size: 15px; font-weight: 500; }
.suggest-time { font-size: 13px; font-weight: 500; color: var(--accent); }
.suggest-meta { font-size: 11px; color: var(--subtext); margin-top: 2px; }
.suggest-right { margin-left: auto; text-align: right; flex-shrink: 0; }
.suggest-ae { font-size: 16px; font-weight: 500; color: var(--accent); }
.suggest-days { font-size: 11px; color: var(--subtext); }

/* Rental timeline (week view below grid) */
.rental-week-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.rental-week-bar:last-child { border-bottom: none; }
.rwb-name { width: 90px; font-weight: 500; flex-shrink: 0; font-size: 12px; }
.rwb-days { flex: 1; display: flex; gap: 3px; }
.rwb-day {
  flex: 1; height: 22px; border-radius: 4px;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 500; color: white;
  overflow: hidden; white-space: nowrap;
}
.rwb-day.free    { background: var(--surface2); }
.rwb-day.in-use  { background: var(--blue); }
.rwb-day.start   { background: var(--green); }
.rwb-day.end     { background: var(--yellow); color: #111; }

.rental-badge {
  background: rgba(74,158,255,0.18); color: var(--blue);
  border-radius: 4px; padding: 1px 5px; font-size: 9px; font-weight: 500;
}

/* ══════════════════════════════════════
   PAGE 3 — UNPLANNED / WAITING
══════════════════════════════════════ */
.queue-grid { display: flex; flex-direction: column; gap: 10px; }
.queue-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: all 0.18s;
}
.queue-card:hover { border-color: var(--border2); transform: translateY(-1px); }
.queue-rego { font-size: 20px; font-weight: 500; letter-spacing: 0.02em; }
.queue-info { flex: 1; }
.queue-meta { font-size: 12px; color: var(--subtext); margin-top: 2px; }
.ae-pill {
  background: rgba(232,67,26,0.1); color: var(--accent);
  border-radius: 8px; padding: 6px 12px;
  font-size: 16px; font-weight: 500; white-space: nowrap;
  border: 1px solid rgba(232,67,26,0.2);
}
.ae-pill small { font-size: 10px; font-weight: 500; display: block; text-align: center; }

/* ══════════════════════════════════════
   PAGE 4 — SCHEDULE SETTINGS
══════════════════════════════════════ */
.settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 700px) { .settings-grid { grid-template-columns: 1fr; } }

.settings-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
}
.settings-card-title {
  font-size: 14px; font-weight: 500; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}

.number-input-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.num-label { font-size: 13px; flex: 1; color: var(--text); font-weight: 500; }
.num-ctrl { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.num-btn {
  background: var(--surface2); border: none; padding: 7px 12px;
  color: var(--text); font-size: 16px; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.num-btn:hover { background: var(--surface3); }
.num-val {
  background: var(--surface); border: none;
  padding: 7px 14px; font-size: 15px; font-weight: 500;
  color: var(--text); font-family: inherit;
  min-width: 42px; text-align: center;
}

.rental-car-list { margin-top: 10px; }
.rental-car-item {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 13px;
}
.rental-car-item .rc-name { flex: 1; font-weight: 500; }
.rental-car-item .rc-plate { color: var(--subtext); font-size: 11px; }
.rc-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; padding: 2px 6px; transition: color 0.15s;
}
.rc-del:hover { color: var(--red); }

/* ─── VV-VLOOT ALS TABEL (Costa 28 jul) ─────────────────────────
   Compacte tabel i.p.v. de oude kaarten: één rij per huurwagen met
   inline-bewerkbare velden + een uitklap-rij voor de details. */
.rental-car-list { display: block; overflow-x: auto; }
table.vv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.vv-table th {
  text-align: left; padding: 8px 8px; font-size: 11px; font-weight: 500;
  color: var(--subtext); text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.vv-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.vv-table th.num, table.vv-table td.num { text-align: right; }
table.vv-table tbody tr.vv-row:hover { background: var(--surface2); }
table.vv-table tr.vv-row-inactive { opacity: 0.6; }
table.vv-table tr.vv-row-away td:first-child { box-shadow: inset 3px 0 0 var(--muted); }
.vv-td-color { white-space: nowrap; display: flex; align-items: center; gap: 4px; padding-top: 9px; }
.vv-color-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.vv-expand-btn {
  background: none; border: none; color: var(--subtext);
  cursor: pointer; font-size: 11px; padding: 0 2px;
}
.vv-expand-btn:hover { color: var(--text); }
.vv-cell-input {
  padding: 4px 7px; font-size: 12px; width: 100%; min-width: 84px;
}
.vv-cell-name { font-weight: 500; min-width: 130px; }
.vv-cell-plate { font-family: monospace; min-width: 100px; }
.vv-cell-km { text-align: right; min-width: 80px; }
.vv-td-actions { white-space: nowrap; }
.vv-chip-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); cursor: pointer; font-size: 12px; font-family: inherit;
  padding: 4px 8px; margin-right: 4px; transition: background 0.15s;
}
.vv-chip-btn:hover { background: var(--surface3); }
.vv-chip-alert { border-color: var(--red); color: var(--red); }
tr.vv-row-detail td { background: var(--surface2); }
.vv-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 12px; padding: 4px 2px 8px;
}
.vv-detail-grid label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--subtext);
}
.vv-detail-wide { grid-column: span 2; }
.vv-color-input {
  width: 40px; height: 28px; border: none; border-radius: 6px;
  cursor: pointer; background: transparent; padding: 0;
}

/* ─── VV-MODALS (foto's + schadehistorie) ───────────────────── */
.vv-overlay {
  position: fixed; inset: 0; z-index: 9700; background: rgba(0,0,0,0.6);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.vv-overlay-box {
  background: var(--surface); border-radius: 14px; max-width: 920px; width: 100%;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.vv-overlay-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.vv-overlay-title { font-weight: 600; font-size: 15px; }
.vv-overlay-body { padding: 16px; overflow: auto; }
.jv-search-gallery-tile .vv-tile-del {
  position: absolute; top: 5px; right: 5px; border: 0; border-radius: 6px;
  background: rgba(0,0,0,0.55); color: #fff; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 4px 6px;
}
.vv-dmg-mailrow { margin-bottom: 14px; }
.vv-dmg-mailrow label {
  display: flex; flex-direction: column; gap: 3px; max-width: 340px;
  font-size: 11px; color: var(--subtext);
}
.vv-dmg-hint { font-size: 11px; color: var(--subtext); margin-top: 4px; font-style: italic; }
.vv-dmg-form {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; margin-bottom: 16px;
}
.vv-dmg-form-title {
  font-size: 11px; font-weight: 500; color: var(--subtext);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;
}
.vv-dmg-form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 10px; margin-bottom: 10px;
}
.vv-dmg-form-grid label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--subtext);
}
.vv-dmg-wide { grid-column: 1 / -1; }
.vv-dmg-draft { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vv-dmg-addphoto {
  width: 62px; height: 62px; border: 1px dashed var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; color: var(--subtext);
}
.vv-dmg-addphoto:hover { border-color: var(--accent); color: var(--accent); }
.vv-dmg-entry {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; background: var(--surface);
}
.vv-dmg-entry-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.vv-dmg-ts { font-size: 12px; font-weight: 500; }
.vv-dmg-chip {
  background: var(--surface2); border-radius: 12px; padding: 2px 8px;
  font-size: 11px; color: var(--subtext);
}
.vv-dmg-chip-job { color: var(--accent); }
.vv-dmg-chip-ok { color: var(--green); }
.vv-dmg-mini {
  background: none; border: none; color: var(--subtext); cursor: pointer;
  font-size: 13px; padding: 2px 5px; border-radius: 6px; font-family: inherit;
}
.vv-dmg-mini:hover { background: var(--surface2); color: var(--text); }
.vv-dmg-mini-del:hover { color: var(--red); }
.vv-dmg-desc { font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; }
.vv-dmg-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vv-dmg-thumb {
  width: 62px; height: 62px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface2); cursor: pointer;
}
.vv-dmg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.workday-grid { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.wd-btn {
  padding: 7px 12px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--surface2);
  color: var(--subtext); font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: all 0.18s;
}
.wd-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(232,67,26,0.08); }

/* time range input */
.time-range-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.time-range-row label { font-size: 12px; color: var(--subtext); flex: 1; }
.time-input {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 12px; color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 500; outline: none;
}
.time-input:focus { border-color: var(--accent); }

/* ══════════════════════════════════════
   BOOK APPOINTMENT MODAL
══════════════════════════════════════ */
.slot-confirm {
  background: linear-gradient(135deg, rgba(39,174,96,0.08), rgba(39,174,96,0.02));
  border: 1px solid rgba(39,174,96,0.25);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.slot-confirm-date { font-size: 20px; font-weight: 500; color: var(--green); }
.slot-confirm-meta { font-size: 13px; color: var(--subtext); margin-top: 4px; }
.checklist { display: flex; flex-direction: column; gap: 8px; }
.check-item {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
}
.check-icon { font-size: 16px; flex-shrink: 0; }

/* Divider */
.divider { height: 1px; background: var(--border); margin: 18px 0; }

/* Toast */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: var(--surface3); border: 1px solid var(--border2);
  border-radius: 12px; padding: 12px 20px;
  font-size: 14px; font-weight: 500; color: var(--text);
  z-index: 999; opacity: 0; transition: opacity 0.3s;
  pointer-events: none; white-space: nowrap;
  display: flex; align-items: center; gap: 12px;
}
.toast.show { opacity: 1; pointer-events: auto; }
.toast .toast-action {
  background: var(--accent); color: #fff; border: 0;
  padding: 5px 12px; border-radius: 7px; font-weight: 500; font-size: 12px;
  cursor: pointer; font-family: inherit;
}
.toast .toast-action:hover { filter: brightness(1.1); }
.toast.toast-success { border-left: 4px solid #16A34A; }
.toast.toast-warn    { border-left: 4px solid #F59E0B; }
.toast.toast-error   { border-left: 4px solid #DC2626; }

/* UX-sprint-3: bulk-select op queue-pillen */
.queue-pil.queue-selected {
  background: rgba(232,67,26,0.06) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(232,67,26,0.15);
}

/* Empty state */
.empty-state { text-align: center; padding: 60px 24px; }
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-title { font-size: 17px; font-weight: 500; margin-bottom: 6px; }
.empty-sub { font-size: 13px; color: var(--subtext); line-height: 1.6; }

/* Stats row */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
@media (max-width: 700px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  /* Marc 15 jun: compacter — was 87px hoog (padding 14/16 + value 30px) */
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; position: relative; overflow: hidden;
}
.stat-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0; }
.stat-value { font-size: 22px; font-weight: 500; letter-spacing: -0.5px; margin-bottom: 1px; }
.stat-label { font-size: 10px; color: var(--subtext); font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; }

/* info box */
.info-box {
  background: rgba(74,158,255,0.07); border: 1px solid rgba(74,158,255,0.2);
  border-radius: var(--radius); padding: 12px 14px;
  font-size: 12px; color: var(--subtext); line-height: 1.6; margin-bottom: 14px;
}



/* PDR Technician widgets */
.pdr-tech-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
  position: relative; overflow: hidden;
  transition: border-color 0.2s;
}
.pdr-tech-card:hover { border-color: var(--border2); }

/* Tech star rating */
.tech-star-row { display:flex; gap:3px; margin-top:4px; }
.tech-star {
  font-size:18px; cursor:pointer; filter:grayscale(1) opacity(.35);
  transition:transform .1s, filter .1s; line-height:1; padding:1px;
}
.tech-star.on { filter:none; }
.tech-star:hover { transform:scale(1.2); filter:none; }

/* Risk tolerance chips */
.risk-chips { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
.risk-chip {
  padding:4px 10px; border-radius:6px; font-size:11px; font-weight:500;
  border:1.5px solid var(--border); background:var(--surface2);
  color:var(--subtext); cursor:pointer; font-family:inherit;
  transition:all .15s;
}
.risk-chip.on-low    { border-color:var(--green);  color:var(--green);  background:rgba(39,174,96,.1); }
.risk-chip.on-medium { border-color:var(--yellow); color:var(--yellow); background:rgba(240,180,41,.1); }
.risk-chip.on-high   { border-color:var(--red);    color:var(--red);    background:rgba(192,57,43,.1); }

/* Paint risk gauge */
.paint-risk-wrap { margin-top:4px; }
.paint-risk-track {
  height:8px; border-radius:4px; background:var(--border);
  position:relative; cursor:pointer; margin:6px 0;
}
.paint-risk-fill {
  height:100%; border-radius:4px; transition:width .2s;
  background: linear-gradient(90deg, var(--green) 0%, var(--yellow) 50%, var(--red) 100%);
}
.paint-risk-thumb {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%;
  background:white; border:2px solid var(--border2);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  pointer-events:none;
}

/* ══ WORKLOG / RAPPORTEN ═══════════════════════════════════════════════
   Verdien- & facturatie-overzicht. Doel: rustig en snel scanbaar — de
   getallen moeten opvallen, de chrome niet. Sticky tabelkop zodat je bij
   lange lijsten niet de weg kwijtraakt. */
.wl-toolbar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:10px 12px; margin-bottom:10px;
}
.wl-period { display:flex; gap:4px; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:3px; }
.wl-chip {
  border:0; background:transparent; color:var(--subtext); font-family:inherit;
  font-size:12px; font-weight:500; padding:6px 14px; border-radius:999px;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.wl-chip:hover { color:var(--text); }
.wl-chip.on { background:var(--accent); color:#fff; }
.wl-period-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wl-arrow {
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:8px; width:30px; height:30px; cursor:pointer; font-family:inherit;
  font-size:13px; line-height:1;
}
.wl-arrow:hover { border-color:var(--accent); }
.wl-date {
  background:var(--surface3); border:1px solid var(--border2); color:var(--text);
  border-radius:8px; padding:6px 9px; font-family:inherit; font-size:12px; outline:none;
}
.wl-period-label { font-size:13px; font-weight:500; margin-left:4px; }

.wl-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
.wl-search {
  flex:1; min-width:220px; background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; padding:8px 12px; color:var(--text); font-family:inherit;
  font-size:13px; outline:none;
}
.wl-search:focus { border-color:var(--accent); }
.wl-select {
  background:var(--surface2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:8px 10px; font-family:inherit; font-size:12px;
  cursor:pointer; outline:none; max-width:210px;
}

.wl-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-bottom:12px; }
.wl-kpi {
  background:var(--surface2); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; position:relative; overflow:hidden;
}
.wl-kpi-accent { position:absolute; top:0; left:0; right:0; height:3px; }
.wl-kpi-val { font-size:22px; font-weight:500; letter-spacing:-0.5px; }
.wl-kpi-label { font-size:10px; color:var(--subtext); font-weight:500;
  text-transform:uppercase; letter-spacing:0.07em; margin-top:2px; }
.wl-kpi-sub { font-size:11px; color:var(--subtext); margin-top:3px; }

.wl-bulkbar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:rgba(74,158,255,0.08); border:1px solid rgba(74,158,255,0.35);
  border-radius:12px; padding:8px 12px; margin-bottom:10px; font-size:13px; font-weight:500;
}

.wl-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); }
table.wl-table { width:100%; border-collapse:collapse; font-size:12.5px; }
table.wl-table th {
  position:sticky; top:0; z-index:2; background:var(--surface3);
  text-align:left; font-size:10px; font-weight:500; color:var(--subtext);
  text-transform:uppercase; letter-spacing:0.07em; padding:9px 10px;
  border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer;
  user-select:none;
}
table.wl-table th:hover { color:var(--text); }
table.wl-table th.num, table.wl-table td.num { text-align:right; }
table.wl-table td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.wl-table tbody tr:hover { background:var(--surface2); }
table.wl-table tr.wl-sel { background:rgba(74,158,255,0.07); }
table.wl-table tfoot td {
  padding:10px; font-weight:500; background:var(--surface3);
  border-top:1px solid var(--border2);
}
.wl-sort-arrow { font-size:9px; margin-left:3px; }
.wl-mat {
  display:inline-block; font-size:9px; font-weight:500; padding:2px 7px;
  border-radius:999px; letter-spacing:0.05em; white-space:nowrap;
}
.wl-money { font-weight:500; white-space:nowrap; }
.wl-money.unknown { color:var(--subtext); font-weight:400; }
.wl-approve-btn {
  background:var(--surface3); border:1px solid var(--border2); color:var(--text);
  border-radius:8px; padding:4px 9px; font-size:11px; font-weight:500;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.wl-approve-btn:hover { border-color:var(--green); color:var(--green); }
.wl-approve-btn.done { border-color:var(--green); color:var(--green); background:rgba(39,174,96,0.1); }
.wl-inv {
  font-size:9px; font-weight:500; padding:2px 7px; border-radius:999px;
  letter-spacing:0.05em; white-space:nowrap;
}
.wl-inv.draft    { background:var(--surface3); color:var(--subtext); }
.wl-inv.approved { background:rgba(39,174,96,0.15); color:var(--green); }
.wl-inv.invoiced { background:rgba(74,158,255,0.15); color:var(--blue); }
.wl-split-btn {
  background:transparent; border:1px dashed var(--border2); color:var(--subtext);
  border-radius:8px; padding:3px 8px; font-size:11px; cursor:pointer; font-family:inherit;
}
.wl-split-btn:hover { border-color:var(--accent); color:var(--accent); }
.wl-formula { font-size:10px; color:var(--subtext); margin-top:2px; }

/* ══ Goedkeuring, signalen & uitbetaalronde (worklog deel 2) ══════════
   Het goedgekeurde bedrag staat ONDER de live-berekening: groen = dit wordt
   uitbetaald. Wijkt de live-waarde af, dan kleurt het geel — dan is er na de
   goedkeuring iets veranderd en moet er iemand naar kijken. */
.wl-approved-amt {
  font-size:10.5px; font-weight:500; color:var(--green); margin-top:2px; white-space:nowrap;
}
.wl-approved-amt.drift { color:var(--yellow); }
.wl-inv-sub { font-size:9.5px; color:var(--subtext); margin-top:2px; }

.wl-flag {
  display:inline-block; font-size:10.5px; font-weight:500; padding:2px 7px;
  border-radius:999px; white-space:nowrap; cursor:help;
}
.wl-flag.info  { background:var(--surface3); color:var(--subtext); }
.wl-flag.warn  { background:rgba(240,180,41,0.15); color:var(--yellow); }
.wl-flag.alert { background:rgba(231,76,60,0.15); color:var(--red); }
.wl-flag-ok { color:var(--border2); }
table.wl-table tr.wl-row-alert { box-shadow:inset 3px 0 0 var(--red); }

.wl-runbar {
  display:none; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:12px; padding:8px 12px; font-size:12.5px;
}
.wl-runbar-txt { color:var(--subtext); flex:1; min-width:180px; }

.wl-run-group {
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:10px;
  background:var(--surface2);
}
.wl-run-head { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.wl-run-name { font-size:14px; font-weight:500; }
.wl-run-sum { margin-left:auto; font-size:12px; color:var(--subtext); }
table.wl-run-table { width:100%; border-collapse:collapse; font-size:12px; }
table.wl-run-table th {
  text-align:left; font-size:9.5px; font-weight:500; color:var(--subtext);
  text-transform:uppercase; letter-spacing:0.06em; padding:4px 6px;
  border-bottom:1px solid var(--border);
}
table.wl-run-table td { padding:4px 6px; border-bottom:1px solid var(--border); }
table.wl-run-table th.num, table.wl-run-table td.num { text-align:right; }
.wl-run-empty { font-size:12px; color:var(--subtext); font-style:italic; }
.wl-run-blocked {
  margin-top:8px; background:rgba(240,180,41,0.08);
  border:1px solid rgba(240,180,41,0.3); border-radius:10px; padding:8px 10px;
}
.wl-run-blocked-t { font-size:11px; font-weight:500; color:var(--yellow); margin-bottom:4px; }
.wl-run-blocked ul { margin:0; padding-left:16px; font-size:11.5px; color:var(--subtext); }

/* Mobile-first (Marc werkt veel op telefoon): tabel wordt kaartjes. */
@media (max-width: 720px) {
  table.wl-table thead { display:none; }
  table.wl-table, table.wl-table tbody, table.wl-table tr, table.wl-table td { display:block; width:100%; }
  table.wl-table tr {
    border-bottom:1px solid var(--border); padding:8px 4px;
  }
  table.wl-table td { border:0; padding:3px 8px; }
  table.wl-table td.num { text-align:left; }
  table.wl-table td[data-lbl]::before {
    content: attr(data-lbl) ' '; font-size:10px; color:var(--subtext);
    text-transform:uppercase; letter-spacing:0.06em; margin-right:6px;
  }
  .wl-table-wrap { border:0; }
}

/* AE-maturiteit-kaartjes in de Calculatie-tab: voorspeld → voorlopig →
   definitief. De actieve (= waarop wordt afgerekend) licht op. */
.jv-ae-mat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.jv-ae-mat {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; text-align:center;
}
.jv-ae-mat.active { border-color:var(--accent); background:rgba(232,67,26,0.06); }
.jv-ae-mat-label {
  font-size:9px; font-weight:500; color:var(--subtext);
  text-transform:uppercase; letter-spacing:0.08em;
}
.jv-ae-mat-val { font-size:22px; font-weight:500; letter-spacing:-0.5px; margin:2px 0; }
.jv-ae-mat-note { font-size:10px; color:var(--subtext); }
@media (max-width: 560px) { .jv-ae-mat-row { grid-template-columns:1fr; } }

/* ══ Beloning-blok op de staff-kaart (vertrouwelijk) ══════════════════
   Bewust visueel afgezonderd (gele "confidential"-rand) zodat je meteen
   ziet dat dit gevoelige data is. Bedragen staan gemaskeerd tot je op
   'Tonen' klikt — schouder-surf-bescherming. */
.staff-pay-card {
  background: linear-gradient(180deg, rgba(240,180,41,0.06), transparent 60%);
  border: 1px solid rgba(240,180,41,0.35);
  border-radius: var(--radius-lg); padding: 14px;
}
.staff-pay-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.staff-pay-title { font-size:14px; font-weight:500; }
.staff-pay-sub { font-size:11px; color:var(--subtext); margin-top:2px; }
.staff-pay-eye {
  margin-left:auto; background:var(--surface2); border:1px solid var(--border);
  color:var(--text); border-radius:999px; padding:5px 11px; font-size:11px;
  font-weight:500; cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:all .15s;
}
.staff-pay-eye:hover { border-color:var(--accent); }
.staff-pay-eye.on { border-color:var(--yellow); color:var(--yellow); background:rgba(240,180,41,0.1); }
.staff-pay-warn {
  background:rgba(240,180,41,0.1); border:1px solid rgba(240,180,41,0.35);
  border-radius:8px; padding:8px 10px; font-size:11px; color:var(--text);
  line-height:1.5; margin-bottom:10px;
}
.staff-pay-warn a { color:var(--accent); text-decoration:underline; }
.staff-pay-modes { display:flex; gap:6px; flex-wrap:wrap; }
.staff-pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.staff-pay-grid .spg-full { grid-column:1 / -1; }
.staff-pay-field-label {
  font-size:9px; font-weight:500; color:var(--subtext);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px;
}
.staff-pay-input {
  width:100%; background:var(--surface3); border:1px solid var(--border2);
  border-radius:8px; padding:8px 10px; color:var(--text); font-family:inherit;
  font-size:14px; font-weight:500; outline:none; box-sizing:border-box;
}
.staff-pay-input:focus { border-color:var(--accent); }
.staff-pay-input.masked {
  -webkit-text-security: disc; text-security: disc;
  letter-spacing:2px;
}
.staff-pay-hint { font-size:11px; color:var(--subtext); margin-top:4px; line-height:1.5; }
.staff-pay-history { margin-top:12px; font-size:11px; color:var(--subtext); line-height:1.6; }
.staff-pay-history-row {
  display:flex; gap:8px; align-items:center; padding:4px 0;
  border-top:1px solid var(--border);
}

/* Match badge on booking suggestions */
.match-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:5px; font-size:10px; font-weight:500;
}
.match-badge.perfect { background:rgba(39,174,96,.15); color:var(--green); }
.match-badge.good    { background:rgba(240,180,41,.15); color:var(--yellow); }
.match-badge.risk    { background:rgba(192,57,43,.12);  color:var(--red); }

.pdr-tech-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pdr-tech-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.pdr-tech-avatar {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 500; color: white; flex-shrink: 0;
}
.pdr-tech-name-input {
  flex: 1; background: var(--surface3); border: 1px solid var(--border2);
  border-radius: 8px; padding: 7px 10px; color: var(--text);
  font-family: inherit; font-size: 14px; font-weight: 500; outline: none;
  min-width: 0;
}
.pdr-tech-name-input:focus { border-color: var(--accent); }
.pdr-tech-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
}
.pdr-tech-metric {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.pdr-tech-metric-label {
  font-size: 9px; font-weight: 500; color: var(--subtext);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
}
.pdr-tech-metric-ctrl {
  display: flex; align-items: center; gap: 4px;
}
.pdr-tech-metric-val {
  flex: 1; text-align: center; font-size: 20px; font-weight: 500;
}
.pdr-tech-perf-bar {
  height: 4px; background: var(--border); border-radius: 2px; margin-top: 8px;
}
.pdr-tech-perf-fill {
  height: 100%; border-radius: 2px; transition: width 0.4s;
}
.pdr-tech-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; flex-wrap: wrap; gap: 6px;
}
.pdr-tech-daily {
  font-size: 11px; color: var(--subtext);
}
.pdr-tech-daily strong { color: var(--text); }
.color-picker-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;
}
.color-dot {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform 0.15s;
  flex-shrink: 0;
}
.color-dot:hover { transform: scale(1.2); }
.color-dot.selected { border-color: var(--text); transform: scale(1.15); }

.fo-pin-btn {
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  padding:16px;font-size:20px;font-weight:500;color:var(--text);
  cursor:pointer;font-family:inherit;transition:transform .12s;width:100%;
}
.fo-pin-btn:active { transform:scale(.93); }

/* Settings sub-tabs */
.stab {
  padding: 10px 16px; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--subtext); font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all 0.18s;
}
.stab.active { color: var(--accent); border-bottom-color: var(--accent); }
.stab-page { display: none; }
.stab-page.active { display: block; }

/* Settings-groep-rij (UX-sprint-1: hergroepering 18→5) */
.stab-grouprow {
  display: flex; gap: 6px; margin-bottom: 4px; padding: 4px;
  background: var(--surface); border-radius: 10px; border: 1px solid var(--border);
}
.stab-group {
  flex: 1; padding: 10px 14px; background: transparent; border: none;
  border-radius: 7px; color: var(--text); font-family: inherit;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.18s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.stab-group:hover { background: rgba(232,67,26,0.06); }
.stab-group.active {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 8px rgba(232,67,26,0.25);
}
.stab-subrow {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  margin-bottom: 20px; overflow-x: auto; scrollbar-width: none;
  min-height: 40px;
}
.stab[data-group]:not(.in-group) { display: none; }

/* Klantcomm — toon-knoppen (UX-sprint-1) */
.comm-tone-btn {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface); color: var(--text); font-family: inherit;
  font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.comm-tone-btn:hover { border-color: var(--accent); background: rgba(232,67,26,0.06); }
.comm-tone-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Afspraakbevestiging-template: placeholder-chips (Marc 12 jul) */
.ph-chip {
  padding: 5px 10px; border: 1px dashed var(--border); border-radius: 6px;
  background: var(--surface2); color: var(--text); font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.ph-chip:hover { border-color: #25D366; background: rgba(37,211,102,0.08); color: #25D366; }

/* UX-sprint-2: Volgende-stap-knop in jobvenster
   Groot bij office-actie (PLANNED → "Klant gebracht", READY → "Meld klant")
   Compact bij IN_PROGRESS (tech is bezig, office hoeft niks — minder schermbeslag) */
.jv-next-step {
  margin-top: 14px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(232,67,26,0.06), rgba(232,67,26,0.02));
  border: 1px solid rgba(232,67,26,0.20); border-left: 4px solid var(--accent);
  border-radius: 10px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.jv-next-step-label {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); flex-shrink: 0;
}
.jv-next-step-btn {
  flex: 1; min-width: 220px; padding: 12px 18px;
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all 0.15s; box-shadow: 0 2px 8px rgba(232,67,26,0.25);
}
.jv-next-step-btn:hover { filter: brightness(1.06); box-shadow: 0 4px 12px rgba(232,67,26,0.35); }
.jv-next-step-btn:disabled { background: var(--surface2); color: var(--subtext); cursor: default; box-shadow: none; }
/* Secundaire correctie-actie naast de hoofdknop (Costa 31 jul): terughoudend
   vormgegeven — het is een herstelactie, geen stap in de workflow. */
.jv-next-step-sec {
  flex: 0 0 auto; padding: 10px 14px;
  background: transparent; color: var(--subtext);
  border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: all 0.15s;
}
.jv-next-step-sec:hover { background: var(--surface2); color: var(--text); border-color: var(--subtext); }
.jv-next-step.compact .jv-next-step-sec { padding: 5px 10px; font-size: 11.5px; }
.jv-next-step-hint {
  font-size: 12px; color: var(--subtext); flex-basis: 100%;
}

/* Compact-variant: kleine subtiele strook tijdens IN_PROGRESS — office hoeft niks */
.jv-next-step.compact {
  margin-top: 10px; padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border); border-left: 3px solid var(--subtext);
  border-radius: 8px;
  gap: 10px;
}
.jv-next-step.compact .jv-next-step-label {
  font-size: 10px; color: var(--subtext);
}
.jv-next-step.compact .jv-next-step-btn {
  min-width: 0; flex: 0 0 auto; padding: 5px 10px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  font-size: 12px; font-weight: 500; box-shadow: none;
}
.jv-next-step.compact .jv-next-step-btn:hover {
  background: var(--surface3); border-color: var(--accent); filter: none;
}
.jv-next-step.compact .jv-next-step-hint {
  font-size: 11px; flex: 1; flex-basis: auto;   /* op zelfde regel als knop */
}

/* UX-sprint-2: Ochtend-briefing-tegel op dashboard */
.morning-briefing {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(232,67,26,0.08), rgba(232,67,26,0.02));
  border: 1px solid rgba(232,67,26,0.20); border-left: 5px solid var(--accent);
  border-radius: 12px; position: relative;
}
.morning-briefing.mb-hidden { display: none !important; }
.morning-briefing .mb-icon { font-size: 32px; flex-shrink: 0; }
.morning-briefing .mb-content { flex: 1; min-width: 0; }
.morning-briefing .mb-title {
  font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 4px;
}
.morning-briefing .mb-summary {
  font-size: 13px; color: var(--text); line-height: 1.5;
}
.morning-briefing .mb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.morning-briefing .mb-actions button {
  background: var(--accent); color: #fff; border: 0;
  padding: 8px 14px; border-radius: 8px; font-weight: 500; font-size: 12px;
  cursor: pointer; font-family: inherit; transition: filter 0.15s;
}
.morning-briefing .mb-actions button:hover { filter: brightness(1.1); }
.morning-briefing .mb-actions button.secondary {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.morning-briefing .mb-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; color: var(--subtext);
  font-size: 14px; cursor: pointer; padding: 4px 8px;
}
.morning-briefing .mb-close:hover { color: var(--text); }

/* Strategie-tab — radio-cards en horizon-targets */
.strategy-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: all 0.15s; background: var(--surface);
}
.strategy-opt:hover { border-color: var(--accent); background: rgba(232,67,26,0.04); }
.strategy-opt input[type="radio"] { margin-top: 3px; cursor: pointer; }
.strategy-opt-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--text); }
.strategy-opt-title small { color: var(--subtext); font-weight: 500; }
.strategy-opt-sub   { font-size: 11px; color: var(--subtext); line-height: 1.5; }
.strategy-opt.selected { border-color: var(--accent); background: rgba(232,67,26,0.08); }

.horizon-row {
  display: grid; grid-template-columns: 130px 60px 1fr 90px;
  align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.horizon-row:last-child { border-bottom: none; }
.horizon-row-label { font-size: 13px; font-weight: 500; }
.horizon-row-label small { color: var(--subtext); font-weight: 500; display: block; font-size: 10px; }
.horizon-row-pct { font-size: 13px; font-weight: 500; color: var(--accent); text-align: right; }
.horizon-row-slider { width: 100%; cursor: pointer; }
.horizon-row-slider:disabled { cursor: not-allowed; opacity: 0.5; }
.horizon-row-badge {
  display: inline-block; padding: 3px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 500;
  background: rgba(45,108,223,0.12); color: #2d6cdf;
}
.horizon-row-badge.committed { background: rgba(108,108,108,0.15); color: var(--subtext); }

/* Opening hours grid */
.oh-row {
  display: grid; grid-template-columns: 90px 40px 1fr 1fr;
  gap: 10px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.oh-row:last-child { border-bottom: none; }
.oh-day-name { font-size: 13px; font-weight: 500; }
.oh-toggle {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--border); border: none; cursor: pointer;
  position: relative; transition: background 0.2s; flex-shrink: 0;
}
.oh-toggle.on { background: var(--green); }
.oh-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%; background: white;
  transition: transform 0.2s;
}
.oh-toggle.on::after { transform: translateX(16px); }

/* Staff role rows */
.staff-role-row {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; margin-bottom: 10px;
}
.staff-role-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.staff-role-name-input {
  flex: 1; min-width: 140px;
  background: var(--surface3); border: 1px solid var(--border2);
  border-radius: 8px; padding: 7px 10px;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500; outline: none;
}
.staff-role-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 8px;
}
.staff-metric {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.staff-metric-label { font-size:10px;color:var(--subtext);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px; }
.staff-metric-ctrl { display:flex;align-items:center;gap:6px; }
.staff-metric-val { flex:1;text-align:center;font-size:16px;font-weight:500;color:var(--accent); }

/* Task duration rows */
.task-dur-row {
  display: grid; grid-template-columns: 1fr 120px 120px 36px;
  gap: 10px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.task-dur-row:last-child { border-bottom: none; }
.task-dur-name { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }

@media (max-width: 600px) {
  .main { padding: 14px 16px; }
  .header { padding: 0 16px; }
  .nav { padding: 0 12px; }
  .ae-big { flex-direction: column; gap: 10px; text-align: center; }
}

/* ================================
   DAMAGE PICKER (intake step 1)
   ================================ */
.dp-block { margin-bottom: 18px; }

.dp-counter-pill {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 5px 11px;
  font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  vertical-align: middle;
}
.dp-counter-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px rgba(232,67,26,0.6);
}
.dp-counter-pill.empty .dot { background: var(--muted); box-shadow: none; }

.dp-car-stage {
  background: linear-gradient(180deg, var(--surface) 0%, #161618 100%);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 12px 12px 8px; position: relative; overflow: hidden;
  margin-bottom: 8px;
}
body.light .dp-car-stage {
  background: linear-gradient(180deg, var(--surface) 0%, #ECECF1 100%);
}
.dp-car-display-wrap { position: relative; width: 100%; }
.dp-car-display-img {
  width: 100%; height: auto; display: block;
  filter: invert(1); pointer-events: none;
}
body.light .dp-car-display-img { filter: invert(0); }

.dp-zone-markers { position: absolute; inset: 0; pointer-events: none; }

.dp-zone-marker {
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(232, 67, 26, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4),
              inset 0 0 0 4px rgba(255,255,255,0.15);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: transform 0.18s, background 0.2s, width 0.18s, height 0.18s;
  z-index: 2;
  padding: 0;
  font-family: inherit;
}
.dp-zone-marker::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%; top: -8px;
  transform: translate(-50%, -100%);
  background: rgba(0,0,0,0.92); color: white;
  font-size: 11px; font-weight: 500;
  padding: 5px 9px; border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
}
.dp-zone-marker:hover {
  background: rgba(232,67,26,0.95);
  width: 40px; height: 40px;
  z-index: 5;
}
.dp-zone-marker:hover::after { opacity: 1; }
.dp-zone-marker:active { transform: translate(-50%, -50%) scale(0.88); }
.dp-zone-marker.has-damage {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,67,26,0.35), 0 2px 8px rgba(0,0,0,0.5);
}
.dp-zone-marker.has-damage.left-only {
  background: #4A9EFF;
  box-shadow: 0 0 0 3px rgba(74,158,255,0.35), 0 2px 8px rgba(0,0,0,0.5);
}
.dp-zone-marker-side-badge {
  position: absolute; bottom: -6px; right: -6px;
  background: var(--surface); color: var(--text);
  font-size: 8px; font-weight: 500;
  padding: 1px 4px; border-radius: 8px; line-height: 1.2;
  min-width: 14px; text-align: center;
  border: 1.5px solid rgba(255,255,255,0.8);
  pointer-events: none; white-space: nowrap;
}
.dp-zone-marker.has-damage .dp-zone-marker-side-badge {
  background: white; color: var(--accent); border-color: var(--accent);
}
.dp-zone-marker.has-damage.left-only .dp-zone-marker-side-badge {
  color: #4A9EFF; border-color: #4A9EFF;
}

.dp-stage-hint {
  font-size: 11px; color: var(--subtext); text-align: center;
  margin-top: 4px; font-weight: 500;
}

.dp-no-body-msg {
  background: var(--surface2); border: 1px dashed var(--border);
  border-radius: 12px; padding: 28px 20px; text-align: center;
  color: var(--subtext); font-size: 13px;
}

.dp-items-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

.dp-item-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.dp-item-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-item-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.dp-item-zone {
  font-size: 9px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px;
  background: rgba(232,67,26,0.12); color: var(--accent);
}
.dp-item-side-tag, .dp-item-type-tag {
  font-size: 9px; font-weight: 500;
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
}
.dp-item-side-tag.L { background: rgba(74,158,255,0.15); color: #4A9EFF; }
.dp-item-side-tag.R { background: rgba(232,67,26,0.15); color: var(--accent); }
.dp-item-type-tag.replace { background: rgba(232,67,26,0.12); color: var(--accent); }
.dp-item-type-tag.paint   { background: rgba(139,92,246,0.12); color: #8B5CF6; }
.dp-item-type-tag.glass   { background: rgba(74,158,255,0.12); color: #4A9EFF; }
.dp-item-type-tag.repair  { background: rgba(39,174,96,0.12); color: var(--green); }
.dp-item-remove {
  background: var(--surface2); border: none; border-radius: 50%;
  width: 22px; height: 22px; color: var(--subtext); font-size: 12px; cursor: pointer;
  flex-shrink: 0;
}
.dp-item-tools { display: flex; gap: 6px; }
.dp-item-tool-btn {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 8px;
  color: var(--text); font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer;
}
.dp-item-tool-btn.has-data { border-color: var(--green); color: var(--green); }
.dp-empty-list { text-align: center; padding: 14px 12px; color: var(--muted); font-size: 12px; font-style: italic; }

/* Side picker modal */
.dp-side-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp-side-pick-btn {
  background: var(--surface2); border: 2px solid var(--border);
  border-radius: 12px; padding: 18px 12px;
  color: var(--text); font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; transition: all 0.2s;
}
.dp-side-pick-btn.left { border-color: rgba(74,158,255,0.3); }
.dp-side-pick-btn.right { border-color: rgba(232,67,26,0.3); }
.dp-side-pick-btn:active { transform: scale(0.97); }
.dp-side-pick-icon { font-size: 24px; }
.dp-side-pick-label { font-size: 13px; font-weight: 500; }
.dp-side-pick-sub { font-size: 10px; color: var(--subtext); }
.dp-side-pick-both {
  grid-column: 1 / -1;
  background: var(--surface2); border: 2px solid var(--border);
  border-radius: 10px; padding: 10px;
  color: var(--text); font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
}

/* Parts checklist */
.dp-parts-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.dp-part-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px;
  cursor: pointer; transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.dp-part-item.checked { border-color: var(--accent); background: rgba(232,67,26,0.08); }
.dp-part-item.disabled { opacity: 0.4; pointer-events: none; }
.dp-part-checkbox {
  width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  font-size: 12px;
}
.dp-part-item.checked .dp-part-checkbox {
  background: var(--accent); border-color: var(--accent);
  color: white; font-weight: 500;
}
.dp-part-item.checked .dp-part-checkbox::after { content: '✓'; }
.dp-part-label { flex: 1; font-size: 13px; font-weight: 500; }
.dp-part-type-tag {
  font-size: 9px; font-weight: 500;
  padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dp-part-type-tag.replace { background: rgba(232,67,26,0.15); color: var(--accent); }
.dp-part-type-tag.paint   { background: rgba(139,92,246,0.15); color: #8B5CF6; }
.dp-part-type-tag.glass   { background: rgba(74,158,255,0.15); color: #4A9EFF; }
.dp-part-type-tag.repair  { background: rgba(39,174,96,0.15); color: var(--green); }

/* Collapsible "more parts" section */
.dp-parts-more { margin-top: 6px; }
.dp-parts-more-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: var(--surface2); border: 1px dashed var(--border);
  border-radius: 8px; padding: 9px 12px;
  color: var(--subtext); font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.dp-parts-more-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }

/* Manage-button in parts-modal header */
.dp-parts-manage-btn {
  margin-left: auto; margin-right: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px;
  color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}

/* Damage-picker manage modal */
.dp-manage-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.dp-manage-row {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 8px;
}
.dp-manage-reorder { display: flex; flex-direction: column; gap: 2px; }
.dp-manage-reorder button {
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 9px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.dp-manage-reorder button:disabled { opacity: 0.3; cursor: default; }
.dp-manage-input {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 13px; padding: 6px 8px; outline: none;
}
.dp-manage-name { flex: 1; min-width: 0; }
.dp-manage-type { width: 108px; flex-shrink: 0; }
.dp-manage-vis, .dp-manage-del {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 14px; padding: 5px 7px; flex-shrink: 0;
}
.dp-manage-vis.off { opacity: 0.55; }
.dp-manage-add {
  border-top: 1px solid var(--border); padding-top: 10px;
}
.dp-manage-add .dp-manage-input { width: 100%; }
.dp-manage-sync-zones {
  display: flex; flex-direction: column; gap: 4px; margin-top: 8px;
  max-height: 160px; overflow-y: auto;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px;
}
.dp-manage-sync-zone { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* ── Documenttype-registry (Instellingen › Documenttypes, §8.6) ──────────
   Zelfde rij-anatomie als de damage-picker-beheerlijst hierboven, zodat de
   twee beheerschermen zich hetzelfde gedragen. Verschil: de sleutel staat
   zichtbaar naast het label — hij is onveranderlijk en verklaart waarom een
   systeemtype niet weg kan. */
.dt-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dt-row {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 8px;
}
.dt-row.inactive { opacity: 0.55; }
.dt-reorder { display: flex; flex-direction: column; gap: 2px; }
.dt-reorder button {
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 9px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.dt-reorder button:disabled { opacity: 0.3; cursor: default; }
.dt-input {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 13px; padding: 6px 8px; outline: none;
}
.dt-input:disabled { opacity: 0.6; cursor: default; }
.dt-icon-input { width: 52px; flex-shrink: 0; text-align: center; }
.dt-label-input { flex: 1; min-width: 0; }
.dt-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--subtext);
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 6px; flex-shrink: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis;
}
.dt-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 5px; padding: 3px 6px; flex-shrink: 0;
  background: rgba(74,158,255,0.15); color: #4A9EFF;
}
.dt-vis, .dt-del {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 14px; padding: 5px 7px; flex-shrink: 0;
}
.dt-vis.off { opacity: 0.55; }
.dt-del:disabled { opacity: 0.3; cursor: not-allowed; }
.dt-add {
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.dt-add .dt-input:not(.dt-icon-input) { flex: 1; min-width: 0; }
.dt-radio {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; font-size: 13px; line-height: 1.5; cursor: pointer;
}
.dt-radio input { margin-top: 2px; }

/* Detail modal photos+note */
.dp-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.dp-photo-tile {
  aspect-ratio: 1; border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--surface2); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.dp-photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.dp-photo-tile.add {
  cursor: pointer; border-style: dashed; color: var(--subtext);
  flex-direction: column; gap: 2px; font-size: 11px; font-weight: 500;
}
.dp-photo-remove {
  position: absolute; top: 3px; right: 3px;
  background: rgba(0,0,0,0.7); color: white; border: none;
  border-radius: 50%; width: 20px; height: 20px; font-size: 11px; cursor: pointer;
}
/* Per-thumbnail upload-status badge (Phase 1/5: honest, observable state).
   State ring around the tile + corner badge; a pure function of photo.status. */
.dp-photo-tile.st-uploaded  { border-color: var(--green); }
.dp-photo-tile.st-uploading { border-color: #4A9EFF; }
.dp-photo-tile.st-gallery   { border-color: var(--subtext); }
.dp-photo-tile.st-error     { border-color: var(--accent); }
.dp-photo-badge {
  position: absolute; top: 3px; left: 3px;
  background: rgba(0,0,0,0.7); color: white;
  border-radius: 10px; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 10px; line-height: 18px; text-align: center;
  display: flex; align-items: center; gap: 2px; pointer-events: none;
}
.dp-photo-badge.st-error { background: var(--accent); cursor: pointer; pointer-events: auto; }
.dp-photo-badge.st-uploaded { background: rgba(39,174,96,0.9); }
.dp-photo-badge .spin { display: inline-block; animation: dpSpin 0.9s linear infinite; }
@keyframes dpSpin { to { transform: rotate(360deg); } }
.dp-photo-gallery {
  position: absolute; bottom: 3px; right: 3px;
  background: rgba(0,0,0,0.6); color: white; border: none;
  border-radius: 5px; padding: 2px 5px; font-size: 10px; cursor: pointer;
}
.dp-photo-gallery.saved { background: rgba(39,174,96,0.85); }
.dp-note-input {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px;
  color: var(--text); font-family: inherit; font-size: 13px;
  resize: none; height: 70px; line-height: 1.45; outline: none;
}

/* RDW lookup status */
.rdw-status {
  font-size: 11px; color: var(--subtext); margin-top: 4px;
  display: flex; align-items: center; gap: 6px;
}
.rdw-status.success { color: var(--green); }
.rdw-status.error   { color: var(--accent); }
.rdw-status.loading { color: #4A9EFF; }


/* Calibration mode */
.dp-car-stage.calibrating {
  border: 2px dashed var(--accent);
  box-shadow: 0 0 0 4px rgba(232,67,26,0.12);
}
.dp-car-stage.calibrating .dp-zone-marker {
  background: rgba(255, 200, 50, 0.85);
  border-color: white;
  cursor: move;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.dp-car-stage.calibrating .dp-zone-marker:hover { width: 28px; height: 28px; }
.dp-cal-toggle {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 5px 11px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: inherit; color: var(--subtext);
}
.dp-cal-toggle.on { background: var(--accent); color: white; border-color: var(--accent); }
.dp-cal-status {
  font-size: 11px; color: var(--accent); font-weight: 500;
  margin-bottom: 6px; display: none;
}
.dp-cal-status.show { display: block; }

/* Photo lightbox */
.photo-lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 600;
  align-items: center; justify-content: center;
  padding: 20px;
}
.photo-lightbox.open { display: flex; }
.photo-lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px; object-fit: contain;
}
.photo-lightbox-close {
  position: absolute; top: 20px; right: 20px;
  background: rgba(255,255,255,0.15); color: white;
  border: none; border-radius: 50%; width: 40px; height: 40px;
  font-size: 22px; cursor: pointer;
  backdrop-filter: blur(8px);
}
.photo-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.15); color: white;
  border: none; border-radius: 50%; width: 44px; height: 44px;
  font-size: 22px; cursor: pointer;
  backdrop-filter: blur(8px);
}
.photo-lightbox-nav.prev { left: 20px; }
.photo-lightbox-nav.next { right: 20px; }
.photo-lightbox-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: white; font-size: 13px; font-weight: 500;
  background: rgba(0,0,0,0.6); padding: 6px 12px; border-radius: 14px;
}

/* Queue search */
.queue-search-row {
  display: flex; gap: 8px; margin-bottom: 12px; align-items: center;
}
.queue-search-input {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px;
  color: var(--text); font-family: inherit; font-size: 13px;
  outline: none; -webkit-appearance: none;
}
.queue-search-input:focus { border-color: var(--accent); }
.queue-search-clear {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px;
  color: var(--subtext); font-family: inherit; font-size: 12px; cursor: pointer;
}

/* ── Universele drop-surface (2b-4, §11.5) ─────────────────────────────
   Eén laag over de hele app in plaats van zes dropzones. Hij is er alleen
   tijdens het slepen (pointer-events: none, zodat hij zelf nooit een drop
   afvangt of een klik blokkeert) en vertelt wat er gaat gebeuren. z-index
   9800: boven het jobvenster (9400) en de mobiele uploader (9700), want
   slepen kan óók terwijl een venster open staat. */
.sw-drop-overlay {
  position: fixed; inset: 0; z-index: 9800;
  display: none; align-items: center; justify-content: center;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.sw-drop-overlay.open { display: flex; }
.sw-drop-overlay-card {
  max-width: 460px; margin: 0 20px; padding: 34px 28px;
  text-align: center;
  border: 2px dashed rgba(139,92,246,0.9);
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
}
.sw-drop-overlay-icon  { font-size: 46px; margin-bottom: 10px; }
.sw-drop-overlay-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.sw-drop-overlay-sub   { font-size: 12.5px; line-height: 1.5; color: var(--subtext); }

/* ── De vraag NÁ het droppen (Costa 3 aug) ─────────────────────────────
   De laag sloot direct na het loslaten en deed meteen zijn werk. Nu blijft hij
   staan met drie knoppen ONDER het kader: nu afhandelen, naar de inbox, of
   even laten liggen. Zolang die vraag open staat moet de laag wél klikbaar
   zijn — daarom zet .asking pointer-events terug aan (de laag zelf blijft
   'none' tijdens het slepen, anders vangt hij de drop af). */
.sw-drop-overlay.asking { pointer-events: auto; flex-direction: column; overflow: auto; }
.sw-drop-overlay.asking .sw-drop-overlay-card { border-style: solid; }
.sw-drop-after {
  max-width: 460px; margin: 12px 20px 0;
  padding: 14px; border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
  text-align: left;
}
.sw-drop-after-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.sw-drop-after-files { font-size: 11.5px; color: var(--subtext); margin-bottom: 10px; word-break: break-all; }
.sw-drop-choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface, #fff); color: var(--text);
  font-family: inherit; padding: 9px 11px; margin-bottom: 7px;
}
.sw-drop-choice:hover { border-color: #8B5CF6; background: rgba(139,92,246,0.06); }
.sw-drop-choice.primary { border-color: #8B5CF6; background: rgba(139,92,246,0.10); }
.sw-drop-choice-label { font-size: 13px; font-weight: 600; }
.sw-drop-choice-hint  { font-size: 11.5px; color: var(--subtext); line-height: 1.4; }
.sw-drop-after-cancel {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  color: var(--subtext); font-family: inherit; font-size: 11.5px; text-decoration: underline;
}

/* .pi-dropzone / .pi-drop-* zijn vervallen met 2b-5 (31 jul 2026): de intake- en
   protocol-pagina hadden elk een eigen kader "sleep hier". Met één surface over
   de hele app is zo'n kader misleidend — het suggereert dat het ergens anders
   niet mag. De opvolger is .sw-drop-overlay hierboven.
   .pi-result-row is vervallen met 2b-3 (31 jul 2026): de protocol-inbox tekent
   geen eigen rijen meer maar schrijft in het gedeelde model, en wordt door
   dezelfde .ii-table getekend als de intake-inbox. De statuskleuren staan nu
   één keer, bij .ii-table tr.ii-r-*. */

/* ─── Intake-inbox tabel (Costa 31 jul) ──────────────────────────────
   460 gescande bladen als 460 losse kaarten is onwerkbaar: de één regel die
   een keuze vraagt verdrinkt tussen de honderden overgeslagen bladen. De
   lijst is daarom één tabel: kolomkop = sorteren, filter erboven. Zelfde
   tabel-taal als de toegewezen OBD-rapporten. */
.ii-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ii-table th {
  text-align: left; padding: 8px 10px; font-size: 11px; color: var(--subtext);
  border-bottom: 1px solid var(--border); white-space: nowrap;
  cursor: pointer; user-select: none;
}
.ii-table th:hover { color: var(--text); }
.ii-table th.ii-nosort { cursor: default; }
.ii-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ii-table tbody tr:hover { background: var(--surface2); }
.ii-table td.ii-file {
  max-width: 300px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 500;
}
.ii-table td.ii-hint { color: var(--subtext); font-size: 12px; }
.ii-table td.ii-actions { text-align: right; white-space: nowrap; }
.ii-table td.ii-dim { color: var(--subtext); }
/* Statuskleur staat links in de rij — hetzelfde kleurenpalet als de kaarten */
.ii-table tr.ii-r-ok      td:first-child { box-shadow: inset 3px 0 0 #22C55E; }
.ii-table tr.ii-r-err     td:first-child { box-shadow: inset 3px 0 0 #DC2626; }
.ii-table tr.ii-r-nomatch td:first-child { box-shadow: inset 3px 0 0 #F59E0B; }
.ii-table tr.ii-r-info    td:first-child { box-shadow: inset 3px 0 0 #0EA5E9; }
.ii-table tr.ii-r-pending td:first-child { box-shadow: inset 3px 0 0 #94A3B8; }
.ii-table tr.ii-r-done    td:first-child { box-shadow: inset 3px 0 0 #94A3B8; }
.ii-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; border-radius: 10px;
  padding: 2px 8px; white-space: nowrap;
}
.ii-pill.ii-ok      { background: rgba(34,197,94,0.12);  color: #15803D; }
.ii-pill.ii-err     { background: rgba(220,38,38,0.12);  color: #B91C1C; }
.ii-pill.ii-nomatch { background: rgba(245,158,11,0.15); color: #B45309; }
.ii-pill.ii-info    { background: rgba(14,165,233,0.12); color: #0369A1; }
.ii-pill.ii-pending { background: rgba(148,163,184,0.18); color: var(--subtext); }
.ii-pill.ii-done    { background: rgba(148,163,184,0.18); color: var(--subtext); }
/* Soort-label (2b-3): in dezelfde lijst kunnen nu intakebladen, protocollen en
   nog-niet-geplaatste bestanden staan. Bewust rustiger dan de statuspil — de
   status is wat je moet doen, de soort is wat het ís. */
.ii-kind {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; white-space: nowrap; color: var(--subtext);
  border: 1px solid var(--border); border-radius: 8px; padding: 1px 7px;
}
/* Klikbare telchips boven de tabel — filteren in één klik */
.ii-chip {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 3px 10px; font-size: 12px;
  color: var(--text); font-family: inherit; cursor: pointer;
}
.ii-chip:hover { border-color: #8B5CF6; }
.ii-chip.active { border-color: #8B5CF6; background: rgba(139,92,246,0.10); font-weight: 600; }
.ii-empty { padding: 14px; color: var(--subtext); font-size: 13px; }

/* ─── Herbruikbare dropzone (Costa 15 jul) — compacte variant ────────
   Kleinere dropzone die naast/onder de contact-knoppen past (rechterkolom
   van de case-modal). Gecondenseerde bestandslijst zonder kaders. */
.sw-dz-zone {
  border: 2px dashed rgba(139,92,246,0.35);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  background: rgba(139,92,246,0.03);
  transition: background .15s, border-color .15s, transform .05s;
}
.sw-dz-zone:hover, .sw-dz-zone.active {
  background: rgba(139,92,246,0.08);
  border-color: #8B5CF6;
}
.sw-dz-zone.active { transform: scale(1.005); }
.sw-dz-icon  { font-size: 26px; margin-bottom: 4px; line-height: 1; }
.sw-dz-title { font-size: 13px; font-weight: 500; color: var(--text); }
.sw-dz-sub   { font-size: 11px; color: var(--subtext); margin-top: 2px; }
/* Gecondenseerde staging-lijst: items onder elkaar, geen kaders */
.sw-dz-list { margin-top: 8px; display: flex; flex-direction: column; }
.sw-dz-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.sw-dz-row:last-child { border-bottom: 0; }
.sw-dz-row .sw-dz-ic { font-size: 14px; cursor: default; }
.sw-dz-row .sw-dz-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text);
}
.sw-dz-row select.sw-dz-cat {
  font-size: 11px; padding: 2px 4px; max-width: 130px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-family: inherit;
}
.sw-dz-row .sw-dz-x {
  border: 0; background: transparent; cursor: pointer;
  color: var(--subtext); font-size: 13px; padding: 0 2px; line-height: 1;
}
.sw-dz-row .sw-dz-x:hover { color: #DC2626; }
/* Footer: apply-to-all links, Upload-knop rechts, op één regel */
.sw-dz-footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; flex-wrap: wrap;
}
.sw-dz-footer select.sw-dz-cat-all {
  flex: 1; min-width: 120px; font-size: 11px; padding: 4px 6px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-family: inherit;
}
.sw-dz-progress {
  margin-top: 8px; height: 8px; border-radius: 6px;
  background: var(--surface2, #eee); overflow: hidden; display: none;
}
.sw-dz-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #8B5CF6, #a78bfa);
  transition: width .2s ease;
}
.sw-dz-progress-label {
  font-size: 10px; color: var(--subtext); margin-top: 3px; text-align: right;
  display: none;
}
/* Hover-thumbnail popup */
#sw-thumb-pop {
  position: fixed; z-index: 4000; pointer-events: none;
  display: none; padding: 4px;
  background: #000; border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
#sw-thumb-pop img {
  display: block; max-width: 220px; max-height: 220px; border-radius: 5px;
}
#sw-thumb-pop .sw-thumb-doc {
  color: #fff; font-size: 11px; padding: 14px 18px; text-align: center;
}

/* ─── Document-preview modal (Costa 15 jul) ──────────────────────── */
.jv-docmodal-overlay {
  position: fixed; inset: 0; z-index: 3500;
  background: rgba(0,0,0,0.6);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.jv-docmodal-overlay.open { display: flex; }
.jv-docmodal {
  background: var(--surface); border-radius: 14px;
  width: min(900px, 100%); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.jv-docmodal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.jv-docmodal-title { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-docmodal-close {
  border: 0; background: var(--surface2); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 15px; color: var(--text);
}
.jv-docmodal-body {
  flex: 1; min-height: 0; overflow: auto; background: var(--surface2, #f5f5f5);
  display: flex; align-items: center; justify-content: center;
}
.jv-docmodal-body iframe { width: 100%; height: 70vh; border: 0; background: #fff; }
.jv-docmodal-body img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.jv-docmodal-actions {
  display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border);
  flex-wrap: wrap; justify-content: flex-end;
}

/* ─── Verwijderde items (admin-only) sectie ──────────────────────── */
.jv-removed-section { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 12px; }
.jv-removed-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--subtext);
  background: none; border: 0; font-family: inherit; padding: 0;
}
.jv-removed-list { margin-top: 10px; display: none; flex-direction: column; gap: 6px; }
.jv-removed-list.open { display: flex; }
.jv-removed-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 12px;
}
.jv-removed-row .jv-removed-name { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.jv-removed-row .jv-removed-meta { font-size: 10px; color: var(--subtext); }

/* Damage section in edit modal */
.edit-damage-section {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 16px;
}
.edit-damage-title {
  font-size: 11px; font-weight: 500; color: var(--subtext);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.edit-damage-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.edit-damage-row:last-child { margin-bottom: 0; }
.edit-damage-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edit-damage-name { flex: 1; font-weight: 500; }
.edit-damage-remove {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 14px; line-height: 1;
  padding: 2px 4px; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.edit-damage-remove:hover { color: var(--accent); background: var(--surface2); }
.edit-damage-photos { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.edit-damage-photo-thumb {
  width: 50px; height: 50px; border-radius: 6px; cursor: pointer;
  object-fit: cover; border: 1px solid var(--border);
  transition: transform 0.15s;
}
.edit-damage-photo-thumb:hover { transform: scale(1.05); }
.edit-damage-note {
  font-size: 11px; color: var(--subtext); font-style: italic;
  background: var(--surface2); padding: 4px 8px; border-radius: 4px;
}
.edit-damage-empty {
  color: var(--muted); font-size: 12px; font-style: italic; text-align: center; padding: 6px;
}


.appt-block.continuation {
  opacity: 0.78;
  border-style: dashed !important;
}

/* ================================
   TECH PORTAL
   ================================ */
#tech-portal {
  display: none;
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 800;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#tech-portal.open { display: block; }

/* Hide office UI when tech portal is open */
body.tech-mode .header,
body.tech-mode .nav,
body.tech-mode .main,
body.tech-mode #fo-login-screen { display: none !important; }

.tp-header {
  position: sticky; top: 0; z-index: 5;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center;
}
body.light .tp-header { background: rgba(242,242,247,0.85); }

.tp-back-btn {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 50%; width: 36px; height: 36px;
  color: var(--text); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.tp-job-info { flex: 1; padding: 0 12px; min-width: 0; }
.tp-job-rego { font-size: 17px; font-weight: 500; letter-spacing: -0.3px; }
.tp-job-meta { font-size: 11px; color: var(--subtext); margin-top: 1px; }

.tp-user-pill {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}
.tp-user-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.tp-tabs {
  display: flex;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 60px; z-index: 4;
}
body.light .tp-tabs { background: var(--bg); }

.tp-tab {
  flex: 1; padding: 12px 8px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--subtext); font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tp-tab .badge {
  background: var(--accent); color: white;
  border-radius: 9px; padding: 1px 5px;
  font-size: 10px; font-weight: 500; margin-left: 4px;
}

.tp-page { display: none; padding: 14px; max-width: 600px; margin: 0 auto; }
.tp-page.active { display: block; }

/* TASKS PIPELINE */
.tp-task-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.tp-task-card.can-action { border-color: var(--accent); background: rgba(232,67,26,0.04); cursor: pointer; }
.tp-task-card.in-progress { border-color: #4A9EFF; background: rgba(74,158,255,0.06); }
.tp-task-card.completed { opacity: 0.65; }

/* 💬 Chat-knop per taak — opent chat-tab */
.tp-task-chat-btn {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-right: 6px;
  transition: transform 0.12s, background 0.12s;
}
.tp-task-chat-btn:hover { background: rgba(232,67,26,0.12); transform: scale(1.08); }
.tp-task-chat-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--red);
  color: white;
  font-size: 9px;
  font-weight: 500;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}
.tp-task-icon-wrap {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); flex-shrink: 0;
  font-size: 16px;
}
.tp-task-icon-wrap.done { background: rgba(39,174,96,0.12); }
.tp-task-icon-wrap.active { background: rgba(74,158,255,0.18); }
.tp-task-icon-wrap.ready { background: rgba(232,67,26,0.18); }
.tp-task-icon-wrap.locked { background: var(--surface2); opacity: 0.5; }
.tp-task-info { flex: 1; min-width: 0; }
.tp-task-name { font-size: 14px; font-weight: 500; }
.tp-task-meta { font-size: 11px; color: var(--subtext); margin-top: 2px; }
.tp-task-action {
  background: var(--accent); color: white;
  border: none; border-radius: 8px; padding: 7px 13px;
  font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit;
  flex-shrink: 0;
}
.tp-task-action.signoff { background: #4A9EFF; }
.tp-task-action.start { background: var(--green); }

.tp-task-photos-strip {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px;
}
.tp-task-photo-thumb {
  width: 40px; height: 40px; border-radius: 5px;
  border: 1px solid var(--border); object-fit: cover; cursor: pointer;
}

/* DAMAGE list (read-only on tech portal) */
.tp-damage-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  margin-bottom: 6px;
  font-size: 13px;
}
.tp-damage-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-damage-name { flex: 1; font-weight: 500; }
.tp-damage-photos { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.tp-damage-photo-thumb {
  width: 44px; height: 44px; border-radius: 6px;
  border: 1px solid var(--border); object-fit: cover; cursor: pointer;
}
.tp-damage-note {
  font-size: 11px; color: var(--subtext); font-style: italic;
  margin-top: 4px;
}

/* CHAT */
.tp-chat-list {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 80px;  /* leave room for fixed input bar */
}
.tp-chat-msg {
  max-width: 85%;
  padding: 8px 12px; border-radius: 14px;
  font-size: 13px; line-height: 1.45;
  align-self: flex-start;
}
.tp-chat-msg.mine { align-self: flex-end; background: rgba(232,67,26,0.18); border-bottom-right-radius: 4px; }
.tp-chat-msg.other { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.tp-chat-msg.system {
  align-self: center;
  background: var(--surface2);
  font-size: 11px; color: var(--subtext);
  border-radius: 10px; padding: 5px 10px;
  font-style: italic;
}
.tp-chat-msg.flag { background: rgba(192,57,43,0.12); border: 1px solid rgba(192,57,43,0.25); color: var(--red); }
.tp-chat-msg-meta { font-size: 10px; color: var(--muted); margin-top: 3px; font-weight: 500; }

/* Chat-bericht: rechtermuisknop voor contextmenu */
.tp-chat-msg { position: relative; }
.tp-chat-msg:not(.system):hover { box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: context-menu; }

/* Highlight bij scroll-to-message vanaf "Mijn taken" */
.tp-chat-msg-highlight {
  animation: tpChatPulse 2.5s ease;
}
@keyframes tpChatPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  20% { box-shadow: 0 0 0 8px rgba(245,158,11,0.4); background: rgba(245,158,11,0.18); }
  60% { box-shadow: 0 0 0 4px rgba(245,158,11,0.1); }
}
.tp-chat-input-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
  z-index: 10;
}
body.light .tp-chat-input-bar { background: var(--bg); }

/* ── Tech-portal CHAT FAB-panel: floating overlay rechtsonder ─────────── */
/* Verberg office-knoppen (feedback, chat-FAB, taken, speed-dial) wanneer in tech-mode */
body.tech-mode #fb-btn,
body.tech-mode #chat-fab,
body.tech-mode #chat-fab-panel,
body.tech-mode #tasks-fab,
body.tech-mode #tasks-fab-panel,
body.tech-mode #fab-sd-main { display: none !important; }

.tp-page#tp-page-chat.tp-chat-floating {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: 520px;
  max-height: calc(100vh - 130px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  z-index: 9099;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}
.tp-page#tp-page-chat.tp-chat-floating .tp-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  padding-bottom: 14px;   /* override de "fixed input bar" ruimte uit oude CSS */
}
.tp-page#tp-page-chat.tp-chat-floating .tp-chat-input-bar {
  position: relative !important;
  border-radius: 0;
  margin: 0;
}
/* Header bar binnen het floating panel */
.tp-chat-floating-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
  flex-shrink: 0;
}
.tp-chat-floating-title { font-size: 13px; font-weight: 500; color: var(--text); }
.tp-chat-floating-close {
  border: 0; background: transparent; font-size: 20px; cursor: pointer;
  color: var(--subtext); line-height: 1; padding: 4px 8px;
}

.tp-chat-input {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 18px; padding: 9px 14px;
  color: var(--text); font-family: inherit; font-size: 14px;
  outline: none;
}
.tp-chat-send {
  background: var(--accent); color: white; border: none;
  border-radius: 50%; width: 38px; height: 38px;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* Sign-off modal — photos */
.tp-signoff-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 850;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.tp-signoff-overlay.open { display: flex; }
.tp-signoff-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
}
.tp-signoff-body { padding: 14px; flex: 1; }
.tp-signoff-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-bottom: 14px;
}
.tp-signoff-photo {
  aspect-ratio: 1; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--surface2); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.tp-signoff-photo img { width: 100%; height: 100%; object-fit: cover; }
.tp-signoff-photo.add {
  cursor: pointer; border-style: dashed; color: var(--subtext);
  flex-direction: column; gap: 3px; font-size: 12px; font-weight: 500;
}
.tp-signoff-photo-remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.7); color: white; border: none;
  border-radius: 50%; width: 22px; height: 22px; font-size: 11px; cursor: pointer;
}
.tp-signoff-action-bar {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 10px;
}
.tp-signoff-action-bar .btn { flex: 1; }


/* ===== QR MODAL ===== */
.qr-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  z-index: 9600;                 /* boven jv-overlay (9400) */
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.qr-modal-overlay.open { display: flex; }
.qr-modal-card {
  background: white; color: #111;
  border-radius: 24px; padding: 28px 24px;
  max-width: 380px; width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.qr-modal-title { font-size: 20px; font-weight: 500; letter-spacing: -0.4px; margin-bottom: 4px; }
.qr-modal-sub { font-size: 13px; color: #666; margin-bottom: 18px; line-height: 1.5; }
.qr-modal-rego {
  background: #FFF7F2; color: #E8431A;
  border: 2px solid #E8431A;
  border-radius: 12px; padding: 8px 16px;
  font-size: 18px; font-weight: 500; letter-spacing: 0.04em;
  display: inline-block; margin-bottom: 16px;
}
.qr-canvas-wrap {
  background: white; padding: 16px; border-radius: 14px;
  display: inline-block; margin-bottom: 16px;
  border: 2px solid #f0f0f0;
}
.qr-canvas-wrap img, .qr-canvas-wrap canvas {
  display: block; max-width: 100%;
}
.qr-modal-url {
  font-size: 11px; color: #888;
  font-family: ui-monospace, 'SF Mono', monospace;
  background: #f5f5f7; padding: 6px 10px; border-radius: 6px;
  word-break: break-all; margin-bottom: 14px;
  max-height: 60px; overflow: auto;
}
.qr-modal-actions { display: flex; gap: 8px; justify-content: center; }
.qr-modal-btn {
  padding: 10px 16px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  border: none;
}
.qr-modal-btn.primary { background: #E8431A; color: white; }
.qr-modal-btn.secondary { background: #f0f0f0; color: #333; }
.qr-modal-btn.ghost { background: transparent; color: #666; border: 1px solid #ddd; }

/* Tech portal: damage picker tab — same look as in office */
#tp-page-damage .dp-car-stage { margin-bottom: 8px; }
.tp-damage-add-btn {
  background: var(--accent); color: white; border: none;
  border-radius: 10px; padding: 10px 14px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; width: 100%; margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Login users UI (settings → staff) — UX-sprint: compacte tegels (Marc 14 jun) */
.fo-users-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px; margin-top: 10px;
}
.fo-user-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  position: relative; min-height: 48px;
}
.fo-user-card:hover { border-color: var(--accent); background: rgba(232,67,26,0.04); }
.fo-user-card.disabled { opacity: 0.5; }
.fo-user-name {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 16px;   /* ruimte voor het rol-puntje rechtsboven */
}
.fo-user-email {
  font-size: 11px; color: var(--subtext);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Rol-puntje rechtsboven (kleine kleur-indicator) */
.fo-user-roledot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
}
.fo-user-roledot.admin  { background: var(--accent); }
.fo-user-roledot.tech   { background: #4A9EFF; }
.fo-user-roledot.office { background: var(--green); }
/* UITGENODIGD-badge: klein paars hoekje rechtsonder */
.fo-user-pending {
  position: absolute; bottom: 6px; right: 8px;
  font-size: 9px; font-weight: 500; color: #A78BFA;
}


.tp-task-description {
  font-size: 11px; color: var(--subtext); line-height: 1.4;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-style: italic;
}
.tp-task-note {
  font-size: 11px; color: var(--text); line-height: 1.4;
  margin-top: 5px; padding: 4px 8px;
  background: var(--surface2);
  border-radius: 5px;
}

/* Werkzaamheden — section dividers */
.tp-werk-section {
  margin-bottom: 16px;
}
.tp-werk-section-title {
  font-size: 11px; font-weight: 500; color: var(--subtext);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.tp-werk-section-title .badge-pill {
  background: var(--surface2); color: var(--text);
  padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.tp-werk-empty {
  color: var(--muted); font-size: 12px; font-style: italic;
  text-align: center; padding: 8px;
}

/* Dellenprotokoll panels list */
.tp-pdr-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.tp-pdr-panel {
  flex: 1; font-weight: 500;
}
.tp-pdr-stat {
  font-size: 11px; color: var(--subtext);
  font-family: ui-monospace, 'SF Mono', monospace;
}
.tp-pdr-ae {
  background: rgba(232,67,26,0.12); color: var(--accent);
  font-size: 11px; font-weight: 500;
  padding: 3px 8px; border-radius: 5px;
  min-width: 48px; text-align: center;
}
.tp-pdr-row.cap {
  border-color: rgba(240,180,41,0.3);
  background: rgba(240,180,41,0.05);
}
.tp-pdr-cap-tag {
  font-size: 9px; font-weight: 500;
  background: rgba(240,180,41,0.18); color: var(--yellow);
  padding: 2px 5px; border-radius: 4px;
  text-transform: uppercase;
}
.tp-pdr-summary {
  background: var(--surface2); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 6px;
  display: flex; justify-content: space-around;
  font-size: 12px;
}
.tp-pdr-summary-cell { text-align: center; }
.tp-pdr-summary-val { font-size: 17px; font-weight: 500; color: var(--text); }
.tp-pdr-summary-lbl { font-size: 10px; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.06em; }


/* ════════════════════════════════════════
   TECH-HOME OVERLAY (after PIN login for tech)
   ════════════════════════════════════════ */
#tech-home {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 800;
  display: none;
  flex-direction: column;
}
#tech-home.open { display: flex; }
body.tech-home-mode { overflow: hidden; }
body.tech-home-mode .header,
body.tech-home-mode .nav,
body.tech-home-mode .main { display: none !important; }

.th-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.th-greeting { font-size: 18px; font-weight: 500; color: var(--text); }
.th-greeting-sub { font-size: 12px; color: var(--subtext); margin-top: 2px; }

.th-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 24px;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

.th-action-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 28px 20px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.th-action-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.th-action-icon { font-size: 36px; }
.th-action-title { font-size: 18px; font-weight: 500; color: var(--text); }
.th-action-sub { font-size: 12px; color: var(--subtext); line-height: 1.5; }

.th-pending-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
}


/* ════════════════════════════════════════
   MY CALENDAR (#mycal)
   ════════════════════════════════════════ */
#my-calendar {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 800;
  display: none;
  flex-direction: column;
}
#my-calendar.open { display: flex; }
body.mycal-mode { overflow: hidden; }
body.mycal-mode .header,
body.mycal-mode .nav,
body.mycal-mode .main { display: none !important; }

.mc-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.mc-back-btn {
  background: var(--surface2);
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  color: var(--text); font-size: 18px;
  cursor: pointer; flex-shrink: 0;
}
.mc-title-block { flex: 1; min-width: 0; }
.mc-title { font-size: 16px; font-weight: 500; color: var(--text); }
.mc-tech-name { font-size: 11px; color: var(--subtext); margin-top: 2px; }

.mc-subscribe-btn {
  background: linear-gradient(135deg, rgba(74,158,255,0.15), rgba(74,158,255,0.05));
  border: 1px solid rgba(74,158,255,0.4);
  color: #4A9EFF;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  white-space: nowrap;
}
.mc-subscribe-btn:hover {
  background: rgba(74,158,255,0.2);
  transform: translateY(-1px);
}

.mc-week-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.mc-week-nav-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}
.mc-week-nav-btn:hover { background: var(--surface); border-color: var(--accent); }
.mc-week-title { flex: 1; text-align: center; font-size: 14px; font-weight: 500; color: var(--text); }

.mc-legend {
  background: var(--surface2);
  padding: 8px 14px;
  font-size: 11px;
  color: var(--subtext);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.mc-legend-item { display: flex; align-items: center; gap: 4px; }
.mc-legend-dot {
  width: 10px; height: 10px;
  border-radius: 2px;
}

.mc-grid-wrap {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

.mc-grid {
  display: grid;
  min-width: 600px;
}

/* MC cell types — overlays on top of week-grid */
.mc-cell-overlay {
  position: absolute;
  left: 1px; right: 1px;
  border-radius: 3px;
  font-size: 10px;
  padding: 2px 4px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}

/* Default work pattern: green tint on available cells */
.mc-cell-available { background: rgba(39,174,96,0.06); }
.mc-cell-unavailable {
  background: rgba(0,0,0,0.18);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.05) 0,
    rgba(0,0,0,0.05) 4px,
    transparent 4px,
    transparent 8px
  );
}
body.light .mc-cell-unavailable { background: rgba(0,0,0,0.05); }

/* Claim overlays */
.mc-claim-pending {
  background: rgba(240,180,41,0.85);
  color: #1a1a1a;
  border: 1.5px solid #F0B429;
}
.mc-claim-approved-vacation {
  background: rgba(74,158,255,0.85);
  color: white;
  border: 1.5px solid #4A9EFF;
}
.mc-claim-approved-unavailable {
  background: rgba(142,142,147,0.85);
  color: white;
  border: 1.5px solid #8E8E93;
}
.mc-claim-approved-extra {
  background: rgba(39,174,96,0.85);
  color: white;
  border: 1.5px solid #27AE60;
}
.mc-claim-sick {
  background: rgba(192,57,43,0.85);
  color: white;
  border: 1.5px solid #C0392B;
}
.mc-claim-rejected {
  background: rgba(142,142,147,0.4);
  color: var(--subtext);
  border: 1.5px solid var(--border);
  text-decoration: line-through;
}

/* Job clocked time overlay (historical) */
.mc-job-clocked {
  background: rgba(74,158,255,0.6);
  color: white;
  border: 1px solid #4A9EFF;
  border-radius: 3px;
}

/* Click-feedback on grid cells */
.mc-grid .tg-cell {
  cursor: pointer;
  position: relative;
}
.mc-grid .tg-cell:hover { background: rgba(232,67,26,0.06); }


/* ════════════════════════════════════════
   CLAIM MODAL
   ════════════════════════════════════════ */
.claim-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.claim-modal-overlay.open { display: flex; }
.claim-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}
.claim-modal-hdr {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.claim-modal-title { font-size: 17px; font-weight: 500; color: var(--text); }
.claim-modal-body { padding: 18px; }

.claim-type-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.claim-type-btn {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.claim-type-btn.active {
  border-color: var(--accent);
  background: rgba(232,67,26,0.08);
}
.claim-type-icon { font-size: 22px; margin-bottom: 4px; }
.claim-type-label { font-size: 11px; font-weight: 500; color: var(--text); }

.claim-form-field {
  margin-bottom: 14px;
}
.claim-form-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.claim-form-input,
.claim-form-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.claim-form-input:focus,
.claim-form-textarea:focus { border-color: var(--accent); }
.claim-form-textarea { resize: vertical; min-height: 64px; }

.claim-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.claim-modal-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.claim-allday-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.claim-allday-row input { accent-color: var(--accent); }

.claim-error {
  background: rgba(192,57,43,0.1);
  border: 1px solid rgba(192,57,43,0.3);
  color: #C0392B;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 12px;
  display: none;
}
.claim-error.show { display: block; }


/* ════════════════════════════════════════
   LEAVE REQUESTS (admin "Verlofaanvragen" tab)
   ════════════════════════════════════════ */
.leave-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 500;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  margin-left: 6px;
  box-shadow: 0 0 0 2px var(--surface);
  animation: leaveBadgePulse 2s ease-in-out infinite;
}
@keyframes leaveBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.lv-count {
  display: inline-block;
  background: var(--surface2);
  color: var(--subtext);
  font-size: 10px;
  font-weight: 500;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  margin-left: 4px;
  text-align: center;
  line-height: 16px;
}
.stab-sub.active .lv-count {
  background: var(--accent);
  color: white;
}

.stab-sub {
  background: none;
  border: none;
  color: var(--subtext);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.stab-sub.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 500;
}
.stab-sub:hover { color: var(--text); }

.lv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lv-card.has-conflict {
  border-color: rgba(192,57,43,0.5);
  box-shadow: 0 0 0 1px rgba(192,57,43,0.2);
}
.lv-card.is-sick {
  border-color: rgba(192,57,43,0.4);
  background: rgba(192,57,43,0.04);
}

.lv-card-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.lv-card-body {
  flex: 1;
  min-width: 200px;
}
.lv-card-tech {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.lv-card-meta {
  font-size: 12px;
  color: var(--subtext);
  margin-top: 2px;
}
.lv-card-reason {
  font-size: 12px;
  color: var(--text);
  margin-top: 4px;
  font-style: italic;
}
.lv-card-conflict-tag {
  display: inline-block;
  background: rgba(192,57,43,0.15);
  color: #C0392B;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
}

.lv-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lv-card-actions .btn { padding: 6px 12px; font-size: 12px; }


/* ════════════════════════════════════════
   DASHBOARD WIDGET — pending leave count
   ════════════════════════════════════════ */
.dashboard-leave-widget {
  background: linear-gradient(135deg, rgba(240,180,41,0.12), rgba(232,67,26,0.06));
  border: 1px solid rgba(240,180,41,0.4);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.dashboard-leave-widget:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.dashboard-leave-widget.hidden { display: none; }
.dlw-icon { font-size: 30px; }
.dlw-text { flex: 1; }
.dlw-title { font-size: 14px; font-weight: 500; color: var(--text); }
.dlw-sub { font-size: 12px; color: var(--subtext); margin-top: 2px; }
.dlw-arrow { color: var(--subtext); font-size: 20px; }


/* ════════════════════════════════════════
   PRODUCTIVITY TABLE (admin Settings tab)
   ════════════════════════════════════════ */
.prod-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.prod-table th, .prod-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.prod-table tr:last-child td { border-bottom: none; }
.prod-table th {
  background: var(--surface2);
  color: var(--subtext);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.prod-table th.day-col, .prod-table td.day-col {
  text-align: center;
  width: 70px;
}
.prod-table th.today { color: var(--accent); }
.prod-table td.today { background: rgba(232,67,26,0.04); }
.prod-table tbody tr:hover { background: var(--surface2); cursor: pointer; }

.prod-tech-cell {
  font-weight: 500;
  color: var(--text);
}
.prod-tech-role {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

.prod-cell-tasks {
  font-weight: 500;
  color: var(--text);
}
.prod-cell-mins {
  font-size: 10px;
  color: var(--subtext);
  display: block;
  margin-top: 2px;
}
.prod-cell-empty { color: var(--subtext); font-size: 13px; }
.prod-cell-vacation { color: #4A9EFF; font-size: 16px; }
.prod-cell-sick { color: #C0392B; font-size: 16px; }
.prod-cell-unavail { color: var(--subtext); font-size: 13px; }

.prod-totals-row {
  background: var(--surface2);
  font-weight: 500;
}
.prod-totals-row td {
  border-top: 2px solid var(--border);
  color: var(--text);
}

/* Detail view (tech drill-down) */
.prod-detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.prod-detail-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.prod-detail-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
}
.prod-day-block {
  margin-bottom: 18px;
}
.prod-day-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
  text-transform: capitalize;
}
.prod-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 12px;
}
.prod-task-time {
  font-family: 'SF Mono', monospace;
  color: var(--accent);
  font-weight: 500;
  min-width: 50px;
}
.prod-task-name {
  font-weight: 500;
  color: var(--text);
}
.prod-task-vehicle {
  color: var(--subtext);
  flex: 1;
}
.prod-task-job {
  color: var(--subtext);
  font-size: 10px;
  font-family: 'SF Mono', monospace;
}
.prod-task-duration {
  color: var(--subtext);
  font-size: 11px;
}


/* ════════════════════════════════════════
   MY WORK (#mywork — tech-only view)
   ════════════════════════════════════════ */
#my-work {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 800;
  display: none;
  flex-direction: column;
}
#my-work.open { display: flex; }
body.mywork-mode { overflow: hidden; }
body.mywork-mode .header,
body.mywork-mode .nav,
body.mywork-mode .main { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   CHAT POPUP — centrale modal die zonder navigatie de chat opent
   voor één scan_intake. Vervangt de oude tech-portal-omleidings-
   route via openChatForIntake.
   ═══════════════════════════════════════════════════════════════ */
.chat-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center;
  z-index: 9500; padding: 16px;
}
.chat-popup-overlay.open { display: flex; }
.chat-popup-card {
  background: var(--surface); color: var(--text);
  border-radius: 14px;
  width: 100%; max-width: 520px;
  height: 80vh; max-height: 700px;       /* vaste hoogte = veel meer bericht-ruimte */
  display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  overflow: hidden;
  animation: chatPopupIn 0.18s ease-out;
}
@keyframes chatPopupIn {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.chat-popup-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.chat-popup-rego {
  font-family: monospace; font-size: 14px; font-weight: 500;
  background: #FFCC00; color: #000;
  padding: 3px 10px; border-radius: 5px; border: 2px solid #000;
  letter-spacing: 0.5px;
}
.chat-popup-title { flex: 1; min-width: 0; }
.chat-popup-title-main { font-size: 14px; font-weight: 500; color: var(--text); }
.chat-popup-title-sub  { font-size: 11px; color: var(--subtext); }
.chat-popup-close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; color: var(--subtext); padding: 4px 8px; line-height: 1;
}
.chat-popup-close:hover { color: var(--text); }
.chat-popup-list {
  flex: 1; overflow-y: auto;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 4px;   /* compacter dan 8px */
  background: var(--bg, #fafafa);
  min-height: 200px;
}
.chat-popup-empty {
  text-align: center; color: var(--subtext);
  padding: 30px 16px; font-size: 13px; font-style: italic;
}
/* Bubble: compact, padding krap, eigen-breedte (fit-content) zodat
   korte berichten een klein ballonnetje krijgen ipv volle 75%-breedte */
.chat-popup-bubble {
  max-width: 78%;
  width: fit-content;                          /* belangrijk: krimpt naar content */
  padding: 6px 11px;                            /* was 8px 12px */
  border-radius: 12px;
  font-size: 13px; line-height: 1.32;          /* was 1.4 */
  word-wrap: break-word; white-space: pre-wrap;
  user-select: text;
  cursor: default;
  position: relative;
}
/* Meer-regelige berichten: iets meer ademruimte aan bovenkant van laatste
   bubble in een groep; via "consecutive same-sender" stacking */
.chat-popup-bubble + .chat-popup-bubble.mine,
.chat-popup-bubble + .chat-popup-bubble.theirs { margin-top: 1px; }
.chat-popup-bubble.mine {
  align-self: flex-end;
  background: var(--accent, #E8431A);
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-popup-bubble.theirs {
  align-self: flex-start;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-popup-bubble.system {
  align-self: center; max-width: 90%;
  background: transparent;
  color: var(--subtext);
  font-size: 11px; font-style: italic;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 4px 10px;
}
.chat-popup-sender {
  font-size: 10px; font-weight: 500;
  color: var(--subtext); margin-bottom: 1px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
/* Time-stamp: rechts-onder, klein. Niet onder elk bericht — alleen onder
   het laatste bericht in een groep van dezelfde afzender. Standaard tonen,
   verbergen via :has() voor bubbles die gevolgd worden door dezelfde-side.
   Fallback voor browsers zonder :has() — gewoon altijd tonen, kleiner. */
.chat-popup-text { font-size: 13px; }
.chat-popup-time {
  font-size: 10px; opacity: 0.65;
  display: inline-block; margin-left: 8px;
  vertical-align: baseline;
}
.chat-popup-bubble.mine .chat-popup-time { color: rgba(255,255,255,0.85); }
.chat-popup-bubble.theirs .chat-popup-time { color: var(--subtext); }
.chat-popup-bubble.system .chat-popup-time { color: var(--subtext); }
/* Groeperen: verberg time als volgende bubbel dezelfde-side is */
.chat-popup-bubble.mine:has(+ .chat-popup-bubble.mine) .chat-popup-time,
.chat-popup-bubble.theirs:has(+ .chat-popup-bubble.theirs) .chat-popup-time {
  display: none;
}
.chat-popup-bubble.mine .chat-popup-time { color: rgba(255,255,255,0.85); }
.chat-popup-bubble.theirs .chat-popup-time { color: var(--subtext); }
.chat-popup-foot {
  display: flex; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-popup-input {
  flex: 1; padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2, #fafafa);
  color: var(--text);
  font-size: 14px; font-family: inherit;
  resize: none; min-height: 40px; max-height: 120px;
}
.chat-popup-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.chat-popup-send {
  background: var(--accent); color: white;
  border: 0; border-radius: 10px;
  padding: 0 16px; min-width: 56px;
  font-size: 16px; font-weight: 500; cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.chat-popup-send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-popup-send:not(:disabled):hover { transform: translateY(-1px); }
.chat-popup-send:not(:disabled):active { transform: scale(0.95); }
.chat-popup-ctx {
  position: fixed; z-index: 9999;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  min-width: 220px;
}
.chat-popup-ctx-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 4px;
  font-size: 13px; color: var(--text);
  font-family: inherit;
}
.chat-popup-ctx-item:hover { background: var(--surface2, #f5f5f5); }

/* ═══════════════════════════════════════════════════════════════
   JOB-VENSTER — uitgebreide modale view per scan_intake met tabs.
   Architectuur-keuze: Optie A = nieuwe overlay naast bestaande
   edit-modal. Edit-modal blijft voor snelle CRUD, dit venster voor
   het 'rijke' overzicht (planning / productie / foto's / calculatie).
   ═══════════════════════════════════════════════════════════════ */
.jv-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center;
  z-index: 9400; padding: 20px;
}
.jv-overlay.open { display: flex; }
.jv-card {
  background: var(--surface); color: var(--text);
  border-radius: 14px;
  width: 100%; max-width: 1200px;
  height: 90vh; max-height: 900px;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 50px rgba(0,0,0,0.4);
  overflow: hidden;
  animation: jvCardIn 0.2s ease-out;
}
@keyframes jvCardIn {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
/* HEAD — rego + voertuig + status pill + close */
.jv-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 5;   /* UX-sprint-2: top-5 datapunten altijd zichtbaar */
}

/* UX-sprint-2: Sticky info-strip onder de header met top-5 datapunten */
.jv-stickyinfo {
  position: sticky; top: 64px; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 8px 18px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.jv-stickyinfo .si-item {
  display: flex; align-items: center; gap: 4px;
  color: var(--subtext);
}
.jv-stickyinfo .si-item strong { color: var(--text); font-weight: 500; }
.jv-rego {
  font-family: monospace; font-size: 16px; font-weight: 500;
  background: #FFCC00; color: #000;
  padding: 5px 12px; border-radius: 6px; border: 2px solid #000;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.jv-rego:active { opacity: 0.6; }
.jv-head-info { flex: 1; min-width: 0; }
.jv-head-vehicle { font-size: 16px; font-weight: 500; }
.jv-head-meta {
  font-size: 12px; color: var(--subtext);
  margin-top: 2px;
}
.jv-status-pill {
  font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(39,174,96,0.15); color: #1f8a4c;
  border: 1px solid rgba(39,174,96,0.30);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.jv-status-pill.waiting   { background: rgba(255,179,0,0.15); color: #b78400; border-color: rgba(255,179,0,0.30); }
.jv-status-pill.done      { background: rgba(124,58,237,0.10); color: #5b21b6; border-color: rgba(124,58,237,0.25); }
.jv-status-pill.cancelled { background: rgba(229,57,53,0.10); color: #c62828; border-color: rgba(229,57,53,0.25); }
.jv-close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; color: var(--subtext); padding: 4px 8px; line-height: 1;
}
.jv-close:hover { color: var(--text); }
.jv-head-btn {
  background: var(--surface2, #f5f5f5);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.jv-head-btn:hover { border-color: var(--accent); background: var(--surface); transform: translateY(-1px); }
.jv-head-btn:active { transform: scale(0.96); }

/* WARNING-BANNER — toont openstaande wijzigingen die klant nog niet weet */
.jv-banner {
  display: none;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(232,67,26,0.12), rgba(232,67,26,0.03));
  border-bottom: 1px solid rgba(232,67,26,0.30);
  color: var(--text);
}
.jv-banner.open { display: flex; align-items: center; gap: 12px; }
.jv-banner-icon { font-size: 22px; line-height: 1; }
.jv-banner-text { flex: 1; font-size: 13px; line-height: 1.4; }
.jv-banner-text strong { color: var(--accent); }
.jv-banner-action {
  background: var(--accent); color: white;
  border: 0; border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: transform 0.1s;
}
.jv-banner-action:hover { transform: translateY(-1px); }
.jv-banner-action:active { transform: scale(0.96); }

/* Klantcomm-banner (Sessie B — Marc 13 jun) — geel pending / groen confirmed / rood declined */
.jv-comm-banner {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.jv-comm-banner.pending {
  background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(245,158,11,0.04));
  border-bottom-color: rgba(245,158,11,0.30);
}
.jv-comm-banner.confirmed {
  background: linear-gradient(135deg, rgba(22,163,74,0.14), rgba(22,163,74,0.04));
  border-bottom-color: rgba(22,163,74,0.30);
}
.jv-comm-banner.declined {
  background: linear-gradient(135deg, rgba(220,38,38,0.14), rgba(220,38,38,0.04));
  border-bottom-color: rgba(220,38,38,0.30);
}
.jv-comm-banner-icon  { font-size: 22px; line-height: 1; }
.jv-comm-banner-text  { flex: 1; font-size: 13px; line-height: 1.4; color: var(--text); }
.jv-comm-banner-text strong { font-weight: 500; }
.jv-comm-banner-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.jv-comm-confirm  { background: #16a34a !important; }
.jv-comm-decline  { background: #dc2626 !important; }
.jv-comm-resend   { background: var(--surface2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }

/* MAIN-SECTION (altijd zichtbaar) — auto + status + pipeline + contact */
.jv-main {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
}
.jv-main-info { min-width: 0; }
.jv-info-row {
  display: flex; gap: 8px;
  font-size: 13px;
  margin-bottom: 5px;
  align-items: baseline;
}
.jv-info-row strong { min-width: 110px; color: var(--subtext); font-weight: 500; }
.jv-info-row span { color: var(--text); }
.jv-jump-btn {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2, #f5f5f5);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.jv-jump-btn:hover { filter: brightness(0.95); }
.jv-pipeline {
  display: flex; gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ─── Interne dossier-notities (Costa 20 jul) ────────────────────
   Snelle, gedeelde notitie-thread onder de info-strip: één invoerveld
   plus een chronologische lijst (nieuwste bovenaan). Volle breedte over
   beide grid-kolommen, net als de tijdlijn. */
.jv-notes {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.jv-notes-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  font-family: inherit;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  min-height: 38px;
}
.jv-notes-input:focus {
  outline: none;
  border-color: var(--accent, #E8431A);
}
.jv-notes-hint {
  font-size: 11px;
  color: var(--subtext);
  margin-top: 4px;
}
.jv-notes-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.jv-note-item {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.jv-note-item .jv-note-body { flex: 1; min-width: 0; }
.jv-note-item .jv-note-meta { color: var(--subtext); }
/* Pin-knop: klein, onopvallend tot hover; gepind = accent-kleur. */
.jv-note-pin {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, transform 0.15s;
}
.jv-note-item:hover .jv-note-pin { opacity: 0.8; }
.jv-note-pin:hover { transform: scale(1.15); }
.jv-note-pin.active { opacity: 1; }
/* Gepinde ("belangrijke") notitie: opvallende accent-markering bovenaan. */
.jv-note-item.pinned {
  background: rgba(232,67,26,0.08);
  border: 1px solid rgba(232,67,26,0.35);
  border-radius: 8px;
  padding: 6px 9px;
}
.jv-note-item.pinned .jv-note-body { font-weight: 500; }
.jv-notes-empty { font-size: 12px; color: var(--subtext); font-style: italic; }
.jv-pipeline-step {
  font-size: 11px; font-weight: 500;
  padding: 4px 9px; border-radius: 6px;
  background: var(--surface2, #f5f5f5);
  color: var(--subtext);
  border: 1px solid var(--border);
}
.jv-pipeline-step.done {
  background: rgba(39,174,96,0.12); color: #1f8a4c;
  border-color: rgba(39,174,96,0.25);
}
.jv-pipeline-step.active {
  background: rgba(232,67,26,0.12); color: var(--accent);
  border-color: rgba(232,67,26,0.30);
}

/* ─── Tijdlijn-status (vervangt 6 blokjes) ───────────────────────
   Brede progress-bar met segmenten per pipeline-task. Vulling per
   segment = geklokte tijd vs verwachte tijd. Delta-pill toont of
   het werk voor of achter op schema ligt. */
.jv-timeline {
  grid-column: 1 / -1;        /* volle breedte over beide grid-kolommen */
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.jv-timeline-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
  font-size: 12px;
}
.jv-timeline-totals {
  color: var(--subtext);
  font-variant-numeric: tabular-nums;
}
.jv-timeline-totals strong {
  color: var(--text); font-weight: 500;
  font-size: 14px;
}
.jv-timeline-delta {
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
}
.jv-timeline-delta.ontrack { background: rgba(39,174,96,0.15); color: #1f8a4c; border: 1px solid rgba(39,174,96,0.30); }
.jv-timeline-delta.ahead   { background: rgba(39,174,96,0.20); color: #1a7a42; border: 1px solid rgba(39,174,96,0.45); }
.jv-timeline-delta.behind  { background: rgba(232,67,26,0.15); color: #c62828; border: 1px solid rgba(232,67,26,0.40); }
.jv-timeline-delta.waiting { background: var(--surface2, #f5f5f5); color: var(--subtext); border: 1px solid var(--border); }
.jv-timeline-bar {
  display: flex; gap: 2px;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface2, #f5f5f5);
  position: relative;
}
.jv-timeline-seg {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  cursor: default;
  transition: filter 0.15s;
}
.jv-timeline-seg:hover { filter: brightness(0.95); }
.jv-timeline-seg-fill {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(39,174,96,0.30), rgba(39,174,96,0.18));
}
.jv-timeline-seg.active .jv-timeline-seg-fill {
  background: linear-gradient(135deg, rgba(232,67,26,0.40), rgba(232,67,26,0.22));
  animation: jvSegPulse 1.6s ease-in-out infinite;
}
@keyframes jvSegPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.7; }
}
.jv-timeline-seg-label {
  position: relative; z-index: 1;
  font-size: 10px; font-weight: 500;
  color: var(--text);
  padding: 6px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.jv-timeline-seg.waiting .jv-timeline-seg-label { color: var(--subtext); }
.jv-timeline-status {
  margin-top: 10px;
  display: flex; align-items: center; gap: 14px;
  font-size: 12px;
  flex-wrap: wrap;
}
.jv-timeline-active {
  background: rgba(232,67,26,0.08);
  border: 1px solid rgba(232,67,26,0.25);
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 500;
  color: var(--text);
}
.jv-timeline-active.idle {
  background: var(--surface2, #f5f5f5);
  border-color: var(--border);
  color: var(--subtext);
  font-style: italic;
  font-weight: 500;
}
.jv-timeline-next {
  color: var(--subtext); font-size: 11px;
}
.jv-timeline-next strong { color: var(--text); font-weight: 500; }
/* Contact-knoppen — rechts */
.jv-main-contact {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 200px;
}
.jv-contact-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text);
  cursor: pointer; font-family: inherit;
  text-decoration: none;
  transition: transform 0.1s, border-color 0.15s;
}
.jv-contact-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.jv-contact-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jv-contact-btn.email { border-color: rgba(74,158,255,0.30); }
.jv-contact-btn.email:hover { background: rgba(74,158,255,0.05); }
.jv-contact-btn.whatsapp { border-color: rgba(37,211,102,0.30); }
.jv-contact-btn.whatsapp:hover { background: rgba(37,211,102,0.05); }
.jv-contact-btn .icon { font-size: 18px; }

/* TABS-strip — Marc 13 jul: sticky binnen .jv-scroll zodat de tab-balk in
   beeld blijft terwijl de rest (incl. bovenste info-sectie) meescrolt. */
.jv-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0 18px;
  gap: 4px;
  position: sticky; top: 0; z-index: 3;
}

/* SCROLL-CONTAINER — Marc 13 jul: één scroll-gebied onder de vaste header.
   Voorheen scrollde alleen .jv-tab-content (te weinig ruimte). Nu scrollt
   ook de info-sectie mee. min-height:0 nodig zodat flex-shrink werkt. */
.jv-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.jv-tab {
  background: transparent; border: 0;
  padding: 12px 18px;
  font-size: 14px; font-weight: 500;
  color: var(--subtext);
  cursor: pointer; font-family: inherit;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.jv-tab:hover { color: var(--text); }
.jv-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* TAB-CONTENT — inhoud per tab. Marc 13 jul: scrollt nu mee in .jv-scroll
   (eigen overflow verwijderd) zodat ook de bovenste info-sectie meescrolt. */
.jv-tab-content {
  padding: 18px;
  background: var(--bg, #fafafa);
}
.jv-tab-pane { display: none; }
.jv-tab-pane.active { display: block; }
.jv-placeholder {
  text-align: center; color: var(--subtext);
  padding: 60px 20px;
  font-size: 14px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.jv-placeholder-icon {
  font-size: 42px; margin-bottom: 12px;
}
.jv-placeholder-title {
  font-size: 16px; font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.jv-placeholder-sub {
  font-size: 13px; line-height: 1.5;
  max-width: 400px; margin: 0 auto;
}

/* ─── PRODUCTIE-TAB ─────────────────────────────────────────── */
.jv-prod-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.jv-prod-section-title {
  font-size: 11px; font-weight: 500;
  color: var(--subtext);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.jv-prod-task {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.jv-prod-task:last-child { border-bottom: 0; }
.jv-prod-task-icon { font-size: 18px; text-align: center; }
.jv-prod-task-name { font-weight: 500; color: var(--text); }
.jv-prod-task-meta { font-size: 11px; color: var(--subtext); font-variant-numeric: tabular-nums; }
.jv-prod-task-status {
  font-size: 11px; font-weight: 500;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface2, #f5f5f5);
  color: var(--subtext);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.jv-prod-task-status.done    { background: rgba(39,174,96,0.12);  color: #1f8a4c; border-color: rgba(39,174,96,0.30); }
.jv-prod-task-status.active  { background: rgba(232,67,26,0.12);  color: var(--accent); border-color: rgba(232,67,26,0.30); }
.jv-prod-task-photos {
  font-size: 11px; color: var(--subtext);
  background: var(--surface2, #f5f5f5);
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--border);
}
.jv-prod-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.jv-prod-part {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.jv-prod-part-label {
  font-size: 10px; font-weight: 500;
  color: var(--subtext);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.jv-prod-part-value {
  font-size: 13px; font-weight: 500; color: var(--text);
}
.jv-prod-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.jv-prod-action-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text);
  cursor: pointer; font-family: inherit;
  transition: transform 0.1s, border-color 0.15s;
}
.jv-prod-action-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.jv-prod-action-btn:active { transform: scale(0.96); }
.jv-prod-action-btn.success { border-color: rgba(39,174,96,0.45); color: #1f8a4c; }
.jv-prod-action-btn.success:hover { background: rgba(39,174,96,0.06); }
.jv-prod-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── FOTO'S & DOCUMENTEN TAB ───────────────────────────────── */
.jv-fotos-group { margin-bottom: 22px; }
.jv-fotos-group-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.jv-fotos-group-title {
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text);
}
.jv-fotos-group-count {
  font-size: 11px; color: var(--subtext);
  background: var(--surface);
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.jv-fotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.jv-fotos-empty {
  font-size: 12px; color: var(--subtext); font-style: italic;
  padding: 16px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
/* Costa 21 jul — foto's tussen categorieën slepen (drag & drop).
   Sleepbare tegels krijgen een grab-cursor; de doel-groep licht op zodra je
   er een foto boven sleept, en de tegel wordt half-transparant tijdens het
   slepen. */
.jv-fotos-tile[draggable="true"] { cursor: grab; }
.jv-fotos-tile.jv-dragging { opacity: 0.4; }
.jv-fotos-group.jv-drop-hover .jv-fotos-grid,
.jv-fotos-group.jv-drop-hover .jv-fotos-empty {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
  background: rgba(39,174,96,0.06);
}
/* Costa 29 jul — multi-drag ghost: klein label met het aantal foto's dat je
   versleept (buiten beeld geparkeerd; alleen als drag-image gebruikt). */
.jv-drag-ghost {
  position: fixed; top: -1000px; left: -1000px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--accent, #2563EB); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.jv-fotos-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jv-fotos-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.jv-fotos-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.jv-fotos-tile-cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
  color: white;
  padding: 18px 8px 6px;
  font-size: 10px;
  pointer-events: none;
}
.jv-fotos-tile-cap strong { font-weight: 500; }
/* Document-tegels tonen tekst (label + bestandsnaam + datum + footer) i.p.v.
   een beeld. De vierkante aspect-ratio + overflow:hidden van .jv-fotos-tile
   knipte bij lange bestandsnamen (die over 2 regels afbreken) de
   "Klik voor preview"-footer weg — alleen tegels met een korte naam pasten
   nog netjes. Doc-tegels mogen daarom met hun inhoud meegroeien. */
.jv-fotos-tile-doc {
  aspect-ratio: auto;
  min-height: 140px;
  overflow: hidden;
  background: var(--surface2);
}
.jv-fotos-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  z-index: 9700;
  padding: 20px;
}
.jv-fotos-lightbox.open { display: flex; }
/* Costa 29 jul — gallery-paneel met exact de footprint van de job-kaart
   (.jv-card): even groot als het jobvenster, zodat de preview niet meer als
   een klein beeldje in een zwart vlak hangt. */
.jv-gal-card {
  width: 100%; max-width: 1200px;
  height: 90vh; max-height: 900px;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 50px rgba(0,0,0,0.45);
}
.jv-gal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface2); font-size: 13px;
  flex: 0 0 auto;
}
.jv-gal-counter { font-variant-numeric: tabular-nums; color: var(--subtext); white-space: nowrap; }
.jv-gal-cap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-gal-selbox { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; white-space: nowrap; }
.jv-gal-selcount { font-size: 12px; color: var(--accent, #E8431A); white-space: nowrap; }
/* Stage = alle resterende ruimte. Het beeld schaalt alleen naar BENEDEN
   (max-*), nooit op boven zijn eigen resolutie → geen kwaliteitsverlies. */
.jv-gal-stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #111; padding: 8px;
}
.jv-fotos-lightbox img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.jv-gal-stage.is-selected { outline: 3px solid var(--accent, #E8431A); outline-offset: -3px; }
.jv-gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.5); color: #fff; border: 0;
  font-size: 34px; line-height: 1; padding: 10px 16px;
  border-radius: 10px; cursor: pointer; z-index: 2;
}
.jv-gal-nav:hover { background: rgba(0,0,0,0.75); }
.jv-gal-nav.prev { left: 10px; }
.jv-gal-nav.next { right: 10px; }
.jv-gal-strip {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 8px 10px; border-top: 1px solid var(--border);
  background: var(--surface2); flex: 0 0 auto;
}
.jv-gal-strip img {
  width: 62px; height: 62px; object-fit: cover;
  border-radius: 6px; cursor: pointer; flex: 0 0 auto;
  border: 2px solid transparent; opacity: 0.65;
}
.jv-gal-strip img.active { opacity: 1; border-color: var(--accent, #E8431A); }
.jv-gal-strip img.picked { opacity: 1; border-color: #16a34a; }
.jv-fotos-lightbox-close {
  background: rgba(127,127,127,0.16);
  color: var(--text);
  border: 0;
  font-size: 20px;
  padding: 2px 10px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1.3;
}
.jv-fotos-lightbox-close:hover { background: rgba(127,127,127,0.3); }
.jv-fotos-lightbox-dl {
  position: absolute; top: 22px; left: 24px;
  background: rgba(255,255,255,0.12);
  color: white; border: 0;
  font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 8px;
  cursor: pointer; line-height: 1;
}
.jv-fotos-lightbox-dl:hover { background: rgba(255,255,255,0.24); }

/* Costa 15 jul — foto-tegel: verwijder-knop, selectie-checkbox & selectie-modus */
.jv-tile-del {
  position: absolute; top: 4px; right: 4px; z-index: 3;
  border: 0; border-radius: 50%;
  width: 24px; height: 24px;
  background: rgba(0,0,0,0.55); color: #fff;
  cursor: pointer; font-size: 12px; line-height: 1;
}
.jv-tile-check {
  position: absolute; top: 4px; left: 4px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 2px solid var(--accent, #E8431A);
  color: transparent;
  display: none; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
}
/* In selectie-modus: checkboxes tonen, verwijder-knop verbergen. */
#jv-fotos-content.jv-select-mode .jv-selectable .jv-tile-check { display: flex; }
#jv-fotos-content.jv-select-mode .jv-selectable .jv-tile-del { display: none; }
.jv-fotos-tile.selected { outline: 3px solid var(--accent, #E8431A); outline-offset: -3px; }
.jv-fotos-tile.selected .jv-tile-check { display: flex; background: var(--accent, #E8431A); color: #fff; }
/* (Costa 22 jul) Finder-achtig selecteren: Cmd/Ctrl-klik, Shift-bereik en een
   sleep-rechthoek. Tekstselectie tijdens slepen/shift-klik uitzetten en het
   selectiekader stijlen. */
#jv-fotos-content { user-select: none; -webkit-user-select: none; }
.jv-rubberband {
  position: fixed;
  border: 1px solid var(--accent, #2563EB);
  background: rgba(37,99,235,0.12);
  z-index: 50; pointer-events: none;
}
/* Costa 20 jul — standaardfoto: ster-knop linksonder + accent-rand op de
   huidige standaardfoto. De standaardfoto verschijnt als thumbnail in de
   globale zoekbalk. */
.jv-tile-default {
  position: absolute; bottom: 4px; left: 4px; z-index: 3;
  border: 0; border-radius: 50%;
  width: 24px; height: 24px;
  background: rgba(0,0,0,0.55); color: #fff;
  cursor: pointer; font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity .12s ease;
}
.jv-fotos-tile:hover .jv-tile-default { opacity: 1; }
.jv-tile-default.is-default { opacity: 1; background: var(--accent, #E8431A); }
.jv-fotos-tile.jv-tile-is-default { outline: 3px solid var(--accent, #E8431A); outline-offset: -3px; }
/* In selectie-modus de ster-knop verbergen (net als de verwijder-knop). */
#jv-fotos-content.jv-select-mode .jv-selectable .jv-tile-default { display: none; }

/* Zoek-gallery modal (klik op de zoekresultaat-thumbnail) */
.jv-search-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.jv-search-gallery-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.jv-search-gallery-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Removed-sectie: checkboxes alleen tonen in selectie-modus. */
.jv-removed-check { display: none; }
.jv-removed-list.jv-select-mode .jv-removed-check { display: inline-block; }

/* ─── PLANNING-TAB ──────────────────────────────────────────── */
.jv-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.jv-plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.jv-plan-card-label {
  font-size: 10px; font-weight: 500;
  color: var(--subtext);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
/* 'edited'-chip op een intake-afspraak die de klant via Jotform heeft
   gewijzigd. De title-attribuut toont bij hover de oorspronkelijke datum/tijd. */
.jv-plan-card-chip {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  cursor: help;
}
.jv-plan-card-value {
  font-size: 15px; font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.jv-plan-card-sub {
  font-size: 11px;
  color: var(--subtext);
  margin-top: 4px;
}
.jv-plan-card.empty .jv-plan-card-value {
  color: var(--subtext);
  font-style: italic;
  font-weight: 500;
}
.jv-plan-actions {
  display: flex; gap: 10px; margin-top: 6px;
  flex-wrap: wrap;
}
.jv-plan-history {
  font-size: 12px; color: var(--subtext);
  background: var(--surface2, #f5f5f5);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  margin-top: 12px;
}
.jv-plan-history-row {
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.jv-plan-history-row strong { color: var(--text); }

/* ─── CALCULATIE-TAB ────────────────────────────────────────── */
.jv-calc-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.jv-calc-hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
}
.jv-calc-hero-card.accent {
  background: linear-gradient(135deg, rgba(232,67,26,0.08), rgba(232,67,26,0.02));
  border-color: rgba(232,67,26,0.30);
}
.jv-calc-hero-label {
  font-size: 10px; font-weight: 500;
  color: var(--subtext);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.jv-calc-hero-value {
  font-size: 28px; font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
}
.jv-calc-hero-card.accent .jv-calc-hero-value { color: var(--accent); }
.jv-calc-hero-unit {
  font-size: 13px; color: var(--subtext); font-weight: 500;
  margin-left: 4px;
}
.jv-calc-breakdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.jv-calc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.jv-calc-row:last-child { border-bottom: 0; }
.jv-calc-row.total {
  font-weight: 500;
  border-top: 2px solid var(--text);
  margin-top: 6px;
  padding-top: 12px;
}
.jv-calc-row-label {
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.jv-calc-row-icon { font-size: 16px; }
.jv-calc-row-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.jv-calc-row.subtotal .jv-calc-row-value { color: var(--subtext); font-style: italic; }
.jv-calc-note {
  font-size: 11px; color: var(--subtext);
  background: var(--surface2, #f5f5f5);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 12px;
  line-height: 1.5;
}

/* ─── KLANT-BERICHT MODAL (Email/WhatsApp gedeeld) ──────────── */
.jv-msg-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center;
  z-index: 9550;
  padding: 18px;
}
.jv-msg-overlay.open { display: flex; }
.jv-msg-card {
  background: var(--surface);
  border-radius: 14px;
  width: 100%; max-width: 540px;
  padding: 18px 20px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.35);
  animation: chatPopupIn 0.18s ease-out;
}
.jv-msg-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.jv-msg-channel-icon {
  font-size: 28px; line-height: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2, #f5f5f5);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.jv-msg-title { flex: 1; min-width: 0; }
.jv-msg-title-main { font-size: 15px; font-weight: 500; color: var(--text); }
.jv-msg-title-sub  { font-size: 11px; color: var(--subtext); margin-top: 2px; }
.jv-msg-close {
  background: transparent; border: 0; font-size: 22px;
  color: var(--subtext); cursor: pointer; padding: 4px 8px;
}
.jv-msg-close:hover { color: var(--text); }
.jv-msg-templates {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.jv-msg-tpl-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 500;
  color: var(--text);
  cursor: pointer; font-family: inherit;
  transition: transform 0.1s, border-color 0.15s;
}
.jv-msg-tpl-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.jv-msg-tpl-btn:active { transform: scale(0.96); }
.jv-msg-tpl-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.jv-msg-textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2, #fafafa);
  color: var(--text);
  font-size: 14px; font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 140px;
  max-height: 320px;
}
.jv-msg-textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.jv-msg-foot {
  display: flex; gap: 10px; margin-top: 14px;
  justify-content: flex-end;
}
.jv-msg-cancel, .jv-msg-send {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  border: 0;
}
.jv-msg-cancel { background: var(--surface2, #f5f5f5); color: var(--text); }
.jv-msg-send   { background: var(--accent); color: white; }
.jv-msg-send.whatsapp { background: #25D366; }
.jv-msg-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Costa 28 jul: recent-job-chips staan inline naast de zoekbalk. Op smalle
   schermen blijft er dan te weinig ruimte over om te typen → chips verbergen. */
@media (max-width: 700px) {
  #recent-jobs-chips { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
   ONDERDELEN-TAB (parts) — tabel-uitlijning + fase-secties
   ══════════════════════════════════════════════════════════════════
   Costa 29 jul: "Lijn de inhoud van deze regels verticaal uit, zodat het
   overzichtelijker is, als een tabel." De cellen hadden per stuk inline
   padding en de invoervelden vaste pixelbreedtes (100px/110px/52px), dus elke
   kolom begon per rij op een andere plek. Oplossing: één vaste kolom-layout
   (table-layout: fixed + <colgroup>), één cel-klasse met vaste padding en
   vertical-align, en velden die 100% van hun kolom vullen. */
.parts-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  min-width: 1080px;
}
.parts-table .parts-cell {
  padding: 6px 8px;
  vertical-align: middle;
  text-align: left;
}
.parts-table .parts-center { text-align: center; }
.parts-table .parts-nowrap { white-space: nowrap; }
.parts-table th.parts-cell {
  white-space: nowrap;
  font-weight: 600;
  padding-top: 8px; padding-bottom: 8px;
}
.parts-table .parts-sortable { cursor: pointer; user-select: none; }
.parts-head-row {
  background: var(--surface2);
  position: sticky; top: 0; z-index: 2;
}
.parts-row { border-top: 1px solid var(--border); }
/* Velden vullen hun kolom → alle waarden beginnen op dezelfde linkerrand. */
.parts-table .parts-field { width: 100%; box-sizing: border-box; }
.parts-sub {
  font-size: 11px; color: var(--subtext);
  line-height: 1.3;
}
.parts-overdue-sub { color: #DC2626; font-weight: 600; font-size: 10px; }
/* Kenteken in de werklijst = kopieerknop (Costa 29 jul: "klik op het kenteken
   en het staat op mijn klembord", net als het badge in de job-kaart). Het
   openen van de job verhuisde naar het losse ↗-linkje ernaast. De stippellijn
   maakt zichtbaar dat er iets gebeurt bij een klik. */
.parts-plate {
  font-weight: 600; color: var(--accent);
  text-decoration: none; cursor: copy;
  border-bottom: 1px dotted currentColor;
}
.parts-plate:hover { border-bottom-style: solid; }
.parts-plate-open {
  margin-left: 6px; font-size: 11px;
  color: var(--subtext); text-decoration: none; cursor: pointer;
}
.parts-plate-open:hover { color: var(--accent); }
.parts-overdue { margin-left: 10px; color: #DC2626; font-weight: 600; }
.parts-type-chip { font-size: 12px; }
.parts-rd-chip {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  color: #fff; white-space: nowrap;
}
.parts-iconbtn {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 3px 7px; border-radius: 6px;
}

/* Deep-link vanuit de menubadge/melding: de gezochte regel licht kort op zodat
   je hem tussen tientallen andere direct ziet (Costa 29 jul). */
.parts-row-flash { animation: parts-flash 1.3s ease-in-out 2; }
@keyframes parts-flash {
  0%, 100% { background: transparent; box-shadow: none; }
  50%      { background: rgba(245, 158, 11, 0.32); box-shadow: inset 0 0 0 2px #F59E0B; }
}

/* Groepskop (job of bestelnummer) */
.parts-group-row { background: var(--surface2); cursor: pointer; }
.parts-group-row > .parts-cell { border-top: 2px solid var(--border); }

/* Sectiekop = fase van de job (in productie / ingepland / was in productie).
   Niets staat standaard ingeklapt; lege secties worden helemaal niet getekend
   (zie OfficeLogic.sectionPartsGroups). */
.parts-section-row {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface2));
  cursor: pointer;
}
.parts-section-row > .parts-cell {
  border-top: 3px solid var(--border);
  padding-top: 9px; padding-bottom: 9px;
}
.parts-section-title { font-weight: 700; font-size: 13px; }
.parts-section-meta { margin-left: 12px; color: var(--subtext); font-size: 11px; }

/* Drop-zone voor de leveranciers-export (Costa 29 jul: "gewoon het bestand in
   de onderdelen-tab kunnen droppen"). Duidelijke hover/drag-staat, want een
   dropzone die er niet op reageert voelt kapot. */
#parts-dropzone { transition: border-color .15s, background .15s, color .15s; }
#parts-dropzone:hover { border-color: var(--accent); color: var(--text); }
#parts-dropzone.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

/* Reserve-regel (besteld overschot): visueel apart van het jobwerk. */
.parts-reserve-chip {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px;
  background: #2D6CDF; color: #fff; white-space: nowrap;
}
.parts-row.parts-reserve { background: rgba(45, 108, 223, 0.07); }

/* Dubbel ingevoerde positie (Costa 3 aug: "ik zie hier nog steeds dubbelen").
   Dezelfde zone + zijde + onderdeelnaam op één job → waarschuwing, zodat de
   regel te vinden is zonder de hele lijst na te lopen. */
.parts-dupe-chip {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(245, 158, 11, 0.22); color: #B45309;
  white-space: nowrap; cursor: help;
}

/* Verwijderen is onomkeerbaar → de knop laat dat zien, maar alleen bij hover
   (anders schreeuwt elke rij om aandacht). Staat er alleen voor wie het recht
   parts:delete heeft. */
.parts-delbtn:hover {
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.12);
}

/* Meerwerk-regel (tijdens de productie bijgezet). Marc 29 jul: zolang het niet
   besteld is, is het ROOD (moet vandaag de deur uit); daarna amber — de
   bestel-urgentie is weg, maar voor de eindcalculatie moet het onderdeel
   terug te vinden blijven. */
.parts-extra-tag {
  font-size: 10px; font-weight: 600;
  color: #B45309;
}
.parts-extra-tag.urgent { color: #B91C1C; }

/* Verschoven leverdatum (Costa 29 jul: "een nieuwe export kan nieuwe ETA's
   geven"). De chip staat direct onder de datum zodat de planning de verschuiving
   ziet zonder de lade te openen: later = amber (risico), eerder = groen. Na een
   week verdwijnt hij, anders staat de lijst permanent vol delta's. */
.parts-eta-shift {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 0 5px; border-radius: 999px;
  white-space: nowrap; cursor: help;
}
.parts-eta-shift.later   { background: rgba(245, 158, 11, 0.22); color: #B45309; }
.parts-eta-shift.earlier { background: rgba(16, 185, 129, 0.22); color: #047857; }