/* ── LEAP OS — Design System ─────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@500;600;700;800&display=swap'); :root { /* LEAP brand */ --navy: #1B2A8A; --navy2: #121D60; --green: #00E676; --green2: #00C853; /* Light app surfaces */ --bg: #F5F7FA; --sf: #FFFFFF; --sf2: #F0F2F8; --sf3: #E2E6F3; /* Borders */ --bd: #E2E6F3; --bd2: #CDD3DE; /* Text */ --tx: #1A1F36; --mt: #5A6480; --dm: #8A95B8; /* Semantic colors */ --bl: #1B2A8A; --gn: #00C853; --rd: #E03E52; --am: #D9940A; --pu: #9333EA; /* Typography */ --fm: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fd: 'Barlow Condensed', sans-serif; /* Layout */ --sidebar-w: 210px; --sidebar-collapsed-w: 72px; --header-h: 48px; --radius: 12px; --radius-lg: 16px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow: 0 2px 8px rgba(0,0,0,.06); --shadow-lg: 0 8px 24px rgba(0,0,0,.1); /* Transitions */ --transition-speed: .22s; /* Derived */ --navy-light: rgba(27,42,138,.06); --navy-gradient: linear-gradient(135deg, #1B2A8A 0%, #2D3FBF 100%); /* Foreground variant of brand navy — flips brighter in dark mode so text on dark surfaces stays legible. Use for `color:` only; for `background:` or `border:` keep the original `--navy`. */ --navy-fg: var(--navy); } /* ── Dark theme (Phase 8d-LEAPOS) ──────────────────────────────────────── Activated by ``. Brand colors stay; surfaces, borders, and text invert. Shadows soften because they're invisible on dark backgrounds. Third-party widgets (Stripe iframes etc.) are rendered in their own theme and won't follow this — patch case-by-case. */ [data-theme="dark"] { /* Surfaces — deep navy-tinted dark, matches LEAP brand */ --bg: #0B1020; --sf: #141A2E; --sf2: #1A2240; --sf3: #232C50; /* Borders — visible against the surfaces but not loud */ --bd: #2A335A; --bd2: #3A4470; /* Text */ --tx: #E8ECF7; --mt: #A8B2D4; --dm: #6E7AA0; /* Brand accents — slightly warmer for contrast on dark */ --navy-light: rgba(77,114,255,.16); --navy-gradient: linear-gradient(135deg, #2D3FBF 0%, #4D72FF 100%); --navy-fg: #8AA6FF; /* Shadows — much softer; near-invisible on dark backgrounds */ --shadow-sm: 0 1px 2px rgba(0,0,0,.30); --shadow: 0 2px 10px rgba(0,0,0,.36); --shadow-lg: 0 8px 28px rgba(0,0,0,.46); } /* ── RESET & BASE ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--tx); font-family: var(--fm); font-size: 15px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; } a { color: var(--bl); text-decoration: none; } a:hover { color: var(--navy2); } button { cursor: pointer; font-family: var(--fm); } input, select, textarea { font-family: var(--fm); } img { max-width: 100%; } /* ── ANIMATIONS ────────────────────────────────────────────────────────── */ .a1,.a2,.a3,.a4,.a5 { opacity: 0; transform: translateY(12px); animation: fadeUp .35s forwards; } .a1{animation-delay:.04s;} .a2{animation-delay:.1s;} .a3{animation-delay:.17s;} .a4{animation-delay:.24s;} .a5{animation-delay:.31s;} @keyframes fadeUp { to { opacity:1; transform:none; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} } /* ── SIDEBAR ───────────────────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%); border-right: 1px solid rgba(255,255,255,.04); display: flex; flex-direction: column; z-index: 100; transition: transform var(--transition-speed) ease, width var(--transition-speed) ease; } .sidebar-logo { padding: 16px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; } .sidebar-logo img { height: 28px; width: auto; max-width: 150px; object-fit: contain; aspect-ratio: auto; display: block; } .sidebar-logo-mark { display: flex; align-items: center; min-width: 0; } .sidebar-logo-text { display: flex; align-items: center; gap: 6px; font-family: var(--fd); font-size: 18px; font-weight: 700; color: #FFFFFF; letter-spacing: .02em; } .sidebar-logo-text span { color: var(--green); } .sidebar-collapse-btn { background: none; border: none; color: rgba(255,255,255,.55); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; } .sidebar-collapse-btn:hover { color: #FFFFFF; background: rgba(255,255,255,.08); } .sidebar-collapse-btn svg { transition: transform var(--transition-speed) ease; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; } .snav-section { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); padding: 14px 10px 4px; margin-top: 2px; flex-shrink: 0; } .snav-btn { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius); font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.78); cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: background .12s, color .12s; position: relative; flex-shrink: 0; } .snav-btn:hover { background: rgba(255,255,255,.08); color: #FFFFFF; } .snav-btn.active { background: rgba(255,255,255,.12); color: #FFFFFF; font-weight: 600; box-shadow: inset 3px 0 0 var(--green); } /* SVG icon wrapper */ .snav-svg { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: inherit; } .snav-svg svg { width: 20px; height: 20px; } /* Text label */ .snav-label { white-space: nowrap; overflow: hidden; transition: opacity var(--transition-speed) ease; } /* Legacy emoji icon — hide when SVG is present */ .snav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; display: none; } .snav-dot { width: 7px; height: 7px; background: var(--rd); border-radius: 50%; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: none; } .snav-badge { margin-left: auto; font-size: 10px; font-weight: 700; background: rgba(255,255,255,.14); color: #FFFFFF; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 5px; display: flex; align-items: center; justify-content: center; } /* Module lock state */ .snav-btn.module-locked { opacity: .42; } .snav-btn.module-locked .snav-lock { margin-left: auto; display: flex; align-items: center; color: rgba(255,255,255,.55); } .snav-btn.module-locked .snav-lock svg { width: 14px; height: 14px; } .snav-btn.module-locked:hover { opacity: .7; } /* Nav spacer (pushes account items to bottom) */ .snav-spacer { flex: 1; } .guest-hide { display: none; } /* ── AUTH SPLASH — shown while getSession()/profile/org load. Prevents the login page (which is .page.active in markup) from flashing for already-signed-in users. body.auth-loading is removed by auth.js once we know whether to show login or route to the app. */ .auth-splash { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--bg); z-index: 100000; } body.auth-loading .auth-splash { display: flex; } body.auth-loading .page { display: none !important; } .auth-splash-logo { width: 56px; height: 56px; display: block; user-select: none; -webkit-user-drag: none; } .auth-splash-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--bd); border-top-color: var(--navy); animation: spin .9s linear infinite; } body.has-sidebar .sidebar { display: flex; } /* ── SIDEBAR COLLAPSED STATE ──────────────────────────────────────────── */ body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-w); } body.sidebar-collapsed .sidebar-logo img, body.sidebar-collapsed .sidebar-logo-text { display: none; } body.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); } body.sidebar-collapsed .snav-label, body.sidebar-collapsed .snav-badge { display: none; } body.sidebar-collapsed .sidebar-nav { align-items: center; padding: 10px 8px; overflow: visible; } body.sidebar-collapsed .snav-btn { justify-content: center; padding: 10px; width: 48px; } body.sidebar-collapsed .sidebar-logo { justify-content: center; padding: 18px 12px 16px; } /* Collapsed sidebar tooltip */ body.sidebar-collapsed .snav-btn::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--tx); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: .75rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: none; z-index: 200; } body.sidebar-collapsed .snav-btn:hover::after { opacity: 1; } /* ── TOP HEADER BAR ───────────────────────────────────────────────────── */ /* Blended with page background — no hard border, no separate elevation. The sidebar carries the chrome; the header reads as part of the workspace. */ .top-header { position: fixed; top: 0; right: 0; left: var(--sidebar-w); height: var(--header-h); background: var(--bg); border-bottom: 1px solid transparent; display: none; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 90; transition: left var(--transition-speed) ease, right .25s cubic-bezier(.4,0,.2,1); } body.has-sidebar .top-header { display: flex; } body.sidebar-collapsed .top-header { left: var(--sidebar-collapsed-w); } .top-header-left { display: flex; align-items: center; gap: 12px; } .top-header-title { font-family: var(--fd); font-size: 1.05rem; font-weight: 700; color: var(--tx); margin: 0; letter-spacing: .01em; } .top-header-actions { display: flex; align-items: center; gap: 12px; } .header-search { position: relative; display: flex; align-items: center; } .header-search-icon { position: absolute; left: 12px; color: var(--dm); pointer-events: none; } .header-search-input { width: 200px; padding: 8px 12px 8px 36px; border: 1px solid var(--bd); border-radius: var(--radius); font-size: .84rem; background: var(--sf2); color: var(--tx); outline: none; font-family: var(--fm); transition: border-color .15s, background .15s, width .2s; } .header-search-input:focus { border-color: var(--navy); background: var(--sf); width: 240px; } .header-search-input::placeholder { color: var(--dm); } /* Global FTS dropdown — anchored to .header-search wrapper. */ .header-search-results { position: absolute; top: calc(100% + 6px); right: 0; width: 380px; max-height: 480px; overflow-y: auto; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(15, 23, 42, .14); z-index: 950; padding: 6px; } .header-search-group { padding: 6px 10px 4px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mt); } .header-search-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; } .header-search-item:hover, .header-search-item.is-active { background: var(--sf2); } .header-search-item-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; background: var(--sf3); display: flex; align-items: center; justify-content: center; color: var(--navy-fg); } .header-search-item-body { flex: 1; min-width: 0; } .header-search-item-title { font-size: .85rem; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-search-item-sub { font-size: .72rem; color: var(--mt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-search-empty, .header-search-status { padding: 16px; text-align: center; font-size: .8rem; color: var(--mt); } /* ── "Ask the AI directly" CTA — shown under No-results state for both the header search dropdown and the Cmd+K omnibar. Subtle but distinct so it reads as a fallback offer, not another search hit. */ .header-search-ai-cta, .omnibar-ai-cta { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 0 12px 12px; padding: 10px 14px; border: 1px solid var(--bd); border-radius: 8px; background: var(--sf2); color: var(--tx); font-size: .82rem; font-weight: 500; cursor: pointer; text-align: left; transition: background .12s ease, border-color .12s ease; } .header-search-ai-cta:hover, .omnibar-ai-cta:hover { background: var(--sf3); border-color: var(--brand-primary); } .header-search-ai-cta svg, .omnibar-ai-cta svg { flex-shrink: 0; color: var(--brand-primary); } .omnibar-ai-cta { width: calc(100% - 32px); margin: 0 16px 16px; } /* ── header-search ⌘K affordance ───────────────────────────────────────── */ .header-search-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--fm); font-size: .62rem; font-weight: 700; letter-spacing: .02em; color: var(--dm); background: var(--sf); border: 1px solid var(--bd); border-radius: 5px; padding: 2px 6px; cursor: pointer; transition: opacity .15s, color .15s, border-color .15s; } .header-search-kbd:hover { color: var(--tx); border-color: var(--bd2); } .header-search-input:focus ~ .header-search-kbd { opacity: 0; pointer-events: none; } /* ── COMMAND PALETTE / OMNIBAR (Cmd/Ctrl+K · "/") ─────────────────────── */ .omnibar-overlay { display: none; position: fixed; inset: 0; z-index: 10050; background: rgba(15, 25, 43, .52); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 14vh 20px 20px; } .omnibar-overlay.open { display: flex; align-items: flex-start; justify-content: center; } .omnibar-panel { width: 100%; max-width: 600px; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 64px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .12); animation: omnibarIn .17s cubic-bezier(.2, .7, .3, 1); } @keyframes omnibarIn { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } } .omnibar-search { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--bd); } .omnibar-search-icon { color: var(--dm); flex-shrink: 0; } .omnibar-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: var(--fm); font-size: 1.04rem; color: var(--tx); } .omnibar-input::placeholder { color: var(--dm); } .omnibar-esc { font-family: var(--fm); font-size: .64rem; font-weight: 700; color: var(--dm); background: var(--sf2); border: 1px solid var(--bd); border-radius: 5px; padding: 3px 7px; flex-shrink: 0; } .omnibar-results { max-height: 52vh; overflow-y: auto; padding: 6px; } .omnibar-group { padding: 10px 10px 4px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mt); } .omnibar-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 11px; border-radius: 8px; cursor: pointer; border-left: 2px solid transparent; transition: background .12s; } .omnibar-item:hover { background: var(--sf2); } .omnibar-item.is-active { background: var(--sf2); border-left-color: var(--navy-fg); } .omnibar-item-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; background: var(--sf3); display: flex; align-items: center; justify-content: center; color: var(--navy-fg); } .omnibar-item-body { flex: 1; min-width: 0; } .omnibar-item-title { font-size: .88rem; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .omnibar-item-sub { font-size: .74rem; color: var(--mt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .omnibar-state { padding: 32px 20px; text-align: center; font-size: .82rem; color: var(--mt); } .omnibar-state-hint { margin-top: 6px; font-size: .73rem; color: var(--dm); } .omnibar-footer { display: flex; gap: 16px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--bd); background: var(--sf2); font-size: .7rem; color: var(--mt); } .omnibar-footer span { display: flex; align-items: center; gap: 5px; } .omnibar-footer kbd { font-family: var(--fm); font-size: .64rem; font-weight: 700; color: var(--mt); background: var(--sf); border: 1px solid var(--bd); border-radius: 4px; padding: 1px 5px; min-width: 16px; text-align: center; } @media (max-width: 560px) { .omnibar-overlay { padding: 8vh 12px 12px; } .omnibar-footer { display: none; } } .header-icon-btn { position: relative; width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--bd); background: var(--sf); color: var(--mt); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .header-icon-btn:hover { background: var(--sf2); color: var(--tx); border-color: var(--bd2); } .header-notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--rd); } /* Plan info inside profile dropdown */ .header-profile-plan-info { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--bd); color: var(--mt); cursor: default; } .header-profile-plan-info .plan-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .header-profile-plan-info.trial { color: #B45309; } .header-profile-plan-info.trial .plan-dot { background: #F59E0B; animation: pulse 2s infinite; } .header-profile-plan-info.active-plan { color: var(--navy-fg); } .header-profile-plan-info.active-plan .plan-dot { background: var(--green); } /* Profile avatar in header */ .header-profile-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; overflow: hidden; } .header-profile-avatar:hover { border-color: rgba(27,42,138,.25); } .header-profile-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Profile dropdown menu */ .header-profile-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 200px; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 200; display: none; overflow: hidden; } .header-profile-menu.open { display: block; } .header-profile-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: none; border: none; font-size: 13px; font-weight: 500; color: var(--tx); cursor: pointer; font-family: var(--fm); transition: background .12s; } .header-profile-menu-item:hover { background: var(--sf2); } .header-profile-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--mt); } /* ── Profile avatar (large, settings page) ─────────────────────────────── */ .profile-avatar-lg { width: 80px; height: 80px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } /* ── Small form select (for RBAC dropdowns) ────────────────────────────── */ .form-select-sm { padding: 5px 10px; font-size: .78rem; border-radius: 8px; border: 1px solid var(--bd); background: var(--sf); font-family: var(--fm); } /* ── ROLE SYSTEM ──────────────────────────────────────────────────────── */ .role-card-unavailable { opacity: .55; filter: grayscale(.3); } .role-card-unavailable:hover { opacity: .7; } .role-module-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .role-module-chip { font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--sf2); color: var(--mt); } .role-module-chip.role-module-missing { opacity: .45; text-decoration: line-through; } .role-upgrade-hint { font-size: .78rem; color: var(--am); margin-top: 8px; margin-bottom: 0; } .role-plan-available { color: var(--gn); background: rgba(0,230,118,.08); } .role-plan-locked { color: var(--mt); background: var(--sf2); } .role-badge-navy { color: var(--navy-fg); background: var(--navy-light); } .role-badge-purple { color: var(--pu); background: rgba(147,51,234,.08); } .role-badge-blue { color: #2563EB; background: rgba(37,99,235,.08); } .role-badge-amber { color: #B45309; background: rgba(217,148,10,.1); } .role-badge-green { color: #059669; background: rgba(5,150,105,.1); } .role-badge-teal { color: #0D9488; background: rgba(13,148,136,.08); } .role-badge-red { color: var(--rd); background: rgba(224,62,82,.1); } .role-badge-gray { color: var(--mt); background: var(--sf2); } /* ── PAGE LAYOUT ───────────────────────────────────────────────────────── */ .page-container { margin-left: 0; min-height: 100vh; background: var(--bg); transition: margin-left var(--transition-speed) ease; } body.has-sidebar .page-container { margin-left: var(--sidebar-w); padding-top: var(--header-h); } body.sidebar-collapsed .page-container { margin-left: var(--sidebar-collapsed-w); } .page { display: none; } .page.active { display: block; } #page-login, #page-signup, #page-onboarding { margin-left: 0; min-height: 100vh; } .page-inner { max-width: 1600px; margin: 0 auto; padding: 36px 32px 80px; } /* `.narrow` stays narrow for true form pages (login, single-record edit). */ .page-inner.narrow { max-width: 760px; } /* `.wide` is now an alias of the default — every module page is the same width so the app reads as one product, not a patchwork. */ .page-inner.wide { max-width: 1600px; } /* ── TYPOGRAPHY ────────────────────────────────────────────────────────── */ .eyebrow { font-size: .65rem; text-transform: uppercase; letter-spacing: .15em; color: var(--navy-fg); font-weight: 700; } .page-title { font-family: var(--fd); font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 700; color: var(--tx); letter-spacing: .01em; margin: .3rem 0 .5rem; line-height: 1.2; } .page-sub { font-size: .88rem; color: var(--mt); max-width: 560px; margin-bottom: 1.8rem; } .help-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sf2); color: var(--dm); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid var(--bd); transition: background .15s, color .15s; vertical-align: middle; margin-left: 8px; } .help-link:hover { background: var(--navy); color: #fff; border-color: var(--navy); } h2 { font-size: 1.15rem; font-weight: 700; color: var(--tx); letter-spacing: -.01em; } h3 { font-size: 1rem; font-weight: 700; color: var(--tx); } /* ── CARDS ─────────────────────────────────────────────────────────────── */ .card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; } .card:hover { border-color: var(--bd2); } .card.clickable { cursor: pointer; } .card.clickable:hover { box-shadow: var(--shadow); } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } /* ── BUTTONS ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: var(--radius); padding: 9px 18px; font-size: .84rem; font-weight: 600; transition: all .15s; white-space: nowrap; } .btn-primary { background: var(--navy); color: #fff; } .btn-primary:hover { background: var(--navy2); } .btn-green { background: var(--green); color: #1A1F36; font-weight: 700; } .btn-green:hover { background: var(--green2); } .btn-secondary { background: var(--sf); color: var(--tx); border: 1px solid var(--bd2); } .btn-secondary:hover { background: var(--sf2); border-color: var(--bd2); } .btn-outline { background: none; color: var(--navy-fg); border: 1px solid var(--navy-fg); } .btn-outline:hover { background: rgba(27,42,138,.06); } .btn-danger { background: rgba(224,62,82,.08); color: var(--rd); border: 1px solid rgba(224,62,82,.25); } .btn-danger:hover { background: rgba(224,62,82,.14); } .btn-sm { padding: 5px 13px; font-size: .78rem; border-radius: 6px; } .btn-lg { padding: 12px 28px; font-size: .92rem; } .btn-icon { padding: 7px; min-width: 32px; justify-content: center; } .btn:disabled { opacity: .4; cursor: not-allowed; } /* ── STATUS BADGES ─────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 3px 9px; border-radius: 20px; } .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-active { color: var(--gn); background: rgba(0,200,83,.1); } .badge-trial { color: var(--navy-fg); background: var(--navy-light); } .badge-past-due { color: var(--rd); background: rgba(224,62,82,.1); } .badge-canceled { color: var(--dm); background: var(--sf2); } .badge-draft { color: var(--mt); background: var(--sf2); } .badge-sent { color: var(--navy-fg); background: var(--navy-light); } .badge-viewed { color: var(--am); background: rgba(217,148,10,.1); } .badge-signed { color: var(--gn); background: rgba(0,200,83,.1); } .badge-paid { color: var(--gn); background: rgba(0,200,83,.1); } .badge-overdue { color: var(--rd); background: rgba(224,62,82,.1); } .badge-pending { color: var(--am); background: rgba(217,148,10,.1); } .badge-void { background: var(--sf3); color: var(--dm); } .badge-lead { color: var(--navy-fg); background: var(--navy-light); } .badge-prospect { color: var(--am); background: rgba(217,148,10,.1); } .badge-customer { color: var(--gn); background: rgba(0,200,83,.1); } .badge-churned { color: var(--rd); background: rgba(224,62,82,.1); } .badge-won { color: var(--gn); background: rgba(0,200,83,.1); } .badge-lost { color: var(--rd); background: rgba(224,62,82,.1); } .badge-expired { color: var(--dm); background: var(--sf2); } /* ── FORMS ─────────────────────────────────────────────────────────────── */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: .72rem; font-weight: 600; color: var(--mt); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .07em; } .form-input, .form-select, .form-textarea { width: 100%; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); color: var(--tx); font-size: .88rem; padding: 9px 13px; transition: border-color .15s, box-shadow .15s; outline: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,42,138,.12); } .form-input::placeholder, .form-textarea::placeholder { color: var(--dm); } .form-select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A6480' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .form-textarea { resize: vertical; min-height: 90px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-row.three { grid-template-columns: 1fr 1fr 1fr; } .form-hint { font-size: .74rem; color: var(--dm); margin-top: 5px; } .form-check { display: flex; align-items: center; gap: 8px; font-size: .84rem; cursor: pointer; } .form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--navy); } /* File upload */ .file-drop { border: 2px dashed var(--bd2); border-radius: var(--radius-lg); padding: 28px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; background: var(--sf2); } .file-drop:hover, .file-drop.drag-over { border-color: var(--navy); background: rgba(27,42,138,.03); } .file-drop-icon { font-size: 2rem; margin-bottom: 8px; } .file-drop-text { font-size: .84rem; color: var(--mt); } .file-drop-text strong { color: var(--navy-fg); } /* ── TABLES ────────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--bd); background: var(--sf); } table { width: 100%; border-collapse: collapse; } th { background: var(--sf2); color: var(--mt); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--bd); white-space: nowrap; } td { padding: 12px 16px; font-size: .84rem; border-bottom: 1px solid var(--bd); color: var(--tx); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--sf2); } .td-action { display: flex; gap: 6px; align-items: center; } /* ── SECTION HEADERS ───────────────────────────────────────────────────── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; } .section-header h2 { margin: 0; } /* ── TABS ──────────────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bd); margin-bottom: 24px; overflow-x: auto; } .tab-btn { background: none; border: none; color: var(--mt); font-size: .82rem; font-weight: 600; padding: 9px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .tab-btn:hover { color: var(--tx); } .tab-btn.active { color: var(--navy-fg); border-bottom-color: var(--navy-fg); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── STAT CARDS ────────────────────────────────────────────────────────── */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px,1fr)); gap: 14px; margin-bottom: 28px; } .stat-card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); } .stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mt); font-weight: 600; margin-bottom: 8px; } .stat-value { font-size: 1.9rem; font-weight: 800; color: var(--tx); letter-spacing: -.02em; line-height: 1; } .stat-sub { font-size: .74rem; color: var(--dm); margin-top: 6px; } .stat-trend-up { color: var(--gn); } .stat-trend-down { color: var(--rd); } /* ── EMPTY STATE ───────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 56px 20px; color: var(--mt); } .empty-icon { font-size: 2.2rem; margin-bottom: 10px; opacity: .45; display: flex; align-items: center; justify-content: center; } .empty-icon svg { color: var(--mt); } .empty-state p { font-size: .88rem; } /* ── ALERT / NOTICE ────────────────────────────────────────────────────── */ .notice { padding: 12px 16px; border-radius: var(--radius); font-size: .84rem; margin-bottom: 18px; display: flex; align-items: flex-start; gap: 10px; } .notice-info { background: var(--navy-light); border: 1px solid rgba(27,42,138,.18); color: var(--navy-fg); } .notice-warn { background: rgba(217,148,10,.08); border: 1px solid rgba(217,148,10,.2); color: var(--am); } .notice-success { background: rgba(0,200,83,.08); border: 1px solid rgba(0,200,83,.2); color: #065f46; } .notice-error { background: rgba(224,62,82,.08); border: 1px solid rgba(224,62,82,.2); color: var(--rd); } /* ── MODAL ─────────────────────────────────────────────────────────────── */ .modal-backdrop { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(15,25,43,.5); overflow-y: auto; padding: 40px 20px; backdrop-filter: blur(2px); } .modal-backdrop.open { display: flex; align-items: center; justify-content: center; } /* Second-level modal — sits above the modal that opened it, with a slightly deeper scrim so the stacking reads clearly. */ .modal-backdrop.modal-stacked { z-index: 10010; background: rgba(15,25,43,.62); } .modal-box { max-width: 640px; width: 100%; background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 28px 32px; position: relative; box-shadow: var(--shadow-lg); } .modal-box.wide { max-width: 900px; } .modal-box.narrow { max-width: 440px; } .modal-close { position: absolute; top: 14px; right: 14px; background: var(--sf2); border: 1px solid var(--bd); color: var(--mt); width: 30px; height: 30px; border-radius: 50%; font-size: .9rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, color .12s; } .modal-close:hover { background: var(--sf3); color: var(--tx); } .modal-title { font-size: 1.15rem; font-weight: 700; color: var(--tx); margin-bottom: 20px; } .modal-actions { display: flex; gap: 10px; margin-top: 24px; justify-content: flex-end; } /* ── LOGIN / SIGNUP PAGE ───────────────────────────────────────────────── */ .login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg); } .login-box { background: var(--sf); border: 1px solid var(--bd); border-radius: 18px; padding: 40px 36px; width: 100%; max-width: 420px; box-shadow: var(--shadow); } .login-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; } .login-logo img { height: 44px; max-width: 80%; object-fit: contain; } .login-logo-caption { font-size: .72rem; font-weight: 700; color: var(--mt); letter-spacing: .22em; text-transform: uppercase; } .login-title { font-family: var(--fd); font-size: 1.35rem; font-weight: 700; text-align: center; margin-bottom: 6px; color: var(--tx); } .login-sub { font-size: .84rem; color: var(--mt); text-align: center; margin-bottom: 28px; } .login-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: .74rem; color: var(--dm); } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--bd); } .btn-oauth { width: 100%; background: var(--sf); border: 1px solid var(--bd); color: var(--tx); padding: 10px 20px; border-radius: var(--radius); font-size: .88rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s, border-color .15s; box-shadow: var(--shadow-sm); margin-bottom: 8px; } .btn-oauth:hover { background: var(--sf2); border-color: var(--bd2); } .btn-oauth img, .btn-oauth svg { width: 18px; height: 18px; } .login-tabs { display: flex; border: 1px solid var(--bd); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; } .login-tab { flex: 1; padding: 9px; text-align: center; font-size: .8rem; font-weight: 600; background: none; border: none; color: var(--mt); cursor: pointer; transition: all .15s; } .login-tab.active { background: var(--navy-light); color: var(--navy-fg); } /* ── Login: 2-col layout + polish ──────────────────────────────────────── */ .login-shell { width: 100%; max-width: 440px; display: grid; grid-template-columns: 1fr; } .login-hero { display: none; } @media (min-width: 1024px) { .login-shell { max-width: 1080px; grid-template-columns: 1fr 1fr; background: var(--sf); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,70,.18); border: 1px solid var(--bd); } .login-shell .login-box { border: none; box-shadow: none; border-radius: 0; max-width: none; align-self: center; padding: 48px 44px; } .login-hero { display: flex; flex-direction: column; background: linear-gradient(135deg, #1B2A8A 0%, #2a3ca5 60%, #14206c 100%); color: #fff; padding: 56px 48px; position: relative; overflow: hidden; min-height: 600px; } .login-hero::before { content: ''; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(0,230,118,.22), transparent 65%); pointer-events: none; } .login-hero::after { content: ''; position: absolute; bottom: -140px; left: -100px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(77,158,255,.18), transparent 70%); pointer-events: none; } .login-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; } } .login-hero-spacer { flex: 1; min-height: 32px; } .login-hero-status { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: 6px 12px 6px 10px; border-radius: 999px; backdrop-filter: blur(6px); } .login-hero-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #00E676; box-shadow: 0 0 8px rgba(0,230,118,.7); animation: heroPulse 2.4s ease-in-out infinite; } @keyframes heroPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } } .login-hero-eyebrow { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: .26em; text-transform: uppercase; margin-bottom: 14px; } .login-hero-headline { font-size: 30px; font-weight: 800; line-height: 1.18; letter-spacing: -.02em; margin: 0 0 16px; color: #fff; } .login-hero-sub { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0 0 28px; max-width: 420px; } .login-hero-features { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; } .login-hero-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.86); line-height: 1.5; } .login-hero-features .check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,230,118,.18); color: #00E676; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .login-hero-footnote { font-size: 11.5px; color: rgba(255,255,255,.5); letter-spacing: .04em; margin-top: auto; } .login-action-wrap { position: relative; } .last-used-badge { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); background: #00E676; color: #0d1c2e; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; pointer-events: none; } .login-tab .last-used-tab-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #00E676; margin-left: 6px; vertical-align: middle; } .login-btn-spinner { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; margin-right: 8px; vertical-align: middle; } .btn-oauth .login-btn-spinner { border-color: rgba(0,0,0,.15); border-top-color: var(--tx); margin-right: 0; margin-left: 6px; } .is-loading .login-btn-spinner { display: inline-block; } .is-loading { opacity: .85; pointer-events: none; cursor: wait; } @keyframes loginFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .login-tab-panel { animation: loginFadeUp .22s ease both; } .login-cross-link { text-align: center; margin-top: 18px; font-size: .76rem; color: var(--mt); } .login-cross-link a { color: var(--navy-fg); font-weight: 600; text-decoration: none; } .login-cross-link a:hover { text-decoration: underline; } .password-strength { display: flex; gap: 4px; margin-top: 6px; height: 4px; } .password-strength-bar { flex: 1; background: var(--bd); border-radius: 2px; transition: background .2s; } .password-strength.s-1 .password-strength-bar:nth-child(1) { background: #ef4444; } .password-strength.s-2 .password-strength-bar:nth-child(-n+2) { background: #f59e0b; } .password-strength.s-3 .password-strength-bar:nth-child(-n+3) { background: #84cc16; } .password-strength.s-4 .password-strength-bar { background: #00E676; } .password-strength-label { font-size: .72rem; color: var(--mt); margin-top: 4px; font-weight: 600; } /* ── Password visibility toggle ────────────────────────────────────────── */ .pass-toggle-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 2px; color: var(--dm); display: flex; align-items: center; transition: color .15s; } .pass-toggle-btn:hover { color: var(--mt); } /* ── Settings page tabs ────────────────────────────────────────────────── */ .settings-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--bd); margin-bottom: 24px; } .settings-tab { padding: 10px 20px; font-size: .84rem; font-weight: 600; color: var(--mt); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; } .settings-tab:hover { color: var(--tx); } .settings-tab.active { color: var(--navy-fg); border-bottom-color: var(--navy-fg); } /* ── ONBOARDING OVERLAY ────────────────────────────────────────────────── */ .onboarding-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .onboarding-box { background: var(--sf); border: 1px solid var(--bd); border-radius: 18px; padding: 40px 36px; width: 100%; max-width: 560px; box-shadow: var(--shadow); position: relative; } .onboarding-steps { display: flex; gap: 8px; margin-bottom: 28px; } .onboarding-step { flex: 1; height: 4px; border-radius: 999px; background: var(--sf3); transition: background .2s; } .onboarding-step.done { background: var(--green); } .onboarding-step.current { background: var(--navy); } /* Onboarding plan cards */ .ob-plan-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .ob-plan-card { display: flex; align-items: center; gap: 14px; background: var(--sf); border: 2px solid var(--bd); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color .15s, background .15s; position: relative; } .ob-plan-card:hover { border-color: var(--navy); background: rgba(27,42,138,.03); } .ob-plan-card.selected { border-color: var(--navy); background: rgba(27,42,138,.06); } .ob-plan-card.recommended { border-color: var(--green); } .ob-plan-card.recommended.selected { border-color: var(--navy); } .ob-plan-badge { position: absolute; top: -9px; right: 14px; background: var(--green); color: #111; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 2px 10px; border-radius: 99px; } .ob-plan-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bd2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .15s; } .ob-plan-card.selected .ob-plan-radio { border-color: var(--navy); } .ob-radio-dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: background .15s; } .ob-plan-card.selected .ob-radio-dot { background: var(--navy); } .ob-plan-info { flex: 1; } .ob-plan-name { font-family: var(--fd); font-weight: 700; font-size: 1rem; } .ob-plan-price { font-size: .85rem; font-weight: 600; color: var(--tx); margin-top: 2px; } .ob-plan-price span { font-weight: 400; color: var(--mt); } .ob-plan-desc { font-size: .75rem; color: var(--mt); margin-top: 2px; } .ob-plan-seat { font-size: .7rem; color: var(--dm); margin-top: 2px; font-style: italic; } .btn-link { background: none; border: none; color: var(--mt); cursor: pointer; text-decoration: underline; font-family: inherit; padding: 0; } .btn-link:hover { color: var(--tx); } /* ── TOAST ─────────────────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px); background: #1e293b; border: 1px solid rgba(255,255,255,.1); color: #f1f5f9; padding: 10px 22px; border-radius: 10px; font-size: .83rem; z-index: 200000; opacity: 0; transition: opacity .28s, transform .28s; pointer-events: none; max-width: 400px; text-align: center; box-shadow: var(--shadow-lg); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast-success { border-left: 3px solid var(--gn); } .toast-error { border-left: 3px solid var(--rd); } /* ── SPINNER ───────────────────────────────────────────────────────────── */ .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bd); border-top-color: var(--navy); animation: spin .7s linear infinite; display: inline-block; } .loading-row { display: flex; align-items: center; justify-content: center; padding: 40px; gap: 12px; color: var(--mt); font-size: .84rem; } /* ── KANBAN BOARD (CRM pipeline, task boards) ──────────────────────────── */ .kanban-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; } .kanban-col { background: var(--sf2); border-radius: var(--radius-lg); padding: 0 0 12px 0; min-height: 200px; } .kanban-col-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .kanban-col-title { font-size: .88rem; font-weight: 700; } .kanban-col-count { background: var(--sf3); color: var(--mt); font-size: .72rem; font-weight: 700; border-radius: 999px; min-width: 22px; height: 22px; padding: 0 7px; display: flex; align-items: center; justify-content: center; } .kanban-col-body { padding: 0 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; } .kanban-card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); padding: 12px; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow .12s, border-color .15s; } .kanban-card:hover { box-shadow: var(--shadow); border-color: var(--bd2); } .kanban-card-title { font-size: .86rem; font-weight: 700; line-height: 1.3; margin-bottom: 4px; overflow-wrap: anywhere; } .kanban-card-sub { font-size: .76rem; color: var(--mt); overflow-wrap: anywhere; } .kanban-card-value { font-size: .82rem; font-weight: 700; color: var(--navy-fg); margin-top: 6px; overflow-wrap: anywhere; } .kanban-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .kanban-card-tag { font-size: .66rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--sf2); color: var(--mt); } .kanban-add { display: block; width: calc(100% - 20px); margin: 8px 10px 0; background: none; border: 1px dashed var(--bd2); border-radius: var(--radius); color: var(--dm); font-size: .8rem; padding: 7px; cursor: pointer; transition: all .12s; } .kanban-add:hover { border-color: var(--navy); color: var(--navy-fg); background: rgba(27,42,138,.04); } /* ── PIPELINE VALUE BAR ────────────────────────────────────────────────── */ .pipeline-summary { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .pipeline-stat { font-size: .78rem; color: var(--mt); } .pipeline-stat strong { color: var(--tx); font-weight: 700; } /* ── ACTIVITY FEED ─────────────────────────────────────────────────────── */ .activity-feed { display: flex; flex-direction: column; } .activity-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--bd); } .activity-item:last-child { border-bottom: none; } .activity-dot { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; margin-top: 2px; } .activity-dot.note { background: rgba(27,42,138,.1); color: var(--navy-fg); } .activity-dot.call { background: rgba(0,200,83,.1); color: var(--gn); } .activity-dot.email { background: rgba(217,148,10,.1); color: var(--am); } .activity-dot.meeting { background: rgba(147,51,234,.1); color: var(--pu); } .activity-dot.task { background: rgba(224,62,82,.1); color: var(--rd); } .activity-body { flex: 1; } .activity-body p { font-size: .86rem; margin: 0; color: var(--tx); } .activity-meta { font-size: .72rem; color: var(--dm); margin-top: 3px; } /* ── INVOICE CARD ──────────────────────────────────────────────────────── */ .invoice-card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius-lg); padding: 18px 22px; display: flex; align-items: center; gap: 20px; box-shadow: var(--shadow-sm); transition: border-color .15s; } .invoice-card:hover { border-color: var(--bd2); } .inv-amount { font-size: 1.5rem; font-weight: 800; color: var(--tx); letter-spacing: -.02em; } .inv-desc { font-size: .84rem; color: var(--mt); margin-top: 2px; } .inv-meta { font-size: .74rem; color: var(--dm); margin-top: 4px; } .inv-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; } /* Stripe payment container */ .payment-container { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius-lg); padding: 24px; margin-top: 20px; box-shadow: var(--shadow-sm); } #payment-element { margin-bottom: 20px; } /* ── CONTRACT CARD ─────────────────────────────────────────────────────── */ .contract-card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: var(--shadow-sm); transition: border-color .15s; } .contract-card:hover { border-color: var(--bd2); } .contract-title { font-size: 1rem; font-weight: 700; color: var(--tx); margin-bottom: 6px; } .contract-meta { font-size: .78rem; color: var(--mt); display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .contract-body { font-size: .85rem; line-height: 1.8; color: var(--tx); max-height: 50vh; overflow-y: auto; padding: 18px; background: var(--sf2); border: 1px solid var(--bd); border-radius: var(--radius); margin-bottom: 20px; } .contract-body h1, .contract-body h2 { margin: 1.2em 0 .5em; font-size: 1.1rem; } .contract-body p { margin: .6em 0; } /* Signature area */ .signature-pad { border: 2px solid var(--bd); border-radius: var(--radius); background: #fff; cursor: crosshair; touch-action: none; } .sign-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .sign-row .form-input { flex: 1; min-width: 220px; } .sign-disclaimer { font-size: .72rem; color: var(--dm); margin-top: 8px; } /* ── AI CHATBOT PANEL ──────────────────────────────────────────────────── */ :root { --ai-width: 480px; } /* Two presentations: 1. FLOATING (default) — small callout anchored bottom-right above the FAB so it doesn't cover the AI button or the top-header actions. 2. DOCKED — full-height right column. Top-header AND page-container both shift inward by --ai-width so nothing in the right side of the topbar gets covered. Triggered by the pin button. */ .ai-panel { position: fixed; top: auto; right: 20px; bottom: 92px; width: 380px; max-width: calc(100vw - 32px); height: 580px; max-height: calc(100vh - 120px); background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; box-shadow: 0 24px 60px rgba(11,16,32,.22), 0 4px 14px rgba(11,16,32,.10); z-index: 9000; display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; transform: translateY(8px) scale(.96); opacity: 0; visibility: hidden; transition: transform .18s ease, opacity .15s ease, visibility 0s .15s, top .25s cubic-bezier(.4,0,.2,1), right .25s cubic-bezier(.4,0,.2,1), bottom .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1), height .25s cubic-bezier(.4,0,.2,1), border-radius .25s cubic-bezier(.4,0,.2,1); } .ai-panel.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; transition: transform .18s ease, opacity .15s ease, top .25s cubic-bezier(.4,0,.2,1), right .25s cubic-bezier(.4,0,.2,1), bottom .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1), height .25s cubic-bezier(.4,0,.2,1), border-radius .25s cubic-bezier(.4,0,.2,1); } /* Docked — promoted to a persistent right-edge column. */ body.ai-panel-docked .ai-panel { top: 0; right: 0; bottom: 0; width: var(--ai-width); max-width: 100%; height: auto; max-height: none; border: none; border-left: 1px solid var(--bd); border-radius: 0; box-shadow: var(--shadow-lg); overflow: visible; transform: none; opacity: 1; visibility: visible; } body.ai-panel-docked .top-header { right: var(--ai-width); } body.ai-panel-docked .page-container { padding-right: var(--ai-width); transition: padding-right .25s cubic-bezier(.4,0,.2,1); } /* Resize handle is only useful when docked (snaps to the panel's left edge). */ .ai-resize-handle { position: absolute; top: 0; left: -3px; bottom: 0; width: 6px; cursor: ew-resize; background: transparent; z-index: 1; display: none; transition: background .12s ease; } .ai-resize-handle:hover, .ai-resize-handle:active { background: rgba(27,42,138,.30); } body.ai-panel-docked .ai-resize-handle { display: block; } /* Pin button — small icon-only button in the panel header */ .ai-pin-btn { background: none; border: 0; width: 26px; height: 26px; border-radius: 6px; color: var(--mt); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease, color .12s ease; } .ai-pin-btn:hover { background: var(--sf2); color: var(--navy-fg); } @media (max-width: 900px) { body.ai-panel-docked .page-container { padding-right: 0; } body.ai-panel-docked .top-header { right: 0; } body.ai-panel-docked .ai-panel { width: 100%; } } .ai-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--bd); flex-shrink: 0; } .ai-panel-title { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--navy-fg); display: flex; align-items: center; gap: 8px; } .ai-panel-title .ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; } .ai-panel-messages { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .ai-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.55; } .ai-msg.user { background: var(--navy); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .ai-msg.assistant { background: var(--sf2); color: var(--tx); align-self: flex-start; border-bottom-left-radius: 4px; } .ai-msg-time { font-size: 10px; color: var(--dm); margin-top: 3px; } .ai-typing { display: flex; gap: 4px; padding: 12px 14px; align-self: flex-start; } .ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--dm); animation: pulse 1.4s infinite; } .ai-typing span:nth-child(2) { animation-delay: .2s; } .ai-typing span:nth-child(3) { animation-delay: .4s; } .ai-panel-input { padding: 12px 14px; border-top: 1px solid var(--bd); display: flex; gap: 8px; flex-shrink: 0; } .ai-panel-input textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; border: 1px solid var(--bd); border-radius: var(--radius); padding: 9px 12px; font-size: .84rem; font-family: var(--fm); outline: none; transition: border-color .15s; } .ai-panel-input textarea:focus { border-color: var(--navy); } .ai-panel-input button { background: var(--navy); color: #fff; border: none; border-radius: var(--radius); padding: 0 16px; font-weight: 600; font-size: .82rem; transition: background .15s; } .ai-panel-input button:hover { background: var(--navy2); } .ai-panel-context { font-size: 10px; font-weight: 600; color: var(--mt); background: var(--sf2); padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } .ai-quick-prompts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; } .ai-prompt-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bd); background: var(--sf2); font-size: 12px; font-weight: 500; color: var(--tx); cursor: pointer; font-family: var(--fm); transition: background .12s, border-color .12s; } .ai-prompt-chip:hover { background: var(--sf); border-color: var(--navy); color: var(--navy-fg); } /* AI FAB */ .ai-fab { position: fixed; bottom: 24px; right: 24px; z-index: 200; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(27,42,138,.35); display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s; } .ai-fab:hover { transform: scale(1.08); background: var(--navy2); } body.ai-panel-docked .ai-fab { display: none; } /* ── AI AUTOMATIONS GALLERY ──────────────────────────────────────────── */ .auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .auto-card { display: flex; align-items: flex-start; gap: 14px; padding: 20px; position: relative; } .auto-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--navy-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--navy-fg); } .auto-card-body { flex: 1; min-width: 0; } .auto-card-title { font-weight: 700; font-size: .88rem; color: var(--tx); margin-bottom: 4px; } .auto-card-desc { font-size: .78rem; color: var(--mt); line-height: 1.45; margin-bottom: 10px; } .auto-card-badges { display: flex; flex-wrap: wrap; gap: 5px; } .auto-module-badge { display: inline-block; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; background: var(--sf2); color: var(--mt); border: 1px solid var(--bd); } .auto-run-btn { flex-shrink: 0; align-self: center; } .auto-card-locked { opacity: .55; cursor: default; } .auto-card-locked:hover { border-color: var(--bd); box-shadow: none; } .auto-lock-badge { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; align-self: center; font-size: .68rem; font-weight: 700; color: var(--dm); background: var(--sf2); padding: 4px 10px; border-radius: 999px; white-space: nowrap; } /* ── PLAYBOOK CATALOG (LEAPai) ─────────────────────────────────────────── */ .pb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .pb-chip { font-size: .76rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; background: var(--sf2); color: var(--mt); border: 1px solid var(--bd); transition: background .12s, color .12s, border-color .12s; } .pb-chip:hover { color: var(--tx); border-color: var(--bd2); } /* Active chip uses white text instead of --navy-fg. In light mode --navy-fg resolves to --navy itself (dark on dark) — explicit #fff guarantees contrast in both themes since the chip's background is always --navy. */ .pb-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); } /* Catalog cards stack vertically — icon+title, description, then a full-width control — so titles get the whole card width. */ .pb-card { display: flex; flex-direction: column; padding: 18px; } .pb-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .pb-card-title { font-weight: 700; font-size: .88rem; color: var(--tx); line-height: 1.3; } .pb-card-desc { font-size: .78rem; color: var(--mt); line-height: 1.5; flex: 1 1 auto; margin-bottom: 14px; } .pb-card-foot { display: flex; } .pb-card-foot .btn { width: 100%; } .pb-card.pb-added { opacity: .72; } .pb-lock { width: 100%; text-align: center; font-size: .72rem; font-weight: 700; color: var(--dm); background: var(--sf2); padding: 8px 11px; border-radius: var(--radius); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The trigger → action line — used in the add-playbook modal. */ .pb-flow { font-size: .72rem; font-weight: 600; color: var(--dm); background: var(--sf2); border-radius: 7px; padding: 5px 9px; display: inline-block; } /* ── UPGRADE CTA (locked modules) ──────────────────────────────────────── */ .upgrade-cta { text-align: center; padding: 80px 20px; } .upgrade-cta-icon { font-size: 3rem; margin-bottom: 16px; opacity: .3; } .upgrade-cta h2 { font-family: var(--fd); font-size: 1.5rem; margin-bottom: 8px; } .upgrade-cta p { font-size: .9rem; color: var(--mt); max-width: 400px; margin: 0 auto 24px; } /* ── BILLING PAGE ──────────────────────────────────────────────────────── */ .plan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .plan-card { background: var(--sf); border: 2px solid var(--bd); border-radius: var(--radius-lg); padding: 24px; text-align: center; transition: border-color .15s; display: flex; flex-direction: column; } .plan-card button { margin-top: auto; } .plan-card.current { border-color: var(--navy); background: rgba(27,42,138,.04); box-shadow: 0 4px 16px rgba(27,42,138,.12); } .plan-card.inactive { opacity: .5; transition: opacity .2s, border-color .15s; } .plan-card.inactive:hover { opacity: .75; } .plan-name { font-family: var(--fd); font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; } .plan-price { font-size: 2rem; font-weight: 800; color: var(--tx); margin-bottom: 4px; } .plan-price span { font-size: .8rem; font-weight: 500; color: var(--mt); } .plan-seat { font-size: .8rem; color: var(--mt); margin-bottom: 16px; } .plan-features { list-style: none; text-align: left; margin-bottom: 20px; } .plan-features li { padding: 6px 0; font-size: .82rem; color: var(--tx); display: flex; align-items: center; gap: 8px; } .plan-features li::before { content: '\2713'; color: var(--gn); font-weight: 700; } /* ── TEAM PAGE ─────────────────────────────────────────────────────────── */ .team-member-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bd); } .team-member-row:last-child { border-bottom: none; } .team-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; } .team-info { flex: 1; min-width: 0; } .team-name { font-weight: 600; font-size: .88rem; } .team-email { font-size: .78rem; color: var(--dm); margin-top: 1px; } .team-role-badge { font-size: .7rem; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; } /* ── BRANDING SETTINGS ─────────────────────────────────────────────────── */ .palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .palette-swatch { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); cursor: pointer; text-align: left; font-family: var(--fm); transition: border-color .15s, box-shadow .15s, transform .12s; } .palette-swatch:hover { border-color: var(--bd2); transform: translateY(-1px); } .palette-swatch.active { border-color: var(--navy-fg); box-shadow: 0 0 0 2px rgba(27,42,138,.12); } .palette-swatch-bars { display: flex; height: 28px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); } .palette-swatch-bars span { flex: 1; height: 100%; } .palette-swatch-name { font-size: .8rem; font-weight: 700; color: var(--tx); display: flex; align-items: baseline; gap: 6px; } .palette-swatch-tag { font-size: .62rem; font-weight: 600; color: var(--mt); text-transform: uppercase; letter-spacing: .08em; } .palette-swatch.active .palette-swatch-name { color: var(--navy-fg); } [data-theme="dark"] .palette-swatch.active { box-shadow: 0 0 0 2px rgba(138,166,255,.22); } .color-picker-row { display: flex; align-items: center; gap: 12px; } .color-picker-row input[type="color"] { width: 40px; height: 40px; border: 2px solid var(--bd); border-radius: var(--radius); cursor: pointer; padding: 2px; } .logo-preview { width: 120px; height: 120px; border: 2px dashed var(--bd); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sf2); } .logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ── SEARCH / FILTER BAR ───────────────────────────────────────────────── */ .filter-bar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; } .filter-bar .form-input { max-width: 300px; } .filter-pills { display: flex; gap: 6px; flex-wrap: wrap; } .filter-pill { padding: 5px 14px; font-size: .78rem; font-weight: 600; border-radius: 999px; border: 1px solid var(--bd2); background: var(--sf); color: var(--mt); cursor: pointer; transition: all .12s; } .filter-pill:hover { border-color: var(--navy); color: var(--navy-fg); } .filter-pill.active { background: var(--navy); border-color: var(--navy); color: #fff; } /* ── DASHBOARD COMPONENTS ─────────────────────────────────────────────── */ .dash-welcome { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; } .dash-welcome-text h1 { font-family: var(--fd); font-size: clamp(1.4rem, 3vw, 1.7rem); font-weight: 700; color: var(--tx); letter-spacing: .01em; margin-bottom: 4px; } .dash-welcome-text p { font-size: .88rem; color: var(--mt); } .dash-welcome-actions { display: flex; gap: 10px; } .dash-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; } .dash-stat-card { background: var(--sf); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); border: 1px solid transparent; transition: border-color .15s, box-shadow .15s; } .dash-stat-card:hover { border-color: var(--bd); box-shadow: var(--shadow); } .dash-stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .dash-stat-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--sf2); color: var(--dm); display: flex; align-items: center; justify-content: center; } .dash-stat-icon svg { width: 20px; height: 20px; } .dash-stat-more { background: none; border: none; color: var(--dm); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .dash-stat-more:hover { color: var(--tx); background: var(--sf2); } .dash-stat-label { font-size: .75rem; font-weight: 600; color: var(--mt); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } .dash-stat-value { font-size: 1.8rem; font-weight: 800; color: var(--tx); letter-spacing: -.02em; line-height: 1; } .dash-stat-footer { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .dash-stat-trend { display: inline-flex; align-items: center; gap: 3px; font-size: .75rem; font-weight: 600; } .dash-stat-trend.up { color: var(--gn); } .dash-stat-trend.down { color: var(--rd); } .dash-stat-trend svg { width: 14px; height: 14px; } .dash-stat-period { font-size: .72rem; color: var(--dm); } .dash-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; } .dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; } .dash-chart-card { background: var(--sf); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid transparent; transition: border-color .15s; } .dash-chart-card:hover { border-color: var(--bd); } .dash-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .dash-card-header h3 { font-size: .92rem; font-weight: 700; color: var(--tx); margin: 0; } .dash-card-header .view-all { font-size: .78rem; font-weight: 600; color: var(--navy-fg); cursor: pointer; background: none; border: none; font-family: var(--fm); transition: color .15s; } .dash-card-header .view-all:hover { color: var(--navy2); } .dash-card-sub { font-size: .78rem; color: var(--dm); margin-top: -14px; margin-bottom: 18px; } .dash-chart-placeholder { height: 200px; background: var(--sf2); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--dm); font-size: .82rem; } /* Dashboard mini-table */ .dash-mini-table { width: 100%; border-collapse: collapse; } .dash-mini-table th { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--dm); padding: 0 8px 10px; text-align: left; border-bottom: 1px solid var(--bd); } .dash-mini-table td { padding: 10px 8px; font-size: .82rem; color: var(--tx); border-bottom: 1px solid var(--bd); } .dash-mini-table tr:last-child td { border-bottom: none; } .dash-mini-table tr:hover td { background: var(--sf2); } /* Dashboard list items (top contacts, automations) */ .dash-list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--bd); } .dash-list-item:last-child { border-bottom: none; } .dash-list-item-info { flex: 1; min-width: 0; } .dash-list-item-title { font-size: .84rem; font-weight: 600; color: var(--tx); } .dash-list-item-sub { font-size: .75rem; color: var(--dm); margin-top: 2px; } .dash-list-item-value { font-size: .88rem; font-weight: 700; color: var(--tx); } /* Progress bar */ .dash-progress { height: 6px; background: var(--sf2); border-radius: 3px; margin-top: 6px; overflow: hidden; } .dash-progress-fill { height: 100%; border-radius: 3px; background: var(--navy); transition: width .4s ease; } /* Quick action buttons (dashboard) */ .dash-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dash-action-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--sf2); border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font-family: var(--fm); font-size: .82rem; font-weight: 600; color: var(--tx); transition: background .15s, border-color .15s; } .dash-action-btn:hover { background: var(--sf); border-color: var(--bd); } .dash-action-btn .dash-action-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--navy-light); color: var(--navy-fg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-action-btn .dash-action-icon svg { width: 16px; height: 16px; } /* ── MOBILE SIDEBAR TOGGLE ─────────────────────────────────────────────── */ .mobile-sidebar-toggle { display: none; position: fixed; top: 6px; left: 12px; z-index: 110; width: 36px; height: 36px; border-radius: 8px; background: var(--sf); border: 1px solid var(--bd); box-shadow: var(--shadow-sm); color: var(--tx); cursor: pointer; align-items: center; justify-content: center; } /* ── UPGRADE CELEBRATION ──────────────────────────────────────────────── */ .celebration-overlay { position: fixed; inset: 0; z-index: 10001; background: rgba(15,25,43,.55); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; } .celebration-overlay.show { opacity: 1; } .celebration-box { background: var(--sf); border-radius: 16px; padding: 48px 40px; text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,.2); transform: scale(.9); transition: transform .35s cubic-bezier(.34,1.56,.64,1); max-width: 400px; width: 90%; position: relative; overflow: hidden; } .celebration-overlay.show .celebration-box { transform: scale(1); } .celebration-emoji { font-size: 48px; margin-bottom: 16px; } .celebration-title { font-family: var(--fd); font-size: 1.4rem; font-weight: 700; color: var(--navy-fg); margin-bottom: 8px; } .celebration-sub { font-size: .88rem; color: var(--mt); margin-bottom: 24px; line-height: 1.5; } .celebration-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 28px; border-radius: var(--radius); background: var(--navy); color: #fff; border: none; font-size: .85rem; font-weight: 600; cursor: pointer; font-family: var(--fm); transition: opacity .15s; } .celebration-btn:hover { opacity: .9; } .celebration-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .celebration-btn:active { transform: scale(.97); } .confetti-particle { position: fixed; width: 8px; height: 8px; border-radius: 2px; z-index: 10002; pointer-events: none; animation: confettiFall var(--fall-duration, 3s) var(--fall-delay, 0s) ease-in forwards; } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } /* ── RESPONSIVE ────────────────────────────────────────────────────────── */ @media (max-width: 860px) { .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; } body.has-sidebar .page-container { margin-left: 0; padding-top: 56px; } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-collapsed .sidebar { width: var(--sidebar-w) !important; } body.sidebar-collapsed .snav-label { display: block; } body.sidebar-collapsed .snav-btn { justify-content: flex-start; padding: 9px 12px; width: 100%; } body.sidebar-collapsed .sidebar-nav { align-items: stretch; padding: 10px 10px; } body.has-sidebar .top-header { left: 0; padding-left: 60px; } body.has-sidebar .mobile-sidebar-toggle { display: flex; } body.has-sidebar .page-container { padding-top: var(--header-h); } .sidebar-logo { justify-content: center; } .sidebar-logo-mark { justify-content: center; } .sidebar-collapse-btn { display: none; } body.sidebar-open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 99; } .form-row, .form-row.three { grid-template-columns: 1fr; } .invoice-card { flex-wrap: wrap; } .inv-actions { margin-left: 0; } .stat-cards { grid-template-columns: repeat(2, 1fr); } .cards-grid { grid-template-columns: 1fr; } .auto-grid { grid-template-columns: 1fr; } .page-inner { padding: 20px 16px 100px; } .kanban-board { grid-template-columns: repeat(2, 1fr); } .plan-cards { grid-template-columns: 1fr; } .dash-stat-row { grid-template-columns: repeat(2, 1fr); gap: 14px; } .dash-grid-3 { grid-template-columns: 1fr; } .dash-grid-2 { grid-template-columns: 1fr; } .dash-welcome { flex-direction: column; align-items: flex-start; } .ai-panel { width: 100%; } .modal-box { width: 100%; max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: 0; max-height: 92vh; overflow-y: auto; } .modal-backdrop { align-items: flex-end; } .section-header { flex-wrap: wrap; gap: 10px; } } @media (max-width: 480px) { .login-box, .onboarding-box { padding: 28px 20px; } .stat-cards { grid-template-columns: 1fr 1fr; } .kanban-board { grid-template-columns: 1fr; } .dash-stat-row { grid-template-columns: 1fr 1fr; } .dash-action-grid { grid-template-columns: 1fr; } } /* ── LEAPreceptionist ──────────────────────────────────────────────────── */ .rx-tab-strip { display: flex; gap: 0; border-bottom: 1px solid var(--bd); margin: 18px 0 18px; } .rx-tab-btn { background: none; border: none; padding: 12px 18px; font-size: .86rem; font-weight: 600; color: var(--mt); cursor: pointer; border-bottom: 2px solid transparent; transition: color .18s ease, border-color .18s ease; } .rx-tab-btn:hover { color: var(--tx); } .rx-tab-btn.active { color: var(--navy, var(--bl)); border-bottom-color: var(--navy, var(--bl)); } .rx-tab-panel { display: none; } .rx-tab-panel.active { display: block; } .rx-filters { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; } .rx-filter-group { display: inline-flex; gap: 4px; background: var(--sf2); padding: 4px; border-radius: 10px; } .rx-range-btn, .rx-dispo-btn { background: transparent; border: none; padding: 6px 14px; font-size: .78rem; font-weight: 600; color: var(--mt); border-radius: 7px; cursor: pointer; transition: background .18s ease, color .18s ease; } .rx-range-btn:hover, .rx-dispo-btn:hover { color: var(--tx); } .rx-range-btn.active, .rx-dispo-btn.active { background: var(--card-bg, #fff); color: var(--tx); box-shadow: 0 1px 2px rgba(20,30,50,.08); } .rx-call-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--card-bg, var(--sf)); border: 1px solid var(--bd); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .rx-call-row:hover { transform: translateY(-1px); border-color: var(--navy, var(--bl)); box-shadow: 0 4px 16px rgba(27,42,138,.08); } .rx-call-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy, var(--bl)), var(--green, var(--gn))); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; letter-spacing: .02em; } .rx-call-main { min-width: 0; } .rx-call-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rx-call-name { font-weight: 700; font-size: .92rem; color: var(--tx); } .rx-call-phone { font-size: .78rem; color: var(--mt); font-variant-numeric: tabular-nums; } .rx-call-outcome { margin-top: 3px; font-size: .8rem; color: var(--mt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rx-call-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: .74rem; } .rx-call-time { color: var(--mt); } .rx-call-dur { font-family: ui-monospace, Menlo, monospace; font-weight: 600; color: var(--tx); } .rx-drawer-head { margin-bottom: 18px; } .rx-drawer-title { font-size: 1.12rem; font-weight: 800; color: var(--tx); } .rx-drawer-sub { font-size: .8rem; color: var(--mt); margin-top: 4px; } .rx-drawer-card { background: var(--sf2); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; } .rx-drawer-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mt); margin-bottom: 6px; } .rx-drawer-body { font-size: .86rem; color: var(--tx); line-height: 1.55; } .rx-transcript { background: var(--card-bg, #fff); border: 1px solid var(--bd); border-radius: 8px; padding: 12px 14px; margin: 6px 0 0; white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: .78rem; color: var(--tx); max-height: 320px; overflow-y: auto; } .rx-agent-card { background: var(--card-bg, var(--sf)); border: 1px solid var(--bd); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; } .rx-agent-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .rx-agent-name { font-size: 1rem; font-weight: 800; color: var(--tx); } .rx-agent-voice { font-size: .78rem; color: var(--mt); margin-top: 3px; } .rx-agent-block { margin-top: 12px; } .rx-agent-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bd); font-size: .76rem; color: var(--mt); } .rx-agent-footer a { color: var(--navy, var(--bl)); font-weight: 600; } /* ── Agent Config editor — full self-serve receptionist editor ───────────── */ /* Ported from the portal receptionist editor. Sub-tab strip classes are namespaced .rxc-* so they don't collide with the page-level .rx-tab-strip that drives Call Log / Leads / Agent Config / Numbers. */ .rx-editor { display:flex; flex-direction:column; gap:0; } /* 2-col grid for the upper config block — voice/transfer/greeting left, business hours right. Stacks to single column on narrow screens. */ .rx-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; margin:0 0 4px; } .rx-grid-2 > .rx-col { min-width:0; display:flex; flex-direction:column; } .rx-grid-2 > .rx-col > .form-label:first-child { margin-top:0; } @media (max-width:768px) { .rx-grid-2 { grid-template-columns:1fr; gap:0; } } .rx-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--bd); flex-wrap:wrap; } .rx-editor-title { font-size:18px; font-weight:800; color:var(--tx); letter-spacing:-.01em; display:flex; align-items:center; gap:8px; } .rx-editor-sub { font-size:.78rem; color:var(--mt); margin-top:4px; } .rx-phone-line { font-size:.84rem; color:var(--gn); margin-top:6px; display:flex; align-items:center; gap:6px; } .rx-editor-chips { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; } .rx-help { font-weight:400; color:var(--mt); font-size:.74rem; margin-left:6px; text-transform:none; letter-spacing:0; display:block; margin-top:3px; line-height:1.5; } /* ── Routing modes section ─────────────────────────────────────────────── */ .rx-routing-section { margin:0 0 22px; padding:18px 20px; background:var(--sf2); border:1px solid var(--bd); border-radius:12px; display:flex; flex-direction:column; gap:0; } .rx-routing-head { margin-bottom:14px; } .rx-routing-title { font-size:14px; font-weight:700; color:var(--tx); display:flex; align-items:center; gap:8px; letter-spacing:-.01em; } .rx-routing-sub { font-size:12px; color:var(--mt); margin-top:4px; line-height:1.55; } .rx-mode-picker { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:6px; } @media (max-width:900px) { .rx-mode-picker { grid-template-columns:repeat(2, 1fr); } } .rx-mode-card { display:block; cursor:pointer; padding:12px 14px; background:var(--sf); border:1px solid var(--bd); border-radius:10px; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; user-select:none; position:relative; } .rx-mode-card:hover { border-color:var(--bd2); } .rx-mode-card input { position:absolute; opacity:0; pointer-events:none; } .rx-mode-card-active { border-color:var(--bl); background:rgba(77,158,255,.06); box-shadow:0 0 0 1px rgba(77,158,255,.25); } .rx-mode-card-title { font-size:13px; font-weight:700; color:var(--tx); line-height:1.3; } .rx-mode-card-desc { font-size:11.5px; color:var(--mt); margin-top:4px; line-height:1.5; } .rx-vacation-block { margin-top:12px; padding:12px 14px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.30); border-radius:8px; } .rx-vacation-row { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; } .rx-vacation-row .form-label { flex:1; min-width:200px; } .rx-whisper-block { margin-top:12px; padding:12px 14px; background:rgba(149,76,233,.08); border:1px solid rgba(149,76,233,.30); border-radius:8px; } .rx-whisper-block .form-label { margin:0 0 6px; } .rx-vip-details { margin-top:12px; border:1px solid var(--bd); border-radius:8px; background:var(--sf); } .rx-vip-summary { cursor:pointer; padding:10px 14px; font-size:12.5px; font-weight:600; color:var(--tx); display:flex; align-items:center; gap:8px; list-style:none; flex-wrap:wrap; } .rx-vip-summary::-webkit-details-marker { display:none; } .rx-vip-summary .rx-help { font-weight:400; flex:1; min-width:0; } .rx-vip-list { padding:6px 14px 4px; display:flex; flex-direction:column; gap:8px; } .rx-vip-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .rx-vip-row .rx-vip-name { flex:1 1 130px; min-width:120px; } .rx-vip-row .rx-vip-phone { flex:1 1 160px; min-width:140px; } .rx-vip-row .rx-vip-note { flex:2 1 200px; min-width:160px; } .rx-vip-row .rx-vip-remove { padding:6px 8px; flex-shrink:0; } .rx-vip-empty { padding:10px 14px; font-size:12px; color:var(--mt); font-style:italic; line-height:1.55; } /* Inset every direct child (incl. the Add VIP button row) 14px so it lines up with the summary text + VIP rows instead of sitting on the card edge. */ .rx-vip-details > div { padding-left:14px; padding-right:14px; padding-bottom:10px; } .rx-closed-details, .rx-carrier-details { margin-top:12px; border:1px solid var(--bd); border-radius:8px; background:var(--sf); } .rx-closed-summary, .rx-carrier-summary { cursor:pointer; padding:10px 14px; font-size:12.5px; font-weight:600; color:var(--tx); display:flex; align-items:center; gap:8px; list-style:none; flex-wrap:wrap; } .rx-closed-summary::-webkit-details-marker, .rx-carrier-summary::-webkit-details-marker { display:none; } .rx-closed-summary .rx-help, .rx-carrier-summary .rx-help { font-weight:400; flex:1; min-width:0; } .rx-closed-list { padding:6px 14px 4px; display:flex; flex-direction:column; gap:8px; } .rx-closed-row { display:flex; gap:8px; align-items:center; } .rx-closed-row .rx-closed-date { max-width:170px; flex-shrink:0; } .rx-closed-row .rx-closed-label { flex:1; min-width:0; } .rx-closed-row .rx-closed-remove { padding:6px 8px; flex-shrink:0; } .rx-closed-empty { padding:10px 14px; font-size:12px; color:var(--mt); font-style:italic; } .rx-closed-details > div { padding-left:14px; padding-right:14px; } .rx-closed-details > div:not(.rx-closed-list):not(.rx-closed-empty) { padding-bottom:10px; } .rx-closed-details > textarea { width:calc(100% - 28px); margin:0 14px 12px; } .rx-carrier-controls { padding:8px 14px 12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .rx-carrier-empty, .rx-carrier-loading, .rx-carrier-error { padding:0 14px 14px; font-size:12.5px; color:var(--mt); line-height:1.55; } .rx-carrier-error { color:var(--rd); } .rx-carrier-notes { padding:0 14px 8px; font-size:12px; color:var(--mt); font-style:italic; line-height:1.55; } .rx-carrier-body { padding:0 16px 16px; font-size:13px; color:var(--tx); line-height:1.65; } .rx-carrier-body p { margin:0 0 10px; } .rx-carrier-body ol, .rx-carrier-body ul { margin:6px 0 12px; padding-left:22px; } .rx-carrier-body li { margin:4px 0; } .rx-carrier-body code { background:var(--sf3); border:1px solid var(--bd); border-radius:4px; padding:1px 6px; font-size:12px; font-family:var(--mono,ui-monospace,monospace); color:var(--bl); white-space:nowrap; } .rx-carrier-body strong { color:var(--tx); font-weight:700; } .rx-carrier-body h1, .rx-carrier-body h2, .rx-carrier-body h3 { font-size:13px; font-weight:700; margin:12px 0 6px; } /* ── Editor sub-tab strip (General · Routing · Instructions · Integrations) ─ */ .rxc-tabs { display:flex; gap:2px; margin:14px 0 18px; padding:4px; background:var(--sf2); border:1px solid var(--bd); border-radius:10px; width:fit-content; max-width:100%; flex-wrap:wrap; } .rxc-tab { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:transparent; color:var(--mt); border:0; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; letter-spacing:-.01em; transition:background .15s ease, color .15s ease; position:relative; } .rxc-tab:hover { color:var(--tx); } .rxc-tab:focus-visible { outline:2px solid var(--bl); outline-offset:2px; } .rxc-tab-active { background:var(--sf); color:var(--tx); box-shadow:0 1px 2px rgba(15,23,70,.06); } /* Per-tab unsaved-edits dot — added by _rxcMarkDirty() when an input inside the matching tab body changes; cleared on Save / re-render. */ .rxc-tab-dirty::after { content:''; width:6px; height:6px; border-radius:50%; background:var(--am); box-shadow:0 0 0 2px var(--sf2); display:inline-block; } .rxc-tab-body { display:block; } .rxc-tab-body[hidden] { display:none; } .rx-hours-grid { display:flex; flex-direction:column; gap:8px; padding:14px 16px; background:var(--sf2); border:1px solid var(--bd); border-radius:8px; } .rx-hours-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 0; } .rx-hours-row + .rx-hours-row { border-top:1px solid var(--bd); padding-top:8px; } .rx-hours-day { width:42px; font-weight:600; color:var(--tx); font-size:13px; } .rx-hours-row input[type="time"] { padding:6px 10px; border:1px solid var(--bd); border-radius:6px; background:var(--sf); color:var(--tx); font-size:13px; font-family:inherit; } .rx-hours-row input[type="time"]:disabled { opacity:.4; cursor:not-allowed; } .rx-hours-sep { font-size:.78rem; color:var(--mt); } .rx-hours-closed { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--mt); cursor:pointer; margin-left:auto; user-select:none; } .rx-hours-closed input { margin:0; } .rx-toggles { display:flex; flex-direction:column; gap:0; margin:18px 0; padding:0; background:var(--sf2); border:1px solid var(--bd); border-radius:8px; overflow:hidden; } .rx-toggle-row { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; cursor:pointer; } .rx-toggle-row + .rx-toggle-row { border-top:1px solid var(--bd); } .rx-toggle-row:hover { background:var(--sf3); } .rx-toggle-text { flex:1; min-width:0; } .rx-toggle-title { font-size:13.5px; font-weight:600; color:var(--tx); line-height:1.35; } .rx-toggle-help { font-size:12px; color:var(--mt); line-height:1.5; margin-top:3px; } /* Custom switch — visual replacement for the raw checkbox. The hidden still drives form state; .rx-switch-track is the painted pill. */ .rx-switch { position:relative; display:inline-block; flex-shrink:0; width:42px; height:24px; margin-top:1px; } .rx-switch input { opacity:0; width:0; height:0; position:absolute; pointer-events:none; } .rx-switch-track { position:absolute; inset:0; background:var(--sf3); border:1px solid var(--bd); border-radius:24px; transition:background .18s ease, border-color .18s ease; } .rx-switch-track::before { content:''; position:absolute; height:18px; width:18px; left:2px; top:2px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .18s ease; } .rx-switch input:checked + .rx-switch-track { background:var(--gn); border-color:var(--gn); } .rx-switch input:checked + .rx-switch-track::before { transform:translateX(18px); } .rx-switch input:focus-visible + .rx-switch-track { box-shadow:0 0 0 3px rgba(16,232,126,.30); } .rx-prefs { background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.25); border-radius:10px; padding:14px 16px; margin:0 0 18px; } .rx-prefs-title { font-weight:700; font-size:13px; color:var(--am); display:flex; align-items:center; gap:6px; } .rx-prefs-note { font-size:12px; color:var(--mt); margin-top:10px; line-height:1.55; } .rx-next-callout { display:flex; gap:12px; padding:14px 16px; border-radius:10px; margin:0 0 18px; align-items:flex-start; } .rx-next-live { background:rgba(16,232,126,.08); border:1px solid rgba(16,232,126,.30); color:var(--tx); } .rx-next-live .rx-next-icon { color:var(--gn); } .rx-next-pending { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.30); color:var(--tx); } .rx-next-pending .rx-next-icon { color:var(--am); } .rx-next-icon { flex-shrink:0; padding-top:2px; } .rx-next-title { font-weight:700; font-size:13px; margin-bottom:3px; } .rx-next-body { font-size:12.5px; color:var(--mt); line-height:1.55; } .rx-voice-row { display:flex; gap:10px; align-items:stretch; } .rx-voice-row select.form-input { flex:1; min-width:0; } .rx-voice-sample-btn { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0; } .rx-voice-sample-btn.playing { background:var(--rd); border-color:var(--rd); color:#fff; } .rx-voice-sample-btn.playing:hover { background:var(--rd); } .rx-save-result { margin-top:14px; min-height:0; } .rx-save-success { font-size:13px; color:var(--gn); background:rgba(16,232,126,.08); border:1px solid rgba(16,232,126,.25); border-radius:6px; padding:10px 14px; display:flex; align-items:center; gap:8px; } .rx-save-error { font-size:13px; color:var(--rd); background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.25); border-radius:6px; padding:10px 14px; display:flex; align-items:center; gap:8px; } .rx-actions { display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--bd); flex-wrap:wrap; } .rx-save-cluster { display:flex; align-items:center; gap:12px; } /* ── CRM & integrations helper card (Connect-your-CRM expander) ────────── */ .rx-crm-helper { margin-top:14px; } .rx-crm-helper > summary::-webkit-details-marker { display:none; } .rx-crm-helper-body { padding-top:6px; } .rx-crm-path { margin:14px 0 0; padding:14px 16px; background:var(--sf2); border:1px solid var(--bd); border-radius:8px; } .rx-crm-path:first-child { margin-top:8px; } .rx-crm-path-name { font-size:13px; font-weight:700; color:var(--tx); display:flex; align-items:center; gap:10px; flex-wrap:wrap; letter-spacing:-.01em; } .rx-crm-path-tag { font-size:10.5px; font-weight:600; color:var(--mt); background:var(--sf3); border:1px solid var(--bd); padding:2px 8px; border-radius:999px; letter-spacing:.04em; text-transform:uppercase; } .rx-crm-path-body { font-size:12.5px; color:var(--dm); line-height:1.65; margin-top:8px; } .rx-crm-path-body p { margin:0 0 8px; } .rx-crm-path-body ol, .rx-crm-path-body ul { margin:6px 0 8px; padding-left:22px; } .rx-crm-path-body li { margin:4px 0; } .rx-crm-path-body a { color:var(--bl); text-decoration:none; } .rx-crm-path-body a:hover { text-decoration:underline; } .rx-crm-path-body code { background:var(--sf3); border:1px solid var(--bd); border-radius:4px; padding:1px 6px; font-size:11.5px; font-family:var(--mono,ui-monospace,monospace); color:var(--bl); white-space:nowrap; } .rx-crm-path-tip { margin-top:8px; padding:8px 12px; background:rgba(77,158,255,.08); border:1px solid rgba(77,158,255,.25); border-radius:6px; font-size:11.5px; color:var(--dm); line-height:1.55; } .rx-crm-pre { background:var(--sf3); border:1px solid var(--bd); border-radius:6px; padding:10px 12px; font-size:11px; line-height:1.5; color:var(--tx); overflow-x:auto; font-family:var(--mono,ui-monospace,monospace); margin:6px 0 10px; white-space:pre; } /* ── Editor card grouping — shared shell for the big config sections ─────── */ .rx-card { margin:0 0 22px; padding:18px 20px; background:var(--sf2); border:1px solid var(--bd); border-radius:12px; display:flex; flex-direction:column; } .rx-card-head { margin-bottom:14px; } .rx-card-title { font-size:14px; font-weight:700; color:var(--tx); display:flex; align-items:center; gap:8px; letter-spacing:-.01em; } .rx-card-sub { font-size:12px; color:var(--mt); margin-top:4px; line-height:1.55; } /* ── Unsaved-changes pulse on the Save button ───────────────────────────── */ .rx-save-btn-dirty { animation: rxSavePulse 1.8s ease-in-out infinite; position:relative; } @keyframes rxSavePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(77,158,255,0); } 50% { box-shadow: 0 0 0 6px rgba(77,158,255,.25); } } .rx-dirty-flag { display:none; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--am); background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.30); padding:4px 10px; border-radius:999px; letter-spacing:.02em; } .rx-dirty-flag-on { display:inline-flex; } .rx-numbers-table { width: 100%; border-collapse: collapse; font-size: .84rem; } .rx-numbers-table th { text-align: left; padding: 10px 14px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mt); border-bottom: 1px solid var(--bd); } .rx-numbers-table td { padding: 12px 14px; border-bottom: 1px solid var(--bd); } /* ── STATUS BANNER (dunning state) ──────────────────────────────────────── */ :root { --banner-h: 0px; } body.has-status-banner { --banner-h: 52px; } body.has-status-banner .top-header { top: var(--banner-h); } body.has-status-banner.has-sidebar .page-container { padding-top: calc(var(--header-h) + var(--banner-h)); } body.has-status-banner .sidebar { padding-top: var(--banner-h); } .status-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 110; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 14px; line-height: 1.5; color: var(--tx); box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 18px -10px rgba(15,23,42,0.18); } .status-banner-inner { max-width: 1280px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 14px; } .status-banner-icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.12); color: inherit; font-weight: 700; font-size: 15px; line-height: 1; } .status-banner-text { flex: 1 1 auto; } .status-banner-text strong { font-weight: 700; margin-right: 8px; } .status-banner-cta { flex: 0 0 auto; padding: 8px 14px; border: 0; background: var(--bl); color: #fff; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; } .status-banner-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(27,42,138,0.28); } .status-banner-cta:focus-visible { outline: 2px solid var(--gn); outline-offset: 2px; } .status-banner-cta:active { transform: translateY(0); } .status-banner.severity-warn { background: linear-gradient(90deg, #FEF3C7 0%, #FDE68A 100%); } .status-banner.severity-hold { background: linear-gradient(90deg, #FEE2E2 0%, #FCA5A5 100%); } .status-banner.severity-suspend { background: linear-gradient(90deg, #1A1F36 0%, #4B1D24 100%); color: #fff; } .status-banner.severity-suspend .status-banner-icon { background: rgba(255,255,255,0.16); } .status-banner.severity-suspend .status-banner-cta { background: var(--gn); color: #07111f; } .status-banner.severity-suspend .status-banner-cta:hover { box-shadow: 0 6px 14px rgba(0,230,118,0.32); } @media (max-width: 720px) { .status-banner-inner { flex-wrap: wrap; gap: 10px; padding: 10px 16px; } .status-banner-text { flex: 1 1 100%; order: 2; } .status-banner-icon { order: 1; } .status-banner-cta { order: 3; width: 100%; } } /* ── PRINT ─────────────────────────────────────────────────────────────── */ @media print { .sidebar, .ai-fab, .ai-panel, .toast, .top-header, .mobile-sidebar-toggle, .status-banner { display: none !important; } body.has-sidebar .page-container { margin-left: 0; padding-top: 0; } .page-inner { padding: 20px; } .modal-backdrop { display: none !important; } } /* ── Notifications dropdown (Phase 8d-LEAPOS) ─────────────────────────── */ .notifications-panel { position:absolute; top:46px; right:0; z-index:300; width:340px; max-width:calc(100vw - 32px); background:var(--card-bg, #fff); border:1px solid var(--bd, #E5E7EB); border-radius:12px; box-shadow:0 14px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06); overflow:hidden; } .notifications-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--bd, #E5E7EB); font-weight:700; font-size:13px; color:var(--text, #1A1F36); } .notifications-mark-read { background:none; border:0; cursor:pointer; font-size:11px; color:var(--text-muted, #6B7280); font-weight:500; } .notifications-mark-read:hover { color:var(--navy, #1B2A8A); } .notifications-list { max-height:380px; overflow-y:auto; } .notifications-item { display:flex; align-items:stretch; gap:0; border-bottom:1px solid var(--bd); position:relative; } .notifications-item:last-child { border-bottom:0; } .notifications-item-main { flex:1; text-align:left; display:flex; align-items:center; gap:10px; padding:10px 8px 10px 18px; border:0; background:transparent; cursor:pointer; transition:background .12s ease; min-width:0; } .notifications-item-main:hover { background:var(--sf2); } .notifications-item.unread .notifications-item-main { background:rgba(27,42,138,.04); } .notifications-item.unread::before { content:''; position:absolute; left:6px; top:50%; width:6px; height:6px; border-radius:50%; background:var(--green); transform:translateY(-50%); } .notifications-item-text { flex:1; min-width:0; } .notifications-item-title { font-size:13px; font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .notifications-item-sub { font-size:11.5px; color:var(--mt); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .notifications-item-time { font-size:11px; color:var(--dm); flex-shrink:0; } .notifications-item-dismiss { background:none; border:0; cursor:pointer; width:32px; flex-shrink:0; color:var(--dm); font-size:18px; line-height:1; transition:color .12s, background .12s; } .notifications-item-dismiss:hover { color:var(--rd); background:var(--sf2); } .notifications-empty { padding:24px 14px; text-align:center; font-size:13px; color:var(--mt); } /* ── Notifications "View all" page ───────────────────────────────────── */ .notifications-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; } .notif-page-list { display:flex; flex-direction:column; background:var(--sf); border:1px solid var(--bd); border-radius:var(--radius); overflow:hidden; } .notif-page-item { display:flex; align-items:stretch; border-bottom:1px solid var(--bd); transition:background .12s; } .notif-page-item:last-child { border-bottom:0; } .notif-page-item:hover { background:var(--sf2); } .notif-page-item.unread { background:rgba(27,42,138,.03); } .notif-page-main { flex:1; display:flex; align-items:center; gap:14px; padding:14px 18px; border:0; background:transparent; text-align:left; cursor:pointer; min-width:0; } .notif-page-dot { width:8px; height:8px; border-radius:50%; background:transparent; flex-shrink:0; } .notif-page-item.unread .notif-page-dot { background:var(--green); } .notif-page-text { flex:1; min-width:0; } .notif-page-title { font-size:14px; font-weight:600; color:var(--tx); margin-bottom:2px; } .notif-page-item.unread .notif-page-title { color:var(--navy-fg); } .notif-page-body { font-size:12.5px; color:var(--mt); line-height:1.5; } .notif-page-time { font-size:11.5px; color:var(--dm); flex-shrink:0; } .notif-page-dismiss { background:none; border:0; cursor:pointer; width:44px; flex-shrink:0; color:var(--dm); font-size:20px; line-height:1; transition:color .12s, background .12s; } .notif-page-dismiss:hover { color:var(--rd); background:var(--sf2); } /* Type-specific accents — left border tint */ .notif-page-item.notif-type-automation { border-left:3px solid var(--pu); } .notif-page-item.notif-type-billing { border-left:3px solid var(--am); } .notif-page-item.notif-type-alert { border-left:3px solid var(--rd); } .notif-page-item.notif-type-success { border-left:3px solid var(--gn); } .notif-page-item.notif-type-info { border-left:3px solid var(--bl); } .notif-page-item.notif-type-mention { border-left:3px solid var(--green); } /* ── Vendor status pill (Phase 9a — AI services indicator) ────────────── */ .vs-pill { display:inline-flex; align-items:center; gap:8px; background:var(--sf2); border:1px solid var(--bd); border-radius:99px; padding:6px 14px 6px 12px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; color:var(--tx); letter-spacing:.01em; transition:background .15s, border-color .15s, transform .12s; } .vs-pill:hover { background:var(--sf3); border-color:var(--bd2); } .vs-pill:active { transform:translateY(1px); } .vs-pill:focus-visible { outline:2px solid var(--bl); outline-offset:2px; } .vs-dot { width:8px; height:8px; border-radius:50%; background:var(--mt); flex-shrink:0; box-shadow:0 0 0 3px rgba(140,140,140,.18); } .vs-pill[data-state="ok"] .vs-dot { background:var(--gn); box-shadow:0 0 0 3px rgba(0,200,83,.20); } .vs-pill[data-state="degraded"] .vs-dot { background:var(--am); box-shadow:0 0 0 3px rgba(217,148,10,.22); animation:vsPulse 1.8s ease-in-out infinite; } .vs-pill[data-state="down"] .vs-dot { background:var(--rd); box-shadow:0 0 0 3px rgba(224,62,82,.25); animation:vsPulse 1.2s ease-in-out infinite; } @keyframes vsPulse { 0%,100% { box-shadow:0 0 0 3px rgba(224,62,82,.25); } 50% { box-shadow:0 0 0 6px rgba(224,62,82,.10); } } .vs-pill-label { color:var(--dm); font-weight:600; } .vs-pill-state { color:var(--tx); font-weight:800; } .vs-pill[data-state="ok"] .vs-pill-state { color:var(--gn); } .vs-pill[data-state="degraded"] .vs-pill-state { color:var(--am); } .vs-pill[data-state="down"] .vs-pill-state { color:var(--rd); } .vs-panel { position:absolute; top:54px; right:16px; width:340px; max-width:calc(100vw - 32px); background:var(--sf); border:1px solid var(--bd2); border-radius:14px; box-shadow:0 18px 48px -10px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.06); z-index:80; overflow:hidden; padding:0; } [data-theme="dark"] .vs-panel { box-shadow:0 18px 48px -10px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4); } .vs-panel-head { padding:14px 18px 10px; border-bottom:1px solid var(--bd); background:var(--sf2); } .vs-panel-title { font-size:13px; font-weight:800; color:var(--tx); letter-spacing:.02em; } .vs-panel-sub { font-size:11px; color:var(--dm); margin-top:3px; } .vs-panel-rows { padding:6px 0; } .vs-row { display:flex; align-items:center; gap:12px; padding:10px 18px; } .vs-row + .vs-row { border-top:1px dashed var(--bd); } .vs-row-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--mt); box-shadow:0 0 0 3px rgba(140,140,140,.16); } .vs-row-dot-ok { background:var(--gn); box-shadow:0 0 0 3px rgba(0,200,83,.18); } .vs-row-dot-degraded { background:var(--am); box-shadow:0 0 0 3px rgba(217,148,10,.20); } .vs-row-dot-down { background:var(--rd); box-shadow:0 0 0 3px rgba(224,62,82,.22); } .vs-row-dot-unknown { background:var(--mt); } .vs-row-body { flex:1; min-width:0; } .vs-row-name { font-size:13px; font-weight:700; color:var(--tx); } .vs-row-desc { font-size:11.5px; color:var(--dm); margin-top:1px; line-height:1.4; } .vs-panel-foot { padding:10px 18px 14px; border-top:1px solid var(--bd); background:var(--sf2); font-size:11.5px; color:var(--dm); line-height:1.5; } .vs-banner { position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:12px; padding:10px 20px; background:rgba(217,148,10,.10); color:var(--tx); border-bottom:1px solid rgba(217,148,10,.30); font-size:13px; } .vs-banner[data-state="down"] { background:rgba(224,62,82,.10); border-bottom-color:rgba(224,62,82,.35); } .vs-banner-ico { font-size:16px; flex-shrink:0; color:var(--am); } .vs-banner[data-state="down"] .vs-banner-ico { color:var(--rd); } .vs-banner-text { flex:1; line-height:1.45; } .vs-banner-text strong { color:var(--tx); font-weight:800; } .vs-banner-close { background:transparent; border:none; color:var(--dm); cursor:pointer; font-size:20px; line-height:1; padding:4px 8px; border-radius:6px; } .vs-banner-close:hover { color:var(--tx); background:rgba(0,0,0,.05); } [data-theme="dark"] .vs-banner-close:hover { background:rgba(255,255,255,.06); } @media (max-width:640px) { .vs-pill-label { display:none; } .vs-panel { right:12px; top:62px; width:calc(100vw - 24px); } } /* ── Feature Requests (Phase 9b — kept in sync with portal/css/styles.css) ─ */ .fr-shell { display:flex; flex-direction:column; gap:18px; } .fr-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .fr-chips { display:flex; gap:6px; flex-wrap:wrap; } .fr-chip { display:inline-flex; align-items:center; gap:6px; background:var(--sf2); color:var(--tx); border:1px solid var(--bd); border-radius:99px; padding:5px 12px; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; transition:background .15s,border-color .15s; } .fr-chip:hover { background:var(--sf3); border-color:var(--bd2); } .fr-chip.is-active { background:var(--bl); color:#fff; border-color:var(--bl); } .fr-chip-n { font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:99px; background:rgba(0,0,0,.08); color:inherit; } .fr-chip.is-active .fr-chip-n { background:rgba(255,255,255,.20); } .fr-toolbar-actions { display:flex; gap:8px; align-items:center; } .fr-list { display:flex; flex-direction:column; gap:8px; } .fr-card { display:flex; gap:14px; align-items:flex-start; background:var(--sf); border:1px solid var(--bd); border-radius:12px; padding:14px 16px; cursor:pointer; text-align:left; width:100%; font-family:inherit; color:var(--tx); transition:transform .12s,box-shadow .15s,border-color .15s; } .fr-card:hover { transform:translateY(-1px); border-color:var(--bd2); box-shadow:0 8px 22px -8px rgba(0,0,0,.10); } .fr-vote { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px; width:48px; padding:8px 4px; border-radius:10px; border:1px solid var(--bd); background:var(--sf2); color:var(--dm); cursor:pointer; transition:background .15s,color .15s,border-color .15s; } .fr-vote:hover { background:var(--sf3); border-color:var(--bd2); color:var(--tx); } .fr-vote.is-voted { background:rgba(0,200,83,.12); border-color:rgba(0,200,83,.40); color:var(--gn); } .fr-vote-n { font-size:14px; font-weight:800; line-height:1; } .fr-vote-lg { width:60px; padding:10px 4px; } .fr-vote-lg .fr-vote-n { font-size:18px; } .fr-card-body { flex:1; min-width:0; } .fr-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .fr-card-title { font-size:14.5px; font-weight:700; color:var(--tx); line-height:1.3; } .fr-card-desc { font-size:12.5px; color:var(--dm); margin-top:5px; line-height:1.5; } .fr-card-meta { font-size:11px; color:var(--mt); margin-top:8px; } .fr-status { display:inline-block; padding:3px 10px; border-radius:99px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; } .fr-status-posted { background:var(--sf3); color:var(--mt); border:1px solid var(--bd); } .fr-status-researching { background:rgba(50,130,255,.12); color:var(--bl); border:1px solid rgba(50,130,255,.30); } .fr-status-developing { background:rgba(217,148,10,.13); color:var(--am); border:1px solid rgba(217,148,10,.30); } .fr-status-shipped { background:rgba(0,200,83,.13); color:var(--gn); border:1px solid rgba(0,200,83,.30); } .fr-status-declined { background:rgba(224,62,82,.10); color:var(--rd); border:1px solid rgba(224,62,82,.25); } .fr-back { background:transparent; border:none; color:var(--bl); cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; padding:0; align-self:flex-start; } .fr-back:hover { text-decoration:underline; } .fr-detail { background:var(--sf); border:1px solid var(--bd); border-radius:14px; padding:22px 24px; } .fr-detail-head { display:flex; gap:18px; align-items:flex-start; } .fr-detail-title-block { flex:1; min-width:0; } .fr-detail-title-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .fr-detail-title { margin:0; font-size:22px; font-weight:800; color:var(--tx); letter-spacing:-.005em; line-height:1.25; } .fr-detail-meta { font-size:12px; color:var(--mt); margin-top:6px; } .fr-detail-body { font-size:14.5px; color:var(--tx); line-height:1.6; margin-top:18px; } .fr-detail-note { margin-top:18px; padding:12px 14px; border-radius:10px; background:rgba(50,130,255,.07); border:1px solid rgba(50,130,255,.25); font-size:13px; color:var(--tx); line-height:1.55; } .fr-detail-note strong { color:var(--bl); font-weight:700; } .fr-admin-controls { margin-top:18px; padding:14px 14px 12px; background:var(--sf2); border:1px dashed var(--bd2); border-radius:10px; } .fr-admin-row { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; } .fr-detail-actions { display:flex; gap:8px; margin-top:16px; } .fr-comments { background:var(--sf); border:1px solid var(--bd); border-radius:14px; padding:18px 22px; } .fr-comments-head { margin:0 0 12px; font-size:14px; font-weight:800; color:var(--tx); letter-spacing:.02em; } .fr-comments-list { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; } .fr-comment { padding:10px 14px; background:var(--sf2); border-radius:10px; border:1px solid var(--bd); } .fr-comment.is-official { background:rgba(50,130,255,.06); border-color:rgba(50,130,255,.30); } .fr-comment-head { display:flex; gap:10px; align-items:baseline; margin-bottom:4px; font-size:12px; } .fr-comment-who { font-weight:700; color:var(--tx); } .fr-comment.is-official .fr-comment-who::after { content:' ✓ Official'; color:var(--bl); font-size:10px; font-weight:800; letter-spacing:.05em; margin-left:6px; } .fr-comment-time { color:var(--mt); } .fr-comment-body { font-size:13px; color:var(--tx); line-height:1.55; white-space:pre-wrap; } .fr-comment-form { display:flex; flex-direction:column; gap:8px; } .fr-comment-form-foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; } .fr-official-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--dm); cursor:pointer; } .fr-official-toggle input { margin:0; } .fr-empty { padding:32px; text-align:center; color:var(--dm); font-size:13px; background:var(--sf2); border:1px dashed var(--bd); border-radius:10px; } .fr-empty-sm { padding:18px; font-size:12.5px; } .form-input-sm, .form-select-sm { padding:6px 10px !important; font-size:12.5px !important; } .form-label-sm { font-size:11px !important; color:var(--dm); } /* ──────────────────────────────────────────────────────────────────────── */ /* React Dashboard mini-app — widget grid */ /* ──────────────────────────────────────────────────────────────────────── */ .dashboard-react-root { padding: 0; } .dashboard-react-root .grid-stack { background: transparent; min-height: 200px; } .dash-widget-card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); height: 100%; display: flex; flex-direction: column; padding: 14px 16px 12px; transition: border-color .15s, box-shadow .15s; } .dash-widget-card:hover { border-color: var(--bd2); box-shadow: 0 4px 18px rgba(15, 23, 42, .06); } .dash-widget-toolbar { display: flex; align-items: center; justify-content: space-between; margin: -4px -6px 6px; opacity: 0; transition: opacity .15s; } .dash-widget-card:hover .dash-widget-toolbar { opacity: 1; } .dash-widget-drag { cursor: grab; color: var(--dm); font-size: 14px; padding: 2px 6px; user-select: none; } .dash-widget-drag:active { cursor: grabbing; } .dash-widget-remove { border: none; background: transparent; color: var(--dm); font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 8px; border-radius: 6px; } .dash-widget-remove:hover { background: var(--sf2); color: var(--rd); } .dash-widget-title { font-size: .72rem; font-weight: 700; color: var(--mt); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .dash-widget-body { flex: 1; min-height: 0; overflow: hidden; } .dash-widget-skeleton { height: 60%; min-height: 32px; border-radius: 8px; background: linear-gradient(90deg, var(--sf2) 25%, var(--sf3) 50%, var(--sf2) 75%); background-size: 200% 100%; animation: dash-skel 1.4s ease-in-out infinite; } @keyframes dash-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Add-widget overlay */ .dash-add-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .dash-add-menu { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); width: 100%; max-width: 720px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0, 0, 0, .24); } .dash-add-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--bd); } .dash-add-close { background: transparent; border: none; font-size: 24px; line-height: 1; color: var(--dm); cursor: pointer; padding: 0 8px; border-radius: 6px; } .dash-add-close:hover { background: var(--sf2); color: var(--tx); } .dash-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 16px 18px; overflow-y: auto; } .dash-add-card { text-align: left; background: var(--sf2); border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: background .12s, border-color .12s, transform .12s; } .dash-add-card:hover { background: var(--sf3); border-color: var(--navy); transform: translateY(-1px); } .dash-add-card-title { font-weight: 700; color: var(--tx); margin-bottom: 4px; font-size: .9rem; } .dash-add-card-desc { font-size: .76rem; color: var(--mt); line-height: 1.5; } /* ──────────────────────────────────────────────────────────────────────── */ /* Dashboard polish — event list, mini bar chart, hidden card row collapse */ /* ──────────────────────────────────────────────────────────────────────── */ .dash-event-list { display: flex; flex-direction: column; gap: 8px; } .dash-event-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--sf2); border: 1px solid var(--bd); transition: background .12s, border-color .12s; } .dash-event-row:hover { background: var(--sf3); border-color: var(--bd2); } .dash-event-time { font-size: .82rem; font-weight: 700; color: var(--navy-fg); min-width: 48px; flex-shrink: 0; } .dash-event-body { flex: 1; min-width: 0; } .dash-event-title { font-size: .85rem; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-event-sub { font-size: .74rem; color: var(--mt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 8px 4px 0; } .dash-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; } .dash-bar-fill { width: 100%; min-height: 2px; background: linear-gradient(180deg, var(--green), var(--navy)); border-radius: 4px 4px 0 0; transition: height .35s ease; } .dash-bar-label { font-size: .7rem; color: var(--mt); text-transform: uppercase; letter-spacing: .04em; } .dash-bar-total { margin-top: 12px; font-size: .78rem; color: var(--mt); text-align: right; } /* ──────────────────────────────────────────────────────────────────────── */ /* LEAPchat React mini-app — Intercom-style two-pane */ /* ──────────────────────────────────────────────────────────────────────── */ .chat-twopane { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 0; border: 1px solid var(--bd); border-radius: var(--radius); background: var(--sf); min-height: 580px; height: calc(100vh - 220px); overflow: hidden; } @media (max-width: 760px) { .chat-twopane { grid-template-columns: 1fr; height: auto; } .chat-pane-right { display: none; } } .chat-pane-left { border-right: 1px solid var(--bd); display: flex; flex-direction: column; background: var(--sf); min-width: 0; } .chat-list-scroll { flex: 1; overflow-y: auto; padding: 6px; } .chat-thread-item { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 4px; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s; } .chat-thread-item:hover { background: var(--sf2); } .chat-thread-item.is-active { background: var(--sf2); border-color: var(--bd2); box-shadow: 0 1px 0 rgba(0,0,0,0.04); } .chat-pane-right { display: flex; flex-direction: column; min-width: 0; background: var(--bg); } .chat-active-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--bd); background: var(--sf); } .chat-active-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .chat-bubble-row { display: flex; } .chat-bubble-row.is-mine { justify-content: flex-end; } .chat-bubble { max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.5; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .chat-bubble.theirs { background: var(--sf); border: 1px solid var(--bd); border-bottom-left-radius: 4px; color: var(--tx); } .chat-bubble.mine { background: linear-gradient(135deg, var(--navy) 0%, #2a3aa8 100%); color: #fff; border: 1px solid rgba(255, 255, 255, .08); border-bottom-right-radius: 4px; box-shadow: 0 2px 8px rgba(27, 42, 138, .25); } .chat-bubble-content { white-space: pre-wrap; word-break: break-word; } .chat-bubble-meta { margin-top: 4px; font-size: .68rem; opacity: .65; text-transform: uppercase; letter-spacing: .04em; } .chat-bubble.mine .chat-bubble-meta { color: rgba(255, 255, 255, .85); } .chat-bubble-attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .chat-attachment-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: .8rem; line-height: 1.2; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); color: inherit; text-decoration: none; max-width: 100%; transition: background .15s ease; } .chat-attachment-chip:hover { background: rgba(255, 255, 255, .2); } .chat-bubble.theirs .chat-attachment-chip { background: var(--sf2); border-color: var(--bd); color: var(--tx); } .chat-bubble.theirs .chat-attachment-chip:hover { background: var(--sf3); } .chat-attachment-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .chat-attachment-size { font-size: .7rem; opacity: .7; flex-shrink: 0; } .chat-composer { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--bd); background: var(--sf); } .chat-composer-row { display: flex; gap: 10px; align-items: flex-end; } .chat-composer textarea { flex: 1; resize: none; min-height: 44px; font-size: .92rem; line-height: 1.4; } .chat-attach-btn { white-space: nowrap; flex-shrink: 0; } .chat-pending-attachments { display: flex; flex-wrap: wrap; gap: 6px; } .chat-pending-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: var(--sf2); border: 1px solid var(--bd); font-size: .78rem; color: var(--tx); max-width: 240px; } .chat-pending-chip .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .chat-pending-x { border: none; background: transparent; cursor: pointer; color: var(--mt); font-size: 1.1rem; line-height: 1; padding: 0 2px; } .chat-pending-x:hover { color: var(--rd); } /* LEAPcal mini-app — month grid */ .cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: var(--radius); overflow: hidden; } .cal-dow { background: var(--sf2); padding: 8px 10px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mt); text-align: left; } .cal-day { background: var(--sf); min-height: 96px; padding: 6px 8px; display: flex; flex-direction: column; } .cal-day.is-out { background: var(--sf2); } .cal-day.is-out .cal-day-num { color: var(--dm); } .cal-day.is-today { background: var(--gn) / 6%; } .cal-day.is-today .cal-day-num { color: var(--green-2); font-weight: 700; } .cal-day-num { font-size: .78rem; font-weight: 600; color: var(--tx); margin-bottom: 4px; } .cal-day-events { display: flex; flex-direction: column; gap: 2px; } .cal-day-event { font-size: .68rem; line-height: 1.3; background: var(--navy); color: #fff; padding: 2px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-day-event-time { opacity: .85; margin-right: 4px; } .cal-day-more { background: var(--sf3); color: var(--mt); font-weight: 600; } /* LEAPtask mini-app — kanban board */ .task-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; } .task-col { flex: 0 0 280px; min-width: 280px; background: var(--sf2); border: 1px solid var(--bd); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 240px); } .task-col-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; } .task-col-body { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .task-col-empty { color: var(--dm); font-size: .76rem; text-align: center; padding: 16px 4px; } .task-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 8px; padding: 10px 12px; cursor: grab; transition: background .12s, border-color .12s, transform .12s; } .task-card:hover { background: var(--sf3); border-color: var(--bd2); } .task-card:active { cursor: grabbing; } .task-card-title { font-size: .85rem; font-weight: 600; color: var(--tx); margin-bottom: 6px; } .task-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .task-add-btn { background: transparent; border: 1px dashed var(--bd); color: var(--mt); font-size: .8rem; padding: 8px; border-radius: 8px; cursor: pointer; text-align: center; } .task-add-btn:hover { color: var(--tx); border-color: var(--bd2); background: var(--sf); } /* ════════════════════════════════════════════════════════════════════════ Reports — SVG charts + Reports Library ════════════════════════════════════════════════════════════════════════ */ .rpt-svg { width: 100%; display: block; overflow: visible; } .rpt-svg text { font-family: 'Barlow Condensed', sans-serif; fill: var(--mt); } .rpt-tick { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; fill: var(--mt); } .rpt-axis-val { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; fill: var(--dm); font-variant-numeric: tabular-nums; } .rpt-bar-val { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; fill: var(--tx); font-variant-numeric: tabular-nums; pointer-events: none; } .rpt-line-dot { fill: #fff; stroke-width: 2.5; filter: drop-shadow(0 1px 2px rgba(27, 42, 138, .25)); transition: r .15s ease, stroke-width .15s ease; cursor: pointer; } .rpt-line-dot:hover { r: 5; stroke-width: 3.2; } /* Horizontal bars */ .rpt-hbar { display: flex; flex-direction: column; gap: 8px; } .rpt-hbar-row { display: flex; gap: 12px; align-items: center; } .rpt-hbar-label { font-size: .82rem; color: var(--tx); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .rpt-hbar-track { flex: 1; position: relative; height: 22px; border-radius: 6px; background: var(--sf2); overflow: visible; } .rpt-hbar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #1B2A8A 0%, #3D52D4 100%); border-radius: 6px; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .12); } .rpt-hbar-value { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: .78rem; font-weight: 700; color: var(--tx); text-shadow: 0 1px 2px rgba(255, 255, 255, .8); } /* Donut */ .rpt-donut-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; } @media (max-width: 600px) { .rpt-donut-wrap { grid-template-columns: 1fr; } } .rpt-donut { width: 220px; height: 220px; } .rpt-donut-total { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; fill: var(--tx); } .rpt-donut-total-lbl { font-size: 3.5px; fill: var(--mt); text-transform: uppercase; letter-spacing: .1em; } .rpt-donut-legend { display: flex; flex-direction: column; gap: 8px; } .rpt-donut-legend-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: .85rem; } .rpt-donut-legend-row:hover { background: var(--sf2); } .rpt-donut-swatch { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .rpt-donut-legend-label { color: var(--tx); } .rpt-donut-legend-value { color: var(--mt); font-weight: 600; } /* Library layout */ .rpt-library { display: grid; grid-template-columns: 260px 1fr; gap: 16px; } @media (max-width: 768px) { .rpt-library { grid-template-columns: 1fr; } } .rpt-library-side { display: flex; flex-direction: column; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); padding: 12px; max-height: 580px; } .rpt-library-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .rpt-library-group { display: flex; flex-direction: column; gap: 2px; } .rpt-library-group-head { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mt); padding: 4px 8px; } .rpt-library-item { text-align: left; padding: 7px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: .85rem; color: var(--tx); cursor: pointer; transition: background .12s, border-color .12s; } .rpt-library-item:hover { background: var(--sf2); } .rpt-library-item.is-active { background: rgba(27, 42, 138, .08); border-color: rgba(27, 42, 138, .25); color: var(--navy); font-weight: 600; } .rpt-library-main { min-width: 0; } .task-composer { background: var(--sf); border: 1px solid var(--bd); padding: 10px; border-radius: 8px; } /* ════════════════════════════════════════════════════════════════════════ Calendar — time-grid views (day / work-week / week) + appointment modal ════════════════════════════════════════════════════════════════════════ */ .cal-day-event { /* override base to support button rendering */ background: var(--sf2); border: 1px solid var(--bd); border-left: 3px solid var(--navy); border-radius: 4px; padding: 2px 6px; font-size: .68rem; line-height: 1.3; color: var(--tx); text-align: left; cursor: pointer; transition: background .12s, transform .12s; width: 100%; } .cal-day-event:hover { background: var(--sf3); } .cal-day-event:active { transform: scale(.99); } .cal-day-event-time { font-weight: 600; color: var(--mt); margin-right: 2px; } .cal-day-event.cal-day-more { background: transparent; border: none; color: var(--mt); font-style: italic; padding: 0 6px; } .cal-day-events { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .cal-timegrid-wrap { display: flex; border: 1px solid var(--bd); border-radius: var(--radius); overflow: hidden; background: var(--sf); } .cal-timegrid-axis { width: 52px; flex-shrink: 0; position: relative; border-right: 1px solid var(--bd); background: var(--sf2); } .cal-timegrid-axis-row { position: absolute; left: 0; right: 0; font-size: .65rem; color: var(--mt); padding: 4px 6px; text-align: right; border-top: 1px solid var(--bd); } .cal-timegrid-cols { flex: 1; display: grid; min-width: 0; } .cal-timegrid-col { border-right: 1px solid var(--bd); min-width: 0; display: flex; flex-direction: column; } .cal-timegrid-col:last-child { border-right: none; } .cal-timegrid-col.is-today { background: rgba(0, 230, 118, .04); } .cal-timegrid-colhead { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--bd); background: var(--sf2); display: flex; flex-direction: column; align-items: center; gap: 2px; } .cal-timegrid-dow { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mt); } .cal-timegrid-num { font-size: 1.1rem; font-weight: 700; color: var(--tx); width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .cal-timegrid-num.is-today { background: var(--navy); color: #fff; } .cal-timegrid-colbody { position: relative; } .cal-timegrid-hourline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--bd); } .cal-event { position: absolute; left: 4px; right: 4px; background: var(--sf); border: 1px solid var(--bd); border-left: 3px solid var(--navy); border-radius: 6px; padding: 4px 6px; font-size: .72rem; line-height: 1.25; color: var(--tx); text-align: left; cursor: pointer; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: background .12s, transform .12s, box-shadow .12s; } .cal-event:hover { background: var(--sf3); box-shadow: 0 2px 6px rgba(15, 23, 42, .08); } .cal-event:active { transform: scale(.99); } .cal-event-time { font-weight: 600; font-size: .68rem; color: var(--mt); } .cal-event-title { font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-event-contact { font-size: .65rem; color: var(--mt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-event-cancelled, .cal-event-no_show { opacity: .55; text-decoration: line-through; } .cal-event-completed { opacity: .8; } /* Appointment modal — React-rendered, not the global openModal pattern */ .cal-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(11, 17, 32, .55); display: flex; align-items: center; justify-content: center; padding: 16px; animation: cal-fade-in .15s ease-out; } @keyframes cal-fade-in { from { opacity: 0; } to { opacity: 1; } } .cal-modal-box { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); width: 100%; max-width: 540px; max-height: calc(100vh - 32px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 48px rgba(11, 17, 32, .28); animation: cal-slide-up .2s cubic-bezier(.16, 1, .3, 1); } @keyframes cal-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .cal-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--bd); } .cal-modal-x { border: none; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--mt); cursor: pointer; padding: 4px 8px; border-radius: 4px; } .cal-modal-x:hover { color: var(--tx); background: var(--sf2); } .cal-modal-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .cal-modal-row { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; } .cal-modal-row.align-top { align-items: flex-start; } .cal-modal-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mt); } .cal-modal-value { font-size: .92rem; color: var(--tx); } .cal-modal-foot { padding: 12px 18px; border-top: 1px solid var(--bd); background: var(--sf2); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .cal-status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .cal-status-scheduled { background: var(--sf2); color: var(--mt); border: 1px solid var(--bd); } .cal-status-confirmed { background: rgba(0, 230, 118, .15); color: var(--green-2); } .cal-status-completed { background: rgba(99, 102, 241, .15); color: #6366f1; } .cal-status-cancelled { background: rgba(239, 68, 68, .15); color: var(--rd); } .cal-status-no_show { background: rgba(245, 158, 11, .15); color: var(--am); } /* Task card assignee chip */ .task-card-assignee { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .04em; margin-left: auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); } /* Task detail modal (reuses .cal-modal-* scaffold above) */ .task-modal-box { max-width: 720px; } .task-modal-title { flex: 1; min-width: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--tx); background: transparent; border: none; outline: none; padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .15s; } .task-modal-title:hover, .task-modal-title:focus { border-bottom-color: var(--bd); } .task-modal-body { padding: 18px 22px; } .task-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .task-modal-field { display: flex; flex-direction: column; gap: 4px; } .task-modal-flabel { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mt); } .task-modal-section { border-top: 1px solid var(--bd); padding-top: 14px; margin-top: 14px; } .task-modal-section:first-child { border-top: none; padding-top: 0; margin-top: 0; } .task-comments { display: flex; flex-direction: column; gap: 12px; max-height: 280px; overflow-y: auto; margin-bottom: 12px; padding-right: 4px; } .task-comment { display: flex; gap: 10px; align-items: flex-start; } .task-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; } .task-comment-body { flex: 1; min-width: 0; } .task-comment-head { display: flex; gap: 8px; align-items: baseline; } .task-comment-author { font-size: .85rem; font-weight: 600; color: var(--tx); } .task-comment-time { font-size: .68rem; color: var(--dm); } .task-comment-content { margin-top: 2px; font-size: .88rem; color: var(--tx); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .task-comment-composer { display: flex; flex-direction: column; gap: 8px; } .task-comment-composer .btn { align-self: flex-end; } /* Archive panel */ .task-archive-box { max-width: 600px; } .task-archive-list { display: flex; flex-direction: column; gap: 8px; } .task-archive-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bd); border-radius: 8px; background: var(--sf); } .task-archive-row:hover { background: var(--sf2); } /* Settings — uniform table look for API keys / webhooks / audit log */ .settings-table { width: 100%; border-collapse: collapse; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); overflow: hidden; } .settings-table thead th { text-align: left; padding: 10px 14px; background: var(--sf2); color: var(--mt); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--bd); } .settings-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--bd); font-size: .9rem; vertical-align: top; } .settings-table tbody tr:last-child td { border-bottom: none; } .settings-table tbody tr:hover td { background: var(--sf2); } /* AI Receptionist stat row — 4-up grid; never stacks past 2 cols on mobile */ .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } @media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Numbers tab — provision/release/assign header + table extras */ .rx-numbers-header { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); margin-bottom: 12px; } .rx-numbers-agent-select { padding: 6px 28px 6px 10px; font-size: .82rem; font-family: inherit; background: var(--sf); color: var(--tx); border: 1px solid var(--bd); border-radius: 6px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a8493' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .rx-numbers-agent-select:hover { border-color: var(--bd2); } .rx-numbers-agent-select:focus { outline: 2px solid var(--bl); outline-offset: 1px; } .rx-numbers-agent-select:disabled { opacity: .55; cursor: wait; } .rx-numbers-release { color: var(--rd); } .rx-numbers-release:hover { background: rgba(var(--rd-rgb, 211 47 47) / .08); border-color: var(--rd); } /* Leads tab — table of captured callers */ .rx-leads-table { width: 100%; border-collapse: collapse; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); overflow: hidden; } .rx-leads-table th { text-align: left; padding: 10px 14px; background: var(--sf2); color: var(--mt); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--bd); } .rx-leads-table td { padding: 12px 14px; border-bottom: 1px solid var(--bd); font-size: .88rem; color: var(--tx); vertical-align: top; } .rx-leads-table tr:last-child td { border-bottom: none; } .rx-leads-table tr.clickable:hover td { background: var(--sf2); cursor: pointer; } .rx-lead-intent { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .rx-lead-intent.quote { background: rgba(0, 230, 118, .15); color: var(--green-2); } .rx-lead-intent.callback { background: rgba(99, 102, 241, .15); color: #6366f1; } .rx-lead-intent.appointment { background: rgba(27, 42, 138, .12); color: var(--navy); } .rx-lead-intent.complaint { background: rgba(239, 68, 68, .15); color: var(--rd); } .rx-lead-intent.info, .rx-lead-intent.other { background: var(--sf2); color: var(--mt); border: 1px solid var(--bd); } /* Help Desk — clickable Knowledge Base cards + article modal */ .kb-card { display: block; width: 100%; text-align: left; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: background .12s, border-color .12s, transform .12s, box-shadow .12s; } .kb-card:hover { background: var(--sf2); border-color: var(--bd2); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); transform: translateY(-1px); } .kb-card:active { transform: translateY(0); } .kb-modal-box { max-width: 720px; } .kb-modal-body { padding: 20px 24px; } .kb-article-content { font-size: .95rem; line-height: 1.7; color: var(--tx); white-space: pre-wrap; word-break: break-word; } .kb-modal-draft { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--sf2); color: var(--mt); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: .58rem; }