/* FONTS */
/* ICON FONT - from google fonts */
@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 100 700;
	src: url(assets/fonts/material-symbols.woff2) format('woff2');
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: normal;
	src: url("assets/fonts/Poppins-Regular.ttf");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 200;
	src: url("assets/fonts/Poppins-Thin.ttf");
}

/* THEMES */
body {
	--background: #1d1d20;
	--background-light: #6f6f8d;
	--background-transparent: rgb(from var(--background-light) r g b / .4);
	--text: #EEE;
	--text-light: rgb(from var(--text) r g b / .7);

	--border: #323235;
	--light-dark: var(--background-light);

	--accent: #FFF;
	--accent-light: rgb(from var(--accent) r g b / .2);
	--outline: rgb(from var(--accent) r g b / .4);

	--success: #2eab81;
	--warning: #fd9804;
	--error: #df412e;
}

body.mono {
	--background: #FFF;
	--background-light: #FFF;
	--background-transparent: #FFF9;
	--light-dark: var(--border);
	--border: #dbdbdb;
	--text: #20212D;
	--accent: #20212D;
}
body.mint {
	--background: #F8FDF8;
	--background-light: #FFF;
	--background-transparent: #FFF9;
	--light-dark: var(--border);
	--border: #dbe1d8;
	--text: #1B1816;
	--accent: #059137;
}
body.claude {
	--background: #FAF8F0;
	--background-light: #FFF;
	--background-transparent: #FFF9;
	--light-dark: var(--border);
	--border: #D5D1C9;
	--text: #3D3826;
	--accent: #DA8A5D;
}

body.dark {
	--background: #332E3C;
	--background-light: #726f7f;
	--text: #F3F4F6;
	--border: #433d4b;
	--accent: #6f5dff;
}
body.spotify {
	--background: #12151d;
	--background-light: #677773;
	--text: #f7f9fa;
	--border: #292c33; /* #0e372c */
	--accent: #00bd67;
}
body.black {
	--background: #1d1d20;
	--background-light: #6f6f8d;
	--background-transparent: #6f6f8d99;
	--text: #EEE;
	--border: #323235;
	--accent: #FFF;
}

body[role="SYSADMIN"] {
	header nav :is(a, button):not([role="SYSADMIN"]) { display: none; }
	button.profile {
		border-color: var(--error);
		box-shadow: 0 0 0 2px var(--error);
	}
	#settings-button { display: none; }
}

/* SYSADMIN has its own rules */
body:not([role="SYSADMIN"]) header nav :is(a, button)[role="SYSADMIN"],

/* SYSADMIN_EXTERNAL <- ADMIN <- MANAGER <- USER */
body:not([role$="_ADMIN"]) header nav :is(a, button)[role$="_ADMIN"],
body:not([role="ADMIN"], [role$="_ADMIN"]) header nav :is(a, button)[role="ADMIN"],
body:not([role="MANAGER"], [role="ADMIN"], [role$="_ADMIN"]) header nav :is(a, button)[role="MANAGER"]
{ display: none; }

body[role$="_ADMIN"] {
	button.profile {
		border-color: var(--error);
		box-shadow: 0 0 0 2px var(--error);
	}
}

/* RESET - thanks - https: //piccalil.li/blog/a-modern-css-reset/ */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: var(--text);
	font-family: Poppins;
	accent-color: var(--accent);
	interpolate-size: allow-keywords;
	outline: 2px solid transparent;
	outline-offset: 2px;

	scrollbar-width: thin;
	scrollbar-color: var(--border) transparent;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul, ol { list-style: none; }

/* Set core root defaults */
html:focus-within { scroll-behavior: smooth; }

*:focus-visible {
	outline-color: var(--outline);
}

/* *::-webkit-scrollbar {
	width: 20px;
	height: 20px;
}
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
	border-radius: 12px;
	border: 7px solid var(--border);
	background: var(--background);
}
*::-webkit-scrollbar-thumb:hover { background: var(--background-light); } */

html { font-size: 14px; }
/* Set core body defaults */
body {
	height: 100vh;
	line-height: 1;
	background: var(--background);
}

a {
	text-decoration: none;
	color: var(--text);
}

/* Make images easier to work with */
img, picture, label {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select { font: inherit; }

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; font-weight: 400; }

p {
	font-size: 12px;
	line-height: 1.3;
}

code {
	display: inline-block;
	padding: 2px 4px;
	border-radius: 4px;
	background: var(--background-light);
}

separator {
	width: 1px;
	height: 16px;
	background: var(--border);

	&[horiz] { width: 16px; height: 1px; }
}

spacer {
	margin-inline: auto;
	&[vert] { margin-block: auto; }
}

/* Material symbols */
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: 300;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.center {  justify-content: center; }
.fit { width: fit-content; }
[disabled] { opacity: .4; pointer-events: none; }
[readonly] { font-style: italic; }

