/* finestre.css — finestre interne + barra in basso (16/08/2026).
   Colori presi dalle variabili delle griglie (grid.css) per non aprire una
   seconda tavolozza. La testata è scura come l'intestazione dell'app. */

/* Il contenitore non intercetta i clic: solo le finestre lo fanno, altrimenti
   coprirebbe la pagina sotto anche quando non c'è nessuna finestra aperta.

   ⚠️ LO Z-INDEX QUI È OBBLIGATORIO, non un di più. `position: fixed` apre un
   CONTESTO DI IMPILAMENTO: lo z-index delle finestre (200 e oltre) vale solo
   DENTRO questo contenitore, mentre il contenitore, senza un suo z-index,
   resta al livello zero della pagina. Risultato visto il 16/08: l'intestazione
   fissa della griglia dei Movimenti (z-index 6) disegnava SOPRA la finestra e
   ne tagliava il contenuto a metà.
   La scala: finestre 8000 < barra 9000 < menu 9100 < scudo 9500 < il pannello
   dell'autocomplete (10050 in grid.css), che deve restare in cima a tutto. */
#fin-root { position: fixed; inset: 0; pointer-events: none; z-index: 8000; }

.fin-win {
  position: fixed; pointer-events: auto;
  display: flex; flex-direction: column;
  background: var(--g-bg, #fff);
  border: 1px solid var(--g-border-2, #dee2e6);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .10);
}
/* la finestra col fuoco si stacca dalle altre senza gridare */
.fin-win.fin-attiva { box-shadow: 0 14px 44px rgba(0, 0, 0, .30), 0 0 0 1px var(--g-focus, #2c3e50); }
.fin-win.fin-ridotta { display: none; }

.fin-head {
  display: flex; align-items: center; gap: 8px;
  height: 34px; flex: 0 0 34px; padding: 0 6px 0 12px;
  background: var(--g-focus, #2c3e50); color: #fff;
  cursor: move; user-select: none; -webkit-user-select: none;
}
.fin-tit {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-cmd { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.fin-b {
  width: 26px; height: 24px; line-height: 1; border: 0; border-radius: 5px;
  background: transparent; color: #fff; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.fin-b:hover { background: rgba(255, 255, 255, .18); }
.fin-close:hover { background: #c0392b; }

.fin-corpo { flex: 1 1 auto; min-height: 0; background: var(--g-bg-2, #f8f9fa); }
.fin-frame { width: 100%; height: 100%; border: 0; display: block; }

/* Maniglia d'angolo: due trattini, come le finestre vere */
.fin-grip {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 46%, var(--g-muted, #6c757d) 46% 54%, transparent 54% 100%),
    linear-gradient(135deg, transparent 0 70%, var(--g-muted, #6c757d) 70% 78%, transparent 78% 100%);
  opacity: .55;
}
.fin-grip:hover { opacity: 1; }

/* Scudo durante trascinamento/ridimensionamento: senza, il puntatore entra
   sopra l'iframe e i movimenti finiscono alla pagina DENTRO la finestra. */
#fin-scudo { position: fixed; inset: 0; z-index: 9500; cursor: inherit; }
/* Durante il gesto niente selezione: trascinando una finestra sopra la pagina
   il browser evidenziava in blu mezza schermata, e la selezione restava lì. */
body.fin-in-gesto { user-select: none; -webkit-user-select: none; }

/* ----------------------------------------------------------------- barra */

#fin-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: none; gap: 6px; align-items: center;
  padding: 6px 10px; background: var(--g-focus, #2c3e50);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
  overflow-x: auto; scrollbar-width: thin;
}
#fin-bar.fin-bar-piena { display: flex; }
/* la barra non deve coprire il fondo della pagina (totali, pulsanti) */
body.fin-con-barra { padding-bottom: 46px; }

.fin-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  max-width: 230px; padding: 5px 6px 5px 11px;
  border: 0; border-radius: 7px; cursor: pointer;
  background: rgba(255, 255, 255, .17); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.fin-chip:hover { background: rgba(255, 255, 255, .28); }
/* ridotta = più spenta: si vede a colpo d'occhio quali sono a video */
.fin-chip-min { background: rgba(255, 255, 255, .07); font-weight: 500; }
.fin-chip-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-chip-x {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; opacity: .65;
}
.fin-chip-x:hover { background: #c0392b; opacity: 1; }

/* ------------------------------------------------------------ lanciatore */

#fin-apri {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .10); color: #fff; font-size: 14px;
}
#fin-apri:hover { background: rgba(255, 255, 255, .22); }

#fin-menu {
  position: fixed; z-index: 9100; width: 274px; max-height: 68vh;
  display: flex; flex-direction: column;
  background: var(--g-bg, #fff); color: var(--g-text, #212529);
  border: 1px solid var(--g-border-2, #dee2e6); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.fin-menu-cerca { padding: 8px; border-bottom: 1px solid var(--g-border, #e9ecef); }
.fin-menu-cerca input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 6px 8px; border: 1px solid var(--g-border-2, #dee2e6); border-radius: 6px;
}
.fin-menu-cerca input:focus { outline: none; border-color: var(--g-focus, #2c3e50); }
.fin-menu-voci { overflow-y: auto; padding: 4px; }
.fin-menu-tit {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--g-muted, #6c757d); padding: 8px 8px 4px;
}
.fin-menu-voce {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
  color: inherit;
}
.fin-menu-voce:hover { background: var(--g-hover, #e3f2fd); }

/* ------------------------------------------------- dentro la finestra */

/* La pagina resa con &fin=1 non ha intestazione né menu: si toglie il respiro
   che serviva a stare sotto la barra dell'app e si usa tutta la larghezza. */
body.fin-modo main.fin-main { max-width: none; padding: 12px 14px; }

/* ------------------------------------------------------------- telefono */

/* Col dito trascinare finestrelle non funziona: sotto gli 820px la finestra
   diventa un pannello a tutta altezza, e maniglia e "ingrandisci" spariscono. */
@media (max-width: 819px) {
  .fin-win {
    left: 0 !important; right: 0; top: 0 !important;
    width: auto !important; height: calc(100% - 46px) !important;
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .fin-grip, .fin-max { display: none; }
  .fin-head { height: 42px; flex-basis: 42px; cursor: default; }
  .fin-chip { max-width: 150px; }
}