:root { --color-primary: #4f46e5; --color-primary-dark: #4338ca; --color-primary-light: #eef2ff; --color-bg: #f6f7fa; --color-surface: #ffffff; --color-surface-alt: #f3f4f8; --color-border: #e6e8ee; --color-text: #111827; --color-text-muted: #6b7280; /* Sidebar is a dark slate plane so the app reads as a workspace rather than a white page with links down one side. */ --sidebar-bg: #14161f; --sidebar-bg-soft: #1c1f2b; --sidebar-text: #9aa1b4; --sidebar-text-bright: #ffffff; --sidebar-border: rgba(255, 255, 255, .07); --color-danger: #dc2626; --color-danger-light: #fef2f2; --color-success: #059669; --color-success-light: #ecfdf5; --color-warning: #d97706; --color-warning-light: #fffbeb; --color-outbound-bubble: #4f46e5; --color-inbound-bubble: #f0f1f5; --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 0 0 1px rgba(16, 24, 40, .015); --shadow-md: 0 6px 18px rgba(16, 24, 40, .09); --shadow-lg: 0 22px 55px rgba(16, 24, 40, .18); --sidebar-width: 244px; } /* ---------- Dark mode ---------- Toggled via [data-theme="dark"] on (includes/layout.php applies it pre-paint from localStorage, assets/js/app.js flips it on click) - every color in the app is a var() off this block, so nothing else needs to change per-component. The sidebar is already a dark plane in light mode, so it's left alone; only the main content's palette inverts. */ [data-theme="dark"] { --color-primary: #6366f1; --color-primary-dark: #818cf8; --color-primary-light: rgba(99, 102, 241, .18); --color-bg: #0f1115; --color-surface: #171a22; --color-surface-alt: #1e222c; --color-border: #2b303d; --color-text: #e7e9ee; --color-text-muted: #9aa1b4; --color-danger: #f87171; --color-danger-light: rgba(248, 113, 113, .14); --color-success: #34d399; --color-success-light: rgba(52, 211, 153, .14); --color-warning: #fbbf24; --color-warning-light: rgba(251, 191, 36, .14); --color-outbound-bubble: #4f46e5; --color-inbound-bubble: #262a36; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } a { color: var(--color-primary); text-decoration: none; } h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.01em; } h2 { font-size: 15px; font-weight: 700; margin: 32px 0 12px; } h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } code { background: var(--color-surface-alt); padding: 1px 6px; border-radius: 4px; font-size: 12px; } .icon { width: 18px; height: 18px; flex-shrink: 0; } .empty-icon { width: 40px; height: 40px; color: var(--color-border); margin-bottom: 10px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; padding: 10px 18px; cursor: pointer; transition: background .12s ease, transform .06s ease; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-dark); } .btn-secondary { background: var(--color-surface-alt); color: var(--color-text); } .btn-secondary:hover { background: #e7e9f0; } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-danger { background: var(--color-danger); color: #fff; } .btn-danger:hover { background: #b91c1c; } .btn-icon { padding: 10px; border-radius: 999px; } .btn:disabled { opacity: .5; cursor: not-allowed; } .icon-btn { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: 6px; border-radius: 8px; display: inline-flex; } .icon-btn:hover { background: var(--color-surface-alt); color: var(--color-text); } /* ---------- Login page ---------- */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; background: radial-gradient(circle at 20% 20%, #eef2ff 0%, #f7f8fb 55%); } .login-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 36px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); } .login-card h1 { font-size: 24px; margin-bottom: 4px; } .login-subtitle { margin: 0 0 22px; color: var(--color-text-muted); font-size: 14px; } .login-card form { display: flex; flex-direction: column; gap: 14px; } .login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; } .login-card input { padding: 11px 13px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 15px; transition: border-color .12s ease, box-shadow .12s ease; } .login-card input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .login-card button { margin-top: 6px; padding: 12px; font-size: 15px; } /* ---------- Banners / toasts ---------- */ .banner { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; margin-bottom: 16px; } .banner .icon { width: 16px; height: 16px; } .banner-success { background: var(--color-success-light); color: var(--color-success); } .banner-error { background: var(--color-danger-light); color: var(--color-danger); } .banner a { margin-left: auto; font-weight: 700; } .toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 320px; } .toast { background: var(--color-text); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg); animation: toast-in .18s ease; } .toast.toast-error { background: var(--color-danger); } .toast.toast-success { background: var(--color-success); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- App shell / sidebar ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: linear-gradient(180deg, var(--sidebar-bg-soft) 0%, var(--sidebar-bg) 100%); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; height: 100vh; z-index: 50; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 14px; } .sidebar-brand-mark { width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(140deg, #6366f1 0%, #4338ca 100%); box-shadow: 0 3px 10px rgba(79, 70, 229, .45); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; } .sidebar-brand-text { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--sidebar-text-bright); } .sidebar-search { display: flex; align-items: center; gap: 9px; margin: 0 12px 6px; padding: 9px 11px; background: rgba(255, 255, 255, .05); border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm); color: var(--sidebar-text); font-size: 13px; font-weight: 600; cursor: pointer; width: calc(100% - 24px); transition: background .12s ease, color .12s ease; } .sidebar-search:hover { background: rgba(255, 255, 255, .09); color: var(--sidebar-text-bright); } .sidebar-search .icon { width: 16px; height: 16px; } .sidebar-search span { flex: 1; text-align: left; } .sidebar-search kbd, .cmdk kbd, .canned-replies-menu kbd { font-family: inherit; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .08); color: inherit; letter-spacing: .02em; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; flex: 1; overflow-y: auto; } .sidebar-group { color: rgba(255, 255, 255, .32); } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--sidebar-text); font-weight: 600; font-size: 13.5px; position: relative; transition: background .12s ease, color .12s ease; } .sidebar-link:hover { background: rgba(255, 255, 255, .06); color: var(--sidebar-text-bright); } .sidebar-link.active { background: rgba(99, 102, 241, .18); color: var(--sidebar-text-bright); } .sidebar-link.active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: #818cf8; } .sidebar-link.active .icon { color: #a5b4fc; } .sidebar-link .icon { width: 18px; height: 18px; } .sidebar-footer { border-top: 1px solid var(--sidebar-border); padding: 13px 16px; display: flex; align-items: center; gap: 10px; } .sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .sidebar-user-info { display: flex; flex-direction: column; min-width: 0; gap: 3px; } .sidebar-user-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sidebar-text-bright); } .sidebar-logout { color: var(--sidebar-text); display: flex; padding: 6px; border-radius: 8px; } .sidebar-logout:hover { background: rgba(255, 255, 255, .08); color: #f87171; } .sidebar-theme-toggle { color: var(--sidebar-text); display: flex; padding: 6px; border-radius: 8px; border: none; background: none; cursor: pointer; flex-shrink: 0; } .sidebar-theme-toggle:hover { background: rgba(255, 255, 255, .08); color: var(--sidebar-text-bright); } .theme-icon-light { display: none; } [data-theme="dark"] .theme-icon-dark { display: none; } [data-theme="dark"] .theme-icon-light { display: block; } .sidebar .role-badge { background: rgba(255, 255, 255, .1); color: var(--sidebar-text); } .sidebar .role-badge.role-admin { background: rgba(248, 113, 113, .18); color: #fca5a5; } .sidebar .role-badge.role-team_lead { background: rgba(251, 191, 36, .16); color: #fcd34d; } .sidebar .role-badge.role-agent { background: rgba(129, 140, 248, .2); color: #a5b4fc; } /* ---------- Command palette ---------- */ .cmdk { position: fixed; inset: 0; background: rgba(10, 12, 20, .55); backdrop-filter: blur(2px); z-index: 500; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .cmdk-panel { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; overflow: hidden; animation: cmdk-in .12s ease; } @keyframes cmdk-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .cmdk-input-row { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--color-border); } .cmdk-input-row .icon { color: var(--color-text-muted); } .cmdk-input-row input { flex: 1; border: none; outline: none; font-size: 15.5px; background: none; color: var(--color-text); } .cmdk-input-row kbd { background: var(--color-surface-alt); color: var(--color-text-muted); } .cmdk-results { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; } .cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; } .cmdk-item.active { background: var(--color-primary-light); } .cmdk-item-label { font-weight: 600; } .cmdk-item-hint { margin-left: auto; font-size: 12px; color: var(--color-text-muted); } .cmdk-kind { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); background: var(--color-surface-alt); padding: 3px 7px; border-radius: 5px; flex-shrink: 0; } .cmdk-empty { padding: 26px; text-align: center; color: var(--color-text-muted); font-size: 13.5px; } .cmdk-item-message .cmdk-item-label { flex-shrink: 0; } .cmdk-item-snippet { color: var(--color-text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--avatar-bg, var(--color-primary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .avatar-sm { width: 28px; height: 28px; font-size: 11px; } .role-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--color-surface-alt); color: var(--color-text-muted); } .role-badge.role-admin { background: var(--color-danger-light); color: var(--color-danger); } .role-badge.role-team_lead { background: var(--color-warning-light); color: var(--color-warning); } .role-badge.role-agent { background: var(--color-primary-light); color: var(--color-primary); } .mobile-nav-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 60; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 9px; box-shadow: var(--shadow-md); color: var(--color-text); } .sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(15, 20, 28, .4); z-index: 45; } .main-content { margin-left: var(--sidebar-width); flex: 1; min-width: 0; min-height: 100vh; } .main-content-flush { height: 100vh; overflow: hidden; display: flex; } /* ---------- Generic page layout ---------- */ .page { padding: 30px 34px 56px; max-width: 1180px; margin: 0 auto; width: 100%; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px; } .page-header h1 { font-size: 25px; letter-spacing: -0.022em; } .page-subtitle { color: var(--color-text-muted); margin: 5px 0 0; font-size: 13.5px; max-width: 640px; } .text-muted { color: var(--color-text-muted); } .search-box { display: flex; align-items: center; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 12px; min-width: 240px; } .search-box .icon { color: var(--color-text-muted); } .search-box input { border: none; background: none; padding: 9px 0; font-size: 14px; flex: 1; outline: none; } /* ---------- Cards / stats ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: 18px; } .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); } .stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; } .stat-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; font-weight: 600; } .stat-card.stat-danger .stat-value { color: var(--color-danger); } .stat-card.stat-spark { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; } .stat-spark-top { margin-bottom: 6px; } .sparkline { width: 100%; height: 40px; margin-top: 4px; } .sparkline-line { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .sparkline-fill { fill: var(--color-primary-light); stroke: none; } .table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); overflow-x: auto; } .data-table, .contacts-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td, .contacts-table th, .contacts-table td { padding: 12px 16px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--color-border); white-space: nowrap; } .data-table th, .contacts-table th { background: var(--color-surface-alt); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); font-weight: 700; } .data-table tr:last-child td, .contacts-table tr:last-child td { border-bottom: none; } .empty-cell { text-align: center; color: var(--color-text-muted); padding: 28px; font-size: 13px; } .cell-person { display: flex; align-items: center; gap: 10px; font-weight: 600; } .number-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--color-primary-light); color: var(--color-primary); padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; } .number-chip .icon { width: 13px; height: 13px; } .status-tag { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .status-tag.status-active { background: var(--color-success-light); color: var(--color-success); } .dnd-tag { background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; flex-shrink: 0; } .unread-badge { background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; } .assign-form { display: flex; gap: 8px; align-items: center; } .assign-form select { padding: 7px 9px; border: 1px solid var(--color-border); border-radius: 7px; font-size: 13px; } /* ---------- Collapsible add-forms ---------- */ .collapsible-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); margin: 18px 0; box-shadow: var(--shadow-sm); } .collapsible-form summary { cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; list-style: none; color: var(--color-primary); } .collapsible-form summary::-webkit-details-marker { display: none; } .collapsible-form[open] summary { border-bottom: 1px solid var(--color-border); } .contact-form { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .contact-form-stacked { grid-template-columns: 1fr; padding: 0; } .contact-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); } .contact-form input, .contact-form select { padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text); } .contact-form input:focus, .contact-form select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .contact-form .form-actions { grid-column: 1 / -1; } /* ---------- Team / dev tools ---------- */ .account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; } .account-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); } .number-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--color-border); flex-wrap: wrap; } .number-row:first-of-type { border-top: none; } .number-row-main { display: flex; align-items: center; gap: 8px; font-size: 13px; } .inline-form { display: flex; align-items: center; gap: 8px; } .inline-form select { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 7px; font-size: 12.5px; max-width: 160px; } .dev-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 8px; } .dev-tools-grid p.text-muted { font-size: 12.5px; margin: 0 0 12px; } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 20, 28, .45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; } .modal-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 26px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); } .modal-card h2 { margin: 0 0 4px; font-size: 18px; } .modal-subtitle { margin: 0 0 16px; color: var(--color-text-muted); font-size: 13px; } .modal-card form { display: flex; flex-direction: column; gap: 12px; } .modal-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; } .modal-card input { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } /* ---------- Inbox layout ---------- */ .inbox-layout { display: flex; flex: 1; min-height: 0; width: 100%; } /* ---------- Number-filter rail (admin/lead only) ---------- */ .numbers-rail { width: 96px; flex-shrink: 0; background: var(--color-surface-alt); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 6px; overflow-y: auto; } .numbers-rail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; position: relative; text-align: center; } /* Solid primary color rather than a pale tint - a tint derived from --color-surface-alt/--color-primary-light reads as almost no contrast at all in some themes (surface-alt is barely different from surface, and in dark mode it's actually the darker of the two), which was the actual complaint: no way to tell which number is selected. A flat brand-color fill reads the same, unambiguous way in both themes. */ .numbers-rail-item:hover { background: var(--color-primary-light); } .numbers-rail-item.active { background: var(--color-primary); } .numbers-rail-item.active .numbers-rail-label { color: #fff; } .numbers-rail-item.active .numbers-rail-avatar-all { background: rgba(255, 255, 255, .22); color: #fff; } .numbers-rail-item.active .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); } /* The unread badge is normally --color-primary too - without this it disappears into the active item's own solid-primary background. */ .numbers-rail-item.active .unread-badge { background: #fff; color: var(--color-primary); } .numbers-rail-item .avatar { width: 32px; height: 32px; font-size: 12px; } .numbers-rail-avatar-all { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); color: var(--color-text-muted); flex-shrink: 0; } .numbers-rail-avatar-all .icon { width: 16px; height: 16px; } .numbers-rail-label { font-size: 10px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 82px; color: var(--color-text); } .numbers-rail-item .unread-badge { position: absolute; top: 2px; right: 10px; } .thread-pane { width: 340px; flex-shrink: 0; background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; min-height: 0; } .thread-pane-header { padding: 14px; border-bottom: 1px solid var(--color-border); display: flex; gap: 8px; } /* ---------- Open/Done + Unread filter tabs (OpenPhone-style) ---------- */ .thread-filter-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--color-border); } .segmented-control { display: flex; background: var(--color-surface-alt); border-radius: 999px; padding: 2px; gap: 2px; } .segmented-btn { border: none; background: none; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); cursor: pointer; } .segmented-btn.active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); } .pill-toggle { border: 1px solid var(--color-border); background: var(--color-surface); padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); cursor: pointer; } .pill-toggle[data-active="1"] { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } /* ---------- Triage bar (next-unread jump) ---------- */ .triage-bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px; border: none; border-bottom: 1px solid var(--color-border); background: var(--color-primary-light); color: var(--color-primary); cursor: pointer; font-size: 12.5px; text-align: left; } .triage-bar:hover { background: #e0e4fc; } .triage-bar-label { font-weight: 800; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; opacity: .8; } .triage-bar-name { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .triage-bar-count { background: var(--color-primary); color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .triage-bar kbd { background: rgba(79, 70, 229, .12); color: var(--color-primary); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; } /* SLA color escalation on unread thread rows - green < 5min, amber < 30min, red beyond. */ .thread-time.sla-warn { color: var(--color-warning); font-weight: 700; } .thread-time.sla-critical { color: var(--color-danger); font-weight: 700; } .thread-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1; } .thread-empty { padding: 32px 16px; text-align: center; color: var(--color-text-muted); font-size: 13.5px; } .thread-item { display: flex; gap: 11px; padding: 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background .1s ease; } .thread-item:hover { background: var(--color-surface-alt); } .thread-item.active { background: var(--color-primary-light); } .thread-info { flex: 1; min-width: 0; } .thread-info-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .thread-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pin-icon { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; color: var(--color-text-muted); flex-shrink: 0; } .thread-item[data-status="done"] { opacity: .6; } /* ---------- Thread-list right-click menu ---------- */ .context-menu { position: fixed; z-index: 1000; min-width: 210px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.18)); padding: 6px; display: flex; flex-direction: column; } .context-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: none; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--color-text); text-align: left; cursor: pointer; text-decoration: none; } .context-menu-item:hover { background: var(--color-surface-alt); } .context-menu-item .icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-text-muted); } .context-menu-item.danger { color: var(--color-danger); } .context-menu-item.danger .icon { color: var(--color-danger); } .thread-time { font-size: 11.5px; color: var(--color-text-muted); flex-shrink: 0; } .thread-info-bottom { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .thread-preview { font-size: 12.5px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* ---------- Chat pane ---------- */ .chat-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--color-bg); } .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 14px; } .chat-window { flex: 1; display: flex; flex-direction: column; min-height: 0; } .chat-header { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); flex-shrink: 0; flex-wrap: wrap; row-gap: 6px; } .back-btn { display: none; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--color-text); } .chat-header-info { display: flex; flex-direction: column; align-items: flex-start; background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); text-align: left; } .chat-header-info:hover { background: var(--color-surface-alt); } .chat-contact-name { font-weight: 700; font-size: 14.5px; } .chat-contact-phone { font-size: 12px; color: var(--color-text-muted); } .chat-delete-btn { flex-shrink: 0; margin-left: auto; } .chat-stage-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--stage-color, #4F46E5); background: var(--color-surface-alt); background: color-mix(in srgb, var(--stage-color, #4F46E5) 12%, transparent); white-space: nowrap; flex-shrink: 0; } .chat-deal-value { font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } .chat-line { font-size: 11.5px; font-weight: 700; color: var(--color-primary); background: var(--color-primary-light); padding: 4px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; flex-shrink: 0; } /* ---------- New conversation: inline compose mode ---------- */ .compose-fields { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .compose-field { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-muted); } .compose-field-label { font-weight: 700; flex-shrink: 0; } .compose-field input { border: none; border-bottom: 1px solid var(--color-border); padding: 4px 2px; font-size: 13.5px; color: var(--color-text); background: none; min-width: 160px; } .compose-field input:focus { outline: none; border-bottom-color: var(--color-primary); } .msg-author { display: block; font-size: 10.5px; font-weight: 700; opacity: .8; margin-bottom: 3px; } .msg-author-external { font-style: italic; font-weight: 600; } /* ---------- Team page: shared numbers ---------- */ .number-rename-form { display: flex; gap: 6px; margin-bottom: 12px; } .number-rename-form input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; } .number-rename-form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .number-agents { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .agent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; background: var(--color-surface-alt); border-radius: 999px; font-size: 12px; font-weight: 600; } .agent-chip .avatar { width: 20px; height: 20px; font-size: 9px; } .agent-chip-remove { display: inline; } .agent-chip-remove button { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 14px; line-height: 1; padding: 0 2px; } .agent-chip-remove button:hover { color: var(--color-danger); } .dnd-banner { display: flex; align-items: center; gap: 8px; background: var(--color-danger-light); color: var(--color-danger); font-size: 13px; font-weight: 600; padding: 9px 16px; flex-shrink: 0; } .dnd-banner .icon { width: 15px; height: 15px; } .chat-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px; display: flex; flex-direction: column; gap: 8px; } /* A long unbroken token (email, URL, an address with no spaces) was pushing the bubble past its max-width instead of wrapping, which forced the whole message list into horizontal scroll - overflow-wrap lets a word like that break instead of stretching its container. */ .msg-bubble { max-width: 62%; padding: 9px 13px; border-radius: 15px; font-size: 14px; line-height: 1.45; position: relative; animation: msg-in .14s ease; overflow-wrap: break-word; word-break: break-word; } @keyframes msg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .msg-bubble.inbound { align-self: flex-start; background: var(--color-inbound-bubble); color: var(--color-text); border-bottom-left-radius: 4px; } .msg-bubble.outbound { align-self: flex-end; background: var(--color-outbound-bubble); color: #fff; border-bottom-right-radius: 4px; } .msg-bubble.pending { opacity: .6; } .msg-bubble .msg-time { display: block; font-size: 10px; opacity: .7; margin-top: 4px; text-align: right; } .msg-status { margin-left: 6px; font-weight: 700; } .msg-status-failed { color: #fecaca; } .msg-bubble.undelivered, .msg-bubble.failed { background: #b91c1c; opacity: 1; } .msg-bubble.undelivered .msg-time, .msg-bubble.failed .msg-time { opacity: .95; } .msg-bubble img.msg-attachment { max-width: 100%; border-radius: 9px; display: block; margin-bottom: 4px; } .msg-attachment-file { display: inline-block; margin-bottom: 4px; padding: 7px 11px; border-radius: 8px; background: rgba(255, 255, 255, .18); color: inherit; font-size: 12.5px; font-weight: 600; } .msg-bubble.inbound .msg-attachment-file { background: rgba(17, 24, 39, .07); } .msg-attachment-file:hover { text-decoration: underline; } .code-block { background: #0f1220; color: #e5e7eb; padding: 13px 15px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.7; overflow-x: auto; margin: 0; font-family: 'SFMono-Regular', Consolas, monospace; white-space: pre; } .msg-call-marker { align-self: center; display: flex; align-items: center; gap: 6px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; } .msg-call-marker .icon { width: 14px; height: 14px; } .chat-input-form { display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--color-border); background: var(--color-surface); flex-shrink: 0; position: relative; } .chat-input-form input { flex: 1; padding: 11px 16px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 14px; } .chat-input-form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .chat-input-form button:disabled, .chat-input-form input:disabled, .chat-input-form textarea:disabled { opacity: .5; cursor: not-allowed; } /* #chat-input: a textarea so a long/pasted message grows the box (up to a cap, then it scrolls) instead of hiding the rest of the text off-screen in a single-line field. Height itself is driven from JS (autoGrowChatInput). */ .chat-input-form textarea#chat-input { flex: 1; padding: 11px 16px; border: 1px solid var(--color-border); border-radius: 20px; font-size: 14px; font-family: inherit; line-height: 1.4; resize: none; overflow-y: auto; max-height: 160px; min-height: 42px; } .chat-input-form textarea#chat-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .chat-input-form .btn-icon { flex-shrink: 0; } /* ---------- Scheduled send ---------- */ .schedule-popover { position: absolute; bottom: calc(100% + 8px); right: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 14px; width: 240px; z-index: 100; } .schedule-popover label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); } .schedule-popover input { padding: 9px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit; } .schedule-popover-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .scheduled-list { padding: 10px 16px 0; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .scheduled-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--color-warning-light); color: #92660a; border-radius: var(--radius-sm); font-size: 12.5px; } .scheduled-item .icon { width: 14px; height: 14px; flex-shrink: 0; } .scheduled-item-body { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .scheduled-item-time { font-weight: 700; flex-shrink: 0; } .scheduled-item-cancel { background: none; border: none; cursor: pointer; color: inherit; opacity: .7; font-size: 15px; line-height: 1; padding: 0 2px; } .scheduled-item-cancel:hover { opacity: 1; } .skeleton-msg { align-self: flex-start; width: 55%; height: 34px; border-radius: 15px; background: linear-gradient(90deg, var(--color-surface-alt) 25%, #eaecf1 37%, var(--color-surface-alt) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; } @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------- Contact detail slide-over ---------- */ .detail-panel { width: 300px; flex-shrink: 0; background: var(--color-surface); border-left: 1px solid var(--color-border); display: flex; flex-direction: column; } .detail-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--color-border); } .detail-panel-header h3 { margin: 0; } .detail-panel-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .detail-row { display: flex; flex-direction: column; gap: 3px; } .detail-row-label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); font-weight: 700; } .detail-row-value { font-size: 14px; font-weight: 600; } .detail-avatar-block { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 0 4px; } .detail-avatar-block .avatar { width: 56px; height: 56px; font-size: 20px; } /* ---------- Canned replies menu ---------- */ .chat-input-form { position: relative; } .canned-replies-menu { position: absolute; bottom: calc(100% + 8px); left: 16px; right: 16px; max-width: 460px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; z-index: 100; animation: cmdk-in .1s ease; } .canned-replies-head { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--color-border); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); } .canned-replies-head kbd { background: var(--color-surface-alt); color: var(--color-text-muted); } .canned-reply-item { display: flex; flex-direction: column; width: 100%; padding: 10px 14px; border: none; background: none; text-align: left; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--color-border); } .canned-reply-item:last-child { border-bottom: none; } .canned-reply-item:hover, .canned-reply-item.active { background: var(--color-primary-light); } .canned-reply-item strong { font-weight: 700; color: var(--color-text); margin-bottom: 3px; font-size: 13px; } .canned-reply-item span { font-size: 12px; color: var(--color-text-muted); } .canned-replies-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 18px; } .canned-replies-empty strong { font-size: 13.5px; } .canned-replies-empty span { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.55; } /* Composer hint so the "/" shortcut is discoverable without documentation. */ .chat-input-form input::placeholder, .chat-input-form textarea::placeholder { color: #9ca3af; } /* Inbox detail panel additions */ .detail-avatar-block .stage-badge { margin-top: 4px; } .detail-notes-block { border-top: 1px solid var(--color-border); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; } .detail-notes-block .note-form { margin-bottom: 4px; } .detail-notes-block .note-item { padding: 9px 11px; } .detail-profile-link { width: 100%; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--color-surface-alt); color: var(--color-text-muted); } .badge-warning { background: var(--color-warning-light); color: var(--color-warning); } .badge-success, .badge-opted_in { background: var(--color-success-light); color: var(--color-success); } .badge-error, .badge-opted_out { background: var(--color-danger-light); color: var(--color-danger); } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; } .card h2 { margin-top: 0; } /* ================================================================ Sidebar groups ================================================================ */ .sidebar-group { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted); padding: 14px 12px 5px; opacity: .75; } .sidebar-nav > .sidebar-group:first-child { padding-top: 4px; } /* ================================================================ Panels - the shared card used by every CRM page ================================================================ */ .panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); margin-top: 18px; } .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .panel-header h2 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; } .panel-header h2 .icon { width: 16px; height: 16px; color: var(--color-text-muted); } .panel-note { font-size: 12px; color: var(--color-text-muted); font-weight: 600; } .panel-hint { font-size: 12.5px; color: var(--color-text-muted); margin: -6px 0 14px; line-height: 1.5; max-width: 70ch; } .btn-ghost { background: none; color: var(--color-text-muted); } .btn-ghost:hover { background: var(--color-surface-alt); color: var(--color-text); } .icon-btn.danger:hover { background: var(--color-danger-light); color: var(--color-danger); } .back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 14px; } .back-link:hover { color: var(--color-primary); } /* ================================================================ Dashboard filter bar ================================================================ */ .dash-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .dash-filter-bar .range-pills { margin: 0; } .agent-filter-form select { padding: 7px 30px 7px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: 12.5px; font-weight: 700; color: var(--color-text); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .agent-filter-form select:hover { border-color: var(--color-primary); } /* ================================================================ KPI tiles (hero numbers - proportional figures, never tabular) ================================================================ */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; } .kpi-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 3px; position: relative; transition: box-shadow .15s ease, transform .15s ease; } .kpi-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .kpi-tile-hero { background: linear-gradient(140deg, #4f46e5 0%, #4338ca 100%); border-color: transparent; } .kpi-tile-hero .kpi-label, .kpi-tile-hero .kpi-sub { color: rgba(255,255,255,.8); } .kpi-tile-hero .kpi-value { color: #fff; } .kpi-tile-hero .kpi-icon-chip { background: rgba(255,255,255,.16); color: #fff; } .kpi-icon-chip { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); color: var(--color-primary); margin-bottom: 6px; } .kpi-icon-chip .icon { width: 16px; height: 16px; } .kpi-icon-good { background: var(--color-success-light); color: var(--color-success); } .kpi-icon-blue { background: #e0f2fe; color: #0891b2; } .kpi-icon-amber { background: var(--color-warning-light); color: var(--color-warning); } .kpi-icon-alert { background: var(--color-danger-light); color: var(--color-danger); } .kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); } .kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .kpi-value-good { color: var(--color-success); } .kpi-value-alert { color: var(--color-danger); } .kpi-sub { font-size: 12px; color: var(--color-text-muted); } .mini-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } .mini-stat { display: flex; flex-direction: column; gap: 2px; } .mini-stat-value { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; } .mini-stat-success { color: var(--color-success); } .mini-stat-label { font-size: 11px; color: var(--color-text-muted); font-weight: 600; } .pipeline-summary { display: flex; gap: 26px; } .fact-list { margin: 0; display: flex; flex-direction: column; gap: 9px; } .fact-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .fact-list dt { color: var(--color-text-muted); margin: 0; } .fact-list dd { margin: 0; font-weight: 600; } /* ================================================================ Charts ================================================================ */ .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .chart-card { min-width: 0; } /* Funnel: ordered stages, ordinal one-hue ramp, every value direct-labeled so no number is reachable only through the tooltip. */ .funnel { display: flex; flex-direction: column; gap: 8px; } .funnel-row { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 12px; border-radius: 6px; padding: 2px; } .funnel-row:hover, .funnel-row:focus-visible { background: var(--color-surface-alt); outline: none; } .funnel-label { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); } .funnel-track { background: var(--color-surface-alt); border-radius: 4px; height: 26px; overflow: hidden; } .funnel-bar { height: 100%; background: var(--bar); border-radius: 0 4px 4px 0; transition: width .3s ease; } .funnel-value { display: flex; align-items: baseline; gap: 7px; font-size: 13px; min-width: 84px; justify-content: flex-end; } .funnel-value strong { font-weight: 800; font-variant-numeric: tabular-nums; } .funnel-money { font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* Line chart: 2px line, hairline recessive grid, no dashes */ .linechart-wrap { position: relative; } .linechart { width: 100%; height: 150px; display: block; overflow: visible; } .linechart .grid { stroke: var(--color-border); stroke-width: 1; } .linechart .axis { stroke: #c9ccd6; stroke-width: 1; } .linechart .area { fill: var(--color-primary-light); stroke: none; } .linechart .line { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .linechart .pt { fill: #2a78d6; opacity: 0; } .linechart .pt-last { opacity: 1; stroke: var(--color-surface); stroke-width: 2; } .linechart-hit { position: absolute; inset: 0 0 24px 0; } .linechart-hit .hit { position: absolute; top: 0; bottom: 0; width: 26px; transform: translateX(-13px); background: none; border: none; cursor: pointer; padding: 0; border-radius: 4px; } .linechart-hit .hit:hover, .linechart-hit .hit:focus-visible { background: rgba(79, 70, 229, .07); outline: none; } .linechart-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-muted); margin-top: 2px; font-weight: 600; } .linechart-peak { font-weight: 700; } .viz-tooltip { position: fixed; z-index: 400; background: var(--color-text); color: #fff; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 7px; pointer-events: none; box-shadow: var(--shadow-md); white-space: nowrap; } /* ---------- Call volume bar chart (2-series: inbound/outbound) ---------- */ .barchart-wrap { position: relative; } .barchart { width: 100%; height: 150px; display: block; overflow: visible; } .barchart .grid { stroke: var(--color-border); stroke-width: 1; } .barchart .axis { stroke: #c9ccd6; stroke-width: 1; } .barchart .bar-in { fill: #2a78d6; cursor: pointer; } .barchart .bar-in:hover, .barchart .bar-in:focus-visible { fill: #1c5cab; outline: none; } .barchart .bar-out { fill: #eb6834; cursor: pointer; } .barchart .bar-out:hover, .barchart .bar-out:focus-visible { fill: #c94f1f; outline: none; } .chart-legend { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; } .legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } .legend-in { background: #2a78d6; } .legend-out { background: #eb6834; margin-left: 10px; } /* ================================================================ Analytics page - tabs ================================================================ */ .page-analytics { max-width: 1180px; } .analytics-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--color-border); margin-top: 18px; } .tab-btn { display: flex; align-items: center; gap: 7px; background: none; border: none; padding: 10px 4px; margin-right: 22px; font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--color-text-muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color .12s ease, border-color .12s ease; } .tab-btn .icon { width: 16px; height: 16px; } .tab-btn:hover { color: var(--color-text); } .tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .tab-content { display: none; } .tab-content.active { display: block; animation: cmdk-in .12s ease; } .kpi-grid-compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 0; margin-bottom: 18px; } .panel-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .panel-header-actions select { padding: 6px 26px 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; background: var(--color-surface); } /* ---------- Daily agent activity (Feature: per-agent daily reach) ---------- */ .agent-activity-list { display: flex; flex-direction: column; gap: 12px; max-height: 260px; overflow-y: auto; padding-right: 4px; } .agent-activity-row { display: flex; align-items: center; gap: 10px; } .agent-activity-main { flex: 1; min-width: 0; } .agent-activity-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; } .agent-activity-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agent-activity-nums { font-size: 11.5px; color: var(--color-text-muted); flex-shrink: 0; } .agent-activity-nums strong { color: var(--color-text); font-weight: 800; } .agent-activity-track { background: var(--color-surface-alt); border-radius: 4px; height: 6px; overflow: hidden; } .agent-activity-bar { height: 100%; background: linear-gradient(90deg, #2a78d6, #5598e7); border-radius: 4px; transition: width .3s ease; } /* ================================================================ Pipeline board (kanban) ================================================================ */ .page-pipeline { max-width: none; } .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr); gap: 14px; margin-top: 20px; overflow-x: auto; padding-bottom: 12px; align-items: start; } .kanban-col { background: var(--color-surface-alt); border-radius: var(--radius); padding: 12px; min-width: 0; } .kanban-col-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .kanban-col-title { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; } .stage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stage-color, var(--pill-color, var(--tag-color, currentColor))); flex-shrink: 0; } .kanban-count { background: var(--color-surface); color: var(--color-text-muted); border-radius: 999px; padding: 1px 8px; font-size: 11px; } .kanban-col-value { font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .kanban-drop { display: flex; flex-direction: column; gap: 9px; min-height: 70px; border-radius: var(--radius-sm); transition: background .12s ease; } .kanban-drop.drag-over { background: var(--color-primary-light); outline: 2px dashed var(--color-primary); outline-offset: 2px; } .kanban-empty { text-align: center; color: var(--color-text-muted); font-size: 12px; padding: 18px 0; margin: 0; } .kanban-more { display: block; text-align: center; padding: 9px; font-size: 12px; font-weight: 700; color: var(--color-primary); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); } .kanban-more:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .deal-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); cursor: grab; transition: box-shadow .12s ease, transform .12s ease; } .deal-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .deal-card.dragging { opacity: .45; cursor: grabbing; } .deal-card-link { display: block; padding: 11px; color: inherit; } .deal-card-top { display: flex; align-items: center; gap: 9px; } .deal-card-identity { display: flex; flex-direction: column; min-width: 0; flex: 1; } .deal-card-identity strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .deal-card-identity span { font-size: 11.5px; } .deal-card-value { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; margin-top: 9px; color: var(--color-success); } .deal-card-value .icon { width: 14px; height: 14px; } .deal-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; } .deal-card-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--color-text-muted); font-weight: 600; } .deal-card-followup { display: inline-flex; align-items: center; gap: 3px; } .deal-card-followup .icon { width: 12px; height: 12px; } .deal-card-followup.overdue { color: var(--color-danger); } .dnd-tag-sm { font-size: 9px; padding: 1px 5px; } /* ================================================================ Stages & tags ================================================================ */ .stage-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--stage-color); background: var(--color-surface-alt); /* fallback where color-mix is unsupported */ background: color-mix(in srgb, var(--stage-color) 12%, transparent); } .stage-bar { display: flex; gap: 6px; margin: 18px 0 4px; flex-wrap: wrap; } .stage-step { flex: 1; min-width: 96px; padding: 10px 12px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: all .12s ease; } .stage-step:hover { border-color: var(--stage-color); color: var(--stage-color); } .stage-step.active { background: var(--stage-color); border-color: var(--stage-color); color: #fff; box-shadow: var(--shadow-sm); } .tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--tag-color); border: none; white-space: nowrap; background: var(--color-surface-alt); /* fallback where color-mix is unsupported */ background: color-mix(in srgb, var(--tag-color) 13%, transparent); } .tag-chip .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tag-color); } .tag-chip-lg { padding: 6px 13px; font-size: 12.5px; } .tag-cell { display: flex; flex-wrap: wrap; gap: 4px; } .tag-picker { display: flex; flex-wrap: wrap; gap: 7px; } .tag-chip-toggle { cursor: pointer; opacity: .45; transition: opacity .12s ease, transform .06s ease; padding: 6px 13px; font-size: 12.5px; } .tag-chip-toggle:hover { opacity: .8; } .tag-chip-toggle.on { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--tag-color); } .tag-chip-toggle:active { transform: scale(.96); } .tag-manager { display: flex; flex-wrap: wrap; gap: 9px; } .tag-edit, .tag-delete { background: none; border: none; cursor: pointer; color: inherit; opacity: .65; font-size: 11px; padding: 0 2px; font-weight: 700; } .tag-edit:hover, .tag-delete:hover { opacity: 1; } .tag-delete { font-size: 15px; line-height: 1; } .color-picker { display: flex; flex-wrap: wrap; gap: 8px; } .color-swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--swatch); border: 2px solid transparent; cursor: pointer; padding: 0; } .color-swatch.selected { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-surface) inset; } /* ================================================================ Filter bar ================================================================ */ .filter-bar { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 14px; } .filter-group { display: flex; flex-wrap: wrap; gap: 7px; } .filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: all .12s ease; } .filter-pill:hover { border-color: var(--pill-color, var(--color-primary)); color: var(--pill-color, var(--color-primary)); } .filter-pill.active { background: var(--pill-color, var(--color-primary)); border-color: var(--pill-color, var(--color-primary)); color: #fff; } .filter-pill.active .stage-dot { background: #fff; } /* ---------- Results bar + pagination ---------- */ .results-bar { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); } .pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; } .pagination-info { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; } .pagination .btn.disabled { opacity: .4; pointer-events: none; } /* ---------- Saved views (Feature 7) ---------- */ .saved-views-row { margin-bottom: 10px; } .saved-view-add { color: var(--color-primary); border-style: dashed; } .saved-view-chip { padding-right: 6px; gap: 8px; } .saved-view-delete { background: none; border: none; cursor: pointer; color: inherit; opacity: .55; font-size: 14px; line-height: 1; padding: 0 2px; } .saved-view-delete:hover { opacity: 1; } /* ---------- Bulk action bar (Feature 6) ---------- */ .col-check { width: 34px; } .col-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-primary); } .bulk-bar { display: flex; align-items: center; gap: 16px; padding: 11px 16px; margin-bottom: 12px; background: #111827; color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md); animation: cmdk-in .12s ease; flex-wrap: wrap; } .bulk-bar-count { font-weight: 700; font-size: 13px; flex-shrink: 0; } .bulk-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; } .bulk-action { display: flex; gap: 6px; } .bulk-action select { padding: 6px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; font-size: 12.5px; } .bulk-action select option { color: #111; } .bulk-bar .btn-secondary { background: rgba(255,255,255,.12); color: #fff; } .bulk-bar .btn-secondary:hover { background: rgba(255,255,255,.2); } .bulk-bar .btn-ghost { color: rgba(255,255,255,.75); flex-shrink: 0; } .bulk-bar .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; } /* ================================================================ Contact profile ================================================================ */ .page-contact { max-width: 1240px; } .contact-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .avatar-lg { width: 62px; height: 62px; font-size: 22px; } .contact-hero-main { flex: 1; min-width: 200px; } .contact-hero-main h1 { font-size: 24px; } .contact-hero-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 13px; color: var(--color-text-muted); align-items: center; } .contact-hero-meta span { display: inline-flex; align-items: center; gap: 5px; } .contact-hero-meta .icon { width: 14px; height: 14px; } .contact-grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; } .contact-col { min-width: 0; } .stacked-form { display: flex; flex-direction: column; gap: 12px; } .stacked-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); } .stacked-form input, .stacked-form select, .stacked-form textarea { padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--color-text); width: 100%; } .stacked-form input:focus, .stacked-form select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .stacked-form input[type="range"] { padding: 0; accent-color: var(--color-primary); } .range-out { float: right; color: var(--color-primary); font-weight: 800; } /* ================================================================ Tasks ================================================================ */ .task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .task-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: var(--radius-sm); } .task-item:hover { background: var(--color-surface-alt); } .task-check { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; border: 1.5px solid var(--color-border); background: var(--color-surface); cursor: pointer; display: flex; align-items: center; justify-content: center; color: transparent; padding: 0; margin-top: 1px; } .task-check .icon { width: 13px; height: 13px; } .task-check:hover { border-color: var(--color-primary); color: var(--color-border); } .task-item.done .task-check { background: var(--color-success); border-color: var(--color-success); color: #fff; } .task-item.done .task-title { text-decoration: line-through; color: var(--color-text-muted); } .task-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .task-title { font-size: 13.5px; font-weight: 600; } .task-due, .task-meta { font-size: 11.5px; color: var(--color-text-muted); } .task-due.bucket-overdue { color: var(--color-danger); font-weight: 700; } .task-due.bucket-today { color: var(--color-warning); font-weight: 700; } .task-list-lg .task-item { padding: 12px 10px; border-bottom: 1px solid var(--color-border); border-radius: 0; } .task-list-lg .task-item:last-child { border-bottom: none; } .task-bucket { margin-top: 22px; } .bucket-heading { display: flex; align-items: center; gap: 9px; font-size: 13px; margin: 0 0 6px; } .bucket-count { background: var(--color-surface-alt); color: var(--color-text-muted); border-radius: 999px; padding: 1px 9px; font-size: 11px; } .bucket-heading.tone-danger { color: var(--color-danger); } .bucket-heading.tone-warning { color: var(--color-warning); } .bucket-heading.tone-success { color: var(--color-success); } .task-create { margin-bottom: 8px; } .task-create-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; } .task-create-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); } .task-create-grid input, .task-create-grid select { padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } .inline-form input { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; } .inline-form { margin-bottom: 10px; flex-wrap: wrap; } /* ================================================================ Notes & timeline ================================================================ */ .note-form { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; } .note-form textarea { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit; resize: vertical; width: 100%; } .note-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .note-form button { align-self: flex-start; } .note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .note-item { background: var(--color-surface-alt); border-radius: var(--radius-sm); padding: 11px 13px; } .note-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 5px; } .note-body { margin: 0; font-size: 13.5px; line-height: 1.55; } .timeline { list-style: none; margin: 0; padding: 0 0 0 6px; display: flex; flex-direction: column; } .timeline-item { display: flex; gap: 12px; padding: 8px 0; position: relative; } .timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 3.5px; top: 20px; bottom: -8px; width: 1px; background: var(--color-border); } .timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); margin-top: 6px; flex-shrink: 0; } .timeline-item div { display: flex; flex-direction: column; gap: 1px; } .timeline-text { font-size: 13px; font-weight: 600; } .timeline-meta { font-size: 11.5px; color: var(--color-text-muted); } /* ================================================================ Settings list ================================================================ */ .settings-list { display: flex; flex-direction: column; gap: 9px; } .settings-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 13px 15px; } .settings-item:hover { border-color: #d6d9e3; } .settings-item-main { min-width: 0; flex: 1; } .settings-item-title { display: block; font-size: 13.5px; margin-bottom: 3px; } .settings-item-body { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; } .settings-item-actions { display: flex; gap: 3px; flex-shrink: 0; } .settings-item-actions .icon-btn { font-size: 12px; font-weight: 700; } .field-hint { font-size: 11.5px; color: var(--color-text-muted); margin: -4px 0 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .var-chip { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 11px; background: var(--color-surface-alt); color: var(--color-primary); border: 1px solid var(--color-border); border-radius: 5px; padding: 2px 6px; cursor: pointer; } .var-chip:hover { background: var(--color-primary-light); border-color: var(--color-primary); } .modal-card textarea { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; resize: vertical; width: 100%; } /* ================================================================ Contacts table extras ================================================================ */ .cell-person-text { display: flex; flex-direction: column; gap: 1px; } .cell-person-text span { font-size: 11.5px; font-weight: 500; } .due-now { color: var(--color-danger); font-weight: 700; } .contact-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .contact-form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); } .contact-form-grid input, .contact-form-grid select { padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; } .page-contacts .contact-form { display: block; padding: 18px 20px; } /* ---------- Mobile responsiveness ---------- */ @media (max-width: 900px) { .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .sidebar-scrim.show { display: block; } .mobile-nav-toggle { display: inline-flex; } .main-content { margin-left: 0; } .page { padding: 68px 18px 40px; } } @media (max-width: 768px) { .inbox-layout { position: relative; overflow: hidden; } .thread-pane { width: 100%; position: absolute; inset: 0; z-index: 1; transition: transform .2s ease; } .chat-pane { width: 100%; position: absolute; inset: 0; z-index: 2; transform: translateX(100%); transition: transform .2s ease; background: var(--color-surface); } .inbox-layout.conversation-open .thread-pane { transform: translateX(-100%); } .inbox-layout.conversation-open .chat-pane { transform: translateX(0); } .back-btn { display: inline-flex; } .detail-panel { position: fixed; inset: 0 0 0 auto; width: 86%; max-width: 320px; z-index: 90; box-shadow: var(--shadow-lg); } .msg-bubble { max-width: 82%; } .contact-form { grid-template-columns: 1fr; } .stat-card.stat-spark { grid-column: span 1; } } /* ---------- Responsive: CRM pages ---------- */ @media (max-width: 1100px) { .contact-grid { grid-template-columns: 1fr; } .chart-row { grid-template-columns: 1fr; } .task-create-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .page { padding: 68px 16px 40px; } .page-header { flex-direction: column; align-items: stretch; } .page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; } .search-box { min-width: 0; flex: 1; } .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .kpi-value { font-size: 24px; } .pipeline-summary { gap: 18px; flex-wrap: wrap; } .mini-stat-row { grid-template-columns: repeat(2, 1fr); } /* The board scrolls horizontally on phones; drag-and-drop is a desktop affordance, so the contact profile's stage bar is the touch path. */ .kanban { grid-auto-columns: 84vw; } .task-create-grid { grid-template-columns: 1fr; } .funnel-row { grid-template-columns: 68px 1fr auto; gap: 8px; } .funnel-label { font-size: 11.5px; } .contact-hero-main h1 { font-size: 20px; } .stage-step { min-width: calc(33.333% - 4px); flex: 0 1 auto; } .settings-item { flex-direction: column; gap: 8px; } .settings-item-actions { align-self: flex-end; } }