/* --------------------------------------------------------------------------------------------- */ 
/* 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;
}

 .dx-dialog .dx-popup-title {
  background-color: var(--dx-color-primary);
  color: var(--dx-color-primary-contrast);
}

/* --------------------------------------------------------------------------------------------- */ 
/* Modifiche al CSS DevExpress per toast DevExpress.ui.notify                                    */
/* --------------------------------------------------------------------------------------------- */ 

/* Personalizzazione del toast di tipo 'info' */
.dx-toast-info {
  background-color: rgba(0, 150, 220, 0.9) !important;    /* Azzurro con 90% opacità */
  color: #FFFFFF !important;                               /* Bianco */
  font-size: 1.1em !important;                               /* Aumento della dimensione del font */
}

/* Personalizzazione del toast di tipo 'warning' */
.dx-toast-warning {
  background-color: rgba(224, 116, 0, 0.9) !important;     /* Arancione con 90% opacità */
  color: #FFFFFF !important;                               /* Bianco */
  font-size: 1.1em !important;                               /* Aumento della dimensione del font */
}

/* Personalizzazione del toast di tipo 'error' */
.dx-toast-error {
  background-color: rgba(211, 47, 47, 0.9) !important;     /* Rosso scuro con 90% opacità*/
  color: #FFFFFF !important;                               /* Bianco */
  font-size: 1.2em !important;                               /* Aumento della dimensione del font */
}

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

/* Etichetta  dei campi del dxForm */
/* Puoi far risaltare le etichette con un contrasto più chiaro */
.dx-field-label {
  color: var(--dx-color-accent); /* Usa il colore principale del tema */
  font-weight: 600;
  font-size: 16px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Valore dei campi del dxForm */
/* Dal momento che il form è readonly, possiamo giocare con la visibilità dei dati */
.dx-field-value {
  color: var(--dx-color-success); /* Un verde più elegante */
  font-size: 18px;
  font-weight: bold;
}

/* Modifica lo sfondo degli editor readonly */
.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: rgba(240, 233, 233, 0.3)
}
/* Modifica il colore del font degli editor readonly */
.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: rgba(20, 20, 19, 0.9);
}

/* --------------------------------------------------------------------------------------------- */ 
/* 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; /* bold ma non troppo grezzo */
  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;
}

/* --------------------------------------------------------------------------------------------- */ 
/* Form Generici modificati in stile DevExpress                                                  */
/* --------------------------------------------------------------------------------------------- */ 

/* Contenitore Text Box */
.g3c-input-container {
  position: relative;
  width: 80%;
  max-width: 250px;
  margin: 1.2em auto; 
}

