/* ===========================================================================
   Adattamento a schermi piccoli — telefoni e tablet
   ---------------------------------------------------------------------------
   Il portale nasce per lo schermo di un computer: menu laterale sempre
   visibile, griglie a piu' colonne, tabelle larghe. Su un telefono queste
   scelte producono scorrimento orizzontale, testi tagliati e comandi troppo
   piccoli per il dito.

   Le regole stanno qui e non nelle singole pagine per due motivi: valgono per
   tutte e quattordici senza doverle ripetere, e chi domani aggiunge una pagina
   la ottiene adattata senza saperlo.

   Due soglie:
     - fino a 900px : tablet in verticale e telefoni — il menu si nasconde
     - fino a 560px : telefoni — una sola colonna ovunque
   ======================================================================== */

/* --- pulsante che apre il menu: esiste solo sotto la soglia --- */
.menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--sf, #161b22);
  border: 1px solid var(--bd, #30363d);
  color: var(--txs, #e6edf3);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.menu-btn svg { width: 20px; height: 20px; }

/* velo che copre il contenuto quando il menu e' aperto */
.menu-velo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 190;
}
.menu-velo.on { display: block; }

@media (max-width: 900px) {

  /* --- menu laterale: da fisso a scorrevole --- */
  .menu-btn { display: flex; }

  .side {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px !important;
    z-index: 200;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(0, 0, 0, .5);
    min-height: 100vh !important;
  }
  .side.aperta { transform: translateX(0); }

  /* le voci diventano bersagli comodi per il dito */
  .nav a {
    padding: 11px 18px !important;
    font-size: 14px !important;
  }
  .nav a svg { width: 19px !important; height: 19px !important; }
  .navsec { padding: 14px 18px 6px !important; }

  /* il contenuto occupa tutta la larghezza; spazio in alto per il pulsante */
  .main { padding: 62px 14px 24px !important; width: 100% !important; }
  .wrap, .container, .layout { display: block !important; }

  /* --- intestazione della pagina: titolo sopra, comandi sotto --- */
  .page-head, .head, .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .page-head .acts, .head .acts, .tab-act {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 0 !important;
  }

  /* --- schede del cliente e riquadri: due colonne al massimo --- */
  .cards, .clients-grid, .two, .due-col {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  .kpibar, .wid, .tiles, .osgrid, .qpw, .qpw2, .rw, .epw {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* La dashboard dispone i riquadri su una griglia a dodici colonne, con
     ciascun elemento che ne occupa un certo numero. Su un telefono dodici
     colonne valgono trenta pixel l'una: si passa a due. */
  .wall {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
  }
  .wall > * { grid-column: span 1 !important; }
  .wall > .wall-hd,
  .wall > [class*="w12"],
  .wall > .panel,
  .wall > .card { grid-column: 1 / -1 !important; }

  /* --- impostazioni: il menu delle sezioni va sopra il contenuto --- */
  .setwrap { grid-template-columns: 1fr !important; }
  .setnav {
    border-right: none !important;
    border-bottom: 1px solid var(--bd, #30363d);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px !important;
  }
  .setnav .g {
    width: 100%;
    border-top: none !important;
    margin-top: 4px !important;
    padding: 6px 6px 2px !important;
  }
  .setnav a {
    border-left: none !important;
    border-radius: 7px;
    padding: 8px 12px !important;
    border: 1px solid var(--bds, #21262d);
  }
  .setnav a.on { border-color: var(--ac, #58a6ff); }
  .setbody { padding: 16px 14px !important; }

  /* --- tabelle e matrici: scorrimento proprio, non della pagina intera ---
     Un contenitore con overflow-x non basta: senza un limite di larghezza si
     allarga fino al contenuto e a scorrere finisce la pagina intera. Il
     limite lo impone max-width sul contenitore. */
  .tbl-wrap, .table-wrap, .hm-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Le tabelle prive di contenitore scorrono da sole. `display:block` le
     stacca dal flusso normale e permette lo scorrimento interno. */
  .card table, .panel table, table.summary {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table { font-size: 12px; }

  /* niente elemento puo' superare la larghezza dello schermo */
  .card, .panel, .settings .card { max-width: 100%; overflow-x: hidden; }
  .main > * { max-width: 100%; }
  pre, code, .mono { overflow-wrap: anywhere; }

  /* --- moduli: campi a piena larghezza --- */
  .sel, .sel select, input[type=text], input[type=email],
  input[type=password], input[type=number], select, textarea {
    max-width: none !important;
    width: 100% !important;
  }
  .sel-riga { flex-direction: column; align-items: stretch !important; }
  .sel-riga .campo { min-width: 0 !important; width: 100%; }
  .sel-riga .btn { width: 100%; justify-content: center; }

  /* --- barra delle schede del cliente ---
     Overview, Compliance, Policy, Tenant piu' i pulsanti di azione non stanno
     su una riga sola: le schede scorrono, i pulsanti vanno sotto. */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    max-width: 100%;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; flex: 0 0 auto; }

  .tab-act {
    position: static !important;
    margin-left: 0 !important;
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 0;
  }
  .tab-act .btn, .tab-act a, .tab-act button {
    flex: 1 1 44%;
    justify-content: center;
    text-align: center;
  }

  /* il menu chiuso non deve contribuire alla larghezza della pagina */
  body { overflow-x: hidden; }

  /* i comandi devono essere premibili con il dito */
  .btn, button, .btn-open, .ls-b { min-height: 40px; }
}

@media (max-width: 560px) {
  /* una sola colonna: su questi schermi due riquadri affiancati
     costringono a testi di sei caratteri */
  .kpibar, .wid, .tiles, .cc-stats, .wall, .osgrid, .qpw, .qpw2, .rw, .epw {
    grid-template-columns: 1fr !important;
  }
  .main { padding: 58px 11px 20px !important; }

  h1, .page-title { font-size: 18px !important; }
  .sub { font-size: 12px !important; }

  /* le fasce riepilogative si impilano */
  .appliance-strip, .strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
  }
  .appliance-strip .item, .strip .item {
    flex-direction: row !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;                 /* senza, etichetta e valore si toccano */
    padding: 8px 2px !important;
    border-bottom: 1px solid var(--bds, #21262d);
    text-align: left !important;
  }
  .appliance-strip .item .lbl, .strip .item .lbl {
    flex: 0 0 auto;
    margin-top: 0 !important;
  }
  .appliance-strip .item .val, .strip .item .val {
    text-align: right;
    overflow-wrap: anywhere;
  }
  .appliance-strip .item:last-child { border-bottom: none; }

  /* le tabelle strette diventano illeggibili: si riducono le spaziature */
  table th, table td { padding: 6px 7px !important; }

  /* i pulsanti in barra vanno a capo senza stringersi */
  .tab-act, .acts { width: 100%; }
  .tab-act .btn, .acts .btn { flex: 1 1 auto; }
}