/* ============================================
   TEMPORANEO - tolgo hamburger ai partecipanti, poi vedremo.
   ============================================ */

body.UsrType22 .hamburger-btn {
	display: none;
}






/* ============================================
   Home.css - Stili comuni Home, Catalog, Mandatory
   ============================================ */

body {
	font-family: 'Roboto', sans-serif;
	background-color: var(--bg-color);
	color: var(--text-dark);
}


/* Grafici e Icone in Rosso */
.bar, .dist-bar-fill {
	background: var(--primary-gradient) !important;
	background-color: var(--primary-color) !important;
}




/* ============================================
   ANIMAZIONI
   ============================================ */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes popIn {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes barGrow {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Grafico a barre mensile: fade-in + slide-up con effetto onda.
   RadzenChart renderizza le barre come <path> dentro <g class="rz-column-series">. */
#history-monthly-chart .rz-column-series path {
	animation: barGrow 0.4s ease-out backwards;
}

#history-monthly-chart .rz-column-series path:nth-child(1)  { animation-delay: 0s; }
#history-monthly-chart .rz-column-series path:nth-child(2)  { animation-delay: 0.04s; }
#history-monthly-chart .rz-column-series path:nth-child(3)  { animation-delay: 0.08s; }
#history-monthly-chart .rz-column-series path:nth-child(4)  { animation-delay: 0.12s; }
#history-monthly-chart .rz-column-series path:nth-child(5)  { animation-delay: 0.16s; }
#history-monthly-chart .rz-column-series path:nth-child(6)  { animation-delay: 0.20s; }
#history-monthly-chart .rz-column-series path:nth-child(7)  { animation-delay: 0.24s; }
#history-monthly-chart .rz-column-series path:nth-child(8)  { animation-delay: 0.28s; }
#history-monthly-chart .rz-column-series path:nth-child(9)  { animation-delay: 0.32s; }
#history-monthly-chart .rz-column-series path:nth-child(10) { animation-delay: 0.36s; }
#history-monthly-chart .rz-column-series path:nth-child(11) { animation-delay: 0.40s; }
#history-monthly-chart .rz-column-series path:nth-child(12) { animation-delay: 0.44s; }

/* Animazioni Distribuzione Aree (globali, referenziate dal CSS scoped di History.razor) */
@keyframes distRowFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes distBarFill {
	from { width: 0; }
}

/* ============================================
   TIPOGRAFIA BASE
   ============================================ */

h1 {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 5px;
	color: var(--text-dark);
}

.subtitle {
	color: var(--text-light);
	font-size: 14px;
	margin-bottom: 30px;
}

.home-header-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}

.home-header-row .org-selector {
	flex-shrink: 1;
	min-width: 0;
	padding-top: 4px;
	animation: fadeInRight 0.6s ease-out;
}

.home-header-row .org-selector .pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.home-header-row .org-selector .pill-btn {
	font-size: 12px;
	padding: 4px 12px;
}

/* ============================================
   GRIGLIA CORSI
   ============================================ */

.courses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	grid-auto-rows: 180px auto auto 1fr auto;
	gap: 0 25px;
}

/* ============================================
   HERO BANNER (Corsi obbligatori, PDF, etc.)
   ============================================ */

.hero-banner {
	color: var(--white);
	padding: 30px;
	border-radius: var(--border-radius);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
	box-shadow: 0 4px 15px rgba(20, 51, 106, 0.2);
	background: var(--primary-gradient) !important;
	background-color: var(--primary-color) !important;
	animation: fadeInUp 1s ease-out;
}

.hero-banner h2 {
	font-weight: bold;
}

.hero-banner .hero-content {
	display: flex;
	align-items: center;
	gap: 20px;
}

.hero-banner .hero-content h2 {
	font-size: 22px;
	margin-bottom: 5px;
}

.hero-banner .hero-content p {
	font-size: 14px;
	opacity: 0.9;
}

