/* ================================================================
   BOULDER MODAL STYLES
   Centralized CSS for Boulder Modal component
   Extracted from AddBoulderParticipentsJudge.css and custom.css
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Variables for Consistent Theming
   ---------------------------------------------------------------- */
:root {
  /* Background colors */
  --modal-bg-primary: rgba(255, 255, 255, 0.05);
  --modal-bg-hover: rgba(255, 255, 255, 0.15);
  --modal-bg-secondary: rgba(33, 37, 41, 0.95);

  /* Border colors */
  --modal-border: rgba(255, 255, 255, 0.1);
  --modal-border-light: rgba(255, 255, 255, 0.2);

  /* Text colors */
  --modal-text: #f8f9fa;
  --modal-text-secondary: rgba(248, 249, 250, 0.8);
  --modal-placeholder: rgba(255, 255, 255, 0.6);

  /* Brand colors */
  --rumble-red: rgba(245, 72, 77, 0.9);
  --rumble-green: rgba(185, 255, 102, 0.9);
  --rumble-yellow: #f5a623;

  /* Shadow effects */
  --modal-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  --modal-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------------------------------
   Modal Structure
   ---------------------------------------------------------------- */

/* FROM AddBoulderParticipentsJudge.css lines 898-900 */
.fade.edit-boulder-field-modal.backModal-display.modal.show {
  display: none !important;
}

/* Mobile top section margin for better spacing */
.edit-boulder-field-modal .modal-body > div > div > div.mb-3.d-flex.align-items-stretch.gx-2.row {
  margin-top: 0.5rem;
}

/* FROM AddBoulderParticipentsJudge.css lines 901-906 */
.backModal-display {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

/* FROM AddBoulderParticipentsJudge.css lines 1355-1358 */
@media (min-width: 767px) and (max-width: 1024px) {
  .edit-boulder-field-modal .modal-dialog {
    max-width: 95%;
    width: auto;
  }
}

/* FROM AddBoulderParticipentsJudge.css lines 1361-1364 */
@media (min-width: 767px) and (max-width: 1024px) {
  .edit-boulder-field-modal .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* FROM AddBoulderParticipentsJudge.css lines 1366-1368 */
@media (min-width: 767px) and (max-width: 1024px) {
  .edit-boulder-field-modal .modal-body {
    overflow-y: auto;
  }
}

/* NEW FIX - Remove padding from modal body */
.edit-boulder-field-modal .modal-body {
  padding: 0 !important;
}

/* ----------------------------------------------------------------
   Main Container
   ---------------------------------------------------------------- */

/* FROM AddBoulderParticipentsJudge.css lines 178-184 - MODIFIED */
.add-bouldersdata-container {
  background-color: var(--modal-bg-primary);  /* Using CSS variable */
  padding: 1rem;  /* CHANGED from 30px */
  border-radius: 0;  /* CHANGED from 10px */
  display: flex;
  justify-content: space-between;
}

/* Dark mode modal content background */
.dark-mode-active .edit-boulder-field-modal .modal-content {
  background: rgba(33, 37, 41, 0.85);
}

/* Modal header customization */
.edit-boulder-field-modal .modal-header {
  border-bottom: none !important;
}

.edit-boulder-field-modal .modal-title {
  color: #ffffff;
  font-family: "DINBold", sans-serif;
  font-size: 20px;
}

/* Close button styling */
.edit-boulder-field-modal .modal-header .btn-close {
  filter: invert(1);
  opacity: 0.8;
}

.edit-boulder-field-modal .modal-header .btn-close:hover {
  opacity: 1;
}

/* REMOVED dark mode rule - using dark by default */
/* DELETED lines 185-187 */

/* FROM AddBoulderParticipentsJudge.css lines 1126-1130 - MODIFIED for proper spacing */
@media (max-width: 767px) {
  .add-bouldersdata-container {
    padding-left: 0; /* Padding is handled by modal-body */
    padding-right: 0; /* Padding is handled by modal-body */
    padding-top: 0.5rem;
    flex-direction: column;
    align-items: stretch; /* Full width instead of center */
    width: 100%;
    /* Modern CSS: scroll-padding-bottom reserves space during scroll without visual padding */
    overflow-y: auto;
    scroll-padding-bottom: 100px;
  }

  /* Fallback for older browsers */
  @supports not (scroll-padding-bottom: 1px) {
    .add-bouldersdata-container {
      padding-bottom: 100px;
    }
  }
}

/* ----------------------------------------------------------------
   Form Controls (Generic - for any future forms)
   ---------------------------------------------------------------- */

/* Placeholder text colors for better visibility - removed unused .add-bouldersdata-right-col */

/* Apply dark styles to main container textarea and selects */
.add-bouldersdata-main textarea.form-control {
  background-color: var(--modal-bg-primary) !important;
  border: 1px solid var(--modal-border);
  color: var(--modal-text);
  font-size: 16px;
  font-family: "DINLight";
  padding: 8px 14px;
  height: 100%;
  min-height: 100px;
}

.add-bouldersdata-main textarea.form-control:focus {
  background-color: var(--modal-bg-hover) !important;
  box-shadow: none !important;
  border-color: inherit !important;
  outline: none !important;
}

.add-bouldersdata-main textarea.form-control::placeholder {
  color: var(--modal-placeholder) !important;
  opacity: 1;
}

/* Make textarea fill available height */
.add-bouldersdata-main .flex-grow-1 textarea.text-area {
  height: 100% !important;
  min-height: inherit;
}

/* Apply dark styles to select elements in expanded content */
.edit-boulder-field-modal .option-switch-expanded-content select.form-select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8f9fa !important;
  font-size: 16px;
  font-family: "DINLight";
  padding: 8px 14px;
  /* Custom white chevron - fixed size and no-repeat */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}

.edit-boulder-field-modal .option-switch-expanded-content select.form-select:focus {
  background-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  border-color: inherit !important;
  outline: none !important;
  /* Ensure chevron doesn't repeat on focus */
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}

/* Prevent chevron duplication in opened state */
.edit-boulder-field-modal .option-switch-expanded-content select.form-select::-ms-expand {
  display: none;
}

.sector-and-position-sec .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1;
}

.dark-mode-active .dropdown-menu .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1;
}

/* Browser compatibility for placeholders */
.sector-and-position-sec .form-control::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1;
}

.sector-and-position-sec .form-control::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1;
}

.sector-and-position-sec .form-control:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1;
}

/* ----------------------------------------------------------------
   Image Upload Buttons
   ---------------------------------------------------------------- */

/* Removed unused .addata-img-btn class - not used in current implementation */

/* ----------------------------------------------------------------
   Beta Video Button
   ---------------------------------------------------------------- */

/* Beta video section - match image placeholder width */
.d-flex.beta-upd-video {
  width: 240px;
  gap: 8px;
  display: flex;
}

/* FROM AddBoulderParticipentsJudge.css lines 893-896 */
.d-flex.beta-upd-video button,
.d-flex.beta-upd-video label {
  background-color: #9747ff;
  flex: 1;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  cursor: pointer;
  border: none;
  color: #ffffff;
  font-family: "DINBold", sans-serif;
  transition: all 0.2s ease;
}

