@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

/* ============================================= */
/* CUSTOM PROPERTIES */
/* ============================================= */

:root {
	--color-primary: #333;
	--color-bg: #F4F0EC;
	--color-text: #333;
	--color-badge-new: #2ECC71;
	--color-badge-rewatch: #3498DB;
	--color-badge-total: #BAA271;
	--border-radius-sm: 0.5rem;
	--border-radius-lg: 1.5rem;
	--border-radius-pill: 100vmax;
}

/* ============================================= */
/* GENERAL STYLES */
/* ============================================= */

body {
	font-family: "Quicksand", sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 500;
	background: var(--color-bg);
	color: var(--color-text);
	margin: clamp(1rem, 3vw, 2rem);
}

/* for accessibility */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================= */
/* PAGE HEADER */
/* ============================================= */

.page-title {
	letter-spacing: 0.04rem;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 0;
	padding-bottom: 0;
}

.table-header {
	margin-bottom: 1.5rem;
	gap: 0.75rem;
}

.sub {
	margin: 0;
	letter-spacing: 0.02em;
}

/* ============================================= */
/* TABLE */
/* ============================================= */

table {
	width: 100%;
	border-collapse: collapse;
	overflow: hidden;
	background: white;
	border-radius: var(--border-radius-lg);
}

	table tbody tr:last-child td {
	border-bottom: none;
}

th, td {
	padding: 0.75rem;
	text-align: left;
}

td {
	border-bottom: 1px solid var(--color-bg);
}

td.num {
	text-align: right;
}

th {
	cursor: pointer;
	background: var(--color-primary);
	color: #FFF;
	user-select: none;
	position: relative;
	transition: background-color 0.2s ease;
	padding-right: 2rem; /* NEW: Space for indicator */
}

th:hover {
	background: #444;
}

th:focus {
	outline: 2px solid var(--color-badge-rewatch);
	outline-offset: -2px;
}

th:active {
	background: #222;
}

th .sort-indicator {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.9rem;
}

/* ============================================= */
/* BADGES */
/* ============================================= */

[class^="badge-"] {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.2em 0.5em;
	color: white;
	font-size: 0.75em;
	font-weight: 600;
	border-radius: var(--border-radius-pill);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.badge-new {
	background-color: var(--color-badge-new);
}

.badge-rewatch {
	background-color: var(--color-badge-rewatch);
}

.badge-total {
	margin: 10px 10px 10px 0;
	background-color: var(--color-badge-total);
}

/* ============================================= */
/* RESPONSIVE STUFF
/* ============================================= */
@media (max-width: 37.5rem) {
	body {
		margin: 1rem;
		overflow-x: hidden;
	}

	table {
		border-radius: var(--border-radius-sm);
		table-layout: fixed;
		width: 100%;
	}
  
	.table-header {
		margin-bottom: 1rem;
		gap: 0.5rem;
	}
  
  /* Show only Title and Rating columns */
	#data-table th:not([data-key="Title"]):not([data-key="Rating"]),
	#data-table td:not(:nth-child(1)):not(:nth-child(4)) {
		display: none;
  }

	#data-table th[data-key="Title"],
	#data-table th[data-key="Rating"] {
		font-size: 0.9rem;
		padding: 0.75rem 2rem 0.75rem 0.75rem;
		white-space: nowrap;
  }
  
	#data-table th[data-key="Title"],
	#data-table td:nth-child(1) {
		width: 70%;
	}
  
	#data-table th[data-key="Rating"],
	#data-table td:nth-child(4) {
		width: 30%;
	}

	#data-table td:nth-child(1) {
		font-size: 0.9rem;
		padding: 0.75rem;
		white-space: normal;
		overflow-wrap: break-word;
	}

	#data-table td:nth-child(4) {
		font-size: 0.9rem;
		padding: 0.75rem;
		white-space: normal;
	}

	#data-table tr {
		line-height: 1.6;
	}

	th .sort-indicator {
		display: none;
	}

	[class^="badge-"] {
		font-size: 0.65rem;
		padding: 0.15em 0.4em;
		margin-left: 0.3em;
	}

	.badge-total {
		font-size: 0.85em;
		padding: 0.3em 0.7em;
		margin: 10px 0;
	}
}

@media (min-width: 37.5rem) and (max-width: 48rem) {
	/* Show only Title, Country, and Rating columns */
	#data-table th:not([data-key="Title"]):not([data-key="Country"]):not([data-key="Rating"]),
	#data-table td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(4)) {
		display: none;
	}
}