/* species.css — the per-species dashboard pages (Species menu). */

.ik-species-title { margin: 0 0 0.1rem; }
.ik-species-sub { color: var(--bs-secondary-color, #6c757d); font-size: 0.85rem; margin-bottom: 0.7rem; }
.ik-species-controls { display: flex; align-items: end; gap: 1.2rem; flex-wrap: wrap; margin: 0.6rem 0 0.4rem; }
.ik-species-hint { color: var(--bs-secondary-color, #6c757d); font-size: 0.85rem; margin: 0.4rem 0 0.6rem; }
.ik-species .leaflet-container { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.375rem; }
.ik-species-maptitle { margin: 0.2rem 0 0.4rem; font-weight: 600; }
/* Map tab: camera + trap maps side by side (own grid, so EITHER half can drop out — and the surviving one
   reflow to full width — when the active datasets lose that device; see body.ik-no-trap/-camera below). */
.ik-species-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
body.ik-no-trap .ik-species-maps,
body.ik-no-camera .ik-species-maps { grid-template-columns: 1fr; }
@media (max-width: 767.98px) { .ik-species-maps { grid-template-columns: 1fr; } }
/* Device-scoped TABS — when the active datasets lose a device (body.ik-no-trap / body.ik-no-camera; the
   same signal as the maps + the device's menu). Catches / Bait exist only on a trapped species and
   Behaviour / Occupancy / Co-occurrence only on a camera one, so each hides app-wide within a species page;
   a SINGLE-DEVICE species (.ik-sp-trap-only / .ik-sp-cam-only) also loses its Map tab (that tab is then only
   the one map). `:has()` mirrors the auth nav-gate CSS pattern. `>` keeps nested tabsets untouched. */
body.ik-no-trap .ik-species .nav-tabs > li:has(> a[data-value="Catches"]),
body.ik-no-trap .ik-species .nav-tabs > li:has(> a[data-value="Bait"]) { display: none; }
body.ik-no-trap .ik-sp-trap-only .nav-tabs > li:has(> a[data-value="Map"]) { display: none; }
body.ik-no-camera .ik-species .nav-tabs > li:has(> a[data-value="Behaviour"]),
body.ik-no-camera .ik-species .nav-tabs > li:has(> a[data-value="Occupancy"]),
body.ik-no-camera .ik-species .nav-tabs > li:has(> a[data-value="Co-occurrence"]) { display: none; }
body.ik-no-camera .ik-sp-cam-only .nav-tabs > li:has(> a[data-value="Map"]) { display: none; }
.ik-species-hotspots { margin-top: 1.3rem; border-top: 1px solid var(--bs-border-color, #dee2e6); padding-top: 0.9rem; }
.ik-species-section { margin-top: 1.3rem; border-top: 1px solid var(--bs-border-color, #dee2e6); padding-top: 0.9rem; }

/* Summary tab — presence stat-cards + the settings table */
.ik-sum-superlabel { display: flex; align-items: center; gap: 0.45rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.82rem;
  color: var(--bs-secondary-color, #6c757d); margin: 0.5rem 0 0.35rem; }
.ik-sum-superlabel svg { width: 1.05em; height: 1.05em; }
.ik-sum-rate { margin-top: 0.3rem; font-weight: 600; font-size: 0.9rem;
  color: var(--bs-body-color, #212529); font-variant-numeric: tabular-nums; }
.ik-sum-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.4rem 0 0.2rem; }
.ik-sum-card { display: flex; align-items: center; gap: 0.85rem; flex: 1 1 240px; min-width: 220px;
  border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.5rem; padding: 0.9rem 1.1rem;
  background: var(--bs-body-bg); }
.ik-sum-icon { font-size: 1.6rem; color: var(--bs-secondary-color, #6c757d); flex: 0 0 auto; }
.ik-sum-val { font-size: 2rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ik-sum-lab { font-weight: 600; }
.ik-sum-sub { color: var(--bs-secondary-color, #6c757d); font-size: 0.85rem; }
.ik-sum-config { border-collapse: collapse; margin: 0.2rem 0 0.4rem; max-width: 540px; }
.ik-sum-config td { padding: 0.28rem 0.9rem 0.28rem 0; border-bottom: 1px solid var(--bs-border-color, #eceff2);
  vertical-align: top; }
.ik-sum-config .ik-sum-k { font-weight: 600; white-space: nowrap; color: var(--bs-secondary-color, #495057); }

/* Behaviour tab — the diel-class summary + the daily clock, side by side, wrapping to a stack when narrow. */
.ik-behav { display: flex; flex-flow: row wrap; gap: 1rem; align-items: flex-start; }
.ik-behav > .ik-card { flex: 1 1 380px; min-width: 0; }
.ik-card { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.5rem;
           background: var(--bs-body-bg, #fff); overflow: hidden; }
.ik-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
                padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.ik-card-title { display: flex; align-items: baseline; gap: 0.45rem; font-weight: 600; }
/* A muted, fixed-scope note beside a card title (e.g. Diel "all reserves · all data"). */
.ik-card-scope { font-weight: 400; font-size: 0.72rem; letter-spacing: 0.01em;
                 color: var(--bs-secondary-color, #8a8a8a); }
.ik-card-body { padding: 0.9rem; }

/* time-of-day shading key — swatches sit on the card bg, matching the plot's night/twilight bands */
.ik-tod-key { display: flex; gap: 1.4rem; justify-content: center; margin-top: 0.2rem;
              font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); }
.ik-tod-key-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.ik-tod-key .sw { width: 1.2rem; height: 0.75rem; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.12); }
.ik-tod-key .sw-night { background: rgba(68, 80, 94, 0.16); }
.ik-tod-key .sw-twi   { background: rgba(68, 80, 94, 0.07); }
[data-bs-theme="dark"] .ik-tod-key .sw      { border-color: rgba(255, 255, 255, 0.18); }
[data-bs-theme="dark"] .ik-tod-key .sw-night { background: rgba(0, 0, 0, 0.32); }
[data-bs-theme="dark"] .ik-tod-key .sw-twi   { background: rgba(0, 0, 0, 0.15); }

/* Diel-class summary card: class headline · stacked proportion bar · 2-col legend. Kept compact — it's a
   glanceable classification, not a hero (the Activity Pattern beside it is the detailed chart). */
.ik-diel { border-left: 4px solid #2e8b57; border-radius: 0.4rem; text-align: center;
           padding: 0.85rem 1rem; background: var(--bs-tertiary-bg, #f6f8f7); }
.ik-diel.is-low { border-left-color: #c89b2c; }
.ik-diel-class { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.ik-diel-desc { color: var(--bs-secondary-color, #6c757d); margin-top: 0.05rem; font-size: 0.9rem; }
.ik-diel-n { color: var(--bs-secondary-color, #6c757d); font-size: 0.82rem; }
.ik-diel-lowconf { color: #b8860b; font-size: 0.8rem; margin-top: 0.25rem; }
.ik-diel-bar { display: flex; height: 18px; margin: 0.6rem 0; border-radius: 5px; overflow: hidden;
               background: var(--bs-border-color, #dee2e6); }
.ik-diel-bar span { display: block; height: 100%; }
.ik-diel-seg { cursor: pointer; transition: filter 0.12s; }
.ik-diel-seg:hover { filter: brightness(1.12); }
.ik-diel-clickable { cursor: pointer; }
.ik-diel-clickable:hover .ik-diel-leg-lab { text-decoration: underline; }
.ik-diel-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0.22rem 1.4rem;
                  max-width: 360px; margin: 0 auto; text-align: left; font-size: 0.88rem; }
.ik-diel-leg { display: flex; align-items: center; gap: 0.4rem; }
.ik-diel-leg .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.ik-diel-leg-lab { flex: 1; }
.ik-diel-leg b { font-variant-numeric: tabular-nums; }
.ik-diel-foot { color: var(--bs-secondary-color, #6c757d); font-size: 0.78rem; margin-top: 0.6rem; }

/* Compact diel TEASER card (Summary + Behaviour): class + desc + note; the whole card opens the breakdown
   modal (the clickable bar/legend + records live there). */
/* Diel class BANNER — a wide, short strip at the TOP of the Behaviour tab (above the full-width plot).
   Class prominent + muted description on one line, the observation-count note below, Breakdown → pushed
   right. The whole strip is the clickable button into the breakdown modal. */
.ik-diel-banner { display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--bs-border-color, #dee2e6); border-left: 4px solid #2e8b57; border-radius: 0.5rem;
  padding: 0.55rem 1rem; background: var(--bs-tertiary-bg, #f6f8f7);
  cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.ik-diel-banner:hover, .ik-diel-banner:focus-visible { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
  border-color: var(--ik-accent, #cf6819); }
.ik-diel-banner.is-low { border-left-color: #c89b2c; }
.ik-diel-banner-main { flex: 1 1 auto; min-width: 0; }
.ik-diel-banner-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.55rem; }
.ik-diel-banner-class { font-size: 1.2rem; font-weight: 800; line-height: 1.15; }
.ik-diel-banner-desc { font-size: 0.9rem; font-weight: 400; color: var(--bs-secondary-color, #6c757d); }
.ik-diel-banner-note { font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); margin-top: 0.1rem; }
.ik-diel-banner-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.82rem; font-weight: 600; white-space: nowrap; color: var(--ik-accent, #cf6819); }

/* Behaviour tab: the Diel class heading line above the banner; then the full-width Activity Pattern. */
.ik-behav-diel-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-bottom: 0.4rem; }
.ik-behav-diel-title { margin: 0; font-weight: 700; }
.ik-diel-banner { margin-bottom: 1.2rem; }   /* gap from the banner down to the plot */

/* Species Catches cockpit (lean + a per-reserve catch-TREND sparkline column). The lean 5-col grid lives in
   trapping.css; this adds the trailing Trend column when sparks are present (6 cols). */
.ik-ops-drill--lean.ik-ops-drill--spark .ik-ops-summ {
  grid-template-columns: 1.1rem minmax(6rem, 1fr) 2.8rem minmax(5rem, 7.5rem) 3.8rem 7.5rem; }
.ik-ops-spark { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.ik-ops-spark .ik-dz-spark { width: 100%; max-width: 7rem; height: 18px; display: block; }
/* line rows carry no spark — keep the empty cell from collapsing the row height */
.ik-ops-line > summary .ik-ops-spark { min-height: 1px; }

/* ── Summary cockpit: the occupancy VERDICT headline + the GLANCE strip (jump-to-question tiles) ──
   Both are role="button" divs (the app's clickable-card idiom) that nav-select a sibling tab. The verdict
   carries a role-phrased tone (good/warn/bad/muted) as a left rail + tinted ground; the glance tiles are a
   responsive grid of question, value, and its tab. Theme-aware via CSS custom-property tokens + color-mix. */
.ik-spv { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--bs-border-color, #e3e6ea); border-left: 5px solid var(--tone, var(--bs-secondary-color, #8a8a8a));
  border-radius: 0.6rem; padding: 0.85rem 1.1rem; margin: 0.2rem 0 0.9rem;
  background: var(--tone-soft, var(--bs-tertiary-bg, #f6f8fa)); transition: box-shadow .12s; }
.ik-spv:hover, .ik-spv:focus-visible { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09); }
.ik-spv-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; }
.ik-spv-word { font-size: 1.15rem; font-weight: 700; color: var(--tone-ink, var(--bs-body-color, #222)); line-height: 1.15; }
.ik-spv-detail { font-size: 0.9rem; color: var(--bs-secondary-color, #6c757d); }
.ik-spv-cta { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  font-size: 0.82rem; font-weight: 600; color: var(--ik-accent, #cf6819); }
.ik-spv--good { --tone: var(--ik-good, #2e7d32); --tone-ink: var(--ik-good, #2e7d32);
  --tone-soft: color-mix(in srgb, var(--ik-good, #2e7d32) 9%, var(--bs-body-bg, #fff)); }
.ik-spv--bad  { --tone: var(--ik-bad, #c62828);  --tone-ink: var(--ik-bad, #c62828);
  --tone-soft: color-mix(in srgb, var(--ik-bad, #c62828) 9%, var(--bs-body-bg, #fff)); }
.ik-spv--warn { --tone: #b3831f; --tone-ink: #8a6516;
  --tone-soft: color-mix(in srgb, #b3831f 12%, var(--bs-body-bg, #fff)); }
.ik-spv--muted{ --tone: var(--bs-secondary-color, #8a8a8a); --tone-ink: var(--bs-body-color, #333);
  --tone-soft: var(--bs-tertiary-bg, #f6f8fa); }

.ik-spg { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; margin: 0 0 1.2rem; }
.ik-spg-tile { display: flex; align-items: center; gap: 0.6rem; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--bs-border-color, #e3e6ea); border-radius: 0.5rem; padding: 0.6rem 0.75rem;
  background: var(--bs-body-bg, #fff); transition: border-color .12s, box-shadow .12s; }
.ik-spg-tile:hover, .ik-spg-tile:focus-visible { border-color: var(--ik-accent, #cf6819); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07); }
.ik-spg-icon { flex: 0 0 auto; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--bs-tertiary-bg, #f1f3f5); color: var(--ik-accent, #cf6819); }
.ik-spg-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ik-spg-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--bs-secondary-color, #8a8a8a); }
.ik-spg-val { font-size: 0.9rem; font-weight: 600; color: var(--bs-body-color, #222); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-spg-arrow { flex: 0 0 auto; color: var(--bs-secondary-color, #adb5bd); font-size: 0.8rem; }

/* ── Species Summary COCKPIT: the favourite photo carrying the key stats, overlaid (stats-on-photo) ── */
.ik-spc-cockpit { position: relative; margin: 0.2rem 0 1.5rem; border-radius: 0.6rem; overflow: hidden;
  background: #0b0b0b; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); min-height: 300px; }
.ik-spc-cockpit .ik-hero-carousel { margin: 0; border-radius: 0; box-shadow: none; max-width: 100%; }
.ik-spc-cockpit .ik-hero-carousel.ik-hero-species .ik-hero-stage { height: clamp(300px, 48vh, 480px); }
/* Stat overlay — a translucent panel down the LEFT, fading to clear so the photo reads on the right. */
/* Narrower overlay so the photo reads on the right; fades to clear sooner. pointer-events:none lets the
   image click (lightbox) through, EXCEPT on the interactive tiles / verdict. */
.ik-spc-overlay { position: absolute; inset: 0 auto 0 0; z-index: 4; pointer-events: none; display: flex;
  flex-direction: column; justify-content: center; gap: 0.5rem; padding: 1.4rem 1.7rem 1.4rem 1.5rem; color: #fff;
  width: min(440px, 50%); max-width: 50%;
  background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0) 100%); }
.ik-spc-cockpit .ik-hero-cap { display: none; }   /* the overlay carries the info; drop the carousel caption */
.ik-spc-overlay a, .ik-spc-overlay .ik-spv, .ik-spc-tile, .ik-spc-trend { pointer-events: auto; }
.ik-spc-name { font-size: 1.7rem; font-weight: 800; line-height: 1.1; text-shadow: 0 1px 5px rgba(0,0,0,0.6); }
.ik-spc-tiles { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.15rem; }
.ik-spc-tile, .ik-spc-trend { background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 0.4rem; backdrop-filter: blur(3px); cursor: pointer; transition: background 0.14s, border-color 0.14s; }
.ik-spc-tile { padding: 0.45rem 0.8rem; min-width: 88px; }
.ik-spc-tile:hover, .ik-spc-trend:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.42); }
.ik-spc-tval { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.ik-spc-tlab { font-size: 0.76rem; opacity: 0.88; margin-top: 0.16rem; }
.ik-spc-tsub { font-size: 0.65rem; opacity: 0.62; }
.ik-spc-trend { display: flex; flex-direction: column; gap: 0.28rem; margin-top: 0.1rem; padding: 0.42rem 0.72rem;
  color: #dff; font-size: 0.76rem; align-self: flex-start; }
.ik-spc-trend .ik-dz-spark { width: 130px; height: 20px; filter: drop-shadow(0 0 3px rgba(88,227,148,0.4)); }
.ik-spc-trend-head { display: flex; align-items: center; gap: 0.65rem; }
.ik-spc-legend { display: flex; gap: 0.55rem; font-size: 0.65rem; opacity: 0.88; }
.ik-spc-leg { display: inline-flex; align-items: center; gap: 0.32em; }
.ik-spc-leg::before { content: ""; width: 0.72em; height: 2px; border-radius: 1px; }
.ik-spc-leg--det::before { background: #57e08f; }   /* detections */
.ik-spc-leg--cau::before { background: #ff6b57; }   /* catches */
/* No-photo cockpit: a dark panel, the stats fill it (no fade-to-transparent). */
.ik-spc--nophoto { min-height: 210px; background: linear-gradient(135deg, #12211b 0%, #0a0f0d 100%); }
.ik-spc--nophoto .ik-spc-overlay { position: static; width: 100%; max-width: 100%; background: none; }
/* Role pill top-RIGHT on the species cockpit (the stats overlay owns the left). */
.ik-spc-cockpit .ik-hero-tag { left: auto; right: 0.7rem; }
/* Verdict headline made readable on the dark photo (its .ik-spv styling assumes a light card). */
.ik-spc-overlay .ik-spv { background: rgba(0,0,0,0.34); color: #fff; border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(3px); align-self: flex-start; }
.ik-spc-overlay .ik-spv * { color: #fff; }
.ik-spc-settings { margin: 0.4rem 0 0.5rem; }
.ik-spc-settings > summary { cursor: pointer; list-style: revert; }
/* On narrow screens the overlay spans full width over a shorter photo. */
@media (max-width: 640px) {
  .ik-spc-overlay { max-width: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.15) 100%); }
}