@font-face{font-family:"Doc Display";src:url(../fonts/Nunito-latin.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Doc Sans";src:url(../fonts/NunitoSans-latin.woff2) format("woff2");font-weight:400 900;font-display:swap}

:root{
  /* huisstijl — wordt overschreven vanuit de instellingen */
  --blue:#114881;--navy:#0c2749;--orange:#f7851e;--orange-ink:#b45900;
  --light:#f7fafc;--soft:#e7eff9;--ink:#17233a;--muted:#536379;--line:#dce6ee;
  /* interface */
  --app-bg:#eef3f9;--app-panel:#ffffff;--app-ink:#17233a;--app-muted:#536379;
  --app-line:#d3dfeb;--app-field:#f7fafc;--app-head:var(--blue);--danger:#a4262c;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --app-bg:#0b1728;--app-panel:#132338;--app-ink:#e3ecf6;--app-muted:#9fb3c9;
  --app-line:#263d59;--app-field:#0e1d31;--app-head:#8dbbe8;--danger:#ff9b9b;
}}
:root[data-theme="dark"]{--app-bg:#0b1728;--app-panel:#132338;--app-ink:#e3ecf6;--app-muted:#9fb3c9;--app-line:#263d59;--app-field:#0e1d31;--app-head:#8dbbe8;--danger:#ff9b9b}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--app-bg);color:var(--app-ink);
  font:14px/1.5 "Doc Sans",system-ui,Arial,sans-serif;
  padding-inline:16px;
  padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));
  padding-bottom:env(safe-area-inset-bottom);
  overflow-x:hidden;
}

