feat: add comprehensive empty states & onboarding

- Enhanced empty-state design pattern (icon + heading + description + CTA)
- Customers: 'No Customers Yet' with Add Customer CTA
- Locations: 'No Locations Yet' with Add Location CTA
- Dashboard: Full empty state when no assets exist, preserves activity card
- Activity Feed: Enhanced empty state with Add Asset CTA
- Reports: Guidance cards explaining what each section shows when empty
- Onboarding: Welcome overlay for first-time users (localStorage flag)
- CSS: empty-state-card, guidance-card, esc-* classes, onboard-overlay

static/index.html

@@ -670,6 +670,97 @@
       letter-spacing: 0.05em; color: var(--text2); margin-bottom: 10px;
       display: flex; align-items: center; justify-content: space-between;
     }
+    /* ═══════════════════════════════════════════════════════════════════════
+       COLLAPSIBLE FORM SECTIONS (T2 Form UX Overhaul)
+       ═══════════════════════════════════════════════════════════════════════ */
+    .form-collapse-section {
+      background: var(--card); border: 1px solid var(--border);
+      border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden;
+      transition: border-color 0.2s;
+    }
+    .form-collapse-section.completed { border-color: var(--green); }
+    .form-collapse-section.has-error { border-color: var(--red); }
+    .form-collapse-header {
+      display: flex; align-items: center; gap: 8px;
+      padding: 12px 14px; cursor: pointer; user-select: none;
+      background: var(--card2); transition: background 0.15s;
+      -webkit-tap-highlight-color: transparent;
+    }
+    .form-collapse-header:active { background: var(--border); }
+    .form-collapse-section.open .form-collapse-header {
+      border-bottom: 1px solid var(--border);
+    }
+    .form-collapse-header .fch-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
+    .form-collapse-header .fch-title { flex: 1; font-size: 14px; font-weight: 600; }
+    .form-collapse-header .fch-chevron {
+      font-size: 12px; color: var(--text2); transition: transform 0.2s; flex-shrink: 0;
+    }
+    .form-collapse-section.open .fch-chevron { transform: rotate(180deg); }
+    .form-collapse-header .fch-status {
+      font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
+    }
+    .fch-status.complete { background: var(--green-bg); color: var(--green); }
+    .fch-status.incomplete { background: var(--amber-bg); color: var(--amber); }
+    .form-collapse-body { display: none; padding: 12px 14px; }
+    .form-collapse-section.open .form-collapse-body { display: block; }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       FIELD VALIDATION & REQUIRED INDICATORS
+       ═══════════════════════════════════════════════════════════════════════ */
+    .input-field.error {
+      border-color: var(--red) !important;
+      box-shadow: 0 0 0 1px var(--red);
+    }
+    .field-error-msg {
+      font-size: 11px; color: var(--red); margin-top: -4px; margin-bottom: 8px;
+      display: none; align-items: center; gap: 4px;
+    }
+    .field-error-msg.visible { display: flex; }
+    .required-star { color: var(--red); font-weight: 700; }
+    label.field-label {
+      display: block; font-size: 12px; font-weight: 600;
+      color: var(--text2); margin-bottom: 4px; margin-top: 2px;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       BUTTON LOADING / SPINNER STATE
+       ═══════════════════════════════════════════════════════════════════════ */
+    .btn.loading { pointer-events: none; opacity: 0.7; }
+    .btn .btn-spinner {
+      display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3);
+      border-top-color: #fff; border-radius: 50%;
+      animation: spin 0.6s linear infinite; margin-right: 4px;
+    }
+    .btn.loading .btn-spinner { display: inline-block; }
+    .btn-outline .btn-spinner { border-color: rgba(255,255,255,0.15); border-top-color: var(--text); }
+    .btn-feedback {
+      display: none; align-items: center; gap: 4px;
+      font-size: 12px; color: var(--green); margin-left: 8px;
+    }
+    .btn-feedback.visible { display: inline-flex; }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       AUTO-SAVE INDICATOR
+       ═══════════════════════════════════════════════════════════════════════ */
+    .autosave-indicator {
+      font-size: 10px; color: var(--text3);
+      display: flex; align-items: center; gap: 4px;
+      padding: 2px 0; margin-bottom: 8px; min-height: 16px;
+    }
+    .autosave-indicator.saving { color: var(--amber); }
+    .autosave-indicator.saved  { color: var(--green); }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       PHOTO PREVIEW ENHANCED
+       ═══════════════════════════════════════════════════════════════════════ */
+    .photo-preview-wrap {
+      position: relative; border-radius: var(--radius-sm); overflow: hidden;
+      margin-bottom: 8px;
+    }
+    .photo-preview-wrap img { width: 100%; display: block; border-radius: var(--radius-sm); }
+    .photo-actions-row { display: flex; gap: 8px; margin-top: 6px; }
+    .photo-actions-row .btn { flex: 1; }
+
 
     /* ═══════════════════════════════════════════════════════════════════════
        KEY ENTRY ROW