/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

.auth-one-bg .bg-overlay {
    background: #DDFFF5;
    opacity: 0.6;
}

.auth-one-bg {
    background-image: url(../images/bg_login.jpg);
    background-position: center;
    background-size: cover;
}

.btn-macsolution{
    background-color: #F2F5F6;
    border: solid 1px #cccccc;
    color:#000000;
    width: 224px;
    height: 200px;
}

/* immagine e testi (non elastici) */
.btn-macsolution img{
    height: 100px;
    width: auto;          /* mantiene il ratio */
    object-fit: contain;  /* evita tagli se il box è stretto */
    display: block;
    margin: 0 auto;       /* centra orizzontalmente */
}
.btn-macsolution h3 { font-size: 20px; margin:.5rem 0 0; color:#22458d!important; text-align:center; }
.btn-macsolution h5 { font-size: 15px; margin:.25rem 0 0; line-height:1.2; color:#04888596!important; text-align:center; }

.logo-lg img{
    height: 40px !important;
}

[data-sidebar="gradient-4"] .navbar-menu {
    background: linear-gradient(to right, #121212, #6691e7); /* personalizza qui */
    border-right: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

[data-sidebar="gradient-5"] .navbar-menu {
    background: linear-gradient(to right, rgba(102, 145, 231, 0.16), rgba(8, 104, 93, 0.33), rgb(102, 145, 231)); /* personalizza qui */
    border-right: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

[data-sidebar="gradient-5"][data-layout-mode="light"] #page-topbar {
    background-color: #6691e7;
}

[data-sidebar="gradient-5"][data-layout-mode="light"] .topbar-user {
    background-color: #6188d7;
}

[data-sidebar="gradient-5"][data-layout="horizontal"] .navbar-menu .navbar-nav .nav-link {
    color: var(--vz-topnav-item-color);
}

[data-layout-mode="dark"] .btn-light {
    background-color: #1a1d21;;
}

[data-layout-mode="dark"] .bg-primary {
    --vz-bg-opacity: 0;
}

[data-layout-mode="light"] #page-topbar {
    background-color: #f3f6f9;
}

[data-sidebar="gradient-4"][data-layout-mode="light"] #page-topbar {
    background-color: #6691e7;
}

[data-sidebar="gradient-4"][data-layout-mode="dark"] .navbar-menu{
    background: #23282c;
}

[data-sidebar="gradient-4"] .navbar-menu {
    background: var(--vz-vertical-menu-bg-gradient);
    border-right: 0px solid var(--vz-vertical-menu-border-gradient);
}

[data-layout-mode="dark"][data-sidebar="gradient-4"] {
    --vz-vertical-menu-bg-gradient: 'none';
}

[data-layout-mode="light"][data-sidebar="gradient-4"] .topbar-user {
    background-color: #6188d7;
}

/* Modalità chiara: visualizza logo-dark e nasconde logo-light */
.logo-light {
    display: none !important;
}

.logo-dark {
    display: inline-block !important;
}

/* Modalità scura: visualizza logo-light e nasconde logo-dark */
[data-layout-mode="dark"] .logo-light {
    display: inline-block !important;
}

[data-layout-mode="dark"] .logo-dark {
    display: none !important;
}

/*.textUppercase {*/
/*    text-transform: uppercase;*/
/*}*/

input[readonly]:not(.flatpickerInput) {
    background-color: #eff2f7;
}
input[readonly]:not(.flatpickerInput):focus,
input:read-only:not(.flatpickerInput):focus {
    background-color: #eff2f7;
}

.modal-header{
    background-color: #f3f4f9;
    height: 40px;
}
.modal-title{
    margin-top: -22px;
}

.btn-close-modal{
    margin-top: -30px !important;
}

/* Classe personalizzata per la modale extra-large */
.modal-xxl .modal-dialog {
    max-width: 90%; /* Imposta la larghezza della modale al 90% della larghezza dello schermo */
    width: 90%;
}

/* Aggiusta il contenuto della modale per un layout migliore */
.modal-xxl .modal-content {
    overflow-y: auto; /* Aggiunge lo scroll verticale se il contenuto supera l'altezza della finestra */
    max-height: 85vh; /* Imposta un'altezza massima in modo che la modale non occupi tutta l'altezza */
}

.btn-group-select{
    height: 37.5px;
    width: 42px;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 6px !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    width: unset !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 18px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 6px;
}

.select2-selection__clear{
    /*margin-right: 3px !important;*/
    color: #ced4da;
}

.input-group .select2-container{
    position: absolute;
    padding-left: 43px;
}

.input-group .select2-selection{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.select2-selection--multiple {
    min-height: 38px; /* come un normale input Bootstrap */
    padding: 0.25rem 0.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0 !important;
    margin: 0 !important;
}

.select2-selection__choice {
    background-color: #0d6efd;
    color: #fff;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.2rem;
    font-size: 0.75rem;
}

.input-group .choices{
    width: calc(100% - 100px);
}

.modal-xxl {
    max-width: 90%; /* Imposta la larghezza al 90% della finestra */
}

.btn-fix{
    min-width: 170px;
}

.modal-header .btn-close{
    margin-bottom: 8px;
}

.pac-container {
    z-index: 1056 !important; /* Valore maggiore di quello della modale */
}
/*.input-group .btn-select {*/
/*    width: 42px; !* Imposta una larghezza fissa per il pulsante *!*/
/*}*/

/* Stili per la modalità Light */
[data-layout-mode="light"] .select2-container--default .select2-dropdown {
    border-color: #ccd2d8;
    border-width: 1px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

[data-layout-mode="light"] .select2-container--default .select2-results__option {
    background-color: #fff;
    color: #333;
}

[data-layout-mode="light"] .select2-container--default .select2-results__option:hover {
    background-color: #6691e7 !important;
    color: #fff !important;
}

[data-layout-mode="light"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #eee;
    color: #333;
}

/* Stili per la modalità Dark */
[data-layout-mode="dark"] .select2-container--default .select2-dropdown {
    border-color: #444; /* Colore di bordo più scuro */
    border-width: 1px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7);
    background-color: #1a1d21; /* Sfondo scuro per la modalità dark */
}

[data-layout-mode="dark"] .select2-container--default .select2-results__option {
    background-color: #2b2f36; /* Sfondo scuro per le opzioni */
    color: #ddd; /* Colore del testo chiaro per contrasto */
}

[data-layout-mode="dark"] .select2-container--default .select2-results__option:hover {
    background-color: #556080 !important; /* Colore di sfondo in evidenziazione */
    color: #fff !important; /* Colore del testo in evidenziazione */
}

[data-layout-mode="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #3b4048; /* Sfondo per l'opzione selezionata */
    color: #fff; /* Colore del testo per l'opzione selezionata */
}

.filepond-container {
    position: relative;
    height: 100%;
}

.filepond--root {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
}

.filepond--item-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.filepond--drop-label {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stili per le liste in modalità Light */
[data-layout-mode="light"] #compagnie-available,
[data-layout-mode="light"] #compagnie-selected {
    background-color: #f0f8ff;          /* Sfondo azzurro chiaro */
    border: 2px dotted #6495ed;         /* Bordo a tratteggio per la lista disponibile */
    color: #333;                        /* Testo scuro per contrasto */
}

[data-layout-mode="light"] #compagnie-selected {
    background-color: #e6ffe6;          /* Sfondo verde chiaro */
    border: 2px dotted #32cd32;         /* Bordo verde */
}

/* Stili per le liste in modalità Dark */
[data-layout-mode="dark"] #compagnie-available,
[data-layout-mode="dark"] #compagnie-selected {
    background-color: #2b2f36;          /* Sfondo scuro */
    border: 2px dotted #444;            /* Bordo più scuro per lista disponibile */
    color: #ddd;                        /* Testo chiaro per contrasto */
}

[data-layout-mode="dark"] #compagnie-selected {
    background-color: #3b4048;          /* Sfondo leggermente più scuro per lista selezionata */
    border: 2px dotted #556080;         /* Bordo blu scuro */
}

