/*
 * ============================================================
 *  THEME: Neon Pulse (النيون النابض)
 *  Dark vibrant — pink, purple, cyan gradients
 *  Streetwear / gaming energy — bold and energetic
 *  ============================================================
 *  shadcn-compatible CSS variables
 *  ============================================================
 */

.theme-neon {
  /* ─── Core Surface ─────────────────────────── */
  --background: oklch(0.03 0.01 330);          /* #0a0a0f */
  --foreground: oklch(0.92 0.01 300);          /* #f0f0ff */
  --card: oklch(0.055 0.015 330);              /* #0f0f1a */
  --card-foreground: oklch(0.92 0.01 300);
  --popover: oklch(0.07 0.015 330);            /* #14141f */
  --popover-foreground: oklch(0.92 0.01 300);

  /* ─── Colors ──────────────────────────────── */
  --primary: oklch(0.6 0.22 350);              /* #ff0055 — وردي نيون */
  --primary-foreground: oklch(0.95 0.01 300);  /* أبيض */
  --secondary: oklch(0.08 0.02 300);           /* #14141f */
  --secondary-foreground: oklch(0.92 0.01 300);
  --muted: oklch(0.07 0.015 310);              /* #12121a */
  --muted-foreground: oklch(0.5 0.02 300);     /* #7777aa */
  --accent: oklch(0.7 0.25 140);               /* #00ff88 — أخضر نيون */
  --accent-foreground: oklch(0.03 0.01 330);   /* غامق */
  --destructive: oklch(0.65 0.2 25);           /* أحمر نيون */

  /* ─── UI Elements ─────────────────────────── */
  --border: oklch(0.15 0.02 320);              /* #2a2a3e */
  --input: oklch(0.1 0.015 320);
  --ring: oklch(0.6 0.22 350);                 /* #ff0055 */
  --radius: 0.625rem;

  /* ─── Charts ──────────────────────────────── */
  --chart-1: oklch(0.6 0.22 350);              /* #ff0055 */
  --chart-2: oklch(0.7 0.25 140);              /* #00ff88 */
  --chart-3: oklch(0.55 0.2 290);              /* #7000ff */
  --chart-4: oklch(0.65 0.15 210);             /* #00ccff */
  --chart-5: oklch(0.75 0.14 85);              /* #f0c030 */

  /* ─── Sidebar ─────────────────────────────── */
  --sidebar: oklch(0.035 0.01 330);
  --sidebar-foreground: oklch(0.92 0.01 300);
  --sidebar-primary: oklch(0.6 0.22 350);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.08 0.02 300);
  --sidebar-accent-foreground: oklch(0.92 0.01 300);
  --sidebar-border: oklch(0.15 0.02 320);
  --sidebar-ring: oklch(0.6 0.22 350);
}

/* ─── Neon-Specific Effects ────────────────── */
.theme-neon {
  /* Holographic gradient overlay */
  --neon-glow: conic-gradient(
    from 0deg at 50% 0%,
    oklch(0.6 0.22 350 / 0.06),
    oklch(0.55 0.2 290 / 0.04),
    oklch(0.7 0.25 140 / 0.06),
    oklch(0.65 0.15 210 / 0.04),
    oklch(0.6 0.22 350 / 0.06)
  );
}

.theme-neon body {
  position: relative;
}
.theme-neon body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--neon-glow);
  animation: neon-body-rotate 15s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes neon-body-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─── Glowing Border for Cards ─────────────── */
.theme-neon .border,
.theme-neon [class*="border"] {
  position: relative;
}

.theme-neon .border-neon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    oklch(0.6 0.22 350 / 0.5),
    oklch(0.55 0.2 290 / 0.3),
    oklch(0.65 0.15 210 / 0.3)
  );
  z-index: -1;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  animation: neon-border-glow 3s ease-in-out infinite alternate;
}

@keyframes neon-border-glow {
  0% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

/* ─── Custom Scrollbar ─────────────────────── */
.theme-neon ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.theme-neon ::-webkit-scrollbar-track {
  background: oklch(0.03 0.01 330);
}
.theme-neon ::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    oklch(0.6 0.22 350 / 0.4),
    oklch(0.55 0.2 290 / 0.3),
    oklch(0.7 0.25 140 / 0.4)
  );
  border-radius: 4px;
}
.theme-neon ::-webkit-scrollbar-thumb:hover {
  opacity: 0.7;
}

/* ─── Focus & Selection ────────────────────── */
.theme-neon *:focus-visible {
  outline: 2px solid oklch(0.6 0.22 350);
  outline-offset: 2px;
  box-shadow: 0 0 8px oklch(0.6 0.22 350 / 0.4);
}
.theme-neon ::selection {
  background: oklch(0.6 0.22 350 / 0.3);
  color: oklch(0.95 0.01 300);
}

/* ─── Special Button Glow ──────────────────── */
.theme-neon .btn-neon-glow {
  position: relative;
  overflow: hidden;
}
.theme-neon .btn-neon-glow::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    oklch(0.7 0.25 140 / 0.15) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}
.theme-neon .btn-neon-glow:hover::after {
  opacity: 1;
}