/**
 * Navbar Responsive Fix - Consistent Mobile Behavior
 * 
 * This file standardizes mobile navbar behavior across all window sizes.
 * It overrides conflicting breakpoints and ensures consistent mobile experience.
 * 
 * Recent Fixes (2025-01-18):
 * ✅ Dark text on dark background issue resolved
 * ✅ Slide-from-right behavior restored (no more fullscreen on small devices)
 * ✅ Language flags visibility improved with larger size and better contrast
 * ✅ Mobile menu scrolling enabled (removed max-height constraint)
 * ✅ CSS cleanup completed (removed 4 unused navbar CSS files)
 * 
 * Breakpoint Strategy:
 * - Desktop: > 1024px (full navbar with all features)
 * - Tablet: 769px - 1024px (mobile navbar with hamburger)
 * - Mobile: ≤ 768px (mobile navbar with hamburger)
 */

/* ==========================================================================
   Standardized Breakpoint System
   ========================================================================== */

/* Desktop: Full navbar (1025px and above) - Standard desktop breakpoint */
@media (min-width: 1025px) {
  .navbar__mobile-toggle {
    display: none !important;
  }
  
  .navbar__nav--desktop {
    display: flex !important;
  }
  
  .navbar__actions > .navbar__action,
  .navbar__actions > .navbar__auth {
    display: flex !important;
  }
}

/* Tablet & Mobile: Mobile navbar (1024px and below) - Standard tablet/mobile breakpoint */
@media (max-width: 1024px) {
  /* Hide desktop navigation */
  .navbar__nav--desktop {
    display: none !important;
  }
  
  /* Show mobile toggle */
  .navbar__mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    z-index: 10000 !important;
    position: relative !important;
    margin-left: auto !important;
  }
  
  /* Hide desktop action items */
  .navbar__actions > .navbar__action:not(.navbar__mobile-toggle),
  .navbar__actions > .navbar__auth {
    display: none !important;
  }
  
  /* Ensure proper navbar layout */
  .navbar__container {
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 0.5rem !important; /* 8px minimal padding for mobile */
  }
  
  .navbar__brand {
    flex: 0 0 auto !important;
    order: 1 !important;
  }
  
  .navbar__search-section {
    order: 2 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin-right: 1rem !important;
  }
  
  .navbar__actions {
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    order: 3 !important;
  }
  
  /* Hamburger lines styling - Enhanced contrast */
  .navbar__mobile-toggle-line {
    width: 20px !important;
    height: 2px !important;
    background: rgba(17, 24, 39, 0.9) !important; /* Darker for better contrast */
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
    margin: 2px 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow for definition */
  }
  
  /* Dark mode hamburger lines - Better visibility */
  [data-theme="dark"] .navbar__mobile-toggle-line,
  .dark-mode .navbar__mobile-toggle-line,
  html.dark .navbar__mobile-toggle-line {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Transparent navbar hamburger - Theme-based for visibility */
  
  /* Light mode: Dark hamburger lines for visibility on white backgrounds */
  :root:not([data-theme="dark"]) .navbar--transparent .navbar__mobile-toggle-line,
  html:not([data-theme="dark"]) .navbar--transparent .navbar__mobile-toggle-line,
  [data-theme="light"] .navbar--transparent .navbar__mobile-toggle-line {
    background: rgba(17, 24, 39, 0.9) !important; /* Dark for visibility on white */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Dark mode: White hamburger lines for visibility on dark backgrounds */
  [data-theme="dark"] .navbar--transparent .navbar__mobile-toggle-line,
  .dark-mode .navbar--transparent .navbar__mobile-toggle-line {
    background: rgba(255, 255, 255, 0.95) !important; /* White for visibility on dark */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* Remove old page-specific overrides - now handled by theme */
  
  /* Scrolled navbar state - specific colors */
  .navbar[data-scrolled="true"] .navbar__mobile-toggle-line {
    background: rgba(17, 24, 39, 0.9) !important;
    box-shadow: none !important;
  }
  
  [data-theme="dark"] .navbar[data-scrolled="true"] .navbar__mobile-toggle-line,
  .dark-mode .navbar[data-scrolled="true"] .navbar__mobile-toggle-line {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: none !important;
  }
  
  /* Hover effects */
  .navbar__mobile-toggle:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.05) !important;
  }
  
  [data-theme="dark"] .navbar__mobile-toggle:hover,
  .dark-mode .navbar__mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
  }
}

