/* Slim4 Data Lite — minimal, focused UI */ :root { /* Surfaces */ --bg: #f4f5f7; --card-bg: #ffffff; --card-bg-soft: #fafbfc; /* subtle alt cards, panel insets */ --border: #e0e0e0; --border-soft: #f3f4f6; /* hairlines between rows */ --hover-bg: #f4f7fb; /* hover row tint */ /* Typography */ --text: #1a1a1a; --text-strong: #003e6a; /* headings + numeric emphasis */ --muted: #666; --muted-soft: #9ca3af; /* Brand + state — these stay constant across themes because they carry semantic meaning (green=good, red=bad, etc.). Numeric "blue" emphasis colour comes from --num-emphasis below — easier to tune separately from text-strong if needed. */ --brand: #005896; --brand-hover: #004472; --num-emphasis: #005896; /* "blue numbers" convention */ --accent: #1f7a3a; --accent-hover: #176030; --warn: #d4881c; --err: #b03030; --info: #5a6c7d; --good: #10b981; --amber: #f59e0b; --bad: #ef4444; --code-bg: #f0f0f0; } /* Dark theme — applied via (consultant * toggle in Settings). Brand + state colours kept stable; only * surface + text variables shift. System theme honoured by JS * setting data-theme="dark" when prefers-color-scheme matches. */ [data-theme="dark"] { --bg: #0f172a; /* slate-900 */ --card-bg: #1e293b; /* slate-800 */ --card-bg-soft: #172033; --border: #334155; /* slate-700 */ --border-soft: #1f2937; --hover-bg: #243044; --text: #e2e8f0; /* slate-200 */ --text-strong: #bfdbfe; /* slightly lighter than brand so headings pop on dark */ --muted: #94a3b8; --muted-soft: #64748b; --num-emphasis: #60a5fa; /* brighter blue for numbers on dark */ --code-bg: #1f2937; } /* Numeric-emphasis utility — tabular-nums alignment + the brand * emphasis colour so columns of values line up. Used as a marker * class for the privacy-blur feature below: anything tagged .num * (or any of the existing numeric containers) gets blurred when * the consultant flips the privacy toggle. */ .num, .num-blue { color: var(--num-emphasis); font-variant-numeric: tabular-nums; font-weight: 600; } /* ────────────────────────────────────────────────────────── * PRIVACY BLUR — toggle to fuzz numeric KPIs when the * consultant doesn't want shoulder-surfers reading financials. * * Common Slimstock app convention. Triggered by * . Hover restores any single number so * you can still read your own data. * ──────────────────────────────────────────────────────── */ [data-blur="on"] .num, [data-blur="on"] .num-blue, [data-blur="on"] .ct-3c-val, [data-blur="on"] .tr-c-val, [data-blur="on"] .tr-pf-3c-val, [data-blur="on"] .ct-readiness-num, [data-blur="on"] .ct-network-chip-val, [data-blur="on"] .nw-chip-val, [data-blur="on"] .ring-pct, [data-blur="on"] .ct-ring-pct, [data-blur="on"] .room-score-pct, [data-blur="on"] .ct-badge, [data-blur="on"] .nw-edge-meta, [data-blur="on"] .bp-figure, [data-blur="on"] .tr-ballpark .num, /* Prospect identity — the company name is just as sensitive as the * numbers when someone's looking over your shoulder in a coffee shop. * Covered everywhere it appears: Control Tower cards (.ct-card-name), * Mapping / Triage page headers (#m-prospect-name, #tr-prospect-name), * any generic .room-title / .prospect-name container, AND the HubSpot * deal names — both the linked-deal chip on the CT card * (.ct-hubspot-name) and the deal names listed in the link-to-deal * picker modal (.hs-picker-name). Without these the HubSpot field * leaks the prospect's company identity even when the room title is * blurred. */ [data-blur="on"] .ct-card-name, [data-blur="on"] #m-prospect-name, [data-blur="on"] #tr-prospect-name, [data-blur="on"] .room-title, [data-blur="on"] .prospect-name, [data-blur="on"] .ct-hubspot-name, [data-blur="on"] .hs-picker-name { filter: blur(7px); transition: filter 0.15s ease; cursor: zoom-in; } /* Hover restores — lets you read individual numbers without * disabling the whole mode. Works for both HTML elements and * SVG (touch-only restores them via tap). */ [data-blur="on"] .num:hover, [data-blur="on"] .num-blue:hover, [data-blur="on"] .ct-3c-val:hover, [data-blur="on"] .tr-c-val:hover, [data-blur="on"] .tr-pf-3c-val:hover, [data-blur="on"] .ct-readiness-num:hover, [data-blur="on"] .ct-network-chip-val:hover, [data-blur="on"] .nw-chip-val:hover, [data-blur="on"] .ring-pct:hover, [data-blur="on"] .ct-ring-pct:hover, [data-blur="on"] .room-score-pct:hover, [data-blur="on"] .ct-badge:hover, [data-blur="on"] .nw-edge-meta:hover, [data-blur="on"] .tr-ballpark .num:hover, [data-blur="on"] .ct-card-name:hover, [data-blur="on"] #m-prospect-name:hover, [data-blur="on"] #tr-prospect-name:hover, [data-blur="on"] .room-title:hover, [data-blur="on"] .prospect-name:hover, [data-blur="on"] .ct-hubspot-name:hover, [data-blur="on"] .hs-picker-name:hover { filter: none; cursor: zoom-out; } /* The whole financial ballpark + the inspector sample table get * blanket blur in privacy mode — those are the "this is the £ * impact" panels people read over your shoulder. */ [data-blur="on"] .tr-ballpark, [data-blur="on"] .tr-inspector-table td:not(.tr-check) { filter: blur(5px); transition: filter 0.15s ease; } [data-blur="on"] .tr-ballpark:hover, [data-blur="on"] .tr-inspector-table:hover td { filter: none; } /* Blur toggle button in the top nav — small eye icon, switches * between visible / hidden when clicked. */ .privacy-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 8px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); transition: background 0.15s ease; } .privacy-toggle:hover { background: var(--hover-bg); color: var(--text); } [data-blur="on"] .privacy-toggle { background: var(--brand); color: #fff; border-color: var(--brand); } /* AI-suggestions toggle on the Triage header. iOS-style switch + * label with the count so the consultant always knows whether AI * input is being included in the score. Sits between the headline * and the action buttons. */ .tr-ai-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 4px 10px 4px 4px; border-radius: 14px; background: var(--card-bg-soft); border: 1px solid var(--border); cursor: pointer; font-size: 12px; user-select: none; transition: background 0.15s ease, border-color 0.15s ease; } .tr-ai-toggle:hover { background: var(--hover-bg); } .tr-ai-toggle input { display: none; } .tr-ai-toggle-track { position: relative; display: inline-block; width: 34px; height: 18px; background: #cbd5e1; border-radius: 9px; transition: background 0.15s ease; flex-shrink: 0; } .tr-ai-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--card-bg); border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .tr-ai-toggle input:checked + .tr-ai-toggle-track { background: #8b5cf6; /* violet — matches the AI suggestion badge */ } .tr-ai-toggle input:checked + .tr-ai-toggle-track::after { transform: translateX(16px); } .tr-ai-toggle-label { color: var(--text); font-weight: 500; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; font-size: 14px; } .app-header { display: flex; align-items: center; padding: 12px 32px; background: var(--card-bg); /* white — preserves the logo's natural Slimstock colours */ border-bottom: 1px solid var(--border); color: var(--text); } .app-header .brand-logo { height: 36px; width: auto; display: block; } .version-tag { margin-left: 12px; color: var(--muted); font-size: 12px; } main { /* Quick Run keeps its compact 900-wide card layout via #quick-view below. Manual Mapping uses the full window width to give the two panes + the preview grid breathing room on wide displays. */ margin: 0; padding: 24px 32px 48px; } .view.hidden { display: none; } /* Quick Run keeps the original narrow centered look */ #quick-view { max-width: 900px; margin: 0 auto; } /* ── Top nav ─────────────────────────────────────────────── */ .top-nav { display: flex; gap: 4px; margin-left: 24px; } .nav-btn { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 12px; font-size: 13px; color: var(--muted); cursor: pointer; } .nav-btn:hover { background: var(--bg); color: var(--text); } .nav-btn.active { background: #005896; /* Slimstock dark blue — matches the logo accent */ color: white; border-color: #005896; } /* ── Manual Mapping view ─────────────────────────────────── */ .mapping-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; } .tb-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); } .tb-field select { font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); min-width: 200px; } #m-status { margin-left: auto; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; background: transparent; color: var(--muted); transition: background 200ms ease, color 200ms ease; max-width: 480px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #m-status:not(:empty) { background: #eaf6ee; color: var(--accent); border: 1px solid #b6dbc4; } #m-status.fail { background: #fbe9e7; color: var(--err); border-color: #e0b3b3; font-weight: 600; } .tb-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 0 6px; cursor: pointer; user-select: none; } .tb-checkbox input { margin: 0; } .tb-checkbox:hover { color: var(--text); } .tb-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; } .tb-radio input { margin: 0; accent-color: var(--brand); } .mapping-board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; /* Fill the viewport below the header + toolbar so each pane can scroll independently inside its own card. 280px = header (~57) + main top padding (24) + toolbar (~120 with wrap) + buffer. */ height: calc(100vh - 280px); min-height: 420px; } .mb-pane { background: var(--card-bg); border-radius: 8px; padding: 16px 18px; border: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; min-height: 0; } .mb-pane h3 { margin: 0 0 4px; font-size: 16px; } .mb-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 14px 0 6px; font-weight: 600; } .mb-key-banner { background: #fff8e1; border: 1px dashed #d4a83c; border-radius: 6px; padding: 8px 10px; font-size: 12px; margin: 4px 0 8px; } /* ── Drop targets ────────────────────────────────────────── */ .droplist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .drop-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .drop-row .tcol-name { flex: 0 0 180px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); } .drop-row.is-key .tcol-name { color: var(--accent); font-weight: 600; } .drop-target { flex: 1; min-height: 30px; border: 1px dashed var(--border); border-radius: 6px; padding: 4px 8px; display: flex; align-items: center; gap: 6px; background: var(--card-bg-soft); transition: background 80ms ease, border-color 80ms ease; } .drop-target.sortable-drag-over, .drop-target:has(.sortable-ghost) { background: #e8f6ee; border-color: var(--accent); } .drop-row.is-filled .drop-target { background: var(--card-bg); border-style: solid; } .drop-target .placeholder { color: #b6b6b6; font-size: 12px; } .mapped-tag { background: var(--accent); color: white; border-radius: 4px; padding: 1px 8px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .auto-tag { background: #eef2fb; color: #3a52a0; border: 1px solid #c5d3ec; border-radius: 4px; padding: 1px 8px; font-size: 12px; font-style: italic; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── Dark-mode overrides for the Manual Mapping view ─────── */ /* The mapping view's drop slots were originally light-mode-only — white/near-white backgrounds against the dark page background look bizarre. These overrides keep the same visual hierarchy (subtle background for empty slots, solid for filled, dashed border, accent on drag-over) but in dark-mode-appropriate colours. */ [data-theme="dark"] .drop-target { background: var(--card-bg-soft, rgba(255, 255, 255, .04)); border-color: var(--border); color: var(--text); } [data-theme="dark"] .drop-target.sortable-drag-over, [data-theme="dark"] .drop-target:has(.sortable-ghost) { background: rgba(34, 197, 94, .15); border-color: #4ade80; } [data-theme="dark"] .drop-row.is-filled .drop-target { background: var(--card-bg); border-style: solid; } [data-theme="dark"] .drop-target .placeholder { color: var(--text-muted); } [data-theme="dark"] .auto-tag { background: rgba(99, 102, 241, .15); color: #c7d2fe; border-color: rgba(99, 102, 241, .35); } [data-theme="dark"] .mb-key-banner { background: rgba(212, 168, 60, .12); border-color: rgba(212, 168, 60, .55); color: var(--text); } [data-theme="dark"] .mapped-tag { background: #4a8fc7; color: #fff; } .tx-tag { font-size: 11px; color: var(--muted); background: #eef; border-radius: 3px; padding: 1px 5px; } .mb-x { margin-left: auto; background: transparent; border: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 6px; } .mb-x:hover { color: var(--err); } /* ── Source chips ────────────────────────────────────────── */ .chiplist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 16px; background: #f0f2f5; border: 1px solid var(--border); font-size: 12px; cursor: grab; transition: transform 80ms ease; } .chip:active { cursor: grabbing; } .chip-dot { font-size: 10px; line-height: 1; } .chip-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .chip-pass { background: #eaf6ee; border-color: #b6dbc4; } .chip-pass .chip-dot { color: var(--accent); } .chip-warn { background: #fff5e0; border-color: #e6c98e; cursor: not-allowed; } .chip-warn .chip-dot { color: var(--warn); } .chip-fail { background: #fbe9e7; border-color: #e0b3b3; color: #7a3030; cursor: grab; opacity: 0.9; } .chip-fail:active { cursor: grabbing; } .chip-fail .chip-dot { color: var(--err); } .chip-in-use { background: #e8eef7; border-color: #b9c8df; opacity: 0.65; cursor: default; } .chip-in-use .chip-dot { color: #5a6c7d; } .chip-used { color: var(--muted); font-size: 11px; } .chip-ack { background: var(--warn); color: white; border: none; border-radius: 8px; padding: 1px 6px; font-size: 10px; text-transform: uppercase; cursor: pointer; } /* ── Preview grid (inside the full-screen popup) ───────── */ .preview-grid { flex: 1; overflow: auto; border: 1px solid var(--border); border-radius: 6px; margin: 0; background: var(--card-bg); } /* ── Full-screen preview popup ───────────────────────────── */ .mb-preview-popup { position: fixed; top: 24px; right: 24px; bottom: 24px; left: 24px; background: var(--card-bg); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 50, 100, 0.30); padding: 18px 22px; z-index: 150; display: flex; flex-direction: column; gap: 12px; animation: mb-preview-pop 180ms ease; } .mb-preview-popup.hidden { display: none; } @keyframes mb-preview-pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .mb-preview-popup-header { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .mb-preview-popup-header strong { font-size: 15px; color: var(--text-strong); } .mb-preview-popup-header .meta { flex: 1; } /* Filter toolbar inside the preview popup */ .mb-preview-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .mb-preview-toolbar input[type="search"] { flex: 1; min-width: 240px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; } .mb-preview-toolbar input[type="search"]:focus { outline: none; border-color: #005896; box-shadow: 0 0 0 2px rgba(0, 88, 150, 0.15); } .mb-preview-toolbar .meta { flex: 0 0 auto; } /* Cell highlighting for invisible / suspicious characters */ .cell-rogue { background: #fff3cd; outline: 1px dashed #d68910; padding: 0 2px; border-radius: 2px; cursor: help; } .cell-rogue::before, .cell-rogue::after { color: #b03a2e; } .cell-rogue::before { content: '⟦'; } .cell-rogue::after { content: '⟧'; } .mb-preview-popup .preview-grid table.prev thead th { position: sticky; top: 0; background: #005896; color: white; z-index: 2; } /* Frozen headers — the corner cells where the sticky header row meets a sticky-left frozen column. Without this explicit override, WebKit (pywebview's WKWebView) intermittently dropped the `left` constraint on `` inside `` — so columns visibly stuck on horizontal scroll but their headers scrolled away with the rest of the table. Re- stating `position: sticky` here forces WebKit to re-evaluate BOTH constraints together; the `left` value is inherited from the prev-frozen-N rule. z-index bumped to 4 so the corner cell paints above both the sticky-row plane (z-index 2) and the sticky-column plane (z-index 1) when they intersect. */ .mb-preview-popup .preview-grid table.prev thead th.prev-frozen { position: sticky; top: 0; z-index: 4; } /* Edge shadow on the right side of the LAST frozen header cell. The thead generic rule has higher specificity than the body- cell prev-frozen-edge rule (line ~770), so without this override the visual rule disappears on the header row. Keeping it consistent with the body avoids a visual mismatch at the freeze boundary. */ .mb-preview-popup .preview-grid table.prev thead th.prev-frozen-edge { box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.18); } table.prev { width: 100%; border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; } table.prev th, table.prev td { padding: 3px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; } table.prev thead th { position: sticky; top: 0; background: #f4f5f7; font-weight: 600; z-index: 2; } /* ── Frozen leading columns (configurable: 0–4) ─────────── * Sticky-left so the user can scroll horizontally through 40+ * column interfaces without losing the row identifier. The N * is set by the "Freeze: 0/1/2/3/4" segment on the preview * toolbar; localStorage persists the user's choice. * * Widths are fixed so each frozen column's ``left:`` offset can * be deterministic (CSS can't easily measure runtime widths). * Sized for typical Slim4 codes (≤10 chars). Column header * texts that don't fit just scroll inside the cell. * * Z-index stack (top to bottom): * 3 — frozen header cells (sticky in BOTH axes; must paint * above body's sticky-left cells AND header's sticky-top) * 2 — non-frozen header cells (sticky-top only) * 1 — body cells in frozen columns (sticky-left only) * default — regular body cells */ table.prev th.prev-frozen, table.prev td.prev-frozen { position: sticky; background: var(--card-bg); z-index: 1; border-right: 1px solid var(--border); } /* Cumulative left-offsets — each frozen column starts where the * previous one ended. Widths roughly track the row-identifier + * commonly-anchored fields in priority order: * col 0 → warehouse_code (110px) left 0 * col 1 → article_code (130px) left 110 * col 2 → supplier_number / tx_number (130px) left 240 * col 3 → line / sub-line (110px) left 370 * col 4 → name / type (160px) left 480 * col 5 → date / lead_time (120px) left 640 * col 6 → qty / review_time (110px) left 760 * col 7 → cost / price (110px) left 870 → ends 980 * * Eight frozen columns ≈ 980px — close to the practical limit on * a 1440-wide window with the popup chrome around it. Per-cell * widths are NOT auto-fit; long values scroll inside the cell. */ table.prev th.prev-frozen-0, table.prev td.prev-frozen-0 { left: 0; min-width: 110px; max-width: 110px; width: 110px; } table.prev th.prev-frozen-1, table.prev td.prev-frozen-1 { left: 110px; min-width: 130px; max-width: 130px; width: 130px; } table.prev th.prev-frozen-2, table.prev td.prev-frozen-2 { left: 240px; min-width: 130px; max-width: 130px; width: 130px; } table.prev th.prev-frozen-3, table.prev td.prev-frozen-3 { left: 370px; min-width: 110px; max-width: 110px; width: 110px; } table.prev th.prev-frozen-4, table.prev td.prev-frozen-4 { left: 480px; min-width: 160px; max-width: 160px; width: 160px; } table.prev th.prev-frozen-5, table.prev td.prev-frozen-5 { left: 640px; min-width: 120px; max-width: 120px; width: 120px; } table.prev th.prev-frozen-6, table.prev td.prev-frozen-6 { left: 760px; min-width: 110px; max-width: 110px; width: 110px; } table.prev th.prev-frozen-7, table.prev td.prev-frozen-7 { left: 870px; min-width: 110px; max-width: 110px; width: 110px; } /* The right-edge shadow + heavier border live on the LAST frozen * column only. ``prev-frozen-edge`` is added by the renderer to * whichever column index happens to be N-1 — gives a clean visual * boundary regardless of the freeze count. */ table.prev th.prev-frozen-edge, table.prev td.prev-frozen-edge { box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12); } /* Header cells in frozen columns are sticky in BOTH directions — * need higher z-index than either header-row or frozen-col bodies * to ensure the corner cell paints on top of both planes. */ table.prev thead th.prev-frozen { z-index: 3; background: #f4f5f7; } /* Dark-mode adjustment: the header default uses a hardcoded light * grey; mirror that pattern with the canvas-soft variable. */ [data-theme="dark"] table.prev thead th { background: var(--card-bg-soft); } [data-theme="dark"] table.prev thead th.prev-frozen { background: var(--card-bg-soft); } [data-theme="dark"] table.prev td.prev-frozen { background: var(--card-bg); } /* ── Editable Warehouse Master cells ─────────────────────── * Only the warehousemaster interface preview gets editable cells; * the renderer flags them with `td.wm-editable`. Visual cues: * - resting state: warm cream background + dashed border so the * consultant immediately sees these cells are typeable (the * first iteration used a near-white tint that disappeared into * the popup's white background); * - hover: deeper cream + solid border; * - focus: white background with bold accent ring + I-beam cursor; * - saved: brief green flash (class removed by JS after ~900ms); * - error: persistent red ring until the next focus. */ table.prev td.wm-editable { background: #fff4cf; cursor: text; outline: none; /* Inset dashed border instead of a real border so column widths don't shift between editable and non-editable cells. */ box-shadow: inset 0 0 0 1px #d9b95a; transition: background 0.15s, box-shadow 0.15s, color 0.15s; } table.prev td.wm-editable:hover { background: #ffe89a; box-shadow: inset 0 0 0 1px #b68c2a; } table.prev td.wm-editable:focus { background: #ffffff; box-shadow: inset 0 0 0 2px var(--accent, #2962ff); position: relative; z-index: 2; } table.prev td.wm-editable.wm-saving { background: #eef4ff; box-shadow: inset 0 0 0 1px #6a8fd6; } table.prev td.wm-editable.wm-saved { background: #c8ecd2; box-shadow: inset 0 0 0 1px #2c7a47; } table.prev td.wm-editable.wm-error { background: #fde9e9; box-shadow: inset 0 0 0 2px #d33; } [data-theme="dark"] table.prev td.wm-editable { background: #4a3a14; box-shadow: inset 0 0 0 1px #b58a3b; } [data-theme="dark"] table.prev td.wm-editable:hover { background: #5e4818; box-shadow: inset 0 0 0 1px #d9b95a; } [data-theme="dark"] table.prev td.wm-editable:focus { background: #1c1c1c; } [data-theme="dark"] table.prev td.wm-editable.wm-saving { background: #1a2440; } [data-theme="dark"] table.prev td.wm-editable.wm-saved { background: #173823; } [data-theme="dark"] table.prev td.wm-editable.wm-error { background: #3a1a1a; } /* ── Freeze segment-control on the preview toolbar ──────── */ .tb-freeze { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-left: 1px solid var(--border); } .tb-freeze .meta { margin-right: 2px; font-size: 12px; } .tb-freeze .freeze-chip { border: 1px solid var(--border); background: var(--card-bg); color: var(--muted); font-size: 12px; font-weight: 500; width: 26px; height: 24px; border-radius: 5px; cursor: pointer; padding: 0; transition: background 0.1s, color 0.1s, border-color 0.1s; } .tb-freeze .freeze-chip:hover { background: var(--card-bg-soft); color: var(--text); } .tb-freeze .freeze-chip.active { background: var(--text-strong); color: #fff; border-color: var(--text-strong); } [data-theme="dark"] .tb-freeze .freeze-chip.active { background: var(--text); color: var(--card-bg); border-color: var(--text); } /* ── Drawer (full-height right sidebar) ──────────────────── */ .mb-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 90vw; background: var(--card-bg); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0, 50, 100, 0.10); padding: 18px 22px; z-index: 100; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; animation: mb-drawer-slide-in 180ms ease; } @keyframes mb-drawer-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .mb-drawer.hidden { display: none; } .mb-drawer > .row { position: sticky; top: 0; background: var(--card-bg); padding-bottom: 10px; border-bottom: 1px solid var(--border); margin: 0 -22px 4px; padding-left: 22px; padding-right: 22px; z-index: 1; } .mb-drawer h4 { margin: 14px 0 6px; font-size: 13px; color: var(--text-strong); } .mb-drawer ul { margin: 4px 0; padding-left: 18px; } .mb-drawer li { font-size: 12px; margin-bottom: 3px; } .mb-drawer code { background: var(--code-bg); padding: 0 4px; border-radius: 3px; } .bp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .bp-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); width: 60%; } .bp-table td { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--text-strong); padding: 6px 8px; border-bottom: 1px solid var(--border); } /* SortableJS ghost */ .sortable-ghost { opacity: 0.4; } /* ── Loading indicator for file ingest ──────────────────── */ .mb-loading { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f0f6fb; border: 1px solid #cfdef0; border-radius: 8px; margin-bottom: 10px; } .mb-loading.hidden { display: none; } .mb-loading-text { display: flex; flex-direction: column; gap: 2px; } .mb-loading-text strong { font-size: 13px; color: var(--text-strong); } .mb-loading-text .meta { font-size: 12px; } .mb-spinner { width: 22px; height: 22px; border: 3px solid #cfdef0; border-top-color: #005896; border-radius: 50%; animation: mb-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes mb-spin { to { transform: rotate(360deg); } } /* ── Custom field-description tooltip ────────────────────── */ .mb-tooltip { position: absolute; display: none; max-width: 360px; background: #005896; /* Slimstock dark blue — same as header */ color: white; padding: 12px 14px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 50, 100, 0.30); font-size: 13px; line-height: 1.45; z-index: 200; opacity: 0; transform: translateY(-2px); transition: opacity 140ms ease, transform 140ms ease; pointer-events: none; } .mb-tooltip.visible { opacity: 1; transform: translateY(0); } /* Cursor-tracking tooltip — no anchor arrow */ .mb-tooltip::before { display: none; } /* ── Pill strip in Manual Mapping toolbar ────────────────── */ .pill-strip { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 0 100%; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); } .pill { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 3px 10px; font-size: 11.5px; color: var(--muted); cursor: pointer; transition: background 100ms ease, color 100ms ease, border-color 100ms ease; } .pill:hover { background: #e8eef7; color: var(--text-strong); } .pill-mapped { background: #eaf6ee; color: var(--accent); border-color: #b6dbc4; } .pill-mapped:hover { background: #d8eedf; } .pill-active { background: #005896; color: white; border-color: #005896; font-weight: 600; } .pill-active:hover { background: #00477a; color: white; } .pill-dim { opacity: 0.6; } /* ══════════════════════════════════════════════════════════ * Progress view — snapshot-vs-snapshot diff * Built so it reads well in front of a client. Calm visual * hierarchy: rings up top, three story columns in the middle, * audit trail at the bottom. Theme-aware throughout. * ══════════════════════════════════════════════════════════ */ #progress-view { margin: 0; padding: 24px 32px; } .prog-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .prog-title { margin: 0 0 4px; font-size: 24px; font-weight: 600; color: var(--text-strong); } .prog-pickers { display: flex; align-items: center; gap: 10px; } .prog-pickers select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); font-size: 13px; min-width: 220px; } .prog-headline { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px 28px; margin-bottom: 18px; } .prog-headline-empty { text-align: center; padding: 30px 0; } .prog-rings { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-bottom: 18px; } .prog-ring-col { display: flex; flex-direction: column; align-items: center; gap: 8px; } .prog-ring-label { color: var(--muted); font-size: 12px; text-align: center; } .prog-ring-delta { text-align: center; } .prog-delta-arrow { font-size: 22px; font-weight: 600; padding: 6px 14px; border-radius: 20px; display: inline-block; } .prog-delta-up { background: rgba(16, 185, 129, 0.12); color: #10b981; } .prog-delta-down { background: rgba(239, 68, 68, 0.12); color: #ef4444; } .prog-delta-flat { background: rgba(156, 163, 175, 0.12); color: var(--muted); } .prog-ring .prog-ring-pct { font-size: 22px; font-weight: 600; fill: var(--text); } .prog-ring .prog-ring-sub { font-size: 10px; fill: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; } .prog-3c-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } .prog-c { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 6px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg-soft); } .prog-c-big { border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.06); } .prog-c-lbl { font-weight: 600; color: var(--text); font-size: 13px; } .prog-c-tag { font-size: 10px; color: #92400e; background: rgba(245, 158, 11, 0.18); padding: 2px 8px; border-radius: 10px; margin-left: 6px; font-weight: 500; } .prog-c-track { background: var(--border); height: 6px; border-radius: 3px; overflow: hidden; } .prog-c-bar { height: 100%; border-radius: 3px; } .prog-c-complete { background: #10b981; } .prog-c-consistent { background: #f59e0b; } .prog-c-correct { background: #3b82f6; } .prog-c-nums { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); } .prog-c-nums strong { color: var(--text-strong); font-size: 14px; } .prog-c-delta { margin-left: auto; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; } .prog-story { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; } .prog-col { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .prog-col-green { border-top: 3px solid #10b981; } .prog-col-amber { border-top: 3px solid #f59e0b; } .prog-col-grey { border-top: 3px solid #9ca3af; } .prog-col-head { display: flex; justify-content: space-between; align-items: baseline; } .prog-col-head h3 { margin: 0; font-size: 15px; color: var(--text-strong); } .prog-col-empty { text-align: center; padding: 24px 0; font-style: italic; } .prog-bucket { padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .prog-bucket:last-child { border-bottom: none; } .prog-bucket-head strong { font-size: 13px; color: var(--text); } .prog-bucket-detail { margin: 4px 0 8px; font-size: 12px; } .prog-bucket-items { margin: 0; padding-left: 14px; font-size: 12px; } .prog-bucket-items li { margin: 2px 0; line-height: 1.5; color: var(--text); } .prog-item-title { font-weight: 500; } .prog-audit { padding: 14px 18px; margin-bottom: 18px; } .prog-audit-head { margin: 0 0 10px; font-size: 14px; color: var(--text-strong); } .prog-audit-list { list-style: none; padding: 0; margin: 0; } .prog-audit-item { display: grid; grid-template-columns: 110px 80px 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; } .prog-audit-item:last-child { border-bottom: none; } .prog-audit-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); } .prog-audit-label { color: var(--text); } .prog-notes { margin-bottom: 18px; } .prog-note { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 8px; padding: 10px 16px; color: var(--text); font-size: 13px; } .prog-note p { margin: 4px 0; } /* ── Settings view ───────────────────────────────────────── */ #settings-view { max-width: 900px; margin: 0 auto; } .settings-card { padding: 22px 26px; } .settings-card h2 { font-size: 16px; margin: 0 0 6px; } .settings-card .meta { margin-bottom: 12px; } .settings-actions { display: flex; gap: 8px; margin-bottom: 12px; } .interface-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; } .interface-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg-soft); cursor: pointer; user-select: none; } .interface-row:hover { background: var(--hover-bg); } .interface-row input { margin: 0; } .interface-row .interface-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); } .interface-row .meta { font-size: 11px; margin: 0; } /* ── Decision patterns (Settings → Decision patterns) ───── */ .s-patterns-list { margin-top: 8px; } .s-patterns-table { width: 100%; border-collapse: collapse; font-size: 12px; } .s-patterns-table th, .s-patterns-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); } .s-patterns-table thead th { font-weight: 600; color: var(--text-strong); border-bottom: 1px solid var(--border); } .s-patterns-table tbody tr:hover { background: var(--hover-bg); } .s-patterns-table code { background: var(--code-bg); padding: 2px 6px; border-radius: 3px; font-size: 11px; } .settings-input { font-size: 13px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); } .mb-tooltip .mb-tt-title { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .mb-tooltip .mb-tt-id { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.95); border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; } .mb-tooltip .mb-tt-desc { color: rgba(255,255,255,0.92); font-size: 12.5px; margin-bottom: 8px; } .mb-tooltip .mb-tt-meta { font-size: 11.5px; color: rgba(255,255,255,0.78); border-top: 1px solid rgba(255,255,255,0.18); padding-top: 6px; } .mb-tooltip .mb-tt-meta strong { color: white; font-weight: 600; } .mb-tooltip .mb-tt-meta em { color: rgba(255,255,255,0.88); } /* ── Multi-select + derived chips ────────────────────────── */ .chip-selected { outline: 2px solid var(--accent); outline-offset: 1px; } .chip-derived { background: #eef2fb; border-color: #b5c3e0; } .chip-fn { font-style: italic; font-weight: 700; color: #3a52a0; font-size: 12px; line-height: 1; } .chip-del { background: transparent; border: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 4px; } .chip-del:hover { color: var(--err); } /* ── Combine modal ───────────────────────────────────────── */ .mb-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; z-index: 80; } .mb-modal-backdrop.hidden { display: none; } .mb-modal { background: var(--card-bg); border-radius: 10px; width: 460px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(0,0,0,0.25); } .mb-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; } .mb-modal-body { padding: 14px 18px; overflow: auto; display: flex; flex-direction: column; gap: 10px; } .mb-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); } .combine-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .combine-field input, .combine-field select { font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); } .combine-preview { margin-top: 4px; background: var(--card-bg-soft); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; } .combine-preview ul { list-style: none; margin: 6px 0 0; padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .combine-preview li { padding: 2px 0; } .combine-preview .sev-error { color: var(--err); font-family: inherit; } #combine-cols { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); } .card { background: var(--card-bg); border-radius: 8px; padding: 20px 24px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .card.error { border-left: 4px solid var(--err); } .card h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; } .card h2:not(:first-child) { margin-top: 22px; } .card h3 { font-size: 14px; margin: 18px 0 8px; font-weight: 600; } .hidden { display: none !important; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .run-row { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); } .results-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .btn { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: background 0.15s; } .btn:hover { background: #f0f0f0; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { background: var(--accent); opacity: 0.4; } .btn-secondary { background: transparent; border-color: #ccc; color: var(--muted); } .meta { color: var(--muted); font-size: 12px; margin: 4px 0; } .meta-inline { color: var(--muted); font-weight: 400; font-size: 12px; } code { background: var(--code-bg); padding: 2px 6px; border-radius: 3px; font-size: 12px; word-break: break-all; } input[type="text"] { width: 100%; max-width: 360px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: 14px; font-family: inherit; } input[type="text"]:focus { outline: none; border-color: var(--accent); } /* Stage list */ .stage-list { list-style: none; counter-reset: stage; padding: 0; margin: 8px 0 0; } .stage-list li { padding: 6px 0 6px 28px; position: relative; color: var(--muted); } .stage-list li::before { counter-increment: stage; content: counter(stage); position: absolute; left: 0; top: 6px; width: 18px; height: 18px; background: #ddd; color: #fff; border-radius: 50%; text-align: center; font-size: 11px; line-height: 18px; font-weight: 600; } .stage-list li.done { color: var(--text); } .stage-list li.done::before { background: var(--accent); content: "✓"; } /* Summary badges */ .summary-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: #fff; } .badge.ready { background: #1f7a3a; } .badge.partial { background: #d4881c; } .badge.blocked { background: #b03030; } .badge.missing { background: #6e6e6e; } .badge.empty { background: #9a8a3a; } /* Ballpark card */ .ballpark-card { border-left: 4px solid var(--accent); padding: 14px 18px; margin: 12px 0; background: #fafbfb; border-radius: 4px; } .ballpark-card h3 { margin-top: 0; } .ballpark-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; } .ballpark-table th { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); background: #f7f8fa; font-weight: 600; } .ballpark-table td { padding: 6px 10px; border-bottom: 1px solid #eee; } .ballpark-table td.num, .ballpark-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; } .ratios { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--muted); } .ratios strong { color: var(--text); } /* Generic results tables */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); background: #f7f8fa; font-weight: 600; } td { padding: 5px 10px; border-bottom: 1px solid #eee; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Flags */ #flags-list { padding-left: 0; list-style: none; margin: 4px 0; } #flags-list li { margin: 4px 0; font-size: 13px; } .sev { font-weight: 600; margin-right: 6px; } .sev-info { color: var(--info); } .sev-warn { color: var(--warn); } .sev-error { color: var(--err); } /* Per-dataset detail */ .tab-block { padding: 10px 14px; border-left: 3px solid var(--border); margin: 8px 0; } .tab-block.ready { border-left-color: var(--accent); } .tab-block.partial { border-left-color: var(--warn); } .tab-block.blocked { border-left-color: var(--err); } .tab-block.missing { border-left-color: #6e6e6e; } .tab-block.empty { border-left-color: #9a8a3a; } .tab-block-header { display: flex; gap: 10px; align-items: center; } .tab-block-header strong { font-size: 14px; } .tab-block-meta { color: var(--muted); font-size: 12px; margin-top: 4px; } .tab-block ul { margin: 6px 0; padding-left: 18px; } .tab-block ul li { font-size: 12px; margin: 2px 0; } pre { background: #f7f8fa; border: 1px solid var(--border); border-radius: 5px; padding: 10px 14px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; } /* ════════════════════════════════════════════════════════ Triage view — Agentic Data Room ════════════════════════════════════════════════════════ */ #triage-view { display: flex; flex-direction: column; gap: 20px; /* No max-width — fill the window so the inspector panel uses every spare pixel of horizontal space. */ margin: 0; position: relative; } /* ── Triage loading overlay ───────────────────────────── */ /* Same shape as Manual Mapping's loading indicator so the user sees a consistent "we're working" cue during the first Triage scan (which assembles every mapped template + runs DQ + computes the was/now ballpark — easily a few seconds on a real workbook). */ .tr-loading { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f0f6fb; border: 1px solid #cfdef0; border-radius: 8px; } .tr-loading.hidden { display: none; } .tr-loading-text { display: flex; flex-direction: column; gap: 2px; } .tr-loading-text strong { font-size: 13px; color: var(--text-strong); } .tr-loading-text .meta { font-size: 12px; } /* Two-column layout below the header: cards on the left (capped at a comfortable reading width so they don't stretch absurdly on a wide display), inspector on the right absorbing all remaining space. */ .triage-main { display: grid; grid-template-columns: minmax(420px, 640px) minmax(0, 1fr); gap: 20px; align-items: start; } .triage-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* The right-side inspector panel — sticky so it stays visible while the user scrolls the card stack. Structured as h3-bar + white card to mirror the tier sections on the left, so both columns top-align. */ .triage-inspector { position: sticky; top: 20px; display: flex; flex-direction: column; /* Fill the viewport vertically (minus top-nav + a little breathing room) so the examples table can stretch as tall as the screen. */ height: calc(100vh - 96px); } /* h3 sibling-position bar — matches `.tr-tier h3` so the two columns align at their first content baseline. */ .tr-inspector-bar { margin: 6px 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; } .tr-inspector-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0, 50, 100, 0.04); /* Grow to fill all remaining vertical space inside the inspector. overflow: hidden because the SCROLLING happens inside .tr-inspector-scroll (a nested div); putting overflow on the card would make the table headers fight the toolbar for top:0. */ flex: 1; overflow: hidden; min-height: 0; display: flex; flex-direction: column; } /* The content wrapper grows + lets the body section stretch */ .tr-inspector-content { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* The body wraps the toolbar (static) + the scroll area (the only thing that actually scrolls). Toolbar stays pinned at the top; table can then have a sticky thead that pins to the top of just its own scroll container, not fighting the toolbar. */ #tr-inspector-body { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 4px; } .tr-inspector-scroll { flex: 1; overflow: auto; min-height: 0; /* Inner scroll container — horizontal scroll for wide tables AND vertical scroll for many rows. The table's sticky thead pins to the top of THIS box. */ } .tr-inspector-card strong { font-size: 14px; color: var(--text-strong); display: block; margin: 0 0 4px 0; letter-spacing: 0.2px; } .tr-inspector-empty { color: var(--muted); } .tr-inspector-empty .meta { font-size: 12px; } .tr-inspector-content.hidden { display: none; } .tr-inspector-content .meta { font-size: 12px; margin: 0 0 12px 0; } /* Inspector sample table — proper grid of rows × columns, with a highlighted focus column for the finding's primary field. Important: width: max-content forces the table to grow to its natural content width (regardless of how narrow the card is), so wide tables overflow horizontally and the card's `overflow: auto` provides a horizontal scrollbar. min-width: 100% ensures the table still fills the card when content is narrow. */ .tr-inspector-table { border-collapse: collapse; font-size: 12px; table-layout: auto; width: max-content; min-width: 100%; } .tr-inspector-table th, .tr-inspector-table td { min-width: 100px; white-space: nowrap; } .tr-inspector-table thead th { text-align: left; font-size: 10px; letter-spacing: 0.3px; text-transform: uppercase; color: #7a8b9c; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #e6ecf3; background: var(--card-bg-soft); position: sticky; top: 0; z-index: 2; /* above tbody but below the checkbox col header */ white-space: nowrap; } /* The checkbox column's header needs to win on BOTH axes (top + left), so it gets a higher z-index than the rest of the thead. */ .tr-inspector-table thead th.tr-check { z-index: 3; } .tr-inspector-table thead th.focus { color: #c0392b; } .tr-inspector-table tbody td { padding: 8px; border-bottom: 1px solid #f0f3f7; color: var(--text); font-variant-numeric: tabular-nums; vertical-align: top; word-break: break-word; } .tr-inspector-table tbody td.focus { font-weight: 600; color: var(--text-strong); background: rgba(255, 243, 205, 0.4); } /* Click-to-copy on Inspector data cells. cursor:copy advertises the * affordance; the hover background hints which cell the click will hit. * tr-cell-copied is a 600ms flash applied by the JS click handler. */ .tr-inspector-table tbody td.tr-cell-copy { cursor: copy; transition: background 120ms ease, outline 120ms ease; } .tr-inspector-table tbody td.tr-cell-copy:hover { background: #eaf4ff; } .tr-inspector-table tbody td.tr-cell-copy.focus:hover { /* Preserve the yellow focus tint, just deepen it on hover. */ background: rgba(255, 220, 130, 0.55); } .tr-inspector-table tbody td.tr-cell-copied { background: #c8f1d6 !important; outline: 1.5px solid #10b981; outline-offset: -1px; } [data-theme="dark"] .tr-inspector-table tbody td.tr-cell-copy:hover { background: #1c2e44; } [data-theme="dark"] .tr-inspector-table tbody td.tr-cell-copied { background: #14342a !important; outline-color: #2e6a4d; } /* Checkbox column — sticky to the left edge so it stays visible while scrolling horizontally through many columns. */ .tr-inspector-table th.tr-check, .tr-inspector-table td.tr-check { min-width: 32px; width: 32px; text-align: center; position: sticky; left: 0; background: var(--card-bg); z-index: 2; } .tr-inspector-table thead th.tr-check { background: var(--card-bg-soft); } .tr-inspector-table tbody tr.tr-row-selected { background: rgba(0, 88, 150, 0.08); } .tr-inspector-table tbody tr.tr-row-selected td.tr-check { background: rgba(0, 88, 150, 0.04); } /* Sortable column headers */ .tr-inspector-table th.tr-sortable { cursor: pointer; user-select: none; } .tr-inspector-table th.tr-sortable:hover { background: #eef3f8; } .tr-sort-icon { color: #b0bec5; font-size: 9px; } .tr-sort-icon.active { color: #005896; } /* Inspector toolbar — Clear + Exclude buttons + selection count. No longer needs position: sticky because it lives OUTSIDE the scrolling .tr-inspector-scroll div now (sibling of, not parent of). */ .tr-inspector-toolbar { display: flex; align-items: center; gap: 12px; padding: 0 0 10px; background: var(--card-bg); flex: 0 0 auto; } .tr-inspector-toolbar .meta { flex: 1; font-size: 12px; } .tr-inspector-toolbar .btn { font-size: 12px; padding: 5px 12px; } .tr-inspector-table tbody tr:last-child td { border-bottom: none; } /* Selected card gets a subtle indicator that it's "the one in the inspector" */ .tr-card.tr-card-inspected { box-shadow: 0 0 0 2px rgba(0, 88, 150, 0.18); } /* ── Header with ring ──────────────────────────────────── */ .triage-header { display: flex; gap: 28px; align-items: center; padding: 28px 28px 24px; background: var(--card-bg); border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0, 50, 100, 0.04); } .triage-ring-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Shared label above any ring (main "Overall" + per-file names). * Sized so that: * - it reads as a clear column header for the ring beneath * - all rings end up at the same vertical baseline, since every * ring column starts with this same-height label */ .tr-ring-label { font-weight: 600; font-size: 14px; color: #1f2937; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; margin-bottom: 2px; } /* 3 C's mini-scorecard under the ring. Width chosen so the longest * subtitle ("same units & format") fits on one line at 10px italic. * Was 120px → 180px after the subtitles landed. */ .triage-3c { display: flex; flex-direction: column; gap: 4px; width: 180px; font-size: 11px; color: var(--muted); } .tr-c { /* Single-row layout with subtitle stacked under the label. Matches * the PDF cover's typography exactly — label bold-ish on top, italic * grey subtitle directly under, percent right-aligned and vertically * centred against both lines. Width is wider than before so * "same units & format" can't wrap to two lines. */ display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 4px 8px; border-radius: 4px; cursor: help; /* signals the title="..." tooltip is available */ } .tr-c:hover { background: #f4f7fb; } .tr-c-lbl { grid-column: 1; grid-row: 1; letter-spacing: 0.3px; font-weight: 500; color: var(--muted); white-space: nowrap; } .tr-c-sub { /* Italic micro-subtitle. Kills the ambiguity of the label alone — * someone seeing 'Consistent 100%' next to obvious missing values * would otherwise (rightly) be confused. Subtitle on Correct was * dropped from markup because "business rules pass" just restates * the label without adding info. */ grid-column: 1; grid-row: 2; font-size: 10px; letter-spacing: 0.2px; color: #8a96a3; font-style: italic; white-space: nowrap; /* never wrap — widen container instead */ } .tr-c-val { /* Span both rows so the percentage centres against the label+sub * pair, not against just one line. Mirrors the PDF layout. */ grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; } [data-theme="dark"] .tr-c-lbl { color: #b8c5d4; } [data-theme="dark"] .tr-c-sub { color: #7a8696; } /* Per-file ring strip — sits beside the main ring in .triage-header. * Each ring is the SAME size as the main one (120×120) so the row * reads as a single scoreboard, not "headline + thumbnails". The * 3 C's block beneath matches .triage-3c in size + typography too. */ .triage-per-file { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; margin-left: 24px; padding-left: 24px; border-left: 1px solid #e6edf5; } .triage-per-file:empty { display: none; } .tr-pf { display: flex; flex-direction: column; align-items: center; gap: 8px; /* Min-width must fit the widest 3 C's row including its subtitle. * Bumped from 140px to 196px after subtitles + grid-gap landed. */ min-width: 196px; } .tr-pf-ring { display: block; } /* Mirror .triage-3c styling exactly so the per-file 3 C's block * reads identically to the main one beneath the headline ring. */ .tr-pf-3c { list-style: none; display: flex; flex-direction: column; gap: 4px; /* Width sized so 'same units & format' fits on one line. Was 140px * before subtitles landed and 'same units &' wrapped. */ width: 180px; font-size: 11px; color: var(--muted); padding: 0; margin: 0; } .tr-pf-3c li { /* Two-row grid: label + subtitle stack on the left, percent centred * vertically against both rows on the right. Matches the main 3 * C's block + the PDF cover layout exactly. */ display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 4px 8px; border-radius: 4px; cursor: help; } .tr-pf-3c li:hover { background: #f4f7fb; } .tr-pf-3c-lbl { grid-column: 1; grid-row: 1; letter-spacing: 0.3px; font-weight: 500; color: var(--muted); white-space: nowrap; } .tr-pf-3c-sub { grid-column: 1; grid-row: 2; font-size: 10px; letter-spacing: 0.2px; color: #8a96a3; font-style: italic; white-space: nowrap; } .tr-pf-3c-val { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; } [data-theme="dark"] .tr-pf-3c-lbl { color: #b8c5d4; } [data-theme="dark"] .tr-pf-3c-sub { color: #7a8696; } /* ── Financial ballpark in the Triage header ──────────── */ .tr-ballpark { margin-top: 10px; padding: 12px 14px; background: #f4f8fc; border: 1px solid #d6e4f0; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; } .tr-ballpark.hidden { display: none; } .tr-bp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; font-variant-numeric: tabular-nums; } .tr-bp-lbl { font-size: 12px; color: var(--muted); } .tr-bp-val { font-size: 15px; font-weight: 600; color: var(--text-strong); } .tr-bp-delta { font-size: 11px; color: var(--muted); min-width: 140px; text-align: right; } .tr-delta-pos { color: #1f7a3a; font-weight: 600; } .tr-delta-neg { color: #b03030; font-weight: 600; } .tr-bp-foot { margin-top: 4px; padding-top: 6px; border-top: 1px dashed #d6e4f0; } .tr-bp-caption { margin-top: 6px; padding: 4px 0 2px; font-size: 11px; color: var(--muted); font-style: italic; border-top: 1px dashed #e5edf5; } .triage-ring { display: block; } .triage-ring .ring-track { fill: none; stroke: #e6edf5; stroke-width: 12; } .triage-ring .ring-progress { fill: none; stroke: #005896; stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 600ms cubic-bezier(.2,.8,.3,1), stroke 240ms ease; } /* Score-tone modifiers — drive ring stroke + centre number colour * from the readiness percent. Applied to .triage-ring AND .ct-ring * (via the shared .ring-tone-* class JS toggles). Thresholds: * ≥90 → green (healthy) * 70–89 → amber (your move) * <70 → red (broken) * Stale cached scores get the muted-grey override (ct-ring-stale) * regardless of value; we still want users to know the number's old. */ .ring-tone-good .ring-progress, .ring-tone-good .ct-ring-progress { stroke: #10b981; } .ring-tone-warn .ring-progress, .ring-tone-warn .ct-ring-progress { stroke: #f59e0b; } .ring-tone-bad .ring-progress, .ring-tone-bad .ct-ring-progress { stroke: #ef4444; } .ring-tone-good .ring-pct, .ring-tone-good .ct-ring-pct { fill: #047857; } .ring-tone-warn .ring-pct, .ring-tone-warn .ct-ring-pct { fill: #b45309; } .ring-tone-bad .ring-pct, .ring-tone-bad .ct-ring-pct { fill: #b91c1c; } .triage-ring .ring-pct { font-size: 22px; font-weight: 600; fill: #003e6a; text-anchor: middle; dominant-baseline: middle; } .triage-ring .ring-lbl { font-size: 9px; fill: #6b7c8c; text-anchor: middle; letter-spacing: 0.6px; text-transform: uppercase; } .triage-hero { flex: 1; } .triage-hero h2 { margin: 0 0 6px 0; font-size: 18px; line-height: 1.35; color: var(--text-strong); font-weight: 600; } .triage-hero .meta { font-size: 13px; } /* ── Tiered card stacks ───────────────────────────────── */ .triage-body { display: flex; flex-direction: column; gap: 16px; } .tr-tier h3 { margin: 6px 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; } .tr-tier h3 .meta { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; } .tr-cards { display: flex; flex-direction: column; gap: 10px; } /* ── Individual card ──────────────────────────────────── */ .tr-card { background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid #c7d3df; border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; transition: opacity 200ms ease, transform 200ms ease, max-height 250ms ease; max-height: 600px; overflow: hidden; } /* v0.3.41 — the transaction-type curation/blocker card carries a full per-type table; the generic 600px card cap clipped it and forced scrolling. Give it a much larger ceiling so the whole table is visible (the inner .tr-type-list only scrolls on a pathological many-dozens-of-types file). Finite value keeps the collapse-out animation working. */ .tr-card.tr-card-curation { max-height: 2000px; } .tr-card.tr-tier-blocking { border-left-color: #c0392b; } .tr-card.tr-tier-high_leverage { border-left-color: #d68910; } .tr-card.tr-tier-cosmetic { border-left-color: #2e8b57; } .tr-card.tr-tier-info { border-left-color: #5d6d7e; } .tr-card.tr-card-busy { opacity: 0.55; pointer-events: none; } .tr-card.tr-card-out { opacity: 0; transform: translateX(28px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } .tr-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .tr-card-title strong { font-size: 14px; color: var(--text); display: block; margin-bottom: 2px; } .tr-card-title .meta { font-size: 12px; } .tr-card-tier { font-size: 11px; padding: 2px 8px; border-radius: 10px; color: #fff; white-space: nowrap; } .tr-card-tier.tier-blocking { background: #c0392b; } .tr-card-tier.tier-high_leverage { background: #d68910; } .tr-card-tier.tier-cosmetic { background: #2e8b57; } .tr-card-tier.tier-info { background: #5d6d7e; } .tr-card-badges { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; } .tr-card-c { font-size: 10px; padding: 2px 7px; border-radius: 9px; letter-spacing: 0.3px; background: #eef3f8; color: #3a4a5b; border: 1px solid #d2dde9; white-space: nowrap; } .tr-card-c.tr-c-complete { background: #e8f4ff; color: #1f5e9c; border-color: #b9d7f0; } .tr-card-c.tr-c-consistent { background: #fff4e0; color: #8a5a00; border-color: #f0d8a0; } .tr-card-c.tr-c-correct { background: #e6f5ec; color: #1f6b3c; border-color: #b8dfc4; } /* ── Transaction stratification card ──────────────────── * Read-only band histogram + top-N "biggest fish" table, both * rendered inline on the card body (not in the Inspector) so the * consultant sees the summary at a glance without an extra click. */ .tr-strat-h { margin: 12px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: var(--muted); text-transform: uppercase; } .tr-strat-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0; } .tr-strat-table th { background: #f4f7fb; color: var(--text-strong); font-weight: 600; padding: 6px 10px; text-align: left; border-bottom: 1px solid #d8e1ec; font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; } .tr-strat-table th.num, .tr-strat-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .tr-strat-table td { padding: 6px 10px; border-bottom: 1px solid #eef2f7; color: var(--text); } .tr-strat-table tbody tr:hover { background: #f9fbfd; } .tr-strat-band { font-weight: 500; } /* Sort affordance on distribution-card headers — small indicator next * to the column name, cursor flips to pointer on hover. Click cycle * is asc → desc → unsorted, driven from triage.js. */ .tr-strat-sortable { cursor: pointer; user-select: none; -webkit-user-select: none; position: relative; } .tr-strat-sortable:hover { background: #e9eff7; } .tr-strat-sort { display: inline-block; margin-left: 4px; font-size: 10px; color: #9aa3ad; letter-spacing: 0; } .tr-strat-sort.active { color: var(--text-strong); } [data-theme="dark"] .tr-strat-sortable:hover { background: #243044; } [data-theme="dark"] .tr-strat-sort { color: var(--muted); } [data-theme="dark"] .tr-strat-sort.active { color: #7aa6d1; } [data-theme="dark"] .tr-strat-table th { background: #1f2937; color: #cdd9e6; border-bottom-color: var(--text); } [data-theme="dark"] .tr-strat-table td { border-bottom-color: #2a3441; color: #e6ecf5; } [data-theme="dark"] .tr-strat-table tbody tr:hover { background: #1c2532; } /* ── Transaction-type curation card ──────────────────── */ .tr-type-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; /* v0.3.41 — show all transaction types without scrolling for any normal file (a handful up to ~18 types fit before the cap bites). Only a pathological many-dozens-of-types file scrolls, and then just enough to keep Apply / Defer reachable. Header sticks. */ max-height: 70vh; overflow-y: auto; } .tr-type-row.tr-type-header { position: sticky; top: 0; z-index: 1; } .tr-type-row { display: grid; /* Include · Flip · Name · Rows · Qty · Signs */ grid-template-columns: 50px 50px 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid #e6ecf3; border-radius: 6px; cursor: pointer; background: var(--card-bg); transition: background 120ms ease, border-color 120ms ease; } .tr-type-row:hover { background: #f7f9fb; } .tr-type-row.tr-type-included { background: #e6f5ec; border-color: #b8dfc4; } .tr-type-row.tr-type-excluded { background: #fbeeec; border-color: #e6c5c0; opacity: 0.75; } .tr-type-row.tr-type-flipped { /* Subtle blue tint stacks with the green include tint via background blend */ box-shadow: inset 0 0 0 2px #b6d4ed; } .tr-type-row.tr-type-header { background: #f0f3f7; border-color: #d6dee6; cursor: default; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); } .tr-type-row.tr-type-header:hover { background: #f0f3f7; } .tr-type-include-h, .tr-type-flip-h, .tr-type-name-h, .tr-type-rows-h, .tr-type-qty-h, .tr-type-flag-h { white-space: nowrap; } .tr-type-check, .tr-type-flip-check { margin: 0; cursor: pointer; justify-self: center; } .tr-type-flip-check:disabled { opacity: 0.3; cursor: not-allowed; } .tr-type-mixed { color: #a55a00; font-weight: 600; } .tr-type-name { font-weight: 600; font-size: 13px; color: var(--text); } .tr-type-rows, .tr-type-qty { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .tr-type-flag { font-size: 10px; letter-spacing: 0.2px; white-space: nowrap; } .tr-question { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); /* Reserve a stable height for the question text so the LLM- * phrasing swap (which runs every 2s for 30s after a scan) * doesn't reflow surrounding cards. 3 lines @ 1.45 line-height * comfortably fits every phrasing seen in production; longer * texts wrap inside the reserved box without pushing siblings. */ min-height: calc(13px * 1.45 * 3); /* Smooth opacity transition so the text swap feels intentional * rather than a flash. The actual swap happens during a * 80-180ms window — short enough that the user perceives "the * AI just finished thinking about this", not "the page jumped". */ transition: opacity 0.15s ease; } /* During an in-place text update, room.js / triage.js sets the * data-swapping attribute briefly; CSS dimms the text so the swap * doesn't look like an unannounced content shift. */ .tr-question[data-swapping="1"] { opacity: 0.45; } /* Inspector-side equivalent — same treatment so a card the user * just clicked into doesn't jiggle as its phrasing arrives. */ .tr-inspector-question { min-height: calc(15px * 1.45 * 2); transition: opacity 0.15s ease; } .tr-inspector-question[data-swapping="1"] { opacity: 0.45; } /* ── Cross-prospect pattern suggestion chip ───────────────── * Shown beneath the question when ≥ 2 past prospects resolved * this finding code consistently. Subtle amber so it reads as * "for your reference" rather than "do this now". */ .tr-rec { display: inline-flex; align-items: center; gap: 6px; background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.30); color: #92400e; font-size: 11px; padding: 4px 10px; border-radius: 12px; margin-top: 4px; cursor: help; } .tr-rec-icon { font-size: 12px; line-height: 1; } [data-theme="dark"] .tr-rec { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.40); color: #fbbf24; } /* ── "Why does this matter?" panel ──────────────────────── */ .tr-why { background: #f4f8fc; border-left: 3px solid #5b9bd5; border-radius: 6px; padding: 10px 14px; margin: 4px 0; } .tr-why-head { font-size: 12px; font-weight: 600; color: var(--text-strong); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tr-why p { margin: 0; font-size: 13px; line-height: 1.5; color: #2c3e50; } .tr-why-crit { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 9px; color: #fff; letter-spacing: 0.2px; white-space: nowrap; } .tr-why-crit-blocking { background: #c0392b; } .tr-why-crit-high_leverage { background: #d68910; } .tr-why-crit-cosmetic { background: #2e8b57; } .tr-why-crit-info { background: #5d6d7e; } /* ── Humanised sample rows ──────────────────────────────── */ .tr-samples { background: var(--card-bg-soft); border: 1px solid #e6ecf3; border-radius: 6px; padding: 8px 12px; } .tr-samples summary { cursor: pointer; font-size: 12px; color: var(--muted); font-weight: 500; margin: 0; list-style: none; outline: none; } .tr-samples summary::before { content: '▸ '; display: inline-block; transition: transform 150ms ease; font-size: 9px; color: #88a; } .tr-samples[open] summary::before { transform: rotate(90deg); } .tr-samples-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .tr-sample-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--card-bg); border: 1px solid #eef2f6; border-radius: 5px; } .tr-sample-cell { display: flex; flex-direction: column; gap: 2px; min-width: 100px; flex: 1 1 auto; } .tr-sample-k { font-size: 10px; letter-spacing: 0.3px; color: #7a8b9c; text-transform: uppercase; } .tr-sample-v { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; } .tr-sample-focus .tr-sample-k { color: #c0392b; } .tr-sample-focus .tr-sample-v { font-weight: 600; color: var(--text-strong); } .tr-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .tr-opt-sec { padding: 6px 12px; border: 1px solid var(--border); background: #f4f6f9; border-radius: 6px; font-size: 12px; cursor: pointer; color: var(--text-strong); } .tr-opt-sec:hover { background: #e8eef5; border-color: #b0c0d0; } /* ── History drawer ───────────────────────────────────── */ .tr-history { position: fixed; top: 60px; right: 0; bottom: 0; width: 380px; background: var(--card-bg); box-shadow: -8px 0 24px rgba(0, 50, 100, 0.10); border-left: 1px solid var(--border); z-index: 200; display: flex; flex-direction: column; animation: tr-history-in 200ms ease; } .tr-history.hidden { display: none; } @keyframes tr-history-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .tr-history-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); } .tr-history-header strong { font-size: 14px; color: var(--text-strong); } .tr-history-body { flex: 1; overflow: auto; padding: 12px 18px; } .tr-hist-row { padding: 10px 0; border-bottom: 1px solid #eef1f5; display: flex; flex-direction: column; gap: 4px; } .tr-hist-row code { background: #f0f3f7; padding: 1px 5px; border-radius: 3px; font-size: 11px; } .tr-hist-tag { font-size: 10px; text-transform: uppercase; padding: 1px 7px; border-radius: 9px; color: white; letter-spacing: 0.4px; } .tr-hist-tag.tag-accept { background: #2e8b57; } .tr-hist-tag.tag-auto { background: #1f7a3a; } .tr-hist-tag.tag-reject { background: #c0392b; } .tr-hist-tag.tag-other { background: #5d6d7e; } .tr-hist-revert { align-self: flex-start; font-size: 11px; padding: 3px 9px; } /* Footer in the Decision History drawer — holds the destructive reset button so it's discoverable but not next to the everyday per-decision Revert action. */ .tr-history-footer { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--card-bg-soft); } .tr-history-footer .btn { width: 100%; } .tr-btn-danger { background: #c0392b !important; border-color: #c0392b !important; color: #ffffff !important; } .tr-btn-danger:hover { background: #a93222 !important; } /* ── Snapshot history rows (share drawer styling) ─────── */ .tr-snap-row { padding: 10px 0; border-bottom: 1px solid #eef1f5; display: flex; flex-direction: column; gap: 4px; } .tr-snap-head { display: flex; gap: 10px; align-items: baseline; } .tr-snap-head strong { font-size: 13px; color: var(--text-strong); } .tr-snap-score { font-size: 18px; font-weight: 600; color: #1f7a3a; font-variant-numeric: tabular-nums; } .tr-snap-latest { font-size: 9px; padding: 2px 7px; border-radius: 9px; background: #005896; color: #fff; letter-spacing: 0.4px; text-transform: uppercase; } /* ────────────────────────────────────────────────────────── * Control Tower — portfolio view across prospects * ──────────────────────────────────────────────────────── */ #control-tower-view { /* Was capped at max-width:1400px which forced 3 cards per row even on wide monitors (1400 − 56px padding ÷ (360px card + 14px gap) ≈ 3.6 → 3 columns). Letting it stretch full-viewport lets auto-fill pack 5–7 cards per row on the Mac Studio without shrinking individual cards. */ margin: 0; padding: 24px 32px; } .ct-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; } .ct-title { margin: 0 0 4px; font-size: 24px; font-weight: 600; } .ct-header-actions { display: flex; gap: 8px; } .ct-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 18px; } .ct-legend .ct-dot { margin-right: 4px; } .ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; } .ct-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid #e5e7eb; } .ct-card { background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid #d1d5db; border-radius: 8px; padding: 14px 16px; cursor: pointer; transition: box-shadow 0.12s ease, transform 0.12s ease; display: flex; flex-direction: column; gap: 10px; } .ct-card:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .ct-card.ct-status-amber { border-left-color: #f59e0b; } .ct-card.ct-status-red { border-left-color: #ef4444; } .ct-card.ct-status-grey { border-left-color: #9ca3af; } .ct-card.ct-status-green { border-left-color: #10b981; } /* "Just created" pulse — applied for ~3s after the user creates a * new prospect so they can spot the new card after the sort settles. * The new prospect auto-pins to position 0 (active) but on a dense * screen that's not always obvious. */ @keyframes ct-card-new-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 88, 150, 0.55); } 60% { box-shadow: 0 0 0 14px rgba(0, 88, 150, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 88, 150, 0); } } .ct-card.ct-card-new { animation: ct-card-new-pulse 1.4s ease-out 2; outline: 2px solid var(--brand); outline-offset: -2px; transition: outline 0.2s ease; } .ct-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .ct-card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; min-width: 0; } .ct-card-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Scoreboard: SVG ring + the three Cs to its right. Mirrors the * triage view (.triage-ring-wrap + .triage-3c) but at card scale. */ .ct-card-scoreboard { display: flex; align-items: center; gap: 14px; padding: 6px 0 4px; } .ct-ring { flex-shrink: 0; } .ct-ring .ct-ring-track { fill: none; stroke: #e5e7eb; stroke-width: 8; } .ct-ring .ct-ring-progress { fill: none; stroke: #005896; stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.4s ease; } .ct-ring .ct-ring-pct { font-size: 18px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; fill: #111827; font-variant-numeric: tabular-nums; } .ct-ring .ct-ring-lbl { font-size: 7px; text-anchor: middle; fill: #6b7280; text-transform: uppercase; letter-spacing: 1px; } .ct-ring-stale .ct-ring-progress { stroke: #9ca3af; } .ct-ring-stale .ct-ring-pct { fill: #6b7280; } /* Tone overrides for the Control Tower rings. The shared * .ring-tone-* rules earlier in the file lose specificity battles * against the base .ct-ring .ct-ring-progress rule because the base * sits later in the stylesheet — so the ring stayed blue. Re-declaring * here, AFTER the base, with the same compound selector wins. Stale * rings keep their grey override (declared above this block, so it * still beats these). */ .ct-ring.ring-tone-good .ct-ring-progress { stroke: #10b981; } .ct-ring.ring-tone-warn .ct-ring-progress { stroke: #f59e0b; } .ct-ring.ring-tone-bad .ct-ring-progress { stroke: #ef4444; } .ct-ring.ring-tone-good .ct-ring-pct { fill: #047857; } .ct-ring.ring-tone-warn .ct-ring-pct { fill: #b45309; } .ct-ring.ring-tone-bad .ct-ring-pct { fill: #b91c1c; } /* Per-file mini-rings strip on Control Tower cards. Same logic as * the Triage view's .triage-per-file, scaled down (48px rings vs * 80px) so it fits beneath the main scoreboard without dominating * the card. */ .ct-per-file { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 0; border-top: 1px dashed #f3f4f6; margin-top: 2px; } .ct-pf { display: flex; flex-direction: column; align-items: center; gap: 1px; } .ct-pf-ring { display: block; } .ct-pf-ring .ct-ring-pct { font-size: 12px; font-weight: 600; } .ct-pf-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .ct-3c { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .ct-3c li { display: flex; justify-content: space-between; } .ct-3c-lbl { color: var(--muted); } .ct-3c-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); } /* Last-touched row pair — consultant vs prospect side by side. */ .ct-touched { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 0 4px; border-top: 1px solid #f3f4f6; } .ct-touched-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); cursor: help; } .ct-touched-icon { font-size: 12px; opacity: 0.7; } .ct-touched-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-touched-prospect .ct-touched-label { color: var(--muted); } /* Inline-rename: contenteditable name shows a subtle hover affordance, * and flashes green when a save succeeds. Pointer:text gives the * "you can edit here" hint without an icon. */ .ct-card-name { cursor: text; border-radius: 3px; padding: 1px 4px; margin-left: -4px; transition: background 0.15s ease; } .ct-card-name:hover { background: var(--card-bg-soft); } .ct-card-name:focus { background: var(--card-bg); outline: 2px solid #005896; outline-offset: 0; } .ct-card-name-saved { background: #d1fae5 !important; } /* Per-card action bar: small buttons in the bottom-right, only * visible when relevant (non-active rooms). Styled small so they * don't fight the next-action copy. */ .ct-card-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: -4px; /* Seven buttons now (Dates · Timeline · Copy link · Sales Room · * HubSpot · Set active · Delete) — narrower cards would clip the * last button off the right edge without a wrap. */ flex-wrap: wrap; } .ct-action-btn { font-size: 11px; padding: 3px 9px; border-radius: 5px; border: 1px solid #d1d5db; background: var(--card-bg); color: var(--text); cursor: pointer; } .ct-action-btn:hover { background: var(--card-bg-soft); } .ct-act-switch:hover { border-color: #005896; color: #005896; } .ct-act-delete:hover { border-color: #ef4444; color: #ef4444; } .ct-act-delete-armed, .ct-act-delete-armed:hover { background: #ef4444; color: #fff; border-color: #ef4444; } .ct-act-timeline:hover, .ct-act-link:hover { border-color: #005896; color: #005896; } /* Portal status chip — sits in the Control Tower header. Dot * colour reflects state: green=running, grey=off, red=error. */ .ct-portal-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 14px; background: var(--card-bg); color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-portal-chip:hover { background: var(--card-bg-soft); } .ct-portal-chip:disabled { opacity: 0.6; cursor: wait; } .ct-portal-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; flex-shrink: 0; } .ct-portal-on .ct-portal-dot { background: #10b981; } .ct-portal-off .ct-portal-dot { background: #9ca3af; } .ct-portal-on { border-color: #10b981; color: #047857; background: #ecfdf5; } /* Activity timeline drawer — slides in from the right of the * Control Tower view. Reads from the activity API which derives * events from the on-disk ledger + snapshots + dialect. */ .ct-drawer { position: fixed; top: 56px; /* clears the top nav */ right: 0; width: 480px; max-width: 90vw; height: calc(100vh - 56px); background: var(--card-bg); border-left: 1px solid #e5e7eb; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; z-index: 50; } .ct-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e5e7eb; } .ct-drawer-title { font-size: 14px; display: block; margin-bottom: 2px; } .ct-drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; } /* ── Critical-path drawer ─────────────────────────────────── */ .cp-milestones { list-style: none; padding: 0; margin: 0; } .cp-milestone { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; padding: 12px 14px; background: var(--card-bg); } .cp-milestone-done { background: #f0fdf4; border-color: #bbf7d0; } .cp-milestone-ready_to_signoff { background: #fffbeb; border-color: #fde68a; } .cp-milestone-blocked { background: #fef2f2; border-color: #fecaca; } .cp-mile-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 8px; flex-wrap: wrap; } .cp-mile-head strong { font-size: 14px; color: var(--text-strong); flex: 0 0 auto; } .cp-mile-date { margin-left: auto; font-size: 11px; } .cp-pill { font-size: 10px; padding: 2px 8px; border-radius: 10px; letter-spacing: .3px; text-transform: uppercase; font-weight: 600; } .cp-pill-done { background: #bbf7d0; color: #14532d; } .cp-pill-ready { background: #fde68a; color: #92400e; } .cp-pill-open { background: #e5e7eb; color: var(--text); } .cp-pill-blocked { background: #fecaca; color: #991b1b; } .cp-banner { background: #fef3c7; border-left: 3px solid #f59e0b; padding: 8px 10px; margin: 6px 0 10px 0; display: flex; justify-content: space-between; align-items: center; gap: .8rem; font-size: 12px; border-radius: 4px; } .cp-banner button { margin-left: 6px; font-size: 11px; padding: 4px 10px; } .cp-activities { list-style: none; padding: 0; margin: 6px 0; } .cp-activity { display: flex; align-items: center; gap: .5rem; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.04); font-size: 12px; } .cp-activity:last-child { border-bottom: none; } .cp-owner { display: inline-block; min-width: 64px; padding: 2px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; text-align: center; letter-spacing: .3px; text-transform: uppercase; } .cp-owner-consultant { background: #dbeafe; color: #1e3a8a; } .cp-owner-prospect { background: #fce7f3; color: #831843; } .cp-owner-joint { background: #ede9fe; color: #4c1d95; } .cp-act-label { flex: 1; color: var(--text); } .cp-act-done .cp-act-label { text-decoration: line-through; color: var(--muted); } .cp-act-blocked .cp-act-label { color: #991b1b; } .cp-act-owner, .cp-act-status { font-size: 11px; padding: 2px 4px; border-radius: 4px; border: 1px solid #d1d5db; background: var(--card-bg); } .cp-act-delete { background: transparent; border: 0; color: #9ca3af; font-size: 16px; cursor: pointer; padding: 0 4px; } .cp-act-delete:hover { color: #ef4444; } .cp-mile-foot { display: flex; gap: .5rem; margin-top: 6px; } .cp-mile-foot button { font-size: 11px; padding: 4px 10px; } [data-theme="dark"] .cp-milestone { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .cp-milestone-done { background: rgba(16, 185, 129, .08); border-color: rgba(34, 197, 94, .35); } [data-theme="dark"] .cp-milestone-ready_to_signoff { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .35); } [data-theme="dark"] .cp-milestone-blocked { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .35); } [data-theme="dark"] .cp-mile-head strong { color: #93c5fd; } [data-theme="dark"] .cp-banner { background: rgba(245, 158, 11, .12); color: var(--text); } [data-theme="dark"] .cp-act-label { color: var(--text); } [data-theme="dark"] .cp-act-owner, [data-theme="dark"] .cp-act-status { background: var(--input-bg, #1f2937); color: var(--text); border-color: var(--border); } .ct-timeline { list-style: none; padding: 0; margin: 0; } .ct-tl-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; } .ct-tl-item:last-child { border-bottom: 0; } .ct-tl-icon { font-size: 18px; text-align: center; line-height: 1.2; } .ct-tl-body { min-width: 0; } .ct-tl-line1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ct-tl-line1 strong { font-size: 13px; color: var(--text); } .ct-tl-actor { font-size: 10px; padding: 2px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; flex-shrink: 0; } .ct-tl-actor-consultant { background: #eff6ff; color: #1e40af; } .ct-tl-actor-system { background: var(--card-bg-soft); color: var(--muted); } .ct-tl-actor-prospect { background: #ecfdf5; color: #047857; } .ct-tl-detail { font-size: 12px; color: var(--muted); margin: 4px 0 2px; } .ct-tl-when { margin: 2px 0 0; font-size: 11px; } /* ────────────────────────────────────────────────────────── * Prospect-facing room page (/room/{prospect_id}). * Intentionally minimal — drop zone + readiness score + file * list. No nav, no decisions, no triage chrome. * ──────────────────────────────────────────────────────── */ .room-body { background: #f5f7fa; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; color: #1f2937; /* App-like layout: page fills the viewport, header pinned at top, main content takes the remaining height. Stops the 3-column shell from leaving dead space below the columns when the question card is short. */ display: flex; flex-direction: column; min-height: 100vh; height: 100vh; overflow: hidden; } .room-header { flex: 0 0 auto; } .room-body .room-main { flex: 1; min-height: 0; overflow: hidden; } .room-header { display: flex; align-items: center; gap: 18px; padding: 18px 32px; background: var(--card-bg); border-bottom: 1px solid #e5e7eb; } .room-logo { height: 38px; width: auto; } .room-header-text { line-height: 1.2; } .room-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--text-strong); } .room-header-text .meta { margin: 2px 0 0; font-size: 13px; color: var(--muted); } /* In-app variant of the room-header — same look as the prospect-facing Portal so the consultant's Triage / Mapping views feel like the same "room". Sits inside a view (below the app-header), so we tighten the padding a touch, add a subtle accent rule on the left, and a card-style radius so it visually reads as an identity strip rather than a second page header. */ .room-header-inapp { margin: 0 0 14px 0; padding: 14px 22px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid #003e6a; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); } .room-header-inapp .room-logo { height: 30px; } .room-header-inapp .room-title { font-size: 19px; } [data-theme="dark"] .room-header-inapp { border-left-color: #4a8fc7; } .room-main { /* Fill the viewport completely — three-column shell needs every pixel on wide monitors. No max-width cap means the columns stretch all the way out; the grid's `minmax(0, Nfr)` tracks keep their proportions sensible. */ max-width: none; margin: 0; padding: 18px 20px; } .room-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; margin-bottom: 18px; } .room-card h2, .room-card h3 { margin: 0 0 10px; color: var(--text-strong); } .room-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; } @media (max-width: 800px) { .room-grid { grid-template-columns: 1fr; } } /* ═══ Portal THREE-column shell (Slack/IDE-style) ════════════ */ /* Left: question + decision buttons (the "what am I being asked") Middle: agentic chat (the "talk it through") Right: example rows + status (the "evidence") Agent sits in the middle, mediating between question and data. minmax(0, ...) is critical to stop the samples table from forcing the right column wider than its share. */ .portal-shell { display: grid; grid-template-columns: minmax(0, 0.95fr) /* question column — narrowest, focused on decision */ minmax(0, 1.05fr) /* chat column — middle width, bubbles need breathing room */ minmax(0, 1.4fr); /* examples column — widest, data-dense */ gap: 18px; /* Fill the full viewport width on wide monitors — the three columns each have their own purpose so more horizontal space is genuinely useful (especially the examples table which can have 15+ columns). */ max-width: none; margin: 0; width: 100%; /* Fill the available viewport height (.room-main now stretches to fill what's left under the header). Each column then scrolls internally, so there's no wasted space below short cards. */ height: 100%; align-items: stretch; } /* Tablet / narrower laptop — collapse to 2 columns: question stays left (alongside chat), examples drops below them as a full-width strip so the table can still be wide. */ @media (max-width: 1200px) { .portal-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "left center" "right right"; } .portal-left { grid-area: left; } .portal-center { grid-area: center; } .portal-right { grid-area: right; } } /* Phone / very narrow — stack everything. */ @media (max-width: 800px) { .portal-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "left" "center" "right"; } } /* min-width: 0 on each child is the canonical defensive pair to the minmax(0, ...) above — lets flex content (chat bubbles, samples table) shrink below its natural content width without forcing the column track to expand. */ .portal-left, .portal-center, .portal-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; /* Each column owns its vertical space — scrolls independently so a short question card doesn't leave dead space below it just because the chat column is taller. */ min-height: 0; overflow-y: auto; padding-bottom: 8px; } .portal-left { gap: 18px; } /* Readiness chip in the page header */ .room-header { position: relative; padding-right: 110px; } .room-header-readiness { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); text-align: right; } .room-readiness-pct { font-size: 24px; font-weight: 700; color: var(--text-strong); line-height: 1; } .room-readiness-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; } [data-theme="dark"] .room-readiness-pct { color: #93c5fd; } /* ── Agent hero card (Slice A) ────────────────────────── */ .agent-card { display: flex; gap: 16px; background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid #003e6a; border-radius: 10px; padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); } .agent-avatar { width: 38px; height: 38px; border-radius: 50%; background: #003e6a; color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .agent-body { flex: 1; min-width: 0; } .agent-greeting { margin: 0 0 14px; font-size: 16px; line-height: 1.45; color: var(--text); } /* ── Agent question STACK + greeting strip ──────────────── */ .agent-greet-strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; flex: 0 0 auto; } .agent-greet-strip .agent-avatar { width: 32px; height: 32px; border-radius: 50%; background: #003e6a; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .agent-greet-strip .agent-greeting { margin: 0; font-size: 14px; line-height: 1.4; /* Let the greeting wrap inside the flex strip instead of being clipped by the column. ``min-width: 0`` overrides the default ``auto`` that keeps flex items from shrinking below their intrinsic content width; ``flex: 1 1 0`` makes the greeting consume the available space next to the avatar; and ``overflow-wrap: anywhere`` ensures long, unbroken tokens (long prospect names, URLs) can still break mid-word rather than forcing horizontal overflow. */ flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; } .agent-stack { display: flex; flex-direction: column; gap: 14px; min-height: 0; /* Stack itself doesn't scroll — the parent .portal-left column does. Keeps the scroll position stable when cards animate out. */ } .agent-question-active { box-shadow: 0 0 0 2px #003e6a, 0 1px 4px rgba(0,0,0,.06); } [data-theme="dark"] .agent-greet-strip { background: var(--card-bg); border-color: var(--border); color: var(--text); } [data-theme="dark"] .agent-question-active { box-shadow: 0 0 0 2px #4a8fc7, 0 1px 4px rgba(0,0,0,.4); } /* ── Inspector toolbar (filter input + clear) ──────────── */ .inspector-toolbar { display: flex; gap: 8px; align-items: center; padding: 6px 14px 10px; border-bottom: 1px solid #e5e7eb; } .inspector-toolbar.hidden { display: none; } .inspector-filter { flex: 1; min-width: 0; padding: 6px 10px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 6px; background: var(--card-bg); } .inspector-filter:focus { outline: none; border-color: var(--text-strong); box-shadow: 0 0 0 2px rgba(0,62,106,.1); } .inspector-clear { font-size: 11px; padding: 4px 10px; } .inspector-clear.hidden { display: none; } [data-theme="dark"] .inspector-toolbar { border-bottom-color: var(--border); } [data-theme="dark"] .inspector-filter { background: var(--card-bg); color: var(--text); border-color: var(--border); } /* ── Sortable column headers in the Examples table ────── */ .inspector-samples-table th.inspector-sortable { cursor: pointer; user-select: none; } .inspector-samples-table th.inspector-sortable:hover { background: #eef2f7; } [data-theme="dark"] .inspector-samples-table th.inspector-sortable:hover { background: rgba(255,255,255,.06); } .inspector-sort-icon { display: inline-block; margin-left: 4px; opacity: .45; font-size: 11px; } .inspector-sort-icon.active { opacity: 1; color: var(--text-strong); } [data-theme="dark"] .inspector-sort-icon.active { color: #93c5fd; } /* ── Agent question card — Triage-style ────────────────── */ /* The portal's question card now mirrors the cockpit's Triage card: tier banner up top, title + severity pill, scope subtitle, crisp question text, "Why does this matter?" callout with the criticality framing, then the option buttons. No LLM rephrase layer — consultant feedback was that the softened version lost too much signal. */ .agent-question { background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid #d1d5db; border-radius: 8px; padding: 16px 20px; margin-top: 4px; } .agent-q-tier { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 10px; } .agent-q-tier.hidden { display: none; } .agent-q-tier-icon { font-size: 14px; line-height: 1; } .agent-q-tier-blocking { background: #fee2e2; color: #991b1b; } .agent-q-tier-high { background: #fef3c7; color: #92400e; } .agent-q-tier-cosmetic { background: #d1fae5; color: #065f46; } .agent-q-tier-info { background: #e0e7ff; color: #3730a3; } /* Left accent strip echoes the tier colour */ .agent-question:has(.agent-q-tier-blocking) { border-left-color: #ef4444; } .agent-question:has(.agent-q-tier-high) { border-left-color: #f59e0b; } .agent-question:has(.agent-q-tier-cosmetic) { border-left-color: #10b981; } .agent-question:has(.agent-q-tier-info) { border-left-color: #6366f1; } .agent-q-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .agent-q-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--text); flex: 1; min-width: 0; } .agent-q-pill { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 12px; letter-spacing: .3px; white-space: nowrap; } .agent-q-pill.hidden { display: none; } .agent-q-pill-blocking { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .agent-q-pill-high { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } .agent-q-scope { margin: 0 0 14px; font-size: 12px; color: var(--muted); } .agent-q-scope.hidden { display: none; } .agent-q-text { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--text); } .agent-q-whybox { background: #eff6ff; border-left: 3px solid #3b82f6; border-radius: 4px; padding: 12px 14px; margin: 0 0 16px; } .agent-q-whybox.hidden { display: none; } .agent-q-whyhead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .agent-q-whyhead strong { color: var(--text-strong); font-size: 13px; } .agent-q-crit { display: inline-block; font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 10px; letter-spacing: .3px; white-space: normal; } .agent-q-crit.hidden { display: none; } .agent-q-crit-blocking { background: #ef4444; color: #fff; } .agent-q-crit-high { background: #f59e0b; color: #fff; } .agent-q-whytext { margin: 0; font-size: 13px; line-height: 1.5; color: #1e3a8a; } /* Dark-mode parity */ [data-theme="dark"] .agent-question { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .agent-q-title { color: var(--text); } [data-theme="dark"] .agent-q-text { color: var(--text); } [data-theme="dark"] .agent-q-whybox { background: rgba(59, 130, 246, .12); border-left-color: #60a5fa; } [data-theme="dark"] .agent-q-whyhead strong { color: #93c5fd; } [data-theme="dark"] .agent-q-whytext { color: #bfdbfe; } [data-theme="dark"] .agent-q-tier-blocking { background: rgba(239, 68, 68, .2); color: #fca5a5; } [data-theme="dark"] .agent-q-tier-high { background: rgba(245, 158, 11, .2); color: #fcd34d; } [data-theme="dark"] .agent-q-tier-cosmetic { background: rgba(16, 185, 129, .2); color: #6ee7b7; } [data-theme="dark"] .agent-q-tier-info { background: rgba(99, 102, 241, .2); color: #c7d2fe; } [data-theme="dark"] .agent-q-pill-blocking { background: rgba(239, 68, 68, .2); color: #fca5a5; border-color: rgba(239, 68, 68, .35); } [data-theme="dark"] .agent-q-pill-high { background: rgba(245, 158, 11, .2); color: #fcd34d; border-color: rgba(245, 158, 11, .35); } /* Sample rows (collapsible table mirroring the Triage Inspector) */ .agent-q-samples { margin: 8px 0 12px; } .agent-q-samples.hidden { display: none; } .agent-samples summary { cursor: pointer; font-size: 13px; color: var(--text-strong); padding: 6px 10px; background: #eaf4ff; border-radius: 6px; user-select: none; font-weight: 600; } .agent-samples summary:hover { background: #dbeafe; } .agent-samples[open] summary { margin-bottom: 8px; } .agent-samples-scroll { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); } .agent-samples-table { width: 100%; border-collapse: collapse; font-size: 12px; } .agent-samples-table th, .agent-samples-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #f3f4f6; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .agent-samples-table thead th { position: sticky; top: 0; background: var(--card-bg-soft); font-weight: 600; color: var(--text-strong); border-bottom: 1px solid #d1d5db; } .agent-samples-table tbody tr:hover { background: var(--card-bg-soft); } .agent-samples-more { padding: 6px 10px; margin: 0; font-size: 11px; background: var(--card-bg-soft); border-top: 1px solid #f3f4f6; } [data-theme="dark"] .agent-question-scope { background: rgba(255, 255, 255, .05); color: var(--text-muted); } [data-theme="dark"] .agent-samples summary { background: rgba(74, 143, 199, .2); color: #93c5fd; } [data-theme="dark"] .agent-samples summary:hover { background: rgba(74, 143, 199, .3); } [data-theme="dark"] .agent-samples-scroll { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .agent-samples-table thead th { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-bottom-color: var(--border); color: #93c5fd; } [data-theme="dark"] .agent-samples-table tbody tr:hover { background: rgba(255, 255, 255, .03); } [data-theme="dark"] .agent-samples-table td { color: var(--text); } [data-theme="dark"] .agent-samples-table th, [data-theme="dark"] .agent-samples-table td { border-bottom-color: var(--border); } [data-theme="dark"] .agent-samples-more { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-top-color: var(--border); } .agent-options { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 8px; } .agent-option { text-align: left; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 8px; background: var(--card-bg); cursor: pointer; font: inherit; transition: border-color .12s, background .12s; width: 100%; } .agent-option:hover:not([disabled]) { border-color: var(--text-strong); background: #f0f7ff; } .agent-option[data-primary="1"] { border-color: var(--text-strong); background: #eaf4ff; } .agent-option:disabled { opacity: .55; cursor: wait; } .agent-option-loading { position: relative; } .agent-option-loading::after { content: '…'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .agent-option-label { display: block; font-weight: 600; color: var(--text); } .agent-option-desc { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; } .agent-q-hint { margin: 12px 0 0; font-size: 11px; color: var(--muted); font-style: italic; } .agent-empty { margin-top: 8px; } .room-drop-inline { margin: 0; } /* ── Curation card (transaction_type_curation) ─────────────── Per-type checkbox list, mirroring the cockpit Triage card so the prospect sees the same UX the consultant does for this card shape. The list lives in the card body where the generic .agent-options would normally sit; the Apply button below uses the standard .agent-option styling so it looks like a primary action. */ .agent-type-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; max-height: 380px; overflow-y: auto; /* Subtle inner-scroll hint so the prospect knows there's more when the list overflows. No big "scroll arrow" — keep it quiet. */ } .agent-type-row { /* Six columns — Include checkbox · Flip-sign checkbox · Type name · Rows · Total qty · Signs badge. Matches the cockpit Triage curation grid so the prospect sees the same affordances. */ display: grid; grid-template-columns: 56px 70px minmax(0, 1fr) 70px 80px auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border, #e6ecf3); border-radius: 6px; cursor: pointer; background: var(--bg-soft, #fff); transition: background 120ms ease, border-color 120ms ease; user-select: none; } .agent-type-row:hover { background: var(--bg-hover, #f7f9fb); } .agent-type-row.agent-type-included { background: #e6f5ec; border-color: #b8dfc4; } .agent-type-row.agent-type-excluded { background: #fbeeec; border-color: #e6c5c0; opacity: 0.78; } .agent-type-row.agent-type-flipped { /* Subtle amber edge — visible without overpowering the green/red include/exclude states. Stacks with .agent-type-included. */ border-color: #d8a437; box-shadow: inset 0 0 0 1px #d8a437; } .agent-type-header { background: transparent; border: none; padding: 2px 12px; cursor: default; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted, #4a5b6c); } .agent-type-header:hover { background: transparent; } .agent-type-include-h, .agent-type-flip-h { text-align: center; } .agent-type-rows-h, .agent-type-qty-h { text-align: right; } .agent-type-check, .agent-type-flip-check { margin: 0; cursor: pointer; justify-self: center; } .agent-type-flip-check:disabled { cursor: not-allowed; opacity: 0.4; } .agent-type-name { font-weight: 600; font-size: 13px; color: var(--text-strong, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agent-type-rows, .agent-type-qty { font-size: 12px; color: var(--text-muted, #4a5b6c); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .agent-type-flag { font-size: 10px; letter-spacing: 0.2px; white-space: nowrap; } .agent-type-mixed { display: inline-block; padding: 1px 6px; border-radius: 999px; background: #fff3cd; border: 1px solid #e0c674; color: #6b5210; font-size: 10px; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; } /* Curation Apply lives in the same .agent-options column but we strip the column-gap to make the row feel like a single CTA. */ .agent-options-curation { margin-top: 10px; } .agent-option-primary { border-color: var(--text-strong); background: #eaf4ff; } [data-theme="dark"] .agent-type-row { background: var(--surface, #1f2937); border-color: var(--border, #374151); } [data-theme="dark"] .agent-type-row:hover { background: var(--surface-2, #273141); } [data-theme="dark"] .agent-type-row.agent-type-included { background: #14342a; border-color: #2e6a4d; } [data-theme="dark"] .agent-type-row.agent-type-excluded { background: #3a1f1c; border-color: #7a3b34; } [data-theme="dark"] .agent-type-row.agent-type-flipped { border-color: #b8862a; box-shadow: inset 0 0 0 1px #b8862a; } [data-theme="dark"] .agent-type-header { color: var(--text-muted, #9ca3af); } [data-theme="dark"] .agent-type-mixed { background: #3a2e10; border-color: #806122; color: #f0d57a; } [data-theme="dark"] .agent-option-primary { border-color: #7aa6d1; background: #1c2e44; } /* ═══ Chat shell (WhatsApp / Telegram feel) ════════════════ */ .chat-shell { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; /* No max-height — the shell flows naturally with the page; the INNER bubble list has its own max-height + scroll so long threads don't push the compose box off screen. Dropping overflow:hidden here is also what unblocks wheel events from reaching the bubble container's scroll. */ } .chat-header { display: flex; align-items: center; /* center so the button doesn't dip below baseline */ gap: 10px; padding: 12px 18px; border-bottom: 1px solid #e5e7eb; background: var(--card-bg-soft); } .chat-title { font-size: 13px; font-weight: 600; color: var(--text-strong); } /* Spacer between the title and the Clear chat button — used to be * the keyboard-hint span (.chat-sub) doing the flex:1 push, but the * hint visually collided with the title and read like one long * cluttered phrase. Moved the hint to below the textarea (where the * keys are actually pressed) and left this empty spacer behind. */ .chat-header-spacer { flex: 1; } /* Keyboard-hint line under the chat textarea. Subtle 11px caption * with the keys rendered as small chips so the visual hierarchy * reads as "shortcut reference", not "header text". */ .chat-keyhint { margin: 4px 14px 0; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .chat-keyhint kbd { font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; padding: 1px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--card-bg); color: var(--text); white-space: nowrap; } [data-theme="dark"] .chat-keyhint kbd { background: var(--card-bg-soft); border-color: rgba(255, 255, 255, 0.15); } .chat-clear { font-size: 11px; padding: 4px 10px; border-radius: 999px; /* pill shape — subtle, non-destructive feel */ white-space: nowrap; } .chat-clear:hover { background: #fee2e2; /* light red on hover — flags the destructive intent without alarming on idle */ color: #991b1b; border-color: #fca5a5; } .chat-clear:disabled { opacity: 0.6; cursor: wait; } [data-theme="dark"] .chat-clear:hover { background: #3a1f1c; color: #fca5a5; border-color: #7a3b34; } .chat-bubbles { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; /* Self-contained scroll: bubbles get their own scrollbar so the compose box pinned below stays visible. In the 3-column layout the chat is the centre column and benefits from a taller surface — give it most of the viewport when there's content. */ overflow-y: auto; min-height: 320px; max-height: calc(100vh - 280px); background: linear-gradient(180deg, #f9fafb 0%, #fff 100%); } .chat-empty { align-self: center; padding: 24px 0; text-align: center; } .chat-day { align-self: center; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; background: rgba(0, 0, 0, .04); padding: 3px 10px; border-radius: 10px; margin: 10px 0 4px; } /* Bubble — base */ .bubble { max-width: 78%; padding: 8px 12px 7px; border-radius: 16px; font-size: 13px; line-height: 1.4; word-wrap: break-word; position: relative; } .bubble-time { display: block; font-size: 10px; margin-top: 3px; opacity: .65; } .bubble-agent { align-self: flex-start; background: #f0f0f0; color: var(--text); border-bottom-left-radius: 4px; } .bubble-prospect { align-self: flex-end; background: #003e6a; color: #fff; border-bottom-right-radius: 4px; } .bubble-prospect .bubble-time { color: rgba(255,255,255,.7); } /* Burst-grouping: tighter spacing + flatter corners when adjacent bubbles share the same speaker. */ .bubble.bubble-continue.bubble-agent { border-top-left-radius: 6px; } .bubble.bubble-continue.bubble-prospect { border-top-right-radius: 6px; } /* Kind-specific accents (uploads, confirmations) */ .bubble-upload { font-style: italic; background: #fef3c7; color: #78350f; align-self: center; max-width: 60%; text-align: center; border-radius: 12px !important; font-size: 12px; } .bubble-confirmation { background: #d1fae5; color: #065f46; } .chat-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px; border-top: 1px solid #e5e7eb; background: var(--card-bg); } .chat-compose textarea { flex: 1; resize: none; border: 1px solid #d1d5db; border-radius: 14px; padding: 11px 16px; font: inherit; font-size: 14px; line-height: 1.5; background: var(--card-bg); min-height: 64px; max-height: 220px; } .chat-compose textarea:focus { outline: none; border-color: var(--text-strong); box-shadow: 0 0 0 2px rgba(0,62,106,.1); } .chat-send { flex: 0 0 auto; padding: 7px 18px; font-size: 13px; border-radius: 18px; } .chat-send:disabled { opacity: .4; cursor: not-allowed; } .chat-disclaimer { font-size: 11px; font-style: italic; padding: 0 18px 12px; margin: 0; color: var(--muted); background: var(--card-bg); border-top: 1px solid transparent; } /* ═══ Inspector pane (right column) ════════════════════════ */ .inspector-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .inspector-head { padding: 12px 16px 6px; display: flex; align-items: baseline; gap: 8px; /* Removed justify-content: space-between — when the panel is wide * the count ("200 rows") was thrown to the far right, leaving a * canyon of empty space between it and the title. Now title and * count sit naturally next to each other with a separator dot. */ } .inspector-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-strong); text-transform: uppercase; letter-spacing: .4px; } .inspector-sub { font-size: 11px; color: var(--muted); } /* Bullet-dot separator between the title and the sub — same * visual idiom as the Control Tower summary line. Pseudo-element * so it's purely presentational + survives any DOM reshuffles. */ .inspector-title + .inspector-sub::before { content: "·"; margin-right: 6px; color: var(--border); font-weight: 600; } .inspector-body { padding: 0 16px 14px; } .inspector-empty { padding: 30px 0; text-align: center; } .inspector-files-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin: 14px 0 4px; } .inspector-why-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); } /* Samples table — re-skinned for the inspector pane (was the collapsible inside the question card). Full-height, sticky head. */ .inspector-samples-body { padding: 0; border-top: 1px solid #e5e7eb; /* Critical pairing with minmax(0, ...) on the parent grid track: the body MUST clip its overflow horizontally so its child `.inspector-samples-scroll` is the thing that scrolls. */ overflow: hidden; } .inspector-samples-scroll { max-height: 560px; overflow: auto; /* Keep the scroll container within its parent so the column can't be forced wider by the table's natural width. */ width: 100%; } .inspector-samples-table { width: 100%; border-collapse: collapse; font-size: 12px; } .inspector-samples-table th, .inspector-samples-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #f3f4f6; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .inspector-samples-table thead th { position: sticky; top: 0; background: var(--card-bg-soft); font-weight: 600; color: var(--text-strong); border-bottom: 1px solid #d1d5db; } .inspector-samples-table tbody tr:hover { background: var(--card-bg-soft); } .inspector-samples-footer { padding: 8px 16px; font-size: 11px; color: var(--muted); border-top: 1px solid #f3f4f6; background: #fafafa; } /* Dark mode for the new chat + inspector */ [data-theme="dark"] .chat-shell, [data-theme="dark"] .inspector-card { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .chat-header, [data-theme="dark"] .chat-compose, [data-theme="dark"] .chat-disclaimer { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .chat-disclaimer { color: var(--text-muted); } [data-theme="dark"] .chat-title { color: #93c5fd; } [data-theme="dark"] .chat-bubbles { background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, var(--card-bg) 100%); } [data-theme="dark"] .bubble-agent { background: rgba(255, 255, 255, .08); color: var(--text); } [data-theme="dark"] .bubble-prospect { background: #4a8fc7; color: #fff; } [data-theme="dark"] .bubble-upload { background: rgba(245, 158, 11, .15); color: #fde68a; } [data-theme="dark"] .bubble-confirmation { background: rgba(16, 185, 129, .15); color: #6ee7b7; } [data-theme="dark"] .chat-compose textarea { background: var(--card-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .chat-day { background: rgba(255, 255, 255, .06); color: var(--text-muted); } [data-theme="dark"] .inspector-title { color: #93c5fd; } [data-theme="dark"] .inspector-why-text { color: var(--text); } [data-theme="dark"] .inspector-samples-body { border-top-color: var(--border); } [data-theme="dark"] .inspector-samples-table thead th { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-bottom-color: var(--border); color: #93c5fd; } [data-theme="dark"] .inspector-samples-table tbody tr:hover { background: rgba(255, 255, 255, .03); } [data-theme="dark"] .inspector-samples-table td { color: var(--text); } [data-theme="dark"] .inspector-samples-table th, [data-theme="dark"] .inspector-samples-table td { border-bottom-color: var(--border); } [data-theme="dark"] .inspector-samples-footer { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-top-color: var(--border); color: var(--text-muted); } /* Dark-mode parity */ [data-theme="dark"] .agent-card, [data-theme="dark"] .room-thread { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .agent-card { border-left-color: #4a8fc7; } [data-theme="dark"] .agent-greeting, [data-theme="dark"] .thread-content { color: var(--text); } [data-theme="dark"] .agent-question { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-color: var(--border); } [data-theme="dark"] .agent-question-text { color: #93c5fd; } [data-theme="dark"] .agent-option { background: var(--card-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .agent-option-label { color: var(--text); } [data-theme="dark"] .agent-option:hover:not([disabled]) { background: rgba(74, 143, 199, .15); border-color: #4a8fc7; } [data-theme="dark"] .agent-option[data-primary="1"] { background: rgba(74, 143, 199, .18); border-color: #4a8fc7; } [data-theme="dark"] .agent-ask-form textarea { background: var(--card-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .thread-icon { background: rgba(255,255,255,.06); } [data-theme="dark"] .thread-prospect .thread-icon { background: rgba(99,102,241,.2); color: #c7d2fe; } [data-theme="dark"] .thread-agent .thread-icon { background: rgba(168,85,247,.2); color: #e9d5ff; } [data-theme="dark"] .thread-role { color: #93c5fd; } /* Drop zone */ .room-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 32px; border: 2px dashed #cbd5e1; background: #fbfdff; min-height: 240px; transition: border-color 0.15s ease, background 0.15s ease; } .room-drop-hot { border-color: #005896 !important; background: #eff6ff !important; } .room-drop-icon { font-size: 48px; margin-bottom: 8px; } .room-drop-title { font-size: 18px; color: var(--text-strong); margin-bottom: 6px; } .room-drop-hint { margin-top: 12px; max-width: 480px; } .room-drop a { color: #005896; font-weight: 500; } .room-drop-progress { list-style: none; padding: 0; margin: 18px 0 0; width: 100%; max-width: 480px; text-align: left; } .room-progress-row { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: var(--card-bg); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; } .room-progress-ok { border-color: #10b981; background: #ecfdf5; } .room-progress-error { border-color: #ef4444; background: #fef2f2; color: #991b1b; } /* Score panel */ .room-score { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; } .room-score-pct { font-size: 34px; font-weight: 700; color: #005896; font-variant-numeric: tabular-nums; } /* Files list */ .room-files { list-style: none; padding: 0; margin: 0; } .room-file { padding: 8px 0; border-bottom: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; } .room-file:last-child { border-bottom: 0; } .room-privacy { background: var(--card-bg-soft); } .room-locked p { margin: 0 0 8px; } /* Auto-ingest toast — bottom-right, slides up + fades after 4s. * Used by Manual Mapping when files dropped via the portal get * auto-loaded into the session. */ .mb-toast { position: fixed; bottom: 20px; right: 20px; padding: 10px 16px; background: #003e6a; color: #fff; border-radius: 6px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); z-index: 200; opacity: 0; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; max-width: 480px; } .mb-toast.mb-toast-visible { opacity: 1; transform: translateY(0); } .mb-toast.mb-toast-warn { background: #b45309; } /* AI-suggestion badge on Triage cards — visually distinct so the * consultant always knows the finding came from the LLM, not a * hard-coded rule. Subtle violet to differentiate from the * blue/green/amber tier colours already in play. */ .tr-card-ai { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; background: #ede9fe; color: #5b21b6; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; border: 1px solid #ddd6fe; } /* The whole card gets a faint violet accent on the left rule so * AI-sourced cards stand out in a long stack. Compound selector * outranks the tier-coloured border (.tr-tier-*) — AI provenance * takes priority over the tier colour for at-a-glance scanning. */ .tr-card.tr-card-ai-source { border-left: 4px solid #8b5cf6; } .ct-active-pill { font-size: 9px; padding: 2px 7px; border-radius: 9px; background: #005896; color: #fff; letter-spacing: 0.4px; text-transform: uppercase; } /* ── HubSpot deal chip on the CT card ─────────────────────── */ .ct-hubspot-chip { margin: 8px 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid #fde68a; background: #fffbeb; font-size: 12px; } .ct-hubspot-name { font-weight: 600; color: #92400e; margin-bottom: 2px; } .ct-hubspot-meta { color: #78350f; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: 11px; } [data-theme="dark"] .ct-hubspot-chip { background: rgba(146, 64, 14, 0.18); border-color: rgba(253, 230, 138, 0.35); } [data-theme="dark"] .ct-hubspot-name { color: #fde68a; } [data-theme="dark"] .ct-hubspot-meta { color: #fcd34d; } /* Picker modal */ .hs-picker-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 9000; } .hs-picker-overlay.hidden { display: none; } .hs-picker-panel { background: var(--card-bg); width: min(700px, 90vw); max-height: 80vh; border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .hs-picker-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #e5e7eb; } .hs-picker-body { padding: 14px 18px; overflow-y: auto; flex: 1 1 auto; } .hs-picker-body input[type="search"] { width: 100%; margin-bottom: 8px; } .hs-picker-results { list-style: none; padding: 0; margin: 8px 0 0 0; } .hs-picker-row { padding: 10px 12px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; } .hs-picker-row:hover { background: var(--card-bg-soft); border-color: #d1d5db; } .hs-picker-name { font-weight: 600; color: var(--text-strong); font-size: 13px; } .hs-picker-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } [data-theme="dark"] .hs-picker-panel { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); } [data-theme="dark"] .hs-picker-head { border-bottom-color: var(--border); } [data-theme="dark"] .hs-picker-row:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--border); } [data-theme="dark"] .hs-picker-name { color: #93c5fd; } [data-theme="dark"] .hs-picker-meta { color: var(--text-muted); } .ct-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; vertical-align: middle; } .ct-dot-amber { background: #f59e0b; } .ct-dot-red { background: #ef4444; } .ct-dot-grey { background: #9ca3af; } .ct-dot-green { background: #10b981; } .ct-stage-strip { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0; margin: 4px 0 0; } .ct-stage-strip li { height: 4px; background: #e5e7eb; border-radius: 2px; position: relative; font-size: 0; /* hides the label visually, keeps for a11y/tooltip */ } .ct-stage-strip .ct-step-done { background: #005896; } .ct-stage-strip .ct-step-current { background: #0ea5e9; } /* "ready to sign off" — same position as current but amber-tinted so the consultant's eye is drawn to it. The Confirm button lives in the per-room critical-path detail page. */ .ct-stage-strip .ct-step-ready { background: #f59e0b; } /* todo stays default grey */ /* ── 3 date chips on the CT card ─────────────────────────── */ .ct-dates-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 12px 6px 12px; } .ct-date-chip { border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px; padding: 5px 7px; font-size: 11px; background: var(--card-bg); min-width: 0; } .ct-date-label { display: block; font-weight: 600; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .3px; } .ct-date-when { display: block; color: var(--text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-date-when strong { color: #b91c1c; } .ct-date-empty { color: #9ca3af; font-style: italic; } /* Status accents — left border colour drives the alert level */ .ct-date-met { border-left-color: #10b981; } .ct-date-upcoming { border-left-color: #3b82f6; } .ct-date-approaching { border-left-color: #f59e0b; background: #fffbeb; } .ct-date-missed { border-left-color: #ef4444; background: #fef2f2; } .ct-date-unset { border-left-color: #d1d5db; } [data-theme="dark"] .ct-date-chip { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .ct-date-when { color: var(--text); } [data-theme="dark"] .ct-date-when strong { color: #fca5a5; } [data-theme="dark"] .ct-date-approaching { background: rgba(245, 158, 11, .08); } [data-theme="dark"] .ct-date-missed { background: rgba(239, 68, 68, .08); } /* ── Dates drawer (per-room editor) ───────────────────── */ .cp-dates-editor { padding: 4px 2px; } .cp-date-row { display: flex; align-items: center; gap: .6rem; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px; background: var(--card-bg); } .cp-date-row-met { border-left-color: #10b981; } .cp-date-row-upcoming { border-left-color: #3b82f6; } .cp-date-row-approaching { border-left-color: #f59e0b; background: #fffbeb; } .cp-date-row-missed { border-left-color: #ef4444; background: #fef2f2; } .cp-date-row-unset { border-left-color: #d1d5db; } .cp-date-name { min-width: 80px; font-weight: 600; color: var(--text-strong); font-size: 13px; } .cp-date-row input[type="date"] { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; background: var(--card-bg); } .cp-date-hint { font-size: 11px; color: var(--muted); margin-left: 4px; } .cp-date-auto { font-size: 10px; padding: 2px 6px; border-radius: 8px; background: #e0e7ff; color: #3730a3; letter-spacing: .3px; text-transform: uppercase; font-weight: 600; } .cp-clear { font-size: 11px; padding: 3px 8px; margin-left: auto; } /* ── Offset row (weeks input) for Data + Build in the drawer ───── */ .cp-offset-row { display: flex; align-items: center; gap: .6rem; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px; background: var(--card-bg); flex-wrap: wrap; } .cp-offset-row input[type="number"] { width: 60px; padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; text-align: right; background: var(--card-bg); } .cp-offset-unit { font-size: 12px; color: var(--muted); } .cp-offset-derived { margin-left: auto; font-size: 12px; color: var(--muted); } .cp-offset-derived strong { color: var(--text-strong); } [data-theme="dark"] .cp-offset-row { background: var(--card-bg); border-color: var(--border); color: var(--text); } [data-theme="dark"] .cp-offset-row input[type="number"] { background: var(--card-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .cp-offset-unit { color: var(--text-muted); } [data-theme="dark"] .cp-offset-derived strong { color: #93c5fd; } /* ── DB slot row in the drawer ───────────────────────────── */ .cp-dbslot-row { display: flex; align-items: center; gap: .6rem; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); flex-wrap: wrap; } .cp-dbslot-select { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; background: var(--card-bg); min-width: 220px; } .cp-dbslot-hint { flex: 1; min-width: 200px; font-size: 11px; } [data-theme="dark"] .cp-dbslot-row { background: var(--card-bg); border-color: var(--border); color: var(--text); } [data-theme="dark"] .cp-dbslot-select { background: var(--card-bg); color: var(--text); border-color: var(--border); } /* ── Tailscale Funnel command block (Settings) ──────────── */ .ts-cmd-block { margin-top: .8rem; padding: .8rem 1rem; background: var(--card-bg-soft); border: 1px solid var(--border); border-radius: 6px; } .ts-cmd-label { font-size: 12px; color: var(--muted); line-height: 1.5; } .ts-cmd-label code { background: var(--card-bg); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); font-size: 11px; } .ts-cmd-row { display: flex; gap: .5rem; align-items: center; margin-top: .35rem; } .ts-cmd-code { flex: 1; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; background: #1f2937; color: #f9fafb; padding: 7px 10px; border-radius: 4px; overflow-x: auto; white-space: nowrap; user-select: all; /* ⌘C-friendly when Copy button fails */ } .ts-cmd-copy { font-size: 12px; padding: 5px 12px; white-space: nowrap; } [data-theme="dark"] .ts-cmd-block { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-color: var(--border); } [data-theme="dark"] .ts-cmd-label code { background: var(--card-bg); border-color: var(--border); color: var(--text); } /* ── DB slot pill on the Control Tower card ──────────────── */ .ct-dbslot-pill { font-size: 9px; padding: 2px 7px; border-radius: 9px; background: #4c1d95; color: #fff; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; margin-left: 4px; } [data-theme="dark"] .ct-dbslot-pill { background: rgba(168, 85, 247, .35); color: #e9d5ff; } /* ── ERP pill — same shape as the DB-slot pill but in Slimstock navy so it reads as a separate dimension at a glance ────────── */ .ct-erp-pill { font-size: 9px; padding: 2px 7px; border-radius: 9px; background: #1a3a6e; color: #fff; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; margin-left: 4px; } [data-theme="dark"] .ct-erp-pill { background: rgba(122, 166, 209, .35); color: #cfe1f6; } /* Highlight the currently-selected cookbook tile inside the picker. */ .dpg-cookbook-active { border-color: var(--accent, #1a3a6e) !important; box-shadow: inset 0 0 0 1px var(--accent, #1a3a6e); } /* ════════ Learned Checks — modal + settings pane ════════════ */ .lc-modal-backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; } .lc-modal-card { width: min(960px, 100%); max-height: 90vh; overflow: auto; background: var(--card-bg, #fff); border-radius: 12px; box-shadow: 0 25px 60px rgba(0,0,0,0.35); padding: 1.4rem 1.6rem; } [data-theme="dark"] .lc-modal-card { background: #1f2937; color: #e5e7eb; } .lc-modal-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border, #e6ecf3); padding-bottom: 0.8rem; margin-bottom: 1rem; } .lc-modal-head h2 { margin: 0; color: var(--accent, #1a3a6e); font-size: 1.3rem; } .lc-modal-close { border: none; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--muted, #4a5b6c); padding: 4px 8px; } .lc-modal-close:hover { color: var(--text-strong, #1a1a1a); } .lc-modal-intro { margin: 0 0 1rem; } .lc-modal-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; } @media (max-width: 760px) { .lc-modal-grid { grid-template-columns: 1fr; } } .lc-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0.8rem; } .lc-field > span { font-size: 12px; font-weight: 600; color: var(--text-strong, #1a1a1a); } [data-theme="dark"] .lc-field > span { color: #f3f4f6; } .lc-field input[type="text"], .lc-field input[type="number"], .lc-field textarea, .lc-field select { padding: 6px 10px; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; font-size: 13px; background: var(--card-bg, #fff); color: var(--text, #1a1a1a); font-family: inherit; } .lc-field textarea { font-family: ui-monospace, Menlo, monospace; resize: vertical; } [data-theme="dark"] .lc-field input[type="text"], [data-theme="dark"] .lc-field input[type="number"], [data-theme="dark"] .lc-field textarea, [data-theme="dark"] .lc-field select { background: #111827; border-color: #374151; color: #e5e7eb; } .lc-field-row { display: flex; gap: 0.8rem; } .lc-field-row .lc-field { flex: 1; } .lc-body-editor { background: var(--card-bg-soft, #f8fafc); border-radius: 8px; padding: 0.8rem; margin-bottom: 0.8rem; } [data-theme="dark"] .lc-body-editor { background: #0f172a; } .lc-modal-right h3 { font-size: 0.95rem; margin: 0 0 4px; color: var(--accent, #1a3a6e); } .lc-source-row { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; background: var(--card-bg-soft, #f8fafc); border: 1px solid var(--border, #e6ecf3); border-radius: 6px; padding: 8px; } [data-theme="dark"] .lc-source-row { background: #0f172a; border-color: #374151; } .lc-source-cell { display: grid; grid-template-columns: 100px 1fr; gap: 6px; font-size: 12px; } .lc-source-cell .lc-source-k { color: var(--muted, #4a5b6c); font-weight: 600; } .lc-source-cell .lc-source-v { color: var(--text, #1a1a1a); font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; } [data-theme="dark"] .lc-source-cell .lc-source-v { color: #e5e7eb; } .lc-source-focus { background: #fff3cd; padding: 4px 6px; border-radius: 4px; } [data-theme="dark"] .lc-source-focus { background: #3a2e10; } .lc-test-result { margin-top: 8px; font-size: 13px; } .lc-test-summary { margin: 8px 0; } .lc-test-error { color: #b91c1c; } .lc-test-samples { margin-top: 6px; } .lc-test-sample { background: var(--card-bg-soft, #f8fafc); border-radius: 4px; padding: 4px 6px; margin-bottom: 4px; font-size: 11px; display: flex; flex-wrap: wrap; gap: 6px; } [data-theme="dark"] .lc-test-sample { background: #1e293b; } .lc-test-cell { white-space: nowrap; } .lc-modal-foot { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border, #e6ecf3); padding-top: 0.8rem; margin-top: 1rem; } [data-theme="dark"] .lc-modal-foot { border-color: #374151; } /* ── Settings management pane ──────────────────────────────── */ .lc-mgmt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; } .lc-mgmt-head h3 { margin: 0; } .lc-list { margin: 1rem 0; } .lc-list h4 { margin: 0 0 8px; font-size: 0.9rem; color: var(--accent, #1a3a6e); text-transform: uppercase; letter-spacing: 0.4px; } .lc-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px; border: 1px solid var(--border, #e6ecf3); border-radius: 8px; margin-bottom: 8px; background: var(--card-bg, #fff); } [data-theme="dark"] .lc-row { background: #1f2937; border-color: #374151; } .lc-row-snoozed { opacity: 0.6; } .lc-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lc-row-meta { font-size: 11px; margin-top: 2px; } .lc-row-desc { margin: 6px 0; font-size: 13px; } .lc-row-body { background: var(--card-bg-soft, #f8fafc); border-radius: 4px; padding: 6px 8px; font-size: 11px; margin: 4px 0 0; max-height: 100px; overflow: auto; } [data-theme="dark"] .lc-row-body { background: #0f172a; color: #cbd5e1; } .lc-row-actions { display: flex; flex-direction: column; gap: 4px; } .lc-pill { font-size: 10px; padding: 1px 8px; border-radius: 999px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; } .lc-pill-critical { background: #fee2e2; color: #991b1b; } .lc-pill-warning { background: #fef3c7; color: #92400e; } .lc-pill-info { background: #e0f2fe; color: #0369a1; } .lc-pill-snoozed { background: #f3f4f6; color: #4b5563; } [data-theme="dark"] .lc-pill-critical { background: #5b1a1a; color: #fca5a5; } [data-theme="dark"] .lc-pill-warning { background: #59320f; color: #fcd34d; } [data-theme="dark"] .lc-pill-info { background: #0c4a6e; color: #bae6fd; } [data-theme="dark"] .lc-pill-snoozed { background: #374151; color: #9ca3af; } /* Anomaly suggestions */ .lc-anomaly-tray { margin-top: 1.2rem; } .lc-sug { border: 1px solid var(--border, #e6ecf3); border-left: 3px solid var(--accent, #1a3a6e); border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; background: var(--card-bg-soft, #f8fafc); } [data-theme="dark"] .lc-sug { background: #1f2937; border-color: #374151; border-left-color: #7aa6d1; } .lc-sug-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lc-sug-desc { margin: 6px 0; } .lc-sug-actions { display: flex; gap: 8px; margin-top: 6px; } /* Triage Inspector — per-row Flag button */ .tr-flag-cell { padding: 0 4px; vertical-align: middle; } .tr-flag-btn { border: none; background: transparent; cursor: pointer; font-size: 14px; opacity: 0.4; padding: 2px 6px; border-radius: 4px; transition: opacity 120ms ease; } .tr-flag-btn:hover { opacity: 1; background: var(--card-bg-soft, #f8fafc); } [data-theme="dark"] .tr-flag-btn:hover { background: #1e293b; } [data-theme="dark"] .cp-date-row { background: var(--card-bg); border-color: var(--border); color: var(--text); } [data-theme="dark"] .cp-date-row-approaching { background: rgba(245, 158, 11, .08); } [data-theme="dark"] .cp-date-row-missed { background: rgba(239, 68, 68, .08); } [data-theme="dark"] .cp-date-name { color: #93c5fd; } [data-theme="dark"] .cp-date-row input[type="date"] { background: var(--card-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .cp-date-auto { background: rgba(99, 102, 241, .2); color: #c7d2fe; } .ct-card-body { flex: 1; } .ct-next-action { margin: 0 0 4px; font-size: 13px; color: var(--text); } .ct-last { margin: 0; font-size: 11px; color: var(--muted); } .ct-card-footer { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid #f3f4f6; } .ct-badge { font-size: 10px; padding: 3px 7px; border-radius: 9px; background: var(--card-bg-soft); color: var(--muted); font-variant-numeric: tabular-nums; } .ct-badge-blocking { background: #fee2e2; color: #991b1b; } .ct-badge-high { background: #fef3c7; color: #92400e; } .ct-badge-network { background: #eff6ff; color: #1e40af; } .ct-empty { grid-column: 1 / -1; padding: 40px 24px; text-align: center; background: #fafafa; border: 1px dashed #d1d5db; border-radius: 8px; } .ct-empty p { margin: 0 0 8px; } .ct-empty a { color: #005896; } /* ────────────────────────────────────────────────────────── * Network view — its own top-level tab. Topology classification * + a node-link map + a sorted list of suggested supply / transfer * relationships. Promoted out of Triage so a 1-warehouse prospect * doesn't pay for it. * ──────────────────────────────────────────────────────── */ #network-view { max-width: 1400px; margin: 0 auto; padding: 24px 28px; } .nw-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; } .nw-title { margin: 0 0 4px; font-size: 24px; font-weight: 600; } .nw-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; } .nw-map-wrap { background: var(--card-bg); border: 1px solid #e6edf5; border-radius: 8px; padding: 12px; } .nw-map { display: block; } .nw-side { min-width: 0; } .nw-counts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .nw-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: #eff6ff; border: 1px solid #cfe1f3; border-radius: 14px; font-size: 13px; } .nw-chip-label { color: #1f2937; font-weight: 500; } .nw-chip-val { font-weight: 700; color: #005896; font-variant-numeric: tabular-nums; } .nw-edges-head { margin: 4px 0 8px; font-size: 12px; font-weight: 600; color: #1f2937; text-transform: uppercase; letter-spacing: 0.4px; } .nw-edges { list-style: none; padding: 0; margin: 0 0 12px; max-height: 360px; overflow-y: auto; } .nw-edges li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; } .nw-edges li:last-child { border-bottom: 0; } .nw-edge-from, .nw-edge-to { font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; } .nw-edge-arrow { font-size: 16px; color: var(--muted); } .nw-edge-supply .nw-edge-arrow { color: #005896; } .nw-edge-transfer .nw-edge-arrow { color: #10b981; } .nw-edge-meta { margin-left: auto; font-size: 11px; color: var(--muted); } /* ────────────────────────────────────────────────────────── * DARK MODE — layered overrides * * Rather than refactor every hardcoded colour in the 2700-line * stylesheet, we flip the most prominent surfaces here. The * effect: cards, panels, headers, drop-zones go dark; brand * colours + tier dots + score-tone colours stay intact (they * carry semantic meaning, not just style). * * Triggered by set from Settings. * ──────────────────────────────────────────────────────── */ [data-theme="dark"] body, [data-theme="dark"] .room-body { background: var(--bg); color: var(--text); } [data-theme="dark"] .app-header, [data-theme="dark"] .card, [data-theme="dark"] .settings-card, [data-theme="dark"] .ct-card, [data-theme="dark"] .nw-map-wrap, [data-theme="dark"] .room-card, [data-theme="dark"] .room-header, [data-theme="dark"] .tr-inspector-card, [data-theme="dark"] .tr-card, [data-theme="dark"] .tr-history, [data-theme="dark"] .tr-loading, [data-theme="dark"] .ct-drawer { background: var(--card-bg) !important; color: var(--text); border-color: var(--border) !important; } [data-theme="dark"] .tr-ballpark, [data-theme="dark"] .triage-per-file, [data-theme="dark"] .ct-counts, [data-theme="dark"] .room-drop, [data-theme="dark"] .room-privacy, [data-theme="dark"] .ct-portal-chip { background: var(--card-bg-soft) !important; color: var(--text); border-color: var(--border) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] strong { color: var(--text-strong); } /* Inputs + selects need explicit overrides — browsers don't inherit * background/color on form elements from the body. */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .settings-input { background: var(--card-bg-soft) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Buttons / chips that defaulted to white backgrounds — also covers the base ``.btn`` (was background:#fff with no dark override; the text I switched to var(--text) became light-on-white = invisible). */ [data-theme="dark"] .btn, [data-theme="dark"] .btn-secondary, [data-theme="dark"] .ct-action-btn, [data-theme="dark"] .nav-btn { background: var(--card-bg-soft); color: var(--text); border-color: var(--border); } [data-theme="dark"] .btn:hover, [data-theme="dark"] .ct-action-btn:hover, [data-theme="dark"] .btn-secondary:hover { background: var(--hover-bg); } /* Primary/positive buttons keep their solid brand background — only the white-background variants need patching. */ [data-theme="dark"] .nav-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); } /* Table header bands keep brand-blue, but body rows pick up the * dark surface */ [data-theme="dark"] table tbody tr, [data-theme="dark"] .tr-inspector-table tbody tr { background: var(--card-bg) !important; color: var(--text); } [data-theme="dark"] table tbody tr:nth-child(even), [data-theme="dark"] .tr-inspector-table tbody tr:nth-child(even) { background: var(--card-bg-soft) !important; } [data-theme="dark"] .meta { color: var(--muted); } [data-theme="dark"] hr { border-color: var(--border); } /* Callout / info panels that used pale tints — make them readable * on dark without losing the "this is highlighted" signal. */ [data-theme="dark"] .ct-empty, [data-theme="dark"] .tr-why { background: var(--card-bg-soft) !important; border-color: var(--border) !important; color: var(--text); } /* Ring track contrast — light grey gets lost on dark */ [data-theme="dark"] .triage-ring .ring-track, [data-theme="dark"] .ct-ring .ct-ring-track, [data-theme="dark"] .tr-pf-ring .ring-track { stroke: #334155; } [data-theme="dark"] .triage-ring .ring-pct, [data-theme="dark"] .ct-ring .ct-ring-pct { fill: var(--text-strong); } [data-theme="dark"] .triage-ring .ring-lbl, [data-theme="dark"] .ct-ring .ct-ring-lbl { fill: var(--muted); } /* Stage strip — light grey background loses contrast */ [data-theme="dark"] .ct-stage-strip li { background: #334155; } [data-theme="dark"] .ct-stage-strip .ct-step-current { background: var(--num-emphasis); } [data-theme="dark"] .ct-stage-strip .ct-step-done { background: var(--brand); } /* Network node fills + text */ [data-theme="dark"] .nw-node circle, [data-theme="dark"] svg .nw-node circle { fill: var(--card-bg); } [data-theme="dark"] .nw-node text, [data-theme="dark"] svg .nw-node text { fill: var(--text-strong); } /* Score-tone text colours need lighter shades on dark so they pop */ [data-theme="dark"] .ring-tone-good .ring-pct, [data-theme="dark"] .ring-tone-good .ct-ring-pct { fill: #34d399; } [data-theme="dark"] .ring-tone-warn .ring-pct, [data-theme="dark"] .ring-tone-warn .ct-ring-pct { fill: #fbbf24; } [data-theme="dark"] .ring-tone-bad .ring-pct, [data-theme="dark"] .ring-tone-bad .ct-ring-pct { fill: #f87171; } /* Numbers everywhere — the "blue numbers" convention. Lots of * existing rules hardcode a dark text colour on numeric values; * we redirect those to var(--num-emphasis) so they show as blue * in both themes. Use !important sparingly but here it's the * point — we explicitly want to override the local rules. */ .ct-3c-val, .tr-c-val, .tr-pf-3c-val, .ct-readiness-num, .ct-network-chip-val, .nw-chip-val, .ring-pct, .ct-ring-pct, .room-score-pct, .ct-tl-actor { color: var(--num-emphasis); font-variant-numeric: tabular-nums; } /* Restore actor-tag styling — it had a coloured background + * matching text colour that the blue override would otherwise * trample. Make actor labels keep their semantic colour. */ .ct-tl-actor-prospect { color: #047857; } .ct-tl-actor-consultant { color: #1e40af; } .ct-tl-actor-system { color: var(--muted); } [data-theme="dark"] .ct-tl-actor-prospect { color: #6ee7b7; } [data-theme="dark"] .ct-tl-actor-consultant { color: #93c5fd; } [data-theme="dark"] .ct-tl-actor-system { color: #cbd5e1; } /* ═══════════════════════════════════════════════════════════════ * Sales-room tab bar + Sales Resources cards * * Sits inside .room-main, above .room-content. Two tabs share the * room: Sales Resources (the deal-room collateral) + Data Room (the * existing data-validation portal). Active state mirrors the * cockpit's existing "active tab" pattern — solid bottom border in * the brand colour with a stronger text weight. * ═══════════════════════════════════════════════════════════════ */ .room-tabs { display: flex; gap: 4px; padding: 0 28px; margin: 0 0 -1px; border-bottom: 1px solid var(--border); background: var(--card-bg); flex: 0 0 auto; } .room-tab { display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; background: transparent; border: 1px solid transparent; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .room-tab:hover { color: var(--text); background: var(--hover-bg); } .room-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } .room-tab-icon { font-size: 16px; line-height: 1; } .room-tab-label { letter-spacing: 0.01em; } /* Tab panels — only one visible at a time. .hidden is the global * helper already used by room-locked / room-content. */ .tab-panel { flex: 1 1 auto; } /* Sales Resources pane. Card grid with a clear greeting strip at * the top — distinct from the chat-heavy Data Room layout so it * reads as "this is the pitch", not "more work". */ .tab-sales { padding: 28px 28px 40px; overflow-y: auto; background: var(--bg); } .sales-greet { max-width: 980px; margin: 0 auto 24px; } .sales-greet-title { font-size: 24px; font-weight: 600; color: var(--text-strong); margin: 0 0 4px; } .sales-greet-sub { margin: 0; font-size: 14px; } .sales-empty { max-width: 980px; margin: 0 auto; padding: 32px 24px; text-align: center; background: var(--card-bg-soft); border: 1px dashed var(--border); border-radius: 12px; } .sales-empty a { color: var(--brand); font-weight: 500; } .sales-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; } .sales-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.15s, box-shadow 0.15s; } .sales-card:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(0, 88, 150, 0.08); } .sales-card-head { display: flex; align-items: flex-start; gap: 12px; } .sales-card-icon { font-size: 28px; line-height: 1; flex: 0 0 auto; } .sales-card-headtext { flex: 1 1 auto; min-width: 0; } .sales-card-title { margin: 0 0 2px; font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.3; } .sales-card-kind { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } .sales-card-desc { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; } .sales-card-cta { align-self: flex-start; } .sales-card-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; } .sales-card-embed iframe, .sales-card-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; } /* Native HTML5 player — let the browser's controls overlay handle * the chrome. object-fit keeps wide-aspect videos letterboxed * instead of stretched to 16:9. */ .sales-card-embed video { object-fit: contain; } /* IH-report iframe — taller than the 16:9 video embed because the * report is a portrait-orientation document, and full-width so the * branded layout doesn't get squashed. Spans the whole grid row. */ .sales-card-iframe { position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border); } .sales-card-iframe-tall { height: 1100px; } .sales-card-iframe iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; } /* IH report cards take the full row so the wide-format report * has room to breathe. Same trick as the video embed. */ .sales-card:has(.sales-card-iframe) { grid-column: 1 / -1; } /* Video cards span the full row so the embed gets a usable width. * Other kinds keep the auto-fit grid behaviour. */ .sales-card:has(.sales-card-embed) { grid-column: 1 / -1; max-width: 720px; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════ * Sales Room drawer (consultant-side, inside #ct-drawer) * * Two stacked panels — Recipients + Resources — each with a list * above an add form. Matches the existing ct-drawer aesthetic * (Dates, Timeline, HubSpot picker) without introducing a new * surface treatment. * ═══════════════════════════════════════════════════════════════ */ .sr-panel { margin: 0 0 24px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); } .sr-panel-head { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; } .sr-panel-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-strong); } .sr-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; } .sr-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; background: var(--card-bg-soft); border: 1px solid var(--border-soft); border-radius: 8px; } .sr-row-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sr-row-main > strong { font-size: 14px; color: var(--text); } .sr-row-note { font-style: italic; } .sr-row-actions { display: flex; gap: 6px; flex: 0 0 auto; } .sr-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; } .sr-form > input, .sr-form > select, .sr-form > textarea { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); font-size: 13px; font-family: inherit; } .sr-form > textarea { grid-column: 1 / -1; resize: vertical; } .sr-form > button { grid-column: 1 / -1; justify-self: flex-start; } .sr-form-resource { grid-template-columns: 180px 1fr; } .sr-file-picker { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; padding: 6px 0; } .sr-file-picker input[type="file"] { font-size: 13px; font-family: inherit; } .sr-upload-progress { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 4px 0; } .sr-upload-progress progress { flex: 1 1 auto; height: 10px; } .sr-upload-label { font-size: 12px; color: var(--muted); min-width: 120px; } /* ============================================================ * Portals view — consultant-side admin for share links * ============================================================ */ #portals-view { padding: 24px 32px; max-width: 1400px; margin: 0 auto; } .portals-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; } .portals-title h2 { margin: 0 0 6px; color: var(--text-strong); font-size: 22px; font-weight: 600; } .portals-title .portals-sub { margin: 0; color: var(--muted); font-size: 13px; max-width: 640px; line-height: 1.45; } /* Small "which button to use" legend. Sits below the main * description, slightly indented, with the button names in the * stronger text colour so the user's eye links them to the actual * buttons in the table below. */ .portals-title .portals-tip { margin: 8px 0 0; padding: 8px 12px; background: var(--card-bg-soft); border-left: 3px solid var(--text-strong); border-radius: 4px; color: var(--muted); font-size: 12px; max-width: 640px; line-height: 1.5; } .portals-title .portals-tip strong { color: var(--text-strong); font-weight: 600; } [data-theme="dark"] .portals-title .portals-tip strong { color: var(--text); } .portals-toolbar { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .portals-filters { display: inline-flex; gap: 4px; background: var(--card-bg-soft); border-radius: 8px; padding: 3px; border: 1px solid var(--border); } .portals-filters .chip { border: 0; background: transparent; color: var(--muted); padding: 6px 14px; font-size: 13px; border-radius: 6px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .portals-filters .chip:hover { color: var(--text); } .portals-filters .chip.active { background: var(--card-bg); color: var(--text-strong); box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* Table */ .portals-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 13px; } .portals-table thead th { background: var(--card-bg-soft); color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); } .portals-table tbody td { padding: 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .portals-table tbody tr:last-child td { border-bottom: 0; } .portals-table tbody tr:hover { background: var(--card-bg-soft); } .portals-table .ta-right { text-align: right; } .portals-table code.token-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--text); background: var(--card-bg-soft); padding: 2px 6px; border-radius: 4px; } .portals-table .muted { color: var(--muted); } .portals-empty { padding: 60px 20px; text-align: center; color: var(--muted); font-size: 14px; } /* Status chips */ .status-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .status-chip.status-active { background: rgba(34, 197, 94, 0.12); color: #15803d; } .status-chip.status-revoked { background: rgba(239, 68, 68, 0.12); color: #b91c1c; } .status-chip.status-empty { background: rgba(156, 163, 175, 0.18); color: var(--muted); } [data-theme="dark"] .status-chip.status-active { color: #86efac; } [data-theme="dark"] .status-chip.status-revoked { color: #fca5a5; } /* Mini action buttons */ .portal-actions .btn-mini { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 5px 10px; font-size: 12px; border-radius: 5px; cursor: pointer; margin-left: 4px; transition: background 0.12s, border-color 0.12s, color 0.12s; } .portal-actions .btn-mini:hover { background: var(--card-bg-soft); } .portal-actions .btn-revoke { border-color: rgba(239, 68, 68, 0.4); color: #b91c1c; } .portal-actions .btn-revoke:hover { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.6); } .portal-actions .btn-reissue { border-color: var(--text-strong); color: var(--text-strong); } .portal-actions .btn-reissue:hover { background: var(--card-bg-soft); } .portal-actions .btn-email { border-color: var(--text-strong); color: #fff; background: var(--text-strong); } .portal-actions .btn-email:hover { background: #002d4d; border-color: #002d4d; } [data-theme="dark"] .portal-actions .btn-email { background: var(--text); border-color: var(--text); color: var(--card-bg); } [data-theme="dark"] .portal-actions .btn-revoke { color: #fca5a5; } /* Delete (housekeeping for revoked rows): muted-grey by default, * red on hover — less alarming than Revoke since the link is * already dead. This is "tidy up the list", not the dramatic kill. */ .portal-actions .btn-delete { border-color: var(--border); color: var(--muted); background: transparent; } .portal-actions .btn-delete:hover { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.5); color: #b91c1c; } [data-theme="dark"] .portal-actions .btn-delete:hover { color: #fca5a5; } /* Modal — Revoke confirmation */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9000; display: flex; align-items: center; justify-content: center; } .modal-box { background: var(--card-bg); color: var(--text); max-width: 460px; padding: 28px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.25); border: 1px solid var(--border); } .modal-box h3 { margin: 0 0 12px; font-size: 18px; color: var(--text-strong); } .modal-box p { margin: 8px 0; line-height: 1.5; color: var(--text); } .modal-box .modal-warn { background: rgba(239, 68, 68, 0.08); border-left: 3px solid #ef4444; padding: 10px 12px; font-size: 13px; border-radius: 4px; margin: 14px 0; } .modal-box .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .btn-danger { background: #b91c1c; color: #fff; border: 0; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 500; } .btn-danger:hover { background: #991b1b; } /* ============================================================ * Room-side friendly confirm modal (replaces window.confirm) * ============================================================ */ .room-modal-backdrop { position: fixed; inset: 0; background: rgba(20, 30, 50, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 10000; display: flex; align-items: center; justify-content: center; animation: roomModalFade 0.12s ease-out; } @keyframes roomModalFade { from { opacity: 0; } to { opacity: 1; } } .room-modal-card { background: #ffffff; color: #1f2937; max-width: 440px; width: calc(100% - 32px); padding: 28px 28px 22px; border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 30, 70, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06); animation: roomModalRise 0.16s ease-out; } @keyframes roomModalRise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .room-modal-title { margin: 0 0 10px; font-size: 19px; font-weight: 600; color: #003e6a; line-height: 1.3; } /* Error variant — used by roomAlert({kind:"error"}) for upload * failures, send errors, etc. Red title signals "something went * wrong" without losing the modal's friendly framing. */ .room-modal-title-error { color: #b91c1c; } .room-modal-body { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: #4b5563; } .room-modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .room-modal-actions .btn { min-width: 100px; padding: 8px 16px; font-size: 14px; border-radius: 8px; } /* ============================================================ * Active-room chip — top-nav indicator * ============================================================ * Persistent visual answer to "which prospect am I about to * touch?". Sits in the header next to the privacy toggle so it's * in the consultant's peripheral vision on every view. Click = * jump to Control Tower (the only place that switches active). */ .active-room-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 12px 0 auto; padding: 6px 14px; background: var(--text-strong); /* Slimstock navy */ color: #fff; border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 30, 70, 0.15); transition: background 0.12s, transform 0.08s, box-shadow 0.12s; max-width: 260px; white-space: nowrap; overflow: hidden; } .active-room-chip:hover { background: #002d4d; box-shadow: 0 2px 8px rgba(0, 30, 70, 0.25); } .active-room-chip:active { transform: scale(0.98); } .active-room-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; /* green = "live" */ flex-shrink: 0; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25); animation: activeRoomPulse 2.4s ease-in-out infinite; } .active-room-label { text-overflow: ellipsis; overflow: hidden; } /* No-room state — muted so the consultant knows "no prospect * picked, your action will go nowhere useful". */ .active-room-chip-empty { background: var(--card-bg-soft); color: var(--muted); box-shadow: none; border: 1px solid var(--border); } .active-room-chip-empty .active-room-dot { background: #9ca3af; box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.25); animation: none; } @keyframes activeRoomPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25); } 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.10); } } [data-theme="dark"] .active-room-chip { background: var(--text); color: var(--card-bg); } [data-theme="dark"] .active-room-chip:hover { background: #fff; } [data-theme="dark"] .active-room-chip-empty { background: var(--card-bg-soft); color: var(--muted); } /* ════════ Data Pull Guide (web/data-pull.js + dpg-* classes from cookbook render_guide_html) ════════════════════════════ */ .data-pull-head { margin-bottom: 1rem; } .data-pull-intro { margin-top: 0.4rem; max-width: 70ch; } /* ── Active-ERP strip ────────────────────────────────────── */ .dpg-erp-strip { margin-top: 0.6rem; } .dpg-erp-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .dpg-erp-name { font-size: 1.05rem; } /* ── Pills (confidence + verification badges) ─────────────── */ .dpg-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; border: 1px solid transparent; } .dpg-pill-conf-high { background: #e6f5ec; color: #1f6f47; border-color: #b8dfc4; } .dpg-pill-conf-medium { background: #fff3cd; color: #6b5210; border-color: #e0c674; } .dpg-pill-conf-low { background: #fbeeec; color: #872820; border-color: #e6c5c0; } .dpg-pill-verified { background: #e0eaf7; color: #1a3a6e; border-color: #b0c4e0; } .dpg-pill-draft { background: #f3f4f6; color: #4a5b6c; border-color: #cbd5e1; } [data-theme="dark"] .dpg-pill-conf-high { background: #14342a; color: #9dd9b6; border-color: #2e6a4d; } [data-theme="dark"] .dpg-pill-conf-medium { background: #3a2e10; color: #f0d57a; border-color: #806122; } [data-theme="dark"] .dpg-pill-conf-low { background: #3a1f1c; color: #e6b6ab; border-color: #7a3b34; } [data-theme="dark"] .dpg-pill-verified { background: #1c2e44; color: #a8c3e6; border-color: #496183; } [data-theme="dark"] .dpg-pill-draft { background: #2a3340; color: #b8c4d3; border-color: #45556a; } /* ── Picker grid ──────────────────────────────────────────── */ .dpg-picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.8rem; margin-top: 0.6rem; } .dpg-cookbook-card { display: block; text-align: left; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border, #e6ecf3); background: var(--card-bg, #fff); cursor: pointer; transition: border-color 120ms ease, transform 80ms ease; } .dpg-cookbook-card:hover { border-color: var(--accent, #1a3a6e); transform: translateY(-1px); } .dpg-cookbook-name { font-weight: 600; font-size: 14px; margin-bottom: 6px; } .dpg-cookbook-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* ── Parameter form ──────────────────────────────────────── */ .dpg-params-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem; margin: 0.6rem 0; } .dpg-param-field { display: flex; flex-direction: column; gap: 4px; } .dpg-param-label { font-size: 12px; font-weight: 600; color: var(--text-strong, #1a1a1a); } .dpg-param-input { padding: 6px 10px; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: var(--card-bg, #fff); color: var(--text, #1a1a1a); } .dpg-param-input:focus { outline: none; border-color: var(--accent, #1a3a6e); box-shadow: 0 0 0 3px rgba(26, 58, 110, 0.12); } .dpg-params-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; } /* ── Rendered guide body (matches cookbook render_guide_html) ─ */ .dpg-guide { font-size: 13px; line-height: 1.5; } .dpg-guide h1.dpg-title { font-size: 1.6rem; margin: 0 0 4px; color: var(--accent, #1a3a6e); } .dpg-guide .dpg-sub { color: var(--muted, #4a5b6c); font-size: 12px; } .dpg-guide .dpg-section { margin: 1.4rem 0; } .dpg-guide .dpg-section h2 { font-size: 1.1rem; margin: 0 0 4px; color: var(--accent, #1a3a6e); } .dpg-guide .dpg-section h3 { font-size: 0.95rem; margin: 0.8rem 0 4px; color: var(--text-strong, #1a1a1a); } .dpg-guide .dpg-erp-notes { margin: 0.4rem 0 0.8rem; padding: 8px 12px; background: var(--card-bg-soft, #f3f4f6); border-left: 3px solid var(--accent, #1a3a6e); color: var(--text, #1a1a1a); font-style: italic; } .dpg-conf { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } .dpg-conf-high { background: #e6f5ec; color: #1f6f47; } .dpg-conf-medium { background: #fff3cd; color: #6b5210; } .dpg-conf-low { background: #fbeeec; color: #872820; } /* Tables in the guide */ .dpg-guide table.dpg-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0; font-size: 12px; } .dpg-guide table.dpg-table th { background: var(--accent, #1a3a6e); color: #fff; text-align: left; padding: 6px 10px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; } .dpg-guide table.dpg-table td { padding: 6px 10px; border-bottom: 1px solid var(--border, #e6ecf3); vertical-align: top; } .dpg-guide table.dpg-table tr:nth-child(even) td { background: var(--card-bg-soft, #f8fafc); } .dpg-guide table.dpg-table code { background: var(--card-bg-soft, #f6f8fa); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; } .dpg-help { color: var(--muted, #4a5b6c); font-size: 11px; } /* Filter + caveat lists */ .dpg-guide ul.dpg-filters, .dpg-guide ul.dpg-caveats { margin: 0.4rem 0 0.4rem 1.2rem; padding: 0; } .dpg-guide ul.dpg-filters li { font-family: ui-monospace, Menlo, monospace; font-size: 12px; margin: 2px 0; } .dpg-guide ul.dpg-caveats li { margin: 4px 0; } /* Script blocks */ .dpg-guide .dpg-script { margin: 0.8rem 0; border: 1px solid var(--border, #e6ecf3); border-radius: 8px; overflow: hidden; } .dpg-guide .dpg-script-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 8px 12px; background: var(--card-bg-soft, #f3f4f6); border-bottom: 1px solid var(--border, #e6ecf3); } .dpg-script-actions { display: flex; gap: 6px; } .dpg-script-notes { margin: 8px 12px 0; } .dpg-code { margin: 0; padding: 12px; background: var(--code-bg, #f6f8fa); overflow-x: auto; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.45; white-space: pre; color: var(--text-strong, #1a1a1a); } [data-theme="dark"] .dpg-guide .dpg-erp-notes { background: #1f2937; color: #d1d5db; } [data-theme="dark"] .dpg-guide table.dpg-table tr:nth-child(even) td { background: #1f2937; } [data-theme="dark"] .dpg-guide table.dpg-table td { border-color: #374151; color: #d1d5db; } [data-theme="dark"] .dpg-guide table.dpg-table code { background: #111827; color: #e5e7eb; } [data-theme="dark"] .dpg-guide .dpg-script-head { background: #1f2937; border-color: #374151; } [data-theme="dark"] .dpg-code { background: #0f172a; color: #e5e7eb; } [data-theme="dark"] .dpg-cookbook-card { background: #1f2937; border-color: #374151; } [data-theme="dark"] .dpg-cookbook-card:hover { border-color: #7aa6d1; } /* ── Portal-side Data Pull tab — additional chrome ─────────── */ .tab-data-pull { padding: 1.2rem 1.4rem; max-width: 1100px; margin: 0 auto; } .dpg-portal-head { margin-bottom: 1rem; } .dpg-portal-head h2 { margin: 0 0 0.3rem; color: var(--accent, #1a3a6e); } .dpg-portal-head .dpg-erp-strip { margin-top: 0.6rem; } .dpg-picker-tip { margin-top: 0.8rem; font-style: italic; } .data-pull-portal .card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e6ecf3); border-radius: 10px; padding: 1.2rem 1.4rem; margin-bottom: 1rem; } [data-theme="dark"] .data-pull-portal .card { background: #1f2937; border-color: #374151; } /* ════════ Preview-pane view toggle + per-warehouse summary ════════ */ .tb-segment { display: inline-flex; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; overflow: hidden; margin-right: 8px; } .tb-segment-btn { border: none; background: var(--card-bg, #fff); color: var(--text, #1a1a1a); padding: 4px 12px; font-size: 12px; cursor: pointer; border-right: 1px solid var(--border, #cbd5e1); transition: background 100ms ease; } .tb-segment-btn:last-child { border-right: none; } .tb-segment-btn:hover { background: var(--card-bg-soft, #f3f4f6); } .tb-segment-btn.tb-active { background: var(--accent, #1a3a6e); color: #fff; font-weight: 600; } [data-theme="dark"] .tb-segment-btn { background: #1f2937; color: #e5e7eb; } [data-theme="dark"] .tb-segment-btn:hover { background: #273141; } [data-theme="dark"] .tb-segment { border-color: #374151; } [data-theme="dark"] .tb-segment-btn { border-color: #374151; } .wh-summary { padding: 0.6rem 1rem 1rem; } .wh-summary-missing { color: #b45309; background: #fef3c7; border-radius: 6px; padding: 6px 10px; margin: 0 0 0.8rem; border: 1px solid #e0c674; } [data-theme="dark"] .wh-summary-missing { background: #59320f; color: #fcd34d; border-color: #806122; } .wh-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; } .wh-summary-table th { background: var(--accent, #1a3a6e); color: #fff; text-align: left; padding: 8px 12px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; position: sticky; top: 0; } .wh-summary-table th.num, .wh-summary-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .wh-summary-table td { padding: 6px 12px; border-bottom: 1px solid var(--border, #e6ecf3); } .wh-summary-table tr:nth-child(even) td { background: var(--card-bg-soft, #f8fafc); } .wh-summary-table tr.wh-row-empty td { background: #fef2f2; color: #b91c1c; font-style: italic; } .wh-summary-table tfoot tr.wh-row-totals td { background: var(--card-bg-soft, #f3f4f6); border-top: 2px solid var(--border, #cbd5e1); border-bottom: none; padding-top: 10px; padding-bottom: 10px; } [data-theme="dark"] .wh-summary-table td { border-color: #374151; } [data-theme="dark"] .wh-summary-table tr:nth-child(even) td { background: #1f2937; } [data-theme="dark"] .wh-summary-table tr.wh-row-empty td { background: #3a1f1c; color: #fca5a5; } [data-theme="dark"] .wh-summary-table tfoot tr.wh-row-totals td { background: #0f172a; border-top-color: #475569; } /* ── Lookups modal ───────────────────────────────────────────── Detected lookup sheets (BRANCH, ORDER TYPE…) rendered as cards in the Mapping-view Lookups modal. See web/mapping.js ::openLookupsModal / renderLookups. */ .lk-card { border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 12px 14px; margin: 10px 0; background: var(--card-bg, #fff); } .lk-card-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; } .lk-card-head strong { font-size: 1.05em; } .lk-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.78em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .lk-status-detected { background: #fef3c7; color: #92400e; } .lk-status-confirmed { background: #d1fae5; color: #065f46; } .lk-status-dismissed { background: #f3f4f6; color: #6b7280; } .lk-card-body code { background: var(--code-bg, #f3f4f6); padding: 1px 5px; border-radius: 3px; font-size: 0.92em; } .lk-role-label { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .lk-role-label span { min-width: 50px; } .lk-role { padding: 4px 8px; } .lk-sample { margin: 6px 0 6px 18px; padding: 0; font-size: 0.92em; } .lk-sample li { margin: 2px 0; } .lk-actions { margin-top: 10px; display: flex; gap: 8px; } [data-theme="dark"] .lk-card { background: #1f2937; border-color: #374151; } [data-theme="dark"] .lk-status-detected { background: #78350f; color: #fde68a; } [data-theme="dark"] .lk-status-confirmed { background: #064e3b; color: #6ee7b7; } [data-theme="dark"] .lk-status-dismissed { background: #374151; color: #9ca3af; } [data-theme="dark"] .lk-card-body code { background: #111827; }