/* ============================================================================
   stijl-nieuw.css — de keuringtool in de stijl van de webshop (26-10-2026)

   Zijn vraag: "zou je de keuringtool in dezelfde stijl willen maken als de
   webshop, qua kleuren/design/layout/knoppen … want nu is het een beetje
   amateur toch?". De webshop (xtreme-testing.com) draait op een diep
   nachtblauw met antiek goud als enige accent; rood komt daar alleen in het
   logo voor.

   Wat hier verandert:
   - het accent wordt goud (#c4a062, knoppen met de goudglans van de webshop)
     in plaats van rood. Rood betekende in de tool tegelijk "merk", "knop",
     "kies mij" én "afgekeurd"; nu is rood weer alleen afkeur en gevaar;
   - kaarten zonder rode streep links, met de dunne lichte rand van de webshop;
   - minder HOOFDLETTERS, gewone letter (Geist) voor tekst, Barlow Condensed
     alleen nog voor koppen;
   - één soort gewone knop (doorzichtig met lichte rand) en één hoofdknop (goud).

   Wat NIET verandert: de statusladder (--st-*), handschoenmaten, de opbouw
   van de schermen en alles wat op certificaten/rapporten komt.

   Alles hangt onder body.stijl-nieuw: zet hem in Beheer → Voorkeuren uit en
   de oude stijl staat er weer, zonder iets anders te raken.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

/* ── Kleuren ─────────────────────────────────────────────────────────────── */
body.stijl-nieuw{
  /* Het accent heette altijd --red; door die namen te vullen met goud volgen
     de honderden plekken die het accent gebruiken vanzelf mee. */
  --red:#c4a062; --red-2:#a8843f; --red-accent:#dcc08a; --red-soft:#e9d3a3;
  --red-glow:rgba(196,160,98,.28);
  --goud-glans:linear-gradient(180deg,#fff2c4 0%,#f2cf6b 40%,#d9a63a 75%,#f0c862 100%);
  --op-goud:#1b1407;
  /* Echt rood, voor afkeur en gevaar */
  --gevaar:#e0303c; --gevaar-t:#ff6b74;

  --black:#0d1117; --dark:#121821; --card:#1b212b; --card-2:#232a35;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14); --inp:#121821;
  --text:#efece4; --muted:#a3a9b3; --muted-2:#6b7380;
  --blue:#c4a062;
  --radius:14px; --radius-sm:9px;
  --shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px rgba(0,0,0,.30);

  background:#0d1117;
  font-family:'Geist','Barlow',system-ui,sans-serif;
  letter-spacing:-.005em;
}
body.stijl-nieuw::before{
  background:radial-gradient(120% 70% at 50% -10%,#18202b 0%,#0f141b 50%,#0d1117 100%);
}
body.stijl-nieuw a{color:var(--red-accent);}
body.stijl-nieuw ::selection{background:rgba(196,160,98,.35);}
body.stijl-nieuw input,
body.stijl-nieuw select,
body.stijl-nieuw textarea,
body.stijl-nieuw button{font-family:'Geist','Barlow',system-ui,sans-serif;}
/* Vinkjes en keuzerondjes in goud */
body.stijl-nieuw input[type=checkbox],
body.stijl-nieuw input[type=radio]{accent-color:#c4a062;}

/* ── Kopbalk ─────────────────────────────────────────────────────────────── */
body.stijl-nieuw .hdr{
  background:rgba(13,17,23,.92);border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
body.stijl-nieuw .hdr::after{display:none;}
body.stijl-nieuw .htxt h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:21px;letter-spacing:.01em;}
body.stijl-nieuw .brand-logo{filter:none;}
body.stijl-nieuw .hbadge{
  background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.18)!important;
  font-family:'Geist',sans-serif;font-weight:500;font-size:13px;border-radius:8px;padding:7px 13px;
}
body.stijl-nieuw .hbadge:hover{border-color:rgba(255,255,255,.35)!important;}

/* ── Kaarten ─────────────────────────────────────────────────────────────── */
body.stijl-nieuw .card,
body.stijl-nieuw .wf-card,
body.stijl-nieuw .folder{
  background:#1b212b;border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
body.stijl-nieuw .wf-card:hover,
body.stijl-nieuw .folder:hover{border-color:rgba(196,160,98,.55);background:#1f2631;}
body.stijl-nieuw .ctitle{
  font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;
  text-transform:none;letter-spacing:.01em;color:var(--text);
}
body.stijl-nieuw .ctitle::before{background:#c4a062;height:14px;}
body.stijl-nieuw .wf-tx b{font-size:20px;}
body.stijl-nieuw .wf-arr{color:#c4a062;}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */
body.stijl-nieuw .btn{
  font-family:'Geist',sans-serif;font-weight:600;font-size:15px;
  text-transform:none;letter-spacing:0;border-radius:var(--radius-sm);
}
body.stijl-nieuw .btn:hover{filter:brightness(1.07);}
body.stijl-nieuw .btn:active,
body.stijl-nieuw button:not(:disabled):active{filter:brightness(1.12);}
body.stijl-nieuw .btn-primary,
body.stijl-nieuw .gids-go{
  background:var(--goud-glans);color:var(--op-goud);
  box-shadow:0 4px 14px rgba(217,166,58,.22),inset 0 1px 0 rgba(255,255,255,.5);
}
body.stijl-nieuw .btn-blue,
body.stijl-nieuw .btn-ghost{
  background:rgba(255,255,255,.05);color:var(--text);
  border:1px solid rgba(255,255,255,.16);box-shadow:none;
}
body.stijl-nieuw .btn-blue:hover,
body.stijl-nieuw .btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);}
/* Rode knoppen blijven rood: die gaan over afkeur of weggooien */
body.stijl-nieuw .btn-rood{background:rgba(224,48,60,.08);border:1px solid rgba(224,48,60,.5);color:#ff8088;}
body.stijl-nieuw .btn-rood:hover{background:rgba(224,48,60,.16);border-color:#e0303c;}
body.stijl-nieuw .btn:focus-visible,
body.stijl-nieuw button:focus-visible{outline:2px solid #dcc08a;}

/* Overal waar de tool wit op het accent zette: op goud moet de tekst donker,
   anders lees je hem niet. */
body.stijl-nieuw .gs-n,
body.stijl-nieuw .ic-gekozen .ic-vink,
body.stijl-nieuw .plan-chip.aan,
body.stijl-nieuw .rl-chip .rl-n,
body.stijl-nieuw .datum-nu:hover,
body.stijl-nieuw .herin-knop,
body.stijl-nieuw .ronde-sync-uit button,
body.stijl-nieuw .rr-vink.aan,
body.stijl-nieuw .rt-tab.aan,
body.stijl-nieuw .ka-kop b,
body.stijl-nieuw .kw-stap.kw-nu .kw-bol,
body.stijl-nieuw .keur-back:hover,
body.stijl-nieuw .eh-knop.aan{color:var(--op-goud);}
body.stijl-nieuw .keur-back:hover .kb-pijl{color:var(--op-goud);}
body.stijl-nieuw .eh-knop.aan{background:rgba(196,160,98,.22);color:var(--text);}
body.stijl-nieuw .herin-knop{background:var(--goud-glans);font-weight:700;}
body.stijl-nieuw .herin-knop2{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.18);}

/* ── Rood blijft rood waar het om gevaar of fouten gaat ──────────────────── */
body.stijl-nieuw .herin-urgent{border-color:rgba(224,48,60,.55);background:rgba(224,48,60,.10);}
body.stijl-nieuw .omn-rij-fout{border-color:var(--gevaar);background:rgba(224,48,60,.10);}
body.stijl-nieuw .omn-fout,
body.stijl-nieuw .mm-weg:hover,
body.stijl-nieuw .login-msg{color:var(--gevaar-t);}
body.stijl-nieuw .ab-rij-weg:hover,
body.stijl-nieuw .ab-rij-weg:focus-visible{background:var(--gevaar);border-color:var(--gevaar);color:#fff;}
body.stijl-nieuw .spraak-btn.luistert{background:var(--gevaar);border-color:var(--gevaar);color:#fff;}
body.stijl-nieuw .toast.err{background:var(--gevaar);}

/* ── Stap voor stap en hulpknoppen: geen los blauw meer ──────────────────── */
body.stijl-nieuw .stp-start{
  border:1px solid rgba(196,160,98,.5);
  background:linear-gradient(180deg,rgba(196,160,98,.16),rgba(196,160,98,.05));
}
body.stijl-nieuw .stp-nulabel{color:#dcc08a;}
body.stijl-nieuw .stp-kop{color:#dcc08a;}
body.stijl-nieuw .home-help{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:var(--text);}
body.stijl-nieuw .home-help:hover{background:rgba(255,255,255,.08);}

/* ── Minder hoofdletters ─────────────────────────────────────────────────── */
body.stijl-nieuw .field label,
body.stijl-nieuw .reslbl,
body.stijl-nieuw .ronde-lbl,
body.stijl-nieuw .snel-lbl,
body.stijl-nieuw .home-meer-kop,
body.stijl-nieuw .gids-sub,
body.stijl-nieuw .icmeta{
  text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--muted);
}
body.stijl-nieuw .home-meer-kop{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--text);}
body.stijl-nieuw .home-h1{font-size:32px;letter-spacing:0;}

/* ── Invoervelden ────────────────────────────────────────────────────────── */
body.stijl-nieuw .field input,
body.stijl-nieuw .field select,
body.stijl-nieuw .field textarea,
body.stijl-nieuw .search{
  background:#121821;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-sm);
  font-family:'Geist',sans-serif;
}

/* ── Filters, kruimelpad, chips ──────────────────────────────────────────── */
body.stijl-nieuw .fbtn.active{background:rgba(196,160,98,.16);border-color:#c4a062;color:#efd9a8;}
body.stijl-nieuw .crumb.active{color:#dcc08a;}

/* ── Onderbalk ───────────────────────────────────────────────────────────── */
body.stijl-nieuw .bnav{
  background:#0d1117;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -6px 18px rgba(0,0,0,.35);
}
body.stijl-nieuw .nb{font-family:'Geist',sans-serif;font-size:11.5px;font-weight:500;text-transform:none;}
body.stijl-nieuw .nb.active{color:#dcc08a;background:none;box-shadow:inset 0 2px 0 #c4a062;}
body.stijl-nieuw .nb.active .ni{filter:none;}

/* ── Vensters ────────────────────────────────────────────────────────────── */
body.stijl-nieuw .gids-card,
body.stijl-nieuw .picker-box{background:#1b212b;border-top:1px solid rgba(255,255,255,.1);}
@media(min-width:600px){
  body.stijl-nieuw .gids-card,
  body.stijl-nieuw .picker-box{border-left:1px solid rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);}
}

/* ── Inlogscherm ─────────────────────────────────────────────────────────── */
body.stijl-nieuw .login-card{background:#1b212b;border:1px solid rgba(255,255,255,.1);}
body.stijl-nieuw .login-card::before{background:var(--goud-glans);height:2px;}
body.stijl-nieuw .login-brand{animation:none;filter:none;}
body.stijl-nieuw .login-title{font-size:32px;}
body.stijl-nieuw .login-sub{text-transform:none;letter-spacing:0;font-size:13px;}

/* ── Het losse blauw van vroeger wordt rustig grijs of goud ──────────────── */
/* Knoppen bij een middel in de lijst (Certificaat, Sticker, Verberg): één
   soort, rustig; de prullenbak blijft rood. */
body.stijl-nieuw .ic-cert{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:var(--text);
  font-family:'Geist',sans-serif;font-weight:500;font-size:12.5px;
}
body.stijl-nieuw .ic-cert:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);}
body.stijl-nieuw .ic-del{background:rgba(224,48,60,.08);border-color:rgba(224,48,60,.45);color:#ff8088;}
body.stijl-nieuw .ic-del:hover{background:rgba(224,48,60,.18);border-color:#e0303c;}
body.stijl-nieuw .keur-cert{color:var(--text);}
body.stijl-nieuw .keur-cert:hover{border-color:#c4a062;background:rgba(196,160,98,.1);}
body.stijl-nieuw .sync-badge.busy{background:rgba(196,160,98,.12);color:#e9d3a3;border-color:rgba(196,160,98,.4);}
body.stijl-nieuw .klim-keuze,
body.stijl-nieuw .imc-map,
body.stijl-nieuw .ronde-klantziet{background:rgba(196,160,98,.07);border-color:rgba(196,160,98,.4);}
body.stijl-nieuw .klim-keuze>span,
body.stijl-nieuw .imc-map label{color:#e9d3a3;}
body.stijl-nieuw .klim-btn.active{background:rgba(196,160,98,.2);border-color:#c4a062;color:var(--text);}
body.stijl-nieuw .stp-nu .stp-nr{background:rgba(196,160,98,.22);}
body.stijl-nieuw .devbar{background:rgba(255,255,255,.03);}

/* Meldingen op het startscherm: de knop in goud-omlijnd, niet vol goud. Vier
   felle knoppen onder elkaar trokken meer aandacht dan het werk zelf. */
body.stijl-nieuw .herin-knop{
  background:rgba(196,160,98,.14);border:1px solid rgba(196,160,98,.6);color:#f0dcae;font-weight:600;
}
body.stijl-nieuw .herin-knop:hover{background:rgba(196,160,98,.24);}
body.stijl-nieuw .herin-urgent .herin-knop{background:var(--goud-glans);color:var(--op-goud);border-color:transparent;}
body.stijl-nieuw .herin-meer>summary{border:1px solid rgba(255,255,255,.14);font-family:'Geist',sans-serif;font-weight:500;}

/* Telefoon: de titel liep onder de verbindingsknop door */
@media (max-width:480px){
  body.stijl-nieuw .hdr{gap:8px;padding:10px 12px;}
  body.stijl-nieuw .brand-logo{height:38px;}
  body.stijl-nieuw .htxt h1{font-size:18px;white-space:nowrap;}
  body.stijl-nieuw .hbadge{padding:6px 10px;font-size:12.5px;}
}