/* Full-viewport dark background */
html, body {
    background-color: #151515 !important;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Override Bootstrap SLATE theme font stack */
body, .container, .container-fluid, .card, .card-body, .card-header,
.modal, .modal-body, .modal-header, label, input, textarea, select,
.form-control, .dropdown-menu, .nav-link, .badge, p, span, div {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* All buttons use JetBrains Mono */
.btn, button {
    font-family: 'JetBrains Mono', monospace !important;
}

/* JetBrains Mono for monospace elements */
code, pre, kbd, samp, .font-monospace,
.topbar-launcher, .topbar-logout, .topbar-text-btn {
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
}

/* ========== Simplified Topbar ========== */
.topbar-launcher {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.8px;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    background: transparent;
    color: #9498a5;
    transition: all 0.15s ease;
}

.topbar-launcher:hover {
    color: #d4a053;
    background: #1e222d;
}

.topbar-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #5d6170;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.topbar-icon-btn:hover {
    color: #9498a5;
    background: #1e222d;
}

.topbar-logout {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.8px;
    color: #9498a5;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    margin-left: 6px;
    transition: color 0.15s;
}

.topbar-logout:hover {
    color: #cf6b6b;
}

/* Panel section headers - JetBrains Mono */
.card-header, .card-header span, .card-header a {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.8px;
}

/* WFC cell card headers -- override the .card-header mono rule above.
   The cell card header carries plain-English descriptions ("Filter --
   Where market_cap >= 10e9") for traders, not section labels, so it
   reads in Inter like the rest of the app. Scoped with a higher-
   specificity selector so it wins against the !important above. */
.wfc-cell-card-header,
.wfc-cell-card-header span,
.wfc-cell-card-header a {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* Flat semi-transparent action buttons */
.btn-success, .btn-info, .btn-dark,
.btn-success:focus, .btn-info:focus, .btn-dark:focus {
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}
.btn-success {
    background-color: rgba(40, 167, 69, 0.25) !important;
    color: #5cab7d !important;
}
.btn-success:hover:not(:disabled) {
    background-color: rgba(40, 167, 69, 0.4) !important;
    color: #7dcea0 !important;
}
.btn-success:disabled {
    background-color: rgba(40, 167, 69, 0.1) !important;
    color: rgba(92, 171, 125, 0.4) !important;
}
.btn-info {
    background-color: rgba(23, 162, 184, 0.25) !important;
    color: #4fb8a6 !important;
}
.btn-info:hover:not(:disabled) {
    background-color: rgba(23, 162, 184, 0.4) !important;
    color: #7dd4c8 !important;
}
.btn-info:disabled {
    background-color: rgba(23, 162, 184, 0.1) !important;
    color: rgba(79, 184, 166, 0.4) !important;
}
.btn-dark {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #9498a5 !important;
}
.btn-dark:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #c8ccd4 !important;
}

/* Data tables - Segoe UI (original) */
.dash-table-container,
.dash-table-container * {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
}

/* History card hover */
.history-card:hover {
    background-color: rgba(255,255,255,0.04);
}
.history-card:hover span,
.history-card:hover strong {
    color: #9498a5 !important;
}

/* COPY buttons in card headers */
.card-header .btn-outline-secondary.btn-sm {
    font-size: 8px !important;
    padding: 1px 6px !important;
    line-height: 1 !important;
    height: 18px !important;
}

/* Progress/processing overlays - mono for labels, Inter for content */
.modal, .modal *, .modal-body, .modal-header, .modal-footer,
[id*="overlay"], [id*="overlay"] *{
    font-family: 'JetBrains Mono', monospace !important;
}
/* Content values in progress modals use Inter */
#progress-agent-text, #progress-tool-call,
#progress-stage, #progress-history {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
}

/* Deep Analysis switch label */
.deep-analysis-switch label,
.deep-analysis-switch .form-check-label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    color: #7a7e8a !important;
}

/* Provider toggle buttons - strip btn-link defaults */
#btn-claude, #btn-openai,
#btn-claude:hover, #btn-openai:hover,
#btn-claude:focus, #btn-openai:focus,
#btn-claude:active, #btn-openai:active {
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Floating text buttons (no border, hover bg) */
.topbar-text-btn,
.topbar-text-btn:focus,
.topbar-text-btn:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    color: #9498a5 !important;
}

.topbar-text-btn:hover:not(:disabled) {
    background: #1e222d !important;
    color: #e2e4e9 !important;
}

.topbar-text-btn:disabled {
    color: #3f4350 !important;
    background: transparent !important;
}

/* Hyperlink styling - subtle blue-grey instead of bright white/blue */
a {
    color: #7da3cc !important;  /* Subtle blue-grey */
    text-decoration: none !important;
}

a:hover {
    color: #a8c5e0 !important;  /* Lighter blue-grey on hover */
    text-decoration: underline !important;
}

a:visited {
    color: #6a8aae !important;  /* Slightly darker for visited links */
}

/* Compact dropdown styling - updated for newer Dash versions */
.compact-dropdown > div {
    min-height: 24px !important;
}

.compact-dropdown .css-1wa3eu0-placeholder,
.compact-dropdown .css-1uccc91-singleValue {
    font-size: 10px !important;
}

.compact-dropdown .css-yk16xz-control,
.compact-dropdown .css-1pahdxg-control {
    min-height: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
}

.compact-dropdown .css-26l3qy-menu {
    font-size: 10px !important;
}

.compact-dropdown div[class*="-control"] {
    min-height: 24px !important;
    height: 24px !important;
}

.compact-dropdown div[class*="-ValueContainer"] {
    height: 24px !important;
    padding: 0 6px !important;
}

.compact-dropdown div[class*="-placeholder"],
.compact-dropdown div[class*="-singleValue"] {
    font-size: 10px !important;
}

.compact-dropdown div[class*="-Input"] {
    font-size: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.compact-dropdown input {
    font-size: 10px !important;
}

/* Comments modal textarea - light text on dark bg */
#comments-modal textarea,
#comments-modal .form-control,
#comments-draft {
    background-color: #111111 !important;
    color: #e0e0e0 !important;
    border: 1px solid #333 !important;
}

/* Dark card background, borderless for clean look */
.card {
    background-color: #1a1a1a !important;
    border: none !important;
}

