/**
 * KPI Tile — Operator-Grade Metric Display
 * EPIC 8.3: Large value, sparkline, freshness, trend arrow
 * AI Worker: Component Builder
 * Health: kpi_tile_render_ms
 * DoD: States (live/cached/stale/error/empty), no placeholders
 */

.kpi-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  transition: var(--transition-base);
}

.kpi-tile:hover {
  border-color: var(--border-hover);
  background: var(--surface-2);
}

.kpi-tile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-tile__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.kpi-tile__freshness {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
}

.kpi-tile__freshness[data-freshness="live"] {
  background: rgba(0, 255, 136, 0.1);
  color: var(--live);
}

.kpi-tile__freshness[data-freshness="cached"] {
  background: rgba(59, 130, 246, 0.1);
  color: var(--cached);
}

.kpi-tile__freshness[data-freshness="stale"] {
  background: rgba(255, 184, 0, 0.1);
  color: var(--stale);
}

.kpi-tile__freshness[data-freshness="error"] {
  background: rgba(255, 71, 87, 0.1);
  color: var(--error);
}

.kpi-tile__value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--text-0);
  font-family: var(--font-mono);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.kpi-tile__trend {
  font-size: var(--fs-lg);
  margin-left: var(--s-2);
}

.kpi-tile__trend[data-trend="up"] {
  color: var(--good);
}

.kpi-tile__trend[data-trend="down"] {
  color: var(--bad);
}

.kpi-tile__trend[data-trend="stable"] {
  color: var(--text-muted);
}

.kpi-tile__unit {
  font-size: var(--fs-md);
  color: var(--text-muted);
  font-weight: var(--fw-normal);
}

.kpi-tile__sparkline {
  height: 40px;
  margin-top: var(--s-2);
  opacity: 0.7;
}

/* States */
.kpi-tile[data-state="empty"] {
  opacity: 0.5;
  border-style: dashed;
}

.kpi-tile[data-state="empty"] .kpi-tile__value::after {
  content: "No data";
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: var(--fw-normal);
}

.kpi-tile[data-state="error"] {
  border-color: var(--error);
  background: rgba(255, 71, 87, 0.05);
}

/* Loading state (max 500ms before fallback) */
.kpi-tile[data-state="loading"] .kpi-tile__value {
  animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}