/* Cross-Device Compatibility Improvements */
/* Handles intermediate breakpoints, orientation changes, and enhanced touch support */

/* Enhanced CSS Custom Properties for breakpoints */
:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --sidebar-width-mobile: 280px;
  --sidebar-width-tablet: 320px;
  --sidebar-width-desktop: 280px;
  --sidebar-width-collapsed: 80px;
}

/* CSS Containment for better performance */
.dashboard-sidebar,
.public-nav__mobile {
  contain: layout style paint;
}

/* Extra Small Devices (320px - 479px) */
@media (max-width: 479px) {
  .dashboard-sidebar {
    width: calc(100vw - 20px);
    max-width: var(--sidebar-width-mobile);
  }

  .dashboard-sidebar__header {
    padding: 0.75rem;
    min-height: 50px;
  }

  .dashboard-sidebar__logo {
    font-size: 1rem;
  }

  .dashboard-sidebar__link,
  .dashboard-sidebar__trigger {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
  }

  .dashboard-sidebar__text {
    font-size: 0.8125rem;
  }

  .public-nav__container {
    padding: 0 0.75rem;
  }

  .public-nav__mobile {
    padding: 0.75rem;
  }
}

/* Small Devices (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .dashboard-sidebar {
    width: var(--sidebar-width-mobile);
  }

  .dashboard-sidebar__header {
    padding: 0.875rem;
  }

  .dashboard-sidebar__link,
  .dashboard-sidebar__trigger {
    padding: 0.75rem 1rem;
  }

  .public-nav__container {
    padding: 0 1rem;
  }

  .public-nav__mobile {
    padding: 1rem;
  }
}

/* Medium Devices - Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-sidebar {
    width: var(--sidebar-width-tablet);
  }

  .dashboard-content-area {
    margin-left: 0;
  }

  .dashboard-wrapper.sidebar-collapsed .dashboard-content-area {
    margin-left: 0;
  }

  /* Show collapse button on tablets */
  .dashboard-sidebar__collapse {
    display: flex;
  }

  /* Tablet-specific navigation improvements */
  .public-nav__desktop {
    display: none;
  }

  .public-nav__mobile-toggle {
    display: flex;
  }

  /* Optimize touch targets for tablets */
  .dashboard-sidebar__link,
  .dashboard-sidebar__trigger {
    min-height: 40px;
    padding: 0.625rem 1rem;
  }

  .public-nav__mobile-link {
    min-height: 40px;
    padding: 0.625rem 1rem;
  }
}

/* Large Devices - Desktop (1024px+) */
@media (min-width: 1024px) {
  .dashboard-sidebar {
    width: var(--sidebar-width-desktop);
    transform: translateX(0);
  }

  .dashboard-content-area {
    margin-left: var(--sidebar-width-desktop);
  }

  .dashboard-wrapper.sidebar-collapsed .dashboard-content-area {
    margin-left: var(--sidebar-width-collapsed);
  }

  .dashboard-sidebar__toggle,
  .dashboard-sidebar__overlay {
    display: none;
  }

  .public-nav__mobile-toggle,
  .public-nav__mobile {
    display: none;
  }

  .public-nav__desktop {
    display: flex;
  }
}

/* Extra Large Devices (1200px+) */
@media (min-width: 1200px) {
  .dashboard-sidebar {
    width: 300px;
  }

  .dashboard-content-area {
    margin-left: 300px;
  }

  .dashboard-wrapper.sidebar-collapsed .dashboard-content-area {
    margin-left: var(--sidebar-width-collapsed);
  }

  .dashboard-sidebar__link,
  .dashboard-sidebar__trigger {
    padding: 0.875rem 1.25rem;
  }
}

