@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: #2cdbba;
  --or-dim: rgba(44,219,186,.12);
  --or-glow: rgba(44,219,186,.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(44,219,186,.08), 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(44,219,186,.50);
  box-shadow:0 0 0 3px rgba(44,219,186,.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}

/* ── 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(44,219,186,.50);
  color:var(--or);
  box-shadow:0 0 0 3px rgba(44,219,186,.08);
}
.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:32px; font-weight:800; color:var(--h); margin-top:4px;
}
.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(44,219,186,.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(44,219,186,.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; }
/* ─── 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; }
}