/*
 * MOODBOARD UNIVERSE - Cosmic Theme Override v2
 * Aggressive overrides for Tailwind-based apps
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* Force font everywhere */
*, *::before, *::after {
  font-family: 'Outfit', sans-serif !important;
}

code, pre, kbd, .mono, [class*="font-mono"] {
  font-family: 'Space Mono', monospace !important;
}

/* Deep space background with nebula */
html {
  background: #030305 !important;
}

body {
  background: #030305 !important;
  background-image:
    radial-gradient(ellipse 100% 80% at 20% 30%, rgba(79, 143, 239, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 80% 70%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(236, 72, 153, 0.08) 0%, transparent 50%) !important;
  min-height: 100vh !important;
}

/* Animated star field */
body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 10% 90%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 50%, rgba(79, 143, 239, 0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 80%, rgba(168, 85, 247, 0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 85% 85%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 65% 35%, rgba(0, 212, 255, 0.6) 0%, transparent 100%) !important;
  animation: twinkle 4s ease-in-out infinite !important;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Floating nebula orbs */
body::after {
  content: '' !important;
  position: fixed !important;
  top: -50% !important;
  left: -50% !important;
  right: -50% !important;
  bottom: -50% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 30% 40%, rgba(79, 143, 239, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(168, 85, 247, 0.15) 0%, transparent 40%) !important;
  animation: nebula-float 30s ease-in-out infinite !important;
}

@keyframes nebula-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(5%, -3%) rotate(2deg); }
  66% { transform: translate(-3%, 5%) rotate(-2deg); }
}

/* Glass morphism for all surfaces */
.bg-surface,
[class*="bg-surface"],
.rounded-2xl,
.rounded-xl,
.bg-white\/5,
.bg-white\/10,
[class*="backdrop-blur"] {
  background: rgba(10, 10, 20, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Glowing borders on hover */
.bg-surface:hover,
[class*="bg-surface"]:hover,
.rounded-2xl:hover,
.rounded-xl:hover {
  border-color: rgba(79, 143, 239, 0.3) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(79, 143, 239, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-2px);
  transition: all 0.3s ease !important;
}

/* Primary buttons with gradient and glow */
.bg-primary,
[class*="bg-primary"]:not([class*="bg-primary\/"]) {
  background: linear-gradient(135deg, #4f8fef 0%, #7c3aed 100%) !important;
  box-shadow:
    0 4px 15px rgba(79, 143, 239, 0.4),
    0 0 30px rgba(79, 143, 239, 0.2) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.bg-primary:hover,
[class*="bg-primary"]:not([class*="bg-primary\/"]):hover {
  box-shadow:
    0 6px 20px rgba(79, 143, 239, 0.5),
    0 0 40px rgba(79, 143, 239, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Button shine animation */
.bg-primary::before,
[class*="bg-primary"]:not([class*="bg-primary\/"])::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  animation: button-shine 3s infinite !important;
}

@keyframes button-shine {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

/* Input fields with glow focus */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background: rgba(10, 10, 20, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  border-color: rgba(79, 143, 239, 0.5) !important;
  box-shadow:
    0 0 0 3px rgba(79, 143, 239, 0.1),
    0 0 20px rgba(79, 143, 239, 0.15) !important;
  outline: none !important;
}

/* Gradient text for headings */
h1, h2,
.text-2xl,
.text-xl,
[class*="text-2xl"],
[class*="text-xl"] {
  background: linear-gradient(135deg, #fff 0%, #a5b4fc 50%, #c084fc 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Glowing text for primary color */
.text-primary,
[class*="text-primary"]:not([class*="text-primary\/"]) {
  color: #60a5fa !important;
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.5) !important;
}

/* Sidebar with gradient */
aside,
nav,
[class*="w-72"],
.w-72 {
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.95) 0%, rgba(15, 15, 30, 0.9) 100%) !important;
  border-right: 1px solid rgba(79, 143, 239, 0.1) !important;
}

/* Modal backdrop */
[class*="bg-black\\/50"],
[class*="bg-black\\/60"],
[class*="bg-black\\/70"] {
  background: rgba(3, 3, 5, 0.85) !important;
  backdrop-filter: blur(8px) !important;
}

/* Tag chips with glow */
.rounded-full:not(.bg-primary):not([class*="bg-blue"]):not([class*="bg-purple"]):not([class*="bg-teal"]):not([class*="bg-red"]):not([class*="bg-green"]) {
  background: rgba(79, 143, 239, 0.15) !important;
  border: 1px solid rgba(79, 143, 239, 0.3) !important;
  color: #93c5fd !important;
}

/* Type badges with gradients */
.bg-blue-500,
[class*="bg-blue-500"]:not([class*="bg-blue-500\\/"]) {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4) !important;
}

.bg-purple-500,
[class*="bg-purple-500"]:not([class*="bg-purple-500\\/"]) {
  background: linear-gradient(135deg, #a855f7, #c084fc) !important;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.4) !important;
}

.bg-teal-500,
[class*="bg-teal-500"]:not([class*="bg-teal-500\\/"]) {
  background: linear-gradient(135deg, #14b8a6, #2dd4bf) !important;
  box-shadow: 0 2px 10px rgba(20, 184, 166, 0.4) !important;
}

/* Cosmic scrollbar */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: rgba(10, 10, 20, 0.5) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(79, 143, 239, 0.4), rgba(168, 85, 247, 0.4)) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(79, 143, 239, 0.6), rgba(168, 85, 247, 0.6)) !important;
}

/* 3D Canvas - ensure it's above background */
canvas {
  position: relative !important;
  z-index: 1 !important;
}

/* Pulse animation for buttons */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(79, 143, 239, 0.3); }
  50% { box-shadow: 0 0 20px rgba(79, 143, 239, 0.5), 0 0 30px rgba(168, 85, 247, 0.3); }
}

button:not(.bg-primary):not([class*="bg-red"]):not([class*="bg-blue"]):not([class*="bg-purple"]):not([class*="bg-teal"]) {
  animation: pulse-glow 3s ease-in-out infinite !important;
}

/* Brand text glow */
[class*="tracking-"],
.tracking-wider {
  text-shadow: 0 0 30px rgba(79, 143, 239, 0.5), 0 0 60px rgba(168, 85, 247, 0.3) !important;
}

/* Better text visibility */
[class*="text-white\\/60"],
[class*="text-white\\/70"],
[class*="text-white\\/80"] {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Login page floating orbs */
.min-h-screen::before {
  content: '' !important;
  position: fixed !important;
  width: 300px !important;
  height: 300px !important;
  background: radial-gradient(circle, rgba(79, 143, 239, 0.15) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  top: 10% !important;
  left: 5% !important;
  animation: float-orb 20s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.min-h-screen::after {
  content: '' !important;
  position: fixed !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  bottom: 10% !important;
  right: 5% !important;
  animation: float-orb 25s ease-in-out infinite reverse !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@keyframes float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -30px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(10px, 40px) scale(1.05); }
}

/* Force content above background */
.relative,
[class*="relative"] {
  z-index: 1;
}

.fixed {
  z-index: 50;
}

/* Scene tooltip styling for 3D graph */
.scene-tooltip {
  font-family: 'Outfit', sans-serif !important;
  background: rgba(10, 10, 20, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(79, 143, 239, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(79, 143, 239, 0.2) !important;
}