/*
	Created by Hovik Melikyan
	30-Mar-2024
*/

:root {
	--text-color: #242A2A;
	--navbar-width: 216px;
	--pep-color: #F35448;
	--text-color: #242A2A;
	--inactive-color: #A5A8A8;
	--sub-text-color: #889999;
	--light-gray: #EAEAEA;
	--form-width: 320px;
	--text-size: 16px;
}

@font-face {
	font-family: "SF Compact Text";
	src: url("/static/fonts/SFCompactText-Light.woff2") format("woff2");
	font-weight: 300;
}

@font-face {
	font-family: "SF Compact Text";
	src: url("/static/fonts/SFCompactText-Regular.woff2") format("woff2");
	font-weight: 400;
}

@font-face {
	font-family: "SF Compact Text";
	src: url("/static/fonts/SFCompactText-Medium.woff2") format("woff2");
	font-weight: 500;
}

@font-face {
	font-family: "SF Compact Text";
	src: url("/static/fonts/SFCompactText-Semibold.woff2") format("woff2");
	font-weight: 600;
}


/* Defaults */

html, body {
	margin: 0;
	padding: 0;
	font-family: "SF Compact Text", sans-serif;
	font-weight: 300;
	color: var(--text-color);
	font-size: var(--text-size);
	background: #FBFBFB;
}

a, a.visited {
	color: var(--pep-color);
	text-decoration: none;
}

input, textarea {
	background: none;
	border: none;
	padding: 0;
	width: 100%;
	font-family: "SF Compact Text", sans-serif;
	font-weight: 300;
	font-size: var(--text-size);
	resize: none;

	&:focus {
		outline: none;
	}
}

button {
	background: none;
	border: none;
	padding: 10px 24px;
	background: rgba(0, 0, 0, 0.05);
	color: var(--pep-color);
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;

	&:disabled {
		opacity: 0.4;
		cursor: default;
	}

	&.plain {
		background: none;
		padding: 10px 0;
		font-size: 14px;
		font-weight: 600;
	}
}


/* Common components */

.logo-name {
	font-weight: 500;
}

.error-msg {
	color: #F35448;
	padding-left: 22px;
	background: url(/static/icon-error.svg) no-repeat center left;
}

.stats-text {
	color: var(--inactive-color);
	font-size: 14px;
	line-height: 1.4em;
}

.inactive-text {
	color: var(--inactive-color);
}

.category-badge {
	border-radius: 4px;
	border: 1px solid var(--light-gray);
	background: white;
	font-size: 12px;
	text-transform: uppercase;
	padding: 4px 7px;
}

.category-badge.selected {
	border: 1px solid var(--pep-color);
	background: var(--pep-color);
	color: white;
}

section {
	border-radius: 8px;
	border: 1px solid var(--light-gray);
	background: white;
	padding: 24px;

	> h1 {
		margin: 0;
		margin-bottom: 16px;
		font-size: 24px;
		font-weight: 400;
	}
}

div.value-table {
	> div {
		display: flex;
		gap: 6px;
		margin: 12px 0;
		> div:last-child {
			margin-left: auto;
			font-weight: 500;
		}
	}
}

div.quote-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

form.big-form {
	display: flex;
	flex-flow: column;
	gap: 24px;

	.input-box {
		display: flex;
		flex-flow: column;
		gap: 6px;
		padding: 9px 15px;
		background: white;
		width: calc(100% - 32px);
		border-radius: 8px;
		border: 1px solid var(--light-gray);

		> label {
			font-size: 12px;
			color: var(--inactive-color);
		}

		&:focus-within {
			border: 1px solid #B2A2A2;
			> label {
				color: var(--text-color);
			}
		}
	}

	.buttons {
		display: flex;
		align-items: center;
		gap: 32px;
		margin-top: 32px;
	}
}

