/*
 * Calendrier de réservation — CPT `reservations`.
 *
 * Sert deux contextes avec la même grille :
 *   - page d'admin « Réservations → Calendrier » (.wrap.tris-resa) — les variables
 *     CSS d'Enfold ne sont pas chargées ici : gris neutres + accent `--tris-brand-red` ;
 *   - template public single (.tris-resa--single) — lecture seule, tokens `--component-*`.
 *
 * Spécificité : les styles de base des cellules passent par :where() (poids 0) pour
 * que les états `.is-weekend` / `.is-today` / `.is-reserved` / `.is-void` l'emportent
 * sans !important. `.is-hot` (survol) n'agit que par box-shadow, sans toucher au fond.
 */

.tris-resa {
	--tris-resa-accent: var(--tris-brand-red, #c0392b);
	--tris-resa-line: #d7dbe0;
	--tris-resa-head-bg: #f2f4f7;
	--tris-resa-weekend-bg: #eaeef5;
	--tris-resa-reserved-bg: #fbe9e7;
	--tris-resa-void-bg: #f3f4f6;
	--tris-resa-hot: rgba(37, 99, 235, 0.09);
	--tris-resa-radius: 6px;
}

/* ---------------------------------------------------------------------------
 * Barre d'outils
 * ------------------------------------------------------------------------ */

.tris-resa__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 16px 0 4px;
}

.tris-resa__toolbar select {
	min-height: 32px;
}

.tris-resa__summary {
	margin: 14px 0 6px;
	font-size: 13px;
	color: #50575e;
}

.tris-resa__summary strong {
	font-size: 15px;
	color: #1d2327;
}

.tris-resa__summary-sep {
	margin: 0 8px;
	color: #a7aaad;
}

/* ---------------------------------------------------------------------------
 * Grille
 * ------------------------------------------------------------------------ */

.tris-resa__scroll {
	overflow: auto;
	max-height: 78vh;
	-webkit-overflow-scrolling: touch;
	margin: 8px 0 14px;
	border: 1px solid var(--tris-resa-line);
	border-radius: var(--tris-resa-radius);
	background: #fff;
}

.tris-resa__grid {
	border-collapse: separate;
	border-spacing: 0;
	width: auto; /* la table se cale sur son contenu : la colonne des mois ne s'étire plus. */
	font-size: 12px;
	line-height: 1;
}

.tris-resa__grid :where(th, td) {
	border-right: 1px solid #e6e8eb;
	border-bottom: 1px solid #e6e8eb;
	text-align: center;
	padding: 0;
}

.tris-resa__grid :where(thead th) {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: var(--tris-resa-head-bg);
	font-weight: 600;
	color: #3c434a;
	padding: 7px 0;
	white-space: nowrap;
}

.tris-resa__daynum {
	width: 26px;
	min-width: 26px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	cursor: default;
}

.tris-resa__grid :where(.tris-resa__month) {
	position: sticky;
	left: 0;
	z-index: 1;
	background-color: var(--tris-resa-head-bg);
	font-weight: 500;
	color: #3c434a;
	text-align: right;
	white-space: nowrap;
	padding: 4px 12px;
}

.tris-resa__corner {
	position: sticky;
	left: 0;
	z-index: 3;
	background-color: var(--tris-resa-head-bg);
	font-variant-numeric: tabular-nums;
}

.tris-resa__total-head,
.tris-resa__total {
	width: 34px;
	min-width: 34px;
	border-left: 2px solid var(--tris-resa-line);
	font-variant-numeric: tabular-nums;
}

.tris-resa__total {
	color: #c3c6c9;
	font-size: 11px;
}

.tris-resa__total.has-count {
	color: var(--tris-resa-accent);
	font-weight: 700;
	background-color: var(--tris-resa-reserved-bg);
}

/* --- Cellules jour ---------------------------------------------------------- */

.tris-resa__cell {
	height: 30px;
}

