/*
 * Adattamenti per schermi stretti.
 *
 * File a sé come settings.css: il build SCSS del tema gira solo da VSCode.
 * Tutto è limitato a "screen" per non toccare la stampa (_print.scss).
 * Breakpoint allineati a Bootstrap: 576 / 768 / 992.
 */

@media screen {
	/* Il contenuto occupa tutto lo spazio lasciato dalla sidebar, anche
	   quando è chiusa. Prima il max-width fisso lasciava 28rem vuoti. */
	section.main .content {
		max-width: none;
		min-width: 0;
	}

	section.main .sidebar {
		flex-shrink: 0;
	}

	.sidebar-backdrop {
		display: none;
	}

	/* Tabelle larghe: scorrono in orizzontale dentro il box invece di
	   uscire dalla pagina. La responsive di DataTables non è attiva.
	   L'aspetto delle scrollbar è in scrollbars.css. */
	div.dt-container div.dt-layout-table > div.dt-layout-cell,
	.orderz-table-scroll {
		overflow-x: auto;
		min-width: 0;
		-webkit-overflow-scrolling: touch;
	}

	/* Intestazione profilo: con tanti pulsanti andava fuori già su
	   schermi da portatile. */
	.user-profile-header > .d-flex {
		flex-wrap: wrap;
		gap: 2rem;
	}

	.user-profile-header .user-actions {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.user-info,
	.user-info .user-data {
		min-width: 0;
	}

	.user-info .user-data .username {
		overflow-wrap: anywhere;
	}
}

/* --- tablet: sidebar a scomparsa sopra il contenuto -------------------- */

@media screen and (max-width: 991.98px) {
	/* La checkbox arriva sempre "checked" dal markup: sotto i 992px lo
	   stato è invertito, così al caricamento il menu è chiuso e non
	   copre la pagina. */
	section.main .sidebar {
		position: fixed;
		top: 7rem;
		left: 0;
		bottom: 0;
		height: auto;
		width: 28rem;
		max-width: 85vw;
		box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3);
	}

	#sidebar-toggle:checked ~ section.main .sidebar {
		width: 0;
		box-shadow: none;
	}

	#sidebar-toggle:not(:checked) ~ section.main .sidebar-backdrop {
		display: block;
		position: fixed;
		top: 7rem;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.4);
		cursor: pointer;
	}

	/* L'albero categorie finisce sopra i prodotti: niente sticky e
	   altezza ridotta. */
	.category-tree-wrapper {
		position: relative;
		top: auto;
		height: 40vh;
		margin-bottom: 1rem;
	}
}

/* --- tablet verticale e telefoni --------------------------------------- */

@media screen and (max-width: 767.98px) {
	header.header .logo {
		width: auto;
		flex: 0 0 auto;
	}

	header.header .logo .sidebar-toggle-icon {
		padding: 0 2rem;
	}

	header.header .logo .logo-img {
		width: 12rem;
		padding: 1.5rem 1.5rem 1.5rem 0;
		background-size: contain;
		background-origin: content-box;
	}

	header.header .navbar {
		min-width: 0;
		flex-wrap: nowrap;
	}

	header.header .navbar .logged-in-user {
		margin: 0 1rem;
		padding: 0.5rem;
		min-width: 0;
	}

	header.header .navbar .logged-in-user .user {
		min-width: 0;
	}

	header.header .navbar .logged-in-user .username,
	header.header .navbar .logged-in-user .role {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* --- telefoni ---------------------------------------------------------- */

@media screen and (max-width: 575.98px) {
	section.main .content {
		padding: 1.2rem;
	}

	.content-box {
		padding: 1.5rem;
	}

	h2 {
		font-size: 2.6rem;
	}

	header.header .navbar .logged-in-user .avatar {
		margin: 0 0.5rem;
	}

	header.header .navbar .logged-in-user .role {
		display: none;
	}

	/* Resta icona + contatore */
	.global-carts .btn-icon-cart .text {
		display: none;
	}

	.global-carts .btn-icon-cart::before {
		margin-right: 0;
	}

	.user-profile-header .user-actions {
		justify-content: flex-start;
	}

	.user-info .avatar-big {
		flex-shrink: 0;
		width: 7rem;
		height: 7rem;
		border-width: 4px;
		font-size: 3rem;
	}

	.user-info .user-data .username {
		font-size: 2.4rem;
	}

	.dashboard-new-order {
		flex-wrap: wrap;
		gap: 1rem;
		text-align: center;
	}
}