* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.non-visibile
{
	display:none;
}

html, body {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	height: 100vh;
	height: 100dvh; /* dvh gestisce correttamente anche le barre di navigazione su dispositivi mobili */
	overflow: hidden;
	background-color: #ffffff;
	overflow-y: auto !important; /* 🚀 Permette alla pagina interna di scorrere */
}

body { 
	display: flex; 
	flex-direction: column; 
	font-family: 'Segoe UI', sans-serif;  

}

main {
	flex: 1 1 auto;
	width: 100%;
	height: 0; /* 🚀 FONDAMENTALE: Impedisce a main e iframe di spingere in basso il footer */
	min-height: 0; /* 🚀 Previene il traboccamento Flexbox */
	/*height: calc(100vh - 55px);  100% dell'altezza schermo meno l'header ed il footer*/
	position: relative;
}

header {
	max-height: 55px;
	background: #D9FBF4;
	align-items: center;
	padding: 7px 20px 0px 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: sticky;
	top: 0;
	z-index: 1000; /* Deve stare sopra la sidebar per essere cliccabile */
	color: white;
	gap: 15px;
	flex-shrink: 0;
	overflow: hidden;
}

	header .logo {
	  margin-left: 0; /* Il margine è gestito dal gap dell'hamburger */
	  font-weight: bold;
	  color: var(--primary-color);
	}

		header .logo img {
			max-width: 150px; /* Impedisce al logo di essere troppo grande */
			height: auto; /* Mantiene le proporzioni */
			max-height: 50px;
		}

/* --- LOGICA MOBILE (< 934px) --- */
@media (max-width: 934px) {
	header #logo_azienda {
		display: none;
	}

	.notifications-wrapper {
		display: none !important;
	}

	.close-all-btn {
		display: none;
	}
}

.menu-btn {
	background-color: #2d4c72;
	border: none;
	color:white;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background 0.2s;
}

	.menu-btn:hover {
		background: white;
		color: #2d4c72;
		border: 1px solid #2d4c72;
	}


/* SIDEBAR A SCOMPARSA */
/* --- SIDEBAR --- */
.sidebar {
	position: fixed;
	top: 0;
	left: -290px;
	width: 290px;
	height: 100%;
	background-color: #2D4C72;
	color: white;
	padding: 20px;
	box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
	transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1000;
	overflow-y: auto; /* Permette lo scroll se ci sono molte voci */
}

	.sidebar.open {
		left: 0;
	}

.sidebar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 28px;
}

.sidebar-close-btn {
	background: none;
	border: none;
	color: #94a3b8;
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 4px;
	border-radius: 4px;
}

.sidebar-close-btn:hover {
	color: white;
	background-color: #1e293b;
}

/* Struttura lista voci */
.sidebar ul {
	list-style: none;
}

.sidebar-menu-item {
	margin-bottom: 6px;
}

/* Link e Pulsanti del menu */
.sidebar-menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 12px;
	color: #cbd5e1;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	border-radius: 6px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.sidebar-menu-link:hover {
	background-color: #1e293b;
	color: white;
}

/* Helper per affiancare icona e testo */
.sidebar-link-content {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Freccia del sottomenu */
.sidebar-arrow-icon {
	transition: transform 0.3s ease;
}

/* Ruota la freccia quando il sottomenu è aperto */
.sidebar-dropdown.active .arrow-icon {
	transform: rotate(180deg);
}

/* --- SOTTOMENU (secondo livello) --- */
.sidebar-submenu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
	padding-left: 16px; /* Indentazione per distinguere il livello */
}

.sidebar-dropdown.active .sidebar-submenu {
	max-height: 200px; /* Altezza massima per far scorrere l'animazione */
	margin-top: 4px;
}

.sidebar-submenu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	color: #94a3b8;
	background-color: #0F2845;
	font-size: 14px;
	text-decoration: none;
	border-radius: 6px;
	transition: background 0.2s, color 0.2s;
	cursor: pointer;
}

.sidebar-submenu a:hover {
	color: white;
	background-color: #1e293b;
}

/* Overlay sfondo */
.sidebar-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	z-index: 999;
}

	.sidebar-overlay.active {
		opacity: 1;
		visibility: visible;
	}


	/*        GESTIONE TABS      */
/* CONTENITORE RIGA TAB */
.tabs-header-wrapper {
	display: flex;
	align-items: flex-end;
	border-bottom: 2px solid #cbd5e1;
	gap: 10px;
	width: 100%; /* 🚀 FIX: Forza il rispetto della larghezza di main */
	min-width: 0; /* 🚀 FIX: Impedisce ai figli flex di superare il bordo destro */
}

