/* Enhanced checkbox visibility styles */

/* Make custom control checkboxes more visible */
.custom-control-checkbox .custom-control-label::before,
.custom-checkbox .custom-control-label::before {
    border: 2px solid var(--primary) !important;
    background-color: var(--white) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Hover state for better interactivity */
.custom-control-checkbox .custom-control-label:hover::before,
.custom-checkbox .custom-control-label:hover::before {
    border-color: var(--primary-600) !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 193, 169, 0.15) !important;
}

/* Checked state */
.custom-control-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Make the checkmark more visible */
.custom-control-checkbox .custom-control-input:checked ~ .custom-control-label::after,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Focus state for accessibility */
.custom-control-checkbox .custom-control-input:focus ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(52, 193, 169, 0.25) !important;
}

/* Form check styles (Bootstrap 5 compatibility) */
.form-check-input {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border: 2px solid var(--primary) !important;
    background-color: var(--white) !important;
}

.form-check-input:hover {
    border-color: var(--primary-600) !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 193, 169, 0.15) !important;
}

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

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 193, 169, 0.25) !important;
    border-color: var(--primary) !important;
}

/* Dark mode support */
[data-theme-style="dark"] .custom-control-checkbox .custom-control-label::before,
[data-theme-style="dark"] .custom-checkbox .custom-control-label::before,
[data-theme-style="dark"] .form-check-input {
    background-color: var(--gray-200) !important;
    border-color: var(--primary-300) !important;
}

[data-theme-style="dark"] .custom-control-checkbox .custom-control-input:checked ~ .custom-control-label::before,
[data-theme-style="dark"] .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
[data-theme-style="dark"] .form-check-input:checked {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
}

/* Increase spacing for better touch targets */
.custom-control,
.form-check {
    padding-left: 2rem !important;
    min-height: 1.5rem !important;
}

.custom-control-label,
.form-check-label {
    cursor: pointer !important;
    padding-top: 0.125rem !important;
}

/* Animation for smooth transitions */
.custom-control-checkbox .custom-control-label::before,
.custom-checkbox .custom-control-label::before,
.form-check-input {
    transition: all 0.2s ease-in-out !important;
}

/* Disabled state */
.custom-control-input:disabled ~ .custom-control-label,
.form-check-input:disabled ~ .form-check-label {
    opacity: 0.6 !important;
}

.custom-control-input:disabled ~ .custom-control-label::before,
.form-check-input:disabled {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-400) !important;
}

/* Table checkbox adjustments */
.table .custom-control-checkbox .custom-control-label::before,
.table .custom-checkbox .custom-control-label::before,
.table .form-check-input {
    margin-top: -0.125rem !important;
}

/* Switch style adjustments (if using switches) */
.custom-switch .custom-control-label::before {
    width: 2.25rem !important;
    height: 1.25rem !important;
    border: 2px solid var(--primary) !important;
}

.custom-switch .custom-control-label::after {
    width: 1rem !important;
    height: 1rem !important;
    background-color: var(--primary) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Custom style for "Select All" checkbox in tables */
#bulk_select_all {
    cursor: pointer !important;
}

/* Additional visibility for small screens */
@media (max-width: 768px) {
    .custom-control-checkbox .custom-control-label::before,
    .custom-checkbox .custom-control-label::before,
    .form-check-input {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    .custom-control-checkbox .custom-control-input:checked ~ .custom-control-label::after,
    .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    .custom-control,
    .form-check {
        padding-left: 2.25rem !important;
    }
}