/* #region HONEYPOT */
.honeypot {
	position: absolute;
	left: -9999px;
}
/* #endregion */

/* #region PAGEHEADING */
page_heading {
	color: #000328;
	font-family: Rowdies, sans-serif;
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 0.2rem;
}

@media screen and (max-width: 600px) {
	.page_heading {
		font-size: 1.5rem;
	}
}
/* #endregion */

/* #region BACKTOTOP */
:root {
	--backtotop-bg: #0d6efd;
	--backtotop-hover: #0b5ed7;
	--backtotop-color: #fff;
}

[data-bs-theme="dark"] {
	--backtotop-bg: #f8f9fa;
	--backtotop-hover: #e9ecef;
	--backtotop-color: #000;
}

.back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--backtotop-bg);
	color: var(--backtotop-color);
	border: none;
	cursor: pointer;
	z-index: 2147483647;
	box-shadow: 0 4px 10px rgba(0,0,0,.2);
	/* ✨ Add transition for smooth animation */
	transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
	/* Start hidden and slightly scaled down */
	opacity: 0;
	transform: scale(0.9);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

	.back-to-top.show {
		/* Fade in and scale up */
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.back-to-top:hover {
		background: var(--backtotop-hover);
		/* Combine hover lift with scale */
		transform: translateY(-2px) scale(1.05);
	}

	.back-to-top .material-icons {
		font-size: 24px;
	}

main {
	height: calc(100vh - 160px);
	overflow-y: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge legacy */
}

	main::-webkit-scrollbar {
		display: none; /* Chrome/Safari */
	}
/* #endregion */

/* #region SKELETON */
.skeleton-table {
	width: 100%;
}

.skeleton-row {
	margin-bottom: 0.5rem;
}

.skeleton-cell {
	height: 1rem;
	border-radius: 3px;
	background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.4s infinite linear;
}

@keyframes skeleton-loading {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}
/* #endregion */