/* Overrides loaded last to ensure our UI rules have precedence */

/* ==========================================================================
   Inputs Colorés - Gradient et Lavande (UI Evolution 16 Février)
   Override Bootstrap avec haute spécificité
   ========================================================================== */

/* Inputs montants (number) - Gradient violet/magenta */
input[type="number"],
.form-control input[type="number"],
body input[type="number"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    color: white !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* Masquer les spinners (flèches haut/bas), alignement avec le projet principal */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
.form-control input[type="number"]::-webkit-inner-spin-button,
.form-control input[type="number"]::-webkit-outer-spin-button,
body input[type="number"]::-webkit-inner-spin-button,
body input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

input[type="number"]::placeholder,
.form-control input[type="number"]::placeholder,
body input[type="number"]::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

input[type="number"]:focus,
.form-control input[type="number"]:focus,
body input[type="number"]:focus {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    outline: none !important;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5), 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    border: none !important;
}

input[type="number"]:hover:not(:focus),
.form-control input[type="number"]:hover:not(:focus),
body input[type="number"]:hover:not(:focus) {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

/* Inputs texte/date/search - Fond lavande */
input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="search"],
select.form-select,
select.form-control,
.form-control,
body input[type="text"],
body input[type="date"],
body input[type="email"],
body input[type="password"],
body input[type="search"],
body select.form-select,
body .form-control {
    background: #F5F3FF !important;
    border: 1px solid #E0DCEF !important;
    border-radius: 8px !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* Exclure les inputs number du style lavande */
input[type="number"],
body input[type="number"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
}

/* Montants négatifs : fond rouge, texte blanc */
td.text-danger input[type="number"],
body td.text-danger input[type="number"] {
    background: linear-gradient(135deg, #e55353 0%, #b71c1c 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(229, 83, 83, 0.35) !important;
}

/* Placeholders */
input[type="text"]::placeholder,
input[type="date"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
.form-control::placeholder,
body input[type="text"]::placeholder,
body input[type="date"]::placeholder,
body input[type="email"]::placeholder,
body input[type="password"]::placeholder,
body input[type="search"]::placeholder,
body .form-control::placeholder {
    color: #999 !important;
}

/* Focus states - Lavande vers blanc */
input[type="text"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select.form-select:focus,
select.form-control:focus,
.form-control:focus,
body input[type="text"]:focus,
body input[type="date"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body select.form-select:focus,
body .form-control:focus {
    background: #ffffff !important;
    border-color: #B8AED8 !important;
    box-shadow: 0 0 10px rgba(184, 174, 216, 0.3), 0 0 0 3px rgba(184, 174, 216, 0.1) !important;
    outline: none !important;
}

/* Textarea */
textarea,
textarea.form-control,
body textarea,
body textarea.form-control {
    background: #F5F3FF !important;
    border: 1px solid #E0DCEF !important;
    border-radius: 8px !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
}

textarea:focus,
textarea.form-control:focus,
body textarea:focus,
body textarea.form-control:focus {
    background: #ffffff !important;
    border-color: #B8AED8 !important;
    box-shadow: 0 0 10px rgba(184, 174, 216, 0.3) !important;
    outline: none !important;
}

/* Inputs disabled */
input:disabled,
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
select:disabled,
select.form-select:disabled,
textarea:disabled,
.form-control:disabled,
body input:disabled,
body select:disabled,
body textarea:disabled {
    background: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
    border-color: #dee2e6 !important;
}

/* Ensure filters-card visible when class applied */
#filters-card.filters-visible {
    display: block !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Validation de formulaire Bootstrap (was-validated) - compatibilité avec les
   styles colorés ci-dessus. Placé en fin de fichier (chargé en dernier) et
   marqué !important pour garantir la priorité sur les règles précédentes.
   ========================================================================== */

/* Champs texte / date / select : bordure + icône de validation */
.was-validated .form-control:valid,
.was-validated .form-select:valid,
.form-control.is-valid,
.form-select.is-valid {
    border: 1px solid #198754 !important;
    background-color: #F5F3FF !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
    padding-right: calc(1.5em + 0.75rem) !important;
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border: 1px solid #dc3545 !important;
    background-color: #F5F3FF !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5h-.6z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
    padding-right: calc(1.5em + 0.75rem) !important;
}

/* Champ montant (input number à fond gradient) : le border est forcé à "none"
   et le background est un gradient complet, incompatible avec les règles
   Bootstrap ci-dessus (border-color masqué, icône masquée par un fond blanc).
   On recompose l'état valide/invalide en conservant le gradient :
   - la bordure colorée est simulée via un box-shadow inset (border restant "none")
   - l'icône est superposée au gradient via un 2e calque de background-image,
     avec un disque blanc en fond pour rester lisible sur le gradient violet */
.was-validated input[type="number"]:valid,
input[type="number"].is-valid {
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3ccircle cx='4' cy='4' r='4' fill='white'/%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center, left top !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem), 100% 100% !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: inset 0 0 0 2px #198754, 0 4px 12px rgba(102, 126, 234, 0.3) !important;
    color: white !important;
    padding-right: calc(1.5em + 0.75rem) !important;
}

.was-validated input[type="number"]:invalid,
input[type="number"].is-invalid {
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5' fill='white'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5h-.6z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center, left top !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem), 100% 100% !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: inset 0 0 0 2px #dc3545, 0 4px 12px rgba(220, 53, 69, 0.3) !important;
    color: white !important;
    padding-right: calc(1.5em + 0.75rem) !important;
}

/* Feedbacks de validation */
.valid-feedback {
    display: block;
    color: #198754;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.invalid-feedback {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}