@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@600;700;800&display=swap');

:root{
  --or: #ff6b00;
  --or-dim: rgba(255,107,0,.12);
  --or-glow: rgba(255,107,0,.32);
  --bg:  #04080f;
  --bg2: #07101e;
  --bg3: #0b1629;
  --card: #0c1828;
  --bd:  rgba(255,255,255,.08);
  --bds: rgba(255,255,255,.15);
  --txt: #e8eaf0;
  --muted: #8a94a6;
  --h: #ffffff;
  --r: 12px;
  --shadow: 0 18px 60px rgba(0,0,0,.50);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Barlow', ui-sans-serif, system-ui, sans-serif;
  font-size:21px; line-height:1.65;
  color:var(--txt);
  background:
    radial-gradient(900px 600px at 18% 10%, rgba(255,107,0,.10), transparent 55%),
    var(--bg);
  overflow-x:hidden;
}

/* ── SHELL ── */
.shell{height:100%; display:flex; flex-direction:column}

/* ── TOPBAR ── */
.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 24px; gap:16px;
  border-bottom:1px solid var(--bd);
  background:rgba(4,8,15,.93);
  backdrop-filter:blur(14px);
}
.brand{display:flex; gap:12px; align-items:center; min-width:0}
.brandLogo{width:44px;height:44px;border-radius:10px;border:1px solid var(--bd);object-fit:cover}
.brandText{min-width:0}
.brandTitle{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  font-size:20px; color:var(--h); white-space:nowrap;
}
.brandSub{color:var(--muted); font-size:17px; margin-top:1px}

.actions{display:flex; align-items:center; gap:10px; min-width:0}
.searchWrap{position:relative; width:min(640px,60vw)}
.searchWrap input{
  width:100%; padding:11px 14px;
  border-radius:var(--r); border:1px solid var(--bd);
  background:rgba(0,0,0,.22);
  color:var(--txt); font-family:'Barlow',sans-serif; font-size:19px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.searchWrap input:focus{
  border-color:rgba(255,107,0,.50);
  box-shadow:0 0 0 3px rgba(255,107,0,.14);
}
.ghost{
  padding:9px 14px; border-radius:var(--r);
  border:1px solid var(--bds);
  color:var(--muted); text-decoration:none; font-size:18px; font-weight:500;
  background:rgba(255,255,255,.04);
  transition:color .15s, border-color .15s;
}
.ghost:hover{color:var(--h); border-color:var(--or)}

/* ── SEARCH DROPDOWN ── */
.drop{
  position:absolute; top:46px; left:0; right:0;
  border:1px solid var(--bd);
  border-radius:14px;
  background:rgba(4,8,15,.92);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  max-height:360px; overflow:auto;
}
.dropItem{padding:12px 14px; border-bottom:1px solid var(--bd); cursor:pointer; transition:background .15s}
.dropItem:last-child{border-bottom:none}
.dropItem:hover{background:rgba(255,107,0,.08)}
.dropItem .t{font-weight:700; font-size:19px}
.dropItem .s{color:var(--muted); font-size:17px; margin-top:2px}
.hidden{display:none !important}

/* ── Agenda header-toolbar (zoekbalk + navigatie) ── */
#viewPlanner .hRight{ gap:8px; flex-wrap:wrap; align-items:center; }
#viewPlanner .hRight .chip{
  height:40px; box-sizing:border-box; margin:0; padding:0 14px;
  font-size:15px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted);
}
#viewPlanner .hRight .chip:hover{ color:var(--h); border-color:var(--or); }
#viewPlanner .hRight #btnPrevWeek,
#viewPlanner .hRight #btnNextWeek{ padding:0 13px; font-size:17px; }
#agendaDtsSearch, #weekJump{
  height:40px; box-sizing:border-box; margin:0;
  font-size:15px; border-radius:10px;
}
#agendaDtsSearch{
  width:220px; padding:0 14px;
  border:1px solid var(--bd); background:rgba(255,255,255,.04);
  color:var(--h); transition:border-color .15s, box-shadow .15s;
}
#agendaDtsSearch::placeholder{ color:var(--muted); }
#agendaDtsSearch:focus{ border-color:var(--or); box-shadow:0 0 0 3px rgba(255,107,0,.14); }
#weekJump{ width:auto; min-width:148px; padding:0 12px; }
.slot.slotHighlight{ outline:2px solid var(--or); box-shadow:0 0 0 4px rgba(255,107,0,.35); }

/* ── MAIN / TABS ── */
.main{padding:16px 24px; width:100%; flex:1; min-height:0}
.tabs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:16px;
}
.tab{
  padding:9px 16px; border-radius:var(--r);
  border:1px solid var(--bd);
  background:transparent;
  color:var(--muted); font-family:'Barlow',sans-serif; font-size:18px; font-weight:500;
  cursor:pointer; transition:color .15s, border-color .15s;
}
.tab:hover{color:var(--h); border-color:var(--bds)}
.tab.active{
  border-color:rgba(255,107,0,.50);
  color:var(--or);
  box-shadow:0 0 0 3px rgba(255,107,0,.10);
}
.spacer{flex:1 1 auto}
.btn{
  padding:9px 16px; border-radius:var(--r);
  border:1px solid rgba(255,107,0,.55);
  background:var(--or);
  color:#fff; font-family:'Barlow',sans-serif; font-size:18px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; transition:transform .15s, box-shadow .15s;
  box-shadow:0 4px 16px var(--or-glow);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,107,0,.45)}

/* ── PANEL ── */
.panel{
  border:1px solid var(--bd);
  background:var(--bg2);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
  overflow:hidden;
}
.panelHead{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px}
.kicker{
  font-size:16px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--or); margin-bottom:6px; display:block;
}
.title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:30px; font-weight:800; color:var(--h); letter-spacing:.02em;
}
.titleRow{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.muted{color:var(--muted); font-size:17px}
.chip{
  padding:8px 14px; border-radius:var(--r);
  border:1px solid var(--bd);
  background:transparent;
  color:var(--muted); font-size:17px; font-weight:500; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.chip:hover{color:var(--h); border-color:var(--or)}

/* ── WEEK GRID ── */
.weekGrid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
}
.dayCol{
  border:1px solid var(--bd);
  border-radius:14px;
  background:var(--card);
  min-height:440px;
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:border-color .2s;
}
.dayCol:hover{border-color:var(--bds)}
.dayHead{
  padding:10px 12px;
  border-bottom:1px solid var(--bd);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.dayName{font-weight:700; font-size:18px; color:var(--h)}
.dayDate{color:var(--muted); font-size:16px}
.dayBody{padding:10px; display:flex; flex-direction:column; gap:8px; flex:1}
.slot{
  border:1px solid var(--bd);
  background:var(--bg3);
  border-radius:10px;
  padding:10px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.slot:hover{border-color:rgba(255,107,0,.40); background:rgba(255,107,0,.06)}
.slotTop{display:flex; align-items:center; justify-content:space-between; gap:10px}
.badge{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--or);
  padding:4px 8px; border-radius:8px; font-size:16px;
}
.slotMeta{color:var(--muted); font-size:17px; margin-top:6px; line-height:1.4}

/* ── DRAG & DROP ── */
.dayCol.drag-over{
  border-color:var(--or) !important;
  background:rgba(255,107,0,.06) !important;
}
.slot.dragging{opacity:.4}

/* ── PROJECT LIST ── */
.list{display:flex; flex-direction:column; gap:8px; padding-top:6px}
.row{
  border:1px solid var(--bd);
  background:var(--card);
  border-radius:14px;
  padding:14px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.row:hover{border-color:var(--bds); background:var(--bg3)}
.row .r1{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.row .rTitle{font-weight:700; color:var(--h)}
.row .rSub{color:var(--muted); font-size:17px; margin-top:4px}

/* ── GRID / CARDS ── */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.card{
  border:1px solid var(--bd);
  background:var(--card);
  border-radius:16px;
  padding:16px;
}
.cardTitle{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  font-size:16px; color:var(--or); margin-bottom:12px; display:block;
}
.metricRow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.metric{
  border:1px solid var(--bd);
  border-radius:12px; padding:14px;
  background:var(--bg3);
}
.mLabel{color:var(--muted); font-size:17px}
.mValue{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(15px, 1.6vw, 26px);
  font-weight:800; color:var(--h); margin-top:4px;
  white-space:nowrap;
  letter-spacing:-0.02em;
}
.mt{margin-top:14px}

/* ── TABLE ── */
.table{overflow:auto; border:1px solid var(--bd); border-radius:14px}
.table table{width:100%; border-collapse:collapse; min-width:720px}
.table th,.table td{
  padding:11px 12px;
  border-bottom:1px solid var(--bd);
  font-size:18px; text-align:left;
}
.table th{
  color:var(--or); font-weight:700;
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.10em; text-transform:uppercase; font-size:16px;
  background:var(--bg2);
}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:rgba(255,255,255,.03)}

/* ── MODAL ── */
.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.65);
  padding:16px; z-index:200;
}
.modalCard{
  width:min(920px,100%);
  max-height:min(92vh,860px);
  overflow:hidden;
  border:1px solid var(--bds);
  background:rgba(4,8,15,.95);
  backdrop-filter:blur(18px);
  border-radius:18px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.modalHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--bd);
}
.modalHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--bd);
}
.modalTitle{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:21px; color:var(--h);
}
.x{
  border:1px solid var(--bd);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  border-radius:var(--r);
  padding:7px 10px;
  cursor:pointer;
  transition:color .15s, border-color .15s;
}
.x:hover{color:var(--h); border-color:var(--bds)}
.modalBody{padding:16px; overflow:auto; flex:1}
.modalFoot{
  padding:14px 18px;
  border-top:1px solid var(--bd);
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
}
.modalActions{
  padding:14px 18px;
  border-top:1px solid var(--bd);
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
}

