:root {
	--light-color: #EEEEEE;
	--dark-color: #222222;
	--light-color-seethrough: #EEEEEEC0;
	--dark-color-seethrough: #222222C0;

	--primary-color: #0F0B33;
	--on-primary-color: var(--light-color);
	--accent-color: #285986;
	--on-accent-color: var(--light-color);
	--tertiary-color: #49BD49;
	--on-tertiary-color: var(--dark-color);

	/* for the dark mode icon */
	--yellow: #EDD329;

	--background-color: light-dark(var(--light-color), var(--dark-color));
	--text-color: light-dark(var(--dark-color), var(--light-color));
	--shadow-color: light-dark(var(--dark-color-seethrough), var(--light-color-seethrough));

	/* --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
	--font: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/* @media (prefers-color-scheme: light) {
	:root {
		
	}
} */

* {
	box-sizing: border-box;
}

::selection {
	background-color: var(--text-color);
	color: var(--background-color);
}

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background-color: var(--background-color);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: var(--text-color);
	border-radius: 10px;
	cursor: grab;
}

::-webkit-scrollbar-thumb:active {
	cursor: grabbing;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--tertiary-color);
}

a {
	color: var(--accent-color);
}

a:visited {
	color: var(--tertiary-color);
}

a:hover {
	color: var(--text-color);
}

body,
html {
	background-color: var(--background-color);
	color: var(--text-color);
	min-height: 100vh !important;
	padding: 0;
	margin: 0;
	font-family: var(--font);
}

body {
	color-scheme: light dark;
}

@media (max-width: 1000px) {
	#signin {
		width: 98%;
		margin: 0 10px;
		height: 40%;
	}

	#requests {
		width: 100%;
		text-align: center;
		padding: 0 10px;
	}

	#requests > * {
		width: 100%;
	}

	header {
		flex-direction: column;
	}

	.input_container {
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
		gap: 2px;
	}

	#warning {
		display: block !important;
		font-size: larger;
		color: red;
	}

	#form_action {
		margin-top: 5px;
	}
}

@media (min-width: 1000px) {
	#signin {
		min-width: 35%;
		min-height: 35%;
	}

	#requests {
		width: 80%;
	}

	#requests > div {
		width: 30%;
	}

	#requests textarea {
		width: 30%;
	}

	header {
		flex-direction: row;
	}

	#form_action {
		margin-top: 0;
	}
}

@media (pointer: coarse) {
	#requests > button {
		width: 180px;
		height: 50px;
	}

	#requests > textarea {
		height: 85px;
	}

	button {
		width: 100px;
		min-height: 35px;
	}

	#requests input,
	#signin input {
		height: 30px;
	}
}

@media (pointer: fine) {
	#requests > button {
		width: 120px;
		height: 30px;
	}

	#requests > textarea {
		height: 50px;
	}
}

/* TODO: Evaulate printing */
@media print {
	p {
		page-break-before: always;
	}

	.hide_on_print {
		display: none;
	}

	.maincontent:not(.hide_on_print) {
		display: inline-block;
		width: 100%;
		height: 100%;
		;
		overflow: visible;
	}

	body,
	html {
		height: 100%;
		display: inline-block;
	}

	footer {
		display: none;
	}
}

@media not print {
	.hide_on_not_print {
		display: none;
	}
}

/* Actual Styling */

body {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Sign in page */
#signin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 2px dashed var(--text-color);
	border-radius: 10px;
	padding: 10px;
	z-index: 999;
	/* this way the title doesn't see through in a really short window; same purpose as the z-indices */
	background-color: var(--background-color);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;

	--box-shadow: 4px 4px 12px 0px var(--shadow-color);
	box-shadow: var(--box-shadow);
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
}

h1 {
	z-index: 0;
}

#form_action {
	margin-bottom: 10px;
	font-size: xx-large;
}

.input_container {
	width: 50%;
	text-align: right;
	margin-right: 30px;
}

