body {
  background: #f4f6f8;
}

.card-user {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.card-user-header {
  background: #f8f9fa;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
}

.device-row {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.device-row:last-child {
  border-bottom: none;
}

.device-row.draggable-device {
  cursor: grab;
}

.device-row.draggable-device:active {
  cursor: grabbing;
}

.device-row.dragging {
  opacity: 0.5;
}

.device-label {
  font-size: 0.9rem;
}

.registered-at {
  font-size: 0.75rem;
  color: #6c757d;
}

.card-alert {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  background: #fff;
}

.alert-device-pool,
.alert-drop-zone {
  min-height: 180px;
  border: 1px dashed #ced4da;
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: #fafbfc;
}

.alert-drop-zone.drag-over {
  border-color: #0d6efd;
  background: #eef5ff;
}

.alert-device-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background: #fff;
  cursor: grab;
}

.alert-device-item:last-child {
  margin-bottom: 0;
}

.alert-device-item:active {
  cursor: grabbing;
}

.alert-device-item.dragging {
  opacity: 0.5;
}

.alert-device-item.in-alert {
  border-color: #0d6efd;
  background: #f8fbff;
}

.alert-device-item .remove-device-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.alert-device-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.alert-device-list li {
  font-size: 0.85rem;
  color: #495057;
}

.alert-device-list li + li {
  margin-top: 0.25rem;
}