@import "/shared/unified-navbar.css";

/* =============================================================================
   GENZ UNIVERSITY — ZERO-OVERLAP ANDROID & MOBILE RESPONSIVE ENGINE
   Strict 8-Layer Z-Index & System Bar Safe-Area Inset System
   ============================================================================= */

:root {
  /* Android Status Bar Notch / Punch Hole (Top Safe Area) */
  --android-safe-top: max(env(safe-area-inset-top, 0px), 38px);

  /* Android Gesture Bar / 3-Button System Bar (Bottom Safe Area) */
  --android-safe-bottom: max(env(safe-area-inset-bottom, 0px), 16px);

  /* Standard Mobile Component Dimensions */
  --android-topbar-h: 56px;
  --android-bottomnav-h: 64px;
  --android-sidebar-w: 280px;

  /* Total Heights including System Insets */
  --android-header-total: calc(
    var(--android-topbar-h) + var(--android-safe-top)
  );
  --android-footer-total: calc(
    var(--android-bottomnav-h) + var(--android-safe-bottom)
  );

  /* Critical Clearance Padding for Body / Scroll Container (prevents bottom nav & FAB overlap) */
  --android-content-bottom-pad: calc(var(--android-footer-total) + 64px);

  /* Strict 8-Layer Z-Index Scale (Zero Collision) */
  --z-content-base: 1;
  --z-topbar-nav: 1000;
  --z-bottom-nav: 1050;
  --z-floating-action: 1100;
  --z-sidebar-backdrop: 10000;
  --z-sidebar-drawer: 10001;
  --z-modal-backdrop: 20000;
  --z-modal-dialog: 20001;
  --z-toast-alert: 99999;
}

/* Global Horizontal Clip to guarantee position: sticky functions on all viewports */
html,
body {
  overflow-x: clip;
}

/* Ensure Android App Bar & Emergency SOS Header stays pinned */
header.android-app-bar,
.android-app-bar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: var(--z-topbar-nav) !important;
}

/* =============================================================================
   MOBILE VIEWPORT SPECIFIC RULES (<= 1024px)
   ============================================================================= */