/* BARRA TAB (Barra di scorrimento nascosta) */
.tabs-nav {
	display: flex;
	gap: 5px;
	overflow-x: auto;
	scroll-behavior: smooth;
	flex: 1;
	min-width: 0; /* 🚀 FIX: Consente lo scorrimento senza spingere oltre il margine */
	padding-bottom: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
	align-items: flex-end;
}

	.tabs-nav::-webkit-scrollbar {
		display: none;
	}

.tab-button {
	padding: 10px 18px;
	background-color: #e2e8f0;
	border: 1px solid #cbd5e1;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	transition: all 0.2s;
	flex-shrink: 0;
}

	.tab-button:hover {
		background-color: #f1f5f9;
		color: #1e293b;
	}

	.tab-button.active {
		background-color: #ffffff;
		color: #2563eb;
		border-color: #cbd5e1;
		position: relative;
		margin-bottom: -2px;
		padding-bottom: 12px;
	}

.close-tab {
	background: none;
	border: none;
	font-size: 1.1rem;
	line-height: 1;
	color: #94a3b8;
	cursor: pointer;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

	.close-tab:hover {
		background-color: #cbd5e1;
		color: #ef4444;
	}


.close-all-btn {
	background-color: #2d4c72;
	color: white;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	margin-bottom: 4px;
	margin-left: 8px; /* 🚀 Piccola spaziatura dall'ultimo tab */
	flex-shrink: 0;
	align-self: flex-end;
}

	.close-all-btn:hover {
		background-color: white;
		color: #2d4c72;
		border: 1px solid #2d4c72;
	}


/* CONTENITORE SCHEDE FULLSCREEN PER IFRAME */
.tabs-container {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-top: none;
	border-radius: 0 0 8px 8px;
	width: 100%;
	height: 100%;
	position: relative;
}

.tab-content {
	display: none;
	width: 100%;
	height: 100%;
}

	.tab-content.active {
		display: flex;
		flex-direction: column;
	}

/* IFRAME FULLSCREEN CON SCROLLBAR INTERNO ATTIVO */
.tab-iframe {
	width: 100%;
	height: 100%;
	flex:1;
	border: none;
	display: block;
	padding-left:10px;
}

.dashboard-padding {
	padding: 30px;
	overflow-y: auto;
	height: 100%;
	box-sizing: border-box;
}

	/* --- CONTENUTO  --- */


	/* Stili specifici per i contenuti interni */
	.stat {
		font-weight: bold;
		display: flex;
		align-items: center;
		gap: 10px;
	}

		.stat i {
			color: var(--accent-color);
			font-size: 1.2rem;
		}

	.placeholder-graphic {
		height: 150px;
		background: linear-gradient(45deg, #eee 25%, #f9f9f9 50%, #eee 75%);
		border-radius: 5px;
	}

	.simple-table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
	}

		.simple-table td {
			padding: 8px 0;
			border-bottom: 1px solid #eee;
			font-size: 0.9em;
		}
	/**********************************************************/
	/*PULSANTI AZIONE */
	/**********************************************************/
	/* Singoli elementi del menu */
	/* Contenitore dropdown */
	.dropdown {
		position: relative;
		display: inline-block;
	}
	/* Menu nascosto di default */
	.dropdown-menu {
		display: none;
		position: absolute;
		right: 0;
		top: 40px;
		background-color: none;
		min-width: 60px;
		box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
		z-index: 100;
		border-radius: 8px;
		border: none;
	}
		/* Classe per mostrare il menu */
		.dropdown-menu.show {
			display: flex;
			flex-direction: column;
		}
	/* Singoli elementi del menu */
	.dropdown-item {
		padding: 10px 15px;
		text-align: left;
		background: none;
		border: none;
		width: 100%;
		cursor: pointer;
		font-size: 14px;
	}

		.dropdown-item:hover {
			background-color: #f5f5f5;
		}

		.dropdown-item.delete {
			color: #d32f2f;
		}

	hr {
		border: 0;
		border-top: 1px solid #eee;
		margin: 5px 0;
	}
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/*GRAFICI A BARRE */
	/**********************************************************/
	.chart-container {
		display: flex;
		align-items: flex-end; /* Allinea le barre alla base */
		justify-content: space-between;
		height: 200px;
		padding-top: 20px;
		margin-top: 10px;
		border-bottom: 2px solid #eee;
	}

	.bar {
		width: 12%;
		background: var(--accent-color);
		border-radius: 4px 4px 0 0;
		position: relative;
		/* L'altezza viene calcolata moltiplicando la variabile per 100% */
		height: calc(var(--size) * 100%);
		transition: height 0.6s ease-out;
	}

		.bar:hover {
			background: var(--primary-color);
		}
		/* Etichette sotto le barre (Giorni) */
		.bar::after {
			content: attr(data-label);
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 0.75rem;
			color: #666;
		}
		/* Tooltip con valore (opzionale) */
		.bar:hover::before {
			content: calc(var(--size) * 100) "%";
			position: absolute;
			top: -25px;
			left: 50%;
			transform: translateX(-50%);
			background: #333;
			color: white;
			padding: 2px 6px;
			border-radius: 4px;
			font-size: 0.7rem;
		}
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/* Lista Record */
	/**********************************************************/
	.responsive-list {
		width: 100%;
		margin-top: 15px;
	}

	.list-header, .list-row {
		display: grid;
		/* Definisci le larghezze delle 5 colonne */
		grid-template-columns: 2fr 1fr 1fr 1fr 80px;
		padding: 12px 15px;
		align-items: center;
	}

	.list-header {
		background: #f8f9fa;
		font-weight: bold;
		color: var(--primary-color);
		border-radius: 8px;
		margin-bottom: 5px;
	}

	.list-row {
		border-bottom: 1px solid #eee;
		transition: background 0.2s;
	}

		.list-row:hover {
			background: #fdfdfd;
		}

	.list-controls {
		display: flex;
		justify-content: flex-start;
		align-items: end;
		gap: 5px;
		margin-bottom: 0px;
		flex-wrap: wrap; /* Fondamentale per il responsive */
		padding: 15px;
		border: 1px solid #ddd;
		border-radius: 10px;
		background: white;
		box-shadow: 0 4px 6px rgba(0,0,0,0.05);
		border-left: 4px solid var(--accent-color); /* Un tocco di design */
	}

	.list-buttons {
		display: flex;
		justify-content: left;
		align-items: center;
		gap: 5px;
		margin-bottom: 0px;
		flex-wrap: wrap; /* Fondamentale per il responsive */
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 10px;
		background: white;
		box-shadow: 0 4px 6px rgba(0,0,0,0.05);
		border-left: 4px solid var(--accent-color); /* Un tocco di design */
	}

	/* --- LOGICA MOBILE (< 768px) --- */
	@media (max-width: 768px) {
		.list-header {
			display: none;
		}

		/* Nascondi intestazione tabellare */

		.list-row {
			display: block; /* Trasforma la riga in un blocco */
			padding: 15px;
			border: 1px solid #eee;
			border-radius: 10px;
			margin-bottom: 15px;
		}

			.list-row div {
				display: flex;
				justify-content: space-between;
				padding: 8px 0;
				border-bottom: 1px dashed #eee;
			}

				.list-row div:last-child {
					border-bottom: none;
				}
				/* Inserisce il nome della colonna preso da data-label */
				.list-row div::before {
					content: attr(data-label);
					font-weight: bold;
					color: #888;
					margin-right: 10px;
				}
	}
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/* TABELLE DINAMICHE */
	/**********************************************************/

	.table-wrapper {
		width: 100%;
		overflow-x: auto;
		background: white;
		border-radius: 8px;
	}

	.dynamic-table {
		/* Se hai molte colonne, aumenta questo valore per attivare lo scroll */
		min-width: 900px;
		display: block;
	}

	.d-row {
		display: grid;
		/* La magia: usa la variabile definita nell'HTML o 1 di default */
		grid-template-columns: repeat(var(--cols, 1), 1fr);
		width: 100%;
		border-bottom: 1px solid #eee;
	}

		.d-row.header {
			background: #D9FBF4;
			font-weight: bold;
			color:#0D9488;
			border-bottom: 2px solid #ddd;
			position: sticky;
			top: 0;
		}

.d-cell {
	text-align: center;
	padding: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	align-content: center;
}

	.a-cell {
		text-align: center;
		padding: 5px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	/* --- RESPONSIVE PER DATI DINAMICI --- */
	@media (max-width: 900px) {

		@media (max-width: 900px) {
			.table-wrapper {
				overflow-x: visible;
			}

			.dynamic-table {
				min-width: 0;
			}

			.d-row.header {
				display: none; /* Nascondiamo l'header tabellare */
			}

			.d-row {
				display: block; /* La riga diventa una card */
				margin-bottom: 15px;
				border: 1px solid #eee;
				padding: 10px;
			}

			.d-cell {
				display: flex;
				justify-content: space-between;
				padding: 8px 0;
				border-bottom: 1px dashed #eee;
			}

				.d-cell::before {
					content: attr(data-label);
					font-weight: bold;
					color: #888;
				}
		}
	}
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/* Badge e Bottoni */
	/**********************************************************/
	.badge {
		padding: 4px 8px;
		border-radius: 12px;
		font-size: 0.75rem;
		font-weight: bold;
	}

	.online {
		background-color: #10B981;
		color: white;
	}

	.offline {
		background-color: gray;
		color: white;
	}

	.btn-edit {
		background: none;
		border: 1px solid #ddd;
		padding: 5px 10px;
		border-radius: 4px;
		cursor: pointer;
		color: var(--primary-color);
	}


.user-profile-btn {

}
	.btn-link {
		display: inline-block;
		padding: 10px 10px 10px 10px;
		margin-left: 5px;
		background-color: #14B8A6;
		color: white;
		text-decoration: none; /* Rimuove la sottolineatura del link */
		border-radius: 5px;
		font-weight: bold;
		text-align: center;
		font-size: small;
	}

		.btn-link:hover {
			background-color: #0056b3;
		}


			.action-buttons {
				display: flex;
				gap: 10px;
			}

			.btn-filter{
				flex: 1;
				justify-content: center;
				width: 100%;
				font-weight: 600;
				display: flex;
				align-items: center;
				gap: 8px;
				transition: 0.3s;
				padding: 5px 5px 5px 5px;
				border: 1px solid #ddd;
				border-radius: 8px;
				font-size: 0.95rem;
				transition: border-color 0.3s, box-shadow 0.3s;
				box-sizing: border-box;
				background: #14B8A6;
				color: white;
			}

				.btn-filter:hover {
					background: #f8f9fa;
				}

.btn-azioni {
	background: #d9fbf4;
	color: #dd9488;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	position: relative;
	transition: all 0.2s;
}
/**********************************************************/
/**********************************************************/
/**********************************************************/
/**********************************************************/
/* BOX ricerca */
/**********************************************************/
.search-box {
	position: relative;
	/*flex: 1;*/
	min-width: 250px;
}

		.search-box i {
			position: absolute;
			left: 15px;
			top: 50%;
			transform: translateY(-50%);
			color: #888;
		}

		.search-box input, .search-box select {
			width: 100%;
			padding: 5px 5px 5px 5px;
			border: 1px solid #ddd;
			border-radius: 8px;
			font-size: 0.95rem;
			transition: border-color 0.3s, box-shadow 0.3s;
			box-sizing: border-box;
		}

			.search-box input:focus, .search-box select:focus {
				outline: none;
				border-color: var(--accent-color);
				box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
			}

	@media (max-width: 600px) {
		.search-box, .action-buttons {
			width: 100%;
		}

	}
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/* Notifiche */
	/**********************************************************/
	.notification-container {
		position: fixed;
		top: 80px; /* Sotto l'header */
		right: 20px;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.notification {
		display: flex;
		align-items: center;
		min-width: 300px;
		background: white;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
		border-left: 5px solid;
		animation: slideIn 0.5s ease-out forwards;
	}
		/* Tipi di notification */
		.notification.success {
			border-left-color: #2ecc71;
		}

			.notification.success i {
				color: #2ecc71;
			}

		.notification.error {
			border-left-color: #e74c3c;
		}

			.notification.error i {
				color: #e74c3c;
			}

		.notification i {
			font-size: 1.5rem;
			margin-right: 15px;
		}

	.notification-content strong {
		display: block;
		font-size: 0.9rem;
	}

	.notification-content p {
		margin: 0;
		font-size: 0.8rem;
		color: #666;
	}
	/* Logica di chiusura */
	.notification-check {
		display: none;
	}

		.notification-check:checked + .notification {
			display: none;
		}

	.notification-close {
		margin-left: auto;
		cursor: pointer;
		font-size: 1.2rem;
		color: #ccc;
	}
	/* Animazione di entrata */
	@keyframes slideIn {
		from {
			transform: translateX(100%);
			opacity: 0;
		}

		to {
			transform: translateX(0);
			opacity: 1;
		}
	}

	.notification::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		height: 3px;
		width: 100%;
		background: rgba(0,0,0,0.1);
		animation: progress 5s linear forwards;
	}

	@keyframes progress {
		from {
			width: 100%;
		}

		to {
			width: 0%;
		}
	}
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/**********************************************************/
	/* Gestione INPUT */
	/**********************************************************/
	.responsive-form {
		display: flex;
		flex-direction: column;
	}

	.form-row {
		display: grid;
		gap: 20px;
	}

	.pulsanti {
		padding: 12px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		font-weight: bold;
		transition: background 0.3s;
	}

		.pulsanti:hover {
			background-color: #0056b3;
		}
	/* Container generico per ogni riga */
	.row {
		display: grid;
		gap: 5px;
		margin-bottom: 20px;
	}
	/*container per form di input */
	.row-form {
		display: grid;
		gap: 5px;
		margin-bottom: 20px;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
	/* Riga a 4 colonne: ideale per statistiche brevi */
	.row-4 {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
	/* Riga a 2 colonne: ideale per contenuti complessi (tabelle/grafici) */
	.row-2 {
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	}
	/* Riga a 3 colonne: bilanciata */
	.row-3 {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
	/* Stile comune per i riquadri */
	.card {
		background: white;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0,0,0,0.05);
		border-left: 4px solid var(--accent-color); /* Un tocco di design */
	}
	/* Stile dei gruppi di input */
	.form-group {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.form-group-row {
		display: flex;
		flex-direction: row;
		gap: 2px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.form-group label {
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--primary-color);
	}

	.form-group input,
	.form-group textarea,
	.form-group select,
	.form-group checkbox {
		padding: 5px 6px;
		border: 1px solid #ddd;
		border-radius: 6px;
		font-size: 1rem;
		transition: border-color 0.3s;
	}

		.form-group input:focus {
			border-color: var(--accent-color);
			outline: none;
			box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
		}
	/* Pulsanti in fondo */
	.form-actions {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		margin-top: 10px;
		border-top: 1px solid #eee;
		padding-top: 20px;
	}
	/* --- RESPONSIVE FORM (< 768px) --- */
	@media (max-width: 768px) {

		.form-actions {
			flex-direction: column-reverse; /* Pulsante Salva sopra Annulla su mobile */
		}

			.form-actions button {
				width: 100%;
			}
	}
	/****************************************************/
	/* PAGINAZIONE*/
	/****************************************************/
.pagination-container {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	justify-content: center;
}

		.pagination-container button {
			padding: 8px 14px;
			border: 1px solid #007bff;
			background-color: white;
			color: #007bff;
			border-radius: 4px;
			cursor: pointer;
			font-weight: 500;
			transition: all 0.2s;
		}

			.pagination-container button:hover {
				background-color: #f0f7ff;
			}

			.pagination-container button.active {
				background-color: #007bff;
				color: white;
				cursor: default;
			}

	.page-info {
		margin-right: 15px;
		font-size: 0.9em;
		color: #666;
	}
	/****************************************************/
	/****************************************************/
	/****************************************************/

	@media (max-width: 600px) {
		.simple-table thead {
			display: none; /* Nascondi l'intestazione su mobile */
		}

		.simple-table tr {
			display: block;
			margin-bottom: 10px;
			border: 1px solid #eee;
			padding: 10px;
			border-radius: 8px;
		}

		.simple-table td {
			display: flex;
			justify-content: space-between;
			border: none;
			padding: 5px 0;
		}
			/* Aggiungi un'etichetta prima del dato su mobile */
			.simple-table td::before {
				content: attr(data-label);
				font-weight: bold;
				color: var(--primary-color);
			}
	}
	/****************************************************/
	/* Contenitore dei messaggi */
	/****************************************************/
	#toast-container {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 9999;
	}

	.toast {
		min-width: 250px;
		background-color: #333;
		color: #fff;
		padding: 16px;
		border-radius: 8px;
		margin-top: 10px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.3);
		display: flex;
		justify-content: space-between;
		align-items: center;
		animation: slideIn 0.4s ease-out;
	}

		.toast.success {
			background-color: #4CAF50;
		}

		.toast.error {
			background-color: #f44336;
		}

		.toast.info {
			background-color: #2196F3;
		}

	@keyframes slideIn {
		from {
			transform: translateX(100%);
			opacity: 0;
		}

		to {
			transform: translateX(0);
			opacity: 1;
		}
	}

	.toast-fade-out {
		animation: slideOut 0.4s ease-in forwards;
	}

	@keyframes slideOut {
		from {
			transform: translateX(0);
			opacity: 1;
		}

		to {
			transform: translateX(100%);
			opacity: 0;
		}
	}
	/****************************************************/
	/****************************************************/
	/****************************************************/
	h2 {
		text-align: center;
		margin-bottom: 10px;
		font-family: sans-serif;
	}

	label {
		font-family: sans-serif;
		font-weight: bold;
		font-size: 0.9rem;
	}

	input {
		padding: 12px;
		border: 1px solid #ccc;
		border-radius: 6px;
		font-size: 1rem;
	}

	button {
		padding: 12px;
		background-color: #2D4C72;
		color: white;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		font-weight: bold;
		transition: background 0.3s;
	}

		button:hover {
			background-color: #0056b3;
		}
	/* Modale */
	.modal {
		display: none;
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		backdrop-filter: blur(4px);
	}

	.modal-content {
		position: relative;
		background: white;
		margin: 5% auto;
		padding: 25px;
		border-radius: 12px;
		width: 90%;
		max-width: 90%;
	}
	/* Il contenitore che ospita l'iframe */
	.container-iframe {
		width: 100%; /* Prende la larghezza della colonna in cui si trova */
		/*max-width: 1200px;*/ /* O la larghezza della tua maschera */
		margin: 0 auto;
		overflow: hidden; /* Evita che l'iframe "sbordi" prima del ridimensionamento */
		border: 1px solid #ccc; /* Opzionale, per vedere dove finisce */
	}

	#IframeData, #IframeLista {
		width: 100%;
		border: none;
		display: block; /* Toglie lo spazio bianco sotto l'iframe */
		aspect-ratio: 16/9;
	}

	.close-btn {
		position: absolute;
		top: -9px;
		right: 0px;
		font-size: 40px;
		font-weight: bold;
		cursor: pointer;
		color: #333;
		line-height: 1;
	}

		.close-btn:hover {
			color: red; /* Feedback visivo al passaggio del mouse */
		}
	/**********LOADER *********/
	/* Il contenitore che copre tutto lo schermo */
	#loader-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #ffffff; /* Sfondo bianco */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9999; /* Assicura che sia sopra ogni elemento */
		transition: opacity 0.5s ease;
	}
	/* Lo spinner vero e proprio */
	.loader {
		border: 8px solid #f3f3f3;
		border-top: 8px solid #3498db; /* Colore del caricamento */
		border-radius: 50%;
		width: 60px;
		height: 60px;
		animation: spin 1s linear infinite;
	}
	/* Animazione di rotazione */
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}


	/**************************    NOTIFICHE SU HEADER */
	/* CONTENITORE NOTIFICHE */
	.notifications-wrapper {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-left: 5px;
		justify-content: flex-end;
		flex-shrink: 0;
	}

	/* PULSANTE NOTIFICA CON ICONA */
