/* ===== LEAGUE EDIT STYLES ===== */
/* Extracted inline styles and fixes for missing styles */

/* ===== UTILITY CLASSES from CSS extraction ===== */

/* Image utilities */
.img-thumb-100 {
  width: 100px !important;
  height: 100px !important;
  object-fit: cover;
}

/* .img-thumb-130 removed - all images should be 100x100 */

/* Text utilities */
.text-optional-tag {
  font-size: 0.5rem;
  font-weight: 200;
  margin-left: 4px;
  text-transform: uppercase;
}

.text-error-primary {
  color: #ff4757;
  font-weight: 600;
  font-size: 14px;
}

.text-sponsor-name {
  color: #f8f9fa;
  font-weight: 800;
  font-size: 16px;
}

.text-upload-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

/* Layout utilities */
.flex-1-min-0 {
  flex: 1;
  min-width: 0;
}

.full-width-center {
  width: 100%;
  text-align: center;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

/* ===== ADVANCED OPTIONS CONTAINER ===== */
.advanced-options-container {
  /* Match button's red gradient scheme */
  background: linear-gradient(135deg,   /* Same angle as button */
    rgba(255, 0, 0, 0.15) 0%,          /* Slightly lighter than button */
    rgba(255, 0, 0, 0.08) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 0, 0, 0.3); /* Same border color as button */
  border-radius: 8px;                      /* Default radius, will be overridden when expanded */
  padding: 20px;
  margin: 10px 0;
  /* Remove box-shadow that creates visual separation */
}

/* Advanced button styling */
.advanced-options-container .btn-advanced {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8f9fa;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.advanced-options-container .btn-advanced:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}

/* Dark mode gradient fix */
body.dark-mode-active .advanced-options-container {
  /* Match the new red gradient scheme in dark mode too */
  background: linear-gradient(135deg,
    rgba(255, 0, 0, 0.15) 0%,
    rgba(255, 0, 0, 0.08) 100%
  );
}

/* Ensure panel headers are not affected by container background */
.advanced-options-container .panel-header {
  background: transparent !important;
}

/* ===== PRIZE SECTION STYLES ===== */
/* .prize-list-modern - moved to ItemEditor.css */

/* .prize-item-modern and :hover - moved to ItemEditor.css */

.prize-item-main {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* .prize-item-thumb-wrapper - moved to ItemEditor.css */

/* .prize-item-thumb-wrapper.sponsor-thumb - moved to ItemEditor.css */

.prize-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .prize-upload-placeholder and :hover - moved to ItemEditor.css */

/* .prize-item-details - moved to ItemEditor.css */

.prize-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prize-rank-display {
  font-size: 14px;
  font-weight: 600;
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
  padding: 4px 12px;
  border-radius: 4px;
}

.prize-item-name {
  font-weight: 600;
  color: #f8f9fa;
}

/* .prize-rank-select and :focus - moved to ItemEditor.css */

.prize-actions {
  display: flex;
  gap: 8px;
}

/* .add-prize-button-wrapper - moved to ItemEditor.css */

/* ===== SPONSOR SECTION STYLES ===== */
/* .sponsor-list-container - moved to ItemEditor.css */

/* .sponsor-list-modern - moved to ItemEditor.css */

/* .sponsor-item-modern and :hover - moved to ItemEditor.css */

/* .sponsor-item-thumb-wrapper - moved to ItemEditor.css */

/* .sponsor-name-input, .sponsor-link-input and :focus - moved to ItemEditor.css */

/* .sponsor-text-fade and ::after - moved to ItemEditor.css */

/* .sponsor-name-display - moved to ItemEditor.css */

/* .sponsor-link-display and :hover - moved to ItemEditor.css */

/* Mobile scrolling fix for sponsor panels */
.carousel-panel:has(.sponsor-list-modern) {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 250px);
}

/* Mobile scrolling fix for prize panels */
.carousel-panel:has(.prize-list-modern) {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 250px);
}

/* Fix for dropdown overflow on mobile */
.prize-rank-select {
  /* Ensure dropdowns are not cut off */
  position: relative;
}

/* Fix z-index issues for dropdowns in modal/panel context */
.carousel-panel .prize-rank-select,
.panel-content .prize-rank-select {
  z-index: 9999;
}

/* Fix for dropdown menu visibility */
.carousel-panel:has(.prize-rank-select:focus),
.panel-content:has(.prize-rank-select:focus) {
  overflow: visible !important;
  z-index: 10;
}

/* Ensure dropdown is visible above other elements */
.prize-rank-select:focus {
  z-index: 1000;
}

/* Remove overflow constraints from prize details when editing */
.prize-item-details.editable {
  overflow: visible !important;
}

/* Fix for mobile dropdown issues */
@media (max-width: 768px) {
  .carousel-panel:has(.prize-rank-select:focus) {
    overflow: visible !important;
  }
}

/* ===== MULTI-STAGE UPDATE MISSING CLASSES ===== */
/* Classes used in MultiStageUpdate.js but not defined elsewhere */

