/* ============================================================
   CX Report — Design System overlay (demo)
   Bron: CX Digital Design System kit + de live look van cxreport.nl.
   Portal-modus: diep navy chrome + lichte content, MONOSPACE koppen,
   CX-blauw accent, JetBrains Mono cijfers, kleine uppercase labels.
   Wordt geladen NA de inline <style> van elke pagina, dus deze regels
   winnen op bronvolgorde; fundamentals staan op !important.
   ============================================================ */

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

:root{
  /* ---- bestaande demo-variabelen hermappen naar CX-tokens ---- */
  --navy:#132845;      --cx-navy:#132845;
  --blue:#1486F0;      --cx-blue:#1486F0;   --sky:#2D95F5;
  --green:#12A87B;     --amber:#F58A1F;     --red:#B42318;
  /* ---- CX design-tokens ---- */
  --cx-bg:#F5F7FB;     --cx-card:#FFFFFF;   --cx-border:#E2E5EB;
  --cx-ink:#1F2433;    --cx-muted:#6B7280;
  --cx-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --cx-sans:'Inter',ui-sans-serif,system-ui,sans-serif;
}

/* ---- Body: Inter op lichte achtergrond ---- */
body{ font-family:var(--cx-sans)!important; background:var(--cx-bg)!important; color:var(--cx-ink)!important; }

/* ---- Koppen: JetBrains Mono, mixed case, tracking-tight (de CX-signatuur) ---- */
h1,h2,h3,h4,h5,h6{ font-family:var(--cx-sans)!important; letter-spacing:-.011em; }
/* mono blijft waar het betekenis heeft: cijfers, KPI's en kleine labels (zie hieronder) */

