/**
 * Žaidėjų statistika.
 *
 * Tokens come from assets/base.css and are never redefined here. So do
 * .rkl-card and .rkl-link-button — this file only sizes and places them, and
 * always at two classes, because base.css is enqueued AFTER a block stylesheet
 * and a one-class rule here would tie on specificity and win on source order
 * (landmines 21 and 48).
 */

.rkl-tstats {
	/*
	 * The card surface. `.rkl-card` in assets/base.css carries only the box
	 * model and the font — no background, no radius, no shadow — so every block
	 * paints its own, the same four declarations rkl/team-roster and
	 * rkl/teams-table use.
	 */
	background: var(--rkl-white);
	border: 1px solid var(--rkl-grey-01);
	border-radius: var(--rkl-radius);
	box-shadow: var(--rkl-shadow);
	box-sizing: border-box;
	color: var(--rkl-black);
	display: flex;
	flex-direction: column;
	font-family: var(--rkl-font);
	/*
	 * The design clips the card. The header band carries its own `--rkl-grey-04`
	 * fill and the table bleeds to both card edges, so without this the band's
	 * square corners paint over the radius wherever the table reaches an edge.
	 */
	overflow: hidden;
	/*
	 * No horizontal padding: the table is as wide as the card in the design and
	 * then wider, so the 16px inset belongs to the title row. 6px at the bottom
	 * is the gap the frame leaves between the scrollbar thumb and the card's
	 * bottom edge; the scroller owns the 6 above it.
	 *
	 * Landmine 38: a flex item of .rkl-tab-panel__inner without a definite width
	 * resolves to fit-content, which here is the table's own min-width.
	 */
	padding: 0 0 6px;
	width: 100%;
}

.rkl-tstats[hidden] {
	display: none;
}

/* Header ------------------------------------------------------------------- */

/*
 * The design draws an 80px strip with a 24px title centred in it (25 above,
 * 31 below) and the header band starting at 80. A min-height with centred items
 * is that measurement, without two odd paddings.
 */
.rkl-tstats__header {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	min-height: 80px;
	padding: 0 16px;
}

/*
 * Poppins Medium 20/1.2 SENTENCE case — this card's title is deliberately not
 * the Boldonse 24/1.9 uppercase the gallery and staff cards use, the same split
 * the house already has between rkl/team-roster and rkl/player-gallery.
 * `text-transform` is stated because the theme's heading rules are not this
 * block's to predict.
 */
.rkl-tstats__title {
	color: var(--rkl-black);
	flex: 1 1 auto;
	font-family: var(--rkl-font);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
	min-width: 0;
	text-transform: none;
}

/*
 * base.css owns .rkl-link-button's type, colour, gap and icon size, and it loads
 * after this file — so nothing it declares is overridden from here. These are
 * only the declarations it does not make: the ones a <button> needs and an <a>
 * does not.
 */
.rkl-tstats .rkl-tstats__print {
	background: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.rkl-tstats .rkl-tstats__print:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

/* Scroller ----------------------------------------------------------------- */

.rkl-tstats__scroller {
	overflow: auto;
	overscroll-behavior-x: contain;
	/* The near half of the frame's 21px bottom lane: 6 + the 9px thumb + 6. */
	padding-bottom: 6px;
	scrollbar-color: var(--rkl-grey-02) transparent;
	scrollbar-width: thin;
}

.rkl-tstats__scroller:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	/* Inward, because the card clips and an outward ring would be cut off. */
	outline-offset: -2px;
}

/* The 9px rounded thumb the frame draws under the table (2466:80747). */
.rkl-tstats__scroller::-webkit-scrollbar {
	height: 9px;
}

.rkl-tstats__scroller::-webkit-scrollbar-track {
	background: transparent;
}

.rkl-tstats__scroller::-webkit-scrollbar-thumb {
	background: var(--rkl-grey-02);
	border-radius: 999px;
}

/* Reset -------------------------------------------------------------------- */

/*
 * rkl-addons/assets/css/style.css styles bare `table`, `thead`, `tbody tr` and
 * `td` site-wide: 13px bold text, a grey header, zebra rows and a row hover.
 * It has no scope at all, so it reaches every table in every new block.
 *
 * `color` and `font-weight` need !important because the declarations they
 * override carry it. The zebra kill needs TWO classes: `tbody tr:nth-child(odd)`
 * is (0,1,2) and a one-class rule ties and loses on source order.
 * `border-collapse: separate` is load-bearing, not cosmetic — collapsed borders
 * and `position: sticky` cells disagree in Safari, and the legacy sheet forces
 * `collapse`.
 */
