/*
 * Compatibilita' Bootstrap 3 -> Bootstrap 5.
 * Caricato subito dopo bootstrap.css e prima del css del tema (main.css, style.css), che restano prioritari.
 * Riproduce le misure e le classi di Bootstrap 3 ancora usate dal tema e dalle maschere generate
 * (class/form.class.php, class/table.class.php, moduli/tb-form): titoli, paragrafi, etichette, form orizzontali,
 * btn-default, btn-group-justified, well, voci dei menu a tendina.
 */

/* testo: misure di Bootstrap 3 (Bootstrap 5 usa titoli piu' grandi e margini in rem) */
h1, h2, h3, .h1, .h2, .h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.1;
}
h4, h5, h6, .h4, .h5, .h6 {
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.1;
}
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
p { margin: 0 0 10px; }
ul, ol { margin-bottom: 10px; }
hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eee;
  opacity: 1;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

/* form */
.form-group { margin-bottom: 15px; }
.form-horizontal .form-group {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
/* come .row > * di Bootstrap 5: figli a tutta larghezza, le classi col-* (piu' specifiche) la riducono */
:where(.form-horizontal .form-group) > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}
.form-horizontal .form-group > [class*="col-"],
.form-horizontal .form-group > [class*="offset-"] {
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
  }
}
.input-group > .input-group-btn { display: flex; }

/* pulsanti */
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-group-justified {
  display: flex;
  width: 100%;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  flex: 1 1 0;
}
.btn-group-justified > .btn-group > .btn { width: 100%; }

/* componenti */
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
/* nei modali generati la X precede il titolo: in Bootstrap 5 va in fondo all'intestazione */
.modal-header .btn-close:first-child { order: 2; }

/* tabelle scorrevoli sugli smartphone: come in Bootstrap 3 le celle non vanno a capo */
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
  }
  .table-responsive > .table { margin-bottom: 0; }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
}

/* tabelle: i colori delle righe sono quelli del tema (Bootstrap 5 vi sovrappone una velatura con box-shadow);
   interlinea delle celle come in Bootstrap 3 */
.table > :not(caption) > * > * {
  box-shadow: none;
  line-height: 1.42857143;
}

/* liste in linea: Bootstrap 3 metteva in linea tutti i <li>, Bootstrap 5 solo quelli con .list-inline-item */
.list-inline {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}