/* ========= Tablet e mobile (<= 768px) ========= */
@media (max-width: 768px) {

    /* Header area utente: colonna */
    .appendData {
        flex-direction: column;
        align-items: stretch !important;
        gap: 16px;
    }

        /* Dettagli utente uno sotto l'altro */
        .appendData .appendDetails {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

    /* Tab in orizzontale con scroll */
    .containerTab {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Riga tab + pulsante: manda a capo */
    .containerTables > .d-flex.align-items-center {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Tabelle scrollabili orizzontalmente */
    .tableuser {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .tableuser table {
            min-width: 720px;
        }

    /* Modale nuova prenotazione: usa viewport */
    .newBookingAdminModal {
        width: 94vw !important;
        height: 90vh !important;
    }

    /* Barra ricerca in modale: impila a 2 colonne */
    .containerLoadingResearch {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

        .containerLoadingResearch .inputGroup {
            width: 100% !important;
        }

        .containerLoadingResearch select,
        .containerLoadingResearch input[type="date"] {
            width: 100% !important;
        }

    /* Card camere: campi su più righe */
    .containerInputAdminBooking .d-flex.align-items-center {
        flex-wrap: wrap;
        gap: 12px;
    }

    .containerInputAdminBooking .inputGroup {
        width: 100%;
    }

    /* Loader logo più contenuto */
    .mainHiLoader img {
        max-width: 260px;
        width: 60vw !important;
    }
}

/* ========= Mobile piccolo (<= 576px) ========= */
@media (max-width: 576px) {

    /* Riduci altezza dell’hero iniziale */
    .container[style*="height:45vh"] {
        height: auto !important;
    }

    /* Tab più compatti */
    .containerTab .elementMenu {
        white-space: nowrap;
    }

    /* Tabelle un po' più strette per lo scroll */
    .tableuser table {
        min-width: 660px;
    }

    /* Barra ricerca in modale: impila a 1 colonna */
    .containerLoadingResearch {
        grid-template-columns: 1fr;
    }

    /* Bottone "Indietro" sempre visibile */
    .closeModal.generalButton {
        top: 16px !important;
        left: 16px !important;
    }

    /* Avatar più piccolo */
    .appendImageProfile > div {
        width: 100px !important;
        height: 100px !important;
    }

    .container {
        margin-bottom: 20px;
    }
}

/* ========= Desktop largo (>= 992px) — ripristini layout ========= */
/* ========= Desktop largo (>= 992px) — ripristini layout ========= */
@media (min-width: 992px) {

    /* Header area utente: fila */
    .appendData {
        flex-direction: row;
        align-items: center !important;
        gap: 16px;
    }

        /* Dettagli in 2 colonne quando c’è spazio */
        .appendData .appendDetails {
            display: grid;
            grid-template-columns: 1fr 200px; /* email prende lo spazio restante, telefono max 200px */
            column-gap: 16px;
            row-gap: 8px;
            align-items: center;
            max-width: 700px;
        }

            /* le "pill" si adattano alla colonna */
            .appendData .appendDetails .pillowUserArea {
                width: 100% !important;
                margin: 0 !important;
            }

            /* (extra sicurezza) distanzia la mail se fosse inline con altro */
            .appendData .appendDetails .userEmail {
                margin-right: 16px !important;
            }

    /* Tabelle usano larghezza piena */
    .tableuser table {
        min-width: 100%;
    }

}