@tailwind base;
@tailwind components;
@tailwind utilities;

/* Theme system (admin-controlled via CSS variables) */
:root {
  --xbolt-primary: #18181b;
  --xbolt-primary-hover: #27272a;
  --xbolt-on-primary: #ffffff;
  --xbolt-bg: #ffffff;
  --xbolt-surface: #ffffff;
  --xbolt-surface-alt: #fafafa;
  --xbolt-border: #e4e4e7;
  --xbolt-text: #18181b;
  --xbolt-text-muted: #52525b;

  --xbolt-primary-rgb: 24 24 27;
  --xbolt-text-rgb: 24 24 27;
  --xbolt-bg-rgb: 255 255 255;
  --xbolt-surface-rgb: 255 255 255;
  --xbolt-surface-alt-rgb: 250 250 250;
  --xbolt-border-rgb: 228 228 231;
  --xbolt-text-muted-rgb: 82 82 91;
}

/* Background remaps */
.bg-zinc-50 { background-color: var(--xbolt-surface-alt) !important; }
.bg-zinc-100 { background-color: rgb(var(--xbolt-surface-alt-rgb) / 1) !important; }
.bg-zinc-200 { background-color: rgb(var(--xbolt-border-rgb) / 0.65) !important; }
.bg-zinc-300 { background-color: rgb(var(--xbolt-border-rgb) / 0.85) !important; }
.bg-zinc-700 { background-color: rgb(var(--xbolt-text-rgb) / 0.85) !important; }
.bg-zinc-900 { background-color: var(--xbolt-primary) !important; }
.bg-zinc-800 { background-color: var(--xbolt-primary-hover) !important; }
.bg-white { background-color: var(--xbolt-surface) !important; }
.bg-white\/70 { background-color: rgb(var(--xbolt-surface-rgb) / 0.70) !important; }
.bg-white\/65 { background-color: rgb(var(--xbolt-surface-rgb) / 0.65) !important; }
.bg-white\/60 { background-color: rgb(var(--xbolt-surface-rgb) / 0.60) !important; }
.bg-white\/80 { background-color: rgb(var(--xbolt-surface-rgb) / 0.80) !important; }
.bg-black\/20 { background-color: rgb(var(--xbolt-text-rgb) / 0.20) !important; }
.bg-zinc-900\/5 { background-color: rgb(var(--xbolt-primary-rgb) / 0.05) !important; }
.bg-zinc-900\/10 { background-color: rgb(var(--xbolt-primary-rgb) / 0.10) !important; }
.bg-zinc-900\/15 { background-color: rgb(var(--xbolt-primary-rgb) / 0.15) !important; }

/* Text remaps */
.text-zinc-950 { color: var(--xbolt-text) !important; }
.text-zinc-900 { color: var(--xbolt-text) !important; }
.text-zinc-800 { color: rgb(var(--xbolt-text-rgb) / 0.92) !important; }
.text-zinc-700 { color: rgb(var(--xbolt-text-rgb) / 0.85) !important; }
.text-zinc-600 { color: var(--xbolt-text-muted) !important; }
.text-zinc-500 { color: rgb(var(--xbolt-text-muted-rgb) / 0.95) !important; }
.text-zinc-400 { color: rgb(var(--xbolt-text-muted-rgb) / 0.75) !important; }
.text-zinc-300 { color: rgb(var(--xbolt-text-muted-rgb) / 0.55) !important; }
.text-white { color: var(--xbolt-on-primary) !important; }

/* Border remaps */
.border-zinc-200 { border-color: var(--xbolt-border) !important; }
.border-zinc-200\/70 { border-color: rgb(var(--xbolt-border-rgb) / 0.70) !important; }
.border-zinc-200\/60 { border-color: rgb(var(--xbolt-border-rgb) / 0.60) !important; }
.border-zinc-200\/50 { border-color: rgb(var(--xbolt-border-rgb) / 0.50) !important; }
.border-zinc-100 { border-color: rgb(var(--xbolt-border-rgb) / 0.45) !important; }
.border-zinc-300 { border-color: rgb(var(--xbolt-border-rgb) / 0.90) !important; }

