/* Layout - Modern full-width dashboard */
/* Fixed header/footer with calculated height middle section */

html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#container
{
	width: 100vw;
	height: 100vh;
	color: var(--color-text);
}

/* Fixed header bar */
.header
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 48px;
	padding: 0 20px;
	background: var(--color-header-bg);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	z-index: 100;
}

.header-title
{
	color: #fff;
	text-decoration: none;
}

.header-title:hover
{
	color: rgba(255,255,255,0.8);
}

.header a
{
	color: #fff;
	text-decoration: none;
}

.header a:hover
{
	color: rgba(255,255,255,0.8);
}

/* Main body: nav + content - calculated height between header and footer */
#container2
{
	position: fixed;
	top: 48px;
	left: 0;
	right: 0;
	bottom: 36px;
	display: flex;
	overflow: hidden;
	background: var(--color-bg-subtle);
}

/* Sidebar navigation - fixed width, scrollable */
#nav
{
	flex: 0 0 200px;
	width: 200px;
	height: 100%;
	background: var(--color-nav-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	overflow-y: auto;
	overflow-x: hidden;
}

#nav h1
{
	font-size: 11px;
	font-weight: 600;
	color: var(--color-nav-section-text);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: var(--color-nav-section-bg);
	margin: 0;
	padding: 12px 16px 8px 16px;
	border-bottom: 1px solid var(--color-nav-section-border);
	position: sticky;
	top: 0;
}

#nav ul
{
	margin: 0;
	padding: 4px 0 12px 0;
	list-style: none;
}

#nav li
{
	list-style: none;
	margin: 0;
}

#nav li a
{
	display: block;
	color: var(--color-nav-text);
	padding: 10px 16px;
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background 0.15s, border-color 0.15s;
}

#nav li a:hover
{
	color: #fff;
	background: var(--color-nav-hover-bg);
	border-left-color: var(--color-nav-hover-border);
}

#nav li.active a
{
	color: var(--color-nav-active-text);
	background: var(--color-nav-active-bg);
	border-left-color: #fff;
	font-weight: 500;
}

/* Main content area - fills remaining space, scrollable */
#content
{
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 24px 32px;
	background: var(--color-bg);
	text-align: left;
	box-sizing: border-box;
}

#content img, #content iframe
{
	max-width: 100%;
}

/* Fixed footer bar */
#footer
{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 36px;
	padding: 0 20px;
	background: var(--color-header-bg);
	font-size: 11px;
	color: #8898AA;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	z-index: 100;
}

.footer-left,
.footer-right
{
	display: flex;
	align-items: center;
}

/* Theme toggle label */
.theme-label
{
	margin-right: 10px;
	font-size: 14px;
}

/* Theme toggle dropdown */
#footer .theme-toggle
{
	background: #1A3A5C;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 4px;
	padding: 4px 6px;
	font-size: 11px;
	cursor: pointer;
	width: auto;
	min-width: 0;
}

.theme-toggle option
{
	background: #1A3A5C;
	color: #fff;
}

.theme-toggle:hover
{
	background: #2A4A6C;
	color: #fff;
}

.theme-toggle:focus
{
	outline: none;
	border-color: var(--color-primary);
}

#footer a
{
	color: #635BFF;
}

#footer a:hover
{
	color: #8898AA;
}

/* Hamburger menu button - hidden on desktop */
.hamburger
{
	display: none;
	cursor: pointer;
	font-size: 24px;
	padding: 8px;
	user-select: none;
	border-radius: 4px;
	transition: background 0.15s;
}

.hamburger:hover
{
	background: rgba(255,255,255,0.1);
}

/* Mobile overlay for nav */
.nav-overlay
{
	display: none;
	position: fixed;
	top: 48px;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	z-index: 90;
}

.nav-overlay.open
{
	display: block;
}

/* Tablet: Narrower nav */
@media (max-width: 1024px)
{
	#nav
	{
		flex: 0 0 180px;
		width: 180px;
	}

	#content
	{
		padding: 20px 24px;
	}
}

/* Mobile: Slide-out nav */
@media (max-width: 768px)
{
	html, body
	{
		overflow: auto;
		height: auto;
	}

	.hamburger
	{
		display: block;
	}

	#container2
	{
		bottom: 32px;
		display: block;
		overflow-y: auto;
	}

	#nav
	{
		position: fixed;
		top: 48px;
		left: 0;
		bottom: 32px;
		width: 280px;
		height: auto;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		z-index: 95;
		box-shadow: 4px 0 20px rgba(0,0,0,0.15);
		font-size: 14px;
		/* Mobile nav - uses separate color scheme */
		background: var(--color-mobile-nav-bg);
	}

	#nav.open
	{
		transform: translateX(0);
	}

	/* Mobile nav section headers - collapsible */
	#nav h1
	{
		font-size: 12px;
		font-weight: 600;
		padding: 14px 16px;
		margin: 0;
		background: var(--color-mobile-nav-section-bg);
		color: var(--color-mobile-nav-section-text);
		border-bottom: 1px solid var(--color-mobile-nav-section-border);
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	#nav h1::after
	{
		content: '\25BC';
		font-size: 10px;
		opacity: 0.6;
		transition: transform 0.2s;
	}

	#nav h1.collapsed::after
	{
		transform: rotate(-90deg);
	}

	#nav ul
	{
		padding: 4px 0 8px 0;
		background: var(--color-mobile-nav-bg);
		overflow: hidden;
		max-height: 500px;
		transition: max-height 0.3s ease, padding 0.3s ease;
	}

	#nav ul.collapsed
	{
		max-height: 0;
		padding: 0;
	}

	#nav li a
	{
		padding: 12px 20px;
		color: var(--color-mobile-nav-text);
		border-left: 3px solid transparent;
	}

	#nav li a:hover
	{
		background: var(--color-mobile-nav-hover-bg);
		color: var(--color-mobile-nav-text);
		border-left-color: var(--color-link);
	}

	#nav li.active a
	{
		background: var(--color-mobile-nav-active-bg);
		color: var(--color-mobile-nav-active-text);
		border-left-color: var(--color-mobile-nav-active-text);
	}

	#content
	{
		width: 100%;
		height: 100%;
		padding: 16px;
		overflow-x: auto;
	}

	#footer
	{
		height: 32px;
		font-size: 10px;
		padding: 0 12px;
	}
}

/* Small mobile */
@media (max-width: 480px)
{
	.header
	{
		padding: 0 12px;
		font-size: 16px;
	}

	#nav
	{
		width: 100%;
		max-width: 300px;
	}

	#content
	{
		padding: 12px;
	}
}