/* ===== Composant « field » : champ de formulaire partagé =====
   Design unique pour tous les inputs (login, création de compte, saisie carte).
   Repris du design de la page de connexion. État invalide piloté par la classe
   .is-invalid posée sur le conteneur .field (par les scripts de page). */

.field {
    margin-bottom: var(--spacing-sm);

    /* Repli pour les pages qui écrivent leur champ en `.field > input.form-control` direct,
       sans le wrapper .field__control de _Field.cshtml (ex. Form/VehiculeLocationForm,
       Form/PPEForm — voir commentaire vehicule-location-form.css). .form-control (forms.css)
       lit --field-border-color : sans cette déclaration ici, ces champs restaient toujours
       sur le fallback var(--color-input-border), focus ET erreur confondus. Même variable que
       .field__control ci-dessous : pour un champ AVEC wrapper, la déclaration plus profonde sur
       .field__control prend le relais sans rien changer (héritage CSS normal, pas de conflit). */
    --field-border-color: var(--color-input-border);

    &:focus-within {
        --field-border-color: var(--color-primary);
    }

    &.is-invalid {
        --field-border-color: var(--color-error);
    }
}

/* Modificateur générique : neutralise la règle globale .page-card__inner .field__control
   (max-width: 50%, layout/page-card.css) pour un champ isolé qui doit occuper toute la
   largeur de la carte. */
.field--full .field__control {
    max-width: 100%;
}

/* Modificateur select : dimensionné à son contenu (texte + chevron) plutôt qu'étiré sur
   toute la largeur, avec un plancher de 50% de la carte (zone cliquable confortable même
   pour une valeur courte — ex. AssuranceCumulativesForm_DropdownList_Role/IndemniseAssurance).
   width: fit-content sur le wrapper calcule sa taille sur le select (form-control ci-dessous
   compte comme 'auto' dans ce calcul, cf. spec CSS shrink-to-fit) puis min/max-width la bornent
   par rapport à .field (largeur stable) ; le form-control remplit ensuite ce wrapper résolu. */
.field--select-fit .field__control {
    width: fit-content;
    min-width: 50%;
    max-width: 100%;
}

.field--select-fit .form-control {
    width: 100%;
    /* réserve la place du chevron : var(--spacing-sm2) = son offset (right, ci-dessous),
       var(--spacing-md) = sa largeur d'icône, var(--spacing-xs6) = respiration avant le texte */
    padding-right: calc(var(--spacing-sm2) + var(--spacing-md) + var(--spacing-xs6));
}

/* Modificateurs d'espacement génériques — à utiliser via CssClass plutôt que de cibler un champ
   précis par id dans une page (ex. plusieurs formulaires Form/* partagent le même champ "Rôle"
   sous des id différents mais avec le même besoin d'espacement). */
.field--flush-bottom {
    margin-bottom: 0;
}

.field--spaced-top {
    margin-top: var(--spacing-sm);
}

.field__label {
    display: block;
    margin-bottom: var(--spacing-xs4);
    font-family: var(--font-family-label);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-label);
}

.field__control {
    position: relative;
    display: block;
    /* Source unique de la couleur de bordure du champ : .form-control (border-color) et
       .field__chevron (color) lisent tous les deux cette variable héritée — jamais de
       valeur dupliquée entre les deux. :focus-within et .is-invalid (ci-dessous) la
       réassignent, ce qui fait suivre le chevron automatiquement (focus bleu, erreur rouge). */
    --field-border-color: var(--color-input-border);

    &:focus-within {
        --field-border-color: var(--color-primary);
    }

    /* place pour l'œil (toujours visible) + l'icône d'erreur */
    &.field__control--has-toggle .form-control {
        padding-right: 7.2rem;
    }
}

/* Spécificité (0,2,0) > (0,1,0) de .field__control : garantit que [hidden]
   masque le wrapper même si display:block est posé par la règle ci-dessus.
   Nécessaire car les feuilles author priment sur le UA stylesheet ([hidden] natif). */
.field__control[hidden] {
    display: none;
}

/* Variante select : flèche native masquée (chevron custom via .field__chevron).
   display:flex + align-items:center : avec appearance:none, Chrome rogne le texte de
   l'option sélectionnée à la hauteur fixe de .form-control (44px) dès que line-height
   dépasse l'espace restant après padding/bordure (cas de --font-size-input, 18px) —
   le centrage flex évite ce rognage indépendamment de la taille de police. */
.field__control--select .form-control {
    display: flex;
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.field__icons {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs2);
}

/* Masque le bouton œil natif d'Edge sur les champs password pour éviter le doublon avec .field__toggle */
input[type="password"]::-ms-reveal { display: none; }

.field__toggle {
    display: inline-flex;
    /* Zone tactile WCAG 2.5.5 : padding + marge négative agrandissent la zone cliquable
       sans déplacer les éléments voisins (1.5rem SVG + 2×var(--spacing-xs4) = 2.7rem ≈ 43px). */
    padding: var(--spacing-xs4);
    margin: calc(-1 * var(--spacing-xs4));
    background: none;
    border: none;
    color: var(--color-input-icon);
    cursor: pointer;
    line-height: 0;
    border-radius: var(--border-radius-sm);

    & svg {
        width: 1.5rem; /* 24px (1rem = 16px) */
        height: 1.5rem;
    }

    & .field__toggle-eye-off { display: none; }

    &[aria-pressed="true"] .field__toggle-eye     { display: none; }
    &[aria-pressed="true"] .field__toggle-eye-off { display: inline; }
}

