/* Firmenda-thema voor het portaal. Laadt NA style.css en gebruikt dezelfde selectors,
   dus elke pagina en klasse blijft bestaan. Waarden komen van www.firmenda.com. */
:root{
  --kalksteen:#f2efe9; --papier:#fbfaf7; --inkt:#171a1c; --leisteen:#4a5560;
  --patina:#0f5c53; --patina-licht:#1c7d70; --brons:#a67c1a; --lijn:#ddd7cc;
  /* bestaande namen uit style.css krijgen Firmenda-waarden */
  --navy:var(--patina); --navy-hover:var(--patina-licht); --navy-line:var(--lijn);
  --ict:var(--patina); --tag:var(--patina); --emp:var(--leisteen);
  --bg0:var(--kalksteen); --bg1:var(--kalksteen); --card:var(--papier); --card2:#f6f3ec;
  --ink:var(--inkt); --muted:#68717a; --line:var(--lijn); --label:var(--leisteen);
  --tint:#e6eeea; --veld:#cbc4b6;
  /* status blijft status: nooit de merkkleur */
  --ok:#2e7d32; --err:#b3261e; --warn:#b7791f;
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--kalksteen);-webkit-font-smoothing:antialiased}

/* kop: lichte balk zoals de website, geen donkere band */
header.top{background:rgba(242,239,233,.92);backdrop-filter:blur(10px);color:var(--inkt);
  border-bottom:1px solid var(--lijn);padding:12px 22px}
header.top .logolink{gap:10px;color:var(--inkt);text-decoration:none}
header.top .logolink .naam{font-size:20px;font-weight:800;letter-spacing:-.025em;color:var(--inkt)}
header.top a{color:var(--leisteen)}
header.top nav{gap:6px;font-weight:500}
header.top nav a,header.top nav .navkop{color:var(--leisteen);padding:5px 9px;border-radius:7px}
header.top nav a:hover,header.top nav .navkop:hover,
header.top .cpmenu a:hover,header.top .langmenu a:hover{background:rgba(15,92,83,.08);color:var(--inkt)}
header.top nav .navmenu,header.top .cpgroep .cpmenu,header.top .langgroep .langmenu{
  background:var(--papier);border:1px solid var(--lijn);border-radius:9px;
  box-shadow:0 10px 26px rgba(23,26,28,.12)}
