/* ============================================
   BLUE TO TEAL CONVERSION FOR ALL FILTERS
   Author: 4Born Technologies
   Version: 1.0 - Force Override Blue to Teal
   Description: Converts all blue filter elements to teal theme
   ============================================ */

/* ============================================
   TEAL COLOR VARIABLES
   ============================================ */
:root {
    --teal-primary: #14B8A6;
    --teal-primary-dark: #0D9488;
    --teal-primary-light: #2DD4BF;
    --teal-bg: rgba(20, 184, 166, 0.1);
    --teal-bg-medium: rgba(20, 184, 166, 0.15);
    --teal-bg-strong: rgba(20, 184, 166, 0.25);
}

/* ============================================
   RADIO BUTTONS - FORCE TEAL
   ============================================ */

input[type="radio"],
.form-check-input[type="radio"] {
    accent-color: var(--teal-primary) !important;
}

input[type="radio"]:checked {
    background-color: var(--teal-primary) !important;
    border-color: var(--teal-primary) !important;
}

input[type="radio"]:focus {
    border-color: var(--teal-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--teal-bg) !important;
}

/* ============================================
   SELECT BOXES - DROPDOWN HIGHLIGHT TEAL
   ============================================ */

/* Select element focus */
select,
select.form-control,
select.form-select {
    transition: all 0.3s ease;
}

select:focus,
select.form-control:focus,
select.form-select:focus {
    border-color: var(--teal-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--teal-bg) !important;
    outline: none !important;
}

/* Select options - Override blue highlight with lighter teal */
select option:checked,
select option:hover,
select option:focus,
select option[selected] {
    background-color: rgba(20, 184, 166, 0.15) !important;
    background: rgba(20, 184, 166, 0.15) !important;
    color: #0D9488 !important;
    font-weight: 500 !important;
}

/* For browsers that support it */
select option {
    background-color: white;
    color: #333;
    padding: 10px;
}

/* Force accent-color for native picker highlights where supported */
select,
.form-select,
.form-control {
    accent-color: var(--teal-primary) !important;
}

/* ============================================
   DROPDOWN MENUS (Bootstrap/Custom) - TEAL
   ============================================ */

/* Dropdown items hover/active state - lighter teal */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background-color: rgba(20, 184, 166, 0.15) !important;
    color: #0D9488 !important;
    font-weight: 500 !important;
}

/* Dropdown menu items */
.dropdown-menu .dropdown-item:hover {
    background-color: rgba(20, 184, 166, 0.15) !important;
    color: #0D9488 !important;
}

/* Select2 / Chosen / Custom Select Dropdowns - lighter teal */
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"],
.chosen-results li.highlighted,
.custom-select-option:hover,
.custom-select-option.selected {
    background-color: rgba(20, 184, 166, 0.15) !important;
    color: #0D9488 !important;
    font-weight: 500 !important;
}

/* ============================================
   DATE PICKER / CALENDAR - TEAL
   ============================================ */

/* Flatpickr Calendar - Selected Dates */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--teal-primary) !important;
    border-color: var(--teal-primary) !important;
    color: white !important;
}

/* Flatpickr Today */
.flatpickr-day.today {
    border-color: var(--teal-primary) !important;
}

.flatpickr-day.today:hover,
.flatpickr-day.today.selected {
    background: var(--teal-primary) !important;
    color: white !important;
}

/* Flatpickr Month Header */
.flatpickr-months .flatpickr-month,
.flatpickr-current-month {
    background-color: var(--teal-primary) !important;
}

/* Flatpickr In Range */
.flatpickr-day.inRange {
    background-color: var(--teal-bg-medium) !important;
    border-color: var(--teal-bg-medium) !important;
    box-shadow: -5px 0 0 var(--teal-bg-medium), 5px 0 0 var(--teal-bg-medium) !important;
}

/* Flatpickr Hover */
.flatpickr-day:hover {
    background-color: var(--teal-bg) !important;
    border-color: var(--teal-primary-light) !important;
}

/* Date Input Focus */
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus {
    border-color: var(--teal-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--teal-bg) !important;
    outline: none !important;
}

/* Native Month/Date Picker Calendar Styling */
/* WebKit browsers (Chrome, Safari, Edge) */
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: none;
}

