/**
 * Frontend Stylesheet for 7er Rugby Tabellen
 *
 * Implements a premium, modern, sporty layout optimized for high-end look
 * and fully responsive mobile card grids.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&display=swap');

:root {
	--r7t-font: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--r7t-primary: #0f1a34; /* Dark navy header background */
	--r7t-primary-light: #18274a; /* Row hover background */
	--r7t-accent: #3b82f6; /* Sporty royal blue */
	
	--r7t-text-main: #f8fafc;
	--r7t-text-muted: #94a3b8; /* Light blue-gray text */
	--r7t-bg-main: #0b1329; /* Deep navy container background */
	--r7t-bg-card: #101c38; /* Row / Card background */
	--r7t-bg-zebra: #132244; /* Alternate zebra row background */
	--r7t-border-color: #1f3056; /* Subtle blue-gray borders */
	--r7t-card-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
	
	/* Solid Dark Podium Tones (100% opaque to prevent theme bleed) */
	--r7t-gold-gradient: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
	--r7t-gold-bg: #1a2a56;
	--r7t-gold-border: #f59e0b;
	--r7t-gold-text: #ffffff;

	--r7t-silver-gradient: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
	--r7t-silver-bg: #152348;
	--r7t-silver-border: #94a3b8;
	--r7t-silver-text: #ffffff;

	--r7t-bronze-gradient: linear-gradient(135deg, #fb923c 0%, #b45309 100%);
	--r7t-bronze-bg: #182242;
	--r7t-bronze-border: #d97706;
	--r7t-bronze-text: #ffffff;

	--r7t-highlight-bg: #162850;
	--r7t-highlight-border: #3b82f6;
	--r7t-highlight-text: #60a5fa;
}

/* 1. Outer Container */
.r7t-table-container {
	font-family: var(--r7t-font);
	color: var(--r7t-text-main);
	background: var(--r7t-bg-main);
	border: 1px solid var(--r7t-border-color);
	border-radius: 16px;
	padding: 28px;
	margin: 24px 0;
	box-shadow: var(--r7t-card-shadow);
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
	font-variant-numeric: tabular-nums;
}

.r7t-table-container.r7t-compact {
	padding: 18px;
	border-radius: 12px;
}

/* 2. Header and Meta block */
.r7t-table-header-block {
	margin-bottom: 26px;
	border-bottom: 2px solid var(--r7t-border-color);
	padding-bottom: 22px;
}

.r7t-table-title {
	font-size: 2.8rem;
	font-weight: 800;
	margin: 0 0 14px 0;
	color: #ffffff;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	line-height: 1.2;
}

.r7t-compact .r7t-table-title {
	font-size: 2.1rem;
}

.r7t-table-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.r7t-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--r7t-text-muted);
}

.r7t-meta-item .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
	color: var(--r7t-accent);
}

/* 3. HTML Table */
.r7t-table {
	width: 100%;
	border-collapse: collapse !important;
	border-spacing: 0;
	margin: 12px 0;
	text-align: left;
	border: 1px solid var(--r7t-border-color) !important;
	border-radius: 14px;
	overflow: hidden;
}

