@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@500;600&display=swap');
/* ═══════════════════════════════════════════════════════════════════════════
   ZWART-GOUD (08-10-2026)

   Zijn keuze na de voorbeelden (artifact KroBs4Kie8aCAzFc2mwrBU): het portaal
   in zwart en goud. Goud is het merkaccent (hoofdknop, actieve tab, lijn onder
   de kop, gekozen filter, achtergrondgloed); rood komt alleen nog voor in het
   logo en bij afkeur, zodat afkeur er meteen uitspringt. De vijf statuskleuren
   blijven precies gelijk.

   Achtergrond: bovenin geborsteld staal dat wegvaagt in een wolk van goud,
   brons en nachtblauw, met een fijne korrel; tegels, lijst en mappen van mat
   glas. Niets beweegt.

   Deze laag komt NA styles.css en verandert alleen het uiterlijk; geen functie
   of knop is aangeraakt. Alles werkt pas als het portaal open is (body:has(#appScreen[style*="block"])), zodat
   het inlogscherm apart geregeld kan worden: dat is zwart-goud met gouden
   sterren (blok 15), alleen in de donkere stand.
   De standaard blijft donker (zijn keuze); de lichte weergave krijgt dezelfde
   stijl. Terugdraaien = de <link> naar dit bestand in index.html weghalen.

   Vaste wensen die blijven: ID-nummer groot en duidelijk in een vakje; een
   heldere lijn tussen de regels; volle statusvlaggetjes; categorieknoppen en
   tegels zonder iconen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Niets beweegt vanzelf in het portaal ────────────────────────────── */