form.search-bar {
	display: flex;
	padding-left: 28px;
	background: url(/static/icon-search.svg) no-repeat center left;
	min-height: 36px;
	border-bottom: 1px solid var(--light-gray);
}

#loadMoreButton {
	margin: auto;
	cursor: pointer;
}

.empty-result {
	margin: 24px;
	text-align: center;
	color: var(--inactive-color);
	text-transform: uppercase;
	font-size: 14px;
}


/* Login */

body.login {

	> form {
		display: flex;
		flex-flow: column;
		width: var(--form-width);
		min-height: 100vh;
		margin: auto;
		gap: 16px;
		justify-content: center;
		align-items: center;

		> div.logo-name {
			margin-bottom: 36px;
		}

		> button {
			width: 100%;
			min-height: 48px;
			border-radius: 8px;
			margin-top: 36px;
		}
	}
}


/* Navigation bar */

body.dashboard {

	> nav {
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		padding: 32px 20px;
		width: calc(var(--navbar-width) - 4px - 40px);
		height: 100%;
		background: white;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
		border-left: 4px solid var(--pep-color);
		font-weight: 500;

		> menu {
			display: flex;
			flex-direction: column;
			gap: 12px;
			padding: 0;
			width: 100%;
			margin: 32px 0;

			> a {
				display: flex;
				gap: 12px;
				align-items: center;
				color: var(--text-color);
				padding: 10px 12px;

				&.selected {
					background: #F4F4F4;
					border-radius: 6px;
				}
			}
		}

		> div.bottom-menu {
			margin-top: auto;
			margin-bottom: calc(32px + 16px);
		}
	}
}


/* Dashboard page layout */

body.dashboard > main {
	margin: 32px 32px 56px calc(32px + var(--navbar-width));
}

body.dashboard.home > main {
	> section.user-stats {
		max-width: 320px;
	}
}

body.dashboard:is(.quotes, .quote-edit, .users, .user-edit) > main {
	display: flex;
	gap: 12px;

	> div:first-child {
		flex: 3;
		display: flex;
		flex-flow: column;
		gap: 16px;
	}

	> aside {
		flex: 1;
		text-align: right;
		display: flex;
		flex-flow: column;
		gap: 24px;

		> div.categories-aside {
			display: flex;
			flex-flow: column;
			gap: 8px;
			align-items: flex-end;

			> a.category-badge {
				font-weight: 500;
			}
		}
	}
}

section.quote-edit {
	display: flex;
	flex-flow: column;

	> form.big-form > .buttons > button:nth-child(2) {
		margin-right: auto;
	}
}


/* Quote list */

section.quotes {
	display: flex;
	flex-flow: column;
	gap: 48px;

	&[hidden] {
		display: none !important;
	}

	> a.item {
		display: flex;
		flex-flow: column;
		gap: 8px;
		padding-left: 32px;
		background: url(/static/icon-quote.svg) no-repeat top left;
		color: var(--text-color);

		> div.quote-info {
			display: flex;
			gap: 8px;

			> div.quote-author {
				text-align: right;
				margin-left: auto;
				color: var(--sub-text-color);
				font-size: 14px;
			}
		}
	}
}


/* Users */

section.users {
	display: flex;
	flex-flow: column;
	gap: 48px;

	> a.item {
		display: grid;
		grid-template-columns: auto auto;
		align-items: center;
		gap: 8px;
		padding-left: 32px;
		background: url(/static/icon-user.svg) no-repeat top left;
		color: var(--inactive-color);
		font-size: 14px;

		> div:nth-child(2n) {
			margin-left: auto;
		}

		> div.user-name {
			font-size: var(--text-size);
			color: var(--text-color);
		}

		> div.user-email.apple {
			padding-left: 16px;
			background: url(/static/icon-apple.svg) no-repeat center left;
		}
	}
}

section.user-edit {
	display: flex;
	flex-flow: column;

	> form.big-form > .buttons > button:first-child {
		margin-right: auto;
	}
}