/* ========================================================================== BeauLink/Tenant CRM design system Plug-and-play: brand tokens (--brand-*) are injected per tenant in ; the rest of this file is tenant-agnostic. ========================================================================== */ /* AJAX search swap target: gentle dim while a request is in flight so the user sees feedback without losing input focus. */ #contacts-results.is-loading { opacity: 0.55; transition: opacity 120ms ease; pointer-events: none; } #search-status { color: var(--text-muted); font-style: italic; } /* Cascading-dropdown status hint: appears above Treatment/Doctor when the list is filtered by Specialty. Tells the agent "you're seeing derma only" so a missing treatment doesn't look like a bug. */ .cascade-status { grid-column: 1 / -1; font-size: 0.85em; color: var(--brand-accent, #c9a84c); font-style: italic; padding: 4px 8px; border-left: 3px solid var(--brand-accent, #c9a84c); background: var(--surface-hover, #f6f4ee); border-radius: 0 4px 4px 0; margin-bottom: 4px; } .cascade-status:empty { display: none; } /* Cascade-hidden options/groups: !important so this wins over any inline style.display that the bl-select widget might set when the menu opens or the search input changes. The cascade JS adds this class; CSS enforces it. */ .bl-opt.cascade-hidden, .bl-opt-group.cascade-hidden { display: none !important; } /* ===== TOKENS ===== */ :root { /* Brand (overridable per tenant — fallbacks below) */ --brand-primary: #0d1b2a; --brand-primary-soft: #1b2d45; --brand-accent: #c9a84c; --brand-accent-soft: #e8d48b; /* Surfaces */ --bg: #f5f3ee; --surface: #ffffff; --surface-hover: #faf8f3; --border: #e2dfd5; --border-soft: #ece9df; /* Text */ --text: #1a1a1a; --text-muted: #4a4a4a; --text-faint: #7a7a7a; --text-on-primary: #ffffff; --text-on-accent: #1a1a1a; /* Semantic */ --ok: #2d6b2d; --ok-bg: #d8ecd6; --warn: #9a6b1f; --warn-bg: #fbe9bf; --danger: #993333; --danger-bg: #f2cccc; --info: #1f5b9f; --info-bg: #d4e4f5; --purple: #5a3aa8; --purple-bg: #e6dffa; /* Type */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Manrope', var(--font-sans); --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --t-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.812rem); --t-sm: clamp(0.812rem, 0.78rem + 0.15vw, 0.875rem); --t-base: clamp(0.938rem, 0.91rem + 0.15vw, 1rem); --t-md: clamp(1rem, 0.97rem + 0.18vw, 1.125rem); --t-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.312rem); --t-xl: clamp(1.375rem, 1.27rem + 0.51vw, 1.625rem); --t-2xl: clamp(1.75rem, 1.58rem + 0.85vw, 2.25rem); --t-3xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem); --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.6; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Spacing (4 px scale) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* Radii */ --r-sm: 4px; --r: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; /* Shadows (layered, brand-tinted) */ --sh-xs: 0 1px 2px rgba(13, 27, 42, 0.04); --sh-sm: 0 1px 2px rgba(13, 27, 42, 0.04), 0 2px 4px rgba(13, 27, 42, 0.05); --sh-md: 0 2px 6px rgba(13, 27, 42, 0.06), 0 8px 16px rgba(13, 27, 42, 0.06); --sh-lg: 0 8px 24px rgba(13, 27, 42, 0.10), 0 24px 48px rgba(13, 27, 42, 0.08); --sh-focus: 0 0 0 3px rgba(201, 168, 76, 0.4); /* Motion */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur: 220ms; --dur-slow: 360ms; /* Layout: --max-w is the default reading width (used everywhere). Wider monitors keep modest side margins for readability. Pages that benefit from extra horizontal real estate (contacts list, calendar, library) add the `.wide` class to
to override to --max-w-wide. */ --max-w: 1680px; --max-w-wide: 100%; --max-w-text: 860px; /* used for long-form copy pages, kept narrow */ --header-h: 64px; } /* ===== DARK THEME ===== Applied by setting . The inline theme-init script in (see crm_app.py page()) sets this on first paint so there's no FOUC. Defaults to OS preference when no manual choice is saved. */ :root[data-theme="dark"] { /* Surfaces */ --bg: #0a0f17; --surface: #131c2a; --surface-hover: #1c2940; --border: #2c3a52; --border-soft: #1f2b3d; /* Text */ --text: #f1f3f6; --text-muted: #b8c0cc; --text-faint: #8993a4; --text-on-primary: #ffffff; --text-on-accent: #1a1a1a; /* Semantic (brighter for dark backgrounds; bgs muted instead of pastel) */ --ok: #6fce8d; --ok-bg: #0f2a1d; --warn: #f0b855; --warn-bg: #3a2a10; --danger: #ef7d7d; --danger-bg: #3a1818; --info: #6ea8f0; --info-bg: #13243d; --purple: #b39bef; --purple-bg: #211a3a; /* Shadows (lower opacity since dark bg shows shadows less but still adds depth) */ --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.25); --sh-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.25); --sh-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.35); --sh-focus: 0 0 0 3px rgba(232, 212, 139, 0.45); } /* Targeted dark-mode tweaks for specific components that need more than just a token swap (e.g. badges, chat bubbles, chips with hand-tuned colors). */ :root[data-theme="dark"] .badge-new { background: #1a3147; color: #b5d1ee; } :root[data-theme="dark"] .badge-q { background: #2e2410; color: #f0b855; } :root[data-theme="dark"] .badge-booked{ background: #1e2c45; color: #aac5ea; } :root[data-theme="dark"] .badge-show { background: #0f2a1d; color: #6fce8d; } :root[data-theme="dark"] .badge-paid { background: #2d2208; color: #e8d48b; } :root[data-theme="dark"] .badge-lost { background: #3a1818; color: #ef7d7d; } :root[data-theme="dark"] .badge-ok { background: #0f2a1d; color: #6fce8d; } :root[data-theme="dark"] .badge-warn { background: #3a2a10; color: #f0b855; } :root[data-theme="dark"] .badge-red { background: #3a1818; color: #ef7d7d; } :root[data-theme="dark"] .next-action-red { background: #2a1414; color: #ef7d7d; } :root[data-theme="dark"] .next-action-amber { background: #2a2010; color: #f0b855; } :root[data-theme="dark"] .next-action-green { background: #0f2a1d; color: #6fce8d; } :root[data-theme="dark"] .next-action-done { background: var(--surface-hover); color: var(--text-muted); } :root[data-theme="dark"] .rag-red { background: #1f1010; border-left-color: #d04848; } :root[data-theme="dark"] .rag-amber { background: #1f1810; border-left-color: #e5a437; } :root[data-theme="dark"] .rag-green { background: #0f1f15; border-left-color: #22a06b; } :root[data-theme="dark"] .chip-ok { background: #0f2a1d; color: #6fce8d; } :root[data-theme="dark"] .chip-muted { background: var(--surface-hover); color: var(--text-muted); } :root[data-theme="dark"] .chip { background: var(--surface-hover); color: var(--text); } /* Chat thread bubbles - keep agent green-tint, customer neutral but darker */ :root[data-theme="dark"] .chat-in { background: #1e2630; color: var(--text); } :root[data-theme="dark"] .chat-out { background: #1a2b1f; color: #d4e8d8; } /* Image error placeholder + ad-thumb fallback */ :root[data-theme="dark"] .ad-thumb-placeholder { background: var(--surface-hover); color: var(--text-faint); } :root[data-theme="dark"] img.ad-thumb { background: var(--surface-hover); } /* KPI value text: switches from dark navy (brand-primary, invisible on dark bg) to the foreground text colour so the big numbers stay readable. */ :root[data-theme="dark"] .kpi-value { color: var(--text); } :root[data-theme="dark"] .kpi-value-suffix { color: var(--text-faint); } :root[data-theme="dark"] .kpi { background: var(--surface); } /* Cohort funnel empty bars + agent-bar background: surface-hover blends with surface on dark bg, so brighten them so 0% stages are still visible. */ :root[data-theme="dark"] .funnel-bar { background: #2a3a55; } :root[data-theme="dark"] .agent-bar { background: linear-gradient(90deg, #4a5d80, var(--brand-accent)); } /* Status badge new + booked: tweak so they look distinct in dark mode */ :root[data-theme="dark"] .badge { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); } /* Refresh/Ghost buttons in dark mode: faint border so they don't blend */ :root[data-theme="dark"] .btn-ghost { border: 1px solid var(--border); color: var(--text); } :root[data-theme="dark"] .btn-ghost:hover { background: var(--surface-hover); } /* Card numbers (t-num) inside ad-funnel / ad-stats use brand-primary which needs to become accent in dark mode for readability. */ :root[data-theme="dark"] .ad-funnel .t-num, :root[data-theme="dark"] .ad-funnel .t-num b { color: var(--brand-accent, #e8d48b); } /* Form inputs + selects in dark mode: bg matches surface, border visible */ :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--surface); color: var(--text); border-color: var(--border); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--text-faint); } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: var(--brand-accent); } /* OS-preference fallback: if user has never picked manually and OS is dark, apply dark. The theme-init JS still sets data-theme explicitly, so this block mostly serves users with JS disabled. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]):not([data-theme="light"]) { color-scheme: dark; } } /* The theme-toggle button itself */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.08); color: var(--brand-accent-soft, #e8d48b); cursor: pointer; font-size: 16px; line-height: 1; transition: background var(--dur), transform var(--dur); flex-shrink: 0; } .theme-toggle:hover { background: rgba(255,255,255,0.16); transform: rotate(15deg); } .theme-toggle:active { transform: rotate(0); } .theme-toggle .theme-sun { display: none; } .theme-toggle .theme-moon { display: inline; } :root[data-theme="dark"] .theme-toggle .theme-sun { display: inline; } :root[data-theme="dark"] .theme-toggle .theme-moon { display: none; } /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-base); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } a { color: inherit; } img, svg { display: block; max-width: 100%; height: auto; } /* Always show a usable focus ring */ :focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); } /* ===== TYPOGRAPHY ===== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: 0 0 var(--s-3); color: var(--text); letter-spacing: -0.01em; } h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-lg); font-weight: var(--fw-semibold); } h4 { font-size: var(--t-md); font-weight: var(--fw-semibold); } p { margin: 0 0 var(--s-3); max-width: 65ch; } .meta { font-size: var(--t-xs); color: var(--text-muted); } .faint { color: var(--text-faint); } .label { font-size: var(--t-xs); font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .mono { font-family: var(--font-mono); } /* ===== SKIP LINK ===== */ .skip-link { position: absolute; left: -10000px; top: -10000px; background: var(--brand-primary); color: var(--brand-accent); padding: var(--s-3) var(--s-4); font-weight: var(--fw-semibold); z-index: 100; border-radius: 0 0 var(--r) 0; } .skip-link:focus { left: 0; top: 0; } /* ===== HEADER / NAV ===== */ .app-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-soft) 100%); color: var(--text-on-primary); border-bottom: 2px solid var(--brand-accent); padding: var(--s-3) var(--s-4); display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; } .brand-mark { width: 40px; height: 40px; border: 1.5px solid var(--brand-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--brand-accent); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-sm); letter-spacing: 0.08em; background: rgba(255, 255, 255, 0.04); transition: all var(--dur) var(--ease-out); } .brand:hover .brand-mark { transform: scale(1.05); background: rgba(201, 168, 76, 0.12); } .brand-name { font-family: var(--font-display); font-size: var(--t-md); font-weight: var(--fw-semibold); letter-spacing: 0.02em; white-space: nowrap; } /* Hide brand text on narrow viewports where it would wrap. The mark stays. */ @media (max-width: 559px) { .brand-name { display: none; } } /* Mobile hamburger toggle (pure CSS, no JS). The checkbox is hidden but its :checked state controls nav visibility. */ .nav-toggle { position: absolute; left: -10000px; opacity: 0; } .nav-toggle-btn { margin-left: auto; display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r-sm); cursor: pointer; color: var(--brand-accent); transition: background var(--dur) var(--ease-out); font-size: 22px; line-height: 1; -webkit-tap-highlight-color: transparent; } .nav-toggle-btn:hover { background: rgba(255,255,255,0.08); } .nav-toggle-btn::before { content: "\2630"; } /* ☰ */ .nav-toggle:checked ~ .nav-toggle-btn::before { content: "\2715"; } /* ✕ */ nav.primary { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; } /* Hamburger up to 899px (was 767) - prevents the brand text + 7 nav items from wrapping at tablet width 768-899 which is the broken state seen on iPad. */ @media (max-width: 899px) { .nav-toggle-btn { display: inline-flex; } nav.primary { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--brand-primary); padding: var(--s-3); flex-direction: column; align-items: stretch; gap: var(--s-1); border-bottom: 2px solid var(--brand-accent); box-shadow: var(--sh-md); z-index: 49; } .nav-toggle:checked ~ nav.primary { display: flex; } nav.primary a, nav.primary button { width: 100%; padding: var(--s-3); border-radius: var(--r-sm); font-size: var(--t-base); text-align: left; justify-content: flex-start; } } nav.primary a, nav.primary button { display: inline-flex; align-items: center; padding: var(--s-2) var(--s-3); color: var(--brand-accent-soft); text-decoration: none; font-size: var(--t-sm); font-weight: var(--fw-medium); border-radius: var(--r-sm); background: transparent; border: none; cursor: pointer; font-family: inherit; transition: all var(--dur) var(--ease-out); } nav.primary a:hover, nav.primary button:hover { background: rgba(255, 255, 255, 0.08); color: var(--brand-accent); } nav.primary a[aria-current="page"] { color: var(--brand-accent); background: rgba(255, 255, 255, 0.06); font-weight: var(--fw-semibold); } /* ===== LAYOUT ===== */ main { max-width: var(--max-w); margin: 0 auto; padding: var(--s-4) var(--s-3); } @media (min-width: 768px) { main { padding: var(--s-6) var(--s-5); } } @media (min-width: 1280px) { main { padding: var(--s-6) var(--s-6); } } /* Data-dense pages use the full viewport width. Add `.wide` to
via the page() helper for contacts list, calendar, library, activity, etc. */ main.wide { max-width: var(--max-w-wide); padding-left: var(--s-4); padding-right: var(--s-4); } @media (min-width: 768px) { main.wide { padding-left: var(--s-6); padding-right: var(--s-6); } } @media (min-width: 1280px) { main.wide { padding-left: var(--s-8); padding-right: var(--s-8); } } .stack > * + * { margin-top: var(--s-4); } .row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .row.between { justify-content: space-between; } .t-r { text-align: right; } /* ===== CARDS ===== */ .card { background: var(--surface); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--sh-sm); border: 1px solid var(--border-soft); transition: box-shadow var(--dur) var(--ease-out); } @media (min-width: 768px) { .card { padding: var(--s-6); } } .card + .card { margin-top: var(--s-4); } .card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); flex-wrap: wrap; } .card-h h2, .card-h h3 { margin: 0; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 10px var(--s-4); min-height: 44px; border-radius: var(--r); border: 1px solid transparent; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--t-sm); line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .btn:hover { transform: translateY(-1px); box-shadow: var(--sh-md); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--brand-primary); color: var(--brand-accent); } .btn-primary:hover { background: var(--brand-primary-soft); } .btn-accent { background: var(--brand-accent); color: var(--brand-primary); } .btn-accent:hover { background: var(--brand-accent-soft); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-hover); border-color: var(--brand-accent); } .btn-ok { background: var(--ok); color: white; } .btn-warn { background: var(--warn); color: white; } .btn-red, .btn-danger { background: var(--danger); color: white; } .btn-sm { min-height: 36px; padding: var(--s-2) var(--s-3); font-size: var(--t-xs); } .btn-block { display: flex; width: 100%; } .btn-icon { padding: 8px; min-width: 36px; min-height: 36px; } /* ===== BADGES ===== */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--s-2); border-radius: var(--r-pill); font-family: var(--font-sans); font-size: var(--t-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap; flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge-new { background: var(--info-bg); color: var(--info); } .badge-q, .badge-qualified { background: var(--warn-bg); color: var(--warn); } .badge-booked { background: var(--info-bg); color: #0050a0; } .badge-show, .badge-showup { background: var(--purple-bg); color: var(--purple); } .badge-paid { background: var(--brand-accent); color: var(--brand-primary); } .badge-lost { background: #e8e8e8; color: var(--text-faint); } .badge-ok { background: var(--ok-bg); color: var(--ok); } .badge-warn { background: var(--warn-bg); color: var(--warn); } .badge-red, .badge-danger { background: var(--danger-bg); color: var(--danger); } /* ===== TABLES ===== */ .t-wrap { border-radius: var(--r); overflow: auto; border: 1px solid var(--border-soft); } table { width: 100%; border-collapse: collapse; background: var(--surface); } thead th { background: var(--brand-primary); color: var(--brand-accent); font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--t-xs); text-align: left; padding: var(--s-3) var(--s-4); letter-spacing: 0.08em; text-transform: uppercase; position: sticky; top: 0; } tbody td { padding: var(--s-3) var(--s-4); font-size: var(--t-sm); border-bottom: 1px solid var(--border-soft); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--surface-hover); } tbody tr.row-tracked td { background: #ecf6e8; } .t-r, th.t-r, td.t-r, .r, td.r, th.r { text-align: right; } .t-num { font-variant-numeric: tabular-nums; } /* Stacked cards on mobile */ @media (max-width: 767px) { table.mstack { display: block; min-width: 0; } table.mstack thead { display: none; } table.mstack tbody, table.mstack tr { display: block; } table.mstack tr { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r); padding: var(--s-3); margin-bottom: var(--s-3); box-shadow: var(--sh-xs); } table.mstack td { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--border-soft); } table.mstack td:last-child { border-bottom: none; } table.mstack td::before { content: attr(data-label); flex: 0 0 auto; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; } table.mstack td:first-child { font-weight: var(--fw-semibold); } } /* ===== KPI ===== */ .kpi-strip { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--s-4); } @media (min-width: 640px) { .kpi-strip { gap: var(--s-3); grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .kpi-strip { grid-template-columns: repeat(7, 1fr); } } /* View-switcher chip row above the KPI strip. Owner / Sales / Ops / Marketing. */ .view-chip-row { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-2); } .view-chip { display: inline-block; padding: 4px 12px; font-size: var(--t-xs); font-weight: var(--fw-medium); text-decoration: none; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-soft); border-radius: 999px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .view-chip:hover { color: var(--text); border-color: var(--border); } .view-chip.active { background: var(--brand-primary, #0d1b2a); color: #fff; border-color: var(--brand-primary, #0d1b2a); } /* Percentage-card colour states. Goes on .kpi.kpi-ok / .kpi-warn / .kpi-bad */ .kpi.kpi-ok .kpi-value { color: var(--ok, #1f8e3a); } .kpi.kpi-warn .kpi-value { color: var(--warn, #b8860b); } .kpi.kpi-bad .kpi-value { color: var(--danger, #c0392b); } /* Clickable contact rows: the whole navigates to /contact/{id}. Inner s, pills, badges all still work because the JS handler ignores clicks landing on interactive elements. */ tr.row-link { cursor: pointer; } tr.row-link:hover { background: var(--surface-hover); } tr.row-link:focus-visible { outline: 2px solid var(--brand-accent, #c9a84c); outline-offset: -2px; } .kpi { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--s-3) var(--s-3); text-align: center; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-md); } .kpi-label { font-size: var(--t-xs); color: var(--text-muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; } .kpi-value { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: var(--fw-bold); color: var(--brand-primary); line-height: 1.05; margin-top: 2px; display: block; font-variant-numeric: tabular-nums; } /* ===== FORMS ===== */ .field { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-3); } .field > label { font-size: var(--t-xs); font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } input, select, textarea { width: 100%; padding: 10px var(--s-3); min-height: 44px; border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--t-sm); background: var(--surface); color: var(--text); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } textarea { min-height: 96px; resize: vertical; } input:hover, select:hover, textarea:hover { border-color: var(--text-faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-accent); box-shadow: var(--sh-focus); } /* Native date picker indicator — make it match the form palette */ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; transition: opacity var(--dur) var(--ease-out); } input[type="date"]:hover::-webkit-calendar-picker-indicator, input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; } input[type="date"] { font-family: var(--font-sans); } input[type="date"]:not([value=""]) { color: var(--text); } .form-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; } @media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } } .form-grid .full { grid-column: 1 / -1; } /* ===== FUNNEL STEPPER (top-of-contact stage progression) ===== Premium stepper: numbered circle + label, connected by a horizontal line. Each step is its own card-like chip; the connector visualises progression. */ .funnel { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; margin: var(--s-3) 0 0; position: relative; } .funnel-step { --step-color: var(--text-faint); display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-family: var(--font-sans); font-size: var(--t-sm); font-weight: var(--fw-semibold); letter-spacing: -0.005em; line-height: 1; position: relative; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } /* Step number circle (lives inside each chip) */ .funnel-step::before { content: attr(data-num); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--surface-hover); border: 1.5px solid var(--step-color); color: var(--step-color); font-family: var(--font-display); font-size: var(--t-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; flex-shrink: 0; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } /* DONE: green fill, white checkmark instead of number */ .funnel-step.done { --step-color: var(--ok); background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } .funnel-step.done::before { content: "\2713"; /* ✓ */ background: var(--ok); color: white; border-color: var(--ok); font-size: var(--t-sm); } /* CURRENT: brand accent, soft glow, slight emphasis */ .funnel-step.current { --step-color: var(--brand-primary); background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 30%, transparent), var(--sh-sm); font-weight: var(--fw-bold); } @supports not (color: color-mix(in srgb, red, blue)) { .funnel-step.current { box-shadow: 0 0 0 3px var(--warn-bg), var(--sh-sm); } } .funnel-step.current::before { background: var(--brand-primary); color: var(--brand-accent); border-color: var(--brand-primary); } /* PENDING (default): muted, just outlined */ .funnel-step:not(.done):not(.current) { opacity: 0.85; } .funnel-step:hover { transform: translateY(-1px); } /* Connector lines BETWEEN steps. Use `gap` for spacing, and inject thin lines via a pseudo-element on each non-first step. */ .funnel-step + .funnel-step::after { content: ""; position: absolute; left: calc(-1 * var(--s-1) - 2px); top: 50%; width: var(--s-1); height: 2px; background: var(--border); transform: translateY(-50%); z-index: -1; } .funnel-step.done + .funnel-step::after, .funnel-step.done + .funnel-step.done::after { background: var(--ok); } /* Mobile: keep readable, allow wrap, hide connectors */ @media (max-width: 640px) { .funnel { gap: var(--s-1); } .funnel-step { font-size: var(--t-xs); padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1); } .funnel-step::before { width: 20px; height: 20px; font-size: 10px; } .funnel-step + .funnel-step::after { display: none; } } /* ===== TABS / FILTERS ===== */ .tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1); background: var(--surface-hover); border: 1px solid var(--border-soft); border-radius: var(--r-md); margin-bottom: var(--s-3); } .tabs a, .tabs button { padding: var(--s-2) var(--s-3); border-radius: var(--r); font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--text-muted); text-decoration: none; border: none; background: transparent; cursor: pointer; font-family: inherit; transition: all var(--dur) var(--ease-out); } .tabs a:hover { color: var(--text); background: var(--surface); } .tabs a.active, .tabs a[aria-current="true"] { background: var(--brand-primary); color: var(--brand-accent); } /* ===== LOGIN ===== */ .login-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--s-4); background: radial-gradient(circle at top right, rgba(201, 168, 76, 0.10), transparent 40%), radial-gradient(circle at bottom left, rgba(13, 27, 42, 0.10), transparent 40%), var(--bg); } .login-card { max-width: 420px; width: 100%; background: var(--surface); padding: var(--s-8) var(--s-6); border-radius: var(--r-lg); border: 1px solid var(--border-soft); box-shadow: var(--sh-lg); text-align: center; } .login-card .brand-mark { width: 64px; height: 64px; font-size: var(--t-md); margin: 0 auto var(--s-4); color: var(--brand-accent); border-color: var(--brand-accent); background: rgba(201, 168, 76, 0.08); } .login-card h1 { margin-bottom: var(--s-2); } .login-card .meta { margin-bottom: var(--s-5); } /* ===== JOURNEY CARD ===== */ .journey { display: grid; gap: var(--s-3); grid-template-columns: 1fr; align-items: stretch; /* both panels in a row match the tallest one's height */ } @media (min-width: 768px) { .journey { grid-template-columns: 1fr 1fr; } } .journey > div { display: flex; flex-direction: column; } .journey .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--fw-semibold); margin-bottom: var(--s-1); } .journey-panel { border-left: 3px solid var(--brand-accent); padding: var(--s-3) var(--s-4); background: var(--surface-hover); border-radius: 0 var(--r) var(--r) 0; flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; word-break: break-word; } .journey-panel.is-same { background: transparent; border-left-color: var(--border); color: var(--text-faint); } /* ===== CHAT ===== */ .chat-box { max-height: 480px; overflow-y: auto; background: #ece5dd; padding: var(--s-3); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s-1); border: 1px solid var(--border-soft); } .chat-msg { max-width: 78%; padding: var(--s-2) var(--s-3); border-radius: var(--r); font-size: var(--t-sm); line-height: 1.35; word-wrap: break-word; box-shadow: var(--sh-xs); } .chat-in { background: #ffffff; align-self: flex-start; border-top-left-radius: 2px; } .chat-out { background: #dcf8c6; align-self: flex-end; border-top-right-radius: 2px; } .chat-time { font-size: 10px; color: #888; margin-top: 2px; text-align: right; } /* ===== CUSTOM COMBOBOX (KAF Warehouse-style) Drop-in replacement for native
...
The companion JS in /static/app.js takes care of toggle / select / search / keyboard. */ .bl-select { position: relative; } .bl-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: 44px; padding: 10px var(--s-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); font: var(--fw-medium) var(--t-sm)/1.3 var(--font-sans); color: var(--text); text-align: left; cursor: pointer; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .bl-select-trigger:hover { border-color: var(--text-faint); } .bl-select.is-open .bl-select-trigger, .bl-select-trigger:focus-visible { outline: none; border-color: var(--brand-accent); box-shadow: var(--sh-focus); } .bl-select-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bl-select-label.is-placeholder { color: var(--text-faint); font-weight: var(--fw-regular); } .bl-chev { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 11px; color: var(--text-faint); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .bl-select.is-open .bl-chev { transform: rotate(180deg); color: var(--brand-accent); } .bl-select-menu { display: none; position: absolute; z-index: 200; top: calc(100% + 6px); left: 0; right: 0; min-width: 220px; padding: var(--s-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-lg); max-height: 380px; overflow: hidden; flex-direction: column; animation: blDropIn .14s var(--ease-out); } @keyframes blDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .bl-select-search { width: 100%; height: 34px; margin-bottom: var(--s-1); padding: 0 var(--s-2); background: var(--surface-hover); border: 1px solid var(--border-soft); border-radius: var(--r-sm); font-size: var(--t-xs); color: var(--text); min-height: 34px; } .bl-select-search::placeholder { color: var(--text-faint); } .bl-select-search:focus { outline: none; border-color: var(--brand-accent); box-shadow: var(--sh-focus); background: var(--surface); } .bl-select-options { overflow-y: auto; padding-right: 2px; } .bl-select-options:empty::after { content: "No matches"; display: block; padding: var(--s-3); color: var(--text-faint); font-size: var(--t-xs); text-align: center; } .bl-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + 6px); margin-bottom: 2px; background: transparent; border: none; border-radius: var(--r-sm); font: var(--fw-medium) var(--t-sm)/1.3 var(--font-sans); color: var(--text); text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .bl-opt > * { min-width: 0; } .bl-opt:hover, .bl-opt.is-keyboard { background: var(--surface-hover); color: var(--brand-primary); } .bl-opt.is-selected { background: var(--brand-accent-soft); color: var(--brand-primary); font-weight: var(--fw-semibold); } .bl-opt.is-selected::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: var(--r-pill); background: var(--brand-primary); } .bl-opt-group { padding: var(--s-3) var(--s-3) var(--s-1); font-size: 10px; font-weight: var(--fw-bold); color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border-soft); margin-bottom: var(--s-1); } .bl-opt-group:not(:first-child) { margin-top: var(--s-2); } .bl-hint { font-size: 11px; color: var(--text-muted); background: var(--surface-hover); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; font-weight: var(--fw-medium); } .bl-opt.is-selected .bl-hint { background: rgba(255,255,255,0.5); color: var(--brand-primary); } .bl-select.is-open .bl-select-menu { display: flex; } /* Ad grid (campaign drill-down) */ .ad-grid { display: grid; gap: var(--s-3); /* Auto-fill cards into 1/2/3/4 columns depending on viewport width. min 220px keeps thumbs legible on mobile; max 1fr fills wide screens. */ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: var(--s-2); } /* Cap at 4 columns on wide screens so 12-per-page pagination always lays out as 3 clean rows of 4 instead of 5+5+2 (which leaves dead space at the end of the last row). 4 also keeps each card wide enough for legible stats. */ @media (min-width: 1100px) { .ad-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ad-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm); display: flex; flex-direction: column; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); content-visibility: auto; /* Match the real rendered card height so the swap-in is invisible when content-visibility hydrates the card on scroll. */ contain-intrinsic-size: 0 360px; } .ad-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); } .ad-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--surface-hover); } .ad-thumb-placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: var(--t-xs); letter-spacing: 0.05em; text-transform: uppercase; } /* Clickable poster: button reset + play badge overlay for video creatives */ .ad-media { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: var(--surface-hover); cursor: zoom-in; position: relative; font: inherit; color: inherit; } .ad-media:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; } .ad-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); pointer-events: none; } .ad-play::before { content: ""; position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,0.45); z-index: -1; backdrop-filter: blur(2px); } /* Lightbox modal */ .ad-lightbox { position: fixed; inset: 0; background: rgba(15,15,18,0.92); display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 1000; padding: var(--s-4); } .ad-lightbox[hidden] { display: none; } .ad-lightbox-stage { /* Give the stage explicit working dimensions so even small thumbnail assets render at a usable size. The image/video inside is then sized with width:100% + object-fit:contain to fill it without distortion. */ width: min(90vw, 720px); max-width: min(90vw, 1100px); max-height: 80vh; display: flex; align-items: center; justify-content: center; position: relative; /* Spinner backdrop shown while iframe/video buffers. Sits behind the media. */ min-width: 280px; min-height: 280px; } .ad-lightbox-stage::before { content: ""; position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.15); border-top-color: var(--brand-accent, #c9a84c); animation: bl-spin 0.9s linear infinite; z-index: 0; } .ad-lightbox-stage > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .ad-lightbox-stage::before { animation-duration: 3s; } } .ad-lightbox-stage img, .ad-lightbox-stage video { width: 100%; height: auto; max-width: 100%; max-height: 80vh; object-fit: contain; display: block; border-radius: var(--r); box-shadow: 0 20px 60px rgba(0,0,0,0.5); background: #000; } .ad-lightbox-caption { color: #fff; margin-top: var(--s-3); font-size: var(--t-sm); max-width: 80vw; text-align: center; opacity: 0.85; } .ad-lightbox-close { position: absolute; top: var(--s-3); right: var(--s-3); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .ad-lightbox-close:hover { background: rgba(255,255,255,0.22); } .ad-meta { padding: var(--s-2); font-size: var(--t-sm); /* Flex column so each segment (header / campaign / funnel / stats / foot) has a predictable position. flex:1 on the card ensures the meta section fills available height when the surrounding grid stretches all cards to the tallest card's height. */ display: flex; flex-direction: column; gap: var(--s-1); flex: 1; } /* Header row: ad name on the left (truncates), badge on the right (never wraps to a new line - that's what pushed every segment out of alignment on card #2 in the screenshot). */ .ad-meta .row.between { gap: var(--s-1); margin-bottom: 0; flex-wrap: nowrap; align-items: center; min-height: 24px; } .ad-meta .row.between > b { font-size: var(--t-sm); line-height: 1.25; min-width: 0; /* allows the ellipsis to actually trigger inside flex */ flex: 1 1 auto; } .ad-meta b { font-size: var(--t-sm); line-height: 1.25; } .ad-meta .meta { font-size: 11px; } /* Campaign-name link: 2-line clamp + reserved 2-line height so cards with short campaign names still match cards with long names; this is what keeps every card's FUNNEL row at the same Y coordinate across the grid. */ .ad-meta .campaign-link { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; height: 2.6em; /* fixed = 2 lines, not min-height */ margin-bottom: 0; } .ad-card-foot { /* Single tiny meta strip for secondary stats (clicks + conv. API + platform). margin-top:auto pins this to the bottom of the flex column even when the card stretches taller than its content (because a sibling card in the grid row is taller). Keeps the strip at the same Y across the row. */ display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; padding-top: var(--s-2); border-top: 1px dashed var(--border-soft); font-size: 11px; color: var(--text-muted); line-height: 1.4; } .ad-card-foot b { color: var(--text); font-weight: var(--fw-semibold); } /* Per-ad CRM-to-platform attribution match-rate pill. Lives inside .ad-card-foot. Colour signals attribution health: ok (>=30%) — green, healthy clinic-CTWA match warn (10-29%) — amber, some leakage / view-through dominant bad (<10%) — red, likely tracking break on that destination URL na (0 evts) — neutral, nothing to compare against */ .match-rate { display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 6px; border-radius: 99px; font-size: 10px; line-height: 1.5; font-weight: var(--fw-medium); letter-spacing: 0.02em; } .match-rate b { font-weight: var(--fw-bold); } .match-rate-ok { background: var(--ok-bg, #DCFCE7); color: var(--ok, #166534); } .match-rate-ok b { color: var(--ok, #166534); } .match-rate-warn { background: var(--warn-bg, #FEF3C7); color: var(--warn, #92400E); } .match-rate-warn b { color: var(--warn, #92400E); } .match-rate-bad { background: var(--danger-bg, #FEE2E2); color: var(--danger, #991B1B); } .match-rate-bad b { color: var(--danger, #991B1B); } .match-rate-na { background: var(--surface-hover); color: var(--text-muted); } .match-rate-na b { color: var(--text-muted); } .ad-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-1); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border-soft); font-size: 12px; } .ad-stats > div { display: flex; flex-direction: column; align-items: center; gap: 1px; } .ad-stats .label { font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .ad-stats .t-num { font-weight: var(--fw-semibold); color: var(--text); font-size: 13px; line-height: 1.1; } /* Ad funnel stripe (Creative Library) */ .ad-funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: var(--s-2); } .ad-funnel > div { display: flex; flex-direction: column; align-items: center; gap: 0; background: var(--surface-hover); padding: 4px 2px; border-radius: 4px; font-size: 12px; } .ad-funnel .label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .ad-funnel .t-num { color: var(--brand-primary); font-weight: var(--fw-semibold); font-size: 13px; line-height: 1.1; } .ad-funnel .t-num b { color: var(--brand-primary); } /* ===== Per-agent identity ===== Agent picker (post-login) + acting-as pill in nav + locked logged-by field. */ /* Inline error banner on the picker (wrong PIN / must pick / etc.) */ .login-error { margin: var(--s-3) 0; padding: var(--s-2) var(--s-3); background: #fff4f4; color: #a83a3a; border-left: 3px solid #d04848; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: var(--fw-semibold); } :root[data-theme="dark"] .login-error { background: #2a1414; color: #ef7d7d; } /* Picker shown after main password login (/agent/select) */ .agent-picker-card { max-width: 480px; padding: var(--s-5); } .agent-pick-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); } .agent-pick { margin: 0; } .agent-pick-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: stretch; } .agent-pick-btn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--s-3) var(--s-4); background: var(--surface-hover); border: 1px solid var(--border-soft); border-radius: var(--r-sm); cursor: pointer; font: inherit; color: inherit; text-align: left; transition: border-color var(--dur), background var(--dur); } .agent-pick-btn:hover { border-color: var(--brand-accent); background: var(--surface); } .agent-pick-name { font-size: var(--t-md); font-weight: var(--fw-semibold); } .agent-pick-role { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .agent-pin-field { display: flex; gap: var(--s-2); margin-top: var(--s-2); width: 100%; } .agent-pin-field input { flex: 1; letter-spacing: 0.3em; text-align: center; font-size: var(--t-md); min-height: 40px; } /* "Acting as X · switch" pill in the top nav */ .acting-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--brand-accent-soft, #e8d48b) !important; font-size: 12px; text-decoration: none; margin-right: 4px; } .acting-pill:hover { background: rgba(255,255,255,0.16); } .acting-name { font-weight: var(--fw-semibold); color: #fff; } .acting-pill .meta { color: rgba(255,255,255,0.6); font-size: 10px; } /* Read-only "Logged by: X" pill on the activity form (when session has identity) */ .logged-by-pill { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-hover); border: 1px dashed var(--border); border-radius: var(--r-sm); font-size: var(--t-sm); } .logged-by-pill a { color: var(--brand-primary); font-size: 11px; } /* Settings PIN chips */ .chip-ok { background: #e6f4ec; color: #1f7a4d; } .chip-muted { background: var(--surface-hover); color: var(--text-muted); } /* ===== Validation page health visuals ===== Reusable health indicators (bars, pills, colors) for any page that needs to show "good / warn / bad" at a glance. */ .health-bar { position: relative; height: 18px; background: var(--surface-hover); border-radius: 4px; overflow: hidden; min-width: 80px; } .health-fill { height: 100%; border-radius: 4px; transition: width var(--dur) var(--ease-out); } .health-bar-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text); text-shadow: 0 1px 2px rgba(255,255,255,0.6); } :root[data-theme="dark"] .health-bar-label { text-shadow: 0 1px 2px rgba(0,0,0,0.6); } .health-red { background: linear-gradient(90deg, #d04848, #ef7d7d); } .health-amber { background: linear-gradient(90deg, #e5a437, #f0b855); } .health-green { background: linear-gradient(90deg, #22a06b, #6fce8d); } .health-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: var(--fw-bold); font-size: var(--t-lg); } .health-pill.health-red { background: #fff4f4; color: #a83a3a; } .health-pill.health-amber { background: #fffaef; color: #946012; } .health-pill.health-green { background: #f1f9f3; color: #15724b; } :root[data-theme="dark"] .health-pill.health-red { background: #2a1414; color: #ef7d7d; } :root[data-theme="dark"] .health-pill.health-amber { background: #2a2010; color: #f0b855; } :root[data-theme="dark"] .health-pill.health-green { background: #0f2a1d; color: #6fce8d; } /* EMQ coverage rows (label / bar / count) */ .emq-list { display: flex; flex-direction: column; gap: var(--s-2); } .emq-row { display: grid; grid-template-columns: 120px 1fr 110px; gap: var(--s-3); align-items: center; } .emq-label { font-weight: var(--fw-semibold); font-size: var(--t-sm); } .emq-bar { height: 8px; background: var(--surface-hover); border-radius: 999px; overflow: hidden; } .emq-fill { height: 100%; border-radius: 999px; transition: width var(--dur) var(--ease-out); } .emq-num { text-align: right; font-family: var(--font-mono, monospace); font-size: var(--t-sm); } @media (max-width: 640px) { .emq-row { grid-template-columns: 100px 1fr 80px; gap: var(--s-2); } .emq-label { font-size: 11px; } } /* Collapsible mini-cards for low-priority breakdown tables. Used inside the validation page "Breakdowns" grid. */ .card-mini { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); align-self: start; /* don't stretch to tallest sibling in grid */ } .card-mini > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-2); user-select: none; padding-bottom: var(--s-2); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--s-2); } .card-mini > summary::before { content: "\25B8"; /* black right-pointing small triangle */ font-size: 11px; color: var(--text-faint); transition: transform var(--dur); display: inline-block; width: 12px; } .card-mini[open] > summary::before { transform: rotate(90deg); } .card-mini > summary::-webkit-details-marker { display: none; } .card-mini[open] > summary { border-bottom-color: var(--border); } .card-mini:not([open]) > summary { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .card-mini table { width: 100%; margin: 0; } .card-mini td { padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; line-height: 1.3; } .card-mini tr:last-child td { border-bottom: 0; } .card-mini td.r { text-align: right; } /* Wrapper card that hosts the breakdown grid - gives the orphan mini-cards visual context (title + section frame) instead of floating below the EMQ. */ .breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); align-items: start; } /* Scope matrix: per-agent menu permissions toggle grid */ .scope-matrix { width: 100%; } .scope-matrix th, .scope-matrix td { padding: var(--s-2) var(--s-3); vertical-align: middle; } .scope-matrix th { white-space: nowrap; } .scope-matrix tbody tr:hover { background: var(--surface-hover); } /* iOS-style toggle switch (re-used anywhere we want a checkbox to feel solid). Hidden checkbox + visible slider track. Keyboard-accessible by virtue of the underlying input. */ .scope-toggle { display: inline-flex; align-items: center; cursor: pointer; position: relative; } .scope-toggle input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .scope-toggle-slider { width: 36px; height: 20px; background: var(--border); border-radius: 999px; position: relative; transition: background var(--dur); } .scope-toggle-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--dur); box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .scope-toggle input:checked + .scope-toggle-slider { background: var(--brand-accent, #c9a84c); } .scope-toggle input:checked + .scope-toggle-slider::before { transform: translateX(16px); } .scope-toggle input:focus-visible + .scope-toggle-slider { box-shadow: 0 0 0 3px rgba(201,168,76,0.4); } :root[data-theme="dark"] .scope-toggle-slider { background: #2c3a52; } :root[data-theme="dark"] .scope-toggle input:checked + .scope-toggle-slider { background: var(--brand-accent, #c9a84c); } /* ===== Searchable filter dropdowns ===== Row of pill-style
elements. Each opens a popover containing a search input + scrollable option list. Used for Source / Campaign / Category / Sub-specialty / City - any list long enough to need search. */ .filter-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-2); } .filter-chip { position: relative; /* anchors the absolutely-positioned panel */ } .filter-chip > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; white-space: nowrap; user-select: none; transition: border-color var(--dur), background var(--dur); } .filter-chip > summary::-webkit-details-marker { display: none; } .filter-chip > summary:hover { border-color: var(--brand-accent); } .filter-chip.is-active > summary { background: var(--brand-primary); color: var(--text-on-primary, #fff); border-color: var(--brand-primary); } .filter-chip.is-active > summary .filter-chip-label { color: rgba(255,255,255,0.7); } .filter-chip-label { color: var(--text-muted); font-weight: var(--fw-medium); } .filter-chip-value { max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .filter-chip-chev { font-size: 10px; opacity: 0.7; transition: transform var(--dur); } .filter-chip[open] .filter-chip-chev { transform: rotate(180deg); } .filter-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 280px; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--sh-lg); padding: var(--s-2); } .filter-panel > .filter-search { margin-bottom: var(--s-2); } .filter-search { width: 100%; min-height: 32px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 12px; background: var(--surface-hover); } .filter-search:focus { border-color: var(--brand-accent); outline: 0; } /* IMPORTANT: do NOT use flex on the scroll container. Inside the popover (which is itself a flex column) a flex child with many sub-children gets compressed instead of overflowing - making every option ~5px tall and unreadable. Plain block layout + overflow:auto = each option keeps its natural height and the container scrolls when they don't all fit. */ .filter-opts { max-height: 320px; overflow-y: auto; display: block; } .filter-opt { display: block; padding: 8px 12px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: 13px; line-height: 1.4; /* Long campaign names wrap to 2 lines max instead of getting ellipsised so the operator can read enough to pick the right one. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .filter-opt:hover { background: var(--surface-hover); } .filter-opt.is-selected { background: var(--brand-primary); color: var(--text-on-primary, #fff); font-weight: var(--fw-semibold); } /* Custom date range form inside the Created / Last interaction filter chips. Sits below the preset options, separated by a labelled divider. */ .filter-panel-date { min-width: 320px; } .filter-custom-divider { margin: var(--s-2) 0 var(--s-1); padding: var(--s-1) var(--s-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-top: 1px dashed var(--border-soft); font-weight: var(--fw-semibold); } .filter-custom-range { padding: var(--s-1) var(--s-2) var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); } .filter-custom-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } .filter-custom-label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .filter-custom-label input[type="date"] { font-size: var(--t-sm); padding: 6px var(--s-2); min-height: 36px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: var(--font-sans); } .filter-custom-label input[type="date"]:focus { border-color: var(--brand-accent); outline: none; box-shadow: var(--sh-focus); } .filter-custom-actions { display: flex; gap: var(--s-2); align-items: center; } .filter-custom-actions .btn { min-height: 32px; padding: var(--s-1) var(--s-3); font-size: var(--t-xs); } .filter-opt-clear { border-bottom: 1px dashed var(--border-soft); margin-bottom: 4px; padding-bottom: 8px; color: var(--text-muted); } .filter-opt.filter-hidden { display: none; } /* Active-filter pill row (shows currently applied filters with X to remove) */ .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--s-3); padding: 6px 10px; background: var(--surface-hover); border-radius: var(--r-sm); border: 1px dashed var(--border-soft); } .active-filter-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--brand-accent-soft, #e8d48b); color: #1a1a1a; font-size: 11px; text-decoration: none; transition: background var(--dur); } .active-filter-pill:hover { background: var(--brand-accent, #c9a84c); } .active-filter-pill .meta { color: rgba(0,0,0,0.6); } .active-filter-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.12); font-size: 14px; line-height: 1; font-weight: var(--fw-bold); } .active-filter-clear { margin-left: auto; font-size: 11px; color: var(--text-muted); text-decoration: underline; } /* ===== Next-action pill + filter chips ===== Per-row "what needs to be done NEXT for this lead" indicator, colour-coded by urgency. Replaces a stage-position dot view because the stage badge to the left already shows where they are in the funnel - this column shows what the agent should DO. */ .next-action { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.01em; border-left: 3px solid; white-space: nowrap; max-width: 100%; } .next-action-red { border-left-color: #d04848; color: #a83a3a; background: #fff4f4; } .next-action-amber { border-left-color: #e5a437; color: #946012; background: #fffaef; } .next-action-green { border-left-color: #22a06b; color: #15724b; background: #f1f9f3; } .next-action-done { border-left-color: var(--border); color: var(--text-muted); background: var(--surface-hover); } /* Filter chip row above the contacts table - clickable counters that scope the list to leads needing a specific action right now. */ .next-chip-row { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3); background: var(--surface-hover); border-radius: var(--r-sm); border: 1px solid var(--border-soft); } .next-chip-row > a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: var(--fw-semibold); text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border-soft); border-left-width: 3px; transition: background var(--dur), border-color var(--dur); white-space: nowrap; } .next-chip-row > a:hover { background: var(--surface-hover); } .next-chip-row > a.active { background: var(--brand-primary); color: var(--text-on-primary, #fff); border-color: var(--brand-primary); } .next-chip-row > a.active .meta { color: rgba(255,255,255,0.7); } .next-chip-red { border-left-color: #d04848 !important; } .next-chip-amber { border-left-color: #e5a437 !important; } .next-chip-green { border-left-color: #22a06b !important; } .next-chip-done { border-left-color: var(--border) !important; color: var(--text-muted); } /* ===== Activity-age dot (Phase 4) ===== */ .rag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex-shrink: 0; } .rag-dot-red { background: #d04848; box-shadow: 0 0 0 2px rgba(208,72,72,0.18); } .rag-dot-amber { background: #e5a437; } .rag-dot-green { background: #22a06b; } .rag-dot-grey { background: var(--border); } .rag-dot-done { background: transparent; border: 1px solid var(--border); } /* ===== Activity dashboard (Phase 4) ===== */ .rag-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); } @media (min-width: 640px) { .rag-strip { grid-template-columns: repeat(4, 1fr); } } .rag { padding: var(--s-3); border-radius: var(--r-sm); text-align: center; border-left: 4px solid var(--border); } .rag-num { font-size: 28px; font-weight: var(--fw-bold); line-height: 1; font-family: var(--font-display); } .rag-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; } .rag-red { background: #fff4f4; border-left-color: #d04848; } .rag-amber { background: #fffaef; border-left-color: #e5a437; } .rag-green { background: #f1f9f3; border-left-color: #22a06b; } .rag-grey { background: var(--surface-hover); border-left-color: var(--border); } .funnel-chart { display: flex; flex-direction: column; gap: var(--s-2); } .funnel-row { display: grid; grid-template-columns: 100px 1fr 80px; align-items: center; gap: var(--s-2); font-size: var(--t-sm); } .funnel-label { font-weight: var(--fw-semibold); } .funnel-bar { height: 18px; background: var(--surface-hover); border-radius: 999px; overflow: hidden; } .funnel-fill { height: 100%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent, #c9a84c)); transition: width 0.4s var(--ease-out); } .funnel-num { text-align: right; } .agent-bar { height: 8px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); border-radius: 4px; width: var(--w, 0%); } /* ===== In-app confirm modal ===== Replaces the browser's native confirm() for funnel actions. Styled to match the rest of the CRM (gold accent, brand colors, dark-mode aware). The JS in app.js shows it when a form with [data-confirm-fire] submits. */ .confirm-modal { position: fixed; inset: 0; background: rgba(13, 27, 42, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: var(--s-4); animation: confirm-fade 0.15s var(--ease-out); } .confirm-modal[hidden] { display: none; } @keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } } .confirm-card { background: var(--surface); color: var(--text); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: var(--s-5); max-width: 460px; width: 100%; text-align: center; animation: confirm-pop 0.18s var(--ease-out); } @keyframes confirm-pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .confirm-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff4f4; color: #d04848; font-size: 32px; margin: 0 auto var(--s-3); } :root[data-theme="dark"] .confirm-icon { background: #2a1414; color: #ef7d7d; } .confirm-title { font-size: var(--t-lg); margin: 0 0 var(--s-2); font-weight: var(--fw-bold); } .confirm-body { margin: 0 0 var(--s-2); font-size: var(--t-md); line-height: 1.5; } .confirm-warn { margin: 0 0 var(--s-4); font-size: var(--t-sm); color: var(--text-muted); line-height: 1.5; } .confirm-actions { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; } .confirm-actions .btn { min-width: 130px; } /* Modal in "lost" mode: red CTA so the irreversible nature is obvious */ .confirm-modal.is-lost .confirm-actions .btn-accent { background: var(--danger, #d04848); color: #fff; } :root[data-theme="dark"] .confirm-modal.is-lost .confirm-actions .btn-accent { background: #ef7d7d; color: #1a1a1a; } /* ===== Funnel-action sequential locking ===== Past-stage actions get a grayed-out treatment so the agent can't re-fire CAPI events for stages the contact has already passed. Visual: dimmed summary, disabled button, "already done" tag. */ /* DONE/locked stages: dimmed appearance but EXPANDABLE so the agent can review what was captured. The summary stays clickable; the inner form is hidden (replaced by the read-only "captured" card). */ .funnel-locked > summary { opacity: 0.55; cursor: pointer; user-select: none; } .funnel-locked > summary:hover { opacity: 0.75; } .funnel-locked[open] > summary { opacity: 0.75; } .funnel-locked > summary::-webkit-details-marker { color: var(--text-faint); } .funnel-locked form { display: none; } /* hide form contents entirely */ .funnel-done-tag { display: inline-block; margin-left: var(--s-2); padding: 1px 8px; font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; background: var(--surface-hover); color: var(--text-muted); border-radius: 999px; border: 1px solid var(--border-soft); } button[disabled][aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } /* ===== Edit-contact form (manual field entry) ===== Inline collapsible card on the contact detail page. Lets the agent hand-fill any missing field that the workflow didn't capture (a typed phone number, manual email after a chat reply, a corrected campaign name, etc.). */ .edit-contact-card { padding: var(--s-4); } .edit-contact-card > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--s-3); padding: 0; border: 0; margin: 0; } .edit-contact-card > summary::-webkit-details-marker { display: none; } .edit-contact-card > summary::after { content: "\25BE"; /* down-pointing triangle - flips on open */ margin-left: auto; color: var(--text-faint); font-size: 14px; transition: transform var(--dur); } .edit-contact-card[open] > summary::after { transform: rotate(180deg); } .edit-contact-form { margin-top: var(--s-3); } /* Each group inside the form is its own collapsible section */ .edit-section { border-top: 1px solid var(--border-soft); padding: var(--s-3) 0; } .edit-section:first-child { border-top: 0; padding-top: 0; } .edit-section > summary { cursor: pointer; list-style: none; padding: var(--s-2) 0; display: flex; align-items: center; gap: var(--s-2); user-select: none; } .edit-section > summary::-webkit-details-marker { display: none; } .edit-section > summary::before { content: "\25B8"; font-size: 10px; color: var(--text-faint); transition: transform var(--dur); display: inline-block; width: 12px; } .edit-section[open] > summary::before { transform: rotate(90deg); } .edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); margin-top: var(--s-2); } /* New row-based layout for the personal info form. Groups related fields (name / demographics / contact / location) into their own rows so the form reads top-to-bottom like a card, not a flat grid of unrelated boxes. */ .edit-rows { display: flex; flex-direction: column; gap: var(--s-3); } .edit-row { display: grid; gap: var(--s-3); grid-template-columns: 1fr; } @media (min-width: 640px) { .edit-row-2 { grid-template-columns: 1fr 1fr; } .edit-row-3 { grid-template-columns: 1fr 1fr 1fr; } } .field-edit.field-full { grid-column: 1 / -1; } /* Small "auto-enrich in progress" hint on the Attribution captured card. Shown when we have an ad_id but campaign/ad names are blank - the intake-time or page-view enrich is fetching them right now. */ .attr-enrich-hint { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--info-bg); color: var(--info); border-left: 3px solid var(--info); border-radius: var(--r-sm); font-size: 11px; font-style: italic; } /* Phone-chips widget: replace comma-separated text with a chip list + add btn */ .phone-list { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); } .phone-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; } .phone-chips:empty { display: none; } .phone-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; background: var(--surface-hover); border: 1px solid var(--border-soft); border-radius: 999px; font-family: var(--font-mono, monospace); font-size: 12px; } .phone-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 0; } .phone-chip-x:hover { background: var(--danger-bg); color: var(--danger); } .phone-add { display: flex; gap: var(--s-2); align-items: center; } .phone-add input { flex: 1; min-height: 32px; } .phone-add .btn { flex-shrink: 0; } :root[data-theme="dark"] .phone-list { background: var(--bg); } .field-edit label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .field-edit input, .field-edit select, .field-edit textarea { width: 100%; min-height: 36px; padding: 6px 10px; font-size: var(--t-sm); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); } .field-edit input:focus, .field-edit select:focus { border-color: var(--brand-accent); outline: 2px solid rgba(201,168,76,0.18); outline-offset: 0; } /* Missing-field highlight: amber left-border + tag chip */ .field-edit.is-missing input, .field-edit.is-missing select { border-color: #e5a437; background: #fffaef; } :root[data-theme="dark"] .field-edit.is-missing input, :root[data-theme="dark"] .field-edit.is-missing select { background: #2a2010; } .field-missing-tag { display: inline-block; padding: 1px 6px; border-radius: 999px; background: #fffaef; color: #946012; font-size: 9px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; } :root[data-theme="dark"] .field-missing-tag { background: #2a2010; color: #f0b855; } /* ===== Sales activity timeline (Phase 3) ===== Fixed icon column (28px) + flexible body. Within each row the head line uses flex layout so label/agent/timestamp stay on one line on desktop and wrap predictably on mobile. */ .act-timeline { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: flex; flex-direction: column; gap: var(--s-2); } .act-item { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--surface-hover); border-radius: var(--r-sm); border-left: 3px solid var(--border-soft); align-items: start; } .act-grp-communication { border-left-color: #4a8aff; } .act-grp-sales { border-left-color: var(--brand-accent, #c9a84c); } .act-grp-clinic { border-left-color: #22a06b; } .act-grp-money { border-left-color: #d04848; } .act-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 14px; line-height: 1; flex-shrink: 0; } .act-body { min-width: 0; } /* Head: label on the left, timestamp pushed to the right when room allows, wraps below the label on narrow screens via flex-wrap. */ .act-head { font-size: var(--t-sm); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .act-head > b { flex-shrink: 0; } .act-when { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; margin-left: auto; /* push timestamp to right on the same row */ white-space: nowrap; } .act-text { margin-top: 4px; font-size: var(--t-sm); line-height: 1.4; color: var(--text); white-space: pre-wrap; word-break: break-word; } /* ===== Library toolbar (filter + sort/size) ===== Compact toolbar layout - reduces filter section height from ~400px to ~180px so the first row of cards is visible above the fold on most laptops. */ /* Combined platform + status pills on one line, divided by a thin separator. */ .lib-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); } .lib-filter-row .tabs { margin: 0; } .lib-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; } @media (max-width: 639px) { .lib-divider { display: none; } } /* Search input (expands) + sort/size (right) on one line. */ .lib-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); } .lib-search-form { flex: 1 1 280px; display: flex; align-items: center; gap: var(--s-2); margin: 0; } .lib-search-form input[name="q"] { flex: 1; min-width: 0; } /* Sort + per-page selectors - inline label + select pairs that NEVER stack. */ .lib-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; flex-shrink: 0; } .lib-controls .ctrl { display: inline-flex; align-items: center; gap: 6px; } .lib-controls .ctrl label { font-size: 10px; color: var(--text-muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; margin: 0; } .lib-controls .ctrl select { min-height: 32px; padding: 4px 22px 4px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; } /* ===== Per-lead creative attribution (Phase 2) ===== Small clickable tiles showing every ad the lead touched. All tiles in a row align at every horizontal line: thumb top, label, ad-name, meta line. Fixed segment heights guarantee alignment regardless of text-length variation across tiles (FIRST vs FIRST + LAST, short ad-name vs long). */ .cred-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-top: var(--s-2); align-items: start; /* tile heights stay natural - they're identical */ } .cred-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cred-tile .ad-media, .cred-tile .ad-thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; } .cred-tile .ad-media:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } .cred-tile .ad-thumb { object-fit: cover; } .cred-tile .ad-play { font-size: 18px; } .cred-tile .ad-play::before { width: 36px; height: 36px; } .cred-meta { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.25; min-width: 0; } /* Each text row inside cred-meta gets a FIXED height so empty values still reserve their row, keeping the bottom edges of every tile in the grid row on the same Y line. */ .cred-meta .cred-label { height: 16px; line-height: 14px; } .cred-meta b { font-size: 11px; font-weight: var(--fw-semibold); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; height: 1.25em; } .cred-meta .meta { font-size: 10px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; height: 1.25em; } .cred-label { display: inline-flex; align-items: center; width: fit-content; padding: 1px 6px; border-radius: 999px; background: var(--surface-hover); color: var(--text-muted); font-size: 9px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .cred-label-first, .cred-label-first-last { background: var(--brand-primary); color: var(--text-on-primary, #fff); } .cred-label-last { background: var(--brand-accent, #c9a84c); color: #1a1a1a; } .cred-stub .ad-thumb-placeholder { font-size: 10px; } .cred-id { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; color: var(--text-muted); } /* Contacts table: on mobile, hide secondary columns so Name + Phone + Stage fit without horizontal scroll. Lifecycle/Category/Value/Created/Source are visible on tablet+ where the table has room to breathe. */ @media (max-width: 639px) { .t-wrap table thead th:nth-child(n+4), .t-wrap table tbody td:nth-child(n+4) { display: none; } .t-wrap table thead th:nth-child(3), .t-wrap table tbody td:nth-child(3) { padding-left: 4px; padding-right: 4px; } } /* ===== Contact attribution definition list ===== Desktop: 2-column grid (label | value, label | value). Mobile (<640px): stacked - each label sits on its own row above its value, so long values like click IDs and source URLs can break across without colliding with the next label. */ .attr-dl { display: grid; gap: var(--s-2) var(--s-4); font-size: var(--t-sm); } @media (min-width: 640px) { .attr-dl { grid-template-columns: 1fr 1fr; } } .attr-row { display: grid; gap: 2px 12px; grid-template-columns: 1fr; padding: var(--s-2) 0; border-bottom: 1px solid var(--border-soft); } .attr-row:last-child { border-bottom: 0; } @media (min-width: 480px) { .attr-row { grid-template-columns: 130px 1fr; align-items: baseline; } } .attr-label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--fw-semibold); } .attr-val { word-break: break-word; } .attr-val.mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--text); } .attr-val a { color: var(--brand-primary); text-decoration: underline; } /* ===== Creative Library: warming/loading screen ===== */ .lib-loading { padding: var(--s-5) 0; } .lib-loading-head { display: flex; gap: var(--s-4); align-items: flex-start; margin-bottom: var(--s-5); } .lib-loading-spinner { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--surface-hover); border-top-color: var(--brand-primary); animation: bl-spin 0.9s linear infinite; } @keyframes bl-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .lib-loading-spinner { animation-duration: 3s; } } .lib-loading-bar { height: 8px; width: 100%; background: var(--surface-hover); border-radius: 999px; overflow: hidden; margin-bottom: var(--s-3); } .lib-loading-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-soft, var(--brand-primary))); border-radius: 999px; transition: width 0.4s var(--ease-out); } .lib-loading-stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--s-5); } @media (min-width: 640px) { .lib-loading-stats { grid-template-columns: repeat(5, 1fr); } } .lib-loading-stats > div { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3); background: var(--surface-hover); border-radius: var(--r-sm); border: 1px solid var(--border-soft); } .lib-loading-stats .label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .lib-loading-stats .t-num { font-size: var(--t-md); font-weight: var(--fw-semibold); } .lib-loading-steps { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-2); } .lib-loading-steps li { padding: var(--s-2) var(--s-3) var(--s-2) 38px; background: var(--surface-hover); border: 1px solid var(--border-soft); border-radius: var(--r-sm); color: var(--text-muted); position: relative; font-size: var(--t-sm); transition: background 0.2s, color 0.2s; } .lib-loading-steps li::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); } .lib-loading-steps li.is-active { background: rgba(0,0,0,0.02); border-color: var(--brand-primary); color: var(--text); } .lib-loading-steps li.is-active::before { border-color: var(--brand-primary); background: var(--brand-primary); box-shadow: 0 0 0 4px rgba(0,0,0,0.05); animation: bl-pulse 1.4s ease-in-out infinite; } @keyframes bl-pulse { 50% { box-shadow: 0 0 0 8px rgba(0,0,0,0.08); } } .lib-loading-steps li.is-done { color: var(--text); } .lib-loading-steps li.is-done::before { content: "\2713"; /* ✓ */ border-color: var(--ok, #22a06b); background: var(--ok, #22a06b); color: #fff; font-size: 11px; font-weight: 700; line-height: 12px; display: flex; align-items: center; justify-content: center; } .lib-loading-current { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-sm); } .lib-loading-current .label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .lib-loading-current .t-num { font-size: var(--t-sm); font-weight: var(--fw-semibold); font-family: var(--font-mono, ui-monospace, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Settings page */ .settings-section { margin-bottom: var(--s-6); } .settings-section h3 { display: flex; align-items: center; gap: var(--s-2); } .inline-form { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: var(--s-3); background: var(--surface-hover); border: 1px dashed var(--border); border-radius: var(--r); margin-top: var(--s-3); } .inline-form input, .inline-form select { min-height: 36px; } .inline-form .full-w { grid-column: 1 / -1; } .chip { display: inline-flex; align-items: center; padding: 2px var(--s-2); background: var(--info-bg); color: var(--info); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--fw-semibold); margin-right: var(--s-1); } /* ===== LEGACY ALIASES (keep older templates working) ===== */ .btn-gold { background: var(--brand-accent); color: var(--brand-primary); } .btn-gold:hover { background: var(--brand-accent-soft); } .flex { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .grid { display: grid; gap: var(--s-3); } .login-box { max-width: 420px; margin: var(--s-16) auto; background: var(--surface); padding: var(--s-8) var(--s-6); border-radius: var(--r-lg); border: 1px solid var(--border-soft); box-shadow: var(--sh-lg); text-align: center; } .login-box h1 { color: var(--brand-primary); margin-bottom: var(--s-3); } .login-box input { margin-bottom: var(--s-3); } /* ===== UTILITIES ===== */ pre { background: #0f1620; color: #cde0f4; padding: var(--s-3); border-radius: var(--r); font-size: var(--t-xs); overflow: auto; font-family: var(--font-mono); } hr { border: none; border-top: 1px solid var(--border-soft); margin: var(--s-5) 0; } .empty-state { text-align: center; padding: var(--s-12) var(--s-4); color: var(--text-muted); } .empty-state-illustration { width: 96px; height: 96px; margin: 0 auto var(--s-4); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, var(--brand-accent-soft), var(--surface)); color: var(--brand-primary); font-size: 40px; opacity: 0.85; box-shadow: var(--sh-md); border: 1px solid var(--border-soft); } .empty-state h3 { color: var(--text); margin-bottom: var(--s-2); } .empty-state p { max-width: 44ch; margin: 0 auto var(--s-4); } /* ===== BREADCRUMB ===== */ .breadcrumb { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-muted); margin-bottom: var(--s-4); flex-wrap: wrap; } .breadcrumb a { color: var(--brand-primary); text-decoration: none; font-weight: var(--fw-medium); padding: 2px var(--s-1); border-radius: var(--r-sm); transition: background var(--dur) var(--ease-out); } .breadcrumb a:hover { background: var(--surface-hover); } .breadcrumb .sep { color: var(--text-faint); font-size: 14px; } .breadcrumb .current { color: var(--text); font-weight: var(--fw-semibold); max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== STAGE-AWARE CTA / next-action emphasis ===== */ .btn-suggest { position: relative; background: var(--brand-accent); color: var(--brand-primary); box-shadow: var(--sh-md); } .btn-suggest::after { content: "Next"; position: absolute; top: -8px; right: -8px; background: var(--ok); color: white; font-size: 9px; font-weight: var(--fw-bold); padding: 2px 6px; border-radius: var(--r-pill); letter-spacing: 0.04em; text-transform: uppercase; } .btn-suggest:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); } /* ===== BRAND LOGO IMG SLOT ===== */ img.brand-logo { display: block; height: 36px; width: auto; max-width: 160px; } /* ===== SR-ONLY (accessible labels) ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================= CALENDAR VIEW (/calendar) Month grid with per-day cells, doctor-coloured pills, weekend tint, focus-day expansion below the grid. Mobile collapses to a single column. ========================================================================= */ .cal-chip-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .cal-chip-group { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; } .cal-chip-label { font-size: var(--t-xs); color: var(--text-muted); margin-right: var(--s-1); font-weight: var(--fw-semibold); } .cal-chip { --chip-color: var(--text-faint); display: inline-flex; align-items: center; gap: 6px; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--surface-hover); border: 1px solid var(--border); color: var(--text); font-size: var(--t-xs); font-weight: var(--fw-medium); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); min-height: 28px; } .cal-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-color); } .cal-chip:hover { background: var(--surface); transform: translateY(-1px); } .cal-chip.active { background: var(--brand-primary); color: white; border-color: var(--brand-primary); } .cal-grid-card { padding: 0; overflow: hidden; } .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-hover); border-bottom: 1px solid var(--border); } .cal-weekday { padding: var(--s-2) var(--s-2); font-size: var(--t-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); text-align: center; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--border); gap: 1px; } .cal-cell { background: var(--surface); min-height: 110px; padding: 6px 6px 4px; display: flex; flex-direction: column; text-decoration: none; color: var(--text); transition: background 0.12s; position: relative; } .cal-cell:hover { background: var(--surface-hover); } .cal-cell.out { background: var(--bg); color: var(--text-faint); } .cal-cell.out .cal-cell-day { opacity: 0.5; } .cal-cell.today .cal-cell-day { background: var(--brand-accent); color: var(--brand-primary); border-radius: var(--r-pill); padding: 1px 8px; font-weight: var(--fw-bold); display: inline-block; } .cal-cell.focus { box-shadow: inset 0 0 0 2px var(--brand-primary); } .cal-cell.has-bookings { background: linear-gradient(to bottom, var(--surface-hover) 0%, var(--surface) 30%); } /* UAE weekend tint: Friday (col 6) + Saturday (col 7) get a subtle wash so the working week (Sun-Thu) reads as the primary booking surface. */ .cal-grid > .cal-cell:nth-child(7n+6), .cal-grid > .cal-cell:nth-child(7n) { background-color: color-mix(in srgb, var(--bg) 40%, var(--surface)); } .cal-grid > .cal-cell.has-bookings:nth-child(7n+6), .cal-grid > .cal-cell.has-bookings:nth-child(7n) { background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 30%, var(--surface-hover)) 0%, color-mix(in srgb, var(--bg) 30%, var(--surface)) 30%); } .cal-cell-day { font-size: var(--t-sm); font-weight: var(--fw-semibold); margin-bottom: var(--s-1); align-self: flex-start; line-height: var(--lh-snug); } .cal-cell-bookings { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden; } .cal-pill { --pill-color: var(--text-muted); display: flex; align-items: center; gap: var(--s-1); padding: 3px var(--s-2); border-radius: var(--r-sm); /* Solid fallback for older Safari (pre-16.4); color-mix overrides on capable browsers */ background: var(--surface-hover); background: color-mix(in srgb, var(--pill-color) 15%, var(--surface)); border-left: 3px solid var(--pill-color); font-size: var(--t-xs); line-height: var(--lh-snug); color: var(--text); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: background var(--dur-fast) var(--ease-out); min-height: 22px; } .cal-pill:hover { background: color-mix(in srgb, var(--pill-color) 25%, var(--surface)); } .cal-pill.st-cancelled, .cal-pill.st-no_show { opacity: 0.55; text-decoration: line-through; } .cal-pill.st-showed_up { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); border-left-color: var(--ok); } .cal-pill-time { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } .cal-pill-name { overflow: hidden; text-overflow: ellipsis; } .cal-pill.more { background: transparent; border-left: 3px solid var(--text-faint); color: var(--text-muted); font-style: italic; } /* Focus-day detail panel */ .cal-detail-list { display: flex; flex-direction: column; gap: var(--s-2); } .cal-detail-row { --row-color: var(--text-muted); display: grid; grid-template-columns: 110px 1fr 1fr 110px; grid-template-rows: auto auto; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-3); border-left: 4px solid var(--row-color); background: var(--surface-hover); border-radius: var(--r-md); align-items: center; } .cal-detail-time { font-size: var(--t-base); } .cal-detail-contact { font-size: var(--t-base); line-height: var(--lh-snug); } .cal-detail-doc { font-size: var(--t-sm); color: var(--text-muted); line-height: var(--lh-snug); } .cal-detail-status { text-align: right; } .cal-detail-actions { grid-column: 1 / -1; display: flex; gap: var(--s-2); margin-top: var(--s-1); } .cal-actions { display: flex; gap: var(--s-1); } .cal-actions .btn { padding: var(--s-1) var(--s-3); font-size: var(--t-xs); min-height: 28px; } /* Status badge colours in calendar context */ .badge.st-scheduled, .badge.st-confirmed { background: color-mix(in srgb, var(--brand-primary) 15%, var(--surface)); color: var(--text); } .badge.st-showed_up { background: color-mix(in srgb, var(--ok) 20%, var(--surface)); color: var(--ok); } .badge.st-no_show { background: color-mix(in srgb, var(--danger) 20%, var(--surface)); color: var(--danger); } .badge.st-cancelled { background: var(--surface); color: var(--text-faint); text-decoration: line-through; } /* Mobile: collapse calendar to a tighter view */ @media (max-width: 720px) { .cal-cell { min-height: 80px; padding: 4px; } .cal-pill-name { display: none; } .cal-detail-row { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; } .cal-detail-status { text-align: left; } } /* ========================================================================= BOOKING MINI-LIST on contact page (sits above the Book form) ========================================================================= */ .booking-mini { background: var(--surface-hover); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: 4px; } .booking-mini.empty { padding: var(--s-2) var(--s-3); font-style: italic; } .booking-mini-title { font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 2px; } .booking-mini-row { display: grid; grid-template-columns: 24px 130px 1fr auto; gap: var(--s-2); padding: 6px 8px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 13px; align-items: center; transition: background 0.12s; } .booking-mini-row:hover { background: var(--surface-hover); } .booking-mini-row.st-cancelled, .booking-mini-row.st-no_show { opacity: 0.6; } .booking-mini-row.st-showed_up { border-left: 3px solid var(--ok); } .booking-mini-icon { font-size: 14px; } .booking-mini-when { font-weight: var(--fw-semibold); } .booking-mini-doc { color: var(--text-muted); } .booking-spec { font-size: 11px; background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface)); padding: 1px 6px; border-radius: var(--r-pill); color: var(--text); } .booking-mini-status { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: var(--fw-medium); } /* ========================================================================= CALENDAR v2 - Day / Week / Month + side panel + embed mode ========================================================================= */ .cal-page-wrap { display: flex; flex-direction: column; gap: var(--s-3); } /* Embed mode: when loaded inside an iframe (modal popup from contact page), strip the global header AND remove the main-content width cap so the calendar fills the entire viewport. The contact-page modal wraps this iframe in its own chrome (title bar + close button). */ body.embed .app-header { display: none !important; } body.embed main { max-width: none !important; padding: var(--s-3) !important; margin: 0 !important; } @media (min-width: 768px) { body.embed main { padding: var(--s-3) var(--s-4) !important; } } .cal-page-wrap.cal-embed { gap: var(--s-2); margin: 0; padding: 0; } /* In embed mode, pin the toolbar so the agent can switch views & nav without losing it when they scroll through a busy month. */ body.embed .cal-toolbar-card { position: sticky; top: 0; z-index: 50; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; } .cal-toolbar-card { padding: var(--s-3); } .cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .cal-toolbar-left, .cal-toolbar-center, .cal-toolbar-right { display: flex; align-items: center; gap: var(--s-2); } .cal-toolbar-center { flex: 1; justify-content: center; } .cal-title { margin: 0; font-family: var(--font-display); font-size: var(--t-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; min-width: 180px; text-align: center; line-height: var(--lh-tight); } .cal-vtabs { display: inline-flex; background: var(--surface-hover); border-radius: var(--r-md); padding: 2px; border: 1px solid var(--border); } .cal-vtab { padding: var(--s-2) var(--s-4); font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--text-muted); text-decoration: none; border-radius: calc(var(--r-md) - 2px); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); min-height: 32px; display: inline-flex; align-items: center; } .cal-vtab:hover { color: var(--text); } .cal-vtab.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); } /* Chips: active state uses the chip's color for stronger affordance */ .cal-chip.active { background: var(--chip-color, var(--brand-primary)); color: white; border-color: var(--chip-color, var(--brand-primary)); } .cal-chip.active::before { background: white; } .btn-icon { padding: var(--s-2) var(--s-3); font-size: var(--t-lg); line-height: 1; min-height: 36px; } .btn-xs { padding: 4px var(--s-2); font-size: var(--t-xs); line-height: 1.2; min-height: 28px; } /* 2-column layout: calendar grid on the left, day-detail aside on the right */ .cal-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--s-3); align-items: start; } .cal-main { min-width: 0; } .cal-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-3); position: sticky; top: var(--s-2); max-height: calc(100vh - 120px); overflow-y: auto; } .cal-side-title { font-family: var(--font-display); font-size: var(--t-base); font-weight: var(--fw-bold); letter-spacing: -0.005em; margin-bottom: var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--border); line-height: var(--lh-snug); } .cal-side-empty { color: var(--text-faint); font-style: italic; font-size: var(--t-sm); padding: var(--s-3) 0; text-align: center; line-height: var(--lh-snug); } .cal-side-list { display: flex; flex-direction: column; gap: var(--s-2); } .cal-side-row { --row-color: var(--text-muted); padding: var(--s-2); background: var(--surface-hover); border-left: 4px solid var(--row-color); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 4px; } .cal-side-row-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); } .cal-side-time { font-size: var(--t-sm); font-variant-numeric: tabular-nums; line-height: var(--lh-snug); } .cal-side-name { color: var(--text); text-decoration: none; font-size: var(--t-base); line-height: var(--lh-snug); } .cal-side-name:hover { text-decoration: underline; } .cal-side-doc { font-size: var(--t-xs); color: var(--text-muted); line-height: var(--lh-snug); } .cal-side-spec { background: var(--info-bg); background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface)); padding: 1px var(--s-2); border-radius: var(--r-pill); font-size: var(--t-xs); } .cal-side-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } /* ----- WEEK view: 8-column grid (1 time + 7 days) ------------------------- */ .cal-week { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .cal-wk-header { display: grid; grid-template-columns: 60px repeat(7, 1fr); background: var(--surface-hover); border-bottom: 1px solid var(--border); } .cal-wk-time-head {} .cal-wk-head { padding: 8px 4px; text-align: center; text-decoration: none; color: var(--text); border-left: 1px solid var(--border); } .cal-wk-head:hover { background: var(--surface); } .cal-wk-head.today .cal-wk-head-day { background: var(--brand-accent); color: var(--brand-primary); border-radius: var(--r-pill); padding: 2px 10px; font-weight: var(--fw-bold); display: inline-block; } .cal-wk-head.focus { box-shadow: inset 0 -3px 0 var(--brand-primary); } .cal-wk-head-dow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); line-height: var(--lh-tight); } .cal-wk-head-day { font-size: var(--t-md); font-weight: var(--fw-semibold); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; } .cal-wk-body { max-height: 70vh; overflow-y: auto; } .cal-wk-row { display: grid; grid-template-columns: 60px repeat(7, 1fr); border-top: 1px dashed var(--border-soft, var(--border)); min-height: 32px; } .cal-wk-row:nth-child(2n+1) { border-top: 1px solid var(--border); } .cal-wk-time { font-size: var(--t-xs); color: var(--text-faint); padding: 2px var(--s-2); text-align: right; border-right: 1px solid var(--border); font-variant-numeric: tabular-nums; } .cal-wk-cell { border-left: 1px solid var(--border); padding: 2px; display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: inherit; min-height: 32px; transition: background var(--dur-fast) var(--ease-out); } .cal-wk-cell:hover { background: var(--surface-hover); } /* ----- DAY view: full-width time-line list -------------------------------- */ .cal-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .cal-day-title { padding: var(--s-3) var(--s-4); font-family: var(--font-display); font-size: var(--t-md); font-weight: var(--fw-semibold); letter-spacing: -0.005em; border-bottom: 1px solid var(--border); background: var(--surface-hover); line-height: var(--lh-snug); } .cal-day-rows { max-height: 70vh; overflow-y: auto; } .cal-day-row { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-2); padding: 4px var(--s-3); border-top: 1px dashed var(--border-soft, var(--border)); min-height: 40px; align-items: center; } .cal-day-row.hour-mark { border-top: 1px solid var(--border); background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-primary) 4%, transparent) 0%, transparent 60%); } .cal-day-time { font-size: var(--t-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; font-weight: var(--fw-medium); line-height: var(--lh-tight); } .cal-day-slot { display: flex; flex-direction: column; gap: 2px; } .cal-pill-doc { font-size: var(--t-xs); color: var(--text-muted); margin-left: auto; line-height: var(--lh-tight); } /* ----- FULLSCREEN MODAL (contact-page calendar popup) --------------------- */ .cal-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: stretch; justify-content: stretch; } .cal-modal[hidden] { display: none; } .cal-modal-backdrop { position: absolute; inset: 0; /* Solid fallback first (Safari < 16.4 / Firefox without color-mix support) */ background: rgba(13, 27, 42, 0.55); background: color-mix(in srgb, var(--bg) 78%, black); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: cal-modal-fade-in var(--dur) var(--ease-out); } .cal-modal-frame { position: relative; z-index: 1; margin: var(--s-3); background: var(--surface); border-radius: var(--r-lg); overflow: hidden; flex: 1; display: flex; flex-direction: column; box-shadow: var(--sh-lg); animation: cal-modal-scale-in var(--dur) var(--ease-out); transform-origin: center top; } @keyframes cal-modal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cal-modal-scale-in { from { opacity: 0; transform: translateY(var(--s-2)) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .cal-modal-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-3); background: var(--surface-hover); border-bottom: 1px solid var(--border); } .cal-modal-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--t-base); letter-spacing: -0.005em; } .cal-modal-close { border: none; background: transparent; font-size: var(--t-xl); line-height: 1; cursor: pointer; color: var(--text-muted); padding: var(--s-1) var(--s-3); border-radius: var(--r-md); min-height: 36px; min-width: 36px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .cal-modal-close:hover { background: var(--surface); color: var(--text); } .cal-modal-iframe { flex: 1; border: 0; width: 100%; background: var(--bg); } /* Mobile: collapse 2-col layout into stacked */ @media (max-width: 980px) { .cal-layout { grid-template-columns: 1fr; } .cal-side { position: static; max-height: none; } } @media (max-width: 720px) { .cal-vtab { padding: var(--s-1) var(--s-2); font-size: var(--t-xs); } .cal-title { min-width: 0; } .cal-wk-head-day { font-size: var(--t-sm); } .cal-wk-time { font-size: 9px; } .cal-wk-cell { min-height: 28px; } } /* ========================================================================= CYCLE 2 POLISH: motion preferences, focus rings, touch targets, color-mix fallback for older Safari ========================================================================= */ /* Respect user motion preference - kill non-essential animations system-wide. Browsers report this on macOS (Reduce Motion), iOS, Windows (Animations off). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .cal-modal-backdrop, .cal-modal-frame { animation: none !important; } } /* Visible focus ring on every calendar interactive element. Uses the brand focus shadow already defined in :root so it inherits per-tenant accent. */ .cal-vtab:focus-visible, .cal-chip:focus-visible, .cal-cell:focus-visible, .cal-pill:focus-visible, .cal-wk-head:focus-visible, .cal-wk-cell:focus-visible, .cal-modal-close:focus-visible, .booking-mini-row:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; box-shadow: var(--sh-focus); z-index: 5; position: relative; } /* Mobile / touch devices: bump every tappable element to 44px+ per WCAG 2.5.5. Uses `(hover: none)` instead of width media query so it matches the input modality not just screen size. */ @media (hover: none) and (pointer: coarse) { .cal-vtab { min-height: 44px; padding: var(--s-2) var(--s-4); font-size: var(--t-sm); } .cal-chip { min-height: 36px; padding: var(--s-2) var(--s-3); } .btn-xs { min-height: 36px; padding: var(--s-1) var(--s-3); font-size: var(--t-sm); } .btn-icon { min-height: 44px; min-width: 44px; } .cal-modal-close { min-height: 44px; min-width: 44px; font-size: var(--t-2xl); } .cal-cell { min-height: 96px; } .cal-pill { min-height: 28px; padding: var(--s-1) var(--s-2); } .cal-side-actions .btn { min-height: 36px; } } /* Pre-Safari-16.4 fallback: color-mix() returns invalid value, so we restate key surfaces with solid tokens BEFORE the color-mix declaration. Browsers that support color-mix override; older ones keep the solid version. */ @supports not (color: color-mix(in srgb, red, blue)) { .cal-pill { background: var(--surface-hover); } .cal-day-row.hour-mark { background: var(--surface-hover); } .cal-modal-backdrop { background: rgba(13, 27, 42, 0.6); } .badge.st-scheduled, .badge.st-confirmed { background: var(--info-bg); color: var(--info); } .badge.st-showed_up { background: var(--ok-bg); color: var(--ok); } .badge.st-no_show { background: var(--danger-bg); color: var(--danger); } .cal-side-spec { background: var(--info-bg); color: var(--info); } .cal-chip.active { background: var(--brand-primary); color: var(--text-on-primary); } } /* Auto-load fade for the calendar grid itself (subtle, gated by reduced-motion) */ .cal-grid-card, .cal-week, .cal-day { animation: cal-grid-fade-in var(--dur) var(--ease-out); } @keyframes cal-grid-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================= FUNNEL ACTIONS — Modern stage-card redesign Each
becomes a stage card with: numbered badge, title + subtitle, state pill (done/next/pending), animated chevron, and a state-aware left accent bar. Hides the default browser triangle marker. ========================================================================= */ .funnel-stack { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); position: relative; } /* Connector line linking the stage cards vertically. Sits behind the cards so the numbered badges punch through it like a stepper. */ .funnel-stack::before { content: ""; position: absolute; left: calc(var(--s-3) + 14px); /* aligns to centre of step-num badge */ top: var(--s-6); bottom: var(--s-6); width: 2px; background: var(--border); z-index: 0; pointer-events: none; } .funnel-action { --funnel-accent: var(--text-faint); --funnel-tint: var(--surface-hover); position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-xs); transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); overflow: hidden; } .funnel-action:hover { box-shadow: var(--sh-sm); border-color: var(--funnel-accent); } .funnel-action[open] { box-shadow: var(--sh-md); border-color: var(--funnel-accent); } /* When any bl-select inside the funnel card opens its dropdown menu, lift the card's `overflow: hidden` so the menu can render past the card edge. Also raise the card's stacking order above sibling funnel cards so the dropdown paints ON TOP of the next "Book consult / Showed up / Pay" cards beneath it. Without this z-index bump, the menu would slide behind the next card because each .funnel-action establishes its own stacking context via `position: relative; z-index: 1`. :has() is supported in every modern browser as of 2024. */ .funnel-action:has(.bl-select.is-open) { overflow: visible; z-index: 50; } /* State-aware accent colour pipeline. The `--funnel-accent` var drives the left bar, hover border, state-pill background, and step-number ring. */ .funnel-action[data-state="done"] { --funnel-accent: var(--ok); --funnel-tint: var(--ok-bg); } .funnel-action[data-state="next"] { --funnel-accent: var(--brand-accent); --funnel-tint: var(--warn-bg); } .funnel-action[data-state="pending"] { --funnel-accent: var(--text-faint); --funnel-tint: var(--surface-hover); } .funnel-action[data-state="locked"] { --funnel-accent: var(--text-faint); --funnel-tint: var(--surface-hover); opacity: 0.6; } .funnel-action.funnel-lost { --funnel-accent: var(--danger); } .funnel-action.funnel-lost[data-state="done"] { --funnel-accent: var(--danger); --funnel-tint: var(--danger-bg); } /* Left accent bar (4px) hugging the card. Sits inside via padding-left. */ .funnel-action::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--funnel-accent); transition: background var(--dur-fast) var(--ease-out); } /* Strip the browser-default triangle marker */ .funnel-action > summary { list-style: none; } .funnel-action > summary::-webkit-details-marker { display: none; } .funnel-action > summary::marker { content: ""; } /* Summary = the always-visible row. Grid: [num] [title+subtitle] [pill] [chevron] */ .funnel-action > summary { display: grid; grid-template-columns: 36px 1fr auto 24px; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 4px); cursor: pointer; user-select: none; transition: background var(--dur-fast) var(--ease-out); font-family: var(--font-sans); } .funnel-action > summary:hover { background: var(--funnel-tint); } .funnel-action[open] > summary { background: var(--funnel-tint); } /* Step number badge: circle with the stage index, accent ring */ .funnel-step-num { width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--surface); border: 2px solid var(--funnel-accent); color: var(--funnel-accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-sm); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: 2px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .funnel-action[data-state="done"] .funnel-step-num { background: var(--funnel-accent); color: var(--text-on-primary); } .funnel-action[data-state="done"] .funnel-step-num::after { content: ""; } /* Visual checkmark for completed stages, overlays the number */ .funnel-action[data-state="done"] .funnel-step-num { font-size: 0; position: relative; } .funnel-action[data-state="done"] .funnel-step-num::before { content: "\2713"; /* ✓ */ font-size: var(--t-md); font-weight: var(--fw-bold); } /* Title + subtitle stack */ .funnel-step-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .funnel-step-title { font-family: var(--font-display); font-size: var(--t-md); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: -0.005em; line-height: var(--lh-snug); } .funnel-action[data-state="next"] .funnel-step-title { color: var(--text); font-weight: var(--fw-bold); } .funnel-step-subtitle { font-size: var(--t-sm); color: var(--text-muted); line-height: var(--lh-snug); } /* State pill: small badge on the right showing done / next / pending */ .funnel-step-state { font-size: var(--t-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px var(--s-2); border-radius: var(--r-pill); background: var(--funnel-tint); color: var(--funnel-accent); white-space: nowrap; border: 1px solid transparent; } .funnel-step-state[data-state="next"] { background: var(--brand-accent); color: var(--text-on-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 25%, transparent); } @supports not (color: color-mix(in srgb, red, blue)) { .funnel-step-state[data-state="next"] { box-shadow: 0 0 0 3px var(--warn-bg); } } .funnel-step-state[data-state="done"] { background: var(--ok-bg); color: var(--ok); } .funnel-step-state[data-state="pending"] { background: transparent; color: var(--text-muted); border-color: var(--border); } /* Chevron rotates 180deg when open */ .funnel-step-chevron { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--text-faint); font-size: var(--t-md); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .funnel-action[open] .funnel-step-chevron { transform: rotate(180deg); color: var(--funnel-accent); } /* Content area below the summary (forms / buttons) */ .funnel-action > *:not(summary) { padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 4px + 36px + var(--s-3)); /* indents to align with the meta column, not the step-num */ } .funnel-action[open] > *:not(summary) { animation: funnel-content-in var(--dur) var(--ease-out); } @keyframes funnel-content-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Disabled buttons inside locked actions get a muted treatment */ .funnel-action.funnel-locked button[disabled] { cursor: not-allowed; opacity: 0.45; } /* Legacy class kept for back-compat in case any old code paths still emit it */ .funnel-done-tag { display: none; /* superseded by .funnel-step-state */ } /* Mobile: keep the layout readable; collapse state pill below subtitle on tiny screens */ @media (max-width: 560px) { .funnel-action > summary { grid-template-columns: 28px 1fr 20px; grid-template-rows: auto auto; gap: var(--s-2); } .funnel-step-state { grid-column: 2 / 3; grid-row: 2 / 3; justify-self: start; } .funnel-step-chevron { grid-column: 3 / 4; grid-row: 1 / 3; } .funnel-action > *:not(summary) { padding-left: var(--s-3); padding-right: var(--s-3); } } /* Focus visible for keyboard nav */ .funnel-action > summary:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; background: var(--funnel-tint); } /* ========================================================================= FUNNEL CAPTURED CARD - read-only view of what was previously entered for a DONE funnel stage (Qualify / Book / Showed up / Pay / Lost). Renders in place of the editable form so the agent can SEE what was locked in without an inviting-to-edit form sitting there. Greyed-out aesthetic to communicate "this is history, not action". ========================================================================= */ .funnel-captured { margin: var(--s-3) 0 var(--s-2); padding: var(--s-3) var(--s-4); background: var(--surface-hover); border: 1px dashed var(--border); border-left: 3px solid var(--funnel-accent, var(--text-faint)); border-radius: var(--r-md); } .captured-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px dashed var(--border); } .captured-title { font-family: var(--font-display); font-size: var(--t-sm); font-weight: var(--fw-bold); letter-spacing: -0.005em; color: var(--text); text-transform: none; } .captured-readonly-tag { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px var(--s-2); border-radius: 3px; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); } .captured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-2) var(--s-4); } .captured-row { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; } .captured-label { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); line-height: 1.2; } .captured-value { font-size: var(--t-sm); color: var(--text); line-height: var(--lh-snug); font-weight: var(--fw-medium); word-break: break-word; } .captured-empty { color: var(--text-faint); font-style: italic; } /* Mobile: stack to single column */ @media (max-width: 560px) { .captured-grid { grid-template-columns: 1fr; } } /* ========================================================================= PREMIUM PASS — contact-page polish to match the funnel-card language. ========================================================================= */ /* All in-card section titles get the Manrope display treatment with tight tracking. This unifies "Funnel actions", "Edit personal info", "Chat thread", "Touchpoints", "Attribution captured", "Recent CAPI events", "Bookings on file" - they were inconsistently styled before. */ .card > h2, .card > h3, .card > .row > h2, .card > .row > h3, .card > .row > div > h2, .card > .row > div > h3 { font-family: var(--font-display); letter-spacing: -0.01em; line-height: var(--lh-tight); font-weight: var(--fw-bold); } .card > h3, .card > .row > h3, .card > .row > div > h3 { font-size: var(--t-lg); margin: 0 0 var(--s-3); } .card > h2, .card > .row > h2, .card > .row > div > h2 { font-size: var(--t-xl); } /* Slight card surface upgrade: lift on hover for non-static cards, smoother border. Edit / Funnel actions already have stronger styling. */ .card { transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } /* ---- Top status badge (NEW_LEAD pill etc.) ----------------------------- The .badge-new / -q / -booked / -show / -paid / -lost variants already exist with surface tints. Bump them to a slightly larger, more confident pill when they appear in a heading context. */ h2 .badge, .card-h .badge { font-size: var(--t-xs); padding: 4px var(--s-3); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--sh-xs); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); } @supports not (color: color-mix(in srgb, red, blue)) { h2 .badge, .card-h .badge { border: 1px solid rgba(0,0,0,0.08); } } /* ---- Edit-personal-info: cleaner missing-field treatment --------------- Before: hard yellow tint on input bg felt loud. Now: thin amber left accent bar + understated tag. Still scannable, less screamy. */ .field-edit.is-missing { position: relative; } .field-edit.is-missing input, .field-edit.is-missing select, .field-edit.is-missing textarea { background: color-mix(in srgb, var(--warn-bg) 60%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); } @supports not (color: color-mix(in srgb, red, blue)) { .field-edit.is-missing input, .field-edit.is-missing select, .field-edit.is-missing textarea { background: var(--warn-bg); border-color: var(--warn); } } .field-edit.is-missing input:focus, .field-edit.is-missing select:focus { border-color: var(--brand-accent); box-shadow: var(--sh-focus); } .field-missing-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; padding: 2px var(--s-1); border-radius: 3px; background: var(--warn-bg); color: var(--warn); margin-left: var(--s-1); line-height: 1.2; vertical-align: 1px; } /* Field-edit labels: a little tighter, more "form designer" feel */ .field-edit label { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } /* ---- Chat thread: keep the WhatsApp feel but polish the chrome --------- Cleaner bubbles, tabular timestamps, subtle hover hint, smoother shadow. Background tinted via tokens so dark mode picks it up automatically. */ .chat-box { background: var(--surface-hover); border-radius: var(--r-md); border-color: var(--border); padding: var(--s-4); gap: var(--s-2); } :root[data-theme="dark"] .chat-box { background: #0e1622; } .chat-msg { font-size: var(--t-sm); line-height: var(--lh-snug); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); box-shadow: var(--sh-xs); transition: box-shadow var(--dur-fast) var(--ease-out); position: relative; } .chat-msg:hover { box-shadow: var(--sh-sm); } .chat-in { background: var(--surface); border: 1px solid var(--border-soft); border-top-left-radius: var(--r-sm); } .chat-out { /* Subtle brand-accent tint instead of the old #dcf8c6 hard-coded green */ background: color-mix(in srgb, var(--brand-accent) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-accent) 25%, transparent); color: var(--text); border-top-right-radius: var(--r-sm); } @supports not (color: color-mix(in srgb, red, blue)) { .chat-out { background: var(--warn-bg); border-color: var(--brand-accent-soft); } } .chat-time { font-size: 10px; color: var(--text-faint); margin-top: var(--s-1); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .chat-body a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; } /* ---- Section-title meta line (the "3/10 fields filled · 7 missing" bit) Used in the Edit card and elsewhere. Tighten to match the new heading weight and align baseline visually. */ .card .meta { font-size: var(--t-xs); color: var(--text-muted); line-height: var(--lh-snug); } /* ---- Form-grid bottom action row consistency The Reset / Save personal info buttons in Edit card sit in a row. Bump spacing + button hierarchy so the primary CTA reads as accent. */ .form-grid > .field-full button[type="submit"], .form-grid > .field-full .btn[type="submit"], .form-grid > button[type="submit"][class*="btn-accent"], .form-grid > .row > button[type="submit"] { font-family: var(--font-display); letter-spacing: -0.005em; } /* ---- Touchpoints / Attribution / CAPI events: card consistency --------- Tighten
styling so the attribution table reads cleanly. */ .card dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--s-2) var(--s-4); margin: 0; } .card dl dt { font-size: var(--t-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); align-self: center; } .card dl dd { margin: 0; font-size: var(--t-sm); color: var(--text); line-height: var(--lh-snug); word-break: break-word; } /* ---- Breadcrumb polish ---- */ .breadcrumb { font-size: var(--t-sm); margin-bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2); color: var(--text-muted); } .breadcrumb a { color: var(--text-muted); text-decoration: none; font-weight: var(--fw-medium); transition: color var(--dur-fast) var(--ease-out); } .breadcrumb a:hover { color: var(--brand-primary); } .breadcrumb .sep { color: var(--text-faint); } .breadcrumb .current { color: var(--text); font-weight: var(--fw-semibold); } /* ========================================================================= MOBILE PASS — phone-sized polish for every screen the agent might use. Targets a 375-430px viewport (modern iPhones / Pixels), with extra care for the data-dense pages. ========================================================================= */ /* Tighten card padding so content gets more space on narrow viewports. The desktop padding remains generous via the existing media queries. */ @media (max-width: 559px) { .card { padding: var(--s-3); border-radius: var(--r); } .card + .card { margin-top: var(--s-3); } main { padding: var(--s-3) var(--s-2); } main.wide { padding: var(--s-3) var(--s-2); } /* The toolbar inside calendar embed uses up the iframe's full width */ body.embed main { padding: var(--s-2) !important; } } /* Top KPI strip: switch to a tighter 2-column compact layout on mobile so numbers stay readable instead of cramming 6 columns at 50px each. */ @media (max-width: 559px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); } .kpi { padding: var(--s-2) var(--s-2); } .kpi-label { font-size: 10px; } .kpi-value { font-size: var(--t-lg); } } /* Tables: when horizontal scroll is active, make sticky-name column so the agent doesn't lose context while panning right. Also bump cell padding down for density. */ @media (max-width: 767px) { .t-wrap { -webkit-overflow-scrolling: touch; } .t-wrap table { min-width: 720px; } tbody td { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); } thead th { padding: var(--s-2) var(--s-3); font-size: 10px; letter-spacing: 0.06em; } /* First column gets a subtle right-shadow indicating more content to scroll */ .t-wrap tbody tr td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 2px 0 4px -2px rgba(0,0,0,0.08); } .t-wrap tbody tr:hover td:first-child { background: var(--surface-hover); } .t-wrap thead th:first-child { position: sticky; left: 0; z-index: 3; } } /* Filter chips / action chips wrap better, with smaller padding on mobile. */ @media (max-width: 559px) { .tabs { padding: 2px; gap: 2px; flex-wrap: wrap; } .tabs a, .tabs button { flex: 1 1 calc(50% - 2px); text-align: center; padding: var(--s-2); font-size: var(--t-xs); } } /* Page-header card top row (h2 + status badge + meta + actions) - allow stacking gracefully on phones. */ @media (max-width: 559px) { .card-h { flex-direction: column; align-items: flex-start; gap: var(--s-2); } .card-h h2, .card-h h3 { font-size: var(--t-lg); } } /* Contact page funnel stepper: keep it inline scrollable on mobile so the agent can swipe through the stages instead of cramming 5 chips on 320px. */ @media (max-width: 559px) { .funnel { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s-1); margin-left: calc(-1 * var(--s-3)); margin-right: calc(-1 * var(--s-3)); padding-left: var(--s-3); padding-right: var(--s-3); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .funnel::-webkit-scrollbar { display: none; } .funnel-step { flex-shrink: 0; } } /* Form grid: collapse to single column on phones so labels + inputs stack cleanly. The existing 2-col grid wraps elements awkwardly otherwise. */ @media (max-width: 559px) { .form-grid { grid-template-columns: 1fr !important; } .field-edit.field-full { grid-column: auto; } } /* Booking modal close button + iframe full-bleed on phones */ @media (max-width: 559px) { .cal-modal-frame { margin: 0; border-radius: 0; } .cal-modal-bar { padding: var(--s-2); } .cal-modal-title { font-size: var(--t-sm); } } /* Contact page top header card: stack name + badge gracefully */ @media (max-width: 559px) { .card h2 { font-size: var(--t-xl); } .card h2 .badge { display: inline-flex; margin-top: var(--s-1); } } /* Funnel-action cards: tighten further on phones */ @media (max-width: 559px) { .funnel-action > summary { padding: var(--s-2); grid-template-columns: 28px 1fr 18px; gap: var(--s-2); } .funnel-action > *:not(summary) { padding-left: var(--s-3); padding-right: var(--s-3); padding-bottom: var(--s-3); } .funnel-step-title { font-size: var(--t-sm); } .funnel-step-subtitle { font-size: var(--t-xs); } .funnel-step-state { font-size: 9px; padding: 3px var(--s-1); } .funnel-stack::before { display: none; } /* connector clutter on small */ } /* Chat thread: bubbles can use more width on narrow viewports */ @media (max-width: 559px) { .chat-box { padding: var(--s-2); } .chat-msg { max-width: 92%; } } /* Edit-personal-info form: make missing-tag wrap below label cleanly */ @media (max-width: 559px) { .field-edit label { display: flex; flex-wrap: wrap; gap: var(--s-1); } .field-missing-tag { margin-left: 0; } } /* Side panel below the calendar grid on mobile (instead of right of it) */ @media (max-width: 980px) { .cal-layout { gap: var(--s-2); } } /* Sticky bottom action bar style (for forms that have Reset / Save) - on mobile, anchor the primary CTA so it's always visible above the keyboard. Opt-in via .sticky-bottom-actions class. */ .sticky-bottom-actions { position: sticky; bottom: 0; background: linear-gradient(to top, var(--surface) 70%, transparent); padding: var(--s-3) 0 var(--s-2); z-index: 5; margin-top: var(--s-3); } /* Touch-input refinement: bigger tap targets on form fields and selects */ @media (hover: none) and (pointer: coarse) { input, select, textarea { min-height: 44px; font-size: 16px; /* prevent iOS auto-zoom */ } .bl-select-trigger { min-height: 48px; font-size: 16px; } .btn { min-height: 44px; } .btn-sm, .btn-xs { min-height: 36px; } /* Slightly bigger row tap area in tables */ tbody td { padding: var(--s-3) var(--s-3); } } /* ========================================================================= NAV PROGRESS BAR - shown on link clicks / form submits for instant feedback. Lives at top of viewport, animates in 200ms, fills to 90% then waits for the new page to take over. ========================================================================= */ .nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--brand-accent) 0%, var(--brand-accent-soft) 100%); box-shadow: 0 0 8px color-mix(in srgb, var(--brand-accent) 60%, transparent); z-index: 10000; transition: width 1.2s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 0.3s ease-out; opacity: 0; pointer-events: none; border-radius: 0 2px 2px 0; } .nav-progress.active { opacity: 1; } .nav-progress.done { opacity: 0; transition: width 0.2s ease-out, opacity 0.4s ease-out; } @supports not (color: color-mix(in srgb, red, blue)) { .nav-progress { box-shadow: 0 0 8px rgba(201, 168, 76, 0.5); } } @media (prefers-reduced-motion: reduce) { .nav-progress { transition: opacity 0.2s; } } /* ========================================================================= STALE-DATA BANNER - shown above pages backed by an external-API cache (e.g. Campaigns) when the cache is older than its TTL. Tells the agent what they're looking at and that a refresh is running. ========================================================================= */ .stale-banner { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: color-mix(in srgb, var(--warn-bg) 60%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 25%, var(--border)); border-left: 4px solid var(--warn); border-radius: var(--r-md); margin-bottom: var(--s-3); font-size: var(--t-sm); color: var(--text); } @supports not (color: color-mix(in srgb, red, blue)) { .stale-banner { background: var(--warn-bg); border-color: var(--warn); } } .stale-banner-icon { font-size: var(--t-lg); line-height: 1; flex-shrink: 0; } .stale-banner-text { flex: 1; line-height: var(--lh-snug); } .stale-banner-text b { color: var(--text); } .stale-banner .btn { flex-shrink: 0; } /* ========================================================================= PLATFORMS configuration page (/platforms) - tokens, pixels, conversion actions for every ad platform the CRM talks to. Each section is its own card with grouped fields + a single save button. ========================================================================= */ .platform-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); } .platform-nav-link { display: inline-flex; align-items: center; padding: 6px var(--s-3); border-radius: var(--r-pill); background: var(--surface-hover); border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; font-size: var(--t-xs); font-weight: var(--fw-semibold); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .platform-nav-link:hover { background: var(--brand-accent); color: var(--brand-primary); border-color: var(--brand-accent); } .platform-section { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--s-4); box-shadow: var(--sh-sm); margin-bottom: var(--s-4); scroll-margin-top: 80px; } .platform-section-head { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); margin-bottom: var(--s-4); } .platform-section-icon { font-size: var(--t-xl); width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-hover); display: inline-flex; align-items: center; justify-content: center; color: var(--brand-primary); } .platform-section-title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; margin: 0; flex: 1; line-height: var(--lh-tight); } .platform-section-status { font-size: var(--t-xs); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px var(--s-2); border-radius: var(--r-pill); white-space: nowrap; } .platform-section-status.connected { background: var(--ok-bg); color: var(--ok); } .platform-section-status.partial { background: var(--warn-bg); color: var(--warn); } .platform-section-status.empty { background: var(--surface-hover); color: var(--text-muted); border: 1px solid var(--border); } .platform-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-4); } .platform-field { display: flex; flex-direction: column; gap: var(--s-1); } .platform-field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .platform-field-label { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--text); line-height: var(--lh-snug); } .platform-field-status { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; padding: 2px var(--s-1); border-radius: 3px; line-height: 1.3; } .platform-field-status.filled { background: var(--ok-bg); color: var(--ok); } .platform-field-status.empty { background: var(--surface-hover); color: var(--text-muted); } .platform-field-key { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; color: var(--text-faint); letter-spacing: 0.02em; word-break: break-all; } .platform-field-input { display: flex; align-items: stretch; gap: var(--s-1); } .platform-field-input input { flex: 1; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--t-sm); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); min-height: 40px; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .platform-field-input input::placeholder { color: var(--text-faint); font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0.05em; } .platform-field-input input:focus { outline: none; border-color: var(--brand-accent); box-shadow: var(--sh-focus); } .platform-field-reveal { border: 1px solid var(--border); background: var(--surface-hover); border-radius: var(--r-sm); cursor: pointer; padding: 0 var(--s-2); font-size: var(--t-md); min-width: 40px; color: var(--text-muted); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .platform-field-reveal:hover { background: var(--brand-accent); color: var(--brand-primary); border-color: var(--brand-accent); } .platform-field-reveal.revealed { background: var(--brand-primary); color: var(--brand-accent); } .platform-field-help { font-size: var(--t-xs); color: var(--text-muted); line-height: var(--lh-snug); margin-top: 2px; } .platform-form-actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border); flex-wrap: wrap; } @media (max-width: 720px) { .platform-section { padding: var(--s-3); } .platform-fields { grid-template-columns: 1fr; gap: var(--s-3); } .platform-section-head { flex-wrap: wrap; } } /* ========================================================================= SORTABLE column headers in the contacts list. Each wraps a link; click to toggle sort direction or activate a new column. Inactive columns show a subtle bidirectional hint arrow so the operator knows the column is clickable without screaming for attention. ========================================================================= */ .th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; padding: 2px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; } .th-sort:hover { color: var(--brand-accent); } .th-sort-arrow { font-size: 9px; line-height: 1; opacity: 0.75; display: inline-block; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .th-sort-inactive .th-sort-arrow { opacity: 0.35; font-size: 11px; } .th-sort-active { color: var(--brand-accent); } .th-sort-active .th-sort-arrow { opacity: 1; font-size: 10px; } .th-sort:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: 2px; } /* Right-align th-sort link inside a right-aligned column (e.g. Value) */ th.r .th-sort { justify-content: flex-end; width: 100%; } /* ========================================================================= CHANNEL pills in the contacts list - WhatsApp / Instagram / Messenger / TikTok DM / Snap. Each platform gets its own colour so the eye can scan 200 contacts and instantly know which surface each lead lives on. ========================================================================= */ .channel-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--s-2); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--fw-semibold); letter-spacing: 0.01em; white-space: nowrap; border: 1px solid transparent; } .channel-icon { font-size: var(--t-sm); line-height: 1; display: inline-flex; align-items: center; } .channel-name { line-height: 1.2; } /* WhatsApp - green */ .channel-pill.ch-whatsapp { background: color-mix(in srgb, #25d366 18%, var(--surface)); color: #0d6e3a; border-color: color-mix(in srgb, #25d366 30%, transparent); } /* Instagram - magenta gradient feel */ .channel-pill.ch-instagram { background: color-mix(in srgb, #e4405f 18%, var(--surface)); color: #b1284b; border-color: color-mix(in srgb, #e4405f 30%, transparent); } /* Messenger - electric blue */ .channel-pill.ch-messenger { background: color-mix(in srgb, #0084ff 18%, var(--surface)); color: #0064c2; border-color: color-mix(in srgb, #0084ff 30%, transparent); } /* TikTok DM - dark with teal accent */ .channel-pill.ch-tiktok { background: color-mix(in srgb, #25f4ee 16%, var(--surface)); color: #006c66; border-color: color-mix(in srgb, #25f4ee 30%, transparent); } /* Snap - yellow */ .channel-pill.ch-snap, .channel-pill.ch-snap_form { background: color-mix(in srgb, #fffc00 30%, var(--surface)); color: #806c00; border-color: color-mix(in srgb, #c9c000 30%, transparent); } /* Direct - neutral */ .channel-pill.ch-direct { background: var(--surface-hover); color: var(--text-muted); border-color: var(--border); } /* Unknown - super subtle */ .channel-pill.ch-unknown { background: transparent; color: var(--text-faint); border-color: var(--border-soft); font-style: italic; } /* Fallback for older browsers without color-mix() */ @supports not (color: color-mix(in srgb, red, blue)) { .channel-pill.ch-whatsapp { background: #d6f5e3; color: #0d6e3a; } .channel-pill.ch-instagram { background: #f5dae0; color: #b1284b; } .channel-pill.ch-messenger { background: #d6e8fa; color: #0064c2; } .channel-pill.ch-tiktok { background: #d6f8f5; color: #006c66; } .channel-pill.ch-snap, .channel-pill.ch-snap_form { background: #fff8b3; color: #806c00; } } /* Dark theme tweaks - lift the tints so they stay visible on dark surfaces */ :root[data-theme="dark"] .channel-pill.ch-whatsapp { color: #6fdb9f; } :root[data-theme="dark"] .channel-pill.ch-instagram { color: #ff7392; } :root[data-theme="dark"] .channel-pill.ch-messenger { color: #5fb5ff; } :root[data-theme="dark"] .channel-pill.ch-tiktok { color: #6ff5ed; } :root[data-theme="dark"] .channel-pill.ch-snap { color: #ffe666; } :root[data-theme="dark"] .channel-pill.ch-direct { color: var(--text-muted); } /* Pulse animation for the "refreshing now" inline indicator */ .refreshing-pulse { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--fw-medium); } .refreshing-pulse::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse-dot 1.4s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .refreshing-pulse::before { animation: none; } } /* Safe-area insets for notched phones (iPhone X+, Pixel notch) */ @supports (padding: max(0px)) { main { padding-left: max(var(--s-3), env(safe-area-inset-left)); padding-right: max(var(--s-3), env(safe-area-inset-right)); } main.wide { padding-left: max(var(--s-3), env(safe-area-inset-left)); padding-right: max(var(--s-3), env(safe-area-inset-right)); } .app-header { padding-left: max(var(--s-4), env(safe-area-inset-left)); padding-right: max(var(--s-4), env(safe-area-inset-right)); padding-top: max(var(--s-3), env(safe-area-inset-top)); } }