/* ============================================================================
 * dropdown-overlay-fix.css
 * ----------------------------------------------------------------------------
 * CENTRALIZED fix for dropdown / multiselect / typeahead / datepicker / popup
 * overlays being clipped or hidden behind surrounding content.
 *
 * This file MUST be loaded LAST (after all theme + plugin stylesheets) so that
 * its rules win on source order without needing to spread !important hacks or
 * page-level patches across the application.
 *
 * Root causes addressed:
 *   1. Form containers (.portlet, .portlet-body, .form-body, ...) use
 *      `overflow: hidden`, which clips any absolutely-positioned overlay that
 *      extends beyond the container box.
 *   2. Overlay panels carry inconsistent / low z-index values, so they render
 *      behind sibling content, sticky headers, and modal bodies.
 *   3. The isteven multiSelect checkbox list only scrolls when a per-instance
 *      `max-height` attribute is supplied; otherwise long lists overflow with
 *      no scrollbar.
 *
 * Design goals:
 *   - Let overlays escape their form containers.
 *   - Keep Bootstrap modals, backdrops and table scrolling intact.
 *   - Avoid touching genuine scroll regions (.table-responsive, ag-grid,
 *     charts) so wide-table horizontal scrolling is preserved.
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 1. Shared layering scale
 *    A single source of truth for overlay stacking. Modals in this theme sit
 *    at ~10050; overlays that may open inside a modal must beat that, so the
 *    overlay layer is pinned just above it.
 * -------------------------------------------------------------------------- */
:root {
    --overlay-z: 10060;          /* dropdowns / multiselect / typeahead panels */
    --overlay-z-datepicker: 10061;
}

/* ----------------------------------------------------------------------------
 * 2. Stop form containers from clipping overlays
 *    These containers wrap nearly every form in the app and were clipping the
 *    overlays via `overflow: hidden`. They are layout boxes (not scroll
 *    regions), so making overflow visible is safe and lets overlays paint
 *    outside the box. Genuine scroll regions are intentionally excluded.
 * -------------------------------------------------------------------------- */
.portlet,
.portlet > .portlet-body,
.portlet.box > .portlet-body,
.portlet.light > .portlet-body,
.portlet-body.form,
.form .form-body,
.form-body,
.form-bordered .form-body,
.form-row-seperated .form-body,
.input-left,
.input-right,
.input-top,
.input-bottom,
.tab-content,
.portlet-tabs > .tab-content {
    overflow: visible !important;
}

/* ----------------------------------------------------------------------------
 * 3. isteven-multi-select  (bower_components/angular-multi-select)
 *    - Lift the checkbox layer above modals and surrounding content.
 *    - Provide a sane default scroll for the option list so long lists scroll
 *      even when the directive instance has no `max-height` attribute.
 *      (When a `max-height` attribute IS supplied the directive writes an
 *      inline style, which still wins over this rule.)
 * -------------------------------------------------------------------------- */
.multiSelect .checkboxLayer {
    z-index: var(--overlay-z) !important;
}
.multiSelect .checkBoxContainer {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ----------------------------------------------------------------------------
 * 4. ui-select / angular typeahead / Bootstrap dropdowns
 *    Open menus must paint above neighbouring fields and inside modals. Only
 *    OPEN menus are elevated so closed menus do not create needless stacking
 *    contexts. The scroll behaviour for long lists is preserved.
 * -------------------------------------------------------------------------- */
.dropdown.open > .dropdown-menu,
.open > .dropdown-menu,
.ui-select-container.open .ui-select-dropdown,
.ui-select-container .ui-select-choices,
ul.dropdown-menu[role="listbox"],
.typeahead.dropdown-menu,
.ui-select-choices.dropdown-menu {
    z-index: var(--overlay-z) !important;
}

/* Keep long ui-select / typeahead result lists scrollable instead of clipped */
.ui-select-choices.dropdown-menu,
ul.dropdown-menu[role="listbox"] {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ----------------------------------------------------------------------------
 * 5. Datepicker popups (uib-datepicker-popup / bootstrap-datepicker)
 *    Sit one level above other overlays so a date popup opened from a field
 *    next to a select is never hidden behind it.
 * -------------------------------------------------------------------------- */
.datepicker.dropdown-menu,
.uib-datepicker-popup.dropdown-menu,
[uib-datepicker-popup-wrap] .dropdown-menu,
.datepicker-dropdown {
    z-index: var(--overlay-z-datepicker) !important;
}

/* ----------------------------------------------------------------------------
 * 6. Modal correctness
 *    When an overlay is opened inside a Bootstrap modal, the modal itself must
 *    still stack normally. We never lower modal/backdrop z-index here; we only
 *    ensure overlays *inside* a modal can rise above the modal body. Bootstrap
 *    modal = 1050, Metronic themed modal = 10050; overlay layer (10060/10061)
 *    sits just above the themed modal body but below nothing it shouldn't.
 * -------------------------------------------------------------------------- */
.modal .multiSelect .checkboxLayer {
    z-index: var(--overlay-z) !important;
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}