/* ==========================================================================
   Mobile Menu Consistency
   ========================================================================== */

/* Ensure mobile menu is properly positioned and styled */
.navbar__mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 85vw !important; /* Reduced from 90vw for better slide-from-right appearance */
  max-width: 380px !important;
  height: 100vh !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  /* 80% transparent - theme-based colors (semi-transparent) */
  background: rgba(255, 255, 255, 0.8) !important; /* Light mode default - 80% transparent */
  background-color: rgba(255, 255, 255, 0.8) !important; /* Ensure background-color is set */
  z-index: 10002 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overscroll-behavior: contain !important;
  transform: translateX(100%) !important;
  backdrop-filter: blur(12px) saturate(150%) !important; /* Enhanced backdrop blur for transparency effect */
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode mobile menu */
[data-theme="dark"] .navbar__mobile-menu,
.dark-mode .navbar__mobile-menu {
  /* Ultra-black gradient with glassmorphism */
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%) !important; /* Ultra-black gradient */
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-left: 1px solid #2a2a2a !important; /* Ultra-black border */
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(212, 175, 55, 0.05) !important; /* Enhanced shadow with gold accent */
}

.navbar__mobile-menu.show {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Mobile overlay */
.navbar__mobile-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.85) !important; /* Increased from 0.6 to 0.85 for better footer obscuring */
  backdrop-filter: blur(5px) !important; /* Increased blur for better effect */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 999998 !important; /* Match z-index-hierarchy.css for consistency */
  transition: all 0.3s ease !important;
}

.navbar__mobile-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   Mobile Menu Content Styling
   ========================================================================== */

.navbar__mobile-container {
  height: 100% !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
  background: transparent !important; /* Transparent - let menu background show through */
  backdrop-filter: none !important; /* Remove backdrop filter - menu handles it */
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important; /* Prevent outer container scrolling - nav section handles it */
  -webkit-overflow-scrolling: touch !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  /* Light mode: Dark text for visibility */
  color: rgb(17, 24, 39) !important;
}

/* Ultra-black dark mode container - keep transparent */
[data-theme="dark"] .navbar__mobile-container,
.dark-mode .navbar__mobile-container {
  background: transparent !important; /* Keep transparent - menu background handles it */
  color: #ffffff !important; /* Pure white text for ultra-black */
}

/* Mobile header */
.navbar__mobile-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 0 !important;
  margin-bottom: 24px !important;
  /* Light mode: Dark border */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode header border */
[data-theme="dark"] .navbar__mobile-header,
.dark-mode .navbar__mobile-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.navbar__mobile-logo {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  /* Light mode: Dark text for visibility */
  color: rgb(17, 24, 39) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
}

/* Ultra-black dark mode logo text */
[data-theme="dark"] .navbar__mobile-logo,
.dark-mode .navbar__mobile-logo {
  color: #ffffff !important; /* Pure white text for ultra-black */
}

