@import 'fonts.css';
@import 'table.css';
@import 'modal.css';

:root {
	--bg: #1d242f;
	--bg-secondary: #121f2e;
	--user-avatar-border: #ffffff26;
	--user-avatar-bg-hover: #ffffff0d;
	--panel: #0b1220;
	--muted: #9fb7c9;
	--hashtags: rgba(159, 183, 201, 0.48);
	--card: #1d242f;
	--accent: #2563eb;
	--accent-2: #06b6d4;
	--surface: #0b1220;
	--glass: rgba(255, 255, 255, 0.04);
	--divider: rgba(255, 255, 255, 0.06);
	--radius: 10px;
	--shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
	--text: #e6eef8;
	--card-bg: #0b1220;
	--success: #28A745;
	--error: #DC3545;
	--container-max: 980px;
	--post-item-h-a-color: #0080a6;
	--comments-connector-color: rgba(255, 255, 255, 0.06);
	--input-border-color: rgba(255, 255, 255, 0.06);
}

* {
	box-sizing: border-box
}

html,
body {
	height: 100%;
	-webkit-text-size-adjust: 100%;
	min-height: 100%;
}

hr {
	border: none;
	height: 1px;
	background-color: var(--divider);
}

.center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

button, .button {
	padding: 8px 16px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: transparent;
	color: #cfe6ff;
	cursor: pointer;
	transition: background 0.15s ease,
	border-color 0.15s ease;

	&:hover {
		background: rgba(255, 255, 255, 0.06);
		border-color: rgba(111, 179, 255, 0.6);
	}

	&:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
	}

	&.deleteBtn, &.redBtn {
		border-color: var(--error);

		&:hover {
			background: var(--error);
			color: white;
			border-color: var(--error);
		}
	}

	svg {
		display: flex;
	}
}

h2 {
	font-size: 20px;
}

a {
	color: #8bbcff;
	text-decoration: none;
	transition: color .15s ease;

	&:hover {
		color: var(--accent);
	}
}

.user-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--user-avatar-border);
	cursor: pointer;
	font-size: 12px;
	flex-wrap: nowrap;
	flex-direction: row;
	@media (max-width: 1024px) {
		font-size: 16px;
	}
	@media (max-width: 640px) {
		font-size: 14px;
	}
}

input {
	background-color: transparent;
	border: 1px solid var(--input-border-color);
	border-radius: var(--radius);
	color: inherit;
	transition: all .15s ease;

	&.error {
		border-color: var(--error);
	}

	&:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);

		&.error {
			border-color: var(--error);
		}
	}

	input::placeholder {
		color: rgba(180, 200, 230, 0.6);
	}
}

form {
	font-size: 13px;

	.form-row {
		display: flex;
		flex-direction: column;
		margin-bottom: 12px;

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

		label {
			margin-bottom: 4px;
			font-weight: 600;
		}

		input, textarea, select {
			font-size: 13px;
			padding: 8px 8px;
		}
	}

	.form-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 6px;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 10px;
	}

	.social {
		margin-top: 8px;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;

		.social-buttons {
			display: flex;
			gap: 8px;

			.btn-social {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
				padding: 8px 8px;
				border-radius: var(--radius);
				border: 1px solid var(--input-border-color);
				transition: all .15s ease;

				&:hover {
					background: var(--glass);
					border-color: var(--accent);
					color: var(--accent);
				}
			}
		}
	}
}

.nav-link {
	color: var(--muted);
	text-decoration: none;
	padding: 5px 12px;
	border-radius: 8px;
	display: flex;
	transition: all .15s ease;
	gap: 8px;

	&:hover {
		background: rgba(255, 255, 255, 0.02);
		color: var(--text);
		transform: translateX(4px);
	}

	&.active {
		background: linear-gradient(90deg, rgba(37, 99, 235, 0.14), rgba(6, 182, 212, 0.06));
		color: var(--accent);
	}
}

.hidden {
	display: none !important;
}

