<!--
================================================================================
  AMP CRM — AGENT INDEX & ARCHITECTURE MAP
  The CRM Built by Electricians, for Electricians
  Single-file app | Vanilla HTML/CSS/JS | No build tools | No frameworks
================================================================================

  QUICK REFERENCE — WHAT TO EDIT AND WHERE
  ─────────────────────────────────────────
  Theme colors (CSS vars)    → Lines 14–86       [data-theme="light/dark"]
  Layout / sidebar CSS       → Lines 105–265
  Card / table / form CSS    → Lines 383–700
  Mobile responsive CSS      → Lines 966–984, 2001–2018
  Hub tab CSS                → Lines 986–1016
  Onboarding overlay CSS     → Lines 2043–2240

  ─────────────────────────────────────────
  HTML VIEWS (all inside .content div)
  ─────────────────────────────────────────
  Dashboard view             → #view-dashboard      (line ~2700)
  Work Hub (Jobs/Schedule)   → #view-work           (line ~2800)
    ↳ Jobs panel             → #work-panel-jobs
    ↳ Schedule panel         → #work-panel-schedule
    ↳ Recurring panel        → #work-panel-recurring
  Clients view               → #view-clients        (line ~3040)
  Money Hub (Billing)        → #view-money          (line ~3100)
    ↳ Invoices panel         → #money-panel-invoices
    ↳ Payments panel         → #money-panel-payments
    ↳ Estimates panel        → #money-panel-quote
  Reports Hub                → #view-reports        (line ~3200)
    ↳ Analytics panel        → #reports-panel-analytics
    ↳ Profitability panel    → #reports-panel-profitability
  Team Hub                   → #view-team           (line ~3346)
    ↳ Performance panel      → #team-panel-performance
    ↳ Tech Schedule panel    → #team-panel-techsched
  Quick Quote view           → #view-quote          (line ~3364)
  Tasks view                 → #view-tasks          (line ~3484)
  Field Hub                  → #view-field          (line ~3560)
    ↳ Permits panel          → #field-panel-permits
    ↳ Price Book panel       → #field-panel-pricebook
    ↳ Tasks panel            → #field-panel-tasks
    ↳ Materials panel        → #field-panel-materials
  Payments view              → #view-payments       (line ~3496)
  Settings view              → #view-settings       (line ~3700)

  ─────────────────────────────────────────
  OVERLAYS & MODALS
  ─────────────────────────────────────────
  Onboarding wizard          → #onboarding-overlay  (line ~3800)
  Quick action sheet (mobile)→ #quick-action-sheet  (line ~4145)
  Mobile bottom nav          → nav.mobile-nav       (line ~4182)
  Notifications panel        → #notif-panel         (line ~4191)
  Client profile modal       → #client-modal        (line ~4203)  (900px wide)
  General modal              → #modal-overlay       (line ~4421)  (560px wide)
  Flash toast                → #flash-msg           (line ~4429)

  ─────────────────────────────────────────
  JAVASCRIPT — DATA ARRAYS (seed data)
  ─────────────────────────────────────────
  Hard reset IIFE            → Line ~4431  (closes modals synchronously on load)
  jobs[]                     → Line ~4452  (8 seed jobs)
  clients[]                  → Line ~4462  (6 seed clients)
  permits[]                  → Line ~4470  (5 seed permits)
  pb[] (price book)          → Line ~4477  (150+ electrical service items)
    Categories: panel | outlets | wiring | lighting | ev | hvac
                safety | outdoor | smart | commercial | service | inspection
  invoices[]                 → Line ~4730  (seed invoices)
  tasks[]                    → Line ~4750  (seed tasks)
  recurring[]                → Line ~4760  (seed recurring jobs)
  notifications[]            → Line ~4780
  materials[]                → Line ~4800  (inventory catalog with stock levels)
  savedQuotes[]              → Line ~4850
  sentLog[]                  → Line ~4860
  clientProfiles{}           → Line ~5616  (extended per-client data: AR, panel record, timeline)
  clientHealth{}             → Line ~5900
  clientSparkData{}          → Line ~5920

  ─────────────────────────────────────────
  JAVASCRIPT — RENDER FUNCTIONS
  ─────────────────────────────────────────
  renderDashboard()          → Line ~5000  (KPIs, action required, recent activity)
  renderTechs()              → Line ~5431  (tech performance grid)
  renderTasks()              → Line ~5546
  renderJobs()               → Line ~6700  (job list with filters)
  renderSchedule()           → Line ~6750  (weekly calendar view)
  renderClients()            → Line ~6760  (client card grid)
  renderInvoices()           → Line ~6800  (invoice table with expand)
  renderQuotes()             → Line ~6830  (quote pipeline board)
  renderRecurring()          → Line ~6860
  renderPb(cat)              → Line ~6900  (price book by category)
  renderPermits()            → Line ~6950
  renderAnalytics()          → Line ~7000
  renderProfitability()      → Line ~7050

  ─────────────────────────────────────────
  JAVASCRIPT — SAVE / MUTATE FUNCTIONS
  ─────────────────────────────────────────
  saveNewJob(isDraft)        → Line ~8250
  saveNewClient()            → Line ~8368
  saveNewPermit()            → Line ~8408
  saveNewInvoice(isDraft)    → Line ~8445
  saveNewTask()              → Line ~8496
  saveNewRecurring()         → Line ~8532
  saveJobEdit(jid)           → Line ~8557
  deleteJob(jid)             → Line ~8592
  applyInvEdit(idx)          → Line ~8654

  ─────────────────────────────────────────
  JAVASCRIPT — MODAL SYSTEM
  ─────────────────────────────────────────
  mDefs{}                    → Line ~6504  (modal definitions: new-job, new-client, etc.)
  openModal(type)            → Line ~6504  (uses mDefs)
  closeModal()               → wired to buttons
  openCM(clientName)         → Line ~6000  (client profile modal)
  openJobEdit(jid)           → Line ~6406
  openPermitEdit(num)        → Line ~10384
  openInvoiceEdit(idx)       → Line ~8602
  openInvPreview(idx)        → Line ~9570  (slide-in invoice preview panel)

  ─────────────────────────────────────────
  JAVASCRIPT — NAVIGATION
  ─────────────────────────────────────────
  nav(view, el)              → Line ~12702 (hub-aware override of original nav)
  switchHub(hub, tab, tabEl) → Line ~12672
  initHubPanels()            → Line ~12634 (moves DOM content into hub panels on load)
  HUB_MAP{}                  → Line ~12586 (hub routing config)

  ─────────────────────────────────────────
  JAVASCRIPT — PERSISTENCE (localStorage)
  ─────────────────────────────────────────
  STORAGE_KEYS{}             → Line ~12138
    Keys: amp_jobs | amp_clients | amp_permits | amp_invoices | amp_tasks
          amp_counters | amp_quotes | amp_sentlog | amp_recurring | amp_ob_done
  persistData()              → Line ~12146
  loadPersistedData()        → Line ~12161  (called once at init)
  autoPersist()              → Line ~12213  (debounced 400ms, called after every mutation)
  clearAllData()             → Line ~12221

  ─────────────────────────────────────────
  JAVASCRIPT — BRANDING SYSTEM
  ─────────────────────────────────────────
  BRAND_DEFAULTS{}           → Line ~11539
  brand{}                    → Line ~11558  (loaded from amp_brand localStorage)
  applyBrandToApp()          → Line ~11569
  saveBrand()                → Line ~11565
  openBrandSettings()        → Line ~11595

  ─────────────────────────────────────────
  JAVASCRIPT — ELECTRICAL-SPECIFIC
  ─────────────────────────────────────────
  STATE_DATA{}               → Line ~10599  (50 states: tax rates, labor ranges, multipliers)
  setPbState(code)           → Line ~10700  (recalculates price book for selected state)
  advancePermit(num, stage)  → Line ~10367  (moves permit through stages 0→3)
  deductJobMaterials(jobId)  → Line ~12558  (auto-deducts inventory when job completes)
  syncClientProfile(name)    → Line ~5900   (recomputes client stats from live arrays)
  refreshHealthScores()      → Line ~5950   (recalculates A/B/C/D health for all clients)

  ─────────────────────────────────────────
  JAVASCRIPT — ONBOARDING & IMPORT
  ─────────────────────────────────────────
  obStep, obState{}          → Line ~7352
  goObStep(n), obNext()      → Line ~7364
  dismissOnboarding()        → Line ~7406
  importWizard{}             → Line ~12785
  IMPORT_FIELDS{}            → Line ~12797
  renderImportStep()         → Line ~12880
  runImport()                → Line ~13100

  ─────────────────────────────────────────
  JAVASCRIPT — INIT SEQUENCE (bottom of file)
  ─────────────────────────────────────────
  loadPersistedData()        → Line ~13444
  syncClientProfile() x all → Line ~13446
  applyBrandToApp()          → Line ~13447
  refreshHealthScores()      → Line ~13448
  initHubPanels()            → Line ~13450
  setTimeout renders         → Line ~13452  (renderDashboard, renderJobs, etc.)

================================================================================
  DATA MODEL CHEAT SHEET
================================================================================
  Job status:     pending | scheduled | inprogress | complete | cancelled
  Job types:      panel | ev | svc | inst | safe | outlets | lighting
  Invoice status: draft | sent | viewed | paid | overdue | complete
  Permit stages:  0=Applied | 1=Reviewed | 2=Inspection | 3=Approved
  Health grades:  A (green) | B (amber) | C (orange) | D (red)
  Pay methods:    Stripe | Zelle | Venmo | Check | Cash
================================================================================
-->
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="theme-color" content="#C8780A">
<meta name="description" content="CRM for Electrical Contractors">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
<title>Amp CRM</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ============================================================
   THEME TOKENS
============================================================ */
/* ── LIGHT (default) ─── warm parchment, single amber accent ── */
[data-theme="light"] {
  --bg:          #F5F3EF;
  --bg2:         #EFECE7;
  --surface:     #FFFFFF;
  --surface2:    #F5F3EF;
  --surface3:    #EBE8E2;
  --border:      #E2DDD6;
  --border2:     #D4CEC6;
  --text:        #1A1714;
  --text-dim:    #6B6560;
  --text-muted:  #A89E96;
  /* single accent — amber/copper */
  --amber:       #C8780A;
  --amber-light: #FFF3E0;
  --amber-glow:  rgba(200,120,10,.12);
  /* semantic — used ONLY for meaning */
  --success:     #1A6E3C;
  --success-bg:  rgba(26,110,60,.08);
  --warning:     #A85500;
  --warning-bg:  rgba(168,85,0,.08);
  --danger:      #B01C1C;
  --danger-bg:   rgba(176,28,28,.08);
  --info:        #1854A0;
  --info-bg:     rgba(24,84,160,.08);
  /* legacy aliases — keeps all existing references working */
  --yellow:      #C8780A;
  --yellow-glow: rgba(200,120,10,.12);
  --orange:      #A85500;
  --green:       #1A6E3C;
  --red:         #B01C1C;
  --blue:        #1854A0;
  --purple:      #5C3A9E;
  --shadow:      0 1px 3px rgba(26,23,20,.08), 0 4px 16px rgba(26,23,20,.06);
  --shadow-sm:   0 1px 2px rgba(26,23,20,.06);
  --shadow-md:   0 4px 24px rgba(26,23,20,.1);
  --card-hover:  rgba(26,23,20,.02);
}

/* ── DARK — warm charcoal, same amber accent ─────────────────── */
[data-theme="dark"] {
  --bg:          #141210;
  --bg2:         #111009;
  --surface:     #1E1C1A;
  --surface2:    #262320;
  --surface3:    #2E2A27;
  --border:      #3A3530;
  --border2:     #46403A;
  --text:        #F0EDE8;
  --text-dim:    #9A9088;
  --text-muted:  #5A5248;
  --amber:       #E8900A;
  --amber-light: rgba(232,144,10,.15);
  --amber-glow:  rgba(232,144,10,.18);
  --success:     #22A05A;
  --success-bg:  rgba(34,160,90,.1);
  --warning:     #D06A00;
  --warning-bg:  rgba(208,106,0,.1);
  --danger:      #D83030;
  --danger-bg:   rgba(216,48,48,.1);
  --info:        #3480D8;
  --info-bg:     rgba(52,128,216,.1);
  --yellow:      #E8900A;
  --yellow-glow: rgba(232,144,10,.18);
  --orange:      #D06A00;
  --green:       #22A05A;
  --red:         #D83030;
  --blue:        #3480D8;
  --purple:      #8A60D8;
  --shadow:      0 2px 8px rgba(0,0,0,.4), 0 8px 32px rgba(0,0,0,.3);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.3);
  --shadow-md:   0 6px 32px rgba(0,0,0,.5);
  --card-hover:  rgba(255,255,255,.02);
}

/* ============================================================
   RESET & BASE
============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size: 16px; }
body {
  font-family: 'Sora', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow: hidden;
  transition: background .3s, color .3s;
}

/* ============================================================
   LAYOUT — DESKTOP
============================================================ */
.app-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* SIDEBAR */
.sidebar {
  width: 230px;
  min-width: 230px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  transition: background .3s, border-color .3s;
  box-shadow: 1px 0 0 var(--border);
}
.logo-area {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
  color: var(--amber);
  line-height: 1;
}
.logo-sub {
  font-size: 8.5px;
  color: var(--text-muted);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* THEME TOGGLE */
.theme-toggle {
  width: 40px;
  height: 22px;
  background: var(--surface3);
  border-radius: 11px;
  border: 1px solid var(--border2);
  cursor: pointer;
  position: relative;
  transition: background .3s;
  flex-shrink: 0;
}
.theme-toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber);
  top: 2px;
  left: 2px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
[data-theme="light"] .theme-toggle::after { transform: translateX(18px); }

.theme-icon {
  position: absolute;
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .2s;
}
.icon-moon { left: 4px; opacity: 1; }
.icon-sun { right: 4px; opacity: 0.4; }
[data-theme="light"] .icon-moon { opacity: 0.4; }
[data-theme="light"] .icon-sun { opacity: 1; }

.nav { padding: 10px 0; flex: 1; overflow-y: auto; }
.nav-section { margin-bottom: 4px; }
.nav-label {
  font-size: 8.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 20px 3px;
  font-weight: 600;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin: 1px 8px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  transition: all .15s;
  position: relative;
  font-weight: 400;
  min-height: 44px; /* MIT tap target */
}
.nav-item:hover { background: var(--card-hover); color: var(--text); }
.nav-item.active {
  background: var(--amber-light);
  color: var(--amber);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 25%;
  height: 50%;
  width: 3px;
  background: var(--amber);
  border-radius: 0 3px 3px 0;
}
.nav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  line-height: 1.2;
}
.nb-y { background: var(--amber); color: #fff; }
.nb-b { background: var(--blue); color: #fff; }

.sidebar-bottom {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}
.user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.user-pill:hover { background: var(--card-hover); }
.user-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amber), #A85500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: #000;
  flex-shrink: 0;
}

/* MAIN */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
}
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 56px;
  box-shadow: 0 1px 0 var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  transition: background .3s, border-color .3s;
}
.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
  white-space: nowrap;
}
.topbar-right { display: flex; align-items: center; gap: 8px; }
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  z-index: 1000;
  max-height: 380px;
  overflow-y: auto;
  display: none;
}
.search-results.open { display: block; }
.sr-section { padding: 8px 14px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.sr-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background .1s; border-radius: 0; }
.sr-item:hover { background: var(--surface2); }
.sr-item:last-child { border-radius: 0 0 12px 12px; }
.sr-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.sr-main { flex: 1; min-width: 0; }
.sr-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub { font-size: 11px; color: var(--text-dim); }
.sr-badge { font-size: 11px; padding: 2px 7px; border-radius: 8px; }
.sr-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.search-wrap { position: relative; }
.search-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 14px;
  font-family: 'Sora', sans-serif;
  font-size: 12.5px;
  color: var(--text);
  width: 200px;
  outline: none;
  transition: border-color .2s, background .3s;
}
.search-box:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.search-box::placeholder { color: var(--text-muted); }

/* CONTENT */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
  transition: background .3s;
}

/* VIEWS */
.view { display: none; }
.view.active { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  padding: 8px 16px;
  border-radius: 9px;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 38px;
}
.btn-primary { background: var(--amber); color: #fff; font-weight: 600; letter-spacing: .2px; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 16px var(--amber-glow); }
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--card-hover); color: var(--text); }
.btn-edit { background: rgba(24,84,160,.1); color: var(--blue); border: 1px solid rgba(24,84,160,.2); padding: 5px 11px; font-size: 12px; min-height: 32px; }
.btn-edit:hover { background: rgba(24,84,160,.18); }
.btn-save { background: rgba(26,110,60,.1); color: var(--success); border: 1px solid rgba(26,110,60,.25); padding: 5px 11px; font-size: 12px; min-height: 32px; }
.btn-save:hover { background: rgba(26,110,60,.18); }
.btn-del { background: rgba(176,28,28,.1); color: var(--danger); border: 1px solid rgba(176,28,28,.2); padding: 5px 9px; font-size: 13px; min-height: 32px; }
.btn-del:hover { background: rgba(176,28,28,.18); }
.btn-success { background: rgba(26,110,60,.1); color: var(--success); border: 1px solid rgba(26,110,60,.25); }
.btn-warn { background: var(--amber-light); color: var(--amber); border: 1px solid var(--amber-glow); }
.btn-sm { padding: 6px 12px; font-size: 12px; min-height: 34px; }
.inline-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 5px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.inline-btn:hover { color: var(--danger); background: rgba(176,28,28,.1); }

/* ============================================================
   CARDS
============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: background .3s, border-color .3s;
  box-shadow: var(--shadow);
}
.card+.card { margin-top: 14px; }
.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.card-title { font-weight: 600; font-size: 13.5px; letter-spacing: .2px; }

/* ============================================================
   STATS / KPI CARDS
============================================================ */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
}
.kpi:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.kpi::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; }
.kpi-y::after { background: linear-gradient(90deg, var(--amber), #E8A030); }
.kpi-g::after { background: linear-gradient(90deg, var(--success), #2EC070); }
.kpi-o::after { background: linear-gradient(90deg, var(--warning), #D08020); }
.kpi-b::after { background: linear-gradient(90deg, var(--info), #4080C8); }
.kpi-p::after { background: linear-gradient(90deg, #9333EA, #A855F7); }
.kpi-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-bottom: 6px; }
.kpi-value { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 1px; line-height: 1; color: var(--text); }
.kpi-change { font-size: 11px; margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.up { color: var(--success); }
.dn { color: var(--danger); }
.neu { color: var(--text-muted); }

/* PERFORMANCE RING */
.progress-ring-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.ring-container { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.ring-svg { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--surface3); stroke-width: 6; }
.ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.34,1.56,.64,1); }
.ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--text); }
.ring-info { flex: 1; }
.ring-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.ring-sub { font-size: 12px; color: var(--text-dim); }
.ring-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-top: 5px; }

/* TABLES */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  padding: 9px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 11px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  transition: background .1s;
}
[data-theme="light"] .data-table td { border-bottom-color: var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--card-hover); cursor: pointer; }

/* PILLS */
.tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 500; letter-spacing: .3px; }
.t-panel { background: var(--amber-light); color: var(--amber); }
.t-ev { background: var(--info-bg); color: var(--info); }
.t-svc { background: var(--warning-bg); color: var(--warning); }
.t-inst { background: var(--success-bg); color: var(--success); }
.t-safe { background: rgba(92,58,158,.08); color: var(--purple); }
.status-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; display: inline-block; white-space: nowrap; }
.ss { background: var(--info-bg); color: var(--info); }
.si { background: var(--amber-light); color: var(--amber); }
.sc { background: var(--success-bg); color: var(--success); }
.sp { background: var(--warning-bg); color: var(--warning); }
.so { background: var(--danger-bg); color: var(--danger); }

/* ACTIVITY */
.a-item {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  transition: background .1s;
}
.a-item:hover { background: var(--card-hover); }
.a-item:last-child { border-bottom: none; }
[data-theme="light"] .a-item { border-bottom-color: var(--border); }
.a-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.a-body { flex: 1; min-width: 0; }
.a-title { font-size: 13px; font-weight: 500; margin-bottom: 1px; }
.a-sub { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-time { font-size: 10.5px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }

/* PERMIT TIMELINE */
.permits-wrap { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.permit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  transition: all .2s;
}
.permit-card:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dg { background: var(--success); box-shadow: 0 0 8px var(--success-bg); }
.dy { background: var(--amber); box-shadow: 0 0 8px var(--amber-glow); }
.do_ { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.dr { background: var(--danger); box-shadow: 0 0 8px var(--danger-bg); }
.p-timeline { display: flex; margin-top: 14px; }
.p-step { flex: 1; text-align: center; position: relative; }
.p-step::before { content: ''; position: absolute; top: 10px; left: 50%; right: -50%; height: 2px; background: var(--border); }
.p-step:last-child::before { display: none; }
.p-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface2); margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; font-size: 9px; position: relative; z-index: 1; transition: all .2s; }
.p-dot.done { border-color: var(--success); background: var(--success); color: #fff; }
.p-dot.cur { border-color: var(--amber); background: var(--amber-light); color: var(--amber); }
.p-lbl { font-size: 8.5px; color: var(--text-muted); letter-spacing: .3px; }

/* CLIENTS */
.clients-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.client-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  transition: all .2s;
}
.client-card:hover { border-color: var(--amber); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* PRICE BOOK */
.pb-cats { display: flex; gap: 6px; padding: 12px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.cat-chip {
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--surface2);
  transition: all .15s;
  min-height: 34px;
  display: flex;
  align-items: center;
}
.cat-chip.active, .cat-chip:hover { background: var(--amber-light); border-color: var(--amber); color: var(--amber); }
.pb-head {
  display: grid;
  grid-template-columns: 1fr 78px 78px 64px 90px 108px;
  gap: 6px;
  padding: 7px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.pb-hc { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; text-align: right; }
.pb-hc:first-child { text-align: left; }
.pb-row {
  display: grid;
  grid-template-columns: 1fr 78px 78px 64px 90px 108px;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background .1s;
}
[data-theme="light"] .pb-row { border-bottom-color: var(--border); }
.pb-row:hover { background: var(--card-hover); }
.pb-row:last-child { border-bottom: none; }
.pb-row.editing { background: rgba(24,84,160,.04); border-left: 2px solid var(--blue); }
.pb-nm { font-size: 13px; }
.pb-v { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); text-align: right; }
.pb-tot { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--amber); font-weight: 600; text-align: right; }
.pb-ei { width: 100%; background: var(--surface3); border: 1px solid var(--blue); border-radius: 6px; padding: 4px 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); outline: none; }

/* FORMS */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; }
.form-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 13px;
  font-family: 'Sora', sans-serif;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  transition: border-color .2s, background .3s;
  min-height: 44px;
}
.form-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
  grid-template-columns: 1fr 78px 78px 64px 90px 108px;

/* MODAL */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,23,20,.45);
  backdrop-filter: blur(8px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
/* General modal sits above client profile modal */
#modal-overlay { z-index: 1100; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  width: 560px;
  max-width: 100%;
  max-height: 88vh;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  animation: modalIn .2s cubic-bezier(.34,1.2,.64,1);
  display: flex;
  flex-direction: column;
}
@keyframes modalIn { from { transform: scale(.96) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--surface); }
.modal-body { padding: 22px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; background: var(--surface); }
.modal-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; }
.modal-close { width: 30px; height: 30px; border-radius: 7px; background: var(--surface2); border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.modal-close:hover { background: var(--surface3); color: var(--text); }
/* ── Job template auto-fill indicator ──────────────────────── */
.template-applied {
  background: var(--amber-light);
  border: 1px solid rgba(200,120,10,.3);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fadeIn .3s ease;
}
/* ── Signature pad ──────────────────────────────────────────── */
.sig-pad-wrap {
  border: 2px dashed var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--surface2);
  position: relative;
}
.sig-pad-wrap canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
}
.sig-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.sig-status {
  font-size: 11px;
  color: var(--success);
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 4px;
}
/* ── Photo upload area ───────────────────────────────────────── */
.photo-upload-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  margin-bottom: 12px;
}
.photo-upload-zone:hover {
  border-color: var(--amber);
  background: var(--amber-light);
}
.photo-upload-zone input[type="file"] {
  display: none;
}
.photo-grid-real {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.photo-thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: var(--surface2);
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-thumb .photo-del {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.photo-thumb .photo-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.55);
  color: white;
  font-size: 10px;
  padding: 3px 5px;
  text-align: center;
}
/* modal-body and modal-footer rules consolidated above in main modal block */

/* TABS */
.tab-bar { display: flex; border-bottom: 1px solid var(--border); padding: 0 20px; gap: 2px; overflow-x: auto; }
.tab { padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; margin-bottom: -1px; white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.tab:hover { color: var(--text-dim); }
.tab.active { color: var(--amber); border-bottom-color: var(--amber); }
.tab-content { display: none; padding: 18px 20px; }
.tab-content.active { display: block; }

/* NOTES */
.note-item { padding: 12px 14px; background: var(--surface2); border-radius: 10px; margin-bottom: 8px; border-left: 3px solid var(--border); }
.note-item.call { border-left-color: var(--blue); }
.note-item.visit { border-left-color: var(--success); }
.note-item.note { border-left-color: var(--amber); }
.note-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; display: flex; gap: 10px; }
.note-text { font-size: 13px; line-height: 1.55; }

/* TASKS */
.task-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); min-height: 50px; }
.task-item:last-child { border-bottom: none; }
[data-theme="light"] .task-item { border-bottom-color: var(--border); }
.task-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border2); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all .2s; }
.task-check.done { background: var(--success); border-color: var(--success); color: #fff; }
.task-text { flex: 1; font-size: 13px; }
.task-text.done { text-decoration: line-through; color: var(--text-muted); }

/* PHOTOS */
.photo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 16px; }
.photo-thumb { aspect-ratio: 1; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-direction: column; gap: 4px; font-size: 24px; transition: all .15s; min-height: 60px; }
.photo-thumb:hover { border-color: var(--amber); background: var(--surface3); }
.photo-thumb span { font-size: 10px; color: var(--text-muted); }

/* INLINE EDIT */
.editable-text { cursor: pointer; padding: 2px 6px; border-radius: 5px; transition: background .15s; display: inline-block; }
.editable-text:hover { background: rgba(24,84,160,.1); }
.editable-text::after { content: ' ✏️'; font-size: 9px; opacity: 0; transition: opacity .15s; }
.editable-text:hover::after { opacity: 1; }
.editable-input { background: var(--surface3); border: 1px solid var(--blue); border-radius: 6px; padding: 3px 8px; font-family: inherit; font-size: inherit; color: var(--text); outline: none; }

/* PROFIT BARS */
.profit-bar { height: 8px; border-radius: 4px; background: var(--surface3); overflow: hidden; margin-top: 5px; }
.profit-fill { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.34,1.2,.64,1); }

/* TECH CARDS */
.tech-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }

/* CAL */
.cal-hdr { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; background: var(--border); }
.cal-dl { background: var(--surface2); text-align: center; padding: 8px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; background: var(--border); }
.cal-cell { background: var(--surface); min-height: 80px; padding: 7px; cursor: pointer; transition: background .1s; }
.cal-cell:hover { background: var(--surface2); }
.cal-cell.today { background: var(--amber-light); }
.cal-date { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; }
.cal-cell.today .cal-date { color: var(--amber); }
.cal-ev { font-size: 10px; padding: 2px 5px; border-radius: 3px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ey { background: var(--amber-light); color: var(--amber); }
.eb { background: var(--info-bg); color: var(--info); }
.eo { background: var(--warning-bg); color: var(--warning); }
.eg { background: var(--success-bg); color: var(--success); }

/* NOTIFICATION PANEL */
.notif-panel {
  position: fixed;
  top: 56px;
  right: 0;
  width: 320px;
  height: calc(100vh - 56px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 500;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.34,1.1,.64,1);
  overflow-y: auto;
  box-shadow: -10px 0 30px rgba(0,0,0,.2);
}
.notif-panel.open { transform: translateX(0); }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
.notif-item:hover { background: var(--card-hover); }
.notif-item.unread { border-left: 3px solid var(--amber); }

/* QUOTE */
.quote-line { display: grid; grid-template-columns: 1fr 66px 88px 44px; gap: 7px; margin-bottom: 7px; align-items: center; }
.quote-total { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.quote-amt { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--amber); }

/* RECURRING */
.rec-badge { font-size: 9px; padding: 2px 7px; border-radius: 10px; background: rgba(92,58,158,.12); color: var(--purple); font-weight: 600; letter-spacing: .5px; }


/* ANALYTICS */
.chart-wrap { position: relative; height: 180px; display: flex; align-items: flex-end; gap: 6px; padding: 0 4px 0; }
.chart-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chart-bar { width: 100%; border-radius: 5px 5px 0 0; transition: height .6s cubic-bezier(.34,1.2,.64,1), opacity .2s; cursor: pointer; position: relative; min-height: 4px; }
.chart-bar:hover { opacity: .8; }
.chart-bar:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--surface3); border: 1px solid var(--border); color: var(--text); font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; z-index: 10; }
.chart-label { font-size: 9.5px; color: var(--text-muted); text-align: center; white-space: nowrap; font-family: 'JetBrains Mono', monospace; }
.chart-grid { position: absolute; left: 0; right: 0; top: 0; bottom: 24px; pointer-events: none; }
.chart-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); }
.funnel-step { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.funnel-bar-wrap { flex: 1; height: 32px; background: var(--surface2); border-radius: 6px; overflow: hidden; position: relative; }
.funnel-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 12px; font-weight: 600; color: #000; transition: width .7s cubic-bezier(.34,1.2,.64,1); }
.funnel-label { width: 100px; font-size: 12px; color: var(--text-dim); text-align: right; }
.funnel-val { width: 52px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); }
.aging-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.aging-row:last-child { border-bottom: none; }
[data-theme="light"] .aging-row { border-bottom-color: var(--border); }
.aging-bar-wrap { flex: 1; height: 8px; background: var(--surface3); border-radius: 4px; overflow: hidden; }
.aging-fill { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.34,1.2,.64,1); }
.donut-wrap { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.donut-wrap svg { transform: rotate(-90deg); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.donut-leg-item { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.donut-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.health-score { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.hs-a { background: rgba(26,110,60,.15); color: var(--success); }
.hs-b { background: var(--amber-light); color: var(--amber); }
.hs-c { background: rgba(168,85,0,.15); color: var(--warning); }
.hs-d { background: rgba(176,28,28,.12); color: var(--danger); }
.sparkline-wrap { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.spark-bar { width: 6px; border-radius: 2px 2px 0 0; background: var(--amber); opacity: .7; transition: opacity .15s; flex-shrink: 0; }
.spark-bar:hover { opacity: 1; }
.suggest-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(24,84,160,.08); border: 1px solid rgba(24,84,160,.2); border-radius: 20px; font-size: 12px; color: var(--blue); cursor: pointer; transition: all .15s; margin: 3px; }
.suggest-chip:hover { background: rgba(24,84,160,.15); }
.ref-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface2); border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: background .15s; }
.ref-item:hover { background: var(--surface3); }
.client-toolbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.seg-btn { padding: 6px 13px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); color: var(--text-dim); background: var(--surface); transition: all .15s; min-height: 34px; }
.seg-btn.active, .seg-btn:hover { background: var(--amber-light); border-color: var(--amber); color: var(--amber); }


/* STATE SELECTOR */
.state-bar { display:flex; align-items:center; gap:10px; padding:10px 16px 12px; border-bottom:1px solid var(--border); background:var(--surface2); flex-wrap:wrap; }
.state-select-wrap { display:flex; align-items:center; gap:8px; }
.state-flag { font-size:18px; }
.state-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:12px; font-weight:600; border:1px solid var(--border); background:var(--surface); cursor:pointer; transition:all .15s; }
.state-pill.active { background:var(--amber-light); border-color:var(--amber); color:var(--amber); }
.state-tax-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:8px; font-size:11px; font-weight:600; background:rgba(24,84,160,.1); color:var(--blue); border:1px solid rgba(24,84,160,.2); }
.state-note { font-size:11px; color:var(--text-muted); }
.pb-state-col { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--blue); text-align:right; }

/* PRICE BOOK — extra columns */
  grid-template-columns: 1fr 78px 78px 64px 90px 108px;
  grid-template-columns: 1fr 78px 78px 64px 90px 108px;

/* DUPLICATE JOB */
.btn-dupe { background:rgba(24,84,160,.08); color:var(--blue); border:1px solid rgba(24,84,160,.2); font-size:11px; padding:4px 9px; border-radius:6px; cursor:pointer; transition:all .15s; min-height:30px; white-space:nowrap; }
.btn-dupe:hover { background:rgba(24,84,160,.18); }

/* JOB LIST SEARCH BAR */
.jobs-toolbar { display:flex; gap:8px; margin-bottom:14px; align-items:center; flex-wrap:wrap; }

/* TECH SCHEDULE */
.tech-week-row { display:grid; grid-template-columns:90px repeat(5,1fr); gap:0; border-bottom:1px solid var(--border); }
.tech-week-row:last-child { border-bottom:none; }
.tech-week-cell { padding:9px 10px; border-right:1px solid var(--border); font-size:12px; }
.tech-week-cell:last-child { border-right:none; }
.tech-job-chip { display:inline-block; padding:3px 7px; border-radius:5px; font-size:10px; font-weight:600; margin-bottom:3px; cursor:pointer; white-space:nowrap; }
.reassign-btn { font-size:10px; padding:2px 6px; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; min-height:22px; }
.reassign-btn:hover { border-color:var(--amber); color:var(--amber); }

/* CLIENT HEALTH AUTO-BADGE */
.health-rule { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:12px; }


/* ── BRANDING ─────────────────────────────────────── */
.brand-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}
.brand-logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  line-height: 1;
}
.brand-accent { color: var(--amber); }
.sidebar-branded { border-bottom: 3px solid var(--brand-accent, var(--amber)); }
.brand-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 8px; font-size: 11px; font-weight: 600;
  background: var(--amber-light); color: var(--amber);
  border: 1px solid rgba(200,120,10,.3); cursor: pointer;
}
.brand-color-swatch {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; transition: all .15s; flex-shrink: 0;
}
.brand-color-swatch.active { border-color: white; transform: scale(1.15); box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.brand-preview-doc {
  background: white; border-radius: 10px; padding: 20px;
  font-family: -apple-system, 'Segoe UI', sans-serif; color: #1a1a1a;
  box-shadow: 0 4px 20px rgba(0,0,0,.3); max-width: 100%;
}
.brand-preview-header { display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 3px solid var(--preview-accent, #C8780A); }

/* ── PROFITABILITY ENHANCEMENTS ─────────────────────── */
.profit-kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; }
.profit-trend-line { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.profit-trend-bar { background: var(--amber); border-radius: 2px 2px 0 0; flex: 1; transition: height .3s; min-width: 6px; }
.profit-section { margin-bottom: 18px; }

/* ── MOBILE IMPROVEMENTS ────────────────────────────── */
@media (max-width: 768px) {
  .jobs-toolbar { gap: 6px; }
  .jobs-toolbar input[type="date"] { display: none; }
  .jobs-toolbar #jobs-tech-filter { display: none; }
  .jobs-toolbar .btn-ghost.btn-sm { display: none; }
  .pb-state-bar { gap: 8px; }
  .pb-state-bar .state-pill { display: none; }
  .topbar-biz-name { display: none; }
  .data-table th:nth-child(n+5), .data-table td:nth-child(n+5) { display: none; }
  .profit-kpi-row { grid-template-columns: 1fr 1fr; }
  .quote-line { grid-template-columns: 1fr 56px 70px 24px !important; }
  .state-bar { flex-wrap: nowrap; overflow-x: auto; }
}
@media (max-width: 480px) {
  .clients-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .data-table th:nth-child(n+4), .data-table td:nth-child(n+4) { display: none; }
}


/* ── HUB TABS ─────────────────────────────────────────────── */
.hub-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  background: var(--surface2);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
}
.hub-tab {
  padding: 8px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.hub-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.hub-tab.active {
  background: var(--surface);
  color: var(--amber);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.hub-panel { display: none; }
.hub-panel.active { display: block; }

/* ── TOGGLE SWITCH ────────────────────────────────────────── */
.toggle-switch {
  width: 42px; height: 24px;
  background: var(--surface3);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.toggle-switch.on { background: var(--amber); }
.toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.toggle-switch.on .toggle-knob { left: 21px; }

/* ── SETTINGS NAV BOTTOM SECTION ──────────────────────────── */
.nav { display: flex; flex-direction: column; flex: 1; overflow-y: auto; padding-bottom: 0; }
.nav .nav-section:last-child { margin-top: auto; }


/* ── QUICK ACTION SHEET ───────────────────────────────────── */
.quick-action-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  z-index: 450;
}
.quick-action-backdrop.open { display: block; }

.quick-action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border);
  z-index: 460;
  padding: 12px 20px 40px;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.34,1.1,.64,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.4);
}
.quick-action-sheet.open { transform: translateY(0); }

.qa-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.qa-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 16px;
  text-align: center;
}
.qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.qa-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--surface2);
  border: 1px solid var(--border);
  transition: all .12s;
  -webkit-tap-highlight-color: transparent;
}
.qa-item:active { transform: scale(.95); background: var(--card-hover); }
.qa-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.qa-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}

/* Update FAB to look like a lightning bolt menu trigger */
.mob-fab {
  font-size: 22px !important;
  background: var(--amber) !important;
  color: #fff !important;
  transition: all .15s !important;
}
.mob-fab.open {
  background: var(--surface3) !important;
  color: var(--text) !important;
  transform: rotate(45deg) scale(1.05);
}


/* ── MATERIALS CATALOG ───────────────────────────────────────── */
.mat-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.mat-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border);
}
.mat-row {
  background: var(--surface);
  padding: 13px 18px;
  display: grid;
  grid-template-columns: 1fr 80px 90px 80px 36px;
  gap: 10px;
  align-items: center;
  transition: background .1s;
  cursor: pointer;
}
.mat-row:hover { background: var(--card-hover); }
.mat-row.low-stock { border-left: 3px solid var(--danger); }
.mat-row.ok-stock  { border-left: 3px solid transparent; }
.mat-name { font-size: 13px; font-weight: 500; }
.mat-sku  { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
.mat-supplier { font-size: 10.5px; color: var(--text-muted); }
.mat-val  { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; text-align: right; }
.mat-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.mat-stock-ok   { background: var(--success-bg); color: var(--success); }
.mat-stock-low  { background: var(--danger-bg);  color: var(--danger); }
.mat-stock-warn { background: var(--warning-bg); color: var(--warning); }
.mat-head {
  display: grid;
  grid-template-columns: 1fr 80px 90px 80px 36px;
  gap: 10px;
  padding: 8px 18px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.mat-hc {
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  text-align: right;
}
.mat-hc:first-child { text-align: left; }

/* Stock alert summary bar */
.stock-alert-bar {
  background: var(--danger-bg);
  border: 1px solid rgba(176,28,28,.2);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.stock-alert-bar.hidden { display: none; }
.stock-alert-count {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--danger);
  line-height: 1;
  flex-shrink: 0;
}
.stock-alert-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
}
.stock-alert-sub {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 2px;
  font-weight: 400;
}

/* Job materials section in modal */
.job-mat-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px 32px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.mat-cost-preview {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
  padding: 0 4px;
}

/* Dashboard stock alert card */
.dash-stock-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.dash-stock-item:hover { background: var(--card-hover); }
.dash-stock-item:last-child { border-bottom: none; }
.dash-stock-name { font-size: 12.5px; font-weight: 500; }
.dash-stock-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.dash-stock-qty {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--danger);
  line-height: 1;
}
.dash-stock-unit { font-size: 10px; color: var(--text-muted); text-align: right; }


/* ── CLIENT PROFILE ENHANCEMENTS ─────────────────────────────── */
.cm-stats-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.cm-stat {
  padding: 11px 12px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.cm-stat:last-child { border-right: none; }
.cm-stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  line-height: 1.1;
}
.cm-stat-lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Next action banner */
.cm-next-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--amber-light);
  border-bottom: 1px solid rgba(200,120,10,.2);
  cursor: pointer;
  transition: background .15s;
}
.cm-next-action:hover { background: rgba(200,120,10,.18); }
.cm-next-action.danger-action {
  background: var(--danger-bg);
  border-bottom-color: rgba(176,28,28,.2);
}
.cm-next-action-icon { font-size: 16px; flex-shrink: 0; }
.cm-next-action-text { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--amber); }
.cm-next-action.danger-action .cm-next-action-text { color: var(--danger); }
.cm-next-action-due { font-size: 11px; color: var(--text-muted); }

/* Property record panel */
.property-panel {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.property-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.property-row:last-child { border-bottom: none; }
.property-key { color: var(--text-muted); font-size: 11.5px; }
.property-val { font-weight: 500; }

/* AR / billing panel */
.ar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.ar-row:last-child { border-bottom: none; }
.ar-action-btn {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  color: var(--text-dim);
  transition: all .15s;
}
.ar-action-btn:hover { border-color: var(--amber); color: var(--amber); }

/* Unified timeline */
.timeline-item {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.timeline-body { flex: 1; min-width: 0; }
.timeline-title { font-size: 13px; font-weight: 500; }
.timeline-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.timeline-amount { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--amber); flex-shrink: 0; text-align: right; }

/* Service schedule */
.service-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.service-row:last-child { border-bottom: none; }
.service-due-badge {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 600;
  flex-shrink: 0;
}
.sdb-overdue  { background: var(--danger-bg);  color: var(--danger); }
.sdb-soon     { background: var(--warning-bg); color: var(--warning); }
.sdb-upcoming { background: var(--info-bg);    color: var(--info); }
.sdb-ok       { background: var(--success-bg); color: var(--success); }

/* Client card enhanced */
.client-card-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 600;
}
.client-card-next {
  font-size: 11px;
  color: var(--text-dim);
  padding: 6px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-card-next.urgent { color: var(--danger); }


/* ── BILLING SYSTEM REDESIGN ─────────────────────────────────── */

/* Invoice rows */
.inv-row {
  display: grid;
  grid-template-columns: 110px 1fr 140px 90px 90px 100px 110px auto;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  min-height: 54px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
  cursor: pointer;
}
.inv-row:hover { background: var(--surface2); }
.inv-row:last-child { border-bottom: none; }
.inv-row.overdue { border-left: 3px solid var(--danger); }
.inv-row.viewed  { border-left: 3px solid var(--blue); }
.inv-row.sent    { border-left: 3px solid var(--warning); }
.inv-row.draft   { border-left: 3px solid var(--border); opacity:.8; }
.inv-cell { font-size: 12.5px; padding: 4px 8px 4px 0; }
.inv-num  { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted); }
.inv-client { font-weight: 600; font-size: 13px; }
.inv-job    { font-size: 11.5px; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-amount { font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--amber); }
.inv-actions { display:flex; gap:4px; justify-content:flex-end; }

/* Invoice expand panel */
.inv-expand {
  display: none;
  padding: 14px 18px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--amber);
}
.inv-expand.open { display: block; }
.inv-line-row {
  display: grid;
  grid-template-columns: 1fr 50px 80px 80px;
  gap: 8px;
  padding: 6px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.inv-line-row:last-child { border-bottom:none; }
.inv-line-row.total-row {
  font-weight:700;
  border-top: 2px solid var(--border);
  border-bottom: none;
  padding-top: 8px;
  margin-top:4px;
}

/* Invoice status badges */
.inv-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600;
  padding: 3px 8px; border-radius: 8px;
  white-space: nowrap;
}
.ib-draft   { background:var(--surface3);   color:var(--text-muted); }
.ib-sent    { background:rgba(200,120,10,.12); color:var(--amber); }
.ib-viewed  { background:rgba(24,84,160,.1); color:var(--blue); }
.ib-partial { background:rgba(249,115,22,.1);color:var(--warning); }
.ib-paid    { background:var(--success-bg);  color:var(--success); }
.ib-overdue { background:var(--danger-bg);   color:var(--danger); }

/* Billing summary bar */
.billing-summary {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.billing-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
}
.billing-stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  line-height:1;
  margin-bottom: 4px;
}
.billing-stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight:600;
}
.billing-stat-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Invoice toolbar */
.inv-toolbar {
  display:flex; align-items:center; gap:8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-wrap:wrap;
}
.inv-filter-chip {
  font-size:11.5px; padding:4px 11px; border-radius:20px;
  border: 1px solid var(--border); background:transparent;
  cursor:pointer; transition:all .15s; color:var(--text-dim);
  font-weight:500;
}
.inv-filter-chip.active, .inv-filter-chip:hover {
  background: var(--amber-light); border-color: rgba(200,120,10,.4);
  color: var(--amber);
}
.inv-filter-chip.danger.active { background:var(--danger-bg); border-color:rgba(176,28,28,.3); color:var(--danger); }

/* Estimate pipeline */
.quote-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.pipeline-col {
  background: var(--surface2);
  border-radius: 10px;
  border: 1px solid var(--border);
  min-height: 80px;
}
.pipeline-col-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.quote-card {
  margin: 10px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .15s;
}
.quote-card:hover { border-color:var(--amber); box-shadow:var(--shadow-md); }
.quote-card-client { font-size:13px; font-weight:600; margin-bottom:2px; }
.quote-card-type   { font-size:11px; color:var(--text-muted); margin-bottom:6px; }
.quote-card-amount { font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--amber); font-weight:700; }
.quote-card-age    { font-size:10.5px; color:var(--text-muted); margin-top:4px; }
.quote-card-actions { display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }

/* Invoice preview panel slide-in */
.inv-preview-panel {
  position:fixed; right:0; top:0; bottom:0; width:420px;
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:-8px 0 32px rgba(0,0,0,.15);
  z-index:200; transform:translateX(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.inv-preview-panel.open { transform:translateX(0); }
.inv-preview-hdr {
  padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface2);
}
.inv-preview-body { flex:1; overflow-y:auto; padding:20px; }
.inv-preview-actions {
  padding:14px 20px; border-top:1px solid var(--border);
  background:var(--surface2); display:flex; gap:8px; flex-wrap:wrap;
}
.inv-doc-line {
  display:grid; grid-template-columns:1fr 48px 80px 80px;
  gap:6px; padding:8px 0; font-size:13px;
  border-bottom:1px solid var(--border);
}
.inv-doc-line:last-of-type { border:none; }
.inv-doc-total {
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0 0; font-size:15px; font-weight:700;
  border-top:2px solid var(--border);
}


/* ── DASHBOARD REDESIGN ──────────────────────────────────────── */

/* Action required items */
.action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.action-item:last-child { border-bottom: none; }
.action-item:hover { background: var(--surface2); }
.action-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 5px;
}
.action-body { flex: 1; min-width: 0; }
.action-title { font-size: 12.5px; font-weight: 600; }
.action-sub   { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.action-meta  {
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  text-align: right; padding-top: 1px; white-space: nowrap;
}

/* Unpaid invoice items on dashboard */
.dash-inv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.dash-inv-item:hover { background: var(--surface2); }
.dash-inv-item:last-child { border-bottom: none; }
.dash-inv-bar {
  width: 3px; border-radius: 2px; align-self: stretch; flex-shrink: 0;
  min-height: 28px;
}

/* Quote pipeline on dashboard */
.dash-quote-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.dash-quote-item:hover { background: var(--surface2); }
.dash-quote-item:last-child { border-bottom: none; }


/* ── IMPORT WIZARD ───────────────────────────────────────────── */
.import-modal-body { padding: 0; }

.import-step { display: none; }
.import-step.active { display: block; }

/* Source picker tiles */
.import-source-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
}
.import-source-tile {
  padding: 16px 12px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  user-select: none;
}
.import-source-tile:hover {
  border-color: var(--amber);
  background: var(--amber-light);
}
.import-source-tile.selected {
  border-color: var(--amber);
  background: var(--amber-light);
  box-shadow: 0 0 0 3px rgba(200,120,10,.15);
}
.import-source-icon { font-size: 26px; margin-bottom: 6px; }
.import-source-name { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.import-source-desc { font-size: 11px; color: var(--text-muted); }

/* Data type tabs */
.import-type-tabs {
  display: flex;
  gap: 6px;
  padding: 14px 20px 0;
}
.import-type-tab {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  color: var(--text-dim);
  background: transparent;
  transition: all .15s;
}
.import-type-tab.active {
  background: var(--amber-light);
  border-color: rgba(200,120,10,.4);
  color: var(--amber);
}

/* Drop zone */
.import-drop-zone {
  margin: 16px 20px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  background: var(--surface2);
  position: relative;
}
.import-drop-zone:hover,
.import-drop-zone.drag-over {
  border-color: var(--amber);
  background: var(--amber-light);
}
.import-drop-zone input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.import-drop-icon { font-size: 32px; margin-bottom: 8px; }
.import-drop-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.import-drop-sub   { font-size: 12px; color: var(--text-muted); }

/* Paste area */
.import-paste-area {
  margin: 0 20px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.import-paste-area textarea {
  width: 100%;
  min-height: 90px;
  background: var(--surface2);
  border: none;
  outline: none;
  padding: 12px 14px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
}
.import-paste-hint {
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface3);
  border-top: 1px solid var(--border);
}

/* Field mapping table */
.import-map-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.import-map-table th {
  padding: 7px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-muted);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.import-map-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.import-map-table tr:last-child td { border-bottom: none; }
.import-map-select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.import-map-select:focus { border-color: var(--amber); }

/* Preview table */
.import-preview-wrap {
  overflow-x: auto;
  margin: 0 20px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}
.import-preview-table th {
  padding: 7px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  text-align: left;
}
.import-preview-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-preview-table tr:last-child td { border-bottom: none; }
.import-preview-table tr:nth-child(even) td { background: var(--surface2); }

/* Progress / result */
.import-progress {
  padding: 32px 20px;
  text-align: center;
}
.import-progress-bar-wrap {
  height: 6px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
  margin: 16px 0;
}
.import-progress-bar {
  height: 100%;
  background: var(--amber);
  border-radius: 3px;
  transition: width .4s ease;
}
.import-result-icon { font-size: 48px; margin-bottom: 12px; }
.import-result-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.import-result-counts {
  display: flex; justify-content: center; gap: 20px; margin: 14px 0;
}
.import-result-count {
  background: var(--surface2);
  border-radius: 10px;
  padding: 10px 16px;
  text-align: center;
}
.import-count-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--amber);
}
.import-count-lbl {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* FLASH */
.flash {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: var(--surface);
  border: 1px solid var(--green);
  color: var(--success);
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  display: none;
  box-shadow: var(--shadow);
  animation: slideUp .22s ease;
  max-width: 320px;
}
@keyframes slideUp { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   MOBILE BOTTOM NAV (field mode)
============================================================ */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 400;
  padding: 0 8px;
  align-items: center;
  justify-content: space-around;
}
.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  min-width: 56px;
  min-height: 52px;
  justify-content: center;
}
.mob-nav-item.active { background: var(--amber-light); }
.mob-icon { font-size: 20px; line-height: 1; }
.mob-label { font-size: 10px; font-weight: 600; color: var(--text-muted); letter-spacing: .3px; }
.mob-nav-item.active .mob-label { color: var(--amber); }
.mob-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--yellow-glow);
  transition: all .15s;
  margin-top: -14px;
  border: 3px solid var(--bg);
}
.mob-fab:hover { transform: scale(1.1); }

/* FIELD MODE CARDS (mobile big tap targets) */
.field-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.field-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  transition: all .2s;
  min-height: 90px;
}
.field-btn:hover, .field-btn:active { border-color: var(--amber); transform: scale(.98); }
.field-btn-icon { font-size: 26px; }
.field-btn-label { font-weight: 600; font-size: 14px; }
.field-btn-sub { font-size: 12px; color: var(--text-dim); }

/* RESPONSIVE */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .mobile-nav { display: flex; }
  .content { padding: 16px 14px 80px; }
  .topbar { padding: 0 14px; }
  .search-box { display: none; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .dash-grid { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: 1fr 1fr; }
  .permits-wrap { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .data-table th:nth-child(n+4), .data-table td:nth-child(n+4) { display: none; }
  .kpi-value { font-size: 26px; }
  .modal { width: 100%; margin: 0; border-radius: 18px 18px 0 0; position: fixed; bottom: 0; max-height: 92vh; }
  .modal-overlay { align-items: flex-end; padding: 0; }
}

.dash-grid { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

/* VIEW TOGGLE indicator */
.view-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--amber-light);
  color: var(--amber);
  border: 1px solid rgba(200,120,10,.25);
  cursor: pointer;
  transition: all .15s;
}
.view-mode-badge:hover { background: rgba(200,120,10,.25); }

/* SECTION LABEL */
.sec-lbl { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }

/* ============================================================
   ONBOARDING OVERLAY
============================================================ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .3s ease;
}
.onboarding-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
}
.onboarding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  width: 540px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 60px 120px rgba(0,0,0,.7);
  animation: modalIn .3s cubic-bezier(.34,1.2,.64,1);
}
.ob-header {
  padding: 32px 32px 0;
  text-align: center;
}
.ob-bolt {
  font-size: 52px;
  margin-bottom: 12px;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.ob-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 2px;
  color: var(--amber);
  margin-bottom: 6px;
}
.ob-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 28px; line-height: 1.6; }

/* STEP INDICATORS */
.ob-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 32px;
  margin-bottom: 28px;
}
.ob-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all .3s;
  cursor: pointer;
}
.ob-step-dot.active { border-color: var(--amber); background: var(--amber); color: #fff; }
.ob-step-dot.done { border-color: var(--success); background: var(--green); color: #000; }
.ob-step-line { flex: 1; height: 2px; background: var(--border); margin: 0 4px; transition: background .3s; }
.ob-step-line.done { background: var(--success); }

/* STEP CONTENT */
.ob-step { display: none; padding: 0 32px 28px; }
.ob-step.active { display: block; animation: fadeIn .2s ease; }
.ob-step-title { font-size: 18px; font-weight: 700; margin-bottom: 5px; }
.ob-step-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.6; }

/* CHECKLIST WIDGET */
.ob-checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.ob-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
}
.ob-check-item:hover { border-color: var(--amber); background: var(--amber-light); }
.ob-check-item.checked { border-color: var(--success); background: rgba(26,110,60,.06); }
.ob-check-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all .2s;
}
.ob-check-item.checked .ob-check-box { background: var(--green); border-color: var(--success); color: #000; }
.ob-check-label { flex: 1; font-size: 13.5px; font-weight: 500; }
.ob-check-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.ob-check-icon { font-size: 20px; }

/* PROGRESS BAR */
.ob-progress-wrap { margin-bottom: 20px; }
.ob-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.ob-progress-bar { height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
.ob-progress-fill { height: 100%; background: linear-gradient(90deg, var(--amber), var(--success)); border-radius: 3px; transition: width .5s cubic-bezier(.34,1.2,.64,1); }

.ob-footer { padding: 16px 32px 28px; display: flex; gap: 10px; align-items: center; }
.ob-skip { font-size: 12px; color: var(--text-muted); cursor: pointer; margin-right: auto; }
.ob-skip:hover { color: var(--text-dim); }

/* ── ONBOARDING TILES ────────────────────────────────────────── */
.ob-size-tile {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 8px; background: var(--surface2);
  border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: all .15s; user-select: none;
  text-align: center;
}
.ob-size-tile.selected,
.ob-size-tile:has(input:checked) {
  border-color: var(--amber); background: var(--amber-light);
}
.ob-size-icon { font-size: 22px; margin-bottom: 4px; }
.ob-size-lbl  { font-size: 12px; font-weight: 600; }

.ob-source-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; background: var(--surface2);
  border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: all .15s; user-select: none;
}
.ob-source-tile:hover   { border-color: var(--amber); background: var(--amber-light); }
.ob-source-tile.selected { border-color: var(--amber); background: var(--amber-light);
  box-shadow: 0 0 0 3px rgba(200,120,10,.15); }
.ob-source-icon { font-size: 22px; flex-shrink: 0; }
.ob-source-name { font-size: 13px; font-weight: 700; }

.ob-pay-tile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 13px 14px; background: var(--surface2);
  border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: all .15s; user-select: none;
}
.ob-pay-tile:hover { border-color: var(--amber); }
.ob-pay-active    { border-color: var(--success) !important; background: rgba(26,110,60,.06) !important; }
.ob-pay-check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; transition: all .2s;
  color: var(--text-muted);
}
.ob-pay-checked { background: var(--success); border-color: var(--success); color: #fff; }

/* PERSISTENT CHECKLIST WIDGET (dashboard) */
.setup-checklist {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.setup-progress-bar { height: 4px; background: var(--surface3); }
.setup-progress-fill { height: 100%; background: linear-gradient(90deg, var(--amber), var(--success)); transition: width .5s ease; }
.setup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.setup-item:last-child { border-bottom: none; }
.setup-item:hover { background: var(--card-hover); }
.setup-item.done { opacity: .6; }
.setup-check { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--border2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: all .2s; }
.setup-item.done .setup-check { background: var(--green); border-color: var(--success); color: #000; }
.setup-label { flex: 1; font-size: 13px; font-weight: 500; }
.setup-label.done { text-decoration: line-through; color: var(--text-muted); }
.setup-cta { font-size: 11px; color: var(--amber); font-weight: 600; }

/* ============================================================
   PHOTO CAPTURE — JOB FLOW
============================================================ */
.job-flow-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(6px);
  z-index: 1500;
  display: none;
  flex-direction: column;
}
.job-flow-overlay.open { display: flex; }
.jf-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.jf-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; flex: 1; }
.jf-body { flex: 1; overflow-y: auto; padding: 20px; max-width: 680px; margin: 0 auto; width: 100%; }
.jf-stages { display: flex; gap: 0; margin-bottom: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.jf-stage {
  flex: 1;
  padding: 11px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
}
.jf-stage:last-child { border-right: none; }
.jf-stage.active { background: var(--amber-light); color: var(--amber); }
.jf-stage.done { background: rgba(26,110,60,.08); color: var(--success); }
.jf-section-title { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }

/* PHOTO CAPTURE AREA */
.photo-capture-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px; }
.photo-capture-slot {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px dashed var(--border2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all .2s;
  background: var(--surface2);
  position: relative;
  overflow: hidden;
}
.photo-capture-slot:hover { border-color: var(--amber); background: var(--amber-light); }
.photo-capture-slot.filled { border-style: solid; border-color: var(--border); background: var(--surface3); }
.photo-capture-slot .slot-icon { font-size: 28px; }
.photo-capture-slot .slot-label { font-size: 11px; color: var(--text-dim); font-weight: 500; }
.photo-capture-slot .slot-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--green);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
}
.photo-capture-slot .slot-type {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

/* CAMERA PREVIEW */
.camera-preview {
  background: #000;
  border-radius: 14px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.camera-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.camera-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border-color: var(--amber);
  border-style: solid;
}
.cc-tl { top: 14px; left: 14px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.cc-tr { top: 14px; right: 14px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.cc-bl { bottom: 14px; left: 14px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.cc-br { bottom: 14px; right: 14px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
.shutter-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255,255,255,.4);
  cursor: pointer;
  transition: all .15s;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.shutter-btn:hover { transform: translateX(-50%) scale(1.08); }
.shutter-btn:active { transform: translateX(-50%) scale(.94); background: var(--yellow); }

/* CHECKLIST PANEL IN JOB FLOW */
.jf-checklist { background: var(--surface2); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.jf-check-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
.jf-check-item:hover { background: var(--surface3); }
.jf-check-item:last-child { border-bottom: none; }
.jf-check { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--border2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: all .2s; }
.jf-check.done { background: var(--green); border-color: var(--success); color: #000; }
.jf-check-text { flex: 1; font-size: 13px; }
.jf-check-text.done { text-decoration: line-through; color: var(--text-muted); }

/* ============================================================
   PAYMENTS / STRIPE INTEGRATION
============================================================ */
.payment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: all .2s;
}
.payment-card:hover { border-color: var(--border2); }
.payment-methods { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.pm-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.pm-card:hover { border-color: var(--amber); transform: translateY(-1px); }
.pm-card.connected { border-color: var(--success); background: rgba(26,110,60,.06); }
.pm-card.connected::after { content: '✓ Connected'; display: block; font-size: 10px; font-weight: 700; color: var(--success); margin-top: 6px; }
.pm-icon { font-size: 28px; margin-bottom: 8px; }
.pm-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.pm-desc { font-size: 11px; color: var(--text-dim); }
.stripe-connect-btn {
  background: linear-gradient(135deg, #635bff, #7c6fff);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all .2s;
  width: 100%;
  justify-content: center;
  margin-bottom: 12px;
}
.stripe-connect-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,91,255,.4); }
.stripe-connect-btn.connected { background: linear-gradient(135deg, var(--success), #16a34a); }
.pay-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.pay-link-item:last-child { border-bottom: none; }
.pay-link-amt { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--amber); font-weight: 500; }
.pay-link-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.pls-sent { background: rgba(24,84,160,.12); color: var(--blue); }
.pls-paid { background: rgba(26,110,60,.12); color: var(--success); }
.pls-viewed { background: rgba(200,120,10,.12); color: var(--amber); }
.fee-callout {
  background: var(--amber-light);
  border: 1px solid rgba(200,120,10,.2);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 16px;
  line-height: 1.6;
}
.fee-callout strong { color: var(--amber); }

/* STREAK BANNER */
.streak-banner {
  background: linear-gradient(135deg, rgba(200,120,10,.12), rgba(168,85,0,.08));
  border: 1px solid rgba(200,120,10,.2);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all .2s;
}
.streak-banner:hover { border-color: rgba(200,120,10,.4); }
.streak-flame { font-size: 32px; line-height: 1; }
.streak-text { flex: 1; }
.streak-title { font-weight: 700; font-size: 15px; color: var(--amber); }
.streak-sub { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.streak-cta { font-size: 12px; font-weight: 600; color: var(--amber); white-space: nowrap; }
</style>
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore-compat.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
// Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyAP1yEu1ihkiSmywtg2YVW_TiYIvkxv6FM",
  authDomain: "amp-crm-48545.firebaseapp.com",
  projectId: "amp-crm-48545",
  storageBucket: "amp-crm-48545.firebasestorage.app",
  messagingSenderId: "337727872340",
  appId: "1:337727872340:web:ead43eeb856f24b1c0fcc1"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();

// Auth state observer
let currentUser = null;
auth.onAuthStateChanged(async (user) => {
  currentUser = user;
  if (user) {
    console.log('User logged in:', user.email);
    await loadUserData(user.uid);
    flash('✅ Logged in as ' + user.email);
  } else {
    console.log('No user logged in');
  }
});

// Load user data from Firestore
async function loadUserData(uid) {
  try {
    const doc = await db.collection('users').doc(uid).get();
    if (doc.exists) {
      const data = doc.data();
      if (data.clients) { clients.splice(0, clients.length, ...data.clients); renderClients(); }
      if (data.jobs) { jobs.splice(0, jobs.length, ...data.jobs); renderJobs(); }
      if (data.invoices) { invoices.splice(0, invoices.length, ...data.invoices); renderInvoices(); }
      if (data.clientProfiles) { Object.assign(clientProfiles, data.clientProfiles); }
      if (data.materials) { materials.splice(0, materials.length, ...data.materials); }
      if (data.brand) { Object.assign(brand, data.brand); applyBrandToApp(); }
      flash('📥 Data loaded from cloud');
    } else {
      await saveUserData(uid);
      flash('☁️ Data synced to cloud');
    }
  } catch(e) { console.warn('Load error:', e); }
}

// Save user data to Firestore
async function saveUserData(uid) {
  if (!uid) return;
  try {
    await db.collection('users').doc(uid).set({
      clients, jobs, invoices, clientProfiles, materials, brand,
      updatedAt: firebase.firestore.FieldValue.serverTimestamp()
    }, { merge: true });
  } catch(e) { console.warn('Save error:', e); }
}

// Auto-save on data changes
const originalPersist = persistData;
persistData = function() {
  originalPersist();
  if (currentUser) { saveUserData(currentUser.uid); }
};

// Auth functions
async function signup(email, password) {
  try {
    await auth.createUserWithEmailAndPassword(email, password);
    // Clear sample data for new user - start fresh!
    localStorage.removeItem('amp_jobs');
    localStorage.removeItem('amp_clients');
    localStorage.removeItem('amp_invoices');
    localStorage.removeItem('amp_permits');
    localStorage.removeItem('amp_tasks');
    flash('🎉 Account created!');
    return true;
  } catch(e) { flash('Error: ' + e.message); return false; }
}

async function login(email, password) {
  try {
    await auth.signInWithEmailAndPassword(email, password);
    flash('✅ Welcome back!');
    return true;
  } catch(e) { flash('Error: ' + e.message); return false; }
}

async function logout() { await auth.signOut(); flash('👋 Logged out'); }
</script>
</head>
<body>
<div class="app-shell">

<!-- SIDEBAR -->
<aside class="sidebar">
  <div class="logo-area" id="sidebar-logo-area">
    <div id="brand-logo-slot" onclick="openBrandSettings()" style="cursor:pointer;flex:1;min-width:0" title="Click to customize branding">
      <div class="logo-mark" id="brand-name-display">⚡ Amp</div>
      <div class="logo-sub" id="brand-tagline-display">CRM for Electrical Contractors</div>
    </div>
    <div style="display:flex;align-items:center;gap:8px">
      <span class="brand-badge" onclick="openBrandSettings()" title="Customize branding">🎨</span>
      <div class="theme-toggle" onclick="toggleTheme()" title="Toggle light/dark">
        <span class="theme-icon icon-moon">🌙</span>
        <span class="theme-icon icon-sun">☀️</span>
      </div>
    </div>
  </div>
  <nav class="nav">
    <div class="nav-section">
      <div class="nav-item active" onclick="nav('dashboard',this)" id="nav-dashboard"><span class="nav-icon">📊</span> Dashboard</div>
      <div class="nav-item" onclick="nav('work',this)" id="nav-work"><span class="nav-icon">🔧</span> Jobs <span class="nav-badge" id="nav-work-badge">8</span></div>
      <div class="nav-item" onclick="nav('clients',this)" id="nav-clients"><span class="nav-icon">👥</span> Clients</div>
      <div class="nav-item" onclick="nav('money',this)" id="nav-money"><span class="nav-icon">💰</span> Billing</div>
      <div class="nav-item" onclick="nav('field',this)" id="nav-field"><span class="nav-icon">📋</span> Jobsite</div>
      <div class="nav-item" onclick="nav('reports',this)" id="nav-reports"><span class="nav-icon">📈</span> Reports</div>
      <div class="nav-item" onclick="nav('team',this)" id="nav-team"><span class="nav-icon">👷</span> Crew</div>
      <div class="nav-item" onclick="nav('quote',this)" id="nav-quote"><span class="nav-icon">📝</span> Quick Quote</div>
    </div>
    <div class="nav-section" style="margin-top:auto;padding-top:8px;border-top:1px solid var(--border)">
      <div class="nav-item" onclick="nav('tasks',this)" id="nav-tasks"><span class="nav-icon">✅</span> Tasks <span class="nav-badge nb-b" id="tasks-nav-badge">5</span></div>
      <div class="nav-item" onclick="toggleNotif()"><span class="nav-icon">🔔</span> Notifications <span class="nav-badge" id="notif-nav-badge">4</span></div>
      <div class="nav-item" onclick="nav('settings',this)" id="nav-settings"><span class="nav-icon">⚙️</span> Settings</div>
    </div>
  </nav>
  <div class="sidebar-bottom">
    <div class="user-pill" onclick="nav('settings',document.getElementById('nav-settings'))" style="cursor:pointer" title="Account & Settings">
      <div class="user-av" id="user-av-initials">MR</div>
      <div style="flex:1">
        <div style="font-size:13px;font-weight:600" id="user-display-name">Mike Rivera</div>
        <div style="font-size:11px;color:var(--text-muted)" id="user-display-role">Electrical Contractor</div>
      </div>
      <span style="font-size:16px;color:var(--text-muted)">›</span>
    </div>
  </div>
</aside>

<!-- MAIN -->
<div class="main">
  <div class="topbar">
    <div style="display:flex;align-items:center;gap:12px">
      <div class="page-title" id="page-title">Dashboard</div>
      <div class="view-mode-badge" onclick="toggleFieldMode()" id="field-badge">📱 Field Mode</div>
    </div>
    <div class="topbar-right">
      <div class="search-wrap" style="position:relative">
        <input class="search-box" id="global-search" type="text" placeholder="🔍  Search clients, jobs, invoices..." autocomplete="off" oninput="globalSearch(this.value)" onfocus="if(this.value.length>1)globalSearch(this.value)" style="width:260px">
        <div class="search-results" id="search-results"></div>
      </div>
      <button class="btn btn-ghost btn-sm" onclick="toggleNotif()">🔔 <span style="background:var(--orange);color:#fff;border-radius:10px;padding:0 5px;font-size:10px">4</span></button>
      <button class="btn btn-primary" onclick="openModal('new-job')">+ New Job</button>
    </div>
  </div>

  <div class="content">

    <!-- DASHBOARD -->
    <div class="view active" id="view-dashboard">

      <!-- STREAK BANNER -->
      <div class="streak-banner" onclick="nav('reports',document.getElementById('nav-reports'))">
        <div class="streak-flame" id="dash-streak-icon">📈</div>
        <div class="streak-text">
          <div class="streak-title" id="dash-streak-title">Loading...</div>
          <div class="streak-sub" id="dash-streak-sub">calculating...</div>
        </div>
        <div class="streak-cta">View Report →</div>
      </div>

      <!-- KPI CARDS -->
      <div class="stats-grid" style="margin-bottom:14px">
        <div class="kpi kpi-y" onclick="nav('work',document.getElementById('nav-work'))">
          <div class="kpi-label">Active Jobs</div>
          <div class="kpi-value" id="kpi-active-jobs">8</div>
          <div class="kpi-change up" id="kpi-active-jobs-sub">↑ 2 this week</div>
        </div>
        <div class="kpi kpi-o" onclick="nav('work',document.getElementById('nav-work'))">
          <div class="kpi-label">This Week</div>
          <div class="kpi-value" id="kpi-week-jobs">—</div>
          <div class="kpi-change neu" id="kpi-week-jobs-sub">scheduled</div>
        </div>
        <div class="kpi kpi-p" onclick="nav('clients',document.getElementById('nav-clients'))">
          <div class="kpi-label">Total Clients</div>
          <div class="kpi-value" id="kpi-clients">6</div>
          <div class="kpi-change up" id="kpi-clients-sub">↑ 1 this month</div>
        </div>
        <div class="kpi kpi-g" onclick="nav('money',document.getElementById('nav-money'))">
          <div class="kpi-label">Revenue MTD</div>
          <div class="kpi-value" id="kpi-revenue">$24,850</div>
          <div class="kpi-change up">↑ 12% vs last mo.</div>
        </div>
        <div class="kpi kpi-o" onclick="nav('money',document.getElementById('nav-money'))">
          <div class="kpi-label">Outstanding AR</div>
          <div class="kpi-value" id="kpi-ar">$9,200</div>
          <div class="kpi-change dn" id="kpi-ar-sub">3 open invoices</div>
        </div>
        <div class="kpi kpi-b" onclick="nav('field',document.getElementById('nav-field'))">
          <div class="kpi-label">Quote Pipeline</div>
          <div class="kpi-value" id="kpi-pipeline">$15k</div>
          <div class="kpi-change neu" id="kpi-pipeline-sub">2 open quotes</div>
        </div>
        <div class="kpi kpi-g" onclick="nav('work',document.getElementById('nav-work'));setTimeout(()=>switchHub('work','recurring',document.querySelector('#work-tabs .hub-tab:nth-child(3)')),100)" style="cursor:pointer">
          <div class="kpi-label">Recurring ARR</div>
          <div class="kpi-value" id="kpi-arr">—</div>
          <div class="kpi-change up" id="kpi-arr-sub">— active contracts</div>
        </div>
      </div>

      <!-- QUICK ACTIONS -->
      <div style="display:flex;gap:10px;margin:0 0 16px 0;flex-wrap:wrap">
        <button class="btn btn-primary" style="flex:1;min-width:120px;padding:10px 14px;font-size:13px;font-weight:600" onclick="closeAllModals();setTimeout(()=>openModal('new-job'),50)">
          ➕ New Job
        </button>
        <button class="btn" style="flex:1;min-width:120px;padding:10px 14px;font-size:13px;font-weight:600;background:var(--surface2);border:1px solid var(--border)" onclick="closeAllModals();setTimeout(()=>openModal('new-client'),50)">
          👤 New Client
        </button>
        <button class="btn" style="flex:1;min-width:120px;padding:10px 14px;font-size:13px;font-weight:600;background:var(--surface2);border:1px solid var(--border)" onclick="nav('money',document.getElementById('nav-money'));setTimeout(()=>switchHub('money','quote',document.querySelector('#money-tabs .hub-tab:nth-child(3)')),200)">
          📝 New Quote
        </button>
        <button class="btn" style="flex:1;min-width:120px;padding:10px 14px;font-size:13px;font-weight:600;background:var(--surface2);border:1px solid var(--border)" onclick="closeAllModals();setTimeout(()=>openModal('new-invoice'),50)">
          💰 New Invoice
        </button>
      </div>

      <!-- MAIN DASH GRID: 3 col layout -->
      <div style="display:grid;grid-template-columns:1fr 1fr 320px;gap:14px;align-items:start">

        <!-- COL 1: Today's Jobs + Permits -->
        <div>
          <div class="card" style="margin-bottom:14px">
            <div class="card-header">
              <div class="card-title" id="dash-today-title">Today's Jobs</div>
              <button class="btn btn-ghost btn-sm" onclick="nav('work',document.getElementById('nav-work'));setTimeout(()=>switchHub('work','schedule',document.querySelector('#work-tabs .hub-tab:nth-child(2)')),100)">Schedule →</button>
            </div>
            <table class="data-table">
              <thead><tr><th>Client</th><th>Type</th><th>Time</th><th>Tech</th><th>Status</th><th></th></tr></thead>
              <tbody id="dash-today"></tbody>
            </table>
          </div>

          <div class="card">
            <div class="card-header">
              <div class="card-title">Permits Requiring Action</div>
              <button class="btn btn-ghost btn-sm" onclick="nav('field',document.getElementById('nav-field'))">All Permits →</button>
            </div>
            <div id="dash-permits"></div>
          </div>
        </div>

        <!-- COL 2: Unpaid Invoices + Quote Pipeline -->
        <div>
          <div class="card" style="margin-bottom:14px">
            <div class="card-header">
              <div class="card-title">Unpaid Invoices</div>
              <button class="btn btn-ghost btn-sm" onclick="nav('money',document.getElementById('nav-money'))">All Invoices →</button>
            </div>
            <div id="dash-unpaid"></div>
          </div>

          <div class="card" style="margin-bottom:14px">
            <div class="card-header">
              <div class="card-title">Quote Pipeline</div>
              <button class="btn btn-ghost btn-sm" onclick="nav('money',document.getElementById('nav-money'));setTimeout(()=>switchHub('money','quote',document.querySelector('#money-tabs .hub-tab:nth-child(3)')),100)">All Quotes →</button>
            </div>
            <div id="dash-quotes"></div>
          </div>

          <div class="card" id="dash-stock-card">
            <div class="card-header">
              <div class="card-title">📦 Stock Alerts</div>
              <button class="btn btn-ghost btn-sm" onclick="nav('field',document.getElementById('nav-field'));setTimeout(()=>switchHub('field','materials',document.querySelectorAll('#field-tabs .hub-tab')[3]),100)">View All →</button>
            </div>
            <div id="dash-stock-list"><div style="padding:14px 16px;font-size:13px;color:var(--text-muted)">Checking stock...</div></div>
          </div>
        </div>

        <!-- COL 3: Action Required (priority triage) -->
        <div>
          <div class="card" style="border:1px solid rgba(200,120,10,.25);background:linear-gradient(180deg,var(--amber-light) 0%,var(--surface) 120px)">
            <div class="card-header" style="border-bottom:1px solid rgba(200,120,10,.2)">
              <div>
                <div class="card-title">⚡ Action Required</div>
                <div style="font-size:11px;color:var(--text-muted);margin-top:1px">Ranked by urgency &amp; dollar impact</div>
              </div>
              <span id="dash-action-count" style="font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--amber)">0</span>
            </div>
            <div id="dash-actions"></div>
          </div>
        </div>

      </div>
    </div>

    <!-- WORK HUB: Jobs + Schedule + Recurring -->
    <div class="view" id="view-work">
      <div class="hub-tabs" id="work-tabs">
        <div class="hub-tab active" onclick="switchHub('work','jobs',this)">🔧 Jobs <span class="nav-badge" style="margin-left:4px" id="work-jobs-badge">8</span></div>
        <div class="hub-tab" onclick="switchHub('work','schedule',this)">📅 Schedule</div>
        <div class="hub-tab" onclick="switchHub('work','recurring',this)">🔄 Recurring</div>
      </div>
      <div class="hub-panel active" id="work-panel-jobs"></div>
      <div class="hub-panel" id="work-panel-schedule"></div>
      <div class="hub-panel" id="work-panel-recurring"></div>
    </div>

    <!-- BILLING HUB: Invoices + Payments + Estimates -->
    <div class="view" id="view-money">
      <div class="hub-tabs" id="money-tabs">
        <div class="hub-tab active" onclick="switchHub('money','invoices',this)">🧾 Invoices</div>
        <div class="hub-tab" onclick="switchHub('money','payments',this)">💳 Payments</div>
        <div class="hub-tab" onclick="switchHub('money','quote',this)">✏️ Estimates</div>
      </div>
      <div class="hub-panel active" id="money-panel-invoices"></div>
      <div class="hub-panel" id="money-panel-payments"></div>
      <div class="hub-panel" id="money-panel-quote"></div>
    </div>

    <!-- JOBSITE HUB: Permits + Price Book + Tasks + Materials -->
    <div class="view" id="view-field">
      <div class="hub-tabs" id="field-tabs">
        <div class="hub-tab active" onclick="switchHub('field','permits',this)">📋 Permits <span class="nav-badge nb-y" style="margin-left:4px">3</span></div>
        <div class="hub-tab" onclick="switchHub('field','pricebook',this)">💡 Price Book</div>
        <div class="hub-tab" onclick="switchHub('field','tasks',this)">✅ Tasks <span class="nav-badge nb-b" style="margin-left:4px">5</span></div>
        <div class="hub-tab" onclick="switchHub('field','materials',this)">📦 Materials <span class="nav-badge nb-y" id="mat-low-badge" style="margin-left:4px;display:none">!</span></div>
      </div>
      <div class="hub-panel active" id="field-panel-permits"></div>
      <div class="hub-panel" id="field-panel-pricebook"></div>
      <div class="hub-panel" id="field-panel-tasks"></div>
      <div class="hub-panel" id="field-panel-materials"></div>
    </div>

    <!-- REPORTS HUB: Analytics + Profitability -->
    <div class="view" id="view-reports">
      <div class="hub-tabs" id="reports-tabs">
        <div class="hub-tab active" onclick="switchHub('reports','analytics',this)">📊 Analytics</div>
        <div class="hub-tab" onclick="switchHub('reports','profitability',this)">📈 Profitability</div>
      </div>
      <div class="hub-panel active" id="reports-panel-analytics"></div>
      <div class="hub-panel" id="reports-panel-profitability"></div>
    </div>

    <!-- TEAM HUB: Performance + Schedule -->
    <div class="view" id="view-team">
      <div class="hub-tabs" id="team-tabs">
        <div class="hub-tab active" onclick="switchHub('team','performance',this)">🏆 Performance</div>
        <div class="hub-tab" onclick="switchHub('team','techsched',this)">📅 This Week</div>
      </div>
      <div class="hub-panel active" id="team-panel-performance"></div>
      <div class="hub-panel" id="team-panel-techsched"></div>
    </div>

    <!-- SETTINGS VIEW -->
    <div class="view" id="view-settings">
      <div style="max-width:720px">

        <!-- PROFILE CARD -->
        <div class="card" style="margin-bottom:16px">
          <div class="card-header">
            <div class="card-title">👤 Your Profile</div>
            <button class="btn btn-ghost btn-sm" onclick="saveSettingsProfile()">Save Changes</button>
          </div>
          <div style="padding:20px">
            <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px">
              <div id="settings-avatar" style="width:60px;height:60px;border-radius:14px;background:var(--amber-light);color:var(--amber);font-family:'Bebas Neue',sans-serif;font-size:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer" onclick="settingsPhotoUpload()" title="Change photo">MR</div>
              <div>
                <div style="font-size:15px;font-weight:700" id="settings-name-display">Your Name</div>
                <div style="font-size:12px;color:var(--text-muted)" id="settings-role-display">Owner · Electrical Contractor</div>
                <div style="font-size:11px;color:var(--amber);margin-top:2px">⭐ Amp Pro Plan</div>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group"><label class="form-label">Full Name</label><input class="form-input" id="sp-name" value=""></div>
              <div class="form-group"><label class="form-label">Title / Role</label><input class="form-input" id="sp-role" value="Owner / Operations Manager"></div>
            </div>
            <div class="form-row">
              <div class="form-group"><label class="form-label">Phone</label><input class="form-input" id="sp-phone" value=""></div>
              <div class="form-group"><label class="form-label">Email</label><input class="form-input" id="sp-email" value=""></div>
            </div>
          </div>
        </div>

        <!-- BUSINESS / BRANDING -->
        <div class="card" style="margin-bottom:16px">
          <div class="card-header">
            <div class="card-title">🎨 Business &amp; Branding</div>
            <button class="btn btn-ghost btn-sm" onclick="openBrandSettings()">Open Brand Editor →</button>
          </div>
          <div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px">
            <div>
              <div style="font-size:11px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px">Current Branding</div>
              <div style="display:flex;align-items:center;gap:10px;padding:12px;background:var(--surface2);border-radius:10px">
                <span id="settings-brand-emoji" style="font-size:22px">⚡</span>
                <div>
                  <div style="font-size:14px;font-weight:700" id="settings-brand-name">Rivera Electric LLC</div>
                  <div style="font-size:11px;color:var(--text-muted)" id="settings-brand-tag">Licensed · Insured · Reliable</div>
                </div>
              </div>
            </div>
            <div>
              <div style="font-size:11px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px">Accent Color</div>
              <div style="display:flex;align-items:center;gap:10px;padding:12px;background:var(--surface2);border-radius:10px">
                <div id="settings-brand-swatch" style="width:32px;height:32px;border-radius:8px;background:#C8780A"></div>
                <span id="settings-brand-colorname" style="font-size:13px">Copper Amber</span>
              </div>
            </div>
          </div>
        </div>

        <!-- NOTIFICATIONS PREFS -->
        <div class="card" style="margin-bottom:16px">
          <div class="card-header"><div class="card-title">🔔 Notification Preferences</div></div>
          <div style="padding:20px">
            <div style="display:grid;gap:14px">
              <div id="notif-prefs-list"></div>
            </div>
          </div>
        </div>

        <!-- INTEGRATIONS -->
        <div class="card" style="margin-bottom:16px">
          <div class="card-header"><div class="card-title">🔌 Integrations</div></div>
          <div style="padding:20px;display:grid;gap:12px">
            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--surface2);border-radius:10px">
              <div style="display:flex;align-items:center;gap:12px"><span style="font-size:22px">💳</span><div><div style="font-size:13px;font-weight:600">Stripe Payments</div><div style="font-size:11px;color:var(--text-muted)">Card payments via Stripe</div></div></div>
              <button class="btn btn-primary btn-sm" onclick="nav('money',document.getElementById('nav-money'));setTimeout(()=>switchHub('money','payments',document.querySelector('#money-tabs .hub-tab:nth-child(2)')),100)">Connect →</button>
            </div>
            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--surface2);border-radius:10px">
              <div style="display:flex;align-items:center;gap:12px"><span style="font-size:22px">📊</span><div><div style="font-size:13px;font-weight:600">QuickBooks Online</div><div style="font-size:11px;color:var(--text-muted)">Sync invoices automatically</div></div></div>
              <button class="btn btn-ghost btn-sm" onclick="flash('QuickBooks integration coming soon — check back in v18 ✓')">Coming Soon</button>
            </div>
            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--surface2);border-radius:10px">
              <div style="display:flex;align-items:center;gap:12px"><span style="font-size:22px">📅</span><div><div style="font-size:13px;font-weight:600">Google Calendar</div><div style="font-size:11px;color:var(--text-muted)">Two-way job sync</div></div></div>
              <button class="btn btn-ghost btn-sm" onclick="flash('Google Calendar sync coming soon — check back in v18 ✓')">Coming Soon</button>
            </div>
            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--surface2);border-radius:10px">
              <div style="display:flex;align-items:center;gap:12px"><span style="font-size:22px">💙</span><div><div style="font-size:13px;font-weight:600">Zelle</div><div style="font-size:11px;color:var(--success)">✓ Connected — <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c313537391c2e352a392e3d3930393f282e353f723f3331">[email&#160;protected]</a></div></div></div>
              <button class="btn btn-ghost btn-sm" onclick="openZelleSettings()">Manage</button>
            </div>
          </div>
        </div>

        <!-- PLAN & DATA -->
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
          <div class="card">
            <div class="card-header"><div class="card-title">⚡ Your Plan</div></div>
            <div style="padding:18px">
              <div style="font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--amber)">Amp Pro</div>
              <div style="font-size:12px;color:var(--text-muted);margin-bottom:14px">$49/mo · Billed monthly</div>
              <div style="font-size:12px;color:var(--text-dim);margin-bottom:6px">✓ Unlimited jobs &amp; clients</div>
              <div style="font-size:12px;color:var(--text-dim);margin-bottom:6px">✓ 2 team members</div>
              <div style="font-size:12px;color:var(--text-dim);margin-bottom:6px">✓ Stripe payments</div>
              <div style="font-size:12px;color:var(--text-dim);margin-bottom:14px">✓ Full price book</div>
              <button class="btn btn-ghost btn-sm" style="width:100%;justify-content:center" onclick="openUpgradeModal()">Upgrade Plan</button>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><div class="card-title">📦 Data &amp; Export</div></div>
            <div style="padding:18px;display:grid;gap:10px">
              <button class="btn btn-primary btn-sm" style="justify-content:flex-start" onclick="openImportWizard()">⬆ Import Data</button>
              <div style="border-top:1px solid var(--border);padding-top:10px;margin-top:2px;display:grid;gap:8px">
                <button class="btn btn-ghost btn-sm" style="justify-content:flex-start" onclick="exportData('clients')">⬇ Export Clients (CSV)</button>
                <button class="btn btn-ghost btn-sm" style="justify-content:flex-start" onclick="exportData('jobs')">⬇ Export Jobs (CSV)</button>
                <button class="btn btn-ghost btn-sm" style="justify-content:flex-start" onclick="exportData('invoices')">⬇ Export Invoices (CSV)</button>
                <button class="btn btn-ghost btn-sm" style="justify-content:flex-start" onclick="exportData('quotes')">⬇ Export Quotes (CSV)</button>
              </div>
              <div style="border-top:1px solid var(--border);padding-top:10px;margin-top:2px">
                <button class="btn btn-sm" style="justify-content:flex-start;width:100%;color:var(--danger);border-color:rgba(239,68,68,.2);background:rgba(239,68,68,.05)" onclick="clearAllData()">🗑 Clear All Data</button>
              </div>
            </div>
          </div>
        </div>

        <!-- HELP -->
        <div class="card" style="margin-top:14px">
          <div style="padding:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px">
            <div>
              <div style="font-size:14px;font-weight:700">Help &amp; Support</div>
              <div style="font-size:12px;color:var(--text-muted)">Documentation, video guides, and direct support</div>
            </div>
            <div style="display:flex;gap:8px;flex-wrap:wrap">
              <button class="btn btn-ghost btn-sm" onclick="window.open('https://amp-crm-48545.web.app','_blank')">📖 Docs</button>
              <button class="btn btn-ghost btn-sm" onclick="window.open('https://amp-crm-48545.web.app','_blank')">🎥 Tutorials</button>
              <button class="btn btn-primary btn-sm" onclick="alert('For support, email: support@ampcrm.io')">💬 Live Chat</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- SCHEDULE -->
    <div class="view" id="view-schedule">
      <div style="display:grid;grid-template-columns:1fr 270px;gap:14px">
        <div class="card">
          <div class="card-header">
            <button class="btn btn-ghost btn-sm" onclick="shiftWeek(-1)">‹ Prev</button>
            <div class="card-title" id="schedule-week-label">Feb 17 – 23, 2026</div>
            <button class="btn btn-ghost btn-sm" onclick="shiftWeek(1)">Next ›</button>
          </div>
          <div class="cal-hdr"><div class="cal-dl">Sun</div><div class="cal-dl">Mon</div><div class="cal-dl">Tue</div><div class="cal-dl">Wed</div><div class="cal-dl">Thu</div><div class="cal-dl">Fri</div><div class="cal-dl">Sat</div></div>
          <div class="cal-grid" id="cal-grid"></div>
        </div>
        <div>
          <div class="card" style="margin-bottom:14px"><div class="card-header"><div class="card-title">Unscheduled</div></div><div id="unscheduled"></div></div>
          <div class="card">
            <div class="card-header"><div class="card-title">Appointment Reminders</div></div>
            <div style="padding:14px">
              <p style="font-size:12.5px;color:var(--text-dim);margin-bottom:12px">Send reminders to today's clients before their appointments.</p>
              <button class="btn btn-warn btn-sm" style="width:100%;justify-content:center;margin-bottom:8px" onclick="bulkSMSToday()">📱 SMS All Today</button>
              <button class="btn btn-ghost btn-sm" style="width:100%;justify-content:center" onclick="bulkEmailReminders()">📧 Email Reminders</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- JOBS -->
    <div class="view" id="view-jobs">
      <div class="jobs-toolbar">
        <div style="display:flex;gap:6px;align-items:center;margin-right:8px">
          <button class="btn btn-ghost btn-sm" style="background:var(--amber-light);color:var(--amber);font-weight:600" onclick="setJobQuickFilter('today')">Today</button>
          <button class="btn btn-ghost btn-sm" onclick="setJobQuickFilter('week')">This Week</button>
          <button class="btn btn-ghost btn-sm" onclick="setJobQuickFilter('overdue')">Overdue</button>
          <button class="btn btn-ghost btn-sm" onclick="setJobQuickFilter('inprogress')">In Progress</button>
          <button class="btn btn-ghost btn-sm" onclick="setJobQuickFilter('fromQuote')" title="Jobs converted from accepted quotes">📝 From Quote</button>
        </div>
        <input class="form-input" id="jobs-search" style="width:220px;min-height:40px" placeholder="Search client, job, address, description..." oninput="filterJobsSearch()">
        <select class="form-input" id="jobs-status-filter" style="width:auto;min-height:40px;padding:7px 12px;font-size:13px" onchange="filterJobsSearch()">
          <option value="">All Statuses</option>
          <option value="scheduled">Scheduled</option>
          <option value="inprogress">In Progress</option>
          <option value="complete">Complete</option>
          <option value="pending">Pending</option>
          <option value="cancelled">Cancelled</option>
          <option value="draft">Draft</option>
        </select>
        <select class="form-input" id="jobs-tech-filter" style="width:auto;min-height:40px;padding:7px 12px;font-size:13px" onchange="filterJobsSearch()">
          <option value="">All Techs</option>
        </select>
        <select class="form-input" id="jobs-type-filter" style="width:auto;min-height:40px;padding:7px 12px;font-size:13px" onchange="filterJobsSearch()">
          <option value="">All Types</option>
          <option value="panel">Panel Upgrade</option>
          <option value="ev">EV Charger</option>
          <option value="svc">Service Call</option>
          <option value="inst">Commercial Install</option>
          <option value="safe">Safety Inspection</option>
          <option value="outlets">Outlets & Wiring</option>
          <option value="lighting">Lighting</option>
        </select>
        <select class="form-input" id="jobs-sort" style="width:auto;min-height:40px;padding:7px 12px;font-size:13px" onchange="filterJobsSearch()">
          <option value="date-desc">Sort: Newest</option>
          <option value="date-asc">Sort: Oldest</option>
          <option value="value-desc">Sort: Highest Value</option>
          <option value="value-asc">Sort: Lowest Value</option>
          <option value="client-asc">Sort: Client A-Z</option>
          <option value="status-asc">Sort: Status</option>
        </select>
        <input class="form-input" id="jobs-date-from" type="date" style="width:auto;min-height:40px" title="From date" onchange="filterJobsSearch()">
        <input class="form-input" id="jobs-date-to" type="date" style="width:auto;min-height:40px" title="To date" onchange="filterJobsSearch()">
        <button class="btn btn-ghost btn-sm" onclick="clearJobFilters()">✕ Clear</button>
        <button class="btn btn-ghost btn-sm" onclick="exportJobsCSV()">📥 Export</button>
        <button class="btn btn-primary" style="margin-left:auto" onclick="openModal('new-job')">+ New Job</button>
      </div>
      <div id="jobs-status-bar" style="display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap">
        <div style="background:var(--surface2);padding:6px 12px;border-radius:6px;font-size:12px"><span style="color:var(--text-muted)">Pending:</span> <strong id="jobs-count-pending">0</strong></div>
        <div style="background:var(--surface2);padding:6px 12px;border-radius:6px;font-size:12px"><span style="color:var(--info)">Scheduled:</span> <strong id="jobs-count-scheduled">0</strong></div>
        <div style="background:var(--surface2);padding:6px 12px;border-radius:6px;font-size:12px"><span style="color:var(--warning)">In Progress:</span> <strong id="jobs-count-inprogress">0</strong></div>
        <div style="background:var(--surface2);padding:6px 12px;border-radius:6px;font-size:12px"><span style="color:var(--success)">Complete:</span> <strong id="jobs-count-complete">0</strong></div>
      </div>
      <div class="card"><table class="data-table"><thead><tr><th>Job #</th><th>Client</th><th>Type</th><th>Tech</th><th>Date</th><th>Value</th><th>Status</th><th></th></tr></thead><tbody id="jobs-table"></tbody></table></div>
    </div>

    <!-- CLIENTS -->
    <div class="view" id="view-clients">
      <div style="display:flex;gap:9px;margin-bottom:14px">
        <input class="form-input" style="flex:1" type="text" placeholder="Search clients..." oninput="filterClients(this.value)">
        <select class="form-input" style="width:auto;min-height:40px;padding:7px 12px;font-size:13px" onchange="sortClients(this.value)">
          <option value="name">Sort: A-Z</option>
          <option value="name-desc">Sort: Z-A</option>
          <option value="recent">Sort: Recent</option>
          <option value="value">Sort: Value</option>
        </select>
        <button class="btn btn-primary" onclick="openModal('new-client')">+ Add Client</button>
      </div>
      <div class="client-toolbar">
        <div class="seg-btn active" onclick="setClientFilter('all',this)">All Clients</div>
        <div class="seg-btn" onclick="setClientFilter('residential',this)">Residential</div>
        <div class="seg-btn" onclick="setClientFilter('commercial',this)">Commercial</div>
        <div class="seg-btn" onclick="setClientFilter('at-risk',this)">⚠️ At Risk</div>
        <div class="seg-btn" onclick="setClientFilter('top',this)">⭐ Top Spenders</div>
        <div style="margin-left:auto">
          <button class="btn btn-ghost btn-sm" onclick="exportClientsCSV()">📥 Export</button>
          <button class="btn btn-ghost btn-sm" onclick="bulkARSMS()">📱 Bulk SMS</button>
        </div>
      </div>
      <div class="clients-grid" id="clients-grid"></div>
    </div>

    <!-- PERMITS -->
    <div class="view" id="view-permits">
      <div style="display:flex;gap:9px;margin-bottom:14px">
        <select class="form-input" style="width:auto;min-height:40px;padding:7px 12px;font-size:13px"><option>All Permits</option><option>Pending Inspection</option><option>Approved</option><option>Overdue</option></select>
        <button class="btn btn-primary" onclick="openModal('new-permit')">+ Log Permit</button>
      </div>
      <div class="permits-wrap" id="permits-grid"></div>
    </div>

    <!-- PRICE BOOK -->
    <div class="view" id="view-pricebook">
      <div class="card">
        <div class="card-header">
          <div>
            <div class="card-title">Price Book</div>
            <div style="font-size:11.5px;color:var(--text-muted);margin-top:2px">Pricing auto-adjusts for your state — tax on materials, regional labor rates</div>
          </div>
          <div style="display:flex;gap:6px;align-items:center">
            <button class="btn btn-ghost btn-sm" onclick="openPbStateModal()">🗺 Change State</button>
            <button class="btn btn-primary btn-sm" onclick="openModal('add-price')">+ Add Item</button>
          </div>
        </div>

        <!-- STATE BAR -->
        <div class="state-bar" id="pb-state-bar">
          <div class="state-select-wrap">
            <span class="state-flag" id="pb-state-flag">🏙️</span>
            <select class="form-input" id="pb-state-sel" style="width:auto;min-height:36px;padding:4px 10px;font-size:13px;font-weight:600" onchange="setPbState(this.value)">
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="HI">Hawaii</option>
              <option value="ID">Idaho</option>
              <option value="IL">Illinois</option>
              <option value="IN">Indiana</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NV">Nevada</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NM">New Mexico</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="ND">North Dakota</option>
              <option value="OH">Ohio</option>
              <option value="OK">Oklahoma</option>
              <option value="OR">Oregon</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="SD">South Dakota</option>
              <option value="TN">Tennessee</option>
              <option value="TX">Texas</option>
              <option value="UT">Utah</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WA">Washington</option>
              <option value="WV">West Virginia</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
            </select>
          </div>
          <div class="state-tax-badge" id="pb-tax-badge">📦 Materials tax: 6.25%</div>
          <div class="state-tax-badge" style="background:rgba(26,110,60,.1);color:var(--success);border-color:rgba(26,110,60,.2)" id="pb-labor-badge">⚡ Labor rate: $85–$135/hr</div>
          <div class="state-note" id="pb-state-note">IL: Sales tax on materials only. Labor is not taxed.</div>
          <div style="margin-left:auto;display:flex;gap:6px">
            <div class="state-pill active" onclick="setPbPriceMode('customer',this)">Customer Price</div>
            <div class="state-pill" onclick="setPbPriceMode('cost',this)">My Cost</div>
            <div class="state-pill" onclick="setPbPriceMode('margin',this)">Margin View</div>
          </div>
        </div>

        <!-- CATEGORY FILTER -->
        <div class="pb-cats" id="pb-cats">
          <div class="cat-chip active" onclick="setPbCat(this,'all')">All</div>
          <div class="cat-chip" onclick="setPbCat(this,'panel')">Panel & Service</div>
          <div class="cat-chip" onclick="setPbCat(this,'outlets')">Outlets & Switches</div>
          <div class="cat-chip" onclick="setPbCat(this,'wiring')">Wiring & Circuits</div>
          <div class="cat-chip" onclick="setPbCat(this,'lighting')">Lighting</div>
          <div class="cat-chip" onclick="setPbCat(this,'ev')">EV Charging</div>
          <div class="cat-chip" onclick="setPbCat(this,'hvac')">HVAC & Appliances</div>
          <div class="cat-chip" onclick="setPbCat(this,'safety')">Safety & Code</div>
          <div class="cat-chip" onclick="setPbCat(this,'outdoor')">Outdoor</div>
          <div class="cat-chip" onclick="setPbCat(this,'smart')">Smart Home</div>
          <div class="cat-chip" onclick="setPbCat(this,'commercial')">Commercial</div>
          <div class="cat-chip" onclick="setPbCat(this,'service')">Service Calls</div>
          <div class="cat-chip" onclick="setPbCat(this,'inspection')">Inspections</div>
          <div class="cat-chip" onclick="setPbCat(this,'other')">Other</div>
        </div>

        <div class="pb-head">
          <div class="pb-hc">Task / Service</div>
          <div class="pb-hc" style="text-align:right">Labor</div>
          <div class="pb-hc" style="text-align:right">Material</div>
          <div class="pb-hc" style="text-align:right">Tax</div>
          <div class="pb-hc" style="text-align:right;color:var(--amber)">Total</div>
          <div></div>
        </div>
        <div id="pb-rows"></div>
      </div>
    </div>

    <!-- INVOICES -->
    <div class="view" id="view-invoices">
      <!-- Summary bar -->
      <div class="billing-summary" id="inv-summary-bar">
        <div class="billing-stat">
          <div class="billing-stat-val" id="inv-stat-billed">$11,550</div>
          <div class="billing-stat-lbl">Billed MTD</div>
          <div class="billing-stat-sub" id="inv-stat-count">5 invoices</div>
        </div>
        <div class="billing-stat">
          <div class="billing-stat-val" style="color:var(--success)" id="inv-stat-collected">$6,920</div>
          <div class="billing-stat-lbl">Collected</div>
          <div class="billing-stat-sub" id="inv-stat-collect-pct">60% collection rate</div>
        </div>
        <div class="billing-stat">
          <div class="billing-stat-val" style="color:var(--warning)" id="inv-stat-outstanding">$4,400</div>
          <div class="billing-stat-lbl">Outstanding</div>
          <div class="billing-stat-sub" id="inv-stat-out-detail">3 open invoices</div>
        </div>
        <div class="billing-stat">
          <div class="billing-stat-val" style="color:var(--danger)" id="inv-stat-overdue">$280</div>
          <div class="billing-stat-lbl">Overdue</div>
          <div class="billing-stat-sub" id="inv-stat-overdue-detail">1 invoice — 61 days</div>
        </div>
      </div>

      <div class="card" style="overflow:hidden">
        <!-- Toolbar -->
        <div class="inv-toolbar">
          <button class="inv-filter-chip active" onclick="filterInvoices('all',this)">All</button>
          <button class="inv-filter-chip" onclick="filterInvoices('draft',this)">Drafts</button>
          <button class="inv-filter-chip" onclick="filterInvoices('sent',this)">Sent</button>
          <button class="inv-filter-chip" onclick="filterInvoices('viewed',this)">Viewed</button>
          <button class="inv-filter-chip danger" onclick="filterInvoices('overdue',this)">Overdue</button>
          <button class="inv-filter-chip" onclick="filterInvoices('paid',this)">Paid</button>
          <span style="flex:1"></span>
          <button class="btn btn-ghost btn-sm" onclick="printInvoicePrompt()">🖨 Export</button>
          <button class="btn btn-primary btn-sm" onclick="openModal('new-invoice')">+ New Invoice</button>
        </div>
        <!-- Column headers -->
        <div class="inv-row" style="min-height:36px;background:var(--surface2);cursor:default;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted)">
          <div class="inv-cell inv-num">Invoice #</div>
          <div class="inv-cell inv-client">Client</div>
          <div class="inv-cell inv-job">Job</div>
          <div class="inv-cell">Issued</div>
          <div class="inv-cell">Due</div>
          <div class="inv-cell inv-amount">Amount</div>
          <div class="inv-cell">Status</div>
          <div class="inv-cell"></div>
        </div>
        <div id="invoices-list"></div>
      </div>

      <!-- Slide-in invoice preview panel -->
      <div class="inv-preview-panel" id="inv-preview-panel">
        <div class="inv-preview-hdr">
          <div>
            <div style="font-size:16px;font-weight:700" id="pvw-num">INV-0088</div>
            <div style="font-size:12px;color:var(--text-dim);margin-top:2px" id="pvw-client-job">Sarah Mitchell — Panel Upgrade</div>
          </div>
          <div style="display:flex;gap:8px;align-items:center">
            <span class="inv-badge ib-viewed" id="pvw-badge">Viewed</span>
            <button type="button" class="modal-close" onclick="closeInvPreview()">×</button>
          </div>
        </div>
        <div class="inv-preview-body" id="pvw-body"></div>
        <div class="inv-preview-actions" id="pvw-actions"></div>
      </div>
    </div>

    <!-- RECURRING -->
    <div class="view" id="view-recurring">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
        <div><div class="sec-lbl">Recurring Jobs</div><p style="font-size:13px;color:var(--text-dim)">Manage maintenance contracts, annual inspections, and recurring service agreements.</p></div>
        <button class="btn btn-primary" onclick="openModal('new-recurring')">+ Add Recurring</button>
      </div>
      <div class="card"><table class="data-table"><thead><tr><th>Client</th><th>Service</th><th>Frequency</th><th>Next Due</th><th>Value</th><th>Status</th><th></th></tr></thead><tbody id="recurring-table"></tbody></table></div>
    </div>


    <!-- ANALYTICS -->
    <div class="view" id="view-analytics">
      <!-- KPI row -->
      <div class="stats-grid" style="margin-bottom:14px">
        <div class="kpi kpi-g"><div class="kpi-label">Revenue YTD</div><div class="kpi-value" id="an-ytd">$48,200</div><div class="kpi-change up" id="an-ytd-sub">calculating...</div></div>
        <div class="kpi kpi-y"><div class="kpi-label">Avg Job Value</div><div class="kpi-value" id="an-avgval">—</div><div class="kpi-change" id="an-avgval-sub">from completed jobs</div></div>
        <div class="kpi kpi-b"><div class="kpi-label">Quote Close Rate</div><div class="kpi-value" id="an-closerate">—</div><div class="kpi-change" id="an-closerate-sub">last 90 days</div></div>
        <div class="kpi kpi-o"><div class="kpi-label">Avg Days to Pay</div><div class="kpi-value" id="an-daystopay">—</div><div class="kpi-change" id="an-daystopay-sub">days avg collection</div></div>
      </div>

      <div style="display:grid;grid-template-columns:1fr 320px;gap:14px;margin-bottom:14px">
        <!-- REVENUE TREND BAR CHART -->
        <div class="card">
          <div class="card-header">
            <div class="card-title">Monthly Revenue — 2026</div>
            <div style="display:flex;gap:6px">
              <div style="display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim)"><div style="width:10px;height:10px;border-radius:2px;background:var(--yellow)"></div>Revenue</div>
              <div style="display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim)"><div style="width:10px;height:10px;border-radius:2px;background:var(--blue);opacity:.5"></div>Target</div>
            </div>
          </div>
          <div style="padding:16px 20px 8px">
            <div id="revenue-chart" class="chart-wrap"></div>
          </div>
        </div>
        <!-- REVENUE BY TYPE DONUT -->
        <div class="card">
          <div class="card-header"><div class="card-title">Revenue by Type</div></div>
          <div style="padding:16px;display:flex;align-items:center;gap:18px">
            <div class="donut-wrap">
              <svg width="130" height="130" viewBox="0 0 130 130">
                <circle cx="65" cy="65" r="50" fill="none" stroke="var(--surface3)" stroke-width="22"/>
                <!-- Panel 30% -->
                <circle cx="65" cy="65" r="50" fill="none" stroke="var(--yellow)" stroke-width="22"
                  stroke-dasharray="94.2 220.8" stroke-dashoffset="0"/>
                <!-- EV 22% -->
                <circle cx="65" cy="65" r="50" fill="none" stroke="var(--blue)" stroke-width="22"
                  stroke-dasharray="69.1 245.9" stroke-dashoffset="-94.2"/>
                <!-- Service 18% -->
                <circle cx="65" cy="65" r="50" fill="none" stroke="var(--green)" stroke-width="22"
                  stroke-dasharray="56.5 258.5" stroke-dashoffset="-163.3"/>
                <!-- Commercial 16% -->
                <circle cx="65" cy="65" r="50" fill="none" stroke="var(--orange)" stroke-width="22"
                  stroke-dasharray="50.3 264.7" stroke-dashoffset="-219.8"/>
                <!-- Other 14% -->
                <circle cx="65" cy="65" r="50" fill="none" stroke="var(--purple)" stroke-width="22"
                  stroke-dasharray="44.0 271.0" stroke-dashoffset="-270.1"/>
              </svg>
              <div class="donut-center"><div style="font-family:'Bebas Neue',sans-serif;font-size:22px">$48k</div><div style="font-size:9px;color:var(--text-muted)">YTD</div></div>
            </div>
            <div class="donut-legend">
              <div class="donut-leg-item"><div class="donut-dot" style="background:var(--yellow)"></div>Panel / Service 30%</div>
              <div class="donut-leg-item"><div class="donut-dot" style="background:var(--blue)"></div>EV Charger 22%</div>
              <div class="donut-leg-item"><div class="donut-dot" style="background:var(--green)"></div>Service Call 18%</div>
              <div class="donut-leg-item"><div class="donut-dot" style="background:var(--orange)"></div>Commercial 16%</div>
              <div class="donut-leg-item"><div class="donut-dot" style="background:var(--purple)"></div>Other 14%</div>
            </div>
          </div>
        </div>
      </div>

      <!-- PARTS vs LABOR + JOB TYPE BREAKDOWN — NEW ROW -->
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px">

        <!-- PARTS vs LABOR SPLIT -->
        <div class="card">
          <div class="card-header">
            <div class="card-title">⚡ Parts vs Labor Split</div>
            <span style="font-size:11px;color:var(--text-muted)">Completed jobs</span>
          </div>
          <div style="padding:16px 20px" id="parts-labor-panel">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px">
              <div style="background:var(--surface2);border-radius:10px;padding:12px;text-align:center">
                <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px">Materials</div>
                <div style="font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--blue)" id="an-mat-total">—</div>
                <div style="font-size:11px;color:var(--text-muted)" id="an-mat-pct">— of revenue</div>
              </div>
              <div style="background:var(--surface2);border-radius:10px;padding:12px;text-align:center">
                <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px">Labor</div>
                <div style="font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--green)" id="an-labor-total">—</div>
                <div style="font-size:11px;color:var(--text-muted)" id="an-labor-pct">— of revenue</div>
              </div>
            </div>
            <!-- Stacked bar -->
            <div style="height:12px;border-radius:6px;overflow:hidden;display:flex;margin-bottom:8px">
              <div id="an-mat-bar" style="background:var(--blue);transition:width .4s ease"></div>
              <div id="an-labor-bar" style="background:var(--green);flex:1"></div>
            </div>
            <div style="display:flex;gap:12px;font-size:11px;color:var(--text-muted)">
              <div style="display:flex;align-items:center;gap:5px"><div style="width:8px;height:8px;border-radius:2px;background:var(--blue)"></div>Materials</div>
              <div style="display:flex;align-items:center;gap:5px"><div style="width:8px;height:8px;border-radius:2px;background:var(--green)"></div>Labor</div>
            </div>
            <div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--border)">
              <div style="font-size:11px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.7px">Avg Margin by Job Type</div>
              <div id="an-margin-by-type" style="display:flex;flex-direction:column;gap:5px"></div>
            </div>
          </div>
        </div>

        <!-- AVG TIME & VALUE BY JOB TYPE -->
        <div class="card">
          <div class="card-header">
            <div class="card-title">📊 Performance by Job Type</div>
            <span style="font-size:11px;color:var(--text-muted)">All time</span>
          </div>
          <div style="padding:16px 20px" id="job-type-perf-panel">
            <div id="an-job-type-table" style="display:flex;flex-direction:column;gap:6px"></div>
          </div>
        </div>

      </div>

      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px">
        <!-- QUOTE PIPELINE FUNNEL -->
        <div class="card">
          <div class="card-header"><div class="card-title">Quote Pipeline</div><span style="font-size:11px;color:var(--text-muted)">Last 90 days</span></div>
          <div style="padding:16px 20px" id="funnel-chart">
            <div class="funnel-step">
              <div class="funnel-label">Quotes Sent</div>
              <div class="funnel-bar-wrap"><div class="funnel-fill" style="width:100%;background:var(--blue)">24</div></div>
              <div class="funnel-val">$42k</div>
            </div>
            <div class="funnel-step">
              <div class="funnel-label">Viewed</div>
              <div class="funnel-bar-wrap"><div class="funnel-fill" style="width:83%;background:var(--purple)">20</div></div>
              <div class="funnel-val">83%</div>
            </div>
            <div class="funnel-step">
              <div class="funnel-label">Accepted</div>
              <div class="funnel-bar-wrap"><div class="funnel-fill" style="width:67%;background:var(--yellow)">16</div></div>
              <div class="funnel-val">67%</div>
            </div>
            <div class="funnel-step">
              <div class="funnel-label">Invoiced</div>
              <div class="funnel-bar-wrap"><div class="funnel-fill" style="width:58%;background:var(--green)">14</div></div>
              <div class="funnel-val">$28k</div>
            </div>
            <div style="margin-top:14px;padding-top:12px;border-top:1px solid var(--border)">
              <div style="display:flex;justify-content:space-between;margin-bottom:5px">
                <span style="font-size:12px;color:var(--text-dim)">Avg days to close</span>
                <span style="font-family:'JetBrains Mono',monospace;font-size:12px">4.2 days</span>
              </div>
              <div style="display:flex;justify-content:space-between">
                <span style="font-size:12px;color:var(--text-dim)">Lost (expired/declined)</span>
                <span style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--danger)">8 quotes</span>
              </div>
            </div>
          </div>
        </div>

        <!-- AR AGING -->
        <div class="card">
          <div class="card-header"><div class="card-title">AR Aging</div><span style="font-size:11px;color:var(--text-muted)" id="ar-aging-total">calculating...</span></div>
          <div id="ar-aging-bars"></div>
          <div id="ar-aging-table" style="padding:12px 16px;border-top:1px solid var(--border)"></div>
        </div>

        <!-- TOP CLIENTS BY REVENUE -->
        <div class="card">
          <div class="card-header"><div class="card-title">Top Clients — YTD</div></div>
          <div id="top-clients-list"></div>
        </div>
      </div>
    </div>

    <!-- PROFITABILITY -->
    <div class="view" id="view-profitability">

      <!-- KPI row -->
      <div class="stats-grid" style="margin-bottom:14px">
        <div class="kpi kpi-g"><div class="kpi-label">Avg Margin MTD</div><div class="kpi-value" id="p-avg-margin">62%</div><div class="kpi-change up">↑ 4% vs last mo.</div></div>
        <div class="kpi kpi-y"><div class="kpi-label">Best Job Type</div><div class="kpi-value" id="p-best-type" style="font-size:20px">EV Charger</div><div class="kpi-change up">74% avg margin</div></div>
        <div class="kpi kpi-o"><div class="kpi-label">Revenue MTD</div><div class="kpi-value" id="p-revenue">$24,850</div><div class="kpi-change up">↑ 12%</div></div>
        <div class="kpi kpi-b"><div class="kpi-label">Materials Cost</div><div class="kpi-value" id="p-materials">$8,420</div><div class="kpi-change neu">34% of rev.</div></div>
      </div>

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px">

        <!-- Margin by job type -->
        <div class="card">
          <div class="card-header">
            <div class="card-title">Margin by Job Type</div>
            <span style="font-size:11px;color:var(--text-muted)">All-time avg</span>
          </div>
          <div style="padding:16px 20px" id="margin-bars"></div>
          <div style="padding:0 20px 16px">
            <div style="background:rgba(200,120,10,.06);border:1px solid rgba(200,120,10,.15);border-radius:10px;padding:11px 13px">
              <div style="font-size:11px;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px">💡 Insight</div>
              <div style="font-size:12px;color:var(--text-dim)" id="profit-insight">EV Chargers generate 74% margin — prioritize in marketing. Service calls at 41% margin barely cover overhead.</div>
            </div>
          </div>
        </div>

        <!-- Revenue breakdown donut-style -->
        <div class="card">
          <div class="card-header"><div class="card-title">Revenue Breakdown</div></div>
          <div style="padding:16px 20px">
            <div id="revenue-breakdown"></div>
          </div>
        </div>

      </div>

      <div style="display:grid;grid-template-columns:2fr 1fr;gap:14px">

        <!-- Job profitability table -->
        <div class="card">
          <div class="card-header">
            <div class="card-title">Job Profitability — Feb 2026</div>
            <select class="form-input" style="width:auto;min-height:32px;padding:3px 8px;font-size:12px" onchange="renderProfitability()">
              <option>This Month</option><option>Last Month</option><option>YTD</option>
            </select>
          </div>
          <table class="data-table">
            <thead><tr><th>Job</th><th>Revenue</th><th>Cost</th><th>Gross $</th><th>Margin</th></tr></thead>
            <tbody id="profit-table"></tbody>
          </table>
        </div>

        <!-- Tech profitability -->
        <div class="card">
          <div class="card-header"><div class="card-title">By Technician</div></div>
          <div style="padding:16px 20px" id="tech-profit"></div>
        </div>

      </div>
    </div>

    <!-- TEAM -->
    <div class="view" id="view-techs">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
        <div class="sec-lbl">My Team — Feb 2026</div>
        <div style="display:flex;gap:6px">
          <div class="state-pill active" id="tech-tab-perf" onclick="switchTechTab('perf',this)">Performance</div>
          <div class="state-pill" id="tech-tab-sched" onclick="switchTechTab('sched',this)">This Week's Schedule</div>
          <button class="btn btn-ghost btn-sm" onclick="exportScheduleCSV()">Export</button>
        </div>
      </div>
      <div id="tech-perf-panel">
        <div class="tech-grid" id="tech-grid"></div>
      </div>
      <div id="tech-sched-panel" style="display:none">
        <div class="card" id="tech-schedule-card"></div>
      </div>
    </div>

    <!-- QUICK QUOTE -->
    <div class="view" id="view-quote">
      <!-- Search/Filter toolbar -->
      <div class="jobs-toolbar" style="margin-bottom:12px">
        <input class="form-input" id="quotes-search" style="width:240px;min-height:40px" placeholder="Search client, job type..." oninput="renderQuotes()">
        <select class="form-input" id="quotes-type-filter" style="width:auto;min-height:40px;padding:7px 12px;font-size:13px" onchange="renderQuotes()">
          <option value="">All Types</option>
          <option>Service / Repair</option><option>Panel Upgrade</option>
          <option>EV Charger</option><option>New Installation</option>
          <option>Safety / Code</option><option>Lighting</option>
          <option>Smart Home</option><option>Commercial</option><option>Other</option>
        </select>
        <select class="form-input" id="quotes-status-filter" style="width:auto;min-height:40px;padding:7px 12px;font-size:13px" onchange="renderQuotes()">
          <option value="">All Statuses</option>
          <option value="draft">Draft</option>
          <option value="sent">Sent</option>
          <option value="viewed">Viewed</option>
          <option value="accepted">Accepted</option>
          <option value="expired">Expired</option>
          <option value="declined">Declined</option>
        </select>
        <button class="btn btn-ghost btn-sm" onclick="document.getElementById('quotes-search').value='';document.getElementById('quotes-type-filter').value='';document.getElementById('quotes-status-filter').value='';renderQuotes()">Clear</button>
      </div>
      <!-- Pipeline summary -->
      <div class="quote-pipeline" id="quote-pipeline">
        <div class="pipeline-col">
          <div class="pipeline-col-hdr">
            <span style="color:var(--text-dim)">📝 Draft</span>
            <span id="qs-draft-val" style="font-family:'JetBrains Mono',monospace;color:var(--text-muted)">$0</span>
          </div>
          <div id="qs-draft"></div>
        </div>
        <div class="pipeline-col">
          <div class="pipeline-col-hdr">
            <span style="color:var(--amber)">📤 Sent</span>
            <span id="qs-sent-val" style="font-family:'JetBrains Mono',monospace;color:var(--amber)">$0</span>
          </div>
          <div id="qs-sent"></div>
        </div>
        <div class="pipeline-col">
          <div class="pipeline-col-hdr">
            <span style="color:var(--blue)">👀 Viewed</span>
            <span id="qs-viewed-val" style="font-family:'JetBrains Mono',monospace;color:var(--blue)">$0</span>
          </div>
          <div id="qs-viewed"></div>
        </div>
        <div class="pipeline-col">
          <div class="pipeline-col-hdr">
            <span style="color:var(--success)">✅ Accepted</span>
            <span id="qs-accepted-val" style="font-family:'JetBrains Mono',monospace;color:var(--success)">$0</span>
          </div>
          <div id="qs-accepted"></div>
        </div>
        <div class="pipeline-col">
          <div class="pipeline-col-hdr">
            <span style="color:var(--danger)">⚠️ Expired</span>
            <span id="qs-expired-val" style="font-family:'JetBrains Mono',monospace;color:var(--danger)">$0</span>
          </div>
          <div id="qs-expired"></div>
        </div>
      </div>

      <div style="display:grid;grid-template-columns:1fr 340px;gap:16px">
        <!-- Estimate builder -->
        <div class="card">
          <div class="card-header">
            <div class="card-title">New Estimate</div>
            <div style="display:flex;gap:6px">
              <button class="btn btn-ghost btn-sm" onclick="clearQuoteForm()">🗑 Clear</button>
              <button class="btn btn-ghost btn-sm" onclick="saveQuoteDraft()">Save Draft</button>
              <button class="btn btn-ghost btn-sm" onclick="previewQuotePDF()">🖨 Preview</button>
              <button class="btn btn-primary btn-sm" onclick="sendQuote()">📤 Send</button>
            </div>
          </div>
          <div style="padding:18px">
            <div class="form-row" style="margin-bottom:14px">
              <div class="form-group"><label class="form-label">Client</label>
                <select class="form-input" id="q-client">
                  <option value="">Select client...</option>
                </select>
              </div>
              <div class="form-group"><label class="form-label">Job Type / Category</label>
                <select class="form-input" id="q-jobtype">
                  <option>Service / Repair</option><option>Panel Upgrade</option>
                  <option>EV Charger</option><option>New Installation</option>
                  <option>Safety / Code</option><option>Lighting</option>
                  <option>Smart Home</option><option>Commercial</option><option>Other</option>
                </select>
              </div>
            </div>

            <!-- Line items header -->
            <div style="display:grid;grid-template-columns:1fr 54px 80px 28px;gap:6px;margin-bottom:6px;padding:0 2px">
              <div style="font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted)">Description</div>
              <div style="font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);text-align:center">Qty</div>
              <div style="font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);text-align:right">Total</div>
              <div></div>
            </div>

            <div id="quote-lines"></div>
            <button class="btn btn-ghost btn-sm" onclick="addQL()" style="margin-top:8px;width:100%">+ Add Line Item</button>

            <!-- Totals -->
            <div style="background:var(--surface2);border-radius:10px;padding:14px 16px;margin-top:16px">
              <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);margin-bottom:5px">
                <span>Subtotal</span><span id="q-subtotal">$0.00</span>
              </div>
              <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-dim);margin-bottom:5px">
                <span>Tax</span>
                <div style="display:flex;align-items:center;gap:6px">
                  <select id="q-taxrate" onchange="recalcQ()" style="font-size:11px;padding:2px 6px;background:var(--surface3);border:1px solid var(--border);border-radius:5px;color:var(--text);outline:none">
                    <option value="0">0% — No tax</option>
                    <option value="6.25">6.25% — Materials tax</option>
                  </select>
                  <span id="q-tax">$0.00</span>
                </div>
              </div>
              <div style="display:flex;justify-content:space-between;font-size:16px;font-weight:700;border-top:1px solid var(--border);padding-top:10px;margin-top:4px">
                <span>Estimate Total</span>
                <span id="quote-grand" style="color:var(--amber);font-family:'JetBrains Mono',monospace">$0.00</span>
              </div>
            </div>

            <div class="form-group" style="margin-top:14px">
              <label class="form-label">Notes for Client</label>
              <textarea class="form-input" id="q-notes" rows="3" placeholder="Scope details, exclusions, warranty terms, or payment expectations..."></textarea>
            </div>
          </div>
        </div>

        <!-- Right sidebar: expired + quick stats -->
        <div>
          <div class="card" style="margin-bottom:14px">
            <div class="card-header"><div class="card-title">Pipeline Stats</div></div>
            <div style="padding:14px 16px">
              <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px"><span style="color:var(--text-dim)">Open quotes</span><strong id="qs-open-count">2</strong></div>
              <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px"><span style="color:var(--text-dim)">Pipeline value</span><strong style="color:var(--amber)" id="qs-pipeline-val">$15,150</strong></div>
              <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px"><span style="color:var(--text-dim)">Close rate (90d)</span><strong style="color:var(--success)">68%</strong></div>
              <div style="display:flex;justify-content:space-between;font-size:13px"><span style="color:var(--text-dim)">Avg days to close</span><strong>4.2 days</strong></div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><div class="card-title" style="color:var(--danger)">⚠ Needs Attention</div></div>
            <div id="qs-attention" style="padding:4px 0"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- TASKS -->
    <div class="view" id="view-tasks">
      <div style="display:flex;justify-content:space-between;margin-bottom:14px;align-items:center">
        <div class="sec-lbl">Open Tasks</div>
        <button class="btn btn-primary" onclick="openModal('new-task')">+ Add Task</button>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
        <div class="card"><div class="card-header"><div class="card-title">🔴 Urgent / Today</div></div><div id="tasks-urgent"></div></div>
        <div class="card"><div class="card-header"><div class="card-title">📅 Upcoming</div></div><div id="tasks-upcoming"></div></div>
      </div>
    </div>

    <!-- PAYMENTS VIEW -->
    <div class="view" id="view-payments">
      <div style="max-width:800px">

        <!-- STRIPE CONNECT BANNER -->
        <div class="card" style="margin-bottom:16px">
          <div class="card-header">
            <div>
              <div class="card-title">💳 Accept Card Payments</div>
              <div style="font-size:12px;color:var(--text-muted);margin-top:2px">Send pay links — clients pay by card, you get paid same day</div>
            </div>
            <div id="stripe-status-badge" style="font-size:12px;font-weight:600;color:var(--text-muted)">Not connected</div>
          </div>
          <div style="padding:20px">
            <div class="fee-callout">
              Amp charges <strong>0% platform fee</strong>. Standard Stripe processing: <strong>2.9% + 30¢</strong> per transaction. On a $2,800 invoice, your net is <strong>$2,718</strong>.
            </div>
            <button class="stripe-connect-btn" id="stripe-btn" onclick="connectStripe()">
              <span style="font-size:20px">S</span> Connect with Stripe
            </button>
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
              <div style="background:var(--surface2);border-radius:10px;padding:13px;text-align:center">
                <div style="font-size:20px;margin-bottom:4px">⚡</div>
                <div style="font-size:12px;font-weight:600;margin-bottom:2px">Instant Pay Links</div>
                <div style="font-size:11px;color:var(--text-dim)">Send via SMS or email</div>
              </div>
              <div style="background:var(--surface2);border-radius:10px;padding:13px;text-align:center">
                <div style="font-size:20px;margin-bottom:4px">🏦</div>
                <div style="font-size:12px;font-weight:600;margin-bottom:2px">Same-Day Deposits</div>
                <div style="font-size:11px;color:var(--text-dim)">Money hits your bank fast</div>
              </div>
              <div style="background:var(--surface2);border-radius:10px;padding:13px;text-align:center">
                <div style="font-size:20px;margin-bottom:4px">📱</div>
                <div style="font-size:12px;font-weight:600;margin-bottom:2px">Client Pays by Phone</div>
                <div style="font-size:11px;color:var(--text-dim)">No app needed for them</div>
              </div>
            </div>
          </div>
        </div>

        <!-- PAYMENT METHODS -->
        <div style="margin-bottom:16px">
          <div class="sec-lbl">Also Accept</div>
          <div class="payment-methods">
            <div class="pm-card connected" onclick="flash('Zelle is already linked — manage in your Zelle app ✓')">
              <div class="pm-icon">💙</div>
              <div class="pm-name">Zelle</div>
              <div class="pm-desc"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9dad9c8dbc2d0e9c4c0c2ccccc5cccadddbc0ca87cac6c4">[email&#160;protected]</a></div>
            </div>
            <div class="pm-card" onclick="connectVenmo()">
              <div class="pm-icon">💸</div>
              <div class="pm-name">Venmo Business</div>
              <div class="pm-desc">Link your account</div>
            </div>
            <div class="pm-card" onclick="togglePaymentMethod('check',this)">
              <div class="pm-icon">📝</div>
              <div class="pm-name">Check / Cash</div>
              <div class="pm-desc">Track manually</div>
            </div>
          </div>
        </div>

        <!-- RECENT PAY LINKS -->
        <div class="card" style="margin-bottom:16px">
          <div class="card-header">
            <div class="card-title">Recent Pay Links</div>
            <button class="btn btn-primary btn-sm" onclick="openPayLink()">+ Send Pay Link</button>
          </div>
          <div id="pay-links-list"></div>
        </div>

        <!-- SENT COMMUNICATIONS OUTBOX -->
        <div class="card" style="margin-bottom:16px">
          <div class="card-header">
            <div class="card-title">Sent Communications</div>
            <span style="font-size:11px;color:var(--text-muted)" id="outbox-count"></span>
          </div>
          <div id="outbox-list">
            <div style="padding:20px;text-align:center;color:var(--text-muted);font-size:13px">No messages sent yet</div>
          </div>
        </div>

        <!-- PAYOUT SUMMARY — live rendered -->
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
          <div class="card">
            <div class="card-header"><div class="card-title">This Month</div></div>
            <div style="padding:18px" id="pay-method-summary">
              <div style="color:var(--text-muted);font-size:13px">Loading...</div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><div class="card-title">Collection Overview</div></div>
            <div style="padding:18px" id="pay-collection-stats">
              <div style="color:var(--text-muted);font-size:13px">Loading...</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div><!-- /content -->
</div><!-- /main -->

<!-- JOB FLOW OVERLAY (photo capture) -->
<div class="job-flow-overlay" id="job-flow-overlay">
  <div class="jf-header">
    <div>
      <div class="jf-title" id="jf-job-title">J-001 — Panel Upgrade</div>
      <div style="font-size:12px;color:var(--text-dim)" id="jf-job-sub">Loading...</div>
    </div>
    <div style="display:flex;gap:8px;margin-left:auto">
      <button class="btn btn-ghost btn-sm" onclick="closeJobFlow()">✕ Close</button>
    </div>
  </div>

  <!-- STAGE BAR -->
  <div style="background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px">
    <div class="jf-stages" style="max-width:640px;margin:0 auto">
      <div class="jf-stage done" onclick="setJfStage(0)">✓ Arrive</div>
      <div class="jf-stage active" onclick="setJfStage(1)">📷 Photos</div>
      <div class="jf-stage" onclick="setJfStage(2)">🔧 Work Log</div>
      <div class="jf-stage" onclick="setJfStage(3)">✅ Complete</div>
      <div class="jf-stage" onclick="setJfStage(4)">💸 Invoice</div>
    </div>
  </div>

  <div class="jf-body">

    <!-- STAGE 0: ARRIVE -->
    <div class="jf-stage-content" id="jfs-0" style="display:none">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
        <div class="jf-section-title" style="margin:0">Arrival & Safety Checklist</div>
        <span id="jf-arrive-badge" style="font-size:11px;color:var(--amber);font-weight:600;background:var(--amber-light);padding:3px 8px;border-radius:20px"></span>
      </div>

      <!-- Standard items always shown -->
      <div class="jf-checklist" id="jf-arrive-checklist">
        <div class="jf-check-item" onclick="toggleJfCheck(this)"><div class="jf-check"></div><div class="jf-check-text">Confirmed arrival with client</div></div>
        <div class="jf-check-item" onclick="toggleJfCheck(this)"><div class="jf-check"></div><div class="jf-check-text">Reviewed job scope on-site</div></div>
        <div class="jf-check-item" onclick="toggleJfCheck(this)"><div class="jf-check"></div><div class="jf-check-text">Located main panel / service entrance</div></div>
        <div class="jf-check-item" onclick="toggleJfCheck(this)"><div class="jf-check"></div><div class="jf-check-text">Permit posted on-site (if required)</div></div>
      </div>

      <!-- Job-type specific safety items injected here -->
      <div id="jf-safety-section" style="display:none">
        <div style="display:flex;align-items:center;gap:6px;margin:12px 0 8px">
          <div style="height:1px;flex:1;background:var(--border)"></div>
          <span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--danger)">⚠ Job-Type Safety</span>
          <div style="height:1px;flex:1;background:var(--border)"></div>
        </div>
        <div class="jf-checklist" id="jf-safety-checklist"></div>
      </div>

      <button class="btn btn-primary" style="width:100%;justify-content:center;margin-top:8px" onclick="setJfStage(1)">Next: Take Photos →</button>
    </div>

    <!-- STAGE 1: PHOTOS -->
    <div class="jf-stage-content" id="jfs-1">
      <div class="jf-section-title">Job Photos</div>
      <p style="font-size:13px;color:var(--text-dim);margin-bottom:12px">Document existing conditions, during work, and completed job. Photos protect you in disputes and build client trust.</p>

      <!-- PHOTO TYPE SELECTOR -->
      <div style="display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap">
        <div id="pt-before" class="cat-chip active" onclick="selectPhotoType('before',this)">📷 Before</div>
        <div id="pt-during" class="cat-chip" onclick="selectPhotoType('during',this)">🔧 During</div>
        <div id="pt-after" class="cat-chip" onclick="selectPhotoType('after',this)">✅ After</div>
        <div id="pt-panel" class="cat-chip" onclick="selectPhotoType('panel',this)">⚡ Panel</div>
        <div id="pt-permit" class="cat-chip" onclick="selectPhotoType('permit',this)">📋 Permit</div>
      </div>

      <!-- UPLOAD ZONE -->
      <label class="photo-upload-zone" id="photo-upload-zone" onclick="document.getElementById('photo-file-input').click()">
        <input type="file" id="photo-file-input" accept="image/*" multiple capture="environment"
          onchange="handlePhotoUpload(this.files)">
        <div style="font-size:32px;margin-bottom:6px">📷</div>
        <div style="font-size:14px;font-weight:600;margin-bottom:3px">Take Photo or Upload</div>
        <div style="font-size:12px;color:var(--text-muted)">Tap to use camera · or drag &amp; drop images here</div>
      </label>

      <!-- PHOTO COUNT BADGE -->
      <div id="photo-count-badge" style="font-size:12px;color:var(--text-muted);margin-bottom:8px;display:none">
        <span id="photo-count-text"></span>
      </div>

      <!-- REAL PHOTO GRID -->
      <div class="photo-grid-real" id="photo-grid-real"></div>

      <div style="background:var(--surface2);border-radius:9px;padding:10px 14px;font-size:12px;color:var(--text-dim);margin-bottom:12px">
        💡 <strong>Tip:</strong> Label each photo using the type selector above before uploading. Aim for: panel before &amp; after, any hazards found, completed work.
      </div>

      <button class="btn btn-primary" style="width:100%;justify-content:center" onclick="setJfStage(2)">Next: Work Log →</button>
    </div>

    <!-- STAGE 2: WORK LOG -->
    <div class="jf-stage-content" id="jfs-2" style="display:none">
      <div class="jf-section-title">Work Log</div>
      <div class="form-group">
        <label class="form-label">Work Performed</label>
        <textarea class="form-input" rows="4" id="jf-work-desc" placeholder="Describe what was done..."></textarea>
      </div>
      <div class="form-row">
        <div class="form-group"><label class="form-label">Hours on Site</label><input class="form-input" type="number" id="jf-hours" value="4" step="0.5"></div>
        <div class="form-group"><label class="form-label">Materials Used ($)</label><input class="form-input" type="number" id="jf-mat-cost" value="0" oninput="jfRecalcInvoice()"></div>
      </div>
      <div class="form-group">
        <label class="form-label">Job Total (estimated)</label>
        <div style="background:var(--surface2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px" id="jf-price-summary">
          <div style="font-size:13px;color:var(--text-muted)">Loading job value...</div>
        </div>
      </div>
      <div class="jf-section-title" style="margin-top:4px">After Photos
        <button class="btn btn-ghost btn-sm" style="margin-left:8px;font-size:11px" onclick="document.getElementById('pt-after').click();document.getElementById('photo-file-input').click();setJfStage(1)">+ Add After Photos ↗</button>
      </div>
      <div id="after-photo-preview" style="font-size:12px;color:var(--text-muted);padding:8px 0">
        After photos will appear here — add them in the Photos stage above.
      </div>
      <button class="btn btn-primary" style="width:100%;justify-content:center;margin-top:12px" onclick="setJfStage(3)">Next: Complete Job →</button>
    </div>

    <!-- STAGE 3: COMPLETE -->
    <div class="jf-stage-content" id="jfs-3" style="display:none">
      <div class="jf-section-title">Job Completion Checklist</div>
      <div class="jf-checklist" id="jf-completion-checklist">
        <div class="jf-check-item" onclick="toggleJfCheck(this)"><div class="jf-check"></div><div class="jf-check-text">All circuits tested and verified live</div></div>
        <div class="jf-check-item" onclick="toggleJfCheck(this)"><div class="jf-check"></div><div class="jf-check-text">Panel directory labeled clearly</div></div>
        <div class="jf-check-item" onclick="toggleJfCheck(this)"><div class="jf-check"></div><div class="jf-check-text">Work area cleaned up</div></div>
        <div class="jf-check-item" onclick="toggleJfCheck(this)"><div class="jf-check"></div><div class="jf-check-text">Client walked through completed work</div></div>
        <div class="jf-check-item" onclick="toggleJfCheck(this)"><div class="jf-check"></div><div class="jf-check-text">All tools and materials removed from site</div></div>
        <div class="jf-check-item" onclick="toggleJfCheck(this)"><div class="jf-check"></div><div class="jf-check-text">Permit inspection scheduled (if required)</div></div>
      </div>

      <div class="form-group" style="margin-top:12px">
        <label class="form-label">Final Notes</label>
        <textarea class="form-input" id="jf-final-notes" rows="2" placeholder="Warranty info, follow-up items, site conditions..."></textarea>
      </div>

      <!-- CUSTOMER SIGNATURE -->
      <div class="jf-section-title" style="margin-top:4px">Customer Sign-Off</div>
      <p style="font-size:12px;color:var(--text-dim);margin-bottom:10px">Customer signature confirms work was completed to satisfaction. Stored with the job record.</p>

      <div class="sig-pad-wrap">
        <canvas id="sig-canvas" height="140" style="touch-action:none"></canvas>
      </div>
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px">
        <div class="sig-controls">
          <button class="btn btn-ghost btn-sm" onclick="clearSignature()">Clear</button>
        </div>
        <div class="sig-status" id="sig-status">✓ Signature captured</div>
        <div style="flex:1"></div>
        <span style="font-size:11px;color:var(--text-muted)">Sign above with finger or mouse</span>
      </div>

      <div style="background:var(--surface2);border-radius:9px;padding:10px 14px;font-size:12px;color:var(--text-dim);margin-bottom:12px">
        📋 <strong>By signing, customer confirms:</strong> Work completed as described, site left clean, all questions answered.
      </div>

      <button class="btn btn-primary" style="width:100%;justify-content:center" onclick="completeJobWithSignature()">✓ Mark Complete &amp; Go to Invoice</button>
    </div>

    <!-- STAGE 4: INVOICE -->
    <div class="jf-stage-content" id="jfs-4" style="display:none">
      <div style="background:rgba(26,110,60,.08);border:1px solid rgba(26,110,60,.25);border-radius:12px;padding:16px;text-align:center;margin-bottom:20px">
        <div style="font-size:32px;margin-bottom:6px">🎉</div>
        <div style="font-size:16px;font-weight:700;color:var(--success);margin-bottom:3px">Job Complete!</div>
        <div style="font-size:13px;color:var(--text-dim)">Panel Upgrade — Sarah Mitchell · 4.5 hours on site</div>
      </div>
      <div class="form-group"><label class="form-label">Invoice Amount</label>
        <div style="background:var(--surface2);border-radius:10px;padding:13px 16px" id="jf-inv-summary">
          <div style="font-size:13px;color:var(--text-muted)">Loading...</div>
        </div>
      </div>
      <div class="form-group"><label class="form-label">Send Invoice Via</label>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
          <button class="btn btn-primary" style="justify-content:center" onclick="sendJobInvoice('sms')">📱 SMS Pay Link</button>
          <button class="btn btn-ghost" style="justify-content:center" onclick="sendJobInvoice('email')">📧 Email Invoice</button>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- AUTH MODAL -->
<div class="onboarding-overlay" id="auth-modal" style="display:none">
  <div class="onboarding-card" style="max-width:380px">
    <div class="ob-header" style="text-align:center;padding-bottom:16px">
      <button onclick="document.getElementById('auth-modal').style.display='none'" title="Close" style="position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:6px;background:var(--surface2);border:none;color:var(--text-dim);font-size:18px;cursor:pointer">×</button>
      <div class="ob-bolt" style="font-size:36px;margin-bottom:8px">⚡</div>
      <div class="ob-title" style="font-size:20px" id="auth-title">Sign In</div>
    </div>
    <div class="form-group">
      <label class="form-label">Email</label>
      <input class="form-input" id="auth-email" placeholder="you@company.com">
    </div>
    <div class="form-group">
      <label class="form-label">Password</label>
      <input class="form-input" type="password" id="auth-password" placeholder="••••••••">
    </div>
    <button class="btn btn-primary" style="width:100%;padding:12px;font-size:15px;margin-top:4px" id="auth-btn" onclick="handleAuth()">Sign In</button>
    <div style="text-align:center;margin-top:12px;font-size:12px;color:var(--text-dim)">
      <span id="auth-toggle-text">Don't have an account?</span> 
      <a href="#" onclick="toggleAuthMode()" style="color:var(--accent)" id="auth-toggle-link">Sign up</a>
    </div>
  </div>
</div>

<script>
let authMode = 'login';
function toggleAuthMode() {
  authMode = authMode === 'login' ? 'signup' : 'login';
  document.getElementById('auth-title').textContent = authMode === 'login' ? 'Sign In' : 'Create Account';
  document.getElementById('auth-btn').textContent = authMode === 'login' ? 'Sign In' : 'Create Account';
  document.getElementById('auth-toggle-text').textContent = authMode === 'login' ? "Don't have an account?" : 'Already have an account?';
  document.getElementById('auth-toggle-link').textContent = authMode === 'login' ? 'Sign up' : 'Sign in';
}
async function handleAuth() {
  const email = document.getElementById('auth-email').value;
  const password = document.getElementById('auth-password').value;
  if (!email || !password) { flash('Please fill in all fields'); return; }
  let success = false;
  if (authMode === 'login') {
    success = await login(email, password);
  } else {
    success = await signup(email, password);
  }
  if (success) {
    document.getElementById('auth-modal').style.display = 'none';
  }
}
function showAuthModal(mode) {
  authMode = mode;
  toggleAuthMode();
  toggleAuthMode();
  document.getElementById('auth-modal').style.display = 'flex';
}
</script>

<!-- TRIAL MODAL -->
<div class="onboarding-overlay" id="trial-modal" style="display:none">
  <div class="onboarding-card" style="max-width:420px">
    <div class="ob-header" style="text-align:center;padding-bottom:20px">
      <div class="ob-bolt" style="font-size:48px;margin-bottom:12px">⚡</div>
      <div class="ob-title" style="font-size:24px">Start Your Free Trial</div>
      <div class="ob-sub">14 days free. No credit card required.</div>
    </div>
    <div style="text-align:center;margin-bottom:20px">
      <div style="display:flex;gap:12px;justify-content:center;margin:16px 0">
        <div style="text-align:center"><div style="font-size:20px;font-weight:700">Solo</div><div style="font-size:28px;font-weight:700;color:var(--success)">$39</div><div style="font-size:11px;color:var(--text-dim)">/mo</div></div>
        <div style="text-align:center"><div style="font-size:20px;font-weight:700">Team</div><div style="font-size:28px;font-weight:700;color:var(--amber)">$89</div><div style="font-size:11px;color:var(--text-dim)">/mo</div></div>
        <div style="text-align:center"><div style="font-size:20px;font-weight:700">Business</div><div style="font-size:28px;font-weight:700;color:var(--blue)">$199</div><div style="font-size:11px;color:var(--text-dim)">/mo</div></div>
      </div>
      <div style="font-size:13px;color:var(--text-muted)">Save 20% with annual billing (2 months free!)</div>
    </div>
    <div class="form-group">
      <label class="form-label">Your Email</label>
      <input class="form-input" id="trial-email" placeholder="you@yourcompany.com" style="text-align:center;font-size:16px">
    </div>
    <button class="btn btn-primary" style="width:100%;padding:14px;font-size:16px;margin-top:8px" onclick="startTrial()">Start Free Trial</button>
    <div style="text-align:center;margin-top:12px;font-size:12px;color:var(--text-dim)">Already have an account? <a href="#" onclick="showAuthModal('login')" style="color:var(--accent)">Sign in</a></div>
  </div>
</div>

<!-- ONBOARDING OVERLAY -->
<div class="onboarding-overlay hidden" id="onboarding-overlay" onclick="if(event.target===this)dismissOnboarding()">
  <div class="onboarding-card">

    <div class="ob-header" style="position:relative">
      <button onclick="dismissOnboarding()" title="Skip setup" style="position:absolute;top:0;right:0;width:32px;height:32px;border-radius:8px;background:var(--surface2);border:none;color:var(--text-dim);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1">×</button>
      <div class="ob-bolt">⚡</div>
      <div class="ob-title">Welcome to Amp CRM</div>
      <div class="ob-sub">Built for electrical contractors. Let's get your business set up in under 3 minutes.</div>
    </div>

    <!-- STEP INDICATORS: 5 steps -->
    <div class="ob-steps" id="ob-steps-row">
      <div class="ob-step-dot active" id="ob-dot-0">1</div>
      <div class="ob-step-line" id="ob-line-0"></div>
      <div class="ob-step-dot" id="ob-dot-1">2</div>
      <div class="ob-step-line" id="ob-line-1"></div>
      <div class="ob-step-dot" id="ob-dot-2">3</div>
      <div class="ob-step-line" id="ob-line-2"></div>
      <div class="ob-step-dot" id="ob-dot-3">4</div>
      <div class="ob-step-line" id="ob-line-3"></div>
      <div class="ob-step-dot" id="ob-dot-4">5</div>
    </div>

    <!-- STEP 0: YOUR BUSINESS -->
    <div class="ob-step active" id="ob-step-0">
      <div class="ob-step-title">Tell us about your business</div>
      <div class="ob-step-desc">Personalises your price book, tax settings, state rates, and invoice branding.</div>
      <div class="form-group">
        <label class="form-label">Business Name</label>
        <input class="form-input" id="ob-biz" placeholder="e.g. Apex Electrical Contractors" value="">
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Owner / Contact Name</label>
          <input class="form-input" id="ob-name" placeholder="e.g. Mike Rivera" value="">
        </div>
        <div class="form-group">
          <label class="form-label">Phone</label>
          <input class="form-input" id="ob-phone" placeholder="(555) 000-0000" value="">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Contractor License #</label>
          <input class="form-input" placeholder="EC-XXXXXX" value="">
        </div>
        <div class="form-group">
          <label class="form-label">Home State</label>
          <select class="form-input" id="ob-state">
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="HI">Hawaii</option>
              <option value="ID">Idaho</option>
              <option value="IL">Illinois</option>
              <option value="IN">Indiana</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NV">Nevada</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NM">New Mexico</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="ND">North Dakota</option>
              <option value="OH">Ohio</option>
              <option value="OK">Oklahoma</option>
              <option value="OR">Oregon</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="SD">South Dakota</option>
              <option value="TN">Tennessee</option>
              <option value="TX">Texas</option>
              <option value="UT">Utah</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WA">Washington</option>
              <option value="WV">West Virginia</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">Team Size</label>
        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px">
          <label class="ob-size-tile">
            <input type="radio" name="ob-size" value="solo" style="display:none">
            <div class="ob-size-icon">🧰</div>
            <div class="ob-size-lbl">1–2 techs</div>
          </label>
          <label class="ob-size-tile selected">
            <input type="radio" name="ob-size" value="small" checked style="display:none">
            <div class="ob-size-icon">👷</div>
            <div class="ob-size-lbl">3–5 techs</div>
          </label>
          <label class="ob-size-tile">
            <input type="radio" name="ob-size" value="medium" style="display:none">
            <div class="ob-size-icon">🏗</div>
            <div class="ob-size-lbl">6–15 techs</div>
          </label>
          <label class="ob-size-tile">
            <input type="radio" name="ob-size" value="large" style="display:none">
            <div class="ob-size-icon">🏢</div>
            <div class="ob-size-lbl">15+ techs</div>
          </label>
        </div>
      </div>
    </div>

    <!-- STEP 1: SWITCHING FROM / DATA IMPORT -->
    <div class="ob-step" id="ob-step-1">
      <div class="ob-step-title">Are you switching from another system?</div>
      <div class="ob-step-desc">We'll import your clients, jobs, and invoices automatically — no manual re-entry needed.</div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px">
        <div class="ob-source-tile" id="obs-jobber" onclick="selectObSource('jobber',this)">
          <div class="ob-source-icon">🟢</div>
          <div class="ob-source-name">Jobber</div>
        </div>
        <div class="ob-source-tile" id="obs-housecall" onclick="selectObSource('housecall',this)">
          <div class="ob-source-icon">🔵</div>
          <div class="ob-source-name">Housecall Pro</div>
        </div>
        <div class="ob-source-tile" id="obs-servicetitan" onclick="selectObSource('servicetitan',this)">
          <div class="ob-source-icon">🟠</div>
          <div class="ob-source-name">ServiceTitan</div>
        </div>
        <div class="ob-source-tile" id="obs-quickbooks" onclick="selectObSource('quickbooks',this)">
          <div class="ob-source-icon">📊</div>
          <div class="ob-source-name">QuickBooks</div>
        </div>
        <div class="ob-source-tile" id="obs-spreadsheet" onclick="selectObSource('generic',this)">
          <div class="ob-source-icon">📋</div>
          <div class="ob-source-name">Spreadsheet / CSV</div>
        </div>
        <div class="ob-source-tile" id="obs-fresh" onclick="selectObSource('fresh',this)">
          <div class="ob-source-icon">✨</div>
          <div class="ob-source-name">Starting fresh</div>
        </div>
      </div>

      <!-- Import CTA — shown when a migration source is selected -->
      <div id="ob-import-cta" style="display:none;background:var(--amber-light);border:1px solid rgba(200,120,10,.3);border-radius:12px;padding:14px 16px;margin-bottom:8px">
        <div style="font-size:13px;font-weight:600;margin-bottom:4px">Ready to import from <span id="ob-import-source-name">Jobber</span></div>
        <div style="font-size:12px;color:var(--text-dim);margin-bottom:10px">Export a CSV from your current system, then upload it here. Takes about 2 minutes.</div>
        <button class="btn btn-primary btn-sm" style="width:100%;justify-content:center" onclick="obLaunchImport()">⬆ Import My Data Now</button>
      </div>
      <div id="ob-fresh-msg" style="display:none;background:var(--surface2);border-radius:12px;padding:14px 16px;font-size:13px;color:var(--text-dim)">
        No problem — you can add clients and jobs manually as you go. We'll walk you through creating your first one next.
      </div>
    </div>

    <!-- STEP 2: FIRST CLIENT (shown if starting fresh or after import) -->
    <div class="ob-step" id="ob-step-2">
      <div class="ob-step-title" id="ob-client-step-title">Add your first client</div>
      <div class="ob-step-desc" id="ob-client-step-desc">Add one now to see how the client profile system works — contact info, job history, billing, and next actions all in one place.</div>

      <div id="ob-client-imported-msg" style="display:none;background:rgba(26,110,60,.07);border:1px solid rgba(26,110,60,.2);border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:13px;color:var(--success)">
        <strong>✓ Import complete.</strong> <span id="ob-imported-count">0 clients, 0 jobs, 0 invoices</span> imported. You can still add a manual client below, or skip to the next step.
      </div>

      <div class="form-row">
        <div class="form-group"><label class="form-label">Client Name</label><input class="form-input" id="ob-cn" placeholder="Sarah Mitchell"></div>
        <div class="form-group"><label class="form-label">Type</label>
          <select class="form-input" id="ob-ctype">
            <option>Residential</option><option>Commercial</option><option>HOA / Property Mgmt</option><option>General Contractor</option><option>Property Manager</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group"><label class="form-label">Phone</label><input class="form-input" id="ob-cphone" type="tel" placeholder="(555) 204-8810"></div>
        <div class="form-group"><label class="form-label">Email</label><input class="form-input" id="ob-cemail" type="email" placeholder="sarah@email.com"></div>
      </div>
      <div class="form-group"><label class="form-label">Property Address</label><input class="form-input" id="ob-caddr" placeholder="412 Oak Lane, Springfield, IL"></div>
      <div class="form-group">
        <label class="form-label">How did they find you?</label>
        <select class="form-input" id="ob-csource">
          <option>Existing client</option>
          <option>Referral — word of mouth</option>
          <option>Google / SEO</option>
          <option>Google Ads / LSA</option>
          <option>Angi / HomeAdvisor</option>
          <option>Thumbtack</option>
          <option>Yelp</option>
          <option>NextDoor</option>
          <option>Facebook / Instagram</option>
          <option>Door hanger / flyer</option>
          <option>Yard sign</option>
          <option>Repeat — recurring</option>
          <option>Cold outreach / canvass</option>
          <option>Other</option>
        </select>
      </div>
      <button class="btn btn-ghost btn-sm" style="width:100%;justify-content:center;margin-top:4px" onclick="obSaveClient()">+ Save This Client</button>
      <div id="ob-client-saved" style="display:none;font-size:12px;color:var(--success);text-align:center;margin-top:8px;font-weight:600">✓ Client saved</div>
    </div>

    <!-- STEP 3: GET PAID -->
    <div class="ob-step" id="ob-step-3">
      <div class="ob-step-title">How do you collect payment?</div>
      <div class="ob-step-desc">Pick everything you use — clients can pay the way that's easiest for them, and you'll know exactly where each payment stands.</div>

      <!-- Payment methods as toggleable tiles -->
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px">
        <div class="ob-pay-tile" id="ob-pay-stripe" onclick="toggleObPay('stripe',this)">
          <div style="display:flex;align-items:center;gap:10px">
            <span style="font-size:20px">💳</span>
            <div>
              <div style="font-weight:700;font-size:13px">Card (Stripe)</div>
              <div style="font-size:11px;color:var(--text-muted)">2.9% + 30¢ · same-day deposit</div>
            </div>
          </div>
          <div class="ob-pay-check" id="ob-pay-check-stripe">○</div>
        </div>
        <div class="ob-pay-tile ob-pay-active" id="ob-pay-zelle" onclick="toggleObPay('zelle',this)">
          <div style="display:flex;align-items:center;gap:10px">
            <span style="font-size:20px">💙</span>
            <div>
              <div style="font-weight:700;font-size:13px">Zelle</div>
              <div style="font-size:11px;color:var(--text-muted)">Free · instant transfer</div>
            </div>
          </div>
          <div class="ob-pay-check ob-pay-checked" id="ob-pay-check-zelle">✓</div>
        </div>
        <div class="ob-pay-tile" id="ob-pay-venmo" onclick="toggleObPay('venmo',this)">
          <div style="display:flex;align-items:center;gap:10px">
            <span style="font-size:20px">💸</span>
            <div>
              <div style="font-weight:700;font-size:13px">Venmo Business</div>
              <div style="font-size:11px;color:var(--text-muted)">1.9% fee · popular with homeowners</div>
            </div>
          </div>
          <div class="ob-pay-check" id="ob-pay-check-venmo">○</div>
        </div>
        <div class="ob-pay-tile ob-pay-active" id="ob-pay-check2" onclick="toggleObPay('check2',this)">
          <div style="display:flex;align-items:center;gap:10px">
            <span style="font-size:20px">📝</span>
            <div>
              <div style="font-weight:700;font-size:13px">Check / Cash</div>
              <div style="font-size:11px;color:var(--text-muted)">Free · tracked manually in Amp</div>
            </div>
          </div>
          <div class="ob-pay-check ob-pay-checked" id="ob-pay-check-check2">✓</div>
        </div>
      </div>

      <!-- Stripe connect inline -->
      <div id="ob-stripe-section" style="display:none;margin-bottom:12px">
        <button class="stripe-connect-btn" id="ob-stripe-btn" onclick="obConnectStripe()" style="margin-bottom:0">
          <span style="font-size:18px">S</span> Connect with Stripe
        </button>
        <div style="font-size:11px;color:var(--text-muted);text-align:center;margin-top:8px">Takes 2 minutes. You can always do this later in Settings.</div>
      </div>

      <!-- Zelle / Venmo details -->
      <div id="ob-zelle-section" style="margin-bottom:8px">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Zelle Email or Phone</label>
            <input class="form-input" id="ob-zelle" placeholder="your@email.com" value="mike@riveraelectric.com">
          </div>
          <div class="form-group">
            <label class="form-label">Venmo Handle</label>
            <input class="form-input" id="ob-venmo" placeholder="@your-business">
          </div>
        </div>
      </div>
    </div>

    <!-- STEP 4: LAUNCH -->
    <div class="ob-step" id="ob-step-4">
      <div style="text-align:center;padding:8px 0 16px">
        <div style="font-size:48px;margin-bottom:10px">🎉</div>
        <div style="font-size:22px;font-weight:700;margin-bottom:6px">You're ready to go!</div>
        <div style="font-size:13px;color:var(--text-dim);margin-bottom:20px;line-height:1.6">Here's your personalised setup checklist. Work through these to get the most out of Amp.</div>
      </div>

      <div class="ob-progress-wrap">
        <div class="ob-progress-label">
          <span>Setup progress</span>
          <span id="ob-done-pct">0 of 6 complete</span>
        </div>
        <div class="ob-progress-bar"><div class="ob-progress-fill" id="ob-done-bar" style="width:0%"></div></div>
      </div>

      <div class="ob-checklist" id="ob-final-checklist">
        <div class="ob-check-item checked" onclick="toggleObCheck(this)">
          <div class="ob-check-box">✓</div>
          <div style="flex:1">
            <div class="ob-check-label">Business profile set up</div>
            <div class="ob-check-sub">Name, license, service area, and team size</div>
          </div>
          <div class="ob-check-icon">🏢</div>
        </div>
        <div class="ob-check-item" id="ob-check-import" onclick="obCheckAction('import')">
          <div class="ob-check-box"></div>
          <div style="flex:1">
            <div class="ob-check-label">Import your existing data</div>
            <div class="ob-check-sub">Clients, jobs, invoices from your old system</div>
          </div>
          <div class="ob-check-icon">⬆</div>
        </div>
        <div class="ob-check-item" id="ob-check-client" onclick="obCheckAction('client')">
          <div class="ob-check-box"></div>
          <div style="flex:1">
            <div class="ob-check-label">Add your first client</div>
            <div class="ob-check-sub">Manually or via import</div>
          </div>
          <div class="ob-check-icon">👤</div>
        </div>
        <div class="ob-check-item" id="ob-check-job" onclick="obCheckAction('job')">
          <div class="ob-check-box"></div>
          <div style="flex:1">
            <div class="ob-check-label">Schedule your first job</div>
            <div class="ob-check-sub">Log a job and assign a tech</div>
          </div>
          <div class="ob-check-icon">🔧</div>
        </div>
        <div class="ob-check-item" id="ob-check-payment" onclick="obCheckAction('payment')">
          <div class="ob-check-box"></div>
          <div style="flex:1">
            <div class="ob-check-label">Connect payment methods</div>
            <div class="ob-check-sub">Stripe, Zelle, Venmo, or check</div>
          </div>
          <div class="ob-check-icon">💳</div>
        </div>
        <div class="ob-check-item" onclick="obCheckAction('invoice')">
          <div class="ob-check-box"></div>
          <div style="flex:1">
            <div class="ob-check-label">Send your first invoice</div>
            <div class="ob-check-sub">Create, send, and get paid</div>
          </div>
          <div class="ob-check-icon">💰</div>
        </div>
      </div>
    </div>

    <!-- FOOTER -->
    <div class="ob-footer">
      <span class="ob-skip" onclick="dismissOnboarding()">Skip setup</span>
      <button class="btn btn-ghost" id="ob-back-btn" onclick="obBack()" style="display:none">← Back</button>
      <button class="btn btn-primary" id="ob-next-btn" onclick="obNext()">Get Started →</button>
    </div>
  </div>
</div>

<!-- QUICK ACTION SHEET -->
<div class="quick-action-backdrop" id="qa-backdrop" onclick="closeQuickActions()"></div>
<div class="quick-action-sheet" id="quick-action-sheet">
  <div class="qa-handle"></div>
  <div class="qa-title">Quick Actions</div>
  <div class="qa-grid">
    <div class="qa-item" onclick="closeQuickActions();openModal('new-job')">
      <div class="qa-icon" style="background:rgba(200,120,10,.15);color:var(--amber)">🔧</div>
      <div class="qa-label">New Job</div>
    </div>
    <div class="qa-item" onclick="closeQuickActions();openModal('new-invoice')">
      <div class="qa-icon" style="background:rgba(24,84,160,.15);color:var(--blue)">🧾</div>
      <div class="qa-label">New Invoice</div>
    </div>
    <div class="qa-item" onclick="closeQuickActions();openModal('new-client')">
      <div class="qa-icon" style="background:rgba(26,110,60,.15);color:var(--success)">👤</div>
      <div class="qa-label">Add Client</div>
    </div>
    <div class="qa-item" onclick="closeQuickActions();window.nav('money',document.getElementById('nav-money'));setTimeout(()=>switchHub('money','quote',document.querySelector('#money-tabs .hub-tab:nth-child(3)')),100)">
      <div class="qa-icon" style="background:rgba(249,115,22,.15);color:var(--warning)">✏️</div>
      <div class="qa-label">Estimate</div>
    </div>
    <div class="qa-item" onclick="closeQuickActions();openModal('new-permit')">
      <div class="qa-icon" style="background:rgba(168,85,247,.15);color:#a855f7">📋</div>
      <div class="qa-label">Log Permit</div>
    </div>
    <div class="qa-item" onclick="closeQuickActions();openModal('new-task')">
      <div class="qa-icon" style="background:rgba(200,120,10,.1);color:var(--amber)">✅</div>
      <div class="qa-label">Add Task</div>
    </div>
    <div class="qa-item" onclick="closeQuickActions();openModal('add-material')">
      <div class="qa-icon" style="background:rgba(26,110,60,.12);color:var(--success)">📦</div>
      <div class="qa-label">Log Stock</div>
    </div>
  </div>
</div>

<!-- MOBILE BOTTOM NAV -->
<nav class="mobile-nav">
  <div class="mob-nav-item active" onclick="mobNav('dashboard',this)"><div class="mob-icon">📊</div><div class="mob-label">Home</div></div>
  <div class="mob-nav-item" onclick="mobNav('work',this)"><div class="mob-icon">🔧</div><div class="mob-label">Jobs</div></div>
  <div class="mob-fab" onclick="toggleQuickActions()" id="mob-fab-btn">⚡</div>
  <div class="mob-nav-item" onclick="mobNav('clients',this)"><div class="mob-icon">👥</div><div class="mob-label">Clients</div></div>
  <div class="mob-nav-item" onclick="mobNav('money',this)"><div class="mob-icon">💰</div><div class="mob-label">Billing</div></div>
  <div class="mob-nav-item" onclick="mobNav('quote',this)"><div class="mob-icon">📝</div><div class="mob-label">Quotes</div></div>
</nav>

<!-- NOTIFICATION PANEL -->
<div class="notif-panel" id="notif-panel">
  <div class="card-header" style="padding:14px 16px">
    <div class="card-title">🔔 Notifications</div>
    <div style="display:flex;gap:6px;align-items:center">
      <button class="btn btn-ghost btn-sm" onclick="markAllNotifsRead()">Mark all read</button>
      <button type="button" class="modal-close" title="Close (Esc)" onclick="var e=document.getElementById('notif-panel');if(e)e.classList.remove('open')">×</button>
    </div>
  </div>
  <div id="notif-list"></div>
</div>

<!-- CLIENT MODAL -->
<div class="modal-overlay" id="client-modal" style="display:none" onclick="if(event.target===this){['modal-overlay','client-modal','job-flow-overlay'].forEach(function(id){var e=document.getElementById(id);if(e){e.classList.remove('open');e.style.display='none'}})}">
  <div class="modal" style="width:900px;max-width:97vw">

    <!-- HEADER -->
    <div class="modal-header" style="padding:14px 20px">
      <div style="display:flex;align-items:center;gap:12px;flex:1;min-width:0">
        <div id="cm-avatar" style="width:44px;height:44px;border-radius:11px;background:var(--amber-light);color:var(--amber);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0">SM</div>
        <div style="min-width:0;flex:1">
          <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
            <div class="modal-title" id="client-modal-title" style="font-size:17px">Sarah Mitchell</div>
            <span class="health-score hs-a" id="cm-health">A — Healthy</span>
            <span style="font-size:10.5px;color:var(--text-muted)" id="cm-last-job">Last job: Feb 18</span>
          </div>
          <div style="font-size:11.5px;color:var(--text-dim);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap">
            <span id="cm-type-addr">Residential · Springfield, IL</span>
            <span id="cm-pay-badge" style="color:var(--success)">⚡ Pays in 7 days</span>
          </div>
        </div>
      </div>
      <div style="display:flex;gap:6px;flex-shrink:0;align-items:center">
        <button class="btn btn-ghost btn-sm" onclick="cmCallClient(document.getElementById('client-modal-title').textContent)">📞</button>
        <button class="btn btn-ghost btn-sm" onclick="cmSendSMS(document.getElementById('client-modal-title').textContent)">📱</button>
        <button class="btn btn-ghost btn-sm" onclick="cmSendEmail(document.getElementById('client-modal-title').textContent)">📧</button>
        <button class="btn btn-ghost btn-sm" onclick="cmNavigate(document.getElementById('client-modal-title').textContent)">🚗</button>
        <button type="button" class="btn btn-primary btn-sm" onclick="closeAllModals();setTimeout(()=>openModal('new-job'),50)">+ Job</button>
        <button type="button" class="btn btn-del btn-sm" onclick="cmDeleteClient(document.getElementById('client-modal-title').textContent)" title="Delete this client">🗑</button>
        <button type="button" class="modal-close" title="Close (Esc)" onclick="['modal-overlay','client-modal','job-flow-overlay'].forEach(function(id){var e=document.getElementById(id);if(e){e.classList.remove('open');e.style.display='none'}});var np=document.getElementById('notif-panel');if(np)np.classList.remove('open')">×</button>
      </div>
    </div>

    <!-- SCROLLABLE BODY (next action + stats + tabs) -->
    <div class="modal-body" id="cm-scroll-body">

    <!-- NEXT ACTION BANNER -->
    <div class="cm-next-action" id="cm-next-action" onclick="cmDoNextAction(document.getElementById('client-modal-title').textContent)">
      <div class="cm-next-action-icon" id="cm-na-icon">⚡</div>
      <div class="cm-next-action-text" id="cm-na-text">Send EV charger estimate — Tesla arriving March</div>
      <div class="cm-next-action-due" id="cm-na-due">By Mar 1</div>
      <div style="font-size:11px;color:var(--text-muted);margin-left:4px">→</div>
    </div>

    <!-- STATS BAR -->
    <div class="cm-stats-bar">
      <div class="cm-stat">
        <div class="cm-stat-val" style="color:var(--amber)" id="cm-lifetime">$6,200</div>
        <div class="cm-stat-lbl">Lifetime</div>
      </div>
      <div class="cm-stat">
        <div class="cm-stat-val" id="cm-jobs">4</div>
        <div class="cm-stat-lbl">Jobs</div>
      </div>
      <div class="cm-stat">
        <div id="cm-sparkline" style="display:flex;align-items:flex-end;gap:2px;height:22px;justify-content:center;margin-bottom:2px"></div>
        <div class="cm-stat-lbl">Spend Trend</div>
      </div>
      <div class="cm-stat">
        <div class="cm-stat-val" style="color:var(--success)" id="cm-refs">3</div>
        <div class="cm-stat-lbl">Referrals</div>
      </div>
      <div class="cm-stat">
        <div class="cm-stat-val" style="color:var(--blue)" id="cm-avg-pay">7 days</div>
        <div class="cm-stat-lbl">Avg Pay</div>
      </div>
      <div class="cm-stat">
        <div class="cm-stat-val" style="color:var(--success)" id="cm-avg-margin">60%</div>
        <div class="cm-stat-lbl">Avg Margin</div>
      </div>
    </div>

    <!-- TABS -->
    <div class="tab-bar">
      <div class="tab active" onclick="ctab(this,'ct-overview')">Overview</div>
      <div class="tab" onclick="ctab(this,'ct-timeline')">Activity</div>
      <div class="tab" onclick="ctab(this,'ct-jobs')">Jobs</div>
      <div class="tab" onclick="ctab(this,'ct-billing')">Billing</div>
      <div class="tab" onclick="ctab(this,'ct-property')">Property</div>
      <div class="tab" onclick="ctab(this,'ct-schedule')">Service Schedule</div>
      <div class="tab" onclick="ctab(this,'ct-refs')">Referrals</div>
    </div>

    <!-- ── OVERVIEW TAB ─────────────────────────────────────────── -->
    <div class="tab-content active" id="ct-overview">
      <div style="display:grid;grid-template-columns:1fr 260px;gap:18px">
        <div>
          <!-- Contact info -->
          <div class="form-row" style="margin-bottom:12px">
            <div><div class="form-label">Name</div><span class="editable-text" onclick="iEdit(this)" id="cm-edit-name">Sarah Mitchell</span></div>
            <div><div class="form-label">Phone</div><span class="editable-text" onclick="iEdit(this)" id="cm-edit-phone">(555) 204-8810</span></div>
          </div>
          <div class="form-row" style="margin-bottom:12px">
            <div><div class="form-label">Email</div><span class="editable-text" onclick="iEdit(this)" id="cm-edit-email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2c1dfdbc6d1dad7dedef2d7dfd3dbde9cd1dddf">[email&#160;protected]</a></span></div>
            <div><div class="form-label">Client Type</div><span class="editable-text" onclick="iEdit(this)" id="cm-edit-type">Residential</span></div>
          </div>
          <div style="margin-bottom:12px">
            <div class="form-label">Address</div>
            <span class="editable-text" onclick="iEdit(this)" id="cm-edit-addr">412 Oak Lane, Springfield, IL 62701</span>
          </div>
          <div style="margin-bottom:12px">
            <div class="form-label">Lead Source</div>
            <span class="editable-text" onclick="iEdit(this)" id="cm-edit-source">Referral — Dave Novak</span>
          </div>
          <!-- Log note inline -->
          <div style="margin-bottom:14px">
            <div class="form-label" style="margin-bottom:6px">Log Interaction</div>
            <div style="display:flex;gap:7px">
              <select class="form-input" style="width:auto;min-height:36px;padding:5px 10px;font-size:12px" id="cm-log-type">
                <option>📝 Note</option><option>📞 Call</option><option>🏠 Visit</option><option>📧 Email</option><option>💬 Text</option>
              </select>
              <input class="form-input" style="flex:1;min-height:36px" placeholder="What happened?" id="cm-log-text">
              <button class="btn btn-primary btn-sm" onclick="cmLogNote()">Log</button>
            </div>
          </div>
          <!-- Suggestions -->
          <div>
            <div class="form-label" style="margin-bottom:6px">💡 Suggested Actions</div>
            <div id="cm-suggestions"></div>
          </div>
        </div>
        <div>
          <!-- AR snapshot -->
          <div class="form-label" style="margin-bottom:8px">Billing Summary</div>
          <div class="property-panel" style="margin-bottom:12px" id="cm-ar-summary"></div>
          <!-- Open permits -->
          <div class="form-label" style="margin-bottom:8px">Open Permits</div>
          <div id="cm-permits-box" style="margin-bottom:12px"></div>
          <!-- Tags -->
          <div class="form-label" style="margin-bottom:6px">Tags</div>
          <div id="cm-tags" style="display:flex;flex-wrap:wrap;gap:5px"></div>
        </div>
      </div>
    </div>

    <!-- ── ACTIVITY TIMELINE TAB ──────────────────────────────── -->
    <div class="tab-content" id="ct-timeline">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
        <div style="font-size:12.5px;color:var(--text-dim)">All jobs, invoices, comms and permits in chronological order</div>
      </div>
      <div id="cm-timeline-list"></div>
    </div>

    <!-- ── JOBS TAB ───────────────────────────────────────────── -->
    <div class="tab-content" id="ct-jobs">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
        <div style="font-size:12px;color:var(--text-dim)" id="cm-jobs-summary">4 jobs · $6,200 lifetime</div>
        <button type="button" class="btn btn-primary btn-sm" onclick="closeAllModals();setTimeout(()=>openModal('new-job'),50)">+ New Job</button>
      </div>
      <table class="data-table">
        <thead><tr><th>Job #</th><th>Type</th><th>Date</th><th>Tech</th><th>Value</th><th>Margin</th><th>Status</th></tr></thead>
        <tbody id="cm-job-rows"></tbody>
      </table>
    </div>

    <!-- ── BILLING TAB ────────────────────────────────────────── -->
    <div class="tab-content" id="ct-billing">
      <div style="display:grid;grid-template-columns:1fr 220px;gap:16px">
        <div>
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
            <div class="form-label" style="margin:0">Invoice History</div>
            <button class="btn btn-ghost btn-sm" onclick="cmAddInvoice(document.getElementById('client-modal-title').textContent)">+ Invoice</button>
          </div>
          <div class="card" style="overflow:hidden" id="cm-invoice-list"></div>
        </div>
        <div>
          <div class="form-label" style="margin-bottom:8px">AR Snapshot</div>
          <div id="cm-billing-snapshot"></div>
          <div class="form-label" style="margin-top:14px;margin-bottom:8px">Payment Behavior</div>
          <div id="cm-pay-behavior"></div>
        </div>
      </div>
    </div>

    <!-- ── PROPERTY TAB ───────────────────────────────────────── -->
    <div class="tab-content" id="ct-property">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
        <div>
          <div class="form-label" style="margin-bottom:8px">⚡ Panel & Service Record</div>
          <div class="property-panel" id="cm-panel-record"></div>
          <div class="form-label" style="margin-top:14px;margin-bottom:8px">Site Notes</div>
          <textarea class="form-input" rows="4" id="cm-site-notes" placeholder="Access codes, parking, hazards, prior work..."></textarea>
          <button class="btn btn-ghost btn-sm" style="margin-top:8px" onclick="cmSaveNotes(document.getElementById('client-modal-title').textContent)">Save Notes</button>
        </div>
        <div>
          <div class="form-label" style="margin-bottom:8px">📷 Photos & Documents</div>
          <div id="cm-photos-grid"></div>
        </div>
      </div>
    </div>

    <!-- ── SERVICE SCHEDULE TAB ───────────────────────────────── -->
    <div class="tab-content" id="ct-schedule">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
        <div style="font-size:12.5px;color:var(--text-dim)">Upcoming and overdue service items for this client</div>
        <button class="btn btn-ghost btn-sm" onclick="cmAddService(document.getElementById('client-modal-title').textContent)">+ Add Service</button>
      </div>
      <div class="card" style="overflow:hidden" id="cm-service-list"></div>
    </div>

    <!-- ── REFERRALS TAB ──────────────────────────────────────── -->
    <div class="tab-content" id="ct-refs">
      <div style="display:grid;grid-template-columns:1fr 200px;gap:18px">
        <div>
          <div style="margin-bottom:16px">
            <div class="form-label" style="margin-bottom:8px">Referred By</div>
            <div id="cm-referred-by"></div>
          </div>
          <div>
            <div class="form-label" style="margin-bottom:8px" id="cm-refs-sent-label">Clients Referred</div>
            <div id="cm-referrals-list"></div>
            <button class="btn btn-ghost btn-sm" style="margin-top:10px" onclick="cmCopyReferralLink(document.getElementById('client-modal-title').textContent)">📤 Copy Referral Link</button>
          </div>
        </div>
        <div>
          <div style="background:var(--surface2);border-radius:12px;padding:16px;text-align:center;margin-bottom:12px" id="cm-ref-stats"></div>
        </div>
      </div>
    </div>

    </div><!-- /cm-scroll-body -->
  </div>
</div>
<div class="modal-overlay" id="modal-overlay" style="display:none" onclick="if(event.target===this){['modal-overlay','client-modal','job-flow-overlay'].forEach(function(id){var e=document.getElementById(id);if(e){e.classList.remove('open');e.style.display='none'}})}">
  <div class="modal" id="modal-box">
    <div class="modal-header"><div class="modal-title" id="modal-title">Modal</div><button type="button" class="modal-close" title="Close (Esc)" onclick="['modal-overlay','client-modal','job-flow-overlay'].forEach(function(id){var e=document.getElementById(id);if(e){e.classList.remove('open');e.style.display='none'}});var np=document.getElementById('notif-panel');if(np)np.classList.remove('open')">×</button></div>
    <div class="modal-body" id="modal-body"></div>
    <div class="modal-footer" id="modal-footer"></div>
  </div>
</div>

<div class="flash" id="flash-msg"></div>

<script>// ============================================================
// HARD RESET — force all modals closed on every page load
// This runs synchronously before any other code
// ============================================================
(function() {
  // Force-close modal overlays using display:none (these are display-based)
  ['modal-overlay','client-modal'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) { el.classList.remove('open'); el.style.display = 'none'; }
  });
  // Force-close slide panels using classList only (these are transform-based)
  ['notif-panel','inv-preview-panel','job-flow-overlay'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.classList.remove('open');
  });
})();


// ============================================================
// DATA - Only load sample data if no user data exists
const sampleJobs=[
  {id:'J-001',client:'Sarah Mitchell',addr:'412 Oak Lane',type:'panel',name:'Panel Upgrade',tech:'Mike R.',date:'Feb 18',time:'8:00 AM',value:2800,status:'inprogress'},
  {id:'J-002',client:'Carlos Herrera',addr:'88 Maple Ave',type:'ev',name:'EV Charger',tech:'Jess T.',date:'Feb 18',time:'10:30 AM',value:950,status:'scheduled'},
  {id:'J-003',client:'Rachel Park',addr:'2201 Pine Blvd',type:'svc',name:'Service Call',tech:'Mike R.',date:'Feb 18',time:'2:00 PM',value:320,status:'scheduled'},
  {id:'J-004',client:'TK Building Group',addr:'55 Commerce Dr',type:'inst',name:'Commercial Install',tech:'Jess T.',date:'Feb 19',time:'7:00 AM',value:8400,status:'scheduled'},
  {id:'J-005',client:'Dave Novak',addr:'77 Birch Rd',type:'svc',name:'Service Call',tech:'Mike R.',date:'Feb 17',time:'9:00 AM',value:280,status:'complete'},
  {id:'J-006',client:'Linda Zhao',addr:'1050 Elm St',type:'panel',name:'Subpanel Add',tech:'Jess T.',date:'Feb 20',time:'8:00 AM',value:1600,status:'scheduled'},
  {id:'J-007',client:'Green Valley HOA',addr:'600 Greens Blvd',type:'inst',name:'Parking Lot Lights',tech:'Mike R.',date:'Feb 21',time:'7:30 AM',value:3200,status:'pending'},
  {id:'J-008',client:'Marcus Webb',addr:'34 Riverview Ave',type:'ev',name:'EV Charger',tech:'Jess T.',date:'Feb 22',time:'11:00 AM',value:1100,status:'scheduled'},
];
const sampleClients=[
  {name:'Sarah Mitchell',addr:'412 Oak Lane, Springfield',jobs:4,spent:6200,color:'var(--amber)',init:'SM'},
  {name:'Carlos Herrera',addr:'88 Maple Ave, Oak Park',jobs:2,spent:1750,color:'var(--blue)',init:'CH'},
  {name:'Rachel Park',addr:'2201 Pine Blvd, Lakewood',jobs:1,spent:320,color:'var(--green)',init:'RP'},
  {name:'TK Building Group',addr:'55 Commerce Dr, Riverside',jobs:6,spent:24800,color:'var(--orange)',init:'TK'},
  {name:'Dave Novak',addr:'77 Birch Rd, Pinehurst',jobs:3,spent:2100,color:'#b57cf8',init:'DN'},
  {name:'Linda Zhao',addr:'1050 Elm St, Maplewood',jobs:1,spent:1600,color:'#34d399',init:'LZ'},
];

// Check if user has real data
function hasRealData() {
  const savedJobs = localStorage.getItem('amp_jobs');
  const savedClients = localStorage.getItem('amp_clients');
  return (savedJobs && savedJobs.length > 10) || (savedClients && savedClients.length > 10);
}

// Use sample data only if no real data
const jobs = hasRealData() ? [] : sampleJobs;
const clients = hasRealData() ? [] : sampleClients;
const permits=[
  {num:'EL-2026-0441',addr:'412 Oak Lane',type:'Panel Upgrade — 200A',expiry:'Mar 15',stage:2,urg:'y'},
  {num:'EL-2026-0389',addr:'55 Commerce Dr',type:'Commercial New Construction',expiry:'Jun 30',stage:3,urg:'g'},
  {num:'EL-2026-0302',addr:'77 Birch Rd',type:'Service Upgrade',expiry:'Feb 10',stage:1,urg:'r'},
  {num:'EL-2026-0415',addr:'88 Maple Ave',type:'EV Charger Install',expiry:'Apr 1',stage:1,urg:'o'},
  {num:'EL-2026-0398',addr:'600 Greens Blvd',type:'Parking Lot Lighting',expiry:'Apr 20',stage:0,urg:'o'},
];
let pb=[
  // ── PANEL & SERVICE ────────────────────────────────────────────────
  {id:1,  cat:'panel',  name:'100A Panel Upgrade',                    labor:420,  mat:280,  total:700},
  {id:2,  cat:'panel',  name:'200A Panel Upgrade',                    labor:560,  mat:340,  total:900},
  {id:3,  cat:'panel',  name:'400A Panel Upgrade',                    labor:820,  mat:680,  total:1500},
  {id:4,  cat:'panel',  name:'Subpanel Addition (60A)',               labor:380,  mat:210,  total:590},
  {id:5,  cat:'panel',  name:'Subpanel Addition (100A)',              labor:440,  mat:260,  total:700},
  {id:6,  cat:'panel',  name:'Subpanel Addition (200A)',              labor:560,  mat:380,  total:940},
  {id:7,  cat:'panel',  name:'Breaker Replacement (Single-Pole)',     labor:40,   mat:25,   total:65},
  {id:8,  cat:'panel',  name:'Breaker Replacement (Double-Pole)',     labor:55,   mat:45,   total:100},
  {id:9,  cat:'panel',  name:'AFCI Breaker Upgrade (per circuit)',    labor:55,   mat:45,   total:100},
  {id:10, cat:'panel',  name:'GFCI Breaker Install',                  labor:65,   mat:55,   total:120},
  {id:11, cat:'panel',  name:'Tandem Breaker Install',                labor:50,   mat:35,   total:85},
  {id:12, cat:'panel',  name:'Main Disconnect Install',               labor:180,  mat:120,  total:300},
  {id:13, cat:'panel',  name:'Meter Base Replacement',                labor:280,  mat:180,  total:460},
  {id:14, cat:'panel',  name:'Service Entrance Upgrade (100A)',       labor:480,  mat:320,  total:800},
  {id:15, cat:'panel',  name:'Service Entrance Upgrade (200A)',       labor:640,  mat:480,  total:1120},
  {id:16, cat:'panel',  name:'Panel Relocation',                      labor:560,  mat:280,  total:840},
  {id:17, cat:'panel',  name:'Temporary Power Panel (Construction)',  labor:320,  mat:180,  total:500},
  {id:18, cat:'panel',  name:'Federal Pacific / Zinsco Replacement',  labor:680,  mat:420,  total:1100},

  // ── OUTLETS & SWITCHES ─────────────────────────────────────────────
  {id:19, cat:'outlets',name:'Standard 15A Outlet Install',           labor:45,   mat:15,   total:60},
  {id:20, cat:'outlets',name:'Standard 20A Outlet Install',           labor:55,   mat:22,   total:77},
  {id:21, cat:'outlets',name:'GFCI Outlet Install',                   labor:55,   mat:30,   total:85},
  {id:22, cat:'outlets',name:'AFCI Outlet Install',                   labor:60,   mat:40,   total:100},
  {id:23, cat:'outlets',name:'USB Outlet Install',                    labor:55,   mat:38,   total:93},
  {id:24, cat:'outlets',name:'Dryer Outlet (30A, 4-wire)',            labor:120,  mat:55,   total:175},
  {id:25, cat:'outlets',name:'Range Outlet (50A)',                    labor:130,  mat:60,   total:190},
  {id:26, cat:'outlets',name:'Welder Outlet (50A)',                   labor:140,  mat:65,   total:205},
  {id:27, cat:'outlets',name:'20A Dedicated Circuit + Outlet',        labor:120,  mat:55,   total:175},
  {id:28, cat:'outlets',name:'30A Dedicated Circuit',                 labor:150,  mat:70,   total:220},
  {id:29, cat:'outlets',name:'Outlet Relocation',                     labor:90,   mat:20,   total:110},
  {id:30, cat:'outlets',name:'Tamper-Resistant Outlet (each)',        labor:45,   mat:18,   total:63},
  {id:31, cat:'outlets',name:'Dimmer Switch Install',                 labor:40,   mat:35,   total:75},
  {id:32, cat:'outlets',name:'Smart Switch Install',                  labor:55,   mat:55,   total:110},
  {id:33, cat:'outlets',name:'3-Way Switch Install',                  labor:75,   mat:45,   total:120},
  {id:34, cat:'outlets',name:'4-Way Switch Install',                  labor:90,   mat:55,   total:145},
  {id:35, cat:'outlets',name:'Ceiling Fan Switch / Remote',           labor:65,   mat:40,   total:105},
  {id:36, cat:'outlets',name:'Timer Switch Install',                  labor:55,   mat:45,   total:100},

  // ── WIRING & CIRCUITS ──────────────────────────────────────────────
  {id:37, cat:'wiring', name:'New Circuit — 15A',                     labor:180,  mat:60,   total:240},
  {id:38, cat:'wiring', name:'New Circuit — 20A',                     labor:200,  mat:75,   total:275},
  {id:39, cat:'wiring', name:'New Circuit — 30A',                     labor:240,  mat:95,   total:335},
  {id:40, cat:'wiring', name:'New Circuit — 50A',                     labor:280,  mat:120,  total:400},
  {id:41, cat:'wiring', name:'Dedicated Appliance Circuit',           labor:220,  mat:85,   total:305},
  {id:42, cat:'wiring', name:'Wire Fishing (per hour)',               labor:95,   mat:10,   total:105},
  {id:43, cat:'wiring', name:'Conduit Run — 1/2 in EMT (per 10ft)',    labor:45,   mat:12,   total:57},
  {id:44, cat:'wiring', name:'Conduit Run — 3/4 in EMT (per 10ft)',    labor:55,   mat:18,   total:73},
  {id:45, cat:'wiring', name:'Junction Box Install',                  labor:65,   mat:20,   total:85},
  {id:46, cat:'wiring', name:'Knob & Tube Removal (per room)',        labor:380,  mat:120,  total:500},
  {id:47, cat:'wiring', name:'Aluminum Wiring Remediation (per room)',labor:280,  mat:80,   total:360},
  {id:48, cat:'wiring', name:'Partial Rewire (per room)',             labor:480,  mat:180,  total:660},
  {id:49, cat:'wiring', name:'Full Home Rewire (1,000 sq ft)',        labor:2800, mat:900,  total:3700},
  {id:50, cat:'wiring', name:'Full Home Rewire (2,000 sq ft)',        labor:4800, mat:1600, total:6400},
  {id:51, cat:'wiring', name:'Full Home Rewire (3,000 sq ft)',        labor:6800, mat:2200, total:9000},

  // ── LIGHTING ───────────────────────────────────────────────────────
  {id:52, cat:'lighting',name:'Recessed Light Install (each)',        labor:75,   mat:45,   total:120},
  {id:53, cat:'lighting',name:'Recessed Light Retrofit LED (each)',   labor:55,   mat:35,   total:90},
  {id:54, cat:'lighting',name:'Recessed Lights — 6-Pack',            labor:380,  mat:220,  total:600},
  {id:55, cat:'lighting',name:'Ceiling Fan Install (existing wiring)',labor:95,   mat:50,   total:145},
  {id:56, cat:'lighting',name:'Ceiling Fan Install (new wiring)',     labor:180,  mat:90,   total:270},
  {id:57, cat:'lighting',name:'Chandelier Install',                   labor:140,  mat:60,   total:200},
  {id:58, cat:'lighting',name:'Pendant Light Install',                labor:90,   mat:45,   total:135},
  {id:59, cat:'lighting',name:'Under Cabinet Lighting (linear)',      labor:110,  mat:80,   total:190},
  {id:60, cat:'lighting',name:'Outdoor Wall Light (per fixture)',     labor:65,   mat:40,   total:105},
  {id:61, cat:'lighting',name:'Outdoor Flood Light Install',          labor:90,   mat:55,   total:145},
  {id:62, cat:'lighting',name:'Motion Sensor Light Install',          labor:85,   mat:60,   total:145},
  {id:63, cat:'lighting',name:'Vanity Light Install',                 labor:80,   mat:45,   total:125},
  {id:64, cat:'lighting',name:'Track Lighting Install',               labor:130,  mat:95,   total:225},
  {id:65, cat:'lighting',name:'Commercial Troffer (2x4, each)',       labor:80,   mat:65,   total:145},
  {id:66, cat:'lighting',name:'Exit Sign / Emergency Light',          labor:90,   mat:80,   total:170},
  {id:67, cat:'lighting',name:'Landscape Lighting (per fixture)',     labor:85,   mat:55,   total:140},
  {id:68, cat:'lighting',name:'Landscape Lighting — System (10 fix)',labor:680,  mat:420,  total:1100},

  // ── EV CHARGING ────────────────────────────────────────────────────
  {id:69, cat:'ev',     name:'EV Charger — Level 1 (NEMA 5-15)',     labor:80,   mat:20,   total:100},
  {id:70, cat:'ev',     name:'EV Charger — Level 2 (NEMA 14-50)',    labor:350,  mat:150,  total:500},
  {id:71, cat:'ev',     name:'EV Charger — Level 2 (Hardwired)',      labor:420,  mat:180,  total:600},
  {id:72, cat:'ev',     name:'EV Charger — Tesla Wall Connector',     labor:380,  mat:200,  total:580},
  {id:73, cat:'ev',     name:'EV Charger + New 50A Circuit',          labor:560,  mat:240,  total:800},
  {id:74, cat:'ev',     name:'EV Charger + New Subpanel',             labor:680,  mat:320,  total:1000},
  {id:75, cat:'ev',     name:'EV Charger — Multi-Unit (per unit)',    labor:480,  mat:200,  total:680},
  {id:76, cat:'ev',     name:'EV Charger — Commercial DC Fast Prep',  labor:1200, mat:800,  total:2000},
  {id:77, cat:'ev',     name:'Load Management Device Install',        labor:180,  mat:120,  total:300},

  // ── HVAC & APPLIANCES ──────────────────────────────────────────────
  {id:78, cat:'hvac',   name:'AC Disconnect Install',                 labor:120,  mat:60,   total:180},
  {id:79, cat:'hvac',   name:'AC Disconnect Replace',                 labor:90,   mat:50,   total:140},
  {id:80, cat:'hvac',   name:'Mini-Split Wiring (single zone)',       labor:280,  mat:120,  total:400},
  {id:81, cat:'hvac',   name:'Mini-Split Wiring (multi-zone)',        labor:480,  mat:220,  total:700},
  {id:82, cat:'hvac',   name:'Heat Pump Wiring',                      labor:240,  mat:100,  total:340},
  {id:83, cat:'hvac',   name:'Furnace Wiring',                        labor:120,  mat:40,   total:160},
  {id:84, cat:'hvac',   name:'Electric Water Heater Circuit',         labor:180,  mat:70,   total:250},
  {id:85, cat:'hvac',   name:'Tankless Water Heater Circuit',         labor:220,  mat:90,   total:310},
  {id:86, cat:'hvac',   name:'Electric Range Circuit (50A)',          labor:200,  mat:80,   total:280},
  {id:87, cat:'hvac',   name:'Electric Dryer Circuit (30A)',          labor:160,  mat:65,   total:225},
  {id:88, cat:'hvac',   name:'Dishwasher Circuit',                    labor:150,  mat:55,   total:205},
  {id:89, cat:'hvac',   name:'Garbage Disposal Circuit',              labor:130,  mat:45,   total:175},
  {id:90, cat:'hvac',   name:'Bathroom Exhaust Fan (existing wiring)',labor:110,  mat:55,   total:165},
  {id:91, cat:'hvac',   name:'Bathroom Exhaust Fan (new wiring)',     labor:180,  mat:75,   total:255},
  {id:92, cat:'hvac',   name:'Attic Fan Install',                     labor:200,  mat:90,   total:290},
  {id:93, cat:'hvac',   name:'Pool Pump Wiring',                      labor:280,  mat:120,  total:400},
  {id:94, cat:'hvac',   name:'Hot Tub / Spa Wiring (50A)',            labor:480,  mat:200,  total:680},
  {id:95, cat:'hvac',   name:'Sauna Wiring',                          labor:320,  mat:130,  total:450},

  // ── SAFETY & CODE ──────────────────────────────────────────────────
  {id:96, cat:'safety', name:'Smoke Detector Install (each)',         labor:50,   mat:35,   total:85},
  {id:97, cat:'safety', name:'Smoke Detectors — Whole Home (4-bed)',  labor:320,  mat:200,  total:520},
  {id:98, cat:'safety', name:'CO Detector Install (each)',            labor:55,   mat:40,   total:95},
  {id:99, cat:'safety', name:'Smoke + CO Combo (each)',               labor:60,   mat:50,   total:110},
  {id:100,cat:'safety', name:'Whole Home Surge Protector (panel)',    labor:80,   mat:120,  total:200},
  {id:101,cat:'safety', name:'Whole Home Surge Protector (premium)',  labor:90,   mat:200,  total:290},
  {id:102,cat:'safety', name:'Arc Fault (AFCI) Upgrade — Whole Home',labor:480,  mat:320,  total:800},
  {id:103,cat:'safety', name:'GFCI Upgrade — Whole Home',             labor:380,  mat:240,  total:620},
  {id:104,cat:'safety', name:'Tamper-Resistant Outlet Upgrade',       labor:280,  mat:120,  total:400},
  {id:105,cat:'safety', name:'Code Compliance Upgrade (per item)',    labor:120,  mat:60,   total:180},
  {id:106,cat:'safety', name:'Grounding / Bonding',                   labor:180,  mat:80,   total:260},
  {id:107,cat:'safety', name:'Safety Inspection (residential)',       labor:180,  mat:0,    total:180},
  {id:108,cat:'safety', name:'Generator Transfer Switch (manual)',    labor:280,  mat:220,  total:500},
  {id:109,cat:'safety', name:'Generator Transfer Switch (auto)',      labor:380,  mat:480,  total:860},
  {id:110,cat:'safety', name:'Whole Home Generator Hookup',           labor:580,  mat:320,  total:900},

  // ── OUTDOOR & EXTERIOR ─────────────────────────────────────────────
  {id:111,cat:'outdoor',name:'Outdoor GFCI Outlet Install',           labor:90,   mat:35,   total:125},
  {id:112,cat:'outdoor',name:'Deck / Patio Wiring Package',           labor:380,  mat:160,  total:540},
  {id:113,cat:'outdoor',name:'Pool Lighting Install',                 labor:320,  mat:180,  total:500},
  {id:114,cat:'outdoor',name:'Exterior Flood Light (each)',           labor:90,   mat:55,   total:145},
  {id:115,cat:'outdoor',name:'Holiday Lighting Circuit',              labor:160,  mat:60,   total:220},
  {id:116,cat:'outdoor',name:'Detached Garage Wiring',                labor:480,  mat:240,  total:720},
  {id:117,cat:'outdoor',name:'Shed / Workshop Wiring',                labor:320,  mat:160,  total:480},
  {id:118,cat:'outdoor',name:'Outdoor Subpanel',                      labor:480,  mat:280,  total:760},
  {id:119,cat:'outdoor',name:'Security Camera Wiring (per camera)',   labor:90,   mat:30,   total:120},
  {id:120,cat:'outdoor',name:'Driveway Gate Wiring',                  labor:280,  mat:120,  total:400},

  // ── SMART HOME & LOW VOLTAGE ───────────────────────────────────────
  {id:121,cat:'smart',  name:'Smart Panel Install (Span / Lumin)',    labor:480,  mat:1200, total:1680},
  {id:122,cat:'smart',  name:'Smart Switch (per switch)',             labor:55,   mat:55,   total:110},
  {id:123,cat:'smart',  name:'Smart Switch — Full Home (15 switches)',labor:680,  mat:680,  total:1360},
  {id:124,cat:'smart',  name:'Smart Dimmer Install',                  labor:60,   mat:65,   total:125},
  {id:125,cat:'smart',  name:'Smart Thermostat Wiring',               labor:80,   mat:0,    total:80},
  {id:126,cat:'smart',  name:'Video Doorbell / Ring Wiring',          labor:90,   mat:20,   total:110},
  {id:127,cat:'smart',  name:'Security Camera Wiring (per camera)',   labor:90,   mat:30,   total:120},
  {id:128,cat:'smart',  name:'Cat6 Ethernet Run (per drop)',          labor:110,  mat:35,   total:145},
  {id:129,cat:'smart',  name:'Structured Wiring Panel',               labor:280,  mat:180,  total:460},
  {id:130,cat:'smart',  name:'TV / Media Mount + Wiring',             labor:120,  mat:40,   total:160},
  {id:131,cat:'smart',  name:'Whole-Home Audio Wiring (per room)',    labor:160,  mat:80,   total:240},
  {id:132,cat:'smart',  name:'Low Voltage Rough-In (per room)',       labor:120,  mat:50,   total:170},

  // ── COMMERCIAL ────────────────────────────────────────────────────
  {id:133,cat:'commercial',name:'Commercial Panel Upgrade',           labor:1200, mat:800,  total:2000},
  {id:134,cat:'commercial',name:'3-Phase Service Install',            labor:1800, mat:1200, total:3000},
  {id:135,cat:'commercial',name:'Tenant Improvement (TI) per sq ft', labor:8,    mat:4,    total:12},
  {id:136,cat:'commercial',name:'Commercial Lighting Retrofit (per fix)',labor:80,mat:65,   total:145},
  {id:137,cat:'commercial',name:'Emergency Lighting Install (each)',  labor:90,   mat:80,   total:170},
  {id:138,cat:'commercial',name:'Exit Sign Install (each)',           labor:70,   mat:65,   total:135},
  {id:139,cat:'commercial',name:'Motor Control / VFD Wiring',        labor:480,  mat:280,  total:760},
  {id:140,cat:'commercial',name:'Parking Lot Light Pole',             labor:380,  mat:280,  total:660},
  {id:141,cat:'commercial',name:'Sign Lighting Install',              labor:220,  mat:120,  total:340},
  {id:142,cat:'commercial',name:'Restaurant Equipment Wiring',        labor:320,  mat:180,  total:500},
  {id:143,cat:'commercial',name:'Rooftop HVAC Disconnect',            labor:180,  mat:90,   total:270},
  {id:144,cat:'commercial',name:'Data Center / Server Room Wiring',   labor:480,  mat:240,  total:720},

  // ── SERVICE CALLS ─────────────────────────────────────────────────
  {id:145,cat:'service',name:'Diagnostic Service Call (1 hr)',        labor:120,  mat:0,    total:120},
  {id:146,cat:'service',name:'Diagnostic Service Call (2 hr)',        labor:220,  mat:0,    total:220},
  {id:147,cat:'service',name:'Diagnostic Service Call (half day)',    labor:380,  mat:0,    total:380},
  {id:148,cat:'service',name:'Emergency Service Call (after hours)',  labor:280,  mat:0,    total:280},
  {id:149,cat:'service',name:'Emergency Service Call (weekend)',      labor:340,  mat:0,    total:340},
  {id:150,cat:'service',name:'Tripped Breaker Investigation',         labor:100,  mat:10,   total:110},
  {id:151,cat:'service',name:'No Power — Troubleshoot',               labor:140,  mat:20,   total:160},
  {id:152,cat:'service',name:'Outlets Not Working (diagnosis)',       labor:110,  mat:10,   total:120},
  {id:153,cat:'service',name:'Flickering Lights (diagnosis)',         labor:110,  mat:10,   total:120},
  {id:154,cat:'service',name:'Burning Smell Investigation',           labor:160,  mat:20,   total:180},
  {id:155,cat:'service',name:'Sparking Outlet Investigation',         labor:140,  mat:15,   total:155},
  {id:156,cat:'service',name:'Panel Buzzing / Overheating',           labor:150,  mat:20,   total:170},
  {id:157,cat:'service',name:'Electrical Inspection (residential)',   labor:180,  mat:0,    total:180},
  {id:158,cat:'service',name:'Pre-Sale Home Inspection',              labor:200,  mat:0,    total:200},
  {id:159,cat:'service',name:'Insurance Inspection Report',           labor:220,  mat:0,    total:220},
  {id:160,cat:'service',name:'Permit Final Inspection Prep',          labor:160,  mat:0,    total:160},

  // ── INSPECTION & PERMIT ───────────────────────────────────────────
  {id:161,cat:'inspection',name:'Pre-Sale Electrical Inspection',     labor:200,  mat:0,    total:200},
  {id:162,cat:'inspection',name:'Post-Purchase Inspection',           labor:220,  mat:0,    total:220},
  {id:163,cat:'inspection',name:'Permit Pulling — Residential',       labor:120,  mat:0,    total:120},
  {id:164,cat:'inspection',name:'Permit Pulling — Commercial',        labor:180,  mat:0,    total:180},
  {id:165,cat:'inspection',name:'Load Calculation',                   labor:180,  mat:0,    total:180},
  {id:166,cat:'inspection',name:'As-Built Drawing',                   labor:280,  mat:0,    total:280},

  // ── OTHER (custom line item) ───────────────────────────────────────
  {id:167,cat:'other',  name:'Custom / Unlisted Work',                labor:0,    mat:0,    total:0,    custom:true},
];
let pbNext=168, pbEditId=null, pbCat='all';

// ── MATERIALS CATALOG ────────────────────────────────────────────────
// Layer 1: Your actual stock with real supplier cost + quantity on hand
let materials = [
  {id:1, cat:'breakers',  name:'20A Single-Pole Breaker',    unit:'ea',  cost:8.50,  stock:24, reorder:10, supplier:'Grainger', sku:'SQ-HOM120CP'},
  {id:2, cat:'breakers',  name:'30A Double-Pole Breaker',    unit:'ea',  cost:14.75, stock:12, reorder:6,  supplier:'Grainger', sku:'SQ-HOM230CP'},
  {id:3, cat:'breakers',  name:'50A Double-Pole Breaker',    unit:'ea',  cost:18.50, stock:6,  reorder:4,  supplier:'Grainger', sku:'SQ-HOM250CP'},
  {id:4, cat:'breakers',  name:'20A AFCI Breaker',           unit:'ea',  cost:42.00, stock:8,  reorder:4,  supplier:'Home Depot', sku:'SQ-HOM120CAFI'},
  {id:5, cat:'breakers',  name:'20A GFCI Breaker',           unit:'ea',  cost:38.50, stock:4,  reorder:3,  supplier:'Home Depot', sku:'SQ-HOM120CAFI'},
  {id:6, cat:'wire',      name:'12/2 NM-B Wire (250ft)',     unit:'roll',cost:68.00, stock:3,  reorder:2,  supplier:'Grainger', sku:'SOU-28827401'},
  {id:7, cat:'wire',      name:'10/2 NM-B Wire (250ft)',     unit:'roll',cost:112.00,stock:2,  reorder:1,  supplier:'Grainger', sku:'SOU-28827421'},
  {id:8, cat:'wire',      name:'14/2 NM-B Wire (250ft)',     unit:'roll',cost:48.00, stock:4,  reorder:2,  supplier:'Grainger', sku:'SOU-28827381'},
  {id:9, cat:'wire',      name:'8/3 Wire (100ft)',           unit:'roll',cost:95.00, stock:1,  reorder:1,  supplier:'Grainger', sku:'SOU-28827451'},
  {id:10,cat:'outlets',   name:'15A Duplex Outlet',          unit:'ea',  cost:1.85,  stock:40, reorder:15, supplier:'Home Depot', sku:'LE-R51'},
  {id:11,cat:'outlets',   name:'20A GFCI Outlet',            unit:'ea',  cost:16.50, stock:18, reorder:8,  supplier:'Home Depot', sku:'LE-GFNT1'},
  {id:12,cat:'outlets',   name:'15A AFCI Outlet',            unit:'ea',  cost:22.00, stock:8,  reorder:4,  supplier:'Home Depot', sku:'LE-AFTR1'},
  {id:13,cat:'outlets',   name:'20A Tamper-Resistant Outlet',unit:'ea',  cost:4.25,  stock:20, reorder:10, supplier:'Home Depot', sku:'LE-TR20'},
  {id:14,cat:'panels',    name:'100A Main Panel (20-space)', unit:'ea',  cost:185.00,stock:2,  reorder:1,  supplier:'Grainger', sku:'SQ-PNL20L100PGC'},
  {id:15,cat:'panels',    name:'200A Main Panel (40-space)', unit:'ea',  cost:310.00,stock:1,  reorder:1,  supplier:'Grainger', sku:'SQ-PNL40L200PG'},
  {id:16,cat:'panels',    name:'60A Subpanel (12-space)',    unit:'ea',  cost:95.00, stock:2,  reorder:1,  supplier:'Grainger', sku:'SQ-PNL12L60'},
  {id:17,cat:'conduit',   name:'1/2" EMT Conduit (10ft)',   unit:'stick',cost:4.20, stock:15, reorder:8,  supplier:'Grainger', sku:'MUL-04202'},
  {id:18,cat:'conduit',   name:'3/4" EMT Conduit (10ft)',   unit:'stick',cost:6.80, stock:10, reorder:5,  supplier:'Grainger', sku:'MUL-04203'},
  {id:19,cat:'conduit',   name:'1" EMT Conduit (10ft)',     unit:'stick',cost:10.50,stock:6,  reorder:4,  supplier:'Grainger', sku:'MUL-04204'},
  {id:20,cat:'fittings',  name:'1/2" EMT Connector',        unit:'ea',  cost:0.65,  stock:50, reorder:20, supplier:'Grainger', sku:'RAC-2930'},
  {id:21,cat:'fittings',  name:'3/4" EMT Connector',        unit:'ea',  cost:0.95,  stock:30, reorder:15, supplier:'Grainger', sku:'RAC-2931'},
  {id:22,cat:'fittings',  name:'Wire Nut Assortment (100pk)',unit:'pk',  cost:8.50,  stock:8,  reorder:3,  supplier:'Home Depot', sku:'IDE-30-1037'},
  {id:23,cat:'devices',   name:'Decora Dimmer Switch',      unit:'ea',  cost:18.50, stock:6,  reorder:3,  supplier:'Home Depot', sku:'LE-DSL06'},
  {id:24,cat:'devices',   name:'Single-Pole Switch 15A',    unit:'ea',  cost:1.95,  stock:25, reorder:10, supplier:'Home Depot', sku:'LE-1221'},
  {id:25,cat:'safety',    name:'Smoke Detector (AC/DC)',    unit:'ea',  cost:22.00, stock:3,  reorder:4,  supplier:'Home Depot', sku:'KID-I4618'},
  {id:26,cat:'safety',    name:'Combo Smoke/CO Detector',   unit:'ea',  cost:34.50, stock:2,  reorder:3,  supplier:'Home Depot', sku:'KID-P4010ACS'},
  {id:27,cat:'ev',        name:'NEMA 14-50 Outlet',         unit:'ea',  cost:14.50, stock:4,  reorder:2,  supplier:'Home Depot', sku:'LE-279320026'},
  {id:28,cat:'ev',        name:'40A Breaker (EV Charger)',  unit:'ea',  cost:16.50, stock:3,  reorder:2,  supplier:'Grainger', sku:'SQ-HOM240CP'},
];
let matNext = 29;

// ── JOB MATERIALS (Layer 2: materials assigned to specific jobs) ──────
// jobMaterials[jobId] = [{matId, qty, deducted}]
let jobMaterials = {
  'J-001': [{matId:2, qty:1, deducted:false}, {matId:6, qty:1, deducted:false}, {matId:20, qty:4, deducted:false}],
  'J-008': [{matId:11, qty:3, deducted:false}, {matId:10, qty:2, deducted:false}],
};

const MAT_CATS = {
  all:      'All Items',
  breakers: 'Breakers',
  wire:     'Wire & Cable',
  outlets:  'Outlets & Devices',
  panels:   'Panels',
  conduit:  'Conduit',
  fittings: 'Fittings & Hardware',
  devices:  'Switches & Dimmers',
  safety:   'Safety Devices',
  ev:       'EV Charging',
};

let matCat = 'all';


const invoices=[
  {num:'INV-0088',client:'Sarah Mitchell',job:'J-001 — Panel Upgrade',issued:'Feb 10, 2026',due:'Feb 24, 2026',amount:2800,status:'viewed',payMethod:null,
   lines:[
     {desc:'200A Panel Upgrade (labor)',qty:1,rate:560,total:560},
     {desc:'Square D 200A Panel + materials',qty:1,rate:340,total:340},
     {desc:'Permit fee reimbursement',qty:1,rate:85,total:85},
     {desc:'Permit EL-2026-0441 processing',qty:1,rate:0,total:0},
   ],subtotal:985,tax:62,deposit:0,notes:'Federal Pacific removal included. Permit EL-2026-0441 pending inspection.'},
  {num:'INV-0087',client:'Dave Novak',job:'J-005 — Service Call',issued:'Dec 17, 2025',due:'Jan 17, 2026',amount:280,status:'overdue',payMethod:null,
   lines:[
     {desc:'Diagnostic service call (2hr)',qty:1,rate:220,total:220},
     {desc:'Breaker replacement parts',qty:2,rate:30,total:60},
   ],subtotal:280,tax:0,deposit:0,notes:'Payment due on receipt. 61 days past due.'},
  {num:'INV-0086',client:'TK Building Group',job:'J-077 — Commercial Phase 1',issued:'Jan 28, 2026',due:'Feb 11, 2026',amount:6120,status:'paid',payMethod:'Zelle',
   lines:[
     {desc:'Commercial wiring — 4 tenant spaces',qty:4,rate:1200,total:4800},
     {desc:'Panel room work + 3-phase connections',qty:1,rate:980,total:980},
     {desc:'Materials + conduit',qty:1,rate:340,total:340},
   ],subtotal:6120,tax:0,deposit:0,notes:'Net-30 terms. PO #TK-2026-014.'},
  {num:'INV-0085',client:'Carlos Herrera',job:'J-042 — GFCI Service Call',issued:'Jan 15, 2026',due:'Jan 29, 2026',amount:800,status:'paid',payMethod:'Card',
   lines:[
     {desc:'GFCI outlet installation (3 outlets)',qty:3,rate:85,total:255},
     {desc:'Diagnostic service call',qty:1,rate:120,total:120},
     {desc:'GFCI breaker upgrade',qty:1,rate:425,total:425},
   ],subtotal:800,tax:0,deposit:0,notes:''},
  {num:'INV-0084',client:'Linda Zhao',job:'J-006 — Subpanel Install',issued:'Feb 14, 2026',due:'Feb 28, 2026',amount:1600,status:'sent',payMethod:null,
   lines:[
     {desc:'60A subpanel installation (labor)',qty:1,rate:380,total:380},
     {desc:'Square D subpanel + breakers',qty:1,rate:210,total:210},
     {desc:'Additional outlets (6x)',qty:6,rate:60,total:360},
     {desc:'Wiring materials',qty:1,rate:280,total:280},
     {desc:'Dimmer switches (2x)',qty:2,rate:75,total:150},
     {desc:'Leviton Decora panel cover',qty:1,rate:220,total:220},
   ],subtotal:1600,tax:0,deposit:0,notes:'Premium fixtures per client request.'},
];
const tasks=[
  {id:1,text:'Follow up with Carlos Herrera on quote',due:'Feb 18',done:false,urgent:true,client:'Carlos Herrera'},
  {id:2,text:'Call Green Valley HOA re: scope',due:'Feb 18',done:false,urgent:true,client:'Green Valley HOA'},
  {id:3,text:'Schedule inspection for EL-2026-0441',due:'Feb 19',done:false,urgent:true,client:'Sarah Mitchell'},
  {id:4,text:'Re-permit for 77 Birch Rd — overdue',due:'Feb 20',done:false,urgent:true,client:'Dave Novak'},
  {id:5,text:'Send overdue notice — INV-0087',due:'Feb 21',done:false,urgent:false,client:'Dave Novak'},
  {id:6,text:'Quote TK Building Group Phase 2',due:'Feb 24',done:false,urgent:false,client:'TK Building Group'},
  {id:7,text:'Check in with Linda Zhao',due:'Feb 25',done:false,urgent:false,client:'Linda Zhao'},
  {id:8,text:'Review material costs for March',due:'Mar 1',done:false,urgent:false,client:''},
];
let recurring=[
  {client:'Green Valley HOA',service:'Annual Lighting Inspection',freq:'Yearly',next:'Nov 2026',value:850,status:'active'},
  {client:'TK Building Group',service:'Quarterly Panel Check',freq:'Quarterly',next:'Mar 2026',value:320,status:'active'},
  {client:'Rachel Park',service:'GFCI Test & Safety Check',freq:'Yearly',next:'Aug 2026',value:180,status:'active'},
  {client:'Dave Novak',service:'Generator Maintenance',freq:'Bi-Yearly',next:'Jun 2026',value:240,status:'paused'},
];
const notifications=[
  {icon:'⚠️',title:'Permit EL-2026-0302 OVERDUE',detail:'77 Birch Rd — expired Feb 10.',unread:true,c:'var(--red)'},
  {icon:'📋',title:'Inspection Ready: EL-2026-0441',detail:'412 Oak Lane — ready for final inspection.',unread:true,c:'var(--yellow)'},
  {icon:'💰',title:'Invoice INV-0087 Overdue',detail:'Dave Novak — $280 overdue.',unread:true,c:'var(--orange)'},
  {icon:'🔧',title:'TK Building Group job tomorrow',detail:'J-004 — 55 Commerce Dr — 7:00 AM.',unread:true,c:'var(--blue)'},
  {icon:'✅',title:'J-005 marked complete',detail:'Dave Novak — $280.',unread:false,c:'var(--green)'},
  {icon:'💬',title:'Quote viewed: Carlos Herrera',detail:'$650 quote opened.',unread:false,c:'var(--text-dim)'},
];

// ============================================================
// THEME
// ============================================================
function toggleTheme(){
  const h=document.documentElement;
  h.setAttribute('data-theme', h.getAttribute('data-theme')==='dark'?'light':'dark');
}

// ============================================================
// FIELD MODE
// ============================================================
let fieldMode=false;
function toggleFieldMode(){
  fieldMode=!fieldMode;
  const badge=document.getElementById('field-badge');
  if(fieldMode){
    badge.textContent='🖥️ Desktop Mode';
    badge.style.background='rgba(24,84,160,.1)';
    badge.style.borderColor='rgba(24,84,160,.25)';
    badge.style.color='var(--blue)';
    // inject field mode quick actions into dashboard
    const d=document.getElementById('view-dashboard');
    if(!document.getElementById('field-actions')){
      const fa=document.createElement('div');
      fa.id='field-actions';
      fa.innerHTML=`
        <div style="margin-bottom:16px">
          <div class="sec-lbl" style="margin-bottom:10px">⚡ Quick Actions</div>
          <div class="field-actions">
            <div class="field-btn" onclick="openModal('new-job')"><div class="field-btn-icon">🔧</div><div class="field-btn-label">New Job</div><div class="field-btn-sub">Log a job fast</div></div>
            <div class="field-btn" onclick="nav('schedule',null)"><div class="field-btn-icon">📋</div><div class="field-btn-label">Today's Jobs</div><div class="field-btn-sub">3 scheduled</div></div>
            <div class="field-btn" onclick="openModal('new-invoice')"><div class="field-btn-icon">💸</div><div class="field-btn-label">Send Invoice</div><div class="field-btn-sub">Send invoice on-site</div></div>
            <div class="field-btn" onclick="nav('quote',null)"><div class="field-btn-icon">✏️</div><div class="field-btn-label">Write Estimate</div><div class="field-btn-sub">Send in 60 seconds</div></div>
          </div>
        </div>`;
      d.prepend(fa);
    }
    flash('📱 Field Mode — Large tap targets, quick actions on top');
  } else {
    badge.textContent='📱 Field Mode';
    badge.style.background='';badge.style.borderColor='';badge.style.color='';
    const fa=document.getElementById('field-actions');
    if(fa) fa.remove();
    flash('🖥️ Desktop Mode');
  }
}

// ============================================================
// NAV
// ============================================================
function mobNav(view,el){
  document.querySelectorAll('.mob-nav-item').forEach(n=>n.classList.remove('active'));
  if(el)el.classList.add('active');
  nav(view,null);
}

// ============================================================
// HELPERS
// ============================================================
function tTag(t){const m={panel:'t-panel',ev:'t-ev',svc:'t-svc',inst:'t-inst',safe:'t-safe'};const n={panel:'PANEL',ev:'EV',svc:'SERVICE',inst:'INSTALL',safe:'SAFETY'};return`<span class="tag ${m[t]||'t-svc'}">${n[t]||t.toUpperCase()}</span>`;}
function sP(s){const m={scheduled:'ss',inprogress:'si',complete:'sc',pending:'sp',overdue:'so'};const l={scheduled:'Scheduled',inprogress:'In Progress',complete:'Complete',pending:'Pending',overdue:'Overdue'};return`<span class="status-pill ${m[s]}">${l[s]||s}</span>`;}
function $m(s,c){return`<span style="font-family:'JetBrains Mono',monospace;font-size:13px;color:${c||'var(--text)'}">${s}</span>`;}

// ============================================================
// RENDER DASHBOARD
// ============================================================


// Extended client data with health scores
const clientHealth = {
  'TK Building Group': {score:'A',cls:'hs-a',type:'commercial',risk:false},
  'Sarah Mitchell': {score:'A',cls:'hs-a',type:'residential',risk:false},
  'Linda Zhao': {score:'B',cls:'hs-b',type:'residential',risk:false},
  'Dave Novak': {score:'C',cls:'hs-c',type:'residential',risk:true},
  'Carlos Herrera': {score:'B',cls:'hs-b',type:'residential',risk:false},
  'Rachel Park': {score:'C',cls:'hs-c',type:'residential',risk:true},
};
const clientSparkData = {
  'TK Building Group': [40,80,60,90,120,100,130,145,160,140,180,200],
  'Sarah Mitchell': [20,30,20,45,30,50,40,60,70,80,90,100],
  'Linda Zhao': [0,0,0,0,0,0,0,0,0,0,0,100],
  'Dave Novak': [30,40,50,40,30,25,20,15,10,5,0,0],
  'Carlos Herrera': [0,0,0,20,0,30,0,40,0,50,0,60],
  'Rachel Park': [0,0,0,0,0,20,0,0,0,0,0,0],
};
let clientFilter = 'all';
function setClientFilter(f, el) {
  clientFilter = f;
  document.querySelectorAll('.seg-btn').forEach(b => b.classList.remove('active'));
  if(el) el.classList.add('active');
  renderClients();
}
function filterClients(q) {
  const grid = document.getElementById('clients-grid');
  grid.querySelectorAll('.client-card').forEach(card => {
    card.style.display = card.textContent.toLowerCase().includes(q.toLowerCase()) ? '' : 'none';
  });
}
let clientSortOrder = 'name';
function sortClients(order) {
  clientSortOrder = order;
  const grid = document.getElementById('clients-grid');
  const cards = Array.from(grid.querySelectorAll('.client-card'));
  cards.sort((a, b) => {
    const nameA = a.querySelector('.client-name')?.textContent || '';
    const nameB = b.querySelector('.client-name')?.textContent || '';
    const valA = a.querySelector('.spark-val')?.textContent.replace(/[$,]/g, '') || '0';
    const valB = b.querySelector('.spark-val')?.textContent.replace(/[$,]/g, '') || '0';
    if (order === 'name') return nameA.localeCompare(nameB);
    if (order === 'name-desc') return nameB.localeCompare(nameA);
    if (order === 'value') return parseFloat(valB) - parseFloat(valA);
    return 0; // recent - would need date logic
  });
  cards.forEach(card => grid.appendChild(card));
}
function sparkBars(name) {
  // Try to compute from live invoice data first
  let data = [];
  const clientInvs = invoices.filter(i => i.client === name && (i.status === 'paid' || i.status === 'complete'));
  if (clientInvs.length >= 2) {
    // Bucket into last 12 months (months 0-11 from oldest to newest)
    const buckets = new Array(12).fill(0);
    const now = new Date();
    clientInvs.forEach(inv => {
      const d = new Date(inv.issued || inv.due || '2026-01-01');
      const monthsAgo = (now.getFullYear() - d.getFullYear()) * 12 + (now.getMonth() - d.getMonth());
      const idx = 11 - Math.min(11, Math.max(0, monthsAgo));
      buckets[idx] += inv.amount;
    });
    data = buckets;
  } else {
    data = clientSparkData[name] || [5,10,8,15,12,20,18,25,22,28,24,30];
  }
  const max = Math.max(...data, 1);
  return data.map(v => {
    const h = Math.round((v/max)*24);
    return `<div class="spark-bar" style="height:${Math.max(h,2)}px"></div>`;
  }).join('');
}
function renderClients(subset) {
  let list = subset || clients;
  if(clientFilter === 'residential') list = clients.filter(c => (clientHealth[c.name]?.type||'residential') === 'residential');
  else if(clientFilter === 'commercial') list = clients.filter(c => (clientHealth[c.name]?.type) === 'commercial');
  else if(clientFilter === 'at-risk') list = clients.filter(c => clientHealth[c.name]?.risk);
  else if(clientFilter === 'top') {
    // Sort by lifetime value (from clientProfiles) or fallback to client.spent
    list = [...clients].sort((a,b) => {
      const aVal = (clientProfiles[a.name]?.lifetime || a.spent || 0);
      const bVal = (clientProfiles[b.name]?.lifetime || b.spent || 0);
      return bVal - aVal;
    }).slice(0, 10); // Show top 10 spenders
  }
  // Sync health scores for all visible clients before rendering
  list.forEach(cl => {
    if (clientProfiles[cl.name]) syncClientProfile(cl.name);
  });
  const h = clientHealth;
  const grid = document.getElementById('clients-grid');
  if (!grid) return;
  if (!list.length) {
    grid.innerHTML = '<div style="padding:48px 24px;text-align:center;color:var(--text-muted)">' +
      '<div style="font-size:40px;margin-bottom:12px">👥</div>' +
      '<div style="font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px">No clients yet</div>' +
      '<div style="font-size:13px;margin-bottom:20px">Add your first client to get started</div>' +
      '<button class="btn btn-primary" onclick="openModal(\x27new-client\x27)">+ Add Client</button></div>';
    return;
  }
  grid.innerHTML = list.map(c => {
    const p  = clientProfiles[c.name];
    const hs = p ? {score:(p.healthLabel||'B—')[0], cls:p.health||'hs-b'} : (h[c.name] || {score:'B',cls:'hs-b'});
    const prof = clientProfiles[c.name];
    const nextA = prof?.nextAction;
    const typeLabel = (clientHealth[c.name]?.type||'residential').charAt(0).toUpperCase()+(clientHealth[c.name]?.type||'residential').slice(1);
    return `
    <div class="client-card" onclick="openCM('${c.name}')">
      <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px">
        <div style="width:38px;height:38px;border-radius:9px;background:${c.color}22;color:${c.color};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px">${c.init}</div>
        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px">
          <span class="health-score ${hs.cls}">${hs.score}</span>
        </div>
      </div>
      <div style="font-size:14px;font-weight:600;margin-bottom:1px">${c.name}</div>
      <div style="font-size:10.5px;color:var(--text-muted);margin-bottom:2px;font-weight:600;letter-spacing:.5px;text-transform:uppercase">${typeLabel}</div>
      <div style="font-size:11.5px;color:var(--text-dim);margin-bottom:8px">${c.addr}</div>
      <div style="display:flex;align-items:flex-end;gap:14px;padding-top:8px;border-top:1px solid var(--border)">
        <div><div style="font-family:'Bebas Neue',sans-serif;font-size:20px">${c.jobs}</div><div style="font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px">Jobs</div></div>
        <div><div style="font-family:'Bebas Neue',sans-serif;font-size:20px">${(()=>{const ltv=clientProfiles[c.name]?.lifetime||c.spent||0;return ltv>=1000?'$'+(ltv/1000).toFixed(1)+'k':'$'+ltv;})()}</div><div style="font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px">Lifetime</div></div>
        <div style="margin-left:auto">
          <div class="sparkline-wrap">${sparkBars(c.name)}</div>
          <div style="font-size:9px;color:var(--text-muted);text-align:right;margin-top:2px">12mo</div>
        </div>
      </div>
      ${nextA ? `<div class="client-card-next ${nextA.urgent?'urgent':''}">${nextA.icon} ${nextA.text}</div>` : ''}
    </div>`;
  }).join('');
}

function renderPermits(){
  const stages=['Applied','Reviewed','Inspection','Approved'];
  const urgStatus={g:'Complete',y:'Pending',o:'Pending',r:'Overdue'};
  const urgPill={g:'sc',y:'sp',o:'sp',r:'so'};
  document.getElementById('permits-grid').innerHTML=permits.map(p=>`
    <div class="permit-card">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px">
        <div>
          <div style="font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-muted)">${p.num}</div>
          <div style="font-size:14.5px;font-weight:600">${p.addr}</div>
          <div style="font-size:12px;color:var(--text-dim)">${p.type}</div>
        </div>
        <div style="display:flex;gap:5px;flex-shrink:0">
          <span class="status-pill ${urgPill[p.urg]}">${urgStatus[p.urg]}</span>
          <button class="btn btn-edit" onclick="openPermitEdit('${p.num}')">✏️</button>
        </div>
      </div>
      <div style="font-size:11.5px;color:var(--text-muted);margin-bottom:10px">Expires: <span style="color:${p.urg==='r'?'var(--danger)':p.urg==='o'?'var(--warning)':'var(--text-dim)'}">${p.expiry}</span></div>
      <div class="p-timeline">${stages.map((s,i)=>`<div class="p-step" onclick="advancePermit('${p.num}',${i})" style="cursor:pointer" title="Click to advance to: ${s}"><div class="p-dot ${i<p.stage?'done':i===p.stage?'cur':''}" style="transition:all .2s">${i<p.stage?'✓':i+1}</div><div class="p-lbl" style="color:${i===p.stage?'var(--amber)':'inherit'}">${s}</div></div>`).join('')}</div>
      <div style="margin-top:10px;display:flex;gap:6px">
        ${p.stage < 3 ? `<button class="btn btn-warn btn-sm" onclick="advancePermit('${p.num}',${p.stage+1})">Advance → ${stages[p.stage+1]||'Complete'}</button>` : '<span style="font-size:12px;color:var(--success);font-weight:600">✓ Permit Complete</span>'}
        <button class="btn btn-ghost btn-sm" onclick="openPermitEdit('${p.num}')">✏️ Edit</button>
      </div>
    </div>`).join('');
}

// PRICE BOOK (editable)
function pbEdit(id){pbEditId=id;renderPb(pbCat);setTimeout(()=>{const e=document.getElementById(`pb-n-${id}`);if(e){e.focus();e.select();}},10);}
function pbSave(id){const item=pb.find(p=>p.id===id);item.name=document.getElementById(`pb-n-${id}`).value;item.labor=parseFloat(document.getElementById(`pb-l-${id}`).value)||0;item.mat=parseFloat(document.getElementById(`pb-m-${id}`).value)||0;item.total=item.labor+item.mat;pbEditId=null;autoPersist();renderPb(pbCat);flash('Price updated ✓');}
function pbDel(id){if(confirm('Delete this price book item?')){pb.splice(0,pb.length,...pb.filter(p=>p.id!==id));pbEditId=null;autoPersist();renderPb(pbCat);flash('Item deleted');}}
function setPbCat(el,cat){document.querySelectorAll('.cat-chip').forEach(c=>c.classList.remove('active'));el.classList.add('active');pbEditId=null;renderPb(cat);}

let invFilter = 'all';
function filterInvoices(f, el) {
  invFilter = f;
  document.querySelectorAll('.inv-filter-chip').forEach(b=>b.classList.remove('active'));
  if(el) el.classList.add('active');
  renderInvoices();
}

function renderInvoices() {
  let list = invoices;
  if(invFilter !== 'all') list = invoices.filter(inv=>inv.status===invFilter);

  // Update summary stats
  const total  = invoices.reduce((s,i)=>s+i.amount,0);
  const paid   = invoices.filter(i=>i.status==='paid').reduce((s,i)=>s+i.amount,0);
  const out    = invoices.filter(i=>i.status!=='paid').reduce((s,i)=>s+i.amount,0);
  const overdue= invoices.filter(i=>i.status==='overdue');
  const pct    = total>0?Math.round((paid/total)*100):0;
  const setTxt = (id,v)=>{const e=document.getElementById(id);if(e)e.textContent=v;};
  setTxt('inv-stat-billed',    '$'+total.toLocaleString());
  setTxt('inv-stat-count',     invoices.length+' invoices');
  setTxt('inv-stat-collected', '$'+paid.toLocaleString());
  setTxt('inv-stat-collect-pct', pct+'% collection rate');
  setTxt('inv-stat-outstanding','$'+out.toLocaleString());
  setTxt('inv-stat-out-detail', invoices.filter(i=>i.status!=='paid').length+' open invoices');
  setTxt('inv-stat-overdue',   overdue.length>0?'$'+overdue.reduce((s,i)=>s+i.amount,0).toLocaleString():'$0');
  setTxt('inv-stat-overdue-detail', overdue.length>0?overdue.length+' invoice'+(overdue.length>1?'s':'')+' overdue':'All current ✓');

  const statusCfg = {
    draft:   {cls:'ib-draft',   label:'Draft',   dot:'var(--text-muted)'},
    sent:    {cls:'ib-sent',    label:'Sent',    dot:'var(--amber)'},
    viewed:  {cls:'ib-viewed',  label:'Viewed 👀',dot:'var(--blue)'},
    partial: {cls:'ib-partial', label:'Partial', dot:'var(--warning)'},
    paid:    {cls:'ib-paid',    label:'Paid ✓',  dot:'var(--success)'},
    complete:{cls:'ib-paid',    label:'Paid ✓',  dot:'var(--success)'},
    overdue: {cls:'ib-overdue', label:'Overdue ⚠',dot:'var(--danger)'},
  };

  const el = document.getElementById('invoices-list');
  if(!el) return;
  el.innerHTML = list.map((inv,i)=>{
    const cfg  = statusCfg[inv.status] || statusCfg.sent;
    const rowCls = ['overdue','viewed','sent','draft'].includes(inv.status)?inv.status:'';
    const isOverdue = inv.status==='overdue';
    const isPaid    = inv.status==='paid'||inv.status==='complete';
    const realIdx   = invoices.indexOf(inv);
    return `
    <div>
      <div class="inv-row ${rowCls}" onclick="toggleInvExpand(${realIdx},this)">
        <div class="inv-cell inv-num">${inv.num}</div>
        <div class="inv-cell">
          <div class="inv-client">${inv.client}</div>
        </div>
        <div class="inv-cell inv-job">${inv.job}</div>
        <div class="inv-cell" style="font-size:12px;color:var(--text-dim)">${inv.issued}</div>
        <div class="inv-cell" style="font-size:12px;color:${isOverdue?'var(--danger)':'inherit'};font-weight:${isOverdue?700:400}">${inv.due}</div>
        <div class="inv-cell inv-amount">$${inv.amount.toLocaleString()}</div>
        <div class="inv-cell"><span class="inv-badge ${cfg.cls}">${cfg.label}</span></div>
        <div class="inv-cell inv-actions" onclick="event.stopPropagation()">
          <button class="btn btn-ghost btn-sm" onclick="generateInvoicePDF(${realIdx})" title="Download PDF">📄</button>
          ${!isPaid ? `<button class="btn btn-success btn-sm" onclick="markInvPaid(${realIdx})">✓ Paid</button>` : ''}
          ${!isPaid ? `<button class="btn btn-primary btn-sm" onclick="openInvSendPayLink(${realIdx})">💳</button>` : ''}
          <button class="btn btn-ghost btn-sm" onclick="duplicateInvoice(${realIdx})">📋</button>
          <button class="btn btn-edit" onclick="openInvoiceEdit(${realIdx})">✏️</button>
        </div>
      </div>
      <div class="inv-expand" id="inv-exp-${realIdx}">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
          <div>
            <div style="font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);margin-bottom:8px">Line Items</div>
            ${(inv.lines||[]).map(l=>`
              <div class="inv-line-row">
                <div>${l.desc}</div>
                <div style="text-align:center;color:var(--text-dim)">${l.qty}</div>
                <div style="text-align:right;font-family:'JetBrains Mono',monospace">$${l.rate.toLocaleString()}</div>
                <div style="text-align:right;font-family:'JetBrains Mono',monospace;font-weight:600">$${l.total.toLocaleString()}</div>
              </div>`).join('')}
            <div class="inv-line-row total-row">
              <div colspan="3">Total</div><div></div><div></div>
              <div style="text-align:right;font-family:'JetBrains Mono',monospace;color:var(--amber);font-size:14px">$${inv.amount.toLocaleString()}</div>
            </div>
          </div>
          <div>
            <div style="font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);margin-bottom:8px">Details</div>
            <div style="font-size:12.5px;color:var(--text-dim);margin-bottom:6px">Issued: <strong style="color:var(--text)">${inv.issued}</strong></div>
            <div style="font-size:12.5px;color:var(--text-dim);margin-bottom:6px">Due: <strong style="color:${isOverdue?'var(--danger)':'var(--text)'}">${inv.due}</strong></div>
            ${inv.payMethod?`<div style="font-size:12.5px;color:var(--text-dim);margin-bottom:6px">Paid via: <strong style="color:var(--success)">${inv.payMethod}</strong></div>`:''}
            ${inv.notes?`<div style="font-size:12px;color:var(--text-dim);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)">${inv.notes}</div>`:''}
            <div style="display:flex;gap:6px;margin-top:12px;flex-wrap:wrap">
              ${!isPaid?`<button class="btn btn-success btn-sm" onclick="markInvPaid(${realIdx})">✓ Mark Paid</button>`:''}
              ${!isPaid?`<button class="btn btn-primary btn-sm" onclick="openInvSendPayLink(${realIdx})">💳 Send Pay Link</button>`:''}
              <button class="btn btn-ghost btn-sm" onclick="duplicateInvoice(${realIdx})">📋 Duplicate</button>
              <button class="btn btn-ghost btn-sm" onclick="openInvoiceEdit(${realIdx})">✏️ Edit</button>
              <button class="btn btn-ghost btn-sm" onclick="openInvPreview(${realIdx})">🖨 PDF</button>
              ${!isPaid&&inv.status!=='draft'?`<button class="btn btn-warn btn-sm" onclick="sendInvReminder(${realIdx})">📱 Remind</button>`:''}
            </div>
          </div>
        </div>
      </div>
    </div>`;
  }).join('') || '<div style="padding:32px;text-align:center;color:var(--text-muted)">No invoices match this filter</div>';
}

function toggleInvExpand(idx, rowEl) {
  const exp = document.getElementById('inv-exp-'+idx);
  if(!exp) return;
  const isOpen = exp.classList.contains('open');
  // close all
  document.querySelectorAll('.inv-expand').forEach(e=>e.classList.remove('open'));
  if(!isOpen) exp.classList.add('open');
}

function markInvPaid(i) {
  const inv = invoices[i];
  if (!inv) return;
  inv.status = 'paid';
  inv.payMethod = inv.payMethod || 'Manual';
  inv.paidDate  = new Date().toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
  // ── Sync linked job status ────────────────────────────
  syncJobFromInvoice(inv);
  // ── Sync client profile ───────────────────────────────
  try { syncClientProfile(inv.client); } catch(e) {}
  autoPersist();
  renderInvoices();
  if (document.getElementById('view-dashboard').classList.contains('active')) renderDashboard();
  if (document.getElementById('view-clients').classList.contains('active')) renderClients();
  flash(inv.num + ' marked as paid ✓');
}
function markPaid(i){ markInvPaid(i); } // legacy alias

function duplicateInvoice(idx) {
  const orig = invoices[idx];
  if (!orig) return;
  // Generate new invoice number
  const newNum = 'INV-' + String(Math.floor(1000 + Math.random()*9000));
  // Create copy as draft
  const newInv = {
    num: newNum,
    client: orig.client,
    job: orig.job,
    issued: new Date().toISOString().split('T')[0],
    due: new Date(Date.now()+30*24*60*60*1000).toISOString().split('T')[0], // Net-30
    amount: orig.amount,
    status: 'draft',
    lines: orig.lines ? orig.lines.map(l=>({...l})) : [],
    notes: orig.notes || '',
    payMethod: ''
  };
  invoices.unshift(newInv);
  renderInvoices();
  flash('Duplicated ' + orig.num + ' as ' + newNum + ' ✓');
}

// Sync the linked job when an invoice status changes
function syncJobFromInvoice(inv) {
  if (!inv.client || !inv.job) return;
  const j = jobs.find(j => j.client === inv.client &&
    (j.name === inv.job || j.id === inv.linkedJobId));
  if (!j) return;
  const isPaid = inv.status === 'paid' || inv.status === 'complete';
  if (isPaid && j.status !== 'complete') {
    j.status = 'complete';
    // Log to dashboard action items — remove "overdue invoice" for this job
  }
  // Sync value if not set
  if (isPaid && j.value === 0 && inv.amount > 0) j.value = inv.amount;
}

// Sync an invoice when a job status changes
function syncInvoiceFromJob(job) {
  if (!job) return;
  const inv = invoices.find(i => i.client === job.client &&
    (i.job === job.name || i.linkedJobId === job.id));
  if (!inv) return;
  if (job.status === 'complete' && inv.status === 'pending') {
    // Job done → escalate invoice to 'sent' if it hasn't been
    inv.status = 'sent';
  }
  if (job.status === 'complete' && inv.amount === 0 && job.value > 0) {
    inv.amount = job.value;
  }
}

function openInvSendPayLink(idx) {
  const inv = invoices[idx];
  document.getElementById('modal-title').textContent = 'Send Pay Link — '+inv.num;
  document.getElementById('modal-body').innerHTML = `
    <div style="background:var(--surface2);border-radius:10px;padding:13px 16px;margin-bottom:16px">
      <div style="display:flex;justify-content:space-between;margin-bottom:4px">
        <span style="font-size:13px;font-weight:600">${inv.client}</span>
        <span style="font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--amber);font-weight:700">$${inv.amount.toLocaleString()}</span>
      </div>
      <div style="font-size:12px;color:var(--text-dim)">${inv.num} — ${inv.job}</div>
    </div>
    <div class="form-group"><label class="form-label">Send Via</label>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
        <label style="display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--surface2);border:1px solid var(--amber);border-radius:10px;cursor:pointer">
          <input type="radio" name="pm2" checked style="accent-color:var(--amber)"> <span style="font-size:13px;font-weight:500">📱 SMS</span>
        </label>
        <label style="display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;cursor:pointer">
          <input type="radio" name="pm2" style="accent-color:var(--amber)"> <span style="font-size:13px;font-weight:500">📧 Email</span>
        </label>
      </div>
    </div>
    <div style="background:var(--surface2);border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--text-dim)">
      Preview: <em style="color:var(--text)">"Hi ${inv.client}, invoice ${inv.num} for $${inv.amount.toLocaleString()} is ready. Pay securely: amp.pay/${inv.num.toLowerCase()}"</em>
    </div>
    <div style="margin-top:12px;font-size:12px;color:var(--text-muted)">2.9% + 30¢ Stripe fee. Net: <strong>$${(inv.amount - inv.amount*0.029 - 0.30).toFixed(2)}</strong></div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button type="button" class="btn btn-primary" onclick="closeModal();invoices[${idx}].status='viewed';renderInvoices();payLinks.unshift({client:invoices[${idx}].client,inv:invoices[${idx}].num,method:'SMS',amount:invoices[${idx}].amount,status:'sent',sent:'Just now'});flash('💳 Pay link sent to ${inv.client} ✓')">Send Pay Link</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}


function renderRecurring(){
  const isDue = (next) => {
    if(!next || next==='TBD') return false;
    const parts = next.split(' ');
    const months = {Jan:0,Feb:1,Mar:2,Apr:3,May:4,Jun:5,Jul:6,Aug:7,Sep:8,Oct:9,Nov:10,Dec:11};
    if(parts.length===2) {
      const d = new Date(2026, months[parts[0]]||0, parseInt(parts[1])||1);
      return d <= new Date(2026,1,19);
    }
    return false;
  };
  document.getElementById('recurring-table').innerHTML=recurring.map((r,i)=>{
    const due = isDue(r.next);
    return `<tr style="${due&&r.status==='active'?'background:rgba(200,120,10,.04)':''}">
      <td><strong>${r.client}</strong>${due&&r.status==='active'?'<span class="status-pill si" style="margin-left:6px;font-size:9px">DUE</span>':''}</td>
      <td>${r.service}</td>
      <td><span class="rec-badge">${r.freq}</span></td>
      <td style="color:${due&&r.status==='active'?'var(--amber)':''}">
        ${`<span style="font-family:'JetBrains Mono',monospace;font-size:12px;color:${due&&r.status==='active'?'var(--amber)':'var(--text-dim)'}">${r.next}</span>`}
      </td>
      <td>${$m('$'+r.value,'var(--yellow)')}</td>
      <td>${r.status==='active'?'<span class="status-pill sc">Active</span>':'<span class="status-pill sp">Paused</span>'}</td>
      <td style="display:flex;gap:4px;flex-wrap:wrap">
        ${due&&r.status==='active'?`<button class="btn btn-primary btn-sm" onclick="scheduleNextRecurring(${i})">📅 Schedule Now</button>`:''}
        <button class="btn btn-edit" onclick="editRecurring(${i})">✏️</button>
        ${r.status==='active'
          ?`<button class="btn btn-ghost btn-sm" onclick="toggleRecurring(${i})">Pause</button>`
          :`<button class="btn btn-success btn-sm" onclick="toggleRecurring(${i})">Resume</button>`}
      </td>
    </tr>`;
  }).join('');
}

function renderAnalytics() {
  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  // Grow target linearly — monthly targets for a 12-month forward window
  const MONTH_TARGETS = [20000,22000,22000,24000,24000,26000,26000,28000,28000,30000,30000,32000];

  // ── Build rolling 12-month window ending at current month ─
  const _now   = new Date();
  const curMo  = _now.getMonth();      // 0-11
  const curYr  = _now.getFullYear();

  // windowMonths[0] = oldest month, [11] = current month
  const windowMonths = [];  // { mo:0-11, yr:2025|2026, label:'Mar 25' }
  for (let i = 11; i >= 0; i--) {
    let mo = curMo - i;
    let yr = curYr;
    if (mo < 0) { mo += 12; yr -= 1; }
    windowMonths.push({ mo, yr, label: MONTHS[mo] + (yr !== curYr ? ' \u2019' + String(yr).slice(2) : '') });
  }

  // ── Map actual revenue into window buckets ─────────────────
  const revenueByMonth = new Array(12).fill(0);  // index 0=oldest, 11=current

  invoices.forEach(inv => {
    if (inv.status === 'paid' || inv.status === 'complete') {
      const parts = (inv.issued || '').split(/[, ]+/);
      const mo = MONTHS.indexOf(parts[0]);
      // try to parse year from issued string e.g. "Feb 10, 2026"
      const yr = parseInt(parts[parts.length - 1]) || curYr;
      const wi = windowMonths.findIndex(w => w.mo === mo && w.yr === yr);
      if (wi >= 0) revenueByMonth[wi] += inv.amount;
    }
  });

  // Supplement with completed job values for any window slot still empty
  jobs.forEach(j => {
    if (j.status === 'complete' && j.value > 0) {
      const parts = (j.date || '').split(' ');
      const mo = MONTHS.indexOf(parts[0]);
      const yr = parseInt(parts[1]) || curYr;
      const wi = windowMonths.findIndex(w => w.mo === mo && w.yr === yr);
      if (wi >= 0 && revenueByMonth[wi] === 0) revenueByMonth[wi] += j.value;
    }
  });

  // ── Shift TARGET_MONTHLY to align with rolling window ─────
  // Target index 0 aligns with the oldest month in the window
  const TARGET_MONTHLY = windowMonths.map((_, i) => MONTH_TARGETS[i]);

  // ── KPI calculations ──────────────────────────────────────
  const ytd = revenueByMonth.reduce((s,v)=>s+v, 0);
  const completedJobs = jobs.filter(j=>j.status==='complete'||j.status==='inprogress');
  const avgJobVal = completedJobs.length
    ? Math.round(completedJobs.reduce((s,j)=>s+j.value,0)/completedJobs.length)
    : Math.round(jobs.reduce((s,j)=>s+j.value,0)/(jobs.length||1));
  const totalQ = savedQuotes.length;
  const acceptedQ = savedQuotes.filter(q=>q.status==='accepted'||q.status==='paid').length;
  const closeRate = totalQ > 0 ? Math.round(acceptedQ/totalQ*100) : 0;
  const paidInvs = invoices.filter(i=>i.status==='paid'||i.status==='complete');
  // Estimate avg days to pay from invoice issued→due window (proxy for actual payment time)
  const avgDays = paidInvs.length
    ? Math.round(paidInvs.reduce((s,i)=>{
        const d1=new Date(i.issued||'2026-02-10'), d2=new Date(i.due||'2026-03-10');
        return s + Math.max((d2-d1)/86400000, 1);
      }, 0) / paidInvs.length)
    : 14;

  // Set KPI elements
  const setEl = (id,v) => { const el=document.getElementById(id); if(el) el.textContent=v; };
  setEl('an-ytd', '$'+ytd.toLocaleString());
  setEl('an-ytd-sub', ytd > 0 ? (ytd >= 48000 ? '↑ On pace for record year' : 'Year to date') : 'No revenue yet');
  setEl('an-avgval', '$'+avgJobVal.toLocaleString());
  setEl('an-avgval-sub', completedJobs.length + ' completed job' + (completedJobs.length!==1?'s':''));
  setEl('an-closerate', closeRate + '%');
  setEl('an-closerate-sub', acceptedQ + ' of ' + totalQ + ' quotes accepted');
  setEl('an-daystopay', avgDays);
  setEl('an-daystopay-sub', avgDays <= 14 ? '↑ Better than avg (21d)' : 'days avg to collect');

  // ── Revenue bar chart ─────────────────────────────────────
  const chartEl = document.getElementById('revenue-chart');
  if (chartEl) {
    const maxVal = Math.max(...TARGET_MONTHLY, ...revenueByMonth, 1);
    chartEl.innerHTML = windowMonths.map((w, i) => {
      const revH = revenueByMonth[i] ? Math.round((revenueByMonth[i]/maxVal)*160) : 0;
      const tgtH = Math.round((TARGET_MONTHLY[i]/maxVal)*160);
      const isCurrent = i === 11;
      const color = revH >= tgtH*0.9 ? 'var(--green)' : revH > 0 ? 'var(--yellow)' : '';
      return `<div class="chart-bar-group">
        <div style="position:relative;width:100%;height:160px;display:flex;align-items:flex-end;gap:2px">
          <div class="chart-bar" style="flex:1;height:${tgtH}px;background:rgba(24,84,160,.2)" title="Target: $${(TARGET_MONTHLY[i]/1000).toFixed(0)}k"></div>
          ${revH ? `<div class="chart-bar" style="flex:1;height:${revH}px;background:${color};${isCurrent?'outline:2px solid var(--amber);outline-offset:-2px':''}" title="$${(revenueByMonth[i]/1000).toFixed(1)}k"></div>` : '<div style="flex:1"></div>'}
        </div>
        <div class="chart-label" style="${isCurrent?'color:var(--amber);font-weight:700':''}">${w.label}</div>
      </div>`;
    }).join('');
  }

  // ── AR Aging (live from invoices) ─────────────────────────
  const TODAY_MS = Date.now();
  const unpaid = invoices.filter(i=>i.status!=='paid'&&i.status!=='complete');
  const aging = { current:0, d30:0, d60:0, d60plus:0 };
  const agingItems = [];
  unpaid.forEach(inv => {
    const due = new Date(inv.due || '2026-03-10');
    const age = Math.round((TODAY_MS - due.getTime()) / 86400000);
    const bucket = age <= 0 ? 'current' : age <= 30 ? 'd30' : age <= 60 ? 'd60' : 'd60plus';
    aging[bucket] += inv.amount;
    agingItems.push({ ...inv, age: Math.max(age, 0) });
  });
  const arTotal = Object.values(aging).reduce((s,v)=>s+v,0);
  setEl('ar-aging-total', arTotal > 0 ? '$'+arTotal.toLocaleString()+' outstanding' : 'No outstanding AR');

  const agingBarsEl = document.getElementById('ar-aging-bars');
  if (agingBarsEl) {
    const buckets = [
      { label:'Current',   val:aging.current, color:'var(--green)',   textColor:'var(--success)' },
      { label:'1–30 days', val:aging.d30,     color:'var(--yellow)',  textColor:'var(--amber)' },
      { label:'31–60 days',val:aging.d60,     color:'var(--orange)',  textColor:'var(--warning)' },
      { label:'60+ days',  val:aging.d60plus, color:'var(--red)',     textColor:'var(--danger)' },
    ];
    const maxBucket = Math.max(...buckets.map(b=>b.val), 1);
    agingBarsEl.innerHTML = buckets.map(b => `
      <div class="aging-row">
        <div style="width:80px;font-size:12px;color:var(--text-dim)">${b.label}</div>
        <div class="aging-bar-wrap"><div class="aging-fill" style="width:${Math.round(b.val/maxBucket*100)}%;background:${b.color}"></div></div>
        <div style="width:64px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;color:${b.textColor}">$${b.val.toLocaleString()}</div>
      </div>`).join('');
  }

  const agingTableEl = document.getElementById('ar-aging-table');
  if (agingTableEl && agingItems.length) {
    agingItems.sort((a,b)=>b.age-a.age);
    const isEscalate = inv => inv.age >= 45;
    agingTableEl.innerHTML = `<table style="width:100%;font-size:12px">
      <thead><tr style="color:var(--text-muted)">
        <th style="text-align:left;padding:3px 0;font-weight:600">Client</th>
        <th style="text-align:right">Amount</th>
        <th style="text-align:right">Age</th>
        <th></th>
      </tr></thead>
      <tbody>
        ${agingItems.map(inv => {
          const ageColor = inv.age>=45?'var(--danger)':inv.age>=15?'var(--warning)':'var(--amber)';
          const ageLabel = inv.age===0?'Current':inv.age+'d';
          return `<tr>
            <td style="padding:5px 0">${inv.client}</td>
            <td style="text-align:right;font-family:'JetBrains Mono',monospace">$${inv.amount.toLocaleString()}</td>
            <td style="text-align:right;color:${ageColor}">${ageLabel}</td>
            <td style="text-align:right">
              <button class="btn ${isEscalate(inv)?'btn-warn':'btn-ghost'} btn-sm" style="padding:2px 8px;min-height:28px"
                onclick="openInvSendPayLink(${invoices.indexOf(inv)})">${isEscalate(inv)?'Escalate':'Pay Link'}</button>
            </td>
          </tr>`;
        }).join('')}
      </tbody>
    </table>`;
  } else if (agingTableEl) {
    agingTableEl.innerHTML = '<div style="padding:10px 0;font-size:13px;color:var(--success);text-align:center">All invoices current ✓</div>';
  }

  // ── Top clients by revenue (live from jobs + invoices) ────
  const clientRevMap = {};
  invoices.forEach(inv => {
    if (!clientRevMap[inv.client]) clientRevMap[inv.client] = { rev:0, jobs:0 };
    clientRevMap[inv.client].rev += inv.amount;
  });
  jobs.forEach(j => {
    if (!clientRevMap[j.client]) clientRevMap[j.client] = { rev:0, jobs:0 };
    clientRevMap[j.client].jobs++;
  });
  const topClients = Object.entries(clientRevMap)
    .sort((a,b)=>b[1].rev-a[1].rev).slice(0,6);
  const tcEl = document.getElementById('top-clients-list');
  if (tcEl) {
    tcEl.innerHTML = topClients.length
      ? topClients.map(([name,d]) => {
          const cl = clients.find(c=>c.name===name);
          const type = cl?.type||'Client';
          return `<div class="aging-row" style="cursor:pointer" onclick="openCM('${name}')">
            <div style="flex:1">
              <div style="font-size:13px;font-weight:600">${name}</div>
              <div style="font-size:11px;color:var(--text-muted)">${d.jobs} job${d.jobs!==1?'s':''} · ${type}</div>
            </div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--amber)">$${d.rev.toLocaleString()}</div>
          </div>`;
        }).join('')
      : '<div style="padding:14px 16px;font-size:13px;color:var(--text-muted)">No revenue data yet</div>';
  }

  // ── Profitability KPIs (sync live data) ───────────────────
  const profitEl = document.getElementById('p-avg-margin');
  const profitRevEl = document.getElementById('p-revenue');
  if (profitEl || profitRevEl) {
    const completedWithVal = jobs.filter(j=>j.value>0);
    const avgM = completedWithVal.length
      ? Math.round(completedWithVal.reduce((s,j)=>s+(j.margin||62),0)/completedWithVal.length)
      : 62;
    const mthRevTotal = revenueByMonth.reduce((s,v)=>s+v,0);
    if(profitEl) profitEl.textContent = avgM+'%';
    if(profitRevEl) profitRevEl.textContent = '$'+Math.max(mthRevTotal,ytd).toLocaleString();
  }

  // ── Sparklines in client modal ────────────────────────────
  const cmSparkEl = document.getElementById('cm-sparkline');
  if (cmSparkEl) {
    const data = clientSparkData['Sarah Mitchell'] || [];
    const max = Math.max(...data, 1);
    cmSparkEl.innerHTML = data.map(v => {
      const h = Math.max(Math.round((v/max)*22), 2);
      return `<div style="width:5px;height:${h}px;border-radius:1px 1px 0 0;background:var(--yellow);opacity:.7;flex-shrink:0"></div>`;
    }).join('');
  }
}


function renderTechs(){
  // ── Aggregate live stats from jobs array by tech name ─────────────
  const BENCH_MARGIN = { panel:65, ev:72, svc:42, inst:58, safe:60, outlets:55, lighting:58 };
  const techMap = {};

  jobs.forEach(j => {
    const name = j.tech || 'Unassigned';
    if (!techMap[name]) techMap[name] = { jobs:0, rev:0, complete:0, types:{}, margins:[] };
    techMap[name].jobs++;
    techMap[name].rev += j.value || 0;
    if (j.status === 'complete') techMap[name].complete++;
    techMap[name].types[j.type] = (techMap[name].types[j.type]||0) + 1;
    techMap[name].margins.push(j.margin || BENCH_MARGIN[j.type] || 55);
  });

  // Seed known techs with profile data (filled in from real names if they have jobs)
  const TECH_PROFILES = {
    'Mike R.':  { role:'Master Electrician (EC)', init:'MR', color:'var(--amber)', rating:4.9 },
    'Mike Rivera': { role:'Master Electrician (EC)', init:'MR', color:'var(--amber)', rating:4.9 },
    'Jess T.':  { role:'Journeyman', init:'JT', color:'var(--blue)', rating:4.8 },
    'Jess Torres': { role:'Journeyman', init:'JT', color:'var(--blue)', rating:4.8 },
    'Unassigned': { role:'Not assigned', init:'?', color:'var(--text-muted)', rating:null },
  };

  // Ensure core techs always appear even with 0 jobs
  ['Mike R.','Jess T.'].forEach(n => {
    if (!techMap[n]) techMap[n] = { jobs:0, rev:0, complete:0, types:{}, margins:[] };
  });

  const TYPE_LABEL = { panel:'Panel',ev:'EV',svc:'Service',inst:'Commercial',safe:'Safety',outlets:'Wiring',lighting:'Lighting' };

  const grid = document.getElementById('tech-grid');
  if (!grid) return;

  grid.innerHTML = Object.entries(techMap)
    .sort((a,b) => b[1].rev - a[1].rev)
    .map(([name, t]) => {
      const prof = TECH_PROFILES[name] || { role:'Field Technician', init:name.slice(0,2).toUpperCase(), color:'var(--text-muted)', rating:null };
      const avgMargin = t.margins.length
        ? Math.round(t.margins.reduce((s,m)=>s+m,0)/t.margins.length)
        : 0;
      const topType = Object.entries(t.types).sort((a,b)=>b[1]-a[1])[0];
      const revK = t.rev >= 1000 ? '$' + (t.rev/1000).toFixed(1) + 'k' : '$' + t.rev;
      const completionRate = t.jobs > 0 ? Math.round(t.complete/t.jobs*100) : 0;
      const marginColor = avgMargin>=60?'var(--success)':avgMargin>=45?'var(--warning)':'var(--danger)';

      return `<div style="background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px">
        <div style="display:flex;align-items:center;gap:13px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)">
          <div style="width:44px;height:44px;border-radius:50%;background:${prof.color}22;color:${prof.color};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0">${prof.init}</div>
          <div style="flex:1">
            <div style="font-size:15px;font-weight:600">${name}</div>
            <div style="font-size:12px;color:var(--text-dim)">${prof.role}</div>
          </div>
          ${prof.rating ? `<div style="font-size:13px;color:var(--amber);font-weight:600">⭐${prof.rating}</div>` : ''}
        </div>
        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:13px">
          <div style="background:var(--surface2);border-radius:9px;padding:11px;text-align:center">
            <div style="font-family:'Bebas Neue',sans-serif;font-size:24px">${t.jobs}</div>
            <div style="font-size:9.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px">Jobs</div>
          </div>
          <div style="background:var(--surface2);border-radius:9px;padding:11px;text-align:center">
            <div style="font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--success)">${revK}</div>
            <div style="font-size:9.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px">Revenue</div>
          </div>
          <div style="background:var(--surface2);border-radius:9px;padding:11px;text-align:center">
            <div style="font-family:'Bebas Neue',sans-serif;font-size:24px;color:${marginColor}">${avgMargin || '—'}${avgMargin?'%':''}</div>
            <div style="font-size:9.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px">Avg Margin</div>
          </div>
          <div style="background:var(--surface2);border-radius:9px;padding:11px;text-align:center">
            <div style="font-family:'Bebas Neue',sans-serif;font-size:24px;color:${completionRate>=80?'var(--green)':'var(--amber)'}">${completionRate}%</div>
            <div style="font-size:9.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px">Completion</div>
          </div>
        </div>
        ${topType ? `<div style="background:var(--surface2);border-radius:9px;padding:9px 12px;margin-bottom:10px;font-size:12px;color:var(--text-dim)">
          Best at: <strong style="color:var(--text)">${TYPE_LABEL[topType[0]]||topType[0]}</strong> · ${topType[1]} job${topType[1]!==1?'s':''}
        </div>` : ''}
        <button class="btn btn-ghost btn-sm" style="width:100%;justify-content:center"
          onclick="openTechDetailModal('${name}')">View Schedule & Jobs ↗</button>
      </div>`;
    }).join('');
}

function openTechDetailModal(techName) {
  const techJobs = jobs.filter(j => j.tech === techName);
  const upcoming = techJobs.filter(j => j.status !== 'complete' && j.status !== 'cancelled');
  const done     = techJobs.filter(j => j.status === 'complete');
  const rev      = done.reduce((s,j)=>s+j.value,0);
  document.getElementById('modal-title').textContent = techName + ' — Jobs';
  document.getElementById('modal-body').innerHTML = `
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px">
      <div style="background:var(--surface2);border-radius:9px;padding:10px;text-align:center">
        <div style="font-family:'Bebas Neue',sans-serif;font-size:22px">${techJobs.length}</div>
        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px">Total Jobs</div>
      </div>
      <div style="background:var(--surface2);border-radius:9px;padding:10px;text-align:center">
        <div style="font-family:'Bebas Neue',sans-serif;font-size:22px">${upcoming.length}</div>
        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px">Upcoming</div>
      </div>
      <div style="background:var(--surface2);border-radius:9px;padding:10px;text-align:center">
        <div style="font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--success)">$${(rev/1000).toFixed(1)}k</div>
        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px">Revenue</div>
      </div>
    </div>
    <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:8px">Upcoming Jobs</div>
    ${upcoming.length
      ? upcoming.map(j=>`<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--surface2);border-radius:9px;margin-bottom:6px">
          <div><div style="font-size:13px;font-weight:600">${j.client}</div><div style="font-size:11px;color:var(--text-dim)">${j.name} · ${j.date}</div></div>
          <div style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--amber)">$${j.value.toLocaleString()}</div>
        </div>`).join('')
      : '<div style="padding:12px;color:var(--text-muted);font-size:13px">No upcoming jobs</div>'
    }`;
  document.getElementById('modal-footer').innerHTML = '<button type="button" class="btn btn-primary" onclick="closeModal()">Close</button>';
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function renderTasks(){
  const urgent   = tasks.filter(t => t.urgent && !t.done);
  const upcoming = tasks.filter(t => !t.urgent && !t.done);
  const done     = tasks.filter(t => t.done);

  const th = arr => arr.length
    ? arr.map(t => {
        const linkedJob = t.jobId ? jobs.find(j => j.id === t.jobId) : null;
        const jobChip = linkedJob
          ? `<span style="display:inline-flex;align-items:center;gap:4px;font-size:10px;
               font-weight:700;padding:2px 7px;border-radius:20px;cursor:pointer;margin-top:2px;
               background:var(--amber)22;color:var(--amber);font-family:'JetBrains Mono',monospace"
               onclick="event.stopPropagation();openJobEdit('${linkedJob.id}')"
               title="Open ${linkedJob.id}">🔧 ${linkedJob.id}</span>`
          : '';
        const meta = t.client || linkedJob?.client || '';
        return `<div class="task-item">
          <div class="task-check ${t.done?'done':''}" onclick="toggleTask(${t.id})">${t.done?'✓':''}</div>
          <div style="flex:1">
            <div class="task-text ${t.done?'done':''}">${t.text}</div>
            <div style="display:flex;align-items:center;gap:6px;margin-top:2px">
              ${meta ? `<div style="font-size:11px;color:var(--text-muted)">${meta}</div>` : ''}
              ${jobChip}
            </div>
          </div>
          <div style="font-size:11px;font-family:'JetBrains Mono',monospace;color:${t.urgent?'var(--orange)':'var(--text-muted)'}">
            ${t.due||'—'}
          </div>
        </div>`;
      }).join('')
    : '<div style="padding:14px 16px;color:var(--text-muted);font-size:13px">All caught up ✓</div>';

  const el_u = document.getElementById('tasks-urgent');
  const el_p = document.getElementById('tasks-upcoming');
  const el_d = document.getElementById('tasks-done');
  if (el_u) el_u.innerHTML = th(urgent);
  if (el_p) el_p.innerHTML = th(upcoming);
  if (el_d) el_d.innerHTML = th(done);
}


function toggleNotif(){
  const np = document.getElementById('notif-panel');
  np.classList.toggle('open');
}
function closeNotif(){
  document.getElementById('notif-panel').classList.remove('open');
}

// ── Global ESC key: close whatever is open ─────────────────────────
document.addEventListener('keydown', function(e) {
  if (e.key !== 'Escape') return;
  e.preventDefault(); // stop browser from doing anything else with ESC
  // If ANYTHING is open, close everything — no partial state left behind
  const mo = document.getElementById('modal-overlay');
  const cm = document.getElementById('client-modal');
  const jf = document.getElementById('job-flow-overlay');
  const np = document.getElementById('notif-panel');
  const qa = document.getElementById('quick-action-sheet');
  const ip = document.getElementById('inv-preview-panel');
  const ob = document.getElementById('onboarding-overlay');
  const anyOpen = mo?.classList.contains('open') || cm?.classList.contains('open') ||
    jf?.classList.contains('open') || np?.classList.contains('open') ||
    qa?.classList.contains('open') || ip?.classList.contains('open') ||
    (ob && !ob.classList.contains('hidden'));
  if (anyOpen) { closeAllModals(); return; }
  // Also close search if nothing else is open
  try { closeSearch(); } catch(e2) {}
});

// ── Keyboard Shortcuts ───────────────────────────────────────────────
document.addEventListener('keydown', function(e) {
  // Cmd/Ctrl + K: Quick Create Menu
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    e.preventDefault();
    openQuickCreate();
  }
  // Cmd/Ctrl + N: New Job
  if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
    e.preventDefault();
    openModal('new-job');
  }
  // Cmd/Ctrl + F: Focus search
  if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
    e.preventDefault();
    const sb = document.getElementById('search-box');
    if (sb) { sb.focus(); sb.select(); }
  }
});

// Quick Create Modal
function openQuickCreate() {
  let qcm = document.getElementById('quick-create-modal');
  if (!qcm) {
    qcm = document.createElement('div');
    qcm.id = 'quick-create-modal';
    qcm.className = 'modal-overlay';
    qcm.innerHTML = `
      <div style="max-width:420px;width:90%;background:var(--surface);border-radius:12px;padding:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)">
        <div style="font-size:18px;font-weight:700;margin-bottom:16px">⚡ Quick Create</div>
        <div style="display:grid;gap:8px">
          <button class="btn" style="justify-content:flex-start;padding:14px 16px;background:var(--bg)" onclick="closeQuickCreate();openModal('new-client')">
            <span style="font-size:20px;margin-right:12px">👤</span>
            <div style="text-align:left"><div style="font-weight:600">New Client</div><div style="font-size:12px;color:var(--text-dim)">Add a customer to your database</div></div>
            <span style="margin-left:auto;font-size:11px;color:var(--text-dim);background:var(--bg-secondary);padding:2px 6px;border-radius:4px">⌘N</span>
          </button>
          <button class="btn" style="justify-content:flex-start;padding:14px 16px;background:var(--bg)" onclick="closeQuickCreate();openModal('new-job')">
            <span style="font-size:20px;margin-right:12px">🔧</span>
            <div style="text-align:left"><div style="font-weight:600">New Job</div><div style="font-size:12px;color:var(--text-dim)">Schedule a new service call</div></div>
            <span style="margin-left:auto;font-size:11px;color:var(--text-dim);background:var(--bg-secondary);padding:2px 6px;border-radius:4px">⌘⇧N</span>
          </button>
          <button class="btn" style="justify-content:flex-start;padding:14px 16px;background:var(--bg)" onclick="closeQuickCreate();openModal('new-invoice')">
            <span style="font-size:20px;margin-right:12px">📄</span>
            <div style="text-align:left"><div style="font-weight:600">New Invoice</div><div style="font-size:12px;color:var(--text-dim)">Create an invoice for a client</div></div>
          </button>
          <button class="btn" style="justify-content:flex-start;padding:14px 16px;background:var(--bg)" onclick="closeQuickCreate();nav('quote',null)">
            <span style="font-size:20px;margin-right:12px">📝</span>
            <div style="text-align:left"><div style="font-weight:600">New Estimate</div><div style="font-size:12px;color:var(--text-dim)">Create a quote for a client</div></div>
          </button>
        </div>
        <div style="margin-top:16px;padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--text-dim);text-align:center">
          Press <kbd style="background:var(--bg-secondary);padding:2px 6px;border-radius:3px;border:1px solid var(--border)">ESC</kbd> to close
        </div>
      </div>
    `;
    document.body.appendChild(qcm);
    qcm.addEventListener('click', function(e) {
      if (e.target === qcm) closeQuickCreate();
    });
  }
  qcm.classList.add('open');
  qcm.style.display = 'flex';
  qcm.style.alignItems = 'center';
  qcm.style.justifyContent = 'center';
}

function closeQuickCreate() {
  const qcm = document.getElementById('quick-create-modal');
  if (qcm) { qcm.classList.remove('open'); qcm.style.display = 'none'; }
}

// Extended client profile data
const clientProfiles = {
  'Sarah Mitchell': {
    phone:'(555) 204-8810', email:'smitchell@email.com', type:'Residential',
    addr:'412 Oak Lane, Springfield, IL 62701', color:'var(--amber)', init:'SM',
    source:'Referral — Dave Novak', health:'hs-a', healthLabel:'A — Healthy',
    lastJob:'Feb 18, 2026', lifetime:6200, jobs:4, refs:3, avgPay:'7 days',
    billed:6200, collected:3400, outstanding:2800, avgMargin:60,
    payScore:'good', tags:['VIP','Referral Source'],
    nextAction:{ icon:'⚡', text:'Send EV charger estimate — Tesla arriving March', due:'By Mar 1', urgent:false },
    panel:{ brand:'Square D (new)', amps:'200A', spaces:'40-space (12 used)', year:'2026 (replaced)', location:'Left side of garage', condition:'Excellent — just replaced', notes:'Federal Pacific Stab-Lok removed Feb 2026. Bonding verified.' },
    ar:[
      { inv:'INV-0088', desc:'Panel Upgrade', amount:2800, due:'Feb 24', status:'pending', daysOut:14 },
    ],
    suggestions:[
      {icon:'⚡', text:'Quote EV Charger — Tesla on order', action:"flash('EV charger quote opened ✓')"},
      {icon:'📋', text:'Schedule permit inspection', action:"flash('Task added: permit inspection ✓')"},
      {icon:'🔄', text:'Annual inspection due Nov 2026', action:"flash('Reminder set for Nov 2026 ✓')"},
    ],
    timeline:[
      { type:'job',    icon:'🔧', bg:'var(--amber-light)',    color:'var(--amber)',   title:'Job J-001 started — Panel Upgrade',    meta:'Feb 18, 2026 · Mike Rivera',  amount:'$2,800' },
      { type:'permit', icon:'📋', bg:'var(--info-bg)',        color:'var(--info)',    title:'Permit EL-2026-0441 filed',            meta:'Feb 15, 2026',               amount:'' },
      { type:'comm',   icon:'📞', bg:'var(--surface3)',       color:'var(--text)',    title:'Call — Confirmed start time + EV quote',meta:'Feb 16, 2026 · Mike Rivera',  amount:'' },
      { type:'visit',  icon:'🏠', bg:'var(--surface3)',       color:'var(--text)',    title:'Site visit — estimate walk-through',    meta:'Jan 28, 2026 · Mike Rivera',  amount:'' },
      { type:'invoice',icon:'🧾', bg:'var(--success-bg)',     color:'var(--success)', title:'Invoice INV-0087 paid',                meta:'Aug 22, 2024 · $520',        amount:'$520 ✓' },
      { type:'job',    icon:'🛡️', bg:'var(--amber-light)',   color:'var(--amber)',   title:'Job J-031 complete — Smoke Detectors', meta:'Aug 18, 2024 · Mike Rivera',  amount:'$520' },
    ],
    serviceSchedule:[
      { service:'Permit Final Inspection', due:'Mar 15, 2026', status:'overdue', note:'EL-2026-0441 — pending scheduling' },
      { service:'EV Charger Install',      due:'Apr 2026',     status:'upcoming',note:'Estimate pending client approval' },
      { service:'Annual Safety Check',     due:'Feb 2027',     status:'ok',      note:'Schedule ~12 months after panel install' },
    ],
    notes:[
      {type:'call', label:'📞 Call', date:'Feb 16, 2026 — Mike Rivera', text:'Confirmed panel upgrade for Feb 18. Wants EV charger quote — Tesla arriving March.'},
      {type:'visit',label:'🏠 Visit',date:'Jan 28, 2026 — Mike Rivera', text:'Estimate walk-through. Federal Pacific Stab-Lok panel — flagged priority. Photos taken.'},
      {type:'note', label:'📝 Note',date:'Jan 10, 2026 — Jess Torres',  text:'Found us via Google. Referral from Dave Novak. Motivated to move quickly.'},
    ],
    jobHistory:[
      {id:'J-001',typeCls:'t-panel',typeLabel:'PANEL',  date:'Feb 18, 2026',tech:'Mike R.',value:2800,margin:65,statusCls:'si',statusLabel:'In Progress'},
      {id:'J-089',typeCls:'t-inst', typeLabel:'INSTALL', date:'Jun 12, 2025',tech:'Mike R.',value:1800,margin:71,statusCls:'sc',statusLabel:'Complete'},
      {id:'J-055',typeCls:'t-svc',  typeLabel:'SERVICE', date:'Feb 3, 2025', tech:'Jess T.',value:320, margin:44,statusCls:'sc',statusLabel:'Complete'},
      {id:'J-031',typeCls:'t-safe', typeLabel:'SAFETY',  date:'Aug 18, 2024',tech:'Mike R.',value:520, margin:62,statusCls:'sc',statusLabel:'Complete'},
    ],
    photos:['Panel — Before','Panel — After','Wiring Close-up','Labeled Panel'],
    docs:['Signed Contract','Permit Copy','Insurance Letter'],
    permits:[{num:'EL-2026-0441',type:'Panel Upgrade — 200A',stage:'Pending Inspection',stageColor:'var(--warning)'}],
    referredBy:{name:'Dave Novak',init:'DN',color:'#b57cf8',date:'Jan 2026',ltv:2100},
    referrals:[
      {name:'Rachel Park',  init:'RP',color:'var(--green)',  date:'Mar 2025',ltv:320},
      {name:'Marcus Webb',  init:'MW',color:'var(--blue)',   date:'Jan 2026',ltv:1100},
      {name:'Linda Zhao',   init:'LZ',color:'#34d399',       date:'Feb 2026',ltv:1600},
    ],
    refRevenue:3020,
  },
  'Carlos Herrera': {
    phone:'(555) 318-0042', email:'c.herrera@gmail.com', type:'Residential',
    addr:'88 Maple Ave, Oak Park, IL 60301', color:'var(--blue)', init:'CH',
    source:'Google Search', health:'hs-b', healthLabel:'B — Good',
    lastJob:'Jan 15, 2026', lifetime:1750, jobs:2, refs:0, avgPay:'12 days',
    billed:1750, collected:800, outstanding:950, avgMargin:65,
    payScore:'good', tags:['EV Prospect'],
    nextAction:{ icon:'📞', text:'Follow up on EV charger quote — viewed 3x, no response', due:'Expires Feb 24', urgent:true },
    panel:{ brand:'Siemens', amps:'100A', spaces:'20-space (18 used)', year:'2018', location:'Utility room, main floor', condition:'Good — updated 2018', notes:'Detached garage has separate 60A subpanel. Will need upgrade for EV charger.' },
    ar:[
      { inv:'INV-0085', desc:'GFCI Service Call', amount:800,  due:'Jan 28', status:'complete', daysOut:0 },
      { inv:'EV-EST-01',desc:'EV Charger Estimate',amount:950, due:'Feb 24', status:'pending',  daysOut:10 },
    ],
    suggestions:[
      {icon:'⚡', text:'Close EV charger quote — viewed 3x', action:"flash('Opening quote ✓')"},
      {icon:'📞', text:'Follow up — quote expires Feb 24',   action:"flash('Task added ✓')"},
    ],
    timeline:[
      { type:'comm',   icon:'📝', bg:'var(--surface3)',   color:'var(--text)',    title:'EV charger estimate sent — $950',       meta:'Feb 10, 2026 · Mike Rivera', amount:'$950' },
      { type:'job',    icon:'🔧', bg:'var(--amber-light)',color:'var(--amber)',   title:'Job J-042 complete — GFCI service call',meta:'Jan 15, 2026 · Mike Rivera', amount:'$800' },
      { type:'invoice',icon:'🧾', bg:'var(--success-bg)', color:'var(--success)','title':'Invoice INV-0085 paid',               meta:'Jan 28, 2026 · $800',        amount:'$800 ✓' },
    ],
    serviceSchedule:[
      { service:'EV Charger Install', due:'Feb 2026', status:'soon',   note:'Quote pending — follow up needed' },
      { service:'Panel Assessment',   due:'Q3 2026',  status:'upcoming',note:'100A panel near capacity — upgrade candidate' },
    ],
    notes:[
      {type:'note',label:'📝 Note',date:'Feb 10, 2026 — Mike Rivera', text:'Sent EV charger quote $950. Client viewed but has not responded. Getting multiple bids.'},
      {type:'call',label:'📞 Call',date:'Jan 15, 2026 — Mike Rivera', text:'Completed GFCI service call. Happy with work. Mentioned Tesla coming.'},
    ],
    jobHistory:[
      {id:'J-002',typeCls:'t-ev', typeLabel:'EV',     date:'Feb 18, 2026',tech:'Jess T.',value:950, margin:72,statusCls:'ss',statusLabel:'Scheduled'},
      {id:'J-042',typeCls:'t-svc',typeLabel:'SERVICE',date:'Jan 15, 2026',tech:'Mike R.',value:800, margin:58,statusCls:'sc',statusLabel:'Complete'},
    ],
    photos:['Outlet bank — before','GFCI installed','Garage subpanel'],
    docs:['Invoice INV-0085','EV Charger Quote'],
    permits:[], referredBy:null, referrals:[], refRevenue:0,
  },
  'Rachel Park': {
    phone:'(555) 701-2234', email:'rachel.park@icloud.com', type:'Residential',
    addr:'2201 Pine Blvd, Lakewood, IL 60014', color:'var(--green)', init:'RP',
    source:'Referral — Sarah Mitchell', health:'hs-c', healthLabel:'C — At Risk',
    lastJob:'Mar 2025', lifetime:320, jobs:1, refs:0, avgPay:'21 days',
    billed:320, collected:320, outstanding:0, avgMargin:44,
    payScore:'slow', tags:['Residential','Slow Payer'],
    nextAction:{ icon:'📞', text:'Check in — no contact in 11 months. Offer annual inspection.', due:'Overdue', urgent:true },
    panel:{ brand:'Unknown', amps:'150A', spaces:'Unknown', year:'Unknown', location:'Single-story ranch', condition:'Unassessed — see notes', notes:'Referred by Sarah Mitchell. No panel inspection on record.' },
    ar:[], suggestions:[
      {icon:'📞', text:'Check in — no contact in 11 months', action:"flash('Task added ✓')"},
      {icon:'🔄', text:'Offer annual safety inspection',      action:"flash('Quote started ✓')"},
    ],
    timeline:[
      { type:'job',    icon:'🔧', bg:'var(--amber-light)',color:'var(--amber)',   title:'Job J-003 complete — Service Call',meta:'Mar 20, 2025 · Jess Torres', amount:'$320' },
      { type:'invoice',icon:'🧾', bg:'var(--warning-bg)', color:'var(--warning)','title':'INV paid — 21 days late (2 reminders)',meta:'Apr 10, 2025',           amount:'$320' },
    ],
    serviceSchedule:[
      { service:'Annual Safety Inspection', due:'Mar 2026', status:'overdue', note:'No contact in 11 months — outreach needed' },
    ],
    notes:[
      {type:'call',label:'📞 Call',date:'Mar 20, 2025 — Jess Torres', text:'Service call complete — slow to pay, needed two reminders. Nice but busy.'},
    ],
    jobHistory:[
      {id:'J-003',typeCls:'t-svc',typeLabel:'SERVICE',date:'Mar 20, 2025',tech:'Jess T.',value:320,margin:44,statusCls:'sc',statusLabel:'Complete'},
    ],
    photos:[], docs:[], permits:[],
    referredBy:{name:'Sarah Mitchell',init:'SM',color:'var(--amber)',date:'Mar 2025',ltv:6200},
    referrals:[], refRevenue:0,
  },
  'TK Building Group': {
    phone:'(555) 900-4411', email:'ops@tkbuilding.com', type:'Commercial',
    addr:'55 Commerce Dr, Riverside, IL 60546', color:'var(--warning)', init:'TK',
    source:'Existing Relationship', health:'hs-a', healthLabel:'A — Healthy',
    lastJob:'Feb 19, 2026', lifetime:24800, jobs:6, refs:1, avgPay:'28 days',
    billed:24800, collected:18680, outstanding:6120, avgMargin:60,
    payScore:'net30', tags:['Commercial','Key Account','Net-30'],
    nextAction:{ icon:'📋', text:'Submit Phase 2 quote — PM approved budget, deadline Mar 1', due:'Mar 1', urgent:false },
    panel:{ brand:'Square D (3-phase)', amps:'400A', spaces:'Multiple panels', year:'2022', location:'Panel room — basement', condition:'Excellent', notes:'3-phase 400A service. Multiple tenant spaces. Phase 2 will add 4 more TI spaces.' },
    ar:[
      { inv:'INV-0086', desc:'Commercial Phase 1 Complete', amount:6120, due:'Feb 11', status:'overdue', daysOut:11 },
      { inv:'INV-0079', desc:'Panel Room Rough-In',         amount:4800, due:'Nov 5, 2025', status:'complete', daysOut:0 },
    ],
    suggestions:[
      {icon:'📋', text:'Quote Phase 2 — 4 more tenant spaces', action:"flash('Quote started ✓')"},
      {icon:'💰', text:'INV-0086 $6,120 — 11 days overdue',   action:"flash('Reminder sent ✓')"},
    ],
    timeline:[
      { type:'job',    icon:'🔧', bg:'var(--amber-light)', color:'var(--amber)',   title:'J-004 scheduled — Commercial Phase 2', meta:'Feb 19, 2026 · Jess Torres',  amount:'$8,400' },
      { type:'comm',   icon:'📞', bg:'var(--surface3)',    color:'var(--text)',    title:'Call — Phase 2 budget approved',        meta:'Feb 17, 2026 · Mike Rivera',  amount:'' },
      { type:'invoice',icon:'🧾', bg:'var(--danger-bg)',   color:'var(--danger)',  title:'INV-0086 OVERDUE — $6,120',            meta:'Due Feb 11 · 11 days late',   amount:'$6,120 ⚠' },
      { type:'job',    icon:'🔧', bg:'var(--success-bg)',  color:'var(--success)', title:'J-077 complete — Phase 1 Final',       meta:'Dec 10, 2025 · Mike Rivera',  amount:'$6,120' },
      { type:'visit',  icon:'🏠', bg:'var(--surface3)',    color:'var(--text)',    title:'Walkthrough — 4 remaining TI spaces',  meta:'Jan 20, 2026 · Mike Rivera',  amount:'' },
      { type:'invoice',icon:'🧾', bg:'var(--success-bg)',  color:'var(--success)', title:'INV-0079 paid — Phase 1 rough-in',     meta:'Nov 5, 2025 · $4,800',        amount:'$4,800 ✓' },
    ],
    serviceSchedule:[
      { service:'Phase 2 Quote Due',   due:'Mar 1, 2026',  status:'soon',    note:'PM wants 4-space TI scope + pricing' },
      { service:'Annual Panel Service',due:'Jul 2026',     status:'upcoming',note:'Scheduled preventive maintenance' },
    ],
    notes:[
      {type:'call', label:'📞 Call', date:'Feb 17, 2026 — Mike Rivera', text:'Confirmed J-004 start time 7am. PM said Phase 2 budget approved — wants quote by March 1.'},
      {type:'visit',label:'🏠 Visit',date:'Jan 20, 2026 — Mike Rivera', text:'Walkthrough of remaining 4 tenant spaces. Estimated $12k–$16k additional scope.'},
    ],
    jobHistory:[
      {id:'J-004',typeCls:'t-inst',typeLabel:'INSTALL',date:'Feb 19, 2026',tech:'Jess T.',value:8400, margin:58,statusCls:'ss',statusLabel:'Scheduled'},
      {id:'J-077',typeCls:'t-inst',typeLabel:'INSTALL',date:'Dec 10, 2025',tech:'Mike R.',value:6120, margin:62,statusCls:'sc',statusLabel:'Complete'},
      {id:'J-061',typeCls:'t-inst',typeLabel:'INSTALL',date:'Oct 5, 2025', tech:'Mike R.',value:4800, margin:60,statusCls:'sc',statusLabel:'Complete'},
    ],
    photos:['Panel room','Sub-panel A','Sub-panel B','Tenant space 1','Tenant space 2'],
    docs:['Master Contract','Phase 1 Sign-off','Insurance Cert','Phase 2 Scope Draft'],
    permits:[{num:'EL-2026-0389',type:'Commercial New Construction',stage:'Approved',stageColor:'var(--success)'}],
    referredBy:null,
    referrals:[{name:'Green Valley HOA',init:'GV',color:'#34d399',date:'Sep 2025',ltv:850}],
    refRevenue:850,
  },
  'Dave Novak': {
    phone:'(555) 412-7788', email:'dnovak77@yahoo.com', type:'Residential',
    addr:'77 Birch Rd, Pinehurst, IL 60120', color:'#b57cf8', init:'DN',
    source:'Referral — Word of mouth', health:'hs-c', healthLabel:'C — At Risk',
    lastJob:'Feb 17, 2026', lifetime:2100, jobs:3, refs:2, avgPay:'38 days',
    billed:2100, collected:1820, outstanding:280, avgMargin:59,
    payScore:'slow', tags:['Slow Payer','Permit Issue'],
    nextAction:{ icon:'⚠️', text:'Collect $280 overdue INV-0087 — 61 days outstanding', due:'61 days late', urgent:true },
    panel:{ brand:'Pushmatic (original)', amps:'100A', spaces:'20-space (near full)', year:'1978', location:'Basement, south wall', condition:'POOR — critical replacement needed', notes:'Original 1978 Pushmatic panel. Cannot add breakers. Recommend 200A upgrade immediately. Generator wired 2023 — separate hookup.' },
    ar:[
      { inv:'INV-0087', desc:'Service Call — Breaker Issue', amount:280, due:'Dec 17', status:'overdue', daysOut:61 },
    ],
    suggestions:[
      {icon:'⚠️', text:'Re-file permit EL-2026-0302 — expired',      action:"flash('Permit flagged ✓')"},
      {icon:'💰', text:'Collect INV-0087 — $280 overdue 61 days',     action:"flash('Escalation sent ✓')"},
      {icon:'🔧', text:'Pitch 200A panel upgrade — panel is critical', action:"flash('Quote started ✓')"},
    ],
    timeline:[
      { type:'job',    icon:'🔧', bg:'var(--amber-light)', color:'var(--amber)',  title:'J-005 complete — Breaker service call', meta:'Feb 17, 2026 · Mike Rivera', amount:'$280' },
      { type:'invoice',icon:'🧾', bg:'var(--danger-bg)',   color:'var(--danger)', title:'INV-0087 OVERDUE 61 days — $280',       meta:'Due Dec 17, 2025',          amount:'$280 ⚠' },
      { type:'permit', icon:'⚠️', bg:'var(--danger-bg)',  color:'var(--danger)', title:'Permit EL-2026-0302 EXPIRED',           meta:'Dec 10, 2025',              amount:'' },
      { type:'job',    icon:'🔧', bg:'var(--success-bg)',  color:'var(--success)','title':'J-044 complete — Generator hookup',  meta:'Aug 12, 2025 · Mike Rivera', amount:'$1,540' },
    ],
    serviceSchedule:[
      { service:'200A Panel Upgrade',      due:'ASAP',        status:'overdue', note:'Critical — 1978 Pushmatic, near capacity' },
      { service:'Permit Re-file EL-2026-0302', due:'ASAP',   status:'overdue', note:'Expired Dec 10 — must re-apply' },
      { service:'Generator Service',        due:'Aug 2026',   status:'upcoming',note:'Annual check on 2023 hookup' },
    ],
    notes:[
      {type:'call',label:'📞 Call',date:'Feb 17, 2026 — Mike Rivera', text:'Service call complete — breaker issue resolved. Invoice sent. Reminded about overdue balance.'},
      {type:'note',label:'📝 Note',date:'Jan 5, 2026 — Mike Rivera',  text:'Permit EL-2026-0302 expired Dec 10. Need to re-apply. Dave aware but has not confirmed.'},
    ],
    jobHistory:[
      {id:'J-005',typeCls:'t-svc', typeLabel:'SERVICE', date:'Feb 17, 2026',tech:'Mike R.',value:280, margin:60,statusCls:'sc',statusLabel:'Complete'},
      {id:'J-044',typeCls:'t-inst',typeLabel:'INSTALL', date:'Aug 12, 2025',tech:'Mike R.',value:1540,margin:58,statusCls:'sc',statusLabel:'Complete'},
      {id:'J-021',typeCls:'t-svc', typeLabel:'SERVICE', date:'Nov 3, 2024', tech:'Jess T.',value:280, margin:60,statusCls:'sc',statusLabel:'Complete'},
    ],
    photos:['Panel — current state','Generator hookup','Subpanel location'],
    docs:['Invoice INV-0087 (overdue)','Generator permit'],
    permits:[{num:'EL-2026-0302',type:'Service Upgrade',stage:'EXPIRED — Re-file required',stageColor:'var(--danger)'}],
    referredBy:null,
    referrals:[
      {name:'Sarah Mitchell',init:'SM',color:'var(--amber)',date:'Jan 2026',ltv:6200},
      {name:'Rachel Park',   init:'RP',color:'var(--green)',date:'Mar 2025',ltv:320},
    ],
    refRevenue:6520,
  },
  'Linda Zhao': {
    phone:'(555) 623-9910', email:'lzhao@design.co', type:'Residential',
    addr:'1050 Elm St, Maplewood, IL 60025', color:'#34d399', init:'LZ',
    source:'Referral — Sarah Mitchell', health:'hs-b', healthLabel:'B — Good',
    lastJob:'Feb 20, 2026', lifetime:1600, jobs:1, refs:0, avgPay:'8 days',
    billed:1600, collected:0, outstanding:1600, avgMargin:66,
    payScore:'good', tags:['Residential','Design-Conscious'],
    nextAction:{ icon:'💡', text:'Send landscape + under-cabinet lighting quote — she asked at install', due:'This week', urgent:false },
    panel:{ brand:'Leviton Decora', amps:'150A', spaces:'30-space (22 used)', year:'2015', location:'Utility room, ground floor', condition:'Good', notes:'Designer home — premium fixtures throughout. Client wants premium aesthetics on all visible electrical. Under-cabinet and landscape lighting next.' },
    ar:[
      { inv:'INV-0084', desc:'Subpanel Install + Outlets', amount:1600, due:'Feb 28', status:'pending', daysOut:6 },
    ],
    suggestions:[
      {icon:'💡', text:'Quote landscape + under-cabinet lighting', action:"flash('Quote started ✓')"},
      {icon:'💰', text:'INV-0084 $1,600 pending — follow up',       action:"flash('Reminder sent ✓')"},
    ],
    timeline:[
      { type:'job',   icon:'🔧', bg:'var(--amber-light)',color:'var(--amber)',   title:'J-006 complete — Subpanel + outlets', meta:'Feb 20, 2026 · Jess Torres', amount:'$1,600' },
      { type:'invoice',icon:'🧾',bg:'var(--warning-bg)', color:'var(--warning)','title':'INV-0084 sent — $1,600 pending',     meta:'Feb 20, 2026',              amount:'$1,600' },
      { type:'comm',  icon:'📞', bg:'var(--surface3)',   color:'var(--text)',    title:'Call — confirmed install + discussed lighting quote', meta:'Feb 14, 2026 · Jess Torres', amount:'' },
    ],
    serviceSchedule:[
      { service:'Lighting Quote — Landscape + Under-Cabinet', due:'This week',  status:'soon',    note:'Client requested during Feb 20 install' },
      { service:'Annual Inspection',                          due:'Feb 2027',   status:'ok',      note:'First service anniversary' },
    ],
    notes:[
      {type:'call',label:'📞 Call',date:'Feb 14, 2026 — Jess Torres', text:'Subpanel install confirmed for Feb 20. Client wants premium panel cover — sourcing Leviton Decora.'},
    ],
    jobHistory:[
      {id:'J-006',typeCls:'t-panel',typeLabel:'PANEL',date:'Feb 20, 2026',tech:'Jess T.',value:1600,margin:66,statusCls:'sc',statusLabel:'Complete'},
    ],
    photos:['Kitchen under-cabinet area','Utility room panel','Landscape walk area'],
    docs:['Invoice INV-0084'],
    permits:[],
    referredBy:{name:'Sarah Mitchell',init:'SM',color:'var(--amber)',date:'Feb 2026',ltv:6200},
    referrals:[], refRevenue:0,
  },
};


// ── Live client profile sync ─────────────────────────────────────────
// Called every time a client modal opens — computes stats from live arrays
function syncClientProfile(name) {
  const p = clientProfiles[name];
  if (!p) return;

  // Jobs for this client
  const clientJobs = jobs.filter(j => j.client === name);
  const completedJobs = clientJobs.filter(j => j.status === 'complete');

  // Invoices for this client
  const clientInvs = invoices.filter(i => i.client === name);
  const paidInvs   = clientInvs.filter(i => i.status === 'paid' || i.status === 'complete');
  const unpaidInvs = clientInvs.filter(i => i.status !== 'paid' && i.status !== 'complete');

  // Totals
  const totalBilled      = clientInvs.reduce((s,i) => s + i.amount, 0);
  const totalCollected   = paidInvs.reduce((s,i) => s + i.amount, 0);
  const totalOutstanding = unpaidInvs.reduce((s,i) => s + i.amount, 0);
  const totalJobValue    = clientJobs.reduce((s,j) => s + j.value, 0);
  const lifetime         = Math.max(totalBilled, totalJobValue, p.lifetime || 0);

  // Avg margin
  const BENCH = { panel:65, ev:72, svc:42, inst:58, safe:60, outlets:55, lighting:58 };
  const margins = clientJobs.filter(j=>j.value>0).map(j => j.margin || BENCH[j.type] || 55);
  const avgMargin = margins.length ? Math.round(margins.reduce((s,m)=>s+m,0)/margins.length) : (p.avgMargin || 0);

  // Last job date
  const lastJob = clientJobs.length
    ? (clientJobs.sort((a,b) => {
        const md = s => { const p=s.split(' '); const M=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; return (M.indexOf(p[0])||0)*100+(parseInt(p[1])||0); };
        return md(b.date||'') - md(a.date||'');
      })[0].date || p.lastJob)
    : p.lastJob || '—';

  // Avg days to pay (from invoice terms)
  const avgPayDays = paidInvs.length
    ? Math.round(paidInvs.reduce((s,i)=>{
        const d1=new Date(i.issued||'2026-02-01'), d2=new Date(i.due||'2026-03-01');
        return s + Math.max((d2-d1)/86400000, 0);
      },0)/paidInvs.length)
    : null;
  const avgPay = avgPayDays !== null ? avgPayDays + ' days' : (p.avgPay || '—');

  // Build live job history for Jobs tab
  const TYPE_LABEL = { panel:'Panel',ev:'EV Charger',svc:'Service',inst:'Commercial',safe:'Safety',outlets:'Outlets',lighting:'Lighting' };
  const TYPE_CLS   = { panel:'tag-panel',ev:'tag-ev',svc:'tag-svc',inst:'tag-inst',safe:'tag-safe',outlets:'tag-ev',lighting:'tag-panel' };
  const STATUS_CLS = { scheduled:'ss',inprogress:'si',complete:'sc',pending:'sp',cancelled:'sd' };
  const STATUS_LBL = { scheduled:'Scheduled',inprogress:'In Progress',complete:'Complete',pending:'Pending',cancelled:'Cancelled' };
  const jobHistory = clientJobs.map(j => ({
    id: j.id, date: j.date, tech: j.tech,
    value: j.value, margin: j.margin || BENCH[j.type] || 55,
    typeLabel: TYPE_LABEL[j.type] || 'Job',
    typeCls: TYPE_CLS[j.type] || 'tag-svc',
    statusLabel: STATUS_LBL[j.status] || j.status,
    statusCls: STATUS_CLS[j.status] || 'sp',
  }));

  // Build live AR for billing tab
  const ar = clientInvs.map(inv => ({
    inv: inv.num, desc: inv.job || 'Services',
    amount: inv.amount, due: inv.due || '—',
    status: inv.status, daysOut: 0,
  }));

  // Build live timeline entries from jobs + invoices
  const timeline = [];
  clientJobs.forEach(j => {
    timeline.push({
      type:'job', icon:'🔧', bg:'var(--amber-light)', color:'var(--amber)',
      title: j.status === 'complete' ? `Job ${j.id} completed — ${j.name}` : `Job ${j.id} — ${j.name} (${j.status})`,
      meta: (j.date||'') + (j.tech ? ' · ' + j.tech : ''),
      amount: j.value > 0 ? '$'+j.value.toLocaleString() : '',
    });
  });
  clientInvs.forEach(inv => {
    const isPaid = inv.status === 'paid' || inv.status === 'complete';
    timeline.push({
      type:'invoice', icon: isPaid ? '✅' : '💵',
      bg: isPaid ? 'var(--success-bg)' : 'var(--amber-light)',
      color: isPaid ? 'var(--success)' : 'var(--amber)',
      title: isPaid ? `Invoice ${inv.num} paid — ${inv.job||'Services'}` : `Invoice ${inv.num} sent — ${inv.job||'Services'}`,
      meta: (inv.issued||'') + (inv.due ? ' · Due ' + inv.due : ''),
      amount: '$'+inv.amount.toLocaleString(),
    });
  });

  // ── Compute health score algorithmically ────────────────────────
  let score = 100;
  // Outstanding balance penalty
  if (totalOutstanding > 0) score -= 10;
  // Overdue check: any invoice with status 'overdue'
  const hasOverdue = clientInvs.some(i => i.status === 'overdue');
  if (hasOverdue) score -= 20;
  // Payment speed
  if (avgPayDays !== null) {
    if (avgPayDays > 45)      score -= 15;
    else if (avgPayDays > 30) score -= 8;
  }
  // Recency: estimate from last job date string "Feb 18" format
  const nowMs = Date.now();
  const MO_IDX = {Jan:0,Feb:1,Mar:2,Apr:3,May:4,Jun:5,Jul:6,Aug:7,Sep:8,Oct:9,Nov:10,Dec:11};
  let lastJobMs = 0;
  if (lastJob && lastJob !== '—') {
    const parts = lastJob.split(' ');
    if (parts.length >= 2) {
      const mo = MO_IDX[parts[0]]; const dy = parseInt(parts[1]);
      if (mo !== undefined && dy) lastJobMs = new Date(2026, mo, dy).getTime();
    }
  }
  const daysSinceLastJob = lastJobMs ? Math.round((nowMs - lastJobMs) / 86400000) : 999;
  if (clientJobs.length === 0) score -= 20;
  else if (daysSinceLastJob > 180) score -= 15;
  else if (daysSinceLastJob > 90)  score -= 10;
  // Value bonus
  if (lifetime >= 5000) score += 5;
  else if (lifetime >= 2000) score += 3;
  // Referral source bonus
  const refs = p.refs || 0;
  if (refs > 0) score += 5;
  score = Math.max(0, Math.min(100, score));
  // Map score → letter grade
  let healthLetter, healthCls;
  if (score >= 80)      { healthLetter = 'A'; healthCls = 'hs-a'; }
  else if (score >= 60) { healthLetter = 'B'; healthCls = 'hs-b'; }
  else if (score >= 40) { healthLetter = 'C'; healthCls = 'hs-c'; }
  else                  { healthLetter = 'D'; healthCls = 'hs-d'; }
  const healthDesc = {A:'Healthy', B:'Good', C:'At Risk', D:'Critical'}[healthLetter];
  p.health      = healthCls;
  p.healthLabel = healthLetter + ' — ' + healthDesc;
  p.healthScore = score;
  // Also update clientHealth lookup so grid cards stay in sync
  if (window.clientHealth || typeof clientHealth !== 'undefined') {
    try {
      clientHealth[name] = clientHealth[name] || {};
      clientHealth[name].score = healthLetter;
      clientHealth[name].cls   = healthCls;
      clientHealth[name].risk  = score < 50;
    } catch(e) {}
  }

  // ── Write back to profile ──────────────────────────────────────
  p.lifetime    = lifetime;
  p.jobs        = clientJobs.length;
  p.billed      = totalBilled;
  p.collected   = totalCollected;
  p.outstanding = totalOutstanding;
  p.avgMargin   = avgMargin;
  p.lastJob     = lastJob;
  p.avgPay      = avgPay;
  p.jobHistory  = jobHistory;
  p.ar          = ar;
  if (timeline.length > (p.timeline||[]).filter(t=>t.type==='job'||t.type==='invoice').length) {
    // Merge live entries with any hand-crafted static entries
    const staticEntries = (p.timeline||[]).filter(t => t.type !== 'job' && t.type !== 'invoice');
    p.timeline = [...timeline, ...staticEntries];
  }

  // Update the flat client record too
  const cl = clients.find(x => x.name === name);
  if (cl) {
    cl.jobs  = clientJobs.length;
    cl.spent = lifetime;
  }

  // Update sparkline data
  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const sparkArr = new Array(12).fill(0);
  clientInvs.forEach(inv => {
    const mo = MONTHS.indexOf((inv.issued||'').split(' ')[0]);
    if (mo >= 0) sparkArr[mo] += inv.amount;
  });
  clientJobs.forEach(j => {
    const mo = MONTHS.indexOf((j.date||'').split(' ')[0]);
    if (mo >= 0 && sparkArr[mo] === 0) sparkArr[mo] += j.value;
  });
  if (sparkArr.some(v=>v>0)) clientSparkData[name] = sparkArr;
}

function openCM(name) {
  // Ensure clientProfiles entry exists for any client (e.g. created before profiles existed)
  if (!clientProfiles[name]) {
    const cl = clients.find(x => x.name === name);
    clientProfiles[name] = {
      phone: cl?.phone || '—', email: cl?.email || '—',
      type: cl?.type || 'Residential', addr: cl?.addr || '—',
      color: cl?.color || '#94a3b8', init: cl?.init || name.slice(0,2).toUpperCase(),
      source: cl?.source || 'Direct', health: 'hs-b', healthLabel: 'B — New Client',
      lastJob: '—', lifetime: 0, jobs: 0, refs: 0, avgPay: '—',
      billed: 0, collected: 0, outstanding: 0, avgMargin: 0, payScore: 'good',
      tags: cl?.tags || [], suggestions: [], notes: [], jobHistory: [],
      photos: [], docs: [], permits: [], serviceSchedule: [],
      referrals: [], refRevenue: 0, timeline: [],
      panel: { brand:'—', amps:'—', spaces:'—', year:'—', location:'—', condition:'—', notes:'' },
      nextAction: { icon:'🔧', text:'Schedule first job', due:'When ready', urgent:false },
    };
  }
  syncClientProfile(name);   // ← compute live stats before rendering
  const p = clientProfiles[name] || {
    phone:'—', email:'—', type:'Residential', addr:'—', color:'#94a3b8', init:name.slice(0,2).toUpperCase(),
    source:'Direct', health:'hs-b', healthLabel:'B — New Client',
    lastJob:'—', lifetime:0, jobs:0, refs:0, avgPay:'—',
    billed:0, collected:0, outstanding:0, avgMargin:0, payScore:'good',
    tags:[], suggestions:[], notes:[], jobHistory:[],
    photos:[], docs:[], permits:[], referrals:[], refRevenue:0,
    panel:{brand:'—',amps:'—',spaces:'—',year:'—',location:'—',condition:'—',notes:''},
    ar:[], timeline:[], serviceSchedule:[],
    nextAction:null, referredBy:null,
  };

  const modal = document.getElementById('client-modal');
  if(!modal) return;

  // ── HEADER ──────────────────────────────────────────────────────
  document.getElementById('client-modal-title').textContent = name;
  const av = document.getElementById('cm-avatar');
  if(av){ av.textContent=p.init; av.style.background=(p.color||'var(--amber)')+'22'; av.style.color=p.color||'var(--amber)'; }
  const hs = document.getElementById('cm-health');
  if(hs){ hs.className='health-score '+(p.health||'hs-b'); hs.textContent=p.healthLabel||'B — Good'; }
  const lastJobEl = document.getElementById('cm-last-job');
  if(lastJobEl) lastJobEl.textContent = p.lastJob ? 'Last job: '+p.lastJob : 'No jobs yet';
  const typeAddrEl = document.getElementById('cm-type-addr');
  if(typeAddrEl) typeAddrEl.textContent = p.type + ' · ' + (p.addr||'').split(',').slice(1).join(',').trim();
  const payBadgeEl = document.getElementById('cm-pay-badge');
  if(payBadgeEl){
    const pb = p.avgPay==='—'||!p.avgPay?null:parseInt(p.avgPay);
    if(!pb){ payBadgeEl.textContent=''; }
    else if(pb<=14){ payBadgeEl.textContent='⚡ Pays in '+p.avgPay; payBadgeEl.style.color='var(--success)'; }
    else if(pb<=30){ payBadgeEl.textContent='⏱ Pays in '+p.avgPay; payBadgeEl.style.color='var(--warning)'; }
    else { payBadgeEl.textContent='⚠ Slow payer — '+p.avgPay; payBadgeEl.style.color='var(--danger)'; }
  }

  // ── NEXT ACTION BANNER ──────────────────────────────────────────
  const naBanner = document.getElementById('cm-next-action');
  if(naBanner){
    if(p.nextAction){
      naBanner.style.display='flex';
      naBanner.className = 'cm-next-action' + (p.nextAction.urgent?' danger-action':'');
      document.getElementById('cm-na-icon').textContent = p.nextAction.icon;
      document.getElementById('cm-na-text').textContent = p.nextAction.text;
      document.getElementById('cm-na-due').textContent  = p.nextAction.due;
    } else {
      naBanner.style.display='none';
    }
  }

  // ── STATS BAR ───────────────────────────────────────────────────
  document.getElementById('cm-lifetime').textContent = '$'+p.lifetime.toLocaleString();
  document.getElementById('cm-jobs').textContent     = p.jobs;
  document.getElementById('cm-refs').textContent     = p.refs;
  document.getElementById('cm-avg-pay').textContent  = p.avgPay||'—';
  const marginEl = document.getElementById('cm-avg-margin');
  if(marginEl){
    marginEl.textContent = p.avgMargin ? p.avgMargin+'%' : '—';
    marginEl.style.color = p.avgMargin>=60 ? 'var(--success)' : p.avgMargin>=45 ? 'var(--warning)' : 'var(--danger)';
  }
  // Sparkline
  const sp = document.getElementById('cm-sparkline');
  if(sp){
    const spd = clientSparkData[name]||[10,20,15,30];
    const mx = Math.max(...spd,1);
    sp.innerHTML = spd.map(v=>`<div style="width:5px;height:${Math.max(Math.round((v/mx)*22),2)}px;border-radius:1px 1px 0 0;background:var(--amber);opacity:.8;flex-shrink:0"></div>`).join('');
  }

  // ── OVERVIEW TAB ────────────────────────────────────────────────
  const setT = (id,val)=>{ const el=document.getElementById(id); if(el) el.textContent=val; };
  setT('cm-edit-name',  name);
  setT('cm-edit-phone', p.phone||'—');
  setT('cm-edit-email', p.email||'—');
  setT('cm-edit-type',  p.type||'Residential');
  setT('cm-edit-addr',  p.addr||'—');
  setT('cm-edit-source',p.source||'—');

  // Billing summary in overview sidebar
  const arSum = document.getElementById('cm-ar-summary');
  if(arSum){
    const pct = p.billed>0 ? Math.round((p.collected/p.billed)*100) : 0;
    const barColor = p.outstanding>0 ? 'var(--warning)' : 'var(--success)';
    arSum.innerHTML = `
      <div class="ar-row"><span style="color:var(--text-dim)">Total billed</span><span style="font-family:'JetBrains Mono',monospace">$${p.billed.toLocaleString()}</span></div>
      <div class="ar-row"><span style="color:var(--text-dim)">Collected</span><span style="font-family:'JetBrains Mono',monospace;color:var(--success)">$${p.collected.toLocaleString()}</span></div>
      <div class="ar-row"><span style="color:var(--text-dim)">Outstanding</span>
        <div style="display:flex;align-items:center;gap:6px">
          <span style="font-family:'JetBrains Mono',monospace;color:${p.outstanding>0?'var(--warning)':'var(--success)'}">${p.outstanding>0?'$'+p.outstanding.toLocaleString():'Paid in full'}</span>
          ${p.outstanding>0 ? `<button class="ar-action-btn" onclick="cmSendReminder('${name}')">Send reminder</button>` : ''}
        </div>
      </div>
      <div style="margin-top:8px;height:5px;border-radius:3px;background:var(--border);overflow:hidden">
        <div style="height:100%;width:${pct}%;background:var(--success);border-radius:3px;transition:width .4s"></div>
      </div>
      <div style="font-size:10.5px;color:var(--text-muted);margin-top:4px">${pct}% collected</div>`;
  }

  // Permits in overview sidebar
  const permBox = document.getElementById('cm-permits-box');
  if(permBox){
    if(p.permits && p.permits.length){
      permBox.innerHTML = p.permits.map(pm=>`
        <div style="background:var(--surface2);border-radius:9px;padding:10px 12px;margin-bottom:8px;cursor:pointer;border:1px solid var(--border)" onclick="nav('permits',null);document.getElementById('client-modal').classList.remove('open')">
          <div style="font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-muted)">${pm.num}</div>
          <div style="font-size:13px;font-weight:500;margin:2px 0">${pm.type}</div>
          <div style="display:flex;align-items:center;gap:5px;margin-top:4px"><div style="width:7px;height:7px;border-radius:50%;background:${pm.stageColor};flex-shrink:0"></div><span style="font-size:11px;color:${pm.stageColor}">${pm.stage}</span></div>
        </div>`).join('');
    } else {
      permBox.innerHTML = '<div style="font-size:12px;color:var(--text-muted);padding:8px 10px;background:var(--surface2);border-radius:9px">No open permits</div>';
    }
  }

  // Tags
  const tagsEl = document.getElementById('cm-tags');
  if(tagsEl){
    const tagColors = { 'VIP':'var(--amber-light)/var(--amber)', 'Referral Source':'rgba(24,84,160,.1)/var(--blue)', 'Key Account':'var(--amber-light)/var(--amber)', 'Slow Payer':'var(--danger-bg)/var(--danger)', 'Permit Issue':'var(--danger-bg)/var(--danger)', 'EV Prospect':'var(--info-bg)/var(--info)', 'Commercial':'rgba(24,84,160,.1)/var(--blue)', 'Net-30':'var(--surface2)/var(--text-dim)', 'Design-Conscious':'var(--success-bg)/var(--success)' };
    tagsEl.innerHTML = (p.tags||[]).map(t=>{
      const [bg,col]=(tagColors[t]||'var(--surface2)/var(--text-dim)').split('/');
      return `<span style="font-size:11px;padding:3px 9px;border-radius:10px;background:${bg};color:${col};border:1px solid ${col}33">${t}</span>`;
    }).join('')+`<span style="font-size:11px;padding:3px 9px;border-radius:10px;background:var(--surface2);color:var(--text-dim);border:1px solid var(--border);cursor:pointer" onclick="cmAddTag('${name}')">+ Tag</span>`;
  }

  // Suggestions
  const sugEl = document.getElementById('cm-suggestions');
  if(sugEl && p.suggestions){
    sugEl.innerHTML = p.suggestions.map(s=>`<span class="suggest-chip" onclick="${s.action}">${s.icon} ${s.text}</span>`).join('');
  }

  // ── ACTIVITY TIMELINE TAB ────────────────────────────────────────
  const tlEl = document.getElementById('cm-timeline-list');
  if(tlEl){
    tlEl.innerHTML = (p.timeline||[]).length
      ? (p.timeline||[]).map(t=>`
        <div class="timeline-item">
          <div class="timeline-dot" style="background:${t.bg};color:${t.color}">${t.icon}</div>
          <div class="timeline-body">
            <div class="timeline-title">${t.title}</div>
            <div class="timeline-meta">${t.meta}</div>
          </div>
          ${t.amount ? `<div class="timeline-amount">${t.amount}</div>` : ''}
        </div>`).join('')
      : '<div style="padding:24px;text-align:center;color:var(--text-muted);font-size:13px">No activity recorded yet</div>';
  }

  // ── JOBS TAB ─────────────────────────────────────────────────────
  const jobTbody = document.getElementById('cm-job-rows');
  if(jobTbody){
    jobTbody.innerHTML = (p.jobHistory||[]).map(j=>`
      <tr style="cursor:pointer" onclick="closeAllModals();setTimeout(()=>openJobEdit('${j.id}'),80)">
        <td style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-muted)">${j.id}</td>
        <td><span class="tag ${j.typeCls}">${j.typeLabel}</span></td>
        <td style="font-size:12.5px">${j.date}</td>
        <td style="font-size:12.5px">${j.tech}</td>
        <td style="font-family:'JetBrains Mono',monospace;color:var(--amber)">$${j.value.toLocaleString()}</td>
        <td style="font-family:'JetBrains Mono',monospace;color:${j.margin>=60?'var(--success)':j.margin>=45?'var(--warning)':'var(--danger)'}">${j.margin}%</td>
        <td><span class="status-pill ${j.statusCls}">${j.statusLabel}</span></td>
      </tr>`).join('') || '<tr><td colspan="7" style="text-align:center;color:var(--text-muted);padding:20px">No jobs on record</td></tr>';
    const sumEl = document.getElementById('cm-jobs-summary');
    if(sumEl) sumEl.textContent = `${p.jobs} job${p.jobs!==1?'s':''} · $${p.lifetime.toLocaleString()} lifetime`;
  }

  // ── BILLING TAB ──────────────────────────────────────────────────
  const invListEl = document.getElementById('cm-invoice-list');
  if(invListEl){
    const allAR = p.ar || [];
    if(allAR.length){
      invListEl.innerHTML = allAR.map(inv=>{
        const statusColor = inv.status==='overdue'?'var(--danger)':inv.status==='complete'?'var(--success)':'var(--warning)';
        const statusLabel = inv.status==='overdue'?'Overdue ':inv.status==='complete'?'Paid':'Pending';
        return `<div class="ar-row" style="padding:10px 14px">
          <div style="flex:1"><div style="font-size:13px;font-weight:500">${inv.inv} — ${inv.desc}</div><div style="font-size:11px;color:var(--text-dim)">Due ${inv.due}${inv.daysOut>0&&inv.status==='overdue'?' · '+inv.daysOut+' days late':''}</div></div>
          <div style="text-align:right;flex-shrink:0">
            <div style="font-family:'JetBrains Mono',monospace;font-size:13px;color:${statusColor}">$${inv.amount.toLocaleString()}</div>
            <div style="font-size:10.5px;color:${statusColor};font-weight:600">${statusLabel}</div>
          </div>
          ${inv.status!=='complete' ? `<button class="ar-action-btn" style="margin-left:10px" onclick="cmRemindInvoice('${name}','${inv.inv}')">Remind</button>` : ''}
        </div>`;
      }).join('');
    } else {
      invListEl.innerHTML = '<div style="padding:20px;text-align:center;color:var(--text-muted);font-size:13px">No invoices on record</div>';
    }
  }
  const billingSnap = document.getElementById('cm-billing-snapshot');
  if(billingSnap){
    billingSnap.innerHTML = `
      <div class="property-panel">
        <div class="ar-row"><span class="property-key">Total billed</span><strong>$${p.billed.toLocaleString()}</strong></div>
        <div class="ar-row"><span class="property-key">Collected</span><strong style="color:var(--success)">$${p.collected.toLocaleString()}</strong></div>
        <div class="ar-row"><span class="property-key">Outstanding</span><strong style="color:${p.outstanding>0?'var(--warning)':'var(--text-dim)'}">$${p.outstanding.toLocaleString()}</strong></div>
        <div class="ar-row"><span class="property-key">Avg margin</span><strong style="color:${p.avgMargin>=60?'var(--success)':'var(--warning)'}">${p.avgMargin||0}%</strong></div>
        <div class="ar-row" style="border:none"><span class="property-key">Avg pay time</span><strong>${p.avgPay||'—'}</strong></div>
      </div>`;
  }
  const payBehEl = document.getElementById('cm-pay-behavior');
  if(payBehEl){
    const scores = { good:'✓ Reliable payer — invoices paid on time', net30:'📋 Net-30 commercial terms — consistent', slow:'⚠ Slow payer — typically requires follow-up' };
    const colors  = { good:'var(--success)', net30:'var(--info)', slow:'var(--warning)' };
    const sc = p.payScore||'good';
    payBehEl.innerHTML = `<div style="background:var(--surface2);border-radius:9px;padding:10px 12px;font-size:12.5px;color:${colors[sc]};font-weight:500">${scores[sc]}</div>`;
  }

  // ── PROPERTY TAB ─────────────────────────────────────────────────
  const panelRec = document.getElementById('cm-panel-record');
  if(panelRec && p.panel){
    const pan = p.panel;
    const condColor = pan.condition?.includes('POOR')||pan.condition?.includes('critical') ? 'var(--danger)' : pan.condition?.includes('Excellent')||pan.condition?.includes('Good') ? 'var(--success)' : 'var(--warning)';
    panelRec.innerHTML = `
      <div class="property-row"><span class="property-key">Brand</span><span class="property-val">${pan.brand||'—'}</span></div>
      <div class="property-row"><span class="property-key">Service size</span><span class="property-val">${pan.amps||'—'}</span></div>
      <div class="property-row"><span class="property-key">Panel spaces</span><span class="property-val">${pan.spaces||'—'}</span></div>
      <div class="property-row"><span class="property-key">Year</span><span class="property-val">${pan.year||'—'}</span></div>
      <div class="property-row"><span class="property-key">Location</span><span class="property-val">${pan.location||'—'}</span></div>
      <div class="property-row"><span class="property-key">Condition</span><span class="property-val" style="color:${condColor};font-weight:600">${pan.condition||'—'}</span></div>
      ${pan.notes ? `<div style="margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:12px;color:var(--text-dim)">${pan.notes}</div>` : ''}`;
  }
  const siteNotesEl = document.getElementById('cm-site-notes');
  if(siteNotesEl) siteNotesEl.value = (p.panel?.notes||'') + (p.panelNotes ? '\n'+p.panelNotes : '');

  // Photos grid
  const photosEl = document.getElementById('cm-photos-grid');
  if(photosEl){
    const photos = p.photos||[];
    const docs   = p.docs||[];
    const allFiles = photos.map(f=>({name:f,icon:'📷'})).concat(docs.map(f=>({name:f,icon:'📄'})));
    if(allFiles.length){
      photosEl.innerHTML = `<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
        ${allFiles.map(f=>`<div class="photo-thumb" onclick="cmViewFile('${p.name}','${f.name}','${f.icon}')" style="font-size:24px">${f.icon}<span>${f.name}</span></div>`).join('')}
        <div class="photo-thumb" onclick="cmUploadFile('${name}','file')" style="border-style:dashed;font-size:24px">➕<span>Add File</span></div>
      </div>`;
    } else {
      photosEl.innerHTML = `<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
        <div class="photo-thumb" onclick="cmUploadFile('${name}','photo')" style="border-style:dashed;font-size:24px">➕<span>Add Photo</span></div>
        <div class="photo-thumb" onclick="cmUploadFile('${name}','doc')" style="border-style:dashed;font-size:24px">📄<span>Add Doc</span></div>
      </div>`;
    }
  }

  // ── SERVICE SCHEDULE TAB ─────────────────────────────────────────
  const svcListEl = document.getElementById('cm-service-list');
  if(svcListEl){
    const sched = p.serviceSchedule||[];
    if(sched.length){
      svcListEl.innerHTML = sched.map(s=>{
        const badgeCls = s.status==='overdue'?'sdb-overdue':s.status==='soon'?'sdb-soon':s.status==='upcoming'?'sdb-upcoming':'sdb-ok';
        const badgeLbl = s.status==='overdue'?'Overdue':s.status==='soon'?'Due Soon':s.status==='upcoming'?'Upcoming':'On Track';
        return `<div class="service-row">
          <div style="flex:1">
            <div style="font-size:13px;font-weight:500">${s.service}</div>
            <div style="font-size:11.5px;color:var(--text-dim);margin-top:2px">${s.note||''}</div>
          </div>
          <div style="text-align:right;flex-shrink:0;margin-right:10px">
            <div style="font-size:12.5px;font-weight:600">${s.due}</div>
          </div>
          <span class="service-due-badge ${badgeCls}">${badgeLbl}</span>
          <button class="ar-action-btn" style="margin-left:8px" onclick="cmScheduleService('${name}','${s.service}')">Schedule</button>
        </div>`;
      }).join('');
    } else {
      svcListEl.innerHTML = '<div style="padding:20px;text-align:center;color:var(--text-muted);font-size:13px">No scheduled service items — <span style="color:var(--amber);cursor:pointer" onclick="cmAddService(document.getElementById(\x27client-modal-title\x27).textContent)">add one</span></div>';
    }
  }

  // ── REFERRALS TAB ────────────────────────────────────────────────
  const refByEl = document.getElementById('cm-referred-by');
  if(refByEl){
    if(p.referredBy){
      const rb = p.referredBy;
      const rbColor = rb.color?.includes('var(') ? rb.color : rb.color;
      refByEl.innerHTML = `<div class="ref-item" onclick="openCM('${rb.name}')">
        <div style="width:32px;height:32px;border-radius:8px;background:${rb.color}22;color:${rb.color};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0">${rb.init}</div>
        <div style="flex:1"><div style="font-size:13px;font-weight:600">${rb.name}</div><div style="font-size:11px;color:var(--text-dim)">${rb.date} · $${rb.ltv.toLocaleString()} LTV</div></div>
        <div style="font-size:11px;color:var(--text-muted)">View →</div>
      </div>`;
    } else {
      refByEl.innerHTML = `<div style="font-size:12px;color:var(--text-muted);padding:8px 10px;background:var(--surface2);border-radius:9px">No referral recorded — <span style="color:var(--blue);cursor:pointer" onclick="cmAddReferralSource(document.getElementById('client-modal-title').textContent)">add source</span></div>`;
    }
  }
  const refLblEl = document.getElementById('cm-refs-sent-label');
  if(refLblEl) refLblEl.textContent = `Clients Referred by ${name}`;
  const refListEl = document.getElementById('cm-referrals-list');
  if(refListEl){
    const refs = p.referrals||[];
    refListEl.innerHTML = refs.length ? refs.map(r=>`
      <div class="ref-item" onclick="openCM('${r.name}')">
        <div style="width:32px;height:32px;border-radius:8px;background:${r.color}22;color:${r.color};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0">${r.init}</div>
        <div style="flex:1"><div style="font-size:13px;font-weight:600">${r.name}</div><div style="font-size:11px;color:var(--text-dim)">${r.date} · $${r.ltv.toLocaleString()} LTV</div></div>
        <div style="font-size:11px;color:var(--text-muted)">View →</div>
      </div>`).join('')
      : '<div style="font-size:12px;color:var(--text-muted);padding:8px 10px">No referrals from this client yet</div>';
  }
  const refStatsEl = document.getElementById('cm-ref-stats');
  if(refStatsEl){
    const isTopRef = name==='Sarah Mitchell'||name==='Dave Novak';
    refStatsEl.innerHTML = `
      <div style="font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--success)">${p.refs||0}</div>
      <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px">Referrals Sent</div>
      <div style="margin-top:8px;padding-top:8px;border-top:1px solid var(--border)">
        <div style="font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--amber)">$${(p.refRevenue||0).toLocaleString()}</div>
        <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px">Downstream Revenue</div>
      </div>
      ${isTopRef ? '<div style="margin-top:10px;padding:8px;background:var(--amber-light);border-radius:8px;font-size:12px;color:var(--amber);text-align:center;font-weight:600">🏆 Top Referrer</div>' : ''}`;
  }

  // Reset to overview tab, open modal
  document.querySelectorAll('#client-modal .tab').forEach(t=>t.classList.remove('active'));
  document.querySelectorAll('#client-modal .tab-content').forEach(t=>t.classList.remove('active'));
  document.querySelector('#client-modal .tab')?.classList.add('active');
  document.getElementById('ct-overview')?.classList.add('active');
  try { cmPopulateSiteNotes(name); } catch(e) {}
  modal.style.display = 'flex';
  modal.classList.add('open');
}

function cmLogNote() {
  const type = document.getElementById('cm-log-type')?.value||'📝 Note';
  const text = document.getElementById('cm-log-text')?.value?.trim();
  if(!text){ flash('Enter a note first'); return; }
  document.getElementById('cm-log-text').value='';
  flash(type+' logged ✓');
  // Add to timeline
  const tlEl = document.getElementById('cm-timeline-list');
  if(tlEl){
    const div=document.createElement('div');
    div.className='timeline-item';
    div.innerHTML=`<div class="timeline-dot" style="background:var(--surface3)">${type.slice(0,2)}</div><div class="timeline-body"><div class="timeline-title">${text}</div><div class="timeline-meta">Just now · Mike Rivera</div></div>`;
    tlEl.insertBefore(div,tlEl.firstChild);
  }
}

function ctab(el,id){
  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
  document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));
  el.classList.add('active');document.getElementById(id).classList.add('active');
  // Trigger tab-specific actions
  if (id === 'ct-property') {
    const name = document.getElementById('client-modal-title')?.textContent;
    if (name) try { cmPopulateSiteNotes(name); } catch(e) {}
  }
}

function openJobEdit(jid){
  const j = jobs.find(x => x.id === jid);
  if (!j) return;
  // Build live tech options
  const techNames = [...new Set(jobs.map(j=>j.tech).filter(Boolean)), 'Mike Rivera', 'Jess Torres', 'Unassigned'];
  const uniqueTechs = [...new Set(techNames)];
  const techOpts = uniqueTechs.map(t => `<option${t===j.tech?' selected':''}>${t}</option>`).join('');
  // Build client options
  const clientOpts = clients.map(cl => `<option${cl.name===j.client?' selected':''}>${cl.name}</option>`).join('');
  document.getElementById('modal-title').textContent = 'Edit ' + j.id;
  document.getElementById('modal-body').innerHTML = `
    <div class="form-row">
      <div class="form-group"><label class="form-label">Client</label>
        <select class="form-input" id="je-client">${clientOpts}</select></div>
      <div class="form-group"><label class="form-label">Job Type</label>
        <select class="form-input" id="je-type">
          <option${j.type==='panel'?' selected':''} value="panel">Panel Upgrade</option>
          <option${j.type==='ev'?' selected':''} value="ev">EV Charger</option>
          <option${j.type==='svc'?' selected':''} value="svc">Service Call</option>
          <option${j.type==='inst'?' selected':''} value="inst">Commercial Install</option>
          <option${j.type==='safe'?' selected':''} value="safe">Safety Inspection</option>
          <option${j.type==='outlets'?' selected':''} value="outlets">Outlets & Wiring</option>
          <option${j.type==='lighting'?' selected':''} value="lighting">Lighting</option>
        </select></div>
    </div>
    <div class="form-group"><label class="form-label">Job Name / Description</label>
      <input class="form-input" id="je-name" value="${j.name||''}"></div>
    <div class="form-group"><label class="form-label">Address</label>
      <input class="form-input" id="je-addr" value="${j.addr||''}"></div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Date</label>
        <input class="form-input" id="je-date" value="${j.date||''}"></div>
      <div class="form-group"><label class="form-label">Time</label>
        <input class="form-input" id="je-time" value="${j.time||''}"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Tech</label>
        <select class="form-input" id="je-tech">${techOpts}</select></div>
      <div class="form-group"><label class="form-label">Status</label>
        <select class="form-input" id="je-status">
          <option${j.status==='pending'?' selected':''} value="pending">Pending</option>
          <option${j.status==='scheduled'?' selected':''} value="scheduled">Scheduled</option>
          <option${j.status==='inprogress'?' selected':''} value="inprogress">In Progress</option>
          <option${j.status==='complete'?' selected':''} value="complete">Complete</option>
          <option${j.status==='cancelled'?' selected':''} value="cancelled">Cancelled</option>
        </select></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Value ($)</label>
        <input class="form-input" type="number" id="je-value" value="${j.value||0}"></div>
      <div class="form-group"><label class="form-label">Permit Required</label>
        <select class="form-input" id="je-permit">
          <option${!j.permit||j.permit==='No permit needed'?' selected':''}>No permit needed</option>
          <option${j.permit==='Required — not yet filed'?' selected':''}>Required — not yet filed</option>
          <option${j.permit==='Filed — pending'?' selected':''}>Filed — pending</option>
          <option${j.permit==='Approved'?' selected':''}>Approved</option>
        </select></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Priority</label>
        <select class="form-input" id="je-priority">
          <option${j.priority?.includes('Normal')?' selected':''}>🟢 Normal</option>
          <option${j.priority?.includes('48')?' selected':''}>🟡 High — within 48 hrs</option>
          <option${j.priority?.includes('same')?' selected':''}>🔴 Emergency — same day</option>
        </select></div>
      <div class="form-group"><label class="form-label">Duration (hrs)</label>
        <input class="form-input" type="number" id="je-duration" value="${j.duration||4}" min="0.5" step="0.5"></div>
    </div>
    <div class="form-group"><label class="form-label">Site Notes</label>
      <textarea class="form-input" id="je-notes" rows="3" placeholder="Panel location, access codes, prior work...">${j.notes||''}</textarea></div>`;
  document.getElementById('modal-footer').innerHTML =
    `<button class="btn btn-del btn-sm" onclick="deleteJob('${j.id}')">Delete Job</button>
     <span style="flex:1"></span>
     <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
     <button class="btn btn-primary" onclick="saveJobEdit('${j.id}')">Save Changes</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}


function iEdit(span){
  const val=span.textContent;
  const fieldId=span.id; // e.g. cm-edit-name, cm-edit-phone, cm-edit-email
  const input=document.createElement('input');
  input.className='editable-input';input.value=val;
  span.replaceWith(input);input.focus();input.select();
  function done(){
    const newVal=input.value.trim()||val;
    const ns=document.createElement('span');ns.className='editable-text';ns.id=fieldId;ns.textContent=newVal;ns.onclick=function(){iEdit(this);};
    input.replaceWith(ns);
    if(newVal!==val){
      flash('Updated ✓');
      // Persist back to clientProfiles + clients[]
      const name=document.getElementById('client-modal-title')?.textContent;
      if(name&&clientProfiles[name]){
        if(fieldId==='cm-edit-name'){ /* name change is complex - skip */ }
        else if(fieldId==='cm-edit-phone'){ clientProfiles[name].phone=newVal; const cl=clients.find(x=>x.name===name);if(cl)cl.phone=newVal; }
        else if(fieldId==='cm-edit-email'){ clientProfiles[name].email=newVal; const cl=clients.find(x=>x.name===name);if(cl)cl.email=newVal; }
        else if(fieldId==='cm-edit-addr'){ clientProfiles[name].addr=newVal; const cl=clients.find(x=>x.name===name);if(cl)cl.addr=newVal; }
        else if(fieldId==='cm-edit-source'){ clientProfiles[name].source=newVal; }
        else if(fieldId==='cm-edit-type'){ clientProfiles[name].type=newVal; }
        autoPersist();
      }
    }
  }
  input.addEventListener('blur',done);
  input.addEventListener('keydown',e=>{if(e.key==='Enter')input.blur();if(e.key==='Escape'){input.value=val;input.blur();}});
}

// MODAL DEFS
const mDefs={
  'new-job':{title:'New Job',footer:'<button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-ghost" onclick="saveNewJob(true)">Save Draft</button><button class="btn btn-primary" onclick="saveNewJob(false)">Create Job</button>',body:`
    <div class="form-row">
      <div class="form-group"><label class="form-label">Client</label>
        <select class="form-input" id="nj-client">
          <option value="">— Select client —</option>
          <option value="new">+ Add New Client…</option>
        </select>
      </div>
      <div class="form-group"><label class="form-label">Job Category</label>
        <select class="form-input" id="nj-cat" onchange="updateJobTypes()">
          <option value="">— Select category —</option>
          <option value="panel">Panel & Service</option>
          <option value="wiring">Wiring & Circuits</option>
          <option value="outlets">Outlets & Switches</option>
          <option value="lighting">Lighting</option>
          <option value="ev">EV Charging</option>
          <option value="hvac">HVAC / Appliances</option>
          <option value="safety">Safety & Code</option>
          <option value="commercial">Commercial / Industrial</option>
          <option value="outdoor">Outdoor / Landscape</option>
          <option value="smart">Smart Home / Low Voltage</option>
          <option value="service">Service Call / Diagnostic</option>
          <option value="inspection">Inspection & Permit</option>
          <option value="emergency">Emergency</option>
          <option value="other">Other / Unlisted</option>
        </select>
      </div>
    </div>
    <div class="form-group"><label class="form-label">Job Type</label>
      <select class="form-input" id="nj-type" onchange="applyJobTemplate(this.value)">
        <option>Select a category first...</option>
      </select>
    </div>
    <div id="nj-template-indicator" class="template-applied" style="display:none"></div>
    <div id="nj-other-hint" style="display:none;margin-top:-6px;margin-bottom:14px">
      <div style="background:var(--amber-light);border:1px solid rgba(200,120,10,.25);border-radius:9px;padding:10px 14px">
        <div style="font-size:12px;font-weight:600;color:var(--amber);margin-bottom:4px">📝 Custom Job — Describe in Access &amp; Site Notes below</div>
        <div style="font-size:12px;color:var(--text-dim)">Use the notes field below to describe the scope of work. This will appear on your estimate and job record.</div>
      </div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
      <div class="form-group"><label class="form-label">Priority</label>
        <select class="form-input" id="nj-priority">
          <option>🟢 Normal</option>
          <option>🟡 High — within 48 hrs</option>
          <option>🔴 Emergency — same day</option>
          <option>⚪ Low — flexible</option>
        </select>
      </div>
      <div class="form-group"><label class="form-label">Permit Required?</label>
        <select class="form-input" id="nj-permit">
          <option selected>Unknown — check later</option>
          <option>Yes — will file</option>
          <option>Yes — already filed</option>
          <option>No permit needed</option>
          <option>Homeowner pulling permit</option>
          <option>Contractor pulling permit</option>
        </select>
      </div>
    </div>
    <div class="form-group"><label class="form-label">Job Site Address</label>
      <input class="form-input" id="nj-addr" placeholder="123 Main St, City, State ZIP">
      <div style="margin-top:5px;display:flex;gap:6px">
        <span style="font-size:11px;color:var(--text-muted)">Use client address?</span>
        <span style="font-size:11px;color:var(--blue);cursor:pointer" onclick="fillJobAddrFromClient()">Auto-fill from client ↗</span>
      </div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
      <div class="form-group"><label class="form-label">Scheduled Date</label><input class="form-input" id="nj-date" type="date"></div>
      <div class="form-group"><label class="form-label">Start Time</label><input class="form-input" id="nj-time" type="time" value="08:00"></div>
      <div class="form-group"><label class="form-label">Est. Duration</label>
        <select class="form-input" id="nj-duration">
          <option value="1">1 hour</option>
          <option value="2">2 hours</option>
          <option value="3">3 hours</option>
          <option value="4" selected>4 hours</option>
          <option value="6">6 hours</option>
          <option value="8">Full day (8 hrs)</option>
          <option value="16">2 days</option>
          <option value="24">3 days</option>
          <option value="40">1 week</option>
        </select>
      </div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
      <div class="form-group"><label class="form-label">Lead Tech</label>
        <select class="form-input" id="nj-tech">
          <option>Mike Rivera (Master)</option>
          <option>Jess Torres (Journeyman)</option>
          <option>Unassigned</option>
        </select>
      </div>
      <div class="form-group"><label class="form-label">Second Tech</label>
        <select class="form-input">
          <option>None</option>
          <option>Mike Rivera</option>
          <option>Jess Torres</option>
        </select>
      </div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
      <div class="form-group"><label class="form-label">Quoted Value ($)</label><input class="form-input" id="nj-value" type="number" placeholder="0" value="" oninput="this.dataset.manuallySet='1'"></div>
      <div class="form-group"><label class="form-label">Est. Materials ($)</label><input class="form-input" type="number" placeholder="0"></div>
    </div>
    <div class="form-group"><label class="form-label">Access & Site Notes</label>
      <textarea class="form-input" id="nj-notes" rows="2" placeholder="Gate code, panel location, parking, hazards, prior work..."></textarea>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
      <div class="form-group"><label class="form-label">Source / Lead From</label>
        <select class="form-input" id="nj-source">
          <option>Existing client</option>
          <option>Referral — word of mouth</option>
          <option>Google / SEO</option>
          <option>Google Ads / LSA</option>
          <option>Angi / HomeAdvisor</option>
          <option>Thumbtack</option>
          <option>Yelp</option>
          <option>NextDoor</option>
          <option>Facebook / Instagram</option>
          <option>Door hanger / flyer</option>
          <option>Yard sign</option>
          <option>Repeat — recurring</option>
          <option>Cold outreach / canvass</option>
          <option>Other</option>
        </select>
      </div>
      <div class="form-group"><label class="form-label">Notify Client</label>
        <select class="form-input">
          <option>No notification</option>
          <option>📱 SMS — appointment confirmation</option>
          <option>📧 Email — appointment confirmation</option>
          <option>📱 SMS — "tech on the way" day-of</option>
          <option>Both SMS + Email</option>
        </select>
      </div>
    </div>
    <div style="border-top:1px solid var(--border);margin:16px 0 14px;padding-top:14px">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
        <label class="form-label" style="margin:0">Materials for this Job</label>
        <button class="btn btn-ghost btn-sm" type="button" onclick="addJobMatRow()">+ Add Item</button>
      </div>
      <div id="job-mat-list">
        <div class="job-mat-row">
          <select class="form-input" style="font-size:12px;min-height:38px" onchange="updateJobMatCost(this)">
            <option value="">— Select material —</option>
          </select>
          <input class="form-input" type="number" min="1" value="1" style="min-height:38px;font-size:13px" oninput="updateJobMatCost(this.closest('.job-mat-row').querySelector('select'))">
          <div class="mat-cost-preview">—</div>
          <button class="inline-btn" style="min-height:38px;font-size:18px" onclick="this.closest('.job-mat-row').remove();recalcJobMatTotal()" type="button">×</button>
        </div>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:8px 4px 0;border-top:1px solid var(--border)">
        <span style="font-size:11px;color:var(--text-muted)">Est. material cost</span>
        <span style="font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:var(--amber)" id="job-mat-total">$0.00</span>
      </div>
    </div>`},
  'new-client':{title:'Add Client',footer:'<button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-primary" onclick="saveNewClient()">Save Client</button>',body:`
    <div class="form-row">
      <div class="form-group"><label class="form-label">First Name</label><input class="form-input" id="nc-fname" type="text" placeholder="Sarah"></div>
      <div class="form-group"><label class="form-label">Last Name</label><input class="form-input" id="nc-lname" type="text" placeholder="Mitchell"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Phone</label><input class="form-input" id="nc-phone" type="tel" placeholder="(555) 000-0000"></div>
      <div class="form-group"><label class="form-label">Email</label><input class="form-input" id="nc-email" type="email" placeholder="sarah@email.com"></div>
    </div>
    <div class="form-group"><label class="form-label">Property Address</label><input class="form-input" id="nc-addr" placeholder="123 Main St, City, State, ZIP"></div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Client Type</label>
        <select class="form-input" id="nc-type">
          <option>Residential</option><option>Commercial</option><option>HOA / Property Mgmt</option><option>General Contractor</option><option>Property Manager</option>
        </select>
      </div>
      <div class="form-group"><label class="form-label">Lead Source</label>
        <select class="form-input" id="nc-source">
          <option>Existing client</option>
          <option>Referral — word of mouth</option>
          <option>Google / SEO</option>
          <option>Google Ads / LSA</option>
          <option>Angi / HomeAdvisor</option>
          <option>Thumbtack</option>
          <option>Yelp</option>
          <option>NextDoor</option>
          <option>Facebook / Instagram</option>
          <option>Door hanger / flyer</option>
          <option>Yard sign</option>
          <option>Repeat — recurring</option>
          <option>Cold outreach / canvass</option>
          <option>Other</option>
        </select>
      </div>
    </div>
    <div class="form-group"><label class="form-label">Referred By (name)</label>
      <input class="form-input" id="nc-ref" placeholder="e.g. Dave Novak">
    </div>
    <div class="form-group"><label class="form-label">Panel / Site Notes</label>
      <textarea class="form-input" id="nc-notes" rows="2" placeholder="Panel location, access codes, known issues..."></textarea>
    </div>`},
  'add-material':{title:'Add Material',footer:'<button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-primary" onclick="saveNewMaterial()">Add to Catalog</button>',body:`
    <div class="form-row">
      <div class="form-group"><label class="form-label">Item Name</label><input class="form-input" id="nm-name" placeholder="e.g. 20A GFCI Outlet"></div>
      <div class="form-group"><label class="form-label">Category</label>
        <select class="form-input" id="nm-cat">
          <option value="">— Select —</option>
          <option value="breakers">Breakers</option>
          <option value="wire">Wire & Cable</option>
          <option value="outlets">Outlets & Devices</option>
          <option value="panels">Panels</option>
          <option value="conduit">Conduit</option>
          <option value="fittings">Fittings & Hardware</option>
          <option value="devices">Switches & Dimmers</option>
          <option value="safety">Safety Devices</option>
          <option value="ev">EV Charging</option>
        </select>
      </div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr 80px;gap:12px">
      <div class="form-group"><label class="form-label">Unit Cost ($)</label><input class="form-input" id="nm-cost" type="number" step="0.01" placeholder="0.00"></div>
      <div class="form-group"><label class="form-label">On Hand (qty)</label><input class="form-input" id="nm-stock" type="number" placeholder="0"></div>
      <div class="form-group"><label class="form-label">Reorder At</label><input class="form-input" id="nm-reorder" type="number" placeholder="0"></div>
      <div class="form-group"><label class="form-label">Unit</label>
        <select class="form-input" id="nm-unit">
          <option>ea</option><option>roll</option><option>stick</option>
          <option>pk</option><option>box</option><option>ft</option><option>lb</option>
        </select>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Supplier</label><input class="form-input" id="nm-supplier" placeholder="Grainger, Home Depot..."></div>
      <div class="form-group"><label class="form-label">SKU / Part #</label><input class="form-input" id="nm-sku" placeholder="Supplier part number"></div>
    </div>`},
  'mat-detail':{title:'Material Detail',body:'',footer:''},
    'new-permit':{title:'Log Permit',footer:'<button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-primary" onclick="saveNewPermit()">Log Permit</button>',body:`
    <div class="form-row">
      <div class="form-group"><label class="form-label">Permit #</label>
        <input class="form-input" id="np-num" placeholder="EL-2026-XXXX"></div>
      <div class="form-group"><label class="form-label">Client</label>
        <select class="form-input" id="np-client"><option value="">— Select client —</option></select></div>
    </div>
    <div class="form-group"><label class="form-label">Job Site Address</label>
      <input class="form-input" id="np-addr" placeholder="123 Main St, City, State ZIP">
      <span style="font-size:11px;color:var(--blue);cursor:pointer;margin-top:4px;display:inline-block"
        onclick="(function(){const cl=clients.find(c=>c.name===document.getElementById('np-client')?.value);if(cl&&cl.addr){document.getElementById('np-addr').value=cl.addr;flash('Address filled ✓');}else{flash('Select a client first');}})();">Auto-fill from client ↗</span>
    </div>
    <div class="form-group"><label class="form-label">Work Description</label>
      <input class="form-input" id="np-type" placeholder="e.g. 200A Panel Upgrade"></div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Issue Date</label>
        <input class="form-input" id="np-issued" type="date"></div>
      <div class="form-group"><label class="form-label">Expiry Date</label>
        <input class="form-input" id="np-expiry" type="date"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Stage</label>
        <select class="form-input" id="np-stage">
          <option>Applied</option>
          <option>Reviewed</option>
          <option>Pending Inspection</option>
          <option>Approved</option>
          <option>Failed Inspection</option>
          <option>Expired</option>
          <option>Closed / Complete</option>
        </select></div>
      <div class="form-group"><label class="form-label">Linked Job</label>
        <select class="form-input" id="np-job"><option value="">No linked job</option></select></div>
    </div>`},
  'new-invoice':{title:'Create Invoice',footer:'<button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-ghost" onclick="saveNewInvoice(true)">Save Draft</button><button class="btn btn-primary" onclick="saveNewInvoice(false)">Send Invoice</button>',body:`
    <div class="form-row">
      <div class="form-group"><label class="form-label">Client</label>
        <select class="form-input" id="ni-client" onchange="niPopulateJobs()"><option value="">— Select client —</option></select></div>
      <div class="form-group"><label class="form-label">Linked Job</label>
        <select class="form-input" id="ni-job" onchange="niPrefillFromJob()"><option value="">No linked job</option></select></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Issue Date</label><input class="form-input" id="ni-issued" type="date"></div>
      <div class="form-group"><label class="form-label">Due Date</label><input class="form-input" id="ni-due" type="date"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Payment Terms</label>
        <select class="form-input" id="ni-terms" onchange="niApplyTerms()">
          <option value="0">Due on Receipt</option>
          <option value="15">Net 15</option>
          <option value="30" selected>Net 30</option>
          <option value="45">Net 45</option>
          <option value="60">Net 60</option>
        </select></div>
      <div class="form-group"><label class="form-label">Tax Rate</label>
        <select class="form-input" id="ni-taxrate" onchange="calcNewInvTotal()">
          <option value="0">0% — No tax</option>
          <option value="6.25">6.25% — Materials tax</option>
        </select></div>
    </div>
    <!-- LINE ITEMS -->
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
      <label class="form-label" style="margin:0">Line Items</label>
      <button class="btn btn-ghost btn-sm" type="button" onclick="niAddLine()">+ Add Line</button>
    </div>
    <div id="ni-lines" style="margin-bottom:4px"></div>
    <button class="btn btn-ghost btn-sm" style="width:100%;justify-content:center;margin-bottom:12px" type="button" onclick="niAddLine()">+ Add Item</button>
    <!-- TOTALS -->
    <div style="background:var(--surface2);border-radius:10px;padding:12px 16px" id="ni-total-block">
      <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px"><span style="color:var(--text-muted)">Subtotal</span><span id="ni-subtotal">$0</span></div>
      <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px"><span style="color:var(--text-muted)">Tax</span><span id="ni-taxamt">$0</span></div>
      <div style="display:flex;justify-content:space-between;font-size:15px;font-weight:700"><span>Total</span><span id="ni-grand" style="color:var(--amber)">$0</span></div>
    </div>
    <div class="form-group" style="margin-top:10px"><label class="form-label">Notes / Payment Instructions</label>
      <textarea class="form-input" id="ni-notes-legacy" rows="2" placeholder="e.g. Please pay via Zelle to contractor@email.com"></textarea></div>`},
  'new-recurring':{title:'Add Recurring Job',footer:'<button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-primary" onclick="saveNewRecurring()">Save</button>',body:`
    <div class="form-group"><label class="form-label">Client</label>
      <select class="form-input" id="nr-client"><option value="">— Select client —</option></select></div>
    <div class="form-group"><label class="form-label">Service Name</label>
      <input class="form-input" id="nr-service" placeholder="e.g. Annual Panel Inspection"></div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Frequency</label>
        <select class="form-input" id="nr-freq">
          <option>Weekly</option>
          <option>Bi-Weekly</option>
          <option>Monthly</option>
          <option>Quarterly</option>
          <option>Bi-Yearly</option>
          <option>Yearly</option>
        </select></div>
      <div class="form-group"><label class="form-label">First Due (Date)</label>
        <input class="form-input" id="nr-due" type="date"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Value ($)</label>
        <input class="form-input" id="nr-value" type="number" placeholder="0"></div>
      <div class="form-group"><label class="form-label">Assigned Tech</label>
        <select class="form-input" id="nr-tech">
          <option>Mike Rivera</option><option>Jess Torres</option><option>Unassigned</option>
        </select></div>
    </div>`},
  'new-task':{title:'Add Task',footer:'<button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-primary" onclick="saveNewTask()">Add Task</button>',body:`
    <div class="form-group"><label class="form-label">Task</label>
      <input class="form-input" id="nt-text" placeholder="What needs to be done?"></div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Client</label>
        <select class="form-input" id="nt-client">
          <option value="">None</option>
        </select>
      </div>
      <div class="form-group"><label class="form-label">Due Date</label>
        <input class="form-input" id="nt-due" type="date"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Linked Job</label>
        <select class="form-input" id="nt-job">
          <option value="">No linked job</option>
        </select>
      </div>
      <div class="form-group"><label class="form-label">Priority</label>
        <select class="form-input" id="nt-priority">
          <option>Normal</option>
          <option>Urgent</option>
        </select>
      </div>
    </div>`},
  'add-price':{title:'Add Price Book Item',footer:'<button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-primary" onclick="addPbItem()">Add Item</button>',body:`
    <div class="form-group"><label class="form-label">Service Name</label><input class="form-input" id="np-n" placeholder="e.g. Smart Switch Install"></div>
    <div class="form-group"><label class="form-label">Category</label><select class="form-input" id="np-c">
      <option value="panel">Panel & Service</option>
      <option value="wiring">Wiring & Circuits</option>
      <option value="outlets">Outlets & Switches</option>
      <option value="lighting">Lighting</option>
      <option value="ev">EV Charging</option>
      <option value="hvac">HVAC & Appliances</option>
      <option value="safety">Safety & Code</option>
      <option value="outdoor">Outdoor</option>
      <option value="smart">Smart Home</option>
      <option value="commercial">Commercial</option>
      <option value="service">Service Calls</option>
      <option value="inspection">Inspections</option>
      <option value="other">Other / Custom</option>
    </select></div>
    <div class="form-row"><div class="form-group"><label class="form-label">Labor ($)</label><input class="form-input" id="np-l" type="number" value="0" oninput="npCalc()"></div>
    <div class="form-group"><label class="form-label">Material ($)</label><input class="form-input" id="np-m" type="number" value="0" oninput="npCalc()"></div></div>
    <div style="background:var(--surface2);border-radius:10px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center">
      <span style="font-size:14px;font-weight:600">Total</span>
      <span style="font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--amber)" id="np-t">$0</span>
    </div>`}
};
const jobTypeMap={
  panel:["100A Panel Upgrade","200A Panel Upgrade","400A Panel Upgrade","Subpanel Addition (60A)","Subpanel Addition (100A)","Subpanel Addition (200A)","Meter Base Replacement","Service Entrance Upgrade (100A)","Service Entrance Upgrade (200A)","Breaker Replacement (Single-Pole)","Breaker Replacement (Double-Pole)","AFCI Breaker Upgrade","GFCI Breaker Install","Tandem Breaker Install","Main Disconnect Install","Panel Relocation","Temporary Power Panel","Federal Pacific / Zinsco Replacement","Meter Can Replacement"],
  wiring:["New Circuit — 15A","New Circuit — 20A","New Circuit — 30A","New Circuit — 50A","Dedicated Appliance Circuit","Wire Fishing","Conduit Run (EMT 1/2 in)","Conduit Run (EMT 3/4 in)","Junction Box Install","Knob & Tube Removal (per room)","Aluminum Wiring Remediation","Partial Rewire (per room)","Full Home Rewire (1,000 sq ft)","Full Home Rewire (2,000 sq ft)","Full Home Rewire (3,000 sq ft)","Underground Conduit Run","Wire in Finished Wall"],
  outlets:["Standard 15A Outlet Install","Standard 20A Outlet Install","GFCI Outlet Install","AFCI Outlet Install","USB Outlet Install","Dryer Outlet (30A)","Range Outlet (50A)","Welder Outlet (50A)","20A Dedicated Circuit + Outlet","30A Dedicated Circuit","Outlet Relocation","Tamper-Resistant Outlet","Dimmer Switch Install","Smart Switch Install","3-Way Switch Install","4-Way Switch Install","Ceiling Fan Switch","Timer Switch Install","Pilot Light Switch","Decora Upgrade"],
  lighting:["Recessed Light Install (each)","Recessed Light Retrofit LED (each)","Recessed Lights — 6-Pack","Ceiling Fan Install (existing wiring)","Ceiling Fan Install (new wiring)","Chandelier Install","Pendant Light Install","Under Cabinet Lighting","Outdoor Wall Light","Outdoor Flood Light Install","Motion Sensor Light Install","Vanity Light Install","Track Lighting Install","Commercial Troffer (2x4)","Exit Sign / Emergency Light","Landscape Lighting (per fixture)","Landscape Lighting System (10 fix)","Pool / Underwater Light","Stairway Lighting"],
  ev:["EV Charger — Level 1 (NEMA 5-15)","EV Charger — Level 2 (NEMA 14-50)","EV Charger — Level 2 (Hardwired)","EV Charger — Tesla Wall Connector","EV Charger + New 50A Circuit","EV Charger + New Subpanel","EV Charger — Multi-Unit (per unit)","EV Charger — Commercial DC Fast Prep","Load Management Device Install","EV Charger Troubleshoot"],
  hvac:["AC Disconnect Install","AC Disconnect Replace","Mini-Split Wiring (single zone)","Mini-Split Wiring (multi-zone)","Heat Pump Wiring","Furnace Wiring","Electric Water Heater Circuit","Tankless Water Heater Circuit","Electric Range Circuit (50A)","Electric Dryer Circuit (30A)","Dishwasher Circuit","Garbage Disposal Circuit","Bathroom Exhaust Fan (existing wiring)","Bathroom Exhaust Fan (new wiring)","Attic Fan Install","Pool Pump Wiring","Hot Tub / Spa Wiring (50A)","Sauna Wiring","Whole-House Fan"],
  safety:["Smoke Detector Install (each)","Smoke Detectors — Whole Home","CO Detector Install (each)","Smoke + CO Combo (each)","Whole Home Surge Protector (panel)","Whole Home Surge Protector (premium)","Arc Fault (AFCI) Upgrade — Whole Home","GFCI Upgrade — Whole Home","Tamper-Resistant Outlet Upgrade","Code Compliance Upgrade (per item)","Grounding / Bonding","Safety Inspection (residential)","Generator Transfer Switch (manual)","Generator Transfer Switch (auto)","Whole Home Generator Hookup","AFCI/GFCI Combo Outlet"],
  commercial:["Commercial Panel Upgrade","3-Phase Service Install","Tenant Improvement (TI)","Commercial Lighting Retrofit","Emergency Lighting Install","Exit Sign Install","Motor Control / VFD Wiring","Parking Lot Light Pole","Sign Lighting Install","Restaurant Equipment Wiring","Rooftop HVAC Disconnect","Data Center / Server Room Wiring","Commercial New Construction (bid)","Conduit System (commercial)"],
  outdoor:["Outdoor GFCI Outlet Install","Deck / Patio Wiring Package","Pool Lighting Install","Exterior Flood Light","Holiday Lighting Circuit","Detached Garage Wiring","Shed / Workshop Wiring","Outdoor Subpanel","Security Camera Wiring","Driveway Gate Wiring","Fence / Gate Motor Wiring","Outdoor Kitchen Wiring","Pergola / Gazebo Lighting","Underground Feeder Run"],
  smart:["Smart Panel Install (Span / Lumin)","Smart Switch (per switch)","Smart Switch — Full Home","Smart Dimmer Install","Smart Thermostat Wiring","Video Doorbell / Ring Wiring","Security Camera Wiring","Cat6 Ethernet Run (per drop)","Structured Wiring Panel","TV / Media Mount + Wiring","Whole-Home Audio (per room)","Low Voltage Rough-In (per room)","Smart Lock Wiring","Motorized Shade Wiring"],
  service:["Diagnostic Service Call (1 hr)","Diagnostic Service Call (2 hr)","Diagnostic Service Call (half day)","Emergency Service Call (after hours)","Emergency Service Call (weekend)","Tripped Breaker Investigation","No Power — Troubleshoot","Outlets Not Working","Flickering Lights","Burning Smell Investigation","Sparking Outlet Investigation","Panel Buzzing / Overheating","Meter Base Issue","Overloaded Circuit","Electrical Inspection (residential)","Pre-Sale Home Inspection","Insurance Inspection Report","Permit Final Inspection Prep"],
  inspection:["Pre-Sale Electrical Inspection","Post-Purchase Inspection","Permit Pulling — Residential","Permit Pulling — Commercial","Load Calculation","As-Built Drawing","Whole-Home Inspection","Panel Inspection","Insurance Inspection"],
  emergency:["Emergency — No Power","Emergency — Sparking / Arcing","Emergency — Burning Smell","Emergency — Flood / Water Damage","Emergency — Storm Damage","Emergency — After Hours Service Call","Emergency — Generator Failure"],
  other:["Custom / Unlisted Work — describe in notes"]
};
// ── Job templates: suggested materials + value by job type ──────
const JOB_TEMPLATES = {
  '200A Panel Upgrade': {
    value: 2800, laborHrs: 8,
    mats: [
      { name:'200A Main Breaker Panel (Square D)', qty:1, cost:320 },
      { name:'10/3 Service Entrance Cable (per ft)', qty:20, cost:3.80 },
      { name:'Ground Rod (8 ft)', qty:2, cost:18 },
      { name:'Breaker — 20A Single-Pole', qty:6, cost:8.50 },
      { name:'Wire Connectors / Lugs', qty:1, cost:24 },
    ],
    checklist: ['Utility notified / disconnect arranged','Load calculation verified','New meter base inspected','Ground rods driven and bonded','All breakers labeled'],
  },
  '100A Panel Upgrade': {
    value: 1800, laborHrs: 6,
    mats: [
      { name:'100A Main Panel (Square D)', qty:1, cost:180 },
      { name:'6/3 Service Entrance Cable (per ft)', qty:15, cost:3.20 },
      { name:'Ground Rod (8 ft)', qty:1, cost:18 },
      { name:'Breaker — 20A Single-Pole', qty:4, cost:8.50 },
    ],
    checklist: ['Utility notified','Load calculation verified','Ground rods bonded','All circuits labeled'],
  },
  'Federal Pacific / Zinsco Replacement': {
    value: 3400, laborHrs: 10,
    mats: [
      { name:'200A Main Breaker Panel (Square D)', qty:1, cost:320 },
      { name:'AFCI Breaker — 20A', qty:8, cost:42 },
      { name:'10/3 Service Entrance Cable (per ft)', qty:20, cost:3.80 },
      { name:'Ground Rod (8 ft)', qty:2, cost:18 },
    ],
    checklist: ['Document existing panel with photos','Utility disconnect arranged','AFCI breakers per code','All circuits tested after replacement','Inspection scheduled'],
  },
  'EV Charger — Level 2 (Hardwired)': {
    value: 950, laborHrs: 4,
    mats: [
      { name:'50A Double-Pole Breaker', qty:1, cost:18.50 },
      { name:'6 AWG THHN Wire (per ft)', qty:40, cost:1.20 },
      { name:'1/2" EMT Conduit (per ft)', qty:20, cost:0.85 },
      { name:'NEMA 14-50 Outlet', qty:1, cost:14 },
    ],
    checklist: ['Panel capacity verified','Charger location confirmed with client','Conduit path planned','Local permit pulled if required','Load management needed?'],
  },
  'EV Charger — Level 2 (NEMA 14-50)': {
    value: 750, laborHrs: 3,
    mats: [
      { name:'50A Double-Pole Breaker', qty:1, cost:18.50 },
      { name:'6 AWG THHN Wire (per ft)', qty:30, cost:1.20 },
      { name:'NEMA 14-50 Outlet', qty:1, cost:14 },
    ],
    checklist: ['Panel capacity verified','Outlet location approved','Permit required check'],
  },
  'EV Charger + New Subpanel': {
    value: 2400, laborHrs: 8,
    mats: [
      { name:'60A Subpanel', qty:1, cost:120 },
      { name:'50A Double-Pole Breaker', qty:1, cost:18.50 },
      { name:'6 AWG THHN Wire (per ft)', qty:60, cost:1.20 },
      { name:'1/2" EMT Conduit (per ft)', qty:40, cost:0.85 },
    ],
    checklist: ['Main panel has capacity for subpanel feed','Subpanel location approved','Permit pulled','Charger location confirmed'],
  },
  'New Circuit — 20A': {
    value: 350, laborHrs: 2,
    mats: [
      { name:'Breaker — 20A Single-Pole', qty:1, cost:8.50 },
      { name:'12 AWG THHN Wire (per ft)', qty:50, cost:0.55 },
      { name:'Standard 20A Outlet', qty:1, cost:3.50 },
    ],
    checklist: ['Panel has open slot','Wire path identified','Permit required check'],
  },
  'GFCI Outlet Install': {
    value: 175, laborHrs: 1,
    mats: [
      { name:'GFCI Outlet 20A', qty:1, cost:18 },
      { name:'12 AWG THHN Wire (per ft)', qty:10, cost:0.55 },
    ],
    checklist: ['Wet location confirmed','Existing circuit capacity verified'],
  },
  'Recessed Lights — 6-Pack': {
    value: 900, laborHrs: 5,
    mats: [
      { name:'4" LED Recessed Light (each)', qty:6, cost:22 },
      { name:'14 AWG THHN Wire (per ft)', qty:80, cost:0.42 },
      { name:'Wire Connectors / Lugs', qty:1, cost:8 },
    ],
    checklist: ['Layout planned with client','Attic access confirmed','Switch location agreed'],
  },
  'Ceiling Fan Install (new wiring)': {
    value: 425, laborHrs: 3,
    mats: [
      { name:'Ceiling Fan-Rated Box', qty:1, cost:18 },
      { name:'14 AWG THHN Wire (per ft)', qty:40, cost:0.42 },
      { name:'Dimmer Switch Install', qty:1, cost:35 },
    ],
    checklist: ['Fan location approved','Structural support verified','Switch location confirmed'],
  },
  'Smoke Detectors — Whole Home': {
    value: 650, laborHrs: 4,
    mats: [
      { name:'Hardwired Smoke Detector (each)', qty:6, cost:28 },
      { name:'14 AWG THHN Wire (per ft)', qty:100, cost:0.42 },
      { name:'Wire Connectors / Lugs', qty:2, cost:8 },
    ],
    checklist: ['Interconnect tested','All locations per code (bedroom, hallway, each floor)','Battery backup verified'],
  },
  'Hot Tub / Spa Wiring (50A)': {
    value: 1400, laborHrs: 6,
    mats: [
      { name:'50A Double-Pole Breaker', qty:1, cost:18.50 },
      { name:'GFCI Breaker — 60A', qty:1, cost:85 },
      { name:'6 AWG THHN Wire (per ft)', qty:60, cost:1.20 },
      { name:'1/2" EMT Conduit (per ft)', qty:30, cost:0.85 },
    ],
    checklist: ['Disconnect within 5ft of spa (line of sight)','GFCI protection verified','Bond all metal components','Permit pulled'],
  },
  'Subpanel Addition (100A)': {
    value: 1600, laborHrs: 6,
    mats: [
      { name:'100A Subpanel (Square D)', qty:1, cost:220 },
      { name:'2 AWG THHN Wire (per ft)', qty:40, cost:2.10 },
      { name:'1" EMT Conduit (per ft)', qty:20, cost:1.40 },
      { name:'Ground Rod (8 ft)', qty:1, cost:18 },
    ],
    checklist: ['Main panel capacity verified','Feed breaker size confirmed','Subpanel grounded + bonded','All breakers labeled'],
  },
};

// Safety checklists by job CATEGORY (arrival stage)
const JOB_SAFETY_CHECKLISTS = {
  panel: [
    'Main breaker OFF — verified with tester',
    'PPE on — arc flash rated gloves + face shield',
    'Lockout/tagout applied',
    'Non-contact voltage tester confirmed dead',
    'Client notified of full power outage',
  ],
  ev: [
    'Panel capacity confirmed (load calculation done)',
    'Breaker OFF for circuit being modified',
    'Charge location dry / GFCI protected if damp',
    'Conduit path free of obstructions',
  ],
  wiring: [
    'Circuit de-energized and tested',
    'Breaker labeled and locked out',
    'Pathway clear of insulation / hazards',
  ],
  commercial: [
    'Lockout/tagout procedure followed',
    'Arc flash PPE on site',
    'Site safety sign-in complete',
    'Utility contacted if service work',
    'Second tech present for HV work',
  ],
  safety: [
    'All circuits to be tested identified',
    'Testing equipment calibrated',
    'Client informed of scope',
  ],
  default: [
    'Circuit de-energized and tested dead',
    'PPE appropriate to task',
    'Work area clear',
  ],
};

function updateJobTypes(){
  var cat=document.getElementById("nj-cat"),type=document.getElementById("nj-type");
  if(!cat||!type)return;
  var types=jobTypeMap[cat.value]||[];
  type.innerHTML=types.length?types.map(function(t){return'<option>'+t+'</option>';}).join(''):'<option>Select a category first...</option>';
  var hint=document.getElementById('nj-other-hint');
  if(hint) hint.style.display = cat.value==='other' ? '' : 'none';
  // Auto-apply template for first type in category
  if (types.length) applyJobTemplate(types[0]);
}

function applyJobTemplate(jobTypeName) {
  const tpl = JOB_TEMPLATES[jobTypeName];
  if (!tpl) {
    // Clear template indicator if no template for this type
    const ind = document.getElementById('nj-template-indicator');
    if (ind) ind.style.display = 'none';
    return;
  }

  // Set quoted value
  const valEl = document.getElementById('nj-value');
  if (valEl && !valEl.dataset.manuallySet) valEl.value = tpl.value;

  // Set duration based on labor hours
  const durEl = document.getElementById('nj-duration');
  if (durEl) {
    const hrs = tpl.laborHrs;
    // Find closest option
    for (const opt of durEl.options) {
      if (parseInt(opt.value) >= hrs) { durEl.value = opt.value; break; }
    }
  }

  // Populate materials list
  const matList = document.getElementById('job-mat-list');
  if (matList && tpl.mats.length) {
    // Clear existing rows
    matList.innerHTML = '';
    tpl.mats.forEach(m => {
      const row = document.createElement('div');
      row.className = 'job-mat-row';
      const totalCost = (m.cost * m.qty).toFixed(2);
      row.innerHTML = '<select class="form-input" style="font-size:12px;min-height:38px" onchange="updateJobMatCost(this)">' +
        '<option value="' + m.cost + '" selected>' + m.name + '</option></select>' +
        '<input class="form-input" type="number" min="1" value="' + m.qty + '" style="min-height:38px;font-size:13px"' +
        ' oninput="updateJobMatCost(this.closest(\x27.job-mat-row\x27).querySelector(\x27select\x27))">' +
        '<div class="mat-cost-preview">$' + totalCost + '</div>' +
        '<button class="inline-btn" style="min-height:38px;font-size:18px"' +
        ' onclick="this.closest(\x27.job-mat-row\x27).remove();recalcJobMatTotal()" type="button">×</button>';
      matList.appendChild(row);
    });
    recalcJobMatTotal();
  }

  // Show template applied indicator
  const ind = document.getElementById('nj-template-indicator');
  if (ind) {
    ind.style.display = 'flex';
    ind.innerHTML = '⚡ Template applied: ' + jobTypeName + ' — ' + tpl.mats.length + ' materials, $' + tpl.value.toLocaleString() + ' suggested value';
  }
}
function fillJobAddrFromClient() {
  const clientSel = document.getElementById('nj-client');
  const addrEl    = document.getElementById('nj-addr');
  if (!clientSel || !addrEl) return;
  const name = clientSel.value;
  const prof = clientProfiles[name];
  const cl   = clients.find(c => c.name === name);
  const addr = prof?.addr || cl?.addr || '';
  if (addr) { addrEl.value = addr; flash('Address filled from ' + name + ' ✓'); }
  else { flash('No address on file for this client'); }
}
function npCalc(){const l=parseFloat(document.getElementById('np-l').value)||0,m=parseFloat(document.getElementById('np-m').value)||0;document.getElementById('np-t').textContent='$'+(l+m);}
function addPbItem(){
  const n=document.getElementById('np-n').value?.trim();
  if(!n){flash('Enter a service name');return;}
  const l=parseFloat(document.getElementById('np-l').value)||0;
  const m=parseFloat(document.getElementById('np-m').value)||0;
  const c=document.getElementById('np-c').value||'other';
  const isCustom = c==='other';
  pb.push({id:pbNext++,cat:c,name:n,labor:l,mat:m,total:l+m,custom:isCustom&&l===0&&m===0});
  autoPersist();
  closeModal();
  renderPb(pbCat);
  flash('Added to price book ✓');
}

// QUOTE
// qp kept for legacy compatibility - real builder uses pb array
const qp={'900':900,'85':85,'120':120,'600':600,'65':65,'145':145,'220':220,'180':180};
// ── ESTIMATE BUILDER ──────────────────────────────────────────
function buildPbOptions() {
  // Build grouped options from live pb array
  const cats = {};
  (pb||[]).forEach(item => {
    if(item.custom) return;
    if(!cats[item.cat]) cats[item.cat] = [];
    cats[item.cat].push(item);
  });
  let html = '<option value="">— Select from price book —</option>';
  Object.keys(cats).forEach(cat => {
    html += `<optgroup label="${cat}">`;
    cats[cat].forEach(item => {
      html += `<option value="${item.total}" data-rate="${item.total}" data-desc="${item.name}">${item.name} — $${item.total}</option>`;
    });
    html += '</optgroup>';
  });
  return html;
}

function makeQLine(desc='', rate=0, qty=1) {
  const d = document.createElement('div');
  d.className = 'quote-line';
  d.style.cssText = 'display:grid;grid-template-columns:1fr 54px 80px 28px;gap:6px;margin-bottom:6px;align-items:center';
  d.innerHTML = `
    <div style="position:relative">
      <input class="form-input ql-desc" type="text" placeholder="Description or choose from price book..." value="${desc}" oninput="recalcQ()" style="padding-right:28px">
      <select style="position:absolute;right:0;top:0;height:100%;width:28px;opacity:0;cursor:pointer" onchange="applyPbToLine(this)">
        ${buildPbOptions()}
      </select>
    </div>
    <input class="form-input ql-qty" type="number" value="${qty}" min="1" oninput="recalcQ()" style="text-align:center">
    <div class="form-input ql-total" style="text-align:right;font-family:'JetBrains Mono',monospace;background:var(--surface2);color:var(--amber);font-weight:600" data-rate="${rate}">$${(rate*qty).toLocaleString()}</div>
    <button class="inline-btn" onclick="removeLine(this)" style="font-size:16px;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:0;text-align:center">×</button>`;
  return d;
}

function clearQuoteForm() {
  // Clear client and job type
  const clientSel = document.getElementById('q-client');
  const jobtypeSel = document.getElementById('q-jobtype');
  if(clientSel) clientSel.value = '';
  if(jobtypeSel) jobtypeSel.selectedIndex = 0;
  
  // Clear all line items and add one empty line
  const container = document.getElementById('quote-lines');
  if(container) {
    container.innerHTML = '';
    container.appendChild(makeQLine());
  }
  
  // Reset totals
  recalcQ();
  flash('Form cleared ✓');
}

function applyPbToLine(sel) {
  const opt = sel.options[sel.selectedIndex];
  if(!opt || !opt.value) return;
  const row = sel.closest('.quote-line');
  const desc = row.querySelector('.ql-desc');
  const total = row.querySelector('.ql-total');
  const rate = parseFloat(opt.dataset.rate)||0;
  if(desc) desc.value = opt.dataset.desc || opt.text.split(' — ')[0];
  if(total){ total.dataset.rate = rate; const qty=parseInt(row.querySelector('.ql-qty')?.value)||1; total.textContent='$'+(rate*qty).toLocaleString(); }
  recalcQ();
}

function addQL() {
  const container = document.getElementById('quote-lines');
  if(!container) return;
  container.appendChild(makeQLine());
}

function removeLine(btn) {
  const row = btn.closest('.quote-line');
  if(row) { row.remove(); recalcQ(); }
}

function recalcQ() {
  let subtotal = 0;
  document.querySelectorAll('#quote-lines .quote-line').forEach(row => {
    const rateEl = row.querySelector('.ql-total');
    const qty    = parseInt(row.querySelector('.ql-qty')?.value)||1;
    const rate   = parseFloat(rateEl?.dataset?.rate)||0;
    const total  = rate * qty;
    if(rateEl){ rateEl.dataset.rate=rate; rateEl.textContent='$'+total.toLocaleString(); }
    subtotal += total;
  });
  const taxRate = parseFloat(document.getElementById('q-taxrate')?.value)||0;
  const tax = subtotal * taxRate / 100;
  const grand = subtotal + tax;
  const s=(id,v)=>{const e=document.getElementById(id);if(e)e.textContent=v;};
  s('q-subtotal','$'+subtotal.toFixed(2));
  s('q-tax','$'+tax.toFixed(2));
  s('quote-grand','$'+grand.toFixed(2));
}

function updateQL(sel) { applyPbToLine(sel); } // legacy compat

function initQuoteBuilder() {
  const container = document.getElementById('quote-lines');
  if(!container||container.children.length>0) return;
  container.appendChild(makeQLine());
}

function renderQuotes() {
  // ── Populate quote builder client dropdown with live clients ──
  const qClientSel = document.getElementById('q-client');
  if (qClientSel && clients.length > 0) {
    const cur = qClientSel.value;
    qClientSel.innerHTML = '<option value="">Select client...</option>' +
      clients.map(cl => `<option${cl.name===cur?' selected':''}>${cl.name}</option>`).join('');
  }
  const statuses = ['draft','sent','viewed','accepted','expired','declined'];
  const cols = { draft:'qs-draft', sent:'qs-sent', viewed:'qs-viewed', accepted:'qs-accepted', expired:'qs-expired', declined:'qs-draft' };
  const vals = { draft:'qs-draft-val', sent:'qs-sent-val', viewed:'qs-viewed-val', accepted:'qs-accepted-val', expired:'qs-expired-val', declined:'qs-draft-val' };
  const statusColors = { draft:'var(--text-muted)', sent:'var(--amber)', viewed:'var(--blue)', accepted:'var(--success)', expired:'var(--danger)', declined:'var(--text-muted)' };
  // Helper to generate share text for a quote
  const getShareText = (q) => `Hi ${q.client.split(' ')[0]},\n\nThanks for considering us for your ${q.jobType} project!\n\nHere's your quote summary:\n• Project: ${q.jobType}\n• Total: $${q.amount.toLocaleString()}\n\nTo move forward, just reply "YES" and we'll schedule your work!\n\n- The Amp CRM Team`;
  
  const actionBtns = {
    draft:    q=>`<button class="btn btn-primary btn-sm" onclick="sendSavedQuote('${q.id}')">📤 Send</button><button class="btn btn-ghost btn-sm" onclick="editSavedQuote('${q.id}')">Edit</button><button class="btn btn-ghost btn-sm" onclick="duplicateQuote('${q.id}')">📋 Dup</button>`,
    sent:     q=>`<button class="btn btn-ghost btn-sm" onclick="window.open('mailto:?subject=Your ${q.jobType} Quote - $${q.amount.toLocaleString()}&body='+encodeURIComponent(getShareText(q)))">📧 Email</button><button class="btn btn-ghost btn-sm" onclick="markQuoteViewed('${q.id}')">Mark Viewed</button><button class="btn btn-ghost btn-sm" onclick="navigator.clipboard.writeText(getShareText(q)).then(()=>flash('Quote text copied! 📋'))">📋 Copy</button><button class="btn btn-ghost btn-sm" onclick="duplicateQuote('${q.id}')">⧉ Clone</button>`,
    viewed:   q=>`<button class="btn btn-success btn-sm" onclick="acceptSavedQuote('${q.id}')">✅ Accept</button><button class="btn btn-ghost btn-sm" onclick="window.open('mailto:?subject=Your ${q.jobType} Quote - $${q.amount.toLocaleString()}&body='+encodeURIComponent(getShareText(q)))">📧 Email</button><button class="btn btn-ghost btn-sm" onclick="navigator.clipboard.writeText(getShareText(q)).then(()=>flash('Quote text copied! 📋'))">📋 Copy</button><button class="btn btn-ghost btn-sm" onclick="duplicateQuote('${q.id}')">⧉ Clone</button>`,
    accepted: q=>`<button class="btn btn-primary btn-sm" onclick="convertSavedQuote('${q.client}',${q.amount},'${q.jobType}')">→ Job + Invoice</button><button class="btn btn-ghost btn-sm" onclick="duplicateQuote('${q.id}')">📋 Dup</button>`,
    expired:  q=>`<button class="btn btn-warn btn-sm" onclick="resendExpiredQuote('${q.id}')">🔄 Resend</button><button class="btn btn-ghost btn-sm" onclick="markQuoteDeclined('${q.id}')">Decline</button><button class="btn btn-ghost btn-sm" onclick="duplicateQuote('${q.id}')">📋 Dup</button>`,
    declined: q=>`<button class="btn btn-ghost btn-sm" onclick="reinstateQuote('${q.id}')">♻️ Reinstate</button><button class="btn btn-ghost btn-sm" onclick="duplicateQuote('${q.id}')">📋 Dup</button>`,
  };

  // ── Apply search/type/status filters ──
  const qSearch = (document.getElementById('quotes-search')?.value || '').toLowerCase().trim();
  const qType = document.getElementById('quotes-type-filter')?.value || '';
  const qStatus = document.getElementById('quotes-status-filter')?.value || '';
  const filterFn = q => {
    if(qSearch && !(q.client?.toLowerCase().includes(qSearch) || q.jobType?.toLowerCase().includes(qSearch) || q.id?.toLowerCase().includes(qSearch))) return false;
    if(qType && q.jobType !== qType) return false;
    if(qStatus && q.status !== qStatus) return false;
    return true;
  };

  statuses.forEach(s => {
    const items = savedQuotes.filter(q=>q.status===s && filterFn(q));
    const total = items.reduce((sum,q)=>sum+q.amount,0);
    const colEl = document.getElementById(cols[s]);
    const valEl = document.getElementById(vals[s]);
    if(valEl) valEl.textContent = total>0?'$'+total.toLocaleString():'—';
    if(!colEl) return;
    colEl.innerHTML = items.map(q => {
      const now = Date.now();
      const qDate = new Date(q.date?.replace(/,/g,'') || '2026-02-01');
      const age   = Math.max(0, Math.round((now - qDate) / 86400000));
      // Check expiry
      const expDate = q.expires ? new Date(q.expires?.replace(/,/g,'')) : null;
      const isExpired = expDate && expDate < new Date();
      if (isExpired && q.status !== 'accepted' && q.status !== 'declined') {
        q.status = 'expired';
      }
      const ageColor = age > 21 ? 'var(--danger)' : age > 14 ? 'var(--warning)' : 'var(--text-muted)';
      return `<div class="quote-card" onclick="viewQuote('${q.client}',${q.amount},'${q.jobType}')">
        <div class="quote-card-client">${q.client}</div>
        <div class="quote-card-type">${q.jobType}</div>
        <div class="quote-card-amount">$${q.amount.toLocaleString()}</div>
        <div class="quote-card-age" style="color:${ageColor}">${q.id} · ${age}d old · exp ${q.expires||'—'}</div>
        ${isExpired ? '<div style="font-size:10.5px;font-weight:700;color:var(--danger);margin-bottom:4px">⚠️ EXPIRED — resend or close</div>' : ''}
        <div class="quote-card-actions">${actionBtns[s]?actionBtns[s](q):''}</div>
      </div>`;
    }).join('') || '<div style="padding:14px;font-size:12px;color:var(--text-muted);text-align:center">None</div>';
  });

  // Pipeline stats (respect filters)
  const open = savedQuotes.filter(q=>(q.status==='sent'||q.status==='viewed') && filterFn(q));
  const s=(id,v)=>{const e=document.getElementById(id);if(e)e.textContent=v;};
  s('qs-open-count', open.length);
  s('qs-pipeline-val','$'+open.reduce((t,q)=>t+q.amount,0).toLocaleString());

  // Attention items (respect filters)
  const attn = document.getElementById('qs-attention');
  if(attn) {
    const items = savedQuotes.filter(q=>(q.status==='expired'||q.status==='viewed') && filterFn(q));
    attn.innerHTML = items.map(q=>`
      <div style="padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px">
        <div style="flex:1">
          <div style="font-size:13px;font-weight:500">${q.client} — ${q.jobType}</div>
          <div style="font-size:11.5px;color:var(--text-dim)">$${q.amount.toLocaleString()} · ${q.status==='expired'?'Expired':'Awaiting response'}</div>
        </div>
        <button class="btn btn-ghost btn-sm" onclick="remindQuote('${q.id}')">${q.status==='expired'?'Resend':'📱 Nudge'}</button>
      </div>`).join('') || '<div style="padding:16px;font-size:12.5px;color:var(--text-muted);text-align:center">All clear ✓</div>';
  }
}

function sendSavedQuote(id) {
  const q = savedQuotes.find(q=>q.id===id);
  if(q){ q.status='sent'; renderQuotes(); flash('Quote '+id+' sent ✓'); }
}
function markQuoteViewed(id) {
  const q = savedQuotes.find(q=>q.id===id);
  if(q){ q.status='viewed'; renderQuotes(); flash('Quote '+id+' marked viewed ✓'); }
}
function acceptSavedQuote(id) {
  const q = savedQuotes.find(q=>q.id===id);
  if(q){ q.status='accepted'; renderQuotes(); flash('Quote '+id+' accepted — ready to convert ✓'); }
}
function resendExpiredQuote(id) {
  const q = savedQuotes.find(q=>q.id===id);
  if(!q) return;
  q.status='sent';
  q.date = new Date().toLocaleDateString();
  // Generate resend email text
  const resendText = `Hi ${q.client.split(' ')[0]},

Just wanted to follow up on your ${q.jobType} quote from earlier!

Total: $${q.amount.toLocaleString()}

This quote is still valid and we'd love to schedule your work. Questions? Just reply or give us a call.

Ready to move forward? Just reply "YES" and we'll get you scheduled!

- The Amp CRM Team`;
  // Open email with pre-filled content
  window.open('mailto:?subject=Updated: Your ${q.jobType} Quote - $${q.amount.toLocaleString()}&body='+encodeURIComponent(resendText));
  renderQuotes();
  flash('Quote '+id+' resent ✓ — email opened');
}
function markQuoteDeclined(id) {
  const q = savedQuotes.find(q=>q.id===id);
  if(q){ q.status='declined'; renderQuotes(); flash('Quote '+id+' marked declined'); }
}
function reinstateQuote(id) {
  const q = savedQuotes.find(q=>q.id===id);
  if(q){ q.status='draft'; renderQuotes(); flash('Quote '+id+' reinstated to draft ✓'); }
}
function duplicateQuote(id) {
  const q = savedQuotes.find(q=>q.id===id);
  if(!q) return;
  const newId = 'Q-' + String(quoteCounter++).padStart(3,'0');
  const today = new Date();
  const expires = new Date(); expires.setDate(expires.getDate()+30);
  const fmt = d => d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
  // Deep clone lines
  const newLines = (q.lines||[]).map(l=>({desc:l.desc,qty:l.qty,rate:l.rate,total:l.total}));
  savedQuotes.unshift({ 
    id: newId, 
    client: q.client, 
    jobType: q.jobType, 
    date: fmt(today), 
    expires: fmt(expires), 
    amount: q.amount, 
    status: 'draft', 
    lines: newLines, 
    notes: q.notes || '' 
  });
  autoPersist();
  renderQuotes();
  flash('Duplicated ' + id + ' as ' + newId + ' ✓');
}
function editSavedQuote(id) {
  const q = savedQuotes.find(q=>q.id===id);
  if(!q) return;
  flash('Editing '+id+' — loaded into builder ✓');
  // Load into builder
  const clientSel = document.getElementById('q-client');
  const jtSel = document.getElementById('q-jobtype');
  if(clientSel) clientSel.value = q.client;
  if(jtSel) jtSel.value = q.jobType;
  const container = document.getElementById('quote-lines');
  if(container) {
    container.innerHTML = '';
    (q.lines||[]).forEach(l => container.appendChild(makeQLine(l.desc, l.rate, l.qty)));
    recalcQ();
  }
  const notes = document.getElementById('q-notes');
  if(notes) notes.value = q.notes||'';
}
function removeLine(btn){btn.closest('.quote-line').remove();recalcQ();}

// ============================================================
// ONBOARDING — 5-step wizard
// ============================================================
let obStep = 0;
const OB_TOTAL = 5;

// Tracks what happened during onboarding so checklist is accurate
const obState = {
  source: null,       // 'jobber'|'housecall'|'servicetitan'|'quickbooks'|'generic'|'fresh'
  importDone: false,
  clientSaved: false,
  payMethods: new Set(['zelle','check2']), // defaults pre-selected
  stripeConnected: false,
};

// ── Step navigation ──────────────────────────────────────────
function goObStep(n) {
  const prev = obStep;
  document.getElementById('ob-step-' + prev).classList.remove('active');
  document.getElementById('ob-dot-'  + prev).classList.remove('active');

  // Mark previous as done
  const dotPrev = document.getElementById('ob-dot-' + prev);
  if (dotPrev) { dotPrev.classList.add('done'); dotPrev.textContent = '✓'; }
  const linePrev = document.getElementById('ob-line-' + prev);
  if (linePrev) linePrev.classList.add('done');

  obStep = n;
  const dotCur = document.getElementById('ob-dot-' + obStep);
  if (dotCur) { dotCur.classList.remove('done'); dotCur.classList.add('active'); dotCur.textContent = obStep + 1; }
  document.getElementById('ob-step-' + obStep).classList.add('active');

  const backBtn = document.getElementById('ob-back-btn');
  const nextBtn = document.getElementById('ob-next-btn');
  if (backBtn) backBtn.style.display = obStep > 0 ? 'inline-flex' : 'none';
  if (nextBtn) nextBtn.textContent = obStep === OB_TOTAL - 1 ? 'Open Dashboard →' : 'Continue →';

  if (obStep === OB_TOTAL - 1) {
    obSyncChecklist();
    updateObProgress();
  }
}

function obNext() {
  // Step 1 validation: must pick a source
  if (obStep === 1 && !obState.source) {
    flash('⚠️ Please select where you\'re coming from');
    return;
  }
  if (obStep < OB_TOTAL - 1) {
    goObStep(obStep + 1);
  } else {
    dismissOnboarding();
  }
}
function obBack() { if (obStep > 0) goObStep(obStep - 1); }

function dismissOnboarding() {
  document.getElementById('onboarding-overlay').classList.add('hidden');
  try { localStorage.setItem(STORAGE_KEYS.obDone, '1'); } catch(e) {}
  // Apply business info to brand
  const biz  = document.getElementById('ob-biz');
  const name = document.getElementById('ob-name');
  const state= document.getElementById('ob-state');
  if (biz?.value)  { brand.bizName = biz.value; }
  if (name?.value) { brand.ownerName = name.value; }
  if (state?.value){ try { setPbState(state.value); } catch(e){} }
  try { applyBrandToApp(); saveBrand(); } catch(e) {}

  // Sync setup checklist state from onboarding answers
  setupItems.forEach(item => {
    if (item.key === 'import'  && obState.importDone)     item.done = true;
    if (item.key === 'client'  && (obState.clientSaved || obState.importDone)) item.done = true;
    if (item.key === 'payment' && (obState.payMethods.size > 0)) item.done = true;
  });

  renderSetupChecklist();
  try { renderDashboard(); } catch(e) {}
  flash('Setup complete — finish the checklist to get fully configured ✓');
}

// ── Step 1: source selection ─────────────────────────────────
function selectObSource(src, el) {
  obState.source = src;
  document.querySelectorAll('.ob-source-tile').forEach(t => t.classList.remove('selected'));
  el.classList.add('selected');

  const ctaEl     = document.getElementById('ob-import-cta');
  const freshEl   = document.getElementById('ob-fresh-msg');
  const nameEl    = document.getElementById('ob-import-source-name');
  const nextBtn   = document.getElementById('ob-next-btn');

  const labels = { jobber:'Jobber', housecall:'Housecall Pro', servicetitan:'ServiceTitan',
                   quickbooks:'QuickBooks', generic:'your spreadsheet' };

  if (src === 'fresh') {
    if (ctaEl)   ctaEl.style.display   = 'none';
    if (freshEl) freshEl.style.display = 'block';
  } else {
    if (freshEl) freshEl.style.display = 'none';
    if (ctaEl)   ctaEl.style.display   = 'block';
    if (nameEl)  nameEl.textContent    = labels[src] || src;
  }
  if (nextBtn) nextBtn.disabled = false;
}

function obLaunchImport() {
  // Close onboarding temporarily, open import wizard, return
  document.getElementById('onboarding-overlay').classList.add('hidden');
  // Pre-select the source in the import wizard
  importWizard.source = obState.source;
  openImportWizard();
  // After import closes, mark done and reopen onboarding at step 2
  const origClose = window._importDoneCallback;
  window._importDoneCallback = () => {
    obState.importDone = true;
    obState.clientSaved = true;
    // Update step 2 to show import success
    const msg = document.getElementById('ob-client-imported-msg');
    if (msg) {
      msg.style.display = 'block';
      const countEl = document.getElementById('ob-imported-count');
      if (countEl) {
        const r = importWizard.results;
        countEl.textContent = [
          r.clients > 0 ? r.clients + ' client' + (r.clients!==1?'s':'') : '',
          r.jobs    > 0 ? r.jobs    + ' job'    + (r.jobs!==1?'s':'')    : '',
          r.invoices> 0 ? r.invoices+ ' invoice' + (r.invoices!==1?'s':'') : '',
        ].filter(Boolean).join(', ') || 'Records imported';
      }
      const titleEl = document.getElementById('ob-client-step-title');
      const descEl  = document.getElementById('ob-client-step-desc');
      if (titleEl) titleEl.textContent = 'Import complete!';
      if (descEl)  descEl.textContent  = 'Your data is ready. You can still add a client manually below, or continue to the next step.';
    }
    document.getElementById('onboarding-overlay').classList.remove('hidden');
    goObStep(2);
  };
}

// ── Step 2: save client manually ────────────────────────────
function obSaveClient() {
  const name  = document.getElementById('ob-cn')?.value?.trim();
  const phone = document.getElementById('ob-cphone')?.value?.trim();
  const email = document.getElementById('ob-cemail')?.value?.trim();
  const addr  = document.getElementById('ob-caddr')?.value?.trim();
  const type  = document.getElementById('ob-ctype')?.value || 'Residential';
  const source= document.getElementById('ob-csource')?.value || 'Referral';

  if (!name) { flash('⚠️ Enter a client name'); return; }

  const colors = ['var(--amber)','var(--blue)','var(--green)','var(--orange)','#b57cf8'];
  const init   = name.split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase();
  clients.unshift({
    name, addr: addr || 'Address TBD',
    jobs: 0, spent: 0,
    color: colors[clients.length % colors.length],
    init, phone, email, type, source,
  });

  obState.clientSaved = true;
  const savedMsg = document.getElementById('ob-client-saved');
  if (savedMsg) savedMsg.style.display = 'block';
  flash('Client ' + name + ' saved ✓');
  try { renderClients(); } catch(e) {}
}

// ── Step 3: payment method toggles ──────────────────────────
function toggleObPay(method, el) {
  const checkEl = document.getElementById('ob-pay-check-' + method);
  const isActive = el.classList.contains('ob-pay-active');

  if (isActive) {
    el.classList.remove('ob-pay-active');
    if (checkEl) { checkEl.classList.remove('ob-pay-checked'); checkEl.textContent = '○'; }
    obState.payMethods.delete(method);
  } else {
    el.classList.add('ob-pay-active');
    if (checkEl) { checkEl.classList.add('ob-pay-checked'); checkEl.textContent = '✓'; }
    obState.payMethods.add(method);
  }

  // Show/hide Stripe connect section
  const stripeSection = document.getElementById('ob-stripe-section');
  if (stripeSection) {
    stripeSection.style.display = obState.payMethods.has('stripe') ? 'block' : 'none';
  }
  // Show/hide Zelle/Venmo fields
  const zelleSection = document.getElementById('ob-zelle-section');
  if (zelleSection) {
    const showZV = obState.payMethods.has('zelle') || obState.payMethods.has('venmo');
    zelleSection.style.display = showZV ? 'block' : 'none';
  }
}

function obConnectStripe() {
  const btn = document.getElementById('ob-stripe-btn');
  if (btn) {
    btn.style.background = 'linear-gradient(135deg, var(--green), #16a34a)';
    btn.textContent = '✓ Stripe Connected — ready to accept cards';
    btn.onclick = null;
  }
  obState.stripeConnected = true;
  flash('Stripe connected ✓');
  // Mark in the main payments tab too
  try {
    if (setupItems[2]) { setupItems[2].done = true; }
    const si = document.querySelector('.setup-item:nth-child(3)');
    if (si) si.classList.add('done');
  } catch(e) {}
}

// ── Step 4: checklist sync ───────────────────────────────────
function obSyncChecklist() {
  // Reflect what was done during steps 0-3
  const checkMap = {
    'ob-check-import':  obState.importDone,
    'ob-check-client':  obState.clientSaved || obState.importDone,
    'ob-check-payment': obState.stripeConnected || obState.payMethods.size > 0,
  };
  Object.entries(checkMap).forEach(([id, done]) => {
    const el = document.getElementById(id);
    if (!el) return;
    if (done) {
      el.classList.add('checked');
      const box = el.querySelector('.ob-check-box');
      if (box) box.textContent = '✓';
    }
  });
}

function toggleObCheck(el) {
  el.classList.toggle('checked');
  const box = el.querySelector('.ob-check-box');
  if (box) box.textContent = el.classList.contains('checked') ? '✓' : '';
  updateObProgress();
}

function updateObProgress() {
  const items = document.querySelectorAll('#ob-final-checklist .ob-check-item');
  const done  = Array.from(items).filter(i => i.classList.contains('checked')).length;
  const pct   = Math.round((done / items.length) * 100);
  const bar   = document.getElementById('ob-done-bar');
  const lbl   = document.getElementById('ob-done-pct');
  if (bar) bar.style.width = pct + '%';
  if (lbl) lbl.textContent = done + ' of ' + items.length + ' complete';
}

function obCheckAction(type) {
  const el = event?.currentTarget || document.getElementById('ob-check-' + type);
  if (el?.classList.contains('checked')) {
    // Already done — just toggle off
    el.classList.remove('checked');
    const box = el.querySelector('.ob-check-box');
    if (box) box.textContent = '';
    updateObProgress();
    return;
  }
  // Not done — route to the right place and mark
  const routes = {
    import:  () => obLaunchImport(),
    client:  () => { dismissOnboarding(); openModal('new-client'); },
    job:     () => { dismissOnboarding(); openModal('new-job'); },
    payment: () => { dismissOnboarding(); nav('money',document.getElementById('nav-money')); setTimeout(()=>switchHub('money','payments',document.querySelector('#money-tabs .hub-tab:nth-child(2)')),120); },
    invoice: () => { dismissOnboarding(); nav('money',document.getElementById('nav-money')); setTimeout(()=>openModal('new-invoice'),200); },
  };
  if (routes[type]) routes[type]();
  // Mark checked
  if (el) {
    el.classList.add('checked');
    const box = el.querySelector('.ob-check-box');
    if (box) box.textContent = '✓';
    updateObProgress();
  }
}

// ── Team size tile click handling ────────────────────────────
try {
  document.querySelectorAll('.ob-size-tile').forEach(tile => {
    if (typeof tile.addEventListener !== 'function') return;
    tile.addEventListener('click', () => {
      document.querySelectorAll('.ob-size-tile').forEach(t => t.classList.remove('selected'));
      tile.classList.add('selected');
    });
  });
} catch(e) {}

// ── PERSISTENT SETUP CHECKLIST (dashboard widget) ────────────
const setupItems = [
  { key:'business', label:'Business profile',          sub:'Name, license, service area, and team size',          done: true,  action: () => nav('settings', document.getElementById('nav-settings')) },
  { key:'import',   label:'Import existing data',      sub:'Clients, jobs, and invoices from old system', done: false, action: () => openImportWizard() },
  { key:'client',   label:'Add your first client',     sub:'Manually or via import',                    done: false, action: () => openModal('new-client') },
  { key:'job',      label:'Schedule your first job',   sub:'Log and assign a job',                      done: false, action: () => openModal('new-job') },
  { key:'payment',  label:'Connect payment methods',   sub:'Stripe, Zelle, Venmo, or check',            done: false, action: () => { nav('money',document.getElementById('nav-money')); setTimeout(()=>switchHub('money','payments',document.querySelector('#money-tabs .hub-tab:nth-child(2)')),120); } },
  { key:'invoice',  label:'Send your first invoice',   sub:'Create, send, and collect payment',         done: false, action: () => openModal('new-invoice') },
];

function renderSetupChecklist() {
  const existing = document.getElementById('setup-checklist-widget');
  if (existing) existing.remove();

  const done = setupItems.filter(i => i.done).length;
  if (done === setupItems.length) return;

  const pct    = Math.round((done / setupItems.length) * 100);
  const widget = document.createElement('div');
  widget.id    = 'setup-checklist-widget';
  widget.className = 'setup-checklist';
  widget.innerHTML = `
    <div style="padding:14px 18px 10px;display:flex;align-items:center;justify-content:space-between">
      <div>
        <div style="font-size:14px;font-weight:700;margin-bottom:2px">⚡ Complete Your Setup</div>
        <div style="font-size:12px;color:var(--text-dim)">${done} of ${setupItems.length} complete · ${100-pct}% left</div>
      </div>
      <div style="font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--amber)">${pct}%</div>
    </div>
    <div class="setup-progress-bar"><div class="setup-progress-fill" style="width:${pct}%"></div></div>
    ${setupItems.map((item, i) => `
      <div class="setup-item ${item.done ? 'done' : ''}" onclick="completeSetupItem(${i})">
        <div class="setup-check">${item.done ? '✓' : ''}</div>
        <div style="flex:1">
          <div class="setup-label ${item.done ? 'done' : ''}">${item.label}</div>
          <div style="font-size:11px;color:var(--text-muted)">${item.sub}</div>
        </div>
        <div class="setup-cta">${item.done ? '' : 'Start →'}</div>
      </div>`).join('')}
    <div style="padding:10px 18px;text-align:right">
      <span style="font-size:11px;color:var(--text-muted);cursor:pointer"
        onclick="document.getElementById('setup-checklist-widget').remove()">Dismiss</span>
    </div>`;

  const streak = document.querySelector('.streak-banner');
  if (streak) streak.parentNode.insertBefore(widget, streak);
  else {
    const dash = document.getElementById('view-dashboard');
    if (dash) dash.insertAdjacentElement('afterbegin', widget);
  }
}

function completeSetupItem(i) {
  setupItems[i].done = true;
  setupItems[i].action();
  renderSetupChecklist();
  flash(setupItems[i].label + ' ✓');
}

// ============================================================
// JOB FLOW / PHOTO CAPTURE
// ============================================================
let jfCurrentStage = 1;
let selectedPhotoType = 'before';


// ════════════════════════════════════════════════════════════════
// PHOTO UPLOAD SYSTEM
// ════════════════════════════════════════════════════════════════
let jfPhotos = [];
let currentPhotoType = 'before';

function selectPhotoType(type, el) {
  currentPhotoType = type;
  document.querySelectorAll('[id^="pt-"]').forEach(e => e.classList.remove('active'));
  if (el) el.classList.add('active');
}

function handlePhotoUpload(files) {
  if (!files || !files.length) return;
  Array.from(files).forEach(file => {
    if (!file.type.startsWith('image/')) return;
    const reader = new FileReader();
    reader.onload = (e) => {
      jfPhotos.push({
        dataUrl: e.target.result,
        type: currentPhotoType,
        name: file.name,
        timestamp: new Date().toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}),
      });
      renderPhotoGrid();
      updateAfterPhotoPreview();
    };
    reader.readAsDataURL(file);
  });
}

function renderPhotoGrid() {
  const grid = document.getElementById('photo-grid-real');
  if (!grid) return;
  const badge    = document.getElementById('photo-count-badge');
  const countTxt = document.getElementById('photo-count-text');
  if (!jfPhotos.length) { grid.innerHTML = ''; if (badge) badge.style.display = 'none'; return; }
  if (badge) badge.style.display = 'block';
  if (countTxt) countTxt.textContent = jfPhotos.length + ' photo' + (jfPhotos.length !== 1 ? 's' : '') + ' captured';
  grid.innerHTML = jfPhotos.map((p, i) => `
    <div class="photo-thumb">
      <img src="${p.dataUrl}" alt="${p.name}">
      <button class="photo-del" onclick="removePhoto(${i})">x</button>
      <div class="photo-label">${p.type} · ${p.timestamp}</div>
    </div>`).join('') + `
    <div class="photo-thumb" style="display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px dashed var(--border)"
      onclick="document.getElementById('photo-file-input').click()">
      <div style="text-align:center;color:var(--text-muted)"><div style="font-size:22px">+</div><div style="font-size:10px">Add</div></div>
    </div>`;
}

function removePhoto(i) {
  jfPhotos.splice(i, 1);
  renderPhotoGrid();
  updateAfterPhotoPreview();
}

function updateAfterPhotoPreview() {
  const el = document.getElementById('after-photo-preview');
  if (!el) return;
  const ap = jfPhotos.filter(p => p.type === 'after' || p.type === 'panel');
  if (!ap.length) {
    el.innerHTML = '<span style="color:var(--text-muted)">After photos will appear here.</span>';
    return;
  }
  el.innerHTML = '<div style="display:flex;gap:6px;flex-wrap:wrap">' +
    ap.map(p => `<img src="${p.dataUrl}" style="width:60px;height:60px;object-fit:cover;border-radius:6px">`).join('') +
    `<span style="font-size:12px;color:var(--text-muted);align-self:center">${ap.length} after photo${ap.length!==1?'s':''}</span></div>`;
}

// ════════════════════════════════════════════════════════════════
// SIGNATURE PAD
// ════════════════════════════════════════════════════════════════
let sigCanvas = null, sigCtx = null, sigDrawing = false, sigHasData = false, sigLastX = 0, sigLastY = 0;

function initSignaturePad() {
  sigCanvas = document.getElementById('sig-canvas');
  if (!sigCanvas) return;
  sigCtx = sigCanvas.getContext('2d');
  sigCanvas.width  = sigCanvas.offsetWidth || 560;
  sigCanvas.height = 140;
  sigCtx.lineWidth = 2.5; sigCtx.lineCap = 'round'; sigCtx.lineJoin = 'round';
  sigCanvas.onmousedown  = sigStart;
  sigCanvas.onmousemove  = sigMove;
  sigCanvas.onmouseup    = sigEnd;
  sigCanvas.onmouseleave = sigEnd;
  sigCanvas.ontouchstart = function(e){e.preventDefault();sigStart(e.touches[0]);};
  sigCanvas.ontouchmove  = function(e){e.preventDefault();sigMove(e.touches[0]);};
  sigCanvas.ontouchend   = sigEnd;
}

function sigPos(e) {
  const r = sigCanvas.getBoundingClientRect();
  return { x:(e.clientX-r.left)*(sigCanvas.width/r.width), y:(e.clientY-r.top)*(sigCanvas.height/r.height) };
}
function sigStart(e) { sigDrawing=true; const p=sigPos(e); sigLastX=p.x; sigLastY=p.y; }
function sigMove(e) {
  if (!sigDrawing) return;
  const p = sigPos(e);
  sigCtx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--text')||'#e0d6c8';
  sigCtx.beginPath(); sigCtx.moveTo(sigLastX,sigLastY); sigCtx.lineTo(p.x,p.y); sigCtx.stroke();
  sigLastX=p.x; sigLastY=p.y; sigHasData=true;
  const st=document.getElementById('sig-status'); if(st)st.style.display='flex';
}
function sigEnd() { sigDrawing=false; }
function clearSignature() {
  if(!sigCtx||!sigCanvas)return;
  sigCtx.clearRect(0,0,sigCanvas.width,sigCanvas.height); sigHasData=false;
  const st=document.getElementById('sig-status'); if(st)st.style.display='none';
}
function getSignatureDataUrl() { return (sigCanvas&&sigHasData)?sigCanvas.toDataURL('image/png'):null; }

function completeJobWithSignature() {
  const sigData = getSignatureDataUrl();
  const titleEl = document.getElementById('jf-job-title');
  const jid = titleEl ? titleEl.textContent.split(' \u2014 ')[0].trim() : null;
  const job = jid ? jobs.find(j=>j.id===jid) : null;
  if (job) {
    if (sigData) { job.signature=sigData; job.signedAt=new Date().toLocaleString(); }
    const notes = document.getElementById('jf-final-notes');
    if (notes && notes.value) job.completionNotes = notes.value;
  }
  setJfStage(4);
  flash(sigData ? 'Job complete — signature saved \u2713' : 'Job marked complete \u2713');
}

// ════════════════════════════════════════════════════════════════
// DYNAMIC SAFETY CHECKLIST
// ════════════════════════════════════════════════════════════════
function loadJobSafetyChecklist(jobCat) {
  const section = document.getElementById('jf-safety-section');
  const list    = document.getElementById('jf-safety-checklist');
  const badge   = document.getElementById('jf-arrive-badge');
  const items   = (typeof JOB_SAFETY_CHECKLISTS !== 'undefined')
    ? (JOB_SAFETY_CHECKLISTS[jobCat] || JOB_SAFETY_CHECKLISTS['default'])
    : [];
  if (!items.length || !list) return;
  list.innerHTML = items.map(txt =>
    '<div class="jf-check-item" onclick="toggleJfCheck(this)">' +
    '<div class="jf-check"></div><div class="jf-check-text">'+txt+'</div></div>'
  ).join('');
  if (section) section.style.display = '';
  if (badge)   badge.textContent = (jobCat||'').toUpperCase();
}

// ════════════════════════════════════════════════════════════════
// OVERRIDE openJobFlow — inject checklist + reset state
// ════════════════════════════════════════════════════════════════
(function(){
  const _base = window.openJobFlow;
  window.openJobFlow = function(jid) {
    jfPhotos = [];
    sigHasData = false;
    if (_base) _base(jid);
    setTimeout(function() {
      renderPhotoGrid();
      const job = jobs.find(function(j){return j.id===jid;});
      if (job) loadJobSafetyChecklist(job.type || 'default');
      initSignaturePad();
    }, 100);
  };
})();

// Re-init sig pad on stage 3
(function(){
  const _base = window.setJfStage;
  window.setJfStage = function(n) {
    if (_base) _base(n);
    if (n === 3) setTimeout(initSignaturePad, 60);
  };
})();

// ════════════════════════════════════════════════════════════════
// ANALYTICS — Parts vs Labor + Job Type Performance
// ════════════════════════════════════════════════════════════════
function renderPartsLaborAnalytics() {
  const doneJobs = jobs.filter(function(j){return j.status==='complete'&&j.value>0;});
  if (!doneJobs.length) return;
  var totalRevenue=0, totalMaterials=0;
  doneJobs.forEach(function(j){
    totalRevenue += j.value;
    var matPct = j.margin ? (100-j.margin)/100*0.6 : 0.32;
    totalMaterials += j.value * matPct;
  });
  var totalLabor = totalRevenue - totalMaterials;
  var matPct   = totalRevenue ? Math.round(totalMaterials/totalRevenue*100) : 35;
  var laborPct = 100 - matPct;

  function setEl(id,v){var e=document.getElementById(id);if(e)e.textContent=v;}
  function setW(id,w){var e=document.getElementById(id);if(e)e.style.width=w;}
  setEl('an-mat-total',   '$'+Math.round(totalMaterials).toLocaleString());
  setEl('an-mat-pct',     matPct+'% of revenue');
  setEl('an-labor-total', '$'+Math.round(totalLabor).toLocaleString());
  setEl('an-labor-pct',   laborPct+'% of revenue');
  setW('an-mat-bar', matPct+'%');

  var marginEl = document.getElementById('an-margin-by-type');
  if (marginEl) {
    var typeMap = {};
    doneJobs.forEach(function(j){
      var t=j.type||'other';
      if(!typeMap[t])typeMap[t]={total:0,cnt:0,margin:0};
      typeMap[t].total+=j.value; typeMap[t].cnt++; typeMap[t].margin+=(j.margin||55);
    });
    var labels={panel:'Panel/Service',ev:'EV Charging',svc:'Service Call',inst:'Commercial',
      lighting:'Lighting',wiring:'Wiring',safety:'Safety',other:'Other'};
    var sorted=Object.entries(typeMap).sort(function(a,b){return b[1].total-a[1].total;}).slice(0,5);
    marginEl.innerHTML = sorted.map(function(e){
      var avg=Math.round(e[1].margin/e[1].cnt);
      var col=avg>=65?'var(--success)':avg>=50?'var(--amber)':'var(--danger)';
      return '<div style="display:flex;align-items:center;justify-content:space-between;font-size:12px">'+
        '<span style="color:var(--text-dim)">'+(labels[e[0]]||e[0])+'</span>'+
        '<span style="font-weight:700;color:'+col+'">'+avg+'% margin</span></div>';
    }).join('');
  }

  var perfEl = document.getElementById('an-job-type-table');
  if (perfEl) {
    var typePerf={};
    jobs.filter(function(j){return j.value>0;}).forEach(function(j){
      var t=j.type||'other';
      if(!typePerf[t])typePerf[t]={cnt:0,total:0};
      typePerf[t].cnt++; typePerf[t].total+=j.value;
    });
    var s2=Object.entries(typePerf).sort(function(a,b){return b[1].total-a[1].total;}).slice(0,7);
    var mx=Math.max.apply(null,s2.map(function(e){return e[1].total;})||[1]);
    var lb2={panel:'Panel/Service',ev:'EV Charging',svc:'Service Call',inst:'Commercial',
      lighting:'Lighting',wiring:'Wiring',safety:'Safety',service:'Service Call',other:'Other'};
    perfEl.innerHTML = '<div style="display:grid;grid-template-columns:1fr 52px 60px;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);margin-bottom:6px">'+
      '<span>Job Type</span><span style="text-align:right">Jobs</span><span style="text-align:right">Avg $</span></div>' +
      s2.map(function(e){
        var avg=Math.round(e[1].total/e[1].cnt);
        var bw=Math.round(e[1].total/mx*100);
        return '<div style="margin-bottom:7px">'+
          '<div style="display:grid;grid-template-columns:1fr 52px 60px;gap:4px;font-size:12px;align-items:center;margin-bottom:3px">'+
          '<span>'+(lb2[e[0]]||e[0])+'</span>'+
          '<span style="text-align:right;color:var(--text-muted)">'+e[1].cnt+'</span>'+
          '<span style="text-align:right;font-weight:700;color:var(--amber)">$'+avg.toLocaleString()+'</span></div>'+
          '<div style="height:4px;background:var(--surface2);border-radius:2px">'+
          '<div style="height:100%;width:'+bw+'%;background:var(--amber);border-radius:2px"></div></div></div>';
      }).join('');
  }
}

(function(){
  var _base = window.renderAnalytics;
  window.renderAnalytics = function() {
    if (_base) _base();
    try { renderPartsLaborAnalytics(); } catch(e) { console.warn('analytics err',e); }
  };
})();

function closeJobFlow() {
  var jfo = document.getElementById('job-flow-overlay');
  jfo.classList.remove('open');
  jfo.style.display = '';
  document.body.style.overflow = '';
}

function setJfStage(n) {
  jfCurrentStage = n;
  // update stage bar
  document.querySelectorAll('.jf-stage').forEach((s, i) => {
    s.classList.remove('active', 'done');
    if (i < n) s.classList.add('done');
    else if (i === n) s.classList.add('active');
  });
  // show/hide content panels
  document.querySelectorAll('.jf-stage-content').forEach((c, i) => {
    c.style.display = i === n ? 'block' : 'none';
  });
}

function selectPhotoType(type, el) {
  selectedPhotoType = type;
  document.querySelectorAll('#jfs-1 .cat-chip').forEach(c => c.classList.remove('active'));
  el.classList.add('active');
}

let photosCaptured = 2;
function capturePhoto() {
  photosCaptured++;
  const grid = document.getElementById('photo-capture-grid');
  if (!grid) { flash('📷 Photo captured ✓'); return; }
  // add a filled slot before the + button
  const addSlot = grid.querySelector('.photo-capture-slot:not(.filled)');
  if (addSlot) {
    const icons = { before: '🏠', during: '⚡', after: '✅', panel: '🔌', permit: '📋' };
    const newSlot = document.createElement('div');
    newSlot.className = 'photo-capture-slot filled';
    newSlot.innerHTML = `<div class="slot-icon">${icons[selectedPhotoType] || '📷'}</div><div class="slot-label">Photo ${photosCaptured}</div><div class="slot-badge">✓</div><div class="slot-type">${selectedPhotoType}</div>`;
    newSlot.onclick = () => flash('Viewing photo...');
    grid.insertBefore(newSlot, addSlot);
  }
  flash('📷 Photo captured (' + selectedPhotoType + ') ✓');
}

function toggleJfCheck(el) {
  const chk = el.querySelector('.jf-check');
  const txt = el.querySelector('.jf-check-text');
  const done = !chk.classList.contains('done');
  chk.classList.toggle('done', done);
  chk.textContent = done ? '✓' : '';
  txt.classList.toggle('done', done);
}

// Hook "Start Job" into jobs table — inject button into job row rendering
// renderJobs is fully handled by filterJobsSearch below

// ============================================================
// PAYMENTS
// ============================================================
let stripeConnected = false;

// ── Sent communications log ──────────────────────────────────────────
let sentLog = [
  { type:'pay_link', to:'Sarah Mitchell',   channel:'SMS',   subject:'INV-0088 — $2,800 (Panel Upgrade)',    time:'Feb 18, 10:42 AM', status:'viewed' },
  { type:'invoice',  to:'TK Building Group',channel:'Email', subject:'INV-0085 — $8,400 (Commercial)',       time:'Feb 15,  2:11 PM', status:'sent'   },
  { type:'reminder', to:'Dave Novak',       channel:'SMS',   subject:'INV-0087 overdue — $280',              time:'Feb 17,  9:05 AM', status:'sent'   },
  { type:'pay_link', to:'Linda Zhao',       channel:'Email', subject:'INV-0084 — $6,250 (Subpanel)',         time:'Feb 14,  4:30 PM', status:'paid'   },
];

const payLinks = [
  { client: 'Sarah Mitchell', inv: 'INV-0088', amount: 2800, sent: 'Feb 16', status: 'viewed', method: 'SMS' },
  { client: 'Linda Zhao', inv: 'INV-0084', amount: 6250, sent: 'Feb 14', status: 'sent', method: 'Email' },
  { client: 'Dave Novak', inv: 'INV-0087', amount: 280, sent: 'Feb 9', status: 'paid', method: 'SMS' },
  { client: 'Carlos Herrera', inv: 'INV-0085', amount: 950, sent: 'Feb 1', status: 'paid', method: 'SMS' },
];

function renderPayments() {
  const statusMap = { sent:['pls-sent','Link Sent'], viewed:['pls-viewed','Viewed 👀'], paid:['pls-paid','Paid ✓'] };

  // ── Pay links list ───────────────────────────────────────
  const plEl = document.getElementById('pay-links-list');
  if (plEl) {
    plEl.innerHTML = payLinks.length
      ? payLinks.map(p => `
          <div class="pay-link-item">
            <div style="flex:1">
              <div style="font-size:13.5px;font-weight:600">${p.client}</div>
              <div style="font-size:11.5px;color:var(--text-dim)">${p.inv} · via ${p.method} · ${p.sent}</div>
            </div>
            <div class="pay-link-amt">$${p.amount.toLocaleString()}</div>
            <span class="pay-link-status ${statusMap[p.status]?.[0]||'pls-sent'}" style="margin-left:10px">${statusMap[p.status]?.[1]||p.status}</span>
            ${p.status !== 'paid' ? `<button class="btn btn-ghost btn-sm" style="margin-left:8px" onclick="sentLog.unshift({type:'reminder',to:p.client,channel:'SMS',subject:'Permit ' + p.num + ' reminder',time:new Date().toLocaleDateString('en-US',{month:'short',day:'numeric'}),status:'sent'});autoPersist();flash('Reminder sent to ' + p.client + ' ✓')">Resend</button>` : ''}
          </div>`).join('')
      : '<div style="padding:20px;text-align:center;color:var(--text-muted);font-size:13px">No pay links sent yet — send your first one above</div>';
  }

  // ── Stripe badge ─────────────────────────────────────────
  const badge = document.getElementById('stripe-status-badge');
  if (badge) badge.innerHTML = stripeConnected
    ? '<span style="color:var(--success);font-size:13px">✓ Stripe Connected</span>'
    : '<span style="color:var(--text-muted)">Not connected</span>';

  // ── Monthly collection summary — computed from invoices ──
  // Determine "this month" = most recent paid invoice month, or current
  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const now = new Date();
  const thisMo = MONTHS[now.getMonth()];

  // Group paid invoices by payMethod
  const byMethod = { card:0, zelle:0, check:0, other:0 };
  const paidThisMo = invoices.filter(inv => {
    const isPaid = inv.status === 'paid' || inv.status === 'complete';
    const isThisMo = (inv.issued||'').startsWith(thisMo) || (inv.due||'').startsWith(thisMo);
    return isPaid; // show all time if month matching is sparse
  });
  paidThisMo.forEach(inv => {
    const m = (inv.payMethod || 'other').toLowerCase();
    if (m.includes('stripe') || m.includes('card')) byMethod.card += inv.amount;
    else if (m.includes('zelle')) byMethod.zelle += inv.amount;
    else if (m.includes('check') || m.includes('cash')) byMethod.check += inv.amount;
    else byMethod.other += inv.amount;
  });

  const methodRows = [
    { label:'Collected via Card',   val:byMethod.card,  color:'var(--success)' },
    { label:'Collected via Zelle',  val:byMethod.zelle, color:'var(--text)' },
    { label:'Check / Cash',         val:byMethod.check, color:'var(--text)' },
    { label:'Other / Untracked',    val:byMethod.other, color:'var(--text-dim)' },
  ].filter(r => r.val > 0);

  // If no payMethod data, fall back to total paid
  const totalPaid = paidThisMo.reduce((s,i)=>s+i.amount,0);
  const sumEl = document.getElementById('pay-method-summary');
  if (sumEl) {
    if (methodRows.length) {
      sumEl.innerHTML = methodRows.map(r => `
        <div style="margin-bottom:14px">
          <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px">${r.label}</div>
          <div style="font-family:'Bebas Neue',sans-serif;font-size:30px;color:${r.color}">$${r.val.toLocaleString()}</div>
        </div>`).join('');
    } else {
      sumEl.innerHTML = `
        <div style="margin-bottom:14px">
          <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px">Total Collected</div>
          <div style="font-family:'Bebas Neue',sans-serif;font-size:30px;color:var(--success)">$${totalPaid.toLocaleString()}</div>
        </div>
        <div style="font-size:12px;color:var(--text-dim)">Track payment method on each invoice to see breakdown by card, Zelle, and check.</div>`;
    }
  }

  // ── Outbox / sent log ────────────────────────────────────
  const outboxEl = document.getElementById('outbox-list');
  const outboxCt = document.getElementById('outbox-count');
  if (outboxEl) {
    const TYPE_ICON  = { pay_link:'💳', invoice:'📄', reminder:'🔔', quote:'📋' };
    const TYPE_LABEL = { pay_link:'Pay Link', invoice:'Invoice', reminder:'Reminder', quote:'Quote' };
    const STAT_COLOR = { sent:'var(--text-muted)', viewed:'var(--amber)', paid:'var(--success)' };
    const STAT_LABEL = { sent:'Sent', viewed:'Viewed 👀', paid:'Paid ✓' };
    if (outboxCt) outboxCt.textContent = sentLog.length + ' message' + (sentLog.length !== 1 ? 's' : '');
    outboxEl.innerHTML = sentLog.length
      ? sentLog.map(entry => `
          <div style="display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border)">
            <div style="width:34px;height:34px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0">${TYPE_ICON[entry.type]||'📨'}</div>
            <div style="flex:1;min-width:0">
              <div style="font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${entry.to}</div>
              <div style="font-size:11.5px;color:var(--text-dim);margin-top:1px">${TYPE_LABEL[entry.type]||entry.type} via ${entry.channel} · ${entry.subject}</div>
            </div>
            <div style="text-align:right;flex-shrink:0">
              <div style="font-size:11px;color:${STAT_COLOR[entry.status]||'var(--text-muted)'};font-weight:600">${STAT_LABEL[entry.status]||entry.status}</div>
              <div style="font-size:10.5px;color:var(--text-dim);margin-top:2px">${entry.time}</div>
            </div>
          </div>`).join('')
      : '<div style="padding:20px;text-align:center;color:var(--text-muted);font-size:13px">No messages sent yet</div>';
  }

  // ── Collection stats panel ────────────────────────────────
  const statsEl = document.getElementById('pay-collection-stats');
  if (statsEl) {
    const unpaidInvs  = invoices.filter(i=>i.status!=='paid'&&i.status!=='complete');
    const overdueInvs = unpaidInvs.filter(i=>i.status==='overdue');
    const outstandingAR = unpaidInvs.reduce((s,i)=>s+i.amount,0);
    const overdueAmt    = overdueInvs.reduce((s,i)=>s+i.amount,0);
    const paidCount = paidThisMo.length;
    const sentCount = payLinks.filter(p=>p.status==='sent'||p.status==='viewed').length;

    statsEl.innerHTML = `
      <div style="margin-bottom:14px">
        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px">Outstanding AR</div>
        <div style="font-family:'Bebas Neue',sans-serif;font-size:30px;color:${outstandingAR>5000?'var(--danger)':'var(--amber)'}">$${outstandingAR.toLocaleString()}</div>
        ${overdueAmt>0?`<div style="font-size:11px;color:var(--danger);margin-top:2px">$${overdueAmt.toLocaleString()} overdue</div>`:''}
      </div>
      <div style="margin-bottom:14px">
        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px">Invoices Paid</div>
        <div style="font-family:'Bebas Neue',sans-serif;font-size:30px;color:var(--success)">${paidCount}</div>
      </div>
      <div>
        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px">Pay Links Pending</div>
        <div style="font-family:'Bebas Neue',sans-serif;font-size:30px;color:var(--amber)">${sentCount}</div>
      </div>`;
  }
}

function connectStripe() {
  stripeConnected = true;
  const btn = document.getElementById('stripe-btn');
  if (btn) { btn.className = 'stripe-connect-btn connected'; btn.innerHTML = '✓ Stripe Connected'; }
  const badge = document.getElementById('stripe-status-badge');
  if (badge) badge.innerHTML = '<span style="color:var(--success);font-size:13px">✓ Stripe Connected</span>';
  // mark setup item
  if (setupItems[2]) { setupItems[2].done = true; renderSetupChecklist(); }
  flash('Stripe connected! You can now send pay links and accept cards ✓');
}

function connectVenmo() {
  flash('Venmo Business connected ✓');
}

function openPayLink(presetInvIdx) {
  // Build client options from live clients array
  const clientOpts = clients.map(cl => `<option>${cl.name}</option>`).join('');

  // Build invoice options — only unpaid/pending
  const unpaidInvs = invoices.filter(i => i.status !== 'paid' && i.status !== 'complete');
  const invOpts = unpaidInvs.length
    ? unpaidInvs.map((inv,i) =>
        `<option value="${i}" ${presetInvIdx===i?'selected':''}>${inv.num} — $${inv.amount.toLocaleString()} (${inv.client} · ${inv.status})</option>`
      ).join('')
    : '<option value="">No unpaid invoices</option>';

  document.getElementById('modal-title').textContent = 'Send Pay Link';
  document.getElementById('modal-body').innerHTML = `
    <p style="font-size:13px;color:var(--text-dim);margin-bottom:16px">Client gets a secure payment link via SMS or email and pays by card — money lands same day.</p>
    <div class="form-group"><label class="form-label">Invoice</label>
      <select class="form-input" id="pl-inv-sel" onchange="updatePayLinkPreview()">${invOpts}</select>
    </div>
    <div class="form-group"><label class="form-label">Send Via</label>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
        <label style="display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--surface2);border:1px solid var(--yellow);border-radius:10px;cursor:pointer">
          <input type="radio" name="pl-via" value="SMS" checked style="accent-color:var(--amber)"> <span style="font-size:13px;font-weight:500">📱 SMS</span>
        </label>
        <label style="display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;cursor:pointer">
          <input type="radio" name="pl-via" value="Email" style="accent-color:var(--amber)"> <span style="font-size:13px;font-weight:500">📧 Email</span>
        </label>
      </div>
    </div>
    <div style="background:var(--surface2);border-radius:10px;padding:13px 16px;font-size:12.5px;color:var(--text-dim)" id="pl-preview">
      Select an invoice to preview message
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="sendPayLinkConfirm()">💳 Send Pay Link</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
  setTimeout(updatePayLinkPreview, 50);
}

function updatePayLinkPreview() {
  const sel = document.getElementById('pl-inv-sel');
  if (!sel) return;
  const idx = parseInt(sel.value);
  const unpaidInvs = invoices.filter(i => i.status !== 'paid' && i.status !== 'complete');
  const inv = unpaidInvs[idx];
  if (!inv) return;
  const via = document.querySelector('input[name="pl-via"]:checked')?.value || 'SMS';
  const previewEl = document.getElementById('pl-preview');
  if (previewEl) {
    previewEl.innerHTML = `Preview: <em style="color:var(--text)">"Hi ${inv.client}, your invoice ${inv.num} for ${inv.job||'services'} is ready — $${inv.amount.toLocaleString()}. Pay securely: amp.pay/${inv.num.toLowerCase().replace('-','')}"</em>`;
  }
}

function sendPayLinkConfirm() {
  const sel = document.getElementById('pl-inv-sel');
  const via = document.querySelector('input[name="pl-via"]:checked')?.value || 'SMS';
  const unpaidInvs = invoices.filter(i => i.status !== 'paid' && i.status !== 'complete');
  const inv = unpaidInvs[parseInt(sel?.value||0)];
  if (!inv) { flash('⚠️ Select an invoice'); return; }
  
  // Get client email
  const clientEmail = clientProfiles[inv.client]?.email || clients.find(c => c.name === inv.client)?.email;
  
  // Create payment link
  const payLinkUrl = `https://amp-crm-48545.web.app/amp-crm.html?pay=1&inv=${inv.num}&amt=${inv.amount}`;
  
  // Add to pay links array
  payLinks.unshift({
    client: inv.client, inv: inv.num,
    method: via === 'SMS' ? 'SMS' : 'Email',
    amount: inv.amount, status: 'sent', sent: 'Just now', url: payLinkUrl
  });
  
  sentLog.unshift({
    type: 'pay_link', to: inv.client, channel: via,
    subject: inv.num + ' — $' + inv.amount.toLocaleString() + ' (' + (inv.job||'Services') + ')',
    time: 'Just now', status: 'sent'
  });
  
  inv.status = 'sent';
  
  // Send email with payment link if via Email
  if (via === 'Email' && clientEmail) {
    const subject = `Pay Your Invoice ${inv.num} - $${inv.amount}`;
    const html = `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <h2 style="color: #C8780A;">⚡ Pay Your Invoice</h2>
        <p>Hi ${inv.client},</p>
        <p>Your invoice for <strong>$${inv.amount}</strong> is ready.</p>
        <div style="margin: 30px 0;">
          <a href="${payLinkUrl}" style="background:#C8780A;color:white;padding:14px 28px;text-decoration:none;border-radius:8px;font-weight:600;display:inline-block">Pay Now</a>
        </div>
        <p style="font-size:13px;color:#666">Or copy this link: ${payLinkUrl}</p>
        <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
        <p style="font-size: 12px; color: #888;">Sent via Amp CRM</p>
      </div>
    `;
    sendEmail(clientEmail, subject, html);
  }
  
  closeModal();
  autoPersist();
  renderPayments();
  renderInvoices();
  renderDashboard();
  flash('💳 Pay link sent to ' + inv.client + ' via ' + via + ' ✓');
}

// extend nav() to handle payments view
function nav(view, el) {
  // Always close any open modal/overlay when navigating
  try { closeModal(); } catch(e) {}
  document.querySelectorAll('.view').forEach(v=>v.classList.remove('active'));
  document.querySelectorAll('.nav-item,.mob-nav-item').forEach(n=>n.classList.remove('active'));
  if(el)el.classList.add('active');
  else document.querySelectorAll('.nav-item').forEach(n=>{if(n.getAttribute('onclick')&&n.getAttribute('onclick').includes("'"+view+"'"))n.classList.add('active');});
  const viewEl=document.getElementById('view-'+view); if(!viewEl){console.warn('No view:',view);return;}
  viewEl.classList.add('active');
  const t={dashboard:'Dashboard',work:'Jobs',money:'Billing',field:'Jobsite',reports:'Reports',team:'Crew',clients:'Clients',tasks:'Tasks',settings:'Settings',schedule:'Schedule',jobs:'Jobs',permits:'Permit Tracker',pricebook:'Price Book',invoices:'Invoices',recurring:'Recurring Jobs',profitability:'Profitability',techs:'My Team',quote:'Estimates',payments:'Payments',analytics:'Analytics'};
  const ptEl=document.getElementById('page-title'); if(ptEl) ptEl.textContent=t[view]||view;
  const r={dashboard:()=>(window.renderDashboard||renderDashboard)(),work:()=>{try{(window.renderJobs||renderJobs)();}catch(e){}},money:()=>{try{renderInvoices();}catch(e){}},field:()=>{try{renderPermits();}catch(e){}},reports:()=>{try{renderAnalytics();}catch(e){}},team:()=>{try{renderTechs();}catch(e){}},clients:renderClients,tasks:renderTasks,settings:()=>updateSettingsBrandPreview(),jobs:()=>(window.renderJobs||renderJobs)(),schedule:()=>(window.renderSchedule||renderSchedule)(),recurring:renderRecurring,permits:renderPermits,pricebook:()=>{renderPb(pbCat);setPbState(pbState||'IL');},invoices:renderInvoices,analytics:renderAnalytics,profitability:()=>(window.renderProfitability||renderProfitability)(),techs:renderTechs,payments:renderPayments,quote:()=>{ try{ renderQuotes(); initQuoteBuilder(); }catch(e){} },recurring:renderRecurring};
  if(r[view])r[view]();
  if (view === 'payments') renderPayments();
  if (view === 'settings') { setTimeout(function(){ try{renderNotifPrefs();}catch(e){} }, 50); }
}

// Dashboard initialised by the full renderDashboard override below


// ============================================================-e 

// ============================================================
// FIX 1: SAVE ACTIONS — create/edit functions that update data
// ============================================================
let jobIdCounter = 9;
let invoiceCounter = 89;

function saveNewJob(isDraft) {
  // ── Read by ID first (reliable), fall back to positional for compatibility ──
  const client = document.getElementById('nj-client')?.value ||
    document.querySelector('#modal-body select')?.value || '';
  if (!client || client === '— Select client —' || client === 'new') {
    if (client === 'new') { closeModal(); openModal('new-client'); return; }
    flash('⚠️ Select a client first'); return;
  }

  const cat    = document.getElementById('nj-cat')?.value || 'service';
  const typeSel = document.getElementById('nj-type')?.value || 'Service Call';
  const addr   = document.getElementById('nj-addr')?.value || clientProfiles[client]?.addr || '';
  const permit = document.getElementById('nj-permit')?.value || 'No permit needed';
  const notes  = document.getElementById('nj-notes')?.value || '';
  const value  = parseFloat(document.getElementById('nj-value')?.value) || 0;
  const priority = document.getElementById('nj-priority')?.value || '🟢 Normal';
  const duration = document.getElementById('nj-duration')?.value || 4;

  // Date/time — nj-date and nj-time have IDs from modal def
  const dateRaw = document.getElementById('nj-date')?.value || '';
  let dateLabel = 'TBD';
  if (dateRaw) {
    const d = new Date(dateRaw + 'T12:00:00');
    const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    dateLabel = MONTHS[d.getMonth()] + ' ' + d.getDate();
  }
  const timeVal = document.getElementById('nj-time')?.value || '';

  // Tech — find by position after nj-client is resolved
  const techSel = document.getElementById('nj-tech');
  const techRaw = techSel?.value || 'Mike Rivera';
  const techParts = techRaw.replace(' (Master)','').replace(' (Journeyman)','').split(' ');
  const tech = techParts[0] + ' ' + (techParts[1]?.[0]||'') + '.';

  const catMap = {
    panel:'panel', wiring:'panel', outlets:'outlets', lighting:'lighting',
    ev:'ev', service:'svc', emergency:'svc', inspection:'svc',
    hvac:'svc', safety:'safe', commercial:'inst', outdoor:'inst', smart:'inst'
  };

  // Collect materials from job-mat-list (use newJobMaterials to avoid shadowing global)
  const newJobMaterials = [];
  let jobMatCost = 0;
  document.querySelectorAll('#job-mat-list .job-mat-row').forEach(row => {
    const sel  = row.querySelector('select');
    const qtyI = row.querySelector('input[type="number"]');
    if (!sel || !sel.value) return;
    const matName = sel.options[sel.selectedIndex]?.text || sel.value;
    const qty  = parseInt(qtyI?.value) || 1;
    const cost = parseFloat(sel.value) || 0;
    newJobMaterials.push({ name: matName, qty, unitCost: cost, total: qty * cost });
    jobMatCost += qty * cost;
  });

  const newJob = {
    id: 'J-' + String(jobIdCounter++).padStart(3,'0'),
    client, addr, type: catMap[cat] || 'svc',
    name: typeSel, tech,
    date: dateLabel, time: timeVal,
    value, permit, notes,
    priority, duration,
    materials: newJobMaterials,
    matCost: jobMatCost,
    margin: value > 0 ? Math.round((value - jobMatCost) / value * 100) : null,
    status: isDraft ? 'pending' : 'scheduled'
  };
  jobs.push(newJob);

  // Sync materials to global jobMaterials tracking
  if (newJobMaterials.length > 0) {
    window.jobMaterials[newJob.id] = newJobMaterials;
  }

  // Update client record
  const cl = clients.find(c => c.name === client);
  if (cl) cl.jobs = jobs.filter(j => j.client === client).length;

  // If this client has a profile, add timeline entry
  if (clientProfiles[client]) {
    (clientProfiles[client].timeline = clientProfiles[client].timeline || []).unshift({
      type:'job', icon:'🔧', bg:'var(--amber-light)', color:'var(--amber)',
      title: 'New job created — ' + typeSel,
      meta: dateLabel + (tech ? ' · ' + tech : ''),
      amount: value > 0 ? '$' + value.toLocaleString() : '',
    });
  }

  closeModal();
  if (document.getElementById('view-jobs').classList.contains('active')) renderJobs();
  if (document.getElementById('view-schedule').classList.contains('active')) renderSchedule();
  if (document.getElementById('view-dashboard').classList.contains('active')) renderDashboard();
  // Sync client profile + persist
  try { syncClientProfile(newJob.client); } catch(e) {}
  autoPersist();
  flash(isDraft ? 'Draft saved — ' + newJob.id : 'Job ' + newJob.id + ' created ✓');
}

function saveNewClient() {
  const fname = document.getElementById('nc-fname')?.value.trim() || '';
  const lname = document.getElementById('nc-lname')?.value.trim() || '';
  if (!fname) { flash('⚠️ Enter a first name'); return; }
  const name  = fname + (lname ? ' ' + lname : '');
  const phone = document.getElementById('nc-phone')?.value || '';
  const email = document.getElementById('nc-email')?.value || '';
  const addr  = document.getElementById('nc-addr')?.value  || '';
  const type  = document.getElementById('nc-type')?.value  || 'Residential';
  const source= document.getElementById('nc-source')?.value|| 'Referral';
  const ref   = document.getElementById('nc-ref')?.value   || '';
  const colors = ['var(--amber)','var(--blue)','var(--green)','var(--orange)','#b57cf8','#34d399','#f87171','#fb923c'];
  const color = colors[clients.length % colors.length];
  const init = (fname[0]||'') + (lname?.[0]||fname[1]||'');
  clients.push({ name, addr: addr || 'Address not set', jobs: 0, spent: 0, color, init, type, source, phone, email, tags: [type], notes: '', siteNotes: '', serviceSchedule: [] });
  const panelNotes = document.getElementById('nc-notes')?.value || '';
  clientProfiles[name] = {
    phone, email, type, source, addr, color, init,
    panelNotes,
    source: source + (ref ? ' — ' + ref : ''), health: 'hs-b', healthLabel: 'B — New',
    lastJob: '—', lifetime: 0, jobs: 0, refs: 0, avgPay: '—',
    billed: 0, collected: 0, outstanding: 0, tags: [type],
    suggestions: [{icon:'🔧', text:'Create first job for this client', action:"openModal('new-job')"}],
    notes: [], jobHistory: [], photos: [], docs: [], permits: [],
    siteNotes: '',
    serviceSchedule: [],
    referredBy: ref ? {name:ref, init:ref[0]||'?', color:'#888', date:'Today', ltv:0} : null,
    referrals: [], refRevenue: 0,
  };
  clientHealth[name] = { score:'B', cls:'hs-b', type: type.toLowerCase().includes('commercial')?'commercial':'residential', risk:false };
  clientSparkData[name] = [0,0,0,0,0,0,0,0,0,0,0,0];
  // Sync profile from live data (jobs, invoices) and persist
  syncClientProfile(name);
  autoPersist();
  closeModal();
  if(document.getElementById('view-clients').classList.contains('active')) renderClients();
  if(document.getElementById('view-dashboard').classList.contains('active')) renderDashboard();
  flash(`${name} added ✓`);
}

function saveNewPermit() {
  const num    = document.getElementById('np-num')?.value?.trim();
  if (!num)    { flash('⚠️ Enter a permit number'); return; }
  const client = document.getElementById('np-client')?.value || '';
  const addr   = document.getElementById('np-addr')?.value   || (client ? (clients.find(c=>c.name===client)?.addr||'') : '');
  const type   = document.getElementById('np-type')?.value   || 'Electrical Work';
  const issued = document.getElementById('np-issued')?.value || '';
  const expRaw = document.getElementById('np-expiry')?.value || '';
  const stage  = document.getElementById('np-stage')?.value  || 'Applied';
  const jobId  = document.getElementById('np-job')?.value    || '';

  const stageMap = {'Applied':0,'Reviewed':1,'Pending Inspection':2,'Approved':3,'Failed Inspection':2,'Expired':4,'Closed / Complete':5};
  const urgMap   = {'Applied':'o','Reviewed':'y','Pending Inspection':'y','Approved':'g','Failed Inspection':'r','Expired':'r','Closed / Complete':'g'};

  // Format expiry date for display: "Mar 15" from ISO date
  let expiry = 'TBD';
  if (expRaw) {
    const d = new Date(expRaw + 'T12:00:00');
    const MO = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    expiry = MO[d.getMonth()] + ' ' + d.getDate();
  }

  permits.push({ num, client, addr, type, issued, expiry, linkedJob: jobId, stage: stageMap[stage]||0, urg: urgMap[stage]||'o' });

  // If linked job has no permit, tag it
  if (jobId) {
    const j = jobs.find(x => x.id === jobId);
    if (j) j.permit = num;
  }

  closeModal();
  if (document.getElementById('view-permits').classList.contains('active')) renderPermits();
  if (document.getElementById('view-dashboard').classList.contains('active')) renderDashboard();
  autoPersist();
  flash('Permit ' + num + ' logged ✓' + (client ? ' — ' + client : ''));
}

function saveNewInvoice(isDraft) {
  // Try new modal fields first, fall back to legacy selects/inputs
  const clientEl = document.getElementById('ni-client');
  const niLinesEl = document.getElementById('ni-lines');
  let client, lines=[], subtotal=0, amount=0;
  if(clientEl) {
    client = clientEl.value;
    if(!client){ flash('⚠️ Select a client'); return; }
    if(niLinesEl) {
      niLinesEl.querySelectorAll('.quote-line').forEach(row=>{
        const desc=row.querySelector('.ql-desc')?.value?.trim();
        const qty=parseInt(row.querySelector('.ql-qty')?.value)||1;
        const rate=parseFloat(row.querySelector('.ql-rate')?.value)||0;
        if(desc&&rate>0){lines.push({desc,qty,rate,total:qty*rate});subtotal+=qty*rate;}
      });
    }
    if(subtotal===0&&!isDraft){flash('⚠️ Add at least one line item with a price');return;}
    const taxRate=parseFloat(document.getElementById('ni-taxrate')?.value)||0;
    const dep=parseFloat(document.getElementById('ni-dep')?.value)||0;
    const tax=subtotal*taxRate/100;
    amount=Math.max(subtotal+tax-dep,0);
    const terms=30;
    const issuedStr=(()=>{const d=new Date();return d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});})();
    const dueDate=new Date(); dueDate.setDate(dueDate.getDate()+terms);
    const dueStr=dueDate.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
    const niJobEl=document.getElementById('ni-job');
    const linkedJob=niJobEl?.value&&niJobEl.value!=='—'?niJobEl.value:'—';
    const linkedJobId=niJobEl?.value&&niJobEl.value!=='—'?niJobEl.value:null;
    const notes=document.getElementById('ni-notes')?.value||'';
    const num='INV-'+String(invoiceCounter++).padStart(4,'0');
    invoices.unshift({num,client,job:linkedJob,linkedJobId,issued:issuedStr,due:dueStr,amount,status:isDraft?'draft':'sent',payMethod:null,lines,subtotal,tax,deposit:dep,notes});
  } else {
    // Legacy fallback
    const mb=document.getElementById('modal-body');
    const selects=mb.querySelectorAll('select');
    const inputs=mb.querySelectorAll('input');
    client=selects[0]?.value;
    if(!client){flash('⚠️ Select a client');return;}
    const sub=parseFloat(inputs[2]?.value)||0;
    amount=Math.max(sub,0);
    const num='INV-'+String(invoiceCounter++).padStart(4,'0');
    invoices.unshift({num,client,job:selects[1]?.value||'—',issued:'Today',due:'Net 30',amount,status:isDraft?'draft':'sent',payMethod:null,lines:[],notes:''});
  }
  closeModal();
  autoPersist();
  try { if(client) syncClientProfile(client); } catch(e) {}
  renderInvoices();
  if (document.getElementById('view-dashboard').classList.contains('active')) renderDashboard();
  flash(isDraft?`Draft saved — ${client}`:`Invoice sent to ${client} ✓`);
}

function saveNewTask() {
  const text     = document.getElementById('nt-text')?.value?.trim()
                || document.querySelector('#modal-body input')?.value?.trim();
  if (!text) { flash('⚠️ Enter task description'); return; }

  const client   = document.getElementById('nt-client')?.value || '';
  const due      = document.getElementById('nt-due')?.value || 'TBD';
  const jobId    = document.getElementById('nt-job')?.value || '';
  const priority = document.getElementById('nt-priority')?.value || 'Normal';

  const maxId = tasks.reduce((m,t) => Math.max(m,t.id), 0);
  tasks.unshift({
    id: maxId + 1, text, done: false,
    due: due || 'TBD',
    urgent: priority === 'Urgent',
    client: client || '',
    jobId:  jobId  || '',
  });

  closeModal();
  if (document.getElementById('view-tasks').classList.contains('active')) renderTasks();
  if (document.getElementById('view-dashboard').classList.contains('active')) renderDashboard();
  autoPersist();
  flash('Task added ✓' + (client ? ' — linked to ' + client : ''));
}

function toggleTask(id) {
  const t = tasks.find(x => x.id === id);
  if (!t) return;
  t.done = !t.done;
  renderTasks();
  if (document.getElementById('view-dashboard').classList.contains('active')) renderDashboard();
  autoPersist();
  if (t.done) flash('Task done ✓');
}

function saveNewRecurring() {
  const client  = document.getElementById('nr-client')?.value;
  if (!client)  { flash('⚠️ Select a client'); return; }
  const service = document.getElementById('nr-service')?.value?.trim();
  if (!service) { flash('⚠️ Enter service name'); return; }
  const freq    = document.getElementById('nr-freq')?.value || 'Yearly';
  const dueRaw  = document.getElementById('nr-due')?.value || '';
  const tech    = document.getElementById('nr-tech')?.value || 'Unassigned';
  const value   = parseFloat(document.getElementById('nr-value')?.value) || 0;

  // Convert ISO date to "Mon YYYY" display format
  let next = 'TBD';
  if (dueRaw) {
    const d = new Date(dueRaw + 'T12:00:00');
    const MO = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    next = MO[d.getMonth()] + ' ' + d.getFullYear();
  }

  recurring.push({ client, service, freq, next, value, tech, status:'active' });
  closeModal();
  if (document.getElementById('view-recurring').classList.contains('active')) renderRecurring();
  autoPersist();
  flash('Recurring job added for ' + client + ' ✓');
}

function saveJobEdit(jid) {
  const j = jobs.find(x => x.id === jid);
  if (!j) { closeModal(); return; }

  const prevStatus = j.status;
  j.client = document.getElementById('je-client')?.value || j.client;
  j.type   = document.getElementById('je-type')?.value   || j.type;
  j.name   = document.getElementById('je-name')?.value   || j.name;
  j.addr   = document.getElementById('je-addr')?.value   || j.addr;
  j.date   = document.getElementById('je-date')?.value   || j.date;
  j.time   = document.getElementById('je-time')?.value   || j.time;
  j.tech   = document.getElementById('je-tech')?.value   || j.tech;
  j.status = document.getElementById('je-status')?.value || j.status;
  j.value  = parseFloat(document.getElementById('je-value')?.value) || j.value;
  j.permit = document.getElementById('je-permit')?.value || j.permit;
  j.priority = document.getElementById('je-priority')?.value || j.priority || '🟢 Normal';
  j.duration = parseFloat(document.getElementById('je-duration')?.value) || j.duration || 4;
  j.notes  = document.getElementById('je-notes')?.value  || '';

  // Bidirectional sync if status changed to complete
  if (j.status === 'complete' && prevStatus !== 'complete') {
    syncInvoiceFromJob(j);
  }

  // Sync client record
  const cl = clients.find(c => c.name === j.client);
  if (cl) cl.jobs = jobs.filter(x => x.client === j.client).length;

  closeModal();
  if (document.getElementById('view-jobs').classList.contains('active')) renderJobs();
  if (document.getElementById('view-schedule').classList.contains('active')) renderSchedule();
  if (document.getElementById('view-dashboard').classList.contains('active')) renderDashboard();
  try { syncClientProfile(j.client); } catch(e) {}
  autoPersist();
  flash(jid + ' updated ✓');
}

function deleteJob(jid) {
  if(!confirm(`Delete job ${jid}? This cannot be undone.`)) return;
  const idx = jobs.findIndex(x => x.id === jid);
  if(idx > -1) { jobs.splice(idx, 1); autoPersist(); }
  closeModal();
  try { (window.renderJobs||renderJobs)(); } catch(e) {}
  try { renderDashboard(); } catch(e) {}
  flash(`${jid} deleted`);
}

function duplicateJob(jid) {
  const j = jobs.find(x => x.id === jid);
  if(!j) return;
  const newId = 'JOB-' + String(jobCounter++).padStart(4,'0');
  const today = new Date();
  const fmt = d => d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
  // Deep clone the job
  jobs.unshift({
    ...j,
    id: newId,
    status: 'pending',
    date: fmt(today),
    scheduled: null,
    completed: null,
    notes: (j.notes || '') + '\n[Duplicated from ' + jid + ']'
  });
  autoPersist();
  try { (window.renderJobs||renderJobs)(); } catch(e) {}
  flash(`Duplicated ${jid} as ${newId} ✓`);
}

function openInvoiceEdit(idx) {
  const inv = invoices[idx];
  if(!inv) return;
  document.getElementById('modal-title').textContent = `Edit ${inv.num}`;
  document.getElementById('modal-body').innerHTML = `
    <div class="form-row">
      <div class="form-group"><label class="form-label">Client</label>
        <select class="form-input" id="ie-client">${clients.map(c=>`<option${c.name===inv.client?' selected':''}>${c.name}</option>`).join('')}</select></div>
      <div class="form-group"><label class="form-label">Job</label>
        <input class="form-input" value="${inv.job}"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Issue Date</label><input class="form-input" value="${inv.issued}"></div>
      <div class="form-group"><label class="form-label">Due Date</label><input class="form-input" value="${inv.due}"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Amount ($)</label><input class="form-input" type="number" id="ie-amt" value="${inv.amount}" oninput="calcInvTotal()"></div>
      <div class="form-group"><label class="form-label">Tax Rate (%)</label><input class="form-input" type="number" id="ie-tax" value="0" step="0.1" oninput="calcInvTotal()"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Deposit Received ($)</label><input class="form-input" type="number" id="ie-dep" value="0" oninput="calcInvTotal()"></div>
      <div class="form-group"><label class="form-label">Status</label>
        <select class="form-input" id="ie-status">
          <option${inv.status==='draft'?' selected':''} value="draft">Draft</option>
          <option${inv.status==='pending'?' selected':''} value="pending">Pending</option>
          <option${inv.status==='sent'?' selected':''} value="sent">Sent</option>
          <option${inv.status==='viewed'?' selected':''} value="viewed">Viewed</option>
          <option${(inv.status==='paid'||inv.status==='complete')?' selected':''} value="paid">Paid</option>
          <option${inv.status==='overdue'?' selected':''} value="overdue">Overdue</option>
        </select></div>
    </div>
    <div style="background:var(--surface2);border-radius:10px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center">
      <span style="font-size:13px;font-weight:600;color:var(--text-dim)">Total Due</span>
      <span id="ie-total" style="font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--amber)">$${inv.amount.toLocaleString()}</span>
    </div>
    <div class="form-group" style="margin-top:12px"><label class="form-label">Notes / Payment Terms</label>
      <textarea class="form-input" id="ie-notes" rows="2" placeholder="Net 30, deposit received, etc.">${inv.notes||''}</textarea></div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-del btn-sm" onclick="closeModal();invoices.splice(${idx},1);renderInvoices();flash('Invoice deleted')">Delete</button>
    <span style="flex:1"></span>
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="applyInvEdit(${idx})">Save Changes</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}
function calcInvTotal() {
  const amt = parseFloat(document.getElementById('ie-amt')?.value)||0;
  const tax = parseFloat(document.getElementById('ie-tax')?.value)||0;
  const dep = parseFloat(document.getElementById('ie-dep')?.value)||0;
  const total = amt + (amt*tax/100) - dep;
  const el = document.getElementById('ie-total');
  if(el) el.textContent = '$'+Math.max(total,0).toFixed(2);
}
function applyInvEdit(idx) {
  const inv = invoices[idx];
  if (!inv) return;
  const prevStatus = inv.status;
  const mb = document.getElementById('modal-body');
  const inputs = mb.querySelectorAll('input');
  const selects = mb.querySelectorAll('select');

  // Read client from first select (no ID on it), job from input[1]
  inv.client = document.getElementById('ie-client')?.value || selects[0]?.value || inv.client;
  inv.job    = inputs[1]?.value  || inv.job;
  inv.issued = inputs[2]?.value  || inv.issued;
  inv.due    = inputs[3]?.value  || inv.due;
  const amt  = parseFloat(document.getElementById('ie-amt')?.value) || inv.amount;
  const tax  = parseFloat(document.getElementById('ie-tax')?.value) || 0;
  const dep  = parseFloat(document.getElementById('ie-dep')?.value) || 0;
  inv.amount = Math.max(amt + (amt * tax / 100) - dep, 0);
  inv.status = document.getElementById('ie-status')?.value || inv.status;
  inv.notes  = document.getElementById('ie-notes')?.value  || inv.notes;

  // Normalise 'complete' alias → 'paid'
  if (inv.status === 'complete') inv.status = 'paid';

  // Bidirectional sync: invoice marked paid → complete linked job
  if ((inv.status === 'paid') && prevStatus !== 'paid' && prevStatus !== 'complete') {
    inv.payMethod = inv.payMethod || 'Manual';
    syncJobFromInvoice(inv);
  }

  closeModal();
  autoPersist();
  try { syncClientProfile(inv.client); } catch(e) {}
  renderInvoices();
  if (document.getElementById('view-dashboard').classList.contains('active')) renderDashboard();
  flash(inv.num + ' updated ✓');
}


function makeNiLine(desc='', rate=0, qty=1) {
  const d = document.createElement('div');
  d.className = 'quote-line';
  d.style.cssText = 'display:grid;grid-template-columns:1fr 54px 80px 28px;gap:6px;margin-bottom:6px;align-items:center';
  d.innerHTML = `
    <input class="form-input ql-desc" type="text" placeholder="Labor, materials, service..." value="${desc}" oninput="calcNewInvTotal()">
    <input class="form-input ql-qty" type="number" value="${qty}" min="1" oninput="calcNewInvTotal()" style="text-align:center">
    <input class="form-input ql-rate" type="number" value="${rate}" min="0" oninput="calcNewInvTotal()" style="text-align:right" placeholder="0">
    <button onclick="this.closest('.quote-line').remove();calcNewInvTotal()" style="font-size:16px;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:0;text-align:center">×</button>`;
  return d;
}
function addNiLine() {
  const container = document.getElementById('ni-lines');
  if(container) container.appendChild(makeNiLine());
}
function calcNewInvTotal() {
  let subtotal = 0;
  document.querySelectorAll('#ni-lines .quote-line').forEach(row => {
    const qty  = parseInt(row.querySelector('.ql-qty')?.value)||1;
    const rate = parseFloat(row.querySelector('.ql-rate')?.value)||0;
    subtotal += qty * rate;
  });
  const taxRate = parseFloat(document.getElementById('ni-taxrate')?.value)||0;
  const dep     = parseFloat(document.getElementById('ni-dep')?.value)||0;
  const tax     = subtotal * taxRate / 100;
  const total   = Math.max(subtotal + tax - dep, 0);
  const s=(id,v)=>{const e=document.getElementById(id);if(e)e.textContent=v;};
  s('ni-sub-lbl','$'+subtotal.toFixed(2));
  s('ni-tax-lbl','$'+tax.toFixed(2));
  s('ni-dep-lbl',dep>0?'-$'+dep.toFixed(2):'$0');
  s('ni-total','$'+total.toFixed(2));
}
function closeInvPreview() {
  const p = document.getElementById('inv-preview-panel');
  if(p) p.classList.remove('open');
}
// ============================================================
// FIX 3: GLOBAL SEARCH
// ============================================================
function globalSearch(q) {
  const res = document.getElementById('search-results');
  if (!res) return;
  q = q.trim();
  if (q.length < 2) { res.classList.remove('open'); return; }
  const ql = q.toLowerCase();

  // ── Search all entity types ─────────────────────────────────────
  const hits = { clients:[], jobs:[], invoices:[], permits:[], quotes:[], tasks:[] };

  clients.forEach(c => {
    if (c.name.toLowerCase().includes(ql) || (c.addr||'').toLowerCase().includes(ql) ||
        (c.phone||'').includes(ql) || (c.email||'').toLowerCase().includes(ql))
      hits.clients.push(c);
  });
  jobs.forEach(j => {
    if (j.id.toLowerCase().includes(ql) || j.client.toLowerCase().includes(ql) ||
        (j.name||'').toLowerCase().includes(ql) || (j.addr||'').toLowerCase().includes(ql) ||
        (j.notes||'').toLowerCase().includes(ql))
      hits.jobs.push(j);
  });
  invoices.forEach((inv, i) => {
    if (inv.num.toLowerCase().includes(ql) || inv.client.toLowerCase().includes(ql) ||
        (inv.job||'').toLowerCase().includes(ql))
      hits.invoices.push({...inv, _idx: i});
  });
  permits.forEach(p => {
    if (p.num.toLowerCase().includes(ql) || (p.addr||'').toLowerCase().includes(ql) ||
        (p.type||'').toLowerCase().includes(ql) || (p.client||'').toLowerCase().includes(ql))
      hits.permits.push(p);
  });
  (savedQuotes||[]).forEach(q2 => {
    if ((q2.client||'').toLowerCase().includes(ql) || (q2.jobType||'').toLowerCase().includes(ql))
      hits.quotes.push(q2);
  });
  tasks.forEach(t => {
    if (t.text.toLowerCase().includes(ql) || (t.client||'').toLowerCase().includes(ql))
      hits.tasks.push(t);
  });

  const total = Object.values(hits).reduce((s,a) => s + a.length, 0);
  if (!total) {
    res.innerHTML = '<div class="sr-empty">No results for "' + q + '"</div>';
    res.classList.add('open');
    return;
  }

  const statusColors = {
    scheduled:'var(--blue)', inprogress:'var(--yellow)', complete:'var(--green)',
    pending:'var(--orange)', overdue:'var(--red)', sent:'var(--blue)',
    paid:'var(--green)', viewed:'var(--amber)', accepted:'var(--green)', declined:'var(--danger)'
  };
  let html = '';

  if (hits.clients.length) {
    html += '<div class="sr-section">Clients</div>';
    html += hits.clients.slice(0, 3).map(cl => `
      <div class="sr-item" onclick="closeSearch();openCM('${cl.name}')">
        <div class="sr-icon" style="background:${cl.color}22;color:${cl.color}">${cl.init}</div>
        <div class="sr-main">
          <div class="sr-title">${cl.name}</div>
          <div class="sr-sub">${cl.addr || '—'}</div>
        </div>
        <span style="font-size:11px;color:var(--text-muted)">$${((clientProfiles[cl.name]?.lifetime||cl.spent)||0).toLocaleString()} LTV</span>
      </div>`).join('');
  }

  if (hits.jobs.length) {
    html += '<div class="sr-section">Jobs</div>';
    html += hits.jobs.slice(0, 4).map(j => `
      <div class="sr-item" onclick="closeSearch();openJobEdit('${j.id}')">
        <div class="sr-icon" style="background:var(--surface3)">🔧</div>
        <div class="sr-main">
          <div class="sr-title">${j.id} — ${j.name}</div>
          <div class="sr-sub">${j.client} · ${j.date}</div>
        </div>
        <span class="sr-badge" style="background:${statusColors[j.status]||'var(--surface3)'}22;color:${statusColors[j.status]||'var(--text-dim)'}">${j.status}</span>
      </div>`).join('');
  }

  if (hits.invoices.length) {
    html += '<div class="sr-section">Invoices</div>';
    html += hits.invoices.slice(0, 3).map(inv => `
      <div class="sr-item" onclick="closeSearch();nav('invoices',null);setTimeout(()=>openInvoiceEdit(${inv._idx}),120)">
        <div class="sr-icon" style="background:var(--surface3)">🧾</div>
        <div class="sr-main">
          <div class="sr-title">${inv.num} — ${inv.client}</div>
          <div class="sr-sub">$${inv.amount.toLocaleString()} · due ${inv.due}</div>
        </div>
        <span class="sr-badge" style="background:${statusColors[inv.status]||'var(--surface3)'}22;color:${statusColors[inv.status]||'var(--text-dim)'}">${inv.status}</span>
      </div>`).join('');
  }

  if (hits.permits.length) {
    html += '<div class="sr-section">Permits</div>';
    html += hits.permits.slice(0, 3).map(p => `
      <div class="sr-item" onclick="closeSearch();nav('permits',null);renderPermits()">
        <div class="sr-icon" style="background:var(--surface3)">📋</div>
        <div class="sr-main">
          <div class="sr-title">${p.num}</div>
          <div class="sr-sub">${p.addr} · ${p.type}</div>
        </div>
        <span class="sr-badge" style="background:var(--surface2);color:var(--text-dim)">${p.stage||'—'}</span>
      </div>`).join('');
  }

  if (hits.quotes.length) {
    html += '<div class="sr-section">Quotes</div>';
    html += hits.quotes.slice(0, 3).map(q2 => `
      <div class="sr-item" onclick="closeSearch();nav('quote',null)">
        <div class="sr-icon" style="background:var(--surface3)">📋</div>
        <div class="sr-main">
          <div class="sr-title">${q2.client} — ${q2.jobType}</div>
          <div class="sr-sub">$${(q2.total||0).toLocaleString()}</div>
        </div>
        <span class="sr-badge" style="background:${statusColors[q2.status]||'var(--surface3)'}22;color:${statusColors[q2.status]||'var(--text-dim)'}">${q2.status||'draft'}</span>
      </div>`).join('');
  }

  if (hits.tasks.length) {
    html += '<div class="sr-section">Tasks</div>';
    html += hits.tasks.slice(0, 3).map(t => `
      <div class="sr-item" onclick="closeSearch();nav('tasks',null)">
        <div class="sr-icon" style="background:var(--surface3)">${t.urgent ? '🔴' : '📌'}</div>
        <div class="sr-main">
          <div class="sr-title">${t.text}</div>
          <div class="sr-sub">${t.client || 'No client'} · Due ${t.due}</div>
        </div>
        <span class="sr-badge" style="background:var(--surface2);color:${t.done?'var(--success)':'var(--text-dim)'}">${t.done?'Done':'Open'}</span>
      </div>`).join('');
  }

  res.innerHTML = html;
  res.classList.add('open');
}
function closeSearch() {
  const res = document.getElementById('search-results');
  const inp = document.getElementById('global-search');
  if(res) res.classList.remove('open');
  if(inp) inp.value = '';
}
document.addEventListener('click', e => {
  if(!e.target.closest('.search-wrap')) closeSearch();
  // Close notif panel if clicking outside it and its trigger button
  if(!e.target.closest('.notif-panel') && !e.target.closest('[onclick*="toggleNotif"]')) {
    document.getElementById('notif-panel')?.classList.remove('open');
  }
});

// ============================================================
// FIX 4: SCHEDULE WEEK NAVIGATION
// ============================================================
let scheduleWeekOffset = 0;
const BASE_DATE = new Date(2026, 1, 15); // Feb 15 2026 = Sunday of base week

function getWeekStart() {
  const d = new Date(BASE_DATE);
  d.setDate(d.getDate() + scheduleWeekOffset * 7);
  return d;
}
function shiftWeek(dir) {
  scheduleWeekOffset += dir;
  renderSchedule();
}

function renderSchedule() {
  const ws = getWeekStart();
  const days = [];
  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  for (let i = 0; i < 7; i++) {
    const d = new Date(ws);
    d.setDate(d.getDate() + i);
    days.push(d);
  }
  const fmt = d => MONTHS[d.getMonth()] + ' ' + d.getDate();
  const lbl = document.getElementById('schedule-week-label');
  if (lbl) lbl.textContent = fmt(days[0]) + ' – ' + fmt(days[6]) + ', ' + days[6].getFullYear();

  // ── Build date → jobs map from live array ───────────────
  const TYPE_CLASS = { panel:'ev-panel', ev:'ev-ev', svc:'ev-svc', inst:'ev-inst',
    safe:'ev-svc', outlets:'ev-ev', lighting:'ev-inst' };

  const jobsByDate = {};
  jobs.forEach(j => {
    if (!j.date || j.date === 'TBD' || j.status === 'complete') return;
    const key = j.date.trim();  // stored as "Feb 18" etc.
    if (!jobsByDate[key]) jobsByDate[key] = [];
    jobsByDate[key].push(j);
  });

  // ── Calendar grid ────────────────────────────────────────
  const calEl = document.getElementById('cal-grid');
  if (!calEl) return;
  const today = new Date();

  calEl.innerHTML = days.map(d => {
    const isToday = d.toDateString() === today.toDateString();
    const key = MONTHS[d.getMonth()] + ' ' + d.getDate();
    const dayJobs = jobsByDate[key] || [];
    // Build ISO date string for new-job pre-fill
    const isoDate = d.getFullYear() + '-' +
      String(d.getMonth()+1).padStart(2,'0') + '-' +
      String(d.getDate()).padStart(2,'0');

    return `<div class="cal-cell ${isToday ? 'today' : ''}"
      onclick="scheduleOpenNewJob('${isoDate}', '${key}')"
      style="cursor:pointer">
      <div class="cal-date">${d.getDate()}</div>
      ${dayJobs.map(j => {
        const cls = TYPE_CLASS[j.type] || 'ev-svc';
        const label = j.client.split(' ')[0] + ' — ' + j.name;
        return `<div class="cal-ev ${cls}" title="${j.client}: ${j.name} · ${j.tech}"
          onclick="event.stopPropagation();openJobEdit('${j.id}')" style="cursor:pointer">
          ${label}
        </div>`;
      }).join('')}
      ${dayJobs.length === 0 ? `<div style="font-size:10px;color:var(--text-muted);margin-top:4px;opacity:.5">+ Add</div>` : ''}
    </div>`;
  }).join('');

  // ── Unscheduled panel — from live pending jobs ───────────
  const unEl = document.getElementById('unscheduled');
  if (unEl) {
    const pending = jobs.filter(j => j.status === 'pending' || j.date === 'TBD');
    unEl.innerHTML = pending.length
      ? pending.map(j => `<div class="a-item">
          <div class="a-body">
            <div class="a-title">${j.client}</div>
            <div class="a-sub">${j.name} · $${j.value.toLocaleString()} · ${j.tech}</div>
          </div>
          <button class="btn btn-primary btn-sm" onclick="scheduleJob('${j.id}')">📅 Schedule</button>
        </div>`).join('')
      : '<div style="padding:14px;font-size:13px;color:var(--text-muted);text-align:center">All jobs scheduled ✓</div>';
  }
}

function scheduleOpenNewJob(isoDate, label) {
  // Open new-job modal with date pre-filled
  openModal('new-job');
  setTimeout(() => {
    const dateInput = document.querySelector('#modal-body input[type="date"]');
    if (dateInput) {
      dateInput.value = isoDate;
      dateInput.dispatchEvent(new Event('change'));
    }
    flash('📅 Scheduling for ' + label + ' — fill in the job details');
  }, 80);
}

function scheduleJob(jobId) {
  // Open an inline scheduling modal for an unscheduled job
  const j = jobs.find(x => x.id === jobId);
  if (!j) return;
  document.getElementById('modal-title').textContent = 'Schedule ' + jobId;
  document.getElementById('modal-body').innerHTML = `
    <div style="background:var(--surface2);border-radius:10px;padding:13px 16px;margin-bottom:14px">
      <div style="font-size:14px;font-weight:700">${j.client} — ${j.name}</div>
      <div style="font-size:12px;color:var(--text-dim);margin-top:3px">$${j.value.toLocaleString()} · ${j.tech}</div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Date</label>
        <input class="form-input" type="date" id="sched-date"></div>
      <div class="form-group"><label class="form-label">Start Time</label>
        <input class="form-input" type="time" id="sched-time" value="08:00"></div>
    </div>
    <div class="form-group"><label class="form-label">Assign Tech</label>
      <select class="form-input" id="sched-tech">
        <option value="Mike R.">Mike Rivera (Master)</option>
        <option value="Jess T.">Jess Torres (Journeyman)</option>
      </select>
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="confirmScheduleJob('${jobId}')">📅 Confirm Schedule</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
  // Inject live tech options into sched-tech
  setTimeout(() => {
    const ts = document.getElementById('sched-tech');
    if (ts) {
      // Build option list preserving value="Mike R." style short codes
      const liveNames = [...new Set([...jobs.map(j=>j.tech).filter(Boolean)])];
      const allOpts = [
        {val:'Mike R.',   lbl:'Mike Rivera (Master)'},
        {val:'Jess T.',   lbl:'Jess Torres (Journeyman)'},
        {val:'Unassigned',lbl:'Unassigned'},
        ...liveNames.filter(n=>n!=='Mike R.'&&n!=='Jess T.'&&n!=='Unassigned').map(n=>({val:n,lbl:n})),
      ];
      ts.innerHTML = [...new Map(allOpts.map(o=>[o.val,o])).values()]
        .map(o=>`<option value="${o.val}">${o.lbl}</option>`).join('');
    }
  }, 30);
}

function confirmScheduleJob(jobId) {
  const j = jobs.find(x => x.id === jobId);
  if (!j) return;
  const dateVal  = document.getElementById('sched-date')?.value;
  const timeVal  = document.getElementById('sched-time')?.value || '08:00';
  const techVal  = document.getElementById('sched-tech')?.value;
  if (!dateVal) { flash('⚠️ Pick a date'); return; }
  // Convert YYYY-MM-DD to "Feb 18" format
  const d = new Date(dateVal + 'T12:00:00');
  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  j.date   = MONTHS[d.getMonth()] + ' ' + d.getDate();
  j.time   = timeVal;
  j.tech   = techVal || j.tech;
  j.status = 'scheduled';
  closeModal();
  renderSchedule();
  if (document.getElementById('view-jobs').classList.contains('active')) renderJobs();
  renderDashboard();
  flash(`${jobId} scheduled for ${j.date} at ${j.time} ✓`);
}

// ============================================================
// FIX 5: INVOICE TAX + DEPOSIT — upgrade the new-invoice modal
// ============================================================
// Re-define new-invoice body in mDefs with line items
(function patchInvoiceModal() {
  if(!window.mDefs) return;
  window.mDefs['new-invoice'].body = `
    <div class="form-row" style="margin-bottom:12px">
      <div class="form-group"><label class="form-label">Client</label>
        <select class="form-input" id="ni-client">
          ${['Sarah Mitchell','Carlos Herrera','TK Building Group','Rachel Park','Dave Novak','Linda Zhao','Marcus Webb'].map(n=>`<option>${n}</option>`).join('')}
        </select></div>
      <div class="form-group"><label class="form-label">Linked Job</label>
        <select class="form-input" id="ni-job">
          <option value="">— No linked job —</option>
          ${(window.jobs||[]).map(j=>`<option value="${j.id}">${j.id} — ${j.name}</option>`).join('')}
        </select></div>
    </div>
    <div class="form-row" style="margin-bottom:12px">
      <div class="form-group"><label class="form-label">Payment Terms</label>
        <select class="form-input" id="ni-terms">
          <option value="0">Due on receipt</option><option value="15">Net 15</option>
          <option value="30" selected>Net 30</option><option value="45">Net 45</option><option value="60">Net 60</option>
        </select></div>
      <div class="form-group"><label class="form-label">Tax Rate</label>
        <select class="form-input" id="ni-taxrate" onchange="calcNewInvTotal()">
          <option value="0">0% — No tax</option>
          <option value="6.25">6.25% — Materials tax</option>
        </select></div>
    </div>
    <div class="form-label" style="margin-bottom:6px">Line Items</div>
    <div style="display:grid;grid-template-columns:1fr 54px 80px 28px;gap:6px;margin-bottom:4px;padding:0 2px">
      <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted)">Description</div>
      <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);text-align:center">Qty</div>
      <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);text-align:right">Rate ($)</div><div></div>
    </div>
    <div id="ni-lines" style="margin-bottom:4px"></div>
    <button class="btn btn-ghost btn-sm" onclick="addNiLine()" style="margin-bottom:12px;width:100%">+ Add Line</button>
    <div style="background:var(--surface2);border-radius:10px;padding:13px 16px">
      <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;color:var(--text-dim)"><span>Subtotal</span><span id="ni-sub-lbl">$0.00</span></div>
      <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;color:var(--text-dim)"><span>Tax</span><span id="ni-tax-lbl">$0.00</span></div>
      <div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:8px;color:var(--text-dim)">
        <span>Deposit received</span>
        <div style="display:flex;gap:5px;align-items:center">
          -$<input type="number" id="ni-dep" value="0" min="0" oninput="calcNewInvTotal()" style="width:64px;font-size:12px;padding:2px 5px;background:var(--surface3);border:1px solid var(--border);border-radius:5px;color:var(--text);outline:none;text-align:right">
        </div>
      </div>
      <div style="display:flex;justify-content:space-between;font-size:16px;font-weight:700;border-top:1px solid var(--border);padding-top:8px">
        <span>Amount Due</span><span id="ni-total" style="color:var(--amber);font-family:'JetBrains Mono',monospace">$0.00</span>
      </div>
    </div>
    <div class="form-group" style="margin-top:12px"><label class="form-label">Notes / Payment Instructions</label>
      <textarea class="form-input" id="ni-notes" rows="2" placeholder="Zelle: @ampelectric, Venmo: @ampelectric, or pay link will follow..."></textarea></div>`;
})();

function calcNewInvTotal() {
  const sub = parseFloat(document.getElementById('ni-sub')?.value)||0;
  const taxRate = parseFloat(document.getElementById('ni-taxrate')?.value)||0;
  const dep = parseFloat(document.getElementById('ni-dep')?.value)||0;
  const tax = Math.round(sub * taxRate / 100 * 100)/100;
  const total = Math.max(sub + tax - dep, 0);
  const set = (id, val) => { const el=document.getElementById(id); if(el) el.textContent=val; };
  set('ni-sub-lbl','$'+sub.toFixed(2));
  set('ni-tax-lbl','$'+tax.toFixed(2));
  set('ni-dep-lbl',dep>0?'-$'+dep.toFixed(2):'$0');
  set('ni-total','$'+total.toFixed(2));
}

// Also patch openModal to call calcNewInvTotal after new-invoice renders
function closeModal() {
  // Close modal overlays (display-based)
  ['modal-overlay','client-modal','job-flow-overlay'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) { el.classList.remove('open'); el.style.display = 'none'; }
  });
  // Close slide panels (transform-based — only remove class)
  ['notif-panel','inv-preview-panel'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.classList.remove('open');
  });
  var ob = document.getElementById('onboarding-overlay');
  if (ob) ob.classList.add('hidden');
  try { closeQuickActions(); } catch(e) {}
  try { autoPersist(); } catch(e) {}
}

// closeAllModals — guaranteed full-screen clear, called by ESC and backdrop taps
function closeAllModals() {
  closeModal(); // closeModal now clears everything
  try { closeSearch(); } catch(e) {}
}

// ============================================================
// CLIENT MODAL ACTION FUNCTIONS
// ============================================================

// Open new-invoice modal pre-filled with this client
function cmAddInvoice(clientName) {
  closeModal();
  document.getElementById('client-modal').classList.remove('open');
  setTimeout(() => {
    openModal('new-invoice');
    setTimeout(() => {
      const sel = document.getElementById('ni-client');
      if (sel) {
        sel.value = clientName;
        if (typeof niPopulateJobs === 'function') niPopulateJobs();
      }
    }, 60);
  }, 50);
}

// Add a service schedule item to a client
function cmAddService(clientName) {
  document.getElementById('modal-title').textContent = 'Add Service Item — ' + clientName;
  document.getElementById('modal-body').innerHTML = `
    <div class="form-group">
      <label class="form-label">Service Type</label>
      <select class="form-input" id="cs-type">
        <option>Annual Safety Inspection</option>
        <option>Panel Maintenance</option>
        <option>EV Charger Service</option>
        <option>Outlet/Switch Replacement</option>
        <option>GFCI/AFCI Testing</option>
        <option>Generator Service</option>
        <option>Lighting Upgrade</option>
        <option>Custom Service…</option>
      </select>
    </div>
    <div class="form-group" id="cs-custom-wrap" style="display:none">
      <label class="form-label">Custom Service Name</label>
      <input class="form-input" id="cs-custom" placeholder="Describe the service…">
    </div>
    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Due Date</label>
        <input class="form-input" type="date" id="cs-due" value="${new Date().toISOString().slice(0,10)}">
      </div>
      <div class="form-group">
        <label class="form-label">Priority</label>
        <select class="form-input" id="cs-status">
          <option value="upcoming">Upcoming</option>
          <option value="soon">Due Soon</option>
          <option value="overdue">Overdue / ASAP</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">Notes</label>
      <input class="form-input" id="cs-note" placeholder="Details, equipment specs, access info…">
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="cmSaveService('${clientName}')">Add Service Item</button>`;
  // Show custom field when "Custom Service…" selected
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
  setTimeout(() => {
    const typeEl = document.getElementById('cs-type');
    if (typeEl) typeEl.addEventListener('change', () => {
      const wrap = document.getElementById('cs-custom-wrap');
      if (wrap) wrap.style.display = typeEl.value === 'Custom Service…' ? '' : 'none';
    });
  }, 50);
}

function cmSaveService(clientName) {
  const typeEl = document.getElementById('cs-type');
  let service = typeEl?.value;
  if (service === 'Custom Service…') {
    service = document.getElementById('cs-custom')?.value?.trim();
    if (!service) { flash('⚠️ Enter a service name'); return; }
  }
  const dueRaw = document.getElementById('cs-due')?.value;
  const due = dueRaw ? new Date(dueRaw).toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'}) : 'TBD';
  const status = document.getElementById('cs-status')?.value || 'upcoming';
  const note   = document.getElementById('cs-note')?.value?.trim() || '';
  const item = { service, due, status, note };

  // Save to clientProfiles
  if (!clientProfiles[clientName]) { flash('⚠️ Client not found'); return; }
  if (!clientProfiles[clientName].serviceSchedule) clientProfiles[clientName].serviceSchedule = [];
  clientProfiles[clientName].serviceSchedule.push(item);

  // Also persist to clients[] array
  const cl = clients.find(x => x.name === clientName);
  if (cl) {
    if (!cl.serviceSchedule) cl.serviceSchedule = [];
    cl.serviceSchedule.push(item);
    autoPersist();
  }

  closeModal();
  // Re-render the service tab if modal is still open
  const svcEl = document.getElementById('cm-service-list');
  if (svcEl) openCM(clientName);
  flash('Service item added — ' + service + ' ✓');
}

// Schedule a service item as a job
function cmScheduleService(clientName, serviceName) {
  document.getElementById('client-modal').classList.remove('open');
  setTimeout(() => {
    openModal('new-job');
    setTimeout(() => {
      const typeEl   = document.getElementById('nj-type');
      const nameEl   = document.getElementById('nj-name');
      const clientEl = document.getElementById('nj-client');
      if (clientEl) clientEl.value = clientName;
      if (nameEl) nameEl.value = serviceName;
      if (typeEl) typeEl.value = 'svc';
    }, 80);
  }, 50);
}

// Save site notes for a client
function cmSaveNotes(clientName) {
  const notes = document.getElementById('cm-site-notes')?.value || '';
  if (clientProfiles[clientName]) {
    clientProfiles[clientName].siteNotes = notes;
    clientProfiles[clientName].panelNotes = notes;
  }
  const cl = clients.find(x => x.name === clientName);
  if (cl) { cl.siteNotes = notes; autoPersist(); }
  flash('Site notes saved ✓');
}

// Send a payment reminder from the client modal
function cmSendReminder(clientName) {
  const unpaid = invoices.filter(i => i.client === clientName && i.status !== 'paid' && i.status !== 'complete');
  const inv = unpaid[0];
  if (!inv) { flash('No outstanding invoices for ' + clientName); return; }
  sentLog.unshift({ type:'reminder', to:clientName, channel:'SMS', subject:inv.num + ' — $' + inv.amount.toLocaleString() + ' reminder', time: new Date().toLocaleDateString('en-US',{month:'short',day:'numeric'}) + ', ' + new Date().toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'}), status:'sent' });
  autoPersist();
  flash('Payment reminder sent to ' + clientName + ' ✓');
}

// Remind about a specific invoice from billing tab
function cmRemindInvoice(clientName, invNum) {
  sentLog.unshift({ type:'reminder', to:clientName, channel:'SMS', subject:invNum + ' — payment reminder', time: new Date().toLocaleDateString('en-US',{month:'short',day:'numeric'}), status:'sent' });
  autoPersist();
  flash('Reminder sent for ' + invNum + ' ✓');
}

// Add a tag to a client
function cmAddTag(clientName) {
  const allTags = ['VIP','Referral Source','Key Account','Slow Payer','EV Prospect','Commercial','Residential','Net-30','Design-Conscious','Permit Issue','Contractor','HOA'];
  const existing = (clientProfiles[clientName]?.tags || []);
  const available = allTags.filter(t => !existing.includes(t));
  document.getElementById('modal-title').textContent = 'Add Tag — ' + clientName;
  document.getElementById('modal-body').innerHTML = `
    <div style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 0">
      ${allTags.map(t => `<span onclick="cmApplyTag('${clientName}','${t}',this)"
        style="padding:5px 14px;border-radius:20px;border:1px solid var(--border);cursor:pointer;font-size:13px;
               background:${existing.includes(t)?'var(--amber-light)':'var(--surface2)'};
               color:${existing.includes(t)?'var(--amber)':'var(--text)'};
               font-weight:${existing.includes(t)?'600':'400'}">${t}${existing.includes(t)?' ✓':''}</span>`).join('')}
    </div>
    <div class="form-group" style="margin-top:12px">
      <label class="form-label">Or type a custom tag</label>
      <div style="display:flex;gap:8px">
        <input class="form-input" id="ct-custom" placeholder="Custom tag…" style="flex:1">
        <button class="btn btn-ghost" onclick="cmApplyTag('${clientName}',document.getElementById('ct-custom').value.trim())">Add</button>
      </div>
    </div>`;
  document.getElementById('modal-footer').innerHTML = `<button type="button" class="btn btn-primary" onclick="closeModal();openCM('${clientName}')">Done</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function cmApplyTag(clientName, tag, el) {
  if (!tag) return;
  if (!clientProfiles[clientName]) return;
  if (!clientProfiles[clientName].tags) clientProfiles[clientName].tags = [];
  const idx = clientProfiles[clientName].tags.indexOf(tag);
  if (idx >= 0) {
    clientProfiles[clientName].tags.splice(idx, 1); // toggle off
    if (el) { el.style.background='var(--surface2)'; el.style.color='var(--text)'; el.style.fontWeight='400'; el.textContent=tag; }
    flash('Tag removed: ' + tag);
  } else {
    clientProfiles[clientName].tags.push(tag);
    if (el) { el.style.background='var(--amber-light)'; el.style.color='var(--amber)'; el.style.fontWeight='600'; el.textContent=tag+' ✓'; }
    flash('Tag added: ' + tag + ' ✓');
  }
  const cl = clients.find(x => x.name === clientName);
  if (cl) { cl.tags = clientProfiles[clientName].tags; autoPersist(); }
}

// Copy client referral link to clipboard
function cmCopyReferralLink(clientName) {
  const link = 'https://amp-electric.com/referral/' + clientName.toLowerCase().replace(/\s+/g,'-').replace(/[^a-z0-9-]/g,'');
  if (navigator.clipboard) {
    navigator.clipboard.writeText(link).then(() => flash('Referral link copied ✓')).catch(() => flash('Link: ' + link));
  } else {
    flash('Referral link: ' + link);
  }
}

// Delete a client
function cmDeleteClient(clientName) {
  if (!confirm('⚠️ Delete client "' + clientName + '"?\n\nThis will remove the client and all their data. This cannot be undone.')) return;
  
  // Remove from clients array
  const idx = clients.findIndex(c => c.name === clientName);
  if (idx > -1) clients.splice(idx, 1);
  
  // Remove from clientProfiles
  if (clientProfiles[clientName]) delete clientProfiles[clientName];
  
  // Remove from clientHealth
  if (clientHealth[clientName]) delete clientHealth[clientName];
  
  // Remove from clientSparkData
  if (clientSparkData[clientName]) delete clientSparkData[clientName];
  
  // Remove any jobs for this client
  jobs = jobs.filter(j => j.client !== clientName);
  
  // Remove any invoices for this client
  invoices = invoices.filter(i => i.client !== clientName);
  
  // Remove any permits for this client
  permits = permits.filter(p => p.client !== clientName);
  
  // Close modal
  document.getElementById('client-modal').classList.remove('open');
  document.getElementById('client-modal').style.display = 'none';
  
  // Re-render
  renderClients();
  renderJobs();
  renderInvoices();
  renderPermits();
  persistData();
  
  flash('🗑 Client "' + clientName + '" deleted');
}

// Execute the next action for a client
function cmDoNextAction(clientName) {
  const p = clientProfiles[clientName];
  if (!p?.nextAction) return;
  const act = p.nextAction;
  // Try to route based on action text
  if (act.text?.toLowerCase().includes('invoice') || act.text?.toLowerCase().includes('pay')) {
    cmAddInvoice(clientName);
  } else if (act.text?.toLowerCase().includes('quote') || act.text?.toLowerCase().includes('estimate')) {
    document.getElementById('client-modal').classList.remove('open');
    setTimeout(() => nav('money', document.getElementById('nav-money')), 50);
  } else if (act.text?.toLowerCase().includes('job') || act.text?.toLowerCase().includes('schedule')) {
    cmScheduleService(clientName, act.text.slice(0,60));
  } else if (act.text?.toLowerCase().includes('sms') || act.text?.toLowerCase().includes('call') || act.text?.toLowerCase().includes('follow')) {
    cmSendSMS(clientName);
  } else {
    // Create a task for the action
    tasks.unshift({ id: tasks.reduce((m,t)=>Math.max(m,t.id),0)+1, text: act.text, done: false, due: act.due || 'Soon', urgent: act.urgent || false, client: clientName, jobId: '' });
    autoPersist();
    flash('Task created: ' + act.text.slice(0,40) + ' ✓');
  }
}

// Send SMS compose modal
function cmSendSMS(clientName) {
  const p = clientProfiles[clientName] || {};
  document.getElementById('modal-title').textContent = '📱 SMS — ' + clientName;
  document.getElementById('modal-body').innerHTML = `
    <div style="background:var(--surface2);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:13px">
      <span style="color:var(--text-dim)">To:</span> <strong>${clientName}</strong>
      ${p.phone ? '<span style="color:var(--text-muted);margin-left:8px">' + p.phone + '</span>' : ''}
    </div>
    <div class="form-group">
      <label class="form-label">Message</label>
      <textarea class="form-input" id="sms-body" rows="4" placeholder="Type your message…"></textarea>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:4px">
      ${['Hi ${clientName}, following up on your invoice…','Your job is scheduled for tomorrow…','Quote is ready for your review…'].map(t=>`<span onclick="document.getElementById('sms-body').value='${t}'" style="font-size:11.5px;padding:4px 10px;border-radius:8px;background:var(--surface3);cursor:pointer;border:1px solid var(--border)">${t.slice(0,30)}…</span>`).join('')}
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="cmLogSMS('${clientName}')">📱 Send SMS</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function cmLogSMS(clientName) {
  const body = document.getElementById('sms-body')?.value?.trim();
  if (!body) { flash('⚠️ Enter a message'); return; }
  sentLog.unshift({ type:'sms', to:clientName, channel:'SMS', subject:body.slice(0,60), time: new Date().toLocaleDateString('en-US',{month:'short',day:'numeric'}), status:'sent' });
  autoPersist();
  closeModal();
  flash('📱 SMS sent to ' + clientName + ' ✓');
}

function cmSendEmail(clientName) {
  const p = clientProfiles[clientName] || {};
  document.getElementById('modal-title').textContent = '📧 Email — ' + clientName;
  document.getElementById('modal-body').innerHTML = `
    <div style="background:var(--surface2);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:13px">
      <span style="color:var(--text-dim)">To:</span> <strong>${clientName}</strong>
      ${p.email && p.email!=='—' ? '<span style="color:var(--text-muted);margin-left:8px">' + p.email + '</span>' : ''}
    </div>
    <div class="form-group">
      <label class="form-label">Subject</label>
      <input class="form-input" id="em-subj" placeholder="Subject…" value="Following up from Amp Electric">
    </div>
    <div class="form-group">
      <label class="form-label">Message</label>
      <textarea class="form-input" id="em-body" rows="5" placeholder="Type your message…">Hi ${clientName},

I wanted to follow up regarding your recent service.

Please don't hesitate to reach out with any questions.

Best regards</textarea>
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="cmLogEmail('${clientName}')">📧 Send Email</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function cmLogEmail(clientName) {
  const subj = document.getElementById('em-subj')?.value?.trim() || 'Follow-up';
  const body = document.getElementById('em-body')?.value?.trim();
  if (!body) { flash('⚠️ Enter a message'); return; }
  sentLog.unshift({ type:'email', to:clientName, channel:'Email', subject:subj, time: new Date().toLocaleDateString('en-US',{month:'short',day:'numeric'}), status:'sent' });
  autoPersist();
  closeModal();
  flash('📧 Email sent to ' + clientName + ' ✓');
}

// Call client - opens phone dialer
function cmCallClient(clientName) {
  const cl = clients.find(x => x.name === clientName);
  const p = clientProfiles[clientName] || {};
  const phone = p.phone && p.phone !== '—' ? p.phone : cl?.phone;
  if (!phone || phone === '—') {
    flash('⚠️ No phone number for ' + clientName);
    return;
  }
  const cleanPhone = phone.replace(/[^0-9]/g, '');
  window.location.href = 'tel:' + cleanPhone;
}

// Navigate to client address - opens maps
function cmNavigate(clientName) {
  const cl = clients.find(x => x.name === clientName);
  const p = clientProfiles[clientName] || {};
  const addr = p.addr && p.addr !== '—' ? p.addr : cl?.addr;
  if (!addr || addr === '—') {
    flash('⚠️ No address for ' + clientName);
    return;
  }
  const encodedAddr = encodeURIComponent(addr);
  window.open('https://www.google.com/maps/search/?api=1&query=' + encodedAddr, '_blank');
}

// Add referral source to a client
function cmAddReferralSource(clientName) {
  document.getElementById('modal-title').textContent = 'Add Referral Source — ' + clientName;
  document.getElementById('modal-body').innerHTML = `
    <div class="form-group">
      <label class="form-label">Referred By (client name)</label>
      <select class="form-input" id="ref-source-sel">
        <option value="">— Select client —</option>
        ${clients.filter(c=>c.name!==clientName).map(c=>`<option>${c.name}</option>`).join('')}
      </select>
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="cmSaveReferralSource('${clientName}')">Save</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function cmSaveReferralSource(clientName) {
  const src = document.getElementById('ref-source-sel')?.value;
  if (!src) { flash('⚠️ Select a referral source'); return; }
  if (clientProfiles[clientName]) {
    const ref = clients.find(x=>x.name===src);
    clientProfiles[clientName].referredBy = { name:src, init:(ref?.init||src[0]).toUpperCase(), color:ref?.color||'#888', date:new Date().toLocaleDateString('en-US',{month:'short',year:'numeric'}), ltv:ref?.spent||0 };
  }
  const cl = clients.find(x => x.name === clientName);
  if (cl) cl.referredBy = clientProfiles[clientName]?.referredBy;
  autoPersist();
  closeModal();
  flash('Referral source saved: ' + src + ' ✓');
}

// ============================================================
// UTILITY FUNCTIONS FOR WIRED BUTTONS
// ============================================================

// Save quote as draft
function saveQuoteDraft() {
  const client  = document.getElementById('q-client')?.value;
  const jobType = document.getElementById('q-jobtype')?.value || 'General';
  if (!client) { flash('⚠️ Select a client to save draft'); return; }
  const lines = [];
  let subtotal = 0;
  document.querySelectorAll('.quote-line-row').forEach(row => {
    const desc = row.querySelector('.ql-desc')?.value?.trim();
    const qty  = parseInt(row.querySelector('.ql-qty')?.value) || 1;
    const rate = parseFloat(row.querySelector('.ql-rate')?.value) || 0;
    if (desc || rate) { lines.push({desc:desc||'Item',qty,rate,total:qty*rate}); subtotal += qty*rate; }
  });
  const id = 'Q-' + String(quoteCounter++).padStart(3,'0');
  const today = new Date();
  const expires = new Date(); expires.setDate(expires.getDate()+30);
  const fmt = d => d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
  savedQuotes.unshift({ id, client, jobType, date:fmt(today), expires:fmt(expires), amount:subtotal, status:'draft', lines, notes: document.getElementById('q-notes')?.value || '' });
  autoPersist();
  renderQuotes();
  flash('Draft saved: ' + id + ' (' + client + ') ✓');
}

// Export schedule as CSV download
function exportScheduleCSV() {
  const scheduled = jobs.filter(j => j.status !== 'complete' && j.status !== 'cancelled');
  const rows = [['Job ID','Client','Type','Date','Time','Tech','Address','Value','Status']];
  scheduled.forEach(j => rows.push([j.id, j.client, j.name||j.type, j.date||'', j.time||'', j.tech||'', j.addr||'', j.value||0, j.status]));
  const csv = rows.map(r => r.map(v => '"'+String(v).replace(/"/g,'""')+'"').join(',')).join('\n');
  const blob = new Blob([csv], {type:'text/csv'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'amp-schedule-' + new Date().toISOString().slice(0,10) + '.csv';
  a.click();
  flash('Schedule exported ✓');
}

// Export all jobs as CSV download
function exportJobsCSV() {
  const rows = [['Job ID','Client','Type','Tech','Date','Time','Address','Value','Status','Priority','Notes']];
  jobs.forEach(j => rows.push([j.id, j.client, j.type||'', j.tech||'', j.date||'', j.time||'', j.addr||'', j.value||0, j.status, j.priority||'', (j.notes||'').replace(/"/g,'""')]));
  const csv = rows.map(r => r.map(v => '"'+String(v).replace(/"/g,'""')+'"').join(',')).join('\n');
  const blob = new Blob([csv], {type:'text/csv'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'amp-jobs-' + new Date().toISOString().slice(0,10) + '.csv';
  a.click();
  flash('Jobs exported ✓');
}

// Export all clients as CSV download
function exportClientsCSV() {
  const rows = [['Name','Phone','Email','Address','Type','Notes','First Contact','Total Jobs','Total Spent','Last Job']];
  clients.forEach(c => {
    const clientJobs = jobs.filter(j => j.client === c.name);
    const totalSpent = clientJobs.reduce((sum, j) => sum + (j.value||0), 0);
    const lastJob = clientJobs.length ? clientJobs.sort((a,b) => new Date(b.date||0) - new Date(a.date||0))[0].date : '';
    rows.push([c.name, c.phone||'', c.email||'', c.addr||'', c.type||'', (c.notes||'').replace(/"/g,'""'), c.firstContact||'', clientJobs.length, totalSpent, lastJob]);
  });
  const csv = rows.map(r => r.map(v => '"'+String(v).replace(/"/g,'""')+'"').join(',')).join('\n');
  const blob = new Blob([csv], {type:'text/csv'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'amp-clients-' + new Date().toISOString().slice(0,10) + '.csv';
  a.click();
  flash('Clients exported ✓');
}

// Bulk SMS to today's clients
function bulkSMSToday() {
  const today = new Date().toLocaleDateString('en-US',{month:'short',day:'numeric'});
  const todayJobs = jobs.filter(j => j.date === today || j.date === today.replace(' ','') || (j.date||'').startsWith(today.split(',')[0]));
  const clients_today = [...new Set(todayJobs.map(j=>j.client))];
  if (!clients_today.length) { flash('No jobs scheduled for today'); return; }
  clients_today.forEach(name => {
    sentLog.unshift({ type:'sms', to:name, channel:'SMS', subject:'Your appointment is today — see you soon!', time:today, status:'sent' });
  });
  autoPersist();
  flash('📱 SMS sent to ' + clients_today.length + ' client' + (clients_today.length!==1?'s':'') + ' ✓');
}

// Bulk email reminders for overdue invoices
function bulkEmailReminders() {
  const overdue = invoices.filter(i => i.status === 'overdue' || (i.status !== 'paid' && i.status !== 'complete' && i.status !== 'draft'));
  const notified = [...new Set(overdue.map(i=>i.client))];
  if (!notified.length) { flash('No outstanding invoices to remind'); return; }
  notified.forEach(name => {
    const inv = overdue.find(i=>i.client===name);
    sentLog.unshift({ type:'reminder', to:name, channel:'Email', subject:(inv?.num||'Invoice') + ' — payment reminder', time:new Date().toLocaleDateString('en-US',{month:'short',day:'numeric'}), status:'sent' });
  });
  autoPersist();
  flash('📧 Reminder sent to ' + notified.length + ' client' + (notified.length!==1?'s':'') + ' ✓');
}

// Bulk SMS for overdue AR
function bulkARSMS() {
  const overdue = invoices.filter(i => i.status === 'overdue' || (i.status !== 'paid' && i.status !== 'complete' && i.status !== 'draft'));
  const notified = [...new Set(overdue.map(i=>i.client))];
  if (!notified.length) { flash('No overdue invoices'); return; }
  notified.forEach(name => {
    const inv = overdue.find(i=>i.client===name);
    sentLog.unshift({ type:'pay_link', to:name, channel:'SMS', subject:(inv?.num||'Invoice') + ' — $' + (inv?.amount||0).toLocaleString() + ' overdue', time:new Date().toLocaleDateString('en-US',{month:'short',day:'numeric'}), status:'sent' });
  });
  autoPersist();
  flash('📱 SMS sent to ' + notified.length + ' overdue client' + (notified.length!==1?'s':'') + ' ✓');
}

// Toggle payment method (check, etc.)
function togglePaymentMethod(method, el) {
  const isOn = el.textContent.includes('✓') || el.textContent.includes('Enabled');
  if (isOn) {
    el.textContent = 'Enable';
    flash(method.charAt(0).toUpperCase() + method.slice(1) + ' tracking disabled');
  } else {
    el.textContent = 'Enabled ✓';
    flash(method.charAt(0).toUpperCase() + method.slice(1) + ' tracking enabled ✓');
  }
}

// Remind about a specific quote - opens email with follow-up
function remindQuote(quoteId) {
  const q = savedQuotes.find(x=>x.id===quoteId);
  if (!q) return;
  const followUpText = `Hi ${q.client.split(' ')[0]},\n\nJust checking in on the ${q.jobType} quote we sent over!\n\nTotal: $${q.amount.toLocaleString()}\n\nQuestions? Just reply or give us a call.\n\nReady to move forward? Just reply "YES" and we'll get you scheduled!\n\n- The Amp CRM Team`;
  window.open('mailto:?subject=Follow-up: Your ${q.jobType} Quote - $${q.amount.toLocaleString()}&body='+encodeURIComponent(followUpText));
  sentLog.unshift({ type:'reminder', to:q.client, channel:'Email', subject:q.id + ' — $' + q.amount.toLocaleString() + ' quote follow-up', time:new Date().toLocaleDateString('en-US',{month:'short',day:'numeric'}), status:'sent' });
  autoPersist();
  flash('📧 Follow-up email opened for ' + q.id + ' ✓');
}

// ============================================================
// INVOICE PREVIEW PANEL + PHOTO/DOC UPLOAD
// ============================================================

// Open the invoice preview slide-in panel with real data
function openInvPreview(idx) {
  const inv = invoices[idx];
  if (!inv) return;

  const numEl    = document.getElementById('pvw-num');
  const cjEl     = document.getElementById('pvw-client-job');
  const badgeEl  = document.getElementById('pvw-badge');
  const bodyEl   = document.getElementById('pvw-body');
  const actionsEl= document.getElementById('pvw-actions');

  if (numEl)   numEl.textContent   = inv.num;
  if (cjEl)    cjEl.textContent    = inv.client + (inv.job && inv.job !== '—' ? ' — ' + inv.job : '');
  const statusMap = { paid:'ib-paid', sent:'ib-sent', viewed:'ib-viewed', overdue:'ib-overdue', draft:'ib-draft', complete:'ib-paid' };
  const statusLabel = { paid:'Paid', sent:'Sent', viewed:'Viewed', overdue:'Overdue', draft:'Draft', complete:'Paid' };
  if (badgeEl) {
    badgeEl.className = 'inv-badge ' + (statusMap[inv.status] || 'ib-sent');
    badgeEl.textContent = statusLabel[inv.status] || inv.status;
  }

  // Build body: line items + totals
  const lines = inv.lines || [];
  const subtotal = inv.subtotal || inv.amount || 0;
  const tax = inv.tax || 0;
  const deposit = inv.deposit || 0;
  const total = Math.max(subtotal + tax - deposit, 0);

  if (bodyEl) {
    bodyEl.innerHTML = `
      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-bottom:12px">
        <span>Issued: <strong>${inv.issued || '—'}</strong></span>
        <span>Due: <strong>${inv.due || 'Net 30'}</strong></span>
      </div>
      ${lines.length ? `
        <table style="width:100%;border-collapse:collapse;margin-bottom:12px">
          <thead><tr style="border-bottom:1px solid var(--border)">
            <th style="text-align:left;font-size:11px;color:var(--text-muted);padding:4px 0">Description</th>
            <th style="text-align:center;font-size:11px;color:var(--text-muted)">Qty</th>
            <th style="text-align:right;font-size:11px;color:var(--text-muted)">Rate</th>
            <th style="text-align:right;font-size:11px;color:var(--text-muted)">Total</th>
          </tr></thead>
          <tbody>${lines.map(l=>`<tr style="border-bottom:1px solid var(--border)">
            <td style="font-size:12.5px;padding:6px 0">${l.desc}</td>
            <td style="font-size:12.5px;text-align:center">${l.qty}</td>
            <td style="font-family:'JetBrains Mono',monospace;font-size:12px;text-align:right">$${l.rate.toLocaleString()}</td>
            <td style="font-family:'JetBrains Mono',monospace;font-size:12px;text-align:right">$${(l.total||l.qty*l.rate).toLocaleString()}</td>
          </tr>`).join('')}</tbody>
        </table>` : `<div style="font-size:13px;color:var(--text-dim);margin-bottom:12px">${inv.job || 'Services rendered'}</div>`}
      <div style="border-top:2px solid var(--border);padding-top:10px">
        <div style="display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-dim);margin-bottom:4px">
          <span>Subtotal</span><span>$${subtotal.toLocaleString()}</span>
        </div>
        ${tax > 0 ? `<div style="display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-dim);margin-bottom:4px"><span>Tax</span><span>$${tax.toFixed(2)}</span></div>` : ''}
        ${deposit > 0 ? `<div style="display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-dim);margin-bottom:4px"><span>Deposit</span><span>−$${deposit.toLocaleString()}</span></div>` : ''}
        <div style="display:flex;justify-content:space-between;font-size:16px;font-weight:700;margin-top:6px">
          <span>Total Due</span><span style="color:var(--amber);font-family:'JetBrains Mono',monospace">$${total.toLocaleString()}</span>
        </div>
      </div>
      ${inv.notes ? `<div style="margin-top:12px;padding:10px;background:var(--surface2);border-radius:8px;font-size:12px;color:var(--text-dim)">${inv.notes}</div>` : ''}
      ${inv.payMethod ? `<div style="margin-top:8px;font-size:12px;color:var(--success)">✓ Paid via ${inv.payMethod}</div>` : ''}
    `;
  }

  const isPaid = inv.status === 'paid' || inv.status === 'complete';
  if (actionsEl) {
    actionsEl.innerHTML = `
      <div style="display:flex;gap:8px;flex-wrap:wrap">
        ${!isPaid ? `<button class="btn btn-success btn-sm" onclick="markInvPaid(${idx});closeInvPreview();renderInvoices()">✓ Mark Paid</button>` : ''}
        ${!isPaid ? `<button class="btn btn-primary btn-sm" onclick="openInvSendPayLink(${idx});closeInvPreview()">💳 Pay Link</button>` : ''}
        <button class="btn btn-ghost btn-sm" onclick="openInvoiceEdit(${idx});closeInvPreview()">✏️ Edit</button>
        ${!isPaid ? `<button class="btn btn-warn btn-sm" onclick="sendInvReminder(${idx});closeInvPreview()">📱 Remind</button>` : ''}
        <button class="btn btn-ghost btn-sm" onclick="printInvoice(${idx})">🖨 Print</button>
      </div>
    `;
  }

  const panel = document.getElementById('inv-preview-panel');
  if (panel) panel.classList.add('open');
}

// Send invoice reminder and log it
function sendInvReminder(idx) {
  const inv = invoices[idx];
  if (!inv) return;
  sentLog.unshift({
    type: 'reminder', to: inv.client, channel: 'SMS',
    subject: inv.num + ' — $' + inv.amount.toLocaleString() + ' payment reminder',
    time: new Date().toLocaleDateString('en-US', {month:'short', day:'numeric', hour:'numeric', minute:'2-digit'}),
    status: 'sent'
  });
  autoPersist();
  flash('📱 Reminder sent to ' + inv.client + ' ✓');
}

// Print/download invoice
function printInvoice(idx) {
  const inv = invoices[idx];
  if (!inv) { flash('Invoice not found'); return; }
  // Open a simple print view
  const lines = (inv.lines || []).map(l =>
    `<tr><td>${l.desc}</td><td style="text-align:center">${l.qty}</td><td style="text-align:right">$${(l.rate||0).toLocaleString()}</td><td style="text-align:right">$${(l.total||l.qty*l.rate||0).toLocaleString()}</td></tr>`
  ).join('');
  const total = Math.max((inv.subtotal||inv.amount||0) + (inv.tax||0) - (inv.deposit||0), 0);
  const win = window.open('', '_blank', 'width=700,height=900');
  if (!win) { flash('Allow pop-ups to print invoice'); return; }
  win.document.write(`<!DOCTYPE html><html><head><title>${inv.num}</title>
    <style>body{font-family:Arial,sans-serif;padding:40px;color:#1a1a1a}
    h1{font-size:22px;margin:0}table{width:100%;border-collapse:collapse;margin:20px 0}
    th,td{padding:8px;border-bottom:1px solid #e2e8f0;text-align:left}
    th{font-size:12px;color:#64748b}.total{font-size:18px;font-weight:700}
    @media print{button{display:none}}</style></head>
    <body>
    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px">
      <div><h1>${inv.num}</h1><div style="color:#64748b;font-size:13px;margin-top:4px">Issued: ${inv.issued || '—'} · Due: ${inv.due || 'Net 30'}</div></div>
      <div style="text-align:right"><strong style="font-size:16px">${brand?.bizName||'Amp Electric'}</strong><br><span style="font-size:12px;color:#64748b">${brand?.phone||''}</span></div>
    </div>
    <div style="margin-bottom:20px"><strong>Bill To:</strong><br>${inv.client}</div>
    <table><thead><tr><th>Description</th><th style="text-align:center">Qty</th><th style="text-align:right">Rate</th><th style="text-align:right">Total</th></tr></thead>
    <tbody>${lines || '<tr><td colspan="4">' + (inv.job||'Services') + '</td></tr>'}</tbody></table>
    <div style="text-align:right">
      <div style="font-size:13px;color:#64748b">Subtotal: $${(inv.subtotal||inv.amount||0).toLocaleString()}</div>
      ${(inv.tax||0)>0?`<div style="font-size:13px;color:#64748b">Tax: $${(inv.tax||0).toFixed(2)}</div>`:''}
      <div class="total" style="margin-top:8px;font-size:20px">Total Due: $${total.toLocaleString()}</div>
    </div>
    ${inv.notes?`<div style="margin-top:20px;padding:12px;background:#f8fafc;border-radius:6px;font-size:13px">${inv.notes}</div>`:''}
    <div style="margin-top:30px;text-align:center"><button onclick="window.print()" style="padding:10px 24px;background:#1a56db;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px">🖨 Print</button></div>
    </body></html>`);
  win.document.close();
  flash('Invoice opened for printing ✓');
}

// View a file in the client photos/docs grid
function cmViewFile(clientName, fileName, icon) {
  const isImage = icon === '📷' || /\.(jpg|jpeg|png|gif|webp)$/i.test(fileName);
  document.getElementById('modal-title').textContent = (isImage ? '📷 ' : '📄 ') + fileName;
  document.getElementById('modal-body').innerHTML = `
    <div style="text-align:center;padding:20px">
      <div style="font-size:64px;margin-bottom:16px">${icon}</div>
      <div style="font-size:15px;font-weight:600;margin-bottom:8px">${fileName}</div>
      <div style="font-size:12px;color:var(--text-dim)">Client: ${clientName}</div>
      <div style="margin-top:16px;font-size:12px;color:var(--text-muted);padding:10px;background:var(--surface2);border-radius:8px">
        File preview not available in demo mode. In production, files would open here or download.
      </div>
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Close</button>
    <button class="btn btn-del btn-sm" onclick="cmDeleteFile('${clientName}','${fileName}')">🗑 Remove</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

// Delete a file from client profile
function cmDeleteFile(clientName, fileName) {
  const p = clientProfiles[clientName];
  if (p) {
    p.photos = (p.photos||[]).filter(f=>f!==fileName);
    p.docs   = (p.docs||[]).filter(f=>f!==fileName);
  }
  closeModal();
  openCM(clientName);
  flash(fileName + ' removed ✓');
}

// Real file upload for client photos/docs
function cmUploadFile(clientName, type) {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = type === 'photo' ? 'image/*' : type === 'doc' ? '.pdf,.doc,.docx,.txt,.xls,.xlsx' : '*/*';
  input.onchange = function() {
    const file = input.files[0];
    if (!file) return;
    const p = clientProfiles[clientName];
    if (!p) return;
    const isImage = file.type.startsWith('image/');
    if (isImage) {
      if (!p.photos) p.photos = [];
      p.photos.push(file.name);
    } else {
      if (!p.docs) p.docs = [];
      p.docs.push(file.name);
    }
    // Re-open the client modal to show the updated photos grid
    openCM(clientName);
    // Switch to property tab
    const propTab = document.querySelector('#client-modal .tab:nth-child(5)');
    if (propTab) ctab(propTab, 'ct-property');
    flash((isImage ? '📷 Photo' : '📄 Document') + ' added: ' + file.name + ' ✓');
  };
  input.click();
}


// Also populate site notes when opening client modal property tab
function cmPopulateSiteNotes(name) {
  const el = document.getElementById('cm-site-notes');
  if (!el) return;
  const p = clientProfiles[name];
  const cl = clients.find(x => x.name === name);
  el.value = p?.siteNotes || cl?.siteNotes || p?.panelNotes || '';
}

// ============================================================
// TRIAL MANAGEMENT
// ============================================================
const TRIAL_DAYS = 14;

function checkTrialStatus() {
  // Wait for auth to initialize
  if (typeof auth === 'undefined') {
    setTimeout(checkTrialStatus, 500);
    return;
  }
  
  // Listen for auth changes - hide modal when logged in
  auth.onAuthStateChanged((user) => {
    const modal = document.getElementById('trial-modal');
    if (!modal) return;
    if (user) {
      modal.style.display = 'none';
      return;
    }
    // Not logged in - show trial modal
    showTrialModal();
  });
}

function showTrialModal() {
  const trial = JSON.parse(localStorage.getItem('amp_trial') || 'null');
  const modal = document.getElementById('trial-modal');
  if (!modal) return;
  
  if (!trial) {
    modal.style.display = 'flex';
    return;
  }
  
  const startDate = new Date(trial.startDate);
  const now = new Date();
  const daysPassed = Math.floor((now - startDate) / (1000 * 60 * 60 * 24));
  const daysLeft = TRIAL_DAYS - daysPassed;
  
  if (daysLeft <= 0) {
    modal.innerHTML = `
      <div class="onboarding-card" style="max-width:420px;text-align:center">
        <div style="font-size:48px;margin-bottom:12px">⏰</div>
        <div class="ob-title" style="font-size:24px">Your Trial Has Expired</div>
        <div class="ob-sub">Your 14-day free trial ended. Choose a plan to continue.</div>
        <div style="display:flex;gap:12px;margin:20px 0">
          <div style="flex:1;padding:16px;background:var(--surface2);border-radius:12px">
            <div style="font-size:20px;font-weight:700">Starter</div>
            <div style="font-size:24px;font-weight:700;color:var(--success)">$39<span style="font-size:12px">/mo</span></div>
          </div>
          <div style="flex:1;padding:16px;background:var(--surface2);border-radius:12px;border:2px solid var(--accent)">
            <div style="font-size:20px;font-weight:700">Pro</div>
            <div style="font-size:24px;font-weight:700;color:var(--amber)">$89<span style="font-size:12px">/mo</span></div>
          </div>
          <div style="flex:1;padding:16px;background:var(--surface2);border-radius:12px">
            <div style="font-size:20px;font-weight:700">Elite</div>
            <div style="font-size:24px;font-weight:700;color:var(--blue)">$199<span style="font-size:12px">/mo</span></div>
          </div>
        </div>
        <button class="btn btn-primary" style="width:100%;padding:14px;font-size:16px" onclick="subscribeToPlan('pro')">Subscribe Now</button>
        <div style="margin-top:12px"><a href="#" onclick="localStorage.removeItem('amp_trial');location.reload()" style="font-size:12px;color:var(--text-dim)">Start new trial</a></div>
      </div>
    `;
    modal.style.display = 'flex';
  } else if (daysLeft <= 3) {
    flash(`⚠️ ${daysLeft} days left in your free trial`);
  }
}

function startTrial() {
  const email = document.getElementById('trial-email')?.value?.trim();
  if (!email || !email.includes('@')) {
    flash('Please enter a valid email');
    return;
  }
  
  const trial = {
    email: email,
    startDate: new Date().toISOString(),
    plan: 'trial'
  };
  localStorage.setItem('amp_trial', JSON.stringify(trial));
  
  // Pre-fill email in auth modal and show it
  document.getElementById('auth-email').value = email;
  document.getElementById('trial-modal').style.display = 'none';
  showAuthModal('signup');
  flash('🎉 Enter a password to create your account');
}


function flash(msg) {
  const el = document.getElementById('flash-msg');
  if(!el) return;
  el.textContent = '✓ ' + msg;
  el.style.display = 'block';
  clearTimeout(window._ft);
  window._ft = setTimeout(() => { el.style.display = 'none'; }, 2800);
  autoPersist();
}

// Email sending via SendGrid
const SENDGRID_API_KEY = 'ENXFQ1W1SPYDDMMYFM5DFF4E';

async function sendEmail(to, subject, htmlContent) {
  try {
    const response = await fetch('https://api.sendgrid.com/v3/mail/send', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer ' + SENDGRID_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        personalizations: [{ to: [{ email: to }] }],
        from: { email: 'support@ampercrm.com', name: 'Amp CRM' },
        subject: subject,
        content: [{ type: 'text/html', value: htmlContent }]
      })
    });
    if (response.ok) {
      flash('📧 Email sent to ' + to);
      return true;
    } else {
      console.error('SendGrid error:', response.status, await response.text());
      flash('⚠️ Email failed to send');
      return false;
    }
  } catch(e) {
    console.error('Email error:', e);
    flash('⚠️ Email error: ' + e.message);
    return false;
  }
}

async function sendInvoiceEmail(invoice, clientEmail) {
  const subject = `Invoice ${invoice.num} from ${brand.bizName || 'Amp CRM'}`;
  const html = `
    <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
      <h2 style="color: #C8780A;">⚡ Invoice ${invoice.num}</h2>
      <p>Hi ${invoice.client},</p>
      <p>Your invoice for <strong>$${invoice.amount}</strong> is ready.</p>
      <p><strong>Due:</strong> ${invoice.due || 'Upon receipt'}</p>
      <p><strong>Amount:</strong> $${invoice.amount}</p>
      <p>${brand.bizName || 'Thank you for your business!'}</p>
      <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
      <p style="font-size: 12px; color: #888;">Sent via Amp CRM</p>
    </div>
  `;
  return await sendEmail(clientEmail, subject, html);
}

async function sendReminderEmail(clientEmail, clientName, message) {
  const subject = `Reminder from ${brand.bizName || 'Amp CRM'}`;
  const html = `
    <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
      <h2 style="color: #C8780A;">⚡ Service Reminder</h2>
      <p>Hi ${clientName},</p>
      <p>${message}</p>
      <p>${brand.bizName || 'Thank you!'}</p>
      <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
      <p style="font-size: 12px; color: #888;">Sent via Amp CRM</p>
    </div>
  `;
  return await sendEmail(clientEmail, subject, html);
}

// ============================================================
// STRIPE PAYMENTS
// ============================================================
const stripe = Stripe('pk_test_51T9VJcQlNIeVnRGRvNal08spPnYQ2R0ASZ7M2amF5YCoUS6CaCTWHXUwiwgGangR6e3zHSHtVMLimjBdEVmMw9HA00Jn1FXoVS');
const STRIPE_LINKS = {
  solo: 'https://buy.stripe.com/test_eVq9AV3I47o9cWD0uHdEs02',
  team: 'https://buy.stripe.com/test_5kQ3cxbawdMxbSza5hdEs01',
  business: 'https://buy.stripe.com/test_28E3cxemIfUF5uba5hdEs00'
};

// Subscribe to plan - redirects to Stripe
async function subscribeToPlan(plan) {
  const url = STRIPE_LINKS[plan];
  if (!url) { flash('Invalid plan'); return; }
  
  flash('Opening secure checkout...');
  window.open(url, '_blank');
}

// Create payment link for invoice
async function createInvoicePaymentLink(amount, description, invoiceNum) {
  // Store pending payment
  localStorage.setItem('pending_payment', JSON.stringify({
    invoiceNum: invoiceNum,
    amount: amount,
    description: description,
    timestamp: Date.now()
  }));
  
  flash('Payment link created for ' + invoiceNum);
  return { url: 'https://amp-crm-48545.web.app/amp-crm.html?pay=1&inv=' + invoiceNum };
}

// Function to initiate payment from invoice
async function sendPaymentLink(invoice) {
  const amount = invoice.amount;
  const description = `Invoice ${invoice.num} - ${invoice.client}`;
  
  // Show payment modal
  document.getElementById('modal-title').textContent = 'Send Payment Link';
  document.getElementById('modal-body').innerHTML = `
    <div style="text-align:center;padding:20px 0">
      <div style="font-size:48px;margin-bottom:16px">💳</div>
      <div style="font-size:18px;font-weight:600;margin-bottom:8px">$${amount.toFixed(2)}</div>
      <div style="color:var(--text-muted);margin-bottom:20px">Invoice ${invoice.num}</div>
      <div style="background:var(--surface2);padding:16px;border-radius:12px;text-align:left">
        <div style="font-size:13px;font-weight:600;margin-bottom:8px">Payment Options</div>
        <label style="display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer">
          <input type="radio" name="payMethod" value="card" checked> 💳 Credit Card
        </label>
        <label style="display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer">
          <input type="radio" name="payMethod" value="bank"> 🏦 Bank Transfer
        </label>
      </div>
    </div>
  `;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button type="button" class="btn btn-primary" onclick="confirmPaymentLink('${invoice.num}')">📤 Send Payment Link</button>
  `;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

async function confirmPaymentLink(invoiceNum) {
  const invoice = invoices.find(i => i.num === invoiceNum);
  if (!invoice) return;
  
  const clientEmail = clientProfiles[invoice.client]?.email || clients.find(c => c.name === invoice.client)?.email;
  
  // Create a simple payment link
  const payLink = {
    client: invoice.client,
    inv: invoice.num,
    amount: invoice.amount,
    url: `https://amp-crm-48545.web.app/amp-crm.html?pay=1&inv=${invoice.num}&amt=${invoice.amount}`,
    status: 'sent',
    sent: new Date().toISOString()
  };
  
  payLinks.unshift(payLink);
  
  // Send email with payment link
  if (clientEmail) {
    const subject = `Payment Link - Invoice ${invoice.num}`;
    const html = `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <h2 style="color: #C8780A;">⚡ Pay Your Invoice</h2>
        <p>Hi ${invoice.client},</p>
        <p>Your invoice for <strong>$${invoice.amount}</strong> is ready.</p>
        <div style="margin: 30px 0;">
          <a href="${payLink.url}" style="background:#C8780A;color:white;padding:14px 28px;text-decoration:none;border-radius:8px;font-weight:600;">Pay Now</a>
        </div>
        <p style="font-size:13px;color:#666">Or copy this link: ${payLink.url}</p>
        <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
        <p style="font-size: 12px; color: #888;">Sent via Amp CRM</p>
      </div>
    `;
    await sendEmail(clientEmail, subject, html);
  }
  
  closeModal();
  flash('💳 Payment link sent to ' + invoice.client);
}

// Handle incoming payment links
function handlePaymentLink() {
  const params = new URLSearchParams(window.location.search);
  const invoiceNum = params.get('inv');
  const amount = params.get('amt');
  
  if (invoiceNum && amount) {
    // Show payment form
    showPaymentForm(invoiceNum, parseFloat(amount));
  }
}

function showPaymentForm(invoiceNum, amount) {
  document.body.innerHTML = `
    <div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f5f3ef;font-family:Arial,sans-serif">
      <div style="background:white;padding:40px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.1);max-width:400px;width:100%">
        <div style="text-align:center;margin-bottom:30px">
          <div style="font-size:40px;margin-bottom:12px">⚡</div>
          <div style="font-size:24px;font-weight:700;color:#C8780A">Amp CRM</div>
        </div>
        <div style="text-align:center;margin-bottom:30px">
          <div style="font-size:14px;color:#666">Invoice ${invoiceNum}</div>
          <div style="font-size:36px;font-weight:700">$${amount.toFixed(2)}</div>
        </div>
        <div id="card-element" style="padding:12px;border:1px solid #ddd;border-radius:8px;margin-bottom:20px"></div>
        <button id="pay-btn" style="width:100%;background:#C8780A;color:white;border:none;padding:14px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer">Pay Now</button>
        <div id="payment-message" style="text-align:center;margin-top:16px;color:#666;font-size:14px"></div>
        <div style="text-align:center;margin-top:20px">
          <img src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Stripe_Logo%2C_revised_2016.svg" style="height:20px;opacity:0.5">
        </div>
      </div>
    </div>
  `;
  
  // In production, you'd initialize Stripe Elements here
  const btn = document.getElementById('pay-btn');
  btn.onclick = async () => {
    btn.textContent = 'Processing...';
    btn.disabled = true;
    // Simulate payment (in production, call Stripe API)
    setTimeout(() => {
      document.getElementById('payment-message').innerHTML = '✅ Payment successful! Thank you.';
      document.getElementById('payment-message').style.color = 'green';
    }, 1500);
  };
}


function openModal(type) {
  const d = mDefs[type];
  if(!d) return;
  document.getElementById('modal-title').textContent = d.title;
  document.getElementById('modal-body').innerHTML = d.body;
  document.getElementById('modal-footer').innerHTML = d.footer;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
  setTimeout(() => {
    // ── Repopulate live client dropdowns ──────────────────
    if (type === 'new-job' || type === 'new-permit') {
      const sel = document.getElementById(type === 'new-job' ? 'nj-client' : type === 'new-permit' ? 'np-client' : null)
        || document.querySelector('#modal-body select');
      if (sel && clients.length) {
        const curVal = sel.value;
        const addNew = sel.querySelector('option[value="new"]');
        // Clear all but the placeholder + Add New
        while (sel.options.length > 0) sel.remove(0);
        const blank = document.createElement('option');
        blank.value = ''; blank.textContent = '— Select client —';
        sel.appendChild(blank);
        clients.forEach(cl => {
          const opt = document.createElement('option');
          opt.value = cl.name; opt.textContent = cl.name;
          sel.appendChild(opt);
        });
        if (type === 'new-job') {
          const addOpt = document.createElement('option');
          addOpt.value = 'new'; addOpt.textContent = '+ Add New Client…';
          sel.appendChild(addOpt);
          // Also inject live tech names into nj-tech
          const techSel = document.getElementById('nj-tech');
          if (techSel) {
            const liveNames = [...new Set([
              ...jobs.map(j=>j.tech).filter(Boolean),
              'Mike Rivera (Master)', 'Jess Torres (Journeyman)', 'Unassigned'
            ])];
            const normNames = [...new Set(liveNames)];
            techSel.innerHTML = normNames.map(t=>`<option>${t}</option>`).join('');
          }
        }
        // new-permit: inject live jobs into np-job
        if (type === 'new-permit') {
          const npJob = document.getElementById('np-job');
          if (npJob) {
            npJob.innerHTML = '<option value="">No linked job</option>' +
              jobs.map(j=>`<option value="${j.id}">${j.id} — ${j.name} (${j.client})</option>`).join('');
          }
        }
        if (curVal) sel.value = curVal;
      }
    }
    // ── Init new-invoice modal ───────────────────────────────
    if (type === 'new-invoice') {
      const niClient = document.getElementById('ni-client');
      if (niClient) {
        niClient.innerHTML = '<option value="">— Select client —</option>' +
          clients.map(cl => '<option>' + cl.name + '</option>').join('');
        niClient.onchange = niPopulateJobs;
      }
      // Set today's date + Net 30 due
      const today = new Date().toISOString().slice(0,10);
      const niIss = document.getElementById('ni-issued');
      const niDue = document.getElementById('ni-due');
      if (niIss && !niIss.value) { niIss.value = today; }
      if (niDue && !niDue.value) {
        const d30 = new Date(); d30.setDate(d30.getDate()+30);
        niDue.value = d30.toISOString().slice(0,10);
      }
      // Sync tax to current state
      syncStateTaxDropdowns(pbState || 'IL');
      // Add a blank line item to start
      setTimeout(function(){
        const nl = document.getElementById('ni-lines');
        if (nl && !nl.children.length) niAddLine();
      }, 40);
    }
    // ── Repopulate nr-client in new-recurring ─────────────
    if (type === 'new-recurring') {
      const nrClient = document.getElementById('nr-client');
      if (nrClient) {
        nrClient.innerHTML = '<option value="">— Select client —</option>' +
          clients.map(cl => `<option>${cl.name}</option>`).join('');
      }
      const nrTech = document.getElementById('nr-tech');
      if (nrTech) {
        const names = [...new Set([...jobs.map(j=>j.tech).filter(Boolean),'Mike Rivera','Jess Torres','Unassigned'])];
        nrTech.innerHTML = names.map(n=>`<option>${n}</option>`).join('');
      }
    }
    if (type === 'new-task') {
      // Inject live clients
      const ntClient = document.getElementById('nt-client');
      if (ntClient) {
        ntClient.innerHTML = '<option value="">None</option>' +
          clients.map(cl => `<option>${cl.name}</option>`).join('');
      }
      // Inject open jobs
      const ntJob = document.getElementById('nt-job');
      if (ntJob) {
        const openJobs = jobs.filter(j => j.status !== 'complete' && j.status !== 'cancelled');
        ntJob.innerHTML = '<option value="">No linked job</option>' +
          openJobs.map(j => `<option value="${j.id}">${j.id} — ${j.name} (${j.client})</option>`).join('');
      }
    }
    if (type === 'new-invoice') {
      const niSel = document.getElementById('ni-client');
      if (niSel && clients.length) {
        const cur = niSel.value;
        niSel.innerHTML = clients.map(cl => `<option>${cl.name}</option>`).join('');
        if (cur) niSel.value = cur;
      }
      // Also repopulate ni-job with live jobs
      const niJob = document.getElementById('ni-job');
      if (niJob) {
        niJob.innerHTML = '<option value="">— No linked job —</option>' +
          jobs.map(j => `<option value="${j.id}">${j.id} — ${j.name} (${j.client})</option>`).join('');
      }
      const container = document.getElementById('ni-lines');
      if (container && container.children.length === 0) {
        container.appendChild(makeNiLine('Labor', 0, 1));
        container.appendChild(makeNiLine('Materials', 0, 1));
      }
    }
    if (type === 'new-job') {
      try { populateJobMatSelects(); } catch(e) {}
    }
  }, 50);
}

// Notifications — wire click to navigate
window.renderNotifications = function() {
    const list = document.getElementById('notif-list');
    if(!list) return;
    const navMap = [
      {view:'permits', fn:()=>renderPermits()},
      {view:'permits', fn:()=>renderPermits()},
      {view:'invoices', fn:()=>renderInvoices()},
      {view:'jobs', fn:()=>renderJobs()},
      {view:'jobs', fn:()=>renderJobs()},
      {view:'quote', fn:null},
    ];
    list.innerHTML = notifications.map((n,i) => {
      const nm = navMap[i]||{view:'dashboard',fn:null};
      return `<div class="notif-item ${n.unread?'unread':''}" onclick="toggleNotif();nav('${nm.view}',null);" style="cursor:pointer">
        <div style="font-size:22px;margin-right:10px;flex-shrink:0">${n.icon}</div>
        <div style="flex:1;min-width:0">
          <div style="font-size:13px;font-weight:${n.unread?'600':'400'};color:${n.c||'var(--text)'};">${n.title}</div>
          <div style="font-size:11.5px;color:var(--text-dim);margin-top:2px">${n.detail}</div>
        </div>
      </div>`;
    }).join('');
};


// ============================================================
// FIX 1: QUOTE → JOB CONVERSION
// ============================================================
let savedQuotes = [
  {id:'Q-003',client:'Sarah Mitchell',  jobType:'EV Charging',  date:'Feb 19, 2026',expires:'Mar 5, 2026', amount:580,  status:'draft',   lines:[{name:'EV Charger — Tesla Wall Connector',qty:1,unitPrice:380,total:380},{name:'50A dedicated circuit',qty:1,unitPrice:200,total:200}],notes:'Tesla Model 3 arriving March. Hardwired L2 charger.'},
  {id:'Q-002',client:'TK Building Group',jobType:'Commercial', date:'Feb 14, 2026',expires:'Mar 1, 2026',  amount:14200,status:'accepted',lines:[{name:'Phase 2 — Tenant Improvement (4 spaces)',qty:4,unitPrice:2800,total:11200},{name:'3-phase panel connections',qty:1,unitPrice:1800,total:1800},{name:'Commercial materials allowance',qty:1,unitPrice:1200,total:1200}],notes:'Phase 2 of master contract. PM confirmed budget approved Feb 17.'},
  {id:'Q-001',client:'Carlos Herrera',  jobType:'EV Charging',  date:'Feb 10, 2026',expires:'Feb 24, 2026',amount:950,  status:'viewed',  lines:[{name:'EV Charger — Level 2 (NEMA 14-50)',qty:1,unitPrice:500,total:500},{name:'New 50A circuit from panel',qty:1,unitPrice:280,total:280},{name:'Subpanel assessment',qty:1,unitPrice:170,total:170}],notes:'Client has Tesla. Garage subpanel may need upgrade.'},
  {id:'Q-000',client:'Rachel Park',     jobType:'Safety',       date:'Feb 1, 2026', expires:'Feb 15, 2026', amount:520,  status:'expired', lines:[{name:'Smoke detectors — whole home (4-bed)',qty:1,unitPrice:320,total:320},{name:'CO detector installation',qty:2,unitPrice:100,total:200}],notes:'Annual safety inspection recommended.'},
];
let quoteCounter = 4;

function getQuoteLineItems() {
  const lines = [];
  document.querySelectorAll('#quote-lines .quote-line').forEach(row => {
    const sel = row.querySelector('select');
    const qty = parseInt(row.querySelector('input[type=number]')?.value) || 1;
    const priceEl = row.querySelector('input[readonly]');
    if(sel?.value && sel.value !== '') {
      lines.push({ name: sel.options[sel.selectedIndex]?.text || sel.value, qty, unitPrice: qp[sel.value]||0, total: (qp[sel.value]||0)*qty });
    }
  });
  return lines;
}

function getQuoteClient() {
  const sel = document.querySelector('#view-quote select');
  return sel?.value && sel.value !== 'Select client...' ? sel.value : null;
}

function getQuoteTotal() {
  const el = document.getElementById('quote-grand');
  return parseFloat(el?.textContent?.replace(/[$,]/g,'')) || 0;
}

function sendQuote() {
  const clientSel = document.getElementById('q-client');
  const client = clientSel?.value;
  if(!client) { flash('⚠️ Select a client first'); return; }
  const lines = [];
  let total = 0;
  document.querySelectorAll('#quote-lines .quote-line').forEach(row => {
    const desc = row.querySelector('.ql-desc')?.value?.trim();
    const qty  = parseInt(row.querySelector('.ql-qty')?.value)||1;
    const rateEl = row.querySelector('.ql-total');
    const rate = parseFloat(rateEl?.dataset?.rate)||0;
    if(desc&&rate>0) { lines.push({desc,qty,rate,total:rate*qty}); total+=rate*qty; }
  });
  const taxRate = parseFloat(document.getElementById('q-taxrate')?.value)||0;
  total = total * (1 + taxRate/100);
  if(total===0||lines.length===0) { flash('⚠️ Add at least one line item with a price'); return; }
  const jobType = document.getElementById('q-jobtype')?.value||'General';
  const notes   = document.getElementById('q-notes')?.value||'';
  const id = 'Q-'+String(quoteCounter++).padStart(3,'0');
  const today = new Date();
  const fmtDate = d=>d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
  const expires = new Date(today); expires.setDate(expires.getDate()+14);
  savedQuotes.unshift({ id, client, jobType, amount:Math.round(total), date:fmtDate(today), expires:fmtDate(expires), status:'sent', lines, notes });
  autoPersist();
  renderQuotes();
  // reset builder
  const container = document.getElementById('quote-lines');
  if(container){ container.innerHTML=''; container.appendChild(makeQLine()); }
  if(document.getElementById('q-notes')) document.getElementById('q-notes').value='';
  recalcQ();
  flash('📤 Estimate sent to '+client+' via SMS ✓');
}

function convertQuoteToJob() {
  const client = document.getElementById('q-client')?.value;
  if(!client) { flash('⚠️ Select a client first'); return; }
  let total = 0;
  document.querySelectorAll('#quote-lines .quote-line').forEach(row=>{
    const qty=parseInt(row.querySelector('.ql-qty')?.value)||1;
    const rate=parseFloat(row.querySelector('.ql-total')?.dataset?.rate)||0;
    total+=rate*qty;
  });
  if(total===0) { flash('⚠️ Add line items to convert'); return; }
  const jobType = document.getElementById('q-jobtype')?.value||'General';
  openConvertToJobModal(client, Math.round(total), jobType, []);
}

function convertSavedQuote(client, total, jobType, quoteIdx) {
  // Mark the quote as accepted in savedQuotes so analytics counts it
  if (quoteIdx !== undefined && quoteIdx >= 0 && savedQuotes[quoteIdx]) {
    savedQuotes[quoteIdx].status = 'accepted';
  } else {
    // Find by client+value match (quotes store amount, not total)
    const q = savedQuotes.find(q => q.client === client && q.amount === total);
    if (q) q.status = 'accepted';
  }
  openConvertToJobModal(client, total, jobType, []);
}

function viewQuote(client, total, jobType) {
  // Look up the actual quote to get its status
  const quote = savedQuotes.find(q => q.client === client && q.amount === total);
  const quoteIdx = quote ? savedQuotes.indexOf(quote) : -1;
  const status = quote?.status || 'sent';
  const statusLabels = { draft:'Draft', sent:'Sent', viewed:'Viewed', accepted:'Accepted', expired:'Expired', declined:'Declined' };
  document.getElementById('modal-title').textContent = 'Quote — ' + client;
  document.getElementById('modal-body').innerHTML = `
    <div style="background:var(--surface2);border-radius:10px;padding:14px 16px;margin-bottom:14px">
      <div style="display:flex;justify-content:space-between;margin-bottom:6px">
        <span style="font-size:13px;font-weight:600">${client}</span>
        <span class="status-pill sp">${statusLabels[status] || status}</span>
      </div>
      <div style="font-size:12px;color:var(--text-dim)">Job Type: ${jobType}</div>
    </div>
    <div style="background:var(--surface2);border-radius:10px;padding:14px 16px;margin-bottom:14px">
      <div style="display:flex;justify-content:space-between;font-size:14px;font-weight:700;padding-top:6px;border-top:1px solid var(--border)">
        <span>Quote Total</span>
        <span style="font-family:'JetBrains Mono',monospace;color:var(--amber)">$${total.toLocaleString()}</span>
      </div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px">
      <div style="background:rgba(26,110,60,.08);border:1px solid rgba(26,110,60,.2);border-radius:10px;padding:11px;text-align:center;cursor:pointer" onclick="closeModal();convertSavedQuote('${client}',${total},'${jobType}',${quoteIdx})">
        <div style="font-size:18px;margin-bottom:3px">✅</div><div style="font-size:12px;font-weight:600;color:var(--success)">Client Accepted</div>
        <div style="font-size:11px;color:var(--text-dim);margin-top:2px">Convert to Job</div>
      </div>
      <div style="background:rgba(176,28,28,.08);border:1px solid rgba(176,28,28,.2);border-radius:10px;padding:11px;text-align:center;cursor:pointer" onclick="(function(){if(${quoteIdx}>=0)savedQuotes[${quoteIdx}].status='declined';closeModal();renderQuotes();flash('Quote marked declined');})()">
        <div style="font-size:18px;margin-bottom:3px">❌</div><div style="font-size:12px;font-weight:600;color:var(--danger)">Client Declined</div>
        <div style="font-size:11px;color:var(--text-dim);margin-top:2px">Archive quote</div>
      </div>
    </div>`;
  // Build shareable quote text for follow-up
  const quoteText = `Hi ${client.split(' ')[0]},\n\nThanks for considering us for your ${jobType} project!\n\nHere's your quote summary:\n• Project: ${jobType}\n• Total: $${total.toLocaleString()}\n\nTo move forward, just reply "YES" and we'll schedule your work!\n\n- The Amp CRM Team`;
  
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Close</button>
    <button type="button" class="btn btn-ghost btn-sm" onclick="navigator.clipboard.writeText(quoteText).then(()=>flash('Quote copied to clipboard! 📋'))">📋 Copy Text</button>
    <button type="button" class="btn btn-warn btn-sm" onclick="window.open('mailto:?subject=Your ${jobType} Quote - $${total.toLocaleString()}&body='+encodeURIComponent(quoteText))">📧 Email Quote</button>
    <button type="button" class="btn btn-primary btn-sm" onclick="if(${quoteIdx}>=0)savedQuotes[${quoteIdx}].status='accepted';closeModal();renderQuotes();flash('✓ Quote accepted! Ready to convert to job.');setTimeout(()=>convertSavedQuote('${client}',${total},'${jobType}',${quoteIdx}),800)">✅ Mark Accepted</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function openConvertToJobModal(client, total, jobType, lines) {
  document.getElementById('modal-title').textContent = 'Convert Quote → Job';
  const lineHTML = lines.length
    ? lines.map(l=>`<div style="display:flex;justify-content:space-between;font-size:12px;padding:4px 0"><span>${l.name} ×${l.qty}</span><span style="font-family:'JetBrains Mono',monospace">$${l.total}</span></div>`).join('')
    : `<div style="font-size:12px;color:var(--text-dim);padding:4px 0">Quote total: $${total.toLocaleString()}</div>`;
  document.getElementById('modal-body').innerHTML = `
    <div style="background:rgba(26,110,60,.08);border:1px solid rgba(26,110,60,.2);border-radius:10px;padding:12px 14px;margin-bottom:14px">
      <div style="font-size:12px;color:var(--success);font-weight:600;margin-bottom:6px">✓ Quote accepted — creating job for ${client}</div>
      ${lineHTML}
      <div style="border-top:1px solid var(--border);padding-top:6px;margin-top:6px;display:flex;justify-content:space-between;font-weight:700;font-size:13px">
        <span>Total</span><span style="font-family:'JetBrains Mono',monospace;color:var(--amber)">$${total.toLocaleString()}</span>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Schedule Date</label><input class="form-input" type="date" id="ctj-date" value="${new Date().toISOString().slice(0,10)}"></div>
      <div class="form-group"><label class="form-label">Start Time</label><input class="form-input" type="time" id="ctj-time" value="08:00"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Lead Tech</label>
        <select class="form-input" id="ctj-tech">
          <option>Mike Rivera (Master)</option><option>Jess Torres (Journeyman)</option><option>Unassigned</option>
        </select></div>
      <div class="form-group"><label class="form-label">Priority</label>
        <select class="form-input" id="ctj-pri"><option>🟢 Normal</option><option>🟡 High</option><option>🔴 Emergency</option></select></div>
    </div>
    <div class="form-group"><label class="form-label">Access Notes</label>
      <textarea class="form-input" id="ctj-notes" rows="2" placeholder="Gate code, panel location, parking..."></textarea></div>
    <div class="form-group"><label class="form-label">Notify Client</label>
      <select class="form-input" id="ctj-notif">
        <option>📱 SMS — appointment confirmation</option>
        <option>📧 Email — appointment confirmation</option>
        <option>No notification</option>
      </select></div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="finalizeConvertToJob('${client}',${total},'${jobType}')">✓ Create Job</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
  // Inject live tech names
  setTimeout(() => {
    const ts = document.getElementById('ctj-tech');
    if (ts && jobs.length) {
      const names = [...new Set([...jobs.map(j=>j.tech).filter(Boolean), 'Mike Rivera (Master)', 'Jess Torres (Journeyman)', 'Unassigned'])];
      ts.innerHTML = names.map(n=>`<option>${n}</option>`).join('');
    }
  }, 30);
}

function finalizeConvertToJob(client, total, jobType) {
  const date = document.getElementById('ctj-date')?.value || 'TBD';
  const time = document.getElementById('ctj-time')?.value || '08:00';
  const techRaw = document.getElementById('ctj-tech')?.value || 'Mike Rivera';
  const tech = techRaw.split(' ').slice(0,2).join(' ').replace(' (Master)','').replace(' (Journeyman)','');
  const techShort = tech.split(' ')[0] + ' ' + (tech.split(' ')[1]?.[0]||'') + '.';
  const notif = document.getElementById('ctj-notif')?.value || '';
  const typeMap = {'Service / Repair':'svc','Panel Upgrade':'panel','EV Charger':'ev','New Installation':'inst'};
  const newJob = {
    id: 'J-' + String(jobIdCounter++).padStart(3,'0'),
    client, addr: clientProfiles[client]?.addr || '',
    type: typeMap[jobType] || 'svc',
    name: jobType,
    tech: techShort, date, time, value: total, status: 'scheduled'
  };
  jobs.push(newJob);
  const cl = clients.find(c => c.name === client);
  if(cl) cl.jobs++;
  
  // Also create an invoice for this job (fixes: estimate conversion now creates invoice too)
  const invNum = 'INV-' + String(invoiceCounter++).padStart(4,'0');
  const today = new Date();
  const issuedStr = today.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
  const dueDate = new Date(); dueDate.setDate(dueDate.getDate()+30);
  const dueStr = dueDate.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
  invoices.unshift({
    num: invNum,
    client: client,
    job: newJob.id,
    linkedJobId: newJob.id,
    issued: issuedStr,
    due: dueStr,
    amount: total,
    status: 'draft',
    payMethod: null,
    lines: [],
    subtotal: total,
    tax: 0,
    deposit: 0,
    notes: 'Auto-created from quote for ' + jobType
  });
  
  autoPersist(); // Save new job and invoice to localStorage
  closeModal();
  // navigate to jobs view to see the new job
  nav('jobs', null);
  setTimeout(() => {
    // highlight the new job row
    const rows = document.querySelectorAll('#jobs-table tr');
    rows.forEach(r => { if(r.textContent.includes(newJob.id)) { r.style.background='rgba(200,120,10,.1)'; setTimeout(()=>r.style.background='',2000); }});
  }, 100);
  const notifMsg = notif.includes('SMS') ? ` · SMS confirmation sent to ${client}` : '';
  // Also mark source quote accepted if we can find it
  const srcQ = savedQuotes.find(q => q.client === client && (q.status === 'sent' || q.status === 'pending'));
  if (srcQ) srcQ.status = 'accepted';
  renderDashboard();
  flash('Job ' + newJob.id + ' and Invoice ' + invNum + ' created from quote ✓' + notifMsg);
}

// ============================================================
// FIX 2: JOB FLOW → STATUS UPDATE + LIVE INVOICE
// ============================================================
let activeJobId = null;

// Patch openJobFlow to track the current job
function openJobFlow(jobId) {
  activeJobId = jobId;
  const j = jobs.find(x => x.id === jobId) || jobs[0];
  if (!j) return;

  // ── Header ─────────────────────────────────────────────
  const titleEl = document.getElementById('jf-job-title');
  if (titleEl) titleEl.textContent = j.id + ' — ' + j.name;
  const subEl = document.getElementById('jf-job-sub');
  if (subEl) subEl.textContent = [j.client, j.addr, j.tech].filter(Boolean).join(' · ');

  // ── Stage 0: Arrival checklist — customise last item by permit status ──
  const panelNote = document.getElementById('jf-panel-note');
  if (panelNote) panelNote.textContent = j.addr ? 'Located main panel at ' + j.addr : 'Located main panel';
  const permitNote = document.getElementById('jf-permit-note');
  if (permitNote) {
    const needsPermit = j.permit && j.permit !== 'No permit needed';
    permitNote.textContent = needsPermit
      ? 'Confirmed permit posted (required for this job)'
      : 'Permit check: ' + (j.permit || 'verify on-site');
  }

  // ── Stage 2: Work log — pre-fill description from job name/notes ──
  const descEl = document.getElementById('jf-work-desc');
  if (descEl) descEl.value = j.notes || '';
  const hoursEl = document.getElementById('jf-hours');
  if (hoursEl) hoursEl.value = j.duration || 4;

  // Price summary in work log
  jfRecalcInvoice();

  // ── Stage 3: celebration text ───────────────────────────
  const celebSub = document.querySelector('#jfs-3 .form-group:last-child label');

  // ── Stage 4: celebrate + invoice summary ───────────────
  const celebBox = document.querySelector('#jfs-4 [style*="text-dim"]');
  if (celebBox) celebBox.textContent = j.name + ' — ' + j.client;
  jfBuildInvSummary();

  // ── Reset to stage 0, open overlay ─────────────────────
  photosCaptured = 0;
  const grid = document.getElementById('photo-capture-grid');
  if (grid) {
    grid.innerHTML = `
      <div class="photo-capture-slot" onclick="capturePhoto()">
        <div class="slot-icon">📷</div><div class="slot-label">Before: site</div>
      </div>
      <div class="photo-capture-slot" onclick="capturePhoto()">
        <div class="slot-icon">📷</div><div class="slot-label">Before: panel</div>
      </div>
      <div class="photo-capture-slot" onclick="capturePhoto()">
        <div class="slot-icon">➕</div><div class="slot-label">Add photo</div>
      </div>`;
  }

  jfCurrentStage = 0;
  setJfStage(0);
  var jfo = document.getElementById('job-flow-overlay'); jfo.style.display='flex'; jfo.classList.add('open');
  document.body.style.overflow = 'hidden';
}

function jfRecalcInvoice() {
  const j = jobs.find(x => x.id === activeJobId);
  if (!j) return;
  const hours   = parseFloat(document.getElementById('jf-hours')?.value || 4);
  const matCost = parseFloat(document.getElementById('jf-mat-cost')?.value || 0);
  const laborRate = 95; // default hourly rate — could pull from price book
  const labor   = Math.round(hours * laborRate);
  const total   = j.value > 0 ? j.value : labor + matCost;

  const sumEl = document.getElementById('jf-price-summary');
  if (sumEl) sumEl.innerHTML = `
    <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px">
      <span>${j.name}</span>
      <span style="font-family:'JetBrains Mono',monospace;color:var(--amber)">$${j.value > 0 ? j.value.toLocaleString() : '—'}</span>
    </div>
    ${matCost > 0 ? `<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px">
      <span>Materials</span>
      <span style="font-family:'JetBrains Mono',monospace;color:var(--text-dim)">$${matCost.toLocaleString()}</span>
    </div>` : ''}
    <div style="border-top:1px solid var(--border);padding-top:6px;margin-top:4px;display:flex;justify-content:space-between;font-size:14px;font-weight:700">
      <span>Job Value</span>
      <span style="font-family:'JetBrains Mono',monospace;color:var(--amber)">$${total.toLocaleString()}</span>
    </div>`;

  jfBuildInvSummary();
}

function jfBuildInvSummary() {
  const j = jobs.find(x => x.id === activeJobId);
  if (!j) return;
  const hours   = parseFloat(document.getElementById('jf-hours')?.value || 4);
  const matCost = parseFloat(document.getElementById('jf-mat-cost')?.value || 0);
  const laborRate = 95;
  const labor   = Math.round(hours * laborRate);
  const total   = j.value > 0 ? j.value : labor + matCost;

  const invEl = document.getElementById('jf-inv-summary');
  if (invEl) invEl.innerHTML = `
    <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px">
      <span>${j.name}</span>
      <span style="font-family:'JetBrains Mono',monospace">$${j.value > 0 ? j.value.toLocaleString() : '—'}</span>
    </div>
    <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px">
      <span>Labor (${hours} hrs × $${laborRate}/hr)</span>
      <span style="font-family:'JetBrains Mono',monospace">$${labor.toLocaleString()}</span>
    </div>
    ${matCost > 0 ? `<div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px">
      <span>Materials</span>
      <span style="font-family:'JetBrains Mono',monospace">$${matCost.toLocaleString()}</span>
    </div>` : ''}
    <div style="border-top:1px solid var(--border);padding-top:8px;margin-top:4px;display:flex;justify-content:space-between;font-size:16px;font-weight:700">
      <span>Total</span>
      <span style="font-family:'JetBrains Mono',monospace;color:var(--amber)">$${total.toLocaleString()}</span>
    </div>`;
}

function markJobComplete() {
  // Deduct materials for this job when marked complete
  const jobId = currentFieldJobId || null;
  if (jobId) { try { deductJobMaterials(jobId); } catch(e) {} }

  if (activeJobId) {
    const j = jobs.find(x => x.id === activeJobId);
    if (j) {
      j.status = 'complete';
      j.completedDate = new Date().toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});

      // ── Create invoice if none exists ─────────────────────
      const today = new Date(2026, 1, 22);
      const due   = new Date(2026, 2, 7);  // Net-15 default
      const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
      const fmtDate = d => MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
      const existingInv = invoices.find(inv =>
        (inv.job === j.name || inv.linkedJobId === j.id) &&
        inv.client === j.client && inv.status !== 'complete');
      if (!existingInv) {
        const num = 'INV-' + String(invoiceCounter++).padStart(4, '0');
        const newInv = {
          num, client: j.client, job: j.name, linkedJobId: j.id,
          issued: fmtDate(today), due: fmtDate(due),
          amount: j.value, status: 'pending', payMethod: null,
        };
        invoices.unshift(newInv);
      } else {
        // Existing pending invoice → upgrade to 'sent' (job is done, ready to bill)
        if (existingInv.status === 'pending') existingInv.status = 'sent';
      }

      // ── Sync invoice timeline ─────────────────────────────
      syncInvoiceFromJob(j);
    }
  }

  setJfStage(4);
  if (document.getElementById('view-jobs').classList.contains('active')) renderJobs();
  if (document.getElementById('view-dashboard').classList.contains('active')) renderDashboard();
  flash('✅ Job marked complete — invoice ready to send');
}

function sendJobInvoice(method) {
  const j = jobs.find(x => x.id === activeJobId) || jobs[0];
  const inv = invoices.find(i => i.client === j?.client &&
    (i.linkedJobId === j?.id || i.job === j?.name) && i.status !== 'complete');
  
  // Get client email
  const clientEmail = clientProfiles[j?.client]?.email || clients.find(c => c.name === j?.client)?.email;
  
  closeJobFlow();
  if (inv) {
    inv.status = method === 'sms' ? 'sent' : 'sent';
    const channel = method === 'sms' ? 'SMS' : 'Email';
    // Add pay link record
    payLinks.unshift({
      client: j.client, inv: inv.num, method: channel,
      amount: inv.amount, status: 'sent', sent: 'Just now'
    });
    sentLog.unshift({
      type: method === 'sms' ? 'pay_link' : 'invoice',
      to: j.client, channel,
      subject: inv.num + ' — $' + inv.amount.toLocaleString() + ' (' + (j.name||'Job') + ')',
      time: 'Just now', status: 'sent'
    });
    renderInvoices();
  }
  
  if (method === 'sms') {
    flash('💳 Pay link sent to ' + (j?.client||'client') + ' via SMS ✓');
  } else {
    // Actually send the email
    if (clientEmail) {
      sendInvoiceEmail(inv, clientEmail);
    } else {
      flash('📧 Invoice emailed to ' + (j?.client||'client') + ' ✓');
    }
  }
}

// ============================================================
// FIX 3: INVOICE PDF / PRINT
// ============================================================
function printInvoicePrompt() {
  document.getElementById('modal-title').textContent = 'Print / Export Invoice';
  document.getElementById('modal-body').innerHTML = `
    <p style="font-size:13px;color:var(--text-dim);margin-bottom:14px">Select an invoice to generate a printable PDF.</p>
    <div class="form-group"><label class="form-label">Invoice</label>
      <select class="form-input" id="print-inv-sel">
        ${invoices.map((inv,i)=>`<option value="${i}">${inv.num} — ${inv.client} — $${inv.amount.toLocaleString()} (${inv.status})</option>`).join('')}
      </select></div>
    <div class="form-group"><label class="form-label">Include</label>
      <div style="display:flex;flex-direction:column;gap:8px;margin-top:4px">
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer"><input type="checkbox" checked style="accent-color:var(--amber)"> Business logo & license number</label>
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer"><input type="checkbox" checked style="accent-color:var(--amber)"> Line item breakdown</label>
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer"><input type="checkbox" checked style="accent-color:var(--amber)"> Payment instructions (Stripe / Zelle)</label>
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer"><input type="checkbox" style="accent-color:var(--amber)"> Permit number reference</label>
      </div></div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button type="button" class="btn btn-ghost" onclick="closeModal();flash('PDF saved to Downloads ✓')">⬇ Download PDF</button>
    <button class="btn btn-primary" onclick="openPrintView()">🖨 Print Preview</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}


// ============================================================
// FIX 4: PERMIT STAGE ADVANCEMENT
// ============================================================
function advancePermit(num, targetStage) {
  const p = permits.find(x => x.num === num);
  if(!p) return;
  if(targetStage <= p.stage) {
    flash('⚠️ Already at or past that stage — edit to go back');
    return;
  }
  const stages = ['Applied','Reviewed','Inspection','Approved'];
  const urgMap = {0:'o',1:'y',2:'y',3:'g'};
  p.stage = Math.min(targetStage, 3);
  p.urg = urgMap[p.stage];
  autoPersist();
  renderPermits();
  flash('✅ Permit ' + num + ' advanced to: ' + stages[p.stage]);
}

// Also wire the permit edit save to actually update
function openPermitEdit(num) {
  const p = permits.find(x => x.num === num);
  if(!p) return;
  document.getElementById('modal-title').textContent = 'Edit Permit ' + num;
  const stages = ['Applied','Reviewed','Pending Inspection','Approved'];
  document.getElementById('modal-body').innerHTML = `
    <div class="form-row">
      <div class="form-group"><label class="form-label">Permit #</label><input class="form-input" id="pe-num" value="${p.num}"></div>
      <div class="form-group"><label class="form-label">Address</label><input class="form-input" id="pe-addr" value="${p.addr}"></div>
    </div>
    <div class="form-group"><label class="form-label">Work Type</label><input class="form-input" id="pe-type" value="${p.type}"></div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Expiry Date</label><input class="form-input" id="pe-exp" value="${p.expiry}"></div>
      <div class="form-group"><label class="form-label">Stage</label>
        <select class="form-input" id="pe-stage">
          ${stages.map((s,i)=>`<option value="${i}" ${i===p.stage?'selected':''}>${s}</option>`).join('')}
        </select></div>
    </div>
    <div class="form-group"><label class="form-label">Notes</label>
      <textarea class="form-input" rows="2" placeholder="Inspector comments, re-application notes..."></textarea></div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button class="btn btn-del btn-sm" onclick="if(confirm('Delete this permit?')){permits.splice(permits.findIndex(x=>x.num==='${num}'),1);closeModal();renderPermits();flash('Permit deleted')}">Delete</button>
    <span style="flex:1"></span>
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="savePermitEdit('${num}')">Save Changes</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function savePermitEdit(originalNum) {
  const p = permits.find(x => x.num === originalNum);
  if(!p) { closeModal(); return; }
  const urgMap = {0:'o',1:'y',2:'y',3:'g'};
  p.num = document.getElementById('pe-num')?.value || p.num;
  p.addr = document.getElementById('pe-addr')?.value || p.addr;
  p.type = document.getElementById('pe-type')?.value || p.type;
  p.expiry = document.getElementById('pe-exp')?.value || p.expiry;
  p.stage = parseInt(document.getElementById('pe-stage')?.value) || 0;
  p.urg = urgMap[p.stage];
  closeModal();
  autoPersist();
  renderPermits();
  flash('Permit ' + p.num + ' updated ✓');
}

// ============================================================
// FIX 5: NOTIFICATIONS — mark all read
// ============================================================
function markAllNotifsRead() {
  notifications.forEach(n => n.unread = false);
  renderNotifications();
  // Update the notification badge count
  const badge = document.querySelector('.nav-badge.nb-r');
  if(badge) badge.style.display = 'none';
  flash('All notifications marked as read ✓');
}

// ============================================================
// FIX 6: RECURRING — schedule next + toggle pause/resume + edit
// ============================================================
const freqMonths = { 'Monthly':1, 'Quarterly':3, 'Bi-Yearly':6, 'Yearly':12 };

function scheduleNextRecurring(idx) {
  const r = recurring[idx];
  if (!r || r.status !== 'active') return;

  // Open a confirmation modal with date/tech selection
  document.getElementById('modal-title').textContent = '📅 Schedule: ' + r.service;
  document.getElementById('modal-body').innerHTML = `
    <div style="background:var(--surface2);border-radius:10px;padding:13px 16px;margin-bottom:14px">
      <div style="font-size:14px;font-weight:700">${r.client}</div>
      <div style="font-size:12px;color:var(--text-dim);margin-top:3px">${r.service} · ${r.freq} · $${r.value.toLocaleString()}/visit</div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Scheduled Date</label>
        <input class="form-input" type="date" id="snr-date"></div>
      <div class="form-group"><label class="form-label">Start Time</label>
        <input class="form-input" type="time" id="snr-time" value="08:00"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Assign Tech</label>
        <select class="form-input" id="snr-tech">
          <option value="Mike R.">Mike Rivera</option>
          <option value="Jess T.">Jess Torres</option>
          <option value="Unassigned">Unassigned</option>
        </select></div>
      <div class="form-group"><label class="form-label">Job Value ($)</label>
        <input class="form-input" type="number" id="snr-value" value="${r.value}"></div>
    </div>
    <div style="background:var(--amber-light);border:1px solid rgba(200,120,10,.25);border-radius:9px;padding:10px 14px;font-size:12px;color:var(--text-dim)">
      After scheduling, next due advances to <strong>${advanceRecurringDate(r.next, r.freq)}</strong>
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="confirmScheduleRecurring(${idx})">✓ Create Job</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function advanceRecurringDate(next, freq) {
  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const parts = (next||'').split(' ');
  const mIdx = MONTHS.indexOf(parts[0]);
  if (mIdx < 0) return 'TBD';
  const yr = parseInt(parts[1]) || 2026;
  const addMonths = freqMonths[freq] || 12;
  const nd = new Date(yr, mIdx + addMonths, 1);
  return MONTHS[nd.getMonth()] + ' ' + nd.getFullYear();
}

function confirmScheduleRecurring(idx) {
  const r = recurring[idx];
  if (!r) return;
  const dateVal = document.getElementById('snr-date')?.value;
  const timeVal = document.getElementById('snr-time')?.value || '08:00 AM';
  const tech    = document.getElementById('snr-tech')?.value || 'Mike R.';
  const value   = parseFloat(document.getElementById('snr-value')?.value) || r.value;

  if (!dateVal) { flash('⚠️ Pick a date'); return; }

  const d = new Date(dateVal + 'T12:00:00');
  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const dateLabel = MONTHS[d.getMonth()] + ' ' + d.getDate();

  const newJob = {
    id: 'J-' + String(jobIdCounter++).padStart(3,'0'),
    client: r.client,
    addr: clientProfiles[r.client]?.addr || '',
    type: 'svc', name: r.service,
    tech, date: dateLabel, time: timeVal,
    value, status: 'scheduled',
    recurringIdx: idx,
  };
  jobs.push(newJob);

  // Advance next-due date
  r.next = advanceRecurringDate(r.next, r.freq);

  closeModal();
  renderRecurring();
  if (document.getElementById('view-jobs').classList.contains('active')) renderJobs();
  if (document.getElementById('view-schedule').classList.contains('active')) renderSchedule();
  renderDashboard();
  flash('✅ ' + newJob.id + ' scheduled for ' + r.client + ' on ' + dateLabel + ' · Next due: ' + r.next);
}

function toggleRecurring(idx) {
  const r = recurring[idx];
  if(!r) return;
  r.status = r.status === 'active' ? 'paused' : 'active';
  autoPersist();
  renderRecurring();
  flash(r.client + ' recurring job ' + (r.status === 'active' ? 'resumed ✓' : 'paused'));
}

function editRecurring(idx) {
  const r = recurring[idx];
  if(!r) return;
  document.getElementById('modal-title').textContent = 'Edit Recurring Job';
  document.getElementById('modal-body').innerHTML = `
    <div class="form-group"><label class="form-label">Client</label>
      <select class="form-input" id="er-client">
        ${clients.map(c=>`<option${c.name===r.client?' selected':''}>${c.name}</option>`).join('')}
      </select></div>
    <div class="form-group"><label class="form-label">Service</label>
      <input class="form-input" id="er-service" value="${r.service}"></div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Frequency</label>
        <select class="form-input" id="er-freq">
          ${['Monthly','Quarterly','Bi-Yearly','Yearly'].map(f=>`<option${f===r.freq?' selected':''}>${f}</option>`).join('')}
        </select></div>
      <div class="form-group"><label class="form-label">Next Due</label>
        <input class="form-input" id="er-next" value="${r.next}"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Value ($)</label>
        <input class="form-input" type="number" id="er-val" value="${r.value}"></div>
      <div class="form-group"><label class="form-label">Assigned Tech</label>
        <select class="form-input" id="er-tech">
          <option>Mike Rivera</option><option>Jess Torres</option><option>Unassigned</option>
        </select></div>
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-del btn-sm" onclick="recurring.splice(${idx},1);closeModal();renderRecurring();flash('Recurring job removed')">Remove</button>
    <span style="flex:1"></span>
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="saveRecurringEdit(${idx})">Save</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
  // Inject live tech options and select current
  setTimeout(() => {
    const ts = document.getElementById('er-tech');
    if (ts) {
      const names = [...new Set([...jobs.map(j=>j.tech).filter(Boolean),'Mike Rivera','Jess Torres','Unassigned'])];
      ts.innerHTML = names.map(n=>`<option${n===r.tech?' selected':''}>${n}</option>`).join('');
    }
  }, 30);
}

function saveRecurringEdit(idx) {
  const r = recurring[idx];
  if(!r) { closeModal(); return; }
  r.client = document.getElementById('er-client')?.value || r.client;
  r.service = document.getElementById('er-service')?.value || r.service;
  r.freq = document.getElementById('er-freq')?.value || r.freq;
  r.next = document.getElementById('er-next')?.value || r.next;
  r.value = parseFloat(document.getElementById('er-val')?.value) || r.value;
  closeModal();
  autoPersist();
  renderRecurring();
  flash('Recurring job updated ✓');
}


// ============================================================
// FEATURE 1 — STATE-AWARE PRICE BOOK
// ============================================================
const STATE_DATA = {
  IL: { name:'Illinois',    flag:'🏙️', matTax:6.25, laborTax:0,    laborRange:'$85–$135/hr',  matMult:1.00, laborMult:1.00, note:'IL: Sales tax on materials only. Labor not taxed.' },
  TX: { name:'Texas',       flag:'🤠', matTax:8.25, laborTax:0,    laborRange:'$75–$120/hr',  matMult:0.95, laborMult:0.92, note:'TX: No income tax state. Materials taxed at 8.25%. Strong EV incentives.' },
  CA: { name:'California',  flag:'🌴', matTax:9.50, laborTax:0,    laborRange:'$110–$175/hr', matMult:1.18, laborMult:1.38, note:'CA: Highest labor market. CSLB license required. Many cities add local tax.' },
  FL: { name:'Florida',     flag:'🌊', matTax:7.00, laborTax:0,    laborRange:'$70–$115/hr',  matMult:0.97, laborMult:0.89, note:'FL: No state income tax. Materials taxed. Labor for repair is exempt.' },
  NY: { name:'New York',    flag:'🗽', matTax:8.88, laborTax:0,    laborRange:'$105–$160/hr', matMult:1.15, laborMult:1.35, note:'NY: NYC adds ~4.5% on top of state tax. Union labor rates in metro areas.' },
  OH: { name:'Ohio',        flag:'⭕', matTax:5.75, laborTax:0,    laborRange:'$70–$110/hr',  matMult:0.93, laborMult:0.87, note:'OH: Competitive labor market. Materials taxed; installation labor generally exempt.' },
  PA: { name:'Pennsylvania',flag:'🔔', matTax:6.00, laborTax:0,    laborRange:'$78–$118/hr',  matMult:0.96, laborMult:0.93, note:'PA: Labor for new construction taxed; repair labor generally exempt.' },
  GA: { name:'Georgia',     flag:'🍑', matTax:7.00, laborTax:0,    laborRange:'$68–$108/hr',  matMult:0.92, laborMult:0.86, note:'GA: Growing market, especially Atlanta metro. Materials taxed.' },
  NC: { name:'N. Carolina', flag:'🌲', matTax:4.75, laborTax:0,    laborRange:'$65–$105/hr',  matMult:0.91, laborMult:0.85, note:'NC: Low material tax rate. Labor generally not taxed on repair work.' },
  MI: { name:'Michigan',    flag:'🚗', matTax:6.00, laborTax:0,    laborRange:'$72–$112/hr',  matMult:0.94, laborMult:0.88, note:'MI: Materials taxed. Labor for repair exempt. Detroit area union rates higher.' },
  AZ: { name:'Arizona',     flag:'🌵', matTax:8.37, laborTax:0,    laborRange:'$72–$115/hr',  matMult:0.96, laborMult:0.90, note:'AZ: High EV charger demand due to solar + EV adoption. Materials taxed.' },
  WA: { name:'Washington',  flag:'🌧️', matTax:10.10,laborTax:0,   laborRange:'$95–$150/hr',  matMult:1.12, laborMult:1.22, note:'WA: No income tax but high sales tax on materials. Labor for repair exempt.' },
  CO: { name:'Colorado',    flag:'🏔️', matTax:7.65, laborTax:0,    laborRange:'$80–$125/hr',  matMult:1.01, laborMult:1.05, note:'CO: Strong EV market. Denver adds local tax. Labor for repair generally exempt.' },
  NV: { name:'Nevada',      flag:'🎰', matTax:8.37, laborTax:0,    laborRange:'$75–$118/hr',  matMult:0.98, laborMult:0.95, note:'NV: No income tax. Materials taxed. Las Vegas area strong service demand.' },
  OR: { name:'Oregon',      flag:'🌲', matTax:0,    laborTax:0,    laborRange:'$88–$135/hr',  matMult:1.05, laborMult:1.10, note:'OR: No sales tax at all — materials and labor both exempt. Great for customers.' },
  TN: { name:'Tennessee',   flag:'🎸', matTax:9.25, laborTax:0,    laborRange:'$65–$105/hr',  matMult:0.93, laborMult:0.85, note:'TN: No income tax but high materials tax. Labor for repair exempt.' },
  MO: { name:'Missouri',    flag:'🌉', matTax:8.73, laborTax:0,    laborRange:'$68–$108/hr',  matMult:0.93, laborMult:0.87, note:'MO: Materials taxed with local additions. Labor for repair generally exempt.' },
  WI: { name:'Wisconsin',   flag:'🧀', matTax:5.50, laborTax:0,    laborRange:'$72–$115/hr',  matMult:0.94, laborMult:0.90, note:'WI: Low material tax. Labor for repair exempt. Seasonal demand spikes.' },
  MN: { name:'Minnesota',   flag:'❄️', matTax:8.88, laborTax:0,    laborRange:'$78–$122/hr',  matMult:0.97, laborMult:0.95, note:'MN: Materials and some labor taxed. Check local rules for installation vs repair.' },
  VA: { name:'Virginia',    flag:'🌸', matTax:5.30, laborTax:0,    laborRange:'$75–$118/hr',  matMult:0.96, laborMult:0.93, note:'VA: NoVA/DC area rates much higher. Materials taxed. Labor for repair exempt.' },
  // ── Additional 30 states ──────────────────────────────────────
  AL: { name:'Alabama',       flag:'🌺', matTax:4.00, laborTax:0, laborRange:'$60–$95/hr',  matMult:0.88, laborMult:0.82, note:'AL: Low cost-of-living state. Materials taxed at 4%+local. Labor for repair exempt.' },
  AK: { name:'Alaska',        flag:'🐻', matTax:0,    laborTax:0, laborRange:'$95–$145/hr', matMult:1.30, laborMult:1.40, note:'AK: No state sales tax but very high labor costs due to remote market.' },
  AR: { name:'Arkansas',      flag:'💎', matTax:6.50, laborTax:0, laborRange:'$58–$92/hr',  matMult:0.87, laborMult:0.80, note:'AR: Materials taxed. Labor generally exempt. Lower labor market rates.' },
  CT: { name:'Connecticut',   flag:'⚓', matTax:6.35, laborTax:0, laborRange:'$95–$145/hr', matMult:1.10, laborMult:1.28, note:'CT: High cost state. Labor for new construction may be taxed. Check local rules.' },
  DE: { name:'Delaware',      flag:'🔵', matTax:0,    laborTax:0, laborRange:'$78–$120/hr', matMult:0.97, laborMult:1.00, note:'DE: No sales tax at all. Great for customers on materials. Solid labor market.' },
  HI: { name:'Hawaii',        flag:'🌺', matTax:4.00, laborTax:4.00, laborRange:'$90–$140/hr', matMult:1.45, laborMult:1.20, note:'HI: Both materials and labor subject to GET (general excise tax) at 4%. High material costs.' },
  ID: { name:'Idaho',         flag:'🥔', matTax:6.00, laborTax:0, laborRange:'$65–$100/hr', matMult:0.92, laborMult:0.88, note:'ID: Growing market. Materials taxed. Labor generally exempt. Boise area growing fast.' },
  IN: { name:'Indiana',       flag:'🏎️', matTax:7.00, laborTax:0, laborRange:'$68–$105/hr', matMult:0.93, laborMult:0.87, note:'IN: Materials taxed at 7%. Labor for repair generally exempt. Stable market.' },
  IA: { name:'Iowa',          flag:'🌽', matTax:6.00, laborTax:0, laborRange:'$65–$100/hr', matMult:0.91, laborMult:0.86, note:'IA: Materials taxed. Labor exempt. Rural areas may command premium for travel.' },
  KS: { name:'Kansas',        flag:'🌾', matTax:6.50, laborTax:0, laborRange:'$65–$100/hr', matMult:0.91, laborMult:0.86, note:'KS: Materials and installation labor both potentially taxable. Check local rules.' },
  KY: { name:'Kentucky',      flag:'🐎', matTax:6.00, laborTax:6.00, laborRange:'$65–$100/hr', matMult:0.91, laborMult:0.86, note:'KY: Both materials AND labor taxed at 6%. Factor into all quotes.' },
  LA: { name:'Louisiana',     flag:'🎷', matTax:9.45, laborTax:0, laborRange:'$65–$105/hr', matMult:0.92, laborMult:0.87, note:'LA: High combined state+local tax rate. Materials taxed. Labor for repair exempt.' },
  ME: { name:'Maine',         flag:'🦞', matTax:5.50, laborTax:0, laborRange:'$72–$110/hr', matMult:0.95, laborMult:0.92, note:'ME: Materials taxed at 5.5%. Seasonal demand. Labor generally exempt.' },
  MD: { name:'Maryland',      flag:'🦀', matTax:6.00, laborTax:0, laborRange:'$85–$130/hr', matMult:1.05, laborMult:1.18, note:'MD: DC metro area drives up rates. Materials taxed. Labor for repair exempt.' },
  MA: { name:'Massachusetts',  flag:'🦞', matTax:6.25, laborTax:0, laborRange:'$100–$155/hr', matMult:1.12, laborMult:1.30, note:'MA: High cost market. Boston area premium. Materials taxed. Labor generally exempt.' },
  MS: { name:'Mississippi',   flag:'🌊', matTax:7.00, laborTax:0, laborRange:'$58–$90/hr',  matMult:0.86, laborMult:0.80, note:'MS: Lowest labor market in US. Materials taxed at 7%. Labor for repair exempt.' },
  MT: { name:'Montana',       flag:'🦌', matTax:0,    laborTax:0, laborRange:'$70–$108/hr', matMult:1.05, laborMult:0.98, note:'MT: No sales tax. Higher material costs due to remote supply chains.' },
  NE: { name:'Nebraska',      flag:'🌽', matTax:5.50, laborTax:0, laborRange:'$65–$100/hr', matMult:0.92, laborMult:0.88, note:'NE: Materials taxed. Labor for repair generally exempt. Stable market.' },
  NH: { name:'New Hampshire', flag:'🍁', matTax:0,    laborTax:0, laborRange:'$80–$125/hr', matMult:1.05, laborMult:1.08, note:'NH: No sales tax. Strong market especially near Boston. Higher labor costs.' },
  NJ: { name:'New Jersey',    flag:'🗽', matTax:6.63, laborTax:0, laborRange:'$95–$150/hr', matMult:1.12, laborMult:1.30, note:'NJ: NYC metro market. High labor rates. Some construction labor is taxed.' },
  NM: { name:'New Mexico',    flag:'🌵', matTax:7.72, laborTax:0, laborRange:'$65–$100/hr', matMult:0.93, laborMult:0.88, note:'NM: High effective tax rate with local additions. Labor for repair exempt.' },
  ND: { name:'North Dakota',  flag:'🦅', matTax:5.00, laborTax:0, laborRange:'$65–$100/hr', matMult:0.93, laborMult:0.88, note:'ND: Materials taxed. Energy sector drives demand. Labor for repair exempt.' },
  OK: { name:'Oklahoma',      flag:'🤠', matTax:8.99, laborTax:0, laborRange:'$65–$100/hr', matMult:0.92, laborMult:0.87, note:'OK: High combined local tax rate. Materials taxed. Labor for repair exempt.' },
  RI: { name:'Rhode Island',  flag:'⚓', matTax:7.00, laborTax:0, laborRange:'$85–$130/hr', matMult:1.05, laborMult:1.15, note:'RI: Materials taxed at 7%. Higher labor due to New England market. Labor exempt.' },
  SC: { name:'South Carolina', flag:'🌴', matTax:6.00, laborTax:0, laborRange:'$65–$102/hr', matMult:0.91, laborMult:0.87, note:'SC: Materials taxed. Growing coastal market. Labor for repair generally exempt.' },
  SD: { name:'South Dakota',  flag:'🦅', matTax:4.50, laborTax:4.50, laborRange:'$62–$98/hr',  matMult:0.90, laborMult:0.85, note:'SD: Both materials AND labor taxed. No state income tax. Factor into all quotes.' },
  UT: { name:'Utah',          flag:'🏔️', matTax:7.19, laborTax:0, laborRange:'$72–$115/hr', matMult:0.98, laborMult:0.97, note:'UT: Salt Lake area growing fast. Materials taxed. Labor for repair exempt.' },
  VT: { name:'Vermont',       flag:'🍁', matTax:6.00, laborTax:0, laborRange:'$75–$118/hr', matMult:1.02, laborMult:1.05, note:'VT: Materials taxed. Seasonal market. Higher costs in resort areas.' },
  WV: { name:'West Virginia', flag:'⛰️', matTax:6.00, laborTax:0, laborRange:'$62–$98/hr',  matMult:0.90, laborMult:0.85, note:'WV: Materials taxed. Lower labor market. Energy sector work available.' },
  WY: { name:'Wyoming',       flag:'🦅', matTax:4.00, laborTax:0, laborRange:'$70–$108/hr', matMult:0.97, laborMult:0.93, note:'WY: Low tax state. No income tax. Energy sector drives some demand.' },
};

let pbState = 'IL';
let pbPriceMode = 'customer'; // customer | cost | margin


// ── Invoice modal helpers ─────────────────────────────────────────
function niAddLine(desc, rate, qty) {
  const container = document.getElementById('ni-lines');
  if (!container) return;
  const d = document.createElement('div');
  d.className = 'quote-line';
  d.style.cssText = 'display:grid;grid-template-columns:1fr 60px 84px 28px;gap:6px;margin-bottom:6px;align-items:center';
  d.innerHTML =
    '<input class="form-input ql-desc" type="text" placeholder="Description..." value="' + (desc||'') + '" oninput="calcNewInvTotal()" style="font-size:13px">' +
    '<input class="form-input ql-qty" type="number" min="1" value="' + (qty||1) + '" oninput="calcNewInvTotal()" style="font-size:13px;text-align:center">' +
    '<input class="form-input ql-rate" type="number" min="0" step="0.01" value="' + (rate||'') + '" placeholder="$0" oninput="calcNewInvTotal()" style="font-size:13px">' +
    '<button class="inline-btn" style="font-size:18px" type="button" onclick="this.closest(\x27.quote-line\x27).remove();calcNewInvTotal()">×</button>';
  container.appendChild(d);
  calcNewInvTotal();
}

function calcNewInvTotal() {
  let subtotal = 0;
  document.querySelectorAll('#ni-lines .quote-line').forEach(row => {
    const qty  = parseInt(row.querySelector('.ql-qty')?.value)  || 1;
    const rate = parseFloat(row.querySelector('.ql-rate')?.value) || 0;
    subtotal += qty * rate;
  });
  const taxRate = parseFloat(document.getElementById('ni-taxrate')?.value) || 0;
  const tax   = subtotal * taxRate / 100;
  const grand = subtotal + tax;
  const setEl = (id, v) => { const e = document.getElementById(id); if(e) e.textContent = v; };
  setEl('ni-subtotal', '$' + subtotal.toLocaleString(undefined, {minimumFractionDigits:2,maximumFractionDigits:2}));
  setEl('ni-taxamt',   '$' + tax.toLocaleString(undefined,      {minimumFractionDigits:2,maximumFractionDigits:2}));
  setEl('ni-grand',    '$' + grand.toLocaleString(undefined,    {minimumFractionDigits:2,maximumFractionDigits:2}));
}

function niApplyTerms() {
  const terms = parseInt(document.getElementById('ni-terms')?.value) || 0;
  const issuedEl = document.getElementById('ni-issued');
  const dueEl    = document.getElementById('ni-due');
  if (!issuedEl || !dueEl) return;
  const base = issuedEl.value ? new Date(issuedEl.value) : new Date();
  if (!issuedEl.value) issuedEl.value = base.toISOString().slice(0,10);
  const due = new Date(base);
  due.setDate(due.getDate() + terms);
  dueEl.value = due.toISOString().slice(0,10);
}

function niPopulateJobs() {
  const clientSel = document.getElementById('ni-client');
  const jobSel    = document.getElementById('ni-job');
  if (!clientSel || !jobSel) return;
  const name = clientSel.value;
  const clientJobs = jobs.filter(j => j.client === name && j.status !== 'complete');
  jobSel.innerHTML = '<option value="">No linked job</option>' +
    clientJobs.map(j => '<option value="' + j.id + '">' + j.id + ' — ' + j.name + '</option>').join('');
}

function niPrefillFromJob() {
  const jid = document.getElementById('ni-job')?.value;
  if (!jid) return;
  const job = jobs.find(j => j.id === jid);
  if (!job) return;
  // Pre-populate a line item from the job
  const container = document.getElementById('ni-lines');
  if (container && !container.children.length && job.value > 0) {
    niAddLine(job.name, job.value, 1);
  }
}

function setPbState(stateCode) {
  pbState = stateCode;
  const s = STATE_DATA[stateCode];
  if(!s) return;
  document.getElementById('pb-state-flag').textContent = s.flag;
  document.getElementById('pb-tax-badge').textContent = s.matTax > 0
    ? `📦 Materials tax: ${s.matTax}%`
    : '📦 No sales tax';
  document.getElementById('pb-labor-badge').textContent = `⚡ Labor rate: ${s.laborRange}`;
  document.getElementById('pb-state-note').textContent = s.note;
  renderPb(pbCat);
  // Sync tax rate to quote builder and invoice modal
  syncStateTaxDropdowns(stateCode);
}

function syncStateTaxDropdowns(stateCode) {
  const s = STATE_DATA[stateCode];
  if (!s) return;
  const stateName = s.name;
  const matTax = s.matTax;
  const laborTax = s.laborTax || 0;
  // Build options: always include 0%, state mat rate, state labor rate if nonzero
  const opts = [
    { val: 0,        label: `0% — No tax` },
    { val: matTax,   label: `${matTax}% — ${stateName} materials tax` },
  ];
  if (laborTax > 0) opts.push({ val: laborTax, label: `${laborTax}% — ${stateName} labor tax` });
  // Add Chicago local rate only if IL
  if (stateCode === 'IL') opts.push({ val: 10.25, label: '10.25% — Chicago combined' });
  const html = opts.map(o => `<option value="${o.val}">${o.label}</option>`).join('');
  // Update quote builder tax dropdown
  const qTax = document.getElementById('q-taxrate');
  if (qTax) {
    const cur = qTax.value;
    qTax.innerHTML = html;
    // Set to state mat tax as default
    qTax.value = String(matTax) || '0';
    if (typeof recalcQ === 'function') recalcQ();
  }
  // Update invoice tax dropdown
  const niTax = document.getElementById('ni-taxrate');
  if (niTax) {
    niTax.innerHTML = html;
    niTax.value = String(matTax) || '0';
    if (typeof calcNewInvTotal === 'function') calcNewInvTotal();
  }
  // Also sync invoice builder tax in client modal (if open)
  const ibTax = document.getElementById('ib-taxrate');
  if (ibTax) { ibTax.innerHTML = html; ibTax.value = String(matTax) || '0'; }
}

function setPbPriceMode(mode, el) {
  pbPriceMode = mode;
  document.querySelectorAll('#pb-state-bar .state-pill').forEach(p => p.classList.remove('active'));
  el.classList.add('active');
  renderPb(pbCat);
}

function pbItemTax(item) {
  const s = STATE_DATA[pbState] || STATE_DATA['IL'];
  return Math.round(item.mat * s.matMult * (s.matTax/100) * 100) / 100;
}

function pbItemTotal(item) {
  const s = STATE_DATA[pbState] || STATE_DATA['IL'];
  const labor = Math.round(item.labor * s.laborMult * 100) / 100;
  const mat = Math.round(item.mat * s.matMult * 100) / 100;
  const tax = Math.round(mat * (s.matTax/100) * 100) / 100;
  if(pbPriceMode === 'cost') return labor + mat;
  return labor + mat + tax;
}

function pbStateAdjusted(item) {
  const s = STATE_DATA[pbState] || STATE_DATA['IL'];
  return {
    labor: Math.round(item.labor * s.laborMult),
    mat:   Math.round(item.mat * s.matMult),
    tax:   Math.round(item.mat * s.matMult * (s.matTax/100)),
    total: Math.round((item.labor * s.laborMult) + (item.mat * s.matMult) + (item.mat * s.matMult * (s.matTax/100)))
  };
}

// Override renderPb to show state-adjusted prices
function renderPb(cat='all'){
  pbCat=cat;
  const rows=cat==='all'?pb:pb.filter(p=>p.cat===cat);
  const s = STATE_DATA[pbState] || STATE_DATA['IL'];
  const modeLabel = pbPriceMode === 'cost' ? ' (cost)' : pbPriceMode === 'margin' ? '' : '';

  document.getElementById('pb-rows').innerHTML=rows.map(r=>{
    const adj = pbStateAdjusted(r);
    const margin = adj.total > 0 ? Math.round(((adj.total - r.mat - r.labor*0.6) / adj.total)*100) : 0;

    // Custom / Other row — show as open-ended entry
    if(r.custom) return `
      <div class="pb-row" id="pbrow-${r.id}" style="background:var(--surface2);border-top:1px solid var(--border)">
        <div>
          <div class="pb-nm" style="color:var(--amber);font-weight:600">+ Custom / Unlisted Work</div>
          <div style="font-size:11px;color:var(--text-muted);margin-top:2px">Enter description + pricing below when adding to an estimate</div>
        </div>
        <div class="pb-v" style="color:var(--text-muted)">—</div>
        <div class="pb-v" style="color:var(--text-muted)">—</div>
        <div class="pb-v" style="color:var(--text-muted)">—</div>
        <div class="pb-tot" style="color:var(--text-muted)">Variable</div>
        <div style="display:flex;justify-content:flex-end"><button class="btn btn-ghost btn-sm" onclick="openModal('add-price')" style="font-size:11px">+ Add Line</button></div>
      </div>`;

    if(pbEditId===r.id) return `
      <div class="pb-row editing" id="pbrow-${r.id}">
        <input class="pb-ei" id="pb-n-${r.id}" value="${r.name}" style="font-size:13px">
        <input class="pb-ei" id="pb-l-${r.id}" value="${r.labor}" type="number" oninput="pbCalc(${r.id})" style="text-align:right">
        <input class="pb-ei" id="pb-m-${r.id}" value="${r.mat}" type="number" oninput="pbCalc(${r.id})" style="text-align:right">
        <div class="pb-v" id="pb-tax-${r.id}" style="text-align:right;color:var(--blue)">$${adj.tax}</div>
        <div class="pb-tot" id="pb-t-${r.id}">$${adj.total}</div>
        <div style="display:flex;gap:4px;justify-content:flex-end"><button class="btn btn-save" onclick="pbSave(${r.id})">✓ Save</button><button class="btn btn-del" onclick="pbDel(${r.id})">🗑</button></div>
      </div>`;

    if(pbPriceMode === 'margin') return `
      <div class="pb-row" id="pbrow-${r.id}">
        <div class="pb-nm">${r.name}</div>
        <div class="pb-v">$${adj.labor}</div>
        <div class="pb-v">$${adj.mat}</div>
        <div class="pb-state-col">$${adj.tax}</div>
        <div class="pb-tot">$${adj.total}</div>
        <div style="display:flex;align-items:center;justify-content:flex-end;gap:6px">
          <span style="font-size:11px;padding:2px 8px;border-radius:8px;font-weight:600;background:${margin>=55?'rgba(26,110,60,.12)':margin>=40?'rgba(200,120,10,.12)':'rgba(176,28,28,.12)'};color:${margin>=55?'var(--green)':margin>=40?'var(--yellow)':'var(--red)'}">${margin}%</span>
          <button class="btn btn-edit" onclick="pbEdit(${r.id})">✏️</button>
        </div>
      </div>`;

    return `
      <div class="pb-row" id="pbrow-${r.id}">
        <div class="pb-nm">${r.name}${s.matTax===0&&r.mat>0?'<span style="font-size:10px;color:var(--success);margin-left:6px">no tax</span>':''}</div>
        <div class="pb-v">$${adj.labor}</div>
        <div class="pb-v">$${adj.mat}</div>
        <div class="pb-state-col">${adj.tax>0?'$'+adj.tax:'—'}</div>
        <div class="pb-tot">$${adj.total}</div>
        <div style="display:flex;justify-content:flex-end"><button class="btn btn-edit" onclick="pbEdit(${r.id})">✏️ Edit</button></div>
      </div>`;
  }).join('');
}

function pbCalc(id){
  const l=parseFloat(document.getElementById(`pb-l-${id}`).value)||0;
  const m=parseFloat(document.getElementById(`pb-m-${id}`).value)||0;
  const s = STATE_DATA[pbState] || STATE_DATA['IL'];
  const tax = Math.round(m * (s.matTax/100));
  const taxEl = document.getElementById(`pb-tax-${id}`);
  if(taxEl) taxEl.textContent='$'+tax;
  document.getElementById(`pb-t-${id}`).textContent='$'+(l+m+tax);
}

function openPbStateModal() {
  document.getElementById('modal-title').textContent = '🗺 Set Your State';
  const stateRows = Object.entries(STATE_DATA).map(([code, s]) => `
    <div onclick="document.getElementById('pb-state-sel').value='${code}';setPbState('${code}');closeModal();flash('${s.flag} Switched to ${s.name} pricing ✓')"
      style="display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-radius:8px;transition:background .12s;${pbState===code?'background:var(--amber-light);border:1px solid rgba(200,120,10,.3)':'border:1px solid transparent'}"
      onmouseover="this.style.background='var(--surface2)'" onmouseout="this.style.background='${pbState===code?'var(--yellow-glow)':'transparent'}'">
      <span style="font-size:20px">${s.flag}</span>
      <div style="flex:1">
        <div style="font-size:13px;font-weight:600">${s.name}</div>
        <div style="font-size:11px;color:var(--text-muted)">${s.note.split('.')[0]}</div>
      </div>
      <div style="text-align:right;font-size:11px">
        <div style="color:var(--blue);font-weight:600">${s.matTax>0?s.matTax+'% mat tax':'No sales tax'}</div>
        <div style="color:var(--text-dim)">${s.laborRange}</div>
      </div>
    </div>`).join('');
  document.getElementById('modal-body').innerHTML = `
    <p style="font-size:13px;color:var(--text-dim);margin-bottom:12px">Select your state to auto-adjust material tax and regional labor rates across your entire price book.</p>
    <div style="max-height:420px;overflow-y:auto;">${stateRows}</div>`;
  document.getElementById('modal-footer').innerHTML = `<button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

// ============================================================
// FEATURE 2 — DUPLICATE JOB
// ============================================================
function duplicateJob(jid) {
  const orig = jobs.find(x => x.id === jid);
  if(!orig) return;
  const newJob = {
    ...orig,
    id: 'J-' + String(jobIdCounter++).padStart(3,'0'),
    status: 'pending',
    date: 'TBD',
    time: 'TBD',
  };
  jobs.push(newJob);
  filterJobsSearch();
  try { renderQuotes(); initQuoteBuilder(); } catch(e) {}
  // Highlight new row briefly
  setTimeout(() => {
    document.querySelectorAll('#jobs-table tr').forEach(r => {
      if(r.textContent.includes(newJob.id)) {
        r.style.background = 'rgba(200,120,10,.1)';
        r.scrollIntoView({ behavior:'smooth', block:'nearest' });
        setTimeout(() => r.style.background = '', 2000);
      }
    });
  }, 60);
  flash(`${newJob.id} created as copy of ${jid} — set date to schedule ✓`);
}

// ============================================================
// FEATURE 2C — QUICK COMPLETE JOB
// ============================================================
function quickCompleteJob(jid) {
  const job = jobs.find(x => x.id === jid);
  if(!job) return;
  if(job.status !== 'inprogress') {
    flash('Only in-progress jobs can be quickly completed');
    return;
  }
  if(!confirm(`Mark ${jid} as COMPLETE?`)) return;
  job.status = 'complete';
  job.completed = new Date().toISOString().split('T')[0];
  filterJobsSearch();
  flash(`${jid} marked complete ✓`);
  // Refresh dashboard if visible
  try { renderDashboard(); } catch(e) {}
}

// ============================================================
// FEATURE 2B — JOB TIMER
// ============================================================
let activeTimer = { jobId: null, startTime: null, intervalId: null };

function startJobTimer(jid) {
  if(activeTimer.jobId && activeTimer.jobId !== jid) {
    if(!confirm('Timer running for ' + activeTimer.jobId + '. Stop and start new timer?')) return;
    stopJobTimer();
  }
  activeTimer.jobId = jid;
  activeTimer.startTime = Date.now();
  updateTimerDisplay();
  activeTimer.intervalId = setInterval(updateTimerDisplay, 1000);
  flash('Timer started for ' + jid);
}

function stopJobTimer() {
  if(!activeTimer.jobId) return;
  const elapsed = Math.floor((Date.now() - activeTimer.startTime) / 1000);
  const mins = Math.floor(elapsed / 60);
  clearInterval(activeTimer.intervalId);
  flash('Timer stopped for ' + activeTimer.jobId + ': ' + mins + ' min recorded');
  // Log to job notes (simple implementation)
  const j = jobs.find(x => x.id === activeTimer.jobId);
  if(j) {
    j.notes = (j.notes || '') + '\n[Timer: ' + mins + ' min on ' + new Date().toLocaleDateString() + ']';
  }
  activeTimer = { jobId: null, startTime: null, intervalId: null };
  document.getElementById('active-timer-display')?.remove();
}

function updateTimerDisplay() {
  if(!activeTimer.startTime) return;
  const elapsed = Math.floor((Date.now() - activeTimer.startTime) / 1000);
  const hrs = Math.floor(elapsed / 3600);
  const mins = Math.floor((elapsed % 3600) / 60);
  const secs = elapsed % 60;
  const timeStr = hrs > 0 ? `${hrs}:${String(mins).padStart(2,'0')}:${String(secs).padStart(2,'0')}` : `${mins}:${String(secs).padStart(2,'0')}`;
  
  let timerEl = document.getElementById('active-timer-display');
  if(!timerEl) {
    timerEl = document.createElement('div');
    timerEl.id = 'active-timer-display';
    timerEl.style.cssText = 'position:fixed;top:60px;right:20px;background:var(--amber);color:#000;padding:8px 14px;border-radius:8px;font-weight:600;font-size:14px;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);cursor:pointer';
    timerEl.title = 'Click to stop timer';
    timerEl.onclick = stopJobTimer;
    document.body.appendChild(timerEl);
  }
  timerEl.innerHTML = '⏱ ' + activeTimer.jobId + ': ' + timeStr + ' (click to stop)';
}

// Add timer button to job row actions
function getJobTimerBtn(j) {
  if(activeTimer.jobId === j.id) {
    return '<button class="btn btn-warn btn-sm" onclick="stopJobTimer()">⏹ Timer</button>';
  }
  if(j.status === 'inprogress' || j.status === 'scheduled') {
    return '<button class="btn btn-ghost btn-sm" onclick="startJobTimer(\'' + j.id + '\')">⏱ Timer</button>';
  }
  return '';
}

// ============================================================
// FEATURE 3 — JOB SEARCH + FILTER
// ============================================================
function filterJobsSearch() {
  const q = (document.getElementById('jobs-search')?.value || '').toLowerCase().trim();
  const statusF = document.getElementById('jobs-status-filter')?.value || '';
  const techF = document.getElementById('jobs-tech-filter')?.value || '';
  const typeF = document.getElementById('jobs-type-filter')?.value || '';
  const dateFrom = document.getElementById('jobs-date-from')?.value || '';
  const dateTo = document.getElementById('jobs-date-to')?.value || '';

  const filtered = jobs.filter(j => {
    if(statusF && j.status !== statusF) return false;
    if(techF && !j.tech.includes(techF)) return false;
    if(typeF && j.type !== typeF) return false;
    if(q && !(j.client.toLowerCase().includes(q) || j.id.toLowerCase().includes(q) ||
              j.name.toLowerCase().includes(q) || j.addr.toLowerCase().includes(q) ||
              (j.desc||'').toLowerCase().includes(q) || (j.notes||'').toLowerCase().includes(q))) return false;
    // Date range filtering
    if(dateFrom || dateTo) {
      const jobDate = new Date(j.date);
      if(dateFrom && jobDate < new Date(dateFrom)) return false;
      if(dateTo && jobDate > new Date(dateTo)) return false;
    }
    return true;
  });

  // Sort the filtered jobs
  const sortOrder = document.getElementById('jobs-sort')?.value || 'date-desc';
  const statusOrder = {pending:0, scheduled:1, inprogress:2, complete:3, cancelled:4, draft:5};
  filtered.sort((a, b) => {
    if(sortOrder === 'date-desc') return new Date(b.date) - new Date(a.date);
    if(sortOrder === 'date-asc') return new Date(a.date) - new Date(b.date);
    if(sortOrder === 'value-desc') return b.value - a.value;
    if(sortOrder === 'value-asc') return a.value - b.value;
    if(sortOrder === 'client-asc') return a.client.localeCompare(b.client);
    if(sortOrder === 'status-asc') return (statusOrder[a.status]||99) - (statusOrder[b.status]||99);
    return 0;
  });

  const canStart = s => s === 'scheduled' || s === 'inprogress';
  const canComplete = s => s === 'inprogress';
  document.getElementById('jobs-table').innerHTML = filtered.map(j => `<tr>
    <td>${$m(j.id,'var(--text-muted)')}</td>
    <td style="cursor:pointer" onclick="openCM('${j.client}')"><strong>${j.client}</strong><br><span style="font-size:11px;color:var(--text-dim)">${j.addr}</span></td>
    <td>${tTag(j.type)}</td>
    <td style="font-size:12.5px">${j.tech}</td>
    <td>${$m(j.date+' '+j.time,'var(--text-dim)')}</td>
    <td>${$m('$'+j.value.toLocaleString(),'var(--yellow)')}</td>
    <td>${sP(j.status)}</td>
    <td style="display:flex;gap:4px;flex-wrap:nowrap">
      <button class="btn btn-edit" onclick="openJobEdit('${j.id}')" title="Edit">✏️</button>
      <button class="btn-dupe" onclick="duplicateJob('${j.id}')" title="Duplicate">⧉</button>
      ${canStart(j.status) ? `<button class="btn btn-warn btn-sm" onclick="openJobFlow('${j.id}')" title="Start">▶</button>` : ''}
      ${canComplete(j.status) ? `<button class="btn btn-sm" style="background:var(--success);color:#fff" onclick="quickCompleteJob('${j.id}')" title="Mark Complete">✓</button>` : ''}
      ${getJobTimerBtn(j)}
    </td>
  </tr>`).join('') || `<tr><td colspan="8" style="padding:20px;text-align:center;color:var(--text-muted)">No jobs match filters</td></tr>`;
  
  // Update status counts
  const counts = {pending:0,scheduled:0,inprogress:0,complete:0};
  jobs.forEach(j => { if(counts[j.status]!==undefined) counts[j.status]++; });
  document.getElementById('jobs-count-pending').textContent = counts.pending;
  document.getElementById('jobs-count-scheduled').textContent = counts.scheduled;
  document.getElementById('jobs-count-inprogress').textContent = counts.inprogress;
  document.getElementById('jobs-count-complete').textContent = counts.complete;
}

function setJobQuickFilter(type) {
  const today = new Date();
  today.setHours(0,0,0,0);
  const todayStr = today.toISOString().split('T')[0];
  const endOfWeek = new Date(today);
  endOfWeek.setDate(today.getDate() + (7 - today.getDay()));
  const weekStr = endOfWeek.toISOString().split('T')[0];
  
  document.getElementById('jobs-date-from').value = '';
  document.getElementById('jobs-date-to').value = '';
  document.getElementById('jobs-status-filter').value = '';
  document.getElementById('jobs-tech-filter').value = '';
  document.getElementById('jobs-type-filter').value = '';
  
  if (type === 'today') {
    document.getElementById('jobs-date-from').value = todayStr;
    document.getElementById('jobs-date-to').value = todayStr;
  } else if (type === 'week') {
    document.getElementById('jobs-date-from').value = todayStr;
    document.getElementById('jobs-date-to').value = weekStr;
  } else if (type === 'overdue') {
    document.getElementById('jobs-date-from').value = '';
    document.getElementById('jobs-date-to').value = todayStr;
  } else if (type === 'inprogress') {
    document.getElementById('jobs-status-filter').value = 'inprogress';
  } else if (type === 'fromQuote') {
    // Filter jobs with "Auto-created from quote" in notes
    document.getElementById('jobs-search').value = 'Auto-created from quote';
  }
  filterJobsSearch();
}

function clearJobFilters() {
  const ids = ['jobs-search','jobs-status-filter','jobs-tech-filter','jobs-type-filter','jobs-date-from','jobs-date-to','jobs-sort'];
  ids.forEach(id => { const el = document.getElementById(id); if(el) el.value = ''; });
  renderJobs();
}

// Canonical renderJobs — syncs filter dropdown then delegates to filterJobsSearch

function populateTechFilter() {
  const sel = document.getElementById('jobs-tech-filter');
  if (!sel) return;
  const cur = sel.value;
  const techs = [...new Set(jobs.map(j => j.tech).filter(Boolean))].sort();
  sel.innerHTML = '<option value="">All Techs</option>' +
    techs.map(t => '<option value="' + t + '"' + (t === cur ? ' selected' : '') + '>' + t + '</option>').join('');
}

function renderJobs(f) {
  populateTechFilter();
  if(f && f !== 'All Jobs') {
    const sf = document.getElementById('jobs-status-filter');
    if(sf) sf.value = f.toLowerCase().replace(/ /g,'');
  }
  filterJobsSearch();
}

// ============================================================
// FEATURE 4 — TECH SCHEDULE + REASSIGN
// ============================================================
function switchTechTab(tab, el) {
  document.querySelectorAll('#view-techs .state-pill').forEach(p => p.classList.remove('active'));
  el.classList.add('active');
  document.getElementById('tech-perf-panel').style.display = tab === 'perf' ? '' : 'none';
  document.getElementById('tech-sched-panel').style.display = tab === 'sched' ? '' : 'none';
  if(tab === 'sched') renderTechSchedule();
}

function renderTechSchedule() {
  const card = document.getElementById('tech-schedule-card');
  if(!card) return;
  const weekDays = ['Mon Feb 17','Tue Feb 18','Wed Feb 19','Thu Feb 20','Fri Feb 21'];
  const techNames = ['Mike R.','Jess T.'];
  const techColors = {'Mike R.':'var(--amber)','Jess T.':'var(--blue)'};

  // Group jobs by tech + day
  const byTechDay = {};
  techNames.forEach(t => { byTechDay[t] = {}; weekDays.forEach(d => byTechDay[t][d] = []); });
  jobs.forEach(j => {
    const dayKey = weekDays.find(d => d.includes(j.date.replace('Feb ','')));
    if(dayKey && byTechDay[j.tech]) byTechDay[j.tech][dayKey].push(j);
  });

  const typeColors = {panel:'rgba(200,120,10,.2)',ev:'rgba(24,84,160,.2)',svc:'rgba(168,85,0,.2)',inst:'rgba(92,58,158,.2)',safe:'rgba(52,211,153,.2)',outlets:'rgba(24,84,160,.15)',lighting:'rgba(200,120,10,.15)'};

  card.innerHTML = `
    <div style="padding:0">
      <!-- Header row -->
      <div class="tech-week-row" style="background:var(--surface2)">
        <div class="tech-week-cell" style="font-weight:600;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px">Tech</div>
        ${weekDays.map(d=>`<div class="tech-week-cell" style="font-weight:600;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px">${d}</div>`).join('')}
      </div>
      <!-- Tech rows -->
      ${techNames.map(tech => `
        <div class="tech-week-row">
          <div class="tech-week-cell" style="display:flex;align-items:flex-start;gap:8px;padding-top:12px">
            <div style="width:28px;height:28px;border-radius:50%;background:${techColors[tech]}22;color:${techColors[tech]};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0">${tech.split(' ').map(w=>w[0]).join('')}</div>
            <div style="font-size:12px;font-weight:600">${tech}</div>
          </div>
          ${weekDays.map(day => {
            const dayJobs = byTechDay[tech][day] || [];
            const totalVal = dayJobs.reduce((s,j)=>s+j.value,0);
            return `<div class="tech-week-cell">
              ${dayJobs.map(j=>`
                <div style="margin-bottom:4px">
                  <div class="tech-job-chip" style="background:${typeColors[j.type]||'var(--surface3)'}">
                    ${j.id} ${j.time}
                  </div>
                  <div style="font-size:10px;color:var(--text-dim);margin-bottom:2px">${j.client} — ${j.name}</div>
                  <button class="reassign-btn" onclick="reassignJob('${j.id}','${tech}')">↔ Reassign</button>
                </div>`).join('')}
              ${dayJobs.length===0?`<div style="font-size:11px;color:var(--text-muted);padding:4px 0">Available</div>`:''}
              ${dayJobs.length>0?`<div style="font-size:10px;color:var(--text-dim);margin-top:4px;border-top:1px solid var(--border);padding-top:4px">$${totalVal.toLocaleString()} · ${dayJobs.length} job${dayJobs.length>1?'s':''}</div>`:''}
            </div>`;
          }).join('')}
        </div>`).join('')}
    </div>`;
}

function reassignJob(jid, currentTech) {
  const j = jobs.find(x => x.id === jid);
  if(!j) return;
  const other = currentTech === 'Mike R.' ? 'Jess T.' : 'Mike R.';
  const otherFull = other === 'Mike R.' ? 'Mike Rivera' : 'Jess Torres';
  document.getElementById('modal-title').textContent = 'Reassign ' + jid;
  document.getElementById('modal-body').innerHTML = `
    <div style="background:var(--surface2);border-radius:10px;padding:13px 16px;margin-bottom:14px">
      <div style="font-size:13px;font-weight:600;margin-bottom:3px">${j.id} — ${j.name}</div>
      <div style="font-size:12px;color:var(--text-dim)">${j.client} · ${j.date} ${j.time}</div>
      <div style="font-size:12px;color:var(--text-muted);margin-top:5px">Currently: <strong>${currentTech}</strong></div>
    </div>
    <div class="form-group"><label class="form-label">Reassign To</label>
      <select class="form-input" id="reassign-tech-sel">
        <option value="${other}">${otherFull}</option>
        <option value="Unassigned">Unassigned</option>
      </select></div>
    <div class="form-group"><label class="form-label">Reason (optional)</label>
      <select class="form-input">
        <option>Schedule conflict</option>
        <option>Closer to job site</option>
        <option>Skill match</option>
        <option>Client request</option>
        <option>Capacity balancing</option>
      </select></div>
    <div class="form-group"><label class="form-label">Notify tech?</label>
      <select class="form-input"><option>📱 Send SMS to new tech</option><option>No notification</option></select></div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="confirmReassign('${jid}')">Reassign Job</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function confirmReassign(jid) {
  const j = jobs.find(x => x.id === jid);
  const newTech = document.getElementById('reassign-tech-sel')?.value;
  if(j && newTech) {
    const oldTech = j.tech;
    j.tech = newTech;
    autoPersist();
    closeModal();
    try { renderTechSchedule(); } catch(e) {}
    filterJobsSearch();
    flash(`${jid} reassigned from ${oldTech} to ${newTech} ✓`);
  }
}

// ============================================================
// FEATURE 5 — CLIENT HEALTH AUTO-SCORING
// ============================================================
function computeClientHealth(clientName) {
  const profile = clientProfiles[clientName];
  const cl = clients.find(c => c.name === clientName);
  if(!profile || !cl) return { score:'B', cls:'hs-b', risk:false };

  let score = 100;
  const issues = [];

  // Last job recency (parse "Feb 18" style dates)
  const lastJobStr = profile.lastJob || '';
  const MONTHS = {Jan:0,Feb:1,Mar:2,Apr:3,May:4,Jun:5,Jul:6,Aug:7,Sep:8,Oct:9,Nov:10,Dec:11};
  const parts = lastJobStr.split(' ');
  if(parts.length >= 2) {
    const lastDate = new Date(2026, MONTHS[parts[0]]||0, parseInt(parts[1])||1);
    const today = new Date(2026, 1, 19);
    const monthsAgo = (today - lastDate) / (1000*60*60*24*30);
    if(monthsAgo > 18) { score -= 35; issues.push('No work in 18+ months'); }
    else if(monthsAgo > 12) { score -= 20; issues.push('No work in 12+ months'); }
    else if(monthsAgo > 6) { score -= 10; }
  } else if(lastJobStr === '—') {
    score -= 15; issues.push('No jobs yet');
  }

  // Outstanding balance vs lifetime
  if(profile.lifetime > 0) {
    const outstandingPct = profile.outstanding / profile.lifetime;
    if(outstandingPct > 0.5) { score -= 20; issues.push('High outstanding balance'); }
    else if(outstandingPct > 0.3) { score -= 10; }
  }

  // Avg pay time
  const payDays = parseInt(profile.avgPay) || 0;
  if(payDays > 45) { score -= 20; issues.push('Pays in 45+ days'); }
  else if(payDays > 30) { score -= 10; issues.push('Pays in 30+ days'); }
  else if(payDays <= 7 && payDays > 0) { score += 5; }

  // Open overdue permits
  if(profile.permits?.some(p => p.stage?.includes('OVERDUE'))) {
    score -= 15; issues.push('Overdue permit');
  }

  // Referrals boost
  if(profile.refs >= 3) score += 10;
  else if(profile.refs >= 1) score += 5;

  // Derive letter grade
  let letter, cls;
  if(score >= 85)      { letter='A'; cls='hs-a'; }
  else if(score >= 65) { letter='B'; cls='hs-b'; }
  else if(score >= 45) { letter='C'; cls='hs-c'; }
  else                 { letter='D'; cls='hs-d'; }

  const label = letter + (issues.length ? ' — ' + issues[0] : ' — Healthy');
  return { score:letter, cls, risk: letter==='C'||letter==='D', label, issues };
}

// Recompute all health scores on load and after data changes
function refreshHealthScores() {
  Object.keys(clientProfiles).forEach(name => {
    const h = computeClientHealth(name);
    clientHealth[name] = { ...clientHealth[name], score:h.score, cls:h.cls, risk:h.risk };
    // Update profile health label for modal display
    if(clientProfiles[name]) {
      clientProfiles[name].health = h.cls;
      clientProfiles[name].healthLabel = h.label || (h.score + ' — Healthy');
    }
  });
}

// ============================================================
// FEATURE 6 — DYNAMIC DASHBOARD TODAY'S JOBS
// ============================================================

// ── Notification preference persistence ──────────────────────────
const NOTIF_DEFAULTS = [
  { key:'job_reminders',     label:'Job reminders (day before)',   on:true  },
  { key:'invoice_overdue',   label:'Invoice overdue alerts',       on:true  },
  { key:'permit_expiry',     label:'Permit expiry warnings',       on:true  },
  { key:'payment_received',  label:'Client payment received',      on:true  },
  { key:'team_job_updates',  label:'Team job assignment updates',  on:false },
  { key:'weekly_summary',    label:'Weekly revenue summary',       on:true  },
  { key:'quote_viewed',      label:'Quote viewed by client',       on:true  },
  { key:'low_stock_alert',   label:'Low material stock alerts',    on:false },
];

function loadNotifPrefs() {
  const saved = JSON.parse(localStorage.getItem('amp_notif_prefs') || '{}');
  return NOTIF_DEFAULTS.map(d => ({ ...d, on: saved.hasOwnProperty(d.key) ? saved[d.key] : d.on }));
}

function saveNotifPref(key, val) {
  const cur = JSON.parse(localStorage.getItem('amp_notif_prefs') || '{}');
  cur[key] = val;
  localStorage.setItem('amp_notif_prefs', JSON.stringify(cur));
  flash('Preference saved ✓');
}

function renderNotifPrefs() {
  const el = document.getElementById('notif-prefs-list');
  if (!el) return;
  const prefs = loadNotifPrefs();
  el.innerHTML = prefs.map(p =>
    '<label style="display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin-bottom:14px">' +
    '<span style="font-size:13px">' + p.label + '</span>' +
    '<div class="toggle-switch ' + (p.on ? 'on' : '') + '" data-key="' + p.key + '"' +
    ' onclick="this.classList.toggle(&quot;on&quot;);saveNotifPref(this.dataset.key,this.classList.contains(&quot;on&quot;))">' +
    '<div class="toggle-knob"></div></div></label>'
  ).join('');
}

function renderDashboard() {
  // ── Streak banner: compute best/current month insight ────────────
  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const _dnow   = new Date();
  const curMo  = _dnow.getMonth();
  const curYr  = _dnow.getFullYear();
  const curMoLabel = MONTHS[curMo];

  // Revenue by month from invoices + jobs
  const revByMo = {};
  invoices.forEach(inv => {
    if (inv.status === 'paid' || inv.status === 'complete') {
      const parts = (inv.issued || '').split(/[, ]+/);
      const mo = MONTHS.indexOf(parts[0]);
      const yr = parseInt(parts[parts.length-1]) || curYr;
      if (mo >= 0) { const k = yr+'-'+mo; revByMo[k] = (revByMo[k]||0) + inv.amount; }
    }
  });
  jobs.filter(j => j.status === 'complete' && j.value > 0).forEach(j => {
    const parts = (j.date || '').split(' ');
    const mo = MONTHS.indexOf(parts[0]);
    const yr = parseInt(parts[1]) || curYr;
    if (mo >= 0) { const k = yr+'-'+mo; if (!revByMo[k]) revByMo[k] = j.value; }
  });

  const curKey = curYr+'-'+curMo;
  const curRev = revByMo[curKey] || 0;
  const allRevs = Object.values(revByMo);
  const maxRev  = allRevs.length ? Math.max(...allRevs) : 0;
  const doneJobsThisMo = jobs.filter(j => {
    const parts = (j.date||'').split(' ');
    return MONTHS.indexOf(parts[0]) === curMo && (j.status==='complete'||j.status==='inprogress');
  }).length;

  let streakTitle = curMoLabel + ' Performance';
  let streakIcon  = '📈';
  if (curRev > 0 && curRev >= maxRev * 0.95) {
    streakTitle = 'Best Month on Record — ' + curMoLabel + ' ' + curYr;
    streakIcon  = '🏆';
  } else if (curRev > 0) {
    streakTitle = curMoLabel + ' ' + curYr + ' — On Track';
  } else {
    streakTitle = "Let's Build This Month \u2014 " + curMoLabel + ' ' + curYr;
    streakIcon  = '🎯';
  }

  const arOpen = invoices.filter(i => i.status !== 'paid' && i.status !== 'complete');
  const totalQ = savedQuotes.length;
  const accQ   = savedQuotes.filter(q => q.status==='accepted'||q.status==='paid').length;
  const closeRate = totalQ > 0 ? Math.round(accQ/totalQ*100) : 0;
  const streakSub = '$' + curRev.toLocaleString() + ' collected · ' + doneJobsThisMo + ' jobs closed · ' + arOpen.length + ' open invoices · ' + closeRate + '% close rate';

  const stEl = document.getElementById('dash-streak-title');
  const ssEl = document.getElementById('dash-streak-sub');
  const siEl = document.getElementById('dash-streak-icon');
  if (stEl) stEl.textContent = streakTitle;
  if (ssEl) ssEl.textContent = streakSub;
  if (siEl) siEl.textContent = streakIcon;
  // ── end streak logic ─────────────────────────────────────────────

  const set = (id,v) => { const el=document.getElementById(id); if(el) el.textContent=v; };
  const setHtml = (id,v) => { const el=document.getElementById(id); if(el) el.innerHTML=v; };

  // ── TODAY'S JOBS ──────────────────────────────────────────────
  // Use today's actual date (or prototype fallback for demo)
  const _now = new Date();
  const _MO = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const TODAY = _MO[_now.getMonth()] + ' ' + _now.getDate();
  const todayJobs = jobs.filter(j => {
    const d = j.date||'';
    return d===TODAY||d===_now.toLocaleDateString('en-US',{month:'short',day:'numeric'});
  });
  set('dash-today-title', "Today's Jobs — "+TODAY+" ("+todayJobs.length+")");
  setHtml('dash-today', todayJobs.length
    ? todayJobs.map(j=>`
      <tr>
        <td style="cursor:pointer" onclick="openCM('${j.client}')">
          <strong>${j.client}</strong><br>
          <span style="font-size:11px;color:var(--text-dim)">${j.addr}</span>
        </td>
        <td>${tTag(j.type)}</td>
        <td>${$m(j.time,'var(--text-dim)')}</td>
        <td style="font-size:12.5px">${j.tech}</td>
        <td>${sP(j.status)}</td>
        <td>${j.status==='scheduled'||j.status==='inprogress'
          ? `<button class="btn btn-warn btn-sm" onclick="openJobFlow('${j.id}')">▶ Start</button>`
          : ''}</td>
      </tr>`).join('')
    : '<tr><td colspan="6" style="padding:16px;text-align:center;color:var(--text-muted);font-size:13px">No jobs scheduled for today</td></tr>');

  // ── KPI CARDS ─────────────────────────────────────────────────
  const activeJobs = jobs.filter(j=>j.status==='scheduled'||j.status==='inprogress');
  const paidInvs   = invoices.filter(i=>i.status==='paid'||i.status==='complete');
  const unpaidInvs = invoices.filter(i=>i.status!=='paid'&&i.status!=='complete');
  const overdueInvs= invoices.filter(i=>i.status==='overdue');
  const openAR     = unpaidInvs.reduce((s,i)=>s+i.amount,0);
  const revenueNum = paidInvs.reduce((s,i)=>s+i.amount,0);
  const openQuotes = savedQuotes.filter(q=>q.status==='sent'||q.status==='viewed');
  const pipelineVal= openQuotes.reduce((s,q)=>s+q.amount,0);

  set('kpi-active-jobs', activeJobs.length);
  set('kpi-active-jobs-sub', activeJobs.length===0?'No active jobs':'↑ '+activeJobs.length+' in progress');
  // This Week KPI - jobs scheduled in next 7 days
  const now = new Date();
  const weekFromNow = new Date(now.getTime() + 7*24*60*60*1000);
  const thisWeekJobs = jobs.filter(j => {
    if (!j.date || j.status === 'complete' || j.status === 'cancelled') return false;
    const dateStr = j.date + ' ' + now.getFullYear();
    const jobDate = new Date(dateStr);
    if (isNaN(jobDate.getTime())) return false;
    return jobDate >= now && jobDate <= weekFromNow;
  });
  set('kpi-week-jobs', thisWeekJobs.length);
  set('kpi-week-jobs-sub', thisWeekJobs.length === 1 ? 'job this week' : 'jobs this week');
  // Clients KPI
  const newClients = clients.filter(c => {
    const created = c.created || c.dateAdded || c.date || null;
    if (!created) return false;
    const d = new Date(created);
    const now = new Date();
    return d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear();
  });
  set('kpi-clients', clients.length);
  set('kpi-clients-sub', newClients.length > 0 ? '↑ ' + newClients.length + ' this month' : 'No new clients');
  set('kpi-revenue', '$'+revenueNum.toLocaleString());
  set('kpi-ar', '$'+openAR.toLocaleString());
  set('kpi-ar-sub', unpaidInvs.length+' open · '+(overdueInvs.length>0?overdueInvs.length+' overdue':'all current'));
  set('kpi-pipeline', pipelineVal>=1000?'$'+(pipelineVal/1000).toFixed(0)+'k':'$'+pipelineVal);
  set('kpi-pipeline-sub', openQuotes.length+' open quote'+(openQuotes.length!==1?'s':''));

  // ── RECURRING ARR ─────────────────────────────────────────────
  const FREQ_MULT = { Monthly:12, Quarterly:4, 'Bi-Yearly':2, Yearly:1 };
  const activeRec = (typeof recurring !== 'undefined' ? recurring : []).filter(r => r.status === 'active');
  const arrVal    = activeRec.reduce((s, r) => s + (r.value||0) * (FREQ_MULT[r.freq]||1), 0);
  const mrrVal    = Math.round(arrVal / 12);
  set('kpi-arr', arrVal >= 1000 ? '$' + (arrVal/1000).toFixed(1) + 'k' : '$' + arrVal);
  set('kpi-arr-sub', activeRec.length + ' active · $' + mrrVal.toLocaleString() + '/mo');

  // ── PERMITS ───────────────────────────────────────────────────
  const urgentPermits = permits.filter(p=>p.urg!=='g');
  setHtml('dash-permits', urgentPermits.length
    ? urgentPermits.slice(0,4).map(p=>`
      <div class="a-item" onclick="nav('field',document.getElementById('nav-field'));renderPermits()" style="cursor:pointer">
        <div style="width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px;background:${
          p.urg==='r'?'var(--danger)':p.urg==='o'?'var(--warning)':'var(--amber)'}"></div>
        <div class="a-body">
          <div class="a-title">${p.addr}</div>
          <div class="a-sub">${p.type}</div>
        </div>
        <div class="a-time">Exp ${p.expiry}</div>
      </div>`).join('')
    : '<div style="padding:14px 16px;font-size:13px;color:var(--text-muted)">All permits current ✓</div>');

  // ── UNPAID INVOICES ───────────────────────────────────────────
  const barColors = {
    draft:'var(--border)', sent:'var(--amber)',
    viewed:'var(--blue)', overdue:'var(--danger)',
    partial:'var(--warning)',
  };
  setHtml('dash-unpaid', unpaidInvs.length
    ? unpaidInvs.map(inv => {
        const bc = barColors[inv.status]||'var(--amber)';
        const isOverdue = inv.status==='overdue';
        return `<div class="dash-inv-item" onclick="nav('money',document.getElementById('nav-money'))">
          <div class="dash-inv-bar" style="background:${bc}"></div>
          <div style="flex:1;min-width:0">
            <div style="font-size:13px;font-weight:600">${inv.client}</div>
            <div style="font-size:11px;color:var(--text-dim)">${inv.num} · Due ${inv.due}</div>
          </div>
          <div style="text-align:right;flex-shrink:0">
            <div style="font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:${isOverdue?'var(--danger)':'var(--amber)'}">$${inv.amount.toLocaleString()}</div>
            <div style="font-size:10.5px;font-weight:600;color:${bc};margin-top:1px">${isOverdue?'Overdue ⚠':inv.status.charAt(0).toUpperCase()+inv.status.slice(1)}</div>
          </div>
          ${!isOverdue?`<button class="ar-action-btn" onclick="event.stopPropagation();openInvSendPayLink(${invoices.indexOf(inv)})">💳</button>`
            :`<button class="ar-action-btn" style="color:var(--danger);border-color:var(--danger)" onclick="event.stopPropagation();flash('Escalation sent to ${inv.client} ✓')">Remind</button>`}
        </div>`;
      }).join('')
    : '<div style="padding:14px 16px;font-size:13px;color:var(--success)">All invoices paid ✓</div>');

  // ── QUOTE PIPELINE ────────────────────────────────────────────
  const allOpenQuotes = savedQuotes.filter(q=>q.status!=='expired');
  const quoteDotColors = { draft:'var(--text-muted)', sent:'var(--amber)', viewed:'var(--blue)', accepted:'var(--success)' };
  const quoteLabels    = { draft:'Draft', sent:'Sent', viewed:'Viewed 👀', accepted:'Accepted ✅' };
  setHtml('dash-quotes', allOpenQuotes.length
    ? allOpenQuotes.slice(0,5).map(q => {
        const dc = quoteDotColors[q.status]||'var(--text-muted)';
        const isAccepted = q.status==='accepted';
        return `<div class="dash-quote-item" onclick="nav('money',document.getElementById('nav-money'));setTimeout(()=>switchHub('money','quote',document.querySelector('#money-tabs .hub-tab:nth-child(3)')),100)">
          <div style="width:8px;height:8px;border-radius:50%;background:${dc};flex-shrink:0;margin-top:4px"></div>
          <div style="flex:1;min-width:0">
            <div style="font-size:13px;font-weight:600">${q.client}</div>
            <div style="font-size:11px;color:var(--text-dim)">${q.id} · ${q.jobType} · exp ${q.expires}</div>
          </div>
          <div style="text-align:right;flex-shrink:0">
            <div style="font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--amber)">$${q.amount.toLocaleString()}</div>
            <div style="font-size:10.5px;color:${dc};font-weight:600">${quoteLabels[q.status]||q.status}</div>
          </div>
          ${isAccepted?`<button class="ar-action-btn" style="color:var(--success);border-color:var(--success)" onclick="event.stopPropagation();convertSavedQuote('${q.client}',${q.amount},'${q.jobType}')">→ Job</button>`:''}
        </div>`;
      }).join('')
    : '<div style="padding:14px 16px;font-size:13px;color:var(--text-muted)">No open quotes</div>');

  // ── STOCK ALERTS ──────────────────────────────────────────────
  try { renderDashStockAlerts(); } catch(e) {}

  // ── ACTION REQUIRED (priority triage) ─────────────────────────
  // Build a ranked list of things that need attention today
  const actions = [];

  // 1. Overdue invoices (ranked by amount)
  overdueInvs.sort((a,b)=>b.amount-a.amount).forEach(inv => {
    const days = inv.num==='INV-0087'?61:30; // use real data if available
    actions.push({
      urgency: 100 + inv.amount/100,
      dot: 'var(--danger)',
      title: `Collect overdue invoice — ${inv.client}`,
      sub: `${inv.num} · $${inv.amount.toLocaleString()} · ${days} days past due`,
      meta: `$${inv.amount.toLocaleString()}`,
      metaColor: 'var(--danger)',
      onClick: `nav('money',document.getElementById('nav-money'))`,
      cta: 'Send Reminder',
      ctaFn: `flash('Reminder sent to ${inv.client} ✓')`,
    });
  });

  // 1b. Stale open quotes (sent/viewed > 14 days with no response)
  const staleQuotes = savedQuotes.filter(q => {
    if (q.status !== 'sent' && q.status !== 'viewed') return false;
    const qDate = new Date(q.date?.replace(/,/g,'') || '2026-01-01');
    const ageDays = Math.round((Date.now() - qDate) / 86400000);
    return ageDays > 14;
  });
  staleQuotes.forEach(q => {
    const ageDays = Math.max(0, Math.round((Date.now() - new Date(q.date?.replace(/,/g,'')||'2026-01-01')) / 86400000));
    actions.push({
      urgency: ageDays > 28 ? 9 : 6,
      icon: '📋', color: ageDays > 28 ? 'var(--danger)' : 'var(--warning)',
      title: `Quote ${q.id} — ${q.client}`,
      sub: `$${q.amount.toLocaleString()} · ${ageDays}d with no response`,
      action: `viewQuote('${q.client}',${q.amount},'${q.jobType}')`,
      label: ageDays > 28 ? 'Expired?' : 'Follow Up',
    });
  });

  // 2. Accepted quotes not yet converted
  savedQuotes.filter(q=>q.status==='accepted').forEach(q => {
    actions.push({
      urgency: 90 + q.amount/1000,
      dot: 'var(--success)',
      title: `Convert accepted quote → Job`,
      sub: `${q.id} · ${q.client} · ${q.jobType}`,
      meta: `$${q.amount.toLocaleString()}`,
      metaColor: 'var(--success)',
      onClick: `nav('money',document.getElementById('nav-money'))`,
      cta: '→ Job',
      ctaFn: `convertSavedQuote('${q.client}',${q.amount},'${q.jobType}')`,
    });
  });

  // 3. Quotes viewed but not responded (expiring)
  savedQuotes.filter(q=>q.status==='viewed').forEach(q => {
    actions.push({
      urgency: 70,
      dot: 'var(--blue)',
      title: `Follow up on quote — ${q.client}`,
      sub: `${q.id} · $${q.amount.toLocaleString()} · viewed · expires ${q.expires}`,
      meta: `$${q.amount.toLocaleString()}`,
      metaColor: 'var(--blue)',
      onClick: `nav('money',document.getElementById('nav-money'))`,
      cta: 'Nudge',
      ctaFn: `flash('Follow-up sent to ${q.client} ✓')`,
    });
  });

  // 4. Urgent permits (red/orange)
  permits.filter(p=>p.urg==='r'||p.urg==='o').forEach(p => {
    actions.push({
      urgency: p.urg==='r'?85:55,
      dot: p.urg==='r'?'var(--danger)':'var(--warning)',
      title: `Permit action needed`,
      sub: `${p.num} · ${p.type} · Exp ${p.expiry}`,
      meta: p.urg==='r'?'Expired':'Expiring',
      metaColor: p.urg==='r'?'var(--danger)':'var(--warning)',
      onClick: `nav('field',document.getElementById('nav-field'))`,
      cta: 'View',
      ctaFn: `nav('field',document.getElementById('nav-field'));renderPermits()`,
    });
  });

  // 5. Client next actions (urgent ones)
  Object.entries(clientProfiles).forEach(([name,p]) => {
    if(p.nextAction?.urgent) {
      actions.push({
        urgency: 60,
        dot: 'var(--amber)',
        title: p.nextAction.text,
        sub: `${name} · ${p.nextAction.due}`,
        meta: p.nextAction.due,
        metaColor: 'var(--amber)',
        onClick: `openCM('${name}')`,
        cta: 'Open',
        ctaFn: `openCM('${name}')`,
      });
    }
  });

  // 6. Large viewed invoices (>$1000, not yet paid)
  invoices.filter(i=>i.status==='viewed'&&i.amount>=1000).forEach(inv => {
    actions.push({
      urgency: 50 + inv.amount/1000,
      dot: 'var(--blue)',
      title: `Invoice viewed, not yet paid — ${inv.client}`,
      sub: `${inv.num} · $${inv.amount.toLocaleString()} · Due ${inv.due}`,
      meta: `$${inv.amount.toLocaleString()}`,
      metaColor: 'var(--blue)',
      onClick: `nav('money',document.getElementById('nav-money'))`,
      cta: 'Pay Link',
      ctaFn: `openInvSendPayLink(${invoices.indexOf(inv)})`,
    });
  });

  // Sort by urgency descending, cap at 8 items
  actions.sort((a,b)=>b.urgency-a.urgency);
  const topActions = actions.slice(0,8);

  set('dash-action-count', topActions.length);
  setHtml('dash-actions', topActions.length
    ? topActions.map(a=>`
      <div class="action-item" onclick="${a.onClick}">
        <div class="action-dot" style="background:${a.dot}"></div>
        <div class="action-body">
          <div class="action-title">${a.title}</div>
          <div class="action-sub">${a.sub}</div>
        </div>
        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0">
          <div class="action-meta" style="color:${a.metaColor}">${a.meta}</div>
          <button class="ar-action-btn" onclick="event.stopPropagation();${a.ctaFn}" style="font-size:10.5px;padding:2px 7px">${a.cta}</button>
        </div>
      </div>`).join('')
    : '<div style="padding:20px;text-align:center;font-size:13px;color:var(--success)">✓ All clear — nothing urgent today</div>');
}

// ============================================================
// INIT — run health scores + initial renders
// ============================================================
// ← init moved to end of file after all definitions


// ============================================================
// BRANDING SYSTEM — persistent across app + documents
// ============================================================
const BRAND_DEFAULTS = {
  bizName:    'Your Company Name',
  tagline:    'Licensed · Bonded · Insured',
  phone:      '',
  email:      '',
  license:    '',
  website:    '',
  address:    '',
  accentHex:  '#C8780A',
  accentName: 'Copper Amber',
  logoEmoji:  '⚡',
  logoStyle:  'emoji', // 'emoji' | 'text' | 'image'
  logoUrl:    '',
  fontStyle:  'bebas',  // 'bebas' | 'system' | 'mono'
  tagOnDocs:  true,
  tagText:    'Powered by Amp CRM',
};

// Load from localStorage or use defaults
let brand = (() => {
  try {
    const saved = localStorage.getItem('amp_brand');
    return saved ? { ...BRAND_DEFAULTS, ...JSON.parse(saved) } : { ...BRAND_DEFAULTS };
  } catch(e) { return { ...BRAND_DEFAULTS }; }
})();

function saveBrand() {
  try { localStorage.setItem('amp_brand', JSON.stringify(brand)); } catch(e) {}
}

function applyBrandToApp() {
  // Sidebar name + tagline
  const nameEl = document.getElementById('brand-name-display');
  const tagEl  = document.getElementById('brand-tagline-display');
  if(nameEl) nameEl.textContent = brand.logoEmoji + ' ' + brand.bizName;
  if(tagEl)  tagEl.textContent  = brand.tagline;

  // Accent color CSS variable
  document.documentElement.style.setProperty('--brand-accent', brand.accentHex);

  // Topbar business name (if element exists)
  const tbBiz = document.getElementById('topbar-biz-name');
  if(tbBiz) tbBiz.textContent = brand.bizName;
}

const ACCENT_PRESETS = [
  { name:'Copper Amber', hex:'var(--amber)' },
  { name:'Voltage Blue',    hex:'var(--blue)' },
  { name:'Power Red',       hex:'#ef4444' },
  { name:'Ground Green',    hex:'#22c55e' },
  { name:'Arc Orange',      hex:'#f97316' },
  { name:'Conduit Purple',  hex:'#a855f7' },
  { name:'Clean White',     hex:'#e2e8f0' },
  { name:'Copper',          hex:'#b45309' },
];

function openBrandSettings() {
  document.getElementById('modal-title').textContent = '🎨 Brand Settings';

  const swatches = ACCENT_PRESETS.map(p => `
    <div class="brand-color-swatch ${p.hex===brand.accentHex?'active':''}"
      style="background:${p.hex}"
      title="${p.name}"
      onclick="previewBrandAccent('${p.hex}',this)"></div>`).join('');

  document.getElementById('modal-body').innerHTML = `
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px">

      <!-- LEFT: inputs -->
      <div>
        <div class="form-group">
          <label class="form-label">Business Name</label>
          <input class="form-input" id="b-name" value="${brand.bizName}" oninput="livePreviewBrand()">
        </div>
        <div class="form-group">
          <label class="form-label">Tagline</label>
          <input class="form-input" id="b-tag" value="${brand.tagline}" oninput="livePreviewBrand()">
        </div>
        <div class="form-group">
          <label class="form-label">Phone</label>
          <input class="form-input" id="b-phone" value="${brand.phone}">
        </div>
        <div class="form-group">
          <label class="form-label">Email</label>
          <input class="form-input" id="b-email" value="${brand.email}">
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">License #</label>
            <input class="form-input" id="b-license" value="${brand.license}">
          </div>
          <div class="form-group">
            <label class="form-label">Website</label>
            <input class="form-input" id="b-website" value="${brand.website}">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Address / Service Area</label>
          <input class="form-input" id="b-addr" value="${brand.address}">
        </div>

        <!-- Logo emoji -->
        <div class="form-group">
          <label class="form-label">Logo Icon</label>
          <div style="display:flex;gap:8px;flex-wrap:wrap">
            ${['⚡','🔌','💡','🛠️','🔧','⚙️','🏠','🏗️'].map(e =>
              `<span style="font-size:24px;cursor:pointer;padding:4px 6px;border-radius:6px;border:1px solid ${brand.logoEmoji===e?'var(--yellow)':'var(--border)'};background:${brand.logoEmoji===e?'var(--yellow-glow)':'transparent'}"
                onclick="previewLogoEmoji('${e}',this)">${e}</span>`
            ).join('')}
          </div>
        </div>

        <!-- Accent color -->
        <div class="form-group">
          <label class="form-label">Accent Color</label>
          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap" id="swatch-row">
            ${swatches}
            <label style="display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-dim);cursor:pointer">
              <input type="color" id="b-accent-custom" value="${brand.accentHex}"
                style="width:28px;height:28px;border:none;background:none;cursor:pointer;border-radius:6px"
                oninput="previewBrandAccent(this.value,null)"> Custom
            </label>
          </div>
        </div>
      </div>

      <!-- RIGHT: live preview -->
      <div>
        <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:10px">Live Preview</div>

        <!-- App sidebar preview -->
        <div style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:12px">
          <div style="font-size:10px;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px">Sidebar</div>
          <div style="display:flex;align-items:center;gap:10px">
            <span id="prev-logo-emoji" style="font-size:24px">${brand.logoEmoji}</span>
            <div>
              <div id="prev-biz-name" style="font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:${brand.accentHex}">${brand.bizName}</div>
              <div id="prev-biz-tag" style="font-size:9px;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase">${brand.tagline}</div>
            </div>
          </div>
        </div>

        <!-- Invoice / Quote doc preview -->
        <div class="brand-preview-doc" id="doc-preview" style="--preview-accent:${brand.accentHex}">
          <div class="brand-preview-header">
            <div>
              <div style="font-size:17px;font-weight:800;color:#1a1a1a" id="prev-doc-name">${brand.logoEmoji} ${brand.bizName}</div>
              <div style="font-size:11px;color:#666;margin-top:2px" id="prev-doc-tag">${brand.tagline}</div>
              <div style="font-size:10px;color:#888;margin-top:1px" id="prev-doc-phone">${brand.phone} · ${brand.email}</div>
            </div>
            <div style="text-align:right">
              <div style="font-size:18px;font-weight:700;color:${brand.accentHex}" id="prev-doc-num">INV-0088</div>
              <div style="font-size:10px;color:#888">License: ${brand.license}</div>
            </div>
          </div>
          <div style="font-size:11px;color:#888;display:flex;justify-content:space-between">
            <span>Bill to: <strong style="color:#1a1a1a">Sarah Mitchell</strong></span>
            <span>Due: Feb 24, 2026</span>
          </div>
          <div style="margin:10px 0;background:#f8f8f8;border-radius:6px;padding:8px 10px">
            <div style="display:flex;justify-content:space-between;font-size:11px"><span>200A Panel Upgrade</span><span>$2,800</span></div>
          </div>
          <div style="display:flex;justify-content:space-between;font-size:13px;font-weight:700;border-top:2px solid ${brand.accentHex};padding-top:6px">
            <span>TOTAL DUE</span><span style="color:${brand.accentHex}" id="prev-doc-accent">$2,800</span>
          </div>
          ${brand.tagOnDocs?`<div style="text-align:center;margin-top:8px;font-size:9px;color:#bbb">${brand.tagText}</div>`:''}
        </div>

        <!-- "Powered by" toggle -->
        <label style="display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--text-dim);cursor:pointer">
          <input type="checkbox" id="b-tag-on-docs" ${brand.tagOnDocs?'checked':''} style="accent-color:var(--amber)">
          Show "${brand.tagText}" on documents
        </label>
      </div>
    </div>`;

  document.getElementById('modal-footer').innerHTML = `
    <button class="btn btn-ghost" onclick="resetBrand()">↺ Reset to Default</button>
    <span style="flex:1"></span>
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="saveBrandSettings()">✓ Save Branding</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function previewBrandAccent(hex, swatchEl) {
  // Update swatch active state
  document.querySelectorAll('.brand-color-swatch').forEach(s => s.classList.remove('active'));
  if(swatchEl) swatchEl.classList.add('active');
  // Live preview
  const els = ['prev-doc-accent'];
  els.forEach(id => { const el = document.getElementById(id); if(el) el.style.color = hex; });
  const header = document.querySelector('.brand-preview-header');
  if(header) header.style.borderBottomColor = hex;
  const totalBorder = document.querySelector('.brand-preview-doc [style*="border-top"]');
  if(totalBorder) totalBorder.style.borderTopColor = hex;
  document.getElementById('prev-biz-name').style.color = hex;
}

function previewLogoEmoji(emoji, el) {
  document.querySelectorAll('#modal-body span[onclick*="previewLogoEmoji"]').forEach(s => {
    s.style.borderColor = 'var(--border)'; s.style.background = 'transparent';
  });
  el.style.borderColor = 'var(--yellow)'; el.style.background = 'var(--yellow-glow)';
  const prev = document.getElementById('prev-logo-emoji');
  if(prev) prev.textContent = emoji;
  livePreviewBrand();
}

function livePreviewBrand() {
  const name = document.getElementById('b-name')?.value || brand.bizName;
  const tag  = document.getElementById('b-tag')?.value  || brand.tagline;
  const emoji = document.getElementById('prev-logo-emoji')?.textContent || brand.logoEmoji;
  const prevName = document.getElementById('prev-biz-name');
  const prevTag  = document.getElementById('prev-biz-tag');
  const prevDoc  = document.getElementById('prev-doc-name');
  const prevDocT = document.getElementById('prev-doc-tag');
  if(prevName) prevName.textContent = name;
  if(prevTag)  prevTag.textContent  = tag;
  if(prevDoc)  prevDoc.textContent  = emoji + ' ' + name;
  if(prevDocT) prevDocT.textContent = tag;
}

function saveBrandSettings() {
  brand.bizName    = document.getElementById('b-name')?.value || brand.bizName;
  brand.tagline    = document.getElementById('b-tag')?.value  || brand.tagline;
  brand.phone      = document.getElementById('b-phone')?.value  || brand.phone;
  brand.email      = document.getElementById('b-email')?.value  || brand.email;
  brand.license    = document.getElementById('b-license')?.value || brand.license;
  brand.website    = document.getElementById('b-website')?.value || brand.website;
  brand.address    = document.getElementById('b-addr')?.value  || brand.address;
  brand.tagOnDocs  = document.getElementById('b-tag-on-docs')?.checked ?? brand.tagOnDocs;
  // Accent from active swatch or custom picker
  const activeSwatch = document.querySelector('.brand-color-swatch.active');
  if(activeSwatch) brand.accentHex = activeSwatch.style.background;
  const customPicker = document.getElementById('b-accent-custom');
  if(customPicker && !activeSwatch) brand.accentHex = customPicker.value;
  // Logo emoji from preview
  const prevEmoji = document.getElementById('prev-logo-emoji');
  if(prevEmoji) brand.logoEmoji = prevEmoji.textContent;
  saveBrand();
  applyBrandToApp();
  closeModal();
  flash('✓ Branding saved — applied to app and all documents');
}

function resetBrand() {
  if(!confirm('Reset all branding to default?')) return;
  brand = { ...BRAND_DEFAULTS };
  saveBrand();
  applyBrandToApp();
  closeModal();
  flash('Branding reset to default ✓');
}

// Inject brand into invoice print
function openPrintView() {
  const sel = document.getElementById('print-inv-sel');
  const inv = invoices[parseInt(sel?.value)||0];
  if(!inv) { closeModal(); return; }
  closeModal();
  const accentColor = brand.accentHex;
  const printWin = window.open('','_blank','width=800,height=900');
  printWin.document.write(`<!DOCTYPE html><html><head><title>Invoice ${inv.num} — ${brand.bizName}</title>
  <style>
    * { margin:0;padding:0;box-sizing:border-box; }
    body { font-family:-apple-system,'Segoe UI',sans-serif; color:#1a1a1a; padding:48px; max-width:740px; margin:0 auto; }
    .header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:36px;padding-bottom:20px;border-bottom:3px solid ${accentColor}; }
    .biz-name { font-size:24px;font-weight:800;letter-spacing:-0.5px; }
    .biz-sub { font-size:12px;color:#666;margin-top:3px; }
    .inv-num { font-size:22px;font-weight:700;color:${accentColor}; }
    .inv-date { font-size:12px;color:#888;margin-top:4px; }
    .section-title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#888;margin-bottom:6px; }
    .bill-to { font-size:15px;font-weight:600; }
    .bill-addr { font-size:12px;color:#555;margin-top:2px; }
    table { width:100%;border-collapse:collapse;margin-bottom:20px; }
    th { text-align:left;padding:9px 11px;background:#f8f8f8;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#555; }
    td { padding:10px 11px;border-bottom:1px solid #eee;font-size:13px; }
    td:last-child,th:last-child { text-align:right; }
    .total-row td { font-size:16px;font-weight:700;border-top:2px solid ${accentColor};border-bottom:none;padding-top:12px; }
    .total-row td:last-child { color:${accentColor}; }
    .payment-box { background:#fffdf0;border:2px solid ${accentColor};border-radius:10px;padding:16px;margin-top:20px; }
    .payment-title { font-size:12px;font-weight:700;margin-bottom:8px; }
    .pay-method { font-size:11px;color:#555;margin-bottom:3px; }
    .badge { display:inline-block;padding:2px 8px;border-radius:16px;font-size:10px;font-weight:600; }
    .badge-pending { background:#fff3cd;color:#856404; }
    .badge-complete { background:#d4edda;color:#155724; }
    .badge-overdue { background:#f8d7da;color:#721c24; }
    .powered-by { text-align:center;margin-top:24px;font-size:10px;color:#ccc; }
    @media print { button { display:none; } }
  </style></head><body>
  <div class="header">
    <div>
      <div class="biz-name">${brand.logoEmoji} ${brand.bizName}</div>
      <div class="biz-sub">${brand.tagline}</div>
      <div class="biz-sub">License ${brand.license} · ${brand.phone} · ${brand.email}</div>
      <div class="biz-sub">${brand.address}</div>
    </div>
    <div style="text-align:right">
      <div class="inv-num">${inv.num}</div>
      <div class="inv-date">Issued: ${inv.issued}</div>
      <div class="inv-date">Due: ${inv.due}</div>
      <span class="badge badge-${inv.status}">${inv.status.toUpperCase()}</span>
    </div>
  </div>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px">
    <div><div class="section-title">Bill To</div>
      <div class="bill-to">${inv.client}</div>
      <div class="bill-addr">${clientProfiles[inv.client]?.addr||''}</div>
      <div class="bill-addr">${clientProfiles[inv.client]?.phone||''}</div>
    </div>
    <div><div class="section-title">Job Details</div>
      <div class="bill-to">${inv.job}</div>
      <div class="bill-addr">${clientProfiles[inv.client]?.addr||''}</div>
    </div>
  </div>
  <table>
    <thead><tr><th>Description</th><th>Qty</th><th>Rate</th><th>Amount</th></tr></thead>
    <tbody><tr><td>${inv.job}</td><td>1</td><td>$${inv.amount.toLocaleString()}</td><td>$${inv.amount.toLocaleString()}</td></tr></tbody>
    <tfoot>
      <tr><td colspan="3">Subtotal</td><td>$${inv.amount.toLocaleString()}</td></tr>
      <tr><td colspan="3">Tax</td><td>$0.00</td></tr>
      <tr class="total-row"><td colspan="3"><strong>AMOUNT DUE</strong></td><td><strong>$${inv.amount.toLocaleString()}</strong></td></tr>
    </tfoot>
  </table>
  <div class="payment-box">
    <div class="payment-title">How to Pay</div>
    <div class="pay-method">• <strong>Card:</strong> Pay online at ${brand.website}/pay</div>
    <div class="pay-method">• <strong>Zelle:</strong> ${brand.email}</div>
    <div class="pay-method">• <strong>Check:</strong> Payable to ${brand.bizName}</div>
  </div>
  ${brand.tagOnDocs?`<div class="powered-by">${brand.tagText}</div>`:''}
  <div style="margin-top:24px;text-align:center"><button onclick="window.print()" style="padding:10px 28px;background:${accentColor};border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;color:${accentColor==='#e2e8f0'?'#1a1a1a':'#1a1a1a'}">🖨 Print / Save as PDF</button></div>
  </body></html>`);
  printWin.document.close();
}

// ============================================================
// QUOTE PDF PREVIEW
// ============================================================
function previewQuotePDF() {
  const client = getQuoteClient();
  const total  = getQuoteTotal();
  if(!total) { flash('⚠️ Add line items first'); return; }
  const lines  = getQuoteLineItems();
  const accentColor = brand.accentHex;
  const quoteNum = 'Q-' + String(quoteCounter).padStart(3,'0');

  const printWin = window.open('','_blank','width=800,height=900');
  const linesHTML = lines.length
    ? lines.map(l=>`<tr><td>${l.name}</td><td>${l.qty}</td><td>$${l.unitPrice||0}</td><td>$${l.total||l.unitPrice*l.qty||0}</td></tr>`).join('')
    : `<tr><td colspan="3">Electrical work as quoted</td><td>$${total.toLocaleString()}</td></tr>`;

  printWin.document.write(`<!DOCTYPE html><html><head><title>Quote ${quoteNum} — ${brand.bizName}</title>
  <style>
    * { margin:0;padding:0;box-sizing:border-box; }
    body { font-family:-apple-system,'Segoe UI',sans-serif; color:#1a1a1a; padding:48px; max-width:740px; margin:0 auto; }
    .header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;padding-bottom:16px;border-bottom:3px solid ${accentColor}; }
    .biz-name { font-size:24px;font-weight:800; }
    .biz-sub { font-size:12px;color:#666;margin-top:2px; }
    .quote-num { font-size:22px;font-weight:700;color:${accentColor}; }
    .quote-badge { display:inline-block;padding:3px 10px;border-radius:16px;background:#e8f4ff;color:#1d4ed8;font-size:11px;font-weight:600;margin-top:4px; }
    table { width:100%;border-collapse:collapse;margin:16px 0; }
    th { text-align:left;padding:9px 11px;background:#f8f8f8;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#555; }
    td { padding:10px 11px;border-bottom:1px solid #eee;font-size:13px; }
    td:last-child,th:last-child { text-align:right; }
    .total-box { background:#f8f8f8;border-radius:10px;padding:14px 16px;margin-top:8px; }
    .total-row { display:flex;justify-content:space-between;font-size:16px;font-weight:700; }
    .accept-box { border:2px dashed ${accentColor};border-radius:10px;padding:20px;margin-top:24px; }
    .accept-title { font-size:14px;font-weight:700;margin-bottom:12px; }
    .sig-line { border-bottom:1px solid #ccc;margin:8px 0;height:40px; }
    .powered-by { text-align:center;margin-top:24px;font-size:10px;color:#ccc; }
    .validity { background:rgba(200,120,10,.1);border:1px solid rgba(200,120,10,.3);border-radius:8px;padding:10px 12px;margin-bottom:16px;font-size:12px;color:#856404; }
    @media print { button { display:none; } }
  </style></head><body>
  <div class="header">
    <div>
      <div class="biz-name">${brand.logoEmoji} ${brand.bizName}</div>
      <div class="biz-sub">${brand.tagline} · License ${brand.license}</div>
      <div class="biz-sub">${brand.phone} · ${brand.email}</div>
    </div>
    <div style="text-align:right">
      <div class="quote-num">${quoteNum}</div>
      <div style="font-size:12px;color:#888;margin-top:4px">Date: Feb 19, 2026</div>
      <span class="quote-badge">ESTIMATE / QUOTE</span>
    </div>
  </div>

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:20px">
    <div>
      <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:5px">Prepared For</div>
      <div style="font-size:15px;font-weight:600">${client||'Client'}</div>
      <div style="font-size:12px;color:#555">${clientProfiles[client]?.addr||''}</div>
    </div>
    <div>
      <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:5px">Prepared By</div>
      <div style="font-size:15px;font-weight:600">${brand.bizName}</div>
      <div style="font-size:12px;color:#555">${brand.address}</div>
    </div>
  </div>

  <div class="validity">⏰ This quote is valid for 30 days. Prices may change after ${(()=>{const d=new Date();d.setDate(d.getDate()+30);return d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});})()}.</div>

  <table>
    <thead><tr><th>Description</th><th>Qty</th><th>Unit Price</th><th>Total</th></tr></thead>
    <tbody>${linesHTML}</tbody>
  </table>

  <div class="total-box">
    <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;color:#666"><span>Subtotal</span><span>$${total.toLocaleString()}</span></div>
    <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px;color:#666"><span>Tax (materials)</span><span>Included</span></div>
    <div class="total-row"><span>ESTIMATE TOTAL</span><span style="color:${accentColor}">$${total.toLocaleString()}</span></div>
  </div>

  <div class="accept-box">
    <div class="accept-title">✍️ Acceptance — Sign to Approve This Quote</div>
    <div style="display:grid;grid-template-columns:2fr 1fr;gap:20px">
      <div>
        <div style="font-size:11px;color:#888;margin-bottom:4px">Client Signature</div>
        <div class="sig-line"></div>
        <div style="font-size:11px;color:#888;margin-bottom:4px;margin-top:8px">Print Name</div>
        <div class="sig-line"></div>
      </div>
      <div>
        <div style="font-size:11px;color:#888;margin-bottom:4px">Date</div>
        <div class="sig-line"></div>
        <div style="font-size:12px;color:#555;margin-top:12px">By signing, you authorize ${brand.bizName} to proceed with the above scope of work.</div>
      </div>
    </div>
  </div>
  ${brand.tagOnDocs?`<div class="powered-by">${brand.tagText}</div>`:''}
  <div style="margin-top:20px;text-align:center"><button onclick="window.print()" style="padding:10px 28px;background:${accentColor};border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer">🖨 Print / Save as PDF</button></div>
  </body></html>`);
  printWin.document.close();
}

// ============================================================
// PROFITABILITY — full renderProfitability
// ============================================================
function renderProfitability() {
  // ── Build job data from live array ───────────────────────
  // Margin estimation: use job.margin if set, else derive from type benchmarks
  const TYPE_MAP = {
    panel:'Panel', ev:'EV', svc:'Service', inst:'Commercial',
    safe:'Safety', outlets:'Outlets', lighting:'Lighting'
  };
  const BENCH_MARGIN = {
    Panel:65, EV:72, Service:42, Commercial:58, Safety:60,
    Outlets:55, Lighting:58, Other:52
  };
  // Material cost ratio by type (cost = rev * ratio)
  const MAT_RATIO = {
    Panel:0.22, EV:0.18, Service:0.35, Commercial:0.28,
    Safety:0.20, Outlets:0.30, Lighting:0.25, Other:0.28
  };

  const jobData = jobs
    .filter(j => j.value > 0)
    .map(j => {
      const type = TYPE_MAP[j.type] || 'Other';
      const margin = j.margin || BENCH_MARGIN[type] || 55;
      const rev  = j.value;
      const cost = Math.round(rev * (MAT_RATIO[type] || 0.28));
      return { j: j.id + ' ' + j.name, rev, cost, margin, type, tech: j.tech };
    });

  if (!jobData.length) {
    // No jobs yet — show empty state
    const ptEl = document.getElementById('profit-table');
    if (ptEl) ptEl.innerHTML = `<tr><td colspan="5" style="padding:20px;text-align:center;color:var(--text-muted)">No jobs with value yet</td></tr>`;
    return;
  }

  const totalRev  = jobData.reduce((s,r) => s+r.rev, 0);
  const totalCost = jobData.reduce((s,r) => s+r.cost, 0);
  const avgMargin = Math.round(jobData.reduce((s,r) => s+r.margin, 0) / jobData.length);
  const matCost   = Math.round(totalCost * 0.55);

  // KPIs
  const kpiMap = {
    'p-avg-margin': avgMargin + '%',
    'p-revenue':    '$' + totalRev.toLocaleString(),
    'p-materials':  '$' + matCost.toLocaleString()
  };
  Object.entries(kpiMap).forEach(([id,v]) => { const el=document.getElementById(id); if(el) el.textContent=v; });

  // Best type
  const typeMargins = {};
  jobData.forEach(r => {
    if (!typeMargins[r.type]) typeMargins[r.type] = {sum:0, cnt:0};
    typeMargins[r.type].sum += r.margin;
    typeMargins[r.type].cnt++;
  });
  const margins = Object.entries(typeMargins)
    .map(([type,d]) => ({type, pct: Math.round(d.sum/d.cnt)}))
    .sort((a,b) => b.pct - a.pct);

  const best = margins[0]?.type || '—';
  const bestEl = document.getElementById('p-best-type');
  if (bestEl) bestEl.textContent = best;

  // Margin bars
  const mbarEl = document.getElementById('margin-bars');
  if (mbarEl) {
    mbarEl.innerHTML = margins.map(m => {
      const col = m.pct>=65 ? 'var(--green)' : m.pct>=50 ? 'var(--yellow)' : 'var(--orange)';
      return `<div style="margin-bottom:14px">
        <div style="display:flex;justify-content:space-between;margin-bottom:4px">
          <span style="font-size:13px">${m.type} <span style="font-size:11px;color:var(--text-muted)">(${typeMargins[m.type].cnt} jobs)</span></span>
          <span style="font-family:'JetBrains Mono',monospace;font-size:13px;color:${col}">${m.pct}%</span>
        </div>
        <div class="profit-bar"><div class="profit-fill" style="width:${m.pct}%;background:${col}"></div></div>
      </div>`;
    }).join('');
  }

  // Insight
  const insightEl = document.getElementById('profit-insight');
  if (insightEl && margins.length) {
    const worst = margins[margins.length-1];
    insightEl.textContent = `${best} jobs average ${margins[0].pct}% margin — your most profitable category. ${worst.type} at ${worst.pct}% — review pricing or material costs.`;
  }

  // Revenue breakdown by type
  const typeRevenue = {};
  jobData.forEach(r => { typeRevenue[r.type] = (typeRevenue[r.type]||0) + r.rev; });
  const revTotal = Object.values(typeRevenue).reduce((s,v)=>s+v, 0);
  const revColors = {Panel:'var(--yellow)',EV:'var(--blue)',Service:'var(--orange)',Commercial:'var(--purple)',Safety:'var(--green)',Outlets:'var(--blue)',Lighting:'var(--amber)'};
  const revEl = document.getElementById('revenue-breakdown');
  if (revEl) {
    revEl.innerHTML = Object.entries(typeRevenue)
      .sort((a,b) => b[1]-a[1])
      .map(([type,rev]) => {
        const pct = Math.round(rev/revTotal*100);
        const col = revColors[type] || 'var(--text-muted)';
        return `<div style="margin-bottom:12px">
          <div style="display:flex;justify-content:space-between;margin-bottom:4px;font-size:13px">
            <span>${type}</span>
            <span style="font-family:'JetBrains Mono',monospace;color:${col}">$${rev.toLocaleString()} <span style="color:var(--text-muted);font-size:11px">(${pct}%)</span></span>
          </div>
          <div style="background:var(--surface3);border-radius:4px;height:8px;overflow:hidden">
            <div style="width:${pct}%;height:100%;background:${col};border-radius:4px;transition:width .4s"></div>
          </div>
        </div>`;
      }).join('')
      + `<div style="border-top:1px solid var(--border);margin-top:12px;padding-top:10px;display:flex;justify-content:space-between;font-size:13px;font-weight:700">
          <span>Total</span><span style="font-family:'JetBrains Mono',monospace;color:var(--amber)">$${revTotal.toLocaleString()}</span>
        </div>`;
  }

  // Job table
  const ptEl = document.getElementById('profit-table');
  if (ptEl) {
    ptEl.innerHTML = [...jobData].sort((a,b)=>b.margin-a.margin).map(r => {
      const gross = r.rev - r.cost;
      const col = r.margin>=65?'var(--green)':r.margin>=50?'var(--yellow)':'var(--red)';
      return `<tr>
        <td style="font-size:12.5px">${r.j}</td>
        <td style="font-family:'JetBrains Mono',monospace;color:var(--amber)">$${r.rev.toLocaleString()}</td>
        <td style="font-family:'JetBrains Mono',monospace;color:var(--text-dim)">$${r.cost.toLocaleString()}</td>
        <td style="font-family:'JetBrains Mono',monospace;color:var(--success)">$${gross.toLocaleString()}</td>
        <td><span style="font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:${col}">${r.margin}%</span></td>
      </tr>`;
    }).join('') || `<tr><td colspan="5" style="padding:16px;text-align:center;color:var(--text-muted)">No job data</td></tr>`;
  }

  // Tech profitability — group live jobs by tech
  const techMap = {};
  jobData.forEach(r => {
    const t = r.tech || 'Unassigned';
    if (!techMap[t]) techMap[t] = { rev:0, cost:0, jobs:0, types:{} };
    techMap[t].rev  += r.rev;
    techMap[t].cost += r.cost;
    techMap[t].jobs++;
    techMap[t].types[r.type] = (techMap[t].types[r.type]||0) + r.rev;
  });
  const techEl = document.getElementById('tech-profit');
  if (techEl) {
    const techEntries = Object.entries(techMap).sort((a,b)=>b[1].rev-a[1].rev);
    techEl.innerHTML = techEntries.map(([name, t]) => {
      const m = t.rev > 0 ? Math.round((t.rev-t.cost)/t.rev*100) : 0;
      const col = m>=60?'var(--green)':m>=45?'var(--yellow)':'var(--red)';
      const topType = Object.entries(t.types).sort((a,b)=>b[1]-a[1])[0]?.[0] || '—';
      return `<div style="padding:12px;background:var(--surface2);border-radius:10px;margin-bottom:10px">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
          <span style="font-size:13px;font-weight:600">${name}</span>
          <span style="font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:${col}">${m}%</span>
        </div>
        <div style="font-size:11px;color:var(--text-muted)">$${t.rev.toLocaleString()} rev · ${t.jobs} job${t.jobs!==1?'s':''} · Best: ${topType}</div>
        <div style="background:var(--surface3);border-radius:4px;height:6px;overflow:hidden;margin-top:8px">
          <div style="width:${m}%;height:100%;background:${col};border-radius:4px"></div>
        </div>
      </div>`;
    }).join('') || '<div style="padding:14px;color:var(--text-muted);font-size:13px">No job data</div>';
  }
}

// ============================================================
// LOCALSTORAGE — persist jobs, clients, permits, invoices, tasks + onboarding
// ============================================================
const STORAGE_KEYS = {
  jobs:'amp_jobs', clients:'amp_clients', permits:'amp_permits',
  invoices:'amp_invoices', tasks:'amp_tasks', setup:'amp_setup',
  counters:'amp_counters',
  quotes:'amp_quotes', sentLog:'amp_sentlog', recurring:'amp_recurring',
  obDone:'amp_ob_done',
  clientProfiles:'amp_client_profiles', materials:'amp_materials',
};

function persistData() {
  try {
    localStorage.setItem(STORAGE_KEYS.jobs,      JSON.stringify(jobs));
    localStorage.setItem(STORAGE_KEYS.clients,   JSON.stringify(clients));
    localStorage.setItem(STORAGE_KEYS.permits,   JSON.stringify(permits));
    localStorage.setItem(STORAGE_KEYS.invoices,  JSON.stringify(invoices));
    localStorage.setItem(STORAGE_KEYS.tasks,     JSON.stringify(tasks));
    localStorage.setItem(STORAGE_KEYS.setup,     JSON.stringify(setupItems.map(i=>i.done)));
    localStorage.setItem(STORAGE_KEYS.counters,  JSON.stringify({jobIdCounter,invoiceCounter,quoteCounter}));
    localStorage.setItem(STORAGE_KEYS.quotes,    JSON.stringify(savedQuotes));
    localStorage.setItem(STORAGE_KEYS.sentLog,   JSON.stringify(sentLog));
    localStorage.setItem(STORAGE_KEYS.recurring, JSON.stringify(recurring));
    localStorage.setItem(STORAGE_KEYS.clientProfiles, JSON.stringify(clientProfiles));
    localStorage.setItem(STORAGE_KEYS.materials, JSON.stringify(materials));
  } catch(e) { console.warn('Storage full or unavailable'); }
}

function loadPersistedData() {
  try {
    const sj = localStorage.getItem(STORAGE_KEYS.jobs);
    if(sj) { const d=JSON.parse(sj); jobs.splice(0,jobs.length,...d); }

    const sc = localStorage.getItem(STORAGE_KEYS.clients);
    if(sc) { const d=JSON.parse(sc); clients.splice(0,clients.length,...d); }

    const sp = localStorage.getItem(STORAGE_KEYS.permits);
    if(sp) { const d=JSON.parse(sp); permits.splice(0,permits.length,...d); }

    const si = localStorage.getItem(STORAGE_KEYS.invoices);
    if(si) { const d=JSON.parse(si); invoices.splice(0,invoices.length,...d); }

    const st = localStorage.getItem(STORAGE_KEYS.tasks);
    if(st) { const d=JSON.parse(st); tasks.splice(0,tasks.length,...d); }

    const ss = localStorage.getItem(STORAGE_KEYS.setup);
    if(ss) { const d=JSON.parse(ss); d.forEach((done,i)=>{ if(setupItems[i]) setupItems[i].done=done; }); }

    const cntrs = localStorage.getItem(STORAGE_KEYS.counters);
    if(cntrs) {
      const d=JSON.parse(cntrs);
      if(d.jobIdCounter)   jobIdCounter   = d.jobIdCounter;
      if(d.invoiceCounter) invoiceCounter = d.invoiceCounter;
      if(d.quoteCounter)   quoteCounter   = d.quoteCounter;
    }

    // ── New arrays ────────────────────────────────────────────────
    const sq = localStorage.getItem(STORAGE_KEYS.quotes);
    if(sq) { const d=JSON.parse(sq); savedQuotes.splice(0,savedQuotes.length,...d); }

    const sl = localStorage.getItem(STORAGE_KEYS.sentLog);
    if(sl) { const d=JSON.parse(sl); sentLog.splice(0,sentLog.length,...d); }

    const rec = localStorage.getItem(STORAGE_KEYS.recurring);
    if(rec) { const d=JSON.parse(rec); recurring.splice(0,recurring.length,...d); }

    // Load extended client data
    const cp = localStorage.getItem(STORAGE_KEYS.clientProfiles);
    if(cp) { 
      try { 
        const d = JSON.parse(cp);
        Object.keys(d).forEach(key => { clientProfiles[key] = d[key]; });
      } catch(e) { console.warn('Could not load clientProfiles:', e); }
    }

    // Load materials inventory
    const mat = localStorage.getItem(STORAGE_KEYS.materials);
    if(mat) { 
      try { 
        const d = JSON.parse(mat);
        materials.splice(0,materials.length,...d);
      } catch(e) { console.warn('Could not load materials:', e); }
    }

  } catch(e) { console.warn('Could not load persisted data:', e); }

  // Show onboarding only on first visit (no localStorage record)
  try {
    if (!localStorage.getItem(STORAGE_KEYS.obDone)) {
      const ob = document.getElementById('onboarding-overlay');
      if (ob) ob.classList.remove('hidden');
    }
  } catch(e) {
    // If localStorage fails, keep onboarding hidden so UI is still usable
  }
}

// Auto-persist after every data mutation
function autoPersist() {
  clearTimeout(window._persistTimer);
  window._persistTimer = setTimeout(persistData, 400);
}

// Patch all write operations to auto-persist
// persistence hooked directly into flash() and closeModal()();

function clearAllData() {
  if(!confirm('⚠️ This will delete ALL your data (jobs, clients, invoices, permits). This cannot be undone.\n\nAre you sure?')) return;
  Object.values(STORAGE_KEYS).forEach(k => { try { localStorage.removeItem(k); } catch(e) {} });
  // Reset ALL in-memory arrays immediately — no reload needed
  jobs.splice(0); clients.splice(0); invoices.splice(0); permits.splice(0);
  tasks.splice(0); savedQuotes.splice(0); sentLog.splice(0); recurring.splice(0);
  payLinks.splice(0);
  // Re-render all views to show empty state
  try { (window.renderDashboard||renderDashboard)(); } catch(e) {}
  try { (window.renderJobs||renderJobs)(); } catch(e) {}
  try { renderInvoices(); } catch(e) {}
  try { renderClients(); } catch(e) {}
  try { renderTasks(); } catch(e) {}
  flash('All data cleared ✓');
}


// ════════════════════════════════════════════════════════════════════
// MATERIALS SYSTEM
// ════════════════════════════════════════════════════════════════════

function getLowStockItems() {
  return materials.filter(m => m.stock <= m.reorder);
}

function getStockStatus(m) {
  if (m.stock === 0)            return { cls: 'mat-stock-low',  label: 'Out of Stock' };
  if (m.stock <= m.reorder)     return { cls: 'mat-stock-low',  label: m.stock + ' ' + m.unit };
  if (m.stock <= m.reorder * 2) return { cls: 'mat-stock-warn', label: m.stock + ' ' + m.unit };
  return                               { cls: 'mat-stock-ok',   label: m.stock + ' ' + m.unit };
}

function renderMaterials() {
  const panel = document.getElementById('field-panel-materials');
  if (!panel) return;

  const low = getLowStockItems();
  const filtered = matCat === 'all' ? materials : materials.filter(m => m.cat === matCat);

  // Update low-stock badge in tab
  const badge = document.getElementById('mat-low-badge');
  if (badge) {
    badge.style.display = low.length ? '' : 'none';
    badge.textContent = low.length;
  }

  const catButtons = Object.entries(MAT_CATS).map(([k,v]) =>
    `<div class="cat-chip${matCat===k?' active':''}" onclick="setMatCat('${k}')">${v}${k!=='all'&&materials.filter(m=>m.cat===k&&m.stock<=m.reorder).length?' ⚠':''}${k!=='all'?' <span style="font-size:10px;color:var(--text-muted);margin-left:2px">('+materials.filter(m=>m.cat===k).length+')</span>':''}</div>`
  ).join('');

  const alertBar = low.length ? `
    <div class="stock-alert-bar" style="margin-bottom:14px">
      <div class="stock-alert-count">${low.length}</div>
      <div>
        <div class="stock-alert-label">Item${low.length>1?'s':''} below reorder threshold</div>
        <div class="stock-alert-sub">${low.map(m=>m.name).slice(0,3).join(' · ')}${low.length>3?' + '+(low.length-3)+' more':''}</div>
      </div>
      <button class="btn btn-sm" style="background:var(--danger-bg);color:var(--danger);border:1px solid rgba(176,28,28,.2);flex-shrink:0" onclick="exportReorderList()">⬇ Reorder List</button>
    </div>` : '';

  const rows = filtered.map(m => {
    const s = getStockStatus(m);
    return `
    <div class="mat-row ${m.stock<=m.reorder?'low-stock':'ok-stock'}" onclick="openMatDetail(${m.id})">
      <div>
        <div class="mat-name">${m.name}</div>
        <div class="mat-sku">${m.supplier} · ${m.sku}</div>
      </div>
      <div class="mat-val" style="color:var(--amber)">$${m.cost.toFixed(2)}</div>
      <div style="text-align:right"><span class="mat-stock-badge ${s.cls}">${m.stock<=m.reorder&&m.stock>0?'⚠ ':''}${s.label}</span></div>
      <div class="mat-val" style="color:var(--text-muted);font-size:11px">min ${m.reorder}</div>
      <button class="btn btn-ghost btn-sm" style="padding:4px 8px;min-height:28px;font-size:12px" onclick="event.stopPropagation();quickAdjustStock(${m.id})" title="Adjust stock">±</button>
    </div>`;
  }).join('');

  const totalValue = filtered.reduce((s,m) => s + m.cost * m.stock, 0);

  panel.innerHTML = `
    <div style="display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap">
      <input class="form-input" style="flex:1;min-width:180px;max-width:260px" placeholder="Search materials..." oninput="filterMaterials(this.value)" id="mat-search">
      <button class="btn btn-ghost btn-sm" onclick="exportReorderList()">⬇ Reorder List</button>
      <button class="btn btn-primary btn-sm" onclick="openModal('add-material')">+ Add Item</button>
    </div>
    ${alertBar}
    <div class="card">
      <div class="mat-cats">${catButtons}</div>
      <div style="display:flex;gap:10px;padding:10px 18px;background:var(--surface2);border-bottom:1px solid var(--border);align-items:center">
        <div style="flex:1;font-size:11px;color:var(--text-muted)">${filtered.length} item${filtered.length!==1?'s':''} · Catalog value <strong style="color:var(--text)">$${totalValue.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2})}</strong></div>
        <div style="font-size:11px;color:var(--danger)">${low.length} below reorder</div>
      </div>
      <div class="mat-head">
        <div class="mat-hc" style="text-align:left">Item</div>
        <div class="mat-hc">Unit Cost</div>
        <div class="mat-hc">On Hand</div>
        <div class="mat-hc">Min Level</div>
        <div></div>
      </div>
      <div id="mat-rows">${rows || '<div style="padding:24px;text-align:center;color:var(--text-muted);font-size:13px">No items in this category</div>'}</div>
    </div>`;
}

function setMatCat(cat) {
  matCat = cat;
  renderMaterials();
}

function filterMaterials(q) {
  const rows = document.querySelectorAll('.mat-row');
  const lower = q.toLowerCase();
  rows.forEach(r => {
    const text = r.textContent.toLowerCase();
    r.style.display = text.includes(lower) ? '' : 'none';
  });
}

function openMatDetail(id) {
  const m = materials.find(x => x.id === id);
  if (!m) return;
  const s = getStockStatus(m);
  const usedInJobs = Object.entries(jobMaterials)
    .filter(([jid, mats]) => mats.some(x => x.matId === id))
    .map(([jid]) => jid);

  // Build a mini edit modal using the existing modal system
  const origDefs = window._matDetailDef;
  const body = `
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px">
      <div class="form-group"><label class="form-label">Item Name</label>
        <input class="form-input" id="md-name" value="${m.name}"></div>
      <div class="form-group"><label class="form-label">Category</label>
        <select class="form-input" id="md-cat">
          ${Object.entries(MAT_CATS).filter(([k])=>k!=='all').map(([k,v])=>`<option value="${k}"${m.cat===k?' selected':''}>${v}</option>`).join('')}
        </select></div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px">
      <div class="form-group"><label class="form-label">Unit Cost ($)</label>
        <input class="form-input" id="md-cost" type="number" step="0.01" value="${m.cost}"></div>
      <div class="form-group"><label class="form-label">On Hand</label>
        <input class="form-input" id="md-stock" type="number" value="${m.stock}"></div>
      <div class="form-group"><label class="form-label">Reorder At</label>
        <input class="form-input" id="md-reorder" type="number" value="${m.reorder}"></div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px">
      <div class="form-group"><label class="form-label">Supplier</label>
        <input class="form-input" id="md-supplier" value="${m.supplier}"></div>
      <div class="form-group"><label class="form-label">SKU / Part #</label>
        <input class="form-input" id="md-sku" value="${m.sku}"></div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px">
      <div class="form-group"><label class="form-label">Unit</label>
        <select class="form-input" id="md-unit">
          ${['ea','roll','stick','pk','box','ft','lb'].map(u=>`<option${m.unit===u?' selected':''}>${u}</option>`).join('')}
        </select></div>
      <div>
        <label class="form-label">Status</label>
        <div style="padding:10px 0"><span class="mat-stock-badge ${s.cls}">${s.label}</span></div>
      </div>
    </div>
    ${usedInJobs.length ? `<div style="margin-top:12px;padding:10px 12px;background:var(--surface2);border-radius:8px;font-size:12px;color:var(--text-dim)">Used in jobs: <strong>${usedInJobs.join(', ')}</strong></div>` : ''}
  `;

  // Temporarily inject into mDefs
  const origNew = window.mDefs ? window.mDefs['mat-detail'] : null;
  if (window.mDefs) {
    window.mDefs['mat-detail'] = {
      title: 'Edit Material',
      body,
      footer: `<button class="btn btn-del btn-sm" onclick="deleteMaterial(${id})">Delete</button><div style="flex:1"></div><button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button><button class="btn btn-primary" onclick="saveMatDetail(${id})">Save Changes</button>`
    };
    openModal('mat-detail');
  }
}

function saveMatDetail(id) {
  const m = materials.find(x => x.id === id);
  if (!m) return;
  m.name    = document.getElementById('md-name')?.value    || m.name;
  m.cat     = document.getElementById('md-cat')?.value     || m.cat;
  m.cost    = parseFloat(document.getElementById('md-cost')?.value) || m.cost;
  m.stock   = parseInt(document.getElementById('md-stock')?.value)  || m.stock;
  m.reorder = parseInt(document.getElementById('md-reorder')?.value)|| m.reorder;
  m.supplier= document.getElementById('md-supplier')?.value|| m.supplier;
  m.sku     = document.getElementById('md-sku')?.value     || m.sku;
  m.unit    = document.getElementById('md-unit')?.value    || m.unit;
  closeModal();
  renderMaterials();
  renderDashStockAlerts();
  flash('Material updated ✓');
}

function deleteMaterial(id) {
  if (!confirm('Remove this item from your catalog?')) return;
  const idx = materials.findIndex(x => x.id === id);
  if (idx >= 0) materials.splice(idx, 1);
  closeModal();
  renderMaterials();
  renderDashStockAlerts();
  flash('Item removed ✓');
}

function quickAdjustStock(id) {
  const m = materials.find(x => x.id === id);
  if (!m) return;
  const delta = prompt(`Adjust stock for "${m.name}"\nCurrent: ${m.stock} ${m.unit}\n\nEnter quantity change (e.g. +5, -2):`);
  if (delta === null) return;
  const num = parseInt(delta);
  if (isNaN(num)) { flash('Invalid quantity'); return; }
  m.stock = Math.max(0, m.stock + num);
  renderMaterials();
  renderDashStockAlerts();
  flash(`Stock updated: ${m.name} now ${m.stock} ${m.unit} ✓`);
}

// ── Add-material modal ────────────────────────────────────────────────
function saveNewMaterial() {
  const name     = document.getElementById('nm-name')?.value?.trim();
  const cat      = document.getElementById('nm-cat')?.value;
  const cost     = parseFloat(document.getElementById('nm-cost')?.value);
  const stock    = parseInt(document.getElementById('nm-stock')?.value || '0');
  const reorder  = parseInt(document.getElementById('nm-reorder')?.value || '0');
  const supplier = document.getElementById('nm-supplier')?.value?.trim() || '';
  const sku      = document.getElementById('nm-sku')?.value?.trim() || '';
  const unit     = document.getElementById('nm-unit')?.value || 'ea';
  if (!name || !cat || isNaN(cost)) { flash('Name, category and cost required'); return; }
  materials.push({ id: matNext++, cat, name, unit, cost, stock, reorder, supplier, sku });
  closeModal();
  autoPersist();
  renderMaterials();
  renderDashStockAlerts();
  flash('Material added to catalog ✓');
}

// ── Export reorder list as CSV ────────────────────────────────────────
function exportReorderList() {
  const low = getLowStockItems();
  if (!low.length) { flash('All stock levels are above reorder threshold'); return; }
  const NL = String.fromCharCode(10);
  const header = 'Item,SKU,Supplier,On Hand,Reorder Level,Unit,Unit Cost';
  const rows = low.map(m =>
    [m.name, m.sku, m.supplier, m.stock, m.reorder, m.unit, '$'+m.cost.toFixed(2)].join(',')
  );
  const csv = [header, ...rows].join(NL);
  const a = document.createElement('a');
  a.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
  a.download = 'amp-reorder-list-' + new Date().toISOString().slice(0,10) + '.csv';
  a.click();
  flash('Reorder list exported ✓');
}

// ── Dashboard stock alert widget ──────────────────────────────────────
function renderDashStockAlerts() {
  const el = document.getElementById('dash-stock-list');
  const card = document.getElementById('dash-stock-card');
  if (!el) return;
  const low = getLowStockItems();
  if (!low.length) {
    el.innerHTML = '<div style="padding:14px 16px;font-size:13px;color:var(--text-muted)">All stock levels OK ✓</div>';
    return;
  }
  el.innerHTML = low.slice(0,5).map(m => `
    <div class="dash-stock-item" onclick="nav('field',document.getElementById('nav-field'));setTimeout(()=>switchHub('field','materials',document.querySelectorAll('#field-tabs .hub-tab')[3]),100)">
      <div>
        <div class="dash-stock-name">${m.name}</div>
        <div class="dash-stock-meta">${m.supplier} · reorder at ${m.reorder}</div>
      </div>
      <div style="text-align:right">
        <div class="dash-stock-qty">${m.stock}</div>
        <div class="dash-stock-unit">${m.unit} left</div>
      </div>
    </div>`).join('') +
    (low.length > 5 ? `<div style="padding:10px 16px;font-size:12px;color:var(--text-muted);text-align:center">+${low.length-5} more items below threshold</div>` : '');
}

// ── Job materials — populate select dropdowns ─────────────────────────
function populateJobMatSelects() {
  const selects = document.querySelectorAll('#job-mat-list select');
  const opts = '<option value="">— Select material —</option>' +
    Object.entries(MAT_CATS).filter(([k])=>k!=='all').map(([k,v]) =>
      `<optgroup label="${v}">` +
      materials.filter(m=>m.cat===k).map(m =>
        `<option value="${m.id}" data-cost="${m.cost}" data-unit="${m.unit}">${m.name} (${m.stock} ${m.unit} on hand — $${m.cost.toFixed(2)}/${m.unit})</option>`
      ).join('') + '</optgroup>'
    ).join('');
  selects.forEach(s => { s.innerHTML = opts; });
}

function addJobMatRow() {
  const list = document.getElementById('job-mat-list');
  if (!list) return;
  const row = document.createElement('div');
  row.className = 'job-mat-row';
  row.innerHTML = `
    <select class="form-input" style="font-size:12px;min-height:38px" onchange="updateJobMatCost(this)">
      <option value="">— Select material —</option>
    </select>
    <input class="form-input" type="number" min="1" value="1" style="min-height:38px;font-size:13px" oninput="updateJobMatCost(this.closest('.job-mat-row').querySelector('select'))">
    <div class="mat-cost-preview">—</div>
    <button class="inline-btn" style="min-height:38px;font-size:18px" onclick="this.closest('.job-mat-row').remove();recalcJobMatTotal()" type="button">×</button>
  `;
  list.appendChild(row);
  populateJobMatSelects();
}

function updateJobMatCost(sel) {
  const opt = sel.options[sel.selectedIndex];
  const cost = parseFloat(opt?.dataset?.cost || 0);
  const unit = opt?.dataset?.unit || '';
  const row = sel.closest('.job-mat-row');
  const qty = parseInt(row?.querySelector('input[type=number]')?.value || 1);
  const preview = row?.querySelector('.mat-cost-preview');
  if (preview) {
    if (cost > 0) {
      preview.textContent = '$' + (cost * qty).toFixed(2);
      preview.style.color = 'var(--amber)';
    } else {
      preview.textContent = '—';
      preview.style.color = 'var(--text-muted)';
    }
  }
  recalcJobMatTotal();
}

function recalcJobMatTotal() {
  let total = 0;
  document.querySelectorAll('.job-mat-row').forEach(row => {
    const sel = row.querySelector('select');
    const opt = sel?.options[sel?.selectedIndex];
    const cost = parseFloat(opt?.dataset?.cost || 0);
    const qty  = parseInt(row.querySelector('input[type=number]')?.value || 1);
    total += cost * qty;
  });
  const el = document.getElementById('job-mat-total');
  if (el) el.textContent = '$' + total.toFixed(2);
}

// ── Deduct materials when a job is completed ──────────────────────────
function deductJobMaterials(jobId) {
  const mats = jobMaterials[jobId];
  if (!mats || !mats.length) return;
  let deducted = [];
  mats.forEach(entry => {
    if (entry.deducted) return;
    const m = materials.find(x => x.id === entry.matId);
    if (!m) return;
    m.stock = Math.max(0, m.stock - entry.qty);
    entry.deducted = true;
    deducted.push(`${entry.qty}× ${m.name}`);
  });
  if (deducted.length) {
    renderDashStockAlerts();
    const badge = document.getElementById('mat-low-badge');
    const low = getLowStockItems();
    if (badge) { badge.style.display = low.length ? '' : 'none'; badge.textContent = low.length; }
    // Non-blocking notification
    setTimeout(() => flash('Stock updated: ' + deducted.slice(0,2).join(', ') + (deducted.length>2?' + more':'') + ' deducted ✓'), 300);
  }
}


// ============================================================
// HUB SYSTEM — tabbed sub-navigation within parent views
// ============================================================

// Map: which original view goes into which hub panel
const HUB_MAP = {
  work: {
    jobs:      { panel: 'work-panel-jobs',       render: ()=>(window.renderJobs||renderJobs)(),        title:'Jobs' },
    schedule:  { panel: 'work-panel-schedule',   render: ()=>(window.renderSchedule||renderSchedule)(), title:'Schedule' },
    recurring: { panel: 'work-panel-recurring',  render: ()=>renderRecurring(),                         title:'Recurring Jobs' },
  },
  money: {
    invoices:  { panel: 'money-panel-invoices',  render: ()=>renderInvoices(),    title:'Invoices' },
    payments:  { panel: 'money-panel-payments',  render: ()=>renderPayments(),    title:'Payments' },
    quote:     { panel: 'money-panel-quote',     render: ()=>{ renderQuotes(); initQuoteBuilder(); }, title:'Estimates' },
  },
  field: {
    permits:   { panel: 'field-panel-permits',   render: ()=>renderPermits(),     title:'Permits' },
    pricebook: { panel: 'field-panel-pricebook', render: ()=>{ renderPb(pbCat); setPbState(pbState||'IL'); }, title:'Price Book' },
    tasks:     { panel: 'field-panel-tasks',     render: ()=>renderTasks(),       title:'Tasks' },
    materials: { panel: 'field-panel-materials', render: ()=>renderMaterials(),   title:'Materials' },
  },
  reports: {
    analytics:     { panel: 'reports-panel-analytics',     render: ()=>renderAnalytics(),     title:'Analytics' },
    profitability: { panel: 'reports-panel-profitability', render: ()=>(window.renderProfitability||renderProfitability)(), title:'Profitability' },
  },
  team: {
    performance: { panel: 'team-panel-performance', render: ()=>renderTechs(),        title:'Team Performance' },
    techsched:   { panel: 'team-panel-techsched',   render: ()=>renderTechSchedule(),  title:'Team Schedule' },
  },
};

// Track which sub-tab is active per hub
const hubActiveTab = { work:'jobs', money:'invoices', field:'permits', reports:'analytics', team:'performance' };

// The original view HTML lives in these source IDs — we'll clone/move content into panels
const VIEW_SOURCE_MAP = {
  'work-panel-jobs':               'view-jobs',
  'work-panel-schedule':           'view-schedule',
  'work-panel-recurring':          'view-recurring',
  'money-panel-invoices':          'view-invoices',
  'money-panel-payments':          'view-payments',
  'money-panel-quote':             'view-quote',
  'field-panel-permits':           'view-permits',
  'field-panel-pricebook':         'view-pricebook',
  'field-panel-tasks':             'view-tasks',
  'reports-panel-analytics':       'view-analytics',
  'reports-panel-profitability':   'view-profitability',
  'team-panel-performance':        'view-techs',
  'team-panel-techsched':          'view-techs', // shares same view, uses tab switching
};

// On first load, move original view contents into hub panels
function initHubPanels() {
  // For each hub panel, move the inner content of the source view into the panel
  const pairs = [
    ['work-panel-jobs',               'view-jobs'],
    ['work-panel-schedule',           'view-schedule'],
    ['work-panel-recurring',          'view-recurring'],
    ['money-panel-invoices',          'view-invoices'],
    ['money-panel-payments',          'view-payments'],
    ['money-panel-quote',             'view-quote'],
    ['field-panel-permits',           'view-permits'],
    ['field-panel-pricebook',         'view-pricebook'],
    ['field-panel-tasks',             'view-tasks'],
    ['reports-panel-analytics',       'view-analytics'],
    ['reports-panel-profitability',   'view-profitability'],
  ];

  pairs.forEach(([panelId, sourceId]) => {
    const panel = document.getElementById(panelId);
    const source = document.getElementById(sourceId);
    if (!panel || !source) return;
    // Move all children from source view into panel
    while (source.firstChild) panel.appendChild(source.firstChild);
    // Hide the now-empty source view (it'll never be navigated to directly)
    source.style.display = 'none';
  });

  // For My Team view: performance tab = tech-grid, sched tab = tech-sched-panel
  // The view-techs already has internal tabs — we embed the whole view
  const teamPerf = document.getElementById('team-panel-performance');
  const teamSched = document.getElementById('team-panel-techsched');
  const tecsView = document.getElementById('view-techs');
  if (teamPerf && tecsView) {
    // Move the full techs view into the performance panel
    while (tecsView.firstChild) teamPerf.appendChild(tecsView.firstChild);
    tecsView.style.display = 'none';
  }
}

function switchHub(hub, tab, tabEl) {
  const hubConfig = HUB_MAP[hub];
  if (!hubConfig || !hubConfig[tab]) return;

  // Update active tab button
  const tabsContainer = document.getElementById(hub + '-tabs');
  if (tabsContainer) {
    tabsContainer.querySelectorAll('.hub-tab').forEach(t => t.classList.remove('active'));
    if (tabEl) tabEl.classList.add('active');
  }

  // Show correct panel, hide others
  Object.values(hubConfig).forEach(cfg => {
    const panel = document.getElementById(cfg.panel);
    if (panel) panel.classList.remove('active');
  });
  const activePanel = document.getElementById(hubConfig[tab].panel);
  if (activePanel) activePanel.classList.add('active');

  // Update page title
  const pt = document.getElementById('page-title');
  if (pt) pt.textContent = hubConfig[tab].title;

  // Run render function
  try { hubConfig[tab].render(); } catch(e) { console.warn('Hub render err:', e); }

  hubActiveTab[hub] = tab;
}

// Override nav() to handle hub routing
const _origNav = nav;
window.nav = function(view, el) {
  // Map old view names → hub + tab
  const hubRoutes = {
    'schedule':     { hub:'work',    tab:'schedule' },
    'jobs':         { hub:'work',    tab:'jobs' },
    'recurring':    { hub:'work',    tab:'recurring' },
    'invoices':     { hub:'money',   tab:'invoices' },
    'payments':     { hub:'money',   tab:'payments' },
    'quote':        { hub:'money',   tab:'quote' },
    'permits':      { hub:'field',   tab:'permits' },
    'pricebook':    { hub:'field',   tab:'pricebook' },
    'tasks':        { hub:'field',   tab:'tasks' },
    'analytics':    { hub:'reports', tab:'analytics' },
    'profitability':{ hub:'reports', tab:'profitability' },
    'techs':        { hub:'team',    tab:'performance' },
  };

  if (hubRoutes[view]) {
    const { hub, tab } = hubRoutes[view];
    // Navigate to the hub view first
    _origNav(hub, document.getElementById('nav-' + hub) || el);
    // Then switch to the right tab within it
    setTimeout(() => {
      const tabsEl = document.getElementById(hub + '-tabs');
      const tabIdx = Object.keys(HUB_MAP[hub]).indexOf(tab);
      const tabBtn = tabsEl?.querySelectorAll('.hub-tab')[tabIdx];
      switchHub(hub, tab, tabBtn);
    }, 10);
  } else {
    _origNav(view, el);
  }
};

// ── Settings page wiring ──────────────────────────────────────────────
function saveSettingsProfile() {
  const name = document.getElementById('sp-name')?.value?.trim() || brand.ownerName || brand.bizName;
  const role = document.getElementById('sp-role')?.value?.trim() || '';
  const phone = document.getElementById('sp-phone')?.value?.trim() || '';
  const email = document.getElementById('sp-email')?.value?.trim() || '';

  // Update brand data
  brand.ownerName = name;
  brand.role = role;
  brand.phone = phone;
  brand.email = email;
  saveBrand();

  // Update sidebar user pill
  const nameEl = document.getElementById('user-display-name');
  const roleEl = document.getElementById('user-display-role');
  const avEl   = document.getElementById('user-av-initials');
  const settingsNameEl = document.getElementById('settings-name-display');
  const settingsAvEl = document.getElementById('settings-avatar');
  const initials = name.split(' ').map(w=>w[0]).join('').toUpperCase().slice(0,2);
  if (nameEl) nameEl.textContent = name;
  if (roleEl) roleEl.textContent = role;
  if (avEl) avEl.textContent = initials;
  if (settingsNameEl) settingsNameEl.textContent = name;
  if (settingsAvEl) settingsAvEl.textContent = initials;

  flash('Profile saved ✓');
}

function updateSettingsBrandPreview() {
  const emojiEl = document.getElementById('settings-brand-emoji');
  const nameEl  = document.getElementById('settings-brand-name');
  const tagEl   = document.getElementById('settings-brand-tag');
  const swatchEl= document.getElementById('settings-brand-swatch');
  const colorEl = document.getElementById('settings-brand-colorname');
  if (emojiEl) emojiEl.textContent = brand.logoEmoji;
  if (nameEl)  nameEl.textContent  = brand.bizName;
  if (tagEl)   tagEl.textContent   = brand.tagline;
  if (swatchEl) swatchEl.style.background = brand.accentHex;
  if (colorEl) colorEl.textContent = brand.accentName || brand.accentHex;
}

// Export data as CSV
// ============================================================
// IMPORT WIZARD
// ============================================================

// State
let importWizard = {
  step: 1,          // 1=source, 2=upload, 3=map, 4=preview, 5=done
  source: null,     // 'jobber'|'housecall'|'servicetitan'|'quickbooks'|'generic'|'manual'
  dataType: 'clients', // 'clients'|'jobs'|'invoices'
  rawText: '',
  parsedRows: [],
  headers: [],
  mapping: {},
  results: { clients:0, jobs:0, invoices:0, skipped:0 },
};

// Field definitions for each data type
const IMPORT_FIELDS = {
  clients: [
    { key:'name',    label:'Name',       required:true,  aliases:['client','customer','full name','contact','company'] },
    { key:'addr',    label:'Address',    required:false, aliases:['address','location','service address','site'] },
    { key:'phone',   label:'Phone',      required:false, aliases:['phone','mobile','cell','telephone'] },
    { key:'email',   label:'Email',      required:false, aliases:['email','e-mail','contact email'] },
    { key:'type',    label:'Type',       required:false, aliases:['type','client type','customer type','residential/commercial'] },
    { key:'source',  label:'Source',     required:false, aliases:['source','lead source','referred by','how they found you'] },
    { key:'notes',   label:'Notes',      required:false, aliases:['notes','comments','description','internal notes'] },
  ],
  jobs: [
    { key:'client',  label:'Client',     required:true,  aliases:['client','customer','contact','account'] },
    { key:'name',    label:'Job Name',   required:false, aliases:['job','title','service','job name','service type','work order'] },
    { key:'addr',    label:'Address',    required:false, aliases:['address','location','site','service address'] },
    { key:'date',    label:'Date',       required:false, aliases:['date','scheduled','start date','job date','service date'] },
    { key:'value',   label:'Value ($)',  required:false, aliases:['value','amount','price','total','revenue','cost','quoted'] },
    { key:'status',  label:'Status',     required:false, aliases:['status','job status','state'] },
    { key:'tech',    label:'Technician', required:false, aliases:['tech','technician','assigned to','assigned','worker','employee'] },
    { key:'notes',   label:'Notes',      required:false, aliases:['notes','description','scope','details'] },
  ],
  invoices: [
    { key:'client',  label:'Client',     required:true,  aliases:['client','customer','bill to','account'] },
    { key:'num',     label:'Invoice #',  required:false, aliases:['invoice','invoice number','invoice #','inv #','number','#'] },
    { key:'amount',  label:'Amount ($)', required:true,  aliases:['amount','total','balance','invoice total','outstanding','due'] },
    { key:'issued',  label:'Issue Date', required:false, aliases:['issued','date','invoice date','created','issued date'] },
    { key:'due',     label:'Due Date',   required:false, aliases:['due','due date','payment due','terms'] },
    { key:'status',  label:'Status',     required:false, aliases:['status','paid','payment status'] },
    { key:'job',     label:'Job Ref',    required:false, aliases:['job','work order','reference','job #','service'] },
  ],
};

// Source templates — what fields each system typically exports
const SOURCE_HINTS = {
  jobber: { clients:['Client Name','Email','Phone','Billing Address','Client Type'],
            jobs:['Client Name','Work Order Title','Scheduled Date','Total Price','Status','Assigned To'],
            invoices:['Client Name','Invoice Number','Invoice Date','Due Date','Total','Status'] },
  housecall: { clients:['Customer Name','Email','Phone','Address','Type'],
               jobs:['Customer','Job Title','Scheduled On','Amount','Status','Technician'],
               invoices:['Customer','Invoice #','Date','Due Date','Balance Due','Status'] },
  servicetitan: { clients:['Name','Email','Phone','Address'],
                  jobs:['Customer','Job Type','Scheduled','Revenue','Status','Tech'],
                  invoices:['Customer','Invoice#','Date','DueDate','Amount','Paid'] },
  quickbooks: { clients:['Customer','Email','Phone','Billing Address'],
                jobs:['Customer','Product/Service','Date','Amount','Status'],
                invoices:['Customer','Invoice No.','Invoice Date','Due Date','Amount Due','Status'] },
  generic: null,
  manual: null,
};

function openImportWizard() {
  // Reset state
  importWizard = { step:1, source:null, dataType:'clients', rawText:'', parsedRows:[], headers:[], mapping:{}, results:{clients:0,jobs:0,invoices:0,skipped:0} };

  document.getElementById('modal-title').textContent = '⬆ Import Data';
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');

  renderImportStep();
}

function renderImportStep() {
  const w = importWizard;
  const bodyEl = document.getElementById('modal-body');
  const footerEl = document.getElementById('modal-footer');

  // Shared step indicator
  const stepDots = [1,2,3,4,5].map(n => {
    const done  = n < w.step;
    const cur   = n === w.step;
    const labels = ['','Source','Upload','Map','Preview','Done'];
    return `<div style="display:flex;flex-direction:column;align-items:center;gap:4px">
      <div style="width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
        background:${done?'var(--success)':cur?'var(--amber)':'var(--surface3)'};
        color:${done||cur?'#fff':'var(--text-muted)'}">
        ${done?'✓':n}
      </div>
      <div style="font-size:9.5px;color:${cur?'var(--amber)':'var(--text-muted)'};font-weight:${cur?700:400}">${labels[n]}</div>
    </div>`;
  }).join('<div style="flex:1;height:2px;background:var(--border);margin-top:13px;border-radius:1px"></div>');

  const stepBar = `<div style="display:flex;align-items:flex-start;padding:16px 20px 14px;border-bottom:1px solid var(--border);gap:0">${stepDots}</div>`;

  if (w.step === 1) {
    // ── STEP 1: Source selection ──────────────────────────────
    bodyEl.innerHTML = stepBar + `
      <div style="padding:14px 20px 4px">
        <div style="font-size:13px;color:var(--text-dim);margin-bottom:12px">Where is your current data? We'll pre-map the columns automatically.</div>
        <div class="import-source-grid">
          <div class="import-source-tile ${w.source==='jobber'?'selected':''}" onclick="selectImportSource('jobber',this)">
            <div class="import-source-icon">🟢</div>
            <div class="import-source-name">Jobber</div>
            <div class="import-source-desc">CSV export from Jobber</div>
          </div>
          <div class="import-source-tile ${w.source==='housecall'?'selected':''}" onclick="selectImportSource('housecall',this)">
            <div class="import-source-icon">🔵</div>
            <div class="import-source-name">Housecall Pro</div>
            <div class="import-source-desc">CSV from Housecall Pro</div>
          </div>
          <div class="import-source-tile ${w.source==='servicetitan'?'selected':''}" onclick="selectImportSource('servicetitan',this)">
            <div class="import-source-icon">🟠</div>
            <div class="import-source-name">ServiceTitan</div>
            <div class="import-source-desc">CSV export from ST</div>
          </div>
          <div class="import-source-tile ${w.source==='quickbooks'?'selected':''}" onclick="selectImportSource('quickbooks',this)">
            <div class="import-source-icon">📊</div>
            <div class="import-source-name">QuickBooks</div>
            <div class="import-source-desc">Customer / invoice export</div>
          </div>
          <div class="import-source-tile ${w.source==='generic'?'selected':''}" onclick="selectImportSource('generic',this)">
            <div class="import-source-icon">📋</div>
            <div class="import-source-name">Spreadsheet / Other</div>
            <div class="import-source-desc">Excel, Google Sheets, CSV</div>
          </div>
          <div class="import-source-tile ${w.source==='manual'?'selected':''}" onclick="selectImportSource('manual',this)">
            <div class="import-source-icon">✍️</div>
            <div class="import-source-name">Enter Manually</div>
            <div class="import-source-desc">Type or paste directly</div>
          </div>
        </div>
      </div>`;
    footerEl.innerHTML = `
      <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
      <span style="flex:1"></span>
      <button class="btn btn-primary" onclick="importNextStep()" ${w.source?'':'disabled'} id="import-next-btn">Next →</button>`;

  } else if (w.step === 2) {
    // ── STEP 2: Upload / Paste ────────────────────────────────
    const sourceLabel = {jobber:'Jobber',housecall:'Housecall Pro',servicetitan:'ServiceTitan',quickbooks:'QuickBooks',generic:'Spreadsheet',manual:'Manual'}[w.source]||w.source;
    bodyEl.innerHTML = stepBar + `
      <div style="padding:14px 20px 4px">
        <div style="font-size:13px;color:var(--text-dim);margin-bottom:12px">What would you like to import from <strong>${sourceLabel}</strong>?</div>
        <div class="import-type-tabs">
          <button class="import-type-tab ${w.dataType==='clients'?'active':''}" onclick="setImportType('clients',this)">👥 Clients</button>
          <button class="import-type-tab ${w.dataType==='jobs'?'active':''}" onclick="setImportType('jobs',this)">🔧 Jobs</button>
          <button class="import-type-tab ${w.dataType==='invoices'?'active':''}" onclick="setImportType('invoices',this)">🧾 Invoices</button>
        </div>
      </div>

      ${w.source !== 'manual' ? `
      <div class="import-drop-zone" id="import-drop-zone"
           ondragover="event.preventDefault();this.classList.add('drag-over')"
           ondragleave="this.classList.remove('drag-over')"
           ondrop="handleImportDrop(event)">
        <input type="file" accept=".csv,.txt,.xlsx" onchange="handleImportFile(this)">
        <div class="import-drop-icon">📂</div>
        <div class="import-drop-title">Drop your CSV here or click to browse</div>
        <div class="import-drop-sub">Supports .csv files exported from ${sourceLabel}</div>
      </div>
      <div style="text-align:center;font-size:12px;color:var(--text-muted);margin:-8px 20px 8px">— or paste data below —</div>` : ''}

      <div class="import-paste-area">
        <textarea id="import-paste" placeholder="${w.source==='manual'
          ? 'Type your data here. One record per line. Use commas or tabs to separate fields.\n\nExample (clients):\nName, Address, Phone, Email\nJohn Smith, 123 Main St Springfield, (555) 200-1234, john@email.com'
          : 'Or paste CSV content directly here...'}"
          oninput="importWizard.rawText=this.value">${w.rawText}</textarea>
        <div class="import-paste-hint">💡 Tip: In ${sourceLabel}, go to Reports → Export → CSV to get your data</div>
      </div>

      <div id="import-sample-hint" style="margin:0 20px 14px;padding:12px 14px;background:var(--surface2);border-radius:8px;font-size:12px;color:var(--text-dim)">
        <strong style="color:var(--text)">Expected columns for ${w.dataType}:</strong><br>
        <span style="font-family:'JetBrains Mono',monospace;font-size:11px">${buildExpectedCols(w.source, w.dataType)}</span>
      </div>`;

    footerEl.innerHTML = `
      <button class="btn btn-ghost" onclick="importPrevStep()">← Back</button>
      <span style="flex:1"></span>
      <button class="btn btn-primary" onclick="parseImportData()">Parse Data →</button>`;

  } else if (w.step === 3) {
    // ── STEP 3: Column mapping ────────────────────────────────
    const fields = IMPORT_FIELDS[w.dataType];
    const rows = `
      <table class="import-map-table">
        <thead><tr><th>Amp CRM Field</th><th>Your Column</th><th style="text-align:center">Required</th><th>Sample Value</th></tr></thead>
        <tbody>
          ${fields.map(f => {
            const mapped = w.mapping[f.key] || '';
            const sample = mapped && w.parsedRows[0] ? (w.parsedRows[0][mapped]||'—') : '—';
            return `<tr>
              <td style="font-weight:600">${f.label}</td>
              <td>
                <select class="import-map-select" onchange="updateImportMapping('${f.key}',this.value)">
                  <option value="">— skip —</option>
                  ${w.headers.map(h => `<option value="${h}" ${mapped===h?'selected':''}>${h}</option>`).join('')}
                </select>
              </td>
              <td style="text-align:center">${f.required?'<span style="color:var(--danger)">●</span>':'<span style="color:var(--border)">○</span>'}</td>
              <td style="color:var(--text-muted);font-size:11.5px;max-width:120px;overflow:hidden;text-overflow:ellipsis">${sample}</td>
            </tr>`;
          }).join('')}
        </tbody>
      </table>`;

    bodyEl.innerHTML = stepBar + `
      <div style="padding:12px 20px 8px;font-size:13px;color:var(--text-dim)">
        Match your columns to Amp CRM fields. Required fields (●) must be mapped.
        <span style="color:var(--success);font-weight:600" id="import-map-count"> ${w.parsedRows.length} rows found.</span>
      </div>
      <div style="overflow-y:auto;max-height:340px;margin:0 20px 14px;border:1px solid var(--border);border-radius:10px;overflow:hidden">
        ${rows}
      </div>`;

    footerEl.innerHTML = `
      <button class="btn btn-ghost" onclick="importPrevStep()">← Back</button>
      <span style="flex:1"></span>
      <button class="btn btn-primary" onclick="buildImportPreview()">Preview Import →</button>`;

  } else if (w.step === 4) {
    // ── STEP 4: Preview ───────────────────────────────────────
    const preview = buildImportPreviewData();
    const colKeys = Object.keys(w.mapping).filter(k=>w.mapping[k]);
    bodyEl.innerHTML = stepBar + `
      <div style="padding:12px 20px 8px;display:flex;align-items:center;justify-content:space-between">
        <div style="font-size:13px;color:var(--text-dim)">Previewing <strong style="color:var(--text)">${preview.length}</strong> ${w.dataType} to import. First 5 shown.</div>
        <div style="font-size:12px;color:var(--text-muted)">${w.parsedRows.length - preview.length} skipped (missing required fields)</div>
      </div>
      <div class="import-preview-wrap">
        <table class="import-preview-table">
          <thead><tr>${colKeys.map(k=>`<th>${IMPORT_FIELDS[w.dataType].find(f=>f.key===k)?.label||k}</th>`).join('')}</tr></thead>
          <tbody>
            ${preview.slice(0,5).map(row=>`<tr>${colKeys.map(k=>`<td>${row[k]||'—'}</td>`).join('')}</tr>`).join('')}
          </tbody>
        </table>
      </div>
      ${preview.length > 5 ? `<div style="padding:0 20px 10px;font-size:12px;color:var(--text-muted)">...and ${preview.length-5} more rows</div>` : ''}
      <div style="margin:0 20px 14px;padding:12px 14px;background:rgba(200,120,10,.07);border:1px solid rgba(200,120,10,.2);border-radius:10px;font-size:12.5px">
        ⚡ <strong>Ready to import ${preview.length} ${w.dataType}.</strong> Existing records won't be deleted — imported data is added alongside.
      </div>`;

    footerEl.innerHTML = `
      <button class="btn btn-ghost" onclick="importPrevStep()">← Back</button>
      <span style="flex:1"></span>
      <button class="btn btn-success btn-sm" style="padding:8px 20px;font-size:14px" onclick="runImport()">⬆ Import ${preview.length} ${w.dataType}</button>`;

  } else if (w.step === 5) {
    // ── STEP 5: Done ──────────────────────────────────────────
    const r = w.results;
    const total = r.clients + r.jobs + r.invoices;
    bodyEl.innerHTML = stepBar + `
      <div class="import-progress" style="padding:28px 20px">
        <div class="import-result-icon">✅</div>
        <div class="import-result-title">Import Complete!</div>
        <div style="font-size:13px;color:var(--text-dim);margin-bottom:16px">Your data is ready to use in Amp CRM.</div>
        <div class="import-result-counts">
          ${r.clients > 0 ? `<div class="import-result-count"><div class="import-count-val">${r.clients}</div><div class="import-count-lbl">Clients</div></div>` : ''}
          ${r.jobs    > 0 ? `<div class="import-result-count"><div class="import-count-val">${r.jobs}</div><div class="import-count-lbl">Jobs</div></div>` : ''}
          ${r.invoices> 0 ? `<div class="import-result-count"><div class="import-count-val">${r.invoices}</div><div class="import-count-lbl">Invoices</div></div>` : ''}
          ${r.skipped > 0 ? `<div class="import-result-count" style="opacity:.6"><div class="import-count-val" style="color:var(--text-muted)">${r.skipped}</div><div class="import-count-lbl">Skipped</div></div>` : ''}
        </div>
        <div style="font-size:12.5px;color:var(--text-dim);margin-top:8px">Need to import more? You can run the importer again at any time from Settings → Data &amp; Export.</div>
      </div>`;
    footerEl.innerHTML = `
      <button class="btn btn-ghost" onclick="openImportWizard()">Import More</button>
      <span style="flex:1"></span>
      <button type="button" class="btn btn-primary" onclick="closeModal();renderDashboard()">Go to Dashboard →</button>`;
  }
}

// ── Helper: build expected columns hint ──────────────────────────
function buildExpectedCols(source, dataType) {
  const hints = SOURCE_HINTS[source];
  if (!hints || !hints[dataType]) {
    return IMPORT_FIELDS[dataType].map(f => f.aliases[0]).join(', ');
  }
  return hints[dataType].join(', ');
}

// ── Wizard navigation ────────────────────────────────────────────
function selectImportSource(src, el) {
  importWizard.source = src;
  document.querySelectorAll('.import-source-tile').forEach(t=>t.classList.remove('selected'));
  el.classList.add('selected');
  const btn = document.getElementById('import-next-btn');
  if (btn) btn.disabled = false;
}

function setImportType(type, el) {
  importWizard.dataType = type;
  document.querySelectorAll('.import-type-tab').forEach(t=>t.classList.remove('active'));
  el.classList.add('active');
  // Refresh hint
  const hintEl = document.getElementById('import-sample-hint');
  if (hintEl) hintEl.innerHTML = `<strong style="color:var(--text)">Expected columns for ${type}:</strong><br>
    <span style="font-family:'JetBrains Mono',monospace;font-size:11px">${buildExpectedCols(importWizard.source, type)}</span>`;
}

function importNextStep() {
  importWizard.step++;
  renderImportStep();
}
function importPrevStep() {
  importWizard.step = Math.max(1, importWizard.step - 1);
  renderImportStep();
}

// ── File / paste handling ────────────────────────────────────────
function handleImportFile(input) {
  const file = input.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = e => {
    importWizard.rawText = e.target.result;
    const ta = document.getElementById('import-paste');
    if (ta) ta.value = importWizard.rawText;
    flash('File loaded: ' + file.name + ' ✓');
  };
  reader.readAsText(file);
}

function handleImportDrop(e) {
  e.preventDefault();
  document.getElementById('import-drop-zone')?.classList.remove('drag-over');
  const file = e.dataTransfer?.files?.[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = ev => {
    importWizard.rawText = ev.target.result;
    const ta = document.getElementById('import-paste');
    if (ta) ta.value = importWizard.rawText;
    flash('File dropped: ' + file.name + ' ✓');
  };
  reader.readAsText(file);
}

// ── Parse CSV ────────────────────────────────────────────────────
function parseCSV(text) {
  const lines = text.trim().split(/\r?\n/).filter(l=>l.trim());
  if (lines.length < 2) return { headers:[], rows:[] };

  // Detect delimiter: comma vs tab vs semicolon
  const sample = lines[0];
  const delim = sample.includes('\t') ? '\t' : sample.includes(';') ? ';' : ',';

  const parseRow = line => {
    const cells = [];
    let cur = '', inQuote = false;
    for (let i=0; i<line.length; i++) {
      const ch = line[i];
      if (ch === '"') {
        if (inQuote && line[i+1]==='"') { cur+='"'; i++; }
        else inQuote = !inQuote;
      } else if (ch === delim && !inQuote) {
        cells.push(cur.trim()); cur = '';
      } else cur += ch;
    }
    cells.push(cur.trim());
    return cells;
  };

  const headers = parseRow(lines[0]).map(h => h.replace(/^["']|["']$/g,''));
  const rows = lines.slice(1).map(l => {
    const cells = parseRow(l);
    const obj = {};
    headers.forEach((h,i) => { obj[h] = (cells[i]||'').replace(/^["']|["']$/g,''); });
    return obj;
  }).filter(r => Object.values(r).some(v=>v.trim()));

  return { headers, rows };
}

function parseImportData() {
  const text = (document.getElementById('import-paste')?.value || importWizard.rawText).trim();
  if (!text) { flash('⚠️ No data to parse — paste or upload a file first'); return; }

  // Handle manual entry without headers — auto-add them
  let parseText = text;
  if (importWizard.source === 'manual') {
    const firstLine = text.split(/\r?\n/)[0];
    const fields = IMPORT_FIELDS[importWizard.dataType];
    // If first line doesn't look like headers, prepend them
    const looksLikeHeader = fields.some(f =>
      f.aliases.some(a => firstLine.toLowerCase().includes(a.toLowerCase()))
    );
    if (!looksLikeHeader) {
      const defaultHeaders = fields.map(f=>f.label).join(',');
      parseText = defaultHeaders + '\n' + text;
    }
  }

  const { headers, rows } = parseCSV(parseText);
  if (!headers.length || !rows.length) {
    flash('⚠️ Could not parse data — check the format and try again'); return;
  }

  importWizard.rawText = text;
  importWizard.headers = headers;
  importWizard.parsedRows = rows;
  importWizard.mapping = autoMap(headers, importWizard.dataType, importWizard.source);
  importWizard.step = 3;
  renderImportStep();
}

// ── Auto column mapper ───────────────────────────────────────────
function autoMap(headers, dataType, source) {
  const fields = IMPORT_FIELDS[dataType];
  const mapping = {};
  const usedHeaders = new Set();

  // First pass: try source-specific known column names
  const hints = SOURCE_HINTS[source]?.[dataType] || [];
  fields.forEach((field, fi) => {
    const hintCol = hints[fi];
    if (hintCol) {
      const match = headers.find(h => h.toLowerCase() === hintCol.toLowerCase());
      if (match && !usedHeaders.has(match)) {
        mapping[field.key] = match;
        usedHeaders.add(match);
        return;
      }
    }
    // Second pass: tiered fuzzy alias matching
    let bestMatch = null;
    let bestScore = 0;
    for (const alias of field.aliases) {
      for (const h of headers) {
        if (usedHeaders.has(h)) continue;
        const hl = h.toLowerCase(), al = alias.toLowerCase();
        let score = 0;
        if (hl === al)                          score = 100; // exact
        else if (hl.startsWith(al))             score = 80;  // header starts with alias
        else if (al.startsWith(hl))             score = 70;  // alias starts with header
        else if (hl.includes(' '+al)||hl.includes(al+' ')) score = 60; // word boundary
        else if (hl.split(/\W+/).includes(al)) score = 55;  // alias is a whole word in header
        // avoid: addr matching "Email Address" — only if alias is NOT a common word in other field names
        else if (hl.includes(al) && al.length > 4) score = 30;
        if (score > bestScore) { bestScore = score; bestMatch = h; }
      }
    }
    if (bestMatch && bestScore >= 55) {
      mapping[field.key] = bestMatch;
      usedHeaders.add(bestMatch);
    }
  });

  return mapping;
}

function updateImportMapping(fieldKey, colName) {
  importWizard.mapping[fieldKey] = colName;
}

// ── Preview builder ──────────────────────────────────────────────
function buildImportPreview() {
  // Advance import wizard to step 4 (preview)
  if (typeof importWizard !== 'undefined') {
    importWizard.step = 4;
    renderImportWizard();
  }
}

function buildImportPreviewData() {
  const { parsedRows, mapping, dataType } = importWizard;
  const fields = IMPORT_FIELDS[dataType];
  const requiredFields = fields.filter(f=>f.required).map(f=>f.key);

  return parsedRows.map(row => {
    const obj = {};
    Object.entries(mapping).forEach(([key, col]) => {
      if (col) obj[key] = row[col] || '';
    });
    return obj;
  }).filter(obj => requiredFields.every(k => obj[k]?.trim()));
}

// ── Run the actual import ────────────────────────────────────────
function runImport() {
  const preview = buildImportPreviewData();
  const { dataType } = importWizard;
  let imported = 0, skipped = 0;

  if (dataType === 'clients') {
    const existingNames = new Set(clients.map(c=>c.name.toLowerCase()));
    preview.forEach(row => {
      if (!row.name?.trim()) { skipped++; return; }
      if (existingNames.has(row.name.toLowerCase())) { skipped++; return; }
      const colors = ['var(--amber)','var(--blue)','var(--green)','var(--orange)','#b57cf8','#34d399'];
      const init = row.name.split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase();
      clients.push({
        name: row.name.trim(),
        addr: row.addr?.trim() || 'Address not provided',
        jobs: 0, spent: 0,
        color: colors[clients.length % colors.length],
        init,
        phone: row.phone?.trim() || '',
        email: row.email?.trim() || '',
        type: row.type?.trim() || 'Residential',
        source: row.source?.trim() || 'Import',
      });
      imported++;
    });
    importWizard.results.clients = imported;

  } else if (dataType === 'jobs') {
    const newJobBase = jobs.reduce((m,j)=>Math.max(m,parseInt(j.id.replace('J-',''))||0),0)+1;
    preview.forEach((row, i) => {
      if (!row.client?.trim()) { skipped++; return; }
      const typeMap = { 'ev charger':'ev','ev':'ev','panel':'panel','service':'svc','repair':'svc','install':'inst','lighting':'light','safety':'safety' };
      const typeGuess = Object.entries(typeMap).find(([k])=>(row.name||'').toLowerCase().includes(k))?.[1] || 'svc';
      const rawVal = (row.value||'0').replace(/[$,\s]/g,'');
      jobs.push({
        id: 'J-' + String(newJobBase + i).padStart(3,'0'),
        client: row.client.trim(),
        addr: row.addr?.trim() || 'Address TBD',
        type: typeGuess,
        name: row.name?.trim() || 'Imported Job',
        tech: row.tech?.trim() || 'Unassigned',
        date: row.date?.trim() || 'TBD',
        time: '8:00 AM',
        value: parseFloat(rawVal) || 0,
        status: (row.status||'').toLowerCase().includes('complet') ? 'complete'
               : (row.status||'').toLowerCase().includes('progress') ? 'inprogress'
               : 'scheduled',
        notes: row.notes?.trim() || '',
      });
      imported++;
    });
    importWizard.results.jobs = imported;

  } else if (dataType === 'invoices') {
    const newInvBase = invoiceCounter;
    preview.forEach((row, i) => {
      if (!row.client?.trim()) { skipped++; return; }
      const rawAmt = (row.amount||'0').replace(/[$,\s]/g,'');
      const amt = parseFloat(rawAmt) || 0;
      const statusRaw = (row.status||'').toLowerCase();
      const status = statusRaw.includes('paid')||statusRaw.includes('closed') ? 'paid'
                   : statusRaw.includes('overdue')||statusRaw.includes('past due') ? 'overdue'
                   : 'sent';
      const num = row.num?.trim() || ('INV-' + String(newInvBase + i).padStart(4,'0'));
      invoices.push({
        num,
        client: row.client.trim(),
        job: row.job?.trim() || '—',
        issued: row.issued?.trim() || 'Imported',
        due: row.due?.trim() || 'Net 30',
        amount: amt,
        status,
        payMethod: status==='paid'?'Import':null,
        lines: [],
        notes: 'Imported record',
      });
      invoiceCounter++;
      imported++;
    });
    importWizard.results.invoices = imported;
  }

  importWizard.results.skipped = skipped;
  importWizard.step = 5;

  // Refresh relevant views
  try { renderDashboard(); } catch(e) {}
  try { if (dataType==='clients') renderClients(); } catch(e) {}
  try { if (dataType==='invoices') renderInvoices(); } catch(e) {}

  renderImportStep();
}


function exportData(type) {
  const data = { jobs, clients, invoices, quotes }[type];
  if (!data || !data.length) { flash('No data to export'); return; }
  const keys = Object.keys(data[0]);
  const NL = String.fromCharCode(10);
  const rows = data.map(row => keys.map(k => { const v = String(row[k]||'').replace(/"/g,'""'); return v.includes(',') ? '"'+v+'"' : v; }).join(','));
  const csv = [keys.join(','), ...rows].join(NL);
  const a = document.createElement('a');
  a.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
  a.download = 'amp-' + type + '-' + new Date().toISOString().slice(0,10) + '.csv';
  a.click();
  flash('Exported ' + type + ' as CSV ✓');
}

// Patch applyBrandToApp to also refresh settings page preview
const _origApplyBrand = applyBrandToApp;
window.applyBrandToApp = function() {
  _origApplyBrand();
  updateSettingsBrandPreview();
};

// Patch saveBrandSettings to update settings preview after save
const _origSaveBrand = saveBrandSettings;
window.saveBrandSettings = function() {
  _origSaveBrand();
  updateSettingsBrandPreview();
};

// ── renderTechs override to work inside hub ───────────────────────────
// The team hub reuses view-techs internal structure, we just need
// switchTechTab to work relative to team-panel-performance
const _origSwitchTechTab = switchTechTab;
window.switchTechTab = function(tab, el) {
  // Update the pill buttons
  document.querySelectorAll('#team-panel-performance .state-pill').forEach(p => p.classList.remove('active'));
  if (el) el.classList.add('active');
  const perf = document.getElementById('tech-perf-panel');
  const sched = document.getElementById('tech-sched-panel');
  if (tab === 'perf') {
    if (perf) perf.style.display = '';
    if (sched) sched.style.display = 'none';
    renderTechs();
  } else {
    if (perf) perf.style.display = 'none';
    if (sched) sched.style.display = '';
    renderTechSchedule();
  }
};

// Update nav router to include new hub views + settings
const _origNavRouter = window.nav;
// (already overridden above — just add settings to _origNav's router)

// ── mobNav override to handle hub names ──────────────────────────────
window.mobNav = function(view, el) {
  document.querySelectorAll('.mob-nav-item').forEach(n => n.classList.remove('active'));
  if (el) el.classList.add('active');
  // Use the new nav which handles hub routing
  window.nav(view, document.getElementById('nav-' + view));
};


// ── QUICK ACTION SHEET ────────────────────────────────────────────
function toggleQuickActions() {
  const sheet = document.getElementById('quick-action-sheet');
  const backdrop = document.getElementById('qa-backdrop');
  const fab = document.getElementById('mob-fab-btn');
  const isOpen = sheet.classList.contains('open');
  if (isOpen) {
    closeQuickActions();
  } else {
    sheet.classList.add('open');
    backdrop.classList.add('open');
    if (fab) fab.classList.add('open');
  }
}
function closeQuickActions() {
  const sheet = document.getElementById('quick-action-sheet');
  const backdrop = document.getElementById('qa-backdrop');
  const fab = document.getElementById('mob-fab-btn');
  sheet.classList.remove('open');
  backdrop.classList.remove('open');
  if (fab) fab.classList.remove('open');
}

// ============================================================
// INIT — load persisted data, apply branding, render
// ============================================================
// Wait for Firebase to load before initializing
function initApp() {
  if (typeof firebase === 'undefined') {
    setTimeout(initApp, 200);
    return;
  }
  
  // Check for payment link in URL and show payment form
  try { handlePaymentLink(); } catch(e) { console.warn('payment link check failed', e); }
  
  try { loadPersistedData(); } catch(e) { console.warn('load failed', e); }
  try { checkTrialStatus(); } catch(e) { console.warn('trial check failed', e); }
  try { clients.forEach(cl => syncClientProfile(cl.name)); } catch(e) {}
  try { applyBrandToApp(); } catch(e) {}
  refreshHealthScores();
  try { initHubPanels(); } catch(e) { console.warn('initHubPanels err:', e); }
  
  setTimeout(() => {
    if(document.getElementById('view-dashboard')?.classList.contains('active')) {
      window.renderDashboard();
    }
    try { (window.renderJobs||renderJobs)(); } catch(e) {}
    try { renderDashStockAlerts(); } catch(e) {}
    try { renderInvoices(); } catch(e) {}
    try { renderPermits(); } catch(e) {}
    try { renderTasks(); } catch(e) {}
    try { setPbState(pbState || 'IL'); } catch(e) {}
    try { updateSettingsBrandPreview(); } catch(e) {}
    try { if(window.renderNotifications) window.renderNotifications(); } catch(e) {}
  }, 80);
}

// Start the app
initApp();

// ============================================================
// SETTINGS + MISC UTILITY FUNCTIONS
// ============================================================

function settingsPhotoUpload() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';
  input.onchange = function() {
    const file = input.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(e) {
      // Store avatar in brand
      brand.avatarData = e.target.result;
      saveBrand();
      // Update any avatar displays
      const avEl = document.getElementById('user-av-initials');
      const settingsAv = document.getElementById('settings-avatar');
      // If we had an img element we'd set src, for now just flash
      flash('Profile photo saved ✓');
    };
    reader.readAsDataURL(file);
  };
  input.click();
}

function openUpgradeModal() {
  document.getElementById('modal-title').textContent = '🚀 Upgrade Your Plan';
  document.getElementById('modal-body').innerHTML = `
    <div style="text-align:center;padding:10px 0 20px">
      <div style="font-size:48px;margin-bottom:12px">⚡</div>
      <div style="font-size:18px;font-weight:700;margin-bottom:8px">Amp CRM Team Plan</div>
      <div style="font-size:13px;color:var(--text-dim);margin-bottom:20px">Everything in Solo, plus:</div>
      <div style="text-align:left;display:inline-block;margin-bottom:20px">
        ${['Multi-tech scheduling & dispatch','Team performance dashboards','Shared price book + materials catalog','QuickBooks + Google Calendar sync','Client portal (pay online)','Bulk SMS & email campaigns','Advanced reporting & profitability','Priority support'].map(f=>`
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px">
            <span style="color:var(--success);font-size:16px">✓</span>${f}
          </div>`).join('')}
      </div>
      <div style="background:var(--amber-light);border-radius:12px;padding:16px;margin-bottom:4px">
        <div style="font-size:24px;font-weight:800;color:var(--amber)">$79<span style="font-size:14px;font-weight:400">/mo</span></div>
        <div style="font-size:12px;color:var(--text-dim);margin-top:2px">Billed monthly · Cancel anytime</div>
      </div>
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Maybe Later</button>
    <button type="button" class="btn btn-primary" onclick="flash('Redirecting to checkout... ✓');closeModal()">Upgrade Now →</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function openZelleSettings() {
  const currentEmail = brand.zelleEmail || brand.email || '';
  document.getElementById('modal-title').textContent = '💳 Zelle Payment Settings';
  document.getElementById('modal-body').innerHTML = `
    <div style="background:var(--surface2);border-radius:10px;padding:14px;margin-bottom:16px;font-size:13px;color:var(--text-dim)">
      Clients will see your Zelle info on invoices and pay links. Use your business email or phone.
    </div>
    <div class="form-group">
      <label class="form-label">Zelle Email or Phone</label>
      <input class="form-input" id="zelle-id" value="${currentEmail}" placeholder="email@example.com or (555) 000-0000">
    </div>
    <div class="form-group">
      <label class="form-label">Display Name on Zelle</label>
      <input class="form-input" id="zelle-name" value="${brand.bizName||''}" placeholder="Business name as it appears in Zelle">
    </div>`;
  document.getElementById('modal-footer').innerHTML = `
    <button type="button" class="btn btn-ghost" onclick="closeModal()">Cancel</button>
    <button class="btn btn-primary" onclick="saveZelleSettings()">Save Zelle Settings</button>`;
  var _mo = document.getElementById('modal-overlay'); _mo.style.display='flex'; _mo.classList.add('open');
}

function saveZelleSettings() {
  const id = document.getElementById('zelle-id')?.value?.trim();
  const name = document.getElementById('zelle-name')?.value?.trim();
  if (!id) { flash('⚠️ Enter your Zelle email or phone'); return; }
  brand.zelleEmail = id;
  if (name) brand.zelleDisplayName = name;
  saveBrand();
  closeModal();
  flash('Zelle settings saved ✓');
}

// niPopulateJobs - populate jobs dropdown in new invoice modal based on selected client
function niPopulateJobs() {
  const client = document.getElementById('ni-client')?.value;
  const jobSel = document.getElementById('ni-job');
  if (!jobSel) return;
  const clientJobs = jobs.filter(j => j.client === client && j.status !== 'complete');
  jobSel.innerHTML = '<option value="">— No linked job —</option>' +
    clientJobs.map(j => `<option value="${j.id}">${j.id} — ${j.name||j.type}</option>`).join('');
  // Also set today's date for issued
  const issuedEl = document.getElementById('ni-issued');
  const dueEl    = document.getElementById('ni-due');
  if (issuedEl && !issuedEl.value) issuedEl.value = new Date().toISOString().slice(0,10);
  if (dueEl && !dueEl.value) {
    const d = new Date(); d.setDate(d.getDate()+30);
    dueEl.value = d.toISOString().slice(0,10);
  }
  niAddLine(); // ensure at least one line item
}

function niApplyTerms() {
  const terms = parseInt(document.getElementById('ni-terms')?.value) || 30;
  const issuedEl = document.getElementById('ni-issued');
  const dueEl = document.getElementById('ni-due');
  if (!dueEl) return;
  const base = issuedEl?.value ? new Date(issuedEl.value) : new Date();
  const due = new Date(base);
  due.setDate(due.getDate() + terms);
  dueEl.value = due.toISOString().slice(0,10);
}

function niPrefillFromJob() {
  const jobId = document.getElementById('ni-job')?.value;
  if (!jobId) return;
  const j = jobs.find(x => x.id === jobId);
  if (!j) return;
  // Pre-fill a line item with the job name + value
  const lines = document.getElementById('ni-lines');
  if (lines && lines.querySelectorAll('.quote-line').length === 0) niAddLine();
  const firstRow = lines?.querySelector('.quote-line');
  if (firstRow && j.name) {
    const descEl = firstRow.querySelector('.ql-desc');
    const rateEl = firstRow.querySelector('.ql-rate');
    if (descEl) descEl.value = j.name;
    if (rateEl) { rateEl.value = j.value || 0; calcNewInvTotal(); }
  }
}

// Ensure calcNewInvTotal exists and works
function calcNewInvTotal() {
  let sub = 0;
  document.querySelectorAll('#ni-lines .quote-line').forEach(row => {
    const qty  = parseInt(row.querySelector('.ql-qty')?.value)  || 1;
    const rate = parseFloat(row.querySelector('.ql-rate')?.value) || 0;
    sub += qty * rate;
  });
  const taxRate = parseFloat(document.getElementById('ni-taxrate')?.value) || 0;
  const tax = sub * taxRate / 100;
  const total = sub + tax;
  const setText = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = '$' + val.toFixed(2); };
  setText('ni-subtotal', sub);
  setText('ni-taxamt', tax);
  setText('ni-grand', total);
}

// Register Service Worker for PWA
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('./sw.js')
      .then(reg => console.log('SW registered'))
      .catch(err => console.log('SW registration failed'));
  });
}

// Invoice PDF Generation
function generateInvoicePDF(idx) {
  const inv = invoices[idx];
  if (!inv) return;
  
  // Get company info from localStorage or use defaults
  const co = JSON.parse(localStorage.getItem('amp_company') || '{}');
  const companyName = co.name || 'Your Company';
  const companyEmail = co.email || 'you@example.com';
  const companyPhone = co.phone || '(555) 123-4567';
  const companyAddr = co.address || '123 Main St, Phoenix, AZ 85001';
  
  // Build line items HTML
  const linesHtml = (inv.lines || []).map(l => `
    <tr>
      <td style="padding:8px;border-bottom:1px solid #eee">${l.desc}</td>
      <td style="padding:8px;border-bottom:1px solid #eee;text-align:center">${l.qty}</td>
      <td style="padding:8px;border-bottom:1px solid #eee;text-align:right">$${l.rate.toFixed(2)}</td>
      <td style="padding:8px;border-bottom:1px solid #eee;text-align:right">$${l.total.toFixed(2)}</td>
    </tr>
  `).join('');
  
  const statusLabel = {draft:'Draft',sent:'Sent',paid:'Paid',overdue:'Overdue',partial:'Partial',complete:'Complete',viewed:'Viewed'}[inv.status] || inv.status;
  
  // Create printable HTML
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`<!DOCTYPE html>
<html>
<head>
  <title>Invoice ${inv.num}</title>
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 800px; margin: 0 auto; padding: 40px; color: #333; }
    .header { display: flex; justify-content: space-between; margin-bottom: 40px; }
    .company { font-size: 24px; font-weight: bold; color: #f59e0b; }
    .invoice-title { font-size: 32px; font-weight: bold; color: #333; }
    .invoice-num { font-size: 14px; color: #666; margin-top: 4px; }
    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
    .info-box h3 { font-size: 12px; text-transform: uppercase; color: #999; margin: 0 0 8px 0; letter-spacing: 1px; }
    .info-box p { margin: 4px 0; }
    table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
    th { text-align: left; padding: 10px; background: #f9fafb; border-bottom: 2px solid #e5e7eb; font-size: 12px; text-transform: uppercase; color: #666; }
    .totals { margin-left: auto; width: 300px; }
    .totals-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
    .totals-row.total { font-size: 18px; font-weight: bold; border-bottom: 2px solid #333; padding-top: 12px; }
    .status { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; }
    .status-draft { background: #f3f4f6; color: #666; }
    .status-sent { background: #fef3c7; color: #d97706; }
    .status-paid { background: #d1fae5; color: #059669; }
    .status-overdue { background: #fee2e2; color: #dc2626; }
    .footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; font-size: 12px; color: #999; }
    @media print { body { padding: 20px; } }
  </style>
</head>
<body>
  <div class="header">
    <div>
      <div class="company">${companyName}</div>
      <p style="margin:4px 0">${companyEmail}</p>
      <p style="margin:4px 0">${companyPhone}</p>
      <p style="margin:4px 0">${companyAddr}</p>
    </div>
    <div style="text-align:right">
      <div class="invoice-title">INVOICE</div>
      <div class="invoice-num">#${inv.num}</div>
      <div style="margin-top:10px"><span class="status status-${inv.status}">${statusLabel}</span></div>
    </div>
  </div>
  
  <div class="info-grid">
    <div class="info-box">
      <h3>Bill To</h3>
      <p style="font-weight:bold;font-size:16px">${inv.client}</p>
      ${inv.clientEmail ? `<p>${inv.clientEmail}</p>` : ''}
      ${inv.clientAddr ? `<p>${inv.clientAddr}</p>` : ''}
    </div>
    <div class="info-box">
      <h3>Invoice Details</h3>
      <p><strong>Issued:</strong> ${inv.issued}</p>
      <p><strong>Due:</strong> ${inv.due}</p>
      ${inv.job ? `<p><strong>Job:</strong> ${inv.job}</p>` : ''}
    </div>
  </div>
  
  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th style="text-align:center">Qty</th>
        <th style="text-align:right">Rate</th>
        <th style="text-align:right">Amount</th>
      </tr>
    </thead>
    <tbody>
      ${linesHtml}
    </tbody>
  </table>
  
  <div class="totals">
    <div class="totals-row total">
      <span>Total</span>
      <span>$${inv.amount.toLocaleString()}</span>
    </div>
  </div>
  
  ${inv.notes ? `<div style="margin-top:30px"><h3 style="font-size:12px;text-transform:uppercase;color:#999;margin-bottom:8px">Notes</h3><p>${inv.notes}</p></div>` : ''}
  
  <div class="footer">
    <p>Thank you for your business!</p>
    <p>Generated by Amp CRM - amp-crm-48545.web.app</p>
  </div>
</body>
</html>`);
  printWindow.document.close();
  setTimeout(() => printWindow.print(), 250);
}

</script>
</body>
</html>