/**
 * @mks2508/sidebar-headless - Complete styles
 * 
 * This file contains all styles for Sidebar and MobileBottomNav components:
 * - Sidebar tooltip animations
 * - Mobile bottom navigation optimizations (iOS 26 Safari compatible)
 */

/* Sidebar Tooltip Animations */
/**
 * Tooltip Transition Keyframes
 *
 * Sistema de animaciones CSS para transiciones de tooltip con:
 * - Items staggered enter/exit
 * - Grid-based height transitions
 * - 3D title rotations
 *
 * Performance: GPU-accelerated (transform + opacity only)
 */

/* ============================================================================
   ITEMS ANIMATIONS - Staggered Enter/Exit
   ============================================================================ */

@keyframes tooltip-item-enter {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes tooltip-item-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-4px);
  }
}

/**
 * Item States con CSS Custom Properties
 *
 * Uso: <div style="--animation-order: 0" data-state="entering">
 */
.sidebar-sublink[data-state="entering"] {
  animation: tooltip-item-enter 150ms cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: calc(var(--animation-order, 0) * 30ms + 150ms);
  animation-fill-mode: both;
}

.sidebar-sublink[data-state="leaving"] {
  animation: tooltip-item-exit 100ms cubic-bezier(0.4, 0, 0.6, 1);
  animation-delay: calc(var(--animation-order, 0) * 20ms);
  animation-fill-mode: both;
}

/* ============================================================================
   TITLE 3D ROTATIONS
   ============================================================================ */

/**
 * Title Rotate Up (direction-aware)
 * Usado cuando navegamos hacia arriba en el sidebar
 */
