/* Stile moderno per lista referti */
* {
	box-sizing: border-box;
}
/* 1) azzera spaziatura globale in alto */
html, body { margin: 0; padding: 0; }

/* 2) nascondi davvero i blocchi ASP.NET e togli ogni spaziatura */
.aspNetHidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* se hai regole tipo "body > * { margin:40px }", neutralizzale per i blocchi iniziali */
#form1 > .aspNetHidden { margin: 0 !important; padding: 0 !important; }

/* 3) alcuni temi aggiungono spazi al PRIMO figlio del form: azzera */
#form1 > :first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* 4) se il tuo 'contenitore' del logo crea la banda bianca, raddrizzalo */
#form1 > div[align="center"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 5) niente spazio dato agli <script> (alcuni reset li trattano come block) */
body > script { display: none !important; height: 0 !important; }
body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	background: linear-gradient(135deg, #5a7fa3 0%, #6b8ca8 100%) !important;
}

/* Container principale */
#form1 > div {
	background: rgba(255, 255, 255, 0.98) !important;
	border: none !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(102, 126, 234, 0.2) !important;
	border-radius: 20px !important;
	padding: 30px !important;
	animation: slideIn 0.5s ease-out;
}

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

/* Logo */
.brand_logo {
	height: 128px;
	width: 128px;
	border-radius: 50%;
	border: 3px solid #2c3e50;
	box-shadow: 0 10px 30px rgba(44, 62, 80, 0.3);
	margin: 20px 0;
	transition: transform 0.3s ease;
}

.brand_logo:hover {
	transform: scale(1.05);
}

/* Tabelle e DataGrid */
.mydatagrid {
	width: 100% !important;
	border: none !important;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	margin: 20px 0;
	background: white;
}

.mydatagrid th {
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	color: white !important;
	border: none !important;
	padding: 16px 12px !important;
	text-align: center;
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.header {
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	color: white !important;
	border: none !important;
	padding: 16px 12px;
	height: auto !important;
	text-align: center;
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.rows {
	background-color: #f8f9fa;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 15px !important;
	color: #333;
	min-height: 50px;
	padding: 12px !important;
	text-align: left;
	border: none !important;
	border-bottom: 1px solid #e1e8ed !important;
	transition: background-color 0.2s ease;
}

.rows:hover {
	background-color: #e8f0fe !important;
}

.mydatagrid td {
	padding: 14px 12px !important;
	border: none !important;
	border-bottom: 1px solid #e1e8ed !important;
	font-size: 15px;
	color: #333;
}

.mydatagrid tr:last-child td {
	border-bottom: none !important;
}

/* Note e label */
.note, #note {
	font-style: normal;
	color: #333;
	text-align: center;
	border: none;
	font-size: 15px;
	padding: 15px;
	background: #fff3cd;
	border-radius: 8px;
	margin: 15px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Label titoli liste */
#listaPrenotazione, #Label1 {
	display: block;
	font-size: 18px !important;
	font-weight: 600;
	color: #2c3e50;
	margin: 25px 0 15px 0;
	padding: 12px;
	background: rgba(52, 73, 94, 0.1);
	border-radius: 8px;
	text-align: center;
	letter-spacing: 0.5px;
}

/* Bottoni moderni */
.login_btn {
	width: 100%;
	padding: 14px 20px !important;
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
	color: white !important;
	border: none !important;
	border-radius: 10px;
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
	text-transform: uppercase;
	min-height: 48px;
}

.login_btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

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

.login_btn:focus {
	box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2) !important;
	outline: 0 !important;
}

/* LinkButton stile moderno */
a, a[id*="button"], a[id*="Link"] {
	display: inline-block;
	padding: 12px 20px;
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	color: white !important;
	text-decoration: none !important;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
	text-align: center;
	border: none;
}

a:hover, a[id*="button"]:hover, a[id*="Link"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
	text-decoration: none !important;
}

/* Pulsante Condividi arancione */
.share_btn {
	display: inline-block;
	padding: 10px 16px !important;
	background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
	color: white !important;
	border: none !important;
	border-radius: 10px;
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
	text-transform: uppercase;
	margin-left: 8px;
}

.share_btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);
	background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
}

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

.share_btn:focus {
	box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2) !important;
	outline: 0 !important;
}