/* Stili generali per le liste con altezza fissa e scorrimento */
.sortable-list {
    height: 250px;                      /* Altezza fissa */
    overflow-y: auto;                   /* Barra di scorrimento verticale */
    padding: 10px;                      /* Spazio interno */
    border-radius: 5px;                 /* Angoli arrotondati */
}

/* Colore di sfondo durante il trascinamento (generale per entrambe le modalità) */
.list-group-item.sortable-ghost {
    background-color: #ffecb3;          /* Giallo pallido per feedback */
}

/* Stili per le opzioni di trascinamento (generale) */
.list-group-item {
    cursor: move;
    transition: background-color 0.2s;
}

/* Stili specifici per la modalità Light */
[data-layout-mode="light"] .sortable-list {
    border: 2px dotted #ccd2d8;         /* Bordo grigio chiaro */
}

[data-layout-mode="light"] .list-group-item.sortable-ghost {
    background-color: #ffecb3;          /* Giallo pallido per feedback */
}

/* Stili specifici per la modalità Dark */
[data-layout-mode="dark"] .sortable-list {
    border: 2px dotted #444;            /* Bordo grigio scuro */
}

[data-layout-mode="dark"] .list-group-item.sortable-ghost {
    background-color: #3b4048;          /* Grigio scuro per feedback in modalità dark */
}

