.group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stat {
  background: var(--color-surface, #1e293b);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 110px;
  transition:
    border-color 120ms ease,
    background 120ms ease;
  font: inherit;
  text-align: left;
}
.stat:hover {
  border-color: var(--color-primary-accent, #38bdf8);
}
.stat.open {
  border-color: var(--color-primary-accent, #38bdf8);
  background: rgba(56, 189, 248, 0.15);
}

/* Static (non-interactive) tile — same frame, no hover/click affordance. */
.staticStat {
  cursor: default;
}
.staticStat:hover {
  border-color: transparent;
}

.value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary, #f8fafc);
  line-height: 1;
}
.value.success {
  color: var(--color-success, #34d399);
}
.value.error {
  color: var(--color-error, #f87171);
}
.value.warning {
  color: var(--color-warning, #ff6b35);
}

.label {
  font-size: 11px;
  color: var(--color-text-secondary, rgba(203, 213, 225, 0.9));
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}

.caret {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.5;
}

.drawer {
  width: 100%;
  background: var(--color-bg, #0f172a);
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
  border-left: 3px solid var(--color-primary-accent, #38bdf8);
  border-radius: 6px;
  padding: 14px;
}