/*
 * Rosgis observation filter - compact mobile-first Leaflet control
 * Use this stylesheet instead of the older observation-filter styles.
 */

/* Closed control: exactly one 44 x 44 px button. */
.leaflet-control-observation-filter.leaflet-control.leaflet-bar {
  z-index: 9998;
}

/* Leaflet-style filter / close button. */
.leaflet-control-observation-filter.leaflet-bar > a.observation-filter-toggle.leaflet-bar-part {
  position: relative !important;
  z-index: 9999;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

}

.leaflet-control-observation-filter.leaflet-bar > a.observation-filter-toggle {
  background: #fff !important;
  color: #005854 !important;
  text-decoration: none !important;  
}

.leaflet-control-observation-filter.is-open > a.observation-filter-toggle {
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.leaflet-control-observation-filter.leaflet-bar > a.observation-filter-toggle:hover {
  background: #f4f4f4 !important;
  color: #005854 !important;
  text-decoration: none !important;
}

.leaflet-control-observation-filter .observation-filter-toggle > i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

/* Small indicator when anything is filtered out. */
.leaflet-control-observation-filter .observation-filter-toggle.has-active-filters::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--syke-red, #b34733);
}

/* Panel is absolute, so it never changes the closed control width. */
.leaflet-control-observation-filter.leaflet-bar > .observation-filter-panel {
  position: absolute !important;
  z-index: 9997;
  top: 16px !important;
  right: 15px !important;
  left: auto !important;
  bottom: auto !important;

  display: block;
  width: 280px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 20px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(
  62vh,
  var(--observation-filter-max-height, 62vh)
) !important;

  margin: 0 !important;
  padding: 12px 10px 10px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;

  border: 0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.35) !important;
  z-index: 1000;
}

.leaflet-control-observation-filter.leaflet-bar > .observation-filter-panel[hidden],
.leaflet-control-observation-filter .observation-filter-events-section[hidden] {
  display: none !important;
}

/* Compact sections: no separate "Suodatus" title. */
.observation-filter-section {
  padding: 10px 0;
}

.observation-filter-section-first {
  padding-top: 1px;
}

.observation-filter-section + .observation-filter-section {
  border-top: 1px solid #e1e1e1;
}

.observation-filter-heading {
  margin: 0 0 10px 5px;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.12;
}

.leaflet-control-observation-filter label {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  padding: 1px 0;
  font-size: 0.84rem;
  line-height: 1.12;
  cursor: pointer;
}

.observation-filter-all {
  margin-bottom: 1px !important;
  font-weight: 600;
}

.observation-filter-types {
  padding-left: 10px;
}

.observation-filter-years {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 5px;
  row-gap: 0;
  padding-left: 10px;
}

.observation-filter-cleaning-options {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 0;
  padding-left: 10px;
}

.leaflet-control-observation-filter input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 1px;
}

.observation-filter-events-section label {
  padding-left: 10px;
}


/* Faceted filter: unavailable choices remain visible but cannot be selected. */
.leaflet-control-observation-filter label.is-disabled {
  opacity: 0.45;
  cursor: default;
}

.leaflet-control-observation-filter label.is-disabled input[type="checkbox"] {
  cursor: default;
}

.leaflet-top.leaflet-right {
        z-index: 2000 !important;
}