/**
 * Asset Manager - Cyberpunk Theme
 * Neon glows, glassmorphic panels, circuit traces, Blade Runner vibes
 * 
 * HOW TO CUSTOMIZE:
 * - Change --cyber-primary for main accent color (cyan/teal)
 * - Change --cyber-secondary for secondary accent (magenta/pink)
 * - Change --cyber-tertiary for highlights (purple)
 * - Adjust glow intensities by changing shadow blur/spread values
 */

/* ========================================
   CSS VARIABLES - EASY COLOR CUSTOMIZATION
   ======================================== */
:root {
  /* Primary neon colors */
  --cyber-primary: #00ffff;       /* Cyan - main accent */
  --cyber-primary-dim: #00a0a0;   /* Dimmed cyan */
  --cyber-secondary: #ff00ff;     /* Magenta - secondary accent */
  --cyber-secondary-dim: #a000a0; /* Dimmed magenta */
  --cyber-tertiary: #a855f7;      /* Purple - highlights */
  --cyber-hot-pink: #ff1493;      /* Hot pink - buttons */
  --cyber-orange: #ff6600;        /* Orange - particles */
  --cyber-green: #00ff88;         /* Green - timestamps/success */
  --cyber-red: #ff3366;           /* Red - errors */
  
  /* Background layers */
  --cyber-void: #030308;          /* Deep void black */
  --cyber-bg-1: #0a0a12;          /* Primary background */
  --cyber-bg-2: #0f0f1a;          /* Card backgrounds */
  --cyber-bg-3: #1a1a2e;          /* Elevated surfaces */
  
  /* Glass effect */
  --cyber-glass: rgba(10, 10, 18, 0.7);
  --cyber-glass-border: rgba(0, 255, 255, 0.2);
  --cyber-glass-inner: rgba(0, 255, 255, 0.05);
  
  /* Text colors */
  --cyber-text: #e0e0ff;
  --cyber-text-dim: #8888aa;
  --cyber-text-bright: #ffffff;
  
  /* Grid/Circuit colors */
  --cyber-grid: rgba(0, 255, 255, 0.03);
  --cyber-circuit: rgba(0, 255, 255, 0.15);
}

/* ========================================
   ANIMATED BACKGROUND - CIRCUIT TRACES
   ======================================== */
.cyberpunk body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -10;
  background: 
    /* Radial glow in center */
    radial-gradient(ellipse at 50% 50%, rgba(0, 255, 255, 0.03) 0%, transparent 50%),
    /* Grid lines */
    linear-gradient(90deg, var(--cyber-grid) 1px, transparent 1px),
    linear-gradient(0deg, var(--cyber-grid) 1px, transparent 1px),
    /* Base void */
    var(--cyber-void);
  background-size: 100% 100%, 60px 60px, 60px 60px, 100%;
  animation: gridPulse 8s ease-in-out infinite;
}

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

/* Circuit trace accents */
.cyberpunk body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -9;
  background: 
    /* Horizontal circuit lines */
    linear-gradient(90deg, transparent 0%, var(--cyber-circuit) 20%, transparent 21%),
    linear-gradient(90deg, transparent 60%, var(--cyber-circuit) 75%, transparent 76%),
    /* Vertical circuit lines */
    linear-gradient(0deg, transparent 0%, var(--cyber-circuit) 10%, transparent 11%),
    linear-gradient(0deg, transparent 80%, var(--cyber-circuit) 90%, transparent 91%);
  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-position: 0 30%, 0 70%, 25% 0, 75% 0;
  pointer-events: none;
  animation: circuitGlow 4s ease-in-out infinite alternate;
}

@keyframes circuitGlow {
  0% { filter: brightness(0.5); }
  100% { filter: brightness(1.2); }
}

/* ========================================
   FLOATING PARTICLES (Orange Sparks)
   ======================================== */
.cyberpunk .particles {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
}

