/* Option 1: Responsive Fullscreen Modal for Shopping List */

/* Lock background scroll when modal is open */
body.modal-open { overflow: hidden; }

/* Modal container uses flex to keep header/footer visible and middle scrollable */
#shoppingListModal .modal-content {
  width: 95%;
  max-width: 1200px !important; /* override any inline max-width */
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  max-height: 90vh; /* ensure content fits viewport with internal scrolling */
}

/* The scrollable area */
#shoppingListModal #shoppingListContent {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Sticky bottom action bar inside the scrollable area (details views) */
#shoppingListModal .sl-bottom-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(2px);
}

/* Tablet */
@media (max-width: 1024px) {
  #shoppingListModal .modal-content {
    max-width: 800px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  #shoppingListModal .modal-content {
    width: 100%;
    max-width: none !important;
    height: 100vh; /* Full viewport height */
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    padding: 1rem 1rem 0 1rem; /* Remove bottom padding, handled by button container */
    position: relative; /* Establish positioning context for absolute children */
    /* CRITICAL: Maintain flexbox layout on mobile to keep button visible */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent the modal-content itself from scrolling */
  }
  
  /* CRITICAL: In PWA mode, adjust modal height to account for bottom nav */
  body.pwa-mode #shoppingListModal .modal-content {
    /* Reduce height to make room for bottom nav - this ensures content doesn't go behind it */
    height: calc(100vh - var(--bottom-nav-height, 56px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - var(--bottom-nav-height, 56px) - env(safe-area-inset-bottom, 0px));
  }
  
  /* Header and action buttons should not shrink */
  #shoppingListModal .modal-content > h2,
  #shoppingListModal .modal-content > div:not(#shoppingListContent) {
    flex-shrink: 0;
  }
  
  /* Ensure the content area is scrollable, not the entire modal */
  #shoppingListModal #shoppingListContent {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* Add padding for better touch scrolling */
    padding-bottom: 1rem;
  }
  
  /* The button container at bottom - always visible */
  #shoppingListModal .modal-content > div:last-child {
    flex-shrink: 0; /* Prevent button area from shrinking */
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.98);
    /* Add shadow to indicate it's on top of scrollable content */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* CRITICAL: Ensure button area is above modal content but below bottom nav */
    z-index: 9050;
    position: relative;
  }

  /* Hide the X close button on mobile ONLY when NOT in PWA mode */
  /* In PWA mode, keep close button visible for better UX */
  body:not(.pwa-mode) #shoppingListModal .close {
    display: none;
  }
  
  /* In PWA mode, ensure the X close button is visible and accessible */
  /* Provide essential positioning and interaction styles for mobile */
  body.pwa-mode #shoppingListModal .close {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 9100;
  }

  /* Comfortable touch targets on mobile */
  #shoppingListModal .btn,
  #shoppingListModal input,
  #shoppingListModal select {
    min-height: 44px;
    font-size: 1rem;
  }
  
  /* Ensure the Cancel/Close button at bottom is always visible and accessible */
  /* Simplified selector for better maintainability */
  body.pwa-mode #shoppingListCancelBtn {
    display: block;
    width: 100%;
    min-height: 48px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0; /* Remove extra margin, spacing handled by container */
    /* Ensure button is clickable and visible */
    position: relative;
    z-index: 9051;
  }
  
  /* In PWA mode, add extra padding to button container to avoid overlap with bottom nav */
  body.pwa-mode #shoppingListModal .modal-content > div:last-child {
    /* Increased padding to ensure button is clearly above bottom nav */
    padding-bottom: calc(var(--bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px) + 1.5rem);
    /* Solid background for better visibility and clear separation from content above */
    background: rgba(255, 255, 255, 1);
  }
}