/* ==============================================================
   Ospyria PMS - adattamenti phone friendly
   Ver. 2026.0807.1927

   Regola di sicurezza regressioni:
   - nessuna modifica desktop >= 992px
   - nessuna modifica a logica, API o DataTables
   - planning e tabelle mantengono lo scroll orizzontale
   ============================================================== */

@media (max-width: 991.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ----------------------------------------------------------
     Navbar: il menu mobile resta dentro lo schermo e scrollabile.
     I dropdown diventano elementi del flusso solo sotto lg.
     ---------------------------------------------------------- */
  #pmsTopbar {
    max-height: 100vh;
    max-height: 100dvh;
  }

  #pmsTopbar .container-fluid {
    padding-left: .65rem;
    padding-right: .65rem;
  }

  #pmsTopbar .navbar-brand {
    max-width: calc(100vw - 78px);
    gap: .4rem !important;
  }

  #pmsTopbar .pms-brand-logo {
    width: 24px;
    height: 24px;
  }

  #pmsTopbar .pms-brand-text {
    max-width: min(54vw, 220px) !important;
    font-size: .88rem;
  }

  #pmsTopbar .pms-demo-badge,
  #pmsTopbar .pms-public-demo-badge {
    font-size: .58rem;
    padding: .18rem .34rem;
  }

  #pmsTopbar .navbar-toggler {
    flex: 0 0 auto;
    padding: .28rem .42rem;
    border-color: rgba(255,255,255,.30);
  }

  #pmsNavbar {
    width: 100%;
    max-height: calc(100vh - 58px);
    max-height: calc(100dvh - 58px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: .35rem 0 .8rem;
  }

  #pmsNavbar > .navbar-nav,
  #pmsNavbar > .navbar-nav:first-child,
  #pmsNavbar > .navbar-nav.ms-auto {
    width: 100%;
    min-width: 0;
    overflow: visible;
    gap: .08rem !important;
  }

  #pmsTopbar .nav-item {
    width: 100%;
  }

  #pmsTopbar .nav-link {
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  #pmsTopbar .pms-menu-group > .nav-link,
  #pmsTopbar .pms-user,
  #pmsTopbar .pms-season-badge,
  #pmsTopbar .pms-hotel-badge {
    width: 100%;
    max-width: none !important;
    font-size: .88rem;
    padding: .5rem .55rem;
    border-radius: .5rem;
  }

  #pmsTopbar .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none;
    width: 100%;
    max-width: none;
    margin: .08rem 0 .4rem;
    box-shadow: none;
    border-radius: .55rem;
  }

  #pmsTopbar .dropdown-menu-end {
    right: auto !important;
    left: auto !important;
  }

  #pmsTopbar .dropdown-item,
  #pmsTopbar .pms-menu-entry {
    min-height: 44px;
    white-space: normal;
  }

  #pmsTopbar .pms-menu-entry {
    padding-top: .42rem;
    padding-bottom: .42rem;
  }

  /* ----------------------------------------------------------
     Header pagina: azioni sotto il titolo senza uscire a destra.
     ---------------------------------------------------------- */
  .pms-page-header {
    gap: .65rem;
    padding-top: .55rem;
    margin-bottom: .7rem !important;
  }

  .pms-page-header-left,
  .pms-page-header-right {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .pms-page-title {
    font-size: 1.35rem;
  }

  .pms-page-subtitle {
    max-width: none;
    font-size: .8rem;
  }

  .pms-page-header-right {
    justify-content: flex-start;
    gap: .4rem;
  }

  .pms-page-header-right > .btn,
  .pms-page-header-right > a.btn {
    flex: 1 1 auto;
    min-height: 38px;
  }

  .pms-page-header-right > .btn-group {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ----------------------------------------------------------
     Contenitori/card: recupero spazio utile senza cambiare layout.
     ---------------------------------------------------------- */
  main .container-fluid,
  body > .container-fluid {
    padding-left: .65rem;
    padding-right: .65rem;
  }

  .card-body {
    padding: .85rem;
  }

  /* ----------------------------------------------------------
     Tabelle: NON vengono compresse. Scroll touch nativo.
     ---------------------------------------------------------- */
  .table-responsive,
  .dataTables_scrollBody,
  .planning-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .planning-scroll {
    touch-action: pan-x pan-y;
  }

  /* ----------------------------------------------------------
     Select2: mai oltre la larghezza disponibile.
     ---------------------------------------------------------- */
  .select2-container {
    max-width: 100% !important;
  }

  /* ----------------------------------------------------------
     Demo: banner compatto e nel flusso, mai sopra i menu.
     ---------------------------------------------------------- */
  body.pms-public-demo .pms-public-demo-banner {
    position: relative;
    top: auto;
    z-index: 1;
    padding: .4rem .65rem;
    gap: .45rem;
    font-size: .8rem;
  }

  body.pms-public-demo .pms-public-demo-banner-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  /* Offcanvas guida: non supera lo schermo. */
  #offcanvasHelp {
    width: min(340px, 92vw) !important;
  }
}

