/* 
 * CSS para melhorar feedback visual das máscaras
 * Sprint 3 - História 17 - Bugs #002/#003/#004
 */

/* Estados de validação dos campos */
.form-control.is-valid,
input.is-valid {
    border-color: #198754 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%23198754' d='m2.3 6.73.13-.02.61-.55 2.68-2.67.5-.45.04-.05-.03-.04-.45-.51-2.67 2.67-.55.61-.02.13z'/></svg>");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid,
input.is-invalid {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'><circle cx='6' cy='6' r='4.5'/><path d='m5.5 5.5 1 1 1-1'/></svg>");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Feedback de erro */
.invalid-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

/* Loading indicator para CEP */
.loading-cep {
    background-image: url("data:image/svg+xml,<svg width='16' height='16' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='6' fill='none' stroke='%236c757d' stroke-width='2'><animate attributeName='stroke-dasharray' dur='1s' repeatCount='indefinite' values='0 31.416;15.708 15.708;0 31.416'/><animate attributeName='stroke-dashoffset' dur='1s' repeatCount='indefinite' values='0;-15.708;-31.416'/></circle></svg>") !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Toast container */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* Melhorias para Tailwind CSS */
.focus\:ring-primary:focus {
    --tw-ring-color: #3AB66E;
}

.border-primary {
    border-color: #3AB66E;
}

/* Compatibilidade com Bootstrap */
.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid;
    border-radius: 0.375rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0.9375rem 0.75rem;
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.5;
}

.btn-close:hover {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}

.fade {
    transition: opacity 0.15s linear;
}

.fade.show {
    opacity: 1;
}

/* Responsividade */
@media (max-width: 768px) {
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }
}