/**
 * Select2 Multiple Selection Display Fixes
 * This file fixes the issue where selected tags render outside the selection box
 * It must be loaded AFTER the base Select2 CSS
 * 
 * Uses [dir=ltr] attribute selectors to match specificity of base select2.css
 */

/* CRITICAL: Override the inline width:auto that Select2 sets */
[dir=ltr] .search-form .select2-container,
[dir=ltr] .search-form .select2-container--bootstrap4,
[dir=ltr] .select2-container.select2-container--bootstrap4,
[dir] .search-form .select2-container,
[dir] .select2-container {
    width: 100% !important;
    display: block !important;
}

/* Force the selection container to properly contain its children */
/* CRITICAL: Ensure proper containment and prevent child overflow */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--multiple,
[dir=ltr] .select2-container .select2-selection--multiple,
[dir] .select2-container--bootstrap4 .select2-selection--multiple,
[dir] .select2-container .select2-selection--multiple,
.select2-container--bootstrap4 .select2-selection--multiple,
.select2-container .select2-selection--multiple {
    height: auto !important;
    min-height: 38px !important;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
}

/* Ensure the rendered selections container displays properly */
/* CRITICAL: Override the negative margin from select2.css that causes left overflow */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered,
[dir=ltr] .select2-container .select2-selection--multiple .select2-selection__rendered,
[dir] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered,
[dir] .select2-container .select2-selection--multiple .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 2px 25px 2px 2px !important;
    margin: 0 !important;  /* Override the negative margin from select2.css */
    margin-left: 0 !important;  /* Explicitly reset left margin */
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    list-style: none !important;
    min-height: 28px !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    align-items: center !important;
}

/* Style the selected choice tags to be visible */
/* CRITICAL: Override any negative margins that cause positioning issues */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
[dir=ltr] .select2-container .select2-selection--multiple .select2-selection__choice,
[dir] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
[dir] .select2-container .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
.select2-container .select2-selection--multiple .select2-selection__choice,
.select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;  /* Reset all margins - parent uses gap for spacing */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 2px 22px 2px 8px !important;
    background-color: #e4e6eb !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #272c33 !important;
    position: relative !important;
    float: none !important;  /* Remove any float */
    max-width: calc(100% - 30px) !important;
    overflow: hidden !important;  /* Contain the text within the tag */
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* Ensure text content inside choice tag doesn't overflow */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice > span:not(.select2-selection__choice__remove),
[dir=ltr] .select2-container .select2-selection--multiple .select2-selection__choice > span:not(.select2-selection__choice__remove),
[dir] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice > span:not(.select2-selection__choice__remove),
[dir] .select2-container .select2-selection--multiple .select2-selection__choice > span:not(.select2-selection__choice__remove),
.select2-selection--multiple .select2-selection__choice > span:not(.select2-selection__choice__remove) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: 100% !important;
}

/* Position the remove button inside the tag */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove,
[dir=ltr] .select2-container .select2-selection--multiple .select2-selection__choice__remove,
[dir] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove,
[dir] .select2-container .select2-selection--multiple .select2-selection__choice__remove,
.select2-selection--multiple .select2-selection__choice__remove {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6c757d !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: bold !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    order: unset !important;
}

[dir=ltr] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover,
[dir=ltr] .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover,
[dir] .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #dc3545 !important;
}

/* Clear all button positioning */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,
[dir=ltr] .select2-container .select2-selection--multiple .select2-selection__clear,
[dir] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear,
[dir] .select2-container .select2-selection--multiple .select2-selection__clear,
.select2-selection--multiple .select2-selection__clear {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: #6c757d !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

/* Search input styling */
/* CRITICAL: Override any negative margins from select2.css */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline,
[dir=ltr] .select2-container .select2-selection--multiple .select2-search--inline,
[dir] .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline,
[dir] .select2-container .select2-selection--multiple .select2-search--inline,
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline,
.select2-container .select2-selection--multiple .select2-search--inline,
.select2-selection--multiple .select2-search--inline {
    display: inline-flex !important;
    margin: 0 !important;  /* Reset all margins */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    float: none !important;  /* Remove any float */
    flex-grow: 1 !important;
    min-width: 30px !important;
}

[dir=ltr] .select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field,
[dir=ltr] .select2-container .select2-selection--multiple .select2-search--inline .select2-search__field,
[dir] .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Ensure parent containers don't clip the Select2 */
[dir] .search-form,
[dir] .accordion,
[dir] .accordion__menu,
[dir] .card,
[dir] .card-body,
.search-form,
.accordion,
.accordion__menu,
.card,
.card-body {
    overflow: visible !important;
}

/* High z-index for dropdowns */
[dir] .select2-container--open .select2-dropdown,
.select2-container--open .select2-dropdown {
    z-index: 9999 !important;
}

/* Specifically target the span.selection wrapper */
[dir] .select2-container .selection,
.select2-container .selection {
    display: block !important;
    width: 100% !important;
}

/* ============================================
   Toast Notification Positioning Fixes
   ============================================ */

/* Ensure toast container is positioned at top-right */
.toast-container.position-fixed.top-0.end-0,
.toast-container.position-fixed.p-3.top-0.end-0,
#toast-orchestrator-container .toast-container {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    z-index: 9999 !important;
}

