/* SOVRASCRIVO ANCHE PRIMARY, SECONDARY E ALTRI */

/* old primary: #405189 */
/* old secondary: #3577f1 */
/* old rgb primary: 64,81,137 */
/* old secondary: 53, 119, 241 */

/* new primary: #152854 */
/* new secondary: #0EB7FE */
/* new rgb primary: 21, 40, 84 */
/* new rgb secondary: 14, 183, 254 */

/* data-bs-theme-light */
:root,[data-sidebar=light]{

	--vz-primary: #405189;
	--vz-secondary: #3577f1;
	--vz-primary-rgb: 64,81,137;
  	--vz-secondary-rgb: 53, 119, 241;

	--vz-primary-text-emphasis: #364574;
	--vz-secondary-text-emphasis: #2d65cd;
	
	--vz-primary-bg-subtle: #e2e5ed;
	--vz-secondary-bg-subtle: #e1ebfd;

	--vz-primary-border-subtle: #b3b9d0;
	--vz-secondary-border-subtle: #aec9f9;

	--vz-link-color: var(--vz-primary);
	--vz-link-hover-color: var(--vz-primary);
	
}

/* data-bs-theme-dark */
:root[data-bs-theme=dark] {
	
	--vz-primary-text-emphasis: #6674a1;
	--vz-secondary-text-emphasis: #5d92f4;
	
	--vz-primary-bg-subtle: rgba(21, 40, 84, 0.15);
	--vz-secondary-bg-subtle: rgba(14, 183, 254, 0.15);

	--vz-primary-border-subtle: #2a3559;
	--vz-secondary-border-subtle: #1b3c79;

	--vz-primary-rgb: rgb(211, 211, 211);
}



/* METTERE I COLORI DI BASE DELL AZIENDA */
:root[data-sidebar=dark] {
	--vz-login-bg: #2b2b2b;
	--vz-vertical-menu-bg: #2b2b2b;
	--vz-vertical-menu-border: #1e0b0b;
	
	--vz-vertical-menu-item-color: #c0c0c0;
	--vz-vertical-menu-item-bg: rgba(255,255,255,.15);
	--vz-vertical-menu-item-hover-color: #fff;
	--vz-vertical-menu-item-active-color: #fff;
	--vz-vertical-menu-item-active-bg: rgba(255,255,255,.15);
	--vz-vertical-menu-sub-item-color: #c0c0c0;
	--vz-vertical-menu-sub-item-hover-color: #fff;
	--vz-vertical-menu-sub-item-active-color: #fff;
	--vz-vertical-menu-title-color: #878787;
	--vz-twocolumn-menu-iconview-bg: #494c56;
	--vz-vertical-menu-box-shadow: 0 2px 4px rgba(15,34,58,.12);
	--vz-vertical-menu-dropdown-box-shadow: 0 2px 4px rgba(15,34,58,.12);
}

/* COLORI DI APP.MIN.CSS DA SOVASCRIVERE */



.table .sort{
	cursor: pointer;
}

.table .sort::before {
	top:12px;
	font-size:1rem;
	color: #ccc;
}

.table .sort::after {
	font-size:1rem;
	top:6px;
	color: #ccc;
}


.table .sort-asc::after {
	color: rgba(var(--vz-primary-rgb),var(--vz-bg-opacity));
}

.table .sort-desc::before {
	color: rgba(var(--vz-primary-rgb),var(--vz-bg-opacity));
}

ul.pagination a[disabled] {
	color: #ccc;
}

#back-to-top{
	bottom: 50px !important;
}

.vertical-navs-step .nav .nav-link .step-muted {
	color:#9a9a9a;
}

input[type=number] {
	-moz-appearance: textfield;
}



textarea.form-control.ta-details{
  min-height: 15em;
}

.flatpickr-calendar.hasTime.noCalendar{
	width:193px;
}


/* COLORIS CSS */

.clr-field{
	display: block !important;
	cursor: pointer;
}

.circle .clr-field input {
	padding-left: 36px;
}

.circle .clr-field button {
	width: 25px;
	height: 25px;
	left: 10px;
	right: auto;
	border-radius: 50px;
}

.full .clr-field button {
	width: 100%;
	height: 100%;
	border-radius: 5px;
}

.pad-full .clr-field button{
	height: 20px;
	left: 50%;
	width:96%;
	transform: translate(-50%,-50%);
	border-radius: 5px;
}


.privileges .form-check-input:disabled{
	opacity:1 !important;
}

.choices__list--multiple{
	float:right;
}

.sortable-chosen .list-group-item{
	color:#fff;
	background-color: #1a1d3c;
}


