/* ============================================================
   LTF CT LIVE RESULTS — Frontend Styles
   Leaderboard + athlete splits + live status stamp.

   Naming mirrors ltf-ws-frontend.css (ltf-webscorer-results)
   so both plugins can coexist on the same page without conflict.
   Prefix: ltf-ct-

   THEMING: All colors reference --ltf-ct-* custom properties.
   The PHP layer (LTF_CT_Style::inline_css_vars) emits a scoped
   override block targeting .ltf-ct-leaderboard,.ltf-ct-splits
   so preset/custom themes are applied without touching this file.
   Dark mode is delivered the same way — no .ltf-ct-theme-dark
   block needed here; ensure no hardcoded colors break it.
   ============================================================ */

/* ------------------------------------------------------------
   CSS Custom Properties
   Default values match the 'ctlive' preset in class-ltf-ct-style.php
   (blue header, white rows, light zebra) so the board looks correct
   even before the PHP override block loads.

   color_map() mapping (setting_key → css-var):
     accent      → --ltf-ct-primary       (live badge, bib label)
     header_bg   → --ltf-ct-header-bg     (table head background)
     header_text → --ltf-ct-header-text   (table head text)
     row_bg      → --ltf-ct-row-bg        (odd rows)
     row_bg_alt  → --ltf-ct-row-bg-alt    (even rows / zebra)
     text        → --ltf-ct-text          (cell text)
     text_light  → --ltf-ct-text-light    (bracket label, stamp)
     border      → --ltf-ct-border        (table + cell borders)
     hover_bg    → --ltf-ct-hover-bg      (row hover)
   ------------------------------------------------------------ */
:root {
	--ltf-ct-primary:         #1c2541;
	--ltf-ct-secondary:       #1c2541;
	--ltf-ct-text:            #1f2933;
	--ltf-ct-text-light:      #777777;
	--ltf-ct-bg:              transparent;
	--ltf-ct-bg-alt:          #f5f6f8;

	--ltf-ct-header-bg:       #1c2541;
	--ltf-ct-header-text:     #ffffff;
	--ltf-ct-border:          #e5e7eb;
	--ltf-ct-hover-bg:        #eef0f3;
	--ltf-ct-row-bg:          #ffffff;
	--ltf-ct-row-bg-alt:      #f5f6f8;

	--ltf-ct-gold-start:      #9a8500;
	--ltf-ct-gold-end:        #b89f00;
	--ltf-ct-silver-start:    #6a6a6a;
	--ltf-ct-silver-end:      #8a8a8a;
	--ltf-ct-bronze-start:    #8a5a2a;
	--ltf-ct-bronze-end:      #a06830;

	--ltf-ct-font:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ltf-ct-radius:          6px;

	--ltf-ct-space-xs:        8px;
	--ltf-ct-space-sm:        10px;
	--ltf-ct-space-md:        20px;
	--ltf-ct-space-lg:        30px;

	/* Live badge dot pulse color — tied to accent */
	--ltf-ct-live-dot:        var(--ltf-ct-primary);
}

/* ------------------------------------------------------------
   LEADERBOARD CONTAINER
   ------------------------------------------------------------ */

.ltf-ct-leaderboard {
	margin: var(--ltf-ct-space-lg) 0;
	font-family: var(--ltf-ct-font);
	background: var(--ltf-ct-bg);
	border-radius: var(--ltf-ct-radius);
}

/* Header row: badge + bracket label + timestamp */
.ltf-ct-leaderboard__header {
	display: flex;
	align-items: center;
	gap: var(--ltf-ct-space-sm);
	margin-bottom: var(--ltf-ct-space-sm);
	flex-wrap: wrap;
}

.ltf-ct-leaderboard__bracket {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ltf-ct-text-light);
}

.ltf-ct-leaderboard__stamp {
	margin-left: auto;
	font-size: 12px;
	color: var(--ltf-ct-text-light);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------------------
   LIVE BADGE  (pulse dot + "Live" label)
   ------------------------------------------------------------ */

.ltf-ct-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ltf-ct-live-dot);
}

.ltf-ct-live-badge__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ltf-ct-live-dot);
	animation: ltf-ct-pulse 1.8s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes ltf-ct-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%       { opacity: 0.4; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
	.ltf-ct-live-badge__dot {
		animation: none;
	}
}