/* Global compact card styling for 1200px screens */
.card-header {
    padding: 0.15rem 0.4rem !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    font-size: 10px !important;
    min-height: unset !important;
    line-height: 1.2 !important;
    color: #b8bfc7 !important;  /* Brighter for panel titles */
    background-color: #2a2a2a !important;  /* Slightly lighter than card body #1a1a1a */
}

/* Override Bootstrap py-1 class on card headers */
.card-header.py-1 {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

.card-body {
    padding: 0.25rem 0.4rem !important;
    color: #e0e0e0 !important;  /* Brighter for body text legibility */
}

/* Brighter text throughout for small font legibility */
.card, .card * {
    color: #e0e0e0;
}

.card-header:not(.tab-header), .card-header span:not([style*="color"]) {
    color: #5d6170 !important;
}
#history-filter-toggle {
    color: #7da3cc !important;
}

/* Override for specific elements that need to stay bright */
.card-body label,
.card-body .form-label,
.card-body span:not(.text-muted):not([style*="color"]) {
    color: #e0e0e0 !important;
}

/* Muted text stays muted but more visible */
.text-muted {
    color: #9ca3af !important;
}

/* Compact button styling */
.btn-sm {
    padding: 0.2rem 0.4rem !important;
    font-size: 11px !important;
}

/* Tiny copy buttons in card headers */
#copy-exec-summary,
#copy-ai-insights,
#copy-data,
#copy-sql-debug {
    font-size: 8px !important;
    padding: 1px 4px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Reduce spacing in rows */
.mb-2 {
    margin-bottom: 0.35rem !important;
}

.mb-3 {
    margin-bottom: 0.5rem !important;
}

/* Compact form controls */
.form-control {
    padding: 0.25rem 0.5rem !important;
    font-size: 11px !important;
}

textarea.form-control {
    font-size: 11px !important;
}

/* Compact input groups */
.input-group-text {
    padding: 0.2rem 0.4rem !important;
    font-size: 10px !important;
}

/* Saved plot card hover effect */
.saved-plot-card:hover {
    background: #2d3350 !important;
    border-color: #4d5486 !important;
    transform: translateX(2px);
}

/* Saved query/report card hover effect.
   The hover effect is intentionally scoped to background-color only.
   The previous "white flash" was caused by the border transitioning from
   `transparent` (which browsers interpolate from currentColor, i.e. the
   light text color) to a target color. The inline border is now a
   concrete dark color and the transition is scoped to background-color,
   so no border animation runs on hover and no flash can occur. */
.saved-query-card,
.saved-report-card {
    outline: none !important;
}
.saved-query-card:hover,
.saved-report-card:hover {
    background-color: #242424 !important;
}
.saved-query-card:focus,
.saved-query-card:focus-visible,
.saved-query-card:active,
.saved-report-card:focus,
.saved-report-card:focus-visible,
.saved-report-card:active {
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================
   DROPDOWN FIX: Dark text for white backgrounds
   Dropdowns have white/light backgrounds, so text needs to be dark.
   .dash-dropdown wraps every dcc.Dropdown in all Dash versions.
   ============================================ */

/* Universal: dark text for ALL content inside any Dash dropdown */
.dash-dropdown div,
.dash-dropdown span,
.dash-dropdown input {
    color: #1a1a1a !important;
}

/* Legacy React-Select v1 (older Dash) */
.Select-value-label,
.Select-option,
.Select-placeholder {
    color: #1a1a1a !important;
}

/* React-Select v2+ attribute selectors (Dash 2.x/3.x) */
.dash-dropdown [class*="singleValue"],
.dash-dropdown [class*="multiValue"],
.dash-dropdown [class*="option"],
.dash-dropdown [class*="MenuList"] div {
    color: #1a1a1a !important;
}

/* Form control inputs (text inputs, textareas) with white backgrounds */
.form-control {
    color: #1a1a1a !important;
}

.form-control::placeholder {
    color: #6b7280 !important;  /* Medium gray for placeholders */
}

/* Input hints/help text below inputs - needs to be visible on dark card backgrounds */
.form-text,
small.form-text,
.input-hint {
    color: #9ca3af !important;  /* Medium gray, visible on dark backgrounds */
}

/* Bootstrap Select dropdowns - dark text on white background */
.form-select {
    color: #1f2937 !important;
    background-color: #fff !important;
}
.form-select option {
    color: #1f2937 !important;
    background-color: #fff !important;
}

/* Settings modal - compact font sizes to match app style (11px body) */
#settings-modal .form-select {
    font-size: 11px !important;
    padding: 0.2rem 0.4rem !important;
}
#settings-modal .form-label {
    font-size: 11px !important;
}
#settings-modal .form-control {
    font-size: 11px !important;
    padding: 0.2rem 0.4rem !important;
}
#settings-modal .form-check-label {
    font-size: 11px !important;
}
#settings-modal .card-header {
    font-size: 11px !important;
}

/* Dash DataTable - ensure text is dark on white table cells */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    color: #1a1a1a !important;
}

/* ============================================
   MULTI-SELECT TAGS - Cyan background with white text
   Target Dash dropdown wrapper by ID
   ============================================ */

/* Metrics dropdown multi-select tags - cyan background, white text */
#plot-metrics-dropdown .Select--multi .Select-value {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}

#plot-metrics-dropdown .Select--multi .Select-value-label {
    color: #ffffff !important;
}

#plot-metrics-dropdown .Select--multi .Select-value-icon {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !important;
}

#plot-metrics-dropdown .Select--multi .Select-value-icon:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* React-Select v2+ style multi-value tags */
#plot-metrics-dropdown [class*="css"][class*="multiValue"],
#plot-metrics-dropdown div[class*="multiValue"] {
    background-color: #0891b2 !important;
    background: #0891b2 !important;
}

#plot-metrics-dropdown [class*="css"][class*="multiValue"] div,
#plot-metrics-dropdown [class*="css"][class*="multiValue"] span,
#plot-metrics-dropdown div[class*="multiValue"] div,
#plot-metrics-dropdown div[class*="multiValue"] span {
    color: #ffffff !important;
}

/* Generic fallback for any multi-value in metrics dropdown */
div#plot-metrics-dropdown [class*="Value"]:not([class*="singleValue"]) {
    background-color: #0891b2 !important;
    color: #ffffff !important;
}