/* Hover helpers */
.hover\:bg-zinc-100:hover { background-color: var(--xbolt-surface-alt) !important; }
.hover\:bg-zinc-50:hover { background-color: var(--xbolt-surface-alt) !important; }
.hover\:bg-white:hover { background-color: var(--xbolt-surface) !important; }
.hover\:bg-zinc-800:hover { background-color: var(--xbolt-primary-hover) !important; }
.hover\:bg-zinc-900:hover { background-color: var(--xbolt-primary) !important; }
.hover\:text-zinc-900:hover { color: var(--xbolt-text) !important; }
.hover\:text-zinc-600:hover { color: var(--xbolt-text-muted) !important; }
.hover\:text-zinc-500:hover { color: rgb(var(--xbolt-text-muted-rgb) / 0.95) !important; }
.hover\:text-zinc-400:hover { color: rgb(var(--xbolt-text-muted-rgb) / 0.75) !important; }

/* Focus rings */
.focus\:ring-zinc-900:focus { --tw-ring-color: var(--xbolt-primary) !important; }
.focus\:ring-zinc-200:focus { --tw-ring-color: rgb(var(--xbolt-border-rgb) / 0.60) !important; }

/* Gradient tokens (used heavily in landing/auth backgrounds) */
.from-white { --tw-gradient-from: rgb(var(--xbolt-bg-rgb) / 1) var(--tw-gradient-from-position) !important; }
.via-white { --tw-gradient-via: rgb(var(--xbolt-bg-rgb) / 1) var(--tw-gradient-via-position) !important; }
.to-white { --tw-gradient-to: rgb(var(--xbolt-bg-rgb) / 1) var(--tw-gradient-to-position) !important; }
.to-zinc-50 { --tw-gradient-to: rgb(var(--xbolt-surface-alt-rgb) / 1) var(--tw-gradient-to-position) !important; }
.via-zinc-50 { --tw-gradient-via: rgb(var(--xbolt-surface-alt-rgb) / 1) var(--tw-gradient-via-position) !important; }
.from-zinc-900\/5 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 0.05) var(--tw-gradient-from-position) !important; }
.from-zinc-900\/10 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 0.10) var(--tw-gradient-from-position) !important; }
.to-black { --tw-gradient-to: rgb(var(--xbolt-primary-rgb) / 1) var(--tw-gradient-to-position) !important; }
.to-gray-900 { --tw-gradient-to: rgb(var(--xbolt-primary-rgb) / 1) var(--tw-gradient-to-position) !important; }
.from-indigo-900 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 1) var(--tw-gradient-from-position) !important; }
.via-purple-900 { --tw-gradient-via: rgb(var(--xbolt-primary-rgb) / 0.85) var(--tw-gradient-via-position) !important; }
.from-indigo-800 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 0.95) var(--tw-gradient-from-position) !important; }
.via-purple-800 { --tw-gradient-via: rgb(var(--xbolt-primary-rgb) / 0.80) var(--tw-gradient-via-position) !important; }
.from-indigo-500\/20 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 0.20) var(--tw-gradient-from-position) !important; }
.to-purple-500\/20 { --tw-gradient-to: rgb(var(--xbolt-primary-rgb) / 0.20) var(--tw-gradient-to-position) !important; }
.from-blue-500\/20 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 0.20) var(--tw-gradient-from-position) !important; }
.to-purple-500\/20 { --tw-gradient-to: rgb(var(--xbolt-primary-rgb) / 0.20) var(--tw-gradient-to-position) !important; }
.from-amber-300\/25 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 0.25) var(--tw-gradient-from-position) !important; }
.via-orange-200\/10 { --tw-gradient-via: rgb(var(--xbolt-primary-rgb) / 0.10) var(--tw-gradient-via-position) !important; }
.to-amber-300\/20 { --tw-gradient-to: rgb(var(--xbolt-primary-rgb) / 0.20) var(--tw-gradient-to-position) !important; }
.from-amber-500\/10 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 0.10) var(--tw-gradient-from-position) !important; }
.via-orange-500\/10 { --tw-gradient-via: rgb(var(--xbolt-primary-rgb) / 0.10) var(--tw-gradient-via-position) !important; }
.from-blue-500 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 1) var(--tw-gradient-from-position) !important; }
.to-indigo-600 { --tw-gradient-to: rgb(var(--xbolt-primary-rgb) / 1) var(--tw-gradient-to-position) !important; }
.from-purple-600 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 1) var(--tw-gradient-from-position) !important; }
.to-purple-700 { --tw-gradient-to: rgb(var(--xbolt-primary-rgb) / 0.85) var(--tw-gradient-to-position) !important; }
.to-purple-600 { --tw-gradient-to: rgb(var(--xbolt-primary-rgb) / 0.85) var(--tw-gradient-to-position) !important; }
.from-blue-400 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 0.85) var(--tw-gradient-from-position) !important; }
.from-purple-500 { --tw-gradient-from: rgb(var(--xbolt-primary-rgb) / 0.85) var(--tw-gradient-from-position) !important; }
.to-blue-600 { --tw-gradient-to: rgb(var(--xbolt-primary-rgb) / 0.85) var(--tw-gradient-to-position) !important; }