/* Ensure toasts are visible above modals */
.toast.show {
    z-index: 10000 !important;
}

/* Fix for orchestrator container positioning */
#toast-orchestrator-container {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    z-index: 10000 !important;
    pointer-events: none !important;
}

#toast-orchestrator-container .toast-container {
    pointer-events: auto !important;
}

#toast-orchestrator-container .toast {
    pointer-events: auto !important;
}

/* ============================================
   Toast Styling Fixes for BootstrapVueNext
   ============================================ */

/* Success toast styling - green background */
.toast.text-bg-success,
.toast[class*="success"],
.toast.bg-success {
    background-color: #198754 !important;
    color: #fff !important;
    border-color: #198754 !important;
}

.toast.text-bg-success .toast-header,
.toast[class*="success"] .toast-header,
.toast.bg-success .toast-header {
    background-color: rgba(25, 135, 84, 0.9) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.toast.text-bg-success .toast-body,
.toast[class*="success"] .toast-body,
.toast.bg-success .toast-body {
    color: #fff !important;
}

/* Danger/Error toast styling - red background */
.toast.text-bg-danger,
.toast[class*="danger"],
.toast.bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}

.toast.text-bg-danger .toast-header,
.toast[class*="danger"] .toast-header,
.toast.bg-danger .toast-header {
    background-color: rgba(220, 53, 69, 0.9) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.toast.text-bg-danger .toast-body,
.toast[class*="danger"] .toast-body,
.toast.bg-danger .toast-body {
    color: #fff !important;
}

/* Toast close button styling */
.toast .toast-header .btn-close,
.toast .toast-header button[aria-label="Close"],
.toast .toast-header [data-bs-dismiss="toast"] {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    filter: invert(1) !important;
    opacity: 0.8 !important;
}

.toast .toast-header .btn-close:hover,
.toast .toast-header button[aria-label="Close"]:hover {
    opacity: 1 !important;
}

/* Toast header layout */
.toast .toast-header {
    position: relative !important;
    padding-right: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
}

/* General toast styling improvements */
.toast {
    min-width: 300px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   Interest/Behavior Suggestion Dropdown Fixes
   ============================================ */

/* Ensure suggestion items have proper hover colors */
.modal .border.rounded.bg-white.shadow-sm .px-3.py-2.cursor-pointer:hover,
.modal .border.rounded.bg-white.shadow-sm .px-3.py-2.cursor-pointer.bg-primary {
    background-color: #0d6efd !important;
    color: #fff !important;
}

/* Override text-muted on hover */
.modal .border.rounded.bg-white.shadow-sm .px-3.py-2.cursor-pointer:hover .text-muted,
.modal .border.rounded.bg-white.shadow-sm .px-3.py-2.cursor-pointer.bg-primary .text-muted,
.modal .border.rounded.bg-white.shadow-sm .px-3.py-2.cursor-pointer:hover small,
.modal .border.rounded.bg-white.shadow-sm .px-3.py-2.cursor-pointer.bg-primary small {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Ensure font-weight-bold text is visible on hover */
.modal .border.rounded.bg-white.shadow-sm .px-3.py-2.cursor-pointer:hover .font-weight-bold,
.modal .border.rounded.bg-white.shadow-sm .px-3.py-2.cursor-pointer.bg-primary .font-weight-bold {
    color: #fff !important;
}

/* Fix bg-primary to use proper Bootstrap blue color */
.bg-primary {
    background-color: #0d6efd !important;
}

/* Fix text-white to ensure it's white */
.text-white {
    color: #fff !important;
}

/* ============================================
   Single Select Styling Fixes
   ============================================ */

/* Single select container - ensure proper layout */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--single,
[dir=ltr] .select2-container .select2-selection--single,
[dir] .select2-container--bootstrap4 .select2-selection--single,
[dir] .select2-container .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--single,
.select2-container .select2-selection--single {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.375rem 2rem 0.375rem 0.75rem !important;
    position: relative !important;
}

/* Single select rendered text - proper inline display */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
[dir=ltr] .select2-container .select2-selection--single .select2-selection__rendered,
[dir] .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
[dir] .select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
    color: #272c33 !important;
}

/* Single select clear button - position on the right */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--single .select2-selection__clear,
[dir=ltr] .select2-container .select2-selection--single .select2-selection__clear,
[dir] .select2-container--bootstrap4 .select2-selection--single .select2-selection__clear,
[dir] .select2-container .select2-selection--single .select2-selection__clear,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear,
.select2-container .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 25px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #6c757d !important;
    cursor: pointer !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    order: unset !important;
}

[dir=ltr] .select2-container--bootstrap4 .select2-selection--single .select2-selection__clear:hover,
[dir=ltr] .select2-container .select2-selection--single .select2-selection__clear:hover,
.select2-selection--single .select2-selection__clear:hover {
    color: #dc3545 !important;
}

/* Hide the default arrow for single select (optional - if you want cleaner look) */
/* Uncomment below if you don't want the dropdown arrow */
/*
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,
.select2-container .select2-selection--single .select2-selection__arrow {
    display: none !important;
}
*/

/* Ensure single select placeholder displays correctly */
[dir=ltr] .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder,
[dir=ltr] .select2-container .select2-selection--single .select2-selection__placeholder,
.select2-selection--single .select2-selection__placeholder {
    color: #949595 !important;
}