/* SprayWallManager Styles */

.spray-wall-manager {
  padding: 0;
  min-height: 200px;
  position: relative;
  background: rgb(23,25,28);
  /* Prevent elastic scroll issues on mobile */
  overscroll-behavior-y: contain;
  /* Ensure overflow is visible for sticky positioning chain */
  overflow: visible !important;
}

/* ================================================================
   REORGANIZED LAYOUT - December 2025
   1. TabBar above image
   2. Wall Image with Wall Selector overlay
   3. Search + Roulette
   4. Boulder Content
   ================================================================ */

/* ----- SECTION 1: Tab Bar Wrapper (Above Image) ----- */

.tab-bar-wrapper {
  position: sticky;
  top: 52px; /* Below header on mobile */
  background: #121212;
  z-index: 102;

  /* Transform-based hide/show - matches header animation */
  transform: translateY(0);
  transition: transform 0.3s ease;

  /* GPU acceleration */
  will-change: transform;
  -webkit-transform: translateZ(0);
}

/* Tab bar hidden - slides up out of view */
.tab-bar-wrapper.controls-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* Tab Bar Row - Flex container for tabs + view toggle */
.tab-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tab-bar-left {
  flex: 1;
  overflow-x: auto;
  /* Hide scrollbar but keep scrollable */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tab-bar-left::-webkit-scrollbar {
  display: none;
}

.tab-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  flex-shrink: 0;
}