.input_container > input {
	margin-left: 10px;

	background-color: var(--background-color);
	color: var(--shadow-color);
	border: 2px solid var(--text-color);
	border-radius: 5px;
	padding: 5px 10px;
	outline: none;
}

.input_container > input:focus {
	border-color: var(--tertiary-color);
}

.input_container > input::placeholder {
	color: var(--shadow-color);
}

#signin_error {
	color: red;
	margin: 0;
	display: none;
}

.signin_buttons {
	margin-top: 20px;
	width: 75%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	gap: 20px;
}

.signin_buttons > button {
	padding: 5px 20px;
	border: 2px solid var(--text-color);
	background-color: var(--accent-color);
	border-radius: 5px;
	outline: none;
	cursor: pointer;
	transition: background-color 300ms ease, color 300ms ease;
}

.signin_buttons > button:hover {
	background-color: var(--tertiary-color);
	color: var(--on-tertiary-color);
}

/* #acct_signin:not(:hover) {
	background-color: var(--primary-color);
} */

/* Header */

header {
	display: flex;
	align-items: center;
	padding: 20px;
	gap: 10px;
}

/* Your Info */

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

#your_info {
	border: 2px dashed var(--text-color);
	padding: 10px 80px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	gap: 10px;
}

#your_info > h2,
#your_info > p {
	margin: 0;
}

#your_info > h2 {
	border-bottom: 2px solid var(--text-color);
}

#homepage_buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

#signout {
	outline: none;
	cursor: pointer;
	padding: 3px 10px;
	background-color: var(--background-color);
	color: var(--text-color);
	border: 1px solid var(--text-color);
	border-radius: 5px;
	transition: background-color 300ms ease, color 300ms ease;
}

#signout:hover {
	background-color: var(--accent-color);
	color: var(--on-accent-color);
}

#dark_mode {
	cursor: pointer;
	user-select: none;
	transition: color 500ms ease;
	color: var(--text-color);
}

#dark_mode[icon="heroicons-solid:sun"]:hover {
	color: var(--yellow);
}

#dark_mode[icon="heroicons:moon-16-solid"]:hover {
	color: var(--accent-color);
}

.user_data,
#user_count {
	color: var(--accent-color);
}

#points_amts {
	font-size: large;
}

/* Points */

#points {
	display: flex;
	flex-direction: row;
	gap: 30px;
	/* if you remove this (width), you'll want to add a margin-left and overflow will be forced onto the main page */
	width: 98vw;
	justify-content: start;
	align-items: center;
	overflow-x: auto;
	padding-bottom: 10px;
}

.point_entry {
	--border-radius: 15px;
	width: 350px;
	height: 500px;
	border: 2px solid var(--text-color);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 10px;
	flex-shrink: 0;
}

.point_entry > img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	border-bottom: 1px dashed var(--text-color);
}

.show_name {
	margin-top: 10px;
	margin-bottom: 0;
	padding-left: 5px;
	padding-right: 5px;
	/* flex-grow: 1; */
}

.show_dates {
	font-size: small;
	color: var(--shadow-color);
}

.point_entry hr {
	width: 70%;
}

.point_entry > p {
	margin: 0;
	padding: 0;
}

.points_amt {
	font-weight: bolder;
	color: var(--tertiary-color);
}

/* user requests */

#requests {
	padding-bottom: 75px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	border-top: 3px dashed var(--text-color);
}

#requests > div {
	text-align: center;
	border: 1px solid var(--text-color);
	border-radius: 10px;
	padding: 10px;
}

#requests p {
	margin-top: 0;
}

#requests h4 {
	margin-bottom: 0;
}

#requests input,
#requests_list input {
	width: 50px;
	outline: none;
	border: 2px solid var(--text-color);
	border-radius: 5px;
	transition: border-color 300ms ease;
}

