/**
 * SV Calendar – stijlen
 * Complementeert de FullCalendar standaardstijlen.
 */

/* Container */
.sv-calendar-wrapper {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	max-width: 100%;
}

/* FullCalendar aanpassingen */
.sv-calendar-container .fc {
	--fc-border-color: #e5e7eb;
	--fc-button-bg-color: #2563eb;
	--fc-button-border-color: #2563eb;
	--fc-button-hover-bg-color: #1d4ed8;
	--fc-button-hover-border-color: #1d4ed8;
	--fc-button-active-bg-color: #1e40af;
	--fc-today-bg-color: #eff6ff;
	--fc-event-border-color: transparent;
}

.sv-calendar-container .fc-toolbar-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #111827;
}

.sv-calendar-container .fc-col-header-cell {
	background: #f9fafb;
	font-weight: 600;
	font-size: 0.8125rem;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sv-calendar-container .fc-daygrid-day-number {
	font-size: 0.875rem;
	color: #374151;
	padding: 4px 6px;
}

.sv-calendar-container .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
	background: #2563eb;
	color: #fff;
	border-radius: 50%;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Events */
.sv-calendar-container .fc-event {
	border-radius: 4px;
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 2px 5px;
	cursor: pointer;
	transition: opacity .15s;
}

.sv-calendar-container .fc-event:hover {
	opacity: .85;
}

/* Baan-events: streepjesrand om ze te onderscheiden van TEC-events */
.sv-calendar-container .sv-cal-type-baan {
	border-left: 3px solid rgba(0,0,0,.2) !important;
}

/* Meer-link */
.sv-calendar-container .fc-daygrid-more-link {
	font-size: 0.75rem;
	color: #6b7280;
}

/* Kleurlegende */
.sv-cal-legend {
	padding: 12px 4px 4px;
	border-top: 1px solid #e5e7eb;
}

/* Popup */
#sv-cal-popup {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Responsief */
@media (max-width: 640px) {
	.sv-calendar-container .fc-toolbar {
		flex-direction: column;
		gap: 8px;
	}

	.sv-calendar-container .fc-toolbar-title {
		font-size: 1rem;
	}

	.sv-calendar-container .fc-event .fc-event-title {
		font-size: 0.75rem;
	}
}