/* ============================================================
   LOGIN PAGE — Layout professionale a due colonne
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

.lp-root {
	min-height: 100vh;
	display: flex;
	font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ── Form panel centrato ───────────────────────────────────── */
.lp-form-panel {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #0f2744 0%, #1a3a6b 60%, #1e4d8c 100%);
	padding: 40px 24px;
}

.lp-form-inner {
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 24px 64px rgba(0,0,0,0.30);
	animation: lp-fadeup 0.4s ease-out;
}

@keyframes lp-fadeup {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.lp-form-header {
	margin-bottom: 32px;
	text-align: center;
}

.lp-logo {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
}
.lp-logo svg { width: 100%; height: 100%; }

.lp-form-header h2 {
	font-size: 22px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 6px;
	letter-spacing: -0.3px;
}

.lp-form-header p {
	font-size: 14px;
	color: #64748b;
	margin: 0;
}

/* ── Form ─────────────────────────────────────────────────── */
.lp-form { display: flex; flex-direction: column; gap: 20px; }

.lp-field { display: flex; flex-direction: column; gap: 7px; }

.lp-field label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.lp-field label svg { color: #6b7280; }

.lp-field input {
	width: 100%;
	padding: 11px 14px;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	font-size: 14px;
	color: #0f172a;
	transition: border-color 0.2s, box-shadow 0.2s;
	font-family: inherit;
}

.lp-field input::placeholder { color: #94a3b8; }

.lp-field input:-webkit-autofill,
.lp-field input:-webkit-autofill:hover,
.lp-field input:-webkit-autofill:focus,
.lp-field input:-webkit-autofill:active {
	-webkit-text-fill-color: #0f172a !important;
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	box-shadow: 0 0 0 1000px #ffffff inset !important;
	transition: background-color 5000s ease-in-out 0s;
	caret-color: #0f172a;
}

.lp-field input:focus {
	background-color: #ffffff !important;
	color: #0f172a !important;
}

.lp-field input:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

.lp-field input:disabled {
	background: #f1f5f9;
	cursor: not-allowed;
	color: #94a3b8;
}

/* Password con occhio */
.lp-password-wrap {
	position: relative;
}

.lp-password-wrap input {
	padding-right: 42px;
}

.lp-eye {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: #94a3b8;
	padding: 4px;
	display: flex;
	align-items: center;
	transition: color 0.2s;
}
.lp-eye:hover { color: #475569; }

/* ── Errore ───────────────────────────────────────────────── */
.lp-error {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: #fef2f2;
	border: 1.5px solid #fecaca;
	border-radius: 10px;
	font-size: 13px;
	color: #dc2626;
	animation: lp-shake 0.3s ease;
}

@keyframes lp-shake {
	0%,100% { transform: translateX(0); }
	25%      { transform: translateX(-6px); }
	75%      { transform: translateX(6px); }
}

/* ── Bottone submit ───────────────────────────────────────── */
.lp-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 20px;
	background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
	color: #ffffff;
	border: none;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 4px 14px rgba(37,99,235,0.30);
	font-family: inherit;
	margin-top: 4px;
}

.lp-submit:hover:not(:disabled) {
	background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
	box-shadow: 0 6px 18px rgba(37,99,235,0.40);
	transform: translateY(-1px);
}

.lp-submit:active:not(:disabled) { transform: translateY(0); }

.lp-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Spinner */
.lp-spinner {
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: lp-spin 0.7s linear infinite;
	flex-shrink: 0;
}

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

/* ── Footer ───────────────────────────────────────────────── */
.lp-divider {
	height: 1px;
	background: #e2e8f0;
	margin: 28px 0 20px;
}

.lp-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.lp-cache-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 12px;
	color: #64748b;
	cursor: pointer;
	transition: all 0.2s;
	font-family: inherit;
}
.lp-cache-btn:hover {
	border-color: #94a3b8;
	color: #374151;
}

.lp-security-note {
	font-size: 12px;
	color: #94a3b8;
	text-align: center;
	line-height: 1.6;
	margin: 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
	.lp-root { flex-direction: column; }

	.lp-brand {
		width: 100%;
		padding: 32px 24px;
	}

	.lp-features { display: none; }

	.lp-brand-title { font-size: 22px; }
	.lp-brand-subtitle { margin-bottom: 0; }
	.lp-brand-footer { display: none; }

	.lp-form-panel { padding: 32px 20px; }
}
:root {
	--bg: #0f172a;
	--bg-secondary: #1e293b;
	--bg-tertiary: #334155;
	--panel: #1e293b;
	--muted: #94a3b8;
	--text: #f1f5f9;
	--text-secondary: #cbd5e1;
	--primary: #3b82f6;
	--primary-hover: #2563eb;
	--primary-light: #3b82f620;
	--accent: #60a5fa;
	--success: #10b981;
	--success-light: #10b98120;
	--warn: #f59e0b;
	--warn-light: #f59e0b20;
	--danger: #ef4444;
	--danger-light: #ef444420;
	--chip: #334155;
	--border: #475569;
	--border-light: #64748b;
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* NC - Fasi */
	--nc-phase-1: #dc2626;
	--nc-phase-1-light: #dc262620;
	--nc-phase-2: #f59e0b;
	--nc-phase-2-light: #f59e0b20;
	--nc-phase-3: #8b5cf6;
	--nc-phase-3-light: #8b5cf620;
	--nc-phase-4: #16a34a;
	--nc-phase-4-light: #16a34a20;

	/* NC - Stati */
	--nc-draft: #6b7280;
	--nc-draft-light: #6b728020;
	--nc-open: #dc2626;
	--nc-open-light: #dc262620;
	--nc-analysis: #f59e0b;
	--nc-analysis-light: #f59e0b20;
	--nc-treatment: #8b5cf6;
	--nc-treatment-light: #8b5cf620;
	--nc-verification: #3b82f6;
	--nc-verification-light: #3b82f620;
	--nc-closed: #16a34a;
	--nc-closed-light: #16a34a20;

	/* NC - Gravità */
	--nc-gravity-a: #dc2626;
	--nc-gravity-a-light: #dc262620;
	--nc-gravity-b: #f59e0b;
	--nc-gravity-b-light: #f59e0b20;
	--nc-gravity-c: #eab308;
	--nc-gravity-c-light: #eab30820;
	--nc-gravity-d: #6b7280;
	--nc-gravity-d-light: #6b728020;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	background: linear-gradient(135deg, var(--bg) 0%, #1a1f2e 100%);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	min-height: 100vh;
}

.container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 24px;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--border);
}

.header h1 {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.5px;
	background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.tabs {
	display: flex;
	gap: 12px;
	background: var(--panel);
	padding: 6px;
	border-radius: 12px;
	border: 1px solid var(--border);
}

.tabs button {
	padding: 10px 24px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-weight: 500;
	font-size: 14px;
}

.tabs button:hover {
	background: var(--bg-tertiary);
	color: var(--text);
	transform: translateY(-1px);
}

.tabs button.active {
	background: var(--primary);
	color: white;
	font-weight: 600;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.panel {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 32px;
	margin-bottom: 24px;
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(10px);
}

.panel h2 {
	margin-top: 0;
	margin-bottom: 24px;
	font-size: 24px;
	font-weight: 600;
	color: var(--text);
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-group.full-width {
	grid-column: 1 / -1;
}

.form-group label {
	font-weight: 600;
	color: var(--text);
	font-size: 13px;
	letter-spacing: 0.3px;
}

.form-group label:has(+ *[required])::after {
	content: ' *';
	color: var(--danger);
}

input,
select,
textarea {
	width: 100%;
	padding: 12px 16px;
	border-radius: 10px;
	border: 2px solid var(--border);
	background: var(--bg-secondary);
	color: var(--text);
	font-size: 15px;
	font-family: inherit;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--primary);
	background: var(--bg);
	box-shadow: 0 0 0 4px var(--primary-light);
}

input:hover,
select:hover,
textarea:hover {
	border-color: var(--border-light);
}

input:invalid:not(:focus):not(:placeholder-shown),
select:invalid:not(:focus) {
	border-color: var(--danger);
	box-shadow: 0 0 0 4px var(--danger-light);
}

.full-inspection-wrapper {
	min-height: 100vh;
	background: var(--bg);
	padding: clamp(16px, 4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.full-inspection-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.filters {
	background: var(--bg-secondary);
	padding: 20px;
	border-radius: 12px;
	border: 1px solid var(--border);
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 24px;
	box-shadow: var(--shadow-sm);
}

.filters input,
.filters select {
	background: var(--bg);
	border: 2px solid var(--border);
	color: var(--text);
	border-radius: 8px;
	padding: 10px 14px;
	transition: all 0.2s;
}

.filters input:focus,
.filters select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-light);
}

.filters button {
	background: var(--bg-tertiary);
	border: 2px solid var(--border);
	color: var(--text);
	border-radius: 8px;
	padding: 10px 20px;
	transition: all 0.2s;
	font-weight: 500;
}

.filters button:hover {
	background: var(--chip);
	border-color: var(--border-light);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

textarea {
	resize: vertical;
	min-height: 100px;
	font-family: inherit;
}

button {
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	padding: 12px 24px;
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

button:not(.primary):not(.close-btn) {
	background: var(--bg-tertiary);
	color: var(--text);
	border: 2px solid var(--border);
}

button:not(.primary):not(.close-btn):hover {
	background: var(--chip);
	border-color: var(--border-light);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

button.primary {
	background: var(--primary);
	border-color: var(--primary);
	color: white;
	box-shadow: var(--shadow-md);
}

button.primary:hover {
	background: var(--primary-hover);
	border-color: var(--primary-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

button.primary:active {
	transform: translateY(0);
	box-shadow: var(--shadow-sm);
}

button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

.form-actions {
	grid-column: 1 / -1;
	display: flex;
	gap: 12px;
	margin-top: 24px;
	justify-content: flex-end;
}

.form-actions button {
	width: auto;
	min-width: 120px;
}

.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--panel);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border);
}

.table th {
	background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--chip) 100%);
	padding: 16px;
	text-align: left;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-secondary);
	border-bottom: 2px solid var(--border);
}

.table th:first-child {
	border-top-left-radius: 12px;
}

.table th:last-child {
	border-top-right-radius: 12px;
}

.table td {
	padding: 16px;
	border-top: 1px solid var(--border);
	color: var(--text);
}

.table tbody tr {
	transition: all 0.2s;
}

.table tbody tr:hover {
	background: var(--bg-secondary);
	transform: scale(1.001);
}

.table tbody tr:hover td {
	border-color: var(--border-light);
}

.badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 20px;
	background: var(--chip);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: var(--shadow-sm);
}

