/* ═══════════════════════════════════════════════════════════════
   Angemeldete Geräte (js/devices.js) – Reiter im Admin-Panel
════════════════════════════════════════════════════════════════ */
.dev-head { display: flex; gap: 14px; align-items: stretch; margin-bottom: 16px; flex-wrap: wrap; }
.dev-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dev-switch { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-base); border: 1px solid var(--border); }
.dev-switch button {
  padding: 7px 12px; border-radius: 8px; border: 0; cursor: pointer; background: none;
  font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--text-2);
}
.dev-switch button.active { background: var(--accent-dim); color: var(--accent); }
.dev-list { display: flex; flex-direction: column; gap: 14px; }
.dev-group .card-head .card-title { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dev-group .card-head .btn-ghost { padding: 6px 11px; font-size: 12px; }
.dev-muted { font-weight: 500; color: var(--text-3); font-size: 12px; }
.dev-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dev-row:last-child { border-bottom: 0; }
.dev-row.current { background: linear-gradient(90deg, rgba(0,230,118,.06), transparent 60%); }
.dev-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--accent2); background: var(--accent2-dim);
}
.dev-row.current .dev-ico { color: var(--success); background: rgba(0,230,118,.10); }
.dev-main { flex: 1; min-width: 0; }
.dev-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dev-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  color: var(--success); background: rgba(0,230,118,.10); border: 1px solid rgba(0,230,118,.25);
}
.dev-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 11.5px; color: var(--text-2); }
.dev-meta i { color: var(--text-3); margin-right: 3px; }
.dev-meta .mono { font-family: var(--font-mono); }
.dev-kill { padding: 7px 12px; font-size: 12px; flex-shrink: 0; }
.dev-empty { padding: 30px; text-align: center; color: var(--text-3); font-size: 13px; }
@media (max-width: 700px) {
  .dev-row { flex-wrap: wrap; padding: 13px 14px; }
  .dev-kill { width: 100%; }
  .dev-actions, .dev-actions .btn-danger { width: 100%; }
}