/* Hero BI dark theme — "Command deck", RESIDUAL layer for Superset 6.1. * * Since the 6.1 upgrade the dark chrome comes from THEME_DEFAULT's AntD-v5 * tokens in superset_config.py (algorithm:"dark" + the full Command-deck * surface palette). This file covers ONLY what tokens cannot reach: * - FAB Bootstrap-3 admin pages + select2 (server-rendered, not AntD) * - ACE editor (ships a light theme), nvd3/d3 SVG text, DataTables, pivot * - brand gradients (reserved for CTAs/accents — tokens are flat colors) * - the classic branded login card (rendered only when * SUPERSET_CLASSIC_LOGIN=1 flips register_superset_auth_view off) * Pruned 2026-08-10 from the 4.1.2-era 970-line file: the ~240 AntD-v4 * chrome clauses are now redundant under the token algorithm (6 were dead — * v5 removed .ant-popover-inner-content / arrow-content nodes). History of * the dropped rules: git log of this file; finding ids (P0-x/P1-x/P2-x) refer * to docs/bi-review-20260801/design-review-live.md. * * Served at /static/assets/hero/hero_dark.css via tail_js_custom_extra.html — * BUMP THE ?v= CACHE-BUSTER there (and in login_oauth.html) on every change. * * Palette: page #0b0b0d · chrome #0e0e11 · card #141418 · hover #1d1d22 * inner #0f0f13 · border #1e1e23 / #26262c · fg #FAFAFA / #C9C9CF / #8A8A93 * brand #7A05C6 #D80073 #A30DFF #C98BFF */ @font-face { font-family: "Montserrat"; src: url("/static/assets/hero/fonts/montserrat-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* --------------------------------------------------- brand logo cap (P0) * The 6.1 SPA sizes the navbar logo from the brandLogoHeight token (fixed in * superset_config.py). This is belt-and-braces so the 1210x349 wordmark can * NEVER render at native size again (the regression that blew up the top nav * on every SPA page). alt="Hero Seguros" comes from the brandLogoAlt token; * the FAB navbar logo is separately capped by APP_ICON_WIDTH and unaffected. */ img[alt="Hero Seguros"] { height: 28px !important; width: auto !important; max-width: 150px !important; } /* ---------------------------------------- native filter date-picker (P0) * The native filter TIME-RANGE calendar is click-dead (found 2026-08-10 via * live headless): when the antd date/time picker opens INSIDE the filter * popover, antd v5 leaves pointer-events:none on the .ant-picker-dropdown * container (a nested-popup motion state), so every day/time cell swallows * clicks — users report "I cannot select a date". Restore interactivity on * the OPEN dropdown only (leave the closing/-hidden state alone so a fading * calendar doesn't eat a stray click). Confirmed: after this, clicking a day * updates the range. Applies to the picker everywhere it renders. */ .ant-picker-dropdown:not(.ant-picker-dropdown-hidden), .ant-picker-dropdown:not(.ant-picker-dropdown-hidden) * { pointer-events: auto !important; } /* ---------------------------------------------------------------- base * Mostly for the FAB pages (no AntD theme there); on the SPA these agree * with the tokens, so they are harmless belt-and-braces. Emoji families in * the stack: markdown emoji rendered as tofu without them (P3-26). */ body { background: #0b0b0d !important; color: #fafafa; font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; } h1, h2, h3, h4, h5, h6 { color: #fafafa; font-weight: 600; } /* Global link tint (FAB pages have no token engine). The two rules further * down (chart titles, list names) deliberately re-override to #fafafa. */ a { color: #c98bff !important; } a:hover { color: #a30dff !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0b0b0d; } ::-webkit-scrollbar-thumb { background: #26262c; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #33333a; } /* -------------------------------------------------- brand accents (SPA) * Gradients are the one brand element flat tokens can't express — the * magenta→purple gradient is reserved for CTAs (docs/BRAND.md). Selector * list covers every primary-button spelling Superset uses (P0-1: its own * Button carries superset-button-primary but NOT ant-btn-primary). */ .ant-btn.superset-button-primary, .superset-button.superset-button-primary:not(.superset-button-link), .ant-btn-primary { background-image: linear-gradient(135deg, #d80073 0%, #7a05c6 80%) !important; background-color: #7a05c6 !important; /* fallback so it never goes flat-card */ border: none !important; border-radius: 9px !important; color: #fff !important; box-shadow: 0 8px 22px -8px rgba(122, 5, 198, 0.75); font-weight: 600; } .ant-btn-primary:hover { filter: brightness(1.05); } .ant-btn-primary:active { transform: scale(0.97); } /* sentence case, not shouting (P2-20) */ .superset-button, .ant-btn { text-transform: none !important; letter-spacing: 0 !important; } /* active-tab underline carries the brand gradient */ .ant-tabs-ink-bar { background: linear-gradient(90deg, #d80073, #7a05c6) !important; height: 2px !important; } /* -------------------------------------------- chart plugin DOM (not AntD) * Big-number, table charts, pivot: these plugins render their own DOM with * plugin CSS, outside the token engine. */ .superset-legacy-chart-big-number .header-line, .header-line, [data-test="chart-container"] .header-line { color: #fafafa !important; font-weight: 700 !important; letter-spacing: -0.02em; } /* pinned type scale (P2-24) + ellipsis instead of mid-digit clipping (P0-8; * the durable fix is D3_FORMAT in superset_config.py) */ .superset-legacy-chart-big-number .header-line, .header-line { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; padding-right: 8px !important; font-size: clamp(26px, 3.2vw, 34px) !important; } .superset-legacy-chart-big-number .subheader-line, .subheader-line { color: #8a8a93 !important; font-size: 12px !important; font-weight: 500 !important; } /* dashboard chart tiles keep the bordered-card identity (12px radius) */ .dashboard-component-chart-holder, .dashboard-component.dashboard-component-chart-holder { background: #141418 !important; border: 1px solid #26262c !important; border-radius: 12px !important; } /* chart titles are — they must read as titles, not links (see global a) */ .dashboard-component-chart-holder .header-title a, .dashboard-component-chart-holder .header-title span { color: #fafafa !important; font-size: 14.5px; font-weight: 600; } /* list-view entity names likewise (P1-14) */ .ant-table-tbody > tr > td a, .table > tbody > tr > td a:first-child, [class*="TableView"] tbody tr td:nth-child(2) a { color: #fafafa !important; font-weight: 600 !important; } [class*="TableView"] tbody tr td a:hover { color: #c98bff !important; } /* DOM table charts */ [data-test="chart-container"] table, .table-chart-container table { color: #c9c9cf !important; background: transparent !important; } [data-test="chart-container"] table td { border-color: #1e1e23 !important; } /* .echarts-tooltip bg/text now come from the AntD tokens (Echart.tsx baseTheme: * backgroundColor=colorBgContainer, textStyle=colorText) and its hairline border * from echartsOptionsOverrides.tooltip in superset_config.py — so the ECharts * tooltip is themed natively. Only the legacy `.chart-tooltip` (non-ECharts * engines) still needs the DOM rule. */ .chart-tooltip { background: #141418 !important; color: #fafafa !important; border-color: #26262c !important; } /* one head treatment across every table style — ant, FAB, chart, pivot * (P2-25: three coexisting head styles read as three products) */ .ant-table-thead > tr > th, .table > thead > tr > th, .table-chart-container thead th, .pvtTable th { background: #0f0f13 !important; color: #8a8a93 !important; font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-bottom: 1px solid #1e1e23 !important; } /* pivot tables (pivot_table_v2) — NOT scoped under the chart container: on * dashboards .pvtTable renders OUTSIDE it (verified headless 2026-07-26). * The plugin's emotion CSS paints brand purple/near-black cells otherwise. */ .pvtTable { background: transparent !important; color: #c9c9cf !important; } .pvtTable th { background: #0f0f13 !important; color: #8a8a93 !important; border-color: #1e1e23 !important; } .pvtTable th.pvtRowLabel, .pvtTable th.pvtColLabel { color: #c9c9cf !important; } .pvtTable td { border-color: #1e1e23 !important; color: #e8e8ee !important; } .pvtTable td.pvtTotal, .pvtTable td.pvtGrandTotal, .pvtTable th.pvtTotalLabel { color: #fafafa !important; font-weight: 600 !important; } .pvtTable th *, .pvtTable td * { color: inherit !important; background: transparent !important; } .pvtTable .hoverable:hover { background: #1d1d22 !important; } .pvtTable, .superset-pivot-table, [class*="pivot"] > div { overflow-x: auto !important; } /* legacy (nvd3/d3) charts — SVG text nodes, invisible to the token engine * (P0-3; verified selectors: plain g.tick, .slice_container > svg) */ .slice_container svg text, .dashboard-component-chart-holder .chart-container svg text { fill: #c9c9cf !important; color: #c9c9cf !important; } .slice_container svg g.tick text { fill: #8a8a93 !important; } .slice_container svg g.tick line, .slice_container svg line, .slice_container svg path.domain { stroke: #1e1e23 !important; stroke-opacity: 1 !important; } .slice_container svg .domain { stroke: #26262c !important; } /* legacy table-chart toolbars + native