@media (max-width: 1024px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  /* Body & Main Scroll Clearance (only for pages with bottom navigation) */
  body:not(.login-page):not(.no-bottom-nav):not(.notices-page):not(
      .support-chat-page
    ):not(.no-bottom-pad):not(.master-control-body),
  .portal-main-content:not(.no-bottom-pad),
  body:not(.login-page):not(.no-bottom-nav):not(.notices-page):not(
      .support-chat-page
    ):not(.no-bottom-pad)
    .main-wrapper:not(.no-bottom-pad),
  main:not(.main-wrapper):not(.no-bottom-pad):not(.scroll-body),
  .portal-stage:not(.no-bottom-pad),
  .content-container:not(.no-bottom-pad),
  .container:not(.no-bottom-pad) {
    padding-bottom: var(--android-content-bottom-pad) !important;
    box-sizing: border-box !important;
  }

  /* Full-bleed & pages without bottom nav: Eliminate excessive bottom clearance dead space */
  body.no-bottom-nav,
  body.notices-page,
  body.support-chat-page,
  body.no-bottom-pad,
  body.master-control-body,
  .no-bottom-pad,
  .main-wrapper.no-bottom-pad,
  body:has(.main-wrapper) .main-wrapper,
  body.notices-page .app-wrapper,
  body.notices-page .main-body,
  body.support-chat-page .app-container,
  body.support-chat-page main,
  body.support-chat-page .scroll-body {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ---------------------------------------------------------------------------
     1. FIXED TOPBAR & STATUS BAR VISIBILITY PROTECTION
     --------------------------------------------------------------------------- */
  header:not(.mobile-sticky-header):not(.navbar):not(.bec-style-navbar):not(
      .mobile-app-header
    ):not(.main-top-header):not(.android-app-bar):not(.top-header-bar),
  .top-header,
  header.topbar,
  .app-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: var(--z-topbar-nav) !important;
    padding-top: var(--android-safe-top) !important;
    min-height: var(--android-header-total) !important;
    box-sizing: border-box !important;
  }

  /* Android Native App Bar & Emergency SOS Header: Guaranteed Sticky at viewport top */
  header.android-app-bar,
  .android-app-bar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: var(--z-topbar-nav) !important;
  }

  /* Prevent inside-page title sections (.topbar inside container/main) from sticking and colliding */
  div.topbar,
  main .topbar,
  .container .topbar {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding-top: 0 !important;
    min-height: auto !important;
    z-index: var(--z-content-base) !important;
  }

  /* Mobile Sticky Header on Student Dashboard & HOD Portals: Fixed in flow with zero gap */
  .mobile-sticky-header,
  .mobile-app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: var(--z-topbar-nav) !important;
    padding-top: max(env(safe-area-inset-top, 0px), 38px) !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }

  /* Header Top Row Content Alignment */
  .mobile-header-top-bar,
  header > .header-wrap,
  header > .nav-inner,
  .topbar-content {
    min-height: var(--android-topbar-h) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Brand Title Auto-Truncation so refresh/avatar/notif buttons are never pushed off */
  .mobile-brand-text,
  .mobile-header-brand .brand-titles,
  .topbar-brand-title {
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Status Bar Contrast Protector for light/white headers:
     When navbar is white or light, this dark navy strip ensures Android's 
     white status bar clock (12:17), battery, and network icons are 100% visible */
  header:not(.mobile-sticky-header):not([style*="background: linear"]):not(
      [style*="background-color: #0"]
    ):not([style*="background-color: rgb(1"])::before,
  .topbar-light::before,
  .white-nav::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--android-safe-top);
    background: #0f172a !important;
    z-index: calc(var(--z-topbar-nav) + 5);
    pointer-events: none;
  }

  /* Hero Banner Clearance below Topbar: ZERO GAP on sticky/in-flow heroes to eliminate white space */
  .mobile-campus-hero,
  .scroll-body .hero-banner,
  .hero-banner {
    margin-top: 0 !important;
  }

  .classroom-hero,
  body:not(.login-page) .hero-section,
  .dashboard-hero {
    margin-top: var(--android-header-total) !important;
  }

  /* Profile Card Negative Margin Scaling */
  .profile-hero-card,
  .profile-banner-card {
    margin-top: -36px !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* ---------------------------------------------------------------------------
     2. FIXED BOTTOM NAVIGATION BAR
     --------------------------------------------------------------------------- */
  .bottom-nav-bar,
  .bottom-nav,
  .mobile-bottom-nav,
  .portal-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--android-footer-total) !important;
    padding-bottom: var(--android-safe-bottom) !important;
    z-index: var(--z-bottom-nav) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
  }

  /* Bottom Nav Interactive Tab Target */
  .bottom-nav-item,
  .bottom-nav-bar a,
  .mobile-bottom-nav a {
    min-height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ---------------------------------------------------------------------------
     3. FLOATING ACTION BUTTONS (Emergency SOS, AI Chat, WhatsApp)
     --------------------------------------------------------------------------- */
  #sos-draggable-widget-root,
  .priya-chat-trigger,
  .floating-action-btn,
  .fab-action-btn {
    bottom: calc(var(--android-footer-total) + 16px) !important;
    z-index: var(--z-floating-action) !important;
  }

  /* ---------------------------------------------------------------------------
     4. SLIDE-OUT SIDEBAR DRAWER (LAYER 4 & 5)
     --------------------------------------------------------------------------- */
  .mobile-drawer-overlay,
  .drawer-backdrop,
  .sidebar-overlay,
  .sidebar-backdrop,
  #sidebar-backdrop,
  .bec-sb-backdrop {
    z-index: var(--z-sidebar-backdrop) !important;
  }

  .mobile-app-drawer,
  .mobile-drawer,
  .app-sidebar,
  #app-sidebar,
  .sidebar,
  #bec-sidebar-container {
    width: var(--android-sidebar-w) !important;
    max-width: 85vw !important;
    z-index: var(--z-sidebar-drawer) !important;
    box-sizing: border-box !important;
  }

  .overview-quick-grids,
  .quick-grids,
  .section-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------------------------
     5. MODALS & POPUPS (LAYER 6 & 6B)
     --------------------------------------------------------------------------- */
  .portal-modal-backdrop,
  .modal-overlay,
  .modal-backdrop {
    z-index: var(--z-modal-backdrop) !important;
  }

  .portal-modal-card,
  .modal-card,
  .modal-box,
  .modal-sheet,
  .modal-dialog {
    z-index: var(--z-modal-dialog) !important;
    max-width: 95vw !important;
    max-height: calc(100dvh - var(--android-safe-top) - 32px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------------------------
     6. RESPONSIVE TABLES & HORIZONTAL SWIPES
     --------------------------------------------------------------------------- */
  table,
  .data-table,
  .responsive-table,
  .table-wrap,
  .table-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ---------------------------------------------------------------------------
     7. VIRTUAL KEYBOARD OVERLAP PREVENTION
     Auto-hide bottom nav bar while typing in forms
     --------------------------------------------------------------------------- */
  body.android-keyboard-active .bottom-nav-bar,
  body.android-keyboard-active .bottom-nav,
  body.android-keyboard-active .mobile-bottom-nav,
  body.android-keyboard-active .portal-bottom-nav,
  body.android-keyboard-active #sos-draggable-widget-root,
  body.android-keyboard-active .sos-floating-btn,
  form:focus-within ~ .bottom-nav-bar,
  form:focus-within ~ .bottom-nav,
  form:focus-within ~ .mobile-bottom-nav {
    display: none !important;
  }

  /* Modals: dynamically attach above keyboard with smooth vertical scrolling */
  body.android-keyboard-active .modal-backdrop,
  body.android-keyboard-active .portal-modal-backdrop,
  body.android-keyboard-active .modal-overlay {
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 8px !important;
    padding-bottom: 24px !important;
  }

  body.android-keyboard-active .modal-box,
  body.android-keyboard-active .modal-card,
  body.android-keyboard-active .modal-content,
  body.android-keyboard-active .portal-modal-card {
    max-height: calc(
      100vh - var(--android-keyboard-height, 0px) - 16px
    ) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 4px auto !important;
  }

  body.android-keyboard-active .modal-body,
  body.android-keyboard-active .portal-modal-body {
    max-height: calc(
      100vh - var(--android-keyboard-height, 0px) - 140px
    ) !important;
    max-height: calc(100dvh - 140px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Touch Target Safety (Minimum 44px) */
  button,
  .btn,
  .tab-btn,
  .nav-btn,
  .hero-btn {
    min-height: 40px;
  }

  /* Grid Collapse on Mobile Screens */
  .stats-grid,
  .kpi-grid,
  .metrics-grid,
  .summary-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 420px) {
  .stats-grid,
  .kpi-grid,
  .metrics-grid,
  .summary-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* =============================================================================
   STRICT PLATFORM SEPARATION: ANDROID APP vs DESKTOP WEB
   ============================================================================= */
.is-android-app .desktop-hamburger-btn,
.is-android-app .mobile-hamburger-btn,
.is-android-app .navbar-menu-btn,
.is-android-app .mobile-menu-btn,
.is-android-app .mobile-drawer-overlay,
.is-android-app .mobile-app-drawer,
.is-android-app #mobileRefreshBtn,
.is-android-app .mobile-action-btn[onclick*="toggleMobileSearch"],
.is-android-app .mobile-action-btn[onclick*="portalLogout"],
.is-android-app .mobile-search-bar,
.is-android-app #mobileSearchBar,
.is-android-app #bottomNavMenu,
.is-android-app .bottom-nav-menu,
.is-android-app .bottom-nav-logout,
.is-android-app .bottom-nav-item.bottom-nav-logout {
  display: none !important;
}

@media (max-width: 1024px) {
  .desktop-hamburger-btn,
  .mobile-hamburger-btn,
  .navbar-menu-btn,
  .mobile-menu-btn,
  #bottomNavMenu,
  .bottom-nav-menu,
  .bottom-nav-logout,
  .bottom-nav-item.bottom-nav-logout {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .desktop-hamburger-btn {
    display: inline-flex !important;
  }
}