/* ==========================================================================
   XYZ Scripts — Halloween Design Theme
   Atmospheric Spooky Overhaul (Midnight Twilight, Blood Moon, Bats & Embers)
   ========================================================================== */

:root.halloween-theme,
body.halloween-theme {
  /* Spooky Midnight Sky */
  --sky-top: #090310;
  --sky-mid: #1b0a2a;
  --sky-low: #331131;
  --forest-deep: #0a0312;

  /* Halloween Colors */
  --color-primary: #ff781f;       /* Jack-o'-Lantern Neon Orange */
  --color-accent: #fb923c;        /* Amber Glow */
  --color-purple: #c084fc;        /* Spectral Witch Purple */
  --color-discord: #8b5cf6;
  --color-gold: #f59e0b;          /* Candle Light */
  --color-danger: #ef4444;        /* Blood Crimson */
  --border-focus: #ff781f;

  /* Remap Greens for home.css & public pages */
  --green: #ff781f;
  --green-strong: #ea580c;
  --green-dark: #c2410c;

  /* Obsidian Violet Glassmorphism */
  --bg-dark: transparent;
  --bg-sidebar: rgba(14, 7, 24, 0.88);
  --bg-card: rgba(20, 10, 32, 0.82);
  --bg-card-hover: rgba(34, 15, 52, 0.94);
  --bg-card-glass: rgba(17, 8, 28, 0.74);
  --bg-card-featured: rgba(28, 12, 44, 0.9);
  --bg-input: rgba(10, 4, 18, 0.85);
  --dock-bg: rgba(14, 6, 24, 0.88);

  /* Eerie Border Accents */
  --border-subtle: rgba(249, 115, 22, 0.2);
  --border-card: rgba(249, 115, 22, 0.25);
  --border-card-hover: rgba(249, 115, 22, 0.6);
  --border-input: rgba(192, 132, 252, 0.3);

  /* Text & Glows */
  --text-white: #faf5ff;
  --text-muted: #e9d5ff;
  --text-faint: #c084fc;
  --color-primary-glow: rgba(249, 115, 22, 0.5);
}

/* Smooth Transition when toggling */
body {
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

/* ==========================================================================
   Background Scene & Atmosphere
   ========================================================================== */
body.halloween-theme {
  background: linear-gradient(180deg, #090310 0%, #1b0a2a 45%, #2d0e2e 80%, #130416 100%) !important;
  color: #faf5ff !important;
}

/* Spooky scene overlay */
.halloween-theme .scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(46, 16, 101, 0.5) 0%, rgba(15, 5, 25, 0.15) 65%),
    linear-gradient(180deg, rgba(20, 5, 30, 0.65) 0%, rgba(45, 14, 46, 0.1) 40%, rgba(10, 3, 16, 0.85) 100%) !important;
}

/* Haunted Forest silhouette with twilight purple backlight */
.halloween-theme .scene-forest {
  filter: brightness(0.42) contrast(1.35) hue-rotate(275deg) drop-shadow(0 -15px 35px rgba(234, 88, 12, 0.2)) !important;
  opacity: 0.9 !important;
  transition: filter 0.8s ease, opacity 0.8s ease;
}

/* Spooky Eerie Mist */
.halloween-theme .mist-1 {
  background:
    radial-gradient(ellipse 35% 55% at 20% 50%, rgba(168, 85, 247, 0.22), transparent 70%),
    radial-gradient(ellipse 30% 50% at 55% 55%, rgba(249, 115, 22, 0.18), transparent 70%),
    radial-gradient(ellipse 35% 55% at 85% 45%, rgba(192, 132, 252, 0.2), transparent 70%) !important;
  filter: blur(28px) !important;
  opacity: 0.85 !important;
}