.navbar__mobile-close {
  background: none !important;
  border: none !important;
  /* Light mode: Dark icon for visibility */
  color: rgb(31, 41, 55) !important;
  font-size: 24px !important;
  cursor: pointer !important;
  padding: 8px !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.navbar__mobile-close:hover {
  background: rgba(239, 68, 68, 0.1) !important; /* Light red hover for light mode */
  color: rgb(220, 38, 38) !important; /* Red icon for light mode */
}

/* Dark mode close button */
[data-theme="dark"] .navbar__mobile-close,
.dark-mode .navbar__mobile-close {
  color: rgba(255, 255, 255, 0.7) !important; /* White icon for dark mode */
}

[data-theme="dark"] .navbar__mobile-close:hover,
.dark-mode .navbar__mobile-close:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

/* Mobile navigation links */
.navbar__mobile-nav {
  flex: 1 1 auto !important; /* Allow flex growth */
  min-height: 0 !important; /* Critical for flex scrolling */
  overflow-y: auto !important; /* Make nav section scrollable */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 16px !important;
}

.navbar__mobile-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.navbar__mobile-item {
  margin: 0 !important;
}

.navbar__mobile-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  /* Light mode: Dark text for visibility */
  color: rgb(31, 41, 55) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  margin: 4px 0 !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
  font-size: 1.0625rem !important; /* 17px - bigger and nicer font size */
  border-left: 4px solid transparent !important;
  min-height: 48px !important;
  line-height: 1.5 !important; /* Better line height */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.navbar__mobile-link:hover {
  background: rgba(31, 41, 55, 0.1) !important; /* Light gray hover for light mode */
  border-left-color: #3b82f6 !important;
  transform: translateX(8px) !important;
  color: rgb(17, 24, 39) !important; /* Dark text for light mode */
}

.navbar__mobile-link--active {
  background: rgba(59, 130, 246, 0.15) !important; /* Lighter blue for light mode */
  border-left-color: #3b82f6 !important;
  color: #2563eb !important; /* Darker blue text for light mode */
  font-weight: 600 !important;
}

/* Ultra-black dark mode link colors */
[data-theme="dark"] .navbar__mobile-link,
.dark-mode .navbar__mobile-link {
  color: #ffffff !important; /* Pure white text for ultra-black */
}

[data-theme="dark"] .navbar__mobile-link:hover,
.dark-mode .navbar__mobile-link:hover {
  background: #121212 !important; /* Slightly lighter on hover */
  border-left-color: rgba(212, 175, 55, 0.5) !important; /* Gold accent */
  color: #d4af37 !important; /* Gold text on hover */
}

[data-theme="dark"] .navbar__mobile-link--active,
.dark-mode .navbar__mobile-link--active {
  background: rgba(212, 175, 55, 0.15) !important; /* Gold background */
  border-left-color: #d4af37 !important; /* Gold border */
  color: #d4af37 !important; /* Gold text */
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2) !important; /* Gold shadow */
}

/* Mobile actions section */
.navbar__mobile-actions {
  margin-top: auto !important; /* Push to bottom */
  padding-top: 12px !important;
  padding-bottom: 8px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important; /* Light mode border */
  flex-shrink: 0 !important; /* Keep at bottom, don't shrink */
}

/* Ultra-black dark mode actions border */
[data-theme="dark"] .navbar__mobile-actions,
.dark-mode .navbar__mobile-actions {
  border-top: 1px solid #2a2a2a !important; /* Ultra-black border */
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%) !important; /* Ultra-black gradient */
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(212, 175, 55, 0.05) !important; /* Enhanced shadow with gold accent */
}

.navbar__mobile-action-group {
  margin-bottom: 12px !important;
}

.navbar__mobile-section-title {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  /* Light mode: Dark text for visibility */
  color: rgb(75, 85, 99) !important; /* Medium gray for light mode */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  position: relative !important;
  padding-left: 12px !important;
}

/* Dark mode section title */
[data-theme="dark"] .navbar__mobile-section-title,
.dark-mode .navbar__mobile-section-title {
  color: #e0e0e0 !important; /* Light grey text for ultra-black */
}

.navbar__mobile-section-title::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
  border-radius: 1px !important;
}