/* Portrait Orientation Specific */
@media (orientation: portrait) {
  /* Optimize for portrait mode */
  .dashboard-sidebar {
    max-height: 100vh;
    overflow-y: auto;
  }

  .public-nav__mobile {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  /* Increase touch targets in portrait */
  @media (max-width: 1023px) {
    .dashboard-sidebar__link,
    .dashboard-sidebar__trigger,
    .public-nav__mobile-link {
      min-height: 44px;
    }
  }
}

/* Landscape Orientation Specific */
@media (orientation: landscape) {
  /* Optimize for landscape mode */
  @media (max-width: 1023px) {
    .dashboard-sidebar {
      width: min(var(--sidebar-width-mobile), 40vw);
    }

    /* Reduce vertical spacing in landscape */
    .dashboard-sidebar__link,
    .dashboard-sidebar__trigger {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      min-height: 36px;
    }

    .dashboard-sidebar__item {
      margin-bottom: 0.125rem;
    }

    .public-nav__mobile-link {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      min-height: 36px;
    }
  }

  /* Landscape phone specific */
  @media (max-height: 500px) {
    .dashboard-sidebar__header {
      padding: 0.5rem;
      min-height: 40px;
    }

    .dashboard-sidebar__logo {
      font-size: 0.875rem;
    }
  }
}

/* High DPI / Retina Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .dashboard-sidebar__toggle,
  .public-nav__mobile-toggle {
    /* Slightly larger touch targets on high DPI */
    min-width: 48px;
    min-height: 48px;
  }

  /* Sharper borders and shadows */
  .dashboard-sidebar {
    border-right: 0.5px solid rgba(255, 255, 255, 0.2);
  }

  .public-nav {
    border-bottom: 0.5px solid var(--brand-border);
  }
}

/* Touch Device Optimizations */
@media (pointer: coarse) {
  /* Increase touch targets for coarse pointers (touch) */
  .dashboard-sidebar__link,
  .dashboard-sidebar__trigger,
  .public-nav__mobile-link,
  .public-nav__mobile-expandable-trigger {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }

  /* Add more spacing between interactive elements */
  .dashboard-sidebar__item {
    margin-bottom: 0.25rem;
  }

  .public-nav__mobile-item {
    margin-bottom: 0.25rem;
  }
}

/* Fine Pointer Optimizations (mouse, trackpad) */
@media (pointer: fine) {
  /* Smaller, more precise targets for fine pointers */
  .dashboard-sidebar__link,
  .dashboard-sidebar__trigger {
    min-height: 36px;
    padding: 0.625rem 1rem;
  }

  /* Enhanced hover states */
  .dashboard-sidebar__link:hover,
  .dashboard-sidebar__trigger:hover {
    transform: translateX(4px);
  }
}

/* Hover Capability Detection */
@media (hover: hover) {
  /* Enhanced hover effects for devices that support hover */
  .dashboard-sidebar__link:hover {
    background: var(--brand-primary-hover);
    transform: translateX(2px);
  }

  .dashboard-sidebar__trigger:hover {
    background: var(--brand-primary-hover);
  }

  .public-nav__dropdown-trigger:hover {
    background: var(--brand-surface-hover, rgba(0, 0, 0, 0.05));
  }
}

@media (hover: none) {
  /* Remove hover effects for touch devices */
  .dashboard-sidebar__link:hover,
  .dashboard-sidebar__trigger:hover,
  .public-nav__dropdown-trigger:hover {
    transform: none;
    background: inherit;
  }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .dashboard-sidebar,
  .dashboard-sidebar__link,
  .dashboard-sidebar__trigger,
  .dashboard-sidebar__submenu,
  .public-nav__mobile,
  .public-nav__dropdown {
    transition: none;
    animation: none;
  }

  .dashboard-sidebar__expand-icon,
  .public-nav__mobile-expand-icon {
    transition: none;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .dashboard-sidebar {
    border-right: 2px solid;
  }

  .dashboard-sidebar__link,
  .dashboard-sidebar__trigger {
    border: 1px solid transparent;
  }

  .dashboard-sidebar__link:focus,
  .dashboard-sidebar__trigger:focus {
    border-color: currentColor;
    outline: 2px solid;
  }
}

/* Dark Mode Adaptations */
@media (prefers-color-scheme: dark) {
  .dashboard-sidebar__overlay {
    background: rgba(0, 0, 0, 0.7);
  }

  .public-nav__mobile {
    background: var(--brand-surface-dark, #1a1a1a);
  }
}

/* Print Styles */
@media print {
  .dashboard-sidebar,
  .dashboard-sidebar__toggle,
  .dashboard-sidebar__overlay,
  .public-nav__mobile,
  .public-nav__mobile-toggle {
    display: none !important;
  }

  .dashboard-content-area {
    margin-left: 0 !important;
  }
}

/* Foldable Device Support */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* Optimize for foldable devices in portrait mode */
  .dashboard-sidebar {
    width: min(320px, 45vw);
  }
}

/* Ultra-wide Display Support */
@media (min-width: 1400px) {
  .dashboard-sidebar {
    width: 320px;
  }

  .dashboard-content-area {
    margin-left: 320px;
  }

  .dashboard-wrapper.sidebar-collapsed .dashboard-content-area {
    margin-left: var(--sidebar-width-collapsed);
  }
}