/* Timeline Custom Styles for Dark/Light Mode */

/* Light Mode (default) */
.react-calendar-timeline {
	background-color: oklch(var(--b1));
	color: oklch(var(--bc));
}

.react-calendar-timeline .rct-cursor-line {
	background-color: oklch(var(--p));
}

.react-calendar-timeline .rct-sidebar {
	background-color: oklch(var(--b2));
	border-right: 1px solid oklch(var(--b3));
}

.react-calendar-timeline .rct-sidebar-row {
	border-bottom: 1px solid oklch(var(--b3));
	color: oklch(var(--bc));
}

.react-calendar-timeline .rct-header {
	background-color: oklch(var(--b2)) !important;
	border-bottom: 1px solid oklch(var(--b3));
}

.react-calendar-timeline .rct-header-root {
	background-color: oklch(var(--b2)) !important;
	border-bottom: 1px solid oklch(var(--b3));
}

.react-calendar-timeline .rct-dateHeader {
	color: oklch(var(--bc)) !important;
	background-color: oklch(var(--b2)) !important;
	border-right: 1px solid oklch(var(--b3));
}

.react-calendar-timeline .rct-dateHeader-primary {
	background-color: oklch(var(--b2)) !important;
	color: oklch(var(--bc)) !important;
	border-bottom: 1px solid oklch(var(--b3));
}

/* Fix for any nested date header elements */
.react-calendar-timeline .rct-dateHeader * {
	color: oklch(var(--bc)) !important;
	background-color: transparent !important;
}

.react-calendar-timeline .rct-scroll {
	background-color: oklch(var(--b1));
}

.react-calendar-timeline .rct-items {
	background-color: oklch(var(--b1));
}

.react-calendar-timeline .rct-item {
	background-color: oklch(var(--p));
	color: oklch(var(--pc));
	border: 1px solid oklch(var(--pf));
	border-radius: 4px;
}

.react-calendar-timeline .rct-item.selected {
	background-color: oklch(var(--s));
	color: oklch(var(--sc));
	border-color: oklch(var(--sf));
}

/* Timeline item type specific colors */
.timeline-item.station {
	background-color: oklch(var(--p)) !important;
	border-color: oklch(var(--pf)) !important;
}

.timeline-item.lst_01 {
	background-color: oklch(var(--s)) !important;
	border-color: oklch(var(--sf)) !important;
}

.timeline-item.lst_02 {
	background-color: oklch(var(--a)) !important;
	border-color: oklch(var(--af)) !important;
}

.timeline-item.lst_03 {
	background-color: oklch(var(--n)) !important;
	border-color: oklch(var(--nf)) !important;
}

.timeline-item.lst_04 {
	background-color: oklch(var(--in)) !important;
	border-color: oklch(var(--inf)) !important;
}

/* Station booking colors - dynamic colors for different stations */
.timeline-item.station {
	background-color: oklch(var(--p)) !important;
	border-color: oklch(var(--pf)) !important;
}

/* Additional station colors for variety when multiple stations are booked */
.timeline-item.station:nth-child(odd) {
	background-color: oklch(var(--p)) !important;
	border-color: oklch(var(--pf)) !important;
}

.timeline-item.station:nth-child(even) {
	background-color: oklch(var(--s)) !important;
	border-color: oklch(var(--sf)) !important;
}

/* Vertical lines */
.react-calendar-timeline .rct-vertical-line {
	border-left: 1px solid oklch(var(--b3));
}

.react-calendar-timeline .rct-horizontal-line {
	border-bottom: 1px solid oklch(var(--b3));
}

/* Today line */
.react-calendar-timeline .rct-today {
	background-color: oklch(var(--er) / 0.2);
}

/* Hover effects */
.react-calendar-timeline .rct-item:hover {
	filter: brightness(1.1);
}

/* Scrollbar styling for dark mode compatibility */
.react-calendar-timeline ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.react-calendar-timeline ::-webkit-scrollbar-track {
	background: oklch(var(--b2));
}

.react-calendar-timeline ::-webkit-scrollbar-thumb {
	background: oklch(var(--b3));
	border-radius: 4px;
}

.react-calendar-timeline ::-webkit-scrollbar-thumb:hover {
	background: oklch(var(--bc) / 0.3);
}