/* Webnexus Offertes: huisstijl van webnexus.nl (donker marine, indigo, Plus Jakarta Sans + Inter). Fonts zijn lokaal. */

:root{
  --navy:#14162B; --navy-2:#1C1F38; --ink:#1C1F38; --bg:#F6F6FB; --card:#fff; --line:#E5E7F0;
  --muted:#6E7191; --soft:#9A9CB2; --primary:#6466E9; --primary-d:#5254d6; --primary-50:#F1F0FC; --primary-200:#C9CAF7;
  --ok:#059669; --ok-bg:#ecfdf5; --warn:#b45309; --warn-bg:#fffbeb; --bad:#dc2626; --bad-bg:#fef2f2;
  --radius:12px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.55; color:var(--ink); background:var(--bg); }
h1,h2,h3{ font-family:'Plus Jakarta Sans','Inter',sans-serif; letter-spacing:-.02em; line-height:1.15; margin:0; color:var(--ink); }
h1{ font-size:30px; font-weight:800; } h2{ font-size:20px; font-weight:800; } h3{ font-size:16px; font-weight:700; }
a{ color:var(--primary-d); }
p{ margin:0 0 .8rem; }
.muted{ color:var(--muted); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
svg.i{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 16px; }

/* ---------- header ---------- */
.site-header{ background:var(--navy); background-image:linear-gradient(180deg,#14162B,#191C38); color:#fff; position:sticky; top:0; z-index:20; }
.site-header .bar{ max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand img{ display:block; width:150px; height:auto; }
.brand .tag{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#A79FF3; margin-left:12px; padding-left:12px; border-left:1px solid #34385a; }
.main-nav{ display:flex; gap:4px; flex:1 1 auto; }
.main-nav a{ color:#C7C9DA; text-decoration:none; font-weight:500; padding:8px 13px; border-radius:9px; }
.main-nav a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.main-nav a[aria-current="page"]{ color:#fff; background:rgba(100,102,233,.28); }
.user-menu{ display:flex; align-items:center; gap:12px; font-size:13px; color:#C7C9DA; }
.nav-toggle{ display:none; margin-left:auto; background:none; border:1px solid #34385a; color:#fff; border-radius:9px; padding:8px 10px; cursor:pointer; }
@media(max-width:1180px){
  .site-header .bar{ flex-wrap:wrap; gap:10px 16px; padding:12px 16px; }
  .brand .tag{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .main-nav, .user-menu{ display:none; width:100%; }
  .site-header.open .main-nav{ display:flex; flex-direction:column; }
  .site-header.open .user-menu{ display:flex; justify-content:space-between; padding:6px 4px 4px; }
}

.who-short, .nav-short{ display:none; }
@media(min-width:1181px){ .who-mail, .nav-long{ display:none; } .who-short, .nav-short{ display:inline; } .main-nav{ gap:2px; } .main-nav a{ padding:8px 11px; } .site-header .bar{ gap:22px; } }

/* Tools-dropdown */
.nav-dd{ position:relative; }
.nav-dd-btn{ font:inherit; font-weight:500; color:#C7C9DA; background:none; border:0; cursor:pointer; padding:8px 11px; border-radius:9px; display:inline-flex; align-items:center; gap:6px; }
.nav-dd-btn:hover, .nav-dd-btn[aria-expanded="true"]{ color:#fff; background:rgba(255,255,255,.06); }
.nav-dd-btn[aria-current]{ color:#fff; background:rgba(100,102,233,.28); }
.nav-dd-btn .chev{ width:14px; height:14px; flex:0 0 14px; transition:transform .15s; }
.nav-dd-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.nav-dd-menu{ position:absolute; top:calc(100% + 8px); left:0; min-width:290px; background:#1C1F38; border:1px solid #34385a; border-radius:14px; padding:8px; box-shadow:0 18px 50px rgba(8,13,25,.5); z-index:30; display:grid; gap:2px; }
.nav-dd-menu[hidden]{ display:none; }
.nav-dd-menu a{ display:flex; flex-direction:column; gap:1px; padding:10px 12px; border-radius:9px; text-decoration:none; color:#fff; }
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible{ background:rgba(255,255,255,.08); outline:none; }
.nav-dd-menu a[aria-current="page"]{ background:rgba(100,102,233,.28); }
.nav-dd-menu .t{ font-weight:600; font-size:14.5px; }
.nav-dd-menu .d{ font-size:12.5px; color:#A9ACC4; }
@media(max-width:1180px){
  .nav-dd{ width:100%; }
  .nav-dd-btn{ width:100%; justify-content:space-between; padding:8px 13px; }
  .nav-dd-menu{ position:static; box-shadow:none; background:rgba(255,255,255,.04); margin-top:4px; min-width:0; }
}

/* ---------- layout ---------- */
.wrap{ max-width:1180px; margin:0 auto; padding:28px 24px 56px; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-head p{ margin:6px 0 0; color:var(--muted); }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:760px){ .grid-2{ grid-template-columns:1fr; } .wrap{ padding:20px 16px 48px; } h1{ font-size:25px; } }

/* ---------- knoppen ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:600; font-size:14px; line-height:1.2; padding:11px 18px; border-radius:10px; border:1px solid transparent; cursor:pointer; text-decoration:none; background:var(--primary); color:#fff; box-shadow:0 8px 20px rgba(100,102,233,.25); }
.btn:hover{ background:var(--primary-d); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.btn[disabled]{ opacity:.6; cursor:progress; }
.btn-secondary{ background:#fff; color:var(--ink); border-color:var(--line); box-shadow:none; }
.btn-secondary:hover{ background:var(--bg); }
.btn-ghost{ background:transparent; color:var(--primary-d); box-shadow:none; padding:8px 10px; }
.btn-ghost:hover{ background:var(--primary-50); }
.btn-danger{ background:#fff; color:var(--bad); border-color:#f5c2c2; box-shadow:none; }
.btn-danger:hover{ background:var(--bad-bg); }
.btn-sm{ padding:7px 11px; font-size:13px; }
.btn-block{ width:100%; }
.on-dark .btn-secondary{ background:rgba(255,255,255,.06); color:#fff; border-color:#34385a; }
.inline-form{ display:inline; margin:0; }

/* ---------- formulieren ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:600; font-size:13px; margin-bottom:6px; color:var(--ink); }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=url], .field select, .field textarea, .toolbar input[type=search], .toolbar select, .panel select, .panel input[type=text]{
  width:100%; font:inherit; font-size:15px; padding:11px 12px; border:1px solid #cfd2e3; border-radius:10px; background:#fff; color:var(--ink); }
.field textarea{ resize:vertical; }
.field .help{ font-size:12.5px; color:var(--muted); margin-top:5px; }
.field .err, .form-errors{ font-size:13px; color:var(--bad); margin-top:5px; }
.form-errors{ background:var(--bad-bg); border:1px solid #f5c2c2; border-radius:10px; padding:10px 12px; margin-bottom:16px; }
.field.check{ display:flex; gap:10px; align-items:flex-start; }
.field.check input{ margin-top:4px; flex:0 0 auto; }
.field.check label{ font-weight:400; font-size:13.5px; margin:0; color:var(--muted); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.radio-row{ display:flex; gap:10px; }
.radio-row label{ flex:1; border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:600; background:#fff; display:flex; gap:8px; align-items:center; margin:0; }
.radio-row input{ margin:0; }
.swatches{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.swatch{ width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; }
.swatch.active{ box-shadow:0 0 0 2px var(--ink); }
input[type=color]{ width:42px; height:34px; padding:2px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; }

/* ---------- meldingen ---------- */
.messages{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:8px; }
.messages li{ padding:11px 14px; border-radius:10px; border:1px solid var(--line); background:#fff; }
.messages li.success{ background:var(--ok-bg); border-color:#a7f3d0; color:#065f46; }
.messages li.error{ background:var(--bad-bg); border-color:#f5c2c2; color:#991b1b; }
.notice{ background:var(--primary-50); border:1px solid var(--primary-200); border-radius:12px; padding:14px 16px; margin-bottom:20px; display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.notice p{ margin:0; }

/* ---------- dashboard ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.stat .k{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-d); }
.stat .v{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:24px; letter-spacing:-.02em; margin-top:4px; }
.stat .s{ font-size:12.5px; color:var(--muted); }
@media(max-width:860px){ .stats{ grid-template-columns:1fr 1fr; } }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
.toolbar input[type=search]{ flex:1 1 240px; width:auto; }
.toolbar select{ width:auto; }
.table-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
table.data{ width:100%; border-collapse:collapse; }
table.data th{ text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:12px 14px; background:#FAFAFD; border-bottom:1px solid var(--line); }
table.data th a{ color:inherit; text-decoration:none; display:inline-flex; gap:5px; align-items:center; }
table.data td{ padding:13px 14px; border-bottom:1px solid #EEF0F7; vertical-align:middle; }
table.data tr:last-child td{ border-bottom:0; }
table.data td.num, table.data th.num{ text-align:right; white-space:nowrap; }
table.data td .title{ font-weight:600; }
.badge{ display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:99px; background:#eef0f7; color:#4b5070; }
.badge.concept{ background:#eef0f7; color:#4b5070; }
.badge.verstuurd{ background:#e0f2fe; color:#075985; }
.badge.geaccepteerd{ background:var(--ok-bg); color:#065f46; }
.badge.afgewezen{ background:var(--bad-bg); color:#991b1b; }
.row-actions{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.empty{ text-align:center; padding:48px 20px; }
.empty h2{ margin-bottom:8px; }
.pager{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:16px; }
@media(max-width:760px){
  table.data thead{ display:none; }
  table.data, table.data tbody, table.data tr, table.data td{ display:block; width:100%; }
  table.data tr{ padding:12px 14px; border-bottom:1px solid var(--line); }
  table.data td{ border:0; padding:3px 0; display:flex; justify-content:space-between; gap:12px; text-align:right; }
  table.data td::before{ content:attr(data-label); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:left; }
  table.data td.actions{ display:block; } table.data td.actions::before{ display:none; }
  .row-actions{ justify-content:flex-start; margin-top:6px; }
}

/* ---------- editor ---------- */
.editor-grid > *{ min-width:0; }
.editor-grid{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:22px; align-items:start; }
@media(max-width:960px){ .editor-grid{ grid-template-columns:minmax(0,1fr); } }
.panel{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; position:sticky; top:84px; }
@media(max-width:960px){ .panel{ position:static; } }
.panel section{ padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #EEF0F7; }
.panel section:last-child{ border-bottom:0; margin:0; padding:0; }
.panel .label{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--primary-d); margin-bottom:9px; }
.panel .stack{ display:grid; gap:8px; }
.switch-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-weight:600; font-size:14px; }
.switch{ position:relative; width:40px; height:23px; flex:0 0 auto; border-radius:99px; background:#d5d8e8; cursor:pointer; border:0; padding:0; transition:background .2s; }
.switch::before{ content:''; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.switch[aria-checked="true"]{ background:var(--primary); }
.switch[aria-checked="true"]::before{ transform:translateX(17px); }
.pct-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); }
.pct-row input{ width:72px !important; text-align:right; }
.canvas-scroll{ overflow-x:auto; padding:4px; }
.hint{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); background:var(--primary-50); border:1px solid var(--primary-200); padding:9px 13px; border-radius:10px; margin-bottom:14px; }
.save-state{ font-size:13px; min-height:20px; }
.save-state.ok{ color:var(--ok); } .save-state.bad{ color:var(--bad); } .save-state.dirty{ color:var(--warn); }
.save-bar{ display:none; }
@media(max-width:960px){
  .save-bar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:15; gap:10px; align-items:center; background:#fff; border-top:1px solid var(--line); padding:10px 16px; box-shadow:0 -6px 20px rgba(20,22,43,.08); }
  .save-bar .save-state{ flex:1; }
  .wrap.editor-wrap{ padding-bottom:90px; }
}

/* ---------- auth ---------- */
body.auth{ background:var(--navy); background-image:radial-gradient(1200px 500px at 70% -10%, rgba(100,102,233,.35), transparent), radial-gradient(900px 500px at -10% 110%, rgba(34,211,238,.12), transparent); min-height:100vh; }
.auth-wrap{ max-width:440px; margin:0 auto; padding:48px 20px; }
.auth-wrap .brand{ justify-content:center; margin-bottom:26px; }
.auth-wrap .brand img{ width:180px; }
.auth-card{ background:#fff; border-radius:18px; padding:28px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.auth-card h1{ font-size:24px; margin-bottom:6px; }
.auth-card .lead{ color:var(--muted); margin-bottom:20px; }
.auth-links{ margin-top:16px; font-size:14px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.grad{ background:linear-gradient(90deg,#818cf8,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- instellingen ---------- */
.settings-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }
@media(max-width:1000px){ .settings-grid{ grid-template-columns:minmax(0,1fr); } }
.settings-grid > *{ min-width:0; }
input[type=file]{ max-width:100%; }
.preview-card{ position:sticky; top:84px; }
@media(max-width:1000px){ .preview-card{ position:static; } }
.preview-scale{ overflow:hidden; }
.logo-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.logo-box{ width:120px; height:56px; border:1px dashed #cfd2e3; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff; overflow:hidden; }
.logo-box img{ max-width:100%; max-height:100%; object-fit:contain; }
.code-list{ display:grid; gap:6px; font-size:13px; }
.code-list code{ background:var(--primary-50); border-radius:6px; padding:2px 6px; font-size:12.5px; }

/* ---------- tabel: statusmenu en nummer ---------- */
table.data select{ font:inherit; font-size:13px; font-weight:600; padding:6px 28px 6px 10px; border:1px solid #cfd2e3; border-radius:8px; background-color:#fff; color:var(--ink); max-width:100%; }
table.data td[data-label="Nummer"]{ white-space:nowrap; }

/* ---------- popups (<dialog>), snelknoppen, kleurkiezer, layoutgalerij ---------- */
.field input[type=date], .field input[type=time], .field input[type=search], .dialog input[type=search]{ width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.dialog{ border:0; border-radius:18px; padding:22px; width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; box-shadow:0 24px 70px #14162B55; color:var(--ink); background:#fff; }
.dialog::backdrop{ background:rgba(20,22,43,.55); }
.dialog-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.dialog-x{ border:0; background:none; cursor:pointer; color:var(--muted); width:36px; height:36px; display:grid; place-items:center; padding:0; border-radius:9px; flex:0 0 36px; }
.dialog-x:hover, .dialog-x:focus-visible{ background:var(--primary-50); color:var(--ink); }
.dialog-x svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.dialog-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px; }
.subform{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px 14px 0; margin-bottom:16px; }
.subform[hidden], [hidden]{ display:none !important; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:-6px 0 16px; }
.panel .chips{ margin:0; }
.chips-label{ font-size:12.5px; color:var(--muted); margin-right:2px; }
.chip{ font:inherit; font-size:13px; font-weight:600; padding:6px 12px; border:1px solid var(--primary-200); background:var(--primary-50); color:var(--primary-d); border-radius:999px; cursor:pointer; }
.chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.chip{ text-decoration:none; display:inline-block; }
.chip:hover, .chip:focus-visible{ background:var(--primary); border-color:var(--primary); color:#fff; }
.add-row-bar{ display:flex; flex-wrap:wrap; gap:4px 10px; }
.line-picker{ list-style:none; margin:0 0 14px; padding:0; max-height:46vh; overflow:auto; border:1px solid var(--line); border-radius:12px; }
.line-picker:empty{ display:none; }
.line-picker li + li{ border-top:1px solid var(--line); }
.line-picker button{ width:100%; text-align:left; font:inherit; background:#fff; border:0; padding:11px 14px; cursor:pointer; display:flex; justify-content:space-between; gap:14px; align-items:baseline; color:var(--ink); }
.line-picker button:hover, .line-picker button:focus-visible{ background:var(--primary-50); }
.line-picker .lp-desc{ font-weight:600; overflow-wrap:anywhere; }
.line-picker .lp-meta{ color:var(--muted); white-space:nowrap; font-size:13px; }

.color-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.color-row input[type=color]{ width:52px; height:44px; flex:0 0 52px; }
.hex-input{ flex:0 1 190px; }
.hex-input input{ width:100%; font:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); text-transform:lowercase; }
.hex-input input.invalid{ border-color:var(--bad); background:var(--bad-bg); }
.color-sample{ width:44px; height:44px; border-radius:10px; border:1px solid var(--line); flex:0 0 44px; }
.swatches{ margin-bottom:8px; }
.warn-note{ font-size:13px; color:var(--warn); background:var(--warn-bg); border:1px solid #f3d9a4; border-radius:10px; padding:8px 12px; margin-top:8px; }

.layout-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.layout-card{ display:flex; flex-direction:column; gap:4px; border:2px solid var(--line); border-radius:12px; padding:8px; background:#fff; cursor:pointer; margin:0; font-weight:400; position:relative; }
.layout-card:hover{ border-color:var(--primary-200); }
.layout-card input{ position:absolute; opacity:0; pointer-events:none; }
.layout-card:has(input:checked){ border-color:var(--primary); background:var(--primary-50); box-shadow:0 0 0 3px #6466e933; }
.layout-card:has(input:focus-visible){ outline:2px solid var(--primary); outline-offset:2px; }
.layout-card .thumb{ display:block; aspect-ratio:794/1122; overflow:hidden; border-radius:6px; background:#fff; border:1px solid var(--line); position:relative; }
.layout-card .thumb-inner{ display:block; width:794px; transform-origin:0 0; transform:scale(var(--s, .17)); pointer-events:none; }
.layout-card .thumb .offerte-canvas{ box-shadow:none; border:0; margin:0; }
.layout-card .thumb .offerte-canvas.layout-zijbalk{ border-left:16px solid var(--accent); }
.layout-name{ display:block; font-weight:700; font-size:13.5px; margin-top:4px; }
.layout-desc{ display:block; font-size:12px; color:var(--muted); line-height:1.35; }

/* ---------- delen ---------- */
.share-box{ display:flex; flex-direction:column; gap:10px; }
.share-link{ width:100%; font:inherit; font-size:12.5px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink); }
.share-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.share-note{ font-size:12.5px; margin:0; }
.panel .btn-sm svg.i{ width:15px; height:15px; }

.cost-line{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); align-items:baseline; }
.cost-line strong{ color:var(--ink); font-size:15px; white-space:nowrap; }
.pill{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:99px; background:var(--primary-50); color:var(--primary-d); border:1px solid var(--primary-200); vertical-align:middle; }

/* ---------- portal voor de monteur (publieke pagina, mobiel eerst) ---------- */
body.portal{ background:var(--bg); }
.portal-bar{ background:var(--navy); color:#fff; }
.portal-inner{ max-width:860px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.portal-kicker{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#A79FF3; }
.portal-title{ font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; font-size:19px; }
.portal-main{ max-width:860px; margin:0 auto; padding:16px 12px 40px; }
.portal-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.portal-actions .btn{ flex:1 1 150px; justify-content:center; min-height:46px; }
.portal-foot{ text-align:center; font-size:12px; color:var(--muted); margin-top:18px; }
.portal .canvas-scroll{ overflow-x:auto; }

/* ---------- routes ---------- */
.route-summary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
.route-card{ padding:18px; }
.route-start{ display:flex; gap:12px; align-items:center; padding:6px 0 10px; }
.stop-num{ width:30px; height:30px; border-radius:50%; background:var(--primary-50); color:var(--primary-d); font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; font-size:13px; display:grid; place-items:center; flex:0 0 30px; }
.stop-num.start{ background:var(--navy); color:#fff; font-size:9px; }
.stop-card{ border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:10px 0; background:#fff; }
.stop-head{ display:flex; align-items:center; gap:10px; }
.stop-move{ display:flex; gap:4px; margin-left:auto; }
.mv, .stop-remove{ width:34px; height:34px; border:1px solid var(--line); background:#fff; border-radius:9px; cursor:pointer; display:grid; place-items:center; padding:0; color:var(--muted); }
.mv:hover, .mv:focus-visible{ background:var(--primary-50); color:var(--primary-d); }
.stop-remove:hover, .stop-remove:focus-visible{ background:var(--bad-bg); color:var(--bad); }
.mv svg, .stop-remove svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.stop-fields{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:10px; }
.stop-fields .field:nth-child(1), .stop-fields .field:nth-child(2){ grid-column:span 3; }
.stop-fields .field:nth-child(n+3){ grid-column:span 2; }
.stop-fields .field{ margin:0; }
.stop-fields input, .stop-fields select{ width:100%; font:inherit; font-size:14px; padding:9px 10px; border:1px solid #cfd2e3; border-radius:9px; background:#fff; color:var(--ink); }
.stop-fields input[type=time]{ margin-top:6px; }
@media(max-width:700px){ .stop-fields{ grid-template-columns:1fr 1fr; } .stop-fields .field:nth-child(n){ grid-column:span 1; } .stop-fields .field:nth-child(1), .stop-fields .field:nth-child(2){ grid-column:span 2; } }
@media(max-width:430px){ .stop-fields{ grid-template-columns:1fr; } .stop-fields .field:nth-child(n){ grid-column:span 1; } }
.stop-result{ margin-top:10px; font-size:13.5px; color:var(--muted); }
.stop-result:empty{ display:none; }
.stop-result strong{ color:var(--ink); }
.stop-result .delay{ color:var(--warn); font-weight:600; }
.stop-result .late, .stop-warn{ margin-top:6px; font-size:12.5px; color:var(--warn); background:var(--warn-bg); border:1px solid #f3d9a4; border-radius:9px; padding:6px 10px; }
.stop-warn[hidden]{ display:none !important; }
.add-stop-btn{ font:inherit; font-size:13.5px; font-weight:600; color:var(--primary-d); background:var(--primary-50); border:1px solid var(--primary-200); border-radius:10px; padding:9px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; margin-top:6px; }
.add-stop-btn:hover{ background:var(--primary-200); }
.add-stop-btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.3; }
.wb-pick{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--line); font-weight:400 !important; margin:0 !important; }
.wb-pick input{ margin-top:4px; }
.portal-stop .portal-addr{ margin:8px 0 10px 40px; color:var(--ink); }
.portal-stop .portal-actions{ margin:0 0 0 40px; }
.portal-stop-title{ min-width:0; overflow-wrap:anywhere; }
@media(max-width:560px){ .portal-stop .portal-addr, .portal-stop .portal-actions{ margin-left:0; } }

.pill-bad{ background:var(--bad-bg); color:var(--bad); border-color:#f5c2c2; }
.pill-warn{ background:var(--warn-bg); color:var(--warn); border-color:#f3d9a4; }

/* ---------- foto's, conflictmelding, modus ---------- */
.photos-card{ margin-top:18px; }
.photo-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.photo-actions label{ cursor:pointer; }
.photo-actions label:focus-within{ outline:2px solid var(--primary); outline-offset:2px; }
.photo-status{ font-size:13px; min-height:1.2em; color:var(--muted); margin-bottom:6px; }
.photo-status.ok{ color:var(--ok); } .photo-status.bad{ color:var(--bad); }
.photo-phase{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--primary-d); margin:14px 0 8px; }
.photo-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.photo-card{ border:1px solid var(--line); border-radius:12px; padding:8px; background:#fff; display:flex; flex-direction:column; gap:8px; }
.photo-card img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; background:var(--bg); }
.photo-card input[type=text]{ width:100%; font:inherit; font-size:13px; padding:7px 9px; border:1px solid #cfd2e3; border-radius:8px; }
.photo-row{ display:flex; gap:8px; align-items:center; justify-content:space-between; }
.photo-row select{ font:inherit; font-size:13px; padding:6px 8px; border:1px solid #cfd2e3; border-radius:8px; background:#fff; }
.conflict-box{ background:var(--bad-bg); border:1px solid #f5c2c2; border-radius:12px; padding:14px 16px; margin-bottom:16px; display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; color:var(--bad); }
.conflict-box[hidden]{ display:none !important; }
.conflict-box p{ margin:0; font-weight:600; }
.mode-row{ display:flex; flex-wrap:wrap; gap:8px; }
.mode-row .inline-form .chip{ cursor:pointer; }

/* ---------- monteur-invulscherm ---------- */
.fill-card{ margin-bottom:14px; padding:18px; }
.fill-card h2{ font-size:17px; margin-bottom:10px; }
.fill-kv{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }
.fill-kv span{ color:var(--muted); flex:0 0 auto; } .fill-kv strong{ text-align:right; overflow-wrap:anywhere; }
.fill-intro{ margin-top:10px; white-space:pre-line; color:#374151; }
.fill-rows{ display:grid; gap:10px; }
.fill-row{ display:grid; grid-template-columns:1fr auto; gap:8px 10px; align-items:start; border:1px solid var(--line); border-radius:12px; padding:10px; }
.fill-row textarea, .fill-card textarea{ width:100%; font:inherit; font-size:15px; padding:9px 10px; border:1px solid #cfd2e3; border-radius:9px; resize:none; background:#fff; color:var(--ink); }
.fill-card textarea#notes{ resize:vertical; }
.fill-meta{ grid-column:1 / 2; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:12.5px; color:var(--muted); }
.fill-meta input{ font:inherit; font-size:15px; padding:8px 10px; border:1px solid #cfd2e3; border-radius:9px; width:90px; background:#fff; color:var(--ink); }
.fill-meta input.invalid{ border-color:var(--bad); background:var(--bad-bg); }
.fill-row .row-remove{ grid-column:2; grid-row:1 / 3; align-self:start; width:40px; height:40px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--muted); display:grid; place-items:center; cursor:pointer; padding:0; }
.fill-row .row-remove svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; }
.fill-add{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.fill-total{ margin-top:10px; font-size:14px; color:var(--muted); } .fill-total strong{ color:var(--ink); }
.fill-sign{ margin-bottom:16px; } .fill-sign label{ display:block; font-weight:600; font-size:13px; margin-bottom:6px; }
.fill-sign input[type=text]{ width:100%; font:inherit; font-size:15px; padding:9px 10px; border:1px solid #cfd2e3; border-radius:9px; margin-bottom:8px; background:#fff; }
.fill-sig{ width:100%; height:130px; border:1.5px dashed #cbd5e1; border-radius:10px; background:#fff; touch-action:none; display:block; }
.fill-sign .sign-clear{ font:inherit; font-size:12.5px; color:var(--muted); background:none; border:0; text-decoration:underline; cursor:pointer; padding:6px 0; }
.fill-card select{ width:100%; font:inherit; font-size:15px; padding:11px 12px; border:1px solid #cfd2e3; border-radius:10px; background:#fff; }
.fill-bar{ position:sticky; bottom:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border-top:1px solid var(--line); padding:12px 4px; margin:0 -12px; padding-left:16px; padding-right:16px; box-shadow:0 -6px 18px #14162B14; }
.fill-bar .btn{ min-height:46px; min-width:140px; }
.fill-bar .save-state{ font-size:13px; flex:1; }

/* Voorbeeldkaarten (werkbonnen, routes, offertes, facturen) */
.examples{ margin:1.75rem 0; }
.examples h2{ margin:0 0 .35rem; }
.examples summary{ cursor:pointer; font-weight:600; padding:.5rem 0; }
.example-grid{ display:grid; gap:.875rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); margin-top:1rem; }
.example-card{ display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; padding:1rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.example-card .btn{ margin-top:auto; }
.example-branch{ font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-d); }
.example-meta{ font-size:.8125rem; }
.example-title{ margin:0 0 1rem; font-size:1.125rem; }
.example-stage{ position:relative; overflow:hidden; background:#e9eaf2; border:1px solid var(--line); border-radius:var(--radius); padding:0; }
.example-frame{ display:block; border:0; background:#fff; box-shadow:0 8px 30px rgba(20,22,43,.12); margin:0 auto; }
.example-card .example-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; }
.route-example-grid{ display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr); align-items:start; }
@media(min-width:1000px){ .route-example-grid{ grid-template-columns:minmax(0,1fr) 400px; } }
.phone-frame{ display:block; width:100%; max-width:390px; height:760px; border:8px solid #1C1F38; border-radius:28px; background:#fff; margin-top:.75rem; }
.example-thumb{ display:block; width:100%; text-decoration:none; }
.example-thumb-stage{ position:relative; display:block; width:100%; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 14px rgba(20,22,43,.08); }
.example-thumb-stage iframe{ display:block; border:0; pointer-events:none; background:#fff; }
.example-thumb:hover .example-thumb-stage{ border-color:var(--primary-200); box-shadow:0 6px 20px rgba(100,102,233,.2); }
.example-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.routes-list-example .example-grid, .examples .example-grid:has(> .example-card:only-child){ grid-template-columns:minmax(280px,340px); }

/* Routeplanner: stappen, planmodus, tijdswensen, adressen plakken */
.plan-steps ol{ list-style:none; counter-reset:st; display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin:0 0 1.25rem; padding:0; }
.plan-steps li{ counter-increment:st; position:relative; padding:.75rem .875rem .75rem 2.75rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); font-size:13px; line-height:1.45; }
.plan-steps li:before{ content:counter(st); position:absolute; left:.75rem; top:.75rem; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--primary-50); color:var(--primary-d); font-weight:700; display:grid; place-items:center; font-size:12px; }
.plan-steps li strong{ display:block; font-size:14px; }
.plan-steps li span{ color:var(--muted); }
.mode-cards{ display:grid; gap:.5rem; }
.mode-card{ text-align:left; font:inherit; padding:.625rem .75rem; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; display:grid; gap:.15rem; }
.mode-card strong{ font-size:14px; } .mode-card span{ font-size:12.5px; color:var(--muted); line-height:1.4; }
.mode-card[aria-checked=true]{ border-color:var(--primary); background:var(--primary-50); box-shadow:0 0 0 1px var(--primary); }
.mode-card:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.time-field .time-pair{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.time-field .time-pair input{ flex:1 1 8.5rem; min-width:8.5rem; }
.bulk-add{ margin-top:.75rem; } .bulk-add summary{ cursor:pointer; font-size:13.5px; font-weight:600; color:var(--primary-d); }
.bulk-add textarea{ width:100%; font:inherit; padding:.5rem .625rem; border:1px solid var(--line); border-radius:8px; margin-bottom:.5rem; }

/* Spraak naar plan */
.sp-stage{ text-align:center; padding:2rem 1.5rem; }
.sp-mic{ width:84px; height:84px; border-radius:50%; border:0; background:var(--primary); color:#fff; display:inline-grid; place-items:center; cursor:pointer; box-shadow:0 8px 22px rgba(100,102,233,.35); transition:background .15s ease, transform .15s ease; }
.sp-mic:hover:not(:disabled){ background:var(--primary-d); } .sp-mic:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.sp-mic svg{ width:32px; height:32px; display:block; }
.sp-mic:focus-visible{ outline:3px solid var(--primary-200); outline-offset:3px; }
.sp-mic.recording{ background:#E0564A; animation:spPulse 1.6s ease infinite; }
@keyframes spPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,86,74,.4); } 50%{ box-shadow:0 0 0 16px rgba(224,86,74,0); } }
@media(prefers-reduced-motion:reduce){ .sp-mic.recording{ animation:none; } }
.sp-status{ margin:1rem auto 0; max-width:620px; font-size:14px; font-weight:500; color:var(--muted); line-height:1.5; }
.sp-status.live{ color:#E0564A; font-weight:600; } .sp-status.bad{ color:var(--bad); font-weight:600; } .sp-status.warn{ color:var(--warn); } .sp-status.ok{ color:var(--ok); font-weight:600; }
.sp-wave{ height:44px; display:flex; align-items:center; justify-content:center; gap:3px; margin-top:1rem; }
.sp-wave span{ width:3px; height:4px; background:var(--line); border-radius:2px; } .sp-wave span.live{ background:var(--primary); }
.sp-live{ margin:1.25rem auto 0; max-width:680px; text-align:left; background:var(--primary-50); border:1px solid var(--primary-200); border-radius:var(--radius); padding:1rem 1.1rem; }
.sp-label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.sp-live-text, .sp-transcript{ font-size:15px; line-height:1.7; color:var(--ink); white-space:pre-wrap; min-height:1.7em; }
.sp-interim{ color:var(--soft); }
.sp-cursor{ display:inline-block; width:2px; height:1em; background:var(--primary); vertical-align:-2px; margin-left:1px; animation:spBlink 1s step-end infinite; }
@keyframes spBlink{ 50%{ opacity:0; } }
.sp-privacy{ font-size:12.5px; color:var(--muted); max-width:620px; margin:1.25rem auto 0; line-height:1.55; }
.sp-type{ margin-top:1rem; } .sp-type summary{ cursor:pointer; font-weight:600; } .sp-type textarea{ width:100%; font:inherit; padding:.6rem .75rem; border:1px solid var(--line); border-radius:8px; margin:.75rem 0; }
.sp-result{ margin-top:1rem; display:grid; gap:1rem; }
.sp-card{ background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:1rem 1.1rem; }
.sp-field{ display:flex; gap:12px; font-size:14px; margin-bottom:8px; } .sp-field:last-child{ margin-bottom:0; } .sp-field b{ min-width:90px; flex-shrink:0; }
.sp-action{ display:flex; align-items:center; gap:10px; background:var(--ok-bg); color:var(--ok); border-radius:8px; padding:.6rem .85rem; margin-top:8px; font-size:14px; }
.sp-action small{ margin-left:auto; font-weight:600; color:#5d8f74; text-align:right; }
.sp-check{ width:16px; height:16px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; font-size:10px; flex-shrink:0; }
.sp-note{ font-size:12.5px; margin:14px 0 0; } .sp-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:12px; }

.sp-checks{ list-style:none; display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:1rem 0 0; padding:0; }
.sp-checks li{ font-size:12.5px; padding:.3rem .7rem; border-radius:99px; border:1px solid var(--line); color:var(--soft); background:#fff; }
.sp-checks li:before{ content:'\25CB'; margin-right:.4rem; } .sp-checks li.ok{ color:var(--ok); border-color:#a7f3d0; background:var(--ok-bg); } .sp-checks li.ok:before{ content:'\2713'; }
#sp-test{ margin-top:.9rem; }

.demo-banner{ background:#FFF7E6; border-bottom:1px solid #F5D9A3; color:#7A4B00; font-size:13px; padding:.5rem 1rem; text-align:center; line-height:1.4; }