/**
 * EVEN FUNKYER THEME 🎨✨
 * When Funky just isn't funky enough!
 * A vibrant, neon-inspired theme with more groove, more vibe, more FUNK!
 */

[data-theme="even-funkyer"] {
  /* Funkyer Color Palette - Neon Dreams */
  --primary-color: #ff00ff; /* Hot magenta */
  --primary-hover: #ff33ff;
  --secondary-color: #00ffff; /* Electric cyan */
  --accent-color: #ffff00; /* Bright yellow */
  --success-color: #00ff00; /* Neon green */
  --danger-color: #ff0066; /* Hot pink danger */
  --warning-color: #ffaa00; /* Orange glow */
  --info-color: #00ccff; /* Bright cyan */
  
  /* Dark Funkyer Backgrounds with gradients */
  --bg-color: #0a0015; /* Deep purple-black */
  --sidebar-bg: linear-gradient(180deg, #1a0033 0%, #0a0015 100%);
  --card-bg: linear-gradient(135deg, #1a0033 0%, #0f001a 100%);
  --modal-bg: #150026;
  --header-bg: linear-gradient(90deg, #1a0033 0%, #0a0015 50%, #1a0033 100%);
  
  /* Neon Text Colors */
  --text-color: #ffffff;
  --text-muted: #cc99ff; /* Light purple */
  --text-secondary: #99ccff; /* Light blue */
  
  /* Neon Borders and Glows */
  --border-color: #ff00ff;
  --border-radius: 12px;
  --box-shadow: 0 0 20px rgba(255, 0, 255, 0.3), 0 0 40px rgba(0, 255, 255, 0.2);
  --glow-effect: 0 0 10px currentColor, 0 0 20px currentColor;
  
  /* Input Funkiness */
  --input-bg: rgba(26, 0, 51, 0.8);
  --input-border: #ff00ff;
  --input-focus-border: #00ffff;
  --input-focus-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

/* Sidebar - Extra Funky */
[data-theme="even-funkyer"] .sidebar {
  background: var(--sidebar-bg);
  border-right: 2px solid var(--primary-color);
  box-shadow: 5px 0 20px rgba(255, 0, 255, 0.3);
}

[data-theme="even-funkyer"] .sidebar .brand {
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
  animation: funkyPulse 3s ease-in-out infinite;
}

@keyframes funkyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

[data-theme="even-funkyer"] .nav-item .nav-link {
  color: #cc99ff;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

[data-theme="even-funkyer"] .nav-item .nav-link:hover {
  background: rgba(255, 0, 255, 0.1);
  border-left-color: var(--primary-color);
  color: #ffffff;
  box-shadow: inset 5px 0 10px rgba(255, 0, 255, 0.2);
  transform: translateX(5px);
}

[data-theme="even-funkyer"] .nav-item .nav-link.active {
  background: linear-gradient(90deg, rgba(255, 0, 255, 0.2) 0%, transparent 100%);
  border-left-color: var(--primary-color);
  color: #ffffff;
  box-shadow: inset 5px 0 15px rgba(255, 0, 255, 0.3);
}

[data-theme="even-funkyer"] .nav-icon {
  filter: drop-shadow(0 0 5px currentColor);
}

/* Header - Neon Glow */
[data-theme="even-funkyer"] .top-header {
  background: var(--header-bg);
  border-bottom: 2px solid var(--primary-color);
  box-shadow: 0 5px 20px rgba(255, 0, 255, 0.3);
}

[data-theme="even-funkyer"] .page-title {
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 50%, #ffff00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
  animation: funkyRainbow 5s linear infinite;
  background-size: 200% auto;
}

@keyframes funkyRainbow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

[data-theme="even-funkyer"] .header-badge {
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2));
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

[data-theme="even-funkyer"] .status-dot {
  background: var(--success-color);
  box-shadow: 0 0 10px var(--success-color), 0 0 20px var(--success-color);
  animation: funkyBeat 1.5s ease-in-out infinite;
}

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

/* Cards - Glowing Boxes */
[data-theme="even-funkyer"] .stat-card,
[data-theme="even-funkyer"] .card {
  background: var(--card-bg);
  border: 1px solid var(--primary-color);
  box-shadow: var(--box-shadow);
  transition: all 0.3s ease;
}

[data-theme="even-funkyer"] .stat-card:hover,
[data-theme="even-funkyer"] .card:hover {
  border-color: var(--secondary-color);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.5), 0 0 60px rgba(255, 0, 255, 0.3);
  transform: translateY(-5px) scale(1.02);
}

[data-theme="even-funkyer"] .stat-value {
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
  font-weight: 900;
}

[data-theme="even-funkyer"] .stat-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Buttons - Maximum Funk */
[data-theme="even-funkyer"] .btn-funky-primary {
  background: linear-gradient(135deg, #ff00ff 0%, #ff0099 100%);
  border: 2px solid #ff00ff;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

[data-theme="even-funkyer"] .btn-funky-primary:hover {
  background: linear-gradient(135deg, #ff33ff 0%, #ff00cc 100%);
  box-shadow: 0 0 25px rgba(255, 0, 255, 0.8), 0 0 50px rgba(255, 0, 255, 0.4);
  transform: translateY(-2px) scale(1.05);
}

[data-theme="even-funkyer"] .btn-funky-secondary {
  background: linear-gradient(135deg, #00ffff 0%, #0099ff 100%);
  border: 2px solid #00ffff;
  color: #000000;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
  font-weight: 600;
}

[data-theme="even-funkyer"] .btn-funky-secondary:hover {
  background: linear-gradient(135deg, #33ffff 0%, #00ccff 100%);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.8);
  transform: translateY(-2px);
}

[data-theme="even-funkyer"] .btn-funky-danger {
  background: linear-gradient(135deg, #ff0066 0%, #ff0033 100%);
  border: 2px solid #ff0066;
  box-shadow: 0 0 15px rgba(255, 0, 102, 0.6);
}

[data-theme="even-funkyer"] .btn-funky-danger:hover {
  box-shadow: 0 0 25px rgba(255, 0, 102, 0.8);
  transform: scale(1.05);
}

/* Icons - Glowing */
[data-theme="even-funkyer"] .btn-icon {
  background: rgba(255, 0, 255, 0.1);
  border: 1px solid var(--primary-color);
  transition: all 0.3s ease;
}

[data-theme="even-funkyer"] .btn-icon:hover {
  background: rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
  transform: scale(1.2) rotate(5deg);
}

[data-theme="even-funkyer"] .btn-view:hover {
  border-color: var(--info-color);
  box-shadow: 0 0 15px rgba(0, 204, 255, 0.8);
}

[data-theme="even-funkyer"] .btn-edit:hover {
  border-color: var(--warning-color);
  box-shadow: 0 0 15px rgba(255, 170, 0, 0.8);
}

[data-theme="even-funkyer"] .btn-delete:hover {
  border-color: var(--danger-color);
  box-shadow: 0 0 15px rgba(255, 0, 102, 0.8);
}

/* Forms - Neon Inputs */
[data-theme="even-funkyer"] .form-control,
[data-theme="even-funkyer"] .form-select {
  background: var(--input-bg);
  border: 2px solid var(--input-border);
  color: var(--text-color);
  box-shadow: inset 0 0 10px rgba(255, 0, 255, 0.2);
}

[data-theme="even-funkyer"] .form-control:focus,
[data-theme="even-funkyer"] .form-select:focus {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
  background: rgba(26, 0, 51, 1);
}

[data-theme="even-funkyer"] .form-label {
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* Tables - Funky Stripes */
[data-theme="even-funkyer"] .table {
  color: var(--text-color);
}

[data-theme="even-funkyer"] .table thead th {
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.3));
  border-bottom: 2px solid var(--primary-color);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

[data-theme="even-funkyer"] .table tbody tr {
  border-bottom: 1px solid rgba(255, 0, 255, 0.2);
  transition: all 0.2s ease;
}

[data-theme="even-funkyer"] .table tbody tr:hover {
  background: rgba(255, 0, 255, 0.1);
  box-shadow: inset 0 0 20px rgba(255, 0, 255, 0.2);
  transform: scale(1.01);
}

[data-theme="even-funkyer"] .table tbody tr:nth-child(odd) {
  background: rgba(26, 0, 51, 0.3);
}

/* Badges - Neon Tags */
[data-theme="even-funkyer"] .badge-funky {
  border: 1px solid currentColor;
  box-shadow: 0 0 10px currentColor;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

[data-theme="even-funkyer"] .badge-active {
  background: var(--success-color);
  color: #000000;
  box-shadow: 0 0 15px var(--success-color);
}

[data-theme="even-funkyer"] .badge-inactive {
  background: rgba(255, 0, 102, 0.3);
  color: var(--danger-color);
  box-shadow: 0 0 10px var(--danger-color);
}

/* Modals - Glowing Popups */
[data-theme="even-funkyer"] .modal-content {
  background: var(--modal-bg);
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 40px rgba(255, 0, 255, 0.5), 0 0 80px rgba(0, 255, 255, 0.3);
}

[data-theme="even-funkyer"] .modal-header {
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2));
  border-bottom: 2px solid var(--primary-color);
}

[data-theme="even-funkyer"] .modal-title {
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="even-funkyer"] .modal-footer {
  border-top: 2px solid var(--primary-color);
  background: rgba(255, 0, 255, 0.05);
}

/* Alerts - Neon Warnings */
[data-theme="even-funkyer"] .alert {
  border: 2px solid currentColor;
  box-shadow: 0 0 20px currentColor;
}

[data-theme="even-funkyer"] .alert-info {
  background: rgba(0, 204, 255, 0.1);
  border-color: var(--info-color);
  color: var(--info-color);
}

[data-theme="even-funkyer"] .alert-warning {
  background: rgba(255, 170, 0, 0.1);
  border-color: var(--warning-color);
  color: var(--warning-color);
}

[data-theme="even-funkyer"] .alert-danger {
  background: rgba(255, 0, 102, 0.1);
  border-color: var(--danger-color);
  color: var(--danger-color);
}

[data-theme="even-funkyer"] .alert-success {
  background: rgba(0, 255, 0, 0.1);
  border-color: var(--success-color);
  color: var(--success-color);
}

/* DataTables - Funky Data */
[data-theme="even-funkyer"] .dataTables_wrapper .dataTables_length select,
[data-theme="even-funkyer"] .dataTables_wrapper .dataTables_filter input {
  background: var(--input-bg);
  border: 2px solid var(--primary-color);
  color: var(--text-color);
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
}

[data-theme="even-funkyer"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: rgba(255, 0, 255, 0.1);
  border: 1px solid var(--primary-color);
  color: var(--text-color) !important;
}

[data-theme="even-funkyer"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(255, 0, 255, 0.3);
  border-color: var(--secondary-color);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

[data-theme="even-funkyer"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%) !important;
  border-color: transparent !important;
  color: #000000 !important;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
  font-weight: 700;
}

/* Scrollbars - Neon Rails */
[data-theme="even-funkyer"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-theme="even-funkyer"] ::-webkit-scrollbar-track {
  background: rgba(26, 0, 51, 0.5);
  border: 1px solid rgba(255, 0, 255, 0.3);
}

[data-theme="even-funkyer"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
}

[data-theme="even-funkyer"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff33ff 0%, #33ffff 100%);
  box-shadow: 0 0 20px rgba(255, 0, 255, 1);
}

/* Loading Spinner - Funky Rotation */
[data-theme="even-funkyer"] .loading-spinner {
  border: 4px solid rgba(255, 0, 255, 0.3);
  border-top-color: var(--primary-color);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
  animation: spin 0.8s linear infinite, funkyGlow 2s ease-in-out infinite;
}

@keyframes funkyGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.8);
  }
}

/* Theme Switcher - The Ultimate Funk */
[data-theme="even-funkyer"] .theme-switcher {
  background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
  border: 2px solid #ffff00;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
  animation: funkySpin 10s linear infinite;
}

@keyframes funkySpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

[data-theme="even-funkyer"] .theme-switcher:hover {
  box-shadow: 0 0 30px rgba(255, 0, 255, 1), 0 0 60px rgba(0, 255, 255, 0.8);
  transform: scale(1.2);
}

/* Extra Funky Animations */
[data-theme="even-funkyer"] .main-content {
  animation: funkyFadeIn 0.5s ease-in-out;
}

@keyframes funkyFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* JSON Editor - Neon Code */
[data-theme="even-funkyer"] .je-object__container,
[data-theme="even-funkyer"] .je-indented-panel {
  background: rgba(26, 0, 51, 0.5);
  border: 1px solid rgba(255, 0, 255, 0.3);
}

[data-theme="even-funkyer"] .je-header {
  background: rgba(255, 0, 255, 0.1);
  border-bottom: 1px solid var(--primary-color);
}

/* Select2 - Funky Dropdowns */
[data-theme="even-funkyer"] .select2-container--default .select2-selection--single {
  background: var(--input-bg);
  border: 2px solid var(--primary-color);
  color: var(--text-color);
}

[data-theme="even-funkyer"] .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--secondary-color);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

[data-theme="even-funkyer"] .select2-dropdown {
  background: var(--modal-bg);
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
}

[data-theme="even-funkyer"] .select2-results__option--highlighted {
  background: rgba(255, 0, 255, 0.3) !important;
  color: #ffffff !important;
}

/* ===== FUNKY ANIMATIONS & EFFECTS ===== */

/* Disco Ball Animations */
@keyframes discoBallDrop {
  0% {
    top: -100px;
    transform: translateX(-50%) scale(0) rotate(0deg);
  }
  60% {
    top: 12%;
    transform: translateX(-50%) scale(1.2) rotate(180deg);
  }
  100% {
    top: 10%;
    transform: translateX(-50%) scale(1) rotate(360deg);
  }
}

@keyframes discoSpin {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes discoBallExit {
  to {
    top: -100px;
    transform: translateX(-50%) scale(0) rotate(720deg);
    opacity: 0;
  }
}

/* Disco Light Beam Rotation */
@keyframes discoBeamRotate {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

/* Dance Floor Pulse */
@keyframes danceFloorPulse {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  25% {
    filter: brightness(1.2) saturate(1.5) hue-rotate(30deg);
  }
  50% {
    filter: brightness(0.9) saturate(1.3) hue-rotate(-30deg);
  }
  75% {
    filter: brightness(1.1) saturate(1.4) hue-rotate(15deg);
  }
}

/* Ripple Expand */
@keyframes rippleExpand {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

/* Sparkle Fade */
@keyframes sparkleFade {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0.5);
  }
}

/* Confetti Fly */
@keyframes confettiFly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(-50% + cos(var(--angle)) * var(--velocity)),
      calc(-50% + sin(var(--angle)) * var(--velocity) + 300px)
    ) rotate(720deg);
    opacity: 0;
  }
}

/* Screen Pulse */
@keyframes screenPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.3) saturate(1.5);
  }
}