.rkl-tstats__table {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--rkl-black) !important;
	font-size: 14px;
	font-weight: 400 !important;
	/*
	 * The 19 columns total 1381 against a 1344 card, so the table is wider than
	 * the card by 37px and scrolls even on desktop. The number is the sum of the
	 * column widths, computed in render.php from the same array the widths come
	 * from, so the two can never disagree.
	 */
	min-width: var(--rkl-tstats-min, 1381px);
	/*
	 * Fixed layout, so the columns are the design's widths rather than whatever
	 * the content negotiates (landmine 46). With auto layout a two-character
	 * average renegotiates every column on every sort.
	 */
	table-layout: fixed;
	width: 100%;
}

.rkl-tstats__table thead {
	background: none;
}

.rkl-tstats .rkl-tstats__table tbody tr,
.rkl-tstats .rkl-tstats__table tbody tr:hover {
	background: none;
}

.rkl-tstats__table th,
.rkl-tstats__table td {
	border: 0;
	color: var(--rkl-black) !important;
	font-weight: 400 !important;
	vertical-align: middle;
}

/*
 * The weight restoration has to outrank the reset above, which is (0,1,1) with
 * !important — so the header carries the table class too. Elements INSIDE a cell
 * need only one class, because they never match the th/td selector.
 */
.rkl-tstats__table .rkl-tstats__head,
.rkl-tstats__badge {
	font-weight: 500 !important;
}

/* White on the podium's black badge; the reset above paints every cell black. */
.rkl-tstats__badge.is-podium {
	color: var(--rkl-white) !important;
}

/*
 * Alignment lives on a class attached to the cell itself. That is (0,1,0),
 * which beats the legacy `thead th { text-align: center }` and
 * `tbody td { text-align: start }` — both (0,0,2), neither !important.
 */
.rkl-tstats__head {
	text-align: left;
}

.rkl-tstats__head.is-center {
	text-align: center;
}

.rkl-tstats__cell {
	text-align: left;
}

.rkl-tstats__cell.is-center {
	text-align: center;
}

/* Table -------------------------------------------------------------------- */

/*
 * The table class is on the selector because the reset above says
 * `.rkl-tstats__table th, td { border: 0 }` at (0,1,1). A bare
 * `.rkl-tstats__head { border-bottom }` is (0,1,0) and loses to it — which is
 * how a table ships with no rules between its rows at all. Landmine 23.
 */
.rkl-tstats__table .rkl-tstats__head {
	background: var(--rkl-grey-04);
	border-bottom: 1px solid var(--rkl-grey-01);
	box-sizing: border-box;
	font-size: 14px;
	/*
	 * No vertical padding. A cell's height is a MINIMUM and vertical padding
	 * ADDS to it, so 16 + 18.2 + 16 makes the designed 48px header 50 — the
	 * design's 16 is inset, not added (landmine 45).
	 */
	height: 48px;
	line-height: 1.3;
	overflow: hidden;
	padding: 0 16px;
	white-space: nowrap;
	width: var(--rkl-tstats-w, auto);
}

/*
 * No `gap` on this flex container: the caret carries its own margin instead, so
 * it costs nothing at all on a column that is not the sorted one. See
 * .rkl-tstats__caret.
 */
.rkl-tstats__sort {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
	max-width: 100%;
	padding: 0;
}

.rkl-tstats__head.is-center .rkl-tstats__sort {
	justify-content: center;
	width: 100%;
}

.rkl-tstats__sort:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

.rkl-tstats__head-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * The caret only appears on the column actually sorted, and it turns over
 * between directions — the asset is a down caret, so ascending is the rotated
 * state, which is how the frame draws „#“ (2466:80754, rotate 180).
 *
 * Zero width and NO margin when unsorted: the value columns are 56–81px wide
 * with 16px insets, so a permanently reserved 14px glyph plus its 8px gap would
 * push every centred label off centre and clip the five-character ones.
 */
.rkl-tstats__caret {
	flex: 0 0 auto;
	height: 14px;
	margin-left: 0;
	object-fit: contain;
	opacity: 0;
	width: 0;
}

.rkl-tstats__head.is-sorted .rkl-tstats__caret {
	margin-left: 8px;
	opacity: 1;
	width: 14px;
}

.rkl-tstats__head.is-sorted.is-asc .rkl-tstats__caret {
	transform: rotate(180deg);
}

