/* *************************************** */
/* General colors and variables            */
/* *************************************** */

:root {
	--intra: #00BABC;
	--blue: #3AA2DB;
	--indigo: #6610f2;
	--purple: #B73188;
	--pink: #e83e8c;
	--red: #E52A2D;
	--bg-red: #e3cccc;
	--orange: #EA5C28;
	--yellow: #F2911A;
	--green: #1c7e3f;
	--bg-green: #c9fbd3;
	--teal: #20c997;
	--cyan: #434849;
	--white: #fff;
	--black: #000;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--gray-light: #9aa0a6;
	--gray-lightest: #dee2e6;
	--primary: var(--yellow);
	--secondary: var(--purple);
	--success: #32B796;
	--info: #17a2b8;
	--warning: #F2911A;
	--danger: #E52A2D;
	--light: #f8f9fa;
	--dark: #1d2124;
	--logo: url('/images/logo-light.svg');
}

.logo {
	content: url('/images/logo-light.svg');
}

/* override colors for dark theme */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--light: #000000; /* inverted from --dark */
		--dark: #f8f9fa; /* inverted from --light */
		--gray-dark: #9aa0a6; /* inverted from --gray-light */
		--gray-light: #343a40; /* inverted from --gray-dark */
		--gray-lightest: #252525;
		--bg-green: #46b292;
		--bg-red: #a44244;
		--logo: url('/images/logo-dark.svg');
	}

	:root:not([data-theme]) .logo {
		content: url('/images/logo-dark.svg');
	}
}

/* Forced dark theme: applied when the toggle is set to Dark, or when the
   inline <head> script resolved "System" against a dark OS. That script
   always writes a concrete data-theme, so the prefers-color-scheme media
   queries above only act as a no-JS fallback. */
:root[data-theme="dark"] {
	--light: #000000;
	--dark: #f8f9fa;
	--gray-dark: #9aa0a6;
	--gray-light: #343a40;
	--gray-lightest: #252525;
	--bg-green: #46b292;
	--bg-red: #a44244;
	--logo: url('/images/logo-dark.svg');
}

/* *************************************** */
/* Fonts and typography                    */
/* *************************************** */

@font-face {
	font-family: "Bebas Neue";
	src: url('/fonts/bebas-neue/BebasNeue-Regular.ttf');
	font-weight: normal;
}

@font-face {
	font-family: "Museo Sans";
	src: url('/fonts/MuseoSans_500.otf');
	font-weight: normal;
}

@font-face {
	font-family: "Museo Sans";
	src: url('/fonts/MuseoSans_700.otf');
	font-weight: bold;
}

/* *************************************** */
/* General                                 */
/* *************************************** */

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Museo Sans', sans-serif;
	color: var(--dark);
	background-color: var(--light);
}

body {
	min-height: 100vh;
	background-image: url('/images/codam-blur.png');
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: auto 60%;
	background-attachment: fixed;
}

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

a:hover,
a:active,
a:focus {
	text-decoration: underline;
}

a.external::after {
	content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
	margin: 0 3px 0 5px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) a.external::after {
		content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAgMAAADwXCcuAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAxQTFRFAAAA////////////OMA7qAAAAAR0Uk5TAP9gIFOYGRgAAAAqSURBVAjXY2BgDWAIZQpgcOCcwOCgJsDgMIOBwTmBgcHhgAMDDIaGOgAAgeUG8U0ghIsAAAAASUVORK5CYII=);
	}
}

:root[data-theme="dark"] a.external::after {
	content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAgMAAADwXCcuAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAxQTFRFAAAA////////////OMA7qAAAAAR0Uk5TAP9gIFOYGRgAAAAqSURBVAjXY2BgDWAIZQpgcOCcwOCgJsDgMIOBwTmBgcHhgAMDDIaGOgAAgeUG8U0ghIsAAAAASUVORK5CYII=);
}

.logo-light {
	content: url('/images/logo-light.svg');
}

.logo-dark {
	content: url('/images/logo-dark.svg');
}