/* ----------------------------------------------------------
   Prenotazioni su tablet e telefono:
   - niente righe figlie DataTables per colonne nascoste
   - tabella con larghezza minima e scroll orizzontale touch
   - evita compressione estrema di intestazioni/filtri/azioni
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  .prenotazioni-page .prenotazioni-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .prenotazioni-page #prenotazioniTable {
    width: 1180px !important;
    min-width: 1180px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  .prenotazioni-page #prenotazioniTable th,
  .prenotazioni-page #prenotazioniTable td {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .prenotazioni-page #prenotazioniTable .dt-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: .25rem;
    white-space: nowrap;
  }
}

@media (max-width: 767.98px) {
  /* Prenotazioni: su telefono restano attive le compattazioni tipografiche. */
  .prenotazioni-page #prenotazioniTable thead th,
  .prenotazioni-page #prenotazioniTable tbody td {
    font-size: .72rem;
    line-height: 1.15;
  }

  .prenotazioni-page #prenotazioniTable .pr-col-filter {
    min-width: 0 !important;
    font-size: .68rem !important;
  }

  /* ----------------------------------------------------------
     Tabelle/DataTables: più compatte ma sempre leggibili.
     ---------------------------------------------------------- */
  .table.table-sm > :not(caption) > * > *,
  .table > :not(caption) > * > * {
    padding-top: .36rem;
    padding-bottom: .36rem;
  }

  .table {
    font-size: .82rem;
  }

  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_filter,
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_paginate {
    text-align: left !important;
  }

  div.dataTables_wrapper div.dataTables_filter label,
  div.dataTables_wrapper div.dataTables_length label {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
  }

  div.dataTables_wrapper div.dataTables_filter input {
    width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
  }

  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: .15rem;
  }

  div.dt-buttons,
  .dt-buttons.btn-group {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .45rem;
  }

  /* ----------------------------------------------------------
     Tabs: scorrono orizzontalmente invece di schiacciarsi.
     ---------------------------------------------------------- */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
  }

  /* ----------------------------------------------------------
     Modali generiche quasi fullscreen.
     Booking e Schedina hanno già CSS dedicato: non vengono toccate.
     ---------------------------------------------------------- */
  .modal:not(#bookingModal):not(#schedinaModal) .modal-dialog {
    width: auto;
    max-width: none;
    margin: .35rem;
  }

  .modal:not(#bookingModal):not(#schedinaModal) .modal-content {
    max-height: calc(100vh - .7rem);
    max-height: calc(100dvh - .7rem);
  }

  .modal:not(#bookingModal):not(#schedinaModal) .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .8rem;
  }

  .modal:not(#bookingModal):not(#schedinaModal) .modal-header,
  .modal:not(#bookingModal):not(#schedinaModal) .modal-footer {
    padding: .7rem .8rem;
  }
}

