/* Dark Mode Styles for #mydataTable */
html[data-theme="dark"] #mydataTable {
    background-color: #1b2431 !important;
    color: #fff !important;
}

html[data-theme="dark"] #mydataTable > thead > tr,
html[data-theme="dark"] #mydataTable > thead > tr > th {
    background-color: #1b2431 !important;
    color: #fff !important;
    border-color: #444 !important;
}

html[data-theme="dark"] #mydataTable > tbody > tr,
html[data-theme="dark"] #mydataTable > tbody > tr > td {
    background-color: #273142 !important;
    color: #fff !important;
    border-color: #444 !important;
}

html[data-theme="dark"] #mydataTable > tbody > tr:hover {
    background-color: #555 !important;
}


/* Dark Mode Styles for all .table */

html[data-theme="dark"] .table {
    background-color: #1b2431 !important;
    color: #fff !important;
}

html[data-theme="dark"] .table > thead > tr,
html[data-theme="dark"] .table > thead > tr > th {
    background-color: #1b2431 !important;
    color: #fff !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .table > tbody > tr,
html[data-theme="dark"] .table > tbody > tr > td {
    background-color: #273142 !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* Striped rows for .table-striped in dark mode */
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2f3b4a !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #273142 !important;
}

html[data-theme="dark"] .table > tbody > tr:hover {
    background-color: #555 !important;
}

/* AdminLTE Select2 Purple Theme */
/* For the selected items in the multi-select */
select.select2 .select2-purple{
    width:100% !important;
}
select::placeholder{
    width:100% !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice.select2-purple {
    background-color: #6f42c1 !important; /* Purple background */
    border: 1px solid #6f42c1 !important; /* Purple border */
    color: #fff !important; /* White text */
    width:100% !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove.select2-purple {
    color: rgba(255, 255, 255, 0.7) !important; /* Slightly transparent white for 'X' */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove.select2-purple:hover {
    color: #fff !important; /* Full white color on hover */
}

/* Ensuring dropdown menu reflects purple theme */
.select2-container--default .select2-dropdown.select2-purple .select2-results__option--highlighted[aria-selected] {
    background-color: #6f42c1 !important; /* Purple background for highlighted item */
    color: #fff !important; /* White text */
}

/* Ensuring dropdown arrow matches the purple theme */
.select2-container--default .select2-selection--single.select2-purple .select2-selection__arrow b {
    border-color: #6f42c1 transparent transparent transparent !important; /* Purple arrow */
}

/* For the placeholder in single select */
.select2-container--default .select2-selection--single.select2-purple .select2-selection__rendered {
    color: #6f42c1 !important; /* Purple text color */
}

/* For the selected item in the single select */
.select2-container--default .select2-selection--single.select2-purple .select2-selection__rendered.select2-purple {
    background-color: #6f42c1 !important; /* Purple background */
    color: #fff !important; /* White text */
    border-radius: 0.375rem !important; /* Rounded corners */
    padding: 0.375rem 0.75rem !important; /* Padding to match Bootstrap */
}

/* For hover state */
.select2-container--default .select2-selection--multiple.select2-purple:hover,
.select2-container--default .select2-selection--single.select2-purple:hover {
    border-color: #d63384 !important; /* Darker purple on hover */
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25) !important; /* Purple focus shadow */
}

/* Purple background for selected items in multi-select */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #6f42c1 !important; /* Purple background */
    border: 1px solid #6f42c1 !important; /* Purple border */
    color: #fff !important; /* White text */
    border-radius: 0.25rem; /* Slightly rounded corners */
    padding: 0.25rem 0.5rem; /* Padding inside each tag */
}

/* Hover effect for the 'x' button on selected items */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.7) !important; /* Slightly transparent white for 'X' */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff !important; /* Full white on hover */
}

/* Purple background for highlighted options in dropdown */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #6f42c1 !important; /* Purple background */
    color: #fff !important; /* White text */
}

/* Dropdown arrow in purple */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6f42c1 transparent transparent transparent !important; /* Purple arrow */
}

/* Placeholder and selected item text color */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #6f42c1 !important; /* Purple text */
}

/* Single select item with purple background */
.select2-container--default .select2-selection--single.select2-purple .select2-selection__rendered {
    background-color: #6f42c1 !important; /* Purple background */
    color: #fff !important; /* White text */
    padding: 0.375rem 0.75rem !important; /* Padding to match Bootstrap */
    border-radius: 0.375rem !important; /* Rounded corners */
}
