/*
 * Adattamento ai telefoni (BUG #1214). La QA a 375, 390 e 412 px ha trovato scroll orizzontale della pagina in
 * /odl/show/{id}, /odl e /utenti, e bersagli di tocco sotto i 44 x 44 px (WCAG 2.5.5, Apple e Google chiedono 44-48).
 *
 * Tutte le regole stanno dentro `@media (max-width: 767.98px)`: da 768 px in su (tablet e desktop) il foglio non cambia
 * niente. Le tabelle di /odl/show e /utenti sono invece avvolte nel markup da `.table-responsive` di Bootstrap, così
 * scorre la tabella dentro il suo riquadro e non la pagina (su desktop non ha effetto visibile).
 *
 * Caricato dopo Bootstrap (layouts/app.blade.php e odl/index.blade.php). Controllato da tests/Unit/ResponsiveCssTest.php.
 */
@media (max-width: 767.98px) {
  /* Pulsanti e icone-pulsante: almeno 44 x 44 px. */
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
  }
  .btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Link che contengono solo un'icona (modifica, mostra, cancella...): 44 x 44 px, icona al centro. */
  a:has(> img):not(.text-center),
  .btn:has(> img) {
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
    padding: 5px;
    text-align: center;
  }
  button > img {
    vertical-align: middle;
  }

  /* Campi dei moduli, anche dentro tabelle ed elenchi. */
  .form-control,
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="reset"]) {
    min-height: 44px;
  }

  /*
   * Caselle e interruttori: 24 x 24 px (minimo WCAG 2.2, 2.5.8) con spazio intorno; quelle dentro una `.form-check` di
   * Bootstrap conservano i margini negativi che le tengono a sinistra del testo. L'etichetta che le contiene è alta
   * almeno 44 px, e così l'area da toccare.
   */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
  }
  input[type="checkbox"]:not(.form-check-input),
  input[type="radio"]:not(.form-check-input) {
    margin: 10px;
  }
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.5rem;
  }
  .form-check-label,
  label.col-form-label {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* Link di testo nelle celle e negli elenchi: riga alta almeno 44 px. */
  td a:not(:has(> img)),
  li > a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }

  /* Scheda ordine di lavoro: il testo non resta attaccato al bordo sinistro dello schermo. */
  .odl-show-details {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Griglia di pianificazione (Livewire): i comandi in alto sono più larghi dello schermo; scorre il riquadro, non la pagina. */
  .appointments-grid-scroll {
    overflow-x: auto;
  }
}