.cyberpunk .particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--cyber-orange);
  border-radius: 50%;
  box-shadow: 
    0 0 10px var(--cyber-orange),
    0 0 20px var(--cyber-orange),
    0 0 40px rgba(255, 102, 0, 0.5);
  animation: particleFloat 15s linear infinite;
}

.cyberpunk .particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.cyberpunk .particle:nth-child(2) { left: 25%; animation-delay: -3s; animation-duration: 18s; }
.cyberpunk .particle:nth-child(3) { left: 40%; animation-delay: -6s; animation-duration: 14s; }
.cyberpunk .particle:nth-child(4) { left: 55%; animation-delay: -9s; animation-duration: 16s; }
.cyberpunk .particle:nth-child(5) { left: 70%; animation-delay: -12s; animation-duration: 20s; }
.cyberpunk .particle:nth-child(6) { left: 85%; animation-delay: -5s; animation-duration: 13s; }
.cyberpunk .particle:nth-child(7) { left: 95%; animation-delay: -8s; animation-duration: 17s; }
.cyberpunk .particle:nth-child(8) { left: 5%; animation-delay: -2s; animation-duration: 19s; }

@keyframes particleFloat {
  0% { 
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) scale(1);
  }
  100% {
    transform: translateY(-10vh) scale(0);
    opacity: 0;
  }
}

/* ========================================
   SCANLINES OVERLAY
   ======================================== */
.cyberpunk .scanlines {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  opacity: 0.15;
}

/* ========================================
   BASE BODY STYLES
   ======================================== */
.cyberpunk body {
  background: var(--cyber-void);
  color: var(--cyber-text);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ========================================
   GLASSMORPHIC CARDS
   ======================================== */
.cyberpunk .bg-white,
.cyberpunk .bg-slate-50 {
  background: var(--cyber-glass) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--cyber-glass-border) !important;
  box-shadow: 
    inset 0 1px 0 0 var(--cyber-glass-inner),
    0 0 30px rgba(0, 255, 255, 0.1),
    0 4px 30px rgba(0, 0, 0, 0.5);
}

.cyberpunk .border-slate-200,
.cyberpunk .border-slate-100 {
  border-color: var(--cyber-glass-border) !important;
}

/* ========================================
   NEON TEXT EFFECTS
   ======================================== */
.cyberpunk h1,
.cyberpunk h2,
.cyberpunk .font-bold,
.cyberpunk .font-semibold {
  color: var(--cyber-text-bright);
  text-shadow: 
    0 0 5px var(--cyber-primary),
    0 0 10px var(--cyber-primary),
    0 0 20px rgba(0, 255, 255, 0.5),
    0 0 40px rgba(0, 255, 255, 0.3);
}

/* Chromatic aberration on hover */
.cyberpunk h1:hover,
.cyberpunk h2:hover {
  animation: chromatic 0.3s ease;
}

@keyframes chromatic {
  0%, 100% { text-shadow: 0 0 10px var(--cyber-primary); }
  25% { text-shadow: -2px 0 var(--cyber-secondary), 2px 0 var(--cyber-primary); }
  75% { text-shadow: 2px 0 var(--cyber-secondary), -2px 0 var(--cyber-primary); }
}

/* Text colors */
.cyberpunk .text-slate-800,
.cyberpunk .text-slate-700 {
  color: var(--cyber-text-bright) !important;
}

.cyberpunk .text-slate-600,
.cyberpunk .text-slate-500 {
  color: var(--cyber-text) !important;
}

.cyberpunk .text-slate-400 {
  color: var(--cyber-text-dim) !important;
}

/* Timestamp green glow */
.cyberpunk .text-emerald-600,
.cyberpunk .text-green-600 {
  color: var(--cyber-green) !important;
  text-shadow: 0 0 10px var(--cyber-green);
}

/* ========================================
   NEON BUTTONS
   ======================================== */