.copy-clipboard{
	cursor: pointer;
}

.copy-clipboard::after {
	content: "PREMI PER COPIARE 📋";
	position: absolute;
	right: -1px;
	white-space: nowrap;
	display: none;
	background: #333;
	color: #fff;
	padding: 1px 3px 0px 3px;
	font-size: 9px;
	opacity: 0.4;
	bottom: -1px;
	border-bottom-right-radius: 2px;
	border-top-left-radius: 2px;
	margin: 0;
}

.copy-clipboard:hover::after {
	display: block;
}


#navbar-nav li.nav-item{
	line-height: 16px;
}

.navbar-menu ul.nav{
	background: rgb(43, 43, 43) !important;
	background: linear-gradient(90deg, rgb(43, 43, 43) -10%, rgb(35, 32, 32) 50%) !important;
}

.choices__list--dropdown:not(.is-active) {
    height: 0px;
    padding: 0px;
}

.was-validated .choices__inner:has(.form-control:invalid) {
    border-color: var(--vz-form-invalid-border-color);
    padding-right: calc(1.5em + 1rem);
    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='%23f06548'%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='%23f06548' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(2.375em + .25rem) center;
    background-size: calc(.75em + .5rem);
}

.form-control:disabled {
    background-color: var(--vz-tertiary-bg) !important;
}

#added_news .col-md-3{
    flex: 0 0 content;
    margin-bottom: 15px;
}
#added_news .col-md-9{
	flex:0 0 content;
}


.btn-rm{
	display: flex;
	align-items: end;
	justify-content: center;
}

/* AUTOCOMPLETE - GHIRO */

.autoComplete_wrapper {
	display: block;
}

.autoComplete_wrapper > input {
	display: block;
	width: 100%;
	height: auto;
	padding: .5rem .9rem;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--vz-body-color);
	background-color: var(--vz-input-bg-custom);
	background-clip: padding-box;
	border: var(--vz-border-width) solid var(--vz-input-border-custom);
	border-radius: var(--vz-border-radius);
	background-image: none;
}

.autoComplete_wrapper > input:hover {
	color: var(--vz-body-color);
}

.autoComplete_wrapper > input:focus {
	border: var(--vz-border-width) solid var(--vz-primary-border-subtle);
	color: var(--vz-body-color);
}

.autoComplete_wrapper > ul > li {
	font-size: .8125rem;
	margin: 0;
	padding: .35rem 1.2rem;
	border-radius: 0;
	background-color: var(--vz-secondary-bg);
	color: var(--vz-body-color);
}

.autoComplete_wrapper > ul > li:hover, .autoComplete_wrapper > ul > li[aria-selected="true"] {
	color: var(--vz-body-color);
	background-color: var(--vz-tertiary-bg);
}

.autoComplete_wrapper > ul > li mark {
	color: var(--vz-success);
}

@keyframes flash {
	30% { opacity: 1; }
	50% { opacity: 0; }
	70% { opacity: 1; }
}

.flash {
	animation: flash 2s infinite;
}

.bg-tertiary-subtle{
	background-color: var(--vz-tertiary-bg-subtle);
}

.text-tertiary{
	color: var(--vz-tertiary);
}







/*  SIDEBAR INTERNAL NAVIGATION */
.internal-navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"]::after {
	display: block;
	content: "\f0142";
	font-family: "Material Design Icons";
	margin-left: auto;
	transition: transform .2s,-webkit-transform .2s;
	font-size: 1.05rem;
	position: absolute;
	right: 18px;
	color: inherit;
}

.internal-navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.internal-navbar-menu .navbar-nav .nav-sm .nav-link {
	padding: .55rem 1rem .55rem 1.6rem !important;
	position: relative;
	font-size: .813rem;
	font-family: Poppins,sans-serif;
}

.internal-navbar-menu .navbar-nav .nav-link {
	display: flex;
	align-items: center;
}

.internal-navbar-menu .navbar-nav .nav-sm .nav-link::before {
	content: "";
	width: 6px;
	height: 1.5px;
	background-color: var(--vz-secondary-color);
	position: absolute;  
	left: 10px;
	top: 16.5px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	opacity: .5;
}

.internal-navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] {
	color: var(--vz-dark);
}

.internal-navbar-menu .navbar-nav .nav-sm .nav-link:hover::before {
	background-color: var(--vz-dark) !important;
	opacity: 1;
}

.internal-navbar-menu .navbar-nav .nav-sm .nav-link.active::before {
	background-color: var(--vz-dark);
	opacity: 1;
}



.sidebar-nav-internal #internal-navbar-nav {
	padding: 1rem 0.5rem;
}

