/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Stijlen voor het groepslessen-weekrooster — zowel de dashboard
 *                grid-editor (.sl-sched-*) als de publieke weektabel op
 *                single-sportschool (.sl-class-schedule).
 *
 * PATH         : wp-content/themes/sportlist/css/class-schedule.css
 *
 * DEPENDENCIES : tokens.css (alle kleuren/spacing/radii via custom properties),
 *                conditioneel geladen op page-dashboard + single-sportschool.
 *
 * =============================================================================
 * CSS-VARIABELEN (gebruik uitsluitend deze)
 * =============================================================================
 *   --color-surface / --color-surface-muted / --color-surface-raised
 *   --color-border-default / --color-border-subtle / --color-brand
 *   --color-text / --color-text-muted / --color-brand-subtle
 *   --space-* / --radius-md / --radius-lg / --radius-pill
 *   --shadow-card / --fw-semibold / --fs-body-sm / --color-focus-ring
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *   1. PUBLIEKE WEEKTABEL
 *   2. DASHBOARD EDITOR
 *   3. RESPONSIVE
 *
 * @package Sportlist
 */

/* ============================================================
   1. PUBLIEKE WEEKTABEL
   ============================================================ */

.sl-class-schedule {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-4);
}

.sl-class-schedule__day {
	background: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	box-shadow: var(--shadow-card);
}

.sl-class-schedule__day-name {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	border-bottom: 2px solid var(--color-brand-subtle);
	padding-bottom: var(--space-2);
}

.sl-class-schedule__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.sl-class-schedule__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	padding-left: var(--space-3);
	border-left: 3px solid var(--color-brand);
}

.sl-class-schedule__time {
	font-variant-numeric: tabular-nums;
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	white-space: nowrap;
}

.sl-class-schedule__name {
	color: var(--color-text);
}

.sl-class-schedule__instructor {
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
}

.sl-class-schedule__cat {
	font-size: var(--fs-caption);
	color: var(--color-brand);
	background: var(--color-brand-subtle);
	border-radius: var(--radius-pill);
	padding: 0 var(--space-2);
	line-height: 1.6;
}

.sl-class-schedule__note {
	margin-top: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
}

.sl-class-schedule__download a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-link);
}

/* ============================================================
   2. DASHBOARD EDITOR
   ============================================================ */

.sl-schedule-editor__loading {
	color: var(--color-text-muted);
	font-style: italic;
}

.sl-sched-upload {
	background: var(--color-surface-muted);
	border: 1px dashed var(--color-border-default);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.sl-sched-upload__hint {
	flex: 1 1 100%;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
}

.sl-sched-upload__status {
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
}

.sl-sched-days {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.sl-sched-day {
	background: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
}

.sl-sched-day__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-2);
}

.sl-sched-day__head h4 {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.sl-sched-add {
	background: transparent;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-pill);
	color: var(--color-brand);
	padding: var(--space-1) var(--space-3);
	cursor: pointer;
	font-size: var(--fs-body-sm);
	transition: background-color var(--duration-fast) var(--ease-out);
}

.sl-sched-add:hover {
	background: var(--color-brand-subtle);
}

.sl-sched-rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.sl-sched-row {
	display: grid;
	grid-template-columns: 5.5rem 5.5rem 1fr 1fr auto auto auto;
	gap: var(--space-2);
	align-items: center;
}

.sl-sched-row input,
.sl-sched-row select {
	width: 100%;
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-body-sm);
}

.sl-sched-row input:focus-visible,
.sl-sched-row select:focus-visible,
.sl-sched-add:focus-visible,
.sl-sched-remove:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 1px;
}

.sl-sched-remove {
	background: transparent;
	border: none;
	color: var(--color-text-muted);
	font-size: var(--fs-body-lg);
	line-height: 1;
	cursor: pointer;
	padding: 0 var(--space-2);
}

.sl-sched-remove:hover {
	color: var(--status-error);
}

.sl-sched-note-wrap {
	margin-top: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.sl-sched-note-label {
	font-size: var(--fs-body-sm);
	color: var(--color-text-muted);
}

.sl-sched-note {
	width: 100%;
	padding: var(--space-2);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
}

/* ============================================================
   3. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
	.sl-sched-row {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--space-2);
		padding: var(--space-3);
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-sm);
		position: relative;
	}

	.sl-sched-row .sl-sched-name,
	.sl-sched-row .sl-sched-instr {
		grid-column: 1 / -1;
	}

	.sl-sched-remove {
		position: absolute;
		top: var(--space-1);
		right: var(--space-1);
	}
}