/**
 * TMD Calendar Styles
 *
 * Custom styles for the TMD events calendar.
 */

/* Calendar container */
.tmd-calendar-container {
	position: relative;
	margin-bottom: 2rem;
}

/* Event type legend */
.calendar-legend-container {
	background: rgba(248, 249, 250, 0.8);
	padding: 1.25rem;
	border-radius: 0.375rem;
	border: 1px solid #dee2e6;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.calendar-legend-container h5 {
	color: #495057;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.legend-items {
	gap: 0.75rem;
}

.legend-item {
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: 0.25rem 0;
}

.legend-color {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	margin-right: 8px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.legend-label {
	font-size: 0.875rem;
	color: #495057;
	font-weight: 500;
}

/* Event type filter */
#event-type {
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	font-size: 0.875rem;
}

#event-type:focus {
	border-color: #80bdff;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.reset-filters {
	font-size: 0.875rem;
}

/* Loading indicator */
.calendar-loading {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	background: rgba(255, 255, 255, 0.8);
	padding: 1rem;
	border-radius: 0.25rem;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Error message */
.calendar-error-message {
	margin-bottom: 1rem;
}

/* Event styles */
.fc-event {
	cursor: pointer;
	transition: transform 0.1s ease;
}

.fc-event:hover {
	transform: scale(1.02);
}

/* Featured event styling */
.badge-featured {
	background-color: #e63946;
	color: white;
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
}

/* Event tooltip */
.fc-event-tooltip {
	max-width: 250px;
}

.fc-event-tooltip p {
	margin: 0.25rem 0;
}

/* Media queries for responsive layout */
@media (max-width: 768px) {
	.calendar-filters-container .form-inline {
		flex-direction: column;
		align-items: flex-start;
	}

	.calendar-filters-container .form-group {
		margin-bottom: 0.5rem;
		width: 100%;
	}

	.calendar-filters-container select {
		width: 100%;
	}

	.fc-header-toolbar {
		flex-direction: column;
	}

	.fc-toolbar-chunk {
		margin-bottom: 0.5rem;
	}
}