/* Month picker calendar popup */
input[type="month"]::-webkit-datetime-edit-month-field:focus,
input[type="month"]::-webkit-datetime-edit-year-field:focus {
    background-color: var(--teal-primary) !important;
    color: white !important;
}

/* Style the calendar icon */
input[type="month"]::-webkit-calendar-picker-indicator:hover {
    background-color: var(--teal-bg) !important;
    border-radius: 4px;
}

/* Force accent color for native pickers (Chrome 93+, Edge 93+) */
input[type="month"],
input[type="date"],
input[type="datetime-local"],
input[type="week"],
input[type="time"] {
    accent-color: var(--teal-primary) !important;
    color-scheme: light;
}

/* ============================================
   GENERIC BLUE TO TEAL OVERRIDES
   ============================================ */

/* Override any blue backgrounds */
*[style*="background-color: rgb(0, 123, 255)"],
*[style*="background-color: #007bff"],
*[style*="background-color: blue"],
*[style*="background: rgb(0, 123, 255)"],
*[style*="background: #007bff"],
*[style*="background: blue"] {
    background-color: var(--teal-primary) !important;
}

/* Override any blue borders */
*[style*="border-color: rgb(0, 123, 255)"],
*[style*="border-color: #007bff"],
*[style*="border-color: blue"] {
    border-color: var(--teal-primary) !important;
}

/* Override any blue text */
*[style*="color: rgb(0, 123, 255)"],
*[style*="color: #007bff"],
*[style*="color: blue"] {
    color: var(--teal-primary) !important;
}

/* ============================================
   BOOTSTRAP OVERRIDES - BLUE TO TEAL
   ============================================ */

/* Bootstrap Primary Color Override */
.btn-primary,
.bg-primary,
.badge-primary,
.alert-primary,
.border-primary {
    background-color: var(--teal-primary) !important;
    border-color: var(--teal-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--teal-primary-dark) !important;
    border-color: var(--teal-primary-dark) !important;
}

.text-primary {
    color: var(--teal-primary) !important;
}

/* Bootstrap Links */
a.text-primary:hover,
a.text-primary:focus {
    color: var(--teal-primary-dark) !important;
}

/* ============================================
   FORM CONTROLS - FOCUS STATES
   ============================================ */

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    border-color: var(--teal-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--teal-bg) !important;
}

/* ============================================
   CUSTOM SELECT / MULTISELECT LIBRARIES
   ============================================ */

/* Select2 Dropdown */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--teal-primary) !important;
    color: white !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--teal-primary) !important;
    outline: none !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--teal-primary) !important;
}

/* Chosen Dropdown */
.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
    border-color: var(--teal-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--teal-bg) !important;
}

.chosen-container .chosen-results li.highlighted {
    background-color: var(--teal-primary) !important;
    background-image: none !important;
    color: white !important;
}

/* ============================================
   NATIVE BROWSER HIGHLIGHTS
   ============================================ */

/* Selection highlight */
::selection {
    background-color: var(--teal-bg-strong) !important;
    color: var(--teal-primary-dark) !important;
}

::-moz-selection {
    background-color: var(--teal-bg-strong) !important;
    color: var(--teal-primary-dark) !important;
}

/* ============================================
   ACTIVE/FOCUS STATES FOR ALL INTERACTIVE ELEMENTS
   ============================================ */

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline-color: var(--teal-primary) !important;
}

/* ============================================
   PAGINATION - TEAL
   ============================================ */

.pagination .page-item.active .page-link {
    background-color: var(--teal-primary) !important;
    border-color: var(--teal-primary) !important;
}

.pagination .page-link:hover {
    background-color: var(--teal-bg) !important;
    border-color: var(--teal-primary-light) !important;
    color: var(--teal-primary-dark) !important;
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 0.25rem var(--teal-bg) !important;
}

/* ============================================
   TABS - TEAL
   ============================================ */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-color: var(--teal-primary) !important;
    color: var(--teal-primary) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--teal-primary-light) !important;
    color: var(--teal-primary) !important;
}

/* ============================================
   PROGRESS BARS - TEAL
   ============================================ */

.progress-bar {
    background-color: var(--teal-primary) !important;
}

/* ============================================
   BADGES - TEAL
   ============================================ */

.badge.bg-primary,
.badge-primary {
    background-color: var(--teal-primary) !important;
}

/* ============================================
   SWITCHES/TOGGLES - TEAL
   ============================================ */