.badge.q {
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	color: white;
}

.badge.h {
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
	color: white;
}

.badge.e {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	color: white;
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 32px 0;
}

h2 {
	font-size: 28px;
	margin: 32px 0 20px;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.5px;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 20px;
	animation: fadeIn 0.2s ease-out;
}

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

.modal-content {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 0;
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
	position: relative;
	box-shadow: var(--shadow-xl);
	animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
}

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

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 32px;
	border-bottom: 2px solid var(--border);
	background: var(--bg-secondary);
}

.modal-header h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--text);
}

.modal-content > form,
.modal-content > div {
	padding: 32px;
	overflow-y: auto;
	flex: 1;
}

.close-btn {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	transition: all 0.2s;
}

.close-btn:hover {
	background: var(--bg-tertiary);
	color: var(--text);
	transform: rotate(90deg);
}

.status-badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: var(--shadow-sm);
}

.status-badge.open {
	background: var(--warn-light);
	color: #fbbf24;
	border: 1px solid var(--warn);
}

.status-badge.completed {
	background: var(--success-light);
	color: var(--success);
	border: 1px solid var(--success);
}

.status-badge.overdue {
	background: var(--danger-light);
	color: #fca5a5;
	border: 1px solid var(--danger);
}

.status-badge.verified {
	background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
	color: white;
	border: none;
	box-shadow: var(--shadow-md);
}

/* Miglioramenti generali */
input[type="file"] {
	padding: 12px;
	cursor: pointer;
	border-radius: 10px;
	border: 2px dashed var(--border);
	background: var(--bg-secondary);
	transition: all 0.2s;
}

input[type="file"]:hover {
	border-color: var(--primary);
	background: var(--bg);
}

input[type="file"]::file-selector-button {
	padding: 8px 16px;
	margin-right: 12px;
	border: 2px solid var(--primary);
	border-radius: 8px;
	background: var(--primary);
	color: white;
	cursor: pointer;
	transition: all 0.2s;
	font-weight: 600;
	font-size: 13px;
}

input[type="file"]::file-selector-button:hover {
	background: var(--primary-hover);
	border-color: var(--primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

small {
	display: block;
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 6px;
	line-height: 1.5;
}

/* Miglioramenti tabelle */
.table tr {
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.table tbody tr:nth-child(even) {
	background: rgba(51, 65, 85, 0.1);
}

.table tbody tr:nth-child(even):hover {
	background: var(--bg-secondary);
}

/* Scrollbar personalizzata */
.modal-content::-webkit-scrollbar,
body::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.modal-content::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
	background: var(--bg);
	border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 10px;
	border: 2px solid var(--bg);
}

.modal-content::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
	background: var(--border-light);
}

/* Calendario migliorato */
.calendar-view {
	overflow-x: auto;
	border-radius: 12px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-md);
}

/* Animazioni */
@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

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

.loading {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Miglioramenti per accessibilità */
*:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Frequency Detail Editor Styles */
.form-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 10px;
	border: 2px solid var(--border);
	background: var(--bg-secondary);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin-bottom: 8px;
}

.form-option:hover {
	border-color: var(--primary);
	background: var(--bg);
	transform: translateX(2px);
}

.form-option:has(input[type="radio"]:checked),
.form-option:has(input[type="checkbox"]:checked) {
	border-color: var(--primary);
	background: var(--primary-light);
	box-shadow: 0 0 0 4px var(--primary-light);
}

.form-option input[type="radio"],
.form-option input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--primary);
	flex-shrink: 0;
}

.form-option span {
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	flex: 1;
}

.frequency-editor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	padding: 16px;
	background: var(--bg);
	border-radius: 10px;
	border: 1px solid var(--border);
}

.frequency-editor-grid.nested {
	margin-top: 8px;
	margin-left: 32px;
	background: var(--bg-secondary);
}

.frequency-editor-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--bg);
	border-radius: 10px;
	border: 1px solid var(--border);
}

.frequency-editor-grid label,
.frequency-editor-stack label {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.frequency-editor-grid label span,
.frequency-editor-stack label span {
	font-weight: 600;
	color: var(--text);
	font-size: 13px;
	letter-spacing: 0.3px;
}

.frequency-editor-grid small,
.frequency-editor-stack small {
	color: var(--text-secondary);
	font-size: 11px;
	margin-top: 4px;
	line-height: 1.4;
}

.form-group.nested {
	margin-left: 32px;
	margin-top: 8px;
	padding: 12px;
	background: var(--bg-secondary);
	border-radius: 8px;
	border: 1px solid var(--border);
}

.form-group.nested input {
	background: var(--bg);
}

/* Custom radio/checkbox styles enhancement */
input[type="radio"],
input[type="checkbox"] {
	width: auto;
	cursor: pointer;
	accent-color: var(--primary);
}

label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
	cursor: pointer;
	user-select: none;
}

/* Highlight animation per elementi modificati da altri utenti */
@keyframes highlightPulse {
	0% {
		background-color: #fef3c7;
		box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
	}
	50% {
		background-color: #fde68a;
		box-shadow: 0 0 0 4px rgba(251, 191, 36, 0);
	}
	100% {
		background-color: transparent;
		box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
	}
}

.item-highlighted {
	animation: highlightPulse 3s ease-out;
	transition: background-color 0.3s ease;
}

/* Lock indicator per elementi in editing */
.item-locked {
	position: relative;
	opacity: 0.6;
	pointer-events: none;
}

.item-locked::before {
	content: '🔒';
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 16px;
	z-index: 10;
}

.lock-message {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #fef3c7;
	border: 1px solid #fbbf24;
	border-radius: 8px;
	font-size: 13px;
	color: #92400e;
	margin-bottom: 12px;
}

.lock-message-icon {
	font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
	.container {
		padding: 16px;
	}

	.form-grid {
		grid-template-columns: 1fr;
	}

	.header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.tabs {
		flex-wrap: wrap;
		width: 100%;
	}

	.tabs button {
		flex: 1;
		min-width: 100px;
	}

	.panel {
		padding: 20px;
	}

	.modal-content {
		margin: 10px;
		max-height: 95vh;
	}

	.frequency-editor-grid {
		grid-template-columns: 1fr;
	}
	
	.form-group.nested {
		margin-left: 16px;
	}
}
/* Modal Overlay */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
	animation: fadeIn 0.2s ease-out;
}

/* Modal Dialog */
.modal-dialog {
	background: var(--panel);
	border: 2px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-xl);
	animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	max-height: 90vh;
	width: 100%;
}

.modal-dialog.modal-small {
	max-width: 450px;
}

.modal-dialog.modal-medium {
	max-width: 650px;
}

.modal-dialog.modal-large {
	max-width: 900px;
}

/* Modal Header */
.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 32px;
	border-bottom: 2px solid var(--border);
	background: var(--bg-secondary);
	border-radius: 14px 14px 0 0;
}

.modal-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
}

.modal-close-btn {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	transition: all 0.2s;
}

.modal-close-btn:hover {
	background: var(--bg-tertiary);
	color: var(--text);
	transform: rotate(90deg);
}

/* Modal Body */
.modal-body {
	padding: 32px;
	overflow-y: auto;
	flex: 1;
}

/* Confirm Dialog */
.confirm-dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}

.confirm-icon {
	font-size: 64px;
	line-height: 1;
}

.confirm-message {
	color: var(--text);
	font-size: 16px;
	line-height: 1.6;
}

.confirm-message p {
	margin: 0 0 12px 0;
	white-space: pre-wrap;
}

.confirm-message p:last-child {
	margin-bottom: 0;
}

.confirm-actions {
	display: flex;
	gap: 12px;
	width: 100%;
	justify-content: center;
}

.confirm-actions button {
	min-width: 120px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid;
}

/* Alert Dialog */
.alert-dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}

.alert-icon {
	font-size: 64px;
	line-height: 1;
}

.alert-message {
	color: var(--text);
	font-size: 16px;
	line-height: 1.6;
}

.alert-message p {
	margin: 0 0 12px 0;
	white-space: pre-wrap;
}

