.gymcs-schedule-wrapper {
	margin: 1.5em 0;
}

/* Explicit background hints from the shortcode's bg="dark"/bg="light" attribute.
   These are a CSS-only fallback; frontend.js sets --gymcs-auto-text to match
   whenever one of these classes is present, taking priority over auto-detection. */
.gymcs-schedule-wrapper.gymcs-bg-dark {
	--gymcs-auto-text: #ffffff;
}

.gymcs-schedule-wrapper.gymcs-bg-light {
	--gymcs-auto-text: #000000;
}

/* Filters */
.gymcs-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 1em;
}

.gymcs-filter-btn {
	background: #f1f1f1;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 16px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gymcs-filter-btn:hover {
	background: #e2e2e2;
}

.gymcs-filter-btn.is-active {
	background: #222;
	border: 1px solid #222;
	color: #fff;
}

/* Horizontal scroll container for small/tablet screens */
.gymcs-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
}

/* Table. Header/hour text color is driven by --gymcs-auto-text, which JS
   sets to black or white based on the actual background behind the table
   (see frontend.js) — since the header row and hour column have no
   background of their own and simply show through to the page. */
.gymcs-schedule-table {
	width: 100%;
	min-width: 700px;
	border-collapse: collapse;
	table-layout: fixed;
	background: none;
	color: var( --gymcs-auto-text, #000000 );
	font-size: 16px;
	line-height: 2em;
}

.gymcs-schedule-table th,
.gymcs-schedule-table td {
	border: 1px solid #e5e5e5;
	padding: 8px;
	vertical-align: top;
	text-align: center;
	color: inherit;
}

/* Header row: no background, height reverts to auto (sized by its own padding/content). */
.gymcs-schedule-table thead th {
	text-align: center;
	font-weight: 600;
	padding: 10px 8px;
}

.gymcs-corner-cell {
	width: 90px;
	vertical-align: middle;
	text-align: center;
}

/* Hour column (tbody only): no background, hour text vertically centered. */
.gymcs-hour-col {
	width: 90px;
	white-space: nowrap;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
	height: 100px;
}

.gymcs-day-cell {
	min-width: 130px;
	padding: 0;
	height: 100px;
}

/* Cells that hold a class: the color fills the entire cell, and its text
   color is auto-picked (black or white) for the best contrast — see PHP.
   Padding lives on .gymcs-class-inner (not the cell) so that when it's a
   link, the whole cell area — not just the text — is clickable. */
.gymcs-day-cell.has-class {
	padding: 0;
}

.gymcs-class-inner {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 8px;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

a.gymcs-class-inner:hover {
	text-decoration: none;
	opacity: 0.9;
}

a.gymcs-class-inner:hover .gymcs-class-title {
	text-decoration: underline;
}

.gymcs-class-title {
	display: block;
	font-weight: 700;
	color: inherit;
}

.gymcs-class-time {
	color: inherit;
}

.gymcs-class-location {
	font-style: italic;
	color: inherit;
}

.gymcs-class-trainer {
	color: inherit;
	font-size: 0.9em;
}

/* Filtering state, toggled via JS. Cell stays in place but goes blank. */
.gymcs-day-cell.is-filtered-out {
	background-color: transparent !important;
	padding: 0;
}

.gymcs-day-cell.is-filtered-out .gymcs-class-inner {
	display: none;
}

.gymcs-no-classes {
	font-style: italic;
	color: #000;
}

/* Tablet and below: the table becomes at least 1200px wide, scrolling
   horizontally inside .gymcs-table-scroll, and text drops to 14px. */
@media ( max-width: 1024px ) {
	.gymcs-schedule-table {
		min-width: 1200px;
		font-size: 14px;
	}

	.gymcs-schedule-table th,
	.gymcs-schedule-table td,
	.gymcs-hour-col,
	.gymcs-day-cell {
		min-width: 160px;
	}
}

@media ( max-width: 600px ) {
	.gymcs-filter-btn {
		font-size: 13px;
		padding: 5px 12px;
	}
}