/**
 * CCC datetime — вид как Siena ui_datetime + jQuery UI Redmond (синий).
 * Поле: рамка как Siena .form-control (без Bootstrap-класса).
 * Календарь: шапка #3b99fc, выбор #3b99fc, футер #6faef1 + «Закрыть».
 */

/* —— Контейнер (как .uidt) —— */
.cdt {
	display: inline;
	vertical-align: middle;
	max-width: 100%;
}

.cdt .cdt-source {
	display: inline;
}

.cdt .cdt-source select {
	display: inline-block;
	width: auto;
	margin-right: 0.2rem;
}

/* Обёртка поля + иконка (как .date_target / .birthday.shortdate) */
.cdt-target {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	max-width: 300px;
	width: 100%;
	margin: 0 0.35rem 0.25rem 0;
}

/* Combined datetime — на всю ширину колонки формы (скрин «Опубликовано с») */
.cdt.mode-datetime-combined {
	display: block;
	max-width: 100%;
}

.cdt.mode-datetime-combined .cdt-target {
	display: block;
	max-width: 100%;
	margin-right: 0;
}

/*
 * Компактная ширина datetime (как Siena .birthday max-width:300).
 * Обёртка в TPL: <div class="cotcustom-cdt cotcustom-cdt--w-300">…
 */
.cotcustom-cdt {
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
}

.cotcustom-cdt--w-300 {
	width: 300px;
	max-width: 100%;
}

.cotcustom-cdt--w-300 .cdt,
.cotcustom-cdt--w-300 .cdt.mode-datetime-combined,
.cotcustom-cdt--w-300 .cdt-target {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-right: 0;
}

.cdt-target.cdt-target-time {
	max-width: 7rem;
}

/*
 * Поле: Siena .form-control (essentials.css) — НЕ cotcustom underline.
 * Специфичность выше `.cotcustom-form input[type=text]`, плюс сброс gradient.
 */