/* Rainbow Flash */
@keyframes rainbowFlash {
  0%, 100% {
    filter: hue-rotate(0deg) brightness(1);
  }
  20% {
    filter: hue-rotate(60deg) brightness(1.2);
  }
  40% {
    filter: hue-rotate(120deg) brightness(1.3);
  }
  60% {
    filter: hue-rotate(180deg) brightness(1.2);
  }
  80% {
    filter: hue-rotate(240deg) brightness(1.1);
  }
}

/* Rainbow Shift for Page Title */
@keyframes rainbowShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Float Up (Musical Notes) */
@keyframes floatUp {
  0% {
    bottom: -50px;
    opacity: 0;
    transform: translateX(0) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
    transform: translateX(50px) rotate(360deg);
  }
}

/* Welcome Bounce */
@keyframes welcomeBounce {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(0.9) rotate(-5deg);
  }
  85% {
    transform: translate(-50%, -50%) scale(1.05) rotate(2deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Welcome Fade Out */
@keyframes welcomeFadeOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

@keyframes balloonFloat {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translateY(-25vh) translateX(-20px) rotate(-5deg);
  }
  50% {
    transform: translateY(-50vh) translateX(20px) rotate(5deg);
  }
  75% {
    transform: translateY(-75vh) translateX(-15px) rotate(-3deg);
  }
  100% {
    transform: translateY(-120vh) translateX(10px) rotate(0deg);
    opacity: 0.8;
  }
}

/* Funky Cursor Trail */
[data-theme="even-funkyer"] * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text y="20" font-size="20">✨</text></svg>'), auto;
}

