{"id":2,"date":"2026-06-12T09:50:51","date_gmt":"2026-06-12T09:50:51","guid":{"rendered":"https:\/\/clientsuccesscrm.com\/?page_id=2"},"modified":"2026-06-12T13:49:30","modified_gmt":"2026-06-12T13:49:30","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/clientsuccesscrm.com\/","title":{"rendered":"Client Success CRM"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<!-- ClientSuccessCRM.com V3 \u2014 Client-First CRM with Call Log -->\n<!-- Paste this entire file into a WordPress\/Elementor HTML widget. -->\n<!-- Data is saved in the visitor's browser using localStorage. -->\n\n<div id=\"commandbrief-app\">\n  <style>\n    @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\");\n\n    #commandbrief-app,\n    #commandbrief-app * {\n      box-sizing: border-box;\n    }\n\n    #commandbrief-app {\n      --bg: #f4f7fb;\n      --panel: #ffffff;\n      --panel-soft: #f8fafc;\n      --text: #142033;\n      --muted: #667085;\n      --border: #dfe5ec;\n      --accent: #1d3d59;\n      --accent-2: #2997ff;\n      --success: #28a745;\n      --danger: #d92d20;\n      --shadow: 0 16px 40px rgba(15, 23, 42, 0.08);\n\n      width: 100%;\n      max-width: 1400px;\n      margin: 0 auto;\n      padding: 22px;\n      border-radius: 26px;\n      background: var(--bg);\n      color: var(--text);\n      font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    }\n\n    #commandbrief-app[data-theme=\"dark\"] {\n      --bg: #08111d;\n      --panel: #111d2b;\n      --panel-soft: #162334;\n      --text: #f5f7fa;\n      --muted: #9cacbd;\n      --border: #26374b;\n      --accent: #81c6ff;\n      --accent-2: #2997ff;\n      --success: #39d275;\n      --danger: #ff6b6b;\n      --shadow: 0 16px 40px rgba(0, 0, 0, 0.30);\n    }\n\n    #commandbrief-app h1,\n    #commandbrief-app h2,\n    #commandbrief-app h3,\n    #commandbrief-app p {\n      margin: 0;\n    }\n\n    #commandbrief-app button,\n    #commandbrief-app input,\n    #commandbrief-app textarea,\n    #commandbrief-app select {\n      font: inherit;\n    }\n\n    #commandbrief-app button {\n      cursor: pointer;\n    }\n\n    #commandbrief-app .cb-top {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 18px;\n      padding: 24px;\n      margin-bottom: 18px;\n      border: 1px solid var(--border);\n      border-radius: 22px;\n      background: var(--panel);\n      box-shadow: var(--shadow);\n    }\n\n    #commandbrief-app .cb-brand-wrap {\n      display: flex;\n      align-items: center;\n      gap: 15px;\n      min-width: 0;\n    }\n\n    #commandbrief-app .cb-logo {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 60px;\n      height: 60px;\n      flex: 0 0 auto;\n      border-radius: 18px;\n      color: #ffffff;\n      background: linear-gradient(135deg, var(--accent), var(--accent-2));\n      font-size: 28px;\n      font-weight: 800;\n    }\n\n    #commandbrief-app .cb-kicker {\n      margin-bottom: 5px;\n      color: var(--accent);\n      font-size: 12px;\n      font-weight: 800;\n      letter-spacing: 0.16em;\n      text-transform: uppercase;\n    }\n\n    #commandbrief-app .cb-title {\n      color: var(--text);\n      font-size: clamp(34px, 5vw, 58px);\n      font-weight: 800;\n      letter-spacing: -0.05em;\n      line-height: 0.98;\n    }\n\n    #commandbrief-app .cb-subtitle {\n      margin-top: 9px;\n      color: var(--muted);\n      font-size: 14px;\n      line-height: 1.5;\n    }\n\n    #commandbrief-app .cb-top-actions {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: flex-end;\n      gap: 8px;\n    }\n\n    #commandbrief-app .cb-small-btn {\n      padding: 10px 13px;\n      border: 1px solid var(--border);\n      border-radius: 999px;\n      background: var(--panel-soft);\n      color: var(--text);\n      font-size: 12px;\n      font-weight: 700;\n    }\n\n    #commandbrief-app .cb-small-btn:hover {\n      border-color: var(--accent);\n    }\n\n    #commandbrief-app .cb-file-input {\n      display: none;\n    }\n\n    #commandbrief-app .cb-stats {\n      display: grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 12px;\n      margin-top: 22px;\n    }\n\n    #commandbrief-app .cb-stat {\n      padding: 17px;\n      border: 1px solid var(--border);\n      border-radius: 17px;\n      background: var(--panel-soft);\n    }\n\n    #commandbrief-app .cb-stat-number {\n      display: block;\n      color: var(--text);\n      font-size: 30px;\n      font-weight: 800;\n      line-height: 1;\n    }\n\n    #commandbrief-app .cb-stat-label {\n      display: block;\n      margin-top: 7px;\n      color: var(--muted);\n      font-size: 11px;\n      font-weight: 800;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n\n    #commandbrief-app .cb-layout {\n      display: grid;\n      grid-template-columns: 320px minmax(0, 1fr);\n      gap: 18px;\n      min-width: 0;\n    }\n\n    #commandbrief-app .cb-sidebar,\n    #commandbrief-app .cb-main {\n      min-width: 0;\n      border: 1px solid var(--border);\n      border-radius: 22px;\n      background: var(--panel);\n      box-shadow: var(--shadow);\n    }\n\n    #commandbrief-app .cb-sidebar {\n      padding: 16px;\n    }\n\n    #commandbrief-app .cb-main {\n      padding: 20px;\n    }\n\n    #commandbrief-app .cb-panel-title {\n      margin-bottom: 12px;\n      color: var(--text);\n      font-size: 17px;\n      font-weight: 800;\n    }\n\n    #commandbrief-app .cb-field {\n      margin-bottom: 11px;\n    }\n\n    #commandbrief-app label {\n      display: block;\n      margin-bottom: 6px;\n      color: var(--muted);\n      font-size: 12px;\n      font-weight: 700;\n    }\n\n    #commandbrief-app input,\n    #commandbrief-app textarea,\n    #commandbrief-app select {\n      width: 100%;\n      padding: 12px 13px;\n      border: 1px solid var(--border);\n      border-radius: 13px;\n      outline: none;\n      background: var(--panel-soft);\n      color: var(--text);\n    }\n\n    #commandbrief-app input:focus,\n    #commandbrief-app textarea:focus,\n    #commandbrief-app select:focus {\n      border-color: var(--accent-2);\n      box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.12);\n    }\n\n    #commandbrief-app textarea {\n      min-height: 105px;\n      resize: vertical;\n      line-height: 1.5;\n    }\n\n    #commandbrief-app .cb-primary-btn {\n      width: 100%;\n      padding: 12px 15px;\n      border: 0;\n      border-radius: 13px;\n      color: #ffffff;\n      background: linear-gradient(135deg, #1d3d59, #2997ff);\n      font-weight: 800;\n    }\n\n    #commandbrief-app .cb-primary-btn:disabled {\n      opacity: 0.45;\n      cursor: not-allowed;\n    }\n\n    #commandbrief-app .cb-search {\n      margin: 15px 0 12px;\n    }\n\n    #commandbrief-app .cb-client-list {\n      display: flex;\n      max-height: 650px;\n      flex-direction: column;\n      gap: 9px;\n      overflow-y: auto;\n    }\n\n    #commandbrief-app .cb-client-card {\n      width: 100%;\n      padding: 13px;\n      border: 1px solid var(--border);\n      border-radius: 15px;\n      background: var(--panel-soft);\n      color: var(--text);\n      text-align: left;\n    }\n\n    #commandbrief-app .cb-client-card:hover,\n    #commandbrief-app .cb-client-card.cb-active {\n      border-color: var(--accent-2);\n    }\n\n    #commandbrief-app .cb-client-card.cb-active {\n      background: rgba(41, 151, 255, 0.10);\n    }\n\n    #commandbrief-app .cb-client-card-top {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 9px;\n    }\n\n    #commandbrief-app .cb-client-company {\n      overflow: hidden;\n      color: var(--text);\n      font-size: 14px;\n      font-weight: 800;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    #commandbrief-app .cb-client-contact {\n      overflow: hidden;\n      margin-top: 4px;\n      color: var(--muted);\n      font-size: 11px;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    #commandbrief-app .cb-count {\n      flex: 0 0 auto;\n      padding: 4px 7px;\n      border-radius: 999px;\n      color: var(--accent);\n      background: rgba(41, 151, 255, 0.12);\n      font-size: 10px;\n      font-weight: 800;\n    }\n\n    #commandbrief-app .cb-sidebar-empty,\n    #commandbrief-app .cb-empty {\n      padding: 20px 14px;\n      border: 1px dashed var(--border);\n      border-radius: 14px;\n      color: var(--muted);\n      background: var(--panel-soft);\n      font-size: 12px;\n      line-height: 1.5;\n      text-align: center;\n    }\n\n    #commandbrief-app .cb-welcome {\n      display: flex;\n      min-height: 460px;\n      align-items: center;\n      justify-content: center;\n      padding: 30px;\n      text-align: center;\n    }\n\n    #commandbrief-app .cb-welcome[hidden],\n    #commandbrief-app .cb-client-view[hidden] {\n      display: none !important;\n    }\n\n    #commandbrief-app .cb-welcome-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 76px;\n      height: 76px;\n      margin: 0 auto 16px;\n      border-radius: 22px;\n      color: #ffffff;\n      background: linear-gradient(135deg, #1d3d59, #2997ff);\n      font-size: 34px;\n      font-weight: 800;\n    }\n\n    #commandbrief-app .cb-welcome h2 {\n      color: var(--text);\n      font-size: 30px;\n      font-weight: 800;\n      letter-spacing: -0.04em;\n    }\n\n    #commandbrief-app .cb-welcome p {\n      max-width: 500px;\n      margin-top: 9px;\n      color: var(--muted);\n      font-size: 14px;\n      line-height: 1.6;\n    }\n\n    #commandbrief-app .cb-client-header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 15px;\n      margin-bottom: 16px;\n    }\n\n    #commandbrief-app .cb-client-title {\n      color: var(--text);\n      font-size: clamp(28px, 4vw, 42px);\n      font-weight: 800;\n      letter-spacing: -0.05em;\n      line-height: 1;\n      overflow-wrap: anywhere;\n    }\n\n    #commandbrief-app .cb-client-summary {\n      margin-top: 8px;\n      color: var(--muted);\n      font-size: 13px;\n    }\n\n    #commandbrief-app .cb-danger-btn {\n      padding: 9px 12px;\n      border: 1px solid rgba(217, 45, 32, 0.25);\n      border-radius: 999px;\n      color: var(--danger);\n      background: transparent;\n      font-size: 11px;\n      font-weight: 800;\n      white-space: nowrap;\n    }\n\n    #commandbrief-app .cb-danger-btn:hover {\n      background: rgba(217, 45, 32, 0.08);\n    }\n\n    #commandbrief-app .cb-client-info {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n      gap: 11px;\n      margin-bottom: 14px;\n    }\n\n    #commandbrief-app .cb-info-card {\n      padding: 13px;\n      border: 1px solid var(--border);\n      border-radius: 15px;\n      background: var(--panel-soft);\n    }\n\n    #commandbrief-app .cb-info-label {\n      margin-bottom: 6px;\n      color: var(--muted);\n      font-size: 10px;\n      font-weight: 800;\n      letter-spacing: 0.10em;\n      text-transform: uppercase;\n    }\n\n    #commandbrief-app .cb-info-input {\n      padding: 0;\n      border: 0;\n      border-radius: 0;\n      background: transparent;\n      box-shadow: none;\n      color: var(--text);\n      font-size: 14px;\n      font-weight: 700;\n    }\n\n    #commandbrief-app .cb-info-input:focus {\n      padding: 5px 6px;\n      margin: -5px -6px;\n      border: 0;\n      border-radius: 8px;\n      background: rgba(41, 151, 255, 0.10);\n      box-shadow: none;\n    }\n\n    #commandbrief-app .cb-section {\n      padding: 15px;\n      margin-bottom: 14px;\n      border: 1px solid var(--border);\n      border-radius: 17px;\n      background: var(--panel-soft);\n    }\n\n    #commandbrief-app .cb-section-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 10px;\n      margin-bottom: 11px;\n    }\n\n    #commandbrief-app .cb-section-title {\n      color: var(--text);\n      font-size: 17px;\n      font-weight: 800;\n    }\n\n    #commandbrief-app .cb-section-count {\n      padding: 4px 8px;\n      border-radius: 999px;\n      color: var(--accent);\n      background: rgba(41, 151, 255, 0.12);\n      font-size: 10px;\n      font-weight: 800;\n    }\n\n    #commandbrief-app .cb-client-notes {\n      min-height: 120px;\n    }\n\n    #commandbrief-app .cb-task-form {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 160px auto;\n      gap: 9px;\n      align-items: end;\n    }\n\n    #commandbrief-app .cb-task-form .cb-field {\n      margin-bottom: 0;\n    }\n\n    #commandbrief-app .cb-task-add-btn {\n      width: auto;\n      min-width: 120px;\n    }\n\n    #commandbrief-app .cb-task-columns {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 14px;\n    }\n\n    #commandbrief-app .cb-task-list {\n      display: flex;\n      flex-direction: column;\n      gap: 9px;\n    }\n\n    #commandbrief-app .cb-task {\n      padding: 12px;\n      border: 1px solid var(--border);\n      border-radius: 14px;\n      background: var(--panel);\n    }\n\n    #commandbrief-app .cb-task.cb-completed {\n      background: rgba(40, 167, 69, 0.08);\n    }\n\n    #commandbrief-app .cb-task-top {\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      gap: 9px;\n      align-items: flex-start;\n    }\n\n    #commandbrief-app .cb-check-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 27px;\n      height: 27px;\n      padding: 0;\n      border: 2px solid var(--border);\n      border-radius: 999px;\n      color: var(--accent);\n      background: var(--panel-soft);\n      font-size: 14px;\n      font-weight: 800;\n    }\n\n    #commandbrief-app .cb-completed .cb-check-btn {\n      border-color: var(--success);\n      color: #ffffff;\n      background: var(--success);\n    }\n\n    #commandbrief-app .cb-task-title {\n      padding: 0;\n      border: 0;\n      border-radius: 0;\n      background: transparent;\n      box-shadow: none;\n      color: var(--text);\n      font-size: 13px;\n      font-weight: 800;\n      line-height: 1.4;\n    }\n\n    #commandbrief-app .cb-task-title:focus {\n      padding: 4px 5px;\n      margin: -4px -5px;\n      border: 0;\n      border-radius: 7px;\n      background: rgba(41, 151, 255, 0.10);\n      box-shadow: none;\n    }\n\n    #commandbrief-app .cb-completed .cb-task-title {\n      color: var(--muted);\n      text-decoration: line-through;\n    }\n\n    #commandbrief-app .cb-task-date {\n      margin-top: 4px;\n      color: var(--muted);\n      font-size: 10px;\n      line-height: 1.4;\n    }\n\n    #commandbrief-app .cb-delete-task {\n      padding: 3px 7px;\n      border: 0;\n      border-radius: 8px;\n      color: var(--muted);\n      background: transparent;\n      font-size: 17px;\n      line-height: 1;\n    }\n\n    #commandbrief-app .cb-delete-task:hover {\n      color: var(--danger);\n      background: rgba(217, 45, 32, 0.08);\n    }\n\n    #commandbrief-app .cb-task-notes {\n      min-height: 68px;\n      margin-top: 9px;\n      font-size: 12px;\n    }\n\n    #commandbrief-app .cb-clear-wrap {\n      margin-top: 10px;\n      text-align: right;\n    }\n\n    #commandbrief-app .cb-footer-note {\n      margin-top: 12px;\n      color: var(--muted);\n      font-size: 10px;\n      line-height: 1.5;\n      text-align: center;\n    }\n\n\n    #commandbrief-app .cb-list-tools {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 8px;\n      margin: 15px 0 12px;\n    }\n\n    #commandbrief-app .cb-list-tools .cb-search {\n      margin: 0;\n    }\n\n    #commandbrief-app select {\n      appearance: auto;\n    }\n\n    #commandbrief-app .cb-client-card-meta {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 6px;\n      margin-top: 9px;\n    }\n\n    #commandbrief-app .cb-health-badge,\n    #commandbrief-app .cb-contact-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      max-width: 100%;\n      padding: 5px 8px;\n      border-radius: 999px;\n      font-size: 10px;\n      font-weight: 800;\n      line-height: 1;\n    }\n\n    #commandbrief-app .cb-health-badge {\n      color: var(--text);\n      background: rgba(102, 112, 133, 0.12);\n    }\n\n    #commandbrief-app .cb-health-badge[data-health=\"very-happy\"] {\n      color: #137a38;\n      background: rgba(40, 167, 69, 0.14);\n    }\n\n    #commandbrief-app .cb-health-badge[data-health=\"happy\"] {\n      color: #267348;\n      background: rgba(57, 210, 117, 0.13);\n    }\n\n    #commandbrief-app .cb-health-badge[data-health=\"neutral\"] {\n      color: #725a00;\n      background: rgba(245, 184, 0, 0.16);\n    }\n\n    #commandbrief-app .cb-health-badge[data-health=\"unhappy\"] {\n      color: #a44c00;\n      background: rgba(245, 133, 31, 0.16);\n    }\n\n    #commandbrief-app .cb-health-badge[data-health=\"at-risk\"] {\n      color: var(--danger);\n      background: rgba(217, 45, 32, 0.12);\n    }\n\n    #commandbrief-app .cb-contact-badge {\n      color: var(--muted);\n      background: rgba(102, 112, 133, 0.10);\n    }\n\n    #commandbrief-app .cb-contact-badge.cb-stale {\n      color: #a44c00;\n      background: rgba(245, 133, 31, 0.14);\n    }\n\n    #commandbrief-app .cb-contact-badge.cb-never {\n      color: var(--danger);\n      background: rgba(217, 45, 32, 0.10);\n    }\n\n    #commandbrief-app .cb-client-header-actions {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: flex-end;\n      gap: 8px;\n    }\n\n    #commandbrief-app .cb-secondary-btn {\n      padding: 9px 12px;\n      border: 1px solid var(--border);\n      border-radius: 999px;\n      color: var(--text);\n      background: var(--panel-soft);\n      font-size: 11px;\n      font-weight: 800;\n      white-space: nowrap;\n    }\n\n    #commandbrief-app .cb-secondary-btn:hover {\n      border-color: var(--accent-2);\n      background: rgba(41, 151, 255, 0.08);\n    }\n\n    #commandbrief-app .cb-secondary-btn:disabled,\n    #commandbrief-app .cb-danger-btn:disabled {\n      opacity: 0.45;\n      cursor: not-allowed;\n    }\n\n    #commandbrief-app .cb-overview-grid {\n      display: grid;\n      grid-template-columns: minmax(0, 1.45fr) minmax(230px, 0.75fr);\n      gap: 12px;\n    }\n\n    #commandbrief-app .cb-overview-card {\n      padding: 15px;\n      border: 1px solid var(--border);\n      border-radius: 15px;\n      background: var(--panel);\n    }\n\n    #commandbrief-app .cb-overview-card.cb-health-card {\n      grid-row: span 2;\n    }\n\n    #commandbrief-app .cb-overview-label {\n      color: var(--muted);\n      font-size: 10px;\n      font-weight: 800;\n      letter-spacing: 0.11em;\n      text-transform: uppercase;\n    }\n\n    #commandbrief-app .cb-overview-value {\n      margin-top: 8px;\n      color: var(--text);\n      font-size: 22px;\n      font-weight: 800;\n      letter-spacing: -0.03em;\n      line-height: 1.15;\n    }\n\n    #commandbrief-app .cb-overview-helper {\n      margin-top: 6px;\n      color: var(--muted);\n      font-size: 11px;\n      line-height: 1.45;\n    }\n\n    #commandbrief-app .cb-overview-actions {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n      margin-top: 12px;\n    }\n\n    #commandbrief-app .cb-health-scale {\n      display: grid;\n      grid-template-columns: repeat(5, minmax(0, 1fr));\n      gap: 7px;\n      margin-top: 11px;\n    }\n\n    #commandbrief-app .cb-health-btn {\n      min-width: 0;\n      padding: 10px 6px;\n      border: 1px solid var(--border);\n      border-radius: 12px;\n      color: var(--text);\n      background: var(--panel-soft);\n      text-align: center;\n      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;\n    }\n\n    #commandbrief-app .cb-health-btn:hover {\n      transform: translateY(-1px);\n      border-color: var(--accent-2);\n    }\n\n    #commandbrief-app .cb-health-emoji {\n      display: block;\n      margin-bottom: 4px;\n      font-size: 20px;\n      line-height: 1;\n    }\n\n    #commandbrief-app .cb-health-name {\n      display: block;\n      overflow: hidden;\n      font-size: 9px;\n      font-weight: 800;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    #commandbrief-app .cb-health-btn.cb-selected {\n      border-color: var(--accent-2);\n      box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.10);\n    }\n\n    #commandbrief-app .cb-health-btn[data-health=\"very-happy\"].cb-selected {\n      border-color: #28a745;\n      background: rgba(40, 167, 69, 0.12);\n    }\n\n    #commandbrief-app .cb-health-btn[data-health=\"happy\"].cb-selected {\n      border-color: #39a96b;\n      background: rgba(57, 169, 107, 0.11);\n    }\n\n    #commandbrief-app .cb-health-btn[data-health=\"neutral\"].cb-selected {\n      border-color: #d7a500;\n      background: rgba(245, 184, 0, 0.13);\n    }\n\n    #commandbrief-app .cb-health-btn[data-health=\"unhappy\"].cb-selected {\n      border-color: #e47712;\n      background: rgba(245, 133, 31, 0.13);\n    }\n\n    #commandbrief-app .cb-health-btn[data-health=\"at-risk\"].cb-selected {\n      border-color: var(--danger);\n      background: rgba(217, 45, 32, 0.10);\n    }\n\n    #commandbrief-app .cb-health-reason {\n      min-height: 80px;\n      margin-top: 11px;\n    }\n\n    #commandbrief-app .cb-drive-input {\n      margin-top: 10px;\n      font-size: 12px;\n    }\n\n    #commandbrief-app .cb-task.cb-overdue {\n      border-color: rgba(217, 45, 32, 0.40);\n      box-shadow: inset 4px 0 0 rgba(217, 45, 32, 0.75);\n    }\n\n    #commandbrief-app .cb-task-due-row {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 8px;\n      margin-top: 9px;\n      padding-top: 9px;\n      border-top: 1px solid var(--border);\n    }\n\n    #commandbrief-app .cb-task-due-label {\n      color: var(--muted);\n      font-size: 10px;\n      font-weight: 800;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n    }\n\n    #commandbrief-app .cb-task-due-input {\n      width: auto;\n      min-width: 145px;\n      padding: 7px 9px;\n      border-radius: 9px;\n      font-size: 11px;\n    }\n\n    #commandbrief-app .cb-overdue-label {\n      padding: 4px 7px;\n      border-radius: 999px;\n      color: var(--danger);\n      background: rgba(217, 45, 32, 0.10);\n      font-size: 9px;\n      font-weight: 800;\n      text-transform: uppercase;\n      letter-spacing: 0.07em;\n    }\n\n    #commandbrief-app .cb-stat.cb-attention {\n      cursor: pointer;\n    }\n\n    #commandbrief-app .cb-stat.cb-attention:hover {\n      border-color: var(--danger);\n    }\n\n\n    #commandbrief-app .cb-call-form {\n      display: grid;\n      grid-template-columns: minmax(0, 1.25fr) minmax(190px, 0.75fr) 150px auto;\n      gap: 9px;\n      align-items: end;\n    }\n\n    #commandbrief-app .cb-call-form .cb-field {\n      margin-bottom: 0;\n    }\n\n    #commandbrief-app .cb-call-notes-field {\n      grid-column: 1 \/ -1;\n    }\n\n    #commandbrief-app .cb-call-notes-field textarea {\n      min-height: 78px;\n    }\n\n    #commandbrief-app .cb-call-add-btn {\n      width: auto;\n      min-width: 125px;\n    }\n\n    #commandbrief-app .cb-call-columns {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 14px;\n      margin-top: 14px;\n    }\n\n    #commandbrief-app .cb-call-list {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    #commandbrief-app .cb-call-card {\n      padding: 13px;\n      border: 1px solid var(--border);\n      border-radius: 14px;\n      background: var(--panel);\n    }\n\n    #commandbrief-app .cb-call-card.cb-call-completed {\n      background: rgba(40, 167, 69, 0.07);\n    }\n\n    #commandbrief-app .cb-call-card.cb-call-overdue {\n      border-color: rgba(217, 45, 32, 0.38);\n      box-shadow: inset 4px 0 0 rgba(217, 45, 32, 0.72);\n    }\n\n    #commandbrief-app .cb-call-card-top {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 10px;\n      margin-bottom: 10px;\n    }\n\n    #commandbrief-app .cb-call-status {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 5px 8px;\n      border-radius: 999px;\n      color: var(--accent);\n      background: rgba(41, 151, 255, 0.12);\n      font-size: 9px;\n      font-weight: 800;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n\n    #commandbrief-app .cb-call-completed .cb-call-status {\n      color: var(--success);\n      background: rgba(40, 167, 69, 0.12);\n    }\n\n    #commandbrief-app .cb-call-overdue .cb-call-status {\n      color: var(--danger);\n      background: rgba(217, 45, 32, 0.10);\n    }\n\n    #commandbrief-app .cb-call-delete {\n      padding: 3px 7px;\n      border: 0;\n      border-radius: 8px;\n      color: var(--muted);\n      background: transparent;\n      font-size: 17px;\n      line-height: 1;\n    }\n\n    #commandbrief-app .cb-call-delete:hover {\n      color: var(--danger);\n      background: rgba(217, 45, 32, 0.08);\n    }\n\n    #commandbrief-app .cb-call-title-input {\n      padding: 0;\n      border: 0;\n      border-radius: 0;\n      background: transparent;\n      box-shadow: none;\n      color: var(--text);\n      font-size: 14px;\n      font-weight: 800;\n    }\n\n    #commandbrief-app .cb-call-title-input:focus {\n      padding: 5px 6px;\n      margin: -5px -6px;\n      border: 0;\n      border-radius: 8px;\n      background: rgba(41, 151, 255, 0.10);\n      box-shadow: none;\n    }\n\n    #commandbrief-app .cb-call-date-row {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 8px;\n      margin-top: 9px;\n    }\n\n    #commandbrief-app .cb-call-date-label {\n      color: var(--muted);\n      font-size: 10px;\n      font-weight: 800;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n\n    #commandbrief-app .cb-call-date-input {\n      width: auto;\n      min-width: 195px;\n      padding: 8px 9px;\n      border-radius: 9px;\n      font-size: 11px;\n    }\n\n    #commandbrief-app .cb-call-card-notes {\n      min-height: 82px;\n      margin-top: 10px;\n      font-size: 12px;\n    }\n\n    #commandbrief-app .cb-call-actions {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: flex-end;\n      gap: 8px;\n      margin-top: 10px;\n    }\n\n    #commandbrief-app .cb-call-action-btn {\n      padding: 8px 10px;\n      border: 1px solid var(--border);\n      border-radius: 999px;\n      color: var(--text);\n      background: var(--panel-soft);\n      font-size: 10px;\n      font-weight: 800;\n    }\n\n    #commandbrief-app .cb-call-action-btn:hover {\n      border-color: var(--accent-2);\n      background: rgba(41, 151, 255, 0.08);\n    }\n\n    #commandbrief-app .cb-next-call-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 5px 8px;\n      border-radius: 999px;\n      color: var(--accent);\n      background: rgba(41, 151, 255, 0.10);\n      font-size: 10px;\n      font-weight: 800;\n      line-height: 1;\n    }\n\n    @media (max-width: 950px) {\n      #commandbrief-app .cb-call-form {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      #commandbrief-app .cb-call-add-btn {\n        width: 100%;\n      }\n\n      #commandbrief-app .cb-call-notes-field {\n        grid-column: 1 \/ -1;\n      }\n    }\n\n    @media (max-width: 760px) {\n      #commandbrief-app .cb-call-columns,\n      #commandbrief-app .cb-call-form {\n        grid-template-columns: 1fr;\n      }\n\n      #commandbrief-app .cb-call-notes-field {\n        grid-column: auto;\n      }\n    }\n\n    @media (max-width: 950px) {\n      #commandbrief-app .cb-overview-grid {\n        grid-template-columns: 1fr;\n      }\n\n      #commandbrief-app .cb-overview-card.cb-health-card {\n        grid-row: auto;\n      }\n\n      #commandbrief-app .cb-health-scale {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n    }\n\n    @media (max-width: 760px) {\n      #commandbrief-app .cb-stats {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n\n      #commandbrief-app .cb-client-header-actions {\n        justify-content: flex-start;\n      }\n    }\n\n    @media (max-width: 560px) {\n      #commandbrief-app .cb-health-scale {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n    }\n\n    @media (max-width: 950px) {\n      #commandbrief-app .cb-layout {\n        grid-template-columns: 280px minmax(0, 1fr);\n      }\n\n      #commandbrief-app .cb-client-info,\n      #commandbrief-app .cb-task-form {\n        grid-template-columns: 1fr;\n      }\n\n      #commandbrief-app .cb-task-add-btn {\n        width: 100%;\n      }\n    }\n\n    @media (max-width: 760px) {\n      #commandbrief-app .cb-layout,\n      #commandbrief-app .cb-task-columns {\n        grid-template-columns: 1fr;\n      }\n\n      #commandbrief-app .cb-top {\n        flex-direction: column;\n      }\n\n      #commandbrief-app .cb-top-actions {\n        width: 100%;\n        justify-content: flex-start;\n      }\n\n      #commandbrief-app .cb-client-list {\n        max-height: 310px;\n      }\n    }\n\n    @media (max-width: 560px) {\n      #commandbrief-app {\n        padding: 10px;\n        border-radius: 18px;\n      }\n\n      #commandbrief-app .cb-top,\n      #commandbrief-app .cb-sidebar,\n      #commandbrief-app .cb-main {\n        padding: 15px;\n        border-radius: 18px;\n      }\n\n      #commandbrief-app .cb-brand-wrap {\n        align-items: flex-start;\n      }\n\n      #commandbrief-app .cb-logo {\n        width: 50px;\n        height: 50px;\n        border-radius: 15px;\n        font-size: 23px;\n      }\n\n      #commandbrief-app .cb-title {\n        font-size: 34px;\n      }\n\n      #commandbrief-app .cb-stats {\n        grid-template-columns: 1fr;\n      }\n\n      #commandbrief-app .cb-client-header {\n        flex-direction: column;\n      }\n\n      #commandbrief-app .cb-client-info {\n        grid-template-columns: 1fr;\n      }\n    }\n  <\/style>\n\n  <section class=\"cb-top\">\n    <div style=\"min-width:0; width:100%;\">\n      <div class=\"cb-brand-wrap\">\n        <div class=\"cb-logo\">\u2713<\/div>\n        <div>\n          <div class=\"cb-kicker\">Customer Success CRM<\/div>\n          <h1 class=\"cb-title\">Client Success CRM<\/h1>\n          <p class=\"cb-subtitle\">See every client\u2019s health, last contact, work in progress, and completed history.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"cb-stats\">\n        <div class=\"cb-stat\">\n          <span class=\"cb-stat-number\" id=\"cb-client-count\">0<\/span>\n          <span class=\"cb-stat-label\">Clients<\/span>\n        <\/div>\n        <div class=\"cb-stat cb-attention\" id=\"cb-attention-stat\" title=\"Show clients who need attention\">\n          <span class=\"cb-stat-number\" id=\"cb-attention-count\">0<\/span>\n          <span class=\"cb-stat-label\">Need Attention<\/span>\n        <\/div>\n        <div class=\"cb-stat\">\n          <span class=\"cb-stat-number\" id=\"cb-open-count\">0<\/span>\n          <span class=\"cb-stat-label\">Open Tasks<\/span>\n        <\/div>\n        <div class=\"cb-stat\">\n          <span class=\"cb-stat-number\" id=\"cb-completed-count\">0<\/span>\n          <span class=\"cb-stat-label\">Completed Work<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"cb-top-actions\">\n      <button class=\"cb-small-btn\" id=\"cb-theme-btn\" type=\"button\">Dark mode<\/button>\n      <button class=\"cb-small-btn\" id=\"cb-export-btn\" type=\"button\">Save data<\/button>\n      <button class=\"cb-small-btn\" id=\"cb-import-btn\" type=\"button\">Upload data<\/button>\n      <input class=\"cb-file-input\" id=\"cb-import-input\" type=\"file\" accept=\".json,application\/json\">\n    <\/div>\n  <\/section>\n\n  <div class=\"cb-layout\">\n    <aside class=\"cb-sidebar\">\n      <h2 class=\"cb-panel-title\">Add New Client<\/h2>\n\n      <form id=\"cb-client-form\">\n        <div class=\"cb-field\">\n          <label for=\"cb-new-company\">Company name<\/label>\n          <input id=\"cb-new-company\" type=\"text\" placeholder=\"Company name\" autocomplete=\"organization\">\n        <\/div>\n\n        <div class=\"cb-field\">\n          <label for=\"cb-new-contact\">Contact name<\/label>\n          <input id=\"cb-new-contact\" type=\"text\" placeholder=\"Contact name\" autocomplete=\"name\">\n        <\/div>\n\n        <div class=\"cb-field\">\n          <label for=\"cb-new-email\">Contact email<\/label>\n          <input id=\"cb-new-email\" type=\"email\" placeholder=\"name@company.com\" autocomplete=\"email\">\n        <\/div>\n\n        <button class=\"cb-primary-btn\" id=\"cb-add-client-btn\" type=\"submit\" disabled=\"\">+ Add Client<\/button>\n      <\/form>\n\n      <div class=\"cb-list-tools\">\n        <div class=\"cb-search\">\n          <input id=\"cb-search-input\" type=\"search\" placeholder=\"Search clients...\" autocomplete=\"off\">\n        <\/div>\n        <select id=\"cb-client-filter\" aria-label=\"Filter clients\">\n          <option value=\"all\">All clients<\/option>\n          <option value=\"attention\">Needs attention<\/option>\n          <option value=\"stale\">No contact in 14+ days<\/option>\n          <option value=\"no-drive\">No Drive folder<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"cb-client-list\" id=\"cb-client-list\"><\/div>\n    <\/aside>\n\n    <main class=\"cb-main\">\n      <section class=\"cb-welcome\" id=\"cb-welcome\">\n        <div>\n          <div class=\"cb-welcome-icon\">+<\/div>\n          <h2>Add your first client<\/h2>\n          <p>Each client gets a health rating, contact history, Drive folder, notes, open work, and completed history.<\/p>\n        <\/div>\n      <\/section>\n\n      <section class=\"cb-client-view\" id=\"cb-client-view\" hidden=\"\">\n        <div class=\"cb-client-header\">\n          <div>\n            <h2 class=\"cb-client-title\" id=\"cb-current-client-title\">Client<\/h2>\n            <p class=\"cb-client-summary\" id=\"cb-current-client-summary\">0 open \u00b7 0 completed<\/p>\n          <\/div>\n\n          <div class=\"cb-client-header-actions\">\n            <button class=\"cb-secondary-btn\" id=\"cb-email-client-btn\" type=\"button\">Email client<\/button>\n            <button class=\"cb-danger-btn\" id=\"cb-delete-client-btn\" type=\"button\">Delete client<\/button>\n          <\/div>\n        <\/div>\n\n        <div class=\"cb-client-info\">\n          <div class=\"cb-info-card\">\n            <div class=\"cb-info-label\">Company<\/div>\n            <input class=\"cb-info-input\" id=\"cb-company-input\" type=\"text\">\n          <\/div>\n\n          <div class=\"cb-info-card\">\n            <div class=\"cb-info-label\">Contact<\/div>\n            <input class=\"cb-info-input\" id=\"cb-contact-input\" type=\"text\">\n          <\/div>\n\n          <div class=\"cb-info-card\">\n            <div class=\"cb-info-label\">Email<\/div>\n            <input class=\"cb-info-input\" id=\"cb-email-input\" type=\"email\">\n          <\/div>\n        <\/div>\n\n        <section class=\"cb-section\">\n          <div class=\"cb-section-head\">\n            <h3 class=\"cb-section-title\">Client Overview<\/h3>\n            <span class=\"cb-health-badge\" id=\"cb-current-health-badge\" data-health=\"neutral\">\ud83d\ude10 Neutral<\/span>\n          <\/div>\n\n          <div class=\"cb-overview-grid\">\n            <div class=\"cb-overview-card cb-health-card\">\n              <div class=\"cb-overview-label\">How is this client feeling?<\/div>\n\n              <div class=\"cb-health-scale\" id=\"cb-health-scale\">\n                <button class=\"cb-health-btn\" type=\"button\" data-health=\"very-happy\">\n                  <span class=\"cb-health-emoji\">\ud83d\ude04<\/span>\n                  <span class=\"cb-health-name\">Very Happy<\/span>\n                <\/button>\n                <button class=\"cb-health-btn\" type=\"button\" data-health=\"happy\">\n                  <span class=\"cb-health-emoji\">\ud83d\ude42<\/span>\n                  <span class=\"cb-health-name\">Happy<\/span>\n                <\/button>\n                <button class=\"cb-health-btn\" type=\"button\" data-health=\"neutral\">\n                  <span class=\"cb-health-emoji\">\ud83d\ude10<\/span>\n                  <span class=\"cb-health-name\">Neutral<\/span>\n                <\/button>\n                <button class=\"cb-health-btn\" type=\"button\" data-health=\"unhappy\">\n                  <span class=\"cb-health-emoji\">\ud83d\ude1f<\/span>\n                  <span class=\"cb-health-name\">Unhappy<\/span>\n                <\/button>\n                <button class=\"cb-health-btn\" type=\"button\" data-health=\"at-risk\">\n                  <span class=\"cb-health-emoji\">\ud83d\udea8<\/span>\n                  <span class=\"cb-health-name\">At Risk<\/span>\n                <\/button>\n              <\/div>\n\n              <textarea class=\"cb-health-reason\" id=\"cb-health-reason\" placeholder=\"Why does the client feel this way? Add context so you remember later.\"><\/textarea>\n              <div class=\"cb-overview-helper\" id=\"cb-health-updated\">Health has not been updated yet.<\/div>\n            <\/div>\n\n            <div class=\"cb-overview-card\">\n              <div class=\"cb-overview-label\">Last Contacted<\/div>\n              <div class=\"cb-overview-value\" id=\"cb-last-contacted-value\">Never<\/div>\n              <div class=\"cb-overview-helper\" id=\"cb-last-contacted-helper\">No client check-in has been recorded.<\/div>\n              <div class=\"cb-overview-actions\">\n                <button class=\"cb-secondary-btn\" id=\"cb-mark-contacted-btn\" type=\"button\">\u2713 Contacted Today<\/button>\n                <button class=\"cb-secondary-btn\" id=\"cb-clear-contacted-btn\" type=\"button\">Clear<\/button>\n              <\/div>\n            <\/div>\n\n            <div class=\"cb-overview-card\">\n              <div class=\"cb-overview-label\">Google Drive Folder<\/div>\n              <input class=\"cb-drive-input\" id=\"cb-drive-url\" type=\"url\" placeholder=\"Paste the client\u2019s Google Drive folder link\">\n              <div class=\"cb-overview-actions\">\n                <button class=\"cb-secondary-btn\" id=\"cb-open-drive-btn\" type=\"button\">\ud83d\udcc1 Open Folder<\/button>\n                <button class=\"cb-secondary-btn\" id=\"cb-clear-drive-btn\" type=\"button\">Clear<\/button>\n              <\/div>\n              <div class=\"cb-overview-helper\">The link is included when you save and upload your Client Success CRM backup.<\/div>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <section class=\"cb-section\">\n          <div class=\"cb-section-head\">\n            <h3 class=\"cb-section-title\">Client Notes<\/h3>\n          <\/div>\n          <textarea class=\"cb-client-notes\" id=\"cb-client-notes\" placeholder=\"Add notes about this client...\"><\/textarea>\n        <\/section>\n\n        <section class=\"cb-section\">\n          <div class=\"cb-section-head\">\n            <h3 class=\"cb-section-title\">Client Calls<\/h3>\n            <span class=\"cb-section-count\" id=\"cb-call-total-count\">0<\/span>\n          <\/div>\n\n          <form class=\"cb-call-form\" id=\"cb-call-form\">\n            <div class=\"cb-field\">\n              <label for=\"cb-call-title\">Call topic<\/label>\n              <input id=\"cb-call-title\" type=\"text\" placeholder=\"Onboarding check-in, monthly review...\" autocomplete=\"off\">\n            <\/div>\n\n            <div class=\"cb-field\">\n              <label for=\"cb-call-date\">Date and time<\/label>\n              <input id=\"cb-call-date\" type=\"datetime-local\">\n            <\/div>\n\n            <div class=\"cb-field\">\n              <label for=\"cb-call-status\">Call status<\/label>\n              <select id=\"cb-call-status\">\n                <option value=\"upcoming\">Upcoming<\/option>\n                <option value=\"completed\">Already happened<\/option>\n              <\/select>\n            <\/div>\n\n            <button class=\"cb-primary-btn cb-call-add-btn\" id=\"cb-add-call-btn\" type=\"submit\" disabled>+ Add Call<\/button>\n\n            <div class=\"cb-field cb-call-notes-field\">\n              <label for=\"cb-call-notes\">Call notes<\/label>\n              <textarea id=\"cb-call-notes\" placeholder=\"Agenda for an upcoming call, or notes and next steps from a completed call...\"><\/textarea>\n            <\/div>\n          <\/form>\n\n          <div class=\"cb-call-columns\">\n            <div>\n              <div class=\"cb-section-head\">\n                <h3 class=\"cb-section-title\">Upcoming Calls<\/h3>\n                <span class=\"cb-section-count\" id=\"cb-upcoming-call-count\">0<\/span>\n              <\/div>\n              <div id=\"cb-upcoming-call-list\"><\/div>\n            <\/div>\n\n            <div>\n              <div class=\"cb-section-head\">\n                <h3 class=\"cb-section-title\">Call History<\/h3>\n                <span class=\"cb-section-count\" id=\"cb-completed-call-count\">0<\/span>\n              <\/div>\n              <div id=\"cb-completed-call-list\"><\/div>\n              <div class=\"cb-clear-wrap\">\n                <button class=\"cb-danger-btn\" id=\"cb-clear-call-history-btn\" type=\"button\">Clear call history<\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <section class=\"cb-section\">\n          <div class=\"cb-section-head\">\n            <h3 class=\"cb-section-title\">Add Task<\/h3>\n          <\/div>\n\n          <form class=\"cb-task-form\" id=\"cb-task-form\">\n            <div class=\"cb-field\">\n              <label for=\"cb-task-title\">Task<\/label>\n              <input id=\"cb-task-title\" type=\"text\" placeholder=\"What are we doing for them?\" autocomplete=\"off\">\n            <\/div>\n\n            <div class=\"cb-field\">\n              <label for=\"cb-task-notes\">Task notes<\/label>\n              <input id=\"cb-task-notes\" type=\"text\" placeholder=\"Optional details\" autocomplete=\"off\">\n            <\/div>\n\n            <div class=\"cb-field\">\n              <label for=\"cb-task-due-date\">Due date<\/label>\n              <input id=\"cb-task-due-date\" type=\"date\">\n            <\/div>\n\n            <button class=\"cb-primary-btn cb-task-add-btn\" id=\"cb-add-task-btn\" type=\"submit\" disabled=\"\">+ Add Task<\/button>\n          <\/form>\n        <\/section>\n\n        <div class=\"cb-task-columns\">\n          <section class=\"cb-section\" style=\"margin-bottom:0;\">\n            <div class=\"cb-section-head\">\n              <h3 class=\"cb-section-title\">Open Tasks<\/h3>\n              <span class=\"cb-section-count\" id=\"cb-open-section-count\">0<\/span>\n            <\/div>\n            <div id=\"cb-open-task-list\"><\/div>\n          <\/section>\n\n          <section class=\"cb-section\" style=\"margin-bottom:0;\">\n            <div class=\"cb-section-head\">\n              <h3 class=\"cb-section-title\">Completed History<\/h3>\n              <span class=\"cb-section-count\" id=\"cb-completed-section-count\">0<\/span>\n            <\/div>\n            <div id=\"cb-completed-task-list\"><\/div>\n            <div class=\"cb-clear-wrap\">\n              <button class=\"cb-danger-btn\" id=\"cb-clear-completed-btn\" type=\"button\">Clear completed<\/button>\n            <\/div>\n          <\/section>\n        <\/div>\n\n        <p class=\"cb-footer-note\">Saved automatically in this browser. Client health, contact dates, Drive links, call logs, notes, tasks, and completed history are all included in Save Data.<\/p>\n      <\/section>\n    <\/main>\n  <\/div>\n\n  <script>\n    (function () {\n      \"use strict\";\n\n      var DATA_KEY = \"commandbrief-v1-data\";\n      var THEME_KEY = \"commandbrief-v1-theme\";\n      var ATTENTION_HEALTH = [\"unhappy\", \"at-risk\"];\n\n      var HEALTH_OPTIONS = {\n        \"very-happy\": { emoji: \"\ud83d\ude04\", label: \"Very Happy\" },\n        \"happy\": { emoji: \"\ud83d\ude42\", label: \"Happy\" },\n        \"neutral\": { emoji: \"\ud83d\ude10\", label: \"Neutral\" },\n        \"unhappy\": { emoji: \"\ud83d\ude1f\", label: \"Unhappy\" },\n        \"at-risk\": { emoji: \"\ud83d\udea8\", label: \"At Risk\" }\n      };\n\n      var root = document.getElementById(\"commandbrief-app\");\n      if (!root) return;\n\n      var clients = loadClients();\n      var activeClientId = clients.length ? clients[0].id : null;\n\n      var clientForm = root.querySelector(\"#cb-client-form\");\n      var newCompany = root.querySelector(\"#cb-new-company\");\n      var newContact = root.querySelector(\"#cb-new-contact\");\n      var newEmail = root.querySelector(\"#cb-new-email\");\n      var addClientBtn = root.querySelector(\"#cb-add-client-btn\");\n      var searchInput = root.querySelector(\"#cb-search-input\");\n      var clientFilter = root.querySelector(\"#cb-client-filter\");\n      var clientList = root.querySelector(\"#cb-client-list\");\n\n      var welcome = root.querySelector(\"#cb-welcome\");\n      var clientView = root.querySelector(\"#cb-client-view\");\n      var currentClientTitle = root.querySelector(\"#cb-current-client-title\");\n      var currentClientSummary = root.querySelector(\"#cb-current-client-summary\");\n      var companyInput = root.querySelector(\"#cb-company-input\");\n      var contactInput = root.querySelector(\"#cb-contact-input\");\n      var emailInput = root.querySelector(\"#cb-email-input\");\n      var clientNotes = root.querySelector(\"#cb-client-notes\");\n      var deleteClientBtn = root.querySelector(\"#cb-delete-client-btn\");\n      var emailClientBtn = root.querySelector(\"#cb-email-client-btn\");\n\n      var healthScale = root.querySelector(\"#cb-health-scale\");\n      var healthButtons = Array.prototype.slice.call(root.querySelectorAll(\".cb-health-btn\"));\n      var healthReason = root.querySelector(\"#cb-health-reason\");\n      var healthUpdated = root.querySelector(\"#cb-health-updated\");\n      var currentHealthBadge = root.querySelector(\"#cb-current-health-badge\");\n\n      var lastContactedValue = root.querySelector(\"#cb-last-contacted-value\");\n      var lastContactedHelper = root.querySelector(\"#cb-last-contacted-helper\");\n      var markContactedBtn = root.querySelector(\"#cb-mark-contacted-btn\");\n      var clearContactedBtn = root.querySelector(\"#cb-clear-contacted-btn\");\n\n      var driveUrl = root.querySelector(\"#cb-drive-url\");\n      var openDriveBtn = root.querySelector(\"#cb-open-drive-btn\");\n      var clearDriveBtn = root.querySelector(\"#cb-clear-drive-btn\");\n\n      var callForm = root.querySelector(\"#cb-call-form\");\n      var callTitle = root.querySelector(\"#cb-call-title\");\n      var callDate = root.querySelector(\"#cb-call-date\");\n      var callStatus = root.querySelector(\"#cb-call-status\");\n      var callNotes = root.querySelector(\"#cb-call-notes\");\n      var addCallBtn = root.querySelector(\"#cb-add-call-btn\");\n      var callTotalCount = root.querySelector(\"#cb-call-total-count\");\n      var upcomingCallCount = root.querySelector(\"#cb-upcoming-call-count\");\n      var completedCallCount = root.querySelector(\"#cb-completed-call-count\");\n      var upcomingCallList = root.querySelector(\"#cb-upcoming-call-list\");\n      var completedCallList = root.querySelector(\"#cb-completed-call-list\");\n      var clearCallHistoryBtn = root.querySelector(\"#cb-clear-call-history-btn\");\n\n      var taskForm = root.querySelector(\"#cb-task-form\");\n      var taskTitle = root.querySelector(\"#cb-task-title\");\n      var taskNotes = root.querySelector(\"#cb-task-notes\");\n      var taskDueDate = root.querySelector(\"#cb-task-due-date\");\n      var addTaskBtn = root.querySelector(\"#cb-add-task-btn\");\n      var openTaskList = root.querySelector(\"#cb-open-task-list\");\n      var completedTaskList = root.querySelector(\"#cb-completed-task-list\");\n      var clearCompletedBtn = root.querySelector(\"#cb-clear-completed-btn\");\n\n      var clientCount = root.querySelector(\"#cb-client-count\");\n      var attentionCount = root.querySelector(\"#cb-attention-count\");\n      var attentionStat = root.querySelector(\"#cb-attention-stat\");\n      var openCount = root.querySelector(\"#cb-open-count\");\n      var completedCount = root.querySelector(\"#cb-completed-count\");\n      var openSectionCount = root.querySelector(\"#cb-open-section-count\");\n      var completedSectionCount = root.querySelector(\"#cb-completed-section-count\");\n\n      var themeBtn = root.querySelector(\"#cb-theme-btn\");\n      var exportBtn = root.querySelector(\"#cb-export-btn\");\n      var importBtn = root.querySelector(\"#cb-import-btn\");\n      var importInput = root.querySelector(\"#cb-import-input\");\n\n      function makeId(prefix) {\n        return prefix + \"-\" + Date.now() + \"-\" + Math.random().toString(16).slice(2);\n      }\n\n      function normalizeTask(task) {\n        return {\n          id: task && task.id ? task.id : makeId(\"task\"),\n          title: task && task.title ? String(task.title) : \"Untitled task\",\n          notes: task && task.notes ? String(task.notes) : \"\",\n          dueDate: task && task.dueDate ? String(task.dueDate) : \"\",\n          completed: Boolean(task && task.completed),\n          createdAt: task && task.createdAt ? task.createdAt : new Date().toISOString(),\n          completedAt: task && task.completedAt ? task.completedAt : null\n        };\n      }\n\n      function normalizeCall(call) {\n        var status = call && call.status === \"completed\" ? \"completed\" : \"upcoming\";\n\n        return {\n          id: call && call.id ? call.id : makeId(\"call\"),\n          title: call && call.title ? String(call.title) : \"Client call\",\n          scheduledAt: call && call.scheduledAt ? String(call.scheduledAt) : \"\",\n          status: status,\n          notes: call && call.notes ? String(call.notes) : \"\",\n          createdAt: call && call.createdAt ? call.createdAt : new Date().toISOString(),\n          completedAt: call && call.completedAt ? call.completedAt : null\n        };\n      }\n\n      function normalizeClient(client) {\n        var health = client && HEALTH_OPTIONS[client.health] ? client.health : \"neutral\";\n\n        return {\n          id: client && client.id ? client.id : makeId(\"client\"),\n          company: client && client.company ? String(client.company) : \"Untitled Client\",\n          contact: client && client.contact ? String(client.contact) : \"\",\n          email: client && client.email ? String(client.email) : \"\",\n          notes: client && client.notes ? String(client.notes) : \"\",\n          health: health,\n          healthReason: client && client.healthReason ? String(client.healthReason) : \"\",\n          healthUpdatedAt: client && client.healthUpdatedAt ? client.healthUpdatedAt : null,\n          lastContactedAt: client && client.lastContactedAt ? client.lastContactedAt : null,\n          driveUrl: client && client.driveUrl ? String(client.driveUrl) : \"\",\n          calls: Array.isArray(client && client.calls) ? client.calls.map(normalizeCall) : [],\n          tasks: Array.isArray(client && client.tasks) ? client.tasks.map(normalizeTask) : [],\n          createdAt: client && client.createdAt ? client.createdAt : new Date().toISOString()\n        };\n      }\n\n      function loadClients() {\n        try {\n          var saved = localStorage.getItem(DATA_KEY);\n          var parsed = saved ? JSON.parse(saved) : [];\n          return Array.isArray(parsed) ? parsed.map(normalizeClient) : [];\n        } catch (error) {\n          return [];\n        }\n      }\n\n      function saveClients() {\n        try {\n          localStorage.setItem(DATA_KEY, JSON.stringify(clients));\n        } catch (error) {\n          window.alert(\"Client Success CRM could not save in this browser. Try using Save Data to protect your work.\");\n        }\n      }\n\n      function getActiveClient() {\n        return clients.find(function (client) {\n          return client.id === activeClientId;\n        }) || null;\n      }\n\n      function escapeHTML(value) {\n        return String(value || \"\")\n          .replace(\/&\/g, \"&amp;\")\n          .replace(\/<\/g, \"&lt;\")\n          .replace(\/>\/g, \"&gt;\")\n          .replace(\/\"\/g, \"&quot;\")\n          .replace(\/'\/g, \"&#039;\");\n      }\n\n      function formatDate(value) {\n        if (!value) return \"\";\n        try {\n          return new Intl.DateTimeFormat(\"en-US\", {\n            month: \"short\",\n            day: \"numeric\",\n            year: \"numeric\"\n          }).format(new Date(value));\n        } catch (error) {\n          return \"\";\n        }\n      }\n\n      function formatDateTime(value) {\n        if (!value) return \"\";\n\n        try {\n          return new Intl.DateTimeFormat(\"en-US\", {\n            month: \"short\",\n            day: \"numeric\",\n            year: \"numeric\",\n            hour: \"numeric\",\n            minute: \"2-digit\"\n          }).format(new Date(value));\n        } catch (error) {\n          return \"\";\n        }\n      }\n\n      function callDateValue(value) {\n        if (!value) return null;\n        var date = new Date(value);\n        return Number.isNaN(date.getTime()) ? null : date;\n      }\n\n      function isUpcomingCallPastDue(call) {\n        if (!call || call.status === \"completed\") return false;\n        var date = callDateValue(call.scheduledAt);\n        return Boolean(date && date.getTime() < Date.now());\n      }\n\n      function getNextUpcomingCall(client) {\n        var calls = Array.isArray(client &#038;&#038; client.calls) ? client.calls : [];\n\n        return calls\n          .filter(function (call) {\n            return call.status !== \"completed\" &#038;&#038; callDateValue(call.scheduledAt);\n          })\n          .slice()\n          .sort(function (a, b) {\n            return callDateValue(a.scheduledAt).getTime() - callDateValue(b.scheduledAt).getTime();\n          })[0] || null;\n      }\n\n      function latestContactDate(currentValue, candidateValue) {\n        var current = currentValue ? new Date(currentValue) : null;\n        var candidate = candidateValue ? new Date(candidateValue) : new Date();\n\n        if (Number.isNaN(candidate.getTime()) || candidate.getTime() > Date.now()) {\n          candidate = new Date();\n        }\n\n        if (!current || Number.isNaN(current.getTime()) || candidate.getTime() > current.getTime()) {\n          return candidate.toISOString();\n        }\n\n        return currentValue;\n      }\n\n      function dateOnly(value) {\n        if (!value) return null;\n        var date = new Date(value);\n        if (Number.isNaN(date.getTime())) return null;\n        return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n      }\n\n      function daysSince(value) {\n        var date = dateOnly(value);\n        if (!date) return null;\n\n        var today = new Date();\n        today = new Date(today.getFullYear(), today.getMonth(), today.getDate());\n\n        return Math.max(0, Math.floor((today.getTime() - date.getTime()) \/ 86400000));\n      }\n\n      function contactSummary(value) {\n        var days = daysSince(value);\n\n        if (days === null) {\n          return {\n            short: \"Never contacted\",\n            value: \"Never\",\n            helper: \"No client check-in has been recorded.\",\n            className: \"cb-never\"\n          };\n        }\n\n        if (days === 0) {\n          return {\n            short: \"Contacted today\",\n            value: \"Today\",\n            helper: \"Last client contact was recorded today.\",\n            className: \"\"\n          };\n        }\n\n        if (days === 1) {\n          return {\n            short: \"Contacted yesterday\",\n            value: \"Yesterday\",\n            helper: \"Last contacted \" + formatDate(value) + \".\",\n            className: \"\"\n          };\n        }\n\n        return {\n          short: days + \" days ago\",\n          value: days + \" days ago\",\n          helper: \"Last contacted \" + formatDate(value) + \".\",\n          className: days >= 14 ? \"cb-stale\" : \"\"\n        };\n      }\n\n      function isOverdue(task) {\n        if (!task || task.completed || !task.dueDate) return false;\n\n        var due = new Date(task.dueDate + \"T23:59:59\");\n        return !Number.isNaN(due.getTime()) && due.getTime() < Date.now();\n      }\n\n      function safeUrl(value) {\n        var trimmed = String(value || \"\").trim();\n        if (!trimmed) return \"\";\n\n        var candidate = \/^https?:\\\/\\\/\/i.test(trimmed) ? trimmed : \"https:\/\/\" + trimmed;\n\n        try {\n          var parsed = new URL(candidate);\n          return parsed.protocol === \"http:\" || parsed.protocol === \"https:\" ? parsed.href : \"\";\n        } catch (error) {\n          return \"\";\n        }\n      }\n\n      function healthInfo(value) {\n        return HEALTH_OPTIONS[value] || HEALTH_OPTIONS.neutral;\n      }\n\n      function updateClient(clientId, changes) {\n        clients = clients.map(function (client) {\n          if (client.id !== clientId) return client;\n          return normalizeClient(Object.assign({}, client, changes));\n        });\n        saveClients();\n      }\n\n      function renderStats() {\n        var allTasks = [];\n\n        clients.forEach(function (client) {\n          allTasks = allTasks.concat(Array.isArray(client.tasks) ? client.tasks : []);\n        });\n\n        var openTasks = allTasks.filter(function (task) {\n          return !task.completed;\n        }).length;\n\n        var completedTasks = allTasks.filter(function (task) {\n          return task.completed;\n        }).length;\n\n        var attentionClients = clients.filter(function (client) {\n          return ATTENTION_HEALTH.indexOf(client.health) !== -1;\n        }).length;\n\n        clientCount.textContent = clients.length;\n        attentionCount.textContent = attentionClients;\n        openCount.textContent = openTasks;\n        completedCount.textContent = completedTasks;\n      }\n\n      function clientMatchesFilter(client, filter) {\n        if (filter === \"attention\") {\n          return ATTENTION_HEALTH.indexOf(client.health) !== -1;\n        }\n\n        if (filter === \"stale\") {\n          var days = daysSince(client.lastContactedAt);\n          return days === null || days >= 14;\n        }\n\n        if (filter === \"no-drive\") {\n          return !safeUrl(client.driveUrl);\n        }\n\n        return true;\n      }\n\n      function renderClientList() {\n        var search = searchInput.value.trim().toLowerCase();\n        var filter = clientFilter.value || \"all\";\n\n        var filtered = clients.filter(function (client) {\n          var haystack = [\n            client.company,\n            client.contact,\n            client.email,\n            client.healthReason,\n            client.notes\n          ].join(\" \").toLowerCase();\n\n          return haystack.indexOf(search) !== -1 && clientMatchesFilter(client, filter);\n        });\n\n        clientList.innerHTML = \"\";\n\n        if (!filtered.length) {\n          clientList.innerHTML = '<div class=\"cb-sidebar-empty\">' +\n            (clients.length ? \"No clients match this view.\" : \"No clients yet.\") +\n          '<\/div>';\n          return;\n        }\n\n        filtered.forEach(function (client) {\n          var tasks = Array.isArray(client.tasks) ? client.tasks : [];\n          var openTasks = tasks.filter(function (task) {\n            return !task.completed;\n          }).length;\n          var health = healthInfo(client.health);\n          var contact = contactSummary(client.lastContactedAt);\n\n          var button = document.createElement(\"button\");\n          button.type = \"button\";\n          button.className = \"cb-client-card\" + (client.id === activeClientId ? \" cb-active\" : \"\");\n          button.innerHTML =\n            '<div class=\"cb-client-card-top\">' +\n              '<div style=\"min-width:0;\">' +\n                '<div class=\"cb-client-company\">' + escapeHTML(client.company || \"Untitled Client\") + '<\/div>' +\n                '<div class=\"cb-client-contact\">' + escapeHTML(client.contact || client.email || \"No contact added\") + '<\/div>' +\n              '<\/div>' +\n              '<span class=\"cb-count\">' + openTasks + ' open<\/span>' +\n            '<\/div>' +\n            '<div class=\"cb-client-card-meta\">' +\n              '<span class=\"cb-health-badge\" data-health=\"' + escapeHTML(client.health) + '\">' +\n                health.emoji + ' ' + escapeHTML(health.label) +\n              '<\/span>' +\n              '<span class=\"cb-contact-badge ' + contact.className + '\">' + escapeHTML(contact.short) + '<\/span>' +\n              (getNextUpcomingCall(client)\n                ? '<span class=\"cb-next-call-badge\">\u260e ' + escapeHTML(formatDateTime(getNextUpcomingCall(client).scheduledAt)) + '<\/span>'\n                : '') +\n            '<\/div>';\n\n          button.addEventListener(\"click\", function () {\n            activeClientId = client.id;\n            render();\n          });\n\n          clientList.appendChild(button);\n        });\n      }\n\n\n      function updateCall(callId, changes, shouldRender) {\n        var client = getActiveClient();\n        if (!client) return;\n\n        var nextCalls = client.calls.map(function (call) {\n          if (call.id !== callId) return call;\n          return normalizeCall(Object.assign({}, call, changes));\n        });\n\n        updateClient(client.id, { calls: nextCalls });\n\n        if (shouldRender) render();\n      }\n\n      function createCallCard(call, completed) {\n        var overdue = isUpcomingCallPastDue(call);\n        var card = document.createElement(\"article\");\n\n        card.className = \"cb-call-card\" +\n          (completed ? \" cb-call-completed\" : \"\") +\n          (overdue ? \" cb-call-overdue\" : \"\");\n\n        var statusText = completed ? \"Completed Call\" : (overdue ? \"Call Time Passed\" : \"Upcoming Call\");\n\n        card.innerHTML =\n          '<div class=\"cb-call-card-top\">' +\n            '<span class=\"cb-call-status\">' + statusText + '<\/span>' +\n            '<button class=\"cb-call-delete\" type=\"button\" aria-label=\"Delete call\">\u00d7<\/button>' +\n          '<\/div>' +\n          '<input class=\"cb-call-title-input\" type=\"text\" value=\"' + escapeHTML(call.title) + '\" aria-label=\"Call topic\">' +\n          '<div class=\"cb-call-date-row\">' +\n            '<span class=\"cb-call-date-label\">Date<\/span>' +\n            '<input class=\"cb-call-date-input\" type=\"datetime-local\" value=\"' + escapeHTML(call.scheduledAt || \"\") + '\" aria-label=\"Call date and time\">' +\n          '<\/div>' +\n          '<textarea class=\"cb-call-card-notes\" placeholder=\"Call notes, agenda, decisions, and next steps...\">' + escapeHTML(call.notes || \"\") + '<\/textarea>' +\n          '<div class=\"cb-call-actions\">' +\n            '<button class=\"cb-call-action-btn\" type=\"button\">' + (completed ? \"Move to Upcoming\" : \"\u2713 Mark Completed\") + '<\/button>' +\n          '<\/div>';\n\n        var titleBox = card.querySelector(\".cb-call-title-input\");\n        var dateBox = card.querySelector(\".cb-call-date-input\");\n        var notesBox = card.querySelector(\".cb-call-card-notes\");\n        var actionBtn = card.querySelector(\".cb-call-action-btn\");\n        var deleteBtn = card.querySelector(\".cb-call-delete\");\n\n        titleBox.addEventListener(\"input\", function () {\n          updateCall(call.id, { title: titleBox.value }, false);\n        });\n\n        titleBox.addEventListener(\"blur\", function () {\n          if (titleBox.value.trim()) return;\n\n          titleBox.value = \"Client call\";\n          updateCall(call.id, { title: \"Client call\" }, true);\n        });\n\n        dateBox.addEventListener(\"change\", function () {\n          updateCall(call.id, { scheduledAt: dateBox.value }, true);\n        });\n\n        notesBox.addEventListener(\"input\", function () {\n          updateCall(call.id, { notes: notesBox.value }, false);\n        });\n\n        actionBtn.addEventListener(\"click\", function () {\n          var client = getActiveClient();\n          if (!client) return;\n\n          if (completed) {\n            updateCall(call.id, {\n              status: \"upcoming\",\n              completedAt: null\n            }, true);\n            return;\n          }\n\n          var nextCalls = client.calls.map(function (item) {\n            if (item.id !== call.id) return item;\n\n            return normalizeCall(Object.assign({}, item, {\n              status: \"completed\",\n              completedAt: new Date().toISOString()\n            }));\n          });\n\n          updateClient(client.id, {\n            calls: nextCalls,\n            lastContactedAt: latestContactDate(client.lastContactedAt, call.scheduledAt)\n          });\n\n          render();\n        });\n\n        deleteBtn.addEventListener(\"click\", function () {\n          var client = getActiveClient();\n          if (!client) return;\n\n          var nextCalls = client.calls.filter(function (item) {\n            return item.id !== call.id;\n          });\n\n          updateClient(client.id, { calls: nextCalls });\n          render();\n        });\n\n        return card;\n      }\n\n      function renderCalls(client) {\n        var calls = Array.isArray(client.calls) ? client.calls : [];\n\n        var upcomingCalls = calls\n          .filter(function (call) {\n            return call.status !== \"completed\";\n          })\n          .slice()\n          .sort(function (a, b) {\n            var aDate = callDateValue(a.scheduledAt);\n            var bDate = callDateValue(b.scheduledAt);\n\n            if (aDate && bDate) return aDate.getTime() - bDate.getTime();\n            if (aDate) return -1;\n            if (bDate) return 1;\n            return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();\n          });\n\n        var completedCalls = calls\n          .filter(function (call) {\n            return call.status === \"completed\";\n          })\n          .slice()\n          .sort(function (a, b) {\n            var aTime = callDateValue(a.scheduledAt) || callDateValue(a.completedAt) || new Date(0);\n            var bTime = callDateValue(b.scheduledAt) || callDateValue(b.completedAt) || new Date(0);\n            return bTime.getTime() - aTime.getTime();\n          });\n\n        callTotalCount.textContent = calls.length;\n        upcomingCallCount.textContent = upcomingCalls.length;\n        completedCallCount.textContent = completedCalls.length;\n        clearCallHistoryBtn.disabled = completedCalls.length === 0;\n\n        upcomingCallList.innerHTML = \"\";\n        completedCallList.innerHTML = \"\";\n\n        if (!upcomingCalls.length) {\n          upcomingCallList.innerHTML = '<div class=\"cb-empty\">No upcoming calls scheduled.<\/div>';\n        } else {\n          var upcomingWrap = document.createElement(\"div\");\n          upcomingWrap.className = \"cb-call-list\";\n\n          upcomingCalls.forEach(function (call) {\n            upcomingWrap.appendChild(createCallCard(call, false));\n          });\n\n          upcomingCallList.appendChild(upcomingWrap);\n        }\n\n        if (!completedCalls.length) {\n          completedCallList.innerHTML = '<div class=\"cb-empty\">Completed calls and their notes will stay here.<\/div>';\n        } else {\n          var completedWrap = document.createElement(\"div\");\n          completedWrap.className = \"cb-call-list\";\n\n          completedCalls.forEach(function (call) {\n            completedWrap.appendChild(createCallCard(call, true));\n          });\n\n          completedCallList.appendChild(completedWrap);\n        }\n      }\n\n      function updateTask(taskId, changes, shouldRender) {\n        var client = getActiveClient();\n        if (!client) return;\n\n        var nextTasks = client.tasks.map(function (task) {\n          if (task.id !== taskId) return task;\n          return normalizeTask(Object.assign({}, task, changes));\n        });\n\n        updateClient(client.id, { tasks: nextTasks });\n\n        if (shouldRender) render();\n      }\n\n      function createTaskCard(task, completed) {\n        var overdue = isOverdue(task);\n        var card = document.createElement(\"article\");\n        card.className = \"cb-task\" +\n          (completed ? \" cb-completed\" : \"\") +\n          (overdue ? \" cb-overdue\" : \"\");\n\n        card.innerHTML =\n          '<div class=\"cb-task-top\">' +\n            '<button class=\"cb-check-btn\" type=\"button\" aria-label=\"' + (completed ? \"Reopen task\" : \"Complete task\") + '\">' + (completed ? \"\u2713\" : \"\") + '<\/button>' +\n            '<div>' +\n              '<input class=\"cb-task-title\" type=\"text\" value=\"' + escapeHTML(task.title) + '\" aria-label=\"Task title\">' +\n              '<div class=\"cb-task-date\">Created ' + formatDate(task.createdAt) +\n                (task.completedAt ? \" \u00b7 Completed \" + formatDate(task.completedAt) : \"\") +\n              '<\/div>' +\n            '<\/div>' +\n            '<button class=\"cb-delete-task\" type=\"button\" aria-label=\"Delete task\">\u00d7<\/button>' +\n          '<\/div>' +\n          '<textarea class=\"cb-task-notes\" placeholder=\"Task notes...\">' + escapeHTML(task.notes || \"\") + '<\/textarea>' +\n          '<div class=\"cb-task-due-row\">' +\n            '<span class=\"cb-task-due-label\">Due<\/span>' +\n            '<input class=\"cb-task-due-input\" type=\"date\" value=\"' + escapeHTML(task.dueDate || \"\") + '\" aria-label=\"Task due date\">' +\n            (overdue ? '<span class=\"cb-overdue-label\">Overdue<\/span>' : '') +\n          '<\/div>';\n\n        var checkBtn = card.querySelector(\".cb-check-btn\");\n        var titleBox = card.querySelector(\".cb-task-title\");\n        var notesBox = card.querySelector(\".cb-task-notes\");\n        var dueBox = card.querySelector(\".cb-task-due-input\");\n        var deleteBtn = card.querySelector(\".cb-delete-task\");\n\n        checkBtn.addEventListener(\"click\", function () {\n          var nextCompleted = !task.completed;\n          updateTask(task.id, {\n            completed: nextCompleted,\n            completedAt: nextCompleted ? new Date().toISOString() : null\n          }, true);\n        });\n\n        titleBox.addEventListener(\"input\", function () {\n          updateTask(task.id, { title: titleBox.value }, false);\n        });\n\n        titleBox.addEventListener(\"blur\", function () {\n          if (titleBox.value.trim()) return;\n\n          titleBox.value = \"Untitled task\";\n          updateTask(task.id, { title: \"Untitled task\" }, true);\n        });\n\n        notesBox.addEventListener(\"input\", function () {\n          updateTask(task.id, { notes: notesBox.value }, false);\n        });\n\n        dueBox.addEventListener(\"change\", function () {\n          updateTask(task.id, { dueDate: dueBox.value }, true);\n        });\n\n        deleteBtn.addEventListener(\"click\", function () {\n          var client = getActiveClient();\n          if (!client) return;\n\n          var nextTasks = client.tasks.filter(function (item) {\n            return item.id !== task.id;\n          });\n\n          updateClient(client.id, { tasks: nextTasks });\n          render();\n        });\n\n        return card;\n      }\n\n      function renderTasks(client) {\n        var tasks = Array.isArray(client.tasks) ? client.tasks : [];\n\n        var openTasks = tasks.filter(function (task) {\n          return !task.completed;\n        }).slice().sort(function (a, b) {\n          if (a.dueDate && b.dueDate) return a.dueDate.localeCompare(b.dueDate);\n          if (a.dueDate) return -1;\n          if (b.dueDate) return 1;\n          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();\n        });\n\n        var completedTasks = tasks.filter(function (task) {\n          return task.completed;\n        }).slice().sort(function (a, b) {\n          return new Date(b.completedAt || 0).getTime() - new Date(a.completedAt || 0).getTime();\n        });\n\n        openTaskList.innerHTML = \"\";\n        completedTaskList.innerHTML = \"\";\n\n        openSectionCount.textContent = openTasks.length;\n        completedSectionCount.textContent = completedTasks.length;\n        clearCompletedBtn.disabled = completedTasks.length === 0;\n\n        if (!openTasks.length) {\n          openTaskList.innerHTML = '<div class=\"cb-empty\">No open work for this client.<\/div>';\n        } else {\n          var openWrap = document.createElement(\"div\");\n          openWrap.className = \"cb-task-list\";\n\n          openTasks.forEach(function (task) {\n            openWrap.appendChild(createTaskCard(task, false));\n          });\n\n          openTaskList.appendChild(openWrap);\n        }\n\n        if (!completedTasks.length) {\n          completedTaskList.innerHTML = '<div class=\"cb-empty\">Completed work will stay here as client history.<\/div>';\n        } else {\n          var completedWrap = document.createElement(\"div\");\n          completedWrap.className = \"cb-task-list\";\n\n          completedTasks.forEach(function (task) {\n            completedWrap.appendChild(createTaskCard(task, true));\n          });\n\n          completedTaskList.appendChild(completedWrap);\n        }\n\n        var overdueCount = openTasks.filter(isOverdue).length;\n        var health = healthInfo(client.health);\n\n        currentClientSummary.textContent =\n          health.emoji + \" \" + health.label + \" \u00b7 \" +\n          openTasks.length + \" open \u00b7 \" +\n          completedTasks.length + \" completed\" +\n          (overdueCount ? \" \u00b7 \" + overdueCount + \" overdue\" : \"\");\n      }\n\n      function renderHealth(client) {\n        var health = healthInfo(client.health);\n\n        currentHealthBadge.setAttribute(\"data-health\", client.health);\n        currentHealthBadge.textContent = health.emoji + \" \" + health.label;\n        healthReason.value = client.healthReason || \"\";\n\n        healthButtons.forEach(function (button) {\n          var selected = button.getAttribute(\"data-health\") === client.health;\n          button.classList.toggle(\"cb-selected\", selected);\n          button.setAttribute(\"aria-pressed\", selected ? \"true\" : \"false\");\n        });\n\n        healthUpdated.textContent = client.healthUpdatedAt\n          ? \"Health last updated \" + formatDate(client.healthUpdatedAt) + \".\"\n          : \"Health has not been updated yet.\";\n      }\n\n      function renderContact(client) {\n        var summary = contactSummary(client.lastContactedAt);\n\n        lastContactedValue.textContent = summary.value;\n        lastContactedHelper.textContent = summary.helper;\n        clearContactedBtn.disabled = !client.lastContactedAt;\n      }\n\n      function renderDrive(client) {\n        driveUrl.value = client.driveUrl || \"\";\n        var valid = Boolean(safeUrl(client.driveUrl));\n        openDriveBtn.disabled = !valid;\n        clearDriveBtn.disabled = !client.driveUrl;\n      }\n\n      function renderActiveClient() {\n        var client = getActiveClient();\n\n        if (!client) {\n          welcome.hidden = false;\n          clientView.hidden = true;\n          return;\n        }\n\n        welcome.hidden = true;\n        clientView.hidden = false;\n\n        currentClientTitle.textContent = client.company || \"Untitled Client\";\n        companyInput.value = client.company || \"\";\n        contactInput.value = client.contact || \"\";\n        emailInput.value = client.email || \"\";\n        clientNotes.value = client.notes || \"\";\n        emailClientBtn.disabled = !client.email.trim();\n\n        renderHealth(client);\n        renderContact(client);\n        renderDrive(client);\n        renderCalls(client);\n        renderTasks(client);\n      }\n\n      function render() {\n        if (activeClientId && !getActiveClient()) {\n          activeClientId = clients.length ? clients[0].id : null;\n        }\n\n        renderStats();\n        renderClientList();\n        renderActiveClient();\n        validateTaskForm();\n        validateCallForm();\n      }\n\n      function validateClientForm() {\n        addClientBtn.disabled = !newCompany.value.trim();\n      }\n\n      function validateTaskForm() {\n        addTaskBtn.disabled = !taskTitle.value.trim() || !getActiveClient();\n      }\n\n      function validateCallForm() {\n        addCallBtn.disabled =\n          !callTitle.value.trim() ||\n          !callDate.value ||\n          !getActiveClient();\n      }\n\n      function loadTheme() {\n        try {\n          var saved = localStorage.getItem(THEME_KEY);\n          return saved === \"dark\" ? \"dark\" : \"light\";\n        } catch (error) {\n          return \"light\";\n        }\n      }\n\n      function applyTheme(theme) {\n        root.setAttribute(\"data-theme\", theme);\n        themeBtn.textContent = theme === \"dark\" ? \"Light mode\" : \"Dark mode\";\n\n        try {\n          localStorage.setItem(THEME_KEY, theme);\n        } catch (error) {}\n      }\n\n      clientForm.addEventListener(\"submit\", function (event) {\n        event.preventDefault();\n\n        var company = newCompany.value.trim();\n        if (!company) return;\n\n        var client = normalizeClient({\n          id: makeId(\"client\"),\n          company: company,\n          contact: newContact.value.trim(),\n          email: newEmail.value.trim(),\n          notes: \"\",\n          health: \"neutral\",\n          healthReason: \"\",\n          healthUpdatedAt: null,\n          lastContactedAt: null,\n          driveUrl: \"\",\n          calls: [],\n          tasks: [],\n          createdAt: new Date().toISOString()\n        });\n\n        clients.unshift(client);\n        activeClientId = client.id;\n\n        newCompany.value = \"\";\n        newContact.value = \"\";\n        newEmail.value = \"\";\n        validateClientForm();\n\n        saveClients();\n        render();\n      });\n\n      newCompany.addEventListener(\"input\", validateClientForm);\n      searchInput.addEventListener(\"input\", renderClientList);\n      clientFilter.addEventListener(\"change\", renderClientList);\n\n      attentionStat.addEventListener(\"click\", function () {\n        clientFilter.value = \"attention\";\n        renderClientList();\n      });\n\n      companyInput.addEventListener(\"input\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        updateClient(client.id, { company: companyInput.value });\n        currentClientTitle.textContent = companyInput.value.trim() || \"Untitled Client\";\n        renderClientList();\n      });\n\n      companyInput.addEventListener(\"blur\", function () {\n        if (companyInput.value.trim()) return;\n\n        companyInput.value = \"Untitled Client\";\n        var client = getActiveClient();\n        if (!client) return;\n\n        updateClient(client.id, { company: \"Untitled Client\" });\n        render();\n      });\n\n      contactInput.addEventListener(\"input\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        updateClient(client.id, { contact: contactInput.value });\n        renderClientList();\n      });\n\n      emailInput.addEventListener(\"input\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        updateClient(client.id, { email: emailInput.value });\n        emailClientBtn.disabled = !emailInput.value.trim();\n        renderClientList();\n      });\n\n      emailClientBtn.addEventListener(\"click\", function () {\n        var client = getActiveClient();\n        if (!client || !client.email.trim()) return;\n        window.location.href = \"mailto:\" + encodeURIComponent(client.email.trim());\n      });\n\n      clientNotes.addEventListener(\"input\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        updateClient(client.id, { notes: clientNotes.value });\n      });\n\n      healthScale.addEventListener(\"click\", function (event) {\n        var button = event.target.closest(\".cb-health-btn\");\n        if (!button) return;\n\n        var client = getActiveClient();\n        var nextHealth = button.getAttribute(\"data-health\");\n\n        if (!client || !HEALTH_OPTIONS[nextHealth]) return;\n\n        updateClient(client.id, {\n          health: nextHealth,\n          healthUpdatedAt: new Date().toISOString()\n        });\n        render();\n      });\n\n      healthReason.addEventListener(\"input\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        updateClient(client.id, {\n          healthReason: healthReason.value,\n          healthUpdatedAt: client.healthUpdatedAt || new Date().toISOString()\n        });\n      });\n\n      healthReason.addEventListener(\"blur\", function () {\n        renderClientList();\n        renderHealth(getActiveClient());\n      });\n\n      markContactedBtn.addEventListener(\"click\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        updateClient(client.id, { lastContactedAt: new Date().toISOString() });\n        render();\n      });\n\n      clearContactedBtn.addEventListener(\"click\", function () {\n        var client = getActiveClient();\n        if (!client || !client.lastContactedAt) return;\n\n        if (!window.confirm(\"Clear the last-contacted date for this client?\")) return;\n\n        updateClient(client.id, { lastContactedAt: null });\n        render();\n      });\n\n      driveUrl.addEventListener(\"input\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        updateClient(client.id, { driveUrl: driveUrl.value });\n        renderDrive(getActiveClient());\n      });\n\n      driveUrl.addEventListener(\"blur\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        var normalized = safeUrl(driveUrl.value);\n        if (driveUrl.value.trim() && !normalized) {\n          window.alert(\"Please paste a valid Google Drive or web folder link.\");\n          return;\n        }\n\n        if (normalized && normalized !== driveUrl.value) {\n          driveUrl.value = normalized;\n          updateClient(client.id, { driveUrl: normalized });\n        }\n\n        renderDrive(getActiveClient());\n        renderClientList();\n      });\n\n      openDriveBtn.addEventListener(\"click\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        var url = safeUrl(client.driveUrl);\n        if (!url) return;\n\n        window.open(url, \"_blank\", \"noopener,noreferrer\");\n      });\n\n      clearDriveBtn.addEventListener(\"click\", function () {\n        var client = getActiveClient();\n        if (!client || !client.driveUrl) return;\n\n        updateClient(client.id, { driveUrl: \"\" });\n        renderDrive(getActiveClient());\n        renderClientList();\n      });\n\n\n      callTitle.addEventListener(\"input\", validateCallForm);\n      callDate.addEventListener(\"change\", validateCallForm);\n\n      callForm.addEventListener(\"submit\", function (event) {\n        event.preventDefault();\n\n        var client = getActiveClient();\n        var title = callTitle.value.trim();\n        var scheduledAt = callDate.value;\n        var status = callStatus.value === \"completed\" ? \"completed\" : \"upcoming\";\n\n        if (!client || !title || !scheduledAt) return;\n\n        var newCall = normalizeCall({\n          id: makeId(\"call\"),\n          title: title,\n          scheduledAt: scheduledAt,\n          status: status,\n          notes: callNotes.value.trim(),\n          createdAt: new Date().toISOString(),\n          completedAt: status === \"completed\" ? new Date().toISOString() : null\n        });\n\n        var changes = {\n          calls: [newCall].concat(client.calls)\n        };\n\n        if (status === \"completed\") {\n          changes.lastContactedAt = latestContactDate(client.lastContactedAt, scheduledAt);\n        }\n\n        updateClient(client.id, changes);\n\n        callTitle.value = \"\";\n        callDate.value = \"\";\n        callStatus.value = \"upcoming\";\n        callNotes.value = \"\";\n\n        validateCallForm();\n        render();\n      });\n\n      clearCallHistoryBtn.addEventListener(\"click\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        var completedCalls = client.calls.filter(function (call) {\n          return call.status === \"completed\";\n        });\n\n        if (!completedCalls.length) return;\n\n        if (!window.confirm(\"Delete all completed call history for this client?\")) {\n          return;\n        }\n\n        var nextCalls = client.calls.filter(function (call) {\n          return call.status !== \"completed\";\n        });\n\n        updateClient(client.id, { calls: nextCalls });\n        render();\n      });\n\n      taskTitle.addEventListener(\"input\", validateTaskForm);\n\n      taskForm.addEventListener(\"submit\", function (event) {\n        event.preventDefault();\n\n        var client = getActiveClient();\n        var title = taskTitle.value.trim();\n\n        if (!client || !title) return;\n\n        var nextTasks = client.tasks.slice();\n\n        nextTasks.unshift(normalizeTask({\n          id: makeId(\"task\"),\n          title: title,\n          notes: taskNotes.value.trim(),\n          dueDate: taskDueDate.value,\n          completed: false,\n          createdAt: new Date().toISOString(),\n          completedAt: null\n        }));\n\n        updateClient(client.id, { tasks: nextTasks });\n\n        taskTitle.value = \"\";\n        taskNotes.value = \"\";\n        taskDueDate.value = \"\";\n        validateTaskForm();\n        render();\n      });\n\n      deleteClientBtn.addEventListener(\"click\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        if (!window.confirm('Delete \"' + (client.company || \"this client\") + '\" and all of its saved history?')) {\n          return;\n        }\n\n        clients = clients.filter(function (item) {\n          return item.id !== client.id;\n        });\n\n        activeClientId = clients.length ? clients[0].id : null;\n        saveClients();\n        render();\n      });\n\n      clearCompletedBtn.addEventListener(\"click\", function () {\n        var client = getActiveClient();\n        if (!client) return;\n\n        var completedTasks = client.tasks.filter(function (task) {\n          return task.completed;\n        });\n\n        if (!completedTasks.length) return;\n\n        if (!window.confirm(\"Delete all completed work history for this client?\")) {\n          return;\n        }\n\n        var nextTasks = client.tasks.filter(function (task) {\n          return !task.completed;\n        });\n\n        updateClient(client.id, { tasks: nextTasks });\n        render();\n      });\n\n      themeBtn.addEventListener(\"click\", function () {\n        var current = root.getAttribute(\"data-theme\") || \"light\";\n        applyTheme(current === \"dark\" ? \"light\" : \"dark\");\n      });\n\n      exportBtn.addEventListener(\"click\", function () {\n        var backup = {\n          app: \"Client Success CRM\",\n          version: 3,\n          exportedAt: new Date().toISOString(),\n          clients: clients,\n          theme: root.getAttribute(\"data-theme\") || \"light\"\n        };\n\n        var blob = new Blob([JSON.stringify(backup, null, 2)], {\n          type: \"application\/json\"\n        });\n\n        var url = URL.createObjectURL(blob);\n        var link = document.createElement(\"a\");\n        var date = new Date().toISOString().slice(0, 10);\n\n        link.href = url;\n        link.download = \"client-success-crm-backup-\" + date + \".json\";\n        document.body.appendChild(link);\n        link.click();\n        link.remove();\n        URL.revokeObjectURL(url);\n      });\n\n      importBtn.addEventListener(\"click\", function () {\n        importInput.click();\n      });\n\n      importInput.addEventListener(\"change\", function () {\n        var file = importInput.files && importInput.files[0];\n        if (!file) return;\n\n        var reader = new FileReader();\n\n        reader.onload = function (event) {\n          try {\n            var backup = JSON.parse(event.target.result);\n\n            if (!backup || !Array.isArray(backup.clients)) {\n              window.alert(\"That does not look like a valid Client Success CRM backup.\");\n              return;\n            }\n\n            if (!window.confirm(\"Upload this backup and replace the data saved in this browser?\")) {\n              return;\n            }\n\n            clients = backup.clients.map(normalizeClient);\n            activeClientId = clients.length ? clients[0].id : null;\n            saveClients();\n\n            if (backup.theme === \"dark\" || backup.theme === \"light\") {\n              applyTheme(backup.theme);\n            }\n\n            searchInput.value = \"\";\n            clientFilter.value = \"all\";\n            render();\n            window.alert(\"Client Success CRM data uploaded successfully.\");\n          } catch (error) {\n            window.alert(\"That file could not be uploaded.\");\n          } finally {\n            importInput.value = \"\";\n          }\n        };\n\n        reader.readAsText(file);\n      });\n\n      applyTheme(loadTheme());\n      validateClientForm();\n      validateTaskForm();\n      validateCallForm();\n      render();\n    })();\n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u2713 Customer Success CRM Client Success CRM See every client\u2019s health, last contact, work in progress, and completed history. 0 Clients 0 Need Attention 0 Open Tasks 0 Completed Work Dark mode Save data Upload data Add New Client Company name Contact name Contact email + Add Client All clientsNeeds attentionNo contact in 14+ daysNo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clientsuccesscrm.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clientsuccesscrm.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clientsuccesscrm.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clientsuccesscrm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clientsuccesscrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":3,"href":"https:\/\/clientsuccesscrm.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/clientsuccesscrm.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/clientsuccesscrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}