.form-switch .form-check-input:checked {
    background-color: var(--teal-primary) !important;
    border-color: var(--teal-primary) !important;
}

.form-switch .form-check-input:focus {
    border-color: var(--teal-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--teal-bg) !important;
}

/* ============================================
   RANGE SLIDERS - TEAL
   ============================================ */

input[type="range"]::-webkit-slider-thumb {
    background-color: var(--teal-primary) !important;
}

input[type="range"]::-moz-range-thumb {
    background-color: var(--teal-primary) !important;
}

input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--teal-bg) !important;
}

input[type="range"]::-moz-range-track {
    background-color: var(--teal-bg) !important;
}

/* ============================================
   SPECIFIC LIBRARY OVERRIDES
   ============================================ */

/* jQuery UI Datepicker */
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
    background-color: var(--teal-primary) !important;
    border-color: var(--teal-primary) !important;
    color: white !important;
}

.ui-datepicker .ui-state-hover {
    background-color: var(--teal-bg) !important;
    border-color: var(--teal-primary-light) !important;
}

/* Bootstrap Datepicker */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover {
    background-color: var(--teal-primary) !important;
    background-image: none !important;
    color: white !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: var(--teal-bg) !important;
    border-color: var(--teal-primary) !important;
}

.datepicker table tr td:hover {
    background-color: var(--teal-bg) !important;
}

/* ============================================
   ENSURE HIGHEST SPECIFICITY
   ============================================ */

/* Force override any blue colors with !important */
html body select option:checked,
html body select option:hover,
html body select option:focus,
html body select option:active,
html body .dropdown-item:hover,
html body .dropdown-item:focus,
html body .dropdown-item.active,
html body .flatpickr-day.selected,
html body input[type="radio"]:checked {
    background-color: var(--teal-primary) !important;
    background: var(--teal-primary) !important;
    color: white !important;
}

/* Special hack for certain browsers to remove the blue selection on options */
select:focus option:checked,
select:focus option:hover {
    background: var(--teal-primary) !important;
    background-color: var(--teal-primary) !important;
    color: white !important;
}

/* Forcing teal even for browser-level selection if possible */
::selection {
    background-color: var(--teal-primary) !important;
    color: white !important;
}

/* ============================================
   ADDITIONAL DATE PICKER OVERRIDES - MAXIMUM SPECIFICITY
   ============================================ */

/* Flatpickr - All possible selectors with maximum specificity */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected.inRange,
.flatpickr-calendar .flatpickr-day.startRange.inRange,
.flatpickr-calendar .flatpickr-day.endRange.inRange,
.flatpickr-calendar .flatpickr-day.selected.prevMonthDay,
.flatpickr-calendar .flatpickr-day.selected.nextMonthDay,
.flatpickr-calendar .flatpickr-day.startRange.prevMonthDay,
.flatpickr-calendar .flatpickr-day.startRange.nextMonthDay,
.flatpickr-calendar .flatpickr-day.endRange.prevMonthDay,
.flatpickr-calendar .flatpickr-day.endRange.nextMonthDay {
    background: var(--teal-primary) !important;
    background-color: var(--teal-primary) !important;
    border-color: var(--teal-primary) !important;
    color: white !important;
}

/* Flatpickr today with all states */
.flatpickr-calendar .flatpickr-day.today,
.flatpickr-calendar .flatpickr-day.today.inRange,
.flatpickr-calendar .flatpickr-day.today.prevMonthDay,
.flatpickr-calendar .flatpickr-day.today.nextMonthDay {
    border-color: var(--teal-primary) !important;
    color: var(--teal-primary) !important;
}

.flatpickr-calendar .flatpickr-day.today:hover,
.flatpickr-calendar .flatpickr-day.today.selected,
.flatpickr-calendar .flatpickr-day.today:focus {
    background: var(--teal-primary) !important;
    background-color: var(--teal-primary) !important;
    border-color: var(--teal-primary) !important;
    color: white !important;
}

/* Flatpickr in range dates */
.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day.inRange.prevMonthDay,
.flatpickr-calendar .flatpickr-day.inRange.nextMonthDay {
    background-color: var(--teal-bg-medium) !important;
    background: var(--teal-bg-medium) !important;
    border-color: var(--teal-bg-medium) !important;
    box-shadow: -5px 0 0 var(--teal-bg-medium), 5px 0 0 var(--teal-bg-medium) !important;
}

