/* ── Broker badges ──────────────────────────────────────────────────────── */
.broker-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.82rem;
  font-weight: 500;
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #adb5bd;
  flex-shrink: 0;
  transition: background 0.4s;
}
.status-dot.connected    { background: #198754; }
.status-dot.disconnected { background: #dc3545; }

/* ── Stats cards ────────────────────────────────────────────────────────── */
.card { border-radius: 8px; }

/* ── Device table ───────────────────────────────────────────────────────── */
#device-table thead th {
  white-space: nowrap;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#device-table tbody tr {
  cursor: pointer;
  transition: opacity 0.15s;
}
#device-table tbody tr:hover { opacity: 0.85; }

#device-table tbody td {
  font-size: 0.82rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* Row colours — override Bootstrap defaults for tighter control */
tr.row-active  { background-color: #d1e7dd !important; }
tr.row-warning { background-color: #fff3cd !important; }
tr.row-offline { background-color: #f8d7da !important; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
#modal-detail dt { font-size: 0.75rem; text-transform: uppercase;
                   color: #6c757d; margin-bottom: 1px; }
#modal-detail dd { font-size: 0.9rem; margin-bottom: 8px; }

/* ── History table ──────────────────────────────────────────────────────── */
#history-table td, #history-table th { font-size: 0.78rem; white-space: nowrap; }

/* ── Sticky table header ────────────────────────────────────────────────── */
#device-table thead { position: sticky; top: 0; z-index: 5; }

/* ── Navbar brand ───────────────────────────────────────────────────────── */
.navbar-brand { font-size: 1rem; }