/**
 * DWP Framework CSS
 * Estilos customizados para garantir funcionamento correto do framework
 * 
 * UNIFICADO: Inclui validação visual (ícones menores) + comportamentos de prioridade
 * Substitui: dwp-visual-validation.css (funcionalidade incorporada aqui)
 */

/* ========================================
   VALIDAÇÃO DE FORMULÁRIOS - ÍCONES INVÁLIDOS
   ======================================== */

/* Garante que nossa validação customizada tenha prioridade sobre Bootstrap */
.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
    border-color: #dc3545 !important;
    padding-right: calc(1.4em + 0.7rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545' stroke-width='1.5'%3e%3cpath d='M3 3l6 6M9 3l-6 6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.25rem) center !important;
    background-size: calc(0.6em + 0.3rem) calc(0.6em + 0.3rem) !important;
}

/* Ícone de validação INVÁLIDA para textarea */
.was-validated textarea.form-control:invalid, 
textarea.form-control.is-invalid {
    background-position: top calc(0.375em + 0.25rem) right calc(0.375em + 0.25rem) !important;
    padding-right: calc(1.4em + 0.7rem) !important;
}

/* Ícone de validação INVÁLIDA para form-select */
.was-validated .form-select:invalid:not([multiple]):not([size]), 
.was-validated .form-select:invalid:not([multiple])[size="1"], 
.form-select.is-invalid:not([multiple]):not([size]), 
.form-select.is-invalid:not([multiple])[size="1"] {
    background-size: 16px 12px, calc(0.6em + 0.3rem) calc(0.6em + 0.3rem) !important;
    background-position: right 0.75rem center, center right 2.1rem !important;
    padding-right: 3.9rem !important;
}

/* Remove estilos de válido quando há erro customizado - PRIORIDADE MÁXIMA */
.form-control.is-invalid.is-valid,
.form-select.is-invalid.is-valid,
.form-check-input.is-invalid.is-valid {
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545' stroke-width='1.5'%3e%3cpath d='M3 3l6 6M9 3l-6 6'/%3e%3c/svg%3e") !important;
    background-size: calc(0.6em + 0.3rem) calc(0.6em + 0.3rem) !important;
    background-position: right calc(0.375em + 0.25rem) center !important;
    padding-right: calc(1.4em + 0.7rem) !important;
}

/* ========================================
   VALIDAÇÃO DE FORMULÁRIOS - ÍCONES VÁLIDOS
   ======================================== */

/* Ícone de validação VÁLIDA (✓ verde) - ícones menores */
.was-validated .form-control:valid, 
.form-control.is-valid {
    background-size: calc(0.6em + 0.3rem) calc(0.6em + 0.3rem) !important;
    background-position: right calc(0.375em + 0.25rem) center !important;
    padding-right: calc(1.4em + 0.7rem) !important;
}

/* Ícone de validação VÁLIDA para textarea */
.was-validated textarea.form-control:valid, 
textarea.form-control.is-valid {
    background-position: top calc(0.375em + 0.25rem) right calc(0.375em + 0.25rem) !important;
    padding-right: calc(1.4em + 0.7rem) !important;
}

/* Ícone de validação VÁLIDA para form-select */
.was-validated .form-select:valid:not([multiple]):not([size]), 
.was-validated .form-select:valid:not([multiple])[size="1"], 
.form-select.is-valid:not([multiple]):not([size]), 
.form-select.is-valid:not([multiple])[size="1"] {
    background-size: 16px 12px, calc(0.6em + 0.3rem) calc(0.6em + 0.3rem) !important;
    background-position: right 0.75rem center, center right 2.1rem !important;
    padding-right: 3.9rem !important;
}

/* Ajustes para form-control-color */
.was-validated .form-control-color:valid, 
.form-control-color.is-valid,
.was-validated .form-control-color:invalid, 
.form-control-color.is-invalid {
    width: calc(3rem + calc(1.4em + 0.7rem)) !important;
}

/* Feedback de erro sempre visível quando campo é inválido */
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-feedback {
    display: block !important;
}

/* Oculta feedback válido quando há erro */
.form-control.is-invalid ~ .valid-feedback,
.form-select.is-invalid ~ .valid-feedback,
.form-check-input.is-invalid ~ .valid-feedback {
    display: none !important;
}

/* ========================================
   LOADING STATES
   ======================================== */

/* Estado de loading para formulários */
.form-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.form-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   UTILITÁRIOS
   ======================================== */

/* Classe para ocultar elementos */
.dwp-hidden {
    display: none !important;
}

/* Classe para elementos carregando */
.dwp-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Animação de fade */
.dwp-fade-in {
    animation: dwpFadeIn 0.3s ease-in-out;
}

.dwp-fade-out {
    animation: dwpFadeOut 0.3s ease-in-out;
}

@keyframes dwpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dwpFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

/* Ajustes para dispositivos móveis - ícones menores */
@media (max-width: 768px) {
    .form-control.is-invalid,
    .form-select.is-invalid,
    .form-control.is-valid,
    .form-select.is-valid {
        padding-right: calc(1.2em + 0.5rem) !important;
        background-position: right calc(0.375em + 0.125rem) center !important;
        background-size: calc(0.5em + 0.25rem) calc(0.5em + 0.25rem) !important;
    }
    
    /* Prioridade para campos inválidos em mobile */
    .form-control.is-invalid.is-valid,
    .form-select.is-invalid.is-valid {
        border-color: #dc3545 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545' stroke-width='1.5'%3e%3cpath d='M3 3l6 6M9 3l-6 6'/%3e%3c/svg%3e") !important;
    }
}