

.system-health-body { padding: 12px 18px 24px; max-width: 1180px; margin: 0 auto; }
.system-health-loading { color: #667; padding: 18px 4px; }
.sh-overall { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; margin-bottom: 14px; border: 1px solid #d8dee6; background: #f7f9fb; }
.sh-overall .sh-dot { width: 16px; height: 16px; }
.sh-overall-status { font-size: 1.05rem; font-weight: 700; }
.sh-overall-sub { font-size: 0.8rem; color: #667; }
.sh-overall-ok { border-color: #bfe3c6; background: #f2faf3; }
.sh-overall-warn { border-color: #f0dfae; background: #fdf9ec; }
.sh-overall-bad { border-color: #f0b9b9; background: #fdf1f1; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.sh-card { border: 1px solid #d8dee6; border-radius: 10px; background: #fff; padding: 12px 14px; }
.sh-card h3 { margin: 0 0 8px; font-size: 0.92rem; border-bottom: 1px solid #eef1f5; padding-bottom: 6px; }
.sh-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 0.84rem; }
.sh-label { color: #556; flex: 0 0 46%; }
.sh-value { font-weight: 600; word-break: break-word; }
.sh-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; align-self: center; background: #b8c0cb; }
.sh-ok { background: #2e9e44; }
.sh-warn { background: #e0a800; }
.sh-bad { background: #d64545; }
.sh-unknown { background: #b8c0cb; }

/* Backup & Recovery Integrity (ahtbackup status.json) */
.sh-integrity { margin-bottom: 12px; }
.sh-integrity h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-integrity-good { border-color: #bfe3c6; }
.sh-integrity-attention, .sh-integrity-stale { border-color: #f0dfae; }
.sh-integrity-failed { border-color: #f0b9b9; }
.sh-state { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 999px; border: 1px solid #d8dee6; background: #f3f5f8; color: #4a5361; white-space: nowrap; vertical-align: middle; }
.sh-state-good { background: #e8f6eb; border-color: #bfe3c6; color: #1f6e31; }
.sh-state-attention, .sh-state-stale { background: #fdf5dd; border-color: #f0dfae; color: #7a5a00; }
.sh-state-failed { background: #fbe6e6; border-color: #f0b9b9; color: #9b2c2c; }
.sh-state-untested { background: #f3f5f8; border-color: #d8dee6; color: #4a5361; }
.sh-integrity-notes { margin-top: 8px; font-size: 0.8rem; color: #556; }
.sh-integrity-notes p { margin: 2px 0; }
.sh-integrity-footer { margin-top: 6px; font-size: 0.74rem; color: #778; }


#system-health.sh-active-fallback { display: block; }
body:has(#system-health.sh-active-fallback) .dashboard { display: none; }

#system-health-host { display: contents; }
