/* Calendar styles shared by the public events page and the staff calendar.
   The .iqra-cal-compact rules style the phone month grid that
   schule/js/calendar-compact.js switches on. Selectors start with .fc.
   because FullCalendar injects its own stylesheet after this one. */

/* The site theme gives every table a bottom margin, which opens empty
   strips between FullCalendar's header and body tables. */
.fc.fc table { margin: 0; }

/* Day numbers and weekday names are links; underlined they clutter the grid. */
.fc.fc .fc-daygrid-day-number,
.fc.fc .fc-col-header-cell-cushion {
	color: inherit;
	text-decoration: none;
}

/* Colors match Event.KIND_COLORS in schule/models.py. */
.fc.iqra-cal-compact {
	--iqra-cal-unterricht: #1e5faf;
	--iqra-cal-unterricht-text: #fff;
	--iqra-cal-ferien: #f5c518;
	--iqra-cal-ferien-text: #1f2933;
	--iqra-cal-accent: #123a6b;
	/* Today is a ring around its number; a fill would read as a study day. */
	--fc-today-bg-color: transparent;
}

/* Toolbar: the title gets its own row, the buttons wrap beneath it. */
.fc.iqra-cal-compact .fc-header-toolbar {
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}
.fc.iqra-cal-compact .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
	order: -1;
	flex-basis: 100%;
	text-align: center;
}
.fc.iqra-cal-compact .fc-toolbar-title { font-size: 1.35rem; }
.fc.iqra-cal-compact .fc-button {
	padding: .35em .65em;
	font-size: .9rem;
}
/* The compact grid is its own view, so FullCalendar does not mark the
   month button as the current one; mark it here. */
.fc.iqra-cal-compact .fc-dayGridMonth-button {
	background-color: var(--fc-button-active-bg-color);
	border-color: var(--fc-button-active-border-color);
}

/* Grid: square cells holding only the day number. */
.fc.iqra-cal-compact .fc-col-header-cell-cushion {
	padding: 6px 0;
	font-size: .85rem;
	font-weight: 600;
}
.fc.iqra-cal-compact .fc-daygrid-day-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-height: 0;
}
.fc.iqra-cal-compact .fc-daygrid-day-top {
	justify-content: center;
	width: 100%;
}
.fc.iqra-cal-compact .fc-daygrid-day-events,
.fc.iqra-cal-compact .fc-daygrid-day-bg { display: none; }
.fc.iqra-cal-compact .fc-daygrid-day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Shrinks with the cell on the narrowest phones so chips never touch. */
	width: min(2rem, 72%);
	aspect-ratio: 1;
	padding: 0;
	border-radius: 50%;
	font-size: .95rem;
	font-weight: 600;
}
@media (max-width: 360px) {
	.fc.iqra-cal-compact .fc-daygrid-day-number { font-size: .8rem; }
}
.fc.iqra-cal-compact .fc-daygrid-day:not(.fc-day-disabled) { cursor: pointer; }
.fc.iqra-cal-compact .fc-day-disabled { background: none; }

/* A day with events: tinted cell, number on a chip of the kind's color. */
.fc.iqra-cal-compact .iqra-cal-unterricht { background: color-mix(in srgb, var(--iqra-cal-unterricht) 10%, transparent); }
.fc.iqra-cal-compact .iqra-cal-unterricht .fc-daygrid-day-number {
	background: var(--iqra-cal-unterricht);
	color: var(--iqra-cal-unterricht-text);
}
.fc.iqra-cal-compact .iqra-cal-ferien { background: color-mix(in srgb, var(--iqra-cal-ferien) 22%, transparent); }
.fc.iqra-cal-compact .iqra-cal-ferien .fc-daygrid-day-number {
	background: var(--iqra-cal-ferien);
	color: var(--iqra-cal-ferien-text);
}

.fc.iqra-cal-compact .fc-day-today .fc-daygrid-day-number {
	outline: 2px solid var(--iqra-cal-accent);
	outline-offset: 2px;
}
.fc.iqra-cal-compact .iqra-cal-selected .fc-daygrid-day-frame { box-shadow: inset 0 0 0 2px var(--iqra-cal-accent); }

/* Panel under the grid with the events of the selected day. Its rules
   start with .iqra-cal-day to beat the theme's h2 and ul styles. */
.iqra-cal-day {
	margin-block: 1rem 1.5rem;
	padding: .75rem 1rem;
	border: 1px solid #dde3ea;
	border-radius: 8px;
	background: #fff;
}
.iqra-cal-day .iqra-cal-day-title {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	font-weight: 700;
}
.iqra-cal-day .iqra-cal-day-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.iqra-cal-day-item + .iqra-cal-day-item { border-top: 1px solid #eef1f4; }
.iqra-cal-day-event {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem 0;
	line-height: 1.4;
	color: inherit;
	text-decoration: none;
}
a.iqra-cal-day-event { color: #1e5faf; font-weight: 600; }
a.iqra-cal-day-event:hover,
a.iqra-cal-day-event:focus-visible { text-decoration: underline; }
.iqra-cal-day-swatch {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 3px;
}
.iqra-cal-day .iqra-cal-day-empty {
	margin: 0;
	color: #5b6573;
}
.iqra-cal-day-footer { margin-top: .75rem; }