body {
    white-space: pre-line;
    /* Per rispettare gli '\n' nei textContent degli elementi html */
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 500px;
}

.center-a {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Classe per la disposizione della pagina "tabella" */
.center-table {
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*---------------------------------------------------*/

.center-b {
    margin-left: 0;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.center-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 10%;
    max-width: 500px;
}

h1 {
    text-align: center
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-group {
    display: flex;
    justify-content: center;
}

/* Finestra modale per pulsanti (Travasa, Carica e Svuota) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    padding: 10px;
    border: 1px solid #888;
    min-width: 450px;
    max-width: 750px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.modal-header {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.modal-title {
    text-align: center;
    flex-grow: 1;
    font-size: 1.5em;
    font-weight: bold;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.input-group input[type="text"],
.input-group input[type="password"] {
    text-align: left;
    width: 108px;
    padding: 5px;
    margin-left: 20px;
    border: 1px solid #444;
    border-radius: 4px;
}

.input-group label,
#decant-silos-label {
    min-width: 80px;
    font-weight: bold;
}

.close {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #e93434;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.close:focus,
.close:hover {
    color: #b71c1c;
    text-decoration: none;
    cursor: pointer;
}

#error-decant-ettolitri,
#error-decant-silos,
#error-load-ettolitri,
#error-load-type,
#error-empty-ettolitri {
    /* Gestisce le label di errore */
    white-space: nowrap;
    /* Evita che il testo delle label di errore vada a capo */
    margin-left: 10px;
    color: red;
    font-size: 0.9em;
}

/* Pulsanti per aprire le finestre Travasa, Carica e Svuota */
.action-button {
    font-family: "Merriweather", serif;
    font-size: medium;
    font-weight: bold;
    background-color: #F8F9FA;
    color: black;
    padding: 10px 10px;
    height: 40px;
    min-width: 100px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 20px;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
}

.action-button:hover:not(:disabled) {
    background-color: #E0E0E0;
}

.action-button:active:not(:disabled) {
    background-color: #D6D6D6;
}

/* --- Pulsanti e Select disabilitati --- */
/* Stato disabilitato per i pulsanti */
.action-button:disabled {
    background-color: #bfbfbf;
    color: #666;
    border: 1px solid #999;
    opacity: 0.8;
    cursor: not-allowed !important;
}

/* Stato disabilitato per la SELECT2 */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #bfbfbf !important;  /* stesso grigio dei pulsanti disabilitati */
    color: #666 !important;                /* testo più spento */
    border: 1px solid #999 !important;     /* bordo più scuro */
    cursor: not-allowed !important;        /* blocca interazione visiva */
    opacity: 0.8;                          /* effetto “spento” */
}

/* Disabilita hover anche sul “falso” select */
.select2-container--default.select2-container--disabled .select2-selection--single:hover {
    background-color: #bfbfbf !important;
    color: #666 !important;
    cursor: not-allowed !important;
}

/* Freccia disabilitata (icona dropdown) */
.select2-container--default.select2-container--disabled .select2-selection__arrow b {
    border-color: #666 transparent transparent transparent !important; /* freccia più scura */
}

/* Testo interno della select2 disabilitata */
.select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: #666 !important;           /* testo spento */
    opacity: 0.8;                     /* coerente con il resto */
}

/* Placeholder disabilitato (quando non è selezionato nulla) */
.select2-container--default.select2-container--disabled .select2-selection__placeholder {
    color: #777 !important;           /* leggermente più chiaro */
    opacity: 0.8;
}
/* -------------------------------------- */

/* Pulsante per confermare il Travaso/Carico/Svuotamento e avviare le chiamate API */
#decant-button,
#load-button,
#empty-button {
    font-family: "Merriweather", serif;
    font-size: medium;
    font-weight: bold;
    background-color: #F8F9FA;
    color: black;
    padding: 10px 10px;
    height: 40px;
    min-width: 120px;
    margin-top: 9px;
    margin-bottom: 10px;
    margin-left: 20px;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
}

#decant-button:hover,
#load-button:hover,
#empty-button:hover {
    background-color: #E0E0E0;
}

#decant-button:active,
#load-button:active,
#empty-button:active {
    background-color: #D6D6D6;
}

/* --- Regole globali per gli elementi Select2 --- */
.select2-container .select2-dropdown .select2-results__options {
    /* Gestione della finestra delle opzioni */
    max-height: 220px !important;
    /* Altezza impostata per rendere visualizzabili le 7 opzioni dello "Stato" */
    overflow-y: auto !important;
}

