L/* 1. Blocca lo scroll nativo del browser */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Nasconde la barra principale */
}

/* 2. Il contenitore HTMX riempie lo schermo ma non deve scorrere */
#ui-page {
    height: 100%;
    overflow: hidden;
}

/* 3. La pagina effettiva (caricata via HTMX) gestisce lo scroll */
#ui-page-body {
    height: 100%;
    overflow-y: auto; /* La barra di scorrimento apparirà solo qui */
    -webkit-overflow-scrolling: touch; /* Rende lo scroll fluido su smartphone */
}


#ui-topbar {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
}

#ui-sidebar {
    --margin-top: 56px;
    z-index: 1005;
    /*z-index: 9999;*/

}


#ui-sidebar-menu .nav-link { min-height: auto;}

#ui-page-body .container, #ui-page-body .container-lg, #ui-page-body .container-md, #ui-page-body .container-sm, #ui-page-body .container-xl, #ui-page-body .container-xxl {
    min-width: 960px !important;
    max-width: 1140px !important;
}

#ui-modal-feedback {
    z-index: 3000;
    top: 0rem;
}
#ui-modal-feedback .alert {
    width: 20rem;
    margin: 0 auto;
}

/*#toast-container.toast-top-right {*/
/*    top: 70px !important;*/
/*}*/

/*#toast-container.toast-top-center {*/

/*    top: 2.5rem !important;*/
/*}*/

/*#toast-container .toast {*/
/*    width: 25rem !important;*/
/*}*/

.tooltip .tooltip-inner:empty {
    display: none !important;
}

.ts-control {
    padding: .51rem .75rem;
}


.alert-heading {font-weight: 600 !important;}

.btn .ti, .avatar .ti  {
    font-size: 1.25rem; /* Aumenta la dimensione base rispetto all'SVG */
    line-height: 1rem;
    display: inline-block;

    stroke-width: 2; /* Nota: questo funziona solo su SVG, non su font! */
    vertical-align: middle;

    -webkit-font-smoothing: antialiased; /* Rende i tratti più definiti */

}

.ti.fs-1 { font-size: 6rem !important; }    /* Da 7.5rem -> 6rem (96px) */
.ti.fs-2 { font-size: 5rem !important; }    /* Da 6.25rem -> 5rem (80px) */
.ti.fs-3 { font-size: 4rem !important; }    /* Da 5rem -> 4rem (64px) */
.ti.fs-4 { font-size: 3rem !important; }    /* Da 3.75rem -> 3rem (48px) */
.ti.fs-5 { font-size: 2rem !important; }    /* Da 2.5rem -> 2rem (32px) */
.ti.fs-6 { font-size: 1rem !important; }    /* Da 1.25rem -> 1rem (16px - Extra Small) */


/* FIX */
.pt-lg-3 {
    padding-top: 1rem !important;
}

/* Datagrid semplice - Flexbox */
.datagrid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    box-sizing: border-box;
}

.accordion-header {
    font-size: 1rem;
}

.datagrid .card-title {
    width: 100%;
    margin: 0 0;
}

.datagrid hr {
    width: 100%;
    margin: 0.5rem 0;
}

/* elemento standard: comportamento naturale (3 colonne di partenza) */
.datagrid-item {
    box-sizing: border-box;
    flex: 0 1 calc(33% - 1rem); /* 3 colonne di default */
    min-width: 194px;
    /* evita che diventino troppo stretti
       /*min-width: 148px;*/
}

/* metà spazio (50%) */
.datagrid-item-half {
    flex-basis: calc(50% - 1rem);
}

.datagrid-item-dual {
    flex-basis: calc(66% - 1rem);
}

/* pieno spazio (100%) */
.datagrid-item-full {
    flex-basis: 100%;
}

.datagrid-content {
    overflow-wrap: break-word;
    word-break: break-word;
}



.flatpickr-calendar {
    font-size: 12px !important; /* Di default è 14px */
    width: auto !important; /* Riadatta la larghezza automaticamente */
}

/* 2. Riduce l'altezza e il font delle singole caselle giorno */
.flatpickr-day {
    height: 32px !important;
    line-height: 32px !important;
    max-width: 32px !important;
}

.flatpickr-wrapper {
    width: 100%;
}


form[data-ui-validate] {
    position: relative;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    /* Mantiene lo sfondo dinamico del tema di Tabler */
    -webkit-box-shadow: 0 0 0 1000px var(--tblr-bg-forms, var(--tblr-body-bg)) inset !important;

    /* Mantiene il colore del testo dinamico del tema di Tabler */
    -webkit-text-fill-color: var(--tblr-body-color) !important;

    /* Previene il flashing del colore di default di Chrome */
    transition: background-color 5000000s ease-in-out 0s;
}


.btn.btn-action:disabled, .btn.btn-action.disabled {
    border: none !important;
}

.card-body > label#description-error {
    padding: 0 .5rem .275rem;
}

.card-actions {
    margin: -.5rem 0 -.5rem auto;
}

.card-link-pop .card-title {
    font-size: 15px;
}