div#plot-metrics-dropdown [class*="Value"]:not([class*="singleValue"]) * {
    color: #ffffff !important;
}

/* ============================================
   INTRADAY METRICS DROPDOWN - Cyan tags matching time-series
   ============================================ */

/* Intraday metrics dropdown multi-select tags - cyan background, white text */
#intraday-metrics-dropdown .Select--multi .Select-value {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}

#intraday-metrics-dropdown .Select--multi .Select-value-label {
    color: #ffffff !important;
}

#intraday-metrics-dropdown .Select--multi .Select-value-icon {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !important;
}

#intraday-metrics-dropdown .Select--multi .Select-value-icon:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* React-Select v2+ style multi-value tags */
#intraday-metrics-dropdown [class*="css"][class*="multiValue"],
#intraday-metrics-dropdown div[class*="multiValue"] {
    background-color: #0891b2 !important;
    background: #0891b2 !important;
}

#intraday-metrics-dropdown [class*="css"][class*="multiValue"] div,
#intraday-metrics-dropdown [class*="css"][class*="multiValue"] span,
#intraday-metrics-dropdown div[class*="multiValue"] div,
#intraday-metrics-dropdown div[class*="multiValue"] span {
    color: #ffffff !important;
}

/* Generic fallback for any multi-value in intraday dropdown */
div#intraday-metrics-dropdown [class*="Value"]:not([class*="singleValue"]) {
    background-color: #0891b2 !important;
    color: #ffffff !important;
}

div#intraday-metrics-dropdown [class*="Value"]:not([class*="singleValue"]) * {
    color: #ffffff !important;
}

/* Intraday multi-value tags - limit width to truncate description */
#intraday-metrics-dropdown [class*="multiValue"] {
    max-width: 220px !important;
}

#intraday-metrics-dropdown [class*="multiValue"] [class*="Label"],
#intraday-metrics-dropdown .Select--multi .Select-value-label {
    max-width: 200px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ============================================
   SPECIFIC DROPDOWN OVERRIDES
   Force light background with dark text for plot dropdowns
   Using high specificity to override general rules
   ============================================ */

/* Chart type dropdown - force light background and dark text */
#plot-type-selector .Select-control,
#plot-type-selector div[class*="-control"],
#plot-type-selector > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#plot-type-selector .Select-value-label,
#plot-type-selector .Select-placeholder,
#plot-type-selector div[class*="-singleValue"],
#plot-type-selector div[class*="-placeholder"],
#plot-type-selector span[class*="-singleValue"],
#plot-type-selector span[class*="-placeholder"],
#plot-type-selector input,
#plot-type-selector * {
    color: #1a1a1a !important;  /* Dark text - forced */
}

/* Date range dropdown - force light background and dark text */
#plot-date-range .Select-control,
#plot-date-range div[class*="-control"],
#plot-date-range > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#plot-date-range .Select-value-label,
#plot-date-range .Select-placeholder,
#plot-date-range div[class*="-singleValue"],
#plot-date-range div[class*="-placeholder"],
#plot-date-range span[class*="-singleValue"],
#plot-date-range span[class*="-placeholder"],
#plot-date-range input,
#plot-date-range * {
    color: #1a1a1a !important;  /* Dark text - forced */
}

/* Query range dropdown - force light background and dark text */
#plot-query-range .Select-control,
#plot-query-range div[class*="-control"],
#plot-query-range > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#plot-query-range .Select-value-label,
#plot-query-range .Select-placeholder,
#plot-query-range div[class*="-singleValue"],
#plot-query-range div[class*="-placeholder"],
#plot-query-range span[class*="-singleValue"],
#plot-query-range span[class*="-placeholder"],
#plot-query-range input,
#plot-query-range * {
    color: #1a1a1a !important;  /* Dark text - forced */
}

/* Display range dropdown - force light background and dark text */
#plot-display-range .Select-control,
#plot-display-range div[class*="-control"],
#plot-display-range > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#plot-display-range .Select-value-label,
#plot-display-range .Select-placeholder,
#plot-display-range div[class*="-singleValue"],
#plot-display-range div[class*="-placeholder"],
#plot-display-range span[class*="-singleValue"],
#plot-display-range span[class*="-placeholder"],
#plot-display-range input,
#plot-display-range * {
    color: #1a1a1a !important;  /* Dark text - forced */
}

/* ============================================
   METRICS DROPDOWN - Description styling
   Show full "Metric | description" in menu
   Truncate in selected tags to show only metric name
   ============================================ */

/* Multi-value tags in metrics dropdown - limit width to truncate description */
#plot-metrics-dropdown [class*="multiValue"] {
    max-width: 220px !important;
}

#plot-metrics-dropdown [class*="multiValue"] [class*="Label"],
#plot-metrics-dropdown .Select--multi .Select-value-label {
    max-width: 200px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ============================================
   RADIO BUTTON STYLING - Cyan highlight for selected
   Target term-structure-analysis-type radio items
   ============================================ */

/* Style the radio button input when checked */
#term-structure-analysis-type .form-check-input:checked {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}

/* Style the label when radio is checked - solid cyan background */
#term-structure-analysis-type .form-check-input:checked + .form-check-label {
    color: #0891b2 !important;
    font-weight: 600 !important;
}

/* Unchecked labels - dimmer */
#term-structure-analysis-type .form-check-label {
    color: #9ca3af !important;
    transition: color 0.15s ease-in-out;
}

/* Hover effect on unchecked */
#term-structure-analysis-type .form-check-input:not(:checked) + .form-check-label:hover {
    color: #d1d5db !important;
}

/* Vol Curve X-Axis radio buttons */
#vol-curve-x-axis .form-check-input:checked {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}

#vol-curve-x-axis .form-check-input:checked + .form-check-label {
    color: #0891b2 !important;
    font-weight: 600 !important;
}

#vol-curve-x-axis .form-check-label {
    color: #9ca3af !important;
    transition: color 0.15s ease-in-out;
}

#vol-curve-x-axis .form-check-input:not(:checked) + .form-check-label:hover {
    color: #d1d5db !important;
}

/* Vol Curve Data Source radio buttons */
#vol-curve-data-source .form-check-input:checked {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}

#vol-curve-data-source .form-check-input:checked + .form-check-label {
    color: #0891b2 !important;
    font-weight: 600 !important;
}

#vol-curve-data-source .form-check-label {
    color: #9ca3af !important;
    transition: color 0.15s ease-in-out;
}

