/*
 * entrada-calendar.css — Estilos do componente EntradaCalendar
 *
 * Componente próprio (assets/js/entrada-calendar.js), DOM aberto, sem Shadow DOM.
 *
 */

/* ==========================================================================
   Wrapper do calendário
   ========================================================================== */

.reserva-label-container {
	margin: 12px 0;
}

.entrada-calendar {
	/* cor-fonte única → derivações */
	--ec-weekend: var(--cor-secundaria);          /* fim de semana: cor base   */
	--ec-weekday: var(--cor-secundaria-clara);    /* dia útil: cor processada  */
	--ec-selected: var(--color-orange-50);        /* destaque de seleção (seletor de mês) */
	--ec-ring: var(--cor-secundaria);             /* anel de destaque do dia selecionado */
	--ec-on-color: var(--color-beige-10);         /* texto sobre cor cheia     */
	--ec-text: var(--cor-secundaria);
	--ec-muted: color-mix(in srgb, var(--cor-secundaria) 45%, transparent);
	--ec-disabled: #bbb;
	--ec-gap: 1.2cqi;             /* gap proporcional à largura do componente */

	container-type: inline-size;  /* habilita unidades cqi (escala pela largura própria) */
	width: 100%;                  /* ocupa toda a largura útil do card */
	margin: 12px auto 0;
	border-radius: 16px;
	user-select: none;
}

/* ==========================================================================
   Header de navegação
   ========================================================================== */

.ec-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 8px 12px;
}

.ec-title {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 10px;
	font-family: 'Poppins-SemiBold';
	font-size: clamp(14px, 4.2cqi, 20px);
	color: var(--ec-text);
	text-transform: capitalize;
	transition: background .15s;
}

.ec-title:hover:not(:disabled) {
	background: color-mix(in srgb, var(--ec-text) 10%, transparent);
}

.ec-title:disabled {
	cursor: default;
}

.ec-title__caret {
	font-size: .6em;
	transition: transform .15s;
}

.ec-header--picker .ec-title__caret {
	transform: rotate(180deg);
}

/* Enquanto o seletor está aberto, as setas de mês somem (título centralizado) */
.ec-header--picker .ec-nav {
	visibility: hidden;
}

.ec-nav {
	width: clamp(30px, 9cqi, 40px);
	height: clamp(30px, 9cqi, 40px);
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--ec-text);
	font-size: clamp(15px, 4.5cqi, 20px);
	cursor: pointer;
	transition: background .15s;
}

.ec-nav:hover:not(:disabled) {
	background: color-mix(in srgb, var(--ec-text) 10%, transparent);
}

.ec-nav:disabled {
	opacity: .25;
	cursor: default;
}

/* ==========================================================================
   Grade (cabeçalho de dias + células)
   ========================================================================== */

.ec-weekdays,
.ec-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--ec-gap);
}

.ec-weekday {
	text-align: center;
	font-size: clamp(10px, 3cqi, 13px);
	letter-spacing: .02em;
	white-space: nowrap;
	/*color: var(--ec-muted);*/
	font-family: 'Poppins-SemiBold';
	padding-bottom: 6px;
}

/* ==========================================================================
   Seletor de mês/ano (painel inline, substitui a grade de dias)
   ========================================================================== */

.ec-picker__years {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 4px 0 12px;
}

.ec-picker__year {
	font-family: 'Poppins-SemiBold';
	font-size: clamp(14px, 4.2cqi, 20px);
	color: var(--ec-text);
	min-width: 3.5em;
	text-align: center;
}

.ec-picker__months {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ec-gap);
}

.ec-picker__month {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: clamp(10px, 3.5cqi, 16px) 0;
	border-radius: clamp(8px, 3cqi, 14px);
	font-family: 'Poppins-SemiBold';
	font-size: clamp(12px, 3.6cqi, 15px);
	color: var(--ec-text);
	transition: background .15s, color .15s;
}

.ec-picker__month:hover:not(:disabled):not(.ec-picker__month--current) {
	background: color-mix(in srgb, var(--ec-text) 12%, transparent);
}

.ec-picker__month--current {
	background: var(--ec-selected);
	color: var(--cor-secundaria);
}

.ec-picker__month:disabled {
	color: color-mix(in srgb, var(--ec-text) 30%, transparent);
	cursor: not-allowed;
}

/* ==========================================================================
   Célula
   ========================================================================== */

.ec-day {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;             /* altura acompanha a largura da célula (1fr) */
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: clamp(8px, 3cqi, 14px);
	color: var(--ec-text);
	font-size: clamp(12px, 4cqi, 16px);
	transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}

.ec-day__num {
	position: relative;
	z-index: 1;
}

