/*
 * `C10` — the repeatable "fichier associé" block of the laboratories and the toolbox partners
 * (§§ 4.4.2, 4.8.2, capture `media/image22.png`).
 *
 * A bordered white box, one per attached file, holding its own copy of the editorial form fields
 * (`mo-admin-form__*`) plus a header carrying the `C9` drag handle and a square red delete button.
 */

.mo-admin-attached-files {
    display: flex;
    width: 100%;
    max-width: 900px;
    flex-direction: column;
    gap: var(--mo-spacing-sm);
}

.mo-admin-attached-files__list {
    display: flex;
    flex-direction: column;
    gap: var(--mo-spacing-sm);
}

.mo-admin-attached-file {
    display: flex;
    flex-direction: column;
    gap: var(--mo-spacing-xxs);
    padding: var(--mo-spacing-sm);
    border: 1px solid var(--mo-border-default-medium);
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-default-white);
}

.mo-admin-attached-file__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Square red delete button, distinct from `.mo-admin-badge--error`: the maquette draws it as an
 * icon alone, not a labelled pill. */
.mo-admin-attached-file__remove {
    display: inline-flex;
    width: var(--mo-scale-500);
    height: var(--mo-scale-500);
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-error);
    color: var(--mo-text-default-light);
    cursor: pointer;
}

.mo-admin-attached-file__remove:hover {
    filter: brightness(0.92);
}

.mo-admin-attached-file__remove:focus-visible {
    outline: var(--mo-focus-ring-width) solid var(--mo-focus-ring-color);
    outline-offset: var(--mo-focus-ring-offset);
}

.mo-admin-attached-file__remove svg {
    width: 18px;
    height: 18px;
}

/* The block being dragged, and the gap it leaves behind — SortableJS's own classes, same treatment
 * as the `C9` tables. */
.mo-admin-attached-file.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen .mo-admin-table__handle {
    color: var(--mo-text-action);
}