/* ─────────────────────────────────────────────────────────────
   insights-panel.css — Insights · Trends panel
   Ported from the Claude Design handoff (2026-06-19-kpi-trends-panel).
   Global stylesheet (linked from Web/App.razor) because the species
   chip is shared by the KPI cards and the top-depots table, and the
   ApexCharts tooltip is injected outside any component's scoped DOM.

   Tokens only — every value references css/tokens.css. The segmented
   preset control, .btn--primary and .pill come from css/components.css.
   ───────────────────────────────────────────────────────────── */

/* ════════ PANEL CONTAINER (sits inside the detail-page tab) ════════ */
.trends-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  /* adapt to the content column, not the viewport — reflows correctly
     whether the sidebar is expanded, a rail, or absent on mobile. */
  container-type: inline-size;
  container-name: panel;
}

.trends-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-base);
  flex-wrap: wrap;
}
.trends-panel__title-row { display: flex; align-items: baseline; gap: var(--space-sm); }
.trends-panel__title {
  font-size: var(--text-20);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.trends-panel__caption { font-size: var(--text-13); color: var(--text-tertiary); font-weight: 500; }

/* Surface block shared by chart + table */
.panel-block {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-base);
  padding: var(--space-base) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.panel-block__title { font-size: var(--text-15); font-weight: 700; color: var(--text-primary); }

/* ════════ KPI GRID — 4-up → 2-up → 1-up ════════ */
.insight-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-base);
}
@container panel (max-width: 920px) { .insight-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@container panel (max-width: 520px) { .insight-kpi-grid { grid-template-columns: 1fr; } }
/* Fallback for browsers without container-query support inside this context */
@supports not (container-type: inline-size) {
  @media (max-width: 920px) { .insight-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .insight-kpi-grid { grid-template-columns: 1fr; } }
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-base) var(--space-base) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  min-height: 148px;
}

.kpi-card__label {
  font-size: var(--text-12);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Headline number — the visual anchor */
.kpi-card__value {
  font-size: var(--text-36);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.kpi-card__value-row { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.kpi-card__value-unit { font-size: var(--text-13); font-weight: 500; color: var(--text-tertiary); }

.kpi-card__spacer { flex: 1; }
.kpi-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.kpi-card__empty { font-size: var(--text-13); color: var(--text-tertiary); margin-top: auto; }

/* ── Delta badge ── (catches DOWN = good = green) */
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px 0 6px;
  border-radius: var(--radius-pill);
  font-size: var(--text-12);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: fit-content;
}
.kpi-delta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kpi-delta--good    { background: var(--status-green-soft); color: var(--status-green); }
.kpi-delta--bad     { background: var(--status-red-soft);   color: var(--status-red); }
.kpi-delta--neutral { background: var(--surface-2);         color: var(--text-secondary); }
.kpi-delta__since { font-weight: 500; color: var(--text-tertiary); font-size: var(--text-12); margin-left: 2px; }

/* ── Trend-direction rows (card 3) ── */
.kpi-dirs { display: flex; flex-direction: column; gap: 6px; }
.kpi-dir { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-13); }
.kpi-dir__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.kpi-dir__icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kpi-dir--up   .kpi-dir__icon { background: var(--status-red-soft);   color: var(--status-red); }     /* rising = worse */
.kpi-dir--flat .kpi-dir__icon { background: var(--surface-2);         color: var(--text-secondary); }
.kpi-dir--down .kpi-dir__icon { background: var(--status-green-soft); color: var(--status-green); }   /* falling = better */
.kpi-dir__species { color: var(--text-primary); font-weight: 600; }
.kpi-dir__word { color: var(--text-tertiary); }

/* ── Last-visit (card 4) ── */
.kpi-card__link {
  font-size: var(--text-20);
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.kpi-card__link:hover { color: var(--primary-hover); text-decoration: underline; }
.kpi-card__footnote {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-13);
  color: var(--text-secondary);
  flex-wrap: wrap;
}

/* ════════ SPECIES CHIP — shared by KPI cards + table ════════ */
.kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: var(--text-12);
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
}
.kpi-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-tertiary); }
.kpi-chip__name { overflow: hidden; text-overflow: ellipsis; }
.kpi-chip__count { color: var(--text-tertiary); font-variant-numeric: tabular-nums; font-weight: 700; }
.kpi-chip--s1 .kpi-chip__dot { background: var(--series-1); }
.kpi-chip--s2 .kpi-chip__dot { background: var(--series-2); }
.kpi-chip--s3 .kpi-chip__dot { background: var(--series-3); }
.kpi-chip--s4 .kpi-chip__dot { background: var(--series-4); }
.kpi-chip--s5 .kpi-chip__dot { background: var(--series-5); }

