/* ===== FORMULÁRIOS MODERNOS COM TAILWIND + METRONIC ===== */

/* Estilos para formulários modernos */
.form-label-modern {
    display: block !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

.form-control-modern {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    background: white !important;
    transition: all 0.2s ease !important;
}

.form-control-modern:focus {
    outline: none !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

.form-control-modern::placeholder {
    color: #9ca3af !important;
}

.form-select-modern {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1rem !important;
    padding-right: 2.5rem !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    background-color: white !important;
    transition: all 0.2s ease !important;
}

.form-select-modern:focus {
    outline: none !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

.form-group-modern {
    margin-bottom: 1rem !important;
}

/* Checkbox e Radio modernos */
input[type="checkbox"], input[type="radio"] {
    width: 1rem !important;
    height: 1rem !important;
    color: #22c55e !important;
    background-color: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.25rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

input[type="radio"] {
    border-radius: 50% !important;
}

input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3ccircle cx='10' cy='10' r='5'/%3e%3c/svg%3e") !important;
}

/* Validação de formulários */
.text-danger {
    color: #ef4444 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

.input-validation-error {
    border-color: #ef4444 !important;
}

.input-validation-error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* === Focus ring global verde (cor da marca) ===
   Substitui o anel azul padrão do Bootstrap/Browser em qualquer input/select/textarea/button
   que NÃO declarou cor explícita. Mantém .input-validation-error vermelho. */
input:not(.input-validation-error):focus,
input:not(.input-validation-error):focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
    outline: none !important;
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}

/* Regra de outline verde em button/a REMOVIDA (Epic 2 / SW 2.1): era redundante
   com o *:focus-visible global do DS (main.css, ring da marca) e, por usar
   !important, vencia o focus adaptativo branco das superfícies escuras
   (footer/topbar/newsletter), desenhando um anel verde ilegível por cima. */

/* Bootstrap form-control também recebe o ring verde quando focado. */
.form-control:focus,
.form-select:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 0.25rem rgba(34, 197, 94, 0.25) !important;
}

/* Botões de formulário */
.form-actions {
    display: flex !important;
    gap: 0.75rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
}

/* Espaçamentos e layout */
.space-y-4 > * + * {
    margin-top: 1rem !important;
}

.space-y-2 > * + * {
    margin-top: 0.5rem !important;
}

/* Estilos para listas */
.list-disc {
    list-style-type: disc !important;
    padding-left: 1.25rem !important;
}

/* Cores de texto para formulários */
.text-red-600 {
    color: #dc2626 !important;
}

.text-red-700 {
    color: #b91c1c !important;
}

.text-blue-600 {
    color: #2563eb !important;
}

.text-green-600 {
    color: #16a34a !important;
}

.text-purple-600 {
    color: #9333ea !important;
}

.text-gray-600 {
    color: #4b5563 !important;
}

.text-gray-700 {
    color: #374151 !important;
}

.text-gray-900 {
    color: #111827 !important;
}

/* Cores de fundo para formulários */
.bg-red-100 {
    background-color: #fee2e2 !important;
}

.bg-blue-100 {
    background-color: #dbeafe !important;
}

.bg-green-100 {
    background-color: #dcfce7 !important;
}

.bg-purple-100 {
    background-color: #f3e8ff !important;
}

.bg-gray-100 {
    background-color: #f3f4f6 !important;
}

/* Responsividade para formulários */
@media (max-width: 767px) {
    .form-actions {
        flex-direction: column !important;
    }
    
    .form-actions .btn-modern {
        width: 100% !important;
    }
}