.league-edit-page {
  min-height: calc(100vh - 120px);
  background: transparent;
  padding-bottom: 2rem;
}

.create-rumble-acco-container {
  margin: 0 auto;
  padding: 0 15px;
}

.league-edit-panels-mobile,
.league-edit-panels {
  margin-top: 1rem;
}

.league-edit-advanced-panels {
  margin-top: 0.5rem;
}

/* Ensure consistent styling with other panel containers */
.league-edit-panels-mobile .panel-container,
.league-edit-panels .panel-container {
  background: transparent;
}

/* Ant Design range picker custom styling for rumble */
.ant-range-picker-rumble.ant-picker {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.ant-range-picker-rumble.ant-picker-focused {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}

.ant-range-picker-rumble .ant-picker-input > input {
  color: #f8f9fa;
}

.ant-range-picker-rumble .ant-picker-separator,
.ant-range-picker-rumble .ant-picker-suffix {
  color: rgba(255, 255, 255, 0.45);
}

.ant-range-picker-rumble.ant-picker:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   Advanced Options Section - Desktop & Mobile
   ============================================ */
.advanced-options-wrapper {
  margin-top: 1rem;
  transition: all 0.3s ease;
}

/* Add gradient background to wrapper when expanded - like StageCreation */
.advanced-options-wrapper.expanded {
  /* Dark gradient background matching StageCreation */
  background: linear-gradient(-90deg,
    rgb(120 50 50 / 20%) 0%,
    rgb(40 20 20 / 90%) 50%,
    rgb(40 20 20 / 50%) 100%
  );
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 71, 87, 0.3);
  position: relative;
}

/* Advanced Options Toggle Button - Desktop */
.advance-option-toggle:not(.mobile-toggle) {
  width: 100%;
  padding: 1rem 1.5rem;
  /* Red gradient like mobile version */
  background: linear-gradient(135deg, 
    rgba(255, 0, 0, 0.2) 0%, 
    rgba(255, 0, 0, 0.1) 100%
  );
  color: white;
  /* Thin red border */
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 8px;
  margin-bottom: 0;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Backdrop blur for premium effect */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.advance-option-toggle:not(.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);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.2);
}

/* Advanced Options Container Animation */
.advanced-options-wrapper .advanced-options-container {
  animation: fadeIn 0.3s ease;
}

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

/* ============================================
   Toggle Continuity - Make button and container
   appear as one continuous element when expanded
   ============================================ */

/* When expanded - button becomes transparent like StageCreation */
.advanced-options-wrapper.expanded .advance-option-toggle:not(.mobile-toggle) {
  border-radius: 8px 8px 0 0;  /* Round only top corners */
  /* CHANGE: Make background transparent when expanded */
  background: transparent !important;
  /* CHANGE: Remove all borders when expanded */
  border: none !important;
  /* CHANGE: Remove backdrop filter */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin-bottom: 0;             /* Ensure no gap */
  /* ADD: Remove hover effects */
  box-shadow: none !important;
  transform: none !important;
}

/* ADD: Disable hover effects when expanded */
.advanced-options-wrapper.expanded .advance-option-toggle:not(.mobile-toggle):hover {
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* When expanded - container becomes transparent like StageCreation */
.advanced-options-wrapper.expanded .advanced-options-container {
  border-radius: 0 0 8px 8px;   /* Round only bottom corners, same radius as button */
  margin-top: 0;                 /* Remove top margin - direct connection */

  /* CHANGE: Make background transparent like StageCreation */
  background: transparent !important;
  /* CHANGE: Remove all borders */
  border: none !important;
  /* CHANGE: Remove backdrop filter */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Keep padding for content */
  padding: 20px;
}

/* ============================================
   Main Info Panel Spacing Fix
   ============================================ */
/* Fix spacing in main info panel */
.league-edit-panels .panel-content {
  padding: 1.5rem;
}

/* Ensure proper spacing between form groups in panels */
.league-edit-panels .form-group,
.league-edit-panels .mb-3,
.league-edit-advanced-panels .form-group,
.league-edit-advanced-panels .mb-3 {
  margin-bottom: 1.25rem;
}

/* Last form group in panel should not have margin */
.league-edit-panels .panel-content > *:last-child,
.league-edit-advanced-panels .panel-content > *:last-child {
  margin-bottom: 0;
}

/* Row spacing in main info panel */
.league-edit-panels .row,
.league-edit-advanced-panels .row {
  margin-bottom: 1rem;
}

.league-edit-panels .row:last-child,
.league-edit-advanced-panels .row:last-child {
  margin-bottom: 0;
}

/* Fix input group spacing */
.league-edit-panels .input-group,
.league-edit-advanced-panels .input-group {
  margin-bottom: 0.75rem;
}

/* Ensure consistent padding in panel headers */
.league-edit-panels .panel-header,
.league-edit-advanced-panels .panel-header {
  padding: 1rem 1.5rem;
}