/* Text Box stile DevExpress */
.g3c-input {
  width: 100%;
  padding: 12px 10px 10px;
  font-size: 16px;
  box-sizing: border-box;
  /* border: 1px solid #ccc; */
  border: 1px solid var(--dx-border-color, #ccc);
  /* border-radius: 4px; */
  border-radius: var(--dx-border-radius, 4px);
  /* background-color: white; */
  background-color: var(--dx-base-bg, white);
  color: var(--dx-base-text-color, #333);
}

/* Label incastonata con bordi arrotondati, ombra e stile DevExpress */
.g3c-floating-label {
  position: absolute;
  top: -0.65em;
  left: 12px;
  padding: 2px 6px;
  font-size: 0.85em;
  color: var(--dx-text-color, rgba(0, 0, 0, 0.8));
  background-color: var(--dx-background-color, white);
  border: 1px solid var(--dx-border-color, #ccc);
  border-radius: 4px;
  line-height: 1;
  z-index: 2;
  pointer-events: none;

  /* Leggero stacco visivo */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
}

.g3c-input:focus + .g3c-floating-label {
  border-color: var(--dx-accent-color, #0078d4);
  color: var(--dx-accent-color, #0078d4);
  box-shadow: 0 0 3px rgba(0, 120, 212, 0.3);
}

/* Pulsante per toggle della visibilità */
.g3c-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;
}

/* Icone occhio (aperto o chiuso) */
.g3c-input-toggle-btn .dx-icon {
  font-size: 20px;
  line-height: 1;
  color: #ccc;
}

/* Quando la password è visibile (occhio aperto) */
.g3c-input-visible .dx-icon-eyeopen {
  color: var(--dx-accent-color, #0078d4);
}

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


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

/* Titolo Applicazione Login */
.g3c-login-title {
  font-size: 32px;  
  font-style: bold;
  color: navy;
  text-align: center;
}

/* Contenitore Immagine di App-Logo */
.g3c-app-logo-img-container {
  text-align: center;
  margin: 12px 0;
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

/* Immagine app-logo */
.g3c-app-logo-img {
  display: block;               /* necessario per margin auto */
  margin: 0 auto;               /* centra orizzontalmente */
  max-width: 280px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Contenitore Immagine di Login */
.g3c-login-img-container {
  text-align: center;
  margin: 12px 0;
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

/* Immagine di Login */
.g3c-login-img {
  max-width: 100%;
  max-height: 128px; /* puoi cambiare il limite qui */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Pulsante di Login */
.g3c-login-button {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 250px;
  font-size: 16px; 
}

/* Opacità al'80% del Pulsante di Login  quando si scorre con il muose */
.g3c-login-button:hover {
  opacity: 0.8;
}

/* Pulsante Annulla */
.g3c-cancel-button {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f44336;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 250px;
  font-size: 16px; 
}

/* Pulsante Standard */
.g3c-button {
  position: relative;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  /* background-color: #0c08f5; */
  /* color: white; */
  padding: 14px 20px;
  margin: 8px 8px;
  border: none;
  cursor: pointer;
  height: 60px;
  width: 180px;
  font-size: 16px; 
}

/* Opacità al'80% del Pulsante quando si scorre con il muose */
.g3c-button:hover {
  opacity: 0.8;
}

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

/* Contenitore logo + info */
.g3c-shop-header-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;      /* allinea verticalmente al centro */
    gap: 20px;
    margin-bottom: 4px;
}

/* Contenitore del logo */
.g3c-shop-logo-container {
    flex: 0 0 auto;
    text-align: center;
}

/* Contenitore delle informazioni fiscali */
.g3c-shop-info-container {
    flex: 0 0 auto;
    display: flex;            /* permette l’allineamento verticale */
    flex-direction: column;
    justify-content: center;  /* centra verticalmente il testo rispetto al logo */
    text-align: left;
    font-size: clamp(10px, 2.5vw, 16px);
    line-height: 1.2;
}

/* Mobile */
@media (max-width: 600px) {

    .g3c-shop-header-container {
        flex-direction: column;
        text-align: center;
        align-items: center;    /* centratura perfetta anche in colonna */
        gap: 4px;   /* <-- riduce lo spazio verticale */
    }

    .g3c-shop-info-container {
        text-align: center;
        margin-top: 10px;
        justify-content: flex-start; /* su mobile NON serve centratura verticale */
    }

}

/* Testo centrato verticalmente sull'immagine in-line (Stato Assistenza) */
.g3c-state-inline {
    display: flex;
    flex-direction: row;
    align-items: center;      /* <-- allineamento verticale perfetto */
    gap: 16px;                /* distanza fra icona e testo */
}

/* Immagine in-line (Stato Assistenza) */
.g3c-state-icon {
    width: 32px;
    height: 32px;
}

.g3c-state-text {
    font-size: 1.4rem;         /* <-- testo più grande */
    font-weight: 600;        /* <-- grassetto */
    color: #333;
}

/* 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 da 60 a 120px 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; /* opzionale per limiti verticali */
  transition: all 0.3s ease;
}

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

/* --------------------------------------------------------------------------------------------- */ 
/* Footer                                                                                        */
/* --------------------------------------------------------------------------------------------- */
.g3c-footer-container {
  background-color: rgba(201, 232, 247, 0.8);
  /* background-color: var(--dx-status-bar-bg); */
  position: fixed;
  width: 100%;
  bottom: 0;
}

.g3c-footer-container #divFooterCopyright {
  font-size: 100% !important; /* Riduce il font standard al 70% per restare su una sola riga sugli smartphone */
}


/* --------------------------------------------------------------------------------------------- */ 
/* qrCode                                                                                        */
/* --------------------------------------------------------------------------------------------- */
/* Overlay semi-trasparente */
.g3c-camera-container {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* Fondo scuro semi-trasparente */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Stile dell'immagine del QR Code a tutto schermo */
.g3c-camera {
  width: 100%;
  height: 100%;
  /* Visualizza un'immagine mentre attendo il caricamento della fotocamera
  background: url('./images/img-login.png') center center no-repeat;   
  background-size: cover; */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Pulsante di chiusura, ancorato in alto a destra */
.g3c-camera-close-btn {
  position: absolute;
  top: 10px; /* Aggiusta la distanza dalla parte superiore */
  right: 10px; /* Aggiusta la distanza dalla parte destra */
  z-index: 10000; /* Assicurati che abbia un z-index alto per non essere coperto */
  background-color: rgba(255, 255, 255, 0.7); /* Colore di sfondo semi-trasparente */
  border: none;
  font-size: 18px;
  padding: 8px 16px;
  color: #000;
  cursor: pointer;
  border-radius: 4px;
}

/* Colore al passaggio del mouse */
.g3c-camera-close-btn:hover {
  background-color: rgba(255, 255, 255, 1);
}