/* Global Font Enforced */
body,
html {
    font-family: 'Roboto', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix Dropdown Fonts and Layout */
.dash-dropdown,
.Select,
.Select-control,
.Select-menu-outer,
.Select-value-label,
.Select-placeholder,
.Select-input input {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.95rem;
}

/* Ensure consistent box-sizing */
*,
*:before,
*:after {
    box-sizing: border-box;
}

/* Sidebar Dropdown Specifics to match screenshots better */
.sidebar-dropdown .Select-control {
    border-radius: 4px;
    border: 1px solid #ccc;
    height: 38px;
    /* Standard height */
}

.sidebar-dropdown .Select-value {
    line-height: 38px !important;
}

.filter-label {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    color: rgba(255, 255, 255, 0.9);
}

/* Stack selected pills vertically in multi-selects that opt in via .dropdown-stack-tags.
   Targets both legacy react-select v1 (.Select-multi-value-wrapper / .Select-value)
   and the newer dash-core-components markup (.is-multi .Select-value, .Select__multi-value). */
.dropdown-stack-tags .Select--multi .Select-control {
    height: auto !important;
    min-height: 38px;
}
.dropdown-stack-tags .Select-multi-value-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
}
.dropdown-stack-tags .Select--multi .Select-value {
    display: flex !important;
    align-items: center;
    width: 100%;
    margin: 2px 0 !important;
    line-height: 32px !important;
    box-sizing: border-box;
}
.dropdown-stack-tags .Select--multi .Select-value-label {
    flex: 1;
}
.dropdown-stack-tags .Select--multi .Select-input {
    width: 100%;
}