/**
 * @file
 * Nature Africa tool page.
 *
 * Templates use Bootstrap 5 utilities only. This file does two things:
 *  1. Maps the Conservation Tracking grey palette (values taken from
 *     akp/css/ct_override.css and biopama_conservation_tracking/css/ct_menu.css)
 *     onto Bootstrap's CSS tokens, scoped to #nature-africa-app, so bg-body,
 *     bg-dark, cards, accordion, forms and offcanvas render in that palette
 *     without per-element custom classes. Bootstrap component classes read
 *     these tokens at the element, so a scoped override is the supported
 *     theming mechanism.
 *  2. Holds the few rules Bootstrap has no utility for (min-height 0,
 *     viewport max-height, a fixed square size, hover-fill overrides, the
 *     floating map panel's position and Conservation Tracking overrides,
 *     the readout popup, the suitability colours) and the Chosen widget
 *     colours (not a Bootstrap component).
 *
 * Palette: sidebar #43494e, panels/cards #383c40, inputs #282d30, accent
 * Bootstrap warning yellow, dividers white at 15%.
 */

/* --- 1. Conservation Tracking greys as Bootstrap tokens ------------------ */

#nature-africa-app {
  --bs-body-bg: #43494e;
  --bs-body-bg-rgb: 67, 73, 78;
  --bs-body-color: #fff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-dark: #383c40;
  --bs-dark-rgb: 56, 60, 64;
  --bs-secondary-bg: #4d5359;
  --bs-secondary-bg-rgb: 77, 83, 89;
  --bs-tertiary-bg: #282d30;
  --bs-tertiary-bg-rgb: 40, 45, 48;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(255, 255, 255, 0.65);
  --bs-tertiary-color: rgba(255, 255, 255, 0.45);
  --bs-heading-color: #fff;
  --bs-border-color: rgba(255, 255, 255, 0.15);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-link-color: #ffc107;
  --bs-link-color-rgb: 255, 193, 7;
  --bs-link-hover-color: #ffcd39;
  --bs-link-hover-color-rgb: 255, 205, 57;
}

#nature-africa-app .accordion {
  --bs-accordion-color: #fff;
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: rgba(255, 255, 255, 0.15);
  --bs-accordion-btn-color: #fff;
  --bs-accordion-btn-bg: #383c40;
  --bs-accordion-active-color: #ffc107;
  --bs-accordion-active-bg: #2f3438;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

/* Bootstrap declares the chevron icons on ::after under [data-bs-theme=dark],
   so they must be overridden there: white closed, yellow open. */
#nature-africa-app .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffc107'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Conservation Tracking card, as it really renders: body .bg-card-dark
   (#2f3438, akp colors.css); header = Bootstrap's own card-cap default, the
   body text colour at 3% (the preset's :root card-cap value is overridden by
   Bootstrap's .card declaration), i.e. a faint lift over the body; card
   border transparent (CT ct_menu.css), so the header line is invisible. */
#nature-africa-app .card {
  --bs-card-bg: #2f3438;
  --bs-card-color: #fff;
  --bs-card-title-color: #fff;
  --bs-card-subtitle-color: rgba(255, 255, 255, 0.65);
  --bs-card-border-color: transparent;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-cap-color: #fff;
}

#nature-africa-app .form-control,
#nature-africa-app .form-select {
  --bs-body-bg: #282d30;
}

/* Yellow accent for focused inputs (Bootstrap hard-codes the blue ring). */
#nature-africa-app .form-control:focus,
#nature-africa-app .form-select:focus {
  border-color: #ffc107;
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

/* Query results panel (#offcanvas, CT contract) and the modal metadata
   dialog's dropdowns live inside the app root. */
#nature-africa-app .offcanvas {
  --bs-offcanvas-bg: #383c40;
  --bs-offcanvas-color: #fff;
  --bs-offcanvas-border-color: rgba(255, 255, 255, 0.15);
}

#nature-africa-app .dropdown-menu {
  --bs-dropdown-bg: #383c40;
  --bs-dropdown-color: #fff;
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-color: #fff;
  --bs-dropdown-link-hover-color: #ffc107;
  --bs-dropdown-link-hover-bg: #43494e;
  --bs-dropdown-link-active-bg: #282d30;
}

/* --- 2. Rules Bootstrap cannot express ---------------------------------- */

/* Flex children need min-height 0 before overflow-y-auto can scroll them. */
#nature-africa-app .na-min-h-0 {
  min-height: 0;
}

/* Bottom info panel: never take more than 40% of the viewport. */
#nature-africa-app .na-info-panel {
  max-height: 40vh;
}

/* Square icon buttons (Bootstrap has no fixed rem width/height utility). */
#nature-africa-app .na-icon-btn {
  width: 1.75rem;
  height: 1.75rem;
}

/* biopama_conservation_tracking/css/ct_menu.css forces .indicator-actions-icon
   to 40px !important (its own cards); in the panel headers those triggers are
   the shared 1.75rem circle, so their hover fill stays round. */
#nature-africa-app .indicator-actions-icon {
  width: 1.75rem !important;
  height: 1.75rem;
}

/* --- Floating map panel (active layers + overlays) ----------------------- */

/* Initial position as plain properties, not top-0/end-0 (the
   biopama_libraries/panel-drag contract: jQuery UI moves the panel with
   inline top/left, which the !important utilities would pin). Right offset
   equals the legend's me-5. The height cap makes the section bodies scroll
   (na-min-h-0 + overflow-y-auto) instead of the page. */
#nature-africa-app .na-map-panel {
  top: 1rem;
  right: 3rem;
  max-height: 70%;
}

