/* ===========================================================================
   Archivio Fondazione La Rocca — tema applicativo
   Sovrascrive Bootstrap 5.3 per riprodurre l'aspetto del gestionale WebDev
   precedente: testata blu, menù laterale, colonna comandi a destra.
   =========================================================================== */

:root {
  /* Blu istituzionale della Fondazione. È l'unico blu del tema: testata,
     pagina di accesso, testi del menù e pulsanti primari lo condividono, così
     il riquadro «ARCHIVIO» (che è un'immagine) non stacca sullo sfondo. */
  --flr-navy: #0f4284;
  --flr-blue: #0f4284;          /* pulsanti primari (FILTRA, CARICA…) */
  --flr-blue-hover: #0c366c;    /* stesso blu, più scuro, per hover e clic */
  --flr-grey: #6f767e;          /* pulsanti comando (NUOVO, MODIFICA…) */
  --flr-grey-hover: #5c636a;
  --flr-bg: #f0f0f0;            /* sfondo area contenuti */
  --flr-border: #d7d7d7;
  --flr-row-sel: #cfd2d5;       /* riga selezionata (grigio) */
  --flr-row-hover: #ececec;     /* riga sotto il puntatore */
  --flr-row-alt: #f7f7f7;
  --flr-header-h: 78px;
  --flr-footer-h: 38px;
  --flr-sidebar-w: 190px;
  --flr-azioni-w: 140px;
}

html,
body {
  height: 100%;
}

body {
  background-color: var(--flr-bg);
  font-size: 0.875rem;
  color: #333;
}

/* --- Testata ------------------------------------------------------------- */

.flr-header {
  height: var(--flr-header-h);
  background-color: var(--flr-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem 0 1rem;
}

.flr-header .flr-logo img {
  height: 58px;
  width: auto;
  display: block;
}

/* Riquadro «ARCHIVIO»: immagine a piena altezza della testata, allineata a
   destra. Le proporzioni le detta il file, così sostituirlo non richiede di
   ritoccare il CSS. */
.flr-header .flr-modulo {
  height: calc(var(--flr-header-h) - 18px);
  width: auto;
  display: block;
}

.flr-utente {
  font-size: 0.8rem;
  color: #cbd6e8;
  text-align: right;
  margin-right: 1.5rem;
}

.flr-utente a {
  color: #fff;
  text-decoration: none;
}

.flr-utente a:hover {
  text-decoration: underline;
}

/* --- Impianto della pagina ----------------------------------------------- */

.flr-corpo {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--flr-header-h) - var(--flr-footer-h));
}

.flr-sidebar {
  width: var(--flr-sidebar-w);
  flex: 0 0 var(--flr-sidebar-w);
  background-color: #fff;
  padding-top: 0.75rem;
}

.flr-sidebar .flr-menu-titolo {
  text-align: center;
  color: var(--flr-navy);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  padding: 0.35rem 0 0.6rem;
}

.flr-sidebar .nav-link {
  color: var(--flr-navy);
  text-align: center;
  font-size: 0.95rem;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--flr-border);
  border-radius: 0;
}

.flr-sidebar .nav-link:hover {
  background-color: #eef2f8;
}

.flr-sidebar .nav-link.active {
  font-weight: 600;
  border-bottom: 2px solid var(--flr-navy);
  background-color: #eef2f8;
}

.flr-sidebar .nav-link.disabled {
  color: #a8a8a8;
}

.flr-contenuto {
  flex: 1 1 auto;
  padding: 0.75rem 1rem 1rem;
  min-width: 0; /* consente lo scroll orizzontale della tabella */
}