.cdt .cdt-input,
.cotcustom-form .cdt .cdt-input,
.cotcustom-form .cdt input.cdt-input[type='text'] {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 46px !important;
	padding: 10px 40px 10px 12px;
	margin: 0;
	float: none;
	font: inherit;
	font-weight: 400;
	line-height: 1.4;
	color: #626262;
	background-color: #fff;
	background-image: none !important;
	background-size: auto !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
	border: 1px solid #dee5ed;
	border-radius: 3px;
	box-shadow: none;
	outline: none;
	transition: border-color 0.15s ease-in-out;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cdt .cdt-input:focus,
.cotcustom-form .cdt .cdt-input:focus,
.cotcustom-form .cdt input.cdt-input[type='text']:focus {
	border-color: #b8c4d4;
	outline: none;
	box-shadow: none;
	background-color: #fff;
	background-image: none !important;
	background-size: auto !important;
}

.cdt-target-time .cdt-input,
.cotcustom-form .cdt-target-time .cdt-input {
	padding-right: 12px;
}

/* Иконка календаря (как .ui-datepicker-trigger + calendar-blue.png) */
.cdt-trigger {
	position: absolute;
	top: 7px; /* (46 − 32) / 2 */
	right: 6px;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	-webkit-user-select: none;
	user-select: none;
}

.cdt-trigger img {
	display: block;
	width: 32px;
	height: 32px;
	pointer-events: none;
}

/* —— Календарь Flatpickr = Siena Redmond —— */
.flatpickr-calendar {
	width: 216px;
	font: 9pt Arial, Helvetica, sans-serif;
	border: 0;
	border-radius: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	background: #fff;
	overflow: hidden;
	padding: 0;
}

.flatpickr-calendar.animate.open {
	animation: cdtFpFade 0.15s ease-out;
}

@keyframes cdtFpFade {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Шапка — синяя как .ui-datepicker-header */
.flatpickr-months {
	background: #3b99fc;
	border: 0;
	border-top: 1px solid #3b99fc;
}

.flatpickr-months .flatpickr-month {
	height: 34px;
	color: #fff;
	fill: #fff;
}

.flatpickr-current-month {
	padding-top: 6px;
	font-size: 110%;
	font-weight: 700;
	color: #fff;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	color: #fff;
	font-weight: 700;
	background: transparent;
	border: 0;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	padding: 8px 6px;
	fill: #fff;
	color: #fff;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: #e9e9e9;
	color: #e9e9e9;
}

/* Дни недели */
.flatpickr-weekdays {
	background: linear-gradient(180deg, #f7f7f7 0%, #f1f1f1 100%);
	border-bottom: 1px solid #bbb;
}

span.flatpickr-weekday {
	font-size: 6pt;
	font-weight: 700;
	text-transform: uppercase;
	color: #666;
	text-shadow: 1px 0 0 #fff;
}

/* Сетка 7×30px = 210 + границы → 216 */
.flatpickr-days {
	width: 216px;
	padding: 0;
}

.dayContainer {
	width: 216px;
	min-width: 216px;
	max-width: 216px;
	min-height: auto;
}

.flatpickr-day {
	width: 30px;
	max-width: 30px;
	height: 30px;
	line-height: 30px;
	margin: 0;
	border-radius: 0;
	border: 0;
	border-right: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	font-weight: 700;
	color: #666;
	text-shadow: 1px 1px 0 #fff;
	background: linear-gradient(180deg, #ededed 0%, #dedede 100%);
	box-shadow: inset 1px 1px 0 rgba(250, 250, 250, 0.5);
}

.flatpickr-day:nth-child(7n) {
	border-right: 0;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.notAllowed {
	background: #f4f4f4;
	color: #b4b3b3;
	text-shadow: none;
	box-shadow: none;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
	background: #f7f7f7;
	border-color: #bbb;
	color: #333;
}

/* Выбранный день — #3b99fc */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus {
	background: #3b99fc;
	border-color: #3b99fc;
	color: #e0e0e0;
	text-shadow: 0 1px 0 #4d7a85;
	box-shadow: none;
}

.flatpickr-day.today {
	border-color: #3b99fc;
}

.flatpickr-day.today.selected {
	background: #3b99fc;
	color: #e0e0e0;
}

/* Штатное время Flatpickr скрыто — вместо него слайдеры Siena */
.flatpickr-time.cdt-time-native-hidden {
	display: none !important;
}

/* Блок времени со слайдерами (как jQuery UI timepicker-addon) */
.cdt-time-sliders {
	background: #e2e2e2;
	border-top: 1px solid #3b99fc;
	border-bottom: 1px solid #3b99fc;
	padding: 10px 8px 8px;
	box-sizing: border-box;
	font: 9pt Arial, Helvetica, sans-serif;
	color: #333;
}

.cdt-time-row {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	gap: 8px;
}

.cdt-time-row:last-child {
	margin-bottom: 0;
}

.cdt-time-label {
	flex: 0 0 58px;
	font-weight: 700;
	color: #555;
	text-align: left;
}

.cdt-time-row-value .cdt-time-value {
	font-weight: 700;
	color: #333;
	letter-spacing: 0.02em;
}

.cdt-time-range {
	flex: 1 1 auto;
	width: 100%;
	height: 0.5em;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	background: #3b99fc;
	border-radius: 0;
	outline: none;
	cursor: pointer;
}

.cdt-time-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 10px;
	height: 20px;
	background: #e2e2e2;
	border: 1px solid #3b99fc;
	border-radius: 0;
	cursor: pointer;
	box-shadow: none;
}

.cdt-time-range::-moz-range-thumb {
	width: 10px;
	height: 20px;
	background: #e2e2e2;
	border: 1px solid #3b99fc;
	border-radius: 0;
	cursor: pointer;
}

.cdt-time-range::-moz-range-track {
	height: 0.5em;
	background: #3b99fc;
	border: 0;
}

/* Футер: Текущее время + Закрыть */
.cdt-close-pane {
	height: 45px;
	background: #6faef1;
	box-sizing: border-box;
	padding: 0;
	clear: both;
	overflow: hidden;
}

.cdt-now-btn,
.cdt-close-btn {
	margin: 9px 9px 0 9px;
	padding: 3px 6px;
	font-size: 13px;
	line-height: 1.5;
	height: auto;
	border: 1px solid #bbb;
	border-radius: 3px;
	background: #e9e9e9;
	color: #333;
	cursor: pointer;
}

.cdt-now-btn {
	float: left;
}

.cdt-close-btn {
	float: right;
}

.cdt-now-btn:hover,
.cdt-close-btn:hover {
	background: #f7f7f7;
}

/* Combined / hasTime — шире */
.flatpickr-calendar.hasTime {
	width: 307px;
}

.flatpickr-calendar.hasTime .flatpickr-days,
.flatpickr-calendar.hasTime .dayContainer {
	width: 307px;
	min-width: 307px;
	max-width: 307px;
}

.flatpickr-calendar.hasTime .flatpickr-day {
	max-width: none;
	width: 14.2857143%;
	border-right: 1px solid #bbb;
}

.flatpickr-calendar.noCalendar {
	width: 160px;
}

.flatpickr-calendar.noCalendar .flatpickr-time {
	border-top: 0;
}