.tag-input {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border: 1px solid var(--input-border-color);
	border-radius: 8px;
	padding: 8px;
	flex-direction: row;
	align-content: center;
	align-items: center;

	.tag-input-box {
		display: flex;
		align-items: center;
		gap: 8px;
		width: fit-content;
		position: relative;
	}

	.tag-input-caret {
		min-width: 80px;
		outline: none;
		color: #eee;

		&:empty {
			&:before {
				content: attr(data-placeholder);
				color: #666;
			}
		}
	}

	.tag {
		background: #1f2f7b38;
		color: #fff;
		padding: 4px 10px;
		border-radius: 14px;
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 14px;

		.tag-close {
			cursor: pointer;
			opacity: .7;

			&:hover {
				opacity: 1;
			}
		}
	}

	.tag-suggestions {
		position: absolute;
		right: 30px;
		background: var(--panel);
		border: 1px solid var(--input-border-color);
		border-radius: var(--radius);
		margin-top: 4px;
		width: max-content;
		max-width: 300px;
		max-height: 200px;
		overflow-y: auto;
		z-index: 10;

		.tag-suggestion {
			padding: 8px 12px;
			cursor: pointer;
			transition: background .15s ease;

			&:hover {
				background: var(--glass);
			}
		}
	}
}

.line {
	height: 1px;
	background: var(--divider);
}

.jq-neo-wysiwyg {
	background: linear-gradient(180deg, #0a1430, #050b1a);
	border: 1px solid #1f2a44;
	border-radius: 14px;
	box-shadow: inset 0 0 25px rgba(30, 60, 160, .15);
	padding: 12px;

	.toolbar {
		display: flex;
		gap: 6px;
		padding: 6px 8px;
		border-bottom: 1px solid #1f2a44;
		margin-bottom: 8px;

		button {
			width: 34px;
			height: 34px;
			border-radius: 8px;
			border: 1px solid #1f2a44;
			background: linear-gradient(180deg, #0f1b3d, #091226);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			color: #7fa2ff;
			transition: background .15s ease, box-shadow .15s ease, color .15s ease;

			span {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			svg {
				width: 16px;
				height: 16px;
				min-width: 16px;
				min-height: 16px;
				display: block;
				flex-shrink: 0;
			}

			&:hover {
				background: linear-gradient(180deg, #1a2d66, #101c3f);
				box-shadow: 0 0 0 1px rgba(90, 130, 255, .4);
				color: #ffffff;
			}

			&.active {
				background: linear-gradient(180deg, #2946ff, #1429a0);
				color: #ffffff;
				box-shadow: 0 0 8px rgba(60, 100, 255, .8);
			}
		}
	}

	.editor {
		min-height: 240px;
		max-height: 500px;
		max-width: 800px;
		margin: auto;
		padding: 14px;
		border-radius: 10px;
		background: radial-gradient(circle at top, #07112a, #040916);
		color: #e6ebff;
		outline: none;
		font-size: 14px;
		line-height: 1.5;
		overflow: auto;

		.block-anchor {
			display: block;
			width: 100%;
			padding: 12px;
			margin: 16px 0;
			border: 2px dashed #2563eb66;
			border-radius: 6px;
			background: #0e0e0e;
			user-select: none;

			&.selected {
				outline: 3px solid #2563eb;
			}

			& .stl-viewer {
				width: 100%;
				height: 300px;
				position: relative;

				& canvas {
					width: 100% !important;
					height: 100% !important;
					outline: none;
					pointer-events: auto;
				}

				&:hover {
					cursor: grab;
				}
			}
		}

		p, h2, li {
			margin: 0 0 6px;
		}

		p, h2, stl, a, img {
			padding: 12px;

			a {
				margin: 12px;
			}
		}

		p, h1, h2, h3, h4, h5, h6, stl, a, img, div {
			&:hover {
				border: 1px dashed #80808040;
			}
		}

		code {
			background: rgba(90, 130, 255, .12);
			padding: 1px 4px;
			border-radius: 4px;
			font-size: 13px;
			font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
			color: #b7c6ff;
		}

		.video-link-container {
			width: 100%;
			display: flex;

			.video-link-img {
				margin: 0 auto;
				cursor: pointer;
			}
		}

		ul {
			padding-left: 18px;
		}
	}
}

.pagination {
	margin-top: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	.page-list {
		display: flex;
		gap: 6px;
	}

	a {
		text-decoration: none;
		font-size: 13px;
		color: var(--muted);
	}

	.page-item,
	.page-nav {
		min-width: 34px;
		height: 32px;
		padding: 0 10px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.04),
			rgba(255, 255, 255, 0.015)
		);
		border: 1px solid rgba(255, 255, 255, 0.04);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
		transition: all .15s ease;
	}

	.page-item:hover,
	.page-nav:hover {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.07),
			rgba(255, 255, 255, 0.03)
		);
		color: var(--text);
	}

	.page-item.active {
		color: #fff;
		background: linear-gradient(
			180deg,
			var(--accent),
			var(--accent-2)
		);
		border-color: transparent;
		box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
		pointer-events: none;
	}
}