/* =============================================================================
   DASHBOARD SHIPMENT - DARK THEME
   ============================================================================= */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #13161a !important;
    color: #e0e0e0 !important;
}

/* =============================================================================
   DASH DROPDOWNS - AGGRESSIVE DARK OVERRIDE
   ============================================================================= */

/* Target everything inside dropdown wrapper */
.dash-dropdown,
.dash-dropdown * {
    background-color: #1e2127 !important;
    color: #e0e0e0 !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* Classic React-Select classes */
.Select-control,
.Select-menu-outer,
.Select-menu,
.Select-option,
.Select-value,
.Select-input,
.Select-placeholder,
.Select-noresults {
    background-color: #1e2127 !important;
    color: #e0e0e0 !important;
}

/* Modern React-Select classes (css-xxx-*) */
div[class*="-control"],
div[class*="-menu"],
div[class*="-option"],
div[class*="-singleValue"],
div[class*="-placeholder"],
div[class*="-input"],
div[class*="-indicatorContainer"],
div[class*="-ValueContainer"],
div[class*="-multiValue"] {
    background-color: #1e2127 !important;
    color: #e0e0e0 !important;
}

/* Input inside dropdown */
.Select-input input,
div[class*="-input"] input,
.dash-dropdown input {
    background-color: #1e2127 !important;
    color: #e0e0e0 !important;
    caret-color: #20c997 !important;
}

/* Dropdown options - WHITE TEXT */
.Select-option,
.Select-option *,
div[class*="-option"],
div[class*="-option"] *,
.VirtualizedSelectOption,
.VirtualizedSelectFocusedOption,
[class*="option"],
[class*="Option"] {
    background-color: #1e2127 !important;
    color: #ffffff !important;
}

/* Radio buttons in dropdown */
.Select-option input,
.Select-option label,
div[class*="-option"] input,
div[class*="-option"] label,
div[class*="-option"] span {
    color: #ffffff !important;
}

/* Dropdown menu items hover */
.Select-option:hover,
.Select-option.is-focused,
div[class*="-option"]:hover {
    background-color: #2a2e35 !important;
    color: #20c997 !important;
}

/* Selected option */
.Select-option.is-selected,
div[class*="-option"][aria-selected="true"] {
    background-color: rgba(32,201,151,0.25) !important;
    color: #20c997 !important;
}

/* Dropdown border on hover */
.Select-control:hover,
div[class*="-control"]:hover {
    border-color: #20c997 !important;
}

/* Arrow and indicators */
.Select-arrow-zone,
.Select-clear-zone,
div[class*="-indicatorContainer"] svg {
    color: #888 !important;
    fill: #888 !important;
}

/* Separator line */
div[class*="-indicatorSeparator"] {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Placeholder text */
.Select-placeholder,
div[class*="-placeholder"] {
    color: #666 !important;
}

/* =============================================================================
   FORM INPUTS
   ============================================================================= */

.form-control,
input,
textarea,
select {
    background-color: #1e2127 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #e0e0e0 !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #20c997 !important;
    box-shadow: 0 0 0 2px rgba(32,201,151,0.15) !important;
    background-color: #1e2127 !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #666 !important;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

.btn-outline-secondary {
    border-color: rgba(255,255,255,0.15) !important;
    color: #aaa !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover {
    background-color: rgba(32,201,151,0.1) !important;
    border-color: #20c997 !important;
    color: #20c997 !important;
}

.input-group .btn {
    border-color: rgba(255,255,255,0.1) !important;
}

/* =============================================================================
   CHARTS
   ============================================================================= */

.modebar { display: none !important; }

.js-plotly-plot, .plotly { width: 100% !important; }
.js-plotly-plot .plotly .main-svg { width: 100% !important; }

/* =============================================================================
   LAYOUT
   ============================================================================= */

/* main-content layout is handled by sidebar_style.css */

/* =============================================================================
   SCROLLBAR
   ============================================================================= */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* =============================================================================
   MISC
   ============================================================================= */

a { color: #20c997; }
a:hover { color: #2ecc9f; }

.card {
    background-color: rgba(40,44,52,0.4) !important;
    border-color: rgba(255,255,255,0.05) !important;
}

/* Dashboard top year controls: flat/no-card look */
#dashboard-year-controls .year-dropdown-flat .Select-control,
#dashboard-year-controls .year-dropdown-flat div[class*="-control"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 30px !important;
}

#dashboard-year-controls .year-dropdown-flat,
#dashboard-year-controls .year-dropdown-flat *,
#dashboard-year-controls .year-dropdown-flat .Select,
#dashboard-year-controls .year-dropdown-flat .Select-value,
#dashboard-year-controls .year-dropdown-flat .Select-value-label,
#dashboard-year-controls .year-dropdown-flat .Select-input,
#dashboard-year-controls .year-dropdown-flat div[class*="-ValueContainer"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#dashboard-year-controls .year-dropdown-flat .Select-value-label,
#dashboard-year-controls .year-dropdown-flat .Select-input,
#dashboard-year-controls .year-dropdown-flat .Select-placeholder,
#dashboard-year-controls .year-dropdown-flat div[class*="-singleValue"],
#dashboard-year-controls .year-dropdown-flat div[class*="-input"],
#dashboard-year-controls .year-dropdown-flat div[class*="-placeholder"] {
    color: #dff7ee !important;
}

#dashboard-year-controls .year-dropdown-flat .Select-arrow,
#dashboard-year-controls .year-dropdown-flat .Select-arrow-zone,
#dashboard-year-controls .year-dropdown-flat div[class*="-indicatorContainer"] svg {
    color: #20c997 !important;
    fill: #20c997 !important;
}

/* Keep opened menu readable while control stays flat */
#dashboard-year-controls .year-dropdown-flat .Select-menu-outer,
#dashboard-year-controls .year-dropdown-flat .Select-menu,
#dashboard-year-controls .year-dropdown-flat div[class*="-menu"],
#dashboard-year-controls .year-dropdown-flat div[class*="-option"] {
    background-color: #0b1a2c !important;
    border: 1px solid rgba(32, 201, 151, 0.25) !important;
}

#btn-refresh-data {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Dashboard year select: themed pill + visible dropdown affordance */
#data-year-selector.year-select-themed {
    background-color: rgba(7, 26, 44, 0.92) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #dff7ee !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    line-height: 1.1 !important;
    padding: 6px 30px 6px 10px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #20c997 50%),
        linear-gradient(135deg, #20c997 50%, transparent 50%);
    background-position:
        calc(100% - 14px) calc(50% - 2px),
        calc(100% - 9px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

#data-year-selector.year-select-themed:hover {
    background-color: rgba(8, 30, 49, 0.95) !important;
}

#data-year-selector.year-select-themed:focus {
    box-shadow: 0 0 0 2px rgba(32, 201, 151, 0.16) !important;
    outline: none !important;
}

#data-year-selector.year-select-themed option {
    background: #0b1a2c !important;
    color: #dff7ee !important;
}