.r7t-table th {
	background-color: var(--r7t-primary) !important;
	color: #ffffff !important;
	font-weight: 800;
	font-size: 1.2rem;
	padding: 22px 26px;
	border-top: none !important;
	border-bottom: 2px solid var(--r7t-border-color) !important;
	border-right: 1px solid var(--r7t-border-color) !important;
	border-left: none !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.r7t-table th:last-child {
	border-right: none !important;
}

.r7t-table td {
	padding: 22px 26px;
	border-top: none !important;
	border-bottom: 1px solid var(--r7t-border-color) !important;
	border-right: 1px solid var(--r7t-border-color) !important;
	border-left: none !important;
	font-size: 1.6rem;
	vertical-align: middle;
	color: #ffffff !important;
	background-color: transparent !important;
	transition: background-color 0.15s ease-in-out;
}

.r7t-table td:last-child {
	border-right: none !important;
}

.r7t-table tbody tr:last-child td {
	border-bottom: none !important;
}

.r7t-compact .r7t-table th {
	padding: 14px 18px;
	font-size: 1.05rem;
}

.r7t-compact .r7t-table td {
	padding: 14px 18px;
	font-size: 1.3rem;
}

.r7t-align-right {
	text-align: right !important;
}

.r7t-table tbody tr {
	background-color: var(--r7t-bg-card) !important;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.r7t-table tbody tr:nth-child(even) {
	background-color: var(--r7t-bg-zebra) !important;
}

/* Row Hover Effect on Desktop */
@media (min-width: 641px) {
	.r7t-table tbody tr:hover {
		background: var(--r7t-primary-light) !important;
	}
}

/* 4. Column Styles */
.r7t-col-rank {
	width: 95px;
	text-align: center;
}

.r7t-cell-rank {
	text-align: center;
	width: 95px;
}

.r7t-rank-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #152244;
	color: #94a3b8;
	font-size: 1.45rem;
	font-weight: 800;
	border: 1px solid var(--r7t-border-color);
}

.r7t-cell-team {
	font-weight: 700;
}

.r7t-team-name-wrapper {
	display: flex;
	align-items: center;
	gap: 14px;
}

.r7t-team-name-text {
	font-size: 1.85rem;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: -0.01em;
}

.r7t-medal-indicator {
	display: none; /* Hide redundant emoji because rank badge circle is already gold/silver/bronze */
}

/* Points column & pill */
.r7t-col-points,
.r7t-cell-points {
	color: #fbbf24 !important;
	font-weight: 800 !important;
	font-size: 2.1rem !important;
}

.r7t-points-pill {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-weight: 800;
}

.r7t-points-val {
	font-variant-numeric: tabular-nums;
}

/* On desktop, hide the 'Pkt' suffix inside cells since column header already shows it */
@media (min-width: 641px) {
	.r7t-points-suffix {
		display: none;
	}
}

/* Difference signs and styling */
.r7t-diff-positive {
	color: #34d399 !important;
	font-weight: 700;
}

.r7t-diff-negative {
	color: #f87171 !important;
	font-weight: 700;
}

/* 5. Podium Highlight Classes */
/* Gold - 1st place */
.r7t-table tbody tr.r7t-rank-gold,
.r7t-rank-gold {
	background-color: var(--r7t-gold-bg) !important;
}
@media (min-width: 641px) {
	.r7t-table tbody tr.r7t-rank-gold td:first-child {
		border-left: 5px solid var(--r7t-gold-border) !important;
	}
}
.r7t-rank-gold td {
	color: #ffffff !important;
	background-color: transparent !important;
}
.r7t-rank-gold .r7t-rank-badge {
	background: var(--r7t-gold-gradient) !important;
	color: #1a1506 !important;
	border-color: #fbbf24 !important;
	font-weight: 800;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.r7t-rank-gold .r7t-team-name-text {
	color: #ffffff !important;
}
.r7t-rank-gold .r7t-cell-points,
.r7t-rank-gold .r7t-points-val {
	color: #fbbf24 !important;
}

/* Silver - 2nd place */
.r7t-table tbody tr.r7t-rank-silver,
.r7t-rank-silver {
	background-color: var(--r7t-silver-bg) !important;
}
@media (min-width: 641px) {
	.r7t-table tbody tr.r7t-rank-silver td:first-child {
		border-left: 5px solid var(--r7t-silver-border) !important;
	}
}
.r7t-rank-silver td {
	color: #ffffff !important;
	background-color: transparent !important;
}
.r7t-rank-silver .r7t-rank-badge {
	background: var(--r7t-silver-gradient) !important;
	color: #0f172a !important;
	border-color: #e2e8f0 !important;
	font-weight: 800;
	box-shadow: 0 2px 8px rgba(148, 163, 184, 0.3);
}
.r7t-rank-silver .r7t-team-name-text {
	color: #ffffff !important;
}
.r7t-rank-silver .r7t-cell-points,
.r7t-rank-silver .r7t-points-val {
	color: #fbbf24 !important;
}

/* Bronze - 3rd place */
.r7t-table tbody tr.r7t-rank-bronze,
.r7t-rank-bronze {
	background-color: var(--r7t-bronze-bg) !important;
}
@media (min-width: 641px) {
	.r7t-table tbody tr.r7t-rank-bronze td:first-child {
		border-left: 5px solid var(--r7t-bronze-border) !important;
	}
}
.r7t-rank-bronze td {
	color: #ffffff !important;
	background-color: transparent !important;
}
.r7t-rank-bronze .r7t-rank-badge {
	background: var(--r7t-bronze-gradient) !important;
	color: #261103 !important;
	border-color: #fb923c !important;
	font-weight: 800;
	box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}
.r7t-rank-bronze .r7t-team-name-text {
	color: #ffffff !important;
}
.r7t-rank-bronze .r7t-cell-points,
.r7t-rank-bronze .r7t-points-val {
	color: #fbbf24 !important;
}

.r7t-rank-gold td,
.r7t-rank-silver td,
.r7t-rank-bronze td {
	border-bottom: 1px solid var(--r7t-border-color) !important;
}

.r7t-rank-highlight {
	background-color: var(--r7t-highlight-bg) !important;
}
.r7t-rank-highlight .r7t-rank-badge {
	background: rgba(59, 130, 246, 0.2);
	color: var(--r7t-highlight-text);
	border: 1px solid var(--r7t-highlight-border);
}
.r7t-rank-highlight td {
	border-bottom-color: var(--r7t-highlight-border);
}

.r7t-table-notes {
	margin-top: 24px;
	background: #101c38;
	border: 1px solid var(--r7t-border-color);
	border-left: 5px solid var(--r7t-accent);
	border-radius: 10px;
	padding: 18px 24px;
	font-size: 1.45rem;
	font-weight: 500;
	color: #f1f5f9 !important;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.r7t-table-notes .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
	color: #60a5fa;
	margin-top: 3px;
	flex-shrink: 0;
}

.r7t-notes-content {
	line-height: 1.6;
	color: #f1f5f9;
}

/* Penalty and correction indicators */
.r7t-penalty-mark,
.r7t-team-penalty-indicator {
	color: #f87171 !important;
	font-weight: 900;
	font-size: 1.15em;
	line-height: 1;
	margin-left: 4px;
	vertical-align: super;
	cursor: help;
}


/* ==========================================================
   6. Mobile Responsive Transformation (Smartphones Portrait)
   ========================================================== */

@media (max-width: 640px) {
	.r7t-table-container {
		padding: 12px;
		border-radius: 12px;
		margin: 16px 0;
	}

	.r7t-table-header-block {
		margin-bottom: 14px;
		padding-bottom: 12px;
	}

	.r7t-table-title {
		font-size: 1.35rem;
		line-height: 1.25;
	}

	.r7t-table-meta {
		gap: 10px;
	}

	.r7t-meta-item {
		font-size: 0.82rem;
		gap: 6px;
	}

	.r7t-meta-item .dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}

	/* Collapse Table into modern Card Grid */
	.r7t-table, 
	.r7t-table thead, 
	.r7t-table tbody, 
	.r7t-table tr, 
	.r7t-table th, 
	.r7t-table td {
		display: block;
	}

	.r7t-table {
		border: none;
		margin: 4px 0;
	}

	.r7t-table thead {
		display: none; /* Hide header completely on mobile */
	}

	/* 12-Column Flexible Grid for each row */
	.r7t-table tbody tr {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		row-gap: 10px;
		column-gap: 6px;
		align-items: center;
		padding: 12px 14px;
		border: 1px solid var(--r7t-border-color);
		border-radius: 12px;
		margin-bottom: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		background: var(--r7t-bg-card);
		box-sizing: border-box;
	}

	.r7t-table tbody tr:nth-child(even) {
		background: var(--r7t-bg-zebra);
	}

	/* Remove ALL table cell borders and theme outlines on mobile cards */
	.r7t-table td,
	.r7t-table th {
		border: none !important;
		border-top: none !important;
		border-bottom: none !important;
		border-left: none !important;
		border-right: none !important;
		outline: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		background-color: transparent !important;
	}

	/* Card Row 1: Header (Rank + Team + Points Pill) */
	.r7t-cell-rank {
		grid-column: 1 / 3;
		grid-row: 1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: auto;
		border: none !important;
	}

	.r7t-rank-badge {
		width: 38px;
		height: 38px;
		font-size: 1.05rem;
		font-weight: 800;
	}

	.r7t-cell-team {
		grid-column: 3 / 9;
		grid-row: 1;
		display: flex;
		align-items: center;
		min-width: 0;
		border: none !important;
	}

	.r7t-team-name-wrapper {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}

	.r7t-team-name-text {
		font-size: 1.15rem;
		font-weight: 700;
		line-height: 1.25;
		word-break: break-word;
	}

	.r7t-medal-indicator {
		display: none !important; /* Hide redundant emoji so team name is clean and aligned */
	}

	/* Card Row 1: Points Badge (Top Right) */
	.r7t-cell-points {
		grid-column: 9 / 13;
		grid-row: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
		border: none !important;
	}

	.r7t-points-pill {
		display: inline-flex;
		align-items: baseline;
		gap: 4px;
		background: #152244;
		border: 1.5px solid #fbbf24;
		color: #fbbf24;
		padding: 5px 12px;
		border-radius: 999px;
		font-weight: 800;
		font-size: 1.15rem;
		line-height: 1;
	}

	.r7t-points-val {
		font-variant-numeric: tabular-nums;
	}

	.r7t-points-suffix {
		display: inline-block;
		font-size: 0.72rem;
		font-weight: 700;
		text-transform: uppercase;
		color: #fbbf24;
		letter-spacing: 0.04em;
	}

	/* Card Row 2: Secondary Stats Bar (Single Tournament: 3 equal columns of 4 cols each) */
	.r7t-cell-stat {
		grid-row: 2;
		grid-column: span 4;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #0b1429 !important;
		border: 1px solid var(--r7t-border-color) !important;
		border-radius: 8px !important;
		padding: 8px 4px !important;
		font-size: 1.05rem !important;
		font-weight: 700;
		text-align: center !important;
		box-sizing: border-box;
	}

	/* Dynamic Labels (P+, P-, +/-, Turniere) */
	.r7t-cell-stat::before {
		content: attr(data-label);
		display: block;
		font-size: 0.68rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--r7t-text-muted);
		margin-bottom: 3px;
		font-weight: 600;
	}

	/* Season Standings (4 stats in row 2: span 3 each on 12-column grid) */
	.r7t-table-season tbody tr .r7t-cell-stat {
		grid-column: span 3 !important;
		grid-row: 2 !important;
	}

	/* Mobile Podium Card Accents (Solid Dark Navy) */
	.r7t-table tbody tr.r7t-rank-gold,
	.r7t-rank-gold {
		border: 1px solid var(--r7t-gold-border) !important;
		background: #1a2a56 !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
	}
	.r7t-rank-gold .r7t-points-pill {
		background: #152244;
		border-color: #fbbf24;
		color: #fbbf24;
	}
	.r7t-rank-gold .r7t-points-suffix {
		color: #fbbf24;
	}
	.r7t-rank-gold .r7t-cell-stat {
		border-color: rgba(245, 158, 11, 0.3) !important;
		background: #0d1733 !important;
	}

	.r7t-table tbody tr.r7t-rank-silver,
	.r7t-rank-silver {
		border: 1px solid var(--r7t-silver-border) !important;
		background: #152348 !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
	}
	.r7t-rank-silver .r7t-points-pill {
		background: #152244;
		border-color: #cbd5e1;
		color: #fbbf24;
	}
	.r7t-rank-silver .r7t-points-suffix {
		color: #fbbf24;
	}
	.r7t-rank-silver .r7t-cell-stat {
		border-color: rgba(203, 213, 225, 0.25) !important;
		background: #0d1733 !important;
	}

	.r7t-table tbody tr.r7t-rank-bronze,
	.r7t-rank-bronze {
		border: 1px solid var(--r7t-bronze-border) !important;
		background: #182242 !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
	}
	.r7t-rank-bronze .r7t-points-pill {
		background: #152244;
		border-color: #fb923c;
		color: #fbbf24;
	}
	.r7t-rank-bronze .r7t-points-suffix {
		color: #fbbf24;
	}
	.r7t-rank-bronze .r7t-cell-stat {
		border-color: rgba(251, 146, 60, 0.3) !important;
		background: #0d1733 !important;
	}

	/* Other ranks points pill */
	.r7t-table tbody tr:not(.r7t-rank-gold):not(.r7t-rank-silver):not(.r7t-rank-bronze) .r7t-points-pill {
		background: rgba(59, 130, 246, 0.14);
		border-color: rgba(59, 130, 246, 0.4);
		color: #93c5fd;
	}
	.r7t-table tbody tr:not(.r7t-rank-gold):not(.r7t-rank-silver):not(.r7t-rank-bronze) .r7t-points-suffix {
		color: #93c5fd;
	}

	.r7t-table-notes {
		padding: 14px 18px;
		font-size: 1.15rem;
		border-radius: 8px;
		gap: 12px;
	}

	.r7t-table-notes .dashicons {
		font-size: 22px;
		width: 22px;
		height: 22px;
		margin-top: 2px;
	}

	.r7t-notes-content {
		line-height: 1.5;
	}
}