/* ── FORM ── */
.formGrid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.f label{
  display:block; color:var(--muted);
  font-size:16px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 6px;
}
.f input,.f textarea,.f select{
  width:100%; padding:11px 14px;
  border-radius:var(--r);
  border:1px solid var(--bd);
  background:var(--bg3);
  color:var(--txt);
  font-family:'Barlow',sans-serif; font-size:19px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.f textarea{min-height:92px; resize:vertical}
.f input:focus,.f textarea:focus,.f select:focus{
  border-color:rgba(255,107,0,.55);
  box-shadow:0 0 0 3px rgba(255,107,0,.14);
}

/* ── LABELS (outside .f) ── */
label{
  display:block; color:var(--muted);
  font-size:16px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 6px;
}
input:not([type=checkbox]):not([type=radio]),
textarea, select{
  width:100%; padding:11px 14px;
  border-radius:var(--r);
  border:1px solid var(--bd);
  background:var(--bg3);
  color:var(--txt);
  font-family:'Barlow',sans-serif; font-size:19px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  margin-bottom:12px;
}
input:focus,textarea:focus,select:focus{
  border-color:rgba(255,107,0,.55);
  box-shadow:0 0 0 3px rgba(255,107,0,.14);
}

/* ── BUTTONS ── */
.primary{
  padding:10px 20px; border-radius:var(--r);
  border:none;
  background:var(--or);
  color:#fff; font-family:'Barlow',sans-serif; font-size:18px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 4px 16px var(--or-glow);
  transition:transform .15s, box-shadow .15s;
}
.primary:hover{transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,107,0,.45)}
.secondary{
  padding:10px 20px; border-radius:var(--r);
  border:1px solid var(--bds);
  background:transparent;
  color:var(--txt); font-family:'Barlow',sans-serif; font-size:18px; font-weight:600;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.secondary:hover{border-color:var(--or); color:var(--or)}
.danger{background:#c0392b;color:#fff;border:none;padding:.55rem 1.2rem;border-radius:8px;font-weight:600;cursor:pointer;transition:background .2s}
.danger:hover{background:#a93226}
.link{color:var(--or); text-decoration:none; font-size:16px}
.link:hover{text-decoration:underline}
.whatsapp{
  padding:10px 20px; border-radius:var(--r);
  border:1px solid rgba(37,211,102,.50);
  background:rgba(37,211,102,.15);
  color:#25d366; font-weight:700; font-size:18px;
  cursor:pointer;
  transition:background .15s;
}
.whatsapp:hover{background:rgba(37,211,102,.25)}

/* ── DONUT CHART ── */
.dot{display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; vertical-align:middle}
.dot.o{background:var(--or)}
.dot.g{background:var(--bds)}
.donutWrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.donutLegend{color:var(--muted); font-size:16px; line-height:1.8}

/* ── TODAY HIGHLIGHT ── */
.dayCol.is-today{
  border:2px solid var(--or) !important;
  background:rgba(255,107,0,.04) !important;
}

/* ── RESPONSIVE ── */

/* Tablet landscape */
@media(max-width:1100px){
  .grid2{grid-template-columns:1fr}
  .searchWrap{width:min(480px,55vw)}
  .metricRow{grid-template-columns:repeat(2,1fr)}
}

/* Tablet portrait */
@media(max-width:860px){
  /* Topbar */
  .topbar{flex-wrap:wrap; padding:10px 14px; gap:8px}
  .actions{width:100%; order:3}
  .searchWrap{width:100%}

  /* Tabs: horizontal scroll, no wrap */
  .tabs{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
        gap:6px; padding-bottom:4px; margin-bottom:12px; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap; padding:9px 14px; font-size:15px; flex-shrink:0}

  /* Week grid: horizontal scroll with fixed card width */
  .weekGrid{
    display:flex; overflow-x:auto; gap:10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px; scrollbar-width:none;
  }
  .weekGrid::-webkit-scrollbar{display:none}
  .dayCol{
    min-width:220px; flex:0 0 220px;
    scroll-snap-align:start; min-height:300px;
  }

  /* Panels */
  .panel{padding:12px}
  .panelHead{margin-bottom:10px}

  /* Cards & grids */
  .metricRow{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .formGrid{grid-template-columns:1fr}
  .finGrid{grid-template-columns:1fr}
  .finSplit{grid-template-columns:1fr}

  /* Modal: full screen */
  .modal{padding:0; align-items:flex-end}
  .modalCard{
    width:100%; max-width:100%;
    max-height:95vh; border-radius:18px 18px 0 0;
    border-left:none; border-right:none; border-bottom:none;
  }
}

/* Mobile */
@media(max-width:540px){
  /* Topbar */
  .topbar{padding:8px 12px}
  .brandSub{display:none}
  .brandLogo{width:36px; height:36px}

  /* Main */
  .main{padding:8px 10px}

  /* Tabs */
  .tab{padding:8px 12px; font-size:14px}

  /* Week grid: one day visible at a time, wider cards */
  .dayCol{min-width:85vw; flex:0 0 85vw}

  /* Metrics */
  .metricRow{grid-template-columns:1fr}

  /* Table: horizontal scroll */
  .table{border-radius:10px}

  /* Buttons in file cards: wrap */
  .fileCardActions{flex-wrap:wrap; gap:.3rem}

  /* Ongoing cards */
  .ongoingCard{max-width:100%; flex:1 1 100%}

  /* Modal closer to full screen */
  .modalCard{max-height:100vh; border-radius:14px 14px 0 0}
  .modalBody{padding:12px}
  .modalFoot, .modalActions{padding:10px 12px; gap:8px}
  .modalFoot button, .modalActions button{flex:1; text-align:center; min-height:44px}

  /* Touch-friendly buttons */
  .chip{min-height:40px; display:inline-flex; align-items:center}
  .primary, .secondary{min-height:44px}
  .danger{min-height:44px; padding:.6rem 1rem}

  /* waBtn larger tap target */
  .waBtn{padding:.4rem .7rem; font-size:.85rem}

  /* Row list items */
  .row{padding:12px}
}

.row-missing td { opacity: 0.55; }

/* ── Data tables (monteurs / klanten tab) ── */
.dtableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtable{width:100%;border-collapse:collapse;font-size:1.05rem;min-width:560px}
.dtable th{text-align:left;padding:.5rem .75rem;border-bottom:2px solid var(--brd);color:var(--muted);font-weight:600;font-size:.93rem;text-transform:uppercase;letter-spacing:.04em}
.dtable td{padding:.55rem .75rem;border-bottom:1px solid var(--brd)}
.crow{cursor:pointer;transition:background .15s}
.crow:hover td{background:rgba(255,107,0,.07)}
/* ── Detail modal sections ── */
.detailSection{margin-bottom:1.5rem}
.sectionTitle{font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:1px solid var(--brd)}
/* ── File list ── */
.fileRow{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid var(--brd);font-size:1.05rem}
.fileRow a{color:var(--or);text-decoration:none;flex:1}
.fileRow a:hover{text-decoration:underline}
.uploadLabel{display:inline-block;margin-top:.75rem}

/* ── Document slots (ID / VCA / VOG) ── */
.fileSlots{display:flex;flex-direction:column;gap:.6rem}
.fileSlot{border:1px solid var(--brd);border-radius:8px;padding:.65rem .9rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.fileSlotLabel{font-weight:600;font-size:.97rem;min-width:9rem;color:var(--fg)}
.fileSlotContent{display:flex;align-items:center;gap:.5rem;flex:1;flex-wrap:wrap}
.fileLink{color:var(--or);text-decoration:none;font-size:1.05rem}
.fileLink:hover{text-decoration:underline}

/* ── Finance period selector ── */
.periodRow{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.25rem}
.periodBtn{padding:.35rem .85rem;border-radius:20px;border:1px solid var(--brd);background:transparent;
  font-size:.97rem;font-weight:600;cursor:pointer;color:var(--muted);transition:all .15s}
.periodBtn:hover{border-color:var(--or);color:var(--or)}
.periodBtn.active{background:var(--or);border-color:var(--or);color:#fff}
.periodBtn.sm{padding:.25rem .6rem;font-size:.91rem}
/* ── Finance two-column grid ── */
.finGrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:720px){.finGrid{grid-template-columns:1fr}}
/* ── Number alignment ── */
.dtable td.num,.dtable th.num{text-align:right}
.c-profit{color:#27ae60;font-weight:700}
.c-loss{color:#c0392b;font-weight:700}
.c-cost{color:var(--muted)}
/* ── Selected row in finance tables ── */
.fin-selected td{background:rgba(255,107,0,.08);font-weight:700}
/* ── Badge ── */
.badge{font-size:.87rem;background:var(--or);color:#fff;border-radius:10px;
  padding:.1rem .45rem;margin-left:.4rem;font-weight:700;vertical-align:middle}

/* ── Finance: verkoop / inkoop split ──────────────────────────── */
.finSplit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 640px) { .finSplit { grid-template-columns: 1fr; } }

.finSplitHead {
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sales-head  { color: #16a34a; border-color: #16a34a; }
.cost-head   { color: #d97706; border-color: #d97706; }
.profit-head { color: #2563eb; border-color: #2563eb; }
.loss-head   { color: #dc2626; border-color: #dc2626; }

.finSplitRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .3rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: .9rem;
}
.finSplitRow:last-child { border-bottom: none; }

/* Document tables */
.fin-doctable tfoot td {
  border-top: 2px solid var(--border);
  padding-top: .5rem;
  font-size: .9rem;
}

.sales-title { color: #16a34a; }
.cost-title  { color: #d97706; }

/* Source badges */
.srcBadge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.src-okiooki { background: #dbeafe; color: #1d4ed8; }
.src-email   { background: #fef3c7; color: #92400e; }
.src-manual  { background: #f0f4f8; color: #4b5563; }

/* ── Document viewer overlay ──────────────────────────────────── */
.docViewer {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.docViewer.hidden { display: none; }
.docViewerCard {
  background: #07101f;
  border: 1px solid var(--bds);
  border-radius: 14px;
  width: min(1000px, 100%);
  max-height: 95vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.docViewerHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
.docViewerTitle {
  font-weight: 600; font-size: .9rem; color: var(--h);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60%;
}
.docViewerBody {
  flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center;
  background: #050d1a;
  min-height: 400px;
}
.docViewerBody iframe { width: 100%; height: calc(90vh - 70px); border: none; display: block; }
.docViewerBody img    { max-width: 100%; max-height: calc(90vh - 70px); display: block; margin: auto; padding: 1rem; }

/* ── File cards (in detail modal) ────────────────────────────── */
.fileCard {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: .6rem .75rem;
  margin-bottom: .5rem;
}
.fileCardIcon { font-size: 1.5rem; flex-shrink: 0; }
.fileCardInfo { flex: 1; min-width: 0; }
.fileCardName { font-size: .85rem; font-weight: 600; color: var(--h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fileCardMeta { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.fileCardActions { display: flex; gap: .4rem; flex-shrink: 0; }

/* ── Tabs inside modal ────────────────────────────────────────── */
.modalTabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--bd);
  padding: 0 1rem;
  margin-bottom: 1rem;
}
.modalTab {
  padding: .6rem 1rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; border: none; background: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.modalTab.active { color: var(--h); border-bottom-color: var(--accent); }
.modalTab:hover:not(.active) { color: var(--h); }
.modalTabPane { display: none; }
.modalTabPane.active { display: block; }

/* ── Slot upload area ─────────────────────────────────────────── */
.slotEmpty {
  display: flex; align-items: center; gap: .75rem;
  border: 2px dashed var(--bd);
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: .5rem;
  color: var(--muted);
  font-size: .85rem;
}
.slotEmptyIcon { font-size: 1.4rem; }

/* ── Doorlopende projecten ────────────────────────────────────── */
.ongoingList {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding-top: .25rem;
}
.ongoingCard {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: .6rem .9rem;
  cursor: pointer;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 340px;
  transition: background .15s, border-color .15s;
}
.ongoingCard:hover { background: rgba(255,255,255,.08); border-left-color: #fff; }
.ongoingBadge {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 56px;
}
.ongoingInfo { flex: 1; min-width: 0; }
.ongoingName { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ongoingMeta { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.ongoingLabel {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}

/* ── WhatsApp knop op slot ────────────────────────────────────── */
.waBtn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .4rem;
  padding: .25rem .55rem;
  background: #25D366;
  color: #fff;
  border-radius: 5px;
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background .15s, transform .1s;
  width: fit-content;
}
.waBtn:hover { background: #1ebe5d; transform: scale(1.03); }
.waBtn svg   { flex-shrink: 0; }

.techRowHead { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.techRowLoc  { color:var(--muted); font-size:.85rem; white-space:nowrap; }
.techMeta    { display:grid; gap:3px; margin-top:7px; }
.tmRow       { display:flex; align-items:baseline; gap:10px; font-size:.88rem; color:var(--muted); }
.tmIcon      { width:22px; text-align:center; flex-shrink:0; font-size:.95rem; }

.slotTechChips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; min-height:28px; }
.techChip { display:flex; align-items:center; gap:6px; padding:4px 8px 4px 12px; border-radius:20px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); font-size:.85rem; color:#e8eaf0; }
.techChipDel { background:none; border:none; color:var(--muted); cursor:pointer; padding:0 2px; font-size:.8rem; line-height:1; }
.techChipDel:hover { color:var(--danger,#e05); }

#weekJump {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.25);
  color: #e8eaf0;
  font-size: .85rem;
  cursor: pointer;
  outline: none;
  color-scheme: dark;
}
#weekJump:focus { border-color: var(--a); }

.waSheet { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; z-index:9999; }
.waSheetInner { background:var(--bg2,#1e2130); border-radius:18px 18px 0 0; padding:1.5rem 1.25rem 2rem; width:100%; display:flex; flex-direction:column; gap:10px; max-height:80vh; overflow-y:auto; }
.waSheetTitle { font-weight:700; font-size:1rem; color:var(--h,#e8eaf0); margin-bottom:4px; }
.waSheetBtn { display:flex; flex-direction:column; padding:13px 16px; background:#128C7E; color:#fff; border-radius:12px; text-decoration:none; font-weight:600; font-size:.95rem; gap:2px; }
.waSheetBtn:hover { background:#075E54; }
.waSheetNum { font-size:.78rem; font-weight:400; opacity:.85; }
.waSheetDisabled { background:rgba(255,255,255,.08) !important; color:var(--muted) !important; cursor:default; }
.waSheetClose { margin-top:4px; padding:12px; background:rgba(255,255,255,.08); border:none; border-radius:12px; color:#e8eaf0; font-size:.9rem; cursor:pointer; font-weight:600; }
.waSheetClose:hover { background:rgba(255,255,255,.14); }

/* ── ACQUISITIE ─────────────────────────────────────────────────────────── */
.acqStat { display:flex; flex-direction:column; align-items:center; min-width:90px; padding:.5rem .75rem; background:var(--bg2); border-radius:10px; border:1px solid var(--bd); }
.acqStatVal { font-size:1.5rem; font-weight:700; font-family:'Barlow Condensed',sans-serif; }
.acqStatLabel { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }
.acqRow { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid var(--bd); cursor:pointer; transition:background .15s; gap:1rem; }
.acqRow:hover { background:var(--bg2); }
.acqRowMain { flex:1; min-width:0; }
.acqCompany { font-weight:600; font-size:.95rem; }
.acqMeta { font-size:.8rem; color:var(--muted); margin-top:2px; display:flex; gap:.4rem; flex-wrap:wrap; }
.acqSector { background:rgba(255,107,0,.12); color:var(--or); border-radius:4px; padding:1px 6px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.acqRowRight { display:flex; align-items:center; gap:.6rem; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.acqEmail { font-size:.78rem; color:var(--muted); text-decoration:none; }
.acqEmail:hover { color:var(--or); }
.acqBadge { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:5px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.badge-new        { background:rgba(100,116,139,.18); color:#94a3b8; }
.badge-contacted  { background:rgba(59,130,246,.15); color:#60a5fa; }
.badge-followup   { background:rgba(245,158,11,.15); color:#fbbf24; }
.badge-responded  { background:rgba(34,197,94,.15); color:#4ade80; }
.badge-cold       { background:rgba(239,68,68,.1); color:#f87171; }
/* ── Nieuwe acquisitie statussen: interesse / afwezig ── */
.badge-interested { background: rgba(34,197,94,.18); color: #22c55e; }
.badge-ooo        { background: rgba(249,115,22,.15); color: #f97316; }

/* ─── Acquisitie reporting ─── */
.acqSectionTitle { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--or); margin-bottom:.6rem; }
.acqEmptyNote { font-size:.82rem; padding:.75rem 0; }
.acqActivityRow { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--bd); }
.acqActivityRow:last-child { border-bottom:none; }
.acqActIcon { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; flex-shrink:0; margin-top:1px; }
.acqActIcon--sent { background:rgba(59,130,246,.15); color:#60a5fa; }
.acqActIcon--fu   { background:rgba(245,158,11,.15);  color:#fbbf24; }
.acqActIcon--err  { background:rgba(239,68,68,.12);   color:#f87171; }
.acqActIcon--sum  { background:rgba(34,197,94,.12);   color:#4ade80; }
.acqActivityBody { flex:1; font-size:.82rem; line-height:1.4; }
.acqActivityCo   { font-weight:600; }
.acqActivityDate { font-size:.72rem; color:var(--muted); flex-shrink:0; margin-top:2px; }
.acqUpcomingRow  { display:flex; align-items:center; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid var(--bd); gap:.5rem; }
.acqUpcomingRow:last-child { border-bottom:none; }
.acqUpcomingDay  { font-size:.75rem; font-weight:700; color:var(--muted); white-space:nowrap; }
.acqUpcomingDay--urgent { color:#f87171; }
.acqActIcon--find { background:rgba(168,85,247,.15); color:#c084fc; }
.acqSettSection  { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--or); margin-bottom:.75rem; }

/* ── Prospect detail modal ─────────────────────────────────────────────── */
.acqDetailModal { padding:.25rem 0; }
.acqDetailDesc { font-size:.88rem; color:var(--muted); margin:0 0 1rem; line-height:1.5; }
.acqDetailGrid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.acqDetailCard { background:var(--bg2); border:1px solid var(--bd); border-radius:10px; padding:.75rem 1rem; }
.acqDetailCardLabel { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:.35rem; }
.acqDetailCardVal { font-size:.92rem; font-weight:600; line-height:1.3; word-break:break-all; }
.acqDetailHistRow { display:flex; align-items:flex-start; gap:.6rem; padding:.4rem 0; border-bottom:1px solid var(--bd); }
.acqDetailHistRow:last-child { border-bottom:none; }
@media(max-width:520px){ .acqDetailGrid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE OPTIMISATIONS — appended 2026-05-05
   ══════════════════════════════════════════════════════════════════════ */

/* ── Fix 6: finSplitRow border in dark theme ── */
.finSplitRow { border-bottom: 1px solid var(--bd); }

/* ── Fix 3: finance table min-width ── */
.fin-doctable { min-width: 700px; }

/* ── Fix 10: paidBtn base style ── */
.paidBtn {
  padding: .25rem .55rem;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.paidBtn.isPaid {
  background: rgba(39,174,96,.15);
  color: #27ae60;
  border-color: rgba(39,174,96,.3);
}

/* ── @media(max-width:860px) additions ── */
@media(max-width:860px){
  /* Fix 8: hide logout button in tab row */
  #btnLogout { display: none; }
}

/* ── @media(max-width:540px) additions ── */
@media(max-width:540px){
  /* Fix 1: body font size */
  body { font-size: 16px; line-height: 1.5; }
  .brandTitle { font-size: 17px; }
  .mValue { font-size: 24px; }
  .title { font-size: 24px; }

  /* Fix 2: iOS input zoom prevention */
  .f input, .f textarea, .f select,
  input:not([type=checkbox]):not([type=radio]), textarea, select,
  .searchWrap input { font-size: 16px !important; }

  /* Fix 4: period buttons horizontal scroll */
  .periodRow { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .periodRow::-webkit-scrollbar { display: none; }

  /* Fix 9: metric cards on mobile */
  .metric { padding: 10px 12px; }
  .mLabel { font-size: 14px; }

  /* Fix 10: paidBtn tap-friendly */
  .paidBtn { min-height: 36px; padding: .3rem .6rem; font-size: .8rem; }

  /* Fix 11: general tables on mobile */
  .dtable { font-size: .82rem; }
  .dtable th, .dtable td { padding: .4rem .5rem; }

  /* Fix 12: tab bar touch targets */
  .tab { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ── @media(max-width:400px): very small screens ── */
@media(max-width:400px){
  /* Fix 5: topbar on very small screens */
  .brandTitle { font-size: 15px; letter-spacing: .06em; }
  .brandSub { display: none; }
  .topbar { padding: 8px 10px; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE POLISH — 2026-05-08
   ══════════════════════════════════════════════════════════════════════ */

/* ── hRight: panel header button groups ── */
.hRight {
  display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── acqSubTab: proper CSS class (replaces inline style) ── */
.acqSubTab {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: .88rem; font-weight: 600;
  padding: .4rem 1rem .55rem;
  cursor: pointer; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.acqSubTab.is-active { color: var(--txt); border-bottom-color: var(--or); }
.acqSubTab:hover:not(.is-active) { color: var(--h); }

/* ── acqStatsBar: replaces inline flex style ── */
.acqStatsBar {
  display: flex; gap: .75rem; flex-wrap: wrap;
  padding: .65rem 0 .9rem;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 1.25rem;
}

/* ── acqGrid: activity + upcoming side-by-side ── */
.acqGrid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

/* ── acqFilterBar ── */
.acqFilterBar {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: .5rem; margin-bottom: .75rem;
  flex-wrap: wrap;
}
.acqFilterBar .acqSectionTitle { margin-bottom: 0 !important; flex-shrink: 0; }
.acqFilterControls {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.acqFilterControls input,
.acqFilterControls select {
  margin-bottom: 0; width: auto; min-width: 0;
}
#acqSearch, #partnerSearch { width: 190px; }

/* ── Tablet (≤860px) ── */
@media(max-width:860px) {
  /* Panel header: wrap buttons below title on tablet */
  .panelHead { flex-wrap: wrap; }
  .hRight { justify-content: flex-start; }

  /* acqGrid: stack vertically */
  .acqGrid { grid-template-columns: 1fr; gap: .9rem; }

  /* Smaller header chips */
  .panelHead .chip { font-size: .8rem; padding: 6px 11px; min-height: 36px; }
}

/* ── Mobile (≤540px) ── */
@media(max-width:540px) {
  /* ── Stats: 3 per row, compact ── */
  .acqStatsBar { gap: .4rem; }
  .acqStat {
    flex: 1 1 calc(33.3% - .4rem);
    min-width: 0; padding: .4rem .5rem;
  }
  .acqStatVal { font-size: 1.15rem; }
  .acqStatLabel { font-size: .6rem; }

  /* ── Prospect list rows: card-style stacking ── */
  .acqRow {
    flex-direction: column;
    align-items: flex-start;
    padding: .7rem .75rem;
    gap: .3rem;
  }
  .acqRowMain { width: 100%; }
  .acqRowRight {
    width: 100%;
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
  }
  /* hide email in list (visible in detail modal) */
  span.acqEmail { display: none; }

  /* ── Filter bar: stack ── */
  .acqFilterBar { flex-direction: column; align-items: flex-start; }
  .acqFilterControls { width: 100%; }
  #acqSearch, #partnerSearch { width: 100% !important; }
  .acqFilterControls select { flex: 1 1 calc(50% - .25rem); }

  /* ── Panel header action buttons ── */
  .panelHead .hRight .chip,
  .panelHead .hRight button { font-size: .76rem; padding: 5px 9px; min-height: 34px; }

  /* ── Document viewer: slide up from bottom ── */
  .docViewer { padding: 0; align-items: flex-end; }
  .docViewerCard {
    width: 100%; max-height: 96vh;
    border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  .docViewerHead { padding: .5rem .75rem; }
  .docViewerTitle { max-width: 65%; font-size: .8rem; }
  .docViewerBody iframe { height: calc(92vh - 50px); }
  .docViewerBody img { max-height: calc(92vh - 50px); }

  /* ── Sub-tabs: compact ── */
  .acqSubTab { padding: .35rem .7rem .5rem; font-size: .82rem; }

  /* ── acqDetailGrid: single column ── */
  .acqDetailGrid { grid-template-columns: 1fr !important; }

  /* ── Modal body: less padding ── */
  .acqDetailDesc { font-size: .85rem; }
}

/* ── Very small (≤380px) ── */
@media(max-width:380px) {
  .acqStat { flex: 1 1 calc(50% - .4rem); }
  #acqSearch, #partnerSearch { font-size: .8rem !important; }
}

/* ── MODAL + FORMGRID MOBILE FIXES — 2026-05-08 ── */

/* Fix: prevent grid items from expanding beyond modal width */
@media(max-width:860px){
  .formGrid { grid-template-columns: minmax(0,1fr); }
  .grid2    { grid-template-columns: minmax(0,1fr); }
}

@media(max-width:540px){
  /* Modal footer: 2 per row so 5 buttons form 2+2+1 layout */
  .modalFoot button, .modalActions button {
    flex: 1 1 calc(50% - 4px);
    font-size: .78rem;
    padding: .55rem .4rem;
    min-height: 42px;
    text-align: center;
  }
  /* Modal tabs: scroll horizontally when tabs don't fit */
  .modalTabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .modalTabs::-webkit-scrollbar { display: none; }
  .modalTab { white-space: nowrap; flex-shrink: 0; }
  /* dtableWrap: never wider than modal body */
  .dtableWrap { max-width: 100%; }
}

/* ── Prevent browser back/forward on planner swipe ── */
#viewPlanner { overscroll-behavior-x: none; touch-action: pan-y; }
body, html { overscroll-behavior-x: none; }

/* ── Generieke pills (gebruikt o.a. in Projecten-tab voor stale-flag) ── */
.pill {
  display: inline-block; padding: 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  margin-left: 8px; vertical-align: middle;
  letter-spacing: .02em;
}
.pill-red    { background: rgba(239,68,68,.14);  color: #f87171; }
.pill-yellow { background: rgba(250,204,21,.14); color: #facc15; }
.pill-green  { background: rgba(34,197,94,.14); color: #4ade80; }
.pill-gray   { background: rgba(255,255,255,.06); color: var(--muted); }
.pill-orange { background: rgba(255,107,0,.14);  color: var(--or); }

/* ── Trend per sorter (project-detail) ── */
.trend-list { display: grid; gap: 8px; }
.trend-row {
  display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; gap: 12px;
  align-items: center; padding: 10px 12px;
  background: var(--bg3); border: 1px solid var(--bd); border-radius: 10px;
}
.trend-sorter { font-weight: 700; font-size: 1rem; color: var(--h); word-break: break-all; }
.trend-dots { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.trend-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.35);
  display: inline-block; cursor: pointer;
  transition: transform .15s;
}
.trend-dot:hover { transform: scale(1.25); }
.trend-green  { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.18); }
.trend-yellow { background: #facc15; box-shadow: 0 0 0 2px rgba(250,204,21,.22); }
.trend-red    { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.22); }
.trend-range  { color: var(--muted); font-size: .8rem; white-space: nowrap; }
@media (max-width: 720px) {
  .trend-row { grid-template-columns: 1fr; gap: 6px; }
  .trend-range { font-size: .75rem; }
}

/* ── Klant-detail inklapbare secties (Inspecties, Facturen) ── */
details.customer-section {
  margin-top: 14px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg3);
  overflow: hidden;
}
details.customer-section > summary {
  list-style: none;
  cursor: pointer; user-select: none;
  padding: 12px 16px;
  font-weight: 700; font-size: 1rem; color: var(--h);
  display: flex; align-items: center; gap: 10px;
  background: var(--bg3);
}
details.customer-section > summary::-webkit-details-marker { display: none; }
details.customer-section > summary::before {
  content: '▸';
  display: inline-block; width: 16px;
  color: var(--muted);
  transition: transform .15s;
}
details.customer-section[open] > summary::before { transform: rotate(90deg); }
details.customer-section > summary:hover { background: rgba(255,107,0,.06); }
details.customer-section .detailSection-body {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--bd);
  background: var(--bg2);
}
.badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 2px 8px;
  background: var(--or); color: white;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  margin-left: auto;
}

/* Sorter-subgroep binnen de inspecties-sectie */
details.sorter-group {
  margin-top: 6px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}
details.sorter-group > summary {
  list-style: none;
  cursor: pointer; user-select: none;
  padding: 8px 12px;
  font-weight: 600; font-size: .92rem; color: var(--txt);
}
details.sorter-group > summary::-webkit-details-marker { display: none; }
details.sorter-group > summary::before {
  content: '▸';
  display: inline-block; width: 14px;
  color: var(--muted);
  transition: transform .15s;
}
details.sorter-group[open] > summary::before { transform: rotate(90deg); }
details.sorter-group > summary:hover { background: rgba(255,107,0,.04); }
details.sorter-group .dtableWrap { padding: 0 12px 10px; }

/* Industriële achtergrond — zelfde foto als dts-mechanical.be hero. */
body { position: relative; background: transparent !important; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background-image: url('/assets/bg-industrial.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(circle at top, rgba(8,9,14,0.78) 0%, rgba(2,3,8,0.93) 60%, rgba(0,0,0,0.97) 100%);
}
html { background: transparent !important; }

/* ===== YoY-vergelijk widget ============================================= */
#yoyCard .yoyHead { font-size:.78rem; color:var(--muted,#9aa3b2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; }
#yoyCard .yoyGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
#yoyCard .yoyTile { background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-radius:8px; padding:.6rem .75rem; }
#yoyCard .yoyTile .yoyLabel { font-size:.78rem; color:var(--muted,#9aa3b2); margin-bottom:.15rem; }
#yoyCard .yoyTile .yoyVal { font-size:clamp(13px, 1.3vw, 20px); font-weight:600; letter-spacing:-0.01em; }
#yoyCard .yoyTile .yoyRef { font-size:.72rem; color:var(--muted,#9aa3b2); margin-top:.15rem; }
#yoyCard .yoyBadge { display:inline-block; margin-top:.3rem; padding:.12rem .4rem; border-radius:5px; font-size:.72rem; font-weight:600; }
#yoyCard .yoyBadge.up   { background:rgba(34,197,94,.15); color:#22c55e; }
#yoyCard .yoyBadge.down { background:rgba(239,68,68,.15); color:#ef4444; }
#yoyCard .yoyBadge.flat { background:rgba(148,163,184,.15); color:#94a3b8; }
#yoyCard .yoyVerdict { margin-top:.7rem; font-size:.82rem; color:var(--text,#e6e9ef); }
#yoyCard .yoyFooter  { margin-top:.4rem; font-size:.72rem; color:var(--muted,#9aa3b2); }
@media (max-width:640px) { #yoyCard .yoyGrid { grid-template-columns:1fr; } }

/* YoY: full-width sections + compare-row */
#yoyCard .yoySection { margin-top:.6rem; }
#yoyCard .yoySubHead { font-size:.74rem; color:var(--muted,#9aa3b2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.35rem; opacity:.8; }
#yoyCard .yoyCmp { display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; }
#yoyCard .yoyCmp .yoyBadge { font-size:.95rem; padding:.25rem .55rem; }
#yoyCard .yoyDelta { font-size:1.0rem; font-weight:600; }
#yoyCard .yoyDelta.up   { color:#22c55e; }
#yoyCard .yoyDelta.down { color:#ef4444; }

/* WA-knoppen op slot-cards: 2-button row met 3D-logo */
.waBtnRow { display:flex; gap:5px; margin-top:8px; }
.waBtnRow .waBtn {
  flex:1 1 0; min-width:0;
  padding:.35rem .35rem;
  font-size:.74rem; font-weight:600;
  gap:4px;
  justify-content:center; align-items:center;
  white-space:nowrap; overflow:hidden;
}
.waBtn .waBtnIcon { width:14px; height:14px; flex-shrink:0; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.waBtnPlan { background:#25D366; }
.waBtnPlan:hover { background:#1ebe5d; }
.waBtnRemind { background:#128C7E; }
.waBtnRemind:hover { background:#0f7268; }

/* ══ Acquisitie-dashboard herstructurering (27-08-2026) ══════════════════
   Model: het Brevo-statistiekenscherm. Eén kaart met balken in plaats van
   elf losse tegels, en één platte gebeurtenissenlijst in plaats van vier
   dichtgeklapte accordeons. */

.acqSearchWrap {
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--bd); border-radius:12px;
  background:var(--bg2); padding:.55rem .8rem; margin-bottom:1rem;
}
.acqSearchWrap:focus-within { border-color:var(--or); }
.acqSearchIcon { font-size:.95rem; opacity:.65; flex-shrink:0; }
.acqSearchWrap input {
  flex:1; background:transparent; border:none; outline:none; margin:0;
  color:var(--fg); font-size:.95rem;
}
.acqSearchWrap input::placeholder { color:var(--muted); }
#acqSearchClear {
  background:transparent; border:none; color:var(--muted);
  cursor:pointer; font-size:.85rem; padding:.15rem .35rem; border-radius:6px;
}
#acqSearchClear:hover { color:var(--fg); background:rgba(255,255,255,.06); }

.acqCard {
  border:1px solid var(--bd); border-radius:14px;
  background:rgba(255,255,255,.015);
  padding:.9rem 1.1rem; margin-bottom:.8rem;
}
.acqCardThin { padding:.6rem 1.1rem; }
.acqCardHead { display:flex; align-items:baseline; gap:.55rem; margin-bottom:.9rem; }
.acqCardBig { font-family:'Barlow Condensed',sans-serif; font-size:2.1rem; font-weight:700; line-height:1; }
.acqCardBigLabel { font-size:.8rem; color:var(--muted); }

.acqMeters {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:.7rem 1.6rem;
}
.acqMeter {
  display:flex; flex-direction:column; gap:.3rem;
  background:transparent; border:none; padding:.1rem .1rem .2rem;
  font:inherit; color:inherit; text-align:left; cursor:pointer; border-radius:7px;
}
.acqMeter[disabled] { cursor:default; }
.acqMeter:not([disabled]):hover { background:rgba(255,255,255,.04); }
.acqMeterTop { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.acqMeterLabel { font-size:.78rem; color:var(--muted); }
.acqMeterVal { font-size:.95rem; font-weight:700; }
.acqM-ok { color:#86efac; } .acqM-bad { color:#fca5a5; } .acqM-mut { color:var(--muted); }
.acqMeterTrack { height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.acqMeterFill { display:block; height:100%; border-radius:99px; }
.acqF-ok { background:#22c55e; } .acqF-bad { background:#ef4444; } .acqF-mut { background:#6b7280; }

.acqChipRow { display:flex; gap:.4rem; flex-wrap:wrap; }
.acqChipStat {
  display:flex; align-items:baseline; gap:.35rem;
  background:transparent; border:1px solid transparent; border-radius:8px;
  padding:.3rem .55rem; font:inherit; color:inherit; cursor:pointer;
}
.acqChipStat:hover { background:rgba(255,255,255,.05); border-color:var(--bd); }
.acqChipStat b { font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; font-weight:700; }
.acqChipStat span { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.acqNav {
  display:flex; gap:.3rem; flex-wrap:wrap;
  border-bottom:1px solid var(--bd); margin-bottom:1rem;
}
.acqNavBtn {
  background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--muted); font:inherit; font-size:.82rem; font-weight:600;
  padding:.5rem .85rem; cursor:pointer; margin-bottom:-1px;
}
.acqNavBtn:hover { color:var(--fg); }
.acqNavBtn.is-active { color:var(--or); border-bottom-color:var(--or); }
.acqNavCount { color:var(--muted); font-weight:400; font-size:.74rem; }

.acqPane { display:none; }
.acqPane.is-active { display:block; }
.acqFilterControls { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.acqFilterControls select {
  background:var(--bg2); border:1px solid var(--bd); color:var(--fg);
  padding:5px 10px; border-radius:8px; font-size:.82rem; margin-bottom:0;
}

@media (max-width:760px) {
  .acqCardBig { font-size:1.7rem; }
  .acqMeters { grid-template-columns:1fr 1fr; gap:.6rem .9rem; }
  .acqNavBtn { padding:.45rem .6rem; font-size:.78rem; }
  .acqCard { padding:.7rem .8rem; }
  .acqChipRow { gap:.2rem; }
}
@media (max-width:520px) {
  /* Op een telefoon ook de meters onder elkaar: twee naast elkaar maakt de
     balkjes te kort om nog iets te zeggen. */
  .acqMeters { grid-template-columns:1fr; gap:.55rem; }
  .acqNav { gap:0; }
  .acqNavBtn { padding:.45rem .5rem; font-size:.74rem; }
}

/* ── Engagement: één tegel per bedrijf (27-08-2026) ──
   De platte gebeurtenissenlijst was onleesbaar: een scanner die drie links in
   dezelfde seconde aanklikt gaf drie identieke regels. */
.acqEngageBar {
  display:flex; gap:.8rem; align-items:flex-start; justify-content:space-between;
  font-size:.75rem; color:var(--muted); line-height:1.5;
  padding:.6rem .8rem; margin-bottom:.9rem;
  border:1px solid var(--bd); border-radius:10px; background:rgba(255,255,255,.015);
}
.acqTiles {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:.6rem;
}
.acqTile {
  display:flex; flex-direction:column; gap:.25rem; text-align:left;
  min-width:0; max-width:100%;
  border:1px solid var(--bd); border-radius:11px; background:rgba(255,255,255,.02);
  padding:.6rem .7rem; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .12s, background .12s, transform .12s;
}
.acqTile:hover { border-color:var(--or); background:rgba(255,107,0,.06); transform:translateY(-1px); }
.acqTileTop { display:flex; align-items:center; gap:.4rem; min-width:0; }
.acqTileName {
  font-size:.86rem; font-weight:700; line-height:1.25;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acqTileContact {
  font-size:.73rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acqTileNums { display:flex; gap:.25rem; flex-wrap:wrap; margin-top:.15rem; }
.acqTileFoot { font-size:.68rem; color:var(--muted); opacity:.75; margin-top:.15rem; }
.acqDot { width:8px; height:8px; border-radius:99px; flex-shrink:0; display:inline-block; }
.acqDot-ok  { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); }
.acqDot-mid { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.15); }
.acqDot-off { background:#4b5563; }
.acqTag {
  font-size:.65rem; padding:.08rem .35rem; border-radius:5px;
  background:rgba(255,255,255,.06); color:var(--muted); white-space:nowrap;
}
.acqTag-ok  { background:rgba(34,197,94,.18);  color:#86efac; font-weight:700; }
.acqTag-mid { background:rgba(245,158,11,.18); color:#fbbf24; font-weight:700; }
.acqTag-off { background:rgba(255,255,255,.04); opacity:.75; }

@media (max-width:820px) {
  /* Alles onder elkaar op mobiel. Stond op 1fr 1fr, waardoor de rechterkolom
     buiten beeld viel terwijl de pagina niet zijwaarts kan scrollen. */
  .acqTiles { grid-template-columns:1fr; }
  .acqEngageBar { flex-direction:column; align-items:stretch; }
  .acqEngageBar button { align-self:flex-start; }
}

.acqTag-site { background:rgba(56,189,248,.18); color:#7dd3fc; font-weight:700; }
.acqDot-site { background:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.15); }

/* ── Prospectdossier: één tijdlijn met alles (27-08-2026) ──
   Verzonden mail, reacties, opens, kliks, websitebezoek, statuswijzigingen en
   de geplande follow-up stonden verspreid over vier endpoints en twee schermen. */
.acqDossierTop {
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--bd); margin-bottom:.7rem;
}
.acqDossierStatus {
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--or); border:1px solid rgba(255,107,0,.4); border-radius:999px;
  padding:.15rem .55rem; white-space:nowrap; flex-shrink:0;
}
.acqDossierVat {
  display:flex; gap:1rem; flex-wrap:wrap; font-size:.74rem; color:var(--muted);
  padding-bottom:.8rem; border-bottom:1px solid var(--bd); margin-bottom:.3rem;
}
.acqDossierVat b { font-size:.95rem; color:var(--fg); font-family:'Barlow Condensed',sans-serif; }
.acqDossierVat .c-profit b { color:#86efac; }

.acqTl { max-height:58vh; overflow-y:auto; }
.acqTlRow {
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.55rem 0; border-bottom:1px solid var(--bd);
}
.acqTlReply { background:rgba(34,197,94,.06); border-left:2px solid #22c55e; padding-left:.5rem; }
.acqTlPlanned { background:rgba(255,107,0,.06); border-left:2px solid #fb923c; padding-left:.5rem; }
.acqTlTime {
  flex-shrink:0; width:104px; font-size:.73rem; color:var(--muted);
  font-variant-numeric:tabular-nums; padding-top:.1rem;
}
.acqTlIcon { flex-shrink:0; width:16px; text-align:center; font-size:.9rem; padding-top:.05rem; }
.acqTlBody { flex:1; min-width:0; }
.acqTlHead { display:flex; gap:.45rem; flex-wrap:wrap; align-items:baseline; }
.acqTlKind { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.acqTlType { font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.acqTlTitle { font-size:.84rem; font-weight:600; margin-top:.1rem; }
.acqTlMeta { font-size:.72rem; color:var(--muted); word-break:break-word; }
.acqTlDim { opacity:.72; }
.acqTlQuote {
  font-size:.78rem; color:var(--fg); opacity:.9; margin-top:.35rem;
  padding:.4rem .6rem; border-left:2px solid var(--bd);
  background:rgba(255,255,255,.02); white-space:pre-wrap;
}
@media (max-width:600px) {
  .acqTlTime { width:78px; font-size:.68rem; }
  .acqDossierVat { gap:.7rem; }
}

/* Afleverstatus zichtbaar op de tegel: rood = geweigerd, groen = aangekomen. */
.acqTag-bad  { background:rgba(239,68,68,.18);  color:#fca5a5; font-weight:700; }
.acqTag-good { background:rgba(34,197,94,.14);  color:#86efac; }
.acqDot-bad  { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
.acqTileBad  { border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.045); }
.acqTileBad:hover { border-color:#ef4444; background:rgba(239,68,68,.09); }
.acqTileGood { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.05); }
.acqTileGood:hover { border-color:#22c55e; background:rgba(34,197,94,.1); }

/* Bedrijfsgegevens in de dossier-kop: stonden alleen op de prospectkaart. */
.acqInfoGrid {
  display:grid; grid-template-columns:1fr 1fr; gap:0 1.6rem;
  padding:.15rem 0 .7rem; border-bottom:1px solid var(--bd); margin-bottom:.7rem;
}
.acqInfoRij { display:flex; gap:.5rem; padding:.16rem 0; font-size:.79rem; align-items:baseline; }
.acqInfoLabel {
  flex-shrink:0; width:76px; color:var(--muted); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.05em;
}
.acqInfoWaarde { flex:1; min-width:0; word-break:break-word; }
.acqInfoTech {
  font-size:.7rem; color:var(--muted); opacity:.8; line-height:1.5;
  padding-bottom:.6rem; border-bottom:1px solid var(--bd); margin-bottom:.6rem;
}
.acqInfoTekst { font-size:.79rem; color:var(--muted); line-height:1.5; margin-bottom:.6rem; }
.acqInfoNotes { margin-bottom:.7rem; }
.acqInfoNotes summary {
  cursor:pointer; font-size:.7rem; color:var(--or); text-transform:uppercase;
  letter-spacing:.06em; font-weight:700; outline:none;
}
.acqInfoNotes div {
  font-size:.75rem; color:var(--muted);
  max-height:220px; overflow-y:auto; margin-top:.35rem;
  padding:.45rem .6rem; background:rgba(255,255,255,.02); border-radius:7px;
}
/* Eén regel per notitie, met een streepje ervoor zodat je kunt scannen. */
.acqInfoNotes div p {
  margin:0 0 .3rem 0; padding-left:.7rem; position:relative; line-height:1.5;
}
.acqInfoNotes div p:last-child { margin-bottom:0; }
.acqInfoNotes div p::before {
  content:'\2013'; position:absolute; left:0; opacity:.5;
}
@media (max-width:620px) { .acqInfoGrid { grid-template-columns:1fr; } }

/* ── Mobiel vangnet (27-08-2026) ──
   Eén element dat breder is dan de viewport duwt de hele pagina uit beeld,
   en de layout kan niet zijwaarts scrollen. Daarom hier hard begrenzen. */
#acqSubMain, #acqSubMain * { max-width:100%; }
#acqSubMain { min-width:0; overflow-x:hidden; }
.acqTileContact, .acqTileFoot, .acqInfoWaarde, .acqTlTitle, .acqTlMeta {
  overflow-wrap:anywhere;
}
@media (max-width:520px) {
  .acqSearchWrap input { font-size:.9rem; }
  .acqDossierVat { font-size:.7rem; }
  .acqTlRow { gap:.45rem; }
  .acqTlTime { width:70px; }
  .acqTlIcon { width:14px; }
}

/* Achterstallige follow-up: rood in plaats van oranje. Een datum in het
   verleden met de tekst 'wordt verstuurd' wekte de indruk dat het geregeld was. */
.acqTlLate { background:rgba(239,68,68,.07); border-left:2px solid #ef4444; padding-left:.5rem; }

/* Keuzelijst als een bedrijf meerdere contactpersonen heeft. */
.acqContactRij {
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  background:transparent; border:1px solid var(--bd); border-radius:9px;
  padding:.55rem .7rem; margin-bottom:.4rem; cursor:pointer; font:inherit; color:inherit;
}
.acqContactRij:hover { border-color:var(--or); background:rgba(255,107,0,.06); }

/* Vervalkalender: regels waar je op kunt klikken om de factuur te openen. */
.vkRij {
  display:flex; align-items:center; gap:.7rem; padding:.45rem .1rem;
  border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer;
}
/* Open positie uit de opdrachten-scraper: oranje, want dit is het signaal
   waar direct actie op hoort te volgen. */
.acqTag-vac {
  background:rgba(255,107,0,.16) !important;
  color:#ffb066 !important;
  border-color:rgba(255,107,0,.45) !important;
  font-weight:800;
}

.vkRij:last-child { border-bottom:none; }
.vkRij:hover { background:rgba(255,107,0,.06); }
/* Het papiertje naast de regel: rustig tot je er met de muis overheen gaat,
   want het staat op elke regel en mag het bedrag niet overstemmen. */
.vkRij .vkPdf {
  background:none; border:none; cursor:pointer; padding:.15rem .25rem;
  font-size:.95rem; line-height:1; opacity:.45; flex-shrink:0;
  border-radius:6px; transition:opacity .12s, background .12s;
}
.vkRij:hover .vkPdf { opacity:.85; }
.vkRij .vkPdf:hover { opacity:1; background:rgba(255,255,255,.08); }
@media (max-width:820px){
  .finGrid { grid-template-columns:1fr; }
}

/* Ingeklapte staart van de vervalkalender. */
.vkMeer > summary {
  cursor:pointer; list-style:none; font-size:.76rem; color:var(--or);
  padding:.35rem .1rem; user-select:none;
}
.vkMeer > summary::-webkit-details-marker { display:none; }
.vkMeer > summary::before { content:"▸ "; }
.vkMeer[open] > summary::before { content:"▾ "; }

/* ── Boekhoudkaart ─────────────────────────────────────────────────── */
.boekBalk {
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  margin:.7rem 0 .5rem;
}
.boekTabs { display:flex; gap:.3rem; flex-wrap:wrap; }
.boekTab {
  background:transparent; border:1px solid var(--bd); color:var(--muted);
  border-radius:999px; padding:.3rem .8rem; font-size:.8rem; cursor:pointer; font:inherit;
  font-size:.8rem;
}
.boekTab:hover { border-color:var(--or); color:var(--fg); }
.boekTab.actief { background:rgba(255,107,0,.15); border-color:var(--or); color:var(--or); font-weight:700; }
.boekZoek {
  flex:1; min-width:220px; background:var(--bg2); border:1px solid var(--bd);
  color:var(--fg); border-radius:9px; padding:.4rem .7rem; font:inherit; font-size:.85rem; margin:0;
}
.boekSom {
  display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.8rem; color:var(--muted);
  padding:.3rem 0 .5rem; border-bottom:1px solid var(--bd); margin-bottom:.3rem;
}
.boekSom b { color:var(--fg); }
.boekTabel tbody tr { cursor:pointer; }
.boekTabel tbody tr:hover { background:rgba(255,107,0,.06); }
.boekNr { font-size:.8rem; color:var(--muted); }
@media (max-width:820px){
  .boekBalk { flex-direction:column; align-items:stretch; }
  .boekZoek { min-width:0; }
}

/* ── Finance: panelen achter knoppen ───────────────────────────────── */
.finNav { display:flex; gap:.4rem; flex-wrap:wrap; margin:1rem 0 .8rem; }
.finNavBtn {
  background:var(--bg2); border:1px solid var(--bd); color:var(--fg);
  border-radius:10px; padding:.55rem 1rem; font:inherit; font-size:.86rem;
  font-weight:600; cursor:pointer;
}
.finNavBtn:hover { border-color:var(--or); }
.finNavBtn.actief { background:rgba(255,107,0,.15); border-color:var(--or); color:var(--or); }
.finPaneel { display:none; }
.finPaneel.actief { display:block; }
@media (max-width:820px){
  .finNav { display:grid; grid-template-columns:1fr 1fr; }
  .finNavBtn { min-height:44px; }
}

/* Knoppen in een kopbalk even groot maken. .primary heeft geen rand en
   .secondary wel, en ze verschilden in lettergrootte; daardoor stonden ze
   niet op één lijn. Hier krijgen ze dezelfde doos. */
.hRight .chip {
  box-sizing:border-box;
  min-height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px;
  font-size:17px;
  line-height:1.2;
  border-radius:var(--r);
}
.hRight .chip.primary { border:1px solid transparent; }
@media (max-width:820px){
  .hRight { display:grid; grid-template-columns:1fr; gap:8px; }
  .hRight .chip { width:100%; }
}

/* Keuzelijst met banktransacties bij het koppelen. */
.bkRij {
  display:flex; align-items:center; gap:.7rem; width:100%;
  background:transparent; border:1px solid var(--bd); border-radius:9px;
  padding:.45rem .7rem; margin-bottom:.35rem; cursor:pointer; font:inherit; color:inherit;
}
.bkRij:hover { border-color:var(--or); background:rgba(255,107,0,.06); }

/* Slepen van een bonnetje naar het finance-scherm. */
#viewFinance.sleepZone { position:relative; }
#viewFinance.sleepZone::after {
  content:"Laat los om de bon uit te lezen";
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,17,22,.82);
  border:3px dashed var(--or); border-radius:14px;
  color:var(--or); font-size:1.3rem; font-weight:800; letter-spacing:.03em;
  pointer-events:none;
}
#btnBon.sleepAan { outline:3px solid var(--or); outline-offset:3px; }

/* Twee donuts naast elkaar: dit jaar en vorig jaar. */
.donutPaar { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.donutVak { text-align:center; min-width:0; }
.donutVak canvas { max-width:100%; height:auto; }
.donutJaar {
  font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.3rem;
}
.donutOnder { margin-top:.3rem; line-height:1.4; }
@media (max-width:820px){
  .donutPaar { grid-template-columns:1fr; }
}

/* ── Landkleur op de prospecttegels ──────────────────────────────────────
   Nederland blauw, België geel, Duitsland paars. Bewust niet groen of rood:
   die twee betekenen op deze tegels al "reactie" en "adres dood". De kleur
   zit op de linkerrand zodat de statuskleur van de tegel zelf zichtbaar
   blijft, en de landcode staat er in letters bij. */
.acqTile.acqLand-nl { border-left:3px solid #3d8bfd; }
.acqTile.acqLand-be { border-left:3px solid #f2c200; }
.acqTile.acqLand-de { border-left:3px solid #a855f7; }

.acqLandTag {
  margin-left:auto; flex:0 0 auto;
  font-size:.58rem; font-weight:800; letter-spacing:.06em;
  padding:.08rem .3rem; border-radius:4px; border:1px solid transparent;
}
.acqLandTag.acqLand-nl { color:#8fc2ff; background:rgba(61,139,253,.16); border-color:rgba(61,139,253,.4); }
.acqLandTag.acqLand-be { color:#f7d759; background:rgba(242,194,0,.16);  border-color:rgba(242,194,0,.4); }
.acqLandTag.acqLand-de { color:#d3a8fb; background:rgba(168,85,247,.16); border-color:rgba(168,85,247,.4); }

/* ── Koppeling met DTS Mechanical ────────────────────────────────────────
   Alles wat van de andere vennootschap komt is hier alleen te lezen. Het
   merkje en de waarschuwing maken dat zichtbaar zonder de schermen te
   verbouwen. */
.partnerTag {
  font-size:.56rem; font-weight:800; letter-spacing:.06em; vertical-align:middle;
  padding:.08rem .3rem; border-radius:4px; margin-left:.35rem;
  color:#9ad2ff; background:rgba(61,139,253,.14); border:1px solid rgba(61,139,253,.35);
}
.partnerWaarschuwing {
  margin:0 0 .9rem; padding:.7rem .85rem; border-radius:9px;
  background:rgba(255,107,0,.1); border:1px solid rgba(255,107,0,.4);
  color:#ffc899; font-size:.82rem; line-height:1.45;
}
.partnerWaarschuwing b { color:#ffb066; }
.partnerWaarschuwingTip { color:#cfa27a; font-size:.76rem; margin-top:.35rem; }