html {
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

body {
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

:root {
    --lime-50:  rgb(249, 251, 231);
    --lime-100: rgb(240, 244, 195);
    --lime-200: rgb(230, 238, 156);
    --lime-300: rgb(220, 231, 117);
    --lime-400: rgb(212, 225, 87);
    --lime-500: #cddc39;
    --lime-600: rgb(192, 202, 51);
    --lime-700: rgb(175, 180, 43);
    --lime-800: rgb(158, 157, 36);
    --lime-900: rgb(130, 119, 23);
}

.text-lime-50,.hover\:text-lime-50:hover,.focus\:text-lime-50:focus,.active\:text-lime-50:active{ color: var(--lime-50) !important; }
.text-lime-100,.hover\:text-lime-100:hover,.focus\:text-lime-100:focus,.active\:text-lime-100:active{ color: var(--lime-100) !important; }
.text-lime-200,.hover\:text-lime-200:hover,.focus\:text-lime-200:focus,.active\:text-lime-200:active{ color: var(--lime-200) !important; }
.text-lime-300,.hover\:text-lime-300:hover,.focus\:text-lime-300:focus,.active\:text-lime-300:active{ color: var(--lime-300) !important; }
.text-lime-400,.hover\:text-lime-400:hover,.focus\:text-lime-400:focus,.active\:text-lime-400:active{ color: var(--lime-400) !important; }
.text-lime-500,.hover\:text-lime-500:hover,.focus\:text-lime-500:focus,.active\:text-lime-500:active{ color: var(--lime-500) !important; }
.text-lime-600,.hover\:text-lime-600:hover,.focus\:text-lime-600:focus,.active\:text-lime-600:active{ color: var(--lime-600) !important; }
.text-lime-700,.hover\:text-lime-700:hover,.focus\:text-lime-700:focus,.active\:text-lime-700:active{ color: var(--lime-700) !important; }
.text-lime-800,.hover\:text-lime-800:hover,.focus\:text-lime-800:focus,.active\:text-lime-800:active{ color: var(--lime-800) !important; }
.text-lime-900,.hover\:text-lime-900:hover,.focus\:text-lime-900:focus,.active\:text-lime-900:active{ color: var(--lime-900) !important; }
.bg-lime-50,.hover\:bg-lime-50:hover,.focus\:bg-lime-50:focus,.active\:bg-lime-50:active{ background-color: var(--lime-50) !important; }
.bg-lime-100,.hover\:bg-lime-100:hover,.focus\:bg-lime-100:focus,.active\:bg-lime-100:active{ background-color: var(--lime-100) !important; }
.bg-lime-200,.hover\:bg-lime-200:hover,.focus\:bg-lime-200:focus,.active\:bg-lime-200:active{ background-color: var(--lime-200) !important; }
.bg-lime-300,.hover\:bg-lime-300:hover,.focus\:bg-lime-300:focus,.active\:bg-lime-300:active{ background-color: var(--lime-300) !important; }
.bg-lime-400,.hover\:bg-lime-400:hover,.focus\:bg-lime-400:focus,.active\:bg-lime-400:active{ background-color: var(--lime-400) !important; }
.bg-lime-500,.hover\:bg-lime-500:hover,.focus\:bg-lime-500:focus,.active\:bg-lime-500:active{ background-color: var(--lime-500) !important; }
.bg-lime-600,.hover\:bg-lime-600:hover,.focus\:bg-lime-600:focus,.active\:bg-lime-600:active{ background-color: var(--lime-600) !important; }
.bg-lime-700,.hover\:bg-lime-700:hover,.focus\:bg-lime-700:focus,.active\:bg-lime-700:active{ background-color: var(--lime-700) !important; }
.bg-lime-800,.hover\:bg-lime-800:hover,.focus\:bg-lime-800:focus,.active\:bg-lime-800:active{ background-color: var(--lime-800) !important; }
.bg-lime-900,.hover\:bg-lime-900:hover,.focus\:bg-lime-900:focus,.active\:bg-lime-900:active{ background-color: var(--lime-900) !important; }
.border-lime-50,.hover\:border-lime-50:hover,.focus\:border-lime-50:focus,.active\:border-lime-50:active{ border-color: var(--lime-50) !important; }
.border-lime-100,.hover\:border-lime-100:hover,.focus\:border-lime-100:focus,.active\:border-lime-100:active{ border-color: var(--lime-100) !important; }
.border-lime-200,.hover\:border-lime-200:hover,.focus\:border-lime-200:focus,.active\:border-lime-200:active{ border-color: var(--lime-200) !important; }
.border-lime-300,.hover\:border-lime-300:hover,.focus\:border-lime-300:focus,.active\:border-lime-300:active{ border-color: var(--lime-300) !important; }
.border-lime-400,.hover\:border-lime-400:hover,.focus\:border-lime-400:focus,.active\:border-lime-400:active{ border-color: var(--lime-400) !important; }
.border-lime-500,.hover\:border-lime-500:hover,.focus\:border-lime-500:focus,.active\:border-lime-500:active{ border-color: var(--lime-500) !important; }
.border-lime-600,.hover\:border-lime-600:hover,.focus\:border-lime-600:focus,.active\:border-lime-600:active{ border-color: var(--lime-600) !important; }
.border-lime-700,.hover\:border-lime-700:hover,.focus\:border-lime-700:focus,.active\:border-lime-700:active{ border-color: var(--lime-700) !important; }
.border-lime-800,.hover\:border-lime-800:hover,.focus\:border-lime-800:focus,.active\:border-lime-800:active{ border-color: var(--lime-800) !important; }
.border-lime-900,.hover\:border-lime-900:hover,.focus\:border-lime-900:focus,.active\:border-lime-900:active{ border-color: var(--lime-900) !important; }


body .s-help {
    background: #9c27b0;
    color: #fff;
}

body .s-secondary {
    background: #607d8b;
    color: #fff;
}

body .s-success {
    background: #689f38;
    color: #fff;
}

body .s-info {
    background: #0288d1;
    color: #fff;
}

body .s-warning, body .s-warn {
    background: #fbc02d;
    color: #212529;
}

body .s-danger {
    background: #d32f2f;
    color: #fff;
}



body .pi.s-help {
    color: #9c27b0;
    background: none;
}

body .pi.s-secondary {
    color: #607d8b;
    background: none;
}

body .pi.s-success {
    color: #689f38;
    background: none;
}

body .pi.s-info {
    color: #0288d1;
    background: none;
}

body .pi.s-warning, body .pi.s-warn {
    color: #fbc02d;
    background: none;
}

body .pi.s-danger {
    color: #d32f2f;
    background: none;
}


body .s-small.ui-button.ui-button-icon-only {
	width: 1.5rem;
	height: 1.5rem;
}

body .s-small.ui-button.ui-button-icon-only .ui-button-text {
    padding: 0;
}

body .s-small.ui-button.ui-button-text-icon-left .ui-button-text {
    height: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
}



.top-25 {
	top: 25% !important;
}
.right-25 {
	right: 25% !important;
}
.bottom-25 {
	bottom: 25% !important;
}
.left-25 {
	left: 25% !important;
}

.top-75 {
	top: 75% !important;
}
.right-75 {
	right: 75% !important;
}
.bottom-75 {
	bottom: 75% !important;
}
.left-75 {
	left: 75% !important;
}


@media screen and (min-width: 576px) {
    .sm\:white-space-normal {
        white-space: normal !important
    }

    .sm\:white-space-nowrap {
        white-space: nowrap !important
    }
}

@media screen and (min-width: 768px) {
    .md\:white-space-normal {
        white-space: normal !important
    }

    .md\:white-space-nowrap {
        white-space: nowrap !important
    }
}

@media screen and (min-width: 992px) {
    .lg\:white-space-normal {
        white-space: normal !important
    }

    .lg\:white-space-nowrap {
        white-space: nowrap !important
    }
}

@media screen and (min-width: 1200px) {
    .xl\:white-space-normal {
        white-space: normal !important
    }

    .xl\:white-space-nowrap {
        white-space: nowrap !important
    }
}


.s-label {
	display: inline-block;
	padding: 0.5rem;
	white-space: nowrap;
	border: 1px solid transparent;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

table.s-table-auto, .s-table-auto.ui-datatable table, .ui-datatable table.s-table-auto, .s-table-auto .ui-selectonemenu-table {
	table-layout: auto;
}

.s-table-auto td, .s-table-auto th {
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.s-table-auto th {
	vertical-align: bottom;
}

.s-table-auto .s-col-commands {
	width: 3rem;
	text-align: center;
}

.s-table-auto thead .ui-column-filter, .s-table-auto thead .ui-inputfield {
    width: 100% !important;
    min-width: 130px; /* Regola questo valore in base a quanto spazio serve di base */
    box-sizing: border-box;
    text-align: center;
}

.s-table-auto thead .ui-column-title {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


body .s-datatable-filter-active {
    border-color: var(--primary-color);
    background-color: #f1f8ff;
}



.s-noborder, .s-noborder td, .s-noborder th {
    border: 0 !important;
}


.s-cc-field2 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.s-cc-field2 .s-cc-field2-label {
	font-weight: bold;
	padding: 8px 0;
}

.s-cc-field2 .s-cc-field2-value {
	padding: 0 4px;
	/* line-height: 2.45em; */
}

.s-cc-field2 .s-cc-field2-value .s-cc-field2-value-content {
	/* display: inline-block;
	width: 100%; */
	vertical-align: middle;
}

.s-cc-field2 .s-cc-field2-value .s-cc-field2-value-content>label {
	display: block;
	padding: 0.5rem 0.5rem;
	border: 1px solid transparent;
}




table.s-valuetable>tbody>tr>td {
	padding: 0.25rem;
	text-align: right;
}

table.s-valuetable>tbody>tr:nth-child(1)>td, table.s-valuetable>tbody>tr>td:nth-child(1)  {
	background-color: var(--gray-300);
	font-weight: bold;
	text-align: center;
}





/* 1. IL CONTENITORE GALLEGGIANTE
   Serve solo a posizionare il tutto sopra gli altri elementi.
*/
.s-floating-message {
    position: absolute;
    z-index: 9998; /* Abbastanza alto per stare sopra input e dialog */
    white-space: nowrap; /* Impedisce che il messaggio vada a capo su più righe */
    display: flex; /* Allinea freccia e messaggio */
    align-items: center; /* Centra verticalmente la freccia rispetto al box */
}

/* 2. IL MESSAGGIO INTERNO
   È un p:message standard, ma dobbiamo resettare i margini esterni 
   e aggiungere l'ombra perché ora sta "volando".
*/
.s-floating-message .ui-message {
    /* Aggiungiamo l'ombra per dare profondità (Material style shadow) */
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

/* 3. LA FRECCIA (Base) */
.s-floating-message .shape-msg-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 9999; /* Deve stare sopra l'ombra del box */
}

/* --- POSIZIONAMENTO FRECCIA --- */

/* Caso A: Messaggio a DESTRA dell'input -> Freccia a SINISTRA */
.s-floating-message.pos-right-side .shape-msg-arrow {
    left: -8px; /* Esce dal box */
    border-width: 8px 8px 8px 0;
    border-color: transparent;
    /* Dobbiamo colorare il bordo destro per fondersi col messaggio */
    border-right-color: inherit; 
}
/* Collega la freccia al box messaggio per ereditarne il colore */
.s-floating-message.pos-right-side .ui-message {
    margin-left: 0; 
}

/* Caso B: Messaggio a SINISTRA dell'input -> Freccia a DESTRA */
.s-floating-message.pos-left-side .shape-msg-arrow {
    right: -8px; /* Esce dal box */
    border-width: 8px 0 8px 8px;
    border-color: transparent;
    border-left-color: inherit;
}

/* --- COLORI FRECCIA (Theme Matching) ---
   Qui sta il trucco: applichiamo il colore del tema alla freccia.
   Sostituisci i codici HEX con quelli del tuo tema se diversi.
   Questi sono i default comuni per i temi 'light'.
*/

/* ERROR */
.s-floating-message:has(.ui-message-error) .shape-msg-arrow {
    border-right-color: #ef5350; /* Per pos-right-side */
    border-left-color:  #ef5350; /* Per pos-left-side */
}

/* FATAL (Spesso uguale a Error) */
.s-floating-message:has(.ui-message-fatal) .shape-msg-arrow {
    border-right-color: #ef5350; 
    border-left-color:  #ef5350;
}

/* WARN */
.s-floating-message:has(.ui-message-warn) .shape-msg-arrow {
    border-right-color: #ffc107; /* Giallo chiaro tipico */
    border-left-color:  #ffc107;
}

/* INFO */
.s-floating-message:has(.ui-message-info) .shape-msg-arrow {
    border-right-color: #03a9f4; /* Azzurro chiaro tipico */
    border-left-color:  #03a9f4;
}











/* Container principale */
.s-rangespinner-container {
    display: block;
    width: 100%;
}

/* Wrapper visivo */
.s-rangespinner-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Campi di input testuali interni */
.s-rangespinner-field {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none !important;
    background: transparent !important;
    text-align: center;
    outline: none !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    -moz-appearance: textfield;
}

.s-rangespinner-field::-webkit-outer-spin-button, 
.s-rangespinner-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Contenitore e icone delle freccette */
.s-rangespinner-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #6c757d;
    padding: 0 4px;
    height: 100%;
    gap: 2px;
}

.s-rangespinner-controls .pi {
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px;
    transition: color 0.2s;
}

.s-rangespinner-controls .pi:hover {
    color: #007ad9;
}



.s-drag-handle {
    cursor: grab;
    
    /* Evita la fastidiosa selezione del testo durante il drag */
    user-select: none; 
    -webkit-user-select: none;
    
    /* Disabilita i comportamenti nativi del touch (es. scroll/zoom) solo sull'icona */
    touch-action: none; 
}

.s-drag-handle:active {
    cursor: grabbing;
}




/* --- Stile unificato per i commandButton nei menu a tendina --- */
#profile-menu .ui-button.avalon-menu-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-color, #495057);
    width: 100%;
    border-radius: 0;
    transition: background-color 0.2s;
    /* Rimuoviamo il padding dal bottone per darlo al testo interno, 
       garantendo l'area cliccabile corretta */
    padding: 0; 
}

/* Gestione dell'allineamento e del padding interno */
#profile-menu .ui-button.avalon-menu-btn .ui-button-text {
    text-align: left;
    padding: 0.75rem 2.5rem;
    display: block;
    width: 100%;
}

/* Assicuriamo che l'icona erediti il colore esatto del testo */
#profile-menu .ui-button.avalon-menu-btn .ui-icon {
    color: inherit;
    left: 1rem;
}

/* Effetto Hover (al passaggio del mouse) */
#profile-menu .ui-button.avalon-menu-btn:hover,
#profile-menu .ui-button.avalon-menu-btn:focus {
    background-color: var(--surface-hover, #f8f9fa);
    color: var(--text-color, #495057);
    outline: none; /* Rimuove il ring di focus per un look più pulito */
}