.alert-message p:last-child {
	margin-bottom: 0;
}

.alert-actions {
	display: flex;
	gap: 12px;
	width: 100%;
	justify-content: center;
}

.alert-actions button {
	min-width: 140px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid;
}

/* Button Styles */
.btn-primary {
	background: var(--primary);
	border-color: var(--primary);
	color: white;
	box-shadow: var(--shadow-md);
}

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

.btn-secondary {
	background: var(--bg-tertiary);
	border-color: var(--border);
	color: var(--text);
}

.btn-secondary:hover {
	background: var(--chip);
	border-color: var(--border-light);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

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

.btn-danger:hover {
	background: #dc2626;
	border-color: #dc2626;
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

/* Variant Colors */
.confirm-danger .confirm-icon,
.alert-error .alert-icon {
	color: var(--danger);
}

.confirm-warning .confirm-icon,
.alert-warning .alert-icon {
	color: var(--warn);
}

.confirm-success .confirm-icon,
.alert-success .alert-icon {
	color: var(--success);
}

.confirm-info .confirm-icon,
.alert-info .alert-icon {
	color: var(--primary);
}

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

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

/* Responsive */
@media (max-width: 768px) {
	.modal-dialog {
		margin: 10px;
		max-height: 95vh;
	}
	
	.modal-header {
		padding: 20px 24px;
	}
	
	.modal-body {
		padding: 24px;
	}
	
	.confirm-actions,
	.alert-actions {
		flex-direction: column;
	}
	
	.confirm-actions button,
	.alert-actions button {
		width: 100%;
	}
}

.toast-container {
	position: fixed;
	top: 80px;
	right: 20px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 400px;
}

.toast {
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
	padding: 16px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-left: 4px solid;
	animation: slideIn 0.3s ease-out;
	min-width: 320px;
	max-width: 400px;
}

.toast-exit {
	animation: slideOut 0.3s ease-out forwards;
}

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

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

.toast-icon {
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

.toast-content {
	flex: 1;
	min-width: 0;
}

.toast-message {
	font-size: 14px;
	font-weight: 500;
	color: #1f2937;
	line-height: 1.4;
	margin-bottom: 4px;
}

.toast-username {
	font-size: 12px;
	color: #6b7280;
	font-style: italic;
}

.toast-close {
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: #9ca3af;
	cursor: pointer;
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: all 0.2s;
	flex-shrink: 0;
}

.toast-close:hover {
	background: #f3f4f6;
	color: #1f2937;
}

.toast-success {
	border-left-color: #10b981;
}

.toast-error {
	border-left-color: #ef4444;
}

.toast-warning {
	border-left-color: #f59e0b;
}

.toast-info {
	border-left-color: #3b82f6;
}

/* Responsive */
@media (max-width: 768px) {
	.toast-container {
		right: 10px;
		left: 10px;
		max-width: none;
	}

	.toast {
		min-width: 0;
		max-width: none;
	}
}


/**
 * Capacitor Mobile Styles
 * CSS ottimizzato per app iOS e Android e browser mobile
 * Gestisce safe areas, touch targets, gesture navigation
 * Si attiva automaticamente su schermi < 1024px o dispositivi touch
 */

/* ===== CSS Variables per Mobile ===== */
:root {
	/* Safe area insets (iOS notch, Android gesture bar) */
	--safe-area-inset-top: env(safe-area-inset-top, 0px);
	--safe-area-inset-right: env(safe-area-inset-right, 0px);
	--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
	--safe-area-inset-left: env(safe-area-inset-left, 0px);

	/* Touch targets minimi (44px per iOS, 48dp per Android) */
	--touch-target-min: 48px;

	/* Spacing adattivo */
	--mobile-spacing-xs: 8px;
	--mobile-spacing-sm: 12px;
	--mobile-spacing-md: 16px;
	--mobile-spacing-lg: 24px;
	--mobile-spacing-xl: 32px;

	/* Font sizes mobile */
	--mobile-font-xs: 11px;
	--mobile-font-sm: 13px;
	--mobile-font-base: 15px;
	--mobile-font-lg: 17px;
	--mobile-font-xl: 20px;
	--mobile-font-xxl: 24px;

	/* Border radius mobile */
	--mobile-radius-sm: 8px;
	--mobile-radius-md: 12px;
	--mobile-radius-lg: 16px;
	--mobile-radius-xl: 24px;
	--mobile-radius-full: 9999px;

	/* Keyboard height placeholder */
	--keyboard-height: 0px;

	/* Shadows mobile */
	--mobile-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
	--mobile-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	--mobile-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* =====================================================
   MOBILE STYLES - Si attivano su schermi piccoli o touch
   ===================================================== */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {

	/* ===== Base Mobile Styles ===== */

	/* Disabilita selezione testo su elementi interattivi */
	button,
	a,
	.clickable {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
	}

	/* Abilita selezione su input e textarea */
	input,
	textarea,
	[contenteditable] {
		-webkit-user-select: auto;
		user-select: auto;
	}

	/* Previene zoom su focus input (iOS) - IMPORTANTE! */
	input,
	textarea,
	select {
		font-size: 16px !important;
	}

	/* Disabilita highlight su tap (mobile) */
	* {
		-webkit-tap-highlight-color: transparent;
	}

	/* Abilita touch scrolling su tutto */
	html, body, #root {
		touch-action: pan-x pan-y !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior: contain;
	}

	/* ===== Safe Area Layout ===== */

	body {
		padding-top: var(--safe-area-inset-top);
		padding-left: var(--safe-area-inset-left);
		padding-right: var(--safe-area-inset-right);
		min-height: 100vh;
		min-height: 100dvh;
	}

	/* Container principale - DEVE essere scrollabile */
	.container {
		padding: var(--mobile-spacing-md) !important;
		padding-bottom: calc(100px + var(--safe-area-inset-bottom)) !important;
		max-width: 100% !important;
		/* Forza scroll touch */
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-y !important;
	}

	/* ===== Touch-Friendly Elements ===== */

	/* Buttons con touch target ottimizzato */
	button {
		min-height: var(--touch-target-min);
		padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
		font-size: var(--mobile-font-sm) !important;
		font-weight: 600;
		border-radius: var(--mobile-radius-md) !important;
		/* Feedback visivo touch */
		transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
		/* Non bloccare scroll sui bottoni */
		touch-action: manipulation;
	}

	button:active {
		transform: scale(0.96);
		opacity: 0.85;
	}

	/* Primary button più evidente su mobile */
	button.primary {
		padding: var(--mobile-spacing-md) var(--mobile-spacing-lg) !important;
		font-size: var(--mobile-font-base) !important;
		box-shadow: var(--mobile-shadow-md);
	}

	/* Assicura che link e elementi cliccabili non blocchino scroll */
	a, .clickable {
		touch-action: manipulation;
	}

	/* Input fields */
	input,
	select,
	textarea {
		min-height: var(--touch-target-min);
		padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
		border-radius: var(--mobile-radius-md) !important;
		font-size: var(--mobile-font-base) !important;
	}

	/* Placeholder più visibile */
	input::placeholder,
	textarea::placeholder {
		color: var(--muted);
		opacity: 0.7;
	}

	/* Focus state più evidente su mobile */
	input:focus,
	select:focus,
	textarea:focus {
		outline: none;
		box-shadow: 0 0 0 3px var(--primary-light), var(--mobile-shadow-sm) !important;
	}

	/* Checkbox e radio buttons */
	input[type="checkbox"],
	input[type="radio"] {
		width: 24px;
		height: 24px;
		min-width: 44px;
		min-height: 44px;
		cursor: pointer;
	}

	/* ===== Header Mobile ===== */

	.header {
		flex-direction: column;
		align-items: center !important;
		gap: var(--mobile-spacing-md);
		padding: var(--mobile-spacing-md);
		padding-top: calc(var(--mobile-spacing-md) + var(--safe-area-inset-top));
		margin-bottom: var(--mobile-spacing-sm);
		background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.header h1 {
		font-size: var(--mobile-font-xxl) !important;
		text-align: center;
		margin: 0;
	}

	/* ===== Tab Navigation come Bottom Bar ===== */

	.tabs {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		padding: var(--mobile-spacing-xs) var(--mobile-spacing-sm) !important;
		padding-bottom: calc(var(--mobile-spacing-sm) + var(--safe-area-inset-bottom)) !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scrollbar-width: none;
		-ms-overflow-style: none;
		background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		border-top: 1px solid rgba(71, 85, 105, 0.5) !important;
		border-radius: 0 !important;
		z-index: 1000 !important;
		gap: 6px !important;
		margin: 0 !important;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
	}

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

	.tabs button {
		flex: 0 0 auto;
		min-width: 70px;
		max-width: 90px;
		min-height: 44px;
		padding: 8px 14px !important;
		font-size: var(--mobile-font-xs) !important;
		font-weight: 500;
		border-radius: var(--mobile-radius-sm) !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		background: transparent !important;
		border: none !important;
		color: var(--text-secondary);
		transition: all 0.2s ease;
	}

	.tabs button:active {
		transform: scale(0.95);
	}

	.tabs button.active {
		background: var(--primary) !important;
		color: white !important;
		font-weight: 600;
		box-shadow: var(--mobile-shadow-sm);
	}

	/* ===== Panel Mobile ===== */

	.panel {
		padding: var(--mobile-spacing-md) !important;
		border-radius: var(--mobile-radius-lg) !important;
		margin-bottom: var(--mobile-spacing-md) !important;
		box-shadow: var(--mobile-shadow-sm);
		border: 1px solid rgba(71, 85, 105, 0.3) !important;
	}

	.panel h2 {
		font-size: var(--mobile-font-lg) !important;
		font-weight: 700;
		margin-bottom: var(--mobile-spacing-md) !important;
		color: var(--text);
	}

	.panel h3 {
		font-size: var(--mobile-font-base) !important;
		font-weight: 600;
		margin-bottom: var(--mobile-spacing-sm) !important;
	}

	/* ===== Form Mobile ===== */

	.form-grid {
		grid-template-columns: 1fr !important;
		gap: var(--mobile-spacing-md) !important;
	}

	.form-group {
		margin-bottom: var(--mobile-spacing-sm);
	}

	.form-group label {
		font-size: var(--mobile-font-sm);
		font-weight: 600;
		margin-bottom: var(--mobile-spacing-xs);
		color: var(--text);
		display: block;
	}

	.form-actions {
		flex-direction: column !important;
		gap: var(--mobile-spacing-sm) !important;
		padding-top: var(--mobile-spacing-lg);
		padding-bottom: calc(var(--mobile-spacing-lg) + var(--safe-area-inset-bottom));
		position: sticky;
		bottom: calc(70px + var(--safe-area-inset-bottom));
		background: linear-gradient(0deg, var(--panel) 80%, transparent 100%);
		margin: 0 calc(-1 * var(--mobile-spacing-md));
		padding-left: var(--mobile-spacing-md);
		padding-right: var(--mobile-spacing-md);
	}

	.form-actions button {
		width: 100% !important;
		min-width: auto !important;
		padding: var(--mobile-spacing-md) !important;
	}

	/* ===== Filters Mobile ===== */

	.filters {
		flex-direction: column !important;
		gap: var(--mobile-spacing-sm) !important;
		padding: var(--mobile-spacing-md) !important;
		border-radius: var(--mobile-radius-md) !important;
		margin-bottom: var(--mobile-spacing-md);
	}

	.filters input,
	.filters select {
		width: 100% !important;
	}

	.filters button {
		width: 100% !important;
		margin-top: var(--mobile-spacing-xs);
	}

	/* ===== Table Mobile - Card Style ===== */

	.table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: var(--mobile-radius-md) !important;
	}

	.table th,
	.table td {
		padding: var(--mobile-spacing-sm) var(--mobile-spacing-md) !important;
		font-size: var(--mobile-font-sm) !important;
	}

	.table th {
		font-size: var(--mobile-font-xs) !important;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		background: var(--bg-tertiary) !important;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.table tbody tr {
		border-bottom: 1px solid var(--border);
	}

	.table tbody tr:active {
		background: var(--bg-tertiary) !important;
	}

	/* ===== Modal Mobile - Bottom Sheet Style ===== */

	.modal-overlay {
		padding: 0 !important;
		align-items: flex-end !important;
		background: rgba(0, 0, 0, 0.6) !important;
		backdrop-filter: blur(4px);
	}

	.modal-content {
		max-width: 100% !important;
		max-height: 92vh !important;
		width: 100% !important;
		height: auto;
		border-radius: var(--mobile-radius-xl) var(--mobile-radius-xl) 0 0 !important;
		margin: 0 !important;
		animation: slideUpModal 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
		box-shadow: var(--mobile-shadow-lg);
	}

	@keyframes slideUpModal {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}

	/* Handle indicator per drag */
	.modal-content::before {
		content: '';
		display: block;
		width: 40px;
		height: 4px;
		background: var(--border-light);
		border-radius: var(--mobile-radius-full);
		margin: var(--mobile-spacing-sm) auto var(--mobile-spacing-xs);
	}

	.modal-header {
		padding: var(--mobile-spacing-sm) var(--mobile-spacing-md) var(--mobile-spacing-md) !important;
		position: sticky;
		top: 0;
		z-index: 10;
		background: var(--panel);
		border-bottom: 1px solid var(--border);
	}

	.modal-header h2 {
		font-size: var(--mobile-font-lg) !important;
		font-weight: 700;
		margin: 0;
	}

	.modal-content > form,
	.modal-content > div {
		padding: var(--mobile-spacing-md) !important;
		padding-bottom: calc(var(--mobile-spacing-xl) + var(--safe-area-inset-bottom)) !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		max-height: calc(92vh - 70px);
	}

	/* Close button più grande e accessibile */
	.close-btn {
		width: var(--touch-target-min) !important;
		height: var(--touch-target-min) !important;
		font-size: 28px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--mobile-radius-full) !important;
		background: var(--bg-tertiary) !important;
		color: var(--text) !important;
	}

	.close-btn:active {
		background: var(--chip) !important;
	}

	/* ===== Badge Mobile ===== */

	.badge,
	.status-badge {
		font-size: var(--mobile-font-xs) !important;
		padding: 5px 10px !important;
		border-radius: var(--mobile-radius-full) !important;
		font-weight: 600;
	}

	/* ===== Full Screen Inspection ===== */

	.full-inspection-wrapper {
		padding: var(--mobile-spacing-md) !important;
		padding-top: calc(var(--mobile-spacing-md) + var(--safe-area-inset-top)) !important;
		padding-bottom: calc(var(--mobile-spacing-xl) + var(--safe-area-inset-bottom)) !important;
	}

	/* ===== Frequency Editor Mobile ===== */

	.frequency-editor-grid {
		grid-template-columns: 1fr !important;
		gap: var(--mobile-spacing-sm) !important;
	}

	.form-group.nested {
		margin-left: var(--mobile-spacing-md) !important;
		padding: var(--mobile-spacing-sm);
		background: var(--bg-secondary);
		border-radius: var(--mobile-radius-sm);
	}

	/* ===== Form Options (Radio/Checkbox groups) ===== */

	.form-option {
		padding: var(--mobile-spacing-md) !important;
		margin-bottom: var(--mobile-spacing-sm) !important;
		border-radius: var(--mobile-radius-md) !important;
	}

	.form-option:active {
		background: var(--bg-tertiary) !important;
	}

	/* ===== Calendar Mobile ===== */

	.calendar-view {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--mobile-spacing-md);
	}

	/* ===== Dashboard Cards ===== */

	.dashboard-card,
	.metric-card,
	.stat-card {
		padding: var(--mobile-spacing-md) !important;
		border-radius: var(--mobile-radius-lg) !important;
		margin-bottom: var(--mobile-spacing-sm) !important;
	}

	/* ===== Lists ===== */

	ul, ol {
		padding-left: var(--mobile-spacing-lg);
	}

	li {
		padding: var(--mobile-spacing-xs) 0;
		font-size: var(--mobile-font-base);
	}

	/* ===== Dividers ===== */

	hr {
		margin: var(--mobile-spacing-lg) 0 !important;
		border-color: var(--border);
	}

	/* ===== Empty States ===== */

	.empty-state {
		padding: var(--mobile-spacing-xl) var(--mobile-spacing-md);
		text-align: center;
	}

	.empty-state p {
		font-size: var(--mobile-font-base);
		color: var(--muted);
	}

	/* ===== Pull to Refresh Indicator ===== */

	.pull-refresh-indicator {
		position: fixed;
		top: var(--safe-area-inset-top);
		left: 50%;
		transform: translateX(-50%);
		padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
		background: var(--panel);
		border-radius: var(--mobile-radius-full);
		box-shadow: var(--mobile-shadow-md);
		z-index: 1001;
		opacity: 0;
		transition: opacity 0.2s;
	}

	.pull-refresh-indicator.visible {
		opacity: 1;
	}

}

/* =====================================================
   EXTRA SMALL DEVICES (iPhone SE, small Android)
   ===================================================== */

@media (max-width: 375px) {

	:root {
		--mobile-font-xs: 10px;
		--mobile-font-sm: 12px;
		--mobile-font-base: 14px;
		--mobile-font-lg: 16px;
	}

	.tabs {
		padding: var(--mobile-spacing-xs) !important;
	}

	.tabs button {
		min-width: 55px !important;
		max-width: 70px !important;
		padding: 6px 10px !important;
		font-size: 10px !important;
	}

	.panel {
		padding: var(--mobile-spacing-sm) !important;
	}

	.modal-header {
		padding: var(--mobile-spacing-sm) !important;
	}

	.modal-header h2 {
		font-size: var(--mobile-font-base) !important;
	}

	.header h1 {
		font-size: var(--mobile-font-xl) !important;
	}

	.container {
		padding: var(--mobile-spacing-sm) !important;
		padding-bottom: calc(90px + var(--safe-area-inset-bottom)) !important;
	}

	button {
		padding: var(--mobile-spacing-xs) var(--mobile-spacing-sm) !important;
	}

}

/* =====================================================
   LANDSCAPE MODE
   ===================================================== */

@media (max-width: 1024px) and (orientation: landscape) {

	/* In landscape, tabs sulla sinistra come sidebar */
	.tabs {
		position: fixed !important;
		left: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		right: auto !important;
		width: auto !important;
		max-width: 70px !important;
		flex-direction: column !important;
		padding: var(--mobile-spacing-sm) !important;
		padding-left: calc(var(--mobile-spacing-sm) + var(--safe-area-inset-left)) !important;
		padding-top: calc(var(--mobile-spacing-sm) + var(--safe-area-inset-top)) !important;
		padding-bottom: calc(var(--mobile-spacing-sm) + var(--safe-area-inset-bottom)) !important;
		border-top: none !important;
		border-right: 1px solid var(--border) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
	}

	.tabs button {
		min-width: 50px !important;
		max-width: 60px !important;
		width: 100% !important;
		font-size: 9px !important;
	}

	.container {
		padding-left: calc(80px + var(--safe-area-inset-left)) !important;
		padding-bottom: var(--mobile-spacing-md) !important;
	}

	.header {
		padding-top: var(--mobile-spacing-md);
	}

	/* Modal più piccolo in landscape */
	.modal-content {
		max-height: 85vh !important;
	}

}

/* =====================================================
   TABLET (iPad, etc.) - Layout ottimizzato
   ===================================================== */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

	/* Tabs tornano in alto su tablet portrait */
	.tabs {
		position: relative !important;
		bottom: auto !important;
		padding: var(--mobile-spacing-sm) !important;
		padding-bottom: var(--mobile-spacing-sm) !important;
		border-top: none !important;
		border-radius: var(--mobile-radius-md) !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		background: var(--panel) !important;
		justify-content: center;
	}

	.tabs button {
		min-width: auto !important;
		max-width: none !important;
		padding: var(--mobile-spacing-sm) var(--mobile-spacing-lg) !important;
		font-size: var(--mobile-font-sm) !important;
	}

	.container {
		padding: var(--mobile-spacing-lg) !important;
		padding-bottom: var(--mobile-spacing-lg) !important;
		max-width: 720px !important;
		margin: 0 auto;
	}

	.modal-content {
		max-width: 560px !important;
		max-height: 85vh !important;
		height: auto !important;
		border-radius: var(--mobile-radius-xl) !important;
		margin: auto !important;
	}

	.modal-content::before {
		display: none; /* Nascondi handle su tablet */
	}

	.form-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.form-actions {
		flex-direction: row !important;
		justify-content: flex-end !important;
		position: relative;
		bottom: auto;
		background: none;
		margin: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.form-actions button {
		width: auto !important;
		min-width: 140px !important;
	}

	.panel {
		padding: var(--mobile-spacing-lg) !important;
	}

}

/* =====================================================
   KEYBOARD HANDLING
   ===================================================== */

.keyboard-open .tabs {
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
}

.keyboard-open .fixed-bottom {
	display: none !important;
}

.keyboard-open .form-actions {
	position: relative;
	bottom: auto;
}

/* =====================================================
   iOS SPECIFIC
   ===================================================== */

.capacitor-ios .header {
	padding-top: calc(50px + var(--safe-area-inset-top)) !important;
}

.capacitor-ios .modal-content {
	border-radius: var(--mobile-radius-xl) var(--mobile-radius-xl) 0 0 !important;
}

/* iOS rubber band effect fix */
.capacitor-ios .modal-content > form,
.capacitor-ios .modal-content > div {
	overscroll-behavior: contain;
}

/* =====================================================
   ANDROID SPECIFIC
   ===================================================== */

.capacitor-android .tabs {
	/* Android navigation bar compensation */
	padding-bottom: calc(var(--mobile-spacing-sm) + var(--safe-area-inset-bottom) + 8px) !important;
}

/* Material Design ripple effect */
@media (hover: none) and (pointer: coarse) {

	button,
	.clickable,
	.tabs button {
		position: relative;
		overflow: hidden;
	}

	button::after,
	.clickable::after,
	.tabs button::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
		pointer-events: none;
		opacity: 0;
	}

	button:active::after,
	.clickable:active::after,
	.tabs button:active::after {
		width: 250%;
		height: 250%;
		opacity: 1;
		transition: width 0s, height 0s, opacity 0s;
	}

}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */

@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;
	}

	.modal-content {
		animation: none !important;
	}
}

