/*
 * Radzen Fluent Theme — Minimal Overrides
 * The Fluent Pro theme is the baseline. Only fix what's genuinely broken.
 *
 * NOTE: The Fluent theme bundles "Material Symbols Outlined" (woff2 in /fonts/).
 * Do NOT override --rz-icon-font-family — let the theme use its native icon font.
 */

/* ===== DATAGRID EMPTY STATE ===== */
/* fluent-dark-base.css sets striped-row bg+color with high specificity (3 classes + pseudo-class).
 * The empty message row inherits that dark color, making the text invisible.
 * Scope to [data-theme="dark"] to avoid affecting light mode. */
[data-theme="dark"] .rz-datatable-emptymessage span {
    color: var(--op-text-secondary) !important;
}

/* ===== DATAGRID COLUMN FILTER POPUP — DARK MODE ===== */
[data-theme="dark"] .rz-grid-filter {
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border-default);
    border-radius: var(--op-radius-md);
    color: var(--op-text-primary);
}

[data-theme="dark"] .rz-grid-filter-label {
    color: var(--op-text-primary) !important;
}

[data-theme="dark"] .rz-grid-filter-buttons {
    background: var(--op-bg-tertiary);
    border-top: 1px solid var(--op-border-default);
}

/* ===== THIN SCROLLBARS FOR RADZEN COMPONENTS ===== */
/* DataGrid body, dropdown panels, column picker popup, listbox, autocomplete.
 * Restores rules accidentally removed in e834383 (dark mode fixes). */
