/* Palette: navy/cyan light theme. Variables are named by ROLE, not by hue — so the names stay accurate if the underlying colour is retuned. The comment records the current palette swatch for reference. */ :root { --header-bg: #0A1628; /* Navy900 — header / modal-head bg */ --text-strong: #10233A; /* Navy800 — headings / values / drill */ --text: #10233A; /* Navy800 — body text */ --accent: #06B6D4; /* Cyan500 — active / borders / asset accent */ --accent-deep: #17314D; /* Navy700 — govt / premium */ --neutral: #334155; /* Slate700 — corporate */ --text-muted: #5B6470; /* MutedBlueGray — secondary text / labels */ --warm: #B45309; /* CopperDark — CP / budget btn / liability */ --border: #D5CCBE; /* Cream200 — borders / dividers */ --bg: #F5F2EC; /* Cream50 — PAGE bg (the beige under everything) */ --surface: rgb(250,250,250); /* Neutral light grey — ELEMENT bg (cards, KPI tiles, panel-specific tile variants — anything that sits ON the page). R=G=B=250 (#FAFAFA equivalent), no warm or cool cast. History: was #FBFAF6 (cream-tint) through -291; flipped to pure white in -293 after three "cards look beige" regressions (-254 / -289 / -292) where low-alpha compositions over the cream surface composited beige-pink. Moved to #FDFBFB in -309 then to rgb(250,250,250) in -313 for a slightly more present neutral surface against the cream page bg. Pair tile borders with this colour. If a tile reads as the same beige as the page, it has drifted to --bg by mistake — see tools/audit-css-cards.mjs (lints for it on every commit). Standard contrast surfaces (table headers, hover states, sticky rows, chat bubbles, chips) keep using --bg for visual stepping inside a card. */ --negative: #991B1B; /* Red800 — negative / loss / error TEXT only */ --negative-soft: rgba(153, 27, 27, 0.08); /* --negative @ 8% — used as soft tint */ --positive: #2e7d32; /* Green700 — "value is positive" (informational green) */ /* RAG status tokens — semantically distinct from --positive / --negative. These are the limit-utilisation / appetite indicators. Greens/ambers/reds elsewhere (rl-heat, cr-hr-fill, rc-tile) intentionally vary for visual hierarchy; only the canonical chip/border RAG hues are tokenised. */ --rag-green: #1F7A3D; /* limit green — within appetite */ --rag-amber: #B7791F; /* limit amber — trigger */ --rag-red: #B91C1C; /* limit red — breach */ --rag-pending: #9aa3ad; /* limit pending — not yet measured */ /* Z-index scale (documentary; rules below set explicit values). page chrome / sticky thead ..... 1 – 10 dropdowns / inline overlays .... 20 – 60 dev-mode badges ................ 900 dev-mode floating panel ........ 950 splash / wizard / AI panel ..... 1000 – 1100 modal-backdrop (drill, field) .. 1300 splash + dev-mode pwd .......... 2000 – 10000 Multiple components share the 1100 layer (AI panel, tw-overlay, cv-params-overlay, cv-ep-overlay) — last-painted wins. */ } * { box-sizing: border-box; } html, body { margin:0; padding:0; font-family:"Aptos","Aptos Display","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif; background:var(--bg); color:var(--text); } header { background:var(--header-bg); color:#fff; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid var(--header-bg); } header .left { display:flex; align-items:center; gap:18px; } header h1 { margin:0; font-size:23px; font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif; font-weight:700; letter-spacing:-0.2px; } header .sub { font-size:12px; opacity:0.9; margin-top:3px; } header .right { display:flex; align-items:center; gap:20px; font-size:12px; opacity:0.95; } header .right-stats { text-align:right; } header img.header-logo { display:block; height:60px; width:auto; flex:none; } header .right strong { font-size:14px; } /* Tab strip scrolls horizontally (mobile + narrow desktop) with NO scrollbar; native touch/trackpad swipe works. Left/right chevrons hint "more" and click-scroll. main.js toggles .tabs-overflow / .at-end / .at-start. */ .tabs-wrap { position:relative; } .tabs { display:flex; gap:2px; background:var(--border); padding:0 28px; border-bottom:1px solid var(--border); overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-behavior:smooth; } .tabs::-webkit-scrollbar { display:none; height:0; } .tab { flex:0 0 auto; white-space:nowrap; padding:12px 20px; background:transparent; border:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--text-muted); border-bottom:3px solid transparent; font-family:inherit; } .tab:hover:not(.active) { color:var(--text-strong); } .tab.active { color:var(--text-strong); border-bottom-color:var(--accent); background:var(--bg); } .tabs-more { display:none; } .tabs-wrap.tabs-overflow:not(.at-end) .tabs-more { display:flex; align-items:center; justify-content:center; position:absolute; top:0; bottom:1px; right:0; width:44px; border:none; cursor:pointer; color:var(--text-strong); font-size:18px; line-height:1; background:linear-gradient(to right, transparent, var(--bg) 55%); } .tabs-wrap.tabs-overflow:not(.at-end) .tabs-more:hover { color:var(--accent); } .tabs-less { display:none; } .tabs-wrap.tabs-overflow:not(.at-start) .tabs-less { display:flex; align-items:center; justify-content:center; position:absolute; top:0; bottom:1px; left:0; width:44px; border:none; cursor:pointer; color:var(--text-strong); font-size:18px; line-height:1; background:linear-gradient(to left, transparent, var(--bg) 55%); } .tabs-wrap.tabs-overflow:not(.at-start) .tabs-less:hover { color:var(--accent); } /* === Global header search === */ /* Sits inside #tabsBar as the last flex item, pushed right by margin-left:auto. The dropdown is absolutely positioned beneath the input. */ #site-search { position: relative; margin-left: auto; display: flex; align-items: center; padding: 0 14px 0 8px; /* leave room for the chevron when overflow */ flex: 0 0 auto; } #site-search-input { width: 220px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text-strong); font: inherit; font-size: 13px; transition: width 120ms ease, border-color 120ms ease; } #site-search-input:focus { outline: none; width: 320px; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 80, 60, 0.08); } #site-search-input::placeholder { color: var(--text-muted); } .ss-dropdown { position: absolute; top: calc(100% + 4px); right: 14px; min-width: 360px; max-width: 480px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); max-height: 60vh; overflow-y: auto; z-index: 1000; } .ss-empty { padding: 14px; color: var(--text-muted); font-size: 13px; text-align: center; } .ss-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); } .ss-row:last-child { border-bottom: 0; } .ss-row:hover, .ss-row.is-active { background: var(--bg); } .ss-kind { flex-shrink: 0; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--text-muted); } .ss-kind-kpi { background: #0a6e54; } .ss-kind-chart { background: #2a5a8f; } .ss-kind-table { background: #8a5a2a; } .ss-kind-narrative{ background: #7a3a8a; } .ss-kind-meta { background: #5a5a5a; } /* Entity-result kind chips — separate palette so they read distinctly from the element-result chips above. */ .ss-kind-customer { background: #1e3a5f; } .ss-kind-deal { background: #166534; } .ss-kind-isin { background: #5b21b6; } .ss-kind-sector { background: #c2410c; } .ss-text { flex: 1; min-width: 0; } .ss-lbl { font-size: 13px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-crumb { font-size: 11px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-sep { opacity: 0.5; } /* Brief highlight pulse on the element the user navigated to. */ @keyframes search-flash { 0% { box-shadow: 0 0 0 3px rgba(0,180,140,0); } 25% { box-shadow: 0 0 0 3px rgba(0,180,140,0.55); } 100% { box-shadow: 0 0 0 3px rgba(0,180,140,0); } } .search-flash { animation: search-flash 1.4s ease-out; border-radius: 8px; } /* ---- Grouped category menu bar (replaces the flat 15-tab strip) ---- #tabsBar gains .nav-menubar in buildTabStrip(). Standalone tabs keep the classic `.tab` look; categories are a `.nav-group` (button + absolute dropdown). overflow:visible is essential so the dropdown escapes the bar; flex-wrap so 6 items never need a horizontal scroll (the old chevron affordance stays inert). */ .tabs.nav-menubar { overflow:visible; flex-wrap:wrap; } .nav-group { position:relative; flex:0 0 auto; display:flex; } .nav-group-btn { flex:0 0 auto; white-space:nowrap; padding:12px 18px; background:transparent; border:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--text-muted); border-bottom:3px solid transparent; font-family:inherit; } .nav-group-btn:hover { color:var(--text-strong); } .nav-group-btn.active { color:var(--text-strong); border-bottom-color:var(--accent); background:var(--bg); } .nav-caret { font-size:9px; opacity:.7; margin-left:2px; display:inline-block; transition:transform .12s ease; } .nav-group.open .nav-caret { transform:rotate(180deg); } .nav-dropdown { display:none; position:absolute; top:100%; left:0; min-width:230px; background:var(--surface); border:1px solid var(--border); border-top:2px solid var(--accent); box-shadow:0 10px 28px rgba(10,22,40,0.18); z-index:60; padding:4px 0; } .nav-group.open > .nav-dropdown { display:block; } @media (hover:hover) and (pointer:fine) { .nav-group:hover > .nav-dropdown { display:block; } } .nav-dropdown .nav-leaf { display:block; width:100%; text-align:left; padding:10px 18px; border:none; border-bottom:none; border-left:3px solid transparent; background:transparent; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text-muted); white-space:nowrap; font-family:inherit; } .nav-dropdown .nav-leaf:hover { color:var(--text-strong); background:var(--bg); } .nav-dropdown .nav-leaf.active { color:var(--text-strong); border-left-color:var(--accent); background:var(--bg); } main { padding:22px 28px; } .panel { display:none; } .panel.active { display:block; } .kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:18px; } .kpi { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:6px; padding:14px 16px; box-shadow:0 1px 2px rgba(10,22,40,0.05); } .kpi .label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; } .kpi .value { font-size:22px; font-weight:700; margin-top:4px; color:var(--text-strong); } .kpi .sub { font-size:11px; color:var(--text-muted); margin-top:2px; } /* KPI values are uniform --text-strong (navy). No per-card text colour: asset/liab are distinguished by the left-border accent, not the value. */ .card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:18px; margin-bottom:18px; box-shadow:0 1px 3px rgba(10,22,40,0.04); } .card h2 { margin:0 0 4px; font-size:16px; color:var(--text-strong); } .card .hint { font-size:12px; color:var(--text-muted); margin-bottom:14px; } /* Top-right "?" help icon — used on any .card.has-help to reveal a hover-tooltip containing legend / definitions / commentary that would otherwise crowd the bottom of the card. CSS-only (no JS), keyboard-accessible via focus-within on the host. */ .card.has-help { position:relative; } .card-help-host { position:absolute; top:12px; right:12px; z-index:5; } .card-help { width:22px; height:22px; padding:0; border-radius:50%; border:1.5px solid var(--accent); background:var(--surface); color:var(--accent); font:700 13px/1 inherit; cursor:help; display:inline-flex; align-items:center; justify-content:center; } .card-help:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .card-help-tip { display:none; position:absolute; top:calc(100% + 6px); right:0; width:360px; max-width:90vw; background:#fff; border:1px solid var(--border); border-radius:6px; box-shadow:0 8px 24px rgba(10,22,40,0.18); padding:12px 14px; font-size:12.5px; line-height:1.5; color:var(--text-strong); text-align:left; z-index:10; } .card-help-tip ul { margin:0; padding-left:18px; } .card-help-tip li { margin:4px 0 8px; } .card-help-tip li:last-child { margin-bottom:0; } .card-help-tip strong { color:var(--text-strong); } .card-help-host:hover .card-help-tip, .card-help-host:focus-within .card-help-tip { display:block; } /* ---- Shared deal-window table (js/core/dealtable.js) ---- Used by Popup_A + every in-panel per-deal table. The card never grows past 700px; the deal list scrolls inside; 50/page pager. */ .dealtable-card { max-height:700px; display:flex; flex-direction:column; overflow:hidden; } /* Dev mode only: relax the clip so the data-ename badge (rendered just above the card) isn't hidden by overflow:hidden. Minor rounded-corner bleed while dev mode is on; never affects end users. */ body.dev-mode .dealtable-card { overflow: visible; } .dealtable { display:flex; flex-direction:column; min-height:0; flex:1; } .dt-scroll { overflow:auto; min-height:0; flex:1; } .dt-table { width:100%; border-collapse:collapse; font-size:12px; } .dt-table th, .dt-table td { padding:5px 8px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; } .dt-table th.num, .dt-table td.num { text-align:right; font-variant-numeric:tabular-nums; } .dt-table thead th { position:sticky; background:var(--bg); color:var(--text-strong); font-weight:600; } .dt-table tr.dt-head th { top:0; cursor:pointer; z-index:2; } .dt-table tr.dt-filters th { top:28px; z-index:2; padding:3px 6px; } .dt-table tr.dt-filters input { width:100%; box-sizing:border-box; font:inherit; font-size:11px; padding:2px 4px; border:1px solid var(--border); border-radius:3px; } .dt-table tbody tr[data-drill] { cursor:pointer; } .dt-table tbody tr[data-drill]:hover { background:rgba(6,182,212,0.10); } .dt-table td.dt-empty { text-align:center; color:var(--text-muted); padding:16px; } .dt-pager { display:flex; align-items:center; justify-content:center; gap:14px; padding:8px; border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); flex:none; } .dt-pager button { border:1px solid var(--border); background:var(--surface); color:var(--text-strong); cursor:pointer; border-radius:4px; padding:2px 11px; font-size:13px; line-height:1.4; } .dt-pager button:disabled { opacity:.4; cursor:default; } /* Export / Copy — pinned right; act on the full filtered+sorted set. */ .dt-tools { margin-left:auto; display:flex; gap:8px; } .dt-pager .dt-copied { color:var(--accent); border-color:var(--accent); } /* In the drill modal the dealtable is bounded by the modal, not a card. */ #drillModal_A .dealtable { max-height:70vh; } .row-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .row-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } @media (max-width: 1100px) { .row-3 { grid-template-columns:1fr 1fr; } } /* Two-column dashboard row — two .card children side by side, each taking half the width. Children's own margin-bottom is suppressed since the row itself adds the spacing below. Collapses to a single column on narrow viewports so charts don't squash unreadably. min-width:0 is REQUIRED on grid items that contain a Chart.js canvas — without it the cell auto-sizes to its content and Chart.js's responsive resize loop blows the call stack ("Maximum call stack size exceeded"). */ /* 2-up card row — auto-fit so a single survivor (after the sibling is hidden) spans the full width instead of leaving a half-row gap. minmax(420px) means at <840px the row collapses to 1-up. */ .dashboard-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:14px; margin-bottom:18px; } .dashboard-row > .card { margin-bottom:0; min-width:0; } /* AI report logo strip — prepended above the rendered AI output (briefing / market watch / simulations / reports). Sits OUTSIDE the content container that Copy / Save-as-PDF target by id, so the PDF embed does not double up with the print-template logo. */ .report-logo-wrap { margin: 0 0 10px; display:flex; justify-content:flex-end; } .report-logo-wrap img.report-logo { display:block; height:64px; width:auto; } /* Overview · Daily Briefing card */ #ov-briefing-card .ov-briefing-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } #ov-briefing-card .ov-briefing-head h2 { margin:0; } #ov-briefing-card #ov-briefing-status { margin-top:4px; } #ov-briefing-card .ov-briefing-actions { display:flex; gap:8px; align-items:flex-start; flex:0 0 auto; flex-wrap:wrap; } #ov-briefing-card .ov-briefing-actions .ai-btn { white-space:nowrap; } #ov-briefing-card #ov-briefing-body { margin-top:10px; } #ov-briefing-card #ov-briefing-body:empty { display:none; } #ov-briefing-card .ov-briefing-foot { margin-top:12px; padding-top:8px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); } #ov-briefing-card .ov-briefing-tailor { margin-top:12px; } #ov-briefing-card .ov-briefing-tailor-lbl { display:block; margin:0 0 4px; font-weight:600; font-size:13px; } #ov-briefing-card .ov-briefing-muted { font-weight:400; color:var(--text-muted); } #ov-briefing-card .ov-briefing-focus { width:100%; box-sizing:border-box; resize:vertical; font:inherit; padding:8px; border:1px solid var(--border); border-radius:6px; background:#fff; } /* AI Market Watch + Custom Brief — reuse .ov-briefing-* primitives for parity with the Daily Briefing card; both add a mode-row + site-multiselect. Rules are shared across both card IDs so the two sibling cards stay visually identical and a third card can be added by appending its id to these selectors. */ #ai-mwatch-card .ov-briefing-head, #ai-cbrief-card .ov-briefing-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } #ai-mwatch-card .ov-briefing-head h2, #ai-cbrief-card .ov-briefing-head h2 { margin:0; } #ai-mwatch-card .ov-briefing-actions, #ai-cbrief-card .ov-briefing-actions { display:flex; gap:8px; align-items:flex-start; flex:0 0 auto; flex-wrap:wrap; } #ai-mwatch-card .ov-briefing-actions .ai-btn, #ai-cbrief-card .ov-briefing-actions .ai-btn { white-space:nowrap; } #ai-mwatch-card #ai-mwatch-body, #ai-cbrief-card #ai-cbrief-body { margin-top:10px; } #ai-mwatch-card #ai-mwatch-body:empty, #ai-cbrief-card #ai-cbrief-body:empty { display:none; } #ai-mwatch-card .ov-briefing-tailor, #ai-cbrief-card .ov-briefing-tailor { margin-top:12px; } #ai-mwatch-card .ov-briefing-tailor-lbl, #ai-cbrief-card .ov-briefing-tailor-lbl { display:block; margin:0 0 4px; font-weight:600; font-size:13px; } #ai-mwatch-card .ov-briefing-muted, #ai-cbrief-card .ov-briefing-muted { font-weight:400; color:var(--text-muted); } #ai-mwatch-card .ov-briefing-focus, #ai-cbrief-card .ov-briefing-focus { width:100%; box-sizing:border-box; resize:vertical; font:inherit; padding:8px; border:1px solid var(--border); border-radius:6px; background:#fff; } #ai-mwatch-card .ov-briefing-foot, #ai-cbrief-card .ov-briefing-foot { margin-top:12px; padding-top:8px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); } #ai-mwatch-card .ai-mwatch-mode-row, #ai-cbrief-card .ai-mwatch-mode-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:10px 0 6px; font-size:13px; } #ai-mwatch-card .ai-mwatch-mode-label, #ai-cbrief-card .ai-mwatch-mode-label { font-weight:600; color:var(--text-strong); margin-right:4px; } #ai-mwatch-card .ai-mwatch-mode, #ai-cbrief-card .ai-mwatch-mode { display:inline-flex; align-items:center; gap:5px; cursor:pointer; } #ai-mwatch-card .ai-mwatch-mode input[type="radio"], #ai-cbrief-card .ai-mwatch-mode input[type="radio"] { margin:0; } #ai-mwatch-card .ai-mwatch-sites, #ai-cbrief-card .ai-mwatch-sites { display:flex; flex-wrap:wrap; gap:10px 16px; margin:4px 0 8px; font-size:13px; } #ai-mwatch-card .ai-mwatch-site, #ai-cbrief-card .ai-mwatch-site { display:inline-flex; align-items:center; gap:5px; cursor:pointer; } #ai-mwatch-card .ai-mwatch-site input[type="checkbox"], #ai-cbrief-card .ai-mwatch-site input[type="checkbox"] { margin:0; } #ai-mwatch-card .ai-mwatch-sites.is-hidden, #ai-cbrief-card .ai-mwatch-sites.is-hidden { display:none; } #ai-mwatch-card .ai-mwatch-sites.is-soft .ai-mwatch-site, #ai-cbrief-card .ai-mwatch-sites.is-soft .ai-mwatch-site { color:var(--text-muted); } /* AI · Simulations (scoped under the panel — extractable with the module) */ #panel-ai_simulations .sim-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:14px; } /* Pure white on purpose — these are nested inside a `.card` parent (which is off-white var(--surface) since -309), so pure white makes each pack item stand out against the parent. */ #panel-ai_simulations .sim-pack-card { text-align:left; display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; font:inherit; } #panel-ai_simulations button.sim-pack-card:hover { border-color:var(--accent); box-shadow:0 1px 6px rgba(0,0,0,.06); } #panel-ai_simulations .sim-pack-card.sim-soon { opacity:.6; cursor:default; } #panel-ai_simulations .sim-pack-title { font-weight:700; color:var(--text-strong); } #panel-ai_simulations .sim-pack-blurb { font-size:12px; color:var(--text-muted); line-height:1.5; } #panel-ai_simulations .sim-pack-tag { font-size:11px; font-weight:600; color:var(--text-muted); margin-top:2px; } #panel-ai_simulations .sim-pack-tag-live { color:var(--accent); } #panel-ai_simulations .sim-runner-head { display:flex; align-items:center; gap:12px; } #panel-ai_simulations .sim-runner-head h2 { margin:0; } #panel-ai_simulations .sim-tailor-lbl { display:block; margin:14px 0 4px; font-weight:600; font-size:13px; } #panel-ai_simulations .sim-muted { font-weight:400; color:var(--text-muted); } #panel-ai_simulations .sim-tailor { width:100%; box-sizing:border-box; resize:vertical; font:inherit; padding:8px; border:1px solid var(--border); border-radius:6px; } #panel-ai_simulations .sim-params { display:flex; flex-wrap:wrap; gap:14px; margin:14px 0 4px; } #panel-ai_simulations .sim-param { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; } #panel-ai_simulations .sim-param input { width:120px; padding:6px 8px; border:1px solid var(--border); border-radius:6px; font:inherit; } #panel-ai_simulations .sim-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:8px 0 14px; } #panel-ai_simulations .sim-kpi { border:1px solid var(--border); border-radius:6px; padding:8px 10px; background:var(--surface); } #panel-ai_simulations .sim-kpi-l { font-size:11px; color:var(--text-muted); } #panel-ai_simulations .sim-kpi-v { font-size:15px; font-weight:700; color:var(--text-strong); margin-top:2px; } #panel-ai_simulations .sim-actions { display:flex; align-items:center; gap:12px; margin-top:10px; } #panel-ai_simulations .sim-out { margin-top:16px; border-top:1px solid var(--border); padding-top:14px; } #panel-ai_simulations .sim-out-actions { display:flex; gap:8px; justify-content:flex-end; margin-bottom:10px; } #panel-ai_simulations .sim-tbl { border-collapse:collapse; width:100%; margin:6px 0 14px; font-size:13px; } #panel-ai_simulations .sim-tbl th, #panel-ai_simulations .sim-tbl td { border:1px solid var(--border); padding:4px 8px; text-align:left; } #panel-ai_simulations .sim-tbl th { background:var(--bg); } #panel-ai_simulations .sim-worst td { font-weight:700; } #panel-ai_simulations .sim-rag { display:inline-block; padding:1px 7px; border-radius:9px; font-size:11px; font-weight:700; text-transform:uppercase; color:#fff; } #panel-ai_simulations .sim-rag-green { background:var(--positive); } #panel-ai_simulations .sim-rag-amber { background:#c77700; } #panel-ai_simulations .sim-rag-red { background:var(--negative,#b3261e); } #panel-ai_simulations .sim-rag-pending { background:#888; } /* Output renders as a centred "paper" sheet — IDENTICAL formatting rules to the Daily Briefing (#ov-briefing-content), duplicated here re-scoped so the modules stay independently extractable (no shared coupling). */ #panel-ai_simulations .sim-doc { box-sizing: border-box; width: 70vw; max-width: 70vw; margin: 18px auto; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 12px rgba(10,22,40,0.08); padding: 40px 52px; font-size: 13px; line-height: 1.6; } @media (max-width: 1100px) { #panel-ai_simulations .sim-doc { width: 92vw; max-width: 92vw; padding: 28px 26px; } } #panel-ai_simulations .sim-doc h1, #panel-ai_simulations .sim-doc h2, #panel-ai_simulations .sim-doc h3 { margin: 16px 0 6px; font-weight: 700; color: var(--accent-deep); line-height: 1.25; } #panel-ai_simulations .sim-doc h1 { font-size: 19px; } #panel-ai_simulations .sim-doc h2 { font-size: 15.5px; } #panel-ai_simulations .sim-doc h3 { font-size: 13.5px; color: var(--text-strong); } #panel-ai_simulations .sim-doc h4, #panel-ai_simulations .sim-doc h5, #panel-ai_simulations .sim-doc h6 { margin: 16px 0 5px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-deep); } #panel-ai_simulations .sim-doc > :first-child { margin-top: 0; } #panel-ai_simulations .sim-doc p { margin: 0 0 9px; } #panel-ai_simulations .sim-doc ul, #panel-ai_simulations .sim-doc ol { margin: 6px 0 12px 22px; padding: 0; } #panel-ai_simulations .sim-doc li { margin: 0 0 7px; line-height: 1.55; } #panel-ai_simulations .sim-doc .ai-md-table-wrap { margin: 10px 0; } #panel-ai_simulations .sim-doc .ai-md-table { font-size: 12.5px; } #panel-ai_simulations .sim-doc .ai-md-table th, #panel-ai_simulations .sim-doc .ai-md-table td { padding: 5px 10px; } /* Fallback summary tables sit on the same paper sheet. */ #panel-ai_simulations .sim-doc .sim-tbl { margin: 6px 0 14px; } #panel-ai_simulations .sim-doc h3:first-child { margin-top: 0; } /* AI · Presentations — reuses the Simulations visual language, re-scoped (duplicated, no cross-module coupling). */ #panel-ai_presentations .pres-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 6px; } #panel-ai_presentations .pres-header h2 { margin:0; } #panel-ai_presentations .sim-tailor-lbl { display:block; margin:14px 0 4px; font-weight:600; font-size:13px; } #panel-ai_presentations .sim-muted { font-weight:400; color:var(--text-muted); } #panel-ai_presentations .sim-tailor { width:100%; box-sizing:border-box; resize:vertical; font:inherit; padding:8px; border:1px solid var(--border); border-radius:6px; } #panel-ai_presentations .sim-actions { display:flex; align-items:center; gap:12px; margin-top:10px; } #panel-ai_presentations .sim-out { margin-top:16px; border-top:1px solid var(--border); padding-top:14px; } #panel-ai_presentations .sim-out-actions { display:flex; gap:8px; justify-content:flex-end; margin-bottom:10px; } #panel-ai_presentations .sim-tbl { border-collapse:collapse; width:100%; margin:6px 0 14px; font-size:12px; } #panel-ai_presentations .sim-tbl th, #panel-ai_presentations .sim-tbl td { border:1px solid var(--border); padding:4px 8px; text-align:left; } #panel-ai_presentations .sim-tbl th { background:var(--bg); } #panel-ai_presentations .pres-doc { box-sizing:border-box; width:70vw; max-width:70vw; margin:18px auto; background:#fff; color:var(--text); border:1px solid var(--border); border-radius:6px; box-shadow:0 2px 12px rgba(10,22,40,0.08); padding:40px 52px; font-size:13px; line-height:1.6; } @media (max-width: 1100px) { #panel-ai_presentations .pres-doc { width:92vw; max-width:92vw; padding:28px 26px; } } #panel-ai_presentations .pres-doc > :first-child { margin-top:0; } #panel-ai_presentations .pres-doc h2 { font-size:18px; font-weight:700; color:var(--accent-deep); margin:0 0 2px; } #panel-ai_presentations .pres-doc h3 { font-size:14px; font-weight:700; color:var(--text-strong); margin:18px 0 6px; border-bottom:1px solid var(--border); padding-bottom:3px; } #panel-ai_presentations .pres-img { max-width:100%; border:1px solid var(--border); border-radius:4px; margin:6px 0; } #panel-ai_presentations .pres-kpis { margin:6px 0 10px 20px; padding:0; } #panel-ai_presentations .pres-kpis li { margin:0 0 4px; } #panel-ai_presentations .pres-prose { margin:6px 0 10px; } #panel-ai_presentations .pres-prose p { margin:0 0 8px; } /* Custom Views — top-right "Edit / Add ▾" menu (view mode chrome). */ #panel-custom_views .cvr-topbar { display:flex; align-items:center; gap:10px; margin-bottom:8px; } #panel-custom_views .cvr-topbar .subtabs { flex:1; min-width:0; } #panel-custom_views .cvr-menu { position:relative; } #panel-custom_views .cvr-menu-pop { display:none; position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:220px; background:#fff; border:1px solid var(--border); border-radius:6px; box-shadow:0 6px 18px rgba(10,22,40,.12); padding:6px; } #panel-custom_views .cvr-menu-pop.is-open { display:block; } #panel-custom_views .cvr-menu-item { display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; text-align:left; padding:6px 10px; border:0; border-radius:4px; background:transparent; font:inherit; font-size:13px; color:var(--text-strong); cursor:pointer; } #panel-custom_views .cvr-menu-item:hover:not(:disabled) { background:color-mix(in srgb, var(--accent) 10%, transparent); } #panel-custom_views .cvr-menu-item:disabled { opacity:.5; cursor:default; } #panel-custom_views .cvr-menu-item.is-active { font-weight:700; color:var(--accent-deep); } #panel-custom_views .cvr-menu-dot { width:12px; color:var(--accent); font-size:11px; } #panel-custom_views .cvr-menu-cap { margin-left:6px; font-size:10.5px; color:var(--text-muted); font-weight:500; } /* Seed (built-in demo) view badge in the Edit / Add menu. */ #panel-custom_views .cvr-menu-seed { margin-left:6px; padding:1px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); background:rgba(10,22,40,0.06); border-radius:3px; } #panel-custom_views .cvr-menu-sep { height:1px; background:var(--border); margin:4px 0; } #panel-custom_views .cvr-menu-hdr { padding:4px 10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); } #panel-custom_views .cvr-card.cvr-editing { padding-top:0; } /* Custom Views — composer chrome (edit mode). */ #panel-custom_views .cv-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; } #panel-custom_views .cv-lbl { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text-muted); } #panel-custom_views .cv-input { padding:6px 8px; border:1px solid var(--border); border-radius:6px; font:inherit; background:#fff; min-width:200px; } #panel-custom_views .cv-muted { color:var(--text-muted); font-size:12px; } #panel-custom_views .cv-empty { padding:34px 18px; text-align:center; color:var(--text-muted); border:1px dashed var(--border); border-radius:8px; background:var(--bg); } #panel-custom_views .cv-picker { border:1px solid var(--border); border-radius:8px; padding:12px; background:var(--surface); margin-bottom:14px; } #panel-custom_views .cv-picker-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; } #panel-custom_views .cv-picker-head strong { color:var(--text-strong); } /* Picker tree — kind > panel > element (mirrors the Token Generator). */ #panel-custom_views .cv-search { width:100%; box-sizing:border-box; margin:0 0 8px; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:#fff; color:var(--text-strong); font:inherit; font-size:13px; } #panel-custom_views .cv-tree { display:flex; flex-direction:column; max-height:360px; overflow-y:auto; border:1px solid var(--border); border-radius:6px; background:#fff; } #panel-custom_views .cv-tree-grp { border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); } #panel-custom_views .cv-tree-grp:last-child { border-bottom:0; } #panel-custom_views .cv-tree-row { display:flex; align-items:center; gap:7px; width:100%; box-sizing:border-box; text-align:left; border:0; background:transparent; cursor:pointer; font:inherit; color:var(--text-strong); padding:5px 10px; } #panel-custom_views .cv-tree-row:hover { background:color-mix(in srgb, var(--accent) 9%, transparent); } #panel-custom_views .cv-tree-kind { font-weight:700; font-size:12.5px; background:color-mix(in srgb, var(--accent-deep) 6%, transparent); } #panel-custom_views .cv-tree-panel { padding-left:26px; font-weight:600; font-size:12px; color:var(--text-muted); } #panel-custom_views .cv-tree-item { padding-left:42px; font-size:13px; } #panel-custom_views .cv-tree-item.is-on { background:color-mix(in srgb, var(--accent) 8%, white); box-shadow:inset 3px 0 0 var(--accent); } #panel-custom_views .cv-caret { flex:0 0 13px; text-align:center; font-weight:700; color:var(--text-muted); font-family:"Consolas",monospace; } #panel-custom_views .cv-tree-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #panel-custom_views .cv-tree-count { flex:0 0 auto; margin-left:auto; font-size:10px; color:var(--text-muted); background:color-mix(in srgb, var(--text-muted) 14%, transparent); border-radius:8px; padding:0 7px; } #panel-custom_views .cv-tree-box { flex:0 0 16px; font-size:14px; color:var(--accent); } #panel-custom_views .cv-tree-lbl { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #panel-custom_views .cv-tree-empty { padding:16px; text-align:center; font-style:italic; color:var(--text-muted); font-size:12px; } /* Explicit 2-D tile grid — 12 columns × 20px rows. Each tile carries an explicit grid-column/grid-row (set by applyCardLayout from its saved { x,y,w,h }); placement is NOT auto-flow, empty cells stay empty. */ #panel-custom_views .cv-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:20px; gap:14px; } /* Fallback span = 6 of 12 columns (half-width). In practice every tile gets an explicit grid-column/grid-row inline via applyCardLayout. */ /* Pure white on purpose — these tiles are nested inside a `.card` parent (off-white since -309), so pure white pops the chart/table against the parent card. */ #panel-custom_views .cv-card { position:relative; grid-column:span 6; border:1px solid var(--border); border-radius:8px; background:#fff; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(10,22,40,.04); min-width:0; } #panel-custom_views .cv-card-bar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--border); } #panel-custom_views .cv-card-title { font-size:13px; font-weight:700; color:var(--text-strong); } #panel-custom_views .cv-card-tools { display:flex; gap:4px; } #panel-custom_views .cv-icon { width:24px; height:24px; border:1px solid var(--border); border-radius:4px; background:#fff; cursor:pointer; font-size:13px; color:var(--text-muted); line-height:1; } #panel-custom_views .cv-icon:hover:not(:disabled) { border-color:var(--accent); color:var(--text-strong); } #panel-custom_views .cv-icon:disabled { opacity:.4; cursor:default; } /* Chart cards: fixed-height body so Chart.js's responsive resize has a real container to fill (avoids the flat-wide chart we saw). */ #panel-custom_views .cv-card-chart .cv-card-body { padding:10px; height:320px; position:relative; } #panel-custom_views .cv-card-chart .cv-card-body canvas { width:100% !important; height:100% !important; } /* Doughnut cards render in a near-square box so the doughnut looks circular (maintainAspectRatio is false globally). */ #panel-custom_views .cv-card-square .cv-card-body { aspect-ratio: 1.15 / 1; height:auto; min-height:340px; } /* Tile cards flow with their content (no fixed height). */ #panel-custom_views .cv-card-tile .cv-card-body { padding:12px 14px; } #panel-custom_views .cv-tile-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:5px 0; border-bottom:1px dashed var(--border); font-size:13px; } #panel-custom_views .cv-tile-row:last-of-type { border-bottom:none; } #panel-custom_views .cv-tile-k { color:var(--text-muted); } #panel-custom_views .cv-tile-v { color:var(--text-strong); font-weight:600; font-variant-numeric:tabular-nums; } /* Emphasis = the headline KPI of the tile (larger, navier). */ #panel-custom_views .cv-tile-row.cv-tile-emph { padding:7px 0; } #panel-custom_views .cv-tile-row.cv-tile-emph .cv-tile-v { font-size:18px; } /* RAG colouring on regulatory floors. */ #panel-custom_views .cv-tile-v.cv-rag-green { color:#15803D; } #panel-custom_views .cv-tile-v.cv-rag-amber { color:#B45309; } #panel-custom_views .cv-tile-v.cv-rag-red { color:#991B1B; } #panel-custom_views .cv-tile-v.cv-rag-pending { color:var(--text-muted); font-weight:500; } /* Move + resize (composer only). */ #panel-custom_views .cv-drag-handle { cursor:grab; color:var(--text-muted); padding:0 8px 0 0; font-size:14px; user-select:none; letter-spacing:-2px; } #panel-custom_views .cv-drag-handle:active { cursor:grabbing; } /* Resize handles — bottom-left + bottom-right corners. Drag either to change width (snaps to 1-4 grid columns) and height. */ #panel-custom_views .cv-rz { position:absolute; bottom:2px; width:16px; height:16px; z-index:4; opacity:.4; touch-action:none; } #panel-custom_views .cv-rz:hover { opacity:.9; } #panel-custom_views .cv-rz-r { right:2px; cursor:nwse-resize; background-image:linear-gradient(135deg, transparent 0 42%, var(--text-muted) 42% 54%, transparent 54% 66%, var(--text-muted) 66% 78%, transparent 78%); } #panel-custom_views .cv-rz-l { left:2px; cursor:nesw-resize; background-image:linear-gradient(45deg, transparent 0 42%, var(--text-muted) 42% 54%, transparent 54% 66%, var(--text-muted) 66% 78%, transparent 78%); } #panel-custom_views .cv-card.cv-resizing { outline:2px solid var(--accent); outline-offset:-2px; } /* The card while it is being moved — lifted out, tracks the cursor. */ #panel-custom_views .cv-card.cv-floating { position:fixed; z-index:1000; margin:0; pointer-events:none; opacity:.97; box-shadow:0 12px 32px rgba(10,22,40,.28); } /* Drop placeholder — the tile rect a move/resize would land on. Green = the target cells are free; red = occupied (drop rejected). */ #panel-custom_views .cv-placeholder { border:2px dashed var(--accent); border-radius:8px; z-index:5; background:rgba(29,80,55,.10); } #panel-custom_views .cv-placeholder.cv-ph-bad { border-color:var(--rag-red); background:rgba(185,28,28,.10); } /* Per-element data-filter — gear (composer), chip, and the filter modal. */ #panel-custom_views .cv-icon.cv-icon-on { border-color:var(--accent); color:var(--accent-deep); background:var(--bg); } #panel-custom_views .cv-pf-chip { display:inline-flex; align-items:center; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:700; background:var(--accent); color:#fff; border-radius:9px; padding:2px 7px; } #panel-custom_views .cv-params-overlay { position:fixed; inset:0; z-index:1100; background:rgba(10,22,40,.38); display:flex; align-items:center; justify-content:center; } #panel-custom_views .cv-params-modal { background:#fff; border:1px solid var(--border); border-radius:10px; width:380px; max-width:92vw; box-shadow:0 18px 48px rgba(10,22,40,.32); display:flex; flex-direction:column; } #panel-custom_views .cv-params-head { padding:12px 16px; font-weight:700; color:var(--text-strong); border-bottom:1px solid var(--border); } #panel-custom_views .cv-params-hint { padding:8px 16px 0; font-size:11px; color:var(--text-muted); } #panel-custom_views .cv-params-body { padding:8px 16px 14px; display:flex; flex-direction:column; gap:8px; } #panel-custom_views .cv-params-sub { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-top:4px; } #panel-custom_views .cv-pf-row input[type="number"] { width:84px; padding:4px 6px; border:1px solid var(--border); border-radius:5px; font-size:12px; } #panel-custom_views .cv-pf-row { display:flex; align-items:center; justify-content:space-between; gap:12px; } #panel-custom_views .cv-pf-row > span { font-size:12px; color:var(--text-muted); } #panel-custom_views .cv-pf-row select { flex:1; max-width:230px; padding:4px 6px; border:1px solid var(--border); border-radius:5px; font-size:12px; background:#fff; } #panel-custom_views .cv-params-foot { display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--border); } /* Body scrolls once the Presentation section expands (many controls). */ #panel-custom_views .cv-params-body { max-height:64vh; overflow-y:auto; } #panel-custom_views .cv-pf-row input[type="text"] { flex:1; max-width:230px; padding:4px 6px; border:1px solid var(--border); border-radius:5px; font-size:12px; } /* Collapsible "Presentation — chart styling" section. */ #panel-custom_views .cv-params-pres { border:1px solid var(--border); border-radius:6px; margin-top:4px; } #panel-custom_views .cv-params-pres > summary { cursor:pointer; padding:7px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-strong); list-style:none; } #panel-custom_views .cv-params-pres > summary::-webkit-details-marker { display:none; } #panel-custom_views .cv-params-pres > summary::before { content:"\25B8\00a0\00a0"; color:var(--text-muted); } #panel-custom_views .cv-params-pres[open] > summary::before { content:"\25BE\00a0\00a0"; } #panel-custom_views .cv-params-pres[open] > summary { border-bottom:1px solid var(--border); } #panel-custom_views .cv-params-pres > .cv-params-grp, #panel-custom_views .cv-params-pres > .cv-pf-row { margin:6px 10px; } #panel-custom_views .cv-params-grp { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-top:9px; } /* Ladder cards — span both grid columns; lots of horizontal content. */ #panel-custom_views .cv-card-ladder { grid-column: 1 / -1; } #panel-custom_views .cv-card-ladder .cv-card-body { padding:10px 12px; overflow-x:auto; } #panel-custom_views .cv-ladder-wrap { min-width:100%; } #panel-custom_views .cv-ladder-tbl { border-collapse:collapse; width:100%; font-size:12px; font-variant-numeric:tabular-nums; } #panel-custom_views .cv-ladder-tbl th { background:var(--accent-deep); color:#fff; font-weight:700; padding:5px 8px; text-align:right; border:1px solid var(--accent-deep); white-space:nowrap; } #panel-custom_views .cv-ladder-tbl th.cv-ladder-h { text-align:left; } #panel-custom_views .cv-ladder-tbl td { padding:4px 8px; border:1px solid var(--border); color:var(--text-strong); } #panel-custom_views .cv-ladder-tbl td.num { text-align:right; white-space:nowrap; } #panel-custom_views .cv-ladder-tbl td.cv-ladder-row { color:var(--text); } #panel-custom_views .cv-ladder-grp td { background:var(--bg); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); padding:4px 8px; } #panel-custom_views .cv-ladder-subt td { background:var(--surface); font-weight:700; border-top:1.5px solid var(--text-muted); } #panel-custom_views .cv-ladder-tot td { background:var(--accent-deep); color:#fff; font-weight:700; border-color:var(--accent-deep); } /* Table cards — half-row by default; .cv-card-wide (limit dashboard etc.) spans full row. Body scrolls horizontally for wider columns. */ #panel-custom_views .cv-card-table .cv-card-body { padding:10px 12px; overflow-x:auto; } #panel-custom_views .cv-card-table.cv-card-wide { grid-column: 1 / -1; } #panel-custom_views .cv-tbl-wrap { min-width:100%; } #panel-custom_views .cv-tbl { border-collapse:collapse; width:100%; font-size:12px; font-variant-numeric:tabular-nums; } #panel-custom_views .cv-tbl th { background:var(--accent-deep); color:#fff; font-weight:700; padding:5px 8px; text-align:left; border:1px solid var(--accent-deep); white-space:nowrap; } #panel-custom_views .cv-tbl th.num { text-align:right; } #panel-custom_views .cv-tbl td { padding:4px 8px; border:1px solid var(--border); color:var(--text-strong); } #panel-custom_views .cv-tbl td.num { text-align:right; white-space:nowrap; } #panel-custom_views .cv-tbl tbody tr:nth-child(even) td { background:var(--bg); } #panel-custom_views .cv-tbl-status { font-weight:700; } #panel-custom_views .cv-cap { font-size:11px; color:var(--text-muted); margin-left:6px; } /* Empty-state shared across both panels. */ #panel-custom_views .cv-empty { padding:34px 18px; text-align:center; color:var(--text-muted); border:1px dashed var(--border); border-radius:8px; background:var(--bg); } /* Renderer subtab strip uses the global .subtabs / .subtab classes (styles.css:1338) — no custom rules needed; consistency with the rest of the dashboard's sub-panel patterns. */ /* === Admin → System Config — Dashboard Visibility editor === */ #panel-admin_system .adm-vis-card .hint { margin-bottom: 10px; } #panel-admin_system .adm-vis-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } /* NOT a flex column — flex-shrink would squash each panel to fit the max-height, hiding everything below the head. Plain block layout with margin-bottom on each panel for spacing. */ #panel-admin_system .adm-vis-tree { max-height: 70vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 10px; } /* Super-panel groups (AI / Risk / Portfolios / Reg. Ratios and Balance Sheet) — wraps the panels that share a TAB_MANIFEST group. Stronger visual weight than a panel header so the hierarchy reads "group → panel → sub-tab → row → element" at a glance. */ #panel-admin_system .adm-vis-group { border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; margin-bottom: 10px; } #panel-admin_system .adm-vis-group:last-child { margin-bottom: 0; } #panel-admin_system .adm-vis-group-head { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 12px; background: linear-gradient(0deg, var(--surface), var(--surface)); border: 0; border-bottom: 1px solid var(--border); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } #panel-admin_system .adm-vis-group-head:hover { background: var(--bg); } #panel-admin_system .adm-vis-group-head .adm-vis-caret { display: inline-block; width: 12px; color: var(--text-muted); transition: transform 120ms ease; } #panel-admin_system .adm-vis-group-head.is-open .adm-vis-caret { transform: rotate(90deg); } #panel-admin_system .adm-vis-group-head:not(.is-open) { border-bottom: 0; } #panel-admin_system .adm-vis-group-lbl { font-weight: 800; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.4px; font-size: 12px; } #panel-admin_system .adm-vis-group-meta { color: var(--text-muted); font-size: 11px; flex: 1; } #panel-admin_system .adm-vis-group-body { padding: 8px; background: var(--bg); } #panel-admin_system .adm-vis-group-body .adm-vis-panel:last-child { margin-bottom: 0; } /* Placeholder body shown when a panel/sub-tab has no taggable elements yet (e.g. AI Briefs / Simulations / Reports until their modules adopt data-ptoken markers). Keeps the expansion visibly useful instead of opening into a blank container. */ #panel-admin_system .adm-vis-empty { padding: 10px 14px; font-size: 12px; line-height: 1.5; color: var(--text-muted); background: var(--bg); border-top: 1px dashed var(--border); } #panel-admin_system .adm-vis-empty code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; } #panel-admin_system .adm-vis-empty-sub { background: transparent; border-top: 0; } #panel-admin_system .adm-vis-panel { border: 1px solid var(--border); border-radius: 6px; background: #fff; overflow: hidden; margin-bottom: 8px; } #panel-admin_system .adm-vis-panel:last-child { margin-bottom: 0; } #panel-admin_system .adm-vis-panel-head { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 12px; background: var(--surface); border: 0; border-bottom: 1px solid var(--border); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } #panel-admin_system .adm-vis-panel-head:hover { background: var(--bg); } #panel-admin_system .adm-vis-panel-head .adm-vis-caret { display: inline-block; width: 12px; color: var(--text-muted); transition: transform 120ms ease; } #panel-admin_system .adm-vis-panel-head.is-open .adm-vis-caret { transform: rotate(90deg); } #panel-admin_system .adm-vis-panel-head.is-open { border-bottom: 1px solid var(--border); } #panel-admin_system .adm-vis-panel-head:not(.is-open) { border-bottom: 0; } #panel-admin_system .adm-vis-panel-lbl { font-weight: 700; color: var(--text-strong); } #panel-admin_system .adm-vis-panel-id { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--text-muted); } #panel-admin_system .adm-vis-panel-body { background: #fff; } /* Row group inside a sub-tab — the drag-and-drop unit. */ #panel-admin_system .adm-vis-rows { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 10px; } #panel-admin_system .adm-vis-rows.is-disabled { opacity: 0.45; } #panel-admin_system .adm-vis-row-group { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 6px 8px; transition: box-shadow 90ms ease, opacity 90ms ease; } #panel-admin_system .adm-vis-row-group[draggable="true"] { cursor: grab; } #panel-admin_system .adm-vis-row-group.is-dragging { opacity: 0.4; } #panel-admin_system .adm-vis-row-group.is-drop-target { box-shadow: 0 0 0 2px var(--accent); } #panel-admin_system .adm-vis-row-type-kpi-row { border-left: 3px solid var(--accent); } #panel-admin_system .adm-vis-row-type-card-row { border-left: 3px solid var(--accent-deep); } #panel-admin_system .adm-vis-row-type-card { border-left: 3px solid #C9CDD3; } #panel-admin_system .adm-vis-row-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 0 4px; } #panel-admin_system .adm-vis-row-type { font-weight: 700; color: var(--text-strong); } #panel-admin_system .adm-vis-row-meta { color: var(--text-muted); } #panel-admin_system .adm-vis-handle { cursor: grab; color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 4px; user-select: none; } #panel-admin_system .adm-vis-handle:active { cursor: grabbing; } #panel-admin_system .adm-vis-el { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 4px; transition: background 80ms ease, box-shadow 90ms ease; } #panel-admin_system .adm-vis-el[draggable="true"] { cursor: grab; } #panel-admin_system .adm-vis-el.is-dragging { opacity: 0.4; } #panel-admin_system .adm-vis-el.is-drop-target { box-shadow: 0 0 0 2px var(--accent); background: var(--bg); } #panel-admin_system .adm-vis-el.is-disabled { opacity: 0.5; } #panel-admin_system .adm-vis-el .adm-vis-row-el { flex: 1; padding: 4px 6px; } #panel-admin_system .adm-vis-sub { border-top: 1px solid var(--border); } #panel-admin_system .adm-vis-sub:first-of-type { border-top: 0; } #panel-admin_system .adm-vis-sub.is-hidden { background: rgba(0,0,0,0.02); } #panel-admin_system .adm-vis-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; cursor: pointer; font-size: 13px; } #panel-admin_system .adm-vis-row:hover { background: var(--bg); } #panel-admin_system .adm-vis-row-sub { font-weight: 600; color: var(--text-strong); } #panel-admin_system .adm-vis-row-el { padding-left: 36px; font-size: 12px; color: var(--text-strong); } #panel-admin_system .adm-vis-row.is-disabled { color: var(--text-muted); cursor: not-allowed; } #panel-admin_system .adm-vis-row.is-disabled input { cursor: not-allowed; } #panel-admin_system .adm-vis-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #panel-admin_system .adm-vis-key { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--text-muted); flex-shrink: 0; } #panel-admin_system .adm-vis-cnt { font-size: 11px; color: var(--accent); font-weight: 700; flex-shrink: 0; } #panel-admin_system .adm-vis-els { background: var(--bg); border-top: 1px dashed var(--border); } #panel-admin_system .adm-vis-export { margin-top: 12px; } #panel-admin_system .adm-vis-export summary { cursor: pointer; font-size: 12px; color: var(--text-muted); } #panel-admin_system .adm-vis-export textarea { width: 100%; box-sizing: border-box; min-height: 120px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--text-strong); } /* Admin → About / Environment — bio card + build/version card. */ #panel-admin_about .adm-about-title { font-weight: 700; color: var(--text-strong); font-size: 14px; margin: 2px 0 8px; } #panel-admin_about .adm-about-body { color: var(--text); line-height: 1.6; margin: 0 0 12px; max-width: 760px; } #panel-admin_about .adm-about-contact { font-size: 13px; color: var(--text-muted); padding-top: 8px; border-top: 1px solid var(--border); } #panel-admin_about .adm-about-contact-lbl { color: var(--text-strong); font-weight: 600; margin: 0 0 6px; } #panel-admin_about .adm-about-contact-row { display: grid; grid-template-columns: 90px 1fr; column-gap: 12px; align-items: baseline; padding: 2px 0; } #panel-admin_about .adm-about-contact-key { color: var(--text-muted); font-weight: 500; } #panel-admin_about .adm-about-contact a { color: var(--accent-deep); text-decoration: none; } #panel-admin_about .adm-about-contact a:hover { text-decoration: underline; } #panel-admin_about .adm-about-build { display: grid; grid-template-columns: max-content 1fr; column-gap: 18px; row-gap: 6px; font-size: 13px; } #panel-admin_about .adm-about-build-row { display: contents; } #panel-admin_about .adm-about-build-lbl { color: var(--text-muted); font-weight: 600; } #panel-admin_about .adm-about-build-val { color: var(--text-strong); } #panel-admin_about .adm-about-build-val code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 1px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; } /* The briefing renders as a centred "paper" sheet — the card keeps its full width, the document inside is 70vw, centred, with a harmonious type scale (headings not oversized, tables not tiny). */ #ov-briefing-card #ov-briefing-content { box-sizing: border-box; width: 70vw; max-width: 70vw; margin: 18px auto; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 12px rgba(10,22,40,0.08); padding: 40px 52px; font-size: 13px; line-height: 1.6; } @media (max-width: 1100px) { #ov-briefing-card #ov-briefing-content { width: 92vw; max-width: 92vw; padding: 28px 26px; } } #ov-briefing-card #ov-briefing-content h1, #ov-briefing-card #ov-briefing-content h2, #ov-briefing-card #ov-briefing-content h3 { margin: 16px 0 6px; font-weight: 700; color: var(--accent-deep); line-height: 1.25; } #ov-briefing-card #ov-briefing-content h1 { font-size: 19px; } #ov-briefing-card #ov-briefing-content h2 { font-size: 15.5px; } #ov-briefing-card #ov-briefing-content h3 { font-size: 13.5px; color: var(--text-strong); } #ov-briefing-card #ov-briefing-content h4, #ov-briefing-card #ov-briefing-content h5, #ov-briefing-card #ov-briefing-content h6 { margin: 16px 0 5px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-deep); } #ov-briefing-card #ov-briefing-content > :first-child { margin-top: 0; } #ov-briefing-card #ov-briefing-content p { margin: 0 0 9px; } #ov-briefing-card #ov-briefing-content ul, #ov-briefing-card #ov-briefing-content ol { margin: 6px 0 12px 22px; padding: 0; } #ov-briefing-card #ov-briefing-content li { margin: 0 0 7px; line-height: 1.55; } #ov-briefing-card #ov-briefing-content .ai-md-table-wrap { margin: 10px 0; } #ov-briefing-card #ov-briefing-content .ai-md-table { font-size: 12.5px; } #ov-briefing-card #ov-briefing-content .ai-md-table th, #ov-briefing-card #ov-briefing-content .ai-md-table td { padding: 5px 10px; } /* AI Market Watch + Custom Brief output — same centred "paper sheet" treatment as the Daily Briefing. Shared across both card ids so a new sibling card only needs its id appended to these selectors. */ #ai-mwatch-card #ai-mwatch-content, #ai-cbrief-card #ai-cbrief-content { box-sizing: border-box; width: 70vw; max-width: 70vw; margin: 18px auto; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 12px rgba(10,22,40,0.08); padding: 40px 52px; font-size: 13px; line-height: 1.6; } @media (max-width: 1100px) { #ai-mwatch-card #ai-mwatch-content, #ai-cbrief-card #ai-cbrief-content { width: 92vw; max-width: 92vw; padding: 28px 26px; } } #ai-mwatch-card #ai-mwatch-content h1, #ai-mwatch-card #ai-mwatch-content h2, #ai-mwatch-card #ai-mwatch-content h3, #ai-cbrief-card #ai-cbrief-content h1, #ai-cbrief-card #ai-cbrief-content h2, #ai-cbrief-card #ai-cbrief-content h3 { margin: 16px 0 6px; font-weight: 700; color: var(--accent-deep); line-height: 1.25; } #ai-mwatch-card #ai-mwatch-content h1, #ai-cbrief-card #ai-cbrief-content h1 { font-size: 19px; } #ai-mwatch-card #ai-mwatch-content h2, #ai-cbrief-card #ai-cbrief-content h2 { font-size: 15.5px; } #ai-mwatch-card #ai-mwatch-content h3, #ai-cbrief-card #ai-cbrief-content h3 { font-size: 13.5px; color: var(--text-strong); } #ai-mwatch-card #ai-mwatch-content h4, #ai-mwatch-card #ai-mwatch-content h5, #ai-mwatch-card #ai-mwatch-content h6, #ai-cbrief-card #ai-cbrief-content h4, #ai-cbrief-card #ai-cbrief-content h5, #ai-cbrief-card #ai-cbrief-content h6 { margin: 16px 0 5px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-deep); } #ai-mwatch-card #ai-mwatch-content > :first-child, #ai-cbrief-card #ai-cbrief-content > :first-child { margin-top: 0; } #ai-mwatch-card #ai-mwatch-content p, #ai-cbrief-card #ai-cbrief-content p { margin: 0 0 9px; } #ai-mwatch-card #ai-mwatch-content ul, #ai-mwatch-card #ai-mwatch-content ol, #ai-cbrief-card #ai-cbrief-content ul, #ai-cbrief-card #ai-cbrief-content ol { margin: 6px 0 12px 22px; padding: 0; } #ai-mwatch-card #ai-mwatch-content li, #ai-cbrief-card #ai-cbrief-content li { margin: 0 0 7px; line-height: 1.55; } #ai-mwatch-card #ai-mwatch-content .ai-md-table-wrap, #ai-cbrief-card #ai-cbrief-content .ai-md-table-wrap { margin: 10px 0; } #ai-mwatch-card #ai-mwatch-content .ai-md-table, #ai-cbrief-card #ai-cbrief-content .ai-md-table { font-size: 12.5px; } #ai-mwatch-card #ai-mwatch-content .ai-md-table th, #ai-mwatch-card #ai-mwatch-content .ai-md-table td, #ai-cbrief-card #ai-cbrief-content .ai-md-table th, #ai-cbrief-card #ai-cbrief-content .ai-md-table td { padding: 5px 10px; } /* === AI Reports panel — gallery + shared runner + paper-sheet output === Follows the visual language of AI Simulations (.sim-pack-card) and the Daily Briefing paper-sheet output, but rescoped so the panels can be deployed à la carte. If a fourth panel adopts the centred-paper look we should extract a shared .ai-paper-sheet class. */ #panel-ai_reports .report-section { margin-bottom: 14px; } #panel-ai_reports .report-section > h2 { margin: 0 0 4px; } #panel-ai_reports .report-section > .hint { margin-bottom: 10px; } #panel-ai_reports .report-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; } /* Nested inside a .card parent — pure white tile pops against the off-white surface. */ #panel-ai_reports .report-pack-card { text-align:left; display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; font:inherit; position: relative; } #panel-ai_reports button.report-pack-card:hover:not(:disabled) { border-color:var(--accent); box-shadow:0 1px 6px rgba(0,0,0,.06); } #panel-ai_reports .report-pack-card.is-soon { opacity:.55; cursor:default; } #panel-ai_reports .report-pack-card:disabled { cursor:default; } #panel-ai_reports .report-pack-title { font-weight:700; color:var(--text-strong); } #panel-ai_reports .report-pack-tag { position:absolute; top:10px; right:10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:2px 7px; border-radius:9px; background:var(--bg); color:var(--text-muted); } #panel-ai_reports .report-pack-blurb { font-size:12px; color:var(--text-muted); line-height:1.5; } #panel-ai_reports .report-pack-cta { font-size:11px; font-weight:600; color:var(--text-muted); margin-top:2px; } #panel-ai_reports .report-pack-cta-live { color:var(--accent); } /* Runner head — back button + title block + Run button on the right. */ #panel-ai_reports #report-runner .report-runner-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:6px; } #panel-ai_reports .report-runner-titleblock { flex:1 1 auto; min-width:0; } #panel-ai_reports .report-runner-titleblock h2 { margin:0; } #panel-ai_reports .report-runner-actions { flex:0 0 auto; display:flex; gap:8px; align-items:flex-start; } #panel-ai_reports .report-runner-tailor { margin-top:10px; } #panel-ai_reports .report-runner-lbl { display:block; margin:0 0 4px; font-weight:600; font-size:13px; } #panel-ai_reports .report-runner-muted { font-weight:400; color:var(--text-muted); } #panel-ai_reports .report-runner-context { width:100%; box-sizing:border-box; resize:vertical; font:inherit; padding:8px; border:1px solid var(--border); border-radius:6px; background:#fff; } #panel-ai_reports .report-runner-status { margin-top:8px; } #panel-ai_reports .report-runner-out { margin-top:14px; border-top:1px solid var(--border); padding-top:12px; } #panel-ai_reports .report-runner-out-actions { display:flex; gap:8px; justify-content:flex-end; margin-bottom:10px; } /* Paper-sheet output — same shape as Daily Briefing / Market Watch. If a fourth panel adopts this look, extract a shared .ai-paper-sheet class instead of triplicating these rules. */ #panel-ai_reports #report-paper { box-sizing: border-box; width: 70vw; max-width: 70vw; margin: 18px auto; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 12px rgba(10,22,40,0.08); padding: 40px 52px; font-size: 13px; line-height: 1.6; } @media (max-width: 1100px) { #panel-ai_reports #report-paper { width: 92vw; max-width: 92vw; padding: 28px 26px; } } #panel-ai_reports #report-paper h1, #panel-ai_reports #report-paper h2, #panel-ai_reports #report-paper h3 { margin: 16px 0 6px; font-weight: 700; color: var(--accent-deep); line-height: 1.25; } #panel-ai_reports #report-paper h1 { font-size: 19px; } #panel-ai_reports #report-paper h2 { font-size: 15.5px; } #panel-ai_reports #report-paper h3 { font-size: 13.5px; color: var(--text-strong); } #panel-ai_reports #report-paper h4, #panel-ai_reports #report-paper h5, #panel-ai_reports #report-paper h6 { margin: 16px 0 5px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-deep); } #panel-ai_reports #report-paper > :first-child { margin-top: 0; } #panel-ai_reports #report-paper p { margin: 0 0 9px; } #panel-ai_reports #report-paper ul, #panel-ai_reports #report-paper ol { margin: 6px 0 12px 22px; padding: 0; } #panel-ai_reports #report-paper li { margin: 0 0 7px; line-height: 1.55; } #panel-ai_reports #report-paper .ai-md-table-wrap { margin: 10px 0; } #panel-ai_reports #report-paper .ai-md-table { font-size: 12.5px; } #panel-ai_reports #report-paper .ai-md-table th, #panel-ai_reports #report-paper .ai-md-table td { padding: 5px 10px; } #panel-ai_reports .report-paper-foot { margin: 0 auto 8px; width: 70vw; max-width: 70vw; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); } @media (max-width: 1100px) { #panel-ai_reports .report-paper-foot { width: 92vw; max-width: 92vw; } } /* ----- AI Data Integrity -------------------------------------------- Read-only audit panel — single button, JSON-driven checklist with RAG-coloured severity badges, drill-through chips on deal IDs, and a markdown Summary block underneath. Scoped to #panel-ai_integrity so the rules are à-la-carte removable with the module. */ #panel-ai_integrity .integrity-card > h2 { margin: 0 0 4px; } #panel-ai_integrity .integrity-card > .hint { margin-bottom: 12px; line-height: 1.5; } #panel-ai_integrity .integrity-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin: 8px 0 4px; } #panel-ai_integrity .integrity-status { margin: 6px 0 0; } #panel-ai_integrity .integrity-out { margin-top:14px; border-top:1px solid var(--border); padding-top:14px; } #panel-ai_integrity .integrity-snapshot { font-size:12px; color:var(--text-muted); margin: 4px 0 12px; } /* Headline banner — overall pass/warn/fail. RAG-coloured left rail. */ #panel-ai_integrity .integrity-headline { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--border); border-radius:6px; background:#fff; } #panel-ai_integrity .integrity-headline.integrity-sev-pass { box-shadow: inset 4px 0 0 var(--rag-green); } #panel-ai_integrity .integrity-headline.integrity-sev-warn { box-shadow: inset 4px 0 0 var(--rag-amber); } #panel-ai_integrity .integrity-headline.integrity-sev-fail { box-shadow: inset 4px 0 0 var(--rag-red); } #panel-ai_integrity .integrity-headline-badge { font-size:22px; font-weight:700; line-height:1; margin-top:1px; width:30px; text-align:center; flex:0 0 auto; } #panel-ai_integrity .integrity-headline.integrity-sev-pass .integrity-headline-badge { color: var(--rag-green); } #panel-ai_integrity .integrity-headline.integrity-sev-warn .integrity-headline-badge { color: var(--rag-amber); } #panel-ai_integrity .integrity-headline.integrity-sev-fail .integrity-headline-badge { color: var(--rag-red); } #panel-ai_integrity .integrity-headline-body { flex:1 1 auto; min-width:0; } #panel-ai_integrity .integrity-headline-title { font-weight:700; color:var(--text-strong); font-size:14px; } #panel-ai_integrity .integrity-headline-summary { color:var(--text-strong); margin: 3px 0 6px; line-height:1.5; } #panel-ai_integrity .integrity-headline-counts { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; font-weight:600; } #panel-ai_integrity .integrity-count.integrity-sev-pass { color: var(--rag-green); } #panel-ai_integrity .integrity-count.integrity-sev-warn { color: var(--rag-amber); } #panel-ai_integrity .integrity-count.integrity-sev-fail { color: var(--rag-red); } /* Per-check rows. */ #panel-ai_integrity .integrity-rows { margin: 14px 0; display:flex; flex-direction:column; gap:6px; } #panel-ai_integrity .integrity-row { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border); border-radius:5px; background:#fff; } #panel-ai_integrity .integrity-row.integrity-sev-pass { box-shadow: inset 3px 0 0 var(--rag-green); } #panel-ai_integrity .integrity-row.integrity-sev-warn { box-shadow: inset 3px 0 0 var(--rag-amber); background: rgba(183,121,31,.04); } #panel-ai_integrity .integrity-row.integrity-sev-fail { box-shadow: inset 3px 0 0 var(--rag-red); background: rgba(185,28,28,.05); } #panel-ai_integrity .integrity-row-badge { font-size:15px; font-weight:700; line-height:1.4; width:18px; text-align:center; flex:0 0 auto; } #panel-ai_integrity .integrity-row.integrity-sev-pass .integrity-row-badge { color: var(--rag-green); } #panel-ai_integrity .integrity-row.integrity-sev-warn .integrity-row-badge { color: var(--rag-amber); } #panel-ai_integrity .integrity-row.integrity-sev-fail .integrity-row-badge { color: var(--rag-red); } #panel-ai_integrity .integrity-row-body { flex:1 1 auto; min-width:0; } #panel-ai_integrity .integrity-row-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } #panel-ai_integrity .integrity-row-title { font-weight:600; color:var(--text-strong); font-size:13px; } #panel-ai_integrity .integrity-row-cat { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); padding:1px 7px; border-radius:9px; background:var(--bg); } #panel-ai_integrity .integrity-row-detail { font-size:12.5px; color:var(--text-strong); margin: 3px 0 0; line-height:1.5; } /* Deal-id drill chips. */ #panel-ai_integrity .integrity-deal-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; } #panel-ai_integrity .integrity-deal-chip { font: 600 11px var(--mono, ui-monospace, "SF Mono", Menlo, monospace); padding: 2px 7px; border-radius: 4px; border:1px solid var(--border); background:#fff; cursor:pointer; color: var(--accent-deep, var(--text-strong)); } #panel-ai_integrity .integrity-deal-chip:hover { border-color: var(--accent); background: var(--bg); } /* Narrative Summary — rendered via miniMarkdown. */ #panel-ai_integrity .integrity-summary { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); line-height:1.6; } #panel-ai_integrity .integrity-summary h1, #panel-ai_integrity .integrity-summary h2, #panel-ai_integrity .integrity-summary h3 { margin: 8px 0 4px; font-size:14px; color: var(--text-strong); } #panel-ai_integrity .integrity-summary ul, #panel-ai_integrity .integrity-summary ol { margin: 4px 0 8px 22px; padding:0; } #panel-ai_integrity .integrity-summary p { margin: 0 0 7px; } /* Chart-control toggle: positioned absolutely at the bottom-right of the chart container so it sits on the same horizontal line as Chart.js's bottom-aligned legend. Pointer-events stay on by default so the checkbox itself remains clickable. */ .chart-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); cursor:pointer; user-select:none; } .chart-toggle:hover { color: var(--text-strong); } .chart-toggle input[type="checkbox"] { width:14px; height:14px; cursor:pointer; accent-color:var(--accent); margin:0; } .chart-toggle-overlay { position:absolute; bottom:8px; right:8px; z-index:2; } /* === Balance Sheet tab === Classic two-column financial-statement layout (Assets | L+E). Each side is a stack of s; the right side carries two tables (Liabs and Equity) with a final "Total L+E" line. Rows are .drill, so the popup's delegated [data-drill] handler picks them up automatically. */ .bs-statement { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-top:10px; } @media (max-width: 900px) { .bs-statement { grid-template-columns:1fr; } } .bs-side h3 { margin:6px 0 6px; font-size:13px; color:var(--text-strong); text-transform:uppercase; letter-spacing:0.6px; border-bottom:2px solid var(--text-strong); padding-bottom:4px; } .bs-side h3 + h3 { margin-top:18px; } .bs-table { table-layout:fixed; font-size:13.5px; } .bs-table col.bs-col-num { width:140px; } .bs-table tbody td { padding:7px 10px; } .bs-table tbody tr.drill:hover { background:rgba(6,182,212,0.06); } .bs-table tfoot td { padding:9px 10px; border-top:2px solid var(--text-strong); border-bottom:none; font-weight:600; } .bs-table tfoot tr.bs-subtotal td { border-top:1px solid var(--border); font-style:italic; color:var(--text-muted); } .bs-table tfoot tr.bs-total td { font-weight:700; color:var(--text-strong); border-top:2px solid var(--text-strong); border-bottom:3px double var(--text-strong); font-size:14px; } .bs-footnote { margin-top:18px; padding-top:12px; border-top:1px solid var(--border); font-size:12px; } /* === Market Data cards === Each card carries a title on the left and a dropdown (or other control) on the right of the header row. The body table fills the rest of the card. */ .md-card-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:10px; } .md-card-head h2 { margin:0; } .md-card-controls { display:flex; align-items:center; gap:8px; } .md-card-controls label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; } .md-card-controls select { padding:5px 8px; border:1px solid var(--border); border-radius:4px; font-size:13px; background:#fff; color:var(--text); font-family:inherit; cursor:pointer; min-width:160px; } /* === Draggable chart-segment callouts === Plugin in js/charts/segment-callouts.js injects this overlay into any chart wrapper that has `options.plugins['product-callouts'].enabled=true`. The overlay is pointer-events:none so chart click-to-drill still works on the canvas; only the boxes themselves capture pointer events. */ .chart-callout-overlay { position:absolute; inset:0; pointer-events:none; z-index:2; } .chart-callout-leaders { position:absolute; inset:0; pointer-events:none; } .chart-callout-line { stroke:var(--text-strong); stroke-width:1.5; stroke-dasharray:3 3; opacity:0.75; } .chart-callout-box { position:absolute; background:#fff; border:1.5px solid var(--text-strong); border-radius:8px; padding:6px 10px; font-family:inherit; cursor:grab; user-select:none; pointer-events:auto; box-shadow:0 2px 6px rgba(10,22,40,0.18); min-width:140px; line-height:1.25; } .chart-callout-box:hover { border-color:var(--accent); box-shadow:0 3px 9px rgba(6,182,212,0.22); } .chart-callout-box.dragging { cursor:grabbing; box-shadow:0 6px 16px rgba(0,0,0,0.22); border-color:var(--accent); } .chart-callout-box .callout-name { font-size:11.5px; font-weight:700; color:var(--text-strong); margin-bottom:2px; } .chart-callout-box .callout-figs { font-size:11px; font-weight:500; color:var(--text); } table { width:100%; border-collapse:collapse; font-size:13px; } th, td { padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; } th { background:var(--bg); color:var(--text-strong); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; font-size:11.5px; cursor:pointer; user-select:none; } th.sort-asc::after { content:' ▲'; color:var(--accent); } th.sort-desc::after { content:' ▼'; color:var(--accent); } td.num, th.num { text-align:center; font-variant-numeric:tabular-nums; } tbody tr:hover { background:rgba(6,182,212,0.05); } /* Vertical ladder table */ .ladder-vtbl { font-size:12.5px; } .ladder-vtbl th, .ladder-vtbl td { padding:5px 8px; } .ladder-vtbl tr.subhead td { background:var(--border); color:var(--text-strong); font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:0.4px; } .ladder-vtbl td.bucket { font-weight:600; color:var(--text-strong); white-space:nowrap; } .ladder-vtbl td.period { color:var(--text-muted); white-space:nowrap; } .ladder-vtbl td.asset { background:rgba(6,182,212,0.08); color:var(--text-strong); } .ladder-vtbl td.liab { background:rgba(245,158,11,0.10); } .ladder-vtbl td.gap.pos { color:var(--accent); font-weight:600; } .ladder-vtbl td.gap.neg { color:var(--negative); font-weight:600; } .ladder-vtbl tfoot td { font-weight:700; background:var(--bg); } /* Horizontal tenor-band summary grid */ .ladder-grid { display:grid; gap:6px; align-items:center; } .ladder-grid .header { font-weight:700; color:var(--text-strong); font-size:11.5px; text-transform:uppercase; letter-spacing:0.3px; text-align:center; padding:4px 0; } .ladder-grid .label { font-weight:600; color:var(--text-strong); font-size:12px; } .ladder-grid .num { font-variant-numeric:tabular-nums; text-align:center; font-size:12.5px; padding:4px 6px; border-radius:3px; } .ladder-grid .num.asset { background:rgba(6,182,212,0.10); color:var(--text-strong); } .ladder-grid .num.liab { background:rgba(245,158,11,0.12); color:var(--text); } .ladder-grid .num.gap { font-weight:700; } .ladder-grid .num.gap.pos { color:var(--accent); } .ladder-grid .num.gap.neg { color:var(--negative); } /* Chart */ .chart-wrap { width:100%; overflow-x:auto; } .chart-legend { display:flex; gap:18px; font-size:12px; margin-top:8px; color:var(--text); } .chart-legend .swatch { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:6px; vertical-align:middle; } /* Bars (loan book) */ .hbar { background:var(--border); height:18px; border-radius:3px; overflow:hidden; } .hbar > span { display:block; height:100%; } .hbar.asset > span { background:var(--accent); } .hbar-label { font-size:12px; color:var(--text); margin-bottom:3px; display:flex; justify-content:space-between; } /* Donut */ .donut-row { display:flex; gap:24px; align-items:center; } .donut-row svg, .donut-row canvas { flex:none; } .legend ul { list-style:none; padding:0; margin:0; } .legend li { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:12.5px; } .legend .swatch { width:14px; height:14px; border-radius:3px; flex:none; } /* Filters */ .filter-row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:14px; } .ctl { display:flex; flex-direction:column; gap:4px; } .ctl label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; } .ctl select, .ctl input { padding:6px 9px; border:1px solid var(--border); border-radius:4px; font-size:13px; background:#fff; min-width:130px; color:var(--text); font-family:inherit; } .ctl select:focus, .ctl input:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); } button.btn { padding:6px 12px; border:1px solid var(--border); background:#fff; border-radius:4px; cursor:pointer; font-size:13px; color:var(--text-strong); font-family:inherit; font-weight:600; } button.btn:hover { background:var(--text-strong); color:#fff; border-color:var(--text-strong); } /* Chip */ .chip { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:0.3px; } .chip.asset { background:rgba(6,182,212,0.15); color:var(--text-strong); } .chip.liab { background:rgba(91,100,112,0.16); color:var(--text-strong); } .chip.govt { background:rgba(23,49,77,0.12); color:var(--accent-deep); } .chip.corp { background:rgba(51,65,85,0.18); color:var(--neutral); } .chip.retail { background:rgba(91,100,112,0.20); color:var(--text-muted); } footer { padding:20px 28px; font-size:12px; color:var(--text-muted); text-align:center; } @media (max-width:1100px){ .kpi-row { grid-template-columns:repeat(2,1fr); } .row-2 { grid-template-columns:1fr; } } /* === Ladder visual tweaks (rev _13) === */ .ladder-vtbl td.num, .ladder-vtbl th.num { text-align: center; } .ladder-grid .num { text-align: center; } /* Total columns get a darker tint */ .ladder-vtbl td.tot-asset { background: rgba(6,182,212,0.22) !important; } .ladder-vtbl td.tot-liab { background: rgba(245,158,11,0.26) !important; } .ladder-grid .num.tot-asset { background: rgba(6,182,212,0.22) !important; } .ladder-grid .num.tot-liab { background: rgba(245,158,11,0.26) !important; } /* Drillable cells */ .ladder-vtbl td.drill, .ladder-grid .num.drill { cursor: pointer; transition: filter 0.1s, box-shadow 0.1s; } .ladder-vtbl td.drill:hover, .ladder-grid .num.drill:hover { filter: brightness(0.92); box-shadow: inset 0 0 0 2px var(--text-strong); } /* Drill modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(10,22,40,0.45); z-index: 1300; display: none; align-items: flex-start; justify-content: center; padding: 60px 20px; } .modal-backdrop.open { display: flex; } .modal-card { background: var(--surface); border-radius: 8px; box-shadow: 0 12px 36px rgba(0,0,0,0.25); width: min(96vw, 1100px); max-height: calc(100vh - 120px); overflow: hidden; display: flex; flex-direction: column; /* User-resizable (session-only — each open resets to these defaults; the open paths clear the inline width/height the browser writes on drag). */ resize: both; min-width: 340px; min-height: 220px; max-width: 96vw; } .modal-head { background: var(--header-bg); color: #fff; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; } .modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; } .modal-head .meta { font-size: 12px; opacity: 0.9; margin-top: 3px; } .modal-close { background: rgba(255,255,255,0.18); color: #fff; border: none; border-radius: 4px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; } .modal-close:hover { background: rgba(255,255,255,0.32); } .modal-body { padding: 16px 20px; overflow: auto; } .modal-body table { font-size: 12.5px; } .modal-body th { background: var(--bg); } .modal-body td.num, .modal-body th.num { text-align: center; font-variant-numeric: tabular-nums; } .modal-empty { padding: 40px; text-align: center; color: var(--text-muted); font-style: italic; } /* Clickable Deal ID — opens the deal-detail card (Popup_A). Mirrors the in-app link convention (accent + thin underline). Reusable in any deal table; the click is handled by Popup_A's delegated [data-drill] handler. */ .deal-id-link { color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; font-variant-numeric: tabular-nums; } .deal-id-link:hover { color: var(--text-strong); } /* Deal-detail card — portrait key/value grid Popup_A shows when a single deal is opened from its Deal ID. Two fields across, scrolls vertically inside the existing .modal-body. Long values span both columns. */ .deal-detail { max-width: 640px; margin: 0 auto; } .deal-detail .dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .deal-detail .dd-field { background: var(--surface); padding: 8px 12px; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .deal-detail .dd-field.dd-wide { grid-column: 1 / -1; } .deal-detail .dd-k { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; white-space: nowrap; } .deal-detail .dd-v { font-size: 13px; color: var(--text-strong); flex: 1 1 auto; text-align: right; font-variant-numeric: tabular-nums; word-break: break-word; } @media (max-width: 560px) { .deal-detail .dd-grid { grid-template-columns: 1fr; } } /* === Shared field-config list (Deal Blotter ⚙ Columns, Popup_A / popupCard ⚙ Fields) — checkbox + drag-to-reorder rows === */ .fc-list { display: flex; flex-direction: column; gap: 1px; } .fc-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; background: var(--surface); cursor: default; } .fc-row:hover { background: rgba(6,182,212,0.08); } .fc-grip { cursor: grab; color: var(--text-muted); font-size: 13px; line-height: 1; user-select: none; padding: 0 2px; } .fc-grip:active { cursor: grabbing; } .fc-lbl { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 12.5px; color: var(--text); cursor: pointer; user-select: none; } .fc-lbl input { margin: 0; cursor: pointer; } .fc-row.fc-dragging { opacity: 0.45; } .fc-row.fc-over { box-shadow: inset 0 2px 0 0 var(--accent); } /* Popup_A / popupCard ⚙ Fields bar (modal-scoped). */ #drillModal_A .pa-fieldbar { position: relative; display: flex; justify-content: flex-end; margin-bottom: 10px; } #drillModal_A .pa-fields-btn, #drillModal_A .pa-fields-apply { font-family: inherit; font-size: 12px; cursor: pointer; background: var(--surface); color: var(--text-strong); border: 1px solid var(--border); border-radius: 4px; padding: 5px 10px; } #drillModal_A .pa-fields-btn:hover, #drillModal_A .pa-fields-apply:hover { border-color: var(--accent); color: var(--accent); } #drillModal_A .pa-fields-pop { position: absolute; top: 32px; right: 0; z-index: 30; min-width: 260px; max-height: 380px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.16); padding: 10px 12px; } #drillModal_A .pa-fields-pop[hidden] { display: none; } #drillModal_A .pa-fields-pop .config-title { font-size: 11px; font-weight: 700; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; } #drillModal_A .pa-fields-pop .config-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); } #drillModal_A .pa-fields-pop .config-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 12px; color: var(--text-muted); font-family: inherit; text-decoration: underline; } #drillModal_A .pa-fields-pop .config-link:hover { color: var(--accent); } /* === Shared "Advanced fields" modal (core/field-config.js openAdvancedFieldModal) — opened from any ⚙ field/column box. Reuses .modal-backdrop / .modal-card chrome; these rules just style the title + action buttons (their other scopes don't reach this id). === */ #fieldAdvModal .modal-card { width: min(96vw, 560px); } #fieldAdvModal .modal-body { display: flex; flex-direction: column; } #fieldAdvModal .fadv-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 7px 10px; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 4px; color: var(--text); } #fieldAdvModal .fadv-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } #fieldAdvModal .fadv-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 12.5px; font-style: italic; } #fieldAdvModal .fc-list { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: 4px; } #fieldAdvModal .config-title { font-size: 11px; font-weight: 700; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; } #fieldAdvModal .config-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 13px; color: var(--text-muted); font-family: inherit; text-decoration: underline; } #fieldAdvModal .config-link:hover { color: var(--accent); } #fieldAdvModal .pa-fields-apply { font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 16px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: #fff; } #fieldAdvModal .pa-fields-apply:hover { filter: brightness(1.06); } /* === popupCard Copy/Export bar (light modal-body) === */ #drillModal_A .pa-card-actions { display: flex; gap: 8px; margin-bottom: 6px; } #drillModal_A .pa-actbtn { font-family: inherit; font-size: 12px; cursor: pointer; padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text-strong); } #drillModal_A .pa-actbtn:hover { border-color: var(--accent); color: var(--accent); } /* === popupSch — schedule sub-record modal (openScheduleModal) === */ #drillModal_Sch .modal-card { width: min(96vw, 760px); } #drillModal_Sch .sch-actions { display: flex; gap: 8px; } #drillModal_Sch .sch-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; } #drillModal_Sch .sch-table th, #drillModal_Sch .sch-table td { padding: 5px 12px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; } #drillModal_Sch .sch-table th { position: sticky; top: 0; background: var(--bg); color: var(--text-strong); font-weight: 600; } #drillModal_Sch .sch-table th:first-child, #drillModal_Sch .sch-table td:first-child { text-align: left; } #drillModal_Sch .sch-table tbody tr:hover td { background: rgba(6,182,212,0.06); } /* === AI Chat widget (F5) === FAB lives bottom-right at z=1050. Slide-in panel covers 600px on the right at z=1100. The Popup_A modal sits ABOVE both at z=1300 so a drill triggered from inside the chat (when we add that) still wins. */ /* FAB is the TraiQ Q-mark itself (SVG carries its own dark rounded tile + colour) — the button is just a borderless, padding-free square holding the mark. */ .ai-fab { position: fixed; right: 20px; bottom: 20px; z-index: 1050; width: 62px; height: 62px; background: none; border: none; padding: 0; cursor: pointer; border-radius: 15px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.28); transition: transform 0.15s, opacity 0.2s, box-shadow 0.15s; } .ai-fab img { display: block; width: 100%; height: 100%; } .ai-fab:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(0,0,0,0.34); } .ai-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .ai-fab.hidden { opacity: 0; pointer-events: none; transform: translateY(8px); } .ai-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 600px; max-width: 80vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -6px 0 22px rgba(10,22,40,0.16); transform: translateX(105%); /* width-independent slide-out */ transition: transform 0.25s ease; z-index: 1100; display: flex; flex-direction: column; font-family: inherit; } .ai-panel.open { transform: translateX(0); } /* Disable text selection across the whole panel while a resize drag is in progress, otherwise dragging selects text in the conversation. */ .ai-panel.ai-resizing, .ai-panel.ai-resizing * { user-select: none; cursor: ew-resize; } /* Drag handle on the panel's left edge — thin strip, slightly clickable past the border for forgiving hit-testing. */ .ai-panel-resize-handle { position: absolute; top: 0; bottom: 0; left: -3px; width: 7px; cursor: ew-resize; z-index: 1101; background: transparent; transition: background 0.15s; } .ai-panel-resize-handle:hover, .ai-panel.ai-resizing .ai-panel-resize-handle { background: rgba(23,49,77,0.25); } .ai-panel-head { background: var(--text-strong); color: #fff; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ai-panel-head .ai-title { font-size: 14px; font-weight: 700; letter-spacing: 0.3px; } .ai-head-controls { display: flex; align-items: center; gap: 6px; } .ai-head-controls select { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; padding: 4px 6px; font-size: 12px; font-family: inherit; cursor: pointer; } .ai-head-controls select option { color: var(--text); } /* Left-side controls (Effort + Web) lifted out of the ⚙ settings panel so they're one-click reachable from the chat header. justify-content: space-between on .ai-panel-head puts these flush-left automatically. */ .ai-head-controls-left { /* no extra rules needed */ } .ai-head-web { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: #fff; font-size: 12px; line-height: 1; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; background: rgba(255,255,255,0.14); } .ai-head-web input[type="checkbox"] { margin: 0; cursor: pointer; } .ai-head-web:hover { background: rgba(255,255,255,0.20); } .ai-icon-btn { background: rgba(255,255,255,0.16); color: #fff; border: none; border-radius: 4px; padding: 4px 9px; font-size: 14px; cursor: pointer; font-family: inherit; line-height: 1; } .ai-icon-btn:hover { background: rgba(255,255,255,0.30); } /* Conversation area */ .ai-conv { flex: 1 1 0; min-height: 0; /* must shrink below content height so it scrolls */ overflow-y: auto; padding: 14px; overscroll-behavior: contain; /* don't propagate scroll to the dashboard at the boundary */ background: #fff; display: flex; flex-direction: column; gap: 12px; } .ai-turn { display: flex; } .ai-turn-user { flex-direction: column; align-items: flex-end; } .ai-turn-assistant { justify-content: flex-start; } .ai-turn-system, .ai-turn-error { justify-content: stretch; } /* Passphrase gate (proxy mode) */ .ai-passgate { justify-content: stretch; } .ai-passgate .ai-bubble { width: 100%; border: 1px solid var(--border); background: var(--bg); border-radius: 6px; padding: 14px 16px; } .ai-passgate-title { font-weight: 700; color: var(--text-strong); font-size: 13px; margin-bottom: 4px; } .ai-passgate-msg { font-size: 12.5px; color: var(--text); margin-bottom: 10px; } .ai-passgate-form { display: flex; gap: 8px; } .ai-passgate-input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; font-family: inherit; } .ai-passgate-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .ai-passgate-btn { padding: 7px 14px; border: 1px solid var(--text-strong); background: var(--text-strong); color: #fff; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .ai-passgate-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); } .ai-passgate-btn:disabled { opacity: 0.6; cursor: default; } .ai-passgate-err { margin-top: 8px; font-size: 12px; color: var(--negative); } /* Collapsed assistant turn — kept in DOM (so it can be re-expanded) but not visible. The matching user turn shows a "Show answer" toggle. */ .ai-turn-collapsed { display: none !important; } .ai-turn-toggle { margin-top: 4px; background: transparent; border: none; font-size: 11px; color: var(--text-muted); cursor: pointer; padding: 2px 4px; font-family: inherit; } .ai-turn-toggle:hover { color: var(--text-strong); text-decoration: underline; } .ai-bubble { max-width: 88%; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--bg); border: 1px solid var(--border); } .ai-turn-user .ai-bubble { background: var(--text-strong); color: #fff; border-color: var(--text-strong); border-bottom-right-radius: 2px; } .ai-turn-assistant .ai-bubble { background: #fff; border-color: var(--border); border-bottom-left-radius: 2px; position: relative; /* anchor for the absolute .ai-copy-btn */ } /* Top-right clipboard button on finalised assistant bubbles. Low opacity by default, becomes prominent on bubble hover. */ .ai-copy-btn { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: rgba(23,49,77,0.06); border: 1px solid rgba(23,49,77,0.10); border-radius: 4px; color: var(--text-muted); cursor: pointer; opacity: 0.35; padding: 0; transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s; } .ai-turn-assistant .ai-bubble:hover .ai-copy-btn { opacity: 1; } .ai-copy-btn:hover { background: rgba(23,49,77,0.12); color: var(--text-strong); } .ai-copy-btn:focus { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; } .ai-copy-btn.copied { color: var(--accent); background: rgba(6,182,212,0.10); border-color: rgba(6,182,212,0.30); opacity: 1; } .ai-turn-system .ai-bubble { max-width: 100%; background: rgba(6,182,212,0.06); border-color: rgba(6,182,212,0.25); } .ai-turn-error .ai-bubble, .ai-error .ai-bubble { max-width: 100%; background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.40); } .ai-error-text { color: var(--negative); font-weight: 600; } .ai-bubble p { margin: 0 0 6px; } .ai-bubble p:last-child { margin-bottom: 0; } .ai-bubble ul, .ai-bubble ol { margin: 4px 0 8px 20px; padding: 0; } .ai-bubble li { margin: 0 0 8px; line-height: 1.5; } .ai-bubble li:last-child { margin-bottom: 0; } /* GitHub task lists (- [ ] / - [x]). Drop the disc bullets — the ☐ / ☑ glyphs are the marker. Dim completed items so they read as done. */ .ai-bubble ul.ai-md-task-list { list-style: none; margin-left: 4px; padding: 0; } .ai-bubble ul.ai-md-task-list li { padding: 0; } .ai-bubble li.ai-md-task-done { color: var(--text-muted); } /* Markdown headers — small steps, since the chat bubble is already a small surface */ .ai-bubble h1, .ai-bubble h2, .ai-bubble h3 { margin: 10px 0 4px; font-weight: 700; color: var(--accent-deep); line-height: 1.25; } .ai-bubble h1 { font-size: 16px; } .ai-bubble h2 { font-size: 14.5px; } .ai-bubble h3 { font-size: 13.5px; color: var(--text-strong); } /* h4 (####) and below: bold, ALL CAPS, ~2pt above body text. Used by Q for sub-section markers within an answer. */ .ai-bubble h4, .ai-bubble h5, .ai-bubble h6 { margin: 10px 0 4px; font-size: 15px; /* body text is 13px → ~2pt larger */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-deep); line-height: 1.25; } .ai-bubble h1:first-child, .ai-bubble h2:first-child, .ai-bubble h3:first-child, .ai-bubble h4:first-child, .ai-bubble h5:first-child, .ai-bubble h6:first-child { margin-top: 0; } /* Fenced code blocks (``` ```) */ .ai-md-code { margin: 6px 0; padding: 8px 10px; background: rgba(23,49,77,0.05); border: 1px solid rgba(23,49,77,0.12); border-radius: 4px; font-family: 'Consolas', 'Monaco', monospace; font-size: 11.5px; line-height: 1.45; color: var(--text); overflow-x: auto; white-space: pre; } .ai-md-code code { background: transparent; padding: 0; border-radius: 0; } /* Auto-linkified URLs */ .ai-bubble a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .ai-bubble a:hover { color: var(--text-strong); } /* Horizontal rule */ .ai-bubble hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; } /* Markdown tables — wrapped in a scrollable div so wide tables don't blow out the bubble. */ .ai-md-table-wrap { overflow-x: auto; margin: 6px 0; } .ai-md-table { border-collapse: collapse; font-size: 12px; color: var(--text); } .ai-md-table th, .ai-md-table td { border: 1px solid var(--border); padding: 4px 9px; text-align: left; white-space: nowrap; } .ai-md-table th { background: rgba(23,49,77,0.07); color: var(--accent-deep); font-weight: 600; } .ai-md-table tbody tr:nth-child(even) td { background: rgba(23,49,77,0.025); } .ai-bubble code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; font-family: 'Consolas', 'Monaco', monospace; font-size: 11.5px; } .ai-turn-user .ai-bubble code { background: rgba(255,255,255,0.18); } .ai-bubble strong { color: var(--text-strong); } .ai-turn-user .ai-bubble strong { color: #fff; } /* Welcome bubble — suggestion chips */ .ai-suggestions { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .ai-suggestion { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 5px 9px; font-size: 12px; color: var(--text-strong); cursor: pointer; transition: background 0.1s, border-color 0.1s; } .ai-suggestion:hover { background: var(--text-strong); color: #fff; border-color: var(--text-strong); } .ai-hint { color: var(--text-muted); font-size: 11.5px; font-style: italic; margin-top: 4px; } /* Tool-call chips (in pending assistant turn header) */ .ai-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .ai-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-family: 'Consolas', 'Monaco', monospace; background: var(--bg); border: 1px solid var(--border); color: var(--text); } .ai-chip-pending { background: rgba(23,49,77,0.08); border-color: rgba(23,49,77,0.30); color: var(--accent-deep); } .ai-chip-pending::before { content: "⏳ "; } .ai-chip-ok { background: rgba(6,182,212,0.10); border-color: rgba(6,182,212,0.35); color: var(--text-strong); } .ai-chip-ok::before { content: "✓ "; } .ai-chip-error { background: rgba(153,27,27,0.12); border-color: rgba(153,27,27,0.45); color: var(--negative); } .ai-chip-error::before { content: "✗ "; } /* Server-side chip variant — indigo-ish to differentiate from client-side. */ .ai-chip-server.ai-chip-pending::before { content: "⚙ "; } /* gear instead of hourglass for server work */ .ai-chip-server { background: rgba(91,100,112,0.10); border-color: rgba(91,100,112,0.40); color: #5B6470; } .ai-chip-server.ai-chip-ok { background: rgba(91,100,112,0.16); border-color: rgba(91,100,112,0.55); color: #17314D; } .ai-chip-server.ai-chip-error { background: rgba(153,27,27,0.16); border-color: rgba(153,27,27,0.55); color: var(--negative); } /* Data-locality note — first line of every answer: did Q stay local, or was data sent to an Anthropic server-side tool? */ .ai-locality { font-size: 11px; line-height: 1.4; font-weight: 600; padding: 4px 8px; margin-bottom: 8px; border-radius: 4px; border: 1px solid; display: inline-block; } .ai-locality-local { background: rgba(6,182,212,0.10); border-color: rgba(6,182,212,0.35); color: #17314D; } .ai-locality-local::before { content: "🔒 "; } .ai-locality-remote { background: rgba(180,83,9,0.10); border-color: rgba(180,83,9,0.40); color: #8a4b00; } .ai-locality-remote::before { content: "↗ "; } .ai-locality .ai-locality-detail { display: block; font-weight: 400; color: var(--text-muted); margin-top: 1px; } /* Consolidated client-tool counter chip — clickable button that toggles the sibling .ai-chip-call-list below it. */ .ai-chip-tool-counter { cursor: pointer; font-family: inherit; /* override generic .ai-chip monospace */ font-weight: 500; } .ai-chip-counter-label { display: inline; } .ai-chip-counter-toggle { font-size: 8px; opacity: 0.7; margin-left: 4px; transition: opacity 0.15s; } .ai-chip-tool-counter:hover .ai-chip-counter-toggle { opacity: 1; } /* Collapsible server-side activity group (code_execution / web_search stack under one clickable header instead of N pills). */ .ai-chip-srv-toggle { cursor: pointer; font-family: inherit; font-weight: 500; } .ai-chip-srv-toggle .srv-tw { font-size: 8px; opacity: 0.7; margin-left: 4px; } .ai-chip-srv-toggle:hover .srv-tw { opacity: 1; } .ai-chip-srv-body { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; margin-top: 4px; } .ai-chip-srv-body[hidden] { display: none; } /* Expandable list of every call Q made this turn — appears below the chips row when the counter chip is clicked. Hidden by default. */ .ai-chip-call-list { list-style: none; margin: 0 0 8px; padding: 6px 10px; background: rgba(23,49,77,0.05); border: 1px solid rgba(23,49,77,0.15); border-radius: 6px; font-family: 'Consolas', 'Monaco', monospace; font-size: 11px; line-height: 1.5; color: var(--accent-deep); max-height: 240px; overflow-y: auto; word-break: break-all; } .ai-chip-call-list li { padding: 2px 0; } .ai-chip-call-list li + li { border-top: 1px solid rgba(23,49,77,0.10); padding-top: 4px; margin-top: 4px; } /* File-download chip — clickable to re-trigger the download */ .ai-chip-file { background: rgba(6,182,212,0.10); border-color: rgba(6,182,212,0.40); color: var(--text-strong); cursor: pointer; font-family: inherit; /* override the monospace font of the generic .ai-chip */ font-weight: 600; padding: 4px 10px; } .ai-chip-file:hover { background: rgba(6,182,212,0.20); border-color: var(--accent); } .ai-chip-fname { text-decoration: underline; text-decoration-style: dotted; } .ai-chip-source { font-size: 10px; font-weight: 500; opacity: 0.75; margin-left: 2px; } /* Spinner shown while a response is being generated */ .ai-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--accent); animation: ai-spin 0.8s linear infinite; } @keyframes ai-spin { to { transform: rotate(360deg); } } /* Collapsible reasoning panel — live-filled while streaming, then left expanded (user-collapsible) once the turn completes. */ .ai-thinking { margin: 0 0 8px; border-left: 3px solid var(--accent); padding-left: 8px; font-size: 12px; color: var(--text-muted); } .ai-thinking[open] { background: rgba(6,182,212,0.04); border-radius: 0 4px 4px 0; padding: 4px 0 4px 8px; } .ai-thinking summary { cursor: pointer; font-weight: 600; user-select: none; color: var(--text-strong); padding: 2px 0; } .ai-thinking summary:hover { color: var(--accent); } .ai-thinking-body { margin-top: 4px; white-space: pre-wrap; font-family: 'Consolas', 'Monaco', monospace; font-size: 11.5px; max-height: 240px; overflow-y: auto; } /* Live text container holds raw text during streaming; gets re-rendered with mini-markdown on final. */ .ai-text { white-space: pre-wrap; } .ai-text:not([data-raw]) { white-space: normal; } /* post-render */ .ai-spinner-row { display: flex; padding: 6px 0; } /* Composer */ .ai-composer { flex-shrink: 0; /* pinned at the bottom — never squeezed */ border-top: 1px solid var(--border); padding: 10px 14px; background: var(--surface); display: flex; gap: 8px; align-items: flex-end; } .ai-composer textarea { flex: 1; resize: none; min-height: 40px; max-height: 160px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 13px; color: var(--text); background: #fff; line-height: 1.4; } .ai-composer textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); outline-offset: -1px; } .ai-send { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .ai-send:hover { background: var(--text-strong); } .ai-send:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; } .ai-send.ai-send-stop { background: var(--negative); } .ai-send.ai-send-stop:hover { background: var(--negative); filter: brightness(0.92); } .ai-stopped { margin-top: 6px; padding: 6px 10px; border-radius: 4px; background: var(--negative-soft); color: var(--negative); font-weight: 600; font-size: 12px; } /* Settings sub-panel (slides over conversation when open) */ .ai-settings { position: absolute; inset: 50px 0 0; background: var(--surface); border-top: 1px solid var(--border); padding: 16px 16px 20px; overflow-y: auto; box-shadow: 0 -4px 12px rgba(10,22,40,0.06); } .ai-settings h3 { margin: 0 0 12px; font-size: 14px; color: var(--text-strong); } .ai-field { display: block; margin-bottom: 14px; } .ai-field > span { display: block; font-size: 11px; font-weight: 700; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; } .ai-field input, .ai-field select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 13px; color: var(--text); background: #fff; } .ai-field input:focus, .ai-field select:focus { outline: 2px solid var(--accent); border-color: var(--accent); outline-offset: -1px; } .ai-field small { display: block; margin-top: 5px; font-size: 11px; color: var(--text-muted); line-height: 1.4; } /* Inline checkbox style — `` */ .ai-field-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ai-field-toggle > input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; cursor: pointer; accent-color: var(--accent); margin: 0; } .ai-field-toggle > span { display: inline; font-size: 12px; font-weight: 700; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0; } .ai-field-toggle > small { flex-basis: 100%; margin-top: 4px; margin-left: 24px; } .ai-settings-actions { display: flex; gap: 8px; justify-content: flex-end; } .ai-btn { background: var(--text-strong); color: #fff; border: none; border-radius: 4px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .ai-btn:hover { background: var(--accent); } .ai-btn-secondary { background: #fff; color: var(--text-strong); border: 1px solid var(--border); } .ai-btn-secondary:hover { background: var(--bg); } /* Reusable slider-switch primitive for AI panels (Briefing, Simulations, Presentations, Reports). Pattern: Group multiple switches in a `.ai-switch-row`. */ .ai-switch-row { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:10px; } .ai-switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:13px; color:var(--text-strong); } .ai-switch input { position:absolute; opacity:0; pointer-events:none; width:0; height:0; } .ai-switch .ai-switch-track { position:relative; display:inline-block; width:34px; height:18px; flex:0 0 auto; background:#cbd5d8; border-radius:999px; transition:background .15s ease; } .ai-switch .ai-switch-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:left .15s ease; } .ai-switch input:checked + .ai-switch-track { background:var(--accent); } .ai-switch input:checked + .ai-switch-track .ai-switch-thumb { left:18px; } .ai-switch input:focus-visible + .ai-switch-track { box-shadow:0 0 0 2px rgba(6,182,212,.35); } .ai-switch .ai-switch-label { font-weight:600; } .ai-switch .ai-switch-hint { color:var(--text-muted); font-weight:400; margin-left:4px; } .ai-switch[aria-disabled="true"], .ai-switch.is-disabled { opacity:.5; cursor:not-allowed; } /* === Global drill (rev _20) === */ .kpi.drill, [data-drill="1"]:not(.num) { cursor: pointer; } .kpi.drill:hover { box-shadow: 0 1px 2px rgba(10,22,40,0.15), inset 0 0 0 2px var(--accent); transform: translateY(-1px); transition: transform 0.1s; } tbody tr.drill { cursor: pointer; } tbody tr.drill:hover { background: rgba(6,182,212,0.10) !important; } /* AI Daily Briefing CTA tile — cyan wash (in-scheme: the Q/accent colour) so it draws the eye as the entry point to the AI feature. */ .kpi.kpi-ai-cta { /* Solid `var(--surface)` (= white since Update -293) layered below so the teal gradient reads clean-on-white instead of compositing through to the cream page bg. See tools/audit-css-cards.mjs. */ background: linear-gradient(135deg, rgba(34,211,238,0.16), rgba(6,182,212,0.10)), var(--surface); border-color: rgba(6,182,212,0.45); border-left-color: var(--accent); } .kpi.kpi-ai-cta .label { color: var(--accent-deep); } .kpi.kpi-ai-cta .value { color: var(--accent-deep); font-weight: 800; } .hbar-row.drill { cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: background 0.1s; } .hbar-row.drill:hover { background: rgba(6,182,212,0.08); } svg circle[data-drill="1"] { cursor: pointer; transition: opacity 0.15s; } svg circle[data-drill="1"]:hover { opacity: 0.78; } .pnl-row.drill { cursor: pointer; } .pnl-row.drill:hover td { background: rgba(6,182,212,0.08); } /* Historical paste — two-column layout */ .hist-override { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .hist-override h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text-strong); } .hist-override h3.budget { color: var(--text-strong); } .hist-override textarea { width: 100%; min-height: 160px; padding: 10px; border: 1px solid var(--border); border-radius: 4px; font-family: 'Consolas','Monaco',monospace; font-size: 13px; background: #fff; color: var(--text); resize: vertical; } .hist-buttons { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .hist-buttons .btn-amber { background: var(--warm); color: #fff; border: none; border-radius: 4px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .hist-buttons .btn-amber:hover { background: var(--warm); } .hist-buttons .btn-ghost { background: #fff; border: 1px solid var(--border); padding: 8px 14px; border-radius: 4px; cursor: pointer; font-family: inherit; color: var(--text-strong); font-weight: 600; } @media (max-width: 1100px) { .hist-override { grid-template-columns: 1fr; } } /* Per-column filter row inside thead (rev _20260505_2) */ #dealsTable thead tr.col-filters td { padding: 4px 6px; background: var(--bg); border-bottom: 1px solid var(--border); } #dealsTable thead tr.col-filters input { width: 100%; padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px; font-size: 11.5px; font-family: inherit; color: var(--text); background: #fff; box-sizing: border-box; } #dealsTable thead tr.col-filters input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } #dealsTable thead tr.col-filters input::placeholder { color: var(--text-muted); font-style: italic; } /* Custom Charts tab (rev _20260505_3) */ .cc-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr; gap: 12px; } .cc-col h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.4px; } .cc-col input.cc-name { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 3px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); background: #fff; margin-bottom: 6px; box-sizing: border-box; } .cc-col input.cc-name:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .cc-col textarea { width: 100%; min-height: 220px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; font-family: 'Consolas','Monaco',monospace; font-size: 12.5px; color: var(--text); background: #fff; resize: vertical; box-sizing: border-box; } .cc-col textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .cc-col.date-col h4 { color: var(--text-muted); } .cc-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text); margin-top: 8px; } .cc-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } /* Interactive legend chips (rev _20260505_5) */ .legend-item, .chart-legend > span { cursor: pointer; user-select: none; padding: 2px 6px; border-radius: 3px; transition: background 0.1s, opacity 0.15s; } .legend-item:hover, .chart-legend > span:hover { background: rgba(6,182,212,0.10); } .legend-item.legend-disabled, .chart-legend > span.legend-disabled { opacity: 0.40; text-decoration: line-through; } .legend-item.legend-disabled:hover, .chart-legend > span.legend-disabled:hover { background: rgba(245,158,11,0.06); } .legend-hint { font-size: 10px; color: var(--text-muted); font-style: italic; margin-top: 4px; } /* Drillable chart bars (rev _20260505_6) */ svg rect[data-drill="1"] { cursor: pointer; transition: filter 0.1s; } svg rect[data-drill="1"]:hover { filter: brightness(0.85); } /* Ladder control selects (rev _20260505_8) */ select.ladder-ctl { padding:6px 10px; border:1px solid var(--border); border-radius:4px; font-size:13px; font-family:inherit; color:var(--text); background:#fff; min-width:140px; } select.ladder-ctl:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); } /* Compact one-row chart legend (rev _20260505_11) */ .chart-legend { flex-wrap: nowrap; overflow-x: auto; gap: 12px; align-items: center; } .chart-legend > span { white-space: nowrap; flex: 0 0 auto; } .chart-legend > span.legend-hint { font-size: 10.5px; color: var(--text-muted); font-style: italic; opacity: 0.85; padding-left: 4px; } /* === Funding & Liquidity tab (Phase 2) === */ /* KPI row variants — auto-fit so a hidden tile reflows cleanly (the survivors share the freed space rather than leaving a gap). The minmax min-width is calibrated so the typical dashboard width produces the named column count (row-6 at ~1300px = 6 cols, etc). Per the layout grammar: a `.kpi-row` is KPI-only — tiles can be reordered within or moved between KPI rows but never into a card row. */ .kpi-row.row-6 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .kpi-row.row-5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .kpi-row.row-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .kpi-row.row-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* row-1 — single vertical stack (NII Sensitivity: KPIs beside the table). */ .kpi-row.row-1 { grid-template-columns: 1fr; } /* Sticky filter bar — sits below the (scrolling) header + tabs */ .liquidity-filters { position: sticky; top: 0; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(10,22,40,0.06); display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .liquidity-filters .ctl input, .liquidity-filters .ctl select { min-width: 110px; } .liquidity-filters .ctl.toggle { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 6px; } .liquidity-filters .ctl.toggle label { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer; } .liquidity-filters .ctl.toggle input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; cursor: pointer; accent-color: var(--accent); } /* Stacked toggles — related checkboxes sharing one filter slot. Laid out as a 2-column grid so 4 toggles render 2×2 (preserves bar height; prior column layout stretched the filter bar tall). */ .liquidity-filters .ctl.toggle-stack { display: grid; grid-template-columns: auto auto; gap: 4px 14px; align-items: center; padding-bottom: 2px; } .liquidity-filters .toggle-row { display: flex; align-items: center; gap: 8px; } .liquidity-filters .toggle-row label { font-size: 12px; color: var(--text); cursor: pointer; } .liquidity-filters .toggle-row input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; cursor: pointer; accent-color: var(--accent); } /* Action button (e.g. Export to Excel) lives at the far right of the filter bar — pushed there with margin-left: auto inside the flex row. */ .liquidity-filters .filter-action { margin-left: auto; } /* Products multi-select dropdown — looks like the other and are styled together with the column-label header above.) */ /* (Older .ladder-toolbar removed — the Excel export button now lives inline with the sub-tabs nav. The class hook is applied in JS; no dedicated CSS.) */ /* Global negative-number style — accounting convention, dark red-orange. Applies to table cells / popup cells only. KPI headline figures are explicitly excluded — they stay the dark strong colour regardless of sign (see the override below). */ .neg, td.neg, span.neg { color: var(--negative) !important; } /* KPI headline figures: ALWAYS the dark strong colour, never red, regardless of sign. Higher specificity + !important beats the bare `.neg` rule above for any `.kpi .value.neg`. */ .kpi .value, .kpi .value.neg, .kpi .value.pos, .kpi .value .neg, .kpi .value span.neg { color: var(--text-strong) !important; } /* (Universal numeric text colour removed — each section now sets its own text colour, including !important to match the Excel for negatives.) */ /* Column-group dividers — thin slate rule (#727D8C, matching the Excel section borders) after Total Assets | Total Liabs | FX Total | Total Maturing. Same treatment on header, summary, and body rows. */ .maturity-ladder th.group-end, .maturity-ladder td.group-end { border-right: 1px solid #727D8C; } /* Proxy KPI title suffix */ .kpi .label .proxy-tag { color: var(--accent); font-weight: 700; margin-left: 4px; font-size: 10px; } /* === FX Risk tab (Phase 5) === */ /* Card head row: title block on left, controls (e.g. NOP/Gross toggle) on right */ .card-head-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; flex-wrap:wrap; } .card-head-row > div:first-child { flex:1 1 auto; min-width:0; } /* NOP / Gross radio toggle */ .fx-view-toggle { display:inline-flex; gap:12px; font-size:12px; color:var(--text-muted); user-select:none; } .fx-view-toggle label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; } .fx-view-toggle input[type="radio"] { accent-color:var(--accent); cursor:pointer; } /* Per-ccy breakdown table — same look as other tables, drillable rows */ .fx-breakdown-table { width:100%; border-collapse:collapse; font-size:13px; } .fx-breakdown-table th, .fx-breakdown-table td { padding:6px 10px; border-bottom:1px solid var(--border); } .fx-breakdown-table th { background:var(--bg); color:var(--text-strong); font-weight:600; text-align:left; } .fx-breakdown-table th.num, .fx-breakdown-table td.num { text-align:right; font-variant-numeric:tabular-nums; } .fx-breakdown-table tbody tr.drill { cursor:pointer; transition:background 0.1s; } .fx-breakdown-table tbody tr.drill:hover { background:rgba(6,182,212,0.06); } .fx-breakdown-table tfoot td { background:rgba(23,49,77,0.04); font-weight:600; } /* Spot-shock matrix */ .fx-shock-table { width:100%; border-collapse:collapse; font-size:13px; } .fx-shock-table th, .fx-shock-table td { padding:6px 10px; border-bottom:1px solid var(--border); } .fx-shock-table th { background:var(--bg); color:var(--text-strong); font-weight:600; text-align:left; } .fx-shock-table th.num, .fx-shock-table td.num { text-align:right; font-variant-numeric:tabular-nums; } .fx-shock-table tfoot td { background:rgba(23,49,77,0.04); font-weight:700; } .fx-shock-table .shock-cell-pos { background:rgba(6,182,212,0.08); color:var(--text-strong); } .fx-shock-table .shock-cell-neg { background:rgba(153,27,27,0.08); color:var(--negative); } /* === FX Cashflows Ladder (eTide) === Styled to css/fx-cashflows.xlsx: a 2-row NOP/Nostro band with merged CCY labels above a slate column header; body columns alternate two per-currency palettes (grp-a blue, grp-b plum). Table metrics match eLadder (.maturity-ladder): 10.5px, 5px/3px cells, fixed widths. */ #fx-ladder-table { font-size:10.5px; font-variant-numeric:tabular-nums; border-collapse:separate; border-spacing:0; table-layout:fixed; width:max-content; background:var(--surface); } #fx-ladder-table col.fx-col-date { width:104px; } #fx-ladder-table col.fx-col-bucket { width:60px; } #fx-ladder-table colgroup col { width:74px; } #fx-ladder-table th, #fx-ladder-table td { padding:5px 3px; white-space:nowrap; text-align:center; border-bottom:1px solid var(--border); } /* --- Top NOP / Nostro band --- */ #fx-ladder-table th.fx-band-pad { background:var(--surface); border:none; border-bottom:none; } #fx-ladder-table th.fx-band-ccy { color:#fff; font-weight:700; letter-spacing:0.5px; } #fx-ladder-table th.fx-band-ccy.fx-grp-a { background:#3E5367; } #fx-ladder-table th.fx-band-ccy.fx-grp-b { background:#701E67; } #fx-ladder-table th.fx-band-ccy.fx-grp-aud { background:#166534; } /* AUD — green family */ #fx-ladder-table th.fx-band-ccy.fx-grp-tot { background:#334155; } /* Total — neutral slate */ #fx-ladder-table th.fx-band-lbl, #fx-ladder-table th.fx-band-val { font-weight:700; } #fx-ladder-table th.fx-band-nop { background:#EFEDE6; color:#17314D; } #fx-ladder-table th.fx-band-nostro.fx-grp-a { background:#6E7E8D; color:#fff; } #fx-ladder-table th.fx-band-nostro.fx-grp-b { background:#902784; color:#fff; } /* --- Slate column header --- */ #fx-ladder-table tr.fx-colhead th { background:#334155; color:#fff; font-weight:700; } #fx-ladder-table tr.fx-colhead th.fx-date-head { text-align:left; padding-left:8px; } /* --- Header block: a single border around the OUTSIDE of the three header rows (NOP band + Nostro band + slate column header); no inner vertical or horizontal lines between header cells. --- */ #fx-ladder-table thead th { border-bottom:none; } #fx-ladder-table thead th.group-end { border-right:none; } #fx-ladder-table thead tr.fx-band-row-nop th { border-top:1px solid #727D8C; } #fx-ladder-table thead tr.fx-colhead th { border-bottom:1px solid #727D8C; } #fx-ladder-table thead th.fx-band-pad, #fx-ladder-table thead tr.fx-colhead th.fx-date-head { border-left:1px solid #727D8C; } #fx-ladder-table thead tr.fx-band-row-nop th:last-child, #fx-ladder-table thead tr.fx-band-row-nostro th:last-child, #fx-ladder-table thead tr.fx-colhead th:last-child { border-right:1px solid #727D8C; } /* The empty top-left spacer (cells (1,1)/(1,2)/(2,1) — the colspan-2, rowspan-2 pad) carries no top/left border, so the outline frames the content, not the blank corner. */ #fx-ladder-table thead tr.fx-band-row-nop th.fx-band-pad { border-top:none; border-left:none; } /* --- Date + Bucket columns (body) --- */ #fx-ladder-table td.fx-date-cell { text-align:left; padding-left:8px; background:#FFFFFF; color:#111111; border-left:1px solid #727D8C; } #fx-ladder-table td.fx-bucket-cell { background:#FFFFFF; color:#111111; font-weight:600; border-right:1px solid #727D8C; } /* --- Body per-currency palette — eLadder's asset/total-asset (blue) and liability/total-liab (purple) shades transferred 1:1. Rec/Pay use the plain product shade; Net uses the "total" shade. --- */ #fx-ladder-table tbody td.fx-grp-a { background:#FAFDFF; color:#111111; } #fx-ladder-table tbody td.fx-grp-a.fx-cell-net { background:#EAF8FF; color:#111111; font-weight:600; } #fx-ladder-table tbody td.fx-grp-b { background:#FFF8FF; color:#3C1037; } #fx-ladder-table tbody td.fx-grp-b.fx-cell-net { background:#F9DDF3; color:#3C1037; font-weight:600; } /* AUD — green family, centred on #166534, same lightness structure as the blue/purple groups (plain shade + stronger "Net/total" shade). */ #fx-ladder-table tbody td.fx-grp-aud { background:#F4FBF6; color:#14532D; } #fx-ladder-table tbody td.fx-grp-aud.fx-cell-net { background:#DCF0E3; color:#14532D; font-weight:600; } /* Total — neutral (not a currency); a plain aggregate column. */ #fx-ladder-table tbody td.fx-grp-tot { background:#EEF1F5; color:#111111; font-weight:700; } #fx-ladder-table td.empty { color:var(--border); } /* Currency-group divider + drill affordance (matches eLadder) */ #fx-ladder-table th.group-end, #fx-ladder-table td.group-end { border-right:1px solid #727D8C; } #fx-ladder-table td.drill { cursor:pointer; transition:filter 0.1s, box-shadow 0.1s; } #fx-ladder-table td.drill:hover { filter:brightness(0.95); box-shadow:inset 0 0 0 2px #727D8C; } /* ============================ DEAL BLOTTER (R8) ============================ */ /* Scoped under #panel-deals so the rules ship with the deals module when the dashboard is later modularised. */ /* Cap the Blotter card at 700px and let only the table scroll — toolbar and footer pager stay pinned. Mirrors .dealtable-card. */ #panel-deals .blotter-card { padding-bottom:14px; max-height:700px; display:flex; flex-direction:column; overflow:hidden; } body.dev-mode #panel-deals .blotter-card { overflow:visible; } #panel-deals .blotter-toolbar { display:flex; align-items:center; gap:14px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--border); } #panel-deals .blotter-toolbar h2 { margin:0; flex:1; } #panel-deals .blotter-count { font-size:12.5px; color:var(--text-muted); } #panel-deals .blotter-count-num { color:var(--text-strong); font-weight:700; } #panel-deals .blotter-tools { display:flex; gap:8px; position:relative; } #panel-deals .blotter-icon-btn { padding:5px 10px; font-size:12.5px; border:1px solid var(--border); background:#fff; border-radius:4px; cursor:pointer; color:var(--text-strong); font-family:inherit; font-weight:600; } #panel-deals .blotter-icon-btn:hover { background:var(--text-strong); color:#fff; border-color:var(--text-strong); } #panel-deals .blotter-scroll { width:100%; overflow:auto; flex:1 1 auto; min-height:0; } #panel-deals .blotter-toolbar { flex:none; } #panel-deals .blotter-table { font-size:12.5px; } #panel-deals .blotter-table th, #panel-deals .blotter-table td { padding:5px 9px; } #panel-deals .blotter-table th { position:sticky; top:0; z-index:1; } #panel-deals .blotter-table tbody tr.drill { cursor:pointer; } /* Per-column typing filter row, sits directly under the header. */ #panel-deals .blotter-filter-row th { padding:3px 6px; background:#fff; cursor:default; text-transform:none; letter-spacing:normal; font-weight:normal; position:static; /* don't stick — only the head row does */ } #panel-deals .blotter-filter-row input { width:100%; box-sizing:border-box; padding:3px 6px; border:1px solid var(--border); border-radius:3px; font-size:11.5px; font-family:inherit; color:var(--text); background:#fff; } #panel-deals .blotter-filter-row input:focus { outline:1.5px solid var(--accent); outline-offset:-1px; border-color:var(--accent); } /* Empty state when filters yield zero matches. */ #panel-deals .blotter-empty { padding:24px 12px; text-align:center; color:var(--text-muted); font-style:italic; } /* Column-config popover (gear button -> checkbox list of columns). */ #panel-deals .blotter-config-popover { position:absolute; top:34px; right:0; z-index:20; min-width:240px; max-height:360px; overflow-y:auto; background:#fff; border:1px solid var(--border); border-radius:6px; box-shadow:0 6px 16px rgba(0,0,0,0.12); padding:10px 12px; } #panel-deals .blotter-config-popover .config-title { font-size:11px; font-weight:700; color:var(--text-strong); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px; } #panel-deals .blotter-config-popover label { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12.5px; color:var(--text); cursor:pointer; user-select:none; } #panel-deals .blotter-config-popover label:hover { color:var(--text-strong); } #panel-deals .blotter-config-popover label input { margin:0; cursor:pointer; } #panel-deals .blotter-config-popover .config-actions { display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:8px; border-top:1px solid var(--border); } #panel-deals .blotter-config-popover .config-link { background:none; border:none; padding:0; cursor:pointer; font-size:12px; color:var(--text-muted); font-family:inherit; text-decoration:underline; } #panel-deals .blotter-config-popover .config-link:hover { color:var(--accent); } #fx-ladder-table tbody tr.fx-nostro-row:hover .fx-nostro-cell { background:rgba(51,65,85,0.18); } /* --- FX Forwards (eHarbour): NOP band above the table + Cash row. Light formatting; columns align with the ladder below (same table). --- */ #fx-fwd-table thead tr.fx-fwd-nop th { background:#EFEDE6; color:#17314D; font-weight:700; border-top:1px solid #727D8C; padding:5px 6px; text-align:center; } #fx-fwd-table thead tr.fx-fwd-nop th.fx-fwd-nop-pad { text-align:left; padding-left:8px; letter-spacing:0.3px; } #fx-fwd-table tbody tr.fx-fwd-cash td { background:#F4F2EC; color:#17314D; font-weight:600; border-bottom:1px solid #C9CCBF; } #fx-fwd-table tbody tr.fx-fwd-cash td.fx-date-cell { text-align:left; padding-left:8px; } /* ===================== RISK × BOOK NAVIGATION PAD (Overview) ===================== Small matrix of dots: rows = risks, cols = books. Filled dot = primary risk overlap, hollow dot = secondary, blank cell = none. Each marker is a launcher — left-click or right-click opens a context menu with deep-links to the risk tab, the portfolio tab, the relevant Risk-Limits sub-tab, and (where it exists) the portfolio's Desk-Limits sub-tab. Layout sits in a standard .dashboard-row beside the Balance Sheet by Product chart, so width matches the chart card. */ #panel-overview .navpad-card .navpad-howto { margin:6px 0 2px; padding:7px 10px; background:rgba(10,22,40,0.04); border-left:3px solid var(--accent); border-radius:0 4px 4px 0; font-size:12px; line-height:1.45; color:var(--text-strong); } #panel-overview .navpad-card .navpad-howto em { color:var(--text-muted); font-style:normal; font-weight:600; } #panel-overview .navpad-card #overview-navpad { margin-top:10px; } /* Axis-titled wrapper: vertical "Risk" rail to the left, grid to its right with a "Portfolio" caption row above the column heads. */ #panel-overview .navpad-wrap { display:flex; align-items:stretch; gap:6px; } #panel-overview .navpad-yaxis { display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; transform:rotate(180deg); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.10em; color:var(--text-muted); padding:0 4px; flex:0 0 auto; } #panel-overview .navpad-grid { flex:1; min-width:0; display:grid; /* leading risk-label col, then 6 equal book cols */ grid-template-columns: minmax(96px, max-content) repeat(6, minmax(0, 1fr)); gap:4px 6px; align-items:center; font-size:12px; } #panel-overview .navpad-grid .navpad-xaxis-cell { grid-column: 2 / span 6; text-align:center; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.10em; color:var(--text-muted); padding:0 0 4px; } #panel-overview .navpad-grid .np-corner { /* top-left empty cell */ } #panel-overview .navpad-grid .np-col-head { text-align:center; font-size:11px; font-weight:600; color:var(--text-strong); padding:4px 2px; border-bottom:1px solid var(--border); white-space:nowrap; } #panel-overview .navpad-grid .np-row-head { font-size:12px; font-weight:600; color:var(--text-strong); padding:6px 8px 6px 2px; border-right:1px solid var(--border); } #panel-overview .navpad-grid .np-cell { display:flex; align-items:center; justify-content:center; height:34px; } #panel-overview .navpad-grid .np-dot { display:inline-block; width:18px; height:18px; border-radius:50%; cursor:pointer; transition: transform .08s ease, box-shadow .08s ease; } #panel-overview .navpad-grid .np-dot:hover { transform: scale(1.18); box-shadow:0 0 0 3px rgba(10,22,40,0.08); } #panel-overview .navpad-grid .np-dot.np-primary { background:var(--accent); border:2px solid var(--accent); } #panel-overview .navpad-grid .np-dot.np-secondary { background:transparent; border:2px solid var(--accent); } #panel-overview .navpad-grid .np-blank { color:var(--text-muted); cursor:default; font-size:14px; line-height:1; } /* Floating context menu — appears at the click point. Body-mounted so it escapes the card's overflow. */ .navpad-menu { position:fixed; z-index:9999; min-width:260px; background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:0 8px 24px rgba(10,22,40,0.18); padding:6px 0; font-size:13px; } .navpad-menu .np-menu-title { padding:4px 12px 8px; font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); margin-bottom:4px; } .navpad-menu a { display:block; padding:7px 14px; color:var(--text-strong); text-decoration:none; line-height:1.35; } .navpad-menu a:hover, .navpad-menu a:focus { background:rgba(10,22,40,0.06); outline:none; } .navpad-menu hr { border:none; border-top:1px solid var(--border); margin:4px 0; } /* ===================== EXECUTIVE RISK COCKPIT (Overview sub-panel) ===================== Same visual language as every other tab: each section is a standard .card; tiles reuse the .kpi accent-bar + soft-shadow family so the cockpit reads as part of the app, not a bare grid. KPI sizing, location and typography are intentionally unchanged. */ #panel-overview .rc-intro { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:6px; padding:12px 16px; margin-bottom:18px; font-size:12.5px; line-height:1.55; color:var(--text-muted); box-shadow:0 1px 2px rgba(10,22,40,0.05); } #panel-overview .rc-intro strong { color:var(--text-strong); } #panel-overview .rc-section.card { margin-bottom:18px; } #panel-overview .rc-section > h2 { font-size:14px; font-weight:700; color:var(--text-strong); letter-spacing:0.3px; margin:0 0 14px; padding-left:10px; border-left:3px solid var(--accent); } #panel-overview .rc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; } #panel-overview .rc-tile { background:var(--surface); border:1px solid var(--border); border-left:4px solid #C9CDD3; /* neutral accent (no live limit) */ border-radius:6px; padding:12px 14px; display:flex; flex-direction:column; gap:3px; min-height:104px; box-shadow:0 1px 2px rgba(10,22,40,0.04); transition:transform 0.1s, box-shadow 0.1s; } #panel-overview .rc-tile:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(10,22,40,0.10); } #panel-overview .rc-tile .rc-label { font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); font-weight:600; } #panel-overview .rc-tile .rc-value { font-size:22px; font-weight:700; color:var(--text-strong); line-height:1.15; } #panel-overview .rc-tile .rc-sub { font-size:11px; color:var(--text-muted); } #panel-overview .rc-tile .rc-limit { margin-top:auto; padding-top:6px; font-size:10px; font-weight:600; color:#5B6470; border-top:1px dashed var(--border); } #panel-overview .rc-tile .rc-limit-stub { color:var(--rag-pending); font-style:italic; font-weight:500; } /* Pending placeholder tiles — visibly "not built yet", not a real zero. */ #panel-overview .rc-tile.rc-pending { background:repeating-linear-gradient(135deg,#FBFAF6,#FBFAF6 9px,#F2F0E8 9px,#F2F0E8 18px); border-left-color:#C9CDD3; border-style:dashed; } #panel-overview .rc-tile.rc-pending .rc-value { color:var(--rag-pending); } #panel-overview .rc-tile.rc-pending .rc-value::after { content:" · pending"; font-size:11px; font-weight:600; color:var(--rag-pending); } /* RAG status — coloured left-accent + soft tint (the .kpi accent language), driven by the risk-limits framework. */ #panel-overview .rc-tile.rc-green { background:#F1F8F2; border-color:#CBE6CF; border-left-color:#3FA45A; } #panel-overview .rc-tile.rc-amber { background:#FDF6E8; border-color:#EAD7A5; border-left-color:#E0A23B; } #panel-overview .rc-tile.rc-red { background:#FBEDEC; border-color:#E6C2BE; border-left-color:#CF5247; } #panel-overview .rc-tile.rc-green .rc-limit, #panel-overview .rc-tile.rc-amber .rc-limit, #panel-overview .rc-tile.rc-red .rc-limit { color:#3a4350; border-top-color:rgba(0,0,0,0.10); } /* ===================== RISK-LIMITS PRESENTATION (panel-agnostic) ===================== These `.rl-*` classes used to be scoped to #panel-risk_limits, but the Desk Limits sub-panels now live INSIDE each Portfolio panel (FX Book / Rates Book / ST Funding & MM / Debt / C&I / Corporate) as well as the legacy Risk Limits tab + the Admin Risk-Appetite Calibration reference page. CSS is unscoped so the styles work everywhere the same `.rl-*` markup renders. */ .rl-ras p { margin:0 0 10px; line-height:1.5; } .rl-legend { margin:8px 0 12px; padding-left:0; list-style:none; } .rl-legend li { margin:5px 0; font-size:13px; } .rl-table { width:100%; } .rl-table th { white-space:nowrap; } .rl-basis { font-size:11px; color:var(--text-muted); margin-top:2px; } /* Breach + trigger row highlighting — strong red left-border + deeper tint so a desk-runner can't miss it. */ .rl-row-red td { background:rgba(217,90,90,0.16); } .rl-row-red td:first-child { box-shadow: inset 4px 0 0 var(--rag-red); } .rl-row-amber td { background:rgba(230,170,60,0.13); } .rl-row-amber td:first-child { box-shadow: inset 4px 0 0 var(--rag-amber); } .rl-row:hover td { filter: brightness(0.97); } .rl-chip { display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.3px; padding:2px 7px; border-radius:10px; white-space:nowrap; } .rl-chip.rl-green { background:var(--rag-green); color:#fff; } .rl-chip.rl-amber { background:var(--rag-amber); color:#fff; } .rl-chip.rl-red { background:var(--rag-red); color:#fff; } .rl-chip.rl-pending { background:var(--rag-pending); color:#fff; } .rl-tag { display:inline-block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:1px 5px; border-radius:3px; margin-left:4px; vertical-align:middle; } .rl-tag-pending { background:#EEF0F2; color:#6b7480; } .rl-tag-proxy { background:#E7EEF6; color:#1f4e79; } .rl-tag-reg { background:#F3E8F1; color:#7a2768; } .rl-tag-draft { background:#FDF0D8; color:#8a5a00; } /* Heatmap (used only inside #panel-risk_limits Overview sub-tab). */ #panel-risk_limits .rl-heatmap { display:flex; flex-direction:column; gap:8px; } #panel-risk_limits .rl-heat-row { display:grid; grid-template-columns:200px 1fr 130px; align-items:center; gap:12px; } #panel-risk_limits .rl-heat-lbl { font-size:12px; font-weight:600; color:var(--text-strong); } #panel-risk_limits .rl-heat-cells { display:flex; flex-wrap:wrap; gap:4px; } #panel-risk_limits .rl-heat { width:18px; height:18px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,0.08); } #panel-risk_limits .rl-heat.rl-green { background:#2E8B47; } #panel-risk_limits .rl-heat.rl-amber { background:#D9A441; } #panel-risk_limits .rl-heat.rl-red { background:#C0392B; } #panel-risk_limits .rl-heat.rl-pending { background:#cfd5db; } #panel-risk_limits .rl-heat-sum { font-size:11px; color:var(--text-muted); text-align:right; } /* ---- Active Breaches callout (top of every Desk Limits sub-panel) ---- `background` on the callout REPLACES the parent `.card` rule (more specific). Layered: red gradient on top, solid white below. Since Update -293 `--surface` IS pure white, but we keep the explicit `#ffffff` here as a defence-in-depth marker (and the audit lint enforces it). The opaque base prevents the page `--bg` showing through and tinting the result beige (the root cause of Updates -254 / -289 / -292). */ .rl-breaches { border-left:4px solid var(--rag-red); background: linear-gradient(90deg, rgba(217,90,90,0.14) 0%, rgba(217,90,90,0.06) 100%), #ffffff; } .rl-breaches h2 { color:#8a1717; } .rl-breach-list { margin:8px 0 0; padding-left:22px; line-height:1.6; font-size:13px; } .rl-breach-list li { margin:3px 0; } .rl-breach-list li strong { color:#1a2229; } /* ===================== CAPITAL RISK — RAG-coloured KPI tile ===================== Used on the Capital Risk panel's KPI rows to colour the left border of each ratio tile per the Board RAG status (green / amber / red / pending). Rides on `.kpi` so all the normal tile internals (label / value / sub) continue to apply unchanged. */ .kpi.cr-rag-green { border-left-color:var(--rag-green); } .kpi.cr-rag-amber { border-left-color:var(--rag-amber); } /* Transparent red tint stacked on a solid var(--surface) base so the page beige can't composite through (see tools/audit-css-cards.mjs; same pattern as .kpi.kpi-ai-cta / .rl-breaches). */ .kpi.cr-rag-red { border-left-color:var(--rag-red); background:linear-gradient(rgba(217,90,90,0.06),rgba(217,90,90,0.06)),var(--surface); } .kpi.cr-rag-pending { border-left-color:var(--rag-pending); } .kpi.cr-rag .label .rl-chip { margin-left:6px; } /* Capital Risk · Headroom horizontal-bar viz — CSS-only since the data is percentage-point distances (4 small values), not a money-axis fit. */ #panel-capital_risk .cr-hr-bars { display:flex; flex-direction:column; gap:10px; margin-top:6px; } #panel-capital_risk .cr-hr-row { display:grid; grid-template-columns:160px 1fr 80px; align-items:center; gap:12px; } #panel-capital_risk .cr-hr-lbl { font-size:12px; color:var(--text-strong); font-weight:600; } #panel-capital_risk .cr-hr-track { height:18px; background:rgba(10,22,40,0.06); border-radius:3px; overflow:hidden; } #panel-capital_risk .cr-hr-fill { height:100%; border-radius:3px; } #panel-capital_risk .cr-hr-fill.cr-hr-green { background:#2E8B47; } #panel-capital_risk .cr-hr-fill.cr-hr-amber { background:#D9A441; } #panel-capital_risk .cr-hr-fill.cr-hr-red { background:#C0392B; } #panel-capital_risk .cr-hr-fill.cr-hr-pending { background:#cfd5db; } #panel-capital_risk .cr-hr-fill.cr-hr-neg { background:#C0392B; } #panel-capital_risk .cr-hr-val { font-size:13px; font-weight:700; color:var(--text-strong); text-align:right; } /* ===================== LENS BANNER + MAP (#8B, cross-cutting chrome) ===================== */ .lens-banner { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:0 0 12px; padding:7px 12px; background:rgba(14,124,90,0.06); border:1px solid rgba(14,124,90,0.20); border-radius:5px; font-size:12px; color:#3a4350; } .lens-banner .lens-tag { font-size:9px; font-weight:700; letter-spacing:0.5px; color:#0E7C5A; background:rgba(14,124,90,0.12); border-radius:3px; padding:1px 6px; text-transform:uppercase; } .lens-banner .lens-text { font-weight:600; } .lens-banner .lens-links { color:var(--text-muted); } .lens-banner .lens-links a, .ov-lens-map a.ov-lens-link { color:#0E7C5A; font-weight:600; text-decoration:none; cursor:pointer; } .lens-banner .lens-links a:hover, .ov-lens-map a.ov-lens-link:hover { text-decoration:underline; } #panel-overview table.ov-lens-map td:first-child { color:var(--text-strong); } /* ===================== PANEL TITLE BAR (cross-cutting chrome) ===================== Injected by the router as every panel's first child so the active view is always named on-screen (tabs are now reached via category dropdowns — the strip no longer shows the leaf). */ .panel-title { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:0 0 10px; border-bottom:1px solid var(--border); } .panel-title .pt-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--accent-deep); background:rgba(6,182,212,0.10); border:1px solid rgba(6,182,212,0.28); border-radius:4px; padding:2px 8px; } .panel-title .pt-name { font-size:18px; font-weight:700; color:var(--text-strong); letter-spacing:0.2px; } /* ============================ DEBT PORTFOLIO (R9) ============================ */ /* Overview sub-panel: left half = bar chart, right half = metrics. */ #panel-debt .debt-overview-grid { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:14px; align-items:stretch; } #panel-debt .debt-chart-card, #panel-debt .debt-metrics-card { display:flex; flex-direction:column; } /* Per-product table */ #panel-debt .debt-by-product table { font-size:12.5px; } #panel-debt .debt-by-product th, #panel-debt .debt-by-product td { padding:6px 8px; } #panel-debt .debt-by-product tbody tr { cursor:pointer; } #panel-debt .debt-by-product tfoot td { background:var(--bg); font-weight:700; color:var(--text-strong); border-top:2px solid var(--border); } /* Collapse to single column when narrow. */ @media (max-width: 1100px) { #panel-debt .debt-overview-grid { grid-template-columns: 1fr; } } /* Debt Ladder toolbar */ #panel-debt .debt-ladder-toolbar { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:8px; } #panel-debt .debt-ladder-toolbar .ctl input, #panel-debt .debt-ladder-toolbar .ctl select { min-width:100px; } #panel-debt .debt-ladder-toggle { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text); cursor:pointer; user-select:none; padding-bottom:6px; } /* Debt Maturity Profile uses the shared .ctl.products-multi pattern for its product picker — no module-specific styling needed. */ #panel-debt .debt-ladder-scroll { width:100%; overflow-x:auto; } #panel-debt #debt-ladder-table { font-size:12.5px; } #panel-debt #debt-ladder-table th, #panel-debt #debt-ladder-table td { padding:5px 9px; } #panel-debt #debt-ladder-table td.drill { cursor:pointer; } #panel-debt #debt-ladder-table td.drill:hover { background:rgba(6,182,212,0.10); color:var(--text-strong); } #panel-debt #debt-ladder-table tfoot td { background:var(--bg); border-top:2px solid var(--border); color:var(--text-strong); } /* ===================== CREDIT & INVESTMENTS PORTFOLIO (R10) ===================== */ /* Asset-side mirror of the Debt Portfolio layout. */ #panel-credit_investments .ci-overview-grid { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:14px; align-items:stretch; } #panel-credit_investments .ci-chart-card, #panel-credit_investments .ci-metrics-card { display:flex; flex-direction:column; } #panel-credit_investments .ci-secmat-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 10px; } #panel-credit_investments .ci-secmat-toolbar select { padding:3px 6px; font-family:inherit; } #panel-credit_investments .ci-curve-dd { position:relative; } #panel-credit_investments .ci-curve-dd-btn { padding:4px 10px; font:inherit; font-size:12.5px; cursor:pointer; border:1px solid var(--border); border-radius:4px; background:var(--surface); color:var(--text-strong); } #panel-credit_investments .ci-curve-dd-panel { position:absolute; top:calc(100% + 4px); left:0; z-index:20; background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:0 6px 20px rgba(10,22,40,0.18); padding:8px 10px; display:flex; flex-direction:column; gap:6px; min-width:180px; } #panel-credit_investments .ci-curve-dd-panel[hidden] { display:none; } #panel-credit_investments .ci-curve-dd-panel label { display:flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer; white-space:nowrap; } #panel-credit_investments .ci-secmat-toolbar .hint { margin:0; } #panel-credit_investments .ci-by-product table { font-size:12.5px; } #panel-credit_investments .ci-by-product th, #panel-credit_investments .ci-by-product td { padding:6px 8px; } #panel-credit_investments .ci-by-product tbody tr { cursor:pointer; } #panel-credit_investments .ci-by-product tfoot td { background:var(--bg); font-weight:700; color:var(--text-strong); border-top:2px solid var(--border); } @media (max-width: 1100px) { #panel-credit_investments .ci-overview-grid { grid-template-columns: 1fr; } } #panel-credit_investments .ci-ladder-toolbar { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:8px; } #panel-credit_investments .ci-ladder-toolbar .ctl input, #panel-credit_investments .ci-ladder-toolbar .ctl select { min-width:100px; } /* Lending Maturity Profile — product toggle row (mirrors Debt Profile) */ #panel-credit_investments .ci-mat-products { display:flex; flex-wrap:wrap; gap:8px 16px; margin:6px 0 12px; } #panel-credit_investments .ci-mat-prod { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text); cursor:pointer; user-select:none; } #panel-credit_investments .ci-mat-prod input[type="checkbox"] { width:15px; height:15px; cursor:pointer; accent-color:var(--accent); } #panel-credit_investments .ci-mat-prod .sw { width:11px; height:11px; border-radius:2px; display:inline-block; } #panel-credit_investments .ci-ladder-toggle { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text); cursor:pointer; user-select:none; padding-bottom:6px; } #panel-credit_investments .ci-ladder-scroll { width:100%; overflow-x:auto; } #panel-credit_investments #ci-ladder-table { font-size:12.5px; } #panel-credit_investments #ci-ladder-table th, #panel-credit_investments #ci-ladder-table td { padding:5px 9px; } #panel-credit_investments #ci-ladder-table td.drill { cursor:pointer; } #panel-credit_investments #ci-ladder-table td.drill:hover { background:rgba(6,182,212,0.10); color:var(--text-strong); } #panel-credit_investments #ci-ladder-table tfoot td { background:var(--bg); border-top:2px solid var(--border); color:var(--text-strong); } /* Money Market / Corporate / Securities detail tables */ #panel-credit_investments .ci-ctl { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13px; color:var(--text-muted); flex-wrap:wrap; } #panel-credit_investments .ci-ctl select, #panel-credit_investments .ci-ctl input { font-family:inherit; } #panel-credit_investments .ci-table-scroll { width:100%; overflow-x:auto; max-height:64vh; } #panel-credit_investments .ci-table { width:100%; border-collapse:collapse; font-size:12px; } #panel-credit_investments .ci-table th, #panel-credit_investments .ci-table td { padding:5px 8px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; } #panel-credit_investments .ci-table th.num, #panel-credit_investments .ci-table td.num { text-align:right; font-variant-numeric:tabular-nums; } #panel-credit_investments .ci-table thead th { position:sticky; top:0; background:var(--bg); color:var(--text-strong); font-weight:600; cursor:pointer; } #panel-credit_investments .ci-table tbody tr[data-drill] { cursor:pointer; } #panel-credit_investments .ci-table tbody tr[data-drill]:hover { background:rgba(6,182,212,0.10); } /* ======================== CORPORATE BOOK (R11) ======================== */ /* Relationship lens. Scoped under #panel-corporate per modularisation. */ #panel-corporate .corp-chart-card { display:flex; flex-direction:column; } #panel-corporate .corp-table { width:100%; border-collapse:collapse; font-size:12.5px; } #panel-corporate .corp-table th, #panel-corporate .corp-table td { padding:6px 9px; border-bottom:1px solid var(--border); text-align:left; } #panel-corporate .corp-table th.num, #panel-corporate .corp-table td.num { text-align:right; font-variant-numeric:tabular-nums; } #panel-corporate .corp-table thead th { background:var(--bg); color:var(--text-strong); font-weight:600; } #panel-corporate .corp-table tfoot td { background:var(--bg); border-top:2px solid var(--border); color:var(--text-strong); } #panel-corporate .corp-table td.drill, #panel-corporate .corp-table tr[data-drill] { cursor:pointer; } #panel-corporate .corp-table td.drill:hover, #panel-corporate .corp-table tr[data-drill]:hover { background:rgba(6,182,212,0.10); color:var(--text-strong); } #panel-corporate .corp-ctl { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13px; color:var(--text-muted); } #panel-corporate .corp-ctl select { font-family:inherit; } #panel-corporate .corp-pen td { text-align:center; } #panel-corporate .corp-pen td:first-child { text-align:left; } #panel-corporate .corp-yes { color:var(--accent); font-weight:700; text-align:center; } #panel-corporate .corp-no { color:var(--border); text-align:center; } #panel-corporate .corp-ladder-scroll { width:100%; overflow-x:auto; max-height:62vh; padding-left:35px; } #panel-corporate .corp-breach { color:var(--negative); font-weight:600; } #panel-corporate .corp-ctl input[type="number"] { width:64px; font-family:inherit; } /* Monitoring: refinancing ladder (left) + Up Next list (right), equal height. The Up Next body scrolls; 50 events/page with a pager. */ #panel-corporate .corp-mon-row { align-items:stretch; } #panel-corporate .corp-ladder-card, #panel-corporate .corp-upnext-card { display:flex; flex-direction:column; min-width:0; } #panel-corporate .corp-upnext-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; max-height:62vh; margin-top:6px; } #panel-corporate .corp-upnext-scroll thead th { position:sticky; top:0; background:var(--surface); z-index:1; } #panel-corporate .corp-upnext-pager { display:flex; align-items:center; justify-content:center; gap:14px; padding:8px 0 2px; font-size:12px; color:var(--text-muted); } #panel-corporate .corp-upnext-pager button { font-family:inherit; font-size:12px; cursor:pointer; line-height:1; background:var(--surface); color:var(--text-strong); border:1px solid var(--border); border-radius:4px; padding:3px 9px; } #panel-corporate .corp-upnext-pager button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); } #panel-corporate .corp-upnext-pager button:disabled { opacity:0.4; cursor:default; } /* Customer profile (single-client lens) */ #panel-corporate .corp-prof-combo { position:relative; display:inline-block; } #panel-corporate .corp-prof-input { font-family:inherit; font-size:13px; padding:6px 10px; min-width:300px; border:1px solid #c7ccd6; border-radius:4px; background:#ffffff; color:#1a2233; } #panel-corporate .corp-prof-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(6,182,212,0.18); } #panel-corporate .corp-prof-input::placeholder { color:#8b93a3; } #panel-corporate .corp-prof-list { position:absolute; top:calc(100% + 3px); left:0; z-index:40; min-width:300px; max-height:280px; overflow-y:auto; background:#ffffff; border:1px solid #c7ccd6; border-radius:5px; box-shadow:0 6px 20px rgba(15,23,42,0.18); } #panel-corporate .corp-prof-list[hidden] { display:none; } #panel-corporate .corp-prof-opt { padding:7px 12px; font-size:13px; color:#1a2233; cursor:pointer; border-bottom:1px solid #eef0f4; } #panel-corporate .corp-prof-opt:last-child { border-bottom:0; } #panel-corporate .corp-prof-opt:hover { background:#eaf6fb; } #panel-corporate .corp-prof-opt.sel { background:#d6eef7; font-weight:600; } #panel-corporate .corp-prof-noopt { padding:8px 12px; font-size:13px; color:#8b93a3; } #panel-corporate .corp-prof-basic h2 { margin-bottom:2px; } #panel-corporate .corp-prof-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 22px; margin-top:12px; } #panel-corporate .corp-prof-info { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; border-bottom:1px solid var(--border); padding:5px 0; } #panel-corporate .corp-prof-info .k { color:var(--text-muted); } #panel-corporate .corp-prof-info .v { color:var(--text-strong); font-weight:600; text-align:right; } #panel-corporate .corp-prof-card h2 { margin-bottom:8px; } #panel-corporate .corp-prof-table th.corp-exp-cell, #panel-corporate .corp-prof-table td.corp-exp-cell { width:48px; white-space:nowrap; text-align:center; padding-left:4px; padding-right:4px; } #panel-corporate .corp-exp-toggle, #panel-corporate .corp-flt-toggle { cursor:pointer; color:var(--accent); font-weight:700; user-select:none; display:inline-block; width:16px; } #panel-corporate .corp-flt-toggle { color:var(--text-muted); font-weight:400; } #panel-corporate .corp-flt-toggle:hover { color:var(--accent); } #panel-corporate .corp-flt-toggle.on { color:var(--accent); font-weight:700; } #panel-corporate .corp-prod-nil td { color:var(--text-muted); } #panel-corporate .corp-exp > td { padding:0; background:var(--surface); } #panel-corporate .corp-exp-host { padding:8px 10px; } /* Nested deal-blotter header matches the product-aggregate super-header (.corp-table thead th — the stone var(--bg)), so the Deal/Ccy/Amount row reads as one with the Product/Balance/WA row above it. */ #panel-corporate .corp-exp-host .dt-table thead th { background:var(--bg); color:var(--text-strong); } @media (max-width:1000px){ #panel-corporate .dashboard-row { grid-template-columns:1fr; } #panel-corporate .corp-prof-info-grid { grid-template-columns:1fr; } } /* ============================ REGULATORY REPORTING (R6) ============================ */ #panel-regulatory .hqla-card { padding-bottom:14px; } #panel-regulatory .hqla-table-scroll { width:100%; overflow-x:auto; } #panel-regulatory .hqla-table { font-size:12.5px; } #panel-regulatory .hqla-table th, #panel-regulatory .hqla-table td { padding:6px 10px; vertical-align:middle; } /* Tier banner rows (Level 1 / Level 2A / Level 2B) */ #panel-regulatory .hqla-tier-banner td { background:var(--bg); color:var(--text-strong); font-weight:700; text-transform:uppercase; letter-spacing:0.6px; font-size:11.5px; padding:6px 10px; border-top:2px solid var(--border); } #panel-regulatory .hqla-tier-l1 td { background:rgba(6,182,212,0.10); } #panel-regulatory .hqla-tier-l2a td { background:rgba(51,65,85,0.12); } #panel-regulatory .hqla-tier-l2b td { background:rgba(245,158,11,0.12); } /* Empty (held = 0) rows render in muted grey so the user can see what the bank *doesn't* hold without it competing visually with held assets. */ #panel-regulatory .hqla-empty-row td { color:var(--text-muted); } #panel-regulatory .hqla-empty-row td:first-child, #panel-regulatory .hqla-empty-row td:nth-child(2) { color:var(--text-muted); } /* Drillable cells */ #panel-regulatory .hqla-table td.drill { cursor:pointer; font-weight:600; color:var(--text-strong); } #panel-regulatory .hqla-table td.drill:hover { background:rgba(6,182,212,0.10); color:var(--accent); } /* Footer subtotal rows */ #panel-regulatory .hqla-table tfoot td { padding:6px 10px; font-size:12.5px; } #panel-regulatory .hqla-foot-row td { background:#fff; border-top:1px solid var(--border); } #panel-regulatory .hqla-foot-label { text-align:right; font-weight:600; color:var(--text-strong); } #panel-regulatory .hqla-stock-row td { background:var(--bg); border-top:2.5px solid var(--text-strong); font-size:14px; color:var(--text-strong); } /* Notes block under the table */ #panel-regulatory .hqla-notes { margin-top:14px; font-size:12.5px; color:var(--text); line-height:1.55; } #panel-regulatory .hqla-notes p { margin:6px 0; } /* ===================== CREDIT RISK (R5) ===================== */ #panel-credit table { width:100%; font-size:12.5px; } #panel-credit table th, #panel-credit table td { padding:6px 10px; } #panel-credit tr.drill { cursor:pointer; } #panel-credit tr.drill:hover td { background:rgba(6,182,212,0.10); } #panel-credit tr.credit-over td { background:rgba(185,28,28,0.07); } #panel-credit tr.credit-over:hover td { background:rgba(185,28,28,0.13); } #panel-credit .credit-flag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.4px; color:#fff; background:var(--rag-red); border-radius:3px; padding:1px 5px; margin-left:4px; } /* ===================== MONEY MARKETS · Cash ===================== */ #panel-money_markets tr.mm-cash-neg td { background:rgba(185,28,28,0.07); } #panel-money_markets td.mm-cash-negcell { color:var(--rag-red); font-weight:600; } #panel-money_markets .mm-cash-flag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.4px; color:#fff; background:var(--rag-red); border-radius:3px; padding:1px 5px; } #panel-money_markets .mm-cash-flag.mm-cash-flag-long { background:#15803D; } #panel-money_markets .mm-cash-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } #panel-money_markets .mm-cash-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#475569; cursor:pointer; user-select:none; } #panel-money_markets .mm-fp-bar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; padding:0 0 12px; margin-bottom:4px; border-bottom:1px solid rgba(51,65,85,0.12); } #panel-money_markets .mm-fp-f { display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:600; color:var(--text-muted); } #panel-money_markets .mm-fp-f select { font-size:12px; padding:3px 6px; border:1px solid rgba(51,65,85,0.25); border-radius:4px; background:#fff; color:var(--text-strong); min-width:120px; } #panel-money_markets .mm-fp-chk { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#475569; cursor:pointer; user-select:none; } /* Funding-Projection Products picker uses the shared .ctl.products-multi. The mm-fp-multi modifier lets the trigger blend with the surrounding mm-fp-bar typography (matches mm-fp-f label sizing). */ #panel-money_markets .ctl.products-multi.mm-fp-multi { display:flex; align-items:center; gap:6px; } #panel-money_markets .ctl.products-multi.mm-fp-multi > label { font-size:12px; font-weight:600; color:#475569; } #panel-money_markets tr.mm-seg-head td { background:rgba(14,124,90,0.08); font-weight:700; color:#0E7C5A; text-transform:uppercase; letter-spacing:0.4px; font-size:11px; } #panel-money_markets tr.mm-seg-sub td { border-top:2px solid rgba(51,65,85,0.25); background:rgba(51,65,85,0.04); } /* ===================== ENTRY / SPLASH PAGE (app-level chrome) ===================== */ /* Visible by default (static markup) so it paints before main.js runs. Slides left on enter. Mirrors the .ai-panel transform/transition idiom. */ body.entry-noscroll { overflow: hidden; } .entry-splash { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: #0A1628; color: #fff; transform: translateX(0); transition: transform 0.5s ease; will-change: transform; } .entry-splash[hidden] { display: none; } .entry-splash--exiting { transform: translateX(-100%); } .entry-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 32px; text-align: center; } /* TraiQ mono-white wordmark (SVG, 8:3). Width-driven, responsive. Sized +50% vs the original (440 -> 660). */ #entry-logo { display: block; width: min(660px, 88vw); height: auto; user-select: none; -webkit-user-drag: none; } .entry-tagline { font-size: 16px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.75); } .entry-disclaimer { position: absolute; right: 20px; bottom: 16px; max-width: 60vw; text-align: right; font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,0.45); } /* Whole splash is the click target — show the affordance everywhere. */ .entry-splash { cursor: pointer; } .entry-splash:focus { outline: none; } .entry-splash:focus-visible { outline: 2px solid #fff; outline-offset: -6px; } /* "Click to enter" prompt — plain white text, no border/pill. */ .entry-prompt { margin-top: 34px; font-size: 15px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; animation: entry-pulse 2.2s ease-in-out infinite; } @keyframes entry-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .entry-splash { transition: opacity 0.2s ease; } .entry-splash--exiting { transform: none; opacity: 0; } .entry-prompt { animation: none; opacity: 0.9; } } /* ---- Developer Mode — dev-only element-name overlay ---- Toggled by the header checkbox via js/core/devmode.js (body.dev-mode). Pure CSS: each [data-ename] element gets a name badge from its attribute. Registry: documentation/dev-element-names.md. */ .devmode-toggle { display:block; margin-top:4px; font-size:11px; opacity:.8; cursor:pointer; user-select:none; white-space:nowrap; } .devmode-toggle input { vertical-align:middle; margin:0 4px 0 0; cursor:pointer; } .update-tag { display:block; margin-top:3px; font-size:11px; font-weight:700; opacity:.9; white-space:nowrap; letter-spacing:.3px; } body.dev-mode [data-ename] { position: relative; /* positioning context for the badge */ outline: 1px dashed rgba(103,232,249,.55); outline-offset: -1px; } body.dev-mode [data-ename]::after { content: attr(data-ename); position: absolute; top: 0; left: 0; transform: translateY(-100%); z-index: 900; pointer-events: none; white-space: nowrap; font: 700 10px/1.4 "Consolas","Monaco",monospace; letter-spacing:.3px; padding: 1px 6px; border-radius: 4px 4px 0 0; background: rgba(17,24,39,.92); color: #67E8F9; } /* Preserve anchors that already establish their own positioning context — the blanket position:relative above must NOT override these (it would break sticky pinning / fixed placement). The ::after still anchors to them correctly because sticky/fixed are positioned contexts. */ body.dev-mode #liq-filters, body.dev-mode #fx-ladder-filters { position: sticky; } body.dev-mode #ai-fab, body.dev-mode #ai-panel, body.dev-mode #drillModal_A { position: fixed; } /* Generic dev-mode visibility gate. Mark any element with class "dev-only" and it's hidden in production; visible only when the header's Dev-mode toggle is on. */ .dev-only { display: none !important; } body.dev-mode .dev-only { display: revert !important; } /* ---- Dev-mode password prompt (auto-accepts on match) ---- */ .devmode-pwd-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(10,22,40,.55); backdrop-filter: blur(2px); } .devmode-pwd-box { background: var(--surface, rgb(250,250,250)); color: var(--text, #10233A); border: 1px solid var(--border, #D5CCBE); border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.30); padding: 18px 22px; min-width: 280px; font: 13px/1.4 "Inter","Segoe UI",sans-serif; } .devmode-pwd-label { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted,#5B6470); margin-bottom: 8px; } .devmode-pwd-input { width: 100%; box-sizing: border-box; padding: 8px 10px; font: 15px "Consolas","Monaco",monospace; border: 1px solid var(--border,#D5CCBE); border-radius: 5px; background: #fff; color: var(--text-strong,#10233A); outline: none; } .devmode-pwd-input:focus { border-color: var(--accent,#06B6D4); } .devmode-pwd-hint { margin-top: 8px; font-size: 10px; opacity: .65; color: var(--text-muted,#5B6470); } /* ---- PPTX token badge — dev-mode-only. Mirrors the eName overlay but lives at TOP-RIGHT (eName is top-left) so the two badges sit on opposite corners and never collide. Sits ABOVE the element (translateY -100%) — same as eName — so it doesn't bleed into the next card below. This is rendered as a REAL child of each [data-ptoken] element (injected by js/core/ptoken-overlay.js so it can be clicked — pseudo-elements aren't clickable). The badge has a capture-phase click handler that copies `{{token}}` to the clipboard and flashes green, without triggering the parent element's own click (drill-downs, filters, etc. are preserved). */ body.dev-mode [data-ptoken] { position: relative; outline: 1px dashed rgba(251,146,60,.55); outline-offset: -1px; } .ptoken-badge { display: none; } /* hidden outside dev mode */ body.dev-mode .ptoken-badge { display: inline-block; position: absolute; top: 0; right: 0; transform: translateY(-100%); z-index: 900; white-space: nowrap; font: 700 10px/1.4 "Consolas","Monaco",monospace; letter-spacing:.3px; padding: 1px 6px; border-radius: 4px 4px 0 0; background: rgba(124,45,18,.92); color: #FED7AA; cursor: pointer; user-select: none; } body.dev-mode .ptoken-badge:hover { background: rgba(124,45,18,1); color: #FFEDD5; } body.dev-mode .ptoken-badge.ptoken-badge-copied { background: rgba(34,197,94,.95) !important; color: #fff !important; } body.dev-mode [data-ptoken].ptoken-copied { outline: 2px solid rgba(34,197,94,.85); outline-offset: -2px; } /* "Show on page" navigation highlight — when a row in the reference panel is clicked with the ↗ button, the matching dashboard element gets a solid 4px border for 1 second so it's easy to find after the scroll. The base [data-ptoken] rule carries an outline transition, so removing the class fades the outline back to the dashed default. */ body.dev-mode [data-ptoken] { transition: outline 0.3s ease-out; } body.dev-mode [data-ptoken].ptoken-flash-nav { outline: 4px solid #FB923C !important; outline-offset: 3px !important; } /* ---- PPTX tokens reference panel (floating, bottom-right corner) ---- */ .ptoken-panel { position: fixed; right: 12px; bottom: 12px; width: 380px; height: 70vh; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: rgba(17,24,39,.96); color: #E2E8F0; border: 1px solid rgba(251,146,60,.4); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font: 12px/1.4 "Inter","Segoe UI",sans-serif; z-index: 950; overflow: hidden; } .ptoken-panel.ptoken-panel-closed { width: auto; max-width: 200px; height: auto; max-height: 40px; } .ptoken-panel.ptoken-panel-closed .ptoken-search, .ptoken-panel.ptoken-panel-closed .ptoken-scroll { display: none; } .ptoken-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid rgba(251,146,60,.25); background: rgba(124,45,18,.45); } .ptoken-head strong { color: #FDBA74; font-size: 13px; } .ptoken-hint { font-size: 10px; opacity: .65; flex: 1; } .ptoken-min { background: transparent; color: #FDBA74; border: 1px solid rgba(251,146,60,.4); width: 22px; height: 22px; border-radius: 4px; cursor: pointer; font: 700 14px/1 "Consolas",monospace; padding: 0; } .ptoken-min:hover { background: rgba(251,146,60,.15); } .ptoken-search { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.06); } .ptoken-search input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.35); color: #E2E8F0; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 5px 8px; font: 12px "Inter","Segoe UI",sans-serif; } .ptoken-search input:focus { outline: 1px solid #FDBA74; } .ptoken-scroll { overflow-y: auto; padding: 4px 8px 12px; } .ptoken-group { margin-top: 10px; } .ptoken-group-head { margin: 0 0 4px; padding: 4px 6px; font: 700 10px/1 "Inter","Segoe UI",sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #FDBA74; background: rgba(251,146,60,.08); border-radius: 3px; } .ptoken-count { font-weight: 400; opacity: .7; font-size: 9px; margin-left: 4px; } .ptoken-row { position: relative; padding: 5px 6px; padding-right: 30px; /* room for the ↗ button */ border-radius: 3px; cursor: pointer; border: 1px solid transparent; } .ptoken-row-main { display: block; } .ptoken-row:hover { background: rgba(251,146,60,.10); border-color: rgba(251,146,60,.25); } .ptoken-row:focus { outline: 1px solid #FDBA74; } .ptoken-row.ptoken-copied { background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.55); } .ptoken-row.ptoken-copied::after { content: "Copied"; position: absolute; top: 5px; right: 30px; font: 700 10px/1 "Inter","Segoe UI",sans-serif; color: #86EFAC; padding: 2px 6px; background: rgba(34,197,94,.15); border-radius: 3px; } /* Virtual rows = tokens not yet on any dashboard element (e.g. all narrative tokens, plus any chart/table token whose data-ptoken hasn't been added yet). Italic + no ↗ button so the user can tell at a glance. */ .ptoken-row-virtual .ptoken-label { font-style: italic; opacity: .55; } .ptoken-goto { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; background: rgba(251,146,60,.18); color: #FDBA74; border: 1px solid rgba(251,146,60,.4); border-radius: 4px; font: 700 14px/1 "Consolas",monospace; cursor: pointer; } .ptoken-goto:hover { background: rgba(251,146,60,.35); color: #FED7AA; } .ptoken-code { display: block; font: 600 11px/1.4 "Consolas","Monaco",monospace; color: #FDBA74; word-break: break-all; } .ptoken-label { display: block; opacity: .75; margin-top: 1px; } .ptoken-prompt { margin-top: 4px; padding: 4px 6px; background: rgba(0,0,0,.25); border-left: 2px solid rgba(251,146,60,.4); border-radius: 0 3px 3px 0; font-size: 11px; opacity: .85; font-style: italic; } /* ---- Filter-variables block (per-row, under the token label) ---- Rendered only when the token def declares a `filters: [...]` array. Each row is `?key=` followed by inline value chips (allowed values). Tokens with no filters render no block at all — matches the rule "if an element has no filters, then there should be no variables". */ .ptoken-filters { margin-top: 5px; padding: 4px 6px; background: rgba(0,0,0,.18); border-left: 2px solid rgba(96,165,250,.4); border-radius: 0 3px 3px 0; } /* Presentation blocks (every non-data block) are tinted per-group so the author can quickly tell which knobs apply to their chart sub-type (cartesian vs circular etc.). */ .ptoken-filters-pres { border-left-color: rgba(167,139,250,.45); margin-top: 4px; } .ptoken-filters-pres .ptoken-fkey { color: #C4B5FD; } .ptoken-filters-pres .ptoken-fval { background: rgba(167,139,250,.16); color: #DDD6FE; border-color: rgba(167,139,250,.28); } /* Per-group tints — class hook is `.ptoken-grp-`. Universal stays purple; the others shift the hue so the eye groups related params together at a glance. */ .ptoken-grp-axis-y { border-left-color: rgba(56,189,248,.50); } .ptoken-grp-axis-y .ptoken-fkey { color: #93C5FD; } .ptoken-grp-axis-y .ptoken-fval { background: rgba(56,189,248,.14); color: #BAE6FD; border-color: rgba(56,189,248,.25); } .ptoken-grp-axis-x { border-left-color: rgba(34,197,94,.50); } .ptoken-grp-axis-x .ptoken-fkey { color: #86EFAC; } .ptoken-grp-axis-x .ptoken-fval { background: rgba(34,197,94,.14); color: #BBF7D0; border-color: rgba(34,197,94,.25); } .ptoken-grp-cartesian { border-left-color: rgba(20,184,166,.50); } .ptoken-grp-cartesian .ptoken-fkey { color: #99F6E4; } .ptoken-grp-cartesian .ptoken-fval { background: rgba(20,184,166,.14); color: #CCFBF1; border-color: rgba(20,184,166,.25); } .ptoken-grp-bar { border-left-color: rgba(251,146,60,.50); } .ptoken-grp-bar .ptoken-fkey { color: #FDBA74; } .ptoken-grp-bar .ptoken-fval { background: rgba(251,146,60,.14); color: #FED7AA; border-color: rgba(251,146,60,.25); } .ptoken-grp-circular { border-left-color: rgba(244,114,182,.50); } .ptoken-grp-circular .ptoken-fkey { color: #F9A8D4; } .ptoken-grp-circular .ptoken-fval { background: rgba(244,114,182,.14); color: #FBCFE8; border-color: rgba(244,114,182,.25); } .ptoken-grp-layout { border-left-color: rgba(148,163,184,.50); } .ptoken-grp-layout .ptoken-fkey { color: #CBD5E1; } .ptoken-grp-layout .ptoken-fval { background: rgba(148,163,184,.14); color: #E2E8F0; border-color: rgba(148,163,184,.25); } .ptoken-grp-data-labels { border-left-color: rgba(234,179,8,.50); } .ptoken-grp-data-labels .ptoken-fkey { color: #FDE68A; } .ptoken-grp-data-labels .ptoken-fval { background: rgba(234,179,8,.14); color: #FEF3C7; border-color: rgba(234,179,8,.25); } .ptoken-grp-kpi { border-left-color: rgba(244,63,94,.50); } .ptoken-grp-kpi .ptoken-fkey { color: #FDA4AF; } .ptoken-grp-kpi .ptoken-fval { background: rgba(244,63,94,.14); color: #FECDD3; border-color: rgba(244,63,94,.25); } /* ---- Token Generator modal (js/core/token-wizard.js) ---- Dev-only popup that builds {{token?key=value&...}} strings visually. Pops over everything; ESC / backdrop / × all close. */ .tw-overlay { position: fixed; inset: 0; background: rgba(10,15,25,.55); z-index: 1100; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .tw-modal { width: min(1374px, 97vw); height: min(640px, 92vh); min-width: min(1374px, 97vw); max-width: 99vw; box-sizing: border-box; position: relative; display: flex; flex-direction: column; background: var(--bg, #F5F2EC); color: var(--text-strong, #10233A); border: 1px solid var(--border, rgba(16,35,58,.18)); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.4); font: 13px/1.45 "Inter","Segoe UI",sans-serif; overflow: hidden; } /* Right-edge grab handle — drags the modal WIDER (height fixed). All extra width flows to column 3 (live preview); columns 1 + 2 keep their fixed widths. The starting size is the minimum. */ .tw-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 9px; z-index: 6; cursor: ew-resize; display: flex; align-items: center; justify-content: center; background: rgba(16,35,58,.05); border-left: 1px solid var(--border, rgba(16,35,58,.14)); } .tw-resize::after { content: ""; width: 3px; height: 30px; border-radius: 2px; background: rgba(16,35,58,.30); } .tw-resize:hover, .tw-resize.tw-resizing { background: rgba(6,182,212,.25); } .tw-resize:hover::after, .tw-resize.tw-resizing::after { background: #06B6D4; } .tw-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; flex: 0 0 auto; background: #10233A; color: #FBFAF6; border-bottom: 1px solid rgba(255,255,255,.08); } .tw-head strong { font-size: 14px; letter-spacing: 0.2px; } .tw-close { background: transparent; color: #FBFAF6; border: 0; cursor: pointer; font: 700 18px/1 "Consolas",monospace; padding: 2px 8px; border-radius: 4px; } .tw-close:hover { background: rgba(255,255,255,.12); } /* ---- three-column body: token selector · parameters · live preview ---- */ .tw-body { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } .tw-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; } /* Columns 1 + 2 are fixed-width; column 3 (live preview) is flexible and absorbs ALL the extra width when the modal is dragged wider. */ .tw-col-1 { flex: 0 0 420px; padding: 12px; gap: 9px; border-right: 1px solid var(--border, rgba(16,35,58,.18)); } .tw-col-2 { flex: 0 0 380px; padding: 12px; gap: 10px; overflow-y: auto; border-right: 1px solid var(--border, rgba(16,35,58,.18)); } .tw-col-3 { flex: 1 1 auto; min-width: 0; padding: 12px 22px 12px 14px; gap: 9px; } .tw-col-head { flex: 0 0 auto; font: 700 11px/1.2 "Inter","Segoe UI",sans-serif; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-strong, #10233A); padding-bottom: 6px; border-bottom: 2px solid #06B6D4; } .tw-search { flex: 0 0 auto; padding: 7px 10px; border-radius: 5px; border: 1px solid var(--border, rgba(16,35,58,.22)); background: #FFFFFF; color: var(--text-strong, #10233A); font: 13px/1.3 "Inter","Segoe UI",sans-serif; } /* ---- picker tree: kind > panel > token ---- */ .tw-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1px solid var(--border, rgba(16,35,58,.18)); border-radius: 5px; background: #FFFFFF; } .tw-tree-grp { border-bottom: 1px solid rgba(16,35,58,.06); } .tw-tree-row { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; text-align: left; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 4px 9px; font: inherit; } .tw-tree-row:hover { background: rgba(6,182,212,.09); } .tw-tree-kind { font: 700 12px/1.3 "Inter","Segoe UI",sans-serif; background: rgba(16,35,58,.045); } .tw-tree-panel { padding-left: 26px; font: 600 11.5px/1.3 "Inter","Segoe UI",sans-serif; color: var(--text-muted, #5B6470); } .tw-tree-token { padding-left: 44px; } .tw-tree-token.is-selected { background: rgba(6,182,212,.16); box-shadow: inset 3px 0 0 #06B6D4; } .tw-caret { flex: 0 0 13px; text-align: center; font: 700 13px/1 "Consolas",monospace; color: var(--text-muted, #5B6470); } .tw-tree-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-tree-count { flex: 0 0 auto; margin-left: auto; font: 10px/1.4 "Inter","Segoe UI",sans-serif; color: var(--text-muted, #5B6470); background: rgba(16,35,58,.08); border-radius: 8px; padding: 0 7px; } .tw-tok-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-strong, #10233A); } .tw-tree-empty { padding: 16px; text-align: center; font-style: italic; font-size: 12px; color: var(--text-muted, #5B6470); } /* ---- right column: selected element + fields ---- */ .tw-field { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; } .tw-label { font: 600 11px/1.2 "Inter","Segoe UI",sans-serif; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted, #5B6470); } .tw-label-opt { font-weight: 400; text-transform: none; letter-spacing: 0; } .tw-selected { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 5px; border: 1px solid var(--border, rgba(16,35,58,.18)); background: rgba(16,35,58,.03); } .tw-selected-empty { font-size: 12px; font-style: italic; color: var(--text-muted, #5B6470); } .tw-selected-name { font: 700 13px/1.3 "Consolas","Monaco",monospace; color: var(--text-strong, #10233A); } .tw-selected-meta { font-size: 11.5px; color: var(--text-muted, #5B6470); } .tw-selected-prompt { font: italic 11px/1.4 "Inter","Segoe UI",sans-serif; color: var(--text-muted, #5B6470); margin-top: 2px; } /* ---- parameters — sectioned label+control rows, mirrors the layout of js/core/cv-element-picker.js column 2 (.cv-ep-row family). Same visual language so the two authoring surfaces feel consistent. ---- */ .tw-params { display: flex; flex-direction: column; gap: 7px; max-height: 360px; overflow-y: auto; } .tw-params .tw-cv-sub, .tw-params .tw-cv-grp { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted, #5B6470); margin-top: 4px; } .tw-params .tw-cv-grp { margin-top: 9px; } .tw-params .tw-cv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tw-params .tw-cv-row > span { font-size: 12px; color: var(--text-muted, #5B6470); } .tw-params .tw-cv-row select, .tw-params .tw-cv-row input[type="text"] { flex: 1; max-width: 200px; padding: 4px 6px; font-size: 12px; border: 1px solid var(--border, rgba(16,35,58,.22)); border-radius: 5px; background: #FFFFFF; } .tw-params .tw-cv-row input[type="number"] { width: 84px; padding: 4px 6px; font-size: 12px; border: 1px solid var(--border, rgba(16,35,58,.22)); border-radius: 5px; } .tw-params .tw-cv-pres { border: 1px solid var(--border, rgba(16,35,58,.18)); border-radius: 6px; margin-top: 4px; } .tw-params .tw-cv-pres > summary { cursor: pointer; padding: 7px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-strong, #10233A); list-style: none; } .tw-params .tw-cv-pres > summary::-webkit-details-marker { display: none; } .tw-params .tw-cv-pres > summary::before { content: "\25B8\00a0\00a0"; color: var(--text-muted, #5B6470); } .tw-params .tw-cv-pres[open] > summary::before { content: "\25BE\00a0\00a0"; } .tw-params .tw-cv-pres[open] > summary { border-bottom: 1px solid var(--border, rgba(16,35,58,.18)); } .tw-params .tw-cv-pres > .tw-cv-grp, .tw-params .tw-cv-pres > .tw-cv-row { margin: 6px 10px; } /* Legacy per-row controls — kept for older custom-narrative editor layouts that may still reference them. The active param surface above is .tw-cv-*. */ .tw-params .tw-param-card { display: flex; flex-direction: column; gap: 3px; } .tw-param-card { display: flex; flex-direction: column; gap: 3px; } .tw-param-row { display: flex; gap: 6px; align-items: center; } .tw-param-key { flex: 1 1 52%; min-width: 0; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--border, rgba(16,35,58,.22)); background: #FFFFFF; color: var(--text-strong, #10233A); font: 12px/1.3 "Consolas","Monaco",monospace; } .tw-param-value-wrap { flex: 1 1 40%; min-width: 0; display: flex; } .tw-param-value { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--border, rgba(16,35,58,.22)); background: #FFFFFF; color: var(--text-strong, #10233A); font: 12px/1.3 "Consolas","Monaco",monospace; } .tw-param-value:disabled { background: rgba(16,35,58,.05); color: var(--text-muted, #5B6470); } .tw-param-remove { width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid rgba(180,83,9,.35); background: rgba(180,83,9,.08); color: #B45309; border-radius: 4px; cursor: pointer; font: 700 16px/1 "Consolas",monospace; } .tw-param-remove:hover { background: rgba(180,83,9,.18); } .tw-param-hintline { font: italic 10.5px/1.35 "Inter","Segoe UI",sans-serif; color: var(--text-muted, #5B6470); padding-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-no-params { font-size: 12px; color: var(--text-muted, #5B6470); font-style: italic; padding: 2px 0; } .tw-add-param { align-self: flex-start; padding: 5px 10px; border-radius: 4px; border: 1px dashed rgba(16,35,58,.30); background: transparent; color: var(--text-strong, #10233A); cursor: pointer; font: 600 12px/1.3 "Inter","Segoe UI",sans-serif; } .tw-add-param:hover:not(:disabled) { background: rgba(16,35,58,.05); } .tw-add-param:disabled { opacity: 0.4; cursor: not-allowed; } .tw-output { padding: 8px 10px; border-radius: 4px; border: 1px solid rgba(34,197,94,.45); background: #F0FDF4; color: #052E16; font: 13px/1.3 "Consolas","Monaco",monospace; cursor: pointer; user-select: all; width: 100%; box-sizing: border-box; } .tw-output:hover { background: #DCFCE7; } .tw-output.tw-copied { background: #BBF7D0; } /* ---- "+ New custom narrative" + the custom-narrative editor ---- */ .tw-new-narrative { flex: 0 0 auto; padding: 6px 10px; border-radius: 5px; border: 1px dashed rgba(6,182,212,.55); background: rgba(6,182,212,.07); color: var(--text-strong, #10233A); cursor: pointer; font: 600 12px/1.3 "Inter","Segoe UI",sans-serif; } .tw-new-narrative:hover { background: rgba(6,182,212,.16); } .tw-editor { display: flex; flex-direction: column; gap: 6px; } .tw-editor[hidden] { display: none; } .tw-col2-normal { display: flex; flex-direction: column; gap: 12px; min-height: 0; } .tw-col2-normal[hidden] { display: none; } .tw-editor-title { font: 700 13px/1.3 "Inter","Segoe UI",sans-serif; color: var(--text-strong, #10233A); } .tw-editor-hint { font: 11.5px/1.45 "Inter","Segoe UI",sans-serif; color: var(--text-muted, #5B6470); margin-bottom: 2px; } .tw-ed-input, .tw-ed-textarea { padding: 7px 9px; border-radius: 4px; box-sizing: border-box; width: 100%; border: 1px solid var(--border, rgba(16,35,58,.22)); background: #FFFFFF; color: var(--text-strong, #10233A); font: 12.5px/1.4 "Inter","Segoe UI",sans-serif; } .tw-ed-textarea { resize: vertical; min-height: 78px; } .tw-ed-words { width: 90px; } .tw-editor-err { font-size: 11.5px; color: #B45309; font-weight: 600; } .tw-editor-actions { display: flex; gap: 7px; margin-top: 4px; } .tw-ed-save { padding: 6px 14px; border-radius: 4px; border: 0; cursor: pointer; background: #10233A; color: #FBFAF6; font: 600 12px/1.3 "Inter","Segoe UI",sans-serif; } .tw-ed-save:hover { background: #1c3a5c; } .tw-ed-cancel { padding: 6px 12px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border, rgba(16,35,58,.30)); background: transparent; color: var(--text-strong, #10233A); font: 600 12px/1.3 "Inter","Segoe UI",sans-serif; } .tw-ed-cancel:hover { background: rgba(16,35,58,.05); } .tw-ed-delete { margin-left: auto; padding: 6px 12px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(180,83,9,.40); background: rgba(180,83,9,.08); color: #B45309; font: 600 12px/1.3 "Inter","Segoe UI",sans-serif; } .tw-ed-delete:hover { background: rgba(180,83,9,.18); } .tw-selected-actions { display: flex; gap: 7px; margin-top: 5px; } .tw-sel-edit, .tw-sel-delete { padding: 3px 9px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border, rgba(16,35,58,.25)); background: #FFFFFF; color: var(--text-strong, #10233A); font: 600 11px/1.3 "Inter","Segoe UI",sans-serif; } .tw-sel-edit:hover { background: rgba(6,182,212,.12); } .tw-sel-delete { color: #B45309; border-color: rgba(180,83,9,.30); } .tw-sel-delete:hover { background: rgba(180,83,9,.12); } /* ---- live element preview pane ---- */ .tw-preview { border: 1px solid var(--border, rgba(16,35,58,.18)); background: rgba(16,35,58,.03); border-radius: 5px; padding: 12px; min-height: 76px; max-height: 320px; overflow: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: center; } /* In the preview column the preview fills the whole column height. */ .tw-col-3 .tw-preview { flex: 1 1 auto; min-height: 140px; max-height: none; } .tw-preview-empty, .tw-preview-loading { font-size: 12px; color: var(--text-muted, #5B6470); font-style: italic; text-align: center; } .tw-preview-error { font-size: 12px; color: #B45309; font-weight: 600; text-align: center; word-break: break-word; } .tw-prev-kpi { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 4px 2px; } .tw-prev-kpi-lbl { font: 600 12px/1.2 "Aptos","Inter","Segoe UI",sans-serif; color: #5B6470; } .tw-prev-kpi-val { font: 700 32px/1.15 "Aptos","Inter","Segoe UI",sans-serif; color: #10233A; } .tw-prev-kpi-sub { font: 400 11px/1.25 "Aptos","Inter","Segoe UI",sans-serif; color: #5B6470; } .tw-prev-meta { font: 600 13px/1.4 "Aptos","Inter","Segoe UI",sans-serif; color: #10233A; text-align: center; } .tw-prev-narr { display: flex; flex-direction: column; gap: 4px; } .tw-prev-narr-tag { font: 600 9.5px/1.3 "Inter","Segoe UI",sans-serif; text-transform: uppercase; letter-spacing: 0.5px; color: #06B6D4; } .tw-prev-narr-body { font: italic 12px/1.5 "Inter","Segoe UI",sans-serif; color: var(--text-muted, #5B6470); } .tw-prev-narr-words { font: 600 10px/1.3 "Inter","Segoe UI",sans-serif; text-transform: uppercase; letter-spacing: 0.4px; color: #06B6D4; margin-top: 2px; } .tw-prev-chart { max-width: 100%; max-height: 100%; width: auto; height: auto; align-self: center; border: 1px solid var(--border, rgba(16,35,58,.14)); border-radius: 3px; background: #fff; } .tw-prev-tbl-wrap { width: 100%; overflow: auto; } .tw-prev-tbl { border-collapse: collapse; width: 100%; font: 10.5px/1.35 "Inter","Segoe UI",sans-serif; } .tw-prev-tbl th { background: #10233A; color: #FBFAF6; font-weight: 600; text-align: left; padding: 4px 7px; white-space: nowrap; } .tw-prev-tbl td { border: 1px solid var(--border, rgba(16,35,58,.14)); padding: 3px 7px; color: #10233A; white-space: nowrap; } .tw-prev-tbl tbody tr:nth-child(even) { background: rgba(16,35,58,.03); } .tw-prev-tbl-more { font-size: 10.5px; color: var(--text-muted, #5B6470); font-style: italic; margin-top: 4px; text-align: center; } /* Dark-mode override — modal stays light on dark dashboards because it's a designer/dev tool; high-contrast text is what matters. */ body.dev-mode .tw-modal { background: #FFFFFF; color: #10233A; } /* ====================================================================== Custom Views — element picker / configurator (3-column add/edit modal). Layout mirrors the Token Generator; global (body-appended) overlay. */ .cv-ep-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(10,15,25,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; } .cv-ep-modal { /* Starting size = the minimum; the right-edge handle widens it (all extra width flows to column 3, the live preview). */ width: min(1200px, 97vw); height: min(640px, 92vh); min-width: min(1200px, 97vw); max-width: 99vw; box-sizing: border-box; position: relative; display: flex; flex-direction: column; background: var(--bg, #F5F2EC); color: var(--text-strong, #10233A); border: 1px solid var(--border, rgba(16,35,58,.18)); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.4); font: 13px/1.45 "Inter","Segoe UI",sans-serif; overflow: hidden; } /* Right-edge grab handle — drags the modal wider. Columns 1 + 2 keep their fixed widths, so every extra pixel flows to column 3. */ .cv-ep-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 9px; z-index: 6; cursor: ew-resize; display: flex; align-items: center; justify-content: center; background: rgba(16,35,58,.05); border-left: 1px solid var(--border, rgba(16,35,58,.14)); } .cv-ep-resize::after { content: ""; width: 3px; height: 30px; border-radius: 2px; background: rgba(16,35,58,.30); } .cv-ep-resize:hover, .cv-ep-resize.cv-ep-resizing { background: rgba(6,182,212,.25); } .cv-ep-resize:hover::after, .cv-ep-resize.cv-ep-resizing::after { background: #06B6D4; } .cv-ep-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; flex: 0 0 auto; background: #10233A; color: #FBFAF6; } .cv-ep-head strong { font-size: 14px; letter-spacing: .2px; } .cv-ep-close { background: transparent; color: #FBFAF6; border: 0; cursor: pointer; font: 700 18px/1 "Consolas",monospace; padding: 2px 8px; border-radius: 4px; } .cv-ep-close:hover { background: rgba(255,255,255,.12); } .cv-ep-body { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } .cv-ep-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .cv-ep-col-1 { flex: 0 0 360px; padding: 12px; gap: 9px; border-right: 1px solid var(--border, rgba(16,35,58,.18)); } .cv-ep-col-2 { flex: 0 0 340px; padding: 12px; gap: 8px; overflow-y: auto; border-right: 1px solid var(--border, rgba(16,35,58,.18)); } .cv-ep-col-3 { flex: 1 1 auto; min-width: 0; padding: 12px 20px 12px 12px; gap: 9px; } .cv-ep-col-head { flex: 0 0 auto; font: 700 11px/1.2 "Inter","Segoe UI",sans-serif; text-transform: uppercase; letter-spacing: .6px; color: var(--text-strong, #10233A); padding-bottom: 6px; border-bottom: 2px solid #06B6D4; } .cv-ep-search { flex: 0 0 auto; padding: 7px 10px; border-radius: 5px; border: 1px solid var(--border, rgba(16,35,58,.22)); background: #FFFFFF; color: var(--text-strong, #10233A); font: 13px/1.3 "Inter","Segoe UI",sans-serif; } .cv-ep-lockmsg { flex: 0 0 auto; font-size: 11px; color: var(--text-muted, #5B6470); font-style: italic; } /* picker tree: kind > panel > element */ .cv-ep-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1px solid var(--border, rgba(16,35,58,.18)); border-radius: 5px; background: #FFFFFF; } .cv-ep-tree-locked { opacity: .6; pointer-events: none; } .cv-ep-tree-grp { border-bottom: 1px solid rgba(16,35,58,.06); } .cv-ep-tree-row { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 6px 10px; font: 12px/1.3 "Inter","Segoe UI",sans-serif; color: var(--text-strong, #10233A); } .cv-ep-tree-row:hover { background: rgba(6,182,212,.09); } .cv-ep-tree-kind { font-weight: 700; } .cv-ep-tree-panel { padding-left: 26px; font-weight: 600; } .cv-ep-tok { padding-left: 44px; } .cv-ep-tok.is-selected { background: rgba(6,182,212,.16); font-weight: 600; } .cv-ep-caret { flex: 0 0 auto; width: 13px; text-align: center; font: 700 12px/1 "Consolas",monospace; color: var(--text-muted, #5B6470); } .cv-ep-tree-name { flex: 1 1 auto; min-width: 0; } .cv-ep-tree-count { flex: 0 0 auto; font-size: 10.5px; color: var(--text-muted, #5B6470); background: rgba(16,35,58,.07); border-radius: 9px; padding: 1px 7px; } .cv-ep-tok-label { flex: 1 1 auto; min-width: 0; } .cv-ep-tree-empty, .cv-ep-hint, .cv-ep-prev-empty { padding: 14px; font-size: 12px; font-style: italic; color: var(--text-muted, #5B6470); text-align: center; } /* column 2 — parameter controls */ .cv-ep-params { display: flex; flex-direction: column; gap: 7px; } .cv-ep-sub, .cv-ep-grp { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted, #5B6470); margin-top: 4px; } .cv-ep-grp { margin-top: 9px; } .cv-ep-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cv-ep-row > span { font-size: 12px; color: var(--text-muted, #5B6470); } .cv-ep-row select, .cv-ep-row input[type="text"] { flex: 1; max-width: 200px; padding: 4px 6px; font-size: 12px; border: 1px solid var(--border, rgba(16,35,58,.22)); border-radius: 5px; background: #FFFFFF; } .cv-ep-row input[type="number"] { width: 84px; padding: 4px 6px; font-size: 12px; border: 1px solid var(--border, rgba(16,35,58,.22)); border-radius: 5px; } .cv-ep-pres { border: 1px solid var(--border, rgba(16,35,58,.18)); border-radius: 6px; margin-top: 4px; } .cv-ep-pres > summary { cursor: pointer; padding: 7px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-strong, #10233A); list-style: none; } .cv-ep-pres > summary::-webkit-details-marker { display: none; } .cv-ep-pres > summary::before { content: "\25B8\00a0\00a0"; color: var(--text-muted, #5B6470); } .cv-ep-pres[open] > summary::before { content: "\25BE\00a0\00a0"; } .cv-ep-pres[open] > summary { border-bottom: 1px solid var(--border, rgba(16,35,58,.18)); } .cv-ep-pres > .cv-ep-grp, .cv-ep-pres > .cv-ep-row { margin: 6px 10px; } /* column 3 — live preview */ .cv-ep-preview { flex: 1 1 auto; min-height: 0; position: relative; border: 1px solid var(--border, rgba(16,35,58,.18)); border-radius: 6px; background: #FFFFFF; } .cv-ep-prev-host { position: absolute; inset: 0; overflow: auto; padding: 8px; } .cv-ep-prev-err { padding: 14px; font-size: 12px; font-weight: 600; color: #B45309; } .cv-ep-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; flex: 0 0 auto; border-top: 1px solid var(--border, rgba(16,35,58,.18)); } .ptoken-filter-head { font: 600 9.5px/1.3 "Inter","Segoe UI",sans-serif; text-transform: uppercase; letter-spacing: 0.5px; color: #94A3B8; margin-bottom: 2px; } .ptoken-filter-row { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 2px 0; font-size: 10.5px; } .ptoken-fkey { color: #93C5FD; font: 600 10.5px/1.3 "Consolas","Monaco",monospace; } .ptoken-fvals { display: inline-flex; flex-wrap: wrap; gap: 3px; } .ptoken-fval { padding: 1px 5px; border-radius: 3px; background: rgba(96,165,250,.16); color: #BFDBFE; border: 1px solid rgba(96,165,250,.25); font: 500 10px/1.4 "Consolas","Monaco",monospace; } #panel-derivatives .deriv-grid, #panel-fx_book .deriv-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; } #panel-derivatives .chart-host, #panel-fx_book .chart-host { position:relative; height:300px; } /* eFxSet.1 — settlement pipeline chart. Capped at 450px (was 600px; 14-day stacked bars still fit cleanly at this height). */ #panel-fx_book #fxbook-sub-settlement .chart-host { height:450px; } #panel-derivatives .deriv-note { font-size:11.5px; color:var(--text-muted); margin:2px 0 10px; } #panel-derivatives table, #panel-fx_book table { font-size:12.5px; } #panel-derivatives th, #panel-derivatives td, #panel-fx_book th, #panel-fx_book td { padding:6px 8px; } #panel-derivatives tbody tr.drill, #panel-fx_book tbody tr.drill { cursor:pointer; } #panel-derivatives tbody tr.drill:hover, #panel-fx_book tbody tr.drill:hover { background:var(--bg); } @media (max-width: 1100px) { #panel-derivatives .deriv-grid, #panel-fx_book .deriv-grid { grid-template-columns: 1fr; } }