/**
 * Calendar page: month grid + view switch. Shared tokens/nav/card/event-card
 * styles live in tri-sp-student-shell.css / tri-sp-events.css (dependencies).
 */

.tri-sp-calendar__title {
	font-family: var(--tri-sp-font-heading);
	color: var(--tri-sp-text);
	font-size: 40px;
	font-weight: 400;
	margin: 0 0 12px;
}

.tri-sp-calendar__subtitle {
	color: var(--tri-sp-text-muted);
	margin: 0 0 20px;
}

.tri-sp-calendar__view-switch {
	display: flex;
	gap: 8px;
	margin-bottom: 32px;
}

.tri-sp-calendar__view-switch a {
	padding: 8px 16px;
	border: 1px solid var(--tri-sp-border);
	border-radius: var(--tri-sp-button-radius);
	font-size: 13px;
	color: var(--tri-sp-text-muted);
}

.tri-sp-calendar__view-switch a.is-active {
	background: var(--tri-sp-gold);
	border-color: var(--tri-sp-gold);
	color: #1a1206;
	font-weight: 600;
}

.tri-sp-calendar-month__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.tri-sp-calendar-month__label {
	font-family: var(--tri-sp-font-heading);
	color: var(--tri-sp-text);
	font-size: 22px;
	font-weight: 400;
	margin: 0;
}

.tri-sp-calendar-month__empty {
	margin-bottom: 16px;
}

.tri-sp-calendar-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.tri-sp-calendar-grid th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tri-sp-text-muted);
	padding: 8px 4px;
	text-align: left;
}

.tri-sp-calendar-grid__day {
	border: 1px solid var(--tri-sp-border);
	vertical-align: top;
	padding: 6px;
	height: 90px;
	overflow: hidden;
}

.tri-sp-calendar-grid__day.is-outside-month {
	opacity: 0.35;
}

.tri-sp-calendar-grid__day.is-today {
	background: rgba(202, 150, 79, 0.08);
	border-color: var(--tri-sp-border-hover);
}

.tri-sp-calendar-grid__date {
	display: block;
	font-size: 12px;
	color: var(--tri-sp-text-muted);
	margin-bottom: 4px;
}

.tri-sp-calendar-grid__events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tri-sp-calendar-grid__event {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	line-height: 1.3;
	color: var(--tri-sp-text);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tri-sp-calendar-grid__event-type {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var(--tri-sp-gold);
}

.tri-sp-calendar-grid__event--supervision .tri-sp-calendar-grid__event-type {
	background: #b8a3e0;
}

/* Chunk 10 — the two informational event types. Distinct hues so the month
   and week grids stay readable at a glance; both still sit inside the shared
   dark/gold palette rather than introducing a new design language. */
.tri-sp-calendar-grid__event--programme_date .tri-sp-calendar-grid__event-type {
	background: #7fb5c9;
}

.tri-sp-calendar-grid__event--assessment .tri-sp-calendar-grid__event-type {
	background: #d98b6a;
}

/* --- Chunk 10: event type filters --- */

.tri-sp-calendar__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 14px 16px;
	background: var(--tri-sp-card-bg);
	border: 1px solid var(--tri-sp-border);
	border-radius: var(--tri-sp-card-radius-sm);
}

.tri-sp-calendar__filters-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tri-sp-text-muted);
}

.tri-sp-calendar__filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--tri-sp-text-muted);
	cursor: pointer;
}

.tri-sp-calendar__filter input {
	margin: 0;
	accent-color: var(--tri-sp-gold);
}

.tri-sp-calendar__filter-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var(--tri-sp-gold);
}

.tri-sp-calendar__filter--supervision .tri-sp-calendar__filter-dot {
	background: #b8a3e0;
}

.tri-sp-calendar__filter--programme_date .tri-sp-calendar__filter-dot {
	background: #7fb5c9;
}

.tri-sp-calendar__filter--assessment .tri-sp-calendar__filter-dot {
	background: #d98b6a;
}

/* --- Chunk 10: Week view --- */

.tri-sp-calendar-week__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}

.tri-sp-calendar-week__day {
	min-width: 0;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid var(--tri-sp-border);
	border-radius: var(--tri-sp-card-radius-sm);
	padding: 10px;
	min-height: 140px;
}

.tri-sp-calendar-week__day.is-today {
	border-color: var(--tri-sp-gold);
}

.tri-sp-calendar-week__day-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--tri-sp-border);
}

.tri-sp-calendar-week__dow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tri-sp-text-muted);
}

.tri-sp-calendar-week__date {
	font-size: 14px;
	color: var(--tri-sp-text);
	font-weight: 600;
}

.tri-sp-calendar-week__none {
	margin: 0;
	color: var(--tri-sp-text-muted);
	font-size: 13px;
}

.tri-sp-calendar-week__events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Every descendant must be allowed to shrink below its content width, or a
   long string escapes the column. Belt-and-braces alongside the time-only
   client-side format: even if the timezone script is blocked, disabled, or
   writes a longer string than expected, nothing can overflow the day cell. */
.tri-sp-calendar-week__event {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	font-size: 12px;
	line-height: 1.35;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.tri-sp-calendar-week__event-time {
	color: var(--tri-sp-gold-strong);
	font-variant-numeric: tabular-nums;
	/* Not `flex: 0 0 auto` — that refuses to shrink and was what pushed the
	   full timezone label out across neighbouring columns. */
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.tri-sp-calendar-week__event-title {
	color: var(--tri-sp-text);
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Below 900px seven columns stop being legible — stack into a day-per-row
   agenda, the same approach the month grid already takes at 768px. */
@media (max-width: 900px) {
	.tri-sp-calendar-week__grid {
		grid-template-columns: 1fr;
	}

	.tri-sp-calendar-week__day {
		min-height: 0;
	}

	.tri-sp-calendar-week__day-head {
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
	}
}

/* Below 768px: the 7-column grid becomes unreadable in a fixed-width table,
   so fall back to a simple stacked agenda per day — documented in
   docs/calendar.md, "Responsive". */
@media (max-width: 768px) {
	/* The <table> itself must stay displayed (as a block) — display:none on
	   the ancestor would hide every descendant regardless of their own
	   display override below; only thead needs hiding. Caught by an actual
	   screenshot showing a fully blank calendar body, not code review. */
	.tri-sp-calendar-grid {
		display: block;
	}

	.tri-sp-calendar-grid thead {
		display: none;
	}

	.tri-sp-calendar-grid tbody,
	.tri-sp-calendar-grid tr {
		display: block;
	}

	.tri-sp-calendar-grid__day {
		display: none;
		height: auto;
		border: none;
		border-bottom: 1px solid var(--tri-sp-border);
		padding: 10px 4px;
	}

	.tri-sp-calendar-grid__day.is-outside-month {
		display: none !important;
	}

	.tri-sp-calendar-grid__day:not(.is-outside-month) {
		display: block;
		opacity: 1;
	}

	.tri-sp-calendar-grid__date {
		font-size: 14px;
		font-weight: 600;
	}

	.tri-sp-calendar-grid__event {
		font-size: 12px;
		white-space: normal;
	}
}