/**
 * App shell layout — reference: HomeLayout.tsx + Wrapper.tsx
 */

.app-shell {
	min-height: 100vh;
	background: var(--color-bg-site);
	overflow-x: hidden;
}

/* Main content area with sidebar offset */
.site-main {
	min-height: 100vh;
	padding-top: 4.5rem;
	padding-bottom: var(--space-6);
	margin-left: var(--sidebar-collapsed);
	transition: margin-left var(--transition-normal);
	background: var(--color-bg-site);
}

body.sidebar-expanded .site-main {
	margin-left: var(--sidebar-width);
}

.content-shell {
	width: 100%;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 0 var(--space-6) var(--space-6);
}

/* Tablet: collapsed sidebar offset */
@media (min-width: 900px) and (max-width: 1199px) {
	body.sidebar-expanded .site-main {
		margin-left: var(--sidebar-width);
	}
}

/* Mobile: no sidebar offset, tabbar clearance */
@media (max-width: 599px) {
	.site-main {
		margin-left: 0;
		padding-bottom: calc(var(--tabbar-height) + var(--space-4));
	}

	body.sidebar-expanded .site-main {
		margin-left: 0;
	}
}

@media (min-width: 600px) and (max-width: 899px) {
	.site-main {
		padding-bottom: calc(var(--tabbar-height) + var(--space-4));
	}
}