/* =============================================================================
   responsive-areas.css
   Layer responsive condiviso per le aree riservate (Backoffice + Area Cliente).

   Le pagine definiscono i propri stili in blocchi <style> inline (resi nel
   <body>, quindi DOPO i <link> del <head>). Per vincere a parità di classe le
   regole qui sono ancorate a .backoffice-content / .client-content così da
   avere specificità 0-2-0 e prevalere indipendentemente dall'ordine sorgente.

   Obiettivo: niente overflow orizzontale e header/toolbar che vanno a capo su
   schermi stretti, SENZA toccare la logica o riscrivere le 27 pagine.
   ============================================================================= */

/* 1. Stop netto all'overflow orizzontale ----------------------------------- */
.backoffice-content,
.client-content {
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word; /* stringhe lunghe (ref, URL, token) vanno a capo */
}

/* Immagini, media e blocchi preformattati non superano mai il contenitore */
.backoffice-content img,
.client-content img,
.backoffice-content pre,
.client-content pre,
.backoffice-content video,
.client-content video {
    max-width: 100%;
    height: auto;
}

/* Le tabelle larghe scrollano dentro il loro wrapper invece di allargare la pagina */
.backoffice-content .table-responsive,
.client-content .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 2. Fix dello shrink nei flex --------------------------------------------- */
/* min-width:auto (default) impedisce a input/testo di restringersi: un campo di
   ricerca lungo spinge fuori i bottoni accanto. Lasciamo restringere le righe
   flex piu' comuni di queste pagine. */
.backoffice-content .toolbar-controls > *,
.backoffice-content .toolbar-title,
.backoffice-content .search-wrap,
.backoffice-content .page-header__content,
.client-content .toolbar-controls > *,
.client-content .search-wrap,
.client-content .page-header__content {
    min-width: 0;
}

/* =============================================================================
   Mobile / tablet stretto
   ============================================================================= */
@media (max-width: 768px) {

    /* Padding piu' compatto sui wrapper comuni (le pagine portano 2rem inline).
       .backoffice-container e' gia' paddato con specificita' 0-2-0 dal layout,
       quindi serve !important per batterlo. */
    .backoffice-content .page-header,
    .backoffice-content .backoffice-container,
    .backoffice-content .filters-section,
    .backoffice-content .toolbar-bar,
    .client-content .page-header,
    .client-content .backoffice-container,
    .client-content .filters-section,
    .client-content .toolbar-bar {
        padding: 1rem !important;
    }

    /* Header e toolbar: titolo e azioni impilati in verticale invece che a fianco */
    .backoffice-content .page-header,
    .backoffice-content .page-header--flex,
    .backoffice-content .toolbar-title,
    .client-content .page-header,
    .client-content .page-header--flex,
    .client-content .toolbar-title {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    /* I bottoni d'azione nell'header diventano a tutta larghezza: niente overflow */
    .backoffice-content .header-actions,
    .backoffice-content .page-header__actions,
    .client-content .header-actions,
    .client-content .page-header__actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .backoffice-content .header-actions .btn,
    .backoffice-content .page-header__actions .btn,
    .backoffice-content .toolbar-title .btn,
    .client-content .header-actions .btn,
    .client-content .page-header__actions .btn,
    .client-content .toolbar-title .btn {
        width: 100%;
    }

    /* Le .row di Bootstrap 4 hanno margini negativi che possono sporgere */
    .backoffice-content .row,
    .client-content .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Le colonne Bootstrap a fianco vanno impilate sui form stretti */
    .backoffice-content .filters-section [class*="col-"],
    .client-content .filters-section [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Titoli grandi vanno a capo e si rimpiccioliscono per non forzare lo scroll */
    .backoffice-content h1,
    .client-content h1,
    .backoffice-content .header-content h1,
    .client-content .header-content h1 {
        font-size: 1.35rem;
        overflow-wrap: anywhere;
    }
}