.halloween-theme .mist-2 {
  background:
    radial-gradient(ellipse 30% 55% at 30% 50%, rgba(249, 115, 22, 0.2), transparent 70%),
    radial-gradient(ellipse 35% 50% at 75% 55%, rgba(147, 51, 234, 0.18), transparent 70%) !important;
  filter: blur(24px) !important;
  opacity: 0.75 !important;
}

/* Pumpkin embers replacing green fireflies */
.halloween-theme .firefly {
  background: #fb923c !important;
  box-shadow: 0 0 10px #f97316, 0 0 20px #ea580c !important;
}
.halloween-theme .firefly:nth-child(even) {
  background: #c084fc !important;
  box-shadow: 0 0 10px #a855f7, 0 0 20px #f97316 !important;
}

/* ==========================================================================
   Atmospheric Full Moon
   ========================================================================== */
.halloween-moon {
  position: fixed;
  top: 36px;
  right: 14%;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7ed 0%, #fed7aa 35%, #fdba74 70%, #f97316 100%);
  box-shadow:
    0 0 25px rgba(254, 215, 170, 0.9),
    0 0 60px rgba(249, 115, 22, 0.6),
    0 0 120px rgba(168, 85, 247, 0.35);
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
  animation: halloweenMoonFloat 8s ease-in-out infinite alternate;
}

.halloween-moon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 35% 28%, rgba(180, 83, 9, 0.28) 0, rgba(180, 83, 9, 0.28) 12px, transparent 13px),
    radial-gradient(circle at 62% 45%, rgba(180, 83, 9, 0.22) 0, rgba(180, 83, 9, 0.22) 18px, transparent 19px),
    radial-gradient(circle at 45% 72%, rgba(180, 83, 9, 0.24) 0, rgba(180, 83, 9, 0.24) 15px, transparent 16px),
    radial-gradient(circle at 25% 58%, rgba(180, 83, 9, 0.18) 0, rgba(180, 83, 9, 0.18) 10px, transparent 11px);
  opacity: 0.9;
}

.halloween-moon::after {
  content: '';
  position: absolute;
  top: 38%;
  left: -30%;
  width: 160%;
  height: 30%;
  background: radial-gradient(ellipse at center, rgba(14, 4, 22, 0.65) 0%, rgba(26, 8, 40, 0.4) 55%, transparent 75%);
  filter: blur(5px);
  transform: rotate(-8deg);
}

@keyframes halloweenMoonFloat {
  0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.45)); }
  100% { transform: translateY(-8px) scale(1.02); filter: drop-shadow(0 0 35px rgba(249, 115, 22, 0.7)); }
}

/* ==========================================================================
   Flying Bats Animation
   ========================================================================== */
.halloween-bats-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.halloween-bat-item {
  position: absolute;
  width: 30px;
  height: 20px;
  fill: #140520;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75));
  opacity: 0;
  transform-origin: center;
}

