/* WP WDFY – Weekly Calendar */

/* ── Design tokens ───────────────────────────────────────────────────────────
 * All colours derive from these custom properties.
 * Override them in your theme stylesheet to adapt the calendar:
 *   .wdfy-week-calendar { --wdfy-accent: #c0392b; }
 * ─────────────────────────────────────────────────────────────────────────── */
.wdfy-week-calendar {
	/* Accent – tries WP block theme → common theme vars → safe fallback */
	--wdfy-accent:
		var(--wp--preset--color--primary,
		var(--color-primary,
		var(--accent-color,
		#0073aa)));

	/* Surfaces – inherit from WP/theme variables where available */
	--wdfy-bg:     var(--wp--preset--color--base,     var(--color-background, #ffffff));
	--wdfy-bg-alt: var(--wp--preset--color--base-2,   var(--color-surface,    #f8f9fa));

	/* Borders: currentColor-based so it adapts to light & dark themes       */
	--wdfy-border: rgba(0,0,0,.1);                                   /* fallback */
	--wdfy-border: color-mix(in srgb, currentColor 12%, transparent);/* modern   */

	/* Today highlight – tinted from accent, fallback for older browsers      */
	--wdfy-today-bg:   #eff6ff;
	--wdfy-today-bg:   color-mix(in srgb, var(--wdfy-accent)  8%, var(--wdfy-bg));
	--wdfy-today-head: #dbeafe;
	--wdfy-today-head: color-mix(in srgb, var(--wdfy-accent) 20%, var(--wdfy-bg));

	/* Reservation bar colours */
	--wdfy-res-green:  #22c55e;
	--wdfy-res-yellow: #f59e0b;
	--wdfy-res-red:    #ef4444;

	width: 100%;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}


/* ── Navigation ─────────────────────────────────────────────────────────────*/
.wdfy-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.wdfy-cal-label {
	flex: 1;
	text-align: center;
	font-weight: 600;
}

.wdfy-cal-btn {
	background: var(--wdfy-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: .35rem .9rem;
	font-size: 1.4em;
	line-height: 1;
	cursor: pointer;
	transition: opacity .15s;
	flex-shrink: 0;
}
.wdfy-cal-btn:hover  { opacity: .8; }
.wdfy-cal-btn:active { opacity: .6; }


/* ── Tab bar ─────────────────────────────────────────────────────────────────*/
.wdfy-cal-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-bottom: 1rem;
}

.wdfy-cal-tab {
	background: transparent;
	color: inherit;
	border: 1px solid var(--wdfy-border);
	border-radius: 4px;
	padding: .3rem .8rem;
	font-size: 1em;
	font-family: inherit;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.wdfy-cal-tab:hover {
	background: var(--wdfy-bg-alt);
	border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.wdfy-cal-tab.is-active {
	background: var(--wdfy-accent);
	color: #fff;
	border-color: transparent;
}

/* Tab filter – class-based to avoid `:visible` ancestor dependency */
.wdfy-hidden { display: none !important; }


/* ── Loading state ───────────────────────────────────────────────────────────*/
.wdfy-cal-body.is-loading {
	opacity: .45;
	pointer-events: none;
	transition: opacity .2s;
}


/* ── Desktop table ───────────────────────────────────────────────────────────*/
.wdfy-cal-mobile  { display: none; }
.wdfy-cal-desktop { display: block; }

.wdfy-cal-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wdfy-cal-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 520px;
	font-size: 1em;
	table-layout: fixed;
}

.wdfy-cal-table th,
.wdfy-cal-table td {
	border: 1px solid var(--wdfy-border);
	padding: 4px;
	vertical-align: top;
}

/* Time column */
.wdfy-cal-th-time,
.wdfy-cal-td-time {
	width: 3.8rem;
	text-align: right;
	font-size: .8em;
	opacity: .6;
	white-space: nowrap;
	vertical-align: middle;
	padding: 4px 6px;
}

/* Day header */
.wdfy-cal-th-day {
	text-align: center;
	font-size: 1em;
	background: var(--wdfy-accent);
	color: #fff;
	padding: 8px 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 700;
}

/* Today highlight */
.wdfy-cal-th-day.wdfy-today  { background: var(--wdfy-today-head); color: var(--wdfy-accent); }
.wdfy-cal-td-cell.wdfy-today { background: var(--wdfy-today-bg); }


/* ── Class card ──────────────────────────────────────────────────────────────*/
.wdfy-class-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--wdfy-bg);
	border: 1px solid var(--wdfy-border);
	border-left: 3px solid var(--wdfy-border); /* overridden inline per program */
	border-radius: 4px;
	padding: 5px 7px;
	margin-bottom: 3px;
	font-size: .9em;
	line-height: 1.35;
	word-break: break-word;
	transition: background-color .18s, color .18s, box-shadow .18s;
}
.wdfy-class-card:last-child { margin-bottom: 0; }

/* Hover – neutral (no program colour) */
.wdfy-class-card:hover {
	background: var(--wdfy-today-bg);
	box-shadow: 0 1px 4px rgba(0,0,0,.08);
	cursor: pointer;
}
/* Cards with a program colour – left border as colour indicator only */
/* (border-left-color is overridden via inline style per card)         */

/* Hover – fill with program colour, contrast text colour auto-set via --wdfy-text-color */
.wdfy-class-card.wdfy-has-color:hover {
	background: var(--wdfy-prog-color);
	color: var(--wdfy-text-color, #fff);
	border-left-color: transparent;
	border-color: transparent;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.wdfy-class-card.wdfy-has-color:hover .wdfy-class-time { color: var(--wdfy-text-color, #fff); }
.wdfy-class-card.wdfy-has-color:hover a               { color: var(--wdfy-text-color, #fff); }

/* Card content */
.wdfy-class-time {
	font-size: .875em;
	font-weight: 600;
	color: var(--wdfy-accent);
}
.wdfy-class-name {
	font-weight: 600;
}
.wdfy-class-name a { color: inherit; text-decoration: none; }
.wdfy-class-name a:hover { text-decoration: underline; }

/* Second line: specific class name – normal weight */
.wdfy-class-classname {
	font-weight: 400;
	font-size: .9em;
	opacity: .8;
}

.wdfy-class-coach {
	font-size: .875em;
	opacity: .65;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wdfy-class-coach a { color: inherit; }


/* ── Cancelled ───────────────────────────────────────────────────────────────*/
.wdfy-class-card.wdfy-cancelled {
	opacity: .6;
	background: var(--wdfy-bg-alt);
}
.wdfy-class-card.wdfy-cancelled .wdfy-class-name { text-decoration: line-through; }

.wdfy-class-cancelled-badge {
	display: inline-block;
	font-size: .75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: #fca5a5;
	color: #7f1d1d;
	border-radius: 3px;
	padding: 1px 4px;
	margin-right: 3px;
	vertical-align: middle;
	text-decoration: none;
}


/* ── Reservation bar ─────────────────────────────────────────────────────────*/
.wdfy-class-res {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
}
.wdfy-res-bar {
	flex: 1;
	height: 4px;
	background: var(--wdfy-border);
	border-radius: 2px;
	overflow: hidden;
}
.wdfy-res-fill      { height: 100%; border-radius: 2px; transition: width .3s; }
.wdfy-bar-green     { background: var(--wdfy-res-green); }
.wdfy-bar-yellow    { background: var(--wdfy-res-yellow); }
.wdfy-bar-red       { background: var(--wdfy-res-red); }
.wdfy-res-label     { font-size: .8em; opacity: .6; white-space: nowrap; }


/* ── Empty / Error ───────────────────────────────────────────────────────────*/
.wdfy-cal-empty,
.wdfy-cal-error { text-align: center; padding: 1.5rem; opacity: .6; }


/* ── WOD trigger button ──────────────────────────────────────────────────────
 * Small round icon button shown at the bottom of a class card when a WOD is
 * available. The emoji content (🏋️) is set in PHP; CSS just shapes the button.
 * Note: wod-popup.js also injects equivalent CSS inline to guarantee the
 * styles apply even when calendar.css is not enqueued (widget-only pages).
 * ─────────────────────────────────────────────────────────────────────────── */
.wdfy-wod-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	margin-top: 3px;
	background: transparent;
	border: none;
	border-radius: 50%;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	opacity: .6;
	transition: opacity .15s, background-color .15s;
	font-family: inherit;
	vertical-align: middle;
	flex-shrink: 0;
}
.wdfy-wod-trigger:hover,
.wdfy-wod-trigger:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, .1);
	outline: none;
}

/* Hidden WOD snippet – never rendered inline; content read by JS into modal */
.wdfy-wod-popup-content { display: none !important; }


/* ── WOD Modal ───────────────────────────────────────────────────────────────
 * Shared modal used by both the weekly calendar and the upcoming-classes
 * widget / block. The modal container is injected once into <body> via
 * wpwdfy_inject_wod_modal() in shortcodes-calendar.php.
 * ─────────────────────────────────────────────────────────────────────────── */
.wdfy-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999990;
	align-items: center;
	justify-content: center;
}
.wdfy-modal.is-open { display: flex; }

/* Semi-transparent backdrop */
.wdfy-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}

/* Centered dialog */
.wdfy-modal-dialog {
	position: relative;
	background: var(--wdfy-bg, #fff);
	color: inherit;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
	width: calc(100% - 2rem);
	max-width: 680px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Header row: title + close button */
.wdfy-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 1.25rem;
	border-bottom: 1px solid var(--wdfy-border, rgba(0,0,0,.1));
	flex-shrink: 0;
}

.wdfy-modal-title {
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.3;
}

.wdfy-modal-close {
	flex-shrink: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 1em;
	cursor: pointer;
	padding: .3rem .55rem;
	color: inherit;
	opacity: .55;
	line-height: 1;
	font-family: inherit;
	transition: opacity .15s, background-color .15s, border-color .15s;
}
.wdfy-modal-close:hover,
.wdfy-modal-close:focus-visible {
	opacity: 1;
	background: var(--wdfy-bg-alt, #f8f9fa);
	border-color: var(--wdfy-border, rgba(0,0,0,.1));
	outline: none;
}

/* Scrollable body */
.wdfy-modal-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 1.25rem;
	flex: 1;
}

/* Lock body scroll while modal is open */
body.wdfy-modal-open { overflow: hidden; }


/* ── Mobile stacked view (≤ 680 px) ─────────────────────────────────────────*/
@media (max-width: 680px) {
	.wdfy-cal-desktop { display: none; }
	.wdfy-cal-mobile  { display: block; }

	.wdfy-cal-day {
		border: 1px solid var(--wdfy-border);
		border-radius: 6px;
		margin-bottom: .75rem;
		overflow: hidden;
	}
	.wdfy-cal-day.wdfy-today { border-color: var(--wdfy-accent); }

	.wdfy-cal-day-header {
		background: var(--wdfy-accent);
		color: #fff;
		padding: 8px 12px;
		font-weight: 700;
		font-size: 1em;
		border-bottom: 1px solid var(--wdfy-border);
	}
	.wdfy-cal-day.wdfy-today .wdfy-cal-day-header { background: var(--wdfy-today-head); color: var(--wdfy-accent); }

	.wdfy-cal-mobile .wdfy-class-card { margin: 6px 10px; }

	.wdfy-cal-no-classes {
		margin: 0;
		padding: 6px 12px;
		opacity: .5;
		font-size: .85em;
	}

	/* Modal: slide up from bottom on small screens */
	.wdfy-modal {
		align-items: flex-end;
	}
	.wdfy-modal-dialog {
		width: 100%;
		max-height: 88vh;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}