body { background: #f0f2f5; }

/* Đồng hồ */
.clock-text { font-size: 0.78rem; }

/* Danh sách thiết bị */
.device-item { cursor: pointer; }
.device-item.active { background: #0d6efd; color: #fff; }
.device-item.active .text-muted { color: #cce0ff !important; }
.online-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; flex-shrink:0; }
.dot-on  { background: #28a745; }
.dot-off { background: #dc3545; }

/* Machine cards */
.machine-card { border-left: 4px solid #0d6efd; }
.machine-card.relay-on { border-left-color: #28a745; background: #f0fff4; }

/* Canvas */
canvas { max-height: 220px; }

/* Bảng cuộn ngang trên mobile */
.table-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 767px) {
  .navbar-brand { font-size: 0.9rem; }
  .clock-text   { font-size: 0.7rem; }
  canvas        { max-height: 180px; }

  /* Card padding nhỏ hơn */
  .card-body { padding: 0.6rem; }
  .card-header { padding: 0.5rem 0.75rem; }

  /* Nút trong card header nhỏ lại */
  .btn-group-sm .btn { font-size: 0.72rem; padding: 0.2rem 0.45rem; }

  /* Badge dòng điện nhỏ hơn chút */
  #ct-charts .badge { font-size: 0.82rem !important; }
}