#requests input:focus,
#requests_list input:focus {
	border-color: var(--tertiary-color);
}

#requests textarea {
	outline: none;
	border: 2px solid var(--text-color);
	border-radius: 5px;
	transition: border-color 300ms ease;
}

#requests textarea:focus {
	border-color: var(--tertiary-color);
}

#requests button {
	outline: none;
	border: 2px solid var(--text-color);
	border-radius: 5px;
	transition: background-color 300ms ease, color 300ms ease;
	cursor: pointer;
	background-color: var(--accent-color);
	color: var(--on-accent-color);
}

#requests button:hover {
	background-color: var(--background-color);
	color: var(--text-color);
}

.request {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--text-color);
}

.request .row_one {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.request .row_one .user_name {
	margin-left: 5px;
	margin-right: 20px;
	color: var(--accent-color);
}

/* Admin */

#user_list,
#shows_list,
#requests_list {
	width: 80vw;
	max-height: 50vh;
	/* TODO: evaluate heights once more data is available */
	padding: 5px 30px;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	gap: 10px;

	border: 2px dashed var(--text-color);
	border-radius: 10px;
}

#shows_list {
	max-height: 30vh;
	/* TODO: evaluate heights once more data is available */
}

.user:not(:last-child),
.show:not(:last-child) {
	border-bottom: 2px solid var(--text-color);
}

.user,
.show {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: all 300ms ease;
	border: 2px solid var(--background-color);
	border-radius: 10px;
	padding: 12px 20px;
}

.show {
	gap: 25px;
}

.user > p,
.show > p {
	margin: 0;
	padding: 0;
}

.user:hover,
.show:hover {
	background-color: var(--accent-color);
	color: var(--on-accent-color);
	border-color: var(--text-color);
}

.user[data-selected="true"],
.show[data-selected="true"] {
	background-color: var(--tertiary-color);
	color: var(--on-tertiary-color);
	border-color: var(--text-color);
}

.user[data-selected="true"] .points_amt {
	color: var(--on-tertiary-color);
}

.induction_check {
	color: var(--accent-color);
}

.subtitle {
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--text-color);
	margin-bottom: 10px;
}

#mass_point_management {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 30px;
	width: 100%;
}

.pts_change_btn {
	width: 50px;
	font-size: larger;
	outline: none;
	border: 1px solid var(--text-color);
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 300ms ease;
}

.pts_change_btn:hover {
	background-color: var(--background-color);
	color: var(--text-color);
}

.pts_change_btn_positive {
	background-color: #49BD49;
	color: var(--dark-color);
}

.pts_change_btn_negative {
	background-color: rgb(180, 4, 4);
	color: var(--light-color);
}

.pts_change_btn_neutral {
	background-color: var(--accent-color);
	color: var(--on-accent-color);
}

#user_induct {
	width: 150px;
	font-size: small;
	height: 25px;
}

#addshow {
	padding: 8px 20px;
	cursor: pointer;
	outline: none;
	border-radius: 10px;
	border: 2px dotted var(--text-color);
	background-color: var(--background-color);
	color: var(--text-color);
	transition: background-color 300ms ease;
}

#addshow:hover {
	background-color: var(--accent-color);
}

/* context menus */

.context_menu {
	position: absolute;
	padding: 10px;
	border: 2px solid var(--text-color);
	border-radius: 5px;
	background-color: var(--background-color);
}

#user_menu {
	display: flex;
	flex-direction: row;
	gap: 20px;
	overflow-x: scroll;
	max-width: 500px;
}

#user_menu .point_entry {
	width: 280px;
	height: 400px;
	justify-content: space-around;
}

#user_menu .point_entry img {
	height: 160px;
}

#personal_pts_btns {
	display: flex;
	flex-direction: row;
	gap: 3px;
	width: 100%;
	padding: 5px;
}

/* SPREADSHEET ENABLED */
.pts_tech,
#tech_points_container {
	display: none;
}