/* MonthGrid — reuses calendar tokens for visual consistency. */

[data-month-grid] {
	--_month-grid-padding: var(--calendar-padding-md);
	--_month-grid-control-size: var(--calendar-control-size-md);
	--_month-grid-cell-size: var(--calendar-day-size-md);
	--_month-grid-font-size: var(--calendar-font-size-md);
	--_month-grid-accent-solid: var(--color-primary-solid);
	--_month-grid-accent-solid-hover: var(--color-primary-solid-hover);
	--_month-grid-accent-track: var(--color-primary-track);
	--_month-grid-accent-border: var(--color-primary-border);
	--_month-grid-accent-text: var(--color-primary-text);

	display: inline-flex;
	flex-direction: column;
	gap: var(--calendar-gap);
	inline-size: max-content;
	max-inline-size: 100%;
	box-sizing: border-box;
	padding: var(--_month-grid-padding);
	border: var(--calendar-border-width) solid var(--calendar-border);
	border-radius: var(--calendar-radius);
	background: var(--calendar-bg);
	box-shadow: var(--calendar-shadow);
	color: var(--calendar-color);
	font-family: var(--calendar-font-family);
	font-size: var(--_month-grid-font-size);
	line-height: var(--calendar-line-height);
}

[data-month-grid][data-size='xs'] {
	--_month-grid-padding: var(--calendar-padding-xs);
	--_month-grid-control-size: var(--calendar-control-size-xs);
	--_month-grid-cell-size: var(--calendar-day-size-xs);
	--_month-grid-font-size: var(--calendar-font-size-xs);
}

[data-month-grid][data-size='sm'] {
	--_month-grid-padding: var(--calendar-padding-sm);
	--_month-grid-control-size: var(--calendar-control-size-sm);
	--_month-grid-cell-size: var(--calendar-day-size-sm);
	--_month-grid-font-size: var(--calendar-font-size-sm);
}

[data-month-grid][data-size='lg'] {
	--_month-grid-padding: var(--calendar-padding-lg);
	--_month-grid-control-size: var(--calendar-control-size-lg);
	--_month-grid-cell-size: var(--calendar-day-size-lg);
	--_month-grid-font-size: var(--calendar-font-size-lg);
}

[data-month-grid][data-variant='outline'] {
	background: var(--calendar-outline-bg);
	box-shadow: var(--calendar-outline-shadow);
}

[data-month-grid][data-variant='ghost'] {
	padding: 0;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

[data-month-grid][data-color='secondary'] {
	--_month-grid-accent-solid: var(--color-secondary-solid);
	--_month-grid-accent-solid-hover: var(--color-secondary-solid-hover);
	--_month-grid-accent-track: var(--color-secondary-track);
	--_month-grid-accent-border: var(--color-secondary-border);
	--_month-grid-accent-text: var(--color-secondary-text);
}

[data-month-grid][data-color='neutral'] {
	--_month-grid-accent-solid: var(--color-neutral-solid);
	--_month-grid-accent-solid-hover: var(--color-neutral-solid-hover);
	--_month-grid-accent-track: var(--color-neutral-track);
	--_month-grid-accent-border: var(--color-neutral-border);
	--_month-grid-accent-text: var(--color-neutral-text);
}

[data-month-grid][data-color='affirm'] {
	--_month-grid-accent-solid: var(--color-affirm-solid);
	--_month-grid-accent-solid-hover: var(--color-affirm-solid-hover);
	--_month-grid-accent-track: var(--color-affirm-track);
	--_month-grid-accent-border: var(--color-affirm-border);
	--_month-grid-accent-text: var(--color-affirm-text);
}

[data-month-grid][data-color='fulfill'] {
	--_month-grid-accent-solid: var(--color-fulfill-solid);
	--_month-grid-accent-solid-hover: var(--color-fulfill-solid-hover);
	--_month-grid-accent-track: var(--color-fulfill-track);
	--_month-grid-accent-border: var(--color-fulfill-border);
	--_month-grid-accent-text: var(--color-fulfill-text);
}

[data-month-grid][data-color='risk'] {
	--_month-grid-accent-solid: var(--color-risk-solid);
	--_month-grid-accent-solid-hover: var(--color-risk-solid-hover);
	--_month-grid-accent-track: var(--color-risk-track);
	--_month-grid-accent-border: var(--color-risk-border);
	--_month-grid-accent-text: var(--color-risk-text);
}

[data-month-grid][data-color='threat'] {
	--_month-grid-accent-solid: var(--color-threat-solid);
	--_month-grid-accent-solid-hover: var(--color-threat-solid-hover);
	--_month-grid-accent-track: var(--color-threat-track);
	--_month-grid-accent-border: var(--color-threat-border);
	--_month-grid-accent-text: var(--color-threat-text);
}

[data-month-grid][data-color='loss'] {
	--_month-grid-accent-solid: var(--color-loss-solid);
	--_month-grid-accent-solid-hover: var(--color-loss-solid-hover);
	--_month-grid-accent-track: var(--color-loss-track);
	--_month-grid-accent-border: var(--color-loss-border);
	--_month-grid-accent-text: var(--color-loss-text);
}

[data-month-grid-header] {
	display: grid;
	grid-template-columns:
		var(--_month-grid-control-size)
		minmax(0, 1fr)
		var(--_month-grid-control-size);
	align-items: center;
	gap: var(--calendar-header-gap);
	inline-size: 100%;
	min-inline-size: 0;
}

[data-month-grid-heading] {
	min-inline-size: 0;
	color: var(--calendar-heading-color);
	font-size: var(--calendar-heading-font-size);
	font-weight: var(--calendar-heading-font-weight);
	text-align: center;
}

[data-month-grid-prev-button],
[data-month-grid-next-button] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: var(--_month-grid-control-size);
	block-size: var(--_month-grid-control-size);
	padding: 0;
	border: var(--calendar-control-border-width) solid var(--calendar-control-border);
	border-radius: var(--calendar-control-radius);
	background: var(--calendar-control-bg);
	color: var(--calendar-control-color);
	cursor: pointer;
	transition:
		background var(--calendar-transition-duration) var(--calendar-transition-ease),
		border-color var(--calendar-transition-duration) var(--calendar-transition-ease),
		color var(--calendar-transition-duration) var(--calendar-transition-ease),
		box-shadow var(--calendar-transition-duration) var(--calendar-transition-ease);
}

