/*    vorio-admin-app.css — Admin/superadmin styling overlay
   Versie 1.0 (refactor-pakket)

   Admin/superadmin krijgt subtiel andere styling via CSS-variabelen.
   Body krijgt data-app="admin" attribuut in admin.php.
   We overrijden NIET de huiskleur (--p) — die blijft kantoor-specifiek
   (zodat elk notariskantoor zijn eigen merkkleur behoudt in de admin).
   Alleen layout-tokens worden aangescherpt voor een "administratieve" look.
 */

html[data-theme="light"] body[data-app="admin"] {
 --radius: 6px; /* iets scherpere hoeken */
 --bg: #f1f5f9; /* koeler grijs */
 --border: #cbd5e1; /* iets sterker contrast */
}
html[data-theme="dark"] body[data-app="admin"] {
  --radius: 6px;
}

/*    Versie 1.1 (uniadmin-pakket)
   Uniforme tokens voor admin + superadmin: buttons, inputs, zebra, danger,
   markdown render, portaal-link.
 */

/* === TABLE HEADERS — gewoon leesbaar (Image #273/#274) ===
   Default .tbl th gebruikt licht-grijs uppercase (vorio-base.css + beheer.css).
   beheer.css zet !important op .admin-tabel th → wij moeten 't sterker
   overrijden. */
body[data-app="admin"] .tbl th,
body[data-app="admin"] table.tbl thead th,
body[data-app="admin"] .vr-tbl th,
body[data-app="admin"] .admin-tabel th,
body[data-app="admin"] table.admin-tabel thead th {
  color:var(--text1) !important;
  font-weight:600 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:12.5px !important;
  padding:8px 12px !important;
  background:transparent !important;
}

/* === ZEBRA STRIPING === */
body[data-app="admin"] .admin-tabel tbody tr:nth-child(even) td,
body[data-app="admin"] table.zebra tbody tr:nth-child(even) td,
body[data-app="admin"] table.tbl.zebra tbody tr:nth-child(even) td {
  background:var(--bg3);
}
body[data-app="admin"] .admin-tabel tbody tr:hover td,
body[data-app="admin"] table.zebra tbody tr:hover td,
body[data-app="admin"] table.tbl.zebra tbody tr:hover td {
  background:var(--bg4);
}

/* === BUTTONS UNIFORM ===
   Eén hoogte (28px) over alle modules. Square-variant voor icoon-only.
   Centrale class — 1× wijzigen, overal aangepast. */
