/* ============================================================
   FastGroup — fg-theme  (PREMIUM design-system, build 494)
   DE ENIGE PLEK VOOR KLEUR, VORM, TYPE, AFSTAND, DIEPTE & MOTION.
   Premium = lucht + hiërarchie + zachte diepte. Verander hier één
   waarde → de hele software verandert mee. Licht + donker automatisch.
   Alle oude token-namen blijven bestaan (back-compat), met premium waarden.
   ============================================================ */

:root{
  /* ---- Merk (huisstijl) — GEGENEREERD uit public.tegels op 24/09/2026 17:06. Niet met de hand wijzigen. ---- */
  --brand:#ff8a1e; --brand-strong:#c76c17;
  --brand-2:#ff8a1e;
  --brand-soft:color-mix(in srgb,var(--brand) 14%,transparent);
  --brand-grad:linear-gradient(180deg,var(--brand),var(--brand-strong));
  --fastgroup:#3a7fd5; --fastgroup-2:#D4AF37; --fasthelp:#ff8a1e; --fasthelp-2:#ff8a1e; --fastmovers:#1E71D9; --fastmovers-2:#3a7fd5; --softsun:#21856B; --softsun-2:#D4AF37; --gpconsultancy:#D4AF37; --gpconsultancy-2:#111111; --sunenergy:#0d3d25; --sunenergy-2:#D4AF37;
  --move:#1E71D9; --gp:#D4AF37; --sun:#0d3d25; --sales:#0e7490;
  --on-brand:#fff; --ink-inverse:#fff;

  /* ---- Tekst ----
     BUILD 686 — Patrick, 10/9/2026: "de knop donker en licht, staat hij op licht is
     bijna niet meer leesbaar, ook al 1000 keer gezegd."
     Nagemeten in de lichte stand, met de echte contrastformule (WCAG): de bijtekst
     stond op #64748b tegen een achtergrond van #edf1f7. Dat is 4,2 op 21 — ONDER de
     grens van 4,5 die nodig is om kleine tekst comfortabel te lezen. Vandaar dat alles
     er uitgewassen uitzag: de filterknoppen, de tellers, de tabelkoppen, de kruimels.
     Niet ingebeeld dus, en meetbaar fout.
     Nu: bijtekst #475467 (6,3) en de lichtste variant #526077 (5,1). De lijnen zijn
     een tint donkerder zodat kaarten en tabellen weer randen hebben. */
  --ink:#0f172a; --text:var(--ink); --muted:#475467; --muted-2:#526077; --slate:#414b5a;

  /* ---- Vlakken (gelaagde neutrale ramp) ----
     BUILD 890 - 23/09/2026 - DE LICHTE STAND KREEG RANDEN EN DIEPTE.
     Patrick, 23/9: "en wat met de lichte kleur". Nagemeten met de echte
     contrastformule (WCAG), en het was niet de tekst - die is in build 686 al
     rechtgezet (ink 16,8 - bijtekst 7,2). Het waren de VLAKKEN: een witte kaart
     lichtte maar 1,06 op tegen de pagina en een rand haalde 1,28 tegen die kaart.
     Onder die waarden ziet een oog geen rand meer; alles smelt tot een witte vlek.
     De pagina is nu een tint dieper en de randen een tint donkerder:
     kaart 1,06 -> 1,12 - rand tegen kaart 1,28 -> 1,47 - sterke rand 1,51 -> 1,57.
     Alle tekst blijft ruim boven de leesgrens van 4,5 (laagste: 5,16).
     De donkere stand wordt hier niet geraakt: die staat in body.fg-dark. */
  --bg:#eef2f7; --surface:#fff; --card:var(--surface);
  --card-2:#e9eef5; --card-3:#e1e8f1;
  --line:#cdd6e4; --line-strong:#b9c4d4;
  --card-grad:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
  --scrim:rgba(9,13,22,.46); --backdrop:var(--scrim);
  --glass:rgba(255,255,255,.08); --glass-line:rgba(255,255,255,.16);

  /* ---- Status ---- */
  --ok:#16a34a; --danger:#e5484d; --warn:#f59e0b;
  /* BUILD 890 - dezelfde kleuren, maar donker genoeg om ALS TEKST te lezen.
     Op wit haalt het huisstijl-oranje #ff8a1e maar 2,36 en de waarschuwingsgele
     #f59e0b 2,15; de grens voor kleine tekst is 4,5. Deze vier zijn de tekstvorm
     van dezelfde vier kleuren: oranje 6,01 - groen 6,63 - rood 6,57 - amber 5,42
     (op wit), en 5,35 / 5,89 / 5,85 / 4,82 tegen de pagina. In de donkere stand
     draaien ze om naar de heldere varianten - zie body.fg-dark.

     BUILD 891 - HET ORANJE IS EEN TINT DONKERDER GEWORDEN, EN IN GEBRUIK GENOMEN.
     Twee correcties op build 890, allebei uit meting:
     1. Ik telde 84 plaatsen die color:var(--brand) zetten. Dat klopte niet: die
        telling ving ook border-color: en accent-color: mee, want die eindigen
        allebei op color:. Echt tekstkleur: 34. Randen (46) en vinkjes (3)
        blijven het heldere oranje dragen - die hoeven geen leescontrast.
     2. #a3530a haalde op de zachte oranje tinten (12 tot 20% oranje, waar 14 van
        die 34 op staan) maar 4,20 - net onder de grens. #9a4f05 haalt op alle
        zeven ondergronden die echt voorkomen minstens 4,57: witte kaart 6,01,
        pagina 5,35, card-3 4,87, tint van 20% 4,57.
     De 34 tekstplaatsen in fg-ui.css lezen sinds deze build --brand-ink.
     --ok, --danger en --warn als tekst (25 + 25 + 12) staan nog op de oude
     waarde: die worden eerst apart gemeten, zoals deze. */
  --brand-ink:#9a4f05; --ok-ink:#0f6b32; --danger-ink:#b42318; --warn-ink:#9a5b06;

  /* ---- Type (Inter) ---- */
  --font:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-display:34px; --lh-display:40px; --fw-display:680; --ls-display:-.02em;
  --fs-h1:30px; --lh-h1:32px; --fw-h1:640; --ls-h1:-.018em;
  --fs-h2:23px; --lh-h2:26px; --fw-h2:620; --ls-h2:-.012em;
  --fs-h3:20px; --lh-h3:22px; --fw-h3:600; --ls-h3:-.006em;
  --fs-body:17.5px; --lh-body:22px; --fw-body:440; --fw-body-strong:560;
  --fs-small:16px; --lh-small:18px;
  --fs-label:14px; --lh-label:16px; --fw-label:600; --ls-label:.08em;
  --fs-micro:13.5px; --lh-micro:14px; --fw-micro:500;

  /* ---- Radius (één taal) ---- */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --radius:var(--r-lg); --radius-sm:var(--r-sm);

  /* ---- Afstand (4-schaal, met de grote stappen) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --pad:var(--s-6); --gap:var(--s-4);
  --header-h:118px;
  --measure:760px; --shell-max:1440px;

  /* ---- Diepte (zachte gelaagde schaduwen) ---- */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04),0 1px 1px rgba(15,23,42,.03);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 2px 6px -1px rgba(15,23,42,.06),0 4px 12px -2px rgba(15,23,42,.05);
  --shadow-md:0 1px 2px rgba(15,23,42,.05),0 4px 10px -2px rgba(15,23,42,.07),0 12px 28px -6px rgba(15,23,42,.10);
  --shadow-lg:0 2px 4px rgba(15,23,42,.05),0 8px 20px -4px rgba(15,23,42,.10),0 28px 56px -12px rgba(15,23,42,.16);
  --shadow-xl:0 4px 8px rgba(15,23,42,.06),0 16px 40px -8px rgba(15,23,42,.14),0 44px 88px -20px rgba(15,23,42,.22);
  --shadow:var(--shadow-md);
  --hairline-top:inset 0 1px 0 rgba(255,255,255,.7);
  --glow-brand:0 4px 14px -2px color-mix(in srgb,var(--brand) 45%,transparent),0 2px 6px -1px color-mix(in srgb,var(--brand) 35%,transparent);
  --focus:0 0 0 3px color-mix(in srgb,var(--brand) 32%,transparent),0 0 0 1px var(--brand);

  /* ---- Motion ---- */
  --dur-fast:120ms; --dur:180ms; --dur-slow:260ms; --dur-modal:320ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  color-scheme:light;
}

