src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

/* Import responsive design utilities */
@import './styles/responsive.css';

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    
    --primary: 24 100% 50%;
    --primary-foreground: 0 0% 100%;
    
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 24 100% 50%;
    
    --radius: 0.75rem;
    
    --sidebar-background: 240 10% 3.9%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 24 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 24 100% 50%;
    --toaster-z-index: 9999 !important;
  }

  * {
    @apply border-border selection:bg-primary/10 selection:text-primary;
  }
  
  html {
    @apply scroll-smooth h-full overflow-hidden;
    /* Prevent overscroll behavior on mobile */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }
  
  body {
    @apply bg-background text-foreground antialiased h-full;
    font-feature-settings: "ss01", "ss02", "cv01", "cv02", "cv03";
    /* Fix for mobile viewport height issues */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    position: relative;
  }
  
  #root {
    @apply h-full max-w-none m-0 p-0;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

@layer components {
  .glass-panel {
    @apply bg-white/70 backdrop-blur-xl border border-white/20 shadow-sm;
  }
  
  .glass-panel-dark {
    @apply bg-black/20 backdrop-blur-xl border border-white/10 shadow-md;
  }
  
  .navbar-item {
    @apply flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-all hover:bg-secondary;
  }
  
  .navbar-item-active {
    @apply bg-primary/10 text-primary hover:bg-primary/20;
  }
  
  .section-title {
    @apply text-xl font-semibold tracking-tight;
  }
  
  .card-hover {
    @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1;
  }
  
  /* Use less intensive animations for mobile compatibility */
  .animate-in {
    animation: fadeIn 0.3s ease-out forwards;
    opacity: 0;
  }
  
  .slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
    transform: translateX(-10px);
    opacity: 0;
  }
  
  .slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
    transform: translateX(10px);
    opacity: 0;
  }
  
  .slide-in-up {
    animation: slideInUp 0.3s ease-out forwards;
    transform: translateY(10px);
    opacity: 0;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { 
    transform: translateX(-10px); 
    opacity: 0;
  }
  to { 
    transform: translateX(0); 
    opacity: 1;
  }
}

@keyframes slideInRight {
  from { 
    transform: translateX(10px); 
    opacity: 0;
  }
  to { 
    transform: translateX(0); 
    opacity: 1;
  }
}

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

.hover-scale {
  transition: transform 0.3s ease;
  overflow: visible !important;
}

.hover-scale:hover {
  transform: scale(1.02);
}

.page-transition-enter {
  opacity: 0;
  transform: translateY(10px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.page-transition-exit {
  opacity: 1;
}

.page-transition-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 300ms, transform 300ms;
}

/* Fix for any mobile WebView rendering issues */
input, textarea, select, button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius);
}

/* Fix for mobile form focusing */
input:focus, textarea:focus, select:focus, button:focus {
  outline: none;
}

/* Toast Animation Styles */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-in {
  animation: fadeIn 0.3s ease forwards;
}

.animate-out {
  animation: fadeOut 0.3s ease forwards;
}

.fade-in-0 {
  opacity: 0;
}

.slide-in-from-bottom-6 {
  transform: translateY(16px);
}

.duration-300 {
  animation-duration: 300ms;
}

/* Fix for dropdown menus appearing behind other elements */
[data-radix-popper-content-wrapper] {
  z-index: 9999 !important;
  visibility: visible !important;
}

/* Show dropdown content */
[data-state="open"] {
  visibility: visible !important;
  z-index: 9999 !important;
}

/* Fix for dropdown scrolling issues */
.hover-scale,
.overflow-visible,
.card {
  overflow: visible !important;
}

/* Add these CSS rules to fix black screen issue with dropdowns */

/* Fix for black screen with popover/dropdown menus */
body, #root {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-color: var(--background);
  color: var(--foreground);
}

/* Ensure popover content has proper z-index and background */
[data-radix-popper-content-wrapper] {
  z-index: 50 !important;
}

/* Fix for command dialog styles */
[cmdk-root] {
  background-color: white !important;
}

[data-theme="dark"] [cmdk-root] {
  background-color: hsl(240 10% 3.9%) !important;
}

/* Fix for popover content positioning */
.popover-content {
  position: relative;
  z-index: 999;
}

/* Prevent content behind popover from disappearing */
.popover-content * {
  position: relative;
}

/* Prevent content from going black when popover is open */
.radix-popover-content-wrapper,
.radix-dialog-content-wrapper {
  z-index: 9999;
  position: relative;
}

/* Custom dropdown styling */
.floating-ui-dropdown {
  background-color: white !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.dark .floating-ui-dropdown {
  background-color: hsl(240 10% 3.9%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.floating-ui-dropdown-search {
  background-color: white !important;
  color: black !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.dark .floating-ui-dropdown-search {
  background-color: hsl(240 10% 3.9%) !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.floating-ui-dropdown-option {
  background-color: white !important;
  color: black !important;
}

.dark .floating-ui-dropdown-option {
  background-color: hsl(240 10% 3.9%) !important;
  color: white !important;
}

.floating-ui-dropdown-option:hover,
.floating-ui-dropdown-option-active {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.dark .floating-ui-dropdown-option:hover,
.dark .floating-ui-dropdown-option-active {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Fix for sonner toast notifications - ensure they're visible with high z-index */
:root {
  --toaster-z-index: 9999 !important;
}

/* Override any unwanted sonner positioning */
[data-sonner-toaster] {
  position: fixed !important;
  z-index: var(--toaster-z-index) !important;
  bottom: 16px !important;
  right: 16px !important;
  top: auto !important;
  left: auto !important;
}

/* Super aggressive styling for toast */
[data-sonner-toast] {
  position: relative !important;
  z-index: calc(var(--toaster-z-index) + 1) !important;
  background-color: hsl(0 0% 100%) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(4px) !important;
  opacity: 1 !important;
}

/* Force all child elements to have the same background */
[data-sonner-toast] * {
  background-color: transparent !important;
}

[data-sonner-toast] > div {
  background-color: inherit !important;
  opacity: 1 !important;
}

/* Style the actual toast components */
.group.toast {
  background-color: hsl(0 0% 100%) !important;
  opacity: 1 !important;
}

[data-theme="dark"] [data-sonner-toast],
[data-theme="dark"] .group.toast {
  background-color: hsl(240 10% 3.9%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure toast notifications are not blocked by any other content */
[data-sonner-toaster][data-theme][data-x-position="right"] {
  right: 16px !important;
}

[data-sonner-toaster][data-theme][data-y-position="bottom"] {
  bottom: 16px !important;
  top: auto !important;
}

/* Toast animations for bottom position */
@keyframes toastInBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

[data-sonner-toast][data-styled="true"][data-mounted="true"] {
  animation: toastInBottom 0.3s ease-out forwards !important;
}

[data-sonner-toast][data-styled="true"][data-mounted="false"] {
  animation: toastOutBottom 0.3s ease-in forwards !important;
}