* { 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
   ════════════════════════════════════════════════════════════ */
/* Marc 31 jul: het bord scrolt vanaf nu in zijn EIGEN kader (verticaal én
   horizontaal). Dat is de voorwaarde voor een plakkende dagkop: `position:
   sticky` heeft een echte scroll-container nodig. Bijkomend voordeel: de
   dag-navigatie, view-knoppen en filterbalk blijven altijd in beeld.
   `--sl-wrap-max-h` wordt in JS gezet (afhankelijk van schermhoogte). */
.swimlane-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
  max-height: var(--sl-wrap-max-h, calc(100vh - 260px));
  overscroll-behavior: contain;
}
.swimlane-grid {
  display: grid;
  min-width: 100%;
  /* 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. Dit blok is een gewoon block-kind van de
   scroll-container en plakt daardoor over het hele bord. */
.swimlane-head {
  display: grid;
  min-width: 100%;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface2);
  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;
}
/* 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; }
/* 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) — 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;
}

/* 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; }
}

/* 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;
}

/* Protocol-inbox (Marc 9 jul) — drop-zone voor Dellenprotokoll bulk-upload */
.pi-dropzone {
  border: 2px dashed rgba(139,92,246,0.35);
  border-radius: 14px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  background: rgba(139,92,246,0.03);
  transition: background .15s, border-color .15s, transform .05s;
}
.pi-dropzone:hover, .pi-dropzone.active {
  background: rgba(139,92,246,0.08);
  border-color: #8B5CF6;
}
.pi-dropzone.active { transform: scale(1.005); }
.pi-drop-icon  { font-size: 42px; margin-bottom: 10px; }
.pi-drop-title { font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.pi-drop-sub   { font-size: 12px; color: var(--subtext); }
.pi-result-row {
  display: grid; grid-template-columns: 22px 1fr auto;
  gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
  font-size: 13px;
}
.pi-result-row.pi-ok      { border-left: 3px solid #22C55E; }
.pi-result-row.pi-err     { border-left: 3px solid #DC2626; }
.pi-result-row.pi-nomatch { border-left: 3px solid #F59E0B; }
.pi-result-row.pi-pending { border-left: 3px solid #94A3B8; opacity: .8; }
/* Intake-inbox (Costa 30 jul) — hergebruikt bovenstaande rijen; 'info' is de
   neutrale melding (dubbel bestand, dossier had al een intakeblad). */
.pi-result-row.pi-info    { border-left: 3px solid #0EA5E9; }
.pi-result-row.pi-done    { border-left: 3px solid #94A3B8; opacity: .6; }

/* ─── 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); }

/* 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; }