/* biopama_conservation_tracking/css/ct/indicator_card.css floats
   #block-indicatorcard on its own (absolute !important, right 3em, top 20%,
   scrolling) and the theme tints it; here it is a flex section of the panel.
   Two ids outrank div#id. The !important also beats the inline
   `position: relative` the theme's jQuery UI draggable writes on init (kept
   after panel-drag destroys that widget). d-none (display: none !important)
   still hides the section. */
#nature-africa-app #block-indicatorcard {
  position: static !important;
  /* .card is already a flex column; the stack must also be able to shrink. */
  min-height: 0;
  max-height: none;
  overflow: visible;
  /* The theme's translucent div#block-indicatorcard tint outranks .card. */
  background-color: var(--bs-card-bg);
}

/* Collapsible panel body: a flex column so the active layers card can yield
   height. Only while shown (a d-flex utility would defeat the collapse). */
#nature-africa-app .na-map-panel-body.show {
  display: flex;
  flex-direction: column;
}

/* Scrolling section bodies. Not the overflow-y-auto utility: it is !important
   and would beat Bootstrap's .collapsing { overflow: hidden }, flashing a
   scrollbar during the minimise/maximise animation. */
#nature-africa-app .na-scroll-body:not(.collapsing) {
  overflow-y: auto;
}

/* Dataset row toggle: no background change on hover (contrast). Feedback is
   the title colour animating to the accent and the plus circle rotating 90deg
   once per hover. The button colours are Bootstrap's own .btn-link variables,
   overridden here because the scoped --bs-link-color (yellow) would otherwise
   be the resting colour. */
#nature-africa-app .na-row-toggle {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #ffc107;
  /* The theme preset sets --bs-btn-hover-bg: #e9ecef on :root and .btn-link
     does not override it, so the light hover fill has to be cleared here. */
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #ffc107;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
  transition: color 0.3s ease;
}

/* The circle keeps its background on hover/active. */
#nature-africa-app .na-row-state {
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
}

#nature-africa-app .na-row-state i {
  transition: transform 0.3s ease;
}

/* Only the plus rotates; a rotated minus would read as a vertical bar. */
#nature-africa-app .na-row-toggle:hover .na-row-state i.fa-plus,
#nature-africa-app .na-row-toggle:focus-visible .na-row-state i.fa-plus {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  #nature-africa-app .na-row-toggle,
  #nature-africa-app .na-row-state i {
    transition: none;
  }
}

/* Chosen (the map's country selector) is not a Bootstrap component, but the
   site's chosen.css reads Bootstrap body/border tokens, so one scoped token
   block colours the control, its clear icon, the dropdown and the search box. */
#nature-africa-app .chosen-container {
  --bs-body-bg: #282d30;
  --bs-body-color: #fff;
  --bs-border-color: rgba(255, 255, 255, 0.15);
}

#nature-africa-app .chosen-container-active .chosen-single {
  box-shadow: none;
}

#nature-africa-app .chosen-container .chosen-results li.highlighted {
  background: #43494e;
  color: #ffc107;
}

/* --- Readout popup (Phase 2) -------------------------------------------- */

/* Mapbox owns these classes, so the panel grey and the tip colour have to be
   set here. Mapbox re-enables pointer events on .mapboxgl-popup-content; for
   a hover popup that must stay off, or sliding onto the popup fires the map's
   mouseout and the popup flickers at its edge. Text size comes from the
   `small` utility on the content root. */
.na-readout-popup .mapboxgl-popup-content {
  pointer-events: none;
  background-color: #383c40;
  color: #fff;
  padding: 0.25rem 0;
}

/* An administrative unit is under the pointer (readout sets the class). */
#nature-africa-app .na-admin-hover .mapboxgl-canvas {
  cursor: pointer;
}

/* Anchored by a click: tabs and the close button become clickable. */
.na-readout-popup.na-anchored .mapboxgl-popup-content {
  pointer-events: auto;
}

/* Squared Cell / Aggregate tabs on the dark popup (Bootstrap nav-tabs tokens). */
.na-readout-popup .na-readout-tabs {
  --bs-nav-tabs-border-radius: 0;
  --bs-nav-tabs-border-color: rgba(255, 255, 255, 0.25);
  --bs-nav-tabs-link-hover-border-color: rgba(255, 255, 255, 0.35);
  --bs-nav-tabs-link-active-bg: #ffc107;
  --bs-nav-tabs-link-active-color: #212529;
  --bs-nav-tabs-link-active-border-color: #ffc107;
  --bs-nav-link-color: rgba(255, 255, 255, 0.75);
  --bs-nav-link-hover-color: #fff;
}

.na-readout-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.na-readout-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.na-readout-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  border-top-color: #383c40;
}

.na-readout-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.na-readout-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.na-readout-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  border-bottom-color: #383c40;
}

.na-readout-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: #383c40;
}

.na-readout-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: #383c40;
}

/* --- MCDA controls (Phase 4) --------------------------------------------- */

/* A lock that would be refused stays clickable so it can explain itself
   (tooltip flash); Bootstrap's .disabled would remove pointer events. */
#nature-africa-app .na-lock[aria-disabled="true"] {
  opacity: 0.5;
}

/* --- Suitability classes (MCDA legend, Phase 4) -------------------------- */

.na-class-1 { background-color: #d7191c; }
.na-class-2 { background-color: #fdae61; }
.na-class-3 { background-color: #ffffbf; }
.na-class-4 { background-color: #a6d96a; }
.na-class-5 { background-color: #1a9641; }