[data-layout-mode="light"] .hamburger-icon span {
    background-color: #143f61;
}

[data-layout-mode="dark"] .hamburger-icon span {
    background-color: #8294a4;
}

.btn-modal{
    min-width: 200px;
}

/* Imposta il padding-left dinamico per la select2 */
.input-group .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 50px; /* Usa la larghezza del pulsante */
}

/* Stile personalizzato per i tab */
.custom-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Spazio tra icona e testo */
    font-size: 1rem; /* Dimensione del testo */
    padding: 0.75rem 1rem; /* Spaziatura interna */
    border-radius: 10px; /* Arrotonda gli angoli */
    transition: background-color 0.3s, color 0.3s; /* Animazione */
}

.custom-nav .nav-link i {
    font-size: 1.2rem; /* Dimensione dell'icona */
}

.custom-nav .nav-link.active {
    background-color: #007bff; /* Colore di sfondo attivo */
    color: #fff; /* Colore del testo attivo */
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2); /* Effetto ombra */
}

.custom-nav .nav-link:not(.active):hover {
    background-color: #f1f1f1; /* Colore di sfondo al passaggio del mouse */
    color: #007bff; /* Colore del testo al passaggio del mouse */
}

.select2-container.is-invalid .select2-selection {
    border-color: #ed5e5e; /* Colore del bordo */
    padding-right: calc(1.5em + 1rem); /* Spaziatura per l'icona */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ed5e5e'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ed5e5e' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 1.50rem) center; /* Posizionamento icona a destra */
    background-size: calc(0.75em + 0.5rem) calc(0.75em + 0.5rem); /* Dimensioni icona */
}

.btn-option {
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
}

.btn-check:checked + .btn-option {
    background-color: rgba(19, 197, 107, 0.1);
    border-color: #13c56b;
    color: #13c56b;
    font-weight: 500;
}

.invisibile {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 0 !important;
    overflow: hidden;
}

/* Forza l'altezza dell'offcanvas-top, ignorando override del tema */
body #offcanvasChat.offcanvas-top {
    height: 60vh !important;       /* altezza desiderata */
    max-height: 100dvh !important; /* non oltre il viewport */
}

/* Imposta comunque le variabili (utile se il tema le usa) */
#offcanvasChat {
    --bs-offcanvas-height: 80vh;
    --vz-offcanvas-height: 80vh;   /* alcune build Velzon usano una var propria */
}

/* i fix per lo scroll interno (già messi) */
#offcanvasChat .offcanvas-body { display:flex; flex-direction:column; overflow:hidden !important; }
#offcanvasChat .offcanvas-body > .row,
#offcanvasChat .offcanvas-body .col-12,
#chatTitolo { min-height:0 !important; }
#listaMessaggi { flex:1 1 0 !important; overflow-y:auto !important; max-height:none !important; }

.bg-io {
    background-color: #d9fdd3 !important;
}

.bg-whatsapp-light{
    background-color:#efeae2;
    background-image:
            url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'>\
<rect width='240' height='240' fill='none'/>\
<g fill='none' stroke='%23d2cbc0' stroke-width='1.2' opacity='.6'>\
<circle cx='40' cy='40' r='14'/>\
<circle cx='140' cy='70' r='10'/>\
<path d='M20 120 q20 -20 40 0 q20 20 40 0'/>\
<path d='M160 180 q-15 -10 -30 0 q-15 10 -30 0'/>\
<path d='M200 40 l12 8 l-12 8 l-12 -8z'/>\
<path d='M60 190 l10 10 l-10 10 l-10 -10z'/>\
</g></svg>");
    background-repeat: repeat;
    background-size: 360px 360px; /* scala del pattern */
    background-attachment: fixed;
}

.spunte { opacity: 0; margin-left: .25rem; transition: opacity .2s; }
.spunte.visibile { opacity: 1; }
/* colore blu quando letto */
.letto-da-me .spunte { color: #0d6efd; }
.letto-da-altri .spunte { color: #0d6efd; }