.logo {
	content: var(--logo);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Bebas Neue', sans-serif;
	font-weight: normal;
}

/* *************************************** */
/* Header                                  */
/* *************************************** */

header {
	display: flex;
	position: relative;
	height: 128px;
	max-width: 1800px;
	margin: 0 auto;
	padding: 16px;
	justify-content: flex-end;
	align-items: center;
	color: var(--white);
	white-space: nowrap;
}

.header-container-logo {
	flex: 1;
}
header #header-logo {
	display: inline-block;
	height: 128px;
}

header #header-nav {
	text-transform: uppercase;
	justify-content: flex-end;
	padding: 0 16px;
}

header #header-nav a {
	color: var(--dark);
}

header #header-nav a:hover {
	color: var(--primary);
	text-decoration: none;
}

#theme-toggle-btn {
	background: none;
	border: none;
	color: var(--dark);
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	padding: 0 8px;
	margin-left: 8px;
	vertical-align: middle;
}

#theme-toggle-btn:hover,
#theme-toggle-btn:focus {
	color: var(--primary);
	outline: 0;
}

header #dropdown-toggle-btn {
	display: none;
}

/*Scale: header*/
@media (max-width: 1000px) {
	header {
		height: 56px;
	}

	header #header-nav {
		font-size: medium;
	}
	header #header-logo {
		height: 64px;
	}

	header .navigation {
		display: none;
	}

	header #dropdown-toggle-btn {
		display: block;
		background: rgb(0, 0, 0);
		border-style: none;
		color: white;
		font-size: 36px;
	}
}

/* *************************************** */
/* Startup screen                          */
/* *************************************** */

.startup-screen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	text-align: center;
	padding: 0 32px;
}

.startup-screen .logo {
	max-width: 100%;
	width: 500px;
}

/* *************************************** */
/* Home                                    */
/* *************************************** */

.home-container {
	padding: 8px 48px 48px 64px;
}
.home-container .welcome-box .welcome-text {
	font-size: xx-large;
	font-weight: bold;
}

.home-container .welcome-box .sync {
	font-size: medium;
	font-family: monospace;
	margin-top: 5px;
	margin-bottom: 24px;
}

.home-container .welcome-box .sync::before {
	content: "// ";
	color: var(--pink);
	font-size: small;
	font-family: monospace;
}

.home-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	word-wrap: break-word;
}

.home-grid .home-grid-container {
	height: 128px;
	border: 1px solid var(--gray);
	padding: 48px 8px 8px 24px;
	color: inherit;
	text-decoration: none;
	border-top-right-radius: 28px;
	corner-shape: bevel;
	backdrop-filter: blur(100px);
	background-color: rgba(0, 0, 0, 0.1);
}

.home-grid .home-grid-container:hover {
	border-color: var(--blue);
}

.home-grid .home-grid-container .container-icon {
	font-size: 36px;
	color: var(--gray);
	border: 1px solid var(--gray);
	padding: 10px 20px 10px 15px;
	border-top-right-radius: 14px;
	corner-shape: bevel;
	margin-bottom: 10px;
}

.home-grid .home-grid-container .container-title {
	font-size: larger;
	font-weight: bold;
	text-transform: uppercase;
}

.home-grid .home-grid-container .container-comment {
	color: var(--gray-dark);
	font-family: monospace;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.home-grid .home-grid-container .container-comment::before {
	content: '// ';
}

#dropdown-nav {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	position: fixed;
	right: calc(-1 * 300px - 32px);
	z-index: 9999;
	transition: right 0.1s;
	will-change: right;
	width: 300px;
	top: 70px;
	list-style-type: none;
	margin: 0;
	visibility: hidden;
}

body.dropdown-open #dropdown-nav {
	right: 0;
	transition: right 0.2s;
	visibility: visible;
}

#dropdown-nav li {
	color: var(--white);
	border-top-right-radius: 14px;
	corner-shape: bevel;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 20px;
	overflow: hidden;
}

#dropdown-nav li:nth-child(4n-3) {
	background: var(--purple);
}

