:root
{
	--sidebar-expanded-width: 280px;
	--sidebar-contracted-width: 80px;
}

main
{
	display: flex;
	min-height: 100vh;
}

div.dt-container
{
	width: 100%;
}

[data-bs-theme=dark] .theme-light{display: none;}
[data-bs-theme=light] .theme-dark{display: none;}

body.sidebar_wide #sidebar{width: var(--sidebar-expanded-width);}
body.sidebar_wide .contracted{display: none !important;}
body.sidebar_wide #content{width: calc(100vw - var(--sidebar-expanded-width));}

body.sidebar_narrow #sidebar{width: var(--sidebar-contracted-width);}
body.sidebar_narrow .expanded{display: none !important;}
body.sidebar_narrow #content{width: calc(100vw - var(--sidebar-contracted-width));}

.hide-stepper::-webkit-outer-spin-button,
.hide-stepper::-webkit-inner-spin-button
{
	-webkit-appearance: none;
	-moz-appearance:textfield;
}

/* Spike iPhone: bajo md el sidebar es offcanvas; el contenido usa todo el ancho. */
@media (max-width: 767.98px)
{
	main
	{
		flex-direction: column;
		min-height: calc(100vh - 3rem);
	}

	body.sidebar_wide #content,
	body.sidebar_narrow #content
	{
		width: 100%;
		max-width: 100vw;
	}

	body.sidebar_wide #sidebar,
	body.sidebar_narrow #sidebar
	{
		width: min(var(--sidebar-expanded-width), 85vw);
	}

	/* Drawer siempre con etiquetas visibles (ignora modo narrow del desktop). */
	#sidebar .expanded
	{
		display: inline !important;
	}
	#sidebar a.contracted,
	#sidebar .contracted
	{
		display: none !important;
	}

	/* DataTables: el scroll horizontal del propio DT; evitar doble scroll raro del wrapper. */
	.table-responsive
	{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	div.dt-container
	{
		max-width: 100%;
	}
}