/*
 * Gleiche Farbschema-Konvention wie die übrigen footballr.at-Widgets: Dunkel
 * ist Default, Light-Mode wird über die kanonische, dort bereits bewährte
 * Selektor-Liste erzwungen (siehe pickem.css / translator-engine-Plugin).
 */
.frp-hub {
	--frph-bg: #10161d;
	--frph-border: #1f2b36;
	--frph-radius: 18px;
}

:is(html[data-theme="light"],body[data-theme="light"],html.light-mode,body.light-mode,html.is-light,body.is-light,html.rb-light-mode,body.rb-light-mode,html.tsnfi-force-light,body.tsnfi-force-light) .frp-hub {
	--frph-bg: #f3f5f7 !important;
	--frph-border: #dde3e8 !important;
}

.frp-hub {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"poll pickem"
		"poll top10";
	gap: 1.5em;
	width: 100%;
	box-sizing: border-box;
}

.frp-hub__cell {
	background: var(--frph-bg);
	border: 1px solid var(--frph-border);
	border-radius: var(--frph-radius);
	overflow: hidden;
	box-sizing: border-box;
	min-width: 0;
}

/*
 * Die Umfrage bekommt keine feste Höhe - sie spannt beide Grid-Zeilen auf,
 * wodurch sie automatisch so hoch wie Pick'em + Spieltag-Übersicht
 * zusammen wird (das gewünschte "Hochformat" links, ganz ohne Zutun der
 * eigentlichen Umfrage-Höhe).
 */
.frp-hub__cell--poll {
	grid-area: poll;
	display: flex;
	flex-direction: column;
}

.frp-hub__cell--pickem {
	grid-area: pickem;
}

.frp-hub__cell--top10 {
	grid-area: top10;
	height: 100%;
}

/*
 * Die eingebetteten Fremd-Widgets (Sports Leagues Premium) bringen eigenes
 * Padding/Radius/Border mit - innerhalb der Karte soll nur noch der Inhalt
 * zählen, kein doppelter Rahmen/Radius.
 */
.frp-hub__cell > *:first-child {
	border-radius: 0 !important;
	border: none !important;
}

/* Unser eigenes Pick'em-Widget hat schon seine eigene Karten-Optik (siehe
 * pickem.css) - hier daher bewusst NICHT die Karten-Optik der Hülle
 * doppeln, sondern die Hülle transparent lassen. */
.frp-hub__cell--pickem {
	background: transparent;
	border: none;
}