/* Ultra-black dark mode section title accent */
[data-theme="dark"] .navbar__mobile-section-title::before,
.dark-mode .navbar__mobile-section-title::before {
  background: linear-gradient(90deg, #d4af37, #b49225) !important; /* Gold gradient for ultra-black */
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Small mobile devices - Maintain slide-from-right behavior */
@media (max-width: 480px) {
  .navbar__mobile-menu {
    width: 95vw !important; /* Slightly wider for small screens but not fullscreen */
    max-width: 320px !important; /* Reasonable max width for small devices */
  }
  
  .navbar__mobile-container {
    padding: 12px !important;
  }
  
  .navbar__mobile-link {
    padding: 14px 16px !important;
    font-size: 1rem !important; /* 16px - still readable on small screens */
  }
  
  .navbar__mobile-toggle {
    width: 40px !important;
    height: 40px !important;
  }
  
  .navbar__mobile-toggle-line {
    width: 18px !important;
    height: 2px !important;
  }
}

/* Extra small devices */
@media (max-width: 360px) {
  .navbar__mobile-container {
    padding: 8px !important;
  }
  
  .navbar__mobile-link {
    padding: 12px 14px !important;
    font-size: 0.9375rem !important; /* 15px - still readable on extra small screens */
  }
  
  .navbar__mobile-toggle {
    width: 36px !important;
    height: 36px !important;
  }
  
  .navbar__mobile-toggle-line {
    width: 16px !important;
    height: 2px !important;
  }
}

/* ==========================================================================
   Override Conflicting Rules
   ========================================================================== */

/* Override any conflicting breakpoints from other files */
/* All breakpoints at or below 1024px should show mobile menu */
@media (max-width: 1024px) {
  .navbar__mobile-toggle {
    display: flex !important;
  }
  
  .navbar__nav--desktop {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .navbar__mobile-toggle {
    display: flex !important;
  }
  
  .navbar__nav--desktop {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .navbar__mobile-toggle {
    display: flex !important;
  }
  
  .navbar__nav--desktop {
    display: none !important;
  }
}

/* Ensure mobile menu is always above other elements */
/* Note: z-index values are defined in z-index-hierarchy.css for consistency */
/* Mobile menu: 999999, Overlay: 999998 (as defined in overlay rules above) */

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure footer is completely hidden behind overlay when mobile menu is open */
body.mobile-menu-open footer,
body.mobile-menu-open .footer,
body.mobile-menu-open .site-footer,
body.mobile-menu-open .footer-container,
body.mobile-menu-open [class*="footer"] {
  z-index: 1 !important; /* Ensure footer stays below overlay (999998) and menu (999999) */
  position: relative !important;
}

/* Prevent footer children from appearing above overlay */
body.mobile-menu-open footer *,
body.mobile-menu-open .footer *,
body.mobile-menu-open .site-footer * {
  z-index: inherit !important;
  position: relative !important;
}

/* ==========================================================================
   Mobile Language Selector & Theme Toggle Fixes
   ========================================================================== */

/* Mobile Language Selector - Compact Version */
.navbar__mobile-language-compact {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.navbar__mobile-language-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2px !important;
}

.navbar__mobile-language-item-compact {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 2px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important; /* Slightly reduced */
  color: rgba(255, 255, 255, 0.85) !important; /* Slightly more visible text */
}

/* Ultra-black dark mode language item compact */
[data-theme="dark"] .navbar__mobile-language-item-compact,
.dark-mode .navbar__mobile-language-item-compact {
  background: #0a0a0a !important; /* Ultra-black */
  border: 1px solid #2a2a2a !important; /* Ultra-black border */
  color: #ffffff !important; /* Pure white */
}

[data-theme="dark"] .navbar__mobile-language-item-compact:hover,
.dark-mode .navbar__mobile-language-item-compact:hover {
  background: #121212 !important; /* Slightly lighter on hover */
  border-color: rgba(212, 175, 55, 0.3) !important; /* Gold border */
  color: #d4af37 !important; /* Gold text */
}

[data-theme="dark"] .navbar__mobile-language-item-compact--active,
.dark-mode .navbar__mobile-language-item-compact--active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(180, 146, 37, 0.25)) !important; /* Gold gradient */
  border-color: #d4af37 !important; /* Gold border */
  color: #ffffff !important; /* White text */
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2) !important; /* Gold shadow */
}
  font-size: 0.55rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-height: 30px !important;
  text-decoration: none !important;
}

.navbar__mobile-language-item-compact:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: scale(1.02) !important;
  color: white !important;
}

.navbar__mobile-language-item-compact--active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.4)) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
}

.navbar__mobile-language-flag {
  width: 16px !important;
  height: 10px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important; /* Ensure no repeat */
  border-radius: 2px !important; /* Slightly reduced */
  flex-shrink: 0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; /* Enhanced shadow for better definition */
  border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Lighter border for dark background */
}

