/* Mobile Responsive Styles for List Pages */

/* NOTE: Modal z-index values removed - Mantine handles z-index stacking automatically.
   High z-index values (10000+) were breaking dropdown/popover visibility inside modals
   because Mantine's Combobox/Select use z-index ~300 by default.
   The bottom nav uses z-index 100, modals default to ~200, popovers to ~300. */

/* On mobile screens, make list page headers stack vertically */
@media (max-width: 768px) {
  /* Main header row - stack title and controls vertically */
  .mantine-Container-root > .mantine-Stack-root > .mantine-Group-root:first-child {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Title section - full width on mobile */
  .mantine-Container-root > .mantine-Stack-root > .mantine-Group-root:first-child > .mantine-Box-root:first-child {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  /* Controls section (search, filters, buttons) - full width and wrap */
  .mantine-Container-root > .mantine-Stack-root > .mantine-Group-root:first-child > .mantine-Group-root {
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  /* Search input - take more space on mobile */
  .mantine-Container-root .mantine-TextInput-root {
    flex: 1 1 auto !important;
    min-width: 150px !important;
  }

  /* Page title - smaller on mobile */
  .mantine-Container-root .mantine-Title-root {
    font-size: 1.5rem !important;
  }

  /* Description text - smaller on mobile */
  .mantine-Container-root .mantine-Title-root + .mantine-Text-root {
    font-size: 0.8rem !important;
  }

  /* Reduce padding in container */
  .mantine-Container-root {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Stack gap - reduce on mobile */
  .mantine-Container-root > .mantine-Stack-root {
    gap: 12px !important;
  }

  /* Add button - can be smaller on mobile */
  .mantine-Container-root .mantine-Button-root {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Hide "Advanced Filters" text on very small screens, keep icon */
  .mantine-Container-root .mantine-Button-label {
    white-space: nowrap !important;
  }
}

/* Extra small screens (phones in portrait) */
@media (max-width: 480px) {
  /* Even smaller title */
  .mantine-Container-root .mantine-Title-root {
    font-size: 1.25rem !important;
  }

  /* Stack all controls vertically */
  .mantine-Container-root > .mantine-Stack-root > .mantine-Group-root:first-child > .mantine-Group-root {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  /* Search input - flexible width */
  .mantine-Container-root .mantine-TextInput-root {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Filter button and other controls in a row below */
  .mantine-Container-root .mantine-Button-root,
  .mantine-Container-root .mantine-ActionIcon-root,
  .mantine-Container-root .mantine-Menu-root {
    order: 2 !important;
  }
}

/* Modal body padding - reduce on mobile */
@media (max-width: 768px) {
  /* Reduce padding in modal body stacks */
  .mantine-Modal-body .mantine-Stack-root,
  .mantine-Drawer-body .mantine-Stack-root {
    padding: 4px !important;
  }

  /* Also reduce modal body padding itself */
  .mantine-Modal-body,
  .mantine-Drawer-body {
    padding: 8px !important;
  }

  /* Reduce card padding inside modals */
  .mantine-Modal-body .mantine-Card-root,
  .mantine-Drawer-body .mantine-Card-root {
    padding: 8px !important;
  }

  /* Reduce paper padding inside modals */
  .mantine-Modal-body .mantine-Paper-root,
  .mantine-Drawer-body .mantine-Paper-root {
    padding: 4px !important;
  }

  /* Full height modals on mobile - use dvh for real device viewport */
  .mantine-Modal-content.mantine-Paper-root {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /* Safe area insets for modal body (notch devices) */
  .mantine-Modal-body {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* NOTE: Modal z-index rules moved to global scope (top of file) for PWA compatibility */

  /* Touch-friendly target sizes */
  .mantine-Modal-body .mantine-Button-root,
  .mantine-Modal-body .mantine-ActionIcon-root {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Horizontally scrollable tabs on mobile */
  .mantine-Modal-body .mantine-Tabs-list,
  .mantine-Drawer-body .mantine-Tabs-list {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
    padding-bottom: 2px !important;
  }

  /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
  .mantine-Modal-body .mantine-Tabs-list::-webkit-scrollbar,
  .mantine-Drawer-body .mantine-Tabs-list::-webkit-scrollbar {
    display: none !important;
  }

  /* Prevent tab buttons from shrinking */
  .mantine-Modal-body .mantine-Tabs-tab,
  .mantine-Drawer-body .mantine-Tabs-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* Reduced animations mode - applies when user enables reduced animations in mobile settings */
.reduced-animations *,
.reduced-animations *::before,
.reduced-animations *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Allow loaders/spinners to animate even in reduced-animations mode */
.reduced-animations .mantine-Loader-root,
.reduced-animations .mantine-Loader-root::before,
.reduced-animations .mantine-Loader-root::after {
  animation-duration: 1.2s !important;
  animation-iteration-count: infinite !important;
}

.reduced-animations .mantine-Collapse-root {
  transition: none !important;
}

.reduced-animations .mantine-Modal-root,
.reduced-animations .mantine-Drawer-root {
  transition: none !important;
}

.reduced-animations .mantine-Menu-dropdown {
  transition: none !important;
}

.reduced-animations .mantine-Tooltip-root {
  transition: none !important;
}

/* Fix for Select/Combobox dropdowns inside Drawers - prevent wobbling on mobile */
/* Disable transitions for dropdowns to prevent animation conflicts */
.mantine-Drawer-root .mantine-Combobox-dropdown,
.mantine-Drawer-root .mantine-Select-dropdown {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Ensure dropdown is positioned correctly within the drawer */
.mantine-Drawer-root .mantine-Combobox-options {
  max-height: 200px !important;
  overflow-y: auto !important;
}

/* Stabilize the input wrapper to prevent layout shift */
.mantine-Drawer-root .mantine-Select-input,
.mantine-Drawer-root .mantine-Combobox-input {
  transition: none !important;
}

/* Fix for Select/Combobox dropdowns inside Modals - remove animations */
/* These rules apply globally (desktop + mobile) for consistent behavior */
.mantine-Modal-root .mantine-Combobox-dropdown,
.mantine-Modal-root .mantine-Select-dropdown,
.mantine-Modal-root .mantine-Popover-dropdown {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  scale: 1 !important;
}

/* Disable transitions on the popover/combobox root */
.mantine-Modal-root .mantine-Popover-root,
.mantine-Modal-root .mantine-Combobox-root {
  --popover-transition-duration: 0ms !important;
}

/* Stabilize the input wrapper to prevent layout shift */
.mantine-Modal-root .mantine-Select-input,
.mantine-Modal-root .mantine-Combobox-input {
  transition: none !important;
}

/* Disable transition on Mantine's internal dropdown wrapper */
.mantine-Modal-root [data-combobox-dropdown],
.mantine-Modal-root [data-popover-dropdown] {
  transition: none !important;
  animation: none !important;
}

/* Mobile-specific: limit dropdown height for better UX */
@media (max-width: 768px) {
  .mantine-Modal-root .mantine-Combobox-options {
    max-height: 200px !important;
    overflow-y: auto !important;
  }
}

/* Landscape mode on mobile devices */
@media (max-width: 896px) and (orientation: landscape) {
  /* Compact bottom nav in landscape */
  .mobile-bottom-nav-container {
    height: 50px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .mobile-bottom-nav-item {
    min-height: 46px !important;
    padding: 4px 8px !important;
  }

  .mobile-bottom-nav-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .mobile-bottom-nav-label {
    font-size: 9px !important;
  }

  /* Modal optimizations for landscape */
  .mantine-Modal-content.mantine-Paper-root {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /* Use 2-column grid layouts in landscape */
  .mantine-Modal-body .mantine-SimpleGrid-root,
  .mantine-Modal-body .mantine-Grid-root {
    --sg-cols: 2 !important;
  }

  /* Reduce modal header padding in landscape */
  .mantine-Modal-header {
    padding: 8px 12px !important;
  }

  /* App shell content adjustments */
  .app-shell-main-content {
    padding-bottom: 55px !important;
  }
}