/* =========================================================================
   Telefono e tablet, come HubLEM (ADR-262)
   Barra in alto fissa, menu che entra da sinistra, pulsanti e voci comodi da
   toccare (44-48 px), campi a 16 px (niente zoom automatico), tabelle come
   schede, finestre che salgono dal basso, schede orizzontali scorrevoli.
   ========================================================================= */

/* Niente effetto «sollevato» sui dispositivi senza mouse: al tocco resterebbe. */
@media (hover: none) {
  .btn:hover:not(:disabled):not(.disabled),
  a.card:hover,
  .section-panel-card:hover { transform: none; }
}

/* --- Tablet e telefono: menu laterale a scomparsa ------------------------- */
@media (max-width: 991.98px) {
  .app-sidebar { width: min(20rem, 88vw); box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  .app-sidebar .nav-link { min-height: 2.75rem; font-size: .8rem; }
  .app-sidebar__section > summary { min-height: 3rem; font-size: .88rem; }
  .app-sidebar__search kbd { display: none; }
  .app-sidebar__backdrop { background: rgba(17, 24, 39, .45); backdrop-filter: blur(1px); }
  .app-navbar { position: sticky; top: 0; z-index: 1030; }
}

/* --- Telefono ------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.app-body { -webkit-tap-highlight-color: rgba(0, 0, 0, .08); overscroll-behavior-y: none; }

  /* Barra in alto: compatta, menu a sinistra, titolo, icone a destra. */
  .app-navbar { gap: .4rem; padding: .6rem .75rem; min-height: 3.5rem; }
  .app-navbar .btn { min-width: 2.75rem; min-height: 2.75rem; padding-left: .6rem; padding-right: .6rem; }
  .app-navbar__title { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-navbar .badge { display: none !important; }

  /* Contenuto: margini piccoli, titolo e azioni uno sotto l'altro. */
  .app-content > .container-fluid { padding: 1rem .75rem calc(1.25rem + env(safe-area-inset-bottom)) !important; }
  /* Testata colorata a tutta larghezza senza scorrimento laterale (ADR-268). */
  .hub-mhero { margin: -1rem -.75rem 1rem; }
  .app-page-header { flex-direction: column; align-items: stretch !important; gap: .75rem !important; margin-bottom: 1rem !important; }
  .app-page-header > div:last-child { width: 100%; }
  .app-page-header > div:last-child > .btn,
  .app-page-header > div:last-child > form,
  .app-page-header > div:last-child > .dropdown { flex: 1 1 auto; }
  .app-page-header > div:last-child > form > .btn,
  .app-page-header > div:last-child > .dropdown > .btn { width: 100%; }
  .app-page-title { font-size: 1.4rem; line-height: 1.8rem; }
  .breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin-bottom: .5rem; }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .app-footer { font-size: .7rem; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }

  /* Tocchi comodi. */
  .btn { min-height: 2.75rem; }
  .btn-sm { min-height: 2.5rem; min-width: 2.5rem; }
  .form-control, .form-select { min-height: 2.75rem; font-size: 16px; padding: .55rem .85rem; }
  textarea.form-control { min-height: 6rem; }
  .form-check { min-height: 1.75rem; padding-left: 2rem; }
  .form-check-input { width: 1.35em; height: 1.35em; margin-left: -2rem; }
  .dropdown-item { padding: .7rem .9rem; }
  .page-link { min-width: 2.5rem; min-height: 2.5rem; display: flex; align-items: center; justify-content: center; }

  /* Nei moduli i campi affiancati vanno uno sotto l'altro. */
  .app-content form .row > [class*="col-"]:not([class*="col-sm"]):not([class*="col-md"]):not([class*="col-lg"]):not(.col-auto):not(.col-12) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .app-content form .d-flex.gap-2 > .btn { flex: 1 1 auto; }

  /* Card: angoli e spazi piu' piccoli. */
  .card { --bs-card-spacer-y: .9rem; --bs-card-spacer-x: .9rem; --bs-card-cap-padding-x: .9rem; --bs-card-cap-padding-y: .75rem; }

  /* Schede e pillole scorrevoli in orizzontale. */
  .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex-direction: row !important; }
  .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; min-height: 2.5rem; }

  /* Finestre che salgono dal basso, come le «sheet» di HubLEM. */
  .modal-dialog { margin: 0; position: fixed; bottom: 0; left: 0; right: 0; max-width: none; }
  .modal.fade .modal-dialog { transform: translateY(100%); transition: transform .3s ease-out; }
  .modal.show .modal-dialog { transform: none; }
  .modal-content { border-radius: 1.5rem 1.5rem 0 0; max-height: 90vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
  .modal-content::before { content: ""; display: block; width: 2.25rem; height: .25rem; border-radius: 9999px; background: #d1d5db; margin: .5rem auto 0; }

  /* Tabelle come schede: una scheda per riga, «intestazione: valore». */
  .table-responsive:has(> .table-mobile-cards) { overflow: visible; }
  .card:has(.table-mobile-cards) { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .card:has(.table-mobile-cards) > .card-header { background: transparent; border: 0; padding-left: .25rem; }
  .table-mobile-cards > thead { display: none; }
  .table-mobile-cards,
  .table-mobile-cards > tbody,
  .table-mobile-cards > tfoot { display: block; width: 100%; }
  .table-mobile-cards > tbody > tr,
  .table-mobile-cards > tfoot > tr {
    display: block;
    margin: 0 0 .75rem;
    padding: .6rem .9rem;
    background: #fff;
    border: 2px solid var(--hl-border-strong, #e5e7eb);
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08);
  }
  .table-mobile-cards > tfoot > tr { background: #fafafa; }
  .table-mobile-cards > tbody > tr > *,
  .table-mobile-cards > tfoot > tr > * {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem 0 !important;
    border: 0 !important;
    text-align: right !important;
    white-space: normal !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-wrap: anywhere;
  }
  .table-mobile-cards > tbody > tr > *::before,
  .table-mobile-cards > tfoot > tr > *::before {
    content: attr(data-label);
    flex: 0 0 42%;
    text-align: left;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #6b7280;
  }
  .table-mobile-cards > tbody > tr > [data-label=""]::before,
  .table-mobile-cards > tfoot > tr > [data-label=""]::before { content: none; }
  /* La prima cella e' il titolo della scheda; quelle senza intestazione (azioni) vanno a destra. */
  .table-mobile-cards > tbody > tr > :first-child { font-weight: 700; font-size: .9rem; color: #111827; }
  .table-mobile-cards > tbody > tr > [data-label=""] { justify-content: flex-end; flex-wrap: wrap; }
  .table-mobile-cards > tbody > tr > .table-mobile-cards__full { display: block; text-align: center !important; }
  .table-mobile-cards > tbody > tr > .table-mobile-cards__full::before { content: none; }
  .table-mobile-cards .btn-sm { min-height: 2.5rem; }
}

/* --- Telefoni molto stretti ----------------------------------------------- */
@media (max-width: 380px) {
  .app-navbar__title { display: none; }
  .table-mobile-cards > tbody > tr > *::before { flex-basis: 45%; }
}