/* Sovrascrivi il focus sulle classi form di Tabler */
.form-select:focus,
.form-control:focus {
    border-color: var(--tblr-border-color) !important; /* Mantiene il bordo normale di Tabler */
    box-shadow: none !important; /* Rimuove l'alone azzurro (glow) */
    outline: 0 !important;
}

.input-icon-addon { height: auto; }


.table-edit th {
    font-size: 10px !important;
    white-space: normal !important;
    text-transform: lowercase !important;
}

.table-edit .form-control {
    padding: 0 5px;
}


/* HTMX  */
a[data-hx-get] {
    cursor: pointer;
    /*color: color-mix(in srgb, transparent, var(--tblr-link-color) var(--tblr-link-opacity, 100%));*/

}

.ui-hx-loading-pulse > * {
    animation: ui-hx-loading-pulse 0.6s ease-in-out infinite;
    will-change: opacity;
}

@keyframes ui-hx-loading-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

.ui-loading-spinner {
    width: 3rem;
    height: 3rem;
    border-width: .35em;
}


.ui-validate-currency {

}

#ui-feedback {
    position: fixed;
    top: 1rem; /* Oppure top: 0 se lo vuoi completamente attaccato al bordo superiore */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1065;
    width: 25rem !important;
    /*top:1rem;*/
    /*right: 0;*/
    /*left: 0;*/
    /*position: absolute;*/
    /*z-index: 1065; !* ensure it's above other elements *!*/
}

.modal-open #ui-feedback {
    /*top:5.3rem !important;*/
}

.modal-open #ui-feedback .alert {
    /*border-top-left-radius: 0 !important;*/
    /*border-top-right-radius: 0 !important;*/
}


#ui-feedback .alert {
    width: 25rem !important;
    margin: 0 auto;
}

#ui-modal-action .alert {}



/* MODAL */
#ui-modal {
    z-index: 1060;
}

#ui-modal.modal {
    --tblr-modal-footer-bg: #fff !important;
}

/* Applica questo stile quando la modale è attiva */
/*#ui-modal.modal-blur.show {*/
/*    backdrop-filter: blur(7px) brightness(0.9); !* Sfoca e scurisce contemporaneamente *!*/
/*    -webkit-backdrop-filter: blur(7px) brightness(0.9);*/
/*}*/

/*#ui-modal .modal-dialog {*/
/*    margin-top: 84px;*/
/*}*/

#ui-modal .modal-dialog {
    position: relative;
    z-index: 1061;
}

#ui-modal .modal-action {
    position: absolute;
    top: 13px;
    right: 10px;
    z-index: 1062;
    pointer-events: auto;
}

#ui-modal-subheader {
    /*padding: calc(var(--tblr-modal-padding) - var(--tblr-modal-footer-gap) * .5);*/
    /*padding-bottom: 0;*/
    border-bottom: var(--tblr-modal-header-border-width) solid var(--tblr-modal-header-border-color);
}

#ui-modal .modal-body {
    background-color: var(--tblr-body-bg);
    padding: 1rem;
    overflow-x: hidden;
}

#ui-modal .modal-body .card .row {
    /*row-gap: 1.5rem !important;*/
    row-gap: 1rem !important;
}

#ui-modal .modal-body .card {
    margin-bottom: 1rem;
}

#ui-modal .modal-body .card:last-child {
    margin-bottom: 0;
}




#ui-modal .modal-content {
    position: relative;
    /*min-height: 350px; !* ensure some height for the overlay to cover *!*/
}

/* Modal header — titolo centrato tra i bottoni laterali */
#ui-modal .modal-header {
    position: relative;
    padding: 0 3rem 0 0.5rem;
}

#ui-modal .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
}

#ui-modal .modal-header .modal-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: calc(100% - 120px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    pointer-events: none;
}

#ui-modal #ui-modal-back-btn-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-width: 30ch;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    text-align: left;
}

.ui-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    pointer-events: auto;
    background: rgba(255, 255, 255, 1);
}

.ui-htmx-indicator {
    display: none;
}

.ui-htmx-indicator.htmx-request {
    display: flex;
}

.ui-loading-indicator {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    opacity: 0;

    justify-content: center;
    padding: 2rem;
}

.ui-loading-indicator.htmx-request {
    display: flex;
    opacity: .9;
    background-color: white;
}


@keyframes shake {
    0% {
        transform: rotate(0);
    }
    10% {
        transform: rotate(25deg);
    }
    20% {
        transform: rotate(-20deg);
    }
    30% {
        transform: rotate(20deg);
    }
    40% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(12deg);
    }
    60% {
        transform: rotate(-10deg);
    }
    70% {
        transform: rotate(8deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    90% {
        transform: rotate(2deg);
    }
    100% {
        transform: rotate(0);
    }
}

/* Classe che applica l'animazione all'icona (durata aumentata a 1.5 secondi) */
.shake-active {
    animation: shake 1.5s ease-in-out;
    display: inline-block; /* Necessario per permettere la rotazione */
    transform-origin: top center;
}

/* Scroll to Top Button Styles */
#ui-scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #206bc4;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

#ui-scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

#ui-scroll-top:hover {
    background: #1a569d;
    transform: translateY(-3px);

}

