/* ==========================================================================
   live_big.css — LED / veliki ekran prikaz live timinga
   Dinamične veličine (fontovi ovisni o config/scale) dolaze kroz CSS varijable
   definirane inline u live_big.php (:root { --xxx: ...px; })
   ========================================================================== */

body {
	background: #000000 !important;
	color: #FFFFFF !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- Header s nazivom utrke ---------- */
#race-name-header {
	width: 100%;
	background: #000000;
	padding: 12px 20px;
	text-align: center;
	font-size: var(--race-name-size) !important;
	color: #FFFFFF !important;
	font-weight: 900 !important;
	border-bottom: 3px solid #FFD700;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin: 0;
}

/* ---------- Sat u gornjem desnom kutu ---------- */
#led-clock {
	position: fixed;
	top: 10px;
	right: 20px;
	font-size: var(--clock-size) !important;
	color: #FFFFFF !important;
	font-weight: 900 !important;
	font-family: 'Courier New', monospace !important;
	background: #000000 !important;
	padding: 6px 14px !important;
	border: 2px solid #FFFFFF !important;
	z-index: 99998 !important;
	opacity: 1 !important;
	transition: opacity 0.5s ease !important;
}
#led-clock.hidden {
	opacity: 0 !important;
	transform: translateX(120%) !important;
	pointer-events: none !important;
}

/* ---------- Box "Zadnji u cilju" ---------- */
#last-finisher-box {
	width: 100%;
	background: #000000;
	padding: 12px 20px;
	margin: 0;
	border-bottom: 4px solid #00FF00;
	text-align: center;
}

#finisher-title {
	font-size: var(--finisher-title-size) !important;
	color: #00FF00 !important;
	font-weight: 900 !important;
	margin: 0 0 10px 0 !important;
	letter-spacing: 4px !important;
	text-transform: uppercase;
	text-shadow: 0 0 25px rgba(0, 255, 0, 0.6);
}

#finisher-container {
	max-width: 1200px;
	margin: 0 auto;
	background: linear-gradient(135deg, #111111, #0a220a);
	border: 4px solid #00FF00;
	border-radius: 15px;
	padding: 20px 25px;
	box-shadow: 0 0 40px rgba(0, 255, 0, 0.2);
}

#finisher-row1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid #333333;
	padding-bottom: 12px;
	margin-bottom: 15px;
	width: 100%;
}

#finisher-name-block {
	text-align: left;
}

#finisher-name {
	font-size: var(--finisher-name-size) !important;
	color: #FFFFFF !important;
	font-weight: 900 !important;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#finisher-name span.finisher-bib {
	color: #FFFF00 !important;
	background: #222200;
	padding: 2px 14px;
	border-radius: 6px;
	border: 2px solid #FFFF00;
	margin-right: 15px;
	display: inline-block;
}

#finisher-club {
	font-size: var(--finisher-club-size) !important;
	color: #FFD700 !important;
	font-weight: 800 !important;
	text-align: center;
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#finisher-cat {
	font-size: var(--finisher-cat-size) !important;
	color: #00FFFF !important;
	font-weight: 800;
	background: #002222;
	padding: 4px 16px;
	border: 2px solid #00FFFF;
	border-radius: 8px;
	text-align: right;
	text-transform: uppercase;
}

#finisher-times-row {
	display: flex;
	width: 100%;
	justify-content: space-between;
	gap: 15px;
	margin-top: 5px;
}

.time-block {
	flex: 1;
	background: #000000;
	border: 2px solid #555555;
	border-radius: 8px;
	padding: 10px 12px;
	text-align: center;
}

.time-block.featured {
	border: 2px solid #FFD700;
	background: #050500;
}

.time-block-label {
	font-size: var(--time-label-size) !important;
	color: #AAAAAA;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 6px;
	letter-spacing: 1px;
}

.time-block.featured .time-block-label {
	color: #FFD700;
}

.time-block-value {
	font-size: var(--time-value-size) !important;
	color: #FFFFFF !important;
	font-weight: 900 !important;
	font-family: 'Courier New', monospace !important;
}

.time-block.featured .time-block-value {
	font-size: var(--time-value-featured-size) !important;
	color: #00FF00 !important;
	text-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
}

.time-block-value.status-out {
	color: #FF3333 !important;
	text-shadow: 0 0 15px rgba(255, 51, 51, 0.7) !important;
}

/* ---------- Tablica rezultata ---------- */
table {
	width: 100% !important;
	border-collapse: collapse !important;
	background: #000000 !important;
	table-layout: auto !important;
	counter-reset: led-poredak;
}

#container_live, #container_ranking {
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow-x: auto !important;
}

thead th {
	background: #222222 !important;
	color: #FFD700 !important;
	font-size: var(--table-header-size) !important;
	font-weight: 900 !important;
	padding: var(--table-padding-px) 10px !important;
	text-align: center !important;
	border: 3px solid #444444 !important;
	text-transform: uppercase !important;
}

/* Generirana kolona "POZ." (zamjenjuje skriveni originalni rank iz baze) */
table#table_ranking thead tr::before {
	content: "POZ." !important;
	display: table-cell !important;
	background: #111111 !important;
	color: #FFFF00 !important;
	font-size: var(--table-header-size) !important;
	font-weight: 900 !important;
	padding: var(--table-padding-px) 10px !important;
	text-align: center !important;
	border: 3px solid #444444 !important;
	width: 100px !important;
	vertical-align: middle !important;
}

