/* WPKalender Frontend CSS */

.wpk-calendar {
	max-width: 560px;
	font-family: inherit;
}

/* Titel */
.wpk-calendar__header {
	margin-bottom: 8px;
}

.wpk-calendar__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
}

.wpk-calendar__nav-spacer {
	display: inline-block;
	min-height: 1px;
}

.wpk-calendar__nav-btn {
	border: 1px solid #d9d9d9;
	background: #fff;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 0.8em;
	cursor: pointer;
}

.wpk-calendar__nav-btn:hover {
	border-color: #b5b5b5;
}

.wpk-calendar__nav-btn--prev {
	justify-self: start;
}

.wpk-calendar__nav-btn--next {
	justify-self: end;
}

.wpk-calendar__title {
	font-size: 1.2em;
	font-weight: 700;
	text-align: center;
}

.wpk-calendar--loading {
	opacity: 0.65;
	pointer-events: none;
}

/* Weekdagkoppen */
.wpk-calendar__weekdays,
.wpk-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.wpk-calendar__weekdays {
	margin-bottom: 4px;
}

.wpk-calendar__weekday {
	text-align: center;
	font-size: 0.8em;
	font-weight: 600;
	color: #666;
	padding: 4px 0;
}

/* Dagcellen */
.wpk-calendar__day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
	background: #fff;
	font-size: 0.9em;
}

.wpk-calendar__day.wpk-empty {
	background: transparent;
	border-color: transparent;
}

.wpk-day-number {
	font-weight: 600;
}

/* Statuskleuren (alleen frontend-statussen) */
.wpk-status-none {
	background: #fff;
	border-color: #e0e0e0;
	color: #999;
}

.wpk-status-open {
	background-color: #d4edda;
	border-color: #28a745;
	color: #155724;
}

.wpk-status-event {
	background-color: #cce5ff;
	border-color: #007bff;
	color: #004085;
}

.wpk-status-closed {
	background-color: #f8d7da;
	border-color: #dc3545;
	color: #721c24;
}

.wpk-status-wvhv {
	background-color: #fce4ec;
	border-color: #e91e8c;
	color: #880e4f;
}

.wpk-status-bjk {
	background-color: #fef3c7;
	border-color: #f59e0b;
	color: #7c5c00;
}

.wpk-status-vakantie {
	background-color: #fef3c7;
	border-color: #f59e0b;
	color: #7c5c00;
}

/* Huidige dag */
.wpk-calendar__day.wpk-today {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	font-weight: 700;
}

.wpk-calendar__day.wpk-today .wpk-day-number {
	text-decoration: underline;
	text-underline-offset: 2px;
}