/**
 * @package TinyPortal
 * @version 2.0.0
 * @author IchBin - http://www.tinyportal.net
 * @founder Bloc
 * @license MPL 2.0
 *
 * The contents of this file are subject to the Mozilla Public License Version 2.0
 * (the "License"); you may not use this package except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Copyright (C) - The TinyPortal Team
 *
 */

/**
 * Stylesheet for custom styling 
 * This stylesheet is NOT deleted upon uninstalling TinyPortal, 
 * but it will be overwritten with an empty file when installing a new version.
 */

/* Balkan Elite member ranking blocks. */
.belite-member-list {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.belite-member-list .belite-member-card {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .3rem;
	padding: .35rem .4rem;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(255, 255, 255, .07);
	border-left: 3px solid rgba(202, 88, 80, .75);
	border-radius: 4px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	transition: background .2s ease, border-color .2s ease;
}

.belite-member-list .belite-member-card:hover {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(202, 88, 80, .55);
}

.tp_blockbody:has(> .belite-member-list) {
	overflow: hidden;
}

#tprightbarHeader .tp_blockbody {
	overflow: hidden;
}

.belite-member-list .belite-member-card:last-child {
	margin-bottom: 0;
}

.belite-member-avatar,
.belite-member-avatar .avatar {
	display: block;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px;
	max-width: 28px;
	min-height: 28px;
	max-height: 28px;
	flex: 0 0 28px;
}

.belite-member-avatar .avatar {
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 3px;
}

.belite-member-details {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: .1rem;
}

.belite-member-name {
	max-width: 100%;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.belite-member-stat {
	color: rgba(255, 255, 255, .62);
	font-size: .82em;
}

.belite-rank {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	flex: 0 0 21px;
	color: #fff;
	background: #ca5850;
	border-radius: 50%;
	font-size: .8em;
	font-weight: 800;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.belite-ranked-list li:nth-child(1) .belite-rank { background: #c99a24; }
.belite-ranked-list li:nth-child(2) .belite-rank { background: #7f8b96; }
.belite-ranked-list li:nth-child(3) .belite-rank { background: #9a633d; }

.belite-role {
	display: inline-block;
	padding: .12rem .45rem;
	color: #fff;
	border-radius: 999px;
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .025em;
	line-height: 1.35;
}

@media (max-width: 500px) {
	.belite-member-list .belite-member-card {
		padding: .4rem .5rem;
	}
}

/* Compact two-line layout for the TinyPortal Recent Topics block. */
.belite-recent-list .belite-recent-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	box-sizing: border-box;
	min-width: 0;
	padding: .5rem .35rem;
}

.belite-recent-newslot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	min-width: 2.5rem;
	max-width: 2.5rem;
	flex: 0 0 2.5rem;
}

.belite-recent-newslot .new_posts {
	position: static;
	margin: 0;
}

.belite-recent-avatar,
.belite-recent-avatar a,
.belite-recent-avatar .avatar {
	display: block;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px;
	max-width: 26px;
	min-height: 26px;
	max-height: 26px;
}

.belite-recent-avatar {
	flex: 0 0 26px;
	margin: 0;
}

.belite-recent-avatar .avatar {
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 3px;
}

.belite-recent-content {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .18rem;
}

.belite-recent-title {
	display: block;
	min-width: 0;
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.belite-recent-meta {
	display: flex;
	align-items: center;
	gap: .35rem;
	min-width: 0;
	color: rgba(255, 255, 255, .58);
	font-size: .78em;
	line-height: 1.2;
}

.belite-recent-meta a {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.belite-recent-date,
.belite-recent-separator {
	flex: 0 0 auto;
}

.belite-recent-separator {
	color: #ca5850;
}

/* Online member names: approximately ten rows, with theme-matched scrolling. */
.tp_statsblock ul.tp_stats_online_list {
	left: 0;
	max-height: 16em;
	margin: .35em 0 .6em;
	padding: 0 .35em;
	overflow-y: auto;
	overflow-x: hidden;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: #BA1A1A #171717;
}

.tp_stats_online_list li.tp_stats_online_users {
	margin: 0;
	padding: 0;
	line-height: 1.6em;
	overflow-wrap: anywhere;
}

.tp_stats_online_list::-webkit-scrollbar {
	width: 8px;
}

.tp_stats_online_list::-webkit-scrollbar-track {
	background: #171717;
	border-radius: 8px;
}

.tp_stats_online_list::-webkit-scrollbar-thumb {
	background: #BA1A1A;
	border: 2px solid #171717;
	border-radius: 8px;
}

.tp_stats_online_list:focus-visible {
	outline: 1px solid #BA1A1A;
	outline-offset: 2px;
}