/* ------------------------------------------------------------
   SHARED TABLE BASE  (used by both leaderboard and splits)
   ------------------------------------------------------------ */

.ltf-ct-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ltf-ct-row-bg);
	border: 1px solid var(--ltf-ct-border);
	border-radius: var(--ltf-ct-radius);
	overflow: hidden;
	font-family: var(--ltf-ct-font);
}

.ltf-ct-table thead {
	background: var(--ltf-ct-header-bg);
	color: var(--ltf-ct-header-text);
}

.ltf-ct-table th {
	padding: var(--ltf-ct-space-sm) var(--ltf-ct-space-sm);
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ltf-ct-header-text);
	border: none;
	border-bottom: 2px solid var(--ltf-ct-border);
	border-left: 1px solid rgba(255,255,255,0.12);
	white-space: normal;
	line-height: 1.2;
}

.ltf-ct-table th:first-child {
	border-left: none;
	text-align: center;
}

.ltf-ct-table td {
	padding: var(--ltf-ct-space-sm);
	font-size: 14px;
	color: var(--ltf-ct-text);
	border: none;
	border-bottom: 1px solid var(--ltf-ct-border);
	border-left: 1px solid var(--ltf-ct-border);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ltf-ct-table td:first-child {
	border-left: none;
	text-align: center;
}

.ltf-ct-table tbody tr {
	background: var(--ltf-ct-row-bg);
	transition: background-color 0.15s ease;
}

.ltf-ct-table tbody tr:nth-child(even) {
	background: var(--ltf-ct-row-bg-alt);
}

.ltf-ct-table tbody tr:hover {
	background: var(--ltf-ct-hover-bg);
}

.ltf-ct-table tbody tr:last-child td {
	border-bottom: none;
}

/* ------------------------------------------------------------
   LEADERBOARD TABLE — column widths
   table-layout: fixed so columns stay stable during live updates.

   Strategy: place/bib/time/pace get fixed pixel widths;
   name takes remaining space via auto width. This is resilient
   to columns being conditionally present — removing bib or pace
   just gives more room to name rather than breaking percentage math.
   ------------------------------------------------------------ */

.ltf-ct-table--leaderboard {
	table-layout: fixed;
}

/* Place — narrow, centered */
.ltf-ct-table--leaderboard .ltf-ct-col-place {
	width: 52px;
	text-align: center;
}

/* Bib — narrow, centered, tabular-nums; only present when show_bib=true */
.ltf-ct-table--leaderboard .ltf-ct-col-bib {
	width: 60px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Name — takes remaining space; word-wrap allowed */
.ltf-ct-table--leaderboard .ltf-ct-col-name {
	/* auto (no explicit width — absorbs whatever place+bib+time+pace leave) */
	white-space: normal;
	word-break: break-word;
}

/* Time — moderate width, tabular-nums for alignment */
.ltf-ct-table--leaderboard .ltf-ct-col-time {
	width: 90px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Pace — similar to time; hidden on mobile via .ltf-ct-hide-mobile */
.ltf-ct-table--leaderboard .ltf-ct-col-pace {
	width: 80px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* ------------------------------------------------------------
   SPLITS TABLE — column widths
   ------------------------------------------------------------ */

.ltf-ct-table--splits {
	table-layout: fixed;
}

.ltf-ct-table--splits .ltf-ct-col-checkpoint {
	width: 35%;
	white-space: normal;
	word-break: break-word;
}

.ltf-ct-table--splits .ltf-ct-col-split-time {
	width: 25%;
	font-variant-numeric: tabular-nums;
}

.ltf-ct-table--splits .ltf-ct-col-split-rank {
	width: 15%;
	text-align: center;
}

.ltf-ct-table--splits .ltf-ct-col-split-pace {
	width: 25%;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   PODIUM ROW HIGHLIGHTING
   Three modes emitted on the container by LTF_CT_Style::podium_class():
     .ltf-ct-podium-medal   → full gold/silver/bronze gradient rows (current look)
     .ltf-ct-podium-subtle  → restrained: accent left-border + faint tint on #1,
                              lighter touch on #2-3; no full-row color fill
     .ltf-ct-podium-none    → no special row treatment

   Row classes .ltf-ct-gold/.ltf-ct-silver/.ltf-ct-bronze are always emitted
   by PHP on rows 1-3; their visual effect is gated by the container mode below.

   NOTE: hardcoded #ffffff text on medal-mode gradient rows is intentional —
   medal mode is an explicit choice and the contrast is required against dark
   gradient backgrounds. All other colors remain variable-driven.
   ------------------------------------------------------------ */

/* ---- MEDAL mode: full gradient rows ---- */
.ltf-ct-podium-medal .ltf-ct-gold {
	background: linear-gradient(135deg, var(--ltf-ct-gold-start) 0%, var(--ltf-ct-gold-end) 100%) !important;
	color: #ffffff !important;
}

.ltf-ct-podium-medal .ltf-ct-silver {
	background: linear-gradient(135deg, var(--ltf-ct-silver-start) 0%, var(--ltf-ct-silver-end) 100%) !important;
	color: #ffffff !important;
}

.ltf-ct-podium-medal .ltf-ct-bronze {
	background: linear-gradient(135deg, var(--ltf-ct-bronze-start) 0%, var(--ltf-ct-bronze-end) 100%) !important;
	color: #ffffff !important;
}

.ltf-ct-podium-medal .ltf-ct-gold td,
.ltf-ct-podium-medal .ltf-ct-silver td,
.ltf-ct-podium-medal .ltf-ct-bronze td {
	color: #ffffff !important;
}

/* ---- SUBTLE mode: accent left-border, faint tint on row 1; lighter on 2-3 ---- */

/* Row 1 (gold position): solid accent left-border + accent-tinted background */
.ltf-ct-podium-subtle .ltf-ct-gold {
	border-left: 3px solid var(--ltf-ct-primary) !important;
	background: var(--ltf-ct-hover-bg) !important;
}

.ltf-ct-podium-subtle .ltf-ct-gold td:first-child {
	border-left: none !important;
}

/* Rows 2-3 (silver/bronze positions): hairline left accent only */
.ltf-ct-podium-subtle .ltf-ct-silver,
.ltf-ct-podium-subtle .ltf-ct-bronze {
	border-left: 3px solid var(--ltf-ct-border) !important;
}

.ltf-ct-podium-subtle .ltf-ct-silver td:first-child,
.ltf-ct-podium-subtle .ltf-ct-bronze td:first-child {
	border-left: none !important;
}

/* Subtle mode: no text-color override — inherits --ltf-ct-text (stays readable in dark) */

/* ---- NONE mode: no treatment (gold/silver/bronze classes have no effect) ---- */
/* No rules needed — absence of a rule is the rule. */

/* ------------------------------------------------------------
   SPLITS CONTAINER
   ------------------------------------------------------------ */

.ltf-ct-splits {
	margin: var(--ltf-ct-space-lg) 0;
	font-family: var(--ltf-ct-font);
}

.ltf-ct-splits__header {
	display: flex;
	align-items: center;
	gap: var(--ltf-ct-space-sm);
	margin-bottom: var(--ltf-ct-space-sm);
}

.ltf-ct-splits__bib {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ltf-ct-primary);
}

.ltf-ct-splits__label {
	font-size: 13px;
	color: var(--ltf-ct-text-light);
	font-weight: 500;
}

/* ------------------------------------------------------------
   ERROR + EMPTY STATE
   ------------------------------------------------------------ */

.ltf-ct-error {
	padding: var(--ltf-ct-space-md);
	border: 1px solid var(--ltf-ct-border);
	border-radius: var(--ltf-ct-radius);
	color: var(--ltf-ct-text-light);
	font-style: italic;
	text-align: center;
	background: var(--ltf-ct-bg-alt);
}

.ltf-ct-no-results {
	padding: var(--ltf-ct-space-lg) var(--ltf-ct-space-md);
	text-align: center;
	color: var(--ltf-ct-text-light);
	font-style: italic;
}

/* When no-results is a table cell */
td.ltf-ct-no-results {
	padding: var(--ltf-ct-space-lg) var(--ltf-ct-space-md);
}

/* ------------------------------------------------------------
   RESPONSIVE — 768px breakpoint (mirrors ltf-ws-frontend.css)
   ------------------------------------------------------------ */

@media screen and (max-width: 768px) {

	.ltf-ct-leaderboard,
	.ltf-ct-splits {
		margin: var(--ltf-ct-space-md) 0;
	}

	.ltf-ct-table th,
	.ltf-ct-table td {
		padding: var(--ltf-ct-space-xs);
		font-size: 13px;
	}

	/* Fixed pixel columns scale down on mobile */
	.ltf-ct-table--leaderboard .ltf-ct-col-place {
		width: 40px;
	}

	.ltf-ct-table--leaderboard .ltf-ct-col-bib {
		width: 48px;
	}

	.ltf-ct-table--leaderboard .ltf-ct-col-time {
		width: 76px;
	}

	.ltf-ct-table--leaderboard .ltf-ct-col-pace {
		width: 68px;
	}

	/* Hide Pace column on mobile (marked ltf-ct-hide-mobile) */
	.ltf-ct-hide-mobile {
		display: none !important;
	}

	/* When pace is hidden, splits columns redistribute */
	.ltf-ct-table--splits .ltf-ct-col-checkpoint {
		width: 45%;
	}

	.ltf-ct-table--splits .ltf-ct-col-split-time {
		width: 32%;
	}

	.ltf-ct-table--splits .ltf-ct-col-split-rank {
		width: 23%;
	}

	.ltf-ct-leaderboard__stamp {
		font-size: 11px;
	}

}

@media screen and (max-width: 480px) {

	.ltf-ct-leaderboard__header {
		gap: var(--ltf-ct-space-xs);
	}

	.ltf-ct-table--leaderboard .ltf-ct-col-place {
		width: 36px;
	}

	.ltf-ct-table--leaderboard .ltf-ct-col-bib {
		width: 44px;
	}

	.ltf-ct-table--leaderboard .ltf-ct-col-time {
		width: 72px;
	}

}

/* ------------------------------------------------------------
   PRINT
   ------------------------------------------------------------ */

@media print {

	.ltf-ct-leaderboard,
	.ltf-ct-splits {
		page-break-inside: avoid;
	}

	.ltf-ct-live-badge__dot {
		animation: none;
	}

	.ltf-ct-leaderboard__stamp {
		display: none;
	}

	.ltf-ct-table tbody tr:hover {
		background: transparent;
	}

	/* Suppress podium-subtle border-left treatment in print */
	.ltf-ct-podium-subtle .ltf-ct-gold,
	.ltf-ct-podium-subtle .ltf-ct-silver,
	.ltf-ct-podium-subtle .ltf-ct-bronze {
		border-left: none !important;
	}

}

/* ============================================
   FULL-FIELD SEARCH (ctlive_leaderboard search="true")
   ============================================ */
.ltf-ct-leaderboard__search-wrap {
	margin: var(--ltf-ct-space-md, 16px) 0;
}

.ltf-ct-leaderboard__search {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	font-size: 16px;
	font-family: var(--ltf-ct-font, inherit);
	color: var(--ltf-ct-text, #1a1a28);
	background: var(--ltf-ct-row-bg, #ffffff);
	border: 2px solid var(--ltf-ct-border, #e0e0e0);
	border-radius: var(--ltf-ct-radius, 8px);
	outline: none;
	transition: border-color 0.2s ease;
}

.ltf-ct-leaderboard__search::placeholder {
	color: var(--ltf-ct-text-light, #666666);
}

.ltf-ct-leaderboard__search:focus {
	border-color: var(--ltf-ct-primary, #c2a14d);
}

.ltf-ct-search-nomatch {
	margin: var(--ltf-ct-space-md, 16px) 0 0;
	text-align: center;
	font-style: italic;
	color: var(--ltf-ct-text-light, #666666);
}

/* ============================================
   DISTANCE SELECTOR TABS (ctlive_leaderboard races="…" / event_id="…")
   ============================================ */
.ltf-ct-leaderboard__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--ltf-ct-space-md, 16px);
}

.ltf-ct-leaderboard__tab {
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	font-family: var(--ltf-ct-font, inherit);
	color: var(--ltf-ct-text, #1a1a28);
	background: var(--ltf-ct-row-bg, #ffffff);
	border: 2px solid var(--ltf-ct-border, #e0e0e0);
	border-radius: var(--ltf-ct-radius, 8px);
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ltf-ct-leaderboard__tab:hover {
	border-color: var(--ltf-ct-primary, #c2a14d);
	color: var(--ltf-ct-primary, #c2a14d);
}

.ltf-ct-leaderboard__tab.is-active {
	background: var(--ltf-ct-primary, #c2a14d);
	border-color: var(--ltf-ct-primary, #c2a14d);
	color: var(--ltf-ct-header-text, #ffffff);
}

/* ============================================================
   Race Splits — rich per-athlete view (matches CT microsite)
   ============================================================ */
.ltf-ct-splits__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Keep the 8 columns readable: don't squish — scroll horizontally if the
   container (not just the viewport) is narrow. */
.ltf-ct-table--racesplits { width: 100%; min-width: 720px; }
.ltf-ct-table--racesplits .ltf-ct-col-checkpoint { min-width: 150px; }
.ltf-ct-table--racesplits .ltf-ct-col-dist { width: 68px; }
.ltf-ct-table--racesplits .ltf-ct-col-rk { width: 66px; }
.ltf-ct-table--racesplits .ltf-ct-col-tod { width: 118px; }
.ltf-ct-table--racesplits .ltf-ct-col-split-pace { width: 64px; }
.ltf-ct-table--racesplits .ltf-ct-col-split-time { width: 86px; }
.ltf-ct-table--racesplits th { vertical-align: bottom; line-height: 1.2; white-space: nowrap; }
.ltf-ct-table--racesplits td { white-space: nowrap; }
.ltf-ct-table--racesplits th small {
	display: block;
	font-weight: 400;
	font-size: .74em;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ltf-ct-text-light, #6b7280);
	margin-top: 2px;
}
.ltf-ct-table--racesplits .ltf-ct-col-dist,
.ltf-ct-table--racesplits .ltf-ct-col-rk,
.ltf-ct-table--racesplits .ltf-ct-col-tod,
.ltf-ct-table--racesplits .ltf-ct-col-split-pace { text-align: center; }
.ltf-ct-table--racesplits .ltf-ct-col-split-time { text-align: right; font-weight: 800; }
.ltf-ct-table--racesplits .ltf-ct-col-checkpoint { font-weight: 600; white-space: nowrap; }

/* pending (not-yet-crossed) mats: muted */
.ltf-ct-table--racesplits tr.is-pending td { color: var(--ltf-ct-text-light, #9aa1ad); }
.ltf-ct-dash { color: var(--ltf-ct-text-light, #c2c7d0); }

/* current (furthest-crossed) mat: highlighted like CT (left accent + tint) */
.ltf-ct-table--racesplits tr.is-current td { background: var(--ltf-ct-hover-bg, #eef1f6); }
.ltf-ct-table--racesplits tr.is-current td:first-child { box-shadow: inset 4px 0 0 var(--ltf-ct-header-bg, #243056); }

/* time of day + relative "ago" */
.ltf-ct-tod { display: block; }
.ltf-ct-ago { display: block; font-size: .8em; color: #1c8c4a; margin-top: 1px; }

/* view-on-CT link */
.ltf-ct-splits__track {
	display: inline-block;
	margin-top: 12px;
	font-weight: 700;
	color: var(--ltf-ct-primary, #243056);
	text-decoration: none;
}
.ltf-ct-splits__track:hover { text-decoration: underline; }

/* Race-splits responsive by CONTAINER width (not viewport): a narrow column —
   e.g. the athlete-profile content column — drops the detail columns and keeps
   Split + ranks + Time, so nothing is cut off. A full-width page shows all 8. */
.ltf-ct-splits { container-type: inline-size; }
@container (max-width: 720px) {
	.ltf-ct-table--racesplits { min-width: 0; }
	.ltf-ct-table--racesplits .ltf-ct-col-dist,
	.ltf-ct-table--racesplits .ltf-ct-col-tod,
	.ltf-ct-table--racesplits .ltf-ct-col-split-pace { display: none; }
}