/* =============================================================================
   VKV merk-harmonisatie — één gedeeld licht VKV-thema over alle tools.
   Additief: laadt ALS LAATSTE, ná de tool-eigen styles.css. Twee delen:
     1. donkere VKV-topbar (chrome) — uniform met portaal/login;
     2. werkvlak-thema — overschrijft de :root-tokens (kleur/achtergrond/font)
        die elke tool al gebruikt, zodat knoppen/kaders/tabellen re-skinnen naar
        het canonieke palet (wit, #191919, #4F57FF, BW Gradual — zie brandguide).
   Raakt geen HTML-structuur, IDs of JS. Eén <link>-regel weg = volledige rollback.
   ============================================================================= */

@font-face {
  font-family: "BW Gradual";
  src: url("fonts/BwGradual-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BW Gradual";
  src: url("fonts/BwGradual-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================ WERKVLAK-THEMA
   Eén licht VKV-thema (brandguide): witte achtergrond, tekst #191919, accent
   exact #4F57FF, BW Gradual. We overschrijven de :root-tokens die elke tool al
   gebruikt → knoppen/kaders/achtergronden re-skinnen automatisch, zonder per
   component werk. Eén bron van waarheid voor het palet over alle tools. */
:root {
  /* accent (exact #4F57FF — vervangt o.a. het oude #635EFF) */
  --vkv-paars: #4F57FF !important;        --vkv-purple: #4F57FF !important;
  --vkv-paars-hover: #3F47E5 !important;
  --vkv-paars-licht: #ECEEFF !important;  --vkv-purple-bg: #ECEEFF !important;
  --vkv-purple-bg-soft: #F6F7FF !important; --vkv-purple-light: #8B90FF !important;
  /* tekst → #191919 (geen pure zwart) */
  --kleur-tekst: #191919 !important;      --vkv-black: #191919 !important;
  --black: #191919 !important;            --vkv-zwart: #191919 !important;
  /* achtergrond + kaart → wit */
  --kleur-bg: #FFFFFF !important;         --paper: #FFFFFF !important;
  --vkv-paper: #FFFFFF !important;        --gray-50: #FFFFFF !important;
  --kleur-card: #FFFFFF !important;       --vkv-white: #FFFFFF !important;
  --white: #FFFFFF !important;
  /* font → BW Gradual */
  --font-sans: "BW Gradual", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif !important;
}
/* Tools die de body-font hardcoden (hub/werf) i.p.v. via --font-sans. */
body {
  font-family: "BW Gradual", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  background: #FFFFFF;
}

/* ---- Donkere VKV-topbar (uniform met portaal + login) -------------------- */
header,
header.topbar {
  background: #0d0b1c !important;
  color: #eceaff !important;
  border-bottom: 1px solid rgba(120, 110, 255, 0.28) !important;
  font-family: "BW Gradual", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif !important;
}
header * { font-family: inherit !important; }

/* Tool-eigen VKV-wordmark/logo verbergen — geen dubbel met het portaal-logo.
   Dekt: werfverslag (tekst "vkv" + divider) en lastenboek (logo-afbeelding). */
header .logo-vkv,
header .logo-divider,
header img.logo,
header .brand > img.logo { display: none !important; }

/* Toolnaam → licht */
header .logo-titel,
header .tool-name,
header .logo > span:last-child {
  color: #cfd0ff !important;
}

/* Nav-links in de header */
header nav a {
  color: #b9b6e6 !important;
}
header nav a:hover {
  color: #ffffff !important;
  background: rgba(79, 87, 255, 0.18) !important;
}
header nav a.active,
header nav a.is-active,
header .hoofdtab.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #5b63ff, #7d52ff) !important;
}

/* Statusje rechts */
header .userbox,
header #user-status,
header #ai-status,
header .userbox * {
  color: #9a96c4 !important;
}
header .navbadge { background: var(--vkv-paars) !important; color: #fff !important; }

/* Home-knop (naar /auth/home). GEEN VKV-logo in de tool → geen dubbel logo met
   het portaal. target="_top" springt ook vanuit de portaal-iframe naar de home. */
header .vkv-home {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #cfd0ff !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 6px 11px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(120, 110, 255, 0.35) !important;
  background: rgba(79, 87, 255, 0.12) !important;
}
header .vkv-home:hover {
  background: rgba(79, 87, 255, 0.26) !important;
  color: #ffffff !important;
}
header .vkv-home svg { width: 15px; height: 15px; flex-shrink: 0; }