/**
 * Jogador com rodapé (body.has-mobile-tabbar): menu lateral sempre como gaveta
 * (inclui Salas / main.php). Coluna centrada (~430px) em viewport largo.
 *
 * Observação: body.bingo-main-app usa flex-direction: column; não forçamos
 * justify-content: center ali para não deslocar o conteúdo na vertical.
 *
 * Carregar após os <style> inline da página.
 */

body.has-mobile-tabbar:not(.bingo-main-app) {
	justify-content: center !important;
}

/* Alta especificidade — cobre páginas cujo sidebar “desktop” ficava sempre visível. */
body.has-mobile-tabbar div#sidebar.sidebar {
	width: min(260px, 88vw) !important;
	max-width: min(280px, 92vw) !important;
	position: fixed !important;
	left: 0 !important;
	top: 0 !important;
	height: 100vh !important;
	overflow-y: auto !important;
	z-index: 520 !important;
	transform: translate3d(-100%, 0, 0) !important;
	transition: transform 0.3s ease, left 0.3s ease !important;
	box-shadow: 2px 0 12px rgba(15, 23, 42, 0.12) !important;
	border-right: 1px solid #dee2e6 !important;
	-webkit-overflow-scrolling: touch;
}

body.has-mobile-tabbar div#sidebar.sidebar.open {
	transform: translate3d(0, 0, 0) !important;
}

body.has-mobile-tabbar .overlay,
body.has-mobile-tabbar #overlay.overlay,
body.has-mobile-tabbar div#overlay.overlay {
	z-index: 510 !important;
}

body.has-mobile-tabbar:not(.bingo-main-app) .main-content,
body.has-mobile-tabbar:not(.bingo-main-app) .main-wrap {
	margin-left: auto !important;
	margin-right: auto !important;
	flex: 0 1 430px !important;
	flex-grow: 0 !important;
	max-width: 430px !important;
	width: 100% !important;
	min-height: 100vh !important;
	padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
}

body.has-mobile-tabbar.bingo-main-app .main-content {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 430px !important;
	width: 100% !important;
}

body.has-mobile-tabbar:not(.bingo-main-app) .mobile-header {
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 8px;
}

@media (max-width: 380px) {
	body.has-mobile-tabbar:not(.bingo-main-app) .main-content,
	body.has-mobile-tabbar:not(.bingo-main-app) .main-wrap {
		max-width: 100vw !important;
		flex-basis: 100% !important;
	}
}

@media (min-width: 520px) {
	body.has-mobile-tabbar:not(.bingo-main-app) {
		background-color: #d9dde6 !important;
	}

	/* Cantos da gaveta alinhados à coluna “celular”, em Salas e nas demais telas */
	/*
	 * Fechado: left:0 no bloco base + translate(-100%) tira TODO o painel para fora à esquerda.
	 * Em telas largas, aplicar offset da coluna SÓ quando .open — senão o painel ficava à mostra no meio do monitor.
	 */
	body.has-mobile-tabbar div#sidebar.sidebar.open {
		left: max(0px, calc((100vw - min(430px, 100vw)) / 2)) !important;
	}

	body.has-mobile-tabbar:not(.bingo-main-app) .main-content,
	body.has-mobile-tabbar:not(.bingo-main-app) .main-wrap {
		border-left: 1px solid #dee2e6 !important;
		border-right: 1px solid #dee2e6 !important;
		box-shadow: 0 6px 40px rgba(15, 23, 42, 0.12) !important;
	}
}