[data-theme="even-funkyer"] button,
[data-theme="even-funkyer"] a,
[data-theme="even-funkyer"] .btn {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text y="20" font-size="20">👆</text></svg>'), pointer;
}

/* Disco Ball Effect on Hover */
[data-theme="even-funkyer"] .disco-ball {
  animation: discoSpin 2s linear infinite;
  filter: drop-shadow(0 0 30px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 60px rgba(0, 255, 255, 0.6));
}

/* Button Press Effect */
[data-theme="even-funkyer"] button:active,
[data-theme="even-funkyer"] .btn:active {
  animation: buttonBounce 0.3s ease-out;
}

@keyframes buttonBounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Groovy Background Pattern */
[data-theme="even-funkyer"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 0, 255, 0.03) 10px,
      rgba(255, 0, 255, 0.03) 20px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(0, 255, 255, 0.03) 10px,
      rgba(0, 255, 255, 0.03) 20px
    );
  pointer-events: none;
  z-index: 0;
  animation: patternSlide 20s linear infinite;
}

@keyframes patternSlide {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 100px 100px, -100px 100px;
  }
}

/* Make everything slightly bouncy - except modals and JSON editors */
[data-theme="even-funkyer"] .card,
[data-theme="even-funkyer"] .stat-card {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Keep modals stable */
[data-theme="even-funkyer"] .modal-content,
[data-theme="even-funkyer"] .modal-dialog,
[data-theme="even-funkyer"] .modal-header,
[data-theme="even-funkyer"] .modal-body,
[data-theme="even-funkyer"] #jsonEditorContainer {
  transform: none !important;
}