table#table_ranking tbody tr::before {
	counter-increment: led-poredak;
	content: counter(led-poredak) !important;
	display: table-cell !important;
	font-size: var(--table-rank-size) !important;
	font-weight: 900 !important;
	text-align: center !important;
	color: #FFFF00 !important;
	background: #050505 !important;
	padding: var(--table-padding-px) 10px !important;
	border: 2px solid #333333 !important;
	border-right: 4px solid #FFD700 !important;
	width: 100px !important;
	vertical-align: middle !important;
	text-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
}

/* Sakrij originalni prvi stupac (rank iz baze) */
table#table_ranking thead th:first-child,
table#table_ranking tbody td:first-child {
	display: none !important;
}

/* jQuery Mobile columntoggle sakriva stupce niskog prioriteta - vraćamo ih natrag,
   dinamička detekcija (live_big.js) preuzima kontrolu nad time što se prikazuje */
table#table_ranking th.ui-table-cell-hidden,
table#table_ranking td.ui-table-cell-hidden {
	display: table-cell !important;
}

tbody tr { background: #1a1a1a !important; border-bottom: 2px solid #333 !important; }
tbody tr:nth-child(odd) { background: #0a0a0a !important; }

tbody td {
	padding: var(--table-padding-px) 10px !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	border: 2px solid #333 !important;
	text-align: center !important;
}

tbody td.led-bib {
	font-size: var(--table-bib-size) !important;
	text-align: center !important;
	width: 110px !important;
	font-weight: 900 !important;
	background: #FFFF00 !important;
	color: #000000 !important;
}

tbody td.led-name {
	font-size: var(--table-name-size) !important;
	font-weight: 900 !important;
	color: #FFFFFF !important;
	text-align: left !important;
	padding-left: 20px !important;
}

tbody td.led-time {
	font-family: 'Courier New', monospace !important;
	font-size: var(--table-time-size) !important;
	font-weight: 900 !important;
	text-align: center !important;
	min-width: 140px !important;
	color: #FFFFFF !important;
}

tbody td.led-time-total {
	color: #00FF00 !important;
	text-shadow: 0 0 15px rgba(0, 255, 0, 0.7) !important;
}

tbody td.led-status {
	color: #FF3333 !important;
	text-shadow: 0 0 10px rgba(255, 51, 51, 0.6) !important;
}

/* ---------- Elementi koje ne želimo na big-screenu ---------- */
#live_navigation, #container_navigation_epreuve, #img_message, #message,
#bandeau_live_nom, br, thead.rupture1, thead.rupture3, thead.rupture2,
tbody#start, tbody#inrace, tbody#finish, thead.rupture, tbody#podium {
	display: none !important;
}
img[src*="16x16"], img[src*="gornjacrta"], img[src*="donjacrta"], footer h6, footer img {
	display: none !important;
}

/* ---------- Gumb "NORMAL" (povratak na standardni prikaz) ---------- */
a[href*="live.php"] {
	position: fixed !important;
	top: 20px !important;
	left: 30px !important;
	background: #00CC00 !important;
	color: #FFFFFF !important;
	padding: 15px 30px !important;
	font-size: 32px !important;
	font-weight: 900 !important;
	text-decoration: none !important;
	border-radius: 10px !important;
	border: 3px solid #FFFFFF !important;
	z-index: 99998 !important;
	opacity: 1 !important;
	transition: opacity 0.5s ease !important;
}
a[href*="live.php"].hidden {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ---------- Scale kontrole (donji desni kut) ---------- */
#scale-controls {
	position: fixed !important;
	bottom: 30px !important;
	right: 30px !important;
	background: linear-gradient(135deg, #667eea, #764ba2) !important;
	padding: 20px !important;
	border-radius: 15px !important;
	border: 3px solid #FFFFFF !important;
	z-index: 99999 !important;
	opacity: 1 !important;
	transition: opacity 0.5s ease, transform 0.5s ease !important;
}
#scale-controls.hidden {
	opacity: 0 !important;
	transform: translateX(120%) !important;
	pointer-events: none !important;
}
.scale-buttons button {
	background: #FFFFFF !important;
	color: #667eea !important;
	border: none !important;
	padding: 12px 20px !important;
	font-size: 28px !important;
	font-weight: 900 !important;
	border-radius: 8px !important;
	cursor: pointer !important;
}
#scale-display {
	color: #FFD700 !important;
	font-size: 32px !important;
	font-weight: 900 !important;
	min-width: 80px !important;
	text-align: center !important;
}

/* ---------- Sakrij dark-mode gumb (dolazi iz page.php parent::Script(),
   nepotreban je na LED prikazu koji je uvijek crn) ---------- */
#darkModeToggle,
.no-js-dark-mode {
	display: none !important;
}

/* ---------- Flash animacije kod novog finišera ---------- */
@keyframes newFlash {
	0%, 100% { border-color: #00FF00; box-shadow: 0 0 40px rgba(0, 255, 0, 0.2); }
	50%      { border-color: #FFFF00; box-shadow: 0 0 60px rgba(255, 255, 0, 0.8); }
}
@keyframes redFlash {
	0%, 100% { border-color: #FF3333; box-shadow: 0 0 40px rgba(255, 51, 51, 0.2); }
	50%      { border-color: #FFFF00; box-shadow: 0 0 60px rgba(255, 255, 0, 0.8); }
}
.flash-effect     { animation: newFlash 1.5s ease-in-out 2; }
.flash-effect-red { animation: redFlash 1.5s ease-in-out 2; }