/* ═══════════════════════════════════════════════════ Pipeline Stats Modern — scoped styles All rules prefixed / scoped under #pipeline-stats-popup Referenced from: centralanalyzer/js/popups/pipeline-stats.js ═══════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap'); /* Scoped design tokens — copied from Lock Volume Indices system. Declared on BOTH the dialog wrapper and the content div so rules that target .ui-dialog.psm-dialog can resolve the vars. */ .ui-dialog.psm-dialog, #pipeline-stats-popup { --psm-bg-primary: #0b132b; --psm-bg-card: #111827; --psm-bg-card-alt: #141c2e; --psm-bg-elevated: #1a2236; --psm-border: #1e2a42; --psm-border-subtle: #162034; --psm-text-primary: #e8edf5; --psm-text-secondary: #8b95ad; --psm-text-muted: #5a6478; --psm-accent-orange: #ff8c42; --psm-accent-orange-dim: rgba(255, 140, 66, 0.15); --psm-accent-orange-glow: rgba(255, 140, 66, 0.3); --psm-coupon: #f5a623; --psm-delta-green: #34d399; --psm-delta-red: #f87171; --psm-delta-green-bg: rgba(52, 211, 153, 0.08); --psm-delta-red-bg: rgba(248, 113, 113, 0.08); --psm-threshold-blue: #6366f1; --psm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --psm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); --psm-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); /* Light-mode overrides */ --psm-lm-bg-card: #ffffff; --psm-lm-bg-elevated: #f9fafb; --psm-lm-bg-deep: #f0f2f5; --psm-lm-border: #d0d5dd; --psm-lm-border-subtle: #e5e7eb; --psm-lm-text-primary: #1a1a2e; --psm-lm-text-secondary: #6b7280; --psm-lm-text-muted: #9ca3af; } /* ─── Dialog wrapper overrides ─── */ .ui-dialog.psm-dialog { padding: 0; border: 1px solid #e5e7eb; border-radius: 20px; background: #ffffff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 20px 60px rgba(0, 0, 0, 0.12); overflow: hidden; max-height: 92vh; display: flex; flex-direction: column; } body.dark-mode .ui-dialog.psm-dialog { background: #111827; border-color: var(--psm-border); box-shadow: var(--psm-shadow-xl), 0 0 80px rgba(11, 19, 43, 0.6); } .ui-dialog.psm-dialog .ui-dialog-titlebar { /* Keep present but collapsed so jQuery UI's titlebar-drag handle still exists; our custom .psm-header provides the visible drag surface. */ display: none !important; height: 0; padding: 0; border: none; } .ui-dialog.psm-dialog .ui-dialog-content#pipeline-stats-popup { padding: 0; background: #ffffff; border: none; font-family: 'DM Sans', 'Lucida Grande', Arial, sans-serif; font-size: 13px; color: var(--psm-lm-text-primary); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 92vh; overflow: hidden; } body.dark-mode .ui-dialog.psm-dialog .ui-dialog-content#pipeline-stats-popup { color: var(--psm-text-primary); background: #111827; } /* ─── Fullscreen mode (matches the Market Levels fullscreen UX) ─── */ /* We DO NOT force position:fixed or a high z-index here — doing so would put the dialog into its own stacking context, which traps the jQuery UI datepicker (appended to ) behind it. Instead, fullscreen just resizes the dialog to fill the viewport via the jQuery UI Dialog API, so the datepicker keeps its normal stacking behaviour. */ .ui-dialog.psm-dialog.psm-fullscreen { max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; border: none !important; } /* JPopups.open() sets an inline `max-width` on the content div (from the popup's `maxWidth` option). In fullscreen that cap leaves empty space on the right of the dialog — force it back to none here and on the dialog. Also force the flex chain so .psm-body scrolls (jQuery UI's _size() may set an inline height on this div that fights our flex layout). */ .ui-dialog.psm-dialog.psm-fullscreen .ui-dialog-content#pipeline-stats-popup { max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; width: 100% !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; } /* Body MUST be the scroll container in fullscreen — explicitly cap its height relative to the viewport and force overflow-y so neither jQuery UI nor another parent rule can disable the wheel/touch scroll. */ .ui-dialog.psm-dialog.psm-fullscreen #pipeline-stats-popup .psm-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: calc(100vh - 70px) !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } .ui-dialog.psm-dialog.psm-fullscreen .psm-header { cursor: default; flex: 0 0 auto !important; } .ui-dialog.psm-dialog.psm-fullscreen .pipeline-stats-chart { height: calc(100vh - 460px) !important; min-height: 360px !important; } body.psm-fullscreen-active { overflow: hidden; } /* ─── Header ─── */ #pipeline-stats-popup .psm-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; flex: 0 0 auto; cursor: move; user-select: none; } #pipeline-stats-popup .psm-header .psm-icon-btn, #pipeline-stats-popup .psm-header-right { cursor: default; } #pipeline-stats-popup .psm-header .psm-icon-btn { cursor: pointer; } body.dark-mode #pipeline-stats-popup .psm-header { border-bottom-color: var(--psm-border); background: linear-gradient(135deg, var(--psm-bg-elevated) 0%, var(--psm-bg-card) 100%); } #pipeline-stats-popup .psm-header-left { display: flex; align-items: center; gap: 14px; } #pipeline-stats-popup .psm-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--psm-accent-orange) 0%, var(--psm-coupon) 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(255, 140, 66, 0.35); flex-shrink: 0; } #pipeline-stats-popup .psm-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #pipeline-stats-popup .psm-title { font-size: 17px; font-weight: 700; letter-spacing: 0.2px; color: var(--psm-lm-text-primary); } body.dark-mode #pipeline-stats-popup .psm-title { color: var(--psm-text-primary); } #pipeline-stats-popup .psm-subtitle { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--psm-lm-text-muted); letter-spacing: 0.5px; margin-top: 2px; text-transform: uppercase; } body.dark-mode #pipeline-stats-popup .psm-subtitle { color: var(--psm-text-muted); } #pipeline-stats-popup .psm-header-right { display: flex; align-items: center; gap: 8px; } #pipeline-stats-popup .psm-icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--psm-lm-border-subtle); background: var(--psm-lm-bg-card); color: var(--psm-lm-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } body.dark-mode #pipeline-stats-popup .psm-icon-btn { background: var(--psm-bg-elevated); border-color: var(--psm-border); color: var(--psm-text-secondary); } #pipeline-stats-popup .psm-icon-btn:hover { color: var(--psm-accent-orange); border-color: var(--psm-accent-orange-glow); } #pipeline-stats-popup .psm-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ─── Body (scrollable region) ─── */ #pipeline-stats-popup .psm-body { padding: 22px 26px 26px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; background: #ffffff; } body.dark-mode #pipeline-stats-popup .psm-body { background: #111827; } #pipeline-stats-popup .psm-body::-webkit-scrollbar { width: 10px; } #pipeline-stats-popup .psm-body::-webkit-scrollbar-track { background: transparent; } #pipeline-stats-popup .psm-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } body.dark-mode #pipeline-stats-popup .psm-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); background-clip: padding-box; border: 2px solid transparent; } /* ─── KPI row ─── */ #pipeline-stats-popup .psm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } @media (max-width: 900px) { #pipeline-stats-popup .psm-kpis { grid-template-columns: repeat(2, 1fr); } } #pipeline-stats-popup .psm-kpi { background: var(--psm-lm-bg-elevated); border: 1px solid var(--psm-lm-border-subtle); border-radius: 14px; padding: 14px 16px; position: relative; overflow: hidden; } body.dark-mode #pipeline-stats-popup .psm-kpi { background: linear-gradient(180deg, var(--psm-bg-card-alt) 0%, var(--psm-bg-card) 100%); border-color: var(--psm-border); } #pipeline-stats-popup .psm-kpi::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 140, 66, 0.4), transparent); opacity: 0; transition: opacity 0.3s; } #pipeline-stats-popup .psm-kpi:hover::after { opacity: 1; } #pipeline-stats-popup .psm-kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--psm-lm-text-muted); margin-bottom: 8px; } body.dark-mode #pipeline-stats-popup .psm-kpi-label { color: var(--psm-text-muted); } #pipeline-stats-popup .psm-kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: var(--psm-lm-text-primary); font-variant-numeric: tabular-nums; margin-bottom: 3px; } body.dark-mode #pipeline-stats-popup .psm-kpi-value { color: var(--psm-text-primary); } #pipeline-stats-popup .psm-kpi-meta { font-size: 11.5px; color: var(--psm-lm-text-secondary); display: flex; align-items: center; gap: 6px; } body.dark-mode #pipeline-stats-popup .psm-kpi-meta { color: var(--psm-text-secondary); } #pipeline-stats-popup .psm-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; padding: 2px 7px; border-radius: 5px; } #pipeline-stats-popup .psm-badge.up { color: var(--psm-delta-green); background: var(--psm-delta-green-bg); border: 1px solid rgba(52, 211, 153, 0.25); } #pipeline-stats-popup .psm-badge.down { color: var(--psm-delta-red); background: var(--psm-delta-red-bg); border: 1px solid rgba(248, 113, 113, 0.25); } #pipeline-stats-popup .psm-badge.neutral { color: var(--psm-threshold-blue); background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.25); } /* ─── Chart card ─── */ #pipeline-stats-popup .psm-chart-card { background: var(--psm-lm-bg-elevated); border: 1px solid var(--psm-lm-border-subtle); border-radius: 16px; padding: 20px 22px 18px; margin-bottom: 18px; } body.dark-mode #pipeline-stats-popup .psm-chart-card { background: linear-gradient(180deg, var(--psm-bg-card-alt) 0%, var(--psm-bg-card) 100%); border-color: var(--psm-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); } #pipeline-stats-popup .psm-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } #pipeline-stats-popup .psm-chart-title { font-size: 14px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--psm-lm-text-primary); } body.dark-mode #pipeline-stats-popup .psm-chart-title { color: var(--psm-text-primary); } #pipeline-stats-popup .psm-chart-sub { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--psm-lm-text-muted); letter-spacing: 0.4px; margin-top: 4px; } body.dark-mode #pipeline-stats-popup .psm-chart-sub { color: var(--psm-text-muted); } /* ─── Filters row ─── */ #pipeline-stats-popup .psm-filters { display: grid; grid-template-columns: 1fr 1fr 180px 1fr auto; gap: 12px; align-items: end; padding: 14px; background: var(--psm-lm-bg-card); border: 1px solid var(--psm-lm-border-subtle); border-radius: 12px; margin-bottom: 18px; } body.dark-mode #pipeline-stats-popup .psm-filters { background: var(--psm-bg-elevated); border-color: var(--psm-border); } @media (max-width: 1000px) { #pipeline-stats-popup .psm-filters { grid-template-columns: 1fr 1fr; } } #pipeline-stats-popup .psm-field { display: flex; flex-direction: column; gap: 6px; } #pipeline-stats-popup .psm-field-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--psm-lm-text-muted); } body.dark-mode #pipeline-stats-popup .psm-field-label { color: var(--psm-text-muted); } #pipeline-stats-popup .psm-input, #pipeline-stats-popup .psm-select { font-family: 'DM Sans', sans-serif; font-size: 12.5px; padding: 9px 12px; background: var(--psm-lm-bg-elevated); border: 1px solid var(--psm-lm-border-subtle); border-radius: 9px; color: var(--psm-lm-text-primary); outline: none; transition: all 0.15s; width: 100%; box-sizing: border-box; appearance: auto; } body.dark-mode #pipeline-stats-popup .psm-input, body.dark-mode #pipeline-stats-popup .psm-select { background: var(--psm-bg-card); border-color: var(--psm-border); color: var(--psm-text-primary); } #pipeline-stats-popup .psm-input:focus, #pipeline-stats-popup .psm-select:focus { border-color: var(--psm-accent-orange-glow); box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.08); } #pipeline-stats-popup .psm-input-with-icon { position: relative; display: flex; align-items: center; } #pipeline-stats-popup .psm-input-with-icon .psm-input { padding-right: 34px; } #pipeline-stats-popup .psm-input-with-icon svg { position: absolute; right: 10px; width: 14px; height: 14px; stroke: var(--psm-lm-text-muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } body.dark-mode #pipeline-stats-popup .psm-input-with-icon svg { stroke: var(--psm-text-muted); } /* Scale pill toggle — modernized. Active button gets a clear orange border + glow so it visibly "pops" against the dark container. NOTE: dark-mode.css:2230 applies `background/color/border !important` to every `body.dark-mode button`, so ALL our toggle rules need !important to win. */ #pipeline-stats-popup .psm-scale-toggle { display: inline-flex; background: var(--psm-lm-bg-elevated); border: 1px solid var(--psm-lm-border-subtle); border-radius: 10px; padding: 3px; gap: 2px; } body.dark-mode #pipeline-stats-popup .psm-scale-toggle { background: #0f1729 !important; border-color: #1e2a42 !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); } #pipeline-stats-popup .psm-scale-toggle button, body.dark-mode #pipeline-stats-popup .psm-scale-toggle button { font-family: 'JetBrains Mono', monospace !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; padding: 8px 20px !important; border-radius: 7px !important; border: 1.5px solid transparent !important; background: transparent !important; color: var(--psm-lm-text-secondary) !important; cursor: pointer !important; transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s !important; flex: 1 !important; position: relative !important; vertical-align: middle !important; } body.dark-mode #pipeline-stats-popup .psm-scale-toggle button { color: #c8d0e0 !important; } #pipeline-stats-popup .psm-scale-toggle button:hover:not(.active) { color: var(--psm-lm-text-primary) !important; background: rgba(255, 140, 66, 0.04) !important; border-color: transparent !important; } body.dark-mode #pipeline-stats-popup .psm-scale-toggle button:hover:not(.active) { color: #ffffff !important; background: rgba(255, 140, 66, 0.06) !important; border-color: transparent !important; } #pipeline-stats-popup .psm-scale-toggle button.active { background: linear-gradient(135deg, rgba(255, 140, 66, 0.14) 0%, rgba(245, 166, 35, 0.06) 100%) !important; color: var(--psm-accent-orange) !important; border: 1.5px solid var(--psm-accent-orange) !important; box-shadow: 0 0 0 1px rgba(255, 140, 66, 0.35), 0 2px 8px rgba(255, 140, 66, 0.25) !important; } body.dark-mode #pipeline-stats-popup .psm-scale-toggle button.active { background: linear-gradient(135deg, rgba(255, 140, 66, 0.18) 0%, rgba(245, 166, 35, 0.06) 100%) !important; color: #ffb070 !important; border: 1.5px solid #ff8c42 !important; box-shadow: 0 0 0 1px rgba(255, 140, 66, 0.4), 0 2px 12px rgba(255, 140, 66, 0.35), inset 0 0 12px rgba(255, 140, 66, 0.08) !important; text-shadow: 0 0 8px rgba(255, 140, 66, 0.4); } /* Primary button */ #pipeline-stats-popup .psm-btn { font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600; padding: 10px 18px; border-radius: 9px; border: 1px solid var(--psm-lm-border-subtle); background: var(--psm-lm-bg-card); color: var(--psm-lm-text-primary); cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-decoration: none; } body.dark-mode #pipeline-stats-popup .psm-btn { background: var(--psm-bg-elevated); border-color: var(--psm-border); color: var(--psm-text-primary); } #pipeline-stats-popup .psm-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } #pipeline-stats-popup .psm-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #pipeline-stats-popup .psm-btn.primary { background: linear-gradient(135deg, var(--psm-accent-orange) 0%, var(--psm-coupon) 100%); color: #fff; border-color: transparent; font-weight: 700; letter-spacing: 0.3px; box-shadow: 0 4px 14px rgba(255, 140, 66, 0.3); } #pipeline-stats-popup .psm-btn.primary:hover { box-shadow: 0 6px 22px rgba(255, 140, 66, 0.45); transform: translateY(-2px); color: #fff; } /* Chart wrapper */ #pipeline-stats-popup .psm-chart-wrap { background: var(--psm-lm-bg-card); border: 1px solid var(--psm-lm-border-subtle); border-radius: 12px; padding: 14px 6px 8px; } body.dark-mode #pipeline-stats-popup .psm-chart-wrap { background: rgba(11, 19, 43, 0.5); border-color: var(--psm-border); } #pipeline-stats-popup .pipeline-stats-chart { width: 100% !important; height: 420px !important; } #pipeline-stats-popup .psm-chart-legend { display: flex; align-items: center; gap: 20px; padding: 10px 14px 4px; flex-wrap: wrap; } #pipeline-stats-popup .psm-legend-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--psm-lm-text-muted); } body.dark-mode #pipeline-stats-popup .psm-legend-label { color: var(--psm-text-muted); } #pipeline-stats-popup .psm-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--psm-lm-text-secondary); } body.dark-mode #pipeline-stats-popup .psm-legend-item { color: var(--psm-text-secondary); } #pipeline-stats-popup .psm-swatch { width: 18px; height: 4px; border-radius: 2px; } #pipeline-stats-popup .psm-swatch.volume { background: linear-gradient(90deg, var(--psm-accent-orange) 0%, var(--psm-coupon) 100%); } #pipeline-stats-popup .psm-swatch.avg { height: 0; background: transparent; border-top: 1px dashed var(--psm-threshold-blue); } /* ─── Summary card ─── */ #pipeline-stats-popup .psm-summary-card { background: var(--psm-lm-bg-elevated); border: 1px solid var(--psm-lm-border-subtle); border-radius: 16px; padding: 18px 22px 20px; } body.dark-mode #pipeline-stats-popup .psm-summary-card { background: linear-gradient(180deg, var(--psm-bg-card-alt) 0%, var(--psm-bg-card) 100%); border-color: var(--psm-border); } #pipeline-stats-popup .psm-summary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } #pipeline-stats-popup .psm-summary-title { font-size: 14px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--psm-lm-text-primary); } body.dark-mode #pipeline-stats-popup .psm-summary-title { color: var(--psm-text-primary); } #pipeline-stats-popup .psm-range-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--psm-threshold-blue); background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.25); padding: 4px 10px; border-radius: 6px; letter-spacing: 0.5px; text-transform: uppercase; } #pipeline-stats-popup table.psm-summary { width: 100%; border-collapse: separate; border-spacing: 0; } #pipeline-stats-popup table.psm-summary thead th { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--psm-lm-text-muted); text-align: left; padding: 10px 14px; background: var(--psm-lm-bg-card); border-bottom: 1px solid var(--psm-lm-border-subtle); } body.dark-mode #pipeline-stats-popup table.psm-summary thead th { background: rgba(11, 19, 43, 0.4); border-bottom-color: var(--psm-border); color: var(--psm-text-muted); } #pipeline-stats-popup table.psm-summary thead th:first-child { border-top-left-radius: 10px; } #pipeline-stats-popup table.psm-summary thead th:last-child { border-top-right-radius: 10px; } #pipeline-stats-popup table.psm-summary thead th.group-refi { color: var(--psm-threshold-blue); border-bottom-color: rgba(99, 102, 241, 0.3); } #pipeline-stats-popup table.psm-summary thead th.group-purchase { color: var(--psm-delta-green); border-bottom-color: rgba(52, 211, 153, 0.3); } #pipeline-stats-popup table.psm-summary thead th.group-total { color: var(--psm-accent-orange); border-bottom-color: rgba(255, 140, 66, 0.3); } #pipeline-stats-popup table.psm-summary thead.sub th { font-size: 9.5px; padding: 7px 14px; color: var(--psm-lm-text-secondary); background: transparent; border-bottom: 1px solid var(--psm-lm-border-subtle); text-transform: uppercase; letter-spacing: 0.6px; } body.dark-mode #pipeline-stats-popup table.psm-summary thead.sub th { color: var(--psm-text-secondary); border-bottom-color: var(--psm-border); } #pipeline-stats-popup table.psm-summary thead.sub th.num { text-align: right; } #pipeline-stats-popup table.psm-summary tbody td { padding: 11px 14px; font-size: 12.5px; color: var(--psm-lm-text-primary); border-bottom: 1px solid var(--psm-lm-border-subtle); font-variant-numeric: tabular-nums; } body.dark-mode #pipeline-stats-popup table.psm-summary tbody td { color: var(--psm-text-primary); border-bottom-color: var(--psm-border-subtle); } #pipeline-stats-popup table.psm-summary tbody td.num { text-align: right; } #pipeline-stats-popup table.psm-summary tbody td.label { font-weight: 600; letter-spacing: 0.3px; } #pipeline-stats-popup table.psm-summary tbody td.pct { color: var(--psm-lm-text-secondary); } body.dark-mode #pipeline-stats-popup table.psm-summary tbody td.pct { color: var(--psm-text-secondary); } #pipeline-stats-popup table.psm-summary tbody tr:last-child td { border-bottom: none; } #pipeline-stats-popup table.psm-summary tbody tr.total td, #pipeline-stats-popup table.psm-summary tbody tr.total td.num, #pipeline-stats-popup table.psm-summary tbody tr.total td.label, #pipeline-stats-popup table.psm-summary tbody tr.total td.pct { background: linear-gradient(90deg, rgba(255, 140, 66, 0.08) 0%, rgba(245, 166, 35, 0.04) 100%); font-weight: 700; color: var(--psm-accent-orange) !important; border-top: 1px solid rgba(255, 140, 66, 0.25); border-bottom: none; } body.dark-mode #pipeline-stats-popup table.psm-summary tbody tr.total td, body.dark-mode #pipeline-stats-popup table.psm-summary tbody tr.total td.num, body.dark-mode #pipeline-stats-popup table.psm-summary tbody tr.total td.label, body.dark-mode #pipeline-stats-popup table.psm-summary tbody tr.total td.pct { color: var(--psm-accent-orange) !important; background: linear-gradient(90deg, rgba(255, 140, 66, 0.12) 0%, rgba(245, 166, 35, 0.06) 100%); border-top-color: rgba(255, 140, 66, 0.35); } #pipeline-stats-popup table.psm-summary tbody tr.total td.pct { opacity: 0.85; } body.dark-mode #pipeline-stats-popup table.psm-summary tbody tr.total td.pct { opacity: 0.85; } #pipeline-stats-popup .psm-cell-bar { display: inline-block; vertical-align: middle; height: 4px; border-radius: 2px; margin-left: 8px; background: linear-gradient(90deg, var(--psm-accent-orange) 0%, var(--psm-coupon) 100%); opacity: 0.6; min-width: 6px; } #pipeline-stats-popup .psm-cell-bar.refi { background: linear-gradient(90deg, var(--psm-threshold-blue) 0%, #818cf8 100%); } #pipeline-stats-popup .psm-cell-bar.purchase { background: linear-gradient(90deg, var(--psm-delta-green) 0%, #6ee7b7 100%); } /* Loading placeholder */ #pipeline-stats-popup .psm-chart-placeholder { width: 100%; height: 420px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--psm-lm-text-muted); background: var(--psm-lm-bg-elevated); border-radius: 8px; } body.dark-mode #pipeline-stats-popup .psm-chart-placeholder { color: var(--psm-text-muted); background: rgba(11, 19, 43, 0.3); } /* Keyboard focus */ #pipeline-stats-popup :focus-visible { outline: 2px solid var(--psm-accent-orange); outline-offset: 2px; } /* Scope jQuery UI datepicker when opened from this popup. Must sit above the fullscreen popup (z-index: 10060), otherwise the calendar renders behind the dialog and clicks appear to do nothing. */ #ui-datepicker-div.psm-datepicker { font-family: 'DM Sans', sans-serif; z-index: 100000 !important; position: absolute !important; display: block !important; background: #ffffff; border: 1px solid #d0d5dd; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); padding: 8px; } body.dark-mode #ui-datepicker-div.psm-datepicker { background: #1a2236; border-color: #3a4458; color: #e8edf5; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }