/* CropMap scrollbars — vertical curved, horizontal straight (same design language) */
.scroll-container[data-scrollbar] {
  --card-border-radius: 16px;
  --thumb-color: var(--cm-primary, #007A33);
  --thumb-color-active: var(--cm-accent-end, #38ef7d);
  --thumb-width: 4;
  --thumb-width-active: 6;
  --track-color: transparent;
  --track-color-active: var(--cm-border, #dee2e6);
  --track-width: 4;
  --track-width-active: 6;

  position: relative;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  min-height: 0;
}

.scroll-container[data-scrollbar] .scroll-content {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  z-index: 1;
}

.scroll-container[data-scrollbar].has-scrollbar-x .scroll-content,
.scroll-container[data-scrollbar="x"] .scroll-content,
.scroll-container[data-scrollbar="xy"] .scroll-content,
.scroll-container[data-scrollbar="yx"] .scroll-content,
.scroll-container[data-scrollbar="both"] .scroll-content {
  overflow-x: auto;
  padding-bottom: 1.1rem;
}

.scroll-container[data-scrollbar="x"] .scroll-content {
  overflow-y: hidden;
  padding-right: 0.5rem;
  padding-bottom: 1.1rem;
}

.scroll-container[data-scrollbar].has-scrollbar-y .scroll-content,
.scroll-container[data-scrollbar="y"] .scroll-content,
.scroll-container[data-scrollbar="xy"] .scroll-content,
.scroll-container[data-scrollbar="yx"] .scroll-content,
.scroll-container[data-scrollbar="both"] .scroll-content,
.scroll-container[data-scrollbar=""] .scroll-content,
.scroll-container[data-scrollbar="1"] .scroll-content,
.scroll-container[data-scrollbar="true"] .scroll-content {
  overflow-y: auto;
  padding-right: 1.25rem;
}

.scroll-container[data-scrollbar] .scroll-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.scroll-container[data-scrollbar] .scrollbar-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease;
}

.scroll-container[data-scrollbar] .scrollbar-svg:has(:active) {
  --thumb-width: var(--thumb-width-active);
  --track-width: var(--track-width-active);
  --track-color: var(--track-color-active);
}

.scroll-container[data-scrollbar] .scrollbar-track {
  fill: none;
  stroke: var(--track-color);
  stroke-width: var(--track-width);
  stroke-linecap: round;
  transition: stroke-width 150ms ease-in-out, stroke 150ms ease-in-out;
}

.scroll-container[data-scrollbar] .scrollbar-thumb {
  fill: none;
  stroke: var(--thumb-color);
  stroke-width: var(--thumb-width);
  stroke-linecap: round;
  pointer-events: auto;
  cursor: grab;
  transition: stroke-width 150ms ease-in-out, stroke 150ms ease-in-out;
}

.scroll-container[data-scrollbar] .scrollbar-thumb:active {
  stroke: var(--thumb-color-active);
  cursor: grabbing;
}

/* Notification panel scroll area */
.cm-notif-scroll {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 340px;
  height: 340px;
  --card-border-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Parcel list scroll area */
.cm-parcel-scroll {
  height: min(500px, 55vh);
  min-height: 200px;
  --card-border-radius: 12px;
}

.cm-parcel-scroll .scroll-content {
  padding: 10px 1.25rem 10px 10px;
}

.cm-parcel-scroll .parcel-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  max-height: none;
  overflow: visible;
  padding: 0;
}

/* Weather tab — inner scroll host (never on tab-pane itself) */
.cm-weather-scroll-host {
  --card-border-radius: 12px;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  flex: 1 1 auto;
}

.cm-weather-scroll-host .scroll-content {
  padding: 4px 1.25rem 12px 6px;
}

/* Mobile parcel list */
.cm-mobile-parcel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  --card-border-radius: 12px;
  --thumb-color: var(--cm-primary, #007A33);
  --thumb-color-active: var(--cm-accent-end, #38ef7d);
}

.cm-mobile-parcel-scroll .scroll-content {
  padding: 4px 8px 6px 4px;
}

/* Map legend — curved scroll when list overflows */
.cm-legend-scroll {
  --card-border-radius: 12px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.cm-legend-scroll .scroll-content {
  padding: 4px 1.1rem 10px 10px;
}

.cm-legend-panel-scroll {
  --card-border-radius: 0 0 16px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
  position: relative;
}

.cm-legend-panel-scroll .scroll-content {
  padding: 6px 1.1rem 12px 12px;
}

.cm-legend-panel-scroll .maplegend,
.cm-legend-panel-scroll .maplegend .legend-scale {
  overflow: visible !important;
  max-height: none !important;
}

/* Shared non-SVG fallback: same look, straight (used only when native bar unavoidable) */
.cm-scroll-brand,
.cm-scroll-brand-x {
  scrollbar-width: thin;
  scrollbar-color: var(--cm-primary, #007A33) transparent;
}

.cm-scroll-brand::-webkit-scrollbar,
.cm-scroll-brand-x::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.cm-scroll-brand::-webkit-scrollbar-track,
.cm-scroll-brand-x::-webkit-scrollbar-track {
  background: transparent;
}

.cm-scroll-brand::-webkit-scrollbar-thumb,
.cm-scroll-brand-x::-webkit-scrollbar-thumb {
  background: var(--cm-primary, #007A33);
  border-radius: 999px;
}

.cm-scroll-brand::-webkit-scrollbar-thumb:hover,
.cm-scroll-brand-x::-webkit-scrollbar-thumb:hover {
  background: var(--cm-accent-end, #38ef7d);
}

.cm-scroll-brand::-webkit-scrollbar-corner,
.cm-scroll-brand-x::-webkit-scrollbar-corner {
  background: transparent;
}

/* Prefer hiding native bars when custom SVG manages the axis */
.cm-hide-native-scrollbar {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.cm-hide-native-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@media (max-width: 768px) {
  .cm-notif-scroll {
    height: min(340px, calc(100vh - 180px));
    max-height: min(340px, calc(100vh - 180px));
  }

  .cm-parcel-scroll {
    height: min(420px, calc(100vh - 220px));
  }

  #featureModal #weather.tab-pane.active .cm-weather-scroll-host {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
  }

  #featureModal #weather.tab-pane.active .cm-weather-scroll-host .scroll-content {
    padding: 4px 8px 12px 4px;
  }
}