/* NanoWeb Command in de Revatool-huisstijl (21 aug 2026).
   Alle oorspronkelijke klassenamen en id's blijven bestaan; alleen het uiterlijk
   is vervangen. De oude design-tokens (--bg, --panel, --text, --mono, ...)
   krijgen Revatool-waarden zodat ook door JavaScript gegenereerde inline-styles
   automatisch meekleuren. Fonts lokaal gehost, zelfde bestanden als Revatool. */

@font-face{font-family:'Inter';src:url('/fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('/fonts/Sora-Variable.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Revatool-layout in de nanoweb.nl-kleuren (n27/hg.css): creme vlakken,
     diep groenzwart #041914, rood accent #d0342c, goud #c8a96e voor let-op */
  --vlak:#f5f2ef; --kaart:#FFFFFF; --zij:#041914; --zij-tekst:rgba(255,255,255,.78);
  --dim:rgba(4,25,20,.7); --stil:rgba(4,25,20,.55); --lijn:#e3ddd7;
  --navy:#041914; --navy-700:#33362e; --navy-500:#434d48; --navy-zacht:#eaeae4;
  --oranje:#d0342c; --oranje-600:#b02a23; --oranje-diep:#8f1f19; --oranje-zacht:#f8e5e3;
  --rood-fel:#d0342c; --rood-diep:#b02a23; --rood-zacht:#f8e2e0;
  --goud:#c8a96e; --goud-diep:#7d6134; --goud-zacht:#f4ecdd;
  --groen-diep:#1E7B4F; --groen-zacht:#DFF2E8;
  --r:16px;
  /* oude tokennamen -> nanoweb-waarden (JS-inline-styles gebruiken deze) */
  --bg:#f5f2ef; --panel:#FFFFFF; --panel-2:#efeae5; --border:#e3ddd7;
  --text:#041914; --muted:rgba(4,25,20,.7); --faint:rgba(4,25,20,.55);
  --green:#1E7B4F; --green-dim:#DFF2E8;
  --amber:#7d6134; --amber-dim:#f4ecdd;
  --red:#b02a23;  --red-dim:#f8e2e0;
  --blue:#434d48; --blue-dim:#e6e0da;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans:'Inter', -apple-system, 'Segoe UI', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--vlak);color:var(--text);font:14.5px/1.55 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ── Raamwerk: sidebar + topbalk (Revatool .app/.zij/.hoofd/.top) ── */
.app{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh}
.zij{background:var(--zij);color:var(--zij-tekst);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.zij .logo{display:flex;align-items:center;gap:9px;color:#fff;font:700 14.5px 'Sora';letter-spacing:.01em;padding:0 6px;margin-bottom:26px;white-space:nowrap}
.zij .logo em{font-style:normal;color:var(--oranje)}
.zij .logo>svg{width:27px;height:25px;flex-shrink:0;stroke-width:0}
.zij .groep{font:600 10.5px 'Inter';text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.35);padding:14px 10px 7px}
.zij nav{display:flex;flex-direction:column;gap:2px}
.zij a[data-view]{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border-radius:9px;font-weight:500;font-size:14px;transition:.15s;color:var(--zij-tekst)}
.zij a[data-view]:hover{background:rgba(255,255,255,.07);color:#fff}
.zij a[data-view].active{background:var(--oranje);color:#fff;font-weight:600}
.zij a[data-view].active svg{stroke:#fff}
.zij a[data-view] b{font-weight:inherit;flex:1}
.zij svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.zij .onder{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding-top:12px;font:400 11.5px 'IBM Plex Mono';color:rgba(255,255,255,.45);padding-left:10px;padding-right:10px;word-break:break-word}
.zij .onder b{color:var(--oranje);font-weight:600}
.nav a .n{font:600 11px 'IBM Plex Mono';color:var(--zij-tekst);background:rgba(255,255,255,.1);border-radius:999px;padding:0 7px;margin-left:auto}
.nav a.active .n{background:rgba(255,255,255,.22);color:#fff}
.nav a .n.warn{background:var(--rood-fel);color:#fff}

.hoofd{display:grid;grid-template-rows:62px 1fr;grid-template-columns:minmax(0,1fr);min-width:0}
.top{display:flex;align-items:center;gap:16px;padding:0 24px;background:var(--kaart);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:30}
.top h3{font:600 17px 'Sora'}
.top .rechts{display:flex;align-items:center;gap:10px;margin-left:auto}
.sync{font:400 12px 'IBM Plex Mono';color:var(--stil);white-space:nowrap}
.sync b{color:var(--groen-diep);font-weight:600}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--oranje),var(--oranje-600));color:#fff;display:grid;place-items:center;font:600 12px 'Sora';flex-shrink:0}

.wrap{padding:24px;max-width:1280px;width:100%;margin:0 auto;min-width:0}
.statusline{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;flex-wrap:wrap}
.statusline h1{font:600 22px/1.25 'Sora'}
.statusline .sub{color:var(--dim);font-size:13.5px}
section[id^="view-"]{animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Tegels (Revatool .stat) ── */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px}
.finance-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:16px 18px;cursor:pointer;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 2px rgba(20,23,28,.04)}
.tile:hover{border-color:var(--oranje);box-shadow:0 2px 8px rgba(15,37,70,.08)}
.tile .label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--dim);font-weight:500}
.tile .value{font:600 28px 'Sora';margin-top:6px;letter-spacing:-.02em;color:var(--navy)}
.tile .hint{font-size:11.5px;color:var(--stil);margin-top:2px}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.green{background:var(--groen-diep)}
.dot.amber{background:var(--goud)}
.dot.red{background:var(--rood-fel)}
.dot.blue{background:var(--navy-500)}
.value.green{color:var(--groen-diep)}
.value.amber{color:var(--amber)}
.value.red{color:var(--rood-diep);font-size:20px;padding-top:5px}
.value .unit{font-size:14px;color:var(--stil);font-weight:400;font-family:'Inter'}

/* ── Panelen (Revatool .paneel) ── */
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.cols>*{min-width:0}
.panel{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 2px rgba(20,23,28,.04)}
.panel+.panel{margin-top:14px}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--lijn);gap:10px}
.panel-head h2{font:600 15.5px 'Sora';color:var(--text)}
.panel-head .more{font-size:12.5px;color:var(--dim);cursor:pointer;transition:.15s;background:none;border:none;font-weight:500}
.panel-head .more:hover{color:var(--oranje-diep)}

/* ── Vraagt aandacht / gebeurtenissen ── */
.attn{list-style:none}
.attn li{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid var(--lijn)}
.attn li:last-child{border-bottom:none}
.attn li.leeg{color:var(--stil);font-size:13px;justify-content:center;padding:18px}
.sev{font:600 10px 'IBM Plex Mono';letter-spacing:.04em;padding:3px 8px;border-radius:999px;flex:none;width:60px;text-align:center}
.sev.red{color:var(--rood-diep);background:var(--rood-zacht)}
.sev.amber{color:var(--amber);background:var(--amber-dim)}
.sev.blue{color:var(--navy-500);background:var(--navy-zacht)}
.attn .what{flex:1;min-width:0}
.attn .what b{font-weight:600;font-size:13.5px}
.attn .what span{color:var(--dim);font-size:12.5px;display:block}
.attn .metric{font:400 12.5px 'IBM Plex Mono';color:var(--dim);white-space:nowrap}
.attn .metric b{color:var(--rood-diep);font-weight:600}

.repstat{padding:14px 20px}
.banner{display:flex;gap:10px;align-items:flex-start;background:var(--goud-zacht);border:1px solid var(--goud);border-radius:10px;padding:11px 13px;margin-bottom:12px}
.banner.groen{background:var(--groen-zacht);border-color:var(--groen-diep)}
.banner svg{flex:none;margin-top:2px}
.banner p{font-size:12.5px;color:var(--text)}
.banner p span{color:var(--dim)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--lijn);font-size:13px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--dim)}
.kv .v{font:400 12.5px 'IBM Plex Mono';text-align:right;color:var(--text)}
.kv .v.green{color:var(--groen-diep)}
.kv .v.amber{color:var(--amber)}

