:root {
	color-scheme: light dark;
	--appBackground: #F5F7FB;
	--appSurface: #FFFFFF;
	--appSurfaceAlt: #EDF4FF;
	--appTextPrimary: #131722;
	--appTextSecondary: #60708A;
	--appBorder: rgba(29, 53, 89, 0.10);
	--appShadow: 0 14px 32px rgba(20, 36, 61, 0.07);
	--appAccentSoft: rgba(29, 53, 89, 0.08);
}

html, body {
	width: 100%;
	height: 100%;
	min-height: 100% !important;
	background-color: var(--appBackground);
	color: var(--appTextPrimary);
}

body {
	transition: background-color 0.2s ease, color 0.2s ease;
}

@media (prefers-color-scheme: dark) {
	:root {
		--appBackground: #0F1A2E;
		--appSurface: #16233A;
		--appSurfaceAlt: #1A2942;
		--appTextPrimary: rgba(230, 237, 248, 0.94);
		--appTextSecondary: rgba(167, 183, 209, 0.84);
		--appBorder: rgba(118, 140, 176, 0.22);
		--appShadow: 0 18px 44px rgba(4, 10, 20, 0.32);
		--appAccentSoft: rgba(112, 207, 255, 0.12);
	}
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s;
}

.Centered {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	flex-direction: column;
}

.Toolbar {
	height: 43px;
	box-shadow: var(--mud-elevation-4);
	border-bottom: 1px solid var(--appBorder);
}

	.Toolbar.Light {
		background-color: var(--appSurfaceAlt);
	}

	.Toolbar.Dark {
		background-color: var(--appSurfaceAlt);
	}

.mud-layout,
.mud-main-content {
	background-color: var(--appBackground);
}

.AppLayout {
	display: flex;
	height: 100dvh;
	min-height: 100dvh;
}

.AppDrawer,
.AppDrawer .mud-drawer-content {
	background: var(--appSurface);
	border-right: 1px solid var(--appBorder);
}

.DrawerContent {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px 16px 14px;
}

.BrandBlock {
	padding: 6px 12px 24px;
}

.BrandName {
	letter-spacing: -0.02em;
}

.BrandName span {
	color: var(--mud-palette-primary);
	font-weight: 400;
}

.MobileAppBar {
	background: var(--appSurface) !important;
	border-bottom: 1px solid var(--appBorder);
	color: var(--appTextPrimary) !important;
}

.MainContent {
	display: flex;
	flex: 1 1 auto;
	height: 100%;
	min-width: 0;
	min-height: 0;
	padding: 24px 0 0;
	box-sizing: border-box;
	background: var(--appBackground) !important;
}

.ContentFrame {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	border-radius: 14px;
	overflow: visible;
}

.AuthCard {
	background: var(--appSurface);
	border: 1px solid var(--appBorder);
	box-shadow: var(--appShadow);
	border-radius: 16px;
}

.NavMenu {
	flex: 1;
	min-height: 0;
}

.MenuSection {
	display: block;
	padding: 20px 0 7px 16px;
	color: var(--appTextSecondary);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
}

.NavItem {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 2px 0;
	padding: 0 !important;
	border-radius: 9px;
	color: var(--appTextSecondary);
	font-weight: 600;
	transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.NavItem:hover {
	background: var(--appAccentSoft);
	color: var(--appTextPrimary);
	transform: none;
}

.NavItem:hover .mud-nav-link,
.NavItem .mud-nav-link:hover {
	background: transparent;
}

.NavItem.active {
	background: var(--appAccentSoft);
	color: var(--mud-palette-primary);
}

.NavMenu .badge-fix {
	display: block;
	width: 100%;
}

.NavMenu .badge-fix > .mud-badge,
.NavMenu .badge-fix > .mud-badge-wrapper {
	display: block;
	width: 100%;
}

.NavMenu .badge-fix .NavItem {
	width: 100%;
}

.mud-drawer,
.mud-paper {
	box-shadow: var(--appShadow);
}

.mud-appbar,
.mud-drawer,
.mud-paper {
	backdrop-filter: saturate(1.05);
}

.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
.mud-icon-button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
	outline-offset: 2px;
}

.mud-button-root,
.mud-chip-root,
.mud-input-control {
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.mud-button-root {
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	border-radius: 8px;
}

.mud-button-filled-primary,
.mud-button-filled-secondary {
	box-shadow: 0 10px 22px rgba(15, 26, 46, 0.12);
}

.mud-button-outlined {
	border-width: 1px;
}

.mud-chip-root {
	font-weight: 600;
	border-radius: 999px;
}

.mud-input-control .mud-input-outlined-border {
	stroke-width: 1.25;
}

.mud-input-control.mud-input-focused .mud-input-outlined-border {
	stroke-width: 1.75;
}

.apexcharts-tooltip {
	color: #111111;
}

.TouchScroll {
	overflow: auto; /* enables scrolling */
	-webkit-overflow-scrolling: touch; /* smooth touch scrolling */
}

.TouchScroll::-webkit-scrollbar {
	display: none; /* Chrome / Safari / Edge */
}