/*
═══════════════════════════════════════════════
	RESPONSIVE BREAKPOINTS
	- Tablet landscape: max-width 1199px
	- Tablet portrait: max-width 991px
	- Mobile: max-width 767px
	- Small mobile: max-width 479px
═══════════════════════════════════════════════
*/

/* ─── TABLET LANDSCAPE (≤1399px) ─── */
@media (max-width: 1399px) {
	.row.boxes3-1 {
		grid-template-columns: 1fr;
	}

	.row .box.card {
		padding: 14px 16px;
	}
}


/* ─── TABLET PORTRAIT (≤991px) ─── */
@media (max-width: 991px) {
	.row.boxes3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.topbar-search {
		width: 160px;
	}

	.topbar-search:focus-within {
		width: 200px;
	}

	.row .box.card {
		padding: 14px 14px;
	}
}

/* ─── MOBILE (≤767px) ─── */
@media (max-width: 767px) {
	/* iOS Safari: se gli input hanno font-size < 16px, al tap zoomano automaticamente,
	   causando lo scroll orizzontale del viewport. Forzo 16px su mobile per evitarlo. */
	input[type=text],
	input[type=tel],
	input[type=email],
	input[type=number],
	input[type=decimal],
	input[type=password],
	input[type=date],
	input[type=time],
	input[type=datetime-local],
	select,
	textarea {
		font-size: 16px;
	}

	.auth-form input[type=text],
	.auth-form input[type=tel],
	.auth-form input[type=password],
	.auth-form select {
		font-size: 16px;
	}

	/* Cintura di sicurezza contro lo scroll orizzontale su mobile */
	html, body {
		overflow-x: hidden;
	}

	/* Sidebar: off-screen by default, slides in with .mobile-open */
	#sidebar {
		transform: translateX(-100%);
		width: var(--sidebar-w);
	}

	#sidebar.mobile-open {
		transform: translateX(0);
	}

	/* Neutralize .collapsed on mobile: sidebar must always look expanded */
	#sidebar.collapsed {
		width: var(--sidebar-w);
		transform: translateX(-100%);
	}

	#sidebar.mobile-open.collapsed {
		transform: translateX(0);
		width: var(--sidebar-w);
	}

	#sidebar.collapsed .brand-name,
	#sidebar.collapsed .workspace-switcher,
	#sidebar.collapsed .nav-label,
	#sidebar.collapsed .nav-badge,
	#sidebar.collapsed .nav-sub-arrow,
	#sidebar.collapsed .user-info {
		opacity: 1;
		display: initial;
		pointer-events: auto;
	}

	#sidebar.collapsed .nav-section-label {
		opacity: 0.5;
	}

	#sidebar.collapsed .nav-submenu {
		max-height: none !important;
	}

	#sidebar.collapsed .nav-group:not(.open) > .nav-submenu {
		max-height: 0 !important;
	}

	#sidebar.collapsed .nav-group.open > .nav-submenu {
		max-height: 2000px !important;
	}

	/* Hide sidebar collapse/expand toggle on mobile, use only hamburger */
	.sidebar-toggle-btn {
		display: none !important;
	}

	#sidebar.collapsed .sidebar-toggle-btn {
		display: none !important;
	}

	/* Topbar: full width */
	#topbar {
		left: 0 !important;
	}

	#sidebar.collapsed ~ #topbar {
		left: 0;
	}

	/* Show hamburger */
	#hamburger {
		display: block;
	}

	/* Hide sidebar open btn on mobile (use hamburger instead) */
	#sidebar.collapsed ~ #topbar .sidebar-open-btn {
		display: none;
	}

	/* Main content: full width */
	#main {
		margin-left: 0 !important;
	}

	#sidebar.collapsed ~ #main {
		margin-left: 0;
	}

	#main .page {
		padding: 0 16px 20px 16px;
	}

	/* Footer: full width */
	#footer {
		margin-left: 0 !important;
		padding: 0 16px;
	}

	#sidebar.collapsed ~ #footer {
		margin-left: 0;
	}

	/* Grid layouts: stack */
	.row.boxes4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.row.boxes3 {
		grid-template-columns: 1fr;
	}

	.row.boxes2 {
		grid-template-columns: 1fr;
	}

	.row.boxes3-1 {
		grid-template-columns: 1fr;
	}

	.row {
		gap: 12px;
		margin-bottom: 12px;
	}

	/* Topbar adjustments */
	.topbar-title {
		font-size: 17px;
	}

	.topbar-search {
		width: 140px;
		padding: 6px 10px;
	}

	.topbar-search:focus-within {
		width: 180px;
	}

	.topbar-actions {
		gap: 6px;
	}

	/* Box card padding */
	.row .box.card {
		padding: 14px 16px;
	}

	.row .box .head {
		padding: 12px 16px;
	}
}

/* ─── SPLASH (≤767px) ─── */
@media (max-width: 767px) {
	.splash-content {
		padding:24px 20px;
	}

	.splash-logo {
		width:86px;
		height:86px;
		border-radius:18px;
	}

	.splash-title {
		font-size:44px;
	}

	.splash-tagline {
		font-size:14.5px;
		margin-bottom:30px;
	}

	#splash button.splash-enter {
		padding:14px 40px;
		font-size:14px;
	}

	.splash-glow {
		width:420px;
		height:420px;
	}

	.auth-card {
		padding:26px 20px 22px;
		border-radius:12px;
	}

	.auth-title {
		font-size:20px;
	}
}

/* ─── SMALL MOBILE (≤479px) ─── */
@media (max-width: 479px) {
	.splash-title {
		font-size:36px;
	}

	.splash-logo {
		width:76px;
		height:76px;
	}

	.splash-tagline {
		font-size:13.5px;
	}

	#splash button.splash-enter {
		padding:13px 34px;
	}

	.splash-footnote {
		margin-top:28px;
	}

	/* Stat cards: keep 2 columns */
	.row.boxes4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Topbar */
	#topbar {
		padding: 0 12px;
		gap: 10px;
	}

	.topbar-title {
		font-size: 15px;
	}

	/* Hide less important topbar buttons */
	.tb-btn[title="Apps"],
	.tb-btn[title="Fullscreen"],
	.tb-btn[title="Lingua"] {
		display: none;
	}

	/* Page padding */
	#main .page {
		padding: 0 10px 16px 10px;
	}

	/* Box card */
	.row .box.card {
		padding: 12px 14px;
	}

	.row .box .head {
		padding: 10px 14px;
	}

	.row .box .head span {
		font-size: 14px;
	}

	.row .box.card .head span {
		font-size: 11px;
	}

	.row .box.card {
		padding: 10px 10px;
	}

	/* Footer */
	#footer {
		padding: 0 10px;
		font-size: 0.75rem;
	}
}