.halloween-bat-1 {
  top: 15%;
  animation: batFlight1 16s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.halloween-bat-2 {
  top: 25%;
  animation: batFlight2 22s cubic-bezier(0.25, 0.1, 0.25, 1) 6s infinite;
}
.halloween-bat-3 {
  top: 10%;
  animation: batFlight3 19s cubic-bezier(0.25, 0.1, 0.25, 1) 12s infinite;
}

@keyframes batFlight1 {
  0% { left: -60px; top: 18%; transform: scale(0.8) rotate(15deg); opacity: 0; }
  5% { opacity: 0.85; }
  35% { top: 12%; transform: scale(1.1) rotate(-10deg); }
  65% { top: 22%; transform: scale(0.9) rotate(20deg); }
  95% { opacity: 0.85; }
  100% { left: 105vw; top: 15%; transform: scale(0.7) rotate(-5deg); opacity: 0; }
}

@keyframes batFlight2 {
  0% { right: -60px; top: 28%; transform: scale(0.75) scaleX(-1) rotate(15deg); opacity: 0; }
  5% { opacity: 0.75; }
  40% { top: 20%; transform: scale(1) scaleX(-1) rotate(-15deg); }
  70% { top: 32%; transform: scale(0.85) scaleX(-1) rotate(10deg); }
  95% { opacity: 0.75; }
  100% { right: 105vw; top: 24%; transform: scale(0.7) scaleX(-1) rotate(-5deg); opacity: 0; }
}

@keyframes batFlight3 {
  0% { left: -50px; top: 8%; transform: scale(0.6) rotate(10deg); opacity: 0; }
  10% { opacity: 0.7; }
  50% { top: 16%; transform: scale(0.8) rotate(-20deg); }
  90% { opacity: 0.7; }
  100% { left: 105vw; top: 9%; transform: scale(0.55) rotate(5deg); opacity: 0; }
}

/* ==========================================================================
   Spiderwebs in Corners
   ========================================================================== */
.halloween-web-corner {
  position: fixed;
  width: 140px;
  height: 140px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
.halloween-web-tl {
  top: 0;
  left: 0;
}
.halloween-web-tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

/* ==========================================================================
   Admin Panel Component Styles (Halloween Edition)
   ========================================================================== */
.halloween-theme .stat-card-screenshot {
  background: rgba(22, 10, 36, 0.8) !important;
  border: 1px solid rgba(249, 115, 22, 0.26) !important;
  box-shadow: 0 16px 36px rgba(5, 2, 8, 0.65), inset 0 1px 0 rgba(251, 146, 60, 0.15) !important;
}

.halloween-theme .stat-card-screenshot:hover {
  background: rgba(34, 15, 54, 0.92) !important;
  border-color: rgba(249, 115, 22, 0.6) !important;
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(5, 2, 8, 0.75), 0 0 28px rgba(249, 115, 22, 0.28) !important;
}

.halloween-theme .stat-card-icon {
  color: #fb923c !important;
  background: rgba(249, 115, 22, 0.14) !important;
  border: 1px solid rgba(249, 115, 22, 0.25) !important;
}

.halloween-theme .stat-card-val {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(249, 115, 22, 0.4);
}

/* Live Pulse Dot switches to Pumpkin Amber */
.halloween-theme .pulse-dot {
  background: #f97316 !important;
  box-shadow: 0 0 12px #f97316 !important;
}

.halloween-theme .status-live-indicator {
  color: #fb923c !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  background: rgba(249, 115, 22, 0.12) !important;
}

/* View Headings */
.halloween-theme .view-heading {
  background: linear-gradient(135deg, #ffffff 40%, #fdba74 85%, #fb923c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(249, 115, 22, 0.25));
}

/* Sidebar Styling */
.halloween-theme .sidebar,
.halloween-theme .admin-sidebar,
.halloween-theme aside {
  background: rgba(14, 6, 24, 0.88) !important;
  border-right-color: rgba(249, 115, 22, 0.18) !important;
}

.halloween-theme .nav-item.active,
.halloween-theme .sidebar-nav-item.active,
.halloween-theme .tab-btn.active {
  background: linear-gradient(90deg, rgba(234, 88, 12, 0.25), rgba(168, 85, 247, 0.14)) !important;
  border-left-color: #f97316 !important;
  color: #fed7aa !important;
  box-shadow: inset 2px 0 0 #f97316, 0 0 20px rgba(249, 115, 22, 0.15) !important;
}

/* Tables & Cards */
.halloween-theme .card,
.halloween-theme .dash-card,
.halloween-theme .overview-card,
.halloween-theme .admin-card,
.halloween-theme .table-card {
  background: rgba(20, 10, 32, 0.8) !important;
  border-color: rgba(249, 115, 22, 0.22) !important;
  box-shadow: 0 14px 34px rgba(4, 2, 7, 0.65) !important;
}

.halloween-theme th {
  background: rgba(28, 12, 44, 0.7) !important;
  color: #fed7aa !important;
  border-bottom-color: rgba(249, 115, 22, 0.25) !important;
}

.halloween-theme tr:hover td {
  background: rgba(249, 115, 22, 0.06) !important;
}

/* Inputs & Form fields */
.halloween-theme input,
.halloween-theme select,
.halloween-theme textarea {
  background: rgba(12, 5, 20, 0.85) !important;
  border-color: rgba(192, 132, 252, 0.28) !important;
  color: #faf5ff !important;
}

.halloween-theme input:focus,
.halloween-theme select:focus,
.halloween-theme textarea:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25) !important;
}

/* Primary Action Buttons */
.halloween-theme .btn-primary,
.halloween-theme .btn-dash-primary {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 60%, #c2410c 100%) !important;
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.45) !important;
  border-color: rgba(254, 215, 170, 0.4) !important;
  color: #ffffff !important;
}

