/* ============================================
   NATIVE SELECT STYLES (WITHOUT PLUGIN)
   ============================================ */

/* Disabled select cursor style */
select[disabled]:not([data-select2-id]):not(.selectpicker) {
    opacity: 1 !important; /* Override Bootstrap's default opacity */
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
    cursor: not-allowed !important;
}

/* Custom styling for single-select dropdowns */
select:not([multiple]):not(.dt-input):not([data-select2-id]):not(.selectpicker) {
    /* Input field spacing and sizing */
    padding: 0px 10px !important; /* Extra right padding for custom arrow */
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    /* Custom dropdown arrow using SVG data URI */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    /* Remove default browser select arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Arrow direction when native select is open */
.fsNativeSelectOpen:not([multiple]):not(.dt-input):not([data-select2-id]):not(.selectpicker) {
    /* Flipped arrow pointing upward */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5l4-4 4 4' stroke='%23666' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Overwrite styles for hebrew */
/* Custom styling for single-select dropdowns */
.fsHebrewBody select:not([multiple]):not(.dt-input):not([data-select2-id]):not(.selectpicker) {
    background-position: left 8px center;
}

/* ============================================
   BOOTSTRAP SELECT PLUGIN STYLES
   ============================================ */

/* Default dropdown menu max-width */
.bootstrap-select:not(:has(.fsSelectPickerWidthContent)) .dropdown-menu {
    max-width: 100%;
}

/* Wider dropdown menu for content-width variant */
.bootstrap-select:has(.fsSelectPickerWidthContent) .dropdown-menu {
    max-width: 80vw; /* 80% of viewport width */
}

/* Disabled state styling for Bootstrap Select */
.bootstrap-select .btn.dropdown-toggle.disabled.btn-light, .bootstrap-select .btn.dropdown-toggle[disabled] {
    opacity: 1 !important; /* Override Bootstrap's default opacity */
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
    cursor: not-allowed !important;
}

/* Custom dropdown arrow for Bootstrap Select */
.bootstrap-select .dropdown-toggle:not(.fsComponentLoaderElement):not([data-id="fsSearchBoxReports"])::after {
    /* Reset Bootstrap's default arrow properties */
    width: unset;
    height: unset;
    /* Custom SVG arrow icon */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M15 1.5L8 8.5L1 1.5' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* Remove Bootstrap's default border-based arrow */
    border-top: none;
    border-bottom: none;
    /* Smooth rotation animation */
    transition: transform 0.3s ease, border-color 0.3s ease;
    margin-right: -7px;
}

/* Rotate arrow when dropdown is open */
.bootstrap-select.show > .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Prevent arrow rotation for search box reports dropdown */
.bootstrap-select.show > .dropdown-toggle[data-id="fsSearchBoxReports"]::after {
    transform: unset !important;
}

/* Custom search icon for reports search box */
.bootstrap-select .dropdown-toggle[data-id="fsSearchBoxReports"]:not(.fsComponentLoaderElement)::after {
    /* Search icon SVG instead of dropdown arrow */
    content: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 21.5L15 15.5M17 10.5C17 14.366 13.866 17.5 10 17.5C6.13401 17.5 3 14.366 3 10.5C3 6.63401 6.13401 3.5 10 3.5C13.866 3.5 17 6.63401 17 10.5Z' stroke='%23A9ADB7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    border-top: none;
    margin-bottom: 1.5rem;
    margin-right: 13px;
}

/* Overwrite styles for hebrew */
.fsHebrewBody .bootstrap-select .dropdown-toggle .filter-option {
    text-align: right;
}

/* Overwrite styles for hebrew */
.fsHebrewBody .bootstrap-select .dropdown-menu {
    text-align: right !important;
}

/* ============================================
   SELECT2 PLUGIN STYLES
   ============================================ */

/* Base Select2 container width overrides */
.select2-container {
    width: unset !important; /* Override inline width */
    min-width: unset !important;
    display: block !important;
}

    /* Placeholder text styling */
    .select2-container .select2-selection__placeholder {
        line-height: 26px;
        font-size: 16px;
    }

    .select2-container .select2-selection__rendered {
        font-size: 16px;
        margin-left: -7px;
        line-height: 26px !important;
    }

    /* ============================================
    SELECT2 SINGLE SELECT STYLES
    ============================================ */

    .select2-container .select2-selection--single {
        height: 40px !important; /* Fixed height for consistency */
        border: 1px solid #ced4da !important;
    }

        /* Arrow container positioning */
        .select2-container .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
            margin-right: 10px;
        }

            /* Custom arrow icon for single select */
            .select2-container .select2-selection--single .select2-selection__arrow b {
                /* Smooth rotation animation */
                transition: transform 0.3s ease, border-color 0.3s ease;
                /* Remove default Select2 arrow styles */
                border-color: unset !important;
                border-style: unset !important;
                border-width: unset !important;
                /* Custom SVG arrow */
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M15 1.5L8 8.5L1 1.5' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                /* Positioning */
                top: 18px !important;
                border: none;
                height: max-content !important;
                width: max-content !important;
                left: inherit !important;
                right: 0px;
            }

/* Arrow rotation when single select dropdown is open */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: translateY(-50%) rotate(180deg);
    border-color: transparent transparent #007bff transparent !important;
}

