/**
 * @file
 * Shared tool page rules (biopama_libraries/tool-page): WEFE, eStation,
 * Nature Africa, Conservation Tracking. Palette: the theme skin
 * (akp/css/ct_override.css). Only what Bootstrap has no utility for.
 */

/* Drupal.Message wrapper (core/drupal.message): floats over the map. */
.messages__wrapper {
  position: fixed;
  top: 50%;
  z-index: 1000;
  left: 40%;
  width: 20%;
}

/* Chosen country selector inside the map control (createMap.js): a fixed
   comfortable width that yields to a narrow screen, leaving the map's own
   controls on the right reachable. Bootstrap has no calc() width utility. */
.mapboxgl-ctrl.biopama-country-control {
  width: 18rem;
  max-width: calc(100vw - 7rem);
}

/* Loader host in the query popups (mapLayerQuery.js). */
.popup-loader {
  position: relative;
}

/* The sidebar and the map fill the viewport below the row's top
   (--biopama-top-offset, measured on the row by biopama_libraries/viewport,
   which also supplies the .screen-vh rule). Below lg the map keeps the whole
   height and the sidebar becomes an overlay sliding in from the left
   (js/toolPage.js hides it by default and after an interaction that sends
   the user to the map; the expand-map chevron toggles .collapse-column). The
   id + class selectors outrank the shared rule and the desktop collapse rule
   below. */
@media (max-width: 991.98px) {
  #main[data-biopama-tool-page] [data-biopama-fill-viewport] {
    position: relative;
  }

  #main[data-biopama-tool-page] #menu-container.screen-vh,
  #main[data-biopama-tool-page] #menu-container.screen-vh-admin {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    width: 85%;
    max-width: 24rem;
    height: auto;
    box-shadow: 0.5rem 0 1rem rgba(0, 0, 0, 0.35);
    transition: transform .3s ease-out;
  }

  #main[data-biopama-tool-page] #menu-container.collapse-column {
    width: 85%;
    overflow: visible;
    transform: translateX(-100%);
    box-shadow: none;
  }

  #main[data-biopama-tool-page] #ct-menu.screen-vh,
  #main[data-biopama-tool-page] #ct-menu.screen-vh-admin {
    height: 100%;
  }

  /* The expand-map chevron (a Mapbox control at the map's bottom left) rides
     on the open menu's right edge, so it can close the menu again: shifted
     by the overlay's width (85% of the viewport, capped like the overlay).
     The map column follows #menu-container in the row (~). */
  #main[data-biopama-tool-page] #menu-container ~ div .mapboxgl-ctrl.mapbox-expand-map {
    transition: transform .3s ease-out;
  }

  #main[data-biopama-tool-page] #menu-container:not(.collapse-column) ~ div .mapboxgl-ctrl.mapbox-expand-map {
    transform: translateX(min(85vw, 24rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  #main[data-biopama-tool-page] #menu-container.screen-vh,
  #main[data-biopama-tool-page] #menu-container.screen-vh-admin,
  #main[data-biopama-tool-page] #menu-container ~ div .mapboxgl-ctrl.mapbox-expand-map {
    transition: none;
  }
}

/* Floating layer stack on the pages that drag it as a whole (Nature Africa
   nests its stack inside its own panel and does not carry the attribute).
   Geometry and tint from the former biopama_conservation_tracking
   indicator_card.css rule and the theme's ct_override.css tint. */
#block-indicatorcard[data-biopama-panel-drag] {
  position: absolute;
  right: 3em;
  top: 1rem;
  max-height: 70%;
  background: #43494d75;
}

/* The stack (a flex child of the panel) scrolls under the fixed header; a
   flex item's minimum height is its content unless told otherwise. */
#block-indicatorcard[data-biopama-panel-drag] > #block-indicatorcards {
  min-height: 0;
}

/* The stack header and the cards use the sidebar row's icon size
   (.biopama-icon-btn, menuRow.css) instead of Conservation Tracking's 40px
   circles; the extra selector outranks .btn.rounded-circle.indicator-actions-icon. */
#block-indicatorcard .btn.rounded-circle.indicator-actions-icon,
.indicator-card .btn.rounded-circle.indicator-actions-icon {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
}

/* Expand-map button (biopama_conservation_tracking/js/ct_map.js adds it and
   toggles .collapse-column on the sidebar column). The id + class selector
   outranks the .col / .col-lg-* utilities; overflow: hidden clips the
   sidebar header while collapsed. Moved here from the theme's ct_override.css
   so every map page shares one rule set. */
#menu-container {
  transition: all .5s ease-out;
}

#menu-container.collapse-column {
  flex-grow: 0;
  width: 0;
  overflow: hidden;
}

button.btn.btn-expand-map {
  transition: transform 1s;
}

button.btn.btn-expand-map.collapseActivated {
  transform: rotate(180deg);
}

.mapboxgl-ctrl.mapbox-expand-map {
  bottom: 100px;
  position: relative;
  background: #43494d;
  left: -10px;
}

.mapboxgl-ctrl.mapbox-expand-map button i {
  color: var(--bs-white);
}