/* Panel System CSS - Extracted from OnGoingRumblePageTabbed.js */

/* CSS Variables for Dark Theme - Phase 3bis Optimization */
:root {
  /* Core Colors */
  --panel-bg: rgb(33, 37, 41);
  --panel-bg-hover: rgba(255, 255, 255, 0.05);
  --panel-bg-active: rgba(255, 255, 255, 0.1);
  
  /* Text Colors */
  --panel-title: #f5484d;
  --panel-text: #fff;
  --panel-text-secondary: #adb5bd;
  --panel-text-muted: #6c757d;
  
  /* Border Colors */
  --panel-border: rgba(255, 255, 255, 0.1);
  --panel-border-light: rgba(255, 255, 255, 0.05);
  --panel-border-strong: rgba(255, 255, 255, 0.2);
  
  /* Shadow Effects */
  --panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --panel-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.2);
  --panel-shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.3);
  
  /* Dimensions */
  --panel-radius: 8px;
  --panel-radius-sm: 8px;
  --panel-radius-lg: 8px;
  --panel-radius-secondary: 6px;
  --panel-padding: 1rem;
  --panel-padding-sm: 0.75rem;
  --panel-padding-lg: 1.5rem;
  --panel-gap: 1rem;
  
  /* Spacing System - Based on 4px grid */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  
  /* Transitions */
  --panel-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --panel-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Button Colors */
  --panel-btn-primary: var(--panel-title);
  --panel-btn-primary-hover: #dc2626;
  --panel-btn-disabled: #3a3a3a;
  --panel-btn-disabled-text: #808080;
  
  /* Mobile Layout Variables */
  --mobile-menu-height: 58px;  /* Height of mobile bottom navigation */
  --mobile-dots-bottom: 65px;  /* Position of dots navigation from bottom */
  --mobile-dots-height: 20px;  /* Estimated height of dots container */
  
  /* Computed heights for different contexts */
  --mobile-panel-height: calc(100vh - var(--mobile-menu-height)); /* Standard mobile panel height */
  --mobile-panel-height-with-dots: calc(100vh - var(--mobile-menu-height) - var(--mobile-dots-height)); /* When dots overlay content */
  
  /* Mobile Panel Spacing Variables */
  --mobile-panel-padding-horizontal: 0;  /* No lateral padding for max space */
  --mobile-panel-padding-vertical: 0.5rem;  /* Small vertical padding */
  --mobile-panel-content-padding: var(--mobile-panel-padding-vertical) var(--mobile-panel-padding-horizontal);
}

/* Global Panel Background Color - Dark Theme Only */
.panel-container-mobile,
.panel-content,
.panel-accordion,
.carousel-panel,
.main-info-panel-container,
.registration-dashboard-panel-container,
.adddata-create-accordion-item,
.MuiAccordion-root,
.MuiAccordionSummary-root,
.MuiAccordionDetails-root {
  background-color: var(--panel-bg) !important;
}

/* Explicitly exclude panel-container-desktop from background color */
.panel-container-desktop {
  background: transparent !important;
  background-color: transparent !important;
}

/* Exclude realtime-leaderboard-container from background */
.MuiAccordionDetails-root .realtime-leaderboard-container {
  background-color: transparent !important;
  background: transparent !important;
}

/* Mobile Carousel Styles */
.mobile-panels-carousel-wrapper {
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Keep horizontal hidden for carousel */
  overflow-y: hidden; /* Changed: Let individual panels handle scroll */
  position: relative;
  background-color: var(--panel-bg) !important;
  max-width: 100vw; /* Prevent carousel from extending beyond viewport */
}

/* Allow overflow when dropdown is shown - desktop only */
@media (min-width: 768px) {
  .mobile-panels-carousel-wrapper:has(.suggestions-dropdown),
  .mobile-panels-carousel-wrapper:has(.map-search-overlay) {
    overflow: visible !important;
  }
}

.mobile-panels-carousel-container {
  display: flex;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  position: relative; /* Ensure proper positioning context */
}

.mobile-panels-carousel-container.swiping {
  transition: none;
}

.carousel-panel {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  background-color: var(--panel-bg);
  -webkit-overflow-scrolling: touch;
}

/* Allow overflow when dropdown is shown - desktop only */
@media (min-width: 768px) {
  .carousel-panel:has(.suggestions-dropdown),
  .carousel-panel:has(.map-search-overlay) {
    overflow: visible !important;
  }
}

.carousel-panel.active {
  pointer-events: auto;
}

/* Panel Container Styles */
.main-info-panel-container {
  /* Remove padding for main info panel */
  background-color: var(--panel-bg);
  border-radius: var(--panel-radius);
}

.registration-dashboard-panel-container {
  padding: 0.5rem;
  background-color: var(--panel-bg);
  border-radius: var(--panel-radius);
}

.ongoing-acoordion-main-container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

.ongoing-acoordion-main-container.w-1320 {
  max-width: 1220px;
}

.content-private-container {
  position: relative;
}

.content-private-container-blur-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: grey;
  font-size: 2rem;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  font-family: DINBold;
}

.content-private {
  transition: filter 0.3s ease;
}

.content-private.blurred,
.blurred {
  filter: blur(8px);
  pointer-events: none;
  position: relative;
  z-index: 5;
}

/* Desktop Accordion Styles */
.adddata-create-accordion-item {
  background-color: var(--panel-bg) !important;
  border-radius: var(--panel-radius) !important;
  box-shadow: none !important;
  border: none !important;
}

.adddata-create-accordion-item:before {
  display: none;
}

.adddata-create-accordion-title {
  background-color: var(--panel-bg) !important;
  color: var(--panel-text);
  min-height: 64px;
  padding: 0px 0.5rem;
}

