/* ===================================
   CRBL - Circolo Remiero Bodio Lomnago
   Nautical Classic Theme - Modern & Responsive
   Version 3.0
   =================================== */

:root {
	/* Nautical Classic Colors - Circolo Remiero */
	--color-navy: #002447;              /* Navy blue profondo */
	--color-navy-light: #003d73;        /* Navy chiaro */
	--color-marine: #004d99;            /* Blu marino */
	--color-azure: #0066cc;             /* Azzurro navigazione */
	--color-sky: #5BA3D0;               /* Azzurro cielo */
	--color-water: #87CEEB;             /* Azzurro acqua */
	
	--color-nautical-red: #C41E3A;      /* Rosso bandiera */
	--color-gold: #D4AF37;              /* Oro/ottone */
	--color-brass: #B8860B;             /* Ottone scuro */
	
	--color-sail-white: #F8F9FA;        /* Bianco vela */
	--color-pearl: #E8EAF0;             /* Bianco perlato */
	--color-sand: #F5F1E8;              /* Sabbia */
	
	/* Primary Palette */
	--color-primary: var(--color-navy);
	--color-primary-dark: var(--color-navy-light);
	--color-primary-light: var(--color-marine);
	--color-secondary: var(--color-azure);
	--color-accent: var(--color-gold);
	--color-accent-red: var(--color-nautical-red);
	
	/* Status Colors */
	--color-success: #2E7D32;           /* Verde scuro */
	--color-danger: var(--color-nautical-red);
	--color-warning: #F57C00;           /* Arancione */
	--color-info: var(--color-sky);
	
	/* Neutral Colors */
	--color-dark: #1a1a2e;
	--color-dark-blue: #16213e;
	--color-light: var(--color-sail-white);
	--color-gray: #6c757d;
	--color-gray-light: #ADB5BD;
	--color-white: #ffffff;
	
	/* Backgrounds */
	--bg-gradient-primary: linear-gradient(135deg, var(--color-navy) 0%, var(--color-marine) 100%);
	--bg-gradient-light: linear-gradient(135deg, var(--color-pearl) 0%, var(--color-sail-white) 100%);
	--bg-gradient-water: linear-gradient(135deg, var(--color-azure) 0%, var(--color-sky) 100%);
	
	/* Spacing - Responsive */
	--spacing-xs: 0.25rem;   /* 4px */
	--spacing-sm: 0.5rem;    /* 8px */
	--spacing-md: 1rem;      /* 16px */
	--spacing-lg: 1.5rem;    /* 24px */
	--spacing-xl: 2.5rem;    /* 40px */
	--spacing-xxl: 4rem;     /* 64px */
	
	/* Border Radius */
	--radius-sm: 0.375rem;   /* 6px */
	--radius-md: 0.75rem;    /* 12px */
	--radius-lg: 1.25rem;    /* 20px */
	--radius-xl: 2rem;       /* 32px */
	--radius-full: 50%;
	
	/* Shadows - Nautical Style */
	--shadow-sm: 0 2px 8px rgba(0, 36, 71, 0.08);
	--shadow-md: 0 4px 16px rgba(0, 36, 71, 0.12);
	--shadow-lg: 0 8px 24px rgba(0, 36, 71, 0.16);
	--shadow-xl: 0 12px 40px rgba(0, 36, 71, 0.2);
	--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
	
	/* Transitions */
	--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	
	/* Typography */
	--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-family-heading: 'Georgia', 'Times New Roman', serif;
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	
	/* Z-index */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
}

/* ===================================
   GLOBAL STYLES
   =================================== */

* {
	box-sizing: border-box;
}

body {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-normal);
	line-height: 1.6;
	color: var(--color-dark);
	background-color: var(--color-light);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	color: var(--color-navy);
	margin-bottom: var(--spacing-md);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* ===================================
   BACKGROUND STYLES - Nautical Theme
   =================================== */
/* ===================================
   BACKGROUND STYLES - Nautical Theme
   =================================== */

