/* Panel System Override Styles - Forza stili dei titoli rossi */
/* Questo file deve essere importato DOPO panels.css per avere priorità massima */

/* FORCE MOBILE PANEL TITLES TO BE RED */
.mobile-panel-title h2,
.mobile-panel-title .MuiTypography-root,
.mobile-panel-title-text,
.carousel-panel .mobile-panel-title h2,
.carousel-panel.active .mobile-panel-title h2,
.mobile-panels-carousel-wrapper .mobile-panel-title h2,
.panel-container-mobile .mobile-panel-title h2 {
  color: #f5484d !important;
  font-size: 22px !important;
  font-family: "DINBold", sans-serif !important;
  font-weight: normal !important;
  text-align: left !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

/* FORCE DESKTOP PANEL TITLES TO BE RED */
.adddata-create-accordion-title p,
.adddata-create-accordion-title .panel-header-title,
.adddata-create-accordion-title .MuiTypography-root,
.panel-accordion-summary .panel-header-title,
.panel-accordion .panel-header-title,
.MuiAccordionSummary-root .panel-header-title,
.MuiAccordionSummary-content .panel-header-title,
.adddata-create-accordion-title .MuiAccordionSummary-content > div > div > div,
.panel-header .panel-header-title {
  color: #f5484d !important;
  font-size: 22px !important;
  font-family: "DINBold", sans-serif !important;
  font-weight: normal !important;
  text-align: left !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

/* FORCE BACKGROUND COLORS AND BORDER RADIUS */
.panel-accordion,
.adddata-create-accordion-item,
.MuiAccordion-root,
.MuiPaper-root.MuiAccordion-root,
.MuiAccordionSummary-root,
.MuiAccordionDetails-root,
.panel-container-desktop .MuiPaper-root,
.ongoing-acoordion-main-container .MuiAccordion-root {
  background-color: rgb(33, 37, 41) !important;
  background: rgb(33, 37, 41) !important;
  border-radius: 8px !important;
}

/* Remove MUI's default linear gradient */
.MuiAccordion-root,
.MuiPaper-root.MuiAccordion-root,
[class*="css-"][class*="-MuiPaper-root-MuiAccordion-root"] {
  background-image: none !important;
  background-image: unset !important;
}

/* OVERRIDE MUI TYPOGRAPHY DEFAULTS */
.MuiTypography-h6,
.MuiTypography-body1 {
  /* Reset MUI defaults */
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* SPECIFICITY BOMB - Target with maximum specificity */
body .page-layout-container .ongoing-acoordion-main-container .panel-container .MuiAccordion-root .MuiAccordionSummary-root .MuiAccordionSummary-content .panel-header .panel-header-title,
body .page-layout-container .ongoing-acoordion-main-container .panel-container .mobile-panels-carousel-wrapper .carousel-panel .mobile-panel-title h2,
body .ongoing-acoordion-main-container .panel-container .MuiAccordion-root .MuiAccordionSummary-root .panel-header-title,
body .ongoing-acoordion-main-container .panel-container .mobile-panel-title .MuiTypography-root {
  color: #f5484d !important;
  font-size: 22px !important;
  font-family: "DINBold", sans-serif !important;
  font-weight: normal !important;
}

/* LAST RESORT - Target by attribute selectors */
[class*="panel-header-title"],
[class*="mobile-panel-title"] h2,
[class*="mobile-panel-title"] [class*="Typography"],
div[class*="AccordionSummary"] div[class*="panel-header-title"] {
  color: #f5484d !important;
  font-size: 22px !important;
  font-family: "DINBold", sans-serif !important;
  font-weight: normal !important;
}

/* SHADOW DOM PIERCING (if components use shadow DOM) */
:host-context(.panel-header) .panel-header-title,
:host-context(.mobile-panel-title) h2 {
  color: #f5484d !important;
  font-size: 22px !important;
  font-family: "DINBold", sans-serif !important;
  font-weight: normal !important;
}

/* !IMPORTANT SPAM - Override everything */
* .panel-header-title,
* .mobile-panel-title h2,
* .mobile-panel-title .MuiTypography-root {
  color: #f5484d !important;
  font-size: 22px !important;
  font-family: "DINBold", sans-serif !important;
  font-weight: normal !important;
}

/* CSS CUSTOM PROPERTIES OVERRIDE */
:root {
  --panel-title-color: #f5484d !important;
  --panel-title-size: 22px !important;
  --panel-title-font: "DINBold", sans-serif !important;
  --panel-bg-color: rgb(33, 37, 41) !important;
}

/* Apply custom properties */
.panel-header-title,
.mobile-panel-title h2 {
  color: var(--panel-title-color) !important;
  font-size: var(--panel-title-size) !important;
  font-family: var(--panel-title-font) !important;
}

/* ANIMATION HACK - Force repaint */
@keyframes force-color {
  from { color: #f5484d; }
  to { color: #f5484d; }
}

.panel-header-title,
.mobile-panel-title h2 {
  animation: force-color 0.001s;
}

/* FINAL OVERRIDES - Force panel-container-desktop to be transparent */
.panel-container-desktop,
body .panel-container-desktop,
div.panel-container-desktop,
[class="panel-container-desktop"],
[class*="panel-container-desktop"],
#root .panel-container-desktop,
.ongoing-acoordion-main-container .panel-container-desktop {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Ensure consistent width for non-accordion panels */
.panel-container-desktop > div:not(.panel-accordion) {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Fix main-info-panel width to match accordion items */
.panel-container-desktop .main-info-panel-container,
.panel-container-desktop > .main-info-panel-container {
  width: 100%;
  box-sizing: border-box;
  /* Ensure it doesn't overflow */
  max-width: 100%;
}

/* Desktop-specific padding for panel-content inside accordions */
@media (min-width: 768px) {
  .panel-accordion-details .panel-content {
    padding: 0.75rem 1.5rem 1.5rem;
  }
}

/* Override MUI AccordionDetails default padding on desktop */
@media (min-width: 768px) {
  .panel-accordion-details.MuiAccordionDetails-root,
  .MuiAccordionDetails-root.panel-accordion-details,
  [class*="MuiAccordionDetails-root"],
  .panel-container .MuiAccordionDetails-root,
  .panel-container [class*="MuiAccordionDetails"] {
    padding: 0 !important;
  }
}

/* Fix for map toggle button clickability */
.stage-expanded-content .position-relative {
  z-index: 5; /* Establish proper stacking context for map containers */
  position: relative;
}

/* Ensure map containers don't block toggle buttons */
.map-container,
.mapboxgl-map {
  position: relative;
  z-index: 1;
}

/* Ensure stage expand icon doesn't interfere */
.stage-expand-icon {
  pointer-events: all;
  z-index: 2;
}

/* Fix for map toggle in main info panel */
.main-info-content .position-relative {
  overflow: visible !important;
}

/* Specific fix for the map container in main info panel */
.main-info-content .position-relative[style*="height"] {
  overflow: visible !important;
}

/* Override overflow hidden on parent containers */
.main-info-content > div:first-child {
  overflow: visible !important;
}

/* Ensure all mapbox overlays don't block the toggle */
.main-info-content .mapboxgl-control-container {
  pointer-events: none !important;
}

.main-info-content .mapboxgl-control-container > * {
  pointer-events: auto !important;
}

/* Make sure the map canvas itself is interactive */
.main-info-content .mapboxgl-canvas {
  pointer-events: auto !important;
}

/* Fix for badge overlay container blocking map toggle button */
.main-info-content .badge-overlay-container {
  pointer-events: none !important;
}

/* Ensure badges themselves remain clickable */
.main-info-content .badge-overlay-container > * {
  pointer-events: auto !important;
}

/* Alternative selector for badge container without custom class */
.main-info-content .position-absolute.top-0.start-0.end-0.d-flex.justify-content-between {
  pointer-events: none !important;
}

.main-info-content .position-absolute.top-0.start-0.end-0.d-flex.justify-content-between > * {
  pointer-events: auto !important;
}

/* Desktop panel spacing - consistent spacing based on state */
@media (min-width: 768px) {
  /* Default spacing for collapsed panels - 0.5rem */
  .MuiPaper-root.MuiAccordion-root.panel-accordion,
  .panel-accordion.MuiAccordion-root,
  [class*="MuiPaper-root"][class*="MuiAccordion-root"][class*="panel-accordion"] {
    margin: 0 0 0.5rem 0 !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Expanded panels - 1rem spacing */
  .MuiPaper-root.MuiAccordion-root.panel-accordion.Mui-expanded,
  .panel-accordion.MuiAccordion-root.Mui-expanded,
  [class*="MuiPaper-root"][class*="MuiAccordion-root"][class*="panel-accordion"][class*="Mui-expanded"] {
    margin: 0 0 1rem 0 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Last panel should have no margin */
  .MuiPaper-root.MuiAccordion-root.panel-accordion:last-child {
    margin-bottom: 0 !important;
  }
}

/* Extra specificity for MUI generated classes */
[class*="css-"][class*="-MuiPaper-root-MuiAccordion-root"] {
  background-color: rgb(33, 37, 41) !important;
  border-radius: 8px !important;
  background-image: none !important;
}

/* Specific rule for expanded state with generated classes */
[class*="css-"][class*="-MuiPaper-root-MuiAccordion-root"].Mui-expanded {
  margin-bottom: 1rem !important;
}

/* Specific rule for collapsed state with generated classes */
[class*="css-"][class*="-MuiPaper-root-MuiAccordion-root"]:not(.Mui-expanded) {
  margin-bottom: 0.5rem !important;
}

/* MUI Switch Label Styling */
.MuiFormControlLabel-label.MuiTypography-root.MuiTypography-body1,
.MuiFormControlLabel-label.MuiTypography-body1,
.MuiTypography-body1.MuiFormControlLabel-label {
  color: #fff !important;
  font-family: "DINRegular" !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.00938em !important;
}

/* Extra specificity for generated CSS classes */
[class*="MuiTypography-root"][class*="MuiTypography-body1"][class*="MuiFormControlLabel-label"] {
  color: #fff !important;
  font-family: "DINRegular" !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.00938em !important;
}

/* Centralized dark mode backgrounds for switch/hide containers */
.dark-mode-active .prize-switch-main-container,
.dark-mode-active .score-switch-main-container,
.dark-mode-active .prize-switch-container,
.dark-mode-active .score-switch-container,
.dark-mode-active .timer-switch-container,
.dark-mode-active .age-switch-container,
.dark-mode-active .gender-switch-container,
.dark-mode-active .realtime-switch-container,
.dark-mode-active .logo-maker-switch-container,
.dark-mode-active .prize-hide-container,
.dark-mode-active .score-hide-container,
.dark-mode-active .age-hide-container,
.dark-mode-active .make-logo-container {
  background-color: rgba(255,255,255,0.05) !important;
  border: none !important;
}

/* Remove any leftover borders */
.dark-mode-active .prize-switch-main-container,
.dark-mode-active .score-switch-main-container,
.dark-mode-active .timer-switch-main-container,
.dark-mode-active .make-logo-container {
  border-top: none !important;
}

/* Accordion-style switches - square bottom corners when expanded */
.prize-switch-container.expanded,
.age-switch-container.expanded,
.sponsor-switch-container.expanded,
.timer-switch-container.expanded,
.logo-maker-switch-container.expanded,
.score-switch-container.expanded {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  transition: border-radius 0.3s ease;
}

/* Always keep rounded for these specific switches */
.realtime-switch-container,
.gender-switch-container {
  border-radius: 6px !important;
}

/* Default border-radius for all switch containers */
.prize-switch-container,
.sponsor-switch-container,
.age-switch-container,
.timer-switch-container,
.logo-maker-switch-container,
.score-switch-container {
  border-radius: 6px !important;
  transition: border-radius 0.3s ease;
}

/* Content containers - square only when they have items */
.prize-list-container.has-items {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  transition: border-radius 0.3s ease;
}

/* Sponsor list container should always maintain rounded corners */
.sponsor-list-container.has-items {
  border-radius: 8px !important;
  transition: border-radius 0.3s ease;
}

/* ============================================
   REALTIME LEADERBOARD CONTAINER - NO BACKGROUND
   ============================================ */
.realtime-leaderboard-container,
.dark-mode-active .realtime-leaderboard-container,
body .realtime-leaderboard-container,
.panel-container .realtime-leaderboard-container,
.MuiAccordionDetails-root .realtime-leaderboard-container {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
}

/* Fix panel-header background color inheritance */
.panel-header {
  background: transparent !important;
}

.MuiAccordion-root .panel-header,
.panel-container .panel-header,
.accordion-item .panel-header {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure panel headers don't have dark backgrounds from other styles */
.advanced-options-container .panel-header {
  background: transparent !important;
  background-color: transparent !important;
}

/* Fix sponsor text colors to white/off-white */
.sponsor-name {
  color: #f8f9fa !important; /* Off-white */
}

.sponsor-website,
.sponsor-social {
  color: #f8f9fa !important; /* Changed from red to off-white */
  text-decoration: none !important; /* Remove underline */
}

/* Ensure no underline on hover */
.sponsor-website:hover,
.sponsor-social:hover {
  text-decoration: none !important;
}

/* Override advanced-options-container background inheritance for panel headers */
.advanced-options-container .panel-header.panel-header-default,
.advanced-options-container .MuiAccordionSummary-root,
.advanced-options-container .panel-accordion .panel-header {
  background-color: transparent !important;
  background: transparent !important;
}

/* Ensure the panel accordion maintains proper background */
.advanced-options-container .panel-accordion,
.advanced-options-container .MuiAccordion-root {
  background-color: rgb(33, 37, 41) !important;
  background: rgb(33, 37, 41) !important;
}

/* ============================================
   LEAGUE EDIT MOBILE SPECIFIC STYLES
   ============================================ */

/* Mobile-specific styles for LeagueEdit */
@media (max-width: 767px) {
  /* Remove padding on mobile for LeagueEdit */
  .league-edit-panels-mobile {
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    z-index: 1;
  }
  
  /* Ensure proper scrolling under sticky menu */
  .league-edit-page {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 100vh;
  }
  
  /* Panel container should have fixed height for proper scroll context */
  .league-edit-panels-mobile .panel-container-mobile {
    height: var(--mobile-panel-height); /* Uses centralized variable */
    overflow: hidden; /* Let carousel handle layout */
    position: relative;
  }
  
  /* Carousel wrapper should NOT scroll - let panels handle it */
  .league-edit-panels-mobile .mobile-panels-carousel-wrapper {
    overflow-y: hidden; /* Let individual panels handle scroll */
    overflow-x: hidden;
    height: var(--mobile-panel-height); /* Uses centralized variable */
    position: relative;
  }
  
  /* Fix glass effect on mobile */
  .league-edit-panels-mobile {
    /* Allow content to scroll under sticky */
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  
  /* Ensure sticky menu has proper backdrop and z-index */
  .sticky-menu-bar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1100;
  }
  
  /* Panel content should scroll with fixed height */
  .league-edit-panels-mobile .carousel-panel {
    height: 100% !important; /* Take full height of wrapper */
    min-height: unset !important; /* Remove min-height constraint */
    overflow-y: auto !important; /* Enable vertical scroll */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding-bottom: 100px; /* Space for mobile menu */
  }
  
  /* Hide panel indicators on mobile */
  .league-edit-panels-mobile .panel-indicators {
    display: none !important;
  }
  
  /* Full width panels */
  .league-edit-panels-mobile .panel-container {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Remove side padding from carousel wrapper */
  .league-edit-panels-mobile .mobile-panels-carousel-wrapper {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Ensure carousel panels take full width */
  .league-edit-panels-mobile .carousel-panel {
    padding: 0 !important;
  }
  
  /* Style mobile toggle button - Same style as advanced dots subcontainer */
  .advance-option-toggle.mobile-toggle {
    width: 100%;
    padding: 12px 16px;
    /* Gradient rosso trasparente come advanced dots */
    background: linear-gradient(135deg, 
      rgba(255, 0, 0, 0.2) 0%, 
      rgba(255, 0, 0, 0.1) 100%
    );
    color: white;
    /* Bordo rosso sottile */
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 16px;
    cursor: pointer;
    font-weight: 200;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Backdrop blur per effetto premium */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .advance-option-toggle.mobile-toggle:hover {
    background: linear-gradient(135deg, 
      rgba(255, 0, 0, 0.3) 0%, 
      rgba(255, 0, 0, 0.2) 100%
    );
    border-color: rgba(255, 0, 0, 0.4);
  }
  
  .advance-option-toggle.mobile-toggle .toggle-text {
    display: flex;
    align-items: center;
  }
  
  /* Mobile dots navigation styles moved to panels.css for uniformity */
  /* All mobile-dots-navigation styles are centralized in panels.css */
  
  /* Remove any container padding on mobile */
  .create-rumble-acco-container {
    padding: 0 !important;
  }
  
  /* Ensure panel content fills width on mobile */
  .league-edit-panels-mobile .panel-content {
    padding: 0.5rem !important;
    height: 100%; /* Take full height */
    overflow: visible; /* Let panel-content-body handle scroll */
  }
  
  /* Panel content body should handle scroll */
  .league-edit-panels-mobile .panel-content-body {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix mobile panel headers */
  .league-edit-panels-mobile .mobile-panel-header {
    padding: 0.5rem !important;
    background: rgb(33, 37, 41) !important;
  }
  
  /* Animation for auto-slide transition */
  .league-edit-panels-mobile .mobile-panels-carousel-container {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100%; /* Ensure carousel container takes full height */
  }
  
  /* Optional: Highlight effect for target panel */
  @keyframes panelSlideHighlight {
    0% { 
      box-shadow: none;
    }
    50% { 
      box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.2);
    }
    100% { 
      box-shadow: none;
    }
  }
  
  .league-edit-panels-mobile .carousel-panel.highlight-auto-slide {
    animation: panelSlideHighlight 1s ease-out;
  }
  
  /* Fix for main info panel scroll on mobile */
  .league-edit-panels-mobile .main-info-panel {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Ensure form sections within panels are scrollable */
  .league-edit-panels-mobile .panel-empty-content {
    min-height: 50vh; /* Ensure empty content has some height */
  }
}

/* ============================================
   AUTO-SLIDE VISUAL FEEDBACK
   ============================================ */

/* Auto-slide enhanced transition */
.panel-container.auto-sliding .mobile-panels-carousel-container,
.league-edit-panels-mobile.auto-sliding .mobile-panels-carousel-container {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Subtle pulse effect on target panel during auto-slide */
@keyframes autoSlidePulse {
  0% { 
    background-color: rgba(255, 0, 0, 0);
  }
  20% {
    background-color: rgba(255, 0, 0, 0.05);
  }
  80% {
    background-color: rgba(255, 0, 0, 0.05);
  }
  100% { 
    background-color: rgba(255, 0, 0, 0);
  }
}

.auto-sliding .carousel-panel.active {
  animation: autoSlidePulse 0.6s ease-out;
}

/* Highlight dots during auto-slide */
.auto-sliding .mobile-dots-navigation .nav-dot.active {
  animation: dotPulse 0.6s ease-out;
}

@keyframes dotPulse {
  0%, 100% { 
    transform: scale(1); 
    background: #ff0000;
  }
  50% { 
    transform: scale(1.2); 
    background: #ff3333;
  }
}

/* Smooth animation for returning to main panel */
.auto-sliding-back .mobile-panels-carousel-container {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.6, 1) !important;
}

/* Optional: Fade effect when returning */
.auto-sliding-back .carousel-panel {
  transition: opacity 0.4s ease;
}

/* ============================================
   SPONSOR DETAILS FIX - Mobile only padding
   ============================================ */
@media (max-width: 767px) {
  .sponsor-list-modern .prize-item-modern .sponsor-details {
    padding: 10px 0px;
  }
}

/* ============================================
   ADVANCED OPTIONS DOTS CONTAINER
   ============================================ */
.mobile-dots-navigation .advanced-dots-subcontainer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  position: relative;
  
  /* Gradient rosso come su desktop */
  background: linear-gradient(135deg, 
    rgba(255, 0, 0, 0.2) 0%, 
    rgba(255, 0, 0, 0.1) 100%
  );
  
  /* Bordo rosso sottile */
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 16px;
  
  /* Backdrop blur per effetto premium */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* Transizione smooth quando appare */
  animation: advancedDotsAppear 0.3s ease-out;
}

/* Animazione di entrata per advanced dots */
@keyframes advancedDotsAppear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Dots attivi nel container advanced hanno colore più vivido */
.mobile-dots-navigation .advanced-dots-subcontainer .nav-dot.active {
  background: #ff3333;
  box-shadow: 0 0 8px rgba(255, 51, 51, 0.4);
}

/* Hover effect per advanced dots */
.mobile-dots-navigation .advanced-dots-subcontainer .nav-dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.6);
}

/* ============================================
   ACCORDION HEADER TRANSPARENCY FIX
   ============================================ */

/* Force all accordion headers to be transparent in all contexts */
.accordion-header,
.custom-accordion .accordion-header,
div.accordion-header,
[class*="accordion-header"],
.dark-mode .accordion-header,
.dark-mode .custom-accordion .accordion-header,
.dark-mode-active .accordion-header,
.dark-mode-active .custom-accordion .accordion-header {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* Specific fix for accordion headers in InfoDrawer */
.info-drawer-content .accordion-header,
.info-drawer-content .custom-accordion .accordion-header,
.info-bottom-drawer .accordion-header,
.info-bottom-drawer .custom-accordion .accordion-header {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* Fix for rule sheet accordion headers in modals and drawers */
.rumble-ruls-container .accordion-header,
.rumble-ruls-container .custom-accordion .accordion-header,
.rules-section-acc .accordion-header,
.rules-section-acc .custom-accordion .accordion-header {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* Extra specificity for dark mode with multiple selectors */
body.dark-mode .accordion-header,
body.dark-mode-active .accordion-header,
body .dark-mode .accordion-header,
body .dark-mode-active .accordion-header,
#root .dark-mode .accordion-header,
#root .dark-mode-active .accordion-header {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* Remove any inherited backgrounds from parent containers */
* .accordion-header,
* .custom-accordion .accordion-header {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* Force transparency with !important on all properties */
.accordion-header[style],
.custom-accordion .accordion-header[style] {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* ============================================
   EVENT DESCRIPTION CONTENT TRANSPARENCY FIX
   ============================================ */

/* Force all event-description-content to be transparent in all contexts */
.event-description-content,
.custom-accordion .event-description-content,
div.event-description-content,
[class*="event-description-content"],
.dark-mode .event-description-content,
.dark-mode .custom-accordion .event-description-content,
.dark-mode-active .event-description-content,
.dark-mode-active .custom-accordion .event-description-content {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* Specific fix for event-description-content in InfoDrawer */
.info-drawer-content .event-description-content,
.info-drawer-content .custom-accordion .event-description-content,
.info-bottom-drawer .event-description-content,
.info-bottom-drawer .custom-accordion .event-description-content {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* Fix for event description in rule sheets */
.rumble-ruls-container .event-description-content,
.rumble-ruls-container .custom-accordion .event-description-content,
.rules-section-acc .event-description-content,
.rules-section-acc .custom-accordion .event-description-content {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* Extra specificity for dark mode with multiple selectors */
body.dark-mode .event-description-content,
body.dark-mode-active .event-description-content,
body .dark-mode .event-description-content,
body .dark-mode-active .event-description-content,
#root .dark-mode .event-description-content,
#root .dark-mode-active .event-description-content {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* Remove any inherited backgrounds from parent containers */
* .event-description-content,
* .custom-accordion .event-description-content {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* Force transparency with !important on all properties */
.event-description-content[style],
.custom-accordion .event-description-content[style] {
  background-color: transparent !important;
  background: transparent !important;
  background: none !important;
  background-image: none !important;
}

/* ============================================
   OWNER MENU DROPDOWN - Maximum z-index priority
   ============================================ */
.dropdown-menu.show,
.owner-dropdown-menu {
  z-index: 9999999 !important;
  position: absolute !important;
}

/* Ensure owner menu container has proper stacking context */
.position-relative[style*="z-index: 9999999"] {
  z-index: 9999999 !important;
  position: relative !important;
}

/* ============================================
   LEAGUE SETTING PAGE - Remove all borders
   ============================================ */

/* Remove borders from participant boxes in LeagueSetting */
.setting-rumble-page .adddata-participants-data-box-row,
.setting-rumble-page .adddata-participants-data-box-row.new {
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
}

.setting-rumble-page .adddata-participants-data-box,
.setting-rumble-page .adddata-participants-data-box.new {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Remove borders from panel containers in LeagueSetting */
.setting-rumble-page .panel-container .MuiPaper-root,
.setting-rumble-page .panel-container .MuiAccordion-root {
  border: none !important;
  border-radius: 0 !important;
}

/* Remove borders from accordion details */
.setting-rumble-page .MuiAccordionDetails-root,
.setting-rumble-page .panel-accordion-details {
  border: none !important;
}

/* Dark mode specific overrides for LeagueSetting */
.dark-mode-active .setting-rumble-page .adddata-participants-data-box-row,
.dark-mode-active .setting-rumble-page .adddata-participants-data-box-row.new {
  border: none !important;
  border-radius: 0 !important;
}

.dark-mode-active .setting-rumble-page .adddata-participants-data-box,
.dark-mode-active .setting-rumble-page .adddata-participants-data-box.new {
  border: none !important;
  border-radius: 0 !important;
}

/* Remove padding from participant data boxes */
.setting-rumble-page .adddata-participants-data-box,
.setting-rumble-page .adddata-participants-data-box:not(.new) {
  padding: 0 !important;
}

/* ============================================
   LEAGUE SETTING MOBILE SPECIFIC STYLES
   ============================================ */

/* Mobile-specific styles for LeagueSetting */
@media (max-width: 767px) {
  /* Remove all padding/margins from mobile panels */
  .setting-rumble-page .panel-container-mobile,
  .setting-rumble-page .mobile-panels-carousel-wrapper,
  .setting-rumble-page .carousel-panel {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Full width content with proper padding */
  .setting-rumble-page .panel-content {
    padding: 0.5rem !important;
    margin: 0 !important;
  }
  
  /* Hide default panel indicators */
  .setting-rumble-page .panel-indicators {
    display: none !important;
  }
  
  /* Ensure full width panels */
  .setting-rumble-page .panel-container {
    width: 100% !important;
    padding: 0 !important;
  }
  
  /* Fix mobile panel headers */
  .setting-rumble-page .mobile-panel-title {
    padding: 1rem 1rem 0.5rem 1rem !important;
    margin: 0 !important;
  }
  
  /* Fix carousel container height */
  .setting-rumble-page .panel-container-mobile {
    height: calc(100vh - 120px) !important; /* Account for sticky menu and dots */
  }
  
  /* Ensure smooth scrolling */
  .setting-rumble-page .carousel-panel {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Fix participant boxes on mobile - moved to full width section below */
  
  /* Fix stage list on mobile - moved to media queries below */
  
  /* Force full width on mobile */
  .setting-rumble-page.rum-data-main-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Remove any container constraints */
  .setting-rumble-page .w-1320 {
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* Ensure stages and participants sections are full width */
  .setting-rumble-page .adddata-participants-data-box-row {
    margin: 0 !important;
    padding: 0.75rem 1rem !important; /* Add internal padding instead */
  }
  
  /* Ensure all content inside panels is full width */
  .setting-rumble-page .panel-content > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Fix any Bootstrap containers that might add margins */
  .setting-rumble-page .container,
  .setting-rumble-page .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
  
  /* Remove any inherited margins from parent containers */
  body .setting-rumble-page,
  #root .setting-rumble-page {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
}

/* ============================================
   STAGE ACCORDION ANIMATIONS - Used in LeagueSetting page
   ============================================ */
.stage-item-container {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.stage-item-container.expanded {
  overflow: visible !important;
}

.stage-row-header {
  position: relative;
  transition: all 0.3s ease;
  padding: 1rem !important;
}

.stage-expanded-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 0 12px 12px;
}

.stage-expanded-content.expanded {
  max-height: none;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible !important;
}

.stage-expanded-content:not(.expanded) {
  overflow: hidden;
}

.stage-info-wrapper {
  padding: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.stage-expanded-content.expanded .stage-info-wrapper {
  opacity: 1;
  transform: translateY(0);
}

/* Progress bar animation */
.stage-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 0.5rem;
  position: relative;
}

.stage-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #F5484D, #dc2626);
  transition: width 1s linear;
  position: relative;
  overflow: hidden;
  will-change: width;
}

.stage-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, 
    transparent 0%, 
    rgba(255, 255, 255, 0.1) 50%, 
    transparent 100%
  );
  opacity: 0.5;
}

/* Status badge animations */
.stage-status-badge {
  display: inline-block;
  transition: all 0.2s ease;
}

.stage-item-container:hover .stage-status-badge {
  transform: scale(1.05);
}

/* Ping animation for LIVE badge */
@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Pulsing animation for the entire LIVE badge */
@keyframes pulse-live {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 72, 77, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(245, 72, 77, 0);
  }
}

/* LIVE badge pulsing class */
.live-badge-pulsing {
  animation: pulse-live 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transform-origin: center;
  will-change: transform, box-shadow;
  position: relative;
  display: inline-flex !important;
}

/* Mobile optimizations for stage accordions */
@media (max-width: 768px) {
  .stage-info-wrapper {
    padding: 0;
  }
  
  .stage-row-header {
    padding: 1rem !important;
  }
  
  /* Ensure stage accordions are full width on mobile */
  .setting-rumble-page .stage-item-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* width: 100% removed to allow natural padding */
  }
}

/* ============================================
   STAGE ACCORDION MOBILE BUTTON ALIGNMENT
   ============================================ */
.stage-mobile-actions-container {
  justify-content: flex-end !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* ============================================
   STAGE ACCORDION LAYOUT FIX
   ============================================ */
/* Box-sizing for balanced padding */
.setting-rumble-page .stage-item-container {
  box-sizing: border-box !important;
}

.stage-row-header {
  box-sizing: border-box !important;
}

/* Desktop margins for visual breathing room */
@media (min-width: 768px) {
  .setting-rumble-page .stage-item-container {
    margin: 0 1rem 0 1rem !important; /* Only lateral margins on desktop */
  }
}

/* Mobile specific */
@media (max-width: 767px) {
  .setting-rumble-page .stage-item-container {
    margin: 0 !important; /* No margins on mobile, using gap instead */
  }
  
  .stage-row-header {
    padding: 0.75rem !important; /* Reduced padding on mobile */
  }
  
  /* Force right alignment of button wrapper */
  .stage-mobile-actions-container > div:last-child {
    margin-left: auto !important;
  }
}

/**
 * TEMPORARY COMMENT - Testing if this rule is still needed
 * Date: 2024-11-08
 * Issue: Global rule was causing spacing issues in ongoing-event after navigation
 * Test: If everything works without this rule, REMOVE it entirely
 * If something breaks, UNCOMMENT and use more specific selectors
 *
 * Original comment: Fix for mobile buttons (rulesheet, share, QR code) - Remove Bootstrap gutter properties
 */
/* @media (max-width: 767px) {
  .row > * {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
  }
} */

/* Keep the other mobile-specific rules that were inside the media query */
@media (max-width: 767px) {
  /* Reset Bootstrap gutter CSS variables for rows containing button groups */
  .row:has(.btn-group.rumble-btn-groups),
  .row:has(.desktop-icon-list) {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
  }

  /* Specific overrides for button groups */
  .btn-group.rumble-btn-groups,
  .btn-group.rumble-btn-groups > *,
  .rumble-btn-groups .btn,
  .desktop-icon-list,
  .desktop-icon-list > *,
  .row > .btn-group,
  .row .btn-group > * {
    /* Ensure no Bootstrap gutter properties */
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
  }

  /* Ensure proper button spacing within groups */
  .btn-group.rumble-btn-groups,
  .desktop-icon-list {
    gap: 0.25rem; /* Small gap between buttons */
    display: flex !important;
    width: 100%;
  }

  /* Fix for share options buttons specifically */
  .btn-group.rumble-btn-groups .btn {
    flex: 1; /* Equal width buttons */
    padding: 0.375rem 0.5rem; /* Consistent padding */
    margin: 0 !important; /* No margins on individual buttons */
  }
}