#dropdown-nav li:nth-child(4n-2) {
	background: var(--blue);
}

#dropdown-nav li:nth-child(4n-1) {
	background: var(--red);
}

#dropdown-nav li:nth-child(4n) {
	background: var(--yellow);
}

#dropdown-nav li#logout-link {
	background: var(--cyan);
}

#dropdown-nav li a {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 12px;
	color: inherit;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.1s;
}

#dropdown-nav li a:hover,
#dropdown-nav li a:focus {
	background-color: rgba(0, 0, 0, 0.2);
	transition: background-color 0.03s;
}

#dropdown-close-overlay {
	position: fixed;
	z-index: -1;
	background: rgba(0,0,0,0.4);
	background: linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0.8));
	backdrop-filter: blur(1px);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.1s;
	will-change: opacity, z-index;
}

.dropdown-open #dropdown-close-overlay {
	pointer-events: auto;
	opacity: 1;
	z-index: 9998;
}

/*Scale home container*/
@media (max-width: 1000px){
	.home-container {
		padding: 8px;
	}

	.home-container .welcome-box .welcome-text {
		font-size: x-large;
	}

	.home-container .welcome-box .sync {
		font-size: small;
	}

	.home-grid {
		grid-template-columns: 50% 50%;
		grid-template-rows: 4fr;
		gap: 10px;
	}

	.home-grid .home-grid-container {
		padding: 20px 4px 4px 12px;
	}

	.home-grid .home-grid-container .container-icon {
		font-size: 24px;
		padding: 10px 20px 10px 15px;
		border-top-right-radius: 14px;
		corner-shape: bevel;
		margin-bottom: 10px;
	}

	.home-grid .home-grid-container .container-title {
		font-size: medium;
	}
	.home-grid .home-grid-container .container-comment {
		font-size: smaller;
	}
}

/* *************************************** */
/* Main content container                  */
/* *************************************** */

main {
	padding: 8px;
	max-width: 1800px;
	margin: 0 auto;
}

main.noheader {
	margin-top: 0px !important;
	height: 100vh !important;
}

nav {
	display: block;
	margin: 16px 0;
	font-size: large;
}

nav a {
	display: inline-block;
	margin: 0 8px;
}

/* *************************************** */
/* Login page                              */
/* *************************************** */

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

.login-logo {
	margin-top: -100px; /* move logo up a bit */
	max-height: 400px;
	max-width: 90%;
	content: url('/images/logo-light.svg');
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .login-logo {
		content: url('/images/logo-dark.svg');
	}
}

:root[data-theme="dark"] .login-logo {
	content: url('/images/logo-dark.svg');
}

.login-button {
	display: block;
	padding: 12px 64px;
	border: solid 1px rgb(0, 0, 0);
	text-transform: uppercase;
	color: black;
	cursor: pointer;
	font-size: 1.5em;
	transition: 0.1s;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .login-button {
			border: solid 1px white;
			color: white;
	}
}

:root[data-theme="dark"] .login-button {
	border: solid 1px white;
	color: white;
}

.login-button:hover,
.login-button:focus {
	text-decoration: none;
	background-color: var(--primary);
	transition: 0.03s;
	outline: 0;
}

.login-button:active {
	border-style: inset;
}

/* *************************************** */
/* Userlist & piscine overview             */
/* *************************************** */

.userlist-header {
	display: block;
	margin: 8px 0;
}

.userlist-header select {
	padding: 4px;
	margin: 4px;
	font-size: 16px;
	border-radius: 4px;
}

.userlist-header button,
.userlist-header .button {
	display: inline-block;
	padding: 4px 8px;
	margin: 4px;
	font-size: 16px;
	cursor: pointer;
	background: var(--primary);
	color: var(--white);
	border: solid 1px var(--primary);
	border-radius: 4px;
	transition: 0.1s;
	text-decoration: none !important;
}

.userlist-header button:hover,
.userlist-header button:focus,
.userlist-header .button:hover,
.userlist-header .button:focus {
	background: var(--secondary);
	border-color: var(--secondary);
	transition: 0.03s;
}

