/* ============================================================
   FastGroup — fg-ui : DE STANDAARD-COMPONENTEN.
   Elk scherm (CRM, fiche, mail, social) gebruikt exact deze bouwstenen.
   Overal hetzelfde: kleur, knoppen, indeling. Alles uit de tokens.
   ============================================================ */

/* ============================================================
   21/10/2026 - BUILD 1124/1125 - DE TABS STAAN LINKS, HET WERK STAAT RECHTS.
   Patrick: "en dan kunnen we deze tabs naar links in een sidebar brengen?
   degratatie van een hoofdkleur van de sidebar, en rechts alles lichtgrijs met
   zwarte tekst?" en, over de bovenbalk: "nu is het precies een hoopje ongeregeld
   op elkaar".
   Er komt GEEN omhullend blok bij in de javascript. .fg-page wordt een raster van
   twee kolommen zodra er een zijbalk in staat: de <nav> staat in de linkerkolom,
   al de rest valt vanzelf in de rechterkolom. Zo hoeft geen enkele uitgang van
   crmBody een sluit-div te tellen - en dat is precies de fout die vandaag twee
   keer het scherm leeg maakte.

   BUILD 1125 - DE KLEUR VAN DE KOLOM KOMT VAN DE CONTAINER, NIET VAN DE <nav>.
   Gemeten in Patricks Chrome op 1124: de eerste rij van het raster was 402 pixels
   hoog en LEEG. De oorzaak: de <nav> pakte alle rijen (grid-row 1 / -1), en Chrome
   duwt de hoogte van zo'n overspannende cel in de eerste rij. De zijbalk hoeft die
   rijen helemaal niet te pakken: het verloop wordt als ACHTERGROND van .fg-page
   geschilderd, precies zo breed als de linkerkolom en altijd even hoog als de hele
   pagina. De <nav> zelf is doorzichtig en blijft bovenaan plakken bij het scrollen.

   De rechterkant zet de LICHTE tokens terug, ook wanneer de app in de donkere
   stand staat. Daardoor wordt alles wat erin staat vanzelf lichtgrijs met zwarte
   tekst, zonder dat er ook maar een component hoeft aangepast te worden.
   ============================================================ */
/* BUILD 1126 - GEEN RASTER MEER.
   Gemeten in Patricks Chrome op 1125: de rij waarin de zijbalk stond werd 426 pixels
   hoog, en de werkkop die er toevallig naast viel werd MEE uitgerekt. Dat waren de
   twee lege banden op zijn scherm. Een raster laat zich daar niet van overtuigen: de
   hoogste cel bepaalt de rij, en wat ernaast staat rekt mee. Dus geen rijen meer.
   De zijbalk staat nu LOS in de linkerstrook (absoluut, binnen .fg-page), en de rest
   is een gewone kolom met een inspringing links ter breedte van die strook. Er is
   niets meer dat uitgerekt KAN worden - dat is de enige manier om deze fout voor
   altijd weg te krijgen in plaats van hem per scherm na te meten. */
.fg-page:has(.fg-zij){
  display:flex; flex-direction:column; gap:0;
  position:relative;
  padding:0 20px 24px calc(var(--zij-breed,232px) + 18px);
  min-height:100%;
  --bg:#f1f3f6; --surface:#ffffff; --card:var(--surface);
  --card-2:#eceff3; --card-3:#e3e8ee;
  --line:#d7dde5; --line-strong:#c2cbd6;
  --ink:#10151c; --text:var(--ink); --muted:#4a5565; --muted-2:#56616f; --slate:#44505f;
  --brand-ink:#9a4f05; --ok-ink:#0f6b32; --danger-ink:#b42318; --warn-ink:#9a5b06;
  --card-grad:linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
  color:var(--ink);
  background-color:var(--bg);
  background-image:linear-gradient(170deg,
      color-mix(in srgb,var(--brand) 88%,#ffffff) 0%,
      var(--brand) 34%,
      color-mix(in srgb,var(--brand) 62%,#000000) 100%);
  background-repeat:no-repeat;
  background-size:var(--zij-breed,232px) 100%;
}
.fg-page:has(.fg-zij) > *{ min-width:0; }
.fg-page:has(.fg-zij) > .fg-zij{
  position:absolute; left:0; top:0; width:var(--zij-breed,232px);
}
.fg-zij{
  /* 21/10/2026 - BUILD 1137 - DE ZIJBALK LOOPT TOT ONDERAAN.
     Patrick: "sidebar moet altijd gekleurd zijn tot onderen". De balk stond op
     position:absolute met alleen top:0, dus hij stopte waar zijn knoppen
     stopten en daaronder zag je het wit van de pagina. Met bottom:0 loopt hij
     door tot de onderkant; wordt de boom langer dan het scherm, dan scrolt hij
     in zichzelf in plaats van de hele pagina mee te trekken. */
  bottom:0; overflow-y:auto; overflow-x:hidden;
}

/* ---- BUILD 1138 - 21/10/2026 - DE LIJST LUISTERT EINDELIJK NAAR DE LETTERMAAT.
   Patrick: "ik vind de tekst zelf nog altijd te klein". Gemeten en gevonden:
   .fgl-tafel table stond op een vaste 14px en .fgl-tafel th op 12px, hard
   ingetypt. Jouw 17,5px gold dus overal BEHALVE in het scherm waar je de hele
   dag naar kijkt. Nu volgen ze de tokens.
   En: table-layout:fixed. Patrick: "als ik de kolommen versleep blijven ze
   niet staan, verspringen altijd". Met de standaard (auto) is een breedte maar
   een voorstel en herberekent de browser ze uit de inhoud - jouw 462px werd
   wel degelijk bewaard in de databank, het scherm gooide ze weg. */
.fgl-tafel table{ font-size:var(--fs-body,17.5px) !important; table-layout:fixed; }
.fgl-tafel th{ font-size:var(--fs-label,14px) !important; }

/* ---- BUILD 1139 - 22/10/2026 - DE TEKST IN DE LIJNEN ZELF ----
   Patrick: "de grootte in de balk is nu beter, maar de tekst zelf in de lijnen
   ook iets groter". Klopt: mijn regel van 1138 mikte op ".fgl-tafel table" en
   die selector raakt niets - de tabel IS .fgl-tafel. Alleen th werd dus groter,
   want die staat eronder. Nu pakken we de tabel zelf en de cellen. De chips en
   het sterrenlijntje blijven een maat kleiner, anders wordt een rij een muur. */
.fgl-tafel, .fgl-tafel table, .fgl-tafel td{ font-size:var(--fs-body,17.5px) !important; }
.fgl-tafel{ table-layout:fixed; }
.fgl-tafel .fgl-wacht, .fgl-tafel .fgl-sig, .fgl-tafel .fgl-afchip,
.fgl-tafel .fgl-reden, .fgl-tafel .fgl-sigmeer, .fgl-tafel .fgl-signaam{ font-size:var(--fs-small,16px) !important; }
.fgl-tafel .fgl-ster, .fgl-tafel .fgl-onder, .fgl-tafel .fgl-score{ font-size:var(--fs-label,14px) !important; }

/* De zijbalk houdt haar kleur als de Sales App openstaat. Patrick: "sidebar
   moet de kleur behouden bij sales app". De lichte doek begint nu rechts van
   de balk in plaats van er overheen te liggen. */
#fgSalesLaag{ left:var(--zij-breed,232px) !important; }

/* ---- BUILD 1140 - 22/10/2026 - DE ZIJBALK EEN MAAT GROTER ----
   Patrick: "de tekst in de sidebar iets groter ook nog aub". De zijbalk had
   nog haar eigen vaste maten (13,5px voor een knop, 12,5px voor een map,
   10,5px voor een afdelingstitel). Ze volgen nu dezelfde tokens als de rest,
   zodat een volgende stap aan de lettermaat ook hier doorwerkt. */
.fg-zij .fg-zijnav .gbtn{ font-size:var(--fs-small,16px) !important; }
.fg-zij .fg-zijnav .gbtn .ti{ font-size:var(--fs-small,16px) !important; }
.fg-zij .fg-statchip .lbl, .fg-zij .fg-statchip .n{ font-size:var(--fs-label,14px) !important; }
.fg-zij .fg-zijnav .fgbadge{ font-size:12px !important; }
.fg-zijklap{ font-size:13px !important; }
.fg-zijtitel{ font-size:11.5px !important; }
.fg-zijtaalknop{ font-size:13px !important; }
.fg-zijtakvak .fg2pb-postbus{ font-size:var(--fs-label,14px) !important; }
.fg-zijtakvak .fg2pb-boommap{ font-size:13.5px !important; }
.fg-zijtakvak .fg2pb-afdeling{ font-size:11.5px !important; }
.fg-zijtakvak .fg2pb-map-tel{ font-size:12.5px !important; }

/* ---- BUILD 1140 - 22/10/2026 - GEEN WITTE BLOKKEN MEER IN DE ZIJBALK ----
   Patrick: "die witte knoppen zijn akelig lelijk, ik had gevraagd glazen
   knoppen". De telchips (Alle, Bedrijven, Klaar voor verzending ...) stonden
   nog op vol wit, en een gekozen knop ook. Alles wat in de zijbalk oplicht is
   nu matglas: je ziet het verloop erdoor, met een lichte rand. */
.fg-zij .fg-statchip{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  color:#ffffff !important;
  backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset;
}
.fg-zij .fg-statchip:hover{ background:rgba(255,255,255,.2) !important; }
.fg-zij .fg-statchip.on, .fg-zij .fg-statchip[aria-current="true"]{
  background:rgba(255,255,255,.26) !important; border-color:rgba(255,255,255,.5) !important;
}
.fg-zij .fg-statchip .lbl, .fg-zij .fg-statchip .n{ color:#ffffff !important; }
.fg-zij .gbtn.on, .fg-zij .gbtn[aria-current="true"], .fg-zij .fg-zijcrm.on{
  background:rgba(255,255,255,.22) !important; color:#ffffff !important;
  border:1px solid rgba(255,255,255,.45) !important;
  backdrop-filter:blur(9px) saturate(140%); -webkit-backdrop-filter:blur(9px) saturate(140%);
}
.fgl-tafel td{ vertical-align:middle; }
.fgl-tafel tbody td{ height:58px; }
.fgl-tafel tbody td > *{ max-width:100%; }

/* De rode meterband is ONS gereedschap: alarmen, proeven, klokken. Een klant
   hoort die nooit te zien. Hij blijft bestaan en blijft meten; hij staat
   alleen niet meer in de weg. Terug zichtbaar met document.body.classList
   .add('fg-meters'). */
#fg-band{ display:none !important; }
body.fg-meters #fg-band{ display:block !important; }

/* Instellingen stond op margin-top:auto. Zolang de zijbalk zo hoog was als
   haar knoppen viel dat niet op; sinds ze tot onderaan loopt (1137) werd de
   knop naar de voet geduwd en bleef er bovenaan een stuk van over. Ze hoort
   waar Patrick ze gezet heeft: onder Rapporting, boven de lijn. */
.fg-zijonder{ margin-top:0 !important; }
.fg-zij .fg-zijinstelknop{ display:flex; align-items:center; gap:9px; width:100%; flex:0 0 auto; }
.fg-zij .fg-zijlabel{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }

/* ---- BUILD 1138 - DE SALES APP OP EEN LICHTE ACHTERGROND ----
   Patrick: "kunnen we als we op Sales App drukken een mooie lichtgrijze
   achtergrond krijgen met daarvoor de pop-up van de gsm". De laag erfde de
   donkere doek van de instellingen; hier wordt ze licht, en de tekst erboven
   gaat mee naar donker zodat ze leesbaar blijft. */
#fgSalesLaag{ background:rgba(237,239,242,.94) !important; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
#fgSalesLaag .fg-telefoonkop{ color:#15202b !important; }
#fgSalesLaag .fg-telefoonadres{ color:#5a616b !important; opacity:1; }
#fgSalesLaag .fg-telefoonkader{ box-shadow:0 30px 80px rgba(20,28,45,.28); }

/* ---- BUILD 1137 - DE ACTIEVE KNOP IN GLAS ----
   Patrick: "de witte achtergrond, dat is te hard, kan je de actieve knop niet
   in glas zetten BV ?". Een vol wit blok sneed een gat in het verloop. Nu is
   het matglas: je ziet het verloop er doorheen, met een lichte rand en een
   zachte glans. Werkt ook op de postbussen en de mappen in de boom, want dat
   zijn dezelfde knoppen met aria-current. */
.fg-zij .gbtn.on,
.fg-zij .gbtn[aria-current="true"],
.fg-zijtakvak .fg2pb-postbus[aria-current="true"],
.fg-zijtakvak .fg2pb-boommap[aria-current="true"]{
  background:rgba(255,255,255,.17) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.40) !important;
  backdrop-filter:blur(9px) saturate(140%);
  -webkit-backdrop-filter:blur(9px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 6px 18px rgba(4,10,30,.22);
}
.fg-zijtaalknop.aan{
  background:rgba(255,255,255,.20) !important; color:#ffffff !important;
  border-color:rgba(255,255,255,.45) !important;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
/* De oude kruimelband. Hij is leeg sinds de knoppen naar Configuratie verhuisd
   zijn, en een lege band is ruimte die niets zegt. Patrick, 11/10: "die mag
   overal weg he, is dubbel informatie en neemt ruimte in". */
.fg-page:has(.fg-zij) > .fg-pagehead{ display:none; }

/* ---- de zijbalk: doorzichtig, de kleur komt van de container hierboven ---- */
.fg-zij{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 10px 20px;
  background:none;
  color:#ffffff;
}
.fg-zij .fg-statchip{
  width:100%; justify-content:flex-start; gap:10px;
  border:0; border-radius:10px; padding:9px 11px;
  background:rgba(255,255,255,.08) !important; color:#ffffff; text-align:left;
  box-shadow:none; transition:background .12s ease;
}
.fg-zij .fg-statchip:hover{ background:rgba(255,255,255,.18) !important; }
.fg-zij .fg-statchip .dot{ flex:0 0 auto; }
.fg-zij .fg-statchip .n{
  order:3; margin-left:auto; font-size:13px; color:#ffffff; opacity:.92;
  font-variant-numeric:tabular-nums;
}
.fg-zij .fg-statchip .lbl{
  color:#ffffff; font-size:13px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Verderop in dit blad staat een !important op .fg-statchip.on. Zonder deze
   !important bleef de actieve tab in de zijbalk doorzichtig - gemeten op 1124. */
.fg-zij .fg-statchip.on{
  background:#ffffff !important; color:#15202b;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
.fg-zij .fg-statchip.on .lbl,
.fg-zij .fg-statchip.on .n{ color:#15202b; opacity:1; font-weight:800; }
.fg-zij .fg-morechip{ display:none; }

/* ---- de greep om de zijbalk breder of smaller te slepen ---- */
.fg-zijgreep{
  position:absolute; top:0; right:-9px; width:18px; height:100%;
  cursor:col-resize; z-index:3; background:none; border:0; padding:0;
}
.fg-zijgreep::before{
  content:""; position:absolute; left:8px; top:0; width:2px; height:100%;
  background:rgba(255,255,255,0); transition:background .12s ease;
}
.fg-zijgreep:hover::before, .fg-zijgreep:active::before{ background:rgba(255,255,255,.55); }

body.fg-sleept{ cursor:col-resize; user-select:none; }

/* ---- de kop van de werkkant: zoeken links, knoppen rechts ---- */
.fg-werkkop{ display:flex; align-items:center; gap:10px; padding:12px 0; }
.fg-werkkop .fg-zoekveld{ flex:1 1 auto; max-width:440px; }
.fg-werkkop-rest{ display:flex; align-items:center; gap:8px; margin-left:auto; }

/* ---- het paneel achter de knop Configuratie ---- */
.fg-configlaag{
  position:fixed; inset:0; z-index:60; display:flex; justify-content:flex-end;
  background:rgba(9,13,22,.46);
}
.fg-configlaag[hidden]{ display:none; }
.fg-configdoos{
  width:min(540px,96vw); height:100%; overflow:auto;
  background:#ffffff; color:#10151c; box-shadow:-18px 0 50px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  --card:#ffffff; --surface:#ffffff; --bg:#f1f3f6; --card-2:#eceff3; --card-3:#e3e8ee;
  --ink:#10151c; --text:#10151c; --muted:#4a5565; --muted-2:#56616f;
  --line:#d7dde5; --line-strong:#c2cbd6;
}
.fg-confighead{
  position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:10px;
  padding:14px 16px; color:#ffffff; font-size:16px;
  background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 74%,#000000));
}
.fg-confighead .fg-configwie{
  margin-left:auto; opacity:.88; font-size:12px;
  text-transform:uppercase; letter-spacing:.07em;
}
.fg-confighead .fg-knop3d{
  background:rgba(255,255,255,.18); color:#ffffff; border-color:rgba(255,255,255,.34);
}
.fg-configvak{ padding:16px; border-bottom:1px solid #e6eaef; }
.fg-configvak h4{
  margin:0 0 10px; font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:#4a5565;
}
.fg-configvak .fg-afdbalk{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* ---- BUILD 1127 - de kolommenlijst in het paneel Configuratie ---- */
.fg-kolomlijst{ display:flex; flex-direction:column; gap:2px; }
.fg-kolomrij{
  display:flex; align-items:center; gap:10px;
  padding:7px 8px; border-radius:8px; cursor:pointer;
}
.fg-kolomrij:hover{ background:#f1f3f6; }
.fg-kolomrij input{ flex:0 0 auto; width:16px; height:16px; accent-color:var(--brand); }
.fg-kolomrij .nm{ font-weight:650; white-space:nowrap; }
.fg-kolomrij .uit{
  color:#4a5565; font-size:12.5px; margin-left:auto; text-align:right;
  max-width:62%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fg-kolomhint{ margin:-2px 0 12px; font-size:12.5px; color:#4a5565; line-height:1.45; }
/* ---- BUILD 1131 - 21/10/2026 - DE ZIJBALK IS DE NAVIGATIE ----
   Patrick: "en waarom is de rest nog niet naar de sidebar ?". De acht tabbladen
   van de afdeling (Leveranciers, Opdrachten, Aanvragen, Finance, Live, Dropbox,
   Inbox, Social) stonden in twee rijtjes bovenaan de header. Ze staan nu onder
   elkaar in dezelfde zijbalk, boven de CRM-tabbladen, en de oude rijtjes gaan
   weg zodra die zijbalk er is - niet door ze te verwijderen uit de app, maar
   door ze te verbergen op het enige scherm waar de zijbalk bestaat. */
.fg-shell:has(.fg-zij) .fg-header .navwrap{ display:none !important; }
.fg-shell:has(.fg-zij) .fg-header .homebtn{ display:none !important; }
.fg-zij .fg-zijnav{ display:flex; flex-direction:column; gap:2px; margin:2px 0 10px; }
.fg-zij .fg-zijnav .gbtn{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:8px 11px; border:0; border-radius:9px; background:transparent;
  color:#ffffff; font-size:13.5px; font-weight:600; letter-spacing:.1px; cursor:pointer;
}
.fg-zij .fg-zijnav .gbtn:hover{ background:rgba(255,255,255,.14); }
.fg-zij .fg-zijnav .gbtn.on{ background:#ffffff; color:#15202b; }
.fg-zij .fg-zijnav .gbtn .ti{ width:18px; text-align:center; font-size:14px; }
.fg-zij .fg-zijnav .gbtn.empty{ display:none !important; }
.fg-zij .fg-zijnav .fgbadge{ margin-left:auto; background:#e5484d; color:#ffffff; border-radius:999px; padding:1px 6px; font-size:11px; font-weight:700; }
.fg-zijlijn{ height:1px; background:rgba(255,255,255,.22); margin:4px 2px 10px; }
.fg-zijtitel{ color:rgba(255,255,255,.72); font-size:10.5px; font-weight:800; letter-spacing:.14em; margin:0 2px 7px 11px; }

/* ---- BUILD 1131 - KOLOMMEN VERSLEPEN, VERPLAATSEN EN FILTEREN ----
   Patrick: "de verbreden, versmallen per kolom, maar ook kolommen kunnen
   verplaatsen van links naar rechts" en "had ook alle soorten filters in de
   header gevraagd". De greep zit op de rand van de kop; de filterrij is een
   tweede rij in diezelfde kop, een vakje per kolom. */
.fgl-tafel th{ position:relative; }
.fgl-greep{ position:absolute; top:0; right:-5px; width:10px; height:100%; cursor:col-resize; z-index:3; }
.fgl-greep:hover{ background:linear-gradient(90deg, transparent 40%, var(--brand,#ff8a1e) 40%, var(--brand,#ff8a1e) 60%, transparent 60%); }
body.fg-kolsleept{ cursor:col-resize; user-select:none; }
.fgl-filterrij th{ padding:4px 6px !important; background:#eef1f5; border-bottom:1px solid #d7dde5; }
.fgl-filter{
  width:100%; box-sizing:border-box; border:1px solid #cfd6e0; border-radius:7px;
  padding:4px 7px; font-size:12px; color:#10151c; background:#ffffff; font-weight:500;
}
.fgl-filter:focus{ outline:2px solid var(--brand,#ff8a1e); outline-offset:-1px; }
.fg-kolompijl{ flex:0 0 auto; display:inline-flex; gap:3px; }
.fg-kolompijl button{
  border:1px solid #cfd6e0; background:#ffffff; color:#10151c; border-radius:6px;
  width:22px; height:22px; line-height:1; font-size:10px; cursor:pointer; padding:0;
}
.fg-kolompijl button:hover:not(:disabled){ border-color:var(--brand,#ff8a1e); }
.fg-kolompijl button:disabled{ opacity:.3; cursor:default; }
/* ---- BUILD 1132 - 21/10/2026 - HET MENU, DE GREEP EN HET SORTEREN ---- */
.fg-zij{ display:flex; flex-direction:column; }
.fg-zijcrm{ font-weight:800 !important; letter-spacing:.2px; }
.fg-zijklap{ margin-left:auto; opacity:.8; font-size:11px; padding:0 2px; }
.fg-zijtabs{ display:flex; flex-direction:column; gap:3px; margin:4px 0 2px 10px;
  padding-left:8px; border-left:1px solid rgba(255,255,255,.22); }
.fg-zijtabs.dicht{ display:none; }
.fg-zijonder{ margin-top:auto; padding-top:6px; }

/* De greep moet te VINDEN zijn. Patrick: "je moet echt moeite doen om het
   streepje te vinden". Nu een zichtbaar lijntje, en een greepzone van 14px. */
.fgl-greep{ right:0; width:14px; background:none; }
.fgl-greep::after{
  content:""; position:absolute; top:22%; bottom:22%; right:6px; width:2px;
  background:#b9c2ce; border-radius:2px;
}
.fgl-greep:hover::after{ background:var(--brand,#ff8a1e); top:4%; bottom:4%; width:3px; }
.fgl-greep:hover{ background:none; }

/* Sorteren: de hele kop is een knop, met een pijltje als ze aan staat. */
.fgl-sorteer{ cursor:pointer; user-select:none; }
.fgl-sorteer:hover{ color:var(--brand,#ff8a1e); }
.fgl-sorteer.aan{ color:var(--brand,#ff8a1e); }
.fgl-pijl{ margin-left:5px; font-size:10px; }

/* Groter en met meer contrast, overal in de lijst. */
.fgl-tafel table{ font-size:14px; }
.fgl-tafel th{ font-size:12px; letter-spacing:.06em; color:#2a3442; }
.fg-page:has(.fg-zij){ --muted:#3a4453; }

/* Instellingen-venster onderaan de zijbalk. */
.fg-instellaag{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(12,17,24,.46); padding:20px;
}
.fg-insteldoos{
  width:min(560px, 96vw); background:#ffffff; color:#10151c;
  border-radius:16px; box-shadow:0 24px 60px rgba(10,15,22,.34); overflow:hidden;
}
.fg-instelkop{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:#f1f3f6; border-bottom:1px solid #d7dde5; font-size:16px;
}
.fg-instelvak{ padding:16px 18px 18px; }
.fg-instelrij{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:10px; }
/* ---- BUILD 1133 - 21/10/2026 - DE BOVENKANT, IN EEN KEER MOOI ---- */

/* Header en zijbalk schilderen hetzelfde verloop, vastgezet op het VENSTER.
   Daardoor toont elk zijn eigen stuk van dezelfde tekening en loopt de kleur
   van de header gewoon door in de zijbalk. Patrick: "maak dit vloeiend". */
.fg-header.v7{
  background-attachment:fixed !important;
  background-size:100vw 100vh !important;
  background-position:0 0 !important;
  background-repeat:no-repeat !important;
}
.fg-page:has(.fg-zij){ background-image:none !important; }
.fg-zij{
  background-image:var(--merkverloop, linear-gradient(315deg,#111827 0%,#1677FF 55%,#5B4BFF 100%)) !important;
  background-attachment:fixed !important;
  background-size:100vw 100vh !important;
  background-position:0 0 !important;
  background-repeat:no-repeat !important;
}

/* Het merklogo links boven. Wit plaatje, want de logo's hebben donkere letters
   en de header is bij elk merk aan een kant donker. */
.fgb-merk{ display:inline-flex; align-items:center; gap:10px; }
.fgb-merklogo{
  display:inline-flex; align-items:center; justify-content:center;
  background:#ffffff; border-radius:12px; padding:7px 14px;
  box-shadow:0 2px 10px rgba(8,12,20,.28);
}
.fgb-merklogo img{ height:30px; width:auto; max-width:200px; display:block; }
.fgb-merk .fgb-merknaam{ display:none; }
.fgb-brand.geenlogo .fgb-merknaam{ display:inline-block; }

/* De klok mag groter nu er tien knoppen weg zijn. */
.fgclock{ line-height:1.15; }
.fgclock b{ font-size:19px; font-weight:800; letter-spacing:.2px; }
.fgclock span{ font-size:12px; opacity:.88; display:block; white-space:nowrap; }

/* Instellingen: een venster met tabs links en de inhoud rechts. */
.fg-instelbody{ display:flex; align-items:stretch; min-height:230px; }
.fg-instelzij{
  flex:0 0 190px; display:flex; flex-direction:column; gap:3px;
  padding:12px 10px; background:#f6f8fb; border-right:1px solid #d7dde5;
}
.fg-insteltab{
  text-align:left; border:0; background:transparent; border-radius:9px;
  padding:9px 11px; font-size:14px; font-weight:650; color:#2a3442; cursor:pointer;
}
.fg-insteltab:hover{ background:#e8edf4; }
.fg-insteltab.aan{ background:var(--brand,#ff8a1e); color:#ffffff; }
.fg-instelvak{ flex:1 1 auto; padding:16px 20px 20px; }
.fg-instelvak h4{ margin:0 0 10px; font-size:16px; }
.fg-knop3d.aan{ background:var(--brand,#ff8a1e) !important; color:#ffffff !important; border-color:var(--brand,#ff8a1e) !important; }
.fg-insteldoos{ width:min(720px, 96vw); }
/* ---- BUILD 1134 - 21/10/2026 - DE BOOM, HET LOGO EN DE KLOK ---- */

/* Takken van de boom: alles wat iets onder zich heeft, klapt open en dicht. */
.fg-zijtakvak{ display:block; margin:3px 0 6px 10px; padding-left:8px;
  border-left:1px solid rgba(255,255,255,.22); }
.fg-zijtakvak.dicht{ display:none; }
.fg-zijtakvak:empty{ display:none; }
.fg-zij .fg-zijsub{ font-size:13px !important; font-weight:550 !important; opacity:.95; }
.fg-zijtaal{ display:flex; gap:5px; padding:4px 2px 7px; }
.fg-zijtaalknop{
  flex:1 1 0; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);
  color:#ffffff; border-radius:7px; padding:4px 0; font-size:12px; font-weight:700; cursor:pointer;
}
.fg-zijtaalknop.aan{ background:#ffffff; color:#15202b; border-color:#ffffff; }

/* De postbusboom staat nu IN de zijbalk, dus zijn eigen grijze balkje gaat weg
   en zijn kleuren moeten mee met het merkverloop. */
.fg-shell:has([data-zij-inbox]) #fg2pbRail{ display:none !important; }
.fg-zijtakvak .fg2pb-railgroep{ background:none !important; border:0 !important; padding:0 !important; margin:0 !important; }
.fg-zijtakvak .fg2pb-afdeling{ color:rgba(255,255,255,.72) !important; background:none !important;
  font-size:10.5px; font-weight:800; letter-spacing:.12em; padding:6px 4px 3px !important; }
.fg-zijtakvak .fg2pb-postbus,
.fg-zijtakvak .fg2pb-boommap{
  display:flex; align-items:center; gap:7px; width:100%; text-align:left;
  background:none !important; border:0 !important; border-radius:8px;
  padding:6px 9px !important; color:#ffffff !important; font-size:13px; cursor:pointer;
}
.fg-zijtakvak .fg2pb-boommap{ font-size:12.5px; opacity:.92; padding-left:20px !important; }
.fg-zijtakvak .fg2pb-postbus:hover,
.fg-zijtakvak .fg2pb-boommap:hover{ background:rgba(255,255,255,.14) !important; }
.fg-zijtakvak .fg2pb-postbus[aria-current="true"],
.fg-zijtakvak .fg2pb-boommap[aria-current="true"]{ background:#ffffff !important; color:#15202b !important; }

/* ---- BUILD 1142 - 22/10/2026 - DE POSTBUSKLEUREN ALS VANGNET ----
   De meter wees het aan: het lijstvak bestaat, is 706px hoog en bevat 4387
   tekens opmaak - de berichten WORDEN dus getekend, je ziet ze alleen niet.
   Alle kleuren van dat scherm hangen aan variabelen die in fg2-postbus.css op
   de klasse .fg2pb staan. Zit het vak buiten die klasse, dan bestaan die
   variabelen niet, valt color terug op wat het erft - en dat is het wit van de
   schil. Wit op wit. Hier staan dezelfde waarden nog eens op de wortel, als
   vangnet: staat .fg2pb er wel, dan wint die (die is specifieker) en verandert
   er niets; ontbreekt hij, dan is de tekst nu gewoon leesbaar. */
:root{
  --pb-vlak:#ffffff; --pb-grond:#f6f7f9;
  --pb-inkt:#000000; --pb-inkt-zacht:#42474f; --pb-inkt-flets:#5a616b;
  --pb-lijn:#e3e6ea; --pb-lijn-hard:#c9ced6;
  --pb-gekozen:#e7eaee; --pb-zweef:#f1f3f5;
  --pb-op-accent:#ffffff; --pb-rood:#c62828; --pb-blauw:#1565c0; --pb-groen:#2e7d32;
  --pb-omhul:#15181f; --pb-omhul-2:#1b1f28; --pb-omhul-inkt:#f3f5f8; --pb-omhul-zacht:#a7b0bf;
  --pb-omhul-lijn:rgba(255,255,255,.10); --pb-omhul-hover:rgba(255,255,255,.07);
  --pb-omhul-aan:rgba(255,255,255,.12);
}
#fg2pbLijst{ color:var(--pb-inkt,#000000); background:var(--pb-vlak,#ffffff); }

/* BUILD 1143 - wat in de berichtenlijst staat mag niet onzichtbaar gezet
   worden door een animatie of een erfenis van de schil. Dit is een vangnet,
   geen opmaak: het dwingt alleen zichtbaarheid af, het verandert geen kleur,
   geen plaats en geen grootte. */
#fg2pbLijst > *, #fg2pbLijst .fg2pb-rij, #fg2pbLijst .fg2pb-datumkop{
  visibility:visible !important; opacity:1 !important;
}

/* ---- BUILD 1143 - DE DERDE KOLOM MOET WEG ----
   Patrick: "er zijn ook nog steeds 3 tabellen? volgens mij moeten er maar 2
   zijn: links de lijst van de e-mails, rechts het bericht". Hij heeft gelijk,
   en het is mijn eigen restant: sinds 1134 staat de postbusboom in de zijbalk,
   dus het oude grijze balkje in het scherm is leeg blijven meelopen. Ik had het
   verstopt met .fg-shell:has([data-zij-inbox]) ervoor - en die voorwaarde gaat
   niet op, want de zijbalk zit niet in .fg-shell. Vandaar dat die kolom nog
   altijd plaats innam. Hij hoort er gewoon niet meer te zijn: de boom staat nu
   altijd links in de zijbalk. */
#fg2pbRail{ display:none !important; }

/* ---- BUILD 1141 - 22/10/2026 - HET WIT WON HET VAN HET GLAS ----
   Patrick: "en nog steeds witte knoppen?" - en op de volgende foto was de
   gekozen chip zelfs een LEEG wit blok. Beide komen van hetzelfde: verderop in
   dit blad staan regels die .fg2pb-boommap[aria-current] en .fg-statchip.on
   wit maken, en bij gelijke zwaarte wint de laatste regel. Mijn witte letter
   stond er dan bovenop - wit op wit, vandaar dat lege blok. Deze regels hebben
   een klasse meer en winnen dus altijd, waar ze ook staan. */
.fg-zij .fg-zijtakvak .fg2pb-postbus[aria-current="true"],
.fg-zij .fg-zijtakvak .fg2pb-boommap[aria-current="true"]{
  background:rgba(255,255,255,.22) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.45) !important;
  backdrop-filter:blur(9px) saturate(140%); -webkit-backdrop-filter:blur(9px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset;
}
.fg-zij .fg-zijtakvak .fg-statchip.on, .fg-zij .fg-zijnav .fg-statchip.on,
.fg-zij .fg-zijtakvak .fg-statchip[aria-current="true"], .fg-zij .fg-zijnav .fg-statchip[aria-current="true"]{
  background:rgba(255,255,255,.26) !important;
  border:1px solid rgba(255,255,255,.5) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset !important;
}
.fg-zij .fg-zijtakvak .fg-statchip.on .lbl, .fg-zij .fg-zijtakvak .fg-statchip.on .n,
.fg-zij .fg-zijnav .fg-statchip.on .lbl, .fg-zij .fg-zijnav .fg-statchip.on .n{ color:#ffffff !important; }
.fg-zijtakvak .fg2pb-map-tel{ margin-left:auto; font-size:11px; opacity:.85; }
.fg-zijtakvak .fg2pb-boommappen{ display:block; }
.fg-zijtakvak .fg2pb-vouw{ width:12px; text-align:center; font-size:10px; }
.fg-zijtakvak .fg2pb-bol{ width:6px; height:6px; border-radius:50%; background:var(--brand,#ff8a1e); flex:0 0 auto; }
.fg-zijtakvak .fg2pb-bol[data-stil]{ background:rgba(255,255,255,.3); }

/* Het logo mag groot: de slogan moet leesbaar zijn. */
.fgb-merklogo{ padding:8px 16px; border-radius:14px; }
.fgb-merklogo{
  /* 21/10/2026 - BUILD 1136 - HET LOGO HEEFT ZIJN EIGEN DONKERE ACHTERGROND.
     Patrick koos wise11_logos_wise11-logo-branding-design: wit WISE, cyaan en
     magenta 11, op donkerblauw. Een wit plaatje eromheen sneed dat eruit; nu
     staat het logo zelf in het verloop en vloeit het mee. Het verloop van de
     header en de zijbalk staat in het register (tegels.verloop), niet hier. */
  background:transparent; padding:0; border-radius:14px;
  box-shadow:0 10px 30px rgba(8,16,48,.45);
}
.fgb-merklogo img{ height:78px; max-width:420px; border-radius:12px; display:block; }

/* ---- BUILD 1136 - DE TAK INSTELLINGEN ----
   Patrick: "en deze layout ???? = precies 1982 periode". Hij had gelijk: die
   knoppen pakten de grijze .gbtn-stijl van het hoofdmenu, dus stonden er
   grijze blokjes met emoji op het blauw, in twee kolommen. Ze horen eruit te
   zien als de rest van de zijbalk: een rij tekst, links uitgelijnd, licht op
   donker. De drie talen worden een echte segmentknop in plaats van drie
   losse pillen. */
.fg-zijtakvak .gbtn.fg-zijsub{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  color:#ffffff !important; border-radius:9px; padding:7px 10px !important;
  font-weight:600; opacity:.92; min-height:0;
}
.fg-zijtakvak .gbtn.fg-zijsub:hover{ background:rgba(255,255,255,.14) !important; opacity:1; }
.fg-zijtakvak .gbtn.fg-zijsub .ti{ width:18px; text-align:center; opacity:.9; }
.fg-zijtaal{ display:flex; gap:0; padding:4px 10px 9px; }
.fg-zijtaalknop{
  flex:1 1 0; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08);
  color:#ffffff; padding:5px 0; font-weight:700; cursor:pointer; border-radius:0; margin:0;
}
.fg-zijtaalknop:first-child{ border-radius:8px 0 0 8px; }
.fg-zijtaalknop:last-child{ border-radius:0 8px 8px 0; }
.fg-zijtaalknop + .fg-zijtaalknop{ border-left:0; }
.fg-zijtaalknop.aan{ background:#ffffff; color:#15202b; border-color:#ffffff; }

/* ---- BUILD 1135 - 21/10/2026 - HET TELEFOONKADER VAN DE SALES APP ----
   sales.wise11.eu in een kader van 390 x 844, het formaat van een telefoon. */
.fg-telefoondoos{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.fg-telefoonkop{ display:flex; align-items:center; gap:10px; color:#ffffff; }
.fg-telefoonkop b{ font-size:17px; }
.fg-telefoonadres{ opacity:.7; font-size:13px; }
.fg-telefoonkader{
  width:390px; height:844px; max-height:82vh; border-radius:38px; overflow:hidden;
  background:#000000; padding:10px; box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.fg-telefoonglas{ width:100%; height:100%; border:0; border-radius:28px; background:#ffffff; display:block; }

/* Klok en datum nog een maat groter. */
.fgclock b{ font-size:22px; }
.fgclock span{ font-size:13.5px; }

/* 21/10/2026 - BUILD 1134 - DE FLIKKER IN DE HEADER.
   Patrick: "de header flikkert bij interactief". Ik heb de oorzaak NIET met
   zekerheid gemeten, dus ik noem ze niet als feit. Wat ik wel weet: de flikker
   is er pas sinds 1133, en in 1133 heb ik background-attachment:fixed op de
   header en de zijbalk gezet. Een vastgezette achtergrond laat Chrome bij elke
   hover het hele vlak opnieuw schilderen, en dat is precies hoe zo'b flikker
   eruitziet. Deze twee regels geven allebei hun eigen laag, waardoor dat
   herschilderen wegvalt. Blijft hij toch flikkeren, dan gaat fixed eruit en
   lijn ik de twee verlopen uit met background-position.
   De mascotte-afbeelding gaat bij een fout nu op visibility:hidden in plaats
   van display:none - zo verspringt de knop niet van breedte als ze ontbreekt. */
.fg-header.v7, .fg-zij{ transform:translateZ(0); backface-visibility:hidden; }
.interbtn .interava{ flex:0 0 auto; }




.fg-kolomtel{ margin:10px 0 0; font-size:12.5px; color:#4a5565; }

/* ---- BUILD 1127 - de exportknop naast + Bedrijf ---- */
.fg-exportgroep{ position:relative; display:inline-flex; }
.fg-verborgen{ display:none; }
.fg-exportkeuze{
  position:absolute; top:calc(100% + 6px); right:0; z-index:40;
  display:flex; flex-direction:column; min-width:170px; padding:6px;
  background:#ffffff; border:1px solid #d7dde5; border-radius:12px;
  box-shadow:0 12px 28px rgba(9,13,22,.22);
}
.fg-exportkeuze[hidden]{ display:none; }
.fg-exportkeuze button{
  font:inherit; text-align:left; cursor:pointer; padding:8px 10px;
  border:0; border-radius:8px; background:none; color:#10151c; font-weight:600;
}
.fg-exportkeuze button:hover{ background:#f1f3f6; }

/* ---- BUILD 1127 - het plusje bij de signalen.
   display:contents laat de verborgen doos verdwijnen zodra ze open gaat, zodat de
   chips erin gewone buren worden van de eerste vier. Zonder dat zou .fgl-sig span
   de doos zelf als chip tekenen - een lege grijze pil tussen de signalen. ---- */
.fgl-sig .fgl-sigrest:not([hidden]){ display:contents; }
.fgl-sig .fgl-sigmeer{ cursor:pointer; font-weight:800; }

/* ---- 100% FOCUS-SHELL: app vult het venster, alleen de inhoud scrolt ---- */

.fg-shell{ height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.fg-header{ flex:0 0 auto; position:relative;
  background:
    radial-gradient(130% 150% at 0% -10%, color-mix(in srgb,var(--brand) 16%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb,var(--brand) 7%, var(--card)), var(--card) 70%);
  border-bottom:1px solid var(--line);
  box-shadow: inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent),
              0 12px 26px -18px color-mix(in srgb,var(--brand) 60%, transparent);
  display:flex; flex-direction:column; gap:10px; padding:12px 18px 13px; }
/* dunne oplichtende merk-lijn bovenaan = de "belichting" */
.fg-header::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--brand) 85%, transparent) 20%, color-mix(in srgb,var(--brand) 85%, transparent) 80%, transparent);
  opacity:.8; }
.fg-main{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; }           /* de ENIGE scroller */
/* Volle breedte: alle schermruimte benutten (geen zwarte zones meer). */
.fg-page{ max-width:none; width:100%; margin:0 auto; padding:16px 26px 28px; display:flex; flex-direction:column; gap:14px; }
.fg-hrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fg-btn.sm{ padding:6px 9px; font-size:13px; }
/* tabs: vaste 2 rijen × 4 → header-hoogte ALTIJD gelijk, ongeacht aantal tabs */
.fg-tabswrap{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:42px 42px; gap:7px; }
.fg-tab.empty{ visibility:hidden; }
.fg-coming{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:40px 20px; }
.fg-coming .big{ font-size:44px; }
.fg-cardgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }

/* ---- Page-head: kruimel + titel + acties ---- */
/* BUILD 791 - Patrick: "als we die kader iets lager zetten winnen we ruimte,
   nu is er teveel ruimte onder de kader - trek de hoogte gelijk met de autofill".
   De kop stond op align-items:flex-end. Het werkblokje was 77px hoog, de kruimelrij
   32px, dus de kop werd 77px en er bleef 45px leegte boven de kruimels. Nu staan
   beide kaders even hoog (42px) en op dezelfde lijn. Dat wint een halve regel. */
.fg-pagehead{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.fg-crumb{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.fg-h1{ margin:2px 0 0; font-size:22px; letter-spacing:-.02em; }
.fg-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ---- Tabs (4+4, twee rijen) ---- */
.fg-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.fg-tab{
  font:inherit; font-weight:700; font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:9px 12px; background:var(--card); color:var(--ink);
  transition:transform .1s ease, border-color .1s ease;
}
.fg-tab:hover{ transform:translateY(-1px); }
.fg-tab.on{ background:linear-gradient(180deg,var(--brand),var(--brand-strong)); color:var(--on-brand); border:0; }

/* ---- Status-chips ---- */
.fg-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fg-statchip{
  font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  background:var(--card); color:var(--ink); font-weight:700; line-height:1.1;
}
.fg-statchip .n{ font-weight:900; font-variant-numeric:tabular-nums; }
.fg-statchip .lbl{ font-size:12.5px; font-weight:700; color:var(--muted); }
.fg-statchip .dot{ width:9px; height:9px; border-radius:50%; }
.fg-statchip.on{ box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); border-color:var(--brand); }

/* ---- Zoekbalk ---- */
.fg-search{
  display:flex; align-items:center; gap:10px; width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 14px; color:var(--muted); cursor:text;
}
.fg-search kbd{ margin-left:auto; font:inherit; font-size:11px; font-weight:700; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; padding:2px 7px; }

/* ---- Tabel ---- */
.fg-listhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fg-listtitle{ font-size:15px; font-weight:800; }
.fg-count{ font-size:12.5px; font-weight:700; color:var(--muted); }
.fg-table{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.fg-tr{ display:grid; grid-template-columns:2.4fr 1.2fr 1.4fr 1.2fr 1fr; align-items:center; gap:12px; padding:13px 16px; }
.fg-tr + .fg-tr{ border-top:1px solid var(--line); }
.fg-thead{ background:color-mix(in srgb, var(--muted) 8%, transparent); }
.fg-thead .fg-th{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.fg-row{ cursor:pointer; transition:background .1s ease; }
.fg-row:hover{ background:color-mix(in srgb, var(--brand) 6%, transparent); }
.fg-name{ font-weight:800; font-size:13.5px; }
.fg-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.fg-mono{ font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--ink); opacity:.9; }

/* Voortgang-balk (Leveranciers) */
.fg-prog2{ height:7px; border-radius:999px; background:color-mix(in srgb,var(--muted) 18%,transparent); overflow:hidden; }
.fg-prog2 > span{ display:block; height:100%; border-radius:999px; }

/* Voortgang-stippen */
.fg-prog{ display:flex; align-items:center; gap:4px; }
.fg-pd{ width:22px; height:22px; border-radius:50%; font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line); color:var(--muted); }
.fg-pd.on{ background:color-mix(in srgb, var(--ok) 22%, transparent); border-color:var(--ok); color:var(--ok); }

/* Status-pil */
.fg-status{ display:inline-block; padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:800;
  background:color-mix(in srgb, var(--brand) 15%, transparent); color:var(--brand-ink);
  border:1px solid color-mix(in srgb, var(--brand) 30%, transparent); }

/* ---- Login ---- */
.fg-login{ height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.fg-loginbox{ width:340px; max-width:92vw; }
.fg-input{ width:100%; margin:6px 0; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--ink); font:inherit; font-size:14px; font-weight:600; outline:none; }
.fg-input:focus{ border-color:var(--brand); }
/* status-badge in de lijst — toont de ECHTE laatste gebeurtenis */
.fg-ev{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:800; border:1px solid var(--line); }
.fg-heat{ font-size:11.5px; font-weight:800; color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); border:1px solid color-mix(in srgb,var(--danger) 30%,transparent); border-radius:999px; padding:3px 8px; white-space:nowrap; }
.fg-tosales{ margin-left:auto; }
.fg-ev.klik{ background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%,transparent); }
.fg-ev.open{ background:color-mix(in srgb,var(--brand) 15%,transparent); color:var(--brand-ink); border-color:color-mix(in srgb,var(--brand) 30%,transparent); }
.fg-ev.afg{ background:color-mix(in srgb,var(--muted) 12%,transparent); color:var(--muted); }

/* ---- Fiche-popup ---- */
#fgFicheOv{ position:fixed; inset:0; z-index:2147482000; background:rgba(6,10,18,.5); backdrop-filter:blur(5px);
  display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; }
#fgFicheOv .fgf-box{ width:min(760px,96vw); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgf-load{ padding:40px; text-align:center; }
.fgf-head{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); }
.fgf-ava{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:17px; color:var(--on-brand); background:linear-gradient(135deg,var(--brand),var(--brand-strong)); }
.fgf-name{ font-weight:800; font-size:17px; }
.fgf-body{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:18px; }
@media(max-width:640px){ .fgf-body{ grid-template-columns:1fr; } }
.fgf-sec{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.fgf-row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.fgf-k{ color:var(--muted); font-weight:600; }
.fgf-v{ font-weight:700; text-align:right; }
.fgf-step{ display:flex; align-items:center; gap:10px; padding:8px 0; opacity:.5; font-size:13px; }
.fgf-step.on{ opacity:1; }
.fgf-ico{ width:26px; text-align:center; }
.fgf-ts{ color:var(--muted); font-size:11.5px; font-weight:600; }

/* ---- Social-module ---- */
.fg-soc-sum{ display:flex; gap:12px; flex-wrap:wrap; }
.fg-soc-sc{ flex:1; min-width:150px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.fg-soc-sc.big{ background:linear-gradient(135deg, color-mix(in srgb,var(--brand) 16%, var(--card)), var(--card)); border-color:color-mix(in srgb,var(--brand) 34%,transparent); }
.fg-soc-sc b{ display:block; font-size:26px; font-weight:900; line-height:1; }
.fg-soc-sc span{ font-size:12px; color:var(--muted); font-weight:700; }
.fg-soc-note{ font-size:12.5px; color:var(--muted); margin:14px 2px; display:flex; align-items:center; gap:8px; }
.fg-soc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.fg-soc-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:12px; }
.fg-soc-chhead{ display:flex; align-items:center; gap:11px; }
.fg-soc-ic{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; flex:0 0 auto; }
.fg-soc-chname{ font-weight:800; font-size:14.5px; }
.fg-soc-soon{ font-size:10.5px; font-weight:800; color:var(--muted); background:color-mix(in srgb,var(--muted) 14%,transparent); border-radius:6px; padding:1px 6px; letter-spacing:.02em; }
.fg-soc-chsub{ font-size:11.5px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fg-soc-big{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.fg-soc-big b{ font-size:30px; font-weight:900; line-height:1; letter-spacing:-.02em; }
.fg-soc-big em{ font-style:normal; color:var(--muted); font-weight:700; font-size:13px; }
.fg-soc-badge{ font-size:12px; font-weight:800; border-radius:999px; padding:3px 10px; }
.fg-soc-badge.up{ background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok); }
.fg-soc-badge.down{ background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger); }
.fg-soc-badge.flat,.fg-soc-badge.new{ background:color-mix(in srgb,var(--muted) 14%,transparent); color:var(--muted); }
.fg-soc-minis{ display:flex; gap:8px; flex-wrap:wrap; }
.fg-soc-mini{ flex:1; min-width:72px; background:color-mix(in srgb,var(--muted) 7%,transparent); border-radius:var(--radius-sm); padding:8px 10px; }
.fg-soc-mini b{ display:block; font-weight:900; font-size:15px; font-variant-numeric:tabular-nums; }
.fg-soc-mini span{ font-size:10.5px; color:var(--muted); font-weight:700; }
.fg-soc-empty{ font-size:12.5px; color:var(--muted); background:color-mix(in srgb,var(--muted) 6%,transparent); border-radius:var(--radius-sm); padding:12px; }

/* ---- fg-snelkoppelingen ---- */
#fgSnkOv{ position:fixed; inset:0; z-index:2147482395; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding:7vh 16px; }
#fgSnkOv .fgsnk-box{ position:relative; display:flex; flex-direction:column; width:min(640px,96vw); max-height:80vh; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgsnk-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:16px; }
.fgsnk-body{ flex:1 1 auto; overflow:auto; padding:12px 14px; }
.fgsnk-foot{ flex:0 0 auto; padding:9px 16px; border-top:1px solid var(--line); font-size:11.5px; }
.fgsnk-cat{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:12px 2px 8px; }
.fgsnk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.fgsnk-tile{ position:relative; }
.fgsnk-open{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:16px 10px; transition:transform .1s ease, border-color .1s ease; }
.fgsnk-open:hover{ transform:translateY(-2px); border-color:var(--brand); }
.fgsnk-ic{ font-size:26px; }
.fgsnk-nm{ font-size:12.5px; font-weight:700; text-align:center; }
.fgsnk-edit{ position:absolute; top:6px; right:6px; border:0; background:color-mix(in srgb,var(--muted) 16%,transparent); color:var(--muted); border-radius:7px; cursor:pointer; font-size:11px; padding:2px 6px; opacity:0; transition:opacity .1s; }
.fgsnk-tile:hover .fgsnk-edit{ opacity:1; }

/* ---- fg-relaties ---- */
#fgRelOv{ position:fixed; inset:0; z-index:2147482390; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding:7vh 16px; }
#fgRelOv .fgrel-box{ position:relative; display:flex; flex-direction:column; width:min(620px,96vw); max-height:80vh; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgrel-head{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); font-size:15px; }
.fgrel-head .fgsp-input{ flex:1; }
.fgrel-chips{ flex:0 0 auto; display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px 4px; }
.fgrel-body{ flex:1 1 auto; overflow:auto; padding:6px 10px 12px; }
.fgrel-item{ display:flex; align-items:center; gap:11px; padding:10px 8px; border-radius:var(--radius-sm); cursor:pointer; }
.fgrel-item:hover{ background:color-mix(in srgb,var(--brand) 6%,transparent); }
.fgrel-ava{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--on-brand); background:linear-gradient(135deg,var(--brand),var(--brand-strong)); }

/* ---- fg-templates ---- */
#fgTplOv{ position:fixed; inset:0; z-index:2147482380; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding:7vh 16px; }
#fgTplOv .fgtpl-box{ position:relative; display:flex; flex-direction:column; width:min(600px,96vw); max-height:80vh; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgtpl-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:16px; }
.fgtpl-body{ flex:1 1 auto; overflow:auto; padding:8px 12px 14px; }
.fgtpl-item{ display:flex; align-items:center; gap:12px; padding:11px 8px; border-radius:var(--radius-sm); cursor:pointer; }
.fgtpl-item + .fgtpl-item{ border-top:1px solid var(--line); }
.fgtpl-item:hover{ background:color-mix(in srgb,var(--brand) 6%,transparent); }

/* ---- fg-ideeen: de ideeënbus ---- */
.fgide-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.fgide-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; cursor:pointer; display:flex; flex-direction:column; gap:8px; transition:transform .1s ease, border-color .1s ease; }
.fgide-card:hover{ transform:translateY(-1px); border-color:var(--brand); }
.fgide-top{ display:flex; align-items:center; gap:8px; }
.fgide-urg{ font-size:10.5px; font-weight:800; border-radius:999px; padding:2px 8px; }
.fgide-urg.u-hoog{ background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger); }
.fgide-urg.u-normaal{ background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand-ink); }
.fgide-urg.u-laag{ background:color-mix(in srgb,var(--muted) 14%,transparent); color:var(--muted); }
.fgide-idea{ font-weight:700; font-size:14px; line-height:1.4; }
.fgide-note{ font-size:12.5px; color:var(--muted); line-height:1.45; background:color-mix(in srgb,var(--warn) 9%,transparent); border-radius:var(--radius-sm); padding:8px 10px; }
.fgide-meta{ display:flex; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); font-weight:700; }

#fgIdeeOv{ position:fixed; inset:0; z-index:2147482370; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; }
#fgIdeeOv .fgide-box{ position:relative; display:flex; flex-direction:column; width:min(600px,96vw); max-height:82vh; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgide-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); font-size:16px; }
.fgide-bodyw{ flex:1 1 auto; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.fgide-ideabig{ font-weight:700; font-size:15px; line-height:1.5; }
.fgide-row{ display:flex; align-items:center; gap:10px; }
.fgide-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
@media(max-width:560px){ .fgide-fields{ grid-template-columns:1fr; } }
.fgide-foot{ flex:0 0 auto; display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }

/* ---- fg-mail: mailclient (lezen + antwoorden/doorsturen + AI) ---- */
#fgMailOv{ position:fixed; inset:0; z-index:2147482350; background:rgba(6,10,18,.5); backdrop-filter:blur(5px);
  display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; }
/* BUILD 868 · 20/09/2026 — GP NAAST DE BRIEF, NIET EROVER.
   Patrick koos voorstel B: nooit meer dan twee panelen in hetzelfde venster. De brief
   staat links, GP schuift rechts open als tweede kolom. Drie losse pop-ups zouden op een
   laptopscherm van 1366 toch op elkaar belanden{ flex:1 1 auto; min-height:0; display:flex; }
/* BUILD 870 — Patrick: "nog steeds 2 scrolbars?" Klopte. De brief wordt getoond in een eigen
   kadertje met wit papier (een iframe), en DAT kadertje schuift zelf al. In 868 liet ik de
   omhulling er ook nog eens bij schuiven: twee balken naast elkaar. Het schuiven gaat terug
   naar de brief zelf{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
/* BUILD 870 — Patrick: "hier zit de uitrek en de scrol over elkaar!" Klopte, en het was mijn
   fout. Sinds build 815 liggen de rekgrepen van het venster 4 pixels BINNEN de rand, omdat er
   anders niets te grijpen viel. Ik zette het GP-paneel pal tegen diezelfde rand, dus werd zijn
   schuifbalk op exact dezelfde pixels getekend als de rekgreep. Nu blijft er ruimte tussen de
   schuifbalk en de rand{ display:block; flex:0 0 380px; min-width:0; overflow-y:auto; overflow-x:hidden;
  padding:12px 4px 12px 12px; margin-right:10px; border-left:1px solid var(--line);
  background:color-mix(in srgb,var(--brand) 5%,transparent); scrollbar-width:auto; scrollbar-gutter:stable; }
/* Het rode vakje LIVE op de mascotteknop. Rood brandt alleen zolang GP werkt{ display:none; }
/* BUILD 870 — Patrick: "kunnen de knoppen niet naar boven, in een inbox hoort dat toch zo?"
   Ja, en het rechterpaneel van de lijst deed het al zo; het losse venster was de uitzondering.
   Bij een lange brief stonden de knoppen buiten beeld en moest je eerst naar beneden scrollen
   om te kunnen antwoorden. De volgorde wordt hier omgezet zonder de structuur aan te raken —
   de les van 868 — dus alle regels die met directe kinderen werken blijven gelden.
   Verwijderen houdt zijn eigen plaats uiterst rechts{ order:0; }
/* compacte{ padding:7px 11px; font-size:12.5px; line-height:1.15; white-space:nowrap; }

/* ---- fg-kalender ---- */
#fgKalOv{ position:fixed; inset:0; z-index:2147482360; background:rgba(6,10,18,.5); backdrop-filter:blur(5px);
  display:flex; align-items:flex-start; justify-content:center; padding:7vh 16px; }
#fgKalOv .fgkal-box{ position:relative; display:flex; flex-direction:column; width:min(620px,96vw); max-height:78vh;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgkal-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:16px; }
.fgkal-body{ flex:1 1 auto; overflow:auto; padding:8px 12px 14px; }
.fgkal-sec{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:12px 4px 6px; }
.fgkal-item{ display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--radius-sm); }
.fgkal-item:hover{ background:color-mix(in srgb,var(--brand) 6%,transparent); }
.fgkal-date{ width:120px; flex:0 0 auto; font-size:12px; font-weight:700; color:var(--ink); }

/* ---- fg-mascotte: chatbox per merk ---- */
#fgMascOv{ position:fixed; inset:0; z-index:2147482300; background:rgba(6,10,18,.42); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:flex-end; padding:5vh 4vw; }
#fgMascOv .fgm-box{ position:relative; display:flex; flex-direction:column; width:min(420px,94vw); height:min(560px,80vh);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgm-head{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.fgm-ava{ width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong)); }
.fgm-name{ font-weight:800; font-size:15px; }
.fgm-chat{ flex:1 1 auto; min-height:0; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:9px; }
.fgm-hello{ margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px; }
.fgm-hello .big{ font-size:34px; }
.fgm-msg{ display:flex; flex-direction:column; gap:3px; }
.fgm-msg.user{ align-items:flex-end; }
.fgm-bub{ max-width:86%; white-space:pre-wrap; line-height:1.45; font-size:13px; padding:9px 12px; border-radius:13px; border:1px solid var(--line); background:var(--bg); }
.fgm-msg.user .fgm-bub{ background:linear-gradient(180deg,var(--brand),var(--brand-strong)); color:var(--on-brand); border:0; }
.fgm-fb{ display:flex; gap:4px; padding-left:4px; }
.fgm-thumb{ border:0; background:transparent; cursor:pointer; font-size:14px; opacity:.5; padding:1px 3px; border-radius:6px; }
.fgm-thumb:hover{ opacity:1; background:color-mix(in srgb,var(--muted) 14%,transparent); }
.fgm-thumb.on{ opacity:1; }
.fgm-compose{ flex:0 0 auto; display:flex; gap:8px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--line); }
.fgm-compose textarea{ margin:0; resize:none; }

/* ---- fg-spotlight: project-breed zoeken ---- */
#fgSpotOv{ position:fixed; inset:0; z-index:2147482400; background:rgba(6,10,18,.5); backdrop-filter:blur(5px);
  display:flex; align-items:flex-start; justify-content:center; padding:9vh 16px; }
#fgSpotOv .fgsp-box{ position:relative; display:flex; flex-direction:column; width:min(620px,96vw); max-height:74vh;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgsp-head{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.fgsp-ic{ font-size:17px; }
.fgsp-input{ flex:1; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:16px; font-weight:600; }
.fgsp-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:6px; }
.fgsp-sec{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:10px 10px 5px; display:flex; align-items:center; gap:8px; }
.fgsp-n{ background:color-mix(in srgb,var(--muted) 14%,transparent); border-radius:999px; padding:0 7px; font-size:10.5px; }
.fgsp-row{ width:100%; display:flex; align-items:center; gap:11px; padding:9px 10px; border:0; background:transparent; border-radius:var(--radius-sm); cursor:pointer; text-align:left; color:var(--ink); }
.fgsp-row:hover{ background:color-mix(in srgb,var(--brand) 8%,transparent); }
.fgsp-rowic{ font-size:17px; width:22px; text-align:center; flex:0 0 auto; }
.fgsp-rowtx{ display:flex; flex-direction:column; min-width:0; }
.fgsp-rowtx b{ font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgsp-rowtx .fg-muted{ font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- fg-studio: Design Studio (asset-sidebar + copywriter + tools) ---- */
.fg-studio{ height:100%; display:grid; grid-template-columns:300px 1fr; gap:0; }
@media(max-width:820px){ .fg-studio{ grid-template-columns:1fr; } .fg-st-side{ display:none; } }
.fg-st-side{ border-right:1px solid var(--line); background:var(--card); overflow:auto; padding:12px 12px 24px; }
.fg-st-sidehead{ font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; margin:2px 2px 10px; }
.fg-st-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fg-st-tile{ font:inherit; cursor:pointer; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--bg);
  display:flex; flex-direction:column; padding:0; text-align:left; transition:transform .1s ease, border-color .1s ease; }
.fg-st-tile:hover{ transform:translateY(-1px); border-color:var(--brand); }
.fg-st-tile img{ width:100%; height:84px; object-fit:cover; display:block; background:var(--line); }
.fg-st-vid{ width:100%; height:84px; display:flex; align-items:center; justify-content:center; font-size:26px; background:color-mix(in srgb,var(--muted) 12%,transparent); }
.fg-st-cap{ font-size:10.5px; font-weight:700; padding:5px 7px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fg-st-center{ display:flex; flex-direction:column; min-height:0; padding:14px 16px 12px; gap:10px; }
.fg-st-chat{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:4px; }
.fg-st-hello{ margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.fg-st-hello .big{ font-size:40px; }
.fg-st-msg{ display:flex; }
.fg-st-msg.user{ justify-content:flex-end; }
.fg-st-bub{ max-width:80%; white-space:pre-wrap; line-height:1.5; font-size:13.5px; padding:11px 14px; border-radius:14px;
  border:1px solid var(--line); background:var(--card); }
.fg-st-msg.user .fg-st-bub{ background:linear-gradient(180deg,var(--brand),var(--brand-strong)); color:var(--on-brand); border:0; }
.fg-st-compose{ display:flex; gap:8px; align-items:flex-end; }
.fg-st-compose textarea{ margin:0; resize:vertical; }
.fg-st-tools{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.fg-st-toolslbl{ font-size:11.5px; font-weight:800; color:var(--muted); }

/* ---- fg-form: herbruikbaar formulier-venster ---- */
#fgFormOv{ position:fixed; inset:0; z-index:2147482200; background:rgba(6,10,18,.5); backdrop-filter:blur(5px);
  display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; }
#fgFormOv .fgform-box{ position:relative; display:flex; flex-direction:column; width:min(520px,96vw); max-height:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgform-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line); font-size:16px; }
.fgform-body{ flex:1 1 auto; overflow:auto; padding:16px 18px; display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
@media(max-width:560px){ .fgform-body{ grid-template-columns:1fr; } }
.fgform-l{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; color:var(--muted); }
.fgform-l:has(textarea){ grid-column:1 / -1; }
.fgform-l .fg-input{ margin:0; font-weight:600; }
.fgform-foot{ flex:0 0 auto; display:flex; justify-content:flex-end; gap:8px; padding:13px 18px; border-top:1px solid var(--line); }

/* ---- fg-window: sleep + rek vanuit alle randen/hoeken (Verkenner-stijl) ---- */
#fgFicheOv .fgf-box{ position:relative; display:flex; flex-direction:column; max-height:none; }
#fgFicheOv .fgf-head{ flex:0 0 auto; }
#fgFicheOv .fgf-body{ flex:1 1 auto; overflow:auto; }
.fgwin-rz{ position:absolute; z-index:6; }
.fgwin-n{ top:-3px; left:10px; right:10px; height:8px; cursor:ns-resize; }
.fgwin-s{ bottom:-3px; left:10px; right:10px; height:8px; cursor:ns-resize; }
.fgwin-e{ right:-3px; top:10px; bottom:10px; width:8px; cursor:ew-resize; }
.fgwin-w{ left:-3px; top:10px; bottom:10px; width:8px; cursor:ew-resize; }
.fgwin-ne{ top:-4px; right:-4px; width:15px; height:15px; cursor:nesw-resize; }
.fgwin-nw{ top:-4px; left:-4px; width:15px; height:15px; cursor:nwse-resize; }
.fgwin-se{ bottom:-4px; right:-4px; width:17px; height:17px; cursor:nwse-resize; }
.fgwin-sw{ bottom:-4px; left:-4px; width:15px; height:15px; cursor:nesw-resize; }
.fgwin-se::after{ content:""; position:absolute; right:3px; bottom:3px; width:8px; height:8px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); border-radius:0 0 3px 0; opacity:.6; }

/* ---- GP-kantoor tegels ---- */
.fg-kantoortile{ position:relative; font:inherit; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:2px; color:var(--ink); transition:transform .1s ease, border-color .1s ease; }
.fg-kantoortile:hover{ transform:translateY(-2px); border-color:var(--brand); }
.fg-kantoortile .ic{ font-size:26px; margin-bottom:4px; }
.fg-kantoortile.off{ opacity:.45; }
.fg-tilechk{ position:absolute; top:10px; right:12px; font-size:16px; }

/* ---- Flash Search zoekbalk ---- */
.fg-flashbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; }
.fg-flashttl{ font-weight:800; font-size:13px; color:var(--brand-ink); }
.fg-flashbar .fg-input{ margin:0; width:auto; min-width:120px; flex:0 1 auto; }
.fg-flashbar #ffCity, .fg-flashbar #ffTrade{ flex:1 1 130px; }

/* ---- spraak-mic ---- */
.fg-mic.on{ background:linear-gradient(180deg,var(--brand),var(--brand-strong)); color:var(--on-brand); border-color:transparent; animation:fgMicPulse 1.2s ease-in-out infinite; }
@keyframes fgMicPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 40%,transparent);} 50%{ box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 8%,transparent);} }

/* ---- Flash Search panel ---- */
.fhfl-panel{ display:flex; flex-direction:column; gap:10px; }
.fhfl-web{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; }
.fhfl-weblbl{ font-weight:800; font-size:13px; color:var(--brand-ink); }
.fhfl-web .fg-input{ margin:0; width:auto; }
.fhfl-meterrow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fhfl-meter{ font-size:12px; font-weight:700; background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid color-mix(in srgb,var(--ok) 26%,transparent); border-radius:999px; padding:5px 11px; }
.fhfl-meter.danger{ background:color-mix(in srgb,var(--danger) 12%,transparent); border-color:color-mix(in srgb,var(--danger) 30%,transparent); color:var(--danger); }
.fhfl-autofill{ display:flex; align-items:center; gap:8px; margin-left:auto; font-size:12.5px; font-weight:700; border:1px solid var(--line); border-radius:999px; padding:4px 12px;
  min-height:42px; box-sizing:border-box; }   /* build 791: even hoog als het werkblokje ernaast */
.fhfl-autofill.af-on{ border-color:var(--brand); }
.fhfl-af-t input{ width:52px; margin:0 0 0 4px; padding:3px 6px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--ink); font:inherit; }
.fhfl-af-cd{ color:var(--muted); font-weight:600; }
.fhfl-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; }
.fhfl-hide{ display:flex; align-items:center; gap:6px; font-weight:700; cursor:pointer; }
.fhfl-stat{ color:var(--muted); font-weight:700; }
.fhfl-flags{ display:flex; gap:5px; flex-wrap:wrap; }
.fhfl-flag{ font-size:10.5px; font-weight:800; background:color-mix(in srgb,var(--muted) 12%,transparent); border-radius:6px; padding:2px 6px; }
.fhfl-flag.ads{ background:color-mix(in srgb,var(--brand) 16%,transparent); color:var(--brand-ink); }
.fhfl-noflag{ color:var(--muted); }
.fhfl-badge{ font-size:11.5px; font-weight:900; border-radius:999px; padding:3px 9px; }
.fhfl-badge.hot{ background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok); }
.fhfl-badge.ok{ background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn); }
.fhfl-badge.low{ background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--danger); }
.fhfl-contact{ font-size:15px; letter-spacing:2px; }

/* ---- Sales + Dossier popups ---- */
#fgSalOv,#fgDosOv{ position:fixed; inset:0; z-index:2147482385; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding:7vh 16px; }
#fgSalOv .fgsal-box,#fgDosOv .fgdos-box{ position:relative; display:flex; flex-direction:column; width:min(620px,96vw); max-height:82vh; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgsal-head,.fgdos-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:16px; }
.fgsal-body,.fgdos-body{ flex:1 1 auto; overflow:auto; padding:8px 12px 14px; }
.fgsal-item{ display:flex; align-items:center; gap:11px; padding:11px 8px; border-radius:var(--radius-sm); cursor:pointer; }
.fgsal-item:hover{ background:color-mix(in srgb,var(--brand) 6%,transparent); }
.fgsal-ava{ width:36px; height:36px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--on-brand); background:linear-gradient(135deg,var(--brand),var(--brand-strong)); }
.fgdos-cat{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:12px 4px 6px; }
.fgdos-item{ display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--radius-sm); cursor:pointer; }
.fgdos-item:hover{ background:color-mix(in srgb,var(--brand) 6%,transparent); }

/* ---- Studio startscherm (taak-tegels) ---- */
.fg-st-home{ max-width:900px; margin:0 auto; padding:28px 20px; display:flex; flex-direction:column; gap:16px; }
.fg-st-hometitle{ font-size:20px; font-weight:900; text-align:center; letter-spacing:-.01em; }
.fg-st-tasks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.fg-st-task{ font:inherit; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:2px; color:var(--ink); padding:18px; transition:transform .1s ease, border-color .1s ease; }
.fg-st-task:hover{ transform:translateY(-2px); border-color:var(--brand); }
.fg-st-task .ic{ font-size:30px; margin-bottom:6px; }

/* ---- Bedrijfsinfo ---- */
#fgBiOv{ position:fixed; inset:0; z-index:2147482375; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; }
#fgBiOv .fgbi-box{ position:relative; display:flex; flex-direction:column; width:min(560px,96vw); max-height:82vh; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgbi-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); font-size:16px; }
.fgbi-body{ flex:1 1 auto; overflow:auto; padding:14px 18px; }
.fgbi-sec{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; }
.fgbi-sec:first-child{ margin-top:0; }
.fgbi-row{ display:flex; justify-content:space-between; gap:14px; padding:6px 0; border-bottom:1px solid var(--line); font-size:13px; }
.fgbi-k{ color:var(--muted); font-weight:600; }
.fgbi-v{ font-weight:700; text-align:right; }

/* ---- Grote Chat ---- */
#fgGcOv{ position:fixed; inset:0; z-index:2147482450; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:flex-end; justify-content:center; padding:4vh 16px; }
#fgGcOv .fggc-box{ position:relative; display:flex; flex-direction:column; width:min(720px,96vw); height:min(680px,88vh); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fggc-head{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); font-size:16px; }
.fggc-chan{ display:flex; gap:6px; margin-left:auto; }
.fggc-chanbtn{ font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:700; }
.fggc-chanbtn.on{ background:linear-gradient(180deg,var(--brand),var(--brand-strong)); color:var(--on-brand); border:0; }
.fggc-msgs{ flex:1 1 auto; min-height:0; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.fggc-msg{ display:flex; flex-direction:column; gap:3px; max-width:82%; }
.fggc-msg.mine{ align-self:flex-end; align-items:flex-end; }
.fggc-who{ font-size:11px; font-weight:700; color:var(--muted); padding:0 4px; }
.fggc-bub{ white-space:pre-wrap; line-height:1.45; font-size:13.5px; padding:9px 13px; border-radius:14px; border:1px solid var(--line); background:var(--bg); }
.fggc-msg.mine .fggc-bub{ background:linear-gradient(180deg,var(--brand),var(--brand-strong)); color:var(--on-brand); border:0; }
.fggc-msg.mascotte .fggc-bub{ background:color-mix(in srgb,var(--brand) 8%,var(--card)); border-color:color-mix(in srgb,var(--brand) 22%,transparent); }
.fggc-fb{ display:flex; gap:4px; padding-left:4px; }
.fggc-thumb{ border:0; background:transparent; cursor:pointer; font-size:13px; opacity:.5; padding:1px 3px; border-radius:6px; }
.fggc-thumb:hover,.fggc-thumb.on{ opacity:1; }
.fggc-masc{ flex:0 0 auto; display:flex; gap:6px; flex-wrap:wrap; padding:8px 14px 0; }
.fggc-compose{ flex:0 0 auto; display:flex; gap:8px; align-items:flex-end; padding:10px 14px 12px; border-top:1px solid var(--line); }
.fggc-compose textarea{ margin:0; resize:none; }

/* ============================================================
   SOCIAL DETAIL — klik op een kanaalkaart → alle detaildata
   ============================================================ */
#fgSocOv{ position:fixed; inset:0; z-index:2147482380; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; }
#fgSocOv .fgsoc-box{ position:relative; display:flex; flex-direction:column; width:min(700px,96vw); max-height:88vh; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgsoc-head{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); font-size:16px; cursor:grab; }
.fgsoc-body{ flex:1 1 auto; overflow:auto; padding:16px 18px; display:flex; flex-direction:column; }
.fgsoc-sec{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:18px 0 8px; }
.fgsoc-sec:first-child{ margin-top:4px; }
.fgsoc-trendwrap{ background:color-mix(in srgb,var(--muted) 6%,transparent); border-radius:var(--radius-sm); padding:12px 12px 10px; }
.fgsoc-trend{ display:flex; align-items:flex-end; gap:6px; height:62px; }
.fgsoc-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; }
.fgsoc-bar>span{ width:100%; max-width:24px; background:var(--brand); border-radius:4px 4px 0 0; display:block; }
.fgsoc-bar>em{ font-style:normal; font-size:9px; color:var(--muted); }
.fgsoc-trendfoot{ display:flex; align-items:center; gap:8px; margin-top:9px; font-size:12px; font-weight:700; color:var(--muted); }
.fgsoc-posts{ display:flex; flex-direction:column; }
.fgsoc-postrow{ display:grid; grid-template-columns:1fr 56px 56px 44px 44px 44px; align-items:center; gap:6px; padding:8px 6px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.fgsoc-postrow:hover{ background:color-mix(in srgb,var(--brand) 7%,transparent); }
.fgsoc-postrow.head{ font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.fgsoc-postrow .pt{ display:flex; align-items:center; gap:8px; min-width:0; }
.fgsoc-postrow .pv{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; }
.fgsoc-pth{ width:38px; height:38px; border-radius:8px; object-fit:cover; flex:0 0 auto; background:color-mix(in srgb,var(--muted) 12%,transparent); display:inline-flex; align-items:center; justify-content:center; }
.fgsoc-pth.noimg{ font-size:18px; }
.fgsoc-ptx{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.fgsoc-ptag{ font-size:10px; font-weight:800; color:var(--muted); }
.fgsoc-ptag.reel{ color:#dc2743; } .fgsoc-ptag.story{ color:#8b5cf6; }
.fgsoc-pcap{ font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgsoc-pwhen{ font-size:10px; color:var(--muted); }
.fgsoc-demogrid,.fgsoc-demotwo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fgsoc-demotwo{ margin-top:12px; }
.fgsoc-demoh{ font-size:11px; font-weight:800; color:var(--muted); margin-bottom:6px; }
.fgsoc-demorow{ display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:12px; }
.fgsoc-demorow .dl{ width:80px; flex:0 0 auto; color:var(--muted); }
.fgsoc-demorow .db{ flex:1; height:8px; background:color-mix(in srgb,var(--muted) 14%,transparent); border-radius:999px; overflow:hidden; }
.fgsoc-demorow .db i{ display:block; height:100%; background:var(--brand); border-radius:999px; }
.fgsoc-demorow .dv{ width:40px; text-align:right; font-weight:700; }
.fgsoc-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.fgsoc-chips span{ font-size:11.5px; background:color-mix(in srgb,var(--muted) 10%,transparent); padding:3px 9px; border-radius:999px; }
.fg-soc-card.clickable{ cursor:pointer; transition:transform .08s, border-color .12s, box-shadow .12s; }
.fg-soc-card.clickable:hover{ transform:translateY(-2px); border-color:var(--brand); box-shadow:var(--shadow); }
.fg-soc-empty{ padding:16px; text-align:center; color:var(--muted); font-size:13px; }

/* ============================================================
   INFO-TIP — kleine ⓘ met uitleg (hover). Voor "infotjes overal".
   ============================================================ */
.fg-info{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:999px; background:color-mix(in srgb,var(--muted) 22%,transparent); color:var(--muted); font-size:10px; font-weight:800; cursor:help; margin-left:5px; position:relative; vertical-align:middle; }
.fg-info:hover{ background:var(--brand); color:#fff; }
.fg-info:hover::after{ content:attr(data-tip); position:absolute; bottom:135%; left:50%; transform:translateX(-50%); background:#0f1420; color:#fff; font-size:11px; font-weight:600; line-height:1.4; padding:8px 10px; border-radius:9px; width:max-content; max-width:230px; z-index:60; box-shadow:0 10px 30px rgba(0,0,0,.34); white-space:normal; text-align:left; }

/* ============================================================
   HOME / OPENINGSSCHERM — snel, functioneel, in enkele klikken
   ============================================================ */
.fg-home{ display:flex; flex-direction:column; gap:22px; }
.fg-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.fg-hi{ font-size:27px; font-weight:900; letter-spacing:-.02em; line-height:1.1; }
.fg-hi .fg-muted{ font-weight:600; }
.fg-hero .sub{ color:var(--muted); font-size:13px; margin-top:4px; }
.fg-homesearch{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 16px; cursor:text; font-size:14px; color:var(--muted); min-width:240px; flex:1; max-width:420px; }
.fg-homesearch kbd{ margin-left:auto; }
.fg-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.fg-kpi{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 16px; cursor:pointer; transition:transform .08s,border-color .12s,box-shadow .12s; }
.fg-kpi:hover{ transform:translateY(-2px); border-color:var(--brand); box-shadow:var(--shadow); }
.fg-kpi .ic{ position:absolute; right:13px; top:13px; font-size:17px; opacity:.85; }
.fg-kpi .n{ font-size:28px; font-weight:900; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.fg-kpi .l{ display:block; color:var(--muted); font-size:12px; font-weight:700; margin-top:7px; }
.fg-sech{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:2px 2px -6px; }
.fg-brandgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.fg-brandcard{ position:relative; overflow:hidden; border:1px solid color-mix(in srgb,#000 22%,transparent); border-radius:18px; padding:18px 18px 16px; cursor:pointer; min-height:170px;
  background:var(--bgrad, linear-gradient(135deg,#333,#555)); color:#fff; text-align:left;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.6); transition:transform .12s, box-shadow .14s; }
.fg-brandcard:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(0,0,0,.7); }
.fg-brandcard::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 100%, rgba(0,0,0,.28), transparent 60%); pointer-events:none; }
.fg-bc-masc{ position:absolute; right:0; bottom:0; height:auto; width:auto; max-width:44%; max-height:88%; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); z-index:1; opacity:.98; }
.fg-bc-body{ position:relative; z-index:2; max-width:62%; }
.fg-brandcard .bemoji{ font-size:22px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.fg-brandcard .bname{ font-weight:900; font-size:18px; margin-top:6px; text-shadow:0 1px 4px rgba(0,0,0,.45); }
.fg-brandcard .bnum{ font-size:26px; font-weight:900; margin-top:14px; letter-spacing:-.02em; text-shadow:0 1px 4px rgba(0,0,0,.45); }
.fg-brandcard .blbl{ color:rgba(255,255,255,.82); font-size:12px; margin-top:1px; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.fg-clock{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--brand-ink); }
.fg-quick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,1fr)); gap:10px; }
.fg-qtile{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:16px 10px; background:var(--card); border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:transform .08s,border-color .12s; }
.fg-qtile:hover{ transform:translateY(-2px); border-color:var(--brand); }
.fg-qtile .qic{ font-size:22px; }
.fg-qtile .qtx{ font-size:12.5px; font-weight:700; }
.fg-homefoot{ color:var(--muted); font-size:11.5px; text-align:center; }

/* ===== GP FLUISTERT — wat nu te doen (home) ===== */
.fg-gp{ display:flex; gap:14px; align-items:flex-start; background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 12%,var(--card)),var(--card) 60%); border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line)); border-radius:16px; padding:16px 18px; }
.fg-gp-av{ font-size:30px; flex:0 0 auto; line-height:1; }
.fg-gp-main{ flex:1; min-width:0; }
.fg-gp-h{ font-size:13px; font-weight:900; letter-spacing:.01em; margin-bottom:9px; }
.fg-gp-list{ display:flex; flex-direction:column; gap:7px; }
.fg-gp-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:10px 12px; cursor:pointer; font-size:13.5px; font-weight:600; transition:transform .07s,border-color .12s; }
.fg-gp-item:hover{ transform:translateX(2px); border-color:var(--brand); }
.fg-gp-item .e{ font-size:16px; flex:0 0 auto; }
.fg-gp-item .t{ flex:1; min-width:0; }
.fg-gp-item em{ font-style:normal; color:var(--brand-ink); font-weight:900; }

/* ===== ongelezen-badge (chat-signaal op 🗨️) ===== */
.fg-badgewrap{ position:relative; display:inline-flex; }
.fg-badge{ position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--danger,var(--danger)); color:#fff; font-size:10px; font-weight:900; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--card); }
.fg-badge[hidden]{ display:none; }

/* ===== Social weekdoel (+50/week) ===== */
.fg-soc-goal{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:12px; }
.fg-soc-goalhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:8px; }
.fg-soc-goalbar{ height:9px; background:color-mix(in srgb,var(--muted) 14%,transparent); border-radius:999px; overflow:hidden; }
.fg-soc-goalbar i{ display:block; height:100%; background:var(--brand); border-radius:999px; transition:width .3s; }

/* ===== formulier-sectiekop (volledige fiche) ===== */
.fgform-sec{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:14px 2px 4px; padding-top:8px; border-top:1px solid var(--line); }
.fgform-sec:first-child{ border-top:0; padding-top:0; margin-top:2px; }

/* ===== KAART ===== */
#fgMapOv{ position:fixed; inset:0; z-index:2147482390; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:4vh 16px; }
#fgMapOv .fgmap-box{ position:relative; display:flex; flex-direction:column; width:min(920px,96vw); height:min(760px,90vh); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgmap-head{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line); font-size:15px; cursor:grab; }
.fgmap-legend{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); margin-left:auto; flex-wrap:wrap; }
.fgmap-legend i{ display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:2px; vertical-align:middle; }
.fgmap-canvas{ flex:1 1 auto; min-height:0; }
.fgmap-canvas .leaflet-container{ height:100%; width:100%; background:#e9edf2; }
.fgmap-open{ border:1px solid var(--line); background:var(--brand); color:#fff; border-radius:7px; padding:3px 8px; font-weight:700; font-size:12px; }

/* ===== WEBSITE-RAPPORT ===== */
#fgWrOv{ position:fixed; inset:0; z-index:2147482388; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding:2.5vh 14px; }
#fgWrOv .fgwr-box{ position:relative; display:flex; flex-direction:column; width:min(1600px,97vw); max-height:95vh; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fgwr-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); font-size:15px; cursor:grab; }
.fgwr-body{ flex:1 1 auto; overflow:auto; padding:16px 18px; }
.fgwr-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.fgwr-kpi{ background:color-mix(in srgb,var(--muted) 7%,transparent); border-radius:12px; padding:12px 14px; }
.fgwr-kpi b{ display:block; font-size:24px; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.fgwr-kpi span{ font-size:11.5px; color:var(--muted); font-weight:700; }
.fgwr-sec{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:16px 0 8px; }
.fgwr-spark{ display:flex; align-items:flex-end; gap:5px; height:60px; background:color-mix(in srgb,var(--muted) 6%,transparent); border-radius:10px; padding:8px 10px; }
.fgwr-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; }
.fgwr-bar>span{ width:100%; max-width:18px; background:var(--brand); border-radius:3px 3px 0 0; }
.fgwr-bar>em{ font-style:normal; font-size:9px; color:var(--muted); }
.fgwr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; }
.fgwr-row{ display:flex; align-items:center; gap:11px; margin-bottom:9px; font-size:13.5px; }
.fgwr-row .l{ width:150px; flex:0 0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-weight:600; }
.fgwr-row .b{ flex:1; height:12px; background:color-mix(in srgb,var(--muted) 14%,transparent); border-radius:999px; overflow:hidden; }
.fgwr-row .b i{ display:block; height:100%; background:linear-gradient(90deg,#E06C10,#F5A623); border-radius:999px; }
.fgwr-row .v{ width:64px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }
.fgwr-analyse{ display:flex; gap:12px; align-items:flex-start; background:color-mix(in srgb,var(--brand) 8%,transparent); border:1px solid color-mix(in srgb,var(--brand) 30%,transparent); border-radius:14px; padding:14px 16px; margin-bottom:16px; }
.fgwr-analyse-ic{ font-size:1.5rem; line-height:1; }
.fgwr-analyse-t{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:4px; }
.fgwr-analyse-b{ font-size:14.5px; line-height:1.55; color:var(--text); }
.fgwr-trend{ color:var(--brand-ink); }
.fgwr-live{ font-size:11px; font-weight:800; color:#1f9d55; background:color-mix(in srgb,var(--ok) 16%,transparent); padding:3px 9px; border-radius:999px; display:inline-flex; gap:6px; align-items:center; margin-left:10px; }
.fgwr-live .bl{ width:7px; height:7px; border-radius:50%; background:var(--ok); animation:fgwrbl 1.4s infinite; } @keyframes fgwrbl{ 50%{ opacity:.25; } }
@media(max-width:640px){ .fgwr-grid{ grid-template-columns:1fr; } }

/* ===== actieknop naast een formulierveld (bv. BTW ophalen) ===== */
.fgform-actrow{ display:flex; gap:6px; align-items:stretch; }
.fgform-actrow .fg-input{ flex:1; min-width:0; }
.fgform-actrow .fg-btn{ flex:0 0 auto; white-space:nowrap; }

/* ============================================================
   BRANDED HEADER — glossy per-merk gradient (zoals command center)
   ============================================================ */
.fg-header.brandhead{ background:var(--hgrad, var(--card)); border-bottom:1px solid rgba(0,0,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 30px -20px rgba(0,0,0,.6); }
.fg-header.brandhead::before{ display:none; }
.brandhead .fg-brand{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.brandhead .fg-brand .dot{ background:rgba(255,255,255,.22); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
.brandhead .fg-tab{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.28); font-weight:800; backdrop-filter:blur(2px); }
.brandhead .fg-tab:hover{ background:rgba(255,255,255,.30); transform:translateY(-1px); }
.brandhead .fg-tab.on{ background:#fff; color:#181206; border-color:#fff; text-shadow:none; box-shadow:0 6px 14px -6px rgba(0,0,0,.45); }
.brandhead .fg-tab .ti{ margin-right:6px; font-size:14px; }
.brandhead .fg-tab.empty{ background:transparent; border:0; box-shadow:none; }
.brandhead .fg-btn{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.30); color:#fff; }
.brandhead .fg-btn:hover{ background:rgba(255,255,255,.30); }
.brandhead .fg-btn.brand{ background:#fff; color:#181206; border-color:#fff; }
.brandhead .fg-chip{ background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.25); }
.brandhead .fg-chip .k{ color:rgba(255,255,255,.78); }
.brandhead .fg-badge{ box-shadow:0 0 0 2px rgba(0,0,0,.22); }

/* ============================================================
   DROPBOX — DE KAST (mappen als boekbinders)
   ============================================================ */
.fg-kast-head{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.fg-kast-masc{ height:64px; width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.fg-kast-title{ font-weight:900; font-size:19px; letter-spacing:-.01em; }
.fg-kast{ display:grid; grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:14px; }

/* ================= BUILD 1145 - 22/10/2026 - DE OORZAAK, EINDELIJK GEMETEN =========
   De meter gaf het beslissende cijfer: het lijstvak was 6 PIXELS breed (6x706).
   Niet onzichtbaar, niet leeg - platgedrukt.
   Waarom: .fg2pb-drie is een raster van VIJF kolommen -
       rail | greep 6px | lijst | greep 6px | lees
   en de kinderen vallen op volgorde in die kolommen. Toen ik de oude rail op
   display:none zette (hij was leeg sinds de boom naar de zijbalk verhuisde),
   verdween hij uit die rij en schoof ALLES een kolom op: de greep kreeg de
   206px van de rail, de LIJST kreeg de 6px van de greep, en de tweede greep
   kreeg de 390px van de lijst. Dat zijn precies de drie vlakken die Patrick
   zag staan, met zijn post geperst in zes pixels.
   De herstelling: de rail blijft gewoon in de rij staan - maar met breedte
   nul, en zijn kolom ook. Dan klopt de volgorde weer en krijgt de lijst haar
   390px terug. ============================================================= */
#fg2pbRail{
  display:block !important; width:0 !important; min-width:0 !important;
  padding:0 !important; border:0 !important; overflow:hidden !important;
}
.fg2pb-drie{ grid-template-columns: 0 0 minmax(0, var(--pb-lijst)) 6px minmax(0, 1fr) !important; }
.fg2pb-drie > *{ min-width:0; }

/* ===== BUILD 1146 - 22/10/2026 - NU VASTGEZET, NIET MEER GETELD =====
   1145 was nog niet goed: de lijst werd 2px in plaats van 6. De reden is dat
   ik bleef rekenen met de VOLGORDE van de kinderen in het raster, en die klopt
   niet meer: de rail staat niet eens meer in de pagina, dus schuift alles op,
   welk sjabloon ik er ook boven zet.
   Daarom wijs ik nu elk vak zijn kolom TOE, met naam. Dan maakt het niet meer
   uit hoeveel kinderen er staan of in welke volgorde - de berichtenlijst staat
   in kolom 1 (390px), de greep in kolom 2, het leesvenster in kolom 3. Dit kan
   niet meer verschuiven. */
.fg2pb-drie{ grid-template-columns: minmax(0, var(--pb-lijst, 390px)) 6px minmax(0, 1fr) !important; }
#fg2pbRail{ display:none !important; }
#fg2pbLijst{ grid-column: 1 / 2 !important; min-width:260px !important; }
.fg2pb-drie > .fg2pb-greep{ grid-column: 2 / 3 !important; }
#fg2pbLees{ grid-column: 3 / 4 !important; }

/* ---- BUILD 1145 - GEVULDE MAPPEN EEN TIK GROTER ----
   Patrick: "kunnen de mappen die documenten bevatten een tik groter worden". */
.fg-kast .fg-binder:not(.leeg){ height:180px; }
.fg-kast .fg-binder.leeg{ height:136px; }
/* BUILD 676 — gevulde mappen eerst, dan één rustige streep, dan de lege. */
.fg-kast-scheiding{ grid-column:1/-1; display:flex; align-items:center; gap:10px; margin:6px 0 -2px;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted,#8a97ad); }
.fg-kast-scheiding::after{ content:""; flex:1; height:1px; background:var(--line,rgba(127,127,127,.28)); }
/* BUILD 680 — de archiefbalk. Patrick zag 61 bestanden waar er 196 stonden, omdat
   het archief-standje aan stond en niets dat zei. Deze balk zegt het, en is zelf
   de weg terug. Nooit meer een kast die leeg lijkt terwijl ze vol is. */
.fg-kast-binbalk{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; cursor:pointer;
  margin:0 0 14px; padding:11px 14px; border-radius:12px; font-size:13px; line-height:1.45;
  color:#f4d9a8; background:rgba(217,134,30,.13); border:1px solid rgba(217,134,30,.45); }
.fg-kast-binbalk:hover{ background:rgba(217,134,30,.2); }
.fg-kast-binlink{ font-weight:800; text-decoration:underline; }
.fg-binder{ position:relative; height:152px; border-radius:7px 11px 11px 7px; cursor:pointer; text-align:left; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb,var(--spine) 92%,#fff 0%), color-mix(in srgb,var(--spine) 60%,#000 22%));
  border:1px solid rgba(0,0,0,.32); border-left:9px solid color-mix(in srgb,var(--spine) 55%,#000 32%);
  box-shadow:0 9px 20px -12px rgba(0,0,0,.65), inset -7px 0 14px -9px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
  display:flex; flex-direction:column; justify-content:flex-end; padding:12px; color:#fff; transition:transform .12s ease; }
.fg-binder::after{ content:""; position:absolute; left:0; right:0; top:0; height:26px; background:linear-gradient(180deg,rgba(255,255,255,.22),transparent); pointer-events:none; }
.fg-binder:hover{ transform:translateY(-5px) rotate(-.6deg); }
.fg-binder-ic{ position:absolute; top:11px; left:12px; font-size:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.fg-binder-name{ font-weight:800; font-size:13px; line-height:1.15; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.fg-binder-count{ font-size:11px; opacity:.92; margin-top:2px; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.fg-binder.leeg{ filter:grayscale(.8) brightness(.85) opacity(.55); box-shadow:none; }
.fg-filegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:12px; }
.fg-file{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer; text-align:left; transition:transform .08s,border-color .12s,box-shadow .12s; }
.fg-file:hover{ transform:translateY(-2px); border-color:var(--brand); box-shadow:var(--shadow); }
.fg-file-ic{ font-size:26px; }
.fg-file-name{ font-weight:700; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.fg-file-meta{ font-size:11px; color:var(--muted); }

/* ============================================================
   HEADER-EXTRA'S (logo, zoekpill, projectkeuze, avatar, mascotte) + COMPACTER
   ============================================================ */
.fg-logo{ height:26px; width:auto; border-radius:7px; vertical-align:middle; }
.fg-hsearch{ display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:text; max-width:250px; overflow:hidden; }
.fg-hsearch span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fg-hsearch kbd{ margin-left:auto; }
.fg-projsel{ font:inherit; font-size:12.5px; font-weight:800; border-radius:10px; padding:6px 8px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.fg-avatar{ width:30px; height:30px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; background:var(--brand); color:#fff; flex:0 0 auto; box-shadow:0 2px 8px -2px color-mix(in srgb,var(--brand) 60%,transparent); }
.fg-head-masc{ position:absolute; right:6px; bottom:0; height:62px; width:auto; pointer-events:none; opacity:.95; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); z-index:1; }
.brandhead .fg-hrow, .brandhead .fg-tabswrap{ position:relative; z-index:2; }
.brandhead .fg-hsearch{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.30); color:#fff; }
.brandhead .fg-projsel{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.32); color:#fff; }
.brandhead .fg-projsel option{ color:#111; }
.brandhead .fg-avatar{ background:#fff; color:#181206; }
/* compacter */
.fg-header{ padding:10px 16px 11px; gap:8px; }
.fg-tabswrap{ grid-template-rows:37px 37px; gap:6px; }
.fg-tab{ padding:7px 10px; font-size:12.5px; }
.fg-tab .ti{ font-size:13px; }
.fg-btn.sm{ padding:5px 8px; font-size:12.5px; }
.fg-kast{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:12px; }
.fg-binder{ height:128px; }
.fg-kast-masc{ height:54px; }

/* ============================================================
   MEDIA-VIEWER — alles in een pop-up (nooit een nieuw tabblad)
   ============================================================ */
#fgMvOv{ position:fixed; inset:0; z-index:2147482460; background:rgba(6,10,18,.64); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:4vh 16px; }
#fgMvOv .fgmv-box{ position:relative; display:flex; flex-direction:column; width:min(920px,96vw); max-height:92vh; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.fgmv-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); cursor:grab; font-size:14px; }
.fgmv-body{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center; background:#0b0f17; }
/* BUILD 640 — een doorzichtige afbeelding staat op een ruitjespatroon, zodat je in één
   oogopslag ziet dát ze doorzichtig is en er geen wit of zwart vlak achter zit. */
.fgmv-body img{ max-width:100%; max-height:78vh; display:block; background-color:#141a24;
  background-image:linear-gradient(45deg,#1b2330 25%,transparent 25%),linear-gradient(-45deg,#1b2330 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1b2330 75%),linear-gradient(-45deg,transparent 75%,#1b2330 75%);
  background-size:22px 22px; background-position:0 0,0 11px,11px -11px,-11px 0; }
.fgmv-body video{ max-width:100%; max-height:78vh; background:#000; }
.fgmv-body iframe{ width:100%; height:78vh; border:0; background:#fff; }
.fgmv-body audio{ width:88%; }
/* BUILD 640 — de opruimknop knippert zolang er iets in het archief staat, en houdt op
   zodra het leeg is. Zachte puls, geen stroboscoop: hij moet opvallen, niet storen.
   Wie beweging in beeld liever vermijdt (voorkeur van het toestel zelf), krijgt gewoon
   een stilstaande rode knop — daarom de prefers-reduced-motion. */
.fg-flikker{ animation:fgFlikker 1.5s ease-in-out infinite; }
@keyframes fgFlikker{ 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.55); }
                      50%{ box-shadow:0 0 0 6px rgba(220,38,38,0); } }
@media (prefers-reduced-motion: reduce){ .fg-flikker{ animation:none; } }
/* de voet van het kijkvenster: gegevens links, dezelfde acties als op de tegel rechts */
.fgmv-voet{ flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 12px; border-top:1px solid var(--line); background:var(--card); font-size:12.5px; }
.fgmv-voet .fgmv-info{ color:var(--muted); white-space:nowrap; }
.fgmv-voet .fg-btn.sm{ white-space:nowrap; }
.fgmv-voet select{ max-width:180px; }

/* ============================================================
   BESTANDS-THUMBNAILS in de map
   ============================================================ */
.fg-file-th{ position:relative; width:100%; height:92px; border-radius:9px; overflow:hidden; background:color-mix(in srgb,var(--muted) 12%,transparent); display:flex; align-items:center; justify-content:center; }
.fg-file-th img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s; }
.fg-file-th img.loaded{ opacity:1; }
.fg-file-th .ph{ font-size:30px; }
/* build 684 — de verkoopkoffer: het knopje dat aan staat, en het vlaggetje op de naam */
.fg-file-actions button.aan{ background:rgba(22,163,74,.18); border-color:rgba(22,163,74,.5); }
.fg-koffervlag{ font-size:.85em; opacity:.9; }
/* build 683 — een beeld dat niet laadt toont zijn extensie, geen fotolijstje-emoji */
.fg-file-th .ph .fg-ext{ font-style:normal; font-size:11px; font-weight:800; letter-spacing:.1em;
  color:var(--muted,#8a97ad); opacity:.75; }
.fg-file.row .fg-file-th .ph .fg-ext{ font-size:8px; letter-spacing:.04em; }
.fg-file-th.vid .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.6); }

/* ============================================================
   V7-HEADER — 1-op-1 uit de oude app (#fgCtx), scoped op .fg-header.v7
   ============================================================ */
.fg-header.v7{ display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
  grid-template-areas:"brand nav util1" "home nav util2"; column-gap:16px; row-gap:8px; align-items:center;
  position:relative; overflow:hidden; padding:10px 16px; color:#fff; border-bottom:0;
  box-shadow:0 12px 32px -14px rgba(0,0,0,.6), inset 0 -1px 0 rgba(0,0,0,.22); }
.fg-header.v7::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(240px 240px at var(--fgmx,110%) var(--fgmy,-40%),rgba(255,255,255,.30),transparent 60%),radial-gradient(640px 230px at 80% -95%,rgba(255,255,255,.45),transparent 60%),radial-gradient(440px 210px at 8% 175%,rgba(0,0,0,.22),transparent 60%); }
.fg-header.v7::after{ content:""; position:absolute; top:0; left:-50%; width:44%; height:100%; pointer-events:none; z-index:1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.40),transparent); transform:skewX(-18deg); animation:fgSheen 7s ease-in-out infinite; }
@keyframes fgSheen{0%{left:-52%}55%{left:138%}100%{left:138%}}
.fg-header.v7>*{ position:relative; z-index:2; }
.fg-header.v7 .fgb-brand{ grid-area:brand; display:flex; align-items:center; gap:9px; }
.fg-header.v7 .fgb-logo{ width:31px;height:31px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 4px 10px -4px rgba(0,0,0,.4); }
.fg-header.v7 .fgb-brand b{ font-size:15px;font-weight:650;letter-spacing:.2px;text-shadow:0 1px 1px rgba(0,0,0,.15);white-space:nowrap; }
.fg-header.v7 .homebtn{ grid-area:home; justify-self:start; }
.fg-header.v7 .navwrap{ grid-area:nav; display:flex; flex-direction:column; gap:7px; width:100%; }
.fg-header.v7 .fgnav{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; width:100%; }
.fg-header.v7 .gbtn{ position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.62);color:#fff;font-weight:550;font-size:12px;padding:8px 14px;border-radius:13px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.035));box-shadow:0 12px 26px -10px rgba(0,0,0,.55),inset 0 1.6px 0 rgba(255,255,255,.92),inset 0 -11px 18px -12px rgba(0,0,0,.34);text-shadow:0 1px 2px rgba(0,0,0,.26);transition:transform .13s cubic-bezier(.2,.9,.25,1.5),background .16s,box-shadow .16s; }
.fg-header.v7 .fgnav .gbtn{ width:100%; }
.fg-header.v7 .gbtn::before{ content:"";position:absolute;left:5px;right:5px;top:2px;height:46%;border-radius:10px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.03));opacity:.85; }
.fg-header.v7 .gbtn:hover{ transform:translateY(-1.5px);background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.11)); }
.fg-header.v7 .gbtn:active{ transform:scale(.95); }
.fg-header.v7 .gbtn.on{ background:rgba(255,255,255,.97);color:#0b1220;font-weight:700;border-color:#fff; }
.fg-header.v7 .gbtn.on::before{ opacity:.3; }
.fg-header.v7 .gbtn.homebtn svg{ width:15px;height:15px; }
.fg-header.v7 .ctrl{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.fg-header.v7 .ctrlrow1{ grid-area:util1; justify-self:end; }
.fg-header.v7 .ctrlrow2{ grid-area:util2; justify-self:end; }
.fg-header.v7 .fgsearch{ display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:12px;cursor:text;color:#fff;white-space:nowrap;border:1px solid rgba(255,255,255,.5);background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.045));font-size:12px;width:230px; }
.fg-header.v7 .fgsearch kbd{ font-family:inherit;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:2px 6px;margin-left:auto; }
.fg-header.v7 .fgsearch .ph{ opacity:.85; overflow:hidden; text-overflow:ellipsis; }
.fg-header.v7 .fgsel{ border:1px solid rgba(255,255,255,.62);border-radius:12px;padding:8px 11px;font-weight:600;font-size:12px;color:#0b1220;cursor:pointer;font-family:inherit;background:linear-gradient(180deg,#fff,rgba(255,255,255,.9));max-width:170px; }
.fg-header.v7 .userchip{ display:flex;align-items:center;gap:7px;padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));cursor:pointer; }
.fg-header.v7 .userchip .ava{ width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.55); }
.fg-header.v7 .gbtn.ic{ padding:8px 10px;font-size:14px; }
.fg-header.v7 .fghgroup{ display:flex;align-items:center;gap:8px; }
.fg-header.v7 .fgclock{ display:flex;flex-direction:column;line-height:1.05;text-align:right;padding:0 2px; }
.fg-header.v7 .fgclock b{ font-size:13px;font-weight:800;font-variant-numeric:tabular-nums; }
.fg-header.v7 .fgclock span{ font-size:10px;opacity:.85;font-weight:600; }
.fg-header.v7 .seg{ position:relative;display:flex;border:1px solid rgba(255,255,255,.5);border-radius:12px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.07)); }
.fg-header.v7 .seg button{ background:transparent;border:0;color:#fff;font-weight:600;font-size:13px;padding:7px 10px;cursor:pointer;opacity:.92; }
.fg-header.v7 .seg button.on{ background:rgba(255,255,255,.96);color:#0b1220;opacity:1; }
.fg-header.v7 .fghd{ width:1px;height:22px;background:rgba(255,255,255,.28); }
.fg-header.v7 .ti{ margin-right:4px; }
.fg-header.v7 .fg-head-masc{ z-index:1; right:2px; height:56px; }

/* ============================================================
   Dashboard command-center header — 1-op-1 met de oude #fglp-top
   (logo · groet+klok · "FastGroup command center" · glasknoppen)
   ============================================================ */
.fg-cmdhead{ flex:0 0 auto; position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:nowrap;
  padding:16px 26px 18px; color:#eaf0f8;
  background:radial-gradient(120% 160% at 12% -40%,rgba(212,175,55,.16),transparent 46%),linear-gradient(180deg,#0d1017,#08090c);
  border-bottom:1px solid #1c2436; box-shadow:0 20px 50px -30px #000; }
/* Knoppenrij INLINE op gelijke hoogte van de titel (zoals vroeger); pas op smal scherm onder elkaar. */
@media(max-width:820px){ .fg-cmdhead{ flex-wrap:wrap; align-items:flex-start; } }
.fg-cmd-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.fg-cmd-logo{ height:56px; width:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.7)); animation:fgLogoPulse 3.2s ease-in-out infinite; transform-origin:left center; }
@keyframes fgLogoPulse{ 0%,100%{ filter:drop-shadow(0 8px 18px rgba(0,0,0,.7)) drop-shadow(0 0 0 rgba(245,166,35,0)); transform:scale(1); } 50%{ filter:drop-shadow(0 8px 20px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(245,166,35,.55)); transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce){ .fg-cmd-logo{ animation:none; } }
.fg-cmd-titles{ min-width:0; }
.fg-cmd-hi{ font-size:13px; color:#8ea0bd; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fg-cmd-clock{ font-variant-numeric:tabular-nums; font-weight:800; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:1px 8px; }
.fg-cmd-title{ font-size:26px; font-weight:900; letter-spacing:-1px; color:#fff; margin-top:2px; line-height:1.05; }
.fg-cmd-title span{ background:linear-gradient(120deg,#3a7fd5,#D4AF37 55%,var(--brand)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fg-cmd-glob{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.fg-gbtn{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#dfe7f2; border-radius:10px; padding:7px 13px; font-weight:800; font-size:12.5px; cursor:pointer; transition:background .12s,transform .12s; font-family:inherit; position:relative; }
.fg-gbtn:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }
.fg-gbtn.ic{ padding:7px 10px; font-size:15px; }
.fg-cmdhead .fg-badgewrap{ position:relative; display:inline-flex; }
.fg-cmdhead .fg-badge{ position:absolute; top:-5px; right:-5px; background:var(--danger); color:#fff; font-size:10px; font-weight:900; border-radius:999px; padding:0 5px; min-width:16px; text-align:center; }
.fg-ibadge{ background:var(--danger); color:#fff; font-size:10.5px; font-weight:900; border-radius:999px; padding:1px 6px; min-width:17px; text-align:center; }
.fg-langseg{ display:flex; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; overflow:hidden; }
.fg-langseg button{ background:transparent; border:0; color:#9fb0c9; font-weight:800; font-size:12px; padding:7px 11px; cursor:pointer; font-family:inherit; }
.fg-langseg button.on{ background:linear-gradient(120deg,#3a7fd5,#D4AF37 55%,var(--brand)); color:#fff; }
@media(max-width:1180px){ .fg-cmd-glob .fg-gbtn span{ display:none; } }

/* Interactief-knop in de v7-header = de project-mascotte die alles weet */
.fg-header.v7 .interbtn{ padding:5px 13px 5px 5px; gap:8px; font-weight:700; }
.fg-header.v7 .interbtn .interava{ width:24px; height:24px; border-radius:50%; object-fit:cover; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.62); }

/* meer/minder-chip op de status-buckets */
.fg-morechip{ font-weight:800; opacity:.92; }

/* ============================================================
   Interactief-dock — mascotte rechts, in de breedte versleepbaar.
   De content links herschikt mee via padding-right op de .fg-shell.
   ============================================================ */
.fgm-ava img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.fg-shell.fgm-docked{ padding-right:var(--fgm-dock,380px); }
.fgm-dock{ position:fixed; top:0; right:0; height:100vh; width:380px; z-index:1200; display:flex;
  background:var(--card); border-left:1px solid var(--line); box-shadow:-24px 0 60px -30px rgba(0,0,0,.5); }
.fgm-dock-inner{ display:flex; flex-direction:column; width:100%; min-width:0; }
.fgm-dock-resize{ position:absolute; left:-5px; top:0; width:11px; height:100%; cursor:ew-resize; z-index:3; }
.fgm-dock-resize::before{ content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%); width:3px; height:46px; border-radius:3px; background:var(--line); opacity:.7; }
.fgm-dock-resize:hover::before{ background:var(--brand); opacity:1; }
@media(max-width:720px){
  .fg-shell.fgm-docked{ padding-right:0; }
  .fgm-dock{ width:100vw !important; }
  .fgm-dock-resize{ display:none; }
}

/* "Vernieuw"-popup na een nieuwe deploy */
#fgUpd{ position:fixed; top:16px; right:16px; z-index:2147483000;
  display:flex; align-items:center; gap:12px; padding:11px 12px 11px 16px; border-radius:14px;
  background:linear-gradient(180deg,#13233f,#0d1830); color:#eaf0f8; border:1px solid #2a3d5e;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7); font:600 13.5px var(--font); animation:fgUpdIn .25s ease; }
@keyframes fgUpdIn{ from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:translateY(0)} }
.fgUpd-txt{ white-space:nowrap; }
.fgUpd-btn{ background:linear-gradient(120deg,#3a7fd5,var(--brand)); color:#fff; border:0; border-radius:10px;
  padding:8px 15px; font:800 13px var(--font); cursor:pointer; }
.fgUpd-btn:hover{ filter:brightness(1.08); }
.fgUpd-x{ background:transparent; border:0; color:#9fb0c9; font-size:14px; cursor:pointer; padding:4px 6px; }

/* Profielmenu onder de 👤-knop op de dashboard-header */
.fg-profmenu{ z-index:2147483001; min-width:180px; background:#111a2c; border:1px solid #2a3d5e; border-radius:12px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7); padding:6px; display:flex; flex-direction:column; gap:2px; }
.fg-profitem{ display:flex; align-items:center; gap:9px; background:transparent; border:0; color:#eaf0f8; text-align:left;
  font:700 13px var(--font); padding:9px 11px; border-radius:9px; cursor:pointer; }
.fg-profitem:hover{ background:rgba(255,255,255,.08); }

/* ============================================================
   Verenigde INBOX (Outlook-achtig): mappen + postbussen links{ padding:12px 20px; }
/* build 648 — het zoekveld van de mailbox stond op een vaste, bijna witte tekstkleur
   (#eaf0f8) met een lichte doorzichtige achtergrond. Zolang de inbox zichzelf altijd
   donker/licht forceerde viel dat niet op; nu de mailbox jouw thema volgt{ display:flex; align-items:center; gap:8px;
  background:color-mix(in srgb,var(--ink) 6%,transparent);
  border:1px solid var(--line-strong); border-radius:10px; padding:6px 11px; min-width:240px; }
.fg-btn.danger{ border-color:rgba(229,72,77,.5); color:var(--danger); }
.fg-btn.danger:hover{ background:rgba(229,72,77,.1); }

/* HTML-mail in een veilig{ width:100%; border:1px solid var(--line); border-radius:8px; background:#fff; min-height:140px; }

/* Mail → Dropbox opslaan-dialoog (met validatie) */
#fgFileOv{ position:fixed; inset:0; z-index:2147482400; background:rgba(6,10,18,.42); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; }
.fgfile-box{ width:min(520px,94vw); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.fgfile-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); cursor:move; }
.fgfile-body{ padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.fgfile-lbl{ font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:4px; }
.fgfile-row{ display:flex; gap:12px; }
.fgfile-row > div{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.fgfile-foot{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }

/* Self-check banner (ontbrekende onderdelen → herstel) */
#fgSelfCheck{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:2147483200; display:flex; align-items:center; gap:12px; padding:10px 12px 10px 15px; border-radius:12px; background:linear-gradient(180deg,#4a2b12,#3a2210); color:#ffe6cf; border:1px solid #6a4423; box-shadow:0 20px 50px -20px rgba(0,0,0,.6); font:600 13px var(--font); max-width:92vw; }
.fgsc-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:56vw; }
.fgsc-fix{ background:linear-gradient(120deg,var(--brand),var(--danger)); color:#fff; border:0; border-radius:9px; padding:7px 13px; font:800 12.5px var(--font); cursor:pointer; }
.fgsc-fix:disabled{ opacity:.6; }
.fgsc-x{ background:transparent; border:0; color:#e0b48c; font-size:14px; cursor:pointer; }

/* Adresboek */
#fgAddrOv{ position:fixed; inset:0; z-index:2147482350; background:rgba(6,10,18,.42); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; }
.fgaddr-box{ width:min(480px,94vw); height:min(560px,82vh); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.fgaddr-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border-bottom:1px solid var(--line); cursor:move; }
.fgaddr-search{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--line); }
.fgaddr-search input{ flex:1; border:0; background:transparent; outline:0; color:var(--ink); font:600 13px var(--font); }
.fgaddr-list{ flex:1; overflow-y:auto; padding:6px; }
.fgaddr-item{ width:100%; display:flex; align-items:center; gap:10px; background:transparent; border:0; text-align:left; padding:9px 11px; border-radius:9px; cursor:pointer; color:var(--ink); }
.fgaddr-item:hover{ background:rgba(0,0,0,.05); }
body.fg-dark .fgaddr-item:hover{ background:rgba(255,255,255,.06); }
.fgaddr-nm{ font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:45%; }
.fgaddr-em{ color:var(--muted); font-size:12px; margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgaddr-n{ color:var(--muted); font-size:11px; min-width:32px; text-align:right; }

/* In-app gids "Hoe werkt het" */
#fgHelpOv{ position:fixed; inset:0; z-index:2147482600; background:rgba(6,10,18,.42); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; }
.fghelp-box{ width:min(620px,94vw); height:min(640px,86vh); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.fghelp-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); cursor:move; }
.fghelp-body{ flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.fghelp-sec{ display:flex; gap:12px; align-items:flex-start; }
.fghelp-ic{ font-size:22px; flex:0 0 auto; width:34px; text-align:center; }
.fghelp-t{ font-weight:800; font-size:14px; margin-bottom:2px; }
.fghelp-x{ font-size:13px; color:var(--muted); line-height:1.5; }

/* Mailrijen strakker links uitgelijnd (afzender vast{ grid-template-columns:30px minmax(150px,220px) 1fr auto; }

/* Hulp-knop naast het zoekveld op het dashboard */
.fg-herosearch{ display:flex; align-items:center; gap:10px; }
.fg-help-btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:12px; padding:9px 14px; font:700 13px var(--font); cursor:pointer; }
.fg-help-btn:hover{ background:var(--hover,rgba(0,0,0,.05)); }
@media(max-width:720px){ .fg-help-btn span{ display:none; } }

/* Document-tekst uit de universele zoek */
#fgspDoc{ position:fixed; inset:0; z-index:2147483400; background:rgba(6,10,18,.42); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; }
.fgspdoc-box{ width:min(680px,94vw); height:min(620px,84vh); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.fgspdoc-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); cursor:move; }
.fgspdoc-body{ flex:1; overflow-y:auto; padding:16px; white-space:pre-wrap; word-break:break-word; font-size:13.5px; line-height:1.55; }

/* Dashboard: twee kolommen — links cijfers/wat-nu, rechts de merken (2×2) */
.fg-home2col{ display:grid; grid-template-columns:1.15fr 1fr; gap:22px; align-items:start; margin-top:8px; }
.fg-col-left, .fg-col-right{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.fg-col-right .fg-brandgrid{ grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:1000px){ .fg-home2col{ grid-template-columns:1fr; } }

/* Onderwerpen strak links: vaste{ grid-template-columns:30px 178px 1fr auto; gap:10px; }

/* Rij-fix: middenkolom mag krimpen → knoppen rechts blijven netjes{ grid-template-columns:30px 172px minmax(0,1fr) auto; }

/* ===== Compacte tekstmodus (per gebruiker) — kleiner over de hele software ===== */
body.fg-compact{ font-size:13px; }
body.fg-compact .fg-btn{ font-size:12px; padding:6px 10px; }
body.fg-compact .fg-gbtn{ font-size:12px; padding:6px 11px; }
body.fg-compact .fg-kpi .n{ font-size:19px; }
body.fg-compact .fg-kpi .l{ font-size:10.5px; }
body.fg-compact .fg-cmd-title{ font-size:22px; }
body.fg-compact .fg-header.v7 .gbtn{ font-size:11px; padding:6px 11px; }
body.fg-compact .fg-sech{ font-size:11px; }

/* Dynamische grootte-regelaar in het profielmenu */
.fg-profmenu{ min-width:236px; }
.fg-profscale{ display:flex; align-items:center; gap:6px; padding:7px 11px; }
.fg-profscale-lbl{ font:700 12px var(--font); color:#9fb0c9; margin-right:auto; }
.fg-profscale-btn{ background:rgba(255,255,255,.07); border:1px solid #2a3d5e; color:#eaf0f8; border-radius:8px; min-width:30px; height:28px; cursor:pointer; font:800 13px var(--font); display:inline-flex; align-items:center; justify-content:center; }
.fg-profscale-btn:hover{ background:rgba(255,255,255,.14); }
.fg-profscale-val{ font:800 12px var(--font); color:#eaf0f8; min-width:44px; text-align:center; }

/* ---- Zwevende Zoom-knop: op ELKE pagina, rechtsonder, onthouden per gebruiker ---- */
.fg-zoomdock{ position:fixed; right:14px; bottom:14px; z-index:900; display:flex; align-items:center; gap:5px;
  padding:5px 7px; background:var(--card); border:1px solid var(--line); border-radius:999px;
  box-shadow:0 6px 20px -8px rgba(6,10,18,.35); opacity:.62; transition:opacity .15s ease; }
.fg-zoomdock:hover{ opacity:1; }
.fg-zoomlens{ font-size:13px; padding:0 3px 0 4px; opacity:.8; }
.fg-zoomval{ font:800 12px var(--font); color:var(--ink); min-width:40px; text-align:center; }
.fg-zoombtn{ background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:50%;
  width:26px; height:26px; cursor:pointer; font:800 14px var(--font); line-height:1;
  display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background .1s ease, border-color .1s ease; }
.fg-zoombtn:hover{ background:color-mix(in srgb,var(--brand) 14%,transparent); border-color:color-mix(in srgb,var(--brand) 45%,transparent); }
.fg-zoombtn.rs{ font-size:13px; color:var(--muted); }
@media (max-width:640px){ .fg-zoomdock{ right:10px; bottom:10px; opacity:.9; } }

/* ---- Master Chat: per-lezer vertaal-schakelaar ---- */
.fggc-trtoggle{ margin-left:8px; background:transparent; border:0; padding:0; cursor:pointer;
  font:700 11px var(--font); color:color-mix(in srgb,var(--brand) 78%, var(--ink)); opacity:.85; }
.fggc-trtoggle:hover{ opacity:1; text-decoration:underline; }

/* ---- Design Studio: tool-hub (fase 5a) ---- */
.fg-st-hub{ max-width:760px; margin:18px auto 4px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 8px 26px -18px rgba(6,10,18,.35); }
.fg-st-hubhead{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; }
.fg-st-toolgroup{ margin:9px 0; }
.fg-st-toolgname{ font:800 11px var(--font); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.fg-st-toolrow{ display:flex; flex-wrap:wrap; gap:7px; }
.fg-st-toolbtn{ text-decoration:none; }
.fg-st-tooledit{ display:flex; align-items:center; gap:8px; width:100%; margin:3px 0; }
.fg-st-tooledit>span{ flex:0 0 150px; font:700 12.5px var(--font); }
.fg-st-tooledit .fg-input{ margin:0; flex:1 1 auto; font-size:12.5px; }

/* ============ DESIGN STUDIO — woosh-intro + knallende cockpit ============ */
.fg-st-intro{ position:fixed; inset:0; z-index:2147483000; overflow:hidden;
  background:radial-gradient(120% 130% at 50% 30%, #1a2233, #0a0e17 70%);
  display:flex; align-items:center; justify-content:center; }
.fg-st-intro.out{ animation:stiOut .45s ease forwards; }
@keyframes stiOut{ to{ opacity:0; transform:scale(1.06); } }
/* de lichtstreep die voorbij zwiept (de "woosh") */
.fg-sti-streak{ position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(90deg, transparent, rgba(255,138,30,.55), rgba(255,255,255,.8), rgba(47,109,246,.55), transparent);
  filter:blur(6px); transform:skewX(-18deg); left:-60%; animation:stiStreak 1.1s cubic-bezier(.7,0,.2,1) .05s 1; }
@keyframes stiStreak{ to{ left:130%; } }
.fg-sti-stage{ text-align:center; position:relative; }
.fg-sti-mascots{ display:flex; justify-content:center; gap:min(3.5vw,42px); margin-bottom:18px; }
.fg-sti-m{ width:min(20vw,140px); height:min(20vw,140px); object-fit:contain;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.5)); opacity:0;
  transform:translateY(40px) scale(.4) rotate(-8deg);
  animation:stiPop .62s cubic-bezier(.2,1.4,.35,1) forwards; animation-delay:calc(.25s + var(--i) * .13s); }
@keyframes stiPop{ 60%{ opacity:1; transform:translateY(-6px) scale(1.08) rotate(2deg); } 100%{ opacity:1; transform:translateY(0) scale(1) rotate(0); } }
.fg-sti-title{ font:900 clamp(30px,7vw,68px)/1 var(--font); letter-spacing:.03em; color:#fff;
  text-shadow:0 6px 30px rgba(255,138,30,.4); opacity:0; transform:scale(1.5); filter:blur(8px);
  animation:stiSlam .5s cubic-bezier(.2,.9,.2,1) .9s forwards; }
@keyframes stiSlam{ to{ opacity:1; transform:scale(1); filter:blur(0); } }
.fg-sti-tag{ margin-top:12px; font:800 clamp(15px,2.6vw,24px) var(--font); color:#ffb877;
  opacity:0; transform:translateY(14px); animation:stiUp .5s ease 1.25s forwards; }
@keyframes stiUp{ to{ opacity:1; transform:translateY(0); } }
.fg-sti-skip{ position:absolute; right:18px; bottom:16px; background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:7px 14px; cursor:pointer; font:700 12.5px var(--font); }
.fg-sti-skip:hover{ background:rgba(255,255,255,.2); }
/* de cockpit knalt in beeld */
.fg-st-pop{ animation:stPop .5s cubic-bezier(.2,1.15,.3,1); }
@keyframes stPop{ from{ opacity:0; transform:scale(.94) translateY(10px); } to{ opacity:1; transform:none; } }
.fg-st-pop .fg-st-task{ animation:stTile .5s cubic-bezier(.2,1.2,.3,1) both; }
.fg-st-pop .fg-st-task:nth-child(1){ animation-delay:.06s } .fg-st-pop .fg-st-task:nth-child(2){ animation-delay:.12s }
.fg-st-pop .fg-st-task:nth-child(3){ animation-delay:.18s } .fg-st-pop .fg-st-task:nth-child(4){ animation-delay:.24s }
.fg-st-pop .fg-st-task:nth-child(5){ animation-delay:.30s }
@keyframes stTile{ from{ opacity:0; transform:translateY(16px) scale(.96); } to{ opacity:1; transform:none; } }
/* merk-switcher met mascotte-gezicht i.p.v. bolletjes */
.fg-st-brandbtn{ width:38px; height:38px; padding:0; border-radius:50%; border:2px solid transparent;
  background:rgba(255,255,255,.06); cursor:pointer; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; transition:transform .12s ease, border-color .12s ease; }
.fg-st-brandbtn img{ width:100%; height:100%; object-fit:cover; }
.fg-st-brandbtn:hover{ transform:translateY(-2px) scale(1.06); }
.fg-st-brandbtn.on{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent); }
/* mascotte-hero op de cockpit-start */
.fg-st-herowrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.fg-st-hero{ width:min(22vw,120px); height:min(22vw,120px); object-fit:contain; filter:drop-shadow(0 12px 24px rgba(0,0,0,.35)); animation:stHero .6s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes stHero{ from{ opacity:0; transform:translateY(14px) scale(.8) } to{ opacity:1; transform:none } }

/* ---- Merk-mascottes i.p.v. bolletjes (header + snelwissel) ---- */
.fgb-logo-masc{ padding:0 !important; width:30px; height:30px; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); }
.fgb-logo-masc img{ width:100%; height:100%; object-fit:cover; }
.fg-mascpick{ padding:3px 5px !important; }
.fg-mascpick img{ width:20px; height:20px; border-radius:50%; object-fit:cover; vertical-align:middle; }

/* ---- Wisselende mascotte in de dashboard-header (levendig, niet saai) ---- */
.fg-cmd-mascot{ width:34px; height:34px; border-radius:50%; object-fit:cover; margin-left:2px; flex:0 0 auto;
  background:rgba(255,255,255,.1); box-shadow:0 4px 12px -4px rgba(0,0,0,.35); animation:cmdFloat 3.4s ease-in-out infinite; }
@keyframes cmdFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }

/* ============ DESIGN STUDIO — welkom-cockpit ============ */
.fg-st-home{ max-width:900px; margin:0 auto; padding:22px 18px 40px; }
.fg-st-welcome{ display:flex; align-items:center; gap:18px; justify-content:center; text-align:left; margin:6px 0 4px; }
.fg-st-welctitle{ font:900 clamp(22px,3.4vw,34px)/1.1 var(--font); letter-spacing:.01em; }
.fg-st-welcsub{ font:800 clamp(14px,2vw,18px) var(--font); color:#ff9a3c; margin-top:4px; }
.fg-st-hero{ width:min(20vw,104px); height:min(20vw,104px); object-fit:contain; filter:drop-shadow(0 12px 24px rgba(0,0,0,.32)); animation:stHero .6s cubic-bezier(.2,1.3,.3,1) both; }
.fg-st-hometitle{ text-align:center; font:800 17px var(--font); margin:20px 0 12px; }
.fg-st-hometitle span{ color:var(--muted); font-weight:700; }
/* social-pols */
.fg-st-pulse{ margin:16px auto 4px; max-width:760px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; box-shadow:0 8px 26px -18px rgba(6,10,18,.35); }
.fg-stp-lbl{ font:800 13px var(--font); margin-bottom:9px; }
.fg-stp-cards{ display:flex; flex-wrap:wrap; gap:10px; }
.fg-stp-card{ display:flex; align-items:center; gap:10px; flex:1 1 210px; min-width:190px; background:color-mix(in srgb,var(--brand) 5%, var(--card)); border:1px solid var(--line); border-radius:12px; padding:8px 11px; }
.fg-stp-card img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:rgba(255,255,255,.08); }
.fg-stp-nm{ font:800 13px var(--font); }
.fg-stp-chans{ display:flex; gap:12px; margin-top:2px; }
.fg-stp-chan{ font:700 13px var(--font); color:var(--ink); }
.fg-stp-chan b{ font-weight:900; }
.fg-stp-chan i{ font-style:normal; font-weight:800; font-size:11.5px; padding:1px 5px; border-radius:999px; }
.fg-stp-chan i.up{ color:#1a7f46; background:rgba(45,180,90,.14); }
.fg-stp-chan i.dn{ color:#c0492e; background:rgba(229,72,77,.12); }

/* ============ DESIGN STUDIO — startscherm (100% scherm, geen scroll) ============ */
.fg-main-fit{ overflow:hidden !important; }
/* header met shine */
.fg-sthead{ position:relative; overflow:hidden; }
.fg-sthead-shine{ position:absolute; top:0; bottom:0; width:38%; left:-50%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); transform:skewX(-18deg);
  animation:stHeadShine 6s ease-in-out 1.2s infinite; }
@keyframes stHeadShine{ 0%{ left:-50% } 22%{ left:130% } 100%{ left:130% } }
.fg-sttheme{ margin-right:6px; }
/* start-layout */
.fg-ststart{ height:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; padding:12px 16px 16px; }
.fg-ststart-head{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.fg-ststart-masc{ width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.3)); flex:0 0 auto; animation:stHero .55s cubic-bezier(.2,1.3,.3,1) both; }
.fg-ststart-title{ font:900 clamp(20px,2.6vw,30px)/1.05 var(--font); }
.fg-ststart-sub{ font:800 clamp(13px,1.5vw,16px) var(--font); color:var(--brandcol,var(--brand)); margin-top:2px; letter-spacing:.02em; }
.fg-ststart-tiles{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* de grote knallende tegels */
.fg-bigtile{ position:relative; overflow:hidden; border:0; cursor:pointer; text-align:left; color:#fff;
  border-radius:22px; padding:20px 22px; min-height:0; display:grid; grid-template-columns:1fr clamp(220px,44%,340px); gap:20px; align-items:stretch;
  background:var(--tgrad,#333); box-shadow:0 22px 50px -22px color-mix(in srgb,var(--tcol,#000) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .16s cubic-bezier(.2,1.1,.3,1), box-shadow .16s ease; }
.fg-bigtile:hover{ transform:translateY(-5px) scale(1.012); box-shadow:0 30px 60px -20px color-mix(in srgb,var(--tcol,#000) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.2); }
.fg-bigtile:active{ transform:translateY(-1px) scale(.998); }
.fg-bt-shine{ position:absolute; top:0; bottom:0; width:40%; left:-60%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transform:skewX(-18deg); }
.fg-bigtile:hover .fg-bt-shine{ animation:stTileShine .8s ease; }
@keyframes stTileShine{ to{ left:130% } }
.fg-bt-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.fg-bt-ic{ font-size:30px; filter:drop-shadow(0 3px 8px rgba(0,0,0,.3)); }
.fg-bt-masc{ width:74px; height:74px; object-fit:contain; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); margin-top:-4px; }
.fg-bt-name{ font:900 clamp(20px,2.4vw,28px)/1.05 var(--font); margin-top:6px; text-shadow:0 2px 12px rgba(0,0,0,.25); }
.fg-bt-desc{ font:700 13.5px var(--font); opacity:.9; margin-top:2px; }
.fg-bt-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.fg-bt-stat{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:4px 11px; font:800 13px var(--font); backdrop-filter:blur(3px); }
.fg-bt-stat b{ font-weight:900; }
.fg-bt-stat i{ font-style:normal; font-weight:800; font-size:11.5px; margin-left:3px; }
.fg-bt-stat i.up{ color:#c9ffd8 } .fg-bt-stat i.dn{ color:#ffd3cc }
.fg-bt-ex{ flex:1 1 auto; min-height:0; margin-top:14px; border-radius:14px; overflow:hidden; position:relative;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.fg-bt-ex img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fg-bt-ex.empty{ font:700 13px var(--font); opacity:.85; padding:14px; text-align:center; }
.fg-bt-exlbl{ position:absolute; left:10px; bottom:10px; z-index:1; background:rgba(0,0,0,.55); border-radius:999px; padding:5px 11px; font:800 12.5px var(--font); backdrop-filter:blur(3px); }
/* Verbeterde tegel: grote top post/reel + datum + aantal + afspeelbare reel */
.fg-bt-ex2{ flex:1 1 auto; min-height:0; margin-top:14px; border-radius:14px; overflow:hidden; position:relative; background:rgba(0,0,0,.28); }
.fg-bt-exthumb{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.fg-bt-exthumb img{ width:100%; height:100%; object-fit:cover; }
.fg-bt-exthumb.noimg::before{ content:attr(data-ph); font-size:44px; opacity:.5; }
.fg-bt-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; text-decoration:none; z-index:2; transition:transform .12s, background .12s; box-shadow:0 6px 18px -6px rgba(0,0,0,.6); }
.fg-bt-play:hover{ transform:translate(-50%,-50%) scale(1.12); background:rgba(0,0,0,.78); }
.fg-bt-exmeta{ position:absolute; left:10px; right:10px; bottom:10px; z-index:1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); border-radius:999px; padding:6px 13px; color:#fff; }
.fg-bt-extop{ font-weight:800; font-size:12.5px; }
.fg-bt-exval{ font-weight:800; font-size:12.5px; }
.fg-bt-exdate{ font-weight:600; font-size:11.5px; opacity:.85; margin-left:auto; }
.fg-bt-start{ align-self:flex-start; margin-top:14px; background:#fff; color:#141414; font:900 15px var(--font);
  border-radius:999px; padding:11px 22px; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); transition:transform .12s ease, gap .12s; }
.fg-bigtile:hover .fg-bt-start{ transform:translateX(3px); }
/* 2-koloms tegel: tekst links, NETTE VIERKANTE preview rechts */
.fg-bt-main{ display:flex; flex-direction:column; min-width:0; }
.fg-bt-main .fg-bt-start{ margin-top:auto; }
.fg-bt-side{ display:flex; align-items:center; justify-content:center; min-width:0; }
.fg-bt-side .fg-bt-ex2, .fg-bt-side .fg-bt-ex{ width:100%; aspect-ratio:1 / 1; margin-top:0; flex:none; min-height:0; }
@media (max-width:640px){ .fg-bigtile{ grid-template-columns:1fr; } .fg-bt-side{ max-width:340px; margin-top:8px; } }
/* Reel speelt af in een pop-up in de app (geen nieuw tabblad) */
.fg-reelov{ position:fixed; inset:0; z-index:2147483400; background:rgba(4,7,12,.82); backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px; }
.fg-reelbox{ position:relative; width:min(420px,94vw); background:#0b0f16; border:1px solid #253044; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.fg-reelbox iframe{ display:block; width:100%; aspect-ratio:9/16; border:0; background:#000; }
.fg-reelbox .fg-reelx{ position:absolute; top:10px; right:10px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:18px; cursor:pointer; }
.fg-reelbox .fg-reelfall{ display:block; text-align:center; padding:12px; color:#9ab0e6; font:600 13px var(--font); text-decoration:none; }
@media (max-width:820px){ .fg-main-fit{ overflow:auto !important; } .fg-ststart-tiles{ grid-template-columns:1fr; } }
/* tools-popup (hamburger) */
.fg-sttools-ov{ position:fixed; inset:0; z-index:2147482600; background:rgba(6,10,18,.45); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
.fg-sttools-box{ position:relative; width:min(620px,94vw); max-height:82vh; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
.fg-sttools-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); cursor:move; }
.fg-sttools-body{ padding:12px 14px; overflow:auto; }
.fg-sttools-body .fg-st-hub{ margin:0; border:0; box-shadow:none; padding:0; background:transparent; }

/* ============================================================
   VOLLEDIGE LEVERANCIERSFICHE (fg-fiche v0.3) — 7 tabs, autosave, meter
   ============================================================ */
.fgf2-ov{ position:fixed; inset:0; z-index:2147482000; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; }
.fgf2-load{ padding:48px; text-align:center; }
.fgf2-box{ width:min(1080px,97vw); height:min(690px,93vh); display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }

/* header */
.fgf2-head{ display:flex; align-items:center; gap:13px; padding:12px 16px; border-bottom:1px solid var(--line); cursor:move; flex:none; }
.fgf2-ava{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; color:var(--on-brand); background:linear-gradient(135deg,var(--brand),var(--brand-strong)); flex:none; }
.fgf2-hl{ flex:1; min-width:0; }
.fgf2-name{ font-weight:800; font-size:17px; max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:middle; }
.fgf2-pill{ display:inline-block; margin-left:8px; font-size:11px; padding:2px 9px; border-radius:99px; background:color-mix(in srgb,var(--muted) 18%,transparent); color:var(--muted); vertical-align:middle; }
.fgf2-meta{ font-size:12px; color:var(--muted); margin-top:3px; }
.fgf2-act{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.fgf2-apill{ font-size:10.5px; padding:2px 7px; border-radius:6px; background:color-mix(in srgb,var(--ok) 15%,transparent); }
.fgf2-hr{ display:flex; align-items:center; gap:8px; flex:none; }
.fgf2-nav{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.fgf2-navb{ width:26px; height:26px; border-radius:8px; border:1px solid var(--line); background:transparent; color:inherit; cursor:pointer; }
.fgf2-navb:disabled{ opacity:.35; cursor:default; }
.fgf2-save{ font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.fgf2-save .dot{ width:8px; height:8px; border-radius:99px; background:var(--muted); }
.fgf2-save .dot.ok{ background:var(--ok); }
.fgf2-save .dot.busy{ background:var(--warn); }
.fgf2-save .dot.err{ background:var(--danger); }

/* knoppen */
.fgf2-btn{ border:1px solid var(--line); background:transparent; color:inherit; border-radius:10px; padding:8px 13px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.fgf2-btn:hover{ border-color:var(--brand); }
.fgf2-btn.brand{ background:linear-gradient(135deg,var(--brand),var(--brand-strong)); color:var(--on-brand); border:0; }
.fgf2-btn.ghost{ padding:8px 11px; }
.fgf2-btn.soft{ background:color-mix(in srgb,var(--muted) 12%,transparent); }
.fgf2-btn.soft.danger{ color:var(--danger); }
.fgf2-btn.wide{ width:100%; }

/* body-grid */
.fgf2-body{ display:grid; grid-template-columns:200px 1fr 250px; flex:1; min-height:0; }
.fgf2-side{ border-right:1px solid var(--line); padding:12px; display:flex; flex-direction:column; gap:3px; overflow:auto; }
.fgf2-panels{ padding:20px 22px; overflow:auto; }
.fgf2-rail{ border-left:1px solid var(--line); padding:14px; overflow:auto; display:flex; flex-direction:column; gap:14px; }

/* tabs */
.fgf2-tab{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 10px; border-radius:10px; border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; font-size:13.5px; }
.fgf2-tab:hover{ background:color-mix(in srgb,var(--brand) 8%,transparent); }
.fgf2-tab.on{ background:color-mix(in srgb,var(--brand) 16%,transparent); font-weight:700; }
.fgf2-tico{ width:20px; text-align:center; }
.fgf2-tick{ margin-left:auto; opacity:0; color:var(--ok); font-weight:900; }
.fgf2-tick.on{ opacity:1; }

/* meter */
.fgf2-meter{ margin-top:auto; padding-top:14px; }
.fgf2-mtop{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; }
.fgf2-bar{ height:8px; border-radius:99px; background:color-mix(in srgb,var(--muted) 25%,transparent); overflow:hidden; }
.fgf2-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--brand-strong)); transition:width .3s; }
.fgf2-miss{ font-size:11.5px; color:var(--muted); margin-top:7px; line-height:1.4; }
.fgf2-miss .bad{ color:var(--danger); font-weight:700; }
.fgf2-miss .ok{ color:var(--ok); font-weight:700; }

/* panelen + velden */
.fgf2-panel{ display:none; }
.fgf2-panel.on{ display:block; }
.fgf2-ph{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.fgf2-fld{ display:block; margin-bottom:14px; }
.fgf2-lbl{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.fgf2-in{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:color-mix(in srgb,var(--muted) 8%,var(--card)); color:inherit; font:inherit; font-size:14px; }
.fgf2-in:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent); }
.fgf2-in.ro{ opacity:.7; cursor:default; }
.fgf2-in.attn{ border-color:color-mix(in srgb,var(--brand) 55%,transparent); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 14%,transparent); }
textarea.fgf2-in{ resize:vertical; min-height:70px; }
.fgf2-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.fgf2-row2{ display:flex; gap:8px; }
.fgf2-row2 .fgf2-in{ flex:1; }
.fgf2-mini{ width:40px; flex:none; border:1px solid var(--line); border-radius:10px; background:transparent; color:inherit; cursor:pointer; font-weight:800; }
.fgf2-mini:hover{ border-color:var(--brand); }
.fgf2-person{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:8px; margin-bottom:8px; }

/* rail */
.fgf2-tip{ background:color-mix(in srgb,var(--brand) 10%,var(--card)); border:1px solid color-mix(in srgb,var(--brand) 30%,transparent); border-radius:14px; padding:13px; }
.fgf2-tiph{ font-weight:800; margin-bottom:6px; }
.fgf2-tip p{ font-size:12px; color:var(--muted); margin:0 0 10px; line-height:1.45; }
.fgf2-beheer{ display:flex; flex-direction:column; gap:8px; }
.fgf2-bh{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.fgf2-fh{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.fgf2-fstep{ display:flex; align-items:center; gap:8px; font-size:12.5px; padding:4px 0; color:var(--muted); }
.fgf2-fstep.done{ color:inherit; }
.fgf2-fstep.now{ color:var(--brand-ink); font-weight:700; }

/* foot + logs */
.fgf2-foot{ padding:9px 16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); flex:none; }
.fgf2-logs{ display:flex; flex-direction:column; gap:2px; }
.fgf2-log{ display:grid; grid-template-columns:130px 1fr auto; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.fgf2-lt{ font-weight:700; }
.fgf2-ld{ color:var(--muted); }
.fgf2-lm{ color:var(--muted); font-size:11px; white-space:nowrap; }

/* verrijk-popup */
.fgenr-box{ width:min(560px,96vw); max-height:86vh; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
.fgenr-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); cursor:move; }
.fgenr-body{ padding:16px; overflow:auto; }
.fgenr-cbe{ font-size:13px; margin-bottom:10px; }
.fgenr-flags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.fgenr-flag{ font-size:11px; padding:3px 8px; border-radius:7px; background:color-mix(in srgb,var(--brand) 14%,transparent); }
.fgenr-find{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.fgenr-fmeta{ min-width:130px; font-size:12px; }
.fgenr-fval{ flex:1; font-size:13px; word-break:break-word; }

/* responsive */
@media (max-width:1040px){ .fgf2-rail{ display:none; } .fgf2-body{ grid-template-columns:180px 1fr; } .fgf2-name{ max-width:100%; } }
@media (max-width:720px){ .fgf2-side{ display:none; } .fgf2-body{ grid-template-columns:1fr; } .fgf2-grid2{ grid-template-columns:1fr; } .fgf2-person{ grid-template-columns:1fr; } }

/* slimme extra's: identiteits-banner, naam-suggestie, extra-rijen */
.fgf2-bnr{ font-size:12.5px; font-weight:700; padding:8px 11px; border-radius:10px; margin-bottom:12px; }
.fgf2-bnr.ok{ background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 35%,transparent); }
.fgf2-bnr.warn{ background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 38%,transparent); }
.fgf2-sug{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; margin:-6px 0 14px; padding:8px 11px; border-radius:10px; background:color-mix(in srgb,var(--brand) 9%,transparent); border:1px dashed color-mix(in srgb,var(--brand) 35%,transparent); }
.fgf2-rows{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.fgf2-exrow{ display:flex; gap:6px; }
.fgf2-exrow .fgf2-in{ flex:1; }
.fgf2-exdel{ width:38px; flex:none; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; }
.fgf2-exdel:hover{ border-color:var(--danger); color:var(--danger); }
.fgf2-addrow{ border:1px dashed var(--line); background:transparent; color:var(--muted); border-radius:9px; padding:6px 10px; font:inherit; font-size:12px; cursor:pointer; }
.fgf2-addrow:hover{ border-color:var(--brand); color:var(--brand-ink); }

/* ============================================================
   COCKPIT — data-controle (groen/oranje/rood) in het kantoor
   ============================================================ */
.fgck-ov{ position:fixed; inset:0; z-index:2147482000; background:rgba(6,10,18,.5); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; }
.fgck-box{ width:min(1640px,98vw); max-height:96vh; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
/* Volle breedte, onderverdeeld in 2 kolommen */
.fgck-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.fgck-colL{ border-right:1px solid var(--line); padding-right:20px; }
.fgck-colh{ font-size:13px; font-weight:800; margin:0 0 10px; }
@media (max-width:900px){ .fgck-cols{ grid-template-columns:1fr; } .fgck-colL{ border-right:0; padding-right:0; padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:8px; } }
.fgck-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); cursor:move; flex:none; }
.fgck-title{ font-size:16px; } .fgck-when{ font-size:12px; font-weight:400; }
.fgck-actions{ display:flex; gap:8px; }
.fgck-body{ padding:16px; overflow:auto; }
.fgck-load{ padding:40px; text-align:center; }
.fgck-foot{ padding:9px 16px; border-top:1px solid var(--line); font-size:11.5px; flex:none; }

.fgck-banner{ display:flex; align-items:center; gap:12px; border-radius:14px; padding:13px 16px; margin-bottom:16px; border:1px solid var(--line); }
.fgck-banner.green{ background:color-mix(in srgb,var(--ok) 12%,transparent); border-color:color-mix(in srgb,var(--ok) 40%,transparent); }
.fgck-banner.orange{ background:color-mix(in srgb,var(--warn) 12%,transparent); border-color:color-mix(in srgb,var(--warn) 40%,transparent); }
.fgck-banner.red{ background:color-mix(in srgb,var(--danger) 12%,transparent); border-color:color-mix(in srgb,var(--danger) 40%,transparent); }
.fgck-bbig{ font-size:16px; font-weight:800; }
.fgck-banner.green .fgck-bbig{ color:var(--ok); } .fgck-banner.orange .fgck-bbig{ color:var(--warn); } .fgck-banner.red .fgck-bbig{ color:var(--danger); }
.fgck-btxt{ font-size:13px; color:var(--muted); }

.fgck-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:10px; }
.fgck-card{ position:relative; background:color-mix(in srgb,var(--muted) 6%,var(--card)); border:1px solid var(--line); border-radius:12px; padding:11px 12px 10px; overflow:hidden; }
.fgck-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--muted); }
.fgck-card.green::before{ background:var(--ok); } .fgck-card.orange::before{ background:var(--warn); } .fgck-card.red::before{ background:var(--danger); } .fgck-card.info::before{ background:var(--brand); }
.fgck-dot{ width:11px; height:11px; border-radius:99px; display:inline-block; margin-right:7px; vertical-align:middle; background:var(--muted); }
.fgck-card.green .fgck-dot{ background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent); }
.fgck-card.orange .fgck-dot{ background:var(--warn); box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 18%,transparent); }
.fgck-card.red .fgck-dot{ background:var(--danger); box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 18%,transparent); }
.fgck-card.info .fgck-dot{ background:var(--brand); }
.fgck-lbl{ font-size:12.5px; color:var(--muted); font-weight:600; vertical-align:middle; }
.fgck-num{ font-size:20px; font-weight:800; margin:6px 0 2px; letter-spacing:-.5px; }
.fgck-card.green .fgck-num{ color:var(--ok); } .fgck-card.orange .fgck-num{ color:var(--warn); } .fgck-card.red .fgck-num{ color:var(--danger); }
.fgck-note{ font-size:12px; color:var(--muted); }
.fgck-state{ float:right; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:99px; background:color-mix(in srgb,var(--muted) 16%,transparent); color:var(--muted); }
.fgck-card.green .fgck-state{ background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok); }
.fgck-card.orange .fgck-state{ background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn); }
.fgck-card.red .fgck-state{ background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger); }
.fgck-pbar{ height:7px; border-radius:99px; background:color-mix(in srgb,var(--muted) 25%,transparent); overflow:hidden; margin:8px 0 4px; }
.fgck-pbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--brand-strong)); transition:width .4s; }
.fgck-card.green .fgck-pbar i{ background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 60%,var(--brand))); }

/* ============================================================
   DROPBOX — werkbalk, slepen&neerzetten, bestandsacties, lijstweergave
   ============================================================ */
.fg-dbxbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 12px; }
.fg-dbxsearch{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:10px; padding:5px 10px; font-size:13px; }
.fg-dbxsearch input{ border:0; background:transparent; color:inherit; font:inherit; outline:none; width:150px; }
.fg-dbxdrag{ outline:2px dashed var(--brand); outline-offset:-8px; background:color-mix(in srgb,var(--brand) 6%,transparent); border-radius:12px; }
.fg-file{ position:relative; }
.fg-file-actions{ position:absolute; top:6px; right:6px; display:flex; gap:3px; opacity:0; transition:opacity .15s; }
.fg-file:hover .fg-file-actions{ opacity:1; }
.fg-file-actions button{ width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:color-mix(in srgb,var(--card) 82%, transparent); backdrop-filter:blur(4px); color:inherit; cursor:pointer; font-size:12px; line-height:1; padding:0; }
.fg-file-actions button:hover{ border-color:var(--brand); }
.fg-filegrid.list{ display:flex; flex-direction:column; gap:4px; }
/* BUILD 640 — HIER ZAT DE FOUT waardoor de lijstweergave onleesbaar was.
   Deze regel stond op drie kolommen (38px 1fr auto), maar sinds build 632 heeft elke
   rij VIJF kinderen: het vinkje, het voorbeeldje, de naam, de gegevens en de knoppen.
   Twee kinderen te veel → het rooster liep door op een tweede en derde regel, waardoor
   elk document een blok van 130 pixels hoog werd met de naam rechts en de datum in
   drie stukken links. Vijf kolommen dus, en de rij past weer op één lijn. */
.fg-file.row{ display:grid; grid-template-columns:auto 34px minmax(0,1fr) auto auto;
  align-items:center; gap:10px; text-align:left; padding:6px 10px; min-height:44px; }
.fg-file.row:hover{ transform:none; }
.fg-file.row .fg-file-th{ width:34px; height:34px; flex:none; }
.fg-file.row .fg-file-th .ph{ font-size:18px; }
.fg-file.row .fg-file-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.fg-file.row .fg-file-meta{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.fg-file.row .fg-file-actions{ position:static; opacity:1; }
.fg-file.row .fg-file-kies{ position:static; opacity:1; }

/* BUILD 640 — SNEL DIAGONAAL LEZEN. Patrick: "kan daar ergens een thumbnail staan met de
   bullit points dat zonder te hoeven klikken kan oplichten en dat ik snel diagonaal kan
   doorlezen?" Blijf met de muis op een regel staan en er klapt een kaartje open met de
   koppen en de eerste opsommingstekens uit het document — zonder klikken, zonder AI:
   de eerste 4 kB van het bestand zelf, dus gratis en meteen. Bij een beeld of een video
   toont hetzelfde kaartje een groot voorbeeld. */
.fg-vk{ position:fixed; z-index:2147482470; width:340px; max-height:60vh; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:12px 14px; font-size:12.5px; line-height:1.55; pointer-events:none;
  opacity:0; transform:translateY(4px); transition:opacity .14s, transform .14s; }
.fg-vk.aan{ opacity:1; transform:translateY(0); }
.fg-vk h5{ margin:0 0 6px; font-size:13px; font-weight:800; line-height:1.35; }
.fg-vk .vk-meta{ color:var(--muted); font-size:11px; margin:0 0 8px; }
.fg-vk .vk-kop{ font-weight:700; margin:7px 0 2px; }
.fg-vk .vk-bul{ color:var(--muted); padding-left:14px; position:relative; }
.fg-vk .vk-bul:before{ content:'·'; position:absolute; left:5px; }
.fg-vk img{ width:100%; border-radius:8px; display:block; }
.fg-vk .vk-leeg{ color:var(--muted); font-style:italic; }

/* MD-watcher popup (enkel Patrick) — GROOT en GECENTREERD met achtergrond */
#fgMdPopHost{ position:fixed; inset:0; z-index:2147483647; background:rgba(6,10,18,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:16px; }
.fg-mdpop{ width:min(540px,94vw); background:var(--card); border:1px solid var(--line); border-top:5px solid var(--brand); border-radius:16px; box-shadow:0 30px 90px -20px rgba(0,0,0,.75); overflow:hidden; animation:fgmdIn .28s cubic-bezier(.2,.8,.25,1.15); }
@keyframes fgmdIn{ from{ opacity:0; transform:translateY(18px) scale(.95); } to{ opacity:1; transform:none; } }
.fg-mdpop-sub{ padding:2px 18px 6px; font-size:12.5px; color:var(--muted); }
.fg-mdpop-foot{ display:flex; justify-content:flex-end; padding:12px 18px 14px; border-top:1px solid var(--line); }
.fg-mdpop-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 18px 8px; font-size:17px; }
.fg-mdpop-x{ border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:15px; }
.fg-mdpop-body{ padding:6px 18px 12px; max-height:52vh; overflow:auto; }
.fg-mdpop-row{ display:flex; flex-direction:column; padding:5px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent); }
.fg-mdpop-row:last-child{ border-bottom:0; }
.fg-mdpop-name{ font-weight:700; font-size:13px; }
.fg-mdpop-meta{ font-size:11.5px; color:var(--muted); }
.fg-mdpop-more{ font-size:11.5px; color:var(--muted); padding-top:6px; }

/* ---- Module-bibliotheek: volledig scherm met klikbare tegels (zoals de Kast) ---- */
.fgmod-ov{ position:fixed; inset:0; z-index:2147483000; background:var(--bg); display:flex; flex-direction:column; animation:fgpoIn .18s ease; }
.fgmod-bar{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--card); }
.fgmod-title{ font-size:15px; display:flex; align-items:center; gap:8px; }
.fgmod-cnt{ font-size:11.5px; font-weight:700; color:var(--muted); background:color-mix(in srgb,var(--brand) 12%, transparent); padding:2px 10px; border-radius:20px; }
.fgmod-legend{ font-size:11.5px; color:var(--muted); }
.fgmod-body{ flex:1; overflow:auto; padding:18px; }
.fgmod-grp{ margin-bottom:20px; }
.fgmod-grh{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin:6px 2px 12px; display:flex; align-items:center; gap:8px; }
.fgmod-grhic{ width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; box-shadow:0 4px 10px -4px rgba(0,0,0,.5); }
.fgmod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:12px; }
.fgmod-tile{ position:relative; text-align:left; display:flex; flex-direction:column; gap:5px; padding:14px 14px 12px 62px; border-radius:14px; border:1px solid var(--line); border-left:4px solid var(--gc,var(--muted)); background:linear-gradient(135deg, color-mix(in srgb,var(--gc,var(--muted)) 8%, var(--card)), var(--card) 60%); color:var(--ink); cursor:pointer; transition:transform .12s, box-shadow .12s; overflow:hidden; }
.fgmod-tile:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -16px color-mix(in srgb,var(--gc,#000) 45%, rgba(0,0,0,.5)); }
.fgmod-fundament{ border-left-style:dashed; }
.fgmod-tic{ position:absolute; top:12px; left:12px; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:0 6px 14px -6px rgba(0,0,0,.55); }
.fgmod-tdot{ position:absolute; top:12px; right:12px; font-size:12px; }
.fgmod-tname{ font-size:14px; font-weight:800; padding-right:20px; }
.fgmod-twat{ font-size:12px; color:var(--ink); opacity:.82; line-height:1.4; }
.fgmod-twaar{ font-size:11px; color:var(--muted); margin-top:2px; }

/* Niveau 1: grote kleurrijke categorie-tegels (past op één scherm, geen scroll) */
.fgmod-catgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.fgmod-cat{ position:relative; text-align:left; display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:18px; border:1px solid var(--line); background:linear-gradient(135deg, color-mix(in srgb,var(--gc) 18%, var(--card)), var(--card) 72%); color:var(--ink); cursor:pointer; overflow:hidden; transition:transform .14s, box-shadow .14s; min-height:132px; }
.fgmod-cat::after{ content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:var(--gc); opacity:.12; }
.fgmod-cat:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -18px color-mix(in srgb,var(--gc) 55%, rgba(0,0,0,.5)); }
.fgmod-catic{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:27px; box-shadow:0 8px 20px -8px rgba(0,0,0,.55); position:relative; z-index:1; }
.fgmod-catname{ font-size:17px; font-weight:800; position:relative; z-index:1; }
.fgmod-catcount{ font-size:12.5px; color:var(--muted); position:relative; z-index:1; }

/* ---- Fotoregister-mappen opkuisen (storage-verhuis) ---- */
.fgsfx-count{ font-size:14px; margin-bottom:10px; }
.fgsfx-list{ max-height:40vh; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:8px; background:var(--bg); margin-bottom:10px; }
.fgsfx-row{ font-size:11.5px; font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--ink); padding:4px 6px; border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fgsfx-row:last-child{ border-bottom:0; }

/* ---- Beeldherkenner (Loop 1) : popup-variant, controle-paneel, badge ---- */
.fg-vpop.is-rood{ border-left-color:var(--danger); }
.fg-vpop.is-oranje{ border-left-color:#f5a623; }
.fg-vpop-act{ padding-top:8px; }
.fg-vov{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.42); display:flex; align-items:center; justify-content:center; padding:20px; }
/* Module-drilldown moet BOVEN de fullscreen launcher (.fgmod-ov z-index:2147483000) komen */
#fgModCatOv{ z-index:2147483100; background:rgba(6,10,18,.62); backdrop-filter:blur(4px); }

/* ---- AI & API-verbruik (fg-usage) ---- */
.fgus-ov{ position:fixed; inset:0; z-index:2147482500; background:rgba(6,10,18,.55); backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; }
.fgus-box{ width:min(1080px,97vw); max-height:90vh; display:flex; flex-direction:column; background:linear-gradient(160deg,#141a26,#0f1420); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 70px -24px rgba(0,0,0,.7); overflow:hidden; }
.fgus-head{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); cursor:move; }
.fgus-title{ font-size:15px; } .fgus-title b{ font-weight:800; }
.fgus-actions{ margin-left:auto; display:flex; gap:7px; }
.fgus-body{ overflow:auto; padding:16px; }
.fgus-foot{ padding:9px 16px; border-top:1px solid var(--line); font-size:11.5px; }
.fgus-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
@media(max-width:760px){ .fgus-kpis{ grid-template-columns:1fr 1fr; } }
.fgus-kpi{ background:linear-gradient(160deg,#182031,#10151f); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.fgus-kpi .l{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.fgus-kpi .v{ font-size:23px; font-weight:900; margin-top:5px; } .fgus-kpi .v small{ font-size:12px; color:var(--muted); font-weight:700; }
.fgus-kpi .v.money{ color:var(--brand-ink); } .fgus-kpi .f{ font-size:11px; color:var(--muted); margin-top:3px; }
.fgus-kpi.good{ border-color:#1f6b40; } .fgus-kpi.good .v{ color:var(--ok); }
.fgus-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:820px){ .fgus-two{ grid-template-columns:1fr; } }
.fgus-panel{ background:rgba(15,20,32,.6); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:14px; }
.fgus-panel h3{ margin:0 0 12px; font-size:14px; font-weight:800; } .fgus-panel h3 small{ color:var(--muted); font-weight:600; font-size:12px; }
.fgus-chart{ display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:16px; }
.fgus-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.fgus-bar{ width:100%; max-width:46px; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#ffb15e,#e06a00); position:relative; box-shadow:0 5px 14px -6px rgba(255,138,30,.6); }
.fgus-bar.hot{ background:linear-gradient(180deg,#ff7a7a,#d1242b); box-shadow:0 5px 16px -5px rgba(229,72,77,.7); }
.fgus-bar .tip{ position:absolute; top:-19px; left:50%; transform:translateX(-50%); font-size:10.5px; font-weight:800; white-space:nowrap; }
.fgus-col .d{ font-size:10.5px; color:var(--muted); font-weight:600; }
.fgus-fn{ display:flex; align-items:center; gap:11px; margin-bottom:9px; }
.fgus-fn .nm{ width:130px; flex:0 0 auto; font-size:12.5px; font-weight:700; } .fgus-fn .nm small{ display:block; color:var(--muted); font-weight:500; font-size:10.5px; }
.fgus-fn .trk{ flex:1; height:20px; background:#0b0f18; border-radius:7px; overflow:hidden; border:1px solid var(--line); }
.fgus-fn .fil{ height:100%; border-radius:7px 4px 4px 7px; background:linear-gradient(90deg,#c25e00,#ff9a3c); display:flex; align-items:center; justify-content:flex-end; padding-right:7px; font-size:10.5px; font-weight:800; color:#fff; min-width:30px; }
.fgus-fn.top .fil{ background:linear-gradient(90deg,#a81f24,#ff6a6f); }
.fgus-fn .fil.green{ background:linear-gradient(90deg,#1c6e42,var(--ok)); }
.fgus-fn .amt{ width:78px; flex:0 0 auto; text-align:right; font-weight:800; font-size:12.5px; }
/* BUILD 640 — de kostenrekening: een regel die aandacht vraagt (geen merk meegegeven,
   of een model zonder gekend tarief) krijgt een oranje rand in plaats van stilletjes
   mee te tellen. En een eerlijke waarschuwing bovenaan als de logging gaten heeft. */
.fgus-fn.waarschuwing .nm{ color:#b45309; }
.fgus-fn.waarschuwing{ border-left:3px solid #f59e0b; padding-left:8px; border-radius:3px; }
.fgus-let{ margin:10px 0 2px; padding:9px 12px; border-radius:9px; font-size:12px; line-height:1.5;
  background:color-mix(in srgb,#f59e0b 12%,transparent); border:1px solid color-mix(in srgb,#f59e0b 40%,transparent); }
.fgus-pill{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; }
.fgus-pill.paid{ background:rgba(245,166,35,.16); color:#ffcb6b; border:1px solid rgba(245,166,35,.4); }
.fgus-pill.free{ background:rgba(57,176,106,.16); color:#7ce0a3; border:1px solid rgba(57,176,106,.4); }
.fgus-note{ font-size:12px; line-height:1.5; margin-top:8px; padding:10px 12px; border-radius:10px; }
.fgus-note.ok{ background:rgba(57,176,106,.1); border:1px solid rgba(57,176,106,.35); color:#a7e6c1; }
.fg-vbox{ width:min(680px,96vw); max-height:86vh; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px -20px rgba(0,0,0,.6); overflow:hidden; }
.fg-vhead{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); font-size:14px; }
.fg-vbody{ overflow:auto; padding:6px 10px 12px; }
.fg-vrow{ display:flex; gap:11px; padding:10px 6px; border-bottom:1px solid var(--line); }
.fg-vrow:last-child{ border-bottom:0; }
.fg-vthumb{ width:64px; height:64px; flex:0 0 auto; border-radius:9px; overflow:hidden; background:color-mix(in srgb,var(--brand) 8%, var(--card)); display:flex; align-items:center; justify-content:center; font-size:22px; }
.fg-vthumb img{ width:100%; height:100%; object-fit:cover; }
.fg-vinfo{ flex:1; min-width:0; }
.fg-vtitle{ font-weight:700; font-size:13.5px; }
.fg-vreden{ font-size:12.5px; color:var(--muted); margin:3px 0 5px; }
.fg-vname{ font-size:12px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fg-vname code{ background:color-mix(in srgb,var(--brand) 10%, var(--card)); padding:2px 6px; border-radius:6px; font-size:11.5px; }
.fg-vtag{ font-size:10.5px; background:color-mix(in srgb,var(--brand) 16%, var(--card)); padding:1px 6px; border-radius:999px; }
.fg-vbadge{ display:inline-flex; align-items:center; font-size:11px; line-height:1; }
.fg-vbadge-rood{ filter:none; }

/* ---- Update: bevestiging bij het laden (naast de #fgUpd nu/later-popup) ---- */
#fgUpdOk{ position:fixed; top:16px; right:16px; z-index:2147483000; display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:12px; background:#123a1e; color:#c8f0d4; border:1px solid #2e6b40;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7); font:600 13.5px var(--font); animation:fgUpdIn .25s ease; }

/* ---- Loop 2 · Content-advies-paneel (herbruikt .fg-vov/.fg-vbox) ---- */
.fg-soc-toolbar{ display:flex; justify-content:flex-end; margin:0 0 10px; }
.fg-advsec{ margin:12px 0 0; }
.fg-advh{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.fg-advsum{ font-size:14px; line-height:1.5; margin:4px 0 2px; }
.fg-advbig{ font-size:16px; font-weight:800; }
.fg-advnext{ font-size:14px; background:color-mix(in srgb,var(--brand) 12%, var(--card)); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.fg-advlist{ margin:2px 0 0 2px; padding-left:18px; }
.fg-advlist li{ font-size:13px; line-height:1.45; margin:2px 0; }
.fg-advrecs{ display:flex; flex-direction:column; gap:5px; }
.fg-advrec{ font-size:12.5px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 9px; }

/* ---- Live-tab: inline kaart van België (Leaflet) + filters ---- */
.fg-livewrap{ display:flex; flex-direction:column; gap:10px; }
/* Live-kaart: schermbreed én groot. De wrapper zelf full-bleed maken, anders
   knipt overflow:hidden de brede canvas terug tot de smalle kolom. */
.fg-livemap{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; overflow:hidden; background:var(--card); width:100%; max-width:100%; margin-left:0; margin-right:0; }
.fgmap-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 22px; border-bottom:1px solid var(--line); width:100%; max-width:100%; margin:0; }
.fgmap-legend{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.fgmap-legend i{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:3px; vertical-align:middle; }
.fgmap-filters{ display:flex; gap:6px; flex-wrap:wrap; }
.fgmap-filters .fg-btn.on{ background:linear-gradient(180deg,var(--brand),var(--brand-strong)); color:var(--on-brand); border-color:transparent; }
.fgmap-count{ margin-left:auto; font-size:12px; color:var(--muted); font-weight:700; }
.fgmap-canvas2{ height:82vh; min-height:560px; width:100%; max-width:100%; margin:0; }
.fgmap-canvas2 .leaflet-container{ height:100%; width:100%; background:var(--card); }
.fgmap-canvas2 .leaflet-popup-content a{ text-decoration:none; }

/* Selectiebalk "Klaar voor uitnodiging" (vinkjes + Alles/Eerste 25/Wis + versturen). */
.fg-selbar{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin:8px 0 10px; flex-wrap:wrap; }
.fg-selbar .fg-selall{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:13px; cursor:pointer; }
.fg-selbar input[type=checkbox]{ width:16px; height:16px; accent-color:var(--brand); cursor:pointer; }
.fg-selbar .fg-selcount{ font-size:12px; }
.fg-selcell{ display:flex; align-items:center; justify-content:center; }
.fg-selcell input[type=checkbox]{ width:16px; height:16px; accent-color:var(--brand); cursor:pointer; }

/* GP-bevestiging (JA / Annuleren). */
.gpc-ov{ position:fixed; inset:0; z-index:2147483200; display:flex; align-items:center; justify-content:center; background:rgba(10,14,22,.55); backdrop-filter:blur(3px); padding:18px; }
.gpc-box{ background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.4); width:100%; max-width:420px; overflow:hidden; }
.gpc-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:15px; }
.gpc-badge{ background:linear-gradient(135deg,#C9A227,#8a6d10); color:#fff; font-weight:800; font-size:12px; border-radius:8px; padding:3px 8px; letter-spacing:.5px; }
.gpc-body{ padding:16px 18px; font-size:14px; line-height:1.5; color:var(--slate,#5C5147); }
.gpc-foot{ display:flex; justify-content:flex-end; gap:10px; padding:12px 18px 16px; }
.fg-livefoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:2px 4px; }

/* ---- Module-bibliotheek ---- */
.fg-modgrp{ margin:10px 0 0; }
.fg-modgh{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:6px 12px; }
.fg-modrow{ padding:9px 12px; border-top:1px solid var(--line); }
.fg-modtop{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fg-modnaam{ font-weight:700; font-size:13.5px; }
.fg-modst{ font-size:10.5px; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.fg-modst-live{ background:color-mix(in srgb,#1db954 20%, var(--card)); color:#1db954; }
.fg-modst-groei{ background:color-mix(in srgb,#f5a623 22%, var(--card)); color:#c47d10; }
.fg-modst-fundament{ background:color-mix(in srgb,var(--muted) 18%, var(--card)); color:var(--muted); }
.fg-modwat{ font-size:12.5px; color:var(--ink); opacity:.9; margin:3px 0 3px; line-height:1.4; }
.fg-modwaar{ font-size:11.5px; color:var(--muted); }

/* ---- Loop 4 audio-beheer ---- */
.fg-audrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent); }
.fg-audrow:last-child{ border-bottom:0; }
.fg-audname{ font-size:13px; font-weight:600; flex:1; min-width:120px; }

/* ---- Mascotte-groei (groeibalken) ---- */
.fg-groeitop{ display:flex; gap:10px; }
.fg-groeikpi{ flex:1; text-align:center; padding:12px 8px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.fg-groeikpi b{ display:block; font-size:22px; font-weight:800; }
.fg-groeikpi span{ font-size:11.5px; color:var(--muted); }
.fg-groeikpi.up b{ color:#1db954; }
.fg-groeirow{ display:flex; align-items:center; gap:10px; padding:4px 0; }
.fg-groeilbl{ flex:0 0 42%; font-size:12.5px; }
.fg-groeibar{ flex:1; height:10px; border-radius:999px; background:color-mix(in srgb,var(--line) 70%,transparent); overflow:hidden; }
.fg-groeibar i{ display:block; height:100%; border-radius:999px; transition:width .5s ease; }
.fg-groeiN{ flex:0 0 auto; font-size:12.5px; min-width:28px; text-align:right; }
.fg-groeifeit{ font-size:12.5px; padding:4px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent); }
.fg-groeifeit:last-child{ border-bottom:0; }

/* ---- Mascotte-thumbnails in de chat (i.p.v. gekleurde bollen) ---- */
.fggc-ava{ border-radius:50%; object-fit:cover; background:color-mix(in srgb,var(--brand) 12%, var(--card)); vertical-align:middle; }
.fggc-ava-sm{ width:20px; height:20px; margin-right:2px; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.fggc-ava-btn{ width:18px; height:18px; margin-right:4px; }
.fggc-mascbtn{ display:inline-flex; align-items:center; }
.fggc-who{ display:flex; align-items:center; gap:5px; }

/* ---- Mascotte-avatar in de project-chatbox ---- */
.fgm-helloava img{ width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); }
.fgm-msg.assistant{ display:flex; align-items:flex-start; gap:8px; }
.fgm-ava-sm img{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 auto; margin-top:2px; box-shadow:0 1px 3px rgba(0,0,0,.25); }

/* ============================================================
   DESIGN-POPUPS — Posts-studio, Regiekamer, Photo Room, Meta, Flow
   ============================================================ */

/* ---- Studio-tools galerij (op de studio-start) ---- */
.fg-sttoolbox{ margin-top:22px; padding-top:16px; border-top:1px dashed var(--line); }
.fg-sttoolbox-h{ font-size:13px; font-weight:800; margin-bottom:12px; display:flex; align-items:baseline; gap:10px; }
.fg-sttoolbox-h span{ font-size:11px; font-weight:600; color:var(--muted); }
.fg-sttoolgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; }
.fg-sttoolcard{ position:relative; display:flex; align-items:center; gap:12px; text-align:left; padding:14px; border-radius:16px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; overflow:hidden; transition:transform .14s ease, box-shadow .14s ease, border-color .14s; }
.fg-sttoolcard::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 120% at 0% 0%, color-mix(in srgb,var(--brand) 8%, transparent), transparent 60%); opacity:0; transition:opacity .2s; pointer-events:none; }
.fg-sttoolcard:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(0,0,0,.5); border-color:color-mix(in srgb,var(--brand) 45%, var(--line)); }
.fg-sttoolcard:hover::after{ opacity:1; }
.fg-sttoolic{ width:46px; height:46px; flex:0 0 auto; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:23px; box-shadow:0 6px 16px -8px rgba(0,0,0,.55); }
.fg-sttooltxt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.fg-sttooltxt b{ font-size:14px; }
.fg-sttooltxt i{ font-style:normal; font-size:11.5px; color:var(--muted); line-height:1.3; }
.fg-sttoolloop{ position:absolute; top:9px; right:10px; font-size:13px; opacity:.35; filter:grayscale(1); transition:opacity .2s, filter .2s, transform .4s; }
.fg-sttoolcard:hover .fg-sttoolloop{ opacity:.9; filter:none; transform:rotate(180deg); }

/* ---- Loop-motor chip (in elke Design-popup — zelfcontrole komt hier) ---- */
.fg-loopchip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; border:1px dashed color-mix(in srgb, var(--brand,var(--brand)) 45%, var(--line,#334)); color:var(--muted,#8b93a7); white-space:nowrap; }
.fg-loopchip .dot{ width:7px; height:7px; border-radius:50%; background:#f0a83c; box-shadow:0 0 0 3px rgba(240,168,60,.18); animation:fgloop 2.4s ease-in-out infinite; }
@keyframes fgloop{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
.fgrk-bar .fg-loopchip{ color:#c9a24a; border-color:#3a3320; }

/* ---- Mijn modules (per-gebruiker aanvinken) ---- */
.fg-mymgrp{ padding:6px 12px 10px; }
.fg-mymgh{ font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin:8px 0 6px; }
.fg-mymrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; margin-bottom:6px; cursor:pointer; background:var(--card); transition:border-color .12s; }
.fg-mymrow:hover{ border-color:color-mix(in srgb,var(--brand) 40%, var(--line)); }
.fg-mymnaam{ font-size:13.5px; }
.fg-mymrow input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--brand); cursor:pointer; }

/* ---- Loop-checker in de Data-controle (visueel + voortgang) ---- */
.fgck-loopwrap{ margin-bottom:14px; }
.fgck-loophd{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800; margin:2px 2px 10px; }
.fgck-loopcnt{ font-size:11.5px; font-weight:700; color:var(--muted); background:color-mix(in srgb,var(--brand) 12%, transparent); padding:2px 10px; border-radius:20px; }
.fgck-loopgrp{ margin-bottom:10px; }
.fgck-loopgh{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin:6px 2px; }
.fgck-loopgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:9px; }
.fgck-loop{ border:1px solid var(--line); border-left:4px solid var(--muted); border-radius:11px; padding:9px 10px; background:var(--card); transition:transform .12s, box-shadow .12s; }
.fgck-loop:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -16px rgba(0,0,0,.5); }
.fgck-loop.ok{ border-left-color:var(--ok); }
.fgck-loop.running{ border-left-color:#3b82f6; }
.fgck-loop.orange{ border-left-color:#f0a83c; }
.fgck-loop.red{ border-left-color:var(--danger); }
.fgck-loop.soon{ border-left-color:#9aa3b2; border-style:dashed; }
.fgck-loop.idle{ border-left-color:var(--ok); }
/* Kleurrijke tint per status — laat de tegels van het scherm spatten */
.fgck-loop.ok, .fgck-loop.idle{ background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 13%,var(--card)),var(--card) 68%); }
.fgck-loop.running{ background:linear-gradient(135deg,color-mix(in srgb,#3b82f6 16%,var(--card)),var(--card) 66%); }
.fgck-loop.orange{ background:linear-gradient(135deg,color-mix(in srgb,#f0a83c 15%,var(--card)),var(--card) 66%); }
.fgck-loop.red{ background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 15%,var(--card)),var(--card) 66%); }
.fgck-loop.soon{ background:linear-gradient(135deg,color-mix(in srgb,#9aa3b2 12%,var(--card)),var(--card) 72%); }
.fgck-card.green{ background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 13%,var(--card)),var(--card) 66%)!important; border-color:color-mix(in srgb,var(--ok) 28%,var(--line)); }
.fgck-card.orange{ background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 15%,var(--card)),var(--card) 66%)!important; border-color:color-mix(in srgb,var(--warn) 30%,var(--line)); }
.fgck-card.red{ background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 15%,var(--card)),var(--card) 66%)!important; border-color:color-mix(in srgb,var(--danger) 30%,var(--line)); }
.fgck-card.info{ background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--card)),var(--card) 70%)!important; }
.fgck-looptop{ display:flex; align-items:center; gap:7px; }
.fgck-loopdot{ font-size:12px; }
.fgck-loopnaam{ font-size:13px; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fgck-loopstat{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; }
.fgck-loop.running .fgck-loopstat{ color:#3b82f6; font-weight:700; }
.fgck-lpbar{ height:7px; border-radius:20px; background:color-mix(in srgb,var(--muted) 25%, transparent); overflow:hidden; margin:8px 0 6px; }
.fgck-lpbar > i{ display:block; height:100%; border-radius:20px; background:var(--ok); transition:width .5s ease; }
.fgck-lpbar.run > i{ background:linear-gradient(90deg,#3b82f6,#60a5fa,#3b82f6); background-size:200% 100%; animation:fgckflow 1.1s linear infinite; }
@keyframes fgckflow{ from{ background-position:0 0 } to{ background-position:200% 0 } }
.fgck-loopmsg{ font-size:11.5px; color:var(--ink); opacity:.8; line-height:1.35; margin-top:4px; }
.fgck-loopfoot{ display:flex; justify-content:space-between; gap:8px; font-size:10.5px; color:var(--muted); margin-top:7px; }

/* ---- Merk-kit ---- */
.fgmk-card{ border:1px solid var(--line); border-top:3px solid var(--mk,var(--brand)); border-radius:12px; padding:12px; margin:10px 12px; background:var(--card); }
.fgmk-head{ display:flex; align-items:center; gap:10px; }
.fgmk-masc{ width:42px; height:42px; border-radius:50%; object-fit:cover; box-shadow:0 3px 8px -3px rgba(0,0,0,.4); }
.fgmk-ttl{ display:flex; flex-direction:column; flex:1; }
.fgmk-ttl b{ font-size:14px; }
.fgmk-ttl span{ font-size:11px; color:var(--muted); }
.fgmk-swatch{ width:30px; height:30px; border-radius:8px; background:var(--mk,var(--brand)); border:1px solid rgba(0,0,0,.15); }
.fgmk-meta{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.fgmk-chip{ font-size:11px; padding:3px 9px; border-radius:20px; border:1px solid var(--line); background:var(--bg); }
.fgmk-toon{ width:100%; resize:vertical; margin-bottom:6px; }

/* ---- Studio-tools: extra WOW (springt van het scherm) ---- */
.fg-sttoolcard{ animation:fgtoolpop .4s cubic-bezier(.2,.8,.25,1.15) backwards; }
.fg-sttoolgrid .fg-sttoolcard:nth-child(1){ animation-delay:.02s } .fg-sttoolgrid .fg-sttoolcard:nth-child(2){ animation-delay:.06s }
.fg-sttoolgrid .fg-sttoolcard:nth-child(3){ animation-delay:.10s } .fg-sttoolgrid .fg-sttoolcard:nth-child(4){ animation-delay:.14s }
.fg-sttoolgrid .fg-sttoolcard:nth-child(5){ animation-delay:.18s } .fg-sttoolgrid .fg-sttoolcard:nth-child(6){ animation-delay:.22s }
.fg-sttoolgrid .fg-sttoolcard:nth-child(7){ animation-delay:.26s } .fg-sttoolgrid .fg-sttoolcard:nth-child(8){ animation-delay:.30s }
.fg-sttoolgrid .fg-sttoolcard:nth-child(9){ animation-delay:.34s }
@keyframes fgtoolpop{ from{ opacity:0; transform:translateY(14px) scale(.96) } to{ opacity:1; transform:none } }
.fg-sttoolic{ position:relative; overflow:hidden; }
.fg-sttoolic::before{ content:''; position:absolute; top:-60%; left:-60%; width:60%; height:220%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:rotate(20deg); transition:left .5s ease; }
.fg-sttoolcard:hover .fg-sttoolic::before{ left:140%; }

/* ---- Persoonlijke agenda ---- */
.fgag-scope{ display:inline-flex; gap:0; margin-left:10px; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.fgag-sc{ font:inherit; font-size:12px; padding:5px 12px; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.fgag-sc.on{ background:var(--brand); color:var(--on-brand); font-weight:700; }
.fgag-new{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--brand) 3%, var(--card)); }
.fgag-allday{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.fgag-colors{ display:inline-flex; gap:4px; }
.fgag-col{ width:20px; height:20px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.fgag-col.on{ border-color:var(--ink); transform:scale(1.12); }
.fgag-day{ padding:6px 14px 10px; }
.fgag-dayh{ font-size:12px; font-weight:800; text-transform:capitalize; color:var(--muted); margin:8px 0 6px; position:sticky; top:0; }
.fgag-item{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line); border-left:4px solid var(--ac,#888); border-radius:10px; margin-bottom:6px; background:var(--card); }
.fgag-time{ font-size:12px; font-weight:700; min-width:64px; color:var(--ink); }
.fgag-kind{ font-size:15px; }
.fgag-titel{ flex:1; font-size:13.5px; }
.fgag-owner{ font-size:11px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:2px 8px; }
.fgag-del{ width:24px; height:24px; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }
.fgag-del:hover{ background:color-mix(in srgb,var(--danger) 15%, transparent); color:var(--danger); }

/* ---- Posts-studio (full-screen omgeving, eigen bar als header) ---- */
#fgPostsOv{ position:fixed; inset:0; z-index:2147483000; background:var(--bg); display:flex; flex-direction:column; animation:fgpoIn .18s ease; }
@keyframes fgpoIn{ from{ opacity:0 } to{ opacity:1 } }
.fgpo-bar{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); box-shadow:0 2px 12px -8px rgba(0,0,0,.4); }
.fgpo-title{ font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px; }
.fgpo-task{ font-size:11px; font-weight:700; color:var(--muted); background:color-mix(in srgb, var(--brand) 12%, transparent); padding:2px 8px; border-radius:20px; }
.fgpo-engine{ font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:3px 10px; }
.fgpo-body{ flex:1; display:flex; min-height:0; }
.fgpo-side{ width:206px; flex:0 0 auto; border-right:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; min-height:0; }
.fgpo-sidehead{ font-size:12px; font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line); color:var(--muted); }
.fgpo-sidebody{ overflow:auto; padding:8px; }
.fgpo-assets{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fgpo-asset{ padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer; aspect-ratio:1; background:var(--bg); transition:border-color .12s, transform .12s; }
.fgpo-asset:hover{ border-color:var(--brand); transform:scale(1.03); }
.fgpo-asset img{ width:100%; height:100%; object-fit:cover; display:block; }
.fgpo-panels{ flex:1; display:flex; gap:14px; padding:14px; overflow-x:auto; min-height:0; align-items:stretch; }
.fgpo-panel{ flex:1 1 0; min-width:340px; max-width:620px; display:flex; flex-direction:column; min-height:0; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); transition:border-color .15s; }
.fgpo-panel.focus{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent), var(--shadow); }
.fgpo-phead{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--brand) 5%, var(--card)); }
.fgpo-pava img{ width:34px; height:34px; border-radius:50%; object-fit:cover; box-shadow:0 2px 6px -2px rgba(0,0,0,.4); }
.fgpo-pttl{ display:flex; flex-direction:column; line-height:1.2; }
.fgpo-pttl b{ font-size:14px; }
.fgpo-peng{ font-size:11px; color:var(--muted); }
.fgpo-pclose{ margin-left:auto; width:26px; height:26px; flex:0 0 auto; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--muted); cursor:pointer; font-size:12px; line-height:1; transition:background .12s, color .12s; }
.fgpo-pclose:hover{ background:color-mix(in srgb,var(--danger) 14%, transparent); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%, var(--line)); }
.fgpo-msgs{ flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.fgpo-msg{ display:flex; gap:8px; align-items:flex-start; }
.fgpo-msg.human{ flex-direction:row-reverse; }
.fgpo-mava img{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.fgpo-bub{ padding:8px 11px; border-radius:12px; font-size:13.5px; line-height:1.45; max-width:78%; white-space:pre-wrap; }
.fgpo-msg.mascotte .fgpo-bub{ background:var(--bg); border:1px solid var(--line); }
.fgpo-msg.human .fgpo-bub{ background:var(--brand); color:var(--on-brand); }
.fgpo-typing .fgpo-bub{ opacity:.6; font-style:italic; }
.fgpo-img{ padding:10px 12px; }
.fgpo-img img{ max-width:100%; border-radius:10px; display:block; }
.fgpo-imgcap{ font-size:11px; color:var(--muted); margin-top:4px; }
.fgpo-imgstub{ padding:22px 14px; text-align:center; font-size:13px; color:var(--muted); background:var(--bg); border:1px dashed var(--line); border-radius:10px; }
.fgpo-atts{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:0 12px 8px; }
.fgpo-attslbl{ font-size:11px; color:var(--muted); }
.fgpo-att{ position:relative; }
.fgpo-att img{ width:40px; height:40px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.fgpo-att button{ position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%; border:0; background:var(--danger); color:#fff; font-size:10px; line-height:1; cursor:pointer; }
.fgpo-actions{ display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--line); }
.fgpo-compose{ display:flex; gap:6px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--line); background:color-mix(in srgb, var(--brand) 3%, var(--card)); }
.fgpo-input{ flex:1; resize:none; }
.fgpo-send{ padding:8px 12px; }
.fgpo-gen{ white-space:nowrap; }

/* ---- Regiekamer (film & regisseur) ---- */
.fgrk-ov{ position:fixed; inset:0; z-index:2147483000; background:#0c0f16; color:#e8ecf4; display:flex; flex-direction:column; animation:fgpoIn .18s ease; }
.fgrk-bar{ display:flex; align-items:center; gap:12px; padding:11px 16px; background:linear-gradient(180deg,#141926,#0e121b); border-bottom:1px solid #232a3a; }
.fgrk-logo{ display:flex; align-items:baseline; gap:8px; font-size:15px; }
.fgrk-logo .fgrk-sub{ font-size:11px; color:#8b93a7; }
.fgrk-brands{ display:flex; gap:5px; }
.fgrk-bbtn{ width:34px; height:34px; border-radius:9px; border:1px solid #2b3346; background:#161c29; cursor:pointer; padding:2px; overflow:hidden; opacity:.6; transition:opacity .12s, border-color .12s; }
.fgrk-bbtn img{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
.fgrk-bbtn.on{ opacity:1; border-color:var(--rk,var(--brand)); box-shadow:0 0 0 2px color-mix(in srgb, var(--rk,var(--brand)) 35%, transparent); }
.fgrk-badge{ font-size:11px; color:#c9a24a; border:1px solid #3a3320; background:#1c1809; border-radius:20px; padding:4px 10px; }
.fgrk-body{ flex:1; display:flex; min-height:0; }
.fgrk-bin{ width:230px; flex:0 0 auto; border-right:1px solid #232a3a; overflow:auto; padding:8px; background:#0f131c; min-width:150px; max-width:520px; }
.fgrk-resizer{ flex:0 0 auto; width:7px; cursor:col-resize; background:#1a2030; border-right:1px solid #2b3346; position:relative; transition:background .12s; }
.fgrk-resizer:hover, .fgrk-resizer.drag{ background:var(--rk,var(--brand)); }
.fgrk-resizer::before{ content:'⋮'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#5a6478; font-size:14px; letter-spacing:-2px; }
.fgrk-binhead{ font-size:12px; font-weight:700; color:#aeb6c8; padding:4px 6px 8px; display:flex; align-items:center; gap:6px; }
.fgrk-cnt{ background:#232a3a; border-radius:20px; padding:1px 7px; font-size:11px; }
.fgrk-empty,.fgrk-tlempty,.fgrk-mon-empty{ color:#7f8799; font-size:12px; }
.fgrk-empty{ padding:12px 8px; }
.fgrk-clip{ position:relative; display:flex; gap:8px; align-items:center; padding:6px; border:1px solid #232a3a; border-radius:9px; margin-bottom:7px; background:#141a26; cursor:pointer; transition:border-color .12s; }
.fgrk-clip:hover{ border-color:#39445c; }
.fgrk-clip.used{ border-color:var(--rk,var(--brand)); }
.fgrk-thumb{ position:relative; width:46px; height:46px; flex:0 0 auto; border-radius:7px; overflow:hidden; background:#0b0e15; display:flex; align-items:center; justify-content:center; font-size:18px; }
.fgrk-thumb img{ width:100%; height:100%; object-fit:cover; }
.fgrk-dur{ position:absolute; bottom:1px; right:1px; font-size:9px; background:rgba(0,0,0,.7); padding:0 3px; border-radius:3px; }
.fgrk-cmeta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fgrk-ctitel{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fgrk-cst{ font-size:10.5px; color:#8b93a7; }
.fgrk-add{ width:24px; height:24px; flex:0 0 auto; border-radius:6px; border:1px solid #39445c; background:#1b2233; color:#e8ecf4; cursor:pointer; font-size:14px; }
.fgrk-clip.used .fgrk-add{ background:var(--rk,var(--brand)); border-color:var(--rk,var(--brand)); color:#101010; }
.fgrk-stage{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:16px; gap:12px; }
.fgrk-monitor{ flex:1; width:100%; display:flex; align-items:center; justify-content:center; min-height:0; }
.fgrk-frame{ position:relative; background:#000; border-radius:10px; overflow:hidden; box-shadow:0 12px 40px -14px #000; max-height:100%; }
.fgrk-framein{ position:relative; width:100%; height:100%; }
.fgrk-r-9-16{ height:min(64vh,560px); aspect-ratio:9/16; }
.fgrk-r-1-1{ height:min(60vh,520px); aspect-ratio:1/1; }
.fgrk-r-16-9{ width:min(72vw,860px); aspect-ratio:16/9; }
.fgrk-framein > img,.fgrk-framein > video{ width:100%; height:100%; object-fit:cover; display:block; }
.fgrk-mon-empty{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:38px; background:#0b0e15; border:1px dashed #232a3a; border-radius:10px; }
.fgrk-mon-empty div{ font-size:13px; }
.fgrk-ovlogo{ position:absolute; top:10px; left:10px; width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 2px 5px rgba(0,0,0,.6)); }
.fgrk-ovtxt{ position:absolute; left:0; right:0; bottom:0; padding:10px 12px; font-weight:800; font-size:15px; color:#fff; background:linear-gradient(0deg,rgba(0,0,0,.75),transparent); }
.fgrk-playbar{ display:flex; align-items:center; gap:8px; }
.fgrk-shotlbl{ font-size:12px; color:#8b93a7; }
.fgrk-regie{ width:250px; flex:0 0 auto; border-left:1px solid #232a3a; overflow:auto; padding:12px; background:#0f131c; }
.fgrk-rhead{ font-size:13px; font-weight:800; margin-bottom:10px; }
.fgrk-rsec{ margin-bottom:14px; }
.fgrk-rsec > label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#8b93a7; margin-bottom:6px; }
.fgrk-music{ display:flex; align-items:center; gap:6px; font-size:12px; flex-wrap:wrap; }
.fgrk-chips,.fgrk-togs{ display:flex; flex-wrap:wrap; gap:6px; }
.fgrk-chip,.fgrk-tog{ font:inherit; font-size:12px; padding:6px 9px; border-radius:8px; border:1px solid #2b3346; background:#141a26; color:#cfd6e4; cursor:pointer; }
.fgrk-chip.on,.fgrk-tog.on{ background:var(--rk,var(--brand)); border-color:var(--rk,var(--brand)); color:#101010; font-weight:700; }
.fgrk-receptbox{ font-size:12px; color:#cfd6e4; background:#141a26; border:1px solid #2b3346; border-radius:8px; padding:8px; }
.fgrk-monteer{ width:100%; margin-top:4px; padding:11px; font-size:14px; }
.fgrk-render{ width:100%; max-width:520px; background:#0f131c; border:1px solid #2b3346; border-radius:12px; padding:16px; }
.fgrk-render-h{ font-size:15px; font-weight:800; margin-bottom:4px; }
.fgrk-render-sub{ font-size:12px; color:#8b93a7; margin-bottom:10px; }
.fgrk-recept-json{ font-size:11px; background:#0b0e15; border:1px solid #232a3a; border-radius:8px; padding:10px; max-height:220px; overflow:auto; color:#9fd0a8; white-space:pre; margin:0 0 12px; }
.fgrk-timeline{ flex:0 0 auto; border-top:1px solid #232a3a; background:#0b0e15; padding:8px 12px; display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; }
.fgrk-track{ display:flex; align-items:center; gap:8px; }
.fgrk-tracklbl{ width:22px; flex:0 0 auto; text-align:center; }
.fgrk-trackrow{ flex:1; display:flex; gap:6px; align-items:center; min-height:38px; background:#0f131c; border:1px solid #1c2333; border-radius:8px; padding:4px; overflow-x:auto; }
.fgrk-tlclip{ position:relative; display:flex; align-items:center; gap:5px; padding:3px 6px 3px 3px; border:1px solid #2b3346; border-radius:6px; background:#141a26; cursor:pointer; flex:0 0 auto; }
.fgrk-tlclip.sel{ border-color:var(--rk,var(--brand)); box-shadow:0 0 0 1px var(--rk,var(--brand)); }
.fgrk-tlnum{ font-size:10px; background:#2b3346; border-radius:10px; padding:0 5px; }
.fgrk-tlclip img{ width:30px; height:30px; object-fit:cover; border-radius:4px; }
.fgrk-tltitel{ font-size:11px; max-width:90px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fgrk-tlmove{ display:flex; gap:2px; }
.fgrk-tlmove button{ width:18px; height:18px; border:0; border-radius:4px; background:#232a3a; color:#cfd6e4; font-size:9px; cursor:pointer; }
.fgrk-audioclip,.fgrk-txtclip{ font-size:11px; padding:4px 8px; border-radius:6px; background:#161c29; border:1px solid #2b3346; flex:0 0 auto; }
.fgrk-audioclip{ color:#9fd0a8; }
/* Bak-tabs (Clips · Logo & mascottes) — sticky bovenaan de volle-hoogte bak */
.fgrk-bintabs{ display:flex; gap:5px; margin-bottom:8px; position:sticky; top:0; background:#0f131c; padding:2px 0 6px; z-index:2; }
.fgrk-bintab{ flex:1; font:inherit; font-size:11px; padding:7px 5px; border-radius:8px; border:1px solid #2b3346; background:#141a26; color:#cfd6e4; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; }
.fgrk-bintab.on{ background:var(--rk,var(--brand)); border-color:var(--rk,var(--brand)); color:#101010; font-weight:700; }

/* ---- Ranglijst ---- */
.fgrank-tabs{ display:inline-flex; gap:4px; margin-left:10px; }
.fgrank-tab{ font:inherit; font-size:12px; padding:5px 10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.fgrank-tab.on{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:700; }
.fgrank-brands{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid var(--line); }
.fgrank-bbtn{ font:inherit; font-size:12px; display:flex; align-items:center; gap:6px; padding:5px 9px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.fgrank-bbtn img{ width:18px; height:18px; border-radius:50%; object-fit:cover; }
.fgrank-bbtn.on{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 8%, var(--card)); font-weight:700; }
.fgrank-empty{ text-align:center; padding:28px 16px; color:var(--muted); font-size:32px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.fgrank-ph{ display:flex; flex-direction:column; gap:8px; margin-top:12px; width:min(320px,90%); }
.fgrank-phrow{ display:flex; align-items:center; gap:10px; }
.fgrank-medal{ font-size:18px; }
.fgrank-phbar{ flex:1; height:12px; border-radius:20px; background:color-mix(in srgb,var(--muted) 18%, transparent); }
.fgrank-list{ padding:6px 10px; }
.fgrank-row{ display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line); border-radius:10px; margin-bottom:6px; background:var(--card); }
.fgrank-row.top{ border-color:color-mix(in srgb,#f59e0b 45%, var(--line)); }
.fgrank-rank{ font-size:16px; font-weight:800; min-width:26px; text-align:center; }
.fgrank-thumb{ position:relative; width:52px; height:52px; flex:0 0 auto; border-radius:8px; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:20px; }
.fgrank-thumb img{ width:100%; height:100%; object-fit:cover; }
.fgrank-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); color:#fff; text-decoration:none; font-size:18px; }
.fgrank-info{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.fgrank-val{ font-size:13.5px; }
.fgrank-sub{ font-size:11.5px; color:var(--muted); }
.fgrank-cap{ font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- Photo Room / Meta / Flow — brede modals in de bestaande .fg-vov ---- */
.fgpr-box{ width:min(920px,96vw)!important; max-width:960px; }
.fgmp-box{ width:min(1240px,96vw)!important; max-width:1320px; }
.fgpr-body{ display:flex; min-height:0; max-height:74vh; }
.fgmp-body{ display:flex; min-height:0; max-height:82vh; }
.fgpr-side,.fgmp-side{ width:220px; flex:0 0 auto; border-right:1px solid var(--line); overflow:auto; background:var(--bg); }
.fgpr-grid,.fgmp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px; }
.fgpr-thumb,.fgmp-thumb{ padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer; aspect-ratio:1; background:var(--card); transition:border-color .12s; }
.fgpr-thumb.on,.fgmp-thumb.on{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%, transparent); }
.fgpr-thumb img,.fgmp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.fgpr-work,.fgmp-work{ flex:1; display:flex; flex-direction:column; padding:14px; overflow:auto; min-width:0; }
.fgpr-stage{ flex:1; display:flex; align-items:center; justify-content:center; min-height:260px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; }
.fgpr-hint{ text-align:center; color:var(--muted); font-size:32px; }
.fgpr-hint div{ font-size:13px; margin-top:8px; }
.fgpr-single img{ max-width:100%; max-height:52vh; border-radius:8px; }
.fgpr-compare{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.fgpr-compare figure{ margin:0; text-align:center; }
.fgpr-compare figcaption{ font-size:11px; color:var(--muted); margin-bottom:5px; }
.fgpr-compare img{ max-height:40vh; max-width:100%; border-radius:8px; }
.fgpr-checker{ background:conic-gradient(#ccc 90deg,#fff 90deg 180deg,#ccc 180deg 270deg,#fff 270deg) 0 0/18px 18px; border-radius:8px; display:inline-block; }
.fgpr-stub,.fgmp-stub{ margin-top:12px; font-size:12.5px; color:var(--muted); background:var(--bg); border:1px dashed var(--line); border-radius:8px; padding:12px; text-align:center; }
.fgpr-opts{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:12px; }
.fgpr-optlbl{ font-size:12px; color:var(--muted); }
.fgpr-opt{ font:inherit; font-size:12px; padding:6px 10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.fgpr-opt.on{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:700; }

.fgmp-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:12px 0 6px; display:block; }
.fgmp-microw{ display:flex; margin:6px 0 0; }

/* ---- Algemene mic-update: zwevende dicteerknop in elk tekstveld ---- */
.fg-micwrap{ position:relative; display:block; }
.fg-hasmic{ padding-right:40px!important; }
.fg-micfloat{ position:absolute!important; top:6px; right:6px; width:30px; height:30px; min-width:0; padding:0; display:flex; align-items:center; justify-content:center; border-radius:8px; z-index:3; opacity:.6; transition:opacity .15s, transform .15s; }
.fg-micwrap:hover .fg-micfloat,.fg-micfloat.on{ opacity:1; }
.fg-micfloat.on{ background:var(--danger,var(--danger)); color:#fff; animation:fgmicpulse 1.2s ease-in-out infinite; }
@keyframes fgmicpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(229,72,77,.4) } 50%{ box-shadow:0 0 0 6px rgba(229,72,77,0) } }
.fgmp-preview{ min-height:150px; display:flex; align-items:center; justify-content:center; background:var(--bg); border:1px solid var(--line); border-radius:12px; position:relative; overflow:hidden; }
.fgmp-preview img{ max-width:100%; max-height:34vh; display:block; }
.fgmp-noimg{ color:var(--muted); font-size:13px; }
.fgmp-imgx{ position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; }
.fgmp-chans,.fgmp-when{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fgmp-chan,.fgmp-wbtn{ font:inherit; font-size:13px; padding:8px 12px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.fgmp-chan.on,.fgmp-wbtn.on{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:700; }
.fgmp-foot{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.fgmp-go{ padding:10px 18px; font-size:14px; }
.fgmp-confirm{ position:absolute; inset:0; background:rgba(6,10,18,.55); display:flex; align-items:center; justify-content:center; border-radius:16px; }
.fgmp-confbox{ width:min(420px,90%); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow); }
.fgmp-confh{ font-size:16px; font-weight:800; margin-bottom:12px; }
.fgmp-confrow{ font-size:13px; margin-bottom:6px; }
.fgmp-confbtns{ display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

.fgfl-box{ width:min(760px,96vw)!important; }
.fgfl-body{ display:flex; gap:0; min-height:0; max-height:72vh; }
.fgfl-form{ flex:1; padding:14px; overflow:auto; }
.fgfl-brands{ display:flex; flex-wrap:wrap; gap:6px; }
.fgfl-bbtn{ font:inherit; font-size:12.5px; display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.fgfl-bbtn img{ width:20px; height:20px; border-radius:50%; object-fit:cover; }
.fgfl-bbtn.on{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 8%, var(--card)); font-weight:700; }
.fgfl-drop{ display:flex; align-items:center; justify-content:center; min-height:96px; border:2px dashed var(--line); border-radius:12px; cursor:pointer; color:var(--muted); font-size:13px; text-align:center; padding:12px; transition:border-color .12s, background .12s; }
.fgfl-drop:hover,.fgfl-drop.drag{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 6%, transparent); }
.fgfl-recent{ width:280px; flex:0 0 auto; border-left:1px solid var(--line); background:var(--bg); overflow:auto; padding:10px; }
.fgfl-recenth{ font-size:12px; font-weight:700; color:var(--muted); margin-bottom:8px; }
.fgfl-row{ display:flex; justify-content:space-between; gap:8px; font-size:12px; padding:6px 4px; border-bottom:1px solid var(--line); }
.fgfl-row span:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:720px){
  .fgpo-side{ display:none; }
  .fgrk-bin,.fgrk-regie{ width:150px; }
  .fgpr-body,.fgmp-body,.fgfl-body{ flex-direction:column; max-height:80vh; }
  .fgpr-side,.fgmp-side,.fgfl-recent{ width:auto; border-right:0; border-left:0; border-top:1px solid var(--line); }
}

/* ===== WAT & HOE — live bouwbord op het dashboard ===== */
.fg-bouwboard{ margin-top:0; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.fg-bouw-head{ display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line); }
.fg-bouw-title{ font-weight:900; font-size:15.5px; letter-spacing:-.01em; display:flex; align-items:baseline; gap:8px; }
.fg-bouw-sub{ font-weight:600; font-size:11.5px; color:var(--muted); }
.fg-bouw-counts{ margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:700; }
.fg-bouw-counts b{ color:var(--brand-ink); font-size:15px; }
.fg-bouw-counts .ok{ color:var(--ok); }
.fg-bouw-body{ padding:8px 12px 12px; max-height:calc(100vh - 340px); overflow:auto; }
.fg-bouw-group{ margin-top:10px; }
.fg-bouw-ghead{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:6px 2px 5px; }
.fg-bouw-dot{ width:9px; height:9px; border-radius:50%; }
/* build 830 — var(--fg) is nergens gedefinieerd en had geen terugval, dus deze regel viel
   weg en de kleur werd geërfd. --ink is de tekstkleur die in licht én donker meeschuift. */
.fg-bouw-gc{ margin-left:auto; background:color-mix(in srgb,var(--muted) 14%,transparent); color:var(--ink); border-radius:999px; padding:1px 8px; font-size:11px; }
.fg-bouw-item{ display:flex; align-items:flex-start; gap:9px; padding:8px 9px; border-radius:10px; }
.fg-bouw-item:hover{ background:color-mix(in srgb,var(--brand) 7%,transparent); }
.fg-bouw-st{ font-size:13px; line-height:1.5; flex:0 0 auto; }
.fg-bouw-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fg-bouw-tx b{ font-weight:700; font-size:13.5px; line-height:1.35; }
.fg-bouw-note{ font-size:11.5px; color:var(--muted); }
.fg-bouw-acts{ display:flex; gap:5px; flex:0 0 auto; opacity:.55; transition:opacity .12s; }
.fg-bouw-item:hover .fg-bouw-acts{ opacity:1; }
.fg-bouw-mini{ border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:2px 8px; cursor:pointer; font-size:12.5px; line-height:1.4; }
.fg-bouw-mini.done:hover{ background:var(--ok); color:#fff; border-color:var(--ok); }
.fg-bouw-empty{ padding:22px 14px; text-align:center; color:var(--muted); font-weight:700; font-size:13.5px; }
.fg-bouw-setup{ padding:16px 14px; color:var(--muted); font-size:12.5px; line-height:1.55; }

/* ===== FICHE — sales-toewijzing ===== */
.fgf2-apill.sales{ background:color-mix(in srgb,#0e7490 16%,transparent); border:1px solid color-mix(in srgb,#0e7490 45%,transparent); color:var(--ink); border-radius:999px; padding:2px 10px; }
.fgf2-sales{ background:linear-gradient(135deg,color-mix(in srgb,#0e7490 16%,transparent),transparent); border:1px solid color-mix(in srgb,#0e7490 40%,transparent); border-radius:14px; padding:12px 13px; margin-bottom:12px; }
.fgf2-sales .fgf2-bh{ margin-bottom:8px; }
.fgf2-salesrow{ display:flex; align-items:center; gap:9px; }
.fgf2-salesava{ width:30px; height:30px; border-radius:50%; background:#0e7490; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex:0 0 auto; }
.fgf2-salesag{ font-weight:800; font-size:14.5px; }
.fgf2-salesmeta{ font-size:11.5px; color:var(--muted); margin-top:6px; }
.fgf2-salesnote{ font-size:12px; margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }

/* =================================================================
   PREMIUM LAYER — build 494 (overschrijft eerdere regels; komt laatst)
   ================================================================= */

/* ---- HOME grid: geen lege ruimte, merk-kolom strekt mee ---- */
.fg-home{ height:calc(100dvh - var(--header-h) - 2*var(--s-6)); display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);
  grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:"hero hero" "gp brands" "board brands";
  column-gap:var(--s-6); row-gap:var(--s-5); align-items:stretch; padding:var(--s-6); }
.fg-home>.fg-hero{ grid-area:hero; }
.fg-home>.fg-gp{ grid-area:gp; }
.fg-home>#fgBouwBoard, .fg-home>.fg-bouwboard{ grid-area:board; min-height:0; margin-top:0; }
.fg-home>.fg-brands{ grid-area:brands; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s-4); min-height:0; }
@media (max-width:1080px){ .fg-home{ height:auto; grid-template-columns:1fr; grid-template-areas:"hero" "gp" "brands" "board"; } .fg-home>.fg-bouwboard{ max-height:60vh; } }

/* ---- HERO ---- */
.fg-hero{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; padding-bottom:var(--s-2); }
.fg-hero-id .hi{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.fg-hero-id .sub{ font-size:12.5px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:8px; }
.fg-hero-id .sub .dot{ color:color-mix(in srgb,var(--muted) 50%,transparent); }
.fg-herosearch{ display:flex; align-items:center; gap:var(--s-3); }
.fg-homesearch{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:10px 16px; min-width:260px; max-width:400px; font-size:13.5px; color:var(--muted); cursor:text; box-shadow:var(--shadow-sm); transition:border-color .14s,box-shadow .14s; }
.fg-homesearch:hover{ border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); }
.fg-homesearch kbd{ margin-left:auto; font-size:11px; background:var(--card-2); border:1px solid var(--line); border-radius:6px; padding:2px 6px; color:var(--muted); }

/* ---- BRAND CARDS: getinte-lichte portretten, mascotte netjes ingekapt ---- */
.fg-brandcard{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:0; padding:var(--s-5); border-radius:var(--r-lg); cursor:pointer; isolation:isolate; text-align:left;
  background:radial-gradient(120% 120% at 100% 0%, color-mix(in srgb,var(--bc) 16%,transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb,var(--bc) 7%,var(--card)), var(--card));
  border:1px solid color-mix(in srgb,var(--bc) 26%,var(--line)); box-shadow:var(--shadow-sm);
  transition:transform .16s var(--ease), box-shadow .18s, border-color .18s; }
.fg-brandcard::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--bc); opacity:.9; }
.fg-brandcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--bc) 45%,var(--line)); }
.fg-brandcard:focus-visible{ outline:none; box-shadow:var(--focus); }
.fg-bc-masc{ position:absolute; right:-6px; top:-2px; width:clamp(72px,34%,118px); height:auto; max-height:62%; object-fit:contain; object-position:top right; opacity:.92; pointer-events:none; filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--bc) 30%,transparent)); -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent); mask-image:linear-gradient(180deg,#000 72%,transparent); z-index:0; }
.fg-bc-top,.fg-bc-bot{ position:relative; z-index:1; }
.fg-brandcard .bemoji{ font-size:18px; line-height:1; }
.fg-brandcard .bname{ display:block; font-weight:800; font-size:14px; letter-spacing:-.01em; color:var(--ink); margin-top:6px; max-width:64%; }
.fg-brandcard .bnum{ font-size:clamp(30px,4vh,40px); font-weight:900; letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.fg-brandcard .blbl{ font-size:12px; font-weight:600; color:var(--muted); margin-top:6px; }

/* ---- GP-FLUISTERT ---- */
.fg-gp{ display:flex; gap:var(--s-4); align-items:flex-start; padding:var(--s-5); border-radius:var(--r-lg); background:radial-gradient(140% 120% at 0% 0%, var(--brand-soft), transparent 60%), var(--card); border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line)); box-shadow:var(--shadow-sm); }
.fg-gp-av{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-pill); display:grid; place-items:center; font-size:20px; background:var(--card); border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line)); box-shadow:0 0 0 4px var(--brand-soft); }
.fg-gp-main{ flex:1; min-width:0; }
.fg-gp-h{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:var(--s-3); display:flex; align-items:center; gap:6px; }
.fg-gp-list{ display:flex; flex-direction:column; gap:var(--s-2); }
.fg-gp-item{ display:flex; align-items:center; gap:var(--s-3); width:100%; text-align:left; padding:var(--s-3) var(--s-4); background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; font-size:13.5px; font-weight:500; color:var(--ink); transition:border-color .14s,background .14s; }
.fg-gp-item:hover{ border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); background:color-mix(in srgb,var(--brand) 5%,var(--card)); }
.fg-gp-item .e{ flex:0 0 auto; width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center; font-size:15px; background:var(--brand-soft); }
.fg-gp-item .t{ flex:1; min-width:0; line-height:1.35; }
.fg-gp-item em{ font-style:normal; color:var(--brand-ink); font-weight:900; transition:transform .14s; }
.fg-gp-item:hover em{ transform:translateX(3px); }

/* ---- WAT & HOE BORD (premium) ---- */
.fg-bouwboard{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.fg-bouw-head{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--card-2) 60%,var(--card)); }
.fg-bouw-title{ font-weight:800; font-size:15px; letter-spacing:-.01em; display:flex; align-items:baseline; gap:var(--s-2); }
.fg-bouw-sub{ font-weight:500; font-size:11.5px; color:var(--muted); }
.fg-bouw-counts{ margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:var(--s-2); }
.fg-bouw-counts b{ color:var(--brand-ink); font-weight:800; background:var(--brand-soft); border-radius:var(--r-pill); padding:2px 9px; }
.fg-bouw-counts .ok{ color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); border-radius:var(--r-pill); padding:2px 9px; font-weight:700; }
.fg-bouw-body{ flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; padding:var(--s-2) var(--s-4) var(--s-4); }
.fg-bouw-group{ margin-top:var(--s-3); }
.fg-bouw-ghead{ position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:var(--s-2); padding:var(--s-2) var(--s-1); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:color-mix(in srgb,var(--card) 90%,transparent); backdrop-filter:blur(6px); }
.fg-bouw-dot{ width:8px; height:8px; border-radius:50%; }
.fg-bouw-gc{ margin-left:auto; background:var(--card-2); color:var(--muted); border-radius:var(--r-pill); padding:1px 8px; font-size:10.5px; font-weight:700; }
.fg-bouw-item{ display:flex; align-items:flex-start; gap:var(--s-3); padding:var(--s-3); border-radius:var(--r-md); transition:background .12s; }
.fg-bouw-item:hover{ background:color-mix(in srgb,var(--brand) 6%,transparent); }
.fg-bouw-st{ flex:0 0 auto; width:22px; height:22px; border-radius:var(--r-sm); display:grid; place-items:center; font-size:12px; background:var(--card-2); }
.fg-bouw-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fg-bouw-tx b{ font-weight:600; font-size:13.5px; line-height:1.35; color:var(--ink); }
.fg-bouw-note{ font-size:11.5px; color:var(--muted); line-height:1.4; }
.fg-bouw-acts{ display:flex; gap:var(--s-1); flex:0 0 auto; opacity:0; transform:translateX(4px); transition:opacity .14s,transform .14s; }
.fg-bouw-item:hover .fg-bouw-acts, .fg-bouw-item:focus-within .fg-bouw-acts{ opacity:1; transform:none; }
.fg-bouw-mini{ border:1px solid var(--line); background:var(--card); border-radius:var(--r-pill); min-width:26px; height:26px; padding:0 8px; font-size:12.5px; cursor:pointer; transition:all .12s; }
.fg-bouw-mini:hover{ border-color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,transparent); }
.fg-bouw-mini.done:hover{ background:var(--ok); color:#fff; border-color:var(--ok); }
.fg-bouw-setup, .fg-bouw-empty{ padding:26px 18px; text-align:center; color:var(--muted); font-size:13.5px; }

/* ---- FICHE: schermvullend chrome, maar inhoud gecentreerd & begrensd ---- */
.fgf2-body{ max-width:var(--shell-max); margin-inline:auto; width:100%; }
#fgf2Panels .fgf2-panel{ max-width:660px; }
.fgf2-panels{ padding:var(--s-8) var(--s-10) var(--s-12); }
.fgf2-side{ padding:20px 14px; }
.fgf2-rail{ padding:20px 18px; gap:var(--s-4); }
.fgf2-tab{ display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border-radius:10px; border:0; background:transparent; color:var(--muted); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.fgf2-tab:hover{ background:color-mix(in srgb,var(--muted) 8%,transparent); color:var(--text); }
.fgf2-tab.on{ background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand-strong); font-weight:700; box-shadow:inset 3px 0 0 var(--brand); }
.fgf2-ph{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 20px; }
.fgf2-fld{ margin-bottom:18px; }

/* inputs — één premium standaard (fiche + fg-form) */
.fgf2-in, .fg-input{ width:100%; min-height:44px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--muted) 6%,var(--card)); color:var(--text); font:inherit; font-size:14px; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.fgf2-in::placeholder, .fg-input::placeholder{ color:color-mix(in srgb,var(--muted) 75%,transparent); }
.fgf2-in:hover, .fg-input:hover{ border-color:color-mix(in srgb,var(--muted) 40%,transparent); }
.fgf2-in:focus, .fg-input:focus{ outline:none; background:var(--card); border-color:var(--brand); box-shadow:var(--focus); }
.fgf2-in.ro{ background:color-mix(in srgb,var(--muted) 10%,transparent); color:var(--muted); cursor:default; border-style:dashed; }
.fgf2-in.attn{ border-color:color-mix(in srgb,var(--brand) 50%,transparent); background:color-mix(in srgb,var(--brand) 5%,var(--card)); }
textarea.fgf2-in{ resize:vertical; min-height:88px; line-height:1.5; }
.fgf2-sel, select.fgf2-in, select.fg-input{ appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }

/* sales-kaart premium + meter */
.fgf2-sales{ background:linear-gradient(160deg, color-mix(in srgb,var(--brand) 10%,var(--card)), var(--card)); border:1px solid color-mix(in srgb,var(--brand) 22%,transparent); border-radius:14px; padding:14px 15px; box-shadow:var(--shadow-sm); }
.fgf2-salesrow{ display:flex; align-items:center; gap:11px; margin-top:8px; }
.fgf2-salesava{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; font-weight:800; color:var(--on-brand); background:var(--brand-grad); }
.fgf2-salesag{ font-weight:800; font-size:14px; }
.fgf2-salesmeta{ font-size:11.5px; color:var(--muted); margin-top:6px; }
.fgf2-meter{ padding:14px 15px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow-sm); }
.fgf2-mtop b{ font-size:26px; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* ---- Popup-boxen: premium schaduw + backdrop overal ---- */
#fgWrOv, #fgMapOv, #fgFormOv, #fgHelpOv, .fgm-ov, .fggc-ov{ background:var(--backdrop) !important; backdrop-filter:blur(6px) saturate(1.05); }

/* ============================================================
   PREMIUM LAAG — build 495 (komt LAATST → wint).
   Globale laag (bollen weg + alle popups premium) + 4 zware schermen.
   ============================================================ */

/* ============================================================
   GLOBALE PREMIUM-LAAG — build 495
   Tilt ALLE popups + schermen tegelijk op via gedeelde klassen.
   1) GEEN gekleurde bollen meer — status wordt een fijn accent-staafje.
   2) Elke makeWindow-popup krijgt premium container-chroom (.fg-win).
   3) Popup-koppen (.fg-vhead / .fg-winhead) premium + rustige sluitknop.
   ============================================================ */

/* ---- 1. WEG met gekleurde bollen: ronde status-stippen → slank verticaal accent-staafje.
        De inline-kleur blijft behouden (kleurcodering blijft), maar het is geen bol meer. ---- */
.fg-statchip .dot,
.fg-loopchip .dot,
.fg-bouw-dot,
.fgradio-st .dot,
.fgf2-save .dot{
  width:3px !important; height:13px !important; border-radius:2px !important;
  box-shadow:none !important; animation:none !important; flex:none; opacity:.9;
}
.fg-loopchip .dot{ background:var(--brand) !important; }
.fgf2-save .dot{ background:var(--muted) !important; }
.fgf2-save .dot.ok{ background:var(--ok) !important; }
.fgf2-save .dot.busy{ background:var(--warn) !important; }
.fgf2-save .dot.err{ background:var(--danger) !important; }

/* Check Center: hou het premium linker-accent (::before), maar schrap de ronde status-bol. */
.fgcc-st{ display:none !important; }

/* Merk-logo (.fg-brand .dot met ⚡) en de middot-scheiding (·) zijn GEEN status-bol → met rust laten.
   Die hebben tekst-inhoud; de regels hierboven raken enkel de lege gekleurde stippen. */

/* ---- 2. Gedeelde popup-container: elke makeWindow-box wordt premium in één keer ---- */
.fg-win{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-xl) !important;
  box-shadow:var(--shadow-xl), var(--hairline-top) !important;
  overflow:hidden !important;
}
body.fg-dark .fg-win{ border-color:var(--line-strong) !important; }
/* de 8 rek-grepen mogen de ronde hoeken niet vierkant terugduwen */
.fg-win > .fgwin-rz{ z-index:5; }

/* ---- 3. Popup-kop: rustige premium titelbalk + zachte sluitknop ---- */
.fg-vhead, .fg-winhead{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card-2) 60%,var(--card)),var(--card));
  font-weight:var(--fw-h3);
}
.fg-vhead > b, .fg-winhead > b{ font-size:var(--fs-h3); letter-spacing:var(--ls-h3); }
/* sluitknoppen (✕/✕) → subtiel, geen zware knop */
.fg-vhead .fg-btn.sm, .fg-winhead .fg-btn.sm,
.fg-vhead button[id$="Close"], .fg-winhead button[id$="Close"]{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  color:var(--muted); width:32px; height:32px; padding:0; border-radius:var(--r-sm); font-size:15px;
}
.fg-vhead .fg-btn.sm:hover, .fg-winhead .fg-btn.sm:hover,
.fg-vhead button[id$="Close"]:hover, .fg-winhead button[id$="Close"]:hover{
  background:color-mix(in srgb,var(--muted) 14%,transparent) !important; color:var(--text);
}

/* ---------- HOME ---------- */
/* =====================================================================
   FastGroup — HOME (premium) — append to fg-ui.css
   Keyed only to real app selectors. Tokens come from fg-theme.css.
   ===================================================================== */
/* =====================================================================
   BUILD 688 — HET OPENINGSBLAD OPNIEUW GETEKEND
   ---------------------------------------------------------------------
   Patrick, 10/9/2026: "de openingspagina, wat een zooitje ... dit moet veel
   en veel beter in layout gebracht worden, maar advies daarover nooit verkregen."
   De diagnose was: dit blad had geen rangorde. Vier blokken vroegen tegelijk
   aandacht en geen enkel blok won. Erger nog, de GROOTTE loog: Sun Energy —
   waar niets draait — was het grootste vlak op het scherm, terwijl FastHelp met
   423 fiches even breed was als GP met 0. In een cockpit moet grootte iets
   betekenen.
   Nieuwe rangorde, van boven naar onder:
     1. HERO      — één regel groet, meer niet.
     2. WAT NU    — "GP fluistert", breed over de volle kolom. Dit is het enige
                    op dit blad waar je vanmorgen echt iets mee moet.
     3. DE MERKEN — vijf GELIJKE tegels op één rij. Gelijk qua vlak, verschillend
                    qua cijfer. Zo vergelijk je ze met één blik.
     4. WAT & HOE — de bouwlijst eronder. Dat is mijn werk, niet jouw ochtend.
   ===================================================================== */
.fg-home{ min-height:calc(100vh - 36px - 36px - 58px); display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto minmax(220px,1fr);
  grid-template-areas:"hero" "gp" "brands" "board";
  row-gap:var(--s-5); align-items:stretch; }
.fg-home>.fg-hero{ grid-area:hero; }
.fg-home>.fg-gp{ grid-area:gp; }
.fg-home>#fgBouwBoard, .fg-home>.fg-bouwboard{ grid-area:board; min-height:0; margin-top:0; }
/* vijf gelijke tegels op één rij — de grootte zegt niets, het cijfer wel */
.fg-home>.fg-brands{ grid-area:brands; display:grid; gap:var(--s-4); min-height:0;
  grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:auto; }
@media (max-width:1240px){ .fg-home>.fg-brands{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .fg-home>.fg-brands{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---- HERO ---- */
.fg-hero{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; padding:2px 2px var(--s-1); }
/* BUILD 689 — de groet was verlooptekst die BOVENAAN WIT begint. In de donkere stand
   ziet dat er mooi uit, in de lichte stand is de halve letter onzichtbaar. Een groet
   hoort gewoon leesbaar te zijn. */
.fg-hero-id .hi{ font-size:21px; font-weight:800; letter-spacing:-.025em; color:var(--ink);
  -webkit-text-fill-color:currentColor; }
.fg-hero-id .sub{ font-size:13px; color:var(--muted); margin-top:5px; display:flex; align-items:center; gap:10px; }
.fg-hero-id .sub .dot{ color:color-mix(in srgb,var(--muted) 45%,transparent); }
.fg-herosearch{ display:flex; align-items:center; gap:var(--s-3); }
.fg-homesearch{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:11px 18px; min-width:300px; max-width:440px; font-size:13.5px; color:var(--muted); cursor:text; box-shadow:var(--shadow-sm),var(--hairline-top); transition:border-color .16s,box-shadow .16s; }
.fg-homesearch:hover{ border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); box-shadow:var(--shadow-sm),0 0 0 4px var(--brand-soft); }
.fg-homesearch kbd{ margin-left:auto; font-size:11px; background:var(--card-2); border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--muted); }
.fg-help-btn{ height:42px; padding:0 15px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-sm),var(--hairline-top); }

/* ---- GP FLUISTERT ---- */
.fg-gp{ position:relative; display:flex; gap:var(--s-4); align-items:flex-start; padding:var(--s-5); border-radius:var(--r-lg);
  background:
    radial-gradient(150% 130% at 0% 0%, color-mix(in srgb,var(--brand) 15%,transparent), transparent 58%),
    var(--card-grad);
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line)); box-shadow:var(--shadow-sm),var(--hairline-top); }
.fg-gp-av{ flex:0 0 auto; width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center; font-size:21px;
  background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb,var(--brand) 30%,var(--card)), var(--card));
  border:1px solid color-mix(in srgb,var(--brand) 36%,var(--line));
  box-shadow:0 0 0 4px var(--brand-soft), inset 0 1px 0 rgba(255,255,255,.12); }
.fg-gp-main{ flex:1; min-width:0; }
.fg-gp-h{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:var(--s-3); display:flex; align-items:center; gap:7px; }
.fg-gp-h .fg-muted{ text-transform:none; letter-spacing:0; font-weight:500; }
.fg-gp-list{ display:flex; flex-direction:column; gap:var(--s-2); }
.fg-gp-item{ position:relative; display:flex; align-items:center; gap:var(--s-3); width:100%; text-align:left; padding:12px 14px;
  background:linear-gradient(180deg, color-mix(in srgb,#fff 3%,var(--card-2)), var(--card-2));
  border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; font-size:13.5px; font-weight:500; color:var(--ink);
  box-shadow:var(--shadow-xs); transition:transform .16s var(--ease), border-color .16s, box-shadow .16s, background .16s; }
.fg-gp-item:hover{ transform:translateX(3px); border-color:color-mix(in srgb,var(--brand) 42%,var(--line));
  box-shadow:var(--shadow-sm); background:linear-gradient(180deg, color-mix(in srgb,var(--brand) 8%,var(--card-2)), var(--card-2)); }
.fg-gp-item .e{ flex:0 0 auto; width:32px; height:32px; border-radius:var(--r-sm); display:grid; place-items:center; font-size:15px;
  background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb,var(--brand) 26%,transparent), var(--brand-soft));
  border:1px solid color-mix(in srgb,var(--brand) 24%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.fg-gp-item .t{ flex:1; min-width:0; line-height:1.35; }
.fg-gp-item em{ flex:0 0 auto; font-style:normal; color:var(--brand-ink); font-weight:900; font-size:16px; opacity:.7; transition:transform .16s, opacity .16s; }
.fg-gp-item:hover em{ transform:translateX(4px); opacity:1; }

/* ---- BRAND CARDS ---- */
.fg-brandcard{ position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:158px; padding:14px 15px 0; border-radius:var(--r-lg); cursor:pointer; isolation:isolate; text-align:left; font:inherit;
  background:
    radial-gradient(115% 95% at 100% 0%, color-mix(in srgb,var(--bc) 26%,transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb,var(--bc) 11%,var(--card)), var(--card) 78%);
  border:1px solid color-mix(in srgb,var(--bc) 30%,var(--line)); box-shadow:var(--shadow-sm),var(--hairline-top);
  transition:transform .18s var(--ease), box-shadow .2s, border-color .2s; }
.fg-brandcard::before{ content:""; position:absolute; left:0; top:15px; bottom:15px; width:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--bc),color-mix(in srgb,var(--bc) 35%,transparent)); box-shadow:0 0 14px color-mix(in srgb,var(--bc) 55%,transparent); }
.fg-brandcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md), 0 0 0 1px color-mix(in srgb,var(--bc) 32%,transparent);
  border-color:color-mix(in srgb,var(--bc) 52%,var(--line)); }
.fg-brandcard:hover .fg-bc-masc{ transform:translateY(-2px) scale(1.03); }
.fg-brandcard:focus-visible{ outline:none; box-shadow:var(--focus); }
/* mascotte niche — fills the right, glowing, anchored to baseline */
.fg-bc-masc{ position:absolute; right:-2px; bottom:0; width:clamp(48px,30%,64px); height:auto; max-height:58%; object-fit:contain; object-position:bottom right; opacity:.9; pointer-events:none; z-index:0;
  filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--bc) 42%,transparent));
  transition:transform .22s var(--ease); }
/* top row: emoji chip · name · delta */
/* build 689 — de mascotte zit rechtsboven, dus de naam krijgt daar ruimte.
   Zonder deze marge liep "GP Consultancy" onder de mascotte door. */
.fg-bc-top{ position:relative; z-index:1; display:flex; align-items:center; gap:9px; padding-right:56px; min-height:30px; }
.fg-brandcard .bemoji{ width:26px; height:26px; border-radius:9px; display:grid; place-items:center; font-size:16px; line-height:1;
  background:color-mix(in srgb,var(--bc) 22%,transparent); border:1px solid color-mix(in srgb,var(--bc) 36%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.fg-brandcard .bname{ font-weight:800; font-size:13.5px; letter-spacing:-.01em; color:var(--ink); }
.fg-bc-delta{ margin-left:auto; font-size:11px; font-weight:800; padding:3px 9px; border-radius:var(--r-pill); letter-spacing:-.01em; z-index:1; }
.fg-bc-delta.up{ color:#5fe08a; background:color-mix(in srgb,var(--ok) 18%,transparent); border:1px solid color-mix(in srgb,var(--ok) 26%,transparent); }
.fg-bc-delta.down{ color:#ff8f92; background:color-mix(in srgb,var(--danger) 16%,transparent); border:1px solid color-mix(in srgb,var(--danger) 26%,transparent); }
.fg-bc-delta.flat{ color:var(--muted); background:color-mix(in srgb,var(--muted) 14%,transparent); border:1px solid var(--line); }
/* number sits directly under header — no void */
.fg-bc-bot{ position:relative; z-index:1; margin-top:10px; }
/* build 688 — het cijfer stond op #fff, dus in de lichte stand wit op wit.
   Nu de gewone tekstkleur: leesbaar in beide standen. */
.fg-brandcard .bnum{ font-size:34px; font-weight:900; letter-spacing:-.035em; line-height:.92; color:var(--ink); font-variant-numeric:tabular-nums;
  text-shadow:0 2px 10px color-mix(in srgb,var(--bc) 22%,transparent); }
.fg-brandcard .blbl{ font-size:12px; font-weight:600; color:var(--muted); margin-top:5px; max-width:60%; }
/* sparkline baseline anchors the card */
.fg-bc-spark{ position:relative; z-index:1; display:block; width:calc(100% + 30px); margin:auto -15px 0; height:30px; opacity:.85; }

/* ---- WAT & HOE BORD ---- */
.fg-bouwboard{ display:flex; flex-direction:column; background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm),var(--hairline-top); overflow:hidden; }
.fg-bouw-head{ display:flex; align-items:center; gap:var(--s-3); padding:15px 20px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, color-mix(in srgb,var(--card-2) 80%,var(--card)), color-mix(in srgb,var(--card-2) 40%,var(--card))); }
.fg-bouw-title{ font-weight:800; font-size:15px; letter-spacing:-.01em; display:flex; align-items:baseline; gap:var(--s-2); }
.fg-bouw-sub{ font-weight:500; font-size:11.5px; color:var(--muted); }
.fg-bouw-counts{ margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:var(--s-2); }
.fg-bouw-counts b{ color:var(--brand-ink); font-weight:800; background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 24%,transparent); border-radius:var(--r-pill); padding:2px 10px; }
.fg-bouw-counts .ok{ color:#5fe08a; background:color-mix(in srgb,var(--ok) 16%,transparent); border:1px solid color-mix(in srgb,var(--ok) 26%,transparent); border-radius:var(--r-pill); padding:2px 10px; font-weight:700; }
.fg-bouw-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:var(--s-2) var(--s-4) var(--s-4); }
.fg-bouw-group{ margin-top:var(--s-3); }
.fg-bouw-ghead{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:var(--s-2); padding:10px var(--s-1) 8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:linear-gradient(180deg, var(--card) 60%, transparent); backdrop-filter:blur(6px); }
.fg-bouw-dot{ width:8px; height:8px; border-radius:50%; box-shadow:0 0 0 3px color-mix(in srgb,var(--muted) 12%,transparent); }
.fg-bouw-gc{ margin-left:auto; background:var(--card-3); color:var(--muted); border-radius:var(--r-pill); padding:1px 9px; font-size:10.5px; font-weight:700; }
.fg-bouw-item{ display:flex; align-items:flex-start; gap:var(--s-3); padding:11px 12px; border-radius:var(--r-md); transition:background .14s, box-shadow .14s; }
.fg-bouw-item:hover{ background:color-mix(in srgb,var(--brand) 7%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 14%,transparent); }
.fg-bouw-st{ flex:0 0 auto; width:24px; height:24px; border-radius:var(--r-sm); display:grid; place-items:center; font-size:12px; background:var(--card-3); border:1px solid var(--line); }
.fg-bouw-st.busy{ background:color-mix(in srgb,var(--warn) 20%,transparent); border-color:color-mix(in srgb,var(--warn) 32%,transparent); }
.fg-bouw-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fg-bouw-tx b{ font-weight:600; font-size:13.5px; line-height:1.35; color:var(--ink); }
.fg-bouw-note{ font-size:11.5px; color:var(--muted); line-height:1.4; }
.fg-bouw-acts{ display:flex; gap:var(--s-1); flex:0 0 auto; opacity:0; transform:translateX(4px); transition:opacity .16s,transform .16s; }
.fg-bouw-item:hover .fg-bouw-acts, .fg-bouw-item:focus-within .fg-bouw-acts{ opacity:1; transform:none; }
.fg-bouw-mini{ border:1px solid var(--line); background:var(--card); border-radius:var(--r-pill); min-width:28px; height:28px; padding:0 9px; font-size:12.5px; cursor:pointer; color:var(--ink); transition:all .12s; }
.fg-bouw-mini:hover{ border-color:var(--warn); background:color-mix(in srgb,var(--warn) 16%,transparent); }
.fg-bouw-mini.done:hover{ background:var(--ok); color:#fff; border-color:var(--ok); }
/* leeg / setup — nette rustige toestand i.p.v. een lege doos */
.fg-bouw-empty, .fg-bouw-setup{ padding:22px 20px; margin:var(--s-2); font-size:13px; color:var(--muted); text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb,#fff 3%,var(--card-2)), var(--card-2));
  border:1px dashed var(--line-strong); border-radius:var(--r-md); }
/* Compacte knop — past zich aan de inhoud aan (icoon OF label). NOOIT een vaste
   32x32 doos meer: dat verpletterde gelabelde knoppen (Valideren/GPT/Gemini liepen over elkaar). */
.fg-btn.sm{ min-width:32px; height:auto; min-height:32px; padding:7px 11px; border-radius:9px; border:1px solid var(--line); background:var(--card-2); color:var(--ink); font-size:12.5px; line-height:1.1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; transition:all .14s var(--ease); box-shadow:var(--shadow-xs); }
/* Enkel écht icoon-only knoppen (één teken, geen tekst) blijven een net vierkant. */
.fg-btn.sm.ico, .fg-btn.sm.icon{ width:32px; padding:0; }
.fg-btn.sm:hover{ color:var(--brand-ink); border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); background:var(--brand-soft); transform:translateY(-1px); }

/* ---------- FICHE ---------- */
/* =========================================================
   FastGroup — PREMIUM FICHE CSS  (build 482)
   Keyed ONLY to the real .fgf2-* selectors that fg-fiche.js emits
   (plus the semantic invite-pill state classes). Tokens live in
   fg-theme.css — this file consumes them, never redefines them.
   ========================================================= */

/* ---- FULL-SCREEN SHELL ---- */
.fgf2-ov{ position:fixed; inset:0; z-index:100; background:rgba(6,10,18,.5); backdrop-filter:blur(6px); }
.fgf2-box{
  position:fixed; inset:0; display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 520px at 82% -8%, color-mix(in srgb,var(--brand) 7%,transparent), transparent 60%),
    var(--bg);
  overflow:hidden;
}
.fgf2-load{ margin:auto; padding:40px; font-size:14px; }

/* ---- HEADER ---- */
.fgf2-head{
  display:flex; align-items:flex-start; gap:16px;
  padding:22px clamp(24px,4vw,56px);
  border-bottom:1px solid var(--line); flex:none; cursor:move; position:relative;
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 70%,transparent), transparent);
}
.fgf2-head::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--brand) 55%,transparent) 30%, color-mix(in srgb,var(--sales) 50%,transparent) 70%, transparent); }
.fgf2-ava{
  width:56px; height:56px; border-radius:16px; flex:none;
  display:grid; place-items:center; font-weight:800; font-size:21px; color:var(--on-brand);
  background:linear-gradient(140deg,var(--brand),var(--brand-strong));
  box-shadow:var(--glow-brand), inset 0 1px 0 rgba(255,255,255,.3);
  margin-top:2px;
}
.fgf2-hl{ flex:1; min-width:0; }
.fgf2-name{
  font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--ink);
  display:inline-block; vertical-align:middle; max-width:56%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fgf2-pill{
  display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
  margin-left:12px; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px;
  background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);
}
.fgf2-meta{ font-size:13px; color:var(--muted); margin-top:6px; }
.fgf2-act{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.fgf2-apill{
  font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb,var(--muted) 14%,transparent);
  border:1px solid var(--line); color:var(--text);
}
.fgf2-apill b{ font-weight:700; }
/* semantic pill colors by meaning */
.fgf2-apill.sent{ background:color-mix(in srgb,#3b82f6 16%,transparent); border-color:color-mix(in srgb,#3b82f6 38%,transparent); }
.fgf2-apill.delivered{ background:color-mix(in srgb,#8b5cf6 16%,transparent); border-color:color-mix(in srgb,#8b5cf6 38%,transparent); }
.fgf2-apill.opened{ background:color-mix(in srgb,var(--ok) 16%,transparent); border-color:color-mix(in srgb,var(--ok) 38%,transparent); }
.fgf2-apill.clicked{ background:color-mix(in srgb,var(--brand) 18%,transparent); border-color:color-mix(in srgb,var(--brand) 42%,transparent); }
.fgf2-apill.bounced{ background:color-mix(in srgb,var(--warn) 16%,transparent); border-color:color-mix(in srgb,var(--warn) 40%,transparent); color:var(--warn); }
.fgf2-apill.declined{ background:color-mix(in srgb,var(--danger) 15%,transparent); border-color:color-mix(in srgb,var(--danger) 40%,transparent); color:var(--danger); }
.fgf2-apill.sales{ background:color-mix(in srgb,var(--sales) 18%,transparent); border:1px solid color-mix(in srgb,var(--sales) 45%,transparent); }

.fgf2-hr{ display:flex; align-items:center; gap:12px; flex:none; margin-top:6px; }
.fgf2-nav{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.fgf2-navb{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--card-2); color:inherit; cursor:pointer; }
.fgf2-navb:disabled{ opacity:.4; cursor:default; }
.fgf2-save{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.fgf2-save .dot{ width:8px; height:8px; border-radius:99px; background:var(--muted); }
.fgf2-save .dot.ok{ background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent); }
.fgf2-save .dot.busy{ background:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent); }
.fgf2-save .dot.err{ background:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 22%,transparent); }

/* ---- BUTTONS ---- */
.fgf2-btn{
  border:1px solid var(--line); background:var(--card-2); color:var(--text);
  border-radius:var(--r-sm); padding:10px 15px; font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap; box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.fgf2-btn:hover{ transform:translateY(-1px); border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.fgf2-btn:active{ transform:translateY(1px) scale(.99); }
.fgf2-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); }
.fgf2-btn.brand:hover{ filter:brightness(1.06); }
.fgf2-btn.ghost{ padding:10px 12px; background:transparent; }
.fgf2-btn.soft{ background:color-mix(in srgb,var(--muted) 12%,transparent); }
.fgf2-btn.soft.danger{ color:var(--danger); }
.fgf2-btn.wide{ width:100%; }

/* ---- BODY GRID: centered content column ---- */
.fgf2-body{ display:grid; grid-template-columns:236px minmax(0,1fr) 300px; flex:1; min-height:0; }
.fgf2-side{ border-right:1px solid var(--line); padding:24px 16px; display:flex; flex-direction:column; gap:4px; overflow:auto; }
.fgf2-panels{ overflow:auto; padding:40px; display:flex; justify-content:center; }
#fgf2Panels .fgf2-panel{ width:100%; max-width:660px; }
.fgf2-rail{ border-left:1px solid var(--line); padding:24px 20px; overflow:auto; display:flex; flex-direction:column; gap:18px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--card-2) 40%,transparent), transparent); }

/* ---- TABS ---- */
.fgf2-tab{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:11px 13px; border-radius:11px;
  border:0; background:transparent; color:var(--muted); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.fgf2-tab:hover{ background:color-mix(in srgb,var(--muted) 8%,transparent); color:var(--text); }
.fgf2-tab.on{ background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand-ink); font-weight:700; box-shadow:inset 3px 0 0 var(--brand); }
.fgf2-tico{ width:20px; text-align:center; font-size:15px; }
.fgf2-tick{ margin-left:auto; opacity:0; color:var(--ok); font-weight:900; }
.fgf2-tick.on{ opacity:1; }

/* ---- METER ---- */
.fgf2-meter{ margin-top:auto; padding:18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); box-shadow:var(--shadow-sm); }
.fgf2-mtop{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--muted); margin-bottom:10px; }
.fgf2-mtop b{ font-size:30px; font-weight:900; letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff,var(--brand)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fgf2-bar{ height:9px; border-radius:99px; background:color-mix(in srgb,var(--muted) 22%,transparent); overflow:hidden; }
.fgf2-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand),#ffd08a); box-shadow:0 0 12px -1px color-mix(in srgb,var(--brand) 60%,transparent); transition:width .4s var(--ease); }
.fgf2-miss{ font-size:11.5px; color:var(--muted); margin-top:10px; line-height:1.5; }
.fgf2-miss .bad{ color:var(--warn); font-weight:700; }
.fgf2-miss .ok{ color:#4ade80; font-weight:700; }

/* ---- PANELS / FIELDS ---- */
.fgf2-panel{ display:none; }
.fgf2-panel.on{ display:block; }
.fgf2-ph{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 22px; padding-bottom:14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; }
.fgf2-ph::before{ content:""; width:14px; height:2px; border-radius:2px; background:var(--brand-grad); }
.fgf2-fld{ display:block; margin-bottom:18px; }
.fgf2-lbl{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.fgf2-in{
  width:100%; min-height:44px; padding:11px 14px; border-radius:11px; border:1px solid var(--line);
  background:color-mix(in srgb,var(--muted) 7%,var(--card)); color:var(--text); font:inherit; font-size:14px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fgf2-in::placeholder{ color:color-mix(in srgb,var(--muted) 70%,transparent); }
.fgf2-in:hover{ border-color:color-mix(in srgb,var(--muted) 38%,transparent); }
.fgf2-in:focus{ outline:none; background:var(--card); border-color:var(--brand); box-shadow:var(--focus); }
.fgf2-in.attn{ border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 6%,var(--card)); }
.fgf2-in.ro{ color:var(--muted); cursor:default; background:color-mix(in srgb,var(--muted) 10%,transparent); }
textarea.fgf2-in{ resize:vertical; min-height:92px; line-height:1.5; }
.fgf2-sel{ appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2393a1b5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; }
.fgf2-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.fgf2-row2{ display:flex; gap:9px; } .fgf2-row2 .fgf2-in{ flex:1; }
.fgf2-mini{ width:44px; flex:none; border:1px solid var(--line); border-radius:11px; background:var(--card-2); color:inherit; cursor:pointer; font-weight:800; }
.fgf2-bnr{ font-size:12.5px; font-weight:700; padding:10px 13px; border-radius:11px; margin-bottom:16px; }
.fgf2-bnr.ok{ background:color-mix(in srgb,var(--ok) 14%,transparent); color:#4ade80; border:1px solid color-mix(in srgb,var(--ok) 34%,transparent); }
.fgf2-bnr.warn{ background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 34%,transparent); }

/* trade-name suggestion line */
.fgf2-sug{ font-size:12.5px; color:var(--muted); margin:-8px 0 18px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.fgf2-sug b{ color:var(--text); }

/* extra e-mail / WhatsApp repeatable rows */
.fgf2-rows{ display:flex; flex-direction:column; gap:8px; }
.fgf2-exrow{ display:flex; gap:9px; align-items:center; }
.fgf2-exrow .fgf2-in{ flex:1; }
.fgf2-exdel{ width:38px; flex:none; align-self:stretch; border:1px solid var(--line); border-radius:11px; background:var(--card-2); color:var(--muted); cursor:pointer; font-size:13px; }
.fgf2-exdel:hover{ color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent); }
.fgf2-addrow{ margin-top:8px; border:1px dashed var(--line-strong); background:transparent; color:var(--muted); border-radius:11px; padding:8px 13px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.fgf2-addrow:hover{ color:var(--brand-ink); border-color:color-mix(in srgb,var(--brand) 45%,transparent); }

/* contact-person cards */
.fgf2-person{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:9px; margin-bottom:11px; padding:12px; border:1px solid var(--line); border-radius:var(--r-md); background:color-mix(in srgb,var(--card-2) 55%,transparent); }
.fgf2-person .fgf2-in{ min-height:40px; }

/* ---- SALES CARD (prominent, top of rail) ---- */
.fgf2-sales{
  background:linear-gradient(158deg, color-mix(in srgb,var(--sales) 26%,var(--card)), var(--card) 72%);
  border:1px solid color-mix(in srgb,var(--sales) 45%,transparent);
  border-radius:var(--r-md); padding:16px 17px; box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
}
.fgf2-sales::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); pointer-events:none; }
.fgf2-sales::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#22d3ee,var(--sales)); }
.fgf2-bh{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.fgf2-sales .fgf2-bh{ color:color-mix(in srgb,#67e8f9 80%,#fff); margin-bottom:12px; }
.fgf2-salesrow{ display:flex; align-items:center; gap:12px; }
.fgf2-salesava{ width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff;
  background:linear-gradient(140deg,#22b8cf,var(--sales)); box-shadow:0 4px 14px -2px color-mix(in srgb,var(--sales) 60%,transparent); }
.fgf2-salesag{ font-weight:800; font-size:15.5px; letter-spacing:-.01em; }
.fgf2-salesmeta{ font-size:11.5px; color:var(--muted); margin-top:8px; }
.fgf2-salesnote{ font-size:12px; color:var(--text); margin-top:9px; padding:8px 11px; border-radius:10px; background:color-mix(in srgb,var(--muted) 10%,transparent); border:1px solid var(--line); }

/* ---- MANAGE / TIP / FUNNEL ---- */
.fgf2-tip{ }
.fgf2-beheer{ display:flex; flex-direction:column; gap:9px; }
.fgf2-funnel{ padding:16px 17px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); box-shadow:var(--shadow-sm); }
.fgf2-fh{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.fgf2-fstep{ display:flex; align-items:center; gap:12px; font-size:12.5px; padding:5px 0; color:var(--muted); position:relative; }
.fgf2-fstep:not(:last-child)::before{ content:""; position:absolute; left:11px; top:26px; bottom:-5px; width:2px; background:color-mix(in srgb,var(--muted) 18%,transparent); }
.fgf2-fstep.done:not(:last-child)::before{ background:color-mix(in srgb,var(--ok) 32%,transparent); }
.fgf2-fstep span{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; flex:none; z-index:1;
  background:color-mix(in srgb,var(--muted) 14%,transparent); }
.fgf2-fstep.done{ color:var(--text); }
.fgf2-fstep.done span{ background:color-mix(in srgb,var(--ok) 22%,transparent); }
.fgf2-fstep.now{ color:var(--brand-ink); font-weight:700; }
.fgf2-fstep.now span{ background:var(--brand-grad); color:#fff; box-shadow:var(--glow-brand); }

/* ---- LOGS TAB ---- */
.fgf2-logs{ display:flex; flex-direction:column; gap:2px; }
.fgf2-log{ display:grid; grid-template-columns:130px 1fr auto; gap:12px; align-items:baseline; padding:9px 2px; border-bottom:1px solid var(--line); font-size:12.5px; }
.fgf2-lt{ font-weight:700; color:var(--text); }
.fgf2-ld{ color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; }
.fgf2-lm{ color:var(--slate); font-size:11.5px; white-space:nowrap; }

/* ---- FOOT ---- */
.fgf2-foot{ padding:12px clamp(24px,4vw,56px); border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); flex:none; background:color-mix(in srgb,var(--surface) 40%,transparent); }
/* 14/10/2026 - HET WITTE BLOK BIJ WISE 11.
   Een afdeling ZONDER mascotte krijgt van mascThumb() geen <img> maar een <span> met het
   teken erin. Die span erfde hier het kadertje van een foto: 22x22 met background
   var(--card-3) en een rand - in de lichte modus dus een wit blokje naast WISE 11{ background:transparent; border:0; box-shadow:none; }

/* ============================================================
   14/10/2026 - HERZIEN NA DRIE TERECHTE OPMERKINGEN VAN PATRICK.
   1. "kan op de witte achtergrond zwarte tekst gebruikt worden" - ja. De lijst
      stond op een blauwgrijze inkt; dat is nu echt zwart (#0B1220) voor afzender, en dat staat al in
      public.tegels (kleur, kleur2, kleur_donker, kleur_licht) en komt via het
      gegenereerde fg-kleuren.css als var(--brand) in het blad. Elke hardgezette
      oranje is weg; het accent is nu var(--brand), dus elke afdeling haar eigen.
   4. "nieuwe email is veel te donker, mag een lichtgrijze popup zijn" - gedaan.
   LET OP, en dit is nog niet af: de DONKERE toon van de rail staat hier nog als
   een vaste waarde (#111827 - dat is toevallig exact wise11.kleur_donker, en
   fasthelp/fastmovers staan op #0f172a, bijna hetzelfde). Om die ook per afdeling
   uit het register te halen moet het blad weten welke afdeling actief is; dat is
   een aparte stap en ik doe ze pas als Patrick het zegt.
   ============================================================
   TWEEKLEURIG, ZOALS TEAMLEADER. ALLEEN DE INBOX.
   Patrick, na het bekijken van Teamleader: "ik wil naar een tweeledige software
   met kleuren, met donker en licht gecombineerd". Niet twee standen waartussen je
   wisselt, maar EEN scherm met twee zones:
     - DONKER het omhulsel: de kop van de inbox en de rail met de postbussen.
     - LICHT het werkvlak: de berichtenlijst en het leesvenster.
     - ORANJE #D9861E als enige accent: waar je staat, en wat ongelezen is.
   Dat lost meteen op waarom de lichte stand zo rammelde: de app was als een donkere
   laag gebouwd en licht was daar een omkering van. Hier hoeft niets om te keren.
   De kleuren komen uit ref_v2_token in Supabase (donker-grond, donker-blad, ...){
  --v2-donker:#141C2B; --v2-donker-blad:#1B2434; --v2-donker-rand:rgba(255,255,255,.08);
  --v2-donker-inkt:#E6ECF5; --v2-donker-zacht:#94A3B8;
  --v2-donker-hover:rgba(255,255,255,.06); --v2-donker-actief:rgba(217,134,30,.18);
  --v2-grond:#F2F4F7; --v2-blad:#FFFFFF; --v2-rand:#E3E8EF;
  --v2-inkt:#1A2231; --v2-inkt-zacht:#65728A;
  --v2-accent:#D9861E; --v2-accent-zacht:#FDF3E6;
}
/* 16/10/2026 - gelezen mag rustiger staan dan ongelezen, maar moet LEESBAAR
   blijven. De zachte V2-inkt haalt 5,0 contrast op het witte blad; het oude
   grijs haalde 2,18. Het adres achter de naam volgt dezelfde regel{ color:var(--v2-inkt-zacht); }

/* ---- herziening 14/10/2026{
  --v2-accent: var(--brand);
  --v2-accent-zacht: color-mix(in srgb, var(--brand) 12%, #ffffff);
  --v2-inkt:#0B1220;
}
/* de kop van de LIJST hoort bij het lichte werkvlak{ background:var(--v2-grond); color:var(--v2-inkt);
  border-bottom:1px solid var(--v2-rand); border-right:0; }

/* 14/10/2026 - "nieuwe email is veel en veel te donker, dat mag bv een lichtgrijze
   popup zijn". Het opstelvenster stond in het donkere blad; nu lichtgrijs met witte
   velden en zwarte tekst{ background:#F2F4F7; color:#0B1220; border:1px solid #E3E8EF; }
#fgMailOv .fg-input,
#fgMailOv input,
#fgMailOv textarea,
#fgMailOv [contenteditable]{ background:#FFFFFF; color:#0B1220; border:1px solid #E3E8EF; }
#fgMailOv .fg-btn{ background:#FFFFFF; color:#0B1220; border:1px solid #E3E8EF; }
#fgMailOv .fg-btn.brand{ background:var(--brand-grad); color:#fff; border:0; }

/* stille "ghost" verwijder-knop — verborgen tot hover{position:absolute;right:16px;top:50%;transform:translateY(-50%) scale(.9);
  width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(4px);
  color:var(--muted);font-size:13px;cursor:pointer;display:grid;place-items:center;
  opacity:1;pointer-events:auto;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}

/* Opkuis-rij: 2 actieknoppen i.p.v. datum{grid-template-columns:34px 176px 1fr auto}

/* =================================================================
   (B) LEVERANCIERS / SUPPLIERS  —  .fg-*
   ================================================================= */
/* filter-chips als premium pillen */
.fg-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.fg-statchip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit;
  padding:7px 14px 7px 11px;border-radius:var(--r-pill);
  background:var(--card-2);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:560;
  transition:all var(--dur) var(--ease)}
.fg-statchip:hover{border-color:var(--line-strong);color:var(--ink);transform:translateY(-1px)}
.fg-statchip .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.fg-statchip .n{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.fg-statchip .lbl{font-weight:500}
.fg-statchip.on{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 45%,transparent);
  color:var(--ink);box-shadow:0 2px 10px -3px color-mix(in srgb,var(--brand) 55%,transparent)}
.fg-statchip.on .n{color:var(--brand-ink)}
.fg-morechip{color:var(--slate);font-weight:600}

.fg-search{display:flex;align-items:center;gap:9px;margin-bottom:16px;color:var(--muted);
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 15px;font-size:13.5px}
.fg-search kbd{margin-left:auto;font:inherit;font-size:11px;color:var(--slate);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;padding:2px 7px}

.fg-listhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:0 2px}
.fg-listtitle{font-size:15px;font-weight:640;letter-spacing:-.006em}
.fg-count{font-size:12.5px;color:var(--muted);font-weight:560;
  background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:3px 11px;white-space:nowrap}

.fg-table{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.fg-tr{display:grid;align-items:center;gap:16px;padding:0 20px;
  grid-template-columns:2.4fr 1.2fr 1.4fr .9fr 1.1fr}
.fg-thead{height:42px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
.fg-th{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.fg-row{height:56px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  cursor:pointer;position:relative;transition:background var(--dur-fast) var(--ease)}
.fg-row:last-child{border-bottom:0}
.fg-row:hover{background:rgba(255,255,255,.028)}
.fg-name{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-size:13px;color:var(--muted);
  letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* voortgangsmeter — vaste breedte zodat het als datameter leest, niet als vulbalk */
.fg-prog2{height:6px;max-width:130px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;position:relative;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.35)}
.fg-prog2 span{display:block;height:100%;border-radius:999px;transition:width var(--dur) var(--ease);
  box-shadow:0 0 6px -2px color-mix(in srgb,currentColor 50%,transparent)}

/* status-badge — ÉÉN pil-taal, semantisch gekleurd via de 3 echte klassen.
   Labeltekst draagt al een emoji (✅ 🖱️ 👁️ 📨 ✍️ 🟢 …) → geen extra dot. */
.fg-ev{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;letter-spacing:.005em;white-space:nowrap;line-height:1;
  border:1px solid var(--line);background:var(--card-2);color:var(--muted)}
.fg-ev.klik{color:#5fd39a;background:color-mix(in srgb,#16a34a 15%,transparent);border-color:color-mix(in srgb,#16a34a 32%,transparent)}   /* aangemeld / geklikt / klaar */
.fg-ev.open{color:#7fb4ff;background:color-mix(in srgb,#3b82f6 15%,transparent);border-color:color-mix(in srgb,#3b82f6 32%,transparent)}   /* geopend */
.fg-ev.afg{color:var(--muted);background:var(--card-2);border-color:var(--line-strong)}                                              /* verstuurd / afgeleverd / aanvullen / bounced / on-hold / declined */

/* ---------- SOCIAL + CHECK CENTER ---------- */
/* ============================================================
   FastGroup — Social + Check Center (premium tegels)
   Hoort thuis in fg-ui.css. Uitsluitend token-gebaseerd (fg-theme).
   Gekoppeld aan de ECHTE selectoren die fg-social.js en
   fg-checkcenter.js uitzenden (.fg-soc-*, .fgcc-*, .section-label).
   ============================================================ */

.section-label{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   SOCIAL — premium
   ============================================================ */
/* header-toolbar: titel links, Content-advies rechts (NIET zwevend) */
.fg-soc-toolbar{display:flex;align-items:center;gap:var(--s-4);margin:0 0 var(--s-5);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--line)}
.fg-soc-toolbar .ttl{display:flex;flex-direction:column;gap:2px;margin-right:auto}
.fg-soc-toolbar .ttl h1{font-size:26px;font-weight:640;letter-spacing:-.018em;margin:0}
.fg-soc-toolbar .ttl small{font-size:13px;color:var(--muted)}

/* weekdoel */
.fg-soc-goal{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;margin:0 0 var(--s-4);box-shadow:var(--shadow-sm),var(--hairline-top)}
.fg-soc-goalhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.fg-soc-goalhead b{font-size:14.5px;font-weight:600}
.fg-soc-goalbar{height:9px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.fg-soc-goalbar i{display:block;height:100%;border-radius:inherit;background:var(--brand-grad);
  box-shadow:0 0 14px -2px color-mix(in srgb,var(--brand) 60%,transparent)}

/* stat-tegels: totaal + per kanaal met delta + sparkline */
.fg-soc-sum{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3);margin:0 0 var(--s-3)}
.fg-soc-sc{position:relative;background:var(--card-grad);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 15px 13px;box-shadow:var(--shadow-sm),var(--hairline-top);overflow:hidden;
  transition:transform .16s,box-shadow .2s,border-color .2s}
.fg-soc-sc:hover{transform:translateY(-2px);box-shadow:var(--shadow-md),var(--hairline-top);border-color:var(--line-strong)}
.fg-soc-sc b{display:block;font-size:24px;font-weight:680;letter-spacing:-.02em;line-height:1.1}
.fg-soc-sc span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:500}
.fg-soc-sc.big{border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.fg-soc-sc.big::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 100% 0,color-mix(in srgb,var(--brand) 12%,transparent),transparent 55%);pointer-events:none}
.fg-soc-sc.big b{font-size:30px}
.fg-soc-sc.big .chip{position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--brand-soft);color:var(--brand-ink)}
.fg-soc-sc .spark{display:block;margin-top:8px;width:100%;height:22px}
.fg-soc-sc .d{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;margin-top:6px;
  padding:2px 7px;border-radius:var(--r-pill)}
.fg-soc-sc .d.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}
.fg-soc-sc .d.down{color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent)}
.fg-soc-sc .d.flat{color:var(--muted);background:color-mix(in srgb,var(--ink) 8%,transparent)}

/* note */
.fg-soc-note{font-size:12px;color:var(--muted);margin:8px 2px var(--s-6);display:flex;align-items:center;gap:7px}

/* kanaalkaarten */
.fg-soc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.fg-soc-card{position:relative;background:var(--card-grad);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--shadow-sm),var(--hairline-top);overflow:hidden;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .22s,border-color .22s}
.fg-soc-card.clickable{cursor:pointer}
.fg-soc-card.clickable:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg),var(--hairline-top);border-color:var(--line-strong)}
.fg-soc-chhead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fg-soc-ic{width:44px;height:44px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:21px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px -3px rgba(0,0,0,.6)}
.fg-soc-chname{font-size:15px;font-weight:640;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.fg-soc-chsub{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-soc-soon{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 15%,transparent);padding:2px 7px;border-radius:var(--r-pill)}
.fg-soc-chhead .fg-btn{margin-left:auto}
.fg-soc-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.fg-soc-big b{font-size:32px;font-weight:680;letter-spacing:-.022em;line-height:1}
.fg-soc-big em{font-style:normal;font-size:13px;color:var(--muted)}
.fg-soc-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill)}
.fg-soc-badge.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}
.fg-soc-badge.down{color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent)}
.fg-soc-badge.flat{color:var(--muted);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.fg-soc-badge.new{color:var(--brand-ink);background:var(--brand-soft)}
.fg-soc-minis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}
.fg-soc-mini{display:flex;flex-direction:column;gap:1px}
.fg-soc-mini b{font-size:15px;font-weight:620}
.fg-soc-mini span{font-size:10.5px;color:var(--muted)}
.fg-soc-empty{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:4px}

/* ============================================================
   CHECK CENTER — loop-status tegels (.fgcc-tiles / .fgcc-tile)
   ============================================================ */
.fgcc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-3)}
.fgcc-tile{position:relative;text-align:left;background:var(--card-grad);border:1px solid var(--line);
  border-radius:var(--r-md);padding:15px 16px 14px;cursor:pointer;color:var(--ink);overflow:hidden;font-family:inherit;
  box-shadow:var(--shadow-sm),var(--hairline-top);
  transition:transform .16s,box-shadow .2s,border-color .2s}
.fgcc-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md),var(--hairline-top);border-color:var(--line-strong)}
/* status-accentstrip (directe scan) */
.fgcc-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.fgcc-tile.s-ok::before{background:linear-gradient(180deg,var(--ok),color-mix(in srgb,var(--ok) 40%,transparent))}
.fgcc-tile.s-warn::before{background:linear-gradient(180deg,var(--warn),color-mix(in srgb,var(--warn) 40%,transparent))}
.fgcc-tile.s-danger::before{background:linear-gradient(180deg,var(--danger),color-mix(in srgb,var(--danger) 40%,transparent))}
.fgcc-tile.s-idle::before{background:linear-gradient(180deg,var(--slate),color-mix(in srgb,var(--slate) 40%,transparent))}
/* zachte status-hoekgloed (zelfde diepte-taal als de hero-stat) */
.fgcc-tile::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5}
.fgcc-tile.s-ok::after{background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--ok) 10%,transparent),transparent 55%)}
.fgcc-tile.s-warn::after{background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--warn) 12%,transparent),transparent 55%)}
.fgcc-tile.s-danger::after{background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--danger) 13%,transparent),transparent 55%)}
.fgcc-tile.s-idle::after{background:none}
.fgcc-thead,.fgcc-tile .rt,.fgcc-trk{position:relative;z-index:1}
.fgcc-thead{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.fgcc-ic{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:var(--brand-soft);color:var(--brand-ink)}
.fgcc-tile h4{margin:0;font-size:13.5px;font-weight:620;letter-spacing:-.005em}
.fgcc-tile h4 small{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:1px}
.fgcc-st{width:9px;height:9px;border-radius:50%;flex:none;margin-left:auto;position:relative}
.fgcc-st::after{content:"";position:absolute;inset:-4px;border-radius:50%;opacity:.4}
.fgcc-st.ok{background:var(--ok);box-shadow:0 0 8px color-mix(in srgb,var(--ok) 80%,transparent)}
.fgcc-st.ok::after{box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)}
.fgcc-st.warn{background:var(--warn);box-shadow:0 0 8px color-mix(in srgb,var(--warn) 80%,transparent)}
.fgcc-st.warn::after{box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 22%,transparent)}
.fgcc-st.danger{background:var(--danger);box-shadow:0 0 8px color-mix(in srgb,var(--danger) 80%,transparent)}
.fgcc-st.danger::after{box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 22%,transparent)}
.fgcc-st.idle{background:var(--slate)}
.fgcc-tile .rt{font-size:11.5px;color:var(--muted);margin-bottom:10px;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fgcc-tile .rt b{color:var(--ink);font-weight:620}
.fgcc-tile .rt .run{display:block;font-size:11px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fgcc-trk{height:6px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.fgcc-fil{display:block;height:100%;border-radius:inherit}
.fgcc-fil.ok{background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 70%,transparent),var(--ok))}
.fgcc-fil.warn{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 70%,transparent),var(--warn))}
.fgcc-fil.danger{background:linear-gradient(90deg,color-mix(in srgb,var(--danger) 70%,transparent),var(--danger))}
.fgcc-fil.idle{background:linear-gradient(90deg,color-mix(in srgb,var(--slate) 55%,transparent),var(--slate))}

/* ============================================================
   PREMIUM v2 — build 495: GEEN gekleurde bollen ÉN GEEN gekleurde
   linker-lijntjes. Status = getinte pill (zachte tint + gekleurde tekst).
   Selectie = zachte gevulde achtergrond. Rustig, duur, direct leesbaar.
   (Komt HELEMAAL laatst → wint.)
   ============================================================ */

/* 1) Alle lege status-bollen weg (niet eens als staafje). */
.fg-statchip .dot,.fg-loopchip .dot,.fg-bouw-dot,.fgradio-st .dot,.fgf2-save .dot{ display:none !important; }
.fg-loopchip{ gap:6px; }

.fgcc-tile::before,
.fg-brandcard::before,.fgf2-sales::before,.fgck-card::before{ display:none !important; }
.fgf2-tab.on{ box-shadow:none !important; }
.fgmod-tile,.fgck-loop,.fgag-item{ border-left:1px solid var(--line) !important; }

/* 3) Selectie/among = zachte gevulde achtergrond i.p.v. streep. */
.fgf2-tab.on{ background:color-mix(in srgb,var(--brand) 12%,transparent) !important; color:var(--brand-ink) !important; }

/* 4) Status = getinte PILL (zachte tint + gekleurde tekst), geen bol/streep. */
.fg-statchip.on{ background:color-mix(in srgb,var(--brand) 12%,transparent) !important; border-color:color-mix(in srgb,var(--brand) 32%,transparent) !important; box-shadow:none !important; color:var(--brand-strong); }

/* Check Center: status via zachte tegel-tint + rand (tekst zegt al 'geen fouten'/'vertraagd'/'fout'). */
.fgcc-tile.s-ok{ border-color:color-mix(in srgb,var(--ok) 30%,var(--line)) !important; background:color-mix(in srgb,var(--ok) 5%,var(--card)) !important; }
.fgcc-tile.s-warn{ border-color:color-mix(in srgb,var(--warn) 32%,var(--line)) !important; background:color-mix(in srgb,var(--warn) 6%,var(--card)) !important; }
.fgcc-tile.s-danger{ border-color:color-mix(in srgb,var(--danger) 34%,var(--line)) !important; background:color-mix(in srgb,var(--danger) 6%,var(--card)) !important; }
.fgcc-tile.s-idle{ border-color:var(--line) !important; }
/* de status-track onderaan mag blijven (horizontaal, geen linker-streep) maar rustig */
.fgcc-trk{ opacity:.9; }

/* ============================================================
   POSTS / DESIGN STUDIO — PREMIUM (build 482 redesign)
   Alle nieuwe klassen: import + logo/foto-toggle + resize + badge,
   upload-popup, huisstijl + raadgever, geheugen-strip, generate.
   Token-based · dark premium · geen bollen, geen linker-strepen.
   ============================================================ */

/* ---- Linker sidebar: top (Import + segment) + resize ---- */
.fgpo-side{ position:relative; width:240px; }
.fgpo-side .fgpo-sidebody{ flex:1 1 auto; padding:10px; }
.fgpo-sidetop{ display:flex; flex-direction:column; gap:10px; padding:12px; border-bottom:1px solid var(--line); }
.fgpo-import{ width:100%; justify-content:center; font-weight:600; }
.fgpo-uparrow{ font-size:15px; font-weight:800; }
.fgpo-seg{ display:flex; gap:3px; padding:3px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-pill); }
.fgpo-segb{ flex:1; font:inherit; font-size:12px; font-weight:600; padding:6px 8px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.fgpo-segb.on{ background:color-mix(in srgb,var(--brand) 16%,transparent); color:var(--brand-ink); box-shadow:var(--shadow-xs); }
.fgpo-segb:hover:not(.on){ color:var(--ink); }
.fgpo-sidemsg{ padding:14px 12px; font-size:12px; line-height:1.5; }
.fgpo-siderz{ position:absolute; top:0; right:-4px; width:9px; height:100%; cursor:ew-resize; z-index:4; }
.fgpo-siderz::after{ content:''; position:absolute; top:0; right:4px; width:2px; height:100%; background:transparent; border-radius:var(--r-pill); transition:background var(--dur) var(--ease); }
.fgpo-siderz:hover::after{ background:color-mix(in srgb,var(--brand) 50%,transparent); }

/* ---- Thumbnail-grid: badge (aantal) + transparant-hint ---- */
.fgpo-assets{ grid-template-columns:1fr 1fr; gap:8px; }
.fgpo-asset{ position:relative; border-radius:var(--r-sm); box-shadow:var(--shadow-xs); }
.fgpo-asset:hover{ box-shadow:var(--shadow-sm); }
.fgpo-badge{ position:absolute; top:5px; right:5px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill); background:var(--danger); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; box-shadow:0 2px 6px -1px rgba(0,0,0,.5); }
.fgpo-trans{ position:absolute; bottom:5px; left:5px; width:17px; height:17px; line-height:17px; text-align:center; font-size:10px; color:var(--brand-ink); background:color-mix(in srgb,var(--brand) 20%,var(--card)); border-radius:var(--r-pill); box-shadow:var(--shadow-xs); }

/* ---- Status-STAMP = getinte pill (zachte tint + gekleurde tekst) ---- */
.fgpo-stamp{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); background:var(--card-2); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
.fgpo-stamp.groen{ background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 32%,transparent); }
.fgpo-stamp.oranje{ background:color-mix(in srgb,var(--warn) 17%,transparent); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 34%,transparent); }
.fgpo-stamp.rood{ background:color-mix(in srgb,var(--danger) 15%,transparent); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 34%,transparent); }

/* ---- Upload-popup ---- */
.fgup-box{ width:min(680px,96vw); }
.fgup-body{ padding:14px 16px; }
.fgup-drop{ border:1.5px dashed var(--line-strong); border-radius:var(--r-md); padding:22px 16px; text-align:center; background:var(--card-2); transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.fgup-drop.over{ border-color:var(--brand); background:var(--brand-soft); }
.fgup-dropicon{ font-size:28px; font-weight:800; color:var(--brand-ink); line-height:1; }
.fgup-droptxt{ font-size:13px; color:var(--muted); margin:8px 0 12px; }
.fgup-dropbtns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.fgup-rows{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.fgup-row{ display:flex; gap:12px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); box-shadow:var(--shadow-xs); transition:opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.fgup-row.saved{ border-color:color-mix(in srgb,var(--ok) 40%,var(--line)); opacity:.65; }
.fgup-row.failed{ border-color:color-mix(in srgb,var(--danger) 42%,var(--line)); }
.fgup-thumb{ width:56px; height:56px; flex:0 0 auto; border-radius:var(--r-sm); overflow:hidden; background:var(--card-2); display:flex; align-items:center; justify-content:center; }
.fgup-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.fgup-spin{ font-size:18px; opacity:.6; }
.fgup-fields{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.fgup-name{ margin:0 !important; font-size:13px; font-weight:600; min-height:38px; }
.fgup-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fgup-folder{ font-size:11px; font-family:ui-monospace,'SFMono-Regular',monospace; overflow:hidden; text-overflow:ellipsis; }
.fgup-foot{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line); background:var(--card); }
.fgup-hint{ font-size:12px; }

/* ---- Huisstijl-paneel ---- */
.fghs-box{ width:min(560px,96vw); }
.fghs-body{ padding:14px 16px 18px; }
.fghs-hero{ display:flex; align-items:center; gap:14px; padding:16px; background:var(--card-grad); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm),var(--hairline-top); }
.fghs-masc{ width:58px; height:58px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow-sm); background:var(--card-2); }
.fghs-brand{ font:var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--font); letter-spacing:var(--ls-h2); }
.fghs-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.fghs-sec{ margin-top:18px; }
.fghs-lbl{ font-size:var(--fs-label); font-weight:var(--fw-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.fghs-cols{ display:flex; gap:10px; flex-wrap:wrap; }
.fghs-col{ display:flex; align-items:center; gap:9px; padding:6px 12px 6px 6px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow-xs); }
.fghs-swatch{ width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.3); }
.fghs-hex{ font-size:12px; font-weight:600; font-family:ui-monospace,'SFMono-Regular',monospace; letter-spacing:.02em; }
.fghs-font{ font-size:22px; font-weight:600; padding:13px 15px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md); }
.fghs-tone{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink); }

/* ---- Raadgever-paneel ---- */
.fgrd-box{ width:min(560px,96vw); }
.fgrd-body{ padding:14px 16px 18px; }
.fgrd-load{ padding:26px; text-align:center; font-size:13.5px; }
.fgrd-empty{ text-align:center; padding:26px 16px; }
.fgrd-emptyicon{ font-size:36px; margin-bottom:10px; }
.fgrd-empty p{ margin:0 auto; color:var(--muted); font-size:13.5px; line-height:1.55; max-width:400px; }
.fgrd-group{ margin-bottom:18px; }
.fgrd-gttl{ font-size:var(--fs-label); font-weight:var(--fw-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.fgrd-item{ padding:11px 13px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-md); font-size:13.5px; line-height:1.5; margin-bottom:7px; box-shadow:var(--shadow-xs); }
.fgrd-note{ font-size:12.5px; line-height:1.55; margin:14px 0 0; }

/* ---- Geheugen-strip (Wat ik onthoud) ---- */
.fgpo-memory{ display:flex; align-items:center; gap:11px; margin:10px 12px 0; padding:10px 13px; background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 28%,transparent); border-radius:var(--r-md); box-shadow:var(--shadow-xs); }
.fgpo-memicon{ font-size:17px; line-height:1; }
.fgpo-memtxt{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.fgpo-memtxt b{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--brand-ink); }
.fgpo-memline{ font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Generate (Maak beeld) — offer + save-acties ---- */
.fgpo-offer{ display:flex; align-items:center; gap:12px; justify-content:space-between; padding:12px 14px; background:var(--card-2); border:1px dashed var(--line-strong); border-radius:var(--r-md); font-size:13px; color:var(--muted); }
.fgpo-offer span{ flex:1; min-width:0; }
.fgpo-genacts{ display:flex; gap:8px; margin-top:9px; }

/* ---- Photo Room: drag-over state ---- */
.fgpr-stage.fgpr-over{ border-color:var(--brand); background:var(--brand-soft); }

/* ============================================================
   build 498 — FIX: studio-popups (Import/Huisstijl/Raadgever) MOETEN boven
   het schermvullende #fgPostsOv (z-index 2147483000) staan, anders openen ze
   erachter en lijkt het alsof de knoppen "niks doen".
   ============================================================ */
#fgpoUpOv, #fgpoHsOv, #fgpoRdOv{ z-index:2147483600 !important; }

/* build 499 — ook de Photo Room-popup boven het studioscherm. */
#fgPrOv{ z-index:2147483600 !important; }

/* ============================================================
   build 501 — Photo Room (@imgly, in-browser) + ✂️-knop op elk beeld
   ============================================================ */
.fgpo-asset{ position:relative; }
.fgpo-cut{ position:absolute; top:5px; left:5px; width:22px; height:22px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb,var(--card) 82%,transparent); border:1px solid var(--line); font-size:12px; line-height:1; opacity:0; transition:opacity .12s var(--ease), transform .12s var(--ease); cursor:pointer; }
.fgpo-asset:hover .fgpo-cut{ opacity:.96; }
.fgpo-cut:hover{ transform:scale(1.08); border-color:var(--brand); background:var(--card); }
.fgpr-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:100%; min-height:240px; color:var(--muted); font-size:14px; text-align:center; }
.fgpr-loading > :first-child{ font-size:30px; }
.fgpr-prog{ font-weight:800; font-size:22px; color:var(--brand-ink); font-variant-numeric:tabular-nums; }

/* ============================================================
   build 502 — PNG-machine (batch transparant maken)
   ============================================================ */
#fgPmOv{ z-index:2147483600 !important; }
.fgpm-box{ width:min(760px,96vw); }
.fgpm-body{ display:flex; flex-direction:column; min-height:0; flex:1; }
.fgpm-top{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fgpm-status{ font-size:13px; }
.fgpm-list{ overflow:auto; padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.fgpm-row{ display:flex; align-items:center; gap:12px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); box-shadow:var(--shadow-xs); }
.fgpm-row.fgpm-doneRow{ border-color:color-mix(in srgb,var(--ok) 40%,var(--line)); }
.fgpm-thumb{ width:52px; height:52px; flex:0 0 auto; border-radius:var(--r-sm); overflow:hidden; background:var(--card-2); display:grid; place-items:center; }
.fgpm-thumb.fgpm-checker{ background:conic-gradient(#0000 90deg,color-mix(in srgb,var(--muted) 22%,transparent) 0 180deg,#0000 0 270deg,color-mix(in srgb,var(--muted) 22%,transparent) 0) 0 0/14px 14px; }
.fgpm-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.fgpm-mid{ flex:1; min-width:0; }
.fgpm-name{ font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgpm-kind{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.fgpm-st{ flex:0 0 auto; font-size:12px; font-weight:700; }
.fgpm-ok{ color:var(--ok); } .fgpm-no{ color:var(--danger); } .fgpm-q{ color:var(--muted); }

/* ============================================================
   build 504 — Dubbel-beheer popup
   ============================================================ */
#fgDupOv{ z-index:2147483600 !important; }
.fgdup-box{ width:min(820px,96vw); }
.fgdup-body{ display:flex; flex-direction:column; min-height:0; flex:1; }
.fgdup-top{ padding:12px 16px; border-bottom:1px solid var(--line); }
.fgdup-status{ font-size:13px; }
.fgdup-list{ overflow:auto; padding:12px 16px; display:flex; flex-direction:column; gap:14px; }
.fgdup-group{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-xs); overflow:hidden; }
.fgdup-ghead{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line); background:var(--card-2); }
.fgdup-items{ display:flex; gap:12px; flex-wrap:wrap; padding:12px; }
.fgdup-item{ width:150px; display:flex; flex-direction:column; gap:7px; }
.fgdup-thumb{ width:150px; height:120px; border-radius:var(--r-md); overflow:hidden; background:var(--card-2); display:grid; place-items:center; border:1px solid var(--line); }
.fgdup-thumb.fgdup-checker{ background:conic-gradient(#0000 90deg,color-mix(in srgb,var(--muted) 22%,transparent) 0 180deg,#0000 0 270deg,color-mix(in srgb,var(--muted) 22%,transparent) 0) 0 0/16px 16px; }
.fgdup-thumb img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.fgdup-name{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgdup-hide{ width:100%; }

/* ============================================================
   build 505 — FIX: lijst-items in flex-kolommen mogen NIET krimpen
   (anders worden de thumbnails in de Dubbels/PNG-machine/upload afgeknipt).
   ============================================================ */
.fgdup-group, .fgpm-row, .fgup-row{ flex:0 0 auto !important; }

/* ============================================================
   build 506 — Beeld-check popup · Namen opkuisen · bar-scheiders
   ============================================================ */
/* Scheiders tussen groepen knoppen in de studio-bar */
.fgpo-barsep{ width:1px; height:20px; align-self:center; margin:0 4px; background:var(--line); flex:0 0 auto; }

/* ---- Beeld-check (klik sidebar-beeld → groot, achtergrond wisselen + kleur) ---- */
#fgBcOv{ z-index:2147483600 !important; }
.fgbc-box{ width:min(880px,96vw); }
.fgbc-body{ display:flex; gap:0; min-height:0; flex:1; }
.fgbc-stage{ flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; padding:16px; }
.fgbc-preview{ flex:1; min-height:260px; border:1px solid var(--line); border-radius:var(--r-lg); display:grid; place-items:center; overflow:hidden; background:var(--card-2); }
.fgbc-preview img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.fgbc-checker{ background:conic-gradient(#0000 90deg,color-mix(in srgb,var(--muted) 22%,transparent) 0 180deg,#0000 0 270deg,color-mix(in srgb,var(--muted) 22%,transparent) 0) 0 0/22px 22px; }
.fgbc-bgs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fgbc-bglbl{ font-size:12px; color:var(--muted); }
.fgbc-bg{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:12px; font-weight:600; cursor:pointer; color:var(--text); }
.fgbc-bg.on{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent); }
.fgbc-sw{ width:14px; height:14px; border-radius:4px; border:1px solid var(--line); display:inline-block; }
.fgbc-sw.fgbc-checker{ background-size:8px 8px; }
.fgbc-side{ width:230px; flex:0 0 auto; border-left:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:12px; overflow:auto; }
.fgbc-row{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; }
.fgbc-row .fgbc-k{ color:var(--muted); } .fgbc-row .fgbc-v{ font-weight:700; }
.fgbc-sec{ border-top:1px solid var(--line); padding-top:12px; }
.fgbc-lbl{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.fgbc-cols{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.fgbc-csw{ width:22px; height:22px; border-radius:6px; border:1px solid var(--line); display:inline-block; }
.fgbc-ok{ color:var(--ok); font-size:12px; font-weight:700; }
.fgbc-no{ color:var(--danger); font-size:12px; font-weight:700; }
.fgbc-acts{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.fgbc-acts .fg-btn{ width:100%; }

/* ---- Namen opkuisen (oud → nieuw, één klik toepassen) ---- */
#fgNmOv{ z-index:2147483600 !important; }
.fgnm-box{ width:min(820px,96vw); }
.fgnm-body{ display:flex; flex-direction:column; min-height:0; flex:1; }
.fgnm-top{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fgnm-status{ font-size:13px; }
.fgnm-list{ overflow:auto; padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.fgnm-row{ display:flex; align-items:center; gap:12px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); box-shadow:var(--shadow-xs); flex:0 0 auto !important; }
.fgnm-row.fgnm-same{ opacity:.55; }
.fgnm-thumb{ width:48px; height:48px; flex:0 0 auto; border-radius:var(--r-sm); overflow:hidden; background:var(--card-2); display:grid; place-items:center; border:1px solid var(--line); }
.fgnm-checker{ background:conic-gradient(#0000 90deg,color-mix(in srgb,var(--muted) 22%,transparent) 0 180deg,#0000 0 270deg,color-mix(in srgb,var(--muted) 22%,transparent) 0) 0 0/14px 14px; }
.fgnm-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.fgnm-mid{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; }
.fgnm-old{ flex:0 1 auto; min-width:0; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:38%; }
.fgnm-arrow{ color:var(--muted); flex:0 0 auto; }
.fgnm-new{ flex:1; min-width:0; font-size:12.5px; padding:6px 9px; }
.fgnm-badge{ flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   build 507 — Optimaliseren · Levende mascotte · Scenario + spreiding
   ============================================================ */
/* ---- Optimaliseren (WebP + thumbnails, batch) ---- */
#fgOpOv{ z-index:2147483600 !important; }
.fgop-box{ width:min(820px,96vw); }
.fgop-body{ display:flex; flex-direction:column; min-height:0; flex:1; }
.fgop-top{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fgop-status{ font-size:13px; }
.fgop-list{ overflow:auto; padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.fgop-row{ display:flex; align-items:center; gap:12px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); box-shadow:var(--shadow-xs); flex:0 0 auto !important; }
.fgop-row.fgop-skip{ opacity:.5; }
.fgop-thumb{ width:48px; height:48px; flex:0 0 auto; border-radius:var(--r-sm); overflow:hidden; background:var(--card-2); display:grid; place-items:center; border:1px solid var(--line); }
.fgop-checker{ background:conic-gradient(#0000 90deg,color-mix(in srgb,var(--muted) 22%,transparent) 0 180deg,#0000 0 270deg,color-mix(in srgb,var(--muted) 22%,transparent) 0) 0 0/14px 14px; }
.fgop-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.fgop-mid{ flex:1; min-width:0; }
.fgop-name{ font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgop-kind{ font-size:11.5px; color:var(--muted); }
.fgop-st{ flex:0 0 auto; font-size:12px; font-weight:800; }
.fgop-ok{ color:var(--ok); } .fgop-q{ color:var(--muted); }

/* ---- Levende mascotte (rig → video-loop) ---- */
#fgLvOv{ z-index:2147483600 !important; }
.fglv-box{ width:min(760px,96vw); }
.fglv-body{ display:flex; gap:0; min-height:0; flex:1; }
.fglv-stage{ flex:1; min-width:0; padding:16px; display:grid; place-items:center; }
.fglv-prev{ width:100%; max-width:420px; aspect-ratio:1/1; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:grid; place-items:center; }
.fglv-prev canvas{ width:100%; height:100%; display:block; }
.fglv-checker{ background:conic-gradient(#0000 90deg,color-mix(in srgb,var(--muted) 22%,transparent) 0 180deg,#0000 0 270deg,color-mix(in srgb,var(--muted) 22%,transparent) 0) 0 0/22px 22px; }
.fglv-side{ width:230px; flex:0 0 auto; border-left:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:12px; overflow:auto; }
.fglv-pick{ display:flex; flex-wrap:wrap; gap:8px; }
.fglv-cand{ width:52px; height:52px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--card-2); padding:0; cursor:pointer; }
.fglv-cand.on{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent); }
.fglv-cand img{ width:100%; height:100%; object-fit:contain; display:block; }
.fglv-lbl{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.fglv-motions{ display:flex; flex-wrap:wrap; gap:8px; }
.fglv-mo{ padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:12px; font-weight:600; cursor:pointer; color:var(--text); }
.fglv-mo.on{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent); }
.fglv-acts{ margin-top:6px; } .fglv-acts .fg-btn{ width:100%; }
.fglv-hint{ font-size:11.5px; line-height:1.4; }

/* ---- Scenario + menselijke spreiding ---- */
#fgScOv{ z-index:2147483600 !important; }
.fgsc-box{ width:min(720px,96vw); }
.fgsc-body{ display:flex; flex-direction:column; min-height:0; flex:1; gap:12px; padding:14px 16px; overflow:auto; }
.fgsc-meta{ font-size:12px; }
.fgsc-text{ width:100%; min-height:200px; resize:vertical; font-size:13.5px; line-height:1.5; padding:12px; }
.fgsc-sprei{ border:1px solid var(--line); border-radius:var(--r-md); padding:12px; background:var(--card-2); display:flex; flex-direction:column; gap:9px; }
.fgsc-lbl{ font-size:12px; font-weight:800; }
.fgsc-chk{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.fgsc-range{ display:flex; align-items:center; gap:8px; font-size:12.5px; flex-wrap:wrap; }
.fgsc-num{ width:66px; padding:5px 8px; text-align:center; }
.fgsc-foot{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line); }
.fgsc-save{ font-size:12px; color:var(--ok); font-weight:700; }

/* ---- Live mascotte in de Raadgever ---- */
.fgrd-masc{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fgrd-mascimg{ width:52px; height:52px; flex:0 0 auto; border-radius:50%; overflow:hidden; background:var(--card-2); display:grid; place-items:center; border:1px solid var(--line); }
.fgrd-mascimg img{ width:100%; height:100%; object-fit:contain; display:block; }
.fgrd-mascttl{ display:flex; flex-direction:column; }
.fgrd-mascttl b{ font-size:14px; } .fgrd-mascttl .fg-muted{ font-size:12px; }

/* ============================================================
   build 509 — Beeld-check: hele PNG past in het kader · zachte kleur-notitie
   ============================================================ */
.fgbc-preview{ padding:16px; box-sizing:border-box; }
.fgbc-preview img{ width:100%; height:100%; object-fit:contain; }
.fgbc-soft{ font-size:12px; font-weight:600; }

/* ---- Flux / genereer-popup ---- */
#fgGenOv{ z-index:2147483600 !important; }
.fggen-box{ width:min(860px,96vw); }
.fggen-body{ display:flex; gap:0; min-height:0; flex:1; }
.fggen-stage{ flex:1; min-width:0; padding:16px; display:grid; place-items:center; }
.fggen-prev{ width:100%; aspect-ratio:1/1; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:grid; place-items:center; background:var(--card-2); }
.fggen-prev img{ width:100%; height:100%; object-fit:contain; display:block; }
.fggen-stub{ color:var(--muted); font-size:13px; text-align:center; padding:20px; }
.fggen-side{ width:280px; flex:0 0 auto; border-left:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:12px; overflow:auto; }
.fggen-eng{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.fggen-ref{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); }
.fggen-refimg{ width:44px; height:44px; flex:0 0 auto; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--card-2); display:grid; place-items:center; }
.fggen-refimg img{ width:100%; height:100%; object-fit:contain; }
.fggen-prompt{ width:100%; min-height:120px; resize:vertical; font-size:12.5px; line-height:1.45; padding:10px; }
.fggen-acts{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.fggen-acts .fg-btn{ width:100%; }
.fggen-hint{ font-size:11.5px; line-height:1.4; }

/* ============================================================
   build 510 — Compositor (post-maker) + Verrijken (vision-labels)
   ============================================================ */
/* ---- Compositor ---- */
#fgCoOv{ z-index:2147483600 !important; }
.fgco-box{ width:min(1100px,97vw); }
.fgco-body{ display:flex; gap:0; min-height:0; flex:1; }
.fgco-stage{ flex:1; min-width:0; padding:16px; display:grid; place-items:center; background:var(--card-2); }
.fgco-canvaswrap{ width:100%; height:100%; display:grid; place-items:center; }
.fgco-canvaswrap canvas{ max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.25); background:#fff; }
.fgco-side{ width:320px; flex:0 0 auto; border-left:1px solid var(--line); padding:14px 16px; display:flex; flex-direction:column; gap:14px; overflow:auto; }
.fgco-sec{ display:flex; flex-direction:column; gap:8px; }
.fgco-lbl{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.fgco-seg{ display:inline-flex; gap:4px; background:var(--card-2); border:1px solid var(--line); border-radius:999px; padding:3px; flex-wrap:wrap; }
.fgco-seg.sm{ padding:2px; }
.fgco-segb{ padding:5px 12px; border:0; background:transparent; border-radius:999px; font-size:12px; font-weight:700; cursor:pointer; color:var(--text); }
.fgco-seg.sm .fgco-segb{ padding:4px 9px; font-size:13px; }
.fgco-segb.on{ background:var(--brand); color:#fff; }
.fgco-pick{ display:flex; flex-wrap:wrap; gap:6px; }
.fgco-cand{ width:46px; height:46px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--card-2); padding:0; cursor:pointer; }
.fgco-cand.on{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent); }
.fgco-cand img{ width:100%; height:100%; object-fit:contain; display:block; }
.fgco-row2{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
.fgco-row2 input[type=range]{ flex:1; min-width:80px; }
.fgco-fluxrow{ display:flex; gap:6px; } .fgco-flux{ flex:1; }
.fgco-txt{ width:100%; }
.fgco-acts .fg-btn{ width:100%; }
.fgco-hint{ font-size:11px; line-height:1.4; }

/* ---- Verrijken ---- */
#fgVrOv{ z-index:2147483600 !important; }
.fgvr-box{ width:min(820px,96vw); }
.fgvr-body{ display:flex; flex-direction:column; min-height:0; flex:1; }
.fgvr-top{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fgvr-status{ font-size:13px; }
.fgvr-list{ overflow:auto; padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.fgvr-row{ display:flex; align-items:center; gap:12px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); box-shadow:var(--shadow-xs); flex:0 0 auto !important; }
.fgvr-thumb{ width:48px; height:48px; flex:0 0 auto; border-radius:var(--r-sm); overflow:hidden; background:var(--card-2); display:grid; place-items:center; border:1px solid var(--line); }
.fgvr-checker{ background:conic-gradient(#0000 90deg,color-mix(in srgb,var(--muted) 22%,transparent) 0 180deg,#0000 0 270deg,color-mix(in srgb,var(--muted) 22%,transparent) 0) 0 0/14px 14px; }
.fgvr-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.fgvr-mid{ flex:1; min-width:0; }
.fgvr-name{ font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgvr-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; align-items:center; }
.fgvr-tag{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand-strong,var(--brand)); }
.fgvr-desc{ font-size:11px; color:var(--muted); }
.fgvr-st{ flex:0 0 auto; font-size:13px; font-weight:800; }
.fgvr-ok{ color:var(--ok); }

/* ============================================================
   build 511 — Verwerk alles · Originelen opruimen · sidebar-categorieën
   ============================================================ */
/* sidebar-segment met 5 categorieën mag scrollen i.p.v. wrappen */
.fgpo-seg{ flex-wrap:wrap; }

/* ---- Verwerk alles (orchestrator) ---- */
#fgVaOv{ z-index:2147483600 !important; }
.fgva-box{ width:min(760px,96vw); }
.fgva-body{ display:flex; flex-direction:column; min-height:0; flex:1; }
.fgva-top{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fgva-status{ font-size:12.5px; }
.fgva-phases{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fgva-phase{ display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card-2); font-size:12.5px; font-weight:600; }
.fgva-picon{ font-size:15px; }
.fgva-pst{ font-weight:800; color:var(--muted); }
.fgva-pst.run{ color:var(--brand-strong,var(--brand)); }
.fgva-pst.ok{ color:var(--ok); }
.fgva-log{ flex:1; overflow:auto; padding:10px 16px; font-size:12px; color:var(--muted); font-family:ui-monospace,monospace; }
.fgva-logline{ padding:2px 0; border-bottom:1px dashed color-mix(in srgb,var(--line) 60%,transparent); }

/* ---- Originelen opruimen (prullenbak) ---- */
#fgClOv{ z-index:2147483600 !important; }
.fgcl-box{ width:min(760px,96vw); }
.fgcl-body{ display:flex; flex-direction:column; min-height:0; flex:1; }
.fgcl-top{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.fgcl-status{ font-size:12.5px; }
.fgcl-chk{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.fgcl-list{ overflow:auto; padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.fgcl-row{ display:flex; align-items:center; gap:12px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); box-shadow:var(--shadow-xs); flex:0 0 auto !important; cursor:pointer; }
.fgcl-row.fgcl-risk{ border-color:color-mix(in srgb,var(--warn) 45%,var(--line)); background:color-mix(in srgb,var(--warn) 6%,var(--card)); }
.fgcl-thumb{ width:44px; height:44px; flex:0 0 auto; border-radius:var(--r-sm); overflow:hidden; background:var(--card-2); display:grid; place-items:center; border:1px solid var(--line); }
.fgcl-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.fgcl-mid{ flex:1; min-width:0; }
.fgcl-name{ font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgcl-meta{ font-size:11.5px; color:var(--muted); }
.fgcl-ok{ color:var(--ok); font-weight:700; }
.fgcl-warn{ color:var(--warn); font-weight:700; }

/* ============================================================
   build 513 — brainstorm-panel groter & overzichtelijker
   ============================================================ */
.fgpo-panel{ min-width:440px !important; max-width:860px !important; }
.fgpo-msgs{ padding:16px 18px !important; gap:12px !important; }
.fgpo-msg .fgpo-bub{ font-size:14.5px; line-height:1.55; max-width:88%; padding:11px 14px; }
.fgpo-compose{ padding:12px 14px !important; }
.fgpo-input{ font-size:14px; }
.fgpo-phead{ padding:12px 14px !important; }

/* ============================================================
   build 515 — "nu bezig"-kaartje (Verwerk alles) + naam-per-naam valideren
   ============================================================ */
.fgva-now{ display:flex; align-items:center; gap:12px; margin:0 16px 8px; padding:10px 12px; border:1px solid var(--brand); border-radius:var(--r-md); background:color-mix(in srgb,var(--brand) 7%,var(--card)); }
.fgva-nowthumb{ width:56px; height:56px; flex:0 0 auto; border-radius:var(--r-sm); overflow:hidden; background:var(--card-2); display:grid; place-items:center; border:1px solid var(--line); }
.fgva-nowthumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.fgva-nowtxt{ min-width:0; }
.fgva-nowname{ font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgva-nowinfo{ font-size:12.5px; color:var(--muted); }
.fgva-save{ color:var(--ok); }

/* naam-per-naam: kleine ✓-knop per rij */
.fgnm-apply{ flex:0 0 auto; margin-left:6px; }
.fgnm-row.fgnm-done{ opacity:.6; }
.fgnm-row.fgnm-done .fgnm-new{ border-color:var(--ok); }

/* ============================================================
   build 517 — Levend: meer bewegingen, gecategoriseerd (Rustig · Speels · Effect)
   ============================================================ */
.fglv-mocat{ font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:8px 0 4px; }
.fglv-mocat:first-child{ margin-top:0; }
.fglv-morow{ display:flex; flex-wrap:wrap; gap:6px; }

/* ============================================================
   build 518 — Confirm / goedkeur-studio (menu van de dag, 👍/👎)
   ============================================================ */
#fgCfOv{ z-index:2147483600 !important; }
.fgcf-box{ width:min(1000px,97vw); }
.fgcf-body{ display:flex; flex-direction:column; min-height:0; flex:1; }
.fgcf-top{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fgcf-status{ font-size:12.5px; }
.fgcf-n{ width:60px; text-align:center; }
.fgcf-grid{ overflow:auto; padding:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; align-content:start; }
.fgcf-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); overflow:hidden; box-shadow:var(--shadow-xs); display:flex; flex-direction:column; }
.fgcf-prev{ aspect-ratio:1/1; background:var(--card-2); display:grid; place-items:center; overflow:hidden; }
.fgcf-prev img{ width:100%; height:100%; object-fit:cover; display:block; }
.fgcf-cap{ font-size:12.5px; padding:9px 11px; color:var(--text); min-height:34px; }
.fgcf-acts{ display:flex; gap:6px; padding:0 10px 10px; }
.fgcf-acts .fg-btn{ flex:1; }

/* ============================================================
   build 519 — %-voortgangsbalk bij "Alles bewaren" (import)
   ============================================================ */
.fgup-prog{ display:flex; align-items:center; gap:8px; margin-left:12px; }
.fgup-progtrack{ width:160px; height:8px; border-radius:999px; background:var(--card-2); overflow:hidden; border:1px solid var(--line); }
.fgup-progbar{ height:100%; width:0%; background:var(--brand-grad,var(--brand)); border-radius:999px; transition:width .2s ease; }
.fgup-progtxt{ font-size:12px; font-weight:700; color:var(--muted); min-width:72px; }

/* soort-keuze in de import-popup (build 519) */
.fgup-soort{ display:flex; align-items:center; gap:10px; margin:10px 0 4px; flex-wrap:wrap; }

/* ============================================================
   build 521 — Namen leesbaar (oud → nieuw onder elkaar) · Verwerk alles vol hoog · Levend schermvullend
   ============================================================ */
.fgnm-mid{ flex-direction:column !important; align-items:stretch !important; gap:4px !important; }
.fgnm-old{ max-width:100% !important; font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgnm-new{ width:100% !important; font-size:13px; padding:8px 10px; }
.fgnm-row{ align-items:center; }

/* Verwerk alles: vol hoog zodat het logboek de ruimte krijgt */
.fgva-box{ width:min(920px,96vw); height:min(88vh,780px); }

/* Levend schermvullend: grotere preview */
.fglv-box{ width:min(1040px,96vw); height:min(90vh,820px); }
.fglv-prev{ max-width:min(72vh,760px) !important; }

/* ============================================================
   build 522 — Beeld-check: ALTIJD de volledige afbeelding in het kader
   (natuurlijke verhouding, nooit bijgesneden)
   ============================================================ */
.fgbc-preview{ padding:18px; box-sizing:border-box; overflow:hidden; place-items:center; }
.fgbc-preview img{ width:auto !important; height:auto !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; display:block; margin:auto; }

/* ============================================================
   build 531 — Beeld-check: de VOLLEDIGE afbeelding met marge in het kader.
   Hogere specificiteit (#fgBcOv) zodat dit de eerdere pogingen (509/522)
   definitief overschrijft; nooit tegen de rand, nooit bijgesneden.
   ============================================================ */
#fgBcOv .fgbc-preview{ padding:22px; box-sizing:border-box; place-items:center; overflow:hidden; }
#fgBcOv .fgbc-preview img{ width:auto !important; height:auto !important; max-width:90% !important; max-height:90% !important; object-fit:contain !important; margin:auto !important; display:block; }

/* build 616: verrijk-popup altijd bóven de fiche */
#fgEnrichOv{ z-index:2147482600 !important; }
#fgEnrichOv .fgenr-box{ position:relative; z-index:1; }

/* ============================================================
   BUILD 627 — LEESBAARHEID VAN DE LIJSTEN (Patrick, 6/9/2026)
   ------------------------------------------------------------
   "hier mag toch ook wat meer verschil komen tussen achtergrond en kolommen,
    we moeten te veel staren naar de fiche, ze moet duidelijker"

   Hij heeft gelijk, en de oorzaak is aanwijsbaar. De lijst-stijlen hierboven
   zijn geschreven met de donkere modus in gedachten: de kop van de tabel had
   background rgba(255,255,255,.03) en de hover rgba(255,255,255,.028) — wit op
   wit dus, volledig onzichtbaar op een lichte achtergrond. En de scheidingslijn
   stond op var(--line) (#e7ecf3) op 55%, wat neerkomt op ongeveer #f3f6fa: dat
   is nauwelijks te onderscheiden van het witte vlak eronder.

   Hieronder één set tabel-tokens met een échte waarde voor licht én donker:
   een gekleurde kopregel, zichtbare lijnen, om-en-om gestreepte rijen, een
   duidelijke hover, en fijne verticale lijnen tussen de kolommen. De pagina
   eronder wordt een tint grijzer, zodat de witte kaart er echt bovenop ligt.
   ============================================================ */
:root{
  --bg:#edf1f7;                       /* was #f6f8fb — te dicht bij het witte kaartvlak */
  --tbl-kop:#e7edf6;
  --tbl-lijn:#cfd9e6;
  --tbl-kolom:#e3eaf3;
  --tbl-zebra:#f7f9fc;
  --tbl-hover:color-mix(in srgb, var(--brand) 12%, transparent);
}
body.fg-dark{
  --tbl-kop:#1e2531;
  --tbl-lijn:rgba(255,255,255,.15);
  --tbl-kolom:rgba(255,255,255,.07);
  --tbl-zebra:rgba(255,255,255,.028);
  --tbl-hover:color-mix(in srgb, var(--brand) 18%, transparent);
}

.fg-table{
  border:1px solid var(--tbl-lijn);
  box-shadow:var(--shadow-sm);
}
.fg-thead{
  background:var(--tbl-kop);
  border-bottom:2px solid var(--tbl-lijn);
}
.fg-thead .fg-th, .fg-th{
  color:var(--ink); opacity:.68; font-weight:800; letter-spacing:.07em;
}
.fg-row{ border-bottom:1px solid var(--tbl-lijn); }
.fg-row:nth-of-type(even){ background:var(--tbl-zebra); }
.fg-row:last-child{ border-bottom:0; }
.fg-row:hover{ background:var(--tbl-hover); }

/* Fijne kolomlijnen: elke cel behalve de eerste krijgt links een haarlijn.
   Ze staat in het midden van de tussenruimte, dus de tekst blijft ademen. */
.fg-table .fg-tr > * + *{
  box-shadow:inset 1px 0 0 var(--tbl-kolom);
  padding-left:14px;
}
/* knoppen in de laatste kolom hoeven geen lijn — dat leest als rommel */
.fg-table .fg-tr > button + button,
.fg-table .fg-tr > *:last-child:is(button){ box-shadow:none; padding-left:0; }

/* ============================================================
   BUILD 628 — DE ZIJBALK VAN DE VERENIGDE INBOX WAS ONLEESBAAR
   ------------------------------------------------------------
   Patrick, ongeacht het thema, terwijl de tekst erin var(--ink)
   gebruikt. In lichte modus is dat donkere tekst op een donkere balk.
   Dezelfde fout zat in de hover en de tellers: die stonden op wit met lage
   dekking, wat op een lichte achtergrond niets doet.
   ============================================================ */
/* 14/10/2026 - Patrick: "de sidebar van links donker naar iets lichter (degradatie)".
   Het verloop liep van boven naar onder; nu van links naar rechts{
  background:linear-gradient(90deg,#0A1120 0%,#182233 45%,color-mix(in srgb,#182233 68%,var(--brand)) 100%);
  border-right:1px solid var(--line-strong);
}

/* ---- build 632: selectie en eigen mappen in de beeldbank ---- */
.fg-dbxsel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:9px 12px;
  border:1px dashed var(--tbl-lijn);border-radius:12px;background:var(--tbl-zebra);font-size:13.5px;
  opacity:.75;transition:opacity .12s ease,border-color .12s ease,background .12s ease}
.fg-dbxsel.aan{opacity:1;border-style:solid;border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 8%,transparent)}
.fg-dbxsel-all{display:flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}
.fg-dbxsel-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);opacity:.8}
.fg-dbxsel-map{border:1px solid var(--tbl-lijn);border-radius:9px;padding:6px 9px;background:var(--card);
  color:var(--ink);font:inherit;font-size:13px;max-width:200px}
.fg-dbxsel button[disabled],.fg-dbxsel select[disabled]{opacity:.45;cursor:not-allowed}
.fg-file{position:relative}
.fg-file-kies{position:absolute;top:8px;left:8px;z-index:3;display:grid;place-items:center;
  width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--card) 82%,transparent);
  border:1px solid var(--tbl-lijn);cursor:pointer;opacity:0;transition:opacity .12s ease}
.fg-file:hover .fg-file-kies,.fg-file.gekozen .fg-file-kies{opacity:1}
.fg-file-kies input{margin:0;cursor:pointer}
.fg-file.gekozen{outline:2px solid var(--brand);outline-offset:1px}
.fg-file.row .fg-file-kies{position:static;opacity:1;margin-right:8px}

/* ============================================================
   BUILD 634 — DE LIJST OPGERUIMD
   ------------------------------------------------------------
   Patrick: "wat een zooitje in layout, dit is een hoopje ellende."
   Terecht. Ik had in vier builds tijd telkens iets bijgezet — de hitte, het
   kans-lint, het nevenactiviteit-lintje, de naam van de agent — en dat allemaal
   in de laatste kolom. Die brak over twee of drie regels en liep over de rij
   eronder heen. Zes gegevens in een vakje van honderd pixels: dat kán niet.
   Regel vanaf nu: elk gegeven zijn eigen kolom, elke cel ÉÉN regel, en wat niet
   past wordt afgekapt met drie puntjes en staat voluit in de tooltip.
   ============================================================ */
.fg-table .fg-tr{ min-height:56px; align-items:center; }
.fg-table .fg-row{ height:auto; }
.fg-cel{ min-width:0; overflow:hidden; }
.fg-cel .fg-name,
.fg-cel .fg-sub,
.fg-cel.fg-mono{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%; }
.fg-cel .fg-name{ display:flex; align-items:center; gap:6px; }
.fg-cel .fg-name > :first-child{ overflow:hidden; text-overflow:ellipsis; }

/* toestand: precies één pil, nooit meer */
.fg-table .fg-cel .fg-ev{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* reactie-kolom: hoe vaak geopend, hoe vaak geklikt */
.fg-reactie{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fg-reactie .o{ color:var(--ink); opacity:.72; }
.fg-reactie .k{ color:var(--brand-ink); font-weight:800; }
.fg-reactie .stil{ color:var(--ink); opacity:.32; }

/* opvolging: initialen + naam, altijd op één regel */
.fg-agentcel{ display:flex; align-items:center; gap:7px; min-width:0; }
.fg-agentcel .ava{ flex:0 0 auto; width:23px; height:23px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--brand) 20%,transparent); color:var(--ink);
  font-size:10.5px; font-weight:800; letter-spacing:.02em; }
.fg-agentcel .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; opacity:.85; }
.fg-agentcel .auto{ flex:0 0 auto; font-size:11px; opacity:.6; }
.fg-agentcel .leeg{ opacity:.3; }
.fg-agentcel .fg-btn{ white-space:nowrap; }

/* nevenactiviteit: een klein lintje naast de naam, geen tekstblok in de statuskolom */
.fg-neven{ flex:0 0 auto; font-size:12px; opacity:.75; cursor:help; }

/* kopregel van de lijst: links wat je ziet, midden waarop je filtert, rechts wat je doet */
.fg-listhead2{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.fg-listhead2 .lh-links{ display:flex; align-items:baseline; gap:10px; min-width:0; }
/* BUILD 795 — Patrick: "waarom sluit de eerste tab niet mooi aan". Mijn fout uit 793:
   deze rij stond op flex ZONDER wrap. Met negen stielknoppen erbij liep ze het scherm
   uit en werd de laatste knop afgesneden. Nu breekt ze netjes af naar een tweede regel. */
/* BUILD 799 · 16/09/2026 — DE SPATIE DIE PATRICK VIJF BUILDS LANG AANWEES.
   Ik heb hem eindelijk OPGEMETEN in zijn eigen scherm in plaats van hem uit de
   code te raden. De kopregel was 79 pixels hoog terwijl de inhoud 34 is.

   En het was mijn eigen reparatie uit 795. Ik zette hier flex-wrap:wrap om te
   beletten dat de negen stielknoppen het scherm uitliepen. Gevolg: het blokje
   "0 vandaag · 86 totaal" paste er niet meer bij en sprong naar een tweede
   regel. Die lege tweede regel WAS de spatie.

   Bij het proberen kwam er een tweede helft bovendrijven: zodra de rij niet meer
   mocht afbreken, werden de knoppen samengedrukt en braken "alle stielen",
   "CV & Verwarming" en "hoofdberoep" VANBINNEN af naar twee regels — goed voor
   56px in plaats van 34. Vandaar white-space:nowrap op elke knop.

   Alles blijft nu op één lijn: de stielenrij mag krimpen en desnoods zelf
   horizontaal schuiven, zonder zichtbare schuifbalk. Dat maakt het ook
   toekomstvast: er mogen stielen bijkomen zonder dat de kop weer openbreekt.
   Opgemeten na de wijziging: 79px -> 34px, en met negen stielknoppen hoeft er
   nog niet eens geschoven te worden. */
.fg-listhead.fg-listhead2{ flex-wrap:nowrap; margin-bottom:6px; }
.fg-listhead2 .lh-filters{ display:flex; align-items:center; gap:7px; flex-wrap:nowrap; row-gap:0;
  flex:1 1 0; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.fg-listhead2 .lh-filters::-webkit-scrollbar{ height:0; width:0; }
.fg-listhead2 .lh-filters > *{ flex:0 0 auto; white-space:nowrap; }
.fg-listhead2 .lh-acties{ display:flex; align-items:center; gap:7px; margin-left:auto; flex:0 0 auto; white-space:nowrap; }
.fg-statchip.sm{ padding:5px 10px; font-size:12.5px; }
.fg-statchip.sm b{ font-variant-numeric:tabular-nums; margin-left:3px; }

/* build 636 — de postbus-rij boven de inbox is nu een filter, geen etiket */
.fg-pbrij .fg-statchip{ cursor:pointer; font-weight:700; }
.fg-pbrij .fg-statchip .n{ margin-left:7px; font-variant-numeric:tabular-nums; opacity:.7; }
.fg-pbrij .fg-statchip .nieuw{ margin-left:6px; color:#e02424; font-weight:800; }
.fg-pbrij .fg-statchip.leeg{ opacity:.5; }
.fg-pbrij .fg-statchip.on{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 12%,transparent); }
.fg-pbrij .fg-statchip.on .n{ opacity:1; }

/* ============================================================
   BUILD 641 — HET REGISTER VAN DE DOCUMENTEN (fg-mdregister)
   Patrick: "we hadden zoveel ideeen en gesprekken, waarvan maar 15% echt gemaakt is."
   Eén lijst van alles wat in de 238 documenten begraven ligt, met de bron en het
   letterlijke citaat erbij, en per regel een knop om te beslissen wat ermee gebeurt.
   ============================================================ */
.fgmr-box{ width:min(1080px,97vw); }
.fgmr-body{ display:flex; flex-direction:column; min-height:0; flex:1; }
.fgmr-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px 6px; }
.fgmr-uitleg{ font-size:12px; line-height:1.55; padding:0 14px 10px; }
.fgmr-list{ overflow:auto; padding:4px 14px 14px; display:flex; flex-direction:column; gap:8px; }
.fgmr-rij{ border:1px solid var(--line); border-radius:11px; padding:10px 12px; background:var(--card); }
.fgmr-rij:hover{ border-color:var(--brand); }
.fgmr-kop{ display:flex; align-items:baseline; gap:8px; }
.fgmr-soort{ font-size:15px; flex:0 0 auto; cursor:help; }
.fgmr-onderwerp{ font-weight:700; font-size:13.5px; flex:1; }
.fgmr-status{ font-size:11.5px; font-weight:800; white-space:nowrap; }
.fgmr-oms{ font-size:12.5px; color:var(--muted); margin:4px 0 0; line-height:1.5; }
.fgmr-bron{ font-size:11px; color:var(--muted); margin:6px 0 0; }
/* het citaat is het bewijs dat er niets verzonnen is — dus laten we het ook zien */
.fgmr-bewijs{ font-size:11.5px; font-style:italic; color:var(--muted); margin:5px 0 0;
  padding:5px 10px; border-left:3px solid color-mix(in srgb,var(--brand) 45%,transparent);
  background:color-mix(in srgb,var(--muted) 7%,transparent); border-radius:0 7px 7px 0; }
.fgmr-knoppen{ display:flex; gap:5px; flex-wrap:wrap; margin:8px 0 0; }

/* ============================================================
   BUILD 641 — DE TEGEL "VANDAAG" (fg-dagstand)
   Het echte gevaar op een startdag is niet dat er iets misgaat, maar dat je het niet
   ziet: stilte ziet er precies hetzelfde uit als "ze hebben nog niet gereageerd".
   Daarom staat het OORDEEL bovenaan in gewone taal, en pas daaronder de cijfers.
   ============================================================ */
.fgds-box{ width:min(560px,96vw); }
.fgds-body{ padding:14px 16px 12px; overflow:auto; }
.fgds-kaart{ border-radius:12px; padding:12px 14px; margin:0 0 12px; border:1px solid var(--line); }
.fgds-kaart b{ display:block; font-size:14.5px; margin:0 0 3px; }
.fgds-kaart span{ display:block; font-size:12.5px; line-height:1.55; color:var(--muted); }
.fgds-kaart.groen{ background:color-mix(in srgb,#16a34a 10%,transparent); border-color:color-mix(in srgb,#16a34a 38%,transparent); }
.fgds-kaart.groen b{ color:#15803d; }
.fgds-kaart.oranje{ background:color-mix(in srgb,#f59e0b 12%,transparent); border-color:color-mix(in srgb,#f59e0b 42%,transparent); }
.fgds-kaart.oranje b{ color:#b45309; }
.fgds-kaart.rood{ background:color-mix(in srgb,#dc2626 11%,transparent); border-color:color-mix(in srgb,#dc2626 42%,transparent); }
.fgds-kaart.rood b{ color:#b91c1c; }
.fgds-kaart.grijs{ background:color-mix(in srgb,var(--muted) 9%,transparent); }
.fgds-cijfers{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.fgds-cijfer{ border:1px solid var(--line); border-radius:11px; padding:10px 8px; text-align:center; background:var(--card); }
.fgds-cijfer.nul{ opacity:.55; }
.fgds-cijfer .ic{ display:block; font-size:16px; }
.fgds-cijfer .n{ display:block; font-size:22px; font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums; }
.fgds-cijfer .l{ display:block; font-size:11px; color:var(--muted); }
.fgds-merken{ display:flex; flex-direction:column; gap:5px; margin:12px 0 0; }
.fgds-merk{ display:flex; justify-content:space-between; gap:10px; font-size:12px;
  padding:7px 11px; border:1px solid var(--line); border-radius:9px; }
.fgds-merk span{ color:var(--muted); }
.fgds-voet{ font-size:11px; line-height:1.5; margin:12px 0 0; }

/* BUILD 642 — kast tegen brein (fg-brein) */
.fgbr-box{ width:min(760px,96vw); }
.fgbr-body{ padding:12px 16px 16px; overflow:auto; }
.fgbr-ok{ padding:16px; border-radius:11px; font-size:13.5px; line-height:1.6;
  background:color-mix(in srgb,#16a34a 10%,transparent); border:1px solid color-mix(in srgb,#16a34a 38%,transparent); }
.fgbr-rij{ display:grid; grid-template-columns:1fr auto 26px; gap:10px; align-items:center;
  padding:7px 10px; border:1px solid var(--line); border-radius:9px; margin:0 0 5px; font-size:12.5px; }
.fgbr-rij .nm{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fgbr-rij .ms{ color:var(--muted); font-size:11.5px; white-space:nowrap; }
.fgbr-rij .st{ text-align:center; }

/* ============================================================
   BUILD 644 — HET OPRUIMVENSTER LEESBAAR
   Patrick, met het venster open op GP Consultancy: "zelfs niet leesbaar."
   Terecht. De uitleg was één streep van 12px grijze tekst over de volle breedte —
   op de goud-op-donkere GP-huisstijl is dat helemaal niet te doen. Regels van
   1300 pixels leest niemand; het oog verliest de volgende regel.
   Nu: twee korte regels met een gekleurde stip, groter gezet, met echte regelafstand,
   en de tekstbreedte begrensd op wat een mens comfortabel leest.
   ============================================================ */
.fgcl-uitleg{ padding:12px 16px 14px; display:flex; flex-direction:column; gap:7px;
  border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--muted) 7%,transparent); }
.fgcl-legende{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline;
  font-size:13.5px; line-height:1.55; max-width:92ch; }
.fgcl-legende b{ font-weight:700; }
.fgcl-legende .bol{ width:11px; height:11px; border-radius:50%; display:block; margin-top:5px; flex:0 0 auto; }
.fgcl-legende .bol.groen{ background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent); }
.fgcl-legende .bol.oranje{ background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent); }
.fgcl-slot{ font-size:12.5px; line-height:1.55; color:var(--muted); max-width:92ch; margin-top:2px; }
/* en de regels zelf een maat groter, want dit is een lijst waarop je beslist */
.fgcl-name{ font-size:13.5px !important; }
.fgcl-meta{ font-size:12.5px !important; }
.fgcl-status{ font-size:13.5px !important; }

/* ============================================================
   BUILD 647 — OPROEPEN VAN DE WEBSITE, BOVENAAN IN OPDRACHTEN
   ------------------------------------------------------------
   Patrick, 6/9/2026: "ik was zeker dat die oproepen kwamen in Opdrachten!!!!"
   Ze kwamen nergens. Nu staan ze waar hij ze zocht, en ze zijn het eerste wat je ziet:
   dit is het enige scherm waar aan de andere kant iemand op een telefoontje wacht.
   Rood en pulserend enkel bij urgentie NU — anders went het en kijk je eroverheen.
   ============================================================ */
.fg-oproepen{ margin:0 0 16px; border:1px solid var(--line-strong); border-radius:14px;
  background:var(--card); overflow:hidden; }
.fgop-kop{ display:flex; align-items:center; gap:10px; padding:11px 15px;
  font-weight:800; font-size:14px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--brand) 8%,transparent); }
.fgop-telling{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--muted); }
.fgop-leeg{ padding:14px 16px; color:var(--muted); font-size:13px; line-height:1.55; max-width:78ch; }
.fgop-grid{ display:grid; gap:10px; padding:12px 14px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.fgop-kaart{ border:1px solid var(--line); border-radius:12px; padding:11px 13px;
  background:var(--card-2); display:flex; flex-direction:column; gap:5px; min-width:0; }
.fgop-kaart.nu{ border-color:#e5484d; background:color-mix(in srgb,#e5484d 8%,var(--card-2)); }
.fgop-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fgop-vak{ font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.fgop-nu{ font-size:11px; font-weight:900; letter-spacing:.06em; color:#fff; background:#e5484d;
  padding:2px 7px; border-radius:999px; animation:fgop-klop 1.5s ease-in-out infinite; }
@keyframes fgop-klop{ 50%{ opacity:.55 } }
.fgop-wacht{ margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.fgop-naam{ font-size:15.5px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.fgop-sub{ font-size:12.5px; color:var(--muted); line-height:1.5; overflow-wrap:anywhere; }
.fgop-acties{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:5px; }
.fgop-acties .fg-btn{ text-decoration:none; }
.fgop-tel{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; margin-left:auto; }

/* ============================================================
   BUILD 648 — DE INBOX-REGELS
   ------------------------------------------------------------
   Patrick, 6/9/2026: "wederom ook hier die layout, kijk zelf en verbeter overal."
   De oude regel was twee blokjes boven elkaar: het ONDERWERP stond afgekapt in een
   smalle kolom terwijl het FRAGMENT over de volle breedte liep. Het belangrijkste
   kreeg dus de minste plaats. Nu één regel: afzender links op vaste breedte, dan
   onderwerp + fragment op dezelfde lijn (het onderwerp wijkt als laatste){ display:grid; grid-template-columns:210px minmax(0,1fr) 74px 30px;
  align-items:center; gap:14px; padding:9px 10px 9px 12px; }
/* onderwerp + fragment op één lijn; samen afgekapt{ display:flex; align-items:baseline; gap:8px; min-width:0;
  white-space:nowrap; overflow:hidden; }

/* ============================================================
   BUILD 648 — DE VIER MERKTEGELS GELIJK GETROKKEN
   ------------------------------------------------------------
   Patrick, 6/9/2026: "hier ook die 4 tegels elk met andere gegevens? is dit standaard?
   maak het beter!" FastHelp toonde leveranciers, Fast Movers volgers, GP ongelezen mail
   en Sun Energy een tekstje. Vier tegels naast elkaar die je niet kunt vergelijken zijn
   geen dashboard. Nu overal dezelfde opbouw: volgers groot, daaronder fiches en
   openstaande oproepen, en rechts de stand van zaken van dat merk.
   ============================================================ */
/* BUILD 689 — Patrick, 10/9/2026, met een schermafdruk van de lichte stand erbij:
   "en kijk naar licht? is dit goed vind je zelf?" Nee, en hij had gelijk.
   Deze regels stonden op rgba(255,255,255,.86) — wit met doorzicht. Op een donkere
   tegel leest dat prima; op de lichte tegel is het wit op bijna-wit, dus onzichtbaar.
   Zelfde fout als het grote cijfer van build 688, alleen een regel lager.
   Nu de gewone tekstkleuren, die in beide standen meedraaien. */
.fg-bc-mini{ display:flex; align-items:center; gap:12px; margin-top:8px;
  font-size:12px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; flex-wrap:wrap; }
.fg-bc-mini .op{ color:var(--danger); }           /* openstaande oproepen springen eruit */
.fg-bc-mini .st{ margin-left:auto; font-weight:600; font-size:11px;
  color:var(--muted); text-transform:lowercase; }

/* build 649 — de schaar op een voorbeeld dat nog een achtergrond heeft (Beeldatelier).
   Patrick: "als er een bij is dat niet transparant is, hier met een klik transparant." */
.fgba-refwrap{ position:relative; flex:0 0 auto; display:inline-block; line-height:0; }
.fgba-knip{ position:absolute; right:-4px; bottom:-4px; width:22px; height:22px; padding:0;
  border:1px solid var(--line-strong); border-radius:50%; background:var(--card);
  color:var(--ink); font-size:11px; line-height:1; cursor:pointer; z-index:2;
  box-shadow:0 2px 6px rgba(0,0,0,.35); }
.fgba-knip:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.fgba-knip:disabled{ opacity:.6; cursor:default; }

/* build 650 — de kop boven de handmatige opdrachten. Klein en op zijn plaats: de knop
   staat bij wat hij aanmaakt, niet boven de oproepen van de website. */
.fg-handkop{ display:flex; align-items:center; gap:10px; margin:4px 0 8px;
  font-size:13px; font-weight:800; color:var(--muted); }
.fg-handkop span{ letter-spacing:.02em; }
.fg-handkop .fg-btn{ margin-left:auto; }

/* build 650 — de paginakop teruggebracht tot één regel (zie de uitleg in fg-boot.js).
   De tabbalk zegt al waar je bent; deze regel bevestigt het merk en het scherm, klaar. */
.fg-crumbrij{ display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; row-gap:6px; }
.fg-crumbsep{ color:var(--muted); opacity:.5; }
.fg-schermnaam{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.fg-pagehead{ margin-bottom:10px; }

/* build 650 — dezelfde dubbele kop als bij Opdrachten zat ook op Finance en Ideeën:
   de paginatitel zei het al, de balk eronder herhaalde het. Alleen de knop blijft over,
   rechts uitgelijnd, zonder een lege regel te maken. */
.fg-listhead.knopalleen{ justify-content:flex-end; min-height:0; margin-bottom:8px; }

/* ============================================================
   BUILD 653 — DE MERKTEGELS LEESBAAR
   ------------------------------------------------------------
   Patrick, 6/9/2026: "de tegels rechtsboven in groen het + volgers is echt niet leesbaar"
   en "de andere info mag ook iets groter".
   De oorzaak: het groeibadge stond op een DOORZICHTIGE groene achtergrond
   (color-mix met transparent) met lichtgroene tekst — en daarachter ligt de volle,
   heldere merkkleur van de tegel. Licht op licht dus. Nu een dichte, donkere pil met
   heldere tekst erop: die leest op elke tegel, of de mascotte er nu achter staat of niet.
   En de cijfers eronder een maat groter, want je leest ze in één oogopslag vanaf een
   afstand — niet met je neus op het scherm.
   ============================================================ */
.fg-brandcard .fg-bc-delta{ font-size:12.5px; padding:4px 11px; letter-spacing:0;
  background:rgba(8,12,18,.82) !important; backdrop-filter:blur(2px); }
.fg-brandcard .fg-bc-delta.up{ color:#6ef2a0 !important; border:1px solid rgba(110,242,160,.45) !important; }
.fg-brandcard .fg-bc-delta.down{ color:#ff9ea1 !important; border:1px solid rgba(255,158,161,.45) !important; }
.fg-brandcard .fg-bc-delta.flat{ color:#d6dfec !important; border:1px solid rgba(255,255,255,.28) !important; }
/* de rest van de tegel een maat groter en steviger tegen de achtergrond */
.fg-brandcard .bname{ font-size:19px; }
.fg-brandcard .bnum{ font-size:30px; }
.fg-brandcard .blbl{ font-size:13px; color:var(--muted); }
.fg-bc-mini{ font-size:13px; gap:14px; }
.fg-bc-mini .st{ font-size:12px; color:var(--muted); }

/* build 657 — het groeibadge verhuist van rechtsboven naar de onderste regel, naast de
   stand van zaken. Patrick: "kan je de groene pijltjes onder live zetten?" Ze zeggen
   allebei hoe het met dat merk gaat, dus horen ze bij elkaar in plaats van op twee hoeken. */
.fg-bc-groei{ margin-left:auto; display:inline-flex; align-items:center; }
.fg-bc-groei:empty{ display:none; }
.fg-bc-groei .fg-bc-delta{ margin-left:0; }
.fg-bc-mini .st{ margin-left:8px; }

/* ============================================================
   BUILD 670 · 10/9/2026 — DE INBOX ALS ECHTE MAILBOX
   Patrick: "met een werking en layout van een echte mailbox, Outlook{ flex:0 0 6px; cursor:col-resize; background:transparent; position:relative; }
/* BUILD 868 — Patrick: "handtekeningen worden witte vakken! heel onprofessioneel".
   Een echte brief is in HTML opgemaakt voor WIT papier met donkere letters. Wij tekenden
   hem op onze donkere achtergrond, en dan valt elk wit blok uit de handtekening op als een
   gat in het scherm. Gemeten op de mail van VSL-System: in de hele bron staat nul keer een
   witte kleur en nul tabellen — het wit kwam dus van ons, niet van de afzender.
   Nu krijgt de brief zijn eigen witte blad{ margin:12px 0 0; font-size:.9rem; line-height:1.55; overflow-x:auto;
  background:#ffffff; color:#15181d; border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:16px 18px; }

/* de gespreksrij: compact, drie regels{ display:grid; grid-template-columns:26px 26px 1fr auto; gap:9px; align-items:start;
  padding:9px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
/* BUILD 675 — het vuilbakje in elke regel. Altijd zichtbaar (zwak), vol bij hover{ background:transparent; border:0; cursor:pointer; font-size:.95rem; opacity:.28; padding:2px 4px; line-height:1; border-radius:8px; color:inherit; font-family:inherit; }

/* BUILD 674 — de gedeelde inbox binnen een merk-tegel. Hij krijgt hier zijn hoogte;
   de drie kolommen en alle stijlen komen uit hetzelfde blok als het openingsblad,
   zodat er maar één inbox te onderhouden is. */
.fg-inboxhost{ height:calc(100vh - 210px); min-height:420px; display:flex; }
@media(max-width:1180px){ .fg-inboxhost{ height:auto; min-height:0; display:block; } }

/* ---- BUILD 693 — de laadstrook bij een tegelklik --------------------------
   Vervangt de tabelinhoud terwijl de gegevens onderweg zijn. Bewust rustig en
   in de merkkleur: je ziet meteen dát je in het juiste merk zit, en niet meer
   het dashboard dat je net verlaten hebt. */
.fg-laden{display:flex;flex-direction:column;gap:14px;padding:26px 4px 10px}
.fg-laden-bal{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);animation:fg-laden-draai .8s linear infinite}
.fg-laden-rijen{display:flex;flex-direction:column;gap:10px}
.fg-laden-rijen i{display:block;height:46px;border-radius:10px;background:linear-gradient(90deg,var(--card) 0%,var(--line) 45%,var(--card) 90%);background-size:220% 100%;animation:fg-laden-veeg 1.15s ease-in-out infinite}
.fg-laden-rijen i:nth-child(2){animation-delay:.08s}
.fg-laden-rijen i:nth-child(3){animation-delay:.16s}
.fg-laden-rijen i:nth-child(4){animation-delay:.24s}
.fg-laden-rijen i:nth-child(5){animation-delay:.32s}
.fg-laden p{margin:2px 0 0;color:var(--muted-2);font:600 .86rem Inter,system-ui,sans-serif}
@keyframes fg-laden-draai{to{transform:rotate(360deg)}}
@keyframes fg-laden-veeg{0%{background-position:120% 0}100%{background-position:-40% 0}}

/* ============================================================
   BUILD 757 · 13/9/2026 — DE KEUZELIJST AGENT WAS AFGESNEDEN.
   Patrick: "en hoe kan ik de agent aanpassen aub?"
   Hij stond er wel, maar je kon hem niet zien. De rechterkolom (.fgf2-rail) is een
   flex-kolom, en .fgf2-sales draagt overflow:hidden. Past de kolom niet, dan KRIMPT
   die kaart — flex doet dat vanzelf — en snijdt ze haar eigen inhoud af. Het label
   AGENT was net nog zichtbaar, de keuzelijst eronder niet meer.
   Twee regels: niets in die kolom mag nog krimpen, en de saleskaart mag niet meer
   afsnijden.
   ============================================================ */
.fgf2-rail > *{ flex:0 0 auto; }

/* BUILD 761 — het adres achter de naam in de mailijst. Klein en grijs: de naam blijft
   het eerste wat je leest{ color:var(--muted); font-weight:500; font-size:.82em; margin-left:6px; }

/* BUILD 759 · 13/9/2026 — EEN GROTER MAILVENSTER MOET EEN GROTER SCHRIJFVAK GEVEN.
   Patrick: "bij de email als we de pop-up vergroten, geen gewoon grijs veld maar de
   mail groter maken." Het venster rekte mee, het tekstvak bleef op acht regels staan{ display:flex; flex-direction:column; }

/* ===== BUILD 762 — DE OPSTELVENSTER GROEIT MEE =====
   Patrick: "als we de pop up vergroten, geen gewoon grijs veld maar de mail groter
   maken." De basisregel klemde het opstelblok op max-height:44vh met een eigen
   schuifbalk; daardoor schoven Van en Afzendernaam uit beeld en bleef er onderaan
   een dood grijs vlak over. Hier halen we die klem weg: de adresregels houden hun
   eigen hoogte{ flex:1 1 auto; min-height:0; max-height:none; overflow:auto; }

/* ===== BUILD 815 · 17/09/2026 — HET OPSTELVAK KRIJGT DE RUIMTE =====
   Patrick: "als we op forward klikken zien we geen aan en cc en bcc" en
   "in de email zelf gebeurd dit als ik op doorsturen duw, ook niet goed in layout".
   Het gelezen bericht en het opstelvak deelden dezelfde hoogte, en een lange mail
   won die verdeling: van het opstelvak bleef een strookje van twee regels over.
   Zodra je Antwoorden of Doorsturen duwt krijgt de doos de klas fgml-composing:
   het gelezen bericht krimpt tot een leesstrook, alle overige hoogte gaat naar
   Aan, Cc, Bcc{ flex:0 1 auto; max-height:24vh; }

/* ===== BUILD 815 — DE REKGREPEN BINNEN DE RAND =====
   De acht grepen lagen tot 4px BUITEN de doos, en de doos knipt alles buiten haar
   rand weg (overflow:hidden). Er bleef amper iets te grijpen over{ z-index:9; }

/* ===== BUILD 816 · 17/09/2026 — HET OPSTELVAK OPGERUIMD =====
   Patrick: "de layout is moeilijk werkbaar, kan beter toch".
   Wat er weg moest: een labelkolom van 110px voor woorden van drie letters, en
   vier adresregels die altijd open stonden terwijl je er meestal maar één gebruikt.
   Cc en Bcc zitten nu achter een knopje{ padding:10px 16px 10px; gap:0; }

/* ===== BUILD 817 · 17/09/2026 — TIJDENS HET OPSTELLEN IS HET OPSTELVAK DE BAAS =====
   Patrick: "doorsturen nadat ik mail openklikte, nog altijd die afval van boven?"
   Het gelezen bericht{ display:none; }

/* ===== BUILD 818 · 17/09/2026 — HET SCHRIJFVELD VULT HET VENSTER =====
   Patrick: "enkel het schrijfveld nu maken op de grootte van de pop-up".
   Het opstelvak grόeide wel mee met het venster, maar het tekstvak niet: dat bleef
   op zijn eigen hoogte staan en eronder bleef een dode grijze strook liggen.
   De oorzaak: het opstelvak stond op overflow:auto en werd zélf een scrollvak, en
   het tekstvak had nog een min-height die zijn eigen hoogte bepaalde in plaats van
   de ruimte te volgen. Nu scrollt het opstelvak niet meer (overflow:hidden), houden
   de adresregels en de knoppenrij hun eigen hoogte{
  display:flex !important; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; }

/* ===== BUILD 819 · 17/09/2026 — VERVERS NAAST NIEUWE MAIL =====
   Patrick: "de knop ververs uitmeten dat hij mooi naast nieuwe email komt te staan".
   De kop stond op space-between met drie blokken{ justify-content:flex-end; gap:10px; }

/* ===== BUILD 819 — HET TELLERVAK VAN AFGEWERKTE FICHES BLIJFT UIT DE INBOX =====
   Patrick: "verberg dat tellervak van afgewerkte fiches ook maar overal op de
   inboxen". Het hoort bij de fiches, niet bij de post. Overal waar een
   berichtenlijst op het scherm staat{ display:none !important; }

/* ===== BUILD 823 · 17/09/2026 — GELEZEN EN ONGELEZEN UIT ELKAAR HOUDEN =====
   Patrick: "ongelezen en gelezen emails zijn bijna niet te onderscheiden, fix dat ook".
   Klopt: het enige verschil was een tint van 6% en een iets zwaardere naam — op een
   donker scherm zie je dat niet. Een echte mailbox doet het omgekeerd: ongelezen is
   VOL, gelezen is INGETOGEN. Dus krijgt ongelezen een volle oranje balk links, volle
   inkt en vet{ font-weight:500; color:var(--muted); }

/* ===== BUILD 817 — DE KOP VAN DE BERICHTENLIJST DEKT AF =====
   Patrick: "mails schuiven onder header door?" De kop stond op 88% doorschijnend
   met een blur eroverheen en op z-index 2. Waar de blur niet pakt — en de rijen
   staan zelf op position:relative — schoof een rij er zichtbaar overheen. */
/* 14/10/2026 - hier stond background:var(--surface) !important. In de donkere stand is
   dat #161b24, terwijl het tweekleurige blok de TEKST al op zwart had gezet: donkere
   letters op een donkere balk. De kop van de lijst hoort bij het LICHTE werkvlak; het
   tweekleurige blok regelt dat al{ backdrop-filter:none; z-index:30 !important; }

/* ===== BUILD 768 — DE HANDTEKENING-WERKBANK =====
   Je schrijft nu rechtstreeks in het beeld zelf in plaats van HTML te typen. */
.fgsig-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  padding:6px; border:1px solid var(--line); border-radius:9px; background:var(--bg); }
.fgsig-bar button{ min-width:30px; height:28px; padding:0 7px; border:1px solid transparent;
  background:transparent; color:inherit; border-radius:7px; cursor:pointer; font-size:13px; line-height:1; }
.fgsig-bar button:hover{ background:rgba(127,127,127,.16); }
.fgsig-bar select{ height:28px; border:1px solid var(--line); border-radius:7px;
  background:var(--card); color:inherit; font-size:12.5px; padding:0 5px; }
.fgsig-sep{ width:1px; height:18px; background:var(--line); margin:0 3px; }
.fgsig-ed{ flex:1 1 auto; min-height:200px; overflow:auto; background:#fff; color:#222;
  border:1px solid var(--line); border-radius:10px; padding:14px; outline:none;
  font:14px/1.55 Arial, Helvetica, sans-serif; }
.fgsig-ed:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(217,134,30,.18); }
.fgsig-ed img{ max-width:100%; cursor:pointer; }
.fgsig-ed img.fgsig-gekozen{ outline:2px solid var(--brand); outline-offset:2px; }
.fgsig-galerij{ display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  max-height:96px; overflow:auto; }
.fgsig-galerij .fg-btn{ padding:4px; background:#fff; }
.fgsig-beeldbar{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:6px;
  border:1px solid var(--brand); border-radius:9px;
  background:color-mix(in srgb, var(--brand) 10%, transparent); }
.fgsig-beeldbar button{ min-width:34px; height:26px; padding:0 8px; border:1px solid var(--line);
  background:var(--card); color:inherit; border-radius:7px; cursor:pointer; font-size:12px; }
.fgsig-beeldbar button.aan{ background:var(--brand); color:var(--on-brand); border-color:transparent; font-weight:800; }
.fgsig-beeldbar button.danger{ color:#c0392b; }
.fgsig-beeldlabel{ font-size:12px; font-weight:800; opacity:.8; margin-right:4px; }

/* ===== BUILD 768 — HET VINKJE MAIL WORDT GROEN =====
   Patrick: "maak hem groen bv, dan zien welke logos en mascottes meegenomen worden."
   Oranje is de huisstijl en staat overal; groen zegt hier één ding: dit gaat mee. */
.fgdbx-sig.aan, .fgmv-sig.aan{ background:#16a34a !important; color:#fff !important;
  border-color:#16a34a !important; font-weight:800; }
.fgdbx-sig.aan:hover, .fgmv-sig.aan:hover{ filter:brightness(1.07); }

/* ===== BUILD 768 — BLADEREN IN HET KIJKVENSTER ===== */
.fgmv-nav{ display:inline-flex; align-items:center; gap:4px; margin:0 8px 0 auto; }
.fgmv-nav .fg-btn{ min-width:30px; padding:4px 9px; font-size:15px; line-height:1; }
.fgmv-nav .fg-btn[disabled]{ opacity:.35; cursor:default; }
.fgmv-teller{ font-size:12px; font-variant-numeric:tabular-nums; opacity:.7; min-width:52px; text-align:center; }
.fgf2-sales{ overflow:visible !important; }
.fgf2-sales select, .fgf2-sales input{ width:100%; box-sizing:border-box; }
/* de keuzeknopjes op het tabblad Aanmelding */
.fgf2-kies{ display:inline-block; border:1px solid var(--line); background:var(--card-2);
  color:inherit; border-radius:99px; padding:5px 12px; margin:0 6px 6px 0; font-size:12.5px;
  cursor:pointer; line-height:1.5; }
.fgf2-kies:hover{ border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); }
.fgf2-kies.aan{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700; }
@media (prefers-reduced-motion: reduce){.fg-laden-bal,.fg-laden-rijen i{animation:none}}

/* ============================================================
   BUILD 747 · 13/9/2026 — DE TEGELS, VOLLEDIG ZICHTBAAR.
   Patrick: "zet de tegels mooi en volledig zichtbaar met alle informatie erin!!!!"
   Drie dingen stonden in de weg, alle drie nagemeten in dit bestand zelf:
     1. het raster stond VAST op vijf kolommen. Met zes tegels viel Sun Energy alleen
        op een tweede rij — scheef, en de tegels zelf te smal voor hun eigen cijfers.
     2. de kaart was 158px hoog met de onderste regel tegen de rand aan; de
        cijferregel en de grafieklijn vochten om dezelfde plaats.
     3. het bouwbord is weg (build 747), maar zijn rij stond nog met minmax(220px,1fr)
        in het raster — een gat van 220 pixels onder de tegels.
   Deze regels staan achteraan en winnen dus van alles wat er eerder over gezegd is.
   De oude regels blijven staan: ze worden ook buiten het startscherm gebruikt, en ze
   hier weghalen zou dingen breken die vandaag werken.
   ============================================================ */
.fg-home{ grid-template-rows:auto auto auto auto !important; }
.fg-home>.fg-brands{ grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-rows:minmax(200px,auto); align-content:start; }
@media (max-width:1180px){ .fg-home>.fg-brands{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:700px){ .fg-home>.fg-brands{ grid-template-columns:minmax(0,1fr) !important; } }
.fg-brandcard{ min-height:200px !important; padding:16px 18px 0 !important; }
.fg-bc-top{ padding-right:78px !important; }
.fg-brandcard .bname{ font-size:20px !important; max-width:none !important; }
.fg-brandcard .bnum{ font-size:38px !important; }
.fg-brandcard .blbl{ font-size:13px !important; max-width:none !important; }
.fg-bc-bot{ margin-top:12px !important; }
.fg-bc-mini{ margin-top:12px !important; row-gap:6px; column-gap:15px; }
.fg-bc-spark{ margin-top:12px !important; height:34px !important; }
.fg-bc-masc{ width:clamp(56px,26%,88px) !important; max-height:68% !important; opacity:.95 !important; }
/* het bouwbord: het attribuut moet winnen van de klasse, anders blijft het staan */
.fg-bouwboard[hidden], #fgBouwBoard[hidden]{ display:none !important; }

/* ============================================================================
   BUILD 782 · 15/09/2026 — FLASH SEARCH: DE RIJ UIT ELKAAR GEHAALD
   Patrick: "we gaan eerst het scherm van flash search volledig mooi maken in
   layout" en "de breedte van potentieel ook veel minder zetten".
   Het probleem was niet de kleur maar de opbouw: alles stond in dezelfde grijze
   zin onder de bedrijfsnaam, dus alles woog even zwaar. Hieronder krijgen de
   drie soorten informatie elk hun eigen vorm.
   ============================================================================ */

/* WAT ER ONTBREEKT — drie vaste plaatsen in een eigen kolom.
   Fel = het mist, flauw = het is er. Zo lees je een kolom in plaats van een zin,
   en een volledige fiche oogt vanzelf rustig. Een merkje dat op élke rij staat
   is geen informatie meer; een gat dat oplicht wel. */
.fhfl-gaten{ display:flex; gap:7px; align-items:center; }
.fhfl-gat{ font-size:13px; line-height:1; opacity:.15; filter:grayscale(1) contrast(.4);
  transition:opacity .12s ease, filter .12s ease; }
.fhfl-gat.op{ opacity:1; filter:none; }

/* NIEUW OF AAN TE VULLEN — een randje links, geen merkje in de tekst.
   Dat zie je zonder te lezen, en het kost geen ruimte in de regel. */
.fhfl-rij{ border-left:3px solid transparent; }
.fhfl-rij.is-nieuw{ border-left-color:color-mix(in srgb, var(--brand) 60%, transparent); }
.fhfl-rij.is-aanvullen{ border-left-color:color-mix(in srgb, var(--muted) 38%, transparent); }

/* DE TELLERS BOVENAAN, ALS FILTER.
   "93 zonder handelsnaam" hoort één keer in de kop te staan in plaats van honderd
   keer in de lijst — en je moet erop kunnen klikken om net die fiches te zien. */
.fhfl-gatrij{ display:flex; gap:6px; flex-wrap:wrap; }
.fhfl-gatknop{ font:inherit; font-size:12px; color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:999px; padding:3px 11px; cursor:pointer;
  white-space:nowrap; transition:border-color .12s ease, color .12s ease, background .12s ease; }
.fhfl-gatknop b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.fhfl-gatknop:hover{ border-color:color-mix(in srgb, var(--brand) 50%, var(--line)); color:var(--ink); }
.fhfl-gatknop.on{ background:color-mix(in srgb, var(--brand) 15%, transparent);
  border-color:color-mix(in srgb, var(--brand) 60%, transparent); color:var(--ink); }
.fhfl-gatknop:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* DE SCORE IS HET ANKER — smal, maar het sterkste element in de rij.
   Patrick koos: het oog gaat eerst naar wie het meest waard is. */
.fg-table .fhfl-badge{ font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-.01em; }

/* DE DRIE BEROEPSTOESTANDEN.
   Patrick, 15/9: "eerlijk, hoofdberoep en nevenberoep vind ik wel correcte informatie
   hoor". Klopt, en beter dan alleen de uitzondering tonen: zo weet je altijd waar je
   aan toe bent, én wordt zichtbaar wanneer de KBO het gewoon niet zegt. Het verschil
   zit in de vorm, niet in het weglaten. */
.fhfl-beroep.hoofd{ color:var(--muted); }
.fhfl-beroep.neven{ color:var(--warn, var(--brand)); font-weight:600; }
.fhfl-beroep.onbekend{ color:var(--muted); opacity:.55; font-style:italic; }

/* DE STIEL — welk van je vakken heb je voor je. Stond nergens, terwijl er drie
   stielen door elkaar in dezelfde lijst staan. */
.fhfl-stiel{ color:var(--ink); font-weight:600; }

/* EEN ECHTE ZAAK herken je aan zijn beoordelingen. */
.fhfl-ster{ color:var(--ok, #2fbf71); font-weight:600; font-variant-numeric:tabular-nums; }
.fhfl-verrijkt{ opacity:.6; }

/* DE WERKTELLER IN DE PAGINAKOP — één regel per persoon.
   Patrick: "ik wil gisele en patrick apart zien staan dag week maand jaar". */
.fg-count[data-werk-teller]{ display:inline-flex; align-items:center; gap:8px;
  /* BUILD 790 - het blokje werd getekend als een regel en daarna gevuld met drie
     regels; daardoor sprong alles eronder. De ruimte staat op voorhand vast.
     BUILD 791 - en nu ook compacter: 42px, precies zo hoog als de autofill ernaast,
     zodat de kop een rij is in plaats van een blok. */
  min-height:42px; box-sizing:border-box; padding:5px 12px; }
.fg-wt-ic{ font-size:12px; opacity:.65; }
.fg-wt-grid{ display:grid; grid-template-columns:auto repeat(4, 2.5em);
  gap:0 6px; align-items:baseline; }
.fg-wt-grid i{ font-style:normal; font-size:7.5px; line-height:1.1; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); opacity:.7; text-align:right; }
.fg-wt-grid b{ font-size:10px; line-height:1.3; font-weight:700; padding-right:5px; white-space:nowrap; }
.fg-wt-grid span{ font-size:10px; line-height:1.3; font-variant-numeric:tabular-nums; text-align:right; }
.fg-wt-kop{ font-size:11px !important; opacity:.8 !important; text-align:left !important; }   /* build 791: het poppetje is een KOPJE boven de namen, niet het merkteken van Patrick */

/* Op een smal scherm mag de teller wijken voor de kruimels. */
@media (max-width: 900px){
  .fg-count[data-werk-teller]{ display:none; }
  .fhfl-gatrij{ width:100%; }
}

/* ============================================================
   BUILD 788 · 16/09/2026 — het scherm rustig gezet.
   Patrick: "bedrijf toevoegen had ik gevraagd naast CRM leveranciers te zetten,
   maak daar gewoon een glastegel van, is nu veel te sterk aanwezig en wordt bijna
   nooit gebruikt" — en: "de autofill begint te bibberen en verspringen".
   ============================================================ */

/* Een handeling die je twee keer per maand doet, hoort niet te schreeuwen. */
.fg-glastegel{
  margin-left:10px; padding:4px 11px; border-radius:999px; cursor:pointer;
  font-size:.76rem; font-weight:600; letter-spacing:.2px; line-height:1.5;
  background:rgba(120,140,170,.10); border:1px solid rgba(120,140,170,.26);
  color:#5b6b83; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .14s, border-color .14s, color .14s;
}
.fg-glastegel:hover{ background:rgba(217,134,30,.12); border-color:rgba(217,134,30,.42); color:#b8751c; }
.fg-glastegel:active{ transform:translateY(1px); }
.fg-glastegel:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
body.fg-dark .fg-glastegel{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#93a4bd; }
body.fg-dark .fg-glastegel:hover{ background:rgba(217,134,30,.16); border-color:rgba(217,134,30,.45); color:#e9a54a; }

/* Autofill: één regel, vaste maten, niets dat verspringt bij een klik. */
.fhfl-autofill{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:nowrap; white-space:nowrap;
  padding:6px 12px; border-radius:12px; min-height:38px;
  border:1px solid rgba(120,140,170,.24); background:rgba(120,140,170,.07);
}
body.fg-dark .fhfl-autofill{ border-color:rgba(255,255,255,.09); background:rgba(255,255,255,.04); }
.fhfl-autofill.af-on{ border-color:rgba(217,134,30,.45); }
.fhfl-af-lbl{ white-space:nowrap; font-size:.8rem; font-weight:600; opacity:.85; }
.fhfl-af-cd{ white-space:nowrap; font-size:.74rem; opacity:.7; min-width:92px; text-align:right; }
.fhfl-af-hint{ display:none; }


/* ============================================================
   BUILD 786 · 16/09/2026 — Patrick: "pas dit aan naar de perfectie",
   en: "bekijk ook voor de licht / donker".
   Licht is hier de basis, donker overschrijft via body.fg-dark — dat is
   hoe de rest van dit blad al werkt. Elke kleur hieronder staat dus twee
   keer, zodat niets onleesbaar wordt als je van thema wisselt.
   ============================================================ */

/* --- Wat is er: één kolom, één richting. Fel = aanwezig. --- */
.fhfl-gaten{ display:flex; gap:7px; align-items:center; }
.fhfl-gat{ font-size:.95rem; line-height:1; opacity:.22; filter:grayscale(1); transition:opacity .15s, filter .15s; }
.fhfl-gat.op{ opacity:1; filter:none; }

/* --- Signalen: het +N-bolletje achter de eerste vijf --- */
.fhfl-flag.meer{
  background:#e8edf5; border-color:#cfd8e6; color:#41526b;
  font-weight:700; letter-spacing:.2px; cursor:default;
}
body.fg-dark .fhfl-flag.meer{ background:#1d2635; border-color:#2b3648; color:#93a4bd; }
body.fg-dark .fhfl-flag.meer{ border-color:#2b3648; }

/* --- Autofill: echte schakelaar + pijltjes per 10 --- */
.fhfl-af-t{ display:inline-flex; align-items:center; gap:4px; }
.fhfl-af-t input[type=number]{
  width:62px; text-align:center; font-variant-numeric:tabular-nums;
  padding:3px 4px; border-radius:7px; border:1px solid #cfd8e6; background:#fff; color:#16202e;
}
body.fg-dark .fhfl-af-t input[type=number]{ border-color:#2b3648; background:#111a26; color:#e7edf6; }
.fhfl-af-pijl{
  width:24px; height:24px; border-radius:7px; border:1px solid #cfd8e6; background:#f4f7fb;
  color:#41526b; font-size:1rem; line-height:1; font-weight:700; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center; transition:background .12s, border-color .12s;
}
.fhfl-af-pijl:hover{ background:#e8edf5; border-color:#b9c6d9; }
.fhfl-af-pijl:active{ transform:translateY(1px); }
body.fg-dark .fhfl-af-pijl{ background:#18212e; border-color:#2b3648; color:#9fb0c7; }
body.fg-dark .fhfl-af-pijl:hover{ background:#1f2a39; border-color:#3a4a62; }
.fhfl-af-hint{ flex-basis:100%; font-size:.7rem; opacity:.62; margin-top:2px; }

.fhfl-af-sw{ position:relative; display:inline-block; width:38px; height:21px; flex:0 0 auto; }
.fhfl-af-sw input{ position:absolute; opacity:0; width:0; height:0; }
.fhfl-af-sw span{
  position:absolute; inset:0; border-radius:999px; cursor:pointer;
  background:#cfd8e6; transition:background .18s;
}
.fhfl-af-sw span::after{
  content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(9,18,32,.35); transition:transform .18s;
}
.fhfl-af-sw input:checked + span{ background:var(--brand); }
.fhfl-af-sw input:checked + span::after{ transform:translateX(17px); }
.fhfl-af-sw input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px; }
body.fg-dark .fhfl-af-sw span{ background:#2b3648; }
/* BUILD 790 - 16/09/2026 - Patrick: "autofill staat op ons maar zie geen kleur".
   Mijn fout uit 786. De regel hierboven staat NA de aan-regel en weegt even zwaar
   (0,2,2), dus in donkere modus won het grijs altijd: die schakelaar KON niet
   oranje worden, hoe vaak je ook klikte. Nu een zwaardere regel, en meteen ook de
   rand van het blokje, zodat je van een meter ver ziet dat de motor aan staat. */
body.fg-dark .fhfl-af-sw input:checked + span{ background:var(--brand); }
body.fg-dark .fhfl-autofill.af-on{ border-color:var(--brand); }

/* --- Werkteller: een echte rechthoek met een loopglans erover --- */
.fg-wt-grid{ position:relative; }
.fg-count[data-werk-teller]{
  position:relative; overflow:hidden; border-radius:14px;
  padding:9px 14px; border:1px solid #d7dfea; background:#f7f9fc;
  box-shadow:0 1px 2px rgba(16,28,46,.05);
}
body.fg-dark .fg-count[data-werk-teller]{
  border-color:#26324a; background:linear-gradient(180deg,#141d2b,#111926);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.fg-count[data-werk-teller]::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(100deg, transparent, rgba(217,134,30,.16), transparent);
  animation:fgWtGlans 9.5s ease-in-out infinite; pointer-events:none;
  will-change:transform;
}
/* BUILD 790 - de glans schoof met `left`. Daardoor moest de browser voor elk
   beeldje opnieuw uitrekenen waar alles staat, vier en een halve seconde lang, in
   een lus. Met `transform` gebeurt hetzelfde op de grafische kaart en blijft de
   bladschikking onaangeroerd. */
@keyframes fgWtGlans{ 0%{ transform:translateX(-140%); } 55%{ transform:translateX(255%); } 100%{ transform:translateX(255%); } }
@media (prefers-reduced-motion: reduce){ .fg-count[data-werk-teller]::after{ animation:none; opacity:0; } }

/* --- De knop naast Officiële naam: witte schijf, leesbaar in beide themas --- */
.fgf2-gknop{
  width:34px; height:34px; min-width:34px; padding:0; border-radius:50%;
  background:#fff; border:1px solid #dde3ec; color:#3c4043;
  font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:1.05rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 1px 2px rgba(16,28,46,.10); transition:box-shadow .15s, transform .08s, border-color .15s;
}
.fgf2-gknop:hover{ box-shadow:0 2px 8px rgba(16,28,46,.18); border-color:#c6cfdd; }
.fgf2-gknop:active{ transform:translateY(1px); }
.fgf2-gknop:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
body.fg-dark .fgf2-gknop{ background:#fff; border-color:#33405a; color:#3c4043; box-shadow:0 1px 3px rgba(0,0,0,.45); }

/* ============================================================
   BUILD 791 - DE LOOPGLANS OVER ALLE KNOPPEN
   ------------------------------------------------------------
   Patrick: "kan je over alle knoppen de gloed laten lopen, is toch net dat
   tikkeltje meer he". Eén keyframe, één pseudo-element, over de tabbladen, de
   knoppen, de statuschips, de glastegel en de autofill.
   Twee regels die hier belangrijk zijn:
   - het schuift met transform, niet met left. Anders herberekent de browser bij
     elk beeldje de hele bladschikking - dat was precies het gebibber van 790.
   - de knoppen krijgen elk een eigen vertraging, anders flitsen ze alle acht
     tegelijk en lijkt het scherm te knipperen in plaats van te glanzen.
   ============================================================ */
@keyframes fgGloed{
  0%   { transform:translateX(-160%); }
  55%  { transform:translateX(320%); }
  100% { transform:translateX(320%); }
}
.fg-tab, .fg-btn, .fg-statchip, .fg-glastegel, .fhfl-autofill{ position:relative; overflow:hidden; }
.fg-tab::after, .fg-btn::after, .fg-statchip::after, .fg-glastegel::after, .fhfl-autofill::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
  transform:translateX(-160%); will-change:transform; pointer-events:none;
  animation:fgGloed 9.5s ease-in-out infinite;   /* build 794 — Patrick: "kan je de gloed iets langzamer zetten". Van 5,2 naar 9,5 seconden. */
}
.fg-tab.on::after{ background:linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent); }
.fg-tab:nth-child(1)::after{ animation-delay:0s; }
.fg-tab:nth-child(2)::after{ animation-delay:.18s; }
.fg-tab:nth-child(3)::after{ animation-delay:.36s; }
.fg-tab:nth-child(4)::after{ animation-delay:.54s; }
.fg-tab:nth-child(5)::after{ animation-delay:.72s; }
.fg-tab:nth-child(6)::after{ animation-delay:.90s; }
.fg-tab:nth-child(7)::after{ animation-delay:1.08s; }
.fg-tab:nth-child(8)::after{ animation-delay:1.26s; }
.fg-statchip:nth-child(odd)::after{ animation-delay:.4s; }
.fg-glastegel::after{ animation-delay:.9s; }
.fhfl-autofill::after{ animation-delay:1.4s; }
@media (prefers-reduced-motion: reduce){
  .fg-tab::after, .fg-btn::after, .fg-statchip::after, .fg-glastegel::after, .fhfl-autofill::after{ animation:none; opacity:0; }
}

/* ------------------------------------------------------------
   BUILD 791 - DE PLUS ACHTER MOBIEL EN E-MAILADRES
   Patrick: "door extra whatsapp en extra mail krijg ik rechts een scrollbar,
   kunnen we niet gewoon een + achter zetten". Terecht: die twee blokken stonden
   er altijd, ook op de 98 fiches waar niemand ooit een tweede nummer invult.
   ------------------------------------------------------------ */
.fgf2-plus{
  width:30px; height:30px; min-width:30px; padding:0; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font:inherit; font-size:1rem; line-height:1; font-weight:700;
  background:rgba(120,140,170,.10); border:1px solid rgba(120,140,170,.26); color:#5b6b83;
  transition:background .14s, border-color .14s, color .14s;
}
.fgf2-plus:hover{ background:rgba(217,134,30,.12); border-color:rgba(217,134,30,.42); color:#b8751c; }
.fgf2-plus:active{ transform:translateY(1px); }
.fgf2-plus:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
body.fg-dark .fgf2-plus{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#93a4bd; }
body.fg-dark .fgf2-plus:hover{ background:rgba(217,134,30,.16); border-color:rgba(217,134,30,.5); color:#e8a54a; }
.fgf2-fld[hidden]{ display:none !important; }

/* ============================================================
   BUILD 792 - DE LIJST DICHTER OP ELKAAR, EN TWEE NIEUWE KOLOMMEN
   ------------------------------------------------------------
   Patrick over het tabblad "Klaar om uit te nodigen": de rijen zijn te hoog en
   twee kolommen zeggen niets. De rijhoogte gaat van ~45 naar ~34 pixels, zodat je
   er vijftien ziet in plaats van vijf. Alleen de DATA-rijen krimpen; de kopregel
   blijft zoals ze is, anders verliest de tabel haar kop.
   ============================================================ */
.fg-tr.fg-row{ padding-top:8px; padding-bottom:8px; }
.fg-stielcel{
  font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fg-taalcel{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; padding:2px 7px; border-radius:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.06em;
  background:color-mix(in srgb,var(--muted) 14%,transparent); color:var(--muted);
}




/* ============================================================
   BUILD 801 · 16/09/2026 — DE MAILTEKST IS METEEN LEESBAAR.
   Patrick: "af en toe kijk rechts venster, wordt de tekst niet direct wit".
   De oorzaak: een mail wordt getoond zoals de afzender hem opmaakte, en die
   schrijft bijna altijd zwarte tekst voor een witte achtergrond. Bij ons staat
   die op een donkere ondergrond — zwart op zwart dus, tot er toevallig iets
   overheen viel. Het was geen vertraging, het was onleesbaar.
   We zetten de kleur nu zelf vast in het leesvenster. Links houden de huisstijl-
   kleur, zodat je nog ziet waar je kan klikken, en achtergronden die de afzender
   meestuurt worden doorzichtig gemaakt zodat ze onze ondergrond niet verbergen.
   ============================================================ */
/* 14/10/2026 - Patrick: "de tekst in de mails zelf, zwart ipv lichtzwart of grijs".
   Hier stond var(--ink){ color:#0B1220 !important; }

/* ============================================================
   BUILD 828 - 17/09/2026 - DE OPMAAKBALK IN HET OPSTELVAK.
   Patrick: "doe ook direct de bold, italic, enz enz enz."
   Het schrijfvak staat op wit met zwarte letters, net als de handtekening-
   werkbank: wat jij ziet is wat de ontvanger ziet. Het tekstvak eronder
   bestaat nog, maar is verborgen - het draagt de platte tekst.
   ============================================================ */
.fgop-verborgen{ display:none !important; }
.fgop-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:3px;
  padding:5px 6px; border:1px solid var(--line); border-bottom:0;
  border-radius:10px 10px 0 0; flex:0 0 auto;
  background:color-mix(in srgb, var(--surface) 70%, transparent); }
.fgop-bar button{ min-width:28px; height:26px; padding:0 7px; border:1px solid transparent;
  background:transparent; color:inherit; border-radius:7px; cursor:pointer;
  font-size:13px; line-height:1; font-family:inherit; }
.fgop-bar button:hover{ background:rgba(127,127,127,.18); }
.fgop-sep{ width:1px; height:16px; background:var(--line); margin:0 3px; }
.fgop-ed{ flex:1 1 auto; min-height:120px; overflow:auto; outline:none;
  background:#fff; color:#222; border:1px solid var(--line); border-radius:0 0 10px 10px;
  padding:11px 13px; font:14px/1.55 -apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.fgop-ed:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(217,134,30,.18); }
.fgop-ed a{ color:#1155cc; }
.fgop-ed ul, .fgop-ed ol{ margin:6px 0 6px 22px; }
.fgop-ed img{ max-width:100%; height:auto; }

/* ============================================================
   BUILD 824 - 17/09/2026 - ONGELEZEN MOET JE ZIEN, NIET ZOEKEN.
   ------------------------------------------------------------
   Patrick, na 823: "gelezen en ongelezen is een ramp man, ik zie echt dat
   verschil niet !!!" Hij had gelijk,
   geen kleur, geen waas. Vandaar dat hij echt geen verschil zag.
   Nu spreken beide soorten rijen exact dezelfde taal:
     ongelezen = oranje balk links + oranje waas + volle inkt + een bolletje
     gelezen   = geen balk, geen waas, rustig grijs
   ============================================================ */

/* --- gelezen: ingetogen ------------------------------------------------ */
/* 16/10/2026 - DE KLEUR IS HIER WEGGEHAALD, HET GEWICHT BLIJFT.
   Patrick: "kan de test aub in het zwart staan op de witte achtergrond?"
   Gemeten op de live lijst, niet geraden: 47 ONGELEZEN berichten stonden in
   rgb(232,237,245) op WIT - contrast 1,1, dus onzichtbaar - en 69 gelezen
   berichten op contrast 2, en die beet verkeerd.
   Het GEWICHT blijft staan, want dat was de bedoeling van build 905: gelezen
   rustig, ongelezen vol. De KLEUR komt voortaan uit de V2-laag, uit de tokens{
  font-weight:500 !important;
}

/* de rij waar je IN staat blijft herkenbaar{ background:color-mix(in srgb,var(--brand,var(--brand)) 28%,transparent) !important;
  box-shadow:inset 4px 0 0 var(--brand,var(--brand)) !important; }

/* ============================================================
   BUILD 845 · 19/09/2026 — HET STUURBLOK VAN DE LEVERANCIERSLIJST.
   Drie stroken blijven staan terwijl de lijst eronder doorschuift:
     1. de tabbladen (waar sta ik)
     2. de filterbalk (wat toon ik) links, de motor rechts
     3. de kolomkoppen (wat lees ik)
   De hoogtes komen uit een meting in de pagina zelf (--fhfl-kop-h en
   --fhfl-bar-h), niet uit een geschat getal. De achtergrond komt van de body,
   zodat de stroken in licht en donker dezelfde kleur hebben als de pagina.
   De negatieve marge trekt de stroken tot tegen de rand: zonder dat schuift
   de lijst langs de zijkanten onder de balk door.
   ============================================================ */
/* ============================================================
   BUILD 851 · 19/09/2026 — DE KLASSE KWAM TE LAAT. VANDAAR DE TWEE, DRIE SPRONGEN.
   Patrick: "als ik klik op search, opent het tab, en springt hij 2 of 3 keer
   en nadien staat hij mooi vast."
   Gevonden, en het was opnieuw mijn eigen javascript. Dat zette de klasse
   fg-vast pas 60 ms NA elke hertekening van de pagina, en Flash Search
   hertekent zichzelf bij het openen twee à drie keer: eerst de lijst, dan de
   quota, dan de stielen en de autofill-schakelaar. Tussen elke hertekening en
   de volgende meting scrolde de pagina gewoon weer mee. Elke hertekening =
   één sprong. Daarom precies twee of drie, en daarom nadien rustig.
   De voorwaarde staat nu in de CSS zelf, met :has(). Die geldt vanaf het
   eerste ogenblik dat de lijst in de pagina staat — geen meting, geen
   wachttijd, geen sprong. Het meetjavascript is daarmee overbodig en is weg.
   ============================================================ */
.fg-page:has(> .fg-chips) > .fg-chips{
  margin:0 -26px -14px; padding:7px 26px;
  border-bottom:1px solid var(--line);
}

/* ============================================================
   BUILD 849 · 19/09/2026 — HET HELE BLOK STAAT STIL, OOK DE TITELBALK.
   Patrick: "de banner die vast freez moet staan, blijft maar bewegen".
   In 847 stonden de tabbladen, de filterbalk en de kolomkoppen vast, maar de
   regel erboven — Leveranciers CRM, + Bedrijf toevoegen, de autofill-schakelaar
   en de tellers van Gisele en Patrick — schoof nog weg onder de oranje kop. Dat
   is de band die hij bedoelde, en dat wegschuiven is precies het bewegen.
   Nu staat alles van onder de oranje kop tot aan de eerste fiche stil.
   Om dat te kunnen betalen zijn de vier stroken krapper gezet: samen ongeveer
   220 px in plaats van 263, zodat er nog acht fiches onder passen.
   ============================================================ */
.fg-page:has(> .fg-chips) > .fg-pagehead{ margin:0 -26px -14px; padding:7px 26px; }
.fg-page > .fhfl-panel{ gap:0; }
.fg-page > .fhfl-panel > .fhfl-bar{
  margin:0 -26px; padding:6px 26px; gap:6px 12px;
  border-bottom:1px solid var(--line);
}
.fg-page .fg-thead{ height:42px; }

/* BUILD 846 · 19/09/2026 — DE KOLOMKOPPEN PLAKTEN NIET, EN DAT LAG NIET AAN 845.
   Nagemeten met de muis op 4.000 px diep: tabbladen op 110, filterbalk op 170,
   maar de kolomkoppen op -3.458. Ze stonden al sinds jaar en dag op sticky —
   alleen staat .fg-table op overflow:hidden, en dat maakt van de tabel zelf de
   scroll-doos. Een sticky kop binnen een doos die niet scrolt, plakt nergens.
   overflow:clip knipt even netjes af maar maakt GEEN scroll-doos, dus de kop
   kijkt weer naar het venster. Opnieuw gemeten: 110 / 170 / 264. */
/* ============================================================
   BUILD 850 · 19/09/2026 — ALLEEN DE LIJST SCROLT.
   Patrick: "enkel de fiches is scrollbar, enkel die zone moet dus een
   scrollbar krijgen, ben je mee?" en "die freez moet op alle tabbladen".
   Ja. En dat betekent dat de sticky-constructie van 845-849 weg mag: die
   plakte stroken vast in een pagina die zelf scrolde, dus schoven de fiches
   er altijd achter door en bleef er altijd iets bewegen.
   De pagina is nu een kolom die precies in het venster past. Kop, tabbladen,
   filterbalk en kolomkoppen staan gewoon boven elkaar — ze bewegen niet omdat
   er niets onder hen wegschuift. Alleen het vak met de fiches scrolt, en de
   schuifbalk hoort bij dat vak. Geen enkele hoogte wordt nog gemeten, dus dit
   werkt op élk tabblad met een lijst: Alle, Flash Search, Klaar om uit te
   nodigen, Uitgenodigd, Aangemeld.
   ============================================================ */
.fg-main:has(> .fg-page > .fg-chips):has(> .fg-page > .fg-table:last-child, > .fg-page > .fhfl-panel:last-child){ overflow:hidden; }
.fg-page:has(> .fg-chips):has(> .fg-table:last-child, > .fhfl-panel:last-child){ height:100%; min-height:0; overflow:hidden; padding-bottom:0; }
.fg-page > .fhfl-panel:last-child{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.fg-page > .fhfl-panel:last-child > .fg-table,
.fg-page > .fg-table:last-child{ flex:1 1 auto; min-height:0; overflow:auto; }
.fg-page .fg-thead{ position:sticky; top:0; z-index:5; }
/* De kolomkoppen kleefden 211 px te laag: de regel van 849 zette hun top op
   "titelbalk + tabbladen + filterbalk", en dat klopte zolang de PAGINA de
   scroll-doos was. Nu is de tabel zelf de doos, dus is de juiste waarde 0.
   Gemeten vóór: kop op 549 terwijl de tabel op 337 begint. Erna: 338. */


/* De vier stroken hoeven niet meer vastgeplakt te worden: ze staan stil omdat
   de pagina niet scrolt. De volle breedte en de krappe hoogte houden we wel. */


/* DE VLAG IN HET TELEFOONVELD KREEG GEEN MATEN MEE — en een SVG zonder maten
   neemt alle ruimte die hij krijgt. Vandaar de reuzenvlag naast het nummer.
   Mijn fout van 849: de klasse geschreven, de regel vergeten. */
.fgf2-vlag{ display:inline-block; width:18px; height:13px; flex:0 0 auto;
  border-radius:2px; vertical-align:-1px; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.fgf2-telhint{ white-space:nowrap; }
.fgf2-telvlag{ line-height:1; }

/* BUILD 851 — terwijl de volgende fiche wordt opgehaald blijft de vorige
   staan, maar wel zichtbaar "bezig". Zo weet je dat er iets gebeurt zonder
   dat het venster verdwijnt. */
.fgf2-ov.fgf2-bezig .fgf2-box{ opacity:.55; transition:opacity .12s ease; pointer-events:none; }

/* De filterbalk in twee leesbare regels: bovenaan wat je filtert en waar de
   wachtrij staat, eronder de twee tellers van de motor. Gemeten: 88 px in
   plaats van 94, en de stand staat niet meer los aan de rechterkant. */

.fhfl-bar .fhfl-gatrij{ flex:1 1 auto; }

/* LINKS WAT JE FILTERT, RECHTS WAT DE MOTOR DOET.
   Tot nu stonden de knoppen, de wachtrijstand en de twee meters als een
   doorlopende zin naast elkaar, en las je pas bij het derde item dat je van
   onderwerp veranderd was. */
.fhfl-bar .fhfl-stat{ margin-left:0; }

/* DE ZES BEWIJSVAKJES ZIJN EEN CEL, GEEN ZES KOLOMMEN. */
.fhfl-bewijs{ display:flex; align-items:center; flex-wrap:nowrap; }

/* ============================================================
   BUILD 847 · 19/09/2026 — DE BALK SPRONG OP HET MOMENT DAT HIJ VASTKLIKTE.
   Patrick: "ze bewegen raar als ik scroll ... de balk staat niet mooi vast".
   Nagemeten, muis per 20 px: tot 100 px scrollden de drie stroken mee met
   14 px lucht tussen tabbladen en filterbalk en 11 px tussen filterbalk en
   kolomkoppen. Op het moment van vastklikken moest die lucht dicht, en dus
   sprong alles wat eronder stond in één keer 25 px omhoog. Dat is precies het
   rare bewegen. De lucht komt van de gap van de pagina en van het paneel —
   dus nemen we die weg rond juist deze drie stroken. Opnieuw gemeten: de
   tussenruimte is nu 0 op ELKE scrollhoogte en de kop glijdt van 354 naar 255
   zonder één sprong.
   ============================================================ */


/* DE SCHUIFBALK.
   Patrick: "en de scrolbar staat zo raar vind ik". Gemeten: 610 fiches maken
   34.491 px lijst in een venster van 659 px, dus de duim werd 13 px hoog —
   een streepje dat je met de muis amper kan vastpakken, in het wit van het
   systeem tegen een donker scherm. Nu een duim in de kleur van de rest, met
   een ondergrens van 48 px zodat hij altijd te grijpen is. */
*{ scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.42) transparent; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.40); border:3px solid transparent;
  background-clip:content-box; border-radius:999px; min-height:48px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(148,163,184,.68); background-clip:content-box; }
::-webkit-scrollbar-corner{ background:transparent; }

/* ============================================================
   BUILD 847 — "WAT WE ONLINE VONDEN" OP DE FICHE ZELF.
   De motor leest hun site en het BTW-register en schrijft alles weg, maar op
   het tabblad Online stonden enkel twee lege invulvakken. Dit blok is een
   spiegel: lezen, niet invullen.
   ============================================================ */
.fgf2-vondst{ margin-top:22px; padding:14px 16px 16px; border-radius:12px;
  border:1px solid var(--line); background:color-mix(in srgb, var(--ink) 4%, transparent); }
.fgf2-vondst.leeg{ color:var(--muted); font-size:13px; }
.fgf2-vondst-kop{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--brand-ink); margin-bottom:12px; }
.fgf2-vondst-kop span{ color:var(--muted); font-weight:600; letter-spacing:0; text-transform:none; margin-left:8px; }
.fgf2-vondrij{ display:grid; grid-template-columns:170px 1fr; gap:10px 14px; align-items:start;
  padding:7px 0; border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.fgf2-vondrij:first-of-type{ border-top:0; }
.fgf2-vondkop{ font-size:12px; font-weight:700; color:var(--muted); padding-top:3px; }
.fgf2-vondvak{ display:flex; flex-wrap:wrap; gap:6px; font-size:12.5px; align-items:center; }
.fgf2-bw{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11.5px; background:rgba(148,163,184,.16); border:1px solid rgba(148,163,184,.32);
  color:var(--muted); opacity:.62; }
.fgf2-bw.ja{ background:rgba(167,243,208,.26); border-color:rgba(52,211,153,.50); color:var(--ink); opacity:1; }
.fgf2-sg{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11.5px; background:rgba(253,224,155,.20); border:1px solid rgba(217,134,30,.38); color:var(--ink); }
.fgf2-sg.sterk{ background:color-mix(in srgb, var(--brand) 22%, transparent);
  border-color:color-mix(in srgb, var(--brand) 55%, transparent); font-weight:700; }
.fgf2-sg.waarschuw{ background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.42); }
@media (max-width:760px){ .fgf2-vondrij{ grid-template-columns:1fr; gap:4px; } }

/* ============================================================
   BUILD 848 · 19/09/2026 — ALLES OP ÉÉN SCHERM.
   Patrick: "de velden voor website en google url zijn veel te lang toch, maak
   het mooier, en probeer alles in een scherm te krijgen zonder scrollbar".
   De twee velden staan nu naast elkaar en het vondstblok is krapper gezet:
   kleinere vakjes, kortere woorden (de volledige zin zit in de tooltip) en een
   smallere kolom voor de opschriften.
   ============================================================ */
.fgf2-vondst{ margin-top:14px; padding:11px 13px 12px; }
.fgf2-vondst-kop{ margin-bottom:8px; }
.fgf2-vondrij{ grid-template-columns:132px 1fr; gap:6px 12px; padding:5px 0; }
.fgf2-vondkop{ font-size:11.5px; padding-top:2px; }
.fgf2-vondvak{ gap:5px; font-size:12px; }
.fgf2-bw, .fgf2-sg{ padding:2px 8px; font-size:11px; gap:4px; }

/* ============================================================
   BUILD 848 — HET TELEFOONVELD.
   Vlag en landcode staan vast vóór het nummer, eronder staat de leesbare
   schrijfwijze en of het een gsm of een vaste lijn is. Staat er een gsm in het
   vak van de vaste lijn (of omgekeerd), dan zegt het lijntje dat meteen —
   precies de fout die vandaag bij 355 fiches in de databank zat.
   ============================================================ */
.fgf2-telwrap{ flex:1 1 auto; min-width:0; }
.fgf2-tel{ display:flex; align-items:stretch; gap:0; }
.fgf2-telvlag{ display:inline-flex; align-items:center; gap:5px; padding:0 11px;
  border:1px solid var(--line); border-right:0; border-radius:10px 0 0 10px;
  background:color-mix(in srgb, var(--ink) 6%, transparent); font-size:15px; white-space:nowrap; }
.fgf2-telvlag b{ font-size:12.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.fgf2-tel .fgf2-in{ border-radius:0 10px 10px 0; flex:1 1 auto; min-width:0; letter-spacing:.02em; }
.fgf2-telonder{ margin-top:5px; font-size:11.5px; }
.fgf2-telhint{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); }
.fgf2-telhint.ok{ color:color-mix(in srgb, #34d399 70%, var(--ink)); }
.fgf2-telhint.leeg{ opacity:.55; }
.fgf2-telhint.scheef{ color:#f59e0b; font-weight:600; }

/* ============================================================================
   BUILD 927 · 28/09/2026 — DE BALK ALS EEN STRIP.
   Patrick keurde vanmorgen een voorstel goed en zei daarna: "de layout is niet
   goed he, je toonde me een veel mooiere layout deze morgen". Klopte: het
   voorstel was een los voorbeeldbestand, het stond nog niet in de app.
   Hier staat het wel.

   Wat er verandert: Autofill en Zoeker waren twee losse pillen naast elkaar,
   elk met hun eigen rand, hun eigen ronde hoeken en hun eigen knopjes in een
   andere maat. Nu is het EEN strip met een haarlijn tussen de twee groepen.
   De teller staat in een gesloten vakje met de min en de plus ertegenaan, de
   schakelaar zegt zelf of hij aan of uit staat (geen woord "uit" ernaast meer),
   en alle knopjes zijn 26 bij 26.

   Deze regels staan met opzet ONDERAAN het bestand: .fhfl-autofill werd hoger
   in dit bestand VIJF keer verklaard, .fhfl-af-pijl vier keer. Die oude regels
   blijven staan tot ze opgekuist zijn; wat hier staat wint omdat het later komt.
   Geen enkele kleur wordt hier hardgecodeerd: alles komt uit de tokens van
   fg-theme.css, zodat licht en donker vanzelf meelopen.
   ============================================================================ */
.fhfl-autofill{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); padding:4px 9px; margin:0;
  font-size:12.5px; color:var(--ink);
  box-shadow:none; animation:none; opacity:1;
  max-width:100%; flex-wrap:nowrap; vertical-align:middle;
}
.fhfl-autofill + .fhfl-autofill{
  margin-left:-1px; border-top-left-radius:0; border-bottom-left-radius:0;
}
.fhfl-autofill:has(+ .fhfl-autofill){
  border-top-right-radius:0; border-bottom-right-radius:0;
}
.fhfl-autofill.af-on{ border-color:var(--line-strong); }

.fhfl-af-lbl{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap;
}
.fhfl-af-lbl b{ color:var(--ink); font-weight:650; }

/* het tellervakje: min, getal en plus in EEN omlijning */
.fhfl-af-t{
  display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
}
.fhfl-af-t .fhfl-af-pijl{
  width:26px; height:26px; padding:0; border:0; border-radius:0;
  background:transparent; color:var(--muted);
  font:inherit; font-size:15px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.fhfl-af-t .fhfl-af-pijl:hover{ background:var(--card-2); color:var(--ink); }
.fhfl-af-t input[type=number]{
  width:46px; height:26px; padding:0; margin:0; border:0; border-radius:0;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  background:transparent; color:var(--ink);
  font:inherit; font-weight:650; text-align:center;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield;
}
.fhfl-af-t input[type=number]::-webkit-outer-spin-button,
.fhfl-af-t input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.fhfl-af-cd{
  color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums;
  white-space:nowrap; min-width:0; text-align:right;
}
.fhfl-autofill:not(.af-on) .fhfl-af-cd{ opacity:.55; }

/* de twee ronde knopjes: zelfde maat, zelfde hover, kleur uit de tokens.
   !important omdat de knoppen een eigen style-attribuut in de HTML dragen. */
.fhfl-af-nu, .fhfl-af-cfg{
  width:26px; height:26px; padding:0 !important;
  border:0 !important; border-radius:var(--r-sm);
  background:transparent !important;
  font-size:14px !important; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.fhfl-af-cfg{ color:var(--muted) !important; }
.fhfl-af-nu{ color:var(--ok, #22c55e) !important; }
.fhfl-af-nu:hover, .fhfl-af-cfg:hover{ background:var(--card-2); }

/* de schakelaar zegt zelf of hij aan of uit staat */
.fhfl-af-sw{ position:relative; display:inline-flex; width:34px; height:19px; flex:0 0 auto; cursor:pointer; }
.fhfl-af-sw input{ position:absolute; width:0; height:0; opacity:0; }
.fhfl-af-sw span{
  position:absolute; inset:0; border-radius:999px;
  background:var(--line-strong); transition:background .16s;
}
.fhfl-af-sw span::after{
  content:""; position:absolute; top:2px; left:2px; width:15px; height:15px;
  border-radius:50%; background:var(--surface);
  box-shadow:0 1px 2px rgba(9,18,32,.3); transition:transform .16s;
}
.fhfl-af-sw input:checked + span{ background:var(--brand); }
.fhfl-af-sw input:checked + span::after{ transform:translateX(15px); }

/* ============================================================
   BUILD 1003 - 10/10/2026 - DE KOPBALK ZONDER GLANS.
   Patrick: "dit kan veel mooier, denk aan ios27 en laatste google features"
   en, na build 1002: "kijk zelf is nul komma nul veranderd!"
   Hij had gelijk. In 1002 heb ik de tabel in het paneel hertekend - een kwart
   van wat hij ziet. De indruk van het scherm komt van de kopbalk, en die staat
   hier. Nagemeten wat dat gedateerde gevoel maakt, en het zijn vier dingen:
     1. .gbtn::before - een witte glansstreep over de bovenste helft van ELKE
        knop. Dat is de glanzende knop van 2010.
     2. text-shadow op de tabs en de merknaam. Schaduw onder tekst was nodig
        toen knoppen een verloop hadden; nu maakt het letters alleen vuil.
     3. verlopen op de actieve tab, de segmentknop en de gebruikerschip.
     4. een ::after die over tabs en chips schuift, met acht verschillende
        vertragingen. Beweging zonder betekenis.
   Dit blok zet die vier uit en zet er rust voor in de plaats.
   Met opzet een LAAG ACHTERAAN en geen chirurgie in de 3.145 regels hierboven:
   valt hij tegen, dan haal je dit ene blok weg en alles staat terug.
   ============================================================ */

.fg-header.v7 .gbtn::before,
.fg-tab::after, .fg-btn::after, .fg-statchip::after,
.fg-glastegel::after, .fhfl-autofill::after{ display:none !important; }

.fg-header.v7 .fgb-brand b,
.brandhead .fg-tab,
.fg-header.v7 .gbtn{ text-shadow:none !important; }

.fg-header.brandhead{
  border-bottom:1px solid color-mix(in srgb, #000 24%, transparent) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent) !important;
}

.fg-header.v7 .gbtn{
  border-radius:12px !important;
  border:1px solid color-mix(in srgb, #fff 26%, transparent) !important;
  background:color-mix(in srgb, #fff 13%, transparent) !important;
  font-weight:600 !important;
}
.fg-header.v7 .gbtn:hover{
  background:color-mix(in srgb, #fff 22%, transparent) !important;
  transform:none !important;
}
.fg-header.v7 .gbtn.on{
  background:#fff !important;
  color:var(--brand-strong) !important;
  border-color:#fff !important;
  font-weight:700 !important;
  box-shadow:0 6px 16px -10px rgba(0,0,0,.5) !important;
}

.brandhead .fg-tab{
  border-radius:12px !important;
  background:color-mix(in srgb, #fff 13%, transparent) !important;
  border:1px solid color-mix(in srgb, #fff 24%, transparent) !important;
  font-weight:600 !important;
}
.brandhead .fg-tab:hover{
  background:color-mix(in srgb, #fff 22%, transparent) !important;
  transform:none !important;
}
.brandhead .fg-tab.on{
  background:#fff !important;
  color:var(--brand-strong) !important;
  border-color:#fff !important;
  font-weight:700 !important;
  box-shadow:0 6px 16px -10px rgba(0,0,0,.5) !important;
}

.fg-header.v7 .seg{
  background:color-mix(in srgb, #fff 13%, transparent) !important;
  border:1px solid color-mix(in srgb, #fff 30%, transparent) !important;
  border-radius:12px !important;
}
.fg-header.v7 .seg button.on{ background:#fff !important; color:var(--brand-strong) !important; }
.fg-header.v7 .userchip{
  background:color-mix(in srgb, #fff 13%, transparent) !important;
  border:1px solid color-mix(in srgb, #fff 30%, transparent) !important;
}
.fg-header.v7 .fgsel{
  background:#fff !important;
  border:1px solid color-mix(in srgb, #fff 70%, transparent) !important;
  border-radius:12px !important;
}
.fg-header.v7 .fgsearch kbd{
  background:color-mix(in srgb, #fff 18%, transparent) !important;
  border:1px solid color-mix(in srgb, #fff 32%, transparent) !important;
}

.fg-table{ border-radius:var(--r-lg, 18px) !important; }

/* ===== BUILD 1049 - 16/10/2026 - ADRESVELD MET CHIPS (Aan, Cc, Bcc) =========
   Patrick: "namen moeten apart komen, dat ik aan kan aanklikken ... het echt
   email outlook gevoel." Het oude vak was een gewoon invoervak met de ingebouwde
   datalist van de browser; die toont de HELE veldinhoud als een voorstel.
   Alle kleuren komen uit de tokens (--surface, --ink, --line, --brand), dus dit
   volgt vanzelf de afdelingskleur en de donkere stand. Nergens een vaste
   kleurcode - dat was de fout die vier maanden alle afdelingen oranje hield.
   Prefix fgml-{ display:none !important; }




/* ==================================================================
   22/10/2026 - BUILD 1148 - DE ZIJBALK, RUSTIG EN AF
   Patrick, met de schermafdruk erbij: "deze layout is niet echt een
   PREMIUM software layout he, ... dit moet echt veel en veel beter".
   GEMETEN in de live app voor ik iets aanraakte - dit stond er:
     .fg2pb-boommap   vulling rgba(255,255,255,.22) + rand 1.5px .45
     .fg2pb-postbus   vulling rgba(255,255,255,.22) + rand 1.5px .45
     .fg-statchip     vulling .08 + rand 1.5px .24, 43px hoog
     lettergroottes   16 / 14 / 13.5 / 13 / 11.5 px door elkaar
     inspringing      29px / 47px / 57px, drie verschillende ladders
   Elke regel was dus een eigen witte doos met een eigen rand, in een
   eigen maat. Daarom las de balk als een stapel kaartjes uit 1990 en
   niet als een zijbalk: als ALLES oplicht, licht er niets op.
   De drie regels hieronder:
     1. een rij is standaard DOORZICHTIG; alleen aanwijzen en actief
        krijgen kleur, en actief krijgt glas (zoals Patrick vroeg);
     2. een ladder van inspringing met een haarlijn als gids;
     3. een lettertrap: 14,5 knop / 14 postbus / 13,5 map / 10,5 kopje,
        tellers rechts, op cijferbreedte.
   ================================================================== */
.fg-zij{
  padding: 12px 10px 34px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.fg-zij::-webkit-scrollbar{ width: 8px; }
.fg-zij::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.20); border-radius: 8px; }
.fg-zij::-webkit-scrollbar-track{ background: transparent; }

.fg-zij .fg-zijnav{ margin: 0 0 3px !important; }
.fg-zij .fg-zijtakvak{
  margin: 2px 0 10px 4px !important;
  padding: 0 0 0 10px !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
}

/* EEN rij is EEN maat - knop, filter, postbus of map, dat maakt niet uit. */
.fg-zij .gbtn,
.fg-zij .fg-statchip,
.fg-zij .fg2pb-postbus,
.fg-zij .fg2pb-boommap{
  display: flex !important; align-items: center !important; gap: 9px !important;
  width: 100% !important; min-height: 32px !important; height: auto !important;
  padding: 6px 10px !important; margin: 1px 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 8px !important;
  box-shadow: none !important; color: rgba(255,255,255,.86) !important;
  text-align: left !important; letter-spacing: 0 !important;
  transition: background .12s ease, color .12s ease !important;
}
.fg-zij .gbtn{ font-size: 14.5px !important; font-weight: 600 !important; }
.fg-zij .fg-statchip,
.fg-zij .fg2pb-postbus{ font-size: 14px !important; font-weight: 560 !important; }
.fg-zij .fg2pb-boommap{ font-size: 13.5px !important; font-weight: 500 !important; padding-left: 10px !important; }

.fg-zij .gbtn:hover,
.fg-zij .fg-statchip:hover,
.fg-zij .fg2pb-postbus:hover,
.fg-zij .fg2pb-boommap:hover{ background: rgba(255,255,255,.10) !important; color: #fff !important; }

/* Actief = glas. Een extra klasse ervoor, want de regels in de bestaande
   bladen staan allemaal op !important en dan wint de LAATSTE - dat heeft me
   in 1140 en 1141 twee keer witte knoppen opgeleverd. */
.fg-zij .fg-zijnav .gbtn.on,
.fg-zij .fg-zijnav .gbtn[aria-current],
.fg-zij .fg-zijtakvak .fg-statchip.on,
.fg-zij .fg-zijtakvak .fg-statchip[aria-current],
.fg-zij .fg-zijtakvak .fg2pb-boommap[aria-current="true"]{
  background: rgba(255,255,255,.17) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), 0 1px 10px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
  color: #fff !important; font-weight: 680 !important;
  border: 0 !important; outline: 0 !important;
}
/* De postbus die openstaat is GEEN tweede selectie: anders lichten er twee
   rijen boven elkaar op en weet je niet meer waar je staat. Die wordt alleen
   wit en vet; het glas blijft voor de map waar je echt in zit. */
.fg-zij .fg-zijtakvak .fg2pb-postbus[aria-current="true"]{
  background: transparent !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: #fff !important; font-weight: 700 !important;
  border: 0 !important; outline: 0 !important;
}
.fg-zij .fg-zijtakvak .fg2pb-postbus[aria-current="true"]:hover{ background: rgba(255,255,255,.10) !important; }

.fg-zij .gbtn .ti{
  width: 18px !important; flex: 0 0 18px !important; text-align: center !important;
  font-size: 13px !important; filter: grayscale(1) brightness(2.2) !important; opacity: .9 !important;
}

/* Een afdelingskop is een KOPJE, geen knop. */
.fg-zij .fg2pb-afdeling{
  margin: 14px 0 2px !important; padding: 0 10px !important;
  font-size: 10.5px !important; font-weight: 800 !important;
  letter-spacing: .09em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.52) !important;
}

/* Tellers: altijd rechts, altijd even breed, altijd rustig. */
.fg-zij .fg2pb-map-tel,
.fg-zij .fg2pb-afd-tel,
.fg-zij .fg-statchip .n{
  margin-left: auto !important; font-size: 11.5px !important; font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important; color: rgba(255,255,255,.55) !important;
}
.fg-zij [aria-current="true"] .fg2pb-map-tel,
.fg-zij .fg-statchip.on .n{ color: rgba(255,255,255,.90) !important; }
.fg-zij .fg-statchip .dot{ order: 0 !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; }
.fg-zij .fg-statchip .lbl{ order: 1 !important; }
.fg-zij .fg-statchip .n{ order: 2 !important; }
.fg-zij .fgbadge{ margin-left: auto !important; }

.fg-zij .fg2pb-boommappen{
  margin: 1px 0 6px 14px !important; padding: 0 0 0 10px !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
}
.fg-zij .fg2pb-vouw,
.fg-zij .fg-zijklap{ opacity: .55 !important; font-size: 10px !important; }
.fg-zij .fg-zijklap{ margin-left: 6px !important; }
.fg-zij .fg2pb-bol{ width: 7px !important; height: 7px !important; }
.fg-zij .fg-zijlijn{
  margin: 12px 4px !important; height: 0 !important;
  border: 0 !important; border-top: 1px solid rgba(255,255,255,.12) !important;
}

/* Het buildplaatje stond over de onderste knop van de zijbalk. Het mag
   blijven - Patrick leest eraan af welke build live staat - maar als
   watermerk, niet als blokkade. */
#fgBuildBadge{
  opacity: .34 !important; font-size: 10px !important; padding: 1px 7px !important;
  line-height: 16px !important; height: auto !important; pointer-events: none !important;
  background: rgba(0,0,0,.35) !important; border: 0 !important; box-shadow: none !important;
  bottom: 4px !important; left: 8px !important;
}


/* ==================================================================
   22/10/2026 - BUILD 1149 - DE AUDIT VERTAALD NAAR CSS
   Patrick vroeg een volledige audit op werking en layout. Alles
   hieronder komt uit die audit, en elk punt is op de LIVE app
   gemeten voor ik het aanraakte. Het volledige rapport staat in
   wise11/logboek/Wise11_Audit_Werking_En_Layout_2026-10-22.md
   ================================================================== */

/* ---------- 1. DE LEGE BAND BOVEN DE MAIL ----------
   Gemeten: .fg2pb-drie had grid-template-rows 137.859px 484.359px.
   Oorzaak: de greep die bij de rail hoorde (en die we in 1146
   verborgen hebben) kreeg wel kolom 2/3 maar geen rij, en maakte zo
   in zijn eentje een lege rij 1 van 138 px boven lijst en
   leesvenster. We halen die greep weg en zetten alles in rij 1. */
.fg2pb-drie > #fg2pbRail + .fg2pb-greep{ display: none !important; }
.fg2pb-drie > *{ grid-row: 1 !important; }

/* ---------- 2. DE MAILLIJST SCROLDE ZIJWAARTS ----------
   Gemeten: inhoud 1306 px breed in een vak van 710 px. De schuldige
   was span.fg2pb-frag (het fragment van de mail) met 1264 px: die
   kapte niet af. Een lijst hoort nooit zijwaarts te schuiven. */
#fg2pbLijst{ overflow-x: hidden !important; }
#fg2pbLijst .fg2pb-rij{ min-width: 0 !important; max-width: 100% !important; }
#fg2pbLijst .fg2pb-rij > *{ min-width: 0 !important; }
#fg2pbLijst .fg2pb-frag{
  display: block !important; max-width: 100% !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}

/* ---------- 3. AFGEKNIPTE KNOPPEN IN EEN VENSTERKOP ----------
   Gemeten in Sales-team: "+ Verkoper" en "Check-in" waren 32x32 px
   terwijl hun tekst 59 px nodig heeft - op het scherm las je "erkc".
   De regel .fg-vhead .fg-btn.sm { width:32px; height:32px;
   background:transparent } is gemaakt voor RONDE ICOONKNOPPEN, maar
   raakt elke kleine knop in een vensterkop. Daardoor verloor de
   hoofdknop .brand ook nog eens zijn kleur (gemeten: rgba(0,0,0,0)).
   Nu: een knop met tekst groeit mee, een icoonknop blijft vierkant. */
.fg-vhead .fg-btn.sm, .fg-winhead .fg-btn.sm{
  width: auto !important; min-width: 32px !important; height: 32px !important;
  padding: 0 11px !important; background: var(--card-2) !important;
  white-space: nowrap !important; overflow: visible !important;
}
.fg-vhead .fg-btn.sm.brand, .fg-winhead .fg-btn.sm.brand{
  background: var(--brand-grad) !important; color: var(--op-brand, #17120a) !important; font-weight: 650 !important;
}
.fg-vhead .fg-btn.sm.ic, .fg-winhead .fg-btn.sm.ic,
.fg-vhead button[id$="Close"], .fg-winhead button[id$="Close"]{
  width: 32px !important; padding: 0 !important; background: transparent !important;
}

/* ---------- 4. HET BUILDPLAATJE STOND OVER DE ZIJBALK ----------
   Het hoort in de rechteronderhoek, als watermerk, niet over de
   onderste knop van de zijbalk. */
#fgBuildBadge{ left: auto !important; right: 12px !important; bottom: 46px !important; }

/* ---------- 5. DE LETTERTRAP VAN DE LIJST ----------
   Gemeten op een echte rij: ACHT lettergroottes door elkaar
   (14 / 10,5 / 13 / 9 / 17,5 / 11,5 / 11 / 10 px), en de verhouding
   stond omgekeerd: de bedrijfsnaam - het enige waar je op zoekt -
   stond op 13 px, terwijl het beroep, dat je zelden leest, op
   17,5 px stond. Nu vier maten, en de naam is de grootste. */
/* 23/10/2026 - BUILD 1166 - PATRICK: "maak de tekst nu eens leesbaar, groter aub,
   zowel in sidebar als crm scherm". Alles hieronder een maat groter, in dezelfde
   verhouding, zodat de rangorde blijft: de bedrijfsnaam het grootst, daarna de regel
   eronder, dan de chips. */
.fgl-tafel, .fgl-tafel td{ font-size: 15.5px !important; }
.fgl-tafel .fgl-naam{ font-size: 19px !important; font-weight: 700 !important; letter-spacing: -.1px !important; }
.fgl-tafel .fgl-onder{ font-size: 15px !important; }
/* 23/10/2026 - BUILD 1168 - PATRICK: "kan je deze teksten ook groter maken, en
   gelijkvormigheid in design gaan zoeken". Terecht: er stonden zeven verschillende
   chipmaten door elkaar (9, 10, 10,5, 11, 11,5, 12, 12,5 px), elk met hun eigen vulling
   en ronding. Nu is er EEN chip in de lijst: dezelfde maat, dezelfde vulling, dezelfde
   ronding, waar hij ook staat. En hij mag afbreken - een lange zin werd tot vandaag
   gewoon afgekapt tegen de kolomrand. */
.fgl-tafel .fgl-bwie{ font-size: 14.5px !important; }
.fgl-tafel .fgl-bwan{ font-size: 13.5px !important; }
.fgl-tafel .fgl-bewijs i{ font-size: 18px !important; }
.fgl-tafel thead th{ font-size: 13.5px !important; letter-spacing: .07em !important; }
.fgl-tafel .fgl-wacht span,
.fgl-tafel .fgl-sig span, .fgl-tafel .fgl-beurs span, .fgl-tafel .fgl-waarde span,
.fgl-tafel .fgl-niet span, .fgl-tafel .fgl-afchip, .fgl-tafel .fgl-zegel{
  font-size: 14px !important;
  line-height: 1.45 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.fgl-tafel .fgl-wacht, .fgl-tafel .fgl-sig, .fgl-tafel .fgl-beurs,
.fgl-tafel .fgl-waarde, .fgl-tafel .fgl-niet{ gap: 6px !important; }
.fgl-tafel .fgl-reden{ font-size: 14.5px !important; max-width: none !important; }
.fgl-tafel tbody td{ vertical-align: top !important; padding-top: 14px !important; }
/* de herkeuringsdatum met haar termijn erachter - Patrick: "we hebben plaats genoeg" */
.fgl-tafel .fgl-dat{ display: block !important; font-size: 14.5px !important;
                     font-variant-numeric: tabular-nums !important; }
.fgl-tafel .fgl-datsub{ display: block !important; margin-top: 2px !important;
                        font-size: 12.5px !important; color: var(--muted) !important; }
.fgl-tafel .fgl-datsub.op{ color: #b45309 !important; font-weight: 700 !important; }
/* en de zijbalk mee - drie klassen diep, anders wint de regel hierboven in dit bestand */
.fg-zij .fg-zijnav .gbtn.gbtn{ font-size: 18.5px !important; }
.fg-zij .fg-zijnav .fg-zijsub.fg-zijsub{ font-size: 15px !important; }
.fg-zij .fg-zijnav .fg-zijlabel.fg-zijlabel{ font-size: 18.5px !important; }
.fg-zij .fg-zijnav .fgbadge.fgbadge{ font-size: 13.5px !important; }
.fg-zij .fg-zijtakvak .fg2pb-postbus.fg2pb-postbus,
.fg-zij .fg-zijtakvak .fg2pb-busnaam.fg2pb-busnaam{ font-size: 16.5px !important; }
.fg-zij .fg-zijtakvak .fg2pb-boommap.fg2pb-boommap{ font-size: 16px !important; }

/* ---------- 6. CONTRAST ----------
   Gemeten tegen de echte achtergrond: de sterren haalden 3,2 en de
   oranje wachtchips 3,4. De norm om vlot te lezen is 4,5. Dat zijn
   net de twee dingen die je in een oogopslag moet kunnen zien. */
.fgl-tafel .fgl-ster{ color: #9a5b00 !important; font-size: 13.5px !important; }
.fgl-tafel .fgl-wacht span{ color: #8a4b00 !important; }

/* ---------- 7. DE KLEUR KOMT VAN DE AFDELING ----------
   22/10/2026 - BUILD 1160. Patrick: "kleuren moeten altijd van de
   afdeling zijn, hier is dit orange van Help?" Terecht, en het was
   mijn eigen regel hierboven die het brak: ik had --brand met
   !important op oranje vastgezet. Gemeten op Fast Movers: het
   register geeft #1E71D9, applyBrand() zet dat ook netjes op de
   pagina, maar een !important in een stijlblad wint altijd van een
   inline-waarde. Dus kleurde heel de app oranje, in elke afdeling.
   De pin is weg. --brand komt weer uit tegels.kleur, per afdeling.
   Wat blijft: donkere inkt op een LICHT merkvlak. Wit op oranje
   haalt 2,3 contrast en op goud nog minder. Die inkt staat nu ook
   in het register (tegels.inkt_op_kleur -> --op-brand), zodat
   oranje en goud donkere letters krijgen en indigo of blauw witte,
   zonder dat er ooit nog een kleur in dit bestand hoeft te staan. */
:root{
  --brand-grad: linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 88%, #ffffff),
      color-mix(in srgb, var(--brand) 86%, #000000)) !important;
}
.fg-btn.brand, button.brand, .gbtn.brand, [class*="knop"].brand{ background: var(--brand-grad, var(--brand)); border-color: transparent; color: var(--op-brand, #17120a) !important; }
.fg2pb-knop[data-hoofd]{ background: var(--brand) !important; color: var(--op-brand, #17120a) !important; font-weight: 650 !important; }

/* ---------- 8. EEN ICOONSET IN PLAATS VAN EMOJI ----------
   Patrick: "kijk ook naar thumbnails, icoontjes enz enz".
   In de zijbalk stonden vijftien emoji. Emoji zien er op elk toestel
   anders uit, je kan ze niet inkleuren, niet uitlijnen en niet op
   een lijndikte zetten - het sterkste niet-premium-signaal in het
   hele product. Ze zijn hier NIET uit de code gehaald (dat zou vier
   JS-bestanden raken); ze worden gemaskeerd door een lijnicoon van
   18 px dat de kleur van de tekst overneemt. Zo blijft de code
   onaangeroerd en is het beeld toch een set.
   Nog NIET gedaan: de vier actie-iconen per lijstrij, de tegels van
   de Kast en de statusbolletjes bij Ideeen. Die zitten in de HTML
   die het scherm zelf bouwt. */
.fg-zij .gbtn .ti{
  font-size: 0 !important; line-height: 0 !important;
  width: 18px !important; height: 18px !important; flex: 0 0 18px !important;
  display: inline-block !important; filter: none !important; opacity: .85 !important;
  /* valbeveiliging: een knop zonder eigen icoon krijgt een bolletje,
     nooit een zwart blok. */
  --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%277%27%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor !important;
  -webkit-mask: var(--fgico) center / 18px 18px no-repeat !important;
          mask: var(--fgico) center / 18px 18px no-repeat !important;
}
.fg-zij .gbtn.on .ti, .fg-zij .gbtn[aria-current] .ti, .fg-zij .gbtn:hover .ti{ opacity: 1 !important; }
.fg-zij .gbtn[data-tab="Inbox"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207.5l9%206%209-6%20M3%207.5h18v9.8H3z%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-tab="Dropbox"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207h5.5l2%202H21v10H3z%20M3%207v12%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-tab="Klanten"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%205.5h16v3.6H4z%20M6%209.1v9.4h12V9.1%20M10%2013h4%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-zij-doe="salesapp"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8.2%203h7.6v18H8.2z%20M10.8%2018.2h2.4%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-zij-sales] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15.5%2019v-1.8a3.6%203.6%200%200%200-3.6-3.6H7.1A3.6%203.6%200%200%200%203.5%2017.2V19%20M9.5%207.2a2.9%202.9%200%201%201-5.8%200%202.9%202.9%200%200%201%205.8%200%20M20.5%2019v-1.8a3.6%203.6%200%200%200-2.7-3.5%20M15.2%204.4a2.9%202.9%200%200%201%200%205.6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-zij-later] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%2019.5V11%20M10%2019.5V5%20M15.5%2019.5v-6%20M21%2019.5h-18%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-zij-tak="instel"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16%20M4%2012h16%20M4%2017h16%20M9%205v4%20M16%2010v4%20M12%2015v4%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-zij-doe="studio"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2020.5l5.5-1.6%209-9-3.9-3.9-9%209z%20M14%206.5l3.9%203.9%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-zij-doe="radio"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2012m-1.9%200a1.9%201.9%200%201%200%203.8%200%201.9%201.9%200%201%200-3.8%200%20M8%2016a5.6%205.6%200%200%201%200-8%20M16%208a5.6%205.6%200%200%201%200%208%20M5.2%2018.8a9.6%209.6%200%200%201%200-13.6%20M18.8%205.2a9.6%209.6%200%200%201%200%2013.6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-zij-doe="relaties"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15.5%2019v-1.8a3.6%203.6%200%200%200-3.6-3.6H7.1A3.6%203.6%200%200%200%203.5%2017.2V19%20M9.5%207.2a2.9%202.9%200%201%201-5.8%200%202.9%202.9%200%200%201%205.8%200%20M20.5%2019v-1.8a3.6%203.6%200%200%200-2.7-3.5%20M15.2%204.4a2.9%202.9%200%200%201%200%205.6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-zij-doe="snel"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13.2%202.5L4%2014h7l-1%207.5L20%2010h-7.3z%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-tab="Social"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2010.5v3a1%201%200%200%200%201%201h2.8l5.2%203.8V5.7L7.3%209.5H4.5a1%201%200%200%200-1%201z%20M17%208.3a5.2%205.2%200%200%201%200%207.4%20M19.8%205.5a9%209%200%200%201%200%2013%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-tab="Live"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021.2s6.8-6%206.8-10.7a6.8%206.8%200%201%200-13.6%200C5.2%2015.2%2012%2021.2%2012%2021.2z%20M12%2010.5m-2.1%200a2.1%202.1%200%201%200%204.2%200%202.1%202.1%200%201%200-4.2%200%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-tab="Ideeën"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.4%2018h5.2%20M10.3%2021h3.4%20M12%203a5.9%205.9%200%200%201%203.6%2010.6V16H8.4v-2.4A5.9%205.9%200%200%201%2012%203z%27%2F%3E%3C%2Fsvg%3E"); }
.fg-zij .gbtn[data-tab="Finance"] .ti{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M17.5%206.6a6.6%206.6%200%201%200%200%2010.8%20M4.5%2010.2h8.8%20M4.5%2013.8h8.8%27%2F%3E%3C%2Fsvg%3E"); }

/* ---------- 9. DE DRIE KNOPPEN BOVEN DE LIJST ----------
   .fg-knop3d had een vaste paarse verloopkleur in de code, los van de
   tokens - daarom bleven "+ Bedrijf", "Exporteren" en "Configuratie"
   paars terwijl de rest al oranje was. Nu volgen ze de huisstijl.
   Wat hier NIET kan: de hoofdknop apart zetten van de twee andere.
   Alle drie dragen exact dezelfde klasse, dus CSS kan ze niet uit
   elkaar houden. Zodra "+ Bedrijf" een eigen klasse krijgt in de code,
   maken we die gevuld en de twee andere rustig. */
.fg-knop3d{
  background-image: var(--brand-grad) !important;
  color: var(--op-brand, #17120a) !important; font-weight: 650 !important; text-shadow: none !important;
}

/* Het buildplaatje net boven de motorpil, zodat ze elkaar niet raken. */
#fgBuildBadge{ bottom: 56px !important; }

/* ==================================================================
   22/10/2026 - BUILD 1150 - DE ICONEN ZICHTBAAR MAKEN
   In 1149 bleven de vijftien lijniconen onzichtbaar. GEMETEN in de
   live app: --fgico bevatte stroke='%23000' in plaats van stroke='#'
   - het hekje was twee keer gecodeerd toen ik de SVG's aanmaakte, dus
   de browser kreeg een ongeldige kleur, tekende niets, en het masker
   was leeg. Niet de techniek was fout, mijn codering was fout.
   Hier staat nu 'black' zodat er nergens nog een hekje in de URL zit.
   ================================================================== */
.fg-zij .fg-zijnav .gbtn .ti,
.fg-zij .fg-zijtakvak .gbtn .ti{ font-size: 0 !important; line-height: 0 !important; }


/* ==================================================================
   22/10/2026 - BUILD 1151 - MINDER RUIS, EEN ICOONSET, MEER RELEVANTIE
   Patrick, tijdens de audit: "stel je constant de vraag, is de tekst,
   data die we laten zien, relevant? als nieuwe gebruiker later. ik
   denk bv aan de stempel BTW? waarom is dat nodig, is gewoon een
   evidentie toch!"
   Hij heeft gelijk, en het is te meten ook: die stempel stond
   290 keer in de lijst - een keer per rij - en zei elke keer
   hetzelfde. Een gegeven dat altijd waar is, is geen gegeven.
   ================================================================== */

/* ---------- 1. DE BTW-STEMPEL UIT DE LIJST ----------
   GEMETEN: .fgl-zegel komt 290 keer voor en bevat 290 keer het woord
   BTW. Elk Belgisch bedrijf heeft een btw-nummer; dat op elke rij
   herhalen kost ruimte en vertelt niets. Het nummer zelf staat waar
   het hoort: op de fiche. */
.fgl-tafel .fgl-zegel{ display: none !important; }

/* ---------- 2. DE VIER BEWIJS-ICONEN ----------
   Dit waren emoji (bonnetje, wereldbol, envelop, speld) op 15 px, vier
   per rij. Nu lijniconen die de kleur van hun stand overnemen, zodat
   groen en oranje het verhaal vertellen en niet het plaatje. */
.fgl-tafel .fgl-bewijs i{
  width: 17px !important; height: 17px !important; display: inline-block !important;
  font-size: 0 !important; line-height: 0 !important; vertical-align: middle !important;
  background-color: currentColor !important;
  -webkit-mask: var(--fgico) center / 15px 15px no-repeat !important;
          mask: var(--fgico) center / 15px 15px no-repeat !important;
}
/* De kleur zat vroeger IN de emoji (een groen bonnetje, een oranje
   speld). Nu de emoji weg is, moet de klasse de kleur dragen - anders
   zie je wel vier iconen maar niet meer of het bewijs er is. */
.fgl-tafel .fgl-bewijs i.k-groen{ color: #15803d !important; }
.fgl-tafel .fgl-bewijs i.k-oranje{ color: #b45309 !important; }
.fgl-tafel .fgl-bewijs i.k-grijs{ color: #94a3b8 !important; }
.fgl-tafel .fgl-bewijs i.k-niets{ color: #d7dee8 !important; }
.fgl-tafel .fgl-bewijs i[title^="btw"]{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h12v18l-2-1.4-2%201.4-2-1.4-2%201.4-2-1.4-2%201.4z%20M9%208h6%20M9%2012h6%27%2F%3E%3C%2Fsvg%3E"); }
.fgl-tafel .fgl-bewijs i[title^="startpagina"]{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203a9%209%200%201%200%200%2018%209%209%200%200%200%200-18z%20M3.5%2012h17%20M12%203c2.3%202.4%203.5%205.5%203.5%209s-1.2%206.6-3.5%209c-2.3-2.4-3.5-5.5-3.5-9S9.7%205.4%2012%203z%27%2F%3E%3C%2Fsvg%3E"); }
.fgl-tafel .fgl-bewijs i[title^="contactpagina"]{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207.5l9%206%209-6%20M3%207.5h18v9.8H3z%27%2F%3E%3C%2Fsvg%3E"); }
.fgl-tafel .fgl-bewijs i[title^="Google-kaartje"]{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021.2s6.8-6%206.8-10.7a6.8%206.8%200%201%200-13.6%200C5.2%2015.2%2012%2021.2%2012%2021.2z%20M12%2010.5m-2.1%200a2.1%202.1%200%201%200%204.2%200%202.1%202.1%200%201%200-4.2%200%27%2F%3E%3C%2Fsvg%3E"); }

/* ---------- 3. DE KAST ----------
   Eenendertig mappen, eenendertig emoji uit vier verschillende
   stijlen. Nu een set lijniconen; de kleur van de map (--spine) blijft
   het onderscheid maken. En lange namen liepen over de rand
   ("weekrapport wise11"): die worden nu netjes op twee regels gezet. */
.fg-kast .fg-binder .fg-binder-ic{
  width: 22px !important; height: 22px !important; display: block !important;
  font-size: 0 !important; line-height: 0 !important;
  background-color: currentColor !important; opacity: .92 !important;
  --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h8l4%204v14H6z%20M14%203v4h4%20M9%2012h6%20M9%2016h6%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask: var(--fgico) center / 22px 22px no-repeat !important;
          mask: var(--fgico) center / 22px 22px no-repeat !important;
}
.fg-kast .fg-binder[data-cat="nieuwe-map"] .fg-binder-ic,
.fg-kast .fg-binder:not([data-cat]) .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14%20M5%2012h14%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder .fg-binder-name{
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  font-size: 10.5px !important; line-height: 1.3 !important; word-break: normal !important;
}
.fg-kast .fg-binder .fg-binder-count{ font-variant-numeric: tabular-nums !important; }
.fg-kast .fg-binder[data-cat="werkafspraken"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h8l4%204v14H6z%20M14%203v4h4%20M9%2012h6%20M9%2016h6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="logboek"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h8l4%204v14H6z%20M14%203v4h4%20M9%2012h6%20M9%2016h6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="register"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h8l4%204v14H6z%20M14%203v4h4%20M9%2012h6%20M9%2016h6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="notities"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h8l4%204v14H6z%20M14%203v4h4%20M9%2012h6%20M9%2016h6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="contracten"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h8l4%204v14H6z%20M14%203v4h4%20M9%2012h6%20M9%2016h6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="offertes"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h8l4%204v14H6z%20M14%203v4h4%20M9%2012h6%20M9%2016h6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="templates"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h8l4%204v14H6z%20M14%203v4h4%20M9%2012h6%20M9%2016h6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="strategie"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h8l4%204v14H6z%20M14%203v4h4%20M9%2012h6%20M9%2016h6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="crm-software"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%208l-4%204%204%204%20M15%208l4%204-4%204%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="code"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%208l-4%204%204%204%20M15%208l4%204-4%204%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="infrastructuur"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%208l-4%204%204%204%20M15%208l4%204-4%204%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="verkoop"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15.5%2019v-1.8a3.6%203.6%200%200%200-3.6-3.6H7.1A3.6%203.6%200%200%200%203.5%2017.2V19%20M9.5%207.2a2.9%202.9%200%201%201-5.8%200%202.9%202.9%200%200%201%205.8%200%20M20.5%2019v-1.8a3.6%203.6%200%200%200-2.7-3.5%20M15.2%204.4a2.9%202.9%200%200%201%200%205.6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="verkoopkoffer"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15.5%2019v-1.8a3.6%203.6%200%200%200-3.6-3.6H7.1A3.6%203.6%200%200%200%203.5%2017.2V19%20M9.5%207.2a2.9%202.9%200%201%201-5.8%200%202.9%202.9%200%200%201%205.8%200%20M20.5%2019v-1.8a3.6%203.6%200%200%200-2.7-3.5%20M15.2%204.4a2.9%202.9%200%200%201%200%205.6%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="data-en-import"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203c4%200%207%201.1%207%202.5S16%208%2012%208%205%206.9%205%205.5%208%203%2012%203z%20M5%205.5v13C5%2019.9%208%2021%2012%2021s7-1.1%207-2.5v-13%20M5%2012c0%201.4%203%202.5%207%202.5s7-1.1%207-2.5%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="video-en-content"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%205.5h17v13h-17z%20M3.5%2010h17%20M3.5%2014h17%20M8%205.5v13%20M16%205.5v13%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="video"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%205.5h17v13h-17z%20M3.5%2010h17%20M3.5%2014h17%20M8%205.5v13%20M16%205.5v13%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="logos"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204h14%20M12%204v16%20M8.5%2020h7%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="huisstijl"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204h14%20M12%204v16%20M8.5%2020h7%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="merk-en-design"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204h14%20M12%204v16%20M8.5%2020h7%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="visitekaartjes"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204h14%20M12%204v16%20M8.5%2020h7%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="drukwerk"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204h14%20M12%204v16%20M8.5%2020h7%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="mascottes"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203c4.5%200%207.5%202.5%207.5%206.5%200%205-3.5%2011.5-7.5%2011.5S4.5%2014.5%204.5%209.5C4.5%205.5%207.5%203%2012%203z%20M9%2010h.01%20M15%2010h.01%20M9.5%2014.5c1.5%201.2%203.5%201.2%205%200%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="website"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203a9%209%200%201%200%200%2018%209%209%200%200%200%200-18z%20M3.5%2012h17%20M12%203c2.3%202.4%203.5%205.5%203.5%209s-1.2%206.6-3.5%209c-2.3-2.4-3.5-5.5-3.5-9S9.7%205.4%2012%203z%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="social-en-web"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203a9%209%200%201%200%200%2018%209%209%200%200%200%200-18z%20M3.5%2012h17%20M12%203c2.3%202.4%203.5%205.5%203.5%209s-1.2%206.6-3.5%209c-2.3-2.4-3.5-5.5-3.5-9S9.7%205.4%2012%203z%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="weekrapport-wise11"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207h5.5l2%202H21v10H3z%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="ai-en-kennis"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.4%2018h5.2%20M10.3%2021h3.4%20M12%203a5.9%205.9%200%200%201%203.6%2010.6V16H8.4v-2.4A5.9%205.9%200%200%201%2012%203z%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="mail-en-campagnes"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207.5l9%206%209-6%20M3%207.5h18v9.8H3z%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="mail"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207.5l9%206%209-6%20M3%207.5h18v9.8H3z%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="social"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2010.5v3a1%201%200%200%200%201%201h2.8l5.2%203.8V5.7L7.3%209.5H4.5a1%201%200%200%200-1%201z%20M17%208.3a5.2%205.2%200%200%201%200%207.4%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="fotos"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%208h3.2l1.3-2h7l1.3%202h3.2v11h-16z%20M12%2016.5a3.2%203.2%200%201%200%200-6.4%203.2%203.2%200%200%200%200%206.4%27%2F%3E%3C%2Fsvg%3E"); }
.fg-kast .fg-binder[data-cat="facturen"] .fg-binder-ic{ --fgico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h12v18l-2-1.4-2%201.4-2-1.4-2%201.4-2-1.4-2%201.4z%20M9%208h6%20M9%2012h6%27%2F%3E%3C%2Fsvg%3E"); }

/* ---------- 4. LEGE VELDEN OP DE FICHE ----------
   Patrick: een nieuwe gebruiker heeft niets aan een rij die zegt dat
   er niets is. Ze blijven staan - want ze zijn ook een to-do - maar ze
   krijgen de helft van het gewicht, zodat de echte gegevens vooraan
   staan in plaats van te moeten vechten met de lege. */
.v3-rij:has(.v3-leeg){ opacity: .5 !important; }
.v3-rij:has(.v3-leeg) .v3-rl,
.v3-rij:has(.v3-leeg) .v3-rw{ font-size: 12px !important; padding-top: 3px !important; padding-bottom: 3px !important; }
.v3-leeg{ font-style: italic !important; }

/* ===========================================================================
   BUILD 1154 - 22/10/2026 - GROTERE LETTERS IN DE ZIJBALK.
   Patrick: "kan die groter in tekst aub, staar me bijna blind op die kleine
   lettertjes". Gemeten vóór deze build, in Chrome op de live pagina:
     afdelingskop  10,5px   mapregel 13,5px   busnaam 14px
     teller        11,5px   vouwpijl 10px     menu-item 16px
   Eén trap hoger over de hele zijbalk, en de regelhoogtes mee - zodat er
   niets afgesneden wordt. Verder niets: geen nieuwe kleuren, geen nieuwe
   vormen, alleen leesbaarheid.
   =========================================================================== */
.fg-zij .gbtn{ font-size: 17px !important; }
.fg-zij .fg-zijlabel{ font-size: 17px !important; }
.fg-zij .fgbadge{ font-size: 12.5px !important; }
.fg-zij .fg-zijklap{ font-size: 12px !important; }
.fg-zij .fg-zijtaalknop{ font-size: 13.5px !important; }

.fg2pb-afdeling{ font-size: 12.5px !important; letter-spacing: .04em !important;
                 line-height: 26px !important; }
.fg2pb-afd-tel{ font-size: 12.5px !important; }

.fg2pb-postbus{ font-size: 15.5px !important; min-height: 34px !important; }
.fg2pb-busnaam{ font-size: 15.5px !important; line-height: 1.25 !important; }
.fg2pb-vouw{ font-size: 12px !important; }

.fg2pb-boommap{ font-size: 15px !important; min-height: 32px !important;
                line-height: 1.25 !important; }
.fg2pb-map-tel{ font-size: 12.5px !important; }

/* ===========================================================================
   BUILD 1155 - 22/10/2026 - DEZELFDE LETTERS, MAAR NU MET GENOEG GEWICHT.
   Mijn blok van 1154 verloor in de cascade. Gemeten in Chrome na die build:
   busnaam 15,5px (gelukt) maar afdelingskop 10,5 · mapregel 13,5 · teller 11,5 ·
   vouwpijl 10 · menu-item 16 - allemaal ongewijzigd. Reden, nagekeken in de
   stylesheet zelf: er stonden al regels met TWEE klassen en !important
   (.fg-zijtakvak .fg2pb-boommap, .fg-zij .fg-zijnav .gbtn), en die winnen van
   een regel met één klasse, ook al staat die later. Niet de maat was fout,
   mijn selector was te licht. Nu drie klassen, dus zwaarder dan wat er stond.

   En de rekkolom van fg-lijst.js krijgt hier haar vorm: onzichtbaar, geen rand,
   geen vulling - ze bestaat alleen om het overschot op te vangen.
   =========================================================================== */
.fg-zij .fg-zijnav .gbtn.gbtn{ font-size: 17px !important; }
.fg-zij .fg-zijnav .fg-zijklap.fg-zijklap{ font-size: 12px !important; }

.fg-zij .fg-zijtakvak .fg2pb-afdeling{ font-size: 12.5px !important;
                                       letter-spacing: .04em !important;
                                       line-height: 26px !important; }
.fg-zij .fg-zijtakvak .fg2pb-afd-tel{ font-size: 12.5px !important; }
.fg-zij .fg-zijtakvak .fg2pb-postbus{ font-size: 15.5px !important; min-height: 34px !important; }
.fg-zij .fg-zijtakvak .fg2pb-busnaam{ font-size: 15.5px !important; line-height: 1.25 !important; }
.fg-zij .fg-zijtakvak .fg2pb-vouw{ font-size: 12px !important; }
.fg-zij .fg-zijtakvak .fg2pb-boommap{ font-size: 15px !important; min-height: 32px !important;
                                      line-height: 1.25 !important; }
.fg-zij .fg-zijtakvak .fg2pb-map-tel{ font-size: 12.5px !important; }

.fgl-tafel th.fgl-rek, .fgl-tafel td.fgl-rek{ padding: 0 !important; border: 0 !important;
                                              background: transparent !important; width: auto !important; }

/* ===========================================================================
   BUILD 1156 - 22/10/2026 - DE ZIJBALK KRIJGT EEN EIGEN BODEM.
   Patrick: "maar hier klopt de sidebar dan ook niet meer he?" - op het
   postbusscherm. Gemeten in Chrome: .fg-zij heeft ZELF geen achtergrond
   (background-color: rgba(0,0,0,0), uit mijn premium-blok van build 1148) en
   drijft op een merkverloop 315deg #14110A -> #5A4A16 -> #D4AF37. Op een lange
   smalle balk valt het donkere uiteinde buiten beeld; wat je ziet is bijna
   alleen het lichte goud. Witte tekst op #D4AF37 geeft een contrast van
   2,1 : 1, waar 4,5 de norm is. Op het dashboard viel het niet op omdat de
   balk daar boven een donkere hero stond - dat was geluk, geen ontwerp.

   Nu: een vaste donkere bodem plus een sluier OVER het merkverloop, zodat de
   tint van het merk voelbaar blijft maar de tekst altijd leest. Het lichtste
   punt wordt daarmee ongeveer #3E3311: ±12 : 1 met witte tekst.
   =========================================================================== */
.fg-zij{ background-color: #14110a !important; }
/* 22/10/2026 - BUILD 1158 - MIJN position:relative BRAK DE HELE INDELING.
   Build 1157 zette .fg-zij op position: relative. Maar de balk stond al op
   position: absolute via .fg-page:has(.fg-zij) > .fg-zij, en DAT is wat hem op
   zijn plaats houdt. Relative haalde hem uit die plaatsing: de zijbalk werd een
   zwevend blok en het postbusscherm schoof eronder. Patrick zag het meteen.
   De regel was ook nergens voor nodig: ::before heeft een geplaatste ouder nodig
   en absolute IS er een. Alleen de donkere bodem en de sluier blijven staan. */
.fg-zij::before{ content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
                 background: linear-gradient(180deg, rgba(10,8,4,.74) 0%, rgba(10,8,4,.88) 100%); }
.fg-zij > *{ position: relative; z-index: 1; }
/* 22/10/2026 - BUILD 1157 - HET BLOK VAN 1156 STOND MIDDEN IN EEN ANDERE REGEL.
   Gemeten na 1156: de zijbalk bleef doorzichtig (background-color rgba(0,0,0,0))
   en position bleef absolute - mijn drie regels stonden niet eens in de
   stylesheet van de browser. Oorzaak, nagekeken in het uitgeleverde bestand:
   mijn zoekstuk was de EERSTE regel van de tweeregelige .fgl-rek-regel, dus het
   hele blok belandde BINNEN een nog openstaande accolade. De CSS-ontleder slikt
   dan alles op tot aan de sluitende }. Niet de regels waren fout, mijn anker was
   fout. Voortaan anker ik een aanvulling nooit meer midden in een regel. */

/* ===========================================================================
   BUILD 1159 - 22/10/2026 - HET MERKJE VOOR EEN ONDERDEEL DAT NOG GEBOUWD WORDT.
   Patrick: "als een tab bestaat maar nog geen schermen heeft zet je gewoon
   In ontwikkeling". In de zijbalk staat dat als een klein, rustig merkje achter
   de naam - het onderdeel verdwijnt niet, het zegt alleen eerlijk waar het staat.
   =========================================================================== */
/* ===== BEGIN LEESBAARHEIDSLAAG BUILD 1172 =================================
   27/10/2026. Patrick: "mijn ogen doen pijn van het staren op het scherm",
   "de fiche ook meer contrast geven en meer leesbaarheid", "de tekst iets groter
   in de sidebar". Dat is geen smaakvraag maar een werkvraag: wie hier de hele dag
   naar kijkt moet kunnen lezen zonder te turen.
   Alles staat tussen deze twee bakens zodat het in EEN keer terug kan. Dit bestand
   is 458 KB en draagt lagen !important-regels over elkaar, waarbij de ZWAARSTE
   selector wint en niet de laatste - daar zijn eerdere maatwijzigingen al stil op
   gesneuveld. Daarom staan de maten hieronder op twee of drie keer dezelfde klasse.
   =========================================================================== */

/* --- 1. de zijbalk --------------------------------------------------------- */
.fg-zij .fg-zijnav .gbtn.gbtn.gbtn{ font-size: 18.5px !important; }
.fg-zij .fg-zijnav .fg-zijlabel.fg-zijlabel.fg-zijlabel{ font-size: 18.5px !important; }
.fg-zij .fg-zijnav .fg-zijsub.fg-zijsub.fg-zijsub{ font-size: 16.5px !important; }
.fg-zij .fg-zijnav .fgbadge.fgbadge.fgbadge{ font-size: 13px !important; }
.fg-zij .fg-zijtakvak .fg2pb-postbus.fg2pb-postbus.fg2pb-postbus,
.fg-zij .fg-zijtakvak .fg2pb-busnaam.fg2pb-busnaam.fg2pb-busnaam{ font-size: 17px !important; }
.fg-zij .fg-zijtakvak .fg2pb-boommap.fg2pb-boommap.fg2pb-boommap{ font-size: 16.5px !important; }
.fg-zij .fg-zijtakvak .fg2pb-map-tel.fg2pb-map-tel.fg2pb-map-tel,
.fg-zij .fg-zijtakvak .fg2pb-afd-tel.fg2pb-afd-tel.fg2pb-afd-tel{ font-size: 13px !important; }

/* --- 2. de lijst ----------------------------------------------------------- */
.fgl-tafel td, .fgl-tafel th{ padding-top: 11px !important; padding-bottom: 11px !important; }
.fgl-tafel .fgl-naam.fgl-naam{ font-size: 17px !important; font-weight: 650 !important;
                               line-height: 1.3 !important; }
.fgl-tafel .fgl-onder.fgl-onder{ font-size: 13.5px !important; opacity: .85 !important; }
.fgl-tafel .fgl-beurt.fgl-beurt{ font-size: 13.5px !important; line-height: 1.5 !important; }
.fgl-tafel .fgl-wacht.fgl-wacht{ font-size: 13.5px !important; }
/* de oranje uitlegballonnen: een zin, geen muur */
.fgl-tafel .fgl-reden.fgl-reden,
.fgl-tafel .fgl-bewijs.fgl-bewijs{ font-size: 13px !important; line-height: 1.55 !important;
                                   max-width: 34ch !important; padding: 8px 11px !important;
                                   border-radius: 10px !important; }
.fgl-tafel .fgl-afchip.fgl-afchip{ font-size: 13px !important; padding: 4px 10px !important; }
.fgl-tafel .fgl-sig.fgl-sig,
.fgl-tafel .fgl-signaam.fgl-signaam{ font-size: 13px !important; }
.fgl-tafel .fgl-ster.fgl-ster{ font-size: 13px !important; }
.fgl-tafel .fgl-dat.fgl-dat{ font-size: 13.5px !important; }
.fgl-tafel .fgl-datsub.fgl-datsub{ font-size: 12px !important; }

/* --- 3. de fiche: contrast -------------------------------------------------- */
/* De labels links (Bankrekening, Bezoekadres, GPS, Provincie) stonden zo licht dat
   ze tegen wit bijna verdwenen. Een label mag rustiger zijn dan zijn waarde, maar
   het moet wel leesbaar blijven. */
.f2-kaart .f2-lbl.f2-lbl{ font-size: 13.5px !important; color: #5b6472 !important;
                          font-weight: 600 !important; }
.f2-kaart .f2-waarde.f2-waarde{ font-size: 14.5px !important; color: #11161f !important;
                                font-weight: 560 !important; line-height: 1.45 !important; }
.f2-kaart .f2-rij.f2-rij{ padding-top: 9px !important; padding-bottom: 9px !important; }
.f2-kaart.f2-kaart{ border: 1px solid rgba(17,22,31,.14) !important;
                    border-radius: 12px !important; }
.f2-kaart .f2-kaartkop.f2-kaartkop,
.f2-kaart .f2-kolkop.f2-kolkop{ font-size: 12.5px !important; letter-spacing: .08em !important;
                                color: #3d4654 !important; font-weight: 750 !important; }
.f2-kaart .f2-naam.f2-naam{ font-size: 15px !important; color: #11161f !important; }
.f2-kaart .f2-let.f2-let{ opacity: .75 !important; }
.f2-kaart .f2-chip.f2-chip,
.f2-kaart .f2-zegel.f2-zegel{ font-size: 12px !important; }
/* "nog niet gevonden" blijft lichter dan een echte waarde, maar niet onzichtbaar */
.f2-kaart .leeg.leeg, .f2-kaart .f2-waarde.leeg{ color: #7b8494 !important;
                                                 font-style: italic !important; }

/* ===== EINDE LEESBAARHEIDSLAAG BUILD 1172 ================================== */

.fg-zij .fg-zijbouw{
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 7px;
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
}