/**
 * Komandų statistika.
 *
 * Tokens come from assets/base.css and are never redefined here. So do
 * .rkl-card, .rkl-tabs, .rkl-field and .rkl-icon-button — this file only sizes
 * and places them (landmine 21).
 */

.rkl-ttable {
	/*
	 * 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/players-table and
	 * rkl/standings-card 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);
	/* gap: 16px; */
	/*
	 * The table bleeds to the card's left and right edges in the design — the
	 * card is 1030 wide and so is the table — so the horizontal inset belongs to
	 * the controls row, not to the card. 6px at the bottom is the scrollbar lane.
	 *
	 * 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: 16px 0 6px;
	width: 100%;
}

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

.rkl-ttable__notice {
	color: var(--rkl-grey-05);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	padding: 24px 0;
	text-align: center;
}

/* Controls ----------------------------------------------------------------- */

/*
 * The controls row wraps.
 *
 * The design lays the division control and the season select on one line, which
 * fits the 1030 card at 1440. It does not fit a narrower one: the rail keeps its
 * 298px at every width above the breakpoint, so at a 1200 viewport the card is
 * 790 while the two controls need 896 — and with `nowrap` the season field was
 * pushed 91px clean outside the card. Wrapping keeps both controls full size and
 * legible, and costs nothing at the widths where they already fit on one line.
 */
.rkl-ttable__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	min-height: 48px;
	/* The card has no horizontal padding of its own — see .rkl-ttable. */
	padding: 0 16px 16px 16px;
	border-bottom: 1px solid var(--rkl-grey-01);
}

/*
 * And the segmented control itself scrolls rather than widening the card. Four
 * division labels are 647px, which is more than the card has between roughly
 * 1024 and 1180, so without this the row wraps and the control still overflows.
 * Two classes because .rkl-tabs is a shared control in base.css, which loads
 * after this file (landmine 48).
 */