.bg-sfondo-login {
	background: var(--bg-gradient-primary);
	background-attachment: fixed;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

/* Nautical pattern overlay */
.bg-sfondo-login::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 10px,
			rgba(255, 255, 255, 0.02) 10px,
			rgba(255, 255, 255, 0.02) 20px
		);
	pointer-events: none;
}

.bg-nautical {
	background: var(--bg-gradient-primary);
}

.bg-water {
	background: var(--bg-gradient-water);
}

.bg-light-nautical {
	background: var(--bg-gradient-light);
}

/* ===================================
   UTILITIES
   =================================== */

#espandi_genitore i { 
	transition: transform var(--transition-base); 
}

.flip0 { transform: rotate(0deg); }
.flip90 { transform: rotate(90deg); }

.container_no_max_width { 
	max-width: none !important; 
}

/* ===================================
   CARDS - Modern Nautical Style
   =================================== */

.card {
	background: var(--color-white);
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	transition: all var(--transition-base);
	overflow: hidden;
	position: relative;
}

.card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--bg-gradient-water);
	opacity: 0;
	transition: opacity var(--transition-base);
}

.card:hover {
	box-shadow: var(--shadow-xl);
	transform: translateY(-4px);
}

.card:hover::before {
	opacity: 1;
}

.card-header { 
	background: var(--bg-gradient-primary);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	font-weight: var(--font-weight-semibold);
	padding: var(--spacing-lg);
	font-family: var(--font-family-heading);
	letter-spacing: 0.5px;
}

.card-body {
	padding: var(--spacing-lg);
}

.card-footer {
	background: var(--color-pearl);
	border-top: 1px solid rgba(0, 36, 71, 0.1);
	padding: var(--spacing-md) var(--spacing-lg);
}

/* ===================================
   BUTTONS - Nautical Style
   =================================== */

.btn {
	font-weight: var(--font-weight-medium);
	border-radius: var(--radius-md);
	padding: var(--spacing-sm) var(--spacing-lg);
	transition: all var(--transition-base);
	border: 2px solid transparent;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.875rem;
	position: relative;
	overflow: hidden;
}

.btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width var(--transition-slow), height var(--transition-slow);
}

.btn:hover::before {
	width: 300px;
	height: 300px;
}

