html, body {
	height: 100vh;
	background: var(--clr-surface-a0);
	overflow: hidden;
}

/* ==================================================== */
/* ===================== MAIN NAV ===================== */
/* ==================================================== */

.main-nav {
	height: var(--main-nav-height);
	width: calc(100% - (var(--size-m) * 2));
	margin: var(--size-m);
	padding: 0 var(--size-m);
	display: flex;
	align-items: center;
	border-radius: var(--radius-s);
	background: var(--clr-surface-a10);
}

html:has(.login-container) .main-nav {
	display: none;
}

.main-nav > .main-nav-logo {
	height: 100%;
	padding: var(--size-m) 0;
}

.main-nav-logo img {
	height: 100%;
	object-fit: contain;
}

.main-nav > .main-nav-end {
	margin-left: auto;
}

/* ==================================================== */
/* ===================== CONTAINER ==================== */
/* ==================================================== */

.main-container {
	height: 100vh;
	padding: var(--size-m);
	padding-top: 0;
	overflow: hidden;
}

.main-container:has(.login-container) {
	padding: 0;
}

.page-container {
	height: 100%;
	width: 100%;

	display: flex;
	flex-direction: row;
	column-gap: var(--size-m);
}

.list {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	row-gap: var(--size-xs);
	overflow: auto;
}

.list > .list-item {
	flex-shrink: 0;
	min-height: 54px;
	padding: var(--size-s);
	display: flex;
	align-items: center;
	column-gap: var(--size-l);
	border-radius: var(--radius-s);
	transition: all .15s;
}

.list > .list-item:not(.header):hover {
	background: var(--clr-surface-a30) !important;
}


.list > .list-item:not(.card):nth-child(odd) {
	background: var(--clr-surface-a20);
}

.list > .list-item:not(.card).header {
	position: sticky;
	top: 0;
	font-weight: 600;
	background: var(--clr-surface-a0);
	box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
	z-index: 10;
}

.list-item.card {
	height: fit-content;
    padding: var(--size-m);

	display: flex;
	flex-direction: column;
	row-gap: var(--size-s);
	
	border-radius: var(--radius-s);
	background: transparent;
	border: 1px solid var(--clr-surface-a20);
}

.list-item > .list-item-cell {
	display: flex;
	column-gap: var(--size-s);
	flex-shrink: 0;
	color: white;
}

.list-item > .list-item-cell.center {
	justify-content: center;
}

.list-item > .list-item-cell.end {
	margin-left: auto;
}

/* ==================================================== */
/* ======================== HOME ====================== */
/* ==================================================== */

.side-menu {
	height: 100%;
	width: var(--main-nav-height);
	padding: var(--size-m);

	display: flex;
	flex-direction: column;

	border-radius: var(--radius-s);
	background: var(--clr-surface-a10);
}

.side-menu > .side-nav-items {
	flex: 1;
	width: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: var(--size-s);
}

.side-menu > .side-nav-ends {
	display: flex;
	flex-direction: column;
	row-gap: var(--size-s);
}

.side-nav-item {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid var(--clr-surface-a50);
	border-radius: var(--radius-s);
	color: white;;
	background: var(--clr-surface-a20);

	transition: all .15s;
}
.side-nav-item.secondary {
	background: var(--clr-surface-a20);
	border: 1px solid var(--clr-surface-a50);
	color: white;
	transition: all .15s;
}

.side-nav-item:hover {
	border-color: transparent;
	background: var(--clr-primary-a10) !important;
	transition: all .15s;
}
.side-nav-item.secondary:hover {
	background: var(--clr-surface-a40) !important;
	transition: all .15s;
}

.side-nav-item[data-state="active"] {
	border-color: transparent;
	background: var(--clr-primary-a0);
	transition: all .15s;
}

.page-content {
	height: 100%;
	width: 100%;
}

.page-section {
	height: 100%;
	width: 100%;
	padding: var(--size-l);
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-s);
	background: var(--clr-surface-a10);
}

.page-section-title {
	margin-bottom: var(--size-m);
	display: flex;
	align-items: center;
	column-gap: var(--size-m);
}

.page-section-title > h2 {
	font-size: 1.8rem;
	color: white;
}

/* ==================================================== */
/* ======================= LOGIN ====================== */
/* ==================================================== */

.login-container {
	position: relative;
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-background {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.login-background > img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: bottom;
}

.login-background::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(16px);
}

.login-title {
	position: absolute;
	top: var(--size-l);
	left: var(--size-l);

	z-index: 1;
}

.login-title > img {
	height: 48px;
}

.login-form {
	min-width: 350px;
	padding: var(--size-l);

	display: flex;
	flex-direction: column;

	border-radius: var(--radius-s);
	background: var(--clr-surface-a10);
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	z-index: 1;
}

/* ==================================================== */
/* ==================== SIDE PANEL ==================== */
/* ==================================================== */

.side-panels-container {
	position: absolute;
	height: 100vh;
	width: 100%;
	top: 0;
	right: 0;
	display: flex;
	justify-content: flex-end;
	z-index: 101;
	pointer-events: none;
	background: rgba(0,0,0,0);
	transition: all .25s;
}

.side-panels-container:has(.side-panel[data-state="open"]) {
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(4px);
	transition: all .25s;
	pointer-events: all;
}

.side-panel {
	height: 100%;
	width: 40%;
	padding: var(--size-m);

	display: flex;
	flex-direction: column;

	background: var(--clr-surface-a10);
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
	pointer-events: all;
}

.side-panel-header {
	margin-bottom: var(--size-m);
	display: flex;
	align-items: center;
}

.side-panel-header > h3 {
	font-size: 1.4rem;
	color: white;
}

.side-panel-content {
	margin-bottom: var(--size-m);
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.side-panel-footer {}