.notification-btn {
	background: #2d4c72;
	color: #ffff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	position: relative;
	transition: all 0.2s;
}

		.notification-btn:hover {
			background: #2563eb; /* Diventa blu al passaggio del mouse */
			border-color: #3b82f6;
		}

	/* BADGE ROSSO CON IL NUMERO */
	.notification-badge {
		position: absolute;
		top: -3px;
		right: -3px;
		background-color: #ef4444; /* Rosso avviso */
		color: white;
		font-size: 0.65rem;
		font-weight: 700;
		padding: 2px 5px;
		border-radius: 10px;
		line-height: 1;
	}

/* ==========================================
   STYLE FOOTER
   ========================================== */
.app-footer {
	height: 30px;
	flex-shrink: 0;
	margin-top: auto; /* Spinge il footer nell'estremo fondo se c'è spazio */
	background-color: #2c3e50; /* Stesso tono della barra o un po' più scuro */
	color: #a0aec0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px;
	margin-top: 10px;
	font-size: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	user-select: none;
	z-index: 10;
}

.footer-left, .footer-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.app-footer a {
	color: #cbd5e0;
	text-decoration: none;
	transition: color 0.2s;
}

	.app-footer a:hover {
		color: #ffffff;
	}

.separator {
	opacity: 0.4;
}