.btn-primary,
.button-azzurro { 
	background: var(--bg-gradient-primary);
	border-color: var(--color-navy);
	color: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.button-azzurro:hover { 
	background: var(--color-navy-light);
	border-color: var(--color-navy-light);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.btn-secondary {
	background: var(--color-white);
	border-color: var(--color-navy);
	color: var(--color-navy);
}

.btn-secondary:hover {
	background: var(--color-navy);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.btn-gold {
	background: var(--color-gold);
	border-color: var(--color-brass);
	color: var(--color-white);
	box-shadow: var(--shadow-md);
}

.btn-gold:hover {
	background: var(--color-brass);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.btn:active {
	transform: translateY(0);
}

/* ===================================
   STATUS BACKGROUNDS
   =================================== */

.sfondo-rosso { 
	background: var(--color-danger);
	border-color: var(--color-danger);
	color: var(--color-white);
}

.sfondo-verde { 
	background: var(--color-success);
	border-color: var(--color-success);
	color: var(--color-white);
}

.sfondo-azzurro_tema { 
	background: var(--bg-gradient-water);
	border-color: var(--color-azure);
	color: var(--color-white);
}

.sfondo-giallo { 
	background: var(--color-warning);
	border-color: var(--color-warning);
	color: var(--color-white);
}

.sfondo-grigio { 
	background: var(--color-dark);
	border-color: var(--color-dark);
	color: var(--color-white);
}

.sfondo-azzurro-tenue { 
	background: var(--color-pearl);
}

/* ===================================
   TEXT COLORS
   =================================== */

.testo-azzurro-tema { 
	color: var(--color-navy);
	font-weight: var(--font-weight-semibold);
}

.text-navy { color: var(--color-navy); }
.text-gold { color: var(--color-gold); }
.text-marine { color: var(--color-marine); }

/* ===================================
   LINKS - Nautical Style
   =================================== */

a { 
	color: var(--color-navy);
	text-decoration: none;
	transition: all var(--transition-fast);
	position: relative;
}

a:hover { 
	color: var(--color-azure);
	text-decoration: none;
}

a.link-underline {
	padding-bottom: 2px;
}

a.link-underline::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-gold);
	transition: width var(--transition-base);
}

a.link-underline:hover::after {
	width: 100%;
}

/* ===================================
   LABELS & BADGES
   =================================== */

.etichetta {
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.badge {
	font-weight: var(--font-weight-medium);
	padding: 0.375rem 0.75rem;
	border-radius: var(--radius-full);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.badge-navy {
	background: var(--color-navy);
	color: var(--color-white);
}

.badge-gold {
	background: var(--color-gold);
	color: var(--color-white);
}

/* ===================================
   IMAGES - Nautical Style
   =================================== */

.foto-evento {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	transition: all var(--transition-base);
	border: 4px solid var(--color-white);
	position: relative;
}

.foto-evento::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 20px rgba(0, 36, 71, 0.1);
	pointer-events: none;
}

.foto-evento:hover {
	transform: scale(1.03) rotate(1deg);
	box-shadow: var(--shadow-xl);
}

.foto-gara {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	border: 3px solid var(--color-white);
	transition: all var(--transition-base);
}

.foto-gara:hover {
	transform: scale(1.05);
	box-shadow: var(--shadow-lg);
}

.foto_profilo { 
	width: 200px;
	height: 200px;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 6px solid var(--color-gold);
	box-shadow: var(--shadow-xl);
	position: relative;
	background: var(--color-pearl);
}

.foto_profilo::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: var(--radius-full);
	padding: 6px;
	background: var(--bg-gradient-water);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.foto_profilo_menu { 
	width: 60px;
	height: 60px;
	margin: var(--spacing-lg) auto;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 3px solid var(--color-white);
	box-shadow: var(--shadow-md);
	transition: all var(--transition-base);
}

.foto_profilo_menu:hover {
	transform: scale(1.1);
	border-color: var(--color-gold);
}

/* ===================================
   SHADOWS & BORDERS
   =================================== */

.box-shadow-10 { 
	box-shadow: var(--shadow-md);
}

.box-shadow-20 { 
	box-shadow: var(--shadow-xl);
}

.border-radius-3 {
	border-radius: var(--radius-sm);
}

.border-nautical {
	border: 2px solid var(--color-navy);
	border-radius: var(--radius-md);
}

.border-gold {
	border: 2px solid var(--color-gold);
	border-radius: var(--radius-md);
}

/* ===================================
   TYPOGRAPHY
   =================================== */

.titolo-evento { 
	font-size: 1.75rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
	margin-bottom: var(--spacing-lg);
	font-family: var(--font-family-heading);
	position: relative;
	padding-bottom: var(--spacing-md);
}

.titolo-evento::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80px;
	height: 4px;
	background: var(--color-gold);
	border-radius: 2px;
}

.border-style-solid { 
	border-style: solid;
}

/* ===================================
   NAVIGATION & MENU - Nautical
   =================================== */

.navbar {
	background: var(--bg-gradient-primary) !important;
	box-shadow: var(--shadow-lg);
	border-bottom: 3px solid var(--color-gold);
}

.navbar-brand img {
	transition: transform var(--transition-base);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.navbar-brand:hover img {
	transform: scale(1.05);
}

.sidebar {
	background: var(--color-dark-blue) !important;
	box-shadow: var(--shadow-xl);
}

.menu-link-attivo {
	background: var(--bg-gradient-water);
	border-radius: var(--radius-md);
	color: var(--color-white) !important;
	box-shadow: var(--shadow-md);
	border-left: 4px solid var(--color-gold);
	padding-left: calc(var(--spacing-md) - 4px) !important;
}

.dropdown-item {
	transition: all var(--transition-fast);
	border-radius: var(--radius-sm);
	margin: 2px 4px;
}

.dropdown-item.active { 
	background: var(--bg-gradient-water) !important;
	color: var(--color-white);
}

.dropdown-item:hover {
	background: var(--color-pearl);
	color: var(--color-navy);
	transform: translateX(4px);
}

.nav-link {
	transition: all var(--transition-base);
	border-radius: var(--radius-md);
	position: relative;
}

.nav-link:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateX(4px);
}

.nav-link i {
	margin-right: var(--spacing-sm);
	color: var(--color-gold);
}

/* ===================================
   FORMS - Modern Nautical
   =================================== */

.form-control {
	border: 2px solid var(--color-pearl);
	border-radius: var(--radius-md);
	padding: var(--spacing-sm) var(--spacing-md);
	transition: all var(--transition-base);
	font-size: 1rem;
}

.form-control:focus {
	border-color: var(--color-navy);
	box-shadow: 0 0 0 3px rgba(0, 36, 71, 0.1);
	outline: none;
}

.form-control::placeholder {
	color: var(--color-gray-light);
	font-style: italic;
}

.form-label {
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
	margin-bottom: var(--spacing-sm);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ===================================
   TABLES - Nautical Style
   =================================== */

.table {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.table thead th {
	background: var(--bg-gradient-primary);
	color: var(--color-white);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.875rem;
	border: none;
	padding: var(--spacing-md);
}

.table tbody tr {
	transition: all var(--transition-fast);
	border-bottom: 1px solid var(--color-pearl);
}

.table tbody tr:hover {
	background: var(--color-pearl);
	transform: scale(1.01);
}

.table tbody td {
	padding: var(--spacing-md);
	vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(0, 36, 71, 0.02);
}

/* ===================================
   MODALS & OVERLAYS
   =================================== */

.modal-content {
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	overflow: hidden;
}

.modal-header {
	background: var(--bg-gradient-primary);
	color: var(--color-white);
	border: none;
	padding: var(--spacing-lg);
}

.modal-title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-bold);
}

.modal-footer {
	border-top: 2px solid var(--color-pearl);
	padding: var(--spacing-md) var(--spacing-lg);
}

/* ===================================
   ALERTS & NOTIFICATIONS
   =================================== */

.alert {
	border: none;
	border-radius: var(--radius-md);
	border-left: 4px solid;
	padding: var(--spacing-md) var(--spacing-lg);
	box-shadow: var(--shadow-sm);
}

.alert-success {
	background: rgba(46, 125, 50, 0.1);
	border-left-color: var(--color-success);
	color: var(--color-success);
}

.alert-danger {
	background: rgba(196, 30, 58, 0.1);
	border-left-color: var(--color-danger);
	color: var(--color-danger);
}

.alert-warning {
	background: rgba(245, 124, 0, 0.1);
	border-left-color: var(--color-warning);
	color: var(--color-warning);
}

.alert-info {
	background: rgba(91, 163, 208, 0.1);
	border-left-color: var(--color-info);
	color: var(--color-info);
}

/* ===================================
   BREADCRUMBS
   =================================== */

.breadcrumb {
	background: var(--color-pearl);
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.breadcrumb-item + .breadcrumb-item::before {
	content: '›';
	color: var(--color-navy);
	font-weight: bold;
	font-size: 1.2rem;
}

.breadcrumb-item.active {
	color: var(--color-navy);
	font-weight: var(--font-weight-semibold);
}

/* ===================================
   PROGRESS BARS
   =================================== */

.progress {
	height: 1.5rem;
	border-radius: var(--radius-full);
	background: var(--color-pearl);
	box-shadow: var(--shadow-inner);
	overflow: hidden;
}

.progress-bar {
	background: var(--bg-gradient-water);
	transition: width var(--transition-slow);
	font-weight: var(--font-weight-semibold);
	box-shadow: 0 2px 4px rgba(0, 36, 71, 0.2);
}

.BarraAvanzamentoVerde {
	width: 1px;
	background: var(--color-success);
	height: 30px;
	transition: width var(--transition-slow);
}

/* ===================================
   PAGINATION
   =================================== */

.pagination {
	gap: var(--spacing-sm);
}

.page-link {
	color: var(--color-navy);
	border: 2px solid var(--color-pearl);
	border-radius: var(--radius-md);
	padding: var(--spacing-sm) var(--spacing-md);
	transition: all var(--transition-base);
	font-weight: var(--font-weight-medium);
	margin: 0 2px;
}

.page-link:hover {
	background: var(--bg-gradient-water);
	color: var(--color-white);
	border-color: var(--color-azure);
	transform: translateY(-2px);
}

.page-item.active .page-link {
	background: var(--bg-gradient-primary);
	border-color: var(--color-navy);
	color: var(--color-white);
	box-shadow: var(--shadow-md);
}

/* ===================================
   TOOLTIPS & POPOVERS
   =================================== */

.tooltip {
	z-index: var(--z-tooltip);
}

.tooltip-inner {
	background: var(--color-navy);
	border-radius: var(--radius-md);
	padding: var(--spacing-sm) var(--spacing-md);
	box-shadow: var(--shadow-lg);
}

/* ===================================
   LOADING & SPINNERS
   =================================== */

.spinner-border {
	border-color: var(--color-pearl);
	border-right-color: var(--color-navy);
}

.spinner-nautical {
	border: 4px solid var(--color-pearl);
	border-top-color: var(--color-navy);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ===================================
   UTILITIES - Modern Nautical
   =================================== */

.text-shadow {
	text-shadow: 2px 2px 4px rgba(0, 36, 71, 0.2);
}

.bg-pattern-waves {
	background-image: 
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 50px,
			rgba(255, 255, 255, 0.03) 50px,
			rgba(255, 255, 255, 0.03) 100px
		);
}

.divider-nautical {
	height: 2px;
	background: var(--bg-gradient-water);
	margin: var(--spacing-xl) 0;
	border-radius: 1px;
}

.section-header {
	position: relative;
	padding-bottom: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
}

.section-header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100px;
	height: 3px;
	background: var(--color-gold);
	border-radius: 2px;
}

/* ===================================
   ANIMATIONS
   =================================== */

.ButtonAnimato {
	animation-name: AnimazioneButton;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

@keyframes AnimazioneButton {
	0%    { opacity: 1; transform: scale(1); }
	10%   { opacity: 0.9; transform: scale(1.1); }
	50%   { opacity: 1; transform: scale(1); }
	95%   { opacity: 0; transform: scale(0.95); }
	100%  { opacity: 0; transform: scale(0.9); display: none; }
}

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

.fade-in {
	animation: fadeIn 0.6s ease-out;
}

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

.slide-in {
	animation: slideIn 0.5s ease-out;
}

/* ===================================
   SELECT & DROPDOWNS
   =================================== */
/* ===================================
   SELECT & DROPDOWNS
   =================================== */

select:not(.show-disabled-options) option:disabled { 
	display: none;
}

select.form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23002447' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px;
	padding-right: 2.5rem;
}

/* ===================================
   RESPONSIVE DESIGN - Enhanced
   =================================== */

/* Extra Small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
	:root {
		--spacing-xs: 0.25rem;
		--spacing-sm: 0.375rem;
		--spacing-md: 0.75rem;
		--spacing-lg: 1rem;
		--spacing-xl: 1.5rem;
	}
	
	h1 { font-size: 1.75rem !important; }
	h2 { font-size: 1.5rem !important; }
	h3 { font-size: 1.25rem !important; }
	h4 { font-size: 1.1rem !important; }
	
	.card {
		margin-bottom: var(--spacing-md);
		border-radius: var(--radius-md);
	}
	
	.card-header,
	.card-body,
	.card-footer {
		padding: var(--spacing-md);
	}
	
	.btn {
		width: 100%;
		margin-bottom: var(--spacing-sm);
	}
	
	.foto_profilo {
		width: 120px;
		height: 120px;
		border-width: 4px;
	}
	
	.navbar-brand img {
		max-height: 35px;
	}
	
	.table {
		font-size: 0.875rem;
	}
	
	.table thead th {
		padding: var(--spacing-sm);
		font-size: 0.75rem;
	}
	
	.table tbody td {
		padding: var(--spacing-sm);
	}
	
	/* Tabelle scrollabili su mobile */
	.table-responsive {
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-sm);
	}
	
	.sidebar {
		font-size: 0.875rem;
	}
	
	.foto-evento,
	.foto-gara {
		margin-bottom: var(--spacing-md);
	}
}

