/* overview.css — Overview page (R/modules/overview.R). */

.ik-overview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ik-ov-header h3 {
  margin: 0;
  font-weight: 700;
}
.ik-ov-datasets {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.85rem;
  margin: 0.05rem 0 0.2rem;
}
.ik-ov-sub {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.9rem;
}
.ik-ov-dot {
  margin: 0 0.4rem;
  opacity: 0.5;
}

/* Device section headers (Camera monitoring · Trapping) — bolder, with a subtle per-device accent
   bar + tint so the two sections read apart at a glance. */
.ik-device-head { font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; gap: 0.5rem; }
.ik-device-title { flex: 1 1 auto; }   /* push the help (?) button to the right of the section title */
.ik-device-camera { border-left: 4px solid #3f6fb0; background: rgba(63, 111, 176, 0.06); }
.ik-device-trap   { border-left: 4px solid #b06a3f; background: rgba(176, 106, 63, 0.06); }

/* "Other species" — incidental / bycatch species beneath the cards. A collapsed-by-default
   <details>, deliberately LESS prominent than the cards (small, light). Expand → drill-down items. */
.ik-spp-class { margin-bottom: 0.5rem; }
.ik-spp-summary {
  cursor: pointer;
  list-style: none;                       /* hide the native disclosure triangle … */
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--bs-secondary-color, #6c757d);
  padding: 0.15rem 0;
  user-select: none;
}
.ik-spp-summary::-webkit-details-marker { display: none; }   /* … incl. WebKit/Safari */
.ik-spp-summary::before {
  content: "\25B8";                        /* ▸ — our own caret, rotates when open */
  font-size: 0.8em;
  transition: transform 0.15s ease;
}
.ik-spp-class[open] > .ik-spp-summary::before { transform: rotate(90deg); }
.ik-spp-summary-icon { opacity: 0.75; }
.ik-spp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.ik-spp-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.78rem;                      /* smaller than the cards — secondary information */
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.35rem;
}
.ik-spp-label { font-weight: 500; }
.ik-spp-count { font-variant-numeric: tabular-nums; color: var(--bs-secondary-color, #6c757d); }
/* a species item is clickable → its records */
.ik-spp-click { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.ik-spp-click:hover {
  border-color: rgba(var(--bs-primary-rgb, 13,110,253), 0.6);
  background: rgba(var(--bs-primary-rgb, 13,110,253), 0.07);
}
.ik-spp-other {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* Species icons (R/functions/species_icons.R) — inherit text colour, scale with font-size. */
.ik-spp-icon { width: 1em; height: 1em; flex: none; vertical-align: -0.13em; }

/* Outcome-metric table (RAI / capture rate) */
.ik-metric { margin: 0.25rem 0 0.85rem; }
.ik-metric-cap {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0.3rem;
}
.ik-metric-table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.ik-metric-table th,
.ik-metric-table td {
  padding: 0.25rem 0.7rem;
  text-align: right;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.ik-metric-table th { font-weight: 600; }
.ik-metric-table .ik-metric-label { text-align: left; font-weight: 600; }
.ik-metric-prev {
  font-size: 0.78em;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}
/* "value ± se" and the "arrow + prior" comparison each stay on one line; a cell may wrap only
   BETWEEN the two groups, so cells break uniformly. */
.ik-metric-main, .ik-metric-cmp { white-space: nowrap; }
.ik-metric-cmp { display: inline-block; }
.ik-arrow { font-weight: 700; }
.ik-arrow-good    { color: #2e7d32; }   /* desirable change (green) */
.ik-arrow-bad     { color: #c62828; }   /* undesirable change (red) */
.ik-arrow-neutral { color: var(--bs-secondary-color, #6c757d); }

/* A small secondary line under a value box's headline figure (e.g. trapping: traps · health). */
.ik-box-sub { font-size: 0.72rem; opacity: 0.7; margin-top: 0.1rem; line-height: 1.25; }

/* Clickable value boxes (each drills to its underlying records). The wrapper fills the grid
   cell so the whole box is the target. */
.ov-box-click { cursor: pointer; height: 100%; border-radius: var(--bs-border-radius, 0.375rem); transition: box-shadow 0.12s; }
.ov-box-click > * { height: 100%; }
.ov-box-click:hover { box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb, 13,110,253), 0.45); }

/* Drill-down */
/* Main metric table: MULTIPLE actions per row (each reserve cell drills) → per-cell affordance.
   No underline — the pointer cursor + a clear hover tint are enough. */
.ik-metric-table td.ik-drill { cursor: pointer; }
.ik-metric-table td.ik-drill:hover { background: rgba(var(--bs-primary-rgb, 13,110,253), 0.12); }
.ik-drill-summary { color: var(--bs-secondary-color, #6c757d); }
.ik-drill-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.ik-drill-table th, .ik-drill-table td {
  padding: 0.3rem 0.7rem;
  text-align: right;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.ik-drill-table th:first-child, .ik-drill-table td:first-child { text-align: left; }
/* Breakdown follows the data-table standard: zebra + whole-row click (ONE action per row → the
   whole row is the target, pointer cursor) for rows with records. Same light-blue family as the
   Records DataTable so the two tabs read as one system — the tint is table chrome, NOT a status. */
.ik-drill-table tbody tr:nth-child(even) { background: rgba(var(--bs-primary-rgb, 13,110,253), 0.04); }
.ik-drill-table tr.ik-drill-row { cursor: pointer; }
.ik-drill-table tr.ik-drill-row:hover { background: rgba(var(--bs-primary-rgb, 13,110,253), 0.12); }

/* Per-species metric cards (Overview headline). Camera leads with RAI ± SE, trapping with the
   catch count; the other figure is secondary. More prominent than the compact species list,
   less than the four value boxes. Click → the per-reserve breakdown. */
/* Grid (not flex) so cards keep a uniform width and a lone card on the last row stays one column
   wide instead of stretching to 100%. auto-fill (not auto-fit) keeps empty tracks, so a short row
   is left-aligned at the normal card width rather than blowing the last card full-width. */
.ik-metric-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0.25rem 0 0.85rem; }
.ik-metric-card {
  border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.5rem;
  padding: 0.5rem 0.7rem; background: var(--bs-body-bg, #fff);
}
.ik-metric-card.ik-spp-click { cursor: pointer; }
.ik-metric-card.ik-spp-click:hover { background: rgba(var(--bs-primary-rgb, 13,110,253), 0.08); }
.ik-card-name  { font-size: 0.92rem; font-weight: 600; color: var(--bs-body-color, #212529); display: flex; align-items: center; gap: 0.36rem; }
.ik-card-icon  { width: 1.45em; height: 1.45em; flex: none; color: var(--bs-secondary-color, #6c757d); }
/* Icon tint by species sentiment (camera cards only) — a category cue, kept distinct from the
   green/red comparison arrows by the metric. Blue (neutral) is outside the arrow palette entirely. */
.ik-icon-bad     { color: #c0392b; }
.ik-icon-good    { color: #2f9e44; }
.ik-icon-neutral { color: #4a7fb5; }
.ik-card-big   { font-size: 1.3rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.ik-card-small { font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); font-variant-numeric: tabular-nums; }
.ik-card-unit  { font-size: 0.8rem; font-weight: 400; color: var(--bs-secondary-color, #6c757d); }
.ik-card-na    { color: var(--bs-secondary-color, #adb5bd); }

/* Secondary "of interest" tier: denser cards beneath the protocol targets, set off only by the
   gap between the two card blocks (no sub-heading — the smaller size carries the distinction). */
.ik-metric-cards.ik-compact { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.45rem; }
.ik-metric-cards.ik-compact .ik-metric-card { padding: 0.4rem 0.55rem; }
.ik-metric-cards.ik-compact .ik-card-big { font-size: 1.05rem; }
.ik-metric-cards.ik-compact .ik-card-name  { font-size: 0.84rem; }
.ik-metric-cards.ik-compact .ik-card-small { font-size: 0.74rem; }