/* ── Status dots ──────────────────────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6c757d;
  flex-shrink: 0;
  transition: background 0.4s;
}
.status-dot.connected    { background: #198754; }
.status-dot.disconnected { background: #dc3545; }

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

/* ── Leaflet map ─────────────────────────────────────────────────────────── */
#tracker-map, #detail-map {
  border-radius: 6px;
  border: 1px solid #495057;
}

/* ── Device table ────────────────────────────────────────────────────────── */
#device-table thead th {
  white-space: nowrap;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 5;
}

#device-table tbody tr {
  cursor: pointer;
  transition: background-color 0.35s ease;
}
#device-table tbody tr:hover { opacity: 0.88; }

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

/* Row colours */
tr.row-online  { background-color: rgba(25,  135,  84, 0.18) !important; }
tr.row-offline { background-color: rgba(220,  53,  69, 0.22) !important; }
tr.row-lowbatt { background-color: rgba(255, 193,   7, 0.22) !important; }

/* WS update flash */
.row-flash { background-color: rgba(255, 193, 7, 0.35) !important; }

/* Selected row — the unit whose detail was last opened. Persists after the modal
   closes so the user can see which unit is selected in the list. The inset tint
   layers over the status colour (online/offline/low-batt) so both stay visible,
   and a solid left accent bar marks the row. */
#device-table tbody tr.row-selected > td {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.16);
}
#device-table tbody tr.row-selected > td:first-child {
  box-shadow: inset 4px 0 0 0 #0d6efd, inset 0 0 0 9999px rgba(13, 110, 253, 0.16);
}
#device-table tbody tr.row-selected:hover { opacity: 1; }

/* ── Battery progress bar ────────────────────────────────────────────────── */
.batt-bar-wrap {
  width: 64px;
  display: inline-block;
  vertical-align: middle;
}
.batt-bar {
  height: 7px;
  border-radius: 3px;
  background: #dee2e6;
  overflow: hidden;
}
.batt-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s;
}

/* ── Signal bars ─────────────────────────────────────────────────────────── */
.signal-icon { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.signal-icon span {
  display: inline-block;
  width: 4px;
  border-radius: 2px;
  background: #6c757d;
}
.signal-icon span:nth-child(1) { height:  4px; }
.signal-icon span:nth-child(2) { height:  7px; }
.signal-icon span:nth-child(3) { height: 10px; }
.signal-icon span:nth-child(4) { height: 14px; }
.signal-icon.s0 span            { background: #dc3545; height: 4px !important; }
.signal-icon.s1 span:nth-child(-n+1) { background: #ffc107; }
.signal-icon.s2 span:nth-child(-n+2) { background: #ffc107; }
.signal-icon.s3 span:nth-child(-n+3) { background: #198754; }
.signal-icon.s4 span               { background: #198754; }

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

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

/* ── Admin cards ─────────────────────────────────────────────────────────── */
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }