/* Mobile Viewport CSS Module - Centralized mobile viewport handling */
/* This file provides a sustainable solution for mobile browser viewport issues */

/* CSS Custom Properties for viewport heights with progressive enhancement */
:root {
  /* Full viewport height with fallbacks */
  --full-height: 100vh; /* Traditional viewport height (fallback) */
  --full-height: 100dvh; /* Dynamic viewport height (modern browsers) */
  --full-height: -webkit-fill-available; /* iOS Safari specific */
  
  /* Safe area insets for devices with notches/home indicators */
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-top: env(safe-area-inset-top, 0);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);
  
  /* Calculated heights accounting for safe areas */
  --content-height: calc(var(--full-height) - var(--safe-bottom));
  --content-height-with-header: calc(var(--full-height) - var(--safe-top) - var(--safe-bottom));
}

/* Utility classes for full height containers with progressive enhancement */
.full-height {
  min-height: 100vh; /* Fallback for older browsers */
  min-height: 100dvh; /* Dynamic viewport height for modern browsers */
  min-height: -webkit-fill-available; /* iOS Safari */
}

.full-height-strict {
  height: 100vh; /* Fallback */
  height: 100dvh; /* Dynamic viewport */
  height: -webkit-fill-available; /* iOS Safari */
}

/* Content containers that respect safe areas */
.safe-content {
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

.safe-content-full {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Main application container with mobile viewport fixes */
.mobile-viewport-container {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  position: relative;
}

/* Fixed bottom elements (navigation bars, toolbars) */
.bottom-fixed-safe {
  position: fixed;
  bottom: 0;
  bottom: env(safe-area-inset-bottom, 0);
  left: 0;
  right: 0;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Scrollable content areas with mobile viewport awareness */
.mobile-scroll-container {
  height: 100vh;
  height: 100dvh;
  height: -webkit-fill-available;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS only */
  .full-height,
  .mobile-viewport-container {
    min-height: -webkit-fill-available;
  }
  
  .full-height-strict,
  .mobile-scroll-container {
    height: -webkit-fill-available;
  }
}

/* Android-specific adjustments */
@supports not (-webkit-touch-callout: none) {
  /* Non-iOS devices */
  .mobile-viewport-container {
    min-height: 100dvh;
  }
}

/* Mobile-specific viewport adjustments */
@media (max-width: 768px) {
  /* Additional padding for mobile to ensure content doesn't slip off */
  .mobile-safe-padding {
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 1rem);
  }
  
  /* Adjust for mobile browser UI elements */
  .mobile-content-area {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 60px); /* Account for mobile nav bars */
  }
}

/* Utility for debugging viewport issues */
@media (prefers-color-scheme: dark) {
  .debug-viewport::after {
    content: "vh: 100vh | dvh: 100dvh | safe-bottom: " var(--safe-bottom);
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    font-size: 10px;
    z-index: 999999;
    pointer-events: none;
  }
}