/* Modales en plein écran sur mobile — copie de Refactia (Billing : app/mobile-modal.css, HEAD 65064bda).
 * Chargé juste après components/app-modal.css (components/design_system_overlay_stylesheets.html.twig).
 * Sous 760 px : surface plein écran sans rayon ni ombre, croix en haut à gauche ; la croix devient
 * une flèche retour (mobile-arrow-left.svg) pour une sous-modale ou quand le bouton secondaire
 * est « Retour » (app/modal-mobile-actions.js).
 * Alias de classes propres à Refactia (paymanual, cash-statement, ugm) non repris.
 * Écart Badging : couches lues sur --z-layer-modal (10100, app/navbar/sidebar.css) au lieu de
 * --z-layer-mobile-modal (1400), qui passerait sous la barre latérale et les panneaux de Badging.
 */
@media (max-width: 760px) {
    :is(
        .app-modal--form-action.is-open,
        .app-modal--autonomous:not([hidden]),
        .box-confirm.is-open
    ) {
        position: fixed !important;
        z-index: var(--z-layer-modal, 10100) !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        box-sizing: border-box;
    }

    .app-modal.app-modal--custom-menu.is-open {
        z-index: calc(var(--z-layer-modal, 10100) + var(--custom-menu-stack-z, 1120) - 1120) !important;
    }

    :is(
        .app-modal.app-modal--form-action.is-open > .app-modal__surface,
        .app-modal.app-modal--autonomous:not([hidden]) > .app-modal__surface,
        dialog.app-modal[open] > .app-modal__surface,
        .app-modal.app-modal--custom-menu.is-open .box-confirmationDialog.app-modal__surface
    ) {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    :is(
        .app-modal__header,
        .modal-card-header,
        .modal-panel__header,
        .box-confirmationDialog .title-form
    ) {
        position: relative;
        box-sizing: border-box;
        min-height: 72px;
        height: auto !important;
        padding: 16px 20px 16px 64px !important;
    }

    :is(
        .app-modal__header,
        .modal-card-header,
        .modal-panel__header,
        .box-confirmationDialog .title-form
    ) :is(
        .app-modal__titles,
        .modal-card-header__head,
        .modal-panel__header > div
    ) {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    :is(
        .app-modal__header,
        .modal-card-header,
        .modal-panel__header,
        .box-confirmationDialog .title-form
    ) :is(
        .app-modal__title,
        .app-modal__subtitle,
        .modal-card-header__title,
        .modal-card-header__subtitle,
        .modal-panel__title,
        .modal-panel__subtitle
    ) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    :is(
        .modal-card-header__close,
        .modal-panel__close,
        .box-confirmationDialog .title-form > .close,
        .app-modal__close,
        .app-modal button.app-close
    ) {
        position: absolute !important;
        top: 16px !important;
        right: auto !important;
        left: 12px !important;
        z-index: 3;
        margin: 0 !important;
    }

    :is(
        .modal-card-header__head:not(.app-modal__titles),
        .modal-panel__header:not(.app-modal__header),
        .box-confirmationDialog .title-form
    ) {
        padding-left: 62px !important;
        padding-right: 0 !important;
    }

    /* Flèche retour, sur demande, pour une modale ouverte depuis une autre. */
    :is(
        [data-mobile-modal-navigation="back"],
        .mobile-modal--submodal
    ) :is(
        .modal-card-header__close,
        .modal-panel__close,
        .box-confirmationDialog .title-form > .close,
        .app-modal__close,
        .app-modal button.app-close
    )::before {
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        background: url('../../img/icon/mobile-arrow-left.svg') center / contain no-repeat;
        filter: brightness(0) invert(1);
    }

    .app-modal .app-modal__close.app-modal__close--back::before,
    .app-modal__close.app-modal__close--back::before {
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        background: url('../../img/icon/mobile-arrow-left.svg') center / contain no-repeat;
        filter: brightness(0) invert(1);
    }

    :is([data-mobile-modal-navigation="back"], .mobile-modal--submodal) .app-close > img,
    .app-close.app-modal__close--back > img {
        visibility: hidden;
    }
}