.rkl-tstats__table .rkl-tstats__cell {
	border-bottom: 1px solid var(--rkl-grey-01);
	box-sizing: border-box;
	font-size: 14px;
	/* 64 is reached, not exceeded: one line of 14/1.5 plus 16 of padding is 37,
	   so the height stays the operative value. */
	height: 64px;
	line-height: 1.5;
	overflow: hidden;
	padding: 8px 16px;
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * 8px inline, not the frame's 16, on the centred value columns only — measured,
 * not preferred. Every column width in the frame is its own HEADER label plus
 * 2 × 16px of inset, so a 3-character label like „2P%“ set a 60px column; a
 * 4-character VALUE in it („67.6“ is 28.4px at Poppins 400 14) needs 60.4 and
 * ellipsised in all three percent columns. The content is centred, so a smaller
 * inset is invisible, and it leaves room for „100.0“ (33.8) in the narrowest
 * one, 59px `FT%`. The header keeps 16, because 16 is what produced the widths.
 *
 * Not the left-aligned columns: there the inset is the text's own left edge and
 * has to line up with the header's.
 */
.rkl-tstats__table .rkl-tstats__cell.is-center {
	padding-inline: 8px;
}

/*
 * The active-sort tint, header cell AND every body cell of that column — the
 * frame tints all twelve of „#“ (2466:80754 … 80765). Same specificity as the
 * two background rules above, so it has to come after them.
 */
.rkl-tstats__head.is-sorted,
.rkl-tstats__cell.is-sorted {
	background: var(--rkl-grey-03);
}

/*
 * The frame draws no hover state for this tab, so the house one applies: the
 * row lifts to `--rkl-grey-04` and the sorted column keeps its stronger tint.
 */
.rkl-tstats__row:hover .rkl-tstats__cell:not(.is-sorted) {
	background: var(--rkl-grey-04);
}

/*
 * Landmine 25: an inline-flex box sits on the cell's text baseline and reserves
 * room for the descender under it, which made a 32px chip 55px tall.
 */
.rkl-tstats__badge {
	align-items: center;
	background: var(--rkl-grey-04);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	color: var(--rkl-black);
	display: inline-flex;
	font-size: 14px;
	height: 32px;
	justify-content: center;
	line-height: 1.3;
	max-width: 64px;
	min-width: 32px;
	padding: 10px 8px;
	vertical-align: middle;
}

/*
 * Places 1–3 only. The frame also reports a paler `#F9F9F9` bottom border on the
 * non-podium badges' cells; that travels with the library component variant, not
 * with the design, so every divider here is `--rkl-grey-01` (teamspec §2.5).
 */
.rkl-tstats__badge.is-podium {
	background: var(--rkl-black);
}

/*
 * The name is Poppins Regular 14/1.5 like the rest of the row, so only the link
 * behaviour is declared. Plain inline, not inline-flex: the ellipsis belongs to
 * the cell, and `text-overflow` does not reach the items of a flex container.
 */
.rkl-tstats__player {
	color: var(--rkl-black);
	/* Stated, not inherited: the document's own weight is 300 (landmine 34), and
	   the frame gives the name the row's Regular, not the header's Medium. */
	font-weight: 400;
	text-decoration: none;
}

a.rkl-tstats__player:hover,
a.rkl-tstats__player:focus-visible {
	color: var(--rkl-green-03);
}

/*
 * The link stretches over its own cell rather than over the row: `position:
 * relative` on a <tr> is not reliable, and a row-wide overlay would sit above
 * the sticky column it has to stay under.
 */
a.rkl-tstats__player::after {
	content: "";
	inset: 0;
	position: absolute;
}

a.rkl-tstats__player:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

/* A missing average reads as absent, not as zero. */
.rkl-tstats__blank {
	color: var(--rkl-grey-05) !important;
}

/* Sticky column ------------------------------------------------------------ */

/*
 * „Vardas Pavardė“, not „#“: the frame pins the identity column at left 0 and
 * lets the rank column scroll away underneath it. At every width, because the
 * table is wider than the card on desktop too.
 */
.rkl-tstats__table .rkl-tstats__head.is-sticky,
.rkl-tstats__table .rkl-tstats__cell.is-sticky {
	left: 0;
	position: sticky;
	z-index: 2;
}

/* Opaque, or the „#“ column shows through as it passes underneath. */
.rkl-tstats__table .rkl-tstats__cell.is-sticky {
	background: var(--rkl-white);
}

.rkl-tstats__table .rkl-tstats__head.is-sticky {
	background: var(--rkl-grey-04);
	z-index: 3;
}

.rkl-tstats__table .rkl-tstats__cell.is-sticky.is-sorted,
.rkl-tstats__table .rkl-tstats__head.is-sticky.is-sorted {
	background: var(--rkl-grey-03);
}

.rkl-tstats__row:hover .rkl-tstats__cell.is-sticky:not(.is-sorted) {
	background: var(--rkl-grey-04);
}

/*
 * A divider only once the sticky column actually covers something. The class is
 * written by view.js; with no script the column still sticks and simply has no
 * edge.
 */
.rkl-tstats.is-scrolled .rkl-tstats__table .rkl-tstats__head.is-sticky::after,
.rkl-tstats.is-scrolled .rkl-tstats__table .rkl-tstats__cell.is-sticky::after {
	background: var(--rkl-grey-01);
	bottom: 0;
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
}

/* Empty state -------------------------------------------------------------- */

.rkl-tstats__empty {
	border-top: 1px solid var(--rkl-grey-01);
	padding: 48px 16px 56px;
	text-align: center;
}

.rkl-tstats__empty-mark {
	display: block;
	height: 64px;
	margin: 0 auto 8px;
	object-fit: contain;
	width: 64px;
}

/* Boldonse has one weight; 400 is stated because the inherited weight is 300. */
.rkl-tstats__empty-title {
	color: var(--rkl-black);
	display: block;
	font-family: "Boldonse", var(--rkl-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.9;
	text-transform: uppercase;
}

.rkl-tstats__empty-text {
	color: var(--rkl-grey-05);
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

/* Motion ------------------------------------------------------------------- */

/*
 * The only motion on the card. There is deliberately no row entrance animation
 * on a re-sort: a filling animation would make every <tr> a containing block for
 * the duration, and a sticky cell inside a transformed ancestor stops sticking
 * (landmines 24 and 35). The rows are reordered, not replaced, so the move is
 * legible without one.
 */
@media (prefers-reduced-motion: no-preference) {
	.rkl-tstats__caret {
		transition: opacity 120ms ease, transform 160ms ease;
	}

	a.rkl-tstats__player {
		transition: color 0.15s ease;
	}

	.rkl-tstats__cell {
		transition: background-color 0.15s ease;
	}
}

/* BREAKPOINT 782 ----------------------------------------------------------- */

@media (max-width: 782px) {
	/*
	 * The mobile card is inset to the 16px gutter (rkl/tab-panel's padding), and
	 * the title strip is 16 above / 19 tall / 16 below where desktop centres a
	 * 24px title in 80.
	 */
	.rkl-tstats__header {
		gap: 8px;
		min-height: 0;
		padding: 16px;
	}

	.rkl-tstats__title {
		font-size: 16px;
	}

	.rkl-tstats__table {
		min-width: var(--rkl-tstats-minm, var(--rkl-tstats-min, 1381px));
	}

	/*
	 * The table class is required: the desktop weight rule is
	 * `.rkl-tstats__table .rkl-tstats__head` at (0,2,0) with !important, and a
	 * single-class rule here would lose to it.
	 */
	.rkl-tstats__table .rkl-tstats__head {
		font-size: 12px;
		font-weight: 600 !important;
		height: 32px;
		/* 32 tall with 12/1.3 text leaves no room for the design's 16px of
		   vertical padding, which is why it is only the inline pair. */
		padding: 0 8px;
		width: var(--rkl-tstats-wm, var(--rkl-tstats-w, auto));
	}

	.rkl-tstats__table .rkl-tstats__cell {
		font-size: 12px;
		height: 48px;
		padding: 8px;
	}

	/* 24 × 24 with Regular 12/1.5, where desktop is 32 × 32 with Medium 14/1.3. */
	.rkl-tstats__badge {
		font-size: 12px;
		font-weight: 400 !important;
		height: 24px;
		line-height: 1.5;
		min-width: 24px;
	}

	.rkl-tstats__empty {
		padding: 40px 16px 48px;
	}

	.rkl-tstats__empty-title {
		font-size: 16px;
	}
}

/* Print -------------------------------------------------------------------- */

/*
 * „Atspausdinti“ prints the page; this only keeps the card itself printable — no
 * shadow, no scrollport, no control that cannot be pressed on paper, and no
 * table 37px wider than the sheet. What the rest of the page does on paper is
 * not this block's to decide.
 */
@media print {
	.rkl-tstats {
		border: 0;
		box-shadow: none;
		overflow: visible;
	}

	/* Two classes: base.css gives .rkl-link-button `display: inline-flex`. */
	.rkl-tstats .rkl-tstats__print {
		display: none;
	}

	.rkl-tstats__scroller {
		overflow: visible;
		padding-bottom: 0;
	}

	.rkl-tstats__table {
		font-size: 10px;
		min-width: 0;
		table-layout: auto;
	}

	.rkl-tstats__table .rkl-tstats__head {
		/* A paper page break repeats the head, so it has to carry its own rule
		   rather than rely on the browser printing backgrounds. */
		border-bottom: 1px solid var(--rkl-grey-05);
		font-size: 10px;
		padding: 0 6px;
		/* The screen widths total 1381 and no sheet of paper is that wide; with
		   `table-layout: auto` above, the columns divide what there is. */
		width: auto;
	}

	.rkl-tstats__table .rkl-tstats__cell {
		font-size: 10px;
		height: auto;
		padding: 6px;
	}

	/* Sticky is a scrollport affordance; on paper it only offsets a column. */
	.rkl-tstats__table .rkl-tstats__head.is-sticky,
	.rkl-tstats__table .rkl-tstats__cell.is-sticky {
		position: static;
	}

	.rkl-tstats__row {
		break-inside: avoid;
	}

	.rkl-tstats__caret {
		display: none;
	}
}