/* Reset default vue-select option padding for material category select only */
/* Target the dropdown options for the specific material category select */
.material-category-select .vs__dropdown-option {
    padding: 0 !important;
}

/* Alternative: Target by the specific input ID's parent dropdown */
#material-category-select ~ .vs__dropdown-menu .vs__dropdown-option {
    padding: 0 !important;
}

.category-group {
    background-color: var(--bs-primary);
}

/* Custom styling for grouped options */
.group-header {
    font-weight: 600;
    color: var(--bs-gray-700);
    background: var(--bs-gray-100);
    display: block;
    padding: 8px 12px;
    margin: 0;
    pointer-events: none;
    cursor: default;
    border-bottom: 1px solid var(--bs-gray-200);
}

.group-item {
    padding: 8px 12px 8px 24px;
    color: var(--bs-body-color);
    display: block;
    transition: background-color 0.2s ease;
}

.group-item:hover {
    background-color: var(--bs-gray-50);
}

/* Style the dropdown option that contains a group header - works with append-to-body */
.vs__dropdown-option .group-header {
    background: var(--bs-gray-100) !important;
    font-weight: 600;
    color: var(--bs-gray-700);
    padding: 8px 12px;
    margin: 0;
    pointer-events: none;
    cursor: default;
    border-bottom: 1px solid var(--bs-gray-200);
}

/* Style the dropdown option that contains a group item - works with append-to-body */
.vs__dropdown-option .group-item {
    padding: 5px;
    color: var(--bs-body-color);
}

/* Make the entire option row non-selectable when it's a group header - works with append-to-body */
.vs__dropdown-option:has(.group-header) {
    background: var(--bs-gray-100) !important;
    pointer-events: none !important;
    cursor: default !important;
    padding: 0 !important;
}