/* Flatpickr hover states */
.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus {
    background-color: var(--teal-bg) !important;
    background: var(--teal-bg) !important;
    border-color: var(--teal-primary-light) !important;
}

/* Flatpickr month/year dropdowns */
.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-current-month {
    background-color: var(--teal-primary) !important;
    background: var(--teal-primary) !important;
}

/* Flatpickr arrows */
.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: var(--teal-primary-light) !important;
}

/* Litepicker (another popular date picker) */
.litepicker .day-item.is-selected,
.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
    background-color: var(--teal-primary) !important;
    color: white !important;
}

.litepicker .day-item.is-in-range {
    background-color: var(--teal-bg-medium) !important;
}

.litepicker .day-item:hover {
    background-color: var(--teal-bg) !important;
    border-color: var(--teal-primary-light) !important;
}

/* Air Datepicker */
.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current- {
    background: var(--teal-primary) !important;
    color: white !important;
}

.air-datepicker-cell.-in-range- {
    background: var(--teal-bg-medium) !important;
}

.air-datepicker-cell:hover {
    background: var(--teal-bg) !important;
}

/* Pikaday */
.pika-single .is-selected .pika-button,
.pika-single .is-today .pika-button {
    background: var(--teal-primary) !important;
    color: white !important;
}

.pika-single .pika-button:hover {
    background-color: var(--teal-bg) !important;
    border-color: var(--teal-primary-light) !important;
}

/* Rome (date picker) */
.rd-day-selected,
.rd-day-selected:hover {
    background-color: var(--teal-primary) !important;
    color: white !important;
}

/* Duet Date Picker */
duet-date-picker .duet-date__day.is-selected {
    background-color: var(--teal-primary) !important;
    color: white !important;
}

/* Vanilla Calendar */
.vanilla-calendar-day--selected {
    background-color: var(--teal-primary) !important;
    color: white !important;
}

/* Generic calendar classes - catch-all */
.calendar-day.selected,
.calendar-day.active,
.calendar-day.is-selected,
.calendar-day.is-active,
.date-selected,
.date-active,
.day-selected,
.day-active,
td.selected,
td.active,
td.day.selected,
td.day.active,
.selected-day,
.active-day {
    background-color: var(--teal-primary) !important;
    background: var(--teal-primary) !important;
    color: white !important;
    border-color: var(--teal-primary) !important;
}

/* Generic calendar hover states */
.calendar-day:hover,
.date-picker-day:hover,
td.day:hover,
.day:hover {
    background-color: var(--teal-bg) !important;
    border-color: var(--teal-primary-light) !important;
}

/* Generic today indicators */
.calendar-day.today,
.date-picker-day.today,
td.day.today,
.today {
    border-color: var(--teal-primary) !important;
    color: var(--teal-primary) !important;
}

/* Override any remaining blue colors in date pickers */
.flatpickr-calendar *[style*="background"],
.datepicker *[style*="background"],
.calendar *[style*="background"] {
    background-color: inherit !important;
}

/* Force override with highest specificity possible */
html body .flatpickr-calendar .flatpickr-day.selected,
html body .flatpickr-calendar .flatpickr-day.startRange,
html body .flatpickr-calendar .flatpickr-day.endRange,
html body .flatpickr-calendar .flatpickr-day.selected.inRange,
html body .flatpickr-calendar .flatpickr-day.today.selected {
    background: var(--teal-primary) !important;
    background-color: var(--teal-primary) !important;
    border-color: var(--teal-primary) !important;
    color: white !important;
}

/* Catch any blue color values directly */
*[style*="background-color:#007bff"],
*[style*="background-color: #007bff"],
*[style*="background:#007bff"],
*[style*="background: #007bff"],
*[style*="background-color:#0d6efd"],
*[style*="background-color: #0d6efd"],
*[style*="background:#0d6efd"],
*[style*="background: #0d6efd"],
*[style*="background-color:rgb(0,123,255)"],
*[style*="background-color: rgb(0,123,255)"],
*[style*="background-color:rgb(0, 123, 255)"],
*[style*="background-color: rgb(0, 123, 255)"],
*[style*="background-color:rgb(13,110,253)"],
*[style*="background-color: rgb(13,110,253)"],
*[style*="background-color:rgb(13, 110, 253)"],
*[style*="background-color: rgb(13, 110, 253)"] {
    background-color: var(--teal-primary) !important;
    background: var(--teal-primary) !important;
}

