/* ==========================================================================
   Foglio di stile comune del portale MyCB.

   Come quello del CRM, per ora contiene soltanto lo strato mobile: tutte le
   regole stanno dentro @media screen and (max-width:768px), quindi da computer
   non cambia niente, e non si accende nemmeno in stampa.

   Perche' i selettori iniziano con "html body": le pagine che passano da
   portal_header.php stampano il loro blocco <style> DOPO, e a parita' di forza
   vince chi viene dopo. Il rinforzo pero' non vince sempre: una pagina che usa
   due classi insieme, un #id, o che scrive lo stile dentro il tag, batte
   comunque queste regole. Gli stili dentro il tag da qui non si raggiungono.

   ATTENZIONE all'ordine, che non e' lo stesso ovunque. Nelle sette pagine che
   NON passano da portal_header.php (login, password-reset, accept-invite,
   privacy_email, policy_email, agenzie_elenco_pubblico, agenzie_mappa_pubblica)
   il collegamento a questo foglio e' stato messo DOPO il loro <style>, quindi
   li' l'ordine e' rovesciato e a parita' di forza vince questo foglio. Il
   trucco della "regola debole che lascia decidere la pagina" (vedi l'altezza
   delle finestre di dialogo, piu' sotto) funziona solo sulle pagine con
   l'intestazione comune.

   DIFFERENZA IMPORTANTE RISPETTO AL CRM: qui NON si schiacciano le griglie a
   una colonna sola. Nel portale ci sono nove punti in cui la pagina vuole
   davvero due colonne sul telefono (i riquadri dei numeri in sviluppo, lead,
   triage, ticket, agenzie attive, immobiliare), e quasi tutte le altre griglie
   usano auto-fit, che si adatta da solo. Qui il problema non era il numero di
   colonne ma il fatto che i contenitori non potevano stringersi.
   ========================================================================== */