/* Neon text glow on important elements */
[data-theme="even-funkyer"] h1,
[data-theme="even-funkyer"] h2,
[data-theme="even-funkyer"] h3 {
  animation: textGlow 3s ease-in-out infinite;
}

@keyframes textGlow {
  0%, 100% {
    text-shadow: 
      0 0 10px rgba(255, 0, 255, 0.5),
      0 0 20px rgba(0, 255, 255, 0.3);
  }
  50% {
    text-shadow: 
      0 0 20px rgba(255, 0, 255, 0.8),
      0 0 40px rgba(0, 255, 255, 0.6),
      0 0 60px rgba(255, 255, 0, 0.4);
  }
}

/* Funky loading state */
[data-theme="even-funkyer"] .loading-spinner {
  animation: spin 0.8s linear infinite, colorCycle 2s linear infinite;
}

@keyframes colorCycle {
  0% {
    border-top-color: #ff00ff;
  }
  33% {
    border-top-color: #00ffff;
  }
  66% {
    border-top-color: #ffff00;
  }
  100% {
    border-top-color: #ff00ff;
  }
}

/* Table row hover dance */
[data-theme="even-funkyer"] .table tbody tr:hover {
  animation: rowDance 0.5s ease-in-out;
}

@keyframes rowDance {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
}