/* ---- Donkere modus: premium diep-neutraal (geen puur zwart) ---- */
html[data-thema="dark"] body, body.fg-dark{
  --bg:#0d1117; --surface:#161b24; --card:var(--surface);
  --card-2:#1c222d; --card-3:#232a37;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  /* BUILD 890 - de tekstvorm van de vier kleuren, omgedraaid voor de donkere stand.
     Gemeten tegen surface #161b24: oranje 8,06 - groen 9,91 - rood 6,90 - amber 10,34. */
  --brand-ink:var(--brand); --ok-ink:#4ade80; --danger-ink:#ff7b7f; --warn-ink:#fbbf24;
  --ink:#e8edf5; --text:var(--ink); --muted:#a3b1c4; --muted-2:#93a1b5; --slate:#8d9aae;
  /* 14/10/2026 - DE DONKERE STAND MAG DE MERKKLEUR NIET VASTZETTEN.
     Patrick, 14/10: "snap dus niet vanwaar je hier met orange komt!" - en hij had gelijk.
     Hier stond --brand:#ff9838 (het oranje van FastHelp) HARD op body. fg-tegels.js zet
     de juiste merkkleur netjes op <html> (de fix van 10/10), maar body staat dichter bij
     het element en wint. Daardoor werd in de donkere stand ELKE afdeling oranje, hoeveel
     registers er ook goed stonden - en leek de fix van 10/10 te werken terwijl ze niets
     deed. Dat is vier maanden lang de reden geweest dat wise11 nooit blauw werd.
     Gemeten op 14/10 live in Patricks scherm: deze ene regel weghalen maakte de Wise 11-
     inbox meteen volledig blauw (#1677FF), zonder dat er iets anders wijzigde. En het
     geldt voor het HELE crm, niet enkel de inbox.
     --brand komt nu van <html>, dus uit public.tegels, dus per afdeling. Alleen de
     donkere variant wordt hier nog afgeleid, zodat hij mee verkleurt. */
  --brand-strong:color-mix(in srgb,var(--brand) 84%,#000);
  --brand-soft:color-mix(in srgb,var(--brand) 18%,transparent);
  --card-grad:linear-gradient(180deg,#191f29 0%,#151a23 100%);
  --scrim:rgba(0,0,0,.62); --backdrop:var(--scrim);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 12px -2px rgba(0,0,0,.5);
  --shadow-md:0 2px 4px rgba(0,0,0,.4),0 12px 28px -6px rgba(0,0,0,.6);
  --shadow-lg:0 4px 8px rgba(0,0,0,.45),0 28px 56px -12px rgba(0,0,0,.7);
  --shadow-xl:0 8px 16px rgba(0,0,0,.5),0 44px 88px -20px rgba(0,0,0,.8);
  --shadow:var(--shadow-md);
  --hairline-top:inset 0 1px 0 rgba(255,255,255,.06);
  --glow-brand:0 4px 18px -2px color-mix(in srgb,var(--brand) 40%,transparent);
  --focus:0 0 0 3px color-mix(in srgb,var(--brand) 40%,transparent),0 0 0 1px var(--brand);
  color-scheme:dark;
}

/* ============================================================
   Basislaag — alles hieronder gebruikt UITSLUITEND tokens.
   ============================================================ */
*{ box-sizing:border-box; }
/* LAPTOP-FIT: geen pagina-scrollbar; enkel aangewezen panelen scrollen. */
html,body{ margin:0; height:100%; overflow:hidden; }
/* 14/10/2026 - HET SCHERM SPRONG SOMS NAAR WIT.
   Patrick: "springt nog steeds soms naar wit", op twee verschillende laptops - dus
   geen grafische kaart. Gemeten in fg-core.js: initTheme() begint op 'light' en zet
   body.fg-dark pas NADAT 230 KB boot-code en 400 KB CSS geladen zijn. Tot dat moment
   tekent de browser de LICHTE stand: witte balken, witte rail, witte kaders. Bij een
   trage lading zie je dat. De entreepagina's zetten nu data-thema op <html> nog voor
   de eerste tekening; deze twee regels laten de donkere stand dan meteen gelden.
   De kleur hieronder is bewust de enige harde waarde: op dit punt in de cascade
   bestaat er nog geen token, want de tokens hangen aan body. */
html[data-thema="dark"]{ background:#0d1117; }
body{
  font-family:var(--font);
  font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--fw-body);
  background:var(--bg); color:var(--ink);
  font-feature-settings:"cv11","ss01"; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .2s ease, color .2s ease;
}
h1{ font:var(--fw-h1) var(--fs-h1)/var(--lh-h1) var(--font); letter-spacing:var(--ls-h1); margin:0; }
h2{ font:var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--font); letter-spacing:var(--ls-h2); margin:0; }
h3{ font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font); letter-spacing:var(--ls-h3); margin:0; }
.section-label{ font-size:var(--fs-label); line-height:var(--lh-label); font-weight:var(--fw-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); }

