/* ===== RESPONSIVE BREAKPOINTS ===== */

/* ===== MOBILE FIRST APPROACH =====  */

/* Extra Small devices (phones, less than 576px) */
/* Styles par défaut - mobile first */

/* Extra small devices (480px and up) — document-header une seule ligne */
/* 480px ÷ 16 = 30em */
@media (min-width: 30em) {
    /* Ligne unique pour tous les cas */
    .document-header {
        flex-wrap: nowrap;
    }

    /* _DocumentsListToUpload : document-actions inline, avant le chevron (order: 3) */
    .document-actions {
        order: 3;
        flex: 0 0 auto;
        flex-direction: row;
        width: auto;
        position: static;
    }

    .document-actions button:not(.file-menu-trigger) {
        width: auto;
    }

    .document-actions .file-menu-trigger {
        display: none;
    }

    .document-actions .file-actions {
        display: flex;
        flex-direction: row;
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: none;
        padding: 0;
        min-width: 0;
        gap: var(--spacing-xs6);
    }

    /* _DigitizedDocumentsList : btn-file-trigger inline, avant le chevron (order: 3), burger masqué */
    .document-header > .btn-file-trigger {
        order: 3;
        flex: 0 0 auto;
        width: auto;
    }

    .document-header .digitized-menu-trigger {
        display: none;
    }

    .document-header .digitized-file-actions {
        display: flex;
        flex-direction: row;
        order: 3;
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: none;
        padding: 0;
        min-width: 0;
        gap: var(--spacing-xs6);
    }

    .collapse-document-info {
        order: 4;
    }

    /* uploaded-file-item : burger masqué, file-actions inline */
    .uploaded-file-item .document-status-icon {
        order: -1;
    }

    .file-menu-trigger {
        display: none;
    }

    .file-actions {
        display: flex;
        flex-direction: row;
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: none;
        padding: 0;
        min-width: 0;
        gap: var(--spacing-xs6);
        flex-shrink: 0;
    }

    /* Aligne "Supprimer" avec le bord droit de .document-actions/.btn-file-trigger : le
       document-header réserve à droite la colonne .collapse-document-info (gap + marges +
       largeur), absente sur .uploaded-file-item (pas de chevron). Ne PAS appliquer à
       .digitized-file-actions : ces lignes ont déjà leur propre .collapse-document-info,
       ce margin-right les décalait en trop (double compensation). */
    .uploaded-file-item .file-actions {
        margin-right: calc(var(--spacing-xs) + var(--spacing-xs3) * 2 + 1.5rem);
    }

    .file-action-link {
        padding: var(--spacing-xs3);
        width: auto;
    }
}

/* Small devices (landscape phones, 576px and up) */
/* 576px ÷ 16 = 36em */
@media (min-width: 36em) {
    /* Une seule ligne : boutons à gauche, upload-summary à droite */
    .footer-row {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--spacing-md);
    }

    /* upload-summary poussé à droite (inversé par rapport au DOM) */
    .footer-row .upload-summary {
        order: 4;
        margin-left: auto;
        justify-content: flex-end;
    }

    /* Les 3 boutons sur une seule ligne, poussés en premier */
    .footer-actions-buttons {
        order: 1;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-sm);
    }

    /* Désactive le wrapper mobile : btnReturnTo, btn-save s'intègrent dans la ligne */
    .footer-actions-buttons .footer-row-bottom {
        display: contents;
    }

    /* Ordre ≥576px : btnReturnTo → btn-save → btn-validate */
    .footer-actions-buttons #btnReturnTo  { order: 1; }
    .footer-actions-buttons #btn-save     { order: 2; }
    .footer-actions-buttons #btn-validate { order: 3; width: auto; }
}

/* ===== RESPONSIVE UTILITIES ===== */