style.css

body {
	padding: 2rem;
	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
}

h1 {
	font-size: 16px;
	margin-top: 0;
}

p {
	color: rgb(107, 114, 128);
	font-size: 15px;
	margin-bottom: 10px;
	margin-top: 5px;
}

.card {
	max-width: 620px;
	margin: 0 auto;
	padding: 16px;
	border: 1px solid lightgray;
	border-radius: 16px;
}

.card p:last-child {
	margin-bottom: 0;
}

/* Sortable Table Header Styles */
.sortable-header {
    cursor: pointer;
    position: relative; /* Needed for pseudo-element positioning */
    padding-right: 20px; /* Make space for the arrow */
}
.sortable-header::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    opacity: 0.4; /* Dim by default */
}
.sortable-header:hover::after {
    opacity: 0.7; /* Slightly brighter on hover */
}
.sortable-header.sort-asc::after {
    border-bottom: 5px solid var(--text-color); /* Arrow pointing up */
    opacity: 1;
}
.sortable-header.sort-desc::after {
    border-top: 5px solid var(--text-color); /* Arrow pointing down */
    opacity: 1;
}


/* Spinner Styles */
#loading {
    display: flex;
    flex-direction: column; /* Stack spinner and message */
    align-items: center;
    justify-content: center;
    min-height: 150px; /* Give it some space */
    text-align: center;
    font-size: 1.2em;
    color: var(--muted-text-color);
}
.spinner {
    border: 3px solid transparent;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-top-color: var(--primary-color);
    border-left-color: var(--primary-color);
    margin-bottom: 20px;
    animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
    position: relative;
    will-change: transform;
}
.skeleton {
    background: linear-gradient(90deg, rgba(22, 27, 34, 0.2) 25%, rgba(22, 27, 34, 0.3) 50%, rgba(22, 27, 34, 0.2) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
    min-height: 100px;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.spinner::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 3px solid transparent;
    border-radius: 50%;
    border-top-color: rgba(88, 166, 255, 0.3);
    border-left-color: rgba(88, 166, 255, 0.3);
    animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite reverse;
}
#loading-message {
    font-size: 1rem; /* Slightly smaller message */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}