/* Minimal UI helpers for Monitoring & Status pages */

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .table-scroll table { min-width: 720px; }
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.badge-pill svg { width: 16px; height: 16px; }

.badge-ok { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.35); color: #0f766e; }
.badge-warn { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.35); color: #b45309; }
.badge-down { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.35); color: #b91c1c; }
.badge-neutral { background: rgba(148,163,184,.18); border-color: rgba(148,163,184,.35); color: #475569; }

.mini-pill { padding: 0.25rem 0.55rem; font-size: 0.70rem; }

.chart-wrap { position: relative; height: 280px; }
@media (max-width: 768px) { .chart-wrap { height: 220px; } }

.progress-row {
  height: 4px;
  border-radius: 9999px;
  background: rgba(148,163,184,.35);
  overflow: hidden;
}
.progress-row > span {
  display: block;
  height: 100%;
  width: 0;
  background: rgba(59,130,246,.85);
}