@media (prefers-contrast: high) {
	:root {
		--border: #ffffff;
		--text: #ffffff;
		--bg: #000000;
		--panel: #111111;
	}

	button, input, select, textarea {
		border-width: 2px !important;
	}
}

/* Focus visible per navigazione keyboard/screen reader */
@media (max-width: 1024px) {
	*:focus-visible {
		outline: 3px solid var(--primary) !important;
		outline-offset: 2px;
	}
}

/* =====================================================
   DARK MODE (già attivo di default)
   ===================================================== */

@media (prefers-color-scheme: dark) {
	html {
		color-scheme: dark;
	}
}

/* =====================================================
   LOADING STATES
   ===================================================== */

.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.95);
	backdrop-filter: blur(8px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--mobile-spacing-md);
	z-index: 9999;
}

.loading-spinner {
	width: 44px;
	height: 44px;
	border: 3px solid var(--border);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.loading-text {
	font-size: var(--mobile-font-sm);
	color: var(--muted);
}

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

/* =====================================================
   TOAST MOBILE POSITION
   ===================================================== */

@media (max-width: 1024px) {

	.toast {
		position: fixed !important;
		bottom: calc(85px + var(--safe-area-inset-bottom)) !important;
		left: var(--mobile-spacing-md) !important;
		right: var(--mobile-spacing-md) !important;
		max-width: none !important;
		border-radius: var(--mobile-radius-md) !important;
		box-shadow: var(--mobile-shadow-lg) !important;
		animation: toastSlideUp 0.3s ease-out;
	}

	@keyframes toastSlideUp {
		from {
			transform: translateY(100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

}

/* =====================================================
   SCROLLBAR MOBILE (nascosta ma funzionante)
   ===================================================== */

@media (max-width: 1024px) {

	/* Nascondi scrollbar ma mantieni funzionalità */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background: transparent;
	}

	/* Scrollbar sottile per aree specifiche che ne hanno bisogno */
	.table::-webkit-scrollbar,
	.modal-content > div::-webkit-scrollbar,
	.modal-content > form::-webkit-scrollbar {
		height: 4px;
		width: 4px;
	}

	.table::-webkit-scrollbar-thumb,
	.modal-content > div::-webkit-scrollbar-thumb,
	.modal-content > form::-webkit-scrollbar-thumb {
		background: var(--border);
		border-radius: var(--mobile-radius-full);
	}

}

/* =====================================================
   SELECTION COLORS
   ===================================================== */

::selection {
	background: var(--primary);
	color: white;
}

::-moz-selection {
	background: var(--primary);
	color: white;
}

/* =====================================================
   PAGE-SPECIFIC MOBILE STYLES - AGGRESSIVE OVERRIDES
   Ottimizzazioni per tutte le pagine dell'applicazione
   ===================================================== */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {

	/* ===== CRITICAL: Z-INDEX FIXES ===== */

	/* Assicura che i tabs siano sempre sopra tutto tranne i modal */
	.tabs {
		z-index: 900 !important;
	}

	/* Modal overlay sopra tutto */
	.modal-overlay,
	div[style*="position: 'fixed'"][style*="inset"],
	div[style*="position: fixed"][style*="inset: 0"] {
		z-index: 1000 !important;
	}

	/* Modal content sopra overlay */
	.modal-content {
		z-index: 1001 !important;
	}

	/* ===== GRID LAYOUT FIX - FORZA COLONNA SINGOLA ===== */

	/* Tutti i grid con auto-fit devono diventare colonna singola */
	div[style*="gridTemplateColumns"][style*="repeat"],
	div[style*="grid-template-columns"][style*="repeat"],
	div[style*="gridTemplateColumns: 'repeat"],
	div[style*="display: 'grid'"],
	div[style*="display: grid"] {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--mobile-spacing-sm) !important;
	}

	/* Fix specifico per dashboard e deadlines stats */
	.deadlines-page > div[style*="grid"],
	.dashboard-page > div[style*="grid"],
	div[style*="gridTemplateColumns: 'repeat(auto-fit"] {
		display: flex !important;
		flex-direction: column !important;
	}

	/* ===== STAT CARDS ===== */

	/* Cards statistiche visibili */
	div[style*="padding: '18px'"],
	div[style*="padding: 18px"],
	div[style*="padding: '20px'"],
	div[style*="padding: 20px"] {
		padding: var(--mobile-spacing-md) !important;
		margin-bottom: var(--mobile-spacing-xs) !important;
		border-radius: var(--mobile-radius-md) !important;
	}

	/* Numeri grandi più piccoli */
	div[style*="fontSize: '48px'"],
	div[style*="fontSize: '30px'"],
	div[style*="font-size: 48px"],
	div[style*="font-size: 30px"] {
		font-size: 28px !important;
	}

	/* ===== HEADER E TITOLI ===== */

	/* Header pagine */
	div[style*="justifyContent: 'space-between'"][style*="marginBottom"] {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: var(--mobile-spacing-md) !important;
	}

	/* Titoli h2 */
	h2[style*="margin: 0"],
	h2[style*="margin: '0'"] {
		font-size: var(--mobile-font-lg) !important;
		text-align: center !important;
	}

	/* Bottoni header affiancati */
	div[style*="justifyContent: 'space-between'"] > div[style*="display: 'flex'"][style*="gap"] {
		flex-direction: column !important;
		width: 100% !important;
	}

	div[style*="justifyContent: 'space-between'"] > div[style*="display: 'flex'"][style*="gap"] button {
		width: 100% !important;
	}

	/* ===== FILTRI - MOLTO IMPORTANTE ===== */

	/* Container filtri */
	.filters,
	div[style*="display: 'flex'"][style*="gap: 15"],
	div[style*="display: 'flex'"][style*="gap: '15"],
	div[style*="display: 'flex'"][style*="flexWrap"] {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: var(--mobile-spacing-sm) !important;
	}

	/* Tutti i select nei filtri */
	.filters select,
	div[style*="display: 'flex'"][style*="gap"] select {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* Tutti gli input nei filtri */
	.filters input,
	div[style*="display: 'flex'"][style*="gap"] input[type="text"],
	div[style*="display: 'flex'"][style*="gap"] input[type="date"],
	div[style*="display: 'flex'"][style*="gap"] input[type="search"] {
		width: 100% !important;
	}

	/* Bottoni reset filtri */
	.filters button,
	button[style*="Reset"] {
		width: 100% !important;
		margin-top: var(--mobile-spacing-xs) !important;
	}

	/* ===== BOTTONI GENERICI ===== */

	/* Bottoni pill/rounded */
	button[style*="borderRadius: '999px'"],
	button[style*="border-radius: 999px"],
	button[style*="borderRadius: '8px'"],
	button[style*="border-radius: 8px"] {
		width: 100% !important;
		padding: var(--mobile-spacing-md) !important;
		font-size: var(--mobile-font-sm) !important;
		text-align: center !important;
		justify-content: center !important;
	}

	/* Container bottoni azioni */
	div[style*="display: 'flex'"][style*="gap: '12px'"],
	div[style*="display: 'flex'"][style*="gap: '8px'"],
	div[style*="display: flex"][style*="gap: 12px"],
	div[style*="display: flex"][style*="gap: 8px"] {
		flex-direction: column !important;
		width: 100% !important;
	}

	/* ===== PAGINE SPECIFICHE ===== */

	/* Deadlines page */
	.deadlines-page {
		padding: var(--mobile-spacing-md) !important;
	}

	/* Calendar page */
	.calendar-page {
		padding: var(--mobile-spacing-sm) !important;
		border-radius: var(--mobile-radius-md) !important;
	}

	/* Calendar header buttons */
	.calendar-page > div:first-child {
		flex-direction: column !important;
		gap: var(--mobile-spacing-sm) !important;
	}

	.calendar-page > div:first-child > div {
		flex-direction: column !important;
		width: 100% !important;
	}

	.calendar-page > div:first-child > div button {
		width: 100% !important;
	}

	.calendar-page > div:first-child > div select {
		width: 100% !important;
	}

	/* Calendar grid view - scroll orizzontale */
	.calendar-page div[style*="overflowX"] {
		margin: 0 calc(-1 * var(--mobile-spacing-sm)) !important;
		padding: 0 var(--mobile-spacing-sm) !important;
	}

	/* Calendar outlook view - celle più piccole */
	.calendar-page div[style*="minHeight: '90px'"] {
		min-height: 60px !important;
		padding: 3px !important;
	}

	.calendar-page div[style*="minHeight: '90px'"] > div:first-child {
		font-size: 10px !important;
	}

	/* Nascondi testo scadenze nel calendario, mostra solo pallino */
	.calendar-page div[style*="maxHeight: '65px'"] > div {
		padding: 2px !important;
		font-size: 0 !important;
	}

	.calendar-page div[style*="maxHeight: '65px'"] > div span:first-child {
		font-size: 10px !important;
	}

	/* ===== TABELLE ===== */

	table, .table {
		display: block !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		max-width: 100% !important;
		font-size: var(--mobile-font-xs) !important;
	}

	table th, .table th {
		padding: 6px 8px !important;
		font-size: 10px !important;
		white-space: nowrap !important;
		background: var(--bg-tertiary) !important;
		position: sticky !important;
		top: 0 !important;
		z-index: 5 !important;
	}

	table td, .table td {
		padding: 8px !important;
		font-size: var(--mobile-font-xs) !important;
		white-space: nowrap !important;
	}

	/* Colonna template/nome più stretta */
	table th:first-child,
	table td:first-child,
	.table th:first-child,
	.table td:first-child {
		max-width: 150px !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

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

	/* Modal overlay - assicura copertura totale */
	.modal-overlay {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		background: rgba(0, 0, 0, 0.7) !important;
		backdrop-filter: blur(4px) !important;
		padding: 0 !important;
		display: flex !important;
		align-items: flex-end !important;
		justify-content: center !important;
	}

	/* Modal content - bottom sheet */
	.modal-content {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: 90vh !important;
		margin: 0 !important;
		border-radius: var(--mobile-radius-xl) var(--mobile-radius-xl) 0 0 !important;
		overflow: hidden !important;
	}

	/* Modal body scrollabile */
	.modal-content > div,
	.modal-content > form {
		max-height: calc(90vh - 60px) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		padding: var(--mobile-spacing-md) !important;
		padding-bottom: calc(var(--mobile-spacing-xl) + var(--safe-area-inset-bottom)) !important;
	}

	/* Form grid in modal */
	.modal-content .form-grid,
	.modal-content div[style*="gridTemplateColumns"] {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--mobile-spacing-sm) !important;
	}

	/* ===== POPOVERS E TOOLTIP ===== */

	/* Tooltip/popover su hover calendario - converti in bottom sheet */
	div[style*="position: 'absolute'"][style*="zIndex: 1000"],
	div[style*="position: absolute"][style*="z-index: 1000"],
	div[style*="position: 'absolute'"][style*="top: '100%'"] {
		position: fixed !important;
		top: auto !important;
		left: var(--mobile-spacing-sm) !important;
		right: var(--mobile-spacing-sm) !important;
		bottom: calc(80px + var(--safe-area-inset-bottom)) !important;
		transform: none !important;
		max-width: none !important;
		width: auto !important;
		max-height: 40vh !important;
		overflow-y: auto !important;
		border-radius: var(--mobile-radius-lg) !important;
		box-shadow: var(--mobile-shadow-lg) !important;
		z-index: 950 !important;
	}

	/* ===== LISTE E CARDS ===== */

	/* Cards autorizzazioni e NC */
	ul[style*="listStyle: 'none'"] li,
	ul[style*="list-style: none"] li {
		padding: var(--mobile-spacing-md) !important;
		margin-bottom: var(--mobile-spacing-sm) !important;
	}

	/* Bottoni nelle cards */
	ul[style*="listStyle: 'none'"] li div[style*="gap"],
	ul[style*="list-style: none"] li div[style*="gap"] {
		flex-direction: column !important;
		width: 100% !important;
		margin-top: var(--mobile-spacing-sm) !important;
	}

	ul[style*="listStyle: 'none'"] li button,
	ul[style*="list-style: none"] li button {
		width: 100% !important;
	}

	/* NC list items con border left */
	div[style*="borderLeft: '4px"],
	div[style*="border-left: 4px"] {
		padding: var(--mobile-spacing-md) !important;
		margin-bottom: var(--mobile-spacing-sm) !important;
	}

	/* ===== FORM IMPROVEMENTS ===== */

	/* Form labels */
	label[style*="fontSize: '12px'"],
	label[style*="font-size: 12px"],
	.form-group label {
		font-size: var(--mobile-font-sm) !important;
		margin-bottom: 4px !important;
	}

	/* Form group spacing */
	.form-group {
		margin-bottom: var(--mobile-spacing-md) !important;
	}

	/* Select e input */
	select, input, textarea {
		min-height: var(--touch-target-min) !important;
		padding: var(--mobile-spacing-sm) var(--mobile-spacing-md) !important;
	}

	/* ===== TEXT OVERFLOW ===== */

	/* Tronca testi lunghi */
	td, th,
	div[style*="overflow: 'hidden'"],
	div[style*="textOverflow"],
	span[style*="overflow"] {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

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

	div[style*="height: '6px'"],
	div[style*="height: 6px"] {
		height: 6px !important;
		border-radius: var(--mobile-radius-full) !important;
	}

	/* ===== BADGES E CHIPS ===== */

	span[style*="borderRadius: '999px'"],
	span[style*="border-radius: 999px"] {
		font-size: 10px !important;
		padding: 3px 8px !important;
		white-space: nowrap !important;
	}

	/* ===== EMPTY STATES ===== */

	div[style*="textAlign: 'center'"][style*="padding"] {
		padding: var(--mobile-spacing-lg) var(--mobile-spacing-md) !important;
	}

}

/* =====================================================
   EXTRA SMALL DEVICES (< 375px)
   ===================================================== */

@media (max-width: 375px) {

	/* Font ancora più piccoli */
	div[style*="fontSize: '48px'"],
	div[style*="fontSize: '30px'"] {
		font-size: 24px !important;
	}

	/* Tabs super compatti */
	.tabs button {
		padding: 6px 8px !important;
		font-size: 9px !important;
		min-width: 50px !important;
	}

	/* Container padding ridotto */
	.container {
		padding: var(--mobile-spacing-xs) !important;
	}

	/* Panels padding ridotto */
	.panel,
	.deadlines-page,
	.calendar-page {
		padding: var(--mobile-spacing-xs) !important;
	}

	/* Calendar cells minime */
	.calendar-page div[style*="minHeight: '90px'"] {
		min-height: 45px !important;
	}

	/* Nascondi completamente le scadenze nel calendario */
	.calendar-page div[style*="maxHeight: '65px'"] {
		display: none !important;
	}

	/* Solo pallino indicatore */
	.calendar-page div[style*="position: 'absolute'"][style*="width: '8px'"] {
		width: 6px !important;
		height: 6px !important;
	}

}

/* =====================================================
   LANDSCAPE MOBILE FIXES
   ===================================================== */

@media (max-height: 500px) and (orientation: landscape) {

	/* Modal più piccolo in landscape */
	.modal-content {
		max-height: 95vh !important;
	}

	.modal-content > div,
	.modal-content > form {
		max-height: calc(95vh - 50px) !important;
	}

	/* Tabs sidebar in landscape */
	.tabs {
		position: fixed !important;
		left: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		right: auto !important;
		width: 60px !important;
		flex-direction: column !important;
		padding: var(--mobile-spacing-xs) !important;
		overflow-y: auto !important;
	}

	.tabs button {
		width: 100% !important;
		font-size: 8px !important;
		padding: 6px 4px !important;
	}

	.container {
		padding-left: 70px !important;
		padding-bottom: var(--mobile-spacing-md) !important;
	}

}
/**
 * Mobile Pro UI - Stile professionale per app mobile
 * Ispirato alle migliori app iOS/Android (Notion, Linear, Slack)
 */

/* =====================================================
   CSS VARIABLES - Design System Mobile
   ===================================================== */

:root {
	/* Colori primari più vibranti */
	--mobile-primary: #6366f1;
	--mobile-primary-dark: #4f46e5;
	--mobile-primary-light: #818cf8;
	--mobile-primary-bg: rgba(99, 102, 241, 0.1);

	/* Surface colors */
	--mobile-surface-1: #0f172a;
	--mobile-surface-2: #1e293b;
	--mobile-surface-3: #334155;
	--mobile-surface-elevated: #1e293b;

	/* Text colors */
	--mobile-text-primary: #f8fafc;
	--mobile-text-secondary: #94a3b8;
	--mobile-text-tertiary: #64748b;

	/* Status colors */
	--mobile-success: #22c55e;
	--mobile-warning: #f59e0b;
	--mobile-error: #ef4444;
	--mobile-info: #3b82f6;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;

	/* Border radius scale */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
	--shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);

	/* Animation */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =====================================================
   MOBILE PROFESSIONAL STYLES
   ===================================================== */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {

	/* ===== BOTTOM NAVIGATION BAR - Stile iOS/Android moderno ===== */

	.tabs {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		height: auto !important;
		padding: var(--space-2) var(--space-3) !important;
		padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) !important;
		background: rgba(15, 23, 42, 0.85) !important;
		backdrop-filter: blur(20px) saturate(180%) !important;
		-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
		border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
		border-radius: 0 !important;
		box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3) !important;
		z-index: 1000 !important;
		display: flex !important;
		justify-content: space-around !important;
		align-items: center !important;
		gap: var(--space-1) !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
	}

	.tabs::-webkit-scrollbar {
		display: none !important;
	}

	.tabs button {
		flex: 1 1 0 !important;
		min-width: 60px !important;
		max-width: 90px !important;
		min-height: 52px !important;
		padding: var(--space-2) var(--space-2) !important;
		margin: 0 !important;
		background: transparent !important;
		border: none !important;
		border-radius: var(--radius-md) !important;
		color: var(--mobile-text-tertiary) !important;
		font-size: 10px !important;
		font-weight: 500 !important;
		letter-spacing: 0.2px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: var(--space-1) !important;
		transition: all 0.2s var(--ease-out) !important;
		position: relative !important;
		overflow: hidden !important;
	}

	.tabs button::before {
		content: '' !important;
		position: absolute !important;
		top: 4px !important;
		left: 50% !important;
		transform: translateX(-50%) scale(0) !important;
		width: 4px !important;
		height: 4px !important;
		background: var(--mobile-primary) !important;
		border-radius: var(--radius-full) !important;
		transition: transform 0.2s var(--ease-spring) !important;
		opacity: 0 !important;
	}

	.tabs button.active {
		color: var(--mobile-primary-light) !important;
		background: var(--mobile-primary-bg) !important;
	}

	.tabs button.active::before {
		transform: translateX(-50%) scale(1) !important;
		opacity: 1 !important;
	}

	.tabs button:active {
		transform: scale(0.92) !important;
		opacity: 0.8 !important;
	}

	/* ===== HEADER - Design minimalista ===== */

	.header {
		position: sticky !important;
		top: 0 !important;
		z-index: 100 !important;
		padding: var(--space-4) !important;
		padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px)) !important;
		margin: 0 !important;
		margin-bottom: var(--space-4) !important;
		background: linear-gradient(180deg, var(--mobile-surface-1) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
		backdrop-filter: blur(12px) !important;
		border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: var(--space-3) !important;
	}

	.header h1 {
		font-size: 24px !important;
		font-weight: 700 !important;
		letter-spacing: -0.5px !important;
		margin: 0 !important;
		text-align: left !important;
	}

	/* ===== CONTAINER - Spazi ottimizzati ===== */

	.container {
		padding: var(--space-4) !important;
		padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	/* ===== CARDS - Stile glassmorphism ===== */

	.panel {
		background: var(--mobile-surface-2) !important;
		border: 1px solid rgba(148, 163, 184, 0.1) !important;
		border-radius: var(--radius-lg) !important;
		padding: var(--space-4) !important;
		margin-bottom: var(--space-4) !important;
		box-shadow: var(--shadow-sm) !important;
	}

	.panel h2 {
		font-size: 18px !important;
		font-weight: 700 !important;
		margin-bottom: var(--space-4) !important;
		color: var(--mobile-text-primary) !important;
	}

	/* ===== BUTTONS - Touch-friendly con feedback ===== */

	button {
		min-height: 48px !important;
		padding: var(--space-3) var(--space-4) !important;
		border-radius: var(--radius-md) !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		transition: all 0.15s var(--ease-out) !important;
		position: relative !important;
		overflow: hidden !important;
	}

	button:active {
		transform: scale(0.97) !important;
	}

	/* Il reset generico dei button sopra (position/overflow/min-height) rompe
	   i bottoni "elimina/ruota foto" ancorati in absolute negli angoli della miniatura:
	   ripristina qui con selettore più specifico. */
	button.photo-delete-btn,
	button.photo-rotate-btn {
		position: absolute !important;
		min-height: 0 !important;
		width: 36px !important;
		height: 36px !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: visible !important;
		border-radius: 50% !important;
	}

	button.photo-delete-btn {
		top: 2px !important;
		right: 2px !important;
		font-size: 20px !important;
	}

	button.photo-rotate-btn {
		bottom: 2px !important;
		right: 2px !important;
		font-size: 18px !important;
	}

	button.primary {
		background: linear-gradient(135deg, var(--mobile-primary) 0%, var(--mobile-primary-dark) 100%) !important;
		box-shadow: var(--shadow-md), 0 0 20px rgba(99, 102, 241, 0.2) !important;
	}

	button.primary:active {
		box-shadow: var(--shadow-sm) !important;
	}

	/* ===== INPUTS - Design moderno ===== */

	input, select, textarea {
		min-height: 48px !important;
		padding: var(--space-3) var(--space-4) !important;
		background: var(--mobile-surface-1) !important;
		border: 1.5px solid rgba(148, 163, 184, 0.15) !important;
		border-radius: var(--radius-md) !important;
		font-size: 16px !important;
		color: var(--mobile-text-primary) !important;
		transition: all 0.2s var(--ease-out) !important;
	}

	input:focus, select:focus, textarea:focus {
		border-color: var(--mobile-primary) !important;
		box-shadow: 0 0 0 3px var(--mobile-primary-bg), var(--shadow-sm) !important;
		outline: none !important;
	}

	input::placeholder, textarea::placeholder {
		color: var(--mobile-text-tertiary) !important;
	}

	/* ===== LISTS - Card-based layout ===== */

	.table {
		display: block !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	.table thead {
		display: none !important;
	}

	.table tbody {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--space-3) !important;
	}

	.table tbody tr {
		display: flex !important;
		flex-direction: column !important;
		background: var(--mobile-surface-2) !important;
		border: 1px solid rgba(148, 163, 184, 0.1) !important;
		border-radius: var(--radius-lg) !important;
		padding: var(--space-4) !important;
		gap: var(--space-2) !important;
		transition: all 0.2s var(--ease-out) !important;
	}

	.table tbody tr:active {
		transform: scale(0.99) !important;
		background: var(--mobile-surface-3) !important;
	}

	.table tbody td {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: var(--space-2) 0 !important;
		border: none !important;
		font-size: 14px !important;
	}

	.table tbody td::before {
		content: attr(data-label) !important;
		font-weight: 600 !important;
		color: var(--mobile-text-tertiary) !important;
		font-size: 12px !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
	}

	/* ===== BADGES - Pill style ===== */

	.badge, .status-badge {
		display: inline-flex !important;
		align-items: center !important;
		padding: var(--space-1) var(--space-3) !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		letter-spacing: 0.3px !important;
		border-radius: var(--radius-full) !important;
		text-transform: uppercase !important;
	}

	/* ===== MODALS - Bottom sheet con gesture ===== */

	.modal-overlay {
		background: rgba(0, 0, 0, 0.6) !important;
		backdrop-filter: blur(8px) !important;
		padding: 0 !important;
		align-items: flex-end !important;
	}

	.modal-content {
		width: 100% !important;
		max-width: 100% !important;
		max-height: 92vh !important;
		margin: 0 !important;
		border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
		background: var(--mobile-surface-2) !important;
		border: none !important;
		border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
		animation: slideUpSheet 0.35s var(--ease-out) !important;
	}

	@keyframes slideUpSheet {
		from {
			transform: translateY(100%);
			opacity: 0.5;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	/* Handle indicator */
	.modal-content::before {
		content: '' !important;
		display: block !important;
		width: 36px !important;
		height: 5px !important;
		background: rgba(148, 163, 184, 0.3) !important;
		border-radius: var(--radius-full) !important;
		margin: var(--space-3) auto var(--space-2) !important;
	}

	.modal-header {
		position: sticky !important;
		top: 0 !important;
		z-index: 10 !important;
		padding: var(--space-3) var(--space-4) var(--space-4) !important;
		background: var(--mobile-surface-2) !important;
		border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
	}

	.modal-header h2 {
		font-size: 18px !important;
		font-weight: 700 !important;
		margin: 0 !important;
	}

	.modal-content > form,
	.modal-content > div {
		padding: var(--space-4) !important;
		padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.close-btn {
		width: 36px !important;
		height: 36px !important;
		background: var(--mobile-surface-3) !important;
		border-radius: var(--radius-full) !important;
		font-size: 18px !important;
	}

	/* ===== FORM LAYOUT ===== */

	.form-grid {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--space-4) !important;
	}

	.form-group {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--space-2) !important;
	}

	.form-group label {
		font-size: 13px !important;
		font-weight: 600 !important;
		color: var(--mobile-text-secondary) !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
	}

	.form-actions {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--space-3) !important;
		padding-top: var(--space-4) !important;
		margin-top: var(--space-4) !important;
		border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
	}

	.form-actions button {
		width: 100% !important;
	}

	/* ===== FILTERS - Horizontal scroll chips ===== */

	.filters {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--space-3) !important;
		padding: var(--space-3) !important;
		background: var(--mobile-surface-2) !important;
		border-radius: var(--radius-lg) !important;
		border: 1px solid rgba(148, 163, 184, 0.1) !important;
	}

	.filters input,
	.filters select,
	.filters button {
		width: 100% !important;
	}

	/* ===== INSPECTION CARDS - Stile professionale ===== */

	div[style*="gridTemplateColumns: 'repeat(auto-fit"] {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--space-3) !important;
	}

	/* Template cards */
	div[style*="borderRadius: '16px'"][style*="padding: '20px'"] {
		background: var(--mobile-surface-2) !important;
		border: 1px solid rgba(148, 163, 184, 0.1) !important;
		border-radius: var(--radius-lg) !important;
		padding: var(--space-4) !important;
		transition: all 0.2s var(--ease-out) !important;
	}

	div[style*="borderRadius: '16px'"][style*="padding: '20px'"]:active {
		transform: scale(0.99) !important;
		background: var(--mobile-surface-3) !important;
	}

	/* ===== HEADER GRADIENTS - Più compatti su mobile ===== */

	div[style*="linear-gradient(135deg"] {
		padding: var(--space-4) !important;
		border-radius: var(--radius-lg) !important;
	}

	div[style*="linear-gradient(135deg"] h2 {
		font-size: 18px !important;
	}

	div[style*="linear-gradient(135deg"] p {
		font-size: 13px !important;
	}

	/* ===== STATUS TABS - Pill navigation ===== */

	div[style*="display: 'flex'"][style*="gap: '8px'"][style*="marginBottom"] {
		display: flex !important;
		overflow-x: auto !important;
		gap: var(--space-2) !important;
		padding-bottom: var(--space-2) !important;
		scrollbar-width: none !important;
		-webkit-overflow-scrolling: touch !important;
	}

	div[style*="display: 'flex'"][style*="gap: '8px'"][style*="marginBottom"]::-webkit-scrollbar {
		display: none !important;
	}

	div[style*="display: 'flex'"][style*="gap: '8px'"][style*="marginBottom"] button {
		flex: 0 0 auto !important;
		white-space: nowrap !important;
		min-width: auto !important;
		padding: var(--space-2) var(--space-4) !important;
	}

	/* ===== RUN CARDS - Lista compatta ===== */

	div[style*="borderLeft: '4px solid"] {
		border-left-width: 3px !important;
		border-radius: var(--radius-md) !important;
		padding: var(--space-4) !important;
		margin-bottom: var(--space-3) !important;
		background: var(--mobile-surface-2) !important;
	}

	/* ===== EMPTY STATES ===== */

	div[style*="textAlign: 'center'"][style*="padding: '32px'"] {
		padding: var(--space-8) var(--space-4) !important;
		border-radius: var(--radius-lg) !important;
	}

	/* ===== SCROLLABLE AREAS ===== */

	* {
		-webkit-overflow-scrolling: touch;
	}

	/* Nascondi scrollbar ma mantieni funzionalità */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

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

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

	.panel, .table tbody tr {
		animation: fadeInUp 0.3s var(--ease-out);
	}

	/* ===== TOUCH FEEDBACK ===== */

	button, a, .clickable, input, select, textarea {
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}

	/* ===== REDUCE MOTION ===== */

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: 0.01ms !important;
			transition-duration: 0.01ms !important;
		}
	}

}

