/**
 * PiantaViewer - stili portati da WebCash (css/cash.css, classi .pianta-*).
 * Il container ospite deve avere un'altezza definita (il viewer usa h-100/flex).
 */

.pianta-viewer {
  container-type: inline-size;
}

.pianta-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  padding: 0.35rem 0.5rem !important;
}

.pianta-sale-wrap {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  gap: 0;
}

.pianta-canvas-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
}

.pianta-canvas-wrapper .canvas-container {
  margin: 0 auto;
}

/* ============================================================================
 * Modale "Cambia tavolo" a tutto schermo (jconfirm + PiantaViewer)
 * La classe .cambia-tavolo-fs viene aggiunta dinamicamente al contenitore
 * .jconfirm quando la pianta interattiva è attiva (vedi tabellone.js).
 *
 * Il box riempie ESATTAMENTE il contenitore .jconfirm (position:fixed; inset:0;
 * overflow:hidden) tramite una cascata di height:100%, convertendo il layout a
 * tabella di jconfirm in block. In questo modo la finestra è sempre grande
 * quanto la pagina e la pianta non viene mai tagliata fuori dal viewport.
 * ==========================================================================*/
.jconfirm.cambia-tavolo-fs .jconfirm-scrollpane,
.jconfirm.cambia-tavolo-fs .jconfirm-row,
.jconfirm.cambia-tavolo-fs .jconfirm-cell,
.jconfirm.cambia-tavolo-fs .jc-bs3-container,
.jconfirm.cambia-tavolo-fs .jc-bs3-row {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.jconfirm.cambia-tavolo-fs .jconfirm-holder {
  padding: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
}

.jconfirm.cambia-tavolo-fs .jconfirm-box-container {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  /* Annulla il transform di animazione: un transform sull'antenato renderebbe il
   * box "fixed" relativo all'antenato invece che al viewport. */
  transform: none !important;
}

/* Box ancorato DIRETTAMENTE al viewport: indipendente dalla catena di centratura
 * (table/holder/jc-bs3) di jconfirm. Riempie esattamente lo schermo visibile,
 * senza generare scroll di pagina e senza poterlo superare. */
.jconfirm.cambia-tavolo-fs .jconfirm-box {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 12px 16px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f0f0f0 !important;   /* sfondo finestra grigio chiaro (il canvas resta bianco) */
}

.jconfirm.cambia-tavolo-fs .jconfirm-content-pane {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.jconfirm.cambia-tavolo-fs .jconfirm-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.jconfirm.cambia-tavolo-fs .jconfirm-content > .form-group {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

/* Blocco info (nome prenotazione, label, chip dei tavoli correnti): altezza
 * naturale e flusso normale, così i chip restano in linea e non si impilano. */
.jconfirm.cambia-tavolo-fs .cambia-tavolo-info {
  flex: 0 0 auto;
}

/* L'altezza del wrapper della pianta viene impostata via JS (fitCambioPianta),
 * misurando lo spazio fino al fondo pagina: niente height/flex con !important qui,
 * altrimenti sovrascriverebbero lo stile inline calcolato. */
.jconfirm.cambia-tavolo-fs #cambiaTavoloPiantaWrap {
  flex: 0 0 auto;
  min-height: 0 !important;
  margin-top: 8px !important;
}

/* Footer nascosto: le sue funzioni sono ora nella X di chiusura (Annulla),
 * nel bottone check (Cambia / No tavolo) e nella X del campo (azzera). */
.jconfirm.cambia-tavolo-fs .jconfirm-buttons {
  display: none !important;
}

/* X di chiusura grande e ben visibile a tutto schermo. Il selettore replica
 * `.jconfirm-box div.jconfirm-closeIcon` del CSS base (font-size 27px !important)
 * per avere specificità sufficiente a sovrascriverlo. */
.jconfirm.cambia-tavolo-fs .jconfirm-box div.jconfirm-closeIcon {
  font-size: 48px !important;
  line-height: 44px !important;
  width: 52px !important;
  height: 52px !important;
  top: 10px !important;
  right: 16px !important;
  opacity: 0.7 !important;
}
.jconfirm.cambia-tavolo-fs .jconfirm-box div.jconfirm-closeIcon:hover {
  opacity: 1 !important;
}

/* Gruppo input tavoli ([input | X azzera]) e bottone check nell'header pianta. */
.cambia-tavolo-input-grp {
  flex: 0 0 auto;
  width: auto;
}

.cambia-tavolo-input-grp .form-control {
  width: auto;
  min-width: 90px;
  max-width: 40vw;
}

/* ===== Mobile: niente mappa, footer nascosto, controlli in riga ===== */
.jconfirm.cambia-tavolo-nofooter .jconfirm-buttons {
  display: none !important;
}

.cambia-tavolo-mobile-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.cambia-tavolo-mobile-left {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Chip delle tipologie a destra, sulla stessa riga (vanno a capo se serve). */
.cambia-tavolo-mobile-row #cambiaTavoloChip {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.cambia-tavolo-conferma {
  flex: 0 0 auto;
  white-space: nowrap;
  /* Allinea l'altezza del bottone a quella dell'input-group che lo precede
   * (l'header centra verticalmente, quindi senza stretch il bottone risulta
   * più basso). */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}