.userlist-header button:disabled,
.userlist-header .button:disabled {
	background: var(--gray);
	border-color: var(--gray);
	color: var(--gray-light);
	cursor: not-allowed;
}

.userlist-header input:not([type="range"]),
.userlist-header select {
	color: var(--dark);
	background: var(--light);
	border: solid 1px var(--gray);
	border-radius: 4px;
	padding: 4px;
}

.userlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	grid-auto-rows: 1fr;
	gap: 8px;
	list-style-type: none;
	margin: 8px auto;
	padding: 0;
}

.userlist.flexiblerows {
	grid-auto-rows: minmax(200px, auto);
}

.userlist .user {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	padding: 40px 20px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--gray-dark);
	border-top-right-radius: 14px;
	corner-shape: bevel;
	backdrop-filter: blur(100px);
	background-color: rgba(0, 0, 0, 0.1);
}

.userlist.flexiblerows .user {
	justify-content: flex-start;
}

.userlist .user.dropout {
	transition: 0.1s;
	opacity: 0.7;
	filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-o-filter: grayscale(100%);
}

.userlist .user.dropout:hover {
	transition: 0.03s;
	opacity: 0.9;
	filter: grayscale(50%);
	-moz-filter: grayscale(50%);
	-webkit-filter: grayscale(50%);
	-o-filter: grayscale(50%);
}

.userlist .user.dropout .level {
	color: var(--red);
}

.userlist .user.potential-dropout {
	transition: 0.1s;
	opacity: 0.7;
	filter: grayscale(50%);
	-moz-filter: grayscale(50%);
	-webkit-filter: grayscale(50%);
	-o-filter: grayscale(50%);
}

.userlist .user.potential-dropout:hover {
	transition: 0.03s;
	opacity: 0.9;
	filter: grayscale(25%);
	-moz-filter: grayscale(25%);
	-webkit-filter: grayscale(25%);
	-o-filter: grayscale(25%);
}

.userlist .user.potential-dropout .level {
	color: var(--yellow);
}

.user .name {
	font-weight: bold;
	font-size: x-large;
}

.user.dropout .name {
	text-decoration: line-through;
}

.user .login {
	margin: 6px 0;
	font-size: 16px;
}

.user .login > * {
	vertical-align: middle;
}

.user .badge {
	display: inline-block;
	margin: 4px 0;
	padding: 2px 8px 2px 6px;
	font-size: small;
	color: var(--white);
	background-color: var(--gray-dark);
	border-top-right-radius: 4px;
	corner-shape: bevel;
	text-transform: uppercase;
}

.user .badge.student {
	background-color: var(--blue);
}

.user .badge.alumni {
	background-color: var(--intra); /* same color as this badge on Intra */
}

.user .pool {
	font-size: small;
}

.user .picture {
	display: block;
	margin: 20px auto;
	width: 300px;
	height: 300px;
	/* border-radius: 150px; */
	border: solid 1px var(--gray);
	border-top-right-radius: 32px;
	corner-shape: bevel;
	object-fit: cover;

	/* fallback image */
	background-image: url('/images/default.png');
	background-size: cover;
	background-position: center center;
}

.user.piscine .logtime-table {
	width: 100%;
	font-size: smaller;
	margin: 20px 0;
	border-top: solid 1px var(--gray);
	border-bottom: solid 1px var(--gray);
}

.user.piscine .logtime-table tr th,
.user.piscine .logtime-table tr td {
	padding: 0px 4px;
	width: 20%;
	text-align: center;
}

.user.piscine .projects-table {
	display: grid;
	grid-template-columns: repeat(4, minmax(25%, 1fr));
	grid-auto-rows: 50px;
}

.user.piscine .projects-table .project {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 2px;
	padding: 4px;
	overflow: hidden;
	border: solid 1px var(--gray);
	border-top-right-radius: 7px;
	corner-shape: bevel;
	text-decoration: none;
	color: var(--dark);
	transition: 0.1s;
}

