/* ═══════════════════════════════════════════════════════════════
   FLUX Theme — CSS Custom Properties & Custom Classes
   Extracted from flux-dashboard.pages.dev template
   ═══════════════════════════════════════════════════════════════ */

/* ── Light Theme (default) ──────────────────────────────────── */
:root {
  --radius: .875rem;

  /* Surface */
  --background: oklch(98.5% .005 285);
  --foreground: oklch(13% .02 285);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(13% .02 285);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(13% .02 285);

  /* Brand */
  --primary: oklch(55% .25 285);
  --primary-foreground: oklch(99% .005 285);
  --secondary: oklch(96.5% .01 285);
  --secondary-foreground: oklch(20% .02 285);
  --accent: oklch(60% .2 230);
  --accent-foreground: oklch(99% .005 285);

  /* Semantic */
  --destructive: oklch(57.7% .245 27);
  --destructive-foreground: oklch(99% .005 285);
  --success: oklch(62% .17 145);
  --success-foreground: oklch(99% .005 285);
  --warning: oklch(75% .175 75);
  --warning-foreground: oklch(20% .02 285);

  /* Utility */
  --muted: oklch(96.5% .01 285);
  --muted-foreground: oklch(50% .02 285);
  --border: oklch(93% .01 285);
  --input: oklch(93% .01 285);
  --ring: oklch(55% .25 285);

  /* Chart */
  --chart-1: oklch(55% .25 285);
  --chart-2: oklch(60% .2 230);
  --chart-3: oklch(65% .2 175);
  --chart-4: oklch(70% .18 50);
  --chart-5: oklch(60% .22 330);

  /* Sidebar */
  --sidebar: oklch(99% .005 285);
  --sidebar-foreground: oklch(30% .02 285);
  --sidebar-accent: oklch(96% .02 285);
  --sidebar-accent-foreground: oklch(13% .02 285);
  --sidebar-border: oklch(93% .01 285);
  --sidebar-ring: oklch(55% .25 285);
  --sidebar-primary: oklch(55% .25 285);
  --sidebar-primary-foreground: oklch(99% .005 285);
}

/* ── Dark Theme ─────────────────────────────────────────────── */
.dark {
  --background: oklch(10% .02 285);
  --foreground: oklch(92% .01 285);
  --card: oklch(14% .025 285);
  --card-foreground: oklch(92% .01 285);
  --popover: oklch(14% .025 285);
  --popover-foreground: oklch(92% .01 285);
  --primary: oklch(70% .25 285);
  --primary-foreground: oklch(10% .02 285);
  --secondary: oklch(18% .025 285);
  --secondary-foreground: oklch(92% .01 285);
  --muted: oklch(18% .025 285);
  --muted-foreground: oklch(55% .02 285);
  --accent: oklch(65% .22 230);
  --accent-foreground: oklch(10% .02 285);
  --destructive: oklch(57.7% .245 27);
  --destructive-foreground: oklch(92% .01 285);
  --success: oklch(62% .17 145);
  --success-foreground: oklch(10% .02 285);
  --warning: oklch(75% .175 75);
  --warning-foreground: oklch(10% .02 285);
  --border: oklch(22% .025 285);
  --input: oklch(22% .025 285);
  --ring: oklch(70% .25 285);
  --chart-1: oklch(70% .25 285);
  --chart-2: oklch(65% .22 230);
  --chart-3: oklch(70% .2 175);
  --chart-4: oklch(75% .18 50);
  --chart-5: oklch(65% .22 330);
  --sidebar: oklch(8% .02 285);
  --sidebar-foreground: oklch(85% .01 285);
  --sidebar-accent: oklch(14% .025 285);
  --sidebar-accent-foreground: oklch(95% .01 285);
  --sidebar-border: oklch(18% .025 285);
  --sidebar-ring: oklch(70% .25 285);
  --sidebar-primary: oklch(70% .25 285);
  --sidebar-primary-foreground: oklch(10% .02 285);
}

/* ── FLUX Custom Classes ────────────────────────────────────── */

/* Card shadow */
.flux-shadow {
  box-shadow: 0 1px 3px oklch(55% .15 285 / .06),
              0 8px 24px oklch(55% .15 285 / .08);
}

/* Button glow */
.flux-glow {
  position: relative;
}
.flux-glow::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  filter: blur(12px);
  background: linear-gradient(135deg, oklch(55% .25 285), oklch(60% .2 230));
  transition: opacity .3s;
}
.flux-glow:hover::after {
  opacity: .5;
}

/* Gradient text */
.flux-gradient-text {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, oklch(55% .25 285), oklch(60% .2 230));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Active sidebar indicator */
.flux-active-indicator {
  position: relative;
}
.flux-active-indicator::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(oklch(55% .25 285), oklch(60% .2 230));
}

/* Frosted glass header */
.flux-frosted {
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  background-color: oklch(100% 0 0 / .8);
}
.dark .flux-frosted {
  background-color: oklch(10% .02 285 / .85);
}

/* ── Bootstrap Override Fixes ───────────────────────────────── */
/* Prevent Bootstrap from overriding FLUX sidebar/card backgrounds */
.bg-sidebar { background-color: var(--sidebar) !important; }
.bg-card { background-color: var(--card) !important; }
.bg-background { background-color: var(--background) !important; }
.text-foreground { color: var(--foreground) !important; }
.border-border { border-color: var(--border) !important; }
.border-sidebar-border { border-color: var(--sidebar-border) !important; }