:root { color-scheme: light; --navy: #16232f; --navy-light: #24384a; --accent: #2f6fed; --ink: #16202a; --muted: #6b7688; --border: #e6e9ee; --bg: #f4f5f7; --surface: #fff; --hover-bg: #fafbfc; --radius: 10px; } /* Set on by layout.js from the logged-in user's persisted theme_preference (see src/web/routes/theme.js) -- default is light until someone actively toggles, so nothing changes for existing users until they opt in. */ [data-theme="dark"] { color-scheme: dark; --navy: #0d151d; --navy-light: #1c2c3a; --accent: #5b8dff; --ink: #e8ecf1; --muted: #8b96a5; --border: #2a3441; --bg: #10161d; --surface: #1a222b; --hover-bg: #212b35; } * { box-sizing: border-box; } /* --- Form control baseline --- */ /* One shared baseline for every input/select/textarea/button, replacing what used to be ~10 separate near-identical declarations (one per form) with inconsistent focus treatment (some outline, some border-color, some none). Per-form classes further down now only carry their genuine layout-specific rules (width, margin, flex) -- the look lives here once. */ input, select, textarea { font-family: inherit; font-size: 0.85rem; color: var(--ink); padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-sizing: border-box; } textarea { resize: vertical; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: auto; } /* The native date/time picker glyph defaults to a dark icon that's invisible against the dark-mode surface color -- inverting it is the standard fix for this dark-mode gap. */ [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); } button { font-family: inherit; font-size: 0.85rem; font-weight: 500; padding: 0.48rem 1rem; border: none; border-radius: 6px; cursor: pointer; background: var(--navy); color: #fff; } button:hover { background: var(--navy-light); } button:disabled { opacity: 0.6; cursor: default; } /* Secondary/outline variant for buttons that shouldn't read as the primary action on their form (a stage-move arrow, a compact "save assignment" button) -- standardizes what used to be two slightly different ad hoc sizes (.inline-form button and .board-move-form button). */ .btn-secondary, .inline-form button, .board-move-form button { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 0.3rem 0.6rem; font-size: 0.8rem; } .btn-secondary:hover, .inline-form button:hover, .board-move-form button:hover { background: var(--hover-bg); } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } /* --- Header / nav --- */ header { background: var(--navy); color: #fff; padding: 0.85rem 1.75rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; } header h1 { font-size: 1rem; margin: 0; font-weight: 600; letter-spacing: 0.01em; } .navbar { display: flex; align-items: center; gap: 1.5rem; } .nav-links { display: flex; gap: 0.25rem; } .nav-link { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.85rem; font-weight: 500; padding: 0.4rem 0.75rem; border-radius: 6px; transition: background 0.15s, color 0.15s; } .nav-link:hover { background: var(--navy-light); color: #fff; } .nav-link.active { background: var(--navy-light); color: #fff; } header form { margin: 0; } header button { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); padding: 0.4rem 0.85rem; border-radius: 6px; cursor: pointer; font-size: 0.82rem; transition: border-color 0.15s, color 0.15s; } header button:hover { border-color: rgba(255,255,255,0.6); color: #fff; } /* --- Layout --- */ main { padding: 1.75rem; max-width: 1200px; margin: 0 auto; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; } .card h2 { font-size: 1.05rem; margin: 0 0 1rem; } .card h3 { font-size: 0.9rem; margin: 0 0 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .page-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.25rem; } .page-header h1 { font-size: 1.3rem; margin: 0; } .page-subtitle { color: var(--muted); font-size: 0.85rem; } .back-link { color: var(--accent); text-decoration: none; font-size: 0.85rem; font-weight: 500; display: inline-block; margin-bottom: 1rem; } .add-lead-link { color: #fff; background: var(--navy); text-decoration: none; font-size: 0.85rem; font-weight: 500; padding: 0.48rem 1rem; border-radius: 6px; } .add-lead-link:hover { background: var(--navy-light); } .back-link:hover { text-decoration: underline; } /* --- Counts --- */ .counts { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } /* flex: 1 1 160px -- grows to evenly fill the row (previously sized to content only, leaving trailing empty space), but won't shrink below 160px, so flex-wrap above still kicks in on narrow viewports instead of squeezing every pill unreadably thin. */ .count-pill { flex: 1 1 160px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1.35rem; } .count-pill .num { font-size: 1.5rem; font-weight: 700; display: block; line-height: 1.2; } .count-pill .label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } /* --- Tables --- */ /* Tables can grow wider than their card (table-layout: auto sizes columns to content, and long unbroken strings like email addresses won't wrap) — contain that overflow with a scrollable wrapper instead of letting it visually bleed past the card's rounded border. */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } th, td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; } th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } tbody tr:hover { background: var(--hover-bg); } tbody tr:last-child td { border-bottom: none; } td a { color: var(--accent); text-decoration: none; font-weight: 500; } td a:hover { text-decoration: underline; } .attachment-indicator { cursor: help; font-size: 0.85rem; } .export-link { margin: 0.75rem 0; font-size: 0.85rem; } /* --- Badges --- */ .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; } .badge-drafted { background: #e3f5e9; color: #1e7e42; } .badge-skipped { background: #eef0f3; color: #667; } .badge-error { background: #fde8e8; color: #c0392b; } .badge-pending, .badge-classified { background: #fff4e0; color: #9a6a00; } .badge-sales_enquiry { background: #e3f0fd; color: #1a5fb4; } .badge-region { background: #f1eafc; color: #6c3fbf; } .score-high { background: #e3f5e9; color: #1e7e42; } .score-mid { background: #fff4e0; color: #9a6a00; } .score-low { background: #eef0f3; color: #667; } .score-badge-lg { font-size: 1.4rem; font-weight: 700; padding: 0.5rem 1rem; border-radius: 12px; } /* Solid (not pastel) badge for the /at-risk page's HPO.TECH-no-outreach flag -- deliberately louder than the other pastel badges above, since there's no email thread for that lead to notice they were missed. */ .badge-hpo-urgent { background: var(--navy); color: #fff; } .subsection-heading { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; margin: 1rem 0 0.5rem; } .subsection-heading:first-child { margin-top: 0; } /* --- Lead identity (avatar + name) --- */ .lead-identity { display: flex; align-items: center; gap: 0.65rem; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; } .lead-unknown { color: var(--muted); font-style: italic; } .lead-link { text-decoration: none; color: inherit; } .reason { color: var(--muted); font-size: 0.82rem; max-width: 320px; } .error-text { color: #c0392b; } /* --- Filters --- */ .filters { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; align-items: end; } .filters label { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.03em; } .pagination { margin-top: 1.25rem; display: flex; gap: 1rem; align-items: center; font-size: 0.85rem; color: var(--muted); } .pagination a { color: var(--accent); text-decoration: none; font-weight: 500; } .pagination a:hover { text-decoration: underline; } .new-lead-form { display: flex; flex-direction: column; gap: 0.9rem; } .new-lead-form label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.4rem; } .new-lead-form input, .new-lead-form textarea { width: 100%; } .new-lead-form button { align-self: flex-start; } .form-error { background: #fef6f6; border: 1px solid #f3c2c2; color: #c0392b; border-radius: 6px; padding: 0.6rem 0.85rem; font-size: 0.85rem; margin-bottom: 1rem; } .note-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .note-form label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.4rem; } .note-form textarea { width: 100%; } .note-form button { margin-top: 0.6rem; } .danger-zone { border: 1px solid #f3c2c2; background: #fef6f6; } .danger-zone h3 { color: #c0392b; } .danger-zone p { font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 0.8rem; } .danger-zone label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.4rem; } .danger-zone input[type="text"] { width: 100%; } .danger-button { margin-top: 0.6rem; background: #c0392b; color: #fff; } .danger-button:hover { background: #a5301f; } /* --- Drafts queue --- */ .draft-list { display: flex; flex-direction: column; gap: 1rem; } .draft-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .draft-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .draft-card-subject { font-weight: 600; font-size: 0.95rem; margin-left: 0.6rem; } .draft-card-meta { color: var(--muted); font-size: 0.8rem; margin-top: 0.35rem; } .draft-card-body { white-space: pre-wrap; font-family: inherit; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.85rem; margin: 0.85rem 0; font-size: 0.85rem; line-height: 1.5; max-height: 320px; overflow-y: auto; } .draft-card-actions { display: flex; gap: 0.6rem; align-items: center; } .approve-button { display: inline-block; padding: 0.48rem 1rem; border-radius: 6px; border: none; background: #1e7e42; color: #fff; cursor: pointer; font-size: 0.85rem; font-weight: 500; text-decoration: none; } .approve-button:hover { background: #196636; } .dismiss-button { display: inline-block; padding: 0.48rem 1rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 0.85rem; font-weight: 500; text-decoration: none; } .dismiss-button:hover { background: var(--bg); } /* --- Pipeline stage bar --- */ .stage-card { padding: 1.25rem 1.5rem; } .stage-bar { display: flex; align-items: center; margin-bottom: 1rem; } .stage-step { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 90px; } .stage-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); } .stage-step-done .stage-dot { background: #1e7e42; border-color: #1e7e42; } .stage-step-current .stage-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.15); } .stage-label { font-size: 0.72rem; text-align: center; color: var(--muted); } .stage-step-done .stage-label, .stage-step-current .stage-label { color: var(--ink); font-weight: 600; } .stage-connector { flex: 1; height: 2px; background: var(--border); margin: 0 -0.25rem; margin-bottom: 1.3rem; } .stage-override-form { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.85rem; border-top: 1px solid var(--border); } .stage-override-form label { font-size: 0.78rem; color: var(--muted); } .stage-override-controls { display: flex; gap: 0.5rem; } /* --- Login --- */ .login-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: var(--navy); gap: 1.75rem; } .login-logo { height: 42px; width: auto; } .login-card { width: 340px; padding: 2.25rem; background: #fff; } .login-card h1 { font-size: 1.25rem; margin: 0 0 1.5rem; text-align: center; } .login-card label { display: block; font-size: 0.82rem; margin-bottom: 0.35rem; color: var(--ink); font-weight: 500; } .login-card input { width: 100%; margin-bottom: 1.1rem; } .login-card button { width: 100%; padding: 0.65rem; } .error-msg { background: #fde8e8; color: #c0392b; padding: 0.65rem 0.85rem; border-radius: 6px; font-size: 0.85rem; margin-bottom: 1.1rem; } .empty { color: var(--muted); padding: 2.5rem; text-align: center; font-size: 0.9rem; } /* --- Lead profile: two-column layout --- */ .lead-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: start; } .lead-sidebar .card { padding: 1.25rem; } .sidebar-field { margin-bottom: 1rem; } .sidebar-field:last-child { margin-bottom: 0; } .sidebar-field .field-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; } .sidebar-field .field-value { font-size: 0.9rem; } /* Sale value card -- two numbers side by side rather than stacked, so the card reads as data at a glance instead of a block of explanatory text. */ .sale-value-numbers { display: flex; gap: 1.5rem; align-items: flex-start; } @media (max-width: 800px) { .lead-layout { grid-template-columns: 1fr; } } .requirements-text { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.55; color: var(--ink); margin: 0; } .score-pair { display: flex; gap: 0.75rem; } .score-pair-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; } .score-pair-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } .source-list { list-style: none; margin: 0.85rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .source-list a { color: var(--accent); text-decoration: none; font-size: 0.85rem; } .source-list a:hover { text-decoration: underline; } .attachment-file-list { list-style: none; margin: 0.85rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .attachment-file-entry { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; } .attachment-file-entry a { color: var(--accent); text-decoration: none; font-size: 0.85rem; font-weight: 500; } .attachment-file-entry a:hover { text-decoration: underline; } .attachment-file-meta { color: var(--muted); font-size: 0.75rem; white-space: nowrap; } .update-list { list-style: none; margin: 0; padding: 0; } .update-entry { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.65rem 0; border-bottom: 1px solid var(--border); } .update-entry:last-child { border-bottom: none; padding-bottom: 0; } .update-entry:first-child { padding-top: 0; } .update-date { color: var(--muted); font-size: 0.75rem; white-space: nowrap; padding-top: 0.15rem; min-width: 90px; } /* min-width: 0 overrides the flex-item default of auto (which resolves to the width of its widest unbreakable word) -- without it, a narrow flex container (e.g. the 320px-wide Home page cards) squeezes this down to its min-content instead of actually wrapping across the space flex-grow allocates, producing a near one-word-per-line column. */ .update-summary { flex: 1; min-width: 0; font-size: 0.88rem; line-height: 1.4; } .attachment-list { list-style: none; margin: 0.75rem 0 0; padding: 0; } .attachment-entry { padding: 0.65rem 0; border-bottom: 1px solid var(--border); } .attachment-entry:last-child { border-bottom: none; padding-bottom: 0; } .attachment-entry:first-child { padding-top: 0; } .attachment-entry-header { display: flex; gap: 0.85rem; align-items: baseline; } .attachment-entry-subject { font-size: 0.85rem; font-weight: 500; } /* --- AI chat widget --- */ .chat-widget { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 100; } .chat-bubble-btn { background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 0.8rem 1.3rem; font-size: 0.88rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(22, 35, 47, 0.25); } .chat-bubble-btn:hover { background: #2a5fd0; } .chat-panel { display: none; flex-direction: column; position: fixed; right: 1.5rem; bottom: 1.5rem; width: 380px; max-width: calc(100vw - 2rem); height: 520px; max-height: calc(100vh - 3rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(22, 35, 47, 0.22); overflow: hidden; } .chat-widget-open .chat-panel { display: flex; } .chat-panel-header { background: var(--navy); color: #fff; padding: 0.75rem 1rem; font-size: 0.88rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .chat-panel-header-actions { display: flex; align-items: center; gap: 0.4rem; } .chat-panel-header-actions button { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); border-radius: 6px; cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.55rem; } .chat-panel-header-actions button:hover { border-color: rgba(255,255,255,0.6); color: #fff; } #chat-close-btn { font-size: 1rem; padding: 0.1rem 0.5rem; line-height: 1; } .chat-messages { flex: 1; overflow-y: auto; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--bg); } .chat-message { display: flex; } .chat-message-user { justify-content: flex-end; } .chat-message-assistant { justify-content: flex-start; } .chat-message-bubble { max-width: 85%; padding: 0.55rem 0.75rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .chat-message-user .chat-message-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 3px; } .chat-message-assistant .chat-message-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 3px; } .chat-message-system { color: var(--muted); font-size: 0.78rem; text-align: center; padding: 0.2rem 0; } /* Chatbot create/update-lead proposal card -- a real Confirm/Cancel prompt, not just descriptive text, since the actual write only happens on the Confirm click (see chat-widget.js). */ .chat-pending-action { border: 1px solid var(--border); } .chat-pending-action-buttons { display: flex; gap: 0.5rem; margin-top: 0.6rem; } .chat-pending-action-buttons button { padding: 0.3rem 0.7rem; font-size: 0.78rem; } .chat-form { display: flex; gap: 0.5rem; padding: 0.65rem; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } /* Distinctive 8px radius (vs. the 6px baseline) is a deliberate, contextual choice matching the chat widget's rounder overall aesthetic (chat bubbles, panel corners), not an inconsistency. */ .chat-input { flex: 1; resize: none; border-radius: 8px; max-height: 120px; } .chat-form button { border-radius: 8px; padding: 0 1rem; } .attachment-entry-summary { margin: 0.3rem 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--muted); } .inline-form { display: flex; gap: 0.4rem; align-items: center; } .invite-link-field { width: 100%; padding: 0.6rem; border-radius: 8px; border: 1px solid var(--border); font-family: monospace; font-size: 0.85rem; background: var(--bg); } .nudge-list { list-style: none; margin: 0; padding: 0; } .nudge-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; } .nudge-list li:last-child { border-bottom: none; } .home-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; } .closed-banner { border: 1px solid var(--border); background: #eef7ef; } .closed-banner h3 { color: #1e7e42; } .attendee-checkbox-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.4rem 0; } .attendee-checkbox { font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem; font-weight: normal; } /* --- Brand / nav dropdown / search / theme toggle --- */ .brand-link { display: flex; align-items: center; } .brand-logo { height: 28px; width: auto; display: block; } .nav-dropdown { position: relative; } .nav-dropdown summary { list-style: none; cursor: pointer; } .nav-dropdown summary::-webkit-details-marker { display: none; } .nav-dropdown summary::after { content: ' \25BE'; font-size: 0.7em; } .nav-dropdown-menu { position: absolute; top: calc(100% + 0.4rem); left: 0; background: var(--navy-light); border-radius: 8px; padding: 0.4rem; display: flex; flex-direction: column; min-width: 140px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 20; } .nav-dropdown-menu .nav-link { white-space: nowrap; } .theme-toggle-form { margin: 0; } .theme-toggle-form button { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); border-radius: 6px; cursor: pointer; font-size: 1rem; padding: 0.3rem 0.6rem; line-height: 1; } .theme-toggle-form button:hover { border-color: rgba(255,255,255,0.6); color: #fff; } .nav-search { position: relative; margin: 0; } .nav-search input { padding: 0.4rem 0.7rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-size: 0.82rem; width: 220px; } .nav-search input::placeholder { color: rgba(255,255,255,0.5); } .nav-search input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.15); } .nav-search-results { position: absolute; top: calc(100% + 0.4rem); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; min-width: 260px; max-height: 320px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 20; } .nav-search-result { display: flex; flex-direction: column; padding: 0.55rem 0.75rem; color: var(--ink); text-decoration: none; font-size: 0.85rem; border-bottom: 1px solid var(--border); } .nav-search-result:last-child { border-bottom: none; } .nav-search-result:hover { background: var(--hover-bg); } .nav-search-result-meta { color: var(--muted); font-size: 0.75rem; } .nav-search-empty { padding: 0.75rem; color: var(--muted); font-size: 0.85rem; } /* --- Lead profile tabs --- */ .tab-nav { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; } .tab-link { padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab-link:hover { color: var(--ink); } .tab-link.active { color: var(--ink); border-bottom-color: var(--accent); } .meeting-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; } .reschedule-details { margin-top: 0.6rem; } .reschedule-details summary { cursor: pointer; font-size: 0.82rem; color: var(--accent); } .reschedule-details form { margin-top: 0.6rem; } /* --- Leads board (Kanban) --- */ .view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 0.6rem; } .view-toggle a { padding: 0.35rem 0.8rem; font-size: 0.8rem; color: var(--muted); text-decoration: none; } .view-toggle a.active { background: var(--navy); color: #fff; } /* Wraps onto additional rows rather than overflowing/scrolling horizontally off the page -- six fixed-width columns don't fit most viewports in one row. */ .board-columns { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; } .board-column { flex: 0 0 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; } .board-column-header { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 0.6rem; display: flex; justify-content: space-between; } .board-column-count { background: var(--bg); border-radius: 999px; padding: 0 0.5rem; font-weight: 700; color: var(--ink); } .board-column-cards { display: flex; flex-direction: column; gap: 0.6rem; min-height: 40px; } .board-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.7rem; } .board-card-name { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); text-decoration: none; margin-bottom: 0.4rem; } .board-card-name:hover { text-decoration: underline; } .board-card-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .board-card-actions { display: flex; justify-content: space-between; } .segment-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .segment-chip { padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); text-decoration: none; font-size: 0.8rem; } .segment-chip:hover { border-color: var(--accent); color: var(--ink); } .segment-chip.active { background: var(--navy); border-color: var(--navy); color: #fff; } .segment-chip-clear { color: var(--muted); } /* --- Quick-search palette (Cmd/Ctrl+K) --- */ .search-palette { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 200; } /* The [hidden] attribute is just a low-priority default (display:none) from the browser's own stylesheet -- the unconditional `display: flex` above overrides it at equal specificity, so without this explicit rule the palette showed on every page load regardless of the hidden attribute nav-search.js was toggling. */ .search-palette[hidden] { display: none; } .search-palette-box { width: 100%; max-width: 480px; background: var(--surface); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); overflow: hidden; } .search-palette-input { width: 100%; padding: 0.9rem 1rem; border: none; font-size: 1rem; font-family: inherit; background: transparent; color: var(--ink); box-sizing: border-box; } /* outline: none alone (as this had before) leaves keyboard users with zero visible focus indicator on a borderless input -- a subtle underline keeps the borderless look but still gives a visible cue, consistent with giving every focusable control *some* focus treatment. */ .search-palette-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--accent); } .search-palette-results { position: static; box-shadow: none; border: none; border-top: 1px solid var(--border); border-radius: 0; max-height: 360px; } /* --- Score sparkline --- */ .sparkline { width: 100%; height: auto; display: block; } .sparkline-priority { fill: none; stroke: var(--accent); stroke-width: 2; } .sparkline-conversion { fill: none; stroke: #1e7e42; stroke-width: 2; } .sparkline-legend { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.78rem; color: var(--muted); } .sparkline-legend span { display: inline-flex; align-items: center; gap: 0.3rem; } .sparkline-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } .sparkline-swatch-priority { background: var(--accent); } .sparkline-swatch-conversion { background: #1e7e42; } .queue-entry { flex-direction: column; align-items: stretch; gap: 0.3rem; } .queue-entry-main { display: flex; gap: 0.85rem; align-items: center; } .suggested-action { margin: 0; font-size: 0.8rem; color: var(--accent); font-style: italic; } .suggested-action-card { border-left: 3px solid var(--accent); } /* --- Home: trend indicators, funnel, digest --- */ .trend-delta { display: block; font-size: 0.68rem; margin-top: 0.1rem; } .trend-up { color: #1e7e42; } .trend-down { color: #c0392b; } .trend-flat { color: var(--muted); } /* Sits next to the digest card, so both share a row and the funnel stays a narrow column rather than the full/half-width block it used to be. align-items: stretch (flexbox's default, made explicit here) so the funnel card matches the digest card's height instead of sizing to its own fixed chart height. */ .home-top-row { display: flex; gap: 1.25rem; align-items: stretch; margin-bottom: 1.25rem; } .home-top-row .digest-card { flex: 1; min-width: 0; } @media (max-width: 700px) { .home-top-row { flex-direction: column; } } /* Skinny by design -- fits next to the digest card rather than spanning half the page. A flex column itself so .funnel-vertical below can flex:1 to fill however tall the stretched card ends up being, with the h3 header staying fixed at the top. */ .funnel-card { flex-shrink: 0; width: 220px; padding: 1rem 1.25rem; display: flex; flex-direction: column; } .funnel-card h3 { margin-bottom: 0.6rem; } @media (max-width: 700px) { .funnel-card { width: 100%; } } /* height: auto (was a fixed 140px) so this fills whatever height .home-top-row's stretch allocates; min-height keeps a sane chart size in the stacked mobile layout, where nothing above is stretching this card. */ .funnel-vertical { display: flex; align-items: flex-end; gap: 0.5rem; flex: 1; height: auto; min-height: 120px; } /* min-width: 0 -- without it, a flex item's default min-width: auto lets its content (the rotated .funnel-vlabel stage name) force the column wider than its equal flex: 1 share, especially for longer labels like "Installation Complete" vs. "Shipping". Same class of bug as .update-summary, see docs/SESSION_LOG.md's standing rules. */ .funnel-vcol { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.3rem; height: 100%; text-decoration: none; color: inherit; } .funnel-vcount { font-size: 0.72rem; font-weight: 600; } .funnel-vbar-track { flex: 1; width: 10px; background: var(--bg); border-radius: 3px; display: flex; align-items: flex-end; overflow: hidden; } .funnel-vbar { display: block; width: 100%; background: var(--accent); border-radius: 3px; min-height: 2px; } /* Rotated rather than truncated -- keeps the full stage name readable in a narrow column. */ .funnel-vlabel { writing-mode: vertical-rl; text-orientation: mixed; font-size: 0.62rem; color: var(--muted); white-space: nowrap; } .digest-card { border-left: 3px solid var(--accent); } /* --- Toast / flash banner --- */ .flash-banner { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 150; padding: 0.65rem 1.25rem; border-radius: 8px; font-size: 0.85rem; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); transition: opacity 0.3s, transform 0.3s; } .flash-banner.flash-hidden { opacity: 0; transform: translateX(-50%) translateY(-10px); pointer-events: none; } .flash-success { background: #1e7e42; color: #fff; } .flash-error { background: #c0392b; color: #fff; } /* ---- Zoom softphone (docked, foldable right-hand panel) ---- */ /* No `display` on .softphone itself, so the JS-toggled `hidden` attribute works natively. */ .softphone { position: fixed; right: 0; top: 62px; z-index: 120; } /* Vertical tab on the right edge when the panel is folded away. */ .softphone-toggle { position: fixed; right: 0; top: 120px; writing-mode: vertical-rl; background: var(--accent); color: #fff; border: none; border-radius: 8px 0 0 8px; padding: 1rem 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; box-shadow: -4px 4px 16px rgba(22, 35, 47, 0.22); } .softphone-toggle:hover { background: #2a5fd0; } .softphone-panel { display: none; flex-direction: column; width: 340px; max-width: calc(100vw - 1rem); height: calc(100vh - 78px); background: var(--surface); border: 1px solid var(--border); border-right: none; border-radius: var(--radius) 0 0 var(--radius); box-shadow: -8px 12px 40px rgba(22, 35, 47, 0.22); overflow: hidden; } .softphone-open .softphone-panel { display: flex; } .softphone-header { background: var(--navy); color: #fff; padding: 0.7rem 1rem; font-size: 0.88rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .softphone-header-actions { display: flex; align-items: center; gap: 0.5rem; } .softphone-header-actions button { background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.1rem 0.5rem; } .softphone-header-actions button:hover { border-color: rgba(255, 255, 255, 0.6); color: #fff; } /* Status dot: neutral (connecting) / ok (green) / warn (amber). */ .softphone-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; } .softphone-status-dot.ok { background: #1e7e42; } .softphone-status-dot.warn { background: #d9822b; } .softphone-body { flex: 1; overflow-y: auto; padding: 1rem; background: var(--bg); } /* Explicit override -- .softphone-state sets `display`, which would otherwise defeat the UA `[hidden]` default at equal specificity (documented CSS gotcha in SESSION_LOG). */ .softphone-state { display: block; } .softphone-state[hidden] { display: none; } .softphone-meta { color: var(--muted); font-size: 0.8rem; margin: 0.5rem 0 0; } .softphone-number { font-size: 1.15rem; font-weight: 700; color: var(--ink); word-break: break-all; } .softphone-timer { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; } .softphone-dialer { display: flex; gap: 0.5rem; } .softphone-dialer input { flex: 1; min-width: 0; } .softphone-dialer button { border-radius: 6px; padding: 0 1rem; } .softphone-incoming-header, .softphone-outcome-header { font-weight: 700; color: var(--ink); margin-bottom: 0.6rem; } .softphone-lead-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem; margin: 0.6rem 0; } .softphone-lead-card[hidden] { display: none; } .softphone-unmatched[hidden] { display: none; } .softphone-unmatched-actions, .softphone-incoming-actions, .softphone-active-actions, .softphone-outcome-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; } /* Explicit override -- these set display:flex, which would otherwise beat the UA [hidden] default. */ .softphone-incoming-actions[hidden] { display: none; } .softphone-incoming-actions button, .softphone-active-actions button { flex: 1; } .softphone-search-box { margin-top: 0.6rem; } .softphone-search-box[hidden] { display: none; } .softphone-search-results { margin-top: 0.4rem; } .softphone-briefing { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem; margin: 0.6rem 0; font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; } .softphone-briefing[hidden] { display: none; } .softphone-notes-label, .softphone-field-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0.7rem 0 0.35rem; } .softphone-notes { width: 100%; resize: vertical; border-radius: 8px; } .softphone-summary { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem; margin-bottom: 0.6rem; font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; } .softphone-summary[hidden] { display: none; } .softphone-outcome-buttons, .softphone-nextcall-buttons { display: flex; gap: 0.4rem; flex-wrap: wrap; } .softphone-outcome-buttons button, .softphone-nextcall-buttons button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.78rem; cursor: pointer; } .softphone-outcome-buttons button.selected, .softphone-nextcall-buttons button.selected { background: var(--accent); color: #fff; border-color: var(--accent); } .softphone-nextcall-date { margin-top: 0.5rem; } .softphone-nextcall-date[hidden] { display: none; } .softphone-tasks[hidden] { display: none; } .softphone-tasks-list { display: flex; flex-direction: column; gap: 0.35rem; } .softphone-task-item { display: flex; gap: 0.4rem; align-items: flex-start; font-size: 0.82rem; } /* Nav-bar preferred-device dropdown. No `display` rule -- native `hidden` toggling works. */ .nav-device-select { max-width: 180px; font-size: 0.8rem; padding: 0.3rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); } /* Compact "Call" button beside a lead's phone number on the profile page. */ .call-btn { margin-left: 0.5rem; padding: 0.15rem 0.6rem; font-size: 0.75rem; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; } .call-btn:hover { background: #2a5fd0; } /* Missed calls & voicemails -- deliberately red so they stand out on the dashboard and lead profile (a link keeps its own colour otherwise, so this override is applied directly). */ .call-missed { color: #c0392b; font-weight: 600; } a.call-missed { color: #c0392b; } a.call-missed:hover { color: #96281b; } .badge.call-missed { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; font-weight: 600; } [data-theme="dark"] .call-missed { color: #ff6b5e; } [data-theme="dark"] a.call-missed { color: #ff6b5e; } [data-theme="dark"] .badge.call-missed { background: #3a1f1c; color: #ff6b5e; border-color: #5c2a25; }