/* Portaraf leagues page. Uses the Portaraf theme colours when present. */
.ptr-lgx {
	--lgx-card: var(--ptr-card, #fff);
	--lgx-bg: var(--ptr-bg, #eef2f6);
	--lgx-line: var(--ptr-line, #dfe5ec);
	--lgx-text: var(--ptr-text, #0f1a2a);
	--lgx-muted: var(--ptr-muted, #64748b);
	--lgx-primary: var(--ptr-primary, #0b1d33);
	--lgx-accent: var(--ptr-accent, #16c75b);
	--lgx-radius: var(--ptr-radius, 16px);
	--lgx-shadow: var(--ptr-shadow, 0 8px 24px rgba(15, 26, 42, .06));
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	direction: rtl;
	color: var(--lgx-text);
	margin: 0 0 32px;
}
.ptr-lgx__side, .ptr-lgx__main {
	background: var(--lgx-card);
	border-radius: var(--lgx-radius);
	box-shadow: var(--lgx-shadow);
}
.ptr-lgx__side { position: sticky; top: 16px; overflow: hidden; }
.ptr-lgx__toggle { display: none; }
.ptr-lgx__picker { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.ptr-lgx__search {
	margin: 12px; padding: 9px 12px; border: 1px solid var(--lgx-line); border-radius: 10px;
	background: var(--lgx-bg); color: var(--lgx-text); font: inherit; font-size: 14px;
}
.ptr-lgx__countries { list-style: none; margin: 0; padding: 0 0 8px; overflow-y: auto; }
.ptr-lgx__country { border-top: 1px solid var(--lgx-line); }
.ptr-lgx__cbtn {
	display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px;
	border: 0; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 700;
	cursor: pointer; text-align: right;
}
.ptr-lgx__cbtn:hover { background: var(--lgx-bg); }
.ptr-lgx__cbtn img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
.ptr-lgx__cbtn span { flex: 1; }
.ptr-lgx__cbtn small { color: var(--lgx-muted); font-weight: 400; font-size: 12px; }
.ptr-lgx__cbtn::after { content: "‹"; color: var(--lgx-muted); transition: transform .2s; }
.ptr-lgx__country.is-open > .ptr-lgx__cbtn::after { transform: rotate(-90deg); }
.ptr-lgx__country.is-loading > .ptr-lgx__cbtn { opacity: .6; }
.ptr-lgx__comps { list-style: none; margin: 0; padding: 0 0 8px; display: none; }
.ptr-lgx__country.is-open > .ptr-lgx__comps { display: block; }
.ptr-lgx a.ptr-lgx__comp {
	display: block; padding: 7px 44px 7px 14px; color: var(--lgx-muted); font-size: 13px;
	text-decoration: none; border-right: 3px solid transparent;
}
.ptr-lgx a.ptr-lgx__comp:hover { color: var(--lgx-text); background: var(--lgx-bg); }
.ptr-lgx a.ptr-lgx__comp.is-active { color: var(--lgx-text); font-weight: 700; border-right-color: var(--lgx-accent); background: var(--lgx-bg); }
.ptr-lgx__cup { margin-left: 4px; font-size: 11px; }

.ptr-lgx__main { padding: 20px; min-height: 420px; transition: opacity .2s; }
.ptr-lgx__main.is-loading { opacity: .5; pointer-events: none; }
.ptr-lgx__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ptr-lgx__head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ptr-lgx__title { margin: 0; font-size: 20px; }
.ptr-lgx__sub { margin: 2px 0 0; color: var(--lgx-muted); font-size: 13px; }
.ptr-lgx__stages, .ptr-lgx__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ptr-lgx__stage {
	border: 1px solid var(--lgx-line); background: none; color: var(--lgx-muted); border-radius: 999px;
	padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
.ptr-lgx__stage.is-active { border-color: var(--lgx-accent); color: var(--lgx-text); font-weight: 700; }
.ptr-lgx .ptr-lgx__tab { font-family: inherit; }
.ptr-lgx__pane { display: none; }
.ptr-lgx__pane.is-active { display: block; }
.ptr-lgx__day { margin: 18px 0 8px; font-size: 14px; color: var(--lgx-muted); }
.ptr-lgx__day small { font-weight: 400; margin-right: 6px; }
.ptr-lgx__games { box-shadow: none; padding: 0; background: none; }
.ptr-lgx__games .ptr-matches { border: 1px solid var(--lgx-line); border-radius: 12px; overflow: hidden; }
.ptr-lgx__games .ptr-match:first-child { border-top: 0; }

.ptr-lgx__tablewrap { overflow-x: auto; border: 1px solid var(--lgx-line); border-radius: 12px; }
.ptr-lgx__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptr-lgx__table th, .ptr-lgx__table td { padding: 9px 6px; text-align: center; white-space: nowrap; }
.ptr-lgx__table thead th { background: var(--lgx-bg); color: var(--lgx-muted); font-weight: 700; font-size: 12px; }
.ptr-lgx__table tbody tr { border-top: 1px solid var(--lgx-line); }
.ptr-lgx__table tbody tr:hover { background: var(--lgx-bg); }
.ptr-lgx__table .ptr-lgx__team { text-align: right; font-weight: 700; width: 40%; }
.ptr-lgx__pts { font-weight: 800; }
.ptr-lgx__pos { position: relative; font-weight: 700; }
.ptr-lgx__table tr[class*="is-"] .ptr-lgx__pos::before {
	content: ""; position: absolute; right: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--z);
}
.ptr-lgx .is-z1 { --z: #16c75b; }
.ptr-lgx .is-z2 { --z: #2f7cf6; }
.ptr-lgx .is-z3 { --z: #f59e0b; }
.ptr-lgx .is-z4 { --z: #8b5cf6; }
.ptr-lgx .is-down { --z: #ef4444; }
.ptr-lgx__form { direction: rtl; }
.ptr-lgx__f {
	display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 1px; border-radius: 4px;
	font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: #94a3b8;
}
.ptr-lgx__f.is-w { background: #16c75b; }
.ptr-lgx__f.is-l { background: #ef4444; }
.ptr-lgx__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; font-size: 12px; color: var(--lgx-muted); }
.ptr-lgx__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; background: var(--z); vertical-align: middle; }

@media (max-width: 900px) {
	.ptr-lgx { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ptr-lgx__side { position: static; }
	.ptr-lgx__toggle {
		display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 16px;
		border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
	}
	.ptr-lgx__toggle::after { content: "▾"; }
	.ptr-lgx__picker { display: none; max-height: 60vh; }
	.ptr-lgx__side.is-open .ptr-lgx__picker { display: flex; }
	.ptr-lgx__main { padding: 14px; }
	.ptr-lgx__hide { display: none; }
	.ptr-lgx__table .ptr-lgx__team { width: auto; }
	.ptr-lgx__table { font-size: 12px; }
	.ptr-lgx__table th, .ptr-lgx__table td { padding: 8px 3px; }
	.ptr-lgx__table thead th { font-size: 11px; }
	.ptr-lgx__table .ptr-lgx__team { white-space: normal; min-width: 84px; }
}