/* ==========================================================================
   Football Pool Better Ranking Page – fpbrp.css
   Augmented ranking table + tooltip styles.
   Base table appearance is inherited from the core pool-css stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */
.fpbrp-wrapper {
	overflow-x: visible;
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */
.fpbrp-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.82em;
	table-layout: fixed;
}

.fpbrp-table thead tr {
	background-color: #2c3e50;
	color: #ffffff;
}

.fpbrp-table thead th {
	padding: 5px 4px;
	text-align: center;
	font-weight: 600;
	white-space: normal;
	word-break: break-word;
	vertical-align: bottom;
	line-height: 1.2;
	font-size: 0.9em;
}

.fpbrp-table thead th.user-name {
	text-align: left !important;
	padding-left: 0 !important;
}

.fpbrp-table thead th small {
	font-size: 0.75em;
	font-weight: 400;
	opacity: 0.85;
	display: block;
}

.fpbrp-table tbody tr.odd {
	background-color: #f8f9fa;
}

.fpbrp-table tbody tr.even {
	background-color: #ffffff;
}

.fpbrp-table tbody tr.currentuser {
	background-color: #fff9e6;
	font-weight: 600;
}

.fpbrp-table tbody tr:hover {
	background-color: #eef4fb;
}

.fpbrp-table td {
	padding: 6px 5px;
	text-align: center;
	border-bottom: 1px solid #e9ecef;
	vertical-align: middle;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fpbrp-table td.user-rank {
	color: #6c757d;
	font-size: 0.85em;
	width: 2em;
}

.fpbrp-table td.user-name {
	text-align: left !important;
	padding-left: 0 !important;
	white-space: nowrap;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fpbrp-table td.user-name a {
	color: #2c3e50;
	text-decoration: none;
}

.fpbrp-table td.user-name a:hover {
	text-decoration: underline;
	color: #3498db;
}

/* Points cells */
.fpbrp-table td.fpbrp-pts {
	color: #495057;
	font-variant-numeric: tabular-nums;
}

/* Total points */
.fpbrp-table td.user-score.ranking.score {
	font-weight: 700;
	color: #2c3e50;
	font-size: 1em;
}

/* --------------------------------------------------------------------------
   Match-count cells (the hoverable ones)
   -------------------------------------------------------------------------- */
.fpbrp-table td.fpbrp-count {
	color: #6c757d;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

.fpbrp-table td.fpbrp-has-tooltip {
	cursor: help;
	color: #2980b9;
	font-weight: 600;
	text-decoration: underline dotted #2980b9;
	text-underline-offset: 2px;
	outline: none;
}

.fpbrp-table td.fpbrp-has-tooltip:hover,
.fpbrp-table td.fpbrp-has-tooltip:focus {
	color: #1a5276;
	text-decoration: underline solid #1a5276;
}

/* --------------------------------------------------------------------------
   Category separators:
   – darker 1px dotted between the pts and count columns of the SAME category
   – lighter 1px dotted between the count column and the NEXT pts column
   -------------------------------------------------------------------------- */

/* Left border of each pts (first) column = lighter separator from previous group */
.fpbrp-table th.fpbrp-th-pts-full,
.fpbrp-table td.fpbrp-pts-full,
.fpbrp-table th.fpbrp-th-pts-toto,
.fpbrp-table td.fpbrp-pts-toto,
.fpbrp-table th.fpbrp-th-pts-goal_bonus,
.fpbrp-table td.fpbrp-pts-goal_bonus,
.fpbrp-table th.fpbrp-th-pts-diff_bonus,
.fpbrp-table td.fpbrp-pts-diff_bonus {
	border-left: 1px dotted #b0bec5;
}

/* Left border of each count column = darker separator within the same category */
.fpbrp-table th.fpbrp-th-count-full,
.fpbrp-table td.fpbrp-count-full,
.fpbrp-table th.fpbrp-th-count-toto,
.fpbrp-table td.fpbrp-count-toto,
.fpbrp-table th.fpbrp-th-count-goal_bonus,
.fpbrp-table td.fpbrp-count-goal_bonus,
.fpbrp-table th.fpbrp-th-count-diff_bonus,
.fpbrp-table td.fpbrp-count-diff_bonus {
	border-left: 1px dotted #607d8b;
}

/* --------------------------------------------------------------------------
   Tooltip container
   -------------------------------------------------------------------------- */
#fpbrp-tooltip {
	position: fixed !important;
	z-index: 99999 !important;
	max-width: 640px !important;
	min-width: 380px !important;
	background: #1e2a38 !important;
	background-color: #1e2a38 !important;
	color: #ecf0f1 !important;
	border-radius: 6px !important;
	padding: 6px !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
	pointer-events: none !important;
	font-size: 1em !important;
	line-height: 1.4 !important;
	display: none !important;
}

#fpbrp-tooltip.fpbrp-tooltip-visible {
	display: block !important;
}

/* Arrow (optional decorative pointer, shown via ::before) */
#fpbrp-tooltip::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 14px;
	border: 6px solid transparent;
	border-bottom-color: #1e2a38;
}

#fpbrp-tooltip.fpbrp-arrow-below::before {
	bottom: auto;
	top: 100%;
	border-bottom-color: transparent;
	border-top-color: #1e2a38;
}

/* Force all text inside the tooltip to be light, defeating any theme td/a overrides */
#fpbrp-tooltip * {
	color: #ecf0f1 !important;
	background: transparent !important;
	background-color: transparent !important;
	border-color: rgba(255,255,255,0.15) !important;
	box-shadow: none !important;
}

/* Restore even-row subtle tint after the wildcard reset */
#fpbrp-tooltip .fpbrp-tooltip-table tr:nth-child(even) td {
	background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Title inside tooltip */
.fpbrp-tooltip-title {
	font-weight: 700 !important;
	font-size: 1em !important;
	margin: 0 0 4px 0 !important;
	padding: 0 0 4px 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: #cfd8dc !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

/* Match list table inside tooltip */
.fpbrp-tooltip-table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 0 !important;
	padding: 0 !important;
}

.fpbrp-tooltip-table th {
	color: #cfd8dc !important;
	font-weight: 600 !important;
	font-size: 0.9em !important;
	padding: 2px 4px !important;
	margin: 0 !important;
	text-align: left !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
	white-space: nowrap !important;
	background: transparent !important;
}

.fpbrp-tooltip-table td {
	padding: 3px 4px !important;
	margin: 0 !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
	border: none !important;
	background: transparent !important;
	line-height: 1.3 !important;
}

.fpbrp-tooltip-match,
.fpbrp-tooltip-match * {
	color: #ffffff !important;
	font-weight: 700 !important;
}

.fpbrp-tooltip-pred,
.fpbrp-tooltip-pred * {
	color: #f5a623 !important;
	font-weight: 600 !important;
}

.fpbrp-tooltip-actual,
.fpbrp-tooltip-actual * {
	color: #2ecc71 !important;
	font-weight: 600 !important;
}

.fpbrp-tooltip-sep,
.fpbrp-tooltip-sep * {
	color: #90a4ae !important;
	padding: 0 !important;
}

/* Responsive: narrow tooltip on small screens */
@media ( max-width: 480px ) {
	#fpbrp-tooltip {
		max-width: calc( 100vw - 24px );
	}
}