/*
 * APPLE-STYLE SCROLLBARS
 * ======================
 * Ultra-thin, elegant scrollbars without arrows
 * Consistent across all browsers and platforms
 */

/* ============================================================================
   GLOBAL SCROLLBAR RESET - Remove default arrows and styling
   ============================================================================ */

/* Remove scrollbar arrows/buttons globally */
::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Remove scrollbar corner */
::-webkit-scrollbar-corner {
  display: none !important;
  background: transparent !important;
}

/* ============================================================================
   APPLE-STYLE SCROLLBAR BASE
   ============================================================================ */

/* Ultra-thin scrollbar track */
::-webkit-scrollbar {
  width: 3px !important;  /* Apple-thin vertical */
  height: 3px !important; /* Apple-thin horizontal */
  background: transparent !important;
}

/* Invisible track by default */
::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 0 !important;
  /* REMOVED: margin: 0 !important; - was causing unwanted margin-bottom on datetime container on touch mobile */
}

/* Apple-style thumb - appears only on hover/scroll */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 2px !important;
  border: none !important;
  min-height: 20px !important;
  transition: background-color 0.2s ease !important;
}

/* Hover state - slightly more visible */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Active state - most visible */
::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* ============================================================================
   DARK MODE SCROLLBARS
   ============================================================================ */

.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4) !important;
}

.dark ::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================================
   FIREFOX SCROLLBAR STYLING
   ============================================================================ */

/* Firefox scrollbar defaults — set on root and inherit; do not apply to buttons/controls
   (scrollbar-color on buttons causes a visible white outline in dark mode). */
html {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}

html.dark {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
}

button,
input,
select,
textarea,
[role="button"] {
  scrollbar-width: auto !important;
  scrollbar-color: auto !important;
}

/* ============================================================================
   LIST SHEET SPECIFIC - EXTRA THIN FOR MOBILE
   ============================================================================ */

#listings-sheet,
#listings-sheet *,
#listings-scroll-shell,
[data-listings-container="true"] {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent !important;
}

#listings-sheet ::-webkit-scrollbar,
#listings-scroll-shell::-webkit-scrollbar,
[data-listings-container="true"]::-webkit-scrollbar {
  width: 2px !important;  /* Extra thin for mobile list */
  height: 2px !important;
}

#listings-sheet ::-webkit-scrollbar-thumb,
#listings-scroll-shell::-webkit-scrollbar-thumb,
[data-listings-container="true"]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 1px !important;
  min-height: 30px !important;
}

#listings-sheet ::-webkit-scrollbar-thumb:hover,
#listings-scroll-shell::-webkit-scrollbar-thumb:hover,
[data-listings-container="true"]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode for list sheet */
.dark #listings-sheet ::-webkit-scrollbar-thumb,
.dark #listings-scroll-shell::-webkit-scrollbar-thumb,
.dark [data-listings-container="true"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}

.dark #listings-sheet ::-webkit-scrollbar-thumb:hover,
.dark #listings-scroll-shell::-webkit-scrollbar-thumb:hover,
.dark [data-listings-container="true"]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================================
   SPOT DETAILS SCROLLBAR - SLIGHTLY MORE VISIBLE
   ============================================================================ */

#spot-detail-content::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.3) !important;
  border-radius: 2px !important;
}

#spot-detail-content::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.5) !important;
}

/* ============================================================================
   MODAL AND POPUP SCROLLBARS
   ============================================================================ */

.modal-content::-webkit-scrollbar,
.popup-content::-webkit-scrollbar,
.dropdown-content::-webkit-scrollbar {
  width: 2px !important;
}

.modal-content::-webkit-scrollbar-thumb,
.popup-content::-webkit-scrollbar-thumb,
.dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

/* ============================================================================
   CALENDAR AND TIME PICKER SCROLLBARS
   ============================================================================ */

.calendar-grid::-webkit-scrollbar,
.picker-time-slots::-webkit-scrollbar {
  width: 2px !important;
}