.frp-hub__cell--pickem > *:first-child {
	border-radius: var(--frp-radius-lg, 18px) !important;
	border: 1px solid var(--frp-border, #1f2b36) !important;
}

@media (max-width: 900px) {
	.frp-hub {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"poll"
			"pickem"
			"top10";
	}

	.frp-hub__cell--top10 {
		height: auto;
	}
}

/*
 * Top-10-Rangliste (FRP_Hub::render_top10()) - gestufte Hervorhebung:
 * Platz 1 am stärksten, 2 etwas weniger, 3 noch leicht, 4-10 einheitlich.
 */
.frp-hub-top10 {
	height: 100%;
	box-sizing: border-box;
	padding: 22px 22px 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: #e6edf3;
	font-family: inherit;
}

.frp-hub-top10__title {
	font-size: 0.95em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #8b98a5;
}

.frp-hub-top10__empty {
	color: #8b98a5;
	font-size: 0.9em;
	margin: 0;
}

.frp-hub-top10__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.frp-hub-top10__more {
	margin-top: 2px;
}

.frp-hub-top10__more > summary {
	cursor: pointer;
	list-style: none;
	font-size: 0.85em;
	font-weight: 600;
	color: #8b98a5;
	padding: 6px 2px;
}

.frp-hub-top10__more > summary::-webkit-details-marker {
	display: none;
}

.frp-hub-top10__more > summary::before {
	content: '▸';
	display: inline-block;
	margin-right: 0.5em;
	transition: transform 0.15s ease;
}

.frp-hub-top10__more[open] > summary::before {
	transform: rotate(90deg);
}

.frp-hub-top10__list--more {
	margin-top: 8px;
}

.frp-hub-top10__row {
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: 12px;
	padding: 8px 14px;
}

.frp-hub-top10__rank {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 800;
	font-family: 'Barlow Semi Condensed', sans-serif;
}

.frp-hub-top10__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.frp-hub-top10__points {
	flex-shrink: 0;
	font-weight: 800;
	font-family: 'Barlow Semi Condensed', sans-serif;
}

/* Platz 1 - maximale Hervorhebung. */
.frp-hub-top10__row--tier-1 {
	background: linear-gradient(90deg, rgba(255, 215, 0, 0.16), rgba(255, 215, 0, 0.03));
	border: 1px solid rgba(255, 215, 0, 0.45);
	box-shadow: 0 0 22px rgba(255, 215, 0, 0.18);
	padding: 14px 18px;
}

.frp-hub-top10__row--tier-1 .frp-hub-top10__rank {
	width: 40px;
	height: 40px;
	font-size: 18px;
	background: linear-gradient(180deg, #ffe066, #c9971f);
	color: #2a1f00;
}

.frp-hub-top10__row--tier-1 .frp-hub-top10__name {
	font-size: 1.15em;
	color: #ffe9a3;
}

.frp-hub-top10__row--tier-1 .frp-hub-top10__points {
	font-size: 1.35em;
	color: #ffd76a;
}

/* Platz 2 - deutlich, aber weniger als Platz 1. */
.frp-hub-top10__row--tier-2 {
	background: linear-gradient(90deg, rgba(210, 216, 224, 0.12), rgba(210, 216, 224, 0.02));
	border: 1px solid rgba(210, 216, 224, 0.3);
	padding: 11px 16px;
}

.frp-hub-top10__row--tier-2 .frp-hub-top10__rank {
	width: 32px;
	height: 32px;
	font-size: 15px;
	background: linear-gradient(180deg, #e8ebef, #a6adb6);
	color: #1c2128;
}

.frp-hub-top10__row--tier-2 .frp-hub-top10__name {
	font-size: 1em;
	color: #dfe3e8;
}

.frp-hub-top10__row--tier-2 .frp-hub-top10__points {
	font-size: 1.1em;
	color: #c9ced5;
}

/* Platz 3 - noch leicht hervorgehoben. */
.frp-hub-top10__row--tier-3 {
	background: linear-gradient(90deg, rgba(205, 127, 50, 0.12), rgba(205, 127, 50, 0.02));
	border: 1px solid rgba(205, 127, 50, 0.3);
	padding: 10px 15px;
}

.frp-hub-top10__row--tier-3 .frp-hub-top10__rank {
	width: 28px;
	height: 28px;
	font-size: 13px;
	background: linear-gradient(180deg, #e0a468, #a86428);
	color: #241300;
}

.frp-hub-top10__row--tier-3 .frp-hub-top10__name {
	font-size: 0.95em;
	color: #e6d2b8;
}

.frp-hub-top10__row--tier-3 .frp-hub-top10__points {
	font-size: 1.02em;
	color: #d8a874;
}

/* Plätze 4-10 - einheitlich, kompakt. */
.frp-hub-top10__row--tier-rest {
	border: 1px solid transparent;
}

.frp-hub-top10__row--tier-rest .frp-hub-top10__rank {
	width: 22px;
	height: 22px;
	font-size: 11.5px;
	background: #1c2530;
	color: #8b98a5;
}

.frp-hub-top10__row--tier-rest .frp-hub-top10__name {
	font-size: 0.87em;
	color: #cbd2d9;
	font-weight: 500;
}

.frp-hub-top10__row--tier-rest .frp-hub-top10__points {
	font-size: 0.87em;
	color: #8b98a5;
}

:is(html[data-theme="light"],body[data-theme="light"],html.light-mode,body.light-mode,html.is-light,body.is-light,html.rb-light-mode,body.rb-light-mode,html.tsnfi-force-light,body.tsnfi-force-light) .frp-hub-top10 {
	color: #10161d !important;
}

:is(html[data-theme="light"],body[data-theme="light"],html.light-mode,body.light-mode,html.is-light,body.is-light,html.rb-light-mode,body.rb-light-mode,html.tsnfi-force-light,body.tsnfi-force-light) .frp-hub-top10__title,
:is(html[data-theme="light"],body[data-theme="light"],html.light-mode,body.light-mode,html.is-light,body.is-light,html.rb-light-mode,body.rb-light-mode,html.tsnfi-force-light,body.tsnfi-force-light) .frp-hub-top10__empty,
:is(html[data-theme="light"],body[data-theme="light"],html.light-mode,body.light-mode,html.is-light,body.is-light,html.rb-light-mode,body.rb-light-mode,html.tsnfi-force-light,body.tsnfi-force-light) .frp-hub-top10__row--tier-rest .frp-hub-top10__points {
	color: #5b6572 !important;
}

:is(html[data-theme="light"],body[data-theme="light"],html.light-mode,body.light-mode,html.is-light,body.is-light,html.rb-light-mode,body.rb-light-mode,html.tsnfi-force-light,body.tsnfi-force-light) .frp-hub-top10__row--tier-rest .frp-hub-top10__name {
	color: #10161d !important;
}

:is(html[data-theme="light"],body[data-theme="light"],html.light-mode,body.light-mode,html.is-light,body.is-light,html.rb-light-mode,body.rb-light-mode,html.tsnfi-force-light,body.tsnfi-force-light) .frp-hub-top10__more > summary {
	color: #5b6572 !important;
}