/**************************************************************************************************
 *  Project Name:       Stabilia WEB
 *  File:               g3cube.css
 *  Description:        CSS
 * 
 *  Author:             GG
 *  Created:            30/04/2025 
 *  Last Modified:      09/07/2026
 *  Copyright:          © 2025 - 2026 G3cube s.r.l. All rights reserved.
 * 
 *  Changelog:
 *  ----------------------------------------------------------------------------------------------
 *  Date         Author   Ver   Description
 *  ----------   -------  ----  ------------------------------------------------------------------
 *  30/04/2025   GG       1.0   Creazione iniziale della unit
 *************************************************************************************************/

/* --------------------------------------------------------------------------------------------- */
/* Base pagina                                                                                   */
/* --------------------------------------------------------------------------------------------- */

/* Impostazioni base della pagina */
html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;

  /* Font applicativo unico per tutti i temi DevExtreme */
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Viewport DevExtreme */
body.dx-viewport {
  min-height: 100vh;

  /* Mantiene lo stesso font anche quando DevExtreme applica dx-viewport al body */
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Modifiche al CSS DevExpress dx.*                                                              */
/* --------------------------------------------------------------------------------------------- */ 

/* Modifica allo stile "dx-texteditor-container" per correggere l'altezza 100% */
.dx-texteditor-container {
  height: auto;
}

/* Modifica allo stile "dx-checkbox-container" per correggere l'altezza 100% */
.dx-checkbox-container {
  height: auto;
}

/* Modifica allo stile "dx-menu-base" per mettere il font a 16px */
.dx-menu-base {
  font-size: 16px;
}

/* Modifica allo stile "dx-menu-base .dx-icon" per ingrandire l'icona a 48px */
.dx-menu-base .dx-icon {
  width: 48px;
  height: 48px;
  background-size: 48px 48px;
  font-size: 16px;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Modifiche al CSS DevExpress per dxDialog                                                      */
/* --------------------------------------------------------------------------------------------- */ 

/* Adatta la larghezza della dialog per mobile e limita su desktop */
.dx-dialog .dx-overlay-content {
  width: 80vw;       /* 80% della viewport su tutti i dispositivi */
  max-width: 400px;  /* Non superare i 400px su desktop */
  box-sizing: border-box;
  font-size: 0.6em;
}

/* Titolo della dialog con colore principale del tema DevExtreme */
.dx-dialog .dx-popup-title {
  background-color: var(--dx-color-primary, var(--dx-accent-color, #337ab7));
  color: var(--dx-color-primary-contrast, white);
}

/* --------------------------------------------------------------------------------------------- */ 
/* Modifiche al CSS DevExpress per dxToolbar                                                     */
/* --------------------------------------------------------------------------------------------- */ 

/* Nascondi sempre l'icona di overflow nella dxToolbar */
#divHamburgerMenuToolbar .dx-toolbar .dx-button.dx-dropdownmenu-button {
  display: none !important;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Modifiche al CSS DevExpress per dxForm                                                        */
/* --------------------------------------------------------------------------------------------- */ 

/* Etichetta dei campi del dxForm */
.dx-field-label {
  color: var(--dx-color-primary, var(--dx-base-text-color, #333));
  font-weight: 600;
  font-size: 16px;
}

/* Valore dei campi del dxForm */
.dx-field-value {
  color: var(--dx-base-text-color, #333);
  font-size: 18px;
  font-weight: 600;
}

/* Sfondo editor readonly/disabled */
.dx-texteditor.dx-editor-filled.dx-state-disabled,
.dx-texteditor.dx-editor-filled.dx-state-readonly,
.dx-texteditor.dx-editor-filled.dx-state-readonly.dx-state-hover {
  background-color: var(--dx-base-bg, white);
  opacity: 0.85;
}

/* Testo editor readonly/disabled */
.dx-texteditor.dx-editor-filled.dx-state-disabled .dx-texteditor-input,
.dx-texteditor.dx-editor-filled.dx-state-readonly .dx-texteditor-input,
.dx-texteditor.dx-editor-filled.dx-state-readonly.dx-state-hover .dx-texteditor-input {
  color: var(--dx-base-text-color, #333);
}

/* --------------------------------------------------------------------------------------------- */ 
/* Modifiche al CSS DevExpress per dxGrid                                                        */
/* --------------------------------------------------------------------------------------------- */ 

/* Allarga dinamicamente il searchpanel */
.dx-datagrid-header-panel {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* Fa crescere la searchbox del searchpanel */
.dx-datagrid-search-panel {
  flex: 1 1 auto !important;
  max-width: clamp(120px, 40vw, 400px);
  width: 100% !important;
  margin-left: auto; /* La spinge a destra */
}

/* L'input dentro la searchbox del searchpanel */
.dx-datagrid-search-panel input {
  width: 100% !important;
}

/* Intestazioni griglie principali */
#divBachecaList .dx-datagrid .dx-datagrid-headers,
#divDataGridProvList .dx-datagrid .dx-datagrid-headers,
#divConsuList .dx-datagrid .dx-datagrid-headers {
  background-color: var(--dx-color-primary, var(--dx-accent-color, #337ab7)) !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
  color: var(--dx-color-primary-contrast, white) !important;
  font-size: 1.1em !important;
  font-weight: 600 !important; /* Semibold */
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Colori applicativi derivati dal tema DevExtreme                                                */
/* --------------------------------------------------------------------------------------------- */

:root {
  /* Colore di selezione G3cube: 50% colore principale + 50% sfondo tema */
  --g3c-selection-bg: color-mix(in srgb, var(--dx-color-primary, #0096DC) 50%, var(--dx-base-bg, white) 50%);

  /* Colore testo selezione: resta leggibile anche con selezione chiara */
  --g3c-selection-text: var(--dx-base-text-color, #333);
}

/* --------------------------------------------------------------------------------------------- */ 
/* Selezione righe DevExtreme                                                                    */
/* --------------------------------------------------------------------------------------------- */

/* Colori selezione G3cube derivati dal tema DevExtreme.
   Non usiamo colori fissi: se le variabili del tema non sono disponibili, resta il default DevExtreme. */
@supports (background-color: color-mix(in srgb, red 50%, white 50%)) {

  .dx-viewport {
    /* Colore principale del tema DevExtreme */
    --g3c-selection-source-color: var(--dx-color-primary, var(--dx-accent-color));

    /* Colore di sfondo del tema DevExtreme */
    --g3c-selection-base-color: var(--dx-base-bg, var(--dx-color-main-bg));

    /* Colore selezione: leggermente più chiaro del 50/50, ma ancora ben visibile */
    --g3c-selection-bg: color-mix(in srgb, var(--g3c-selection-source-color) 48%, var(--g3c-selection-base-color) 52%);

    /* Testo selezione: usa il colore testo del tema corrente */
    --g3c-selection-text: var(--dx-base-text-color, var(--dx-color-text));
  }

  /* Riga selezionata nelle dxDataGrid */
  .dx-datagrid-rowsview .dx-data-row.dx-selection > td,
  .dx-datagrid-rowsview .dx-data-row.dx-selection.dx-state-hover > td,
  .dx-datagrid-rowsview .dx-data-row.dx-selection.dx-row-focused > td {
    background-color: var(--g3c-selection-bg) !important;
    color: var(--g3c-selection-text) !important;
  }

  /* Riga focused nelle dxDataGrid.
     Serve quando la griglia evidenzia la riga cliccata come focus e non come selection. */
  .dx-datagrid-rowsview .dx-data-row.dx-row-focused > td,
  .dx-datagrid-rowsview .dx-data-row.dx-row-focused.dx-state-hover > td {
    background-color: var(--g3c-selection-bg) !important;
    color: var(--g3c-selection-text) !important;
  }

  /* Cella focused dentro la dxDataGrid */
  .dx-datagrid-rowsview .dx-data-row > td.dx-focused {
    background-color: var(--g3c-selection-bg) !important;
    color: var(--g3c-selection-text) !important;
  }

  /* Testo, link e contenuti dentro una riga selezionata/focused della dxDataGrid */
  .dx-datagrid-rowsview .dx-data-row.dx-selection > td *,
  .dx-datagrid-rowsview .dx-data-row.dx-row-focused > td *,
  .dx-datagrid-rowsview .dx-data-row.dx-selection > td a,
  .dx-datagrid-rowsview .dx-data-row.dx-row-focused > td a {
    color: var(--g3c-selection-text) !important;
  }

  /* Elemento selezionato nelle liste DevExtreme, quindi anche combo/list/selectbox */
  .dx-list .dx-list-item.dx-list-item-selected,
  .dx-list .dx-list-item.dx-list-item-selected.dx-state-focused,
  .dx-list .dx-list-item.dx-list-item-selected.dx-state-hover {
    background-color: var(--g3c-selection-bg) !important;
    color: var(--g3c-selection-text) !important;
  }

  /* Elemento focused nelle liste DevExtreme */
  .dx-list .dx-list-item.dx-state-focused {
    background-color: var(--g3c-selection-bg) !important;
    color: var(--g3c-selection-text) !important;
  }

  /* Contenuto testuale dell'elemento selezionato/focused nelle liste */
  .dx-list .dx-list-item.dx-list-item-selected .dx-list-item-content,
  .dx-list .dx-list-item.dx-state-focused .dx-list-item-content {
    color: var(--g3c-selection-text) !important;
  }
}

/* --------------------------------------------------------------------------------------------- */ 
/* Stili Generali G3cube                                                                         */
/* --------------------------------------------------------------------------------------------- */ 

/* Titolo di un div o di un form */
.g3c-title {
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);  /* Responsivo: min 1.8rem, max 2.5rem */
  font-weight: 600;                         /* Semibold, più moderno del bold pieno */
  color: var(--dx-color-primary, navy);   /* Fallback a navy se non c'è una primary definita */
  text-align: center;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

/* Testo delle finestra di dialogo */
.g3c-dialog-message {
  font-size: 2.4em;
  text-align: center;
  margin: 0 10px;
  font-weight: normal;
}

/* Pulsante standard */
.g3c-button {
  position: relative;
  min-width: 180px;
  height: 60px;
  padding: 14px 20px;
  margin: 8px 8px;
  border: 1px solid var(--dx-border-color, #ccc);
  border-radius: var(--dx-border-radius, 4px);
  color: var(--dx-base-text-color, #333);
  background-color: var(--dx-button-normal-bg, var(--dx-base-bg, white));
  font-size: 16px;
  cursor: pointer;
}

/* Hover pulsante standard */
.g3c-button:hover {
  filter: brightness(0.96);
}

/* Pulsante annulla / azione pericolosa */
.g3c-cancel-button {
  width: auto;
  padding: 10px 18px;
  border: none;
  border-radius: var(--dx-border-radius, 4px);
  color: var(--dx-color-danger-contrast, white);
  background-color: var(--dx-color-danger, #d9534f);
  font-size: 16px;
  cursor: pointer;
}

/* Hover pulsante annulla / azione pericolosa */
.g3c-cancel-button:hover {
  filter: brightness(0.92);
}

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

/* Immagine di sfondo finestra di login */
.bglogo {
  min-height: 100vh;
  min-height: 100dvh; /* Usa la viewport dinamica sui browser mobili moderni */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 16px;
  box-sizing: border-box;
  background-color: #F6FAFC; /* Colore neutro di fallback mentre carica l'immagine */
  background-image: url("../images/bg.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

/* Card centrale finestra di login */
.g3c-login-card {
  width: 390px;
  max-width: calc(100vw - 32px);
  padding: 32px 36px 30px 36px;
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(205, 222, 235, 0.95);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(31, 45, 61, 0.14);
  box-sizing: border-box;
}

/* Contenitore logo finestra di login */
.g3c-login-logo-container {
  text-align: center;
  margin: 0 0 16px 0;
  position: relative;
  max-width: 100%;
  overflow: visible;
}

/* Logo finestra di login */
.g3c-login-logo {
  display: block;
  max-width: 100%;
  max-height: 128px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* Titolo card finestra di login */
.g3c-login-card-title {
  margin: 0 0 8px 0;
  color: var(--dx-base-text-color, currentColor);
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  opacity: 0.90;
}

/* Sottotitolo card finestra di login */
.g3c-login-card-subtitle {
  margin: 0 0 24px 0;
  color: var(--dx-base-text-color, currentColor);
  font-size: 15px;
  text-align: center;
  opacity: 0.70;
}

/* Campo input finestra di login */
.g3c-login-field {
  position: relative;
  width: 100%;
  margin: 0 0 18px 0;
}

/* Etichetta campo finestra di login */
.g3c-login-label {
  position: absolute;
  top: -0.65em;
  left: 12px;
  padding: 2px 6px;
  font-size: 0.90em;
  color: var(--dx-text-color, rgba(0, 0, 0, 0.8));
  background-color: var(--dx-base-bg, white);
  border: 1px solid var(--dx-border-color, #ccc);
  border-radius: 4px;
  line-height: 1;
  z-index: 2;
  pointer-events: none; /* Evita che la label intercetti click/touch destinati al campo */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
}

/* Input finestra di login */
.g3c-login-input {
  width: 100%;
  padding: 12px 42px 10px 10px; /* Spazio a destra per l'icona occhio */
  font-size: 16px;
  box-sizing: border-box;
  border: 1px solid var(--dx-border-color, #ccc);
  border-radius: var(--dx-border-radius, 4px);
  background-color: var(--dx-base-bg, white);
  color: var(--dx-base-text-color, #333);
}

/* Input finestra di login in focus */
.g3c-login-input:focus {
  border-color: var(--dx-accent-color, var(--dx-color-primary, #337ab7));
  outline: none;
}

/* Pulsante visualizza/nascondi password */
.g3c-login-input-toggle-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: all;
}

/* Icona visualizza/nascondi password */
.g3c-login-input-toggle-btn .dx-icon {
  font-size: 20px;
  line-height: 1;
  color: var(--dx-base-text-color, #333);
  opacity: 0.35;
}

/* Hover icona visualizza/nascondi password */
.g3c-login-input-toggle-btn:hover .dx-icon {
  opacity: 0.65;
}

/* Stato password visibile */
.g3c-login-input-toggle-btn.g3c-input-visible .dx-icon {
  color: var(--dx-color-primary, var(--dx-accent-color, #337ab7));
  opacity: 1;
}

/* Login CheckBox "Ricordami" Container */
.g3c-login-rememberme-checkbox-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 4px 0 22px 0;
}

/* Login CheckBox "Ricordami" */
.g3c-login-rememberme-checkbox {
  max-width: 250px;
}

/* Pulsante finestra di login */
.g3c-login-button {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: var(--dx-border-radius, 4px);
  color: var(--dx-color-primary-contrast, white);
  background-color: var(--dx-color-primary, var(--dx-accent-color, #337ab7));
  font-size: 16px;
  cursor: pointer;
}

/* Hover pulsante finestra di login */
.g3c-login-button:hover {
  filter: brightness(0.92);
}

/* Pulsante secondario finestra di login */
.g3c-login-button-secondary {
  color: var(--dx-base-text-color, #333);
  background-color: var(--dx-button-normal-bg, var(--dx-base-bg, #f5f5f5));
  border: 1px solid var(--dx-border-color, #ccc);
}

/* Hover pulsante secondario finestra di login */
.g3c-login-button-secondary:hover {
  filter: brightness(0.96);
}

/* Separatore finestra di login */
.g3c-login-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin: 16px 0 18px 0;
  color: var(--dx-base-text-color, currentColor);
  font-size: 14px;
  text-align: center;
  opacity: 0.65;
}

/* Linee laterali separatore finestra di login */
.g3c-login-separator::before,
.g3c-login-separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background-color: currentColor;
  opacity: 0.25;
}

/* Link finestra di login (paragrafi) */
.g3c-login-links p {
  margin: 13px 0 0 0;
  text-align: center;
}

/* Link finestra di login */
.g3c-login-links a {
  display: block;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
}

/* Hover link finestra di login */
.g3c-login-links a:hover,
.g3c-login-links a:focus {
  opacity: 0.80;
  text-decoration: underline !important;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

/* Contenitore reCAPTCHA */
.g3c-recaptcha-container {
  display: flex;
  justify-content: center;
  padding: 10px;
  margin: 8px 0;
}

/* --------------------------------------------------------------------------------------------- */
/* Login - adattamento smartphone                                                                */
/* --------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {

  /* Sfondo login: meno padding verticale sui telefoni */
  .bglogo {
    padding: 10px 8px;
    align-items: flex-start;
  }

  /* Card login: più compatta, ma con larghezza massima controllata */
  .g3c-login-card {
    width: 370px;
    max-width: calc(100vw - 24px);
    padding: 18px 18px;
    border-radius: 18px;
  }

  /* Contenitore logo: meno spazio sotto al logo */
  .g3c-login-logo-container {
    margin: 0 0 12px 0;
  }

  /* Logo: più compatto su smartphone */
  .g3c-login-logo {
    max-height: 90px;
  }

  /* Titolo card */
  .g3c-login-card-title {
    margin: 0 0 4px 0;
    font-size: 22px;
    line-height: 1.15;
  }

  /* Sottotitolo card */
  .g3c-login-card-subtitle {
    margin: 0 0 14px 0;
    font-size: 14px;
    line-height: 1.25;
  }

  /* Campi login: meno spazio verticale */
  .g3c-login-field {
    margin: 0 0 13px 0;
  }

  /* Input login più compatti */
  .g3c-login-input {
    padding-top: 10px;
    padding-bottom: 8px;
  }

  /* Area Ricordami */
  .g3c-login-rememberme-checkbox-container {
    margin: 2px 0 14px 0;
  }

  /* Pulsante Accedi */
  .g3c-login-button {
    width: 100%;
    max-width: 250px;
    padding: 12px 18px;
    margin: 6px 0;
  }

  /* Separatore oppure */
  .g3c-login-separator {
    margin: 16px 0 12px 0;
  }

  /* Link sotto la login */
  .g3c-login-links p {
    margin: 9px 0 0 0;
  }

  .g3c-login-links a {
    font-size: 14px;
    line-height: 1.25;
  }
}

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

/* Header principale */
.g3c-header {
  display: flex;
  flex-direction: column;
  width: 100%;

  /* Crea una fascia chiara derivata dal colore principale del tema */
  background-color: rgba(201, 232, 247, 0.80);
  background-color: color-mix(in srgb, var(--dx-color-primary, #0096DC) 14%, var(--dx-base-bg, white) 86%);

  /* Usa il testo standard del tema per non forzare colori fuori skin */
  color: var(--dx-base-text-color, currentColor);

  /* Separa visivamente header e contenuto */
  border-bottom: 1px solid var(--dx-border-color, #d6e4ec);

  /* Ridà aria ai controlli della toolbar */
  padding: 6px 8px 4px 8px;
  box-sizing: border-box;

  text-align: center;
}

/* Riga superiore header: logo, titolo applicazione e utente */
#g3c-header-container {
  padding: 2px 8px 6px 8px;
  box-sizing: border-box;
}

/* Toolbar hamburger: tiene i pulsanti leggermente staccati dai bordi */
#divHamburgerMenuToolbar {
  padding: 2px 8px 4px 8px;
  box-sizing: border-box;
}

/* Immagine Logo Toolbar Applicazione */
.g3c-logo-img-container {
  text-align: left;
  position: relative;
  max-width: 180px;                 /* Larghezza massima su desktop */
  width: clamp(128px, 20vw, 180px); /* Si adatta in base alla larghezza schermo */
  transition: width 0.3s ease;
}

/* Immagine logo */
.g3c-logo-img {
  width: 100%;  /* Riempie il contenitore */
  height: auto; /* Mantiene proporzioni */
  max-height: 80px;
  transition: all 0.3s ease;
}

/* Titolo Applicazione / Titolo Toolbar Principale */
.g3c-toolbar-title {
  font-family: inherit;
  font-size: clamp(1.2em, 2vw + 1em, 2.5em); /* Minima, Preferita, Massima */
  font-weight: 400;
  line-height: 1.15;
}

/* Benvenuto, <Nome Utente> */
.g3c-toolbar-user {
  /* font-size: 0.8em; */
  font-size: clamp(0.8em, 1.5vw + 0.5em, 1em);
  line-height: 1.25;
  text-align: right;
  margin-right: 16px;
  padding-left: 10px;
  display: inline-block;
}

/* Nasconde il nome utente quando la larghezza dello schermo è inferiore a 400px */
@media (max-width: 400px) {
  .g3c-toolbar-user {
    display: none;
  }
}


/* --------------------------------------------------------------------------------------------- */
/* Layout contenuto principale con menù laterale                                                  */
/* --------------------------------------------------------------------------------------------- */

/* Contenitore principale: menù a sinistra + contenuto a destra */
#divContent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 8px 8px 36px 8px;
  box-sizing: border-box;
}

/* Menù principale laterale. Definisce la larghezza */
#divMainMenu {
  flex: 0 0 25%;
  max-width: 280px;
  min-width: 220px;
  overflow: auto;
  box-sizing: border-box;
  padding-right: 8px;
  /* gap: 12px; */
  /* border-right: 1px solid var(--dx-border-color, #ddd); */
}

/* Tutti i contenitori applicativi a destra del menù. Fa occupare tutto lo spazio rimanente a griglie/form*/
#divContent > div:not(#divMainMenu):not(#btnScrollOnTop) {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}

/* Quando il menù principale deve sparire */
#divContent.g3c-main-menu-hidden #divMainMenu {
  display: none !important;
}

/* Smartphone: se il menù è visibile occupa tutta la larghezza */
@media (max-width: 899px) {
  #divMainMenu {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    border-right: none;
    padding-right: 0;
  }
}


/* --------------------------------------------------------------------------------------------- */ 
/* Footer                                                                                        */
/* --------------------------------------------------------------------------------------------- */

/* Footer */
.g3c-footer-container {
  background-color: rgba(201, 232, 247, 0.80);
  background-color: color-mix(in srgb, var(--dx-color-primary, #0096DC) 14%, var(--dx-base-bg, white) 86%);
  color: var(--dx-base-text-color, currentColor);

  position: fixed;
  width: 100%;
  bottom: 0;

  border-top: 1px solid var(--dx-border-color, #d6e4ec);
  box-sizing: border-box;
}

/* Copyright nel footer */
.g3c-footer-container #divFooterCopyright {
  font-size: 100% !important; /* Mantiene il testo su una sola riga sugli smartphone quando possibile */
}

/* Footer su tablet e smartphone */
@media (max-width: 900px) {
  .g3c-footer-container #divFooterCopyright {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------------------------- */ 
/* Menù hamburger                                                                                */
/* --------------------------------------------------------------------------------------------- */

/* dxTreeView come Menù hamburger */
#divHamburgerMenuToolbar {
  background-color: transparent !important;
  border: none;
  box-shadow: none;
  margin-bottom: 4px;
}

/* Contenuto degli elementi del TreeView */
#divHamburgerMenu .dx-treeview-item .dx-treeview-item-content {
  text-align: left !important;
  display: block; /* Evita comportamenti indesiderati da flexbox */
}

/* Container menù hamburger */
#divHamburgerMenuContainer {
  background: var(--dx-base-bg, white);
  color: var(--dx-base-text-color, currentColor);
  border: 1px solid var(--dx-border-color, #ddd);
  z-index: 9999; /* Visualizza il menù sopra tutti gli altri controlli */
  position: absolute;
  width: auto;
  min-width: 200px;
  padding-left: 10px;
}

/* Menù hamburger */
#divHamburgerMenu {
  background: var(--dx-base-bg, white);
  color: var(--dx-base-text-color, currentColor);
  margin: 0; /* Rimuove i margini centrati */
}

/* --------------------------------------------------------------------------------------------- */ 
/* Menù hamburger - Combo cambio tema                                                            */
/* --------------------------------------------------------------------------------------------- */
/* Item toolbar contenente il cambio tema */
.g3c-toolbar-theme-switcher-item {
  padding-left: 6px;
  padding-right: 6px;
  vertical-align: middle;
}

/* Allinea verticalmente il cambio tema agli altri pulsanti della toolbar */
.g3c-toolbar-theme-switcher-item .dx-toolbar-item-content {
  display: flex;
  align-items: center;
  height: 38px;
}

/* SelectBox cambio tema nella toolbar */
.g3c-toolbar-theme-switcher {
  width: 230px;
}

/* Altezza coerente con i pulsanti Aiuto / Esci */
.g3c-toolbar-theme-switcher .dx-texteditor {
  height: 36px;
}

/* Allinea il testo interno della SelectBox */
.g3c-toolbar-theme-switcher .dx-texteditor-input {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Pulsanti della toolbar allineati alla SelectBox */
#divHamburgerMenuToolbar .dx-button {
  height: 36px;
}

/* Contenuto dei pulsanti centrato verticalmente */
#divHamburgerMenuToolbar .dx-button-content {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Su smartphone e tablet piccoli nasconde il cambio tema dalla toolbar */
@media (max-width: 900px) {
  .g3c-toolbar-theme-switcher-item {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------------------------- */ 
/* Utente, Stabile, Esercizio Contabile                                                          */
/* --------------------------------------------------------------------------------------------- */

/* Container Utente, Stabile, Esercizio Contabile */
.g3c-selectbox-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--dx-base-bg, white);
  color: var(--dx-base-text-color, currentColor);
}

/* dxSelectBox Utente, Stabile, Esercizio */
.g3c-selectbox {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Gestione Pulsante Flottante "Scroll On Top"                                                   */
/* --------------------------------------------------------------------------------------------- */ 

/* Posizione del bottone flottante in basso a destra */
.g3c-scrollontop-button {
  position: fixed;
  bottom: 25px;
  right: 20px;
  z-index: 1000;
  opacity: 0.35;
  transition: opacity 0.3s ease;
  width: 40px;
  height: 40px;
  color: var(--dx-color-primary, var(--dx-accent-color, #337ab7));
  background-color: var(--dx-base-bg, white);
  border: 1px solid var(--dx-border-color, #ccc);
  border-radius: var(--dx-border-radius, 4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icona del bottone flottante */
.g3c-scrollontop-button .dx-icon {
  color: currentColor;
  font-size: 24px;
}

/* Hover bottone flottante */
.g3c-scrollontop-button:hover {
  opacity: 0.75;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Griglie Documenti                                                                             */
/* --------------------------------------------------------------------------------------------- */ 

/* Colonna della griglia contentente l'immagine con il tipo file (PDF, PNG, ecc.) */
.g3c-icon-column {
  padding: 0 !important;
  text-align: center;
}

/* Immagine della griglia contentente l'immagine con il tipo file (PDF, PNG, ecc.) */
.g3c-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: inline-block;
}

/* Titolo nella toolbar della griglia con font responsive */
.g3c-grid-title {
  font-size: clamp(0.1em, 1vw + 1em, 1.8em);
  margin: 0;
}

/* Griglia Bacheca. Riduce il font della griglia per alcuni campi */
.g3c-bacheca-small-text {
  font-size: 1em !important;
}

/* Riga di anteprima Bacheca */
.g3c-bacheca-preview-row {
  background-color: rgba(255, 255, 225, 0.8) !important;
}

/* Cella di anteprima Bacheca */
.g3c-bacheca-preview-cell {
  padding: 10px 20px;
}

/* Testo di anteprima Bacheca */
.g3c-bacheca-preview-text {
  font-size: 1em;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Griglia Riepilogo Contabile. Riduce il font della griglia per i campi */
.g3c-consu-small-text {
  font-size: 1em !important;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Immagini anagrafiche                                                                          */
/* --------------------------------------------------------------------------------------------- */ 

/* Immagini anagrafiche: amministratore, stabile e utente */
.g3c-admin-logo img,
.g3c-stabile-logo img,
.g3c-resident-logo img {
  width: 100%;
  height: auto;
  max-width: 256px;
  max-height: 256px;
  border: 1px solid var(--dx-border-color, #d2d3d5);
  border-radius: 10%;
  display: block;
  margin: 0 auto;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

/* Hover immagini anagrafiche */
.g3c-admin-logo img:hover,
.g3c-stabile-logo img:hover,
.g3c-resident-logo img:hover {
  transform: scale(1.05);
}

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

/* Descrizione stabile in grassetto */
.g3c-admin-descr input {
  font-size: 120% !important;
  font-weight: bold !important;
}

/* Container Amministratore */
#divAdminContainer {
  display: flex;
  flex-direction: column; /* Impila i figli verticalmente */
  justify-content: center; /* Centra orizzontalmente */
  align-items: center; /* Centra verticalmente */
  min-height: auto;
  padding: 20px; /* Evita che il form sia troppo schiacciato */
}

/* Form Amministratore */
#divAdminForm {
  border-radius: 12px;
  padding: 20px;
  background-color: var(--dx-base-bg); /* Prende il colore di sfondo del tema DevExtreme */
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 80%;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Form Stabile / Condominio                                                                     */
/* --------------------------------------------------------------------------------------------- */

/* Descrizione stabile in grassetto */
.g3c-stabile-dessta input {
  font-size: 120% !important;
  font-weight: bold !important;
}

/* Container Stabile */
#divStabileContainer {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra orizzontalmente */
  align-items: center; /* Centra verticalmente */
  min-height: auto;
  padding: 8px; /* Evita che il form sia troppo schiacciato */
}

/* Form Stabile */
#divStabileForm {
  border-radius: 12px;
  padding: 8px;
  background-color: var(--dx-base-bg); /* Prende il colore di sfondo del tema DevExtreme */
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 80%;
  margin-bottom: 20px;
}

/* Mappa Stabile */
#divStabileMap {
  padding: 16px;
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
  max-width: 900px;
  width: 94%;
  margin-bottom: 20px;
}

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

/* Container Utente */
#divResidentContainer {
  display: flex;
  justify-content: center; /* Centra orizzontalmente */
  align-items: center; /* Centra verticalmente */
  min-height: auto;
  padding: 20px; /* Evita che il form sia troppo schiacciato */
}

/* Form Utente */
#divResidentForm {
  border-radius: 12px;
  padding: 20px;
  background-color: var(--dx-base-bg); /* Prende il colore di sfondo del tema DevExtreme */
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 80%;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Fornitori                                                                                     */
/* --------------------------------------------------------------------------------------------- */

/* Container Fornitori */
#divProvContainer {
  display: flex;
  flex-direction: column; /* Impila i figli verticalmente */
  height: 100%;
}

/* Form Fornitori */
#divProvForm {
  margin-top: 20px; /* Spazio tra la griglia e il form */
  padding: 20px;
  border-top: 1px solid var(--dx-border-color, #ccc);
  display: block;
  clear: both; /* Evita che galleggi sopra la griglia */
}

/* --------------------------------------------------------------------------------------------- */ 
/* Modifica Password                                                                             */
/* --------------------------------------------------------------------------------------------- */

/* Form contenitore modifica password */
#divChangePwd {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  margin: 10px auto;
  padding: 20px;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Recupera Credenziali                                                                          */
/* --------------------------------------------------------------------------------------------- */

/* Form contenitore Recupera Credenziali Utente */
#divUserCredentials {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  margin: 10px auto;
  padding: 20px;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Riepilogo Contabile                                                                           */
/* --------------------------------------------------------------------------------------------- */

/* Container Riepilogo Contabile */
#divConsuContainer {
  display: flex;
  flex-direction: column; /* Impila i figli verticalmente */
  height: 100%;
}

/* --------------------------------------------------------------------------------------------- */ 
/* HTML Editors                                                                                  */
/* --------------------------------------------------------------------------------------------- */

/* Editor HTML */
.g3c-htmleditor {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 32px;
}