@media screen and (max-width: 768px) {

  /* --- 1. Il contenitore della pagina deve potersi stringere ---------------
     body e' una colonna flessibile (serve a tenere il pie' di pagina in fondo)
     e .portal-container e' un suo elemento con min-width:auto, quindi non
     scendeva sotto la larghezza del proprio contenuto: bastava una tabella o
     una griglia larga e TUTTA la pagina diventava larga uguale. Da qui i 602px
     su schermo da 390, e gli 853 o 1400 sulle pagine piu' cariche. */
  html body .portal-container,
  html body main,
  html body footer { min-width: 0; }

  /* E qui sta la causa vera, che il solo min-width non risolveva.
     .portal-container ha "margin: 0 auto" per stare centrato. Dentro un body
     flessibile pero' i margini automatici hanno la precedenza sull'allargamento:
     il contenitore NON si allarga alla finestra, si dimensiona sul proprio
     contenuto. Bastava una tabella larga dentro e il contenitore diventava largo
     uguale, portandosi dietro tutta la pagina (845px in Impostazioni, 1128 in
     Utenti, 1400 in Mia Performance, su uno schermo da 390).
     Con una larghezza dichiarata non serve piu' allargarsi, e max-width:1400
     continua a fare il suo lavoro da computer. */
  html body .portal-container {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* --- 2. L'intestazione deve starci in una riga sola ----------------------
     Logo, nome agenzia, selettore agenzia e menu utente insieme non ci stanno.
     Invece di nasconderne pezzi si stringono gli spazi e si lascia che il nome
     dell'agenzia vada a puntini: l'insegna resta visibile, che e' la cosa che
     conta in un portale dove ogni agenzia vede la propria. */
  html body .header-container { padding: .6rem .75rem; gap: .5rem; }
  html body .header-left      { gap: .5rem; min-width: 0; flex: 1 1 auto; }
  html body .header-right     { gap: .5rem; min-width: 0; flex: 0 0 auto; }
  html body .dynamic-logo     { min-width: 0; gap: .4rem; }
  html body .logo-text        { min-width: 0; }
  html body .logo-brand-frame { min-width: 0; }
  html body .logo-dba-frame   { min-width: 0; }
  /* Il marchio e l'insegna non devono mai spezzarsi a meta' parola: o ci stanno
     interi, o finiscono con i puntini. Il logo si rimpicciolisce un po' per far
     posto: 46px di altezza su uno schermo da 390 sono troppi. */
  html body .portal-logo { height: 34px; }
  html body .logo-brand,
  html body .logo-agency {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html body .logo-brand  { font-size: .7rem; letter-spacing: .02em; }
  html body .logo-agency { font-size: .68rem; }
  /* Il codice agenzia: si tiene, ma non sempre. Il selettore agenzie compare
     solo a chi ne ha piu' di una (widget_agency_switcher.php si ferma subito se
     ce n'e' una sola). Quando c'e' il selettore lo spazio finisce e il codice si
     accavalla al logo: in quel caso si toglie, e si legge aprendo la tendina del
     selettore, che elenca le agenzie con il loro codice. Quando il selettore non
     c'e', lo spazio c'e' e il codice resta dov'e'. */
  html body .header-left > .agency-code { margin-left: .25rem; font-size: .65rem; }
  html body .header-container:has(.agency-switcher) .header-left > .agency-code { display: none; }

  /* Selettore agenzia: si stringe al simbolo e alla freccia. Il testo dentro non
     si nasconde per gusto: non c'e' spazio, e in molti casi e' vuoto comunque,
     perche' il widget lo riempie solo dopo un cambio agenzia. */
  html body .agency-switcher-btn { min-width: 0; width: auto; padding: .5rem .6rem; }
  html body .agency-current      { gap: .35rem; }
  html body .agency-info         { display: none; }
  html body .agency-icon         { font-size: 1.1rem; }

  /* La tendina e' agganciata al bottone, che ora e' stretto: senza questa riga
     diventava larga 60px e alta 400, con i nomi delle agenzie schiacciati in una
     colonna da 52px, illeggibile. Con position:fixed e left/right dichiarati si
     stende per tutta la larghezza dello schermo; top:auto la lascia dove sta
     adesso, cioe' subito sotto il bottone, senza dover indovinare un'altezza. */
  html body .agency-dropdown {
    position: fixed;
    top: auto;
    left: .75rem;
    right: .75rem;
    width: auto;
    max-width: none;
  }

  html body .user-button { padding: .45rem .5rem; gap: .35rem; }

  /* --- 3. Le tabelle si scorrono, non si tagliano -------------------------- */
  html body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* una tabella con una classe sua batterebbe la riga qui sopra, perche' una
     classe pesa piu' di tre nomi di tag */
  html body table[class] { overflow-x: auto; }

  /* --- 4. Griglie e barre flessibili: si stringono, non si schiacciano -----
     min-width:0 sugli elementi dentro una griglia o una riga flessibile e'
     quello che permette alle colonne di rimpicciolirsi. Il numero di colonne
     lo decide la pagina, che sa cosa ci mette dentro. */
  html body [class*="grid"] > *,
  html body [class*="kpi"] > *,
  html body .filters > *,
  html body .checks > *,
  html body .users-stats > * { min-width: 0; }

  /* L'unica griglia del portale a colonne davvero fisse: due colonne di cui una
     non scende sotto i 320px. Sotto i 900px la pagina degli ordini la mette gia'
     in colonna per conto suo, quindi questa riga oggi non serve: resta come rete
     se un domani quella regola della pagina venisse tolta. */
  html body .dlux-grid { grid-template-columns: minmax(0, 1fr); }

  /* --- 5. Barre di pulsanti e filtri: vanno a capo ------------------------- */
  html body .page-header,
  html body .toolbar,
  html body .filters-row,
  html body .actions,
  html body .card-header { flex-wrap: wrap; }

  /* Le righe flessibili scritte dentro il tag non si raggiungono per nome, ma
     si raggiungono per contenuto dell'attributo. Andare a capo scatta solo se
     il contenuto non ci sta, quindi dove ci stava gia' non cambia nulla. */
  html body [style*="display:flex"],
  html body [style*="display: flex"] { flex-wrap: wrap; }

  /* --- 6. Campi e menu a tendina mai piu' larghi dello schermo ------------- */
  /* box-sizing serve per le pagine che non passano da portal_header.php: li'
     manca la regola globale, e un campo con width:100% piu' imbottitura e bordo
     esce dal suo contenitore. Sulle altre pagine e' gia' cosi', quindi non
     cambia niente. */
  html body input,
  html body select,
  html body textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }

  /* --- 7. Un po' meno margine ai lati ------------------------------------- */
  html body .portal-container { padding: 1.25rem .75rem; }

  /* --- 8. Finestre di dialogo quasi a schermo pieno, e scorrevoli dentro --- */
  html body .modal-content {
    width: calc(100% - 1.5rem);
    max-width: none;
    overflow-y: auto;
  }
  /* L'altezza massima sta in una regola DEBOLE apposta, senza "html body".
     Cosi' una pagina che ha gia' deciso la sua (email_aziendali.php vuole 95vh)
     vince, perche' pesa uguale e arriva dopo. Con "html body" davanti vinceva
     sempre questo foglio, e le finestre di quella pagina venivano un 7% piu'
     basse di quanto la pagina voleva: misurate 666px invece di 719. */
  .modal-content { max-height: 88vh; }

  /* --- 9. Parole lunghissime (email, link, codici) vanno a capo ------------ */
  html body { overflow-wrap: break-word; }

  /* --- 10. Immagini e contenuti incorporati dentro i limiti ---------------- */
  html body img,
  html body iframe { max-width: 100%; }
  html body pre { max-width: 100%; overflow-x: auto; }
}