.sidebar-nav-internal .nav-link {
	color: var(--vz-secondary-color);
	padding: 0.55rem 1rem;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: all 0.25s ease-in-out;
}


.sidebar-nav-internal .menu-dropdown .nav-link {
	color: var(--vz-secondary-color);
}

.sidebar-nav-internal .nav-link:hover {
	color: var(--vz-dark);
}

.sidebar-nav-internal .nav-link.active {
	color: var(--vz-dark);
	font-weight: 500;
}

/* Stile per i sottomenu */
.sidebar-nav-internal .menu-dropdown {
	padding-left: 1.5rem;
}

/* Gestione icona dropdown */
.sidebar-nav-internal .nav-link i {
	transition: transform 0.3s;
}

.sidebar-nav-internal .nav-link[aria-expanded="true"] i {
	transform: rotate(180deg);
}

/* Ombreggiatura leggera per dare profondità */
.sidebar-nav-internal {
	position: sticky;
	top: 90px; /* Regola in base alle tue esigenze */
}

tbody, td, tfoot, th, thead, tr {
	border-color: var(--vz-border-color);
}





/* ACTIVITY_LOG - Animazioni */
#activity-logs-container {
    transition: all 0.3s ease;
}

/* AGGIUNGI queste regole per rendere fluide le transizioni */
.acitivity-timeline .acitivity-item {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    will-change: opacity, transform;
}

/* Per batch loading, transizioni più veloci */
.acitivity-timeline .acitivity-item.activity-log-batch-entering,
.acitivity-timeline .acitivity-item.activity-log-batch-entered {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Stato iniziale: elemento nascosto e spostato in basso */
.acitivity-timeline .activity-log-entering {
    opacity: 0;
    transform: translateY(20px);
}

/* Stato finale: elemento visibile in posizione */
.acitivity-timeline .activity-log-entered {
    animation: fadeInUpAL 0.4s ease-out forwards;
}

/* Animazione per batch loading (caricamento iniziale) */
.acitivity-timeline .activity-log-batch-entering {
    opacity: 0;
    transform: translateY(15px);
}

.acitivity-timeline .activity-log-batch-entered {
    animation: fadeInUpQuickAL 0.25s ease-out forwards;
}

/* Animazione principale per singoli nuovi log */
@keyframes fadeInUpAL {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animazione più veloce per batch */
@keyframes fadeInUpQuickAL {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}






/* ============================================
   ACTIVITY LOG - HIGHLIGHT ANIMATION
   Background che scorre mantenendo il tratteggio
   ============================================ */

/* Transizione fluida per il before */
.acitivity-timeline .acitivity-item::before {
    transition: all 0.3s ease-out;
}

/* Animazione: il background scorre dal basso verso l'alto */
.acitivity-timeline .acitivity-item.activity-log-highlight::before {    
    /* Background più lungo dell'elemento per farlo scorrere */
    background: linear-gradient(
        to top,
        transparent,
        transparent 30%,
        var(--vz-primary) 50%,
        transparent 70%,
        transparent
    );
    background-size: 1px 400%; /* Più alto dell'elemento */
    background-position: center top; /* Parte dal basso */
    animation: backgroundSlide 2s ease-out forwards;
}

/* Il background scorre dal basso verso l'alto */
@keyframes backgroundSlide {
    0% {
        background-position: center top; /* Parte dal basso */
    }
    100% {
        background-position: center bottom; /* Arriva in alto e esce */
    }
}

/* Pulse dell'avatar sincronizzato */
.acitivity-timeline .acitivity-item.activity-log-highlight .acitivity-avatar {
    animation: avatarPulse 0.5s ease-out 0.8s;
}

@keyframes avatarPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--vz-primary-rgb), 0);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(var(--vz-primary-rgb), 0.15);
    }
}




/*********************************** 
Avatar per pagina profilo 
**********************************/
/* Avatar con iniziali quando manca l'immagine profilo */
.avatar-initials {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
    background-color: #6c757d;
    user-select: none;
    flex-shrink: 0;
}

/* Avatar topbar */
.topbar-user .avatar-initials {
    width: 32px;
    height: 32px;
    font-size: 14px;
    background-color: var(--vz-primary);
}

/* Avatar grande per pagina profilo */
.avatar-initials-large {
    width: 120px;
    height: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 600;
    background-color: var(vz-primary-bg-subtle);
    color: var(--vz-primary);
    user-select: none;
}

/* Bottone X per eliminare immagine profilo */
.btn-delete-profile-image {
    width: 30px !important;
    height: 30px !important;
    padding: 0;
    z-index: 5;
    position: absolute;
    top: 0;
    right: 0;
}