/*
 * Correzioni grafiche dell'area SAB e delle pagine pubbliche
 * (layout su smartphone, icone delle tabelle).
 * Caricato da partial/styles.inc dopo style.min.css.
 */

/* Icone di ordinamento delle tabelle (DataTables).
   style.min.css usa il font "FontAwesome" (versione 4), ma il sito carica
   Font Awesome 5, che si chiama "Font Awesome 5 Free": senza questa regola
   al posto delle frecce comparivano dei quadratini.
   I codici \f0de (freccia su) e \f0dd (freccia giu') esistono anche in FA5,
   nello stile "solid" (peso 900). */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
}

/* Spazio a destra dell'intestazione per non sovrapporre la freccia al testo */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  padding-right: 2em;
}

/* Le immagini non possono mai superare la larghezza del loro contenitore */
main img,
.card img {
  max-width: 100%;
  height: auto;
}

/* Testi lunghi senza spazi (link da inviare agli associati, e-mail, IBAN)
   vanno a capo invece di allargare la pagina */
main .card-body,
main .card-body a,
main h1, main h2, main h3, main h4, main h5 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tabelle: scorrono in orizzontale dentro la propria card, non tutta la pagina */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dataTables_wrapper {
  max-width: 100%;
}
/* Filtri e paginazione di DataTables impilati e centrati su schermi stretti */
@media (max-width: 575.98px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    float: none !important;
  }
  .dataTables_wrapper .dataTables_filter input {
    max-width: 100%;
    margin-left: 0;
  }
  .dataTables_wrapper .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Schede con immagine a fianco (elenchi servizi, dettaglio vendita):
   su smartphone l'immagine va sopra il testo */
@media (max-width: 767.98px) {
  .media {
    flex-wrap: wrap;
  }
  .media > img {
    max-width: 100%;
    margin-right: 0 !important;
    margin-bottom: .75rem;
  }
  .media > .media-body {
    min-width: 0;
    flex-basis: 100%;
  }

  /* Margini laterali ridotti: le card con ml-4/mr-4 lasciavano poco spazio utile */
  main .card.ml-4,
  main .ml-4.mr-4 {
    margin-left: .5rem !important;
    margin-right: .5rem !important;
  }

  /* Pulsanti lunghi su piu' righe invece di uscire dallo schermo */
  main .btn {
    white-space: normal;
  }
}