.d-flex.beta-upd-video button:hover,
.d-flex.beta-upd-video label:hover {
  background-color: #8030e6;
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------
   Advanced Settings Section
   ---------------------------------------------------------------- */

/* FROM AddBoulderParticipentsJudge.css lines 295-298 */
.boulders-advance-container {
  margin-top: 50px;
  margin-bottom: 50px;
}

/* FROM AddBoulderParticipentsJudge.css lines 300-303 */
.boulders-advance-f-row {
  width: 100%;
  display: flex;
}

/* FROM AddBoulderParticipentsJudge.css lines 305-307 */
.boulders-advance-left-col {
  width: 33.33%;
}

/* FROM AddBoulderParticipentsJudge.css lines 309-311 */
.boulders-advance-right-col {
  width: 33.33%;
}

/* FROM AddBoulderParticipentsJudge.css lines 313-315 */
.boulders-advance-left-col .form-control {
  width: 70%;
}

/* FROM AddBoulderParticipentsJudge.css lines 317-320 */
.boulders-advance-right-col .form-control,
.boulders-advance-right-col .form-select {
  width: 70%;
}

/* FROM AddBoulderParticipentsJudge.css lines 322-326 */
.boulders-advance-s-row {
  width: 100%;
  display: flex;
  margin-top: 20px;
}

/* FROM AddBoulderParticipentsJudge.css lines 234-239 */
.boulders-advance-s-row .form-select {
  width: 70%;
  color: #6b6b94;
  font-size: 16px;
  font-family: "DINLight";
  padding: 8px 12px;
}

/* FROM AddBoulderParticipentsJudge.css lines 242-245 */
.boulders-advance-s-row .form-select:focus {
  box-shadow: none;
  border-color: #6b6b9429;
}

/* Mobile styles for advanced section */
/* FROM AddBoulderParticipentsJudge.css lines 1149-1154 */
@media (max-width: 767px) {
  .boulders-advance-s-row .form-select,
  .boulders-advance-right-col .form-select {
    width: 100%;
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* FROM AddBoulderParticipentsJudge.css lines 1178-1180 */
@media (max-width: 767px) {
  .boulders-advance-f-row {
    display: block;
  }
}

/* FROM AddBoulderParticipentsJudge.css lines 1182-1184 */
@media (max-width: 767px) {
  .boulders-advance-left-col {
    width: 100%;
  }
}

/* FROM AddBoulderParticipentsJudge.css lines 1186-1189 */
@media (max-width: 767px) {
  .boulders-advance-right-col {
    width: 100%;
    margin-top: 15px;
  }
}

/* FROM AddBoulderParticipentsJudge.css lines 1191-1193 */
@media (max-width: 767px) {
  .boulders-advance-s-row {
    display: block;
  }
}

/* FROM AddBoulderParticipentsJudge.css lines 1377-1380 */
@media (min-width: 768px) and (max-width: 992px) {
  .boulders-advance-f-row label.form-label,
  .boulders-advance-s-row label.form-label {
    font-size: 18px;
  }
}

/* FROM AddBoulderParticipentsJudge.css lines 1383-1386 */
@media (min-width: 1024px) and (max-width: 1200px) {
  .modal-body .boulders-advance-f-row label.form-label,
  .modal-body .boulders-advance-s-row label.form-label {
    font-size: 18px;
  }
}

/* ----------------------------------------------------------------
   Sector and Position Section (if exists in component)
   ---------------------------------------------------------------- */

/* FROM AddBoulderParticipentsJudge.css lines 931-938 */
.dark-mode-active
  .sector-and-position-sec
  .search-cancel-btn.new-add:not(.border-0) {
  background-color: #3d3d3d;
  border-top: 1px solid #202020 !important;
  border-bottom: 1px solid #202020 !important;
  border-right: 1px solid #202020 !important;
}

/* FROM AddBoulderParticipentsJudge.css lines 939-941 */
.sector-and-position-sec .search-cancel-btn.new-add {
  padding: 12px;
}

/* FROM AddBoulderParticipentsJudge.css lines 1003-1005 */
@media (max-width: 767px) {
  .sector-and-position-sec .search-cancel-btn.new-add {
    padding: 9px !important;
  }
}

/* FROM AddBoulderParticipentsJudge.css lines 1006-1008 */
@media (max-width: 767px) {
  .sector-and-position-sec .search-f-icon {
    padding: 4px 0;
  }
}

/* Fix location searchbar - ensure inline layout */
.sector-and-position-sec .create-rum-input-container.inp-grp {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

.sector-and-position-sec .search-f-icon {
  flex-shrink: 0;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  border-radius: 4px 0 0 4px;
  display: flex;
  align-items: center;
}

.sector-and-position-sec .create-rum-input-container .form-control {
  flex: 1;
  border-radius: 0;
  border-left: none;
  border-right: none;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.sector-and-position-sec .search-cancel-btn.new-add {
  flex-shrink: 0;
  border-radius: 0 4px 4px 0;
  border-left: none;
}

/* ----------------------------------------------------------------
   Premium Gym Markers - Complete Reset and Clean Implementation
   ---------------------------------------------------------------- */

/* Map container setup - allow marker overflow for badges */
.edit-boulder-field-modal .mapboxgl-map,
.modal-body .mapboxgl-map {
  position: relative !important;
  /* Allow controlled overflow for marker badges */
}

/* Marker container - must allow overflow for star badge */
.edit-boulder-field-modal .mapboxgl-marker,
.modal-body .mapboxgl-marker {
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: auto !important;
}

/* Markers now use the correct structure and classes from newhome.css */
/* Premium markers: .marker-container.premium-marker */
/* Standard markers: .marker-container */
/* All styles are handled by newhome.css which is globally imported */

/* Fix for map container to ensure premium markers are visible */
.edit-boulder-field-modal .createrumble-map-sec,
.modal-body .createrumble-map-sec,
.option-switch-expanded-content .createrumble-map-sec {
  /* Do not override height - let JS inline style (400px) take precedence */
  position: relative !important;
}

/* Ensure parent container has proper layout */
.edit-boulder-field-modal .option-switch-expanded-content,
.modal-body .option-switch-expanded-content {
  position: relative !important;
}

/* Ensure the mapbox canvas container fills its parent properly */
.edit-boulder-field-modal .mapboxgl-canvas-container,
.modal-body .mapboxgl-canvas-container,
.option-switch-expanded-content .mapboxgl-canvas-container {
  /* Let canvas fill its parent container */
  position: relative !important;
}

/* CRITICAL: Make the interactive canvas fill its container */
.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-touch-drag-pan.mapboxgl-touch-zoom-rotate {
  height: 100% !important;
}

/* Allow controlled overflow for the map while containing it properly */
.edit-boulder-field-modal .mapboxgl-canvas-container.mapboxgl-interactive,
.modal-body .mapboxgl-canvas-container.mapboxgl-interactive {
  overflow: hidden !important; /* Contain the map canvas */
  height: 100% !important; /* Ensure it fills the height */
}

/* But allow markers themselves to show badges */
.edit-boulder-field-modal .mapboxgl-marker,
.modal-body .mapboxgl-marker {
  overflow: visible !important; /* Allow star badges to show */
  z-index: auto !important;
}

/* ----------------------------------------------------------------
   NEW: Upload Placeholder (like ItemEditor)
   ---------------------------------------------------------------- */

.boulder-upload-placeholder {
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  gap: 8px;
}

.boulder-upload-placeholder:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}

.boulder-upload-placeholder svg {
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.6);
}

.boulder-upload-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-family: "DINBold", sans-serif;
}

/* ----------------------------------------------------------------
   Image Management with Overlay (like ItemEditor)
   ---------------------------------------------------------------- */

.boulder-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.boulder-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boulder-thumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Prevent overlay from blocking image clicks */
}

.boulder-image-wrapper:hover .boulder-thumb-overlay {
  opacity: 1;
  pointer-events: auto; /* Enable interactions when visible */
}

.boulder-thumb-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 8px;
}

