/* ===================================================================
   Global UI polish
   Scrollbars, dark "card" chrome (used by standalone pages like login/
   character that need a dark surface instead of the light bg-body
   cards), buttons, avatars, skeleton loaders, and small "username as a
   link" treatment used across pages + the floating airport panel.
=================================================================== */

/* ---- 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);
}

/* ---- Dark card chrome ----
   A reusable dark surface for standalone pages (login, character editor)
   that previously lived inside a Bootstrap modal. No JS/Bootstrap modal
   behavior attached - just the visual shell. */
.dark-card {
	background: rgb(30, 30, 30);
	color: white;
	border: 1px solid var(--container-border);
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}
.dark-card-header {
	background: rgb(20, 20, 20);
	border-bottom: 1px solid var(--container-border);
	padding: 14px 18px;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dark-card-body {
	padding: 18px;
}
.dark-card-footer {
	background: rgb(20, 20, 20);
	border-top: 1px solid var(--container-border);
	padding: 14px 18px;
}
.dark-card .form-control, .dark-card .form-select {
	background-color: rgb(20, 20, 20);
	color: var(--container-text-color);
	border: 1px solid var(--container-border);
}
.dark-card .form-control:focus, .dark-card .form-select: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);
}
.dark-card .form-label {
	color: var(--container-text-color-secondary);
	font-size: 0.9em;
	margin-bottom: 4px;
}
.dark-card hr {
	border-color: var(--container-border);
	opacity: 1;
}
.dark-card a, #airportContainer a {
	color: var(--link-color);
}
.dark-card a:hover, #airportContainer a:hover {
	color: var(--link-hover-color);
}

/* ---- 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);
}

/* ---- 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;
}
.dark-card .username-link, #airportContainer .username-link,
.dark-card .entity-link, #airportContainer .entity-link {
	color: var(--link-color);
}
.dark-card .username-link:hover, #airportContainer .username-link:hover,
.dark-card .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 on profile pages and the pilot character editor) ---- */
.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);
}
.dark-card .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;
}

/* ---- Bootstrap's .text-muted is dark-on-light by design (it reads off
   --bs-secondary-color, a near-black gray) - same problem .empty-state and
   .username-link already had, so it gets the same dark-context override. */
.dark-card .text-muted, #airportContainer .text-muted {
	color: var(--container-text-color-secondary) !important;
}

/* ---- 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;
}