/*
 * Editorial form of a back office section — Figma "Frame 519" (4687:21010).
 *
 * The maquette draws it under the table of the "Phrase promotionnelle" screen: a 600px column, 24px
 * between groups, and in each group a plain label sitting above a bordered box. `--mo-spacing-sm` is
 * the maquette's 24px exactly — the back office is designed on the 1920px canvas only, and that's the
 * value the token resolves to at that width (docs/technique/back-office-layout.md).
 *
 * That is deliberately NOT the portal `.mo-field`, whose label floats inside the box: the two are
 * different components in Figma, and a back office form is filled with the labels always readable
 * rather than with the compact chrome of a sign-in screen. Both are styled from the same tokens, so
 * they stay in the same family without sharing a rule.
 */

.mo-admin-form {
    display: flex;
    max-width: 600px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mo-spacing-sm);
}

/* The forms that carry a media preview or a long editorial body need the full column. */
.mo-admin-form--wide {
    max-width: 900px;
}

/*
 * 8px between a label and its control, not 16: measured on the form of the maquette (4687:21010),
 * where every label sits 24 tall with its field 8 below. The vertical gap between groups themselves
 * is set on `.mo-admin-form` above — see the comment at the top of this file.
 */
.mo-admin-form__group {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--mo-spacing-xxs);
}

/*
 * A group dropped by `conditional-field` — the "Catégorie" row of a business article. Restated here
 * because the `display: flex` above wins over the `[hidden]` rule of the reset, which has the same
 * specificity and comes earlier in the cascade.
 */
.mo-admin-form__group[hidden] {
    display: none;
}

/* Two fields side by side — "Date de début" and "Date de fin" in the maquette. */
.mo-admin-form__row {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--mo-spacing-sm);
}

.mo-admin-form__row > .mo-admin-form__group {
    width: auto;
    min-width: 220px;
    flex: 1 1 0;
}

.mo-admin-form__label {
    color: var(--mo-text-default-dark);
    font-size: var(--mo-font-size-body-md);
    font-weight: var(--mo-font-weight-body);
    line-height: var(--mo-line-height-body-md);
}

/*
 * A single-line control is 40px tall (4687:20994), like every other control of the design system.
 * A textarea keeps the padding, having no single line to centre.
 */
.mo-admin-form__control {
    width: 100%;
    height: var(--mo-scale-500);
    box-sizing: border-box;
    padding: 0 var(--mo-scale-200);
    border: 1px solid var(--mo-border-default-medium);
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-default-white);
    color: var(--mo-text-body);
    font-family: inherit;
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
}

.mo-admin-form__control::placeholder {
    color: var(--mo-text-placeholder);
}

.mo-admin-form__control:focus-visible {
    border-color: var(--mo-border-information);
    outline: var(--mo-focus-ring-width) solid var(--mo-focus-ring-color);
    outline-offset: var(--mo-focus-ring-offset);
}

.mo-admin-form__control[aria-invalid='true'] {
    border-color: var(--mo-border-error);
}

.mo-admin-form__control:disabled {
    border-color: var(--mo-border-disabled);
    background-color: var(--mo-surface-disabled);
    color: var(--mo-text-disabled);
}

textarea.mo-admin-form__control {
    height: auto;
    padding-block: 10px;
    min-height: var(--mo-scale-800);
    resize: vertical;
}

/* The editorial bodies are long: they get the tall box of the WYSIWYG block of the specifications. */
textarea.mo-admin-form__control--rich {
    min-height: 220px;
    font-family: inherit;
}

select.mo-admin-form__control {
    /* The native arrow is drawn by the browser; without this the box is one line taller than a text
     * field on WebKit. */
    height: var(--mo-scale-500);
    padding-block: 0;
}

/* Checkboxes read left to right, unlike every other control of the form. */
.mo-admin-form__group--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--mo-spacing-xs);
}

.mo-admin-form__group--inline .mo-admin-form__control {
    width: auto;
    flex: none;
}

.mo-admin-form__help {
    margin: 0;
    color: var(--mo-text-placeholder);
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
}

.mo-admin-form__errors {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mo-admin-form__error {
    color: var(--mo-border-error);
    font-size: var(--mo-font-size-body-sm);
    font-weight: var(--mo-font-weight-semibold);
    line-height: var(--mo-line-height-body-sm);
}

/*
 * Character counter of the maquette, printed inside the bottom-right corner of the box ("0/100",
 * Figma 4687:21004). The box it sits in is 64px tall there, against 40px for a plain field: the
 * extra height is the room the counter takes, so it is padding on the control rather than a taller
 * box of its own.
 *
 * It is filled by the `char-count` Stimulus controller and is decoration only — the length is
 * enforced by `maxlength` in the browser and by the validator on the server.
 */
.mo-admin-form__counted {
    position: relative;
    display: flex;
}

.mo-admin-form__counted .mo-admin-form__control {
    height: var(--mo-scale-800);
    padding-bottom: var(--mo-scale-300);
}

.mo-admin-form__counter {
    position: absolute;
    right: var(--mo-scale-200);
    bottom: 6px;
    color: var(--mo-text-placeholder);
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
    pointer-events: none;
}

/*
 * A rich-text field (RichTextType) is Quill's toolbar plus its editor box, not the single control
 * the rule above overlays: as a row's in-flow flex items, the toolbar and the 100%-wide editor sit
 * side by side and the toolbar's own buttons wrap into a column at the left edge. Falling back to
 * block flow stacks them the normal way, and the counter prints below the editor instead of over it.
 */
.mo-admin-form__counted--rich {
    position: static;
    display: block;
}

.mo-admin-form__counted--rich .mo-admin-form__control {
    height: auto;
    padding-bottom: 10px;
}

.mo-admin-form__counted--rich .mo-admin-form__counter {
    position: static;
    display: block;
    margin-top: var(--mo-spacing-xxs);
    text-align: right;
}

/* Current media of an edit form, shown so the administrator knows what a blank file input keeps. */
.mo-admin-form__current {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-xs);
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-body-sm);
    line-height: var(--mo-line-height-body-sm);
}

/*
 * The non-image branch of MediaPreview renders a plain <a>, which the browser's user-agent
 * stylesheet otherwise colours blue regardless of the span's own color — an explicit UA rule
 * always wins over inheritance. This component is reused inside listing tables (trades, resource,
 * covering) as well as edit-form "current file" displays, so the fix belongs here rather than in
 * a table-specific class.
 */
.mo-admin-form__current a {
    color: inherit;
}

.mo-admin-form__preview {
    width: var(--mo-scale-1000);
    height: var(--mo-scale-500);
    border-radius: var(--mo-radius-sm);
    object-fit: cover;
}

.mo-admin-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mo-spacing-xs);
}