/* Primary button (rose/pink → cyber magenta) */
.cyberpunk .bg-rose-500,
.cyberpunk .bg-rose-600 {
  background: linear-gradient(135deg, var(--cyber-hot-pink), var(--cyber-tertiary)) !important;
  border: none !important;
  box-shadow: 
    0 0 10px var(--cyber-hot-pink),
    0 0 20px rgba(255, 20, 147, 0.5),
    0 0 40px rgba(255, 20, 147, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.cyberpunk .bg-rose-500:hover,
.cyberpunk .bg-rose-600:hover,
.cyberpunk .hover\:bg-rose-600:hover {
  background: linear-gradient(135deg, var(--cyber-secondary), var(--cyber-hot-pink)) !important;
  box-shadow: 
    0 0 20px var(--cyber-secondary),
    0 0 40px rgba(255, 0, 255, 0.5),
    0 0 60px rgba(255, 0, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Success/Emerald buttons */
.cyberpunk .bg-emerald-500,
.cyberpunk .bg-emerald-600 {
  background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-green)) !important;
  box-shadow: 
    0 0 15px var(--cyber-primary),
    0 0 30px rgba(0, 255, 255, 0.4);
}

.cyberpunk .bg-emerald-500:hover,
.cyberpunk .hover\:bg-emerald-600:hover {
  box-shadow: 
    0 0 25px var(--cyber-primary),
    0 0 50px rgba(0, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* Slate/Secondary buttons */
.cyberpunk .bg-slate-100,
.cyberpunk .bg-slate-200,
.cyberpunk .bg-slate-800 {
  background: var(--cyber-bg-3) !important;
  border: 1px solid var(--cyber-glass-border) !important;
  color: var(--cyber-primary) !important;
  text-shadow: 0 0 5px var(--cyber-primary);
  transition: all 0.3s ease;
}

.cyberpunk .bg-slate-100:hover,
.cyberpunk .hover\:bg-slate-200:hover,
.cyberpunk .bg-slate-800:hover {
  background: var(--cyber-bg-2) !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  border-color: var(--cyber-primary) !important;
}

/* ========================================
   FORM INPUTS
   ======================================== */
.cyberpunk input,
.cyberpunk textarea,
.cyberpunk select {
  background: rgba(10, 10, 18, 0.8) !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  color: var(--cyber-text-bright) !important;
  transition: all 0.3s ease;
}

.cyberpunk input:focus,
.cyberpunk textarea:focus,
.cyberpunk select:focus {
  border-color: var(--cyber-primary) !important;
  box-shadow: 
    0 0 10px rgba(0, 255, 255, 0.5),
    0 0 20px rgba(0, 255, 255, 0.2),
    inset 0 0 10px rgba(0, 255, 255, 0.1) !important;
  outline: none !important;
}

.cyberpunk input::placeholder,
.cyberpunk textarea::placeholder {
  color: var(--cyber-text-dim) !important;
}

/* ========================================
   HEADER - NEON BAR
   ======================================== */
.cyberpunk header {
  background: linear-gradient(180deg, var(--cyber-bg-2), transparent) !important;
  border-bottom: 1px solid var(--cyber-glass-border) !important;
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 0.1),
    inset 0 -1px 0 var(--cyber-glass-border);
}

/* Logo icon with neon glow */
.cyberpunk .w-10.h-10.bg-rose-500 {
  background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-tertiary)) !important;
  box-shadow: 
    0 0 15px var(--cyber-primary),
    0 0 30px rgba(0, 255, 255, 0.4);
  animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { box-shadow: 0 0 15px var(--cyber-primary), 0 0 30px rgba(0, 255, 255, 0.4); }
  50% { box-shadow: 0 0 25px var(--cyber-primary), 0 0 50px rgba(0, 255, 255, 0.6); }
}

/* ========================================
   ASSET LIST ROWS
   ======================================== */
.cyberpunk .asset-row {
  border-bottom: 1px solid rgba(0, 255, 255, 0.1) !important;
  transition: all 0.3s ease;
}

.cyberpunk .asset-row:hover {
  background: rgba(0, 255, 255, 0.05) !important;
  box-shadow: 
    inset 0 0 30px rgba(0, 255, 255, 0.05),
    inset 4px 0 0 var(--cyber-primary);
}

/* ========================================
   STATS CARDS
   ======================================== */
.cyberpunk .grid > div {
  position: relative;
  overflow: hidden;
}

.cyberpunk .grid > div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.05), transparent);
  pointer-events: none;
}