.ec-day:hover:not(.ec-day--disabled):not(.ec-day--selected):not(.ec-day--past) {
	background: color-mix(in srgb, var(--ec-text) 12%, transparent);
}

/* Dia útil aberto (ter–sex) — cor processada/clara.
   Também vale quando selecionado (mantém a cor de base sob o anel de destaque;
   o estilo inline de cor dinâmica, quando existir, sempre tem prioridade). */
.ec-day--weekday:not(.ec-day--disabled) {
	background: var(--ec-weekday);
	color: var(--ec-on-color);
}

/* Fim de semana / feriado aberto — cor base */
.ec-day--weekend:not(.ec-day--disabled) {
	background: var(--ec-weekend);
	color: var(--ec-on-color);
	font-family: 'Poppins-SemiBold';
}

/* Hoje (cede o anel para o estado selecionado, se houver) */
.ec-day--today:not(.ec-day--selected) {
	box-shadow: inset 0 0 0 2px var(--ec-selected);
	font-family: 'Poppins-SemiBold';
}

/* Selecionado — mantém a cor de fundo do dia (útil/fim de semana/dinâmica) e
   destaca com anel duplo (contraste em qualquer cor) + leve elevação, em vez
   de sobrescrever a cor da célula. */
.ec-day--selected {
	overflow: visible;
	z-index: 1;
	transform: scale(1.06);
	box-shadow:
		inset 0 0 0 2px var(--color-beige-10),
		0 0 0 3px var(--ec-ring),
		0 4px 10px color-mix(in srgb, var(--ec-ring) 35%, transparent);
	font-family: 'Poppins-SemiBold';
}

/* Fechado (sem atendimento) — base de cor + hachura diagonal */
.ec-day--disabled,
.ec-day--disabled:hover {
	color: color-mix(in srgb, var(--ec-text) 40%, transparent);
	cursor: not-allowed;
	background-color: color-mix(in srgb, var(--ec-text) 8%, transparent);
	background-image: repeating-linear-gradient(
		-45deg,
		color-mix(in srgb, var(--ec-text) 16%, transparent) 0,
		color-mix(in srgb, var(--ec-text) 16%, transparent) 1px,
		transparent 1px,
		transparent 6px
	);
}

/* Fora do mês visível (dias de outro mês aparecendo na grade) */
.ec-day--other {
	visibility: hidden;
}

/* Dia já passado — mantém a cor de fundo padrão do dia, porém esmaecida */
.ec-day--past {
	opacity: .5;
	cursor: not-allowed;
}

/* ==========================================================================
   Tag de escassez (triângulo no canto superior direito)
   Ativada pela classe .ec-day--escasso na célula.
   ========================================================================== */

.ec-day__tag {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 clamp(16px, 6cqi, 26px) clamp(16px, 6cqi, 26px) 0;
	border-color: transparent #FF6600 transparent transparent;
	z-index: 2;
}

.ec-day--escasso .ec-day__tag {
	display: block;
}

/* ==========================================================================
   Spinner de carregamento de janela
   Exibido no botão "próximo" durante fetch de nova janela de 3 meses.
   ========================================================================== */

.ec-spinner {
	display: inline-block;
	width:  clamp(10px, 3cqi, 14px);
	height: clamp(10px, 3cqi, 14px);
	border: 2px solid color-mix(in srgb, var(--ec-text) 25%, transparent);
	border-top-color: var(--ec-text);
	border-radius: 50%;
	animation: ec-spin 0.65s linear infinite;
}

@keyframes ec-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   Legenda de datas — chips compactos (fica fora de .entrada-calendar no HTML,
   por isso usa os tokens globais --cor-secundaria/--cor-terciaria em vez das
   variáveis --ec-* escopadas ao calendário)
   ========================================================================== */

.ec-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	margin-bottom: 16px;
}

.ec-legenda__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	border-radius: 30px;
	background: var(--cor-terciaria);
	border: 1.5px solid transparent;
	font-family: 'Poppins-Medium';
	font-size: clamp(11px, 3cqi, 13px);
	color: var(--cor-secundaria);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ec-legenda__dot {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	flex-shrink: 0;
}

/* Fechado — mesma textura hachurada da célula fechada, em miniatura */
.ec-legenda__chip--fechado .ec-legenda__dot {
	background-color: color-mix(in srgb, var(--cor-secundaria) 14%, transparent);
	background-image: repeating-linear-gradient(
		-45deg,
		color-mix(in srgb, var(--cor-secundaria) 55%, transparent) 0,
		color-mix(in srgb, var(--cor-secundaria) 55%, transparent) 1px,
		transparent 1px,
		transparent 3px
	);
}