body:has(#appScreen[style*="block"]) .fx-bg,body:has(#appScreen[style*="block"]) #xt-starfield{display:none!important;}
.hdr-in::before,.hdr-in::after{content:none!important;display:none!important;}
.hdr-in img{animation:none!important;filter:none!important;}
.hdr .rule{animation:none!important;}
.stat::after{content:none!important;display:none!important;}
.stats .stat,.hb-track,.hb-score,.health,.tabs,.tc,.tc>*,.rtable tbody tr,.hero h2,.hero h2::after{animation:none!important;}
.badge::before{animation:none!important;}
body:has(#appScreen[style*="block"]) :is(.btn-red,.btn-blue,.btn-green,.invbtn)::after{content:none!important;display:none!important;}
body:has(#appScreen[style*="block"]) :is(.stat,.ptab,.docrow,.fbtn,.kfbtn,.theme-toggle,.btn-red,.btn-green,.btn-blue,.btn-ghost,.invbtn,.cert-btn):hover{transform:none!important;}
.hero h2::after{display:none!important;}
.hero h2{padding-bottom:0!important;}

/* ── 2. Letter ──────────────────────────────────────────────────────────── */
body:has(#appScreen[style*="block"]){font-family:'Geist','Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body:has(#appScreen[style*="block"]) :is(.btn,.ptab,.fbtn,.kfbtn,.invbtn,.cert-btn,.hist-cert,.mcl,.xt-back,.gh-btn,.badge,.field label,.dlbl,thead th,.tg-lbl,
.docfolder-lbl,.contact strong,.admin-card h3,.toast,.hb-title,.catov-t,.grouphdr td,.st-was-titel){
  font-family:'Geist','Barlow',system-ui,sans-serif!important;}
body:has(#appScreen[style*="block"]) #userLbl,body:has(#appScreen[style*="block"]) :is(.mono,tbody tr:not(.grouphdr) td:first-child,.rtable td[data-label="ID nummer"] strong,.klant-item .ke){
  font-family:'Geist Mono','IBM Plex Mono',ui-monospace,Consolas,monospace!important;}

/* ── 3. Kleuren: donker en licht ────────────────────────────────────────── */
body.dark:has(#appScreen[style*="block"]){
  color-scheme:dark;
  --paper:#08090b; --card:#111215; --card2:#17181c;
  --ink:#efece4; --text:#efece4; --muted:#a19d91; --faint:#7d796f; --blue:#a19d91;
  --line:rgba(255,245,220,.075); --line2:rgba(255,245,220,.14);
  --ctrl:#1a1b1f; --ctrl-hover:#222327; --ctrl-br:rgba(255,245,220,.14);
  --red:#ff5a66; --red-d:#c8101f;
  --goud:#c4a062; --goud-t:#dcc08a; --goud-lijn:rgba(196,160,98,.40); --goud-zacht:rgba(196,160,98,.12);
  --knop-a:#f1dca2; --knop-b:#a87d34; --knop-fg:#1b1407; --knop-rand:#7a5a20;
  --metaal:linear-gradient(90deg,#7d5a1f 0%,#e8cd88 22%,#b0853a 45%,#f4e2a8 68%,#94702c 100%);
  --groen-t:#3fca72;
  --id-bg:#1c1d21; --rij-lijn:rgba(255,245,220,.10); --rij-even:rgba(255,245,220,.022); --rij-h:rgba(255,245,220,.05);
  --kop-bg:rgba(8,9,11,.72);
  --tk-licht:rgba(255,245,220,.06);
  --tk-schaduw:0 12px 30px -16px rgba(0,0,0,.65);
  --w1:rgba(205,165,80,.34); --w2:rgba(105,74,22,.62); --w3:rgba(22,38,66,.62); --w4:rgba(205,165,80,.14);
  --staal-a:rgba(255,250,235,.085); --staal-l:rgba(255,250,235,.032); --staal-g1:rgba(24,25,29,.9); --staal-g2:rgba(10,11,13,.5);
}
body:not(.dark):has(#appScreen[style*="block"]){
  color-scheme:light;
  --paper:#f4f3ef; --card:#ffffff; --card2:#ffffff;
  --ink:#17150f; --text:#17150f; --muted:#625e54; --faint:#857f73; --blue:#625e54;
  --line:rgba(40,32,15,.09); --line2:rgba(40,32,15,.15);
  --ctrl:#ffffff; --ctrl-hover:#f6f3eb; --ctrl-br:rgba(40,32,15,.16);
  --red:#c8101f; --red-d:#8f0c17;
  --goud:#93702c; --goud-t:#76561c; --goud-lijn:rgba(147,112,44,.42); --goud-zacht:rgba(147,112,44,.10);
  --metaal:linear-gradient(90deg,#8a6526 0%,#d9b866 22%,#a07630 45%,#e6c983 68%,#8a6526 100%);
  --knop-a:#d9b56a; --knop-b:#a98236; --knop-fg:#1b1407; --knop-rand:#8f6f2f;
  --groen-t:#15803d;
  --id-bg:#f5f2ea; --rij-lijn:rgba(40,32,15,.11); --rij-even:rgba(40,32,15,.022); --rij-h:rgba(154,118,48,.07);
  --kop-bg:rgba(244,243,239,.78);
  --tk-licht:rgba(255,255,255,1);
  --tk-schaduw:0 10px 26px -14px rgba(60,45,15,.22);
  --w1:rgba(205,160,70,.24); --w2:rgba(180,130,50,.13); --w3:rgba(70,95,140,.11); --w4:rgba(205,160,70,.11);
  --staal-a:rgba(255,255,255,.95); --staal-l:rgba(40,32,15,.032); --staal-g1:rgba(236,234,228,.95); --staal-g2:rgba(226,223,215,.55);
}
body:has(#appScreen[style*="block"]){
  --glas:color-mix(in srgb,var(--card) 86%,transparent);
  --tk-laag:0 1px 0 var(--tk-licht) inset,0 0 0 1px var(--line),var(--tk-schaduw);
  --tk-knop:0 1px 0 var(--tk-licht) inset,0 0 0 1px var(--ctrl-br);
  --shadow:var(--tk-laag);
  --ok:#16a34a; --soon:#b38600; --nok:var(--red);
  background:var(--paper)!important;
  --tk-gloed:
    radial-gradient(55% 55% at 4% 0%,var(--w1),transparent 62%),
    radial-gradient(48% 55% at 100% 6%,var(--w2),transparent 66%),
    radial-gradient(60% 55% at 12% 100%,var(--w3),transparent 66%),
    radial-gradient(45% 45% at 88% 100%,var(--w4),transparent 70%);
}
/* Geborsteld staal bovenin; schuift mee met de pagina en vaagt weg. */
body:has(#appScreen[style*="block"])::before{content:"";position:absolute;left:0;right:0;top:0;height:460px;z-index:0;pointer-events:none;
  background:
    linear-gradient(116deg,transparent 30%,var(--staal-a) 44%,transparent 57%),
    repeating-linear-gradient(0deg,var(--staal-l) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,var(--staal-g1),var(--staal-g2));
  -webkit-mask-image:linear-gradient(#000 0,#000 120px,transparent 100%);mask-image:linear-gradient(#000 0,#000 120px,transparent 100%);}
/* Fijne korrel over de hele achtergrond, onder de inhoud. */
body:has(#appScreen[style*="block"])::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  /* Gloed en korrel op één vaste laag: die tekent de browser één keer en schuift
     hij daarna alleen mee. Als background-attachment:fixed met een mengmodus
     erover moest het hele scherm bij elke scrollbeweging opnieuw (10-10-2026). */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"),var(--tk-gloed);}
body:has(#appScreen[style*="block"]) .app{position:relative;z-index:1;}
body:has(#appScreen[style*="block"]) ::selection{background:var(--goud-lijn);}
body:has(#appScreen[style*="block"]) :focus-visible{outline:2px solid var(--goud);outline-offset:2px;}
body:has(#appScreen[style*="block"]) a{color:var(--goud-t);}

/* ── 4. Kop ─────────────────────────────────────────────────────────────── */
body:has(#appScreen[style*="block"]) .hdr{background:var(--kop-bg);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--goud-lijn);box-shadow:none;}
body:has(#appScreen[style*="block"]) .hdr .rule{display:none;}
body:has(#appScreen[style*="block"]) .hdr-in{padding:10px 24px;gap:10px 12px;}
body:has(#appScreen[style*="block"]) .hdr-in img{height:38px;}
body:has(#appScreen[style*="block"]) .hdr-title .wm{font-family:'Barlow Condensed',sans-serif!important;font-size:19px!important;letter-spacing:.04em!important;color:var(--ink)!important;}
body:has(#appScreen[style*="block"]) .admin-badge{background:transparent;color:var(--goud-t);box-shadow:0 0 0 1px var(--goud);border-radius:6px;font-family:'Geist',sans-serif;font-weight:600;letter-spacing:.02em;font-size:11.5px;}
body:has(#appScreen[style*="block"]) #userLbl,body:has(#appScreen[style*="block"]) .xt-back,body:has(#appScreen[style*="block"]) .theme-toggle,body:has(#appScreen[style*="block"]) .hdr-out{
  height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:8px;border:0!important;
  background:var(--ctrl);box-shadow:var(--tk-knop);color:var(--muted);font-size:12.5px;font-weight:500;letter-spacing:0;}
body:has(#appScreen[style*="block"]) #userLbl{color:var(--ink);}
body:has(#appScreen[style*="block"]) .xt-back:hover,body:has(#appScreen[style*="block"]) .theme-toggle:hover,body:has(#appScreen[style*="block"]) .hdr-out:hover{background:var(--ctrl-hover);color:var(--ink);}
body:has(#appScreen[style*="block"]) #cprFoot{color:var(--faint)!important;}
body:has(#appScreen[style*="block"]) .main{padding-top:32px;}
body:has(#appScreen[style*="block"]) .hero h2{font-family:'Geist',sans-serif;font-weight:600;font-size:30px;letter-spacing:-.025em;line-height:1.1;color:var(--ink);}
body:has(#appScreen[style*="block"]) .hero .hint{color:var(--muted);}

/* ── 5. Statustegels: mat glas, kleurrand bovenaan, groot cijfer ───────── */
body:has(#appScreen[style*="block"]) .stats{gap:12px;margin-top:20px;}
@media (min-width:980px){ body:has(#appScreen[style*="block"]) .stats{grid-template-columns:repeat(5,minmax(0,1fr));} }
body:has(#appScreen[style*="block"]) .stat{--tc:var(--goud);
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--tc) 14%,transparent),transparent 60%),var(--glas)!important;
  border:0!important;border-radius:12px;box-shadow:var(--tk-laag);padding:16px 18px 15px;filter:none!important;transition:box-shadow .15s ease;}
body:has(#appScreen[style*="block"]) .stat::before{display:block!important;content:""!important;left:16px!important;right:16px!important;top:0!important;bottom:auto!important;width:auto!important;height:2px!important;
  border-radius:0 0 2px 2px;background:var(--tc)!important;box-shadow:0 0 12px var(--tc);}
body:has(#appScreen[style*="block"]) .stat:hover{box-shadow:0 1px 0 var(--tk-licht) inset,0 0 0 1px var(--goud-lijn),var(--tk-schaduw);filter:none!important;}
body:has(#appScreen[style*="block"]) .stat.s-tot{--tc:var(--goud);}
body:has(#appScreen[style*="block"]) .stat.s-ok{--tc:#16a34a;}
body:has(#appScreen[style*="block"]) .stat.s-soon{--tc:#f2c200;}
body:has(#appScreen[style*="block"]) .stat.s-exp{--tc:#ff7a00;}
body:has(#appScreen[style*="block"]) .stat.s-rep,body:has(#appScreen[style*="block"]) .stat.s-afg{--tc:#e0303c;}
body:has(#appScreen[style*="block"]) .stat .n,body:has(#appScreen[style*="block"]) .stat.s-ok .n,body:has(#appScreen[style*="block"]) .stat.s-soon .n,body:has(#appScreen[style*="block"]) .stat.s-exp .n,body:has(#appScreen[style*="block"]) .stat.s-tot .n,body:has(#appScreen[style*="block"]) .stat.s-afg .n{
  color:var(--ink)!important;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:44px;line-height:.95;letter-spacing:0;font-variant-numeric:tabular-nums;}
body:has(#appScreen[style*="block"]) .stat .n::after{color:var(--faint);opacity:1;font-family:'Geist',sans-serif;font-weight:500;font-size:12px;}
body:has(#appScreen[style*="block"]) .stat .l,body:has(#appScreen[style*="block"]) .stat.s-ok .l,body:has(#appScreen[style*="block"]) .stat.s-soon .l,body:has(#appScreen[style*="block"]) .stat.s-exp .l,body:has(#appScreen[style*="block"]) .stat.s-tot .l,body:has(#appScreen[style*="block"]) .stat.s-afg .l{
  color:var(--muted)!important;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;margin-top:8px;display:flex;align-items:center;gap:7px;}
body:has(#appScreen[style*="block"]) .stat .l::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--tc);flex:none;}

/* ── 6. Gezondheidsbalk en categorieën ──────────────────────────────────── */
body:has(#appScreen[style*="block"]) .health{margin:18px 0 4px;}
body:has(#appScreen[style*="block"]) .hb-title{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--muted);}
body:has(#appScreen[style*="block"]) .hb-score{font-family:'Barlow Condensed',sans-serif;font-size:18px;color:var(--groen-t);}
body:has(#appScreen[style*="block"]) .hb-track{height:10px;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.25);}
body:has(#appScreen[style*="block"]) .hb-leg{color:var(--muted);font-size:12.5px;}
body:has(#appScreen[style*="block"]) .hb-leg b{color:var(--ink);font-weight:600;}
body:has(#appScreen[style*="block"]) .hb-leg:hover{color:var(--ink);}
body:has(#appScreen[style*="block"]) .hb-leg i{width:8px;height:8px;border-radius:2px;}
body:has(#appScreen[style*="block"]) .catov-t{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--muted);margin:22px 0 10px;}
body:has(#appScreen[style*="block"]) .catov-lijst{gap:8px;}
body:has(#appScreen[style*="block"]) .catov-r{background:var(--glas);
  border:0;box-shadow:var(--tk-laag);border-radius:12px;min-height:64px;}
body:has(#appScreen[style*="block"]) .catov-r:hover{background:color-mix(in srgb,var(--card) 78%,transparent);border:0;box-shadow:0 1px 0 var(--tk-licht) inset,0 0 0 1px var(--goud-lijn),var(--tk-schaduw);}
body:has(#appScreen[style*="block"]) .catov-streep{width:3px;margin:12px 0 12px 12px;border-radius:2px;}
body:has(#appScreen[style*="block"]) .catov-n{font-family:'Geist',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink)!important;}
body:has(#appScreen[style*="block"]) .catov-p{color:var(--faint)!important;}
body:has(#appScreen[style*="block"]) .catov-s{font-weight:600;}
body:has(#appScreen[style*="block"]) .catov-tot{font-family:'Barlow Condensed',sans-serif;font-weight:800;color:var(--ink)!important;}
body:has(#appScreen[style*="block"]) .catov-tot i{color:var(--faint)!important;font-family:'Geist',sans-serif;font-weight:500;}
body:has(#appScreen[style*="block"]) .catov-pijl{color:var(--faint)!important;}

/* ── 7. Tabbladen, zoeken, filters ──────────────────────────────────────── */
body:has(#appScreen[style*="block"]) .tabs{border-bottom:1px solid var(--line);gap:4px;margin-top:28px;}
body:has(#appScreen[style*="block"]) .ptab{font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;padding:12px 14px;color:var(--muted);transition:color .15s;}
body:has(#appScreen[style*="block"]) .ptab:hover,body:has(#appScreen[style*="block"]) .ptab.active{color:var(--ink);}
body:has(#appScreen[style*="block"]) .ptab::after{height:2px;bottom:-1px;left:10px;right:10px;background:var(--goud);box-shadow:0 0 10px var(--goud-lijn);transition:transform .2s ease;}
body:has(#appScreen[style*="block"]) .search{background-color:var(--glas)!important;border:0!important;box-shadow:var(--tk-laag);border-radius:10px;color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23948f84%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%277%27/%3E%3Cline x1=%2721%27 y1=%2721%27 x2=%2716.5%27 y2=%2716.5%27/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:15px center!important;}
body:has(#appScreen[style*="block"]) .search:focus{box-shadow:0 1px 0 var(--tk-licht) inset,0 0 0 1px var(--goud),0 0 0 4px var(--goud-zacht);}
body:has(#appScreen[style*="block"]) .search::placeholder{color:var(--faint);}
body:has(#appScreen[style*="block"]) .fbtn,body:has(#appScreen[style*="block"]) .kfbtn{background:var(--ctrl);border:0;box-shadow:var(--tk-knop);color:var(--muted);border-radius:99px;font-weight:500;letter-spacing:0;padding:8px 14px;}
body:has(#appScreen[style*="block"]) .fbtn:hover,body:has(#appScreen[style*="block"]) .kfbtn:hover{background:var(--ctrl-hover);color:var(--ink);}
body:has(#appScreen[style*="block"]) .fbtn.active,body:has(#appScreen[style*="block"]) .kfbtn.active,body:has(#appScreen[style*="block"]) .fbtn.f-all.active{background:color-mix(in srgb,var(--goud) 13%,var(--ctrl));color:var(--goud-t);box-shadow:0 0 0 1px var(--goud);border-color:var(--goud);}
body:has(#appScreen[style*="block"]) .fbtn.f-ok.active{background:#16a34a;color:#fff;box-shadow:none;}
body:has(#appScreen[style*="block"]) .fbtn.f-rep.active{background:#e0303c;color:#fff;box-shadow:none;}
body:has(#appScreen[style*="block"]) .fbtn.f-afg.active{background:#8e1116;color:#fff;box-shadow:none;}
body:has(#appScreen[style*="block"]) .fbtn.f-meer.open{background:var(--ctrl-hover);color:var(--ink);box-shadow:0 0 0 1px var(--goud-lijn);}
body:has(#appScreen[style*="block"]) .fcount{background:var(--goud);color:var(--knop-fg);}
body:has(#appScreen[style*="block"]) .fpanel{background:var(--glas);border:0;box-shadow:var(--tk-laag);}
body:has(#appScreen[style*="block"]) .fp>span{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px;color:var(--muted);}
body:has(#appScreen[style*="block"]) .fp select,body:has(#appScreen[style*="block"]) .fpfoot button,body:has(#appScreen[style*="block"]) #grpBar select,body:has(#appScreen[style*="block"]) #grpBar button,body:has(#appScreen[style*="block"]) #adminScopeInput,body:has(#appScreen[style*="block"]) #bulkBar{
  background:var(--ctrl)!important;border:0!important;box-shadow:var(--tk-knop);color:var(--ink)!important;border-radius:8px!important;}
body:has(#appScreen[style*="block"]) #adminScopeList{background:var(--card2)!important;border:0!important;box-shadow:0 0 0 1px var(--line2),0 18px 40px -10px rgba(0,0,0,.5)!important;}
body:has(#appScreen[style*="block"]) .invbtn.invbtn-2{background:var(--ctrl);border:0;box-shadow:var(--tk-knop);color:var(--ink);border-radius:9px;
  font-family:'Geist',sans-serif;font-weight:500;font-size:13.5px;letter-spacing:0;padding:10px 15px;}
body:has(#appScreen[style*="block"]) .invbtn.invbtn-2:hover{background:var(--ctrl-hover);box-shadow:0 1px 0 var(--tk-licht) inset,0 0 0 1px var(--goud-lijn);}
body:has(#appScreen[style*="block"]) .hl-menu-lijst{background:var(--card2);border:0;box-shadow:0 0 0 1px var(--line2),0 18px 40px -10px rgba(0,0,0,.5);}
body:has(#appScreen[style*="block"]) .hl-menu-item{color:var(--ink);}
body:has(#appScreen[style*="block"]) .hl-menu-item:hover{background:var(--ctrl-hover);}

/* ── 8. De lijst ────────────────────────────────────────────────────────── */
body:has(#appScreen[style*="block"]) .twrap{background:var(--glas);border:0;border-radius:12px;box-shadow:var(--tk-laag);}
body:has(#appScreen[style*="block"]) .twrap:hover{box-shadow:var(--tk-laag);}
body:has(#appScreen[style*="block"]) thead th{background:color-mix(in srgb,var(--card2) 70%,transparent);color:var(--faint);font-weight:500;font-size:12px;letter-spacing:.02em;text-transform:none;border-bottom:1px solid var(--line2);}
body:has(#appScreen[style*="block"]) tbody td{color:var(--ink);}
body:has(#appScreen[style*="block"]) .rtable tbody tr[data-st] td{background:transparent!important;border-bottom:1px solid var(--rij-lijn)!important;}
body:has(#appScreen[style*="block"]) .rtable tbody tr[data-st]:nth-child(even) td{background:var(--rij-even)!important;}
body:has(#appScreen[style*="block"]) .rtable tbody tr[data-st]:hover td{background:var(--rij-h)!important;}
body:has(#appScreen[style*="block"]) .rtable tbody tr:hover{background:transparent;}
body:has(#appScreen[style*="block"]) .rtable tbody tr:not(.grouphdr):hover td:first-child{box-shadow:inset 2px 0 0 var(--goud);}
body:has(#appScreen[style*="block"]) .rtable td[data-label="Omschrijving"]{font-weight:500;}
body:has(#appScreen[style*="block"]) .rtable td[data-label="Inspectie"],body:has(#appScreen[style*="block"]) .rtable td[data-label="Volgende"]{font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;color:var(--muted);}
body:has(#appScreen[style*="block"]) .rtable td[data-label="ID nummer"] strong{background:var(--id-bg);border:0;box-shadow:0 0 0 1px var(--line2);color:var(--ink);
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;border-radius:6px;padding:3px 9px;}
body:has(#appScreen[style*="block"]) .grouphdr td,body:has(#appScreen[style*="block"]) .grouphdr.maphdr td{background:color-mix(in srgb,var(--card2) 80%,transparent)!important;color:var(--ink)!important;
  font-weight:600!important;font-size:15px!important;letter-spacing:-.005em;border-top:0!important;border-bottom:1px solid var(--line2)!important;box-shadow:none!important;}
body:has(#appScreen[style*="block"]) .grouphdr .ghcount{color:var(--faint)!important;font-weight:500!important;}
body:has(#appScreen[style*="block"]) .grouphdr.klanthdr td{background:color-mix(in srgb,var(--card2) 92%,transparent)!important;border-top:0!important;box-shadow:inset 3px 0 0 var(--goud)!important;}
body:has(#appScreen[style*="block"]) .kl-avatar{background:var(--ctrl);color:var(--goud-t);box-shadow:0 0 0 1px var(--goud-lijn);font-family:'Barlow Condensed',sans-serif;}
body:has(#appScreen[style*="block"]) .kl-sub{color:var(--muted);}
body:has(#appScreen[style*="block"]) .ghchip{font-family:'Geist',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:0;}
body:has(#appScreen[style*="block"]) .rtable tbody tr.grp-tussen td{background:transparent!important;}
body:has(#appScreen[style*="block"]) .gh-btn{background:var(--ctrl);border:0;box-shadow:var(--tk-knop);color:var(--ink);font-weight:500;}
body:has(#appScreen[style*="block"]) .gh-btn.gh-weg{background:#e11d2a;box-shadow:none;color:#fff;}
body:has(#appScreen[style*="block"]) .nodata{color:var(--muted);}
body:has(#appScreen[style*="block"]) .contact{background:var(--glas);border:0;box-shadow:var(--tk-laag);color:var(--muted);}
body:has(#appScreen[style*="block"]) .contact a{color:var(--goud-t);}
body:has(#appScreen[style*="block"]) .contact strong{color:var(--ink);}

/* Statusvlaggetjes: zelfde volle ladderkleuren, strakkere vorm */
body:has(#appScreen[style*="block"]) .badge{font-weight:600!important;letter-spacing:0!important;text-transform:none!important;border-radius:99px;font-size:12.5px;padding:4px 11px 4px 9px;box-shadow:0 1px 0 rgba(255,255,255,.18) inset;}
body:has(#appScreen[style*="block"]) .st-was{color:var(--faint);font-weight:500;}

/* Certificaatknop in de regel: rustig */
body:has(#appScreen[style*="block"]) .cert-btn,body:has(#appScreen[style*="block"]) .hist-cert{background:var(--ctrl)!important;border:0!important;box-shadow:var(--tk-knop);color:var(--ink)!important;
  font-weight:500;font-size:13px;letter-spacing:0;border-radius:8px;}
body:has(#appScreen[style*="block"]) .cert-btn:hover,body:has(#appScreen[style*="block"]) .hist-cert:hover{background:var(--ctrl-hover)!important;box-shadow:0 1px 0 var(--tk-licht) inset,0 0 0 1px var(--goud);}

/* ── 9. Knoppen: de hoofdknop is goud ──────────────────────────────────── */
body:has(#appScreen[style*="block"]) .btn{border-radius:10px;font-weight:600;letter-spacing:0;transition:background .15s,box-shadow .15s,transform .08s;}
body:has(#appScreen[style*="block"]) .btn:active{transform:translateY(1px) scale(.995);}
body:has(#appScreen[style*="block"]) .btn-red{background:linear-gradient(180deg,var(--knop-a),var(--knop-b))!important;color:var(--knop-fg)!important;border:0!important;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 1px var(--knop-rand),0 10px 22px -10px rgba(180,140,60,.6);filter:none;}
body:has(#appScreen[style*="block"]) .btn-red:hover{filter:brightness(1.05);}
body:has(#appScreen[style*="block"]) .btn-ghost{background:var(--ctrl);border:0;box-shadow:var(--tk-knop);color:var(--ink);}
body:has(#appScreen[style*="block"]) .admin-card{background:var(--glas);border:0;box-shadow:var(--tk-laag);}
body:has(#appScreen[style*="block"]) .admin-card h3::before{background:var(--goud);}
body:has(#appScreen[style*="block"]) .klant-item{background:var(--ctrl);border:0;box-shadow:var(--tk-knop);}

/* ── 10. Detailvenster ─────────────────────────────────────────────────── */
body:has(#appScreen[style*="block"]) .modal-bg{background:rgba(4,5,7,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
body:has(#appScreen[style*="block"]) .modal{background:linear-gradient(180deg,var(--card2),var(--card));border:0;border-radius:16px;color:var(--ink);
  box-shadow:0 1px 0 var(--tk-licht) inset,0 0 0 1px var(--line2),0 0 0 1px var(--goud-zacht),0 40px 90px -20px rgba(0,0,0,.6);}
body:has(#appScreen[style*="block"]) .modal h2{font-family:'Geist',sans-serif;font-weight:600;font-size:22px;letter-spacing:-.02em;}
body:has(#appScreen[style*="block"]) .mcl{background:var(--ctrl);border:0;box-shadow:var(--tk-knop);color:var(--muted);font-weight:500;border-radius:8px;}
body:has(#appScreen[style*="block"]) .mcl:hover{color:var(--ink);background:var(--ctrl-hover);}
body:has(#appScreen[style*="block"]) .drow{border-bottom:1px solid var(--line);}
body:has(#appScreen[style*="block"]) .dlbl{text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;color:var(--faint);}
body:has(#appScreen[style*="block"]) .dval{font-size:14.5px;color:var(--ink);}

/* ── 11. Documenten ────────────────────────────────────────────────────── */
body:has(#appScreen[style*="block"]) .doc-klant{font-family:'Geist',sans-serif;font-weight:600;letter-spacing:-.01em;border-bottom:1px solid var(--goud-lijn);color:var(--ink);}
body:has(#appScreen[style*="block"]) .docfolder{background:var(--glas);border:0;box-shadow:var(--tk-laag);border-radius:12px;}
body:has(#appScreen[style*="block"]) .docfolder:hover{box-shadow:0 1px 0 var(--tk-licht) inset,0 0 0 1px var(--goud-lijn),var(--tk-schaduw);}
body:has(#appScreen[style*="block"]) .docfolder-h{background:color-mix(in srgb,var(--card2) 70%,transparent);color:var(--ink);}
body:has(#appScreen[style*="block"]) .docfolder-h:hover{background:color-mix(in srgb,var(--card2) 92%,transparent);}
body:has(#appScreen[style*="block"]) .docfolder-lbl{font-weight:600;letter-spacing:-.005em;}
body:has(#appScreen[style*="block"]) .docfolder-cnt{background:transparent;box-shadow:0 0 0 1px var(--line2);color:var(--muted);font-family:'Geist Mono',monospace;}
body:has(#appScreen[style*="block"]) .docrow{background:transparent;border-top:1px solid var(--line);color:var(--ink);}
body:has(#appScreen[style*="block"]) .docrow:hover{background:var(--rij-h);}
body:has(#appScreen[style*="block"]) .docrow-nm{font-weight:500;color:var(--ink);}
body:has(#appScreen[style*="block"]) .docrow-sub{color:var(--faint);}
body:has(#appScreen[style*="block"]) .docrow-open{color:var(--goud-t);font-weight:500;}
body:has(#appScreen[style*="block"]) .docrow-del{border:0;box-shadow:var(--tk-knop);background:var(--ctrl);}

/* ── 12. Melding onderin ───────────────────────────────────────────────── */
body:has(#appScreen[style*="block"]) .toast{background:#17181c;color:#efece4;border:0;box-shadow:0 0 0 1px var(--goud-lijn),0 18px 40px -10px rgba(0,0,0,.6);font-weight:500;letter-spacing:0;border-radius:12px;}
body:has(#appScreen[style*="block"]) .toast.err{background:#b80016;color:#fff;}

/* ── 13. Telefoon ──────────────────────────────────────────────────────── */
@media (max-width:640px){
  body:has(#appScreen[style*="block"]) .hdr-in{padding:9px 14px;}
  body:has(#appScreen[style*="block"]) .hero h2{font-size:25px;}
  body:has(#appScreen[style*="block"]) .stat{padding:13px 14px;}
  body:has(#appScreen[style*="block"]) .stat .n{font-size:36px;}
  body:has(#appScreen[style*="block"]) .stat::before{left:12px!important;right:12px!important;}
  body:has(#appScreen[style*="block"]) .twrap{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;}
  body:has(#appScreen[style*="block"]) .rtable tbody tr[data-st]{background:var(--glas)!important;border:0!important;border-radius:12px;
    box-shadow:0 1px 0 var(--tk-licht) inset,0 0 0 1px var(--line2),var(--tk-schaduw);}
  body:has(#appScreen[style*="block"]) .rtable tbody tr[data-st] td,body:has(#appScreen[style*="block"]) .rtable tbody tr[data-st]:nth-child(even) td{background:transparent!important;border-bottom:1px solid var(--line)!important;}
  body:has(#appScreen[style*="block"]) .rtable tbody td::before{color:var(--faint);text-transform:none;letter-spacing:0;font-weight:500;font-size:12px;}
  body:has(#appScreen[style*="block"]) .rtable tbody tr.grouphdr{background:color-mix(in srgb,var(--card2) 80%,transparent)!important;border-radius:10px;}
  body:has(#appScreen[style*="block"]) .ptab{font-size:13.5px;padding:10px 11px;}
}

/* ── 14. Lijst blijft binnen beeld ─────────────────────────────────────────
   Geist is breder dan Barlow; de lijst kwam net niet meer uit binnen 1200 px
   (zijn schermafdruk, beheer met kolom Klant). Het portaal mag op een breed
   scherm breder worden en de cellen zijn compacter. Datums en het ID-nummer
   breken nooit. */
@media (min-width:1000px){ body:has(#appScreen[style*="block"]) .main,body:has(#appScreen[style*="block"]) .hdr-in{max-width:1400px;} }
@media (min-width:641px){
  body:has(#appScreen[style*="block"]) .rtable thead th{padding:10px 10px;white-space:normal;}
  body:has(#appScreen[style*="block"]) .rtable tbody td{padding:11px 10px;font-size:14px;}
  body:has(#appScreen[style*="block"]) .rtable td[data-label="Omschrijving"],body:has(#appScreen[style*="block"]) .rtable td[data-label="Locatie"],body:has(#appScreen[style*="block"]) .rtable td[data-label="Klant"]{overflow-wrap:anywhere;}
  body:has(#appScreen[style*="block"]) .rtable td[data-label="Inspectie"],body:has(#appScreen[style*="block"]) .rtable td[data-label="Volgende"]{font-size:12.5px;}
  body:has(#appScreen[style*="block"]) .rtable td[data-label="ID nummer"] strong{font-size:13.5px;padding:3px 8px;}
  body:has(#appScreen[style*="block"]) .rtable td[data-label="Status"] .badge{font-size:12px;max-width:200px;}
  body:has(#appScreen[style*="block"]) .st-was{white-space:normal;font-size:12px;}
  body:has(#appScreen[style*="block"]) .cert-btn{padding:6px 10px;font-size:12.5px;}
}
@media(prefers-reduced-motion:reduce){ body:has(#appScreen[style*="block"]) .btn,body:has(#appScreen[style*="block"]) .ptab,body:has(#appScreen[style*="block"]) .stat{transition:none!important;} }

/* ── 15. Inlogscherm: zwart-goud met sterren (08-10-2026) ─────────────────
   Zijn keuze uit drie voorbeelden ("zwart goud met sterren is mooi"). De
   sterren blijven en fonkelen zoals altijd, maar nu in goud; de achtergrond is
   dezelfde wolk als in het portaal, met staal bovenin. De kaart is van mat glas
   met een gouden lijn en een gouden knop. Het logo zweeft en glinstert niet
   meer: de sterren zijn de enige beweging. Alleen in de donkere stand (de
   standaard); wie zelf licht koos, ziet het lichte inlogscherm zoals het was. */
body.dark:not(:has(#appScreen[style*="block"])){
  background:
    radial-gradient(55% 55% at 4% 0%,rgba(205,165,80,.34),transparent 62%),
    radial-gradient(48% 55% at 100% 6%,rgba(105,74,22,.62),transparent 66%),
    radial-gradient(60% 55% at 12% 100%,rgba(22,38,66,.62),transparent 66%),
    radial-gradient(45% 45% at 88% 100%,rgba(205,165,80,.14),transparent 70%),
    #08090b!important;
  background-attachment:fixed!important;
}
body.dark:not(:has(#appScreen[style*="block"]))::before{content:"";position:fixed;left:0;right:0;top:0;height:420px;z-index:0;pointer-events:none;
  background:
    linear-gradient(116deg,transparent 30%,rgba(255,250,235,.07) 44%,transparent 57%),
    repeating-linear-gradient(0deg,rgba(255,250,235,.03) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(24,25,29,.85),rgba(10,11,13,.4));
  -webkit-mask-image:linear-gradient(#000 0,#000 100px,transparent 100%);mask-image:linear-gradient(#000 0,#000 100px,transparent 100%);}
/* de sterren in goud: het sterrenveld zelf blijft precies zoals het is */
body.dark:not(:has(#appScreen[style*="block"])) #xt-starfield{filter:sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.08);}
body.dark:not(:has(#appScreen[style*="block"])) .fx-star{background:#f3dfae!important;box-shadow:0 0 6px rgba(226,190,110,.8)!important;}
body.dark:not(:has(#appScreen[style*="block"])) .fx-glow{display:none;}
body.dark:not(:has(#appScreen[style*="block"])) .login-box{font-family:'Geist','Barlow',system-ui,sans-serif;background:rgba(17,18,21,.62);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:0;border-radius:16px;box-shadow:0 1px 0 rgba(255,245,220,.07) inset,0 0 0 1px rgba(255,245,220,.12),0 30px 70px -20px rgba(0,0,0,.75);}
body.dark:not(:has(#appScreen[style*="block"])) .login-box .rule{height:2px;background:linear-gradient(90deg,transparent,#b0853a 18%,#e8cd88 38%,#f4e2a8 55%,#b0853a 78%,transparent)!important;animation:none!important;}
body.dark:not(:has(#appScreen[style*="block"])) .logo-row img{animation:none!important;filter:none!important;}
body.dark:not(:has(#appScreen[style*="block"])) .logo-row::before,body.dark:not(:has(#appScreen[style*="block"])) .logo-row::after{content:none!important;display:none!important;}
body.dark:not(:has(#appScreen[style*="block"])) .logo-row h1{color:#efece4;letter-spacing:.03em;}
body.dark:not(:has(#appScreen[style*="block"])) .login-lead{color:#a19d91;border-bottom:1px solid rgba(255,245,220,.09);}
body.dark:not(:has(#appScreen[style*="block"])) .field label{font-family:'Geist','Barlow',system-ui,sans-serif;text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;color:#a19d91;}
body.dark:not(:has(#appScreen[style*="block"])) .field input{background:#1a1b1f!important;border:0!important;border-radius:10px;color:#efece4!important;
  box-shadow:0 1px 0 rgba(255,245,220,.06) inset,0 0 0 1px rgba(255,245,220,.14);}
body.dark:not(:has(#appScreen[style*="block"])) .field input::placeholder{color:#7d796f;}
body.dark:not(:has(#appScreen[style*="block"])) .field input:focus{box-shadow:0 0 0 1px #c4a062,0 0 0 4px rgba(196,160,98,.14)!important;}
body.dark:not(:has(#appScreen[style*="block"])) .btn-red{background:linear-gradient(180deg,#f6e6b4 0%,#dcb966 38%,#a87d34 72%,#d4b06a 100%)!important;color:#1b1407!important;border:0!important;
  font-family:'Geist','Barlow',system-ui,sans-serif;font-weight:600;letter-spacing:0;text-transform:none;border-radius:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 1px #8f6f2f,0 10px 22px -10px rgba(180,140,60,.6)!important;filter:none;}
body.dark:not(:has(#appScreen[style*="block"])) .btn-red::after{content:none!important;display:none!important;}
body.dark:not(:has(#appScreen[style*="block"])) .btn-red:hover{transform:none!important;filter:brightness(1.05)!important;}
body.dark:not(:has(#appScreen[style*="block"])) .login-foot{color:#a19d91;}
body.dark:not(:has(#appScreen[style*="block"])) .login-foot strong{color:#efece4;}
body.dark:not(:has(#appScreen[style*="block"])) .login-foot a{color:#dcc08a;}
body.dark:not(:has(#appScreen[style*="block"])) .wz-oog{color:#a19d91;}

/* ── Echt goud (10-10-2026) ─────────────────────────────────────────────────
   Het vlakke goud was te geel. Nu warmer antiek goud voor tekst en randjes, en
   metaalglans (licht-donker-licht zoals gepoetst metaal) alleen op de grote
   dingen: de lijn onder de kop, het actieve tabblad en de gouden knoppen. Op
   kleine letters geen glans, dat leest slechter. De Totaal-tegel is een eigen
   goudvlak zonder streepje bovenaan: dat streepje is van de statustegels, en
   in goud leek het op het geel van "Binnenkort aan de beurt". Niets beweegt. */
body:has(#appScreen[style*="block"]) .hdr{border-bottom:0;position:relative;}
body:has(#appScreen[style*="block"]) .hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--metaal);opacity:.85;pointer-events:none;}
body:has(#appScreen[style*="block"]) .ptab::after{background:var(--metaal);box-shadow:0 0 8px var(--goud-lijn);}
body:has(#appScreen[style*="block"]) .admin-card h3::before{background:var(--metaal);}
body:has(#appScreen[style*="block"]) .btn-red{background:linear-gradient(180deg,#f6e6b4 0%,#dcb966 38%,#a87d34 72%,#d4b06a 100%)!important;}
body:has(#appScreen[style*="block"]) .fbtn.active,body:has(#appScreen[style*="block"]) .kfbtn.active,body:has(#appScreen[style*="block"]) .fbtn.f-all.active{background:linear-gradient(180deg,rgba(244,226,168,.20),rgba(148,112,44,.10))!important;}
body:has(#appScreen[style*="block"]) .stat.s-tot::before,body:has(#appScreen[style*="block"]) .stat.s-tot .l::before{display:none!important;}
body:has(#appScreen[style*="block"]) .stat.s-tot{background:linear-gradient(155deg,rgba(240,214,145,.34) 0%,rgba(176,133,58,.22) 45%,rgba(96,70,26,.30) 100%),#16130d!important;
  box-shadow:0 1px 0 rgba(255,240,200,.22) inset,0 0 0 1px rgba(210,172,100,.65),0 12px 30px -14px rgba(120,90,30,.45)!important;}
body:has(#appScreen[style*="block"]) .stat.s-tot .n{background:linear-gradient(180deg,#fff3cf 0%,#eccb7c 50%,#c39441 85%,#f0d698 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;}
body:has(#appScreen[style*="block"]) .stat.s-tot .l{color:#f0dcae!important;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;}
body:has(#appScreen[style*="block"]) .stat.s-tot .st-body > *:not(.n):not(.l),body:has(#appScreen[style*="block"]) .stat.s-tot small{color:#e6cf9c!important;}
body:not(.dark):has(#appScreen[style*="block"]) .stat.s-tot{background:linear-gradient(155deg,#fbf0d2 0%,#ecd39a 45%,#d2ad62 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px #b8913f,0 10px 24px -14px rgba(120,90,30,.45)!important;}
body:not(.dark):has(#appScreen[style*="block"]) .stat.s-tot .n{background:linear-gradient(180deg,#6e4f16 0%,#3d2b0a 100%);-webkit-background-clip:text;background-clip:text;}
body:not(.dark):has(#appScreen[style*="block"]) .stat.s-tot .l{color:#4a3510!important;}
body:not(.dark):has(#appScreen[style*="block"]) .stat.s-tot .st-body > *:not(.n):not(.l),body:not(.dark):has(#appScreen[style*="block"]) .stat.s-tot small{color:#5c4314!important;}
body:not(.dark):has(#appScreen[style*="block"]) .fbtn.active,body:not(.dark):has(#appScreen[style*="block"]) .kfbtn.active,body:not(.dark):has(#appScreen[style*="block"]) .fbtn.f-all.active{background:linear-gradient(180deg,rgba(236,211,154,.55),rgba(210,173,98,.30))!important;}

/* Klantlogo in de klantregel van "Alle klanten" (12-10-2026), zoals in de
   keuringtool: een wit vlakje zodat ook een donker logo leesbaar blijft. */
.kl-avatar.kl-logo{background:#fff!important;padding:4px;width:84px;height:46px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;}
.kl-avatar.kl-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;}

/* "Zet het portaal op je beginscherm" (12-10-2026): rustige balk bovenaan. */
.bs-aanbod{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:10px 14px 0;padding:12px 14px;border-radius:12px;
  background:var(--card,#16171b);box-shadow:0 0 0 1px var(--goud-lijn,rgba(196,160,98,.4));color:var(--ink,#efece4);font-size:14px;line-height:1.45;}
.bs-tekst{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 260px}
.bs-tekst span{color:var(--muted,#a19d91)}
.bs-tekst .bs-stappen{color:var(--ink,#efece4)}
.bs-knoppen{display:flex;gap:8px;flex-wrap:wrap}
.bs-knoppen button{min-height:44px;padding:0 16px;border-radius:10px;border:0;font-weight:600;font-size:14px;font-family:inherit;cursor:pointer}
.bs-ja{background:linear-gradient(180deg,#f6e6b4 0%,#dcb966 38%,#a87d34 72%,#d4b06a 100%);color:#1b1407}
.bs-nee{background:transparent;color:var(--muted,#a19d91);box-shadow:inset 0 0 0 1px var(--line2,rgba(255,245,220,.14))}

/* ── Licht thema: niet alles wit (27-10-2026) ─────────────────────────────
   Drie lagen: witte kaarten en invulvelden, een warm grijze achtergrond
   daartussen, en knoppen, filterknoppen en keuzelijsten nog een tint donkerder
   met donkere tekst, zodat je ziet wat je kunt aanklikken. Tabelkop en
   klantregels licht getint. Alleen het lichte thema; donker blijft zoals het is. */
body:not(.dark):has(#appScreen[style*="block"]){
  --paper:#ece8df; --card:#ffffff; --card2:#f3efe6;
  --muted:#545047; --faint:#6f6a5f;
  --line:rgba(40,32,15,.13); --line2:rgba(40,32,15,.20);
  --ctrl:#cfc1a3; --ctrl-hover:#c2b18e; --ctrl-br:rgba(40,32,15,.36);
  --id-bg:#efeadf; --rij-lijn:rgba(40,32,15,.13); --rij-even:rgba(40,32,15,.03);
  --kop-bg:rgba(236,232,223,.88);
  --tk-schaduw:0 10px 26px -14px rgba(60,45,15,.30);
  --staal-g1:rgba(226,222,212,.95); --staal-g2:rgba(214,209,197,.55);
}
body:not(.dark):has(#appScreen[style*="block"]) .fbtn,
body:not(.dark):has(#appScreen[style*="block"]) .kfbtn,
body:not(.dark):has(#appScreen[style*="block"]) .gh-btn,
body:not(.dark):has(#appScreen[style*="block"]) .btn-ghost,
body:not(.dark):has(#appScreen[style*="block"]) .invbtn.invbtn-2,
body:not(.dark):has(#appScreen[style*="block"]) .cert-btn,
body:not(.dark):has(#appScreen[style*="block"]) .mcl{color:#231f18;font-weight:600;}
body:not(.dark):has(#appScreen[style*="block"]) .fbtn:hover,
body:not(.dark):has(#appScreen[style*="block"]) .gh-btn:hover,
body:not(.dark):has(#appScreen[style*="block"]) .btn-ghost:hover,
body:not(.dark):has(#appScreen[style*="block"]) .invbtn.invbtn-2:hover{background:var(--ctrl-hover);}
body:not(.dark):has(#appScreen[style*="block"]) thead th{background:#ede8dd;color:#4d483f;}
body:not(.dark):has(#appScreen[style*="block"]) .grouphdr.klanthdr td{background:#f6f2ea!important;}
body:not(.dark):has(#appScreen[style*="block"]) .catov-r{background:#fff;}
body:not(.dark):has(#appScreen[style*="block"]) #adminScopeInput,
body:not(.dark):has(#appScreen[style*="block"]) .search{background-color:#fff!important;box-shadow:0 0 0 1px rgba(40,32,15,.24)!important;}