/* ===================================================================
   Global UI polish
   Scrollbars, modal chrome, buttons, avatars, skeleton loaders, and
   small "username as a link" treatment used across pages + modals.
=================================================================== */

/* ---- Scrollbars (the CSS vars already existed, just nothing used them) ---- */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}

/* ---- Modals ---- */
.modal-content {
	border: 1px solid var(--container-border);
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}
.modal-header {
	background: rgb(20, 20, 20);
	border-bottom: 1px solid var(--container-border);
	padding: 14px 18px;
	font-size: 18px;
	font-weight: bold;
}
.modal-header .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
	opacity: 0.7;
	transition-duration: 0.15s;
}
.modal-header .btn-close:hover {
	opacity: 1;
}
.modal-body {
	padding: 18px;
}
.modal-footer {
	background: rgb(20, 20, 20);
	border-top: 1px solid var(--container-border);
}
.modal.fade .modal-dialog {
	transform: translateY(-12px) scale(0.98);
	transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}
.modal.show .modal-dialog {
	transform: translateY(0) scale(1);
}
.modal-content .form-control {
	background-color: rgb(20, 20, 20);
	color: var(--container-text-color);
	border: 1px solid var(--container-border);
}
.modal-content .form-control:focus {
	background-color: rgb(20, 20, 20);
	color: var(--container-text-color);
	border-color: var(--link-color);
	box-shadow: 0 0 0 0.2rem rgba(170, 120, 255, 0.25);
}
.modal-content .form-label {
	color: var(--container-text-color-secondary);
	font-size: 0.9em;
	margin-bottom: 4px;
}
.modal-content hr {
	border-color: var(--container-border);
	opacity: 1;
}

/* ---- Buttons - nudge the default bootstrap blue toward the app's accent ---- */
.btn-primary {
	background-color: rgb(120, 80, 200);
	border-color: rgb(120, 80, 200);
}
.btn-primary:hover:not([disabled]) {
	background-color: rgb(140, 100, 220);
	border-color: rgb(140, 100, 220);
}
.btn-primary:disabled, .btn-primary[disabled] {
	background-color: rgb(80, 70, 100);
	border-color: rgb(80, 70, 100);
}
.modal-content a, #airportContainer a, .skysim-navbar a.dropdown-item {
	color: var(--link-color);
}
.modal-content a:hover, #airportContainer a:hover, .skysim-navbar a.dropdown-item:hover {
	color: var(--link-hover-color);
}

/* ---- Clickable username treatment (used anywhere a player's name shows up) ---- */
/* .entity-link shares the same look for non-username clickable text, like a tail number
   linking to its aircraft details page. */
.username-link, .entity-link {
	color: rgb(111, 66, 193);
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px dashed transparent;
	transition-duration: 0.15s;
}
.username-link:hover, .entity-link:hover {
	color: rgb(90, 50, 165);
	border-bottom-color: rgb(90, 50, 165);
	cursor: pointer;
}
.modal-content .username-link, #airportContainer .username-link,
.modal-content .entity-link, #airportContainer .entity-link {
	color: var(--link-color);
}
.modal-content .username-link:hover, #airportContainer .username-link:hover,
.modal-content .entity-link:hover, #airportContainer .entity-link:hover {
	color: var(--link-hover-color);
	border-bottom-color: var(--link-hover-color);
}
.username-link.system {
	color: var(--container-text-color-secondary);
	font-weight: normal;
	border-bottom: none;
	cursor: default;
}
.username-link.system:hover {
	color: var(--container-text-color-secondary);
}

/* ---- Avatars (used in profile page / profile modal / navbar) ---- */
.avatar-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, rgb(120, 80, 200), rgb(60, 40, 110));
	color: white;
	font-weight: bold;
	overflow: hidden;
	flex-shrink: 0;
	border: 2px solid var(--container-border);
	user-select: none;
}
.avatar-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Stat tiles ---- */
.stat-card {
	background: var(--container-background);
	border: 1px solid var(--container-border);
	border-radius: 8px;
	padding: 12px 16px;
	flex: 1 1 140px;
	min-width: 140px;
}
.stat-card .stat-label {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--container-text-color-secondary);
	margin-bottom: 4px;
}
.stat-card .stat-value {
	font-size: 1.5em;
	font-weight: bold;
	color: var(--container-text-color);
}
.stat-card .stat-value.positive {
	color: rgb(80, 210, 80);
}
.stat-card .stat-value.negative {
	color: rgb(230, 90, 90);
}

/* ---- Skeleton loading shimmer ---- */
.skeleton {
	position: relative;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	color: transparent !important;
}
.skeleton::after {
	content: "";
	position: absolute;
	top: 0; left: -150%;
	height: 100%; width: 150%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
	animation: skeleton-sweep 1.3s ease-in-out infinite;
}
@keyframes skeleton-sweep {
	0% { left: -150%; }
	100% { left: 150%; }
}

/* ---- Generic empty / loading panel ---- */
/* Default is tuned for light bg-body cards (profile/aircraft pages); the lighter
   --container-text-color-secondary only has good contrast on the dark modal/map
   background, so it's applied there as an override, same pattern as .username-link. */
.empty-state {
	text-align: center;
	padding: 30px 15px;
	color: rgb(130, 130, 130);
}
.modal-content .empty-state, #airportContainer .empty-state {
	color: var(--container-text-color-secondary);
}
.empty-state i {
	font-size: 2em;
	margin-bottom: 10px;
	display: block;
	opacity: 0.6;
}

/* ---- Small uppercase section label, used to break up profile/map panels ---- */
.section-label {
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--container-text-color-secondary);
	margin-bottom: 6px;
}