header.top nav .navmenu a{font-weight:500}
header.top nav .navmenu a:hover{background:rgba(15,92,83,.08)}
header.top .klantkiezer select{background:var(--papier);color:var(--inkt);border:1px solid var(--lijn);border-radius:8px}
header.top .userchip .uname{color:var(--inkt)}
header.top .iconbtn{color:var(--leisteen);border:1px solid var(--lijn);background:transparent}
header.top .iconbtn:hover{background:rgba(15,92,83,.08);color:var(--inkt)}
header.top nav a.nogniet,header.top .cpmenu a.nogniet{color:#9a9488}
header.top nav a.nogniet:hover{color:#9a9488}

/* typografie */
h1{font-size:25px;font-weight:800;letter-spacing:-.025em}
h2{font-size:17px;font-weight:700;letter-spacing:-.01em;border-left:0;padding-left:0}
.eyebrow{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brons);font-weight:700;margin:0 0 6px}

/* kaarten en cijfers */
.card,.kpi,.tile{background:var(--papier);border:1px solid var(--lijn);border-radius:12px;box-shadow:none}
.kpi .n{font-weight:800;letter-spacing:-.02em}

/* knoppen */
.btn{background:var(--patina);border:1px solid var(--patina);border-radius:8px;font-weight:650;transition:background .18s}
.btn:hover{background:var(--patina-licht)}
.btn.sec{background:transparent;color:var(--patina);border:1px solid var(--lijn)}
.btn.sec:hover{background:rgba(15,92,83,.07);border-color:var(--patina)}

/* tabellen */
th{background:transparent;border-bottom:1px solid var(--inkt);color:var(--leisteen);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700}
td{border-bottom:1px solid var(--lijn)}
tr:hover td{background:rgba(15,92,83,.04)}

/* formulieren */
input:focus,select:focus,textarea:focus{border-color:var(--patina);box-shadow:0 0 0 3px rgba(15,92,83,.14)}
.badge.role{background:var(--tint);color:var(--patina);border:1px solid #c9d9d2}

/* subnavigatie */
.ndbar a{background:var(--papier);color:var(--leisteen);border:1px solid var(--lijn);box-shadow:none}
.ndbar a:hover{background:rgba(15,92,83,.07);border-color:var(--patina)}
.ndbar a.on{background:var(--patina);color:#fff;border-color:var(--patina)}

/* style.css zet deze regels met body.report-light/.theme-light: zelfde gewicht nodig */
body.report-light header.top,body.theme-light header.top{background:rgba(242,239,233,.92)}
body.report-light header.top a,body.theme-light header.top a{color:var(--leisteen)}
body.report-light header.top .logolink,body.theme-light header.top .logolink{color:var(--inkt)}
body.report-light .card,body.report-light .kpi,body.theme-light .card,body.theme-light .kpi{box-shadow:none}
body.report-light .mono,body.theme-light .mono,
body.report-light .codes div,body.theme-light .codes div{background:#ece7dc;border-color:var(--lijn)}
/* knop als link: in style.css wint de linkkleur, daardoor is die tekst nu onleesbaar */
body.report-light a.btn,body.theme-light a.btn,body.report-light a.btn:hover,body.theme-light a.btn:hover{color:#fff;text-decoration:none}
body.report-light .btn.sec,body.theme-light .btn.sec,
body.report-light a.btn.sec,body.theme-light a.btn.sec{color:var(--patina);border-color:var(--lijn)}
body.report-light a.btn.danger,body.theme-light a.btn.danger{color:#fff}
body.report-light .ndbar a,body.theme-light .ndbar a{color:var(--leisteen)}
body.report-light .ndbar a.on,body.theme-light .ndbar a.on{color:#fff}

/* h1 is flex in style.css: text-align werkt daar niet */
.auth-wrap h1{justify-content:center}

/* kant-en-klare SVG uit opgeslagen rapporten: attribuut is geen token */
svg [stroke="#94a3b8"]{stroke:#68717a}
svg [fill="#94a3b8"]{fill:#68717a}
svg [stroke="#3b82f6"]{stroke:#1c7d70}
svg [fill="#3b82f6"]{fill:#1c7d70}

/* Menu's leesbaar (Ton 02-11-2026): style.css zet het uitklapmenu met body.report-light op
   --navy (patina), daardoor stond leisteen-tekst op donkergroen. Licht paneel, donkere tekst,
   geselecteerd = patina met witte tekst. */
body.report-light header.top nav .navmenu,body.theme-light header.top nav .navmenu{
  background:#fff;border:1px solid var(--lijn);box-shadow:0 10px 26px rgba(23,26,28,.16)}
body.report-light header.top nav .navmenu a,body.theme-light header.top nav .navmenu a{color:var(--inkt);font-weight:600}
body.report-light header.top nav .navmenu a:hover,body.theme-light header.top nav .navmenu a:hover,
body.report-light header.top nav .navmenu a:focus,body.theme-light header.top nav .navmenu a:focus{
  background:var(--patina);color:#fff;text-decoration:none}
body.report-light header.top nav .navmenu a.nogniet,body.theme-light header.top nav .navmenu a.nogniet,
body.report-light header.top nav .navmenu a.nogniet:hover,body.theme-light header.top nav .navmenu a.nogniet:hover{
  background:transparent;color:#68717a}
/* hoofdmenu: tekst donker, aangewezen of geopend = patina met witte tekst */
body.report-light header.top nav a,body.theme-light header.top nav a,
header.top nav .navkop{color:var(--inkt)}
body.report-light header.top nav>a:hover,body.theme-light header.top nav>a:hover,
header.top nav .navgroep:hover .navkop,header.top nav .navgroep:focus-within .navkop,
header.top nav .navkop:hover{background:var(--patina);color:#fff;text-decoration:none}
/* linkermenu's: subtekst stond patina-licht op patina */
body .ipnav a.actief .sub{color:#dcebe7}
body .ipnav a.actief,body .snav a.actief,body .vnav a.actief,body .cpnav a.actief{background:var(--patina);color:#fff}