.calendar-grid::-webkit-scrollbar-thumb,
.picker-time-slots::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 1px !important;
}

/* ============================================================================
   AMENITIES AND FILTER SCROLLBARS - ULTRA THIN
   ============================================================================ */

.amenity-chips-container::-webkit-scrollbar,
.amenities-container::-webkit-scrollbar {
  width: 1px !important;  /* Ultra thin for filters */
  height: 1px !important;
}

.amenity-chips-container::-webkit-scrollbar-thumb,
.amenities-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1) !important;
  border-radius: 1px !important;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Mobile - Even thinner scrollbars */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 2px !important;
    height: 2px !important;
  }

  #listings-sheet ::-webkit-scrollbar,
  #listings-scroll-shell::-webkit-scrollbar {
    width: 1px !important;  /* Barely visible on mobile */
  }

  /* CRITICAL: Make scrollbar more visible for spot details */
  #listings-sheet #listings-content-sheet.spot-details-scroll-active::-webkit-scrollbar {
    width: 4px !important;  /* More visible for spot details scrolling */
  }

  #listings-sheet #listings-content-sheet.spot-details-scroll-active::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.4) !important; /* Blue tint for better visibility */
    min-height: 40px !important; /* Larger minimum thumb size */
  }
}

/* Desktop - Slightly more visible when needed */
@media (min-width: 1024px) {
  ::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5) !important;
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5) !important;
  }
}

/* ============================================================================
   ACCESSIBILITY - ENSURE SCROLLBARS ARE VISIBLE WHEN NEEDED
   ============================================================================ */

/* High contrast mode */
@media (prefers-contrast: high) {
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.8) !important;
  }

  .dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.8) !important;
  }
}

/* Reduced motion - Keep scrollbars more visible */
@media (prefers-reduced-motion: reduce) {
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3) !important;
    transition: none !important;
  }

  .dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
  }
}

/* Dark overlay/text contrast: themes/dark-mode.css */

/* Dark overlay/text contrast: themes/dark-mode.css */

/* List Spot step 1 spot-type dropdown: visible native scrollbar on pointer devices only.
   Touch phones expand the panel (listspot-overrides.css) so options are not clipped. */
@media (hover: hover) and (pointer: fine) {
  body.listspot-wizard #spotTypeContent.spot-type-dropdown-scroll-always-visible:not(.hidden),
  body.spot-type-dropdown-open #spotTypeContent {
    overflow-y: scroll !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(71, 85, 105, 0.55) rgba(226, 232, 240, 0.9) !important;
  }

  body.listspot-wizard #spotTypeContent.spot-type-dropdown-scroll-always-visible:not(.hidden)::-webkit-scrollbar,
  body.spot-type-dropdown-open #spotTypeContent::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    -webkit-appearance: none;
  }

  body.listspot-wizard #spotTypeContent.spot-type-dropdown-scroll-always-visible:not(.hidden)::-webkit-scrollbar-track,
  body.spot-type-dropdown-open #spotTypeContent::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.35) !important;
    border-radius: 4px !important;
  }

  body.listspot-wizard #spotTypeContent.spot-type-dropdown-scroll-always-visible:not(.hidden)::-webkit-scrollbar-thumb,
  body.spot-type-dropdown-open #spotTypeContent::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.55) !important;
    border-radius: 4px !important;
    min-height: 32px !important;
  }

  .dark body.listspot-wizard #spotTypeContent.spot-type-dropdown-scroll-always-visible:not(.hidden)::-webkit-scrollbar-track,
  .dark body.spot-type-dropdown-open #spotTypeContent::-webkit-scrollbar-track {
    background: rgba(51, 65, 85, 0.7) !important;
  }

  .dark body.listspot-wizard #spotTypeContent.spot-type-dropdown-scroll-always-visible:not(.hidden)::-webkit-scrollbar-thumb,
  .dark body.spot-type-dropdown-open #spotTypeContent::-webkit-scrollbar-thumb {
    background: rgba(203, 213, 225, 0.45) !important;
  }
}