.boulder-thumb-controls .change-btn,
.boulder-thumb-controls .delete-btn {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.boulder-thumb-controls .change-btn {
  cursor: pointer;
}

.boulder-thumb-controls .change-btn input[type="file"] {
  display: none;
}

.boulder-thumb-controls .change-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
}

.boulder-thumb-controls .delete-btn:hover {
  background: var(--rumble-red);
  transform: scale(1.05);
}

.boulder-thumb-controls svg {
  color: #FFFFFF !important;
  width: 20px;
  height: 20px;
}

/* ----------------------------------------------------------------
   Modal Footer Buttons (restored from original)
   ---------------------------------------------------------------- */

.add-boulder-save-btn {
  color: #f3f3f3;
  font-size: 19px;
  font-family: "DINBold", sans-serif;
  background-color: #f5484d;
  border: 0;
  padding: 10px 15px;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.add-boulder-save-btn:hover {
  background-color: #d63638;
  transform: translateY(-1px);
}

.add-boulder-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.add-boulder-save-btn img {
  width: 25%;
  margin-left: 5px;
}

/* Close button specific styling */
.modal-footer .add-boulder-save-btn[style*="rgb(66"] {
  background-color: #424141 !important;
}

.modal-footer .add-boulder-save-btn[style*="rgb(66"]:hover {
  background-color: #2a2a2a !important;
}

/* Mobile adjustments for save button */
@media (max-width: 767px) {
  .add-boulder-save-btn {
    position: relative;
    font-size: 16px;
    padding: 8px 12px;
  }
}

/* ----------------------------------------------------------------
   Grade Color Dropdown Component
   ---------------------------------------------------------------- */

/* Main dropdown button */
.boulder-add-grade-dp::after {
  margin-top: 0px !important;
}

.boulder-color-grade-button-style {
  border-radius: 5px;
  font-size: 16px;
  min-width: 120px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Grade color option buttons */
.boulder-color-opt-btn {
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  min-width: 60px;
  border: none;
  font-family: "DINBold", sans-serif;
  font-weight: bold;
  transition: opacity 0.2s ease;
}

/* Ensure button text is visible with inline styles */
.boulder-color-opt-btn[style*="color: black"] {
  color: black !important;
}

.boulder-color-opt-btn[style*="color: white"] {
  color: white !important;
}

.boulder-color-opt-btn:hover {
  opacity: 0.8;
}

/* Structural styles only - let JS handle colors */
.dropdown-toggle.boulder-color-grade-button-style {
  min-width: 120px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Ensure sector dropdown gets correct background */
.sector-and-position-sec .dropdown-toggle.boulder-color-grade-button-style {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Ensure grade dropdown gets correct background when no color selected */
.grade-color-dropdown .dropdown-toggle.boulder-color-grade-button-style:not([style*="background-color"]),
.add-bouldersdata-main .grade-color-dropdown .dropdown-toggle {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Optional: enhance border when grade with color is selected */
.dropdown-toggle.boulder-color-grade-button-style[style*="background-color"] {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Remove red focus border from grade dropdown */
.grade-color-dropdown .dropdown-toggle:focus,
.boulder-color-grade-button-style:focus {
  box-shadow: none !important;
  border-color: inherit !important;
  outline: none !important;
}

/* Ensure dropdown arrow is visible */
.boulder-add-grade-dp::after {
  border-top-color: #f8f9fa;
}

/* Delete grade tag button */
.delete-grade-tag-btn {
  padding: 5px 10px;
  margin: 5px;
}

/* Button group styles for grade selector */
.dropdown-menu .btn-group {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
  margin-right: 0;
  margin-bottom: 8px;
}

.dropdown-menu .btn-group > .btn {
  position: relative;
  flex: 0 1 auto;
}

.dropdown-menu .btn-group > .boulder-color-opt-btn {
  margin: 0;
  border-radius: 4px 0 0 4px !important;
  border-right: none !important;
}

.dropdown-menu .btn-group > .delete-grade-tag-btn {
  margin: 0;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid;
  border-left: none !important;
  border-radius: 0 4px 4px 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-menu .btn-group > .delete-grade-tag-btn svg {
  width: 15px;
  height: 15px;
}

/* btn-outline-danger styles */
.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
  background-color: transparent;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

/* Delete button with dynamic border color */
.delete-grade-tag-btn[style*="border-color"] {
  background-color: transparent !important;
}

.delete-grade-tag-btn[style*="border-color"]:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.delete-grade-tag-btn svg {
  color: #f8f9fa !important;
}

/* Grade custom badge */
.grade-custom-badge {
  display: inline-block;
  padding: 0px 10px 0px;
  font-size: 14px;
  color: #fff !important;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 5px;
  background-color: rgb(33, 37, 41);
  font-family: "DINRegular", sans-serif;
}

/* ----------------------------------------------------------------
   Color Selection and Picker
   ---------------------------------------------------------------- */

.color-selection-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 5px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.color-selection-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.color-picker-wrapper {
  position: relative;
  display: inline-block;
  margin: 5px;
}

.custom-picker-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgb(51, 48, 48);
  color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  border: 2px dashed rgba(255, 255, 255, 0.4);
}

.actual-color-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  opacity: 0;
  cursor: pointer;
}

/* Create grade span */
.create-grade-span {
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
  display: inline-block;
}

/* ----------------------------------------------------------------
   Sector and Map Styles
   ---------------------------------------------------------------- */

.createrumble-map-sec-boulder {
  height: 180px;
  border-radius: 10px;
}

.sector-boulder-map {
  border-radius: 10px;
  width: 100%;
  /* height managed by RumbleData.css */
}

.sector-boulder-map .mapboxgl-popup-content {
  padding: 10px !important;
  font-family: "DINRegular", sans-serif;
}

.sector-boulder-map .mapboxgl-popup-close-button {
  position: unset !important;
  color: #f5484d;
  font-size: 20px;
}

.sector-boulder-map .mapboxgl-popup-tip {
  border-top-color: #2e2e2e;
}

/* Sector name */
span.sector-name {
  font-size: 14px;
  font-family: "DINRegular", sans-serif;
}

.dark-mode-active span.sector-name {
  color: #bcbcbc;
}

/* ----------------------------------------------------------------
   Dropdown Menu Dark Mode Styles
   ---------------------------------------------------------------- */

/* Dark mode dropdown menu */
.dark-mode-active .dropdown-menu.show {
  background-color: rgb(33, 37, 41) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dropdown specific styles */
.dropdown-menu.show[x-placement] {
  min-width: 250px;
  padding: 10px;
}

/* Search input in dropdown */
.dropdown-menu .px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.dropdown-menu .px-2 input.form-control {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8f9fa;
  margin-bottom: 0.5rem;
}

/* Flex wrap container for grade buttons */
.dropdown-menu .d-flex.flex-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px;
  padding: 0 0.5rem;
}

.dark-mode-active .dropdown-menu .form-control {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8f9fa;
}

.dark-mode-active .dropdown-menu .form-control:focus {
  background-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  border-color: inherit !important;
  outline: none !important;
}

.dark-mode-active .dropdown-menu .text-danger {
  color: #ff6b6b !important;
}

.dark-mode-active .dropdown-menu .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.3);
  color: #f8f9fa;
}

.dark-mode-active .dropdown-menu .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Dark mode for dropdown items */
.dark-mode-active .dropdown-menu .dropdown-item {
  color: #f8f9fa;
}

.dark-mode-active .dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Dark mode for button groups in dropdown */
.dark-mode-active .dropdown-menu .btn-group {
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode-active .dropdown-menu .btn-outline-danger {
  color: #ff6b6b;
  border-color: currentColor;
}

.dark-mode-active .dropdown-menu .btn-outline-danger:hover {
  background-color: rgba(255, 107, 107, 0.1);
}

/* ----------------------------------------------------------------
   Advance Option Button
   ---------------------------------------------------------------- */

.advance-option-btn {
  background-color: #f5484d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: "DINBold", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.advance-option-btn:hover {
  background-color: #d63638;
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------
   Mobile Responsive Styles for Grade Components
   ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .createrumble-map-sec-boulder {
    height: 180px;
    border-radius: 10px;
    margin-bottom: 10px;
  }

  .boulder-color-grade-button-style {
    font-size: 14px;
    min-width: 100px;
  }

  .boulder-color-opt-btn {
    font-size: 12px;
    padding: 4px 8px;
    min-width: 50px;
  }
}

/* ----------------------------------------------------------------
   FormGroup and Switch Styles (MUI Components)
   ---------------------------------------------------------------- */

/* Ensure proper styling for MUI switches in modal */
.edit-boulder-field-modal .MuiFormGroup-root {
  margin: 0;
}

.edit-boulder-field-modal .MuiFormControlLabel-root {
  color: #f8f9fa;
  font-family: "DINRegular", sans-serif;
}

.dark-mode-active .MuiSwitch-root .MuiSwitch-track {
  background-color: rgba(255, 255, 255, 0.2);
}

.dark-mode-active .MuiSwitch-root.Mui-checked .MuiSwitch-track {
  background-color: var(--rumble-red);
}

.dark-mode-active .MuiSwitch-root .MuiSwitch-thumb {
  background-color: #f8f9fa;
}

.dark-mode-active .MuiSwitch-root.Mui-checked .MuiSwitch-thumb {
  background-color: #f5484d;
}

/* ----------------------------------------------------------------
   Form Label Colors
   ---------------------------------------------------------------- */

/* Make all form labels white in dark mode */
.boulders-advance-container label,
.edit-boulder-field-modal .modal-body label,
.dark-mode-active .edit-boulder-field-modal label {
  color: #ffffff !important;
}

/* Specific selector for nested labels */
.boulders-advance-container > div > div > div > label {
  color: #ffffff !important;
}

/* ----------------------------------------------------------------
   Global Modal Backdrop - Remove opacity
   ---------------------------------------------------------------- */

.modal-backdrop {
  --bs-backdrop-opacity: unset !important;  /* Completely remove Bootstrap opacity variable */
}

/* ----------------------------------------------------------------
   Form Element - Participate in Flex Chain
   ---------------------------------------------------------------- */
.edit-boulder-field-modal form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* ----------------------------------------------------------------
   Mobile Fullscreen Modal
   ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .edit-boulder-field-modal.modal {
    padding: 0 !important;
    z-index: 100500 !important; /* Higher than mobile menu */
  }

  .edit-boulder-field-modal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  .edit-boulder-field-modal .modal-content {
    height: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    width: 100vw !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .edit-boulder-field-modal .modal-body {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .modal-backdrop {
    --bs-backdrop-zindex: 100050;
    --bs-backdrop-bg: #000;
    /* --bs-backdrop-opacity: 0.5; */
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg);
  }

  /* ----------------------------------------------------------------
   Z-Index Fixes for Nested Modals - Video Upload & Image Editor
   Added: October 2025
   Issue: Modal backdrop (100050) was overlapping nested modal content
   Solution: Elevate specific nested modals above backdrop
   ---------------------------------------------------------------- */

  /* Video Upload Modal Fix
     - Targets the emotion/styled-components generated class
     - Must be higher than backdrop (100050) but lower than sticky menu (999999) */
  .modal .video-upload-container,
  .modal [class*="css-1ogs2em"],
  .video-upload-modal {
    z-index: 101060 !important;
  }

  /* Image Editor Modal Fix
     - Targets the boulder image editor
     - Ensures it appears above the modal backdrop */
  .modal .image-editor-container,
  .modal .boulder-image-editor,
  .image-editor-modal {
    z-index: 101055 !important;
  }

  /* Ensure parent modals containing these editors are also elevated
     - Uses :has() selector for modern browsers
     - Fallback handled by child selectors above */
  .modal:has(.video-upload-container),
  .modal:has([class*="css-1ogs2em"]),
  .modal:has(.image-editor-container),
  .modal:has(.boulder-image-editor) {
    --bs-modal-zindex: 101055 !important;
    z-index: 101055 !important;
  }

  /* Image Editor Modal Mobile Fullscreen Support */
  @media (max-width: 767px) {
    .image-editor-fullscreen .modal-dialog {
      margin: 0 !important;
      max-width: 100% !important;
      width: 100vw !important;
      height: 100vh !important;
    }

    .image-editor-fullscreen .modal-content {
      border-radius: 0 !important;
      height: 100vh !important;
      width: 100vw !important;
    }
  }
}
/* ----------------------------------------------------------------
   Image Size Constraints - Added for 100x100px requirement
   ---------------------------------------------------------------- */
.boulder-modal .boulder-image-wrapper img,
.edit-boulder-field-modal .boulder-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.boulder-modal .boulder-upload-placeholder,
.edit-boulder-field-modal .boulder-upload-placeholder {
  /* Allow placeholder to fill available space */
  width: 100% !important;
  height: 100% !important;
  min-width: unset !important;
  min-height: unset !important;
}

/* ----------------------------------------------------------------
   Option Switch Styles - Exact copy from StageCreation
   ---------------------------------------------------------------- */

/* Option switch wrapper - exact from LeagueStageCreationModern.css */
.edit-boulder-field-modal .option-switch-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  gap: 0;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
}

/* Option switch row */
.edit-boulder-field-modal .option-switch-row {
  width: 100%;
  margin: 0;
}

/* Add spacing between rows with mb-2 class */
.edit-boulder-field-modal .option-switch-row.mb-2 {
  margin-bottom: 8px;
}

/* When toggle is ACTIVE - remove bottom margin from header */
.edit-boulder-field-modal .option-switch-row.mb-2.active {
  margin-bottom: 0 !important;
}

/* Option switch content */
.edit-boulder-field-modal .option-switch-content {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Label text styling - white text with DIN font */
.edit-boulder-field-modal .option-switch-content .MuiFormControlLabel-label,
.edit-boulder-field-modal .option-switch-content .MuiTypography-root {
  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;
}

/* Expanded content area - DEFAULT (for Advanced Settings and other toggles) */
.edit-boulder-field-modal .option-switch-expanded-content {
  padding: 16px 20px;
  background-color: rgba(255, 255, 255, 0.05);
  border-top: none;
  margin-bottom: 8px;
  animation: fadeIn 0.3s ease;
}

/* ================================================================
   DEDICATED RULE FOR SECTOR & POSITION TOGGLE PANEL ONLY
   This rule specifically targets the map container within the
   sector/position toggle to ensure full-width, no-padding display
   ================================================================ */
.edit-boulder-field-modal .option-switch-expanded-content:has(.createrumble-map-sec) {
  padding: 0 !important;
  background-color: transparent !important;
  margin: 0 !important;
  margin-bottom: 1rem !important;  /* Maintain gap with next section */
  overflow: visible !important;  /* Allow dropdown to escape */
}

/* Remove all wrapper padding/margins for map container parents */
.edit-boulder-field-modal .option-switch-expanded-content:has(.createrumble-map-sec) > div {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  overflow: visible !important;  /* Allow dropdown to show */
}

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

/* Fix clear button background in BoulderModal */
.edit-boulder-field-modal .search-input-wrapper:has(.unified-search-input:not(:placeholder-shown)) .clear-search-btn {
  background: rgba(255, 255, 255, 0.05) !important;
}

.edit-boulder-field-modal .search-input-wrapper:has(.unified-search-input:not(:placeholder-shown)) .clear-search-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Remove background from judge and video validation toggles */
.edit-boulder-field-modal .judge-validation-toggle .option-switch-wrapper,
.edit-boulder-field-modal .video-validation-toggle .option-switch-wrapper {
  background-color: transparent !important;
}

.edit-boulder-field-modal .judge-validation-toggle,
.edit-boulder-field-modal .video-validation-toggle {
  background-color: transparent !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .edit-boulder-field-modal .option-switch-wrapper {
    padding: 8px 16px;
    min-height: 44px;
  }

  .edit-boulder-field-modal .option-switch-content .MuiFormControlLabel-label,
  .edit-boulder-field-modal .option-switch-content .MuiTypography-root {
    font-size: 14px;
  }

  .edit-boulder-field-modal .option-switch-expanded-content {
    padding: 12px 16px;
  }
}

/* Mobile sticky footer and complete spacing system */
@media (max-width: 767px) {
  /* Modal structure */
  .edit-boulder-field-modal .modal-dialog {
    height: 100vh;
    margin: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    align-items: stretch;
    overflow-x: hidden;
  }

  .edit-boulder-field-modal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    border-radius: 0;
    background-color: rgb(33, 37, 41);
    position: relative;
    overflow-x: hidden;
  }

  .edit-boulder-field-modal .modal-header {
    flex-shrink: 0;
    background-color: rgb(33, 37, 41);
    overflow-x: hidden;
    padding: 16px;
  }

  /* STEP 1: Standardized padding - 16px from edges */
  .edit-boulder-field-modal .modal-body {
    /* Conflicting properties removed to allow Block 1 flex settings to work */
    /* overflow-y: auto; - REMOVED: Conflicts with overflow: hidden from Block 1 */
    /* overflow-x: hidden; - REMOVED: Conflicts */
    /* flex: 1 1 auto; - REMOVED: Conflicts with flex: 1 from Block 1 */
    /* padding-bottom: 100px; - REMOVED: Not needed with flex chain, children handle scrolling */
    padding: 0 16px;
    min-height: 0;
    background-color: rgb(33, 37, 41);
    width: 100%;
    box-sizing: border-box;
    /* Hide scrollbars on mobile */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .edit-boulder-field-modal .modal-body::-webkit-scrollbar {
    display: none;
  }

  .edit-boulder-field-modal .modal-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(33, 37, 41);
    z-index: 1000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  }

  /* Prevent horizontal scroll and ensure proper containment */
  .edit-boulder-field-modal * {
    /* max-width: 100%; */
    box-sizing: border-box;
  }

  /* Ensure no element can push outside the modal */
  .edit-boulder-field-modal .modal-body > * {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* STEP 2: SIMPLIFIED Padding System */

  /* Default row spacing */
  .edit-boulder-field-modal .row {
    margin-left: 0;
    margin-right: 0;
  }

  /* Remove all column padding by default */
  .edit-boulder-field-modal [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Main content area */
  .edit-boulder-field-modal .add-bouldersdata-main {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Unified padding for all main content sections */
  .edit-boulder-field-modal .align-items-stretch,
  .edit-boulder-field-modal .add-bouldersdata-main > .row {
    padding: 0px 0.5rem;
    margin-bottom: 1rem; /* 1rem vertical spacing between sections */
  }

  /* Remove margin from last row to avoid extra space */
  .edit-boulder-field-modal .add-bouldersdata-main > .row:last-child {
    margin-bottom: 0;
  }

  /* Reset gx-2 gutter class */
  .edit-boulder-field-modal .gx-2 {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  /* Target ONLY the image/video row specifically (mobile layout within first column) */
  .edit-boulder-field-modal .col-sm-2 .gx-2 > .col-6:first-child {
    padding-right: 0.25rem;
  }

  .edit-boulder-field-modal .col-sm-2 .gx-2 > .col-6:last-child {
    padding-left: 0.25rem;
  }

  /* STEP 3: Toggle sections with unified padding */

  /* Toggle rows - same padding as main content */
  .edit-boulder-field-modal .option-switch-row {
    margin: 0 0 1rem 0; /* 1rem vertical spacing between sections */
    padding: 0px 0.5rem;
    width: 100%;
    box-sizing: border-box;
  }

  /* Toggle content container */
  .edit-boulder-field-modal .option-switch-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Expanded content - ensure it doesn't reach screen edges */
  .edit-boulder-field-modal .option-switch-expanded-content {
    padding: 12px 0;
    margin: 0 0.5rem 1rem 0.5rem; /* 0.5rem from edges, 1rem bottom */
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0 0 8px 8px;  /* As requested: rounded only at bottom */
    width: calc(100% - 1rem); /* Account for horizontal margins */
    box-sizing: border-box;
  }

  /* Content inside expanded panels needs padding */
  .edit-boulder-field-modal .option-switch-expanded-content > * {
    padding: 0 0.5rem;
  }

  /* Rows inside expanded content - override Bootstrap gutter-y */
  .edit-boulder-field-modal .option-switch-expanded-content .row {
    margin: 0;
    width: 100%;
    --bs-gutter-y: 0.5rem; /* Override Bootstrap gutter to 0.5rem */
  }

  /* Spacing for advanced options fields inside expanded content */
  .edit-boulder-field-modal .option-switch-expanded-content [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0.5rem; /* 0.5rem spacing between fields */
    margin-top: 0 !important; /* Override Bootstrap gutter-y */
  }

  /* First row of fields shouldn't have top margin */
  .edit-boulder-field-modal .option-switch-expanded-content .row > [class*="col-"]:nth-child(-n+2) {
    margin-top: 0 !important;
  }

  /* Judge and Video validation toggle spacing - using specific selectors */
  .edit-boulder-field-modal .judge-validation-toggle,
  .edit-boulder-field-modal .video-validation-toggle {
    margin-bottom: 0.5rem; /* 0.5rem spacing between judge/video toggles */
    padding: 0px 16px !important; /* Specific padding for judge/video toggles */
  }

  /* Remove margin from last toggle */
  .edit-boulder-field-modal .video-validation-toggle {
    margin-bottom: 0;
  }

  /* STEP 4: Form elements spacing */

  .edit-boulder-field-modal .form-control,
  .edit-boulder-field-modal .form-select {
    padding: 10px 12px;
    width: 100%;
  }

  /* Ensure map container doesn't overflow */
  .edit-boulder-field-modal .mapboxgl-canvas,
  .edit-boulder-field-modal .mapboxgl-map {
    max-width: 100%;
  }

  /* Modern CSS: scroll-padding-bottom reserves space during scroll without visual padding */
  .add-bouldersdata-container {
    overflow-y: auto;
    scroll-padding-bottom: 100px;
    height: 100%;
  }

  /* Fallback for older browsers */
  @supports not (scroll-padding-bottom: 1px) {
    .add-bouldersdata-container {
      padding-bottom: 100px;
    }
  }
}

/* Unified sector searchbox styles */
.sector-search-wrapper {
  position: relative;
  width: 100%;
}

.sector-unified-input {
  width: 100%;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.sector-unified-input:focus {
  outline: none;
  border-color: #6c757d !important;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

.btn-clear-sector:hover {
  color: #dc3545 !important;
}

.sector-dropdown-panel {
  /* Removed background colors, shadows, effects, and borders to make it a clean container */
  /* animation: fadeIn 0.2s ease-in; */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); */
  /* background: rgba(44, 48, 52, 0.85) !important; */
  /* backdrop-filter: blur(10px); */
  /* -webkit-backdrop-filter: blur(10px); */
  /* border: 1px solid rgba(90, 94, 98, 0.5) !important; */

  /* Clean container styling */
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
}

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

.sector-dropdown-panel .btn-group {
  margin: 4px;
}

.sector-dropdown-panel .boulder-color-opt-btn {
  transition: background-color 0.2s;
}

.sector-dropdown-panel .boulder-color-opt-btn:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Mobile responsiveness for sector search */
 @media (max-width: 767px) { 
  /* .sector-dropdown-panel { */
   /* max-height: 200px; */ /* Removed to allow natural height */
  /* } */

  .sector-unified-input {
    font-size: 14px;
  }
}

/* Fix for map container - allow dropdowns to show */
.edit-boulder-field-modal .createrumble-map-sec {
  /* Allow overflow visible for dropdown, but map canvas will handle its own clipping */
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  /* Ensure dropdowns can escape the container */
  z-index: 1;
}

/* Ensure the parent container allows overflow for dropdown */
.edit-boulder-field-modal .position-relative.w-100:has(.createrumble-map-sec) {
  overflow: visible !important;
}

/* Ensure the map tiles still get clipped properly */
.edit-boulder-field-modal .createrumble-map-sec .mapboxgl-canvas-container,
.edit-boulder-field-modal .createrumble-map-sec .mapboxgl-canvas {
  border-radius: 0;
  overflow: hidden;
}

/* Override any accordion body padding for boulder modal */
.edit-boulder-field-modal .accordion-body {
  padding: 0 !important;
}

/* Ensure the map wrapper completely fills the accordion body */
.edit-boulder-field-modal .accordion-body > .position-relative.w-100 {
  margin: 0 !important;
  width: 100% !important;
}

/* Ensure location search dropdown appears above map elements when going upward */
.edit-boulder-field-modal .map-search-overlay .suggestions-dropdown {
  z-index: 9999 !important;
}

/* Style for upward dropdown to ensure proper display */
.edit-boulder-field-modal .map-search-overlay .suggestions-dropdown--upward {
  position: absolute;
  bottom: 100%;
  margin-bottom: 5px;
  max-height: 300px;
  overflow-y: auto;
}

/* ----------------------------------------------------------------
   Sector Assignment Display & Create Button Styling
   ---------------------------------------------------------------- */

/* Assigned sector display */
.assigned-sector-display {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f8f9fa;
  font-size: 14px;
  margin-bottom: 12px;
}

.assigned-label {
  color: rgba(248, 249, 250, 0.7);
  font-weight: 400;
}

/* Sector tag pill - Rumble green */
.sector-tag-pill {
  display: inline-flex;
  align-items: center;
  background-color: #b9ff66;
  color: #000;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  gap: 8px;
  transition: all 0.2s;
}

.sector-tag-pill:hover {
  background-color: #a8ee55;
  transform: scale(1.02);
}

.sector-name {
  color: #000 !important;
  font-weight: 500;
}

.sector-tag-remove {
  background: none;
  border: none;
  color: #000 !important;
  opacity: 0.7;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  line-height: 0;
}

.sector-tag-remove:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000 !important;
  opacity: 1;
}

/* Integrated create button styling - fills container edge to edge */
.btn-create-sector-inline {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  padding: 0 20px;
  border: none;
  border-radius: 0 4px 4px 0; /* Rounded only on right side */
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-create-sector-inline:hover {
  background: var(--rumble-green);
  color: #000;
  font-weight: 600;
}

/* Input field adjustment for create button */
.sector-unified-input.has-create-button {
  padding-right: 80px !important;
  border-radius: 4px 0 0 4px !important; /* Rounded only on left side */
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .assigned-sector-display {
    font-size: 13px;
  }

  .sector-tag-pill {
    font-size: 12px;
    padding: 3px 10px;
  }

  .btn-create-sector-inline {
    font-size: 12px;
    padding: 0 15px; /* Maintain horizontal padding, vertical fills container */
  }
}

/* Map Overlay Styles - Added for restructured map interface */

/* Unified Bottom Controls Container */
.map-bottom-controls {
  position: absolute;
  bottom: 20px;
  left: 10px;
  right: 10px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 1rem;  /* Adjusted from 10px */
  pointer-events: none; /* Let clicks pass through container */
  overflow: visible !important; /* Allow dropdown to show */
}

.map-bottom-controls > * {
  pointer-events: auto; /* But capture clicks on children */
}

/* Ensure dropdowns in edit/create forms are not cropped */
.map-bottom-controls .sector-create-inline-wrapper,
.map-bottom-controls .sector-edit-inline-wrapper {
  position: relative;
  z-index: 1000;
  overflow: visible !important;
}

.map-bottom-controls .unified-location-search {
  position: relative;
  z-index: 1001;
  overflow: visible !important;
}

/* CRITICAL: Ensure ALL parent containers allow overflow */
.map-bottom-controls,
.map-bottom-controls > * {
  overflow: visible !important;
}

/* Sector controls row children can scroll, but not the row itself by default */
.sector-controls-row > * {
  /* Children should not force overflow visible */
  flex-shrink: 0; /* Prevent children from shrinking */
}

.map-bottom-controls .unified-location-search .suggestions-dropdown,
.sector-create-inline-wrapper .suggestions-dropdown,
.sector-edit-inline-wrapper .suggestions-dropdown {
  z-index: 999999 !important; /* Highest z-index to ensure visibility */
  position: absolute !important;
  max-height: 300px !important; /* Limit height when opening upward */
  /* Ensure dropdown isn't constrained by parent containers */
  transform: translateZ(0); /* Create new stacking context */
  will-change: transform; /* Optimize for animations */
}

/* Additional specificity to override any conflicting styles */
.edit-boulder-field-modal .map-bottom-controls .suggestions-dropdown,
.edit-boulder-field-modal .sector-controls-row .suggestions-dropdown {
  position: absolute !important; /* Keep absolute for proper positioning */
  z-index: 999999 !important; /* Higher than map toggle (1000) */
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Ensure dropdown is above map theme toggle */
.edit-boulder-field-modal .suggestions-dropdown,
.modal-body .suggestions-dropdown {
  z-index: 999999 !important; /* Much higher than map-style-toggle-pill (1000) */
}

/* Force map toggle to be below dropdown when dropdown is shown */
.edit-boulder-field-modal:has(.suggestions-dropdown.show) .map-style-toggle-pill,
.modal-body:has(.suggestions-dropdown.show) .map-style-toggle-pill {
  z-index: 99 !important; /* Below dropdown when it's visible */
}

/* CRITICAL: Force ALL ancestors of dropdown to have visible overflow */
.edit-boulder-field-modal .createrumble-map-sec:has(.suggestions-dropdown),
.edit-boulder-field-modal .map-bottom-controls:has(.suggestions-dropdown),
.edit-boulder-field-modal .sector-controls-row:has(.sector-create-inline-wrapper .suggestions-dropdown),
.edit-boulder-field-modal .sector-controls-row:has(.sector-edit-inline-wrapper .suggestions-dropdown),
.edit-boulder-field-modal .unified-location-search:has(.suggestions-dropdown) {
  overflow: visible !important;
}

/* When dropdown is actively shown, ensure it's visible */
.edit-boulder-field-modal .suggestions-dropdown.show,
.edit-boulder-field-modal .map-bottom-controls .suggestions-dropdown.show,
.edit-boulder-field-modal .sector-controls-row .suggestions-dropdown.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999999 !important;
}

/* Ensure modal body doesn't clip dropdowns in map section */
.edit-boulder-field-modal .modal-body {
  overflow-x: hidden;
  overflow-y: auto;
}

/* But allow overflow for sections containing map */
.edit-boulder-field-modal .modal-body > div:has(.createrumble-map-sec) {
  overflow: visible !important;
}

/* Search Row */
.map-search-row {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

/* Remove rounded corners for searchbar - flat design */
.map-search-row .unified-location-search {
  border-radius: 0 !important;
  overflow: visible !important;
}

.map-search-row .unified-location-search .search-input-container,
.map-search-row .unified-location-search input {
  border-radius: 0 !important;
}

/* Sector Controls Row - FIXED to not clip dropdowns */
.sector-controls-row {
  display: flex;
  gap: 8px;
  padding: 4px;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  position: relative;
  /* Enable horizontal scrolling for tags - IMPORTANT flag to override earlier rules */
  overflow-x: auto !important;
  overflow-y: visible !important;
  /* Smooth scrolling */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Opera) */
.sector-controls-row::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* When forms are active, allow overflow for dropdowns */
.sector-controls-row:has(.sector-create-inline-wrapper),
.sector-controls-row:has(.sector-edit-inline-wrapper) {
  overflow: visible !important;
}

/* Ensure scrolling works for the specific modal context */
.edit-boulder-field-modal .modal-body .map-bottom-controls .sector-controls-row {
  overflow-x: auto !important;
  overflow-y: visible !important;
  /* Ensure it can scroll */
  max-width: 100%;
  width: 100%;
  /* Hide scrollbars */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.edit-boulder-field-modal .modal-body .map-bottom-controls .sector-controls-row::-webkit-scrollbar {
  display: none;
}

/* Override for inline wrappers to ensure dropdown visibility */
.sector-create-inline-wrapper,
.sector-edit-inline-wrapper {
  /* These must NEVER have constrained overflow */
  overflow: visible !important;
  position: relative;
  z-index: 10000;
}

/* Ensure inline wrappers in modal context also have visible overflow */
.edit-boulder-field-modal .sector-create-inline-wrapper,
.edit-boulder-field-modal .sector-edit-inline-wrapper,
.modal-body .sector-create-inline-wrapper,
.modal-body .sector-edit-inline-wrapper {
  overflow: visible !important;
  z-index: 10001 !important;
}

/* Desktop centering for sector tags */
@media (min-width: 769px) {
  .sector-controls-row {
    justify-content: center;  /* Center tags on desktop */
  }

  /* When many tags exist (6 or more children), allow natural flow from left */
  .sector-controls-row:has(button:nth-child(6)) {
    justify-content: flex-start;  /* Left align when 6+ items */
  }
}

/* Mobile remains left-aligned */
@media (max-width: 768px) {
  .sector-controls-row {
    justify-content: flex-start;
  }
}

/* Forms take full width of row */
.sector-create-inline-wrapper,
.sector-edit-inline-wrapper {
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  padding: 12px;
  border-radius: 25px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sector-create-input-group,
.sector-edit-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  justify-content: center;
}

/* Ensure all buttons in controls are interactive */
.sector-controls-row button,
.map-bottom-controls button {
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Map container specific styles to fill panel */
.createrumble-map-sec {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: visible !important; /* Allow dropdowns to show */
}

/* CRITICAL FIX: Override StageUpdate.css overflow hidden on map container */
.edit-boulder-field-modal .createrumble-map-sec,
.modal-body .createrumble-map-sec,
.option-switch-expanded-content .createrumble-map-sec {
  overflow: visible !important; /* Must override StageUpdate.css */
}

/* Ensure map canvas fills container properly */
.createrumble-map-sec .mapboxgl-canvas-container,
.createrumble-map-sec .mapboxgl-canvas {
  border-radius: 0 !important;
}

/* Control map overlays to not exceed boundaries */
.createrumble-map-sec .mapboxgl-control-container {
  pointer-events: none;
}

.createrumble-map-sec .mapboxgl-control-container > * {
  pointer-events: auto;
}

/* SIMPLIFIED: Map container should fill exactly its parent without exceeding */
.edit-boulder-field-modal .option-switch-expanded-content:has(.createrumble-map-sec) .position-relative.w-100 {
  margin: 0 !important;
  width: 100% !important;
  padding: 0 !important;
}

/* (Styles moved to unified section above) */

/* Mobile adjustments for overlays */
@media (max-width: 768px) {
  .map-bottom-controls {
    bottom: 10px;
    left: 5px;
    right: 5px;
    gap: 8px;
  }

  .sector-controls-row {
    gap: 6px;
  }

  .sector-controls-row button,
  .map-bottom-controls button {
    padding: 6px 16px !important;
    font-size: 13px !important;
  }
}

/* Mobile map alignment fixes */
@media (max-width: 767px) {
  /* Fix map container alignment issues on mobile */
  .edit-boulder-field-modal .position-relative.w-100 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  /* Ensure map container fills width properly */
  .edit-boulder-field-modal .createrumble-map-sec {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    /* Height is now controlled by JS (30vh) */
  }

  /* Fix padding for parent containers as requested */
  .edit-boulder-field-modal .option-switch-expanded-content:has(.createrumble-map-sec) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 0px 0.5rem !important;  /* As requested: horizontal padding only */
  }

  /* Ensure accordion body doesn't add unwanted horizontal spacing */
  .edit-boulder-field-modal .accordion-body:has(.createrumble-map-sec) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Fix potential Bootstrap container offsets */
  .edit-boulder-field-modal .container,
  .edit-boulder-field-modal .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ensure map overlays stay within bounds */
  .edit-boulder-field-modal .map-bottom-controls {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Mobile map height override - 30vh as requested */
@media (max-width: 768px) {
  .createrumble-map-sec {
    min-height: 30vh !important;  /* Changed from 25vh to 30vh */
    height: 30vh !important;       /* Changed from 25vh to 30vh */
    overflow: visible !important;  /* Allow dropdown to show */
    border-radius: 8px;
    position: relative;
  }

  /* But ensure the map canvas itself is still clipped */
  .createrumble-map-sec .mapboxgl-canvas-container {
    overflow: hidden !important;
    border-radius: 8px;
  }
}

/* ================================================================
   CENTRALIZED MEDIA BUTTON STYLES
   Extracted from inline styles for consistency and maintainability
   ================================================================ */

/* ----------------------------------------------------------------
   Upload Button Styles - Dashed Border
   ---------------------------------------------------------------- */
.btn-upload-dashed {
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  width: 100%;
  padding: 12px 16px;
}

.btn-upload-dashed:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.02);
}

/* Height variants for responsive design */
.btn-upload-dashed.standard-height {
  min-height: 50px;
  height: auto;
}

.btn-upload-dashed.fixed-80 {
  height: 80px;
  min-height: 80px;
}

/* Icon styling within upload button */
.btn-upload-dashed .upload-icon {
  font-size: 18px;
  color: inherit;
  margin-left: 8px;
}

/* ----------------------------------------------------------------
   Media Edit Button Styles
   ---------------------------------------------------------------- */
.btn-media-edit {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.btn-media-edit:hover {
  background-color: #a855f7;
  transform: scale(1.05);
  color: white;
}

.btn-media-edit svg {
  font-size: 16px;
}

/* ----------------------------------------------------------------
   Media Delete Button Styles
   ---------------------------------------------------------------- */
.btn-media-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: #dc3545;
  padding: 4px 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.btn-media-delete:hover {
  background-color: #dc3545;
  color: white;
  transform: scale(1.05);
}

.btn-media-delete svg {
  font-size: 16px;
}

/* ----------------------------------------------------------------
   80px Preview Container Styles
   ---------------------------------------------------------------- */
.preview-container-80 {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.preview-container-80 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video icon styling */
.preview-container-80 .video-icon {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.4);
}

.preview-container-80 .video-icon.uploaded {
  color: #28a745;
}

/* ----------------------------------------------------------------
   Media Display Wrapper Styles
   ---------------------------------------------------------------- */
.media-display-wrapper {
  display: flex;
  align-items: stretch;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0;
  height: 80px;
  min-height: 80px;
  overflow: hidden;
  width: 100%;
}

/* ----------------------------------------------------------------
   Media Controls Container
   ---------------------------------------------------------------- */
.media-controls-flex {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0 12px;
}

/* ----------------------------------------------------------------
   Smart Video Upload Indicator
   ---------------------------------------------------------------- */
.upload-success-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  /* SVG will use fill="#b9ff66" directly */
  background: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Alternative text-based status indicator */
.upload-status-text {
  color: #28a745;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.upload-status-text svg {
  font-size: 14px;
}

/* ----------------------------------------------------------------
   Footer Button Overrides (Extracted from inline)
   ---------------------------------------------------------------- */
.modal-footer .btn-close-modal {
  position: unset !important;
  background-color: rgb(66, 65, 65) !important;
}

.modal-footer .btn-close-modal:hover {
  background-color: rgb(42, 42, 42) !important;
  transform: translateY(-1px);
}

.modal-footer .btn-save-modal {
  position: unset !important;
}

/* ----------------------------------------------------------------
   Desktop-specific Image Styles
   ---------------------------------------------------------------- */
.boulder-image-container-desktop {
  aspect-ratio: 1/1;
  width: 100%;
  position: relative;
}

.boulder-image-desktop {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.boulder-upload-placeholder-desktop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ================================================================
   CONSOLIDATED MEDIA QUERIES
   Future media queries should be added here, organized by breakpoint
   ================================================================ */

/* Mobile: max-width 767px */
/* Note: Existing mobile queries throughout file will be consolidated here in Phase 2 */

/* Tablet: 768px to 1023px */
/* Note: Existing tablet queries throughout file will be consolidated here in Phase 2 */

/* Desktop: 1024px and above */
/* Note: Existing desktop queries throughout file will be consolidated here in Phase 2 */

/* ================================================================
   BOULDER MEDIAPICKER INTEGRATION - Slide Container Pattern
   ================================================================ */

/* Slide container - contains both form and picker views */
.boulder-slide-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Slide wrapper - moves horizontally between views */
.boulder-slide-wrapper {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}

.boulder-slide-wrapper.view-form {
  transform: translateX(0);
}

.boulder-slide-wrapper.view-mediaPicker {
  transform: translateX(-50%);
}

/* Each panel takes 50% of wrapper (100% of visible container) */
.boulder-slide-panel {
  width: 50%;
  flex-shrink: 0;
}

.boulder-slide-panel.form-panel {
  padding: 0;
}

.boulder-slide-panel.picker-panel {
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

/* MediaPicker header bar with back button */
.boulder-media-picker-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(33, 37, 41, 0.95);
}

.boulder-media-picker-back {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #f8f9fa;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.boulder-media-picker-back:hover {
  background: rgba(255, 255, 255, 0.1);
}

.boulder-media-picker-back svg {
  font-size: 16px;
}

.boulder-media-picker-title {
  color: #f8f9fa;
  font-size: 18px;
  font-family: "DINBold", sans-serif;
  flex: 1;
}

/* Loading state for MediaPicker */
.boulder-media-picker-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 16px;
}

.boulder-media-picker-loading span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* MediaPicker content within boulder modal */
.boulder-slide-panel.picker-panel .media-picker-content-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

/* Mobile adjustments for MediaPicker in boulder modal */
@media (max-width: 767px) {
  /* Fill parent height to participate in flex chain */
  .boulder-slide-panel {
    height: 100%;
  }

  .boulder-media-picker-header {
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .boulder-media-picker-title {
    font-size: 16px;
  }

  .boulder-slide-panel.picker-panel .media-picker-content-panel {
    min-height: 100% !important;
    height: 100%;
  }

  /* Ensure MediaPicker footer stays above mobile navigation */
  .boulder-slide-panel.picker-panel .media-picker-inline-footer {
    position: sticky;
    bottom: 0;
    background: rgba(33, 37, 41, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    z-index: 10;
  }
}

/* ================================================================
   FULL REPLACEMENT HEADER PATTERN
   Conditional header that changes based on currentView state
   ================================================================ */

/* Media Picker Header in Modal - Full Replacement Pattern */
.edit-boulder-field-modal .media-picker-modal-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgb(33, 37, 41);
}

.edit-boulder-field-modal .media-picker-modal-header .modal-title {
  flex: 1;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: #ffffff;
  font-family: "DINBold", sans-serif;
}

/* Back button in header */
.edit-boulder-field-modal .btn-header-back {
  background: none;
  border: none;
  padding: 0.5rem;
  margin-right: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #f8f9fa;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.edit-boulder-field-modal .btn-header-back:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Close button in header */
.edit-boulder-field-modal .btn-header-close {
  background: none;
  border: none;
  padding: 0.5rem;
  margin-left: auto;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: #f8f9fa;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.edit-boulder-field-modal .btn-header-close:hover {
  opacity: 1;
}

/* Remove any embedded header in picker panel (now at Modal level) */
.edit-boulder-field-modal .picker-panel .boulder-media-picker-header,
.edit-boulder-field-modal .picker-panel .media-picker-header-bar {
  display: none !important;
}

/* Smooth transition for body content */
.edit-boulder-field-modal .modal-body {
  transition: padding 0.2s ease;
}

/* Mobile adjustments for Full Replacement Header */
@media (max-width: 767px) {
  .edit-boulder-field-modal .media-picker-modal-header {
    padding: 0.75rem 1rem;
  }

  .edit-boulder-field-modal .btn-header-back {
    margin-right: 0.75rem;
  }

  .edit-boulder-field-modal .media-picker-modal-header .modal-title {
    font-size: 1rem;
  }
}