/* Flag images for mobile language selector */
.navbar__mobile-language-flag--en { 
  background-image: url('../../images/flags/en.svg') !important; 
}
.navbar__mobile-language-flag--it { 
  background-image: url('../../images/flags/it.svg') !important; 
}
.navbar__mobile-language-flag--fr { 
  background-image: url('../../images/flags/fr.svg') !important; 
}
.navbar__mobile-language-flag--es { 
  background-image: url('../../images/flags/es.svg') !important; 
}

.navbar__mobile-language-name-compact {
  font-size: 0.55rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* Mobile Theme Toggle - Compact Version */
.navbar__mobile-theme-toggle-compact {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 4px 8px !important;
  background: rgba(31, 41, 55, 0.06) !important; /* Light gray background for light mode */
  border: 1px solid rgba(31, 41, 55, 0.1) !important; /* Light border for light mode */
  border-radius: 10px !important; /* Slightly reduced */
  /* Light mode: Dark text for visibility */
  color: rgb(31, 41, 55) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 28px !important;
}

/* Compact auth buttons for mobile actions */
.navbar__mobile-auth-compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.navbar__mobile-auth-link-compact,
.navbar__mobile-auth-button-compact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  border: 1px solid rgba(31, 41, 55, 0.2) !important;
  background: rgba(31, 41, 55, 0.05) !important;
  color: rgb(31, 41, 55) !important;
}