#vol-curve-data-source .form-check-input:not(:checked) + .form-check-label:hover {
    color: #d1d5db !important;
}

/* ============================================
   CALENDAR SPREAD DROPDOWNS - Dark text on light background
   ============================================ */

/* Front Delta dropdown */
#cal-spread-front-delta .Select-control,
#cal-spread-front-delta div[class*="-control"],
#cal-spread-front-delta > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#cal-spread-front-delta .Select-value-label,
#cal-spread-front-delta .Select-placeholder,
#cal-spread-front-delta div[class*="-singleValue"],
#cal-spread-front-delta div[class*="-placeholder"],
#cal-spread-front-delta span[class*="-singleValue"],
#cal-spread-front-delta span[class*="-placeholder"],
#cal-spread-front-delta input,
#cal-spread-front-delta * {
    color: #1a1a1a !important;
}

/* Back Delta dropdown */
#cal-spread-back-delta .Select-control,
#cal-spread-back-delta div[class*="-control"],
#cal-spread-back-delta > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#cal-spread-back-delta .Select-value-label,
#cal-spread-back-delta .Select-placeholder,
#cal-spread-back-delta div[class*="-singleValue"],
#cal-spread-back-delta div[class*="-placeholder"],
#cal-spread-back-delta span[class*="-singleValue"],
#cal-spread-back-delta span[class*="-placeholder"],
#cal-spread-back-delta input,
#cal-spread-back-delta * {
    color: #1a1a1a !important;
}

/* Front Tenor dropdown */
#cal-spread-front-tenor .Select-control,
#cal-spread-front-tenor div[class*="-control"],
#cal-spread-front-tenor > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#cal-spread-front-tenor .Select-value-label,
#cal-spread-front-tenor .Select-placeholder,
#cal-spread-front-tenor div[class*="-singleValue"],
#cal-spread-front-tenor div[class*="-placeholder"],
#cal-spread-front-tenor span[class*="-singleValue"],
#cal-spread-front-tenor span[class*="-placeholder"],
#cal-spread-front-tenor input,
#cal-spread-front-tenor * {
    color: #1a1a1a !important;
}

/* Back Tenors multi-select dropdown */
#cal-spread-back-tenors .Select-control,
#cal-spread-back-tenors div[class*="-control"],
#cal-spread-back-tenors > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#cal-spread-back-tenors .Select-value-label,
#cal-spread-back-tenors .Select-placeholder,
#cal-spread-back-tenors div[class*="-singleValue"],
#cal-spread-back-tenors div[class*="-placeholder"],
#cal-spread-back-tenors span[class*="-singleValue"],
#cal-spread-back-tenors span[class*="-placeholder"],
#cal-spread-back-tenors input,
#cal-spread-back-tenors * {
    color: #1a1a1a !important;
}

/* Back Tenors multi-select tags - cyan background, white text (matching metrics dropdown) */
#cal-spread-back-tenors .Select--multi .Select-value {
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6 !important;
}

#cal-spread-back-tenors .Select--multi .Select-value-label {
    color: #1a1a1a !important;
}

#cal-spread-back-tenors .Select--multi .Select-value-icon {
    color: #1a1a1a !important;
    border-color: rgba(0,0,0,0.15) !important;
}

#cal-spread-back-tenors .Select--multi .Select-value-icon:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* React-Select v2+ style multi-value tags for back tenors */
#cal-spread-back-tenors [class*="css"][class*="multiValue"],
#cal-spread-back-tenors div[class*="multiValue"] {
    background-color: #e6e6e6 !important;
    background: #e6e6e6 !important;
}

#cal-spread-back-tenors [class*="css"][class*="multiValue"] div,
#cal-spread-back-tenors [class*="css"][class*="multiValue"] span,
#cal-spread-back-tenors div[class*="multiValue"] div,
#cal-spread-back-tenors div[class*="multiValue"] span {
    color: #1a1a1a !important;
}

/* Front Delta multi-select tags - cyan background, white text */
#cal-spread-front-delta .Select--multi .Select-value {
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6 !important;
}

#cal-spread-front-delta .Select--multi .Select-value-label {
    color: #1a1a1a !important;
}

#cal-spread-front-delta .Select--multi .Select-value-icon {
    color: #1a1a1a !important;
    border-color: rgba(0,0,0,0.15) !important;
}

#cal-spread-front-delta .Select--multi .Select-value-icon:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

#cal-spread-front-delta [class*="css"][class*="multiValue"],
#cal-spread-front-delta div[class*="multiValue"] {
    background-color: #e6e6e6 !important;
    background: #e6e6e6 !important;
}

#cal-spread-front-delta [class*="css"][class*="multiValue"] div,
#cal-spread-front-delta [class*="css"][class*="multiValue"] span,
#cal-spread-front-delta div[class*="multiValue"] div,
#cal-spread-front-delta div[class*="multiValue"] span {
    color: #1a1a1a !important;
}

/* Back Delta multi-select tags - cyan background, white text */
#cal-spread-back-delta .Select--multi .Select-value {
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6 !important;
}

#cal-spread-back-delta .Select--multi .Select-value-label {
    color: #1a1a1a !important;
}

#cal-spread-back-delta .Select--multi .Select-value-icon {
    color: #1a1a1a !important;
    border-color: rgba(0,0,0,0.15) !important;
}

#cal-spread-back-delta .Select--multi .Select-value-icon:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

#cal-spread-back-delta [class*="css"][class*="multiValue"],
#cal-spread-back-delta div[class*="multiValue"] {
    background-color: #e6e6e6 !important;
    background: #e6e6e6 !important;
}

#cal-spread-back-delta [class*="css"][class*="multiValue"] div,
#cal-spread-back-delta [class*="css"][class*="multiValue"] span,
#cal-spread-back-delta div[class*="multiValue"] div,
#cal-spread-back-delta div[class*="multiValue"] span {
    color: #1a1a1a !important;
}

/* Front Tenor multi-select tags - cyan background, white text */
#cal-spread-front-tenor .Select--multi .Select-value {
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6 !important;
}

#cal-spread-front-tenor .Select--multi .Select-value-label {
    color: #1a1a1a !important;
}

#cal-spread-front-tenor .Select--multi .Select-value-icon {
    color: #1a1a1a !important;
    border-color: rgba(0,0,0,0.15) !important;
}