/* ════════ TREND CHART ════════ */
.trend-chart__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-base);
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg) 0;
}
.trend-chart__presets { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.trend-chart__presets::-webkit-scrollbar { display: none; }
@container panel (max-width: 560px) {
  .trend-chart__toolbar { flex-direction: column; align-items: stretch; }
  .yoy-toggle { justify-content: flex-end; }
}

/* Year-over-year toggle */
.yoy-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.yoy-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.yoy-toggle__track {
  width: 36px; height: 20px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.yoy-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.yoy-toggle input:checked + .yoy-toggle__track { background: var(--primary); border-color: var(--primary); }
.yoy-toggle input:checked + .yoy-toggle__track::after { transform: translateX(16px); background: var(--text-on-primary); }
.yoy-toggle input:focus-visible + .yoy-toggle__track { box-shadow: 0 0 0 3px var(--focus-ring); }

.trend-chart__plot {
  padding: var(--space-md) var(--space-base) var(--space-sm);
  background: var(--chart-plot-bg);
  min-height: 320px;
}

.trend-chart__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.trend-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-base);
  padding: var(--space-sm) var(--space-lg) 0;
}
.trend-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-12);
  font-weight: 600;
  color: var(--text-secondary);
}
.trend-chart__legend-swatch { width: 10px; height: 3px; border-radius: var(--radius-pill); }

/* ApexCharts tooltip — Apex injects it inside the canvas, so override globally */
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark {
  background: var(--chart-tooltip-bg);
  border: 1px solid var(--chart-tooltip-border);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}
.apexcharts-tooltip-title {
  background: var(--surface-2);
  border-bottom: 1px solid var(--chart-tooltip-border);
}

/* ════════ TOP-DEPOTS TABLE — quiet, scannable, no zebra ════════ */
.top-depots__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-13);
}
.top-depots__table th {
  text-align: left;
  font-size: var(--text-12);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-lg);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.top-depots__table th.is-num,
.top-depots__table td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.top-depots__table td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.top-depots__table tbody tr:last-child td { border-bottom: none; }
.top-depots__table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.top-depots__table tbody tr:hover td { background: var(--surface-hover); }

.depot-code { font-weight: 700; color: var(--text-primary); }
.depot-label { color: var(--text-tertiary); font-size: var(--text-12); }
.depot-cell { display: flex; flex-direction: column; gap: 1px; }
.top-depots__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.top-depots__activity { font-weight: 700; font-variant-numeric: tabular-nums; }

@container panel (max-width: 640px) {
  .top-depots__table thead { display: none; }
  .top-depots__table, .top-depots__table tbody, .top-depots__table tr, .top-depots__table td { display: block; width: 100%; }
  .top-depots__table tr { padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-subtle); }
  .top-depots__table td { border: none; padding: 4px var(--space-lg); }
  .top-depots__table td.is-num { text-align: left; }
  .top-depots__table td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    width: 96px;
    font-size: var(--text-12);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

.top-depots__empty,
.top-depots__loading {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-14);
}

/* ════════ SKELETON / LOADING ════════ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--surface-hover), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
.skeleton-line { height: 12px; border-radius: var(--radius-sm); }
.skeleton-line--label { width: 55%; height: 10px; }
.skeleton-line--value { width: 50%; height: 30px; margin-top: var(--space-sm); }
.skeleton-line--chip  { width: 70px; height: 24px; border-radius: var(--radius-pill); }
.skeleton-chips { display: flex; gap: var(--space-xs); margin-top: auto; }
.chart-skeleton {
  min-height: 320px;
  margin: var(--space-md) var(--space-base);
  border-radius: var(--radius-md);
}