.hero-banner .hero-icon-box {
	background: rgba(255,255,255,0.2);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.hero-banner .hero-icon-box,
.hero-banner .hero-icon-box i {
	color: var(--white);
}

.hero-banner .hero-btn {
	padding: 12px 24px;
	border-radius: 30px;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	transition: opacity 0.3s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none !important;
	background: var(--white) !important;
	color: var(--primary-color) !important;
	cursor: pointer;
}

.hero-banner .hero-btn i {
	color: var(--primary-color) !important;
}

.hero-banner a,
.hero-banner a i {
	color: var(--primary-color);
}

@media (max-width: 576px) {
	.hero-banner {
		flex-direction: column;
		text-align: center;
		gap: 20px;
	}

	.hero-banner .hero-content {
		flex-direction: column;
	}
}

/* ============================================
   SECTION HEADER
   ============================================ */

.section-header {
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.section-header .section-title {
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
}

	.section-header .section-title i {
		color: #ffc107;
		/* color: var(--primary-color);
		font-size: xx-large
		*/
	}

.section-header .section-desc {
	font-size: 14px;
	color: var(--text-light);
	margin-top: 5px;
	margin-bottom: 0px;
}

.section-header .view-all {
	font-size: 13px;
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 600;
}

/* ============================================
   STATS GRID (Riepilogo numeretti)
   ============================================ */

.stats-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin-bottom: 30px;
	animation: fadeInUp 1s ease-out;
}

@media (max-width: 768px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.stats-grid > :nth-child(3) {
		grid-column: span 2;
	}
}

.stats-grid .stat-card {
	background: var(--white);
	padding: 20px;
	border-radius: var(--border-radius);
	text-align: center;
	box-shadow: 0 2px 5px rgba(0,0,0,0.03);
	transition: transform 0.2s;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.stats-grid .stat-card:hover {
	transform: translateY(-5px);
	text-decoration: none;
}

.stats-grid .stat-icon {
	font-size: 24px;
}

.stats-grid .stat-icon,
.stats-grid .stat-icon i {
	color: var(--primary-color);
}

.stats-grid .stat-number {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 5px;
}

.stats-grid .stat-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	color: var(--text-muted); /* era #999, da MOCKUP, WCAG AA */
	letter-spacing: 1px;
	font-weight: 600;
}

.stats-grid .stat-label.catalog-title {
	margin-top: 5px;
	font-weight: 700;
	font-size: 14px;
	color: var(--primary-color);
}

/* ============================================
   CATEGORIES GRID (Aree)
   ============================================ */

.categories-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}

@media (max-width: 992px) {
	.categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.categories-grid {
		grid-template-columns: 1fr;
	}
}

.categories-grid .category-card {
	height: 180px;
	border-radius: 12px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background-size: cover;
	background-position: center;
	transition: transform 0.2s;
	opacity: 0;
	animation: slideDown 0.5s ease-out forwards;
}

.categories-grid .category-card .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.categories-grid .category-card .cat-title {
	color: white;
	font-size: 18px;
	font-weight: 700;
}

.categories-grid .category-card .area-admin-icon {
	position: absolute;
	top: 10px;
	right: 10px;
	color: white;
	font-size: 14px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	opacity: 0.8;
	transition: opacity 0.2s, background 0.2s;
	text-decoration: none;
}

.categories-grid .category-card .area-admin-icon:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.55);
}

.categories-grid .category-card:nth-child(1) { animation-delay: 0.02s; }
.categories-grid .category-card:nth-child(2) { animation-delay: 0.04s; }
.categories-grid .category-card:nth-child(3) { animation-delay: 0.06s; }
.categories-grid .category-card:nth-child(4) { animation-delay: 0.08s; }
.categories-grid .category-card:nth-child(5) { animation-delay: 0.10s; }
.categories-grid .category-card:nth-child(n+5) { animation-delay: 0.12s; }

/* ============================================
   SEARCH & FILTERS (Catalog)
   ============================================ */

.search-container {
	position: relative;
	margin-bottom: 30px;
}

.search-input {
	width: 100%;
	padding: 15px 45px;
	border-radius: 30px;
	border: 1px solid #ddd;
	font-size: 14px;
	outline: none;
	box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

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

/* Category Filters */
.cat-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 15px;
	margin-bottom: 30px;
}

@media (max-width: 576px) {
	.cat-filters {
		grid-template-columns: 1fr;
	}
}