/* ── Knoppen (Revatool .knop) ── */
.btnrow{display:flex;gap:8px;margin-top:12px}
.btn{flex:1;text-align:center;padding:8px 12px;border-radius:10px;font-size:13px;font-weight:600;border:1px solid var(--lijn);color:var(--text);cursor:pointer;transition:.15s;background:#fff}
.btn:hover{background:var(--panel-2)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-700)}
.btn.klein{flex:none;padding:5px 11px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.seolist{list-style:none}
.seolist li{display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid var(--lijn)}
.seolist li:last-child{border-bottom:none}
.seolist .site{flex:1;min-width:0;font-size:13px}
.seolist .site span{display:block;font-size:11.5px;color:var(--stil)}
.delta{font:600 12.5px 'IBM Plex Mono';white-space:nowrap}
.delta.red{color:var(--rood-diep)}

.allok{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 18px;border:1px dashed var(--lijn);border-radius:var(--r);color:var(--dim);font-size:12.5px;background:var(--kaart)}
.allok b{color:var(--text);font-weight:500}

/* ── Rapporten ── */
.repgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.zoek{width:240px;max-width:100%;background:#F5F6F8;border:1px solid transparent;border-radius:10px;padding:8px 12px;color:var(--text);font:inherit;font-size:13px}
.zoek:focus{outline:none;background:#fff;border-color:var(--oranje);box-shadow:0 0 0 3px rgba(247,143,32,.16)}
::placeholder{color:var(--stil)}
select.zoek{background:#fff;border-color:var(--lijn)}
table.rt{width:100%;border-collapse:collapse;font-size:13.5px}
table.rt th{text-align:left;font:600 11px 'Inter';text-transform:uppercase;letter-spacing:.07em;color:var(--stil);padding:9px 14px;border-bottom:1px solid var(--lijn)}
table.rt td{padding:10px 14px;border-bottom:1px solid var(--lijn);font-size:13px;vertical-align:middle}
table.rt tr:last-child td{border-bottom:none}
table.rt tbody tr:hover td{background:#FAFBFC}
.klikrij{cursor:pointer}
.klikrij:focus-visible{outline:2px solid var(--oranje);outline-offset:-2px}
.klikrij .dom:hover{color:var(--oranje-diep)}
.dom{font-weight:600;white-space:nowrap}
.chip{display:inline-flex;align-items:center;font:600 11px 'Inter';padding:3px 10px;border-radius:999px;white-space:nowrap}
.chip.actief{color:var(--groen-diep);background:var(--groen-zacht)}
.chip.voorstel{color:var(--amber);background:var(--amber-dim)}
.chip.leeg{color:var(--dim);background:#ECEFF5}
.chip.fout{color:var(--rood-diep);background:var(--rood-zacht)}
.mailedit{width:100%;min-width:180px;background:transparent;border:1px solid transparent;border-radius:8px;padding:5px 8px;color:var(--text);font:400 12px 'IBM Plex Mono'}
.mailedit:hover{border-color:var(--lijn)}
.mailedit:focus{outline:none;border-color:var(--oranje);background:var(--oranje-zacht)}
.acts{display:flex;gap:6px;justify-content:flex-end}
.acts .btn{flex:none;padding:4px 10px;font-size:11.5px}

/* ── Financieel ── */
.fin-tabs{display:flex;gap:8px;flex-wrap:wrap}
.fin-tab{padding:7px 14px;border-radius:10px;background:#fff;border:1.5px solid var(--lijn);color:var(--dim);font-weight:500;font-size:13px;cursor:pointer;transition:.12s}
.fin-tab:hover{color:var(--text);background:var(--panel-2)}
.fin-tab.active{background:var(--oranje-zacht);border-color:var(--oranje);color:var(--navy);font-weight:600}
.fin-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fin-edit-field{display:flex;flex-direction:column;gap:5px}
.fin-edit-field.full{grid-column:1/-1}
.fin-edit-field label{color:var(--stil);font:600 11px 'Inter';text-transform:uppercase;letter-spacing:.05em}
.fin-edit-field input,.fin-edit-field select{width:100%;background:#fff;color:var(--text);border:1px solid var(--lijn);border-radius:10px;padding:10px 12px;font:inherit}
.fin-edit-field input:focus,.fin-edit-field select:focus{outline:none;border-color:var(--oranje);box-shadow:0 0 0 3px rgba(247,143,32,.16)}
.fin-items{margin-top:16px;border-top:1px solid var(--lijn);padding-top:14px}
.fin-item-row{display:grid;grid-template-columns:minmax(150px,2fr) 70px 110px 90px 32px;gap:7px;margin-bottom:8px;align-items:end}
.fin-item-row input,.fin-item-row select{width:100%;background:#fff;color:var(--text);border:1px solid var(--lijn);border-radius:10px;padding:8px;font:inherit}
.fin-item-label{color:var(--stil);font-size:10.5px;margin-bottom:4px}
.fin-total{display:flex;justify-content:space-between;margin-top:12px;padding:12px;background:var(--navy-zacht);border-radius:10px;color:var(--navy);font-weight:600}

/* ── Modal (Revatool .fb-modal) ── */
.overlay{position:fixed;inset:0;background:rgba(15,37,70,.45);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.open{display:flex}
.modal{background:#fff;border:none;border-radius:16px;box-shadow:0 30px 80px rgba(8,18,38,.4);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;animation:fadeUp .2s ease}
.modal.groot{max-width:700px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 12px;border-bottom:1px solid var(--lijn)}
.modal-head h3{font:600 15.5px 'Sora'}
.modal-head .x{background:none;border:none;color:var(--stil);font-size:20px;cursor:pointer;line-height:1;padding:4px;border-radius:8px}
.modal-head .x:hover{color:var(--text);background:#F0F3F8}
.modal-body{padding:16px 22px;overflow-y:auto;font-size:13.5px;color:var(--dim)}
.modal-body iframe{width:100%;height:65vh;border:1px solid var(--lijn);border-radius:10px;background:#fff}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 22px 18px;border-top:1px solid var(--lijn)}
.modal-foot .btn{flex:none;padding:9px 16px}

/* ── Toast (Revatool .melding) ── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:300;background:var(--navy);color:#fff;border:none;border-radius:12px;padding:12px 18px;font-size:14px;display:none;max-width:min(560px,92vw);box-shadow:0 18px 50px rgba(15,37,70,.35)}
.toast.groen{color:#fff}
.toast.groen::before{content:"✓ ";color:#7FD6A6;font-weight:700}
.toast.rood{color:#fff}
.toast.rood::before{content:"✕ ";color:#e05a4e;font-weight:700}

.laadt{color:var(--stil);font-size:13px;padding:24px;text-align:center}

/* ── Responsief ── */
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols{grid-template-columns:minmax(0,1fr)}
  .repgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rt .kolklant{display:none}
}
@media (max-width:900px){
  .app{grid-template-columns:64px minmax(0,1fr)}
  .zij{padding:16px 10px}
  .zij .logo{justify-content:center;padding:0}
  .zij .logo .naam,.zij .groep,.zij a[data-view] b,.nav a .n{display:none}
  .zij a[data-view]{justify-content:center}
  .zij .onder{display:none}
}
@media (max-width:640px){
  .top{gap:12px;padding:0 14px}
  .sync{display:none}
  .wrap{padding:16px 14px 40px}
  .tiles{gap:8px}
  .tile .value{font-size:22px}
  .attn .metric{display:none}
  #fin-list-head{flex-direction:column;align-items:stretch;gap:10px}
  /* Drie kolommen over twee rijen. Op een rij van vijf blijft er op 390px maar
     48px per tab over en kappen "Abonnementen" en "Incasso's" af; met drie
     kolommen is dat 83px en past elk label voluit. */
  #fin-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%}
  #fin-tabs .fin-tab{min-width:0;padding:8px 2px;font-size:clamp(9px,2.8vw,11px);letter-spacing:-.02em;white-space:nowrap;text-align:center}
  #fin-list-head>div:last-child{width:100%;flex-direction:column;align-items:stretch !important;gap:8px !important}
  #fin-list-head .zoek{width:100%;order:1}
  #fin-new-sub{width:100%;order:2}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── SEO-uitbreiding ── */
.seo-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.tile.static{cursor:default}
.tile.static:hover{border-color:var(--lijn);box-shadow:0 1px 2px rgba(20,23,28,.04)}
.tile .value.amber{color:var(--amber)}.tile .value.green{color:var(--groen-diep)}
.panel-sub{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.seo-filters{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.seo-filters .check{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);cursor:pointer}
.tablewrap{overflow-x:auto;max-width:100%}
table.rt th.r,table.rt td.r{text-align:right}
table.rt td.mono{font-family:'IBM Plex Mono';font-size:12px;line-height:1.35}
.seo-table a.dom{font-weight:600;color:var(--navy);text-decoration:none}
.seo-table a.dom:hover{color:var(--oranje-diep)}
.delta.up{color:var(--groen-diep)}.delta.down{color:var(--rood-diep)}.delta.flat{color:var(--faint)}
.link{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.switch{position:relative;display:inline-block;width:38px;height:22px;vertical-align:middle}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#cfd5df;border-radius:999px;transition:.15s;cursor:pointer}
.switch span::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--groen-diep)}
.switch input:checked+span::before{transform:translateX(16px)}
.switch input:disabled+span{opacity:.5}
.switch-label{font-size:12.5px;color:var(--dim);margin-right:10px}
.seo-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.seo-actions .btn{flex:none}
.statusline .back{font-size:12.5px;color:var(--dim);text-decoration:none;align-self:center}
.statusline .back:hover{color:var(--oranje-diep)}
.klant-detail-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.klant-detail-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.klant-detail-actions .btn{flex:none;min-width:130px}
.chartwrap{padding:12px 16px 6px}
.svgchart{width:100%;height:auto;display:block}
.svgchart .grid{stroke:var(--lijn);stroke-width:1}
.svgchart path{fill:none;stroke-width:2;stroke-linejoin:round}
.svgchart path.clk{stroke:var(--navy)}.svgchart path.imp{stroke:var(--oranje);stroke-width:1.5;opacity:.85}
.svgchart .ax{font:11px 'IBM Plex Mono';fill:var(--faint)}
.svgchart .ax.clk,.svgchart tspan.clk{fill:var(--navy)}.svgchart .ax.imp,.svgchart tspan.imp{fill:var(--oranje-diep)}
.svgchart .legend{font:11px 'Inter';transform:translateY(-8px)}
.spark{width:120px;height:30px;display:block;margin:8px 0}
.spark polyline{fill:none;stroke:var(--navy);stroke-width:1.5}
.acties{margin:4px 0 10px 16px;font-size:12.5px;color:var(--dim)}
@media (max-width:900px){.seo-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.seo-actions{margin-left:0}.klant-detail-cols{grid-template-columns:1fr}}