/* =====================================================
   INSPECTION EXECUTION PAGE - Stile ottimizzato mobile
   ===================================================== */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {

	/* Full inspection wrapper */
	.full-inspection-wrapper {
		padding: var(--space-3) !important;
		padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px)) !important;
		padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
		background: var(--mobile-surface-1) !important;
		min-height: 100vh !important;
	}

	/* Question cards in inspection */
	.full-inspection-wrapper div[style*="borderRadius: '16px'"],
	.full-inspection-wrapper div[style*="border-radius: 16px"] {
		background: var(--mobile-surface-2) !important;
		border: 1px solid rgba(148, 163, 184, 0.1) !important;
		border-radius: var(--radius-lg) !important;
		padding: var(--space-4) !important;
		margin-bottom: var(--space-3) !important;
	}

	/* Answer buttons - BIG touch targets */
	.full-inspection-wrapper button[style*="minWidth: '60px'"],
	.full-inspection-wrapper button[style*="min-width: 60px"] {
		min-height: 56px !important;
		min-width: 56px !important;
		border-radius: var(--radius-md) !important;
		font-size: 14px !important;
		font-weight: 700 !important;
	}

	/* Camera/upload buttons */
	.full-inspection-wrapper label,
	.full-inspection-wrapper button[style*="dashed"] {
		min-height: 52px !important;
		border-radius: var(--radius-md) !important;
	}

	/* Note textarea in inspection */
	.full-inspection-wrapper textarea {
		min-height: 70px !important;
		border-radius: var(--radius-md) !important;
		font-size: 15px !important;
	}

	/* Bottom action bar fixed */
	.full-inspection-wrapper > div[style*="position: 'sticky'"],
	.full-inspection-wrapper > div[style*="position: sticky"] {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		padding: var(--space-4) !important;
		padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) !important;
		background: rgba(15, 23, 42, 0.95) !important;
		backdrop-filter: blur(20px) !important;
		border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
		z-index: 100 !important;
	}

}