/* NETTE, SLANKE SCROLLBARS overal (i.p.v. de dikke OS-balken). */
*{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--muted) 42%,transparent) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--muted) 34%,transparent); border-radius:var(--r-pill); border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--muted) 55%,transparent); background-clip:padding-box; }

@media (prefers-reduced-motion:reduce){ *{ transition-duration:.01ms !important; animation:none !important; } }

.fg-brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:.2px; }
.fg-brand .dot{
  width:30px; height:30px; border-radius:9px; background:var(--brand-grad);
  display:flex; align-items:center; justify-content:center; color:var(--on-brand); font-size:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 10px -2px color-mix(in srgb, var(--brand) 65%, transparent);
}

.fg-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-6);
  box-shadow:var(--shadow-sm), var(--hairline-top);
}

.fg-btn{
  font:inherit; font-weight:560; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 15px; background:var(--card); color:var(--ink);
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.fg-btn:hover{ transform:translateY(-1px); border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.fg-btn:active{ transform:translateY(1px) scale(.99); }
.fg-btn:focus-visible{ outline:none; box-shadow:var(--focus); }
.fg-btn.brand{
  border:0; color:var(--on-brand); background:var(--brand-grad);
  box-shadow:var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.28);
}
.fg-btn.brand:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:var(--glow-brand), var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.32); }
.fg-btn.glass{ background:var(--glass); border:1px solid var(--glass-line); color:#fff; box-shadow:none; }
.fg-muted{ color:var(--muted); }
.fg-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; font-weight:700; font-size:13px;
}
.fg-chip .k{ color:var(--muted); font-weight:600; }