@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap'); :root { color-scheme: dark; --bg: #0d1117; --surface: #161b22; --surface2: #1c2330; --border: #30363d; --accent: #f0a500; --accent2: #4fc3f7; --accent3: #7ee8a2; --danger: #f85149; --text: #e6edf3; --text-muted: #7d8590; --text-dim: #484f58; --wholesale: #4fc3f7; --retail: #a5d6a7; --broker: #ce93d8; --correspondent: #7ce7d9; --overlay-bg: rgba(0,0,0,0.7); --overlay-bg-heavy: rgba(0,0,0,0.82); --surface-hover: rgba(255,255,255,0.04); --surface-subtle: rgba(255,255,255,0.015); --accent-glow: rgba(240,165,0,0.08); --badge-wholesale-bg: rgba(79,195,247,0.15); --badge-retail-bg: rgba(165,214,167,0.15); --badge-broker-bg: rgba(206,147,216,0.15); --calendar-icon-filter: invert(0.6); /* Sticky offsets for the table header rows (two-tier: group-row + column-names). Offsets are sized to slightly UNDERLAP each row's natural height — combined with the box-shadow on each sticky cell, this ensures no transparent gap. */ --header-row-1-offset: 0px; --header-row-2-offset: 22px; /* group-row stuck-bottom is ~24px; underlap by 2px */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; } /* ── AUTH-PENDING STATE ── */ /* Hide data UI while auth is unresolved. The login modal is position:fixed z-index:500 and is NOT .sidebar/.section, so it stays fully visible. */ body.auth-pending .sidebar, body.auth-pending .section { visibility: hidden; } /* Cold-start loading hint — visible only when a token exists but hasn't been validated yet (html.has-token-pre set by inline script). */ @keyframes auth-spin { to { transform: rotate(360deg); } } .auth-loading-hint { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 10; } html.has-token-pre body.auth-pending .auth-loading-hint { display: flex; } .auth-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: auth-spin 0.65s linear infinite; } /* ── LAYOUT ── */ .app { display: flex; min-height: 100vh; } .sidebar { width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 24px 0; } .sidebar-logo { padding: 0 20px 24px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .sidebar-logo h1 { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 800; color: var(--accent); letter-spacing: 0.05em; text-transform: uppercase; } .sidebar-logo p { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: 'DM Mono', monospace; } .nav-section { margin-bottom: 8px; } .nav-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); padding: 0 20px; margin-bottom: 4px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 20px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 500; transition: all 0.15s; border-left: 2px solid transparent; } .nav-item:hover { background: var(--surface2); color: var(--text); } .nav-item.active { background: var(--accent-glow); color: var(--accent); border-left-color: var(--accent); } .nav-item .icon { font-size: 16px; } .main { flex: 1; overflow: auto; display: flex; flex-direction: column; position: relative; } .main-content { flex: 1; padding: 32px; } .sidebar-footer { margin-top: auto; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface); z-index: 10; } .sidebar-theme-row { padding: 12px 12px 10px; } .app-theme-toggle { width: 100%; display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.15s, border-color 0.15s, color 0.15s; } .app-theme-toggle:hover { background: var(--surface2); border-color: var(--border); color: var(--text); } .app-theme-toggle-icon { font-size: 13px; line-height: 1; width: 14px; text-align: center; color: var(--accent); } .app-theme-toggle-label { white-space: nowrap; } /* ── FLOATING HORIZONTAL SCROLL WIDGET ── */ .floating-scrollbar { position: fixed; left: 244px; right: 24px; bottom: 12px; height: 12px; padding: 2px 6px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); border-radius: 999px; z-index: 50; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); backdrop-filter: blur(8px); } .floating-scrollbar[hidden] { display: none; } .floating-scrollbar-track { position: relative; height: 100%; background: color-mix(in srgb, var(--surface2) 80%, transparent); border-radius: 999px; cursor: pointer; } .floating-scrollbar-thumb { position: absolute; top: 1px; bottom: 1px; background: var(--accent); border-radius: 999px; min-width: 24px; cursor: grab; transition: background 120ms ease; } .floating-scrollbar-thumb:hover, .floating-scrollbar-thumb.is-dragging { background: color-mix(in srgb, var(--accent) 90%, white 10%); } .floating-scrollbar-thumb.is-dragging { cursor: grabbing; } /* ── HEADER ── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 20px; } .page-title h2 { font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 700; color: var(--text); } .page-title p { color: var(--text-muted); font-size: 13px; margin-top: 4px; } .header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--accent); color: #000; border-color: var(--accent); } .btn-primary:hover { background: #ffb930; } .btn-secondary { background: var(--surface2); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface); border-color: var(--text-muted); } .btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); } .btn-ghost:hover { color: var(--text); background: var(--surface2); } .btn-danger { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); } .btn-sm { padding: 5px 12px; font-size: 12px; } .btn:disabled, .form-select:disabled, input:disabled { opacity: 0.55; cursor: not-allowed; } /* ── CARDS ── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); } .card-body { padding: 20px; } /* ── UPLOAD ZONE ── */ .upload-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 48px 24px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; } .upload-zone:hover, .upload-zone.drag-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, transparent); } .upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .upload-icon { font-size: 40px; margin-bottom: 12px; } .upload-zone h3 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .upload-zone p { font-size: 13px; color: var(--text-muted); } .section.upload-locked .upload-zone { opacity: 0.5; pointer-events: none; } /* ── STAT CHIPS ── */ .stat-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .stat-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 18px; min-width: 140px; flex: 1; } .stat-chip .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .stat-chip .value { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; color: var(--text); margin-top: 2px; } .stat-chip .sub { font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; } /* ── CHANNEL ACTIVITY CARDS ── */ .activity-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 24px; align-items: start; } .activity-card { position: relative; container-type: inline-size; padding: 16px 18px; background: linear-gradient(180deg, var(--surface-subtle) 0%, transparent 100%), var(--surface); overflow: hidden; align-self: start; } .activity-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent2); opacity: 0.9; } .activity-card-funded::before { background: linear-gradient(180deg, var(--accent2) 0%, #69d2ff 100%); } .activity-card-locked::before { background: linear-gradient(180deg, var(--accent) 0%, #ffd166 100%); } .activity-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .activity-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent2); } .activity-card-locked .activity-card-title { color: var(--accent); } .activity-card-context { font-size: 10px; color: var(--text-dim); font-family: 'DM Mono', monospace; text-align: right; line-height: 1.5; } .activity-card-headline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .activity-card-funded .activity-card-metric-block { border: none; } .activity-card-locked .activity-card-metric-block { border: none; } .activity-card-metric-block { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; overflow: hidden; padding: 8px 10px 10px; border: none; border-radius: 10px; background: none; } .activity-card-metric-block-volume { background: none; } .activity-card-metric-clickable { cursor: pointer; transition: filter 0.15s, border-color 0.15s; } .activity-card-funded .activity-card-metric-clickable:hover .activity-card-units { text-shadow: 0 0 8px rgba(79, 195, 247, 0.9), 0 0 20px rgba(79, 195, 247, 0.55), 0 0 48px rgba(79, 195, 247, 0.25); } .activity-card-locked .activity-card-metric-clickable:hover .activity-card-units { text-shadow: 0 0 8px rgba(240, 165, 0, 0.9), 0 0 20px rgba(240, 165, 0, 0.55), 0 0 48px rgba(240, 165, 0, 0.25); } .activity-card-metric-clickable:hover .activity-card-volume { text-shadow: 0 0 8px rgba(220, 235, 255, 0.7), 0 0 24px rgba(220, 235, 255, 0.3); } .activity-card-metric-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); font-family: 'DM Mono', monospace; white-space: nowrap; } .activity-card-units { display: block; font-family: 'Syne', sans-serif; font-size: 56px; font-weight: 700; line-height: 1; color: var(--accent2); } .activity-card-locked .activity-card-units { color: var(--accent); } .activity-card-volume { display: block; font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 700; line-height: 1; font-size: clamp(16px, 9cqw, 38px); white-space: nowrap; color: color-mix(in srgb, var(--text) 90%, var(--accent2) 10%); } .activity-card-hint, .activity-card-empty { font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; } .activity-card-hint { margin-bottom: 10px; font-style: italic; } .activity-card-columns { display: grid; grid-template-columns: minmax(0, 1fr) 64px 96px; gap: 8px; padding: 8px 10px 6px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 8px; } .activity-card-columns-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-family: 'DM Mono', monospace; } .activity-card-columns-label:nth-child(2), .activity-card-columns-label:nth-child(3) { text-align: right; } .activity-card-empty { padding: 12px 0 4px; } .activity-card-body { display: flex; flex-direction: column; gap: 8px; } .activity-channel-block { --activity-channel-color: var(--accent2); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--activity-channel-color) 10%, transparent) 0%, color-mix(in srgb, var(--surface-subtle) 70%, transparent) 100%); padding: 8px 10px; transition: border-color 0.15s, background 0.15s; } .activity-channel-block:hover { border-color: color-mix(in srgb, var(--activity-channel-color) 40%, rgba(255, 255, 255, 0.09)); background: linear-gradient(180deg, color-mix(in srgb, var(--activity-channel-color) 16%, transparent) 0%, var(--surface-subtle) 100%); } .activity-channel-block.expanded { border-color: color-mix(in srgb, var(--activity-channel-color) 48%, rgba(255, 255, 255, 0.10)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--activity-channel-color) 18%, transparent); } .activity-channel-wholesale { --activity-channel-color: var(--wholesale); } .activity-channel-retail { --activity-channel-color: var(--retail); } .activity-channel-broker { --activity-channel-color: var(--broker); } .activity-channel-correspondent { --activity-channel-color: var(--correspondent); } .activity-channel-row { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; cursor: pointer; text-align: left; } .activity-channel-left { min-width: 0; display: flex; align-items: flex-start; gap: 10px; } .activity-channel-chev { margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--activity-channel-color); transform: rotate(0deg); transition: transform 0.15s; } .activity-channel-block.expanded .activity-channel-chev { transform: rotate(90deg); } .activity-channel-name-wrap { min-width: 0; display: flex; flex-direction: column; } .activity-channel-name { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--activity-channel-color); } .activity-channel-role { font-size: 10px; color: var(--text-dim); font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: 0.06em; } .activity-channel-totals { display: grid; grid-template-columns: 64px 96px; align-items: baseline; gap: 8px; white-space: nowrap; } .activity-channel-metric, .activity-rep-metric { display: inline-flex; align-items: baseline; justify-content: flex-end; } .activity-channel-units { min-width: 64px; font-size: 18px; font-weight: 700; color: color-mix(in srgb, var(--activity-channel-color) 78%, var(--text)); text-align: right; } .activity-channel-volume { min-width: 96px; font-size: 12px; color: color-mix(in srgb, var(--activity-channel-color) 56%, var(--text-muted)); font-family: 'DM Mono', monospace; text-align: right; } .activity-rep-list { display: none; margin: 8px 0 0 22px; padding: 0; list-style: none; } .activity-channel-block.expanded .activity-rep-list { display: flex; flex-direction: column; gap: 6px; } .activity-rep-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; background: rgba(28, 35, 48, 0.75); } .activity-rep-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text); font-weight: 500; } .activity-rep-metrics { display: grid; grid-template-columns: 64px 96px; align-items: baseline; gap: 8px; white-space: nowrap; } .activity-rep-metrics.clickable { cursor: pointer; transition: opacity 0.15s; } .activity-rep-metrics.clickable:hover .activity-rep-units { color: color-mix(in srgb, var(--activity-channel-color) 90%, white); text-shadow: 0 0 6px color-mix(in srgb, var(--activity-channel-color) 80%, transparent), 0 0 18px color-mix(in srgb, var(--activity-channel-color) 45%, transparent); } .activity-rep-metrics.clickable:hover .activity-rep-volume { color: color-mix(in srgb, var(--activity-channel-color) 70%, var(--text-muted)); text-shadow: 0 0 8px color-mix(in srgb, var(--activity-channel-color) 35%, transparent); } .activity-rep-units { min-width: 64px; font-size: 16px; font-weight: 700; color: var(--text); text-align: right; } .activity-rep-volume { min-width: 96px; font-size: 12px; color: var(--text-muted); font-family: 'DM Mono', monospace; text-align: right; } /* ── REPORT SELECTOR ── */ .report-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; padding: 6px; background: var(--surface2); border-radius: 10px; border: 1px solid var(--border); } .report-tab { padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted); transition: all 0.15s; border: 1px solid transparent; white-space: nowrap; } .report-tab:hover { color: var(--text); background: var(--surface); } .report-tab.active { background: var(--surface); color: var(--accent); border-color: var(--border); } /* ── CHANNEL 3-ROW TAB GRID ── */ .channel-tab-grid { display: grid; grid-template-columns: 56px repeat(6, 1fr); row-gap: 0; column-gap: 6px; padding: 10px 10px 8px; } .channel-tab-grid .report-tab { text-align: center; margin: 3px 0; } .tab-row-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); text-align: right; padding-right: 8px; white-space: nowrap; align-self: center; margin: 3px 0; } /* * Layout (col 1 = label, cols 2–7 = tabs): * * Col: 1 2 3 4 5 6 7 * R1: Pipeline Summary Approved Locked Pipeline Final UW/CTC Docs In/Out Active Pipeline * sep: ──────────────────────────────── ACTIVITY ───────────────────────────────────────────── * R2: Daily Funded Approved Locked Today Apps Today Sub to UW * Today Today Today * ──: ────────────────────────────────────────────────────────────────────────────────────── * R3: MTD MTD MTD MTD Locked MTD Apps MTD Subs to UW * Funded Approved * * Summary (col 2) is directly above Funded Today (col 2) and MTD Funded (col 2) ✓ * Locked Pipeline / Locked Today / MTD Locked all in col 4 ✓ * Active Pipeline (col 7, row 1) is above Apps Today (col 5)... wait — re-reading: * "Move Active Pipeline to be above Apps Today and MTD" → col 5 * So Active Pipeline → col 5, Final UW/CTC → col 6, Docs In/Out → col 7? No — * "Final UW/CTC before Docs In/Out" → finaluw col 6, docs col 7. * Active Pipeline col 5 = above Apps Today col 5 ✓ and MTD Apps col 5 ✓ */ /* ── Row 1: Pipeline ── */ .channel-tab-grid .report-tab[data-sub="summary"] { grid-column: 2; grid-row: 1; } .channel-tab-grid .report-tab[data-sub="approved"] { grid-column: 3; grid-row: 1; } .channel-tab-grid .report-tab[data-sub="locked"] { grid-column: 4; grid-row: 1; } .channel-tab-grid .report-tab[data-sub="active"] { grid-column: 5; grid-row: 1; } .channel-tab-grid .report-tab[data-sub="finaluw"] { grid-column: 6; grid-row: 1; } .channel-tab-grid .report-tab[data-sub="docs"] { grid-column: 7; grid-row: 1; } /* ── Section separator: prominent divider between Pipeline row and Activity rows ── */ .tab-section-sep { grid-column: 1 / -1; grid-row: 2; height: 18px; position: relative; display: flex; align-items: center; margin: 4px 0; } .tab-section-sep::before { content: ''; position: absolute; inset: 50% 0 auto 0; height: 2px; background: linear-gradient(to right, transparent, var(--border) 8%, var(--border) 92%, transparent); } .tab-section-sep::after { content: 'ACTIVITY'; position: absolute; left: 50%; transform: translateX(-50%); background: var(--surface2); padding: 0 12px; font-size: 8px; font-weight: 700; letter-spacing: .12em; color: var(--text-dim); text-transform: uppercase; white-space: nowrap; } /* ── Row 2: Daily — col 4 = Locked Today, col 5 = Apps Today ── */ .channel-tab-grid .tab-label-daily { grid-column: 1; grid-row: 3; } .channel-tab-grid .report-tab[data-sub="funded_today"] { grid-column: 2; grid-row: 3; } .channel-tab-grid .report-tab[data-sub="approved_today"] { grid-column: 3; grid-row: 3; } .channel-tab-grid .report-tab[data-sub="locked_today"] { grid-column: 4; grid-row: 3; } .channel-tab-grid .report-tab[data-sub="apps_today"] { grid-column: 5; grid-row: 3; } .channel-tab-grid .report-tab[data-sub="subs_today"] { grid-column: 6; grid-row: 3; } /* ── Thin separator between Daily and MTD rows ── */ .tab-row-sep { grid-column: 1 / -1; grid-row: 4; height: 1px; background: color-mix(in srgb, var(--border) 60%, transparent); margin: 4px 0; } /* ── Row 3: MTD — col 4 = MTD Locked, col 5 = MTD Apps ── */ .channel-tab-grid .tab-label-mtd { grid-column: 1; grid-row: 5; } .channel-tab-grid .report-tab[data-sub="mtdfunded"] { grid-column: 2; grid-row: 5; } .channel-tab-grid .report-tab[data-sub="mtdapproved"] { grid-column: 3; grid-row: 5; } .channel-tab-grid .report-tab[data-sub="mtd_locks"] { grid-column: 4; grid-row: 5; } .channel-tab-grid .report-tab[data-sub="apps"] { grid-column: 5; grid-row: 5; } .channel-tab-grid .report-tab[data-sub="subs"] { grid-column: 6; grid-row: 5; } /* ── Mobile: collapse to flex-wrap ── */ @media (max-width: 960px) { .channel-tab-grid { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px; } .tab-label-daily, .tab-label-mtd, .tab-row-sep, .tab-section-sep { display: none; } .channel-tab-grid .report-tab { grid-column: auto; grid-row: auto; } } /* ── TABLES ── */ .table-wrap-outer { position: relative; } .table-wrap { position: relative; overflow-x: auto; /* keep horizontal scroll for wide tables */ border-radius: 8px; border: 1px solid var(--border); scrollbar-width: none; /* Firefox */ } .table-wrap::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .table-wrap-outer::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 36px; pointer-events: none; opacity: 0; transition: opacity 180ms ease; z-index: 3; background: linear-gradient(to left, color-mix(in srgb, var(--surface) 70%, transparent) 0%, transparent 100%); } .table-wrap-outer.can-scroll-right::after { opacity: 1; } .table-wrap.can-scroll-left td:first-child, .table-wrap.can-scroll-left thead th:first-child { box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.35); clip-path: inset(0 -12px 0 0); } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; } thead th { background: var(--surface2); color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--border); position: sticky; top: var(--header-row-1-offset); z-index: 3; } thead th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface2); z-index: 5; } tbody tr { transition: background 0.1s; } tbody tr td { border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } tbody tr:hover { background: color-mix(in srgb, var(--surface-hover) 50%, transparent); } tbody tr.total-row { background: color-mix(in srgb, var(--accent) 5%, transparent); font-weight: 600; } tbody tr.total-row td { color: var(--text); border-top: 1px solid var(--border); } tbody tr.total-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } tbody tr.inactive-rep-row td { opacity: 0.65; border-top: 1px dashed var(--border); } tbody tr.inactive-rep-row:hover td { opacity: 0.85; } .inactive-rep-cell { font-style: italic; color: var(--text-dim) !important; } .inactive-rep-tag { font-size: 10px; opacity: 0.7; font-style: italic; } tbody tr.channel-group-header td { background: var(--surface2); padding: 7px 12px; border-bottom: 1px solid var(--border); border-top: 2px solid var(--border); font-size: 11px; letter-spacing: 0.04em; } tbody tr.channel-group-header td:first-child { position: sticky; left: 0; z-index: 2; } tbody tr.channel-group-header:first-child td { border-top: none; } tbody tr.channel-group-header:hover td { background: var(--surface2); } tbody tr.channel-subtotal-row { background: color-mix(in srgb, var(--surface-hover) 62%, transparent); font-weight: 600; } tbody tr.channel-subtotal-row:hover { background: color-mix(in srgb, var(--surface-hover) 62%, transparent); } tbody tr.channel-subtotal-row td { font-family: 'DM Mono', monospace; font-size: 11px; border-top: 1px solid var(--border); border-bottom: 2px solid var(--border); } tbody tr.channel-subtotal-row td:first-child { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; position: sticky; left: 0; z-index: 2; background: var(--surface2); } td { padding: 8px 12px; text-align: right; color: var(--text-muted); font-family: 'DM Mono', monospace; font-size: 11px; } td:first-child { text-align: left; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--text); position: sticky; left: 0; background: var(--surface); z-index: 1; } tbody tr:hover td:first-child { background: var(--surface2); } tbody tr.total-row td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface2); } tbody tr.total-row:hover td:first-child { background: var(--surface2); } tbody tr.channel-subtotal-row:hover td:first-child { background: var(--surface2); } tbody tr.total-row td[onclick]:hover, tbody tr.channel-subtotal-row td[onclick]:hover, tbody tr.tpo-ae-total-row td[onclick]:hover { background: transparent !important; } tbody tr.tpo-ae-total-row, tbody tr.tpo-ae-total-row:hover { background: transparent; } tbody tr.tpo-ae-total-row td:first-child, tbody tr.tpo-ae-total-row:hover td:first-child { background: var(--surface); overflow: hidden; } .zero { color: var(--text-dim) !important; } /* Column group headers */ thead tr.group-row th { text-align: center; font-size: 10px; padding: 5px 12px; border-bottom: none; border-right: 1px solid var(--border); top: var(--header-row-1-offset); z-index: 4; } thead tr.group-row th:first-child { z-index: 5; } /* When a group-row is present, the column-names row docks just below it. */ thead tr.group-row + tr th { top: var(--header-row-2-offset); z-index: 3; } thead tr.group-row + tr th:first-child { z-index: 5; } /* ── LOAN TYPE BADGES ── */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .badge-wholesale { background: var(--badge-wholesale-bg); color: var(--wholesale); } .badge-retail { background: var(--badge-retail-bg); color: var(--retail); } .badge-broker { background: var(--badge-broker-bg); color: var(--broker); } /* ── FORM ELEMENTS ── */ .form-group { margin-bottom: 16px; } .form-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .form-select { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none; transition: border-color 0.15s; } .form-input:focus, .form-select:focus { border-color: var(--accent); } .form-select option { background: var(--surface2); } /* ── PEOPLE LIST ── */ .people-list { display: flex; flex-direction: column; gap: 4px; max-height: 500px; overflow-y: auto; } .person-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 6px; background: var(--surface2); border: 1px solid transparent; gap: 10px; transition: opacity 0.2s; } .person-item:hover { border-color: var(--border); } .person-item.inactive { opacity: 0.45; } .person-item.inactive .person-name { text-decoration: line-through; color: var(--text-muted); } .person-name { font-size: 13px; color: var(--text); font-weight: 500; } .person-meta { font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; } .person-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Toggle switch */ .toggle-wrap { display: flex; align-items: center; gap: 6px; cursor: pointer; } .toggle-label { font-size: 11px; color: var(--text-muted); font-weight: 500; white-space: nowrap; } .toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-track { position: absolute; inset: 0; background: var(--border); border-radius: 10px; transition: background 0.2s; cursor: pointer; } .toggle-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-muted); transition: transform 0.2s, background 0.2s; } .toggle input:checked + .toggle-track { background: color-mix(in srgb, var(--accent3) 30%, transparent); border: 1px solid var(--accent3); } .toggle input:checked + .toggle-track::after { transform: translateX(16px); background: var(--accent3); } /* Filter tabs for user list */ .user-filter-bar { display: flex; gap: 4px; margin-bottom: 10px; } .user-filter-btn { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-muted); transition: all 0.15s; } .user-filter-btn:hover { color: var(--text); background: var(--surface); } .user-filter-btn.active { background: var(--surface); color: var(--text); border-color: var(--text-muted); } .add-person-row { display: flex; gap: 8px; margin-top: 12px; } /* ── RECENTLY REMOVED ── */ .recently-removed-section { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 6px; } .recently-removed-toggle { font-size: 11px; color: var(--text-muted); cursor: pointer; padding: 4px 2px; user-select: none; display: flex; align-items: center; gap: 4px; } .recently-removed-toggle:hover { color: var(--text); } .recently-removed-toggle.dimmed { color: var(--text-dim); cursor: default; } .recently-removed-chevron { font-size: 10px; } .recently-removed-list { display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow-y: auto; margin-top: 4px; padding: 2px 0; } .recently-removed-row { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: 12px; } .recently-removed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); } .recently-removed-date { font-size: 11px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; } /* ── MANAGE USERS SAVE BAR ── */ #users-save-bar, #loantypes-save-bar { position: fixed; bottom: 0; left: 220px; right: 0; z-index: 200; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 24px; background: var(--surface2); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0,0,0,0.35); } .save-bar-visible { padding-bottom: 80px !important; } .users-save-status-label { font-size: 12px; color: var(--accent); font-style: italic; margin-right: 4px; } .loantype-list { display: flex; flex-direction: column; gap: 4px; } .loantype-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; background: var(--surface2); border: 1px solid transparent; } .loantype-item:hover { border-color: var(--border); } /* ── PROGRAM MAPPING TABLE ── */ .prog-row { display: grid; grid-template-columns: 1fr 180px 80px; align-items: center; padding: 9px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); gap: 12px; transition: background 0.1s; cursor: default; } .prog-row:hover { background: color-mix(in srgb, var(--surface-hover) 30%, transparent); } .prog-row:last-child { border-bottom: none; } .prog-name { font-size: 12px; color: var(--text); font-family: 'DM Mono', monospace; cursor: pointer; } .prog-name:hover { text-decoration: underline; color: var(--accent); } .prog-count { font-size: 10px; color: var(--text-dim); font-family: 'DM Mono', monospace; } .prog-cat-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; } .prog-unmapped { color: var(--danger); font-size: 11px; font-weight: 500; } /* ── PROGRAM MAPPING CATEGORY SECTIONS ── */ .prog-cat-section { border-bottom: 1px solid var(--border); } .prog-cat-section:last-child { border-bottom: none; } .prog-cat-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; user-select: none; transition: background 0.1s; } .prog-cat-header:hover { background: var(--surface2); } .prog-cat-chev { font-size: 10px; color: var(--text-dim); flex-shrink: 0; } .prog-cat-label { font-size: 13px; font-weight: 600; flex: 1; } .prog-cat-count { font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; } .prog-cat-active-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .prog-cat-active-link:hover { color: var(--accent); } .prog-cat-body { border-top: 1px solid var(--border); } .prog-cat-empty { padding: 12px 16px; font-size: 12px; color: var(--text-dim); font-style: italic; } .prog-deleted-section { border-top: 1px solid var(--border); } .prog-deleted-header { display: flex; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer; font-size: 12px; color: var(--text-muted); user-select: none; } .prog-deleted-header:hover { color: var(--text); } .prog-deleted-body { padding: 0 16px 8px; max-height: 160px; overflow: auto; } /* ── CATEGORY CHIPS ── */ .cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.15s; } .cat-chip:hover { filter: brightness(1.2); } .cat-chip .cat-chip-count { font-size: 10px; font-weight: 400; opacity: 0.7; font-family: 'DM Mono', monospace; } /* ── COLOR SWATCHES ── */ .color-swatch { width: 28px; height: 28px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: transform 0.1s, border-color 0.1s; flex-shrink: 0; } .color-swatch:hover { transform: scale(1.15); } .color-swatch.selected { border-color: #fff; transform: scale(1.1); } /* ── SUGGESTION ROWS ── */ .suggest-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; background: var(--surface2); border: 1px solid transparent; } .suggest-row:hover { border-color: var(--border); } .suggest-prog { font-size: 12px; color: var(--text); font-family: 'DM Mono', monospace; flex: 1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .suggest-arrow { color: var(--text-dim); font-size: 14px; } .suggest-cat { font-size: 11px; font-weight: 600; } /* ── AE TEAMS ── */ .team-block { border-bottom: 1px solid var(--border); } .team-block:last-child { border-bottom: none; } .team-header { display: flex; align-items: center; padding: 12px 20px; gap: 12px; cursor: pointer; transition: background 0.1s; user-select: none; } .team-header:hover { background: rgba(255,255,255,0.02); } .team-color-bar { width: 4px; height: 28px; border-radius: 2px; flex-shrink: 0; } .team-name { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; flex: 1; } .team-meta { font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; } .team-chevron { font-size: 12px; color: var(--text-dim); transition: transform 0.2s; } .team-chevron.open { transform: rotate(90deg); } .team-ae-grid { display: none; padding: 0 20px 14px 36px; flex-wrap: wrap; gap: 6px; } .team-ae-grid.open { display: flex; } .team-ae-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 500; background: var(--surface2); border: 1px solid var(--border); color: var(--text); } .unassigned-block { padding: 12px 20px; border-top: 1px solid var(--border); background: rgba(248,81,73,0.03); } /* Team picker rows */ .team-pick-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; font-size: 12px; color: var(--text); cursor: pointer; border: 1px solid transparent; transition: all 0.1s; background: var(--surface2); } .team-pick-row:hover { border-color: var(--border); background: var(--surface); } .team-pick-row .pick-name { flex: 1; } /* ── GOAL SECTION ── */ .goal-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-top: 4px; } .goal-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s; } /* ── GOAL EDITOR ── */ .goal-editor { margin-left: auto; display: flex; flex-direction: column; gap: 6px; min-width: 200px; } .goal-editor-row { display: flex; gap: 8px; align-items: center; } .goal-editor-input { width: 200px; font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 600; text-align: right; letter-spacing: 0.02em; color: var(--accent); } /* ── MODAL ── */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay-bg); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; will-change: transform; } .modal-header { flex-shrink: 0; padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; } .modal-body { flex: 1 1 auto; overflow-y: auto; padding: 24px; will-change: scroll-position; } .modal-footer { flex-shrink: 0; padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; } .close-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 20px; padding: 4px; line-height: 1; } .close-btn:hover { color: var(--text); } /* ── TOAST ── */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 18px; font-size: 13px; font-weight: 500; z-index: 300; box-shadow: 0 8px 24px rgba(0,0,0,0.4); display: none; align-items: center; gap: 10px; max-width: 340px; transition: bottom 0.15s ease; } .toast.show { display: flex; } .toast.success { border-color: color-mix(in srgb, var(--accent3) 30%, transparent); } .toast.success .toast-icon { color: var(--accent3); } .toast.error { border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .toast.error .toast-icon { color: var(--danger); } /* ── PAGE SECTIONS ── */ .section { display: none; } .section.active { display: block; } /* ── GRID ── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } /* ── SEPARATOR ── */ .separator { height: 1px; background: var(--border); margin: 20px 0; } /* ── FILTER BAR ── */ .filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; } .filter-bar select, .filter-bar input { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; color: var(--text); font-size: 12px; font-family: 'DM Sans', sans-serif; outline: none; } /* ── EMAIL PREVIEW ── */ .email-preview { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 16px; font-size: 12px; font-family: 'DM Mono', monospace; white-space: pre-wrap; max-height: 300px; overflow-y: auto; color: var(--text-muted); line-height: 1.6; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--surface); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ── ADMIN AUTH ── */ .admin-lock-overlay { position: fixed; inset: 0; background: var(--overlay-bg-heavy); backdrop-filter: blur(8px); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; } .admin-lock-box { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 380px; padding: 36px 32px 28px; text-align: center; } .admin-lock-icon { font-size: 36px; margin-bottom: 14px; } .admin-lock-box h2 { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .admin-lock-box p { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; } .admin-lock-input-wrap { position: relative; margin-bottom: 14px; } .admin-lock-input-wrap input { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 40px 10px 14px; color: var(--text); font-size: 14px; font-family: 'DM Sans', sans-serif; outline: none; transition: border-color 0.15s; text-align: center; letter-spacing: 0.1em; } .admin-lock-input-wrap input:focus { border-color: var(--accent); } .admin-lock-input-wrap input.error { border-color: var(--danger); animation: shake 0.35s ease; } @keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .admin-lock-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 2px; line-height: 1; } .admin-lock-toggle:hover { color: var(--text); } .admin-lock-error { font-size: 12px; color: var(--danger); margin-bottom: 12px; min-height: 16px; } .admin-lock-btn { width: 100%; padding: 10px; background: var(--accent); color: #000; font-weight: 700; font-size: 14px; font-family: 'DM Sans', sans-serif; border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s; } .admin-lock-btn:hover { background: #ffb930; } .admin-lock-cancel { display: block; margin-top: 14px; font-size: 12px; color: var(--text-muted); cursor: pointer; background: none; border: none; font-family: 'DM Sans', sans-serif; text-decoration: underline; } .admin-lock-cancel:hover { color: var(--text); } /* Lock badge on admin nav items */ .nav-item .admin-badge { margin-left: auto; font-size: 11px; opacity: 0.45; } /* Admin session indicator in sidebar footer */ .sidebar-admin-status { padding: 0 20px 12px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; } .sidebar-admin-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; } .sidebar-admin-status.unlocked .dot { background: var(--accent3); } .sidebar-admin-status.unlocked { color: var(--accent3); } .sidebar-admin-status button { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 11px; cursor: pointer; font-family: 'DM Mono', monospace; padding: 0; text-decoration: underline; } .sidebar-admin-status button:hover { color: var(--danger); } /* Role-based admin nav visibility */ body.role-viewer .admin-only { display: none; } /* Upgrade button uses accent color, not danger red */ #admin-upgrade-btn:hover { color: var(--accent) !important; } /* ── STATUS BADGE ── */ .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; } .pct-bar-mini { display: inline-block; width: 50px; height: 4px; background: var(--surface2); border-radius: 2px; vertical-align: middle; overflow: hidden; margin-left: 4px; } .pct-bar-mini-fill { height: 100%; background: var(--accent); border-radius: 2px; } .tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; font-family: 'DM Mono', monospace; } .tag-conv { background: rgba(79,195,247,0.12); color: #4fc3f7; } .tag-fha { background: rgba(255,183,77,0.12); color: #ffb74d; } .tag-va { background: rgba(239,154,154,0.12); color: #ef9a9a; } .tag-nonqm { background: rgba(206,147,216,0.12); color: var(--broker); } .tag-other { background: rgba(144,164,174,0.12); color: #90a4ae; } /* Pipeline status colors */ .s-active { color: var(--accent3); } .s-approved { color: var(--accent2); } .s-locked { color: var(--accent); } .s-funded { color: var(--retail); } .s-docs { color: var(--broker); } /* Notice box */ .notice { background: color-mix(in srgb, var(--accent2) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent2) 20%, transparent); border-radius: 8px; padding: 12px 16px; font-size: 13px; color: var(--accent2); margin-bottom: 20px; } /* ── UNIT COUNT UNDER VOLUME ── */ .unit-sub { display: block; font-size: 9.5px; font-family: 'DM Mono', monospace; font-weight: 400; color: var(--text-dim); margin-top: 1px; letter-spacing: 0.01em; } td.vol-cell { line-height: 1.35; vertical-align: middle; } td[onclick] { transition: background 0.12s; } td[onclick]:hover { background: var(--accent-glow) !important; } th.vol-header { vertical-align: bottom; } /* ── TEAM SUMMARY % OF TOTAL ── */ .pct-of-total { display: block; font-size: 9.5px; font-family: 'DM Mono', monospace; font-weight: 400; opacity: 0.72; margin-top: 1px; letter-spacing: 0.01em; } td.has-pct { line-height: 1.3; } /* ── DATE PICKER BAR ── */ .date-bar { display: none; align-items: center; gap: 12px; padding: 10px 32px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; flex-wrap: wrap; flex-shrink: 0; margin-bottom: 0; } .date-bar.visible { display: flex; } .date-bar-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .date-bar-pill { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; } .date-bar-pill input[type=date] { background: transparent; border: none; color: var(--accent); font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; outline: none; cursor: pointer; padding: 0; min-width: 130px; color-scheme: inherit; } .date-bar-pill input[type=date]::-webkit-calendar-picker-indicator { filter: var(--calendar-icon-filter); cursor: pointer; } .date-bar-shortcut { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-muted); transition: all 0.15s; white-space: nowrap; } .date-bar-shortcut:hover { color: var(--text); background: var(--surface2); } .date-bar-shortcut.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: var(--accent); } .date-bar-note { font-size: 11px; color: var(--text-dim); font-family: 'DM Mono', monospace; margin-left: 4px; } .data-sync-widgets { display: grid; gap: 18px; align-content: start; } .data-sync-card, #upload-status { margin: 0; } .data-sync-card, #upload-status > .card { position: relative; border-radius: 14px; border-color: color-mix(in srgb, var(--border) 90%, transparent); box-shadow: 0 14px 28px color-mix(in srgb, #000 12%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface2) 84%, transparent)); } .data-sync-card .card-header, #upload-status > .card .card-header { padding: 18px 22px; } .data-sync-card .card-body, #upload-status > .card .card-body { padding: 20px 22px; } .data-sync-card-copy { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; max-width: 56ch; } .data-sync-report-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .upload-progress-card { border-color: color-mix(in srgb, var(--accent3) 35%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent3) 8%, transparent), color-mix(in srgb, var(--accent3) 3%, transparent)); } .upload-progress-body { display: flex; align-items: center; gap: 14px; padding: 16px 18px; } .upload-progress-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent3) 25%, transparent); border-top-color: var(--accent3); animation: upload-spin 0.8s linear infinite; flex-shrink: 0; } .upload-progress-title { font-size: 12px; font-weight: 700; color: var(--accent3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; } .upload-progress-message { font-size: 13px; color: var(--text); } .poll-status-card { background: linear-gradient(180deg, color-mix(in srgb, var(--accent2) 6%, transparent), color-mix(in srgb, var(--accent2) 2%, transparent)); } .poll-status-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .poll-status-header-text { min-width: 0; flex: 1 1 auto; } .poll-status-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; } .poll-status-summary { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--text); font-size: 13px; font-weight: 600; } .poll-status-meta { color: var(--text-muted); font-size: 11px; font-family: 'DM Mono', monospace; text-align: right; line-height: 1.5; } .poll-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--text-dim); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-dim) 15%, transparent); } .poll-status-dot.success { background: var(--accent3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent3) 18%, transparent); } .poll-status-dot.error { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); } .poll-status-dot.in-progress { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); animation: poll-status-pulse 1.3s ease-in-out infinite; } .poll-status-body { padding-top: 16px; } .poll-status-history-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .poll-status-history-title { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .poll-status-toggle { padding-inline: 10px; font-size: 11px; } .poll-status-history { display: flex; flex-direction: column; gap: 8px; } .poll-status-history-group { display: flex; flex-direction: column; gap: 8px; } .poll-status-history-group[hidden] { display: none; } .poll-status-row { display: grid; grid-template-columns: minmax(110px, 150px) minmax(70px, 90px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 28%, transparent); border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); } .poll-status-time { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); } .poll-status-trigger { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .poll-status-row-detail { display: flex; align-items: center; gap: 10px; min-width: 0; } .poll-status-row-message { min-width: 0; color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .poll-status-duration { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); white-space: nowrap; } .poll-status-empty { border: 1px dashed color-mix(in srgb, var(--border) 90%, transparent); border-radius: 8px; padding: 14px 16px; color: var(--text-muted); font-size: 12px; } .upload-source-card { border-style: dashed; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), color-mix(in srgb, var(--accent) 2%, transparent)); } .upload-source-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; } .upload-source-text { min-width: 0; } .upload-source-title { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; } .upload-source-copy { color: var(--text-muted); font-size: 13px; line-height: 1.4; max-width: 480px; } .upload-source-select { width: 210px; min-width: 210px; flex-shrink: 0; padding: 8px 12px; font-size: 12px; } @media (max-width: 960px) { .poll-status-header { flex-direction: column; } .poll-status-header-actions { width: 100%; align-items: flex-start; } .poll-status-meta { text-align: left; } .poll-status-history-header { flex-direction: column; align-items: flex-start; } .poll-status-row { grid-template-columns: 1fr; gap: 8px; } } @keyframes upload-spin { to { transform: rotate(360deg); } } @keyframes poll-status-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } 50% { transform: scale(1.08); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent); } } /* ── DRILLDOWN MODAL TABLE ── */ .drilldown-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; } .drilldown-table thead th:first-child, .drilldown-table td:first-child, .drilldown-table tfoot td:first-child { position: static; left: auto; z-index: auto; background: transparent; } .drilldown-table thead th:first-child { text-align: right; } .drilldown-table tbody td:first-child { text-align: right; font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 400; color: var(--text-muted); } .drilldown-table tfoot td:first-child { text-align: left; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; } .drilldown-th { padding: 10px 16px; font-weight: 600; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; text-align: left; } .drilldown-th.right { text-align: right; } .drilldown-row { border-bottom: 1px solid var(--border); } .drilldown-td { padding: 9px 16px; text-align: left; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drilldown-td-index { color: var(--text-muted); font-family: 'DM Mono', monospace; font-size: 12px; } .drilldown-td-mono { font-family: 'DM Mono', monospace; } .drilldown-td-amount { text-align: right; font-family: 'DM Mono', monospace; } .drilldown-empty { padding: 20px; text-align: center; color: var(--text-muted); } .drilldown-table .drilldown-empty { text-align: center !important; } .drilldown-total-row { background: var(--surface2); border-top: 2px solid var(--border); } .drilldown-total-label { padding: 10px 16px; font-weight: 600; } .drilldown-total-amount { padding: 10px 16px; text-align: right; font-weight: 600; font-family: 'DM Mono', monospace; } @media (max-width: 800px) { .sidebar { display: none; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .stat-chips { flex-direction: column; } .activity-cards { grid-template-columns: 1fr; } .data-sync-card .card-header, #upload-status > .card .card-header, .data-sync-card .card-body, #upload-status > .card .card-body { padding: 18px; } .data-sync-report-actions { flex-direction: column; } .upload-progress-body { align-items: flex-start; } .upload-source-body { flex-direction: column; align-items: stretch; } .upload-source-copy { max-width: none; } .upload-source-select { width: 100%; min-width: 0; } } /* ── Light mode ── */ [data-theme="light"] { color-scheme: light; --bg: #f5f7fa; --surface: #ffffff; --surface2: #eef0f3; --border: #d0d7de; --accent: #b07600; --accent2: #0277bd; --accent3: #2a7d4f; --danger: #cf222e; --text: #1c2330; --text-muted: #57606a; --text-dim: #8b949e; --wholesale: #0277bd; --retail: #2a7d4f; --broker: #7b3fa0; --correspondent: #00796b; --overlay-bg: rgba(0,0,0,0.5); --overlay-bg-heavy: rgba(0,0,0,0.6); --surface-hover: rgba(0,0,0,0.025); --surface-subtle: rgba(0,0,0,0.025); --accent-glow: rgba(176,118,0,0.055); --badge-wholesale-bg: rgba(2,119,189,0.12); --badge-retail-bg: rgba(42,125,79,0.12); --badge-broker-bg: rgba(123,63,160,0.12); --calendar-icon-filter: none; } [data-theme="light"] .activity-card-funded .activity-card-metric-clickable:hover .activity-card-units { text-shadow: 0 0 4px rgba(2, 119, 189, 0.28), 0 0 10px rgba(2, 119, 189, 0.12); } [data-theme="light"] .activity-card-locked .activity-card-metric-clickable:hover .activity-card-units { text-shadow: 0 0 4px rgba(176, 118, 0, 0.28), 0 0 10px rgba(176, 118, 0, 0.12); } [data-theme="light"] .activity-card-metric-clickable:hover .activity-card-volume { text-shadow: 0 0 5px rgba(2, 119, 189, 0.3), 0 0 14px rgba(2, 119, 189, 0.12); } [data-theme="light"] .activity-channel-block { border-color: color-mix(in srgb, var(--activity-channel-color) 16%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--activity-channel-color) 7%, white) 0%, color-mix(in srgb, white 96%, var(--activity-channel-color) 4%) 100%); } [data-theme="light"] .activity-channel-block:hover { border-color: color-mix(in srgb, var(--activity-channel-color) 26%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--activity-channel-color) 10%, white) 0%, color-mix(in srgb, white 94%, var(--activity-channel-color) 6%) 100%); } [data-theme="light"] .activity-channel-block.expanded { border-color: color-mix(in srgb, var(--activity-channel-color) 30%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--activity-channel-color) 10%, transparent); } [data-theme="light"] .activity-rep-row { border-color: color-mix(in srgb, var(--border) 85%, white); background: color-mix(in srgb, var(--surface) 94%, var(--activity-channel-color) 6%); } [data-theme="light"] tbody tr:hover { background: transparent; } [data-theme="light"] tbody tr:hover td:first-child { background: var(--surface); } [data-theme="light"] tbody tr.channel-group-header:hover td { background: var(--surface2); } [data-theme="light"] tbody tr.total-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } [data-theme="light"] tbody tr.total-row:hover td:first-child { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); } [data-theme="light"] tbody tr.channel-subtotal-row:hover { background: color-mix(in srgb, var(--surface-hover) 62%, transparent); } [data-theme="light"] tbody tr.channel-subtotal-row:hover td:first-child { background: color-mix(in srgb, var(--surface-hover) 62%, var(--surface)); } [data-theme="light"] .prog-row:hover { background: transparent; } [data-theme="light"] .team-header:hover { background: transparent; } [data-theme="light"] td[onclick]:hover { background: transparent !important; }