/**
 * DigitalManager — dropdown UI fixes (Select2 v3/v4, Chosen, Chzn)
 * Load LAST after dm-app-theme-new.css (and POS theme when present).
 * Scoped: body.dm-app-theme only. Uses !important to beat vendor + AdminLTE.
 * Only fixes overflow and max-height — no font-size, color, or border changes.
 */

/* ========================================================================== */
/* 1. Prevent dropdown panels from being clipped by overflow:hidden ancestors  */
/* ========================================================================== */

/* --- Generic Bootstrap / AdminLTE layout containers --- */
body.dm-app-theme .form-group,
body.dm-app-theme .input-group {
    overflow: visible !important;
}

body.dm-app-theme .tab-content {
    overflow: visible !important;
}

body.dm-app-theme .panel-body {
    overflow: visible !important;
}

body.dm-app-theme .content-wrapper,
body.dm-app-theme .box-body {
    overflow: visible !important;
}

/* --- Global panel / box (dm-app-theme-global.css line 2163-2168) --- */
body.dm-app-theme .panel,
body.dm-app-theme .box {
    overflow: visible !important;
}

/* --- App-wide #main_wrapper panels (dm-app-theme-global.css line 3468-3472) --- */
body.dm-app-theme #main_wrapper .panel.panel-default {
    overflow: visible !important;
}

/* --- Supplier / Customer form shells --- */
body.dm-app-theme #main_wrapper.dm-supplier-form-shell .panel.panel-default,
body.dm-app-theme #main_wrapper.dm-supplier-form-shell #import .dm-import-excel-panel {
    overflow: visible !important;
}

body.dm-app-theme #main_wrapper.dm-supplier-form-shell,
body.dm-app-theme #main_wrapper.dm-supplier-form-shell.dm-theme-supplier-shell {
    overflow: visible !important;
}

/* --- Sale form shell --- */
body.dm-app-theme #main_wrapper.dm-sale-form-shell .panel.panel-default,
body.dm-app-theme #main_wrapper.dm-sale-form-shell {
    overflow: visible !important;
}

/* --- Purchase form shell --- */
body.dm-app-theme #main_wrapper.dm-theme-purchase-shell .panel.panel-default,
body.dm-app-theme #main_wrapper.dm-theme-purchase-shell {
    overflow: visible !important;
}

/* --- Sale order design-system shell --- */
body.dm-app-theme #main_wrapper.dm-sale-order-ds .panel.panel-default,
body.dm-app-theme #main_wrapper.dm-sale-order-ds {
    overflow: visible !important;
}

/* --- Privileges shell --- */
body.dm-app-theme #main_wrapper.dm-theme-privillages-shell {
    overflow: visible !important;
}

body.dm-app-theme.dm-page-privillages #main_wrapper .panel.panel-default {
    overflow: visible !important;
}

/* --- Payroll / attendance report panels --- */
body.dm-page-monthly-att-register #main_wrapper .dm-monthly-att-filters-panel,
body.dm-page-monthly-att-register #main_wrapper .dm-monthly-att-results-panel {
    overflow: visible !important;
}

/* --- Route input-group (supplier shell, dm-app-theme-global.css line 3084-3090) --- */
body.dm-app-theme #main_wrapper.dm-supplier-form-shell .input-group.dm-route-group {
    overflow: visible !important;
}

/* ========================================================================== */
/* 2. Select2 v3 — dropdown panel, results, and search                        */
/* ========================================================================== */

body.dm-app-theme #select2-drop,
body.dm-app-theme .select2-drop {
    max-height: none !important;
    overflow: visible !important;
}

body.dm-app-theme .select2-container .select2-results,
body.dm-app-theme .select2-drop .select2-results {
    max-height: min(55vh, 340px) !important;
    overflow-y: auto !important;
}

/* ========================================================================== */
/* 3. Select2 v4 — dropdown panel and results                                */
/* ========================================================================== */

body.dm-app-theme .select2-container--default .select2-dropdown {
    max-height: none !important;
    overflow: visible !important;
}

body.dm-app-theme .select2-container--default .select2-results > .select2-results__options {
    max-height: min(55vh, 340px) !important;
    overflow-y: auto !important;
}

/* ========================================================================== */
/* 4. Chosen + Chzn — dropdown panel and results                              */
/* ========================================================================== */

body.dm-app-theme .chosen-container .chosen-drop,
body.dm-app-theme .chzn-container .chzn-drop {
    overflow: visible !important;
}

body.dm-app-theme .chosen-container .chosen-results,
body.dm-app-theme .chzn-container .chzn-results {
    max-height: min(55vh, 340px) !important;
    overflow-y: auto !important;
}