/* Pulsanti di navigazione/azione in verde */
.nav_action_btn,
#buttonEsci,
#prenotaVisita,
#button2 {
	display: inline-block;
	padding: 12px 20px;
	background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
	color: white !important;
	text-decoration: none !important;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
	text-align: center;
	border: none;
	min-height: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

.nav_action_btn:hover,
#buttonEsci:hover,
#prenotaVisita:hover,
#button2:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4) !important;
	text-decoration: none !important;
	background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
}

/* Paginazione */
.pager {
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	color: white !important;
	padding: 12px;
	text-align: center;
	border-radius: 0 0 12px 12px;
}

.mydatagrid a {
	background-color: white;
	padding: 8px 12px;
	color: #3498db !important;
	text-decoration: none;
	font-weight: 600;
	border-radius: 6px;
	margin: 0 3px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mydatagrid a:hover {
	background-color: #3498db;
	color: white !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.mydatagrid span {
	background: white;
	color: #3498db !important;
	padding: 8px 12px;
	border-radius: 6px;
	font-weight: bold;
	font-size: 14px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Riga selezionata */
.selectedrow {
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	color: white !important;
	font-weight: bold;
	text-align: left;
}

/* Altri bottoni */
.exit_btn {
	width: 100%;
	padding: 14px 20px;
	border: 2px solid #3498db !important;
	background: white !important;
	color: #3498db !important;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.exit_btn:hover {
	background: #3498db !important;
	color: white !important;
	transform: translateY(-2px);
}

.exit_btn:focus {
	box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2) !important;
	outline: 0 !important;
}

.command_btn {
	width: 100%;
	padding: 14px 20px;
	border: none !important;
	background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
	color: white !important;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

.command_btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
}

.command_btn:focus {
	box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3) !important;
	outline: 0 !important;
}

/* PDF Logo */
.pdf_logo {
	height: 50px;
	width: 50px;
	border-radius: 50%;
	border: 2px solid #3498db;
	box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
	transition: transform 0.3s ease;
}

.pdf_logo:hover {
	transform: scale(1.1);
}

/* === RESPONSIVE DESIGN === */

/* Tablet */
@media (max-width: 768px) {
	#form1 > div {
		width: 95% !important;
		padding: 20px !important;
		margin: 10px auto !important;
	}

	.brand_logo {
		height: 100px;
		width: 100px;
	}

	.mydatagrid th,
	.header {
		font-size: 13px !important;
		padding: 12px 8px !important;
	}

	.rows,
	.mydatagrid td {
		font-size: 13px !important;
		padding: 10px 8px !important;
	}

	.login_btn,
	a, a[id*="button"] {
		font-size: 13px !important;
		padding: 12px 16px !important;
	}

	#listaPrenotazione, #Label1 {
		font-size: 16px !important;
		padding: 10px;
	}
}

