Presence, AD/SCCM/DNS reasons, monitors, snapshots, new-device priority

Worker: pings every tracked device on a presence sweep (hourly in business
hours plus midnight) and records last online; inventory reports whether a
device was found in AD and SCCM; monitors from WmiMonitorID; snapshots of
the last reachable state replace "Cached"; newly tracked devices are swept
and published first; totals count source devices only; per-type timing in
Worker-State.

Front end: details dialog shows presence, reasons instead of N/A,
"Waiting for worker...", monitors and snapshot times, and refreshes in
place; Custom View gains Days Offline, Last Online, Found In and monitor
columns; manual pair changes show immediately; sync dialog shows timing by
type. Custom View gets a large scrollbar; "Exactly ticked" filter.

web/layout.css

@@ -41,11 +41,37 @@ table.xf-table thead tr.filter-row { display: none !important; }
     #scroll-custom { max-height: none !important; overflow-x: clip !important; overflow-y: visible !important; }
     #table-custom thead th { position: sticky !important; top: var(--sticky-top, 112px) !important; z-index: 20; }
     .custom-hscroll {
-        position: sticky; bottom: var(--dock-h, 40px); z-index: 15; height: 16px;
-        overflow-x: auto; overflow-y: hidden;
-        background: var(--bg-card); border-top: 1px solid var(--border-light); border-radius: 0 0 8px 8px;
+        position: sticky; bottom: var(--dock-h, 40px); z-index: 15;
+        display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px;
+        background: var(--bg-card); border-top: 2px solid #3498db; border-radius: 0 0 8px 8px;
+        box-shadow: 0 -3px 10px rgba(0,0,0,0.18); user-select: none; touch-action: none;
     }
-    .custom-hscroll > div { height: 1px; }
+    .custom-hscroll[hidden] { display: none; }
+    .chs-btn {
+        flex: 0 0 30px; height: 22px; border: 1px solid var(--border-color, #ccc); border-radius: 5px;
+        background: var(--bg-body, #f0f2f5); color: var(--text-main, #333); cursor: pointer;
+        font-size: 11px; line-height: 1; padding: 0;
+    }
+    .chs-btn:hover:not(:disabled) { background: #3498db; border-color: #3498db; color: #fff; }
+    .chs-btn:disabled { opacity: 0.35; cursor: default; }
+    .chs-track {
+        position: relative; flex: 1 1 auto; height: 14px; border-radius: 7px; cursor: pointer;
+        background: rgba(127,127,127,0.22); box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); outline: none;
+    }
+    .chs-track:focus-visible { box-shadow: 0 0 0 2px #3498db; }
+    .chs-thumb {
+        position: absolute; top: -3px; left: 0; height: 20px; min-width: 48px; border-radius: 10px;
+        background: #3498db; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,0.35);
+        display: flex; align-items: center; justify-content: center; transition: background 0.15s;
+    }
+    .chs-thumb span { width: 14px; height: 8px; border-left: 2px solid rgba(255,255,255,0.8); border-right: 2px solid rgba(255,255,255,0.8); }
+    .chs-thumb:hover, .custom-hscroll.dragging .chs-thumb { background: #1d7fc4; }
+    .custom-hscroll.dragging .chs-thumb { cursor: grabbing; }
+    .chs-info { flex: 0 0 auto; min-width: 34px; text-align: right; font-size: 0.75em; color: var(--text-muted, #666); font-variant-numeric: tabular-nums; }
+    [data-theme="dark"] .chs-track { background: rgba(255,255,255,0.16); }
+    [data-theme="dark"] .chs-thumb { background: #5dade2; }
+    [data-theme="dark"] .chs-thumb:hover, [data-theme="dark"] .custom-hscroll.dragging .chs-thumb { background: #85c1e9; }
+    [data-theme="dark"] .chs-thumb span { border-color: rgba(0,0,0,0.55); }
 
     /* Custom View header on one line like the other tables: drag grip, name, then the
        Excel-style button (sort + filter) and copy icon; remove (x) appears on hover */
@@ -397,3 +423,29 @@ body.col-dragging, body.col-dragging * { cursor: grabbing !important; user-selec
 .xf-seg-btn.on { background: #3498db; color: #fff; font-weight: 600; }
 /* Only the value list shrinks when the menu is height-limited; controls keep their size */
 .xf-menu > :not(.xf-list):not(.xf-add):not(.xf-fields) { flex-shrink: 0; }
+
+/* ---------- Device info: reasons, presence, snapshot markers ---------- */
+.di-waiting { color: var(--text-muted); font-style: italic; }
+.di-missing { color: #c0392b; font-weight: 600; }
+[data-theme="dark"] .di-missing { color: #f1948a; }
+.di-online { color: #27ae60; }
+.di-offline { color: #d68910; }
+.di-offline-long { color: #c0392b; }
+[data-theme="dark"] .di-offline-long { color: #f1948a; }
+.di-sub { color: var(--text-muted); font-size: 0.85em; }
+.di-inline-clock { width: 11px; height: 11px; vertical-align: -1px; }
+.snap-mark { display: inline-flex; vertical-align: -2px; margin-left: 3px; color: var(--text-muted); opacity: 0.8; cursor: help; }
+.snap-mark svg { width: 12px; height: 12px; }
+
+/* ---------- Data Synchronization: per-type timing ---------- */
+.sync-breakdown:empty { display: none; }
+.sync-breakdown { margin-top: 14px; font-size: 0.85em; }
+.sync-bd-title { font-weight: 700; margin-bottom: 6px; color: var(--text-main); }
+.sync-bd-title span { font-weight: 400; color: var(--text-muted); margin-left: 4px; }
+table.sync-bd { width: 100%; border-collapse: collapse; }
+table.sync-bd th, table.sync-bd td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
+table.sync-bd th:first-child, table.sync-bd td:first-child { text-align: left; white-space: normal; }
+table.sync-bd th { color: var(--text-muted); font-weight: 600; }
+table.sync-bd tbody tr { cursor: help; }
+.sync-bd-phases { margin-top: 6px; color: var(--text-muted); line-height: 1.4; }
+#syncModal .modal-content { max-width: 460px !important; }