/* Safe Area Insets for Mobile Browsers and PWAs */
:root {
  /* Safe area insets with fallbacks */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --mobile-nav-height: 88px;
}

/* Apply safe area padding only when explicitly needed on components */
html {
  padding: 0;
  box-sizing: border-box;
}

/* Ensure the body takes full height and accounts for safe areas */
body {
  /* Ensure the body takes at least the full viewport height */
  min-height: 100vh;
  min-height: -webkit-fill-available; /* For mobile viewport height bug */
  
  /* Prevent horizontal scrolling */
  overflow-x: hidden;
  
  /* Account for safe areas in the minimum height */
  min-height: calc(100vh - var(--safe-area-top) - var(--safe-area-bottom));
}

/* Fix for iOS 15+ where 100vh includes the address bar */
@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

/* Ensure full viewport elements respect safe areas */
.full-viewport {
  width: 100vw;
  height: 100vh;
  padding: 
    env(safe-area-inset-top, 0px) 
    env(safe-area-inset-right, 0px) 
    env(safe-area-inset-bottom, 0px) 
    env(safe-area-inset-left, 0px);
}

/* Utility classes for safe area padding */
.safe-padding {
  padding: 
    env(safe-area-inset-top, 0px) 
    env(safe-area-inset-right, 0px) 
    env(safe-area-inset-bottom, 0px) 
    env(safe-area-inset-left, 0px);
}

.safe-padding-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-padding-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Fix for fixed/fullscreen elements */
.fixed-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 
    env(safe-area-inset-top, 0px) 
    env(safe-area-inset-right, 0px) 
    env(safe-area-inset-bottom, 0px) 
    env(safe-area-inset-left, 0px);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Desktop Reset: completely remove safe area margins and mobile heights on desktop */
@media (min-width: 1024px) {
  :root {
    --safe-area-top: 0px !important;
    --safe-area-right: 0px !important;
    --safe-area-bottom: 0px !important;
    --safe-area-left: 0px !important;
    --mobile-nav-height: 0px !important;
    --mobile-ui-bottom-offset: 0px !important;
  }

  body {
    min-height: 100% !important;
    height: 100% !important;
  }
}