.cat-btn {
	background: var(--white);
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 15px;
	text-align: center;
	cursor: pointer;
	transition: 0.2s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cat-btn:hover,
.cat-btn.active {
	border-color: var(--primary-color);
	transform: translateY(-3px);
	box-shadow: 0 5px 10px rgba(181, 36, 69, 0.1);
}

.cat-icon {
	font-size: 20px;
}

.cat-label {
	font-size: 12px;
	font-weight: 600;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Stili attivi/inattivi per cat-btn e cat-icon */
.catalog-banner,
.progress-bar-fill,
.pill-btn.active,
.cat-btn.active,
.cat-btn.active .cat-icon {
	background: var(--primary-gradient) !important;
	background-color: var(--primary-color) !important;
	color: var(--white) !important;
}

.cat-btn .cat-icon {
	background: transparent !important;
	color: var(--primary-color) !important;
}

.cat-btn.active .cat-icon {
	background: transparent !important;
	color: var(--white) !important;
}

/* Type Pills */
.type-filters {
	display: flex;
	gap: 10px;
	margin-bottom: 30px;
	flex-wrap: wrap;
	align-items: center;
}

.filter-label {
	font-size: 11px;
	font-weight: 700;
	color: #6e6e6e; /* era #999, da MOCKUP — scurito per WCAG AA 4.5:1 anche su sfondo #f4f6f9 */
	text-transform: uppercase;
	margin-right: 10px;
}

.pill-btn {
	padding: 6px 16px;
	border-radius: 20px;
	border: 1px solid #ddd;
	background: var(--white);
	font-size: 13px;
	cursor: pointer;
	color: #555;
	transition: 0.2s;
}
	/*Originale*/
	/*.pill-btn.disabled {
		color: #767676;*/ /* WCAG AA: 4.5:1 su bianco (era #555 con opacity 0.4) */
		/*border-color: #ccc;
		cursor: default;
		pointer-events: none;
	}*/


	.pill.disabled,
	.pill-btn.disabled {
		background-color: #f9f9f9; /* Un grigio chiarissimo per dare corpo */
		color: #999; /* Grigio medio: leggibile ma chiaramente inattivo */
		border-color: #eee; /* Bordo più chiaro dell'originale (#ddd) */
		/* Feedback utente — click bloccato in C# (filterMethod) */
		cursor: not-allowed; /* Mostra il simbolo di divieto */
		/* Rimuove eventuali effetti hover che potresti avere sulla classe base */
		box-shadow: none;
		transform: none;
	}

	/*Fix*/
	.pill.disabled,
	.pill-btn.disabled {
		color: #777;
		background-color: #f2f2f2;
	}
	
	/* ============================================
	PROGRESS BAR (comune)
   ============================================ */

		.progress-bar-bg {
			height: 4px;
			background: #eee;
			border-radius: 2px;
			margin-bottom: 10px;
			overflow: hidden;
		}

.progress-text {
	font-size: 11px;
	color: #666;
	display: flex;
	justify-content: space-between;
	margin-top: -10px;
}

.progress-bar-bg .progress-bar-fill {
	height: 4px;
}

/* ============================================
   CARD BUTTONS
   ============================================ */

.card-btn {
	width: 100%;
	padding: 10px;
	border-radius: 6px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: 0.2s;
}

.btn-start,
.btn-start i {
	color: var(--primary-color) !important;
}

.btn-start i {
	font-size: 10px;
}

/* Link testuali - stesso stile di btn-enroll */
.btn-start {
	display: block;
	background: var(--white) !important;
	color: var(--primary-color) !important;
	border: 1px solid var(--primary-color) !important;
	font-weight: 700;
	text-decoration: none;
}

	.btn-start i {
		color: var(--primary-color) !important;
	}

	.btn-start:hover {
		background-color: var(--accent-bg) !important;
	}

.btn-start:hover {
	text-decoration: none;
}

/* btn-start dentro hero-content: inline, padding, bordi arrotondati */
.hero-content .hero-btn-wrapper {
	text-align: right;
	margin-top: 15px;
}

.hero-content .btn-start {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 6px;
}

.hero-content .btn-start i {
	font-size: 12px;
}

/* ============================================
   LINK GROUP (Library)
   ============================================ */

.linkgroup .library-box {
	background: var(--white);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #eee;
	cursor: pointer;
	transition: 0.2s;
	text-decoration: none;
}

.linkgroup .library-box:hover {
	border-color: var(--primary-color);
}

.linkgroup .library-box i {
	color: #ccc;
}

.linkgroup .library-box .library-text {
	font-weight: 700;
}

.linkgroup .library-box .library-subtitle {
	font-size: 12px;
	color: var(--text-secondary); /* era #888, da MOCKUP, WCAG AA */
}

.linkgroup .library-box .lib-left {
	display: flex;
	align-items: center;
	gap: 15px;
}

.linkgroup .library-box .lib-icon {
	width: 40px;
	height: 40px;
	background: var(--accent-bg);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.linkgroup .library-box .lib-icon,
.linkgroup .library-box .lib-icon i {
	color: var(--primary-color);
}

/* ============================================
   AREA CONTAINER
   ============================================ */

.area-container {
	background: var(--white);
	border: 1px solid var(--primary-color) !important;
	border-radius: var(--border-radius);
	animation: fadeInUp 1s ease-out;
}

.area-container .area-header {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.area-container .area-header .btn {
	font-size: 16px;
}

.area-container .area-footer {
	color: var(--primary-color);
}

/* ============================================
   SUGGESTED (Corsi consigliati)
   ============================================ */

.suggested {
	animation: fadeInUp 1s ease-out;
}

/* ============================================
   MODAL
   ============================================ */

.modal {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100% !important;
	background: #0005;
	z-index: 9999;
}

.modal-dialog {
	max-width: 400px;
	margin-top: 15vh;
}

.modal-content {
	width: 400px;
	border: 1px solid var(--primary-color) !important;
	border-radius: var(--border-radius);
}

.modal-header {
	border-color: var(--primary-color);
}

.modal-title {
	color: var(--primary-color);
}

@media (min-width: 576px) {
	.modal-dialog {
		max-width: 500px;
	}

	.modal-content {
		width: 500px;
	}
}

@media (min-width: 768px) {
	.modal-dialog {
		max-width: 700px;
	}

	.modal-content {
		width: 700px;
	}
}

@media (min-width: 992px) {
	.modal-dialog {
		max-width: 900px;
	}

	.modal-content {
		width: 900px;
	}
}

@media (min-width: 1560px) {
	.modal-dialog {
		max-width: 1200px;
	}

	.modal-content {
		width: 1200px;
	}
}


/* ============================================
   Subscription Modal
   ============================================ */

.modal.subscription .modal-content {
	background: var(--white);
	border: 1px solid var(--primary-color) !important;
	border-radius: var(--border-radius);
	animation: fadeInUp 1s ease-out;
}


	.modal.subscription .modal-content .modal-header {
		color: var(--primary-color);
		border-color: var(--primary-color);
	}

		.modal.subscription .modal-content .modal-header .btn {
			font-size: 16px;
		}

	.modal.subscription .modal-content .modal-footer {
		color: var(--primary-color);
	}




/* ============================================
   CALENDARIO - Header e Filtri
   ============================================ */

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 15px;
}

.page-header h1 {
	margin-bottom: 5px;
}

.page-header .subtitle {
	margin-bottom: 0;
}

.calendar-filters {
	display: flex;
	gap: 10px;
	background: white;
	padding: 5px;
	border-radius: 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	flex-wrap: wrap;
}

.filter-btn {
	border: none;
	background: transparent;
	padding: 8px 16px;
	border-radius: 15px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-light);
	cursor: pointer;
	transition: 0.2s;
	display: flex;
	align-items: center;
	gap: 5px;
}

	.filter-btn:hover,
	.filter-btn:hover i {
		color: var(--primary-color);
	}

.filter-btn.active {
	background: var(--primary-gradient) !important;
	background-color: var(--primary-color) !important;
	color: white !important;
}

.filter-btn.active i {
	color: white !important;
}

/* ============================================
   CALENDARIO - Elenco Eventi
   ============================================ */

.calendar-container {
	background: var(--white);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.03);
	overflow: hidden;
	margin-bottom: 40px;
}

/* Nasconde la nav nativa dello scheduler (sostituita da calendar-nav custom) */
.calendar-container .rz-scheduler-nav {
	display: none !important;
}

/* Navigazione custom calendario: [<] DatePicker mese/anno [>] [Oggi] */
.calendar-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.calendar-nav-btn {
	background: none;
	border: 1px solid transparent;
	color: #6e6e6e;
	font-size: 14px;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 6px;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	display: flex;
	align-items: center;
	gap: 4px;
}

.calendar-nav-btn:hover {
	background-color: var(--accent-bg);
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.calendar-nav-btn i {
	font-size: 12px;
	color: inherit;
}

.calendar-nav-today {
	margin-left: 12px;
	border: 1px solid var(--border-color, #e5e7eb);
	font-weight: 500;
}

/* Picker mese/anno custom */
.month-picker-wrapper {
	position: relative;
}

.month-picker-trigger {
	background: none;
	border: none;
	font-size: 18px;
	font-weight: 700;
	text-transform: capitalize;
	cursor: pointer;
	color: var(--text-dark);
	padding: 6px 12px;
	border-radius: 6px;
	transition: background-color 0.2s, color 0.2s;
	display: flex;
	align-items: center;
	gap: 8px;
}

.month-picker-trigger:hover {
	background-color: var(--accent-bg);
	color: var(--primary-color);
}

.month-picker-trigger i {
	font-size: 12px;
	color: inherit;
}

/* Overlay trasparente per chiudere il picker cliccando fuori */
.month-picker-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
}

/* Pannello dropdown con griglia mesi */
.month-picker-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 8px;
	background: var(--white, #fff);
	border: 1px solid var(--border-color, #e5e7eb);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	padding: 12px;
	z-index: 100;
	min-width: 240px;
}

/* Riga anno: [<] 2026 [>] */
.month-picker-year-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.month-picker-year {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-dark);
	min-width: 60px;
	text-align: center;
}

.month-picker-year-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: #6e6e6e;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background-color 0.2s, color 0.2s;
}

.month-picker-year-btn:hover {
	background-color: var(--accent-bg);
	color: var(--primary-color);
}

.month-picker-year-btn i {
	font-size: 11px;
	color: inherit;
}

/* Griglia 4x3 mesi */
.month-picker-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}

