:root { /* Dark theme (default). The inline script sets data-theme before paint; light overrides live in the [data-theme="light"] block below. */ --bg: #0f1419; --panel: #171d26; --panel-2: #1e2632; --line: #2a3340; --text: #e6edf3; --muted: #8b97a7; --accent: #2f81f7; --accent-2: #1f6feb; --green: #2ea043; --amber: #d29922; --red: #f85149; /* semantic accent text/fills — re-tuned per theme for contrast */ --c-blue: #79b1ff; --c-green: #7ee787; --c-purple: #a371f7; --input-locked-bg: #141a22; /* Height of the sticky top bar — the left tab rail hangs off it. */ --topbar-h: 61px; --radius: 12px; --shadow: 0 8px 24px rgba(0, 0, 0, 0.35); color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } :root[data-theme="light"] { --bg: #f4f6f9; --panel: #ffffff; --panel-2: #eef1f5; --line: #d8dee6; --text: #1c2530; --muted: #5b6775; --accent: #1f6feb; --accent-2: #1a63d6; --green: #1a7f37; --amber: #9a6700; --red: #cf222e; --c-blue: #1f6feb; --c-green: #1a7f37; --c-purple: #8250df; --input-locked-bg: #eef1f5; --shadow: 0 8px 24px rgba(110, 125, 150, 0.22); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* ---------- top bar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: baseline; gap: 10px; } .logo { font-weight: 800; letter-spacing: 2px; font-size: 20px; background: linear-gradient(90deg, #2f81f7, #56d4dd); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-sub { color: var(--muted); font-size: 13px; } .topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hs-wrap { position: relative; } .hs-badge { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); white-space: nowrap; cursor: pointer; } .hs-badge.live { color: var(--green); border-color: rgba(46,160,67,.4); } .hs-badge.mock { color: var(--amber); border-color: rgba(210,153,34,.4); } .hs-badge.error { color: var(--red); border-color: rgba(248,81,73,.4); } .hs-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 12px 14px; white-space: normal; } .hs-pop-row { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; padding: 3px 0; } .hs-pop-row b { color: var(--text); font-weight: 600; } .hs-pop-row b.ok { color: var(--green); } .hs-pop-row b.err { color: var(--red); } .hs-pop-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; } .hs-pop a { color: var(--accent); } /* ---------- shell: left tab rail + section panels ---------- */ .shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-h)); } .tabrail { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 10px 5px; background: var(--panel); border-right: 1px solid var(--line); position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); z-index: 5; } /* Each tab is a link: two of them go to a hash on this page, one to /capture. */ .tab { font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 16px 8px; cursor: pointer; display: flex; justify-content: center; transition: background .15s, color .15s, border-color .15s; } .tab:hover { color: var(--text); background: var(--panel-2); } .tab.active { color: #fff; background: var(--accent-2); border-color: var(--accent); } /* Rotated 90° anticlockwise — vertical-rl flipped end-for-end reads bottom-to-top. */ .tab-label { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } /* The rail's sibling: the dashboard's panels, or the capture page's form. */ .tabpanels, .shell > .capture-layout { flex: 1; min-width: 0; } .tabpanel[hidden] { display: none; } .panel-pad { padding: 18px 20px 28px; } /* Narrow viewports let the top bar wrap, so its height stops being predictable — drop the rail out of sticky rather than pin it to the wrong offset. */ @media (max-width: 900px) { .shell { align-items: stretch; } .tabrail { position: static; height: auto; } } /* ---------- buttons ---------- */ .btn { font: inherit; font-size: 13px; border-radius: 8px; border: 1px solid var(--line); padding: 8px 14px; cursor: pointer; background: var(--panel-2); color: var(--text); transition: background .15s, border-color .15s, transform .05s; } .btn:hover { border-color: var(--muted); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent-2); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent); } /* Black in both themes on purpose: auto mode sits beside the kind tabs, whose selected state is already the accent blue, so it has to read as a different kind of thing rather than a third tab. */ .btn-auto { background: #000; color: #fff; border-color: rgba(255, 255, 255, .3); } .btn-auto:hover { background: #1b2129; border-color: rgba(255, 255, 255, .55); } .btn-ghost { background: transparent; } .btn-sm { padding: 5px 10px; font-size: 12px; } .btn-icon { padding: 7px 10px; font-size: 15px; line-height: 1; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* Inline SVG icons. Sized in CSS, never by width/height attributes, and drawn in `currentColor` so one file works on a black button and a white one. */ .icon { display: block; flex: none; width: 18px; height: 18px; } /* ---------- stats ---------- */ .stats { display: flex; gap: 10px; padding: 14px 20px 0; flex-wrap: wrap; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; min-width: 96px; } .stat .n { font-size: 22px; font-weight: 700; } .stat .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } /* ---------- layout ---------- */ .layout { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 16px; padding: 16px 20px 8px; align-items: start; } @media (max-width: 760px) { .layout { grid-template-columns: 1fr; } .detail.has-selection .inbox { display: none; } } .inbox, .detail, .pipeline { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } /* ---------- inbox ---------- */ .inbox-head { padding: 14px 16px 8px; } .inbox-head h2, .hs-panel-head h2, .detail-body h2 { margin: 0; font-size: 15px; } .filters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; } .chip.active { background: var(--accent-2); border-color: var(--accent); color: #fff; } .pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); } .pager-info { font-size: 12px; color: var(--muted); } .quote-list { list-style: none; margin: 0; padding: 6px; max-height: calc(100vh - 230px); overflow-y: auto; } .quote-item { padding: 11px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; display: grid; gap: 6px; } .quote-item:hover { background: var(--panel-2); } .quote-item.active { background: var(--panel-2); border-color: var(--accent); } .qi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .qi-title { font-weight: 600; font-size: 14px; line-height: 1.25; } .qi-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .qi-ref { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; } /* ---------- badges ---------- */ .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; } .badge.cat { background: rgba(47,129,247,.12); border-color: rgba(47,129,247,.35); color: var(--c-blue); } .badge.status-received { color: var(--c-blue); border-color: rgba(47,129,247,.35); } .badge.status-triaging { color: var(--amber); border-color: rgba(210,153,34,.35); } .badge.status-converted { color: var(--green); border-color: rgba(46,160,67,.35); } .badge.status-discarded { color: var(--muted); } .badge.u-low { color: var(--muted); } .badge.u-medium { color: var(--c-blue); } .badge.u-high { color: var(--amber); border-color: rgba(210,153,34,.35); } .badge.u-emergency { color: var(--red); border-color: rgba(248,81,73,.4); background: rgba(248,81,73,.08); } /* ---------- detail ---------- */ .detail { min-height: 320px; } .detail-placeholder { color: var(--muted); padding: 48px 24px; text-align: center; } .detail-body { padding: 18px 20px; } .detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .detail-title { font-size: 20px; font-weight: 700; margin: 2px 0 4px; } .detail-sub { color: var(--muted); font-size: 13px; } .detail-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px; } /* Two-column detail: job scope on the left, customer info on the right. */ .detail-cols { display: grid; grid-template-columns: 1fr minmax(250px, 320px); gap: 4px 28px; align-items: start; margin-top: 4px; } .detail-col-side { border-left: 1px solid var(--line); padding-left: 24px; } .detail-col-side .section-label:first-child, .detail-col-side #resolveBox:first-child .match-banner { margin-top: 0; } @media (max-width: 900px) { .detail-cols { grid-template-columns: 1fr; gap: 0; } .detail-col-side { border-left: 0; padding-left: 0; margin-top: 8px; } } .kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; margin: 12px 0; } .detail-col-side .kv-grid { grid-template-columns: 1fr; } @media (max-width: 520px) { .kv-grid { grid-template-columns: 1fr; } } .kv { display: flex; flex-direction: column; gap: 2px; } .kv .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .kv .v { font-size: 14px; } .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 18px 0 6px; } .scope { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; line-height: 1.5; font-size: 14px; } .media-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .media-thumb { width: 92px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); } /* One line per photo the vision model described, numbered to the thumbnails above. */ .media-notes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .media-notes li { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); } .media-notes-n { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 11px; } .detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); align-items: center; } .detail-actions select { font: inherit; font-size: 13px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; } .hs-link { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: rgba(46,160,67,.08); border: 1px solid rgba(46,160,67,.3); font-size: 13px; } .hs-link code { color: var(--c-green); } .hs-entities { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; } .hs-entity { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } /* open-in-HubSpot button */ .open-ext { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; flex: none; border: 1px solid var(--line); background: var(--panel-2); color: var(--accent); text-decoration: none; font-size: 13px; line-height: 1; transition: background .15s, border-color .15s, transform .05s; } .open-ext:hover { background: var(--accent-2); border-color: var(--accent); color: #fff; } .open-ext:active { transform: translateY(1px); } /* ---------- deal pipeline board ---------- */ .pipeline { margin: 8px 20px 24px; } .pipeline-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 8px; } .pipeline-head h2 { margin: 0; font-size: 15px; } /* Horizontal, HubSpot-style board: one column per in-progress stage. */ .pipeline-board { display: flex; gap: 12px; padding: 8px 16px 16px; overflow-x: auto; align-items: start; } .stage-col { flex: 0 0 240px; min-width: 240px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; max-height: 60vh; } .stage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .stage-name { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .stage-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; } /* minmax(0,1fr): let the card track shrink to the column instead of growing to fit content */ .stage-cards { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; overflow-y: auto; } .stage-empty { color: var(--muted); font-size: 12px; padding: 10px 12px; } .deal-item { padding: 11px 12px; border-radius: 10px; display: grid; gap: 4px; min-width: 0; /* grid item: allow it to shrink within the column */ background: var(--panel); border: 1px solid var(--line); } .deal-item { cursor: grab; } .deal-item:hover { border-color: var(--accent); } .deal-item.dragging { opacity: .5; cursor: grabbing; } .stage-col.drag-over { border-color: var(--accent); background: rgba(47, 129, 247, .1); } .stage-col.drag-over .stage-cards { pointer-events: none; } /* let the column own the drop */ .deal-name { font-size: 13px; font-weight: 600; } .deal-meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; } .deal-amount { color: var(--c-green); font-variant-numeric: tabular-nums; } /* Name wraps to fit the column; extLink stays pinned top-right. */ .deal-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .deal-row .deal-name { min-width: 0; overflow-wrap: anywhere; } .empty { color: var(--muted); font-size: 13px; padding: 16px; text-align: center; } /* ---------- intake match banner ---------- */ .match-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px; margin: 4px 0 6px; border: 1px solid var(--line); background: var(--panel-2); } .match-banner.known { border-color: rgba(46,160,67,.4); background: rgba(46,160,67,.08); } .match-banner.partial { border-color: rgba(210,153,34,.4); background: rgba(210,153,34,.08); } .match-banner.new { border-color: rgba(47,129,247,.4); background: rgba(47,129,247,.08); } .match-banner.loading { color: var(--muted); } .match-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .match-dot.g { background: var(--green); } .match-dot.a { background: var(--amber); } .match-dot.b { background: var(--accent); } .match-banner .mb-detail { color: var(--muted); margin-left: auto; font-size: 12px; } /* candidate resolution list */ .resolve-actions { margin: 6px 0 2px; } .cand-list { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 6px; } .cand { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); } .cand-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cand-name { font-size: 14px; font-weight: 600; } .cand-meta { font-size: 12px; color: var(--muted); } .cand-right { display: flex; align-items: center; gap: 10px; flex: none; } .cand-score { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--amber); border: 1px solid rgba(210,153,34,.35); border-radius: 999px; padding: 2px 8px; } .match-banner strong { color: var(--text); } /* Selectable candidates — the locate modal's customer guesses. */ .cand-pick { cursor: pointer; transition: border-color .15s, background .15s; } .cand-pick:hover { border-color: var(--muted); } .cand-pick.picked { border-color: var(--accent); background: rgba(47, 129, 247, .1); } /* clickable media */ .media-thumb { cursor: zoom-in; transition: transform .08s, border-color .15s; } .media-thumb:hover { border-color: var(--accent); transform: translateY(-1px); } .media-badge { position: relative; display: inline-block; } .media-badge .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; } /* ---------- lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(5, 8, 12, 0.92); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 24px; } .lightbox[hidden] { display: none; } .lb-figure { margin: 0; display: grid; gap: 10px; justify-items: center; max-height: 92vh; } .lb-img { max-width: min(1100px, 86vw); max-height: 82vh; border-radius: 10px; box-shadow: var(--shadow); cursor: zoom-in; transition: transform .2s ease; transform-origin: center center; } .lb-img.zoomed { cursor: zoom-out; transform: scale(2); } .lb-caption { color: var(--text); font-size: 13px; opacity: .85; } .lb-close { position: absolute; top: 16px; right: 20px; z-index: 2; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2); width: 38px; height: 38px; border-radius: 50%; font-size: 16px; cursor: pointer; } .lb-close:hover { background: rgba(255,255,255,.16); } .lb-nav { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.15); width: 46px; height: 64px; border-radius: 10px; font-size: 30px; cursor: pointer; line-height: 1; } .lb-nav:hover { background: rgba(255,255,255,.14); } @media (max-width: 640px) { .lb-nav { width: 40px; height: 52px; font-size: 24px; } .lb-img { max-width: 92vw; } } /* ---------- capture interface ---------- */ .identity { display: flex; align-items: center; gap: 8px; } .identity-label { font-size: 12px; color: var(--muted); } .identity select, .field select, .field input, .field textarea { font: inherit; font-size: 13px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; } .identity select { width: auto; } .badge.role-assessor { color: var(--c-blue); border-color: rgba(47,129,247,.35); } .badge.role-reporter { color: var(--c-purple); border-color: rgba(163,113,247,.35); } .badge.role-estimator { color: var(--green); border-color: rgba(46,160,67,.35); } .capture-layout { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 16px; padding: 16px 20px 28px; align-items: start; } @media (max-width: 860px) { .capture-layout { grid-template-columns: 1fr; } } .cap-form, .cap-mine { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .cap-form h2, .cap-mine h2 { margin: 0 0 4px; font-size: 16px; } /* Kind tabs and the 📷 on the left, auto mode pushed to the right, one line. */ .cap-kindrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; } /* `stretch`, not `center`: the camera button takes its height from the tab rail beside it rather than from its own padding, so the two always line up however the tabs are sized. */ .cap-kindrow-left { display: flex; align-items: stretch; gap: 10px; } /* Callout vs Site Job — a segmented control above the form. */ .cap-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; } .cap-tab { font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 7px 18px; cursor: pointer; transition: background .15s, color .15s; } .cap-tab:hover { color: var(--text); } .cap-tab.active { color: #fff; background: var(--accent-2); border-color: var(--accent); } .geo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .geo-row .cap-hint { margin: 0; } /* Customer picker with its ✨ locate button alongside. */ .customer-row { display: flex; align-items: center; gap: 8px; } .customer-row select { flex: 1; min-width: 0; } .customer-row .btn { flex: none; } .badge.kind-callout { color: var(--c-blue); border-color: rgba(47,129,247,.35); } .badge.kind-site_job { color: var(--c-purple); border-color: rgba(163,113,247,.35); } .cap-hint { color: var(--muted); font-size: 12px; margin: 4px 0 14px; } /* A location match the server was willing to fill in, vs one it deliberately wasn't — the difference has to be visible, or an uncertain result reads the same as a certain one. */ .cap-hint.ok { color: var(--green, #3fb950); } .cap-hint.warn { color: var(--amber, #d29922); } .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .field > span, .field-label { font-size: 12px; color: var(--muted); } .field > span em, .field-label em { font-style: normal; opacity: .7; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .field-grid:has(> .field[hidden]) { grid-template-columns: 1fr 1fr; } @media (max-width: 520px) { .field-grid { grid-template-columns: 1fr; } } .field.check { flex-direction: row; align-items: center; gap: 8px; } .field.check input { width: auto; } .field input.locked, .field input[readonly] { opacity: .7; cursor: not-allowed; background: var(--input-locked-bg); } .cap-section, .client-fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 4px; margin: 6px 0 14px; } .cap-section legend, .client-fieldset legend { font-size: 13px; font-weight: 600; color: var(--text); padding: 0 6px; } .cap-section > .cap-hint { margin-top: 0; } .photo-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .photo-thumb-wrap { position: relative; } .photo-thumb { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); } .photo-del { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff; border: none; cursor: pointer; font-size: 11px; line-height: 1; } .cap-actions { display: flex; gap: 10px; margin-top: 8px; align-items: center; } /* ---------- photo intake ---------- */ /* The section the 📷 beside the kind tabs opens. It sits at the TOP of the form because everything under it is drafted from what's in here. */ .cap-photos { border-color: var(--accent); padding-bottom: 14px; } .cap-photos legend { color: var(--accent-2); } /* The toggle reads as pressed while the section is open, and carries the photo count once there is one — collapsing it must not make the photos invisible. Padding is horizontal only: the height comes from the stretched row, and a vertical padding here would fight it. */ #photoToggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border-radius: 10px; } #photoToggle.active { background: var(--accent-2); border-color: var(--accent); } .photo-count { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } /* One row per photo: the thumbnail, and what the vision model said about THAT photo. Six photos are six pieces of evidence, so each gets its own line rather than being folded into one description. */ .photo-review { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .photo-review-item { position: relative; display: flex; gap: 12px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 34px 10px 10px; } .photo-review-item .photo-thumb { flex: none; } .photo-review-item .photo-del { top: 7px; right: 7px; } .photo-review-body { min-width: 0; } .photo-review-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; overflow-wrap: anywhere; } .photo-review-desc { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; } .photo-review-desc.muted { color: var(--muted); } .photo-review-desc.bad { color: var(--red); } .photo-review-desc.pending { color: var(--muted); animation: photo-pulse 1.2s ease-in-out infinite; } @keyframes photo-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } .photo-ai-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .photo-ai-row .cap-hint { margin: 0; } /* What the photos suggested, and how sure of it the model was. The confidence is the point: a field it declined to fill must look different to one it filled. */ .ai-verdict { margin-top: 14px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; } .ai-verdict.bad { border-color: rgba(248,81,73,.4); } .ai-verdict-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 10px; } .ai-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ai-facts li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; } .ai-facts .k { min-width: 68px; font-size: 12px; color: var(--muted); } .ai-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-variant-numeric: tabular-nums; } .ai-chip.ok { border-color: rgba(46,160,67,.45); color: var(--green, #3fb950); } .ai-chip.warn { border-color: rgba(210,153,34,.5); color: var(--amber, #d29922); } .ai-chip.muted { color: var(--muted); } .ai-flag { margin: 10px 0 0; font-size: 12px; line-height: 1.5; } .ai-flag.warn { color: var(--amber, #d29922); } .ai-flag.bad { color: var(--red); } .ai-verdict .btn-sm { margin-top: 10px; } .ai-provenance { margin: 10px 0 0 !important; font-size: 11px; opacity: .8; } /* Set the one-time "Initialize deal properties" action apart from Test/Clear. */ .hs-init { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .hs-init .settings-sub { margin-top: 0; } .hs-init code { font-size: 12px; } .mine-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; max-height: calc(100vh - 200px); overflow-y: auto; } .mine-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 6px; } /* ---------- auth: login page ---------- */ .login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; } .login-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px; width: 100%; max-width: 380px; text-align: center; box-shadow: var(--shadow); } .login-logo { font-size: 26px; } .login-title { font-size: 20px; margin: 14px 0 6px; } .login-sub { color: var(--muted); font-size: 13px; margin: 8px 0 16px; } .login-actions { margin-top: 18px; display: grid; gap: 12px; } .login-error { background: rgba(248,81,73,.1); border: 1px solid rgba(248,81,73,.4); color: var(--red); border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-top: 12px; } .btn-lg { padding: 11px 18px; font-size: 15px; width: 100%; text-decoration: none; text-align: center; } .dev-form { display: grid; gap: 10px; } .dev-form input { font: inherit; font-size: 14px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } /* ---------- auth: workspace switcher + user menu ---------- */ .ws-switcher .ws-select, .ws-select { font: inherit; font-size: 13px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; max-width: 200px; } .user-menu { position: relative; } .um-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 4px; color: var(--text); font: inherit; font-size: 13px; } .um-btn:hover { border-color: var(--muted); } .um-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; } .um-initials { display: grid; place-items: center; background: var(--accent-2); color: #fff; font-size: 11px; font-weight: 700; } .um-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .um-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; } .um-head { padding: 12px 14px; border-bottom: 1px solid var(--line); } .um-head .um-name { max-width: none; font-weight: 600; } .um-email { color: var(--muted); font-size: 12px; } .um-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font: inherit; font-size: 13px; padding: 11px 14px; cursor: pointer; } .um-item:hover { background: var(--panel-2); } /* ---------- auth: no-workspace gate ---------- */ .ws-gate { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: grid; place-items: center; padding: 24px; } .ws-gate-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow); } .ws-gate-card h1 { font-size: 20px; margin: 12px 0 6px; } .ws-gate-card .dev-form { margin: 16px 0 10px; } /* ---------- workspace settings ---------- */ .settings-wrap { max-width: 760px; margin: 0 auto; padding: 20px; display: grid; gap: 16px; } .settings-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .settings-card h2 { margin: 0 0 12px; font-size: 16px; } .settings-sub { font-size: 13px; margin: 18px 0 4px; } .inline-field { display: flex; gap: 8px; } .inline-field input { flex: 1; } .invite-form { display: grid; gap: 12px; margin-top: 8px; } .member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .member-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); } .member-name { font-weight: 600; font-size: 14px; } .member-email { color: var(--muted); font-size: 12px; } .member-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .member-controls select, .m-bind input { font: inherit; font-size: 13px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; } .m-bind { display: inline-flex; gap: 6px; } .m-bind input { width: 130px; } .settings-wrap .m-remove { color: var(--red); border-color: rgba(248,81,73,.4); } .badge.role-owner { color: var(--c-green); border-color: rgba(46,160,67,.45); } /* ---------- auto mode modal ---------- */ .modal { position: fixed; inset: 0; z-index: 80; background: rgba(4, 8, 14, .66); display: grid; place-items: start center; padding: 24px 16px; overflow-y: auto; } .modal[hidden] { display: none; } /* body is height:100%, so the page scroller is — lock both or the background keeps scrolling behind the modal. */ body.modal-open, html:has(body.modal-open) { overflow: hidden; } .modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px 18px; width: 100%; max-width: 460px; } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .modal-head h2 { margin: 0 0 2px; font-size: 18px; } .modal-head .cap-hint { margin: 0; } .modal-close { font: inherit; font-size: 15px; line-height: 1; flex: none; cursor: pointer; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); width: 30px; height: 30px; border-radius: 8px; } .modal-close:hover { color: var(--text); border-color: var(--muted); } .modal-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .modal-actions .btn { flex: 1; } .auto-step { margin-top: 18px; } .auto-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .auto-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 11px; letter-spacing: 0; } .auto-geo { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--muted); margin-bottom: 8px; font-variant-numeric: tabular-nums; } .auto-geo strong { color: var(--text); font-weight: 600; } .auto-geo.ok { border-color: rgba(46,160,67,.4); } .auto-geo.warn { border-color: rgba(210,153,34,.45); } .auto-geo.bad { border-color: rgba(248,81,73,.4); color: var(--red); } .auto-geo-acc { display: block; margin-top: 2px; font-size: 12px; } /* The primary action of the whole modal — sized for a thumb on a phone. */ .capture-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 22px 16px; cursor: pointer; font: inherit; background: var(--accent-2); color: #fff; border: 1px solid var(--accent); border-radius: 12px; transition: background .15s, transform .05s; } .capture-btn:hover { background: var(--accent); } .capture-btn:active { transform: translateY(1px); } .capture-icon { width: 28px; height: 28px; } .capture-label { font-size: 15px; font-weight: 600; } .capture-sub { font-size: 12px; opacity: .8; } .btn-block { width: 100%; margin-top: 8px; } .modal .photo-grid:empty { margin-top: 0; } /* ---------- toast ---------- */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px 18px; border-radius: 10px; font-size: 13px; z-index: 50; max-width: 90vw; } .toast.error { border-color: rgba(248,81,73,.5); } .toast.ok { border-color: rgba(46,160,67,.5); } .back-btn { display: none; } @media (max-width: 760px) { .detail.has-selection ~ * { } .back-btn { display: inline-flex; } } /* ---------- customers + team directories ---------- */ .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .panel-head h2 { margin: 0 0 4px; font-size: 18px; } .panel-sub { color: var(--muted); font-size: 13px; margin: 0; } .panel-tools { display: flex; align-items: center; gap: 8px; } .panel-search { font: inherit; font-size: 13px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-width: 200px; } .card-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); } .entity-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 10px; align-content: start; transition: border-color .15s; } .entity-card:hover { border-color: var(--muted); } .ec-head { display: flex; gap: 10px; align-items: center; min-width: 0; } .ec-avatar { width: 36px; height: 36px; flex: none; object-fit: cover; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; } .ec-company { background: linear-gradient(135deg, #2f81f7, #56d4dd); } .ec-person, img.ec-avatar { border-radius: 50%; } .ec-person { background: linear-gradient(135deg, #a371f7, #2f81f7); } .ec-id { min-width: 0; } .ec-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; } .ec-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ec-you { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; flex: none; background: var(--accent-2); color: #fff; border-radius: 999px; padding: 1px 7px; } .ec-facts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .ec-fact { font-size: 12px; color: var(--muted); } /* A coarse or missing geocode has to look different from a good one at a glance — otherwise "city centroid" reads as "located". */ .ec-fact-warn { color: var(--amber); } .ec-fact-dim { opacity: .6; } .ec-blurb { font-size: 12px; color: var(--muted); line-height: 1.45; } /* Cards that open a detail view. */ .entity-card-click { cursor: pointer; } .entity-card-click:focus-visible { outline: 2px solid var(--accent, var(--muted)); outline-offset: 2px; } /* Label/value list inside the customer detail. */ .detail-section + .detail-section { margin-top: 18px; } .kv-list { display: grid; gap: 6px; margin-top: 6px; } .kv { display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: 13px; align-items: baseline; } .kv-k { color: var(--muted); font-size: 12px; } .kv-v { color: var(--text); word-break: break-word; } .kv-v code { font-size: 12px; } .kv-dim { color: var(--muted); font-size: 11px; } @media (max-width: 520px) { .kv { grid-template-columns: 1fr; gap: 0; } } .ec-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ec-when { font-size: 11px; color: var(--muted); margin-left: auto; } .pill { font-size: 11px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; } .pill-green { color: var(--c-green); border-color: rgba(46,160,67,.35); }