/**
 * timetable.css – Fahrplan, Stationboard, Tabs, Favoriten, SBB-Status
 *
 * Alle Stile für den rechten Panel-Bereich:
 * Verbindungssuche, Abfahrtstafel, Tab-Navigation,
 * Favoriten und Systemstatus.
 *
 * Nutzt CSS-Variablen aus base.css / theme.js.
 */

/* ================================================================
   TABS
   ================================================================ */

.right-panel-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 0;
	justify-content: center;
}

.tab-btn {
	flex: 1;
	background: var(--bg-panel-alt);
	border: 1px solid var(--border-color);
	border-bottom: none;
	border-radius: .5em .5em 0 0;
	color: var(--text-muted);
	font-family: 'Courier New', monospace;
	font-size: 0.85rem;
	padding: 0.6em 1.2em;
	cursor: pointer;
	transition: background 0.3s, color 0.2s, border-color 1.5s ease;
	text-align: center;
}

.tab-btn:hover {
	color: var(--text-color);
	background: var(--bg-panel);
}

.tab-btn.tab-active {
	background: var(--accent-color);
	color: var(--bg-page);
	border-color: var(--accent-color);
	border-bottom-color: var(--accent-color);
	border-top: 2px solid var(--accent-color);
	font-weight: bold;
}

.tab-btn i {
	margin-right: 0.3em;
}

/* ================================================================
   VERBINDUNGEN (TIMETABLE)
   ================================================================ */

/* --- Formular --- */

.timetable-area {
	text-align: center;
	width: 100%;
}

.timetable-form-always {
	display: inline-block;
	padding: 0.75em 1.25em;
	margin-bottom: 0.75em;
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	border-radius: 0 0 .5em .5em;
	border-top: none;
	transition: var(--theme-transition);
}

.timetable-form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .5em;
	margin-bottom: .75em;
}

.timetable-form-row {
	display: flex;
	align-items: center;
	gap: .5em;
}

.timetable-form-row label {
	color: var(--text-muted);
	font-size: 0.9rem;
	min-width: 3em;
	text-align: right;
}

.timetable-form-row .timetable-input {
	flex: 1;
}

.timetable-form .timetable-search-btn {
	align-self: flex-end;
}

.timetable-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .5em;
}

/* --- Inputs --- */

.timetable-input {
	background: var(--bg-input);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	color: var(--text-color);
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
	padding: .4em .6em;
	min-width: 8em;
	transition: var(--theme-transition);
}

.timetable-input::placeholder { color: var(--text-muted); opacity: 0.6; }
.timetable-input:focus        { outline: 2px solid var(--accent-color); outline-offset: 1px; border-color: var(--accent-color); }

/* --- Hilfs-Buttons --- */

.timetable-locate-btn {
	margin: 0;
	padding: .3em .5em;
	font-size: 0.9rem;
	line-height: 1;
	flex: 0 0 auto;
}

.timetable-swap-btn {
	align-self: center;
	margin: 0;
	padding: .2em .6em;
	font-size: 1.1rem;
	line-height: 1;
}

.timetable-search-btn {
	margin: 0;
	padding: .4em .8em;
	font-size: 0.9rem;
}

/* --- Panel --- */

.timetable-panel {
	display: block;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 1em 2em;
	text-align: center;
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	border-radius: .5em;
	font-family: 'Courier New', monospace;
	color: var(--text-color);
	min-width: 18em;
	box-sizing: border-box;
	transition: var(--theme-transition);
}

.timetable-title {
	font-size: 1rem;
	margin: 0 0 .75em;
	color: var(--text-muted);
	font-weight: normal;
	letter-spacing: .1em;
}

#timetable-list {
	min-height: 2em;
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto;
	align-items: center;
	column-gap: 1em;
	font-size: 0.9rem;
	white-space: nowrap;
}

/* --- Verbindungs-Zeilen --- */

.timetable-row-wrapper {
	display: contents;
}