/* ========================================================================== */
/* 5. Prevent double-plugin containers (Select2 + Chosen on same element)     */
/*    JS monkey-patch in general.js is the primary fix (destroys Select2      */
/*    before Chosen init). These CSS rules are a visual safety net.           */
/*    When a <select> has .chzn-done, Chosen owns it — hide any Select2.     */
/* ========================================================================== */

/* Chosen marks the <select> with .chzn-done — any adjacent Select2 wrapper
   is a leftover duplicate regardless of DOM order */
body.dm-app-theme select.chzn-done + .select2-container {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
}

/* The inverse order: Chosen container appears before Select2 container */
body.dm-app-theme .chzn-container + .select2-container {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
}

/* Generic: any Select2 container that is a sibling of a Chosen container */
body.dm-app-theme .select2-container ~ .chzn-container ~ .select2-container {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
}

/* Chosen container after Select2 container (Select2 is the leftover) */
body.dm-app-theme .select2-container:has(~ .chzn-container) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
}

/* ========================================================================== */
/* ========================================================================== */
/* Container width — Chosen/Chzn must fill parent, not use hardcoded px       */
/* ========================================================================== */

body.dm-app-theme .chosen-container.chosen-container-single,
body.dm-app-theme .chzn-container.chzn-container-single {
    width: 100% !important;
}

body.dm-app-theme .chosen-container.chosen-container-multi,
body.dm-app-theme .chzn-container.chzn-container-multi {
    width: 100% !important;
    max-width: 100% !important;
}

/* Select2 v3 container full-width */
body.dm-app-theme .select2-container {
    display: block !important;
    width: 100% !important;
}

/* ========================================================================== */
/* 6. Neutralize Bootstrap .form-control / .input-sm on wrapper divs          */
/* ========================================================================== */

body.dm-app-theme .select2-container.form-control,
body.dm-app-theme .select2-container.input-sm {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    line-height: normal !important;
    font-size: inherit !important;
}

body.dm-app-theme .chosen-container.form-control,
body.dm-app-theme .chosen-container.input-sm,
body.dm-app-theme .chzn-container.form-control,
body.dm-app-theme .chzn-container.input-sm {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    line-height: normal !important;
    font-size: inherit !important;
}

/* Inside .input-group these neutralized containers use table-cell layout */
body.dm-app-theme .input-group .select2-container,
body.dm-app-theme .input-group .select2-container.form-control,
body.dm-app-theme .input-group .select2-container.input-sm {
    display: table-cell !important;
    width: 100% !important;
    vertical-align: middle !important;
}

body.dm-app-theme .input-group .chosen-container,
body.dm-app-theme .input-group .chosen-container.form-control,
body.dm-app-theme .input-group .chzn-container,
body.dm-app-theme .input-group .chzn-container.form-control {
    display: table-cell !important;
    width: 100% !important;
    vertical-align: middle !important;
    float: none !important;
}

/* ========================================================================== */
/* 7. Select2 v3 — trigger height + arrow (layout only, no color changes)     */
/* ========================================================================== */

body.dm-app-theme .select2-container .select2-choice {
    height: 34px !important;
    line-height: 32px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.dm-app-theme .select2-container .select2-choice .select2-arrow {
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-image: none !important;
    border-left: 1px solid #e2e8f0 !important;
}

/* v3 dropdown panel border + shadow */
body.dm-app-theme #select2-drop,
body.dm-app-theme .select2-drop {
    border: 1px solid #cbd5e1 !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1) !important;
}

body.dm-app-theme .select2-drop.select2-drop-above {
    border-top: 1px solid #cbd5e1 !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.1) !important;
}

/* v3 search input inside dropdown */
body.dm-app-theme #select2-drop .select2-search input.select2-input,
body.dm-app-theme .select2-drop .select2-search input.select2-input {
    height: 34px !important;
    padding: 6px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* v3 inside input-group — left corners squared */
body.dm-app-theme .input-group .select2-container .select2-choice {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ========================================================================== */
/* 8. Select2 v4 — trigger + dropdown styling                                */
/* ========================================================================== */

body.dm-app-theme .select2-container--default .select2-selection--single {
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.dm-app-theme .select2-container--default .select2-dropdown {
    border: 1px solid #cbd5e1 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1) !important;
}

body.dm-app-theme .select2-container--default .select2-search--dropdown .select2-search__field {
    height: 34px !important;
    padding: 6px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* v4 inside input-group */
body.dm-app-theme .input-group .select2-container--default {
    display: table-cell !important;
    width: 100% !important;
    vertical-align: middle !important;
}

body.dm-app-theme .input-group .select2-container--default .select2-selection--single {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}