.loading {
	position: relative;
}
.loading::after {
	--circle: no-repeat radial-gradient(farthest-side, var(--loading-color, var(--accent)) 72%, #0000);

	content: '';
	position: absolute;
	inset: var(--loading-inset, calc(50% - 12px));
	width: 24px;
	aspect-ratio: 1;
	background:
		var(--circle) 50% 0,
		var(--circle) 50% 100%,
		var(--circle) 100% 50%,
		var(--circle) 0 50%;
	background-size: 8px 8px;
	z-index: 1;
	animation: l18 1s infinite;
}

@keyframes l18 {
	100% { transform: rotate(.5turn) }
}

body:is(.dark, .spotify, .black) .invert { filter: invert(1); }

header {
	position: fixed;
	inset: 12px 12px auto;
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		height: 40px;
		width: 62px; /* to match the width of the profile button */
		margin-right: auto;
		object-fit: contain;
		object-position: 0;
	}

	nav {
		position: relative;
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 4px;
		border-radius: 12px;
		background: var(--border);
	}

	a, button {
		position: relative;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 12px 8px 10px;
		border-radius: 8px;
		color: var(--text);
		text-align: center;
		line-height: 1.2;
		overflow: hidden;
		transition: color .2s, background .35s;

		span.material-symbols-outlined { color: inherit; font-size: 18px; }

		/* &:hover { background: var(--background); } */
		&.active { color: var(--text); }

		@media (max-width: 1370px) {
			font-size: 13px;
		}
	}
	nav button[popovertarget] {
		padding-inline: 8px 12px;
		span { transition: rotate .2s; }
	}

	/* active styling */
	nav::before {
		content: '';
		position: absolute;
		position-anchor: --active-header;
		inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
		border-radius: 8px;
		background: var(--background-light);
		transition: .2s;
		pointer-events: none;
	}
	nav a.active, nav button.active { anchor-name: --active-header; }

	.nested-menu {
		margin-top: 4px;
		padding-block: 8px 4px;
		border-radius: 8px;
		background: var(--border);

		.nested-header {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 10px 12px;
			opacity: .5;

			span { font-size: 18px; }
		}

		a { padding-inline: 24px 12px; }
	}

	.submenu {
		position-area: bottom center;
		inset: unset;
		width: max-content;
		margin: 6px 0;
		border-radius: 12px;
		border: 2px solid var(--background);

		background: var(--border);
		&:has(.nested-menu) { background: var(--background);}

		a {
			padding: 10px 12px;
			background: var(--border);
		}
	}
	[popovertarget="application-data-menu"] {
		anchor-name: --application-data-menu;
		+ .submenu { position-anchor: --application-data-menu; }
	}
	&:has(#application-data-menu:popover-open) [popovertarget="application-data-menu"] span { rotate: 180deg; }

	[popovertarget="knowledge-generator-menu"] {
		anchor-name: --knowledge-generator-menu;
		+ .submenu { position-anchor: --knowledge-generator-menu; }
	}
	&:has(#knowledge-generator-menu:popover-open) [popovertarget="knowledge-generator-menu"] span { rotate: 180deg; }

	[popovertarget="ai-agents-menu"] {
		anchor-name: --ai-agents-menu;
		+ .submenu { position-anchor: --ai-agents-menu; }
	}
	&:has(#ai-agents-menu:popover-open) [popovertarget="ai-agents-menu"] span { rotate: 180deg; }

	[popovertarget].active + .submenu { position-anchor: --active-header; }

	/* PROFILE */
	.profile {
		flex-shrink: 0;
		width: fit-content;
		gap: 2px;
		margin-left: auto;
		padding: 4px;
	}
	.initials, .large-initials {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		color: var(--background);
		background: var(--accent);
		font-weight: bold;
	}

	[popovertarget="profile-menu"] {
		anchor-name: --profile-menu-button;
	}
	#profile-menu {
		position-anchor: --profile-menu-button;
		position-area: bottom span-left;
		inset: unset;
		margin: 12px 0;
		padding: 12px;
		border-radius: 12px;
		border: 1px solid var(--border);
		background: var(--background-transparent);
		backdrop-filter: blur(12px);

		.large-initials {
			width: 96px;
			height: 96px;
			margin: 0 auto 12px;
			background: var(--accent);
			font-size: 48px;
		}

		.user {
			display: block;
			font-size: 16px;
			font-weight: 300;
			text-align: center;
		}
		.email {
			display: block;
			margin-block: 4px 8px;
			font-size: 12px;
			text-align: center;
		}

		.role {
			display: block;
			width: fit-content;
			margin: 12px auto 12px;
			padding: 8px 12px;
			border-radius: 50px;
			background: var(--accent-light);
			font-size: 12px;
		}

		.themes {
			display: flex;
			gap: 8px;
			margin-bottom: 12px;

			button {
				border-radius: 50px;
				width: 32px;
				height: 32px;
				padding: 0;
				border: 4px solid transparent;
			}

			.mono { background: #FFF; border-color: #20212D;}
			.mint { background: #F8FDF8; border-color: #059137; }
			.claude { background: #FAF8F0; border-color: #DA8A5D; }
			.dark { background: #332E3C; border-color: #6f5dff; }
			.spotify { background: #12151d; border-color: #00bd67; }
			.black { background: #1d1d20; border-color: #FFF; }
		}

		.actions {
			display: flex;
			gap: 4px;
		}
	}
}

/* main > * {
	display: flex;
	height: 100vh;
	padding: 80px 12px 0;
} */

[popover] {
	opacity: 0;
	translate: 0 -12px;
	transition: opacity 0.2s ease-out, translate 0.2s ease-out, display 0.2s allow-discrete;
}
[popover]:popover-open {
	opacity: 1;
	translate: 0;

	@starting-style {
		opacity: 0;
		translate: 0 -12px;
	}
}

/* main {
	view-transition-name: main-transition;
}
@keyframes slide-from-right {
	from { translate: 50px 0; opacity: 0; }
}
@keyframes slide-to-left {
  to { translate: -50px 0; opacity: 0; }
}
::view-transition-old(main-transition) { animation: .3s both slide-to-left; }
::view-transition-new(main-transition) { animation: .3s both slide-from-right; } */