.flr-titolo-sezione {
  color: #555;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

/* --- Colonna comandi a destra -------------------------------------------- */

.flr-azioni {
  width: var(--flr-azioni-w);
  flex: 0 0 var(--flr-azioni-w);
  padding: 2.6rem 1rem 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.flr-azioni .btn {
  width: 100%;
}

.flr-azioni .flr-spazio {
  height: 2.2rem;
}

.flr-anteprima {
  border: 1px solid var(--flr-border);
  background-color: #fff;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.flr-anteprima img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.flr-anteprima .flr-anteprima-vuota {
  color: #bbb;
  font-size: 1.6rem;
}

/* --- Pulsanti ------------------------------------------------------------ */

.btn-flr-primario,
.btn-flr-primario:focus {
  background-color: var(--flr-blue);
  border-color: var(--flr-blue);
  color: #fff;
  border-radius: 2px;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 0.45rem 1.4rem;
}

.btn-flr-primario:hover,
.btn-flr-primario:active {
  background-color: var(--flr-blue-hover);
  border-color: var(--flr-blue-hover);
  color: #fff;
}

.btn-flr-comando,
.btn-flr-comando:focus {
  background-color: var(--flr-grey);
  border-color: var(--flr-grey);
  color: #fff;
  border-radius: 2px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.6rem;
}

.btn-flr-comando:hover,
.btn-flr-comando:active {
  background-color: var(--flr-grey-hover);
  border-color: var(--flr-grey-hover);
  color: #fff;
}

.btn-flr-comando.disabled,
.btn-flr-comando:disabled {
  background-color: #b9bdc2;
  border-color: #b9bdc2;
  color: #fff;
  opacity: 1;
}

/* --- Barra filtri -------------------------------------------------------- */

.flr-filtri {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.flr-filtri .form-control,
.flr-filtri .form-select {
  height: 32px;
  font-size: 0.85rem;
  border-radius: 2px;
  width: auto;
  min-width: 140px;
}

.flr-filtri label {
  font-size: 0.9rem;
  color: #333;
}

/* --- Tabella ------------------------------------------------------------- */

.flr-tabella-wrap {
  background-color: #fff;
  border: 1px solid var(--flr-border);
  overflow-x: auto;
}

table.flr-tabella {
  margin-bottom: 0;
  width: 100%;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* L'intestazione resta ferma mentre le righe scorrono. Ha effetto solo dove
   la tabella scorre per conto suo, cioè negli elenchi a tutta altezza; sugli
   schermi stretti, dove scorre la pagina intera, non cambia niente.
   Lo sfondo bianco non è decorativo: senza, le righe si vedrebbero passare
   sotto le intestazioni. */
table.flr-tabella thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

table.flr-tabella thead th {
  background-color: #fff;
  border-bottom: 1px solid var(--flr-border);
  border-right: 1px solid #ececec;
  color: #2b2b2b;
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
  vertical-align: middle;
  padding: 0.5rem 0.4rem;
  position: relative;
}

table.flr-tabella thead th a.flr-ordina {
  color: inherit;
  text-decoration: none;
  display: block;
}

table.flr-tabella thead th .flr-ordina-icona {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.65rem;
  color: #9aa3ad;
}

table.flr-tabella thead th .flr-ordina-icona.attivo {
  color: var(--flr-navy);
}

table.flr-tabella thead tr.flr-riga-ricerca th {
  padding: 0.25rem;
  border-bottom: 1px solid var(--flr-border);
  /* Con `border-collapse` il bordo appartiene alla tabella, non alla cella, e
     scorrerebbe via insieme alle righe lasciando l'intestazione senza stacco.
     L'ombra interna invece è della cella e resta attaccata. */
  box-shadow: inset 0 -1px 0 var(--flr-border);
}

table.flr-tabella thead tr.flr-riga-ricerca .form-control,
table.flr-tabella thead tr.flr-riga-ricerca .form-select {
  font-size: 0.75rem;
  padding: 0.15rem 0.35rem;
  height: 26px;
  border-radius: 2px;
}

/* Riga dei totali: resta in fondo alla tabella mentre le righe scorrono, per
   lo stesso motivo per cui l'intestazione resta in cima. Un totale che si
   raggiunge solo scorrendo fino all'ultima riga non lo guarda nessuno. */
table.flr-tabella tfoot {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

table.flr-tabella tfoot td {
  background-color: #f4f6f9;
  font-weight: 600;
  padding: 0.55rem 0.5rem;
  border-top: 1px solid var(--flr-border);
  /* Come per l'intestazione: con le celle unite il bordo appartiene alla
     tabella e scorrerebbe via, l'ombra interna invece resta sulla cella. */
  box-shadow: inset 0 1px 0 var(--flr-border);
  white-space: nowrap;
}

table.flr-tabella tbody td {
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid #ececec;
  vertical-align: middle;
}

table.flr-tabella tbody tr {
  cursor: pointer;
}

/* Lo sfondo va messo sulle CELLE, non sulla riga: Bootstrap disegna il colore
   di fondo delle tabelle con un `box-shadow: inset` sulle celle, che
   coprirebbe qualunque colore impostato sul <tr>. Per lo stesso motivo il
   box-shadow va azzerato. */

table.flr-tabella tbody tr:nth-child(even) > td {
  background-color: var(--flr-row-alt);
  box-shadow: none;
}

table.flr-tabella tbody tr:hover > td {
  background-color: var(--flr-row-hover);
  box-shadow: none;
}

table.flr-tabella tbody tr.flr-selezionata > td,
table.flr-tabella tbody tr.flr-selezionata:hover > td {
  background-color: var(--flr-row-sel);
  box-shadow: none;
}

td.flr-num {
  text-align: right;
}

td.flr-centro {
  text-align: center;
}

.flr-totale {
  text-align: right;
  color: #555;
  font-size: 0.85rem;
  padding-top: 0.6rem;
}

.flr-totale strong {
  color: #222;
  margin-left: 0.6rem;
}

/* --- Form ---------------------------------------------------------------- */

.flr-form {
  background-color: transparent;
}

.flr-form label,
.flr-form .form-label {
  font-size: 0.8rem;
  color: #444;
  margin-bottom: 0.15rem;
}

.flr-form .form-control,
.flr-form .form-select {
  border-radius: 2px;
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
  border-color: #c9c9c9;
}

.flr-form .form-control:disabled,
.flr-form .form-control[readonly] {
  background-color: #e4e4e4;
}

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

.flr-sezione {
  border-top: 1px solid var(--flr-border);
  margin-top: 1.1rem;
  padding-top: 0.8rem;
}

.flr-sezione > .flr-sezione-titolo {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 0.6rem;
}

.flr-immagine-box {
  border: 1px solid var(--flr-border);
  background-color: #fff;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.flr-immagine-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.flr-pannello-mostre {
  background-color: #fff;
  border: 1px solid var(--flr-border);
}

/* --- Scheda cliente ------------------------------------------------------ */

.flr-riquadro-tipo {
  border: 1px solid var(--flr-border);
  background-color: #fff;
  padding: 0.6rem 0.9rem 0.2rem;
  margin-bottom: 1rem;
  display: inline-block;
  min-width: 12rem;
}

.flr-riquadro-tipo .form-group,
.flr-riquadro-tipo .mb-3 {
  margin-bottom: 0.4rem !important;
}

.flr-pannello-indirizzi {
  background-color: #fff;
  border: 1px solid var(--flr-border);
}

.flr-pannello-titolo {
  text-align: center;
  font-size: 0.85rem;
  color: #444;
  padding: 0.5rem;
  border-bottom: 1px solid var(--flr-border);
  background-color: #fafafa;
}

table.flr-tabella-indirizzi {
  font-size: 0.8rem;
  margin-bottom: 0;
}

table.flr-tabella-indirizzi thead th {
  background-color: #fff;
  border-bottom: 1px solid var(--flr-border);
  font-weight: 600;
  font-size: 0.78rem;
  text-align: center;
  padding: 0.45rem 0.4rem;
  white-space: nowrap;
}

table.flr-tabella-indirizzi td {
  padding: 0.3rem 0.35rem;
  vertical-align: middle;
}

table.flr-tabella-indirizzi .form-control {
  font-size: 0.78rem;
  padding: 0.2rem 0.4rem;
  border-radius: 2px;
  height: 30px;
}

/* Campo non applicabile al tipo di cliente scelto (es. partita IVA per un
   privato): grigio come nella maschera precedente. */
.flr-form .form-control.flr-campo-inattivo {
  background-color: #e4e4e4;
  color: #6b6b6b;
}

/* --- Importazione da Excel ----------------------------------------------- */

.flr-tabella-import-wrap {
  overflow-x: auto;
  border: 1px solid var(--flr-border);
  background-color: #fff;
  max-height: 60vh;
  overflow-y: auto;
}

table.flr-tabella-import {
  font-size: 0.78rem;
  margin-bottom: 0;
  white-space: nowrap;
}

/* Intestazione scura come nella schermata del gestionale precedente. */
table.flr-tabella-import thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #3c434b;
  color: #fff;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  padding: 0.55rem 0.6rem;
  border-right: 1px solid #4d545c;
  border-bottom: none;
  white-space: normal;
  min-width: 6.5rem;
}

table.flr-tabella-import tbody td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #f0f0f0;
  box-shadow: none;
  vertical-align: middle;
}

table.flr-tabella-import .flr-col-riga {
  width: 3.5rem;
  min-width: 3.5rem;
  text-align: center;
  color: #6b7480;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

table.flr-tabella-import tbody tr.flr-riga-errore > td {
  background-color: #fdeaea;
  box-shadow: none;
}

table.flr-tabella-import tbody tr.flr-riga-avviso > td {
  background-color: #fdf7e6;
  box-shadow: none;
}

/* Riga il cui titolo esiste già in archivio per l'autore scelto. */
table.flr-tabella-import tbody tr.flr-riga-duplicata > td {
  background-color: #f4eef6;
  box-shadow: none;
}

table.flr-tabella-import tbody tr.flr-riga-duplicata > td:first-child {
  border-left: 3px solid #8d6ba0;
}

.flr-avviso.duplicato {
  color: #6b4a80;
}

table.flr-tabella-import tbody tr.flr-riga-avviso-dettaglio > td {
  background-color: #fdf7e6;
  box-shadow: none;
  border-bottom: 1px solid #e8dcb8;
  white-space: normal;
}

.flr-avviso {
  display: inline-block;
  color: #8a6a12;
  margin-right: 1.2rem;
}

.flr-riepilogo-import {
  font-size: 0.85rem;
  color: #333;
  background-color: #eef2f8;
  border: 1px solid var(--flr-border);
  border-radius: 2px;
  padding: 0.25rem 0.7rem;
}

.flr-riepilogo-import.avviso {
  background-color: #fdf3d8;
  border-color: #e5d6a8;
  color: #7a5c0f;
}

.flr-riepilogo-import.errore {
  background-color: #fdeaea;
  border-color: #f0c2c2;
  color: #9b2c2c;
}

.flr-pannello-mostre table {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.flr-pannello-mostre thead th {
  background-color: #fff;
  border-bottom: 1px solid var(--flr-border);
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.5rem 0.4rem;
}

/* --- Piè di pagina ------------------------------------------------------- */

.flr-footer {
  height: var(--flr-footer-h);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d7f9c;
  font-size: 0.8rem;
  background-color: var(--flr-bg);
}

/* --- Accesso -------------------------------------------------------------
   La pagina di accesso non usa l'impianto dell'applicazione: niente testata,
   niente menù. Solo il riquadro con utente e password.
   ------------------------------------------------------------------------- */

body.flr-pagina-accesso {
  background-color: var(--flr-navy);
}

.flr-accesso-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.flr-accesso-card {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 360px;
}

.flr-accesso-titolo {
  color: var(--flr-navy);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* --- Livello di accesso -------------------------------------------------- */

.flr-badge-livello {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  white-space: nowrap;
}

/* --- Righe segnalate (possibili duplicati) ------------------------------- */

table.flr-tabella tbody tr.flr-segnalata > td {
  box-shadow: none;
  background-color: #fdf3d8;
}

table.flr-tabella tbody tr.flr-segnalata > td:first-child {
  border-left: 3px solid #d9a441;
}

table.flr-tabella tbody tr.flr-segnalata.flr-selezionata > td {
  background-color: var(--flr-row-sel);
}

/* --- Finestra di ingrandimento delle immagini ---------------------------- */

.flr-anteprima,
.flr-immagine-box {
  cursor: zoom-in;
}

.flr-modale-immagine .modal-body {
  background-color: #2b2b2b;
  padding: 0.5rem;
}

.flr-modale-immagine img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

/* --- Elenchi alti quanto la finestra ------------------------------------- */
/*
   Con quasi duemila opere l'elenco è molto più alto dello schermo. Scorrendo
   la pagina per leggere le righe sparivano in alto la testata e il menù, e a
   sinistra la colonna dei comandi: si arrivava in fondo alla tabella senza
   più avere sott'occhio MODIFICA ed ELIMINA, che sono i pulsanti che servono
   proprio lì.

   Qui l'area del contenuto viene fissata all'altezza della finestra e a
   scorrere resta la sola tabella. Tutto il resto — filtri, intestazioni delle
   colonne, impaginazione, comandi — non si muove più.

   La regola vale dai 993 pixel in su, cioè dove menù e comandi stanno ai lati
   della tabella. Sotto quella soglia la pagina si dispone in verticale (vedi
   «Adattamento a schermi stretti», in fondo al file): lì i comandi sono già
   sopra la tabella, e bloccare l'altezza toglierebbe spazio invece di darne.

   Si fissa l'altezza del solo contenuto e non dell'intero corpo della pagina:
   `.flr-corpo` è condiviso con le schede, che sono più alte della finestra e
   devono poter scorrere per intero.
*/

@media (min-width: 993px) {
  .flr-contenuto-pieno {
    height: calc(100vh - var(--flr-header-h) - var(--flr-footer-h));
    /* `dvh` tiene conto delle barre del browser che compaiono e scompaiono.
       La riga sopra resta per i browser che non lo conoscono: quella che non
       viene capita viene ignorata, e vince l'ultima valida. */
    height: calc(100dvh - var(--flr-header-h) - var(--flr-footer-h));
    display: flex;
    flex-direction: column;
  }

  /* Il modulo dei filtri contiene la tabella: deve allungarsi anche lui,
     altrimenti la tabella non ha nessuna altezza da riempire. */
  .flr-contenuto-pieno #flr-form-elenco {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .flr-contenuto-pieno .flr-tabella-wrap {
    flex: 1 1 auto;
    overflow: auto;
  }

  /* `min-height: 0` su tutta la catena non è un dettaglio: un elemento
     flessibile non si stringe mai sotto la dimensione del proprio contenuto,
     e senza questo la tabella allungherebbe il genitore invece di scorrere —
     il risultato sarebbe identico a prima, tabella lunghissima e comandi
     spariti. È il tranello classico del flexbox. */
  .flr-contenuto-pieno,
  .flr-contenuto-pieno #flr-form-elenco,
  .flr-contenuto-pieno .flr-tabella-wrap {
    min-height: 0;
  }

  /* Su schermi bassi i comandi o le voci di menù potrebbero non entrare:
     scorrono per conto loro invece di essere tagliati. */
  .flr-azioni,
  .flr-sidebar {
    overflow-y: auto;
  }
}

/* --- Adattamento a schermi stretti --------------------------------------- */

@media (max-width: 992px) {
  .flr-corpo {
    flex-wrap: wrap;
  }

  .flr-sidebar,
  .flr-azioni {
    width: 100%;
    flex: 1 1 100%;
  }

  .flr-azioni {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 1rem 1rem;
  }

  .flr-azioni .btn {
    width: auto;
    flex: 1 1 auto;
  }

  .flr-azioni .flr-spazio,
  .flr-azioni .flr-anteprima {
    display: none;
  }
}