/* =========================================================
   Sport Event Timeline – Frontend Styles
   ========================================================= */

/* ── Variables ── */
.sport-event-timeline {
	--set-border:       #e0e0e0;
	--set-bg:           #f7f7f7;
	--set-text:         #2c3338;
	--set-muted:        #646970;
	--set-label-w:      180px;
	--set-row-h:        38px;
	--set-bar-radius:   5px;
	--set-header-color: #2c3338;

	font-family: inherit;
	color: var(--set-text);
}

.set-notice {
	color: var(--set-muted);
	font-style: italic;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.set-section-title {
	font-size: 1.25em;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--set-text);
}

/* =========================================================
   VISUAL TIMELINE
   ========================================================= */

.set-tl-wrap {
	margin-bottom: 48px;
}

.set-tl {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Shared two-column layout: label | bar area */
.set-tl-axis-row,
.set-tl-row {
	display: flex;
	align-items: stretch;
}

.set-tl-label-cell {
	width: var(--set-label-w);
	min-width: var(--set-label-w);
	max-width: var(--set-label-w);
	flex-shrink: 0;
	padding: 6px 10px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fafafa;
	border-right: 1px solid var(--set-border);
	box-sizing: border-box;
	word-break: break-word;
}

.set-tl-bar-area {
	position: relative;
	flex: 1;
	min-width: 360px;
	height: var(--set-row-h);
	background: var(--set-bg);
	overflow: hidden;
}

/* Axis row */
.set-tl-axis-row {
	border-bottom: 2px solid var(--set-border);
}

.set-tl-axis-area {
	background: #fff;
	overflow: visible;
}

.set-tl-axis-label {
	background: #fff;
	border-right-color: transparent;
}

.set-tl-axis-tick {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 11px;
	color: var(--set-muted);
	white-space: nowrap;
	line-height: 1;
}

/* First/last ticks stay inside the bar area instead of overflowing its
   edges (which would otherwise trigger an unwanted horizontal scrollbar). */
.set-tl-axis-tick-first {
	transform: translate(0, -50%);
}

.set-tl-axis-tick-last {
	transform: translate(-100%, -50%);
}

/* Day wrapper */
.set-tl-day {
	margin-bottom: 16px;
	border: 1px solid var(--set-border);
	border-radius: 6px;
}

.set-tl-day-header {
	display: flex;
	align-items: stretch;
}

.set-tl-day-header .set-tl-label-cell {
	background: var(--set-header-color);
	color: #fff;
	border-right-color: rgba(255,255,255,.15);
}

.set-tl-day-header .set-tl-bar-area {
	background: var(--set-header-color);
	display: flex;
	align-items: center;
}

.set-tl-day-name {
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding-left: 12px;
}

/* Discipline rows */
.set-tl-row {
	border-top: 1px solid var(--set-border);
	min-height: var(--set-row-h);
}

.set-tl-row .set-tl-bar-area {
	background: #fff;
}

/* Grid lines */
.set-tl-grid {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(0,0,0,.07);
	pointer-events: none;
}

/* Bars */
.set-tl-bar {
	position: absolute;
	top: 5px;
	height: calc(100% - 10px);
	border-radius: var(--set-bar-radius);
	display: flex;
	align-items: center;
	padding: 0 7px;
	min-width: 2px;
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
	overflow: hidden;
	transition: opacity .2s;
	cursor: default;
}

.set-tl-bar:hover {
	opacity: .82;
}

.set-tl-bar-label {
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Siegerehrung icon marker – shown inline in the discipline's own row,
   fixed pixel size (not proportional) so it stays clearly visible on mobile. */
.set-tl-se-icon {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	min-width: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 2px #fff;
	z-index: 2;
}

/* =========================================================
   DAY TABLES
   ========================================================= */

.set-tables-wrap {
	margin-top: 40px;
}

.set-day-table {
	margin-bottom: 48px;
}

.set-day-heading {
	font-size: 1.15em;
	font-weight: 700;
	color: var(--set-text);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--set-text);
}

.set-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.set-sched-view-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 520px;
}

/* Column widths */
.set-col-bewerb {
	width: 22%;
	min-width: 140px;
}

.set-col-slot {
	width: 26%;
	min-width: 130px;
}

