@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "./vars.css";

@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/* COLORS */
.emoji {
	font-family: 'apple color emoji', 'segoe ui emoji', 'noto color emoji', 'android emoji', emojisymbols, 'emojione mozilla', 'twemoji mozilla', 'segoe ui symbol';
	font-weight: 400;
}

body {
	background-color: var(--bg1);
	color: var(--text1);
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
	font-size: 16px;
	position: static;
	min-height: 100dvh;
}

.hidden { display: none !important; }
.error { color: var(--text-warning); }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.d-flex-row {
	display: flex;
	flex-flow: row;
	gap: 4px;
}
.d-flex-col {
	display: flex;
	flex-flow: column;
	gap: 4px;
}


dialog:not([data-open="true"]) {
	display: none !important;
}
::backdrop {
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(2px);
}
blockquote {
	border-left: 3px solid var(--border);
	margin-left: 0;
	padding-left: 14px;
}
img { max-width: 100%; }
a:hover { cursor: pointer; }
a[href]:not(.button),
a.link { color: var(--link);}

.button {
	background-color: var(--bg1);
	border-radius: 14px;
	border: 1px solid var(--border);
	color: var(--text1);
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1em;

	text-decoration: none;
	padding: 10px;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.button.icon { padding: 12px; }
.button.wide {
	text-align: center;
	display: block;
	margin-top: 12px;
	width: -webkit-fill-available;
}
.button.primary {
	background-color: var(--bg-button-primary);
	background-image: var(--bg-button-primary-gradient);
	border: none;
	letter-spacing: 0.2px;
	color: white;
}
.button.primary:hover,
.button.primary.active {
	background-image: var(--bg-button-primary-focus);
	box-shadow: 0 1px 12px -2px var(--bg1);
}
.button.secondary {
	background-color: var(--bg-button-secondary);
}
.button.secondary:hover,
.button.secondary.active {
	background-color: var(--bg-button-secondary-focus);
}
.button.warning {
	background-color: var(--bg-button-warning);
}
.button.warning:hover,
.button.warning.active {
	background-color: var(--bg-button-warning-focus);
}
.button > * + * { margin-left: 6px; /* spaces out icon and label */ }
.button[disabled] {
	background-color: var(--bg3) !important;
	background-image: none !important;
	border-style: dashed;
	border-width: 1px;
	cursor: not-allowed;
}
.button.primary[disabled] {
	border-width: 0;
	color: var(--text1);
}
.button i[class^='fa'] { line-height: 1em; }
.button.active i[class^='fa'] { font-weight: 900; }
.button.toggle:hover::after,
.button.toggle.active::after {
	content: '';
	position: absolute;
	inset: 4px;
	z-index: 0;

	border-radius: 10px;
	background-color: var(--interactive);
}
.button.toggle.active::after { background-color: var(--toggle-active); }
.button.toggle:hover *,
.button.toggle.active * {
	position: relative;
	z-index: 1;
}

.button-bar {
	background-color: var(--bg1);
	border: 1px solid var(--border);
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: stretch;
	padding: 6px;
	gap: 4px;
	flex-grow: 0;
	flex-shrink: 0;
}
.button-bar .button {
	border: unset;
	border-radius: 10px;
	padding: 4px;
	flex-grow: 2;
	margin-top: 0;
}
.button-bar .button.toggle { padding: 6px 12px; }
.button-bar .button.toggle:hover::after { inset: -2px 0; }
.button-bar .button.toggle.active::after { inset: -2px; }

.inline-buttons {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.inline-buttons > * { flex-grow: 2; }

/* FORM STYLES */
#app input, input,
#app input:-webkit-autofill, input:-webkit-autofill,
#app textarea, textarea,
#app textarea:-webkit-autofill, textarea:-webkit-autofill {
	background-color: var(--bg-field) !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--bg-field) inset;
	color: var(--text1) !important;
	-webkit-text-fill-color: var(--text1) !important;

	border: 1px solid var(--border);
	border-radius: 6px;
	display: block;
	font-size: 1em;
	line-height: 1.4em !important;
	padding: 6px;
	position: relative;
	width: -webkit-fill-available;
}
#app input:not(:empty), input:not(:empty),
#app input:hover, input:hover,
#app input:-webkit-autofill:hover, input:-webkit-autofill:hover,
#app input:focus, input:focus,
#app input:-webkit-autofill:focus, input:-webkit-autofill:focus,
#app textarea:not(:empty), textarea:not(:empty),
#app textarea:hover, textarea:hover,
#app textarea:-webkit-autofill:hover, textarea:-webkit-autofill:hover,
#app textarea:focus, textarea:focus,
#app textarea:-webkit-autofill:focus, textarea:-webkit-autofill:focus {
	background-color: var(--bg-field-focus) !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--bg-field-focus) inset;
	outline: 2px solid var(--border-field-outline);
	outline-offset: -1px;
}

#app select, select,
#app select:-webkit-autofill, select:-webkit-autofill {
/*	appearance: none; */
	background-color: var(--bg-field-select) !important;
	-webkit-box-shadow: 0 0 0px 1000px transparent inset;
	color: var(--text1) !important;
	-webkit-text-fill-color: var(--text1) !important;

	border: 1px solid var(--border);
	border-radius: 6px;
	display: block;
	font-size: 1em;
	line-height: 1.4em !important;
	padding: 6px;
	position: relative;
	width: -webkit-fill-available;
}
#app select:hover, select:hover,
#app select:focus, select:focus,
#app select:not(:empty), select:not(:empty),
#app select:-webkit-autofill:hover, select:-webkit-autofill:hover,
#app select:-webkit-autofill:focus, select:-webkit-autofill:focus {
	background-color: var(--bg-field-focus) !important;
	outline: 2px solid var(--border-field-outline);
	outline-offset: -1px;
}
#app select::after, select::after {
	content:'v';
	position: absolute;
	top:.5em;
	right:1em;
}

