Fix: add responsive breakpoints for mobile (480px + 768px) — sidebar, stats grid, Cantaloupe Sync page, form rows

static/index.html

@@ -531,6 +531,58 @@
       .sidebar .sidebar-header { justify-content: center; }
       .sidebar .sidebar-header .sh-icon { font-size: 22px; }
       .main { margin-left: 56px; padding: 16px; max-width: calc(100vw - 56px); }
+
+      /* Stats grid: tighter cards */
+      .stats-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
+      .stat-card { padding: 10px; }
+      .stat-card .stat-value { font-size: 22px; }
+
+      /* Cantaloupe Sync batch rows stack */
+      .cs-batch-row .csb-status { width: 60px; }
+      .cs-batch-row .csb-time { width: auto; font-size: 11px; }
+      .cs-batch-row .csb-rows { width: auto; text-align: left; margin-left: auto; }
+
+      /* Changes table horizontal scroll */
+      .cs-changes-table-wrapper { overflow-x: auto; }
+      .cs-changes-table { min-width: 480px; }
+
+      /* Page actions */
+      .page-title { flex-wrap: wrap; gap: 6px; }
+      .page-title h2 { font-size: 16px; }
+
+      /* Form rows stack */
+      .form-row { flex-direction: column; }
+      .form-row .input-field { flex: none; width: 100%; }
+    }
+
+    @media (max-width: 480px) {
+      .main { padding: 10px; }
+      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
+      .stat-card { padding: 8px; }
+      .stat-card .stat-value { font-size: 18px; }
+      .stat-card .stat-label { font-size: 9px; }
+
+      /* Dashboard page title */
+      .page-title { flex-direction: column; align-items: flex-start; }
+      .page-title .pt-actions { width: 100%; }
+      .page-title .pt-actions button { flex: 1; }
+
+      /* Cantaloupe diff badges stack 2x2 */
+      .cs-diff-summary { grid-template-columns: repeat(2, 1fr); }
+      .cs-diff-badge { padding: 8px; }
+      .cs-diff-badge .csd-val { font-size: 18px; }
+
+      /* Batch rows compact */
+      .cs-batch-row { flex-wrap: wrap; gap: 4px; padding: 8px; }
+      .cs-batch-row .csb-time { font-size: 10px; width: 100%; order: 3; }
+
+      /* Card padding */
+      .card { padding: 10px; }
+      .card-title { font-size: 13px; }
+
+      /* Tables scroll */
+      .cs-actions { flex-direction: column; }
+      .cs-actions button { width: 100%; }
     }
 
     /* ═══════════════════════════════════════════════════════════════════════