@media (max-width: 575.98px) {
  #pmsTopbar .container-fluid {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  #pmsTopbar .pms-brand-text {
    max-width: 46vw !important;
    font-size: .82rem;
  }

  #pmsTopbar .pms-demo-badge,
  #pmsTopbar .pms-public-demo-badge {
    max-width: 22vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pms-page-title {
    font-size: 1.18rem;
  }

  .pms-page-icon {
    font-size: 1.05rem;
  }

  .pms-page-header-right > .btn,
  .pms-page-header-right > a.btn {
    flex: 1 1 calc(50% - .25rem);
    min-width: 0;
    padding-left: .55rem;
    padding-right: .55rem;
    white-space: normal;
  }

  main .container-fluid,
  body > .container-fluid {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .card {
    border-radius: .65rem;
  }

  .card-body {
    padding: .7rem;
  }

  /* 16px evita lo zoom automatico dei browser mobile sui campi. */
  input.form-control,
  select.form-select,
  textarea.form-control,
  .select2-container--bootstrap-5 .select2-selection,
  .select2-container .select2-selection {
    font-size: 16px !important;
  }

  input.form-control:not([type="checkbox"]):not([type="radio"]),
  select.form-select,
  .select2-container--bootstrap-5 .select2-selection,
  .select2-container .select2-selection--single {
    min-height: 40px;
  }

  textarea.form-control {
    min-height: 72px;
  }

  .form-label,
  .form-check-label {
    line-height: 1.25;
  }

  /* Footer delle modali generiche: azioni grandi e facilmente toccabili. */
  .modal:not(#bookingModal):not(#schedinaModal) .modal-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
  }

  .modal:not(#bookingModal):not(#schedinaModal) .modal-footer > .btn,
  .modal:not(#bookingModal):not(#schedinaModal) .modal-footer > a.btn {
    width: 100%;
    min-height: 42px;
    margin: 0 !important;
  }

  body.pms-public-demo .pms-public-demo-banner {
    align-items: flex-start;
    text-align: left;
    padding: .35rem .5rem;
    font-size: .74rem;
    line-height: 1.25;
  }

  body.pms-public-demo .pms-public-demo-banner strong {
    font-size: .76rem;
  }

  footer small {
    max-width: 94vw;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1.25 !important;
  }
}

/* ==============================================================
   Planning + modali su touch — Ver. 2026.0807.1424
   Gli elementi flottanti del planning non devono mai comparire
   sopra una modale. Sui dispositivi touch i tooltip hover vengono
   soppressi per evitare che restino "appesi" dopo il tap.
   ============================================================== */
.modal-open .planning-legend-fab,
.modal-open .planning-legend-backdrop,
.modal-open .planning-legend-drawer,
.modal-open .planning-tooltip {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (hover: none), (pointer: coarse) {
  .planning-tooltip {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  /* Booking: usa quasi tutta la viewport, senza toccare tablet/desktop. */
  #bookingModal .modal-dialog {
    width: calc(100vw - .5rem) !important;
    max-width: calc(100vw - .5rem) !important;
    height: calc(100vh - .5rem) !important;
    height: calc(100dvh - .5rem) !important;
    margin: .25rem auto !important;
  }

  #bookingModal .bk-modal-content {
    border-radius: 14px !important;
  }

  #bookingModal .bk-modal-header {
    padding: .6rem .65rem !important;
  }

  /* L'icona grande è decorativa e su 320/360 px sottrae spazio utile. */
  #bookingModal .bk-modal-icon {
    display: none !important;
  }

  #bookingModal .bk-modal-header > .d-flex {
    gap: .4rem !important;
  }

  #bookingModal .bk-modal-header .modal-title {
    flex: 0 0 100%;
    font-size: .95rem !important;
    line-height: 1.15;
  }

  #bookingModal .bk-header-nav,
  #bookingModal .bk-header-contact-actions {
    margin-top: .15rem;
  }

  #bookingModal .bk-modal-booking-meta {
    flex-wrap: wrap !important;
    gap: .25rem .4rem !important;
    margin-top: .22rem !important;
  }

  #bookingModal .bk-modal-booking-name {
    max-width: 100% !important;
    padding: .14rem .4rem !important;
    font-size: .82rem !important;
  }

  #bookingModal .bk-modal-booking-meta .bk-modal-subtitle {
    max-width: 100%;
    font-size: .7rem !important;
  }

  #bookingModal .bk-modal-body {
    padding: .65rem !important;
  }

  #bookingModal .bk-panel {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  /* Overlay di caricamento più compatto su telefono. */
  #bookingModal .pms-booking-loading-overlay {
    padding: 14px !important;
  }

  #bookingModal .pms-booking-loading-card {
    width: min(100%, 290px) !important;
    min-width: 0 !important;
    max-width: 290px !important;
    padding: 20px 16px !important;
    border-radius: 15px !important;
  }

  #bookingModal .pms-booking-loading-spinner {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 12px !important;
    border-width: 4px !important;
  }

  #bookingModal .pms-booking-loading-title {
    font-size: 1.05rem !important;
  }

  #bookingModal .pms-booking-loading-text {
    font-size: .82rem !important;
    line-height: 1.35 !important;
  }
}