/* Indicatore di Stato verde */
.status-indicator {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #e2e8f0;
}

.status-dot {
	width: 7px;
	height: 7px;
	background-color: #2ecc71; /* Verde brillante */
	border-radius: 50%;
	display: inline-block;
	box-shadow: 0 0 5px rgba(46, 204, 113, 0.6);
}


/***  GESTIONE DRAG & DROP GENERICA E ORGANIGRAMMA */

/* Contenitore Principale a due colonne fisse */
.drag-app-container {
	display: flex;
	flex: 1;
	gap: 20px;
	width: 100%;
	height: calc(100vh - 100px);
	overflow: hidden;
}

/* --- SIDEBAR FISSA --- */
.drag-sidebar {
	width: 320px;
	min-width: 320px;
	background: white;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	height: 100%;
	z-index: 10; /* Resta sempre sopra per il drag & drop */
}

.drag-search-box {
	width: 100%;
	padding: 10px 12px;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 15px;
	outline: none;
}

	.drag-search-box:focus {
		border-color: #0284c7;
	}

.drag-pool-stats {
	font-size: 12px;
	color: #64748b;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
}

#drag-people-pool {
	flex: 1;
	overflow-y: auto;
	background: #f8fafc;
	border: 2px dashed #cbd5e1;
	border-radius: 8px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom:10px;
}

