/* =================================================== GLOBAL SELECT2 + MODAL Z-INDEX FIX Bootstrap z-index reference: Sidebar / Topbar : 999 - 1002 Bootstrap dropdown : 1000 Modal backdrop : 1050 Modal : 1055 =================================================== */ /* Select2 on the main page — above sidebar/topbar, below modal */ .select2-container { z-index: 1031; } .select2-dropdown { z-index: 1031 !important; } /* * KEY FIX: when a modal is open (body.modal-open), * the Select2 dropdown (appended to , NOT inside .modal) * must appear ABOVE the modal (1055) and its backdrop (1050). * Selectors like ".modal .select2-dropdown" do NOT work here. */ body.modal-open .select2-dropdown { z-index: 1300 !important; } body.modal-open .select2-container--open { z-index: 1300 !important; } /* Bootstrap modal stacking — must be above sidebar (z-index: 1100) */ .modal { z-index: 1200 !important; } .modal-backdrop { z-index: 1150 !important; } /* Nested modal (e.g. unit picker inside event modal) must be above parent modal */ #modalSelectUnits { z-index: 1350 !important; } /* Backdrop for nested modal — Bootstrap appends multiple backdrops; the second one needs to sit between parent modal (1200) and child modal (1350) */ .modal-backdrop ~ .modal-backdrop { z-index: 1300 !important; }