[data-month-grid-prev-button]:hover,
[data-month-grid-next-button]:hover {
	border-color: var(--calendar-control-border-hover);
	background: var(--calendar-control-bg-hover);
	color: var(--calendar-control-color-hover);
}

[data-month-grid-prev-button]:focus-visible,
[data-month-grid-next-button]:focus-visible,
[data-month-grid-cell]:focus-visible {
	outline: none;
	box-shadow: var(--calendar-focus-shadow);
}

[data-month-grid-prev-button][data-disabled],
[data-month-grid-next-button][data-disabled] {
	cursor: not-allowed;
	opacity: var(--calendar-disabled-opacity);
}

[data-month-grid-grid] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--calendar-grid-gap);
	inline-size: max-content;
	max-inline-size: 100%;
}

/* When the month-grid sits inside a popover (DatePicker.MonthView), stretch
   to the popover's content width so the cells distribute across the same
   inline size as the picker-shell footer. */
[data-popover-content] [data-month-grid] {
	inline-size: 100%;
}
[data-popover-content] [data-month-grid-grid] {
	inline-size: 100%;
}

[data-month-grid-cell] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: calc(var(--_month-grid-cell-size) * 2);
	block-size: var(--_month-grid-cell-size);
	padding-inline: var(--calendar-select-px, 8px);
	border: var(--calendar-day-border-width) solid var(--calendar-day-border);
	border-radius: var(--calendar-day-radius);
	background: var(--calendar-day-bg);
	color: var(--calendar-day-color);
	font: inherit;
	font-weight: var(--calendar-day-font-weight);
	cursor: pointer;
	user-select: none;
	transition:
		background var(--calendar-transition-duration) var(--calendar-transition-ease),
		border-color var(--calendar-transition-duration) var(--calendar-transition-ease),
		color var(--calendar-transition-duration) var(--calendar-transition-ease),
		box-shadow var(--calendar-transition-duration) var(--calendar-transition-ease),
		opacity var(--calendar-transition-duration) var(--calendar-transition-ease);
}

[data-month-grid-cell]:hover {
	border-color: var(--calendar-day-border-hover);
	background: var(--calendar-day-bg-hover);
	color: var(--calendar-day-color-hover);
}

[data-month-grid-cell][data-selected] {
	border-color: var(--_month-grid-accent-solid);
	background: var(--_month-grid-accent-solid);
	color: var(--calendar-day-selected-color);
}

[data-month-grid-cell][data-selected]:hover {
	border-color: var(--_month-grid-accent-solid-hover);
	background: var(--_month-grid-accent-solid-hover);
}

[data-month-grid-cell][data-focused]:not([data-selected]) {
	border-color: var(--_month-grid-accent-border);
	background: var(--_month-grid-accent-track);
	color: var(--_month-grid-accent-text);
}

[data-month-grid-cell][data-current]:not([data-selected]) {
	border-color: var(--calendar-day-today-border);
	color: var(--calendar-day-today-color);
	font-weight: var(--calendar-day-today-font-weight);
}

[data-month-grid-cell][data-disabled] {
	cursor: not-allowed;
	opacity: var(--calendar-disabled-opacity);
}

[data-month-grid][data-disabled] {
	opacity: var(--calendar-disabled-opacity);
}

[data-month-grid][data-readonly] [data-month-grid-cell]:not([data-selected]) {
	cursor: default;
}

[data-month-grid][data-readonly] [data-month-grid-cell]:not([data-selected]):hover {
	background: var(--calendar-day-bg);
	border-color: var(--calendar-day-border);
	color: var(--calendar-day-color);
}

[data-month-grid][data-event],
[data-month-grid-cell][data-event],
[data-month-grid-prev-button][data-event],
[data-month-grid-next-button][data-event] {
	box-shadow: var(--calendar-event-shadow);
}

@media (prefers-reduced-motion: reduce) {
	[data-month-grid-prev-button],
	[data-month-grid-next-button],
	[data-month-grid-cell] {
		transition: none;
	}
}