/* Mechanic Phase 1C — operator dashboard widget styles.
 *
 * Cards inherit `.stat-card` layout from portal.html (lines 367-379)
 * for visual consistency with the universal stat cards. The
 * `.mech-stats-row` wrapper provides a 4-up grid that collapses to
 * 2-up under 768px (mirrors the dashboard's stats-grid breakpoint).
 *
 * Empty-state variant is greyed-out per Phase 1C UX spec — never
 * red error. Helper text + optional CTA link.
 *
 * All colors via portal CSS vars — theme-aware out of the box.
 */

/* Aligned exactly to the universal `.stats-row` rule
 * (portal.html:364) so the two rows render bit-for-bit identical
 * grid widths. Pre-fix used `repeat(4, minmax(0, 1fr))` + `gap:12px`
 * + `margin-bottom:16px` which produced a visually different
 * width — the universal row above looked stretched by comparison.
 * Phase 1C post-deploy hotfix (2026-05-10): aligned everything. */
.mech-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .mech-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* Empty-state variant — greyed value + helper text. */
.mech-stat-card-empty .value {
  color: var(--fg-muted);
}

.mech-stat-card .helper {
  font-size: 12px;
  color: var(--fg-subtle);
  margin-top: 8px;
  line-height: 1.4;
}

.mech-stat-card .helper a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.mech-stat-card .helper a:hover {
  text-decoration: underline;
}