/* Desktop/Mobile toggle utilities */
.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .desktop-only {
    display: flex;
  }

  /* ===========================================
     STICKY CHAIN - Desktop (Row 2 & Row 3)
     Row 2: Tab Bar - sticks below header (64px)
     Row 3: Wall Image - sticks below header + tabbar (110px)
     =========================================== */

  /* Row 2: Tab Bar - sticks below header (64px) */
  .tab-bar-wrapper {
    position: sticky !important;
    top: 64px !important;
    z-index: 102 !important;
    background: #121212 !important;
    /* Remove transition for scroll-hide animation (no longer used) */
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Row 3: Wall Image - sticks below header + tabbar (110px = 64 + 46) */
  .wall-image-sticky {
    position: sticky !important;
    top: 110px !important;
    z-index: 100 !important;
    background: rgb(23, 25, 28) !important;
    /* Remove transition for scroll-hide animation (no longer used) */
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 767px) {
  .mobile-only {
    display: flex;
  }

  .tab-bar-wrapper {
    top: 48px; /* Below mobile header */
  }

  .tab-bar-row {
    padding: 0 12px;
  }
}

/* Desktop Action Buttons in TabBar Row 2 */
.desktop-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.desktop-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Roulette button - neon green */
.desktop-action-btn.roulette-btn {
  background: rgba(57, 255, 20, 0.1);
  border-color: rgba(57, 255, 20, 0.3);
  color: #39FF14;
}

.desktop-action-btn.roulette-btn:hover {
  background: rgba(57, 255, 20, 0.2);
  border-color: #39FF14;
}

/* View toggle buttons - active state */
.desktop-action-btn.view-btn.active {
  background: rgba(229, 57, 53, 0.15);
  border-color: #E53935;
  color: #E53935;
}

/* Spacer between search/roulette and view toggle */
.tab-bar-spacer {
  width: 16px;
}

/* Legacy view toggle buttons (fallback) */
.tab-bar-right .view-toggle-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.tab-bar-right .view-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.tab-bar-right .view-toggle-btn.active {
  background: rgba(229, 57, 53, 0.15);
  border-color: #E53935;
  color: #E53935;
}

/* ----- SECTION 2: Sticky Wall Image with Overlay ----- */

.wall-image-sticky {
  position: sticky;
  /* Mobile: Header (48px) + TabBar (~45px) = 93px
     Desktop: TabBar only (~45px) = 45px (no top nav)
     Note: When header/TabBar hide with transform, they stay in DOM
     so the sticky position remains fixed */
  top: 93px;
  z-index: 100; /* Below TabBar (102) */
  background: rgb(23, 25, 28);

  /* For desktop filter panel overlay */
  position: sticky; /* Keep sticky behavior */

  /* Smooth transition */
  transition: top 0.3s ease;

  /* GPU acceleration */
  will-change: transform, top;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Shadow under sticky wall image - appears when content scrolls behind */
.wall-image-sticky::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show shadow when content is scrolled (via JS class) */
.wall-image-sticky.has-scroll-shadow::after {
  opacity: 1;
}

.wall-image-container {
  width: 100%;
  max-width: 800px; /* Max width for desktop - prevents overly wide images */
  margin: 0 auto; /* Center on desktop */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(23, 25, 28);
  position: relative; /* For overlay positioning */
  min-height: 150px; /* Minimum height for placeholder */
  overflow: hidden; /* Ensure children don't overflow */
}

.wall-image {
  width: 100%;
  height: auto;
  object-fit: contain; /* NEVER crop - always show full image */
  display: block;
}

/* Ensure CanvasPreview (boulder preview) matches wall image dimensions */
.wall-image-container .canvas-preview-wrapper,
.wall-image-container canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Wall Image Placeholder */
.wall-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 150px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

/* Desktop: Below page header Row 1 + TabBar Row 2 */
@media (min-width: 768px) {
  .wall-image-sticky {
    /* Desktop: Row 1 header (~57px) + Row 2 TabBar (~56px) = ~113px */
    top: 113px;
  }
}

/* Mobile: Max 30vh height */
@media (max-width: 767px) {
  .wall-image-sticky {
    /* Mobile: Page Header (48px) + TabBar (~45px) = 93px */
    top: 93px;
  }

  .wall-image-container {
    max-width: 100%;
    max-height: 35vh;
  }

  .wall-image {
    max-height: 35vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .wall-image-container canvas {
    max-height: 35vh;
    width: auto !important;
    height: auto !important;
  }
}

/* Desktop: Max 40vh height */
@media (min-width: 768px) {
  .wall-image-container {
    max-height: 40vh;
  }

  .wall-image {
    max-height: 40vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .wall-image-container canvas {
    max-height: 40vh;
  }
}

/* ============================================
   WALL IMAGE OVERLAY
   Shows either Wall Selector OR Boulder Actions
   ============================================ */

.wall-image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Mobile: smaller padding */
@media (max-width: 767px) {
  .wall-image-overlay {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Overlay Buttons (Close + CLIMB) */
.btn-overlay {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 12px 20px;

  border: none;
  border-radius: 10px;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* Close Preview Button */
.btn-overlay.btn-close-preview {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-overlay.btn-close-preview:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}

/* CLIMB Button */
.btn-overlay.btn-climb {
  background: #39FF14;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 28px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.4);
}

.btn-overlay.btn-climb:hover {
  background: #4AFF25;
  box-shadow: 0 0 30px rgba(57, 255, 20, 0.6);
  transform: scale(1.02);
}

/* Mobile: smaller buttons */
@media (max-width: 767px) {
  .btn-overlay {
    padding: 10px 16px;
    font-size: 13px;
  }

  .btn-overlay.btn-climb {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* Wall Selector in Overlay */
.wall-selector-in-overlay {
  width: 100%;
  display: flex;
  justify-content: center;
}

.wall-selector-in-overlay .wall-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(18, 18, 18, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 6px 8px;
  max-width: 100%;
}

.wall-selector-in-overlay .wall-chip {
  padding: 8px 14px;
  font-size: 13px;
}

.wall-selector-in-overlay .wall-chip-add {
  padding: 8px 14px;
  font-size: 13px;
}

/* Mobile: smaller chips */
@media (max-width: 767px) {
  .wall-selector-in-overlay .wall-chip,
  .wall-selector-in-overlay .wall-chip-add {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ----- SECTION 3: Search Bar + Roulette ----- */

.search-bar-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #121212;
  z-index: 100;
  /* Smooth hide/show */
  opacity: 1;
  transition: opacity 0.25s ease;
}

.search-bar-section.controls-hidden {
  opacity: 0.3;
  pointer-events: none;
}

/* Hide inline search bar on desktop - search is in Desktop Filter Panel */
@media (min-width: 768px) {
  .search-bar-section {
    display: none !important;
  }
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0px 4px 0px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  min-height: 40px;
}

.search-input-wrapper .search-icon {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  flex-shrink: 0;
}

.boulder-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: white;
  font-size: 14px;
  outline: none;
}

.boulder-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-input-wrapper .clear-icon {
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: color 0.2s;
  flex-shrink: 0;
}

.search-input-wrapper .clear-icon:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Roulette Button */
.roulette-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.roulette-btn:hover:not(:disabled) {
  background: rgba(151, 71, 255, 0.2);
  border-color: rgba(151, 71, 255, 0.5);
  color: #b9ff66;
}

.roulette-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

/* ----- SECTION 4: Boulder Content ----- */

.boulder-content {
  position: relative;
  z-index: 99;
  min-height: 50vh;
  background: rgb(23,25,28);
}

/* ================================================================
   LEGACY: Old positioned buttons (kept for reference/fallback)
   Now replaced by .btn-overlay styles in wall-image-overlay
   ================================================================ */

/* Legacy: Clear preview button - no longer used */
/* Now using .btn-overlay.btn-close-preview in .wall-image-overlay */

/* Legacy: Climb button - no longer used */
/* Now using .btn-overlay.btn-climb in .wall-image-overlay */

/* Mobile optimizations - no special handling needed */

/* Loading State */
.spray-wall-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px;
  color: rgba(255, 255, 255, 0.7);
}

/* Empty State */
.spray-wall-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.spray-wall-empty .empty-icon {
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 16px;
}

.spray-wall-empty h5 {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

.spray-wall-empty p {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}

/* Header */
.spray-wall-header {
  margin-bottom: 16px;
}

.spray-wall-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.spray-wall-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.spray-wall-title .title-icon {
  color: #9747ff;
}

/* Add Wall Button */
.btn-add-wall,
.btn-add-wall-small {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #9747ff 0%, #7c3aed 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-add-wall:hover,
.btn-add-wall-small:hover {
  background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%);
  transform: translateY(-1px);
}

.btn-add-wall-small {
  padding: 6px 12px;
  font-size: 13px;
}

/* Stats Summary */
.spray-wall-stats {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
  overflow-x: auto;
}

.spray-wall-stats::-webkit-scrollbar {
  display: none;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #b9ff66;
}

.stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Note: btn-open-focus-mode replaced by .btn-climb in SECTION 4 above */

/* Wall Selector */
.wall-selector {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  overflow-x: auto;
  margin-bottom: 16px;
}

.wall-selector::-webkit-scrollbar {
  display: none;
}

.wall-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wall-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.wall-chip.active {
  background: rgba(151, 71, 255, 0.2);
  border-color: #9747ff;
  color: white;
}

.wall-chip .boulder-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.wall-chip.active .boulder-count {
  background: rgba(151, 71, 255, 0.3);
}

.wall-settings-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding: 4px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
}

.wall-settings-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

/* Add Wall Chip - Purple dashed border */
.wall-chip-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 2px dashed rgba(151, 71, 255, 0.5);
  border-radius: 20px;
  color: rgba(151, 71, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wall-chip-add:hover {
  background: rgba(151, 71, 255, 0.1);
  border-color: #9747ff;
  color: #9747ff;
}

.wall-chip-add svg {
  font-size: 12px;
}

/* Filter Bar */
.spray-wall-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.search-box .search-icon {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  font-size: 14px;
  outline: none;
}

.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-box .clear-icon {
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: color 0.2s;
}

.search-box .clear-icon:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Search Box with Integrated Filter Button */
.search-box-with-filter {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0px 4px 0px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  max-width: 300px;
  min-height: 40px;
  box-sizing: border-box;
}

.search-box-with-filter .search-icon {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  flex-shrink: 0;
}

.search-box-with-filter input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: white;
  font-size: 14px;
  outline: none;
}

.search-box-with-filter input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-box-with-filter .clear-icon {
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: color 0.2s;
  flex-shrink: 0;
}

.search-box-with-filter .clear-icon:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Inline Filter Button (inside search box) */
.btn-filter-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 4px;
}

.btn-filter-inline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.btn-filter-inline.active {
  background: rgba(151, 71, 255, 0.2);
  color: #9747ff;
}

.btn-filter-inline .filter-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  background: #b9ff66;
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 600;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-filter-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.btn-filter-toggle.active {
  background: rgba(151, 71, 255, 0.2);
  border-color: #9747ff;
  color: #9747ff;
}

/* Add Boulder Button */
.btn-add-boulder {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  min-height: 40px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-add-boulder:hover {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  transform: translateY(-1px);
}

.btn-add-boulder:active {
  transform: translateY(0);
}

.filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #b9ff66;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Expanded Filters */
.spray-wall-filters {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 16px;
}

.filter-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-item {
  flex: 1;
  min-width: 120px;
}

.filter-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-item select {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

.filter-item select:focus {
  outline: none;
  border-color: #9747ff;
}

.filter-item select option {
  background: #1a1a2e;
  color: white;
}

.btn-clear-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear-filters:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

/* Boulder Grid */
.boulder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 1rem;
}

@media (max-width: 480px) {
  .boulder-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* Boulder Card */
.boulder-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.boulder-card:hover {
  border-color: rgba(151, 71, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Add Boulder Card */
.boulder-card-add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.boulder-card-add:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.boulder-card-add-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 600;
}

.boulder-card-add:hover .boulder-card-add-content {
  color: rgba(255, 255, 255, 0.8);
}

.boulder-card-add-content svg {
  opacity: 0.8;
}

.boulder-card-image {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.boulder-card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boulder-card-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.2);
}

/* Grade Badge */
.grade-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.grade-badge.light-text {
  color: white;
}

.grade-badge.dark-text {
  color: #1a1a2e;
}

/* Status Badge */
.status-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.status-draft {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.status-badge.status-hidden {
  background: rgba(108, 117, 125, 0.2);
  color: #6c757d;
}

.status-badge.status-archived {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

.status-badge.status-pending {
  background: rgba(13, 202, 240, 0.2);
  color: #0dcaf0;
}

.status-badge.status-reset {
  background: rgba(108, 117, 125, 0.2);
  color: #6c757d;
}

.status-badge.status-under-review {
  background: rgba(255, 193, 7, 0.3);
  color: #ffc107;
  animation: pulse-review 2s ease-in-out infinite;
}

.status-badge.status-flagged {
  background: rgba(220, 53, 69, 0.3);
  color: #ff4757;
  animation: pulse-flagged 1.5s ease-in-out infinite;
}

@keyframes pulse-review {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes pulse-flagged {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

/* Card modifiers for moderation states */
.boulder-card--hidden {
  opacity: 0.5;
}

.boulder-card--under-review {
  border: 2px solid rgba(255, 193, 7, 0.5);
}

.boulder-card--flagged {
  border: 2px solid rgba(220, 53, 69, 0.5);
}

.boulder-card--pending {
  border: 2px dashed rgba(13, 202, 240, 0.5);
}

/* Wishlist Button */
.wishlist-button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
}

.wishlist-button:hover {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  transform: scale(1.1);
}

.wishlist-button.wishlisted {
  background: rgba(151, 71, 255, 0.9);
  color: white;
}

.wishlist-button.wishlisted:hover {
  background: #9747ff;
}

.wishlist-button svg {
  font-size: 14px;
}

/* When status badge is present, move wishlist button down */
.boulder-card-image .status-badge + .wishlist-button {
  top: 36px;
}

/* Open Preview Button - Focus Mode */
.open-preview-button {
  position: absolute;
  top: 8px;
  right: 44px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 2;
}

.boulder-card:hover .open-preview-button {
  opacity: 1;
}

.open-preview-button:hover {
  background: rgba(151, 71, 255, 0.9);
  color: white;
  transform: scale(1.1);
}

.open-preview-button svg {
  font-size: 13px;
}

/* Mobile: always visible but subtle */
@media (max-width: 767px) {
  .open-preview-button {
    opacity: 0.7;
    width: 28px;
    height: 28px;
    right: 40px;
  }

  .open-preview-button svg {
    font-size: 11px;
  }
}

/* Flag Button */
.flag-button {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 67, 54, 0.85);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3;
}

.boulder-card:hover .flag-button {
  opacity: 1;
}

.flag-button:hover {
  background: rgba(244, 67, 54, 1);
  transform: scale(1.1);
}

.flag-button svg {
  font-size: 12px;
}

/* Mobile: flag button always visible but subtle */
@media (max-width: 767px) {
  .flag-button {
    opacity: 0.6;
    width: 24px;
    height: 24px;
  }

  .flag-button svg {
    font-size: 10px;
  }
}

/* Publish Button - For draft boulders */
.publish-button {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(151, 71, 255, 0.9);
  border: none;
  border-radius: 16px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 3;
}

.publish-button:hover {
  background: rgba(151, 71, 255, 1);
  transform: scale(1.05);
}

.publish-button svg {
  font-size: 12px;
}

/* Mobile: smaller publish button */
@media (max-width: 767px) {
  .publish-button {
    padding: 5px 10px;
    font-size: 11px;
  }

  .publish-button svg {
    font-size: 10px;
  }
}

/* Edit/Delete Action Buttons Container */
.boulder-card-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.boulder-card:hover .boulder-card-actions {
  opacity: 1;
}

/* Mobile: always visible */
@media (max-width: 767px) {
  .boulder-card-actions {
    opacity: 1;
  }
}

/* Edit Button */
.edit-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(33, 150, 243, 0.9);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-button:hover {
  background: rgba(33, 150, 243, 1);
  transform: scale(1.1);
}

.edit-button svg {
  font-size: 14px;
}

/* Delete Button */
.delete-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 67, 54, 0.9);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.delete-button:hover {
  background: rgba(244, 67, 54, 1);
  transform: scale(1.1);
}

.delete-button svg {
  font-size: 14px;
}

/* Mobile: smaller action buttons */
@media (max-width: 767px) {
  .edit-button,
  .delete-button {
    width: 28px;
    height: 28px;
  }

  .edit-button svg,
  .delete-button svg {
    font-size: 12px;
  }
}

/* Boulder Card Info */
.boulder-card-info {
  padding: 10px;
}

.boulder-card-name {
  font-size: 13px;
  font-weight: 500;
  color: white;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boulder-card-setter {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}

.boulder-card-stats {
  display: flex;
  gap: 12px;
}

.boulder-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
}

.boulder-stat.liked {
  color: #ff6b6b;
  background: transparent;
}

.boulder-stat:hover {
  opacity: 0.8;
}

.boulder-stat:active {
  transform: scale(0.95);
}

.boulder-stat svg {
  font-size: 14px;
}

/* No Boulders */
.spray-wall-no-boulders {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

/* Load More */
.load-more-container {
  display: flex;
  justify-content: center;
  padding: 24px;
}

.btn-load-more {
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-load-more:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.btn-load-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty Tab State */
.spray-wall-empty-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.spray-wall-empty-tab .empty-icon {
  color: rgba(151, 71, 255, 0.4);
  margin-bottom: 16px;
}

.spray-wall-empty-tab .empty-icon-check {
  font-size: 48px;
  color: rgba(185, 255, 102, 0.4);
  margin-bottom: 16px;
  line-height: 1;
}

.spray-wall-empty-tab .empty-icon-brush {
  color: rgba(255, 159, 64, 0.4);
  margin-bottom: 16px;
}

.spray-wall-empty-tab h5 {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
  font-weight: 600;
}

.spray-wall-empty-tab p {
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .spray-wall-stats {
    gap: 12px;
  }

  .stat-item {
    min-width: 50px;
  }

  .stat-value {
    font-size: 18px;
  }

  .filter-row {
    flex-direction: column;
  }

  .filter-item {
    min-width: 100%;
  }
}

/* ================================================================
   SPRAY WALL MODAL STYLES
   ================================================================ */

.spray-wall-modal {
  z-index: 1060; /* Higher than mobile menu */
}

/* Desktop modal width - narrower for simple form */
@media (min-width: 768px) {
  .spray-wall-modal .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }

  /* When MediaPicker is active, expand for grid */
  .spray-wall-modal.view-media .modal-dialog {
    max-width: 800px;
  }
}

.spray-wall-modal .modal-content {
  /* Use same dark gray as BoulderModal - rgba(33, 37, 41) = #212529 */
  background: rgba(33, 37, 41, 0.98) !important;
  background-color: rgba(33, 37, 41, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.spray-wall-modal .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(33, 37, 41, 0.98) !important;
  background-color: rgba(33, 37, 41, 0.98) !important;
}

.spray-wall-modal .modal-title {
  color: #f8f9fa;
  font-weight: 600;
}

.spray-wall-modal .modal-header .btn-close {
  filter: invert(1);
  opacity: 0.8;
}

.spray-wall-modal .modal-header .btn-close:hover {
  opacity: 1;
}

.spray-wall-modal .modal-body {
  padding: 1.5rem;
  background: rgba(33, 37, 41, 0.98) !important;
  background-color: rgba(33, 37, 41, 0.98) !important;
}

.spray-wall-modal .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(33, 37, 41, 0.98) !important;
  background-color: rgba(33, 37, 41, 0.98) !important;
}

/* Form Labels */
.spray-wall-modal .form-label {
  color: #f8f9fa;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* Form Controls */
.spray-wall-modal .form-control {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8f9fa;
  border-radius: 8px;
}

.spray-wall-modal .form-control:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #9747ff;
  box-shadow: 0 0 0 0.2rem rgba(151, 71, 255, 0.25);
  color: #f8f9fa;
}

.spray-wall-modal .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.spray-wall-modal .form-text {
  color: rgba(255, 255, 255, 0.6);
}

/* Invalid state */
.spray-wall-modal .form-control.is-invalid {
  border-color: #f5484d;
}

.spray-wall-modal .invalid-feedback {
  color: #f5484d;
}

/* Delete confirmation */
.spray-wall-modal .delete-confirm-content {
  text-align: center;
  padding: 1rem;
}

.spray-wall-modal .delete-confirm-content p {
  color: #f8f9fa;
}

/* Button styles - Rumble colors */
.spray-wall-modal .btn-primary {
  background-color: #9747ff;
  border-color: #9747ff;
}

.spray-wall-modal .btn-primary:hover {
  background-color: #8035e0;
  border-color: #8035e0;
}

.spray-wall-modal .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(151, 71, 255, 0.5);
}

.spray-wall-modal .btn-secondary {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f8f9fa;
}

.spray-wall-modal .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #f8f9fa;
}

.spray-wall-modal .btn-danger {
  background-color: #f5484d;
  border-color: #f5484d;
}

.spray-wall-modal .btn-outline-danger {
  color: #f5484d;
  border-color: #f5484d;
}

.spray-wall-modal .btn-outline-danger:hover {
  background-color: #f5484d;
  color: #fff;
}

/* MediaPickerButton container styling */
.spray-wall-modal .media-picker-button {
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

.spray-wall-modal .media-picker-button:hover {
  border-color: rgba(151, 71, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.08);
}

.spray-wall-modal .mpb-placeholder-text {
  color: rgba(255, 255, 255, 0.6);
}

.spray-wall-modal .mpb-placeholder-icon svg {
  stroke: rgba(255, 255, 255, 0.4);
}

/* ================================================================
   BUTTON COLORS - Rumble Brand Standards
   Save/Create = Green (#b9ff66), Cancel = Transparent
   ================================================================ */

/* Override btn-primary to use Rumble green for save actions */
.spray-wall-modal .modal-footer .btn-primary,
.spray-wall-modal .btn-save {
  background-color: #b9ff66 !important;
  border-color: #b9ff66 !important;
  color: #212529 !important;
  font-weight: 600;
}

.spray-wall-modal .modal-footer .btn-primary:hover,
.spray-wall-modal .btn-save:hover {
  background-color: #a8e85c !important;
  border-color: #a8e85c !important;
  color: #212529 !important;
}

.spray-wall-modal .modal-footer .btn-primary:focus,
.spray-wall-modal .btn-save:focus {
  box-shadow: 0 0 0 0.2rem rgba(185, 255, 102, 0.5) !important;
}

/* Cancel button - transparent with border */
.spray-wall-modal .modal-footer .btn-secondary,
.spray-wall-modal .btn-cancel {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #f8f9fa !important;
}

.spray-wall-modal .modal-footer .btn-secondary:hover,
.spray-wall-modal .btn-cancel:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
}

/* ================================================================
   MOBILE FULLSCREEN - z-index 100500 for proper layering
   ================================================================ */

@media (max-width: 767px) {
  .spray-wall-modal.modal {
    z-index: 100500 !important;
    padding: 0 !important;
  }

  .spray-wall-modal + .modal-backdrop,
  .spray-wall-modal ~ .modal-backdrop {
    z-index: 100050 !important;
  }

  .spray-wall-modal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  .spray-wall-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;
    /* Match BoulderModal dark background - NOT violet */
    background: rgba(33, 37, 41, 0.98) !important;
    background-color: rgba(33, 37, 41, 0.98) !important;
  }

  .spray-wall-modal .modal-header {
    background: rgba(33, 37, 41, 0.98) !important;
    background-color: rgba(33, 37, 41, 0.98) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .spray-wall-modal .modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    background: rgba(33, 37, 41, 0.98) !important;
    background-color: rgba(33, 37, 41, 0.98) !important;
  }

  .spray-wall-modal .modal-footer {
    background: rgba(33, 37, 41, 0.98) !important;
    background-color: rgba(33, 37, 41, 0.98) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* ================================================================
   SLIDE NAVIGATION for MediaPicker integration
   2-panel slide: form -> media
   ================================================================ */

.wall-slide-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.wall-slide-wrapper {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}

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

.wall-slide-wrapper.view-media {
  transform: translateX(-50%);
}

.wall-slide-panel {
  width: 50%;
  flex-shrink: 0;
  overflow-y: auto;
}

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

.wall-slide-panel.media-panel {
  display: flex;
  flex-direction: column;
}

/* Media selector trigger - clickable image area */
.media-selector-trigger {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
}

.media-selector-trigger:hover {
  border-color: #b9ff66;
  background: rgba(185, 255, 102, 0.05);
}

.media-selector-trigger img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  object-fit: cover;
}

.media-selector-trigger .placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.media-selector-trigger .placeholder svg {
  font-size: 2.5rem;
  opacity: 0.6;
}

.media-selector-trigger .placeholder span {
  font-size: 14px;
}

/* Header back button for media panel */
.spray-wall-modal .btn-header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  color: #f8f9fa;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 12px;
}

.spray-wall-modal .btn-header-back:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Hide footer when in media panel */
.spray-wall-modal.view-media .modal-footer {
  display: none;
}

/* Mobile adjustments for slide panels */
@media (max-width: 767px) {
  .wall-slide-panel.media-panel {
    height: calc(100vh - 120px);
    height: calc(100dvh - 120px);
  }

  .media-selector-trigger {
    min-height: 100px;
    padding: 1rem;
  }

  .media-selector-trigger img {
    max-height: 150px;
  }
}

/* ================================================================
   MEDIAPICKER CONTENT STYLING INSIDE MODAL
   Ensure dark theme and proper button colors
   ================================================================ */

/* MediaPickerContent background - match BoulderModal dark gray */
.spray-wall-modal .media-picker-content,
.spray-wall-modal .media-picker-content-panel,
.spray-wall-modal .wall-slide-panel.media-panel {
  background: rgba(33, 37, 41, 0.98) !important;
  background-color: rgba(33, 37, 41, 0.98) !important;
}

/* MediaPicker grid items */
.spray-wall-modal .media-grid-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.spray-wall-modal .media-grid-item:hover {
  border-color: #b9ff66;
}

.spray-wall-modal .media-grid-item.selected {
  border-color: #b9ff66;
  background: rgba(185, 255, 102, 0.1);
}

/* Select button in MediaPicker - Rumble green */
.spray-wall-modal .media-picker-content .btn-primary,
.spray-wall-modal .media-picker-footer .btn-primary,
.spray-wall-modal .btn-select-media,
.spray-wall-modal .wall-slide-panel.media-panel .btn-primary {
  background-color: #b9ff66 !important;
  border-color: #b9ff66 !important;
  color: #212529 !important;
  font-weight: 600;
}

.spray-wall-modal .media-picker-content .btn-primary:hover,
.spray-wall-modal .media-picker-footer .btn-primary:hover,
.spray-wall-modal .btn-select-media:hover,
.spray-wall-modal .wall-slide-panel.media-panel .btn-primary:hover {
  background-color: #a8e85c !important;
  border-color: #a8e85c !important;
  color: #212529 !important;
}

/* MediaPicker tabs */
.spray-wall-modal .media-picker-tabs .nav-link {
  color: rgba(255, 255, 255, 0.7);
}

.spray-wall-modal .media-picker-tabs .nav-link.active {
  color: #b9ff66;
  border-bottom-color: #b9ff66;
}

/* Upload area */
.spray-wall-modal .media-upload-dropzone {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.2);
}

.spray-wall-modal .media-upload-dropzone:hover {
  border-color: #b9ff66;
  background: rgba(185, 255, 102, 0.05);
}

/* Folder selector */
.spray-wall-modal .folder-select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f8f9fa;
}

/* ================================================================
   FLAG MODAL (Report Boulder) - Dark Theme Styling
   z-index: 10001 set inline to appear above FocusModeModal (9999)
   ================================================================ */

.flag-modal .modal-content {
  background: rgba(33, 37, 41, 0.98) !important;
  background-color: rgba(33, 37, 41, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.flag-modal .modal-header {
  background: rgba(33, 37, 41, 0.98) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.flag-modal .modal-title {
  color: #f8f9fa;
}

.flag-modal .modal-header .btn-close {
  filter: invert(1);
  opacity: 0.8;
}

.flag-modal .modal-body {
  background: rgba(33, 37, 41, 0.98) !important;
}

.flag-modal .modal-body p,
.flag-modal .modal-body .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.flag-modal .modal-body strong {
  color: #f8f9fa;
}

/* Radio buttons */
.flag-modal .form-check-label {
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.flag-modal .form-check-input {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.flag-modal .form-check-input:checked {
  background-color: #dc3545;
  border-color: #dc3545;
}

/* Textarea for "Other" reason */
.flag-modal .form-control {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8f9fa;
}

.flag-modal .form-control:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  color: #f8f9fa;
}

.flag-modal .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Warning box */
.flag-modal .text-warning {
  color: #ffc107 !important;
}

.flag-modal .modal-footer {
  background: rgba(33, 37, 41, 0.98) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Cancel button */
.flag-modal .btn-secondary {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #f8f9fa !important;
}

.flag-modal .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Mobile fullscreen for FlagModal */
@media (max-width: 767px) {
  .flag-modal.modal {
    z-index: 10001 !important;
  }

  .flag-modal + .modal-backdrop,
  .flag-modal ~ .modal-backdrop {
    z-index: 10000 !important;
  }
}

/* ================================================================
   ROULETTE/SWIPE MODE - Full Page Takeover
   Desktop: Covers full area below header rows
   ================================================================ */

.roulette-takeover {
  position: fixed;
  top: 113px; /* Below header rows: 57px + 56px */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
}

.roulette-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.roulette-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 767px) {
  .roulette-takeover {
    top: 0; /* Full screen on mobile */
  }
}

/* ================================================================
   BETA BROWSER MODE - Mobile Adjustments
   When body has .beta-browser-mode class, adjust for bottom bar
   ================================================================ */

/* When tab bar is hidden (Beta Browser mode), adjust wall image sticky position */
@media (max-width: 767px) {
  body.beta-browser-mode .wall-image-sticky {
    top: 0 !important;
  }

  /* Hide search bar section on mobile in beta browser mode - search is in the drawer */
  body.beta-browser-mode .search-bar-section {
    display: none !important;
  }

  /* Hide roulette button on mobile in beta browser mode - FAB handles this */
  body.beta-browser-mode .roulette-btn {
    display: none !important;
  }
}

/* ================================================================
   ROULETTE MODE ACTIVE - Hide sticky elements
   When roulette/swipe mode is active, hide sticky image and tab bar
   ================================================================ */

.spray-wall-manager.roulette-active .wall-image-sticky {
  display: none !important;
}

.spray-wall-manager.roulette-active .tab-bar-wrapper {
  display: none !important;
}