.install{max-width:1500px;margin:14px auto 0;background:var(--app-panel);border:1px solid var(--app-line);border-left:4px solid var(--orange);border-radius:10px;padding:14px 16px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.install b{color:var(--app-head);font-family:"Doc Display",system-ui,Arial,sans-serif}
.install .rowbtns{margin:0}
.install p{margin:3px 0 0;max-width:62ch}
.install.update{border-left-color:var(--app-head)}
.tourlijst.nieuwslijst{grid-template-columns:1fr}
.nieuwslijst li{display:flex;flex-direction:column;gap:2px}
.nieuwslijst li b{margin-top:6px}
.nieuwslijst li b:first-of-type{margin-top:2px}
.nieuwsversie{font-size:11px;letter-spacing:.04em;text-transform:uppercase}

/* ===== Balk ===== */
.bar{max-width:1500px;margin:0 auto;padding-block:max(14px,env(safe-area-inset-top)) 0;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.brandline{display:flex;align-items:center;gap:12px;min-width:0}
.brandline img{height:34px;width:auto;max-width:180px;object-fit:contain}
.bar h1{font:850 20px/1.15 "Doc Display",system-ui,Arial,sans-serif;color:var(--app-head);margin:0;overflow-wrap:anywhere}
.bar p{margin:2px 0 0;color:var(--app-muted);font-size:12.5px}
.actions{display:flex;flex-wrap:wrap;gap:8px}

button,.btnlink,.btnfile{font:700 13px/1 "Doc Sans",system-ui,Arial,sans-serif;border:0;border-radius:8px;padding:11px 14px;cursor:pointer;background:var(--blue);color:#fff;text-decoration:none;display:inline-block;text-align:center}
button.primary,.btnfile.primary{background:var(--orange);color:#17233a}
button.ghost,.btnfile.ghost{background:transparent;color:var(--app-head);border:1px solid var(--app-line)}
button.danger{color:var(--danger);border-color:var(--danger)}
button.small{padding:8px 11px;font-size:12px}
button:disabled{opacity:.6;cursor:progress}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.btnfile:focus-within{outline:2px solid var(--orange);outline-offset:2px}

/* ===== Tabs (telefoon) ===== */
.tabs{max-width:1500px;margin:12px auto 0;display:flex;gap:6px;background:var(--app-panel);border:1px solid var(--app-line);border-radius:10px;padding:5px}
.tabs button{flex:1;background:transparent;color:var(--app-muted);padding:10px}
.tabs button[aria-selected="true"]{background:var(--app-field);color:var(--app-head);box-shadow:inset 0 0 0 1px var(--app-line)}

/* ===== Raster ===== */
.app{max-width:1500px;margin:0 auto;padding-block:18px 32px;display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:24px;align-items:start}
.panel{background:var(--app-panel);border:1px solid var(--app-line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);max-height:calc(100vh - 24px);overflow:auto}
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.types label{display:flex;gap:7px;align-items:center;padding:9px 10px;border:1px solid var(--app-line);border-radius:8px;cursor:pointer;font-weight:700;font-size:13px}
.types input{accent-color:var(--orange);width:auto;margin:0}
.types label:has(input:checked){border-color:var(--orange);background:var(--app-field)}

details{border-top:1px solid var(--app-line);padding-top:10px}
summary{cursor:pointer;font:800 13px "Doc Display",system-ui,Arial,sans-serif;color:var(--app-head);letter-spacing:.02em}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.fields .full{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--app-muted);font-weight:700}
.f.inline{flex-direction:row;align-items:center;gap:6px}
.f.inline input{width:auto}
input,select,textarea{font:16px/1.4 "Doc Sans",system-ui,Arial,sans-serif;color:var(--app-ink);background:var(--app-field);border:1px solid var(--app-line);border-radius:7px;padding:9px 10px;width:100%}
@media (min-width:981px){input,select,textarea{font-size:13px}}
input[type=checkbox]{width:auto;accent-color:var(--orange);vertical-align:-2px}
input[type=color]{padding:3px;height:40px}
textarea{resize:vertical;min-height:72px}
.hint{font-size:12px;color:var(--app-muted);margin:0;font-weight:400}
.rowbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.rowbtns .grow{flex:1;min-width:140px}

.lines{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.line{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border:1px solid var(--app-line);border-radius:8px}
.line .full{grid-column:1/-1}
.line .row{display:grid;grid-template-columns:1fr 1fr 1.2fr .9fr auto;gap:6px;grid-column:1/-1;align-items:end}
.line .row button{padding:9px 11px;background:transparent;color:var(--app-muted);border:1px solid var(--app-line)}
@media (max-width:560px){.line .row{grid-template-columns:1fr 1fr 1fr}.line .row button{grid-column:3}}

/* ===== Podium ===== */
.stage{min-width:0}
.zoombar{display:flex;gap:8px;align-items:center;margin-bottom:10px;font-size:12px;color:var(--app-muted);font-weight:700}
.zoombar button{padding:8px 12px;background:var(--app-panel);color:var(--app-head);border:1px solid var(--app-line)}
#scaler{transform-origin:top left}
#out{width:max-content;margin:0 auto}
.mailhead{max-width:680px;margin:28px auto 10px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between}
.mailhead h2{font:800 16px "Doc Display",system-ui,Arial,sans-serif;color:var(--app-head);margin:0}
.mailhead p{margin:0;font-size:12.5px;color:var(--app-muted)}
.steps{padding-left:18px;font-size:12.5px;color:var(--app-muted);display:block}

.madeby{max-width:1500px;margin:0 auto;padding:0 0 28px;font-size:12px;color:var(--app-muted);text-align:center}
.madeby a{color:var(--app-head)}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--navy);color:#fff;padding:11px 16px;border-radius:9px;font-weight:700;border-left:4px solid var(--orange);z-index:50;max-width:calc(100vw - 32px)}

/* ===== Dialogen ===== */
dialog{border:0;border-radius:14px;padding:0;background:var(--app-panel);color:var(--app-ink);max-width:720px;width:calc(100vw - 24px);max-height:calc(100dvh - 40px);overflow:hidden;display:none}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:#0b172899}
.dlghead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--app-line);margin:0}
.dlghead h2{margin:0;font:850 18px "Doc Display",system-ui,Arial,sans-serif;color:var(--app-head)}
.dlgbody{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.dlgbody h2{margin:0;font:850 18px "Doc Display",system-ui,Arial,sans-serif;color:var(--app-head)}
.dlgbody details:first-of-type{border-top:0;padding-top:0}
.versie{text-align:center;padding-top:8px;border-top:1px solid var(--app-line)}

.lijst{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.lijst .item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--app-line);border-radius:8px;background:var(--app-field);text-align:left;color:var(--app-ink);font-weight:400;cursor:pointer;width:100%}
.lijst .item b{font-weight:800}
.lijst .item span{font-size:12px;color:var(--app-muted)}
.lijst .leeg{color:var(--app-muted);font-size:13px;padding:10px 0}

.logobox{display:flex;align-items:center;justify-content:center;min-height:74px;padding:10px;border:1px dashed var(--app-line);border-radius:8px;background:var(--app-field)}
.logobox.dark{background:var(--navy)}
.logobox img{max-height:54px;max-width:100%;object-fit:contain}
.btnfile{position:relative}

/* ===== Telefoon ===== */
@media (max-width:980px){
  .app{grid-template-columns:1fr;gap:16px}
  .actions button,.actions .btnlink{padding:10px 12px;font-size:12.5px}
  .panel{position:static;max-height:none}
  .bar h1{font-size:18px}
  body[data-tab="form"] .stage{display:none}
  body[data-tab="stage"] .panel{display:none}
}

/* ===== Rondleiding ===== */
.tour{gap:10px}
.tourkop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tourkop .hint{margin:0}
.tourkop button{padding:4px 10px;font-size:12px}
.tour h2{margin:0}
.tour>.hint{max-width:62ch}

.tourbeeld{display:flex;flex-direction:column;gap:8px}
.tourpapier{max-width:420px;margin:0 auto;width:100%;position:relative;overflow:hidden;background:#fff;border:1px solid var(--app-line);border-radius:10px;box-shadow:0 6px 18px #0c274914}
.tourdoc{position:absolute;inset:0 auto auto 0;width:210mm;transform:scale(var(--tourschaal,.42));transform-origin:top left}
.tourdoc .page{width:210mm;min-height:0;margin:0;padding:12mm 14mm 14mm;box-shadow:none}
.tourdoc .hdr{margin-bottom:6mm}
.tourdoc .note{margin-top:3mm}

.tourkeuze{display:flex;flex-wrap:wrap;gap:6px}
.tourkeuze button{padding:6px 11px;font-size:12.5px;font-weight:700;border-radius:999px;background:transparent;color:var(--app-ink);border:1px solid var(--app-line);cursor:pointer}
.tourkeuze button[aria-pressed="true"]{border-color:transparent;background:var(--tourstip,var(--app-head));color:#fff}
.tourbeeld .hint{margin:0;min-height:1.5em}

.tourlijst{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px}
.tourlijst li{padding:9px 11px;border:1px solid var(--app-line);border-radius:8px;background:var(--app-field);font-size:13px}
.tourlijst li b{display:block;color:var(--app-head);font-weight:800}
.tourlijst li span{color:var(--app-muted);font-size:12px}

.tourstippen{display:flex;gap:6px;align-items:center}
.tourstippen i{width:7px;height:7px;border-radius:50%;background:var(--app-line);display:block}
.tourstippen i.nu{background:var(--app-head);width:18px;border-radius:999px}

@media (prefers-reduced-motion:no-preference){
  .tourdoc{transition:opacity .18s ease}
  .tourdoc.wisselt{opacity:.35}
}

/* ===== Document (papier) ===== */
.doc{color:var(--ink);font:11pt/1.5 "Doc Sans",Arial,sans-serif}
.doc h1,.doc h2{font-family:"Doc Display",Arial,sans-serif;line-height:1.15;color:var(--blue);margin:0}
.doc h1{font-size:31pt;font-weight:850}.doc h2{font-size:14pt;font-weight:800}
.doc p{margin:0 0 3.5mm}
.page{width:210mm;min-height:297mm;background:#fff;margin:0 auto;padding:15mm 17mm 48mm;position:relative;box-shadow:0 10px 30px #0c274922}
.page+.page{margin-top:10mm}
.hdr{height:36mm;background:var(--light);display:flex;justify-content:space-between;align-items:center;padding:6mm 7mm;border-bottom:1mm solid var(--orange);margin-bottom:8mm}
.hdr img{max-width:58mm;max-height:22mm;object-fit:contain;object-position:left center}
.hdr .naam{font:850 17pt/1.1 "Doc Display",Arial,sans-serif;color:var(--blue);max-width:70mm}
.hdr .tag{font-size:8.5pt;text-align:right;color:var(--muted);max-width:62mm}.hdr .tag b{color:var(--ink)}
.eyebrow{font-size:8pt;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--orange-ink)!important;margin-bottom:1.5mm!important}
.title{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:5mm}
.badge{font-size:8pt;border:1px solid #c4d5e5;border-radius:3mm;padding:1.3mm 3mm;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:10mm;margin:4mm 0 6mm;font-size:10pt}
.meta strong{display:block;color:var(--blue)}
.meta dl{display:grid;grid-template-columns:1fr auto;margin:0;gap:1mm 4mm;align-content:start}
.meta dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.meta dt{color:var(--muted)}
.small{font-size:8.5pt;color:var(--muted)}
.items{border-collapse:collapse;width:100%;font-size:9.5pt;table-layout:fixed;font-variant-numeric:tabular-nums}
.items th{background:var(--soft);color:var(--blue);text-align:left;font-weight:800;font-size:8pt;padding:3mm 2mm}
.items td{padding:2.8mm 2mm;border-bottom:1px solid var(--line);vertical-align:top}
.items td:not(:first-child),.items th:not(:first-child){text-align:right}
.items tr{break-inside:avoid}
.items td strong{font-weight:750}.items td small{display:block;font-size:8pt;color:var(--muted)}
.totals{width:80mm;margin:4mm 0 4mm auto;font-size:10pt;font-variant-numeric:tabular-nums}
.totals div{display:flex;justify-content:space-between;padding:1.5mm 2mm}
.totals .grand{background:var(--soft);color:var(--blue);font:800 13pt "Doc Display",Arial,sans-serif;padding:3.3mm 3mm;border-left:1mm solid var(--orange);margin-top:2mm}
.note{padding:4mm 5mm;background:var(--light);border-left:.8mm solid var(--orange);font-size:9pt;break-inside:avoid}
.closing{break-inside:avoid}
.prose{font-size:10.5pt;line-height:1.65}.prose h2{margin:5mm 0 2.5mm}
.prose.compact{font-size:9.5pt;line-height:1.55}
.agreement{display:flex;gap:10mm;border-top:1px solid var(--line);margin-top:5mm;padding-top:3mm;font-size:8pt;break-inside:avoid}
.agreement div{flex:1}.agreement .ln{height:9mm;border-bottom:1px solid #92a5b8}
.ftr{position:absolute;left:17mm;right:17mm;bottom:13mm;background:var(--navy);color:#fff;padding:5mm 6mm;height:27mm;display:flex;gap:7mm;align-items:center;font-size:7.3pt;line-height:1.6}
.ftr img{max-width:34mm;max-height:15mm;object-fit:contain}
.ftr .naam{font:800 12pt "Doc Display",Arial,sans-serif;color:#fff;max-width:40mm;line-height:1.15}
.ftr span{color:#c7d7e9}
.ftr .cols{flex:1;display:grid;grid-template-columns:1.3fr 1fr;gap:4mm}
.fnote{position:absolute;bottom:6mm;left:17mm;right:17mm;display:flex;justify-content:space-between;font-size:7pt;color:var(--muted)}
.mailwrap{background:var(--soft);padding:30px 12px;max-width:680px;margin:0 auto}
.sigwrap{background:#fff;padding:30px;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:30px}

.pspace{display:none}
@page{size:A4;margin:15mm 17mm 12mm}
@media print{
  body{background:#fff;padding:0}
  .bar,.panel,.toast,.fnote,.tabs,.madeby,.zoombar,#mailBlock{display:none!important}
  .app{display:block;padding:0;max-width:none}
  .stage{overflow:visible;padding:0}
  #scaler{transform:none!important}
  #out{width:auto}
  .page{width:auto;min-height:0;padding:0 0 34mm;margin:0;box-shadow:none;position:static}
  .page+.page{break-before:page;margin-top:0}
  .ftr{position:fixed;left:0;right:0;top:243mm;bottom:auto}
  .page:has(.items){padding-bottom:0}
  .items tr.closingrow{break-inside:avoid}
  .items thead{display:table-header-group}
  .pspace{display:table-footer-group}.pspace td{height:34mm;border:0!important;padding:0!important}
}