/* 
 * Car Drive Management - Modern Checkbox
 * CSS para checkboxes ativo/inativo com visual moderno SIMPLIFICADO
 */

/* === MODERN CHECKBOX CONTAINER === */
.modern-checkbox-container {
    margin: 1rem 0 !important;
    padding: 1rem !important;
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    /* CORREÇÃO: Forçar sempre visível */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* CORREÇÃO: Bloquear ocultação por JavaScript */
.modern-checkbox-container[style*="display: none"],
.modern-checkbox-container[style*="visibility: hidden"],
.modern-checkbox-container[style*="opacity: 0"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modern-checkbox-container:hover {
    border-color: #007bff !important;
    box-shadow: 0 2px 8px rgba(0,123,255,0.1) !important;
}

/* === MODERN CHECKBOX LABEL === */
.modern-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* CORREÇÃO: Forçar sempre visível */
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 11 !important;
}

/* === CHECKBOX INPUT OCULTO === */
.modern-checkbox-input,
.modern-checkbox-container input[type="checkbox"],
.form-group .modern-checkbox-input,
input.modern-checkbox-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
}

/* === CHECKBOX CUSTOM === */
.modern-checkbox-custom {
    position: relative !important;
    display: inline-block !important;
    width: 50px !important;
    height: 26px !important;
    background: #dc3545 !important;
    border-radius: 26px !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    /* CORREÇÃO: Forçar sempre visível */
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 12 !important;
}

/* CORREÇÃO: Bloquear ocultação do custom span */
.modern-checkbox-custom[style*="display: none"],
.modern-checkbox-custom[style*="visibility: hidden"],
.modern-checkbox-custom[style*="opacity: 0"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* === THUMB DO SWITCH === */
.modern-checkbox-custom::before {
    content: '' !important;
    position: absolute !important;
    top: 1px !important;
    left: 1px !important;
    width: 22px !important;
    height: 22px !important;
    background: white !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    z-index: 2 !important;
    /* CORREÇÃO: Centralizar thumb no switch */
    display: block !important;
    margin: 0 !important;
}

/* === ÍCONES NO SWITCH === */
.modern-checkbox-custom::after {
    content: '✕' !important;
    position: absolute !important;
    top: 50% !important;
    left: 30px !important;
    transform: translateY(-50%) !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: bold !important;
    z-index: 1 !important;
}

/* === ESTADO ATIVO (CHECKED) === */
.modern-checkbox-input:checked + .modern-checkbox-custom {
    background: #28a745 !important;
}

.modern-checkbox-input:checked + .modern-checkbox-custom::before {
    transform: translateX(26px) !important;
}

.modern-checkbox-input:checked + .modern-checkbox-custom::after {
    content: '✓' !important;
    left: 6px !important;
}

/* === TEXTO DO CHECKBOX === */
.modern-checkbox-text {
    flex-grow: 1 !important;
    color: #333 !important;
    line-height: 1.4 !important;
}

.modern-checkbox-text strong {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.modern-checkbox-text small {
    font-size: 0.8rem !important;
    color: #6c757d !important;
    line-height: 1.2 !important;
}

/* === MUDANÇAS NO TEXTO BASEADO NO STATUS === */
.modern-checkbox-input:checked ~ .modern-checkbox-text strong {
    color: #28a745 !important;
}

.modern-checkbox-input:checked ~ .modern-checkbox-text small {
    color: #20c997 !important;
}

.modern-checkbox-input:not(:checked) ~ .modern-checkbox-text strong {
    color: #dc3545 !important;
}

.modern-checkbox-input:not(:checked) ~ .modern-checkbox-text small {
    color: #fd7e14 !important;
}

/* === FOCUS PARA ACESSIBILIDADE === */
.modern-checkbox-input:focus + .modern-checkbox-custom {
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 0 0 3px rgba(0,123,255,0.3) !important;
}

/* === HOVER EFFECTS === */
.modern-checkbox-label:hover .modern-checkbox-custom {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.modern-checkbox-label:hover .modern-checkbox-custom::before {
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* === LOADING STATE === */
.modern-checkbox-container.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.modern-checkbox-container.loading .modern-checkbox-custom::before {
    animation: checkboxPulse 1.5s infinite !important;
}

@keyframes checkboxPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* === SUCCESS ANIMATION === */
.modern-checkbox-container.success {
    animation: checkboxSuccess 0.6s ease !important;
}

@keyframes checkboxSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* === DISABLED STATE === */
.modern-checkbox-container.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.modern-checkbox-container.disabled .modern-checkbox-label {
    cursor: not-allowed !important;
}

.modern-checkbox-container.disabled .modern-checkbox-custom {
    background: #6c757d !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .modern-checkbox-container {
        padding: 0.75rem !important;
    }
    
    .modern-checkbox-custom {
        width: 44px !important;
        height: 22px !important;
    }
    
    .modern-checkbox-custom::before {
        width: 16px !important;
        height: 16px !important;
        top: 1px !important;
        left: 1px !important;
    }
    
    .modern-checkbox-input:checked + .modern-checkbox-custom::before {
        transform: translateX(22px) !important;
    }
    
    .modern-checkbox-custom::after {
        font-size: 8px !important;
        left: 26px !important;
    }
    
    .modern-checkbox-input:checked + .modern-checkbox-custom::after {
        left: 4px !important;
    }
    
    .modern-checkbox-text strong {
        font-size: 0.9rem !important;
    }
    
    .modern-checkbox-text small {
        font-size: 0.75rem !important;
    }
}

/* === INTEGRATION WITH FORMS === */
.form-group .modern-checkbox-container {
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.form-section .modern-checkbox-container {
    background: white !important;
    border: 2px solid #e9ecef !important;
}

.form-section .modern-checkbox-container:hover {
    border-color: #007bff !important;
}

/* === OVERRIDES CRÍTICOS PARA COMBINED.MIN.CSS === */
/* Neutralizar qualquer CSS que interfira com nossos checkboxes */
.form-group .modern-checkbox-input,
.form-group input.modern-checkbox-input,
.form-group input[type="checkbox"].modern-checkbox-input {
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -1 !important;
}

/* Garantir que o custom span seja sempre visível */
.modern-checkbox-container .modern-checkbox-custom,
.form-group .modern-checkbox-custom {
    display: inline-block !important;
    position: relative !important;
    width: 50px !important;
    height: 26px !important;
    background: #dc3545 !important;
    border-radius: 26px !important;
    flex-shrink: 0 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
}

/* CORREÇÃO ESPECÍFICA: Posicionamento do thumb */
.modern-checkbox-container .modern-checkbox-custom::before,
.form-group .modern-checkbox-custom::before {
    content: '' !important;
    position: absolute !important;
    top: 1px !important;
    left: 1px !important;
    width: 22px !important;
    height: 22px !important;
    background: white !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    z-index: 1001 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CORREÇÃO: Thumb na posição ativa */
.modern-checkbox-input:checked + .modern-checkbox-custom::before,
input[type="checkbox"]:checked + .modern-checkbox-custom::before {
    transform: translateX(26px) !important;
}

/* Força o label a sempre funcionar */
.modern-checkbox-container .modern-checkbox-label,
.form-group .modern-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    cursor: pointer !important;
    user-select: none !important;
    margin: 0 !important;
    padding: 0 !important;
}