/* ============================================================================ Client Brain → Overview tab — isolated stylesheet ---------------------------------------------------------------------------- Loaded via at the very end of in base.html, AFTER editorial-final.css. Owns the .cmov-* class namespace so source-order ties always favour these rules over the editorial overlay catch-alls. Sections: 1. Pulse-dot status indicator (shared component) 2. KPI hero — Health / Results / Trial Fee / LTV / Time / Last Contact 3. Editable cell affordance (dashed underline + reveal-on-hover pencil) 4. Status pill + team cells + services chips 5. Edit modal overhaul — left-rail tabs, section groups, dirty counter 6. Responsive breakpoints ========================================================================== */ /* ── 1. Pulse-dot status indicator ─────────────────────────────────────── */ /* Used inline next to "Connected" / "Disconnected" on the Plugin row, the live/staging site badge, and anywhere else a real-time presence signal needs to read at a glance. */ html body .cmov-status { display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } html body .cmov-status-dot { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: #22c55e; flex-shrink: 0; } html body .cmov-status-dot::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: inherit; opacity: 0.55; animation: cmov-pulse 1.6s ease-out infinite; pointer-events: none; } @keyframes cmov-pulse { 0% { transform: scale(0.7); opacity: 0.55; } 100% { transform: scale(2.6); opacity: 0; } } /* Variants */ html body .cmov-status-dot.is-off { background: #e06060; } html body .cmov-status-dot.is-warn { background: #f59e0b; } html body .cmov-status-dot.is-idle { background: var(--ink-faint, #8a8882); } html body .cmov-status-dot.is-idle::after { animation: none; opacity: 0; } html body .cmov-status.is-on { color: #128a3a; } html body .cmov-status.is-off { color: #b03434; } html body .cmov-status.is-warn { color: #a76a06; } html body .cmov-status.is-idle { color: var(--ink-faint, #8a8882); } html body .cmov-status-sub { font-family: inherit; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--ink-faint, #8a8882); margin-left: 4px; } /* ── 2a. Page shell — 2-column layout (main + sidebar) ────────────────── */ /* Sidebar holds the KPI stack + weekly scores + orders. Main column gets the merged header, info grid, and services so the content the user actually edits has visual priority. */ html body .cmov-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; margin-bottom: 14px; } html body .cmov-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; } html body .cmov-rail { min-width: 0; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; } html body .cmov-rail-section { background: var(--cm-surface, #fbfaf6); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 10px; overflow: hidden; } html body .cmov-rail-head { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint, #8a8882); padding: 11px 14px 8px; display: flex; align-items: center; justify-content: space-between; } /* ── 2b. Merged header strip (replaces brief row + team strip) ────────── */ html body .cmov-header-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--cm-surface, #fbfaf6); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 10px; } html body .cmov-header-strip > .cmov-status-pill { flex-shrink: 0; } html body .cmov-header-bit { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--cm-text, #0a0a0a); min-width: 0; } html body .cmov-header-bit i { color: var(--ink-faint, #8a8882); font-size: 0.78rem; flex-shrink: 0; } html body .cmov-header-bit-label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint, #8a8882); margin-right: 4px; } html body .cmov-header-bit-value { font-weight: 500; color: var(--ink-strong, #0a0a0a); } html body .cmov-header-bit-value.is-empty { color: var(--ink-faint, #8a8882); font-style: italic; font-weight: 400; } html body .cmov-header-sep { width: 1px; height: 18px; background: var(--cm-border, #d9d4c4); } /* ── 2c. Sidebar KPI mini-cards (vertical stack, single-column) ───────── */ html body .cmov-kpi-stack { display: flex; flex-direction: column; } html body button.cmov-kpi-row, html body .cmov-kpi-row { position: relative; display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; background: transparent; border: none; border-top: 1px solid var(--cm-border, #d9d4c4); font: inherit; text-align: left; cursor: default; width: 100%; transition: background .12s; min-width: 0; } html body .cmov-kpi-stack > :first-child { border-top: none; } html body button.cmov-kpi-row { cursor: pointer; } html body button.cmov-kpi-row:hover { background: var(--accent-ghost, #fbf6c4); } html body .cmov-kpi-row-stripe { width: 4px; height: 28px; border-radius: 4px; background: var(--ink-faint, #8a8882); } html body .cmov-kpi-row.is-success .cmov-kpi-row-stripe { background: #22c55e; } html body .cmov-kpi-row.is-warning .cmov-kpi-row-stripe { background: #f59e0b; } html body .cmov-kpi-row.is-danger .cmov-kpi-row-stripe { background: #e06060; } html body .cmov-kpi-row.is-info .cmov-kpi-row-stripe { background: #3b82f6; } html body .cmov-kpi-row.is-accent .cmov-kpi-row-stripe { background: var(--accent, #f4e14a); } html body .cmov-kpi-row-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } html body .cmov-kpi-row-label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint, #8a8882); display: flex; align-items: center; gap: 5px; } html body .cmov-kpi-row-value { font-family: "Newsreader", ui-serif, Georgia, serif; font-size: 1.05rem; font-weight: 500; line-height: 1.1; color: var(--ink-strong, #0a0a0a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body .cmov-kpi-row.is-success .cmov-kpi-row-value { color: #128a3a; } html body .cmov-kpi-row.is-warning .cmov-kpi-row-value { color: #a76a06; } html body .cmov-kpi-row.is-danger .cmov-kpi-row-value { color: #b03434; } html body .cmov-kpi-row.is-unset .cmov-kpi-row-value { color: var(--ink-faint, #8a8882); font-style: italic; } html body .cmov-kpi-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; color: var(--ink-faint, #8a8882); letter-spacing: 0.04em; white-space: nowrap; } html body .cmov-kpi-row .cmov-kpi-meter { display: inline-flex; gap: 2px; } html body .cmov-kpi-row .cmov-kpi-meter-dot { width: 10px; height: 3px; background: var(--cm-border, #d9d4c4); border-radius: 2px; } html body .cmov-kpi-row.is-success .cmov-kpi-meter-dot.is-on { background: #22c55e; } html body .cmov-kpi-row.is-warning .cmov-kpi-meter-dot.is-on { background: #f59e0b; } html body .cmov-kpi-row.is-danger .cmov-kpi-meter-dot.is-on { background: #e06060; } html body .cmov-kpi-row.is-info .cmov-kpi-meter-dot.is-on { background: #3b82f6; } /* Sidebar weekly-scores micro strip (re-uses .cm-ws-chip from base CSS). We force tighter padding inside the rail. */ html body .cmov-rail-section .cm-ws-strip { padding: 4px 12px 12px; gap: 6px; } /* Sidebar orders mini-rows */ html body .cmov-orders { padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 4px; } html body .cmov-orders-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 4px 0; font-size: 0.78rem; color: var(--cm-text, #0a0a0a); } html body .cmov-orders-row + .cmov-orders-row { border-top: 1px dashed var(--cm-border, #d9d4c4); } html body .cmov-orders-row i { color: var(--ink-faint, #8a8882); margin-right: 5px; } html body .cmov-orders-row .cmov-orders-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; color: var(--ink-muted, #5d5d5a); } html body .cmov-orders-row .cmov-orders-total { font-family: "Newsreader", ui-serif, Georgia, serif; font-size: 0.92rem; font-weight: 500; color: var(--ink-strong, #0a0a0a); } html body .cmov-orders-row.is-combined { padding-top: 8px; } html body .cmov-orders-row.is-combined .cmov-orders-total { color: var(--accent, #f4e14a); } /* ── 2d. Legacy full-width KPI hero (kept for back-compat — unused) ───── */ html body .cmov-kpi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } html body button.cmov-kpi-card, html body .cmov-kpi-card { position: relative; padding: 14px 16px 13px 18px; background: var(--cm-surface, #fbfaf6); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 8px; font: inherit; text-align: left; cursor: default; transition: border-color .15s, transform .12s, box-shadow .15s; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-width: 0; } html body button.cmov-kpi-card { cursor: pointer; } html body button.cmov-kpi-card:hover { border-color: var(--ink-strong, #0a0a0a); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); } /* Left status stripe */ html body .cmov-kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ink-faint, #8a8882); border-radius: 4px 0 0 4px; } html body .cmov-kpi-card.is-success::before { background: #22c55e; } html body .cmov-kpi-card.is-warning::before { background: #f59e0b; } html body .cmov-kpi-card.is-danger::before { background: #e06060; } html body .cmov-kpi-card.is-info::before { background: #3b82f6; } html body .cmov-kpi-card.is-accent::before { background: var(--accent, #f4e14a); } html body .cmov-kpi-label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint, #8a8882); display: flex; align-items: center; gap: 6px; } html body .cmov-kpi-trend { display: inline-flex; align-items: center; font-size: 10px; padding: 1px 6px; border-radius: 999px; font-weight: 700; letter-spacing: 0.04em; } html body .cmov-kpi-trend.is-up { background: #dcfce7; color: #166534; } html body .cmov-kpi-trend.is-down { background: #fee2e2; color: #991b1b; } html body .cmov-kpi-trend.is-flat { background: var(--cm-surface2, #f4f1e8); color: var(--ink-muted, #5d5d5a); } html body .cmov-kpi-value { font-family: "Newsreader", ui-serif, Georgia, serif; font-weight: 500; font-size: 1.5rem; line-height: 1.05; color: var(--ink-strong, #0a0a0a); letter-spacing: -0.005em; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body .cmov-kpi-card.is-success .cmov-kpi-value { color: #128a3a; } html body .cmov-kpi-card.is-warning .cmov-kpi-value { color: #a76a06; } html body .cmov-kpi-card.is-danger .cmov-kpi-value { color: #b03434; } html body .cmov-kpi-sub { font-size: 0.7rem; color: var(--ink-muted, #5d5d5a); display: flex; align-items: center; gap: 6px; } /* 4-dot meter under Health / Results values */ html body .cmov-kpi-meter { display: inline-flex; gap: 3px; margin-top: 2px; } html body .cmov-kpi-meter-dot { width: 12px; height: 4px; background: var(--cm-border, #d9d4c4); border-radius: 2px; } html body .cmov-kpi-card.is-success .cmov-kpi-meter-dot.is-on { background: #22c55e; } html body .cmov-kpi-card.is-warning .cmov-kpi-meter-dot.is-on { background: #f59e0b; } html body .cmov-kpi-card.is-danger .cmov-kpi-meter-dot.is-on { background: #e06060; } html body .cmov-kpi-card.is-info .cmov-kpi-meter-dot.is-on { background: #3b82f6; } /* When unset (0/4) — softer rendering */ html body .cmov-kpi-card.is-unset .cmov-kpi-value { color: var(--ink-faint, #8a8882); font-style: italic; } /* ── 3. Editable cell affordance ───────────────────────────────────────── */ /* Replaces the inline `style=` mess on the client info grid. The grid itself stays a 6-col 1px-gutter chip grid; cells get a clear hover and dashed-underline editable affordance. */ html body .cmov-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--cm-border, #d9d4c4); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 10px; overflow: hidden; } html body .cmov-cell { background: var(--cm-surface, #fbfaf6); padding: 11px 14px; min-width: 0; transition: background .12s; display: flex; flex-direction: column; gap: 2px; } html body .cmov-cell.is-editable { cursor: pointer; } html body .cmov-cell.is-editable:hover { background: var(--accent-ghost, #fbf6c4); } html body .cmov-cell-label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint, #8a8882); display: flex; align-items: center; gap: 4px; } html body .cmov-cell-pencil { font-size: 9px; opacity: 0; transition: opacity .15s; color: var(--ink-muted, #5d5d5a); } html body .cmov-cell.is-editable:hover .cmov-cell-pencil { opacity: 0.7; } html body .cmov-cell-value { font-size: 0.82rem; color: var(--cm-text, #0a0a0a); min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; } html body .cmov-cell.is-editable .cmov-cell-value { border-bottom: 1px dashed var(--cm-border, #d9d4c4); padding-bottom: 1px; } html body .cmov-cell.is-editable:hover .cmov-cell-value { border-bottom-color: var(--ink-strong, #0a0a0a); border-bottom-style: dashed; } html body .cmov-cell-value.is-empty { color: var(--ink-faint, #8a8882); font-style: italic; } /* Link cells — readable on paper background. Default ink-strong with a yellow underline so the editorial palette stays high-contrast; only shifts to accent yellow on direct hover of the value, not the row. */ html body .cmov-cell-value.is-link { color: var(--ink-strong, #0a0a0a); word-break: break-all; white-space: normal; border-bottom: 1px solid var(--accent, #f4e14a); padding-bottom: 1px; text-decoration: none; } html body a.cmov-cell-value.is-link:hover { background: var(--accent, #f4e14a); color: var(--accent-ink, #0a0a0a); border-bottom-color: var(--accent, #f4e14a); } html body .cmov-cell.is-editable .cmov-cell-value.is-link { border-bottom: 1px dashed var(--cm-border, #d9d4c4); } html body .cmov-cell.is-editable:hover .cmov-cell-value.is-link { border-bottom-color: var(--ink-strong, #0a0a0a); } /* Plugin cell — same shape but content is the status badge, not text. */ html body .cmov-cell.is-plugin { cursor: default; } html body .cmov-cell.is-plugin:hover { background: var(--cm-surface, #fbfaf6); } /* ── 4. Status pill / team cells / services chips ─────────────────────── */ /* Status pill — Trial / MRR / Paused / Churned — bigger color blocks. */ html body .cmov-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 4px; border: 1px solid; background: #fff; line-height: 1; } html body .cmov-status-pill.is-trial { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } html body .cmov-status-pill.is-mrr, html body .cmov-status-pill.is-ongoing, html body .cmov-status-pill.is-ascended, html body .cmov-status-pill.is-month-1, html body .cmov-status-pill.is-month-2, html body .cmov-status-pill.is-month-3 { background: #ecfdf5; color: #047857; border-color: #a7f3d0; } html body .cmov-status-pill.is-paused { background: #fffbeb; color: #b45309; border-color: #fde68a; } html body .cmov-status-pill.is-churned, html body .cmov-status-pill.is-failed-trial { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } /* Brief row (status + location + industry + tier). */ html body .cmov-brief { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: var(--cm-surface, #fbfaf6); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 8px; margin-bottom: 14px; } html body .cmov-brief-bit { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--cm-text, #0a0a0a); } html body .cmov-brief-bit i { color: var(--ink-faint, #8a8882); font-size: 0.78rem; } html body .cmov-brief-sep { width: 1px; height: 16px; background: var(--cm-border, #d9d4c4); } /* Team strip — Account Manager + Local SEO Specialist as labelled cells. */ html body .cmov-team { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cm-border, #d9d4c4); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 8px; overflow: hidden; margin-bottom: 14px; } html body .cmov-team-cell { background: var(--cm-surface, #fbfaf6); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } html body .cmov-team-label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint, #8a8882); } html body .cmov-team-name { font-family: "Newsreader", ui-serif, Georgia, serif; font-size: 1.02rem; color: var(--ink-strong, #0a0a0a); font-weight: 500; } html body .cmov-team-name.is-empty { color: var(--ink-faint, #8a8882); font-style: italic; font-size: 0.86rem; } /* Services chips — slightly softer / more padding so they breathe. */ html body .cmov-services { padding: 14px 16px; background: var(--cm-surface, #fbfaf6); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 8px; margin-bottom: 14px; } html body .cmov-services-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } html body .cmov-services-title { font-family: "Newsreader", ui-serif, Georgia, serif; font-size: 1.05rem; font-weight: 500; color: var(--ink-strong, #0a0a0a); margin: 0; } html body .cmov-services-count { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--ink-faint, #8a8882); } html body .cmov-services-chips { display: flex; flex-wrap: wrap; gap: 6px; } html body .cmov-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; background: #fff; border: 1px solid var(--cm-border, #d9d4c4); border-radius: 999px; font-size: 0.74rem; color: var(--cm-text, #0a0a0a); line-height: 1.2; transition: border-color .12s, background .12s; } html body .cmov-chip:hover { border-color: var(--ink-strong, #0a0a0a); background: var(--accent-ghost, #fbf6c4); } html body .cmov-chip-x { cursor: pointer; opacity: 0.45; transition: opacity .12s, color .12s; font-size: 0.7rem; margin-left: 2px; } html body .cmov-chip:hover .cmov-chip-x { opacity: 1; color: var(--status-danger, #e06060); } html body .cmov-services-add { display: flex; gap: 6px; margin-top: 10px; } html body .cmov-services-add input { flex: 1; min-width: 0; padding: 7px 11px; border: 1px solid var(--cm-border, #d9d4c4); background: #fff; color: var(--cm-text, #0a0a0a); border-radius: 6px; font-size: 0.78rem; outline: none; } html body .cmov-services-add input:focus { border-color: var(--accent, #f4e14a); box-shadow: 0 0 0 3px rgba(244,225,74,0.22); } html body .cmov-services-add button { padding: 7px 14px; background: var(--ink-strong, #0a0a0a); color: #fff; border: 1px solid var(--ink-strong, #0a0a0a); border-radius: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } html body .cmov-services-add button:hover { background: var(--accent, #f4e14a); color: var(--accent-ink, #0a0a0a); border-color: var(--accent, #f4e14a); } /* ── 5. Edit modal overhaul ───────────────────────────────────────────── The old modal stacked five tabs across the top and crammed all fields into a thin scroll column. New layout: left vertical rail (macOS Settings style), section groups inside each pane, sticky save footer with a dirty-count Save button. */ html body .cm-edit-modal.cmov-modal { max-width: 780px; width: 92vw; /* FIX: don't grow/shrink by content. Lock the modal at a stable height so switching tabs (Basics/Billing/Team/Lifecycle/Site — different field counts) doesn't make the whole dialog snap to a new size mid-edit. */ height: 640px; max-height: 88vh; min-height: 540px; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; padding: 0; background: var(--cm-surface, #fbfaf6); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 12px; overflow: hidden; } html body .cm-edit-modal.cmov-modal .cm-edit-modal__head { padding: 16px 22px; border-bottom: 1px solid var(--cm-border, #d9d4c4); display: flex; justify-content: space-between; align-items: flex-start; } html body .cm-edit-modal.cmov-modal .cm-edit-modal__title { font-family: "Newsreader", ui-serif, Georgia, serif; font-size: 1.3rem; font-weight: 500; margin: 0; color: var(--ink-strong, #0a0a0a); } html body .cm-edit-modal.cmov-modal .cm-edit-modal__sub { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint, #8a8882); margin-top: 4px; } /* Body becomes 2-col grid: rail + pane */ html body .cm-edit-modal.cmov-modal .cmov-modal-body { display: grid; grid-template-columns: 180px 1fr; min-height: 0; overflow: hidden; } html body .cm-edit-modal.cmov-modal .cmov-modal-rail { background: var(--cm-surface2, #f4f1e8); border-right: 1px solid var(--cm-border, #d9d4c4); padding: 14px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } html body .cm-edit-modal.cmov-modal button.cmov-modal-tab { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; background: transparent; border: 1px solid transparent; border-radius: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted, #5d5d5a); cursor: pointer; text-align: left; transition: background .12s, color .12s; } html body .cm-edit-modal.cmov-modal button.cmov-modal-tab:hover { background: #fff; color: var(--ink-strong, #0a0a0a); } html body .cm-edit-modal.cmov-modal button.cmov-modal-tab.is-active { background: var(--ink-strong, #0a0a0a); color: #fff; } html body .cm-edit-modal.cmov-modal button.cmov-modal-tab i { font-size: 13px; opacity: 0.7; } html body .cm-edit-modal.cmov-modal button.cmov-modal-tab.is-active i { opacity: 1; } html body .cm-edit-modal.cmov-modal .cmov-modal-pane { padding: 20px 24px; overflow-y: auto; min-height: 0; } html body .cm-edit-modal.cmov-modal .cmov-modal-section + .cmov-modal-section { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--cm-border, #d9d4c4); } html body .cm-edit-modal.cmov-modal .cmov-modal-section-title { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint, #8a8882); margin: 0 0 12px; display: flex; align-items: center; gap: 6px; } html body .cm-edit-modal.cmov-modal .cmov-modal-section-title::before { content: ""; display: inline-block; width: 16px; height: 1px; background: var(--ink-faint, #8a8882); } /* Sticky footer with the dirty-count save button */ html body .cm-edit-modal.cmov-modal .cm-edit-modal__foot { padding: 14px 22px; border-top: 1px solid var(--cm-border, #d9d4c4); background: var(--cm-surface, #fbfaf6); display: flex; align-items: center; justify-content: space-between; gap: 12px; } html body .cm-edit-modal.cmov-modal .cmov-modal-dirty { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-muted, #5d5d5a); } html body .cm-edit-modal.cmov-modal .cmov-modal-dirty.is-dirty { color: #b45309; } html body .cm-edit-modal.cmov-modal button.cm-modal-btn--confirm { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 18px; background: var(--accent, #f4e14a); color: var(--accent-ink, #0a0a0a); border: 1px solid var(--accent, #f4e14a); border-radius: 6px; cursor: pointer; } html body .cm-edit-modal.cmov-modal button.cm-modal-btn--confirm:hover { background: var(--accent-hover, #e4cc00); } html body .cm-edit-modal.cmov-modal button.cm-modal-btn--cancel { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 16px; background: transparent; color: var(--ink-muted, #5d5d5a); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 6px; cursor: pointer; } /* ── 6. Responsive ─────────────────────────────────────────────────────── */ @media (max-width: 1100px) { html body .cmov-shell { grid-template-columns: minmax(0, 1fr) 280px; } html body .cmov-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } html body .cmov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { /* Stack the rail UNDER the main column so the form takes the full width. */ html body .cmov-shell { grid-template-columns: 1fr; } html body .cmov-rail { position: static; } } @media (max-width: 720px) { html body .cmov-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html body .cmov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body .cmov-team { grid-template-columns: 1fr; } html body .cmov-brief { gap: 10px; padding: 12px 14px; } html body .cmov-brief-sep { display: none; } html body .cmov-header-strip { gap: 8px; padding: 10px 12px; } html body .cmov-header-sep { display: none; } html body .cmov-kpi-value { font-size: 1.3rem; } html body .cm-edit-modal.cmov-modal .cmov-modal-body { grid-template-columns: 1fr; } html body .cm-edit-modal.cmov-modal .cmov-modal-rail { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--cm-border, #d9d4c4); padding: 8px; } html body .cm-edit-modal.cmov-modal button.cmov-modal-tab { flex-shrink: 0; width: auto; } } @media (max-width: 480px) { html body .cmov-kpi { grid-template-columns: 1fr; } html body .cmov-grid { grid-template-columns: 1fr; } html body .cmov-services-chips { gap: 4px; } html body .cm-edit-modal.cmov-modal { width: 100vw; max-height: 100vh; border-radius: 0; } } /* Touch — always show the pencil affordance since :hover never fires. */ @media (hover: none) { html body .cmov-cell.is-editable .cmov-cell-pencil { opacity: 0.5; } html body .cmov-cell.is-editable .cmov-cell-value { border-bottom-color: var(--ink-muted, #5d5d5a); } } /* ── 7. Inline-edit popup (cmInlineEdit input) ────────────────────────── Replaces the inline yellow style that was getting clobbered in editorial mode. White paper-cream input with accent-yellow focus ring, inherits font-size from the cell value so it doesn't jump on edit. */ html body .cmov-cell .cmov-edit-input, html body input.cmov-edit-input { width: 100%; padding: 4px 8px; background: #fff; color: var(--cm-text, #0a0a0a); border: 1px solid var(--ink-strong, #0a0a0a); border-radius: 4px; font-size: 0.82rem; font-family: inherit; line-height: 1.3; outline: none; box-shadow: 0 0 0 3px rgba(244, 225, 74, 0.35); transition: box-shadow .15s, border-color .15s; } html body input.cmov-edit-input:focus { border-color: var(--accent, #f4e14a); box-shadow: 0 0 0 3px rgba(244, 225, 74, 0.55); } /* Cell-level highlight while editing — replaces the inline JS bg mutation that lost to the editorial overlay's catch-alls. */ html body .cmov-cell.is-cmov-editing { background: var(--accent-ghost, #fbf6c4); outline: 1px solid var(--accent, #f4e14a); outline-offset: -1px; } /* ── 8. Edit modal grid fix ───────────────────────────────────────────── Legacy .cm-edit-modal__body sets `display: grid; grid-template-columns: 1fr 1fr; min-height: 420px` on the form. The min-height clashes with my .cmov-modal grid (1fr middle row), forcing the modal to scroll awkwardly. Drop the min-height; keep the 2-col field grid since it's what the form's field count was tuned for. */ html body .cm-edit-modal.cmov-modal #cmEditForm.cmov-modal-pane { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; } @media (max-width: 640px) { html body .cm-edit-modal.cmov-modal #cmEditForm.cmov-modal-pane { grid-template-columns: 1fr; } } /* Field input styling inside the modal — match the cmov-edit-input ring. */ html body .cm-edit-modal.cmov-modal .cm-edit-field input, html body .cm-edit-modal.cmov-modal .cm-edit-field select, html body .cm-edit-modal.cmov-modal .cm-edit-field textarea { background: #fff; color: var(--cm-text, #0a0a0a); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 6px; padding: 8px 11px; font-size: 0.85rem; font-family: inherit; height: auto; min-height: 36px; box-sizing: border-box; outline: none; transition: border-color .15s, box-shadow .15s; } html body .cm-edit-modal.cmov-modal .cm-edit-field input:focus, html body .cm-edit-modal.cmov-modal .cm-edit-field select:focus, html body .cm-edit-modal.cmov-modal .cm-edit-field textarea:focus { border-color: var(--accent, #f4e14a); box-shadow: 0 0 0 3px rgba(244, 225, 74, 0.35); } html body .cm-edit-modal.cmov-modal .cm-edit-field__label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint, #8a8882); margin-bottom: 4px; } html body .cm-edit-modal.cmov-modal .cm-edit-field__hint { font-size: 0.7rem; color: var(--ink-faint, #8a8882); margin-top: 3px; line-height: 1.35; } /* ── 9. Weekly Score popup (gold-standard variant of cmov-modal) ──────── */ /* Re-uses .cm-edit-modal.cmov-modal but skips the left rail (no panes here, just 3 rows: Health, Results, Notes). Slightly shorter and narrower than the Edit Client modal. */ html body .cm-edit-modal.cmov-modal.cmov-ws-modal { max-width: 620px; height: auto; min-height: 0; max-height: 88vh; grid-template-rows: auto auto auto; } html body .cmov-ws-body { padding: 22px 24px 4px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; } html body .cmov-ws-row { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; } html body .cmov-ws-row.cmov-ws-row-notes { align-items: start; } html body .cmov-ws-row-label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint, #8a8882); } html body .cmov-ws-pills { display: flex; flex-wrap: wrap; gap: 5px; } html body button.cmov-ws-pill { padding: 6px 11px; background: #fff; border: 1px solid var(--cm-border, #d9d4c4); border-radius: 999px; font-family: inherit; font-size: 0.74rem; color: var(--ink-muted, #5d5d5a); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } html body button.cmov-ws-pill:hover { border-color: var(--ink-strong, #0a0a0a); color: var(--ink-strong, #0a0a0a); } html body button.cmov-ws-pill.active { background: var(--ink-strong, #0a0a0a); border-color: var(--ink-strong, #0a0a0a); color: #fff; } /* Color the active pill by score position so high-end pills feel positive without a separate per-button class. data-val 1=red, 2=amber, 3+=green. */ html body button.cmov-ws-pill[data-val="1"].active { background: #e06060; border-color: #e06060; } html body button.cmov-ws-pill[data-val="2"].active { background: #f59e0b; border-color: #f59e0b; } html body button.cmov-ws-pill[data-val="3"].active, html body button.cmov-ws-pill[data-val="4"].active { background: #22c55e; border-color: #22c55e; } html body button.cmov-ws-pill[data-val="0"].active { background: var(--ink-muted, #5d5d5a); border-color: var(--ink-muted, #5d5d5a); } html body textarea.cmov-ws-notes { width: 100%; padding: 10px 12px; background: #fff; color: var(--cm-text, #0a0a0a); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 6px; font-family: inherit; font-size: 0.84rem; line-height: 1.45; resize: vertical; min-height: 72px; max-height: 200px; outline: none; transition: border-color .15s, box-shadow .15s; } html body textarea.cmov-ws-notes:focus { border-color: var(--accent, #f4e14a); box-shadow: 0 0 0 3px rgba(244, 225, 74, 0.35); } /* Header-strip AM/SEO bits become clickable buttons that open the Edit modal Team pane. Always-visible dashed border + pencil so the editability is obvious without a hover (Ben caught this — couldn't tell it was clickable at all). */ html body button.cmov-header-bit { background: var(--cm-surface2, #f4f1e8); border: 1px dashed var(--cm-border, #d9d4c4); padding: 4px 9px 4px 8px; border-radius: 6px; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, color .12s; } html body button.cmov-header-bit::after { content: "\F4CB"; /* bi-pencil */ font-family: "bootstrap-icons", sans-serif; font-size: 9px; opacity: 0.5; margin-left: 2px; color: var(--ink-muted, #5d5d5a); } html body button.cmov-header-bit:hover { border-color: var(--ink-strong, #0a0a0a); border-style: solid; background: var(--accent-ghost, #fbf6c4); color: var(--ink-strong, #0a0a0a); } html body button.cmov-header-bit:hover::after { opacity: 1; color: var(--ink-strong, #0a0a0a); } /* ── 10. LTV comparison popover (anchored under the LTV KPI row) ──────── */ html body .cmov-popover { position: fixed; z-index: 9999; background: var(--cm-surface, #fbfaf6); border: 1px solid var(--ink-strong, #0a0a0a); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,0.15); padding: 14px 16px; min-width: 240px; max-width: 340px; font-family: inherit; } html body .cmov-popover[hidden] { display: none; } html body .cmov-popover-head { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint, #8a8882); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } html body .cmov-popover-close { background: transparent; border: none; color: var(--ink-muted, #5d5d5a); cursor: pointer; padding: 2px 6px; font-size: 13px; line-height: 1; } html body .cmov-popover-value { font-family: "Newsreader", ui-serif, Georgia, serif; font-size: 1.4rem; line-height: 1.1; color: var(--ink-strong, #0a0a0a); margin-bottom: 4px; } html body .cmov-popover-meta { font-size: 0.78rem; color: var(--ink-muted, #5d5d5a); line-height: 1.4; } html body .cmov-popover-meta strong { font-weight: 600; color: var(--ink-strong, #0a0a0a); } html body .cmov-popover-delta { margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; border-radius: 4px; } html body .cmov-popover-delta.is-above { background: #dcfce7; color: #166534; } html body .cmov-popover-delta.is-below { background: #fef2f2; color: #b91c1c; } html body .cmov-popover-delta.is-equal { background: var(--cm-surface2, #f4f1e8); color: var(--ink-muted, #5d5d5a); } html body .cmov-popover-bar { margin-top: 10px; height: 6px; background: var(--cm-border, #d9d4c4); border-radius: 3px; position: relative; overflow: hidden; } html body .cmov-popover-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--accent, #f4e14a); border-radius: 3px; } html body .cmov-popover-bar-avg { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink-strong, #0a0a0a); } /* ── 11. Notes log card (main column) ─────────────────────────────────── */ html body .cmov-notes-card { background: var(--cm-surface, #fbfaf6); border: 1px solid var(--cm-border, #d9d4c4); border-radius: 8px; overflow: hidden; } html body .cmov-notes-head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px 10px; gap: 12px; border-bottom: 1px solid var(--cm-border, #d9d4c4); } html body .cmov-notes-title { font-family: "Newsreader", ui-serif, Georgia, serif; font-size: 1.05rem; font-weight: 500; color: var(--ink-strong, #0a0a0a); margin: 0; } html body .cmov-notes-count { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--ink-faint, #8a8882); } html body .cmov-notes-list { max-height: 320px; overflow-y: auto; } html body .cmov-notes-item { padding: 11px 16px; border-bottom: 1px dashed var(--cm-border, #d9d4c4); } html body .cmov-notes-item:last-child { border-bottom: none; } html body .cmov-notes-item-meta { display: flex; align-items: center; gap: 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint, #8a8882); margin-bottom: 4px; } html body .cmov-notes-item-week { color: var(--ink-strong, #0a0a0a); } html body .cmov-notes-item-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-faint, #8a8882); } html body .cmov-notes-item-dot.is-success { background: #22c55e; } html body .cmov-notes-item-dot.is-warning { background: #f59e0b; } html body .cmov-notes-item-dot.is-danger { background: #e06060; } html body .cmov-notes-item-dot.is-info { background: #3b82f6; } html body .cmov-notes-item-body { font-size: 0.82rem; line-height: 1.5; color: var(--cm-text, #0a0a0a); white-space: pre-wrap; word-wrap: break-word; } html body .cmov-notes-empty { padding: 24px 16px; text-align: center; font-size: 0.78rem; color: var(--ink-faint, #8a8882); font-style: italic; }