.halloween-theme .btn-primary:hover,
.halloween-theme .btn-dash-primary:hover {
  box-shadow: 0 6px 26px rgba(249, 115, 22, 0.65), 0 0 16px rgba(168, 85, 247, 0.4) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   Public Site Hero & Pages (Halloween Edition)
   ========================================================================== */
.halloween-theme .hero-title span {
  background: linear-gradient(135deg, #fed7aa 0%, #fb923c 45%, #ea580c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 25px rgba(249, 115, 22, 0.5));
}

.halloween-theme .btn.btn-primary,
.halloween-theme a.btn-primary {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #c2410c 100%) !important;
  box-shadow: 0 6px 22px rgba(234, 88, 12, 0.45) !important;
  border-color: rgba(254, 215, 170, 0.45) !important;
  color: #fff !important;
}

.halloween-theme .btn.btn-primary:hover,
.halloween-theme a.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(249, 115, 22, 0.7), 0 0 20px rgba(168, 85, 247, 0.4) !important;
  transform: translateY(-2px);
}

.halloween-theme .nav-link:hover,
.halloween-theme .nav-link.active {
  color: #fb923c !important;
}

.halloween-theme .nav-link.cta {
  background: rgba(249, 115, 22, 0.16) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: #fed7aa !important;
}

.halloween-theme .nav-link.cta:hover {
  background: rgba(249, 115, 22, 0.3) !important;
  border-color: #f97316 !important;
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.35) !important;
}

/* ==========================================================================
   Halloween Toggle Button Styles
   ========================================================================== */
.btn-halloween-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  font-family: inherit;
}

/* OFF State: Sleek subtle orange badge */
.btn-halloween-toggle.theme-off {
  background: rgba(249, 115, 22, 0.12) !important;
  color: #fb923c !important;
  border: 1px solid rgba(249, 115, 22, 0.35) !important;
  box-shadow: none !important;
}

.btn-halloween-toggle.theme-off:hover {
  background: rgba(249, 115, 22, 0.22) !important;
  border-color: rgba(249, 115, 22, 0.6) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 14px rgba(249, 115, 22, 0.3) !important;
}

/* ON State: Glowing Spooky Aura */
.btn-halloween-toggle.theme-on {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.38), rgba(168, 85, 247, 0.32)) !important;
  color: #fed7aa !important;
  border: 1px solid rgba(249, 115, 22, 0.75) !important;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.45), 0 0 28px rgba(168, 85, 247, 0.28) !important;
  animation: halloweenBtnGlow 2.5s infinite alternate;
}

.btn-halloween-toggle.theme-on:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(249, 115, 22, 0.65), 0 0 35px rgba(168, 85, 247, 0.4) !important;
}

@keyframes halloweenBtnGlow {
  0% { box-shadow: 0 0 14px rgba(249, 115, 22, 0.4), 0 0 24px rgba(168, 85, 247, 0.2); }
  100% { box-shadow: 0 0 22px rgba(249, 115, 22, 0.65), 0 0 36px rgba(168, 85, 247, 0.35); }
}