/* Responsive padding adjustment for dropdown options */
@media (max-width: 1850px) {
    .select2-container--bootstrap .select2-results__option {
        padding: 0px 12px;
    }
}

/* RTL (Right-to-Left) support for single select arrow */
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow b {
    left: 0px;
    right: -12px !important;
}

/* RTL support for single select text padding */
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 0px;
    padding-left: 28px;
}


/* ============================================
   SELECT2 MULTIPLE SELECT STYLES
   ============================================ */

.select2-container .select2-selection--multiple {
    min-height: 40px !important; /* Minimum height, can expand with selections */
    border: 1px solid #ced4da !important;
}

    /* Disabled state cursor for multiple select search field */
    .select2-container .select2-selection--multiple[aria-disabled="true"] .select2-search__field {
        cursor: not-allowed;
    }

    /* Custom dropdown arrow for multiple select */
    .select2-container .select2-selection--multiple:after {
        /* SVG arrow icon */
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M15 1.5L8 8.5L1 1.5' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        /* Positioning */
        position: absolute;
        right: 10px;
        top: 11px;
        /* Smooth rotation animation */
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    /* Search field styling within multiple select */
    .select2-container .select2-selection--multiple .select2-search__field {
        line-height: 26px;
        font-size: 16px !important;
        cursor: pointer;
    }

    /* Clear all button spacing (add margin to avoid overlap with arrow) */
    .select2-container .select2-selection--multiple .select2-selection__clear {
        margin-right: 30px !important;
    }

    /* Placeholder text color for multiple select search field */
    .select2-container .select2-selection--multiple .select2-search__field::placeholder {
        color: #999;
    }

/* Rotate arrow when multiple select dropdown is open */
.select2-container--open .select2-selection--multiple:after {
    transform: rotate(180deg);
}


/* ============================================
   JS TREE MULTIPLE SELECT STYLES
   ============================================ */
/* Chip container base */
.fs-pills-container {
    position: relative; /* necesario para posicionar la flecha */
    padding-right: 36px !important; /* espacio para la flecha */
    cursor: pointer !important;
}

    /* Arrow as a pseudo-element (animatable) */
    .fs-pills-container::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 16px;
        height: 10px;
        transform: translateY(-50%) rotate(0deg); /* flecha hacia abajo */
        transition: transform 180ms ease; /* animación suave */
        pointer-events: none; /* no bloquea clics */
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 10px;
        /* SVG flecha abajo */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M15 1.5L8 8.5L1 1.5' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

/* When the popup is open, we rotate it 180° (up arrow) */
.fs-open .fs-pills-container::after {
    transform: translateY(-50%) rotate(180deg);
}

.fs-tree-host.fs-disabled .fs-pills-container {
    cursor: not-allowed;
}

    .fs-tree-host.fs-disabled .fs-pills-container::after {
        opacity: .5;
    }

/* ============================================
   JS TREE SINGLE SELECT STYLES
   ============================================ */

/* The host that wraps the input */
.fs-tree-host.single {
    position: relative;
    width: 100%;
}

    /* Leaves room for the arrow and gives the dropdown */
    .fs-tree-host.single .fsTreeSelect.form-control {
        padding-right: 36px;
        cursor: pointer;
    }

    /* Arrow (down by default) */
    .fs-tree-host.single::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 16px;
        height: 10px;
        transform: translateY(-50%) rotate(0deg); /* ↓ */
        transition: transform 180ms ease;
        pointer-events: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 10px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M15 1.5L8 8.5L1 1.5' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* When the popup is open, rotate the arrow (↑) */
    .fs-tree-host.single.fs-open::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Optional states */
    .fs-tree-host.single .fsTreeSelect.form-control:disabled {
        cursor: not-allowed;
    }

    .fs-tree-host.single:has(.fsTreeSelect.form-control:disabled)::after {
        opacity: .5;
    }

.fsTemplateComponentTree {
    position: absolute !important;
    top: 100% !important;
    left: 0px !important;
}

/* Overwrite styles for hebrew */
/* Leaves room for the arrow and gives the dropdown */
.fsHebrewBody .fs-tree-host.single .fsTreeSelect.form-control {
    padding-right: 10px !important;
}

/* Overwrite styles for hebrew */
/* Arrow (down by default) */
.fsHebrewBody .fs-tree-host.single::after {
    left: 10px !important;
    right: auto !important;
}