/* ---- Header/topbar: diep navy ---- */
header{ background:var(--cx-navy)!important; }
.pulse{ background:linear-gradient(120deg,#132845,#1b3f6b)!important; }

/* ---- Cijfers / KPI's / metrics in mono (tabular report-gevoel) ---- */
.ptile .val, .rcard .mini b, .ic-meta .score, .ic-meta .macro,
table.cmp td.val, table.cmp td, .delta, .kpi b, .num{
  font-family:var(--cx-mono)!important;
}

/* ---- Eyebrows & labels: klein, UPPERCASE, mono (zoals cxreport.nl) ---- */
.sec-label .tag, .ptile .lbl, .pick label, .rcard .go,
.ic-code, table.cmp th{
  font-family:var(--cx-mono); text-transform:uppercase; letter-spacing:.06em;
}

/* ---- Kaarten & panelen: CX-rand + zachte radius ---- */
.rcard, .sec, .pickers, .intro, .legend, .swimlane-wrapper,
.footer-section, .ic-card, .sopband, .aanpak{
  border-color:var(--cx-border)!important; border-radius:12px;
}

/* ---- Primaire actieknoppen in CX-groen ---- */
.pulse-top .refresh, .hbtn.sop{ background:#16A34A!important; border-color:#16A34A!important; }

/* ---- Links in CX-blauw ---- */
a{ text-decoration-color:var(--cx-blue); }

/* ---- Merk-logo: transparante drager (blauwe cirkel toont schoon) ---- */
.brand-logo{ background:transparent!important; }

/* ============================================================
   Reporting-cockpit (hub-landing) — componentstijl
   ============================================================ */
.rep-cockpit{ margin-bottom:24px; }
.rep-cockpit .sec-label{ display:flex;align-items:center;gap:10px;margin:18px 0 12px;flex-wrap:wrap; }
.rep-cockpit .sec-label .n{ width:22px;height:22px;border-radius:50%;background:#1486F0;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center; }
.rep-cockpit .sec-label h2{ margin:0!important;font-size:16px;font-weight:800;border:none!important;padding:0!important; }
.rep-cockpit .sec-label .tag{ font-size:12px;color:#5b6470;font-weight:600; }
.pulse{ background:linear-gradient(120deg,#132845,#1b3f6b);border-radius:14px;padding:16px 20px;box-shadow:0 3px 14px rgba(15,33,62,.2);margin-bottom:14px; }
.pulse-top{ display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap; }
.pulse-top .live{ background:#64748b;color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;font-family:var(--cx-mono); }
.pulse-top .live.on{ background:#1C64AC; }
.pulse-top h2{ margin:0!important;font-size:14px;font-weight:800;color:#fff;border:none!important;padding:0!important; }
.pulse-top .sub{ font-size:11.5px;color:#c7d2e0; }
.pgrid{ display:grid;grid-template-columns:repeat(5,1fr);gap:12px; }
.ptile{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:13px 15px; }
.ptile .lbl{ font-size:11.5px;color:#c7d2e0;font-weight:600; }
.ptile .val{ font-size:30px;font-weight:800;color:#fff;line-height:1.05;margin-top:3px;font-family:var(--cx-mono); }
.ptile.warn .val{ color:#ffb4a6; }
.ptile .hint{ font-size:11px;color:#9fb0c2;margin-top:3px; }
@media(max-width:900px){ .pgrid{grid-template-columns:repeat(2,1fr)} }
.rcards{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:13px;margin-bottom:6px; }
.rcard{ display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid #E2E5EB;border-radius:12px;padding:16px 18px;box-shadow:0 1px 3px rgba(15,33,62,.07);transition:box-shadow .15s,transform .15s;border-left:5px solid #1486F0; }
.rcard:hover{ box-shadow:0 8px 20px rgba(15,33,62,.15);transform:translateY(-2px); }
.rcard h3{ margin:0 0 3px;font-size:15.5px;font-weight:800; }
.rcard p{ margin:0 0 14px;font-size:12.5px;color:#5b6470;line-height:1.4; }
.rcard .mini{ display:flex;gap:16px;margin-top:0;margin-bottom:14px;padding-top:10px;border-top:1px solid #eef2f8; }
.rcard .mini div{ font-size:11.5px;color:#5b6470;font-weight:600; }
.rcard .mini b{ display:block;font-size:18px;color:#132845;font-weight:800;font-family:var(--cx-mono); }
.rcard.kpi{ border-left-color:#2D95F5; }
.rcard.voc{ border-left-color:#1486F0; } /* was rood — rood/amber blijft gereserveerd voor risico */
.sop-div{ margin-top:20px;border-top:1px solid #E2E5EB;padding-top:16px; }

/* ============================================================
   Design-punt 1 — kaartclusters (Werkvoorraad / Rapportage / Analyse)
   ============================================================ */
.rgroup{ margin-bottom:18px; }
.rgroup:last-of-type{ margin-bottom:6px; }
.rgroup > .glabel{
  display:flex; align-items:center; gap:8px; margin:0 0 9px;
  font-family:var(--cx-mono); text-transform:uppercase; letter-spacing:.08em;
  font-size:11.5px; font-weight:700; color:#132845;
}
.rgroup > .glabel .cnt{ font-weight:500; color:#6B7280; letter-spacing:.04em; text-transform:none; font-size:11px; }
.rgroup > .glabel::after{ content:""; flex:1; height:1px; background:#E2E5EB; }
.rgroup > .rcards{ margin-bottom:0; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

/* ============================================================
   Design-punt 2 — 1 CTA per kaart: groene knop rechtsonder
   (hele kaart blijft klikbaar; geen losse tekstlinks meer)
   ============================================================ */
.rcard .go{
  margin:auto 0 0 auto;            /* duwt de knop naar rechtsonder, lijnt uit over de rij */
  display:inline-flex; align-items:center;
  background:#16A34A; color:#fff;
  border-radius:8px; padding:8px 14px;
  font-size:11.5px; font-weight:800;
  font-family:var(--cx-mono); text-transform:uppercase; letter-spacing:.05em;
  box-shadow:0 1px 2px rgba(15,33,62,.12);
  transition:background .15s;
}
.rcard:hover .go, .rcard:focus-visible .go{ background:#12833C; }
.rcard:focus-visible{ outline:2px solid #1486F0; outline-offset:2px; }


/* ============================================================
   Design-punt 3 — chartkleuren: 1 serie-paar + 1 statusschaal
   Serie:  intern #63B3E8 (licht) · BPO #1C64AC (diep)
   Status: goed #1C64AC · neutraal #94A3B8 · aandacht #F58A1F · risico #B42318
   Groen komt NIET meer voor in data — groen betekent voortaan alleen 'doen'.
   ============================================================ */
:root{
  --cx-serie-intern:#63B3E8; --cx-serie-bpo:#1C64AC;
  --cx-status-goed:#1C64AC;  --cx-status-neutraal:#94A3B8;
  --cx-status-aandacht:#F58A1F; --cx-status-risico:#B42318;
}

/* ============================================================
   Design-punt 5 — vaste knop-ankers
   Terug = LINKSBOVEN, ghost/blauw (navigeren)
   Taal + verversen = RECHTSBOVEN, groen alleen voor verversen (doen)
   ============================================================ */
header .lang-toggle{ margin-left:auto!important; }

.topbar{ display:flex!important; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px!important; }
.topbar > .back{ margin:0 auto 0 0!important; }

.back{
  display:inline-flex!important; align-items:center; gap:8px;
  background:#FFFFFF!important; color:#1486F0!important;
  border:1.5px solid #D7DEE8!important; border-radius:9px!important;
  padding:9px 15px!important; margin:0 0 16px!important;
  font-size:13.5px!important; font-weight:700!important;
  text-decoration:none!important; box-shadow:none!important;
  transition:border-color .15s, background .15s;
}
.back:hover{ border-color:#1486F0!important; background:#EFF6FF!important; }

.refresh, button.refresh, #refresh{
  display:inline-flex!important; align-items:center; gap:8px;
  background:#16A34A!important; border:1.5px solid #16A34A!important; color:#fff!important;
  border-radius:9px!important; padding:9px 16px!important;
  font-size:13.5px!important; font-weight:700!important;
  font-family:inherit!important; cursor:pointer;
  box-shadow:0 2px 6px rgba(22,163,74,.22)!important;
  transition:background .15s;
}
.refresh:hover:not(:disabled), button.refresh:hover:not(:disabled), #refresh:hover{
  background:#12833C!important; border-color:#12833C!important;
}
.refresh:disabled{ opacity:.6; cursor:default; }

/* taalknop in een topbar (pagina's zonder donkere header) */
.topbar .lang-toggle{
  background:#FFFFFF!important; color:#1486F0!important;
  border:1.5px solid #D7DEE8!important; border-radius:9px!important;
  padding:9px 15px!important; font-size:13.5px!important; font-weight:800!important;
  font-family:var(--cx-mono)!important; letter-spacing:.04em; cursor:pointer;
}
.topbar .lang-toggle:hover{ border-color:#1486F0!important; background:#EFF6FF!important; }


/* ============================================================
   SOP-pagina's — 'Afgerond'-groen gelijkgetrokken met het ageing-groen
   (#10b981 staat inline in 119 SOP-bestanden; hier centraal overschreven,
    zodat je maar 1 bestand hoeft te uploaden)
   ============================================================ */
.step.success{ border-color:#12A87B!important; }
.step.success .step-num{ background:#12A87B!important; }
.modal .step-tag.success{ background:#12A87B!important; }
.legend-dot[style*="10b981"]{ background:#12A87B!important; }
.concept-banner.goedgekeurd{ border-left-color:#12A87B!important; }