.rkl-ttable .rkl-ttable__divisions {
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.rkl-ttable .rkl-ttable__divisions::-webkit-scrollbar {
	display: none;
}

.rkl-ttable .rkl-ttable__divisions .rkl-tabs__button {
	flex: 0 0 auto;
}

.rkl-ttable__field {
	flex: 0 0 auto;
	width: var(--rkl-ttable-field-w, 196px);
}

/*
 * Landmine 37: a <select> sized auto is as wide as its longest option, and the
 * division names are long. The field carries a definite width and base.css
 * already gives the select min-width: 0 so it can shrink inside it.
 */
.rkl-ttable__field .rkl-field__select {
	width: 100%;
}

/*
 * Above the breakpoint the sheet is not a sheet: it disappears as a box and its
 * fields become items of the controls row. `hidden` has to be re-declared here,
 * because `display: contents` does not undo the user-agent [hidden] rule on its
 * own and the server ships the element hidden (landmines 2 and 24).
 */
.rkl-ttable__sheet,
.rkl-ttable__sheet[hidden] {
	display: contents;
}

.rkl-ttable__sheet-head,
.rkl-ttable__sheet-apply,
.rkl-ttable__scrim {
	display: none;
}

/*
 * Two classes, not one: base.css gives .rkl-icon-button `display: flex` at
 * (0,1,0) and is enqueued after this stylesheet, so a single-class rule here
 * ties on specificity and loses on source order — the mobile filter button was
 * visible at every width.
 */
.rkl-ttable .rkl-ttable__filter {
	display: none;
}

.rkl-ttable__fields {
	align-items: center;
	display: flex;
	gap: 16px;
	/* Search and season travel together, hard right — on one line at the widths
	   that fit them, and on the second line when the row wraps. */
	margin-left: auto;
}

/*
 * The division select is the mobile control and the segmented one is the
 * desktop control. Both carry the same value and view.js writes to both, so
 * whichever is on screen is correct. Two classes for the same reason as the
 * filter button: base.css styles .rkl-field at (0,1,0) and loads later.
 */
.rkl-ttable .rkl-ttable__field--division {
	display: none;
}

/*
 * The design's 196px is an exact fit for "Sezonas" + "2025-2026" + the chevron,
 * with nothing to spare — sub-pixel rounding alone truncated one or the other.
 * The width becomes a minimum and the field takes the few pixels it needs, so
 * neither half ever ellipsises.
 */
.rkl-ttable__field--season {
	min-width: var(--rkl-ttable-field-w, 196px);
	width: auto;
}

.rkl-ttable__field--season .rkl-field__label {
	flex: 0 0 auto;
	min-width: 0;
}

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

.rkl-ttable__viewport {
	position: relative;
}

.rkl-ttable__scroller {
	overflow: auto;
	overscroll-behavior-x: contain;
	padding-bottom: 8px;
	scrollbar-color: var(--rkl-grey-01) transparent;
	scrollbar-width: thin;
}

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

/* The 9px rounded thumb the design draws under the table. */
.rkl-ttable__scroller::-webkit-scrollbar {
	height: 9px;
}

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

.rkl-ttable__scroller::-webkit-scrollbar-thumb {
	background: var(--rkl-grey-01);
	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-ttable__table {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	/*
	 * Fixed layout, so the columns are the design's widths rather than whatever
	 * the content negotiates. With auto layout the three value columns came out
	 * 167 / 107 / 104 instead of three equal thirds, and the 67px rank column
	 * stretched to 87.
	 */
	table-layout: fixed;
	/* The sum of the mobile widths: 49 + 154 + 104 + 64 + 64. */
	min-width: 435px;
	color: var(--rkl-black) !important;
	font-size: 14px;
	font-weight: 400 !important;
	width: 100%;
}

.rkl-ttable__table thead {
	background: none;
}

.rkl-ttable .rkl-ttable__table tbody tr,
.rkl-ttable .rkl-ttable__table tbody tr:hover {
	background: none;
}

.rkl-ttable__table th,
.rkl-ttable__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 rule carries the table class too. Elements INSIDE
 * a cell need only one class, because they never match the th/td selector.
 */
.rkl-ttable__table .rkl-ttable__head,
.rkl-ttable__badge,
.rkl-ttable__pill,
.rkl-ttable__team-name,
.rkl-ttable__empty-title {
	font-weight: 500 !important;
}

.rkl-ttable__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-ttable__head {
	text-align: left;
}

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

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

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

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

/*
 * The table class is on the selector because the reset above says
 * `.rkl-ttable__table th, td { border: 0 }` at (0,1,1). A bare
 * `.rkl-ttable__head { border-bottom }` is (0,1,0) and loses to it — which is
 * how the whole table shipped with no dividers at all. Landmine 23, again.
 */
.rkl-ttable__table .rkl-ttable__head {
	background: var(--rkl-grey-04);
	border-bottom: 1px solid var(--rkl-grey-01);
	box-sizing: border-box;
	font-size: 14px;
	height: 48px;
	line-height: 1.3;
	/*
	 * No vertical padding. A cell's height is a minimum, and 16 + 18.2 + 16
	 * made the designed 48px header 50 — the design's 16px is inset, not added.
	 */
	padding: 0 16px;
	white-space: nowrap;
	width: var(--rkl-tt-w, auto);
}

.rkl-ttable__sort {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 500;
	gap: 8px;
	line-height: 1.3;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.rkl-ttable__head.is-center .rkl-ttable__sort {
	justify-content: center;
	width: 100%;
}

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

/*
 * The caret only appears on the column actually sorted, and turns over between
 * directions. The asset is a down caret; ascending is the rotated state.
 */
/*
 * The caret collapses to zero width rather than hiding in place, which is what
 * rkl/players-table does and why its headers feel better than a fade.
 *
 * Zero width means an unsorted column reserves nothing, so its centred label is
 * genuinely centred on the column — the same result the previous
 * absolutely-positioned caret was reaching for, without pinning anything. When a
 * column becomes the sorted one the caret grows to 14px over 0.18s and the label
 * settles beside it; hovering any sortable header previews the same caret at 40%,
 * which is the affordance saying the column can be sorted at all.
 */
.rkl-ttable__caret {
	display: block;
	flex: 0 0 auto;
	height: 14px;
	object-fit: contain;
	opacity: 0;
	overflow: hidden;
	transition: width 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
	width: 0;
}

.rkl-ttable__sort:hover .rkl-ttable__caret {
	opacity: 0.4;
	width: 14px;
}

.rkl-ttable__head.is-sorted .rkl-ttable__caret {
	opacity: 1;
	width: 14px;
}

/* The asset points down; ascending turns it over. */
.rkl-ttable__head.is-sorted.is-asc .rkl-ttable__caret {
	transform: rotate(180deg);
}

.rkl-ttable__table .rkl-ttable__cell {
	border-bottom: 1px solid var(--rkl-grey-01);
	box-sizing: border-box;
	font-size: 14px;
	height: 64px;
	line-height: 1.5;
	overflow: hidden;
	padding: 8px 16px;
	text-overflow: ellipsis;
	position: relative;
	white-space: nowrap;
}

.rkl-ttable__head.is-sorted,
.rkl-ttable__cell.is-sorted {
	background: var(--rkl-grey-03);
}

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

.rkl-ttable__row:hover .rkl-ttable__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-ttable__badge,
.rkl-ttable__pill {
	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;
}

.rkl-ttable__badge.is-podium {
	background: var(--rkl-black);
}

.rkl-ttable__team {
	align-items: center;
	color: var(--rkl-black);
	display: inline-flex;
	font-weight: 500;
	gap: 8px;
	max-width: 100%;
	min-width: 0;
	text-decoration: none;
	vertical-align: middle;
}

/*
 * 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. The row hover carries the affordance across the rest.
 */
.rkl-ttable__team::after {
	content: "";
	inset: 0;
	position: absolute;
}

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

.rkl-ttable__crest {
	flex: 0 0 auto;
	height: 32px;
	object-fit: contain;
	width: 32px;
}

.rkl-ttable__team-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Sticky columns ----------------------------------------------------------- */

.rkl-ttable__cell.is-sticky,
.rkl-ttable__head.is-sticky {
	left: 0;
	position: sticky;
	z-index: 2;
}

/*
 * The second sticky column starts where the first ends. view.js writes the real
 * measured width into --rkl-ttable-sticky-1; the fallback is the design's 67.
 */
.rkl-ttable__cell.is-sticky-1,
.rkl-ttable__head.is-sticky-1 {
	left: var(--rkl-ttable-sticky-1, 67px);
}

.rkl-ttable__cell.is-sticky {
	background: var(--rkl-white);
}

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

.rkl-ttable__cell.is-sticky.is-sorted,
.rkl-ttable__head.is-sticky.is-sorted {
	background: var(--rkl-grey-03);
}

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

/* A divider only once the sticky pair actually covers something. */
.rkl-ttable.is-scrolled .rkl-ttable__cell.is-sticky-1::after,
.rkl-ttable.is-scrolled .rkl-ttable__head.is-sticky-1::after {
	background: var(--rkl-grey-01);
	bottom: 0;
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
}

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

/*
 * Always in the DOM, shown by a class on the body rather than by `hidden`: this
 * is a table-row, and a class-level `display` beats the user-agent [hidden]
 * rule (landmine 2). The header stays; only the rows are replaced.
 */
.rkl-ttable__row--empty {
	display: none;
}

.rkl-ttable__body.is-empty .rkl-ttable__row--empty {
	display: table-row;
}

.rkl-ttable__table .rkl-ttable__empty {
	border-bottom: 1px solid var(--rkl-grey-01);
	padding: 48px 16px;
	text-align: center;
}

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

.rkl-ttable__empty-title {
	color: var(--rkl-black);
	display: block;
	font-family: "Boldonse", var(--rkl-font);
	font-size: 18px;
	line-height: 1.9;
	text-transform: uppercase;
}

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

/* Loading ------------------------------------------------------------------ */

.rkl-ttable.is-loading .rkl-ttable__viewport {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 160ms ease;
}

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

@media (prefers-reduced-motion: no-preference) {
	/*
	 * The same motion rkl/players-table uses on /zaidejai/, to the millisecond:
	 * a 0.24s row rise staggered 14ms apart over the first 18 rows, and a 0.28s
	 * fade on the empty state. The two tables should feel like one component,
	 * and a different curve or step is exactly the kind of difference that reads
	 * as "one of these is nicer" without anyone being able to say why.
	 *
	 * Only `from` is declared: the row's resting state is its own, so the
	 * keyframe does not have to restate it.
	 */
	@keyframes rkl-ttable-row-in {
		from {
			opacity: 0;
			transform: translateY(4px);
		}
	}

	@keyframes rkl-ttable-fade-in {
		from {
			opacity: 0;
			transform: translateY(6px);
		}
	}

	/*
	 * `forwards`, never `both`: a filling animation leaves the element a
	 * permanent stacking context and containing block (landmines 24 and 35). A
	 * row is not an ancestor of the filter sheet, so `both` would be survivable
	 * here — but the rule is cheaper to keep than to reason about per element.
	 */
	.rkl-ttable__row.is-entering {
		animation: rkl-ttable-row-in 0.24s ease forwards;
		animation-delay: var(--rkl-row-delay, 0ms);
	}

	.rkl-ttable__body.is-empty .rkl-ttable__row--empty {
		animation: rkl-ttable-fade-in 0.28s ease forwards;
	}
}

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

@media (max-width: 782px) {
	.rkl-ttable__controls {
		/*
		 * Back to one line. The wrap added for the desktop overflow let the
		 * select and the filter button split across two rows here, and once the
		 * button dropped, `flex: 1 1 auto` grew the select to fill the line it
		 * had to itself — a 104px control row instead of 48. The select shrinks
		 * instead; the button is a fixed 48 and never wraps away from it.
		 */
		flex-wrap: nowrap;
		gap: 8px;
	}

	.rkl-ttable .rkl-ttable__field--division {
		min-width: 0;
	}

	/* Two classes again — .rkl-tabs is display: flex in base.css. */
	.rkl-ttable .rkl-ttable__divisions {
		display: none;
	}

	.rkl-ttable .rkl-ttable__field--division {
		display: flex;
		flex: 1 1 auto;
		width: auto;
	}

	.rkl-ttable .rkl-ttable__filter {
		display: flex;
		flex: 0 0 auto;
		height: 48px;
		width: 48px;
	}

	.rkl-ttable__filter img {
		height: 20px;
		width: 20px;
	}

	/*
	 * Below the breakpoint the sheet is a real box again, so `hidden` has to
	 * mean `display: none` again — the desktop rule above says `contents`.
	 */
	.rkl-ttable__sheet {
		background: var(--rkl-white);
		display: flex;
		flex-direction: column;
		inset: 0;
		position: fixed;
		transform: translateY(100%);
		/* 0.28s, the same as rkl/players-table's sheet. */
		transition: transform 0.28s ease;
		z-index: 1000;
	}

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

	.rkl-ttable__sheet.is-open {
		transform: none;
	}

	.rkl-ttable__scrim {
		background: rgba(30, 32, 30, 0.4);
		display: block;
		inset: 0;
		opacity: 0;
		position: fixed;
		transition: opacity 0.28s ease;
		z-index: 999;
	}

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

	.rkl-ttable__scrim.is-open {
		opacity: 1;
	}

	.rkl-ttable__sheet-head {
		align-items: center;
		background: var(--rkl-grey-04);
		display: flex;
		flex: 0 0 auto;
		height: 56px;
		justify-content: center;
		position: relative;
	}

	.rkl-ttable__sheet-title {
		color: var(--rkl-black);
		font-size: 16px;
		font-weight: 500;
		line-height: 1.4;
	}

	.rkl-ttable__sheet-close {
		align-items: center;
		background: none;
		border: 0;
		cursor: pointer;
		display: flex;
		height: 40px;
		justify-content: center;
		padding: 0;
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
	}

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

	.rkl-ttable__fields {
		flex-direction: column;
		gap: 16px;
		margin: 0;
		padding: 24px;
	}

	/* Landmine 37 again: inside a 375px sheet the select must not size itself
	   from its longest option, and zeroing the minimum was not enough. */
	.rkl-ttable__fields .rkl-field {
		width: 100%;
	}

	.rkl-ttable__sheet-apply {
		background: var(--rkl-green-03);
		border: 0;
		border-radius: var(--rkl-radius);
		color: var(--rkl-white);
		cursor: pointer;
		display: block;
		font-family: inherit;
		font-size: 14px;
		font-weight: 500;
		height: 48px;
		line-height: 1.3;
		margin: auto 24px 40px;
	}

	.rkl-ttable__sheet-apply:focus-visible {
		outline: 2px solid var(--rkl-black);
		outline-offset: 2px;
	}

	/*
	 * The table class is required: the desktop weight rule is
	 * `.rkl-ttable__table .rkl-ttable__head` at (0,2,1) with !important, and a
	 * single-class rule here loses to it — the mobile header stayed Medium.
	 */
	.rkl-ttable__table .rkl-ttable__head {
		font-size: 12px;
		font-weight: 600 !important;
		height: 32px;
		padding: 0 8px;
		width: var(--rkl-tt-wm, var(--rkl-tt-w, auto));
	}

	.rkl-ttable__table .rkl-ttable__cell {
		height: 48px;
		padding: 8px;
	}

	.rkl-ttable__badge,
	.rkl-ttable__pill {
		font-size: 12px;
		font-weight: 400 !important;
		height: 24px;
		line-height: 1.5;
		min-width: 24px;
	}

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

/*
 * base.css stacks .rkl-field below 480px so a long division name is not
 * truncated, which is right for the standings card's narrow column but makes
 * this control 55px tall where the design draws 48. The row here is the full
 * card width, so the label and the value do fit on one line.
 */
@media (max-width: 480px) {
	.rkl-ttable .rkl-ttable__field--division,
	.rkl-ttable .rkl-ttable__fields .rkl-field {
		align-items: center;
		flex-wrap: nowrap;
		gap: 8px;
		min-height: 48px;
		padding: 8px 16px;
	}

	.rkl-ttable .rkl-ttable__field--division .rkl-field__label,
	.rkl-ttable .rkl-ttable__fields .rkl-field__label {
		flex: 0 1 auto;
		font-size: 14px;
	}

	.rkl-ttable .rkl-ttable__field--division .rkl-field__select,
	.rkl-ttable .rkl-ttable__fields .rkl-field__select {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rkl-ttable__sheet,
	.rkl-ttable__scrim,
	.rkl-ttable__caret {
		transition: none;
	}
}