/* Profile Panels Mobile Fix */
/* Fixes for event cards spanning full width in mobile panels */

@media (max-width: 767px) {

  /* Override wide containers when inside mobile panels */
  .panel-container-mobile .w-1320,
  .carousel-panel .w-1320,
  .panel-container-mobile .rumble-you-created-container,
  .carousel-panel .rumble-you-created-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--mobile-panel-content-padding) !important;
  }

  /* Fix expanded carousel containers in panels */
  .panel-container-mobile .carousel-container.expanded,
  .carousel-panel .carousel-container.expanded {
    height: auto !important;
    padding: 0 !important;
  }

  /* Override profile event track grid for mobile panels */
  .panel-container-mobile .profile-events-track,
  .carousel-panel .profile-events-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Fix carousel scrollable containers */
  .panel-container-mobile .profile-events-scrollable,
  .carousel-panel .profile-events-scrollable,
  .panel-container-mobile .carousel-scrollable,
  .carousel-panel .carousel-scrollable {
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* Fix carousel track in panels */
  .panel-container-mobile .carousel-track,
  .carousel-panel .carousel-track {
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Ensure event cards are properly sized in panels */
  .panel-container-mobile .carousel-card,
  .carousel-panel .carousel-card,
  .panel-container-mobile .EventCard,
  .carousel-panel .EventCard {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    margin: 0 !important;
  }

  /* Fix grid containers in panels */
  .panel-container-mobile .created-rumble-grid-container,
  .carousel-panel .created-rumble-grid-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Age category tabs spacing now handled by centralized rules */

  /* Fix per carousel-container dentro pannelli mobile */
  .panel-container-mobile .carousel-container,
  .carousel-panel .carousel-container {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    z-index: auto !important;
    background: transparent !important;
  }

  /* Fix per carousel-track e profile-events-track */
  .panel-container-mobile .carousel-track,
  .carousel-panel .carousel-track,
  .panel-container-mobile .profile-events-track,
  .carousel-panel .profile-events-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 0 !important;
    height: auto !important;
  }

  /* Fix per carousel-scrollable e profile-events-scrollable */
  .panel-container-mobile .carousel-scrollable,
  .carousel-panel .carousel-scrollable,
  .panel-container-mobile .profile-events-scrollable,
  .carousel-panel .profile-events-scrollable {
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  /* Fix per carousel expanded */
  .panel-container-mobile .carousel-container.expanded,
  .carousel-panel .carousel-container.expanded {
    height: auto !important;
    position: relative !important;
    z-index: auto !important;
  }

  /* Assicura che tutti i container con larghezze fisse siano 100% */
  .panel-container-mobile [class^="w-"],
  .panel-container-mobile [class*=" w-"],
  .carousel-panel [class^="w-"],
  .carousel-panel [class*=" w-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix specifico per i container delle cards */
  .panel-container-mobile .created-rumble-grid-container,
  .carousel-panel .created-rumble-grid-container,
  .panel-container-mobile .profile-events-container,
  .carousel-panel .profile-events-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure panels extend to mobile menu without cropping */
  .profile-panel-container .mobile-panels-carousel-wrapper,
  .profile-panel-container .carousel-panel {
    height: var(--mobile-panel-height) !important;
    /* Uses centralized variable */
    max-height: var(--mobile-panel-height) !important;
  }

  /* Remove bottom padding that causes content cropping */
  .carousel-panel {
    padding-bottom: 0 !important;
  }

  /* Ensure preference section fills available space */
  .carousel-panel .user-preference-section {
    min-height: 100%;
    padding-bottom: 20px;
    /* Small padding to prevent last item from touching bottom */
    box-sizing: border-box;
  }
}

/* Unified container class for profile panel content - Added January 2025 */
@media (max-width: 767px) {

  /* Apply padding only to containers within profile panels on mobile */
  .profile-panels .profile-panel-content-container,
  .user-profile-panels .profile-panel-content-container,
  .gym-profile-panels .profile-panel-content-container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Ensure nested containers don't get double padding */
  .profile-panel-content-container .profile-panel-content-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Nasconde permanentemente scrollbar orizzontale nel pannello notifiche - Added January 2025 */
@media (max-width: 767px) {

  /* Target specifico per il pannello notifiche */
  .profile-panels .carousel-panel.active .notifications-section {
    overflow-x: hidden !important;
  }

  /* Nasconde scrollbar da tutti i contenitori scroll nel pannello notifiche */
  .profile-panels .notifications-section .scroll-container,
  .profile-panels .notifications-section .MuiBox-root {
    overflow-x: hidden !important;
    /* Per tutti i browser */
    -ms-overflow-style: none;
    /* IE e Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  /* Webkit browsers */
  .profile-panels .notifications-section .scroll-container::-webkit-scrollbar,
  .profile-panels .notifications-section .MuiBox-root::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Previeni overflow dal container principale */
  .profile-panels .notifications-section {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* Fix per i tabs scrollabili */
  .profile-panels .notifications-section .MuiTabs-root {
    width: 100%;
  }

  .profile-panels .notifications-section .MuiTabs-scroller {
    overflow-x: auto !important;
    /* Mantieni scroll solo per i tabs */
  }
}

/* Enhanced overrides for profile panel containers - January 2025 */
@media (max-width: 767px) {

  /* Force padding on profile-main-section containers */
  .panel-container-mobile .profile-main-section.container.profile-panel-content-container,
  .carousel-panel .profile-main-section.container.profile-panel-content-container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0 !important;
    /* Keep existing top/bottom */
    padding-bottom: 0 !important;
  }

  /* Override Bootstrap's gutter system for our containers */
  .panel-container-mobile .container.profile-panel-content-container,
  .carousel-panel .container.profile-panel-content-container {
    --bs-gutter-x: 1rem !important;
    /* This will give 0.5rem on each side */
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Specific override for favorite-gyms-section */
  .panel-container-mobile .favorite-gyms-section.container.profile-panel-content-container,
  .carousel-panel .favorite-gyms-section.container.profile-panel-content-container {
    padding: 0.5rem !important;
    /* Simplified to ensure all sides get the padding */
  }

  /* Ensure div containers also get padding */
  .panel-container-mobile div.profile-panel-content-container,
  .carousel-panel div.profile-panel-content-container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* GYM PROFILES: Remove all padding to allow map to extend to screen edges */
  .gym-profile-panels .panel-container-mobile .profile-main-section.container.profile-panel-content-container,
  .gym-profile-panels .carousel-panel .profile-main-section.container.profile-panel-content-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* USER PROFILE: Prevent horizontal scroll caused by 100vw elements - Added November 2025 */
@media (max-width: 767px) {

  /* Target the outermost user profile panels container to prevent horizontal overflow */
  .user-profile-panels.panel-container.panel-container-mobile {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Also target profile-panels class for user type */
  .profile-panels.user-profile-panels {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Target the carousel wrapper inside user profile panels */
  .user-profile-panels .mobile-panels-carousel-wrapper,
  .profile-panels.user-profile-panels .mobile-panels-carousel-wrapper {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}