/* Mobile First - Small devices (phones, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
	:root {
		--spacing-md: 0.875rem;
		--spacing-lg: 1.25rem;
		--spacing-xl: 1.75rem;
	}
	
	h1 { font-size: 2rem !important; }
	h2 { font-size: 1.75rem !important; }
	h3 { font-size: 1.5rem !important; }

	.card {
		margin-bottom: var(--spacing-md);
	}
	
	.foto_profilo {
		width: 150px;
		height: 150px;
	}
	
	.navbar-brand img {
		max-height: 40px;
	}
	
	.btn {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: 0.875rem;
	}
}

/* Medium devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
	h1 { font-size: 2.25rem !important; }
	h2 { font-size: 2rem !important; }
	h3 { font-size: 1.75rem !important; }
	
	.foto_profilo {
		width: 175px;
		height: 175px;
	}
	
	.navbar-brand img {
		max-height: 45px;
	}
	
	.container {
		max-width: 720px;
	}
	
	.card-body {
		padding: var(--spacing-lg);
	}
}

/* Large devices (desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.container {
		max-width: 960px;
	}
	
	.foto_profilo {
		width: 200px;
		height: 200px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
	
	h1 { font-size: 3rem; }
	h2 { font-size: 2.5rem; }
	
	.card-header,
	.card-body,
	.card-footer {
		padding: var(--spacing-xl);
	}
}

/* XXL devices (1400px and up) */
@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}
}