#cal-spread-front-tenor .Select--multi .Select-value-icon:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

#cal-spread-front-tenor [class*="css"][class*="multiValue"],
#cal-spread-front-tenor div[class*="multiValue"] {
    background-color: #e6e6e6 !important;
    background: #e6e6e6 !important;
}

#cal-spread-front-tenor [class*="css"][class*="multiValue"] div,
#cal-spread-front-tenor [class*="css"][class*="multiValue"] span,
#cal-spread-front-tenor div[class*="multiValue"] div,
#cal-spread-front-tenor div[class*="multiValue"] span {
    color: #1a1a1a !important;
}

/* IV Time Series Deltas multi-select tags - light grey, dark text */
#iv-ts-deltas .Select--multi .Select-value {
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6 !important;
}

#iv-ts-deltas .Select--multi .Select-value-label {
    color: #1a1a1a !important;
}

#iv-ts-deltas .Select--multi .Select-value-icon {
    color: #1a1a1a !important;
    border-color: rgba(0,0,0,0.15) !important;
}

#iv-ts-deltas .Select--multi .Select-value-icon:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

#iv-ts-deltas [class*="css"][class*="multiValue"],
#iv-ts-deltas div[class*="multiValue"] {
    background-color: #e6e6e6 !important;
    background: #e6e6e6 !important;
}

#iv-ts-deltas [class*="css"][class*="multiValue"] div,
#iv-ts-deltas [class*="css"][class*="multiValue"] span,
#iv-ts-deltas div[class*="multiValue"] div,
#iv-ts-deltas div[class*="multiValue"] span {
    color: #1a1a1a !important;
}

/* IV Time Series Tenors multi-select tags - light grey, dark text */
#iv-ts-tenors .Select--multi .Select-value {
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6 !important;
}

#iv-ts-tenors .Select--multi .Select-value-label {
    color: #1a1a1a !important;
}

#iv-ts-tenors .Select--multi .Select-value-icon {
    color: #1a1a1a !important;
    border-color: rgba(0,0,0,0.15) !important;
}

#iv-ts-tenors .Select--multi .Select-value-icon:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

#iv-ts-tenors [class*="css"][class*="multiValue"],
#iv-ts-tenors div[class*="multiValue"] {
    background-color: #e6e6e6 !important;
    background: #e6e6e6 !important;
}

#iv-ts-tenors [class*="css"][class*="multiValue"] div,
#iv-ts-tenors [class*="css"][class*="multiValue"] span,
#iv-ts-tenors div[class*="multiValue"] div,
#iv-ts-tenors div[class*="multiValue"] span {
    color: #1a1a1a !important;
}

/* ============================================
   COMPACT DATATABLE ROW HEIGHT
   For Query Data and Report Data panels
   ============================================ */

/* Query Data table - compact rows */
#data-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
}

#data-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr td {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 20px !important;
}

#data-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr td div {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 20px !important;
    overflow: hidden;
}

#data-table-container .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell div.dash-cell-value {
    height: 20px !important;
    line-height: 20px !important;
}

/* Lock filter row height to prevent reflow on tab switch (#7c) */
#data-table-container .dash-filter-row,
#data-table-container tr.dash-filter-row {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
}
#data-table-container .dash-filter-row input {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}
/* Prevent hidden tab content from causing reflow on reveal */
.data-result-tabs .tab-content > .tab-pane {
    display: block !important;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.data-result-tabs .tab-content > .tab-pane.active {
    visibility: visible;
    height: auto;
    overflow: visible;
}

/* Multi-tab data panel tabs (#7c) */
.data-result-tabs .nav-tabs {
    border-bottom: 1px solid #333;
    margin-bottom: 4px;
}
.data-result-tabs .nav-link {
    color: #9ca3af;
    font-size: 10px;
    padding: 3px 10px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.data-result-tabs .nav-link:hover {
    color: #e0e0e0;
    border-bottom-color: #555;
}
.data-result-tabs .nav-link.active {
    color: #e0e0e0;
    background: #1a1a1a;
    border-bottom-color: #17a2b8;
}
/* Multi-chart tabbed panel -- mirrors data-result-tabs styling */
.chart-result-tabs .tab-content > .tab-pane {
    display: block !important;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.chart-result-tabs .tab-content > .tab-pane.active {
    visibility: visible;
    height: auto;
    overflow: visible;
}
.chart-result-tabs .nav-tabs {
    border-bottom: 1px solid #333;
    margin-bottom: 2px;
}
.chart-result-tabs .nav-link {
    color: #9ca3af;
    font-size: 10px;
    padding: 3px 10px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.chart-result-tabs .nav-link:hover {
    color: #e0e0e0;
    border-bottom-color: #555;
}
.chart-result-tabs .nav-link.active {
    color: #e0e0e0;
    background: #1a1a1a;
    border-bottom-color: #17a2b8;
}

/* SQL panel sync: structured collapsible blocks per data tab (#7c) */
.sql-hop-block {
    transition: border-left-color 0.2s, background-color 0.2s;
}
.sql-hop-block summary {
    list-style: none;
}
.sql-hop-block summary::-webkit-details-marker {
    display: none;
}
.sql-hop-block summary::before {
    content: '+ ';
    color: #555;
    font-family: monospace;
}
details.sql-hop-block[open] summary::before {
    content: '- ';
}

/* Report Data table - compact rows */
#report-data-container .dash-spreadsheet-container .dash-spreadsheet-inner tr {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
}

#report-data-container .dash-spreadsheet-container .dash-spreadsheet-inner tr td {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 20px !important;
}

#report-data-container .dash-spreadsheet-container .dash-spreadsheet-inner tr td div {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 20px !important;
    overflow: hidden;
}

#report-data-container .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell div.dash-cell-value {
    height: 20px !important;
    line-height: 20px !important;
}

/* Metric dropdown */
#cal-spread-metric .Select-control,
#cal-spread-metric div[class*="-control"],
#cal-spread-metric > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#cal-spread-metric .Select-value-label,
#cal-spread-metric .Select-placeholder,
#cal-spread-metric div[class*="-singleValue"],
#cal-spread-metric div[class*="-placeholder"],
#cal-spread-metric span[class*="-singleValue"],
#cal-spread-metric span[class*="-placeholder"],
#cal-spread-metric input,
#cal-spread-metric * {
    color: #1a1a1a !important;
}

