/* =============================================================================
   GENZ UNIVERSITY — UNIFIED BEC-STYLE NAVBAR & HEADER DESIGN SYSTEM
   Standardized across Student, Attendance, Classroom, HOD, Warden, Director,
   and Security Portals matching the official BEC Reference Architecture.
   ============================================================================= */

/* Disable pull-to-refresh overscroll reload across entire application */
html,
body {
  overscroll-behavior-y: none !important;
  overscroll-behavior: none !important;
}

/* 1. Master Header Gradient & Safe-Area System */
header:not(.login-page *):not(.login-card *):not(.desktop-topbar):not(.sidebar *):not(.android-app-bar),
.mobile-sticky-header,
.top-header,
.warden-topbar,
.app-header,
.mobile-app-header,
.main-top-header,
.top-navbar,
.top-nav,
.navbar,
.bec-style-navbar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: linear-gradient(180deg, #009cfb 0%, #0084ea 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 16px rgba(0, 132, 234, 0.28) !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

/* Strictly hide all desktop-only header variants on mobile/tablet viewports */
@media (max-width: 1024px) {

  header.desktop-topbar,
  .desktop-topbar,
  .desktop-sidebar,
  .desktop-hero-banner,
  .desktop-bottom-row,
  .main-top-header,
  header.main-top-header {
    display: none !important;
  }
}

@media (min-width: 1025px) {

  .mobile-app-header,
  header.mobile-app-header,
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* Remove dark status bar block or pseudos */
header::before,
header::after,
.mobile-sticky-header::before,
.mobile-sticky-header::after,
.top-header::before,
.warden-topbar::before,
.app-header::before,
.mobile-app-header::before,
.main-top-header::before,
.desktop-topbar::before,
.navbar::before {
  display: none !important;
  content: none !important;
}

/* Mobile & Android System Bar Inset Rules */
@media (max-width: 1024px) {

  header:not(.login-page *):not(.login-card *):not(.desktop-topbar):not(.sidebar *):not(.main-top-header):not(.android-app-bar):not(.bec-style-navbar),
  .mobile-sticky-header,
  .top-header,
  .warden-topbar,
  .app-header,
  .mobile-app-header,
  .top-navbar,
  .top-nav,
  .navbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding-top: max(env(safe-area-inset-top, 0px), 38px) !important;
    padding-bottom: 8px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    min-height: calc(56px + max(env(safe-area-inset-top, 0px), 38px)) !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* 2. Left Group & Hamburger Buttons (Circular Glass Button) */
.mobile-hamburger-btn,
.btn-hamburger,
.mobile-menu-btn,
.btn-toggle-sidebar,
.mobile-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
  padding: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition: background 0.18s ease, transform 0.12s ease !important;
  flex-shrink: 0 !important;
}

.mobile-hamburger-btn:active,
.btn-hamburger:active,
.mobile-menu-btn:active,
.btn-toggle-sidebar:active,
.mobile-icon-btn:active {
  background: rgba(255, 255, 255, 0.28) !important;
  transform: scale(0.95) !important;
}

.mobile-hamburger-btn i,
.btn-hamburger i,
.btn-toggle-sidebar i,
.mobile-icon-btn i,
.mobile-menu-btn svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  font-size: 1.15rem !important;
}

/* 3. Circular White Logo Badges */
.navbar-logo-badge,
.mobile-brand-logo,
.brand-logo-img,
.brand-icon,
.brand-logo,
.brand-badge,
.college-logo-img,
.brand-wrap .brand-logo,
.brand-group .brand-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
  padding: 2px !important;
  object-fit: contain !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.brand-icon img,
.brand-logo img,
.brand-badge img,
.brand-wrap img,
.navbar-brand-logo,
.navbar-logo-badge img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  display: block !important;
}

.brand-icon i,
.brand-badge i,
.brand-logo i,
.navbar-logo-badge i,
.brand-wrap .brand-badge i {
  color: #1d4ed8 !important;
  font-size: 1.15rem !important;
  display: inline-block !important;
}

/* 4. Brand Typography */
.mobile-brand-text h1,
.brand-text h1,
.brand-info h1,
.header-left-title h1,
.header-title-group h2,
.mobile-brand-title h2,
.navbar-logo-text,
.brand-title,
.college-title,
header h1 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100vw - 120px) !important;
}

/* Hide floating standalone language widget that collides with header capsule */
#genz-lang-btn,
.floating-lang-btn {
  display: none !important;
}

.mobile-brand-text p,
.brand-text p,
.brand-info p,
.header-left-title p,
.header-title-group p,
.mobile-brand-title p,
.brand-sub,
.college-sub,
.top-header-info,
header p {
  font-size: 0.68rem !important;
  color: #e0f2fe !important;
  font-weight: 600 !important;
  margin: 2px 0 0 0 !important;
  white-space: nowrap !important;
}