/* Support variant used in navbar */
@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
  .supports-\[backdrop-filter\]\:bg-white\/60 { background-color: rgb(var(--xbolt-surface-rgb) / 0.60) !important; }
}

/* Prose (typography plugin) remap so policy/terms pages follow theme */
.prose {
  --tw-prose-body: var(--xbolt-text-muted) !important;
  --tw-prose-headings: var(--xbolt-text) !important;
  --tw-prose-links: var(--xbolt-primary) !important;
  --tw-prose-bold: var(--xbolt-text) !important;
  --tw-prose-counters: var(--xbolt-text-muted) !important;
  --tw-prose-bullets: var(--xbolt-border) !important;
  --tw-prose-hr: var(--xbolt-border) !important;
  --tw-prose-quotes: var(--xbolt-text) !important;
  --tw-prose-quote-borders: var(--xbolt-border) !important;
  --tw-prose-captions: var(--xbolt-text-muted) !important;
  --tw-prose-code: var(--xbolt-text) !important;
  --tw-prose-pre-code: var(--xbolt-on-primary) !important;
  --tw-prose-pre-bg: var(--xbolt-primary) !important;
  --tw-prose-th-borders: var(--xbolt-border) !important;
  --tw-prose-td-borders: var(--xbolt-border) !important;
}

/* Ensure prose-zinc variant doesn't override our theme tokens */
.prose-zinc {
  --tw-prose-body: var(--xbolt-text-muted) !important;
  --tw-prose-headings: var(--xbolt-text) !important;
  --tw-prose-links: var(--xbolt-primary) !important;
  --tw-prose-bold: var(--xbolt-text) !important;
  --tw-prose-counters: var(--xbolt-text-muted) !important;
  --tw-prose-bullets: var(--xbolt-border) !important;
  --tw-prose-hr: var(--xbolt-border) !important;
  --tw-prose-quotes: var(--xbolt-text) !important;
  --tw-prose-quote-borders: var(--xbolt-border) !important;
  --tw-prose-captions: var(--xbolt-text-muted) !important;
  --tw-prose-code: var(--xbolt-text) !important;
  --tw-prose-pre-code: var(--xbolt-on-primary) !important;
  --tw-prose-pre-bg: var(--xbolt-primary) !important;
  --tw-prose-th-borders: var(--xbolt-border) !important;
  --tw-prose-td-borders: var(--xbolt-border) !important;
}

/* Ring accents used around gradient icons */
.ring-blue-500\/30 { --tw-ring-color: rgb(var(--xbolt-primary-rgb) / 0.30) !important; }
.ring-purple-500 { --tw-ring-color: var(--xbolt-primary) !important; }

/* Landing hero: theme-driven accent blob + microchart */
.xbolt-hero-accent {
  background: radial-gradient(
    circle at 30% 30%,
    rgb(var(--xbolt-primary-rgb) / 0.28),
    rgb(var(--xbolt-primary-rgb) / 0.12) 35%,
    transparent 70%
  );
}

