/* ── Navbar / header ────────────────────────────────── */
.navbar { border-bottom: 3px solid #4c9e3e; }
.navbar-brand {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.3px;
}

/* ── Page background ────────────────────────────────── */
body, .bslib-page-main { background-color: #f5f5f5 !important; }

/* ── Sidebar ────────────────────────────────────────── */
.bslib-sidebar-layout > .sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #e0e0e0 !important;
}
.sidebar-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #888 !important;
}
.form-label { font-size: 0.82rem; color: #555; font-weight: 500; }
.form-control, .form-select {
  font-size: 0.85rem;
  border-color: #d5d5d5;
  border-radius: 3px;
}
.form-control:focus, .form-select:focus {
  border-color: #4c9e3e;
  box-shadow: 0 0 0 0.18rem rgba(76,158,62,0.18);
}

/* ── Buttons ─────────────────────────────────────────── */
.btn-primary {
  background-color: #4c9e3e !important;
  border-color: #4c9e3e !important;
  font-weight: 500;
  font-size: 0.85rem;
  border-radius: 3px;
  letter-spacing: 0.2px;
}
.btn-primary:hover {
  background-color: #3c8030 !important;
  border-color: #3c8030 !important;
}
.btn-outline-secondary {
  font-size: 0.85rem;
  border-radius: 3px;
  color: #555;
  border-color: #ccc;
}
.btn-outline-secondary:hover { background-color: #f0f0f0; color: #333; }

/* ── Cards ───────────────────────────────────────────── */
.card {
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.09) !important;
}
.card-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #eeeeee !important;
  font-weight: 600;
  font-size: 0.85rem;
  color: #444;
  padding: 0.6rem 1rem;
}

/* ── Value boxes ─────────────────────────────────────── */
.bslib-value-box {
  border-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.09) !important;
}
.value-box-value {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
}
.value-box-title {
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.88;
}

/* ── Species checkbox panel ──────────────────────────── */
#filters-species_checkboxes {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  padding: 5px 8px;
  background: #fafafa;
  font-size: 0.82rem;
}
#filters-species_checkboxes .form-check { margin-bottom: 1px; }
#filters-species_checkboxes .form-check-label { font-size: 0.8rem; line-height: 1.4; }

/* ── Map status text ─────────────────────────────────── */
#map_status { font-size: 0.78rem; }

/* ── Map container ───────────────────────────────────── */
#map, #map .leaflet-container { overflow: hidden !important; }
#map-card, #map-card .card-body { overflow: hidden !important; }

/* ── Species photo tooltip ───────────────────────────── */
.sp-hover { cursor: default; text-decoration: underline dotted #888; border-radius: 2px; padding: 0 2px; }
.sp-hover:hover { background-color: rgba(76,158,62,0.15); text-decoration: underline dotted #4c9e3e; }

/* ── hr in sidebar ───────────────────────────────────── */
hr { border-color: #e8e8e8; }

/* ── Loading bar ─────────────────────────────────────── */
#loading-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 99999;
  display: none;
  background: linear-gradient(90deg, #4c9e3e 30%, #a8d5a2 50%, #4c9e3e 70%);
  background-size: 200% 100%;
  animation: loading-slide 1.2s infinite linear;
}
@keyframes loading-slide {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}