/*
 * Formulaires. La structure (`.form-body`, `.field`, `.field-label`...) est
 * produite par le theme Twig `templates/form/theme.html.twig`, ce qui evite
 * d'ajouter des classes dans chaque gabarit.
 */

.form-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--rh-space-4);
    align-items: start;
}

/* Les champs longs occupent toute la largeur : une adresse postale ou un motif
   juridique sur une demi-colonne est illisible. */
.form-body > .field-wide,
.form-body > .field-choices,
.form-body > .field:has(textarea),
.form-body > .field:has(.collection) {
    grid-column: 1 / -1;
}

fieldset.field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field {
    display: grid;
    gap: var(--rh-space-2);
    min-width: 0;
    align-content: start;
}

.field-label,
legend.field-label {
    display: block;
    padding: 0;
    color: var(--rh-ink-soft);
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.3;
}

.field-label .field-required {
    margin-left: 2px;
    color: var(--rh-danger);
}

.field-hint {
    margin: 0;
    color: var(--rh-muted);
    font-size: 0.78rem;
}

.field-errors {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    color: var(--rh-danger);
    font-size: 0.78rem;
    font-weight: 600;
    list-style: none;
}

/* Controles --------------------------------------------------------------- */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
select,
textarea {
    width: 100%;
    min-height: 38px;
    padding: var(--rh-space-2) var(--rh-space-3);
    border: 1px solid var(--rh-line-strong);
    border-radius: var(--rh-radius-sm);
    background: var(--rh-surface);
    color: var(--rh-ink);
    font-size: 0.875rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--rh-muted);
    opacity: 1;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
    border-color: var(--rh-primary-line);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--rh-primary);
    box-shadow: var(--rh-ring);
    outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--rh-surface-strong);
    color: var(--rh-muted);
    cursor: not-allowed;
}

textarea {
    min-height: 6.5rem;
    line-height: 1.5;
    resize: vertical;
}

select {
    padding-right: var(--rh-space-6);
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
        linear-gradient(135deg, currentcolor 50%, transparent 50%);
    background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

select[multiple] {
    padding-right: var(--rh-space-3);
    background-image: none;
}

.field-invalid input,
.field-invalid select,
.field-invalid textarea {
    border-color: var(--rh-danger);
}

/* Champ fichier : l'element natif est habille par son bouton interne. */

input[type="file"] {
    width: 100%;
    padding: var(--rh-space-2);
    border: 1px dashed var(--rh-line-strong);
    border-radius: var(--rh-radius-sm);
    background: var(--rh-surface-muted);
    color: var(--rh-ink-soft);
    font-size: 0.84rem;
}

input[type="file"]::file-selector-button {
    margin-right: var(--rh-space-3);
    padding: var(--rh-space-2) var(--rh-space-3);
    border: 1px solid var(--rh-line-strong);
    border-radius: var(--rh-radius-sm);
    background: var(--rh-surface);
    color: var(--rh-ink);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 620;
}

input[type="file"]::file-selector-button:hover {
    border-color: var(--rh-primary);
    color: var(--rh-primary);
}

input[type="color"] {
    width: 3.25rem;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--rh-line-strong);
    border-radius: var(--rh-radius-sm);
    background: var(--rh-surface);
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--rh-primary);
    cursor: pointer;
}

/* Cases a cocher et boutons radio ---------------------------------------- */

.field-check {
    display: flex;
    align-items: center;
    gap: var(--rh-space-3);
    flex-wrap: wrap;
    min-height: 38px;
    padding: var(--rh-space-2) var(--rh-space-3);
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-sm);
    background: var(--rh-surface-muted);
}

.field-check .field-label {
    margin: 0;
    cursor: pointer;
}

.field-check .field-hint,
.field-check .field-errors {
    flex-basis: 100%;
}

.field-choices > .choices-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--rh-space-2);
    padding: var(--rh-space-3);
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-md);
    background: var(--rh-surface-muted);
}

.choices-box .field-check {
    background: var(--rh-surface);
}

/* Groupes composes : date/heure eclatees, sous-formulaires. */

.field-group {
    display: flex;
    gap: var(--rh-space-2);
    flex-wrap: wrap;
}

.field-group > select,
.field-group > input {
    width: auto;
    min-width: 5.5rem;
    flex: 1 1 auto;
}

/* Collections repetables -------------------------------------------------- */

.collection {
    display: grid;
    gap: var(--rh-space-3);
    grid-column: 1 / -1;
}

.collection-items {
    display: grid;
    gap: var(--rh-space-2);
}

.collection-row {
    display: flex;
    align-items: flex-end;
    gap: var(--rh-space-3);
    padding: var(--rh-space-3) var(--rh-space-4);
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-md);
    background: var(--rh-surface-muted);
}

.collection-row > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Les lignes d'une collection sont compactes : les champs s'alignent sur une
   seule rangee tant que la place le permet. Le selecteur porte sur l'enveloppe
   du widget compose, qui n'est pas le formulaire racine et n'a donc pas la
   classe `.form-body`. */
.collection-row > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--rh-space-3);
    align-items: start;
}

.collection-empty {
    padding: var(--rh-space-4);
    border: 1px dashed var(--rh-line-strong);
    border-radius: var(--rh-radius-md);
    color: var(--rh-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* Pied de formulaire ----------------------------------------------------- */

.form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rh-space-2);
    flex-wrap: wrap;
    margin-top: var(--rh-space-5);
    padding-top: var(--rh-space-4);
    border-top: 1px solid var(--rh-line);
}

.form-footer-spread {
    justify-content: space-between;
}

/* Formulaire d'authentification : une seule colonne, pleine largeur. */

.form-stack .form-body {
    grid-template-columns: 1fr;
}

.form-stack .form-footer {
    margin-top: var(--rh-space-4);
    padding-top: 0;
    border-top: 0;
}

.form-stack .form-footer .button {
    width: 100%;
}

.form-stack button {
    width: 100%;
}

/* Filtres en ligne au-dessus d'un tableau. */

.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--rh-space-3);
    flex-wrap: wrap;
}

.filter-bar .field {
    min-width: 11rem;
}