/* ── APP LOGO ────────────────────────────────────────────────────────────── * Rendered as

— we deliberately * do NOT modify the SVG source. Theme adaptation is done from the outside * via CSS filter chains keyed off [data-scheme] on . * * Per-scheme math: the source SVG's primary blue (#065BC7) sits at hue ~219°. * Each scheme rotates from there toward its accent's hue, with optional * saturate() / brightness() tweaks to match the scheme's overall warmth. * * --accent reference (from theme.js presets): * dark #3b82f6 → hue ~217° (matches native — no rotate) * light #2563eb → hue ~222° (slight +rotate) * steel #2e6da4 → hue ~207° (slight -rotate + desaturate) * beige #8b6914 → hue ~43° (big rotate + desaturate + dim) * * The smooth transition is applied so users see the recolor animate when they * switch themes in Settings → Appearance. */ /* Full-colour transparent raster brand logo (docman_logo.png / @2x) — the * replacement for the retired auto-traced docman_logo.svg. A brand logo must * render in its TRUE colours: it is intentionally NOT given any per-scheme * filter / invert / hue-rotate (those .app-logo rules below were a hack for * the old 2-tone SVG). Sizing comes from its wrapper (.boot-logo / .logo-mark * / .nav-logo) or an inline style. Do not add a [data-scheme] .brand-logo * filter — see the locked-asset section in CLAUDE.md. */ .brand-logo { display: block; } .app-logo { display: block; /* No transition on initial paint — the data-scheme attribute is set * synchronously in before parses, so the filter is * already at its target value when the image first renders. A * transition here would animate from "no filter" → "dark filter" * over 250 ms on first paint, which reads as a flash against the * dark boot-screen bg. Theme-switch animation is still smooth — see * the override below scoped to .ready descendants only. */ /* NO image-rendering hint here. The source SVG is 1254 × 1254 and * we render it at 120-200 px (sidebar) or 104 px (marketing nav). * That's a 6-10× downscale. The hints `crisp-edges` and * `-webkit-optimize-contrast` are designed for RASTER images and * cause Chrome to rasterize the SVG at intrinsic size then resample * with nearest-neighbor — which produces a pixelated/blurry result * instead of letting the browser's vector renderer scale cleanly. * The SVG itself has `shape-rendering="geometricPrecision"` baked * in, which is the correct knob for vector shapes. */ /* The PRIMARY crispness lever is RENDER SIZE, set in layout.css * (`.logo-mark { width: 90% }`). docman_logo.svg is auto-traced from a * raster — hundreds of tiny Bezier segments that anti-alias into a soft * look once downscaled hard. base.css proves the boot logo is crisp at * 320 px and soft at ~200 px; the sidebar mark must render large enough * (≈191 px now) to stay out of the soft zone. Do NOT compensate with an * `image-rendering` hint — `crisp-edges`/`-webkit-optimize-contrast` are * raster hints that make Chrome rasterize the SVG at intrinsic size then * nearest-neighbour resample, which is worse. The SVG's own * `shape-rendering="geometricPrecision"` + viewBox is the correct vector * knob. * * `transform: translateZ(0)` is a SECONDARY nudge: the per-scheme * `filter` chains make Chrome rasterise this element off-screen, and * inside the `position: fixed` `.sidebar` that buffer can be allocated * at CSS-pixel (1×) size, ignoring devicePixelRatio. The 3D-transform * layer promotion makes Chrome allocate it at device resolution. Kept * minimal — no `will-change: filter` (an always-on layer hint that cost * memory without resolving the fuzz; the size fix is what actually did). * All SVG-untouched, per the locked-asset rule. */ transform: translateZ(0); backface-visibility: hidden; } /* Once the main app is visible (i.e. after the boot screen has handed * off), re-enable the filter transition so the user gets a smooth * crossfade when they cycle themes from Settings → Appearance. The * boot screen never animates because it's hidden before the .ready * marker is added. */ body.ready .app-logo { transition: filter .25s ease; } /* Per-scheme filter chains. The Dark scheme needs special handling: the * source SVG has dark-navy "doc" text designed for a light page background, * which on Dark's near-black bg blends in and reads as a faint outline. * `invert(1) hue-rotate(180deg)` is the classic light↔dark swap that * inverts brightness while preserving hue — dark navy becomes a light * tint, the bright blue stays roughly blue, grays stay grays. */ [data-scheme="dark"] .app-logo { filter: invert(1) hue-rotate(180deg); } [data-scheme="light"] .app-logo { filter: hue-rotate(5deg); } [data-scheme="steel"] .app-logo { filter: hue-rotate(-10deg) saturate(0.78); } [data-scheme="beige"] .app-logo { filter: hue-rotate(-176deg) saturate(0.72) brightness(0.9); } /* ── AI AGENT ICON ──────────────────────────────────────────────────────── * Rendered as

wherever the * agent feature appears in the UI. The SVG is user-supplied (a raster- * traced Sherlock illustration, ~40 KB, 189×148 with NO viewBox and a * solid white background fill). Same rule as the DocMan wordmark: never * modify the SVG itself — handle everything via container CSS. * * aspect-ratio: 189/148 is needed because the SVG has no viewBox. * Without it, the browser sees width="189" height="148" as fixed * intrinsic sizing, and `width: auto` resolves to 189 px regardless of * how tall we set the icon. With the explicit aspect-ratio, height * scales proportionally. */ .agent-icon { display: inline-block; vertical-align: -0.25em; height: 1.4em; width: auto; aspect-ratio: 189 / 148; flex-shrink: 0; /* No image-rendering hint — same reasoning as .app-logo above. * crisp-edges on a downscaled SVG triggers nearest-neighbor * rasterization in Chrome and produces a blurry result. Let the * vector renderer do its job. */ /* No transition on initial paint — same reasoning as .app-logo above. * Theme-switch animation re-enabled below for the .ready state. */ } body.ready .agent-icon { transition: filter .25s ease; } /* Dark scheme: invert flips the white background → dark and the dark * figure → light, so the icon is visible against the dark page bg. */ [data-scheme="dark"] .agent-icon { filter: invert(1) hue-rotate(180deg); } [data-scheme="light"] .agent-icon { /* native colors work on light bg */ } [data-scheme="steel"] .agent-icon { filter: contrast(1.05); } [data-scheme="beige"] .agent-icon { filter: sepia(0.15) brightness(0.98); } /* ── BUTTONS ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all .15s; font-family: var(--font-body); white-space: nowrap; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { filter: brightness(1.1); } .btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: none; } .btn-ghost { background: transparent; border: 1px solid var(--border2); color: var(--text2); } .btn-ghost:hover { background: var(--surface2); color: var(--text); } .btn-danger { background: var(--danger); color: #fff; } .btn-success { background: var(--success); color: #fff; } /* ── SPINNER — used in the AI agent processing indicator ─────────────────── */ .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--accent-tint); border-top-color: var(--accent); border-radius: 50%; animation: spinnerRotate .8s linear infinite; flex-shrink: 0; } @keyframes spinnerRotate { to { transform: rotate(360deg); } } /* Animated trailing dots — for "Reading PDF…" type messages. The text node * stays static; only this element pulses, so screen readers don't get a * jittery announcement. */ .loading-dots::after { content: '...'; display: inline-block; width: 14px; text-align: left; animation: loadingDots 1.4s steps(4, end) infinite; } @keyframes loadingDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } } /* ── KPI CARDS ───────────────────────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; margin-bottom: 24px; animation: fadeUp .4s ease both; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; position: relative; overflow: hidden; transition: border-color .15s, transform .15s; } .kpi-card:hover { border-color: var(--border2); transform: translateY(-1px); } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .kpi-card.red::before { background: var(--danger); } .kpi-card.yellow::before { background: var(--warning); } .kpi-card.green::before { background: var(--success); } .kpi-card.blue::before { background: var(--accent); } .kpi-card.purple::before { background: #8b5cf6; } .kpi-card.teal::before { background: #14b8a6; } .kpi-card.orange::before { background: #f97316; } .kpi-label { font-family: var(--font-mono); font-size: 10px; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } .kpi-value { font-family: var(--font-head); font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 6px; } .kpi-card.red .kpi-value { color: var(--danger); } .kpi-card.yellow .kpi-value { color: var(--warning); } .kpi-card.green .kpi-value { color: var(--success); } .kpi-card.blue .kpi-value { color: var(--accent2); } .kpi-card.orange .kpi-value { color: #f97316; } .kpi-sub { font-size: 12px; color: var(--text3); } .kpi-badge { position: absolute; top: 18px; right: 18px; font-size: 22px; opacity: .15; } /* ── CARD ────────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .card-title { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text); flex: 1; } .card-badge { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border-radius: var(--r-pill); } .card-badge.red { background: rgba(239,68,68,.15); color: var(--danger); } .card-badge.blue { background: rgba(59,130,246,.12); color: var(--accent2); } .card-badge.green { background: rgba(34,197,94,.12); color: var(--success); } .card-badge.yellow { background: rgba(245,158,11,.12); color: var(--warning); } /* ── GRID LAYOUTS ────────────────────────────────────────────────────────── */ .grid-3col { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; animation: fadeUp .4s .1s ease both; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; animation: fadeUp .4s .2s ease both; } /* ── TABLE ───────────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th { font-family: var(--font-mono); font-size: 10px; color: var(--text3); letter-spacing: 1px; text-transform: uppercase; padding: 10px 20px; text-align: left; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); font-weight: 500; } td { padding: 13px 20px; border-bottom: 1px solid rgba(30,39,64,.6); vertical-align: middle; font-size: 13.5px; } tr:last-child td { border-bottom: none; } tr { transition: background .1s; } tr:hover td { background: rgba(255,255,255,.02); } .loan-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent2); } .client-name { font-weight: 500; color: var(--text); } .location-tag { font-family: var(--font-mono); font-size: 10px; color: var(--text3); background: var(--surface2); padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border); } /* ── STATUS PILL ─────────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; padding: 3px 9px; border-radius: var(--r-pill); font-weight: 500; letter-spacing: .3px; } .pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; } .pill.red { background: rgba(239,68,68,.12); color: var(--danger); border: 1px solid rgba(239,68,68,.2); } .pill.red::before { background: var(--danger); } .pill.yellow { background: rgba(245,158,11,.12); color: var(--warning); border: 1px solid rgba(245,158,11,.2); } .pill.yellow::before { background: var(--warning); } .pill.green { background: rgba(34,197,94,.12); color: var(--success); border: 1px solid rgba(34,197,94,.2); } .pill.green::before { background: var(--success); } /* ── PROGRESS BAR ────────────────────────────────────────────────────────── */ .progress-wrap { display: flex; align-items: center; gap: 10px; } .progress-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 2px; transition: width 1s cubic-bezier(.4,0,.2,1); } .progress-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text2); width: 32px; text-align: right; } /* ── MISSING ITEMS ───────────────────────────────────────────────────────── */ .missing-item { padding: 14px 20px; border-bottom: 1px solid rgba(30,39,64,.6); display: flex; align-items: flex-start; gap: 12px; transition: background .1s; cursor: pointer; } .missing-item:last-child { border-bottom: none; } .missing-item:hover { background: rgba(255,255,255,.02); } .missing-icon { width: 32px; height: 32px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; margin-top: 1px; } .missing-icon.yellow { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.2); } .missing-loan { font-family: var(--font-mono); font-size: 11px; color: var(--accent2); margin-bottom: 2px; } .missing-client { font-size: 13.5px; font-weight: 500; color: var(--text); margin-bottom: 4px; } .missing-docs span { display: inline-block; background: var(--surface2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; margin-right: 4px; margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text2); } /* Dashboard checklist summary cards */ .dash-cl-card { padding: 14px 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background .12s; cursor: pointer; } .dash-cl-card:hover { background: var(--surface2); } .dash-cl-name { font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-cl-bar { height: 4px; background: var(--border2); border-radius: 2px; overflow: hidden; width: 100%; } /* ── UPLOAD TRACKER (dashboard widget) ───────────────────────────────────── */ .upload-row { padding: 12px 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgba(30,39,64,.6); transition: background .1s; } .upload-row:last-child { border-bottom: none; } .upload-row:hover { background: rgba(255,255,255,.02); } .upload-loan { font-family: var(--font-mono); font-size: 12px; color: var(--accent2); width: 90px; flex-shrink: 0; } .upload-name { flex: 1; font-size: 13px; color: var(--text); } .upload-type { font-family: var(--font-mono); font-size: 10px; color: var(--text3); width: 80px; } .upload-check { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; flex-shrink: 0; transition: all .15s; } .upload-check.done { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.3); color: var(--success); } .upload-check.pending { background: var(--surface2); border: 1px solid var(--border2); color: transparent; } .upload-check.pending:hover { border-color: var(--accent); } .upload-label { font-family: var(--font-mono); font-size: 10px; width: 70px; text-align: right; } .upload-label.done { color: var(--success); } .upload-label.pending { color: var(--text3); } /* ── ACTIVITY FEED ───────────────────────────────────────────────────────── */ .activity-item { padding: 12px 20px; display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid rgba(30,39,64,.6); } .activity-item:last-child { border-bottom: none; } .activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .activity-text { font-size: 13px; color: var(--text2); line-height: 1.5; } .activity-text strong { color: var(--text); font-weight: 500; } .activity-time { font-family: var(--font-mono); font-size: 10px; color: var(--text3); margin-top: 3px; } /* ── MINI CHART ──────────────────────────────────────────────────────────── */ .mini-chart { padding: 16px 20px 20px; } .chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; } .bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--accent); opacity: .6; transition: opacity .15s; cursor: pointer; } .bar:hover { opacity: 1; } .bar.today { opacity: 1; background: var(--accent2); } .bar-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--text3); } .chart-summary { margin-top: 12px; display: flex; gap: 20px; border-top: 1px solid var(--border); padding-top: 12px; } .chart-stat-val { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text); } .chart-stat-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--text3); } /* ── CHECKLIST (dashboard widget) ────────────────────────────────────────── */ .checklist-item { padding: 10px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(30,39,64,.6); font-size: 13px; } .checklist-item:last-child { border-bottom: none; } .check-box { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; } .check-box.done { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.3); color: var(--success); } .check-box.miss { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2); color: var(--danger); } .check-box.warn { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.2); color: var(--warning); } .check-label.miss { color: var(--text2); } .check-label.done { color: var(--text3); text-decoration: line-through; flex: 1; } .check-label.warn { color: var(--warning); flex: 1; } .check-label.miss { flex: 1; } .check-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text3); } /* ── ALERT BANNER ────────────────────────────────────────────────────────── */ .alert-bar { background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.18); border-radius: var(--r-lg); padding: 12px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; animation: fadeUp .3s ease both; cursor: pointer; transition: background .15s; } .alert-bar:hover { background: rgba(239,68,68,.1); } .alert-text { flex: 1; font-size: 13px; color: #fca5a5; } .alert-text strong { color: var(--danger); } /* ── SECTION HEADER ──────────────────────────────────────────────────────── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .section-label { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text); } /* ── TABS ────────────────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--border); } .tab { padding: 10px 14px; font-size: 12.5px; font-family: var(--font-mono); color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; margin-bottom: -1px; } .tab:hover { color: var(--text2); } .tab.active { color: var(--accent2); border-bottom-color: var(--accent); } /* ── COMBOBOX (searchable select) ────────────────────────────────────────── */ .cb-wrap { position: relative; display: inline-flex; width: 100%; } .cb-input { width: 100%; font-family: var(--font-body, inherit); background: var(--surface2); color: var(--text); border: 1px solid var(--border2); border-radius: var(--r-md, 6px); padding: 5px 28px 5px 8px; font-size: 11px; outline: none; cursor: text; transition: border-color .15s; } .cb-input:focus { border-color: var(--accent); background: var(--surface); } .cb-arrow { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 10px; cursor: pointer; user-select: none; } .cb-dropdown { position: fixed; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r-md, 6px); box-shadow: 0 6px 24px rgba(0,0,0,.35); z-index: 9999; max-height: 280px; overflow-y: auto; display: none; list-style: none; margin: 0; padding: 4px 0; } .cb-dropdown.open { display: block; } .cb-dropdown li { padding: 6px 12px; font-size: 11px; cursor: pointer; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-dropdown li:hover, .cb-dropdown li.cb-active { background: var(--accent); color: #fff; } .cb-dropdown li.cb-group-header { padding: 4px 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); background: var(--surface2); cursor: default; pointer-events: none; } .cb-dropdown li.cb-no-results { color: var(--text3); font-style: italic; pointer-events: none; } /* ── GLOBAL SEARCH OVERLAY ───────────────────────────────────────────────── */ #globalSearchOverlay { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; padding-top: 80px; } #globalSearchBox { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r-lg); width: 100%; max-width: 580px; box-shadow: 0 24px 80px rgba(0,0,0,.6); overflow: hidden; animation: fadeUp .18s ease both; } #globalSearchInput { width: 100%; box-sizing: border-box; background: none; border: none; border-bottom: 1px solid var(--border); outline: none; padding: 16px 20px; font-size: 15px; color: var(--text); font-family: var(--font-body); } #globalSearchInput::placeholder { color: var(--text3); } #globalSearchResults { max-height: 420px; overflow-y: auto; } .gsearch-result { padding: 12px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; } .gsearch-result:last-child { border-bottom: none; } .gsearch-result:hover, .gsearch-result.selected { background: var(--surface2); } .gsearch-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .gsearch-icon.loan { background: rgba(59,130,246,.12); } .gsearch-main { flex: 1; min-width: 0; } .gsearch-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsearch-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text3); margin-top: 2px; } .gsearch-pct { font-family: var(--font-mono); font-size: 12px; font-weight: 700; flex-shrink: 0; } .gsearch-empty { padding: 32px; text-align: center; color: var(--text3); font-size: 13px; } .gsearch-hint { padding: 8px 20px; font-family: var(--font-mono); font-size: 10px; color: var(--text3); border-top: 1px solid var(--border); display: flex; gap: 16px; } /* ── SETTINGS PAGE ───────────────────────────────────────────────────────── */ .scheme-btn { background: none; border: none; padding: 8px 20px; font-size: 12px; color: var(--text2); cursor: pointer; font-family: var(--font-body); transition: all .15s; } .scheme-btn.active { background: var(--accent); color: #fff; } .scheme-btn:hover:not(.active) { color: var(--text); } .color-row { display: flex; align-items: center; gap: 10px; } .color-swatch { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--border2); cursor: pointer; flex-shrink: 0; position: relative; overflow: hidden; } .color-swatch input[type="color"] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: none; padding: 0; cursor: pointer; opacity: 0; } .color-label { font-size: 12px; color: var(--text2); flex: 1; } .color-hex { font-family: var(--font-mono); font-size: 11px; color: var(--text2); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 8px; width: 90px; outline: none; } .color-hex:focus { border-color: var(--accent); } /* ── CONTACT PICKERS ─────────────────────────────────────────────────────── */ .contact-picker { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } /* Document group picker */ .doc-group-item { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color .15s; } .doc-group-item.has-selection { border-color: var(--accent); } .doc-group-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; user-select: none; background: var(--surface2); transition: background .1s; } .doc-group-header:hover { background: var(--surface); } .doc-group-toggle { font-size: 10px; color: var(--text3); transition: transform .2s; flex-shrink: 0; } .doc-group-toggle.open { transform: rotate(90deg); } .doc-group-name { font-size: 12px; font-weight: 500; color: var(--text); flex: 1; } .doc-group-folder { font-family: var(--font-mono); font-size: 9px; color: var(--text3); flex-shrink: 0; } .doc-group-count { font-family: var(--font-mono); font-size: 9px; background: var(--accent); color: #fff; border-radius: 8px; padding: 1px 6px; flex-shrink: 0; display: none; } .doc-group-count.show { display: inline; } .doc-group-docs { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); display: none; } .doc-group-docs.open { display: flex; } .doc-group-check { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 2px 0; } .doc-group-check input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .doc-group-check label { font-size: 11px; color: var(--text2); cursor: pointer; line-height: 1.4; } .doc-group-check:hover label { color: var(--text); } #liDocGroupsPanel::-webkit-scrollbar { width: 6px; } #liDocGroupsPanel::-webkit-scrollbar-track { background: var(--surface2); border-radius: 3px; } #liDocGroupsPanel::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; opacity: 0.7; } #liDocGroupsPanel::-webkit-scrollbar-thumb:hover { opacity: 1; } .contact-picker-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); } .contact-new-row { display: flex; gap: 6px; margin-top: 4px; } .contact-new-row .form-input { flex: 1; font-size: 11px; padding: 5px 8px; } .contact-save-btn { font-size: 10px; padding: 5px 10px; white-space: nowrap; flex-shrink: 0; } .contact-badge { display: flex; align-items: center; gap: 6px; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.2); border-radius: var(--r-sm); padding: 3px 8px; font-size: 11px; color: var(--accent2); } .contact-badge .cb-clear { cursor: pointer; color: var(--text3); font-size: 10px; margin-left: 2px; } .contact-badge .cb-clear:hover { color: var(--danger); } /* Borrower list rows */ .borrower-row { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:5px 8px; } .borrower-row.primary-borrower { border-color:var(--accent); background:rgba(59,130,246,.06); } .borrower-name { flex:1; font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .borrower-email { font-family:var(--font-mono); font-size:9px; color:var(--text3); } .primary-badge { font-family:var(--font-mono); font-size:8px; background:var(--accent); color:#fff; border-radius:3px; padding:1px 5px; flex-shrink:0; } .borrower-radio { accent-color:var(--accent); cursor:pointer; flex-shrink:0; } .borrower-remove { cursor:pointer; color:var(--text3); font-size:11px; flex-shrink:0; transition:color .1s; } .borrower-remove:hover { color:var(--danger); } /* ── PAGE HEADERS ────────────────────────────────────────────────────────── */ .page-header { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; } .page-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--text); } .page-sub { font-size: 13px; color: var(--text3); margin-top: 3px; } .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .filter-chip { padding: 5px 12px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--border2); color: var(--text3); cursor: pointer; transition: all .15s; background: var(--surface2); } .filter-chip:hover { border-color: var(--accent); color: var(--accent2); } .filter-chip.active { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: var(--accent2); } /* ── RESPONSIVE ──────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2,1fr); } .grid-2, .grid-3col { grid-template-columns: 1fr; } } @media (max-width: 768px) { .sidebar { display: none; } .main { margin-left: 0; } .kpi-grid { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } }