/*
 * Command Center UI 2.0, apparatenlijst-slice: layout-specifieke regels (REQ 300-vervolg,
 * migratieslice 1). Alle kleur-/ruimte-/typografiewaarden komen uit tokens.css/skins/*.css, alle
 * herbruikbare componenten (tabel, badge, veld, skeleton, empty/error-state) uit
 * ui2-components.css; dit bestand bevat uitsluitend de indeling die specifiek is voor deze slice.
 *
 * feat/apparaten-klanten-3paneel: de lijst en het detailpaneel stonden hier eerder samen, gestapeld,
 * in één gedeelde grid-container met één kolom, binnen het smalle contextpaneel (bevinding Lars,
 * 2026-08-02, zie git-historie van dit bestand voor die eerdere toelichting). Sinds deze migratie
 * levert de shell zelf een apart lijstpaneel naast de chat
 * (UI2Shell.enterThreePaneMode(), ui2-workspace.css); ui2-devices.js zet de lijst en het detail nu
 * in die twee aparte panelen (devicesListPaneHtml()/devicesDetailPaneHtml()), geen gezamenlijke
 * grid-wrapper meer nodig. .ui2-devices-detail-pane blijft bestaan als stijl voor de rechterhelft
 * (nu de inhoud van het bestaande contextpaneel).
 */

.ui2-devices-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.ui2-devices-search-field { flex: 1 1 16rem; min-width: 12rem; }
.ui2-devices-status-field { flex: 0 0 auto; min-width: 9rem; }

.ui2-devices-detail-pane {
  min-width: 0;
  padding: var(--spacing-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.ui2-devices-row { cursor: pointer; }
.ui2-devices-row:hover { background: var(--color-bg-tertiary); }
.ui2-devices-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.ui2-devices-row-active {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}