.adddata-create-accordion-title .panel-header-title,
.adddata-create-accordion-title p,
.adddata-create-accordion-title .MuiAccordionSummary-content div,
.panel-accordion-summary .MuiAccordionSummary-content div,
.MuiAccordionSummary-root.adddata-create-accordion-title .MuiAccordionSummary-content > div > div > div,
.adddata-create-accordion-title .MuiAccordionSummary-content > div {
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-weight: normal !important;
  font-family: "DINBold", sans-serif !important;
  text-align: left !important;
}

/* Boulder Item Styles */
.boulder-img-mobile {
  display: flex;
  align-items: center;
}

.boulder-img-mobile img {
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}

.boulder-item-mobile {
  cursor: pointer;
  margin-bottom: 8px;
}

/* Badge and Icon Styles */
.grade-custom-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--panel-radius-secondary);
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.infog-icon,
.yt-play-icon {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.infog-icon:hover,
.yt-play-icon:hover {
  opacity: 0.8;
}

/* Search Input Group */
.search-icon {
  cursor: pointer;
  background-color: transparent;
  border-left: none;
}

/* Participant Box Styles */
.adddata-participants-data-box {
  margin-bottom: 0.5rem;
  border-radius: var(--panel-radius-sm);
}

.adddata-participants-data-box.new {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  background-color: transparent !important;
}

.adddata-participants-data-box-setting-icon,
.adddata-participants-data-box-close-icon {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.adddata-participants-data-box-setting-icon:hover,
.adddata-participants-data-box-close-icon:hover {
  opacity: 0.7;
}

/* Dropdown Styles */
.level-dropdown.select-participant-dp {
  width: 25%;
  margin-right: 8px;
}

/* Video Card Styles */
.video_url_card {
  width: 135px;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.video_url_card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Timer Icon Styles */
.timer-icon {
  cursor: pointer;
  color: var(--panel-text);
}

/* Construction Icon */
.construction-icon {
  color: var(--panel-title);
  cursor: pointer;
}

/* Boulder Difficulty Border */
.boulder-difficulty-border {
  padding-left: 12px;
  transition: border-color 0.2s ease;
}

/* Video Views Text */
.v-v-text {
  cursor: pointer;
  user-select: none;
}

/* Filter Icon */
.filter-icon {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.filter-icon:hover {
  transform: scale(1.1);
}

/* Printer Icon */
.rule_printer {
  color: #e0e0e0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.rule_printer:hover {
  color: var(--panel-text)fff;
}

/* Responsive Styles */
@media (max-width: 767px) {
  .mobile-panels-carousel-wrapper {
    margin: 0;
  }
  
  .carousel-panel {
    padding: 0;
  }
  
  .main-info-panel-container,
  .registration-dashboard-panel-container {
    margin: 8px;
    padding: 0.5rem;
  }
}

/* Utility Classes */
.cursor-pointer {
  cursor: pointer;
}

.position-relative {
  position: relative;
}

.w-100 {
  width: 100%;
}

.d-none {
  display: none !important;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.me-1 {
  margin-right: 0.25rem;
}

.me-2 {
  margin-right: 0.5rem;
}

.ms-1 {
  margin-left: 0.25rem;
}

.ms-2 {
  margin-left: 0.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.text-center {
  text-align: center;
}

.text-start {
  text-align: start;
}

.text-end {
  text-align: end;
}

/* ===== Panel System Component Styles ===== */

/* Panel Container */
.panel-container {
  width: 100%;
  position: relative;
}

.panel-container-mobile {
  height: var(--mobile-panel-height); /* Uses centralized mobile menu height variable */
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 0;
  max-width: 100vw; /* Prevent extending beyond viewport */
}

/* Allow overflow when dropdown is shown */
.panel-container-mobile:has(.suggestions-dropdown),
.panel-container-mobile:has(.map-search-overlay) {
  overflow: visible !important;
}

.panel-container-desktop {
  padding: 0;
  background: transparent !important;
  background-color: transparent !important;
}

/* Panel Indicators (Mobile) */
.panel-indicators {
  display: flex;
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
  background: var(--panel-bg);
  border-radius: var(--panel-radius) 4px 0 0;
  margin-bottom: -1px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.panel-indicators::-webkit-scrollbar {
  display: none;
}

.panel-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-radius: var(--panel-radius-secondary);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.panel-indicator:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.panel-indicator.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--panel-text);
  border-color: rgba(255, 255, 255, 0.2);
}

.panel-indicator-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Panel Header */
.panel-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px 16px 0px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.panel-header:hover:not(.disabled) {
  background-color: var(--panel-bg-hover);
}

.panel-header.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.panel-header-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.panel-header-icon {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
}

.panel-header-title {
  flex: 1;
  margin: 0;
  font-weight: normal !important;
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-family: "DINBold", sans-serif !important;
  text-align: left !important;
}

.panel-header-children {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.panel-header-action {
  color: rgba(255, 255, 255, 0.7);
  padding: 6px;
}

.panel-header-action:hover:not(:disabled) {
  color: var(--panel-text);
  background-color: rgba(255, 255, 255, 0.1);
}

/* Style for print icon in accordion */
.adddata-create-accordion-title .panel-header-action {
  color: #e0e0e0 !important;
}

.adddata-create-accordion-title .panel-header-action:hover:not(:disabled) {
  color: var(--panel-text)fff !important;
  background-color: rgba(255, 255, 255, 0.1);
}

.panel-header-expand-icon {
  display: flex;
  align-items: center;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.panel-header-expand-icon.expanded {
  transform: rotate(180deg);
}

/* Panel Content */
.panel-content {
  padding: 0.5rem;
  min-height: 100px;
  position: relative;
  background-color: var(--panel-bg);
}

.panel-content.no-padding {
  padding: 0;
  border-radius: var(--panel-radius);
}

.panel-content-body {
  width: 100%;
}

/* Apply border-radius to panel-content-body only on desktop */
@media (min-width: 768px) {
  .panel-content-body {
    border-radius: var(--panel-radius);
    overflow: hidden;
  }
  
  /* Allow dropdown menus to escape container */
  .panel-content-body:has(.dropdown-menu.show),
  .panel-content-body:has(.suggestions-dropdown),
  .panel-content-body:has(.map-search-overlay),
  .main-info-panel .panel-content-body {
    overflow: visible !important;
  }
}

/* Apply border-radius to MuiCollapse on desktop for expanded accordions */
@media (min-width: 768px) {
  /* Target the collapse container when accordion is expanded */
  .MuiAccordion-root.Mui-expanded .MuiCollapse-root,
  .panel-accordion.Mui-expanded .MuiCollapse-root,
  .adddata-create-accordion-item.Mui-expanded .MuiCollapse-root {
    border-radius: var(--panel-radius);
    overflow: hidden;
  }
  
  /* Specific selector for MUI Collapse entered state */
  .MuiCollapse-root.MuiCollapse-vertical.MuiCollapse-entered {
    border-radius: var(--panel-radius);
  }
}

.panel-content-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Loading State */
.panel-content-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: rgba(255, 255, 255, 0.7);
}

/* Error State */
.panel-content-error {
  padding: 16px;
}

/* Empty State */
.panel-content-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Blur Container */
.panel-blur-container {
  position: relative;
}

.panel-blur-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  padding: 20px;
  max-width: 80%;
}

.panel-blur-content {
  filter: blur(8px);
  pointer-events: none;
}

/* Panel Accordion */
.panel-accordion,
.MuiAccordion-root.panel-accordion,
.MuiPaper-root.MuiAccordion-root {
  box-shadow: none !important;
  border: none !important;
}

.panel-accordion:before {
  display: none;
}

.panel-accordion-summary,
.MuiAccordionSummary-root {
  min-height: 64px;
  background-color: var(--panel-bg) !important;
}

/* Accordion Details (Body) - Centralized styling */
.panel-accordion-details,
.MuiAccordionDetails-root {
  padding: 0;
  background-color: var(--panel-bg) !important;
}

/* Ensure body maintains background when expanded */
.Mui-expanded .panel-accordion-details,
.Mui-expanded .MuiAccordionDetails-root {
  background-color: var(--panel-bg) !important;
}

/* Struttura a 3 colonne per accordion summary */
.MuiAccordionSummary-root.panel-accordion-summary {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Contenuto principale (titolo) - occupa lo spazio disponibile */
.MuiAccordionSummary-root .MuiAccordionSummary-content {
  flex: 1;
  min-width: 0; /* Per text truncation */
  margin: 0 !important; /* Reset margin */
}

/* Nuova colonna per actions */
.panel-accordion-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-right: 8px;
  flex-shrink: 0;
}

/* Assicura che le actions nella nuova colonna siano stilizzate correttamente */
.panel-accordion-actions .panel-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.panel-accordion-actions .panel-header-action {
  padding: 8px !important;
  font-size: 12px !important;
  border-radius: var(--panel-radius-secondary) !important;
  border: none !important;
  background-color: var(--panel-title) !important;
  color: var(--panel-text) !important;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  /* box-shadow removed as requested */
}

.panel-accordion-actions .panel-header-action:hover:not(:disabled) {
  background-color: #e03e43 !important;
  transform: scale(1.05);
}

.panel-accordion-actions .panel-header-action:active:not(:disabled) {
  transform: scale(0.95);
}

.panel-accordion-actions .panel-header-action:disabled {
  background-color: var(--panel-btn-disabled) !important;
  color: var(--panel-btn-disabled-text) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Icon sizing for desktop actions */
.panel-accordion-actions .panel-header-action svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* Stage filter in header */
.panel-header-action-wrapper {
  display: flex;
  align-items: center;
}

.panel-accordion-actions .stage-filter-wrapper {
  display: flex;
  align-items: center;
}

.panel-accordion-actions .stage-filter-wrapper .form-select,
.mobile-leaderboard-buttons .stage-filter-wrapper .form-select {
  padding: 8px !important;
  font-family: "DINLight" !important;
  font-size: 14px !important;
  border: 0px !important;
  background-color: rgba(255,255,255,0.05) !important;
  color: #fff !important;
  height: 44px !important;
  border-radius: 7px !important;
  transition: all 0.2s ease !important;
  appearance: auto;
}

.panel-accordion-actions .stage-filter-wrapper .form-select:hover,
.mobile-leaderboard-buttons .stage-filter-wrapper .form-select:hover {
  background-color: rgba(255,255,255,0.1) !important;
}

.panel-accordion-actions .stage-filter-wrapper .form-select:focus,
.mobile-leaderboard-buttons .stage-filter-wrapper .form-select:focus {
  outline: none !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(245, 72, 77, 0.1) !important;
}

/* Dark mode support */
.dark-mode-active .panel-accordion-actions .stage-filter-wrapper .form-select,
.dark-mode-active .mobile-leaderboard-buttons .stage-filter-wrapper .form-select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
}

.dark-mode-active .panel-accordion-actions .stage-filter-wrapper .form-select:hover,
.dark-mode-active .mobile-leaderboard-buttons .stage-filter-wrapper .form-select:hover {
  background-color: #363636 !important;
}

/* Mobile specific */
.mobile-leaderboard-buttons .stage-filter-wrapper {
  width: 100%;
  margin-top: 10px;
}

.mobile-leaderboard-buttons .stage-filter-wrapper .form-select {
  width: 100% !important;
}

/* Desktop actions styling */
.panel-accordion-actions .panel-header-action {
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--panel-text) !important;
}

.panel-accordion-actions .panel-header-action:hover:not(:disabled) {
  background-color: #404040 !important;
}

.panel-accordion-actions .panel-header-action:disabled {
  background-color: var(--panel-title) !important;
  color: var(--panel-text) !important;
  opacity: 1 !important;
}

/* Icona espansione rimane all'estrema destra */
.MuiAccordionSummary-root .MuiAccordionSummary-expandIconWrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
  order: 3; /* Assicura che sia sempre ultima */
  flex-shrink: 0;
}

/* Mobile Panel Title */
.mobile-panel-title {
  padding: 20px 0.5rem 0.5rem;
  background-color: var(--panel-bg);
  text-align: left;
}

.mobile-panel-title h2,
.carousel-panel .mobile-panel-title h2,
.mobile-panel-title h2,
.carousel-panel .mobile-panel-title h2 {
  margin: 0 !important;
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-family: "DINBold", sans-serif !important;
  font-weight: normal !important;
  text-align: left !important;
}

/* Mobile leaderboard buttons - from OnGoingRumblePage.css */
.mobile-leaderboard-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  margin-left: 10px;
}

.mobile-leaderboard-buttons .btn {
  padding: 8px !important;
  font-size: 12px !important;
  border-radius: var(--panel-radius-secondary) !important;
  border: none !important;
  background-color: var(--panel-title) !important;
  color: var(--panel-text) !important;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  /* box-shadow removed as requested */
}

.mobile-leaderboard-buttons .btn:hover:not(:disabled) {
  background-color: #e03e43 !important;
  transform: scale(1.05);
}

.mobile-leaderboard-buttons .btn:active:not(:disabled) {
  transform: scale(0.95);
}

.mobile-leaderboard-buttons .btn:disabled {
  background-color: var(--panel-btn-disabled) !important;
  color: var(--panel-btn-disabled-text) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  pointer-events: auto !important;
}

.mobile-leaderboard-buttons .btn svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* Dark mode support */
.mobile-leaderboard-buttons .btn {
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--panel-text) !important;
}

.mobile-leaderboard-buttons .btn:hover:not(:disabled) {
  background-color: #404040 !important;
}

.mobile-leaderboard-buttons .btn:disabled {
  background-color: var(--panel-title) !important;
  color: var(--panel-text) !important;
  opacity: 1 !important;
}

/* Fix for dropdown menus being cut off */
.panel-container:has(.dropdown-menu.show),
.panel-container-mobile:has(.dropdown-menu.show),
.carousel-panel:has(.dropdown-menu.show),
.mobile-panels-carousel-wrapper:has(.dropdown-menu.show),
.panel-content-body:has(.dropdown-menu.show) {
  overflow: visible !important;
}

/* Ensure dropdown menus appear above everything */
.dropdown-menu.show {
  z-index: 9999 !important;
}

/* Ensure main-info-panel allows overflow for dropdown */
.main-info-panel {
  overflow: visible !important;
}

.main-info-panel:has(.suggestions-dropdown),
.main-info-panel:has(.map-search-overlay) {
  overflow: visible !important;
  z-index: auto;
}

/* Fix for prize/sponsor select dropdowns */
.panel-content-body:has(.prize-rank-select),
.carousel-panel:has(.prize-rank-select),
.MuiAccordionDetails-root:has(.prize-rank-select),
.realtime-leaderboard-container:has(.prize-rank-select) {
  overflow: visible !important;
}

/* Ensure ItemEditor containers allow overflow */
.panel-content-body:has(.prizes-editor),
.carousel-panel:has(.prizes-editor),
.panel-content-body:has(.sponsors-editor),
.carousel-panel:has(.sponsors-editor) {
  overflow: visible !important;
}

/* Fix for prize item containers */
.prize-item-editable,
.prize-item-modern.prize-item-editable {
  overflow: visible !important;
}

/* Remove shadows from print button */
.panel-header-print-action,
.panel-header-print-action.MuiIconButton-root,
.MuiButtonBase-root.MuiIconButton-root.panel-header-print-action {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ======================== */
/* Sponsor Marquee System   */
/* ======================== */

/* Marquee container styles */
.sponsors-marquee-main {
  position: relative;
}

.sponsors-marquee-main .rfm-initial-child-container,
.sponsors-marquee-main .rfm-marquee {
  line-height: 40px;
}

.sp.top-text .ct-top-text {
  font-size: 74px;
}

/* Sponsor list item - Glass effect version (migrated from custom.css) */
.sponsor-marquee-list {
  height: 150px !important;
  min-width: 300px !important;
  display: flex;
  align-items: center;
  margin-right: 20px;
  background: rgba(33, 37, 41, 0.6) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 10px;
  border: none !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Legacy style compatibility */
.sponsor-marquee-list:not(.no-image) {
  width: 410px;
}

/* Sponsor images */
.sponsor-marquee-list img {
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  min-width: 150px !important;
  min-height: 150px !important;
  object-fit: cover;
  margin-right: 20px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  flex-shrink: 0;
}

/* Sponsors without image */
.sponsor-marquee-list.no-image {
  width: 300px !important; /* Fixed width as requested */
  padding: 0 15px;
}

/* Text container */
.sponsor-marquee-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  padding: 10px !important;
  justify-content: center !important;
  height: 100%;
}

/* Sponsor name */
.m-sponsor-name {
  font-family: "DINBold";
  font-size: 20px;
  display: block;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sponsor links */
.sponsor-links {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
}

.sponsor-links a {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: #000;
  font-family: "DINRegular";
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark mode styles */
.dark-mode-active .sponsor-marquee-list {
  background-color: rgb(33,37,41);
  border-color: rgb(33,37,41);
}

.dark-mode-active span.sponsor-links a {
  color: #fff;
}

/* Text truncation utility class */
.sponsor-marquee-text-truncate {
  display: inline-block;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Specific truncation for sponsor name */
.m-sponsor-name.sponsor-marquee-text-truncate {
  max-width: 200px;
}

/* Apply truncation to all text elements */
.sponsor-marquee-text > * {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Apply truncation to TruncatedText components */
.sponsor-marquee-text .sponsor-marquee-text-truncate {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sponsor marquee container padding */
.sponsor-marquee-container {
  padding: 1rem 0 !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Fix sponsor marquee list overflow */
.sponsor-marquee-list {
  overflow: hidden;
}

/* Fix text container to prevent overlap */
.sponsor-marquee-text {
  overflow: hidden;
}

/* Additional mobile-specific fix to ensure no inheritance issues */
@media (max-width: 767px) {
  .sponsor-marquee-list img {
    /* Force dimensions on mobile to override any Bootstrap or global rules */
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    display: block;
  }
  
  /* Add background to sponsor cards on mobile */
  .sponsor-marquee-list {
    background: rgba(255, 255, 255, 0.05) !important;
  }
  
  /* Fix sponsor marquee spacing on mobile - compensate for carousel-panel padding:0 */
  .carousel-panel .sponsor-marquee-container {
    margin: 1rem 0 !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Additional specificity for OngoingRumblePage mobile - use only margin */
  .ongoing-acoordion-main-container .carousel-panel .sponsor-marquee-container {
    margin: 1rem 0 !important;
  }
  
  /* Increase max-height for event description box on mobile */
  .event-description-container,
  .event-description-content {
    max-height: 120px !important;
  }
}

/* Mobile Dots Navigation */
.mobile-dots-navigation {
  position: fixed;
  bottom: 65px; /* Closer to menu, minimal gap */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000; /* Below mobile menu but above content */
  padding: 0px 0px 0px 8px; /* Asymmetric padding for visual balance */
  background: rgba(0, 0, 0, 0.3); /* Subtle dark background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px; /* Pill shape */
  display: flex;
  justify-content: center;
}

/* Padding adjustment for pages without advanced options */
.mobile-dots-navigation.no-advanced {
  padding: 6px 8px;
}

.dots-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  border: none;
  padding: 0;
}

.nav-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

.nav-dot.active {
  width: 24px; /* Elongated when active */
  height: 8px;
  border-radius: 4px;
  background: #ff0000; /* Bright red for active */
}

/* Mobile Specific */
@media (max-width: 767px) {
  .panel-header {
    padding: 10px 12px;
  }
  
  .panel-content {
    padding: 0.5rem;
    background-color: var(--panel-bg);
  }
  
  .panel-indicators {
    padding: 10px;
  }
  
  .panel-indicator {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .mobile-panels-carousel-wrapper {
    min-height: calc(100vh - 200px);
    background-color: var(--panel-bg);
  }
  
  .mobile-panels-carousel-container {
    min-height: 100%;
  }
  
  .carousel-panel {
    background-color: var(--panel-bg);
    min-height: 100%;
  }
  
  .main-info-panel-container,
  .registration-dashboard-panel-container {
    margin: 0;
    border-radius: 0;
    background-color: var(--panel-bg);
  }
  
  /* Ensure content is visible */
  .panel-content-body {
    color: var(--panel-text);
  }
  
  /* Prevent horizontal overflow on mobile */
  body:has(.panel-container-mobile) {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Ensure page layout doesn't overflow */
  .page-layout-container:has(.panel-container-mobile),
  .page-layout-wraper:has(.panel-container-mobile) {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Ensure forms don't create overflow */
  form:has(.panel-container-mobile) {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Ensure panels wrapper doesn't overflow */
  .panels-wrapper {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Ensure w-1320 doesn't create overflow on mobile */
  .w-1320 {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Print Mode */
@media print {
  .panel-header-actions,
  .panel-header-expand-icon,
  .panel-indicators {
    display: none !important;
  }
  
  .panel-accordion {
    break-inside: avoid;
    margin-bottom: 20px;
  }
  
  .panel-blur-content {
    filter: none !important;
  }
  
  .panel-blur-message {
    display: none !important;
  }
}

/* AGGRESSIVE OVERRIDES - Ensure styles are applied */

/* Force all panel backgrounds */
/* COMMENTED OUT - Impacting unwanted backgrounds
div[class*="panel"]:not(.panel-container-desktop),
div[class*="accordion"],
div[class*="panel"]:not(.panel-container-desktop),
div[class*="accordion"] {
  background-color: var(--panel-bg) !important;
}
*/

/* Specific override for accordion-header - MUST be transparent */
.custom-accordion .accordion-header,
.accordion-header,
div.accordion-header,
.custom-accordion .accordion-header,
.accordion-header,
div.accordion-header {
  background-color: transparent !important;
  background: transparent !important;
}

/* Force all panel titles - Desktop */
.MuiAccordionSummary-content > div,
.MuiAccordionSummary-content > div > div,
.MuiAccordionSummary-content > div > div > div,
.adddata-create-accordion-title div,
.MuiAccordionSummary-content > div,
.MuiAccordionSummary-content > div > div,
.MuiAccordionSummary-content > div > div > div {
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-weight: normal !important;
  font-family: "DINBold", sans-serif !important;
  text-align: left !important;
}

/* Force all panel titles - Mobile */
.mobile-panel-title h2,
.mobile-panel-title h2,
.carousel-panel.active .mobile-panel-title h2,
.carousel-panel.active .mobile-panel-title h2 {
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-weight: normal !important;
  font-family: "DINBold", sans-serif !important;
  text-align: left !important;
}

/* Force Typography components in panels */
.panel-accordion .MuiTypography-root,
.adddata-create-accordion-title .MuiTypography-root,
.panel-accordion-summary .MuiTypography-root,
.panel-accordion .MuiTypography-root {
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-weight: normal !important;
  font-family: "DINBold", sans-serif !important;
}

/* NUCLEAR OVERRIDE - Typography variant h6 (mobile) */
.mobile-panel-title .MuiTypography-h6,
.mobile-panel-title .MuiTypography-root[variant="h6"],
.carousel-panel .mobile-panel-title .MuiTypography-h6,
.mobile-panel-title .MuiTypography-h6,
h2.MuiTypography-root.MuiTypography-h6,
.MuiTypography-h6.css-2ulfj5-MuiTypography-root,
.MuiTypography-h6.css-10wpov9-MuiTypography-root {
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-weight: normal !important;
  font-family: "DINBold", sans-serif !important;
  text-align: left !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

/* NUCLEAR OVERRIDE - Typography variant body1 (desktop) */
.panel-header-title.MuiTypography-body1,
.panel-header-title.MuiTypography-root,
.MuiAccordionSummary-content .MuiTypography-body1,
.adddata-create-accordion-title .MuiTypography-body1,
.panel-header-title.MuiTypography-body1,
div.MuiTypography-root.MuiTypography-body1.panel-header-title,
.MuiTypography-body1.css-ahj2mt-MuiTypography-root,
.MuiTypography-body1.css-9l3uo3-MuiTypography-root {
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-weight: normal !important;
  font-family: "DINBold", sans-serif !important;
  text-align: left !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

/* EXTREME OVERRIDE - ALL Typography in panel headers */
.MuiAccordionSummary-root .MuiTypography-root,
.mobile-panel-title .MuiTypography-root,
.panel-header .MuiTypography-root,
[class*="MuiAccordionSummary"] [class*="MuiTypography"],
[class*="mobile-panel-title"] [class*="MuiTypography"] {
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-weight: normal !important;
  font-family: "DINBold", sans-serif !important;
}

/* LAST RESORT - Override all possible variations */
.MuiTypography-root:is(.panel-header-title),
.MuiTypography-root:where(.panel-header-title),
h2:is(.MuiTypography-root),
h2:where(.MuiTypography-root),
.MuiAccordionSummary-content.Mui-expanded.MuiAccordionSummary-contentGutters > div > div > div,
.carousel-panel.active .mobile-panel-title h2 {
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-weight: normal !important;
  font-family: "DINBold", sans-serif !important;
  text-align: left !important;
}

/* Desktop only - add border radius to main-info-content */
@media (min-width: 768px) {
  .main-info-content {
    border-radius: var(--panel-radius);
    overflow: hidden;
  }
  
  /* Allow overflow for dropdown */
  .main-info-content:has(.suggestions-dropdown),
  .main-info-content:has(.map-search-overlay) {
    overflow: visible !important;
  }
  
  /* Allow overflow for map container to show toggle button */
  .main-info-content > div:first-child {
    overflow: visible;
  }
}

/* ABSOLUTE NUCLEAR - Target exact DOM paths from inspector */
#root .page-layout-container .ongoing-acoordion-main-container .MuiAccordionSummary-content > div > div > div,
#root .mobile-panels-carousel-wrapper .carousel-panel.active .mobile-panel-title h2,
.css-9xwfbw-MuiButtonBase-root-MuiAccordionSummary-root .css-eqpfi5-MuiAccordionSummary-content > div > div > div {
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-weight: normal !important;
  font-family: "DINBold", sans-serif !important;
  text-align: left !important;
}

/* Override ANY h2 or div inside panel titles */
.mobile-panel-title h2,
.mobile-panel-title > *,
.MuiAccordionSummary-content > div > div > div,
.panel-header-title,
.panel-header-title > * {
  color: var(--panel-title) !important;
  font-size: 22px !important;
  font-weight: normal !important;
  font-family: "DINBold", sans-serif !important;
}

/* ABSOLUTE NUCLEAR BACKGROUND OVERRIDES */
/* Force background on EVERY panel-related element EXCEPT panel-container-desktop and mobile-dots-navigation */
.panel-container-mobile,
.mobile-panels-carousel-wrapper,
.mobile-panels-carousel-container,
.carousel-panel,
.mobile-panel-title,
.panel-content,
.panel-content-body,
.panel-content-footer,
.panel-accordion,
.panel-accordion-summary,
.panel-accordion-details,
.panel-header,
.panel-header-content,
.panel-blur-container,
.panel-blur-content,
.MuiAccordion-root,
.MuiAccordionSummary-root,
.MuiAccordionDetails-root,
.adddata-create-accordion-title,
.adddata-create-accordion-item,
.main-info-panel-container,
.registration-dashboard-panel-container {
  background-color: var(--panel-bg) !important;
  background: var(--panel-bg) !important;
}

/* Override panel backgrounds for ALL ant-picker elements - MUST BE AFTER the main selector */
.ant-picker-dropdown:not(.ant-picker-panel-layout),
.ant-picker-dropdown *:not(.ant-picker-panel-layout),
.ant-picker-panel-container:not(.ant-picker-panel-layout),
.ant-picker-panel-container *:not(.ant-picker-panel-layout),
.ant-picker-time-panel:not(.ant-picker-panel-layout),
.ant-picker-time-panel *:not(.ant-picker-panel-layout),
.ant-picker-time-panel-column:not(.ant-picker-panel-layout),
.ant-picker-time-panel-column *:not(.ant-picker-panel-layout),
.ant-picker-time-panel-cell:not(.ant-picker-panel-layout),
.ant-picker-time-panel-cell *:not(.ant-picker-panel-layout) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Then re-apply the correct backgrounds */
/* COMMENTED OUT - Impacting unwanted backgrounds
.ant-picker-dropdown .ant-picker-panel,
.ant-picker-dropdown .ant-picker-time-panel {
  background: rgba(26, 26, 26, 0.95) !important;
}
*/

/* Specific override for accordion-header to remove background - highest specificity */
.accordion-header,
.custom-accordion .accordion-header,
div.accordion-header,
[class*="accordion-header"],
.info-drawer-content .accordion-header,
.rumble-ruls-container .accordion-header,
.dark-mode .accordion-header,
.dark-mode-active .accordion-header {
  background-color: transparent !important;
  background: transparent !important;
}

/* Force event description content to have proper background */
.event-description-content,
.custom-accordion .event-description-content,
.info-drawer-content .event-description-content,
.dark-mode .event-description-content,
.dark-mode-active .event-description-content,
[class*="panel"] .event-description-content,
[class*="accordion"] .event-description-content {
  background-color: transparent !important;
  background: transparent !important;
}

/* Mobile dots navigation background is already defined above at line 1170 */

/* Ensure consistent width/spacing for panels without accordion */
.panel-container-desktop > .main-info-panel-container {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: var(--panel-radius);
  box-shadow: none;
  border: none;
  /* Match accordion item styling */
  background-color: var(--panel-bg) !important;
}

/* Ensure NO background on container elements - MUST BE LAST */
.panel-container-desktop,
.ongoing-acoordion-main-container,
.ongoing-acoordion-main-container.w-1320,
.panel-container-desktop,
.ongoing-acoordion-main-container,
.ongoing-acoordion-main-container.w-1320,
body .panel-container-desktop,
body .ongoing-acoordion-main-container,
body .panel-container-desktop,
body .ongoing-acoordion-main-container {
  background: none !important;
  background-color: transparent !important;
}

/* Stage Accordion Styles */
.stage-item-container {
  margin-bottom: 0.5rem;
}

.stage-row-header {
  position: relative;
  padding-right: 60px !important; /* Spazio per icona */
}

.stage-expand-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  cursor: pointer;
  color: #a3a3a3;
  font-size: 1.8rem;
  z-index: 2;
  padding: 8px;
}

.stage-expand-icon:hover {
  color: var(--panel-title);
}

.stage-expand-icon.rotated {
  transform: translateY(-50%) rotate(180deg);
}

.stage-expanded-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  background: var(--panel-bg);
  margin-top: -0.5rem;
  margin-bottom: 0;
  border-radius: 0 0 var(--panel-radius-secondary) var(--panel-radius-secondary);
}

.stage-expanded-content.expanded {
  max-height: 1200px; /* Adjust based on content */
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  /* Allow dropdowns to be visible while preventing horizontal scroll */
  overflow-x: visible;
  overflow-y: visible;
}

/* Compact version of RumbleInfoTop for stages */
.stage-expanded-content .rumble-info-top {
  padding: 0;
  background: transparent;
}

/* Style for buttons inside expanded stages */
.stage-expanded-content button.btn.btn-secondary {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Make specific elements transparent, excluding badges and animated elements */
.stage-expanded-content .rumble-info-top > div:not(.rounded-pill):not([class*="animate"]):not([class*="badge"]):not([class*="pulse"]) {
  background-color: transparent !important;
}

/* Preserve status badges and animated elements */
.stage-expanded-content .rounded-pill,
.stage-expanded-content [class*="animate"],
.stage-expanded-content [class*="badge"],
.stage-expanded-content [class*="pulse"],
.stage-expanded-content .px-2.py-1.rounded-pill {
  /* These elements keep their original backgrounds and animations */
}

.stage-expanded-content .rumble-cover-img,
.stage-expanded-content .rumble-info-top .rumble-cover-img {
  height: 150px !important; /* Più piccola */
  max-height: 150px !important;
}

.stage-expanded-content .info-text {
  font-size: 0.9rem;
}

.stage-expanded-content .rumble-header-main {
  padding: 0.5rem 0;
}

/* Hide some elements in compact view */
.stage-expanded-content .sponsor-marquee-container {
  display: none;
}

/* Stage info wrapper */
.stage-info-wrapper {
  position: relative;
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards;
  animation-delay: 0.1s;
  margin: 0;
  padding: 0;
}

/* Override w-1320 class inside stage accordions to prevent overflow */
.stage-expanded-content .w-1320,
.stage-expanded-content .rum-data-new-style-container {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Style for the grid stats section in RumbleInfoTop */
/* Apply background to the entire grid container, not just individual grid elements */
.stage-expanded-content .rum-data-new-style-container > div > div:nth-child(2) {
  background: transparent !important;
  padding: 0.75rem !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Ensure nested grid elements don't get double background */
.stage-expanded-content .rum-data-new-style-container div[style*="display: grid"],
.stage-expanded-content .rum-data-new-style-container div[style*="display:grid"] {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Fix overflow issues on desktop for accordion content */
@media (min-width: 768px) {
  /* Ensure all direct children respect the container padding */
  .stage-expanded-content > * {
    box-sizing: border-box;
  }
}

/* Border radius adjustments when stage is expanded */
.stage-item.expanded .stage-row-header {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Remove top corners radius for map section when stage is expanded */
.stage-item.expanded .stage-expanded-content .position-relative[style*="borderTopLeftRadius"] > div:first-child,
.stage-item.expanded .stage-expanded-content div[style*="borderTopLeftRadius"],
.stage-item.expanded .stage-expanded-content .rum-data-new-style-container > div > div:first-child {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Force map corners to 0px in stage accordions - more specific selectors */
.stage-expanded-content .rum-data-new-style-container > div > div:first-child > div[style*="height"] {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Also remove radius from images and MapBox components */
.stage-expanded-content img[style*="borderTopLeftRadius"],
.stage-expanded-content .mapboxgl-map,
.stage-expanded-content div[style*="borderTopLeftRadius: 10"] {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .stage-row-header {
    padding-right: 50px !important;
  }
  
  .stage-expand-icon {
    font-size: 1.5rem;
    padding: 6px;
  }
  
  .stage-expanded-content.expanded {
    padding: 0;
    margin: 0;
  }
  
  .stage-expanded-content .rumble-cover-img,
  .stage-expanded-content .rumble-info-top .rumble-cover-img {
    height: 120px !important;
    max-height: 120px !important;
  }
  
  /* Control map height in accordion on mobile */
  .stage-expanded-content .mapboxgl-map,
  .stage-expanded-content .mapboxgl-canvas-container,
  .stage-expanded-content .mapboxgl-canvas {
    height: 25vh !important;
    min-height: 150px !important;
    max-height: 25vh !important;
  }
  
  .stage-expanded-content .position-relative[style*="height"] {
    height: 25vh !important;
    min-height: 150px !important;
    max-height: 25vh !important;
  }
}

/* Event Description Content Styles - For HTML formatted text */
.event-description-container {
  width: 100%;
}

.event-description-content {
  padding: 1rem;
  /* Reset default styles */
  font-family: inherit;
  font-size: inherit;
  line-height: 1.6;
  color: #d1d5db;
}

/* Paragraphs */
.event-description-content p {
  margin: 0 0 1rem 0;
  line-height: 1.6;
}

.event-description-content p:last-child {
  margin-bottom: 0;
}

/* Headings */
.event-description-content h1,
.event-description-content h2,
.event-description-content h3,
.event-description-content h4,
.event-description-content h5,
.event-description-content h6 {
  margin: 1.5rem 0 0.75rem 0;
  font-weight: 600;
  line-height: 1.3;
  color: #f8f9fa;
}

.event-description-content h1:first-child,
.event-description-content h2:first-child,
.event-description-content h3:first-child,
.event-description-content h4:first-child,
.event-description-content h5:first-child,
.event-description-content h6:first-child {
  margin-top: 0;
}

/* Lists */
.event-description-content ul,
.event-description-content ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
}

.event-description-content li {
  margin-bottom: 0.25rem;
  line-height: 1.6;
}

/* Links */
.event-description-content a {
  color: #F5484D;
  text-decoration: underline;
  transition: color 0.2s;
}

.event-description-content a:hover {
  color: #dc2626;
}

/* Strong and emphasis */
.event-description-content strong,
.event-description-content b {
  font-weight: 600;
  color: #f8f9fa;
}

.event-description-content em,
.event-description-content i {
  font-style: italic;
}

/* Blockquote */
.event-description-content blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid #F5484D;
  color: #adb5bd;
  font-style: italic;
}

/* Code */
.event-description-content code {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.event-description-content pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1rem 0;
}

.event-description-content pre code {
  background: none;
  padding: 0;
}

/* Horizontal rule */
.event-description-content hr {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tables */
.event-description-content table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
}

.event-description-content th,
.event-description-content td {
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.event-description-content th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  color: #f8f9fa;
}

/* Images */
.event-description-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1rem 0;
}

/* =============================================== */
/* Panels Wrapper - Centralized Spacing */
/* =============================================== */

/* Main panels wrapper - standardized gap between panels */
.panels-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Standard gap between panels */
}

/* Desktop specific adjustments */
@media (min-width: 768px) {
  .panels-wrapper {
    gap: 1.5rem; /* Consistent gap on desktop */
  }
  
  /* Ensure proper border radius on desktop */
  .panel-content,
  .panel-content-body,
  .adddata-create-accordion-item,
  .MuiAccordion-root {
    border-radius: var(--panel-radius) !important;
    overflow: hidden;
  }
  
  /* Panel container spacing */
  .panel-container-desktop .MuiAccordion-root {
    margin-bottom: 1.5rem !important;
  }
  
  .panel-container-desktop .MuiAccordion-root:last-child {
    margin-bottom: 0 !important;
  }
}

/* Mobile specific adjustments */
@media (max-width: 767px) {
  .panels-wrapper {
    gap: 0; /* No gap on mobile carousel */
  }
  
  /* Remove border radius on mobile */
  .carousel-panel .panel-content,
  .carousel-panel .panel-content-body {
    border-radius: 0 !important;
  }
}

/* Centralized Mobile Panel Spacing */
@media (max-width: 767px) {
  /* Remove all lateral padding from panel containers */
  .panel-container-mobile .container,
  .carousel-panel .container,
  .panel-container-mobile .w-1320,
  .carousel-panel .w-1320,
  .panel-container-mobile [class*="container"],
  .carousel-panel [class*="container"] {
    padding-left: var(--mobile-panel-padding-horizontal) !important;
    padding-right: var(--mobile-panel-padding-horizontal) !important;
  }
  
  
  /* Panel content standard padding */
  .carousel-panel .panel-content {
    padding: var(--mobile-panel-content-padding) !important;
  }

  /* Remove only top padding from mobile panel content */
  .carousel-panel .panel-content {
    padding-top: 0 !important;
  }
}

/* Override Bootstrap container gutters in mobile panels */
@media (max-width: 767px) {
  .panel-container-mobile .container,
  .carousel-panel .container {
    --bs-gutter-x: 0;
  }
}