/*
 * Календарь: подгонка новой разметки под нашу прежнюю вёрстку.
 *
 * До десятой версии react-day-picker строил календарь из вложенных div-ов,
 * теперь это настоящая таблица, а внутри каждого дня — кнопка. Имена классов
 * мы вернули прежние (см. src/helpers/dayPickerCompat.js), поэтому все наши
 * четыреста правил продолжают работать. Здесь — только то, что нужно новой
 * разметке: как раскладывать месяцы, как убрать вид кнопки у дня и как
 * спрятать стрелки, которые библиотека теперь рисует сама (у нас свои).
 *
 * Файл подключается последним, после app-common.css.
 */

.DayPicker {
	position: relative;
	display: block;
}

/* Месяцы стоят рядом и переносятся на узком экране */
.DayPicker-Months {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 24px;
	position: relative;
}

.DayPicker-Month {
	display: block;
	width: 100%;
	max-width: 340px;
}

.DayPicker-Caption {
	display: block;
}

/* Сетка дней — настоящая таблица */
.DayPicker-Body-grid {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.DayPicker-Body-grid thead {
	display: table-header-group;
}

.DayPicker-WeekdaysRow {
	display: table-row;
}

.DayPicker-Body {
	display: table-row-group;
}

.DayPicker-Week {
	display: table-row;
}

.DayPicker-Day {
	display: table-cell;
	padding: 0;
}

/* Внутри дня теперь кнопка: снимаем с неё всякий вид, чтобы день выглядел
   ровно так, как выглядел раньше */
.DayPicker-Day-button {
	all: unset;
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.DayPicker-Day--disabled .DayPicker-Day-button {
	cursor: default;
}

/* Полоса перехода по месяцам: стрелки у нас свои, картинками.
   Селекторы с двумя классами — чтобы перебить стили самих календарей: они
   подключаются позже общих и иначе побеждают */
.DayPicker .DayPicker-NavBar,
.DayPicker-NavBar {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	padding: 0 .5rem;
	z-index: 2;
	height: 0;
}

.DayPicker .DayPicker-NavButton,
.BecomeCalendar .DayPicker-NavButton,
.DayPicker-NavButton {
	border: 0 !important;
	padding: 0;
	background-color: transparent !important;
	box-shadow: none;
}

.DayPicker-NavButton svg {
	display: none;
}

/* Кнопка «Сегодня» переехала в подвал календаря.
   Пометка important здесь по делу: в app-common.css подвал календаря прибит к
   правому верхнему углу — это было место прежней кнопки «Сегодня». Убрать то
   правило нельзя, оно нужно старым экранам, а перебить обычной силой не
   получается: у него тоже два класса */
.DayPicker .DayPicker-Footer,
.BecomeCalendar .DayPicker-Footer,
.DayPicker-Footer {
	position: static !important;
	top: auto !important;
	right: auto !important;
	clear: both;
	text-align: center;
	margin-top: 8px;
}