/* ============================================================
   System Health page (admin → System Configuration → System Health).
   Read-only diagnostics board: an overall verdict card + one card per
   group, each a list of status rows (dot · label/hint · value · badge).
   Pairs with resources/views/admin/settings/system-health.blade.php.
   ============================================================ */

/* ── Overall verdict ─────────────────────────────────────── */
.sysh-overall-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
}
.sysh-overall-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.sysh-overall-sub   { font-size: 13px; color: var(--text-tertiary); margin-top: 1px; }

/* ── Expand / collapse-all segmented toggle ──────────────── */
.sysh-seg {
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.sysh-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.sysh-seg-btn:hover { color: var(--text-primary); }
.sysh-seg-btn.is-active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ── Collapsible group header ────────────────────────────── */
.sysh-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: start;
  color: var(--text-primary);
}
.sysh-group-header:hover { background: var(--bg-elevated); }

.sysh-group-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform 0.15s ease;
}
.sysh-group-chevron.is-open { transform: rotate(180deg); }

.sysh-group-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 1.6;
}

/* ── Check rows ──────────────────────────────────────────── */
.sysh-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }

.sysh-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
}
.sysh-row:first-child { border-top: 0; }

.sysh-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.sysh-row-main { min-width: 0; flex: 1; }
.sysh-row-label { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.sysh-row-hint  { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

.sysh-row-value {
  font-size: 12.5px;
  color: var(--text-secondary);
  text-align: end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}

/* ── Status colours (shared by the overall + row dots) ───── */
.sysh-overall-dot.is-ok,   .sysh-dot.is-ok   { background: var(--positive); }
.sysh-overall-dot.is-warn, .sysh-dot.is-warn { background: var(--warning); }
.sysh-overall-dot.is-fail, .sysh-dot.is-fail { background: var(--danger); }

@media (max-width: 640px) {
  .sysh-row { flex-wrap: wrap; }
  .sysh-row-value { max-width: 100%; text-align: start; }
}
