/*
 * Flatpickr skin for the date picker, plus hiding legacy chrome the clean UI
 * replaced.
 *
 * The calendar sheet and its date bar are owned by tdc-sheet.css — do not add
 * sheet rules here, or the two files start fighting over the same elements.
 */

/* Legacy day header — the sheet owns the date display now */
body.tdc-ui-clean .mp-dayhead,
body.tdc-ui-clean #mp-dayhead,
body.tdc-ui-clean .dc-today-head {
  display: none;
}

/* Viewing banner duplicates the toolbar's Today button */
body.tdc-ui-clean .vd-viewing,
body.tdc-ui-clean #viewing-banner {
  display: none;
}

/* ---- Flatpickr: compact, arrows at the header edges ---- */
body.tdc-ui-clean #cal-flatpickr-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

body.tdc-ui-clean .flatpickr-calendar.tdc-flatpickr,
.flatpickr-calendar.tdc-flatpickr {
  width: 280px;
  padding: 0 0 8px;
  margin-top: 4px;
  border: 1px solid var(--dc-line, #e6e0d6);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 42, 72, 0.14);
  font-family: var(--dc-sans, "Roboto", sans-serif);
  overflow: hidden;
  z-index: 120;
}

body.tdc-ui-clean .flatpickr-calendar.tdc-flatpickr::before,
body.tdc-ui-clean .flatpickr-calendar.tdc-flatpickr::after,
.flatpickr-calendar.tdc-flatpickr::before,
.flatpickr-calendar.tdc-flatpickr::after {
  display: none;
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-months {
  position: relative;
  background: var(--dc-navy, #123456);
  border-radius: 0;
  padding: 4px 0;
  height: 42px;
}

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

.flatpickr-calendar.tdc-flatpickr .flatpickr-current-month {
  left: 0;
  width: 100%;
  padding-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar.tdc-flatpickr .flatpickr-current-month input.cur-year {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  background: transparent;
  border-radius: 4px;
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar.tdc-flatpickr .flatpickr-current-month input.cur-year:hover {
  background: rgba(255, 255, 255, 0.12);
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar.tdc-flatpickr .flatpickr-months .flatpickr-next-month {
  position: absolute;
  top: 0;
  height: 42px;
  width: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  fill: rgba(255, 255, 255, 0.9);
  color: rgba(255, 255, 255, 0.9);
  z-index: 3;
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-months .flatpickr-prev-month {
  left: 0;
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-months .flatpickr-next-month {
  right: 0;
  left: auto;
}

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

.flatpickr-calendar.tdc-flatpickr .flatpickr-weekdays {
  background: var(--dc-paper-deep, #faf7f2);
  padding: 4px 0 0;
}

.flatpickr-calendar.tdc-flatpickr span.flatpickr-weekday {
  color: var(--dc-mute, #6b6570);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-days {
  width: 100%;
  padding: 2px 8px 0;
}

.flatpickr-calendar.tdc-flatpickr .dayContainer {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-day {
  max-width: 34px;
  height: 34px;
  line-height: 34px;
  margin: 1px 0;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--dc-ink, #1c1917);
  font-size: 13px;
  font-weight: 500;
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-day:hover,
.flatpickr-calendar.tdc-flatpickr .flatpickr-day:focus {
  background: rgba(128, 0, 32, 0.08);
  border-color: transparent;
  color: var(--dc-maroon, #800020);
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-day.today {
  border-color: var(--dc-maroon, #800020);
  color: var(--dc-maroon, #800020);
  font-weight: 700;
  background: transparent;
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-day.today:hover {
  background: rgba(128, 0, 32, 0.08);
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-day.selected,
.flatpickr-calendar.tdc-flatpickr .flatpickr-day.selected:hover,
.flatpickr-calendar.tdc-flatpickr .flatpickr-day.selected:focus,
.flatpickr-calendar.tdc-flatpickr .flatpickr-day.today.selected {
  background: var(--dc-maroon, #800020);
  border-color: var(--dc-maroon, #800020);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

.flatpickr-calendar.tdc-flatpickr .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.tdc-flatpickr .flatpickr-day.prevMonthDay,
.flatpickr-calendar.tdc-flatpickr .flatpickr-day.nextMonthDay {
  color: rgba(28, 25, 23, 0.28);
}