/* Simple Availability Calendar — frontend.
   Colours come from CSS custom properties set on .sac-calendar
   (--sac-free, --sac-busy, --sac-text) so themes/settings can override. */

.sac-calendar {
	/* User-configured colours (overridden inline from settings). */
	--sac-free: #dff3df;
	--sac-busy: #e8664e;
	--sac-change: #f0b849;
	--sac-user-text: #333333;

	/* Neutrals — remapped by the dark scheme below. The user text colour
	   is routed through --sac-text so dark mode can substitute it. */
	--sac-text: var(--sac-user-text);
	--sac-card-bg: #ffffff;
	--sac-card-border: rgba(0, 0, 0, 0.12);
	--sac-control-bg: #ffffff;
	--sac-control-border: #c8c8c8;
	--sac-control-border-hover: #8c8f94;
	--sac-control-text: #333333;
	--sac-seam: #ffffff;
	--sac-past-veil: rgba(255, 255, 255, 0.55);
	--sac-chevron: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555555' stroke-width='1.5'/%3E%3C/svg%3E");

	max-width: 100%;
	font-size: 0.95rem;
	color: var(--sac-text);
}

/* The Full style is a self-contained card — legible on any page colour.
   The Light style stays transparent: the theme owns the surroundings. */
.sac-calendar.sac-style-full {
	background: var(--sac-card-bg);
	border: 1px solid var(--sac-card-border);
	border-radius: 8px;
	padding: 1rem 1.25rem;
}

/* Dark scheme: neutrals only — availability colours stay as configured. */
.sac-style-full.sac-scheme-dark {
	--sac-text: #e6e6e6;
	--sac-card-bg: #1f2226;
	--sac-card-border: rgba(255, 255, 255, 0.14);
	--sac-control-bg: #2b2f34;
	--sac-control-border: #555a60;
	--sac-control-border-hover: #7a828a;
	--sac-control-text: #e6e6e6;
	--sac-seam: #1f2226;
	--sac-past-veil: rgba(31, 34, 38, 0.55);
	--sac-chevron: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23bbbbbb' stroke-width='1.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	.sac-style-full.sac-scheme-auto {
		--sac-text: #e6e6e6;
		--sac-card-bg: #1f2226;
		--sac-card-border: rgba(255, 255, 255, 0.14);
		--sac-control-bg: #2b2f34;
		--sac-control-border: #555a60;
		--sac-control-border-hover: #7a828a;
		--sac-control-text: #e6e6e6;
		--sac-seam: #1f2226;
		--sac-past-veil: rgba(31, 34, 38, 0.55);
		--sac-chevron: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23bbbbbb' stroke-width='1.5'/%3E%3C/svg%3E");
	}
}

.sac-months {
	display: grid;
	/* min(230px, 100%) keeps narrow containers (sidebars/widgets) from
	   overflowing: the column gives way instead of forcing 230px. */
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 1.25rem;
	align-items: start;
}

table.sac-month {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
}

.sac-month caption {
	caption-side: top;
	font-weight: 600;
	padding: 0.3em 0;
	text-align: center;
}

.sac-month th {
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	padding: 0.3em 0;
	border: 0;
}

.sac-month th abbr {
	text-decoration: none;
	border-bottom: 0;
	cursor: default;
}

.sac-month td {
	text-align: center;
	padding: 0;
	height: 2.3em;
	border: 2px solid transparent;
	background-clip: padding-box;
	font-size: 0.85em;
	line-height: 2.3em;
}

td.sac-empty {
	background: transparent;
}

/* Day numbers sit on the user-configured availability colours, so they
   use the user text colour DIRECTLY — the dark scheme swaps --sac-text
   for the card's neutrals only (caption, weekday headers, nav, legend);
   swapped text on unswapped cell colours would be unreadable. */
td.sac-free,
td.sac-checkin,
td.sac-checkout,
td.sac-turnover {
	color: var(--sac-user-text);
}

td.sac-free {
	background: var(--sac-free);
}

td.sac-full {
	background: var(--sac-busy);
	color: #fff;
}

