Geräte-Tab: Suche, Detail-Panel und Aktionen

Neuer Haupttab "Geräte" mit Geräteliste (filterbar nach OS/Compliance),
Detail-Panel mit vollständigen Gerätedaten und Aktions-Buttons:
Sync, Neustart, Sperren, Diagnose, BitLocker-Rotation, Retire.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

www/styles.css

@@ -5195,3 +5195,129 @@ body.read-only .app-row {
 
 .csv-row-done { background: rgba(74,222,128,.05); }
 .csv-row-warn { background: rgba(250,204,21,.06); opacity: 0.85; }
+
+/* ============================================================
+   Geräte-View
+   ============================================================ */
+.dev-view {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 52px);
+  overflow: hidden;
+}
+
+.dev-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--hairline-soft);
+  flex-shrink: 0;
+}
+.dev-toolbar .search-wrap { flex: 1; max-width: 380px; }
+.input-select {
+  padding: 5px 8px;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  background: var(--bg2);
+  color: var(--text);
+  font-size: 12.5px;
+  cursor: pointer;
+}
+
+.dev-layout {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Tabelle */
+.dev-list-wrap {
+  flex: 1;
+  overflow-y: auto;
+  border-right: 1px solid var(--hairline-soft);
+}
+.dev-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.dev-table thead th {
+  position: sticky;
+  top: 0;
+  background: var(--bg2);
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--muted);
+  border-bottom: 1px solid var(--hairline-soft);
+  white-space: nowrap;
+  user-select: none;
+}
+.dev-table thead th.sortable { cursor: pointer; }
+.dev-table thead th.sortable:hover { color: var(--text); }
+.dev-table tbody tr {
+  cursor: pointer;
+  border-bottom: 1px solid var(--hairline-soft);
+  transition: background 0.1s;
+}
+.dev-table tbody tr:hover { background: var(--bg2); }
+.dev-table tbody tr.dev-row-selected { background: var(--accent-faint, rgba(59,130,246,.12)); }
+.dev-table tbody td {
+  padding: 7px 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 220px;
+}
+
+.dev-empty, .dev-loading {
+  padding: 32px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 13px;
+}
+.dev-loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
+
+.dev-badge {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 10px;
+}
+.dev-badge-ok  { background: rgba(74,222,128,.15); color: #4ade80; }
+.dev-badge-err { background: rgba(248,113,113,.15); color: #f87171; }
+.dev-badge-unk { background: var(--hairline-soft);  color: var(--muted); }
+
+/* Detail-Panel */
+.dev-detail {
+  width: 320px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  background: var(--bg2);
+}
+.dev-detail-header {
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid var(--hairline-soft);
+}
+.dev-detail-name { font-weight: 700; font-size: 15px; }
+.dev-detail-sub  { font-size: 12px; color: var(--muted); margin-top: 2px; }
+
+.dev-detail-body { padding: 12px 16px; flex: 1; }
+.dev-info-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  font-size: 12.5px;
+}
+.dev-info-grid dt { color: var(--muted); white-space: nowrap; }
+.dev-info-grid dd { margin: 0; word-break: break-all; }
+
+.dev-actions { padding: 12px 16px; border-top: 1px solid var(--hairline-soft); }
+.dev-actions-title { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
+.dev-action-btns { display: flex; flex-wrap: wrap; gap: 6px; }
+.dev-action-btn { display: inline-flex; align-items: center; gap: 5px; }