.month-picker-cell {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 4px;
	border-radius: 6px;
	font-size: 13px;
	text-transform: capitalize;
	color: var(--text-dark);
	transition: background-color 0.15s, color 0.15s;
}

.month-picker-cell:hover {
	background-color: var(--accent-bg);
	color: var(--primary-color);
}

.month-picker-cell.active {
	background-color: var(--primary-color);
	color: #fff;
	font-weight: 600;
}

/* Stili eventi RadzenScheduler */
.calendar-container .rz-event,
.calendar-container .rz-scheduler-event {
	background: var(--accent-bg) !important;
	background-color: var(--accent-bg) !important;
	color: var(--primary-color) !important;
	border-left: 3px solid var(--primary-color) !important;
	border-right: 1px solid white !important;
	border-bottom: 1px solid white !important;
	border-radius: 4px;
	box-sizing: border-box !important;
}

/* Nav nativa nascosta — stili legacy mantenuti per riferimento */

.calendar-container .rz-event-content {
	background: var(--accent-bg) !important;
	background-color: var(--accent-bg) !important;
	color: var(--primary-color) !important;
	border-left: none !important;
}

.calendar-container .rz-event *,
.calendar-container .rz-scheduler-event *,
.calendar-container .rz-event-content * {
	color: var(--primary-color) !important;
}

