/* stats.css 
	T4.5 stats styles
	May 2026 by CuR
*/


 /* || Table Layout */

.table-wrapper {
	width: 100%;
}

.table-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

@container main (width < 768px) {
	.table-header {
		flex-direction: column-reverse;
		align-items: stretch;
	}
}

.table-heading {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	padding-block-end: .5rem;
}

.table-viewport {
	position: relative;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.table-bottom {
	display: grid;
	gap: 2rem;

	margin-top: 2.25rem;
}

.table-bottom .base-note {
	--padding-block: 0;
}


/* || Base table */

.base-table {
	width: 100%;
	min-width: 800px;
	border-collapse: separate;
	border-spacing: 0;
}

.base-table th,
.base-table td {
	--inline-padding: .75rem;

	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
	
	padding-block: .75rem;
	padding-inline: var(--inline-padding);

	-webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.base-table:has(.identity__meta)
	tr:not(.base-table__divider) td {
	padding-block: .5rem;
}

.base-table__preheader th {
	padding-block: .5rem 0;
}

.base-table .ta-center {
	text-align: center;
}

.base-table .ta-right {
	text-align: right;
}

.base-table th {
	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
	
	color: var(--clr-on-contrast);
	background: var(--clr-surface-contrast);
}

[data-theme="dark"] .base-table th {
	color: var(--clr-text);
	background: var(--clr-surface-elevated);
}

.base-table td {
	font-size: var(--fs-medium);
	color: var(--clr-text-soft);
	border-top: 1px solid var(--border-color);
}

[data-table-role="schedule"] td {
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
}

.base-table tbody tr {
	background-color: var(--clr-surface-content);
}

.base-table tbody tr:nth-child(even of :not(.base-table__divider)) {
	background-color: var(--clr-surface-subtle);
}


/* || Base table Divider */

.base-table__divider td {
	color: var(--clr-text-accent);
	font-weight: var(--fw-bolder);
	padding-block: 1.5rem .75rem;
}

.base-table__divider td:has([data-sticky="true"]) {
	padding-inline: 0;
}

.base-table__divider [data-sticky="true"] {
	display: inline-block;
	padding-inline: var(--inline-padding);
}


/* || Base table footer */

.base-table tfoot td {
	text-align: right;
	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
	color: var(--clr-text-muted);
}

@container main (width < 768px) {
	.base-table tfoot td {
		text-align: left;
	}
}



/* || Base table sticky columns */

.base-table [data-sticky="true"] {
	position: sticky;
	left: 0;
	z-index: 1;
	/*max-width: 22vw;*/
}

.base-table td[data-sticky="true"] {
	background-color: inherit;
}

@container main (width < 768px) {
	.base-table td[data-sticky]:not(:has(+ td[data-sticky])) {
		border-right: 1px solid var(--border-color);
		width: 15rem;
		max-width: 44vw;
	}

	.base-table .is-ranking + td[data-sticky] {
		padding-inline: .125rem .25rem;
	}
}


/* || Identity Cell */

.identity {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

.identity > .base-avatar {
	--size: 1.625rem;
}

.identity:has(.identity__meta) > .base-avatar {
	--size: 1.875rem;
}

.identity__content {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.identity__description {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: var(--fw-bold);
}

.identity__meta {
	font-size: var(--fs-small);
	color: var(--clr-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
}

.identity__jersey {
	margin-left: .75rem;
	font-size: var(--fs-smaller);
	font-weight: var(--fw-bolder);
}

@container main (width < 768px) {
	.identity {
		gap: .5rem;
	}
}


/* || Data types */

.base-table td.is-ranking {
	width: 2ch;
	text-align: center;
	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
}

.base-table .is-stat {
	text-align: center;
	max-width: 2rem;
}

.base-table .is-score {
	text-align: center;
	max-width: 4rem;
}

.base-table td.is-stat,
.base-table td.is-score {
	font-size: var(--fs-small);
}

.base-table .is-percent {
	max-width: fit-content;
}

.base-table .is-link {
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
}

.base-table td.is-team {
	width: 20%;
}

.base-table .is-versus {
	text-align: center;
	font-weight: var(--fw-bold);
}

.base-table .trend-positive {
	color: var(--clr-success);
}

.base-table .trend-negative {
	color: var(--clr-danger);
}

.base-table .is-key {
	font-weight: var(--fw-bolder);
	color: var(--clr-text);
}

.base-table .left-border {
	border-left: 1px solid var(--border-color-strong);
}



/* || Base table total row */
.base-table__total td {
	font-weight: var(--fw-bolder);
}

.base-table__total .is-stat,
.base-table__total .is-score {
	border-top: 1px solid var(--clr-brand-base);
}


/* || Table links */

.base-table a {
	text-decoration: none;
	color: var(--clr-link-neutral);
}

.base-table a:hover,
.base-table a:focus-visible {
	text-decoration: underline;
}


/* || Tags */

.tag {
	--_tag-color: var(--tag-color, var(--clr-text-muted));

	display: inline-flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;

	padding: 0.125rem 0.5rem;
	margin-left: .375rem;
	border-radius: 999px;

	font-size: var(--fs-smaller);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;

	color: var(--_tag-color);
	background: hsl(from currentColor h s l / .10);
}

.tag--success {
	--tag-color: var(--clr-success);
}

.tag--warning {
	--tag-color: var(--clr-warning);
}

.tag--danger {
	--tag-color: var(--clr-danger);
}

.tag--neutral {
	--tag-color: var(--clr-neutral);
}


/* Table Content  */
.cell-stack {
	display: grid;
	gap: .125rem;
}

.cell-stack__main {
	font-weight: var(--fw-bold);
	overflow: hidden;
	text-overflow: ellipsis;
}

.cell-stack__meta {
	font-size: var(--fs-smaller);
	color: var(--clr-text-muted);
	font-weight: var(--fw-bold);
}


/* || Table Mobile Mode Cards */

@media (max-width: 768px) {

	[data-mobile-mode="cards"] .base-table {
		min-width: 320px;
	}
	
	[data-mobile-mode="cards"] thead,
	[data-mobile-mode="cards"] tfoot {
		display: none;
	}

	[data-mobile-mode="cards"] tbody tr {
		display: block;
		padding-block: 1rem;
		border-bottom: 1px solid var(--border-color);
	}

	[data-mobile-mode="cards"] td {
		display: flex;
		gap: .5rem;
		border: none;

		--inline-padding: .25rem;
		padding-block: .25rem !important;
		white-space: normal;
		line-height: 1.5;
	}

	[data-mobile-mode="cards"] td[data-label]::before {
		content: attr(data-label) ":";
		font-size: var(--fs-small);
		font-weight: var(--fw-bold);
		min-width: 10ch;
		text-align: left;
	}

	[data-mobile-mode="cards"] .cell-stack {
		grid-template-columns: repeat(2, auto);
		gap: 1rem;
		align-items: baseline;
	}

	[data-mobile-mode="cards"] .cell-stack__meta {
		font-size: inherit;
	}

}


/* || Glossary */

.glossary-wrapper {
	display: grid;
	gap: .75rem;
	padding-inline: .5rem;
}

.glossary-wrapper > .base-title {
	font-size: var(--fs-madium);
}

.glossary {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(9rem, 20%), 1fr));
	gap: .75rem .5rem;
}

.glossary__item {
	color: var(--clr-text-muted);
	font-size: var(--fs-smaller);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.glossary__abbr {
	display: inline-block;
	margin-right: .25rem;
	color: var(--clr-text-soft);
	font-weight: var(--fw-bolder);
}



/* || Player card */

.player-card {
	display: flex;
	gap: 1rem;
	color: var(--clr-text-soft);
}

.player-card__avatar {
	--size: 5rem;
	border: 2px solid hsl(from var(--border-color) h s l / .86);
}

.player-card__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25rem;
	min-width: 0;
}

.player-card__content * {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.player-card__name {
	font-size: clamp(var(--fs-large), 5vw, var(--fs-largest));
	font-weight: var(--fw-bold);
	letter-spacing: var(--font-spacing-dense);
	line-height: 1.2;
}

.player-card__meta {
	display: flex;
	gap: .75rem;
	font-size: var(--fs-medium);
	color: var(--clr-text-soft);
}

.player-card__jersey {
	font-size: var(--fs-small);
	min-width: 4ch;
}

.player-card__team {
	display: flex;
	gap: .25rem;
	align-items: center;
	font-size: var(--fs-medium);
	color: var(--clr-text-soft);
}

.player-card__badge {
	flex: 0 0 auto;
	overflow: hidden;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
}

.player-card__badge > img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.player-card__teamname {
	font-weight: var(--fw-bold);
}



/* || Team card */

.team-card {
	display: flex;
	gap: 1rem;
	color: var(--clr-text-soft);
}

.team-card__avatar {
	--size: 4rem;
	border: 2px solid hsl(from var(--border-color) h s l / .86);
}

.team-card__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25rem;
	min-width: 0;
}

.team-card__content * {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.team-card__name {
	color: var(--clr-text);
	font-size: clamp(var(--fs-large), 5vw, var(--fs-largest));
	font-weight: var(--fw-bold);
	letter-spacing: var(--font-spacing-dense);
	line-height: 1.2;
}

.team-card__meta {
	display: flex;
	gap: .375rem;
	font-size: var(--fs-medium);
	color: var(--clr-text-soft);
}


/* || Sanctions styles */

:where([data-view="sanctions"]) .base-title {
	--font-size: 1.25rem;
}

.base-table .sanctions-wrap {
	--stack-gap: .125em;
}

.base-table td.is-served {
	color: var(--clr-success);
}

.sanctions-container {
	display: grid;
	grid-template-columns:
		repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: 1.5rem;
	margin-block: 1rem;
}

.sanctions-card {
	--stack-gap: .75rem;
	
	color: var(--clr-text-soft);
	font-size: var(--fs-medium);
	
	padding: 1.375rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	background: var(--clr-surface-elevated);

	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
}

.sanctions-card .base-title {
	--font-size: 1.125rem;
}

.sanctions-card .base-paragraph {
	font-size: inherit;
}


/* || Standings styles */

[data-view="standings"] .base-table .identity__description.is-withdrawn {
	text-decoration: line-through;
	color: var(--clr-text-muted);
}


[data-view="game-detail"] .base-table .is-percent + td {
	border-left: 1px solid var(--border-color-strong);
}


/* || Schedule styles */

[data-view="schedule"] [data-st-code="0"] {
	color: var(--clr-success);
}

[data-view="schedule"] [data-st-code="2"] {
	color: var(--clr-danger);
}

[data-view="schedule"] [data-st-code="3"] {
	color: var(--clr-warning);
}

.byes {
	display: grid;
	gap: .75rem;
	padding-block: .75rem;
	padding-inline: 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	margin-block: .25rem;
}

.byes__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(12rem, 25%), 1fr));
	gap: 1rem 3rem;
}

.byes__team .identity__description {
	font-size: var(--fs-medium);
}

.byes__team .identity__meta {
	font-size: var(--fs-smaller);
}

.table-bottom:has(.byes) {
	margin-top: 0;
}


/* || Results styles */

[data-view="results"] :is(.is-team, .glossary)
	[data-score-st]::before {
	content: "";
	width: .5625rem;
	height: .5625rem;
	border-radius: 50%;
	
	display: var(--st-display, none);
	background-color: var(--st-color, transparent);
}

[data-view="results"] .glossary [data-score-st]::before {
	margin-right: .5rem;
}

:is(.is-team, .glossary) [data-score-st="3"] { /* default */
	--st-display: inline-block;
	--st-color: var(--clr-warning)
}

:is(.is-team, .glossary) [data-score-st="4"] { /* tie won */
	--st-display: inline-block;
	--st-color: var(--clr-success)
}

:is(.is-team, .glossary) [data-score-st="6"] { /* abandon */
	--st-display: inline-block;
	--st-color: var(--clr-danger)
}

:is(.is-team, .glossary) [data-score-st="7"] { /* default admin */
	--st-display: inline-block;
	--st-color: hsl(323 100% 55%);
}


/* || Target entry : highlight */

[data-target] {
	scroll-margin: 5rem;
}

.target-entry > td {
	animation: target-entry-highlight 5s ease-out both;
}

@keyframes target-entry-highlight {
	0%, 20% {
		box-shadow:
			inset 0 0 0 100vmax hsl(var(--hsl-brand-base) / 0.28);
	}

	100% {
		box-shadow:
			inset 0 0 0 100vmax hsl(var(--hsl-brand-base) / 0);
	}
}