/* ==========================================================================
   1. LAYOUT PRINCIPALE
   ========================================================================== */

#ui-archive {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Contenitore lista: deve essere position: relative per contenere l'overlay */
#ui-archive #ui-archive-list-container {
    position: relative !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#ui-archive #ui-archive-list {
    min-height: 100%;
}

/*#ui-archive .card-body.overflow-y-auto { scrollbar-gutter: stable !important; }*/

#ui-archive .card-header {
    background-color: var(--tblr-card-cap-bg);
}


/* ==========================================================================
   2. OVERLAY ISOLATO SUL CONTAINER LISTA
   ========================================================================== */

/* L'overlay è confinato al 100% dell'altezza del suo padre (#ui-archive-list-container) */
#ui-archive #ui-archive-list-loading {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: rgba(255, 255, 255, 1) !important;

}

/* Mostra l'overlay solo quando il container della lista o il form cercano tramite HTMX */
#ui-archive #ui-archive-list-container.htmx-request #ui-archive-list-loading,
#ui-archive #ui-archive-form.htmx-request ~ #ui-archive-list-container #ui-archive-list-loading {
    display: flex !important;
    justify-content: center;
    align-items: center;
}


/* ==========================================================================
   3. STILI LIST GROUP & ELEMENTI
   ========================================================================== */

#ui-archive #ui-archive-list .list-group-item {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--tblr-border-color, #e6e8e9);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

#ui-archive #ui-archive-list .list-group-item:last-child {
    border-bottom: 0;
}

#ui-archive #ui-archive-list .list-group-item-action:hover {
    background-color: var(--tblr-bg-surface-secondary, #f8fafc);
}

.min-w-0 {
    min-width: 0 !important;
}


#attachment-dropzone {
    min-height: 60px !important;
    padding: 10px !important;
}
#attachment-dropzone .dz-message {
    margin: 5px 0 !important;
}
#attachment-list-wrapper {
    max-height: 150px;
    overflow-y: auto;
}

/* ==========================================================================
   4. STATI DINAMICI (HTMX/PROCESS)
   ========================================================================== */

#ui-archive .ui-archive-list-item-changed {
    background-color: rgba(var(--tblr-info-rgb, 245, 159, 0), 0.08) !important;
}

#ui-archive .ui-archive-list-item-busy {
    opacity: 0.75;
    pointer-events: none;
    background-color: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.04) !important;
}

#ui-archive .ui-archive-list-item-deleted {
    opacity: 0.50;
}


#ui-archive .ui-archive-list-item-error {
    background-color: rgba(var(--tblr-danger-rgb, 214, 57, 57), 0.06) !important;
}


/* ==========================================================================
   5. SPINNER LOCALI (INPUT E FOOTER)
   ========================================================================== */

/* Search input spinner */
#ui-archive #ui-archive-loading .icon-search { display: inline-block; }
#ui-archive #ui-archive-loading .icon-spinner { display: none; }
#ui-archive #ui-archive-loading.htmx-request .icon-search { display: none; }
#ui-archive #ui-archive-loading.htmx-request .icon-spinner { display: inline-block; }

/* Footer count spinner */
#ui-archive #ui-archive-count-loading .count-label { display: inline-block; }
#ui-archive #ui-archive-count-loading .count-spinner { display: none; }
#ui-archive #ui-archive-count-loading.htmx-request .count-label { display: none; }
#ui-archive #ui-archive-count-loading.htmx-request .count-spinner { display: inline-block; }

.badges-list-wrap {
    margin-left: -.5rem;
}

.badges-list-wrap .badge {
    white-space: wrap;
    text-align: left;
    font-weight: 500;
}

.form-select-sm {
    padding-top: .2rem;
    padding-bottom: .2rem;
}

.form-select {
    padding-right: 2.5rem;
}

.ui-archive-filter-dropdown .dropdown-menu {
    max-height: 66vh;
    overflow-y: scroll;
}

