/* =============================================================
   EduHub — Edge-to-Edge & Safe Area CSS
   Covers: Android 8-16, Chrome 67-150+, Samsung One UI 6-8
   
   Why this exists:
   - Chrome 135+ (Android 15/16) draws edge-to-edge by default
   - Android 16 removes the opt-out entirely
   - Without this, bottom-nav hides under gesture navigation bar
   - env(safe-area-inset-*) is supported from Chrome 69+ (Android 9+)
   - On Android 8 / Chrome 67-68: fallback values (0px) apply safely
============================================================= */

/* 1. Root safe area custom properties
      Gives consistent access across all stylesheets */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
}

/* 2. Bottom Navigation bar — the most critical element
      Must NOT be hidden under gesture nav bar or home indicator */
.bottom-nav {
  /* Use calc so existing padding is preserved + safe area added on top */
  padding-bottom: calc(var(--base-nav-padding, 1rem) + var(--safe-bottom));
}

/* 3. Fixed bottom elements in general */
[style*="position: fixed"][style*="bottom: 0"],
[style*="position:fixed"][style*="bottom:0"] {
  padding-bottom: var(--safe-bottom);
}

/* 4. Scrollable main content area — avoid last item clipping
      under the bottom nav on edge-to-edge devices */
.main-content,
.content-wrapper,
.page-content,
.container {
  scroll-padding-bottom: calc(80px + var(--safe-bottom));
}

/* 5. Body safe area top padding — status bar on notch phones */
body {
  /* Only apply if the page uses viewport-fit=cover */
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* 6. Toast notifications — keep above gesture bar */
div[style*="position: fixed"][style*="bottom: 24px"],
div[style*="position:fixed"][style*="bottom:24px"] {
  bottom: calc(24px + var(--safe-bottom)) !important;
}

/* 7. Modals / overlays — full bleed still safe */
.modal-overlay,
div[style*="position: fixed"][style*="inset: 0"] {
  /* No padding needed — modals are full screen; content inside should have padding */
}

/* 8. Device-specific: Samsung One UI 8 extra chin fix
      One UI 8 + 3-button nav has an extra bar that Chrome misreports */
@supports (padding: max(0px)) {
  .bottom-nav {
    padding-bottom: max(1rem, calc(1rem + var(--safe-bottom)));
  }
}