/* * Lead Engine — front-end styles. * --------------------------------------------------------------------------- * * SCOPING * Every selector below is anchored to #lead-engine or .le-portal. There is not * one bare element selector and not one `!important` in this file, so the * plugin cannot reach into the theme and the theme cannot out-specify the * plugin. An id root (0,1,0,0) beats essentially every theme class rule, which * is what lets the whole sheet stay `!important`-free. * * .le-portal is the runtime host the modal, prompt and toast are moved into. * Elementor sections frequently carry a transform, which captures * position:fixed children; moving those three to avoids it. The host is * a second root so every component style still resolves there. * * NAMING * #le- exists exactly once in the DOM -> styled by id * .le- rendered more than once -> styled by class * .le-__ a part of a repeated component * .le---a variant of a repeated component * .le-is- a state flag toggled from JavaScript * * "Repeated" means repeated on screen, not repeated in the source. A row that * appears once in lead-engine.js but renders 500 times in a loop is a class. * * COLOUR FROM DATA * Stage and rep colours used to be produced in JavaScript and written into * style="". They are fixed enumerations, so they now live here and are * selected with [data-le-stage] and [data-le-rep]. The only custom property * JavaScript still sets is --le-progress, which is a measured value rather * than a styling decision. * * @package LeadEngine */ /* ========================================================================== 1. Tokens ========================================================================== */ #lead-engine, .le-portal { /* --- surfaces --------------------------------------------------- */ --le-canvas: #f6f7fb; --le-surface: #ffffff; --le-surface-2: #fbfcfe; --le-surface-3: #f1f3f9; --le-line: #e4e7f0; --le-line-strong: #d3d8e6; /* --- brand ------------------------------------------------------ Primary is iLocal blue; accent is the signal orange. The -d step is used for hover on filled controls, -wash for tinted backgrounds and -line for borders on those tints. */ --le-primary: #0039a6; --le-primary-d: #002b7f; --le-primary-l: #1a56c8; --le-primary-wash: #e7edf8; --le-primary-line: #b4c6e6; --le-accent: #ff652d; --le-accent-d: #e04e17; --le-accent-wash: #ffede5; --le-accent-line: #ffc9b2; /* --- text ------------------------------------------------------- */ --le-text: #1a1d2e; --le-text-2: #4a5069; --le-muted: #6e7690; --le-faint: #99a1b7; --le-on-dark: #ffffff; /* --- status ----------------------------------------------------- */ --le-success: #15a05c; --le-success-d: #0f8049; --le-success-wash: #e4f6ec; --le-warn: #c2760a; --le-warn-wash: #fdf1dc; --le-danger: #dc2626; --le-danger-d: #b91c1c; --le-danger-wash: #fdeaea; --le-info-wash: #e7edf8; /* --- rep palette: 8 rotating slots, keyed by [data-le-rep] ------ */ --le-rep-0: #0e9f6e; --le-rep-1: #3b82f6; --le-rep-2: #8b5cf6; --le-rep-3: #ea580c; --le-rep-4: #ca8a04; --le-rep-5: #0d9488; --le-rep-6: #db2777; --le-rep-7: #0369a1; --le-rep-none: #94a3b8; /* --- type ------------------------------------------------------- */ --le-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* --- spacing ---------------------------------------------------- */ --le-s-1: 4px; --le-s-2: 8px; --le-s-3: 12px; --le-s-4: 16px; --le-s-5: 20px; --le-s-6: 24px; --le-s-7: 32px; --le-s-8: 40px; /* --- shape + elevation ------------------------------------------ */ --le-r-sm: 6px; --le-r-md: 8px; --le-r-lg: 12px; --le-r-xl: 16px; --le-r-pill: 999px; --le-shadow-sm: 0 1px 2px rgba(26, 29, 46, 0.06); --le-shadow-md: 0 2px 8px rgba(26, 29, 46, 0.07), 0 1px 2px rgba(26, 29, 46, 0.05); --le-shadow-lg: 0 16px 40px rgba(20, 24, 48, 0.16); --le-ring: 0 0 0 3px rgba(0, 57, 166, 0.25); /* --- layout ------------------------------------------------------ --le-pad is the shared left/right inset. Every full-bleed band (brand bar, list bar, banners, content well) uses it so their contents line up on a single vertical edge. --le-shell-h fixes the app height so the tab bar can sit at the bottom of a flex column instead of scrolling away. */ --le-pad: 20px; --le-shell-h: clamp(560px, 82vh, 900px); /* --- controls --------------------------------------------------- */ --le-tap: 44px; --le-tap-sm: 36px; --le-dur: 0.14s; } /* ========================================================================== 2. Root + reset ========================================================================== */ #le-main { padding: 20px !important; } #lead-engine { display: flex; flex-direction: column; height: var(--le-shell-h); max-height: var(--le-shell-h); background: var(--le-canvas); color: var(--le-text); font-family: var(--le-font); font-size: 14px; line-height: 1.5; position: relative; isolation: isolate; border: 1px solid var(--le-line); border-radius: var(--le-r-lg); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } /* Portal host: carries the tokens, contributes no layout or paint. */ .le-portal { position: static; height: 0; background: none; border-radius: 0; overflow: visible; isolation: auto; font-family: var(--le-font); color: var(--le-text); font-size: 14px; line-height: 1.5; } #lead-engine *, #lead-engine *::before, #lead-engine *::after, .le-portal *, .le-portal *::before, .le-portal *::after { box-sizing: border-box; } #lead-engine p, #lead-engine div, #lead-engine span, #lead-engine label, #lead-engine small, #lead-engine h2, .le-portal p, .le-portal div, .le-portal span, .le-portal label, .le-portal small, .le-portal h2 { margin: 0; padding: 0; font-family: inherit; letter-spacing: normal; text-transform: none; } #lead-engine button, .le-portal button { margin: 0; font-family: inherit; font-size: inherit; line-height: 1.2; letter-spacing: normal; text-transform: none; text-decoration: none; text-shadow: none; box-shadow: none; width: auto; min-height: 0; -webkit-appearance: none; appearance: none; } #lead-engine a, .le-portal a { text-decoration: none; } #lead-engine table, .le-portal table { border-collapse: collapse; width: 100%; margin: 0; } /* --- form controls -------------------------------------------------- */ #lead-engine input, #lead-engine textarea, #lead-engine select, .le-portal input, .le-portal textarea, .le-portal select { width: 100%; max-width: 100%; min-height: var(--le-tap); padding: 9px 12px; border: 1px solid var(--le-line-strong); border-radius: var(--le-r-md); background: var(--le-surface); color: var(--le-text); font-family: inherit; font-size: 15px; line-height: 1.4; margin: 0; height: auto; box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color var(--le-dur) ease, box-shadow var(--le-dur) ease; } #lead-engine textarea, .le-portal textarea { min-height: 84px; resize: vertical; } #lead-engine select, .le-portal select { padding-right: 34px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236E7690' d='M6 8.2 1.8 4h8.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px; cursor: pointer; } #lead-engine input:hover, #lead-engine textarea:hover, #lead-engine select:hover, .le-portal input:hover, .le-portal textarea:hover, .le-portal select:hover { border-color: var(--le-faint); } #lead-engine input:focus, #lead-engine textarea:focus, #lead-engine select:focus, .le-portal input:focus, .le-portal textarea:focus, .le-portal select:focus { outline: none; border-color: var(--le-primary); box-shadow: var(--le-ring); } #lead-engine input::placeholder, #lead-engine textarea::placeholder, .le-portal input::placeholder, .le-portal textarea::placeholder { color: var(--le-faint); opacity: 1; } #lead-engine input[type="checkbox"], .le-portal input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--le-primary); cursor: pointer; flex: 0 0 auto; } #lead-engine input[type="file"], .le-portal input[type="file"] { padding: 9px 12px; background: var(--le-surface-2); cursor: pointer; } /* Visible keyboard focus on everything interactive. */ #lead-engine :focus-visible, .le-portal :focus-visible { outline: 2px solid var(--le-primary); outline-offset: 2px; } #lead-engine ::selection, .le-portal ::selection { background: var(--le-primary-wash); color: var(--le-text); } /* ========================================================================== 3. Utilities ========================================================================== */ .le-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Throwaway nodes the download / clipboard fallbacks append to . */ .le-offscreen { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; } /* State flags live at the end of this file, in section 21, so they always win over component rules regardless of source order. */ #lead-engine .le-center, .le-portal .le-center { text-align: center; } #lead-engine .le-mono, .le-portal .le-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } #lead-engine .le-mt-8, .le-portal .le-mt-8 { margin-top: var(--le-s-2); } #lead-engine .le-mt-10, .le-portal .le-mt-10 { margin-top: var(--le-s-3); } #lead-engine .le-mt-12, .le-portal .le-mt-12 { margin-top: var(--le-s-3); } #lead-engine .le-mt-14, .le-portal .le-mt-14 { margin-top: var(--le-s-4); } #lead-engine .le-mt-22, .le-portal .le-mt-22 { margin-top: var(--le-s-6); } /* Icons are always their own flex item, so `gap` — never a literal space — controls the distance to the label. */ #lead-engine .le-icon, .le-portal .le-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.05em; font-style: normal; flex: 0 0 auto; } /* ========================================================================== 4. Colour resolved from data attributes ========================================================================== */ #lead-engine [data-le-rep="0"], .le-portal [data-le-rep="0"] { --le-rep: var(--le-rep-0); } #lead-engine [data-le-rep="1"], .le-portal [data-le-rep="1"] { --le-rep: var(--le-rep-1); } #lead-engine [data-le-rep="2"], .le-portal [data-le-rep="2"] { --le-rep: var(--le-rep-2); } #lead-engine [data-le-rep="3"], .le-portal [data-le-rep="3"] { --le-rep: var(--le-rep-3); } #lead-engine [data-le-rep="4"], .le-portal [data-le-rep="4"] { --le-rep: var(--le-rep-4); } #lead-engine [data-le-rep="5"], .le-portal [data-le-rep="5"] { --le-rep: var(--le-rep-5); } #lead-engine [data-le-rep="6"], .le-portal [data-le-rep="6"] { --le-rep: var(--le-rep-6); } #lead-engine [data-le-rep="7"], .le-portal [data-le-rep="7"] { --le-rep: var(--le-rep-7); } #lead-engine [data-le-rep="all"], .le-portal [data-le-rep="all"] { --le-rep: var(--le-primary); } #lead-engine [data-le-rep="none"], .le-portal [data-le-rep="none"] { --le-rep: var(--le-rep-none); } #lead-engine [data-le-stage], .le-portal [data-le-stage] { --le-stage-bg: var(--le-surface-3); --le-stage-fg: var(--le-text-2); } #lead-engine [data-le-stage="Callback"], .le-portal [data-le-stage="Callback"] { --le-stage-bg: var(--le-warn-wash); --le-stage-fg: var(--le-warn); } #lead-engine [data-le-stage="Contacted"], .le-portal [data-le-stage="Contacted"] { --le-stage-bg: var(--le-info-wash); --le-stage-fg: var(--le-primary-d); } #lead-engine [data-le-stage="Interested"], .le-portal [data-le-stage="Interested"] { --le-stage-bg: var(--le-success-wash); --le-stage-fg: var(--le-success-d); } #lead-engine [data-le-stage="Won"], .le-portal [data-le-stage="Won"] { --le-stage-bg: var(--le-success); --le-stage-fg: var(--le-on-dark); } #lead-engine [data-le-stage="Lost"], .le-portal [data-le-stage="Lost"] { --le-stage-bg: var(--le-danger-wash); --le-stage-fg: var(--le-danger-d); } #lead-engine [data-le-stage="DNC"], .le-portal [data-le-stage="DNC"] { --le-stage-bg: var(--le-danger); --le-stage-fg: var(--le-on-dark); } /* ========================================================================== 5. Shell ========================================================================== */ #le-brandbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: var(--le-s-2); padding: var(--le-s-3) var(--le-pad); background: var(--le-surface); border-bottom: 1px solid var(--le-line); } #le-hdr-actions { display: flex; align-items: center; justify-content: center; gap: var(--le-s-2); } #le-hdr-actions .le-btn { min-width: 124px; } /* --- active list switcher ------------------------------------------- */ #le-listbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--le-s-3); width: 100%; min-height: var(--le-tap); padding: 10px var(--le-pad); background: var(--le-surface); border: none; border-bottom: 1px solid var(--le-line); color: var(--le-text); text-align: left; cursor: pointer; transition: background var(--le-dur) ease; } #le-listbar:hover { background: var(--le-surface-3); } #le-listbar-name { font-weight: 650; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #le-listbar-cta { display: inline-flex; align-items: center; gap: var(--le-s-1); flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--le-primary); white-space: nowrap; } /* --- status banners --------------------------------------------------- */ #le-sync, #le-mode { flex: 0 0 auto; padding: 9px var(--le-pad); font-size: 12.5px; font-weight: 500; border-bottom: 1px solid var(--le-line); } #le-sync { background: var(--le-info-wash); color: var(--le-primary-d); } #le-sync.le-is-error, #le-mode.le-is-error { background: var(--le-danger-wash); color: var(--le-danger-d); } #le-mode { background: var(--le-warn-wash); color: var(--le-warn); } #le-mode b { font-weight: 700; } /* --- content well ------------------------------------------------------ */ #le-wrap { flex: 1 1 auto; width: 100%; max-width: 780px; margin: 0 auto; padding: var(--le-s-4) var(--le-pad) var(--le-s-6); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--le-line-strong) transparent; } /* --- boot -------------------------------------------------------------- */ #le-boot { padding: var(--le-s-8) var(--le-s-4); text-align: center; } #le-boot-bar { --le-progress: 8%; max-width: 280px; height: 6px; margin: 0 auto var(--le-s-3); border-radius: var(--le-r-pill); background: var(--le-surface-3); overflow: hidden; } #le-boot-bar::before { content: ""; display: block; height: 100%; width: var(--le-progress); border-radius: inherit; background: var(--le-primary); transition: width 0.25s ease; } #le-boot-txt { font-size: 13px; color: var(--le-muted); } /* --- views --------------------------------------------------------------- The eight sections swapped by the tab bar. Hidden ones carry .le-is-hidden; the explicit [hidden] rule is here because a theme's own reset can otherwise out-specify the browser default and leave #le-main visible during boot. */ #lead-engine .le-view, .le-portal .le-view { display: block; } #lead-engine [hidden], .le-portal [hidden] { display: none; } /* ========================================================================== 6. Tab bar ========================================================================== */ #le-tabbar { flex: 0 0 auto; z-index: 5; display: flex; background: var(--le-surface); border-top: 1px solid var(--le-line); box-shadow: 0 -2px 10px rgba(26, 29, 46, 0.05); padding-bottom: env(safe-area-inset-bottom, 0px); overflow-x: auto; scrollbar-width: none; } #le-tabbar::-webkit-scrollbar { display: none; } #lead-engine .le-tab { flex: 1 0 auto; min-width: 62px; min-height: var(--le-tap); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 4px; background: none; border: none; color: var(--le-muted); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: color var(--le-dur) ease; } #lead-engine .le-tab .le-icon { width: 32px; height: 22px; border-radius: var(--le-r-sm); font-size: 16px; transition: background var(--le-dur) ease; } #lead-engine .le-tab__label { white-space: nowrap; } #lead-engine .le-tab:hover { color: var(--le-text-2); } #lead-engine .le-tab.le-is-active { color: var(--le-primary); } #lead-engine .le-tab.le-is-active .le-icon { background: var(--le-primary-wash); } /* ========================================================================== 7. Buttons -------------------------------------------------------------------------- One base, one set of variants, one set of sizes. Previously the sheet had .le-exp, .le-exp-green, .le-exp-purple, .le-rst, .le-newbtn, .le-morebtn, .le-linkbtn and .le-go* as unrelated components — .le-exp and .le-exp-green were byte-identical, so "Download CSV" and "Copy CSV" rendered the same and the primary/secondary hierarchy was lost. Cancel buttons carried .le-rst ("reset", styled destructive red) patched back to neutral with .le-muted. All of that collapses into .le-btn here. Every button is a flex row: icon span, label span, `gap` between them. That is the fix for the uneven header buttons — Home wrapped its emoji in a span and got the 6px gap, Pipeline used a bare emoji plus a literal space, which is a single anonymous text run that `gap` cannot touch. ========================================================================== */ #lead-engine .le-btn, .le-portal .le-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--le-s-2); min-height: var(--le-tap); padding: 10px var(--le-s-4); border: 1px solid transparent; border-radius: var(--le-r-md); background: var(--le-surface); color: var(--le-text); font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background var(--le-dur) ease, border-color var(--le-dur) ease, color var(--le-dur) ease, box-shadow var(--le-dur) ease, transform var(--le-dur) ease; } #lead-engine .le-btn__label, .le-portal .le-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #lead-engine .le-btn:active, .le-portal .le-btn:active { transform: translateY(1px); } #lead-engine .le-btn:disabled, .le-portal .le-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* --- variants --------------------------------------------------------- */ #lead-engine .le-btn--primary, .le-portal .le-btn--primary { background: var(--le-primary); border-color: var(--le-primary); color: var(--le-on-dark); box-shadow: var(--le-shadow-sm); } #lead-engine .le-btn--primary:hover:not(:disabled), .le-portal .le-btn--primary:hover:not(:disabled) { background: var(--le-primary-d); border-color: var(--le-primary-d); } #lead-engine .le-btn--outline, .le-portal .le-btn--outline { background: var(--le-surface); border-color: var(--le-line-strong); color: var(--le-text-2); } #lead-engine .le-btn--outline:hover:not(:disabled), .le-portal .le-btn--outline:hover:not(:disabled) { background: var(--le-surface-3); border-color: var(--le-faint); color: var(--le-text); } #lead-engine .le-btn--ghost, .le-portal .le-btn--ghost { background: transparent; border-color: transparent; color: var(--le-muted); } #lead-engine .le-btn--ghost:hover:not(:disabled), .le-portal .le-btn--ghost:hover:not(:disabled) { background: var(--le-surface-3); color: var(--le-text); } #lead-engine .le-btn--success, .le-portal .le-btn--success { background: var(--le-success); border-color: var(--le-success); color: var(--le-on-dark); box-shadow: var(--le-shadow-sm); } #lead-engine .le-btn--success:hover:not(:disabled), .le-portal .le-btn--success:hover:not(:disabled) { background: var(--le-success-d); border-color: var(--le-success-d); } #lead-engine .le-btn--accent, .le-portal .le-btn--accent { background: var(--le-accent); border-color: var(--le-accent); color: var(--le-on-dark); box-shadow: var(--le-shadow-sm); } #lead-engine .le-btn--accent:hover:not(:disabled), .le-portal .le-btn--accent:hover:not(:disabled) { background: var(--le-accent-d); border-color: var(--le-accent-d); } /* Destructive: outlined by default so it never competes with the primary action, filled only on hover once intent is clear. */ #lead-engine .le-btn--danger, .le-portal .le-btn--danger { background: var(--le-surface); border-color: var(--le-line-strong); color: var(--le-danger); } #lead-engine .le-btn--danger:hover:not(:disabled), .le-portal .le-btn--danger:hover:not(:disabled) { background: var(--le-danger-wash); border-color: var(--le-danger); color: var(--le-danger-d); } #lead-engine .le-btn--dashed, .le-portal .le-btn--dashed { background: var(--le-surface); border: 1px dashed var(--le-primary-line); color: var(--le-primary); } #lead-engine .le-btn--dashed:hover:not(:disabled), .le-portal .le-btn--dashed:hover:not(:disabled) { background: var(--le-primary-wash); border-color: var(--le-primary); } /* Link-style, but still a full-size target. The old .le-linkbtn was 12px text with 4px padding — a ~20px tap target, three of them in a row. */ #lead-engine .le-btn--link, .le-portal .le-btn--link { min-height: var(--le-tap-sm); padding: var(--le-s-2) var(--le-s-3); background: none; border-color: transparent; color: var(--le-primary); font-size: 12.5px; font-weight: 600; white-space: normal; } #lead-engine .le-btn--link:hover:not(:disabled), .le-portal .le-btn--link:hover:not(:disabled) { background: var(--le-primary-wash); color: var(--le-primary-d); } /* On the brand bar, which sits on a white surface in this palette. */ #lead-engine .le-btn--onbrand { background: var(--le-surface); border-color: var(--le-line-strong); color: var(--le-text-2); } #lead-engine .le-btn--onbrand:hover:not(:disabled) { background: var(--le-surface-3); color: var(--le-text); } #lead-engine .le-btn--onbrand-solid { background: var(--le-primary); border-color: var(--le-primary); color: var(--le-on-dark); box-shadow: var(--le-shadow-sm); } #lead-engine .le-btn--onbrand-solid:hover:not(:disabled) { background: var(--le-primary-d); border-color: var(--le-primary-d); } /* --- sizes ------------------------------------------------------------- */ #lead-engine .le-btn--sm, .le-portal .le-btn--sm { min-height: var(--le-tap-sm); padding: 7px var(--le-s-3); font-size: 12.5px; gap: var(--le-s-1); } #lead-engine .le-btn--block, .le-portal .le-btn--block { display: flex; width: 100%; } /* ========================================================================== 8. Button rows -------------------------------------------------------------------------- The old .le-exportbar used `flex: 1; min-width: 110px` with wrapping, so at roughly 330–360px three buttons broke 2-up and the third stretched to full width on its own line. A two-column grid that collapses to one column keeps every row even at every width. ========================================================================== */ #lead-engine .le-btnrow, .le-portal .le-btnrow { display: grid; grid-template-columns: 1fr; gap: var(--le-s-2); margin-top: var(--le-s-4); } #lead-engine .le-btnrow .le-btn, .le-portal .le-btnrow .le-btn { width: 100%; } #le-linkrow { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--le-s-1); margin-top: var(--le-s-3); } /* ========================================================================== 9. Typography + shared content blocks ========================================================================== */ #lead-engine .le-title, .le-portal .le-title { font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--le-text); margin: 0 0 var(--le-s-3); } #lead-engine .le-note, .le-portal .le-note { padding: var(--le-s-3) var(--le-s-4); margin-bottom: var(--le-s-4); border: 1px solid var(--le-line); border-left: 3px solid var(--le-primary-line); border-radius: var(--le-r-md); background: var(--le-surface); color: var(--le-text-2); font-size: 13px; line-height: 1.55; } #lead-engine .le-note--solid, .le-portal .le-note--solid { background: var(--le-primary-wash); border-color: var(--le-primary-line); } #lead-engine .le-hint, .le-portal .le-hint { margin-top: var(--le-s-3); color: var(--le-muted); font-size: 12.5px; line-height: 1.55; } #lead-engine .le-empty, .le-portal .le-empty { padding: var(--le-s-7) var(--le-s-4); margin: var(--le-s-2) 0; border: 1px dashed var(--le-line-strong); border-radius: var(--le-r-lg); background: var(--le-surface); color: var(--le-muted); font-size: 13px; text-align: center; } #lead-engine .le-sechead, .le-portal .le-sechead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--le-s-2); margin: var(--le-s-4) 0 6px; } #lead-engine .le-sechead__title, .le-portal .le-sechead__title { display: inline-flex; align-items: center; gap: var(--le-s-2); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--le-text-2); } #lead-engine .le-sechead__hint, .le-portal .le-sechead__hint { font-size: 12px; color: var(--le-faint); } #lead-engine .le-counts, .le-portal .le-counts { display: flex; align-items: center; justify-content: space-between; gap: var(--le-s-3); margin-bottom: var(--le-s-2); font-size: 12.5px; color: var(--le-muted); } #lead-engine .le-counts b, .le-portal .le-counts b { color: var(--le-text); font-weight: 700; font-variant-numeric: tabular-nums; } #lead-engine .le-meta, .le-portal .le-meta { min-width: 0; flex: 1 1 auto; } #lead-engine .le-amount, .le-portal .le-amount { font-weight: 700; color: var(--le-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } #lead-engine .le-amount--right, .le-portal .le-amount--right { text-align: right; } #lead-engine .le-amount--won, .le-portal .le-amount--won { color: var(--le-success); } #lead-engine .le-mailto, .le-portal .le-mailto { margin: var(--le-s-2) 0; font-size: 13px; color: var(--le-text-2); } /* ========================================================================== 10. Badges, tags, swatches ========================================================================== */ #lead-engine .le-badge, .le-portal .le-badge { display: inline-flex; align-items: center; gap: var(--le-s-1); padding: 3px 9px; margin: 0 3px; border-radius: var(--le-r-pill); font-size: 11.5px; font-weight: 650; line-height: 1.5; white-space: nowrap; background: var(--le-surface-3); color: var(--le-text-2); } #lead-engine .le-badge--type, .le-portal .le-badge--type { background: var(--le-primary-wash); color: var(--le-primary-d); } #lead-engine .le-badge--rep, .le-portal .le-badge--rep { background: var(--le-surface-3); color: var(--le-text-2); } #lead-engine .le-badge--stage, .le-portal .le-badge--stage { background: var(--le-stage-bg); color: var(--le-stage-fg); } #lead-engine .le-badge--live, .le-portal .le-badge--live { background: var(--le-success-wash); color: var(--le-success-d); } /* Tags used to carry `padding: 5px 20px` from the pasted override block, which made every pill 40px wider than its text and collided them inside .le-meta. */ #lead-engine .le-tag, .le-portal .le-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--le-r-sm); font-size: 11px; font-weight: 650; line-height: 1.6; white-space: nowrap; background: var(--le-stage-bg, var(--le-surface-3)); color: var(--le-stage-fg, var(--le-text-2)); } #lead-engine .le-tag--bird, .le-portal .le-tag--bird { background: var(--le-success-wash); color: var(--le-success-d); } #lead-engine .le-swatch, .le-portal .le-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--le-rep, var(--le-rep-none)); flex: 0 0 auto; } /* ========================================================================== 11. Rep chips + filter chips ========================================================================== */ #lead-engine .le-repbar, .le-portal .le-repbar { display: flex; flex-wrap: wrap; gap: var(--le-s-2); margin-bottom: var(--le-s-3); } #lead-engine .le-rep, .le-portal .le-rep { display: inline-flex; align-items: center; gap: 6px; min-height: var(--le-tap-sm); padding: 7px var(--le-s-3); border: 1px solid var(--le-line-strong); border-radius: var(--le-r-pill); background: var(--le-surface); color: var(--le-text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background var(--le-dur) ease, border-color var(--le-dur) ease, color var(--le-dur) ease; } #lead-engine .le-rep b, .le-portal .le-rep b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--le-text); } #lead-engine .le-rep:hover, .le-portal .le-rep:hover { border-color: var(--le-rep, var(--le-faint)); background: var(--le-surface-3); } #lead-engine .le-rep.le-is-active, .le-portal .le-rep.le-is-active { background: var(--le-rep, var(--le-primary)); border-color: var(--le-rep, var(--le-primary)); color: var(--le-on-dark); } #lead-engine .le-rep.le-is-active b, .le-portal .le-rep.le-is-active b { color: var(--le-on-dark); } #lead-engine .le-rep.le-is-active .le-swatch, .le-portal .le-rep.le-is-active .le-swatch { background: rgba(255, 255, 255, 0.85); } #lead-engine .le-filters, .le-portal .le-filters { display: flex; flex-wrap: wrap; gap: var(--le-s-2); margin-bottom: var(--le-s-3); } #lead-engine .le-chip, .le-portal .le-chip { display: inline-flex; align-items: center; gap: var(--le-s-1); min-height: var(--le-tap-sm); padding: 7px var(--le-s-3); border: 1px solid var(--le-line-strong); border-radius: var(--le-r-pill); background: var(--le-surface); color: var(--le-text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background var(--le-dur) ease, border-color var(--le-dur) ease, color var(--le-dur) ease; } #lead-engine .le-chip:hover, .le-portal .le-chip:hover { background: var(--le-surface-3); border-color: var(--le-faint); } #lead-engine .le-chip.le-is-active, .le-portal .le-chip.le-is-active { background: var(--le-primary); border-color: var(--le-primary); color: var(--le-on-dark); } #le-repactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--le-s-2); margin-bottom: var(--le-s-3); } #le-whoami-wrap { display: flex; align-items: center; gap: var(--le-s-2); flex: 1 1 190px; min-width: 0; font-size: 12.5px; color: var(--le-muted); } #le-whoami-wrap .le-label { margin: 0; white-space: nowrap; } #le-whoami { flex: 1 1 auto; min-height: var(--le-tap-sm); font-size: 13px; } #le-xfer-open { flex: 1 1 auto; } /* ========================================================================== 12. Lead card -------------------------------------------------------------------------- .le-card is a class rather than an id even though the template shows it twice, because it renders in two places at once: the dialer (#le-dcard) and the modal body (#le-modal-body). Everything inside it is therefore a class too — it all exists twice in the live DOM. ========================================================================== */ #lead-engine .le-card, .le-portal .le-card { padding: var(--le-s-4) var(--le-s-3); border: 1px solid var(--le-line); border-radius: var(--le-r-lg); background: var(--le-surface); box-shadow: var(--le-shadow-md); } #lead-engine .le-card--compact, .le-portal .le-card--compact { padding: var(--le-s-4); box-shadow: none; } #lead-engine .le-card__eyebrow, .le-portal .le-card__eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--le-faint); text-align: center; margin-bottom: var(--le-s-2); } #lead-engine .le-card__name, .le-portal .le-card__name { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; text-align: center; color: var(--le-text); overflow-wrap: anywhere; } #lead-engine .le-card__place, .le-portal .le-card__place { margin-top: var(--le-s-1); font-size: 13.5px; color: var(--le-muted); text-align: center; } #lead-engine .le-card__addr, .le-portal .le-card__addr { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--le-faint); } #lead-engine .le-card__phone, .le-portal .le-card__phone { margin-top: 6px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; text-align: center; color: var(--le-primary); cursor: pointer; } #lead-engine .le-card__site, .le-portal .le-card__site { display: block; margin-top: var(--le-s-1); font-size: 12.5px; font-weight: 600; text-align: center; color: var(--le-muted); cursor: pointer; overflow-wrap: anywhere; } #lead-engine .le-card__site:hover, .le-portal .le-card__site:hover { color: var(--le-primary); } #lead-engine .le-card__outcomes-label, .le-portal .le-card__outcomes-label { margin: var(--le-s-4) 0 var(--le-s-2); padding-top: var(--le-s-4); border-top: 1px solid var(--le-line); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--le-muted); } /* --- primary action row ------------------------------------------------ Five equal columns previously, locked at every width, with 2px of side padding. Auto-fit lets it run 5-up where there is room and fall to 3-up or 2-up on a narrow phone instead of squeezing the labels. */ #lead-engine .le-actions, .le-portal .le-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; margin: var(--le-s-3) 0 var(--le-s-2); } #lead-engine .le-action, .le-portal .le-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; padding: var(--le-s-2) var(--le-s-1); border: 1px solid var(--le-line-strong); border-radius: var(--le-r-md); background: var(--le-surface); color: var(--le-text-2); font-size: 11.5px; font-weight: 650; cursor: pointer; transition: background var(--le-dur) ease, border-color var(--le-dur) ease, color var(--le-dur) ease, transform var(--le-dur) ease; } #lead-engine .le-action__icon, .le-portal .le-action__icon { font-size: 17px; line-height: 1; } #lead-engine .le-action__label, .le-portal .le-action__label { line-height: 1.2; } #lead-engine .le-action:hover, .le-portal .le-action:hover { background: var(--le-surface-3); border-color: var(--le-faint); } #lead-engine .le-action:active, .le-portal .le-action:active { transform: translateY(1px); } #lead-engine .le-action--call, .le-portal .le-action--call { background: var(--le-success); border-color: var(--le-success); color: var(--le-on-dark); } #lead-engine .le-action--call:hover, .le-portal .le-action--call:hover { background: var(--le-success-d); border-color: var(--le-success-d); color: var(--le-on-dark); } #lead-engine .le-action--text, .le-portal .le-action--text { background: var(--le-primary); border-color: var(--le-primary); color: var(--le-on-dark); } #lead-engine .le-action--text:hover, .le-portal .le-action--text:hover { background: var(--le-primary-d); border-color: var(--le-primary-d); color: var(--le-on-dark); } #lead-engine .le-action--mail, .le-portal .le-action--mail, #lead-engine .le-action--site, .le-portal .le-action--site, #lead-engine .le-action--route, .le-portal .le-action--route { background: var(--le-surface); border-color: var(--le-line-strong); color: var(--le-text-2); } #lead-engine .le-action--mail:hover, .le-portal .le-action--mail:hover, #lead-engine .le-action--site:hover, .le-portal .le-action--site:hover, #lead-engine .le-action--route:hover, .le-portal .le-action--route:hover { background: var(--le-primary-wash); border-color: var(--le-primary-line); color: var(--le-primary-d); } #lead-engine .le-action.le-is-disabled, .le-portal .le-action.le-is-disabled { background: var(--le-surface-3); border-color: var(--le-line); color: var(--le-faint); cursor: not-allowed; pointer-events: none; } /* Call and Text are anchors so click-to-call tooling sees a real tel: link. They must not inherit the theme's link colour or underline. */ #lead-engine a.le-action, #lead-engine a.le-action:hover, #lead-engine a.le-action:focus, #lead-engine a.le-action:visited, .le-portal a.le-action, .le-portal a.le-action:hover, .le-portal a.le-action:focus, .le-portal a.le-action:visited { text-decoration: none; } #lead-engine a.le-action--call, #lead-engine a.le-action--call:visited, #lead-engine a.le-action--text, #lead-engine a.le-action--text:visited, .le-portal a.le-action--call, .le-portal a.le-action--call:visited, .le-portal a.le-action--text, .le-portal a.le-action--text:visited { color: var(--le-on-dark); } /* --- outcome grid ------------------------------------------------------ */ #lead-engine .le-outcomes, .le-portal .le-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--le-s-2); } #lead-engine .le-outcome, .le-portal .le-outcome { min-height: var(--le-tap); padding: 11px var(--le-s-2); border: 1px solid var(--le-line-strong); border-radius: var(--le-r-md); background: var(--le-surface); color: var(--le-text-2); font-size: 13px; font-weight: 650; cursor: pointer; transition: background var(--le-dur) ease, border-color var(--le-dur) ease, color var(--le-dur) ease, transform var(--le-dur) ease; } #lead-engine .le-outcome:hover, .le-portal .le-outcome:hover { background: var(--le-surface-3); border-color: var(--le-faint); color: var(--le-text); } #lead-engine .le-outcome:active, .le-portal .le-outcome:active { transform: translateY(1px); } #lead-engine .le-outcome--ok, .le-portal .le-outcome--ok { background: var(--le-primary-wash); border-color: var(--le-primary-line); color: var(--le-primary-d); } #lead-engine .le-outcome--win, .le-portal .le-outcome--win { background: var(--le-success-wash); border-color: #b6e4c9; color: var(--le-success-d); } #lead-engine .le-outcome--bad, .le-portal .le-outcome--bad { background: var(--le-surface); border-color: #f0c6c6; color: var(--le-danger); } #lead-engine .le-outcome--dnc, .le-portal .le-outcome--dnc { background: var(--le-danger); border-color: var(--le-danger); color: var(--le-on-dark); } #lead-engine .le-outcome.le-is-current, .le-portal .le-outcome.le-is-current { box-shadow: 0 0 0 2px var(--le-primary); border-color: var(--le-primary); } /* --- card footer nav --------------------------------------------------- */ #lead-engine .le-cardnav, .le-portal .le-cardnav { display: flex; align-items: center; gap: var(--le-s-2); margin-top: var(--le-s-4); padding-top: var(--le-s-3); border-top: 1px solid var(--le-line); } #lead-engine .le-cardnav__btn, .le-portal .le-cardnav__btn { flex: 0 0 auto; width: 52px; min-height: var(--le-tap); border: 1px solid var(--le-line-strong); border-radius: var(--le-r-md); background: var(--le-surface); color: var(--le-text-2); font-size: 20px; line-height: 1; cursor: pointer; transition: background var(--le-dur) ease, border-color var(--le-dur) ease; } #lead-engine .le-cardnav__btn:hover, .le-portal .le-cardnav__btn:hover { background: var(--le-surface-3); border-color: var(--le-faint); } #lead-engine .le-cardnav__roster, .le-portal .le-cardnav__roster { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--le-s-2); min-height: var(--le-tap); padding: 10px var(--le-s-3); border: 1px solid var(--le-line-strong); border-radius: var(--le-r-md); background: var(--le-surface); color: var(--le-text-2); font-size: 13px; font-weight: 650; cursor: pointer; transition: background var(--le-dur) ease, border-color var(--le-dur) ease, color var(--le-dur) ease; } #lead-engine .le-cardnav__roster:hover, .le-portal .le-cardnav__roster:hover { background: var(--le-surface-3); border-color: var(--le-faint); } #lead-engine .le-cardnav__roster.le-is-active, .le-portal .le-cardnav__roster.le-is-active { background: var(--le-primary-wash); border-color: var(--le-primary-line); color: var(--le-primary-d); } /* --- compliance guard -------------------------------------------------- */ #lead-engine .le-guard, .le-portal .le-guard { margin-top: var(--le-s-3); padding: var(--le-s-2) var(--le-s-3); border-radius: var(--le-r-md); font-size: 12.5px; font-weight: 550; line-height: 1.5; } #lead-engine .le-guard:empty, .le-portal .le-guard:empty { display: none; } #lead-engine .le-guard.le-is-allowed, .le-portal .le-guard.le-is-allowed { background: var(--le-success-wash); color: var(--le-success-d); } #lead-engine .le-guard.le-is-blocked, .le-portal .le-guard.le-is-blocked { background: var(--le-danger-wash); color: var(--le-danger-d); } /* --- progress ---------------------------------------------------------- */ #le-progress-track { --le-progress: 0%; height: 6px; margin-bottom: var(--le-s-4); border-radius: var(--le-r-pill); background: var(--le-surface-3); overflow: hidden; } #le-progress-track::before { content: ""; display: block; height: 100%; width: var(--le-progress); border-radius: inherit; background: var(--le-primary); transition: width 0.25s ease; } /* --- dialer layout + CTM softphone -------------------------------------- */ #le-dial-layout { display: flex; flex-direction: column; gap: var(--le-s-4); } /* Collapsed by default: a small round icon, fixed to the right edge of the screen — same pattern as any ordinary chat widget. Clicking it slides the full softphone panel in from the right; clicking outside the panel (or the × inside it) slides it back out. Reachable from every view — the Dialer, the Leads list, and the lead detail sheet (#le-lead-modal) alike — rather than being tied to one tab. z-index sits above the lead-detail modal (999998) on purpose: a rep should be able to work the phone controls while a lead card is open. */ #le-ctm-fab { position: fixed; top: 96px; right: var(--le-s-4); z-index: 999998; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--le-primary); color: #fff; font-size: 20px; box-shadow: var(--le-shadow-lg); cursor: pointer; } #le-ctm-fab.le-is-ready { background: var(--le-success, #16a34a); } #le-ctm-fab[aria-expanded="true"] { display: none; } #le-ctm-fab-dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--le-surface-3); border: 2px solid var(--le-primary); } #le-ctm-fab.le-is-ready #le-ctm-fab-dot { background: #fff; border-color: var(--le-success, #16a34a); } #le-ctm-panel { position: fixed; top: 0; right: 0; z-index: 999999; display: flex; flex-direction: column; width: 340px; max-width: 100vw; height: 100dvh; border-left: 1px solid var(--le-line); background: var(--le-surface); box-shadow: var(--le-shadow-lg); transform: translateX(100%); transition: transform 0.18s ease; } #le-ctm-panel.le-is-open { transform: translateX(0); } #le-ctm-head { display: flex; align-items: center; gap: var(--le-s-2); flex: 0 0 auto; width: 100%; padding: var(--le-s-3) var(--le-s-4); background: var(--le-surface-2); border-bottom: 1px solid var(--le-line); font-weight: 600; } #le-ctm-toggle { margin-left: auto; border: 0; background: transparent; color: var(--le-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: var(--le-s-2); min-width: var(--le-tap-sm); min-height: var(--le-tap-sm); } #le-ctm-toggle-state { padding: 2px 10px; border-radius: var(--le-r-pill); background: var(--le-surface-3); color: var(--le-muted); font-size: 12px; font-weight: 600; white-space: nowrap; } #le-ctm-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; } #le-ctm-hangup { display: flex; align-items: center; justify-content: center; gap: var(--le-s-2); flex: 0 0 auto; margin: var(--le-s-3); } ctm-phone-embed { display: block; flex: 1 1 auto; width: 100%; min-height: 480px; border: 0; } @media (max-width: 767px) { /* Not enough width for a side-docked column — fall back to a bottom sheet instead, still collapsed by default. */ #le-ctm-fab { top: auto; bottom: calc(var(--le-tap) + var(--le-s-4) * 2); } #le-ctm-panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; height: auto; max-height: min(70dvh, 640px); border-left: 0; border-top: 1px solid var(--le-line); transform: translateY(100%); } #le-ctm-panel.le-is-open { transform: translateY(0); } ctm-phone-embed { min-height: 420px; } } /* --- inline options ---------------------------------------------------- */ #lead-engine .le-opts, .le-portal .le-opts { display: flex; align-items: center; justify-content: center; gap: var(--le-s-2); margin-top: var(--le-s-4); font-size: 13px; color: var(--le-text-2); } #lead-engine .le-opts--left, .le-portal .le-opts--left { justify-content: flex-start; } #lead-engine .le-opts label, .le-portal .le-opts label { cursor: pointer; } #lead-engine .le-checkline, .le-portal .le-checkline { display: flex; align-items: center; gap: var(--le-s-2); margin-top: var(--le-s-3); font-size: 13px; color: var(--le-text-2); cursor: pointer; } /* ========================================================================== 13. Forms ========================================================================== */ #lead-engine .le-fieldgrid, .le-portal .le-fieldgrid { display: grid; grid-template-columns: 1fr; column-gap: var(--le-s-3); row-gap: 10px; margin-top: var(--le-s-3); } #lead-engine .le-fieldgrid__full, .le-portal .le-fieldgrid__full { grid-column: 1 / -1; } #lead-engine .le-label, .le-portal .le-label { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 650; letter-spacing: 0.01em; color: var(--le-text-2); } #lead-engine .le-textarea-lg, .le-portal .le-textarea-lg { min-height: 190px; } #lead-engine .le-textarea-md, .le-portal .le-textarea-md { min-height: 120px; } #lead-engine .le-importform, .le-portal .le-importform { padding: var(--le-s-4); margin-top: var(--le-s-3); border: 1px solid var(--le-line); border-radius: var(--le-r-lg); background: var(--le-surface); box-shadow: var(--le-shadow-sm); } #le-q { margin-bottom: var(--le-s-3); } /* --- stage filter ------------------------------------------------------- */ #le-filterbar { display: flex; align-items: center; gap: var(--le-s-3); margin: var(--le-s-4) 0 var(--le-s-3); padding: var(--le-s-3); border: 1px solid var(--le-line); border-radius: var(--le-r-md); background: var(--le-surface); } #le-filterbar .le-label { margin: 0; flex: 0 0 auto; white-space: nowrap; font-size: 12px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase; color: var(--le-muted); } #le-stage-select { flex: 1 1 auto; width: auto; min-width: 0; min-height: var(--le-tap-sm); font-size: 14px; font-weight: 600; } /* --- geo filters (city / neighborhood / zip) ----------------------------- */ /* Shown only for the reps listed in Settings → Lead Engine → "Location filter reps" — hidden via .le-is-hidden for everyone else. Styled as its own distinct card (tinted background, a small header) rather than a continuation of the plain stage filter, since it's a materially different, opt-in tool only some reps have. */ #le-geofilterbar { margin: 0 0 var(--le-s-3); padding: var(--le-s-3) var(--le-s-4); border: 1px solid var(--le-primary-line); border-radius: var(--le-r-lg); background: var(--le-primary-wash); } .le-geofilterbar__head { display: flex; align-items: center; gap: var(--le-s-2); margin-bottom: var(--le-s-3); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--le-primary-d); } .le-geofilterbar__row { display: grid; grid-template-columns: 1fr; gap: var(--le-s-3); } .le-geofilterbar__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .le-geofilterbar__field .le-label { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase; color: var(--le-muted); } .le-geofilterbar__field select, .le-geofilterbar__field input { width: 100%; min-height: var(--le-tap-sm); font-size: 14px; font-weight: 600; } @media (min-width: 640px) { .le-geofilterbar__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.7fr); align-items: end; } } /* --- scrollbar in the content well --------------------------------------- */ #le-wrap::-webkit-scrollbar { width: 10px; } #le-wrap::-webkit-scrollbar-track { background: transparent; } #le-wrap::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--le-r-pill); background: var(--le-line-strong); background-clip: content-box; } #le-wrap::-webkit-scrollbar-thumb:hover { background: var(--le-faint); background-clip: content-box; } /* ========================================================================== 14. Lead rows, pick rows, list cards ========================================================================== */ #le-listhead { display: flex; align-items: center; justify-content: space-between; gap: var(--le-s-2); flex-wrap: wrap; margin: var(--le-s-4) 0 var(--le-s-2); font-size: 12.5px; color: var(--le-muted); } #le-listhead b { color: var(--le-text); font-weight: 700; font-variant-numeric: tabular-nums; } #lead-engine .le-lead, .le-portal .le-lead { display: flex; align-items: center; gap: var(--le-s-3); padding: var(--le-s-3) var(--le-s-4); margin-bottom: 6px; border: 1px solid var(--le-line); border-radius: var(--le-r-md); background: var(--le-surface); transition: border-color var(--le-dur) ease, box-shadow var(--le-dur) ease; } #lead-engine .le-lead:hover, .le-portal .le-lead:hover { border-color: var(--le-line-strong); box-shadow: var(--le-shadow-sm); } #lead-engine .le-lead__name, .le-portal .le-lead__name { font-size: 14px; font-weight: 650; color: var(--le-text); overflow-wrap: anywhere; } #lead-engine .le-lead__sub, .le-portal .le-lead__sub { margin-top: 2px; font-size: 12px; color: var(--le-muted); overflow-wrap: anywhere; } #lead-engine .le-lead__side, .le-portal .le-lead__side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--le-s-2); flex-shrink: 0; } #lead-engine .le-drill, .le-portal .le-drill { cursor: pointer; } #lead-engine .le-drill:hover, .le-portal .le-drill:hover { border-color: var(--le-primary-line); background: var(--le-primary-wash); } #lead-engine .le-drill__chev, .le-portal .le-drill__chev { font-size: 14px; opacity: 0.5; } /* --- checkable rows (callbacks, roster) -------------------------------- */ #lead-engine .le-pick, .le-portal .le-pick { display: flex; align-items: center; gap: var(--le-s-3); padding: var(--le-s-3) var(--le-s-4); margin-bottom: 6px; border: 1px solid var(--le-line); border-radius: var(--le-r-md); background: var(--le-surface); cursor: pointer; transition: border-color var(--le-dur) ease, background var(--le-dur) ease; } #lead-engine .le-pick:hover, .le-portal .le-pick:hover { border-color: var(--le-line-strong); background: var(--le-surface-2); } #lead-engine .le-pick__box, .le-portal .le-pick__box { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--le-line-strong); border-radius: var(--le-r-sm); background: var(--le-surface); color: transparent; font-size: 12px; transition: background var(--le-dur) ease, border-color var(--le-dur) ease; } #lead-engine .le-pick.le-is-checked, .le-portal .le-pick.le-is-checked { border-color: var(--le-primary-line); background: var(--le-primary-wash); } #lead-engine .le-pick.le-is-checked .le-pick__box, .le-portal .le-pick.le-is-checked .le-pick__box { background: var(--le-primary); border-color: var(--le-primary); color: var(--le-on-dark); } #lead-engine .le-pick.le-is-checked .le-pick__name, .le-portal .le-pick.le-is-checked .le-pick__name { text-decoration: line-through; color: var(--le-muted); } #lead-engine .le-pick__meta, .le-portal .le-pick__meta { flex: 1 1 auto; min-width: 0; } #lead-engine .le-pick__name, .le-portal .le-pick__name { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; } #lead-engine .le-pick__sub, .le-portal .le-pick__sub { margin-top: 2px; font-size: 12px; color: var(--le-muted); overflow-wrap: anywhere; } #lead-engine .le-pick__chev, .le-portal .le-pick__chev { flex: 0 0 auto; color: var(--le-faint); font-size: 17px; line-height: 1; } /* --- list cards -------------------------------------------------------- */ #lead-engine .le-listcard, .le-portal .le-listcard { padding: var(--le-s-4); margin-bottom: var(--le-s-2); border: 1px solid var(--le-line); border-radius: var(--le-r-lg); background: var(--le-surface); transition: border-color var(--le-dur) ease, box-shadow var(--le-dur) ease; } #lead-engine .le-listcard:hover, .le-portal .le-listcard:hover { box-shadow: var(--le-shadow-sm); } #lead-engine .le-listcard.le-is-active, .le-portal .le-listcard.le-is-active { border-color: var(--le-primary); box-shadow: 0 0 0 1px var(--le-primary); } #lead-engine .le-listcard--all, .le-portal .le-listcard--all { border-style: dashed; border-color: var(--le-primary-line); } #lead-engine .le-listcard__head, .le-portal .le-listcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--le-s-3); margin-bottom: var(--le-s-3); } #lead-engine .le-listcard__name, .le-portal .le-listcard__name { font-size: 15px; font-weight: 700; color: var(--le-text); overflow-wrap: anywhere; } #lead-engine .le-listcard__meta, .le-portal .le-listcard__meta { margin-top: 3px; font-size: 12px; color: var(--le-muted); font-variant-numeric: tabular-nums; } #lead-engine .le-listcard__actions, .le-portal .le-listcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--le-s-2); } #lead-engine .le-listcard__actions select, .le-portal .le-listcard__actions select { flex: 1 1 150px; width: auto; min-height: var(--le-tap-sm); font-size: 13px; } /* ========================================================================== 15. Metrics ========================================================================== */ #le-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--le-s-2); } #lead-engine .le-kpi, .le-portal .le-kpi { padding: var(--le-s-4); border: 1px solid var(--le-line); border-radius: var(--le-r-lg); background: var(--le-surface); text-align: center; } #lead-engine .le-metric__value, .le-portal .le-metric__value { font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--le-text); } #lead-engine .le-metric__label, .le-portal .le-metric__label { margin-top: var(--le-s-1); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--le-muted); } #lead-engine .le-metric__label--sub, .le-portal .le-metric__label--sub { margin-top: 6px; text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--le-muted); } #lead-engine .le-kpi.le-drill, .le-portal .le-kpi.le-drill { cursor: pointer; } #le-pace { margin-top: var(--le-s-2); padding: var(--le-s-4); border: 1px solid var(--le-primary-line); border-radius: var(--le-r-lg); background: var(--le-primary-wash); text-align: center; } #le-pace .le-metric__value { color: var(--le-primary-d); } #le-dash-scope { margin-bottom: var(--le-s-4); } /* ========================================================================== 16. Pipeline table ========================================================================== */ #lead-engine .le-tablewrap, .le-portal .le-tablewrap { margin-top: var(--le-s-3); border: 1px solid var(--le-line); border-radius: var(--le-r-lg); background: var(--le-surface); overflow-x: auto; -webkit-overflow-scrolling: touch; } #lead-engine .le-table, .le-portal .le-table { min-width: 480px; font-size: 13px; } #lead-engine .le-table th, #lead-engine .le-table td, .le-portal .le-table th, .le-portal .le-table td { padding: 10px var(--le-s-3); text-align: left; border-bottom: 1px solid var(--le-line); } #lead-engine .le-table thead th, .le-portal .le-table thead th { position: sticky; top: 0; background: var(--le-surface-3); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--le-muted); white-space: nowrap; } #lead-engine .le-table .le-num, .le-portal .le-table .le-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } #lead-engine .le-table tbody tr, .le-portal .le-table tbody tr { cursor: pointer; transition: background var(--le-dur) ease; } #lead-engine .le-table tbody tr:hover, .le-portal .le-table tbody tr:hover { background: var(--le-surface-2); } #lead-engine .le-table .le-is-won, .le-portal .le-table .le-is-won { color: var(--le-success); font-weight: 700; } #lead-engine .le-table tfoot td, .le-portal .le-table tfoot td { background: var(--le-surface-3); font-weight: 700; border-bottom: none; } /* ========================================================================== 17. Modals + sheets -------------------------------------------------------------------------- On a phone this is a bottom sheet: full width, rounded only on the top two corners, sliding up. Past the tablet breakpoint it becomes a centred dialog with all four corners rounded and a fade instead of a slide, because a slide only reads correctly when the sheet starts off-screen. ========================================================================== */ .le-modal { position: fixed; inset: 0; z-index: 999998; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 24, 48, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease; } .le-modal.le-is-open { opacity: 1; visibility: visible; } .le-sheet { width: 100%; max-height: 92vh; display: flex; flex-direction: column; background: var(--le-canvas); border-radius: var(--le-r-xl) var(--le-r-xl) 0 0; box-shadow: var(--le-shadow-lg); animation: le-sheet-up 0.22s ease; overflow: hidden; } @keyframes le-sheet-up { from { transform: translateY(3%); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } } @keyframes le-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } .le-portal .le-sheet__bar, #lead-engine .le-sheet__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--le-s-2); padding: var(--le-s-2) var(--le-s-3); background: var(--le-surface); border-bottom: 1px solid var(--le-line); flex-shrink: 0; } .le-portal .le-sheet__grab, #lead-engine .le-sheet__grab { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 36px; height: 4px; border-radius: var(--le-r-pill); background: var(--le-line-strong); } .le-portal .le-sheet__close, #lead-engine .le-sheet__close { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: var(--le-tap); height: var(--le-tap); border: none; border-radius: var(--le-r-md); background: none; color: var(--le-muted); font-size: 15px; cursor: pointer; transition: background var(--le-dur) ease, color var(--le-dur) ease; } .le-portal .le-sheet__close:hover, #lead-engine .le-sheet__close:hover { background: var(--le-surface-3); color: var(--le-text); } .le-portal .le-sheet__body, #lead-engine .le-sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: var(--le-s-3); } #le-modal-back { flex-shrink: 0; } /* ========================================================================== 18. Transfer dialog ========================================================================== */ #le-xfer-head { margin-bottom: var(--le-s-4); } #le-xfer-title { display: flex; align-items: center; gap: var(--le-s-2); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--le-text); } #le-xfer-sub { margin-top: var(--le-s-1); font-size: 13px; line-height: 1.55; color: var(--le-muted); } .le-portal .le-xfer-sec, #lead-engine .le-xfer-sec { margin-bottom: var(--le-s-4); } .le-portal .le-xfer-lbl, #lead-engine .le-xfer-lbl { margin-bottom: var(--le-s-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--le-text-2); } .le-portal .le-xfer-lbl span, #lead-engine .le-xfer-lbl span { font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--le-faint); } #le-xfer-flow { padding: var(--le-s-4); border: 1px solid var(--le-line); border-radius: var(--le-r-lg); background: var(--le-surface); margin-bottom: var(--le-s-4); } #le-xfer-flow .le-xfer-sec:last-child { margin-bottom: 0; } #le-xfer-arrow { display: flex; align-items: center; justify-content: center; gap: var(--le-s-2); margin: var(--le-s-3) 0; color: var(--le-faint); } #le-xfer-arrow-count { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--le-primary); } #le-xfer-arrow-count:empty { display: none; } #le-xfer-arrow-line { font-size: 17px; line-height: 1; } .le-portal .le-xfer-reps, #lead-engine .le-xfer-reps { display: flex; flex-wrap: wrap; gap: var(--le-s-2); } .le-portal .le-xfer-rep, #lead-engine .le-xfer-rep { display: inline-flex; align-items: center; gap: 6px; min-height: var(--le-tap-sm); padding: 7px var(--le-s-3); border: 1px solid var(--le-line-strong); border-radius: var(--le-r-pill); background: var(--le-surface); color: var(--le-text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color var(--le-dur) ease, background var(--le-dur) ease, box-shadow var(--le-dur) ease; } .le-portal .le-xfer-rep b, #lead-engine .le-xfer-rep b { font-variant-numeric: tabular-nums; color: var(--le-muted); } .le-portal .le-xfer-rep:hover:not(:disabled), #lead-engine .le-xfer-rep:hover:not(:disabled) { border-color: var(--le-rep, var(--le-faint)); background: var(--le-surface-3); } .le-portal .le-xfer-rep:disabled, #lead-engine .le-xfer-rep:disabled { opacity: 0.45; cursor: not-allowed; } .le-portal .le-xfer-rep.le-is-active, #lead-engine .le-xfer-rep.le-is-active { border-color: var(--le-rep, var(--le-primary)); box-shadow: 0 0 0 1px var(--le-rep, var(--le-primary)); background: var(--le-surface); color: var(--le-text); } .le-portal .le-xfer-rep__name, #lead-engine .le-xfer-rep__name { overflow: hidden; text-overflow: ellipsis; } .le-portal .le-xfer-name, #lead-engine .le-xfer-name { color: var(--le-rep, var(--le-primary)); font-weight: 700; } #le-xfer-scope { display: grid; grid-template-columns: 1fr 1fr; gap: var(--le-s-2); } .le-portal .le-xfer-scopebtn, #lead-engine .le-xfer-scopebtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--le-tap); padding: 10px var(--le-s-3); border: 1px solid var(--le-line-strong); border-radius: var(--le-r-md); background: var(--le-surface); text-align: left; cursor: pointer; transition: border-color var(--le-dur) ease, background var(--le-dur) ease; } .le-portal .le-xfer-scopebtn b, #lead-engine .le-xfer-scopebtn b { font-size: 13px; font-weight: 650; color: var(--le-text); } .le-portal .le-xfer-scopebtn small, #lead-engine .le-xfer-scopebtn small { font-size: 11.5px; color: var(--le-muted); } .le-portal .le-xfer-scopebtn.le-is-active, #lead-engine .le-xfer-scopebtn.le-is-active { border-color: var(--le-primary); background: var(--le-primary-wash); } .le-portal .le-xfer-scopebtn.le-is-active b, #lead-engine .le-xfer-scopebtn.le-is-active b { color: var(--le-primary-d); } #le-xfer-amt { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: var(--le-s-2); } .le-portal .le-xfer-amtbtn, #lead-engine .le-xfer-amtbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--le-s-1); min-height: var(--le-tap-sm); padding: 7px var(--le-s-2); border: 1px solid var(--le-line-strong); border-radius: var(--le-r-md); background: var(--le-surface); color: var(--le-text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color var(--le-dur) ease, background var(--le-dur) ease, color var(--le-dur) ease; } .le-portal .le-xfer-amtbtn b, #lead-engine .le-xfer-amtbtn b { font-variant-numeric: tabular-nums; } .le-portal .le-xfer-amtbtn:hover:not(:disabled), #lead-engine .le-xfer-amtbtn:hover:not(:disabled) { background: var(--le-surface-3); border-color: var(--le-faint); } .le-portal .le-xfer-amtbtn:disabled, #lead-engine .le-xfer-amtbtn:disabled { opacity: 0.45; cursor: not-allowed; } .le-portal .le-xfer-amtbtn.le-is-active, #lead-engine .le-xfer-amtbtn.le-is-active { background: var(--le-primary); border-color: var(--le-primary); color: var(--le-on-dark); } #le-xfer-custom { display: flex; align-items: center; gap: var(--le-s-2); margin-top: var(--le-s-2); flex-wrap: wrap; } .le-portal .le-xfer-step, #lead-engine .le-xfer-step { flex: 0 0 auto; width: var(--le-tap); height: var(--le-tap); border: 1px solid var(--le-line-strong); border-radius: var(--le-r-md); background: var(--le-surface); color: var(--le-text-2); font-size: 17px; line-height: 1; cursor: pointer; transition: background var(--le-dur) ease, border-color var(--le-dur) ease; } .le-portal .le-xfer-step:hover, #lead-engine .le-xfer-step:hover { background: var(--le-surface-3); border-color: var(--le-faint); } #le-xfer-n { flex: 1 1 90px; width: auto; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; } #le-xfer-of { flex: 0 0 auto; font-size: 12px; color: var(--le-faint); } #le-xfer-summary { padding: var(--le-s-3) var(--le-s-4); margin-bottom: var(--le-s-4); border: 1px solid var(--le-line); border-radius: var(--le-r-md); background: var(--le-surface); font-size: 13px; line-height: 1.55; color: var(--le-text-2); } #le-xfer-summary.le-is-hint { background: var(--le-surface-3); color: var(--le-muted); } #le-xfer-summary.le-is-warn { background: var(--le-warn-wash); border-color: #f0ddb4; color: var(--le-warn); } #le-xfer-summary.le-is-ready { background: var(--le-primary-wash); border-color: var(--le-primary-line); color: var(--le-text); } .le-portal .le-xfer-sumbig, #lead-engine .le-xfer-sumbig { font-size: 14px; } .le-portal .le-xfer-sumbig b, #lead-engine .le-xfer-sumbig b { font-weight: 700; font-variant-numeric: tabular-nums; } .le-portal .le-xfer-sumsub, #lead-engine .le-xfer-sumsub { margin-top: var(--le-s-1); font-size: 12px; color: var(--le-muted); font-variant-numeric: tabular-nums; } #le-xfer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--le-s-2); } #le-xfer-open.le-is-locked { opacity: 0.55; cursor: not-allowed; } /* --- undo banner -------------------------------------------------------- */ #le-xfer-undo { display: flex; align-items: center; justify-content: space-between; gap: var(--le-s-3); flex-wrap: wrap; padding: var(--le-s-2) var(--le-s-3); margin-bottom: var(--le-s-3); border: 1px solid var(--le-primary-line); border-radius: var(--le-r-md); background: var(--le-primary-wash); font-size: 13px; color: var(--le-text-2); } #lead-engine .le-undo__txt b, .le-portal .le-undo__txt b { font-weight: 700; color: var(--le-text); } /* ========================================================================== 19. Prompt + toast ========================================================================== */ #le-ask { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: var(--le-s-4); background: rgba(20, 24, 48, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.16s ease, visibility 0.16s ease; } #le-ask.le-is-open { opacity: 1; visibility: visible; } #le-askbox { width: 100%; max-width: 400px; padding: var(--le-s-5); border-radius: var(--le-r-lg); background: var(--le-surface); box-shadow: var(--le-shadow-lg); animation: le-dialog-in 0.16s ease; } #le-ask-title { margin-bottom: var(--le-s-3); font-size: 15px; font-weight: 650; color: var(--le-text); } #le-askbtns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--le-s-2); margin-top: var(--le-s-4); } #le-ask.le-is-noinput #le-ask-input { display: none; } #le-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1000000; max-width: 90vw; padding: 11px var(--le-s-4); border-radius: var(--le-r-md); background: var(--le-text); color: var(--le-on-dark); font-size: 13px; font-weight: 600; text-align: center; box-shadow: var(--le-shadow-lg); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; } #le-toast.le-is-open { opacity: 1; transform: translateX(-50%) translateY(0); } /* ========================================================================== 20. Responsive -------------------------------------------------------------------------- The old sheet had three breakpoints (min-640, max-480, max-400) and nothing above 640px, so a 1440px monitor got the same 760px column and the same phone-sized tab bar as a handset. Layout now moves at four points and the base styles are the narrowest case, so nothing has to be undone going up. Because the app is embedded through a shortcode, its available width is set by the containing column, not the viewport. Where a browser supports container queries the component reacts to its own box; the media queries below are the fallback for browsers that do not. ========================================================================== */ /* --- very small phones (320–359px) -------------------------------------- */ @media (max-width: 359px) { #lead-engine .le-tab { min-width: 56px; font-size: 9.5px; } #lead-engine .le-action { min-height: 56px; font-size: 10.5px; } #lead-engine .le-card__name { font-size: 19px; } #lead-engine { --le-pad: 14px; } } /* --- large phones and up (≥480px) --------------------------------------- */ @media (min-width: 480px) { #lead-engine .le-btnrow { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } #lead-engine .le-fieldgrid { grid-template-columns: 1fr 1fr; } } /* --- tablet (≥768px) ----------------------------------------------------- */ @media (min-width: 768px) { #lead-engine { font-size: 14.5px; } #lead-engine { --le-pad: 28px; } #le-wrap { padding-top: var(--le-s-5); padding-bottom: var(--le-s-7); } #lead-engine .le-card { padding: var(--le-s-5) var(--le-s-5); } #lead-engine .le-card__name { font-size: 22px; } #lead-engine .le-fieldgrid { column-gap: var(--le-s-4); row-gap: var(--le-s-4); } #lead-engine .le-tab { font-size: 11.5px; } #lead-engine .le-tab .le-icon { width: 36px; height: 24px; font-size: 17px; } /* Modal becomes a centred dialog rather than a bottom sheet. */ .le-modal { align-items: center; padding: var(--le-s-7); } .le-sheet { max-width: 660px; max-height: 86vh; border-radius: var(--le-r-xl); animation: le-dialog-in 0.18s ease; } .le-portal .le-sheet__grab, #lead-engine .le-sheet__grab { display: none; } .le-portal .le-sheet__bar, #lead-engine .le-sheet__bar { padding: var(--le-s-3) var(--le-s-4); } .le-portal .le-sheet__body, #lead-engine .le-sheet__body { margin: var(--le-s-5); } #le-xfer-actions { grid-template-columns: auto auto; justify-content: flex-end; } #le-xfer-actions .le-btn { min-width: 130px; } #le-askbtns { grid-template-columns: auto auto; justify-content: flex-end; } #le-askbtns .le-btn { min-width: 110px; } } /* --- desktop (≥1024px) --------------------------------------------------- The shell stays a single column by design; it simply gets a wider well, tighter controls for a mouse, and a tab bar that reads as a real toolbar rather than a phone dock. */ @media (min-width: 1024px) { #le-wrap { max-width: 100%; } #lead-engine { --le-tap: 40px; --le-tap-sm: 34px; } #lead-engine .le-tab { flex-direction: row; gap: var(--le-s-2); min-height: 48px; font-size: 12.5px; } #lead-engine .le-tab .le-icon { width: auto; height: auto; background: none; font-size: 15px; } #lead-engine .le-tab.le-is-active .le-icon { background: none; } #lead-engine .le-tab.le-is-active { box-shadow: inset 0 -2px 0 var(--le-primary); } #lead-engine .le-lead, #lead-engine .le-pick { padding: var(--le-s-3) var(--le-s-4); } #lead-engine .le-outcomes { grid-template-columns: repeat(4, 1fr); } } /* --- wide desktop (≥1280px) ---------------------------------------------- */ @media (min-width: 1280px) { #le-wrap { max-width: 100%; } #lead-engine .le-fieldgrid { grid-template-columns: repeat(3, 1fr); } #lead-engine .le-fieldgrid__full { grid-column: 1 / -1; } } /* --- container queries --------------------------------------------------- Preferred over the viewport queries above when supported, because a shortcode dropped into a narrow Elementor column is narrow regardless of how wide the window is. */ @supports (container-type: inline-size) { #lead-engine { container-type: inline-size; container-name: le; } @container le (min-width: 480px) { #lead-engine .le-btnrow { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } #lead-engine .le-fieldgrid { grid-template-columns: 1fr 1fr; } } @container le (max-width: 479px) { #lead-engine .le-fieldgrid { grid-template-columns: 1fr; } #lead-engine .le-btnrow { grid-template-columns: 1fr; } #le-xfer-scope { grid-template-columns: 1fr; } } @container le (min-width: 768px) { #lead-engine .le-card { padding: var(--le-s-5) var(--le-s-5); } #lead-engine .le-card__name { font-size: 22px; } } @container le (min-width: 1024px) { #lead-engine .le-outcomes { grid-template-columns: repeat(4, 1fr); } } } /* --- print ---------------------------------------------------------------- */ @media print { #le-tabbar, #le-brandbar, #le-listbar, #le-linkrow { display: none; } #lead-engine { background: #fff; } } /* --- reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #lead-engine *, #lead-engine *::before, #lead-engine *::after, .le-portal *, .le-portal *::before, .le-portal *::after { animation-duration: 0.001ms; animation-iteration-count: 1; transition-duration: 0.001ms; } } /* ========================================================================== 21. State overrides -------------------------------------------------------------------------- These sit last and repeat the class so they carry (0,1,2,0) — higher than any component rule in this file, all of which are a single class under the id root. Source order alone is not enough: `.le-view { display: block }` and `.le-is-hidden { display: none }` are otherwise the same specificity, and whichever came last silently won. That is exactly what left all eight views stacked on top of each other with the tab bar apparently doing nothing. ========================================================================== */ #lead-engine .le-is-hidden.le-is-hidden, .le-portal .le-is-hidden.le-is-hidden { display: none; } #lead-engine [hidden][hidden], .le-portal [hidden][hidden] { display: none; }