.navbar__mobile-auth-button-compact {
  background: var(--navbar-primary) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

[data-theme="dark"] .navbar__mobile-auth-link-compact,
.dark-mode .navbar__mobile-auth-link-compact {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .navbar__mobile-auth-button-compact,
.dark-mode .navbar__mobile-auth-button-compact {
  color: #ffffff !important;
}

/* Ensure mobile menu colors match navbar theme variables */
.navbar__mobile-menu {
  background-color: var(--navbar-bg) !important;
}

.navbar__mobile-container {
  color: var(--navbar-text-primary) !important;
}

.navbar__mobile-link {
  color: var(--navbar-text-primary) !important;
}

.navbar__mobile-section-title {
  color: var(--navbar-text-secondary) !important;
}

.navbar__mobile-theme-toggle-compact:hover {
  background: rgba(31, 41, 55, 0.1) !important; /* Darker hover for light mode */
  border-color: rgba(31, 41, 55, 0.2) !important;
  color: rgb(17, 24, 39) !important; /* Darker text on hover for light mode */
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Ultra-black dark mode theme toggle */
[data-theme="dark"] .navbar__mobile-theme-toggle-compact,
.dark-mode .navbar__mobile-theme-toggle-compact {
  background: #0a0a0a !important; /* Ultra-black */
  border: 1px solid #2a2a2a !important; /* Ultra-black border */
  color: #ffffff !important; /* Pure white */
}

[data-theme="dark"] .navbar__mobile-theme-toggle-compact:hover,
.dark-mode .navbar__mobile-theme-toggle-compact:hover {
  background: #121212 !important; /* Slightly lighter on hover */
  border-color: #d4af37 !important; /* Gold border */
  color: #d4af37 !important; /* Gold text */
  box-shadow: 0 3px 12px rgba(212, 175, 55, 0.2) !important; /* Gold shadow */
}

.navbar__mobile-theme-toggle-compact:active {
  transform: translateY(0) scale(0.98) !important;
  transition: transform 0.1s ease-out !important;
}

.navbar__mobile-theme-icon-compact {
  width: 16px !important; /* Reduced for more compact design */
  height: 16px !important; /* Reduced for more compact design */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.navbar__mobile-theme-icon-compact i {
  position: absolute !important;
  transition: all 0.3s ease !important;
  font-size: 12px !important; /* Reduced for more compact design */
}

.navbar__mobile-theme-icon-compact .navbar__theme-icon--light {
  opacity: 1 !important;
}

.navbar__mobile-theme-icon-compact .navbar__theme-icon--dark {
  opacity: 0 !important;
}

/* Dark mode active state for theme icons */
[data-theme="dark"] .navbar__mobile-theme-icon-compact .navbar__theme-icon--light,
.dark-mode .navbar__mobile-theme-icon-compact .navbar__theme-icon--light {
  opacity: 0 !important;
}

[data-theme="dark"] .navbar__mobile-theme-icon-compact .navbar__theme-icon--dark,
.dark-mode .navbar__mobile-theme-icon-compact .navbar__theme-icon--dark {
  opacity: 1 !important;
}

.navbar__mobile-theme-text-compact {
  flex: 1 !important;
  text-align: left !important;
  margin-left: 12px !important;
  color: inherit !important; /* Inherit from parent toggle button */
}

.navbar__mobile-theme-switch-compact {
  width: 28px !important; /* Further reduced for more compact design */
  height: 16px !important; /* Further reduced for more compact design */
  background: rgba(31, 41, 55, 0.15) !important; /* Dark gray for light mode */
  border-radius: 8px !important; /* Adjusted for new height */
  position: relative !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(31, 41, 55, 0.1) !important;
}

.navbar__mobile-theme-slider-compact {
  width: 12px !important; /* Further reduced for more compact design */
  height: 12px !important; /* Further reduced for more compact design */
  background: rgb(31, 41, 55) !important; /* Dark slider for light mode */
  border-radius: 50% !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Ultra-black dark mode active state for compact theme toggle */
[data-theme="dark"] .navbar__mobile-theme-toggle-compact .navbar__mobile-theme-switch-compact,
.dark-mode .navbar__mobile-theme-toggle-compact .navbar__mobile-theme-switch-compact {
  background: rgba(212, 175, 55, 0.3) !important; /* Gold background */
  border: 1px solid rgba(212, 175, 55, 0.4) !important; /* Gold border */
}

[data-theme="dark"] .navbar__mobile-theme-toggle-compact .navbar__mobile-theme-slider-compact,
.dark-mode .navbar__mobile-theme-toggle-compact .navbar__mobile-theme-slider-compact {
  transform: translateX(12px) !important; /* Adjusted for new switch width (28px - 12px - 2px*2 = 12px) */
  background: #d4af37 !important; /* Gold slider */
  box-shadow: 0 1px 3px rgba(212, 175, 55, 0.5) !important; /* Gold shadow */
}

/* Mobile Account Section */
.navbar__mobile-auth {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.navbar__mobile-auth-link,
.navbar__mobile-auth-button {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  /* Light mode: Dark text with light background */
  background: rgba(31, 41, 55, 0.04) !important;
  border: 1px solid rgba(31, 41, 55, 0.15) !important;
  border-radius: 8px !important;
  color: rgb(31, 41, 55) !important; /* Dark text for light mode */
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  min-height: 44px !important;
  cursor: pointer !important;
}

.navbar__mobile-auth-link:hover,
.navbar__mobile-auth-button:hover {
  background: rgba(31, 41, 55, 0.1) !important; /* Darker hover for light mode */
  border-color: rgba(31, 41, 55, 0.25) !important;
  color: rgb(17, 24, 39) !important; /* Darker text on hover */
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Ultra-black dark mode auth links */
[data-theme="dark"] .navbar__mobile-auth-link,
.dark-mode .navbar__mobile-auth-link,
html.dark .navbar__mobile-auth-link,
[data-theme="dark"] .navbar__mobile-auth-button,
.dark-mode .navbar__mobile-auth-button,
html.dark .navbar__mobile-auth-button {
  background: #0a0a0a !important; /* Ultra-black */
  border: 1px solid #2a2a2a !important; /* Ultra-black border */
  color: #ffffff !important; /* Pure white */
}

[data-theme="dark"] .navbar__mobile-auth-link:hover,
.dark-mode .navbar__mobile-auth-link:hover,
html.dark .navbar__mobile-auth-link:hover,
[data-theme="dark"] .navbar__mobile-auth-button:hover,
.dark-mode .navbar__mobile-auth-button:hover,
html.dark .navbar__mobile-auth-button:hover {
  background: #121212 !important; /* Slightly lighter on hover */
  border-color: #d4af37 !important; /* Gold border */
  color: #d4af37 !important; /* Gold text */
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2) !important; /* Gold shadow */
}

.navbar__mobile-auth-button--danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: rgba(239, 68, 68, 0.9) !important;
}

.navbar__mobile-auth-button--danger:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

/* ==========================================================================
   Debug Information (Remove in production)
   ========================================================================== */

/* Debug indicators removed as requested */