/* Native <select> and <option> elements don't inherit Bootstrap's CSS variables,
   so dark/deep-space mode would render them with browser-default light styling.
   These rules force the correct theme colors on both the dropdown container and
   each individual option item. */
select {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

option {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Filter/navigation selects — match btn-outline-theme style */
select.filter,
select.filter_for_loadfactor {
    background-color: transparent !important;
    border-color: var(--bs-theme) !important;
    color: var(--bs-theme) !important;
}

select.filter:focus,
select.filter_for_loadfactor:focus {
    border-color: var(--bs-theme) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-theme-rgb), 0.25) !important;
    outline: 0;
}

.modal {
    z-index: 2000 !important;
}

.modal-backdrop {
    z-index: 1900 !important;
}

/* Header app title — absolutely centered, adapts to theme text color */
.app-header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-app-header-link-color, #ffffff);
    white-space: nowrap;
    pointer-events: none;
}

/* Header logo — show light logo on light mode, dark logo on dark mode */
.brand-effectio-dark  { display: none; }
.brand-effectio-light { display: inline-block; }

[data-bs-theme=dark] .brand-effectio-light { display: none; }
[data-bs-theme=dark] .brand-effectio-dark  { display: inline-block; }

/* Sidebar menu group headers — larger, white in dark mode, black in light */
.menu-header {
    font-size: 0.8rem !important;
}

[data-bs-theme=dark] .menu-header {
    color: #ffffff !important;
}

[data-bs-theme=light] .menu-header,
html:not([data-bs-theme=dark]) .menu-header {
    color: #000000 !important;
}

.invisible-container {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.visible-container {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}