/*
 * clippr: a social bookmarking service for the AT Protocol
 * Copyright (c) 2025 clippr contributors.
 * SPDX-License-Identifier: AGPL-3.0-only
 */

:root {
	color-scheme: dark light;
	font-family: Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #222 !important;
		--fg: #fff !important;
		--controls-bg: #2B2A33 !important;
		--controls-bg-hover: #52525E !important;
		--controls-border: #8F8F9D !important;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #fff !important;
		--fg: #222 !important;
		--controls-bg: #E9E9ED !important;
		--controls-bg-hover: #D0D0D7 !important;
		--controls-border: #8F8F9D !important;
	}
}

body {
	background-color: var(--bg);
	color: var(--fg);
	width: 70vw;
	margin: 1rem auto;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1rem;
	border-bottom: 1px solid var(--fg);

	#header-left {
		font-weight: bold;
	}

	#header-right nav {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}
}

main {
	margin: 1rem;
}

#main-headings {
	h1 {
		margin: 0;
	}

	margin: 1rem 0 1rem 0;
}

#page-location {
	display: flex;
	align-items: start;
	gap: 0.5rem;
	padding: 0 0 0 0.5rem;
	border: 1px solid var(--fg);

	p {
		margin: 0;
		padding: 0.5rem 0;
	}
}

#page-location-last {
	font-weight: bold;
}

#content {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	justify-content: space-between;
}

#main-content {
	h3 {
		margin: 0;
	}

	p {
		line-height: 1.5;
	}
}

#sidebar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.centered {
	text-align: center;
	margin: 0 auto;
}

.sidebar-item {
	border: 1px solid var(--fg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;
	text-align: center;

	h3 {
		margin: 0.5rem 0 1rem 0;
	}

	h4 {
		margin: 0;
	}
}

.stat-counter {
	font-weight: bold;
	font-size: 1.5rem;
	margin: 0.5rem 0;
}

form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;

	input {
		padding: 0.25rem;
		margin: 0.5rem;
	}
}

button {
	padding: 0.25rem 2rem;
	margin: 0 0 0.5rem 0;
}

footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1rem;
	border-top: 1px solid var(--fg);

	#footer-right nav {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}
}

a {
	text-decoration: none;
	color: #8c8cfe;
}

a:hover {
	font-style: italic;
	font-weight: bold;
	cursor: pointer;
}

a:visited {
	color: #8c8cfe;
}

.silent-link {
	color: var(--fg);

	&:hover {
		font-style: revert;
		font-weight: revert;
	}
}

#profile-view {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2rem;

	div {
		text-align: left;
	}

	* {
		margin: 0.5rem 0;
	}
}

.profile-picture {
	border-radius: 50%;
	width: 150px;
	height: 150px;
}

form input[type="file"] {
	display: none;
}

.file-upload {
	border: 1px solid var(--controls-border);
	display: inline-block;
	padding: 6px 12px;
	background-color: var(--controls-bg);
	border-radius: 6px;
	margin: 0.5rem 0;
}

.file-upload:hover {
	background-color: var(--controls-bg-hover);
}

textarea {
	padding: 0.5rem;
	width: 275px;
	height: 100px;
	font-family: Arial, sans-serif;
}

@media (max-width: 768px) {
	body {
		width: 90vw;
	}

	header {
		flex-direction: column;
		padding-bottom: 1rem;
	}

	#content {
		flex-direction: column;
	}

	#profile-view {
		flex-direction: column;
		align-items: center;
		gap: 0.1rem;
	}

	footer {
		flex-direction: column;
		text-align: center;
	}
}