/* 5. Right-Side Unified Translucent Glass Capsule (Submodules: Hostel, Attendance, Classroom, HOD, etc.) */
.header-meta,
.header-right-actions,
.navbar-right,
.nav-actions,
.topbar-actions,
.header-nav,
.mobile-header-icons,
.header-controls-section,
.header-right {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 9999px !important;
  padding: 2px 4px 2px 8px !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  flex-shrink: 0 !important;
}

/* Capsule child action buttons */
.mobile-action-btn,
.icon-btn-header,
.btn-nav,
.navbar-portal-btn,
.btn-portal,
.btn-ghost,
.btn-chime,
.btn-back-portal {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
  transition: all 0.18s ease !important;
}

.mobile-action-btn:active,
.icon-btn-header:active,
.navbar-portal-btn:active,
.btn-portal:active,
.btn-chime:active {
  transform: scale(0.92) !important;
  opacity: 0.85 !important;
}

.mobile-action-btn i,
.icon-btn-header i,
.navbar-portal-btn i,
.navbar-portal-btn svg,
.btn-portal i,
.btn-chime i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* 6. Profile Avatar Inside Capsule */
.mobile-header-profile-pill,
.desktop-user-pill,
.profile-avatar-btn,
.user-badge,
.user-avatar-capsule,
.user-profile-badge,
.user-profile-chip,
.header-user {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 6px !important;
  cursor: pointer !important;
}

.mobile-header-profile-pill img,
.avatar-circle,
.sidebar-avatar,
.user-avatar,
.desktop-user-avatar,
.student-avatar-circle,
.user-profile-avatar,
.user-avatar-mini,
.user-avatar-capsule .user-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  object-fit: cover !important;
}

/* Hide overflowing desktop elements on mobile */
@media (max-width: 1024px) {

  .user-info-desktop,
  .user-details,
  .desktop-user-details,
  .profile-name-text,
  .avatar-chevron,
  .navbar-portal-btn-label,
  .header-search,
  .header-pills,
  .dept-selector-wrap,
  .desktop-nav,
  .hostel-scope-container,
  .clock-pill,
  .search-input-wrap,
  .select-lang,
  .lang-select-dropdown,
  .header-meta select,
  .nav-actions select,
  .duty-badge,
  .duty-chip,
  .user-role-label {
    display: none !important;
  }

  .mobile-header-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  .mobile-brand-text {
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

/* =============================================================================
   STUDENT DASHBOARD — EXACT BEC REFERENCE HEADER & ACTION BUTTONS
   Matching media_1792727005823.jpg: [☰] [(Logo)] BEC [🔍] [🔄] [🔔] [(Avatar) 2301316095] [➔|]
   ============================================================================= */
.mobile-sticky-header .mobile-header-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 6px 10px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

.mobile-sticky-header .mobile-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

.mobile-sticky-header .mobile-hamburger-btn {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
}

.mobile-sticky-header .mobile-brand-logo {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15) !important;
  padding: 1px !important;
  object-fit: contain !important;
  display: block !important;
}

.mobile-sticky-header .mobile-brand-text h1 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

.mobile-sticky-header .mobile-brand-text p {
  display: none !important;
}

/* Actions Container on Dashboard: NOT a single pill! Individual buttons matching BEC */
.mobile-sticky-header .mobile-header-actions {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

.mobile-sticky-header .mobile-action-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.82rem !important;
  padding: 0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  position: relative !important;
}

.mobile-sticky-header .mobile-action-btn:active {
  transform: scale(0.92) !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Mobile Header Actions: Refresh, Search, and Logout are STRICTLY HIDDEN on Android Mobile */
.mobile-sticky-header #mobileRefreshBtn,
.mobile-sticky-header .mobile-action-btn[onclick*="toggleMobileSearch"],
.mobile-sticky-header .mobile-action-btn[onclick*="portalLogout"],
.mobile-sticky-header .mobile-action-btn.btn-mobile-search,
.mobile-sticky-header .mobile-action-btn.btn-mobile-logout {
  display: none !important;
}

/* Red Notification Badge Dot */
.mobile-sticky-header .notif-badge-dot {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  border: 1.5px solid #009cfb !important;
  display: block !important;
}

/* Profile Pill Capsule: Avatar + Roll Number */
.mobile-sticky-header .mobile-header-profile-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 9999px !important;
  padding: 2px 7px 2px 2px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  height: 32px !important;
  box-sizing: border-box !important;
}

.mobile-sticky-header #mobileHeaderAvatar {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  border-radius: 50% !important;
  border: 1.5px solid #ffffff !important;
  object-fit: cover !important;
  display: block !important;
  background: #ffffff !important;
}

.mobile-sticky-header #mobileHeaderRoll {
  display: inline-block !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  line-height: 1 !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;
  }
}