form button:last-of-type { margin-top: 4px; }

*.text-highlight {
	color: var(--text-warning);
	font-weight: bold;
}

::marker, ::-webkit-details-marker { display: none; }
summary { list-style: none; }
.accordion summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
	list-style: none;
	padding: 12px 0;
}
.accordion summary::after {
	content: '\f107';
	display: inline-block;
	font-family: 'Font Awesome 7 Pro';
	font-weight: bold;
	float: right;
	transition: transform .3s;
	text-align: center;
	width: 1.25em;
}
.accordion:not([open]) summary::after { transform: rotate(-90deg) translate(0, 1px); }
.accordion p { margin-top: 0;}


#alert-message {
	background-color: var(--bg1);
	border: 1px solid var(--border);
	border-radius: 32px;
	box-shadow: 0 0 100px 20px var(--shadow), 0 0 200px 40px var(--shadow);
	color: var(--text1);
	opacity: 1;
	padding: 20px 24px 24px;
	transition: all 300ms ease;

	position: fixed;
	inset: 40vh 0; /* fallback */
	inset: 40dvh 0;
	margin: 0 auto;
	max-width: 440px;
	z-index: 20;

	width: fit-content;
	height: fit-content;
}
#alert-message.center { padding: 24px 48px 30px; }
#alert-message.center * { text-align: center; }
#alert-message.fade-out { opacity: 0; }
#alert-message.success {
	border-color: green;
	color: #9fde8f;
	box-shadow: 0 0 100px 20px #00800063, 0 0 200px 40px #00800063;
}
#alert-message.warning {
	border-color: var(--border-warning);
	color: var(--text-warning);
}
#alert-message * {
	font-weight: normal;
	margin: 0;
}
#alert-message .button { margin-top: 12px; }
#alert-message.toast {
	background-color: transparent;
	background-image: linear-gradient(to bottom, var(--bg-toast-top), var(--bg-toast-bottom));
	backdrop-filter: blur(6px);
	border: none;
	box-shadow: 0 0 12px -6px rgba(0, 0, 0, 0.4), 0 3px 20px -2px rgba(0, 0, 0, 0.3);
	color: #ffffff;
	font-weight: 600;
	letter-spacing: 0.3px;
	padding: 12px 24px;
	transition: top ease 350ms;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	top: -60px;
}
#alert-message.toast.show {
	top: 16px;
}


/* PAGE LAYOUT AND LAYOUT STYLES */
html, body {
	width: 100vw;
	overflow: hidden;
	max-height: -webkit-fill-available;
}
#app {
	background-color: var(--bg2);
	display: flex;
	width: 200vw;
	height: -webkit-fill-available;
	min-height: 100dvh;
}
#app.resizing { transition: all .3s ease; }
#app:has(#sidebar.collapsed) { margin-left: calc(-1 * var(--col-width)); }

:root { --col-width: 100vw; }
.column {
	border-right: 1px solid var(--border);
	box-sizing: border-box;
	padding-bottom: 160px;

	flex-shrink: 0;
	overflow: auto;
	position: relative;
	width: var(--col-width);
}
.column.content {
	padding-top: 8px;
	padding-right: var(--container-padding);
	padding-left: var(--container-padding);
	max-height: 100dvh;
}
.column.content > * {
	margin: 0 auto;
	min-height: fit-content;
}
.column:last-child { border-right: unset; }

#sidebar {
	padding-bottom: 0;
	height: unset;
	max-height: unset;
	overflow: hidden;
}
#sidebar:has(#global-nav .button-bar),
#sidebar:has(#toggle-sidebar) {
	display: flex;
}

@media(min-width:768px) {
	:root { --col-width: 50vw; }
	/* #app.resizing .column { transition: margin-left 300ms, width 300ms, max-width 300ms; }*/

	.column {
		display: block;
		height: 100dvh;
		max-height: 100dvh;
	}
	#sidebar { min-width: 300px; }

	#sidebar + .column:last-child {
		flex-grow: 1;
		flex-shrink: 1;
		width: calc(100vw - var(--col-width));
		max-width: calc(100vw - var(--col-width));
	}
	#sidebar + .column:last-child > * {
		max-width: 800px;
		margin-right: auto;
		margin-left: auto;
	}
	#sidebar.collapsed + .column { max-width: 100vw; }
}
@media(min-width:1024px) {
	:root { --col-width: 30vw; }
	#app { width: 100vw; }
	#sidebar {
		padding-bottom: 0!important;
		display: flex;
		flex-flow: column;
		height:100vh; /* fallback */
	  height:100dvh; /* "dynamic" vh for mobile */
	  max-height: 100vh; /* fallback */
	  max-height: 100dvh; /* "dynamic" vh for mobile */
	  overflow: hidden;
	}
/*	#sidebar:has(#global-nav[data-open=true]) {
		overflow: hidden;
	}*/

	/* if curriculum is hidden */
	#sidebar.collapsed { margin-left: 0;}
	#sidebar.collapsed ~ .column { width: var(--col-width); }
}
@media(min-width:1200px) {
	:root { --col-width: 360px; }
	#sidebar {
		width: var(--col-width);
		max-width: var(--col-width);
	}
}
/* END LAYOUT */


/* PAGE LAYOUT STYLES */
#sidebar { background: var(--bg1); }

iframe.invert {
	background-color: black;
	color: white;
	filter: invert() hue-rotate(180deg);
}