@keyframes tooltip-title-rotate-up {
  from {
    transform: rotateX(0deg);
    opacity: 1;
  }
  to {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}

@keyframes tooltip-title-enter-from-below {
  from {
    transform: rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

/**
 * Title Rotate Down (direction-aware)
 * Usado cuando navegamos hacia abajo en el sidebar
 */
@keyframes tooltip-title-rotate-down {
  from {
    transform: rotateX(0deg);
    opacity: 1;
  }
  to {
    transform: rotateX(90deg);
    opacity: 0;
  }
}

@keyframes tooltip-title-enter-from-above {
  from {
    transform: rotateX(-90deg);
    opacity: 0;
  }
  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

/**
 * Title States
 */
.tooltip-title[data-direction="up"][data-state="leaving"] {
  animation: tooltip-title-rotate-up 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tooltip-title[data-direction="up"][data-state="entering"] {
  animation: tooltip-title-enter-from-below 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tooltip-title[data-direction="down"][data-state="leaving"] {
  animation: tooltip-title-rotate-down 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tooltip-title[data-direction="down"][data-state="entering"] {
  animation: tooltip-title-enter-from-above 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================================================
   3D CUBE FACES (Enfoque A: Multi-cara)
   ============================================================================ */

/**
 * Cubo 3D con 6 caras para títulos
 *
 * Estructura:
 * .title-scene (perspective)
 *   └─ .title-cube (preserve-3d)
 *       ├─ .title-face--front
 *       ├─ .title-face--back
 *       ├─ .title-face--top
 *       ├─ .title-face--bottom
 *       ├─ .title-face--left
 *       └─ .title-face--right
 */

.title-scene {
  perspective: 600px;
  position: relative;
  width: 100%;
  height: 2rem;
}

.title-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Empujar hacia atrás para evitar blur en texto */
  transform: translateZ(-1rem);
}

.title-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1rem;
  font-weight: 500;
}

/* Posicionamiento de caras - Vertical rotation (rotateX) */
.title-face--front {
  transform: rotateX(0deg) translateZ(1rem);
}

.title-face--top {
  transform: rotateX(90deg) translateZ(1rem);
}

.title-face--bottom {
  transform: rotateX(-90deg) translateZ(1rem);
}

.title-face--back {
  transform: rotateX(180deg) translateZ(1rem);
}

/* Estados del cubo - Direction-aware */
.title-cube[data-face="front"] {
  transform: translateZ(-1rem) rotateX(0deg);
}

.title-cube[data-face="top"] {
  transform: translateZ(-1rem) rotateX(-90deg);
}

.title-cube[data-face="bottom"] {
  transform: translateZ(-1rem) rotateX(90deg);
}

.title-cube[data-face="back"] {
  transform: translateZ(-1rem) rotateX(180deg);
}

/* ============================================================================
   GRID HEIGHT TRANSITION (Grid Trick)
   ============================================================================ */

/**
 * Grid trick para height: auto transitions
 *
 * Técnica: grid-template-rows: 0fr → 1fr
 * Browser support: Chrome 107+, Firefox 117+, Safari 16.4+
 */

.tooltip-content-grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 50ms; /* Empieza después del fade-out de items */
}

.tooltip-content-grid[data-state="open"] {
  grid-template-rows: 1fr;
}

.tooltip-content-inner {
  overflow: hidden;
  min-height: 0; /* Crítico para que grid trick funcione */
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/**
 * Contenedor con perspective para títulos crossfade
 */
.tooltip-title-perspective {
  perspective: 600px;
  position: relative;
  width: 100%;
  height: 2rem;
  overflow: hidden;
}

/**
 * Disable animations durante hover rápido (opcional)
 * Usar con cuidado: puede causar flickering
 */
.tooltip-no-animations * {
  animation: none !important;
  transition: none !important;
}

/* ============================================================================
   DEBUG HELPERS
   ============================================================================ */

/**
 * Visualización de estados en debug mode
 */
[data-tooltip-debug="true"] .sidebar-sublink[data-state]::before {
  content: attr(data-state);
  position: absolute;
  top: 0;
  right: 0;
  font-size: 8px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1000;
}

[data-tooltip-debug="true"] .tooltip-title[data-direction]::after {
  content: "dir:" attr(data-direction);
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 8px;
  background: rgba(0, 0, 255, 0.8);
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1000;
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/**
 * GPU acceleration hints
 */
.sidebar-sublink[data-state],
.tooltip-title[data-state],
.title-cube {
  will-change: transform, opacity;
}

/**
 * Contain layout/paint/style para mejor performance
 */
.tooltip-content-grid {
  contain: layout style paint;
}

/**
 * Reduce motion para accesibilidad
 */
@media (prefers-reduced-motion: reduce) {
  .sidebar-sublink[data-state],
  .tooltip-title[data-state],
  .title-cube,
  .tooltip-content-grid {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Mobile Bottom Navigation Optimizations */
/**
 * Mobile Optimizations CSS
 *
 * This file contains CSS optimizations for mobile devices,
 * specifically targeting iOS Safari and Android Chrome.
 * Updated for 2025 with modern viewport units and safe area handling.
 *
 * CRITICAL: iOS 26 Safari has major bugs with fixed/sticky positioning.
 * This file includes workarounds for these issues.
 *
 * Known iOS 26 Issues (as of December 2025):
 * - Fixed elements shift when address bar shrinks/expands
 * - visualViewport.offsetTop doesn't reset after keyboard dismissal
 * - 100dvh creates gaps at bottom for overlays
 * - position: fixed breaks after keyboard interaction
 *
 * @fileoverview Mobile-first CSS optimizations for bottom navigation
 * @author v0
 * @version 2.0.0 - iOS 26 compatibility update
 */

/* ============================================
   CSS Custom Properties for Mobile Navigation
   ============================================ */

:root {
  /* Navigation dimensions */
  --mobile-nav-height: 4.5rem; /* 72px - optimal touch target */
  --mobile-nav-padding-x: 1rem;
  --mobile-nav-padding-y: 0.5rem;
  --mobile-nav-gap: 0.25rem;

  /* Safe area handling for notched devices */
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  /* Touch target sizes (WCAG 2.2 Level AAA) */
  --touch-target-min: 44px;
  --touch-target-optimal: 48px;

  /* Glassmorphism properties */
  --glass-blur: 20px;
  --glass-saturation: 180%;
  --glass-bg-light: rgba(255, 255, 255, 0.72);
  --glass-bg-dark: rgba(17, 17, 17, 0.72);
  --glass-border-light: rgba(255, 255, 255, 0.18);
  --glass-border-dark: rgba(255, 255, 255, 0.08);

  /* Animation timing */
  --nav-transition-duration: 200ms;
  --nav-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* iOS 26 Safari workaround: extra padding for floating bar */
  --ios26-bottom-offset: 0px;
}

/* ============================================
   iOS 26 Safari Critical Workarounds
   ============================================
   
   iOS 26 has major bugs with position: fixed elements:
   1. Elements shift when scrolling and address bar changes
   2. After keyboard dismissal, visualViewport doesn't reset
   3. 100dvh doesn't cover full screen in some cases
   
   The workaround from Apple's own website:
   - Use a wrapper with fixed positioning
   - Apply 100vh to inner content
   - This creates proper stacking under the floating URL bar
*/

/* Detect iOS Safari using feature queries */
@supports (-webkit-touch-callout: none) {
  /* 
   * iOS 26 Safari Fix:
   * Move scroll from window to body to prevent fixed element drift.
   * This is the most reliable workaround as of iOS 26.1
   */
  html.ios-safari-fix {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  html.ios-safari-fix body {
    height: 100%;
    height: 100dvh;
    overflow: auto;
    overscroll-behavior: contain;
    /* Prevent momentum scroll affecting fixed elements */
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   Modern Viewport Units Support
   ============================================ */

/**
 * Dynamic Viewport Height (dvh) - Adjusts as browser UI appears/disappears
 * Small Viewport Height (svh) - Minimum viewport when browser UI is visible
 * Large Viewport Height (lvh) - Maximum viewport when browser UI is hidden
 *
 * IMPORTANT for iOS 26:
 * - dvh has inconsistent behavior after keyboard dismissal
 * - svh is more reliable for bottom navigation
 * - Consider using 100% with proper parent height chains
 */

/* Fallback for older browsers (iOS < 15.4) */
@supports not (height: 100dvh) {
  .mobile-nav-container {
    bottom: 0;
    /* iOS 11.0-11.2 legacy support */
    bottom: constant(safe-area-inset-bottom);
  }
}

/* Modern browsers with dynamic viewport units */
@supports (height: 100dvh) {
  .mobile-nav-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

/* ============================================
   Base Mobile Navigation Styles
   ============================================ */

.mobile-nav-root {
  /* Positioning - using fixed with iOS 26 considerations */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;

  /* Safe area padding for notched devices */
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);

  /* 
   * iOS 26 Fix: Force GPU layer to prevent drift
   * translateZ(0) creates a new stacking context and compositing layer
   */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  /* Hardware acceleration hints */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* 
   * iOS 26 Fix: contain property helps isolate layout
   * This prevents the element from being affected by parent layout changes
   */
  contain: layout style;
}

/*
 * Alternative iOS 26 workaround using sticky positioning
 * Some developers report sticky works better than fixed in iOS 26
 * Uncomment if fixed positioning continues to have issues
 */
.mobile-nav-root--sticky-fallback {
  position: sticky;
  bottom: 0;
  /* Sticky requires a positioned ancestor or viewport */
}

/* ============================================
   Glassmorphism Effect
   ============================================ */

.mobile-nav-glass {
  /* Glassmorphism background */
  background: var(--glass-bg-light);

  /* 
   * Backdrop blur with vendor prefix for Safari
   * Note: backdrop-filter can cause performance issues on older devices
   */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));

  /* Border for depth perception */
  border-top: 1px solid var(--glass-border-light);

  /* Text rendering optimization */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark mode glassmorphism */
.dark .mobile-nav-glass,
[data-theme="dark"] .mobile-nav-glass {
  background: var(--glass-bg-dark);
  border-top-color: var(--glass-border-dark);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  .mobile-nav-glass {
    background: rgba(255, 255, 255, 0.95);
  }

  .dark .mobile-nav-glass,
  [data-theme="dark"] .mobile-nav-glass {
    background: rgba(17, 17, 17, 0.95);
  }
}

/* ============================================
   Navigation List Styles
   ============================================ */

.mobile-nav-list {
  /* Flexbox layout */
  display: flex;
  align-items: center;
  justify-content: space-around;

  /* Dimensions */
  height: var(--mobile-nav-height);
  width: 100%;
  max-width: 100%;

  /* Padding */
  padding: var(--mobile-nav-padding-y) var(--mobile-nav-padding-x);

  /* Reset list styles */
  list-style: none;
  margin: 0;
}

/* ============================================
   Navigation Item Styles
   ============================================ */

.mobile-nav-item {
  /* Flexbox centering */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mobile-nav-gap);

  /* Touch target (minimum 44x44px per WCAG 2.2) */
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0.5rem 0.75rem;

  /* Reset button/anchor styles */
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;

  /* Typography - 16px minimum to prevent iOS zoom on focus */
  font-size: 0.75rem; /* 12px for labels */
  line-height: 1;

  /* Transition */
  transition: color var(--nav-transition-duration) var(--nav-transition-easing), transform
    var(--nav-transition-duration) var(--nav-transition-easing);

  /* Prevent text selection on touch */
  -webkit-user-select: none;
  user-select: none;

  /* Prevent double-tap zoom */
  touch-action: manipulation;

  /* Remove tap highlight on mobile */
  -webkit-tap-highlight-color: transparent;
}

/* Active/pressed state */
.mobile-nav-item:active {
  transform: scale(0.95);
}

/* Focus visible for accessibility (keyboard navigation) */
.mobile-nav-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Icon container */
.mobile-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; /* 24px */
  height: 1.5rem; /* 24px */
}

/* Label text */
.mobile-nav-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 4rem;
}

/* ============================================
   iOS Safari Specific Fixes (All versions)
   ============================================ */

@supports (-webkit-touch-callout: none) {
  .mobile-nav-root {
    /* Prevent rubber-banding effect on the nav */
    overscroll-behavior: none;

    /* Ensure proper stacking above Safari's UI */
    position: fixed;
    bottom: 0;
  }

  /* Spacer component to prevent content from going under navigation */
  .mobile-nav-spacer {
    height: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
    /* Add extra space for iOS 26 floating bar when needed */
    padding-bottom: var(--ios26-bottom-offset);
  }
}

/* ============================================
   iOS 26+ Specific Workarounds
   ============================================
   
   These are specifically for iOS 26 Safari bugs.
   The main issues are:
   1. Fixed elements drift when address bar shrinks
   2. visualViewport doesn't reset after keyboard
   3. 100dvh doesn't account for floating tab bar
*/

/* 
 * iOS 26 Detection Hack:
 * iOS 26 introduced the floating tab bar which affects layout.
 * We use a combination of feature detection and JS-added classes.
 */

/* When JS detects iOS 26, it adds this class to html */
html.ios-26-fix .mobile-nav-root {
  /* 
   * Apple's workaround: Use a pseudo-element that extends beyond
   * the visible area to account for the floating bar
   */
  position: fixed;
  bottom: 0;
}

html.ios-26-fix .mobile-nav-root::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--safe-area-bottom) - 20px);
  left: 0;
  right: 0;
  height: calc(var(--safe-area-bottom) + 20px);
  background: inherit;
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}

/* 
 * Alternative: Force recalculation on scroll
 * This class is toggled by JS when scroll events occur
 */
.mobile-nav-root--ios26-scroll-fix {
  /* Trigger repaint */
  transform: translateZ(0) translateY(0);
}

/* ============================================
   Android Chrome Specific Fixes
   ============================================ */

@supports not (-webkit-touch-callout: none) {
  .mobile-nav-root {
    /* Android uses standard fixed positioning well */
    bottom: 0;
  }

  /* Android gesture navigation safe area */
  .mobile-nav-spacer {
    height: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
  }
}

/* ============================================
   Keyboard Visibility Handling
   ============================================
   
   iOS 26 Bug: After keyboard dismissal, fixed elements
   remain offset. This requires JS intervention.
*/

/* When keyboard is visible, optionally hide nav */
html.keyboard-visible .mobile-nav-root--hide-on-keyboard {
  transform: translateY(100%);
  transition: transform 0.2s ease-out;
}

/* Force reset after keyboard dismissal (JS adds this class) */
html.keyboard-dismissed .mobile-nav-root {
  /* Force layout recalculation */
  transform: translateZ(0);
  animation: ios26-reset 0.01s forwards;
}

@keyframes ios26-reset {
  from {
    transform: translateZ(0) translateY(0.01px);
  }
  to {
    transform: translateZ(0) translateY(0);
  }
}

/* ============================================
   Reduced Motion Support
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-item {
    transition: none;
  }

  .mobile-nav-item:active {
    transform: none;
  }

  html.keyboard-visible .mobile-nav-root--hide-on-keyboard {
    transition: none;
  }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
  .mobile-nav-glass {
    background: Canvas;
    border-top: 2px solid CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mobile-nav-item {
    color: CanvasText;
  }

  .mobile-nav-item:focus-visible {
    outline-width: 3px;
  }
}

/* ============================================
   Landscape Orientation Adjustments
   ============================================ */

@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --mobile-nav-height: 3.5rem;
  }

  .mobile-nav-label {
    display: none;
  }

  .mobile-nav-item {
    padding: 0.25rem 0.5rem;
  }
}

/* ============================================
   Foldable/Dual Screen Support
   ============================================ */

@media (horizontal-viewport-segments: 2) {
  .mobile-nav-root {
    width: 100%;
  }

  .mobile-nav-list {
    /* Adjust for fold in the middle */
    padding-left: max(var(--mobile-nav-padding-x), env(fold-left, 0px));
    padding-right: max(var(--mobile-nav-padding-x), env(fold-right, 0px));
  }
}

/* Samsung Galaxy Fold specific */
@media (min-width: 280px) and (max-width: 320px) {
  .mobile-nav-list {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ============================================
   Very Small Screens (older devices)
   ============================================ */

@media (max-width: 320px) {
  :root {
    --mobile-nav-height: 4rem;
    --mobile-nav-padding-x: 0.5rem;
  }

  .mobile-nav-label {
    font-size: 0.625rem;
    max-width: 3rem;
  }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  .mobile-nav-root,
  .mobile-nav-spacer {
    display: none !important;
  }
}

/* ============================================
   Utility Classes
   ============================================ */

/* Hide visually but keep accessible to screen readers */
.mobile-nav-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to content link for keyboard users */
.mobile-nav-skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--glass-bg-light);
  border-radius: 0.5rem;
  transition: top 0.2s;
}

.mobile-nav-skip-link:focus {
  top: 0.5rem;
}