/* Header */
.set-sched-view-table thead th {
	background: var(--set-header-color);
	color: #fff;
	padding: 10px 14px;
	text-align: left;
	font-size: 13px;
	font-weight: 700;
	vertical-align: bottom;
	border: 1px solid rgba(255,255,255,.1);
}

.set-slot-range {
	display: block;
	font-size: 11px;
	font-weight: 400;
	opacity: .75;
	margin-top: 2px;
}

/* Cells */
.set-sched-view-table tbody td {
	border: 1px solid var(--set-border);
	padding: 8px 12px;
	vertical-align: middle;
}

/* Bewerb column */
.set-col-bewerb {
	font-weight: 500;
}

.set-bewerb-inner {
	display: flex;
	align-items: center;
	gap: 8px;
}

.set-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.set-bewerb-name {
	font-size: 13px;
}

.set-tl-label-cell a,
.set-bewerb-name a {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 2px;
}

.set-tl-label-cell a:hover,
.set-bewerb-name a:hover {
	text-decoration-style: solid;
}

/* Bar track inside slot cells */
.set-bar-track {
	position: relative;
	height: 20px;
	background: #f0f0f0;
	border-radius: 10px;
	overflow: hidden;
}

.set-bar {
	position: absolute;
	top: 0;
	height: 100%;
	border-radius: 10px;
	min-width: 3px;
	transition: opacity .2s;
	cursor: default;
}

.set-bar:hover {
	opacity: .8;
}

/* Siegerehrung icon marker inside a slot cell's bar track – shown inline
   next to the discipline's own bar(s), fixed pixel size for mobile visibility. */
.set-se-icon-badge {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	min-width: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 2px #fff;
	z-index: 2;
}

/* Icons */
.set-icon {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: #fff;
}

.set-icon-sm {
	font-size: 12px;
	width: 12px;
	height: 12px;
}

.set-icon-img {
	object-fit: contain;
	display: block;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {
	.sport-event-timeline {
		--set-label-w: 110px;
		--set-row-h:   34px;
	}

	.set-tl-label-cell {
		font-size: 11px;
		padding: 5px 7px;
	}

	.set-tl-bar-label {
		font-size: 10px;
	}

	.set-day-heading {
		font-size: 1em;
	}

	.set-sched-view-table thead th,
	.set-sched-view-table tbody td {
		padding: 6px 8px;
		font-size: 12px;
	}

	.set-bewerb-name {
		font-size: 12px;
	}
}

/* Very narrow phones – never force horizontal scrolling; shrink instead.
   Tested down to 400px viewport width. */
@media (max-width: 480px) {
	.sport-event-timeline {
		--set-label-w: 64px;
		--set-row-h:   30px;
	}

	/* Timeline: let the bar area shrink to fill whatever space remains
	   next to the label column, instead of forcing a 360px minimum that
	   triggers a horizontal scrollbar. */
	.set-tl-bar-area {
		min-width: 0;
	}

	.set-tl-label-cell {
		font-size: 10px;
		padding: 4px 5px;
		gap: 4px;
	}

	.set-tl-day-name {
		font-size: 12px;
		padding-left: 6px;
	}

	.set-tl-axis-tick {
		font-size: 9px;
	}

	.set-tl-bar {
		padding: 0 4px;
	}

	.set-tl-bar-label {
		font-size: 9px;
	}

	.set-tl-se-icon {
		width: 20px;
		height: 20px;
		min-width: 20px;
	}

	/* Day tables: switch to a fixed layout that always fits the viewport
	   width instead of relying on a wide min-width + horizontal scroll. */
	.set-sched-view-table {
		min-width: 0;
		width: 100%;
		table-layout: fixed;
	}

	.set-col-bewerb {
		width: 26%;
		min-width: 0;
	}

	.set-col-slot {
		width: 24.66%;
		min-width: 0;
	}

	.set-sched-view-table thead th,
	.set-sched-view-table tbody td {
		padding: 4px 5px;
		font-size: 10px;
		word-break: break-word;
	}

	.set-slot-range {
		font-size: 9px;
	}

	.set-bewerb-name {
		font-size: 10px;
		word-break: break-word;
	}

	.set-bewerb-inner {
		gap: 4px;
	}

	.set-dot {
		width: 9px;
		height: 9px;
	}

	.set-bar-track {
		height: 16px;
	}

	.set-se-icon-badge {
		width: 15px;
		height: 15px;
		min-width: 15px;
	}
}