/* Pineapple Mobile Template Footer Styles - tuned for menu available until footer edge */
:root {
  --pineapple-footer-height: 5.1rem;
  --pineapple-footer-gap: 0.25rem; /* very small gap between menu end and footer */
}

/* Footer positioned at bottom */
.pineapple-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  height: var(--pineapple-footer-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-radius: 100px 100px 0 0;
  background-color: #fdfdfd;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}

/* Footer internal layout */
.pineapple-footer-left-side,
.pineapple-footer-right-side {
  display: flex;
  align-items: center;
}

.pineapple-footer-right-side { margin-left: auto; }

/* Ensure main content and sidebar end above the footer */
/* Sidebar: limit height to viewport minus footer and allow scrolling */
.xaf-sidebar.sidebar {
  box-sizing: border-box;
  /* allow the sidebar to take full height down to just above the footer */
  max-height: calc(100vh - var(--pineapple-footer-height) - var(--pineapple-footer-gap));
  padding-bottom: calc(var(--pineapple-footer-gap)); /* only a tiny padding so last item is visible above footer */
  overflow-y: auto !important;
}

/* Remove/neutralize extra spacer that previously pushed content up */
.sidebar-sm-shadow {
  margin-bottom: 0 !important;
  height: 0 !important;
}

/* Tabbed / main content: add bottom padding so content isn't hidden */
.pineapple-main-content,
#main-view-content.pineapple-main-content,
.w-100.overflow-auto.pineapple-main-content {
  padding-bottom: calc(var(--pineapple-footer-height) + var(--pineapple-footer-gap)) !important;
}

/* Small adjustments for mobile to ensure minimal gap */
@media (max-width: 768px) {
  :root { --pineapple-footer-height: 5.5rem; --pineapple-footer-gap: 0.12rem; }
  .pineapple-footer { padding-left: 0.75rem; padding-right: 0.75rem; }
  .xaf-sidebar.sidebar { max-height: calc(100vh - var(--pineapple-footer-height) - var(--pineapple-footer-gap)); padding-bottom: calc(var(--pineapple-footer-gap)); }
}

/* ONLY for very small phone screens: remove ALL gaps so footer touches all edges */
@media (max-width: 480px) and (max-height: 896px) {
  :root {
    --pineapple-footer-gap: 0;
    --pineapple-footer-height: 5.5rem;
  }

  /* Footer full width with absolutely no spacing on any edge */
  .pineapple-footer {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Override any body/html margins that might create gaps */
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  html {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Sidebar can extend down to the footer; no extra padding */
  .xaf-sidebar.sidebar {
    padding-bottom: 0 !important;
    max-height: calc(100vh - var(--pineapple-footer-height)) !important;
  }

  /* Remove any spacer under sidebar */
  .sidebar-sm-shadow {
    margin-bottom: 0 !important;
    height: 0 !important;
  }

  /* Main content: only enough padding to keep content above footer */
  .pineapple-main-content,
  #main-view-content.pineapple-main-content,
  .w-100.overflow-auto.pineapple-main-content {
    padding-bottom: calc(var(--pineapple-footer-height)) !important;
  }

  /* Ensure viewport takes full width */
  * {
    box-sizing: border-box;
  }
}

/* Strong overrides for handhelds: remove all gaps around footer */
@media (max-width: 480px), (pointer:coarse) {
  /* Ensure page wrappers don't add spacing */
  html, body, #main-window-template-component, .app, .xaf-flex-auto, .xaf-sidebar {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Footer flush to edges */
  .pineapple-footer {
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
  }

  /* Sidebar should extend down to the footer, no extra padding */
  .xaf-sidebar.sidebar {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    max-height: calc(100vh - var(--pineapple-footer-height)) !important;
  }

  /* Remove any spacer under sidebar */
  .sidebar-sm-shadow { display: none !important; }

  /* Main content keep exactly footer height padding */
  .pineapple-main-content,
  #main-view-content.pineapple-main-content,
  .w-100.overflow-auto.pineapple-main-content {
    padding-bottom: calc(var(--pineapple-footer-height)) !important;
    margin-bottom: 0 !important;
  }
}
/* Final flush fixes for very small screens: remove any remaining side/bottom gaps */
@media (max-width: 480px) {
  /* Ensure viewport and app sections occupy full width/height */
  html, body, #main-window-template-component, .app {
    width: 100vw !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* Footer flush to viewport edges */
  .pineapple-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
  }

  /* Remove any container corners or gaps in sidebar */
  .xaf-sidebar.sidebar, .xaf-sidebar.sidebar > * {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Sidebar full height down to footer */
  .xaf-sidebar.sidebar {
    max-height: calc(100vh - var(--pineapple-footer-height)) !important;
    padding-bottom: 0 !important;
  }

  /* Remove any inner spacer elements that add gap */
  .sidebar-sm-shadow, .about-info, .xaf-sidebar .about-info {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
  }

  /* Main content spacing exactly equals footer height */
  .pineapple-main-content,
  #main-view-content.pineapple-main-content,
  .w-100.overflow-auto.pineapple-main-content {
    padding-bottom: calc(var(--pineapple-footer-height)) !important;
    margin-bottom: 0 !important;
  }
}

/* Desktop / normal-screen footer: rounded card look with padding.
   Keeps handheld flush rules intact (min-width so small devices unaffected). */
@media (min-width: 768px) {
  .pineapple-footer {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
    border-radius: 100px;
    padding: 0.5rem 1rem;
    background-clip: padding-box;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    -webkit-backdrop-filter: blur(4px); /* Add for Safari support */
    backdrop-filter: blur(4px);
  }

  /* Keep main content above the desktop footer */
  .pineapple-main-content {
    padding-bottom: calc(var(--pineapple-footer-height, 56px) + 1rem);
  }

  /* Ensure sidebar scroll stops above the padded footer on desktop */
  .xaf-sidebar.sidebar {
    max-height: calc(100vh - (var(--pineapple-footer-height, 56px) + 2rem));
  }
}

/* ========================================
   Footer Dropdown Menu Positioning
   ======================================== */

/* Force ALL dropdown menus in footer to open UPWARD
   This prevents menus from falling off the bottom of the screen
   since the footer is positioned at the bottom of the viewport
   
   This covers:
   - AccountComponent dropdowns
   - SettingsComponent dropdowns  
   - Any other dropdown menus in the footer */

.pineapple-footer .dropdown-menu,
.pineapple-footer .dxbl-dropdown-menu,
.pineapple-footer .dxbs-dropdown-menu {
  /* Position dropdown above the trigger button */
  bottom: 100% !important;
  top: auto !important;
  
  /* Add spacing between button and menu */
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
  
  /* Transform origin for animations */
  transform-origin: bottom center !important;
}

/* DevExpress Blazor specific dropdown positioning */
.pineapple-footer .dxbl-dropdown,
.pineapple-footer [class*="dxbl-dropdown"] {
  /* Ensure dropdown container respects footer boundaries */
  bottom: 100% !important;
  top: auto !important;
}

/* Account component specific dropdown */
.pineapple-footer .account-component .dropdown-menu,
.pineapple-footer [class*="account"] .dropdown-menu {
  /* Force upward opening */
  bottom: 100% !important;
  top: auto !important;
  margin-bottom: 0.5rem !important;
}

/* Ensure dropdown doesn't clip at viewport top */
.pineapple-footer .dropdown-menu {
  max-height: calc(100vh - var(--pineapple-footer-height) - 2rem) !important;
  overflow-y: auto !important;
}

/* Settings component dropdown (if exists) */
.pineapple-footer .settings-component .dropdown-menu,
.pineapple-footer [class*="settings"] .dropdown-menu,
.pineapple-footer .dxbl-settings .dropdown-menu,
.pineapple-footer .settings-dropdown .dropdown-menu,
.pineapple-footer .settings-menu .dropdown-menu,
.pineapple-footer .dropdown:has([data-settings]) .dropdown-menu,
.pineapple-footer .dropdown:has(.settings-icon) .dropdown-menu,
.pineapple-footer .dropdown:has(.dxbl-settings-icon) .dropdown-menu {
  bottom: 100% !important;
  top: auto !important;
  margin-bottom: 0.5rem !important;
}

/* Mobile specific adjustments for dropdowns */
@media (max-width: 768px) {
  .pineapple-footer .dropdown-menu,
  .pineapple-footer .dxbl-dropdown-menu {
    /* On mobile, dropdown should take more screen space */
    max-height: calc(100vh - var(--pineapple-footer-height) - 1rem) !important;
    
    /* Ensure menu is wide enough on mobile */
    min-width: 200px !important;
  }
}

/* Very small screens: dropdown takes most of available height */
@media (max-width: 480px) {
  .pineapple-footer .dropdown-menu,
  .pineapple-footer .dxbl-dropdown-menu {
    max-height: calc(100vh - var(--pineapple-footer-height) - 0.5rem) !important;
    margin-bottom: 0.25rem !important;
  }
}