/* ===== Rankings div-grid ====================================================
   Replaces the previous DataTables-based rankings table. Used on:
   - template-rankings-page.php (two grids: reporting + non-reporting)
   - AjaxDashboardPageTable (ajax-injected on dashboard page)
   The visual design intentionally mirrors the prior DataTables theme so the
   change is invisible to end users.
============================================================================ */

.rankings-grid {
	display: block;
	width: 100%;
	margin-bottom: 60px;
	background: #fff;
	/* Always allow horizontal scrolling so the fixed-width rows can be panned
	   on screens narrower than 1818px. */
	overflow-x: auto;
}
.rankings-row {
	display: grid;
	/* First column (Country / Jurisdiction) is fixed at 200px; the remaining
	   7 columns share the leftover space in their original 1 / 1.1 / 1×5 ratio. */
	grid-template-columns: 200px 1fr 1.1fr repeat(5, 1fr);
	align-items: stretch;
	/* Hard minimum so the grid keeps its proportions and forces a horizontal
	   scrollbar on smaller viewports. */
	min-width: 1818px;
}

/* --- Header ---
   Two-row layout:
     row 1: [ country (spans both rows) ][ ranking (spans both rows) ][ score (spans both rows) ][ "Dimension Scores /20" group label spans 5 columns ]
     row 2:                                                                                          [ dim1 ][ dim2 ][ dim3 ][ dim4 ][ dim5 ]
*/
.rankings-header {
	position: sticky;
	top: 0;
	z-index: 2;
	grid-template-rows: auto auto;
}
.rankings-cell span.rankings-th {
	color: #fff !important;
}
.rankings-th {
	background: #2c3e50;
	color: #fff !important;
	text-align: center;
	line-height: 1.2;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 20px 30px;
	border-top: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	border-left: 1px solid #d3d3d3;
	border-bottom: none;
	cursor: pointer;
	user-select: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
}
/* First three header cells span both header rows. */
.rankings-th.rankings-th-span {
	grid-row: 1 / span 2;
}
/* Group label across the 5 dimension columns in row 1. */
.rankings-th-group {
	grid-column: 4 / span 5;
	grid-row: 1;
	background: #2c3e50;
	color: #fff;
	text-align: center;
	line-height: 1.2;
	font-size: 0.85rem;
	font-weight: bold;
	padding: 18px 12px 10px;
	border-top: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	border-left: 1px solid #d3d3d3;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	justify-content: center;
	align-items: center;
}
/* The 5 dimension column headers sit in row 2 with no top border (the group
   label's border-bottom acts as the divider, keeping the dark block continuous). */
.rankings-th.rankings-th-dim {
	grid-row: 2;
	border-top: none;
	padding-top: 12px;
	padding-bottom: 18px;
}
/* The inner label + arrow spans inherit the parent th's color. Without this
   the global rule `span { color: #2c3e50 }` (theme-wide) wins on specificity
   over the parent's `color: #fff` and the labels render dark. Using `inherit`
   means sorted-asc/sorted-desc green also flows through automatically. */
.rankings-th-label,
.rankings-th-arrow,
.rankings-th-group .rankings-th-label {
	color: inherit;
}
.rankings-th-arrow {
	display: inline-block;
	width: 0.85em;
	text-align: center;
}
.rankings-th-arrow::after {
	content: '\2195';
	opacity: 0.4;
	font-size: 0.85em;
}
.rankings-th.sorted-asc,
.rankings-th.sorted-desc {
	color: #22937E !important;
}
.rankings-th.sorted-asc .rankings-th-arrow::after {
	content: '\25B2';
	opacity: 1;
	color: #22937E;
}
.rankings-th.sorted-desc .rankings-th-arrow::after {
	content: '\25BC';
	opacity: 1;
	color: #22937E;
}
.rankings-th:focus {
	outline: 2px solid #22937E;
	outline-offset: -2px;
}

/* --- Body cells --- */
.rankings-data-row .rankings-cell {
	padding: 10px 12px;
	text-align: center;
	font-size: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	min-width: 0;
	word-break: break-word;
}
/* Year-over-year change indicator (produced by get_score_change() in
   inc/content/scoring.php). Reuses the global .text-green / .text-red
   classes used on the home and country-profile pages. The <small> inside
   the span carries the numeric delta and is dimmed relative to the arrow. */
.rankings-data-row .rankings-cell .text-green,
.rankings-data-row .rankings-cell .text-red {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 0.8em;
	line-height: 1;
	white-space: nowrap;
}
.rankings-data-row .rankings-cell .text-green small,
.rankings-data-row .rankings-cell .text-red small {
	font-size: 0.85em;
	font-weight: 600;
	color: inherit;
	opacity: 0.85;
}
/* Country cell: flag stacked above the country name, both centered.
   Reporting rows wrap content in `<a><img>CountryName</a>`; non-reporting rows
   render `<img>CountryName` directly inside the flex cell with no anchor.
   `flex-direction: column` makes both shapes stack the flag above the name. */
.rankings-data-row .rankings-cell.col-country {
	flex-direction: column;
	font-weight: bold;
	/* Tighter line-height so multi-line country names ("United Arab Emirates"
	   wrapped inside the 200px column) stack compactly under the flag. */
	line-height: 1.1;
}
.rankings-data-row .rankings-cell.col-country a {
	display: block;
	text-align: center;
}
.rankings-data-row .rankings-cell.col-country img {
	display: block;
	height: 30px;
	margin: 10px auto 5px;
	padding: 0;
	border: 1px solid #2c3e50;
}

/* --- Striped rows (matches old tr.even) --- */
.rankings-data-row:nth-child(even) {
	background-color: #f7f7f7;
}

/* --- Active sort column gets bold cells (matches old td.sorting_1) --- */
.rankings-data-row .rankings-cell.sort-active {
	font-weight: 800;
}

/* --- Reporting (rankings page) green column tints --- */
.Rankings_Page .rankings-data-row .col-ranking {
	color: #fff;
	background-color: #22937E;
}
.Rankings_Page .rankings-data-row .col-score {
	background-color: #d8f6f0;
}
/* Inside the green Ranking column the global .text-green color is invisible
   against the matching background — switch the up-arrow + delta to white so
   they read against the column tint. The red down-arrow stays red (still
   high-contrast against the green). */
.Rankings_Page .rankings-data-row .col-ranking .text-green {
	color: #fff;
}

/* --- Non-reporting: red theme + hidden header --- */
.Rankings_Page_Nonreporting {
	position: relative;
	margin-top: -100px;
}
.Rankings_Page_Nonreporting .rankings-th,
.Rankings_Page_Nonreporting .rankings-th-group {
	padding: 0;
	color: transparent;
	background: none;
	border: none;
	cursor: default;
	pointer-events: none;
}
.Rankings_Page_Nonreporting .rankings-th-arrow,
.Rankings_Page_Nonreporting .rankings-th-label {
	display: none;
}
.Rankings_Page_Nonreporting .rankings-data-row .col-country {
	font-weight: 400;
}
.Rankings_Page_Nonreporting .rankings-data-row .col-ranking {
	color: #fff;
	background-color: #932238;
}
.Rankings_Page_Nonreporting .rankings-data-row .col-score {
	background-color: #f6d8de;
}