/**
 * Komandos sudėtis.
 *
 * 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 there would tie on specificity and win on source order
 * (landmines 21 and 48).
 */

.rkl-troster {
	/*
	 * 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/teams-table and
	 * rkl/players-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 card is 1030 wide in the design and so is the
	 * table, so the 16px inset belongs to the title row. 6px at the bottom is
	 * the near half of the 22px scrollbar lane; the scroller owns the other 6.
	 *
	 * 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-troster[hidden] {
	display: none;
}

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

/*
 * The design draws an 80px strip with a 24px title centred in it (27 above,
 * 29 below) and the table starting at 80. A min-height with centred items is
 * that measurement, without two odd paddings.
 */
.rkl-troster__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/player-gallery and rkl-ttable.
 * `text-transform` is stated because the theme's heading rules are not this
 * block's to predict.
 */
.rkl-troster__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-troster .rkl-troster__print {
	background: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

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

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

.rkl-troster__scroller {
	overflow: auto;
	overscroll-behavior-x: contain;
	/* The far half of the design's 22px bottom lane: 6 + the 9px thumb + 6. */
	padding-bottom: 6px;
	scrollbar-color: var(--rkl-grey-01) transparent;
	scrollbar-width: thin;
}

.rkl-troster__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 mobile frame draws under the table. */
.rkl-troster__scroller::-webkit-scrollbar {
	height: 9px;
}

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

.rkl-troster__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-troster__table {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--rkl-black) !important;
	font-size: 14px;
	font-weight: 400 !important;
	/*
	 * The DESKTOP column set, summed: 282 + 190 + 190 + 122 + 122 + 122.
	 *
	 * This is what makes the table scroll instead of squeezing. `table-layout:
	 * fixed` with `width: 100%` treats the declared widths as proportions once
	 * the container is narrower than their sum, so in a card under 1028 — which
	 * is every viewport below about 1440, because the ad rail keeps its 298px —
	 * the three `auto` columns collapsed to 42px while „Amžius", „Ūgis" and
	 * „Svoris" needed 83, 62 and 73. The headers clipped and the scroller had
	 * nothing to scroll, because the table had already shrunk to fit.
	 *
	 * With a real minimum the columns keep their drawn widths and the overflow
	 * becomes the scroller's business, which is what it was built for.
	 */
	min-width: 1028px;
	/*
	 * Fixed layout, so the columns are the design's widths rather than whatever
	 * the content negotiates (landmine 46). Column 1 is 282; the other five
	 * split what is left, which at the designed 1030 card is the drawn 149.6.
	 */
	table-layout: fixed;
	width: 100%;
}

.rkl-troster__table thead {
	background: none;
}

.rkl-troster .rkl-troster__table tbody tr {
	background: none;
}
.rkl-troster .rkl-troster__table tbody tr:hover {
	background: var(--rkl-grey-04);
}

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

.rkl-troster__table .rkl-troster__th.is-wrap,
.rkl-troster__table .rkl-troster__cell.is-wrap {
  white-space: nowrap;
}

.rkl-troster__table .rkl-troster__th:nth-child(2),
.rkl-troster__table .rkl-troster__cell:nth-child(2) { width: 190px; } /* Marškinėlių numeris */

.rkl-troster__table .rkl-troster__th:nth-child(3),
.rkl-troster__table .rkl-troster__cell:nth-child(3) { width: 190px; } /* Pozicija */

.rkl-troster__table .rkl-troster__th:nth-child(4),
.rkl-troster__table .rkl-troster__th:nth-child(5),
.rkl-troster__table .rkl-troster__th:nth-child(6),
.rkl-troster__table .rkl-troster__cell:nth-child(4),
.rkl-troster__table .rkl-troster__cell:nth-child(5),
.rkl-troster__table .rkl-troster__cell:nth-child(6) { width: auto; }

/*
 * There are deliberately NO per-column width rules here.
 *
 * Every width is a custom property written by render.php — `--rkl-troster-w` for
 * desktop, `--rkl-troster-wm` for mobile — and consumed by the two
 * `.rkl-troster__th` rules. A set of `:nth-child` widths used to sit here at
 * (0,2,1), which outranks both of those (0,2,0) rules and quietly replaced the
 * whole system: on desktop it forced 282/190/190/122/122/122 instead of the
 * design's 282 + 149.6 x 5, and on mobile it pinned columns 2 and 3 at 190,
 * which left 15px for the last three to share and collapsed them to 5px each.
 *
 * With them gone the desktop `calc((100% - 282px) / 5)` resolves against the
 * table's own 1028px minimum rather than a squeezed card, which is what makes
 * the columns hold their drawn widths and the overflow scroll.
 */

/*
 * The name column is the identity column, so it stays put while the rest
 * scrolls — at EVERY width, not only on a phone.
 *
 * It used to be mobile-only, on the reasoning that the table fits above the
 * breakpoint and a sticky cell would be an absolute containing block for
 * nothing. That stopped being true the moment the table was given its real
 * 1028px minimum: the ad rail keeps its 298px at every width above 782, so the
 * card is under 1028 all the way up to about 1440 and the table scrolls there
 * too. Without this, scrolling right hid which player each row belonged to.
 */
.rkl-troster__table .rkl-troster__th.is-sticky,
.rkl-troster__table .rkl-troster__cell.is-sticky {
	left: 0;
	position: sticky;
	z-index: 2;
}

/* .rkl-troster__table .rkl-troster__cell.is-sticky {
	background: var(--rkl-white);
} */

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

/*
 * 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-troster.is-scrolled .rkl-troster__table .rkl-troster__th.is-sticky::after,
.rkl-troster.is-scrolled .rkl-troster__table .rkl-troster__cell.is-sticky::after {
	background: var(--rkl-grey-01);
	bottom: 0;
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
}

/*
 * The weight restoration has to outrank the reset above, which is (0,1,1) with
 * !important — so the header and the strong cell carry the table class too.
 * Elements INSIDE a cell need only one class, because they never match the
 * th/td selector.
 */
.rkl-troster__table .rkl-troster__th,
.rkl-troster__table .rkl-troster__cell.is-strong,
.rkl-troster__pill,
.rkl-troster__player {
	font-weight: 500 !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-troster__th {
	text-align: left;
}

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

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

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

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

/*
 * The table class is on the selector because the reset above says
 * `.rkl-troster__table th, td { border: 0 }` at (0,1,1). A bare
 * `.rkl-troster__th { 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-troster__table .rkl-troster__th {
	background: var(--rkl-grey-04);
	border-bottom: 1px solid var(--rkl-grey-01);
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.3;
	/*
	 * 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;
	overflow: hidden;
	padding: 0 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: var(--rkl-troster-w, auto);
}

/*
 * Three cells in this table hold two words that do not fit one line at the
 * design's own widths, and all three have the height to spare. Both wrapping
 * columns are Poppins 14/1.3 by design, so the line box is stated as well —
 * the cell's own 1.5 strut would otherwise decide it and cost 4.6px a line.
 *
 *   „Marškinėlių numeris“ (head) is 174px of text in a 149.6px column.
 *   „Lengvasis puolėjas“ is 150px in a 117.6px content box.
 *   „Osvaldas Brazdžionis“ is 165px in the mobile column's 99px.
 *
 * Nothing else wraps: every other label and value is one unbreakable word,
 * which under `normal` would overflow rather than wrap, and needs the ellipsis.
 * Two classes because the geometry rules above are (0,2,0).
 */
.rkl-troster__table .rkl-troster__th.is-wrap,
.rkl-troster__table .rkl-troster__cell.is-wrap {
	line-height: 1.3;
	white-space: normal;
}

.rkl-troster__table .rkl-troster__cell.is-wrap:hover {
	background-color: var(--rkl-grey-04);
}

/*
 * No sort affordance anywhere: every header cell in the design holds a single
 * text node, where rkl-ttable's head wraps its label in a <button> with a
 * caret. There is nothing to sort by here — the roster arrives ordered by
 * shirt number.
 */

.rkl-troster__table .rkl-troster__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;
}

/*
 * The name is Poppins Medium 14/1.3 and the cell is 14/1.5, so the line-height
 * is stated here rather than inherited. Plain inline, not inline-flex: the
 * ellipsis belongs to the cell, and `text-overflow` does not reach the items of
 * a flex container.
 */
.rkl-troster__player {
	color: var(--rkl-black);
	line-height: 1.3;
	text-decoration: none;
}

a.rkl-troster__player:hover,
a.rkl-troster__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 first column.
 */
a.rkl-troster__player::after {
	content: "";
	inset: 0;
	position: absolute;
}

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

/*
 * 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-troster__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;
}

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

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

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

.rkl-troster__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-troster__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-troster__empty-text {
	color: var(--rkl-grey-05);
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

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

@media (prefers-reduced-motion: no-preference) {
	a.rkl-troster__player {
		transition: 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-troster__header {
		gap: 8px;
		min-height: 0;
		padding: 16px;
	}

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

	/*
	 * The table class is required: the desktop weight rule is
	 * `.rkl-troster__table .rkl-troster__th` at (0,2,0) with !important, and a
	 * single-class rule here would lose to it.
	 */
	.rkl-troster__table .rkl-troster__th {
		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-troster-wm, var(--rkl-troster-w, auto));
	}

	/*
	 * The mobile column set is its own, narrower one: 115 + 141 + 96 + 61 + 44
	 * + 53. The frame's numbers total 474 in a 368 card; two are widened in
	 * render.php because they ellipsise real values, so this is 510.
	 */
	.rkl-troster__table {
		min-width: 510px;
	}

	.rkl-troster__table .rkl-troster__cell {
		height: 48px;
		padding: 8px;
	}

	/*
	 * Two lines at 14/1.3 measure 36.4, which is inside the 48px row — but only
	 * with the vertical padding removed, because a cell's height is a MINIMUM
	 * and 8 + 36.4 + 8 makes the row 53 (landmine 45). The rows keep their
	 * designed 48 and the name column its designed 115.
	 */
	.rkl-troster__table .rkl-troster__cell.is-wrap {
		padding: 0 8px;
	}

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

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

	.rkl-troster__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. What
 * the rest of the page does on paper is not this block's to decide.
 */
@media print {
	.rkl-troster {
		border: 0;
		box-shadow: none;
		overflow: visible;
	}

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

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

	.rkl-troster__table {
		min-width: 0;
	}

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

	.rkl-troster__table .rkl-troster__th {
		/* A paper page break repeats the head, so it has to carry its own fill
		   rather than rely on the browser printing backgrounds. */
		border-bottom: 1px solid var(--rkl-grey-05);
	}
}