/* Hide default bootstrap-select checkmarks */
.bootstrap-select .dropdown-menu li.selected > a .bs-ok-default,
.bootstrap-select .dropdown-menu li.selected > a .glyphicon-ok,
.bootstrap-select .dropdown-menu li.selected > a .check-mark {
    display: none !important;
}
/* Custom checkmark for ALL selected items using SVG */
.bootstrap-select .dropdown-menu li.selected > a::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
/* When single select (black bg), checkmark should be white */
.bootstrap-select .dropdown-menu li.selected:not(.multiple-selected) > a {
    background: #000 !important;
    color: #E6E6E6 !important;
    padding: 6px 8px !important
}

    .bootstrap-select .dropdown-menu li.selected:not(.multiple-selected) > a::before {
        filter: brightness(0) invert(1);
    }
/* When multiple selected (white bg), checkmark should be black */
.bootstrap-select .dropdown-menu li.selected.multiple-selected > a {
    background: #fff !important;
    color: #000 !important;
}

    .bootstrap-select .dropdown-menu li.selected.multiple-selected > a::before {
        filter: brightness(0);
    }
    /* Hover state for multi-selected items (black bg, white text and checkmark) */
    .bootstrap-select .dropdown-menu li.selected.multiple-selected:hover > a,
    .bootstrap-select .dropdown-menu li.selected.multiple-selected > a:hover {
        background: #000 !important;
        color: #fff !important;
    }

        .bootstrap-select .dropdown-menu li.selected.multiple-selected:hover > a::before,
        .bootstrap-select .dropdown-menu li.selected.multiple-selected > a:hover::before {
            filter: brightness(0) invert(1);
        }
/* When hovering any item, selected item checkmarks should be black */
.bootstrap-select .dropdown-menu:has(li:hover) li.selected:not(:hover) > a::before {
    filter: brightness(0) !important;
}
/* When hovering any item, remove background from selected items */
.bootstrap-select .dropdown-menu:has(li:hover) li.selected:not(:hover) > a {
    background: transparent !important;
    color: #374151 !important;
}

.dropdown-toggle {
    background-color: unset !important;
}

    .dropdown-toggle:hover {
        border: unset !important;
    }

.filter-option {
    border: unset !important;
}

.dropdown-toggle:focus {
    border: unset !important;
    outline: unset !important
}

.bootstrap-select .dropdown-toggle:focus {
    outline: unset !important;
}

.dropdown.bootstrap-select:hover {
    background: black !important;
    color: white !important;
}

.dropdown.bootstrap-select.show-tick.inline-flex.items-center.justify-between.w-full.h-9.px-4.py-2.gap-2.whitespace-nowrap.rounded-md.text-sm.font-medium.border.bg-background.shadow-sm.transition-colors.hover\:bg-accent.hover\:text-accent-foreground.focus-visible\:outline-none.focus-visible\:ring-1.focus-visible\:ring-ring.disabled\:pointer-events-none.disabled\:opacity-50.border-\[1px\].border-\[\#d7d8da\].\[\&_svg\]\:pointer-events-none.\[\&_svg\]\:size-4.\[\&_svg\]\:shrink-0.\[\&_\.opacity-80\]\:hover\:opacity-90.\[\&_\.text-muted-foreground\]\:hover\:text-accent-foreground:hover .filter-option {
    color: white !important;
}
/* Make sibling SVG white when dropdown is hovered */
.relative:has(.dropdown.bootstrap-select:hover) > .lucide-chevrons-up-down {
    stroke: white !important;
}

.lucide-chevrons-up-down {
    transition: stroke 0.2s;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    width: 93% !important;
    color: #3d3f42 !important;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.dropdown.bootstrap-select:hover .filter-option-inner-inner {
    color: white !important;
}
/* Dropdown options styling */
.bootstrap-select .dropdown-menu li > a {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: #09090b !important;
    padding: 6px 8px !important;
}
.bootstrap-select .bs-searchbox input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23999' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 10px center;
    padding-left: 35px !important;
}
/* Bootstrap-select custom CSS for arrow controls */
.bootstrap-select .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.bootstrap-select .dropdown-toggle {
    position: relative;
    width: 100%;
}

.bootstrap-select.show .dropdown-toggle::after {
    transform: rotate(-180deg);
}

.bootstrap-select .dropdown-menu {
    min-width: 100%;
}

    .bootstrap-select .dropdown-menu .active {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    .bootstrap-select .dropdown-menu li.selected:not(.multiple-selected) .active > a::before {
        filter: brightness(0) invert(1);
    }

    /* Ensure dropdown menu appears correctly */
    .bootstrap-select .dropdown-menu.show {
        display: block;
    }

.bootstrap-select .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0.25rem;
}

    /* Dropdown item styles */
    .bootstrap-select .dropdown-menu li a {
        display: block;
        width: 100%;
        padding: 0.25rem 1.5rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
    }

        .bootstrap-select .dropdown-menu li a:hover,
        .bootstrap-select .dropdown-menu li a:focus {
            color: #16181b;
            text-decoration: none;
            background-color: #f8f9fa;
        }

    .bootstrap-select .dropdown-menu li.selected a {
        background-color: #007bff;
        color: #fff;
    }

/* Search box in dropdown */
.bootstrap-select .bs-searchbox {
    padding: 4px 8px;
}

    .bootstrap-select .bs-searchbox .form-control {
        width: 100%;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }

/* Action buttons (Select All/Deselect All) */
.bootstrap-select .bs-actionsbox {
    width: 100%;
    padding: 4px 8px;
}

    .bootstrap-select .bs-actionsbox .btn-group button {
        width: 50%;
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        border: 1px solid #ced4da;
        background-color: #fff;
        color: #212529;
    }

        .bootstrap-select .bs-actionsbox .btn-group button:hover {
            background-color: #e9ecef;
        }