/* ============================================
   DATATABLE COLUMN HEADER TOOLTIPS
   Shows full column name on hover
   ============================================ */

/* Dash DataTable tooltip container */
.dash-table-tooltip,
.dash-tooltip,
div.dash-table-tooltip,
div.dash-tooltip {
    background-color: #000000 !important;
    border: 0 !important;
    border-style: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    color: #cccccc !important;
    max-width: unset !important;
    min-width: unset !important;
    width: fit-content !important;
    white-space: nowrap !important;
    z-index: 10000 !important;
    box-shadow: none !important;
    text-align: center !important;
}

.dash-table-tooltip *,
.dash-table-tooltip table,
.dash-table-tooltip td,
.dash-table-tooltip th,
.dash-table-tooltip tr,
.dash-tooltip * {
    border: 0 !important;
    border-style: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    background-color: #000000 !important;
}

/* Arrow styling for tooltip */
.dash-table-tooltip::before,
.dash-table-tooltip::after,
.dash-tooltip::before,
.dash-tooltip::after {
    display: none !important;
    border: 0 !important;
    content: none !important;
}

/* ============================================
   SYMBOLVW SUMMARY PANEL - Color overrides
   These IDs need to override the general .card-body span rule
   ============================================ */

/* Symbol name and sector - white for emphasis */
#summary-name,
#summary-sector {
    color: #ffffff !important;
}

/* Aqua accent values - bright and readable */
#summary-price,
#summary-volume,
#summary-mcap,
#summary-iv,
#summary-ivrank,
#summary-hv,
#summary-pc,
#summary-earnings,
#summary-ivhv,
#summary-regime,
#summary-earn-date,
#summary-imp-move,
#summary-straddle-be {
    color: #67e8f9 !important;
}

/* Price change - dynamic color via CSS classes (callback sets className) */
#summary-change.change-positive {
    color: #22c55e !important;
}
#summary-change.change-negative {
    color: #ef4444 !important;
}
#summary-change.change-neutral {
    color: #67e8f9 !important;
}

/* ============================================
   SYMBOLVW HEATMAP CONFIG DROPDOWNS
   Match PLOT mode styling - white background, dark text
   ============================================ */

/* Universe dropdown */
#heatmap-universe .Select-control,
#heatmap-universe div[class*="-control"],
#heatmap-universe > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#heatmap-universe .Select-value-label,
#heatmap-universe .Select-placeholder,
#heatmap-universe div[class*="-singleValue"],
#heatmap-universe div[class*="-placeholder"],
#heatmap-universe span[class*="-singleValue"],
#heatmap-universe span[class*="-placeholder"],
#heatmap-universe input,
#heatmap-universe * {
    color: #1a1a1a !important;
}

/* Universe multi-select tags - cyan background, white text */
#heatmap-universe .Select--multi .Select-value {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}

#heatmap-universe .Select--multi .Select-value-label {
    color: #ffffff !important;
}

#heatmap-universe .Select--multi .Select-value-icon {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !important;
}

#heatmap-universe [class*="multiValue"],
#heatmap-universe div[class*="multiValue"] {
    background-color: #0891b2 !important;
    background: #0891b2 !important;
}

#heatmap-universe [class*="multiValue"] div,
#heatmap-universe [class*="multiValue"] span,
#heatmap-universe div[class*="multiValue"] div,
#heatmap-universe div[class*="multiValue"] span {
    color: #ffffff !important;
}

/* Size metric dropdown */
#heatmap-size-metric .Select-control,
#heatmap-size-metric div[class*="-control"],
#heatmap-size-metric > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#heatmap-size-metric .Select-value-label,
#heatmap-size-metric .Select-placeholder,
#heatmap-size-metric div[class*="-singleValue"],
#heatmap-size-metric div[class*="-placeholder"],
#heatmap-size-metric span[class*="-singleValue"],
#heatmap-size-metric span[class*="-placeholder"],
#heatmap-size-metric input,
#heatmap-size-metric * {
    color: #1a1a1a !important;
}

/* Color metric dropdown */
#heatmap-color-metric .Select-control,
#heatmap-color-metric div[class*="-control"],
#heatmap-color-metric > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#heatmap-color-metric .Select-value-label,
#heatmap-color-metric .Select-placeholder,
#heatmap-color-metric div[class*="-singleValue"],
#heatmap-color-metric div[class*="-placeholder"],
#heatmap-color-metric span[class*="-singleValue"],
#heatmap-color-metric span[class*="-placeholder"],
#heatmap-color-metric input,
#heatmap-color-metric * {
    color: #1a1a1a !important;
}

/* Sector filter dropdown */
#heatmap-sector-filter .Select-control,
#heatmap-sector-filter div[class*="-control"],
#heatmap-sector-filter > div > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

#heatmap-sector-filter .Select-value-label,
#heatmap-sector-filter .Select-placeholder,
#heatmap-sector-filter div[class*="-singleValue"],
#heatmap-sector-filter div[class*="-placeholder"],
#heatmap-sector-filter span[class*="-singleValue"],
#heatmap-sector-filter span[class*="-placeholder"],
#heatmap-sector-filter input,
#heatmap-sector-filter * {
    color: #1a1a1a !important;
}

/* Sector filter multi-select tags - cyan background, white text */
#heatmap-sector-filter .Select--multi .Select-value {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}

#heatmap-sector-filter .Select--multi .Select-value-label {
    color: #ffffff !important;
}

#heatmap-sector-filter .Select--multi .Select-value-icon {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !important;
}

#heatmap-sector-filter [class*="multiValue"],
#heatmap-sector-filter div[class*="multiValue"] {
    background-color: #0891b2 !important;
    background: #0891b2 !important;
}

#heatmap-sector-filter [class*="multiValue"] div,
#heatmap-sector-filter [class*="multiValue"] span,
#heatmap-sector-filter div[class*="multiValue"] div,
#heatmap-sector-filter div[class*="multiValue"] span {
    color: #ffffff !important;
}

/* ============================================
   STRATEGY OPTIMIZER DROPDOWN
   Force dark text on light background
   ============================================ */

#select-strategy .Select-control,
#select-strategy div[class*="-control"],
#select-strategy > div > div {
    background-color: #f8f9fa !important;
    background: #f8f9fa !important;
}