.tris-resa__cell.is-weekend {
	background-color: var(--tris-resa-weekend-bg);
}

.tris-resa__cell.is-today {
	box-shadow: inset 0 0 0 2px var(--tris-resa-accent);
}

.tris-resa__cell.is-void {
	background-color: var(--tris-resa-void-bg);
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 4px,
		rgba(0, 0, 0, 0.05) 4px,
		rgba(0, 0, 0, 0.05) 6px
	);
}

.tris-resa__cell.is-reserved {
	background-color: var(--tris-resa-reserved-bg);
}

.tris-resa__void {
	display: block;
	min-height: 30px;
}

/* --- Case cliquable (toute la cellule) ----------------------------------- */

.tris-resa__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.tris-resa__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 30px;
	cursor: pointer;
}

.tris-resa__tick {
	width: 15px;
	height: 15px;
	border: 1.5px solid #b9bec4;
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.tris-resa__grid--editable .tris-resa__cell:hover .tris-resa__tick {
	border-color: var(--tris-resa-accent);
}

.tris-resa__input:checked + .tris-resa__box .tris-resa__tick,
.tris-resa__tick--static {
	position: relative;
	border-color: var(--tris-resa-accent);
	background-color: var(--tris-resa-accent);
}

.tris-resa__input:checked + .tris-resa__box .tris-resa__tick::after,
.tris-resa__tick--static::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.tris-resa__input:focus-visible + .tris-resa__box {
	outline: 2px solid var(--tris-resa-accent);
	outline-offset: -2px;
}

/* --- Survol : croix de repérage ---------------------------------------- */

.tris-resa__grid :where(.is-hot) {
	box-shadow: inset 0 0 0 999px var(--tris-resa-hot);
}

.tris-resa__grid :where(th.is-hot) {
	color: var(--tris-resa-accent);
}

/* ---------------------------------------------------------------------------
 * Légende
 * ------------------------------------------------------------------------ */

.tris-resa__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 12px 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #50575e;
}

.tris-resa__legend li {
	display: flex;
	align-items: center;
	gap: 7px;
}

.tris-resa__swatch {
	width: 15px;
	height: 15px;
	border: 1px solid var(--tris-resa-line);
	border-radius: 4px;
	background: #fff;
}

.tris-resa__swatch--reserved {
	border-color: var(--tris-resa-accent);
	background-color: var(--tris-resa-accent);
}

.tris-resa__swatch--weekend {
	background-color: var(--tris-resa-weekend-bg);
}

.tris-resa__swatch--today {
	box-shadow: inset 0 0 0 2px var(--tris-resa-accent);
}

.tris-resa__swatch--void {
	background-color: var(--tris-resa-void-bg);
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 3px,
		rgba(0, 0, 0, 0.06) 3px,
		rgba(0, 0, 0, 0.06) 5px
	);
}

.tris-resa__hint {
	color: #646970;
	font-size: 13px;
}

/* ---------------------------------------------------------------------------
 * Contexte front (template single) — tokens du thème enfant.
 * ------------------------------------------------------------------------ */

.tris-resa--single {
	max-width: var(--component-max-width, 1560px);
	margin: 0 auto;
	padding: var(--component-space-normal, 64px) var(--component-gutter, 24px);
	font-family: var(--component-font-family, inherit);
	color: var(--component-color-text, #4e4e4e);
}

.tris-resa--single .tris-resa__title {
	margin: 0 0 12px;
	color: var(--component-color-dark, #1a1a1a);
	text-transform: none;
}

.tris-resa--single .tris-resa__voir {
	padding: 7px 18px;
	border: 0;
	border-radius: var(--component-radius, 8px);
	background-color: var(--component-color-primary, #1e73be);
	color: var(--component-color-button-font, #fff);
	cursor: pointer;
}

.tris-resa--single .tris-resa__scroll {
	max-height: none;
}