.adm-btn,
.adm-btn-ghost,
.adm-btn-success,
.adm-btn-ghost-success,
.adm-btn-danger,
a.adm-btn,
a.adm-btn-ghost,
a.adm-btn-success,
a.adm-btn-ghost-success,
a.adm-btn-danger,
button.adm-btn,
button.adm-btn-ghost,
button.adm-btn-success,
button.adm-btn-ghost-success,
button.adm-btn-danger {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  height:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  padding:0 12px !important;
  border-radius:8px;
  font-family:inherit;font-size:12.5px !important;font-weight:600 !important;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .15s, border-color .15s, color .15s;
  line-height:1 !important;
  box-sizing:border-box !important;
  white-space:nowrap;
  appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
  text-decoration:none !important;
  vertical-align:middle;
  margin:0;
}
.adm-btn { background:var(--p,#1a6bdc); color:#fff }
.adm-btn:hover { background:var(--pd,#1558c0) }
.adm-btn-ghost { background:var(--bg2) !important; color:var(--text2) !important; border:1px solid var(--border) !important }
.adm-btn-ghost:hover { background:var(--bg3) !important; border-color:var(--border2) !important }
.adm-btn-success { background:var(--green); color:#fff }
.adm-btn-success:hover { background:#15803d }
.adm-btn-ghost-success { background:transparent !important; color:var(--green) !important; border:1px solid rgba(34,197,94,.32) !important }
.adm-btn-ghost-success:hover { background:rgba(34,197,94,.10) !important; border-color:rgba(34,197,94,.55) !important }
.adm-btn-danger { background:var(--bg2) !important; color:var(--red) !important; border:1px solid rgba(239,68,68,.55) !important }
.adm-btn-danger:hover { background:var(--red-light) !important; border-color:#ef4444 !important }
.adm-btn.sm, .adm-btn-ghost.sm, .adm-btn-success.sm, .adm-btn-ghost-success.sm, .adm-btn-danger.sm { height:28px; padding:0 12px; font-size:12.5px }
/* Square / icon-only variant — gelijk aan trash (28x28) */
.adm-btn.square, .adm-btn-ghost.square, .adm-btn-success.square, .adm-btn-danger.square {
  width:28px; padding:0;
}
.adm-btn.square svg, .adm-btn-ghost.square svg, .adm-btn-success.square svg, .adm-btn-danger.square svg { width:18px !important; height:18px !important; stroke-width:2.6 !important }
.adm-btn svg, .adm-btn-ghost svg, .adm-btn-success svg, .adm-btn-ghost-success svg, .adm-btn-danger svg {
  width:14px; height:14px; stroke-width:1.8;
}

/* === LEGACY .btn FORCE-MATCH (admin/superadmin) ===
   Veel oudere pagina's gebruiken .btn .btn-ghost .btn-primary .btn-sm naast
   .adm-btn*. In (super)admin context dwingen we ALLE knoppen naar dezelfde
   28px hoogte zodat een rij "Verversen / CSV / Nieuwe offerte" uniform staat. */
body[data-app="admin"] .btn,
body[data-app="admin"] .btn-ghost,
body[data-app="admin"] .btn-primary,
body[data-app="admin"] .btn-sec {
  height:28px; padding:0 12px;
  border-radius:8px;
  font-family:inherit; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  box-sizing:border-box; line-height:1; white-space:nowrap;
  border:1px solid transparent;
}
body[data-app="admin"] .btn-sm,
body[data-app="admin"] .btn.btn-sm {
  height:28px !important; min-height:28px !important;
  padding:0 12px !important; font-size:12.5px !important;
  line-height:1 !important;
  border-radius:8px !important;
}
body[data-app="admin"] .btn svg,
body[data-app="admin"] .btn-ghost svg,
body[data-app="admin"] .btn-primary svg { width:14px; height:14px; stroke-width:1.8; margin:0 }

/* === VRAGENLIJST KAART — geen witruimte onder Bewerken-bar (Image #286) ===
   Grid stretcht cards; .vl-kaart wordt flex-kolom zodat content groeit en
   button-bar onderaan plakt. */
body[data-app="admin"] .vl-kaart {
  display:flex !important; flex-direction:column !important;
}
body[data-app="admin"] .vl-kaart > div:first-child { flex:1 1 auto }
body[data-app="admin"] .vl-kaart > div:last-child { margin-top:auto }

/* === COUNT PILL ===
   Centrale pill (28px hoog) zodat 'm gelijk staat aan .adm-btn 28px.
   Override legacy .sectie-hoofd .count (beheer.css zet !important). */
.adm-pill,
body[data-app="admin"] .sectie-hoofd .count,
body[data-app="admin"] .count {
  display:inline-flex !important; align-items:center !important;
  height:28px !important; padding:0 12px !important;
  border-radius:999px !important;
  background:var(--bg3) !important; color:var(--text2) !important;
  font-size:12.5px !important; font-weight:600 !important;
  border:1px solid var(--border) !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

/* === ROW-ICON BUTTONS (edit / delete) ===
   Compact icon-only knoppen voor actie-cellen — pencil + trash.
 Beide hebben dezelfde subtiele border-by-default (Image #261).
 Hover: geen grijze achtergrond (Image #271), alleen border/kleur shift. */
.adm-icon-btn {
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  background:transparent;color:var(--text3);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;font-family:inherit;padding:0;
  box-sizing:border-box;
  transition:background .15s, border-color .15s, color .15s;
}
.adm-icon-btn svg { width:14px; height:14px; stroke-width:1.8 }
.adm-icon-btn:hover { color:var(--text1); border-color:var(--border2) }
.adm-icon-btn.danger { color:var(--text3); border-color:#e2e8f0 }
.adm-icon-btn.danger:hover { color:var(--red); border-color:rgba(239,68,68,.32) }
.adm-icon-btn:focus-visible { outline:2px solid var(--p,#1a6bdc); outline-offset:1px }
.adm-icon-btn[disabled] { opacity:.4; cursor:not-allowed }

/* Container voor rij-actie-knoppen (zorgt voor uniforme gap) */
.adm-row-actions {
  display:inline-flex;align-items:center;gap:4px;
}

/* Legacy .adm-x-row alias → re-style als compact trash-icon
   (oudere HTML wordt automatisch meegerend zonder breaking change) */
.adm-x-row {
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  background:transparent;color:var(--text3);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;font-family:inherit;padding:0;
  box-sizing:border-box;
  transition:background .15s, border-color .15s, color .15s;
}
.adm-x-row:hover { color:var(--red); border-color:rgba(239,68,68,.32) }
.adm-x-row svg { width:14px; height:14px; stroke-width:1.8 }

/* === ROW-DELETE × ===
   Klein subtiel kruisje voor row-level delete (tarief-rij, sub-item).
   Verschil met .adm-x-row (compact trash) en .adm-icon-btn.danger (block-delete):
   geen border, 22×22, ×-svg ipv trash. Hover rood. */
.adm-row-x {
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  background:transparent;color:var(--text3);
  border:none;
  border-radius:5px;
  cursor:pointer;font-family:inherit;padding:0;
  box-sizing:border-box;
  transition:background .15s, color .15s;
}
.adm-row-x:hover { color:var(--red); background:rgba(239,68,68,.10) }
.adm-row-x svg { width:13px; height:13px }
html[data-theme="dark"] .adm-row-x:hover { background:rgba(239,68,68,.14) }

/* === SEARCH INPUT + DROPDOWN ===
   Zelfde visual als dossiers.html .filterbar (vorio-base.css):
   - .adm-input.search → vergrootglas-icoon links
   - .adm-select → chevron rechts
   Hoogte 32px zodat het direct naast .adm-btn (28px) leesbaar past. */
.adm-input, .adm-select {
  height:32px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:inherit;font-size:12.5px;
 color:#1e293b;background:var(--bg2);
  outline:none;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
  min-width:200px;
}
.adm-input:focus, .adm-select:focus {
 border-color:var(--p,#1a6bdc);
 box-shadow:0 0 0 3px color-mix(in srgb, var(--p,#1a6bdc) 12%, transparent);
}
/* Admin-context: .filterbar zonder overrides — laat vorio-base.css regelen
   (zelfde rendering als dossiers.html, geen specificiteit-strijd) */

/* === DANGER ZONE === */
.adm-danger-zone {
  background:var(--red-light);
  border:1.5px solid var(--red-border);
 border-left:4px solid #dc2626;
  border-radius:10px;
  padding:16px 20px;
  margin-top:24px;
}
.adm-danger-zone h3 { color:var(--red); font-size:14px; font-weight:700; margin:0 0 6px; letter-spacing:-.01em }
.adm-danger-zone p { color:var(--red-text); font-size:12.5px; margin:0 0 12px; line-height:1.5 }
.adm-danger-zone .adm-btn-danger { background:#dc2626; color:#fff; border-color:var(--red) }
.adm-danger-zone .adm-btn-danger:hover { background:var(--red); border-color:var(--red) }

/* === AI LOGBOEK MARKDOWN RENDER (compact) ===
 Compacte fonts zodat een log-entry in 1 oogopslag leesbaar is (Image #271). */
.adm-md { font-size:12.5px; color:var(--text1); line-height:1.5 }
.adm-md h1 { font-size:14px; font-weight:700; margin:12px 0 5px; letter-spacing:-.01em }
.adm-md h2 { font-size:13px; font-weight:700; margin:10px 0 4px }
.adm-md h3 { font-size:12.5px; font-weight:600; margin:8px 0 3px }
.adm-md p { margin:0 0 6px }
.adm-md ul, .adm-md ol { margin:0 0 8px; padding-left:18px }
.adm-md li { margin-bottom:2px }
.adm-md strong { font-weight:700; color:var(--text1) }
.adm-md em { font-style:italic }
.adm-md code { background:var(--bg4); padding:1.5px 5px; border-radius:4px; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.88em; color:var(--text1) }
.adm-md pre { background:#0f172a; color:#e2e8f0; padding:9px 11px; border-radius:7px; overflow-x:auto; margin:6px 0; font-size:11px }
.adm-md pre code { background:none; padding:0; color:inherit }
.adm-md hr { border:0; border-top:1px solid #e2e8f0; margin:8px 0 }
.adm-md blockquote { border-left:3px solid #cbd5e1; padding:3px 10px; color:var(--text2); margin:6px 0; font-size:12px }

/* === TOOLBAR STRIP (page header right-side) ===
   Centrale class voor "[ aantal pill ] [ btn ] [ btn ] [ primary ]" rij.
   Zorgt dat alle modules dezelfde knop-hoogte (28px) + gap krijgen. */
.adm-toolbar {
  display:inline-flex; align-items:center; gap:8px;
  flex-wrap:wrap;
}

/* === PORTAAL LINK (superadmin sidebar) === */
.adm-portaal-link {
  display:block; padding:9px 12px;
  font-size:13px; color:rgba(255,255,255,.7);
  text-decoration:none; border-radius:6px;
  transition:background .15s, color .15s;
}
.adm-portaal-link:hover { background:rgba(255,255,255,.08); color:#fff }

/*    Versie 1.3 (sectie-collapse)
   Sidebar collapse per-categorie (zoals portaal.php) ipv globale collapse.
   .nav-section (admin.php) en .sb-sec (superadmin) zijn klikbaar.
   Bij toggle krijgt de label-div .collapsed; volgende siblings tot volgende
   label worden via JS .hidden gemaakt. Persist in localStorage.
 */

/* === SECTIE-LABEL ALS KLIKBARE KNOP === */
/* Stijl zoals portaal.css .sb-label: kleine dot ervoor (collapsed = lichter) */
body[data-app="admin"] .nav-section,
body[data-app="admin"] .sb-sec {
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  user-select:none;
  transition:color .15s;
}
body[data-app="admin"] .nav-section:hover,
body[data-app="admin"] .sb-sec:hover { color:rgba(255,255,255,.85) }

body[data-app="admin"] .nav-section::before,
body[data-app="admin"] .sb-sec::before {
  content:"";
  width:3px;height:3px;
  border-radius:50%;
  background:currentColor;
  opacity:.8;
  display:inline-block;
  flex-shrink:0;
  transition:opacity .18s;
}
body[data-app="admin"] .nav-section.collapsed::before,
body[data-app="admin"] .sb-sec.collapsed::before { opacity:.35 }

/* Sub-groepen (zoals navSubOffertes) verbergen wanneer parent-sectie ingeklapt */
body[data-app="admin"] .nav-item.sec-hidden,
body[data-app="admin"] .sb-link.sec-hidden,
body[data-app="admin"] .nav-sub-groep.sec-hidden { display:none !important }

/* Sidebar header met toggle */
.adm-sb-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px 0 0;
}

/* ── DARK MODE overrides ── */
html[data-theme="dark"] .adm-btn-ghost{background:var(--bg3)!important;color:var(--text2)!important;border-color:var(--border)!important}
html[data-theme="dark"] .adm-btn-ghost:hover{background:var(--bg4)!important;border-color:var(--border2)!important}
html[data-theme="dark"] .adm-btn-danger{background:var(--bg2)!important;color:var(--red)!important;border-color:rgba(239,68,68,.55)!important}
html[data-theme="dark"] .adm-btn-danger:hover{background:rgba(239,68,68,.14)!important;border-color:var(--red)!important}
html[data-theme="dark"] .adm-icon-btn{color:var(--text3)}
html[data-theme="dark"] .adm-icon-btn:hover{color:var(--text1);border-color:var(--border2)}
html[data-theme="dark"] .adm-icon-btn.danger{color:var(--text3);border-color:var(--border)}
html[data-theme="dark"] .adm-icon-btn.danger:hover{color:var(--red);border-color:rgba(239,68,68,.32)}
html[data-theme="dark"] .adm-x-row:hover{color:var(--red);border-color:rgba(239,68,68,.32)}
html[data-theme="dark"] .adm-danger-zone{background:rgba(239,68,68,.10)}
html[data-theme="dark"] .adm-danger-zone h3{color:#ef8276}

/* ── Huisstijl-tab dark mode (aanhef-cards) ── */
html[data-theme="dark"] .aanhef-opt{background:var(--bg3,#1e293b) !important;border-color:var(--border,#334155) !important;color:var(--text1,#e2e8f0) !important}
html[data-theme="dark"] .aanhef-opt[data-active="1"]{background:rgba(26,107,220,.18) !important;border-color:#1a6bdc !important}
html[data-theme="dark"] .aanhef-opt *{color:var(--text1,#e2e8f0) !important}
html[data-theme="dark"] .aanhef-opt small,
html[data-theme="dark"] .aanhef-opt .hint,
html[data-theme="dark"] .aanhef-opt em{color:var(--text3,#94a3b8) !important}
html[data-theme="dark"] .aanhef-opt input[type=radio]{accent-color:#1a6bdc}
/* color picker swatch zichtbaar in dark */
html[data-theme="dark"] input[type=color]{border-color:var(--border,#334155) !important;background:var(--bg3,#1e293b) !important}

html[data-theme="dark"] .adm-btn-success{background:#16a34a;color:#fff}
html[data-theme="dark"] .adm-btn-success:hover{background:#15803d}

/* ── Factuur regel-builder (vf-*) */
.vf-form{display:flex;flex-direction:column;gap:14px}
.vf-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.vf-meta .field{flex:0 0 auto;margin:0}
.vf-field-periode{min-width:230px}
.vf-field-status{min-width:170px}
.vf-periode-grp{display:flex;gap:6px}
.vf-periode-grp select{padding:7px 28px 7px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;background:var(--bg2,#fff);color:var(--text1,#0f172a);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:10px;cursor:pointer}
.vf-periode-grp .vf-periode-maand{flex:1 1 130px;min-width:120px}
.vf-periode-grp .vf-periode-jaar{flex:0 0 90px}
html[data-theme="dark"] .vf-periode-grp select{background-color:var(--bg4,#0f172a);border-color:var(--border,#334155);color:var(--text1,#e2e8f0);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
.vf-rows{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg2,#fff)}
.vf-row-head,.vf-row{display:grid;grid-template-columns:minmax(0,2.2fr) 1.0fr .65fr .8fr .9fr .75fr 1fr 36px;gap:10px;align-items:center;padding:10px 14px}
.vf-row-head{background:var(--bg3,#f6f8fb);font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);padding-top:9px;padding-bottom:9px}
.vf-row{border-bottom:1px solid var(--border);position:relative;flex-wrap:wrap}
.vf-row:last-child{border-bottom:0}
.vf-row:hover{background:var(--row-hover)}
.vf-row input[type=text],.vf-row input[type=number],.vf-row select{height:34px;padding:0 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;background:var(--bg2,#fff);color:var(--text1,#0f172a);min-width:0;width:100%;box-sizing:border-box;line-height:34px;font-family:inherit}
.vf-row select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:26px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 9px center;background-size:10px 10px;cursor:pointer}
html[data-theme="dark"] .vf-row select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
.vf-row input:focus,.vf-row select:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--p-soft,rgba(26,107,220,.12))}
.vf-row .vf-totaal{font-weight:600;color:var(--text1,#0f172a);text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.vf-row .vf-row-spacer{display:block}
.vf-row[data-row="hoofd"] .vf-row-spacer{visibility:hidden}
.vf-row .vf-del{justify-self:end}
.vf-row .vf-kort-input{text-align:center;font-variant-numeric:tabular-nums}
.vf-add-row{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:none;color:var(--p);border:1px dashed var(--p-line,rgba(26,107,220,.35));border-radius:8px;padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
.vf-add-row:hover{background:var(--p-soft,rgba(26,107,220,.06));border-color:var(--p)}
.vf-add-row svg{width:14px;height:14px}
.vf-totaals{display:flex;flex-direction:column;align-self:flex-end;min-width:280px;gap:4px;padding:14px 16px;background:var(--bg3,#f6f8fb);border:1px solid var(--border);border-radius:10px}
.vf-tot-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text2,#475569)}
.vf-tot-row strong{font-variant-numeric:tabular-nums;color:var(--text1,#0f172a)}
.vf-tot-row.sub{font-size:11.5px;color:var(--text3)}
.vf-tot-row.total{border-top:1.5px solid var(--border);padding-top:6px;margin-top:4px;font-size:14px;font-weight:700;color:var(--text1,#0f172a)}
.vf-tot-row.total strong{color:var(--p);font-size:15px}
.vf-submit{display:flex;justify-content:flex-end}

@media (max-width:780px){
  .vf-row-head{display:none}
  .vf-row{grid-template-columns:1fr 1fr;gap:8px}
  .vf-row .vf-omschr{grid-column:1 / -1}
  .vf-row .vf-totaal{grid-column:1 / -1;text-align:right;border-top:1px dashed var(--border);padding-top:6px}
  .vf-row .vf-del{position:absolute;top:6px;right:6px}
  .vf-totaals{align-self:stretch}
}

/* dark mode */
html[data-theme="dark"] .vf-rows{background:var(--bg3,#1e293b)}
html[data-theme="dark"] .vf-row-head{background:rgba(255,255,255,.02);color:var(--text3)}
html[data-theme="dark"] .vf-row input,html[data-theme="dark"] .vf-row select{background:var(--bg4,#0f172a);border-color:var(--border,#334155);color:var(--text1,#e2e8f0)}
html[data-theme="dark"] .vf-totaals{background:rgba(255,255,255,.02);border-color:var(--border,#334155)}
html[data-theme="dark"] .vf-add-row{border-color:rgba(95,161,240,.35);color:#5fa1f0}
html[data-theme="dark"] .vf-add-row:hover{background:rgba(95,161,240,.08)}

/* ── Offertes (off-*) */
.off-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.off-filters{display:flex;gap:6px;flex-wrap:wrap}
.off-filter-chip{padding:5px 12px;border:1px solid var(--border);border-radius:99px;background:var(--bg2,#fff);font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;gap:5px}
.off-filter-chip:hover{border-color:var(--border2);color:var(--text1)}
.off-filter-chip.active{background:var(--p);color:#fff;border-color:var(--p)}
.off-filter-chip .cnt{opacity:.7;font-size:11px}
.off-search{flex:1;min-width:200px;max-width:340px;position:relative}
.off-search input{width:100%;padding:7px 12px 7px 32px;border:1px solid var(--border);border-radius:8px;background:var(--bg2,#fff);font-size:13px;color:var(--text1,#0f172a)}
.off-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text3)}

/* Offerte-form: side-by-side form + preview */
.off-form-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.off-form-sections{display:flex;flex-direction:column;gap:14px}
.off-sec{background:var(--bg2,#fff);border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.off-sec-h{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.off-sec-h::after{content:"";flex:1;height:1px;background:var(--border)}
.off-sec-h .step{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--p-soft,rgba(26,107,220,.10));color:var(--p);font-size:11px;font-weight:700}

/* Plan-cards */
.off-plans{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.off-plan-card{border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;background:var(--bg2,#fff);transition:all .12s;position:relative}
.off-plan-card:hover{border-color:var(--border2)}
.off-plan-card.active{border-color:var(--p);background:var(--p-soft,rgba(26,107,220,.06));box-shadow:0 0 0 3px var(--p-soft,rgba(26,107,220,.10))}
.off-plan-card.active::after{content:"✓";position:absolute;top:8px;right:10px;width:18px;height:18px;background:var(--p);color:#fff;border-radius:50%;font-size:11px;line-height:18px;text-align:center;font-weight:700}
.off-plan-card .nm{font-weight:700;font-size:13px;color:var(--text1,#0f172a);margin-bottom:2px;text-transform:capitalize}
.off-plan-card .pr{font-size:18px;font-weight:700;color:var(--p);font-variant-numeric:tabular-nums}
.off-plan-card .pr small{font-size:10px;font-weight:500;color:var(--text3);margin-left:2px}
.off-plan-card .ft{font-size:10.5px;color:var(--text3);margin-top:4px;line-height:1.4}

/* Chip-toggles voor korting / proefperiode */
.off-chips{display:flex;gap:5px;flex-wrap:wrap}
.off-chip{padding:6px 12px;border:1px solid var(--border);border-radius:99px;background:var(--bg2,#fff);font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .12s;min-width:42px;text-align:center}
.off-chip:hover{border-color:var(--border2);color:var(--text1)}
.off-chip.active{background:var(--p);color:#fff;border-color:var(--p);font-weight:600}
.off-chip-input{display:inline-flex;align-items:center;gap:4px;padding:0 8px;border:1px dashed var(--border);border-radius:99px;background:var(--bg2,#fff);font-size:12px;color:var(--text3)}
.off-chip-input input{width:46px;border:none;background:none;padding:5px 0;font-size:12px;text-align:right;color:var(--text1,#0f172a);font-variant-numeric:tabular-nums}
.off-chip-input input:focus{outline:none}

/* Module-cards */
.off-mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.off_mod_lbl{display:flex !important;align-items:center;gap:9px;padding:9px 12px;background:var(--bg3,#f6f8fb);border:1.5px solid var(--border);border-radius:8px;font-size:12.5px !important;cursor:pointer;text-transform:none !important;letter-spacing:0 !important;font-weight:500 !important;transition:all .12s}
.off_mod_lbl:hover{border-color:var(--border2)}
.off_mod_lbl input[type=checkbox]{accent-color:var(--p)}
.off_mod_lbl.checked{background:var(--p-soft,rgba(26,107,220,.06));border-color:var(--p);color:var(--text1,#0f172a)}
.off-mod-toggle{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none;margin-bottom:6px}
.off-mod-toggle svg{width:11px;height:11px;transition:transform .15s}
.off-mod-toggle.open svg{transform:rotate(90deg)}

/* Live preview */
.off-preview{position:sticky;top:20px;background:var(--bg2,#fff);border:1px solid var(--border);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:10px}
.off-preview-h{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px}
.off-preview-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--text2)}
.off-preview-row strong{font-variant-numeric:tabular-nums;color:var(--text1,#0f172a)}
.off-preview-row.sub{font-size:11.5px;color:var(--text3)}
.off-preview-row.total{border-top:1.5px solid var(--border);padding-top:8px;margin-top:4px;font-size:14px;font-weight:700;color:var(--text1,#0f172a)}
.off-preview-row.total strong{color:var(--p);font-size:16px}
.off-preview-row.discount strong{color:var(--green,#16a34a)}
.off-preview-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.off-preview-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--bg3,#f6f8fb);color:var(--text2)}
.off-preview-tag.green{background:rgba(22,163,74,.12);color:var(--green,#16a34a)}
.off-preview-tag.blue{background:var(--p-soft,rgba(26,107,220,.10));color:var(--p)}

/* Status chips in tabel */
.off-row{position:relative}
.off-row td:first-child{border-left:3px solid transparent}
.off-row.st-concept td:first-child{border-left-color:#94a3b8}
.off-row.st-verzonden td:first-child{border-left-color:var(--p)}
.off-row.st-akkoord td:first-child{border-left-color:var(--green,#16a34a)}
.off-row.st-afgewezen td:first-child{border-left-color:var(--red,#ef4444)}
.off-row.st-verlopen td:first-child{border-left-color:#f59e0b}
.off-row.expiring td{background:rgba(245,158,11,.04)}
.off-status-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .12s}
.off-status-chip:hover{filter:brightness(.95)}
.off-status-chip .dot{width:6px;height:6px;border-radius:50%}
.off-status-chip.st-concept{background:#f1f5f9;color:#475569}
.off-status-chip.st-concept .dot{background:#94a3b8}
.off-status-chip.st-verzonden{background:var(--p-soft,rgba(26,107,220,.10));color:var(--p)}
.off-status-chip.st-verzonden .dot{background:var(--p)}
.off-status-chip.st-akkoord{background:rgba(22,163,74,.10);color:var(--green,#16a34a)}
.off-status-chip.st-akkoord .dot{background:var(--green,#16a34a)}
.off-status-chip.st-afgewezen{background:rgba(239,68,68,.10);color:var(--red,#ef4444)}
.off-status-chip.st-afgewezen .dot{background:var(--red,#ef4444)}
.off-status-chip.st-verlopen{background:rgba(245,158,11,.10);color:#d97706}
.off-status-chip.st-verlopen .dot{background:#f59e0b}
.off-status-chip.st-verstuurd{background:rgba(245,158,11,.10);color:#d97706}
.off-status-chip.st-verstuurd .dot{background:#f59e0b}
.off-status-chip.st-betaald{background:rgba(22,163,74,.10);color:var(--green,#16a34a)}
.off-status-chip.st-betaald .dot{background:var(--green,#16a34a)}
.adm-cb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--border);border-radius:5px;background:var(--bg2,#fff);cursor:pointer;display:inline-block;vertical-align:middle;position:relative;flex-shrink:0;transition:all .12s;margin:0}
.adm-cb:hover{border-color:var(--p)}
.adm-cb:checked{background:var(--p);border-color:var(--p)}
.adm-cb:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.adm-cb:focus{outline:none;box-shadow:0 0 0 3px var(--p-soft,rgba(26,107,220,.18))}

/* Status popover */
.off-status-pop{position:absolute;background:var(--bg2,#fff);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:4px;min-width:140px;z-index:100;display:flex;flex-direction:column;gap:2px}
.off-status-pop button{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:12px;font-weight:500;background:none;border:none;border-radius:5px;cursor:pointer;text-align:left;color:var(--text2)}
.off-status-pop button:hover{background:var(--bg3,#f6f8fb);color:var(--text1)}
.off-status-pop .dot{width:7px;height:7px;border-radius:50%}

/* Empty state + footer summary */
.off-empty{padding:48px 20px;text-align:center;color:var(--text3)}
.off-empty svg{width:44px;height:44px;margin-bottom:10px;opacity:.4}
.off-empty .h{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:4px}
.off-empty .p{font-size:12px;margin-bottom:14px}
.off-footer{padding:12px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--text3);display:flex;justify-content:space-between;align-items:center}
.off-footer strong{color:var(--text1,#0f172a);font-variant-numeric:tabular-nums}

/* Geldig tot relatieve tijd */
.off-geldig{display:flex;flex-direction:column;line-height:1.3}
.off-geldig .rel{font-size:10.5px;color:var(--text3)}
.off-geldig.expiring .rel{color:#d97706;font-weight:600}
.off-geldig.expired{color:var(--text3);text-decoration:line-through}
.off-geldig.expired .rel{color:var(--red,#ef4444);font-weight:600;text-decoration:none}

@media (max-width:980px){
  .off-form-wrap{grid-template-columns:1fr}
  .off-preview{position:static}
  .off-plans{grid-template-columns:1fr}
  .off-mod-grid{grid-template-columns:1fr}
}

/* Dark mode */
html[data-theme="dark"] .off-sec,html[data-theme="dark"] .off-plan-card,html[data-theme="dark"] .off-chip,html[data-theme="dark"] .off-preview,html[data-theme="dark"] .off-search input,html[data-theme="dark"] .off-filter-chip{background:var(--bg3,#1e293b);border-color:var(--border,#334155);color:var(--text1,#e2e8f0)}
html[data-theme="dark"] .off-chip{color:var(--text2)}
html[data-theme="dark"] .off-plan-card.active{background:rgba(95,161,240,.10);border-color:#5fa1f0;box-shadow:0 0 0 3px rgba(95,161,240,.10)}
html[data-theme="dark"] .off-plan-card.active::after{background:#5fa1f0}
html[data-theme="dark"] .off-plan-card .pr,html[data-theme="dark"] .off-preview-row.total strong,html[data-theme="dark"] .off-preview-tag.blue{color:#5fa1f0}
html[data-theme="dark"] .off-chip.active,html[data-theme="dark"] .off-filter-chip.active{background:#5fa1f0;color:#0f172a;border-color:#5fa1f0}
html[data-theme="dark"] .off_mod_lbl{background:var(--bg4,#0f172a) !important;border-color:var(--border,#334155) !important;color:var(--text1,#e2e8f0) !important}
html[data-theme="dark"] .off_mod_lbl.checked{background:rgba(95,161,240,.10) !important;border-color:#5fa1f0 !important}
html[data-theme="dark"] .off-status-pop{background:var(--bg3,#1e293b);border-color:var(--border,#334155)}
html[data-theme="dark"] .off-status-pop button{color:var(--text2)}
html[data-theme="dark"] .off-status-pop button:hover{background:var(--bg4,#0f172a)}
html[data-theme="dark"] .off-status-chip.st-concept{background:rgba(95,161,240,.14);color:#7aaef0;border-color:rgba(95,161,240,.28)}
html[data-theme="dark"] .off-status-chip.st-concept .dot{background:#7aaef0}
html[data-theme="dark"] .off-status-chip.st-verstuurd{background:rgba(245,158,11,.16);color:#fbbf24;border-color:rgba(245,158,11,.32)}
html[data-theme="dark"] .off-status-chip.st-betaald{background:rgba(34,197,94,.16);color:#4ade80;border-color:rgba(34,197,94,.32)}
html[data-theme="dark"] .adm-cb{background:var(--bg3,#1e293b);border-color:var(--border,#334155)}
html[data-theme="dark"] .adm-cb:checked{background:var(--p,#5fa1f0);border-color:var(--p,#5fa1f0)}

/* ── Facturering toolbar + bulk + sortable */
.fact-stat{display:flex;flex-direction:column;justify-content:center;gap:2px;transition:transform .12s, box-shadow .12s}
.fact-stat:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,39,68,.08)}
.fact-stat-sub{font-size:12px;color:var(--text3);font-weight:500;font-variant-numeric:tabular-nums;margin-top:-2px}
.fact-genereer .card-title{margin-bottom:14px}
.fact-warn{display:flex;align-items:center;gap:8px;padding:7px 12px;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.25);border-radius:8px;font-size:12px;color:#92400e;line-height:1.4;max-width:520px}
html[data-theme="dark"] .fact-warn{color:#fbbf24;background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.30)}

.fact-toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg2,#fff)}
html[data-theme="dark"] .fact-toolbar{background:var(--bg3,#1e293b)}
.fact-toolbar .off-search{flex:1;max-width:320px}

.fct-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.fct-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;text-decoration:none;color:var(--text2);background:var(--bg3,#f6f8fb);border:1px solid transparent;cursor:pointer;transition:all .12s;letter-spacing:.2px;line-height:1}
.fct-tab:hover{color:var(--text1)}
.fct-tab.active{color:var(--p);background:var(--p-soft,rgba(26,107,220,.10));border-color:var(--p-line,rgba(26,107,220,.32))}
.fct-tab.active.verstuurd{color:#d97706;background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.32)}
.fct-tab.active.betaald{color:var(--green,#16a34a);background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.32)}
html[data-theme="dark"] .fct-tab{background:rgba(255,255,255,.04);color:var(--text2)}
html[data-theme="dark"] .fct-tab:hover{background:rgba(255,255,255,.06);color:var(--text1)}
html[data-theme="dark"] .fct-tab.active{color:#7aaef0;background:rgba(95,161,240,.14);border-color:rgba(95,161,240,.32)}
html[data-theme="dark"] .fct-tab.active.verstuurd{color:#fbbf24;background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.32)}
html[data-theme="dark"] .fct-tab.active.betaald{color:#4ade80;background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.32)}

.fct-bulk-bar{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--border);background:var(--bg3,#f6f8fb);flex-wrap:wrap}
html[data-theme="dark"] .fct-bulk-bar{background:rgba(255,255,255,.02)}
.fct-bulk-sel{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer;color:var(--text2)}
.fct-bulk-sel input{accent-color:var(--p)}
.fct-bulk-actions{display:none;align-items:center;gap:8px;margin-left:auto}
.fct-bulk-count{font-size:12px;color:var(--p);font-weight:600;padding:3px 10px;background:var(--p-soft,rgba(26,107,220,.10));border-radius:99px}
.fct-bulk-count strong{font-weight:700}

.fct-tbl{margin:0}
.fct-tbl th.sortable{cursor:pointer;user-select:none;position:relative}
.fct-tbl th.sortable:hover{color:var(--p)}
.fct-tbl th.sortable::after{content:"";display:inline-block;margin-left:4px;border:3px solid transparent;border-bottom-color:var(--text3);vertical-align:middle;opacity:.4}
.fct-tbl th.sort-asc::after{border-bottom-color:var(--p);border-top:none;opacity:1}
.fct-tbl th.sort-desc::after{border-top-color:var(--p);border-bottom:none;opacity:1}
.fct-row td{vertical-align:middle}
.fct-row.fct-late td{background:rgba(239,68,68,.04)}
.fct-row:hover td{background:var(--row-hover)}
.fct-dp strong{font-weight:600}

/* ── Sidebar-layout v-side-* (Offertes/Facturering Variant B) ── */
.v-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.v-page-head h1{margin:0}

.v-side-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.v-side{display:flex;flex-direction:column;gap:2px}
.v-side-h{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;padding:0 12px 8px}
.v-side-link{display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;border-radius:8px;text-decoration:none;transition:background .12s,color .12s}
.v-side-link:hover{background:rgba(0,0,0,.03);color:var(--text1)}
.v-side-link.active{background:var(--p-soft,rgba(26,107,220,.08));color:var(--p);font-weight:600}
.v-side-link .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.v-side-link .cnt{margin-left:auto;font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}
.v-side-link.active .cnt{color:var(--p)}
.v-side-main{min-width:0}

/* Search field — geen border-color verandering bij hover/focus */
.v-search{position:relative}
.v-search input{width:100%;padding:9px 14px 9px 36px;border:1px solid var(--border);border-radius:9px;background:var(--bg2,#fff);color:var(--text1,#0f172a);font-size:13px;transition:background .12s;outline:none}
.v-search input::placeholder{color:var(--text3)}
.v-search input:hover,.v-search input:focus{border-color:var(--border);outline:none;box-shadow:none}
.v-search input:focus{background:var(--bg3,#f6f8fb)}
.v-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text3);pointer-events:none}

html[data-theme="dark"] .v-side-link:hover{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .v-side-link.active{background:rgba(95,161,240,.12);color:#5fa1f0}
html[data-theme="dark"] .v-side-link.active .cnt{color:#5fa1f0}
html[data-theme="dark"] .v-search input{background:var(--bg3,#1e293b);border-color:var(--border,#334155);color:var(--text1,#e2e8f0)}
html[data-theme="dark"] .v-search input:focus{background:var(--bg4,#0f172a)}

@media (max-width:880px){
  .v-side-grid{grid-template-columns:1fr;gap:14px}
  .v-side{flex-direction:row;flex-wrap:wrap;gap:6px}
  .v-side-h{display:none}
}

/* ── Info-zone (niet-destructief, gebruikt voor export/migratie blocks) ───── */
.adm-info-zone { background:#f0f7ff; border:1px solid #cfe1fb; border-radius:10px; padding:14px 18px; margin-top:18px }
.adm-info-zone h3 { color:#1a6bdc; font-size:14px; font-weight:700; margin:0 0 6px; letter-spacing:-.01em }
.adm-info-zone p { color:var(--text2); font-size:12.5px; margin:0 0 12px; line-height:1.5 }
html[data-theme="dark"] .adm-info-zone { background:rgba(26,107,220,.10); border-color:rgba(26,107,220,.30) }
html[data-theme="dark"] .adm-info-zone h3 { color:#7eb1ff }