/* ============================================================
   Hardware diagnostics page (Settings → Hardware).
   ============================================================ */

.hw-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.hw-empty-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent);
  color: var(--warning, #f59e0b);
}
.hw-empty-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.hw-empty-sub   { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.hw-empty-sub a { color: var(--accent); text-decoration: underline; }

/* Device board — one row per peripheral. */
.hw-board { padding: 4px 0; }
.hw-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-subtle);
}
.hw-row:first-child { border-top: none; }

.hw-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.hw-row-body { flex: 1; min-width: 0; }
.hw-row-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.hw-row-meta  { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

.hw-status {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.hw-status-ok {
  background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent);
  color: var(--success, #16a34a);
}
.hw-status-muted {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
}

/* Recent-prints stat row. */
.hw-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.hw-stat {
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  text-align: center;
}
.hw-stat-value { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.hw-stat-value.hw-stat-ok  { color: var(--success, #16a34a); }
.hw-stat-value.hw-stat-bad { color: var(--danger, #dc2626); }
.hw-stat-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .hw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-stat-value { font-size: 15px; }
}
