/* EVO TrustGuard — css/page-sales-pipeline.css Page-scoped styles for the ADMIN-ONLY Sales Pipeline (C103). M8.1: the page is PERMANENTLY DARK — data-theme="dark" is pinned statically on (no toggle on admin surfaces), so every [data-theme="dark"] rule below is always active. The page now renders inside the shared admin dark-glass shell (.ash-* in /css/page-admin.css, loaded before this file); the portal bottom-nav + theme toggle were removed from the markup. Token-driven: surfaces / borders / text / red all use the shared design tokens (var(--bg)/--surface/--surface-elevated/--border/--text/--text-muted/ --red) so dark-mode parity comes for free from the [data-theme] swap in shared-themes.css (launch is dark-only per LOCKED C99-A; this is light-ready). Convention compliance (css/AGENTS.md): - ALL buttons are RECTANGULAR — var(--radius-md) (8px). No pill buttons. The full-screen Call console's Call button (.sp-console-call) is a rectangular red action button, NOT a circular FAB (the C103 call-FAB was removed in this sprint). - Status pills use the platform 6px rounded-rect (.sp-pill), matching .client-status-pill / .status-pill — NOT a full 100px pill. - The only 50% radius is NOT a button: the small 28px decorative activity-log icon-circle (.sp-le-icon), analogous to .activity-dot / .buyer-dot in css/page-purchased-lead.css. No button uses a pill/circular radius. - 44px min touch targets on interactive controls. Six-state status vocabulary (status indicators — hardcoded hues, same pattern as the client payment pills): new / contacted / engaged / signed_up / not_interested / archived. */ /* Status hues (status indicators, not buttons). */ :root { --sp-new: #3b82f6; --sp-contacted: #f59e0b; --sp-engaged: #14b8a6; --sp-signed-up: #10b981; --sp-not: #9a9a9a; --sp-archived: #6f6f6f; /* M8.2a temperature hues (right-edge bar): warm orange / cold blue — aliases of the existing page hues so the palette stays closed. */ --sp-warm: #f59e0b; --sp-cold: #3b82f6; } /* ── Access gate ── */ .sp-gate { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--text-base); } /* ── App container — sits inside the M8.1 admin shell grid; the 96px bottom-nav reserve was dropped with the bottom nav itself. ── */ .sp-app { max-width: 760px; margin: 0 auto; width: 100%; padding: var(--space-5) var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom)); } /* ── Header ── */ .sp-header { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); } .sp-header-titles { flex: 1 1 auto; min-width: 180px; } .sp-title { font-family: 'DM Serif Display', serif; font-size: var(--text-3xl); color: var(--text); margin: 0; } .sp-subtitle { font-size: var(--text-md); color: var(--text-muted); margin: var(--space-1) 0 0; } .sp-header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* M8.3 — "Start call session" (the dialer entry, now the header's primary action). Full-width on narrow screens so the block-starting action is the dominant thumb target above the filter bar. */ @media (max-width: 560px) { #spCallBtn { flex: 1 1 100%; } } /* ── Buttons (rectangular, 8px) ── */ .sp-btn { font: inherit; font-size: var(--text-md); font-weight: var(--weight-medium, 500); border-radius: var(--btn-radius); padding: 0 var(--space-4); min-height: 44px; cursor: pointer; background: var(--btn-secondary-bg); border: var(--btn-secondary-border); box-shadow: var(--btn-secondary-shadow); color: var(--btn-secondary-text); transition: filter 0.15s ease, transform 0.18s var(--ease-spring); white-space: nowrap; } .sp-btn:hover { filter: brightness(1.06); } .sp-btn:active { transform: scale(var(--press-scale)); } .sp-btn-primary { background: var(--btn-primary-bg); border: var(--btn-primary-border); box-shadow: var(--btn-primary-shadow); color: var(--btn-primary-text); border-radius: var(--btn-radius); } .sp-btn-primary:hover { filter: brightness(1.06); } /* Destructive action (long-press delete confirm). Contained tinted-red per the Glass button system (C97-A) — semantically the irreversible action. */ .sp-btn-danger { background: var(--btn-destructive-bg); border: var(--btn-destructive-border); color: var(--btn-destructive-text); border-radius: var(--btn-radius); } .sp-btn-danger:hover { filter: brightness(1.1); } .sp-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } /* ── Needs you today ── */ .sp-today { background: var(--surface); border: 1px solid var(--red); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4-5); margin-bottom: var(--space-5); } .sp-today-head { display: flex; align-items: center; gap: var(--space-2-5); font-size: var(--text-base); font-weight: var(--weight-semibold, 600); color: var(--text); margin-bottom: var(--space-1); } .sp-today-count { background: var(--red); color: var(--white); font-size: var(--text-sm); font-weight: 700; border-radius: var(--radius-sm); padding: 1px var(--space-2); } .sp-today-desc { font-size: var(--text-md); color: var(--text-muted); margin-bottom: var(--space-3); } .sp-today-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; } .sp-chip { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-height: 44px; font-size: var(--text-md); cursor: pointer; display: flex; align-items: center; gap: var(--space-2-5); transition: border-color 0.15s; color: var(--text); } .sp-chip:hover { border-color: var(--red); } .sp-chip-co { font-weight: var(--weight-semibold, 600); } .sp-chip-due { font-size: var(--text-xs); font-weight: 700; color: var(--red); } .sp-chip-due.is-over { color: var(--white); background: var(--red); padding: 1px var(--space-1-5); border-radius: var(--radius-sm); } /* ── Status filter ── The scrollable pill/tab bar (.sp-tabs / .sp-tab) was REMOVED in C103 — it collided with the document-level swipe-back gesture. The filter is now the shared C97-B 's intrinsic min-width (~20ch, strictly enforced by iOS Safari). Without it the children refuse to shrink, two side-by-side inputs overflow the sheet → horizontal scroll → the edit-sheet slide (M8.4.1 BUG 1). width:100% on the input below cannot rescue it because the flex PARENT won't shrink. iOS-visible / Chromium-invisible — same footgun as .list-search-input (list-header.css). Belt-and-braces: min-width:0 on the inputs too. */ .sp-field-row .sp-field { flex: 1; min-width: 0; } .sp-field input, .sp-field select, .sp-field textarea { font: inherit; font-size: var(--text-input); background: var(--surface-elevated); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2-5) var(--space-3); min-height: 44px; width: 100%; min-width: 0; } .sp-field textarea { resize: vertical; } .sp-field input:focus, .sp-field select:focus, .sp-field textarea:focus { outline: none; border-color: var(--red); } .sp-help { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-3); line-height: 1.5; } .sp-help code, .sp-help b { color: var(--text); } .sp-import-textarea { width: 100%; font-family: var(--font-mono, 'Courier New', monospace); font-size: var(--text-md); background: var(--surface-elevated); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2-5); resize: vertical; } .sp-import-textarea:focus { outline: none; border-color: var(--red); } .sp-import-summary { margin-top: var(--space-3); font-size: var(--text-md); color: var(--text); background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); } /* ── Long-press delete confirm (centered modal, rectangular, token-driven) ── Distinct from the bottom-sheets — this is a small centered dialog. z-index 420 sits above the call console (400) so a confirm raised over an open console (edge case) is still reachable; in practice long-press fires from a card with nothing else open. Token-driven → dark-mode parity is free. */ .sp-confirm-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 420; } .sp-confirm-scrim.is-open { opacity: 1; pointer-events: auto; } .sp-confirm { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -48%); width: min(360px, calc(100% - 2 * var(--space-5))); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); z-index: 421; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .sp-confirm.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); } .sp-confirm-title { font-family: 'DM Serif Display', serif; font-size: var(--text-xl); color: var(--text); margin: 0 0 var(--space-2); } .sp-confirm-text { font-size: var(--text-md); color: var(--text-muted); margin: 0 0 var(--space-4-5); line-height: 1.5; } .sp-confirm-btns { display: flex; flex-direction: column; gap: var(--space-2); } .sp-confirm-btns .sp-btn { width: 100%; justify-content: center; } @media (max-width: 560px) { .sp-app { padding-left: var(--space-3-5); padding-right: var(--space-3-5); } .sp-field-row { flex-direction: column; gap: 0; } } /* ════════════════════════════════════════════════════════════════════════ TrustGuard Glass — per-page application (C103, DARK-ONLY per LOCKED C99-A) ════════════════════════════════════════════════════════════════════════ Additive elevation/glass pass following the Phase-3G pattern (3G.2 overlay / 3G.3 Tier-1 raise / 3G.4 Tier-2 wells). CSS-only, no markup change. These dark-keyed rules sit at the END of the file so they win the cascade over the token-driven base rules above by source order at equal-or-higher specificity (mirrors the 3G.3.b / 3G.4 additive precedent). Light mode is left 100% untouched (reworked by Glass Phase 4). Every value resolves from the 3G.1 tokens (/css/tokens.css + /shared-themes.css) — no new hexes, no token redefinition. MEANING-COLORS PRESERVED: status left-borders + pills, the red "Needs you today" treatment, and all red action accents are untouched or re-pinned. Safe-area-inset padding (sticky headers + note bar + sheet foot) is in the base rules above and is NOT edited here, so the insets hold. Surface → tier map: TIER 1 raised → .sp-card (status .s-* left-border re-pinned) · .sp-today band · .sp-chip TIER 3 glass → .sp-drawer + .sp-d-head · .sp-console + .sp-console-head + .sp-console-notebar · .sp-sheet (×4) · .sp-confirm TIER 2 recessed → .sp-field input/textarea (add/edit-lead inputs + settings textareas) · .sp-console-note · .sp-addnote textarea · .sp-import-textarea UNTOUCHED → #spFilter .list-filter-select (already Glass via /css/_lib/dropdown.css) · native is EXCLUDED (C97-B owns the glass select component) — the drawer status + Stage/Channel selects keep their flat dark surface. ── */ [data-theme="dark"] .sp-field input, [data-theme="dark"] .sp-field textarea, [data-theme="dark"] .sp-addnote textarea, [data-theme="dark"] .sp-console-note, [data-theme="dark"] .sp-import-textarea { background: var(--tier2-bg); border: 1px solid var(--hairline); box-shadow: var(--tier2-inset); color: var(--text); } /* Re-assert the red :focus accent (meaning) over the Tier-2 well border — the base :focus rules are equal-specificity + earlier in this file, so they would otherwise lose to the wells above. ── */ [data-theme="dark"] .sp-field input:focus, [data-theme="dark"] .sp-field textarea:focus, [data-theme="dark"] .sp-addnote textarea:focus, [data-theme="dark"] .sp-console-note:focus, [data-theme="dark"] .sp-import-textarea:focus { border-color: var(--red); } /* ── M8.2a — re-pin the temperature right-border (meaning color) over the dark Glass card recipe. The Tier-1 raise + its hover rule flip border-right-color to --hairline; these LAST-in-source rules win back the warm/cold hue at equal-or-higher specificity, exactly like the status left-border re-pins above. ── */ [data-theme="dark"] .sp-card.t-warm { border-right-color: var(--sp-warm); } [data-theme="dark"] .sp-card.t-cold { border-right-color: var(--sp-cold); } @media (hover: hover) { [data-theme="dark"] .sp-card.t-warm:hover { border-right-color: var(--sp-warm); } [data-theme="dark"] .sp-card.t-cold:hover { border-right-color: var(--sp-cold); } }