/* Mobile */
@media (max-width: 480px) {
	#form1 > div {
		width: 98% !important;
		padding: 15px !important;
		margin: 5px auto !important;
		border-radius: 15px !important;
	}

	.brand_logo {
		height: 80px;
		width: 80px;
	}

	.mydatagrid th,
	.header {
		font-size: 12px !important;
		padding: 12px 8px !important;
	}

	.rows,
	.mydatagrid td {
		font-size: 13px !important;
		padding: 10px 8px !important;
	}

	.login_btn,
	a, a[id*="button"] {
		font-size: 13px !important;
		padding: 12px 16px !important;
		min-height: 44px;
	}

	#listaPrenotazione, #Label1 {
		font-size: 15px !important;
		padding: 10px;
		margin: 20px 0 12px 0;
	}

	.note {
		font-size: 14px;
		padding: 12px;
	}

	/* Nascondi colonna INDIRIZZO su mobile */
	#customers tr th:nth-child(3),
	#customers tr td:nth-child(3) {
		display: none;
	}

	/* Layout verticale per dati paziente */
	#customers {
		font-size: 13px !important;
	}

	#customers th,
	#customers td {
		display: block;
		width: 100% !important;
		text-align: left !important;
		padding: 8px 10px !important;
	}

	#customers th {
		background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
		font-weight: 600;
		border-bottom: 1px solid rgba(255,255,255,0.1) !important;
	}

	#customers td {
		background: #f8f9fa;
		border-bottom: 1px solid #e1e8ed !important;
	}

	#customers tr:last-child td:last-child {
		border-bottom: none !important;
	}

	/* Layout CARD per GridView referti su mobile */
	#listaRefertiGrid {
		border: none !important;
	}

	#listaRefertiGrid thead {
		display: none; /* Nascondi intestazione tabella */
	}

	#listaRefertiGrid tbody tr {
		display: block;
		margin-bottom: 20px;
		background: white;
		border-radius: 12px !important;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
		border: 2px solid #e1e8ed !important;
		overflow: hidden;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	#listaRefertiGrid tbody tr:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
	}

	#listaRefertiGrid tbody td {
		display: block;
		width: 100% !important;
		text-align: left !important;
		border: none !important;
		padding: 12px 15px !important;
		font-size: 14px !important;
		position: relative;
	}

	#listaRefertiGrid tbody td:before {
		content: attr(data-label);
		font-weight: 700;
		color: #2c3e50;
		display: block;
		margin-bottom: 5px;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	/* Prima cella: Data Referto */
	#listaRefertiGrid tbody td:nth-child(1) {
		background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
		color: white !important;
		font-weight: 700;
		font-size: 16px !important;
		padding: 15px !important;
	}

	#listaRefertiGrid tbody td:nth-child(1):before {
		content: "📅 Data Referto";
		color: rgba(255,255,255,0.9);
		font-size: 11px;
	}

	/* Seconda cella: ID Referto */
	#listaRefertiGrid tbody td:nth-child(2) {
		background: #f8f9fa;
		font-weight: 600;
		color: #2c3e50 !important;
		font-size: 15px !important;
	}

	#listaRefertiGrid tbody td:nth-child(2):before {
		content: "🔖 ID Referto";
		color: #34495e;
	}

	/* Terza cella: Pulsanti */
	#listaRefertiGrid tbody td:nth-child(3) {
		background: white;
		padding: 15px !important;
	}

	#listaRefertiGrid tbody td:nth-child(3):before {
		content: "";
		display: none;
	}

	/* Ottimizza pulsanti nei card */
	#listaRefertiGrid .referto-buttons {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}

	#listaRefertiGrid .referto-buttons .btn {
		width: 100% !important;
		min-width: auto !important;
		max-width: none !important;
		font-size: 14px !important;
		padding: 14px 20px !important;
		min-height: 48px !important;
	}

	/* Pulsanti di navigazione in verticale su mobile */
	#Table2 tbody tr {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	#Table2 tbody tr td {
		width: 100% !important;
		display: block;
	}

	#Table2 .nav_action_btn {
		width: 100%;
		font-size: 14px !important;
		padding: 14px 16px !important;
		min-height: 52px !important;
		height: auto !important;
		white-space: normal;
		line-height: 1.3;
	}

	/* Layout CARD per prenotazioni laboratorio */
	#listaPrenotazioni thead {
		display: none;
	}

	#listaPrenotazioni tbody tr {
		display: block;
		margin-bottom: 15px;
		background: white;
		border-radius: 12px !important;
		box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
		border: 2px solid #ffeaa7 !important;
		overflow: hidden;
	}

	#listaPrenotazioni tbody td {
		display: block;
		width: 100% !important;
		text-align: left !important;
		border: none !important;
		padding: 12px 15px !important;
		font-size: 14px !important;
	}

	#listaPrenotazioni tbody td:before {
		content: attr(data-label);
		font-weight: 700;
		color: #2c3e50;
		display: block;
		margin-bottom: 5px;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	#listaPrenotazioni tbody td:nth-child(1) {
		background: #ffeaa7;
		font-weight: 700;
		padding: 15px !important;
	}

	#listaPrenotazioni tbody td:nth-child(1):before {
		content: "📅 Data Prenotazione";
		color: #2c3e50;
	}

	#listaPrenotazioni tbody td:nth-child(2) {
		background: #f8f9fa;
	}

	#listaPrenotazioni tbody td:nth-child(2):before {
		content: "📋 Prestazione";
	}

	#listaPrenotazioni tbody td:nth-child(3) {
		background: white;
		padding: 15px !important;
	}

	#listaPrenotazioni tbody td:nth-child(3):before {
		content: "";
		display: none;
	}

	#listaPrenotazioni .login_btn {
		width: 100% !important;
		font-size: 13px !important;
	}

	/* Layout CARD per prenotazioni visite */
	#listaPrenotazioniVisite thead {
		display: none;
	}

	#listaPrenotazioniVisite tbody tr {
		display: block;
		margin-bottom: 15px;
		background: white;
		border-radius: 12px !important;
		box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
		border: 2px solid #a29bfe !important;
		overflow: hidden;
	}

	#listaPrenotazioniVisite tbody td {
		display: block;
		width: 100% !important;
		text-align: left !important;
		border: none !important;
		padding: 12px 15px !important;
		font-size: 14px !important;
	}

	#listaPrenotazioniVisite tbody td:before {
		content: attr(data-label);
		font-weight: 700;
		color: #2c3e50;
		display: block;
		margin-bottom: 5px;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	#listaPrenotazioniVisite tbody td:nth-child(1) {
		background: #a29bfe;
		font-weight: 700;
		color: white !important;
		padding: 15px !important;
	}

	#listaPrenotazioniVisite tbody td:nth-child(1):before {
		content: "📅 Data";
		color: rgba(255,255,255,0.9);
	}

	#listaPrenotazioniVisite tbody td:nth-child(2) {
		background: #f8f9fa;
	}

	#listaPrenotazioniVisite tbody td:nth-child(2):before {
		content: "⏰ Ora";
	}

	#listaPrenotazioniVisite tbody td:nth-child(3) {
		background: white;
	}

	#listaPrenotazioniVisite tbody td:nth-child(3):before {
		content: "🏥 Prestazione";
	}

	/* Tabella con conteggio prenotazioni */
	#Table4 {
		font-size: 13px !important;
	}

	#Table4 th,
	#Table4 td {
		padding: 12px 10px !important;
		font-size: 13px !important;
	}

	/* Stili specifici per pagina prenotazione mobile */

	/* Tabella dati paziente - layout verticale */
	#Table1 {
		width: 100% !important;
	}

	#Table1 thead {
		display: none;
	}

	#Table1 tbody tr {
		display: block;
		margin-bottom: 10px;
	}

	#Table1 tbody td {
		display: block;
		width: 100% !important;
		text-align: left !important;
		padding: 10px !important;
		border-bottom: 1px solid #e1e8ed !important;
	}

	#Table1 tbody td:before {
		content: attr(data-label);
		font-weight: 700;
		color: #2c3e50;
		display: block;
		margin-bottom: 5px;
		font-size: 11px;
		text-transform: uppercase;
	}

	/* Form prenotazione - layout verticale */
	#Table2 tbody tr {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: 15px;
	}

	#Table2 tbody tr td {
		width: 100% !important;
		display: block;
		text-align: left !important;
		padding: 10px !important;
	}

	#Table2 label {
		font-weight: 600;
		font-size: 13px !important;
		color: #2c3e50;
		display: block;
		margin-bottom: 8px;
	}

	/* DropDownList responsive */
	#Table2 select,
	#DropDownList1,
	#DropDownList2 {
		width: 100% !important;
		max-width: 100% !important;
		padding: 12px !important;
		font-size: 14px !important;
		border: 2px solid #e1e8ed !important;
		border-radius: 8px !important;
		background: white !important;
	}

	/* TextBox data prelievo */
	#dataPrelievo {
		width: 100% !important;
		max-width: 100% !important;
		padding: 12px !important;
		font-size: 14px !important;
		border: 2px solid #e1e8ed !important;
		border-radius: 8px !important;
		box-sizing: border-box;
	}

	/* Calendario responsive */
	#Calendario {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		font-size: 12px !important;
	}

	/* Frecce e label indicatori */
	#freciaData1,
	#freciaData2,
	#frecciaOra1,
	#frecciaOra2 {
		display: block !important;
		margin-top: 8px !important;
		font-size: 12px !important;
	}

	/* Bottoni pagina prenotazione */
	#Button2,
	#buttonEsci {
		width: 100% !important;
		max-width: 100% !important;
		padding: 16px 20px !important;
		font-size: 14px !important;
		min-height: 52px !important;
		height: auto !important;
		white-space: normal !important;
		line-height: 1.4 !important;
		margin: 8px 0 !important;
	}

	/* Area messaggi */
	#messaggio {
		width: 100% !important;
		max-width: 100% !important;
		padding: 12px !important;
		font-size: 14px !important;
		border: 2px solid #e1e8ed !important;
		border-radius: 8px !important;
		box-sizing: border-box;
	}

	/* ImageButton calendario */
	#ImageButtonCalendar {
		width: 30px !important;
		height: 30px !important;
		margin-bottom: 10px !important;
	}

	/* Container principale prenotazione */
	#form2 > div {
		width: 98% !important;
		padding: 15px !important;
		border-radius: 15px !important;
		margin: 5px auto !important;
	}

	/* Note in prenotazione */
	#note {
		font-size: 13px !important;
		padding: 12px !important;
		margin: 10px 0 !important;
	}

	/* Stili specifici per pagina paziente.aspx - bottoni navigazione */

	/* Container dei bottoni - allineati con campo-row */
	.login_container {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 0 12px 0 !important;
		display: block !important;
		justify-content: stretch !important;
	}

	/* Bottoni di navigazione in paziente.aspx - allineati con campo-row */
	#button1,
	#button2,
	#buttonEsci {
		width: 100% !important;
		max-width: 100% !important;
		padding: 14px 12px !important;
		font-size: 13px !important;
		min-height: 48px !important;
		height: auto !important;
		white-space: normal !important;
		line-height: 1.3 !important;
		word-wrap: break-word !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		border-radius: 10px !important;
	}

	/* Container principale paziente */
	body > div[align="center"] {
		width: 98% !important;
		max-width: 100% !important;
		margin: 10px auto !important;
		padding: 10px !important;
	}

	/* Form container paziente */
	.form_container {
		width: 100% !important;
		padding: 0 !important;
	}

	#form1 {
		width: 100% !important;
		padding: 0 !important;
	}

	.input-group {
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	/* Campo row già definito, ma assicuriamoci funzioni bene su mobile */
	.campo-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
		padding: 12px 10px !important;
		margin-bottom: 12px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.campo-label {
		width: 100% !important;
		font-size: 12px !important;
		margin-bottom: 5px !important;
		box-sizing: border-box !important;
	}

	.form-control {
		width: 100% !important;
		max-width: 100% !important;
		padding: 10px 12px !important;
		font-size: 14px !important;
		box-sizing: border-box !important;
	}

	/* TextArea risultato - allineato con tutto il resto */
	#textEsito {
		width: 100% !important;
		max-width: 100% !important;
		padding: 12px !important;
		font-size: 13px !important;
		box-sizing: border-box !important;
		margin: 0 !important;
	}
}