.autoComplete_wrapper {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

.autoComplete_wrapper > input {
    width: 100% !important;
    font-size: 0.875rem !important;
    color: var(--tblr-body-color, #232e3c) !important;
    border-radius: var(--tblr-border-radius, 4px) !important;
    border: 1px solid var(--tblr-border-color, #dadde1) !important;
    background-color: var(--tblr-input-bg, #fff) !important;
    outline: 0 !important;
    padding: 0.5625rem 0.75rem !important; /* Standard Tabler size */
}

/* --- VARIANTE PICCOLA (.form-control-sm) --- */
.autoComplete_wrapper > input.form-control-sm {
    padding: 0.275rem 0.5rem !important;
    font-size: 0.75rem !important;
    border-radius: var(--tblr-border-radius-sm, 3px) !important;
}

/* Riduzione opzionale del font e padding anche per le voci di menu nel caso small */
.autoComplete_wrapper > input.form-control-sm + ul > li,
.autoComplete_wrapper:has(input.form-control-sm) > ul > li {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important;
}

.autoComplete_wrapper > input::placeholder {
    color: var(--tblr-input-placeholder-color, #929dab) !important;
    transition: all .3s ease;
}

.autoComplete_wrapper > ul {
    position: absolute !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0.25rem 0 !important;
    margin: 2px 0 0 0 !important;
    border-radius: var(--tblr-border-radius, 4px) !important;
    background-color: var(--tblr-body-bg, #fff) !important;
    border: 1px solid var(--tblr-border-color, #dadde1) !important;
    box-shadow: var(--tblr-dropdown-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)) !important;
    z-index: 1056 !important;
    outline: 0 !important;
}

.autoComplete_wrapper > ul > li {
    padding: 0.5rem 1rem !important;
    list-style: none !important;
    text-align: left !important;
    font-size: 0.875rem !important;
    color: var(--tblr-body-color, #232e3c) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: none !important;
}

.autoComplete_wrapper > ul > li::selection {
    color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
}

.autoComplete_wrapper > ul > li:hover {
    cursor: pointer !important;
    background-color: var(--tblr-primary-lt, rgba(32, 107, 196, 0.1)) !important;
    color: var(--tblr-primary, #206bc4) !important;
}

/*.autoComplete_wrapper > ul > li b {*/
/*    background-color: transparent !important;*/
/*    color: var(--tblr-primary, #206bc4) !important;*/
/*    font-weight: 600 !important;*/
/*    padding: 0 !important;*/
/*    display: inline !important;*/
/*}*/

/*.autoComplete_wrapper > ul > li b::selection {*/
/*    color: rgba(0,0,0,0);*/
/*    background-color: rgba(0,0,0,0);*/
/*    padding: 0 !important;*/
/*}*/

.autoComplete_wrapper > ul > li[aria-selected=true] {
    background-color: var(--tblr-primary-lt, rgba(32, 107, 196, 0.1)) !important;
    color: var(--tblr-primary, #206bc4) !important;
}



.alert-action-validate {
    border-color: var(--tblr-cyan-darken) !important;
    background-color: var(--tblr-cyan) !important;
}
.alert-action-confirm {
    border-color: var(--tblr-green-darken) !important;
    background-color: var(--tblr-green) !important;
}
.alert-action-complete {
    border-color: var(--tblr-teal-darken) !important;
    background-color: var(--tblr-teal) !important;
}
.alert-action-delete {
    border-color: var(--tblr-red-darken) !important;
    background-color: var(--tblr-red) !important;
}
.alert-action-reassign {
    border-color: var(--tblr-purple-darken) !important;
    background-color: var(--tblr-purple) !important;
}
.alert-action-refund {
    border-color: var(--tblr-pink-darken) !important;
    background-color: var(--tblr-pink) !important;
}
.alert-action-review {
    border-color: var(--tblr-orange-darken) !important;
    background-color: var(--tblr-orange) !important;
}


/* STATUS */
[class*="badge-status-"] {
    text-transform: uppercase;
}


.badge-status-paid {
    color: var(--tblr-green);
}

.badge-status-paid:not(.badge-outline) {
    background-color: var(--tblr-green-lt) !important;
}

.badge-status-paid.badge-outline {
    background-color: inherit !important;
}

.badge-status-unpaid {
    color: var(--tblr-cyan);
}

.badge-status-unpaid:not(.badge-outline) {
    background-color: var(--tblr-cyan-lt) !important;
}

.badge-status-unpaid.badge-outline {
    background-color: inherit !important;
}

.badge-status-draft {
    color: var(--tblr-yellow);
}

.badge-status-draft:not(.badge-outline) {
    background-color: var(--tblr-yellow-lt) !important;
}

.badge-status-draft.badge-outline {
    background-color: inherit !important;
}


.badge-status-cancel {
    color: var(--tblr-orange);
}

.badge-status-cancel:not(.badge-outline) {
    background-color: var(--tblr-orange-lt) !important;
}

.badge-status-cancel.badge-outline {
    background-color: inherit !important;
}


.badge-status-active {
    color: var(--tblr-green);
}

.badge-status-active:not(.badge-outline) {
    background-color: var(--tblr-green-lt) !important;
}

.badge-status-active.badge-outline {
    background-color: inherit !important;
}

.badge-status-inactive{
    color: var(--tblr-yellow);
}

.badge-status-inactive:not(.badge-outline) {
    background-color: var(--tblr-yellow-lt) !important;
}

.badge-status-inactive.badge-outline {
    background-color: inherit !important;
}

.badge-status-pending {
    color: var(--tblr-yellow)
}

.badge-status-pending:not(.badge-outline) {
    background-color: var(--tblr-yellow-lt) !important;
}

.badge-status-pending.badge-outline {
    background-color: inherit !important;
}

.badge-status-disabled {
    color: var(--tblr-red)
}

.badge-status-disabled:not(.badge-outline) {
    background-color: var(--tblr-red-lt) !important;
}

.badge-status-disabled.badge-outline {
    background-color: inherit !important;
}


/* STATUS BADGES */
/* STATUS BADGES */
[class*="badge-outcome-"],
[class*="badge-status-"] {
    text-transform: uppercase;
}

/* 1. CREATED / DRAFT (Giallo / Yellow) */
.badge-outcome-created,
.badge-status-draft {
    color: var(--tblr-yellow);
}
.badge-outcome-created:not(.badge-outline),
.badge-status-draft:not(.badge-outline) {
    background-color: var(--tblr-yellow-lt) !important;
}
.badge-outcome-created.badge-outline,
.badge-status-draft.badge-outline {
    background-color: inherit !important;
}

.badge-outcome-validated,
.badge-status-unpaid {
    color: var(--tblr-cyan);
}
.badge-outcome-validated:not(.badge-outline),
.badge-status-unpaid:not(.badge-outline) {
    background-color: var(--tblr-cyan-lt) !important;
}
.badge-outcome-validated.badge-outline,
.badge-status-unpaid.badge-outline {
    background-color: inherit !important;
}

.badge-outcome-opened {
    color: var(--tblr-indigo);
}
.badge-outcome-opened:not(.badge-outline) {
    background-color: var(--tblr-indigo-lt) !important;
}
.badge-outcome-opened.badge-outline {
    background-color: inherit !important;
}


.badge-outcome-submitted {
    color: var(--tblr-orange);
}
.badge-outcome-submitted:not(.badge-outline) {
    background-color: var(--tblr-orange-lt) !important;
}
.badge-outcome-submitted.badge-outline {
    background-color: inherit !important;
}

.badge-outcome-progressed {
    color: var(--tblr-purple);
}
.badge-outcome-progressed:not(.badge-outline) {
    background-color: var(--tblr-purple-lt) !important;
}
.badge-outcome-progressed.badge-outline {
    background-color: inherit !important;
}

.badge-outcome-delivered {
    color: var(--tblr-lime);
}
.badge-outcome-delivered:not(.badge-outline) {
    background-color: var(--tblr-lime-lt) !important;
}
.badge-outcome-delivered.badge-outline {
    background-color: inherit !important;
}

.badge-outcome-completed,
.badge-status-paid {
    color: var(--tblr-green);
}
.badge-outcome-completed:not(.badge-outline),
.badge-status-paid:not(.badge-outline) {
    background-color: var(--tblr-green-lt) !important;
}
.badge-outcome-completed.badge-outline,
.badge-status-paid.badge-outline {
    background-color: inherit !important;
}

.badge-outcome-refunded {
    color: var(--tblr-pink);
}
.badge-outcome-refunded:not(.badge-outline) {
    background-color: var(--tblr-pink-lt) !important;
}
.badge-outcome-refunded.badge-outline {
    background-color: inherit !important;
}

.badge-outcome-deleted {
    color: var(--tblr-red);
}
.badge-outcome-deleted:not(.badge-outline) {
    background-color: var(--tblr-red-lt) !important;
}
.badge-outcome-deleted.badge-outline {
    background-color: inherit !important;
}

/* --- TICKET STATUS: DRAFT (Gray / Neutro - lavorazione iniziale) --- */
.badge-ticket-status-draft {
    color: var(--tblr-secondary) !important;
}

.badge-ticket-status-draft:not(.badge-outline) {
    background-color: var(--tblr-secondary-lt) !important;
}

.badge-ticket-status-draft.badge-outline {
    background-color: transparent !important;
    border-color: var(--tblr-secondary) !important;
}

/* --- TICKET STATUS: OPEN (Azure / Aperto) --- */
.badge-ticket-status-open {
    color: var(--tblr-azure) !important;
}

.badge-ticket-status-open:not(.badge-outline) {
    background-color: var(--tblr-azure-lt) !important;
}

.badge-ticket-status-open.badge-outline {
    background-color: transparent !important;
    border-color: var(--tblr-azure) !important;
}

/* --- TICKET STATUS: CLOSE (Success / Chiuso) --- */
.badge-ticket-status-close {
    color: var(--tblr-success) !important;
}

.badge-ticket-status-close:not(.badge-outline) {
    background-color: var(--tblr-success-lt) !important;
}

.badge-ticket-status-close.badge-outline {
    background-color: transparent !important;
    border-color: var(--tblr-success) !important;
}

/* --- TICKET STATUS: UNKNOWN (Fallback Neutro) --- */
.badge-ticket-status-unknown {
    color: var(--tblr-secondary) !important;
}

.badge-ticket-status-unknown:not(.badge-outline) {
    background-color: var(--tblr-secondary-lt) !important;
}

.badge-ticket-status-unknown.badge-outline {
    background-color: transparent !important;
    border-color: var(--tblr-secondary) !important;
}





/* --- PREPARE (Azzurro/Celeste) --- */
.badge-status-event-prepare {
    color: var(--tblr-azure);
}

.badge-status-event-prepare:not(.badge-outline) {
    background-color: var(--tblr-azure-lt) !important;
}

.badge-status-event-prepare.badge-outline {
    background-color: inherit !important;
}

/* --- PENDING (Giallo) --- */
.badge-status-event-pending {
    color: var(--tblr-yellow);
}

.badge-status-event-pending:not(.badge-outline) {
    background-color: var(--tblr-yellow-lt) !important;
}

.badge-status-event-pending.badge-outline {
    background-color: inherit !important;
}

/* --- PROCESSING (Blu) --- */
.badge-status-event-processing {
    color: var(--tblr-blue);
}

.badge-status-event-processing:not(.badge-outline) {
    background-color: var(--tblr-blue-lt) !important;
}

.badge-status-event-processing.badge-outline {
    background-color: inherit !important;
}

/* --- SUCCESS (Verde) --- */
.badge-status-event-success {
    color: var(--tblr-green);
}

.badge-status-event-success:not(.badge-outline) {
    background-color: var(--tblr-green-lt) !important;
}

.badge-status-event-success.badge-outline {
    background-color: inherit !important;
}

/* --- FAIL (Red) --- */
.badge-status-event-fail {
    color: var(--tblr-red);
}

.badge-status-event-fail:not(.badge-outline) {
    background-color: var(--tblr-red-lt) !important;
}

.badge-status-event-fail.badge-outline {
    background-color: inherit !important;
}


/* --- RUNNING (Red) --- */
.badge-status-event-running {
    color: var(--tblr-azure);
}

.badge-status-event-running:not(.badge-outline) {
    background-color: var(--tblr-azure-lt) !important;
}

.badge-status-event-running.badge-outline {
    background-color: inherit !important;
}


/* --- WARNING (Arancione) --- */
.badge-status-event-warning {
    color: var(--tblr-orange);
}

.badge-status-event-warning:not(.badge-outline) {
    background-color: var(--tblr-orange-lt) !important;
}

.badge-status-event-warning.badge-outline {
    background-color: inherit !important;
}

/* --- ERROR (Rosso) --- */
.badge-status-event-error {
    color: var(--tblr-red);
}

.badge-status-event-error:not(.badge-outline) {
    background-color: var(--tblr-red-lt) !important;
}

.badge-status-event-error.badge-outline {
    background-color: inherit !important;
}

/* --- TIMEOUT (Viola) --- */
.badge-status-event-timeout {
    color: var(--tblr-purple);
}

.badge-status-event-timeout:not(.badge-outline) {
    background-color: var(--tblr-purple-lt) !important;
}

.badge-status-event-timeout.badge-outline {
    background-color: inherit !important;
}

/* --- EXPIRED (Grigio Scuro/Muted) --- */
.badge-status-event-expired {
    color: var(--tblr-secondary);
}

.badge-status-event-expired:not(.badge-outline) {
    background-color: var(--tblr-secondary-lt) !important;
}

.badge-status-event-expired.badge-outline {
    background-color: inherit !important;
}

/* --- EXCEPTION (Rosa Intenso/Fucsia) --- */
.badge-status-event-exception {
    color: var(--tblr-pink);
}

.badge-status-event-exception:not(.badge-outline) {
    background-color: var(--tblr-pink-lt) !important;
}

.badge-status-event-exception.badge-outline {
    background-color: inherit !important;
}




/* Normal */
.badge-ticket-urgency-normal { color: var(--tblr-gray-500) !important; }
.badge-ticket-urgency-normal:not(.badge-outline) { background-color: var(--tblr-gray-100) !important; }

/* Middle */
.badge-ticket-urgency-middle { color: var(--tblr-gray-600) !important; }
.badge-ticket-urgency-middle:not(.badge-outline) { background-color: var(--tblr-gray-200) !important; }

/* High */
.badge-ticket-urgency-high { color: var(--tblr-gray-700) !important; }
.badge-ticket-urgency-high:not(.badge-outline) { background-color: var(--tblr-gray-300) !important; }




/* --- OUTCOME: CREATED (Gray / Neutro) --- */
.badge-ticket-outcome-created {
    color: var(--tblr-secondary);
}

.badge-ticket-outcome-created:not(.badge-outline) {
    background-color: var(--tblr-secondary-lt) !important;
}

.badge-ticket-outcome-created.badge-outline {
    background-color: inherit !important;
}

/* --- OUTCOME: SUBMITTED (Blue / Inviato) --- */
.badge-ticket-outcome-submitted {
    color: var(--tblr-blue);
}

.badge-ticket-outcome-submitted:not(.badge-outline) {
    background-color: var(--tblr-blue-lt) !important;
}

.badge-ticket-outcome-submitted.badge-outline {
    background-color: inherit !important;
}

/* --- OUTCOME: PROGRESSED (Cyan / In lavorazione) --- */
.badge-ticket-outcome-progressed {
    color: var(--tblr-cyan);
}

.badge-ticket-outcome-progressed:not(.badge-outline) {
    background-color: var(--tblr-cyan-lt) !important;
}

.badge-ticket-outcome-progressed.badge-outline {
    background-color: inherit !important;
}

/* --- OUTCOME: FORWARDED (Azure / Inoltrato) --- */
.badge-ticket-outcome-forwarded {
    color: var(--tblr-azure);
}

.badge-ticket-outcome-forwarded:not(.badge-outline) {
    background-color: var(--tblr-azure-lt) !important;
}

.badge-ticket-outcome-forwarded.badge-outline {
    background-color: inherit !important;
}

/* --- OUTCOME: COMPLETED (Green / Completato) --- */
.badge-ticket-outcome-completed {
    color: var(--tblr-green);
}

.badge-ticket-outcome-completed:not(.badge-outline) {
    background-color: var(--tblr-green-lt) !important;
}

.badge-ticket-outcome-completed.badge-outline {
    background-color: inherit !important;
}

/* --- OUTCOME: REJECTED (Red / Respinto) --- */
.badge-ticket-outcome-rejected {
    color: var(--tblr-red);
}

.badge-ticket-outcome-rejected:not(.badge-outline) {
    background-color: var(--tblr-red-lt) !important;
}

.badge-ticket-outcome-rejected.badge-outline {
    background-color: inherit !important;
}


/* --- TICKET STATUS: DRAFT (Gray / Neutro - lavorazione iniziale) --- */
.badge-ticket-status-draft {
    color: var(--tblr-secondary) !important;
}

.badge-ticket-status-draft:not(.badge-outline) {
    background-color: var(--tblr-secondary-lt) !important;
}

.badge-ticket-status-draft.badge-outline {
    background-color: transparent !important;
    border-color: var(--tblr-secondary) !important;
}

/* --- TICKET STATUS: OPEN (Azure / Aperto) --- */
.badge-ticket-status-open {
    color: var(--tblr-azure) !important;
}

.badge-ticket-status-open:not(.badge-outline) {
    background-color: var(--tblr-azure-lt) !important;
}

.badge-ticket-status-open.badge-outline {
    background-color: transparent !important;
    border-color: var(--tblr-azure) !important;
}

/* --- TICKET STATUS: CLOSE (Success / Chiuso) --- */
.badge-ticket-status-close {
    color: var(--tblr-success) !important;
}

.badge-ticket-status-close:not(.badge-outline) {
    background-color: var(--tblr-success-lt) !important;
}

.badge-ticket-status-close.badge-outline {
    background-color: transparent !important;
    border-color: var(--tblr-success) !important;
}

/* --- TICKET STATUS: UNKNOWN (Fallback Neutro) --- */
.badge-ticket-status-unknown {
    color: var(--tblr-secondary) !important;
}

.badge-ticket-status-unknown:not(.badge-outline) {
    background-color: var(--tblr-secondary-lt) !important;
}

.badge-ticket-status-unknown.badge-outline {
    background-color: transparent !important;
    border-color: var(--tblr-secondary) !important;
}




/* ==========================================================================
Dichiarazione locale Titillium Web (dai file in Downloads/Scaricati)
========================================================================== */

/* ExtraLight (200) */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-ExtraLight.ttf') format('truetype');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-ExtraLightItalic.ttf') format('truetype');
}

/* Light (300) */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-LightItalic.ttf') format('truetype');
}

/* Regular (400) */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-Italic.ttf') format('truetype');
}

/* SemiBold (600) */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-SemiBoldItalic.ttf') format('truetype');
}

/* Bold (700) */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-BoldItalic.ttf') format('truetype');
}

/* Black (900) */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/static/assets/font/titillium/TitilliumWeb-Black.ttf') format('truetype');
}


/* 2. Dici a Tabler di usare la tua regola locale */
:root {
    --tblr-font-sans-serif:   'Titillium Web', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    --tblr-secondary: var(--tblr-gray-700);

    /* 2. Ingrandiamo il font base di Tabler da 1rem (16px) a 1.075rem (~17.2px)
          Questo compensa la x-height più bassa di Titillium Web rispetto a Noto Sans */
    --tblr-font-size-base: 1.075rem;
    --tblr-card-bg: #f6f6f6 !important;
}


html {
    font-size: 107% !important;
}

html { scrollbar-gutter: auto !important; }


/*
   Applichiamo lo zoom a ui-wrapper che racchiude tutta l'interfaccia
*/
.ui-app-component {
    zoom: 1;
}

@media (min-width: 1441px) {
    .ui-app-component {
        zoom: 1.05;
    }
}

@media (min-width: 1920px) {
    .ui-app-component {
        zoom: 1.15;
    }
}

@media (min-width: 2560px) {
    .ui-app-component {
        zoom: 1.30;
    }
}

/* =========================================================
   SCALA PROPORZIONALE TOOLTIP E POPOVER
   ========================================================= */

/*@media (min-width: 1441px) {*/
/*    .tooltip, .popover {*/
/*        font-size: 1.10rem !important;*/
/*    }*/
/*}*/

@media (min-width: 1920px) {
    .tooltip, .popover {
        font-size: 1rem !important;
    }
}

@media (min-width: 2560px) {
    .tooltip, .popover {
        font-size: 1.20rem !important;
    }
}

:root,
[data-bs-theme="light"] {
    /* --- Brand & Semantici --- */
    --tblr-primary: #0076BF;
    --tblr-primary-rgb: 0, 118, 191;
    --tblr-primary-fg: #ffffff;
    --tblr-primary-light: #EBF5FC;
    --tblr-primary-light-color: #0076BF;

    --tblr-danger: #E52934;
    --tblr-danger-rgb: 229, 41, 52;
    --tblr-danger-fg: #ffffff;
    --tblr-danger-light: #FDEEEF;
    --tblr-danger-light-color: #E52934;

    --tblr-success: #109B5E;
    --tblr-success-rgb: 16, 155, 94;
    --tblr-success-fg: #ffffff;
    --tblr-success-light: #E7F7EF;
    --tblr-success-light-color: #109B5E;

    --tblr-warning: #EA9200;
    --tblr-warning-rgb: 234, 146, 0;
    --tblr-warning-fg: #ffffff;
    --tblr-warning-light: #FDF5E6;
    --tblr-warning-light-color: #EA9200;

    --tblr-info: #0096D6;
    --tblr-info-rgb: 0, 150, 214;
    --tblr-info-fg: #ffffff;
    --tblr-info-light: #E6F6FC;
    --tblr-info-light-color: #0096D6;

    /* --- Palette Colori Base --- */
    --tblr-blue: #0076BF;
    --tblr-red: #E52934;
    --tblr-green: #109B5E;
    --tblr-yellow: #EA9200;
    --tblr-azure: #0096D6;
    --tblr-purple: #7856BD;
    --tblr-teal: #009E9E;
    --tblr-orange: #EE6521;
    --tblr-indigo: #335899;
    --tblr-pink: #E24479;

    --tblr-gray-50:  #F5F7FA; /* Una via di mezzo perfetta tra #F8FAFC e #F1F5F9 */
    --tblr-gray-100: #ECEFF4;
    --tblr-gray-200: #DEE4ED;
    --tblr-gray-300: #C5CEDC;
    --tblr-gray-400: #8FA0B5;
    --tblr-gray-500: #5F7188;
    --tblr-gray-600: #425268;
    --tblr-gray-700: #2F3B4D;
    --tblr-gray-800: #1A2332;
    --tblr-gray-900: #0B111C;
    /*--tblr-gray-950: #050A10;*/

    /*!* --- Elementi UI Generali --- *!*/
    /*--tblr-body-bg: var(--tblr-gray-50);*/
    /*--tblr-body-color: var(--tblr-gray-800);*/
    /*--tblr-body-color-rgb: 30, 41, 59;*/

    /*--tblr-muted: var(--tblr-gray-500);*/
    /*--tblr-muted-rgb: 100, 116, 139;*/

    /*--tblr-border-color: var(--tblr-gray-200);*/
    /*--tblr-border-color-translucent: rgba(226, 232, 240, 0.7);*/

    /*--tblr-alert-color: var(--tblr-gray-400);*/

    /*!* --- Componenti (Card, Input, Surface) --- *!*/
    /*--tblr-card-bg: #FFFFFF;*/
    /*--tblr-card-border-color: var(--tblr-gray-200);*/

    /*--tblr-bg-surface: #FFFFFF;*/
    /*--tblr-bg-surface-secondary: var(--tblr-gray-100);*/

    /*--tblr-input-bg: #FFFFFF;*/
    /*--tblr-input-border-color: var(--tblr-gray-200);*/
    /*--tblr-input-color: var(--tblr-gray-800);*/
    /*--tblr-input-placeholder-color: var(--tblr-gray-400);*/

    /*!* --- Focus Rings & States --- *!*/
    /*--tblr-focus-ring-color: rgba(0, 118, 191, 0.25);*/
    /*--tblr-active-bg: rgba(0, 118, 191, 0.08);*/
    /*--tblr-hover-bg: rgba(0, 118, 191, 0.04);*/
}


#ui-modal .modal-body, #ui-archive .page-header, #ui-archive-list-loading {
    background-color: var(--tblr-body-bg);
}

.form-check-input{ background-color: var(--tblr-gray-100); }

.card{ border-color: var(--tblr-border-color); }
.ui-loading-page {background-color: var(--tblr-body-bg);}
.ui-loading-page-body {background-color: var(--tblr-body-bg);}
.ui-loading-form {background-color: var(--tblr-white);}
.ui-loading-modal {background-color: var(--tblr-white);}

[data-bs-navbar-theme="dark"] #ui-sidebar {
    background-color: var(--tblr-gray-900);
}



.flatpickr-days {
    width: 307.875px !important; /* Larghezza standard del contenitore 7x44px + gap */
}

.dayContainer {
    min-width: 307.875px !important;
    max-width: 307.875px !important;
    width: 307.875px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.flatpickr-day {
    max-width: 39px !important; /* Forzatura larghezza singolo giorno */
    height: 39px !important;
    line-height: 39px !important;
    box-sizing: border-box !important;
}