/* Mobile-Optimized Theme Toggle - Standalone CSS */

/* Ensure theme toggle doesn't interfere with mobile navigation */
#theme-toggle-fab {
  position: fixed !important;
  z-index: 40 !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Mobile navigation detection and positioning */
@media (max-width: 768px) {
  #theme-toggle-fab {
    bottom: 20px !important;
    right: 16px !important;
  }
  
  /* If mobile bottom navigation exists, move theme toggle up */
  body:has(.md\:hidden.fixed.bottom-0) #theme-toggle-fab,
  .md\:hidden.fixed.bottom-0 ~ * #theme-toggle-fab {
    bottom: 100px !important;
  }
}

@media (max-width: 480px) {
  #theme-toggle-fab {
    right: 12px !important;
  }
  
  body:has(.md\:hidden.fixed.bottom-0) #theme-toggle-fab,
  .md\:hidden.fixed.bottom-0 ~ * #theme-toggle-fab {
    bottom: 95px !important;
  }
}

/* Landscape mode - keep normal positioning */
@media (max-width: 768px) and (orientation: landscape) {
  #theme-toggle-fab {
    bottom: 20px !important;
    right: 20px !important;
  }
}

/* Safe area support for notched devices */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    #theme-toggle-fab {
      bottom: max(20px, env(safe-area-inset-bottom) + 20px) !important;
      right: max(16px, env(safe-area-inset-right) + 16px) !important;
    }
    
    body:has(.md\:hidden.fixed.bottom-0) #theme-toggle-fab {
      bottom: max(100px, env(safe-area-inset-bottom) + 100px) !important;
    }
  }
}

/* Prevent theme flash on page load */
html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* Smooth theme transitions */
.theme-transition * {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease !important;
}

/* Disable transitions during page load */
.preload * {
  transition: none !important;
}