/* Catch any blue border values */
*[style*="border-color:#007bff"],
*[style*="border-color: #007bff"],
*[style*="border-color:#0d6efd"],
*[style*="border-color: #0d6efd"] {
    border-color: var(--teal-primary) !important;
}

*[style*="color:#007bff"],
*[style*="color: #007bff"],
*[style*="color:#0d6efd"],
*[style*="color: #0d6efd"] {
    color: var(--teal-primary) !important;
}

/* ============================================
   INFO ICONS - TEAL THEME
   ============================================ */

/* Info circle icons */
.fa-circle-info,
i.fa-circle-info,
.fa-info-circle,
i.fa-info-circle {
    color: var(--teal-primary) !important;
}

/* Info icons in links */
a .fa-circle-info,
a i.fa-circle-info,
a .fa-info-circle,
a i.fa-info-circle {
    color: var(--teal-primary) !important;
    transition: all 0.3s ease;
}

/* Info icons hover state */
a:hover .fa-circle-info,
a:hover i.fa-circle-info,
a:hover .fa-info-circle,
a:hover i.fa-info-circle {
    color: var(--teal-primary-dark) !important;
    transform: scale(1.1);
}

/* ============================================
   CHECKBOX THEME STYLING - TEAL COLOR
   ============================================
   Custom checkbox styling to match the app's
   teal theme color (#14B8A6)
   ============================================ */

/* Style all checkboxes to match teal theme */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #D1D5DB;
    border-radius: 4px;
    background-color: #FFFFFF;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    margin: 0;
}

/* Hover state */
input[type="checkbox"]:hover {
    border-color: #14B8A6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

/* Checked state */
input[type="checkbox"]:checked {
    background-color: #14B8A6;
    border-color: #14B8A6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

/* Checkmark */
input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Focus state for accessibility */
input[type="checkbox"]:focus {
    outline: none;
    border-color: #14B8A6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
}

/* Disabled state */
input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #F3F4F6;
}

input[type="checkbox"]:disabled:checked {
    background-color: #9CA3AF;
    border-color: #9CA3AF;
}

/* ============================================
   DATATABLE SPECIFIC CHECKBOX STYLING
   ============================================ */

/* DataTable header checkbox (Select All) */
.dataTables_wrapper input[type="checkbox"],
.data-table input[type="checkbox"],
.data-table-export input[type="checkbox"],
table.dataTable input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #D1D5DB;
    border-radius: 4px;
    background-color: #FFFFFF;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    margin: 0;
}

.dataTables_wrapper input[type="checkbox"]:hover,
.data-table input[type="checkbox"]:hover,
.data-table-export input[type="checkbox"]:hover,
table.dataTable input[type="checkbox"]:hover {
    border-color: #14B8A6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.dataTables_wrapper input[type="checkbox"]:checked,
.data-table input[type="checkbox"]:checked,
.data-table-export input[type="checkbox"]:checked,
table.dataTable input[type="checkbox"]:checked {
    background-color: #14B8A6;
    border-color: #14B8A6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.dataTables_wrapper input[type="checkbox"]:checked::before,
.data-table input[type="checkbox"]:checked::before,
.data-table-export input[type="checkbox"]:checked::before,
table.dataTable input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dataTables_wrapper input[type="checkbox"]:focus,
.data-table input[type="checkbox"]:focus,
.data-table-export input[type="checkbox"]:focus,
table.dataTable input[type="checkbox"]:focus {
    outline: none;
    border-color: #14B8A6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
}

/* ============================================
   SELECT ALL CHECKBOX LABEL STYLING
   ============================================ */

/* Style the "Select All" label if present */
.dataTables_wrapper label,
.data-table label,
.data-table-export label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
    user-select: none;
}

.dataTables_wrapper label:hover,
.data-table label:hover,
.data-table-export label:hover {
    color: #14B8A6;
}

/* ============================================
   INDETERMINATE STATE (for Select All)
   ============================================ */

input[type="checkbox"]:indeterminate {
    background-color: #14B8A6;
    border-color: #14B8A6;
}

input[type="checkbox"]:indeterminate::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    height: 2px;
    background-color: white;
    border-radius: 1px;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    input[type="checkbox"]:checked::before {
        left: 6px;
        top: 2px;
    }
}