/*-------------------------------------------------*/

/* Pulsante per selezionare il filtro Tipo Contenitore (pagina tabella) */
/* --- Gestione dei vari elementi della libreria Select2 --- */
#select-filtro-contenitore+.select2-container {
    /* Contenitore principale Select2 (width,margin,position) */
    min-width: 250px;
    margin-left: 20px;
    position: relative;
    /* Serve per dare una posizione di riferimento ai "figli" con position=absolute */
}

#select-filtro-contenitore+.select2-container--default .select2-selection--single {
    /* Select2 (heigth e aspetto del pulsante) */
    height: 40px !important;
    /* Modifica l'altezza */
    background-color: #F8F9FA;
    padding: 10px 10px !important;
    /* Regola il padding interno */
    display: flex !important;
    align-items: center !important;
    /* Centra verticalmente il testo */
    justify-content: center;
    /* Centra orizzontalmente il testo */
    border: 1.8px solid #444;
    border-radius: 5px;
}

#select-filtro-contenitore+.select2-container--default .select2-selection__arrow {
    /* Freccia del dropdown */
    position: absolute;
    /* "Sgancia" la freccia dalle regole del contenitore */
    top: 50%;
    right: 10px;
    /* Mantiene la freccia a destra */
    transform: translateY(-50%);
    /* Centra la freccia verticalmente */
}

.select2-container--default .select2-selection__placeholder {
    /* Placeholder */
    color: black !important;
    /* Cambia il colore */
    font-family: "Merriweather", serif !important;
    /* Applica il font */
    font-size: medium !important;
    /* Dimensione del testo */
    opacity: 1 !important;
    /* Evita che il testo appaia trasparente */
}

.select2-container--default .select2-selection__rendered {
    /* Opzione selezionata */
    color: black !important;
    /* Cambia il colore */
    font-family: "Merriweather", serif !important;
    font-size: medium !important;
    font-weight: bold !important;
}

.select2-container--default .select2-dropdown {
    /* Tendina */
    background-color: #e0e0e0;
    border: 1.8px solid #444;
}

#select-filtro-contenitore+.select2-container--default .select2-selection--single:hover {
    /* Hover del pulsante select */
    background-color: #e0e0e0;
    /* Sfondo più scuro quando passi sopra */
    cursor: pointer;
}

/* --------------------------------------------------------- */

/* Pulsante per selezionare la Tipologia (Carico) */
/* --- Gestione dei vari elementi della libreria Select2 --- */
#load-type+.select2-container {
    /* Contenitore principale Select2 (width,margin,position) */
    min-width: 330px;
    max-width: 400px;
    margin-left: 20px;
    position: relative;
    /* Serve per dare una posizione di riferimento ai "figli" con position=absolute */
}

#load-type+.select2-container--default .select2-selection--single {
    /* Select2 (heigth e aspetto del pulsante) */
    white-space: normal !important;
    /* Permette il testo su più righe */
    height: auto !important;
    /* Permette alla Select2 di adattarsi in altezza */
    min-height: 40px !important;
    /* Altezza minima */
    background-color: #F8F9FA;
    padding: 0px 10px 0px 0px !important;
    /* Regola il padding interno */
    display: flex !important;
    align-items: center !important;
    /* Centra verticalmente il testo */
    justify-content: center;
    /* Centra orizzontalmente il testo */
    border: 1px solid #444;
    border-radius: 5px;
}

#load-type+.select2-container--default .select2-selection__arrow {
    /* Freccia del dropdown */
    position: absolute;
    /* "Sgancia" la freccia dalle regole del contenitore */
    top: 50%;
    right: 10px;
    /* Mantiene la freccia a destra */
    transform: translateY(-50%);
    /* Centra la freccia verticalmente */
}

#load-type+.select2-container--default .select2-selection__placeholder {
    /* Placeholder */
    color: black !important;
    /* Cambia il colore */
    font-family: "Merriweather", serif !important;
    /* Applica il font */
    font-size: 15px !important;
    /* Dimensione del testo */
    opacity: 1 !important;
    /* Evita che il testo appaia trasparente */
}

#load-type+.select2-container--default .select2-selection__rendered {
    /* Opzione selezionata */
    white-space: normal !important;
    /* Permette la visualizzazione su più righe */
    word-wrap: break-word !important;
    /* Forza il testo ad andare a capo per non sforare la larghezza massima */
    /*display: block !important; /* Cambia il display per adattarsi al contenuto (non serve) */
    /*text-align: left !important; /* Mantiene l'allineamento naturale (non serve) */
    color: black !important;
    /* Cambia il colore */
    font-family: "Merriweather", serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
}
/* --------------------------------------------------------- */

