/* KPI cards — used by Sales Performance, Bedding Performance. */

/* Cap the row width on wide screens so tiles stay tile-shaped instead of
   stretching across an ultra-wide monitor. The big trend chart underneath
   already uses the full width; the tiles up top read better when boxed. */
.kpi-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 0 auto 14px;
  max-width: 1400px;
}

.kpi-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 12px 14px; box-shadow: var(--shadow); transition: box-shadow 0.15s;
  min-width: 0; display: flex; flex-direction: column; gap: 3px;
  text-align: left;
}

.kpi-card:hover { box-shadow: var(--shadow-md); }

.kpi-label { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; }

.kpi-value { font-size: clamp(20px, 1.65vw, 28px); font-weight: 700; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }

.kpi-trend { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }

.kpi-trend.up { color: #15803d; }

.kpi-trend.down { color: #b91c1c; }

.kpi-trend .arrow { font-size: 10px; }

/* Sparklines were removed from the Overview tiles per Wayne -- the daily
   trend chart underneath shows the same shape at a more legible scale.
   Selectors kept (with display:none) so any cached HTML still hides them. */
.kpi-sparkline-wrap { display: none; }
.kpi-sparkline { display: none; }