/* =====================================================
   COMPLIANCE BUTTONS - Griglia 2x2 forzata su mobile
   ===================================================== */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {

	/* Griglia pulsanti compliance - FORZA 2x2 */
	.compliance-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 6px !important;
		width: 100% !important;
	}

	.compliance-grid button {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 4px !important;
		padding: 10px 8px !important;
		min-height: 44px !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		border-radius: 8px !important;
	}

	/* Severity buttons sotto NC */
	.severity-buttons {
		display: flex !important;
		flex-direction: row !important;
		gap: 6px !important;
		width: 100% !important;
	}

	.severity-buttons button {
		flex: 1 !important;
		padding: 10px !important;
		font-size: 12px !important;
	}

}

/* =====================================================
   EXTRA SMALL DEVICES
   ===================================================== */

@media (max-width: 375px) {

	.tabs button {
		min-width: 50px !important;
		font-size: 9px !important;
	}

	.container {
		padding: var(--space-3) !important;
	}

	.panel {
		padding: var(--space-3) !important;
	}

	button {
		font-size: 13px !important;
	}

	.modal-header h2 {
		font-size: 16px !important;
	}
}

/* =====================================================
   LANDSCAPE MODE
   ===================================================== */

@media (max-width: 1024px) and (orientation: landscape) {

	.tabs {
		position: fixed !important;
		left: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		right: auto !important;
		width: 70px !important;
		height: 100% !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		padding: var(--space-4) var(--space-2) !important;
		padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px)) !important;
		padding-left: calc(var(--space-2) + env(safe-area-inset-left, 0px)) !important;
		border-top: none !important;
		border-right: 1px solid rgba(148, 163, 184, 0.1) !important;
		box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3) !important;
		overflow-y: auto !important;
	}

	.tabs button {
		width: 100% !important;
		max-width: none !important;
		min-height: 48px !important;
	}

	.container {
		padding-left: calc(80px + env(safe-area-inset-left, 0px)) !important;
		padding-bottom: var(--space-4) !important;
	}

	.modal-content {
		max-height: 95vh !important;
	}
}