/* Dropdown — theme-aware via CSS custom properties.
   The .dark-dropdown class stays on the component; theming is handled by
   CSS vars set on #app-root via .theme-dark / .theme-light. */

.dark-dropdown {
    font-size: 14px;
    height: 38px !important;
    box-sizing: border-box !important;
}

/* Control box */
.dark-dropdown .dash-dropdown-grid-container {
    background-color: var(--card) !important;
    border: 1px solid var(--grid) !important;
    border-radius: 6px !important;
    min-height: 38px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    cursor: pointer !important;
}

/* Selected value text */
.dark-dropdown .dash-dropdown-value,
.dark-dropdown .dash-dropdown-value-item,
.dark-dropdown .dash-dropdown-value-item span {
    color: var(--text) !important;
}

/* Placeholder text */
.dark-dropdown .dash-dropdown-placeholder {
    color: var(--muted) !important;
}

/* Arrow icon */
.dark-dropdown .dash-dropdown-trigger-icon {
    color: var(--muted) !important;
}

/* Dropdown menu panel */
.dark-dropdown .dash-dropdown-menu {
    background-color: var(--card) !important;
    border: 1px solid var(--grid) !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
}

/* Individual options */
.dark-dropdown .dash-dropdown-option {
    background-color: var(--card) !important;
    color: var(--text) !important;
    cursor: pointer !important;
    border-radius: 4px !important;
}

/* Option hover */
.dark-dropdown .dash-dropdown-option:hover,
.dark-dropdown .dash-dropdown-option-highlighted {
    background-color: var(--grid) !important;
    color: var(--text) !important;
}

/* Selected option */
.dark-dropdown .dash-dropdown-option-selected {
    background-color: var(--btn-active-bg) !important;
    color: var(--btn-active-color) !important;
}

/* Category group headers in Raw Data tab (disabled, non-selectable) */
.dark-dropdown .dash-dropdown-option[aria-disabled="true"] {
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: default !important;
    background-color: var(--card) !important;
    padding-top: 10px !important;
    pointer-events: none !important;
}

/* Upload widget — Dash wraps dcc.Upload in an extra div; both must be sized to fill parent. */
#upload-data,
#upload-data > div {
    width: 100% !important;
    box-sizing: border-box !important;
}