.user.piscine .projects-table .project.not_started {
	opacity: 0.35;
	font-style: italic;
}

.user.piscine .projects-table .project.searching_a_group,
.user.piscine .projects-table .project.creating_group,
.user.piscine .projects-table .project.waiting_to_start {
	background-color: rgba(255, 255, 255, 0.025);
}

.user.piscine .projects-table .project.in_progress,
.user.piscine .projects-table .project.waiting_for_correction {
	background-color: rgba(255, 255, 255, 0.05);
}

.user.piscine .projects-table .project.validated {
	color: #000;
	background-color: var(--bg-green);
}

.user.piscine .projects-table .project.failed {
	color: #000;
	background-color: var(--bg-red);
}

.user.piscine .projects-table .project.finished:not(.validated):not(.failed) {
	color: #000;
	background-color: var(--yellow);
}

.user.piscine .projects-table .project:hover,
.user.piscine .projects-table .project:focus {
	transition: 0.03s;
	box-shadow: 0 0 2px 1px var(--blue);
	opacity: 1;
	text-decoration: none;
	overflow: visible;
	z-index: 999;
}

.user.piscine .projects-table .project:not(.validated):not(.failed):hover,
.user.piscine .projects-table .project:not(.validated):not(.failed):focus {
	background-color: var(--black);
}

.user.piscine .projects-table .project:hover .project-name,
.user.piscine .projects-table .project:focus .project-name {
	background-color: inherit;
}

.user.piscine .projects-table .project .project-name {
	white-space: nowrap;
}

.user.piscine .projects-table .project .project-mark {
	display: block;
	color: var(--gray-dark);
	font-size: large;
}

.user.piscine .projects-table .project.validated .project-mark,
.user.piscine .projects-table .project.failed .project-mark {
	font-weight: bold;
}

.user.piscine .projects-table .project.validated .project-mark {
	color: rgba(0, 75, 0, 0.8);
}

.user.piscine .projects-table .project.failed .project-mark {
	color: rgba(85, 0, 0, 0.8);
}

.userlist-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 8px;
	margin: 20px 0;
}

.userlist-stats .stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 8px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--gray-dark);
	border-top-right-radius: 14px;
	corner-shape: bevel;
	backdrop-filter: blur(100px);
	background-color: rgba(0, 0, 0, 0.1);
}

.userlist-stats .stat .stat-label {
	font-weight: normal;
}

.userlist-stats .stat .stat-value {
	font-weight: bold;
	font-size: x-large;
	margin-top: 4px;
}

/* *************************************** */
/* Media queries for user overview         */
/* *************************************** */

/* on phones, make userlists smaller in size to make sure there's always room for 2 users per row.
When the screen is rotated into landscape mode it should provide an extra good overview. */
@media (max-width: 600px), screen and (max-height: 600px) and (orientation:landscape) {
	.userlist {
		zoom: 0.5;
	}

	.user .name {
		font-size: xx-large;
	}

	.user .login,
	.user .pool,
	.user .level {
		font-size: x-large;
	}

	.user.piscine .logtime-table tr td {
		font-size: medium;
	}

	.user.piscine .last-seen,
	.user.piscine .currently-in {
		font-size: large;
	}

	.user.piscine .projects-table {
		grid-auto-rows: 56px;
	}

	.user.piscine .projects-table .project .project-mark {
		font-size: x-large;
	}
}

/* *************************************** */
/* Clustermap                              */
/* *************************************** */

#clustermap-main-wrapper {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 200px); /* remove 200px to account for header and padding */
}

/* Try to fit 2 clustermaps next to each other on larger screens
 * and 1 clustermap on smaller screens */
#clustermap-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: flex-start;
	flex-direction: row;
	min-height: 0; /* needed to fit the container within the flexbox */
}

.clustermap {
	max-height: 100%;
	/* aspect-ratio: 0.65 / 1; */
	max-width: 100%;
}

#history-playback-range-value {
	font-family: monospace;
}