.field__chevron {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--field-border-color, var(--color-input-border)); /* même variable que la bordure de .form-control (.field__control) */
    pointer-events: none;
    line-height: 0;

    & svg {
        width: 1.5rem; /* 24px (1rem = 16px) */
        height: 1.5rem;
    }
}

/* Icône d'erreur : ancrée à droite de l'input par défaut (champs simples). */
.field__error-icon {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    display: none;
    color: var(--color-error);
    line-height: 0;

    & svg {
        width: 1.2rem;
        height: 1.2rem;
    }
}

/* Quand elle est groupée avec d'autres icônes (œil), elle suit le flux du conteneur flex. */
.field__icons .field__error-icon {
    position: static;
    transform: none;
}

/* Cadenas d'un champ en lecture seule (décoratif : l'état est porté par l'attribut readonly + le hint). */
.field__lock-icon {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    color: var(--color-text-muted-hero);
    line-height: 0;
    pointer-events: none;

    & svg {
        width: 1.6rem;
        height: 1.6rem;
    }
}

.field__hint {
    display: block;
    margin-bottom: var(--spacing-xs4);
    color: var(--color-text-muted);
}

/* Indication autonome (non rattachée à un champ) — ex. rappel sous l'étape email. */
.field__hint--block {
    margin: calc(-1 * var(--spacing-xs3)) 0 var(--spacing-lg);
}

.field__error {
    display: none;
    margin-top: var(--spacing-xs4);
    color: var(--color-error-text); /* #c0392b — 5.5:1 sur blanc, 4.8:1 sur fond héros (WCAG AA) */
}

/* Le focus (bordure bleue, donc aussi le chevron via --field-border-color) est déjà géré
   par .field__control:focus-within ci-dessus. L'anneau visuel reste sous la règle globale
   :focus-visible (utilities.css). */

/* Neutralise :invalid (navigateur) et .input-validation-error (MVC/jQuery Validate).
   Dans les composants .field, l'état d'erreur est géré exclusivement par
   .field.is-invalid posé par les scripts natifs — jamais par CSS seul.
   Note : pas de outline:none ici — la règle globale :focus-visible (utilities.css)
   gère le focus ring naturellement sans conflit. */
.field .form-control:invalid,
.field .form-control.input-validation-error {
    border-color: var(--field-border-color, var(--color-input-border));
    border-radius: var(--border-radius-sm);
    box-shadow: none;
    color: var(--color-input-text);
}

/* État invalide (posé par les scripts de page).
   Même spécificité (0,3,0) que la neutralisation :invalid ci-dessus, mais apparaît
   APRÈS dans la source → gagne par cascade sans !important. Le sélecteur &:focus
   atteint (0,4,0) > (0,3,0) de la neutralisation.
   --field-border-color réassignée ici (et sur :focus-within, plus bas) : la bordure ET
   le chevron passent au rouge ensemble, y compris pendant le focus. */
.field.is-invalid {
    & .field__control {
        --field-border-color: var(--color-error);

        &:focus-within {
            --field-border-color: var(--color-error);
        }
    }

    & .form-control {
        padding-right: 4.4rem; /* réserve la place pour l'icône d'erreur */
        border-color: var(--field-border-color);
        border-radius: var(--border-radius-sm);

        /* La bordure reste rouge même en focus ; pas d'anneau :focus-visible (retiré,
           cf. forms.css) — le rouge suffit déjà comme indicateur de focus. */
        &:focus,
        &:focus-visible {
            outline: none;
            border-color: var(--field-border-color);
        }
    }

    & .field__error-icon {
        display: inline-flex;
    }

    /* Select : l'icône d'erreur reste masquée — le chevron occupe la droite.
       Spécificité (0,4,0) > (0,3,0) de & .field__error-icon ci-dessus. */
    & .field__control--select .field__error-icon {
        display: none;
    }

    & .field__error {
        display: block;
    }
}

/* ===== .form__checkbox-group — groupe de cases à cocher « au moins une requise » (composant
   générique) =====
   Marqueur posé en plus de la classe de mise en page propre à la page (ex. .acnm-warranties,
   AssurancesCumulativesNMForm). État géré par window.Validators.validateCheckboxGroup
   (Scripts/Visa/utils/validators.js), qui pose/retire is-invalid sur le groupe LUI-MÊME selon
   qu'au moins une de ses input[type="checkbox"] est cochée. Révèle ici le message d'erreur
   (.field__error, même contrat que les champs) ; la bordure rouge de chaque case reste à la
   charge de la page consommatrice (nom de classe de la boîte custom non unifié site-wide —
   voir ex. .acnm-warranties.is-invalid .acnm-warranty-box::before,
   pages/assurances-cumulatives-nm-form.css). */
.form__checkbox-group.is-invalid .field__error {
    display: block;
}

/* Textarea : redimensionnement vertical uniquement (largeur fixée par le layout).
   L'icône d'erreur est ancrée en haut à droite au lieu du centre (50%). */
.field__control--textarea .form-control {
    height: auto; /* la hauteur fixe de .form-control (forms.css) ne doit pas écraser le sizing par "rows" */
    resize: vertical;
}

.field__control--textarea .field__error-icon {
    top: 1.2rem;
    transform: none;
}