.xbolt-hero-microchart {
  background: linear-gradient(
    90deg,
    rgb(var(--xbolt-primary-rgb) / 0.06) 0%,
    rgb(var(--xbolt-primary-rgb) / 0.00) 60%
  );
}

/* Lightning flash effect for hero section (like real lightning strike) */
@keyframes xbolt-lightning-flash {
  0%, 100% { opacity: 0; }
  10% { opacity: 0.6; }
  11% { opacity: 0; }
  12% { opacity: 0.95; }
  13% { opacity: 0.4; }
  14% { opacity: 0; }
}

.xbolt-hero-lightning-bg {
  position: relative;
  background: var(--xbolt-surface);
  overflow: hidden;
}

.xbolt-hero-lightning-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(var(--xbolt-primary-rgb) / 0.95) 0%,
    rgb(var(--xbolt-primary-rgb) / 0.6) 40%,
    rgb(var(--xbolt-primary-rgb) / 0.3) 70%,
    transparent 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -5;
  opacity: 0;
  animation: xbolt-lightning-flash 8s ease-in-out infinite;
}

.xbolt-hero-lightning-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 60% 20%, 
    rgb(255 255 255 / 0.8) 0%,
    rgb(var(--xbolt-primary-rgb) / 0.4) 20%,
    transparent 50%
  );
  pointer-events: none;
  z-index: -5;
  opacity: 0;
  animation: xbolt-lightning-flash 10s ease-in-out infinite 4s;
}

@media (prefers-reduced-motion: reduce) {
  .xbolt-hero-lightning-bg::before,
  .xbolt-hero-lightning-bg::after {
    animation: none;
    display: none;
  }
}

/* Scroll Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cardBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  50% {
    transform: scale(1.02) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.scroll-animate-init {
  opacity: 0;
}

.scroll-animate.animate-in {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.scroll-animate-scale.animate-in {
  animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.xbolt-card-animate {
  opacity: 0;
  animation: cardBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-play-state: paused;
}

.xbolt-dashboard-mock.animate-in .xbolt-card-animate {
  animation-play-state: running;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

.animate-items {
  position: relative;
}

.animate-items::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid rgba(128, 128, 128, 0.2);
  border-top-color: var(--xbolt-primary, #8d5ac7);
  border-radius: 50%;
  animation: loader 0.6s linear infinite;
  z-index: 10;
}

.animate-items > *:not(.pointer-events-none):not(.opacity-0) {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.animate-items::before {
  opacity: 1;
  animation: loader 0.6s linear infinite, fadeOut 0.2s ease forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Mobile-specific fixes to prevent gaps and overflow */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    #main-content {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    #home {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    #home video {
        width: 100vw !important;
        height: 100vh !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    .container {
        max-width: 100vw !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Fix for any potential horizontal scroll */
    * {
        max-width: 100vw !important;
    }
    
    /* Fix canvas elements */
    canvas {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
    }
    
    /* Ensure navbar doesn't cause overflow */
    #navbar {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Fix loading screen */
    #loading-screen {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Mobile sidebar fixes */
    #mobile-sidebar {
        width: 288px !important;
        max-width: 288px !important;
        z-index: 60 !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
        transform-style: preserve-3d !important;
    }
    
    #sidebar-overlay {
        z-index: 55 !important;
    }
    
    /* Ensure navbar stays above sidebar overlay but below sidebar */
    #navbar {
        z-index: 50 !important;
    }
    
    /* Prevent body scroll when sidebar is open */
    body.sidebar-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Fix any potential touch issues on mobile */
    #mobile-sidebar * {
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Smooth sidebar menu item animations */
    #mobile-sidebar a {
        transition: all 0.2s ease !important;
    }
    
    #mobile-sidebar a:hover {
        transform: translateX(-4px) !important;
    }
}

/* Gradient animation for footer */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient-slow {
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
}

/* Custom scroll animation */
@keyframes scroll-bounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(12px);
        opacity: 1;
    }
}

.animate-scroll-bounce {
    animation: scroll-bounce 2s ease-in-out infinite;
}