/* Sidebar items groove */
[data-theme="even-funkyer"] .nav-item .nav-link:hover {
  animation: sidebarGroove 0.6s ease-in-out;
}

@keyframes sidebarGroove {
  0%, 100% {
    transform: translateX(5px) rotate(0deg);
  }
  33% {
    transform: translateX(10px) rotate(2deg);
  }
  66% {
    transform: translateX(10px) rotate(-2deg);
  }
}

/* Floating animation for badges */
[data-theme="even-funkyer"] .badge-funky {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* MAXIMUM FUNK - Wild Animations */

/* Funky Marquee Container */
[data-theme="even-funkyer"] .funky-marquee {
  position: fixed;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 9998;
  font-size: 24px;
  font-weight: 900;
  opacity: 0.7;
  text-shadow: 0 0 10px currentColor;
}

[data-theme="even-funkyer"] .funky-marquee-top {
  top: 60px;
}

[data-theme="even-funkyer"] .funky-marquee-bottom {
  bottom: 20px;
}

[data-theme="even-funkyer"] .funky-marquee-content {
  display: inline-block;
  padding-left: 100%;
  animation: marqueeScroll 20s linear infinite;
  white-space: nowrap;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Rotating Elements */
[data-theme="even-funkyer"] .funky-rotate {
  animation: funkyRotate 4s ease-in-out infinite;
}

@keyframes funkyRotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

/* Wobble Effect */
[data-theme="even-funkyer"] .funky-wobble {
  animation: wobble 2s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  15% {
    transform: translateX(-10px) rotate(-5deg);
  }
  30% {
    transform: translateX(10px) rotate(5deg);
  }
  45% {
    transform: translateX(-10px) rotate(-3deg);
  }
  60% {
    transform: translateX(10px) rotate(3deg);
  }
  75% {
    transform: translateX(-5px) rotate(-1deg);
  }
}

/* Shake Effect */
[data-theme="even-funkyer"] .funky-shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Bounce In */
[data-theme="even-funkyer"] .funky-bounce-in {
  animation: bounceIn 1s ease-out;
}

@keyframes bounceIn {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  70% {
    transform: scale(0.9) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Slide Crazy */
[data-theme="even-funkyer"] .funky-slide {
  animation: slideCrazy 3s ease-in-out infinite;
}

@keyframes slideCrazy {
  0%, 100% {
    transform: translateX(0) scale(1);
  }
  25% {
    transform: translateX(20px) scale(1.1);
  }
  50% {
    transform: translateX(0) scale(1);
  }
  75% {
    transform: translateX(-20px) scale(1.1);
  }
}

/* Pulse Crazy */
[data-theme="even-funkyer"] .funky-pulse {
  animation: pulseCrazy 2s ease-in-out infinite;
}

@keyframes pulseCrazy {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) hue-rotate(0deg);
  }
  50% {
    transform: scale(1.15);
    filter: brightness(1.3) hue-rotate(180deg);
  }
}

/* Flip Effect */
[data-theme="even-funkyer"] .funky-flip {
  animation: flip 2s ease-in-out infinite;
}

@keyframes flip {
  0%, 100% {
    transform: perspective(400px) rotateY(0);
  }
  50% {
    transform: perspective(400px) rotateY(180deg);
  }
}

/* Jello Effect */
[data-theme="even-funkyer"] .funky-jello {
  animation: jello 2s ease-in-out infinite;
}

@keyframes jello {
  0%, 100% {
    transform: skewX(0deg) skewY(0deg);
  }
  30% {
    transform: skewX(25deg) skewY(25deg);
  }
  40% {
    transform: skewX(-25deg) skewY(-25deg);
  }
  50% {
    transform: skewX(15deg) skewY(15deg);
  }
  60% {
    transform: skewX(-15deg) skewY(-15deg);
  }
  70% {
    transform: skewX(5deg) skewY(5deg);
  }
}

/* Text Animations */
[data-theme="even-funkyer"] .funky-text-wave {
  animation: textWave 2s ease-in-out infinite;
}

@keyframes textWave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Stats Cards Get Extra Funky */
[data-theme="even-funkyer"] .stat-card:nth-child(1) .stat-value {
  animation: funkyPulse 3s ease-in-out infinite, colorShift 4s linear infinite;
}

[data-theme="even-funkyer"] .stat-card:nth-child(2) .stat-value {
  animation: funkyPulse 3s ease-in-out infinite 0.5s, colorShift 4s linear infinite 1s;
}

[data-theme="even-funkyer"] .stat-card:nth-child(3) .stat-value {
  animation: funkyPulse 3s ease-in-out infinite 1s, colorShift 4s linear infinite 2s;
}

[data-theme="even-funkyer"] .stat-card:nth-child(4) .stat-value {
  animation: funkyPulse 3s ease-in-out infinite 1.5s, colorShift 4s linear infinite 3s;
}

@keyframes colorShift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* Navigation Icons Dance */
[data-theme="even-funkyer"] .nav-icon {
  animation: iconDance 4s ease-in-out infinite;
}

[data-theme="even-funkyer"] .nav-item:nth-child(odd) .nav-icon {
  animation-delay: 0.5s;
}

@keyframes iconDance {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(-10deg);
  }
  50% {
    transform: scale(1) rotate(0deg);
  }
  75% {
    transform: scale(1.2) rotate(10deg);
  }
}

/* Page Title Gets WILD */
[data-theme="even-funkyer"] .page-title {
  animation: titleMadness 5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes titleMadness {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    letter-spacing: normal;
  }
  25% {
    transform: scale(1.05) rotate(2deg);
    letter-spacing: 2px;
  }
  50% {
    transform: scale(1.1) rotate(-2deg);
    letter-spacing: 4px;
  }
  75% {
    transform: scale(1.05) rotate(1deg);
    letter-spacing: 2px;
  }
}

/* Brand Logo Spins */
[data-theme="even-funkyer"] .brand {
  animation: brandSpin 10s linear infinite;
}

@keyframes brandSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Buttons Get Groovy */
[data-theme="even-funkyer"] .btn:not(.btn-close):hover {
  animation: buttonGroove 0.6s ease-in-out infinite;
}

@keyframes buttonGroove {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-3px) scale(1.05) rotate(2deg);
  }
  75% {
    transform: translateY(-3px) scale(1.05) rotate(-2deg);
  }
}