.rz-data-grid-data,
.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-listbox,
.rz-autocomplete-panel,
.rz-column-picker-popup {
    scrollbar-width: thin;
    scrollbar-color: var(--op-text-tertiary, #9ca3af) transparent;
}

.rz-data-grid-data::-webkit-scrollbar,
.rz-dropdown-panel::-webkit-scrollbar,
.rz-multiselect-panel::-webkit-scrollbar,
.rz-listbox::-webkit-scrollbar,
.rz-autocomplete-panel::-webkit-scrollbar,
.rz-column-picker-popup::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.rz-data-grid-data::-webkit-scrollbar-track,
.rz-dropdown-panel::-webkit-scrollbar-track,
.rz-multiselect-panel::-webkit-scrollbar-track,
.rz-listbox::-webkit-scrollbar-track,
.rz-autocomplete-panel::-webkit-scrollbar-track,
.rz-column-picker-popup::-webkit-scrollbar-track {
    background: transparent;
}

.rz-data-grid-data::-webkit-scrollbar-thumb,
.rz-dropdown-panel::-webkit-scrollbar-thumb,
.rz-multiselect-panel::-webkit-scrollbar-thumb,
.rz-listbox::-webkit-scrollbar-thumb,
.rz-autocomplete-panel::-webkit-scrollbar-thumb,
.rz-column-picker-popup::-webkit-scrollbar-thumb {
    background: var(--op-text-tertiary, #9ca3af);
    border-radius: 3px;
}

.rz-data-grid-data::-webkit-scrollbar-thumb:hover,
.rz-dropdown-panel::-webkit-scrollbar-thumb:hover,
.rz-multiselect-panel::-webkit-scrollbar-thumb:hover,
.rz-listbox::-webkit-scrollbar-thumb:hover,
.rz-autocomplete-panel::-webkit-scrollbar-thumb:hover,
.rz-column-picker-popup::-webkit-scrollbar-thumb:hover {
    background: var(--op-text-secondary, #6b7280);
}

/* ===== SYMBOL CARD LIST SCROLLBARS ===== */
/* Flow container and add dropdown use the same thin scrollbar as DataGrid */
.scl-flow,
.scl-add-dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--op-text-tertiary, #9ca3af) transparent;
}

.scl-flow::-webkit-scrollbar,
.scl-add-dropdown::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scl-flow::-webkit-scrollbar-track,
.scl-add-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.scl-flow::-webkit-scrollbar-thumb,
.scl-add-dropdown::-webkit-scrollbar-thumb {
    background: var(--op-text-tertiary, #9ca3af);
    border-radius: 3px;
}

.scl-flow::-webkit-scrollbar-thumb:hover,
.scl-add-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--op-text-secondary, #6b7280);
}

/* ===== SELECTED ROW TEXT COLOR ===== */
/* Radzen sets color on .rz-cell-data inside highlighted rows, but child <span> elements
 * with explicit color (e.g. .symbol-cell, .earnings-cell) don't inherit it.
 * Force all non-badge children to inherit the row highlight color.
 * Exclude .op-badge AND .type-badge — both have intentional bg+text colors that must survive selection. */
.rz-data-row.rz-state-highlight .rz-cell-data > *:not(.op-badge):not(.type-badge) {
    color: inherit;
}

/* ===== COLUMN PICKER ALIGNMENT ===== */
/* Push the built-in column picker dropdown to the right side of its container row */
.rz-column-picker {
    margin-left: auto;
}

/* ===== COLUMN PICKER DROPDOWN — DARK MODE ===== */
[data-theme="dark"] .rz-multiselect-panel {
    background: var(--op-bg-secondary);
    border: 1px solid var(--op-border-default);
    box-shadow: var(--op-shadow-lg);
}

/* Header row ("All" toggle) */
[data-theme="dark"] .rz-multiselect-header {
    background: var(--op-bg-tertiary);
    border-bottom: 1px solid var(--op-border-default);
    color: var(--op-text-primary);
}

/* "All" label text */
[data-theme="dark"] .rz-multiselect-selectall,
[data-theme="dark"] .rz-multiselect-header .rz-chkbox-label {
    color: var(--op-text-primary);
}

/* Each column item row */
[data-theme="dark"] .rz-multiselect-item {
    color: var(--op-text-primary);
}

[data-theme="dark"] .rz-multiselect-item:hover,
[data-theme="dark"] .rz-multiselect-item.rz-state-highlight {
    background: var(--op-bg-primary);
}

/* Checkbox boxes: unchecked state — give them a visible border, no fill */
[data-theme="dark"] .rz-chkbox-box {
    background: var(--op-bg-primary);
    border-color: var(--op-border-emphasis);
}

/* Checked state stays primary-colored but sized down to feel intentional */
[data-theme="dark"] .rz-chkbox-box.rz-state-active {
    background: var(--rz-primary, #479ef5);
    border-color: var(--rz-primary, #479ef5);
}

/* ===== RADZEN FORM INPUTS — DARK MODE ===== */
/* Covers RadzenNumeric, RadzenTextBox, RadzenDropDown in dark mode */
[data-theme="dark"] .rz-text-box,
[data-theme="dark"] .rz-numeric input,
[data-theme="dark"] .rz-dropdown,
[data-theme="dark"] .rz-textbox {
    background: var(--op-bg-secondary);
    border-color: var(--op-border-default);
    color: var(--op-text-primary);
}

[data-theme="dark"] .rz-text-box:focus,
[data-theme="dark"] .rz-numeric input:focus,
[data-theme="dark"] .rz-textbox:focus {
    border-color: var(--op-primary);
    outline: none;
}

/* Slider track in dark mode */
[data-theme="dark"] .rz-slider-horizontal {
    background: var(--op-border-default);
}

/* ===== RADZEN TABS — DARK MODE ===== */
/* Tab text and active indicator visibility on dark backgrounds */
[data-theme="dark"] .rz-tabview-nav {
    background: var(--op-bg-secondary);
    border-bottom-color: var(--op-border-default);
}

[data-theme="dark"] .rz-tabview-nav li a,
[data-theme="dark"] .rz-tabview-nav li span {
    color: var(--op-text-secondary);
}

[data-theme="dark"] .rz-tabview-nav li.rz-tabview-selected a,
[data-theme="dark"] .rz-tabview-nav li.rz-tabview-selected span {
    color: var(--op-text-primary);
}

[data-theme="dark"] .rz-tabview-ink-bar {
    background: var(--op-primary);
}

[data-theme="dark"] .rz-tabview-panels {
    background: var(--op-bg-primary);
    border-color: var(--op-border-default);
}

/* ===== RADZEN DIALOG — DARK MODE ===== */
/* .rz-dialog-content has no explicit text color — inherits incorrectly in dark mode.
 * Also fix the dialog background, title, and overlay. */
[data-theme="dark"] .rz-dialog {
    background-color: var(--op-bg-secondary);
    border: 1px solid var(--op-border-default);
}

[data-theme="dark"] .rz-dialog-titlebar {
    background-color: var(--op-bg-tertiary);
    border-bottom: 1px solid var(--op-border-default);
    color: var(--op-text-primary);
}

[data-theme="dark"] .rz-dialog-title {
    color: var(--op-text-primary);
}

[data-theme="dark"] .rz-dialog-content {
    background-color: var(--op-bg-secondary);
    color: var(--op-text-primary);
}

[data-theme="dark"] .rz-dialog-wrapper {
    background-color: rgba(0, 0, 0, 0.6);
}

/* NOTE: DataGrid scrollbar rules are covered by the comprehensive
 * "THIN SCROLLBARS FOR RADZEN COMPONENTS" block near the top of this file
 * (line ~34), which handles DataGrid, dropdowns, multiselect, listbox,
 * autocomplete, and column picker. Do not add component-specific
 * scrollbar rules here — update that block instead. */