/* --- CANVAS INTERATTIVO (PAN & ZOOM) --- */
.drag-canvas {
	flex: 1;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden; /* Nasconde ciò che esce dai bordi del viewport */
	cursor: grab;
	user-select: none;
	background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
	background-size: 20px 20px; /* Effetto griglia di sfondo */
}

	.drag-canvas:active {
		cursor: grabbing;
	}

/* Contenitore interno che subisce la trasformazione Zoom & Pan */
.pan-zoom-container {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	padding: 100px; /* Spazio extra per muoversi */
	min-width: 100%;
	display: flex;
	justify-content: center;
}

/* Controlli Zoom galleggianti */
.zoom-controls {
	position: absolute;
	bottom: 20px;
	right: 20px;
	display: flex;
	gap: 6px;
	background: white;
	padding: 6px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 5;
}

	.zoom-controls button {
		width: 32px;
		height: 32px;
		border: 1px solid #cbd5e1;
		background: #f8fafc;
		border-radius: 6px;
		font-weight: bold;
		font-size: 16px;
		color:black;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

		.zoom-controls button:hover {
			background: #e2e8f0;
		}

.drag-btn-reset {
	background: #14B8A6;
	color: white;
	border: none;
	width: 100%;
	padding: 10px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 5px;
}

.drag-btn-save {
	background: #14B8A6;
	color: white;
	border: none;
	width: 100%;
	padding: 10px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 5px;
}


/* --- STRUTTURA ALBERO DIRETTORE --- */
.org-tree ul {
	display: flex;
	justify-content: center;
	padding-left: 0;
	margin: 0;
	padding-top: 20px;
	position: relative;
}

.org-tree li {
	list-style-type: none;
	position: relative;
	padding: 20px 10px 0 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

	.org-tree li::before, .org-tree li::after {
		content: '';
		position: absolute;
		top: 0;
		right: 50%;
		border-top: 2px solid #cbd5e1;
		width: 50%;
		height: 20px;
	}

	.org-tree li::after {
		right: auto;
		left: 50%;
		border-left: 2px solid #cbd5e1;
	}

	.org-tree li:only-child::after, .org-tree li:only-child::before {
		display: none;
	}

	.org-tree li:only-child {
		padding-top: 0;
	}

	.org-tree li:first-child::before, .org-tree li:last-child::after {
		border: 0 none;
	}

	.org-tree li:last-child::before {
		border-right: 2px solid #cbd5e1;
		border-radius: 0 5px 0 0;
	}

	.org-tree li:first-child::after {
		border-radius: 5px 0 0 0;
	}

.org-tree ul ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 2px solid #cbd5e1;
	width: 0;
	height: 20px;
}

/* --- IL NUOVO BOX DEL REPARTO --- */
.org-role-node {
	background: #ffffff;
	border: 2px solid #94a3b8;
	border-radius: 10px;
	width: 230px; /* Allargato leggermente per ospitare le sezioni */
	padding: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

	.org-role-node h3 {
		margin: 0 0 10px 0;
		font-size: 13px;
		color: #1e293b;
		text-transform: uppercase;
		border-bottom: 2px solid #e2e8f0;
		padding-bottom: 6px;
		text-align: center;
		letter-spacing: 0.5px;
	}

/* Sotto-sezioni interne al Box */
.org-sub-zone-title {
	font-size: 10px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	text-align: left;
	margin: 8px 0 4px 2px;
}

.org-dropzone {
	min-height: 40px;
	background: #f8fafc;
	border: 2px dashed #cbd5e1;
	border-radius: 6px;
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-sizing: border-box;
}

	.org-dropzone.drag-over {
		background: #e0f2fe;
		border-color: #0284c7;
	}

/* Slot specifico del Responsabile */
.org-slot-mgr {
	background: #f1f5f9;
	border-color: #94a3b8;
	min-height: 46px;
}

.org-empty-hint {
	font-size: 11px;
	color: #94a3b8;
	text-align: center;
	line-height: 34px;
	font-style: italic;
	user-select: none;
}

/* --- LE CARTE DEL PERSONALE DISTINTE --- */
.org-person-card {
	padding: 8px;
	border-radius: 6px;
	cursor: grab;
	font-weight: 500;
	font-size: 12px;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	user-select: none;
	box-sizing: border-box;
}

	.org-person-card:active {
		cursor: grabbing;
	}

/* Stile nel Pool di selezione */
#drag-people-pool .org-person-card {
	background: #64748b;
	color: white;
}

/* Stile del Responsabile (Capo) */
.org-card-mgr {
	background: #1e293b !important; /* Grigio scuro/Antracite istituzionale */
	color: #ffffff;
	font-weight: 600;
	border-left: 4px solid #f59e0b; /* Accent dorato */
}

/* Stile dei Collaboratori (Team) */
.org-card-coll {
	background: #0284c7 !important; /* Azzurro professionale */
	color: white;
}

.org-node-actions {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 12px;
	border-top: 1px solid #e2e8f0;
	padding-top: 8px;
}

	.org-node-actions button {
		background: #f1f5f9;
		border: 1px solid #cbd5e1;
		padding: 4px 8px;
		font-size: 10px;
		font-weight: 600;
		border-radius: 4px;
		cursor: pointer;
		color:black;
	}

		.org-node-actions button:hover {
			background: #e2e8f0;
		}

	.org-node-actions .btn-delete-node {
		background: #fee2e2;
		color: #dc2626;
		border-color: #fca5a5;
	}

		.org-node-actions .btn-delete-node:hover {
			background: #fecaca;
		}


/* 3. Il Box Extra: nascosto e compresso di default */
.org-info-extra {
	max-height: 0; /* Altezza zero = invisibile */
	opacity: 0; /* Trasparente */
	overflow: hidden; /* Taglia fuori il testo in eccesso */
	font-size: 0.85rem;
	font-weight: normal;
	color: #eff6ff;
	/* Transizione per l'apertura a tendina */
	transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

	.org-info-extra p {
		margin: 5px 0 0 0; /* Un po' di spazio tra le righe di testo */
	}

/* 4. COSA SUCCEDE AL PASSAGGIO DEL MOUSE (:HOVER) */
.org-person-card:hover {
	background-color: #2563eb; /* Diventa un blu leggermente più scuro */
	transform: translateY(-2px); /* Si solleva leggermente */
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* L'ombra aumenta */
}

	/* Quando passi il mouse sull'oggetto, la tendina si espande */
	.org-person-card:hover .org-info-extra {
		max-height: 150px; /* Si allunga fino a mostrare tutto il testo */
		opacity: 1; /* Diventa visibile */
		margin-top: 10px; /* Crea distacco dalla riga principale */
		border-top: 1px solid rgba(255, 255, 255, 0.2); /* Sottile linea di divisione */
		padding-top: 8px;
	}

	.org-person-card:active .org-info-extra, .org-person-card:hover:active .org-info-extra {
		display: none !important;
	}



	/* --- STRUTTURA CONTENITORI PER DRAG --- */
	.drag-binders {
		flex-grow: 1;
		background: white;
		padding: 30px;
		border-radius: 12px;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
		overflow-x: auto;
	}

		.drag-binders ul {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			justify-content: center;
			padding-left: 0;
			margin: 0;
			padding-top: 20px;
			position: relative;
		}

		.drag-binders li {
			list-style-type: none;
			position: relative;
			padding: 20px 10px 0 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}



/* Stile per il nuovo pulsante nella Sidebar */
.btn-print {
	background: #0284c7;
	color: white;
	border: none;
	width: 100%;
	padding: 10px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 15px;
}

	.btn-print:hover {
		background: #0369a1;
	}

/* --- REGOLE CSS DEDICATE ALLA STAMPA IN PDF --- */
@media print {
	/* Nascondi tutto ciò che non è l'organigramma */
	body {
		background: white !important;
		padding: 0 !important;
		margin: 0 !important;
		height: auto !important;
		overflow: visible !important;
	}

	.header-container,
	.drag-sidebar,
	.zoom-controls,
	.org-node-actions,
	.org-empty-hint {
		display: none !important; /* Nasconde sidebar, pulsanti e suggerimenti */
	}

	.drag-app-container {
		display: block !important;
		height: auto !important;
		overflow: visible !important;
	}

	.drag-canvas {
		box-shadow: none !important;
		border: none !important;
		background: transparent !important;
		overflow: visible !important;
		position: relative !important;
		width: 100% !important;
		height: auto !important;
	}

	/* Reset della trasformazione Zoom/Pan per stampare a dimensione naturale */
	.pan-zoom-container {
		position: relative !important;
		transform: none !important;
		padding: 0 !important;
		top: 0 !important;
		left: 0 !important;
		display: flex !important;
		justify-content: center !important;
	}

	.org-role-node {
		box-shadow: none !important;
		border: 1px solid #64748b !important;
		page-break-inside: avoid;
	}
}
	/***************************************************/