/* Explicit shell layout for LineOne's fixed icon sidebar. */

:root {
	--main-sidebar-width: 4.5rem;
	--margin-x: 1.5rem;
}

@media (min-width: 64rem) {
	:root {
		--main-sidebar-width: 5rem;
	}
}

@media (min-width: 80rem) {
	:root {
		--margin-x: 4rem;
	}
}

#root .main-sidebar {
	width: var(--main-sidebar-width) !important;
	--tw-translate-x: 0 !important;
	translate: none !important;
	z-index: 60 !important;
}

/* Offset content past the fixed sidebar + page gutter. */
.app-shell-main {
	min-width: 0;
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	margin-left: var(--main-sidebar-width) !important;
	width: calc(100% - var(--main-sidebar-width)) !important;
	box-sizing: border-box !important;
}

.app-shell-header {
	padding-left: var(--margin-x) !important;
	padding-right: var(--margin-x) !important;
	box-sizing: border-box;
}

/* Neutralize LineOne .main-content and add page gutter. */
main.app-shell-content {
	margin-top: 0 !important;
	margin-left: 0 !important;
	display: block !important;
	padding-left: var(--margin-x) !important;
	padding-right: var(--margin-x) !important;
	box-sizing: border-box !important;
}

main.app-shell-content table th,
main.app-shell-content table td {
	padding-left: 1.25rem !important;
	padding-right: 1.25rem !important;
}