/* Colori eventi calendario per tipo (via span.evt-* nel Template) */
.calendar-container .rz-event:has(.evt-webinar),
.calendar-container .rz-event:has(.evt-webinar) .rz-event-content {
	background: var(--event-webinar-bg, #fff0f3) !important;
	background-color: var(--event-webinar-bg, #fff0f3) !important;
	border-left-color: var(--event-webinar-color, #c2185b) !important;
}
.calendar-container .rz-event:has(.evt-webinar) *  { color: var(--event-webinar-color, #c2185b) !important; }

.calendar-container .rz-event:has(.evt-aula),
.calendar-container .rz-event:has(.evt-aula) .rz-event-content {
	background: var(--event-aula-bg, #e8f5e9) !important;
	background-color: var(--event-aula-bg, #e8f5e9) !important;
	border-left-color: var(--event-aula-color, #256b28) !important;
}
.calendar-container .rz-event:has(.evt-aula) * { color: var(--event-aula-color, #256b28) !important; }

.calendar-container .rz-event:has(.evt-o2o),
.calendar-container .rz-event:has(.evt-o2o) .rz-event-content {
	background: var(--event-o2o-bg, #e3f2fd) !important;
	background-color: var(--event-o2o-bg, #e3f2fd) !important;
	border-left-color: var(--event-o2o-color, #1565c0) !important;
}
.calendar-container .rz-event:has(.evt-o2o) * { color: var(--event-o2o-color, #1565c0) !important; }

/* WCAG AA: intestazioni giorni settimana — Radzen usa #8d8e90 su #f4f5f9 (3.0:1) */
.calendar-container .rz-slot-header {
	color: #6e6e6e !important; /* 4.69:1 su #f4f5f9 — var(--text-secondary) era 4.16:1 */
}

.calendar-container .rz-event:hover,
.calendar-container .rz-scheduler-event:hover,
.calendar-container .rz-event-content:hover {
	background: var(--accent-bg) !important;
	background-color: var(--accent-bg) !important;
	filter: brightness(0.95);
}

.list-section-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
	margin-top: 30px;
}

/* Barra navigazione mesi — sostituita da calendar-nav con DatePicker */

/* Eventi fuori dal mese corrente (overflow calendario) */
.event-card.event-muted {
	opacity: 0.5;
	transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.event-card.event-muted:hover {
	opacity: 0.8;
}

.event-card {
	background: var(--white);
	border-radius: 12px;
	padding: 20px;
	padding-right: 0;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	margin-bottom: 15px;
	border: 1px solid var(--border-color);
	transition: transform 0.2s, box-shadow 0.2s;
}

.event-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.event-card.highlight {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px var(--accent-bg), 0 5px 15px rgba(181, 36, 69, 0.2);
	animation: pulse-highlight 0.5s ease-in-out;
}

@keyframes pulse-highlight {
	0% { transform: scale(1); }
	50% { transform: scale(1.02); }
	100% { transform: scale(1); }
}

.event-card .date-box {
	background: #f4f6f9;
	padding: 10px 15px;
	border-radius: 8px;
	text-align: center;
	min-width: 70px;
	margin-right: 20px;
	align-self: center;
	border: 1px solid var(--primary-color);
	cursor: pointer;
	transition: background-color 0.2s;
}

.event-card .date-box:hover {
	background: var(--accent-bg);
}

.event-card .date-day {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 2px;
	color: var(--primary-color);
}

.event-card .date-month {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: #6e6e6e; /* era #888, da MOCKUP, WCAG AA — 4.69:1 su #f4f6f9 */
}

.event-card .event-details {
	flex-grow: 1;
	align-self: center;
}

.event-card .event-tags {
	display: flex;
	gap: 10px;
	margin-bottom: 6px;
}

.event-card .tag {
	font-size: 10px;
	padding: 3px 8px;
	border-radius: 4px;
	font-weight: 700;
	text-transform: uppercase;
}

	.event-card .tag.webinar,
	.event-card .tag.webinar i {
		background: var(--event-webinar-bg, #fff0f3);
		color: var(--event-webinar-color, #c2185b);
	}

	.event-card .tag.aula,
	.event-card .tag.aula i {
		background: var(--event-aula-bg, #e8f5e9);
		color: var(--event-aula-color, #256b28);
	}

	.event-card .tag.o2o,
	.event-card .tag.o2o i {
		background: var(--event-o2o-bg, #e3f2fd);
		color: var(--event-o2o-color, #1565c0);
	}

.event-card .event-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 4px;
}

.event-card .event-meta {
	font-size: 12px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 15px;
}

.event-card .event-meta i {
	margin-right: 5px;
}

.event-card .event-arrow {
	color: #ccc;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	width: 5vw;
	max-width: 80px;
	border-left: 1px solid var(--border-color);
	margin-left: 15px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
	border-radius: 0 12px 12px 0;
}

.event-card .event-arrow:hover {
	background-color: var(--accent-bg);
	color: var(--primary-color);
}

.no-events-message {
	background: var(--white);
	border-radius: 12px;
	padding: 40px;
	text-align: center;
	color: var(--text-light);
	border: 1px solid var(--border-color);
}

/* ============================================
   MODAL EVENTI OGGI
   ============================================ */

@keyframes slideUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Overlay con blur */
.modal.subscription {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	display: flex !important;
	justify-content: center;
	align-items: center;
}

/* Dialog centrato */
.modal.subscription .modal-dialog {
	margin: 0;
	max-width: 600px;
	width: 90%;
}

/* Container principale */
.modal.subscription .modal-content {
	width: 100%;
	border: none !important;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	animation: slideUp 0.3s ease-out;
}

/* Header con gradiente */
.modal-dialog .modal-header,
.modal.subscription .modal-header {
	background: var(--primary-gradient);
	background-color: var(--primary-color);
	padding: 20px 25px;
	border: none;
	border-radius: 0;
}

.modal-dialog .modal-header .modal-title,
.modal.subscription .modal-header .modal-title {
	color: white;
	font-size: 20px;
	font-weight: 700;
}

.modal.subscription .modal-header .modal-subtitle {
	color: white;
	font-size: 13px;
	opacity: 0.9;
	margin-top: 5px;
}

/* Pulsante close rotondo */
.modal.subscription .modal-header .close,
.modal.subscription .modal-header button.close {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.2s;
	opacity: 1;
	padding: 0;
	margin: 0;
	font-size: 20px;
	line-height: 1;
}

.modal.subscription .modal-header .close:hover,
.modal.subscription .modal-header button.close:hover {
	background: rgba(255, 255, 255, 0.4);
	opacity: 1;
}

.modal.subscription .modal-header .close span {
	color: white;
}

/* Body con padding e scroll */
.modal.subscription .modal-body {
	padding: 25px;
	max-height: 70vh;
	overflow-y: auto;
}

/* Section label nel body */
.modal.subscription .section-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-muted); /* era #999, da MOCKUP, WCAG AA */
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Event row → stili in EventAlertItem.razor.css + Home.css (EVENT ALERT ITEM - TEMA) */

/* Pulsante join/azione */
.modal.subscription .btn-join {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
	background: var(--white);
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	transition: all 0.2s;
}

.modal.subscription .btn-join i {
	margin-left: 6px;
	color: inherit;
}

.modal.subscription .btn-join:hover {
	background-color: var(--accent-bg);
}

/* Footer con sfondo grigio */
.modal.subscription .modal-footer {
	padding: 15px 25px;
	border-top: 1px solid #eee;
	background: #f9f9f9;
}

.modal.subscription .modal-footer .btn-secondary,
.modal.subscription .modal-footer .btn-close-modal {
	background: transparent;
	border: 1px solid #ccc;
	padding: 8px 20px;
	border-radius: 6px;
	color: #666;
	font-weight: 600;
	cursor: pointer;
}

.modal.subscription .modal-footer .btn-secondary:hover,
.modal.subscription .modal-footer .btn-close-modal:hover {
	background: #eee;
}


/* ============================================
   COMMUNITY TILE - TEMA
   ============================================ */

.btn-enroll,
.btn-download-pdf {
	background: var(--white) !important;
	color: var(--primary-color) !important;
	border: 1px solid var(--primary-color) !important;
}

.btn-enroll i,
.btn-download-pdf i {
	color: var(--primary-color) !important;
}

.btn-enroll:hover,
.btn-download-pdf:hover {
	background-color: var(--accent-bg) !important;
}

.course-card {
	background: var(--white);
	box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.course-card:hover {
	box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.card-footer {
	background-color: #fff;
}

.card-meta {
	color: var(--text-muted); /* era #999, da MOCKUP, WCAG AA */
}

.card-title {
	color: var(--text-dark);
}

.card-desc {
	color: var(--text-light);
}

.cert-container .cert-tag,
.cert-container .cert-tag i {
	background: var(--warning-bg);
	color: var(--warning);
}

.btn-download,
.btn-download i {
	color: var(--primary-color);
}

.btn-download:hover {
	background-color: var(--accent-bg);
}

.alert-box .alert-box-info .alert-box-label {
	color: #666;
}

.alert-box .alert-box-info .alert-box-date {
	color: var(--text-dark);
}

.alert-box.deadline {
	background-color: var(--accent-bg) !important;
}

.alert-box.deadline i {
	color: var(--primary-color) !important;
}

.alert-box.calendar {
	background-color: var(--info-bg) !important;
}

.alert-box.calendar i {
	color: var(--info) !important;
}

.alert-box.calendar.warning {
	background-color: var(--warning-bg) !important;
}

.alert-box.calendar.warning i {
	color: var(--warning) !important;
}

.alert-box.calendar.webinar {
	background-color: var(--event-webinar-bg, #fff0f3) !important;
}

.alert-box.calendar.webinar i {
	color: var(--event-webinar-color, #c2185b) !important;
}

.alert-box.calendar.aula {
	background-color: var(--event-aula-bg, #e8f5e9) !important;
}

.alert-box.calendar.aula i {
	color: var(--event-aula-color, #256b28) !important;
}

.alert-box.calendar.o2o {
	background-color: var(--event-o2o-bg, #e3f2fd) !important;
}

.alert-box.calendar.o2o i {
	color: var(--event-o2o-color, #1565c0) !important;
}

.alert-box.loading {
	background-color: var(--info-bg) !important;
}

.alert-box.loading i {
	color: var(--info) !important;
}

.badge-container .badge {
	background: rgba(255,255,255,0.95);
	color: #333;
}

.badge-container .badge.mandatory,
.badge-container .badge.mandatory i {
	background: var(--primary-color) !important;
	color: white !important;
}

.badge-container .badge.info,
.badge-container .badge.info i {
	background: var(--info-bg) !important;
	color: #0e7490 !important; /* era var(--info) #17a2b8 su #effcff → 2.73:1, scurito per WCAG AA 4.5:1 */
}

.badge-container .badge.success,
.badge-container .badge.success i {
	color: var(--success);
	background: var(--success-bg);
}

ul.certificates a {
	color: var(--text-dark);
}

ul.certificates a:hover {
	background-color: var(--accent-bg);
}

ul.certificates a i {
	color: var(--primary-color);
}


/* ============================================
   UNFINISHED - TEMA
   ============================================ */

.hero-course {
	background: var(--white);
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.hero-badge {
	background: rgba(255,255,255,0.9);
	color: #333;
}

.hero-meta {
	color: var(--text-secondary); /* era #888, da MOCKUP, WCAG AA */
}

.hero-title {
	color: var(--primary-color);
}

.hero-desc {
	color: var(--text-light);
}

.progress-labels {
	color: #666;
}

.filters-container {
	background: var(--white);
	box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.search-icon {
	color: #aaa;
}

.pill {
	border-color: #ddd;
	background: white;
	color: #555;
}

.pill.active {
	background: var(--primary-gradient) !important;
	background-color: var(--primary-color) !important;
	color: white !important;
	border-color: var(--primary-color) !important;
}

.filter-label {
	color: #6e6e6e; /* era #999, da MOCKUP — scurito per WCAG AA 4.5:1 anche su sfondo #f4f6f9 */
}


/* ============================================
   HISTORY - TEMA
   ============================================ */

.search-box {
	background: var(--white);
	border-color: #ddd;
	color: var(--text-dark);
}


.search-box i {
	color: #ccc;
}

.stats-grid .stat-icon.icon-blue {
	background: var(--accent-bg, #fff0f3);
	color: var(--primary-color);
}

.stats-grid .stat-icon.icon-orange {
	background: #fff5e6;
	color: #fd7e14;
}

.stats-grid .stat-icon.icon-green {
	background: #e6f9ea;
	color: var(--success, #28a745);
}

.stats-grid .stat-info h4 {
	color: var(--text-muted); /* era #999, da MOCKUP, WCAG AA */
}

.charts-container .chart-card {
	background: var(--white, #ffffff);
	box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.charts-container .chart-header i {
	color: var(--primary-color, #b52445);
}

.charts-container .dist-bar-bg {
	background: #eee;
}

.charts-container .dist-bar-fill {
	background: var(--primary-color, #b52445);
}

.charts-container .dist-value {
	color: var(--text-muted); /* era #999, da MOCKUP, WCAG AA */
}

.charts-container .dist-row {
	border-bottom: 1px solid #f9f9f9;
}


/* ============================================
   EVENT ALERT ITEM - TEMA
   ============================================ */

.event-row {
	border: 1px solid #eee;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.event-row:hover {
	border-color: var(--primary-color);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.event-icon-box {
	background: var(--accent-bg);
	color: var(--primary-color);
}

.event-icon-box i {
	color: inherit;
}

.event-icon-box.webinar {
	background: var(--event-webinar-bg, #fff0f3);
	color: var(--event-webinar-color, #c2185b);
}

.event-icon-box.aula {
	background: var(--event-aula-bg, #e8f5e9);
	color: var(--event-aula-color, #256b28);
}

.event-icon-box.o2o {
	background: var(--event-o2o-bg, #e3f2fd);
	color: var(--event-o2o-color, #1565c0);
}

.event-info h4 {
	color: var(--text-dark);
}

.event-info span {
	color: var(--text-light);
}

.event-time {
	color: var(--primary-color);
}


/* ============================================
   PROFILE - TEMA
   Layout → Profile.razor.css (scoped)
   ============================================ */

.profile-header-card {
	background: var(--white, #ffffff);
	box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.profile-avatar-large {
	border: 4px solid #f8f9fa;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.profile-avatar-initials {
	background: var(--primary-color, #b52445);
	color: #fff;
}

.profile-details h1 {
	color: var(--primary-color);
}

.profile-details p {
	color: var(--text-light);
}

.tag-pill {
	background: #f0f2f5;
	color: #555;
}
/* FA icons: forzare ereditarietà color dal parent */
.tag-pill i,
.kpi-icon-wrapper i,
.cert-icon-box i,
.btn-settings i,
.btn-logout i,
.btn-download i { color: inherit; }

.kpi-card {
	background: var(--white, #ffffff);
	box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.kpi-value {
	color: var(--text-dark);
}

.kpi-label {
	color: var(--text-light);
}

.kpi-icon-wrapper.icon-blue {
	background: var(--accent-bg, #fff0f3);
	color: var(--primary-color);
}

.kpi-icon-wrapper.icon-orange {
	background: #fff8e1;
	color: #f57f17;
}

.kpi-icon-wrapper.icon-red {
	background: #ffebee;
	color: #c62828;
}

.kpi-icon-wrapper.icon-green {
	background: #e6f9ea;
	color: var(--success, #28a745);
}

.trend-badge {
	background: #e6f9ea;
	color: var(--success, #28a745);
}

.chart-section {
	background: var(--white, #ffffff);
	box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* DDL - TEMA (CustomDdl.razor) */
.ddl-trigger {
	background: var(--white, #ffffff);
	border-color: #eee;
	color: var(--text-dark);
}

.ddl-trigger:hover {
	border-color: #ccc;
}

.ddl-panel {
	background: var(--white, #ffffff);
	border-color: #eee;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.ddl-option {
	color: var(--text-dark);
}

.ddl-option:hover {
	background: #f5f5f5;
}

.ddl-option.active {
	background: var(--accent-bg, #fff0f3);
	color: var(--primary-color);
	font-weight: 600;
}

.badge-count {
	background: #fff3cd;
	color: #856404;
}

.cert-card {
	background: var(--white, #ffffff);
	border: 1px solid #eee;
}

.cert-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	border-color: #ddd;
}

.cert-icon-box {
	background: #fff8e1;
	color: #ffc107;
}

.cert-text h4,
.cert-text .cert-name {
	color: var(--text-dark);
	font-size: 1em;
	font-weight: 700;
	display: block;
}

.cert-text span {
	color: var(--text-muted); /* era #999, da MOCKUP, WCAG AA */
}

.btn-settings, .btn-logout {
	background: var(--white, #ffffff);
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

.btn-settings:hover, .btn-logout:hover {
	background-color: var(--accent-bg, #fff0f3);
	color: var(--primary-color);
	text-decoration: none;
}

.btn-download {
	color: var(--primary-color);
}

.btn-download:hover {
	color: var(--primary-color);
	text-decoration: none;
	opacity: 0.7;
}

.btn-download-disabled,
.btn-download-disabled i {
	color: #ccc;
	cursor: default;
	opacity: 0.5;
}