/* Layout desktop per referti - un referto per riga */
.lista-referti-desktop tbody tr {
    display: block;
    margin-bottom: 15px;
}

.lista-referti-desktop tbody td {
    display: block;
    width: 100% !important;
    border: none !important;
}

.referto-row-desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    gap: 20px;
    transition: all 0.3s ease;
}

.referto-row-desktop:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.referto-info-desktop {
    display: flex;
    gap: 30px;
    flex: 1;
}

.referto-data-desktop,
.referto-id-desktop {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.referto-label-desktop {
    font-size: 12px;
    color: #7f8c8d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.referto-value-desktop {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
}

.referto-buttons {
    display: flex;
    gap: 12px;
}

/* Responsive: su mobile torna al layout verticale */
@media (max-width: 768px) {
    .referto-row-desktop {
        flex-direction: column;
        align-items: stretch;
    }

    .referto-info-desktop {
        flex-direction: column;
        gap: 15px;
    }

    .referto-buttons {
        width: 100%;
        flex-direction: column;
    }

    .referto-buttons .btn {
        width: 100%;
    }
}

/* Stili per pagina paziente - layout campo per campo VERTICALE */
.campo-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
    margin-bottom: 15px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e1e8ed;
}

.campo-row .campo-label {
    display: block !important;
    width: 100%;
    font-size: 13px !important;
    font-weight: 600;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 !important;
    padding: 0 !important;
}

.campo-row .form-control {
    width: 100%;
    max-width: none !important;
    padding: 10px 12px !important;
    border: 2px solid #e1e8ed !important;
    border-radius: 8px;
    font-size: 15px !important;
    transition: all 0.3s ease;
}

.campo-row .form-control:focus {
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1) !important;
    outline: none !important;
}

.campo-row input[type="checkbox"] {
    width: auto !important;
    height: 20px !important;
    cursor: pointer;
    flex: 0;
}

/* Responsive: su mobile torna verticale */
@media (max-width: 768px) {
    .campo-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
        margin-bottom: 12px;
    }

    .campo-label {
        width: 100%;
        font-size: 12px;
    }
}