/* ==============================================================
   Prenotazioni compatte tablet/mobile — Ver. 2026.0807.1927
   Le colonne testuali più larghe vengono tolte dalla griglia e
   raccolte nel pulsante info accanto al numero prenotazione.
   Hover con mouse, tap con dito, focus da tastiera.
   ============================================================== */
.pr-compact-info-btn {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0 0 0 .28rem;
  color: #0d6efd;
  line-height: 1;
  vertical-align: middle;
}

.pr-compact-tooltip {
  position: fixed;
  z-index: 1095;
  min-width: 220px;
  padding: .62rem .72rem;
  border-radius: .65rem;
  background: rgba(31, 41, 55, .97);
  color: #fff;
  box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .28);
  font-size: .78rem;
  line-height: 1.25;
  pointer-events: none;
}

.pr-compact-tooltip[hidden] {
  display: none !important;
}

.pr-compact-tooltip-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: .45rem;
  align-items: start;
  padding: .16rem 0;
}

.pr-compact-tooltip-row > span {
  color: rgba(255, 255, 255, .68);
}

.pr-compact-tooltip-row > strong {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pr-compact-tooltip-empty {
  color: rgba(255, 255, 255, .75);
}

@media (max-width: 991.98px) {
  .prenotazioni-page .pr-compact-info-btn {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(13, 110, 253, .35);
    border-radius: 50%;
    font-size: .82rem;
    cursor: pointer;
    touch-action: manipulation;
  }

  .prenotazioni-page .pr-compact-info-btn:focus-visible,
  .prenotazioni-page .pr-compact-info-btn[aria-expanded="true"] {
    outline: 2px solid rgba(13, 110, 253, .25);
    outline-offset: 2px;
    background: rgba(13, 110, 253, .08);
  }

  /* Colonne testuali larghe: disponibili nel tooltip della riga. */
  .prenotazioni-page #prenotazioniTable .pr-col-4,
  .prenotazioni-page #prenotazioniTable .pr-col-5,
  .prenotazioni-page #prenotazioniTable .pr-col-6,
  .prenotazioni-page #prenotazioniTable .pr-col-11,
  .prenotazioni-page #prenotazioniTable .pr-col-13 {
    display: none !important;
  }

  .prenotazioni-page #prenotazioniTable {
    width: 830px !important;
    min-width: 830px !important;
    table-layout: fixed !important;
  }

  .prenotazioni-page #prenotazioniTable .pr-col-0 { width: 118px !important; }
  .prenotazioni-page #prenotazioniTable th:nth-child(2),
  .prenotazioni-page #prenotazioniTable th:nth-child(3) { width: 94px !important; }
  .prenotazioni-page #prenotazioniTable th:nth-child(4) { width: 62px !important; }
  .prenotazioni-page #prenotazioniTable th:nth-child(8) { width: 90px !important; }
  .prenotazioni-page #prenotazioniTable .pr-col-8,
  .prenotazioni-page #prenotazioniTable .pr-col-9,
  .prenotazioni-page #prenotazioniTable .pr-col-10 { width: 74px !important; }
  .prenotazioni-page #prenotazioniTable th:nth-child(13) { width: 98px !important; }
  .prenotazioni-page #prenotazioniTable .pr-col-14 { width: 72px !important; }

  .prenotazioni-page #prenotazioniTable .pr-booking-number {
    white-space: nowrap;
  }
}

@media (max-width: 767.98px) {
  /* Su telefono anche i tre importi passano nei dettagli per evitare
     una griglia inutilmente larga. Stato pagamento resta sempre visibile. */
  .prenotazioni-page #prenotazioniTable .pr-col-8,
  .prenotazioni-page #prenotazioniTable .pr-col-9,
  .prenotazioni-page #prenotazioniTable .pr-col-10 {
    display: none !important;
  }

  .prenotazioni-page #prenotazioniTable {
    width: 610px !important;
    min-width: 610px !important;
  }

  .pr-compact-tooltip {
    font-size: .76rem;
  }
}