/* bot_theme base — page chrome, cards, tables, tabs, inputs, all via var(--bot-*) from bot_tokens.css. Selectors are prefixed with [data-theme] (set on by the no-flash script before first paint) so they OUTRANK bootstrap.min.css regardless of stylesheet order; the --bs-* variable remap below flips most Bootstrap components to the theme for free. */ /* ---- Bootstrap 5 variable remap ---- */ [data-theme] { --bs-body-bg: var(--bot-surface-page-bg); --bs-body-color: var(--bot-text-primary); --bs-card-bg: var(--bot-surface-card-bg); --bs-card-color: var(--bot-text-primary); --bs-card-border-color: var(--bot-border-card); --bs-border-color: var(--bot-border-default); --bs-border-color-translucent: var(--bot-border-table); --bs-secondary-color: var(--bot-text-muted); --bs-secondary-bg: var(--bot-surface-table-row-alt); --bs-tertiary-bg: var(--bot-surface-hover-bg); --bs-emphasis-color: var(--bot-text-primary); --bs-heading-color: var(--bot-brand-navy); --bs-link-color: var(--bot-text-link); --bs-primary: var(--bot-brand-navy); } [data-theme] body { background: var(--bot-surface-page-bg); color: var(--bot-text-primary); font-family: var(--bot-font-family); } [data-theme] h1, [data-theme] h2, [data-theme] h4, [data-theme] h5 { font-family: var(--bot-font-family-head); font-weight: 600; letter-spacing: -.01em; color: var(--bot-brand-navy); } [data-theme] h3, [data-theme] h4.bot-section { font-family: var(--bot-font-family-head); color: var(--bot-brand-navy); border-left: 4px solid var(--bot-brand-gold); padding-left: .55rem; } [data-theme] a { color: var(--bot-text-link); } /* ---- cards ---- */ [data-theme] .card, [data-theme] .bot-card { border: 1px solid var(--bot-border-card); border-radius: var(--bot-radius-card); box-shadow: var(--bot-shadow-card); background: var(--bot-surface-card-bg); border-top: 3px solid var(--bot-brand-gold); color: var(--bot-text-primary); } [data-theme] .card .card-header, [data-theme] .bot-card-header { background: transparent; border-bottom: 1px solid var(--bot-border-table); display: flex; align-items: center; gap: 8px; padding: .55rem .9rem; } [data-theme] .bot-card-title { font-family: var(--bot-font-family-head); color: var(--bot-brand-navy); font-size: var(--bot-font-size-lg); font-weight: 600; margin: 0; flex: 1 1 auto; } [data-theme] .bot-card-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; } /* ---- KPI cards (both KpiCard and the rbas _fmt_kpi_card idiom) ---- */ [data-theme] .bot-kpi-label, [data-theme] .card .card-body > .text-secondary { text-transform: uppercase; letter-spacing: .06em; font-size: var(--bot-font-size-xs); color: var(--bot-text-muted) !important; } [data-theme] .bot-kpi-value, [data-theme] .card .card-body h3 { color: var(--bot-brand-navy); font-family: var(--bot-font-family); border-left: none; padding-left: 0; font-weight: 700; line-height: 1.15; } [data-theme] .bot-kpi-value { font-size: var(--bot-font-size-xl); } [data-theme] .bot-kpi-unit { font-size: var(--bot-font-size-sm); color: var(--bot-text-muted); margin-left: 3px; } /* ---- tables ---- */ [data-theme] .table { color: var(--bot-text-primary); --bs-table-bg: var(--bot-surface-card-bg); --bs-table-color: var(--bot-text-primary); --bs-table-striped-bg: var(--bot-surface-table-row-alt); --bs-table-striped-color: var(--bot-text-primary); --bs-table-hover-bg: var(--bot-surface-hover-bg); --bs-table-hover-color: var(--bot-text-primary); border-color: var(--bot-border-table); } [data-theme] .table thead th { background: var(--bot-surface-table-header-bg); color: var(--bot-text-on-navy); border-color: var(--bot-border-table); } [data-theme] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th { background: var(--bot-surface-table-header-bg) !important; color: var(--bot-text-on-navy) !important; } [data-theme] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td { background: var(--bot-surface-card-bg) !important; color: var(--bot-text-primary) !important; border-color: var(--bot-border-table) !important; } /* ---- dash core tabs (folder style) ---- */ [data-theme] .tab-parent .tab, [data-theme] #tabs .tab { border: 1px solid var(--bot-border-default) !important; background: var(--bot-surface-table-row-alt) !important; color: var(--bot-text-muted) !important; font-weight: 600 !important; border-radius: 6px 6px 0 0 !important; margin: 0 4px -1px 0 !important; padding: 8px 14px !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; font-size: .85rem !important; line-height: 1.2 !important; flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; } [data-theme] .tab-parent .tab:hover, [data-theme] #tabs .tab:hover { color: var(--bot-brand-navy) !important; background: var(--bot-surface-card-bg) !important; } [data-theme] .tab-parent .tab--selected, [data-theme] #tabs .tab--selected { color: var(--bot-brand-navy) !important; background: var(--bot-surface-card-bg) !important; border-top: 3px solid var(--bot-brand-gold) !important; border-bottom-color: var(--bot-surface-card-bg) !important; } [data-theme] .tab-parent .tab-container, [data-theme] #tabs .tab-container { flex-wrap: wrap !important; border-bottom: 1px solid var(--bot-border-default) !important; } /* ---- inputs / dropdowns (dcc + dbc) ---- */ [data-theme] .form-control, [data-theme] .form-select, [data-theme] .Select-control, [data-theme] .Select-menu-outer, [data-theme] .dash-dropdown .Select-control, [data-theme] input:not([type="checkbox"]):not([type="radio"]), [data-theme] textarea, [data-theme] select { background-color: var(--bot-surface-input-bg); color: var(--bot-text-primary); border-color: var(--bot-border-default); } [data-theme] .Select-value-label, [data-theme] .Select-placeholder { color: var(--bot-text-primary) !important; } [data-theme] .form-control:focus, [data-theme] .form-select:focus { border-color: var(--bot-border-focus); } [data-theme] .VirtualizedSelectOption { background: var(--bot-surface-card-bg); color: var(--bot-text-primary); } [data-theme] .VirtualizedSelectFocusedOption { background: var(--bot-surface-hover-bg); } [data-theme] .input-group-text { background: var(--bot-surface-table-row-alt); color: var(--bot-text-muted); border-color: var(--bot-border-default); } [data-theme] .modal-content { background: var(--bot-surface-card-bg); color: var(--bot-text-primary); } [data-theme] .dropdown-menu { background: var(--bot-surface-card-bg); color: var(--bot-text-primary); border-color: var(--bot-border-default); } [data-theme] .dropdown-item { color: var(--bot-text-primary); } [data-theme] .dropdown-item:hover { background: var(--bot-surface-hover-bg); color: var(--bot-text-primary); } /* ---- buttons ---- */ [data-theme] .btn-primary { background: var(--bot-brand-navy); border-color: var(--bot-brand-navy); color: var(--bot-text-on-navy); } [data-theme] .btn-primary:hover { background: var(--bot-brand-navy-light); border-color: var(--bot-brand-navy-light); } [data-theme] .bot-btn-gold { background: var(--bot-brand-gold); border-color: var(--bot-brand-gold); color: var(--bot-text-on-gold); } /* ---- page header ---- */ [data-theme] .bot-header { background: linear-gradient(160deg, var(--bot-surface-header-bg) 0%, var(--bot-brand-navy-dark) 100%); border-bottom: 3px solid var(--bot-brand-gold); padding: .7rem 1.4rem; margin-bottom: 1.25rem; border-radius: 0 0 6px 6px; display: flex; align-items: center; gap: 16px; } [data-theme] .bot-header .bot-co-name { color: var(--bot-text-on-navy); font-family: var(--bot-font-family-head); font-weight: 600; font-size: clamp(19px, 3.6vw, 27px); line-height: 1.1; } [data-theme] .bot-header .bot-tagline { color: var(--bot-brand-gold-light); font-style: italic; font-size: clamp(11px, 2vw, 14px); } /* generic header text that apps set with inline black — give them a class to migrate to instead of a hex */ [data-theme] .bot-header-text { color: var(--bot-text-primary) !important; } [data-theme] .bot-header-muted { color: var(--bot-text-muted) !important; } /* ---- ChartCard expand overlay ---- */ .bot-fullscreen { position: fixed !important; inset: 0 !important; z-index: 1900; border-radius: 0 !important; margin: 0 !important; overflow: auto; background: var(--bot-surface-card-bg); } .bot-fullscreen .js-plotly-plot, .bot-fullscreen .dash-graph { height: calc(100vh - 70px) !important; } /* ---- theme switcher ---- */ .bot-theme-switcher { display: inline-flex; gap: 2px; margin-left: auto; } .bot-theme-switcher .bot-icon-btn[data-active="1"] { color: var(--bot-brand-gold); }