/* Landscape orientation optimizations */
@media (max-height: 600px) and (orientation: landscape) {
	.navbar {
		padding: 0.25rem 1rem;
	}
	
	.sidebar {
		font-size: 0.875rem;
	}
	
	.foto_profilo_menu {
		width: 45px;
		height: 45px;
	}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
	.btn,
	.nav-link,
	.dropdown-item {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	
	.card:hover {
		transform: none;
	}
	
	a:hover::after {
		width: 0;
	}
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.foto-evento,
	.foto-gara,
	.foto_profilo {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}

/* Print styles */
@media print {
	:root {
		--color-navy: #000;
		--color-gold: #666;
	}
	
	.navbar,
	.sidebar,
	.no-print,
	.btn,
	.dropdown,
	.nav {
		display: none !important;
	}
	
	.card {
		box-shadow: none;
		border: 1px solid #ddd;
		page-break-inside: avoid;
	}
	
	.card-header {
		background: #f0f0f0 !important;
		color: #000 !important;
	}
	
	a {
		text-decoration: underline;
		color: #000;
	}
	
	.table {
		border-collapse: collapse;
	}
	
	.table thead th {
		background: #f0f0f0 !important;
		color: #000 !important;
		border: 1px solid #ddd;
	}
	
	h1, h2, h3 {
		page-break-after: avoid;
	}
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* High contrast mode */
@media (prefers-contrast: high) {
	:root {
		--color-navy: #000000;
		--color-white: #FFFFFF;
		--shadow-sm: 0 0 0 2px currentColor;
		--shadow-md: 0 0 0 3px currentColor;
	}
	
	.btn,
	.card,
	.form-control {
		border: 2px solid currentColor;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	:root {
		--color-navy: #5BA3D0;
		--color-sail-white: #1a1a2e;
		--color-pearl: #2C3E50;
		--color-dark: #F8F9FA;
		--color-light: #16213e;
		--color-white: #0f1419;
	}
	
	body {
		background: var(--color-light);
		color: var(--color-dark);
	}
	
	.card {
		background: var(--color-white);
		color: var(--color-dark);
	}
	
	.table tbody tr:hover {
		background: rgba(91, 163, 208, 0.1);
	}
}

/* ===================================
   BROWSER-SPECIFIC FIXES
   =================================== */

/* Safari specific */
@supports (-webkit-appearance: none) {
	.btn::before {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
}

/* Firefox specific */
@-moz-document url-prefix() {
	.form-control {
		padding: calc(var(--spacing-sm) + 1px) var(--spacing-md);
	}
}

/* IE11 fallbacks (minimal support) */
@media all and (-ms-high-contrast: none) {
	.card {
		border: 1px solid #ddd;
	}
	
	.btn {
		background: #002447;
		color: #fff;
	}
}