/* Changeover halves in their own colour: the busy portion of a check-in
   day is the evening (bottom-right); of a check-out day, the morning
   (top-left). */
td.sac-checkin {
	background: linear-gradient(to bottom right, var(--sac-free) 49.5%, var(--sac-change) 50.5%);
}

td.sac-checkout {
	background: linear-gradient(to bottom right, var(--sac-change) 49.5%, var(--sac-free) 50.5%);
}

/* Turnover: one booking checks out, another checks in the same day —
   two changeover halves with a visible seam so butted-up bookings never
   read as one continuous stay. The day is still fully unavailable. */
td.sac-turnover {
	background: linear-gradient(
		to bottom right,
		var(--sac-change) 47%,
		var(--sac-seam) 47%,
		var(--sac-seam) 53%,
		var(--sac-change) 53%
	);
}

/* Past days fade toward the card: a semi-transparent card-colour veil
   over the whole cell (colours AND number) works on light and dark
   schemes alike — desaturation turned the pastels beige/brown on the
   dark card, and cell opacity would let the page bleed through. */
td.sac-past {
	position: relative;
}

/* ::before, not ::after — the admin editor's feed-provenance dot owns
   ::after on the same cells. */
td.sac-past::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sac-past-veil);
	pointer-events: none;
}

td.sac-today span {
	font-weight: 700;
	text-decoration: underline;
}

/* Nav layout is functional (always loaded); the *look* of the controls
   is decorative and only ships with the Full style — Light mode leaves
   buttons and selects to the theme/browser. */
.sac-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.5rem;
}

.sac-nav-jump {
	display: flex;
	align-items: center;
	gap: 0.4em;
	flex-wrap: wrap;
	justify-content: center;
}

.sac-nav select {
	max-width: 11em;
}

.sac-nav button:disabled {
	opacity: 0.4;
	cursor: default;
}

.sac-style-full .sac-nav button,
.sac-style-full .sac-nav select {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	background: var(--sac-control-bg);
	border: 1px solid var(--sac-control-border);
	border-radius: 4px;
	color: var(--sac-control-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9em;
	line-height: 1.4;
	min-height: 2.4em;
	padding: 0.3em 0.7em;
}

/* appearance:none removes the native dropdown arrow — draw our own. */
.sac-style-full .sac-nav select {
	background-image: var(--sac-chevron);
	background-repeat: no-repeat;
	background-position: right 0.6em center;
	background-size: 0.65em auto;
	padding-right: 1.9em;
}

.sac-style-full .sac-nav button:hover:not(:disabled),
.sac-style-full .sac-nav select:hover {
	border-color: var(--sac-control-border-hover);
}

.sac-style-full .sac-nav-prev,
.sac-style-full .sac-nav-next {
	font-size: 1.05em;
	line-height: 1.2;
}

/* Coarse pointers (phones/tablets): 44px touch targets and 16px font on
   the controls (smaller makes iOS Safari auto-zoom when a select is
   tapped). Everything stays on ONE line — as the native layout already
   proved fits — with the selects allowed to compress slightly rather
   than wrap. */
@media (pointer: coarse) {
	.sac-nav button,
	.sac-nav select {
		font-size: 16px;
		min-height: 44px;
		min-width: 0;
		padding: 0.35em 0.6em;
		white-space: nowrap;
	}

	.sac-nav-jump {
		flex-wrap: nowrap;
		min-width: 0;
	}

	.sac-style-full .sac-nav select {
		padding-right: 1.7em;
		background-position: right 0.45em center;
	}
}

.sac-calendar.sac-loading .sac-months {
	opacity: 0.5;
}

.sac-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25em;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	font-size: 0.85em;
}

.sac-legend li {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.sac-chip {
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 3px;
}

.sac-chip.sac-free {
	background: var(--sac-free);
}

.sac-chip.sac-full {
	background: var(--sac-busy);
}

.sac-chip.sac-checkout {
	background: linear-gradient(to bottom right, var(--sac-change) 49.5%, var(--sac-free) 50.5%);
}