#select-strategy .Select-value-label,
#select-strategy .Select-placeholder,
#select-strategy div[class*="-singleValue"],
#select-strategy div[class*="-placeholder"],
#select-strategy span[class*="-singleValue"],
#select-strategy span[class*="-placeholder"],
#select-strategy input,
#select-strategy * {
    color: #1a1a1a !important;
}

/* ============================================
   STRATEGY OPTIMIZER - RangeSlider Styling
   Compact sliders for advanced mode
   ============================================ */

/* All slider containers */
.delta-slider,
.moneyness-slider,
.dte-slider {
    padding: 5px 5px 18px 5px !important;
}

/* Track (background rail) */
.delta-slider .rc-slider-rail,
.moneyness-slider .rc-slider-rail,
.dte-slider .rc-slider-rail {
    background-color: #333 !important;
    height: 4px !important;
}

/* Selected range track */
.delta-slider .rc-slider-track,
.moneyness-slider .rc-slider-track,
.dte-slider .rc-slider-track {
    background-color: #17a2b8 !important;
    height: 4px !important;
}

/* Handle (thumb) */
.delta-slider .rc-slider-handle,
.moneyness-slider .rc-slider-handle,
.dte-slider .rc-slider-handle {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -5px !important;
    opacity: 1 !important;
}

.delta-slider .rc-slider-handle:hover,
.delta-slider .rc-slider-handle:focus,
.delta-slider .rc-slider-handle:active,
.moneyness-slider .rc-slider-handle:hover,
.moneyness-slider .rc-slider-handle:focus,
.moneyness-slider .rc-slider-handle:active,
.dte-slider .rc-slider-handle:hover,
.dte-slider .rc-slider-handle:focus,
.dte-slider .rc-slider-handle:active {
    border-color: #0891b2 !important;
    box-shadow: 0 0 5px rgba(23, 162, 184, 0.5) !important;
}

/* Hide the dot markers on sliders - only show text labels */
.delta-slider .rc-slider-dot,
.moneyness-slider .rc-slider-dot,
.dte-slider .rc-slider-dot {
    display: none !important;
}

/* Marks (text labels only) */
.delta-slider .rc-slider-mark-text,
.moneyness-slider .rc-slider-mark-text,
.dte-slider .rc-slider-mark-text {
    color: #6c757d !important;
    font-size: 9px !important;
}

/* Tooltip */
.delta-slider .rc-slider-tooltip-inner,
.moneyness-slider .rc-slider-tooltip-inner,
.dte-slider .rc-slider-tooltip-inner {
    background-color: #1a1a1a !important;
    border-radius: 2px !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
    min-height: unset !important;
    height: auto !important;
}

/* Spread width slider */
.spread-slider {
    padding: 5px 5px 18px 5px !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.spread-slider.active-slider {
    opacity: 1.0;
}

.spread-slider .rc-slider-rail {
    background-color: #333 !important;
    height: 4px !important;
}

.spread-slider .rc-slider-track {
    background-color: #17a2b8 !important;
    height: 4px !important;
}

.spread-slider .rc-slider-handle {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -5px !important;
    opacity: 1 !important;
}

.spread-slider.active-slider .rc-slider-track {
    background-color: #28a745 !important;
}

.spread-slider.active-slider .rc-slider-handle {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.spread-slider .rc-slider-dot {
    display: none !important;
}

.spread-slider .rc-slider-mark-text {
    color: #6c757d !important;
    font-size: 9px !important;
}

/* Parameter badge inputs (small editable values next to sliders) */
.param-badge {
    width: 100% !important;
    min-width: 40px !important;
    text-align: center !important;
    padding: 2px 1px !important;
    font-size: 10px !important;
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    color: #17a2b8 !important;
    font-weight: 600 !important;
}

.param-badge:focus {
    border-color: #17a2b8 !important;
    box-shadow: 0 0 3px rgba(23, 162, 184, 0.3) !important;
    outline: none !important;
}

/* Hide number input spinners */
.param-badge::-webkit-outer-spin-button,
.param-badge::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.param-badge[type=number] {
    -moz-appearance: textfield;
}

/* Qty spin button - compact number input with spinners */
.qty-spin {
    width: 45px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 32px !important;
    text-align: center !important;
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    color: #e9ecef !important;
}

/* Override Bootstrap form-control-sm constraints */
.qty-spin.form-control-sm {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    line-height: 32px !important;
}

.qty-spin:focus {
    border-color: #17a2b8 !important;
    box-shadow: 0 0 0 1px rgba(23, 162, 184, 0.3) !important;
    outline: none !important;
}

/* ============================================
   AI INSIGHTS MARKDOWN STYLING
   Colored formatting for LLM output
   ============================================ */

/* Headers - cyan */
.ai-insights-markdown h1,
.ai-insights-markdown h2,
.ai-insights-markdown h3,
.ai-insights-markdown h4,
.ai-insights-markdown h5,
.ai-insights-markdown h6 {
    color: #3dc4d9 !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    font-weight: 400 !important;
}

.ai-insights-markdown h1 { font-size: 12px !important; }
.ai-insights-markdown h2 { font-size: 12px !important; }
.ai-insights-markdown h3 { font-size: 11px !important; }

/* Paragraphs */
.ai-insights-markdown p {
    margin-bottom: 6px !important;
}

/* Bold - orange, normal weight */
.ai-insights-markdown strong,
.ai-insights-markdown b {
    color: #f59e0b !important;
    font-weight: 400 !important;
}

/* Italic - muted gray */
.ai-insights-markdown em,
.ai-insights-markdown i {
    color: #9ca3af !important;
}

/* Lists - compact spacing */
.ai-insights-markdown ul,
.ai-insights-markdown ol {
    margin-top: 2px !important;
    margin-bottom: 4px !important;
    margin-left: 16px !important;
    padding-left: 0 !important;
    line-height: 1.4 !important;
}

.ai-insights-markdown li {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove extra spacing from paragraphs before/after lists */
.ai-insights-markdown p + ul,
.ai-insights-markdown p + ol {
    margin-top: 2px !important;
}

.ai-insights-markdown ul + p,
.ai-insights-markdown ol + p {
    margin-top: 4px !important;
}

/* Bullish sentiment - green */
.ai-insights-markdown .bullish {
    color: #22c55e !important;
    font-weight: 400 !important;
}

/* Bearish sentiment - red */
.ai-insights-markdown .bearish {
    color: #ef4444 !important;
    font-weight: 400 !important;
}

/* Verification badges (top-level for SOURCES panel + scoped for markdown) */
.verify-pass,
.ai-insights-markdown .verify-pass {
    color: #22c55e !important;
    font-weight: 700 !important;
}
.verify-unverifiable,
.ai-insights-markdown .verify-unverifiable {
    color: #60a5fa !important;
    font-weight: 700 !important;
}
.verify-caution,
.ai-insights-markdown .verify-caution {
    color: #f59e0b !important;
    font-weight: 700 !important;
}
.verify-fail,
.ai-insights-markdown .verify-fail {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

/* SOURCES panel - compact body padding */
#query-metadata-panel .card-body {
    padding: 4px 8px !important;
}
#query-metadata-panel .card-header {
    padding: 0.15rem 0.4rem !important;
}

/* Code */
.ai-insights-markdown code {
    background-color: #2d2d2d !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
}

/* Blockquotes */
.ai-insights-markdown blockquote {
    border-left: 3px solid #333 !important;
    padding-left: 10px !important;
    margin-left: 0 !important;
    color: #9ca3af !important;
}

/* ============================================
   OFFCANVAS - Saved Items Drawer
   Dark theme for right-side offcanvas panel
   ============================================ */
.offcanvas {
    background-color: #151515 !important;
    color: #e0e0e0 !important;
    border-left: 1px solid #333 !important;
    top: 50px !important;
    height: calc(100vh - 50px) !important;
    z-index: 1040 !important;
}
.offcanvas-backdrop {
    top: 50px !important;
    z-index: 1039 !important;
}
.offcanvas-header {
    border-bottom: 1px solid #333 !important;
    padding: 0.5rem 1rem !important;
}
.offcanvas-header .btn-close {
    filter: invert(1) !important;
}
.offcanvas-title {
    font-size: 13px !important;
    color: #17a2b8 !important;
}
.offcanvas-body {
    padding: 0.5rem 0.75rem !important;
}

/* ============================================
   METRICS PICKER - Search input in offcanvas
   Override global .form-control dark text rule
   ============================================ */
#ts-metrics-search,
#intraday-metrics-search {
    color: #ffffff !important;
    background-color: #2a2f4a !important;
    border: 1px solid #555 !important;
}
#ts-metrics-search::placeholder,
#intraday-metrics-search::placeholder {
    color: #888 !important;
}