/* Pulsante per selezionare lo Stato */
/* --- Gestione dei vari elementi della libreria Select2 --- */
#state-combo-box+.select2-container {
    /* Contenitore principale Select2 (width,margin,position) */
    min-width: 250px;
    margin-left: 20px;
    position: relative;
    /* Serve per dare una posizione di riferimento ai "figli" con position=absolute */
}

#state-combo-box+.select2-container--default .select2-selection--single {
    /* Select2 (heigth e aspetto del pulsante) */
    height: 40px !important;
    /* Modifica l'altezza */
    background-color: #F8F9FA;
    padding: 10px 10px !important;
    /* Regola il padding interno */
    display: flex !important;
    align-items: center !important;
    /* Centra verticalmente il testo */
    justify-content: center;
    /* Centra orizzontalmente il testo */
    border: 1px solid #444;
    border-radius: 5px;
}

#state-combo-box+.select2-container--default .select2-selection__arrow {
    /* Freccia del dropdown */
    position: absolute;
    /* "Sgancia" la freccia dalle regole del contenitore */
    top: 50%;
    right: 10px;
    /* Mantiene la freccia a destra */
    transform: translateY(-50%);
    /* Centra la freccia verticalmente */
}

.select2-container--default .select2-selection__placeholder {
    /* Placeholder */
    color: black !important;
    /* Cambia il colore */
    font-family: "Merriweather", serif !important;
    /* Applica il font */
    font-size: medium !important;
    /* Dimensione del testo */
    opacity: 1 !important;
    /* Evita che il testo appaia trasparente */
}

.select2-container--default .select2-selection__rendered {
    /* Opzione selezionata */
    color: black !important;
    /* Cambia il colore */
    font-family: "Merriweather", serif !important;
    font-size: medium !important;
    font-weight: bold !important;
}
/* --------------------------------------------------------- */

/* --- Elementi per la scansione QR --- */
#decant-silos {
    margin-left: 25px;
    margin-right: 50px;
}

#start-scanner {
    /* Pulsante per aprire la fotocamera */
    font-family: "Merriweather", serif;
    font-size: small;
    font-weight: bold;
    background-color: #F8F9FA;
    color: black;
    padding: 10px 10px;
    height: 30px;
    width: 120px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 20px;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
}

#start-scanner:hover {
    background-color: #E0E0E0;
}

#start-scanner:active {
    background-color: #D6D6D6;
}

#video {
    max-width: 250px;
    /* Limita la larghezza all'interno della finestra; dimensioni gestite dal dispositivo */
    margin-left: 20px;
    border: 1px solid black;
}
/* ------------------------------------ */

#switch-button {
    margin-left: 5px;
}

/* Classi custom per finestre di alert */
.custom-success {
    height: auto;
    min-width: 500px;
}

.custom-success .swal2-html-container {
    /* Testo interno */
    margin-top: 10px;
}

.custom-loading {
    font-size: large;
    height: 250px;
    width: 500px;
}

.custom-warning {
    height: auto;
    width: auto;
}

.custom-warning .swal2-html-container {
    /* Testo interno */
    text-align: justify;
    margin-top: 10px;
}

.custom-error .swal2-html-container {
    /* Testo interno */
    text-align: justify;
    margin-top: 10px;
}

/* --- Finestra di Login --- */
#login-modal .input-group {
    text-align: right;
    justify-content: center;
}

#login-modal .input-group input {
    width: auto;
}

#login-fields {
    display: flex;
    flex-direction: column;
    /* mantiene i campi uno sotto l’altro */
    align-items: center;
    /* li centra orizzontalmente */
    justify-content: center;
    /* li centra verticalmente */
}

#login-button {
    display: block;
    /* rende il pulsante un elemento a blocco */
    margin: 15px auto 15px auto;
    /* lo centra orizzontalmente e lo sposta leggermente verso il basso */
    font-family: "Merriweather", serif;
    font-size: medium;
    font-weight: bold;
    background-color: #F8F9FA;
    color: black;
    padding: 8px 15px;
    height: 35px;
    min-width: 100px;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
}

#login-button:hover {
    background-color: #E0E0E0;
}

#login-button:active {
    background-color: #D6D6D6;
}

#error-login {
    white-space: nowrap; /* Evita che il testo delle label di errore vada a capo */
    text-align: center;
    margin-top: 10px;
    color: red;
    font-size: 0.9em;
}