/* Trennlinie zwischen Verbindungen über alle Zellen */
.timetable-row-wrapper + .timetable-row-wrapper > .timetable-row > * {
	border-top: 1px solid var(--border-color);
}

.timetable-row {
	display: contents;
}

.timetable-row > * {
	padding: .35em 0;
}

.timetable-products {
	color: #9bd;
	font-size: 0.85em;
	text-align: left;
}

.products-more-toggle {
	display: inline-block;
	margin-left: 0.3em;
	padding: 0 0.35em;
	font-size: 0.8em;
	color: var(--accent-color, #0af);
	background: rgba(255,255,255,0.08);
	border-radius: 0.3em;
	cursor: pointer;
	vertical-align: baseline;
}
.products-more-toggle:hover {
	background: rgba(255,255,255,0.15);
}

.timetable-time {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.timetable-arrow {
	color: var(--text-muted);
	text-align: center;
}

.timetable-duration {
	color: var(--text-muted);
	font-size: 0.85em;
	text-align: right;
}

.timetable-platform {
	color: var(--text-muted);
	font-size: 0.85em;
	text-align: left;
}

.timetable-delay {
	color: #e96;
	font-weight: bold;
	margin-left: 0.15em;
}

/* --- Umstiege --- */

.timetable-transfers {
	color: #8a8;
	font-size: 0.85em;
	text-align: center;
}

.timetable-transfers-clickable {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
}

.timetable-transfers-clickable:hover,
.timetable-transfers-clickable:focus {
	color: #ada;
}

.timetable-row-details {
	grid-column: 1 / -1;
	padding: 0.2em 0 0.4em 2em;
	text-align: center;
}

.timetable-transfer-detail {
	color: var(--text-muted);
	font-size: 0.8em;
	padding: 0.2em 0;
}

.timetable-products-inline { color: #9bd; }

/* --- Lade- / Fehlerzustand --- */

.timetable-loading,
.timetable-error {
	grid-column: 1 / -1;
	color: var(--text-muted);
	font-size: 0.9rem;
	margin: 0.5em 0 0;
}

.timetable-error { color: #b66; }

/* ================================================================
   STATIONBOARD (ABFAHRTSTAFEL)
   ================================================================ */

.stationboard-area {
	text-align: center;
	margin: 0 auto 1.5em;
	width: 100%;
}

.stationboard-form-always {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.75em 1.25em;
	margin-bottom: 0.75em;
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	border-radius: 0 0 .5em .5em;
	border-top: none;
	transition: var(--theme-transition);
}

.stationboard-form-row {
	display: flex;
	align-items: center;
	gap: .5em;
}

.stationboard-form-row label {
	color: var(--text-muted);
	font-size: 0.9rem;
	min-width: 4em;
	text-align: right;
}

.stationboard-form-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: .5em;
}

.stationboard-panel {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 1em 2em;
	text-align: left;
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	border-radius: .5em;
	font-family: 'Courier New', monospace;
	color: var(--text-color);
	min-width: 18em;
	box-sizing: border-box;
	transition: var(--theme-transition);
}

#stationboard-list {
	display: grid;
	grid-template-columns: minmax(4.5em, auto) auto 1fr auto;
	align-items: center;
	column-gap: 1em;
	font-size: 0.9rem;
	white-space: nowrap;
}

.stationboard-row {
	display: contents;
}

/* Trennlinie zwischen Zeilen */
.stationboard-row > * {
	padding: .35em 0;
}
.stationboard-row + .stationboard-row > * {
	border-top: 1px solid var(--border-color);
}

.stationboard-time {
	font-variant-numeric: tabular-nums;
	color: var(--text-color);
	text-align: left;
}

.stationboard-product {
	color: #9bd;
	font-size: 0.85em;
	text-align: left;
}

.stationboard-destination {
	color: var(--text-color);
	text-align: left;
}

.stationboard-destination i {
	color: var(--text-muted);
	margin-right: 0.3em;
	font-size: 0.8em;
}

.stationboard-platform {
	color: var(--text-muted);
	font-size: 0.85em;
	text-align: right;
}

/* ================================================================
   FAVORITEN
   ================================================================ */

.favorite-add-btn {
	margin: 0;
	padding: .4em .6em;
	font-size: 0.9rem;
	color: #ca0;
}

.favorite-add-btn:hover { color: #fc0; }

.favorites-list {
	margin: 0.5em 0;
	font-family: 'Courier New', monospace;
	font-size: 0.85rem;
}

.favorites-empty { color: var(--text-muted); }

.favorite-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	padding: 0.3em 0.5em;
	border-bottom: 1px solid var(--border-color);
}

.favorite-item:last-child { border-bottom: none; }

.favorite-route {
	color: #9bd;
	cursor: pointer;
	flex: 1;
}

.favorite-route:hover {
	color: #bdf;
	text-decoration: underline;
}

.favorite-route i { margin-right: 0.3em; }

.favorite-remove-btn {
	margin: 0;
	padding: .15em .4em;
	font-size: 0.75rem;
	color: #866;
	line-height: 1;
}

.favorite-remove-btn:hover { color: #c88; }

/* ================================================================
   SBB-SYSTEMSTATUS
   ================================================================ */

.sbb-status {
	margin: 0.75em 0 0;
	padding: 0.6em 1em;
	background: var(--bg-panel-alt);
	border: 1px solid var(--border-color);
	border-radius: .4em;
	font-family: 'Courier New', monospace;
	font-size: 0.8rem;
	text-align: left;
	transition: var(--theme-transition);
}

.status-loading    { color: var(--text-muted); }
.status-ok         { color: #8c8; }
.status-ok i       { margin-right: 0.3em; }
.status-warn       { color: #ca0; }
.status-warn i     { margin-right: 0.3em; }
.status-alert      { color: #e66; }
.status-alert i    { margin-right: 0.3em; }

/* Status-Detailansicht */
.status-details {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid var(--border-color);
}

.status-route {
	font-size: 0.75rem;
	color: var(--text-muted);
	margin-bottom: 0.4em;
}
.status-route i {
	margin-right: 0.3em;
}

.status-conn {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0;
	font-size: 0.75rem;
	color: var(--text-color);
	border-bottom: 1px solid rgba(255,255,255,0.05);
}
.status-conn:last-child {
	border-bottom: none;
}

.status-conn-delayed {
	background: rgba(255, 170, 0, 0.08);
	border-radius: 0.2em;
	padding-left: 0.3em;
	padding-right: 0.3em;
}

.status-conn-product {
	flex: 0 0 auto;
	min-width: 4em;
	font-weight: bold;
	color: var(--accent-color, #0af);
	white-space: nowrap;
}

.status-conn-time {
	flex: 0 0 auto;
	white-space: nowrap;
}

.status-conn-arrow {
	flex: 0 0 auto;
	color: var(--text-muted);
	font-size: 0.65rem;
}

.status-conn-duration {
	flex: 1;
	text-align: right;
	color: var(--text-muted);
	font-size: 0.7rem;
	white-space: nowrap;
}

/* ================================================================
   MENUEPLAN (VEBO)
   ================================================================ */

#tab-menuplan {
	font-family: 'Courier New', monospace;
}

#tab-menuplan .calendar-item {
	padding: 0.8em;
	border: 1px solid var(--border-color);
	border-radius: 0.5em;
	background: var(--bg-panel);
}

#tab-menuplan .calendar-item-summary {
	color: var(--text-color);
	font-size: 0.92em;
}

#tab-menuplan .calendar-item-meta {
	color: var(--text-muted);
	font-size: 0.8em;
	margin-top: 0.45em;
}

#tab-menuplan .menuplan-open-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	text-decoration: none;
	color: var(--text-color);
	background: var(--bg-panel-alt);
	border: 1px solid var(--border-color);
	border-radius: 0.4em;
	padding: 0.35em 0.65em;
	transition: var(--theme-transition);
}

#tab-menuplan .menuplan-open-link:hover {
	color: var(--accent-color);
	border-color: var(--accent-color);
}