/* Custom CSS for Trading Dashboard */

/* Dropdown styling for dark theme */
.Select-control {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

.Select-menu-outer {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

.Select-option {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

.Select-option:hover,
.Select-option.is-focused {
    background-color: #3d3d5c !important;
    color: #ffffff !important;
}

.Select-option.is-selected {
    background-color: #4a4a6a !important;
    color: #ffffff !important;
}

.Select-value-label,
.Select-placeholder {
    color: #ffffff !important;
}

.Select-input input {
    color: #ffffff !important;
}

/* Dash Dropdown (dcc.Dropdown) specific styles */
.dash-dropdown .Select-control {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

.dash-dropdown .Select-value-label {
    color: #ffffff !important;
}

.dash-dropdown .Select-placeholder {
    color: #999 !important;
}

.dash-dropdown .Select-menu-outer {
    background-color: #2d2d2d !important;
    border: 1px solid #444 !important;
    z-index: 9999 !important;
}

.dash-dropdown .VirtualizedSelectOption {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

.dash-dropdown .VirtualizedSelectFocusedOption {
    background-color: #3d3d5c !important;
    color: #ffffff !important;
}

.dash-dropdown .Select-arrow {
    border-color: #999 transparent transparent !important;
}

.dash-dropdown .Select.is-open .Select-arrow {
    border-color: transparent transparent #999 !important;
}

/* Selected group info dropdown specific */
#trading-group-selector .Select-control {
    background-color: #2d2d2d !important;
}

#trading-group-selector .Select-menu-outer {
    background-color: #2d2d2d !important;
}

#trading-group-selector .VirtualizedSelectOption {
    color: #ffffff !important;
    padding: 10px 12px !important;
}

/* Position group filter dropdown */
#trading-pos-group-filter .Select-control {
    background-color: #2d2d2d !important;
    min-height: 32px !important;
}

#trading-pos-group-filter .Select-menu-outer {
    background-color: #2d2d2d !important;
}

#trading-pos-group-filter .VirtualizedSelectOption {
    color: #ffffff !important;
}

/* Unified Dashboard Animations */
.blink-animation {
    animation: blink 1s infinite;
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}
.position-row:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}
.activity-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 0;
}
.activity-item:last-child {
    border-bottom: none;
}

/* ============================================
   Dash 4.0 Design Tokens (Dark Theme Override)
   ============================================ */
:root {
    --Dash-Spacing: 4px;
    --Dash-Fill-Disabled: rgba(255, 255, 255, 0.1);
    --Dash-Fill-Interactive-Strong: #7c4dff;
    --Dash-Fill-Interactive-Weak: rgba(124, 77, 255, 0.15);
    --Dash-Fill-Inverse-Strong: #2d2d44;
    --Dash-Fill-Primary-Hover: rgba(255, 255, 255, 0.04);
    --Dash-Fill-Primary-Active: rgba(255, 255, 255, 0.08);
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.5);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.3);
    --Dash-Stroke-Strong: rgba(255, 255, 255, 0.3);
    --Dash-Stroke-Weak: rgba(255, 255, 255, 0.1);
    --Dash-Text-Primary: rgba(255, 255, 255, 0.87);
    --Dash-Text-Strong: rgba(255, 255, 255, 0.95);
    --Dash-Text-Weak: rgba(255, 255, 255, 0.6);
    --Dash-Text-Disabled: rgba(255, 255, 255, 0.4);
}

/* ============================================
   Dash 4.0 Slider Styling (Dark Theme)
   ============================================ */

/* Slider container */
.dash-slider-container {
    width: 100% !important;
}

/* Hide direct input box next to slider */
.dash-range-slider-input {
    display: none !important;
}

/* Slider wrapper full width */
.dash-slider-wrapper {
    flex: 1 !important;
    width: 100% !important;
}

/* Slider track dark theme */
.dash-slider-track {
    background-color: #3d3d5c !important;
}

/* Slider selected range */
.dash-slider-range {
    background-color: #7c4dff !important;
}

/* Slider marks text color */
.dash-slider-mark {
    color: #aaa !important;
    font-size: 12px !important;
}

/* Slider mark ticks */
.dash-slider-mark::before {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Slider thumb (handle) */
.dash-slider-thumb {
    border-color: #7c4dff !important;
    background-color: #7c4dff !important;
    border: 2px solid #9c7cff !important;
}

/* Tooltip: dark theme with high z-index for Offcanvas */
.dash-slider-tooltip {
    z-index: 1100 !important;
    background-color: #2d2d44 !important;
    color: #e0e0e0 !important;
    border: 1px solid rgba(124, 77, 255, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

/* Tooltip arrow fill */
.dash-slider-tooltip svg {
    fill: #2d2d44 !important;
}

/* ================================================
   Regime Dynamic Tuning - Matrix Table Styles
   ================================================ */
.regime-cell-input {
    background-color: #1a1a2e !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
    text-align: center !important;
    padding: 2px 4px !important;
}

.regime-cell-input:focus {
    background-color: #252545 !important;
    border-color: #7c4dff !important;
    box-shadow: 0 0 0 0.15rem rgba(124, 77, 255, 0.25) !important;
    color: #fff !important;
}

.regime-active-col {
    background-color: rgba(124, 77, 255, 0.08) !important;
}