/* 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;
}

/* 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 */
}

/* 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: #e5e7eb !important;  /* Brighter for body text legibility */
}

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

.card-header, .card-header * {
    color: #b8bfc7 !important;  /* Headers brighter for legibility */
}

/* Override for specific elements that need to stay bright */
.card-body label,
.card-body .form-label,
.card-body span:not(.text-muted) {
    color: #e5e7eb !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: 12px !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);
}

/* ============================================
   DROPDOWN FIX: Dark text for white backgrounds
   Dropdowns have white/light backgrounds, so text needs to be dark
   ============================================ */

/* Dash/React-Select dropdown - ALL text inside dropdown container */
.Select,
.Select *,
.Select-control,
.Select-value,
.Select-value-label,
.Select-placeholder,
.Select-input,
.Select-input input,
.Select-menu-outer,
.Select-menu,
.Select-option {
    color: #1f2937 !important;  /* Dark gray for all dropdown text */
}

/* React-Select v2+ class patterns (used by newer Dash) */
.css-1uccc91-singleValue,
.css-1wa3eu0-placeholder,
.css-b8ldur-Input,
.css-1g6gooi,
.css-qc6sy-singleValue,
.css-14el2xx-placeholder,
[class$="-singleValue"],
[class$="-placeholder"],
[class$="-Input"] input,
[class*="singleValue"],
[class*="placeholder"] {
    color: #1f2937 !important;
}

/* Dropdown menu items */
.css-26l3qy-menu,
.css-4ljt47-MenuList,
.css-1n7v3ny-option,
.css-yt9ioa-option,
.css-9gakcf-option,
[class$="-menu"],
[class$="-MenuList"],
[class$="-option"],
[class*="MenuList"],
[class*="option"] {
    color: #1f2937 !important;
}

/* Force dark text on any div inside a Dropdown component */
.dash-dropdown .Select-value-label,
.dash-dropdown .Select-placeholder,
.dash-dropdown input,
.Select-menu-outer .Select-option,
div[id*="dropdown"] [class*="Value"],
div[id*="dropdown"] [class*="placeholder"],
div[id*="dropdown"] [class*="option"],
div[id*="dropdown"] input {
    color: #1f2937 !important;
}

/* Form control inputs (text inputs, textareas) with white backgrounds */
.form-control {
    color: #1f2937 !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 */
.form-select {
    color: #1f2937 !important;
}

/* Dash DataTable - ensure text is dark on white table cells */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    color: #1f2937 !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: #1f2937 !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: #1f2937 !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: #1f2937 !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: #1f2937 !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: #1f2937 !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: #1f2937 !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: #1f2937 !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: #1f2937 !important;
}

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

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

#cal-spread-back-tenors .Select--multi .Select-value-icon {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !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: #0891b2 !important;
    background: #0891b2 !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: #ffffff !important;
}

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

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

#cal-spread-front-delta .Select--multi .Select-value-icon {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !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: #0891b2 !important;
    background: #0891b2 !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: #ffffff !important;
}

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

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

#cal-spread-back-delta .Select--multi .Select-value-icon {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !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: #0891b2 !important;
    background: #0891b2 !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: #ffffff !important;
}

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

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

#cal-spread-front-tenor .Select--multi .Select-value-icon {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !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: #0891b2 !important;
    background: #0891b2 !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: #ffffff !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;
}

/* 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: #1f2937 !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: 'Segoe UI', Tahoma, 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: #1f2937 !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: #1f2937 !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: #1f2937 !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: #1f2937 !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: #1f2937 !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: #1f2937 !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;
    text-align: center !important;
    padding: 2px 4px !important;
    font-size: 11px !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;
}