/*
 * Champs de formulaire — porté de Refactia (Billing : components/inputs.css, 18/10/2026).
 *
 * Mêmes classes que Refactia : label.input-field > span.input-field__label + contrôle,
 * input-field--fluid, input-field-group, input-field__controls, form-line,
 * interrupteur switch-wrapper > switch + switch-label.
 * Neutres, bordures et états : valeurs de Refactia (Billing HEAD 65064bda, gamme bleu nuit) ;
 * seules les teintes de marque (focus, interrupteur coché) passent au bleu Badging.
 *
 * Aucun sélecteur global (input, select, .switch, .slider nus) : seuls les
 * éléments qui portent ces classes changent ; les écrans pas encore migrés
 * gardent leurs styles. Contrat : var/charte-refactia/contrat-composants.md.
 */

/* -------------------------------------------------------------------------- */
/* Ligne de formulaire et groupes                                             */
/* -------------------------------------------------------------------------- */

.form-line {
    display: flex;
    flex-direction: column;
}

/* Groupe vertical de champs : espacement régulier sans marges de page. */
.input-field-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Champ                                                                      */
/* -------------------------------------------------------------------------- */

.input-field {
    --input-focus-color: rgba(31, 111, 255, 0.62);
    --input-focus-ring: rgba(31, 111, 255, 0.16);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.input-field--fluid {
    width: 100%;
    max-width: none;
    align-self: stretch;
}

.input-field__label {
    display: block;
    margin: 0;
    color: #3f5978;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

/* Aide ou erreur sous le contrôle (ajout Badging, même typographie que l'aide des modales). */
.input-field__help {
    margin: 0;
    color: #7a8da5;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: var(--ds-weight-medium, 500);
    line-height: 1.5;
}

.input-field__help--error {
    color: #c14747;
}

.input-field__controls {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.input-field > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.input-field > select,
.input-field > textarea,
.input-field > .input-field__controls > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.input-field > .input-field__controls > select,
.input-field > .input-field__controls > textarea {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid rgba(26, 69, 115, 0.22);
    border-radius: 12px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-sizing: border-box;
    background: #ffffff;
    color: #1a3250;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.input-field > input:not([type="hidden"])::placeholder,
.input-field > textarea::placeholder,
.input-field > .input-field__controls > input:not([type="hidden"])::placeholder,
.input-field > .input-field__controls > textarea::placeholder {
    color: #7a8da5;
    opacity: 1;
}

.input-field > input:not([type="hidden"]):hover,
.input-field > select:hover,
.input-field > textarea:hover,
.input-field > .input-field__controls > input:not([type="hidden"]):hover,
.input-field > .input-field__controls > select:hover,
.input-field > .input-field__controls > textarea:hover,
.input-field .ts-wrapper:not(.disabled):not(.locked) .ts-control:hover {
    border-color: rgba(26, 69, 115, 0.42);
}

.input-field > input:not([type="hidden"]):focus,
.input-field > input:not([type="hidden"]):focus-visible,
.input-field > select:focus,
.input-field > select:focus-visible,
.input-field > textarea:focus,
.input-field > textarea:focus-visible,
.input-field > .input-field__controls > input:not([type="hidden"]):focus,
.input-field > .input-field__controls > input:not([type="hidden"]):focus-visible,
.input-field > .input-field__controls > select:focus,
.input-field > .input-field__controls > select:focus-visible,
.input-field > .input-field__controls > textarea:focus,
.input-field > .input-field__controls > textarea:focus-visible,
.input-field .ts-wrapper.focus .ts-control {
    border-color: var(--input-focus-color);
    outline: 0;
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.input-field > input:not([type="hidden"]):disabled,
.input-field > select:disabled,
.input-field > textarea:disabled,
.input-field > .input-field__controls > input:not([type="hidden"]):disabled,
.input-field > .input-field__controls > select:disabled,
.input-field > .input-field__controls > textarea:disabled,
.input-field .ts-wrapper.disabled .ts-control,
.input-field .ts-wrapper.locked .ts-control {
    border-color: rgba(26, 69, 115, 0.14);
    background: #eef3f9;
    box-shadow: none;
    color: #7a8da5;
    cursor: not-allowed;
    opacity: 1;
}

.input-field > input:not([type="hidden"])[readonly],
.input-field > textarea[readonly],
.input-field > .input-field__controls > input:not([type="hidden"])[readonly],
.input-field > .input-field__controls > select[readonly],
.input-field > .input-field__controls > textarea[readonly] {
    background: #f7fafc;
    color: #526a86;
    cursor: default;
}

/* Erreur de saisie : aria-invalid ou classe historique error-input. */
.input-field > :is(input, select, textarea):is([aria-invalid="true"], .error-input),
.input-field > .input-field__controls > :is(input, select, textarea):is([aria-invalid="true"], .error-input),
.input-field .ts-wrapper.error-input .ts-control {
    border-color: #c14747;
    box-shadow: 0 0 0 3px rgba(193, 71, 71, 0.16);
}

/* Tom Select dans un champ (le menu déroulant monté dans body garde son style). */
.input-field .ts-wrapper {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.input-field .ts-wrapper .ts-control {
    min-height: 44px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid rgba(26, 69, 115, 0.22);
    border-radius: 12px;
    box-sizing: border-box;
    background: #ffffff;
    color: #1a3250;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

@media (max-width: 760px) {
    .input-field__label {
        font-size: 13px;
        line-height: 1.3;
    }

    .input-field > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .input-field > select,
    .input-field > textarea,
    .input-field > .input-field__controls > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .input-field > .input-field__controls > select,
    .input-field > .input-field__controls > textarea,
    .input-field .ts-wrapper .ts-control {
        min-height: 44px;
        font-size: 14px;
    }
}

/* -------------------------------------------------------------------------- */
/* Interrupteur : switch-wrapper > [switch-label] + label.switch + switch-label */
/* -------------------------------------------------------------------------- */

.switch-wrapper {
    display: inline-flex;
    align-items: center;
}

.switch-wrapper .switch-label {
    margin: 0 8px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

/* La boîte autour du curseur. */
.switch-wrapper .switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 60px;
    height: 34px;
    margin: 0;
}

/* Case native masquée, toujours focalisable. */
.switch-wrapper .switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.switch-wrapper .slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 34px;
    transition: background-color 0.4s, box-shadow 0.2s;
}

.switch-wrapper .slider::before {
    position: absolute;
    left: 4px;
    bottom: 4px;
    width: 26px;
    height: 26px;
    background-color: #ffffff;
    border-radius: 50%;
    content: "";
    transition: transform 0.4s;
}

.switch-wrapper .switch input:checked + .slider {
    background-color: var(--ds-brand, #1f6fff);
}

.switch-wrapper .switch input:focus-visible + .slider {
    box-shadow: 0 0 0 3px rgba(31, 111, 255, 0.16);
}

.switch-wrapper .switch input:checked + .slider::before {
    transform: translateX(26px);
}

.switch-wrapper .switch input:disabled + .slider {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .switch-wrapper .slider,
    .switch-wrapper .slider::before,
    .input-field > :is(input, select, textarea),
    .input-field .ts-wrapper .ts-control {
        transition: none;
    }
}