/* ========================================
   ICONS - NEON SVG EFFECTS
   ======================================== */
.cyberpunk .fa-solid,
.cyberpunk .fa-regular {
  filter: drop-shadow(0 0 3px var(--cyber-primary));
  transition: all 0.3s ease;
}

.cyberpunk button:hover .fa-solid,
.cyberpunk button:hover .fa-regular,
.cyberpunk a:hover .fa-solid,
.cyberpunk a:hover .fa-regular {
  filter: drop-shadow(0 0 8px var(--cyber-primary)) drop-shadow(0 0 15px var(--cyber-secondary));
  animation: iconGlow 0.5s ease;
}

@keyframes iconGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ========================================
   MODALS - GLASSMORPHIC OVERLAY
   ======================================== */
.cyberpunk #qr-modal > div,
.cyberpunk #detail-modal > div {
  background: var(--cyber-glass) !important;
  backdrop-filter: blur(30px);
  border: 1px solid var(--cyber-glass-border) !important;
  box-shadow: 
    0 0 50px rgba(0, 255, 255, 0.2),
    0 0 100px rgba(255, 0, 255, 0.1),
    inset 0 1px 0 var(--cyber-glass-inner);
}

.cyberpunk #qr-modal,
.cyberpunk #detail-modal {
  background: rgba(3, 3, 8, 0.9) !important;
}

/* ========================================
   GLITCH EFFECT (Optional - add class "glitch" to elements)
   ======================================== */
.cyberpunk .glitch {
  animation: glitch 3s infinite;
}

@keyframes glitch {
  0%, 92%, 94%, 96%, 100% { 
    transform: none;
    opacity: 1;
  }
  93% {
    transform: translate(-2px, 1px);
    text-shadow: -2px 0 var(--cyber-secondary), 2px 0 var(--cyber-primary);
  }
  95% {
    transform: translate(2px, -1px);
    text-shadow: 2px 0 var(--cyber-secondary), -2px 0 var(--cyber-primary);
    opacity: 0.8;
  }
}

/* ========================================
   HEXAGONAL AVATAR FRAMES (for profile pics)
   ======================================== */
.cyberpunk .hex-avatar {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative;
}

.cyberpunk .hex-avatar::before {
  content: '';
  position: absolute;
  inset: -3px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-tertiary));
  z-index: -1;
  animation: hexGlow 2s ease-in-out infinite alternate;
}

@keyframes hexGlow {
  0% { filter: blur(2px) brightness(0.8); }
  100% { filter: blur(4px) brightness(1.2); }
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */
.cyberpunk ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.cyberpunk ::-webkit-scrollbar-track {
  background: var(--cyber-bg-1);
}

.cyberpunk ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyber-primary-dim), var(--cyber-tertiary));
  border-radius: 4px;
  box-shadow: 0 0 10px var(--cyber-primary);
}

.cyberpunk ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--cyber-primary), var(--cyber-secondary));
}

/* ========================================
   SELECTION HIGHLIGHT
   ======================================== */
.cyberpunk ::selection {
  background: rgba(0, 255, 255, 0.3);
  color: var(--cyber-text-bright);
  text-shadow: 0 0 10px var(--cyber-primary);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 640px) {
  .cyberpunk body::before {
    background-size: 100% 100%, 40px 40px, 40px 40px, 100%;
  }
  
  .cyberpunk h1 {
    text-shadow: 
      0 0 5px var(--cyber-primary),
      0 0 10px rgba(0, 255, 255, 0.4);
  }
}