/* Mobile Responsive Styles for List Pages */

/* 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 takes full width */
  .mantine-Container-root .mantine-TextInput-root {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    order: 1 !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;
  }
}