/* ── 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%); } /* ── 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%); /* 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: var(--sf); border-right: 1px solid var(--bd); 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: none; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; } .sidebar-logo img { height: 28px; 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: var(--navy); letter-spacing: .02em; } .sidebar-logo-text span { color: var(--green); } .sidebar-collapse-btn { background: none; border: none; color: var(--dm); 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: var(--tx); background: var(--sf2); } .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: .1em; text-transform: uppercase; color: var(--dm); 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: var(--mt); 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: var(--sf2); color: var(--tx); } .snav-btn.active { background: var(--navy-light); color: var(--navy); font-weight: 600; } /* 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: var(--sf2); color: var(--dm); 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: .45; } .snav-btn.module-locked .snav-lock { margin-left: auto; display: flex; align-items: center; color: var(--dm); } .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 ───────────────────────────────────────────────────── */ .top-header { position: fixed; top: 0; right: 0; left: var(--sidebar-w); height: var(--header-h); background: var(--sf); border-bottom: 1px solid var(--bd); 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); } .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); } .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); background: rgba(27,42,138,.08); } .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: 1100px; margin: 0 auto; padding: 36px 32px 80px; } .page-inner.narrow { max-width: 760px; } .page-inner.wide { max-width: 1320px; } /* ── TYPOGRAPHY ────────────────────────────────────────────────────────── */ .eyebrow { font-size: .65rem; text-transform: uppercase; letter-spacing: .15em; color: var(--navy); 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); border: 1px solid var(--navy); } .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); background: rgba(27,42,138,.08); } .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); background: rgba(27,42,138,.08); } .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); background: rgba(27,42,138,.08); } .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); } /* ── 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); border-bottom-color: var(--navy); } .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: rgba(27,42,138,.06); border: 1px solid rgba(27,42,138,.18); color: var(--navy); } .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; } .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: rgba(27,42,138,.06); color: var(--navy); } /* ── 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); 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); border-bottom-color: var(--navy); } /* ── 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); 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); 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); } .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); } @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); 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); } /* 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); } .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; } /* ── 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 ─────────────────────────────────────────────────── */ .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); } .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); 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); 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); 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; } .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 { width:100%; text-align:left; display:flex; align-items:center; gap:10px; padding:10px 14px; border:0; background:transparent; border-bottom:1px solid var(--bd, #E5E7EB); cursor:pointer; transition:background .12s ease; } .notifications-item:last-child { border-bottom:0; } .notifications-item:hover { background:#F9FAFB; } .notifications-item-text { flex:1; min-width:0; } .notifications-item-title { font-size:13px; font-weight:600; color:var(--text, #1A1F36); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .notifications-item-sub { font-size:11.5px; color:var(--text-muted, #6B7280); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .notifications-item-time { font-size:11px; color:#9CA3AF; flex-shrink:0; } .notifications-empty { padding:24px 14px; text-align:center; font-size:13px; color:var(--text-muted, #6B7280); } /* ── 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); }