path: root/frontend/src/app/globals.css

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* Custom responsive breakpoints */
@custom-variant xs (&:is(@media (min-width: 475px) *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Complete override for ghost variant default styles */
/* This targets the specific ghost variant classes from the button component */
.nav-button-transparent {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  --tw-bg-opacity: 0 !important;
  --accent: transparent !important;
  --background: transparent !important;
  --tw-border-opacity: 0 !important;
  --tw-shadow: none !important;
  --tw-ring-shadow: none !important;
  --tw-ring-offset-shadow: none !important;
  cursor: pointer !important;
}

/* Force override ghost variant styles completely */
button[class*="nav-button-transparent"],
[data-slot="button"][class*="nav-button-transparent"],
[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Override ghost variant hover specifically */
button[class*="nav-button-transparent"][class*="hover:bg-accent"],
[data-slot="button"][class*="nav-button-transparent"][class*="hover:bg-accent"],
[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="hover:bg-accent"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Dark mode ghost variant overrides */
.dark button[class*="nav-button-transparent"][class*="dark:hover:bg-accent"],
.dark [data-slot="button"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"],
.dark [data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Remove focus rings and outlines for nav buttons */
.nav-button-transparent:focus,
.nav-button-transparent:focus-visible {
  outline: none !important;
  ring: none !important;
  --tw-ring-shadow: none !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Light mode subtle hover effects - only show on hover */
.nav-button-transparent:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  --tw-bg-opacity: 1 !important;
  border: none !important;
  transition: background-color 0.2s ease-in-out !important;
}

/* Dark mode even more subtle hover effects */
.dark .nav-button-transparent:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  transition: background-color 0.2s ease-in-out !important;
}

/* Override NavigationMenuTrigger specific classes with maximum specificity */
.nav-button-transparent.bg-background {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Focus states - only subtle background, no borders or rings */
.nav-button-transparent:focus:not(:hover) {
  background: rgba(0, 0, 0, 0.04) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  box-shadow: none !important;
}

.dark .nav-button-transparent:focus:not(:hover) {
  background: rgba(255, 255, 255, 0.03) !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Override open states */
.nav-button-transparent[data-state="open"] {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  border: none !important;
}

.dark .nav-button-transparent[data-state="open"] {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
}

/* Ensure all shadcn/ui utility classes are overridden with high specificity */
button.nav-button-transparent,
[data-slot="button"].nav-button-transparent,
[data-slot="navigation-menu-trigger"].nav-button-transparent {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Hover states for all button types */
button.nav-button-transparent:hover,
[data-slot="button"].nav-button-transparent:hover,
[data-slot="navigation-menu-trigger"].nav-button-transparent:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  transition: background-color 0.2s ease-in-out !important;
  cursor: pointer !important;
}

/* Focus states for all button types */
button.nav-button-transparent:focus,
[data-slot="button"].nav-button-transparent:focus,
[data-slot="navigation-menu-trigger"].nav-button-transparent:focus {
  background: rgba(0, 0, 0, 0.04) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
}

/* Dark mode hover and focus states */
.dark button.nav-button-transparent:hover,
.dark [data-slot="button"].nav-button-transparent:hover,
.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
  transition: background-color 0.2s ease-in-out !important;
  cursor: pointer !important;
}

.dark button.nav-button-transparent:focus,
.dark [data-slot="button"].nav-button-transparent:focus,
.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:focus {
  background: rgba(255, 255, 255, 0.03) !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
}

/* Dropdown and navigation item transparency */
.nav-dropdown-transparent {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  border-radius: 0.75rem !important;
}

.dark .nav-dropdown-transparent {
  background: rgba(15, 15, 15, 0.85) !important;
  border: 1px solid rgba(82, 82, 82, 0.3) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 2px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.nav-dropdown-item {
  background: transparent !important;
  border: none !important;
  transition: background-color 0.2s ease-in-out !important;
}

.nav-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border: none !important;
}

.dark .nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
}

/* Additional overrides for complete transparency */
/* Handle any remaining shadcn/ui styling conflicts */
.nav-button-transparent[data-variant="ghost"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

.nav-button-transparent[data-variant="ghost"]:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  cursor: pointer !important;
}

.dark .nav-button-transparent[data-variant="ghost"]:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
  cursor: pointer !important;
}

/* Override any remaining background utilities */
.nav-button-transparent.bg-transparent,
.nav-button-transparent.bg-accent,
.nav-button-transparent.hover\:bg-accent,
.nav-button-transparent.focus\:bg-accent {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

/* Ensure link elements in navigation also have transparent styling */
a.nav-button-transparent {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

a.nav-button-transparent:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.dark a.nav-button-transparent:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Ultra-specific overrides to ensure transparency takes precedence */
/* Handle all possible combinations of button classes */
button.nav-button-transparent.hover\:bg-accent,
button.nav-button-transparent.dark\:hover\:bg-accent\/50,
button.nav-button-transparent[class*="hover:bg"],
[data-slot="button"].nav-button-transparent.hover\:bg-accent,
[data-slot="button"].nav-button-transparent.dark\:hover\:bg-accent\/50,
[data-slot="button"].nav-button-transparent[class*="hover:bg"],
[data-slot="navigation-menu-trigger"].nav-button-transparent.hover\:bg-accent,
[data-slot="navigation-menu-trigger"].nav-button-transparent.dark\:hover\:bg-accent\/50,
[data-slot="navigation-menu-trigger"].nav-button-transparent[class*="hover:bg"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Override any CSS custom properties that might affect background */
.nav-button-transparent {
  --tw-bg-accent: transparent !important;
  --tw-bg-background: transparent !important;
  --tw-bg-muted: transparent !important;
  --tw-bg-secondary: transparent !important;
}

/* Ensure no background on any state for nav buttons */
.nav-button-transparent,
.nav-button-transparent:not(:hover):not(:focus):not(:active) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Maximum specificity overrides - nuclear option for transparency */
html body header button.nav-button-transparent,
html body header [data-slot="button"].nav-button-transparent,
html body header [data-slot="navigation-menu-trigger"].nav-button-transparent,
html body header div button.nav-button-transparent,
html body header div [data-slot="button"].nav-button-transparent,
html body header div [data-slot="navigation-menu-trigger"].nav-button-transparent {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Override any inline styles or computed styles */
.nav-button-transparent[style*="background"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Target specific button classes that might have background */
.nav-button-transparent.inline-flex,
.nav-button-transparent[class*="inline-flex"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Enhanced link element transparency for Sale button and similar nav links */
/* Apply maximum specificity for link elements in navigation */
html body header a.nav-button-transparent,
html body header div a.nav-button-transparent,
html body header nav a.nav-button-transparent,
[data-slot="navigation-menu-link"].nav-button-transparent {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  cursor: pointer !important;
}

/* Override any NavigationMenuLink default styles */
a.nav-button-transparent[data-slot="navigation-menu-link"],
[data-slot="navigation-menu-link"].nav-button-transparent {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ensure link hover states maintain transparency in default state */
a.nav-button-transparent:not(:hover):not(:focus):not(:active) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Specific overrides for NavigationMenuLink component (Sale button) */
[data-slot="navigation-menu-link"].nav-button-transparent {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Override NavigationMenuLink hover and focus states */
[data-slot="navigation-menu-link"].nav-button-transparent.hover\:bg-accent,
[data-slot="navigation-menu-link"].nav-button-transparent.focus\:bg-accent,
[data-slot="navigation-menu-link"].nav-button-transparent[class*="hover:bg-accent"],
[data-slot="navigation-menu-link"].nav-button-transparent[class*="focus:bg-accent"],
[data-slot="navigation-menu-link"].nav-button-transparent[class*="data-[active=true]:bg-accent"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Override NavigationMenuLink data states */
[data-slot="navigation-menu-link"].nav-button-transparent[data-active="true"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Ensure NavigationMenuLink has proper hover effect */
[data-slot="navigation-menu-link"].nav-button-transparent:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  transition: background-color 0.2s ease-in-out !important;
}

.dark [data-slot="navigation-menu-link"].nav-button-transparent:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Enhanced Theme Toggle Transparency Effects */
/* Theme toggle specific enhancements for better navbar integration */
.nav-button-transparent.group {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px) saturate(150%);
  border-radius: 0.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced hover state for theme toggle */
.nav-button-transparent.group:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  transform: scale(1.05);
  backdrop-filter: blur(12px) saturate(180%);
}

.dark .nav-button-transparent.group:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Active state for theme toggle */
.nav-button-transparent.group:active {
  transform: scale(0.95);
  transition: transform 0.1s ease-in-out;
}

/* Enhanced focus state for theme toggle */
.nav-button-transparent.group:focus-visible {
  background: rgba(0, 0, 0, 0.04) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
  outline: none !important;
}

.dark .nav-button-transparent.group:focus-visible {
  background: rgba(255, 255, 255, 0.03) !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
}


/* Enhanced dropdown items for theme toggle */
.nav-dropdown-item.group\/item {
  background: transparent !important;
  border: none !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 2px !important;
  padding: 0.5rem 0.75rem !important;
}

.nav-dropdown-item.group\/item:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  transform: translateX(2px) !important;
}

.dark .nav-dropdown-item.group\/item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Smooth icon transitions for theme toggle */
.nav-button-transparent.group svg {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.dark .nav-button-transparent.group svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Enhanced glow effect for theme toggle */
.nav-button-transparent.group:hover svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.dark .nav-button-transparent.group:hover svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Ultra-smooth dropdown animations */
@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes dropdown-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
}

/* Apply dropdown animation to nav dropdowns */
.nav-dropdown-transparent[data-state="open"] {
  animation: dropdown-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Improved checkmark animation */
.nav-dropdown-item span[class*="animate-in"] {
  animation: checkmark-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkmark-in {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-12deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Prevent any conflicting backgrounds on theme toggle */
.nav-button-transparent.group[data-state="open"] {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  transform: scale(1.05);
}

.dark .nav-button-transparent.group[data-state="open"] {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 0.5rem !important;
}

/* Mobile-friendly enhancements */
@media (max-width: 768px) {
  /* Ensure touch targets are at least 44px */
  .touch-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Better mobile spacing for action buttons */
  .mobile-action-buttons {
    gap: 0.25rem !important;
  }
  
  /* Mobile menu improvements */
  .mobile-menu-item {
    min-height: 44px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
  }
  
  .mobile-menu-item:active {
    transform: scale(0.98);
    background: rgba(0, 0, 0, 0.05);
  }
  
  .dark .mobile-menu-item:active {
    background: rgba(255, 255, 255, 0.05);
  }
  
  /* Prevent text selection on mobile UI elements */
  .no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Improve mobile sheet content scrolling */
  .mobile-sheet-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Hide scrollbar in mobile menu while maintaining scroll functionality */
  [data-radix-dialog-content] {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer and Edge */
  }
  
  [data-radix-dialog-content]::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
  }
  
  /* Specifically target Sheet content scrolling areas */
  [data-radix-dialog-content] .overflow-y-auto,
  [data-radix-dialog-content] .overflow-auto {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer and Edge */
  }
  
  [data-radix-dialog-content] .overflow-y-auto::-webkit-scrollbar,
  [data-radix-dialog-content] .overflow-auto::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
  }
  
  /* Mobile navigation specific scrollbar hiding */
  .mobile-nav-scroll {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer and Edge */
  }
  
  .mobile-nav-scroll::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
  
  /* Additional scrollbar hiding for all mobile menu elements */
  [data-radix-dialog-content] *,
  [data-radix-dialog-content] *::-webkit-scrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* Small mobile optimizations */
@media (max-width: 475px) {
  /* Tighter spacing on very small screens */
  .action-buttons-compact {
    gap: 0.125rem !important;
  }
  
  /* Slightly smaller touch targets for very small screens */
  .compact-touch-target {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  
  /* Reduce header height on very small screens */
  .compact-header {
    height: 3.5rem !important; /* 56px */
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .nav-button-transparent,
  .nav-dropdown-item,
  .mobile-menu-item {
    transition: none !important;
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .nav-button-transparent {
    border: 1px solid currentColor !important;
  }
  
  .nav-dropdown-transparent {
    border: 1px solid currentColor !important;
    background: var(--background) !important;
  }
}

/* Focus visible for keyboard navigation */
.nav-button-transparent:focus-visible {
  outline: 2px solid var(--ring) !important;
  outline-offset: 2px !important;
}

/* Mobile menu icon stroke uniformity */
.mobile-nav-scroll svg,
[data-radix-dialog-content] svg {
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Force consistent stroke width for mobile quick action icons */
@media (max-width: 768px) {
  [data-radix-dialog-content] button svg {
    stroke-width: inherit !important;
  }
}