/**
 * GAS Forms — Styles de formulaires admin
 * =========================================
 * Chargé automatiquement sur toutes les pages admin GAS via GasCommonModule.
 * Ne jamais recréer ces classes dans un module.
 *
 * Dépend de : gas-design-tokens.css
 * Convention : BEM strict avec préfixe gas-form-
 */

/* =============================================
   GAS-FORM-GROUP — Conteneur de champ
   ============================================= */

.gas-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-xs);
    position: relative;
}

.gas-form-group__label {
    font-size: var(--gas-label-font-size, var(--gas-text-s));
    font-weight: var(--gas-label-font-weight, var(--gas-weight-medium));
    color: var(--gas-label-color, var(--gas-neutral-700));
    line-height: 1.4;
}

.gas-form-group__label--required::after {
    content: ' *';
    color: var(--gas-danger);
}

.gas-form-group__hint {
    font-size: var(--gas-text-xs);
    color: var(--gas-neutral-500);
    line-height: 1.4;
}

.gas-form-group__error {
    font-size: var(--gas-text-xs);
    color: var(--gas-danger);
    line-height: 1.4;
}

.gas-form-group--error .gas-form-control {
    border-color: var(--gas-danger);
    box-shadow: 0 0 0 2px var(--gas-danger-light);
}

/* =============================================
   GAS-FORM-CONTROL — Input / select / textarea
   ============================================= */

.gas-form-control {
    width: 100%;
    padding: var(--gas-input-padding, var(--gas-space-s) var(--gas-space-m));
    border: var(--gas-border-width, 1px) solid var(--gas-input-border, var(--gas-neutral-300));
    border-radius: var(--gas-input-radius, var(--gas-radius-s));
    font-size: var(--gas-input-font-size, var(--gas-text-m));
    font-family: var(--gas-font-family);
    background: var(--gas-input-bg, var(--gas-bg-surface));
    color: var(--gas-input-color, var(--gas-neutral-900));
    transition: border-color var(--gas-transition-normal), box-shadow var(--gas-transition-normal);
    box-sizing: border-box;
    line-height: 1.5;
}

.gas-form-control::placeholder {
    color: var(--gas-input-placeholder, var(--gas-neutral-400));
}

.gas-form-control:focus {
    outline: none;
    border-color: var(--gas-input-focus-border, var(--gas-primary));
    box-shadow: var(--gas-input-focus-shadow, 0 0 0 3px var(--gas-primary-ultra-light));
}

.gas-form-control:disabled {
    background: var(--gas-neutral-100);
    color: var(--gas-neutral-400);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Select spécifique */
select.gas-form-control {
    cursor: pointer;
    appearance: auto;
}

/* Textarea spécifique */
textarea.gas-form-control {
    resize: vertical;
    min-height: 80px;
}

/* =============================================
   GAS-FORM-INLINE — Champs côte à côte
   ============================================= */

.gas-form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gas-space-m);
    align-items: flex-end;
}

.gas-form-inline .gas-form-group {
    flex: 1;
    min-width: 160px;
}

.gas-form-inline .gas-form-group--shrink {
    flex: 0 0 auto;
}

/* =============================================
   GAS-FORM-2COL — Grille 2 colonnes
   ============================================= */

.gas-form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gas-space-m);
}

.gas-form-2col .gas-form-group--full {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .gas-form-2col {
        grid-template-columns: 1fr;
    }

    .gas-form-2col .gas-form-group--full {
        grid-column: 1;
    }
}

/* =============================================
   GAS-FORM-3COL — Grille 3 colonnes
   ============================================= */

.gas-form-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gas-space-m);
}

.gas-form-3col .gas-form-group--full {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .gas-form-3col {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .gas-form-3col {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   GAS-FORM-ACTIONS — Barre de boutons
   ============================================= */

.gas-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gas-space-s);
    padding-top: var(--gas-space-m);
    border-top: var(--gas-border-width, 1px) solid var(--gas-neutral-200);
    margin-top: var(--gas-space-l);
}

.gas-form-actions--left {
    justify-content: flex-start;
}

.gas-form-actions--between {
    justify-content: space-between;
}

@media (max-width: 600px) {
    .gas-form-actions {
        flex-direction: column-reverse;
    }

    .gas-form-actions .gas-button {
        width: 100%;
    }
}

/* =============================================
   GAS-FORM-SECTION — Bloc avec titre
   ============================================= */

.gas-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-m);
    padding: var(--gas-space-l);
    background: var(--gas-bg-surface);
    border: var(--gas-border-width, 1px) solid var(--gas-neutral-200);
    border-radius: var(--gas-radius-m);
}

.gas-form-section__title {
    font-size: var(--gas-text-l);
    font-weight: var(--gas-weight-semi);
    color: var(--gas-neutral-900);
    margin: 0 0 var(--gas-space-s) 0;
    padding-bottom: var(--gas-space-s);
    border-bottom: var(--gas-border-width, 1px) solid var(--gas-neutral-200);
}

.gas-form-section__description {
    font-size: var(--gas-text-s);
    color: var(--gas-neutral-500);
    margin: 0;
    line-height: 1.5;
}

/* =============================================
   GAS-FORM-CHECKBOX — Checkbox stylée
   ============================================= */

.gas-form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--gas-space-s);
    cursor: pointer;
    font-size: var(--gas-text-m);
    color: var(--gas-neutral-700);
    line-height: 1.4;
    user-select: none;
}

.gas-form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--gas-primary);
}

.gas-form-checkbox--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =============================================
   GAS-FORM-CHECKBOXES — Groupe de checkboxes
   ============================================= */

.gas-form-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gas-space-s) var(--gas-space-l);
}