/* Cards Breathe */
[data-theme="even-funkyer"] .card {
  animation: cardBreathe 4s ease-in-out infinite;
}

@keyframes cardBreathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3), 0 0 40px rgba(0, 255, 255, 0.2);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.5), 0 0 60px rgba(0, 255, 255, 0.4);
  }
}

/* Status Dot Goes Crazy */
[data-theme="even-funkyer"] .status-dot {
  animation: statusCrazy 1s ease-in-out infinite;
}

@keyframes statusCrazy {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.5) rotate(90deg);
  }
  50% {
    transform: scale(2) rotate(180deg);
  }
  75% {
    transform: scale(1.5) rotate(270deg);
  }
}

/* Theme Switcher Goes WILD */
[data-theme="even-funkyer"] .theme-switcher {
  animation: switcherMadness 3s ease-in-out infinite;
}

@keyframes switcherMadness {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
  }
  25% {
    transform: scale(1.2) rotate(90deg);
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.8);
  }
  50% {
    transform: scale(1.4) rotate(180deg);
    box-shadow: 0 0 60px rgba(255, 255, 0, 0.8);
  }
  75% {
    transform: scale(1.2) rotate(270deg);
    box-shadow: 0 0 40px rgba(0, 255, 0, 0.8);
  }
}

/* Star Shoot Animation */
@keyframes starShoot {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(-50% + cos(var(--shoot-angle)) * 500px),
      calc(-50% + sin(var(--shoot-angle)) * 500px)
    ) scale(2);
    opacity: 0;
  }
}