/* ============================================
   ASK links - hover underline for report/sources
   ============================================ */
#report-ask-query-btn:hover,
#sources-reask-btn:hover {
    text-decoration: underline !important;
    color: #a8c5e0 !important;
}
#report-ask-query-btn,
#sources-reask-btn {
    outline: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
#report-ask-query-btn:focus,
#sources-reask-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* WORKFLOW progress spinner -- inline rotating ring used in the
   PLANNING and RUNNING overlays. The ring color is set inline (cyan
   when planning, gold when running) so this rule only carries the
   rotation. */
.wfc-plan-spinner {
    animation: wfc-plan-spin 0.9s linear infinite;
}
@keyframes wfc-plan-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================
   WFC TEMPLATE review -- 3-state segmented control
   (STATIC / DYNAMIC / OMIT) for key-item classification.
   Built on dcc.RadioItems (className="wfc-seg") so the
   component still exposes a single `value`; this CSS only
   changes the LOOK from radio dots to a button group.
   Tuned for the DARK review panel (_BG_CARD): muted fills,
   soft light text -- not the bright primaries. Selected
   color is keyed off the radio input's value attribute
   (robust against DOM nesting), needs :has (Chromium 105+).
   ============================================ */
.wfc-seg {
    display: inline-flex !important;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    overflow: hidden;
    line-height: 1;
    flex: 0 0 auto;
}
/* dbc.RadioItems renders Bootstrap form-check rows; strip the wrapper
   chrome so each label becomes a contiguous segment button. */
.wfc-seg .form-check {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
    display: flex;
}
/* hide the native radio dot -- the label IS the button */
.wfc-seg .form-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
.wfc-seg .form-check-label {
    margin: 0;
    padding: 3px 0;
    min-width: 42px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #5f636b;
    background: #161616;
    cursor: pointer;
    border-left: 1px solid #3a3a3a;
    user-select: none;
    line-height: 16px;
    transition: background 0.08s ease, color 0.08s ease;
}
.wfc-seg .form-check:first-child .form-check-label { border-left: none; }
.wfc-seg .form-check-label:hover { background: #242424; color: #c8ccd4; }
/* selected segment -- sibling combinator (PROVEN pattern in this app, no
   :has needed). The LLM's suggestion is preselected and clearly highlighted
   (brighter fill + bold) against the dimmed unselected segments. */
.wfc-seg .form-check-input:checked + .form-check-label { font-weight: 600; }
.wfc-seg .form-check-input[value="static"]:checked + .form-check-label {
    background: #35506b; color: #eaf1f8;
}
.wfc-seg .form-check-input[value="dynamic"]:checked + .form-check-label {
    background: #6e5520; color: #f3e4c0;
}
.wfc-seg .form-check-input[value="omit"]:checked + .form-check-label {
    background: #5a3838; color: #eccaca;
}

/* ============================================
   WFC TEMPLATE review -- accordion summary header.
   Styled to match the workflow step-card headers
   (deep bar, border, Inter). Hide the native disclosure
   triangle and use an ASCII ">" chevron that rotates open.
   ============================================ */
.wfc-acc-summary { list-style: none; }
.wfc-acc-summary::-webkit-details-marker { display: none; }
.wfc-acc-summary::marker { content: ""; }
.wfc-acc-summary:hover { background-color: #1c1c1c !important; }
.wfc-acc-chevron {
    display: inline-block;
    color: #6c757d;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    margin-right: 8px;
    transition: transform 0.12s ease;
}
details[open] > .wfc-acc-summary .wfc-acc-chevron {
    transform: rotate(90deg);
}

/* Templatize paste box (#wfc-paste-capture is a contenteditable div, so it
   has no native placeholder): show data-placeholder while empty. */
#wfc-paste-capture:empty:before {
    content: attr(data-placeholder);
    color: #6c757d;
    pointer-events: none;
}