@charset "UTF-8";

@media all {
	:root {
		--primary: #04220c;
		--primary-light: #0f3e1b;
		--text: #fff;
		--border-color: #ffffff60;
	}

	html {
		background-color: var(--primary);
	}

	body {
		padding: 0;
		margin: 0;
		display: grid;
		grid-template-columns: 15svw auto;
		grid-template-rows: auto;
		grid-template-areas: "header main";
		font-family: "Arial", sans-serif;
		color: var(--text);
	}

	body.nobody {
		grid-template-columns: auto;
		grid-template-areas: "main";
	}

	body.nobody header {
		display: none;
	}

	input {
		border: none;
		border-bottom: 1px solid var(--border-color);
		background-color: transparent;
		color: var(--text);
	}

	button {
		background-color: transparent;
		border-color: var(--border-color);
		border-radius: 5px;
		color: var(--text);
		padding: 10px;
		cursor: pointer;
	}

	button:hover {
		background-color: var(--primary-light);
		border-color: var(--text);
	}

	header {
		grid-area: header;
		height: calc(100svh - 20px);
		padding: 10px;
		background-color: var(--primary-light);
	}

	header .avatar-container {
		height: 48px;
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 2px solid var(--border-color);
	}

	header .avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		aspect-ratio: 1/1;
	}

	header .avatar-container span {
		font-size: 14px;
	}

	header nav {
		height: calc(100svh - 60px - 60px - 60px);
		padding: 10px;
		overflow: auto;
	}

	header nav details:not(:last-child) {
		margin-bottom: 10px;
	}

	header nav details details {
		margin-left: 20px;
		margin-top: 5px;
	}

	header nav details.active {
		border-radius: 5px;
		outline: 1px solid var(--primary);
	}

	header nav details summary {
		display: flex;
		align-items: center;
		gap: 5px;
		list-style: none;
	}

	header nav details summary:hover {
		background-color: var(--primary);
		border-radius: 5px;
		cursor: pointer;
	}

	header nav details summary:not(:has(a)) {
		padding: 5px;
	}

	header nav details summary a {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 5px;
	}

	header nav details summary span,
	header nav details summary a {
		line-height: 1;
	}

	header nav details summary a {
		text-decoration: none;
		color: var(--text);
	}

	header nav details:not([open]) .open,
	header nav details[open] .closed {
		display: none;
	}

	header nav details[open] .open,
	header nav details:not([open]) .closed {
		display: block;
	}

	header .logo-container {
		height: 60px;
		padding-top: 10px;
		border-top: 2px solid var(--border-color);
	}

	header .logo-container img {
		width: 100%;
		height: 60px;
	}

	main {
		grid-area: main;
		max-height: calc(100vh - 20px);
		overflow: auto;
		padding: 10px;
	}

	img.icon {
		width: 16px;
		height: 16px;
	}
}