:root{ --fe-font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
  body,.fe-card,.fe-btn,.fe-badge,.hint,.title{ font-family:var(--fe-font)!important }

  .container .fe-card{ min-width:0 }
  .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
  .span-2{grid-column:span 2}
  @media (max-width:1200px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} .span-2{grid-column:span 2} }
  @media (max-width:760px){ .grid-3{grid-template-columns:1fr} .span-2{grid-column:auto} }

  .kpis-modern{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
  @media (max-width:1200px){ .kpis-modern{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:760px){ .kpis-modern{grid-template-columns:1fr} }
  .fe-card .hint{margin:8px 0 8px;text-align:left}

  .onboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:20px}
  .onboard-card{position:relative}
  .onboard-card .close-btn{position:absolute;top:8px;right:8px;background:none;border:0;color:#64748b;font-size:16px;cursor:pointer}

  .kpi-donut{min-height:200px;display:flex;flex-direction:column;align-items:start;justify-content:center}
  #kpiFillChart,#kpiAvgChart{width:100%;max-width:260px}

  .kpi-mood{min-height:200px;display:flex;flex-direction:column}
  .kpi-mood .mood-hero{display:flex;align-items:center;gap:12px;margin:2px 4px 6px}
  .kpi-mood .emoji{font-size:40px;line-height:1.1}
  .kpi-mood .numbers{display:flex;flex-direction:column}
  .kpi-mood .big{font-weight:800;font-size:26px}
  .kpi-mood .sub{font-size:12px;opacity:.7}
  .mini-breakdown{display:flex;flex-direction:column;gap:8px;margin:12px 4px 0;}
  .mini-breakdown .hint{ font-size:12px; opacity:.65; margin-left:4px }
  .mini-breakdown .row{display:flex;align-items:center;gap:8px;font-size:13px;color:#334155}
  .mini-breakdown .s-emoji{font-size:16px;width:18px;text-align:center}

  #kpiMoodBars{height:180px}
  .mood-legend{display:flex;gap:14px;align-items:center;justify-content:center;font-size:12px;margin-top:4px}
  .mood-legend .dot{display:inline-block;width:12px;height:12px;border-radius:3px}
  .dot.low{background:#ef4444}
  .dot.ok{background:#f59e0b}
  .dot.happy{background:#10b981}

  #miniBarChart{height:160px}
  .chart{width:100%}
  .apexcharts-tooltip,*[class^="apexcharts-"]{ font-family:var(--fe-font)!important }

  .delta-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:8px}
  .delta-tile{border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:transparent}
  .fe-dark .delta-tile{border-color:#334155}
  .delta-tile .head{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .delta-tile .now{font-weight:700;font-size:18px}
  .delta-tile .delta{font-weight:700}
  .delta-tile.good .delta{color:#10b981}
  .delta-tile.bad  .delta{color:#ef4444}
  .delta-tile.neutral .delta{color:#64748b}
  .delta-tile .spark{width:100%;height:34px;margin:6px 0}
  .delta-tile .fe-badge{background:transparent;border:1px solid currentColor}
  .delta-tile[role="button"]{cursor:pointer}

  /* Tour */
  .tl-overlay{position:fixed;inset:0;background:rgba(15,23,42,.24);z-index:9997}
  .tl-pop{position:fixed;z-index:10000;background:rgba(255,255,255,.98);border-radius:16px;box-shadow:0 16px 56px rgba(2,6,23,.28);padding:14px 16px;max-width:320px}
  .fe-dark .tl-pop{background:#0b1220;color:#e2e8f0}
  .tl-focus{position:relative;z-index:10001;outline:3px solid #7c3aed;box-shadow:0 0 0 9px rgba(124,58,237,.18);border-radius:16px}
  .tl-btn{border:0;padding:8px 10px;border-radius:10px;background:#eef2ff;margin-right:6px}
  .tl-btn.primary{background:#7c3aed;color:#fff}

  /* Signalen alerts */
  #signals .signal-card{border-radius:14px;padding:12px;margin:8px 0;border:1px solid var(--fe-border);background:var(--fe-surface-subtle);display:flex;align-items:flex-start;gap:10px}
  #signals .sig-dot{width:10px;height:10px;border-radius:50%;margin-top:6px}
  #signals .bad  .sig-dot{background:#ef4444}
  #signals .warn .sig-dot{background:#f59e0b}
  #signals .good .sig-dot{background:#10b981}
  #signals .signal-card .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  #signals .signal-card .meta .score{font-weight:700}

  .fe-statusbar {font-size: 13px;color: var(--fe-hint);margin-top: 8px;display: flex;align-items: center;gap: 6px}
  .fe-statusbar .dot {width: 4px;height: 4px;border-radius: 50%;background: currentColor;opacity: .5}

  .grid-2 {display: grid;grid-template-columns: 1fr 1fr;gap: 12px;margin-top: 12px}
  @media (max-width: 900px){.grid-2 {grid-template-columns: 1fr}}

  /* Hide-by-default bits controlled by JS */
  #onboardCards[hidden], #dashboardCharts[hidden], #dashboardEmpty[hidden] { display: none !important; }
  
  .coach-widget .head {
  background: linear-gradient(90deg, #6D4AFE 0%, #7C3AED 100%);
  color: #fff;
}

  /* alleen styling; niets anders verandert */
  #moodBreakdown .s-emoji{
    display:inline-block; width:18px; height:18px; 
    vertical-align:-3px; font-size:0; line-height:0; /* emoji-tekens in host onderdrukken */
    margin-right:8px;
  }
  
   /* Emoji in de Team Mood kaart top-aligned naast de titel */
  #kpiMood .mood-hero { align-items: flex-start; }         /* hele rij omhoog uitlijnen */
  #kpiMood .emoji      { align-self: flex-start; margin-top: 2px; } /* net wat extra lift */

  /* optioneel: op mobiel weer centreren */
  @media (max-width: 760px){
    #kpiMood .mood-hero { align-items: center; }
    #kpiMood .emoji     { margin-top: 0; }
  }
  
  div#coachAdviceBody {
    font-size: 14px;
    color: var(--fe-ink-muted);
}

#deltaTiles .delta-tile .delta{ font-weight:700; }
#deltaTiles .delta-tile.good    .delta{ color:#10b981 !important; }  /* groen */
#deltaTiles .delta-tile.bad     .delta{ color:#ef4444 !important; }  /* rood  */
#deltaTiles .delta-tile.neutral .delta{ color:#64748b !important; }  /* grijs */

    /* === Feellin • Firm & Friendly (compact test override) === */

/* 1) Typo & appbar */
h1,h2,h3{font-weight:800!important;letter-spacing:-.01em}
.appbar{box-shadow:0 1px 2px rgba(16,24,40,.06)!important;border-bottom:1px solid var(--fe-border)!important}
.fe-dark .appbar{box-shadow:0 1px 2px rgba(0,0,0,.35)!important}

/* 2) Cards / KPI’s */
.fe-card,.kpi,.member-card{
  border:1px solid var(--fe-border)!important;
  border-radius:16px!important;
  box-shadow:0 1px 2px rgba(16,24,40,.06)!important;
  background:var(--fe-surface,#fff)!important;
}
.fe-card:hover{box-shadow:0 8px 18px rgba(17,24,39,.10)!important}
.fe-dark .fe-card,.fe-dark .kpi,.fe-dark .member-card{
  background:#111827!important;border-color:#334155!important;box-shadow:0 8px 22px rgba(0,0,0,.35)!important
}

/* 3) Topnav knoppen */
.topnav .fe-btn{
  border-radius:999px!important;font-weight:700!important;
  border:1px solid var(--fe-border)!important;background:#fff!important;color:var(--fe-ink)!important
}
.topnav .fe-btn.active{
  background:var(--fe-brand)!important;border-color:var(--fe-brand)!important;color:#fff!important;
  box-shadow:0 8px 18px rgba(109,74,254,.25)!important
}
.fe-dark .topnav .fe-btn{background:#0f172a!important;color:#e2e8f0!important;border-color:#334155!important}

/* 4) Buttons (algemeen) */
.fe-btn,.btn{border-radius:12px!important;font-weight:800!important}
.fe-btn.primary,.btn-primary{
  background:var(--fe-brand)!important;border-color:var(--fe-brand)!important;color:#fff!important;
  box-shadow:0 10px 22px rgba(109,74,254,.24)!important
}
.fe-btn.primary:hover,.btn-primary:hover{transform:translateY(-1px);transition:transform .12s ease}

/* 5) Inputs & focus */
.fe-card input[type="text"],.fe-card input[type="email"],.fe-card input:not([type]),
input.form-control,.coach-widget .input input{
  border:1px solid var(--fe-border)!important;border-radius:12px!important;background:#fff!important
}
.fe-card input:focus,input.form-control:focus,.coach-widget .input input:focus{
  border-color:var(--fe-brand)!important;box-shadow:0 0 0 4px rgba(109,74,254,.18)!important
}
.fe-dark .coach-widget .input input{background:#0b1220!important;border-color:#334155!important;color:#e2e8f0!important}

/* 6) Kleine leesbaarheids-boosts */
.hint{color:var(--fe-ink-muted,#475569)!important}
.fe-badge{font-weight:700!important;border-color:var(--fe-border)!important}

/* 7) Charts labels wat donkerder */
.apexcharts-xaxis text,.apexcharts-yaxis text{fill:#64748b!important;font-weight:600!important}
.fe-dark .apexcharts-xaxis text,.fe-dark .apexcharts-yaxis text{fill:#a7b0c7!important}


/* === Feellin • Card headers sterker (compact) === */

/* 1) Hints/titels bovenin de card/KPI */
.fe-card > .hint:first-child,
.kpi > .hint:first-child,
.fe-card .card-title,
.kpi .card-title {
  font-weight: 800 !important;
  color: var(--fe-ink, #0f172a) !important;
  letter-spacing: -0.01em;
}

/* 2) Headings in cards */
.fe-card h1, .fe-card h2, .fe-card h3, .fe-card h4,
.kpi h1, .kpi h2, .kpi h3, .kpi h4 {
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--fe-ink, #0f172a) !important;
}

/* 3) Dark mode kleuren netjes mee */
.fe-dark .fe-card > .hint:first-child,
.fe-dark .kpi > .hint:first-child,
.fe-dark .fe-card .card-title,
.fe-dark .kpi .card-title,
.fe-dark .fe-card h1, .fe-dark .fe-card h2, .fe-dark .fe-card h3, .fe-dark .fe-card h4,
.fe-dark .kpi h1, .fe-dark .kpi h2, .fe-dark .kpi h3, .fe-dark .kpi h4 {
  color: #e2e8f0 !important;
}


/* Quotes: consistente kaart-padding */
#quotesHost .quote-item{
  
  border-radius: 14px;
}

/* Pill/badge altijd op eigen regel + ruimere spacing */
#quotesHost .quote-item .badge{
  display: block !important;       /* forceert regelafbreking erna */
  width: max-content;              /* pill zo breed als nodig */
  max-width: 100%;                 /* maar nooit breder dan de kaart */
  padding: 8px 16px !important;    /* meer inner padding */
  margin: 4px 0 12px !important;   /* lucht boven/onder de pill */
  border-radius: 12px !important;
  line-height: 1.1;
  white-space: nowrap;             /* tekst in de pill zelf niet afbreken */
}

/* Icoon in de pill netjes uitgelijnd */
#quotesHost .quote-item .badge .icon{
  font-size: 14px;
  line-height: 1;
  margin-right: 8px;
}

/* Twee nette kolommen – stabiel */
#quotesHost .masonry{ column-count: 1; column-gap: 24px; }
@media (min-width: 760px){  #quotesHost .masonry{ column-count: 2 !important; } }
@media (min-width: 1200px){ #quotesHost .masonry{ column-count: 2 !important; } }

#quotesHost .masonry .quote-item{
  display: block !important;
  width: 100%;
  margin: 0 0 18px;
  break-inside: avoid;
  opacity: 0; animation: quotesFadeIn .25s ease forwards;
}
@keyframes quotesFadeIn { to { opacity: 1; } }

#quotesHost .masonry .quote-item.is-hidden { display: none !important; }

/* Card-help icoon rechtsboven */
.fe-card, .kpi { position: relative; } /* zonder layout te veranderen */
.card-help {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--fe-border); background: var(--fe-surface,#fff);
  color: #64748b; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.card-help:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(2,6,23,.12); }
.fe-dark .card-help { background:#0b1220; border-color:#334155; color:#a7b0c7; }

/* Eén gedeelde tooltip-bubble */
.fe-tip {
  position: fixed; z-index: 10020; max-width: 280px;
  background: rgba(255,255,255,.98); color:#0f172a;
  border: 1px solid var(--fe-border); border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 16px 56px rgba(2,6,23,.28); font-size: 13px; line-height: 1.45;
}
.fe-dark .fe-tip { background:#0b1220; color:#e2e8f0; border-color:#334155; }
.fe-tip .tip-title { font-weight: 800; margin-bottom: 4px; }
.fe-tip .tip-close { position:absolute; top:6px; right:8px; border:0; background:transparent; color:inherit; cursor:pointer; }

/* === ApexCharts legend – Dark polish === */
.fe-dark .apexcharts-legend{
  /* betere leesbaarheid en grouping */
  background: rgba(2, 6, 23, .55);        /* semi-transp. panel */
  backdrop-filter: blur(6px);
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 6px 8px;
  gap: 8px;                                /* ruimte tussen items */
  flex-wrap: wrap;                          /* mag op 2 regels */
}

.fe-dark .apexcharts-legend-series{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 6px !important;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, opacity .15s ease;
}
.fe-dark .apexcharts-legend-series:hover{
  background: rgba(148, 163, 184, .08);
}

.fe-dark .apexcharts-legend-text{
  color: #cbd5e1 !important;               /* hogere contrast */
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: 12px !important;
}

/* markers netter en zichtbaar op dark */
.fe-dark .apexcharts-legend-marker{
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px;
  margin-right: 2px !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, .9);   /* ring tegen donkere bg */
}

/* collapsed (uitgeschakelde) series duidelijker */
.fe-dark .apexcharts-legend-series[data-collapsed="true"]{
  opacity: .55;
}
.fe-dark .apexcharts-legend-series[data-collapsed="true"] .apexcharts-legend-text{
  text-decoration: line-through;
}
/* --- ApexCharts legend markers (SVG) — verwijder witte randen/hoekjes --- */
.fe-dark .apexcharts-legend-marker{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* De marker ís een inline SVG — haal alle strokes weg */
.fe-dark .apexcharts-legend-marker svg{
  display: inline-block !important;
  overflow: visible !Important;       /* geen clipping artifacts */
}

/* rect/circle/path in de marker: geen stroke, alleen fill */
.fe-dark .apexcharts-legend-marker svg rect,
.fe-dark .apexcharts-legend-marker svg circle,
.fe-dark .apexcharts-legend-marker svg path{
  stroke: none !important;            /* <- dit pakt de witte hoekjes weg */
  paint-order: fill !important;       /* vul eerst, dan (eventuele) stroke */
}

/* Optioneel: mooiere vorm (rond of afgeronde blokjes) */
.fe-dark .apexcharts-legend-marker svg rect{
  rx: 6px !important; ry: 6px !important;  /* of 0 voor vierkant, 999px voor rond */
}

/* === PWA-hint (light/dark) === */
#pwaHint{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 12px; margin-top:12px;
  background: var(--fe-surface, #fff);
  border:1px solid var(--fe-border, #e5e7eb);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  line-height:1.45;
}
#pwaHint i.fa-mobile-screen-button{
  font-size:16px;
  color: var(--fe-brand, #6D4AFE);
}
#pwaHint strong{ color: var(--fe-ink, #0f172a); }

/* knop in de hint: ‘ghost brand’ */
#pwaHint #pwaInstallInline{
  border-color: var(--fe-brand, #6D4AFE);
  color: var(--fe-brand, #6D4AFE);
  background: transparent;
}
#pwaHint #pwaInstallInline:hover{
  background: rgba(109,74,254,.10);
}
#pwaHint #pwaInstallInline:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(109,74,254,.18);
}

/* Dark mode */
body.fe-dark #pwaHint{
  background:#0b1220;
  border-color:#334155;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  color:#e2e8f0;
}
body.fe-dark #pwaHint strong{ color:#e2e8f0; }
body.fe-dark #pwaHint #pwaInstallInline{
  border-color:#a78bfa; color:#c4b5fd;
}
body.fe-dark #pwaHint #pwaInstallInline:hover{
  background: rgba(124,58,237,.18);
}

/* ===== Feellin Toasts • neutraal + accent (matcht cards, light/dark) ===== */
:root{
  --toast-bg:     var(--fe-surface, #fff);
  --toast-ink:    var(--fe-ink, #0f172a);
  --toast-border: var(--fe-border, #e2e8f0);
  --toast-shadow: 0 10px 24px rgba(16,24,40,.12);

  /* semantische accenten */
  --fe-warn:    #f59e0b;
  --fe-danger:  #ef4444;
  --fe-success: #10b981;
}
.fe-dark{
  --toast-bg:     #0b1220;
  --toast-ink:    #e2e8f0;
  --toast-border: #1f2937;
  --toast-shadow: 0 18px 38px rgba(0,0,0,.35);
}

/* host */
.fe-toasts{
  position: fixed;
  right: clamp(24px, 3vw, 40px);
  top:   max(16px, env(safe-area-inset-top));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
@media (max-width: 640px){
  .fe-toasts{
    left:  max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
  }
}

/* kaart */
.fe-toast{
  position: relative;
  overflow: hidden;            /* accent volgt afgeronde hoeken */
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:12px;
  width:min(520px,100%);
  padding:12px 14px;
  border-radius:14px;
  background:var(--toast-bg);
  color:var(--toast-ink);
  border:1px solid var(--toast-border);
  box-shadow:var(--toast-shadow);
}
.fe-toast .icon{ font-size:16px; line-height:1; margin-top:2px }
.fe-toast .msg { font-size:14px; line-height:1.35 }

/* geen chip achter tekst/acties */
.fe-toast .msg, .fe-toast .act{ background:transparent; box-shadow:none; padding:0; border:0; }

/* “Open” verbergen (geen actie nodig) */
.fe-toast .act{ display:none !important; }

.fe-toast .close{ margin-left:6px; opacity:.85; cursor:pointer; user-select:none }

/* subtiele accentbalk links (zonder gekleurde bg) */
.fe-toast.warn::before,
.fe-toast.danger::before,
.fe-toast.success::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-radius:14px 0 0 14px; /* sluit naadloos aan */
}
.fe-toast.warn::before    { background: color-mix(in oklab, var(--fe-warn) 70%, transparent); }
.fe-toast.danger::before  { background: color-mix(in oklab, var(--fe-danger) 70%, transparent); }
.fe-toast.success::before { background: color-mix(in oklab, var(--fe-success) 70%, transparent); }

/* fallback als color-mix niet wordt ondersteund */
@supports not (background: color-mix(in oklab, red 50%, white)){
  .fe-toast.warn::before    { background: rgba(245,158,11,.7); }
  .fe-toast.danger::before  { background: rgba(239,68,68,.7); }
  .fe-toast.success::before { background: rgba(16,185,129,.7); }
}

#signals .signal-card{border:1px solid var(--fe-border);border-radius:12px;padding:10px;margin:8px 0;
  display:flex;gap:10px;align-items:flex-start;background:var(--fe-surface-subtle)}
#signals .sig-dot{width:10px;height:10px;border-radius:50%;margin-top:6px}
#signals .sig-dot.bad{background:#ef4444}     /* heads_up */
#signals .sig-dot.neu{background:#f59e0b}     /* neutral  */
#signals .sig-dot.good{background:#10b981}    /* kudos    */
#signals .meta{font-size:12px;color:var(--fe-hint);display:flex;gap:10px;flex-wrap:wrap}
#signals .msg{white-space:pre-wrap}
#signals .act{margin-left:auto}

/* =========================================================
   FEELLIN • Purple Minimal (global hard overwrite)
   Doel: weg met de Bootstrap-look → eigen identiteit
   ========================================================= */

/* 0) Font (zonder HTML-wijzigingen) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

/* 1) Tokens */
:root{
  --fe-font: "Plus Jakarta Sans", ui-sans-serif, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  --fe-brand: #6D4AFE;          /* hoofdpaars */
  --fe-brand-2: #7C3AED;        /* diep paars */
  --fe-ink: #0f1220;            /* hoofdtekst */
  --fe-ink-sub: #5b6483;        /* secundair */
  --fe-surface: #ffffff;        /* cards/bg elementen */
  --fe-border: rgba(18, 18, 38, .06);
  --fe-green: #10b981;
  --fe-amber: #f59e0b;
  --fe-red:   #ef4444;

  --fe-r-lg: 20px;
  --fe-r-md: 14px;
  --fe-shadow: 0 20px 60px rgba(18,0,60,.12);
  --fe-ring: 0 0 0 6px color-mix(in oklab, var(--fe-brand) 16%, transparent);
}

/* 2) Basis: typografie + zachte paarse achtergrond */
html, body{
  font-family: var(--fe-font) !important;
  color: var(--fe-ink);
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(99,102,241,.10), transparent 60%),
    linear-gradient(180deg, #faf8ff 0%, #f6f4ff 100%) !important;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,.h1{font-weight:800;letter-spacing:-.02em;
  background: linear-gradient(90deg, var(--fe-brand-2), #6EE7F9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
h2,.h2{font-weight:800;letter-spacing:-.015em;color:#121632}
h3,.h3{font-weight:700;letter-spacing:-.01em}

/* 3) Cards / tegels – randloos, airy, eigen schaduw */
.card, .fe-card, .kpi, .member-card, .content-card, .shadow, .shadow-sm{
  background: var(--fe-surface) !important;
  border: 0 !important;
  border-radius: var(--fe-r-lg) !important;
  box-shadow: var(--fe-shadow) !important;
}
.fe-card .hint, .kpi .hint{font-weight:800; letter-spacing:-.01em}

/* 4) Top actions / chips / tabs */
.topnav .fe-btn, .nav-pills .nav-link, .chip, .header .chip{
  border: 1px solid color-mix(in oklab, var(--fe-brand) 18%, transparent) !important;
  background: color-mix(in oklab, var(--fe-brand) 10%, #fff 90%) !important;
  color: color-mix(in oklab, var(--fe-brand) 75%, #1a1930 25%) !important;
  border-radius: 9999px !important; font-weight: 700 !important;
}
.nav-pills .nav-link.active, .topnav .fe-btn.active{
  background: linear-gradient(92deg, var(--fe-brand), #6E59F7) !important;
  color:#fff !important; box-shadow: 0 10px 30px rgba(109,74,254,.35) !important;
  border-color: transparent !important;
}

/* 5) Buttons – primary / subtle / ghost */
.btn, .fe-btn{
  border:0 !important; border-radius:9999px !important;
  font-weight:800 !important; letter-spacing:.01em; padding:.65rem 1.05rem !important;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-primary, .fe-btn.primary, .fe-btn:not(.ghost):not(.link).brand{
  background: linear-gradient(92deg, var(--fe-brand), #6E59F7) !important;
  color:#fff !important; box-shadow:0 10px 30px rgba(109,74,254,.35) !important;
}
.btn-primary:hover, .fe-btn.primary:hover{ transform: translateY(-1px); filter:saturate(1.06) }
.btn-light, .btn-outline-primary, .fe-btn.subtle{
  background: color-mix(in oklab, var(--fe-brand) 8%, #fff 92%) !important;
  color: var(--fe-brand-2) !important; border: 1px solid color-mix(in oklab, var(--fe-brand) 20%, transparent) !important;
}
.fe-btn.ghost, .btn-link{ background: transparent !important; color: var(--fe-brand-2) !important }

/* 6) Pills/Badges */
.badge, .fe-badge, .badge.rounded-pill, .pill{
  border:0 !important; border-radius:9999px !important; font-weight:700 !important;
  background: color-mix(in oklab, var(--fe-brand) 10%, #fff 90%) !important;
  color: var(--fe-brand-2) !important;
}
.badge.ok { background: color-mix(in oklab, var(--fe-green) 18%, #fff 82%) !important; color:#065f46 !important }
.badge.no { background: color-mix(in oklab, var(--fe-red)   18%, #fff 82%) !important; color:#7f1d1d !important }

/* 7) Form elementen */
.form-control, .form-select, input[type="text"], input[type="email"], input[type="number"], input[type="search"], textarea{
  background:#fff !important; border:1px solid rgba(15,23,42,.06) !important;
  border-radius: var(--fe-r-md) !important; box-shadow: inset 0 1px 0 rgba(2,6,23,.02);
}
.form-control:focus, .form-select:focus, textarea:focus{
  border-color: color-mix(in oklab, var(--fe-brand) 70%, #fff 30%) !important;
  box-shadow: var(--fe-ring) !important;
}

/* 8) Progress + slider (PWA & KPI) */
.progress{height:10px;border-radius:9999px;background:rgba(124,58,237,.16)!important;border:0}
.progress-bar{border-radius:9999px;background:linear-gradient(90deg,var(--fe-brand),#6E59F7)!important}
input[type="range"]{
  -webkit-appearance:none;appearance:none;height:8px;width:100%;border-radius:9999px;border:0;
  background: linear-gradient(90deg, #f97316 0%, #22c55e 100%);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid(var(--fe-brand)); box-shadow:0 10px 20px rgba(109,74,254,.28),0 2px 6px rgba(0,0,0,.08)
}
input[type="range"]::-moz-range-thumb{ width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--fe-brand) }

/* 9) ApexCharts – fris en randloos */
.apexcharts-tooltip, .apexcharts-xaxistooltip, .apexcharts-yaxistooltip{
  border:0 !important; border-radius:14px !important; background:#fff !important; color:var(--fe-ink) !important;
  box-shadow: var(--fe-shadow) !important;
}
.apexcharts-legend-text{ color:#2a3146 !important; font-weight:700 !important }
.apexcharts-gridline{ stroke: rgba(18,18,38,.08) !important }
.apexcharts-menu{ border:0 !important; border-radius:12px !important; box-shadow: var(--fe-shadow) !important }

/* 10) Appbar en statusbar strakker */
.appbar{ box-shadow: 0 1px 2px rgba(16,24,40,.06) !important; border-bottom: 0 !important }
.fe-statusbar{ color: var(--fe-ink-sub); font-weight:600 }
.fe-statusbar .dot{ background: currentColor; opacity:.4 }

/* 11) Coach (AI) widgets subtiel in thema */
.fe-coach-panel, .coach-widget{
  border:0 !important; border-radius: var(--fe-r-lg) !important; box-shadow: var(--fe-shadow) !important; background:#fff !important;
}
.fe-coach-fab .fe-coach-label{ background: linear-gradient(90deg, var(--fe-brand), #6E59F7); color: #fff; }

/* 12) Dark mode (zet .fe-dark op <html> of <body>) */
.fe-dark{
  --fe-ink:#e7ecfa; --fe-ink-sub:#a7b0c7; --fe-surface:#0b1220; --fe-border: rgba(255,255,255,.06);
}
.fe-dark, .fe-dark body{
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(99,102,241,.18), transparent 60%),
    linear-gradient(180deg, #120f23 0%, #0b0a1a 100%) !important;
  color: var(--fe-ink);
}
.fe-dark .card, .fe-dark .fe-card, .fe-dark .kpi, .fe-dark .member-card{
  background: color-mix(in oklab, #0b1220 92%, #3c1b8d 8%) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.35) !important;
}
.fe-dark .form-control, .fe-dark .form-select, .fe-dark textarea{
  background:#0f172a !important; color:#e7ecfa !important; border-color: rgba(255,255,255,.06) !important;
}
.fe-dark .topnav .fe-btn, .fe-dark .chip{
  background: rgba(124,58,237,.18) !important; color:#d9ccff !important; border-color: rgba(124,58,237,.35) !important;
}
.fe-dark .apexcharts-tooltip, .fe-dark .apexcharts-menu{
  background:#0f1424 !important; color:#e7ecfa !important; box-shadow:0 18px 38px rgba(0,0,0,.45) !important;
}

/* --- FIX: stabiele container voor verplaatste kaarten --- */
.fe-card-stage{position:relative;height:100%;padding:12px 12px 24px}
.fe-card-host{width:100%;min-height:40vh}   /* genoeg hoogte om charts niet 0px te maken */
.fe-card-host > .fe-card,
.fe-card-host > .kpi,
.fe-card-host > .kpi-donut,
.fe-card-host > .kpi-mood{width:100%; display:block}


/* --- Hero meta chips --- */
.hero-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.hero-meta .chip{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:9999px; padding:6px 10px; font-weight:700; font-size:13px;
  border:1px solid color-mix(in oklab, var(--fe-brand) 16%, transparent);
  background: color-mix(in oklab, var(--fe-brand) 8%, #fff 92%);
  color: color-mix(in oklab, var(--fe-brand) 70%, #1a1930 30%);
}
.hero-meta .chip i{ width:14px; text-align:center }
.fe-dark .hero-meta .chip{
  background: color-mix(in oklab, #7C3AED 20%, #0b1220 80%);
  border-color: color-mix(in oklab, #7C3AED 35%, transparent);
  color:#d9ccff;
}

/* --- Tabs: 3 naast elkaar op mobiel --- */
.topnav{ display:flex; gap:10px; flex-wrap:wrap }
@media (max-width: 760px){
  .topnav{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .topnav .fe-btn{
    width:100%; min-width:0; justify-content:center;
    padding:12px 0 !important; /* compacte hoogte */
  }
}

/* --- Header iconen: spacing + compact op mobiel --- */
.appbar .app-actions{ margin-left:auto; display:flex; gap:8px; align-items:center }
.appbar .action-link{
  border-radius:9999px; display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--fe-border); background:var(--fe-surface);
}
.appbar .action-link i{ font-size:14px; line-height:1 }
@media (max-width:760px){
  .appbar .action-link span{ display:none }        /* label verbergen */
  .appbar .action-link{ width:38px; height:38px; padding:0;
    justify-content:center; border-radius:9999px }
}

/* Optioneel: lichte schaduw onder appbar voor diepte */
.appbar{ box-shadow:0 1px 2px rgba(16,24,40,.06) }
.fe-dark .appbar{ box-shadow:0 1px 2px rgba(0,0,0,.35) }

/* verstop de bulk en csv buttons even */
a#btnBulkInvite {
    display: none;
}
a#btnExportCSV {
    display: none;
}