/* Kalendarz miesięczny — układ jak w mockupie (lipiec 2026) */
.date-month-picker {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	width: 100%;
}

.date-quick-col {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.date-month-calendar {
	width: 100%;
	max-width: 100%;
}

.date-month-nav-container {
	align-items: center;
	justify-content: flex-start;
	gap: clamp(1rem, 4vw, 3rem);
	margin-bottom: 0.35rem;
	width: 100%;
}

.date-month-label {
	font-size: clamp(2.2rem, 3.6vw + 0.6rem, 4.1rem);
	font-weight: 700;
	color: #000;
	text-transform: lowercase;
	min-width: 0;
	text-align: center;
	line-height: 1.1;
	white-space: nowrap;
}

.date-month-nav {
	background: none;
	border: none;
	color: #000;
	font-size: clamp(1.9rem, 2.4vw + 0.6rem, 2.9rem);
	line-height: 1;
	padding: 0.15rem 0.35rem;
	cursor: pointer;
	min-width: auto;
	height: auto;
	font-weight: 300;
	letter-spacing: -0.05em;
}

.date-month-nav:hover:not(:disabled) {
	color: #333;
}

.date-month-nav:disabled {
	opacity: 0.2;
	cursor: not-allowed;
}

.date-month-days-outer {
	width: 100%;
}

.date-month-days {
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: clamp(0.35rem, 1.2vw, 0.85rem);
	width: 100%;
	line-height: 1.2;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 0.15rem;
}

.date-month-days::-webkit-scrollbar {
	display: none;
}

.date-month-scroll-track {
	display: none;
}

.date-month-picker .day-button {
	background: none;
	border: none;
	min-width: 2.4rem;
	min-height: auto;
	padding: 0.15rem 0.2rem;
	font-size: clamp(1.35rem, 1.4vw + 0.7rem, 2rem);
	font-weight: 400;
	color: #b0b0b0;
	cursor: pointer;
	border-radius: 0;
	flex: 0 0 auto;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.date-month-picker .day-button:hover:not(:disabled) {
	color: #666;
	background: none;
}

.date-month-picker .day-button.is-sunday {
	color: #e53935;
}

.date-month-picker .day-button.is-sunday:hover:not(:disabled) {
	color: #c62828;
	background: none;
}

.date-month-picker .day-button.active {
	color: #000;
	font-weight: 600;
	background: none;
	border-bottom-color: #000;
}

.date-month-picker .day-button.is-sunday.active {
	color: #000;
	border-bottom-color: #000;
}

.date-month-picker .day-button:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Tablet — przewijanie dni w poziomie + pasek postępu */
@media (max-width: 1199px) {
	.date-month-days {
		justify-content: flex-start;
		flex-wrap: nowrap;
		padding-inline: 0.25rem;
	}

	.date-month-scroll-track {
		display: block;
		position: relative;
		height: 3px;
		margin-top: 0.45rem;
		background: #d8d8d8;
		border-radius: 2px;
		overflow: hidden;
		max-width: 100%;
	}

	.date-month-scroll-track.is-hidden {
		display: none;
	}

	.date-month-scroll-thumb {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		min-width: 2rem;
		background: #1a1a1a;
		border-radius: 2px;
		will-change: transform, width;
	}
}

/* Telefon */
@media (max-width: 670px) {
	.date-month-picker {
		gap: 0.35rem;
	}

	.date-month-nav-container {
		gap: 1.25rem;
		margin-bottom: 0.25rem;
	}

	.date-month-picker .day-button {
		min-width: 2rem;
		font-size: 1.35rem;
	}
}

@media (max-width: 480px) {
	.date-month-nav {
		padding: 0.1rem 0.15rem;
	}

	.date-month-picker .day-button {
		min-width: 1.8rem;
		font-size: 1.15rem;
	}
}