/* =========================
   FEELLIN DARK THEME
   Activeert alleen als body.fe-dark aanwezig is
   ========================= */

body.fe-dark {
  color-scheme: dark;
  background: radial-gradient(1200px 800px at 10% -10%, rgba(130,77,235,.12), transparent 60%),
              radial-gradient(1000px 800px at 120% 0%, rgba(93,23,106,.15), transparent 60%),
              var(--fe-bg-1);
  color: var(--fe-ink);
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===== Variables ===== */
body.fe-dark {
  --fe-brand:            #824DEB;
  --fe-brand-600:        #5D176A;
  --fe-brand-50:         #2a203b;

  --fe-ink:              #e8eaf6;
  --fe-ink-muted:        #8c92ac;
  --fe-hint:             #9fa6c5;

  --fe-bg-1:             #0f1220;
  --fe-bg-2:             #171b2e;
  --fe-surface:          #14192a;
  --fe-surface-subtle:   #1a1f35;
  --fe-surface-tint:     #222741;

  --fe-border:           #262b42;
  --fe-border-strong:    #343a5a;

  --fe-radius:           16px;
  --fe-radius-sm:        12px;
  --fe-radius-lg:        20px;
}

/* =========================
   Appbar
   ========================= */
body.fe-dark .appbar {
  background: rgba(15,18,32,0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--fe-border);
}
body.fe-dark .wordmark { color: var(--fe-ink); }
body.fe-dark .action-link {
  background: rgba(130,77,235,0.08);
  color: var(--fe-ink-muted);
}
body.fe-dark .action-link:hover {
  color: var(--fe-ink);
  background: rgba(130,77,235,0.18);
}
body.fe-dark .action-link i { color: var(--fe-brand); }

/* =========================
   Hero
   ========================= */
body.fe-dark .fe-hero {
  background: linear-gradient(135deg, var(--fe-brand-600), var(--fe-brand));
  color: #fff;
}
body.fe-dark .fe-badge {
  background: var(--fe-surface-tint);
  color: #dcdfff;
  border: 1px solid var(--fe-border);
}

/* =========================
   Grid & Cards
   ========================= */
body.fe-dark .fe-card {
  background: var(--fe-surface);
  border: 1px solid var(--fe-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  color: var(--fe-ink);
}

/* =========================
   KPIs
   ========================= */
body.fe-dark .kpi {
  background: var(--fe-panel);
  border: 1px solid var(--fe-border);
}
body.fe-dark .kpi .title { color: var(--fe-ink-muted); }
body.fe-dark .kpi .value { color: #a78bfa; }

/* =========================
   Buttons
   ========================= */
body.fe-dark .fe-btn {
  background: var(--fe-surface-subtle);
  color: var(--fe-ink);
  border: 1px solid var(--fe-border);
}
body.fe-dark .fe-btn.primary {
  background: linear-gradient(135deg, var(--fe-brand-600), var(--fe-brand));
  color: #fff;
  border: none;
}
body.fe-dark .fe-btn:hover { background: var(--fe-surface-tint); }
body.fe-dark .fe-btn.primary:hover { filter: brightness(.95); }

/* =========================
   Inputs
   ========================= */
body.fe-dark .fe-card input[type="text"],
body.fe-dark .fe-card input[type="email"],
body.fe-dark .fe-card input:not([type]) {
  background: var(--fe-surface-subtle);
  border: 1px solid var(--fe-border);
  color: var(--fe-ink);
}
body.fe-dark .fe-card input:focus {
  border-color: var(--fe-brand);
  box-shadow: 0 0 0 3px rgba(130,77,235,.25);
}

/* =========================
   Member Cards
   ========================= */
body.fe-dark .member-card {
  background: var(--fe-panel);
  border: 1px solid var(--fe-border);
}
body.fe-dark .member-card .meta { color: var(--fe-ink-muted); }
body.fe-dark .member-card .actions .fe-btn { background: var(--fe-surface-subtle); color: var(--fe-ink); }
body.fe-dark .member-card .actions .btn-invite { background: var(--fe-brand); border-color: var(--fe-brand); color: #fff; }

/* =========================
   AI-Board
   ========================= */
body.fe-dark .ai-card {
  border: 1px solid var(--fe-border);
  background: var(--fe-panel);
}
body.fe-dark .ai-chip {
  background: var(--fe-surface-subtle);
  color: var(--fe-ink);
  border: 1px solid var(--fe-border);
}

/* =========================
   Footer
   ========================= */
body.fe-dark .fe-footer {
  background: var(--fe-panel);
  border-top: 1px solid var(--fe-border);
  color: var(--fe-ink-muted);
}
body.fe-dark .fe-footer .links a { color: var(--fe-ink-muted); }
body.fe-dark .fe-footer .links a:hover { color: var(--fe-ink); }