/* Funk Out Bounce */
@keyframes funkOutBounce {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.3) rotate(10deg);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(0.9) rotate(-5deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Keep WIP and important elements stable */
[data-theme="even-funkyer"] .wip-container,
[data-theme="even-funkyer"] [data-wip],
[data-theme="even-funkyer"] .progress,
[data-theme="even-funkyer"] .progress-bar {
  animation: none !important;
  transform: none !important;
}

/* Ensure form inputs stay stable */
[data-theme="even-funkyer"] input[type="text"],
[data-theme="even-funkyer"] input[type="number"],
[data-theme="even-funkyer"] input[type="email"],
[data-theme="even-funkyer"] input[type="password"],
[data-theme="even-funkyer"] input[type="date"],
[data-theme="even-funkyer"] textarea,
[data-theme="even-funkyer"] select {
  animation: none !important;
  transform: none !important;
}

/* ===== FUNKY PARTICLES EFFECT ===== */
/* Container for floating funky particles */
[data-theme="even-funkyer"] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(255, 0, 255, 0.3), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(0, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 0, 0.3), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 0, 255, 0.2), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(0, 255, 255, 0.2), transparent);
  background-size: 200% 200%;
  animation: funkyParticles 20s ease-in-out infinite;
}

@keyframes funkyParticles {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 50% 50%, 80% 10%, 90% 60%;
  }
  25% {
    background-position: 100% 0%, 0% 100%, 75% 25%, 60% 30%, 70% 80%;
  }
  50% {
    background-position: 100% 100%, 0% 0%, 25% 75%, 40% 50%, 50% 40%;
  }
  75% {
    background-position: 0% 100%, 100% 0%, 50% 50%, 20% 70%, 30% 20%;
  }
}

/* ============================================
   ANIMATIONS TOGGLE
   When data-animations="off", disable all animations
   ============================================ */
[data-animations="off"] *,
[data-animations="off"] *::before,
[data-animations="off"] *::after {
  animation: none !important;
  transition: none !important;
}

/* Also respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-theme="even-funkyer"] *,
  [data-theme="even-funkyer"] *::before,
  [data-theme="even-funkyer"] *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}